/* =========================================================================
   Kontakt & Terminwunsch (kontakt.html) · Redesign 10/2026
   Nur Klassen mit Präfix .kontakt-, nur Tokens aus styles.css (keine Hex-Werte).
   Globale Komponenten werden nicht umdefiniert, höchstens über Zusatzklassen
   erweitert. JS-Hooks laufen ausschließlich über data-*, gestylt wird nur über Klassen.
   Bewegung nur über die Bausteine aus motion.js (Hero-Sticker, Schritt-Linie,
   Polaroids, Pfoten-Sticker) – im Wizard bewusst keine (brand.md §22.5).
   Flächenfolge: Hero (hell) · Terminwunsch (ice-50, weiße Wizard-Karte + Petrol-Karte)
   · Danach (weiß) · Ansprechpartner (Petrol-Karte) · Anfahrt (ice-50) · Footer.
   ========================================================================= */

/* Kurze Hinweise und Adressen nie automatisch trennen (Mailadressen: .u-email, bricht nur am <wbr> nach dem @) */
.kontakt-step__hint,
.kontakt-reach__hint,
.kontakt-prefill,
.kontakt-handover__text,
.kontakt-step__note,
.kontakt-wege__meta,
.kontakt-direkt__lead,
.kontakt-anfahrt__hint,
.kontakt-anfahrt__frieda p,
.kontakt-people__mail,
.kontakt-mailnote,
.kontakt-success__lead,
.kontakt-wizard .field__hint,
.kontakt-wizard .field__error { hyphens: manual; }


/* =========================================================================
   1 · PAGE-HERO
   ========================================================================= */
/* Sticker „Gespräch“ hinter dem Schlüsselwort (wie die Sticker im Startseiten-Hero) */
.kontakt-hero__stk { --s: 0.78em; margin: 0 0.04em 0 0.14em; vertical-align: -0.02em; }

/* Deko rechts: drei Format-Sticker (vor Ort · Teams · Telefon) auf einer gestrichelten
   Umlaufbahn – nur ab 1024 px, rein dekorativ (aria-hidden), schweben mit [data-float] */
.kontakt-hero__deco { display: none; }
@media (min-width: 1024px) {
  .kontakt-hero__deco {
    display: block;
    position: relative;
    justify-self: center;
    width: min(100%, 320px);
    aspect-ratio: 1;
  }
  .kontakt-hero__ring {
    position: absolute;
    inset: 13%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--c-white) 0%, var(--c-white) 58%, var(--c-ice-50) 100%);
    box-shadow: inset 0 0 0 1.5px var(--c-ice-200), var(--shadow-md);
  }
  .kontakt-hero__ring::after {
    content: "";
    position: absolute;
    inset: -13%;
    border-radius: 50%;
    border: 1.5px dashed var(--c-ice-300);
  }
  .kontakt-hero__mark { width: 34%; height: auto; }
  .kontakt-hero__float { position: absolute; z-index: 1; display: block; }
  .kontakt-hero__float--pin { left: -2%; top: 20%; }
  .kontakt-hero__float--video { right: 4%; top: -2%; }
  .kontakt-hero__float--phone { right: 10%; bottom: 2%; }
}


/* =========================================================================
   2 · TERMINWUNSCH · Wizard als große weiße Karte
   ========================================================================= */
.kontakt-terminwunsch { padding-top: var(--space-6); }
@media (min-width: 768px) {
  .kontakt-terminwunsch { padding-top: var(--section-y-sm); }
}

.kontakt-wizard {
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --heading: var(--c-blue-900);
  --link: var(--c-blue-700);
  --link-hover: var(--c-blue-900);
  --focus: var(--c-blue-700);
  position: relative;
  min-width: 0;
  /* mobil fast randlos (wie die runden Petrol-Flächen: Abstand --inset zum Bildschirmrand) */
  margin-inline: calc(var(--inset) - var(--gutter));
  padding: var(--space-6) var(--space-5) var(--space-7);
  border-radius: var(--r-xl);
  background: var(--c-white);
  box-shadow: 0 0 0 1px rgba(var(--shadow-c), 0.05), var(--shadow-md);
  color: var(--c-ink);
}
/* Sehr schmal (320–399px): Rand innen etwas kleiner, damit „Geschäftsführer ·“ in den
   Personen-Kacheln nicht getrennt wird */
@media (max-width: 399.98px) {
  .kontakt-wizard { padding-inline: var(--space-4); }
  .kontakt-wizard .choice-card__body { padding-right: calc(var(--space-3) + 28px); }
}
@media (min-width: 768px) {
  .kontakt-wizard {
    margin-inline: 0;
    padding: clamp(2rem, 1rem + 2.6vw, 3.5rem);
  }
}

/* Kopf: Titel als Pille mit Viertel-Punkt, rechts der Pflichtfeld-Hinweis */
.kontakt-wizard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}
.kontakt-wizard__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 16px 6px 13px;
  border-radius: var(--r-pill);
  background: var(--c-ice-100);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-blue-900);
}
.kontakt-wizard__title::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-700);
  transform: rotate(180deg);
}
.kontakt-wizard__req { max-width: none; font-size: 0.875rem; }
.kontakt-wizard__req > span { color: var(--c-accent); }

.kontakt-noscript {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  background: var(--c-ice-50);
}

/* Fortschritt (nur mit JS, global): Kompass in weißer Pille, füllt sich Viertel für Viertel
   (tl → tr → br → bl), daneben Zähler und Balken im Logoverlauf */
.kontakt-progress {
  margin-bottom: var(--space-7);
  padding: 8px 22px 8px 8px;
  border-radius: var(--r-pill);
  background: var(--c-ice-50);
  box-shadow: inset 0 0 0 1px var(--c-ice-200);
}
.kontakt-progress__dial {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: var(--shadow-pill);
}
.kontakt-progress__compass { width: 38px; }
.kontakt-progress .compass__q { fill: var(--c-ice-200); }
.kontakt-progress .compass__q.is-progress { fill: var(--c-blue-700); }
.kontakt-progress .compass__q.is-current { fill: var(--c-blue-300); }
.kontakt-progress__meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}
.kontakt-progress__count {
  max-width: none;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.kontakt-progress__sep { margin-inline: var(--space-1); }
.kontakt-progress__name { color: var(--c-blue-700); }
.kontakt-progress .wizard__bar { background: var(--c-ice-200); }
@media (max-width: 479.98px) {
  .kontakt-progress { padding-right: 16px; margin-bottom: var(--space-6); }
  .kontakt-progress__dial { width: 48px; height: 48px; }
  .kontakt-progress__compass { width: 32px; }
  .kontakt-progress__count { font-size: 0.6875rem; letter-spacing: 0.05em; }
  /* zweizeilig statt „· THEMA“ am Zeilenanfang */
  .kontakt-progress__sep { display: none; }
  .kontakt-progress__name { display: block; }
}

.kontakt-errors { margin-bottom: var(--space-6); }
.kontakt-errors:focus { outline: none; }

/* Übernahme aus einem Werkzeug */
.kontakt-handover {
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--r-lg);
  background: var(--c-ice-50);
  box-shadow: inset 0 0 0 1px var(--c-ice-200);
}
.kontakt-handover__chip {
  gap: var(--space-2);
  padding: 6px 12px;
  white-space: normal;
}
.kontakt-handover__chip .icon { width: 16px; height: 16px; }
.kontakt-handover__text {
  flex-basis: 100%;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}

/* ---------- Schritte ---------- */
.kontakt-wizard .wizard__step > legend {
  font-size: clamp(1.5rem, 1.12rem + 1.3vw, 2.25rem);
  letter-spacing: -0.025em;
}
/* Pflicht-Sternchen in der großen Legend klein und hochgestellt */
.kontakt-wizard .wizard__step > legend .field__req {
  font-family: var(--font-ui);
  font-size: 0.5em;
  font-weight: 500;
  vertical-align: 0.9em;
  line-height: 0;
}
.kontakt-step__hint {
  margin-top: calc(-1 * var(--space-4));
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.kontakt-prefill {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: none;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--c-ice-100);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink);
}
.kontakt-prefill .icon { margin-top: 1px; color: var(--c-blue-700); }
/* „optional“ als kleine Pille in Termina */
.kontakt-optional {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--c-ice-100);
  color: var(--c-ink-2);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* Kacheln mit Sticker (feste Bedeutungen, components.md §5): Sticker links über zwei Zeilen */
.choice-card__body:has(> .stk) { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); }
.choice-card__body > .stk { grid-row: 1 / span 2; }
/* Gewählt: der Sticker richtet sich gerade aus (Zustand, keine Animation) */
.kontakt-wizard .choice-card__input:checked + .choice-card__body > .stk { --r: 0deg; }
/* Kacheltitel ausgewogen („Weiß ich / noch nicht“), Kacheltexte ohne einzelnes kurzes
   Wort in der letzten Zeile („Wir rufen / dich an“) */
.kontakt-wizard .choice-card__title { text-wrap: balance; }
.kontakt-wizard .choice-card__text { text-wrap: pretty; }
.kontakt-wizard .choice-card__body { min-height: 76px; }

/* Schritt 2: Formate ab 768px als drei stehende Kacheln – außer 1024–1199px (siehe unten) */
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1200px) {
  .kontakt-formats__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kontakt-formats .choice-card__body {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding-top: var(--space-5);
  }
  .kontakt-formats .choice-card__body > .stk {
    --s: 48px;
    grid-row: auto;
    margin-bottom: var(--space-3);
  }
}
/* Tage und Tageszeit gemeinsam auf einer Eis-Fläche */
.kontakt-zeiten {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background: var(--c-ice-50);
}
.kontakt-zeit .chip__label { min-width: 56px; justify-content: center; }
.kontakt-step__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.kontakt-step__note .icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--c-ice-100);
  color: var(--c-blue-700);
}

/* 1024–1199px: Die Formularspalte (7/12) ist hier am schmalsten. Zwei bzw. drei Kacheln
   nebeneinander ließen nur ca. 90–110px Text und Wörter brachen mitten durch
   („Geschäftsfü-hrer“, „Schloßstra-ße“) → Kacheln untereinander, wie mobil. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .kontakt-themen .choice-group__options--2,
  .kontakt-personen .choice-group__options--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Schritt 4: Kontaktwege als Eis-Fläche („eins von beiden“ gehört zusammen) */
.kontakt-reach {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--r-lg);
  background: var(--c-ice-50);
}
.kontakt-reach__hint {
  max-width: none;
  margin-bottom: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.kontakt-reach__fields {
  display: grid;
  align-items: start;   /* Fehlermeldung unter „E-Mail“ streckt das Telefonfeld nicht */
  gap: var(--space-4);
}
.kontakt-reach__fields .field + .field { margin-top: 0; }
.kontakt-reach > .field__error { margin-top: var(--space-3); }
@media (min-width: 768px) {
  .kontakt-reach { padding: var(--space-4) var(--space-5) var(--space-5); }
  .kontakt-reach__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kontakt-message { margin-top: var(--space-5); }
.kontakt-message .textarea { min-height: 148px; }

/* Zusammenfassung (nur mit JS): Zeilen als weiße Streifen mit Fuge auf Eis-Fläche */
.kontakt-summary { display: none; }
.js .kontakt-summary {
  display: block;
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--r-lg);
  background: var(--c-ice-100);
}
.kontakt-summary__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--space-1) var(--space-2) var(--space-3);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--c-blue-900);
}
.kontakt-summary__title::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-700);
  transform: rotate(180deg);
}
.kontakt-summary .wizard__summary { gap: 6px; }
.kontakt-summary .wizard__summary > div {
  align-items: center;
  padding: 10px 8px 10px 16px;
  border-top: 0;
  border-radius: var(--r-md);
  background: var(--c-white);
}
.kontakt-summary .wizard__summary dt {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-accent);
  hyphens: manual;
}
.kontakt-summary .wizard__summary dd { min-width: 0; color: var(--c-ink); }
/* Label über die ganze Zeile (bei 320px brach „ANSPRECHPERSON“ neben dem Knopf),
   Wert und „Ändern“ darunter nebeneinander */
.kontakt-summary .wizard__summary dt { grid-column: 1 / -1; }
.wizard__summary .kontakt-summary__edit {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.kontakt-consent { margin-top: var(--space-5); }
.kontakt-consent .check__label { font-size: var(--fs-small); line-height: 1.5; }
.kontakt-consent .field__error { margin-top: var(--space-1); }

/* Honeypot: für Menschen unsichtbar, nicht fokussierbar */
.kontakt-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Navigation: „Weiter“ nur mit JS, „Senden“ ohne JS sofort, mit JS erst im letzten Schritt */
.kontakt-nav__next,
.kontakt-nav__submit { margin-left: auto; }
.kontakt-nav__next { display: none; }
.js .kontakt-nav__next { display: inline-flex; }
.js .kontakt-wizard:not(.is-ready) .kontakt-nav__submit,
.js .kontakt-wizard:not(.is-ready) .kontakt-mailnote { display: none; }
/* „Zurück“ mit Chevron nach links (bleibt beim Überfahren gedreht) */
.kontakt-nav__prev { padding-left: 0; }
.kontakt-nav__prev .btn__icon { width: 20px; height: 20px; transform: rotate(90deg); }
.kontakt-nav__prev:hover .btn__icon,
.kontakt-nav__prev:focus-visible .btn__icon { transform: rotate(90deg) translateY(2px); }
.kontakt-mailnote {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: none;
  margin-top: var(--space-4);
}
.kontakt-mailnote .icon { margin-top: 1px; color: var(--c-blue-500); }
/* Schmal: „Terminwunsch senden“ passt nicht neben „Zurück“ → eigene, volle Zeile */
@media (max-width: 479.98px) {
  .kontakt-nav__submit { flex: 1 1 100%; }
}
@media (min-width: 768px) {
  .kontakt-mailnote { justify-content: flex-end; text-align: right; }
  .kontakt-mailnote > span { max-width: 44ch; }
}

/* Erfolgsansicht – ruhig, ohne Bewegung (der Container blendet nur ein) */
.kontakt-success {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: 0;
  background: none;
}
/* Fokus wird nur für Screenreader dorthin gesetzt (wie bei der Legend) – kein Rahmen um die Fläche */
.kontakt-success:focus,
.kontakt-success:focus-visible { outline: none; }
.kontakt-success__compass {
  width: 104px;
  margin-bottom: var(--space-2);
  padding: 16px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: var(--shadow-pill);
}
.kontakt-success__compass .compass__winkel { display: none; }   /* gefüllter Kompass = alles erledigt; der Winkel war auf Petrol kaum lesbar */
.kontakt-success .form-success__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.025em; }
.kontakt-success__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 46ch; }
.kontakt-success__fallback {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background: var(--c-ice-50);
}
.kontakt-success__subtitle {
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--c-blue-900);
}
.kontakt-success__fallback > p { font-size: 1rem; }
.kontakt-success__actions { gap: var(--space-3) var(--space-5); }
.kontakt-success__status { font-size: var(--fs-small); color: var(--success); }
.kontakt-success__status:empty { margin-top: calc(-1 * var(--space-3)); }
.kontakt-success__text summary {
  min-height: var(--tap);
  padding-block: 10px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-blue-700);
  cursor: pointer;
}
.kontakt-success__text summary::marker { color: var(--c-blue-500); }
.kontakt-success__text summary:hover { color: var(--c-blue-900); }
.kontakt-success__text .textarea {
  margin-top: var(--space-2);
  min-height: 220px;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.kontakt-success__edit { max-width: none; margin-top: var(--space-2); }
.kontakt-success__edit .btn { padding-left: 0; }


/* =========================================================================
   2b · DIREKTE WEGE · tiefe Petrol-Karte + Kundenstimme
   ========================================================================= */
.kontakt-direkt {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
}
.kontakt-direkt__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--gradient-deep);
  box-shadow: var(--shadow-lg);
  container-type: inline-size;
}
/* Viertel der Bildmarke schaut unten rechts herein (wie im Page-Hero, hier in Petrol) */
.kontakt-direkt__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -56px;
  bottom: -56px;
  width: 190px;
  height: 190px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-800);
  opacity: 0.75;
  pointer-events: none;
}
.kontakt-direkt__title {
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.kontakt-direkt__lead { margin-top: var(--space-3); font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
.kontakt-wege { display: grid; margin-top: var(--space-5); }
.kontakt-wege__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
}
.kontakt-wege__item + .kontakt-wege__item { border-top: 1px solid var(--line-on-dark); }
.kontakt-wege__item:last-child { padding-bottom: 0; }
.kontakt-wege__icon { margin-top: 2px; }
.kontakt-wege__body { display: grid; gap: 2px; min-width: 0; }
.kontakt-wege__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.kontakt-wege__value {
  justify-self: start;
  max-width: 100%;
  color: var(--text);
  hyphens: manual;
}
a.kontakt-wege__value { text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
a.kontakt-wege__value:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
/* Telefonnummer groß in Termina, einzeilig – Größe folgt der Kartenbreite (Container-Einheit):
   Textspalte = Karte − Sticker (56 px); „0371 464004500“ ist in Termina ca. 11,1 em breit */
.kontakt-wege__value--phone {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-size: clamp(1rem, calc((100cqi - 56px) / 11.8), 1.625rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
/* Mailadresse in Roc Grotesk: Termina wäre zu breit (Review 13.10.: +43 px bei 390). Die Domain
   (≈ 10,5 em) bleibt bis 320 px einzeilig – Größe folgt der Kartenbreite */
.kontakt-wege__value--mail {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-size: clamp(0.9375rem, calc((100cqi - 56px) / 11.2), 1.125rem);
  line-height: 1.35;
}
.kontakt-wege__value--text {
  max-width: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.kontakt-wege__meta {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Kundenstimme als weiße, leicht gekippte Karte (wie die Stimmen der Startseite, ohne Bewegung) */
.kontakt-direkt__stimme {
  margin: 0;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border-radius: var(--r-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  rotate: -1deg;
}
@media (max-width: 767.98px) {
  .kontakt-direkt__stimme { rotate: -0.6deg; }
}

@media (min-width: 1024px) {
  .kontakt-direkt { padding-left: var(--space-3); }
}
@media (min-width: 1280px) {
  .kontakt-direkt { padding-left: var(--space-5); }
}


/* =========================================================================
   3 · DANACH · Schritte mit gezeichneter Linie + FAQ
   ========================================================================= */
.kontakt-steps { --node: 60px; }
/* Mit motion.js zeichnet [data-path] die Linie – die gerade Verlaufslinie (ohne JS) dann aus */
.kontakt-steps.has-path::before { display: none; }
.kontakt-steps .steps__num { font-size: 1.125rem; }
.kontakt-steps .steps__item:nth-child(2) .steps__num { background: var(--gloss-sticker-light); color: var(--c-blue-700); }
.kontakt-steps .steps__item:nth-child(3) .steps__num { background: var(--gloss-sticker-deep); color: var(--c-on-dark); }
.kontakt-steps .steps__text { max-width: 30ch; }

.kontakt-faq {
  display: grid;
  gap: var(--space-5) var(--grid-gap);
  margin-top: clamp(4rem, 2.5rem + 5vw, 7.5rem);
}
.kontakt-faq__title {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.kontakt-faq__more { max-width: none; }
@media (min-width: 1024px) {
  .kontakt-faq { grid-template-columns: var(--grid-cols); grid-template-rows: auto 1fr; row-gap: var(--space-4); }
  .kontakt-faq__title { grid-column: 1 / span 4; grid-row: 1; }
  .kontakt-faq__more { grid-column: 1 / span 4; grid-row: 2; align-self: start; }
  .kontakt-faq__list { grid-column: 5 / -1; grid-row: 1 / span 2; }
}


/* =========================================================================
   4 · ANSPRECHPARTNER · Polaroids auf der Petrol-Karte
   ========================================================================= */
.kontakt-people { --people-cols: 6; }
.kontakt-people.scroller { padding-top: var(--space-4); padding-bottom: var(--space-6); }
/* Scroll-Reihe (unter 1024px): Karten etwas breiter als global, damit die Domain
   der Mailadresse in eine Zeile passt */
@media (max-width: 767.98px) {
  .kontakt-people { --scroller-item: minmax(172px, 44vw); }
}
/* 1024–1199px: Sechs Spalten wären nur ca. 145px breit – zu eng für Name, Rolle und
   Mailadresse. Darum drei Polaroids je Reihe, bündig zur Headline. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .kontakt-people { --people-cols: 3; max-width: 780px; row-gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .kontakt-people.scroller { padding-top: 0; padding-bottom: 0; }
}

/* Polaroid: weißer Rahmen, leicht gekippt (Drehung über „rotate“, damit [data-stagger] das
   transform behalten kann). Innen gelten wieder die hellen Tokens. */
.kontakt-people .people__item {
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --link: var(--c-blue-700);
  --link-hover: var(--c-blue-900);
  --focus: var(--c-blue-700);
  padding: 9px 9px 12px;
  border-radius: 14px;
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: 0 1px 0 rgba(var(--shadow-c), 0.1), 0 28px 44px -26px rgba(var(--shadow-c), 0.95);
  rotate: -2deg;
}
.kontakt-people .people__item:nth-child(2) { rotate: 1.6deg; }
.kontakt-people .people__item:nth-child(3) { rotate: -1.2deg; }
.kontakt-people .people__item:nth-child(4) { rotate: 2.2deg; }
.kontakt-people .people__item:nth-child(5) { rotate: -1.6deg; }
.kontakt-people .people__item:nth-child(6) { rotate: 1.2deg; }
.kontakt-people .people__item img { border-radius: 8px; }
.kontakt-people .people__item:hover img { transform: none; }
/* Tönungs-Ebene (global) liegt genau auf dem Foto im Rahmen */
.kontakt-people .people__item::before { inset: 9px 9px auto 9px; border-radius: 8px; }
.kontakt-people .people__name { padding-inline: 3px; font-size: 0.875rem; }
.kontakt-people .people__role { padding-inline: 3px; font-size: 0.8125rem; }
.people__item .kontakt-people__mail {
  display: block;
  min-height: var(--tap);
  padding: var(--space-2) 3px 0;
  font-family: var(--font-text);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.people__item .kontakt-people__mail:hover { color: var(--link-hover); }
.kontakt-people__mail .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
}
.kontakt-people__more { margin-top: var(--space-7); }
/* Ab 1024px ist die Reihe ein Raster: main.js zeigt die Scroller-Knöpfe nur noch bei echtem
   overflow-x (Konsolidierung 13.10.2026) – die frühere Ausblendung hier entfällt. */


/* =========================================================================
   5 · ANFAHRT
   ========================================================================= */
.kontakt-anfahrt__address {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: 2px;
  margin-top: var(--space-7);
}
.kontakt-anfahrt__stk { grid-row: 1 / span 3; align-self: start; margin-top: 2px; }
.kontakt-anfahrt__org {
  grid-column: 2;
  margin-bottom: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}
.kontakt-anfahrt__line {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--heading);
}
.kontakt-anfahrt__hint { margin-top: var(--space-5); font-size: 1rem; max-width: 50ch; }
.kontakt-anfahrt__frieda {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--space-6);
  padding-right: var(--space-6);
}
.kontakt-anfahrt__frieda p { max-width: 36ch; }
.kontakt-anfahrt__paw { position: absolute; top: -16px; right: -12px; }

.kontakt-anfahrt__map { position: relative; min-width: 0; }
.kontakt-anfahrt__map .map-sketch {
  padding: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(var(--shadow-c), 0.05), var(--shadow-md);
}
.kontakt-anfahrt__float { position: absolute; z-index: 2; top: -30px; right: 7%; display: block; }
@media (max-width: 599.98px) {
  .kontakt-anfahrt__float { top: -22px; right: 4px; }
  .kontakt-anfahrt__float .stk { --s: 56px; }
}


/* =========================================================================
   KLEINE VIEWPORT-HÖHE & DRUCK
   ========================================================================= */
/* Druck: Deko weg, Flächen hell, Kippungen aufheben; dunkle Karte über die Tokens
   (styles.css biegt --on-dark/--c-on-dark im Druck auf Schwarz um) */
@media print {
  .kontakt-hero__deco,
  .kontakt-anfahrt__float,
  .kontakt-anfahrt__paw,
  .kontakt-direkt__card::after,
  .js .kontakt-progress { display: none; }
  .kontakt-wizard,
  .kontakt-direkt__card,
  .kontakt-direkt__stimme {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    rotate: none;
  }
  .kontakt-direkt__card { margin-top: 6mm; overflow: visible; }
  .kontakt-people .people__item:nth-child(n) { rotate: none; box-shadow: none; }
  .kontakt-zeiten,
  .kontakt-reach,
  .js .kontakt-summary { background: none; padding-inline: 0; }
}