/* ===========================================================================
   CUSTODIA PROTECTION — components.css
   Alle Komponenten. Reihenfolge:
   Buttons · Link · Notruf-Bar · Header · Burger/Mobile-Nav · Hero · Stats ·
   Trust-Badges · Split-Row/Media · Leistungs-Liste · Numbered Cards ·
   Roadmap-Badge · Wachpunkt · Philosophie · FAQ · Final CTA · Modal ·
   Footer · Formulare · Responsive
   =========================================================================== */

/* ---------------------------------------------------------------------------
   SHARED — der Puls-Punkt (Notruf-Bar und Roadmap-Badge)
   --------------------------------------------------------------------------- */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

.dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   BUTTONS
   Regel: niemals zwei Primär-Buttons nebeneinander. Auf hellem Grund ist
   .btn--primary primär, auf dunklem .btn--accent.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1.5px solid transparent; /* damit Ghost und Solid dieselbe Höhe haben */
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-semi);
  line-height: 1.2;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Deaktiviert — z. B. Kontakt-Absenden vor der Datenschutz-Zustimmung, oder
   Formulare im „Wird gesendet …"-Zustand. */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--ink);
  color: var(--text-on-dark);
}

.btn--primary:hover {
  background: var(--accent-ink);
}

/* Der Primär-Button auf dunklem Grund — identisch in beiden Kontexten.

   Mit dem Navy trägt der Button wieder WEISSE Schrift: 11,50:1 auf --accent,
   8,97:1 auf --accent-hover — beides klar über AA. Der frühere Workaround
   (anthrazitfarbene Schrift, weil Gold weiße Schrift nur mit 3,57:1 trug) ist
   damit hinfällig und entfernt. */
.btn--accent {
  background: var(--accent);
  color: #FFFFFF;
}

.btn--accent:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--text-on-dark);
  border-color: var(--ink);
}

.sec--dark .btn--ghost,
.hero .btn--ghost {
  color: var(--text-on-dark);
  border-color: var(--border-on-dark);
}

.sec--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: #FFFFFF;
  color: var(--ink);
  border-color: #FFFFFF;
}

.btn--signal {
  background: var(--signal);
  color: #FFFFFF;
}

.btn--signal:hover {
  background: #A81F25;
}

.btn--wide {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   .link — Textlink mit Pfeil.
   Beim Hover wächst der Gap von 8 auf 14 px UND der Pfeil wandert 3 px nach
   rechts: der Link zieht sich auseinander, die Richtung wird körperlich.
   --------------------------------------------------------------------------- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--accent-line);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-semi);
  color: var(--accent-ink);
  transition:
    gap var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.link svg {
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}

.link:hover {
  gap: 14px;
  border-bottom-color: var(--accent);
}

.link:hover svg {
  transform: translateX(3px);
}

.sec--dark .link,
.hero .link {
  color: var(--accent-lit);
}

.sec--dark .link:hover,
.hero .link:hover {
  border-bottom-color: var(--accent-lit);
}

/* ---------------------------------------------------------------------------
   NOTRUF-BAR
   Die Telefonnummer steht NICHT in der Bar — der Button öffnet das Modal
   (ausdrücklicher Kundenwunsch). Die Bar liegt über dem Header und über der
   geöffneten Mobile-Nav.
   --------------------------------------------------------------------------- */
.notruf {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  height: var(--notruf-h);
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}

/* Der Inhalt der Leiste steht mittig (Prompt 09). Die Leiste selbst bleibt über
   die volle Breite, Höhe/Farben/Schriftgröße unverändert — nur die Ausrichtung
   ihres Inhalts ändert sich. */
.notruf__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  height: 100%;
}

/* Höhe 100 % — der Button füllt die volle Bar-Höhe (36 px) aus. Mehr ist nicht
   möglich: die Bar IST 36 px hoch. 44 px sind hier also konstruktiv nicht
   erreichbar; die identische Aktion steht im Hero als deutlich größerer Chip
   und im Footer bereit. */
.notruf__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--signal-lit);
  transition: color var(--dur-fast) var(--ease-out);
}

.notruf__btn:hover {
  color: var(--text-on-dark);
}

/* Der Punkt erbt die Farbe des Buttons und pulst mit ihr mit. */
.notruf__btn .dot {
  color: var(--signal-lit);
  background: var(--signal-lit);
}

.notruf__sep {
  width: 1px;
  height: 14px;
  background: var(--ink-line);
}

.notruf__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.notruf__link:hover {
  color: var(--text-on-dark);
}

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition:
    height var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.header.is-scrolled {
  height: 60px;
  box-shadow: var(--shadow-card);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 100%;
}

/* Logo — Bildmarke + zweizeilige Wortmarke.
   Die Wortmarke ist bewusst in Inter Tight gesetzt (nicht in der Logo-Schrift),
   damit Logo und Website ein einziges typografisches System bilden. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.logo__mark {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--ink);
}

/* Der Globus im HEADER dreht sich sehr langsam (Prompt 06) — nur die beiden
   Meridian-Ellipsen, während Kreis, Äquator und Breitengrade stehen. So liest es
   sich als rotierender Globus, nicht als taumelndes Drahtgitter. 24 s pro
   Umdrehung: kaum merklich, ein ruhiges Lebenszeichen, kein Effekt-Feuerwerk.
   Nur im Header (Footer-Logo bleibt still). prefers-reduced-motion killt das
   über den globalen Kill-Switch in tokens.css (H13). */
@keyframes globe-spin {
  to { transform: rotate(360deg); }
}

.header .logo__mark ellipse {
  transform-box: fill-box;
  transform-origin: center;
  animation: globe-spin 24s linear infinite;
}

/* Beim Hover kurz Tempo aufnehmen — ein subtiles „ich sehe dich". */
.header .logo:hover .logo__mark ellipse {
  animation-duration: 6s;
}

/* ---------------------------------------------------------------------------
   LADEANIMATION (Prompt 06) — nur Startseite
   Kurzer Marken-Moment, dann Sicht frei auf den Hero. Rein CSS-getrieben, damit
   sie auch ohne JS ausfadet; main.js entfernt danach den Knoten. Bewusst kurz
   (~0,75 s) — sie darf das LCP (Hero-Poster) nicht ausbremsen. Kein CLS: fixed,
   verschwindet über opacity/visibility ohne Reflow. reduced-motion: gar nicht.
   --------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--accent-lit);
  animation: loader-out 0.4s var(--ease-out) 0.35s forwards;
}

@keyframes loader-out {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.loader__mark {
  width: 56px;
  height: 56px;
  animation: loader-in 0.45s var(--ease-out) both;
}

@keyframes loader-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: none; }
}

.loader__mark ellipse {
  transform-box: fill-box;
  transform-origin: center;
  animation: globe-spin 4s linear infinite;
}

/* Kein Ladefilm für Menschen, die Bewegung abbestellt haben — sofort weg. */
@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none;
  }
}

.logo__type {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: 0.09em;
  color: var(--ink);
}

.logo__sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--fw-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.nav__link {
  position: relative;
  padding: 6px 0;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--dur) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  width: 100%;
}

/* Die zwei parallelen Funnel — Bewerber (ghost) und Kunde (primary).
   Sichtbar auf jeder Seite. Custodia braucht beides: Aufträge und Personal. */
.header__cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.header__cta .btn {
  padding: 11px 20px;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   BURGER + MOBILE-NAV
   --------------------------------------------------------------------------- */
.burger {
  display: none;
  position: relative;
  width: 44px;   /* Touch-Target-Minimum */
  height: 44px;
  flex: none;
}

.burger__bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition:
    transform var(--dur) var(--ease-in-out),
    opacity var(--dur-fast) var(--ease-in-out);
}

.burger__bar:nth-child(1) { top: 15px; }
.burger__bar:nth-child(2) { top: 22px; }
.burger__bar:nth-child(3) { top: 29px; }

.burger[aria-expanded='true'] .burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__bar:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] .burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mnav {
  display: none;
  position: fixed;
  inset: calc(var(--notruf-h) + var(--header-h)) 0 0 0;
  z-index: calc(var(--z-header) - 1);
  padding: var(--s-6) 0 var(--s-8);
  background: var(--surface);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.mnav[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mnav__link {
  display: block;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.mnav__cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* ---------------------------------------------------------------------------
   HERO
   Die H1 ist das LCP-Element. Sie wird NIEMALS per JS eingeblendet — nur über
   CSS-Keyframes mit forwards. Ein JS-Reveal würde den LCP messbar verzögern.
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--ink);          /* Grund unter dem Video, greift bevor das Poster da ist */
  color: var(--text-on-dark);
}

/* Video-Hintergrund + Verdunkelung. Liegt hinter allem (z-index 0), der Inhalt
   darüber (z-index 1). aria-hidden — reine Atmosphäre, kein Informationswert. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* füllt jeden Zuschnitt, kein Verzerren, keine Ränder */
  object-position: center 35%;     /* hält die Operator-Ebene im Bild */
}

/* Der Scrim macht die weiße H1 über bewegtem Bild lesbar. Das ist keine
   Geschmacksfrage: im Poster sitzen einzelne reinweiße Monitor-Highlights
   (gemessen YMAX 255) auch im linken Bereich — fiele so ein Pixel hinter einen
   Buchstaben, wäre er ohne kräftige Verdunkelung unlesbar. Darum links (hinter
   der H1) 0,88–0,92 Deckung: selbst ein weißer Pixel komponiert dort auf ≥ 4,5:1
   gegen die weiße Schrift. Nach rechts öffnet der Scrim auf 0,50 — dort steht die
   Quiz-Karte mit eigenem, deckendem Grund, und das Video darf als ruhige,
   dunkelblaue Textur durchscheinen (Marke: „ruhige Bewegung, kein
   Effekt-Feuerwerk"). Werte gegen den Poster-Frame gemessen (siehe QA). */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(20, 24, 31, 0.92) 0%,
      rgba(20, 24, 31, 0.87) 56%,
      rgba(20, 24, 31, 0.60) 74%,
      rgba(20, 24, 31, 0.48) 100%),
    linear-gradient(180deg,
      rgba(20, 24, 31, 0.28) 0%,
      rgba(20, 24, 31, 0.05) 30%,
      rgba(20, 24, 31, 0.30) 100%);
}

/* Quiz links, Überschrift rechts (Prompt 09) — aber NUR visuell.
   🔴 Im Markup steht die H1 weiterhin VOR dem Quiz. Das ist kein Detail:
   Screenreader lesen in Dokumentreihenfolge (erst die Botschaft, dann das
   Formular), einspaltig stapelt es in derselben Reihenfolge, und die
   Hauptüberschrift gehört an den Anfang des Inhalts. Getauscht wird deshalb
   über grid-column, nicht durch Umsortieren.

   Die Quiz-Spalte ist FEST (max. 500 px) und wächst nicht mit dem Viewport —
   sonst liefe das Panel wieder über die Grenzwerte aus Prompt 08. Die
   Textspalte ist die flexible. */
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: clamp(320px, 35vw, 500px) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}

.hero__aside {
  grid-column: 1;      /* visuell links … */
  grid-row: 1;         /* … und ZWINGEND in derselben Zeile: das Auto-Placement
                          kann nach .hero__text (Spalte 2) nicht mehr in Spalte 1
                          zurueckspringen und schoebe das Quiz sonst in Zeile 2. */
}

.hero__text {
  grid-column: 2;      /* … Überschrift visuell rechts, im Markup aber zuerst */
  grid-row: 1;
}

.hero__title {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s-5);
  /* Deutlich groesser (Prompt 09) — die Ueberschrift traegt die rechte Spalte.
     Die Obergrenze ist so gewaehlt, dass die laengste Zeile "kein Kompromiss."
     sicher in die Textspalte passt; nachgemessen bei 1024/1280/1440 px.
     Enger Zeilenabstand und leicht negative Laufweite, damit die grosse Schrift
     nicht auseinanderfaellt. Silbentrennung aus — die Umbrueche sind gesetzt. */
  font-size: clamp(2.2rem, 5.4vw, 4.25rem);  /* 35 → 68 px */
  line-height: 1.05;
  letter-spacing: -0.02em;
  hyphens: none;
  /* Sicherheitsnetz zusaetzlich zum Scrim: ein enger dunkler Schlagschatten
     huellt jeden Buchstaben, falls doch ein heller Bildpunkt durchkommt. */
  text-shadow: 0 1px 2px rgba(20, 24, 31, 0.7), 0 2px 18px rgba(20, 24, 31, 0.5);
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__line {
  opacity: 0;
  animation: hero-in var(--dur-slow) var(--ease-out) forwards;
}

.hero__line--1 {
  color: var(--text-on-dark);
  animation-delay: 60ms;
}

/* Der Farb-Split — er gibt der Überschrift ihre Spannung. */
.hero__line--2 {
  color: #6B7079;
  animation-delay: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero__line {
    opacity: 1;
    animation: none;
  }
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

/* Die zwei Hero-Buttons (Prompt 06B, 1.4). Beide liegen über dem Video, darum
   ein leicht deckender Grund + Blur, damit sie unabhängig vom Frame lesbar sind.
   Padding ergibt 47 px Höhe → erfüllt das 44-px-Touch-Target-Minimum. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--text-on-dark);
  background: rgba(20, 24, 31, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition:
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.hero__pill svg {
  flex: none;
  color: var(--accent-lit);
}

.hero__pill:hover {
  border-color: var(--accent-lit);
  background: rgba(20, 24, 31, 0.62);
}

/* Der Notruf-Button trägt Custodias eigene Rufbereitschaft — der pulsende
   Signal-Punkt (wie in der Notruf-Bar) markiert ihn als den Notfall-Kanal.
   Der Puls respektiert prefers-reduced-motion über die .dot-Regel + den
   globalen Kill-Switch in tokens.css. */
.hero__pill--notruf .dot {
  color: var(--signal-lit);
  background: var(--signal-lit);
}

.hero__pill--notruf:hover {
  border-color: var(--signal-lit);
}

/* Die Atlas-Figur (aus dem Hero nach Sektion 2 verlegt, Prompt 06B). Sie sitzt
   im Medien-Feld des Haltungs-Splits, zentriert, mit Luft. Composite-Raster —
   keine Einzel-Rotation der Kugel; die Figur bekommt den Scroll-Reveal, den die
   Sektion über data-reveal-item ohnehin trägt. */
.split__media--atlas {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-4) 0;
}

.atlas {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* ---------------------------------------------------------------------------
   STATS-BAR
   Die Labels sind rechtlich bindend (H1, H2). Startwert im HTML = Endwert:
   fällt JS aus, steht die richtige Zahl da.
   --------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}

.stat {
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat__label {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-semi);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-muted);
}

.stat__label b {
  font-weight: var(--fw-bold);
  color: var(--accent-ink);
}

/* ---------------------------------------------------------------------------
   TRUST-BADGES
   Nur belegbare Seriositätssignale (H6) — keine Leistungen, keine erfundenen
   Zertifikate, keine Bewertungen.
   --------------------------------------------------------------------------- */
/* Seit 19.07.2026 trägt die Leiste zwei statt vier Elemente (Kundenwunsch).
   Zwei Kästen im alten Vierer-Raster stehengelassen hätte sie an den Rand geklebt
   und die Mitte leer gelassen. Deshalb: mittig ausgerichtet, jedes Element deutlich
   breiter (Basis 320 statt 220 px), gedeckelt bei 380 px. Zwei mal 380 plus 24 px
   Abstand ergeben 784 von 1200 px Containerbreite — rund 65 %, der angepeilte Wert. */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}

.trust__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 320px;
  max-width: 380px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

/* Akzent-Diät: der Hover setzt eine kräftigere neutrale Kante statt Navy.
   Die Trust-Leiste soll ruhig bleiben — sie beantwortet „seriös?", nicht „schau her". */
.trust__item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

/* Akzent-Diät: die Icon-Striche sind neutral-grau. Vier farbige Icons
   nebeneinander wären die dichteste Akzent-Stelle der Seite — und rein
   dekorativ. Die Aussage tragen die Texte, nicht die Farbe. */
.trust__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
}

.trust__title {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--ink);
}

.trust__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Sobald die beiden Elemente nebeneinander nicht mehr passen, stapeln sie —
   und dann soll jedes die volle Breite tragen, nicht als 380-px-Klotz mittig
   stehen. Der Umbruch tritt rechnerisch bei rund 728 px Viewport ein
   (2 × 320 + 24 Abstand + 2 × 32 Gutter); der Deckel fällt kurz davor. */
@media (max-width: 740px) {
  .trust__item { max-width: none; }
}

/* ---------------------------------------------------------------------------
   SPLIT-ROW + MEDIA
   Das aspect-ratio bleibt auch beim Platzhalter erhalten — dadurch bleibt CLS
   bei null, wenn die echten Fotos (K4) später eingesetzt werden.
   --------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}

.split--reverse .split__media {
  order: -1;
}

.media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-soft);
  transition: border-color var(--dur) var(--ease-out);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* GPU-beschleunigt über transform — nicht über width (kein Reflow). */
.split:hover .media img,
.svc:hover .media img {
  transform: scale(1.04);
}

/* Platzhalter, solange kein echtes Foto existiert (K4).
   Label kommt aus data-label. Kein Stock-Foto von Personen. */
.media--pending {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #1B2028 0%, #262B34 48%, #191D24 100%);
  border: 1px solid var(--ink-line);
}

.media--pending::after {
  content: attr(data-label);
  padding: 0 var(--s-5);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  text-align: center;
  color: var(--text-on-dark-muted);
}

/* ---------------------------------------------------------------------------
   LEISTUNGS-LISTE — sieben alternierende Zeilen
   --------------------------------------------------------------------------- */
.svcs {
  border-top: 1px solid var(--border);
}

.svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--border);
}

/* Gerade Zeilen: Bild auf die andere Seite. */
.svc:nth-child(even) .svc__media {
  order: -1;
}

.svc:hover .media {
  border: 1px solid var(--accent-line);
}

.svc__title {
  font-size: 24px;
  margin-bottom: var(--s-3);
}

.svc__text {
  max-width: 50ch;
  margin-bottom: var(--s-4);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   CARDS
   Die Nummern (01–04) sind am 19.07.2026 auf Kundenwunsch entfallen. Die Karten
   tragen ihre Gliederung jetzt über Titel, Text und Rahmen — kein Ersatzelement.
   --------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

.card {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

/* Akzent-Diät: neutrale Hover-Kante. Der Lift-Schatten trägt den Hover. */
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.card__title {
  margin-bottom: var(--s-3);
}

.card__text {
  font-size: 15px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   ROADMAP-BADGE (H3 — rechtlich zwingend)
   Nicht klein, nicht grau, nicht am Rand. Steht direkt über der Überschrift.
   --------------------------------------------------------------------------- */
.roadmap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--accent-lit);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent-lit);
}

.roadmap .dot {
  width: 6px;
  height: 6px;
  background: var(--accent-lit);
}

/* ---------------------------------------------------------------------------
   WACHPUNKT — abstrahiertes Wireframe, kein Screenshot (H3).
   Keine echten Ortsnamen, keine echten Zeiten, keine echten Zahlen.
   --------------------------------------------------------------------------- */
.wach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}

.wach__badge {
  margin-bottom: var(--s-5);
}

.wach__note {
  margin-top: var(--s-4);
  font-weight: var(--fw-semi);
  color: var(--text-on-dark);
}

.wach__cta {
  margin-top: var(--s-6);
}

.mock {
  aspect-ratio: 4 / 3;
  padding: var(--s-4);
  background: #10141A;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}

.mock svg {
  width: 100%;
  height: 100%;
}






/* ---------------------------------------------------------------------------
   FAQ-ACCORDION
   Die Frage ist ein <button> — dadurch funktionieren Enter und Space von selbst.
   Die Höhenanimation läuft über grid-template-rows (0fr → 1fr): der einzige Weg,
   eine unbekannte Höhe rein in CSS zu animieren.
   --------------------------------------------------------------------------- */
.faq {
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: 1.4;
  letter-spacing: var(--ls-head);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__q:hover {
  color: var(--accent-ink);
}

/* Plus-Icon aus zwei Pseudo-Elementen. Bei aria-expanded=true wird es zum Minus. */
.faq__icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--accent);
  transition:
    transform var(--dur) var(--ease-in-out),
    opacity var(--dur) var(--ease-in-out);
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__q[aria-expanded='true'] .faq__icon::after {
  transform: rotate(180deg);
  opacity: 0;
}

/* Der „0fr → 1fr"-Grid-Trick: animiert auf die EXAKTE Inhaltshöhe, ohne den
   Zahlenwert kennen zu müssen — anders als eine max-height-Lösung, die immer
   einen geratenen Deckel braucht und bei längeren Antworten abschneidet.

   Hinweis für spätere Prüfungen: In der Vorschau-Umgebung misst sich das wie
   ein Totalausfall — getComputedStyle meldet bei data-open="true" hartnäckig
   0px. Das ist ein Messartefakt, kein Fehler: Der Vorschau-Browser rechnet den
   Stil nicht neu, wenn ein Skript ein Attribut ändert. Erzwingt man die
   Neuberechnung (Knoten klonen und ersetzen), öffnet das Panel korrekt auf
   seine Inhaltshöhe. Nicht auf dieses Symptom hin „reparieren". */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-in-out);
}

.faq__panel[data-open='true'] {
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__panel p {
  max-width: 66ch;
  padding-bottom: var(--s-5);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   FINAL CTA
   --------------------------------------------------------------------------- */
.final {
  text-align: center;
}

.final .eyebrow {
  margin-bottom: var(--s-4);
}

.final .lede {
  margin: var(--s-4) auto var(--s-6);
}

.final__micro {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-lit);
}

/* ---------------------------------------------------------------------------
   MODAL — Notruf

   visibility ist Teil der Transition — ohne sie bliebe das Modal für
   Screenreader und Tastatur erreichbar, obwohl es unsichtbar ist.

   ABER: visibility wird NICHT über --dur interpoliert, sondern mit Dauer 0s
   geschaltet — beim Öffnen sofort, beim Schließen um --dur verzögert.
   Grund (gemessen, nicht vermutet): Bei einer interpolierten visibility-
   Transition ist der berechnete Wert am Zeitpunkt 0 noch `hidden`. Das Modal
   ist dann für einen ganzen Frame nicht fokussierbar, focus() verpufft, der
   Fokus bleibt auf dem Öffner — und der Focus-Trap läuft ins Leere.
   Mit 0s-Umschaltung ist das Modal sofort fokussierbar, und beim Schließen
   bleibt es sichtbar, bis das Ausblenden fertig ist.
   --------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(20, 24, 31, .74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease-in-out),
    visibility 0s linear var(--dur);
}

.modal[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur) var(--ease-in-out),
    visibility 0s linear 0s;
}

.modal__box {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: var(--s-6);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  transform: translateY(12px) scale(.98);
  transition: transform var(--dur) var(--ease-in-out);
}

.modal[data-open='true'] .modal__box {
  transform: none;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.modal__close:hover {
  background: var(--ink-wash);
  color: var(--ink);
}

.modal__title {
  margin-bottom: var(--s-2);
  padding-right: var(--s-6);
}

.modal__sub {
  margin-bottom: var(--s-5);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Der tel:-Block. Die Nummer im href ist internationalisiert und ohne
   Leerzeichen — sonst wählt iOS nicht zuverlässig mit einem Tap. */
.modal__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4);
  background: var(--ink);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark);
  transition: background var(--dur) var(--ease-out);
}

.modal__tel:hover {
  background: var(--accent-ink);
}

.modal__tel svg {
  flex: none;
  color: var(--accent-lit);
}

.modal__num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.modal__also {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  text-align: center;
  color: var(--text-muted);
}

.modal__also b {
  font-weight: var(--fw-semi);
  color: var(--ink);
}

/* Der Polizei-Hinweis (H4). KEIN Link. KEIN Button. Reiner Text. */
.modal__police {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--signal);
  background: rgba(193, 39, 45, .05);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}

.modal__police b {
  font-weight: var(--fw-bold);
  color: var(--signal);
}

/* Bürozeiten — strikt getrennt vom Notruf (H12). */
.modal__office {
  margin-top: var(--s-4);
  font-size: 12px;
  color: var(--text-muted);
}

.modal__office b {
  font-weight: var(--fw-semi);
}

/* ---------------------------------------------------------------------------
   FOOTER
   Alex Gilts wird hier NICHT genannt (H11).
   Notruf und Büro stehen in zwei getrennten Blöcken (H12).
   --------------------------------------------------------------------------- */
.footer {
  padding-top: var(--s-9);
  padding-bottom: var(--s-6);
  background: var(--ink);
  color: var(--text-on-dark);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-6);
}

/* Footer trägt das VOLLE Logo (Prompt 07): die Atlas-Figur mit Kugel plus die
   Wortmarke. Die Figur kommt als helle SVG-Variante (logo-mark-white.svg) —
   der Footer ist dunkel. Die Wortmarke bleibt bewusst echter Text statt Bild:
   auswählbar, vorlesbar, kein zusätzliches Gewicht.
   🔴 KEINE Rotation hier. Die Kugel dreht sich im Header; der Footer ist der
   Ort, an dem die Seite zur Ruhe kommt (die Rotation ist ohnehin auf
   .header .logo__mark ellipse gescoped und greift auf ein <img> nicht).
   width/height im Markup + feste Höhe hier → kein Layout-Shift. */
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}

.footer__logo {
  flex: none;
  width: auto;
  height: 84px;          /* an der Höhe des Adressblocks daneben ausgerichtet */
  /* Dieselbe Figur wie in Sektion 2 — hier auf Weiß gezogen. Die Zeichnung des
     Globus entsteht in der Grafik ueber Transparenz (52 % Alpha), deshalb bleibt
     sie beim Einfaerben erhalten: brightness(0) macht alles Deckende schwarz,
     invert(1) daraus Weiss. Bewusst NICHT logo-mark-white.svg — die Datei traegt
     den Namen zu Unrecht, sie unterscheidet sich nur um zwei Grautoene und waere
     auf dem dunklen Footer mit ~3:1 zu schwach. */
  filter: brightness(0) invert(1);
}

@media (max-width: 560px) {
  .footer__logo {
    height: 64px;
  }
}

.footer .logo__mark {
  color: var(--accent-lit);
}

.footer .logo__name {
  color: var(--text-on-dark);
}

.footer .logo__sub {
  color: var(--text-on-dark-muted);
}

.footer__addr {
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--text-on-dark-muted);
}

.footer__addr a {
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__addr a:hover {
  color: var(--accent-lit);
}

.footer__head {
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent-lit);
}

.footer__list li + li {
  margin-top: 10px;
}

.footer__list a {
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__list a:hover {
  color: var(--text-on-dark);
}

/* Der getrennte Block (H12) — Notruf und Büro dürfen NIEMALS zusammen stehen. */
.footer__hours {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-on-dark);
}

.footer__hours-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.footer__hours-label--signal {
  color: var(--signal-lit);
}

.footer__hours-label--office {
  color: var(--text-on-dark-muted);
}

.footer__hours-value {
  font-size: var(--fs-small);
  color: var(--text-on-dark);
}

.footer__bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-on-dark);
  font-size: 12px;
  color: var(--text-on-dark-muted);
}

/* ---------------------------------------------------------------------------
   FORMULARE — Basis-Styles, bereits jetzt (genutzt ab Prompt 04 / 09)
   --------------------------------------------------------------------------- */
.field + .field {
  margin-top: var(--s-5);
}

.label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.label .req {
  color: var(--signal);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.textarea {
  min-height: 140px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.error {
  display: none;
  margin-top: var(--s-2);
  font-size: 13px;
  color: var(--signal);
}

.field[data-invalid='true'] .input,
.field[data-invalid='true'] .select,
.field[data-invalid='true'] .textarea {
  border-color: var(--signal);
}

.field[data-invalid='true'] .error {
  display: block;
}

/* Honeypot — NICHT display:none. Bots erkennen das und überspringen das Feld. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Radio- und Checkbox-Optionen als Cards */
.opt {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.opt:hover {
  border-color: var(--accent-line);
}

.opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface-warm);
}

.opt input {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.opt input[type='radio'] {
  border-radius: 50%;
}

.opt input[type='checkbox'] {
  border-radius: 3px;
}

.opt input:checked {
  border-color: var(--accent);
}

.opt input[type='radio']::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.opt input[type='checkbox']::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.opt input[type='radio']:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

.opt input[type='checkbox']:checked::before {
  transform: rotate(-45deg) scale(1);
}

.opt__text {
  font-size: 15px;
  line-height: 1.5;
}

/* Progress-Bar (mehrstufiges Formular, Prompt 04) */
.progress__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.progress__meta b {
  color: var(--accent-ink);
}

.progress__rail {
  height: 3px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

.form-card {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------------------
   ANFRAGE-ASSISTENT (Prompt 07)

   Eine helle Karte, die in ZWEI Kontexten funktionieren muss: über dem
   Hero-Video (dunkler Grund) und auf der Kontaktseite (heller Grund).

   🔴 `color: var(--text)` ist hier kein Schönheitsdetail, sondern ein Bugfix.
   `.hero` setzt `color: var(--text-on-dark)` (weiß) und vererbt das in die
   Karte hinein. Alles, was keine eigene Farbe setzt — allen voran
   `.opt__text` — war dadurch WEISS AUF WEISS und schlicht unsichtbar
   (gemessen: 1,00:1). Die Optionen sahen aus wie leere Kästchen. Die Karte
   stellt ihre Textfarbe jetzt selbst her, statt sich auf den Kontext zu
   verlassen.
   --------------------------------------------------------------------------- */
.hero__aside {
  position: relative;
  z-index: 1;
}

.quiz {
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  /* 🔴 Die 520-px-Obergrenze aus Prompt 08 gilt AUCH einspaltig. Ohne sie zog
     das Panel zwischen 520 und 1150 px Viewport auf die volle Spaltenbreite
     (gemessen 945 px bei 1024 px) — exakt der Zustand, der als „Panel doppelt
     so gross" gemeldet wurde. Auf echten Handys liegt die verfuegbare Breite
     ohnehin darunter, dort aendert der Deckel nichts. */
  max-width: 520px;
}

/* Das Panel setzt seine Textfarben AUSDRÜCKLICH selbst und erbt keine aus dem
   Umfeld. Es ist eine geschlossene Komponente mit hellem Grund, die im dunklen
   Hero UND auf der hellen Kontaktseite steht — auf Vererbung ist da kein
   Verlass. Die Optionsbeschriftungen sind der wichtigste Text im Panel und
   bekommen deshalb die kräftigste Farbe, nicht die schwächste. */
.quiz .opt__text,
.quiz__legend,
.quiz .input,
.quiz .textarea {
  color: var(--ink);            /* 15,8:1 auf Weiß */
}

.quiz .input::placeholder,
.quiz .textarea::placeholder {
  color: var(--text-muted);     /* 5,4:1 auf Weiß */
  opacity: 1;                   /* Firefox dimmt Platzhalter sonst zusätzlich */
}

.quiz__kicker,
.quiz__count,
.quiz__trust {
}

/* Hebel 2: straffe Optionszeilen. 11 px Padding statt 16 — die Zeile bleibt mit
   ~44 px trotzdem über dem 44-px-Touch-Target. Straffen heißt nicht
   unbedienbar machen. */
.quiz .opts--tight .opt {
  padding: 10px 14px;      /* ergibt 44 px Zeilenhoehe — Touch-Untergrenze, nicht darunter */
}

/* Kompaktere Eingabefelder im Panel. Das Label sitzt in Schritt 5 als
   Platzhalter IM Feld (das <label> bleibt für Screenreader als .sr-only
   erhalten) — das spart pro Zeile rund 30 px und ist der Hauptgrund, warum das
   Panel überhaupt quadratisch werden kann. */
.quiz .input {
  padding: 8px 12px;       /* ergibt 42 px Feldhoehe — unter dem 44-px-Maximum */
  font-size: 15px;
}

.quiz .field + .field {
  margin-top: 8px;
}

/* Die Einwilligung trägt den längsten Text im Panel — kleiner gesetzt und eng
   geführt, damit Schritt 5 unter die gemeinsame Panel-Höhe passt. Der Wortlaut
   bleibt unverändert (rechtlich relevant), nur die Typografie wird kompakter. */
.quiz .opt--consent {
  padding: 10px var(--s-3);
}

.quiz .opt--consent .opt__text {
  font-size: 13px;
  line-height: 1.4;
}

/* Hebel 4: EINE Höhe über alle fünf Schritte. Ohne sie springt das Layout beim
   Schrittwechsel (CLS) und die Proportion wäre nicht planbar. Der Wert trägt
   den höchsten Schritt; die kürzeren verteilen den Raum, statt das Panel
   schrumpfen zu lassen. */
.quiz__body {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  min-height: 368px;   /* traegt den hoechsten Schritt (5); Panel bleibt unter 580 px */
}

.quiz__step {
  flex: 1;
}

/* Kopf: Claim links, Schrittanzeige rechts. Kein Siegel, kein Zähler (H6). */
.quiz__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.quiz__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.quiz__count {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semi);
  white-space: nowrap;
}

/* Fortschrittsbalken — dünn, volle Panel-Breite. */
.quiz__rail {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.quiz__bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

/* fieldset zurücksetzen — keine Browser-Umrandung, kein Eigen-Padding. */
.quiz__step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.quiz__legend {
  padding: 0;
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}

.quiz .opts {
  display: grid;
  gap: 6px;
}

.quiz .field + .field {
  margin-top: var(--s-4);
}

/* Feldpaare — der wichtigste Hebel gegen ein langes Formular. */
.quiz__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.quiz__row--plz {
  grid-template-columns: 0.55fr 1fr;   /* PLZ schmaler als der Ort */
}

.quiz__row .field + .field {
  margin-top: 0;
}

.quiz .opt--consent {
  margin-top: var(--s-3);
}

.label__opt {
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.quiz__err {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--signal);
}

.quiz__err[hidden] {
  display: none;
}

/* H19-Meldung bei Versandproblemen — signalrot, aber nur hier (semantisch). */
.quiz__status {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--signal);
  background: rgba(193, 39, 45, 0.06);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
}

.quiz__status[hidden] {
  display: none;
}

/* 🔴 Ohne diese Regel bleiben ausgeblendete Buttons SICHTBAR. Ursache: die
   UA-Regel [hidden]{display:none} und .btn{display:inline-flex} haben dieselbe
   Spezifität (0-1-0) — und Autorenstile schlagen UA-Stile grundsätzlich. In
   Schritt 1 standen dadurch „zurück", „Nächster Schritt" UND „Kostenloses
   Angebot anfordern" gleichzeitig da. .btn[hidden] ist 0-2-0 und gewinnt.
   Kein !important nötig, nur die richtige Spezifität. */
.btn[hidden] {
  display: none;
}

.quiz__nav {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

/* „zurück" ist sekundär und darf schmal bleiben; der Vorwärts-Button trägt. */
.quiz__nav [data-quiz-back] {
  flex: 0 0 auto;
}

.quiz__nav .btn {
  flex: 1;
}

.quiz__trust {
  margin-top: var(--s-3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* Kompaktere Button-Variante — das Panel soll nicht von den Buttons dominiert
   werden. Höhe bleibt über 44 px Touch-Target. */
.btn--sm {
  padding: 12px 18px;
  font-size: var(--fs-small);
}
/* ---------------------------------------------------------------------------
   BLOG (Prompt 07)
   Rein typografisch — bewusst OHNE Artikelbilder. Custodia hat keine echten
   Bilder (K4 offen), und weitere Platzhalter wollen wir nicht. Das passt zum
   reduzierten Design und ist ohnehin die ruhigere Lösung.
   --------------------------------------------------------------------------- */
.pagehead__meta {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
}

.posts {
  display: grid;
  gap: var(--s-5);
}

.post {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.post:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-card);
}

.post__meta {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.post__title {
  margin-top: var(--s-3);
}

/* Die ganze Überschrift ist der Link — größere Trefferfläche als nur „Weiterlesen". */
.post__title a {
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.post__title a:hover {
  color: var(--accent-ink);
}

.post__teaser {
  margin: var(--s-3) 0 var(--s-4);
  max-width: var(--measure);
  color: var(--text-muted);
}

/* Abschluss des Artikels: Trennlinie, kompakter CTA, Rückweg. */
.article-end {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}

.article-end__text {
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  font-weight: var(--fw-semi);
  color: var(--ink);
}

.article-back {
  margin-top: var(--s-6);
}

/* Rechtlicher Schlusshinweis im Artikel — leiser als der Fließtext. */
.note {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   THANKS — Bestätigungsseite (/danke/)
   --------------------------------------------------------------------------- */
.thanks {
  text-align: center;
}

.thanks .lede {
  margin-inline: auto;
}

.thanks .btn {
  margin-top: var(--s-6);
}

.thanks[hidden] {
  display: none;
}

/* danke.js setzt den Fokus auf die H1, damit Screenreader den Dank vorlesen.
   Die H1 ist tabindex=-1 und per Tastatur nie erreichbar — der Fokus kommt nur
   programmatisch. Deshalb hier (und nur hier) kein sichtbarer Ring: er läse
   sich wie ein Fehler. (Standard-Muster für „Fokus nach Navigation".) */
.thanks h1:focus {
  outline: none;
}

/* „Was jetzt passiert" — nummerierte Prozessliste, linksbündig in der Mitte. */
.nextsteps {
  display: grid;
  gap: var(--s-4);
  max-width: 460px;
  margin: var(--s-7) auto 0;
  text-align: left;
}

.nextsteps li {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}

.nextsteps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  background: var(--surface-warm);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
}

.nextsteps__text {
  padding-top: 5px;
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------------------------
   HEIMWEGTELEFON — der Hinweisblock (Modal, Hero, Leistungsseite)

   🔴 Ein EIGENSTÄNDIGER, gemeinnütziger Dienst des Heimwegtelefon e. V. —
   KEINE Custodia-Leistung. Deshalb visuell klar abgesetzt von Custodias
   eigener Notrufnummer: neutrale Fläche statt Signal-Rot, eigene Kennzeichnung,
   Zeiten IMMER dabei (der Dienst ist nur abends/nachts besetzt — eine
   24/7-Implikation wäre falsch).
   --------------------------------------------------------------------------- */
.hwt {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
}

/* Die beiden <p>-Kinder tragen bewusst den Elternselektor (0-2-0).

   Grund, gemessen: Der Block steht auch im FAQ-Panel, und dort greift
   `.faq__panel p { color: var(--text-muted) }` mit 0-1-1 — das schlägt ein
   nacktes `.hwt__label` / `.hwt__note` (0-1-0). Ohne den Prefix verliert das
   Label im FAQ seinen Navy-Akzent und die Fußnote fällt auf 4,54:1, während
   derselbe Block im Modal korrekt aussieht. `.hwt__tel` ist davon nicht
   betroffen (ein <a>, kein <p>) und bleibt flach.

   `p.hwt__label` (0-1-1) wäre ein Gleichstand und würde nur über die
   Quellreihenfolge entschieden — zu fragil. Der Elternselektor gewinnt
   unabhängig davon, wo im Stylesheet die FAQ-Regeln stehen. */
.hwt .hwt__label {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
}

.hwt__tel {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.hwt__tel:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bewusst NICHT --text-muted. Der Navy-Schleier (--accent-wash) verdunkelt den
   Grund auf #E3E6EA; darauf fällt --text-muted (#63676E) von 5,21:1 auf
   gemessene 4,54:1 — es bestünde AA nur noch mit 0,04 Reserve. Diese Zeilen
   tragen die Öffnungszeiten und die Abgrenzung zu Custodia (H21), also genau
   die Angaben, auf die sich jemand nachts verlässt. #54585F misst 5,71:1 auf
   der getönten Fläche und bleibt gegenüber Label und Nummer (9,19:1) sekundär. */
.hwt .hwt__note {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: #54585F;
}

/* Schlussstrich unter die Leistungsliste.

   Die Leistungs-Sektionen wechseln sich weiß/hell ab und enden mit
   Kaufhausüberwachung auf --bg. Der Heimwegtelefon-Hinweis liegt ebenfalls auf
   --bg — gemessen derselbe Ton, die beiden Sektionen verschmelzen also ohne
   Hilfe zu einer. Weiß wäre keine Lösung, sondern das Gegenteil: dann setzte
   der Hinweis die Alternanz fort und läse sich erst recht als „Leistung 07".
   Deshalb die Haarlinie — sie markiert, dass die Liste hier vorbei ist und
   etwas anderes anfängt (H21). */
.sec--after-list {
  border-top: 1px solid var(--border-strong);
}

/* Auf dunklem Grund (Hero, Footer, dunkle Sektionen). */
.sec--dark .hwt,
.hero .hwt {
  border-left-color: var(--accent-lit);
  background: rgba(121, 173, 220, 0.1);
}

.sec--dark .hwt__label,
.sec--dark .hwt__tel,
.hero .hwt__label,
.hero .hwt__tel {
  color: var(--accent-lit);
}

.sec--dark .hwt__note,
.hero .hwt__note {
  color: var(--text-on-dark-muted);
}

/* ---------------------------------------------------------------------------
   TICKS — Aufzählung mit Navy-Häkchen (z. B. „Typische Einsätze")
   --------------------------------------------------------------------------- */
.ticks {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.ticks li {
  position: relative;
  padding-left: 30px;
  line-height: var(--lh-body);
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   ANCHOR-NAV — horizontale Sprung-Navigation (Leistungsseite, 7 Sektionen)
   Auf schmalen Viewports horizontal scrollbar statt umbrechend.
   --------------------------------------------------------------------------- */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.anchor-nav a {
  display: inline-flex;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--accent-ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.anchor-nav a:hover {
  border-color: var(--accent);
  background: var(--surface-warm);
}

@media (max-width: 700px) {
  .anchor-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--s-2);
    scrollbar-width: thin;
  }
}

/* ---------------------------------------------------------------------------
   LEGAL — Lesespalte für Rechtstexte (Impressum, Datenschutz)
   Ein Nachschlagewerk, keine Effekthascherei: klare Hierarchie, ruhiger Rhythmus.
   --------------------------------------------------------------------------- */
.legal {
  max-width: 72ch;
  /* Lange, unbrechbare Tokens (E-Mail-Adressen, URLs) auf schmalen Viewports
     umbrechen — sonst schieben sie die Seite über die Viewport-Breite. */
  overflow-wrap: break-word;
}

.legal h2 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  /* Kein eigenes scroll-margin-top: das globale scroll-padding-top auf <html>
     (base.css) deckt den Sticky-Header bereits ab. Beides zusammen würde sich
     addieren und die Anker rund 260 px zu tief absetzen. */
}

.legal > h2:first-child {
  margin-top: 0;
}

.legal h3 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.legal p {
  margin-top: var(--s-3);
  line-height: var(--lh-body);
  color: var(--text);
}

.legal p.small {
  color: var(--text-muted);
}

.legal ul {
  margin-top: var(--s-3);
  padding-left: 0;
  display: grid;
  gap: var(--s-2);
}

.legal ul li {
  position: relative;
  padding-left: 22px;
  line-height: var(--lh-body);
}

.legal ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.legal a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover {
  color: var(--accent);
}

.legal address {
  margin-top: var(--s-3);
  font-style: normal;
  line-height: var(--lh-body);
}

.legal strong,
.legal b {
  font-weight: var(--fw-semi);
}

.legal .legal__updated {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Sprungmarken (Datenschutz) — kompakte Inhaltsübersicht. */
.legal-toc {
  margin-bottom: var(--s-7);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-wrap: break-word;
}

.legal-toc__title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}

.legal-toc ol {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  counter-reset: toc;
}

.legal-toc li {
  counter-increment: toc;
}

.legal-toc a {
  display: inline-flex;
  gap: 10px;
  color: var(--accent-ink);
  font-size: var(--fs-small);
  text-decoration: none;
}

.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.legal-toc a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   PAGEHEAD — kompakter Seitenkopf für Unterseiten (dunkel)
   Geteilt: Karriere, später Leistungen/Über uns/Kontakt. Reduzierte Höhe
   gegenüber dem Startseiten-Hero; die H1 ist hier KEIN LCP-Sonderfall.
   --------------------------------------------------------------------------- */
.pagehead {
  padding-block: clamp(48px, 7vw, 88px);
}

/* Lange deutsche Komposita (z. B. „Datenschutzerklärung") auf schmalen
   Viewports sauber trennen statt über den Rand schieben. lang="de" liefert
   korrekte Trennstellen; overflow-wrap ist der Fallback. */
.pagehead h1 {
  hyphens: auto;
  overflow-wrap: break-word;
}

.pagehead__lede {
  margin-top: var(--s-4);
}

.pagehead .hero__cta {
  margin-top: var(--s-6);
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */

/* Der Hero klappt FRÜHER einspaltig als die übrigen Sektionen (die bei 900 px).
   Grund: neben der Quiz-Karte bliebe der H1-Spalte zwischen 900 und ~1150 px zu
   wenig Breite — „Sicherheit ist kein Kompromiss." bräche um (Prompt 06B verlangt
   eine Zeile je Zeile). Unter 1150 px trägt die H1 die volle Breite und passt bis
   ~500 px hinunter; darunter (Handy) darf sie umbrechen. Der Scrim wechselt hier
   von dunkel-links auf dunkel-oben, weil die H1 dann oben über die volle Breite
   steht. */
@media (max-width: 1150px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  /* Einspaltig gilt wieder die Dokumentreihenfolge: Überschrift, Buttons,
     dann das Quiz. Die Spaltenzuweisung muss dafür weg. */
  .hero__text,
  .hero__aside {
    grid-column: auto;
    grid-row: auto;
  }

  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(20, 24, 31, 0.90) 0%,
        rgba(20, 24, 31, 0.86) 40%,
        rgba(20, 24, 31, 0.66) 68%,
        rgba(20, 24, 31, 0.55) 100%);
  }

  /* Einspaltig braucht die Karte etwas Luft nach oben zur H1/den Buttons. */
  .hero__aside {
    margin-top: var(--s-6);
  }
}

@media (max-width: 1080px) {
  .nav {
    gap: var(--s-4);
  }

  .header__cta .btn {
    padding: 10px 16px;
  }
}

@media (max-width: 900px) {
  /* Touch-Targets auf mindestens 44 px bringen.
     Der Pfeil-Link ist visuell 29 px hoch — die Trefferfläche wird über ein
     unsichtbares ::after vergrößert, statt das Layout aufzublähen. */
  .link::after {
    content: '';
    position: absolute;
    inset: -9px 0;
  }

  /* Footer-Links: aus 17 px werden 45 px, ohne die Spalten zu verschieben. */
  .footer__list a {
    display: block;
    padding-block: 14px;
  }

  .footer__list li + li {
    margin-top: 0;
  }

  /* Telefon und E-Mail in der Adresse — auf dem Handy die wichtigsten Links
     überhaupt. Inline-Text wäre nach WCAG 2.5.8 zwar ausgenommen, aber wer
     nachts eine Nummer antippt, soll sie treffen. */
  .footer__addr a {
    display: inline-block;
    padding-block: 13px;
  }

  /* Das Logo führt zur Startseite — 34 px Bildmarke + Padding = 44 px. */
  .logo {
    padding-block: 5px;
  }

  .nav,
  .header__cta {
    display: none;
  }

  .burger,
  .mnav {
    display: block;
  }

  .split,
  .wach,
  .svc,
  .cards {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  /* Bild immer oben — auch in den geraden Zeilen und im Reverse-Split */
  .split--reverse .split__media,
  .svc:nth-child(even) .svc__media {
    order: 0;
  }

  .split__media,
  .svc__media {
    order: -1;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6) var(--s-5);
  }
}

@media (max-width: 560px) {
  .stats {
    grid-template-columns: 1fr;
  }

  /* Vor- und Nachname im Quiz stapeln — nebeneinander wären die Felder auf dem
     Handy zu schmal. */
  .quiz__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .quiz__row .field + .field {
    margin-top: var(--s-4);
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn {
    width: 100%;
  }

  /* Notruf-Button bleibt — nur Trennstrich und Heimweg-Link verschwinden. */
  .notruf__sep,
  .notruf__link {
    display: none;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__hours {
    gap: var(--s-5);
  }
}

/* ---------------------------------------------------------------------------
   BREADCRUMB (Leistungs-Unterseiten, Prompt 11)
   Bewusst zurückhaltend: kleine Schrift, gedämpfte Farbe, im dunklen Seitenkopf
   über der H1. Er beantwortet „wo bin ich", ohne mit der Überschrift zu
   konkurrieren. Auf den Hauptseiten steht er nicht — dort gibt es keine Tiefe,
   die er erklären könnte.
   --------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
}

.crumbs a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.crumbs a:hover {
  color: var(--accent-lit);
  border-bottom-color: var(--accent-lit);
}

.crumbs__sep {
  color: var(--border-on-dark);
}

/* ---------------------------------------------------------------------------
   TEASER (Übersichtsseite /leistungen/, Prompt 11)
   Die Übersicht trägt seit Prompt 11 keine ausführlichen Abschnitte mehr,
   sondern sechs Teaser, die auf die Unterseiten führen. Jeder Teaser behält die
   BISHERIGE Sprungmarke als id — Sprungziele erreichen den Server nie, eine
   Weiterleitung ist unmöglich, also müssen alte geteilte Links hier landen.
   --------------------------------------------------------------------------- */
.teasers {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.teaser {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.teaser:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* Der Anker springt sonst unter den fixierten Header plus Notruf-Leiste. */
.teaser {
  scroll-margin-top: calc(var(--header-h) + var(--notruf-h) + var(--s-5));
}

.teaser__media .media {
  border-radius: 0;
}

.teaser__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-5);
}

.teaser__title {
  margin-bottom: var(--s-3);
}

/* Der ganze Teaser ist anklickbar: Das Pseudo-Element des Titel-Links deckt die
   Karte ab. Der Link bleibt trotzdem ein echter <a> mit sinnvollem Linktext —
   Screenreader lesen den Leistungsnamen, nicht „Mehr erfahren". Deshalb trägt
   das sichtbare „Mehr erfahren" auch aria-hidden. */
.teaser__link {
  color: inherit;
  text-decoration: none;
}

.teaser__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.teaser {
  position: relative;
}

.teaser__link:focus-visible {
  outline: none;
}

/* Der Fokus muss sichtbar bleiben — er wandert auf die ganze Karte. */
.teaser:has(.teaser__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.teaser__text {
  margin-bottom: var(--s-4);
  font-size: 15px;
  color: var(--text-muted);
}

.link--teaser {
  margin-top: auto;
}

/* ---------------------------------------------------------------------------
   VERWANDTE LEISTUNGEN — Karte als Ganzes verlinkt
   --------------------------------------------------------------------------- */
.card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.card--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.link--card {
  margin-top: auto;
  padding-top: var(--s-4);
}

/* ---------------------------------------------------------------------------
   SEITENBANNER (Prompt 12)
   Das Bildband unter dem Seitenkopf. Steht bewusst IM Container (max 1200 px)
   und nicht über die volle Fensterbreite: Die Motive sind 1152 bis 1408 px
   breit. Über die volle Breite eines 1440er- oder gar 2560er-Bildschirms
   gezogen würden sie sichtbar unscharf — hochskalieren erzeugt nur Matsch.
   Im Container liegt die Darstellungsbreite bei höchstens 1200 px und damit
   at oder unter der Bildbreite.

   Das Seitenverhältnis steht am Container, nicht am Bild — dadurch ist der
   Platz reserviert, bevor das Bild geladen ist, und es gibt keinen
   Layout-Sprung (CLS bleibt 0).
   --------------------------------------------------------------------------- */
.pagebanner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-soft);
}

.pagebanner--16x9 { aspect-ratio: 16 / 9; }
.pagebanner--21x9 { aspect-ratio: 21 / 9; }

.pagebanner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ein Bild, das eine bestehende Platzhalter-Fläche füllt. Das Seitenverhältnis
   trägt weiterhin der umgebende .media-Container. */
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Das Kanal-Motiv auf /ueber-uns/ ist 3:2, der Standard-Platzhalter 4:3. */
.media--3x2 { aspect-ratio: 3 / 2; }

/* Teaser- und Leistungs-Kacheln zeigen 16:9-Motive. Ohne diese Angabe säße ein
   16:9-Bild in einem 4:3-Rahmen und würde seitlich beschnitten. */
.teaser__media .media,
.svc__media .media { aspect-ratio: 16 / 9; }

/* Die Dienstjacke ist ein 4:3-Motiv. Der frühere Platzhalter dort trug
   .media--wide (2:1) — ein 4:3-Bild darin verlöre per object-fit ein Drittel
   der Höhe, und genau Jacke und Funkgerät sollen vollständig sichtbar bleiben. */
.media--4x3 { aspect-ratio: 4 / 3; }

/* Die Aufzählung im Wachpunkt-Abschnitt steht auf DUNKLEM Grund. Der Haken von
   .ticks ist in --accent (#1E3A5F) gezeichnet — auf #14181F wäre er praktisch
   unsichtbar. Auf Dunkel gilt --accent-lit, so wie überall sonst im Projekt. */
.wach__list li::before {
  border-left-color: var(--accent-lit);
  border-bottom-color: var(--accent-lit);
}

.wach__list li {
  color: var(--text-on-dark-muted);
}