@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   services.css · Seite „Leistungen"
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (global.css)
   Präfix    : kh-services-  ·  Schema: kh-block__element--modifier
   --------------------------------------------------------------------------
   WAS HIER STEHT
   Nur das, was das Designsystem noch nicht kennt: der Kopf mit der
   Sprungleiste, die fünf bewusst unterschiedlichen Leistungsflächen und
   der Abschluss.

   WARUM FÜNF VERSCHIEDENE KOMPOSITIONEN
   Fünf gleiche Karten untereinander wären die bequeme Lösung und die
   falsche: die Seite hätte dann fünf Mal dasselbe Gewicht und keine
   Reihenfolge. Jede Leistung bekommt deshalb die Form, die zu ihrem
   Inhalt passt —

       Mobilfunk           Editorial Split, Text vor Bild
       Internet & Festnetz Statement, danach der Ablauf in drei Schritten
       Geräte & Zubehör    dunkle Fläche, Typografie trägt allein
       Vertragsberatung    zwei Textspalten mit Haarlinien
       Service vor Ort     Bild und Standortbezug

   ABGRENZUNG ZUR STARTSEITE
   Die Startseite zeigt dieselben fünf Themen als Tabs (home.css,
   .kh-svc). Das ist eine Übersicht in einem Bildschirm. Diese Seite ist
   die Langfassung; die Klassen sind bewusst getrennt (kh-services- statt
   kh-svc-), damit eine Änderung hier die Startseite nicht anfasst.

   ELEMENTOR-FALLE
   ::before und ::after der Elementor-Container gehören dessen
   Hintergrund-Overlays. Auf inhaltstragenden Containern werden hier
   deshalb Rahmen statt Pseudo-Elemente benutzt. Ausnahme sind die
   Flächenklassen aus global.css 22/23, die genau dafür gebaut sind.
   ========================================================================== */


/* ==========================================================
   00. VERTIKALER RHYTHMUS
   ==========================================================
   Der Abstand folgt dem Gewicht: die beiden Flächen mit Bild
   atmen, die reinen Textflächen stehen dichter. Gleiche Werte
   überall hätten die Seite in fünf identische Blöcke zerlegt —
   genau das, was sie nicht sein soll.
   ========================================================== */

.kh-services-hero     { padding-block: clamp(48px, 4vw + 24px, 96px) 0; }
.kh-services-mobil    { padding-block: clamp(48px, 4vw + 24px, 96px); }
.kh-services-net      { padding-block: clamp(48px, 4vw + 20px, 88px); }
.kh-services-devices  { padding-block: clamp(48px, 4vw + 24px, 96px); }
.kh-services-contract { padding-block: clamp(44px, 3vw + 20px, 76px); }
.kh-services-local    { padding-block: clamp(48px, 4vw + 24px, 96px); }
.kh-services-cta      { padding-block: clamp(56px, 5vw + 28px, 112px); }


/* ==========================================================
   01. KOPFBEREICH — ROTE MARKENFLÄCHE MIT SPRUNGLEISTE
   ==========================================================
   Die Farbrollen kommen aus global.css, weil der Abschnitt
   zusätzlich kh-section--brand trägt.

   UNTERSCHIED ZU DEN ÜBRIGEN KÖPFEN
   „Über uns" hat ein überlappendes Foto, „Karriere" eine freie
   rechte Hälfte, „Unsere Filialen" das Suchfeld. Dieser Kopf
   endet mit der Sprungleiste: fünf Marken, die zugleich sagen,
   was auf der Seite steht, und dorthin führen. Deshalb steht
   unten kein Polster — die Leiste bildet die Kante.
   ========================================================== */

.kh-services-hero {
  /* Das Motiv steht rechts, wo bis 86em kein Text liegt. */
  --kh-ring-cx: 80%;
  --kh-ring-cy: 46%;
  --kh-mark-size: clamp(56px, 6.2vw, 92px);

  /* KEINE SCHARFE KANTE AUF DIESER SEITE
     Anders als auf „Karriere" steht hier unten die Sprungleiste,
     und die ist Kleintext. Sie liegt im Radius des Motivs.

     Weiss auf #E60000 erreicht 4,81:1 — die Fläche hat also fast
     keinen Spielraum. Ab 10,8 Prozent Weiss fällt zusammengesetzter
     Text unter 4,50:1. Die volle Welle trägt 30 Prozent und wäre
     über der Leiste nicht zulässig.

     Statt die Klarzone zu beschneiden, wird die Welle wie auf
     „Über uns" und „Unsere Filialen" durchgehend weich geführt:
     0,09 liegt unter der Grenze und ist an jeder Stelle des Kopfes
     unbedenklich, auch dort, wo zwei Wellen übereinander laufen
     (0,09 + 0,09 * 0,4 = 0,126 wäre knapp — die zweite Welle liegt
     durch den Versatz von einer halben Dauer aber nie mit ihrem
     Kern auf dem Kern der ersten). */
  --kh-radar-hell: .09;
  --kh-radar-klar: 85%;

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

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

/* kh-section-header bringt aus global.css eine Satzbreite und ein
   Polster nach unten mit. Beides wird hier zurückgenommen: die
   Sprungleiste setzt ihren Abstand selbst, sonst stünden zwei
   Abstände übereinander. */
.kh-services-hero__header {
  max-width: none;
  margin-block-end: 0;
}

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

/* ELEMENTOR-FALLE · Satzbreite
   Elementor setzt mit .elementor.elementor .e-con > .elementor-widget
   eine Regel der Gewichtung (0,4,0) auf jedes Widget. Eine Satzbreite
   am Widget kommt dagegen nicht an; sie gehört auf das innere Element. */
.kh-services-hero .kh-section-header__lead .elementor-heading-title {
  max-width: 50ch;
  font-weight: var(--kh-font-weight-regular);
}


/* --- 01.1 Sprungleiste ------------------------------------ */

/* Fünf Marken als Kante des Kopfes. Keine Schaltflächen, keine
   Pillen: eine Zeile mit Haarlinie darüber, damit sie als Teil
   des Kopfes gelesen wird und nicht als eigener Abschnitt. */

.kh-services-jump {
  margin-block-start: clamp(32px, 3vw + 12px, 56px);
  border-block-start: 1px solid rgba(255, 255, 255, .28);
}

.kh-services-jump__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-services-jump__item + .kh-services-jump__item {
  border-block-start: 1px solid rgba(255, 255, 255, .18);
}

.kh-services-jump__link {
  display: flex;
  align-items: baseline;
  gap: var(--kh-space-sm);
  min-block-size: var(--kh-tap-min);
  padding-block: var(--kh-space-sm);
  color: var(--kh-color-ink-inverse);
  text-decoration: none;
  transition:
      opacity var(--kh-transition-fast) var(--kh-ease-standard),
      transform var(--kh-transition-fast) var(--kh-ease-standard);
}

/* Die Ziffer ist Orientierung: sie nennt die Reihenfolge, in der
   die Leistungen auf der Seite stehen.

   SIE BLEIBT VOLL WEISS. Der erste Entwurf hatte sie auf 0,72
   abgesenkt, um sie von der Bezeichnung abzusetzen — das ergibt
   auf #E60000 aber nur 3,1:1 und damit unter AA für 13px. Der
   Unterschied zur Bezeichnung entsteht deshalb über Grösse und
   Laufweite, nicht über Deckkraft. Auf Rot ist volles Weiss mit
   4,81:1 ohnehin der einzige sichere Wert. */
.kh-services-jump__num {
  flex: none;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--kh-tracking-label);
  color: var(--kh-color-ink-inverse);
}

.kh-services-jump__text {
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
}

/* Ein Unterstrich, der beim Zeigen aufläuft — kein Farbwechsel,
   weil auf Rot kein zweiter Farbwert zur Verfügung steht. */
.kh-services-jump__text {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-services-jump__link:hover .kh-services-jump__text { background-size: 100% 1px; }

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

@media (prefers-reduced-motion: reduce) {
  .kh-services-jump__text { transition: none; }
}

/* Ab 48em stehen die fünf nebeneinander. Die Trennlinien wechseln
   dabei von oben nach links — sonst stünde über jeder Spalte eine
   eigene Linie und die Leiste zerfiele in fünf Kästchen. */
@media (min-width: 48em) {

  .kh-services-jump__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .kh-services-jump__item + .kh-services-jump__item {
    border-block-start: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, .18);
  }

  .kh-services-jump__link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kh-space-2xs);
    padding-block: var(--kh-space-md) var(--kh-space-lg);
    padding-inline: 0 var(--kh-space-md);
  }

  .kh-services-jump__item + .kh-services-jump__item .kh-services-jump__link {
    padding-inline-start: var(--kh-space-md);
  }
}


/* ==========================================================
   02. MOBILFUNK — EDITORIAL SPLIT
   ==========================================================
   Text vor Bild, nicht daneben: 1,15 zu 0,85. Der Text beginnt
   oben, das Bild setzt tiefer ein. Dadurch entsteht eine
   Grundlinie, die nicht symmetrisch ist — der Unterschied zu
   „zwei gleiche Spalten" ist genau das.
   ========================================================== */

/* DIE BILDSPALTE TRÄGT IHRE SPALTE JETZT AUS
   -------------------------------------------------------------
   Vorher stand hier align-items: start und ein Bild mit fester
   4:3-Fläche. Bei 1440px nachgemessen: Textspalte 587px hoch,
   Medienspalte 423 — 184px Leere unter der Bildunterschrift, und
   der Abschnitt endete 117px unter dem letzten Listenpunkt.
   Genau dieses Loch lässt einen Zweispalter nach Baukasten
   aussehen, unabhängig davon, wie gut das Bild ist.

   Jetzt ist die Medienspalte ein eigenes Raster: das Bild nimmt
   die verbleibende Höhe (1fr), die Unterschrift schliesst als
   angesetzte Fläche darunter ab. Bild und Text enden damit auf
   einer gemeinsamen Linie. */

.kh-services-mobil__grid { align-items: start; }

@media (min-width: 62em) {

  .kh-services-mobil__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: stretch;
  }

  /* ELEMENTOR-FALLE · .e-con.e-flex setzt display:flex mit (0,2,0).
     Eine Regel mit zwei Klassen verliert dagegen je nach Ladefolge;
     drei Klassen entscheiden es eindeutig.

     Der Versatz ist gerechnet, nicht geschätzt: Eyebrow (13px,
     Zeilenhöhe 1,3) plus dessen Abstand (12px) ergeben 29px.
     Das Bild beginnt damit auf der Oberkante der Überschrift. */
  .kh-services-mobil .kh-services-mobil__grid > .kh-services-mobil__media {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    margin-block-start: 29px;
  }

  .kh-services-mobil .kh-services-mobil__media .elementor-widget-image {
    block-size: 100%;
    aspect-ratio: auto;
  }
}

/* Die Nummer steht vor dem Eyebrow in derselben Zeile und
   bindet die Fläche an die Sprungleiste zurück. */
.kh-services-eyebrow-num {
  display: inline-block;
  margin-inline-end: var(--kh-space-xs);
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-primary-text);
}

/* Auf der dunklen Fläche wäre #A50000 nicht lesbar. global.css
   kippt dort die Farbe des Eyebrows selbst, erreicht aber nicht
   die Ziffer darin — die hat eine eigene Regel und gewinnt über
   ihre Position im Baum. Deshalb hier dieselbe Umstellung.
   #FF6B6B auf #1A1A1A ergibt 6,9:1. */
.kh-section--dark .kh-services-eyebrow-num { color: var(--kh-color-primary-on-dark); }

.kh-services-mobil .kh-h2 .elementor-heading-title {
  max-width: 16ch;
  letter-spacing: -.025em;
}

.kh-services-mobil__media .elementor-widget-container,
.kh-services-mobil__media figure { display: block; block-size: 100%; }

.kh-services-mobil__media .elementor-widget-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-100);
  aspect-ratio: 4 / 3;
}

.kh-services-mobil__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Bildunterschrift: sagt, was zu sehen ist. Keine Wiederholung
   des Fliesstextes.

   Sie steht nicht mehr mit Abstand unter dem Bild, sondern als
   eigene Fläche unmittelbar daran — Bild und Unterschrift sind
   damit ein Objekt statt zweier Dinge. Die Rundung wandert
   entsprechend: oben trägt sie das Bild, unten die Fläche. */
.kh-services-mobil__media .elementor-widget-image {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.kh-services-mobil__caption {
  position: relative;
  margin: 0;
  padding: calc(var(--kh-space-md) + 4px) var(--kh-space-md) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-200);
  border-block-start: 0;
  border-end-start-radius: var(--kh-radius-lg);
  border-end-end-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-050);
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-500);
}

/* Dieselbe kurze rote Marke wie vor einem Listenpunkt — sie
   bindet die Fläche an die Aufzählung daneben zurück. */
.kh-services-mobil__caption::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--kh-space-md);
  inline-size: 28px;
  block-size: 2px;
  background-color: var(--kh-color-primary-500);
}


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

/* Wird in mehreren Abschnitten dieser Seite benutzt. Eine Liste
   ohne Punkte, dafür mit einer kurzen roten Linie vor der Zeile —
   dasselbe Zeichen wie an der aktiven Registerkarte der
   Startseite, damit die Seiten zusammengehören. */

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

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

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

.kh-section--dark .kh-services-list__item { color: rgba(255, 255, 255, .88); }
.kh-section--dark .kh-services-list__item::before { background-color: var(--kh-color-primary-on-dark); }


/* ==========================================================
   03. INTERNET & FESTNETZ — AUSSAGE UND ABLAUFSCHIENE
   ==========================================================
   Hier gibt es kein Bild. Die Fläche trägt deshalb einen Satz
   gross und darunter den Ablauf in drei Schritten.

   Warum Schritte und keine Karten: der Vorgang hat eine
   Reihenfolge — prüfen, erklären, begleiten. Drei Karten
   nebeneinander behaupten Gleichzeitigkeit.

   DER FEHLER, DER VORHER DRIN WAR
   Die drei Titel standen nicht auf einer Linie: bei 1440px
   gemessen auf y=1916, 1892 und 1904, die Ziffern darüber
   46, 22 und 34px hoch. Ursache ist nicht die Schrift, sondern
   align-content. Jeder Schritt ist ein Raster aus zwei
   automatischen Zeilen; alle drei werden vom höchsten Geschwister
   auf dieselbe Höhe gestreckt, und der Vorgabewert normal
   verteilt diese freie Höhe auf BEIDE Zeilen. Der kürzeste
   Schritt bekam so den grössten Abstand unter seiner Ziffer.
   align-content: start legt die Zeilen oben an.

   DIE ZIFFER IST JETZT EINE STATION
   Sie sitzt als Scheibe mittig auf der Oberkante der Linie. Damit
   liest sich die Reihe als Schiene mit drei Stationen und nicht
   als drei Spalten — dieselbe Reihenfolge-Aussage wie auf der
   Karriereseite, aber ohne Bewegung und ohne eine einzige Klasse
   von dort zu übernehmen.
   ========================================================== */

.kh-services-net .kh-statement__text { max-width: 22ch; }

/* Aussage links, Einordnung rechts auf gemeinsamer Grundlinie.
   Vorher lief der Lead über die volle Containerbreite und war bei
   1440px 1136px lang — rund 150 Zeichen in einer Zeile. Die
   Reihenfolge der vier Kinder ist durch den Aufbau des Abschnitts
   festgelegt: Eyebrow, Aussage, Lead, Ablauf. */
@media (min-width: 62em) {

  .kh-services-net .kh-container.kh-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: clamp(20px, 1.6vw + 8px, 32px);
    align-items: start;
  }

  .kh-services-net .kh-container.kh-stack > :nth-child(1) { grid-column: 1 / -1; }
  .kh-services-net .kh-container.kh-stack > :nth-child(2) { grid-column: 1; }
  .kh-services-net .kh-container.kh-stack > :nth-child(3) { grid-column: 2; align-self: end; }
  .kh-services-net .kh-container.kh-stack > :nth-child(4) { grid-column: 1 / -1; }
}

.kh-services-net__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  margin-block-start: clamp(28px, 3vw + 8px, 48px);
  list-style: none;
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-services-net__step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--kh-space-md);
  align-content: start;
  padding-block: var(--kh-space-lg);
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-services-net__num {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--kh-color-line-300);
  border-radius: 50%;
  background-color: var(--kh-color-surface-000);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--kh-tracking-label);
  line-height: 1;
  color: var(--kh-color-primary-text);
}

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

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

/* Ab 62em stehen die drei nebeneinander. Die senkrechten
   Trennlinien entfallen: sie standen quer zur Leserichtung der
   Reihe. Stattdessen trägt die durchgehende Oberkante die drei
   Stationen, und der Abstand zwischen den Spalten genügt als
   Trennung. */
@media (min-width: 62em) {

  .kh-services-net__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 56px);
    margin-block-start: clamp(40px, 4vw + 12px, 72px);
    border-block-start: 1px solid var(--kh-color-line-300);
  }

  .kh-services-net__step {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kh-space-xs);
    /* 1,25rem ist die halbe Scheibe, die auf der Linie sitzt. */
    padding-block: calc(1.25rem + var(--kh-space-xl)) 0;
    padding-inline-end: 0;
    border-block-end: 0;
  }

  .kh-services-net__step + .kh-services-net__step {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .kh-services-net__num {
    position: absolute;
    inset-block-start: -1.25rem;
    inset-inline-start: 0;
  }
}


/* ==========================================================
   03b. BILD-UND-TEXT-BLOCK · TV UND HANDYVERSICHERUNG
   ==========================================================
   Die beiden am 14.10.2026 ergänzten Leistungen teilen sich
   einen Bauplan. Deshalb steht er EINMAL hier und nicht zweimal
   unter zwei Sektionsnamen: .kh-services-figure.

   WARUM NICHT kh-services-mobil NACHBAUEN
   Mobilfunk bringt eine Bildunterschrift mit und eine eigene
   Spaltenteilung. Die beiden neuen Blöcke haben noch kein
   Bildmaterial und deshalb auch keine Unterschrift — eine Kopie
   hätte zwei Drittel toter Regeln mitgebracht. Maße, Radius,
   Seitenverhältnis und die 29px-Ausrichtung sind dieselben,
   damit die Flächen als dieselbe Familie lesbar bleiben.

   DIE RICHTUNG WECHSELT
   TV stellt das Bild nach links (--media-first), die
   Versicherung nach rechts. Sieben Leistungsblöcke mit immer
   derselben Anordnung wären eine Liste, kein Rhythmus.
   ========================================================== */

/* NACHTRAG 19.10.2026 · DIE BILDSPALTE IST WEG
   -------------------------------------------------------------
   Für TV und Versicherung gab es kein Motiv, und es wird keins
   geben, das die Mediathek hergibt. Der reservierte Rahmen stand
   deshalb seit dem 14.10. leer: 458x344px gestrichelte Fläche,
   zweimal auf einer Seite. Ein gestalteter Platzhalter bleibt ein
   Platzhalter.

   Beide Abschnitte tragen ihren Inhalt jetzt selbst — und zwar
   NICHT auf dieselbe Art, sonst stünden zwei gleiche Textflächen
   untereinander:

     TV            offenes Band    Kopf zweispaltig, darunter die
                                   fünf Merkmale über die volle
                                   Breite. Keine Fläche, keine
                                   Rahmen — ein Datenblatt.

     Versicherung  gefasste Tafel  Text links, die abgesicherten
                                   Punkte rechts in einer eigenen
                                   weissen Tafel. Geschlossen statt
                                   offen — passend zu einem
                                   Leistungsumfang, der aufgezählt
                                   wird.

   Die Elementor-Bild-Widgets und die Klassen __media und __slot
   sind aus dem Markup entfernt, ihre Regeln hier ebenfalls. */

.kh-services-strip,
.kh-services-brief { align-items: start; }

/* Die Kinder des Stapels sind in beiden Abschnitten dieselben
   vier: Eyebrow, Überschrift, Fließtext, Liste. Positioniert
   wird deshalb über ihre Reihenfolge — es gibt keine Hülle
   dazwischen, die man stattdessen ansprechen könnte. */

@media (min-width: 62em) {

  /* --- TV · offenes Band ---------------------------------- */

  .kh-services-figure.kh-services-tv .kh-services-figure__content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(32px, 4vw, 72px);
    row-gap: var(--kh-space-sm);
    align-items: start;
  }

  .kh-services-tv .kh-services-figure__content > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .kh-services-tv .kh-services-figure__content > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .kh-services-tv .kh-services-figure__content > *:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }

  .kh-services-tv .kh-services-figure__content > *:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-block-start: clamp(24px, 2.5vw, 44px);
  }

  /* Fünf Merkmale nebeneinander unter einer durchgehenden
     Oberkante. Die rote Marke der Liste bleibt und übernimmt die
     Trennung — senkrechte Linien zusätzlich wären zu viel. */
  .kh-services-tv .kh-services-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-block-start: 1px solid var(--kh-color-line-200);
  }

  .kh-services-tv .kh-services-list__item {
    padding-block: var(--kh-space-lg) 0;
    padding-inline: var(--kh-space-lg) var(--kh-space-md);
    font-size: var(--kh-text-sm);
  }

  .kh-services-tv .kh-services-list__item::before { inset-block-start: calc(var(--kh-space-lg) + .55em); }

  /* --- Versicherung · gefasste Tafel ----------------------- */

  .kh-services-figure.kh-services-insurance .kh-services-figure__content {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(32px, 4vw, 72px);
    row-gap: var(--kh-space-md);
    align-items: start;
  }

  .kh-services-insurance .kh-services-figure__content > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .kh-services-insurance .kh-services-figure__content > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .kh-services-insurance .kh-services-figure__content > *:nth-child(3) { grid-column: 1; grid-row: 3; }

  /* Derselbe gerechnete Versatz von 29px, den vorher das Bild
     hatte: Eyebrow (13px, Zeilenhöhe 1,3) plus 12px Abstand. Die
     Tafel beginnt damit auf der Oberkante der Überschrift. */
  .kh-services-insurance .kh-services-figure__content > *:nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    margin-block-start: 29px;
  }
}

/* Die Tafel gilt auch schmal — dort steht sie unter dem Text. */
.kh-services-insurance .kh-services-figure__content > *:nth-child(4) {
  padding: clamp(24px, 3vw, 40px);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
}

.kh-services-insurance .kh-services-list { gap: 0; }

.kh-services-insurance .kh-services-list__item { padding-block: var(--kh-space-sm); }

.kh-services-insurance .kh-services-list__item + .kh-services-list__item {
  border-block-start: 1px solid var(--kh-color-line-100);
}

.kh-services-insurance .kh-services-list__item::before { inset-block-start: calc(var(--kh-space-sm) + .55em); }

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

/* Die 18ch stammen aus der Zeit mit Bildspalte, als die Überschrift
   in einer 620px-Spalte stand. Im Band von TV steht sie jetzt in
   einer 1.05fr-Spalte und lief dort auf vier Zeilen. */
@media (min-width: 62em) {

  .kh-services-tv .kh-h2 .elementor-heading-title { max-width: 22ch; }
}

/* ==========================================================
   04. GERÄTE & ZUBEHÖR — DUNKLE FLÄCHE
   ==========================================================
   Die einzige dunkle Fläche der Seite. Sie steht in der Mitte
   und teilt die Seite in zwei Hälften — ohne sie liefen fünf
   weisse und graue Flächen ineinander.

   Es gibt für diesen Bereich kein eigenes Foto im Bestand.
   Ein Platzhalterbild oder ein zugekauftes Motiv wäre die
   schlechtere Lösung als gar keins: die Fläche trägt
   stattdessen Typografie.
   ========================================================== */

/* EINE SPALTE, SEIT DIE AUSZEICHNUNG WEG IST
   Die rechte Spalte trug die Service-Point-Auszeichnung. Sie ist
   am 14.10.2026 entfernt worden, weil Kahraman keinen Service
   Point mehr betreibt. Zurück blieb sonst ein 0.8fr breites
   Nichts neben dem Text — auf einer dunklen Fläche genau die
   Lücke, die der Kommentar unten einmal beschrieben hat.
   Die zweispaltige Regel bleibt stehen: sie greift wieder, sobald
   der Abschnitt ein zweites Kind bekommt. */
@media (min-width: 62em) {

  .kh-services-devices__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: clamp(32px, 4vw, 80px);
    align-items: stretch;
  }

  .kh-services-devices__grid:has( > :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Elementor legt um jeden Widget-Inhalt noch einen Rahmen. Ohne
     diese Zeile endet das Strecken am Rahmen und die Auszeichnung
     darin bleibt so hoch wie ihr Text. */
  .kh-services-devices .kh-services-devices__grid > .elementor-widget-html,
  .kh-services-devices .kh-services-devices__grid > .elementor-widget-html > .elementor-widget-container {
    block-size: 100%;
  }
}

/* global.css kippt auf --dark die Farbrollen von kh-lead und
   kh-text, aber nicht die von kh-prose — der Fliesstextbereich
   ist dort für helle Flächen und Rechtstexte gedacht. Auf dieser
   einen dunklen Fläche wird er deshalb hier umgestellt. */
.kh-services-devices .kh-prose { color: rgba(255, 255, 255, .88); }
.kh-services-devices .kh-prose a { color: var(--kh-color-ink-inverse); }

.kh-services-devices .kh-h2 .elementor-heading-title {
  max-width: 14ch;
  letter-spacing: -.028em;
}

/* ENTFALLEN AM 14.10.2026 · SERVICE-POINT-AUSZEICHNUNG
   -------------------------------------------------------------
   Hier standen .kh-services-devices__aside, __mark, __year,
   __year-label und __text — die Auszeichnung „2007 · Eigener
   Service Point" in der rechten Spalte dieses Abschnitts.

   Kahraman betreibt keinen Service Point mehr. Das Widget ist
   aus dem Inhalt der Seite „Leistungen" entfernt; gegengeprüft:
   keine veröffentlichte Seite verwendet diese Klassen noch.
   Damit sind die Regeln nachweislich tot und nicht nur
   unbenutzt — deshalb stehen sie nicht mehr da.

   Das Raster darüber fällt jetzt auf eine Spalte zurück. */


/* ==========================================================
   05. VERTRAGSBERATUNG — AUSSAGE LINKS, CHECKLISTE RECHTS
   ==========================================================
   Der Inhalt ist eine Gegenüberstellung: was wir durchgehen,
   und was Sie dafür mitbringen. Zwei Spalten mit einer
   Haarlinie dazwischen sagen das ohne ein einziges Wort
   Überschrift mehr.

   WARUM DIESER ABSCHNITT UMGEBAUT WURDE
   Er war die schwächste Fläche der Seite: Überschrift, ein Satz
   über die volle Breite, darunter zwei Textspalten — dasselbe
   Bauprinzip wie die Fläche davor und dahinter, nur ohne Bild.
   Im Durchblättern las er sich als Lückenfüller.

   Jetzt trägt er ein eigenes Prinzip: die Aussage steht schmal
   links und bleibt stehen, die beiden Listen liegen rechts auf
   einer eigenen Fläche mit roter Oberkante. Das ist die einzige
   abgesetzte Fläche auf hellem Grund auf dieser Seite — davor
   steht Dunkel, danach ein Bild, sie wiederholt also nichts. */

@media (min-width: 62em) {

  /* Die Reihenfolge der vier Kinder ist durch den Aufbau des
     Abschnitts festgelegt: Eyebrow, Überschrift, Lead, Listen. */
  /* DIE VIERTE ZEILE IST DER TRICK
     Mit nur drei Zeilen streckt die übergreifende Fläche rechts
     alle drei — die linke Spalte wurde dadurch auseinander-
     gezogen (gemessen: Eyebrow 81, Überschrift 210, Lead 428).
     Eine vierte Zeile mit 1fr nimmt die Reststrecke auf, die
     ersten drei bleiben bei ihrer Inhaltshöhe. */
  /* DIE LETZTE ZEILE IST DER TRICK
     Mit nur so vielen Zeilen, wie links Inhalte stehen, streckt
     die übergreifende Fläche rechts sie alle — die linke Spalte
     wurde dadurch auseinandergezogen (gemessen: Eyebrow 81,
     Überschrift 210, Lead 428). Eine letzte Zeile mit 1fr nimmt
     die Reststrecke auf, die übrigen bleiben bei ihrer
     Inhaltshöhe.

     Der Hinweis steht links unter dem Lead und nicht mehr unter
     der Liste: dort schliesst er die Aussage ab und füllt die
     Spalte, statt die Fläche rechts zu verlängern. */
  .kh-services-contract .kh-container.kh-stack {
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: var(--kh-space-sm);
    align-items: start;
  }

  .kh-services-contract .kh-container.kh-stack > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .kh-services-contract .kh-container.kh-stack > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .kh-services-contract .kh-container.kh-stack > :nth-child(3) { grid-column: 1; grid-row: 3; }
  .kh-services-contract .kh-container.kh-stack > :nth-child(5) { grid-column: 1; grid-row: 4; }
  .kh-services-contract .kh-container.kh-stack > :nth-child(4) { grid-column: 2; grid-row: 1 / -1; }

  .kh-services-contract .kh-h2 .elementor-heading-title { max-width: 18ch; }
}

.kh-services-contract__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-xl);
  margin-block-start: clamp(24px, 2vw + 12px, 40px);
  padding: clamp(24px, 2.2vw + 8px, 44px);
  border: 1px solid var(--kh-color-line-200);
  border-block-start: 2px solid var(--kh-color-primary-500);
  border-radius: 0 0 var(--kh-radius-lg) var(--kh-radius-lg);
  background-color: var(--kh-color-surface-050);
}



/* Untereinander trennt eine waagerechte Haarlinie die beiden
   Listen — dieselbe Trennung wie nebeneinander, nur gedreht.
   Der 48em-Block darunter stellt sie für die zweispaltige Stufe
   wieder zurück. */
.kh-services-contract__col + .kh-services-contract__col {
  margin-block-start: var(--kh-space-xs);
  padding-block-start: clamp(24px, 2vw + 8px, 36px);
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-services-contract__col-title {
  margin: 0 0 var(--kh-space-md);
  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);
}

@media (min-width: 48em) {

  .kh-services-contract__pair {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(24px, 2.8vw, 44px);
  }

  .kh-services-contract__col + .kh-services-contract__col {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
    padding-inline-start: clamp(24px, 2.8vw, 44px);
    border-inline-start: 1px solid var(--kh-color-line-200);
  }
}

/* Ab 62em steht die Fläche in der schmaleren rechten Spalte. Zwei
   Listen nebeneinander hätten dort rund 215px je Spalte — gemessen
   brach „Einen gültigen Ausweis" dadurch in zwei Zeilen um. Die
   beiden Listen stehen deshalb wieder untereinander und bekommen
   die volle Breite der Fläche; getrennt sind sie durch dieselbe
   Haarlinie, nur waagerecht.

   Diese Regeln stehen bewusst NACH dem 48em-Block: beide haben
   dieselbe Spezifität, also entscheidet die Reihenfolge. Standen
   sie davor, blieb die senkrechte Trennlinie stehen und legte
   sich mit dem neuen waagerechten Abstand übereinander — genau
   das war im ersten Durchgang zu sehen. */
@media (min-width: 62em) {

  .kh-services-contract__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-block-start: 0;
  }

  .kh-services-contract__col + .kh-services-contract__col {
    margin-block-start: clamp(24px, 2vw + 8px, 36px);
    padding-block-start: clamp(24px, 2vw + 8px, 36px);
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--kh-color-line-200);
  }
}

/* Der Hinweis unter den Spalten ist kein Kleingedrucktes,
   sondern die Antwort auf die häufigste Rückfrage. Er steht
   deshalb auf gleicher Höhe wie der Fliesstext, nur ruhiger. */
.kh-services-contract__note {
  margin-block-start: clamp(24px, 2vw + 12px, 40px);
  padding-block-start: var(--kh-space-md);
  border-block-start: 1px solid var(--kh-color-line-200);
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-500);
  max-width: 62ch;
}


/* ==========================================================
   06. SERVICE VOR ORT — BILD UND STANDORTBEZUG
   ==========================================================
   Die letzte Leistung ist zugleich der Übergang zur
   Filialübersicht. Das Bild steht deshalb links und der Text
   rechts — umgekehrt zu „Mobilfunk", damit die Seite nicht
   zweimal dieselbe Richtung läuft.
   ========================================================== */

/* BILDLAGE UND HÖHE
   -------------------------------------------------------------
   Gemessen bei 1440px: Bild 389px hoch, Textspalte 478 — das Bild
   hing 89px in der Luft und begann 44px tiefer als der Text.

   Das Bild trägt seine Spalte jetzt aus. Zusätzlich liegt es auf
   einer versetzten Platte, die links und unten hervorschaut: das
   ist der Unterschied zu „Mobilfunk", wo dasselbe Bauprinzip
   spiegelverkehrt und flach steht. Zweimal derselbe Zweispalter
   wäre sonst zweimal dasselbe Bild.

   Die Platte bleibt innerhalb des Abschnitts: 24px nach links bei
   32px Innenabstand des Containers. Es entsteht kein waagerechter
   Überlauf — deshalb auch kein 100vw-Anschnitt, der ihn über die
   Bildlaufleiste zuverlässig erzeugen würde. */
@media (min-width: 62em) {

  .kh-services-local__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: stretch;
  }

  .kh-services-local__media { grid-column: 1; grid-row: 1; }
  .kh-services-local__content { grid-column: 2; grid-row: 1; }

  .kh-services-local .kh-services-local__media { position: relative; }

  .kh-services-local .kh-services-local__media::before {
    content: "";
    position: absolute;
    inset-block: var(--kh-space-xl) calc(-1 * var(--kh-space-lg));
    inset-inline: calc(-1 * var(--kh-space-lg)) 42%;
    border-radius: var(--kh-radius-lg);
    background-color: var(--kh-color-surface-200);
    z-index: 0;
  }

  .kh-services-local .kh-services-local__media > * {
    position: relative;
    z-index: 1;
  }

  .kh-services-local .kh-services-local__media .elementor-widget-image {
    block-size: 100%;
    aspect-ratio: auto;
  }
}

.kh-services-local__media .elementor-widget-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-100);
  aspect-ratio: 4 / 3;
}

.kh-services-local__media .elementor-widget-container,
.kh-services-local__media figure { display: block; block-size: 100%; }

.kh-services-local__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Zahl und Bezeichnung als Faktenzeile über dem Fliesstext.
   kh-factsbar aus global.css trägt die Optik, hier steht nur
   die Spaltenzahl für diese Fläche. */
@media (min-width: 30em) {
  .kh-services-local .kh-factsbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================
   07. ABSCHLUSS
   ==========================================================
   Kein zweiter roter Block: der Kopf trägt die Marke, der
   Abschluss trägt die Entscheidung. Er steht auf der ruhigen
   Fläche und setzt nur die Schaltflächen nach vorn.

   DAS RINGMOTIV HATTE KEINE MITTE
   Das Motiv aus global.css 24 sitzt mit inset-inline-end: -8%
   an der Panelkante und dreht sich in 38 Sekunden. Gemessen bei
   1440px: 547px Durchmesser, 96px über die rechte Kante hinaus —
   drei Ringe um nichts herum, halb angeschnitten. Auf
   „Geschäftskunden" und „Karriere" steht an derselben Stelle das
   Vodafone-Zeichen im Mittelpunkt.

   Übernommen wird deshalb der dort bereits freigegebene Bau, in
   derselben Reihenfolge und mit denselben Werten: das gedrehte
   ::after wird für diesen Abschnitt abgeschaltet, Ringe und
   Zeichen liegen gemeinsam auf einem eigenen, STEHENDEN Element,
   und das Zeichen ist dessen Rasterkind — damit ist es
   rechnerisch zentriert, nicht ausgerichtet. Ein mitdrehendes
   Markenzeichen kommt nicht in Frage.

   Das Motiv ist eine eigene Spalte im Raster des Panels, kein
   absolut gesetztes Element; es kann Text und Schaltflächen
   deshalb nicht überdecken. Die Ringe dürfen an der Panelkante
   angeschnitten werden — sie sind kein Markenzeichen. */

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

/* Sonst liefe unter dem stehenden Zeichen ein zweites, gedrehtes
   Ringmotiv weiter. */
.kh-services-cta.kh-cta-panel > .kh-container::after { content: none; }

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

/* display:contents nimmt den Elementor-Rahmen aus dem Raster
   heraus, damit das Zeichen selbst das Rasterkind ist. */
.kh-services-cta .kh-services-cta__mark .elementor-widget-container { display: contents; }

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

@media (min-width: 62em) {

  .kh-services-cta {
    --kh-cta-motiv: clamp(200px, 18vw, 280px);
    --kh-cta-ring:  calc(var(--kh-cta-motiv) * 1.45);
  }

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

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

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

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

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


/* ==========================================================
   07b. WEITERFÜHREND — DIE DREI NACHBARSEITEN
   ==========================================================
   Steht auf /leistungen/ vor dem Abschluss. Drei Verweise mit
   je einem Satz, der sagt, für wen die Seite gedacht ist. Ohne
   diesen Satz wären „Vodafone Lösungen" und „Vodafone Shops"
   zwei kaum unterscheidbare Titel — sie richten sich aber an
   völlig verschiedene Leute.
   ========================================================== */

.kh-services-more { padding-block: clamp(40px, 3vw + 16px, 64px); }

/* NACHTRAG 19.10.2026 · ASYMMETRIE STATT KOPF OBENDRAUF
   Die Zeilen selbst waren bereits richtig gebaut. Darüber stand
   aber die Bezeichnung als eigene Zeile — damit sah der Block aus
   wie ein weiterer Abschnitt mit Kopf, kurz vor dem Abschluss,
   der ebenfalls einen Kopf hat. Die Bezeichnung sitzt jetzt
   daneben: der Block wird zu dem, was er ist — eine Navigation
   am Seitenende, keine achte Leistung. */
@media (min-width: 62em) {

  .kh-services-more .kh-services-more__layout {
    display: grid;
    grid-template-columns: minmax(0, .24fr) minmax(0, .76fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }

  .kh-services-more .kh-services-more__grid { margin-block-start: 0; }
}

/* DER ÜBERSTAND MUSS SCHMAL WEG
   Das Raster greift beidseitig 16px über den Satzspiegel hinaus.
   Auf dem Telefon hat der Container dieses Mass nicht übrig:
   gemessen 354px Inhalt in 338px Fläche. Das ist kein optischer
   Mangel, sondern ein echter Überlauf — schmal deshalb bündig.

   Der Abschnittsname steht im Selektor, weil dieser Block VOR
   der Regel mit dem Überstand liegt: bei gleicher Spezifität
   gewinnt sonst die spätere Regel und der Überlauf bleibt.
   Gemessen und korrigiert, nicht angenommen. */
@media (max-width: 47.9375em) {

  .kh-services-more .kh-services-more__grid { margin-inline: 0; }
  .kh-services-more .kh-services-more__link { padding-inline: 0; }
}

/* DREI GLEICHE KARTEN WAREN DAS FALSCHE BILD
   -------------------------------------------------------------
   Drei gleich breite Blöcke mit gleicher roter Oberkante direkt
   vor dem Abschluss — die einzige Stelle der Seite, an der ein
   Raster aus identischen Kacheln stand. Weil die drei Ziele sich
   an völlig verschiedene Leute richten, ist Gleichrangigkeit hier
   auch inhaltlich falsch.

   Jetzt sind es Zeilen: Titel links, Einordnung rechts, Haarlinie
   dazwischen. Die rote Marke wandert an die Zeile, die man gerade
   anfasst — sie ist damit Hinweis statt Dekoration. */

.kh-services-more__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-block-start: clamp(20px, 2vw + 8px, 32px);
  /* Die Fläche greift beidseitig 16px über den Satzspiegel hinaus,
     damit der Hinweisgrund beim Überfahren nicht am Text klebt.
     Der Versatz sitzt am Raster und nicht an der Zeile — sonst
     lägen Oberkante und Zeilenlinien verschieden breit
     übereinander, was gemessen 16px je Seite ausmachte. */
  margin-inline: calc(-1 * var(--kh-space-md));
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-services-more__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kh-space-2xs);
  padding-block: var(--kh-space-lg);
  padding-inline: var(--kh-space-md);
  border-block-end: 1px solid var(--kh-color-line-200);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

/* Die rote Marke sitzt auf der Trennlinie und wächst von links
   ein. Keine Fläche, keine Verschiebung des Textes. */
.kh-services-more__link::before {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  background-color: var(--kh-color-primary-500);
  transition: inline-size var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-services-more__link:hover { background-color: var(--kh-color-surface-050); }
.kh-services-more__link:hover::before,
.kh-services-more__link:focus-visible::before { inline-size: 100%; }

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

@media (min-width: 48em) {

  .kh-services-more__link {
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
    column-gap: clamp(24px, 3vw, 64px);
    align-items: baseline;
    padding-block: clamp(20px, 1.6vw + 10px, 32px);
  }
}

.kh-services-more__title {
  display: flex;
  align-items: center;
  gap: var(--kh-space-xs);
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  color: var(--kh-color-ink-900);
  transition: color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-services-more__link:hover .kh-services-more__title { color: var(--kh-color-primary-text); }

.kh-services-more__title::after {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-top: 2px solid var(--kh-color-primary-500);
  border-right: 2px solid var(--kh-color-primary-500);
  transform: rotate(45deg);
  transition: transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-services-more__link:hover .kh-services-more__title::after { transform: rotate(45deg) translate(2px, -2px); }

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

@media (prefers-reduced-motion: reduce) {
  .kh-services-more__link,
  .kh-services-more__link::before,
  .kh-services-more__title,
  .kh-services-more__title::after { transition: none; }
}


/* ==========================================================================
   TEIL B · DIE BEIDEN UNTERSEITEN VON /leistungen/
   ==========================================================================
   Ab hier stehen die Bausteine für

       /leistungen/vodafone-loesungen/   Präfix kh-solutions-
       /leistungen/vodafone-shops/       Präfix kh-shops-

   Sie liegen in derselben Datei, weil sie dieselbe Seitengruppe
   teilen (convi_config 'services') und weil sie zusammen gelesen
   werden müssen: die drei Seiten unter /leistungen/ dürfen sich
   nicht gegenseitig kopieren.

   ARBEITSTEILUNG DER DREI SEITEN
       /leistungen/          Was wir tun — fünf Leistungen, je eine
                             eigene Komposition, mit Bildern.
       …/vodafone-loesungen/ Was zu Ihnen passt — Orientierung und
                             Beratung. Bewusst OHNE Foto; am
                             19.09.2026 erneut geprüft und bestätigt:
                             die Mediathek enthält drei echte Motive.
                             „Beratung im Vodafone Shop" laeuft auf
                             vier veroeffentlichten Seiten, das
                             Shop-Motiv auf fuenf, und das dritte
                             (csm_shop_3) ist mit 235x148px ein
                             Vorschaubild und fuer eine Flaeche
                             unbrauchbar. Ein weiteres Vorkommen
                             haette die Bilder entwertet, ein
                             zugekauftes waere gegen die Vorgabe.
                             Diese Seite unterscheidet ihre
                             Abschnitte deshalb ueber Format,
                             Flaeche und Typografie.
       …/vodafone-shops/     Was der Shop leistet — mit dem
                             Ladenfoto, weil es hier zum ersten Mal
                             das eigentliche Thema zeigt.
   ========================================================================== */


/* ==========================================================
   09. VODAFONE LÖSUNGEN · RHYTHMUS UND KOPF
   ========================================================== */

/* DER RHYTHMUS IST DIE HALBE KOMPOSITION
   Die drei Bereichsflaechen sind die groessten Abschnitte und
   atmen am weitesten; Orientierung, Vertragsthemen und Beratung
   liegen enger. Die dunkle Flaeche bekommt etwas mehr Luft als
   ihre hellen Nachbarn, weil eine dunkle Flaeche optisch
   zusammenzieht. */
.kh-solutions-hero           { padding-block: clamp(44px, 3.5vw + 22px, 88px) clamp(40px, 3vw + 18px, 72px); }
.kh-solutions-orient         { padding-block: clamp(48px, 4vw + 20px, 88px); }
.kh-solutions-overview       { padding-block: clamp(48px, 4vw + 20px, 88px); }
.kh-solutions-why            { padding-block: clamp(48px, 4vw + 20px, 88px); }
.kh-solutions-business       { padding-block: clamp(44px, 3.5vw + 20px, 80px); }
.kh-solutions-cta            { padding-block: clamp(56px, 5vw + 28px, 112px); }

/* NACHTRAG 19.10.2026 · DAS LINIENRASTER DES ORIENTIERUNGSKOPFS
   -------------------------------------------------------------
   Lösungen, Geschäftskunden und Partner standen auf exakt
   derselben Ringgeometrie (78% / 50%, gleiches Signetmass,
   gleiche Radardauer). Dass die drei Köpfe gleich aussahen, lag
   also nicht am Eindruck, sondern an identischen Werten.

   Dieser Kopf bekommt das Motiv der Seite: senkrechte Linien im
   Spaltenmass, dieselbe Logik wie der Ledger darunter. Sie
   liegen als dritte Hintergrundebene über dem Markenverlauf, und
   das Signet rückt nach unten rechts — damit steht der Kopf
   anders im Raum als die drei anderen. */

.kh-solutions-hero {
  --kh-ring-cx: 88%;
  --kh-ring-cy: 62%;
  --kh-mark-size: clamp(56px, 6.2vw, 92px);

  /* Die beiden Markenverläufe bleiben unverändert, davor das
     Raster. 10 Prozent Weiss auf #E60000 ist unterhalb der
     Textgrenze und berührt die Lesbarkeit nicht. */
  background-image:
      repeating-linear-gradient(90deg,
        rgba(255, 255, 255, .10) 0 1px,
        transparent 1px 120px),
      radial-gradient(118% 92% at 6% -6%, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, 0) 56%),
      radial-gradient(96% 118% at 102% 104%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 62%);
  /* Gerechnet wie auf „Kontakt": der Lead endet auf halber Breite,
     58 Prozent Abstand zum Mittelpunkt, Maske dort auf 0,19 —
     zusammengesetzt rund 0,08 Weiss und damit 4,66:1. */
  --kh-radar-klar: 52%;
  --kh-radar-dauer: 12s;
}

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

.kh-solutions-hero__header,
.kh-shops-hero__header {
  max-width: none;
  margin-block-end: 0;
}

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

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


/* ==========================================================
   10. ORIENTIERUNG — DAS BERATUNGSREGISTER
   ==========================================================
   „Was passt zu Ihnen?" beantwortet man nicht mit fünf gleichen
   Kacheln, sondern mit fünf Sätzen, die beim Leser anfangen.
   Links steht die Situation, rechts der Bereich. Wer sich in einer
   Zeile wiedererkennt, weiss sofort, wo er weiterlesen muss.

   NEU · ZWEI SPALTEN STATT EINER SPALTE
   Vorgefunden stand die Frage oben und das Register darunter, über
   die volle Breite — derselbe Aufbau wie in den beiden Abschnitten
   danach. Dreimal dieselbe Figur hintereinander liest sich als
   Vorlage, nicht als Komposition.

   Jetzt steht die Frage links und bleibt stehen, während rechts
   die fünf Anlässe abgehen. Das ist der Unterschied zwischen einem
   Inhaltsverzeichnis und einem Gespräch: die Frage bleibt im Blick,
   solange man die Antworten durchgeht.

   NEU · DAS REGISTER VERWEIST
   Die fünf Bereichsnamen sind jetzt Verweise. Drei springen zu
   ihrem Abschnitt auf dieser Seite, zwei zum Abschnitt mit den
   Vertragsthemen. Vorher war das Register eine Ankündigung, die
   für zwei der fünf Zeilen nichts eingelöst hat.
   ========================================================== */

.kh-solutions-orient__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 2.5vw + 12px, 48px);
}

@media (min-width: 62em) {

  .kh-solutions-orient__grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(40px, 4vw, 88px);
    align-items: start;
  }
}

.kh-solutions-orient__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-solutions-orient__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-2xs);
  padding-block: var(--kh-space-md);
  border-block-end: 1px solid var(--kh-color-line-200);
}

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

/* Der Bereichsname ist jetzt ein Verweis. Das Polster senkrecht
   und der gleich grosse negative Aussenabstand geben ihm eine
   Trefffläche von rund 44px, ohne die Zeilenhoehe zu aendern —
   die Grundlinie der Zeile bleibt, wo sie war. */
.kh-solutions-orient__area {
  display: inline-flex;
  align-items: baseline;
  gap: var(--kh-space-3xs);
  padding-block: 11px;
  margin-block: -11px;
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.35;
  color: var(--kh-color-ink-900);
  text-decoration: none;
  transition: color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-solutions-orient__area::after {
  content: "";
  flex: none;
  align-self: center;
  inline-size: 6px;
  block-size: 6px;
  border-top: 2px solid var(--kh-color-primary-500);
  border-right: 2px solid var(--kh-color-primary-500);
  transform: rotate(135deg);
  transition: transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-solutions-orient__area:hover { color: var(--kh-color-primary-text); }
.kh-solutions-orient__area:hover::after { transform: rotate(135deg) translate(-2px, 2px); }

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

@media (prefers-reduced-motion: reduce) {
  .kh-solutions-orient__area,
  .kh-solutions-orient__area::after { transition: none; }
}

/* Das Trennzeichen ist reine Optik und im Markup aria-hidden.
   Unter 48em gibt es keine zwei Spalten, also auch keine
   Richtung, die es zeigen könnte. */
.kh-solutions-orient__sep { display: none; }

@media (min-width: 48em) {

  .kh-solutions-orient__row {
    grid-template-columns: minmax(0, 1.2fr) 2rem minmax(0, 1fr);
    gap: var(--kh-space-md);
    align-items: baseline;
    padding-block: var(--kh-space-lg);
  }

  .kh-solutions-orient__sep {
    display: block;
    justify-self: center;
    font-weight: var(--kh-font-weight-bold);
    color: var(--kh-color-primary-500);
  }
}


/* Der Bestandshinweis stand vorher mitten im Fliesstext. Als
   eigene, leisere Zeile am Fuss der Uebersichtstafel
   (.kh-solutions-table, siehe „DIE BEREICHE AUF EINEN BLICK"
   weiter unten) ist er das, was er ist: eine Einschraenkung,
   kein Verkaufsargument.

   NACHTRAG 21.10.2026 · Hier stand „unter der Matrix". Die
   Matrix — fuenf nummerierte Abschnitte mit Stichpunktlisten —
   wurde am 19.10.2026 durch die Tafel ersetzt. Der Hinweis
   steht unveraendert an derselben Stelle, nur heisst das, was
   ueber ihm liegt, seitdem anders. Nur der Kommentar wurde
   berichtigt; an der Regel aendert sich nichts. */
.kh-solutions-note {
  margin: 0;
  padding-block-start: var(--kh-space-sm);
  border-block-start: 1px solid var(--kh-color-line-200);
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-500);
  inline-size: 100%;
}

/* Als Widget-Klasse sitzt der Hinweis am Wrapper, der Absatz darin
   bringt seinen eigenen Abstand mit. */
.kh-solutions-note p { margin: 0; }


/* ==========================================================
   DIE BEREICHE AUF EINEN BLICK (19.10.2026)
   ==========================================================
   WAS HIER VORHER STAND
   Fünf Abschnitte 01–05 plus ein Paar-Abschnitt, jeder mit
   Ziffer, Überschrift, Absatz, Stichpunktliste und einem
   „im Detail"-Knopf. Zusammen rund 5 400px auf dem Telefon —
   und inhaltlich zu grossen Teilen derselbe Text wie auf
   /leistungen/, teilweise Satz für Satz identisch.

   Zwei Seiten, die dasselbe erzählen, helfen niemandem. Die
   Arbeitsteilung ist jetzt eindeutig:

     /leistungen/                    was eine Leistung umfasst
     /leistungen/vodafone-loesungen/ welche davon zu mir passt

   Diese Seite trägt deshalb nur noch eine Tafel: Bereich,
   worauf es zuerst ankommt, und der Weg ins Detail. Sieben
   Zeilen statt sechs Abschnitte.

   WARUM EINE TAFEL UND KEINE KARTEN
   Eine Tafel lässt sich zeilenweise vergleichen — genau das
   ist die Aufgabe einer Übersicht. Karten zwingen zum
   Einzellesen und wären ausserdem die vierte Kartenreihe im
   Projekt. Die Spaltenköpfe stehen nur breit und sind für
   Vorleseprogramme ausgeblendet; schmal wäre eine Tabelle
   ohnehin keine.
   ========================================================== */

.kh-solutions-table__head { display: none; }

.kh-solutions-table__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-solutions-table__row {
  display: grid;
  gap: var(--kh-space-2xs);
  padding-block: var(--kh-space-lg);
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-solutions-table__area {
  margin: 0;
  font-family: var(--kh-font-heading);
  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);
  color: var(--kh-color-ink-900);
}

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

/* Derselbe Pfeil wie in der Weiterführung auf /leistungen/ —
   beide Seiten verweisen aufeinander, also sieht der Verweis
   auch gleich aus. */
/* NACHTRAG 21.10.2026 · DAS ZIEL WAR 72x21 PIXEL
   -------------------------------------------------------------
   Nachgemessen bei 1440px: sieben Verweise mit je 72x21 Pixeln.
   Das liegt unter den 44 Pixeln, die auf dieser Website fuer
   jede Aktion gelten.

   Gefehlt hat genau eine Zeile: display:inline-flex und
   align-items:center standen schon hier, nur die Mindesthoehe
   nicht. Mehr wird nicht gebraucht.

   WARUM DIE ZEILE NICHT VERRUTSCHT
   Die Zeile richtet ihre drei Spalten ab 48em an der Grund-
   linie aus (align-items: baseline weiter unten). Ein
   inline-flex-Element gibt die Grundlinie seines ersten
   Inhalts weiter; mit zentriertem Inhalt in 44px Hoehe liegt
   sie 11px tiefer im Kasten, und das Raster schiebt den Kasten
   um dieselben 11px nach oben. Die Schrift bleibt damit auf
   derselben Linie wie Bereich und Aussage daneben — der
   Trefferbereich waechst nur symmetrisch darum herum.

   Platz ist dafuer da: zwischen zwei Verweisen liegen 59 bis
   83 Pixel, die Kaesten beruehren sich also nicht. Mobil war
   die Hoehe nie das Problem; die Regel gilt trotzdem ueberall,
   weil sie nichts verschiebt. */
.kh-solutions-table__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--kh-tap-min);
  gap: var(--kh-space-xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-primary-text);
  text-decoration: none;
  white-space: nowrap;
}

.kh-solutions-table__link::after {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-top: 2px solid var(--kh-color-primary-500);
  border-right: 2px solid var(--kh-color-primary-500);
  transform: rotate(45deg);
  transition: transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-solutions-table__link:hover { text-decoration: underline; }
.kh-solutions-table__link:hover::after { transform: rotate(45deg) translate(2px, -2px); }

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

@media (min-width: 48em) {

  .kh-solutions-table__head,
  .kh-solutions-table__row {
    grid-template-columns: minmax(0, .26fr) minmax(0, .58fr) minmax(0, .16fr);
    column-gap: clamp(24px, 3vw, 56px);
  }

  .kh-solutions-table__head {
    display: grid;
    padding-block-end: var(--kh-space-xs);
    font-size: var(--kh-text-label);
    font-weight: var(--kh-font-weight-bold);
    letter-spacing: var(--kh-tracking-label);
    text-transform: uppercase;
    color: var(--kh-color-ink-500);
  }

  .kh-solutions-table__row { align-items: baseline; }

  .kh-solutions-table__link { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .kh-solutions-table__link::after { transition: none; }
}


/* ==========================================================
   12.1 WARUM BERATUNG — VIER SCHRITTE STATT VIER KARTEN
   ==========================================================
   Vorgefunden waren es vier gleich grosse Kaesten mit roter
   Oberkante — dieselbe Figur wie die Matrix und die Tafeln
   darueber. Inhaltlich sind die vier Punkte aber keine Sammlung,
   sondern eine Reihenfolge: erst der Bedarf, dann der Vergleich,
   dann der Vertrag, danach der Ansprechpartner.

   Also traegt der Abschnitt jetzt eine Abfolge. Die Nummern kommen
   aus einem CSS-Zaehler und stehen nicht im Markup: sie sind
   Darstellung, kein Inhalt, und Vorlesewerkzeuge muessen sie nicht
   mitsprechen.
   ========================================================== */

/* Die Vorgaengerfassung stellte den ganzen Abschnitt auf die
   schmale Spalte. Vier Schritte nebeneinander brauchen die volle
   Breite; schmal bleibt nur der Fliesstext darueber. */
.kh-solutions-why__inner { max-width: var(--kh-container-max); }

.kh-solutions-why .kh-prose p { max-width: 62ch; }

.kh-solutions-steps {
  counter-reset: kh-step;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-lg);
  margin-block-start: clamp(28px, 2.5vw + 14px, 48px);
  inline-size: 100%;
}

@media (min-width: 40em) {

  .kh-solutions-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kh-space-xl) var(--kh-space-lg);
  }
}

@media (min-width: 68em) {

  .kh-solutions-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kh-space-lg);
  }
}

/* Elementor-Container sind Flex-Spalten; das ::before wird darin
   zum ersten Kind und braucht keine eigene Positionierung. */
.kh-solutions-steps .kh-solutions-step {
  counter-increment: kh-step;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kh-space-3xs);
  padding-block-start: var(--kh-space-sm);
  border-block-start: 1px solid var(--kh-color-line-300);
}

.kh-solutions-steps .kh-solutions-step::before {
  content: counter(kh-step, decimal-leading-zero);
  margin-block-end: var(--kh-space-2xs);
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--kh-tracking-label);
  line-height: 1;
  color: var(--kh-color-primary-text);
}

.kh-solutions-step__title .elementor-heading-title {
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  color: var(--kh-color-ink-900);
}

.kh-solutions-step__body p {
  margin: 0;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
}


/* ==========================================================
   12.2 GESCHAEFTSKUNDEN — DIE BRUECKE, NICHT DIE KOPIE
   ==========================================================
   Die Geschaeftskundenseite war von hier aus nur ueber die
   Hauptnavigation erreichbar. Sie gehoert aber inhaltlich an das
   Ende dieser Seite: wer bis hierher gelesen hat und mehrere
   Anschluesse verantwortet, ist auf der falschen Seite.

   Bewusst kurz: eine Ueberschrift, zwei Saetze, ein Verweis. Kein
   zweiter Auszug der Vorteile, keine Wiederholung der Argumente
   von dort — sonst waere es die dritte Fassung desselben Textes.
   ========================================================== */

.kh-solutions-business__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2vw + 10px, 36px);
}

@media (min-width: 62em) {

  .kh-solutions-business__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }
}

.kh-solutions-business__main { align-items: flex-start; }


/* ==========================================================
   13. VODAFONE SHOPS · RHYTHMUS UND KOPF
   ========================================================== */

/* DIESE SEITE RICHTET SICH AN SHOPINHABER
   /leistungen/vodafone-shops/ ist keine Endkundenseite. Sie
   beschreibt, was Kahraman anderen Vodafone-Partnern und
   Gründerinnen und Gründern anbietet: IT-Infrastruktur,
   Warenwirtschaft, Dokumentenmanagement und filialübergreifende
   Software. Die Abgrenzung zu den Nachbarseiten:

       …/vodafone-loesungen/   Endkunden, Orientierung
       /geschaeftskunden/      Betriebe als Telekommunikationskunden
       …/vodafone-shops/       Shopinhaber als Partner        */

.kh-shops-hero        { padding-block: clamp(44px, 3.5vw + 22px, 88px) clamp(40px, 3vw + 18px, 72px); }
.kh-shops-who         { padding-block: clamp(44px, 3vw + 20px, 76px); }
/* Der dunkle Abschnitt bekommt mehr Luft als die hellen: eine
   Fläche, die die Seite unterbricht, braucht Rand, sonst wirkt
   sie wie ein Kasten und nicht wie ein Abschnitt. */
.kh-shops-offer       { padding-block: clamp(56px, 5vw + 24px, 104px); }
.kh-shops-local       { padding-block: clamp(48px, 4vw + 24px, 96px); }
.kh-shops-network     { padding-block: clamp(48px, 4vw + 20px, 88px); }
.kh-shops-appointment { padding-block: clamp(44px, 3vw + 20px, 76px); }
.kh-shops-cta         { padding-block: clamp(56px, 5vw + 28px, 112px); }

/* NACHTRAG 19.10.2026 · DER KOPF LIEST SICH ALS DOKUMENTKOPF
   -------------------------------------------------------------
   Unterschied zu Geschäftskunden: dort ist der Leser ein Betrieb
   und der Kopf wechselt auf Tinte. Hier ist der Leser ein
   Partner im selben Geschäft — die Marke bleibt, die Ordnung
   wird sachlich. Die Bezeichnung steht über einer durchgehenden
   Linie wie der Kopf eines Papiers, darunter Titel und Lead.
   Das Signet rückt an die rechte Kante, weit weg vom Text. */

.kh-shops-hero {
  --kh-ring-cx: 94%;
  --kh-ring-cy: 38%;
  --kh-mark-size: clamp(56px, 6.2vw, 92px);
  --kh-radar-klar: 52%;
  --kh-radar-dauer: 12s;
}

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

.kh-shops-hero .kh-section-header__eyebrow {
  padding-block-end: var(--kh-space-sm);
  margin-block-end: var(--kh-space-md);
  border-block-end: 1px solid rgba(255, 255, 255, .32);
}

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


/* ==========================================================
   15. ERFAHRUNG AUS DEM EIGENEN BETRIEB — JETZT OHNE BILD
   ==========================================================
   Hier stand das Ladenfoto „vodafone-aez" als Beleg. Dasselbe
   Motiv trägt aber bereits den Unternehmensabschnitt der
   Startseite UND den Abschnitt „Service vor Ort" auf
   /leistungen/. Beim dritten Einsatz hört ein Beleg auf, einer
   zu sein — er wird zum Füllbild.

   Die Mediathek hat kein zweites Shopmotiv in brauchbarer
   Grösse (geprüft: 19 Anhänge, davon zwei echte Fotos). Statt
   eines Ersatzbildes oder einer leeren Fläche trägt der
   Abschnitt den Beleg jetzt selbst: die beiden belegten Zahlen
   links, die Aussage rechts, die drei Belegzeilen darunter.

   14 und 1999 sind vorhandene, belegte Angaben. Es kommt keine
   Jahreszahl und keine Behauptung dazu.
   ========================================================== */

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

@media (min-width: 62em) {

  .kh-shops-origin {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }

  /* In der schmalen Spalte stehen die Zahlen untereinander und
     tragen die Trennlinie seitlich statt unten. */
  .kh-shops-origin .kh-shops-network__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 1.6vw, 24px);
    margin-block-end: 0;
    padding-block-end: 0;
    border-block-end: 0;
    padding-inline-end: clamp(24px, 3vw, 48px);
    border-inline-end: 1px solid var(--kh-color-line-200);
  }

  /* KORREKTURRUNDE: die drei Belegzeilen standen untereinander
     linksbündig unter einem zweispaltigen Block — gemessen rund
     700px ungenutzte Fläche rechts daneben. Als Reihe unter einer
     durchgehenden Oberkante schliessen sie den Abschnitt ab,
     statt unter ihm zu hängen. */
  .kh-shops-local .kh-services-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(24px, 3vw, 56px);
    margin-block-start: clamp(28px, 3vw, 48px);
    padding-block-start: clamp(20px, 2vw + 8px, 32px);
    border-block-start: 1px solid var(--kh-color-line-200);
  }
}


/* ==========================================================
   15b. FÜR WEN DIESE SEITE IST
   ==========================================================
   Zwei Zielgruppen: wer bereits einen Vodafone Shop betreibt,
   und wer einen gründen will.

   Vorher standen sie als zwei gleich breite Textspalten
   nebeneinander, der Abschnittskopf darüber und zu keiner von
   beiden gehörend. Das las sich wie zwei Absätze mit einem
   Strich dazwischen.

   Jetzt ein Satz aus 5 und 7 Teilen: links der Kopf, rechts
   die beiden Angesprochenen untereinander. Untereinander,
   weil hier nichts verglichen wird — es ist keine Auswahl
   zwischen zwei Angeboten, sondern zwei Wege in dasselbe
   Gespräch. Jeder bekommt dadurch die volle Satzbreite.
   ========================================================== */

.kh-shops-who__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3vw + 10px, 48px);
}

@media (min-width: 62em) {

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

.kh-shops-who__head .kh-prose p { max-width: 42ch; }

.kh-shops-who__list {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-shops-who__item {
  padding-block: clamp(20px, 2vw + 6px, 32px);
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-shops-who__title .elementor-heading-title {
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
  max-width: 26ch;
}

.kh-shops-who__body p {
  margin: var(--kh-space-xs) 0 0;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
  max-width: 58ch;
}


/* ==========================================================
   16. DAS LEISTUNGSANGEBOT FÜR SHOPINHABER
   ==========================================================
   Zwei Gruppen mit je mehreren Punkten, teilweise verschachtelt.
   Eine verschachtelte Aufzählung bleibt die ehrliche Form: die
   Unterpunkte sind Beispiele der Gruppe darüber, keine eigenen
   Leistungen.

   WARUM DIESER ABSCHNITT JETZT DUNKEL IST
   Hier steht, was Kahraman anderen Partnern tatsächlich anbietet
   — der Kern der Seite. Vorher war es der unauffälligste
   Abschnitt: graue Fläche, und die eigentliche Substanz, die
   Unterpunkte, in kleinem hellgrauem Text ganz unten.

   Auf #1A1A1A trägt der Abschnitt sein Gewicht selbst. Die
   Unterpunkte steigen von 14 px Grau auf Fließtextgröße in
   88 Prozent Weiss (13,7:1) — sie sind das Angebot und nicht
   dessen Fußnote. Die Farbrollen für Kopf, Überschrift und
   Eyebrow kommen aus global.css 03 (.kh-section--dark); hier
   steht nur, was dort nicht steht.
   ========================================================== */

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

@media (min-width: 62em) {

  .kh-shops-offer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 4.5vw, 80px);
  }
}

.kh-shops-offer__group {
  padding-block-start: var(--kh-space-lg);
  border-block-start: 2px solid var(--kh-color-primary-on-dark);
}

.kh-shops-offer__title .elementor-heading-title {
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-inverse);
  max-width: 22ch;
}

.kh-shops-offer__body p {
  margin: var(--kh-space-sm) 0 0;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
}

/* Die zweite Ebene. Kein zweiter roter Strich — sie wäre sonst
   so schwer wie die Gruppe darüber. Eine Haarlinie darüber und
   ein kurzer Strich je Zeile genügen, um die Zugehörigkeit zu
   zeigen. */
.kh-shops-offer__sub {
  margin-block-start: var(--kh-space-lg);
  padding-block-start: var(--kh-space-lg);
  border-block-start: 1px solid rgba(255, 255, 255, .18);
}

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

.kh-shops-offer__sub li {
  position: relative;
  padding-inline-start: var(--kh-space-lg);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: rgba(255, 255, 255, .88);
}

.kh-shops-offer__sub li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .65em;
  inline-size: 12px;
  block-size: 2px;
  background-color: var(--kh-color-primary-on-dark);
}


/* ==========================================================
   17. HERKUNFT DER ERFAHRUNG
   ==========================================================
   Die Zahl gross, daneben der Satz, der sie einordnet. Sie ist
   hier kein Schmuck: Sie ist die einzige Begründung dafür, warum
   jemand ausgerechnet uns um Rat fragen sollte.
   ========================================================== */

/* ZWEI ZAHLEN, NICHT EINE
   Vorher stand die 14 allein neben ihrem Satz. Sie beantwortet
   „wie viel Erfahrung", aber nicht „wie lange". Die Jahreszahl
   steht bereits auf „Über uns" („Seit 1999 …") und ist damit
   belegt — sie wird hier nicht neu behauptet, sondern daneben
   gestellt. Beide Zahlen erscheinen auf der Seite genau einmal.

   Die Überschrift ist der stärkste Satz des Abschnitts, der
   vorher im Fließtext stand. Der bisherige Satz neben der 14
   ist jetzt deren Bildunterschrift. Kein Wort ist neu. */

.kh-shops-network__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  margin-block-end: clamp(20px, 2vw + 8px, 32px);
  padding-block-end: clamp(20px, 2vw + 8px, 32px);
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-shops-network__value {
  display: block;
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-primary-500);
}

.kh-shops-network__caption {
  display: block;
  margin: var(--kh-space-sm) 0 0;
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-700);
  max-width: 24ch;
}

.kh-shops-network__label {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
  max-width: 24ch;
}

.kh-shops-network__body {
  margin: var(--kh-space-md) 0 0;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
  max-width: 58ch;
}

/* KEINE ORTSLISTE AUF DIESER SEITE
   Ein erster Entwurf führte hier die vierzehn Städte als Verweise.
   Das war eine Fehlannahme über den Zweck der Seite: sie richtet
   sich nicht an Kundinnen und Kunden, die einen Shop suchen,
   sondern an Shopinhaber und Gründer, die Unterstützung suchen.
   Die vierzehn Shops sind hier Beleg für Erfahrung, kein
   Verzeichnis. Wer einen Shop sucht, findet ihn unter
   /unsere-filialen/ und auf /kontakt/. */


/* ==========================================================
   17. TERMIN UND KONTAKT
   ==========================================================
   Der wichtigste Satz der Seite steht hier: man braucht keinen.
   Deshalb bekommt er die rote Kante und nicht der Terminweg.
   ========================================================== */

/* Vorher ein Absatz auf grauer Fläche mit roter Kante links —
   von der Seite aus gelesen eine Fußnote zwischen zwei starken
   Abschnitten. Jetzt eine Aussage: der Satz trägt Satzgröße
   statt Fließtextgröße, der rote Strich liegt darüber statt
   daneben, und die Einladung steht in eigener Zeile. Der Text
   ist unverändert. */

/* NACHTRAG 19.10.2026 · AUS DER TOTEN ZONE WIRD EINE BRÜCKE
   -------------------------------------------------------------
   Der Abschnitt hiess „Sehen Sie es sich an", beschrieb aber ein
   Gespräch und enthielt keinen einzigen Link — eine Aufforderung
   ohne Ziel. Überschrift jetzt „Sprechen wir darüber", und der
   Weg dorthin steht daneben: derselbe Kontaktpfad wie im
   Abschluss, in der sekundären Form, damit der Abschluss die
   stärkere Handlung bleibt. */

.kh-shops-appointment__inner {
  max-width: var(--kh-container-narrow);
  margin-inline: auto;
  padding-block-start: clamp(20px, 2vw + 8px, 32px);
  border-block-start: 3px solid var(--kh-color-primary-500);
}

.kh-shops-appointment__cta { margin-block-start: var(--kh-space-lg); }


/* ==========================================================
   DREI ABSCHLÜSSE AUS EINER KOMPONENTE (19.10.2026)
   ==========================================================
   kh-cta-panel ist eine globale Komponente: dunkle Tafel mit
   Radius, rotem Anschnitt links und Ringmotiv. Alle vier Seiten
   dieses Stapels endeten damit identisch — vier gleiche schwarze
   Karten hintereinander.

   Die Komponente selbst bleibt unangetastet (sie trägt auch die
   Startseite und die Shopübersicht). Hier stehen nur drei
   Modifikatoren, einer je Rolle:

     --surface   /leistungen/        heller Abschluss. Die Seite
                                     ist lang und ausführlich; sie
                                     endet freundlich und offen,
                                     nicht mit einer schweren
                                     Tafel.
     --rail      /vodafone-loesungen Schiene statt Tafel. Die
                                     Orientierung ist abgeschlossen,
                                     der Abschluss ist eine Zeile,
                                     keine Bühne.
     --band      /vodafone-partner   durchgehendes dunkles Band mit
                                     roter Oberkante. Kein
                                     schwebendes Kästchen wie bei
                                     Geschäftskunden — dort bleibt
                                     die Tafel, hier schliesst eine
                                     Fläche die Seite ab.

   Geschäftskunden behält die unveränderte Tafel. Vier Rollen,
   vier Abschlüsse, eine Komponente.
   ========================================================== */

/* --- Heller Abschluss (93) -------------------------------- */

.kh-cta-panel.kh-cta-panel--surface > .kh-container {
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
}

/* Das Rot wandert von der linken Kante an die Oberkante: auf
   heller Fläche ist der seitliche Anschnitt ein Fremdkörper. */
.kh-cta-panel--surface > .kh-container::before {
  inset-block: 0 auto;
  inset-inline: 0;
  inline-size: auto;
  block-size: 4px;
}

/* Das Ringmotiv ist für Dunkel gerechnet (Weiss mit 5 bis 9
   Prozent). Auf Weiss wäre es unsichtbar oder schmutzig. */
.kh-cta-panel--surface > .kh-container::after { content: none; }

/* --- Schiene (104) ---------------------------------------- */

.kh-cta-panel.kh-cta-panel--rail { padding-block: 0; }

/* KORREKTURRUNDE · DER SATZSPIEGEL MUSS STEHEN BLEIBEN
   Erste Fassung setzte padding-inline auf 0. Damit fiel nicht
   nur das Polster der Tafel weg, sondern auch die Seitenrinne
   des Containers: gemessen bei 390px begann der Text bei 10px
   statt bei 26px wie in jedem anderen Abschnitt der Seite. Die
   Rinne kommt deshalb zurück — sie gehört dem Container, nicht
   der Tafel. */
.kh-cta-panel.kh-cta-panel--rail > .kh-container {
  padding-inline: var(--kh-container-pad);
  padding-block: clamp(28px, 2.5vw + 12px, 52px);
  border-radius: 0;
  background-color: transparent;
  border-block: 1px solid var(--kh-color-line-200);
}

.kh-cta-panel--rail > .kh-container::before,
.kh-cta-panel--rail > .kh-container::after { content: none; }

/* --- Band (103) ------------------------------------------- */

.kh-cta-panel.kh-cta-panel--band {
  padding-block: 0;
  background-color: var(--kh-color-surface-900);
  border-block-start: 3px solid var(--kh-color-primary-500);
}

.kh-cta-panel.kh-cta-panel--band > .kh-container {
  padding-inline: var(--kh-container-pad);
  padding-block: clamp(44px, 4vw + 20px, 88px);
  border-radius: 0;
  background-color: transparent;
}

.kh-cta-panel--band > .kh-container::before { content: none; }

/* Das Motiv rückt weiter nach aussen, weil das Band breiter ist
   als die Tafel es war. */
.kh-cta-panel--band > .kh-container::after { inset-inline-end: -16%; }

/* --- Farbrollen der beiden hellen Abschlüsse --------------- */

/* Die Rollen im Panel stehen global mit zwei Klassen (24.1).
   Drei Klassen drehen sie für die hellen Varianten zurück. */
.kh-cta-panel.kh-cta-panel--surface .kh-h2,
.kh-cta-panel.kh-cta-panel--rail .kh-h2 { color: var(--kh-color-ink-900); }

.kh-cta-panel.kh-cta-panel--surface .kh-prose,
.kh-cta-panel.kh-cta-panel--rail .kh-prose { color: var(--kh-color-ink-700); }

.kh-cta-panel.kh-cta-panel--surface p:not([class]),
.kh-cta-panel.kh-cta-panel--rail p:not([class]) { color: var(--kh-color-ink-700); }

.kh-cta-panel.kh-cta-panel--surface .kh-services-cta__note,
.kh-cta-panel.kh-cta-panel--rail .kh-solutions-cta__note { color: var(--kh-color-ink-500); }

.kh-shops-appointment__title .elementor-heading-title {
  font-family: var(--kh-font-heading);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.15;
  letter-spacing: -.028em;
  color: var(--kh-color-ink-900);
  max-width: 18ch;
}

.kh-shops-appointment__body p {
  margin: var(--kh-space-md) 0 0;
  font-size: var(--kh-text-lead);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
  max-width: 54ch;
}

.kh-shops-appointment__body p + p {
  font-size: var(--kh-text-body);
  color: var(--kh-color-ink-500);
}


/* ==========================================================
   18. ABSCHLUSS BEIDER UNTERSEITEN
   ==========================================================
   Gleiche Bauart wie der Abschluss von /leistungen/, damit die
   drei Seiten am Ende gleich klingen.
   ========================================================== */

.kh-solutions-cta__inner,
.kh-shops-cta__inner { max-width: var(--kh-container-max); }

/* „Vodafone Lösungen" bleibt bei zwei Zonen — Aussage und
   Handlung. Nur der Abschluss dieser Seite bekommt eine dritte
   für das Motiv (siehe 18b). */
@media (min-width: 62em) {

  .kh-solutions-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
  }
}

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

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


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

   Also: das ::after wird für diesen Abschnitt abgeschaltet,
   Ringe und Zeichen liegen gemeinsam auf einem eigenen,
   stehenden Element, und das Zeichen ist dessen Rasterkind —
   damit ist die Zentrierung gerechnet, nicht ausgerichtet.

   KEIN ÜBERLAPPEN
   Das Motiv ist eine eigene Rasterspalte, kein absolut
   gesetztes Element. Dass es Text und Schaltfläche nicht
   überdeckt, ist damit eine Frage des Aufbaus. Die Ringe
   dürfen an der Panelkante angeschnitten werden — sie sind
   kein Markenzeichen; ihr Mittelpunkt liegt bei 0,725
   Spaltenbreiten und damit stets innerhalb der Spalte.

   Diese Regeln gelten ausschliesslich für .kh-shops-cta.
   „Vodafone Lösungen" und „Leistungen" behalten ihr
   gedrehtes Ringmotiv aus global.css unverändert.
   ========================================================== */

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

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

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

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

@media (min-width: 62em) {

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

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

  .kh-shops-cta__mark {
    inline-size: var(--kh-cta-ring);
    justify-self: start;
    margin-inline-end: calc(var(--kh-cta-motiv) - var(--kh-cta-ring));
  }

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


/* ==========================================================
   08. FOKUS UND BEWEGUNG — hier bewusst NICHTS
   ==========================================================
   Fokusring, Tap-Ziele und die Rücknahme der Bewegung sind in
   global.css geregelt und gelten hier unverändert. Die einzige
   Ausnahme steht oben bei der Sprungleiste, weil deren
   Unterstrich eine eigene Übergangseigenschaft hat.
   ========================================================== */