@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   business.css · Seite „Geschäftskunden"
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (global.css)
   Präfix    : kh-business-  ·  Schema: kh-block__element--modifier
   --------------------------------------------------------------------------
   WARUM DIESE SEITE ANDERS AUSSIEHT ALS DIE PRIVATKUNDENSEITEN

   Wer hier liest, entscheidet nicht für sich allein, sondern für
   einen Betrieb. Das ändert den Ton und damit die Form:

       kein Bild        Es gibt im Bestand kein Foto, das eine
                        Geschäftskundenberatung zeigt. Ein
                        Privatkundenmotiv hier einzusetzen wäre
                        falsch — also trägt Typografie die Seite.
       Gesprächsfelder  Der Einstieg sind sieben Felder, die im
                        Gespräch geklärt werden. Sie stehen neben-
                        einander, nicht hintereinander: eine Agenda,
                        kein Ablauf.
       Zwei Welten      Mobilfunk und Internet stehen nebeneinander
                        statt untereinander. Im Betrieb hängen beide
                        zusammen; die Form sagt das mit.
       ein CTA          Ein einziger Weg am Ende, auf /kontakt/.

   ROT
   Ein Werkzeug, kein Anstrich: je Abschnitt genau ein rotes Element.
   Im Kopf die Fläche, bei den Gesprächsfeldern die Schiene, bei der
   Beratung die Kante des Zitats, bei den Teams die Kante des Absatzes,
   im Abschluss der Anschnitt und die Schaltfläche. Die Nummern der
   Gesprächsfelder sind bewusst grau — sieben rote Zahlen wären eine
   Behauptung von Dringlichkeit, die der Inhalt nicht deckt.

   BEWEGUNG
   Auf dieser Seite bewegt sich ausser dem Motiv im Kopf nichts. Das
   Ringmotiv im Abschluss steht still (siehe Abschnitt 06).
   ========================================================================== */


/* ==========================================================
   00. VERTIKALER RHYTHMUS
   ========================================================== */

.kh-business-hero   { padding-block: clamp(44px, 3.5vw + 22px, 88px) clamp(40px, 3vw + 18px, 72px); }
.kh-business-scope  { padding-block: clamp(48px, 4vw + 20px, 88px); }
.kh-business-pair   { padding-block: clamp(48px, 4vw + 20px, 88px); }
.kh-business-advice { padding-block: clamp(48px, 4vw + 24px, 96px); }
.kh-business-teams  { padding-block: clamp(44px, 3vw + 20px, 76px); }
.kh-business-cta    { padding-block: clamp(56px, 5vw + 28px, 112px); }


/* ==========================================================
   01. KOPFBEREICH — UNVERÄNDERT
   ==========================================================
   Gleiche Bauart wie „Kontakt": Text links, Motiv rechts, gleiche
   gerechnete Werte. Die Seiten sollen als Geschwister erkennbar
   sein; unterschiedlich wird es erst darunter.

   An diesem Abschnitt wurde beim Umbau nichts geändert.
   ========================================================== */

/* NACHTRAG 19.10.2026 · DER EINZIGE KOPF, DER NICHT ROT IST
   -------------------------------------------------------------
   Vier Seiten, vier rote Köpfe mit denselben Werten — gemessen:
   drei davon (Lösungen, Geschäftskunden, Partner) standen auf
   exakt derselben Ringgeometrie. Das war keine Geschwisterschaft
   mehr, das war eine Kopie.

   Dieser Kopf wechselt als einziger die Fläche. Nicht, um anders
   zu sein, sondern weil er als einziger einen anderen Leser hat:
   die Seite richtet sich an Betriebe, und ihr inhaltlicher Anker
   (die Beratung) ist bereits dunkel. Ein dunkler Kopf schliesst
   die Klammer.

   Es ist KEIN fremder dunkler Kopf: Ringgeometrie, Signet,
   Radarbewegung, Schrift und Rot als Akzent bleiben exakt die
   des Markenkopfs. Getauscht wird nur der Untergrund — statt
   kh-section--brand steht kh-section--dark im Markup, damit auch
   Eyebrow und Schaltflächen ihre Dunkel-Farbrollen bekommen. */

.kh-business-hero {
  --kh-ring-cx: 78%;
  --kh-ring-cy: 50%;
  --kh-mark-size: clamp(56px, 6.2vw, 92px);

  /* Derselbe Verlauf wie am Markenkopf, nur auf Tinte: oben links
     Licht, unten rechts Tiefe. */
  background-color: var(--kh-color-surface-900);
  background-image:
      radial-gradient(118% 92% at 6% -6%, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 56%),
      radial-gradient(96% 118% at 102% 104%, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 62%);

  /* KLARZONE · gerechnet wie auf „Kontakt"
     Der Lead endet bei 1024px auf halber Breite, bis zum
     Mittelpunkt des Motivs bleiben 58 Prozent des Radarradius.
     Bei 52 Prozent Klarzone ist die Maske dort auf 0,19 gefallen:
     0,19 * 0,30 = 0,057 Weiss, mit dem Band der zweiten Welle
     rund 0,08 — 4,66:1 und damit über AA. */
  --kh-radar-klar: 52%;

  /* DAUER NACH RADIUS · Ziel rund 25 px/s wie auf allen Seiten
         1024px   Mark 63,5   Radius 286  / 12s = 23,8 px/s
         1280px   Mark 79,4   Radius 357  / 14s = 25,5 px/s
         1440px   Mark 89,3   Radius 402  / 16s = 25,1 px/s  */
  --kh-radar-dauer: 12s;
}

@media (min-width: 72em) { .kh-business-hero { --kh-radar-dauer: 14s; } }
@media (min-width: 86em) { .kh-business-hero { --kh-radar-dauer: 16s; } }

.kh-business-hero__header {
  max-width: none;
  margin-block-end: 0;
}

.kh-business-hero .kh-h1 .elementor-heading-title {
  font-size: clamp(2.125rem, 1.15rem + 3.9vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.032em;
  max-width: 16ch;
}

/* ELEMENTOR-FALLE · Satzbreite gehört auf das innere Titelelement,
   weil Elementor jedem Widget mit (0,4,0) max-width: 100% gibt. */
.kh-business-hero .kh-section-header__lead .elementor-heading-title {
  max-width: 48ch;
  font-weight: var(--kh-font-weight-regular);
}


/* ==========================================================
   02. DAS GESPRÄCH · WAS WIR GEMEINSAM KLÄREN
   ==========================================================
   Vorher: sieben Zeilen in zwei Spalten, jede gleich gewichtet,
   die Nummer so gross wie der Fliesstext. Das las sich wie eine
   Checkliste, nicht wie ein Beratungsgespräch.

   Jetzt ein Register aus zwei ungleichen Teilen:

       links    eine schmale Schiene mit einem Satz, der sagt, was
                die sieben Felder sind, und dem Vodafone-Zeichen als
                ruhigem Anker. Die rote Kante ist das einzige Rot
                des Abschnitts.
       rechts   die sieben Felder, in zwei Spalten geführt, jede
                Zeile von Haarlinien getragen. Keine Karten, keine
                Schatten, keine Symbole.

   WARUM KEINE ZEITLEISTE
   Die Nummern sind Orientierung, keine Reihenfolge — es gibt keine
   Verbindungslinie, keinen Pfeil, keinen hervorgehobenen ersten
   Schritt. Sie sind gross genug zum Wiederfinden und grau genug,
   um nicht wie Stationen zu wirken.

   DIE VIER-ZEILEN-TEILUNG
   Vier Felder links, drei rechts: das offene Feld unten rechts ist
   Absicht. Ein Raster, das sieben Dinge auf acht Plätze zwingt,
   sieht entweder gestreckt oder abgeschnitten aus; hier endet die
   zweite Spalte einfach früher.
   ========================================================== */

/* NACHTRAG 19.10.2026 · AUS SIEBEN ZEILEN WERDEN DREI BÄNDER
   -------------------------------------------------------------
   Breit war das Register schon zweispaltig (4 + 3). Schmal war
   es eine Wand: sieben gleichrangige Zeilen, 1438px nur für
   diesen Abschnitt. Und auch breit blieb es eine Aufzählung —
   sieben Dinge, die nebeneinanderliegen, ohne dass man sähe, was
   zusammengehört.

   Jetzt drei Bänder. Die Gruppentitel sind NICHT erfunden,
   sondern aus den Feldtiteln selbst zusammengesetzt:

     Anschlüsse und Erreichbarkeit   01 Anzahl der Anschlüsse
                                     02 Erreichbarkeit
                                     03 Mobiles Arbeiten
     Standort und Geräte             04 Internet am Standort
                                     05 Geräte
     Vertrag und Ansprechpartner     06 Vertragsstruktur
                                     07 Ansprechpartner

   Alle sieben Felder bleiben vollständig erhalten, mit Nummer,
   Titel und Text. Die Schiene steht nicht mehr daneben, sondern
   als Vorspann darüber — drei Bänder brauchen die volle Breite,
   und der Satz darin gilt für alle drei. */

.kh-business-scope__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3vw + 8px, 44px);
  margin-block-start: clamp(28px, 3vw + 8px, 48px);
}

/* --- 02.1 Der Vorspann ------------------------------------ */

.kh-business-scope__lead {
  display: grid;
  gap: var(--kh-space-md);
  align-content: start;
  justify-items: start;
  padding-inline-start: var(--kh-space-lg);
  border-inline-start: 2px solid var(--kh-color-primary-500);
}

@media (min-width: 62em) {

  /* Satz links, Fussnote rechts daneben — der Vorspann bleibt
     damit eine Zeile hoch statt drei. */
  .kh-business-scope__lead {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }

  .kh-business-scope__lead .kh-business-scope__rail-mark { grid-column: 1 / -1; }
}

/* --- 02.2 Die drei Bänder --------------------------------- */

.kh-business-scope__groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 2.5vw + 8px, 40px);
}

@media (min-width: 62em) {

  .kh-business-scope__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 56px);
    align-items: start;
  }
}

/* Der Gruppentitel trägt die Oberkante des Bandes — zwei Pixel
   in Tinte, dieselbe Geste wie beim führenden Punkt der
   Beratung. Darunter laufen die Felder in Haarlinien weiter. */
.kh-business-scope__group-title {
  margin: 0;
  padding-block: var(--kh-space-xs) var(--kh-space-sm);
  border-block-start: 2px solid var(--kh-color-ink-900);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-ink-900);
}

/* KORREKTURRUNDE · SCHMAL MUSS ES KÜRZER WERDEN, NICHT LÄNGER
   -------------------------------------------------------------
   Erste Fassung der drei Bänder: schmal 1490px gegen vorher
   1438px. Drei Gruppentitel kosten Höhe, die auf dem Telefon
   niemand geschenkt bekommt — der Auftrag war ausdrücklich das
   Gegenteil.

   Gegengerechnet an drei Stellen, alle schmal: das Markenzeichen
   des Vorspanns entfällt (es ist Absender, nicht Information und
   steht im Kopf der Seite ohnehin), die Abstände zwischen den
   Bändern und innerhalb der Felder rücken zusammen. Breit bleibt
   alles wie es ist. */
@media (max-width: 61.9375em) {

  .kh-business-scope__lead { gap: var(--kh-space-sm); }
  .kh-business-scope__lead .kh-business-scope__rail-mark { display: none; }
  .kh-business-scope__groups { gap: var(--kh-space-lg); }
  .kh-business-scope__item { padding-block: 10px; }
}

.kh-business-scope__rail-text {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--kh-color-ink-900);
  max-width: 22ch;
}

.kh-business-scope__rail-note {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-700);
  max-width: 34ch;
}

/* Das Zeichen steht hier als Absender, nicht als Motiv: klein, am
   Fuss der Schiene, voll deckend. Ein Markenzeichen wird nicht in
   der Deckkraft verstellt (siehe global.css 23.5). */
.kh-business-scope__rail-mark {
  display: block;
  inline-size: clamp(36px, 3.4vw, 48px);
  aspect-ratio: 1 / 1;
  background-image: url("../../../../uploads/2026/09/favicon.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* --- 02.2 Die sieben Felder ------------------------------- */

/* Innerhalb eines Bandes stehen die Felder einspaltig — die
   zweispaltige Führung von vorher gab es nur, weil alle sieben
   in EINER Liste lagen. */
.kh-business-scope__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-business-scope__item {
  display: grid;
  grid-template-columns: minmax(2.25rem, auto) minmax(0, 1fr);
  column-gap: var(--kh-space-sm);
  align-items: start;
  padding-block: clamp(12px, 1.2vw, 18px);
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-business-scope__num {
  font-family: var(--kh-font-heading);
  /* Kleiner als vorher: in einer Dreierspalte konkurrierte die
     Ziffer in alter Grösse mit dem Gruppentitel. */
  font-size: clamp(1.125rem, .95rem + .6vw, 1.375rem);
  font-weight: var(--kh-font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.03em;
  /* 5,33:1 auf Weiss — leise, aber lesbar. */
  color: var(--kh-color-ink-500);
  padding-block-start: .06em;
}

.kh-business-scope__title {
  margin: 0 0 var(--kh-space-3xs);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--kh-color-ink-900);
}

.kh-business-scope__body {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-700);
  max-width: 44ch;
}


/* ==========================================================
   03. DIE BEREICHE · MOBILFUNK UND INTERNET
   ==========================================================
   Vorher zwei Textspalten mit einer Haarlinie dazwischen. Beide
   Welten sahen gleich aus, obwohl es zwei Entscheidungen sind.

   Jetzt zwei eigenständige Flächen auf derselben Höhe:

       Mobilfunk            weiss, mit feiner Kontur — der Bereich,
                            in dem am meisten variiert wird.
       Internet & Festnetz  dunkel — was an der Adresse möglich ist,
                            ist eine Feststellung, keine Auswahl.

   Sie gehören zusammen und stehen deshalb im selben Raster, mit
   gleichem Radius und gleichem Innenabstand. Unterschiedlich ist
   nur die Fläche.

   BODENBÜNDIGE LISTEN
   Die Aufzählung jedes Panels bekommt margin-block-start: auto.
   Damit stehen beide Listen auf derselben Linie, auch wenn der
   Fliesstext darüber unterschiedlich lang ist — sonst sähen zwei
   gleich gebaute Flächen zufällig verschoben aus.
   ========================================================== */

.kh-business-pair__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-block-start: clamp(28px, 3vw + 8px, 48px);
}

@media (min-width: 62em) {

  .kh-business-pair__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.2vw, 32px);
  }
}

.kh-business-pair__panel {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.2vw + 12px, 48px);
  border-radius: var(--kh-radius-lg);
}

.kh-business-pair__panel--light {
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
}

.kh-business-pair__panel--dark {
  background-color: var(--kh-color-surface-900);
  border: 1px solid var(--kh-color-surface-900);
}

.kh-business-pair__eyebrow {
  display: block;
  margin: 0 0 var(--kh-space-xs);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-primary-text);
}

.kh-business-pair__title {
  margin: 0 0 var(--kh-space-sm);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
  max-width: 18ch;
}

.kh-business-pair__body {
  margin: 0 0 var(--kh-space-lg);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
  max-width: 46ch;
}

/* Die Aufzählung sitzt am Fuss der Fläche, abgesetzt durch eine
   Haarlinie. */
.kh-business-pair__panel .kh-business-list {
  margin-block-start: auto;
  padding-block-start: var(--kh-space-lg);
  border-block-start: 1px solid var(--kh-color-line-200);
}

/* --- 03.1 Farbrollen der dunklen Fläche -------------------
   Gemessen auf #1A1A1A: Weiss 17,4:1 · Weiss bei 88 Prozent
   13,7:1 · #FF6B6B 6,3:1. Alle über AA, auch der Eyebrow mit
   13 Pixeln. */

.kh-business-pair__panel--dark .kh-business-pair__eyebrow { color: var(--kh-color-primary-on-dark); }
.kh-business-pair__panel--dark .kh-business-pair__title   { color: var(--kh-color-ink-inverse); }
.kh-business-pair__panel--dark .kh-business-pair__body    { color: rgba(255, 255, 255, .88); }

.kh-business-pair__panel--dark .kh-business-list          { border-block-start-color: rgba(255, 255, 255, .18); }
.kh-business-pair__panel--dark .kh-business-list__item    { color: rgba(255, 255, 255, .88); }
.kh-business-pair__panel--dark .kh-business-list__item::before { background-color: var(--kh-color-primary-on-dark); }


/* --- 03.2 Aufzählung mit roter Marke ---------------------- */

/* Eigene Klasse statt der von der Leistungsseite: die beiden
   Stilvorlagen werden nie zusammen geladen, und eine gemeinsame
   Klasse in global.css zu legen wäre für zwei Seiten zu früh. */

.kh-business-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-sm);
}

.kh-business-list__item {
  position: relative;
  padding-inline-start: var(--kh-space-lg);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
}

.kh-business-list__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .65em;
  inline-size: 12px;
  block-size: 2px;
  background-color: var(--kh-color-primary-500);
}


/* ==========================================================
   04. PERSÖNLICHE BERATUNG
   ==========================================================
   Vorher: ein grosser Satz, darunter drei gleich breite Spalten.
   Funktional, aber Aussage und Begründung standen beziehungslos
   übereinander.

   Jetzt ein Raster aus 5 und 7 Teilen: links das Zitat, rechts
   die drei Prinzipien als 1+2 — der Punkt, den das Zitat meint,
   steht über den beiden anderen und über die volle Breite.

       „Wer Ihren Betrieb schon kennt …"  →  Direkter Ansprechpartner

   Die Oberkanten tragen die Gliederung: zwei Pixel in Tinte über
   dem führenden Punkt, ein Pixel Linie über den beiden anderen.
   Keine Karten, keine Schatten, keine Symbole.
   ========================================================== */

.kh-business-advice .kh-statement__text { max-width: 20ch; }

.kh-business-advice__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 3vw + 12px, 48px);
  margin-block-start: clamp(20px, 2vw + 8px, 32px);
}

.kh-business-advice__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2vw + 8px, 32px);
}

.kh-business-advice__col {
  padding-block-start: var(--kh-space-md);
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-business-advice__col--lead {
  border-block-start: 2px solid var(--kh-color-ink-900);
}

.kh-business-advice__title {
  margin: 0 0 var(--kh-space-2xs);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--kh-color-ink-900);
}

.kh-business-advice__col--lead .kh-business-advice__title {
  font-size: var(--kh-text-h3);
  letter-spacing: -.02em;
}

.kh-business-advice__body {
  margin: 0;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
  max-width: 52ch;
}

@media (min-width: 62em) {

  .kh-business-advice__frame {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }

  .kh-business-advice__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 2.6vw, 40px);
  }

  .kh-business-advice__col--lead {
    grid-column: 1 / -1;
  }

  .kh-business-advice__col--lead .kh-business-advice__body {
    max-width: 60ch;
  }
}


/* ==========================================================
   05. MEHRERE STANDORTE UND TEAMS — UNVERÄNDERT
   ==========================================================
   Ruhiger Absatz auf grauer Fläche, mit roter Kante links. Kein
   eigener Beweis, keine Zahlen: was hier steht, ist eine
   Möglichkeit, kein Leistungsmerkmal.
   ========================================================== */

/* NACHTRAG 19.10.2026 · DIE BERATUNG TRÄGT JETZT DIE TIEFE
   -------------------------------------------------------------
   Die Seite war für ihre Rolle zu hell: ausser der einen dunklen
   Hälfte des Panelpaars stand nichts Dunkles darauf. Der Anker
   ist jetzt die Beratung — inhaltlich die Stelle, an der die
   Seite von Leistungen auf Haltung wechselt.

   Nur die Farbrollen werden gedreht, die Komposition bleibt:
   5 zu 7, führender Punkt über die volle Breite, Oberkanten als
   Gliederung. Die zwei Pixel in Tinte werden zu zwei Pixel Rot
   auf Dunkel — das einzige Rot des Abschnitts. */

.kh-business-advice.kh-section--dark .kh-business-advice__col {
  border-block-start-color: rgba(255, 255, 255, .18);
}

.kh-business-advice.kh-section--dark .kh-business-advice__col--lead {
  border-block-start-color: var(--kh-color-primary-on-dark);
}

.kh-business-advice.kh-section--dark .kh-business-advice__title { color: var(--kh-color-ink-inverse); }
.kh-business-advice.kh-section--dark .kh-business-advice__body  { color: rgba(255, 255, 255, .88); }


/* NACHTRAG 19.10.2026 · DER ABSCHNITT BEKOMMT GEWICHT
   -------------------------------------------------------------
   Vorher: ein schmaler Absatz auf grauer Fläche, in der Auswahl
   die dünnste Stelle der Seite. Der Inhalt ist aber nicht dünn —
   er trägt zwei verschiedene Dinge: eine Aussage zur Betrachtung
   mehrerer Standorte und einen Hinweis auf den Business Premium
   Store von 2010.

   Beides bleibt, wird aber getrennt: Überschrift links an der
   roten Kante, Aussage rechts, der historische Hinweis als
   ruhige Fussnote darunter. Nichts entfernt, nichts ergänzt. */

/* Die beiden Wege stehen in einer schmalen Spalte (283px bei
   1440). Nebeneinander brach der längere Knopf um und der
   kürzere stand ausgefranst daneben — untereinander und auf
   gleiche Breite gezogen ist beides ruhig. Die Knopfgestaltung
   selbst bleibt unverändert. */
.kh-business-cta__actions {
  flex-direction: column;
  align-items: flex-start;
}

.kh-business-teams__inner { max-width: var(--kh-container-narrow); }

.kh-business-teams__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kh-space-lg);
}

@media (min-width: 62em) {

  .kh-business-teams .kh-business-teams__inner { max-width: none; }

  .kh-business-teams__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
}

.kh-business-teams__aside {
  margin: var(--kh-space-md) 0 0;
  padding-block-start: var(--kh-space-md);
  border-block-start: 1px solid var(--kh-color-line-200);
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-500);
}

.kh-business-teams__mark {
  padding-inline-start: var(--kh-space-lg);
  border-inline-start: 2px solid var(--kh-color-primary-500);
}

.kh-business-teams__title {
  margin: 0 0 var(--kh-space-sm);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
  max-width: 22ch;
}

.kh-business-teams__body {
  margin: 0;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

.kh-business-teams__body + .kh-business-teams__body { margin-block-start: var(--kh-space-md); }


/* ==========================================================
   06. ABSCHLUSS
   ==========================================================
   Ein Weg, nicht zwei. Auf den Privatkundenseiten stehen am Ende
   „Termin" und „Filiale finden" nebeneinander — hier gibt es nur
   das Gespräch, und der zweite Weg wäre eine Verdünnung.

   DAS RINGMOTIV UND DAS VODAFONE-ZEICHEN
   Gebaut wie der Abschluss der Startseite (home.css 10.1), aus
   demselben Grund: das Ringmotiv von global.css 24 liegt auf dem
   ::after des Containers und dreht sich dort (kh-cta-drift, 38s).
   Ein mitdrehendes Markenzeichen kommt nicht in Frage, und Ringe
   und Zeichen müssen konzentrisch sein, sonst sieht man den
   Versatz sofort.

   Also: das ::after wird für diesen Abschnitt abgeschaltet, und
   Ringe und Zeichen liegen gemeinsam auf einem eigenen, stehenden
   Element. Das Zeichen ist dessen Rasterkind und sitzt damit
   rechnerisch exakt im Mittelpunkt — nicht ausgerichtet, sondern
   zentriert.

   KEIN ÜBERLAPPEN
   Das Motiv ist eine eigene Spalte im Raster des Panels, kein
   absolut gesetztes Element. Damit kann es Text und Schaltfläche
   nicht überdecken; das ist keine Frage der Einstellung, sondern
   des Aufbaus. Die Ringe dürfen an der Panelkante angeschnitten
   werden — sie sind kein Markenzeichen. Der Mittelpunkt liegt bei
   0,725 Spaltenbreiten von deren linker Kante und damit stets
   innerhalb der Spalte; das Zeichen ist an keiner Breite
   angeschnitten.
   ========================================================== */

.kh-business-cta__inner { max-width: var(--kh-container-max); }

.kh-business-cta .kh-h2 .elementor-heading-title {
  max-width: 18ch;
  letter-spacing: -.025em;
}

.kh-business-cta__note {
  margin-block-start: var(--kh-space-md);
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-500);
}

/* Das gedrehte Ringmotiv des Containers entfällt hier; es würde
   sonst doppelt gezeichnet und sich unter dem stehenden Zeichen
   weiterdrehen. */
.kh-business-cta.kh-cta-panel > .kh-container::after { content: none; }

.kh-business-cta__mark {
  display: grid;
  place-items: center;
  justify-self: center;
  inline-size: clamp(190px, 52vw, 280px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  background:
      radial-gradient(circle closest-side at center,
        transparent 0 40%, rgba(255, 255, 255, .09) 40.6%, transparent 41.4%),
      radial-gradient(circle closest-side at center,
        transparent 0 62%, rgba(255, 255, 255, .06) 62.6%, transparent 63.4%),
      radial-gradient(circle closest-side at center,
        transparent 0 84%, rgba(255, 255, 255, .05) 84.6%, transparent 85.4%);
}

/* Elementor legt um den Inhalt jedes Widgets noch einen Rahmen.
   display:contents nimmt ihn aus dem Raster heraus, damit das
   Zeichen selbst das Rasterkind ist und mittig sitzt. */
.kh-business-cta .kh-business-cta__mark .elementor-widget-container { display: contents; }

.kh-business-cta__mark-shape {
  display: block;
  inline-size: clamp(44px, 12vw, 64px);
  aspect-ratio: 1 / 1;
  background-image: url("../../../../uploads/2026/09/favicon.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (min-width: 62em) {

  .kh-business-cta {
    --kh-cta-motiv: clamp(210px, 19vw, 290px);
    --kh-cta-ring:  calc(var(--kh-cta-motiv) * 1.45);
  }

  /* Drei Zonen: Aussage · Handlung · Motiv. */
  .kh-business-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr) var(--kh-cta-motiv);
    gap: clamp(28px, 3.4vw, 60px);
    align-items: center;
  }

  /* Die Ringe beginnen an der linken Kante ihrer Spalte und laufen
     nach rechts über sie hinaus. Ihr Mittelpunkt — und damit das
     Zeichen — bleibt dabei innerhalb der Spalte. */
  .kh-business-cta__mark {
    inline-size: var(--kh-cta-ring);
    justify-self: start;
    margin-inline-end: calc(var(--kh-cta-motiv) - var(--kh-cta-ring));
  }

  .kh-business-cta__mark-shape {
    inline-size: clamp(52px, 4.4vw, 72px);
  }
}


/* ==========================================================
   07. FOKUS UND BEWEGUNG — hier bewusst NICHTS
   ==========================================================
   Fokusring, 44px-Mindestziel und die Rücknahme der Bewegung
   stehen in global.css und gelten hier unverändert. Diese Seite
   hat keine eigene Bewegung ausser dem Motiv im Kopf; das
   Ringmotiv im Abschluss steht (siehe 06).
   ========================================================== */