@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   contact.css · Seite „Kontakt"
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (global.css)
   Präfix    : kh-contact-  ·  Schema: kh-block__element--modifier
   --------------------------------------------------------------------------
   WAS HIER STEHT
   Der Kopf, die drei Kontaktwege, das Formular, die Filialverknüpfung
   und der Abschluss. Dazu die Übersetzung des Elementor-Pro-Formulars
   in die Formularbausteine des Designsystems (global.css 06).

   WARUM DAS FORMULAR ÜBERSETZT WIRD UND NICHT NACHGEBAUT
   global.css 06 definiert .kh-field, .kh-checkbox und die Fehlerzustände
   bereits vollständig — aber für eigenes Markup. Elementor Pro bringt
   eigene Klassen mit (.elementor-field-group, .elementor-field-textual,
   .elementor-acceptance-field). Ein handgebautes Formular hätte die
   Optik billiger bekommen und dafür Versand, Validierung, Spamschutz und
   die Datenschutzbestätigung selbst tragen müssen. Deshalb bleibt das
   Widget, und diese Datei legt die Designsystem-Werte darüber.

   GEWICHTUNG · ELEMENTOR-FALLE
   Elementor erzeugt pro Seite eine eigene Stilvorlage mit Selektoren der
   Gewichtung (0,2,0), etwa

       .elementor-element-<id> .elementor-field-group { padding-right: … }

   Ob die vor oder nach dieser Datei steht, hängt an der Reihenfolge der
   Warteschlange und ist nicht verlässlich. Jede Regel, die gegen eine
   Elementor-Vorgabe arbeitet, trägt hier deshalb drei Klassen (0,3,0)
   oder mehr. Das ist kein Vorrat, sondern das Minimum, das gewinnt —
   ohne !important und ohne Elementor-IDs.

   KEIN reCAPTCHA
   Der Spamschutz läuft über ein verstecktes Honeypot-Feld des Widgets.
   Es darf sichtbar nicht auftauchen und bekommt hier keine Fläche.
   ========================================================================== */


/* ==========================================================
   00. VERTIKALER RHYTHMUS
   ==========================================================
   Der Kopf bleibt bewusst flacher als auf „Karriere" und
   „Über uns": wer hier landet, will etwas erledigen und keine
   Bühne sehen. Das Formular bekommt dafür den grössten Raum.
   ========================================================== */

.kh-contact-hero   { padding-block: clamp(44px, 3.5vw + 22px, 84px) clamp(40px, 3vw + 18px, 72px); }
.kh-contact-routes { padding-block: clamp(40px, 3vw + 16px, 64px); }
.kh-contact-form-section { padding-block: clamp(48px, 4vw + 24px, 96px); }
.kh-contact-shops  { padding-block: clamp(48px, 4vw + 20px, 88px); }
/* NACHTRAG 20.10.2026 · DER ABSCHLUSS IST EIN HINWEIS, KEINE BÜHNE
   Nach Wegen, Formular und Shophinweis steht am Ende nur noch
   ein Verweis auf die Leistungsseite. Dafür brauchte die Tafel
   nicht dieselbe Höhe wie ein Abschnitt mit eigener Aussage —
   gemessen 518px für drei Zeilen und einen Knopf. Die Tafel
   bleibt (sie ist die einzige dunkle Fläche der Seite und gibt
   ihr einen Schluss), nur ihr Polster wird kleiner. */
.kh-contact-cta    { padding-block: clamp(36px, 2.5vw + 16px, 56px); }

.kh-contact-cta > .kh-container { padding: clamp(28px, 2.2vw + 12px, 44px); }


/* ==========================================================
   01. KOPFBEREICH — ROTE MARKENFLÄCHE
   ==========================================================
   Farbrollen, Pillenform des Eyebrows und Ringgeometrie kommen
   aus global.css (Abschnitt 23), weil der Abschnitt zusätzlich
   kh-section--brand trägt. Hier steht nur Mass, Lage und Dauer.

   Die Komposition ist die von „Karriere" gespiegelt gedacht:
   Text links, Motiv rechts — aber flacher, mit einer Zusatzzeile
   unter dem Lead statt eines Schaltflächenpaares. Diese Zeile ist
   die wichtigste Auskunft der ganzen Seite: man muss hier gar
   nichts ausfüllen, um beraten zu werden.
   ========================================================== */

.kh-contact-hero {
  --kh-ring-cx: 78%;
  --kh-ring-cy: 50%;

  /* Kleiner als auf „Karriere" (dort clamp(64px, 7,6vw, 110px)),
     weil dieser Kopf rund ein Drittel flacher ist. Ein Motiv in
     Karriere-Grösse wäre hier oben und unten so weit beschnitten,
     dass von den Ringen nur zwei Bögen übrig blieben. */
  --kh-mark-size: clamp(56px, 6.2vw, 92px);

  /* KLARZONE
     Der Lead endet bei 1024px auf halber Breite; bis zum
     Mittelpunkt des Motivs bleiben 58 Prozent des Radarradius.
     Mit 52 Prozent Klarzone ist die Maske dort bereits auf 0,19
     abgefallen — 0,19 * 0,30 = 0,057 Weiss, zusammen mit dem Band
     der zweiten Welle rund 0,08 und damit 4,66:1. Über AA.
     Derselbe gerechnete Wert wie auf „Karriere", gleiche Lage. */
  --kh-radar-klar: 52%;

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

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

/* Satzbreite und Polster von kh-section-header zurückgenommen:
   die Zusatzzeile darunter setzt ihren Abstand selbst. */
.kh-contact-hero__header {
  max-width: none;
  margin-block-end: 0;
}

.kh-contact-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: 15ch;
}

/* ELEMENTOR-FALLE · Satzbreite gehört auf das innere Element,
   nicht auf das Widget — siehe Kopfkommentar. */
.kh-contact-hero .kh-section-header__lead .elementor-heading-title {
  max-width: 46ch;
  font-weight: var(--kh-font-weight-regular);
}

/* Die Zusatzzeile unter dem Lead. Sie steht an einer Haarlinie,
   damit sie als Auskunft gelesen wird und nicht als dritter Satz
   des Leads. Volles Weiss, weil auf #E60000 nur volles Weiss den
   AA-Wert erreicht (4,81:1). */
.kh-contact-hero__note {
  margin-block-start: clamp(20px, 2vw + 8px, 32px);
  padding-block-start: var(--kh-space-md);
  border-block-start: 1px solid rgba(255, 255, 255, .28);
  max-width: 46ch;
}

.kh-contact-hero__note .elementor-heading-title,
.kh-contact-hero__note p {
  margin: 0;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.5;
  color: var(--kh-color-ink-inverse);
}


/* ==========================================================
   02. DIE DREI WEGE
   ==========================================================
   Filiale · Termin oder Frage · Bewerbung.

   WARUM GENAU DIESE DREI UND NICHT DREI FORMULAR-EINSTIEGE
   Auf dieser Website gibt es keine zentrale Telefonnummer und
   keine zentrale E-Mail-Adresse — die echten Kontaktdaten liegen
   je Shop (Telefon und E-Mail stehen an jedem Standort). Ein
   Weg muss also dorthin führen. Der zweite ist das Formular auf
   dieser Seite, das Terminwunsch und allgemeine Anfrage trägt.
   Der dritte trennt Bewerbungen ab, weil sie über convi Careers
   einen eigenen, datenschutzseitig getrennten Weg haben.

   Drei Kästchen nebeneinander wären die naheliegende Form. Sie
   hätten alle drei gleich schwer gemacht. Stattdessen: eine
   Zeilenliste mit Haarlinien, in der der erste Weg mehr Raum
   bekommt — er ist der einzige mit echten Durchwahlen.

   WAS DARAN NOCH NICHT STIMMTE
   Zwei Dinge, beide nachgemessen:

   1. Der Abschnitt begann ohne jeden Kopf direkt unter dem Hero.
      Die drei Wege standen da, ohne dass ein Satz sie einführte.
   2. Die 1,4fr der ersten Spalte reichten optisch nicht: gemessen
      standen die drei Zeilen bei 1440px auf 468 / 334 / 334px
      Breite und alle drei auf derselben Höhe (224px). Wer die
      Seite überfliegt, sieht drei gleichwertige Spalten — und
      damit gerade keine Priorität.

   Die Priorität ist aber eindeutig und steht schon im Aufbau der
   Seite: der Hero nennt das Formular zuerst, der Formularabschnitt
   trägt die Sprungmarke #anfrage, und Weg 02 verwies darauf. Das
   Formular ist der Hauptweg.

   Jetzt trägt es diese Rolle auch sichtbar: es steht als erster
   Weg auf einer eigenen Fläche, die über die volle Höhe beider
   anderen Zeilen reicht. Die beiden übrigen bleiben Zeilen mit
   Haarlinie — Verweise, keine Flächen. Ein asymmetrisches 2+1
   statt dreier Kästchen.
   ========================================================== */

/* Der Kopf des Abschnitts. Er sagt, wonach die drei Wege
   sortiert sind, und nimmt dem Abschnitt den kalten Beginn. */
.kh-contact-routes__header { margin-block-end: clamp(24px, 2vw + 12px, 44px); }

.kh-contact-routes .kh-h2 .elementor-heading-title {
  max-width: 20ch;
  letter-spacing: -.025em;
}

.kh-contact-routes__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-contact-routes__item { border-block-end: 1px solid var(--kh-color-line-200); }

.kh-contact-routes__link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--kh-space-md);
  align-items: start;
  padding-block: var(--kh-space-lg);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

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

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

.kh-contact-routes__num {
  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.55;
  color: var(--kh-color-primary-text);
}

/* Titel und Text sind <span>, weil sie in einem <a> stehen. Die
   Blockdarstellung kommt deshalb aus dem CSS. */
.kh-contact-routes__title {
  display: block;
  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-contact-routes__body {
  display: block;
  margin: 0;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
  max-width: 56ch;
}

/* Das Ziel wird benannt, nicht als Schaltfläche verkleidet. Die
   ganze Zeile ist der Treffer; dieser Text sagt nur, wohin. */
.kh-contact-routes__target {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  margin-block-start: var(--kh-space-sm);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
}

.kh-contact-routes__target::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-contact-routes__link:hover .kh-contact-routes__target::after {
  transform: rotate(45deg) translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .kh-contact-routes__link,
  .kh-contact-routes__target::after { transition: none; }
}

/* --- 02.1 Der Hauptweg als Fläche ------------------------- */

/* Nur dieser eine Weg bekommt eine Fläche. Sie ist weiss auf
   weissem Grund und wird allein durch die Haarlinie, den Radius
   und die rote Oberkante sichtbar — dieselben Mittel wie auf den
   übrigen Seiten. Keine Karte für alle drei: dann wäre es wieder
   ein Kachelraster. */
.kh-contact-routes__item--primary {
  border-block-end: 0;
  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-000);
}

.kh-contact-routes__item--primary .kh-contact-routes__link {
  padding: clamp(24px, 2.2vw + 8px, 40px);
  border-radius: inherit;
}

.kh-contact-routes__item--primary .kh-contact-routes__title { font-size: var(--kh-text-h3); }

.kh-contact-routes__item--primary .kh-contact-routes__body { font-size: var(--kh-text-lead); }

/* Auf der Fläche wird aus dem Zielhinweis eine echte Handlung —
   die einzige Schaltflächenoptik in diesem Abschnitt. */
.kh-contact-routes__item--primary .kh-contact-routes__target {
  margin-block-start: var(--kh-space-lg);
  min-block-size: var(--kh-tap-min);
  padding-inline: var(--kh-space-lg);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-ink-inverse);
  transition: background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-contact-routes__item--primary .kh-contact-routes__link:hover { background-color: transparent; }

.kh-contact-routes__item--primary .kh-contact-routes__link:hover .kh-contact-routes__target {
  background-color: var(--kh-color-primary-600);
}

.kh-contact-routes__item--primary .kh-contact-routes__num { color: var(--kh-color-primary-text); }

@media (prefers-reduced-motion: reduce) {
  .kh-contact-routes__item--primary .kh-contact-routes__target { transition: none; }
}

/* Ab 62em: die Fläche links über zwei Zeilen, die beiden
   Verweise rechts untereinander. */
@media (min-width: 62em) {

  .kh-contact-routes__list {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    grid-template-rows: auto auto;
    column-gap: clamp(32px, 4vw, 72px);
    border-block-start: 0;
  }

  .kh-contact-routes__item--primary {
    grid-column: 1;
    grid-row: 1 / span 2;
    border-block-start: 2px solid var(--kh-color-primary-500);
    border-radius: 0 0 var(--kh-radius-lg) var(--kh-radius-lg);
  }

  /* Die Fläche ist so hoch wie die beiden Zeilen daneben, ihr
     Inhalt aber kürzer — gemessen 210 von 350px. Oben angelegt
     blieb unten ein Loch von 140px. Mittig verteilt sich derselbe
     Raum auf beide Seiten und liest sich als Proportion. */
  .kh-contact-routes__item--primary .kh-contact-routes__link {
    block-size: 100%;
    align-content: center;
  }

  /* Die beiden Verweise stehen in Spalte 2 und behalten ihre
     Haarlinien — oben wie unten, damit sie als Paar lesen. */
  .kh-contact-routes__item:not(.kh-contact-routes__item--primary) {
    grid-column: 2;
    border-block-start: 1px solid var(--kh-color-line-200);
    border-block-end: 1px solid var(--kh-color-line-200);
  }

  .kh-contact-routes__item:not(.kh-contact-routes__item--primary) + .kh-contact-routes__item {
    border-block-start: 0;
  }

  .kh-contact-routes__item:not(.kh-contact-routes__item--primary) .kh-contact-routes__link {
    block-size: 100%;
    padding-block: var(--kh-space-lg);
  }
}


/* ==========================================================
   03. FORMULAR — ABSCHNITT UND RAHMEN
   ==========================================================
   Zwei Spalten: links die Eingabe, rechts die Auskunft darüber,
   was mit den Angaben geschieht. Die Auskunft steht nicht unter
   dem Formular, weil sie dort erst nach dem Absenden gelesen
   würde — und dann ist es zu spät.
   ========================================================== */

@media (min-width: 62em) {

  .kh-contact-form-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
}

.kh-contact-form-section .kh-h2 .elementor-heading-title {
  max-width: 18ch;
  letter-spacing: -.025em;
}

/* DAS FORMULAR LIEGT JETZT AUF EINER FLÄCHE
   -------------------------------------------------------------
   Vorher stand es frei auf Weiss. Die Felder waren bereits sauber
   übersetzt, aber ohne Fläche liest sich ein Formular wie ein
   Formular und nicht wie ein Teil der Seite: nichts fasste die
   neun Felder zusammen, nichts trennte sie vom Fliesstext darüber.

   Der Abschnitt trägt deshalb jetzt kh-section--surface, und das
   Formular liegt weiss darauf — Haarlinie, Radius, ein sehr
   flacher Schatten. Kein Milchglas, keine dicke Karte: die Fläche
   soll das Formular halten, nicht auffallen.

   Die Fussnote zu den Pflichtfeldern bleibt ausserhalb. Sie
   gehört zum Formular, aber nicht zwischen die Felder. */
.kh-contact-form.kh-contact-form {
  padding: clamp(24px, 2.4vw + 8px, 48px);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-000);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -24px rgba(0, 0, 0, .35);
}

/* Die Auskunftsspalte: Haarlinie oben statt Karte, damit sie
   neben dem Formular ruhig bleibt und es nicht verdoppelt.

   SIE BLEIBT JETZT STEHEN
   Gemessen bei 1440px war die Auskunft 330px hoch, die
   Formularspalte daneben 869 — 539px, in denen rechts nichts
   stand. Eine zweite Fläche hätte das Formular verdoppelt, mehr
   Text wäre erfunden gewesen. Also bleibt die Spalte beim
   Scrollen stehen: sie steht dann neben dem Feld, das gerade
   ausgefüllt wird, und der leere Raum entsteht gar nicht erst.

   Der Versatz ist der gemessene Kopfbereich (76px, sticky) plus
   ein Innenabstand. */
.kh-contact-aside {
  padding-block-start: var(--kh-space-md);
  border-block-start: 2px solid var(--kh-color-primary-500);
}

@media (min-width: 62em) {

  .kh-contact-form-section__grid > .elementor-widget-html {
    position: sticky;
    inset-block-start: calc(76px + var(--kh-space-lg));
  }
}

.kh-contact-aside__title {
  margin: 0 0 var(--kh-space-sm);
  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-contact-aside__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-md);
}

.kh-contact-aside__item {
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-700);
}

.kh-contact-aside__item strong {
  display: block;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-900);
  margin-block-end: 2px;
}


/* ==========================================================
   04. FORMULAR — ÜBERSETZUNG DES ELEMENTOR-WIDGETS
   ==========================================================
   Werte aus global.css 06. Alles, was gegen eine Elementor-
   Vorgabe arbeitet, steht mit mindestens drei Klassen.
   ========================================================== */

/* --- 04.1 Raster ------------------------------------------ */

/* GEMESSEN, NICHT GESCHÄTZT
   Der erste Entwurf setzte die Feldgruppe auf flex/column und
   nahm Elementors Rand mit margin: 0 zurück. Beides ging schief,
   und beides war am gerenderten Ergebnis zu sehen:

   1. Elementors flex-wrap: wrap blieb stehen. Eine Flexbox mit
      Richtung column UND Umbruch legt ihre Kinder in SPALTEN um,
      sobald die Höhe begrenzt ist — und als Rasterzelle ist sie
      das. Ergebnis bei 390px: die Beschriftung stand links, das
      Eingabefeld rechts daneben und ragte 81px über den Rand
      hinaus. Gemessen: Feld links bei 112px, 318px breit, rechte
      Kante 430 bei 390px Fensterbreite.

   2. margin: 0 und padding: 0 kamen nicht an. Gemessen blieben
      margin: 0 -5px -10px am Wrapper und padding: 0 5px an der
      Gruppe stehen — Elementors Regel wiegt an dieser Stelle
      schwerer als drei Klassen.

   Die Antwort auf beides ist dieselbe: nicht mit der Flexbox
   verhandeln, sondern sie abschalten. display: block stapelt
   Beschriftung und Feld ohne jede Aushandlung; die Gewichtung
   steigt durch die doppelte Klasse auf (0,4,0) — dasselbe
   Verfahren, das global.css bei .kh-cluster.kh-cluster benutzt,
   und weiterhin ohne !important und ohne Elementor-IDs. */
.kh-contact-form.kh-contact-form .elementor-form .elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--kh-space-md);
  row-gap: var(--kh-space-lg);
  margin: 0;
}

.kh-contact-form.kh-contact-form .elementor-form .elementor-field-group {
  display: block;
  grid-column: span 12;

  /* Die Feldgruppe trägt zusätzlich .elementor-column und
     .elementor-col-50. Elementor gibt darüber width: 50% — in
     einer Rasterzelle, die bereits sechs von zwölf Spalten breit
     ist, halbiert das ein zweites Mal. Gemessen bei 1440px:
     173px Feldbreite in einer 346px breiten Zelle.
     auto füllt die Zelle und lässt das Raster entscheiden. */
  inline-size: auto;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
}

/* Elementors Spaltenklassen werden auf das Raster abgebildet.
   Unter 48em bleibt alles einspaltig — zwei halbe Felder
   nebeneinander sind auf 360px keine Erleichterung. */
@media (min-width: 48em) {
  .kh-contact-form.kh-contact-form .elementor-form .elementor-field-group.elementor-col-50 { grid-column: span 6; }
}


/* --- 04.2 Beschriftung ------------------------------------ */

/* Die Beschriftung steht über dem Feld. Der Abstand kommt aus
   einem Rand statt aus einem Flex-Gap — die Gruppe ist ein
   Block, siehe oben. */
.kh-contact-form.kh-contact-form .elementor-form .elementor-field-group > label.elementor-field-label {
  display: block;
  padding: 0;
  margin: 0 0 var(--kh-space-2xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
  color: var(--kh-color-ink-700);
}

/* Das Sternchen der Pflichtfelder steht im Markup von Elementor.
   Es bekommt die Markenfarbe, damit es nicht wie ein Satzzeichen
   aussieht. Die Auskunft, was es bedeutet, steht als Text unter
   dem Formular — eine Farbe allein darf keine Bedeutung tragen. */
.kh-contact-form .elementor-form .elementor-mark-required .elementor-field-label::after {
  color: var(--kh-color-primary-text);
  margin-inline-start: 2px;
}


/* --- 04.3 Eingabefelder ----------------------------------- */

/* Die Feldhöhe gilt nur für dieses Formular — global.css bleibt
   unberührt. 48px waren das Minimum aus dem Designsystem und für
   ein Formular mit neun Feldern spürbar knapp; 52px geben den
   Feldern auf der neuen Fläche Luft, ohne dass die Spalte wächst.
   Das Sprungziel von 44px ist damit weiterhin übererfüllt. */
.kh-contact-form { --kh-field-height: 52px; }

/* Entspricht .kh-field__input / __select / __textarea.
   Die Mindesthöhe kommt aus --kh-field-height, die Schriftgrösse
   ist verbindlich 16px: darunter zoomt iOS Safari beim Fokus
   automatisch hinein. */
.kh-contact-form .elementor-form .elementor-field-group .elementor-field-textual {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: var(--kh-field-height);
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-900);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-field);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition:
      border-color var(--kh-transition-base) var(--kh-ease-standard),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-contact-form .elementor-form .elementor-field-group textarea.elementor-field-textual {
  min-block-size: calc(var(--kh-field-height) * 2.75);
  line-height: var(--kh-leading-normal);
  resize: vertical;
}

.kh-contact-form .elementor-form .elementor-field-group .elementor-field-textual::placeholder {
  color: var(--kh-color-ink-400);
  opacity: 1;
}

.kh-contact-form .elementor-form .elementor-field-group .elementor-field-textual:hover {
  border-color: var(--kh-color-ink-400);
}

.kh-contact-form .elementor-form .elementor-field-group .elementor-field-textual:focus {
  border-color: var(--kh-color-focus);
  outline: none;
}

.kh-contact-form .elementor-form .elementor-field-group .elementor-field-textual:focus-visible {
  box-shadow: var(--kh-shadow-focus);
}

/* AUSWAHLFELD · WARUM HIER KEIN EIGENER PFEIL STEHT
   Der erste Entwurf zeichnete den Pfeil selbst, als gedrehtes
   Rahmenstück auf der Feldgruppe — so wie .kh-field__select-wrap
   in global.css es tut. Beim Nachsehen im gerenderten Markup
   stellte sich heraus: Elementor bringt bereits einen mit,

       <div class="elementor-field elementor-select-wrapper remove-before">
         <div class="select-caret-down-wrapper"><svg …></div>
         <select …>

   und positioniert ihn über den Wrapper. Zwei Pfeile in einem
   Feld wären die Folge gewesen.

   Der Pfeil von Elementor bleibt deshalb. Er bekommt hier nur die
   Farbe und die Grösse aus dem Designsystem — und das Feld das
   Polster, damit der Text nicht darunterläuft. */
.kh-contact-form .elementor-form .elementor-field-type-select .elementor-field-textual {
  padding-inline-end: var(--kh-space-2xl);
  cursor: pointer;
}

.kh-contact-form .elementor-form .elementor-field-type-select .select-caret-down-wrapper {
  inset-inline-end: var(--kh-space-md);
  inline-size: 12px;
  color: var(--kh-color-ink-500);
}

.kh-contact-form .elementor-form .elementor-field-type-select .select-caret-down-wrapper svg {
  inline-size: 12px;
  block-size: 12px;
  fill: currentColor;
}


/* --- 04.4 Datenschutzbestätigung -------------------------- */

/* Elementor rendert das Acceptance-Feld als verstecktes Label
   plus eine Untergruppe aus Kästchen und sichtbarem Label. Die
   Optik kommt von .kh-checkbox aus global.css, hier auf die
   Elementor-Klassen übersetzt. Das Kästchen bleibt das native
   Element: es ist fokussierbar, bedienbar und ohne JavaScript
   vorhanden. Nur seine Darstellung wird ersetzt. */

.kh-contact-form .elementor-form .elementor-field-type-acceptance .elementor-field-subgroup {
  margin: 0;
}

/* Kästchen und Text stehen nebeneinander, oben ausgerichtet: so
   sitzt das Kästchen auf der ersten Zeile und nicht in der Mitte
   eines zweizeiligen Satzes. Die Mindesthöhe trägt das Label
   selbst (siehe unten) — hier noch einmal wäre sie doppelt. */
.kh-contact-form .elementor-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: var(--kh-space-sm);
}

/* WARUM HIER accent-color UND NICHT DIE MARKE AUS global.css
   .kh-checkbox zeichnet das Kästchen selbst: der echte Eingang
   liegt unsichtbar darüber, die sichtbare Marke ist ein eigenes
   <span class="kh-checkbox__mark">. Dieses <span> liefert das
   Elementor-Widget nicht, und es lässt sich ohne JavaScript auch
   nicht nachrüsten.

   Die Alternative wäre appearance: none plus ein selbst
   gezeichnetes Häkchen gewesen — als gedrehte Verläufe im
   Hintergrund, weil ein Eingabeelement kein zuverlässiges
   ::after trägt. Ein erster Ansatz in genau dieser Form stand
   hier und war falsch: er nahm dem Kästchen im angehakten
   Zustand die Füllung, das Häkchen stand frei auf Weiss.

   accent-color färbt stattdessen das native Kästchen. Das
   Häkchen zeichnet der Browser — in der richtigen Stärke, in
   jeder Zoomstufe, im Kontrastmodus des Betriebssystems und
   ohne eine einzige Regel, die kaputtgehen kann. Der sichtbare
   Unterschied zu .kh-checkbox ist die Randfarbe im nicht
   angehakten Zustand. Das ist der Preis, und er ist geringer
   als ein selbstgemaltes Häkchen, das auf einem Gerät fehlt. */
/* GRÖSSE DES ZIELS
   22px stammten aus .kh-checkbox in global.css. Dort ist das
   Kästchen nur die sichtbare Marke — das eigentliche Ziel ist das
   Label, das die ganze Zeile umschliesst.

   Hier umschliesst das Label nichts: Elementor stellt Kästchen und
   Text als Geschwister nebeneinander. Das Kästchen ist damit ein
   eigenes Ziel und wurde mit 22px gemessen.

   Es steht jetzt auf 24px und erfüllt damit WCAG 2.2 AA (2.5.8,
   Zielgrösse Minimum). Die geforderten 44px erreicht der
   zugehörige Text daneben: er ist über for/id verbunden, schaltet
   das Kästchen mit und ist zweizeilig rund 46px hoch. Ein 44px
   grosses Kästchen wäre die Alternative gewesen und hätte neben
   einem 14px-Text wie ein Fehler ausgesehen. */
.kh-contact-form .elementor-form .elementor-field-type-acceptance input[type="checkbox"] {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  accent-color: var(--kh-color-primary-500);
  cursor: pointer;
}

.kh-contact-form .elementor-form .elementor-field-type-acceptance input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Der Text ist das grosse Ziel. Er bekommt deshalb selbst die
   Mindesthöhe und einen Innenabstand, damit die Trefferfläche
   auch dann 44px hoch ist, wenn der Text einmal einzeilig bleibt
   (breite Fenster, grosse Schrift aus). */
/* WARUM BLOCK UND NICHT FLEX
   Der erste Entwurf machte das Label zur Flexbox, um den Text
   mittig auf 44px zu setzen. Das hatte zwei Folgen, die beide
   erst in der Messung auftauchten:

   1. Als Flexbox wächst das Label auf seine max-content-Breite,
      solange es selbst Flex-Kind ist. Bei 320px stand seine
      rechte Kante bei 338 — 18px über dem Fenster.
   2. Der Link auf die Datenschutzerklärung wurde dadurch zum
      Flex-Kind und damit zum Block. Ein Blocklink von 21,7px
      Höhe ist von der Inline-Ausnahme der Zielgrösse NICHT mehr
      gedeckt; als Teil eines Satzes wäre er es gewesen.

   Als Block umbricht der Text, bleibt im Fenster, und der Link
   bleibt ein Link im Satz. Die 44px kommen aus der Mindesthöhe;
   der Text beginnt oben und steht damit auf einer Linie mit dem
   Kästchen daneben. */
.kh-contact-form .elementor-form .elementor-field-type-acceptance .elementor-field-option label {
  display: block;
  min-block-size: var(--kh-tap-min);
  font-size: var(--kh-text-sm);
  line-height: 1.55;
  color: var(--kh-color-ink-700);
  cursor: pointer;
}

.kh-contact-form .elementor-form .elementor-field-type-acceptance .elementor-field-option label a {
  font-weight: var(--kh-font-weight-semibold);
}


/* --- 04.5 Honeypot ---------------------------------------- */

/* NACHGESEHEN STATT ANGENOMMEN
   Die erste Fassung versteckte .elementor-field-type-honeypot.
   Diese Klasse gibt es im Markup nicht. Elementor rendert das
   Feld als

       <div class="elementor-field-type-text">
         <input … style="display:none !important;">

   also mit dem Typ „text" und OHNE .elementor-field-group. Das
   Eingabefeld ist zwar unsichtbar, der umgebende Block wäre im
   Raster aber eine eigene Zelle geworden und hätte eine Lücke
   von einer Zeilenhöhe hinterlassen.

   Der Selektor greift genau diesen Fall: ein Feldtyp ohne
   Feldgruppe ist im Elementor-Formular immer der Honeypot. */
.kh-contact-form .elementor-form .elementor-field-type-text:not(.elementor-field-group) {
  display: none;
}

/* Das Acceptance-Feld läuft ohne eigene Beschriftung (der Text
   steht am Kästchen). Elementor gibt in dem Fall trotzdem ein
   leeres Label aus; es bekommt sonst den Abstand einer echten
   Beschriftung. */
.kh-contact-form .elementor-form .elementor-field-group > label.elementor-field-label:empty {
  display: none;
}


/* --- 04.6 Schaltfläche ------------------------------------ */

/* Die Absendeschaltfläche liegt nicht in .kh-button-wrap — das
   Widget rendert sie selbst. Die Werte von .kh-button--primary
   stehen deshalb hier noch einmal. Bewusst dupliziert und
   bewusst kommentiert: die Alternative wäre gewesen, global.css
   um einen Elementor-Formular-Selektor zu erweitern, und dort
   gehört ein Widget-Detail nicht hin. */
.kh-contact-form .elementor-form .elementor-field-type-submit {
  align-items: flex-start;
  margin-block-start: var(--kh-space-xs);
}

.kh-contact-form .elementor-form .elementor-field-type-submit button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-xs);
  inline-size: auto;
  min-block-size: var(--kh-control-height-lg);
  padding: 0 var(--kh-space-xl);
  border: 2px solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  transition:
      var(--kh-transition-colors),
      transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-contact-form .elementor-form .elementor-field-type-submit button[type="submit"]:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
}

.kh-contact-form .elementor-form .elementor-field-type-submit button[type="submit"]:active {
  background-color: var(--kh-color-primary-700);
  border-color: var(--kh-color-primary-700);
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .kh-contact-form .elementor-form .elementor-field-type-submit button[type="submit"] { transition: none; }
}


/* --- 04.7 Rückmeldungen ----------------------------------- */

/* Elementor gibt Erfolg und Fehler als .elementor-message aus.
   Die Optik kommt von .kh-message aus global.css: linke Kante
   in der Statusfarbe, ruhige Fläche, kein Ausrufezeichen-Icon. */
.kh-contact-form .elementor-form .elementor-message {
  display: block;
  margin-block-start: var(--kh-space-md);
  padding: var(--kh-space-md);
  border: 1px solid var(--kh-color-line-200);
  border-inline-start-width: 3px;
  border-radius: 0 var(--kh-radius-sm) var(--kh-radius-sm) 0;
  background-color: var(--kh-color-surface-050);
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-700);
}

.kh-contact-form .elementor-form .elementor-message.elementor-message-success {
  background-color: var(--kh-color-success-bg);
  border-inline-start-color: var(--kh-color-success);
  color: var(--kh-color-ink-900);
}

.kh-contact-form .elementor-form .elementor-message.elementor-message-danger {
  background-color: var(--kh-color-danger-bg);
  border-inline-start-color: var(--kh-color-danger);
  color: var(--kh-color-ink-900);
}

/* Fehlerzustand am einzelnen Feld: Elementor setzt
   aria-invalid="true". Die Farbe ist die Verstärkung, die
   Kennzeichnung für Hilfsmittel steht im Attribut. */
.kh-contact-form .elementor-form .elementor-field-group .elementor-field-textual[aria-invalid="true"] {
  border-color: var(--kh-color-danger);
  background-color: var(--kh-color-danger-bg);
}

.kh-contact-form .elementor-form .elementor-field-group .elementor-field-textual[aria-invalid="true"]:focus-visible {
  box-shadow: var(--kh-shadow-focus);
}

/* Der Hinweis auf die Pflichtfelder unter dem Formular. */
.kh-contact-form__legend {
  margin-block-start: var(--kh-space-md);
  font-size: var(--kh-text-sm);
  line-height: 1.6;
  color: var(--kh-color-ink-500);
}


/* ==========================================================
   05. FILIALVERKNÜPFUNG
   ==========================================================
   Kein zweiter Filialfinder. Der vollständige Finder steht auf
   „Unsere Filialen" und bleibt dort — ein zweiter hier hätte
   dieselbe Suche, dieselbe Karte und dieselbe Wartezeit noch
   einmal geladen.

   Was hier steht, ist der kurze Weg: das Bild eines Shops, ein
   Satz zur Erreichbarkeit und die Städte als Liste. Die
   Städtenamen sind echte Verweise auf die Standortseiten, auf
   denen Adresse, Telefon, E-Mail und Öffnungszeiten stehen.

   DIE LISTE WAR HANDARBEIT — JETZT NICHT MEHR
   Vierzehn <li> mit fest eingetippten Orten, Zusätzen und
   Adressen standen im Elementor-Inhalt. Das ist eine zweite
   Standortdatenbank ohne Pflege: zieht ein Shop um oder kommt
   einer dazu, bleibt die Liste stumm falsch. Sie kommt jetzt aus
   [kh_contact_shops] und damit über convi_booking_locations()
   aus \Convi\Locations\API — dieselbe Quelle wie die Buchung auf
   der Startseite.

   Statt der handgeschriebenen Zusätze steht die gepflegte Strasse
   unter dem Ort. Sie unterscheidet die beiden Hamburger und die
   beiden Offenburger Shops eindeutig und ist für alle anderen
   ebenfalls brauchbar.
   ========================================================== */

/* NACHTRAG 20.10.2026 · AUS DEM ZWEITEN SHOPVERZEICHNIS WIRD EIN HINWEIS
   -------------------------------------------------------------
   Hier standen drei Dinge, die es an anderer Stelle schon gibt:
   das AEZ-Foto (zum dritten Mal im Projekt), eine Liste aller
   vierzehn Shops (vollständig auf /shops/) und daneben der
   Verweis auf eben diese Übersicht. Die Kontaktseite war damit
   ein zweites Shopverzeichnis — gemessen 805px breit und 1230px
   schmal, für eine Information, die in zwei Sätze passt.

   Übrig bleibt die Rolle, die der Abschnitt hier wirklich hat:
   „Sie möchten lieber direkt in einen Shop?" Überschrift und
   Erklärung links, der Weg zur Übersicht rechts. Eine Zeile,
   kein Verzeichnis.

   Das Bild ersatzlos entfernt: ein viertes Vorkommen desselben
   Motivs hätte den Abschnitt nicht getragen, und ein leerer
   Bildplatz erst recht nicht. */

/* Nach dem Entfernen der Medienspalte trägt die Bandzeile nur
   noch EIN Kind: den Stapel mit Überschrift, Erklärung und
   Verweis. Geordnet wird deshalb der Stapel selbst — sonst
   stünde ein zweispaltiges Raster mit einem Element darin. */
.kh-contact-shops__band > .kh-stack {
  padding-block-start: var(--kh-space-lg);
  border-block-start: 1px solid var(--kh-color-line-200);
}

@media (min-width: 62em) {

  .kh-contact-shops__band > .kh-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(32px, 4vw, 72px);
    row-gap: var(--kh-space-sm);
    align-items: start;
  }

  .kh-contact-shops__band > .kh-stack > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .kh-contact-shops__band > .kh-stack > *:nth-child(2) { grid-column: 1; grid-row: 2; }

  /* Der Verweis steht rechts auf der Grundlinie der Überschrift,
     nicht unter dem Text — damit liest sich der Abschnitt als
     eine Zeile und nicht als dritter Absatz. */
  .kh-contact-shops__band > .kh-stack > *:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

.kh-contact-shops .kh-h2 .elementor-heading-title { max-width: 20ch; }

/* Die Städteliste. Zwei bis vier Spalten, je nach Platz — keine
   Kacheln, keine Rahmen: es sind Verweise, keine Karten. */
.kh-contact-shops__cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--kh-space-md);
  margin: var(--kh-space-lg) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--kh-color-line-200);
}

@media (min-width: 48em) {
  .kh-contact-shops__cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
  .kh-contact-shops__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 86em) {
  .kh-contact-shops__cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Zwei Zeilen statt einer: der Ort trägt die Zeile, die Strasse
   steht kleiner darunter. Nebeneinander hätte „Hamburg
   Schulterblatt 25" in einer Spalte von 144px (320px Fenster)
   nicht in eine Zeile gepasst — untereinander passt es auf jeder
   Breite und liest sich zugleich wie ein Adresseintrag. */
.kh-contact-shops__city-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-block-size: var(--kh-tap-min);
  padding-block: var(--kh-space-sm);
  border-block-end: 1px solid var(--kh-color-line-200);
  color: var(--kh-color-ink-900);
  text-decoration: none;
  transition: color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-contact-shops__city-link:hover { color: var(--kh-color-primary-text); }

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

.kh-contact-shops__city-name {
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.25;
}

/* Die Strasse kommt aus convi Locations. Zwei Shops liegen in
   derselben Stadt (Hamburg) und zwei in derselben (Offenburg) —
   ohne diese Zeile wären vier Einträge nicht unterscheidbar. */
.kh-contact-shops__city-add {
  font-size: var(--kh-text-sm);
  line-height: 1.3;
  color: var(--kh-color-ink-500);
}


/* ==========================================================
   06. ABSCHLUSS
   ==========================================================
   Vorher: eine Haarlinie, ein Satz, eine Umrissschaltfläche —
   gemessen 120px hoher Inhalt. Neben den Abschlüssen von
   „Geschäftskunden", „Über uns" und „Karriere", die alle auf
   derselben dunklen Fläche mit Ringmotiv und Zeichen stehen, war
   das keine Angleichung, sondern eine andere Liga.

   Übernommen wird deshalb derselbe, dort bereits freigegebene
   Bau: dunkle Fläche, roter Anschnitt links (die Signatur von
   kh-cta-panel aus global.css 24), und Ringe plus Zeichen
   gemeinsam auf einem eigenen, STEHENDEN Element. Das Zeichen ist
   dessen Rasterkind und damit rechnerisch zentriert, nicht
   ausgerichtet — ein mitdrehendes Markenzeichen kommt nicht in
   Frage, und das gedrehte ::after des Containers wird für diesen
   Abschnitt abgeschaltet.

   KEIN NEUER TEXT
   Die Aussage stand schon da, als ein Satz: „Noch unklar, worum
   es genau geht? Auf der Leistungsseite steht, wobei wir im Shop
   unterstützen." Sie ist jetzt in Überschrift und Fliesstext
   geteilt — dieselben Worte, nur in zwei Rollen. */

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

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

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

.kh-contact-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-contact-cta .kh-contact-cta__mark .elementor-widget-container { display: contents; }

.kh-contact-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-contact-cta {
    --kh-cta-motiv: clamp(200px, 18vw, 280px);
    --kh-cta-ring:  calc(var(--kh-cta-motiv) * 1.45);
  }

  /* Drei Zonen: Aussage · Handlung · Motiv. */
  .kh-contact-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .75fr) 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-contact-cta__mark {
    inline-size: var(--kh-cta-ring);
    justify-self: start;
    margin-inline-end: calc(var(--kh-cta-motiv) - var(--kh-cta-ring));
  }

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


/* ==========================================================
   07. FOKUS, TAP-ZIELE, BEWEGUNG — grösstenteils NICHTS
   ==========================================================
   Fokusring, 44px-Mindestziel und die Rücknahme der Bewegung
   stehen in global.css und gelten hier unverändert. Die
   Ausnahmen oben sind benannt: die Wegezeilen, der Pfeil am
   Wegeziel und die Absendeschaltfläche haben eigene Übergänge
   und nehmen sie selbst zurück.
   ========================================================== */