/* ══════════════════════════════════════════════════════════════════════════
   tc-formular.css — gemeinsame Gestaltung der Fragebögen
   Eingebunden von quickcheck.html UND full-audit.html.

   MUSS NACH dem eigenen <style>-Block der Seite geladen werden — sie
   überschreibt gezielt die alten Regeln, und CSS entscheidet nach Reihenfolge.

   WARUM GEMEINSAM: Beide Seiten sind auseinander hervorgegangen und nutzen
   dieselben Klassennamen (.card, .opt, .btn-gold, .q-text, .num-input,
   .prog-outer, .inter). Die Gestaltung lag dadurch doppelt — dasselbe Muster
   wie bei den sieben Stufen-Berechnungen und den zwei Auswertungen.

   TOKEN-BRÜCKE: Beide Seiten trugen eine eigene, dunkel-zuerst gedachte
   Palette und benutzen --text-2/--text-3 MIT Bindestrich. Der Vereinheit-
   lichungs-Block vom 31.08. setzt aber --text2/--text3 — deshalb lief die
   Umstellung an den Namen vorbei und die alte Optik blieb stehen
   (--surface stand in quickcheck auf #1E3D5E, in full-audit auf #1C2333).
   Hier werden die alten Namen auf die neuen abgebildet, damit alle
   Bestandsregeln mitziehen, ohne jede einzeln anzufassen.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --text-2: var(--text2);
  --text-3: var(--text3);
  --surface: var(--blue-wash);
  --elevated: var(--bg2);
  --card: var(--panel);
  --gold-bright: var(--gold-m);
  --gold-muted: var(--gold-b, var(--gold));
  --trio: var(--navy);
  --purple: var(--blue2, #3A7BC8);
  --orange: var(--amber);
  --blue2: #3A7BC8;
  /* Eine Schriftfamilie für alles — auch für jedes inline gesetzte var(--serif) */
  --serif: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:  "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --hair: rgba(10,30,51,.09);
  --schatten: 0 1px 2px rgba(10,30,51,.04), 0 8px 24px -12px rgba(10,30,51,.10);
}
[data-theme="dark"]{
  --hair: rgba(255,255,255,.09);
  --schatten: 0 1px 2px rgba(0,0,0,.30), 0 10px 30px -14px rgba(0,0,0,.60);
  /* tc-theme.css definiert --blue2 nur für die Hellvariante. Ohne diese Zeile
     wären Fortschritt, Auswahl und Balken im Dunkelmodus ohne Farbe. */
  --blue2: #5D9AE0;
}

/* ── Flächen: Radius 22, weiche Schatten, Pillen, Blau als Leitfarbe ────── */
body{ background:var(--bg); font-family:var(--sans) }
.wrap{ max-width:760px }

.logo{ font-size:17px; font-weight:800; letter-spacing:-.02em }
.theme-btn{ border-radius:999px; padding:8px 15px; min-height:38px;
  border-color:var(--hair); box-shadow:var(--schatten); font-weight:600 }

.prog-outer{ height:7px; background:var(--track, var(--blue-wash)) }
.prog-inner{ background:linear-gradient(90deg,var(--navy),var(--blue2)) }
.prog-label{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase }

.card{ border-radius:22px; border:1px solid var(--hair); box-shadow:var(--schatten);
  padding:26px 24px }
.q-block-tag{ color:var(--blue); background:var(--blue-wash); border-color:transparent;
  font-weight:600 }
.q-text{ font-family:var(--sans); font-size:21px; font-weight:700; letter-spacing:-.025em;
  line-height:1.24 }

/* Antwortmöglichkeiten: Auswahl in Blau, Tippfläche ≥ 52 px */
.opt{ border-radius:14px; border:1px solid var(--hair); background:var(--panel);
  box-shadow:var(--schatten); min-height:52px; padding:15px 16px;
  transition:border-color .16s, background .16s, transform .16s }
.opt:hover{ border-color:var(--blue2); transform:translateY(-1px) }
.opt.sel{ border-color:var(--blue2); background:var(--blue-wash);
  box-shadow:0 8px 20px -10px rgba(20,71,126,.45) }
.opt .box{ border-radius:6px; border-color:var(--text3) }
.opt.sel .box{ border-color:var(--blue); background:var(--blue) }
.opt.sel .box::after{ color:#fff }
.grid .opt{ min-height:48px }

.num-input,.grid-search,textarea,.contact-input{ border-radius:14px; border:1px solid var(--hair);
  background:var(--panel); box-shadow:var(--schatten) }
.num-input:focus,.grid-search:focus,textarea:focus,.contact-input:focus{
  border-color:var(--blue2); box-shadow:0 0 0 3px rgba(58,123,200,.18) }

.btn{ border-radius:999px; padding:14px 24px; min-height:48px; font-weight:700 }
.btn-gold{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(20,71,126,.55) }
.btn-gold:hover{ background:var(--navy-soft, var(--navy)) }
.btn-ghost{ border-radius:999px; border-color:var(--hair); background:var(--panel);
  box-shadow:var(--schatten) }

.dim-fill{ background:var(--blue) }
.dim-name{ font-size:10.5px; letter-spacing:.08em }

/* ── Etappen-Zwischenkarte mit Bild aus der Landingpage ───────────────────
   REIHENFOLGE ZÄHLT: `.inter .big` und `.etappen-bild .big` haben dieselbe
   Spezifität (zwei Klassen). Stand die Blau-Regel danach, erschien die
   Etappennummer blau auf dem Foto statt weiss — genau so beim ersten Versuch
   am 04.09.2026 passiert. Die Bild-Variante kommt deshalb ZULETZT. */
.inter{ padding:0; text-align:center; overflow:hidden }
.inter-text{ padding:22px 24px 28px }
.inter h2{ font-family:var(--sans); font-size:22px; font-weight:700; letter-spacing:-.025em }
.inter .big{ font-family:var(--sans); color:var(--blue) }
.inter .score-line{ color:var(--blue); font-weight:700 }
.etappen-bild{ height:132px; background-size:cover; background-position:center 42%;
  position:relative; border-radius:21px 21px 0 0 }
.etappen-bild:after{ content:""; position:absolute; inset:0; border-radius:21px 21px 0 0;
  background:linear-gradient(to bottom,rgba(10,30,51,.30),rgba(10,30,51,.72)) }
.inter .etappen-bild .big,
.etappen-bild .big{ position:absolute; left:0; right:0; bottom:10px; margin:0; color:#fff;
  font-family:var(--sans); font-size:40px; font-weight:800; letter-spacing:-.04em;
  z-index:1; text-shadow:0 2px 18px rgba(0,0,0,.45) }
.inter .notice{ background:var(--blue-wash); border-color:transparent; border-radius:16px;
  text-align:left }

/* ── Auswertungs-Modus ──────────────────────────────────────────────────────
   Die Etappenleiste ist statisches Markup im Kopf beider Seiten und blieb
   deshalb auf der Auswertung stehen — mit „Etappe 1 von 5 · 0 %" über einem
   fertigen Ergebnis. `render()` setzt die Klasse, sobald die Ansicht auf
   result oder report springt. */
body.aw-modus .prog-outer,
body.aw-modus .prog-label{ display:none }

/* ── Sonstige Flächen ───────────────────────────────────────────────────── */
.finding,.aw-befund,.calc-panel,.rep-prose,.warn-box,.resume-banner{ border-radius:16px }
.gauge-num{ font-family:var(--sans); font-weight:700; letter-spacing:-.04em; color:var(--navy) }
[data-theme="dark"] .gauge-num{ color:var(--gold-m) }
.w-score-val{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; color:var(--navy) }
[data-theme="dark"] .w-score-val{ color:var(--gold-m) }
.w-dim-fill{ background:linear-gradient(90deg,var(--navy),var(--blue2)) }
#worldPanel,#worldMini{ border-radius:20px; border-color:var(--hair); box-shadow:var(--schatten) }
.w-score{ border-radius:16px; border-color:var(--hair) }
.fly-chip{ background:var(--blue2); color:#06172B; box-shadow:0 6px 22px rgba(58,123,200,.45) }
.gold-particle{ background:var(--blue2) }
.rep-tip{ border-left-color:var(--gold); background:rgba(176,135,44,.06); border-radius:0 12px 12px 0 }

/* ── Handy ──────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .wrap{ padding:14px 12px 90px }
  .card{ border-radius:18px; padding:20px 16px }
  .inter{ padding:0 }
  .etappen-bild{ height:112px; border-radius:17px 17px 0 0 }
  .etappen-bild:after{ border-radius:17px 17px 0 0 }
  .etappen-bild .big{ font-size:34px }
  .inter-text{ padding:18px 16px 22px }
  .q-text{ font-size:19px }
  .btn{ width:100% }
  .nav{ flex-direction:column-reverse; gap:8px }
  .theme-btn{ min-height:40px }
  /* Formularfelder ≥ 16 px — sonst zoomt iOS beim Fokus */
  input,textarea,select,.num-input,.grid-search,.contact-input{ font-size:16px !important }
}
@media (prefers-reduced-motion:reduce){
  .opt{ transition:none }
}