@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   about.css · Seite „Über uns"
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (global.css)
   Präfix    : kh-about-  ·  Schema: kh-block__element--modifier
   --------------------------------------------------------------------------
   WAS HIER STEHT
   Ausschliesslich das, was es im Designsystem noch nicht gibt: der
   überlappende Kopf, die Faktenreihe, die Zeitleiste, das Zitat, die
   Wertespalten, die Themen-Chips und die Bildflächen.

   WAS HIER NICHT STEHT
   Alles, wofür global.css bereits eine Komponente hat — kh-section,
   kh-container, kh-section-header, kh-card, kh-grid, kh-stack, kh-cluster,
   kh-button-wrap, kh-media, kh-hero-brand, kh-brand-mark, kh-h1/h2/h3,
   kh-lead, kh-text.

   ELEMENTOR-FALLE
   ::before und ::after der Elementor-Container sind für dessen
   Hintergrund-Overlays reserviert und absolut positioniert. Diese Datei
   benutzt auf Containern, die Inhalt tragen, deshalb keine Pseudo-Elemente,
   sondern Rahmen. Ausnahme sind die Flächenklassen aus global.css 22 und 23,
   die genau dafür gebaut und auf Abschnittsebene abgestimmt sind.
   ========================================================================== */


/* ==========================================================
   00. VERTIKALER RHYTHMUS
   ==========================================================
   Gemessen vorher: sieben von neun Abschnitten lagen auf identischen
   75,2px oben wie unten. Die Abstände folgen jetzt dem Gewicht des
   Inhalts — Auftakt und Karte atmen, Aufzählungen stehen dichter.
   ========================================================== */

.kh-about-hero         { padding-block: clamp(56px, 5vw + 28px, 112px) var(--kh-hero-pb, clamp(40px, 4vw + 16px, 88px)); }
.kh-about-intro        { padding-block: clamp(40px, 3vw + 20px, 72px); }
/* ENTFALLEN 20.10.2026: .kh-about-facts als eigener Abschnitt
   Die Leiste nannte 1999, 2010 und 14 — und unmittelbar darunter
   erzählte die Zeitleiste dieselben zwei Jahreszahlen noch
   einmal, diesmal mit Text. Zwei Abschnitte, eine Geschichte.

   Aufgelöst wurde die Dopplung zugunsten der Zeitleiste, weil
   nur sie den Zusammenhang trägt: die Leiste hatte Etiketten,
   die Zeitleiste hat Sätze und das Zitat. Die dritte Zahl (14)
   ist keine Geschichte, sondern Gegenwart — sie steht jetzt im
   Fuß desselben Abschnitts neben dem Zitat, mit unverändertem
   Wortlaut. Die Klassen __value und __label bleiben, weil sie
   dort weiterverwendet werden. */
.kh-about-timeline     { padding-block: clamp(48px, 4vw + 24px, 96px); }
.kh-about-values       { padding-block: clamp(48px, 4vw + 24px, 88px); }
.kh-about-service      { padding-block: clamp(48px, 4vw + 24px, 96px); }
/* Seit dem Entfall der Karte (Abschnitt 07b) traegt dieser
   Abschnitt nur noch Ueberschrift, zwei Saetze und einen Weg.
   Das Polster eines Kartenbereichs waere dafuer zu viel. */
.kh-about-locations    { padding-block: clamp(40px, 3vw + 16px, 64px); }
.kh-about-cta          { padding-block: clamp(56px, 5vw + 28px, 112px); }


/* ==========================================================
   01. KOPFBEREICH — ROTE MARKENFLAECHE MIT UEBERLAPPENDEM FOTO
   ==========================================================
   Der Abschnitt trägt zusätzlich kh-section--brand; Überschrift,
   Lead und Eyebrow bekommen ihre Farbrollen dadurch aus global.css.
   Pillenform des Eyebrows und Ringgeometrie stehen ebenfalls dort
   (Abschnitt 23).

   Die Besonderheit dieser Seite: das Shop-Foto läuft unten aus der
   roten Fläche heraus und liegt zur Hälfte auf dem weissen
   Abschnitt darunter. Der Kopf trägt deshalb overflow: visible —
   die Ringgeometrie ist dafür so bemessen, dass sie den Abschnitt
   nicht verlässt.
   ========================================================== */

.kh-about-hero {
  /* DAS FOTO LAEUFT NICHT MEHR AUS DEM ABSCHNITT HERAUS
     -----------------------------------------------------------------
     Vorher hing das Foto an der Unterkante der Rasterzeile und wurde um
     das Abschnittspolster plus 88px nach unten gezogen; es lag zur
     Haelfte auf dem weissen Abschnitt darunter. Gemessen bei 1440px
     begann es bei y=283 in einem 569px hohen Kopf und reichte darueber
     hinaus — der Kopf sah aus, als saecke das Bild ab, und unter ihm
     entstand im Einstieg ein leerer Streifen, der nur den Ueberlapp
     ausglich.

     Jetzt stehen Text und Bild auf einer gemeinsamen optischen Mitte.
     Der Ueberlapp entfaellt, das Ausgleichspolster im Einstieg
     ebenfalls.

     Damit kann der Abschnitt auch wieder beschneiden: overflow bleibt
     bei hidden aus global.css. Das Ringmotiv ist ohnehin so bemessen,
     dass es innerhalb bleibt — die Beschneidung ist jetzt nur noch ein
     Netz, kein Gestaltungsmittel. */

  /* Symmetrisches Polster: bei mittiger Ausrichtung traegt eine
     asymmetrische Fassung den Blick nach unten. */
  --kh-hero-pb: clamp(56px, 5vw + 28px, 112px);

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

     VORHER hing der Mittelpunkt an der Unterkante
     (calc(100% - 42px)). Nachgemessen bei 1440px: Mittelpunkt bei
     y=527, die Mitte des Textblocks liegt bei y=298 — also 229px zu
     tief. Links reichte das Motiv bis x=-17,5.

     ZUSAETZLICH, und hier gravierender: dieser Abschnitt traegt
     overflow: visible, damit das Foto unten überlappen darf. Das
     Motiv wurde deshalb NICHT beschnitten, sondern lief unten aus
     dem Abschnitt heraus — bei 1440px rund 190px weit in den
     folgenden Abschnitt hinein. Mit dem neuen Mittelpunkt bleibt es
     vollständig innerhalb: Radius 245px um y=296 ergibt 51 bis 541
     bei einer Kopfhöhe von 569.

     SENKRECHT: die Mitte des Textblocks liegt über alle
     Desktopbreiten bei 52,1 bis 52,6 Prozent der Kopfhöhe
     (1024 / 1280 / 1440 / 1920 gemessen). Ein Prozentwert genügt.

     WAAGERECHT: es haelt der MITTELPUNKT den Abstand zum linken Rand,
     nicht der ganze Kreis. Begruendung und Rechnung stehen in
     home.css bei derselben Stelle — kurz: der Zwischenraum links des
     Textes ist bei 1440px nur 162px breit, ein Kreis mit 250px Radius
     und 60px Rand haette seinen Mittelpunkt mitten im Text. Das
     Zeichen sitzt deshalb im Zwischenraum, das Wellenfeld laeuft nach
     links aus dem Bild.

     MASS: derselbe Wert wie auf der Startseite. Der Radius muss unter
     dem kleineren senkrechten Abstand bleiben (gemessen 228px bei
     1024, 273 bei 1440, 286 bei 1920); clamp ergibt 210 bis 270.
     Hier zaehlt das doppelt: overflow steht auf visible, ein zu
     grosses Feld wuerde nicht beschnitten, sondern liefe sichtbar in
     den naechsten Abschnitt. */
  --kh-radar-size: clamp(420px, 36vw, 540px);
  --kh-ring-cx: 20%;
  --kh-ring-cy: 52%;
  --kh-mark-size: clamp(36px, 3.6vw, 56px);

  /* KEINE KLARZONE MÖGLICH — WELLEN DURCHGEHEND WEICH
     Gemessen mit p6-klar: der Lead „Seit 1999 stehen wir …" beginnt
     schon bei 21,1 Prozent des Radarradius (1024px). Die Maske gibt
     erst ab 20 Prozent überhaupt etwas frei — es gibt hier also
     keinen Bereich, in dem eine scharfe Kante stehen könnte, ohne
     hinter dem Lead zu liegen.

     Statt den Text zu gefährden, läuft die Welle auf dieser Seite
     durchgehend mit 10 Prozent Deckkraft. Weiss auf dem so
     aufgehellten Grund erreicht 4,56:1 und bleibt über AA. Die
     Bewegung ist damit weicher als auf Startseite, Karriere und den
     Standortseiten — das ist die Folge der kurzen Kopfhöhe, nicht
     der Gestaltung. */
  /* Maske durchgehend offen, dafuer schwaechere Kante — Begruendung
     und Rechnung stehen in home.css an derselben Stelle. */
  --kh-radar-hell: .09;
  --kh-radar-klar: 85%;
}

/* DAS ZEICHEN BRAUCHT ZWISCHENRAUM — SIEHE home.css
   Hier beginnt der Text beim Containerrand plus 42px, der
   Zwischenraum ist also noch etwas enger als auf der Startseite:
   52px bei 1024, 82 bei 1280, 162 bei 1440, 402 bei 1920. Dieselbe
   Schwelle von 86em gilt deshalb auch hier. */
@media (min-width: 86em) {

  .kh-about-hero {
    --kh-mark-size: clamp(36px, calc((100vw - 1200px) / 2 - 60px), 56px);
    --kh-ring-cx: calc(clamp(60px, (100vw - 1200px) / 4, 120px) + var(--kh-mark-size) / 2);
  }
}

@media (max-width: 85.99em) {

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

.kh-about-hero .kh-about-hero__content { max-width: none; }

/* SCHRIFTGRAD MIT RÜCKSICHT AUF DAS LÄNGSTE WORT
   „Telekommunikation," ist in dieser Schrift rund 9,1-mal so breit
   wie der Schriftgrad. Der Grad ist so gewählt, dass das Wort von
   320px bis 1440px in jede Spaltenbreite passt; die global gesetzte
   Regel overflow-wrap: break-word wird dadurch nie ausgelöst. */
.kh-about-hero .kh-h1 .elementor-heading-title {
  font-size: clamp(1.625rem, .45rem + 3.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* ELEMENTOR-FALLE · Satzbreite
   Elementor setzt mit

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

   eine Regel der Gewichtung (0,4,0) auf jedes Widget. Eine Satzbreite
   am Widget selbst kommt dagegen nicht an. Sie gehört deshalb auf das
   innere Titelelement, das keine konkurrierende Regel hat. */
.kh-about-hero .kh-about-hero__lead .elementor-heading-title {
  max-width: 48ch;
  font-weight: var(--kh-font-weight-regular);
}

/* Mobil steht das Bild VOR dem Text: es erklärt in einer halben
   Sekunde, worum es geht. Auf dem Desktop trägt der Text. */
.kh-about-hero .kh-about-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-lg);
}

.kh-about-hero .kh-about-hero__media {
  order: -1;
  position: relative;
  z-index: 2;
}

/* Heller Rahmen und tiefer Schatten lösen das Foto vom roten Grund. */
.kh-about-hero .kh-about-hero__media .elementor-widget-image,
.kh-about-hero .kh-about-hero__media .kh-media {
  box-shadow:
      0 0 0 1px rgba(255, 255, 255, .22),
      0 28px 64px -24px rgba(0, 0, 0, .55);
}

@media (min-width: 62em) {

  /* 1,08 zu 1 statt 1,2 zu 1: das Foto ist der zweite Traeger des
     Kopfes und war mit 45 Prozent der Breite zu klein dafuer. Jetzt
     rund 48 Prozent — die Ueberschrift bleibt trotzdem dreizeilig und
     damit ruhig. */
  .kh-about-hero .kh-about-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 4.5vw, 80px);
  }

  .kh-about-hero .kh-about-hero__media { order: 0; }
}


/* ==========================================================
   01b. EINSTIEG — EDITORIAL STATT TEXTBLOCK
   ==========================================================
   Vorher: Überschrift und zwei Absätze in einer 760px schmalen
   Säule, mittig in der Seite, ohne Anker — der generischste
   Abschnitt der Seite.

   Jetzt ein Editorial-Split: die Überschrift steht als eigene
   Spalte links mit roter Auftaktlinie, der Fließtext läuft rechts
   über die größere Hälfte. Der Container gibt dafür seine schmale
   Begrenzung auf.
   ========================================================== */

/* Das Wasserzeichen unten in der Ueberschriftenspalte reicht ueber
   die Unterkante des Abschnitts hinaus. Gemessen bei 1440px: 73px
   in den Abschnitt darunter. Hier darf beschnitten werden — es
   ueberlappt seit dem Umbau des Kopfes nichts mehr. */
.kh-about-intro { overflow: hidden; }

@media (min-width: 62em) {

  .kh-about-intro > .kh-container {
    max-width: var(--kh-container-max);
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.32fr);
    gap: 0 clamp(40px, 5vw, 96px);
    align-items: start;
  }

  .kh-about-intro > .kh-container > .kh-h2 {
    position: relative;
    grid-column: 1;
    padding-top: var(--kh-space-md);
  }

  .kh-about-intro > .kh-container > .kh-h2::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 48px;
    block-size: 3px;
    background-color: var(--kh-color-primary-500);
  }

  .kh-about-intro > .kh-container > .kh-h2 .elementor-heading-title {
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.625rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    max-width: 13ch;
  }

  .kh-about-intro > .kh-container > .kh-prose { grid-column: 2; }

  /* RUHENDES MARKENZEICHEN IN DER LEEREN HAELFTE
     Unter der Ueberschrift stand bei 1440px ein 260px hoher leerer
     Streifen — die Spalte traegt nur drei Zeilen, der Fliesstext
     daneben das Doppelte. Statt den Text zu strecken, steht dort jetzt
     das Vodafone-Zeichen als sehr schwaches Wasserzeichen.

     Das ist genau der Fall, fuer den global.css 23.5 das Asset
     freigibt: helle Flaeche, geringe Deckkraft. Es beruehrt keine
     Zeile — es beginnt erst unterhalb der Ueberschrift. */
  .kh-about-intro > .kh-container > .kh-h2::after {
    content: "";
    position: absolute;
    z-index: 0;
    inline-size: clamp(120px, 12vw, 190px);
    aspect-ratio: 1 / 1;
    inset-inline-start: 0;
    inset-block-start: calc(100% + var(--kh-space-lg));
    background-image: url("../../../../uploads/2026/09/favicon.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .05;
    pointer-events: none;
  }

  .kh-about-intro > .kh-container > .kh-h2 .elementor-heading-title {
    position: relative;
    z-index: 1;
  }
}

/* DER ERSTE ABSATZ TRAEGT, DER ZWEITE ERKLAERT
   Zwei Absaetze in identischem Grad sind eine Textwand. Der erste
   bekommt den Lead-Grad und die dunklere Farbrolle, der zweite bleibt
   Fliesstext. Es aendert sich kein Wort — nur die Gewichtung.

   Warum nicht :first-of-type: Elementor liefert jedes Widget als div,
   die Auswahl nach Elementtyp trifft also das falsche Kind. Der
   Nachbarschaftsselektor trifft dagegen sicher den ZWEITEN. */
.kh-about-intro > .kh-container > .kh-prose p {
  font-size: var(--kh-text-lead);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-900);
}

.kh-about-intro > .kh-container > .kh-prose + .kh-prose p {
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

/* Eine Haarlinie zwischen den beiden Absaetzen statt eines
   Leerraums: der Wechsel der Tonlage wird dadurch sichtbar. */
.kh-about-intro > .kh-container > .kh-prose + .kh-prose {
  margin-block-start: var(--kh-space-lg);
  padding-block-start: var(--kh-space-lg);
  border-block-start: 1px solid var(--kh-color-line-200);
}


/* ==========================================================
   02. ZAHLEN / FAKTEN
   ==========================================================
   Vorher vier gleich grosse weisse Karten. Vier Wertepaare
   rechtfertigen keinen Kasten: als offene Reihe mit feinen
   Trennlinien lesen sie sich schneller.
   ========================================================== */

/* Vom Kartenblock blieben die beiden Textrollen uebrig: __value
   fuer die Zahl, __label fuer ihre Benennung. Beide tragen jetzt
   den Gegenwartsvermerk im Fuss der Zeitleiste (Abschnitt 03).
   Das Raster und die Karten darum sind entfallen — es gab nach
   dem Zusammenlegen kein Element mehr, das sie getragen haette. */
.kh-about-facts__value,
.kh-about-facts__value .elementor-heading-title {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-ink-900);
}

.kh-about-facts__label,
.kh-about-facts__label .elementor-heading-title {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-snug);
  color: var(--kh-color-ink-500);
}


/* ==========================================================
   03. ZEITLEISTE
   ==========================================================
   Bewusst ohne JavaScript: die Schiene ist der obere bzw. linke
   Rahmen der Einträge selbst. Jeder Eintrag trägt seine Jahreszahl
   als Überschrift, die Zeitleiste bleibt also auch dann
   verständlich, wenn die Linie nicht wahrgenommen wird.

   Ab Tablet wird daraus eine durchgehende Schiene: die Lücke
   zwischen den Spalten wird überbrückt und jeder Eintrag bekommt
   einen roten Punkt auf der Linie. Aus drei Strichen wird eine
   Zeitleiste.

   Die Jahreszahl ist der Blickfang des Abschnitts — gross gesetzt
   statt als Hintergrundtypografie. Eine Jahreszahl im Hintergrund
   hätte ein zweites, rein dekoratives Textelement gebraucht, das
   Vorlesewerkzeuge ein zweites Mal ansagen; der Gewinn wiegt das
   nicht auf.
   ========================================================== */

.kh-about-timeline .kh-about-timeline__list {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-lg);
  padding: 0;
}

.kh-about-timeline .kh-about-timeline__list > * {
  position: relative;
  z-index: 1;
}

/* EINE SCHIENE STATT DREI STRICHEN
   -------------------------------------------------------------
   Vorher war die Schiene der obere bzw. linke Rahmen JEDES
   Eintrags, dazu ein Brueckenstueck ueber jede Spaltenluecke.
   Fuer eine durchlaufende Fuellung ist das die falsche Grundlage:
   sie waere in Stuecken gelaufen.

   Jetzt tragen zwei Pseudo-Elemente der Liste die Schiene: eines
   grau in voller Laenge, eines rot darueber. Gefuellt wird nur das
   rote — und zwar durch nichts als scaleX. Kein Verlauf, keine
   Glanzkante, kein zweites wanderndes Element. */
.kh-about-timeline .kh-about-timeline__list::before,
.kh-about-timeline .kh-about-timeline__list::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* Mobil: senkrechte Schiene links neben den Eintraegen. */
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 2px;
}

.kh-about-timeline .kh-about-timeline__list::before {
  background-color: var(--kh-color-line-200);
}

/* DIE FUELLUNG
   scaleY mobil, scaleX ab Tablet. transform faellt in die
   Compositor-Phase — es wird nichts neu gelayoutet, die Bewegung
   laeuft deshalb ohne Ruckeln.

   Die Kurve beginnt fast gerade und laeuft am Ende weich aus:
   praezise im Ansatz, ruhig im Auslauf. 1,4 Sekunden auf die
   ganze Strecke — langsam genug, um als Bewegung gelesen zu
   werden, kurz genug, um nicht zu warten. */
.kh-about-timeline .kh-about-timeline__list::after {
  background-color: var(--kh-color-primary-500);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1400ms cubic-bezier(.32, .08, .24, 1);
}

.kh-about-timeline .kh-about-timeline__list.is-inview::after {
  transform: scaleY(1);
}

.kh-about-timeline .kh-about-timeline__item {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-2xs);
  padding: 0 0 0 var(--kh-space-lg);
  border: 0;
}

.kh-about-timeline__year,
.kh-about-timeline__year .elementor-heading-title {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  /* Die einzige rote Schriftstelle der Sektion. Ab dieser Grösse
     trägt --kh-color-primary-500; der Kontrastwert für rote Schrift
     unter 24px wird hier nicht mehr gebraucht. */
  color: var(--kh-color-primary-500);
}

.kh-about-timeline__title,
.kh-about-timeline__title .elementor-heading-title {
  margin: var(--kh-space-2xs) 0 0;
  font-size: 1.0625rem;
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  color: var(--kh-color-ink-900);
}

.kh-about-timeline__text,
.kh-about-timeline__text p {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1.55;
  color: var(--kh-color-ink-500);
}

/* Satzbreite am inneren Element — siehe Elementor-Falle oben. */
.kh-about-timeline__text .elementor-heading-title { max-width: 42ch; }

@media (min-width: 48em) {

  .kh-about-timeline .kh-about-timeline__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 72px);
  }

  /* DIESELBE ZÄHLUNG WIE BEIM FAKTENRASTER
     Der Eintrag 2007 ist am 14.10.2026 mit dem Service Point
     entfallen. Drei feste Spalten für zwei Einträge liessen
     rechts 340px leer stehen — und die Schiene darüber lief
     sichtbar ins Nichts weiter, weil sie über die ganze Liste
     geht. Zwei Einträge, zwei Spalten. */
  .kh-about-timeline .kh-about-timeline__list:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Die Schiene legt sich waagerecht ueber die ganze Liste — auch
     ueber die Spaltenluecken. Das Brueckenstueck von frueher
     entfaellt damit ersatzlos. */
  .kh-about-timeline .kh-about-timeline__list::before,
  .kh-about-timeline .kh-about-timeline__list::after {
    inset-block: 0 auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: 2px;
  }

  .kh-about-timeline .kh-about-timeline__list::after {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  .kh-about-timeline .kh-about-timeline__list.is-inview::after {
    transform: scaleX(1);
  }

  .kh-about-timeline .kh-about-timeline__item {
    position: relative;
    padding: var(--kh-space-lg) 0 0;
    border: 0;
  }

  /* DER PUNKT IST JETZT EIN RING, KEINE SCHEIBE
     Vorher: rote Scheibe mit 4px weissem Schatten ringsum. Auf der
     durchlaufenden Fuellung haette dieser weisse Ring die rote
     Linie an jedem Punkt aufgerissen — drei Luecken in einem
     Strich, der gerade sauber durchlaufen soll.

     Jetzt ein weisser Kern mit roter Kante. Er bleibt vor UND nach
     der Fuellung sichtbar und unterbricht die Linie nicht. */
  .kh-about-timeline .kh-about-timeline__item::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset-block-start: -5px;
    inset-inline-start: 0;
    inline-size: 12px;
    block-size: 12px;
    border-radius: var(--kh-radius-circle);
    background-color: var(--kh-color-surface-000);
    border: 3px solid var(--kh-color-primary-500);
  }
}

/* ENTFALLEN: DER WANDERNDE LICHTSCHEIN
   -------------------------------------------------------------
   Hier lief ein Verlauf mit weichen Enden alle 16 Sekunden ueber
   die Schiene — ein Effekt UEBER dem Strich, nicht der Strich
   selbst. Er endete nie, erklaerte nichts und zog bei jedem
   Durchlauf den Blick von den Jahreszahlen ab.

   An seine Stelle tritt die Fuellung des Strichs selbst (siehe
   oben): einmalig, von links nach rechts, ohne Auslaeufer und
   ohne Leuchtenden. Ausgeloest wird sie von main.js 14, sobald
   die Leiste im Bild steht — der einzige Zweck des Moduls ist
   eine Klasse, die Bewegung liegt vollstaendig im CSS. */

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

  /* Kein Uebergang und kein Warten: die Schiene steht sofort
     gefuellt da. Die Aussage bleibt, die Bewegung entfaellt. */
  .kh-about-timeline .kh-about-timeline__list::after {
    transition: none;
    transform: none;
  }
}


/* ==========================================================
   04. HISTORISCHES ZITAT
   ==========================================================
   Ein Satz aus der Unternehmensgeschichte, als solcher
   gekennzeichnet. Kein Claim der Gegenwart — die Zuordnung steht
   im Text darunter. Die rote Kante macht ihn zum Statement, ohne
   ihn lauter zu machen.
   ========================================================== */

.kh-about-quote {
  padding-inline-start: var(--kh-space-md);
  border-inline-start: 3px solid var(--kh-color-primary-500);
}

/* DER FUSS DER GESCHICHTE
   -------------------------------------------------------------
   Das Zitat stand hier allein und las sich wie ein vierter
   Zeitleisteneintrag; die Haarlinie darueber trennte es davon ab.
   Diese Haarlinie traegt jetzt nicht mehr das Zitat, sondern den
   ganzen Fuss des Abschnitts — denn dort stehen seit dem
   Zusammenlegen zwei Dinge: links der Leitgedanke von 2010,
   rechts der Stand von heute.

   Mobil untereinander, das Zitat zuerst: es ist der Schlusspunkt
   der Geschichte, die Zahl nur ihr heutiges Ergebnis. */
.kh-about-timeline .kh-about-history__foot {
  display: grid;
  gap: var(--kh-space-lg);
  padding: var(--kh-space-lg) 0 0;
  margin-block-start: var(--kh-space-sm);
  border-block-start: 1px solid var(--kh-color-line-200);
}

@media (min-width: 48em) {

  .kh-about-timeline .kh-about-history__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(32px, 5vw, 96px);
    align-items: end;
    padding-block-start: var(--kh-space-xl);
    margin-block-start: var(--kh-space-lg);
  }

  .kh-about-quote .kh-about-quote__text p { max-width: 34ch; }
}

/* DER STAND VON HEUTE
   -------------------------------------------------------------
   Die 14 war die letzte Karte der entfallenen Faktenleiste und
   dort so gross gesetzt wie drei Jahreszahlen daneben. Als
   einzelne Zahl neben einem Zitat braucht sie diese Groesse
   nicht: eine Stufe kleiner, rechts gegen den Satzanfang des
   Zitats gesetzt. Eine Angabe, kein Schlagwort — mobil wuerde
   sie sonst den Abschnitt beherrschen.

   Rot bleibt sie: sie ist die einzige Zahl der Seite, die die
   Gegenwart beschreibt, und ordnet sich mit demselben Rot den
   Jahreszahlen der Zeitleiste zu. */
.kh-about-history__now {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-3xs);
  padding: 0;
}

.kh-about-history__now .kh-about-facts__value,
.kh-about-history__now .kh-about-facts__value .elementor-heading-title {
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  color: var(--kh-color-primary-500);
}

.kh-about-history__now .kh-about-facts__label .elementor-heading-title {
  max-width: 18ch;
}

@media (min-width: 48em) {

  .kh-about-history__now {
    align-items: flex-end;
    text-align: right;
  }
}

.kh-about-quote .kh-about-quote__text,
.kh-about-quote .kh-about-quote__text p {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
}

.kh-about-quote .kh-about-quote__source,
.kh-about-quote .kh-about-quote__source p {
  margin: var(--kh-space-xs) 0 0;
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}


/* ==========================================================
   05. WAS UNS AUSMACHT — EINE LEITAUSSAGE UND IHRE BELEGE
   ==========================================================
   Hier standen zuletzt vier gleich breite Spalten mit kraeftiger
   Oberkante — gestalterisch sauber, aber in der Aussage flach:
   vier Punkte, alle gleich laut, keiner zuerst. Genau dieselbe
   Form traegt auf „Karriere" die Themenliste; zwei Seiten mit
   derselben Vierteilung werden verwechselbar.

   Jetzt eine Leitaussage und drei Belege. „Persoenliche
   Beratung" steht als erste und groesste Aussage an einer
   kraeftigen Kante, die drei uebrigen als Register darunter bzw.
   daneben: Benennung links, Erlaeuterung rechts, Haarlinie
   dazwischen. Kein Wort aendert sich, nur die Rangfolge wird
   sichtbar.

   Das Register ist bewusst ein anderes Mittel als die drei
   bereits vergebenen dieser Seite (rote Schiene, Zahlenfuss,
   Bildkarte) und ein anderes als die waagerechte Themenliste
   auf „Karriere".
   ========================================================== */

.kh-about-values .kh-about-values__ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

/* Die Eintraege tragen im Markup weiterhin kh-card: das Raster
   wurde umgebaut, nicht die Inhalte. Die Kartenhuelle wird hier
   abgeraeumt, damit daraus Register-Zeilen werden koennen. */
.kh-about-values .kh-about-values__ledger > .kh-card {
  position: relative;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* DIE LEITAUSSAGE
   Groesser gesetzt und an einer 2px-Kante — dasselbe
   Ordnungsmittel wie zuvor, aber nur noch EINMAL verwendet.
   Dadurch wird es wieder zur Hervorhebung. */
.kh-about-values .kh-about-values__ledger > .kh-card:first-child {
  padding-block-end: var(--kh-space-lg);
  border-block-end: 2px solid var(--kh-color-ink-900);
}

.kh-about-values .kh-about-values__ledger > .kh-card:first-child .kh-card__title .elementor-heading-title {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.kh-about-values .kh-about-values__ledger > .kh-card:first-child .kh-card__text p {
  font-size: var(--kh-text-base);
  line-height: var(--kh-leading-normal);
  max-width: 46ch;
}

/* DIE BELEGE
   Haarlinie als Zeilentrennung, letzte Zeile ohne — eine
   Schlusslinie waere eine zweite Kante neben dem
   Abschnittsende. */
.kh-about-values .kh-about-values__ledger > .kh-card:not(:first-child) {
  padding-block: var(--kh-space-md);
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-about-values .kh-about-values__ledger > .kh-card:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.kh-about-values .kh-card__title,
.kh-about-values .kh-card__title .elementor-heading-title {
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--kh-color-ink-900);
  margin: 0 0 var(--kh-space-2xs);
}

.kh-about-values .kh-card__text,
.kh-about-values .kh-card__text p {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1.55;
  color: var(--kh-color-ink-700);
}

/* Ab Tablet bekommt jede Belegzeile zwei Spalten: Benennung
   links, Erlaeuterung rechts. Erst dadurch ist es ein Register
   und keine Folge kurzer Textblöcke.

   display: grid muss hier ausdruecklich stehen — die Eintraege
   tragen kh-stack und waeren sonst weiterhin untereinander
   gestapelt. Aus demselben Grund werden beide Achsen des
   Abstands neu gesetzt: kh-stack bringt ein gap mit. */
@media (min-width: 48em) {

  .kh-about-values .kh-about-values__ledger > .kh-card:not(:first-child) {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: clamp(24px, 2.5vw, 48px);
    row-gap: var(--kh-space-2xs);
    align-items: baseline;
  }
}

/* Ab Desktop steht die Leitaussage neben dem Register statt
   darueber: die Kante wandert von der Unterkante an die linke
   Seite und der Abschnitt wird um die Hoehe der Leitaussage
   kuerzer. */
@media (min-width: 62em) {

  .kh-about-values .kh-about-values__ledger {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }

  .kh-about-values .kh-about-values__ledger > .kh-card:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
    padding-block-end: 0;
    padding-inline-start: var(--kh-space-lg);
    border-block-end: 0;
    border-inline-start: 2px solid var(--kh-color-ink-900);
  }

  .kh-about-values .kh-about-values__ledger > .kh-card:not(:first-child) {
    grid-column: 2;
  }

  /* Die erste Belegzeile schliesst oben an die Leitaussage an —
     ein Polster darueber wuerde sie gegen deren Oberkante
     versetzen. */
  .kh-about-values .kh-about-values__ledger > .kh-card:nth-child(2) {
    padding-block-start: 0;
  }
}


/* ==========================================================
   06. BERATUNG · Text und Bild
   ========================================================== */

/* 55/45 statt halbe/halbe — die Textspalte bleibt lesbar schmal,
   das Bild bekommt trotzdem Fläche. */
@media (min-width: 62em) {

  .kh-about-service .kh-grid--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
  }
}

.kh-about-service .kh-about-service__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-100);
}

.kh-about-service .kh-about-service__media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform var(--kh-transition-slow) var(--kh-ease-standard);
}

.kh-about-service .kh-about-service__media:hover img { transform: scale(1.03); }

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

  .kh-about-service .kh-about-service__media img { transition: none; }
  .kh-about-service .kh-about-service__media:hover img { transform: none; }
}

/* Themen-Chips: ruhige Umrisse, keine gefüllten Farbflächen. Sie benennen
   ausschliesslich Bereiche, die auf dieser Website tatsächlich angeboten
   werden — die Liste stammt aus der Leistungsübersicht der Startseite. */
.kh-about-service .kh-about-chips {
  display: flex;
  /* flex-direction ausdrücklich: Elementor stellt seine Container über
     .e-con.e-flex auf column. Ohne diese Zeile stünde jeder Chip als
     vollbreite Zeile untereinander statt nebeneinander. */
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--kh-space-xs);
  padding: 0;
}

/* Und aus demselben Grund: Elementor gibt Widgets in einem Flex-Container die
   volle Breite. Ein Chip muss auf seine Inhaltsbreite schrumpfen. */
.kh-about-service .kh-about-chips > * {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.kh-about-chips .kh-about-chips__item,
.kh-about-chips .kh-about-chips__item .elementor-heading-title {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1;
  color: var(--kh-color-ink-700);
}

.kh-about-chips .kh-about-chips__item {
  display: inline-flex;
  align-items: center;
  padding: var(--kh-space-xs) var(--kh-space-sm);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-pill);
  width: auto;
}


/* ==========================================================
   07. ENTFALLEN AM 14.10.2026 · SERVICE POINT
   ==========================================================
   Hier stand der Abschnitt „Service, der weitergeht" mit Badge,
   Karte, roter Oberkante, Wasserzeichen und dem zweigeteilten
   Absatz — rund 140 Zeilen für .kh-about-servicepoint und seine
   fünf Unterklassen.

   Kahraman betreibt keinen Service Point mehr. Der Abschnitt ist
   aus dem Inhalt von „Über uns" entfernt, ebenso der Fakten-
   eintrag „Start des Service Points" und der Zeitleisteneintrag
   2007. Gegengeprüft: keine veröffentlichte Seite verwendet
   diese Klassen noch. Nachweislich tot, deshalb entfernt.
   ========================================================== */

/* ==========================================================
   07b. STANDORTE — DIE KARTE ALS EIGENER BEREICH
   ==========================================================
   Vorher stand die Karte in einem 760px schmalen Container,
   zusammen mit Ueberschrift, Text und Schaltflaeche in einer
   Saeule. Auf 1440px Bildschirm war sie damit 695px breit —
   bei 560px Hoehe fast quadratisch und optisch ein angehaengtes
   Modul, kein Bereich.

   Jetzt traegt der Abschnitt die volle Containerbreite. Text
   und Ueberschrift stehen als zweispaltiger Kopf darueber, die
   Karte laeuft ueber die ganze Breite und bekommt mit Radius,
   Kante und Schatten denselben Kartencharakter wie die
   Faktengruppe und die Servicekarte.
   ========================================================== */

.kh-about-locations .kh-about-locations__head { display: grid; gap: var(--kh-space-sm); }

/* ENTFALLEN 20.10.2026: DIE KARTE
   -------------------------------------------------------------
   Hier lief [kh_locations_map] ueber die ganze Containerbreite,
   520px hoch und ab 90em 580px. Die Seite „Unsere Filialen"
   zeigt dieselbe Karte mit Suche und Liste daneben, und genau
   dorthin fuehrt die Schaltflaeche dieses Abschnitts. Auf „Ueber
   uns" trug sie keine eigene Aussage, kostete aber rund 560px
   Hoehe — und die Standorte selbst kann man in ihr nicht
   erreichen, weil sie hier ohne Finder stand.

   Damit sind .kh-about-locations__map, .kh-about-map und
   .kh-about-map__canvas auf dieser Seite ohne Trägerelement und
   wurden entfernt. Die Komponente selbst bleibt unberuehrt; sie
   gehoert dem Locations-Plugin und wird auf /shops/ gebraucht.

   Was bleibt, ist der zweispaltige Kopf und der Weg zu den
   Shops: ein kompakter Abschnitt statt eines Kartenbereichs. */
@media (min-width: 62em) {

  .kh-about-locations .kh-about-locations__head {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.32fr);
    gap: 0 clamp(40px, 5vw, 96px);
    align-items: start;
  }

  .kh-about-locations .kh-about-locations__head > .kh-h2 {
    position: relative;
    grid-column: 1;
    padding-top: var(--kh-space-md);
  }

  .kh-about-locations .kh-about-locations__head > .kh-h2::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 48px;
    block-size: 3px;
    background-color: var(--kh-color-primary-500);
  }

  .kh-about-locations .kh-about-locations__head > .kh-h2 .elementor-heading-title {
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.625rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    max-width: 12ch;
  }

  .kh-about-locations .kh-about-locations__head > .kh-text { grid-column: 2; }

  /* Ohne die Karte bleibt der Abschnitt dreiteilig: Ueberschrift
     mit roter Auftaktlinie links, Text rechts, der Weg zu den
     Shops darunter an derselben Kante wie die Ueberschrift. Die
     Schaltflaeche steht damit am Anfang der Leserichtung und
     nicht als vierter Block in der Flaeche. */
}


/* ==========================================================
   08. ABSCHLUSS
   ==========================================================
   Heller Abschluss mit roter Auftaktlinie. Bewusst NICHT rot:
   der Kopf trägt bereits das Rot der Seite.
   ========================================================== */

/* Die Satzbreite gehört auf Titel und Lead, NICHT auf den
   Kopfbereich: der trägt auch die Schaltflächenreihe. */
.kh-about-cta .kh-section-header {
  position: relative;
  padding-top: 0;
}

.kh-about-cta .kh-section-header__title .elementor-heading-title { max-width: 20ch; }
.kh-about-cta .kh-section-header__lead .elementor-heading-title  { max-width: 46ch; }

/* ENTFALLEN: DER ROTE STRICH IN DER MITTE
   -------------------------------------------------------------
   Er stammte aus der Zeit, als dieser Abschluss ein zentrierter
   heller Block war: eine Auftaktlinie ueber mittig gesetztem Text.
   Seit global.css 24 steht der Abschluss als dunkles Panel mit
   linksbuendigem Satz und roter Kante an der linken Panelkante.

   Die Linie stand dadurch frei in der Flaeche — mittig ueber einem
   Text, der links beginnt, und mit 48px Laenge zu kurz, um als
   Trennung gelesen zu werden. Gemessen bei 1440px: sie lag bei
   x=696, waehrend der Text bei x=189 anfaengt. Ein Rest, kein
   Gestaltungsmittel. Die rote Kante des Panels uebernimmt ihre
   Aufgabe vollstaendig. */
.kh-about-cta .kh-section-header::before { content: none; }


/* --- 08.1 Vodafone-Zeichen im Ringmotiv -------------------

   Dieselbe Logik wie auf der Startseite (home.css 10.1):
   Zeichen und Ringe liegen auf EINEM Element, damit sie
   konzentrisch sind, und dieses Element steht still. Das
   drehende Ringmotiv des Containers wird dafuer abgeschaltet —
   ein mitdrehendes Markenzeichen kommt nicht in Frage.

   Das Zeichen steht voll deckend. Abgeblendet wuerde aus seiner
   deckend weissen Innenflaeche ein grauer Fleck; ausserdem wird
   ein Markenzeichen nicht in der Deckkraft verstellt. Dafuer ist
   es klein und sitzt weit rechts, ausserhalb der Textspalte. */

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

.kh-about-cta.kh-cta-panel .kh-about-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%);
}

/* GEMESSEN UND KORRIGIERT · DAS ZEICHEN LAG AUF DER SCHALTFLAECHE
   Die beiden Schaltflaechen standen nebeneinander und belegten die
   Handlungsspalte bis 83px vor die rechte Panelkante. Genau dort
   sitzt das Zeichen — es lag bei 1440px ueber „Kontakt aufnehmen".

   Untereinander gestellt braucht die Spalte nur noch die Breite
   der breiteren Schaltflaeche. Das schafft dem Motiv Platz und
   ordnet die beiden Wege zugleich: der primaere steht oben, der
   zweite darunter — statt gleichrangig nebeneinander. */
@media (min-width: 62em) {

  .kh-about-cta .kh-section-header__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kh-space-sm);
  }

  .kh-about-cta .kh-section-header__actions > * { width: auto; }
}

/* --- 08.2 Der dritte Weg: Karriere -------------------------

   „Ueber uns" ist die Seite, auf der jemand nach dem Unternehmen
   sucht — und von hier aus fuehrte bisher kein einziger Weg zu
   „Karriere". Das ist jetzt der dritte Weg dieses Abschlusses.

   Er ist ausdruecklich nicht gleichrangig: Kunden sind die
   Mehrheit der Leser, Bewerber die Ausnahme. Deshalb keine
   dritte Schaltflaeche im Block, sondern ein stiller Verweis
   unter den beiden Hauptwegen, abgesetzt durch eine Haarlinie
   in der Panelfarbe. Die Rangfolge primaer / sekundaer /
   verweisend ist damit auch ohne Farbunterschied lesbar. */
.kh-about-cta .kh-about-cta__career {
  padding-block-start: var(--kh-space-sm);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
}

/* Die Haarlinie laeuft ueber die Breite des Verweises selbst,
   nicht ueber die Handlungsspalte: ueber die ganze Spalte
   gezogen (align-self: stretch) wuerde sie ab Desktop die volle
   Panelbreite annehmen — die Spalte hat dort keine eigene
   Breite, sie richtet sich nur an ihrem linken Rand aus. */

.kh-about-cta .kh-about-cta__mark .elementor-widget-container { display: contents; }

.kh-about-cta .kh-about-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 ueber
   die ganze Breite. Jede Stelle, an der das Zeichen vollstaendig
   ins Panel passt, ist dann von Text belegt — und angeschnitten
   darf ein Markenzeichen nicht stehen. Die Ringe bleiben; sie
   sind keine Marke und duerfen beschnitten werden. */
@media (max-width: 61.99em) {

  .kh-about-cta.kh-cta-panel .kh-about-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-about-cta .kh-about-cta__mark-shape { display: none; }
}

.kh-about-cta .kh-section-header__title {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}


/* ==========================================================
   09. FOKUS — hier bewusst NICHTS
   --------------------------------------------------------------------------
   Diese Datei enthielt bis zum Gestaltungsdurchgang eine eigene
   Fokusregel für die Schaltflächen zweier Sektionen, mit dem Vermerk,
   die saubere Lösung gehöre nach global.css. Das ist erledigt:

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

   steht global und gilt für jede Schaltfläche der Website — auch für
   solche ohne kh-button-wrap. Die Regel hier war toter Code und
   wurde entfernt.
   ========================================================== */