/* ══ SECTION 4 · ANFRAGE — Aussehen ══════════════════════════════════════
   Links steht, wer wir sind und wie man uns erreicht. Rechts steht ein
   Glaspaneel, in dem man sein Paket zusammenstellt — und darin ein
   PRÜFSTAND: das Hologramm des gewählten Modells, dasselbe wie auf den
   Karten in Station 2 (engine/koerper.mjs). Was man auswählt, steht
   sofort als Gegenstand da.

   ── Warum kein backdrop-filter ──────────────────────────────────────────
   Das Paneel sieht aus wie Glas, ist aber keins. Hinter ihm liegt eine
   deckende Fläche (`--void`) — es gäbe also nichts zu verwischen. Dafür
   bekäme die Sektion bei jedem Stationswechsel einen vollen Repaint,
   denn sie wird dabei skaliert und maskiert. Ein Effekt, der nichts
   zeigt und 620 ms kostet, ist keiner.

   ── Warum die Deko NEBEN dem Raster liegt ───────────────────────────────
   `.an-orbit` ist Geschwister von `.an-raster`, nicht Kind. Innen müsste
   sie sich am Textfluss vorbeimogeln und ragt bei schmalen Fenstern über
   den Rand — der waagerechte Überstand der Live-Seite hatte genau EINE
   Quelle, und das war so ein Element.

   ── Der Innen-Scroller ──────────────────────────────────────────────────
   `.an-lauf` trägt `data-scroller`. Daran erkennt die Regie ihn (sie
   liest `overflow-y`), und sie rollt ihn beim Stationswechsel zurück.
   Seine Höhe kommt aus dem RASTER, nie aus einer Rechnung: `minmax(0,
   1fr)` auf der Zeile, `min-height: 0` auf dem Kasten. Ein blankes `1fr`
   hätte die Inhaltshöhe als Minimum — dann wächst die Zeile mit dem
   Inhalt, und oben wird abgeschnitten, was man nicht mehr erreicht.
──────────────────────────────────────────────────────────────────────── */

.anfrage {
  --ton: var(--haze);          /* wandert mit dem gewählten Modell        */
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding: clamp(4rem, 10svh, 7rem) clamp(1.1rem, 4vw, 3rem);
  /* KEIN eigener Hintergrund: den trägt seit 08.08.2026 die feste
     Fläche `.grund` hinter der ganzen Seite. Ein deckendes --void hier
     schnitte sie hart ab — genau das machte die Naht sichtbar. */
}
html.stationen .anfrage {
  /* EINE Zeile, die den Rest bekommt. Siehe Kopf. */
  grid-template-rows: minmax(0, 1fr);
  padding-block: 0 clamp(14px, 2.4svh, 30px);
}

/* ── Deko ────────────────────────────────────────────────────────────── */
.an-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 14% 34%,
      color-mix(in srgb, var(--haze) 13%, transparent), transparent 68%),
    radial-gradient(40% 46% at 88% 74%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 66%);
}
/* Dasselbe Gitter, in dem der Durchgang die Seite zerlegt — sehr leise.
   Es erzählt, dass diese Sektion aus demselben Material besteht wie der
   Hero, ohne dass ein zweiter Kontext dafür aufgemacht wird. */
.an-raster-hauch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--haze) 22%, transparent) 0 1px, transparent 1.6px);
  background-size: var(--zelle, 14px) var(--zelle, 14px);
  -webkit-mask-image: radial-gradient(78% 66% at 50% 44%, #000, transparent 76%);
          mask-image: radial-gradient(78% 66% at 50% 44%, #000, transparent 76%);
}

.an-raster {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.6rem, 4vw, 4.5rem);
  align-items: center;
  width: min(100%, 1200px);
  min-height: 0;
  margin-inline: auto;
}

/* ── Linke Spalte ────────────────────────────────────────────────────── */
.an-links { min-width: 0; }

.an-kicker {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.15rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--haze);
}
.an-kicker::after {
  content: '';
  flex: 1;
  max-width: 5rem;
  height: 1px;
  background: linear-gradient(to right, var(--haze), transparent);
}

.an-links h2 {
  margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 3.9vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--ink);
}
/* Betonung über FARBE und Lichtsaum, nicht über einen Verlauf im Text.
   Verlaufstext ist auf dieser Seite einmal drin gewesen und bewusst
   wieder herausgeflogen (DESIGN.md) — er frisst Kontrast und liest sich
   auf jedem zweiten Bildschirm anders. */
.an-links h2 em {
  font-style: normal;
  /* Live-Regel `h2 em { color: var(--haze) }` (../../../assets/style.css:177).
     Vorher #dff4f2, ein blasses Mint — das hob das betonte Wort in einen
     Farbraum, den die Live-Seite für Überschriften gar nicht benutzt.
     Der Hof kehrt sich mit um: vorher trug ihn das Cyan und das Mint war
     nur dessen blasse Mitte, jetzt trägt ihn der Flieder und Cyan bleibt
     der leise Rand. Sonst stünde ein violettes Wort in einem türkisen
     Schein — zwei Aussagen an einer Stelle. */
  color: var(--haze);
  text-shadow:
    0 0 58px color-mix(in srgb, var(--haze) 34%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

.an-sub {
  margin: 1.15rem 0 0;
  max-width: 34ch;
  font-size: clamp(.92rem, 1.15vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-dim);
  opacity: .91;
}

.an-strich {
  width: clamp(2.4rem, 5vw, 4rem);
  height: 1px;
  margin: clamp(1.5rem, 3.4svh, 2.2rem) 0;
  border: 0;
  background: linear-gradient(to right, var(--haze), transparent);
}

.an-wege { display: grid; gap: clamp(.5rem, 1.4svh, .9rem); }
.an-weg {
  display: flex;
  align-items: center;
  gap: .95rem;
  /* Die ganze Zeile ist das Ziel, nicht nur der Text. 44 px hoch, auch
     wenn das Symbol 38 px misst. */
  min-height: 44px;
  padding: .35rem .6rem .35rem 0;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s var(--ease), translate .3s var(--ease);
}
.an-weg i {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--haze) 7%, transparent);
  color: var(--haze);
  transition: border-color .3s var(--ease), color .3s var(--ease),
              background .3s var(--ease);
}
.an-weg svg { width: 16px; height: 16px; display: block; }
.an-weg-t { min-width: 0; }
.an-weg-t b {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .002em;
  overflow-wrap: anywhere;
}
.an-weg-t span {
  display: block;
  margin-top: .1rem;
  font-size: .78rem;
  color: var(--ink-dim);
  opacity: .83;
}
/* Der dritte Weg ist seit 18.08.2026 kein Link mehr (kein Ort auf der Seite,
   nur „Deutschlandweit tätig") — er reagiert deshalb nicht auf den Zeiger. */
.an-weg-still { cursor: default; }
@media (hover: hover) {
  .an-weg:not(.an-weg-still):hover { background: color-mix(in srgb, var(--haze) 6%, transparent); translate: 3px 0; }
  .an-weg:not(.an-weg-still):hover i {
    border-color: color-mix(in srgb, var(--accent) 46%, transparent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.an-weg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.an-versprechen {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: clamp(1.2rem, 2.8svh, 1.9rem) 0 0;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-dim);
  opacity: .85;
}
/* Ein Punkt, der langsam pulst — das einzige Dauerlicht dieser Sektion.
   Es sagt „hier ist jemand", und mehr soll es nicht sagen. */
.an-puls {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: an-puls 2.8s var(--ease) infinite;
}
@keyframes an-puls {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Das Paneel ──────────────────────────────────────────────────────── */
.an-paneel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  max-height: 100%;
  padding: clamp(1.1rem, 2.4svh, 1.7rem) clamp(1rem, 2vw, 1.6rem);
  border-radius: 22px;
  border: 1px solid var(--linie);
  /* Glas ohne Filter: eine helle Kante oben, ein kühler Grund, ein
     Schlagschatten MIT Versatz. Ein versatzloser Farbhof wäre Dekoration,
     kein Volumen. */
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--haze) 9%, transparent) 0%,
      transparent 38%),
    color-mix(in srgb, var(--glas) 82%, transparent);
  box-shadow:
    0 32px 78px -44px color-mix(in srgb, var(--ton) 58%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}

/* ── Schrittanzeige ──────────────────────────────────────────────────── */
.an-schritte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 clamp(.9rem, 2svh, 1.4rem);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.an-schritt {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .5rem;
}
/* Die Verbindungslinie sitzt auf dem Schritt, nicht dazwischen: so gibt
   es keinen vierten Kasten, der nur eine Linie hält. Der letzte hat
   keine — sonst liefe sie ins Nichts. */
.an-schritt:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 1px;
  background: var(--linie);
}
.an-schritt.erledigt:not(:last-child)::after {
  background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
}
.an-schritt b {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--void) 70%, transparent);
  font: 500 .78rem/1 'Space Mono', ui-monospace, monospace;
  color: var(--ink-dim);
  transition: border-color .35s var(--ease), color .35s var(--ease),
              background .35s var(--ease), box-shadow .35s var(--ease);
}
.an-schritt span {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .77;
  transition: color .35s var(--ease), opacity .35s var(--ease);
}
.an-schritt.aktiv b {
  border-color: transparent;
  background: color-mix(in srgb, var(--haze) 88%, var(--accent));
  color: var(--void);
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--haze) 70%, transparent);
}
.an-schritt.aktiv span { color: var(--ink); opacity: 1; }
.an-schritt.erledigt b {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
}

/* ── Der Prüfstand ───────────────────────────────────────────────────────
   Das Hologramm des gewählten Modells — dieselbe Zeichnung wie auf den
   Karten in Station 2, weil es dasselbe Ding ist. Zwei Flächen
   übereinander: koerper.mjs beansprucht seine exklusiv und löscht sie je
   Bild, die Care-Ringe brauchen deshalb eine eigene. Beides Canvas 2D —
   das zählt nicht gegen das WebGL-Kontingent. */
.an-stand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.4rem);
  margin: 0 0 clamp(.9rem, 2svh, 1.3rem);
  padding: clamp(.7rem, 1.6svh, 1rem);
  border-radius: 16px;
  border: 1px solid var(--linie);
  background:
    radial-gradient(58% 46% at 22% 96%,
      color-mix(in srgb, var(--ton) 20%, transparent), transparent 72%),
    color-mix(in srgb, var(--void) 55%, transparent);
}
.an-vitrine {
  position: relative;
  width: clamp(76px, 9vw, 104px);
  aspect-ratio: 1;
  flex: none;
}
.an-vitrine canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
}
.an-stand-text { min-width: 0; }
.an-stand-nr {
  font: 400 .66rem/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: .2em;
  color: color-mix(in srgb, var(--ton) 82%, transparent);
}
.an-stand-name {
  margin: .42rem 0 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.1;
  color: var(--ink);
}
.an-stand-preis {
  margin: .28rem 0 0;
  font: 700 .95rem/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: -.01em;
  color: var(--accent);
}
.an-stand-fit {
  margin: .5rem 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink-dim);
  opacity: .87;
}

/* ── Der Lauf: was der aktuelle Schritt zeigt ────────────────────────── */
.an-lauf {
  min-height: 0;
  /* MUSS auto/scroll bleiben: daran erkennt innenScroller() in
     stationen.mjs einen echten Scroller und gibt ihm die Geste. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-right: 2px;
}
.an-lauf::-webkit-scrollbar { width: 0; height: 0; }

.an-frage {
  margin: 0 0 .8rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .81;
}

.an-stufe { display: none; }
.an-stufe.da { display: block; }

/* Die Auswahlkacheln. Drei Spalten wie im Referenzbild; bei sechs
   Modellen sind das zwei ruhige Reihen statt einer gedrängten. */
.an-kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
.an-kacheln.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.an-wahl {
  position: relative;
  display: grid;
  align-content: start;
  gap: .3rem;
  /* Tippziel deutlich über 44 px — die Kachel IST das Ziel. */
  min-height: 92px;
  padding: .85rem .8rem .9rem;
  border-radius: 14px;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--void) 42%, transparent);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease),
              box-shadow .3s var(--ease), translate .22s var(--ease);
}
.an-wahl-nr {
  font: 400 .6rem/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  color: var(--ink-dim);
  opacity: .8;
}
.an-wahl b {
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: -.004em;
}
.an-wahl span {
  font-size: .74rem;
  line-height: 1.4;
  color: var(--ink-dim);
  opacity: .85;
}
.an-wahl em {
  font-style: normal;
  font: 700 .84rem/1 'Space Mono', ui-monospace, monospace;
  color: var(--accent);
}
@media (hover: hover) {
  .an-wahl:hover {
    border-color: color-mix(in srgb, var(--haze) 42%, transparent);
    background: color-mix(in srgb, var(--haze) 7%, transparent);
    translate: 0 -2px;
  }
}
.an-wahl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-wahl[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--haze) 70%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--haze) 15%, transparent), transparent 62%),
    color-mix(in srgb, var(--void) 30%, transparent);
  /* Der farbige Schatten hat einen VERSATZ. Ohne ihn wäre er ein Ring,
     also Dekoration statt Tiefe. */
  box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--haze) 85%, transparent);
}
.an-wahl[aria-pressed="true"] .an-wahl-nr { color: var(--haze); opacity: 1; }

/* Die Kachel mit Schild braucht oben Platz dafür — sonst sitzt das
   Schild auf der Modellnummer. */
.an-wahl:has(.an-schild) { padding-top: 1.25rem; }

/* ── Zelle + Info-Knopf (15.08.2026) ─────────────────────────────────────
   Die Modell-Kacheln sitzen in einer Zelle mit zwei Knöpfen: die Kachel
   (wählt) und ein „i" in der Ecke (öffnet die Info-Tafel). Geschwister,
   nicht verschachtelt — anfrage.mjs sagt warum. Die Zelle ist das
   Rasterkind; die Kachel füllt sie. */
.an-zelle { position: relative; display: grid; min-width: 0; }
/* Rechts oben braucht die Kachel Platz für das „i", sonst liegt es auf
   dem Preis. */
.an-zelle .an-wahl { height: 100%; padding-right: 2.2rem; }

.an-info-knopf {
  position: absolute;
  top: .55rem; right: .55rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--linie-hell);
  background: color-mix(in srgb, var(--void) 40%, transparent);
  color: var(--ink-dim);
  font: italic 500 .72rem/1 'Clash Display', 'Space Grotesk', serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease);
}
/* Sichtbar 24 px, Ziel 44 px: die Trefferfläche wächst per Pseudo-Element,
   ohne dass der Knopf optisch größer wird. */
.an-info-knopf::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}
@media (hover: hover) {
  .an-info-knopf:hover {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--haze) 60%, transparent);
    background: color-mix(in srgb, var(--haze) 12%, transparent);
  }
}
.an-info-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Bei Care ist das „i" ein Link auf care.html — gleiches Aussehen, kein
   Unterstrich. */
.an-info-link { text-decoration: none; }

/* ── Die Info-Tafel ──────────────────────────────────────────────────────
   Über dem ganzen Paneel, mit dessen Rundung. Drei Zeilen: Kopf, Lauf
   (eigener Scroller — die Tafel ist länger als das Fenster hoch), Fuß.
   Der Grund ist DECKEND — hier gibt es kein Durchscheinen zu zeigen,
   und die Kacheln darunter würden nur stören. */
.an-info {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: clamp(1.1rem, 2.4svh, 1.7rem) clamp(1rem, 2vw, 1.6rem);
  border-radius: inherit;
  background: color-mix(in srgb, var(--void) 92%, var(--glas));
}
.an-info[hidden] { display: none; }
/* Solange die Tafel offen ist, ist das Paneel darunter nicht bedienbar —
   Tab-Reihenfolge und Zeiger sollen nicht durch die Tafel hindurchgreifen. */
.an-paneel.info-offen > :not(.an-info) { visibility: hidden; }

.an-info-kopf {
  position: relative;
  padding-right: 3rem;
  padding-bottom: clamp(.8rem, 1.8svh, 1.1rem);
  border-bottom: 1px solid var(--linie);
}
.an-info-nr {
  margin: 0;
  font: 400 .66rem/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: .2em;
  color: var(--ink-dim);
  white-space: pre;
}
.an-info-kopf h3 {
  margin: .45rem 0 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.05;
  color: var(--ink);
}
.an-info-versprechen {
  margin: .3rem 0 0;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--haze);
}
.an-info-zu {
  position: absolute;
  top: -.35rem; right: -.35rem;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-dim);
  font: 300 1.5rem/1 'Space Grotesk', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .an-info-zu:hover { color: var(--ink); } }
.an-info-zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.an-info-lauf {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--haze) 34%, transparent) transparent;
  padding: clamp(.9rem, 2svh, 1.3rem) 2px 0 0;
}
.an-info-anlass {
  margin: 0;
  max-width: 44ch;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
}
.an-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin: .9rem 0 0;
}
.an-info-meta div { min-width: 0; }
.an-info-meta dt {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .8;
}
.an-info-meta dd {
  margin: .15rem 0 0;
  font-size: .84rem;
  color: var(--ink);
}
.an-info-block { margin-top: clamp(1rem, 2.4svh, 1.4rem); }
.an-info-block h4 {
  margin: 0 0 .5rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .85;
}
/* Haarlinien statt Punkte — dieselbe Liste wie in der Tafel der Station 2. */
.an-info-punkte {
  margin: 0;
  padding: 0;
  list-style: none;
}
.an-info-punkte li {
  padding: .42rem 0;
  border-top: 1px solid var(--linie);
  font-size: .84rem;
  line-height: 1.4;
  color: var(--ink);
}
.an-info-punkte li:last-child { border-bottom: 1px solid var(--linie); }
.an-info-passt li { color: var(--ink-dim); }
.an-info-passt li::before { content: '— '; opacity: .6; }

.an-info-fuss {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: clamp(.8rem, 1.8svh, 1.2rem);
  padding-top: clamp(.8rem, 1.8svh, 1.2rem);
  border-top: 1px solid var(--linie);
}
.an-info-fuss .knopf { margin-left: auto; cursor: pointer; }
.an-info-fuss .an-zurueck { display: inline-grid; }

@media (max-width: 960px) {
  /* Im Blätterbetrieb hat das Paneel keine feste Höhe — die Tafel legt
     sich dann nicht über es, sondern nimmt seinen Platz ein und ist so
     lang, wie sie ist. */
  .an-info { position: relative; inset: auto; padding: 0; background: none; }
  .an-info-lauf { overflow: visible; }
  .an-paneel.info-offen > :not(.an-info) { display: none; }
  /* Dasselbe für den Fertig-Zustand: kein Deckel über einem Paneel ohne
     feste Höhe, sondern sein Platz. `visibility: hidden` würde hier eine
     leere Paneelhöhe stehen lassen.

     Die Regel für `.an-fertig` selbst steht NICHT hier, sondern in der
     zweiten 960-px-Query am Dateiende: `.an-fertig { position: absolute }`
     wird erst in Zeile ~857 erklärt, also NACH diesem Block — und bei
     gleicher Spezifität gewinnt die spätere. Gemessen am 18.08. spät:
     das Paneel war nach dem Absenden 34 px hoch, die Bestätigung ein
     abgeschnittener Streifen darin. */
  .an-paneel.fertig > :not(.an-fertig) { display: none; }
}
@media (max-width: 640px) {
  .an-info-fuss { flex-wrap: wrap; }
  .an-info-fuss .knopf { width: 100%; margin-left: 0; }
}

/* „Beliebteste" — ein Schild, kein zweiter Farbraum. */
.an-schild {
  position: absolute;
  top: -8px; left: .8rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--haze) 86%, var(--accent));
  font: 500 .56rem/1.5 'Space Grotesk', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--void);
}
/* Höhere Spezifität als `.an-wahl span` (16.08.2026): das Schild IST ein
   span in der Kachel und erbte deren --ink-dim mit .85 Deckkraft — heller
   Text auf hellem Schild, unlesbar (Jordans Screenshot). Hier steht, was
   das Schild wirklich braucht: dunkle Schrift, volle Deckkraft. */
.an-wahl .an-schild {
  color: var(--void);
  opacity: 1;
  font-size: .56rem;
  line-height: 1.5;
}

/* Das Extra steht ABGESETZT unter der Frage — es ist eine zweite Frage,
   keine sechste Option. Deshalb auch EINE breite Kachel statt einer
   dritten in der Reihe darüber: im Dreierraster gelesen wäre es eine
   weitere Care-Stufe, und der Preis bräche in drei Zeilen um. */
.an-extra { margin-top: 1.1rem; }
.an-extra .an-kacheln { grid-template-columns: minmax(0, 1fr); }
.an-extra .an-wahl {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'titel preis' 'text  text';
  align-items: baseline;
  column-gap: 1rem;
  row-gap: .3rem;
}
.an-extra .an-wahl b    { grid-area: titel; }
.an-extra .an-wahl em   { grid-area: preis; white-space: nowrap; }
.an-extra .an-wahl span { grid-area: text; }

/* ── Kontaktschritt ──────────────────────────────────────────────────── */
.an-felder { display: grid; gap: .7rem; }
.an-feld { display: grid; gap: .35rem; }
.an-feld.paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.an-feld label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .82;
}
.an-feld input,
.an-feld textarea {
  width: 100%;
  padding: .72rem .85rem;
  border-radius: 11px;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--void) 55%, transparent);
  color: var(--ink);
  /* 16 px ist Pflicht: darunter zoomt iOS beim Fokus in das Feld hinein
     und der Nutzer steht plötzlich in einer vergrößerten Seite. */
  font: 400 16px/1.45 'Space Grotesk', sans-serif;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.an-feld textarea { min-height: 88px; resize: vertical; }
.an-feld input::placeholder,
/* .74, nicht .72: bei .72 misst der Platzhalter 4,48:1 gegen --void und
   verfehlt 4,5 um zwei Hundertstel. Ein Platzhalter ist Text. */
.an-feld textarea::placeholder { color: var(--ink-dim); opacity: .74; }
.an-feld input:focus-visible,
.an-feld textarea:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.an-hinweis {
  margin: .9rem 0 0;
  padding: .7rem .85rem;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.an-hinweis b { color: var(--accent); font-weight: 500; }

/* ── Der Honeypot (18.08.2026) ───────────────────────────────────────────
   Das Feld, das nur ein Bot ausfüllt. NICHT `display: none` und nicht
   `hidden`: ein Teil der Ausfüll-Bots überspringt, was gar nicht
   gerendert wird. Also gerendert, aber aus dem Bild geschoben — die
   Tab-Reihenfolge und der Vorleser sind im Modul ausgeschlossen
   (tabindex −1, aria-hidden). */
.an-honig {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Fehler am Feld ──────────────────────────────────────────────────────
   Eine Zeile unter dem Feld, in derselben Spalte — deshalb reicht sie als
   drittes Kind des `.an-feld`-Rasters. Kein Rot aus dem Nichts: derselbe
   warme Ton wie auf der Live-Seite (#e8917f), damit er neben Cyan und
   Flieder nicht wie ein Systemfehler schreit. */
.an-fehler {
  margin: 0;
  font-size: .76rem;
  line-height: 1.4;
  color: #e8917f;
}
.an-fehler[hidden] { display: none; }
/* Das Feld selbst markiert mit — die Meldung allein findet man nicht,
   wenn der Blick schon weiter unten steht. */
.an-feld input.falsch,
.an-feld textarea.falsch {
  border-color: color-mix(in srgb, #e8917f 70%, transparent);
  background: color-mix(in srgb, #e8917f 7%, transparent);
}

/* ── Die Sendemeldung mit Notausgang ─────────────────────────────────────
   Steht dort, wo der Hinweiskasten steht: am Ende des Kontaktschritts,
   direkt über dem Knopf, der sie ausgelöst hat. Der mailto-Link ist ein
   LINK, kein automatischer Sprung (anfrage.mjs sagt warum). */
.an-meldung {
  margin: .9rem 0 0;
  padding: .75rem .85rem;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, #e8917f 34%, transparent);
  background: color-mix(in srgb, #e8917f 8%, transparent);
}
.an-meldung[hidden] { display: none; }
.an-meldung-text {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink);
}
.an-meldung-mailto {
  display: inline-flex;
  align-items: center;
  /* Tippziel: 44 px, auch wenn der Text nur 18 px hoch ist. */
  min-height: 44px;
  margin-top: .2rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.an-meldung-mailto:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Der Fertig-Zustand ──────────────────────────────────────────────────
   Baugleich zur Info-Tafel: über dem ganzen Paneel, mit dessen Rundung,
   deckender Grund. Das Formular bleibt im DOM (der Prüfstand hängt an
   einer Fläche darin) und wird nur ausgeblendet — „Neue Anfrage" holt es
   unverändert zurück. */
.an-fertig {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(.6rem, 1.4svh, .9rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.3rem, 3svh, 2.1rem) clamp(1rem, 2vw, 1.6rem);
  border-radius: inherit;
  background: color-mix(in srgb, var(--void) 92%, var(--glas));
}
.an-fertig[hidden] { display: none; }
.an-paneel.fertig > :not(.an-fertig) { visibility: hidden; }

.an-fertig-titel {
  margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--ink);
}
.an-fertig-sub {
  margin: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .81;
}
/* Vier Schritte als Haarlinien-Liste — dieselbe Form wie `.an-info-punkte`
   in der Tafel. Die Nummern kommen aus dem Zähler, nicht aus dem Text:
   sonst müsste eine Übersetzung sie mittippen. */
.an-fertig-schritte {
  display: grid;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: an-fertig;
}
.an-fertig-schritte li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: .8rem;
  padding: .6rem 0;
  border-top: 1px solid var(--linie);
}
.an-fertig-schritte li:last-child { border-bottom: 1px solid var(--linie); }
.an-fertig-schritte li::before {
  counter-increment: an-fertig;
  content: counter(an-fertig, decimal-leading-zero);
  font: 400 .66rem/1.6 'Space Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  color: var(--accent);
}
.an-fertig-schritte b {
  grid-column: 2;
  font-size: .86rem;
  font-weight: 500;
  color: var(--ink);
}
.an-fertig-schritte span {
  grid-column: 2;
  margin-top: .12rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-dim);
  opacity: .88;
}
.an-fertig-neu { margin-top: .4rem; padding-left: 0; }

/* ── Fuß des Paneels ─────────────────────────────────────────────────── */
.an-nav {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: clamp(.8rem, 1.8svh, 1.2rem);
  padding-top: clamp(.8rem, 1.8svh, 1.2rem);
  border-top: 1px solid var(--linie);
}
.an-zurueck {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-dim);
  font: 500 .84rem/1 'Space Grotesk', sans-serif;
  cursor: pointer;
  opacity: .86;
  touch-action: manipulation;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.an-zurueck[hidden] { display: none; }
@media (hover: hover) { .an-zurueck:hover { opacity: 1; color: var(--ink); } }
.an-zurueck:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* `.knopf` kommt aus der Seite (Glas-Pille mit Specular-Bogen). Auf einem
   <button> fehlt ihm nur der Zeiger — alles andere setzt er selbst. */
.an-nav .knopf { margin-left: auto; cursor: pointer; }
.an-nav .knopf-pfeil {
  display: inline-block;
  margin-left: .5rem;
  transition: translate .3s var(--ease);
}
@media (hover: hover) { .an-nav .knopf:hover .knopf-pfeil { translate: 3px 0; } }

.an-fuss-note {
  margin: .55rem 0 0;
  font-size: .7rem;
  text-align: right;
  color: var(--ink-dim);
  opacity: .75;
}

/* ── Schmal ──────────────────────────────────────────────────────────────
   Unter 961 px gibt es keinen Stationsmodus mehr; die Sektion scrollt
   mit der Seite. Dann steht das Paneel unter dem Text, und der Lauf
   braucht keine eigene Höhe — er darf einfach so lang sein, wie er ist. */
@media (max-width: 960px) {
  /* Siehe die Anmerkung im ersten 960-px-Block: diese Zeile MUSS nach
     der Grundregel `.an-fertig` stehen, sonst verliert sie. */
  .an-fertig { position: relative; inset: auto; overflow: visible; padding: 0; background: none; }
  .an-raster { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .an-paneel { max-height: none; grid-template-rows: auto auto auto auto; }
  .an-lauf { overflow: visible; }
  .an-sub { max-width: none; }
}
@media (max-width: 640px) {
  .an-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-stand { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .an-feld.paar { grid-template-columns: minmax(0, 1fr); }
  .an-nav { flex-wrap: wrap; }
  .an-nav .knopf { width: 100%; margin-left: 0; }
}
@media (max-width: 420px) {
  .an-kacheln { grid-template-columns: minmax(0, 1fr); }
  .an-wahl { min-height: 0; }
}

/* ── Reduced Motion — Ankunft ohne Reise ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .an-puls { animation: none; }
  .an-weg, .an-wahl { transition: none; }
}