@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   home.css · Startseite (Seite 12)
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 · global.css v1.0 FINAL
   Gilt ausschliesslich fuer die Startseite. Alles Globale steht in global.css.
   Es werden ausschliesslich Tokens verwendet — keine festen Farb-/Typo-Werte.

   Layoutregeln sind bewusst zweistufig notiert (.kh-home-x .kh-home-x__y),
   weil Elementor Container mit .e-con-full.e-flex (0,2,0) ausliefert und
   einstufige kh-Klassen (0,1,0) sonst verlieren.

   01. HERO                   06. BERATUNG / TERMIN
   02. QUICK ACTIONS          07. UNTERNEHMEN
   03. LEISTUNGEN             08. KARRIERE
   04. STANDORT-TEASER        09. FAQ
   05. WARUM VOR ORT          10. ABSCHLUSS-CTA
                              11. RESPONSIVE
   ========================================================================== */


/* ==========================================================
   00. GEMEINSAME BASIS DER STARTSEITE
   ========================================================== */

/* Elementor setzt auf Containern 10px Standardpolster. Fuer exakte
   Kantenbuendigkeit wird das auf allen Startseiten-Containern neutralisiert.
   Aussenabstaende kommen ausschliesslich von .kh-container. */
.kh-home-hero [class*="kh-home-hero__"],
.kh-home-quickactions [class*="kh-home-quickactions__"],
.kh-home-services [class*="kh-home-services__"],
.kh-home-locator [class*="kh-home-locator__"],
.kh-home-why [class*="kh-home-why__"],
.kh-home-booking [class*="kh-home-booking__"],
.kh-home-business [class*="kh-home-business__"],
.kh-home-company [class*="kh-home-company__"],
.kh-home-careers [class*="kh-home-careers__"],
.kh-home-faq [class*="kh-home-faq__"],
.kh-home-cta [class*="kh-home-cta__"] { padding: 0; }


/* LESEMASSE GEGEN ELEMENTORS WIDGET-DECKEL (DESIGN-LIVE-3)
   =========================================================
   BEFUND. Elementor liefert in frontend.min.css:

     .elementor.elementor .e-con > .elementor-widget { max-width: 100% }

   Das ist (0,4,0). Jede Lesemass-Regel dieser Datei, die an einem
   Elementor-Widget-Wrapper haengt, stand bei (0,1,0) oder (0,2,0)
   und war damit wirkungslos — vierzehn Regeln, nachgemessen am
   lebenden Dokument. Sichtbar wurde das nur dort, wo kein
   Rasterplatz die Breite ohnehin begrenzt hat; am deutlichsten im
   Buchungs-Vorspann, der auf 1127px EINE Zeile mit 122 Zeichen
   zog.

   HIER STEHEN NUR DIE DREI, DIE WIRKLICH ZU BREIT WAREN.
   Die uebrigen elf Deklarationen sind an ihrer Stelle entfernt
   statt stillschweigend liegengelassen: ihre Kompositionen sind so
   abgenommen worden, wie sie OHNE das Mass aussehen, und ein paar
   davon wurden mit dem Mass nachweislich schlechter (der
   Hero-Vorspann zum Beispiel bekam mit 46ch eine Schlusszeile von
   60px — ein Wort). Wo das Mass heute aus dem Rasterplatz kommt,
   braucht es keine zweite Quelle.

   DIE LOESUNG IST NICHT MEHR SPEZIFITAET, SONDERN DAS RICHTIGE
   ELEMENT. Elementors Deckel sitzt auf dem Widget-WRAPPER. Das
   Lesemass gehoert ohnehin an die Textzeile, nicht an die Huelle —
   genau so machen es locations.css, about.css, career.css und
   contact.css seit jeher (dort: __title .elementor-heading-title).
   Die Regeln hier liegen deshalb eine Ebene tiefer und gewinnen
   ohne ein einziges zusaetzliches Gewicht. Auch die 14ch der
   FAQ-Ueberschrift haben immer funktioniert — aus dem gleichen
   Grund.

   WER HIER ETWAS ERGAENZT: ein Lesemass gehoert an das Element,
   das den Text fuehrt, nie an den Elementor-Wrapper. */
.kh-home-booking .kh-home-booking__content-lead p { max-width: 58ch; }
.kh-home-locator .kh-home-locator__intro-text p   { max-width: 72ch; }
.kh-home-why .kh-home-why__intro-text p           { max-width: 54ch; }

/* SEKTIONSRHYTHMUS — EINZIGE QUELLE (DESIGN-LIVE-3)
   =========================================================
   Vor diesem Durchgang stand der Rhythmus an vier Stellen der Datei
   und widersprach sich: Zeile 64 gab dem Schnellzugriff „block",
   Zeile 3573 ueberschrieb es mit xl/lg; Zeile 66 gab den Leistungen
   „roomy", Zeile 3595 setzte den oberen Wert wieder auf 2xl. Die
   Karriere trug seit DESIGN-LIVE-2 einen Einzelwert
   (clamp 64/104px), der zwischen zwei Tokens lag. Alles steht
   jetzt hier und nirgends sonst.

   DER RHYTHMUS IST NICHT GLEICHFOERMIG, SONDERN DREISTUFIG.
   Gemessen wird nicht das Polster einer Sektion, sondern der
   ABSTAND ZWISCHEN ZWEIEN — die Summe beider Polster. Bei 1440px:

     124px   verwandte Nachbarn        Quick→Leistungen,
                                       Unternehmen→Karriere, FAQ→CTA
     150px   Normalfall                alle uebrigen Fugen
     187px   Anker                     nur vor und nach „Warum vor Ort"

   Der groesste Abstand der Seite liegt damit symmetrisch um den
   einen visuellen Hoehepunkt. Alles andere bleibt ruhig.

     Hero            eigener Wert / 0 unten   das dunkle Faktenband schliesst ab
     Quick Actions   xl / lg                  siehe unten: EINE AUSNAHME
     Leistungen      2xl / section            oben: siehe EINE AUSNAHME
     Warum vor Ort   roomy                    Anker 1
     Standorte       section
     Beratung        section                  teilt die Flaeche mit den Standorten
     Geschaeftskunden section                 Anker 2 — vorher block (40px) und
                                              damit das engste Feld der Seite
     Unternehmen     section / tight          bindet das Karriereband an
     Karriere        section                  vorher Einzelwert
     FAQ             section
     Abschluss-CTA   tight                    heller Schluss vor dem dunklen Fuss */

.kh-home-hero {
  padding-top: clamp(48px, 4vw + 24px, 96px);
  /* Kein unteres Polster: das dunkle Faktenband schliesst den Kopf ab. */
  padding-bottom: 0;
}

/* EINE AUSNAHME, UND SIE IST GEWOLLT.
   Schnellzugriff und Leistungen sind GEMEINSAM ein Feld: gleiche
   Flaeche, eine Oberkante, keine Fuge dazwischen (Begruendung in
   Abschnitt 03). Ihre Fuge ist deshalb bewusst ein INNENABSTAND aus
   der kleinen Spacing-Skala (lg + 2xl = 72px bei 1440) und kein
   Sektionsabstand — sie liegt absichtlich unter den 124px, die hier
   das Minimum zwischen zwei getrennten Sektionen sind.

   Beide Polster stehen deshalb dort, wo das Feld zusammengefuehrt
   wird, und NICHT hier. Frueher standen sie an beiden Stellen; die
   Werte hier waren wirkungslos, weil die spaeteren Regeln bei
   gleicher Spezifitaet gewinnen. */

.kh-home-locator   { padding-block: var(--kh-space-section); }
.kh-home-why       { padding-block: var(--kh-space-section-roomy); }
.kh-home-booking   { padding-block: var(--kh-space-section); }
/* Unten „section" und nicht „roomy": der Anker darunter bringt
   seine eigenen 112px mit. Zusammen waren es 224px — der mit
   Abstand groesste Sprung der Seite, und zwar an einer Stelle, an
   der ohnehin die Flaeche wechselt. 75 + 112 = 187 ist die
   Ankerfuge, und sie liegt jetzt symmetrisch: davor wie danach. */
.kh-home-services  { padding-bottom: var(--kh-space-section); }

.kh-home-company {
  padding-top: var(--kh-space-section);
  padding-bottom: var(--kh-space-section-tight);
}

/* DAS ZWEITE ECHTE BILD DER SEITE
   -------------------------------------------------------------
   Die Startseite trug ausserhalb des Kopfes kein einziges Bild.
   Der Unternehmensabschnitt spricht von 14 Ladenlokalen — dazu
   gehoert die Aussenansicht eines eigenen Shops. Das Foto steht
   ueber der Faktenliste und bindet die rechte Spalte, die vorher
   nur aus drei Textzeilen bestand.

   Es ist ein vorhandenes Firmenfoto, kein Stock- und kein
   KI-Bild. */
.kh-home-company__image {
  margin-bottom: var(--kh-space-lg);
}

/* BILDGROESSE — GEPRUEFT, NICHT GERATEN
   Das Foto lag bei 326 x 245px und wirkte wie eine Miniatur. Die
   Mediathek fuehrt dasselbe Motiv (vodafone-aez) bis 1360px Breite,
   eine Hochskalierung ist also nicht noetig; das Bild war nur zu
   klein INSZENIERT, nicht zu klein vorhanden.

   Es bekommt deshalb die volle Spaltenbreite und ein festes
   Seitenverhaeltnis. Dazu ruecken die Spalten von 1,4 zu 0,6 auf
   1,15 zu 0,85 — die rechte Spalte waechst damit von rund 330 auf
   rund 470px. Bei doppelter Bildschirmdichte sind das 940px und
   damit deutlich unter den vorhandenen 1360. */
.kh-home-company__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.kh-home-company .kh-home-company__facts { align-self: start; }

.kh-home-business { padding-block: var(--kh-space-section); }
.kh-home-careers  { padding-block: var(--kh-space-section); }
.kh-home-faq      { padding-block: var(--kh-space-section); }
.kh-home-cta      { padding-block: var(--kh-space-section-tight); }


/* Feine Trennlinie auf dunklem Grund — global existiert dafuer kein Token. */
.kh-home-why,
.kh-home-business,
.kh-home-booking__shell { --kh-home-hairline-dark: rgba(255, 255, 255, .16); }

/* Kennzahlen laufen tabellarisch, damit Spalten stehen.
   .kh-home-why__point-index ist mit DESIGN-LIVE-1 aus dem Markup
   verschwunden und deshalb hier entfallen. */
.kh-home-hero__fact-value { font-variant-numeric: tabular-nums; }


/* ==========================================================
   01. KOPFBEREICH — ROTE MARKENFLAECHE
   ==========================================================
   Der Kopf traegt zusaetzlich kh-section--brand und kh-hero-brand:
   Farbrollen, Verlauf, Ringgeometrie und die Umlaufbewegung kommen
   damit aus global.css, Abschnitt 04, 19 und 23.

   Aufbau: Text links, Foto rechts auf der roten Flaeche, darunter
   ein dunkles Band ueber die volle Breite mit den drei belegbaren
   Aussagen. Am Seitenanfang steht damit die Folge Rot - Dunkel -
   Hell statt dreier weisser Flaechen hintereinander.
   ========================================================== */

.kh-home-hero {
  overflow: hidden;

  /* MITTELPUNKT UND MASS DES MARKENMOTIVS (global.css 23.2)

     VORHER: der Mittelpunkt hing an der UNTERKANTE
     (calc(100% - 155px - 2.8vw)) und lag damit im Band zwischen den
     Schaltflaechen und dem dunklen Faktenband. Nachgemessen bei
     1440px: Mittelpunkt bei y=530, die Mitte des Textblocks liegt
     aber bei y=282. Das Motiv sass 248px zu tief. Zugleich reichte
     es mit 648px Durchmesser bis x=-7 und war links angeschnitten.

     SENKRECHT: die Mitte des Textblocks (Eyebrow bis Schaltflaechen)
     liegt ueber alle Desktopbreiten hinweg bei einem erstaunlich
     konstanten Anteil der Kopfhoehe — gemessen 39,0 Prozent bei
     1024px, 38,9 bei 1280, 38,8 bei 1440 und 38,9 bei 1920. Ein
     einziger Prozentwert trifft sie deshalb ueberall. Kein Festwert,
     keine Bindung an die Unterkante.

     WAAGERECHT: der Mittelpunkt wird aus dem Mass des Motivs
     abgeleitet, nicht umgekehrt. 80px plus halber Durchmesser heisst:
     der linke Rand des Motivs liegt auf JEDER Breite exakt 80px vom
     Viewportrand entfernt. Anschneiden ist damit ausgeschlossen,
     solange das Mass die Hoehe nicht sprengt.

     MASS: der Durchmesser waechst mit der Breite, bleibt aber nach
     oben begrenzt. Der Radius muss unter dem kleineren der beiden
     senkrechten Abstaende bleiben (Mittelpunkt zur Oberkante bzw.
     zur Oberkante des Faktenbands): gemessen 249px bei 1024, 269 bei
     1280, 280 bei 1440, 289 bei 1920. clamp(420px, 36vw, 540px)
     ergibt Radien von 210 bis 270 und bleibt ueberall darunter.

     WAAGERECHT — WARUM DER MITTELPUNKT UND NICHT DER KREIS
     Bei 1440px beginnt der Text bei x=152. Mehr Zwischenraum hat der
     Kopf links nicht. Ein Motiv, dessen GANZER Kreis 60px Abstand
     haelt, muesste seinen Mittelpunkt bei 60+Radius haben, also bei
     rund 320px — mitten im Textblock. Genau das sah man: das Zeichen
     lag auf dem Wort „Shops".

     Deshalb haelt der MITTELPUNKT den Abstand, nicht der Kreis. Das
     Zeichen sitzt im Zwischenraum links des Textes, die Wellen
     laufen nach rechts hinter den Text und nach links aus dem Bild —
     so wie in der Vorlage, wo der Ring ebenfalls ueber den linken und
     unteren Rand hinauslief. Beschnitten wird damit nur das
     Wellenfeld, nie das Zeichen. */
  --kh-radar-size: clamp(420px, 36vw, 540px);
  --kh-ring-cx: 20%;
  --kh-ring-cy: 39%;
  --kh-mark-size: clamp(48px, 5vw, 72px);

  /* KLARZONE DER WELLEN
     Gemessen mit p6-klar: der naechstgelegene Kleintext ist die
     Beschriftung der Geisterschaltflaeche „Filiale finden" — sie
     steht auf Rot, nicht auf deckender Flaeche, und zaehlt deshalb
     mit. Abstand zum Mittelpunkt: 42,5 Prozent des Radarradius bei
     1024px, 39,2 bei 1440, 45,5 bei 1920.

     Eine scharfe Kante ist hier trotzdem nicht moeglich. Nachdem die
     Klarzone bei --kh-radar-klar endet, faellt die Maske erst ueber
     zehn Punkte auf ein Fuenftel. Bei 39,2 Prozent stuende sie noch
     bei 0,74 — mal 30 Prozent Weiss ergaebe das 4,04:1 unter der
     Schaltflaechenbeschriftung und 4,45:1 unter dem Lead. Beides
     unter AA, beides nachgerechnet.

     Damit eine scharfe Kante ginge, muesste die Klarzone bei 31
     Prozent enden — die Maske oeffnet aber erst bei 30 vollstaendig.
     Es bliebe ein Band von einem Prozentpunkt. Der Kopf ist schlicht
     zu dicht belegt: Ueberschrift, Lead und zwei Schaltflaechen
     fuellen die rote Flaeche fast vollstaendig.

     NEUE ABWAEGUNG: lieber durchgehend sichtbar als kurz hell.
     Mit Klarzone 36 Prozent war die Welle nur sichtbar, solange ihre
     Kante zwischen 20 und 36 Prozent des Radius lag. Nachgemessen
     sind das 0,51 von 9 Sekunden je Welle — danach fiel sie auf 0,02
     und war praktisch weg. Das Ergebnis war ein kurzes Aufblitzen
     alle paar Sekunden statt einer laufenden Welle.

     Jetzt umgekehrt: die Maske bleibt bis 85 Prozent offen, dafuer
     ist die Kante schwaecher. Die Welle ist damit die ganze Zeit da
     statt kurz.

     Der Wert ist nachgemessen, nicht geschaetzt: ein Skript rechnet
     ueber einen ganzen Zyklus fuer jeden Radius die zusammengesetzte
     Deckkraft BEIDER Ebenen mal Maske aus und prueft sie gegen jedes
     Textelement. Die Grenze liegt bei 0,108 — darueber faellt Weiss
     auf Rot unter 4,5:1. 0,09 ergibt in der Spitze 0,09 bis 0,10 und
     bleibt darunter. */
  --kh-radar-hell: .09;
  --kh-radar-klar: 85%;
}

/* DAS ZEICHEN BRAUCHT ZWISCHENRAUM — UND DEN GIBT ES ERST AB 1376px
   -------------------------------------------------------------
   Der Text beginnt beim Containerrand plus 32px. Der Containerrand
   ist (100vw - 1200px) / 2, mindestens aber 10px. Daraus folgt der
   verfuegbare Zwischenraum links:

       1024px ->  42px      1376px -> 120px
       1280px ->  72px      1440px -> 152px
                            1920px -> 392px

   Damit das Zeichen dort hineinpasst, braucht es seine eigene Breite
   plus 60px Abstand nach links plus etwas Luft zum Text. Das geht ab
   rund 1376px auf; darunter bliebe nur ein Zeichen von unter 40px,
   und das liest sich nicht mehr als Vodafone-Signet.

   Deshalb: ab 86em sitzt das Zeichen im Zwischenraum. Darunter
   entfaellt es, das Wellenfeld bleibt. Wellen hinter Text sind
   ausdruecklich zulaessig und bei 10 Prozent Deckkraft nachweislich
   ueber AA — das deckende Zeichen waere es nicht. */
@media (min-width: 86em) {

  .kh-home-hero {
    /* Das Zeichen waechst mit dem Zwischenraum, gedeckelt bei 72px. */
    --kh-mark-size: clamp(40px, calc((100vw - 1200px) / 2 - 44px), 72px);
    /* Linker Rand des ZEICHENS: 60px, mitwachsend bis 120px.
       Der Mittelpunkt ergibt sich daraus plus halbe Zeichenbreite. */
    --kh-ring-cx: calc(clamp(60px, (100vw - 1200px) / 4, 120px) + var(--kh-mark-size) / 2);
  }
}

@media (max-width: 85.99em) {

  .kh-home-hero::before { display: none; }
}

/* .kh-grid--split teilt global bereits ab 768px. Fuer den Kopf ist das zu
   frueh: Textspalte und Bild werden je rund 333px schmal. Der Kopf bleibt
   deshalb bis 1023px einspaltig und teilt erst ab 1024px. */
.kh-home-hero .kh-home-hero__grid {
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--kh-space-xl);
}

/* Der Stack liefert global 24px zwischen allen Kindern. Fuer den Kopf ist das
   zu gleichfoermig: H1 und Lead gehoeren zusammen, die Handlung bekommt
   Vorlauf. */
.kh-home-hero .kh-home-hero__content {
  gap: var(--kh-space-md);
  max-width: 40rem;
}

/* Auf der Markenflaeche traegt die Ueberschrift die Seite. Sie darf
   deutlich groesser stehen als eine gewoehnliche H1 — das laengste Wort
   „Vodafone-Beratung." bricht dabei am Trennstrich, nicht im Wort. */
/* SCHRIFTGRAD NACH DER LAENGSTEN ZEILE, NICHT NACH GEFUEHL
   -------------------------------------------------------------
   Eine max-width am Widget greift hier NICHT: Elementor setzt mit
   .elementor.elementor .e-con > .elementor-widget { max-width: 100% }
   eine Regel der Gewichtung (0,4,0) darueber. Die Zeilenzahl wird
   deshalb ueber den Schriftgrad gesteuert.

   Gemessen: „Persoenliche Vodafone-" braucht bei 68px 682px, die
   Textspalte ist bei 1024px aber nur 501px und bei 1440px 592px
   breit — daraus wurden vier Zeilen und ein 816px hoher Kopf.
   Der Grad ist jetzt so bemessen, dass die laengste Zeile von
   390px bis 1440px in die Spalte passt; der Satz steht dann in
   drei Zeilen. */
.kh-home-hero__title {
  text-wrap: balance;
  font-size: clamp(2rem, .1rem + 4.1vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

/* Kein Lesemass hier: es sass am Elementor-Wrapper und war
   wirkungslos (siehe Abschnitt 00). Die Breite kommt aus der
   Textspalte des Hero-Rasters — mit 46ch bekaeme der Vorspann eine
   Schlusszeile von einem Wort. */

.kh-home-hero__lead p,
.kh-home-hero__lead { color: rgba(255, 255, 255, .92); }

.kh-home-hero .kh-home-hero__actions { margin-top: var(--kh-space-sm); }


/* DAS DUNKLE FAKTENBAND
   -------------------------------------------------------------
   Vorher: drei Textspalten mit Haarlinie, im weissen Kopf kaum
   wahrnehmbar. Jetzt schliesst ein dunkles Band ueber die volle
   Breite den roten Kopf ab. Damit steht am Seitenanfang die Folge
   Rot - Dunkel - Hell, und die drei Zahlen bekommen die Flaeche,
   die ihnen zusteht.

   Das Band sitzt im 1200er-Container und bricht mit
   calc(50% - 50vw) daraus aus. Der Kopf traegt overflow: hidden,
   ein waagerechter Seitenlauf kann dadurch nicht entstehen.

   Diese Komponente wird derzeit nur hier gebraucht und steht
   deshalb nicht in global.css. */
.kh-home-hero .kh-home-hero__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-md);
  width: auto;
  margin-top: clamp(40px, 5vw, 80px);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--kh-container-pad), calc(50vw - var(--kh-container-max) / 2));
  padding-block: clamp(24px, 2.4vw, 40px);
  background-color: var(--kh-color-surface-900);
  border-top: 0;
}

/* DER ROTE STREIFEN UNTER DEM FAKTENBAND
   -------------------------------------------------------------
   Unter der schwarzen Fläche stand ein 10px hoher roter Streifen.
   Gemessen bei 1440px:

       Faktenband  unten  793
       Kopfbereich unten  803      → 10px rote Fläche dazwischen
       nächste Section oben 803

   Die Ursache ist weder ein Rand noch ein Aussenabstand am Band
   selbst, sondern der Innenabstand des Elementor-Containers
   dazwischen: .e-con bringt --padding-block-end: 10px als Vorgabe
   mit. Das Faktenband ist das letzte Kind dieses Containers, also
   liegen zwischen seiner Unterkante und dem Ende des Abschnitts
   genau diese 10px — und der Abschnitt ist rot.

   Dass es so gemeint war, sieht man am Abschnitt selbst: er trägt
   padding-block-end: 0, das Band soll bündig abschliessen. Die
   10px sind ein Rest der Vorgabe, kein Entwurf.

   Behoben wird deshalb die Ursache: der Innenabstand wird an
   dieser einen Stelle auf null gesetzt — über dieselbe Variable,
   die Elementor dafür vorsieht. Kein overflow: hidden, kein
   negativer Aussenabstand, keine überdeckende Fläche. Der
   Innenabstand OBEN bleibt unangetastet: er liegt mitten im
   roten Bereich und ist dort unsichtbar. */
.kh-home-hero > .kh-container { --padding-block-end: 0px; }


.kh-home-hero .kh-home-hero__fact { gap: var(--kh-space-3xs); }


/* DIE TRENNER ZWISCHEN DEN DREI FAKTEN
   -------------------------------------------------------------
   Die drei Fakten sind echte Rasterkinder, also trägt jedes ab
   dem zweiten seine eigene Kante — kein ::before, kein ::after.

   DIE KANTE SITZT AM ANFANG DES KINDES, NICHT IN DER MITTE DER
   LÜCKE. Bei 48px Spaltenabstand stünde sie deshalb hart am
   rechten Block und sähe aus, als gehöre sie zu ihm. Der Abstand
   wird darum halbiert und die andere Hälfte als Innenabstand
   hinter die Kante gelegt; die Summe bleibt dieselbe:

       vorher   48px Lücke
       nachher  24 + 1 + 24 = 49px, Linie mittig

   HÖHE: die Kante läuft über die Höhe des Textblocks, nicht über
   die des Bandes. Gemessen sind das 78 von 153px — 51 Prozent,
   genau der gewünschte Bereich. Das Band bringt diese Verkürzung
   durch seinen eigenen Innenabstand von selbst mit; es braucht
   dafür keine zweite Regel.

   Unter 480px stehen die Fakten untereinander. Eine senkrechte
   Linie liefe dort quer durch gestapelte Inhalte — dort trennt
   deshalb eine waagerechte Haarlinie nach demselben Prinzip. */
.kh-home-hero .kh-home-hero__fact + .kh-home-hero__fact {
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  padding-block-start: var(--kh-space-sm);
}

.kh-home-hero__fact-value {
  font-family: var(--kh-font-heading);
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.375rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--kh-color-ink-inverse);
}

.kh-home-hero__fact-label,
.kh-home-hero__fact-label p {
  max-width: 28ch;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-snug);
  text-wrap: pretty;
  color: rgba(255, 255, 255, .72);
}

/* Das Bild steht jetzt AUF der roten Flaeche und braucht deshalb eine
   eigene Kante: heller Rahmen und ein tiefer, weicher Schatten loesen
   es vom Grund. Der Bildausschnitt sitzt bewusst etwas oberhalb der
   Mitte, dort liegt die Beratungssituation. */
.kh-home-hero__media { position: relative; z-index: 1; }

.kh-home-hero__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--kh-radius-xl);
  box-shadow:
      0 0 0 1px rgba(255, 255, 255, .22),
      0 28px 64px -24px rgba(0, 0, 0, .55);
}

.kh-home-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: 0;
  /* DESIGN-LIVE-3: 320ms waren die Dauer einer Komponente, nicht
     die eines Bildes. Ein Ausschnitt, der sich bewegt, braucht
     laenger als ein Knopf, der die Farbe wechselt — 520ms. */
  transition: transform var(--kh-motion-slow) var(--kh-ease-standard);
}

/* Dasselbe fuer das zweite und letzte Foto mit Ausschnittbewegung.
   Die Regel liegt hier und nicht in global.css, weil kh-media--zoom
   auch auf anderen Seiten verwendet wird und dieser Durchgang die
   Startseite poliert. */
.kh-home-company .kh-media--zoom img {
  transition: transform var(--kh-motion-slow) var(--kh-ease-standard);
}

/* DESIGN-LIVE-3: 1.03 wurde --kh-hover-zoom (1.02). Das Hero-Foto
   und das Unternehmens-Foto sind die einzigen beiden Bilder der
   Seite mit Ausschnittbewegung; sie bewegen sich jetzt gleich. */
.kh-home-hero__image:hover img { transform: scale(var(--kh-hover-zoom)); }

@media (prefers-reduced-motion: reduce) {

  .kh-home-hero__image img { transition: none; }
  .kh-home-hero__image:hover img { transform: none; }
}


/* ==========================================================
   02. SCHNELLZUGRIFF
   Fuenf Handlungen als Aktionssystem. Zwei Hauptwege gross,
   drei Nebenwege klein — 2 + 3, bewusst unsymmetrisch.
   ==========================================================

   WAS VORHER DA STAND UND WARUM ES WEG IST
   Die Schiene bestand aus fuenf Elementor-Icon-Boxen mit
   Font-Awesome-Zeichen, in einer Reihe aus Haarlinien. Sie war
   leise, gleichmaessig und ohne Rangfolge: „Filiale finden" wog
   genauso viel wie „Kontakt". Genau das war das Problem — die
   beiden wichtigsten Wege der Seite standen unter ferner liefen.

   Jetzt fuehren zwei grosse Karten (Filiale finden, Termin
   vereinbaren), darunter drei schmale. Jede Karte ist EIN Link,
   also genau ein Tabstopp und eine Trefferflaeche weit ueber
   44px — kein aufgezogenes ::after um einen Textlink herum.

   KEINE ICON-BIBLIOTHEK MEHR
   Die Zeichen sind Inline-SVG in currentColor, wie bei den
   Leistungs-Tabs. Font Awesome wird an dieser Stelle nicht mehr
   gebraucht.

   KEINE ELEMENTOR-KARTEN
   Flaeche, Rahmen und Radius kommen aus den Tokens. Es gibt
   keinen Schatten im Ruhezustand: die Karten sollen ruhig
   liegen und erst beim Zeigen antworten. */

.kh-home-quickactions { border-bottom: 1px solid var(--kh-color-line-200); }

.kh-home-quickactions .kh-quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-xs);
  width: 100%;
}

.kh-quick__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kh-space-sm);
  min-height: var(--kh-tap-min);
  padding: var(--kh-space-sm) var(--kh-space-md);
  color: var(--kh-color-ink-900);
  text-decoration: none;
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  transition:
    border-color var(--kh-transition-fast) var(--kh-ease-standard),
    background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-quick__card:hover {
  border-color: var(--kh-color-ink-900);
  background-color: var(--kh-color-surface-050);
}

.kh-quick__card:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Das Zeichen sitzt in einer eigenen, sehr leisen Flaeche. Sie
   traegt die Farbe, nicht die Karte — so bleibt die Reihe ruhig
   und das Zeichen trotzdem auffindbar. */
.kh-quick__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--kh-color-primary-text);
  background-color: var(--kh-color-surface-100);
  border-radius: var(--kh-radius-sm);
  transition:
    color var(--kh-transition-fast) var(--kh-ease-standard),
    background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-quick__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.kh-quick__body { display: grid; gap: 2px; min-inline-size: 0; }

.kh-quick__eyebrow {
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-wide);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
}

.kh-quick__title {
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-tight);
}

.kh-quick__text {
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-snug);
  color: var(--kh-color-ink-700);
}

/* Der Pfeil ist das einzige bewegte Teil. Zwei Pixel genuegen —
   mehr waere Zappeln. */
.kh-quick__arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--kh-color-ink-400);
  transition:
    transform var(--kh-transition-fast) var(--kh-ease-standard),
    color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-quick__arrow svg { inline-size: 1rem; block-size: 1rem; }

/* DESIGN-LIVE-3: 2px wurden zu --kh-hover-shift (3px). Pfeile auf
   dieser Seite bewegen sich jetzt ueberall gleich weit. */
.kh-quick__card:hover .kh-quick__arrow {
  transform: translateX(var(--kh-hover-shift));
  color: var(--kh-color-ink-900);
}

/* --- Die beiden Hauptwege --------------------------------- */

/* „Filiale finden" und „Termin vereinbaren" sind die beiden
   Handlungen, wegen derer diese Seite existiert. Sie bekommen
   mehr Hoehe, eine Zeile Erklaerung und ein rotes Zeichen —
   aber keine rote Flaeche: die Karte soll fuehren, nicht
   schreien. */
.kh-quick__card--lead {
  align-items: start;
  padding: var(--kh-space-md);
  border-color: var(--kh-color-line-300);
}

.kh-quick__card--lead .kh-quick__icon {
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--kh-color-ink-inverse);
  background-color: var(--kh-color-primary-500);
}

.kh-quick__card--lead .kh-quick__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.kh-quick__card--lead .kh-quick__title { font-size: var(--kh-text-h4); }

.kh-quick__card--lead .kh-quick__arrow { align-self: center; }

.kh-quick__card--lead:hover .kh-quick__icon {
  background-color: var(--kh-color-primary-600);
}

/* Die drei Nebenwege tragen keine Erklaerungszeile; ihr Titel
   steht allein und die Zeile bleibt niedrig. */
.kh-quick__card--minor .kh-quick__title { font-size: var(--kh-text-sm); }

/* ==========================================================
   03. LEISTUNGEN
   Redaktionelles Layout: ein hervorgehobener Schwerpunkt plus eine
   Liste der uebrigen Bereiche. Kein 6er-Kartenraster.
   ========================================================== */

/* DER ABSCHNITTSKOPF FUELLT DIE ZEILE
   -------------------------------------------------------------
   Vorher: Eyebrow, Titel und Lead standen als schmale Saeule links,
   die rechten zwei Drittel der Zeile blieben leer — auf 1440px rund
   700px Nichts ueber dem Inhalt. Jetzt tragen Titel und Lead je eine
   Spalte, die Zeile ist gefuellt und der Abschnitt beginnt mit einer
   Komposition statt mit einem Absatz. */
@media (min-width: 62em) {

  .kh-home-services .kh-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: var(--kh-space-xs);
    align-items: end;
    max-width: none;
  }

  .kh-home-services .kh-section-header__eyebrow,
  .kh-home-services .kh-section-header__title { grid-column: 1; }

  .kh-home-services .kh-section-header__lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    padding-bottom: .35em;
  }

  .kh-home-services .kh-section-header__title .elementor-heading-title {
    font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.028em;
    max-width: 14ch;
  }
}

/* ----------------------------------------------------------
   LEISTUNGEN ALS ECHTE TABS

   Vorher: links eine weisse Karte „Mobilfunk", rechts vier
   Eintraege als starre Liste. Vier Fuenftel der Inhalte lagen
   damit auf Dauer klein und gleichwertig nebeneinander, und die
   Gewichtung „Mobilfunk ist wichtiger" war eine Behauptung des
   Layouts, keine Entscheidung der Besucherin.

   Jetzt fuehrt die rechte Spalte durch fuenf gleichrangige
   Bereiche, und die linke zeigt den gewaehlten gross. Die
   Bedienlogik kommt vollstaendig aus dem Tabs-Modul in main.js
   (Abschnitt 08): Rollen, Pfeiltasten, Home/End, wanderndes
   tabindex, Panelumschaltung. Hier steht nur die Gestalt.

   Die Reihenfolge im Markup ist Leiste, dann Panels — so sehen es
   die ARIA Authoring Practices vor. Auf dem Desktop dreht das
   Raster die Spalten, nicht das Dokument.
   ---------------------------------------------------------- */

/* Die Flaeche ist nicht einfach Weiss auf Weiss: von oben laeuft ein
   sehr heller Verlauf in das Grau der Section, oben rechts liegt ein
   kaum sichtbarer roter Schein, und eine Haarlinie trennt sauber vom
   Schnellzugriff darueber. Kein Muster, keine Textur. */
.kh-home-services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(112% 74% at 92% 4%, rgba(230, 0, 0, .05) 0%, rgba(230, 0, 0, 0) 62%);
}

.kh-home-services::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background-color: var(--kh-color-line-200);
}

.kh-home-services > * { position: relative; }

/* Der Abstand zum Abschnittskopf kommt vollstaendig von hier, damit er
   an einer Stelle steht und nicht aus zwei Abstaenden zusammenwaechst.
   Nachgemessen waren es vorher 112px aus 60px Kopfrand plus 52px
   Aussenabstand. */
.kh-home-services .kh-section-header { margin-bottom: 0; }

.kh-svc {
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
  width: 100%;
  margin-top: clamp(40px, 4.4vw, 80px);
}

@media (min-width: 64em) {

  .kh-svc {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: clamp(48px, 5vw, 96px);
    align-items: start;
  }

  .kh-svc {
    grid-template-rows: auto auto;
    /* Der Aussenabstand des Rasters gilt fuer Spalten UND Zeilen. Mit
       49px Zeilenabstand stand der Weg nachgemessen 85px unter der
       Leiste und wirkte losgeloest. Die Zeilen brauchen hier keinen
       Abstand — der Weg bringt seinen eigenen mit. */
    row-gap: 0;
  }

  .kh-svc__stage { grid-column: 1; grid-row: 1 / span 2; }
  .kh-svc__nav   { grid-column: 2; grid-row: 1; }
  .kh-svc__more  { grid-column: 2; grid-row: 2; margin-top: var(--kh-space-sm); }
}

/* Im Dokument steht der Weg zwischen Leiste und Panel — dort gehoert
   er auf dem Desktop hin. Auf schmalen Breiten soll er ans Ende, sonst
   truennte er die Leiste vom Inhalt, den sie steuert. */
@media (max-width: 63.99em) {

  .kh-svc__nav   { order: 1; }
  .kh-svc__stage { order: 2; }
  .kh-svc__more  { order: 3; }
}


/* --- Detailbereich links ---------------------------------- */

/* Kein Kasten, keine Karte: eine senkrechte rote Kante traegt den
   Block. Dasselbe Mittel wie im Karriereband — ein Akzent, keine
   Umrandung. */
.kh-svc__panel {
  position: relative;
  padding-left: clamp(20px, 2.4vw, 36px);
  border-left: 2px solid var(--kh-color-primary-500);
  animation: kh-svc-einblenden 320ms cubic-bezier(.22, .61, .36, 1) both;
}

/* Der Wechsel ist der einzige Bewegungsmoment dieses Abschnitts:
   acht Punkte nach oben und aufblenden. Kein Schieben, kein
   Karussell. */
@keyframes kh-svc-einblenden {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

.kh-svc__panel:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
  border-radius: var(--kh-radius-sm);
}

/* ENTFALLEN mit DESIGN-LIVE-1.1: die Gestaltungsregeln fuer
   .kh-svc__num (blasse Riesenziffer) und .kh-svc__eyebrow
   („SCHWERPUNKT"). Beide Elemente sind aus den Elementor-Daten der
   Startseite entfernt — je sieben Absaetze —, die Regeln hatten
   danach nichts mehr zu gestalten.

   Nachgezaehlt vor dem Loeschen: null Treffer im ausgelieferten
   Markup. */

.kh-svc__title {
  margin: var(--kh-space-2xs) 0 0;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.1;
  letter-spacing: -.024em;
  color: var(--kh-color-ink-900);
}

.kh-svc__text {
  margin: var(--kh-space-sm) 0 0;
  max-width: 46ch;
  font-size: var(--kh-text-lead);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

/* Merkmale als offene Zeile mit Haarlinien statt als Kaestchen.
   Der Inhalt ist eine Verdichtung des Absatzes darueber, kein
   neues Leistungsversprechen. */
.kh-svc__feat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-2xs) var(--kh-space-md);
  margin: var(--kh-space-md) 0 0;
  padding: 0;
  list-style: none;
}

.kh-svc__feat li {
  position: relative;
  padding-left: var(--kh-space-sm);
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-700);
}

.kh-svc__feat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 2px;
  background-color: var(--kh-color-primary-500);
}

/* Textlink statt zweiter Schaltflaeche: der Hauptweg der Seite ist
   „Termin vereinbaren" im Abschluss, nicht hier. */
.kh-svc__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  margin-top: clamp(20px, 2.2vw, 32px);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-primary-text);
  text-decoration: none;
}

/* Der Pfeil ist gezeichnet, kein Zeichensatz und kein zweiter
   Symbolstil. */
.kh-svc__cta::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate 200ms var(--kh-ease-in-out);
}

.kh-svc__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.kh-svc__cta:hover::after { translate: 3px 0; }

.kh-svc__cta:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
  border-radius: var(--kh-radius-xs);
}


/* --- Tab-Leiste rechts ------------------------------------ */

.kh-svc__nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--kh-color-line-200);
}

.kh-svc__tab {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--kh-space-sm);
  width: 100%;
  margin: 0;
  padding: var(--kh-space-sm) var(--kh-space-2xs) var(--kh-space-sm) var(--kh-space-sm);
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--kh-color-line-200);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 220ms var(--kh-ease-in-out),
    translate        220ms var(--kh-ease-in-out);
}

/* Der aktive Zustand wird von vier Dingen zugleich getragen: roter
   Kante, leicht abgesetzter Flaeche, Schriftgewicht und Iconfarbe.
   Keine grosse rote Karte — die wuerde den Detailbereich links
   ueberstimmen, der die eigentliche Aussage traegt. */
.kh-svc__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background-color: var(--kh-color-primary-500);
  scale: 1 0;
  transform-origin: center;
  transition: scale 260ms var(--kh-ease-in-out);
}

/* ENTFALLEN mit DESIGN-LIVE-3: das seitliche Verrutschen um 3px
   beim Darueberfahren. Es wurde an drei weiteren Stellen dieser
   Datei wieder zurueckgenommen (mobil, in der Sektion selbst und
   bei reduzierter Bewegung) — vier Regeln um dieselbe Eigenschaft,
   von denen die erste nie gewonnen hat. Die Leiste reagiert ueber
   Flaeche und Farbe, nicht ueber Lage. */

.kh-svc__tab:hover .kh-svc__tab-title { color: var(--kh-color-primary-text); }
.kh-svc__tab:hover .kh-svc__svg       { color: var(--kh-color-primary-500); }

.kh-svc__tab.is-open {
  background-color: rgba(255, 255, 255, .72);
  translate: 0;
}

.kh-svc__tab.is-open::before { scale: 1 1; }

.kh-svc__tab:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
  z-index: 1;
}

.kh-svc__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .1em;
  color: var(--kh-color-ink-500);
  transition: color 220ms var(--kh-ease-in-out);
}

.kh-svc__tab.is-open .kh-svc__tab-icon { color: var(--kh-color-primary-500); }

.kh-svc__svg {
  width: 1.0625rem;
  height: 1.0625rem;
  fill: currentColor;
}

.kh-svc__tab-body { display: block; min-width: 0; }

.kh-svc__tab-title {
  display: block;
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-medium);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-tight);
  color: var(--kh-color-ink-900);
  transition: color 220ms var(--kh-ease-in-out);
}

.kh-svc__tab.is-open .kh-svc__tab-title { font-weight: var(--kh-font-weight-bold); }

.kh-svc__tab-text {
  display: block;
  margin-top: 2px;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-500);
}


/* --- Ein Weg statt fuenf ins Leere ------------------------ */

/* Vorher schloss jedes der fuenf Panels mit „Leistung im Detail"
   auf /leistungen/. Nachgemessen hat diese Seite 66 Woerter und
   keine einzige Section — sie besteht nur aus dem Footer. Fuenf
   Handlungsaufforderungen in eine leere Seite sind keine
   Handlungsaufforderungen.

   Es gibt fuer die fuenf Themen keine eigenen Zielseiten. Statt
   einen Link zu erfinden, traegt der Abschnitt jetzt EINEN echten
   Weg: die Filialuebersicht mit 610 Woertern und vier Abschnitten.
   Er steht unter der Leiste, nicht in den Panels — so wiederholt er
   sich nicht fuenfmal. */
.kh-svc__more {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  align-self: start;
  min-height: var(--kh-tap-min);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-primary-text);
  text-decoration: none;
}

.kh-svc__more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate 200ms var(--kh-ease-in-out);
}

.kh-svc__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.kh-svc__more:hover::after { translate: 3px 0; }

.kh-svc__more:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
  border-radius: var(--kh-radius-xs);
}


/* --- Unter 1024px: Leiste waagerecht ---------------------- */

/* Nicht die Desktopspalte zusammengedrueckt, sondern eine eigene
   Form: eine waagerecht scrollbare Leiste ueber dem Detailbereich.
   Die Leiste scrollt in sich, der Abschnitt nicht — die Breite des
   Dokuments bleibt unberuehrt. */
@media (max-width: 63.99em) {

  .kh-svc__nav {
    flex-direction: row;
    gap: var(--kh-space-2xs);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: var(--kh-space-2xs);
    border-top: 0;
    scrollbar-width: none;
  }

  .kh-svc__nav::-webkit-scrollbar { display: none; }

  .kh-svc__tab {
    flex: 0 0 auto;
    grid-template-columns: 1.25rem auto;
    align-items: center;
    gap: var(--kh-space-2xs);
    width: auto;
    /* 44px Mindesthoehe: eine Pille aus reinem Polster kam auf 36px. */
    min-height: var(--kh-tap-min);
    padding: var(--kh-space-2xs) var(--kh-space-sm);
    scroll-snap-align: start;
    border: 1px solid var(--kh-color-line-200);
    border-radius: 999px;
  }

  .kh-svc__tab::before { display: none; }

  .kh-svc__tab.is-open {
    color: var(--kh-color-ink-inverse);
    background-color: var(--kh-color-ink-900);
    border-color: var(--kh-color-ink-900);
  }

  .kh-svc__tab.is-open .kh-svc__tab-title { color: var(--kh-color-ink-inverse); }
  .kh-svc__tab.is-open .kh-svc__tab-icon  { color: var(--kh-color-ink-inverse); }

  .kh-svc__tab-icon { margin-top: 0; }

  .kh-svc__tab-title { font-size: var(--kh-text-sm); white-space: nowrap; }

  /* Die Kurzbeschreibung steht in der Leiste nicht zur Verfuegung —
     sie wuerde jede Pille auf Zeilenhoehe aufblasen. Der Titel ist
     der zugaengliche Name, die Beschreibung steht vollstaendig im
     Detailbereich darunter. */
  .kh-svc__tab-text { display: none; }
}


/* ==========================================================
   04. STANDORT-TEASER
   Anlaufpunkt fuer den spaeteren Standortfinder. Das Suchfeld ist
   sichtbar, aber ehrlich: es ist ein Link zur Filialuebersicht.
   Es gibt bewusst keine simulierte PLZ-Suche und keine Trefferliste.
   ========================================================== */

/* DESIGN-9B · AUS ABSCHNITT WIRD WERKZEUG.
   ---------------------------------------------------------
   Vorher: zwei gleich schwere Spalten. Links Augenbraue, Titel,
   Absatz, drei Merkmalzeilen mit Haarlinien, zwei Knoepfe —
   rechts eine Karte mit schwarzem Kopfbalken. Das las sich wie
   ein weiterer Inhaltsabschnitt, nicht wie ein Werkzeug.

   Nachher: EIN zusammenhaengendes Produktobjekt. Eine weisse,
   leicht erhabene Flaeche auf ruhiger Leinwand, darin von oben
   nach unten: knapper Kopf, grosse Suchflaeche, kleine
   Belegzeile, zwei Nebenwege als Textlinks.

   REIHENFOLGE JETZT IM QUELLTEXT: bis DESIGN-LIVE-1 standen
   Merkmalzeilen und Knoepfe INNERHALB eines Intro-Containers und
   damit vor der Suchhuelle; display:contents loeste diese Huelle auf
   und sieben Zeilenzuweisungen sortierten den Rest. Mit DESIGN-LIVE-1.1
   ist der Container aus den Elementor-Daten entfernt und die Huelle
   an die dritte Stelle gewandert. Das Raster folgt jetzt schlicht dem
   Quelltext: Kopf, Werkzeug, Belege, Nebenwege, Erlaeuterung. */

.kh-home-locator .kh-home-locator__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  align-items: start;

  padding: clamp(24px, 2.6vw + 10px, 44px);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-000);
  box-shadow: var(--kh-elev-2);
}

/* ENTFALLEN mit DESIGN-LIVE-1.1: display:contents auf der Intro-Huelle
   und drei Zeilenzuweisungen. Beides existierte nur, weil die
   Elementor-Daten eingefroren waren. */

/* Knapper Kopf: der Abschnitt erklaert sich ueber das Werkzeug,
   nicht ueber einen Absatz davor. */
.kh-home-locator .kh-h2 {
  margin-block: var(--kh-space-2xs) 0;
  font-size: var(--kh-text-h2);
}

/* Die Erlaeuterung steht seit DESIGN-LIVE-1.1 am Ende — im Quelltext
   wie im Bild, auf jeder Breite gleich. Bei einem Werkzeug ist die
   Erklaerung eine Fussnote, kein Vorwort; vier Zeilen ueber der
   Bedienflaeche waren auf 390px der schlechteste Platz dafuer. */
/* Lesemass siehe Abschnitt 00 — am Absatz, nicht an der Huelle. */
.kh-home-locator__intro-text {
  margin-block-start: clamp(18px, 1.8vw, 26px);
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

/* Suchhuelle */
/* Huelle fuer den spaeteren Standortfinder.
   Keine feste Hoehe, kein min-height auf der Huelle selbst — der spaetere
   Plugin-Inhalt kann sie ohne Anpassung fuellen. */
/* Die Suchflaeche ist der Handlungspunkt der Section. Sie bekommt
   dafuer eine eigene Kante: rote Oberkante, mehr Polster und einen
   tieferen Schatten, damit sie von der hellgrauen Flaeche abhebt. */
/* DESIGN-9B: die Huelle traegt keine eigene Karte mehr — das
   Objekt darum ist die Karte. Sie ist jetzt die Bedienzone darin:
   ruhige Flaeche, eine Kante, kein Schatten, keine rote Oberkante. */
.kh-home-locator .kh-home-locator__search-shell {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-sm);
  width: 100%;
  margin-block-start: clamp(20px, 2vw, 32px);
  padding: clamp(18px, 1.8vw + 8px, 28px);
  background-color: var(--kh-color-surface-050);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  box-shadow: var(--kh-elev-0);
}

.kh-home-locator__search-shell .elementor-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-space-sm);
  width: 100%;
  /* DESIGN-9B: 3.25rem waren 52px und damit so hoch wie ein
     gewoehnlicher Knopf. Die Bedienflaeche ist der Handlungspunkt
     des Abschnitts und soll das auch sein — 64px auf dem Desktop. */
  min-height: clamp(3.5rem, 1.6vw + 3.1rem, 4rem);
  padding-inline: clamp(14px, 1.2vw, 20px);
  font-size: var(--kh-text-lead);
  font-weight: var(--kh-font-weight-regular);
  text-align: left;
  color: var(--kh-color-ink-700);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-md);
  transition: border-color var(--kh-transition-fast) var(--kh-ease-standard),
              background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-home-locator__search-shell .elementor-button:hover {
  color: var(--kh-color-ink-900);
  background-color: var(--kh-color-surface-000);
  border-color: var(--kh-color-ink-900);
}

/* Der Suchbutton traegt keine .kh-button-wrap-Klasse und erbt deshalb
   keinen globalen Fokusring — er wird hier gesetzt. */
.kh-home-locator__search-shell .elementor-button:focus-visible {
  outline: none;
  border-color: var(--kh-color-ink-900);
  box-shadow: var(--kh-shadow-focus);
}

.kh-home-locator__search-shell .elementor-button-content-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-space-sm);
  width: 100%;
}

.kh-home-locator__search-shell .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Waechst mit der Bedienflaeche mit und bleibt ein echtes
     Bedienziel. */
  width: 2.75rem;
  height: 2.75rem;
  color: var(--kh-color-ink-inverse);
  background-color: var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
}

.kh-home-locator__search-shell .elementor-button-icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.kh-home-locator__search-hint {
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

/* Was Sie je Shop erwartet — Erklaerung, keine Ergebnisliste. */
/* DESIGN-9B: Belegzeile statt Liste. Drei Merkmale nebeneinander,
   ohne die drei Haarlinien, die sie vorher zu einer Tabelle
   gemacht haben. */
.kh-home-locator .kh-home-locator__locations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kh-space-xs) var(--kh-space-xl);
  width: 100%;
  margin-top: clamp(18px, 1.8vw, 26px);
}

.kh-home-locator .kh-home-locator__location-hint {
  display: flex;
  align-items: center;
  min-height: 0;
  padding-block: 0;
  border-top: 0;
}

/* Elementor-Widgets nehmen in einem fremden Flex-Container nur ihre
   Inhaltsbreite ein und werden mittig gesetzt. Das Kind wird deshalb
   ausdruecklich auf volle Breite gezwungen. */
.kh-home-locator .kh-home-locator__location-hint > * {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

/* Elementor liefert fuer die Icon-Box eine Eigenregel mit (0,3,0)
   (.elementor-12 .elementor-element-xxxx .elementor-icon-box-wrapper),
   die text-align auf center setzt. Vier Klassenstufen gewinnen dagegen
   ohne !important und ohne Elementor-IDs im Stylesheet. */
.kh-home-locator .kh-home-locator__locations .kh-home-locator__location-hint .elementor-icon-box-wrapper {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: var(--kh-space-xs);
  width: 100%;
  text-align: left;
}

.kh-home-locator__location-hint .elementor-icon-box-icon { margin: 0; }

.kh-home-locator__location-hint .elementor-icon {
  display: inline-flex;
  color: var(--kh-color-primary-text);
}

.kh-home-locator__location-hint .elementor-icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* Kompakte Merkmalzeile, kleiner als der Fliesstext: sie erklaert, was Sie
   je Shop erwartet, und ist ausdruecklich keine Trefferliste. */
.kh-home-locator__location-hint .elementor-icon-box-title {
  margin: 0;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: var(--kh-leading-snug);
  text-wrap: balance;
  color: var(--kh-color-ink-900);
}

/* DESIGN-9B: die beiden Knoepfe werden zu Nebenwegen.
   Der Handlungspunkt dieses Abschnitts ist die Suche darueber;
   zwei weitere Knoepfe daneben haetten mit ihr konkurriert.
   Sie uebernehmen deshalb das Textlink-Primitiv aus 9A —
   das Knopfsystem selbst bleibt unangetastet. */
.kh-home-locator .kh-home-locator__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-xs) var(--kh-space-xl);
  margin-top: clamp(20px, 2vw, 30px);
}

.kh-home-locator .kh-home-locator__actions .kh-button-wrap { inline-size: auto; }

.kh-home-locator .kh-home-locator__actions .elementor-button {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kh-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--kh-radius-xs);
  background-color: transparent;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.2;
  color: var(--kh-color-primary-text);
  box-shadow: none;
}

.kh-home-locator .kh-home-locator__actions .elementor-button::after {
  content: "→";
  display: inline-block;
  margin-inline-start: var(--kh-space-2xs);
  transition: transform var(--kh-motion-fast) var(--kh-ease-standard);
}

.kh-home-locator .kh-home-locator__actions .elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

@media (hover: hover) and (pointer: fine) {

  .kh-home-locator .kh-home-locator__actions .elementor-button:hover {
    background-color: transparent;
    color: var(--kh-color-primary-700);
    transform: none;
  }

  .kh-home-locator .kh-home-locator__actions .elementor-button:hover::after {
    transform: translateX(var(--kh-hover-shift));
  }
}

@media (prefers-reduced-motion: reduce) {

  .kh-home-locator .kh-home-locator__actions .elementor-button:hover::after { transform: none; }
}

/* Ruhige Leinwand statt #F2F2F2: das weisse Objekt soll sich
   abheben, und die Seite verliert einen von zwei fast gleichen
   Grautoenen. */
.kh-home-locator { background-color: var(--kh-color-surface-050); }

/* ENTFALLEN mit DESIGN-LIVE-1.1: der gesamte mobile Umsortierblock
   mit vier Zeilenzuweisungen. Die Reihenfolge steht jetzt im
   Quelltext und gilt auf jeder Breite — Desktop und Telefon lesen
   dasselbe. */


/* ==========================================================
   05. WARUM VOR ORT
   Dunkle Flaeche, asymmetrisch, nummerierte Argumente.
   Keine Karten, keine Icons — reine Typografie.
   ========================================================== */

/* DESIGN-9B · AUS BERICHT WIRD AUSSAGE.
   ---------------------------------------------------------
   Vorher: links Augenbraue, Titel, Satz — rechts 01 bis 04,
   vier gleich schwere Zeilen, fuenf Haarlinien. Das ist die
   Form eines Unternehmensberichts, und sie stand ausgerechnet
   an der Stelle, die vom Gespraech handelt.

   Nachher: eine grosse gesprochene Aussage, darunter ein
   ungleich gewichtetes Argumentfeld. Das erste Argument traegt
   die These der Ueberschrift und bekommt Gewicht; die drei
   uebrigen stehen kompakt daneben. Keine Ziffern — das sind
   Argumente, keine Schritte. Keine Linien — getrennt wird
   durch Raum und Groesse.

   OHNE FOTO, und das ist belegt, nicht bequem: die Mediathek
   enthaelt genau ein brauchbares Foto (1800x1200), und das
   steht bereits im Hero derselben Seite. Das zweite misst
   235x148 und waere bei halber Sektionsbreite dreifach
   hochskaliert, das dritte zeigt den Hamburger AEZ-Shop und
   passt nicht zu einer allgemeinen Aussage. Erfundene Bilder
   gibt es hier nicht. */

.kh-home-why .kh-home-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 4vw, 72px);
  width: 100%;
  align-items: start;
}

/* Die Aussage bekommt Groesse und ein enges Mass — sie soll
   gelesen werden wie ein Satz, nicht wie eine Zeile. */
.kh-home-why .kh-home-why__intro { max-width: none; }

/* Das Mass von 20ch sass an der Elementor-Huelle und war ohne
   Wirkung (siehe Abschnitt 00). Die Ueberschrift wird nicht
   nachtraeglich verengt: so wie sie steht — zwei Zeilen ueber die
   Containerbreite — ist sie abgenommen worden, und fuer eine
   Display-Zeile ist das ein richtiges Mass. */
.kh-home-why .kh-h2 {
  font-size: var(--kh-text-display);
  line-height: 1.12;
  letter-spacing: var(--kh-tracking-tight);
}

/* Lesemass siehe Abschnitt 00. Der Vorspann lief mit 77 Zeichen je
   Zeile ueber die gesamte Containerbreite. */
.kh-home-why__intro-text {
  font-size: var(--kh-text-lead);
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}

/* --- Bildplatz (DESIGN-LIVE-3.1) -------------------------- */

/* „Warum vor Ort" blieb visuell B, weil die Fotografie fehlte —
   und weil die fehlende Fotografie bis hierher bedeutete: gar
   keine Bildflaeche. Das ist aufgehoben. Der Abschnitt sagt
   „Manche Fragen klaert man besser im Gespraech"; das Bild dazu
   ist ein Gespraech im Shop, und es gehoert neben die Aussage,
   nicht unter die Argumente.

   7 zu 5 statt haelftig: die Aussage fuehrt, das Bild begleitet.
   Bei 1440px sind das rund 630px Satzspiegel und 450px Bild.

   :has() haelt den Einspalter, solange der Bildplatz im Markup
   fehlt — damit gibt es zwischen den beiden Freigaben keinen
   Zwischenzustand mit halb leerem Raster. */
@media (min-width: 64em) {

  .kh-home-why .kh-home-why__grid:has(.kh-home-why__media) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 4vw, 72px);
    align-items: start;
  }

  .kh-home-why .kh-home-why__grid:has(.kh-home-why__media) .kh-home-why__points {
    grid-column: 1 / -1;
  }
}

.kh-home-why .kh-home-why__media { aspect-ratio: 3 / 2; }

@media (max-width: 63.99em) {

  /* Einspaltig steht das Bild zwischen Aussage und Argumenten und
     wird flacher — ueber die volle Breite waere 3:2 auf dem
     Telefon ein 225px hohes Feld vor den Argumenten. */
  .kh-home-why .kh-home-why__media { aspect-ratio: 16 / 9; }
}

.kh-home-why .kh-home-why__points {
  /* 70ms statt der systemweiten 90ms: vier Argumente sollen
     nacheinander ankommen, nicht eintrudeln. */
  --kh-motion-stagger: 70ms;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 3vw, 48px);
  width: 100%;
}

/* Die Huelle selbst blendet nicht mit auf — sonst multiplizieren
   sich zwei Deckkraftverlaeufe. Bewegt werden die vier Argumente.
   Gleiche Begruendung wie bei der Leistungsleiste in 8C. */
.kh-home-why .kh-home-why__points.kh-reveal.is-armed {
  opacity: 1;
  transform: none;
}

/* Keine Rasterspalte fuer die Ziffer mehr, kein Polster, keine
   Linie. Der Punkt ist jetzt nur noch Text. */
.kh-home-why .kh-home-why__point {
  display: block;
  padding-block: 0;
  border: 0;
}

.kh-home-why .kh-home-why__point:last-child { border-bottom: 0; }

/* 01 bis 04 sind seit DESIGN-LIVE-1 aus den Elementor-Daten entfernt
   (vier heading-Widgets, IDs 57483914 / 94ebc691 / 6d4e2684 / e0555998).
   Die Ausblendregel, die hier stand, hat damit nichts mehr zu
   verbergen und ist entfallen. */

.kh-home-why .kh-home-why__point-body {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-xs);
  width: 100%;
}

.kh-home-why__point-title {
  margin: 0;
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-snug);
  color: rgba(255, 255, 255, .94);
}

.kh-home-why__point-text {
  max-width: 48ch;
  line-height: 1.6;
  color: rgba(255, 255, 255, .64);
}

/* Auch auf dem Telefon fuehrt das erste Argument. Ohne diese Regel
   standen dort gemessen vier Titel zu je 18px untereinander — die
   Gewichtung, die den Abschnitt ausmacht, war genau da weg, wo am
   wenigsten Platz ist, sie wiederzufinden. */
.kh-home-why .kh-home-why__point:first-child .kh-home-why__point-title {
  font-size: var(--kh-text-h3);
  letter-spacing: var(--kh-tracking-tight);
  color: var(--kh-color-ink-inverse);
}

.kh-home-why .kh-home-why__point:first-child .kh-home-why__point-text {
  color: rgba(255, 255, 255, .78);
}

/* --- Ungleiches Gewicht ab Tablet ------------------------- */

/* Das erste Argument fuehrt, die drei uebrigen stuetzen. Vier
   gleich grosse Felder waeren wieder vier Karten. */
@media (min-width: 48em) {

  .kh-home-why .kh-home-why__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(28px, 3vw, 56px);
  }

  .kh-home-why .kh-home-why__point:first-child {
    grid-column: 1 / -1;
    max-inline-size: 46rem;
  }

  .kh-home-why .kh-home-why__point:first-child .kh-home-why__point-title {
    font-size: var(--kh-text-h2);
    letter-spacing: var(--kh-tracking-tight);
    color: var(--kh-color-ink-inverse);
  }

  .kh-home-why .kh-home-why__point:first-child .kh-home-why__point-text {
    max-width: 56ch;
    font-size: var(--kh-text-lead);
    color: rgba(255, 255, 255, .78);
  }
}


/* ==========================================================
   06. BERATUNG / TERMIN
   Links die Begruendung, rechts die echte Buchung.
   ==========================================================

   AUS DER ATTRAPPE WIRD EINE BUCHUNG
   Hier stand eine Huelle: Zeichen, Titel, ein Absatz „An dieser
   Stelle wird die Terminbuchung eingebunden" und eine
   Schaltflaeche zum Kontaktformular. Jetzt steht hier die
   Terminbuchung selbst — Schritt 1 Shop waehlen, Schritt 2
   Termin waehlen, ohne die Seite zu verlassen.

   GEBUCHT WIRD IM PLUGIN
   Das Markup kommt aus [kh_booking] (functions.php 22), die
   Buchung aus convi Booking. Dieses Stylesheet gestaltet nur.

   DAS WIDGET BLEIBT HELL
   convi Booking liefert eine weisse Karte und hat dafuer einen
   dokumentierten Token-Vertrag (--cnv-booking-*). Seine internen
   Regeln rechnen aber mit dunklem Text auf Hell — muted, faint
   und hover sind fest als rgba(15,23,42,…) notiert. Auf einer
   dunklen Flaeche waeren sie unsichtbar. Das Widget bleibt
   deshalb hell; dunkel ist der Kopf der Karte darueber.
   Uebernommen werden nur die Vertragswerte: Markenfarbe, Text,
   Linien, Radien.

   DIE KARTE FUEHRT, DER TEXT BEGLEITET
   Vorher 54/46 zugunsten des Textes. Die Buchung ist der Grund
   dieser Section, also kehrt sich das Verhaeltnis um: rund 40
   Prozent Text, rund 60 Prozent Karte. */

/* GEMESSEN UND KORRIGIERT · minmax(0, 1fr) STATT 1fr
   Das Buchungswidget traegt eine feste Untergrenze von 280px
   (frontend.css, „Sicherheitsuntergrenze"). Mit 1fr — also
   minmax(auto, 1fr) — hat diese Untergrenze die Rasterspur
   aufgezogen: bei 320px Fenster war die Spur 328px breit, die
   Karte lief aus dem Container heraus und wurde am rechten Rand
   abgeschnitten, samt Ueberschrift und Schrittanzeige.
   minmax(0, …) nimmt der Spur diese Mindestbreite. */
.kh-home-booking .kh-home-booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kh-space-xl);
  width: 100%;
  align-items: start;
}

/* DESIGN-LIVE-2 · AUS UMRAHMUNG WIRD HANDLUNG.
   ---------------------------------------------------------
   Vorher: links eine redaktionelle Spalte (Augenbraue, H2, Satz,
   vier Nutzenkarten), rechts eine Karte mit EIGENER Ueberschrift
   „Online-Terminbuchung" und eigenem Erklaersatz — und darin,
   648px schmal, das Buchungswerkzeug. Zwei Ueberschriften fuer
   eine Sache, und das Werkzeug bekam die Haelfte der Flaeche.

   Nachher: Kopf, dann das Werkzeug ueber die volle Breite, dann
   die Belege. Die doppelte Ueberschrift ist aus den Elementor-Daten
   entfernt; der Erklaersatz bleibt, weil er etwas anderes sagt als
   der Vorspann — er fuehrt in die Bedienung ein.

   Nebeneffekt, der kein Nebeneffekt ist: der Kalender hat jetzt die
   volle Containerbreite statt 648px. Die Tagesflaechen wachsen
   entsprechend mit. */

/* Das Lesemass des Vorspanns steht in Abschnitt 00 — hier sass es
   an der Elementor-Huelle und war wirkungslos. Nachgemessen lief
   der Satz dadurch auf 1127px in EINER Zeile mit 122 Zeichen. */


/* --- 06.1 Nutzen als redaktionelle Mini-Karten ------------ */

/* Vorher eine Icon-Liste mit vier Haken. Vier gleich aussehende
   Zeilen tragen keine Aussage; jetzt vier kleine Karten mit
   eigener Ueberschrift, die man einzeln lesen kann. */
.kh-home-booking .kh-home-booking__benefits { margin-top: var(--kh-space-lg); }

/* DESIGN-LIVE-2: aus vier gestapelten Mini-Karten mit linker Kante
   wird eine Belegzeile UNTER dem Werkzeug. Sie sind kein Argument
   mehr, das zur Handlung hinfuehrt — die Handlung steht schon
   darueber —, sondern das, was man danach noch wissen will. */
.kh-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-md) var(--kh-space-xl);
}

.kh-benefits__item {
  display: grid;
  gap: 3px;
  padding: 0;
  border: 0;
}

.kh-benefits__title {
  display: flex;
  align-items: baseline;
  gap: var(--kh-space-xs);
}

/* Ein kleiner roter Punkt statt vier Kanten — dieselbe Sprache wie
   die Belege in Leistungen und Locator. */
.kh-benefits__title::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--kh-radius-circle);
  background-color: var(--kh-color-primary-500);
  translate: 0 -1px;
}

/* ZWEI SPALTEN IM ZWISCHENRAUM (DESIGN-LIVE-3).
   Vier Spalten ab 48em hiessen bei 768px genau 147,6px pro Spalte.
   Nachgemessen brach dort jede der vier Begruendungen auf fuenf
   Zeilen und die Zeile wurde 145px hoch — lesbar, aber gedraengt,
   und der einzige Ort der Seite, an dem Text in eine Spalte
   gezwungen wird statt in ihr zu stehen.

   Statt kleinerer Schrift oder schmalerer Spalten bekommt der
   Zwischenraum eine eigene, strukturell saubere Stufe: zwei mal
   zwei. Bei 768px sind das rund 328px pro Spalte. Vier Spalten
   kommen erst ab 64em zurueck, wo sie rund 260px bekommen. */
@media (min-width: 48em) {
  .kh-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .kh-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kh-benefits__title {
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-tight);
  color: var(--kh-color-ink-900);
}

.kh-benefits__text {
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
}


/* --- 06.2 Die Buchungskarte -------------------------------- */

/* Kein Polster am Gehaeuse: der dunkle Kopf soll bis an die
   Kanten laufen. Die Abstaende sitzen in den Teilen. */
.kh-home-booking .kh-home-booking__shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
  min-inline-size: 0;
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  /* xl waren 24px und damit ueber dem Radiussystem aus 9A
     (grosse Flaechen 8–12px). */
  border-radius: var(--kh-radius-lg);
  box-shadow: var(--kh-elev-2);
  overflow: hidden;
  isolation: isolate;
}

/* ENTFALLEN mit DESIGN-LIVE-2: der dunkle Kartenkopf samt
   Ringmotiv und die Ueberschrift „Online-Terminbuchung". Sie stand
   neben der Abschnitts-H2 „Wunschtermin in Ihrem Shop" und sagte
   dasselbe noch einmal — ein zweiter Titel fuer eine Handlung.
   Das Widget selbst ist unberuehrt geblieben.

   Die drei Regelbloecke dafuer (Kopfflaeche, ::after-Ringe,
   .elementor-heading-title) sind hier geloescht; im Markup gibt es
   .kh-home-booking__shell-title nicht mehr. */

/* ENTFALLEN mit DESIGN-LIVE-3: .kh-home-booking__shell-text hat im
   Markup null Elemente. Der Erklaersatz war eine Dublette der
   Widget-eigenen Frage und ist mit DESIGN-LIVE-2 aus den
   Elementor-Daten entfernt worden (Widget ea369689); die
   Formatierung dafuer blieb liegen. */

.kh-home-booking .kh-home-booking__widget { padding: var(--kh-space-lg); }


/* --- 06.3 Standortwahl und Buehne -------------------------- */

/* Die Klassen kh-booking__* liefert [kh_booking]; geschaltet wird
   sie von main.js 13. Keine Farbe und keine Groesse hier ist an
   convi Booking gebunden — das Widget steht in einer eigenen
   Flaeche darunter und bringt sein eigenes Aussehen mit. */

/* minmax(0, 1fr) statt der impliziten auto-Spur: sonst bestimmt
   die Mindestbreite des Buchungswidgets die Spaltenbreite und
   zieht die ganze Karte auseinander (siehe 06.5). */
.kh-booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kh-space-md);
}

/* GEMESSEN UND KORRIGIERT · [hidden] GEGEN display
   Alle vierzehn Flaechen stehen im Markup und tragen hidden.
   Trotzdem waren sie alle sichtbar: die Section war 3322px hoch
   statt rund 700px. Der Grund ist die Reihenfolge der Herkunft —
   [hidden]{display:none} ist eine Regel des BROWSERS, und jede
   Autorenregel mit derselben Spezifitaet (0,1,0) schlaegt sie.
   .kh-booking__panel--kontakt{display:grid} hat das Verbergen
   also aufgehoben.

   Statt jede display-Angabe einzeln zu verzieren oder zu
   !important zu greifen, steht die Aussage hier einmal mit
   (0,2,0) — und ausdruecklich nur fuer die eigenen Teile, damit
   sie nichts im Widget von convi Booking anfasst. */
.kh-booking > [hidden],
.kh-booking__stage > [hidden],
.kh-booking__list [hidden] { display: none; }

/* Schrittanzeige.
   Zwei Schritte, waagerecht, mit einer Linie dazwischen. Der
   erledigte Schritt bleibt lesbar und wird nicht ausgegraut —
   man soll sehen, was man gewaehlt hat. */
.kh-booking__steps {
  display: flex;
  align-items: center;
  gap: var(--kh-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-booking__step {
  display: flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  min-inline-size: 0;
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-400);
}

/* Die Linie zwischen den Schritten. Sie gehoert zum zweiten
   Schritt, damit sie nie allein steht. */
.kh-booking__step + .kh-booking__step::before {
  content: "";
  inline-size: clamp(16px, 4vw, 40px);
  block-size: 1px;
  margin-inline-end: var(--kh-space-2xs);
  background-color: var(--kh-color-line-300);
}

.kh-booking__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-ink-500);
  background-color: var(--kh-color-surface-100);
  border-radius: 50%;
}

.kh-booking__step-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kh-booking__step.is-active { color: var(--kh-color-ink-900); }

.kh-booking__step.is-active .kh-booking__step-num {
  color: var(--kh-color-ink-inverse);
  background-color: var(--kh-color-primary-500);
}

.kh-booking__step.is-done { color: var(--kh-color-ink-700); }

.kh-booking__step.is-done .kh-booking__step-num {
  color: var(--kh-color-ink-inverse);
  background-color: var(--kh-color-ink-900);
}


/* Schritt 1 · Auswahl ------------------------------------- */

.kh-booking__pick { display: grid; gap: var(--kh-space-xs); }

.kh-booking__label {
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-tight);
  color: var(--kh-color-ink-900);
}

.kh-booking__search-wrap { position: relative; display: block; }

.kh-booking__search-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--kh-space-sm);
  translate: 0 -50%;
  color: var(--kh-color-ink-400);
  pointer-events: none;
}

/* 16px Schriftgroesse ist Absicht: darunter zoomt iOS Safari
   beim Fokussieren in das Feld hinein. */
.kh-booking__search {
  inline-size: 100%;
  min-block-size: var(--kh-field-height);
  padding-block: 0;
  padding-inline: calc(var(--kh-space-sm) * 2 + 18px) var(--kh-space-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--kh-color-ink-900);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  appearance: none;
}

.kh-booking__search::placeholder { color: var(--kh-color-ink-400); }

.kh-booking__search:focus-visible {
  outline: none;
  border-color: var(--kh-color-ink-900);
  box-shadow: var(--kh-shadow-focus);
}

/* Vierzehn Shops sind zu viele fuer eine offene Liste. Die
   Liste rollt; die Hoehe ist so gewaehlt, dass immer mehr als
   ein Eintrag angeschnitten sichtbar ist — sonst wirkt sie
   zuende, obwohl sie weitergeht. */
.kh-booking__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-block-size: 19rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-sm);
}

.kh-booking__item + .kh-booking__item .kh-booking__option {
  border-top: 1px solid var(--kh-color-line-200);
}

.kh-booking__option {
  display: grid;
  gap: 1px;
  min-block-size: var(--kh-tap-min);
  padding: var(--kh-space-xs) var(--kh-space-sm);
  color: var(--kh-color-ink-900);
  text-decoration: none;
  transition: background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-booking__option:hover { background-color: var(--kh-color-surface-050); }

.kh-booking__option:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
  border-radius: var(--kh-radius-sm);
}

.kh-booking__option-head {
  display: flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  flex-wrap: wrap;
}

.kh-booking__option-ort {
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
}

/* Nur ein Shop ist derzeit online buchbar. Das steht hier
   vorher und nicht erst nach dem Klick. */
.kh-booking__option-badge {
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-wide);
  text-transform: uppercase;
  color: var(--kh-color-primary-text);
  background-color: rgba(230, 0, 0, .08);
  border-radius: 999px;
  padding-block: 2px;
  padding-inline: var(--kh-space-2xs);
}

.kh-booking__option-name,
.kh-booking__option-adresse {
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-snug);
  color: var(--kh-color-ink-500);
}

.kh-booking__none {
  margin: 0;
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-700);
}


/* Schritt 2 · gewaehlter Shop ------------------------------ */

.kh-booking__chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-space-sm);
  flex-wrap: wrap;
  padding: var(--kh-space-sm) var(--kh-space-md);
  background-color: var(--kh-color-surface-050);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-sm);
}

.kh-booking__chosen-body { min-inline-size: 0; }

.kh-booking__chosen-label {
  margin: 0;
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-wide);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
}

.kh-booking__chosen-name {
  margin: 0;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  color: var(--kh-color-ink-900);
}

.kh-booking__chosen-addr {
  margin: 0;
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

.kh-booking__change {
  flex: none;
  min-block-size: var(--kh-tap-min);
  padding-inline: var(--kh-space-xs);
  font-family: inherit;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-primary-text);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kh-booking__change:hover { color: var(--kh-color-primary-700); }

.kh-booking__change:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-sm);
  box-shadow: var(--kh-shadow-focus);
}

/* Die Buehne traegt tabindex="-1", damit der Fokus nach der
   Auswahl hierher wandern kann. Ein Fokusrahmen darf dabei
   nicht erscheinen: die Bewegung ist eine Ansage, kein
   Bedienschritt. */
.kh-booking__stage:focus { outline: none; }

.kh-booking__stage:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-sm);
  box-shadow: var(--kh-shadow-focus);
}


/* Kontaktweg statt Online-Buchung ------------------------- */

.kh-booking__panel--kontakt { display: grid; gap: var(--kh-space-sm); }

.kh-booking__note {
  margin: 0;
  max-width: 48ch;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
}

.kh-booking__call {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-sm);
  justify-self: start;
  min-block-size: var(--kh-control-height-lg);
  padding-inline: var(--kh-space-md);
  color: var(--kh-color-ink-inverse);
  background-color: var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
  text-decoration: none;
  transition: background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-booking__call:hover { background-color: var(--kh-color-primary-600); }

.kh-booking__call:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-booking__call-text { display: grid; gap: 0; }

.kh-booking__call-label {
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-wide);
  text-transform: uppercase;
  opacity: .82;
}

.kh-booking__call-number {
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kh-booking__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-xs) var(--kh-space-md);
}

.kh-booking__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kh-tap-min);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-primary-text);
}

.kh-booking__link:hover { color: var(--kh-color-primary-700); }


/* --- 06.4 convi Booking im Theme-Gewand -------------------- */

/* NUR DER DOKUMENTIERTE VERTRAG
   convi Booking legt in frontend.css eine oeffentliche
   Token-Ebene --cnv-booking-* an, ausdruecklich damit ein Theme
   sie belegen kann. Genau das passiert hier — keine einzige
   interne Regel des Plugins wird ueberschrieben.

   WARUM AM WIDGET SELBST UND NICHT AM ELTERNELEMENT
   Das Plugin deklariert die Token auf .cbk-widget. Eine
   Deklaration am Element schlaegt jeden geerbten Wert, ganz
   gleich wie spezifisch der Vorfahre ist. Die Regel steht
   deshalb ebenfalls am Widget — mit (0,3,0) gegen (0,1,0). */
.kh-home-booking .kh-booking .cbk-widget {
  --cnv-booking-color-primary: var(--kh-color-primary-500);
  --cnv-booking-color-on-primary: var(--kh-color-ink-inverse);
  --cnv-booking-color-text: var(--kh-color-ink-900);
  --cnv-booking-color-border: var(--kh-color-line-200);
  --cnv-booking-color-surface: var(--kh-color-surface-000);
  --cnv-booking-radius-sm: var(--kh-radius-sm);
  --cnv-booking-radius-md: var(--kh-radius-sm);
  --cnv-booking-radius-lg: var(--kh-radius-md);
  --cnv-booking-control-height: var(--kh-control-height);
  --cnv-booking-touch-min: var(--kh-tap-min);

  /* Rahmen, Schatten und Radius traegt bereits die Karte
     darum herum. Zwei Rahmen ineinander sehen nach Fehler aus. */
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- 06.5 Schmale Fenster: die Karte tritt heraus ----------

   GEMESSEN BEI 320px
   Elementor-Section 10px, kh-container 16px, Karte 1px Rahmen —
   fuer den Inhalt der Karte blieben 266px. Das Buchungswidget
   braucht rund 286px, bevor sein Kalender bricht. Die Folge war
   sichtbar: die Karte wurde aus dem Container gedrueckt und
   rechts abgeschnitten, samt Ueberschrift und Schrittanzeige.

   ERSTER ANSATZ, VERWORFEN
   Nur die Mindestbreite des Plugins auf 0 zu setzen half nicht:
   darunter liegt die tatsaechliche Mindestbreite des Kalenders
   selbst, und die laesst sich nicht wegdeklarieren.

   WAS JETZT PASSIERT
   Unter 30em tritt die Karte aus der Textspalte heraus und
   ruecht naeher an den Bildschirmrand — ein gaengiges Muster auf
   dem Telefon und hier das einzige, das dem Kalender ehrlich
   Platz verschafft. Nachgerechnet bei 320px: Container 268,
   Karte 292, Inhalt 290, Kalenderflaeche 290. Passt.
   Der Rest der Section behaelt seine Kante. */
@media (max-width: 29.99em) {

  /* inline-size: auto ist hier entscheidend. Mit width:100% haetten
     die negativen Aussenabstaende die Karte nur verschoben, nicht
     verbreitert — nachgemessen stand sie dann 12px zu weit links
     und war rechts trotzdem zu schmal. */
  .kh-home-booking .kh-home-booking__shell {
    inline-size: auto;
    margin-inline: calc(-1 * var(--kh-space-sm));
    border-radius: var(--kh-radius-lg);
  }

  .kh-home-booking .kh-home-booking__widget { padding-inline: var(--kh-space-sm); }

  .kh-booking__panel--kalender { margin-inline: calc(-1 * var(--kh-space-sm)); }
}

/* BEWEGUNG: KEINE — und zwar absichtlich.
   Die Buchung ist der einzige Abschnitt der Startseite, in dem
   jemand etwas tut statt liest. Ein Einblenden beim Scrollen wuerde
   ein Bedienelement verzoegern, und ein transform auf der Schale
   erzeugt einen Containing Block, in dem die Auswahlfelder des
   Buchungs-Widgets neu positioniert wuerden. Diese Sektion steht
   deshalb bewusst ohne kh-reveal-Klasse in der PILOT-Liste in
   main.js; das ist kein vergessener Eintrag. */


/* ==========================================================
   07. UNTERNEHMEN
   Kurze Markengeschichte. Seitenspalte mit harten Fakten,
   bewusst ohne Foto — die Startseite zeigt nur ein Motiv.
   ========================================================== */

.kh-home-company .kh-home-company__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-xl);
  width: 100%;
  align-items: start;
}

.kh-home-company .kh-home-company__content { max-width: 42rem; }

/* Kein Lesemass: es sass an der Elementor-Huelle und war
   wirkungslos (Abschnitt 00). Die Breite kommt aus der Textspalte
   des Rasters — gemessen 447px, rund 55 Zeichen. */
.kh-home-company__story { color: var(--kh-color-ink-700); }

/* DESIGN-LIVE-2 · DIE STIMME FUEHRT, NICHT DER FIRMENNAME.
   ---------------------------------------------------------
   Vorher trug „Kahraman GmbH" als groesste Zeile den Abschnitt und
   das Zitat stand kleiner darunter, markiert mit einer roten
   Senkrechtkante. Ein Firmenname beantwortet aber nicht, wer man
   ist — der Satz daneben tut es.

   Jetzt ist das Zitat die Aussage und der Name die Zeile darueber.
   Die rote Kante entfaellt: 9A hat den senkrechten roten Strich als
   allgemeines Kennzeichen abgeschafft, und hier traegt die Groesse
   ohnehin mehr als eine Linie. Die H2 bleibt semantisch die H2. */
.kh-home-company__quote {
  margin: 0;
  padding-left: 0;
  font-size: var(--kh-text-h1);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.16;
  letter-spacing: var(--kh-tracking-tight);
  color: var(--kh-color-ink-900);
  border-left: 0;
}

/* Der Firmenname wird zur ruhigen Zeile ueber der Aussage. */
.kh-home-company .kh-h2 {
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-semibold);
  letter-spacing: var(--kh-tracking-normal);
  color: var(--kh-color-ink-500);
}

/* --- 07.1 Bild und Fakten --------------------------------- */

/* WAS VORHER DA STAND
   Rechts lagen Bild und Fakten untereinander in einer Spalte, die
   Fakten als drei gleich hohe Haarlinienzeilen. Drei identische
   Zeilen sind eine Aufzaehlung, keine Aussage — und das Bild war
   nur so breit wie die Liste darunter.

   JETZT
   Das Bild traegt die Section. Die Fakten liegen als kleine
   Kartengruppe davor, ueber die untere Bildkante geschoben und
   um ein Stueck nach links versetzt. Die Zahl 14 steht gross,
   weil sie die einzige Zahl ist, die man sich merken soll. */

.kh-home-company .kh-home-company__visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}

/* UNTEN KEINE UEBERLAPPUNG (DESIGN-LIVE-3).
   Die Ueberlappung ist eine Komposition fuer zwei Spalten: die
   Karte greift aus der Bildspalte in den Zwischenraum. Einspaltig
   gibt es keinen Zwischenraum, in den sie greifen koennte.

   Nachgemessen bei 768px: Bild 687px breit, Karte 661px, 25px
   eingerueckt, 61px Ueberlappung, kein Schlagschatten. Die Karte
   lag damit nicht AUF dem Bild, sondern sah aus, als sei sie
   verrutscht — und ihre rechte Kante stand ueber der des Bildes.
   Bei 390px dasselbe mit 29px.

   Einspaltig steht die Karte deshalb buendig unter dem Bild. Das
   ist die saubere Komposition fuer diese Breite und nicht die
   verkleinerte Fassung der anderen. Die Ueberlappung kommt ab
   1024px zurueck, wo es wieder zwei Spalten gibt. */
.kh-home-company .kh-home-company__facts {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

/* Die Fugen zwischen den Karten sind keine Abstaende, sondern
   Haarlinien: ein 1px-Raster auf der Linienfarbe, durch das die
   weissen Karten hindurchscheinen. */
.kh-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--kh-color-line-200);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  box-shadow: var(--kh-shadow-lg);
  overflow: hidden;
}

/* Mittig statt oben: die Karte mit der grossen Zahl ist deutlich
   hoeher als die daneben. Oben ausgerichtet haette „Vertriebs-
   partner von / Vodafone" mit einem Loch darunter gestanden. */
.kh-facts__card {
  display: grid;
  gap: var(--kh-space-3xs);
  align-content: center;
  padding: var(--kh-space-md);
  background-color: var(--kh-color-surface-000);
}

.kh-facts__card--wide { grid-column: 1 / -1; }

.kh-facts__label {
  margin: 0;
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-wide);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
}

.kh-facts__value {
  margin: 0;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-tight);
  color: var(--kh-color-ink-900);
}

/* Die einzige grosse Zahl der Section. Tabellenziffern, damit sie
   auf der Grundlinie sitzt und nicht wie ein Zitat schwebt. */
.kh-facts__figure {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-primary-text);
}

.kh-facts__note {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-snug);
  color: var(--kh-color-ink-700);
}


/* ==========================================================
   08. KARRIERE
   Die Sektion wird vollstaendig in DESIGN-LIVE-2 gesetzt
   (Abschnitt „KARRIERE · DESIGN-LIVE-2" am Dateiende).
   ========================================================== */

/* Hier stand das Band aus DESIGN-9B: Raster, zwei Haarlinien, rote
   linke Kante, Innenabstand. Jede dieser Zeilen wurde weiter unten
   wieder zurueckgenommen — ein Satz Regeln, der nur existierte, um
   ueberschrieben zu werden. Er ist entfernt statt stillgelegt.

   .kh-home-careers__content ist mit DESIGN-LIVE-2 aus den
   Elementor-Daten verschwunden: die Ueberschrift haengt jetzt direkt
   im Band, Begruendung und Handlung stehen zusammen in
   .kh-home-careers__note. Die Regeln auf __content waren damit
   nachweislich wirkungslos. */


/* ==========================================================
   DESIGN-8C · LEISTUNGEN ALS PRODUKTWAHL
   ==========================================================

   WAS HIER ERSETZT WIRD
   Die Sektion stand als zweispaltiger Satz: links eine blasse
   Riesenziffer, die Marke "Schwerpunkt", Titel, Absatz und zwei
   Belegzeilen — rechts sieben Zeilen mit Symbol und Trennlinie. Das
   las sich wie ein Agenturbericht neben einer Einstellungsliste. Die
   Mitte blieb leer, der aktive Zustand hing an einem roten Strich,
   und die Handlung stand abgetrennt daneben.

   WAS JETZT STEHT
   Ein Band aus sieben Kategorien, darunter EINE grosse Buehne. Das
   Band sitzt auf der Seitenflaeche, die Buehne ist weiss und liegt
   darueber — die gewaehlte Kategorie verbindet sich optisch mit ihr.
   Damit traegt der aktive Zustand vier Signale statt einem: Flaeche,
   Farbe, Gewicht und eine rote Oberkante.

   Das Markup bleibt unveraendert. Es ist bereits eine saubere
   ARIA-Tableiste; geaendert wird ausschliesslich die Darstellung.

   EINE AUSNAHME, und zwar zur Laufzeit statt im Markup: die Leiste
   stand untereinander und war als aria-orientation="vertical"
   ausgezeichnet. Waagerecht waere diese Angabe falsch und die
   Tastatur liefe weiter ueber Auf/Ab. Richtiggestellt wird das in
   main.js (leistungsleisteWaagerecht), weil beide Angaben in den
   Elementor-Daten der Produktion stehen und die unberuehrt bleiben. */

.kh-home-services .kh-svc {
  /* Dauer des Wechsels: kurz genug, dass die Auswahl nicht wartet. */
  --kh-svc-wechsel: 240ms;
  --kh-svc-radius: var(--kh-radius-lg);
  /* Eintritt ruhiger als der Systemwert von 520ms: dieser Abschnitt
     steht weit oben, dort darf nichts nachlaufen. */
  --kh-motion-slow: 440ms;

  display: grid;
  /* Die alte Fassung stellte hier ab 1024px zwei Spalten
     (1.45fr / 1fr). Das Band und die Buehne stehen uebereinander,
     also eine Spalte — sonst landet die Buehne neben der Leiste. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
}

/* --- Kategorieband ---------------------------------------- */

.kh-home-services .kh-svc__nav {
  /* 50-70ms sind hier die Obergrenze; der Systemwert von 90ms laesst
     sieben Felder nacheinander eintrudeln. */
  --kh-motion-stagger: 60ms;

  /* Die alte Fassung stellte die Leiste ab 1024px in eine zweite
     Spalte. Ohne dieses Zuruecksetzen erzeugt grid-column:2 eine
     implizite Spalte, die die gesamte Breite nimmt — und die Buehne
     bleibt 0px breit. */
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background-color: transparent;
}

.kh-home-services .kh-svc__tab {
  position: relative;
  /* Ueber der Buehne, damit die Blende unten deren Rahmen verdecken
     kann (siehe is-open::after). */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  min-block-size: 80px;
  inline-size: auto;
  margin: 0;
  padding: var(--kh-space-md) clamp(8px, .7vw, 14px) var(--kh-space-sm);
  border: 0;
  /* Die Oberkante traegt den aktiven Zustand. Sie ist immer da und
     nur im Ruhezustand durchsichtig — so springt beim Wechsel keine
     Zeile um. */
  border-top: 3px solid transparent;
  /* md statt lg: bei 16px bog die rote Oberkante so weit weg, dass
     der Reiter wie ein Karteireiter aussah. 10px bleibt praeziser. */
  border-radius: var(--kh-radius-md) var(--kh-radius-md) 0 0;
  background-color: transparent;
  text-align: start;
  cursor: pointer;
  transition:
      background-color var(--kh-motion-fast) var(--kh-ease-standard),
      border-color     var(--kh-motion-fast) var(--kh-ease-standard);
}

/* Der rote Senkrechtstrich entfaellt. Er war das einzige Zeichen fuer
   den aktiven Zustand und gleichzeitig das, was die Leiste wie eine
   Einstellungsliste aussehen liess. */
.kh-home-services .kh-svc__tab::before { content: none; }

/* Das Verrutschen um 3px beim Darueberfahren war hier
   zurueckgenommen — in einem Band aus sieben Feldern wackelt davon
   die ganze Reihe. Mit DESIGN-LIVE-3 ist die Ursache selbst
   entfernt (Abschnitt 03), die Ruecknahme damit entbehrlich. */

/* Die Kurzzeile der Leiste wiederholt, was die Buehne ausfuehrlich
   sagt. In einer 135px breiten Spalte bricht sie auf vier Zeilen und
   macht aus der Auswahl wieder eine Liste. Sie bleibt im Quelltext
   und damit fuer Suchmaschinen lesbar, wird aber nicht gezeigt. */
.kh-home-services .kh-svc__tab-text { display: none; }

.kh-home-services .kh-svc__tab-title {
  display: block;
  /* Sieben Spalten sind bei 1440px rund 160px, bei 1024px rund 135px
     breit. "Handyversicherung" ist das laengste Wort und bestimmt die
     Obergrenze: bei 14px passt es in eine Zeile, bei 15px nicht mehr —
     und eine getrennte Zeile in einer Leiste sieht nach Notloesung
     aus. Bei 1024px braucht dasselbe Wort rund 12,4px, damit es in
     117px Spaltenbreite ungetrennt bleibt. hyphens steht trotzdem
     als Netz fuer alles dazwischen. */
  font-size: clamp(.78125rem, .42rem + .55vw, .875rem);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  hyphens: auto;
  overflow-wrap: break-word;
  white-space: normal;
  color: var(--kh-color-ink-500);
  transition: color var(--kh-motion-fast) var(--kh-ease-standard);
}

.kh-home-services .kh-svc__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  /* ink-400 war im Test kaum zu sehen: das Zeichen verschwand neben
     der Beschriftung, statt sie zu stuetzen. */
  color: var(--kh-color-ink-500);
  transition:
      color     var(--kh-motion-fast) var(--kh-ease-standard),
      transform var(--kh-motion-fast) var(--kh-ease-standard);
}

.kh-home-services .kh-svc__svg {
  inline-size: 22px;
  block-size: 22px;
  fill: currentColor;
}

.kh-home-services .kh-svc__tab:hover { background-color: rgba(255, 255, 255, .6); }

.kh-home-services .kh-svc__tab:hover .kh-svc__tab-title { color: var(--kh-color-ink-900); }
.kh-home-services .kh-svc__tab:hover .kh-svc__svg       { color: var(--kh-color-ink-700); }
/* DESIGN-LIVE-3: -2px wurden --kh-hover-lift (-1px) — dasselbe
   Anheben wie an jeder anderen interaktiven Flaeche der Seite. */
.kh-home-services .kh-svc__tab:hover .kh-svc__tab-icon  { transform: translateY(var(--kh-hover-lift)); }

/* Der gewaehlte Reiter traegt dieselbe Flaeche wie die Buehne und geht
   ohne Kante in sie ueber. Vier Signale gleichzeitig: Flaeche,
   Oberkante, Schriftgewicht, Iconfarbe.

   Beide Haken, weil main.js die Klasse is-open setzt und das Markup
   zusaetzlich aria-selected fuehrt. Welcher davon zuerst da ist, darf
   fuer die Darstellung keine Rolle spielen. */
.kh-home-services .kh-svc__tab.is-open,
.kh-home-services .kh-svc__tab[aria-selected="true"] {
  background-color: var(--kh-color-surface-000);
  border-top-color: var(--kh-color-primary-500);
  color: var(--kh-color-ink-900);
  translate: none;
}

.kh-home-services .kh-svc__tab.is-open .kh-svc__tab-title,
.kh-home-services .kh-svc__tab[aria-selected="true"] .kh-svc__tab-title {
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-ink-900);
}

.kh-home-services .kh-svc__tab.is-open .kh-svc__tab-icon,
.kh-home-services .kh-svc__tab[aria-selected="true"] .kh-svc__tab-icon {
  color: var(--kh-color-primary-500);
}

/* Die Buehne hat einen durchgehenden Rahmen. Unter dem gewaehlten
   Reiter verdeckt eine 1px-Blende dessen Oberkante, damit Reiter und
   Buehne wirklich eine Flaeche sind und keine Naht dazwischen steht.
   Reine Deko, kein Inhalt. */
.kh-home-services .kh-svc__tab.is-open::after,
.kh-home-services .kh-svc__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 1px;
  background-color: var(--kh-color-surface-000);
}

/* --- Buehne ----------------------------------------------- */

.kh-home-services .kh-svc__stage {
  /* Siehe .kh-svc__nav: die alte Platzierung (Spalte 1, zwei Zeilen
     hoch) muss weg, sonst steht die Buehne neben der Leiste. */
  grid-column: 1;
  grid-row: 2;
  position: relative;
  display: grid;
  padding: clamp(32px, 2.6vw + 16px, 56px);
  /* Unten bleibt Platz fuer den Weg, der in dieser Zelle sitzt. Die
     Hoehe ist nicht geschaetzt, sondern abgezaehlt: Schaltflaeche
     (44px) + ihr Aussenabstand + 32px Luft zum Absatz darueber. Mit
     einem reinen clamp standen bei 768px nur 12px dazwischen. */
  padding-block-end:
      calc(var(--kh-control-height) + clamp(16px, 1.2vw + 6px, 24px) + var(--kh-space-xl));
  border: 1px solid var(--kh-color-line-200);
  border-radius: 0 var(--kh-svc-radius) var(--kh-svc-radius) var(--kh-svc-radius);
  background-color: var(--kh-color-surface-000);
  /* Zurueckhaltend: eine Haarlinie nah an der Kante, ein weiter, sehr
     weicher Schatten darunter. Kein Glas, kein Leuchten. */
  box-shadow:
      0 1px 2px rgba(26, 26, 26, .04),
      0 18px 40px -24px rgba(26, 26, 26, .22);
}

/* Die senkrechte rote Kante der alten Fassung entfaellt — die Buehne
   ist jetzt selbst die Flaeche, eine Kante darin waere ein zweites
   Gehaeuse. */
.kh-home-services .kh-svc__panel {
  padding-left: 0;
  border-left: 0;
  max-inline-size: none;
}

/* DAS HIDDEN-ATTRIBUT BLEIBT MASSGEBLICH.
   Die Leiste schaltet die Panels ausschliesslich ueber [hidden], und
   das wirkt nur durch die Browserregel [hidden]{display:none}. Ein
   display auf .kh-svc__panel selbst haette sie ausgehebelt — gemessen
   standen dann alle sieben Panels untereinander und die Buehne war
   1081px statt 357px hoch. Deshalb steht display hier und nur hier. */
.kh-home-services .kh-svc__panel:not([hidden]) {
  display: grid;
  gap: var(--kh-space-md);
  animation: kh-svc-auftritt var(--kh-svc-wechsel) var(--kh-ease-standard) both;
}

@keyframes kh-svc-auftritt {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Marke „Schwerpunkt" (7 Absaetze) und Riesenziffer (7 Absaetze) sind
   seit DESIGN-LIVE-1 bzw. 1.1 aus den Elementor-Daten entfernt. Beide
   Ausblendregeln hatten danach nichts mehr zu verbergen und sind
   entfallen.

   NICHT entfernt wurde .kh-svc__tab-text: die sieben Kurzzeilen sind
   eigener, einmaliger Fliesstext („Tarife vergleichen und Karte
   einrichten." und so fort). Das ist SEO-Inhalt, kein Layoutrest —
   er bleibt im Quelltext und wird weiterhin nur optisch
   zurueckgenommen, weil die Buehne dieselbe Aussage ausfuehrlich
   traegt. */

.kh-home-services .kh-svc__title {
  margin: 0;
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: -.015em;
  color: var(--kh-color-ink-900);
}

.kh-home-services .kh-svc__text {
  margin: 0;
  max-inline-size: 56ch;
  font-size: var(--kh-text-lead);
  line-height: 1.6;
  color: var(--kh-color-ink-700);
}

/* Zwei Belege, keine Aufzaehlung: roter Punkt, halbfett, knapp. */
.kh-home-services .kh-svc__feat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-xs) var(--kh-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-home-services .kh-svc__feat li {
  display: flex;
  align-items: flex-start;
  gap: var(--kh-space-sm);
  margin: 0;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.45;
  color: var(--kh-color-ink-900);
}

.kh-home-services .kh-svc__feat li::before {
  content: "";
  flex: none;
  /* Ausgerichtet auf die erste Zeile statt auf die Mitte des Blocks:
     bei zweizeiligen Belegen saesse der Punkt sonst dazwischen. */
  margin-block-start: .42em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--kh-radius-circle);
  background-color: var(--kh-color-primary-500);
}

/* ENTFALLEN mit DESIGN-LIVE-3.1 · DIE BELEGE ZOGEN NACH RECHTS
   ---------------------------------------------------------
   Hier stand ein Zweispalter: Titel und Absatz links, die beiden
   Belege in einer eigenen rechten Spalte, die bei 1440px bei
   x=940 begann. Gemessen war der Absatz 623px breit in einer
   718px-Spalte — zwischen Beschreibung und Belegen lagen damit
   rund 110px Luft, und die beiden Zeilen sahen aus wie eine
   abgehaengte rechte Spalte statt wie Belege zur Beschreibung.

   Jetzt stehen sie direkt unter dem Absatz, waagerecht, als
   kurze Belegzeile — und die frei gewordene rechte Haelfte
   bekommt, was von Anfang an dort hingehoerte: den Bildplatz. */

/* ==========================================================
   DESIGN-LIVE-3.1 · LEISTUNGSNAVIGATOR
   ==========================================================

   DREI BEFUNDE, NACHGEMESSEN AM LEBENDEN DOKUMENT:

   1. Der gewaehlte Reiter sah aus wie ein Karteireiter.
      border-radius: 10px 10px 0 0, die rote Marke als border-top
      auf genau diesem gerundeten Kasten (die Linie bog also mit),
      dazu ein 160x1px weisser ::after, der die Naht zur Buehne
      zudeckte, und eine Buehne mit radius 0 16px 16px 16px. Das
      sind vier Mittel, die zusammen genau einen Eindruck
      erzeugen: Browser-Tab.

   2. Die Belege standen rechts abgehaengt (siehe oben).

   3. Die Buehne war 1136px breit fuer rund 620px Inhalt.

   DIE ANTWORT IST EINE SCHIENE, KEINE REITER:
   flache Leiste mit Haarlinie als Boden, gewaehltes Feld mit
   ruhiger neutraler Flaeche OHNE Radius, darunter eine gerade
   rote Marke von 3px, die auf der Haarlinie liegt. Zwischen
   Schiene und Buehne steht jetzt Abstand — sie sind zwei Dinge
   und tun nicht mehr so, als waeren sie eins. Die Buehne traegt
   rundum denselben Radius.
   ========================================================== */

/* Abstand zwischen Schiene und Buehne: der sichtbarste Teil des
   Karteireiter-Eindrucks war die Beruehrung. */
.kh-home-services .kh-svc { row-gap: var(--kh-space-md); }

/* Die Schiene bekommt einen Boden. Erst dadurch ist sie eine
   Navigationsleiste und nicht eine Reihe loser Kaesten. */
.kh-home-services .kh-svc__nav {
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-home-services .kh-svc__tab {
  border-radius: 0;
  /* Die Marke ist kein Rahmen mehr, sondern ein eigenes Element
     (unten). Der frei werdende Platz geht ins Polster, damit die
     Zeilen der Leiste nicht springen. */
  border-top: 0;
  padding-block: calc(var(--kh-space-md) + 3px) var(--kh-space-sm);
}

/* DIE GERADE MARKE.
   Ein eigenes Element statt border-top: ein Rahmen folgt immer
   der Rundung seines Kastens, ein absolut gesetzter Balken nicht.
   border-radius: 0, keine gerundeten Enden, keine Pille.
   scaleX statt Breite, damit nichts neu umbricht. */
.kh-home-services .kh-svc__tab::before {
  content: "";
  position: absolute;
  /* Physikalische Eigenschaften, weil die Grundregel der Leiste
     (Abschnitt 03, senkrechter Strich) genau diese setzt: left,
     top, bottom, width und scale. Logische Entsprechungen wuerden
     daneben stehen statt zu gewinnen. */
  left: 0;
  right: 0;
  top: auto;
  bottom: -1px;
  width: auto;
  height: 3px;
  border-radius: 0;
  background-color: var(--kh-color-primary-500);
  scale: 1 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--kh-motion-fast) var(--kh-ease-standard);
}

.kh-home-services .kh-svc__tab.is-open::before,
.kh-home-services .kh-svc__tab[aria-selected="true"]::before { transform: scaleX(1); }

/* Ruhige neutrale Flaeche statt weisser Karte. Weiss waere die
   Farbe der Buehne gewesen — genau die Gleichsetzung, die den
   Reiter mit der Buehne verschmelzen liess. */
.kh-home-services .kh-svc__tab:hover { background-color: var(--kh-color-surface-100); }

.kh-home-services .kh-svc__tab.is-open,
.kh-home-services .kh-svc__tab[aria-selected="true"] {
  background-color: var(--kh-color-surface-200);
  border-top-color: transparent;
}

/* Die 1px-Blende zur Buehne entfaellt: es gibt keine Naht mehr
   zuzudecken, weil es keine Beruehrung mehr gibt. */
.kh-home-services .kh-svc__tab.is-open::after,
.kh-home-services .kh-svc__tab[aria-selected="true"]::after { content: none; }

/* Rundum derselbe Radius. Die eckige obere linke Ecke war nur
   dazu da, den Anschluss an den Reiter zu bauen. */
.kh-home-services .kh-svc__stage { border-radius: var(--kh-svc-radius); }

/* ZEIGEGERAET HINTERLAESST KEINEN RING.
   Nach einem Mausklick behielt das Feld den Tastaturring, weil
   der Knopf den Fokus behaelt. :focus-visible unterscheidet
   genau das: Tastatur ja, Maus nein. Die Tastaturbedienung wird
   dadurch nicht schwaecher — sie bekommt denselben Ring wie
   ueberall auf der Seite. */
.kh-home-services .kh-svc__tab:focus { outline: none; box-shadow: none; }

.kh-home-services .kh-svc__tab:focus-visible {
  outline: none;
  border-radius: 0;
  box-shadow: var(--kh-shadow-focus);
  /* Der Ring liegt sonst halb unter dem Nachbarfeld. */
  z-index: 1;
}

/* --- Belegzeile statt rechter Spalte ---------------------- */

.kh-home-services .kh-svc__feat {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: clamp(20px, 2vw, 36px);
  row-gap: var(--kh-space-2xs);
  margin-block-start: var(--kh-space-2xs);
}

/* --- Bildplatz der Buehne --------------------------------- */

/* Die Buehne ist 1136px breit und traegt rund 620px Text. Die
   rechte Haelfte war der Leerraum, der die Flaeche unfertig
   aussehen liess. Dort steht jetzt der Bildplatz — eine
   Kategoriefotografie, die zum gewaehlten Bereich gehoert.

   :has() ist Absicht, nicht Mode: solange der Bildplatz im
   Markup fehlt, bleibt die Buehne einspaltig. Dadurch gibt es
   zwischen der Veroeffentlichung dieser Datei und der Ergaenzung
   des Markups keinen Zwischenzustand mit halb leerer Buehne. */
@media (min-width: 64em) {

  .kh-home-services .kh-svc__stage:has(.kh-svc__media) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    column-gap: clamp(32px, 3vw, 56px);
    align-items: start;
  }
}

.kh-home-services .kh-svc__media { aspect-ratio: 3 / 2; }

@media (max-width: 63.99em) {

  /* Einspaltig liegt der Bildplatz unter dem Text. Flacher als
     auf dem Schirm: ein 3:2-Feld ueber die volle Breite waere auf
     dem Telefon ein 260px hohes leeres Rechteck. */
  .kh-home-services .kh-svc__media {
    aspect-ratio: 16 / 9;
    margin-block-start: var(--kh-space-sm);
  }
}


/* --- Handlung --------------------------------------------- */

/* Der Weg liegt im Quelltext zwischen Leiste und Buehne. Statt ihn
   davorzuschieben, teilt er sich die Rasterzelle mit der Buehne und
   sitzt in deren unterer rechter Ecke — dafuer haelt die Buehne unten
   Polster frei. Kein absolut gesetzter Inhalt, nur zwei Kinder in
   derselben Zelle. */
.kh-home-services .kh-svc__more {
  grid-row: 2;
  grid-column: 1;
  z-index: 1;
  align-self: end;
  /* Links statt rechts: unter dem Absatz, den er fortsetzt. Rechts
     stand er unter den Belegen, zu denen er nichts sagt, und riss
     dort ein Loch in die Mitte der Flaeche. */
  justify-self: start;
  /* DESIGN-9A: Dieser Weg ist die Referenz fuer das globale
     Textlink-Primitiv. In 8C stand hier die Form der zweiten
     Schaltflaeche — 2px Kante, 24px Polster. Innerhalb der ohnehin
     schon abgesetzten weissen Buehne war das ein Gehaeuse im
     Gehaeuse; ein Textlink mit Pfeil traegt hier weiter und sieht
     weniger nach Baukasten aus.

     Aussehen und Bewegung kommen aus .kh-link--arrow in global.css
     (Abschnitt 26.5) — hier stehen nur Platzierung und Trefferflaeche.
     Die 44px bleiben: der Link steht allein, nicht im Satz, und
     braucht ein echtes Bedienziel. */
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kh-control-height);
  margin: 0 0 clamp(16px, 1.2vw + 6px, 24px) clamp(32px, 2.6vw + 16px, 56px);
  padding: 0;
  border: 0;
  background-color: transparent;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.2;
  color: var(--kh-color-primary-text);
  text-decoration: none;
}

/* --- Die leere Medienflaeche: ENTFALLEN ------------------- */

/* Sie mass 1136 x 284px, hatte Rahmen und Raster und wartete auf
   ein Foto, das es nicht gibt. Seit DESIGN-8C war sie nur
   ausgeblendet, weil die Produktionsdaten damals eingefroren waren.

   Mit DESIGN-LIVE-3 ist der Container selbst aus den
   Elementor-Daten entfernt (sv000001, null Kinder) — wie zuvor
   schon sein Zwilling in der Karriere (cr000001). Damit entfallen
   auch die beiden Darstellungsregeln weiter unten im
   Responsive-Teil.

   Kommt echte Fotografie, wird ein Bildwidget eingesetzt; eine
   leere Huelle braucht dafuer niemand im Voraus. */

/* --- Tablet ----------------------------------------------- */

/* 768 bis 1023: sieben Spalten waeren je 100px breit, das traegt kein
   Wort. Vier und drei statt sieben, und die Verbindung zur Buehne
   entfaellt — der gewaehlte Reiter kann in der oberen Zeile stehen
   und haette dort nichts, woran er anschliesst. Also eine abgesetzte
   Leiste aus Feldern und darunter die Buehne. */
@media (min-width: 48em) and (max-width: 63.99em) {

  .kh-home-services .kh-svc__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kh-space-2xs);
    padding-bottom: 0;
    overflow: visible;
  }

  /* DESIGN-LIVE-3.1: dieselbe Schiene wie auf dem Schirm. Radius 0,
     kein eigener Rahmen als Marke — die gerade rote Marke kommt aus
     dem ::before der Grundregel und gilt auf jeder Breite. */
  .kh-home-services .kh-svc__tab {
    min-block-size: 88px;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
  }

  .kh-home-services .kh-svc__tab.is-open,
  .kh-home-services .kh-svc__tab[aria-selected="true"] {
    box-shadow: none;
  }

  /* Ohne Anschluss an die Buehne braucht es auch keine Blende. */
  .kh-home-services .kh-svc__tab.is-open::after,
  .kh-home-services .kh-svc__tab[aria-selected="true"]::after { content: none; }

  .kh-home-services .kh-svc__stage {
    margin-block-start: var(--kh-space-md);
    border-radius: var(--kh-svc-radius);
  }
}

/* --- Mobil ------------------------------------------------- */

/* Sieben gestapelte Zeilen waeren hier wieder eine Liste. Stattdessen
   eine Leiste, die seitlich laeuft und einrastet; die Buehne steht
   direkt darunter, damit Auswahl und Inhalt zusammenbleiben.
   Der Streifen scrollt in sich — die Breite des Dokuments bleibt
   unberuehrt. */
@media (max-width: 47.99em) {

  .kh-home-services .kh-svc__nav {
    display: flex;
    gap: var(--kh-space-2xs);
    /* Der Streifen laeuft bis an den Rand des Containers, damit nicht
       der Eindruck entsteht, er sei zu Ende. */
    margin-inline: calc(var(--kh-space-md) * -1);
    padding-inline: var(--kh-space-md);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .kh-home-services .kh-svc__nav::-webkit-scrollbar { display: none; }

  /* DESIGN-LIVE-3.1 · KEINE PILLEN MEHR.
     Der Streifen laeuft weiterhin seitlich und rastet ein — das
     ist Verhalten und bleibt. Die FORM ist jetzt dieselbe wie auf
     jeder anderen Breite: flache Zellen, Radius 0, kein eigener
     Rahmen, gerade rote Marke unten. Eine Geometrie fuer die
     ganze Komponente statt drei. */
  .kh-home-services .kh-svc__tab {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--kh-space-xs);
    min-block-size: var(--kh-tap-min);
    padding: var(--kh-space-xs) var(--kh-space-md);
    border: 0;
    border-radius: 0;
    scroll-snap-align: start;
  }

  .kh-home-services .kh-svc__tab-title { white-space: nowrap; font-size: var(--kh-text-sm); }

  .kh-home-services .kh-svc__tab-icon { inline-size: 18px; block-size: 18px; }
  .kh-home-services .kh-svc__svg      { inline-size: 17px; block-size: 17px; }

  /* Dieselbe ruhige neutrale Flaeche wie auf dem Schirm. Die rote
     Kante als Zustandsmerkmal entfaellt — sie war das Gegenstueck
     zur Pille und ist durch die gerade Marke ersetzt. */
  .kh-home-services .kh-svc__tab.is-open,
  .kh-home-services .kh-svc__tab[aria-selected="true"] {
    background-color: var(--kh-color-surface-200);
    border-color: transparent;
    box-shadow: none;
  }

  .kh-home-services .kh-svc__tab.is-open::after,
  .kh-home-services .kh-svc__tab[aria-selected="true"]::after { content: none; }

  .kh-home-services .kh-svc__stage {
    margin-block-start: var(--kh-space-md);
    padding: var(--kh-space-lg);
    /* Gleiche Rechnung wie oben, nur mit dem mobilen Aussenabstand. */
    padding-block-end:
        calc(var(--kh-control-height) + var(--kh-space-lg) + var(--kh-space-md));
    border-radius: var(--kh-svc-radius);
  }

  .kh-home-services .kh-svc__more {
    justify-self: start;
    margin-inline: var(--kh-space-lg);
    margin-block-end: var(--kh-space-lg);
  }
}

/* --- Eintritt --------------------------------------------- */

/* Die sieben Reiter folgen gestaffelt. Die Staffelung endet nach der
   vierten Stufe (globale Regel) — danach wartet man nicht mehr.

   Die Leiste selbst blendet NICHT mit auf: kh-reveal braucht sie nur,
   damit der Observer sie ueberhaupt beobachtet. Blendeten Elternteil
   und Kinder zugleich, multiplizierten sich zwei Deckkraftverlaeufe
   und der Eintritt wirkte traege. */
.kh-home-services .kh-svc__nav.kh-reveal.is-armed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .kh-home-services .kh-svc__panel:not([hidden]) { animation: none; }
  .kh-home-services .kh-svc__tab:hover .kh-svc__tab-icon { transform: none; }
  .kh-home-services .kh-svc__more:hover::after { transform: none; }
}

/* WAAGERECHTER UEBERLAUF BEI GENAU 1024px · BEHOBEN AM 25.10.2026
   --------------------------------------------------------------
   GEMESSEN: document.scrollWidth 1062 bei viewport 1024 — 38px zu viel.
   Bei 1440, 768 und 390 war nichts zu sehen, deshalb fiel es lange
   nicht auf.

   NICHT die Ursache war das Ringmotiv des Seitenabschlusses: das
   beschneidet .kh-cta-panel > .kh-container mit overflow:hidden
   sauber, sein Kasten darf also ueber die Kante hinausragen, ohne das
   Dokument zu verbreitern.

   Die Ursache ist dieser Handlungsbereich. Elementor gibt jedem
   Container width:var(--width) mit --width:100% mit; dazu kommt ein
   margin-inline-start von 80px. Oberhalb und unterhalb von 1024 traegt
   das Band ein Raster und faengt das ab — bei genau 1024 steht es auf
   display:block, und 100% + 80px laufen aus dem Container heraus.

   Die Breite wird deshalb auf den Inhalt zurueckgenommen. Kein
   overflow-x auf html/body: das wuerde den Ueberlauf nur verstecken.
   Unter 48em bleibt der Knopf bewusst auf voller Breite — so ist
   kh-button-wrap--block-mobile gedacht. */
/* ERLEDIGT mit DESIGN-LIVE-2: der hier beschriebene Strukturfehler —
   vertauschte Rasterspalten, eine auf 14px gequetschte
   Handlungsspalte, ein Knopf, der sich nur zeichnet, weil er aus
   seinem Kasten laeuft — ist mit dem Umbau der Sektion behoben. Das
   Band hat keine Spalten mehr, und die Handlung ist kein Knopf mehr.

   Entfernt wurden ausserdem die Regeln fuer .kh-home-careers__list
   und .kh-home-careers__job. Sie waren ein Andockpunkt fuer eine
   Stellenliste, die diese Seite nicht ausliefert: im System steht
   genau eine veroeffentlichte Stelle. Vorrat-CSS fuer Markup, das es
   nicht gibt, bleibt nicht liegen — kommt die Liste, kommen die
   Regeln mit ihr. */


/* ==========================================================
   09. FAQ
   ========================================================== */

/* DER FRAGENBEREICH IST NICHT MEHR MITTIG
   -------------------------------------------------------------
   Vorher: zentrierte H2 ueber einer 760px schmalen Aufklappliste,
   links und rechts je rund 340px leer — der generischste Abschnitt
   der Seite. Jetzt ein Editorial-Split: Ueberschrift und Hinweis
   stehen links als Saeule, die Fragen laufen rechts ueber die
   groessere Haelfte. Der Container gibt dafuer seine schmale
   Begrenzung auf. */
@media (min-width: 62em) {

  .kh-home-faq > .kh-container {
    max-width: var(--kh-container-max);
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.38fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
    /* Die Klappliste rechts ueberspannt beide Zeilen und ist deutlich
       hoeher als die Ueberschrift. Ohne diese Angabe wuchs die zweite
       Zeile auf die Restdifferenz, und der Hinweis links rutschte
       nachgemessen 190px nach unten — in der Spalte stand ein Loch.
       Die zweite Zeile nimmt jetzt den Rest, der Hinweis bleibt oben. */
    grid-template-rows: auto 1fr;
  }

  .kh-home-faq .kh-section-header {
    grid-column: 1;
    grid-row: 1;
    margin-inline: 0;
    margin-bottom: 0;
    text-align: left;
    align-items: flex-start;
    position: relative;
    padding-top: var(--kh-space-md);
  }

  /* Rote Auftaktlinie statt eines weiteren Eyebrow-Wortes. */
  .kh-home-faq .kh-section-header::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 48px;
    block-size: 3px;
    background-color: var(--kh-color-primary-500);
  }

  /* Ruhendes Markenzeichen in der linken Spalte.
     Hier ist es an seinem richtigen Platz: helle Flaeche, sehr
     geringe Deckkraft — genau der Fall, fuer den global.css 23.5
     das Asset freigibt.

     GEMESSEN UND KORRIGIERT · NICHT HINTER DEN TEXT
     Zuerst lag es hinter der Ueberschrift und reichte bis in den
     Hinweis darunter. Das Asset hat eine deckende Innenflaeche;
     unter dem Text entstand dadurch eine hellrosa Scheibe, die
     wie ein Fehler aussah. Jetzt steht es UNTER dem Hinweis, in
     dem Teil der Spalte, der ohnehin leer ist — und beruehrt
     keine einzige Zeile.

     Kein negativer z-index: der wuerde das Zeichen unter den
     Hintergrund des Abschnitts schieben, sobald dieser einmal
     eine Flaechenfarbe bekommt. */
  .kh-home-faq .kh-home-faq__aside { position: relative; }

  .kh-home-faq .kh-home-faq__aside > * { position: relative; z-index: 1; }

  .kh-home-faq .kh-home-faq__aside::after {
    content: "";
    position: absolute;
    z-index: 0;
    inline-size: clamp(150px, 15vw, 230px);
    aspect-ratio: 1 / 1;
    inset-inline-start: 0;
    inset-block-start: calc(100% + var(--kh-space-xl));
    background-image: url("../../../../uploads/2026/09/favicon.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .05;
    pointer-events: none;
  }

  /* DESIGN-LIVE-3: die Groesse kam aus einem eigenen clamp und
     endete bei 44px. Die Startseite kennt drei Ueberschriftstufen —
     60 (display), 48 (h1), 36 (h2) —, und 44 war in keiner davon.
     Die FAQ gehoert ihrer Rolle nach zu Standorte, Beratung und
     Abschluss; die bekommen h1 beziehungsweise h2. Hier steht jetzt
     h1, das ist naeher an den bisherigen 44 als h2 und liegt auf der
     Skala. Mass und Zeilenfuehrung bleiben unveraendert. */
  .kh-home-faq .kh-section-header__title .elementor-heading-title {
    font-size: var(--kh-text-h1);
    line-height: 1.1;
    letter-spacing: -.025em;
    max-width: 14ch;
  }

  .kh-home-faq__accordion {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .kh-home-faq .kh-home-faq__aside {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: var(--kh-space-lg);
    padding-top: var(--kh-space-lg);
    border-top: 1px solid var(--kh-color-line-200);
  }
}

.kh-home-faq .kh-home-faq__accordion { width: 100%; }


/* --- 09.1 Das Fragensystem --------------------------------

   AUS DEM ELEMENTOR-ACCORDION WIRD DAS EIGENE
   Hier stand Elementors Alt-Accordion. Es bringt eine
   Registerkarten-Semantik mit (role="tab" auf einer Ueberschrift),
   die fuer ein Aufklappsystem falsch ist, legt zwei fokussierbare
   Elemente je Frage an und laesst sich nicht nummerieren, ohne die
   Zahlen aus CSS-Zaehlern zu erfinden.

   Jetzt steht hier die eigene Komponente aus global.css 07,
   geschaltet von main.js 09: ein Aufklapp-Muster mit
   aria-expanded und aria-controls, ein Tabstopp je Frage, und die
   Nummern 01 bis 05 stehen als echter Text im Markup.

   KEINE KARTEN
   Nur Haarlinien. Der geoeffnete Zustand faerbt die Zeile sehr
   leicht warm und setzt eine schmale rote Kante an den Anfang —
   kein Rahmen, kein Schatten, keine Flaeche mit Radius. */

.kh-faq {
  --kh-faq-num: 3rem;
  --kh-faq-pad: var(--kh-space-md);
}

.kh-faq .kh-faq__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.kh-faq .kh-faq__trigger {
  display: grid;
  grid-template-columns: var(--kh-faq-num) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--kh-space-sm);
  padding-block: var(--kh-space-lg);
  padding-inline: var(--kh-faq-pad) var(--kh-space-xs);
  font-size: inherit;
  transition:
    background-color var(--kh-transition-fast) var(--kh-ease-standard),
    color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-faq__num {
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-wide);
  font-variant-numeric: tabular-nums;
  line-height: 1.9;
  color: var(--kh-color-ink-400);
  transition: color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-faq__q {
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-tight);
  text-align: start;
  text-wrap: pretty;
}

.kh-faq .kh-faq__icon {
  align-self: center;
  color: var(--kh-color-ink-400);
}

/* Der geoeffnete Zustand.
   Die rote Kante liegt als innerer Schatten auf der Zeile: sie
   braucht keinen Platz und verschiebt deshalb nichts, wenn eine
   Frage aufgeht. Die Flaeche ist mit 3,5 Prozent so leise, dass
   der Text darauf seine Kontrastwerte unveraendert behaelt. */
.kh-faq .kh-faq__item.is-open {
  background-color: rgba(230, 0, 0, .035);
  box-shadow: inset 2px 0 0 0 var(--kh-color-primary-500);
}

.kh-faq .kh-faq__item.is-open .kh-faq__num,
.kh-faq .kh-faq__item.is-open .kh-faq__icon { color: var(--kh-color-primary-500); }

.kh-faq .kh-faq__trigger:hover .kh-faq__num { color: var(--kh-color-primary-text); }

/* Die Antwort steht buendig unter der Frage, nicht unter der
   Nummer. Der Einzug rechnet sich aus denselben Werten, aus denen
   das Raster oben besteht. */
.kh-faq .kh-faq__panel {
  padding-block: 0 var(--kh-space-lg);
  padding-inline: calc(var(--kh-faq-pad) + var(--kh-faq-num) + var(--kh-space-sm))
                  var(--kh-space-xl);
  max-width: 68ch;
}

.kh-faq .kh-faq__body > :last-child { margin-bottom: 0; }

/* Schmale Fenster: die Nummernspalte schrumpft, die Frage
   verliert eine Stufe Schriftgroesse. */
@media (max-width: 39.99em) {

  .kh-faq { --kh-faq-num: 2rem; --kh-faq-pad: var(--kh-space-sm); }

  .kh-faq .kh-faq__trigger { padding-block: var(--kh-space-md); gap: var(--kh-space-xs); }

  .kh-faq__q { font-size: var(--kh-text-body); }

  .kh-faq .kh-faq__panel {
    padding-inline: calc(var(--kh-faq-pad) + var(--kh-faq-num) + var(--kh-space-xs))
                    var(--kh-space-sm);
  }
}

.kh-home-faq .kh-home-faq__aside { margin-top: var(--kh-space-lg); }

.kh-home-faq__aside-text {
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

/* LINKSBUENDIG AUCH SCHMAL (DESIGN-LIVE-3).
   Der FAQ-Kopf traegt kh-section-header--center. Ab der grossen
   Breite wird er ohnehin nach links gestellt; darunter blieb die
   Zentrierung stehen — und damit stand bei 390px als einziger
   Abschnittskopf der Seite einer in der Mitte, waehrend die Liste
   darunter links begann (Titel bei 105px, Akkordeon bei 26px).
   Die rote Auftaktmarke sass dabei weiterhin am linken Rand und
   damit neben ihrer eigenen Ueberschrift.

   Geaendert wird die Darstellung, nicht die Klasse: --center
   bleibt in den Elementor-Daten und gilt auf anderen Seiten
   unveraendert weiter. */
.kh-home-faq .kh-section-header--center {
  align-items: flex-start;
  text-align: start;
  /* Elementors 10px Containerpolster: der Rest der Startseite ist
     davon in Abschnitt 00 befreit, dieser Kopf nicht, weil er
     kh-section-header heisst und nicht kh-home-faq__*. Ohne das
     stand die Ueberschrift 10px rechts der Liste darunter. */
  padding-inline: 0;
}

.kh-home-faq .kh-home-faq__aside .kh-home-faq__aside-text { text-align: start; }

/* „Schreiben Sie uns" war der einzige Link der Seite, der INNERHALB
   eines Satzes steht — und er war nur an seiner Farbe zu erkennen
   (#a50000, keine Unterstreichung, keine Klasse). Farbe allein ist
   kein Unterscheidungsmerkmal; im Fliesstext braucht ein Link eine
   Linie. Die Trefferflaeche bleibt die Zeilenhoehe: ein Link im Satz
   kann keine 44px hoch sein, ohne den Zeilenfall zu zerstoeren —
   WCAG nimmt ihn davon ausdruecklich aus. */
.kh-home-faq .kh-home-faq__aside-text a {
  color: var(--kh-color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--kh-motion-fast) var(--kh-ease-standard),
              color var(--kh-motion-fast) var(--kh-ease-standard);
}

@media (hover: hover) and (pointer: fine) {

  .kh-home-faq .kh-home-faq__aside-text a:hover { color: var(--kh-color-ink-900); }
}


/* ==========================================================
   10. ABSCHLUSS-CTA
   ========================================================== */

/* DER ABSCHLUSS IST NICHT MEHR ROT.
   -------------------------------------------------------------
   Solange der Kopf weiss war, war diese Flaeche die einzige
   Markenflaeche der Seite. Jetzt traegt der Kopf das Rot. Zwei
   grosse rote Flaechen auf einer Seite waeren eine Klammer zu
   viel und wuerden dem Grundsatz „Rot ist ein Werkzeug, kein
   Anstrich" widersprechen.

   Der Abschluss steht deshalb hell, mit dem Vodafone-Zeichen als
   sehr schwachem Wasserzeichen (global.css 23.5, Klasse
   kh-brand-mark) und einer roten Auftaktlinie. Der dunkle Fuss
   darunter beendet die Seite. */
.kh-home-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.kh-home-cta > * { position: relative; z-index: 1; }

/* DAS WASSERZEICHEN DER SECTION ENTFAELLT HIER
   Es lag aus global.css 23.5 auf der hellen Flaeche der Section —
   also HINTER dem dunklen Panel, das seit global.css 24 darauf
   liegt. Sichtbar war davon so gut wie nichts, und ein zweites
   Vodafone-Zeichen neben dem im Ringmotiv waere eines zu viel.
   Die Klasse kh-brand-mark bleibt am Abschnitt, weil sie auch
   overflow und den Stapelkontext setzt; nur das Bild entfaellt. */
.kh-home-cta::before { content: none; }


/* --- 10.1 Vodafone-Zeichen im Ringmotiv -------------------

   WARUM DAS ZEICHEN NICHT AUF DAS ::after DES CONTAINERS KANN
   Dort liegen die Ringe aus global.css 24, und die drehen sich
   (kh-cta-drift, 38s). Ein mitdrehendes Markenzeichen kommt nicht
   in Frage. Zeichen und Ringe muessen aber konzentrisch sein,
   sonst sieht man den Versatz sofort.

   DIE LOESUNG
   Beides liegt auf EINEM Element — dem Motivfeld hier — und das
   steht still. Das Ringmotiv des Containers wird fuer diesen
   Abschnitt abgeschaltet, damit es nicht doppelt gezeichnet wird.
   Ruhende Ringe sind hier ohnehin richtiger: die Flaeche traegt
   eine Entscheidung, keine Buehne.

   GEMESSEN UND KORRIGIERT · KEINE ABGESCHWAECHTE MARKE
   Der erste Versuch setzte das Zeichen wie ein Wasserzeichen auf
   16 Prozent. Nachgesehen war das Ergebnis ein dunkelroter Ball
   mit grauem Innenraum — als Vodafone-Zeichen nicht mehr zu
   erkennen. Der Grund steht in global.css 23.5: das Asset hat
   eine deckend weisse Innenflaeche, und die wird beim Abblenden
   zu Grau.

   Ein Markenzeichen wird ausserdem nicht in der Deckkraft
   verstellt. Es steht hier deshalb voll deckend — auf #1A1A1A
   ist genau das die richtige Darstellung, rotes Zeichen mit
   weissem Innenraum. Dafuer ist es klein und sitzt weit rechts,
   ausserhalb der Handlungsspalte: ein Absender, kein Motiv. */

.kh-home-cta.kh-cta-panel > .kh-container::after { content: none; }

.kh-home-cta.kh-cta-panel .kh-home-cta__mark {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-end: -13%;
  inline-size: clamp(280px, 34vw, 520px);
  block-size: clamp(280px, 34vw, 520px);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  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-home-cta .kh-home-cta__mark .elementor-widget-container { display: contents; }

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

/* Unter 62em stehen Text und Schaltflaechen untereinander und
   nehmen die ganze Breite ein. Die Ringe rutschen deshalb nach
   oben rechts in die Ecke.

   DAS ZEICHEN ENTFAELLT HIER
   Nachgemessen: bei 390px ist jede Stelle, an der das Zeichen
   vollstaendig ins Panel passt, von Text belegt — und angeschnitten
   darf ein Markenzeichen nicht stehen. Lieber gar kein Zeichen als
   ein halbes. Die Ringe bleiben; sie duerfen angeschnitten sein,
   weil sie keine Marke sind. */
@media (max-width: 61.99em) {

  .kh-home-cta.kh-cta-panel .kh-home-cta__mark {
    inset-block-start: 0;
    inset-inline-end: -22%;
    inline-size: clamp(220px, 60vw, 340px);
    block-size: clamp(220px, 60vw, 340px);
    translate: 0 -30%;
  }

  .kh-home-cta .kh-home-cta__mark-shape { display: none; }
}

/* Vorher mittig gesetzt, mit zwei gleich grossen Schaltflaechen
   nebeneinander. Das ist der Standardabschluss jeder Elementor-Seite.

   Jetzt ein redaktioneller Schluss: die Aussage traegt links, die
   Handlung steht rechts daneben — ein Hauptweg und ein Textlink,
   keine zwei gleichrangigen Knoepfe. */
.kh-home-cta .kh-home-cta__content {
  position: relative;
  display: grid;
  gap: var(--kh-space-md);
  max-width: none;
  margin-inline: 0;
  padding-top: var(--kh-space-lg);
  text-align: start;
}

/* Rote Auftaktlinie statt eines weiteren Eyebrow-Wortes. Sie sitzt
   jetzt buendig zur Textkante, nicht in der Mitte. */
.kh-home-cta .kh-home-cta__content::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: none;
  inline-size: 48px;
  block-size: 3px;
  background-color: var(--kh-color-primary-500);
}

/* Ohne Lesemasse: beide sassen an der Elementor-Huelle und waren
   wirkungslos (Abschnitt 00). Die Breiten kommen aus dem Raster des
   Panels — gemessen 563px fuer die Ueberschrift, 512px fuer den
   Vorspann. Mit 18ch waere die Ueberschrift auf vier Zeilen
   gegangen, neben einer leeren rechten Haelfte. */
.kh-home-cta__title {
  margin-inline: 0;
  text-wrap: balance;
}

.kh-home-cta__lead { margin-inline: 0; }

.kh-home-cta .kh-home-cta__actions { margin-top: 0; }

.kh-home-cta__note {
  margin-top: 0;
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

/* ENTFALLEN AM 19.09.2026 · „FILIALE FINDEN" WAR KEIN KNOPF MEHR
   -------------------------------------------------------------
   Hier standen drei Regeln, die die zweite Schaltflaeche des
   Abschlusses bewusst zum Textlink gemacht haben: kein Rahmen,
   kein Polster, fett, zuletzt weiss auf dunkel. Die Absicht war,
   den Nebenweg leichter wiegen zu lassen als „Termin vereinbaren".

   Im dunklen Abschlusspanel ist daraus aber blosser weisser Text
   neben einem vollflaechigen Knopf geworden — als Nebenweg nicht
   mehr erkennbar, sondern gar nicht mehr als Ziel lesbar.

   WARUM DIE REGELN GEWONNEN HABEN
   Sie wogen (0,4,0) bzw. (0,5,0) und lagen damit ueber dem
   gemeinsamen Knopfsystem:

       .kh-button-wrap .elementor-button                      (0,2,0)
       .kh-button-wrap--secondary .elementor-button           (0,2,0)
       .kh-button-wrap--lg .elementor-button                  (0,2,0)
       .kh-cta-panel .kh-button-wrap--secondary .elementor-button (0,3,0)

   Gemessen am Knopf: border 0px none, padding 0px, Hoehe 44px.
   Die Klassen am Widget waren die ganze Zeit korrekt — es war
   keine fehlende Klasse, sondern eine seitenspezifische
   Ueberschreibung.

   Mit dem Wegfall greift wieder das gemeinsame System, samt der
   dafuer bereits vorhandenen Dunkelvariante aus global.css 24.2
   (Rahmen rgba(255,255,255,.58), Schrift ink-inverse). Kein neues
   Merkmal, kein !important, keine Aenderung an anderen Knoepfen:
   die entfallenen Selektoren begannen alle mit .kh-home-cta und
   galten ausschliesslich hier. */

@media (min-width: 64em) {

  /* Der Abschluss lag in einer schmalen Huelle von 760px und begann
     damit 220px weiter innen als jede andere Section. Fuer einen
     mittigen Schluss war das richtig; fuer den redaktionellen
     Zweispalter muss er dieselbe linke Kante haben wie die Seite. */
  .kh-home-cta .kh-container--narrow { max-width: var(--kh-container-max); }

  .kh-home-cta .kh-home-cta__content {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 112px);
    row-gap: var(--kh-space-sm);
    align-items: start;
  }

  .kh-home-cta__title { grid-column: 1; grid-row: 1; }
  .kh-home-cta__lead  { grid-column: 1; grid-row: 2; }
  .kh-home-cta__note  { grid-column: 1; grid-row: 3; }

  /* Die Handlungsspalte steht rechts und laeuft ueber alle drei
     Zeilen; sie richtet sich an der Grundlinie des Leads aus. */
  .kh-home-cta .kh-home-cta__actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kh-space-md);
    align-self: center;
  }
}


/* ==========================================================
   11. RESPONSIVE
   ========================================================== */

/* ---------- ab 480px ---------- */
@media (min-width: 480px) {

  .kh-home-hero .kh-home-hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kh-space-lg);
    /* Halbe Lücke — die andere Hälfte liegt als Innenabstand
       hinter der Trennlinie (siehe oben). */
    column-gap: var(--kh-space-sm);
  }

  /* Nebeneinander trennt eine senkrechte Linie, nicht mehr die
     waagerechte des gestapelten Zustands. */
  .kh-home-hero .kh-home-hero__fact + .kh-home-hero__fact {
    border-block-start: 0;
    padding-block-start: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, .14);
    padding-inline-start: var(--kh-space-sm);
  }

  /* Sechs Spalten als Raster, damit sich 2 + 3 sauber teilen laesst.
     Hier tragen die beiden Hauptwege noch die volle Breite; drei
     Nebenwege nebeneinander waeren bei 480px je 137px breit und
     „Internet & Festnetz" haette dreizeilig gebrochen. */
  .kh-home-quickactions .kh-quick {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--kh-space-sm);
  }

  .kh-quick__card--lead  { grid-column: span 6; }
  .kh-quick__card--minor { grid-column: span 3; }
  .kh-quick__card--minor:last-child { grid-column: span 6; }
}

/* ---------- ab 768px ---------- */
@media (min-width: 768px) {

  /* Jetzt die eigentliche Komposition: zwei grosse oben,
     drei kleine darunter. */
  .kh-quick__card--lead  { grid-column: span 3; }
  .kh-quick__card--minor { grid-column: span 2; }
  .kh-quick__card--minor:last-child { grid-column: span 2; }

  .kh-home-locator .kh-home-locator__locations { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .kh-home-locator .kh-home-locator__location-hint {
    padding-block: var(--kh-space-sm);
    padding-right: var(--kh-space-sm);
  }

  .kh-facts__card { padding: var(--kh-space-lg); }
}

/* ---------- ab 1024px ---------- */
@media (min-width: 1024px) {

  /* 55/45 zugunsten des Textes: auf der Markenflaeche traegt die
     Schrift, das Bild begleitet. */
  .kh-home-hero .kh-home-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
  }

  .kh-home-hero .kh-home-hero__facts {
    gap: var(--kh-space-2xl);
    column-gap: var(--kh-space-lg);
    padding-block: clamp(32px, 2.6vw, 44px);
  }

  .kh-home-hero .kh-home-hero__fact + .kh-home-hero__fact {
    padding-inline-start: var(--kh-space-lg);
  }

  /* DESIGN-9B: keine zwei Spalten mehr. Das Objekt steht als eine
     Flaeche, in der von oben nach unten gearbeitet wird. */
  .kh-home-locator .kh-home-locator__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }

  /* DESIGN-9B: die zweispaltige Aufteilung und der klebende
     Intro-Block entfallen. Die Aussage steht jetzt oben und in
     voller Breite, das Argumentfeld darunter — sonst konkurrieren
     Ueberschrift und Argumente um dieselbe Blickhoehe. */
  .kh-home-why .kh-home-why__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 4.5vw, 88px);
  }

  .kh-home-why .kh-home-why__intro { position: static; }

  /* Rund 40 zu 60 zugunsten der Buchung. Vorher stand es
     54 zu 46 zugunsten des Textes — die Begruendung war
     breiter als die Handlung, die sie begruendet. */
  /* DESIGN-LIVE-2: keine zwei Spalten mehr. Das Werkzeug bekommt
     die volle Breite — es ist die Handlung des Abschnitts, nicht
     sein Beiwerk. */
  .kh-home-booking .kh-home-booking__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 2.6vw, 44px);
  }

  .kh-home-booking .kh-home-booking__shell-text {
    padding: var(--kh-space-xl) var(--kh-space-xl) 0;
  }

  .kh-home-booking .kh-home-booking__widget { padding: var(--kh-space-xl); }

  /* Die Shopliste ist hoehenbegrenzt und scrollt in sich. Ueber die
     volle Breite standen 14 Eintraege zu je 1068px nebeneinander im
     Nichts — zweispaltig zeigt derselbe Ausschnitt doppelt so viele
     Shops und die Flaeche traegt. Nur Darstellung: Reihenfolge,
     Verhalten und Ziele des Shortcodes bleiben unberuehrt. */
  .kh-home-booking .kh-booking__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--kh-space-md);
    align-content: start;
  }

  /* Von 1,15 zu 0,85 auf 0,92 zu 1,08: die rechte Spalte traegt jetzt
     das Bild als Hauptmotiv der Section. Es ist damit breiter als die
     Textspalte — vorher war es schmaler als der Fliesstext daneben.
     Der groessere Zwischenraum gibt der Kartengruppe Platz, ohne
     dass sie in die Textspalte laeuft. */
  .kh-home-company .kh-home-company__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--kh-space-3xl);
    align-items: center;
  }

  /* Die Karten ragen nach links ueber die Bildkante hinaus — in den
     Zwischenraum, nicht in den Text. Gemessen bleiben bei 1440px
     rund 40px Abstand zur Textspalte. */
  .kh-home-company .kh-home-company__facts {
    margin-block-start: -14%;
    margin-inline: -8% var(--kh-space-xl);
  }
}

/* ---------- Bewegungsreduktion ---------- */
@media (prefers-reduced-motion: reduce) {

  .kh-quick__card,
  .kh-quick__icon,
  .kh-quick__arrow,
  .kh-booking__option,
  .kh-booking__call,
  .kh-home-locator__search-shell .elementor-button { transition: none; }

  .kh-quick__card:hover .kh-quick__arrow { transform: none; }

  .kh-home-why .kh-home-why__intro { position: static; }

  /* Der Tabwechsel bleibt, verliert aber Weg und Zeit: das Panel
     erscheint sofort und vollstaendig. Die rote Kante des aktiven Tabs
     springt an, statt aufzuziehen. */
  .kh-svc__panel { animation: none; }

  .kh-svc__tab,
  .kh-svc__tab::before,
  .kh-svc__tab-icon,
  .kh-svc__tab-title,
  .kh-svc__cta::after { transition: none; }
}

/* ---------- Hoher Kontrast ---------- */
@media (forced-colors: active) {

  /* Bei erzwungenen Farben verschwindet die Flaeche der Zeichenkachel.
     Eine Kante haelt die Karte zusammen. */
  .kh-quick__card { border: 1px solid CanvasText; }
  .kh-quick__icon { border: 1px solid CanvasText; }

  /* Die Faktenliste im Unternehmensteil traegt eigene Haarlinien und braucht
     hier keinen Rahmen — sie ist keine Karte. */
  .kh-home-locator .kh-home-locator__search-shell,
  .kh-home-booking .kh-home-booking__shell { border: 1px solid CanvasText; }

  /* Bei erzwungenen Farben faellt der Unterschied zwischen
     aktivem und erledigtem Schritt weg. Eine Kante haelt ihn. */
  .kh-booking__step-num { border: 1px solid CanvasText; }
  .kh-booking__list,
  .kh-booking__chosen { border: 1px solid CanvasText; }
  .kh-booking__call { border: 1px solid CanvasText; }

  /* Bei erzwungenen Farben verschwinden Flaechenunterschiede. Der aktive
     Tab braucht deshalb eine Kante, die das System nicht ersetzt. */
  .kh-svc__tab { border-bottom: 1px solid CanvasText; }
  .kh-svc__tab.is-open { outline: 2px solid Highlight; outline-offset: -2px; }
  .kh-svc__panel { border-left: 2px solid CanvasText; }

  .kh-home-locator__search-shell .elementor-button-icon { border: 1px solid CanvasText; }
}


/* ==========================================================
   SERVICEORIENTIERUNG (Phase 6A, Batch 1B)
   ----------------------------------------------------------
   Schnellzugriff und Leistungen waren zwei Abschnitte
   hintereinander: eigener Streifen, Fuge, dann ein zweites
   Feld. Beides gehoert fachlich zusammen — der Schnellzugriff
   ist der Einstieg, die Leistungen sind die Tiefe.

   Zusammengefuehrt wird hier GESTALTERISCH, nicht strukturell:
   beide Elementor-Abschnitte bleiben, wo sie sind, und auch das
   Reitersystem der Leistungen (ein HTML-Widget) wird nicht
   angefasst. Geaendert wird nur, was sie zu einem Feld macht —
   gemeinsame Flaeche, keine Fuge, eine gemeinsame Oberkante.

   Warum nicht die Knoten verschieben: das Reitersystem und die
   Schnellzugriff-Kacheln haengen an eigenem Markup und eigener
   Tastaturbedienung. Ein Umbau dort waere ein funktionales
   Risiko fuer einen rein optischen Gewinn.
   ========================================================== */

/* Gemeinsame Flaeche. surface-050 ist derselbe Wert, den
   kh-section--soft an den Leistungen setzt. */
.kh-home-quickactions {
  position: relative;
  background-color: var(--kh-color-surface-050);
  padding-block: var(--kh-space-xl) var(--kh-space-lg);
}

/* Die Oberkante des Feldes wandert vom Beginn der Leistungen an
   den Beginn des Schnellzugriffs — sonst liefe mitten durch das
   gemeinsame Feld eine Linie. */
.kh-home-quickactions::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background-color: var(--kh-color-line-200);
}

.kh-home-services::before { content: none; }

/* Ohne Fuge: die Leistungen setzen das Feld oben ohne eigenes
   Polster fort. Unten bleibt der grosszuegige Abstand. */
.kh-home-services { padding-block-start: var(--kh-space-2xl); }


/* --- Grosse Bildflaeche im Servicebereich ----------------- */

/*
 * Die Bildflaeche steht im Markup NACH den Reitern und wird hier
 * davor sortiert. Grund: ein Einfuegen vor dem Reiter-Widget
 * haette dessen Knoten aufbrechen muessen. Die Reihenfolge ist
 * eine Darstellungsfrage, also wird sie in der Darstellung
 * geloest — der Vorlesefluss bleibt Kopf, Themen, Bild, was
 * inhaltlich ebenso traegt.
 */
.kh-home-services .kh-section-header { order: -2; }

/* ENTFALLEN mit DESIGN-LIVE-3: drei Regelbloecke fuer den
   Bildplatz der Leistungen (Reihenfolge, Seitenverhaeltnis 16:10,
   4:1 ab 64em, mobile Aussenabstaende). Der Container ist aus den
   Elementor-Daten entfernt; es gab nichts mehr zu formatieren. */


/* ==========================================================
   SHOP FINDEN -> TERMIN BUCHEN (Phase 6A, Block 3)
   ----------------------------------------------------------
   Die Buchung auf der Startseite ist bereits eine Anwendung:
   dunkler Kopf, Schrittanzeige 01/02, Suchfeld, rollende
   Shopliste. Der Locator davor war dagegen eine Textspalte mit
   einem kleinen Kaestchen daneben — zwei Welten.

   Angeglichen wird deshalb der Locator, nicht die Buchung. Er
   bekommt dieselbe Bauweise: dunkler Kopf auf der Flaeche,
   darunter die Eingabezone, darunter abgesetzt der Hinweis.
   Wer beide sieht, erkennt dieselbe Anwendung in zwei Stufen —
   ohne dass eine kuenstliche Assistentenlogik gebaut wird.

   Am Buchungsabschnitt und am Plugin wird nichts geaendert.
   ========================================================== */

@media (min-width: 64em) {

  /* DESIGN-9B: das Gewicht liegt nicht mehr in einer Spalte,
     sondern in der Groesse der Bedienzone. */
  .kh-home-locator .kh-home-locator__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Zonen statt einer Flaeche: der Kopf sitzt bündig an den
   Kanten, deshalb das negative Mass gegen das Polster der
   Karte. clamp() spiegelt deren eigenes Polster. */
.kh-home-locator .kh-home-locator__search-shell { padding-block-start: 0; }

/* .elementor-widget steht nur wegen der Spezifitaet im Selektor:
   Elementor deckelt das Widget auf die Inhaltsbox der Karte, und
   dieser Deckel liegt ueber (0,3,0). Ohne ihn aufzuheben bleiben die
   negativen Aussenabstaende wirkungslos und der Kopf endet rund 80px
   vor der rechten Kartenkante. */
/* DESIGN-9B: der schwarze Kopfbalken entfaellt. Er war die
   schwerste Flaeche des Abschnitts und sass ausgerechnet ueber
   dem Eingabefeld. Uebrig bleibt eine stille Bedienbeschriftung —
   Grossbuchstaben sind hier richtig, weil sie als Oberflaeche
   gelesen wird (Augenbrauen-Variante „utility" aus 9A). */
.kh-home-locator .kh-home-locator__search-shell > .elementor-widget.kh-label {
  align-self: stretch;
  inline-size: auto;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.kh-home-locator .kh-home-locator__search-shell > .elementor-widget.kh-label p {
  margin: 0;
  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-500);
}

/* Der Hinweis ist eine eigene, ruhigere Zone unter der
   Eingabe — wie die Fusszeile der Buchungsanwendung. */
/* DESIGN-9B: ohne Trennlinie. Der Hinweis steht ohnehin kleiner
   und leiser als die Eingabe darueber — dafuer braucht es keinen
   Strich. */
.kh-home-locator .kh-home-locator__search-hint {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}


/* ==========================================================
   GESCHAEFTSKUNDEN-TEASER (Phase 6A, Block 4)
   ----------------------------------------------------------
   Der Abschnitt muss sich von zwei Nachbarn unterscheiden: vom
   hellen Privatkunden-Pfad davor und von „Warum vor Ort", das
   ebenfalls dunkel ist. Deshalb NICHT dessen Bauweise (Intro
   links, nummerierte Liste rechts), sondern quer gebaut: oben
   der Anspruch, darunter ein flaches Band aus drei Feldern mit
   senkrechten Haarlinien. Das liest sich wie ein Datenblatt und
   nicht wie eine Argumentliste.

   Keine Karten: die Felder tragen weder Flaeche noch Rahmen,
   nur Trenner. Kein Bild: die Seite hat bereits zwei leere
   Medienflaechen, eine dritte waere eine Luecke mehr. Die Tiefe
   kommt aus kh-section--lines (global 23.6) — dieselbe senkrechte
   Rasterlogik wie die Trenner im Band.
   ========================================================== */

/* KORREKTURRUNDE: das globale Raster (23.6) ist fuer helle Flaechen
   gebaut. Auf Dunkel lag es mit --kh-color-line-200 bei 96px wie
   Millimeterpapier ueber dem Text und kollidierte mit den Trennern
   des Bandes. Hier deshalb heller Strich mit sehr geringer Deckung
   und doppeltem Abstand — Textur statt Raster. */
.kh-home-business::before {
  background-image: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .09) 0 1px,
      transparent 1px 160px);
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
}

/* DESIGN-LIVE-2 · AUS KARTENWAND WIRD ABZWEIGUNG.
   ---------------------------------------------------------
   Vorher: Augenbraue und H2 links, Satz und Knopf rechts, darunter
   drei gleich schwere Felder mit Haarlinien oben, unten und
   senkrecht dazwischen. Das war die Form, die der Auftrag
   ausdruecklich ausschliesst — Ueberschrift plus drei Karten plus
   roter Knopf.

   Nachher: eine Aussage, die fuehrt. Darunter der Satz, der sagt
   fuer wen, dann EINE Handlung — und erst darunter die drei
   Faehigkeiten als leise Belegzeile ohne Linien. Der Abschnitt ist
   eine Abzweigung, keine Miniaturausgabe der B2B-Seite.

   Die beiden Huellen __title und __pitch sind aus den
   Elementor-Daten entfernt; __head ist jetzt ein einfacher Stapel. */
.kh-home-business .kh-home-business__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kh-space-md);
  width: 100%;
  align-items: start;
}

/* Ohne Masse: beide sassen an der Elementor-Huelle und waren
   wirkungslos (Abschnitt 00). Die Ueberschrift steht in zwei
   Zeilen ueber die Containerbreite und ist so abgenommen worden;
   der Vorspann laeuft mit 71 Zeichen je Zeile innerhalb des
   lesbaren Bereichs. Nachtraeglich verengen heisst hier: eine
   abgenommene Komposition ohne Not aendern. */
.kh-home-business .kh-h2 {
  font-size: var(--kh-text-display);
  line-height: 1.12;
  letter-spacing: var(--kh-tracking-tight);
}

.kh-home-business__lead {
  font-size: var(--kh-text-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.kh-home-business .kh-home-business__actions { margin-top: var(--kh-space-sm); }

/* Belegzeile statt Kartenwand: keine Kante oben, keine unten,
   keine senkrechte dazwischen. Fuenf Haarlinien weniger. */
.kh-home-business .kh-home-business__band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kh-space-lg);
  width: 100%;
  margin-top: clamp(36px, 3.4vw, 60px);
  border-top: 0;
}

.kh-home-business .kh-home-business__capability {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-2xs);
  padding-block: 0;
  border-bottom: 0;
}

/* Deutlich kleiner als die Aussage darueber — sie stuetzen, sie
   konkurrieren nicht. */
.kh-home-business__capability-title {
  margin: 0;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-snug);
  color: rgba(255, 255, 255, .94);
}

/* Kein Mass noetig: die Spalte des Kompetenzbandes ist bei 1440px
   327px breit und begrenzt den Satz bereits. Das 42ch an der
   Elementor-Huelle war wirkungslos (Abschnitt 00). */
.kh-home-business__capability-text {
  font-size: var(--kh-text-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .60);
}

@media (min-width: 64em) {

  /* DESIGN-LIVE-2: der Kopf bleibt einspaltig. Die Aussage traegt
     den Abschnitt; ein zweispaltiger Kopf machte aus der Abzweigung
     wieder eine Seite. */
  .kh-home-business .kh-home-business__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kh-space-md);
  }

  /* Drei Belege nebeneinander, aber OHNE die drei Linien: die
     untere Kante, die obere Kante und die beiden Senkrechten sind
     entfallen. Getrennt wird durch Abstand. */
  .kh-home-business .kh-home-business__band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(32px, 3.4vw, 64px);
    border-bottom: 0;
  }

  .kh-home-business .kh-home-business__capability {
    position: static;
    border-bottom: 0;
    padding-inline: 0;
  }
}


/* ==========================================================
   MARKENMOMENT: UNTERNEHMEN UND KARRIERE (Phase 6A, Block 2)
   ----------------------------------------------------------
   Zwei Kapitel derselben Geschichte: erst die reale Shopwelt
   auf heller Flaeche, dann der menschliche Abschluss auf
   dunkler. Der Kontrast zwischen beiden ist die Verbindung —
   ohne ihn waeren es wieder zwei beliebige Streifen.

   Das Shopfoto ist das EINZIGE echte Bild in diesem Block und
   bekommt deshalb Gewicht. Fuer die Karriere gibt es kein
   geeignetes Foto in der Mediathek (das vorhandene misst
   235x148px), daher dort genau eine gestaltete Flaeche.
   ========================================================== */

/* --- Unternehmen: das Foto fuehrt --------------------------- */

@media (min-width: 64em) {

  /* Vorher nahezu 0,92fr/1,08fr — also faktisch halbe/halbe.
     Jetzt fuehrt das Bild deutlich, der Text behaelt eine
     lesbare Spalte. */
  .kh-home-company .kh-home-company__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--kh-space-3xl);
  }

  /* Breiter als hoch: der Ladeneingang wirkt im Querformat
     raeumlicher als im 4:3-Ausschnitt. */
  .kh-home-company__image img { aspect-ratio: 3 / 2; }
}


/* --- Karriere: die offene Tuer ------------------------------ */

/* DESIGN-LIVE-2 · ABSCHNITT D
   ---------------------------------------------------------
   ROLLE: Arbeitgeber / Menschen / Gelegenheit.

   Die drei Abschnitte davor sind Objekte: die Buchung eine
   erhoehte Schale, der Geschaeftskunden-Teaser ein Band aus
   drei Kompetenzen, das Unternehmen ein Bild mit
   ueberlappender Faktenkarte. Karriere ist bewusst kein
   viertes Objekt. Der Abschnitt ist rein typografisch — keine
   Flaeche, keine Karte, kein Bild, keine Mehrfachliste — und
   unterscheidet sich dadurch in der Grammatik, nicht nur im
   Hintergrund.

   AUFBAU: die Aussage steht ueber die volle Breite, darunter
   laeuft eine Linie ueber die volle Breite, und darunter haengt
   der Nachsatz rechts. Das ist der Satzspiegel einer Einladung:
   gross gesprochen, leise erklaert.

   KEIN display:contents, KEINE Rasterplatzierung, KEINE
   order-Choreografie. Die Lesereihenfolge ist die
   Quelltextreihenfolge; der Nachsatz haengt ueber
   margin-inline-start:auto rechts, nicht ueber eine
   Spaltenangabe, und faellt schmal von selbst nach links.

   DOM STATT UMGEHUNG: .kh-home-careers__content ist in den
   Elementor-Daten aufgeloest. Begruendung und Handlung stehen
   jetzt gemeinsam in .kh-home-careers__note (Container
   cr000002). Vorher hielt display:contents den Behaelter
   kuenstlich offen, damit beide Kinder eigene Rasterzellen
   bekamen — dieselbe Hilfskonstruktion, die im Locator mit
   DESIGN-LIVE-1.1 schon entfernt wurde.

   KEINE STELLENLISTE und kein erfundener Arbeitgebersatz:
   veroeffentlicht ist genau eine Stelle. Eine Liste mit einem
   Eintrag ist keine Komposition, und ein fest in die Startseite
   geschriebener Stellentitel waere am Tag ihrer Besetzung
   falsch. Die Karriereseite bleibt die Quelle.

   KEIN BILD: in der Mediathek liegt kein Foto, das Arbeiten bei
   Kahraman zeigt. */

/* Hell. Die Sektion trug kh-section--dark und wurde hier wieder
   aufgehellt — zwei Regeln, die gegeneinander standen. Die
   Klasse ist mit DESIGN-LIVE-2 aus den Elementor-Daten
   entfernt; der Abschnitt ist jetzt hell, weil er hell ist, und
   nicht trotz seiner Klasse.

   Das Polster stand hier als Einzelwert (clamp 64/104px) und liegt
   mit DESIGN-LIVE-3 wieder im Sektionsrhythmus ganz oben in dieser
   Datei. Der Grund fuer den Einzelwert war richtig — eine
   Komposition aus Schrift und einer Linie lebt vom Weissraum —,
   aber 93,6px lagen zwischen zwei Tokens und brachen den
   dreistufigen Rhythmus der Seite fuer einen Gewinn, den niemand
   sieht. */
.kh-home-careers {
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-700);
}

.kh-home-careers .kh-home-careers__band {
  display: flex;
  flex-direction: column;
  gap: 0;
  inline-size: 100%;
  padding: 0;
  border: 0;
}

/* Die Groesse sitzt am Wrapper, nicht an der h2: das System setzt
   .elementor-widget-heading.kh-h3 .elementor-heading-title auf
   font-size:inherit. Das Zeilenmass sitzt dagegen an der h2 —
   so behaelt die Linie am Wrapper die volle Breite, waehrend der
   Satz kurz bleibt. */
.kh-home-careers .kh-home-careers__title {
  position: relative;
  margin: 0;
  font-size: var(--kh-text-h1);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.1;
  letter-spacing: var(--kh-tracking-tight);
  color: var(--kh-color-ink-900);
  padding-block-end: var(--kh-space-lg);
}

/* Die Linie ist ein ::after und keine border-block-end, weil sie sich
   zeichnen koennen muss (siehe Bewegung weiter unten). Ohne Bewegung
   ist sie exakt dieselbe Haarlinie wie zuvor. */
.kh-home-careers .kh-home-careers__title::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background-color: var(--kh-color-line-200);
}

.kh-home-careers .kh-home-careers__title h2 {
  margin: 0;
  max-inline-size: 18ch;
}

.kh-home-careers .kh-home-careers__note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kh-space-sm);
  margin: 0;
  padding-block-start: var(--kh-space-lg);
}

.kh-home-careers .kh-home-careers__text { max-width: none; }

.kh-home-careers .kh-home-careers__text,
.kh-home-careers .kh-home-careers__text p {
  margin: 0;
  color: var(--kh-color-ink-700);
  font-size: var(--kh-text-body);
  line-height: 1.65;
}

/* Die Handlung ist hier kein Knopf. Buchung, Geschaeftskunden und
   Unternehmen fuehren jeweils in einen Vorgang; Karriere laedt
   ein. Der Textlink mit Pfeil ist dafuer die leisere Form — und
   auf dieser Seite die einzige, die einen Abschnitt abschliesst.

   Das Pfeil-Primitiv steht in global.css 26.5; hier stehen nur
   Platzierung und Trefferflaeche. kh-button-wrap--block-mobile
   am Widget zielt auf einen Knopf und wird zurueckgenommen; die
   Klasse bleibt im Markup, weil das System sie an echten
   Knoepfen braucht und sie hier nichts anrichtet. */
.kh-home-careers .kh-home-careers__actions {
  margin: 0;
  inline-size: auto;
  justify-content: flex-start;
}

.kh-home-careers .kh-home-careers__actions .elementor-button {
  display: inline-flex;
  align-items: center;
  inline-size: auto;
  min-block-size: var(--kh-tap-min);
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--kh-color-ink-900);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--kh-motion-fast) var(--kh-ease-standard);
}

/* Die Unterstreichung traegt der Textspan, nicht der Link: so
   endet sie am Wort und laeuft nicht unter dem Pfeil durch,
   waehrend die 44px Trefferflaeche am Link bleiben. */
.kh-home-careers .kh-home-careers__actions .elementor-button-text {
  box-shadow: inset 0 -1px 0 0 var(--kh-color-line-strong);
  transition: box-shadow var(--kh-motion-fast) var(--kh-ease-standard);
}

@media (hover: hover) and (pointer: fine) {

  .kh-home-careers .kh-home-careers__actions .elementor-button:hover {
    background-color: transparent;
    color: var(--kh-color-primary-500);
  }

  .kh-home-careers .kh-home-careers__actions .elementor-button:hover .elementor-button-text {
    box-shadow: inset 0 -1px 0 0 var(--kh-color-primary-500);
  }
}

.kh-home-careers .kh-home-careers__actions .elementor-button:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

@media (min-width: 64em) {

  .kh-home-careers .kh-home-careers__note {
    margin-inline-start: auto;
    inline-size: min(100%, 46ch);
  }
}

/* --- Bildplatz (DESIGN-LIVE-3.1) -------------------------- */

/* ENTSCHEIDUNG: JA, hier ist Fotografie vorgesehen.
   Der Abschnitt wirbt um Menschen, die gern erklaeren — das
   ueberzeugendste Bild dafuer sind Menschen bei genau dieser
   Arbeit. Mit DESIGN-LIVE-2 war der Bildplatz entfernt worden,
   aber die Begruendung war „es gibt kein Foto", und genau diese
   Begruendung ist mit DESIGN-LIVE-3.1 aufgehoben.

   NICHT wiederhergestellt wird die alte Fassung: kein 1136x284
   dekorierter Leerkasten, kein Glasfeld, keine negativen
   Aussenabstaende. Der Platz steht in der Komposition, die seit
   DESIGN-LIVE-2 gilt: Aussage ueber die volle Breite, Linie,
   darunter das Bild links — genau dort, wo bisher der leere Raum
   neben dem rechts haengenden Nachsatz war.

   Der Nachsatz behaelt seinen Platz am rechten Rand. Beide
   beginnen auf derselben Oberkante. */
@media (min-width: 64em) {

  /* MASS MIT ABSICHT: 420px, nicht die halbe Breite.
     Mit einer 1fr-Spalte wurde der Bildplatz 669x446px gross und
     damit das schwerste Objekt der ganzen Seite — schwerer als
     das echte Foto im Unternehmensabschnitt. Karriere ist ein
     Teaser, keine Bildstrecke. Die Typografie fuehrt weiter, das
     Bild begleitet; der Nachsatz behaelt seinen rechten Rand aus
     DESIGN-LIVE-2. */
  .kh-home-careers .kh-home-careers__band:has(.kh-home-careers__media) {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    column-gap: clamp(40px, 4vw, 80px);
    align-items: start;
  }

  .kh-home-careers .kh-home-careers__band:has(.kh-home-careers__media)
  .kh-home-careers__title { grid-column: 1 / -1; }

  .kh-home-careers .kh-home-careers__media { margin-block-start: var(--kh-space-lg); }
}

.kh-home-careers .kh-home-careers__media { aspect-ratio: 3 / 2; }

/* --- Bewegung: die Linie zeichnet sich ---------------------- */

/* DIE EINE FORTGESCHRITTENE TECHNIK DIESES BATCHES.
   Die Komposition haengt an einer einzigen Linie — also bewegt sich
   genau diese, und sonst nichts. Das Band selbst blendet nur auf
   (kh-reveal--soft statt --rise in main.js): ein Block, der steigt,
   waehrend in ihm eine Linie laeuft, waeren zwei Gesten fuer ein
   Objekt, und die Bewegungsgrammatik aus DESIGN-9A erlaubt eine.

   scaleX statt width — sonst rechnet der Browser bei jedem Bild das
   Layout neu. Dieselbe Technik wie .kh-reveal--line; nur kann sie
   hier nicht als Klasse am Element sitzen, weil die Linie ein ::after
   ist und kein eigenes Element im Markup hat.

   Der Vorzustand steht bewusst INNERHALB von no-preference: wer
   Bewegung abbestellt hat, sieht die fertige Linie und nie den
   Nullzustand — auch nicht fuer eine Millisekunde. */
@media (prefers-reduced-motion: no-preference) {

  .kh-home-careers .kh-home-careers__band.is-armed .kh-home-careers__title::after {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--kh-motion-slow) var(--kh-motion-ease);
  }

  .kh-home-careers .kh-home-careers__band.is-armed.is-inview .kh-home-careers__title::after {
    transform: scaleX(1);
  }
}

/* ENTFALLEN · DESIGN-9B: die vorige Karriere-Fassung ist mit
   DESIGN-LIVE-2 vollstaendig durch den Satzspiegel oben ersetzt.
   Sie arbeitete mit einem Raster aus zwei Spalten, mit
   display:contents am aufgeloesten Behaelter und mit expliziten
   grid-row-Platzierungen. Festgehalten bleibt der Befund, der
   schon 9B ausgeloest hat: der Bildplatz war 1136x284px gross und
   hatte null Kinder — ein dekorierter Platzhalter. Er ist
   inzwischen auch aus den Elementor-Daten entfernt (Container
   cr000001).

   Kommt echte Fotografie, wird ein Bildwidget als erstes Kind des
   Bandes eingesetzt; das Band ist dann von einer Spalte auf zwei
   zu stellen. */