/* Coach Miller — Strecke /erstgespraech/. Mechanik übernommen (Anker+pushState,
   Zurück-Knopf, Merker, Fortschrittsbalken, Fokus-Management) — linearer
   Fünf-Schritt-Pfad, dunkler Stil (Richtung B). Tokens/Fonts aus basis.css. */

body.cm-strecke { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- Kopf ----------------------------------------------------------------*/
.cm-fr-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--hairline);
}
@media (min-width: 720px) { .cm-fr-kopf { padding: var(--s-2) var(--s-5); } }
.cm-fr-kopf a { display: flex; align-items: center; padding: 10px; margin: -10px; min-height: 44px; }
.cm-fr-logo { height: 22px; width: auto; }
.cm-fr-zaehler {
  font-family: var(--font-titel); font-weight: var(--fw-titel); letter-spacing: var(--ls-titel);
  text-transform: uppercase; font-size: 15px; color: var(--text-dim);
}
.cm-fr-balken { height: 3px; background: var(--eisen); }
.cm-fr-balken i { display: block; height: 100%; width: 0; background: var(--kreide); transition: width .35s ease; }

/* ---- Bühne ----------------------------------------------------------------*/
.cm-fr-haupt { flex: 1; display: flex; justify-content: center; padding: var(--s-6) var(--s-3); }
.cm-fr-inhalt { width: 100%; max-width: 560px; }

.cm-fr-merker { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.cm-fr-merker span {
  display: inline-block; padding: 3px 10px; border: var(--hairline); font-size: var(--fs-small); color: var(--text-dim);
  font-family: var(--font-text); font-weight: var(--fw-text);
}

.schritt { display: none; }
.schritt.an { display: block; }
.schritt h2 {
  text-wrap: balance;
  font-size: clamp(28px, 3.6vw + 10px, 44px);
  margin: 0 0 var(--s-2);
}
.schritt h2:focus { outline: none; }
.schritt .hilfe {
  font-size: var(--fs-body); color: var(--text-dim); margin: 0 0 var(--s-4); max-width: var(--maxw-text);
  font-family: var(--font-text); font-weight: var(--fw-text);
}

/* ---- Antwort-Karten --------------------------------------------------------*/
.wahl { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.wahl button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: 100%; min-height: 56px; padding: 16px var(--s-3); line-height: 1.35;
  background: var(--eisen); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-text); font-weight: var(--fw-text); font-size: var(--fs-body); text-align: left;
  cursor: pointer; transition: border-color .15s ease;
}
.wahl button:hover, .wahl button:focus-visible { border-color: var(--kreide); outline: none; }
.wahl button:focus-visible { outline: 2px solid var(--kreide); outline-offset: 2px; }
.wahl button .pfeil { color: var(--text-dim-auf-karte); font-size: 20px; flex: none; }

/* ---- Formular --------------------------------------------------------------*/
.feld { margin-bottom: var(--s-3); }
.feld label {
  display: block; font-size: var(--fs-small); font-weight: var(--fw-titel); font-family: var(--font-titel);
  letter-spacing: var(--ls-titel); text-transform: uppercase;
  color: var(--text-dim); margin-bottom: var(--s-1);
}
.feld input {
  width: 100%; min-height: 48px; padding: 12px var(--s-2);
  background: var(--eisen); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-text); font-weight: var(--fw-text); font-size: 16px;
}
.feld input::placeholder { color: var(--text-dim); }
.feld input:focus-visible { outline: 2px solid var(--kreide); outline-offset: 1px; }
.feld input[aria-invalid="true"] { border-color: var(--fehler); }
.feld .hilfe-feld {
  font-size: var(--fs-small); color: var(--text-dim); margin: 6px 0 0;
  font-family: var(--font-text); font-weight: var(--fw-text);
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.dsgvo {
  display: flex; gap: var(--s-1); align-items: flex-start; font-size: var(--fs-small); color: var(--text-dim);
  margin: var(--s-3) 0; font-family: var(--font-text); font-weight: var(--fw-text);
}
.dsgvo input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.dsgvo a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.feld-meldung { font-size: var(--fs-small); line-height: 1.4; margin-top: var(--s-1); color: var(--fehler); font-family: var(--font-text); }
.fehler { display: none; font-size: var(--fs-small); line-height: 1.4; margin-top: var(--s-2); color: var(--fehler); font-family: var(--font-text); }

.zurueck {
  background: none; border: 0; color: var(--text-dim); font-size: var(--fs-small);
  min-height: 44px; padding: 8px 4px; cursor: pointer; margin-top: var(--s-2);
  font-family: var(--font-text); font-weight: var(--fw-text);
}
.zurueck[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cm-fr-balken i { transition: none; }
  .wahl button { transition: none; }
}