/* Startseite: Hero + Prüfstand (Design 22.10.2026, docs/DESIGN-2026-10-22-PLAN.md).
   Der Prüfstand ist die eine kräftige Petrol-Fläche der Startseite. Kupfer = Scanlinie und Knopf, Ampel nur am Ergebnis.
   Strenge CSP: keine Inline-Stile im HTML. Bewegt werden nur transform, opacity und stroke-dashoffset – gesetzt von
   static/js/hero_demo.js über CSSOM, nur bei prefers-reduced-motion: no-preference. Im HTML steht der Endzustand. */

/* ── Text-Spalte ─────────────────────────────────────────────────────────── */
.hero-v2 h1 { max-width: 15ch; }
.hero-v2 .lead { margin-top: var(--s-4); color: var(--text); font-size: var(--t-20); max-width: 36ch; }
.hero-v2 .audit-form { margin-top: var(--s-6); }

.hero-wege { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-2); counter-reset: weg; }
.hero-wege li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); align-items: baseline; font-size: var(--t-16); }
.hero-wege li::before {
  counter-increment: weg; content: counter(weg);
  font-family: var(--f-display); font-size: var(--t-13); font-weight: 700; color: var(--text);
  width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1px solid var(--text); border-radius: 50%;
  transform: translateY(-1px);
}
.hero-wege strong { font-weight: 600; }

.hero-agentur {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px var(--s-4); align-items: center; font-size: var(--t-14); color: var(--text-2);
}
.hero-agentur a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--text); }
.hero-agentur a svg { width: 16px; height: 16px; }
.hero-agentur a:hover { color: var(--accent-hover); }

/* ── Prüfstand ───────────────────────────────────────────────────────────── */
.demo {
  --st-bg: var(--petrol-ink, #0C3A46);
  --st-text: var(--on-petrol-ink, #FFFFFF);
  --st-text-2: var(--on-petrol-ink-2, #C9DEE1);
  --st-line: rgb(255 255 255 / .14);
  --st-feld: rgb(255 255 255 / .07);
  --st-kupfer: var(--kupfer-hell, #F0A877);
  --st-ok: #7FCB9C; --st-warn: #E2BC62; --st-crit: #F28B82;   /* Ampel auf Petrol: je ≥ 6:1 */
  container-type: inline-size;
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--st-bg); color: var(--st-text); border: 1px solid var(--petrol-line, #A8C8CD);
  box-shadow: 0 1px 2px rgb(12 58 70 / .10), 0 24px 48px -24px rgb(12 58 70 / .45);
}
.demo-kopf { padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--st-line); display: grid; gap: 2px; }
.demo-title { font-size: var(--t-20); color: var(--st-text); }
.demo-quelle { font-size: var(--t-13); color: var(--st-text-2); }

.demo-schritte {
  list-style: none; margin: 0; padding: var(--s-4) var(--s-5) var(--s-2);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start;
}
.demo-schritt { min-width: 0; }
.demo-nr { font-size: var(--t-13); font-weight: 600; color: var(--st-text-2); margin-bottom: var(--s-2); }
.demo-schritt.is-active .demo-nr { color: var(--st-kupfer); }

/* 1 Adresse */
.demo-feld { display: flex; align-items: stretch; min-height: 44px; min-width: 0; background: var(--st-feld); border: 1px solid var(--st-line); }
.demo-url { flex: 1; display: flex; align-items: center; padding: 0 12px; font-size: var(--t-14); color: var(--st-text); min-width: 0; white-space: nowrap; overflow: hidden; }
.demo-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; background: var(--st-kupfer); opacity: 0; }
.demo-knopf { display: flex; align-items: center; padding: 0 16px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--t-14); }

/* 2 Seite mit Scan */
.demo-seite { display: block; width: 100%; height: auto; overflow: visible; }
.ds-rahmen { fill: rgb(255 255 255 / .04); stroke: var(--st-line); stroke-width: 1; }
.ds-leiste { fill: rgb(255 255 255 / .08); }
.ds-knopf { fill: rgb(255 255 255 / .28); }
.ds-linie { fill: rgb(255 255 255 / .22); }
.ds-duenn { fill: rgb(255 255 255 / .16); }
.ds-titel { fill: rgb(255 255 255 / .62); }
.ds-flaeche { fill: rgb(255 255 255 / .06); }
.ds-karte { fill: rgb(255 255 255 / .10); }
.ds-akzent { fill: var(--accent); }
.ds-fuss { fill: rgb(255 255 255 / .06); }
.ds-schleier { fill: var(--st-bg); opacity: .72; }
.ds-scan-spur { fill: var(--st-kupfer); opacity: .14; }
.ds-scan-linie { fill: var(--st-kupfer); }
.ds-marke { fill: var(--st-kupfer); stroke: var(--st-bg); stroke-width: 2; }
.ds-marke, .ds-scan, .ds-schleier { transform-box: fill-box; transform-origin: center; }
.ds-scan, .ds-schleier { transform-origin: 0 0; }
.demo-lauf-text { margin-top: var(--s-2); font-size: var(--t-13); color: var(--st-text-2); }
.demo-lauf-text .num { font-family: var(--f-display); font-weight: 700; color: var(--st-text); }
.demo-schema { display: block; margin-top: 2px; font-size: var(--t-12); opacity: .85; }

/* 3 Ergebnis */
.demo-note { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.demo-note .ring { width: 60px; height: 60px; flex: none; }
.demo .ring .track { stroke: rgb(255 255 255 / .16); }
.demo .ring.tone-good .bar { stroke: var(--st-ok); }
.demo .ring.tone-mid .bar { stroke: var(--st-warn); }
.demo .ring.tone-bad .bar { stroke: var(--st-crit); }
.demo .ring-value { font-family: var(--f-display); font-weight: 700; color: var(--st-text); }
.demo .ring-none .ring-value { color: var(--st-text-2); }
.demo-note p { display: grid; gap: 2px; }
.demo-note strong { font-family: var(--f-display); font-size: var(--t-18); font-weight: 700; line-height: 1.2; }
.demo-note span { font-size: var(--t-13); color: var(--st-text-2); }

.demo-ampel { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--st-line); }
.demo-ampel li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--st-line); font-size: var(--t-14); line-height: 1.35;
}
.demo-punkt { width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 1px solid var(--st-text-2); }
.demo-wort { font-size: var(--t-13); font-weight: 600; color: var(--st-text); white-space: nowrap; }
.demo-ampel .tone-good .demo-punkt { background: var(--st-ok); border-color: var(--st-ok); }
.demo-ampel .tone-mid .demo-punkt { background: var(--st-warn); border-color: var(--st-warn); }
.demo-ampel .tone-bad .demo-punkt { background: var(--st-crit); border-color: var(--st-crit); }
.demo-ampel .tone-none .demo-wort { font-weight: 400; color: var(--st-text-2); }
.demo-plan { margin-top: var(--s-3); font-size: var(--t-13); color: var(--st-text-2); }
.demo-plan strong { color: var(--st-text); font-weight: 600; }

.demo-fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2);
  margin: 0 var(--s-5); padding: var(--s-1) 0 var(--s-2); border-top: 1px solid var(--st-line); font-size: var(--t-14);
}
.demo-fuss a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--st-text); }
.demo-fuss a:hover { color: var(--st-kupfer); }
.demo-fuss a svg { width: 16px; height: 16px; }
.demo-pause {
  min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--st-text-2); cursor: pointer;
  font: inherit; font-size: var(--t-13); text-decoration: underline; text-underline-offset: .18em;
}
.demo-pause:hover { color: var(--st-kupfer); }
.demo-pause[hidden] { display: none; }
.demo a:focus-visible, .demo-pause:focus-visible { outline: 2px solid var(--st-kupfer); outline-offset: 2px; }

/* Breiter Prüfstand: Seite links, Ergebnis rechts */
@container (min-width: 460px) {
  .demo-schritte { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); column-gap: var(--s-5); }
  .demo-schritt-adresse { grid-column: 1 / -1; }
}
/* Schmal (Handy): Seite klein neben dem Zählertext */
@container (max-width: 459px) {
  .demo-kopf, .demo-schritte { padding-left: var(--s-4); padding-right: var(--s-4); }
  .demo-fuss { margin: 0 var(--s-4); }
  .demo-schritt-pruefung { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--s-4); align-items: center; }
  .demo-schritt-pruefung .demo-nr { grid-column: 1 / -1; }
  .demo-schritt-pruefung .demo-lauf-text { margin-top: 0; }
}

@media (max-width: 599px) { .hero-v2 .lead { font-size: var(--t-18); } }

/* ── Bewegung (nur mit zugelassener Bewegung; die Werte setzt hero_demo.js) ─ */
@media (prefers-reduced-motion: no-preference) {
  .hero-wege li { transition: opacity .2s ease-out; }
  .hero-wege.is-lauf li:not(.is-aktiv) { opacity: .45; }
  .demo-knopf { transition: transform .12s ease-out; }
  .demo-knopf.is-druck { transform: scale(.94); }
}

/* ── Druck: Fläche weiß ──────────────────────────────────────────────────── */
@media print {
  .demo { --st-bg: #fff; --st-text: #000; --st-text-2: #333; --st-line: #ccc; --st-feld: #fff; box-shadow: none; border: 1px solid #ccc; }
  .demo-seite, .demo-pause { display: none; }
}

/* ── Bereichsliste: Alltagsfrage über dem Fachnamen ─────────────────────── */
.areas-frage { display: block; font-family: var(--f-text); font-weight: 400; font-size: var(--t-14); color: var(--text-2); letter-spacing: 0; }

/* Einspaltig (Handy): Spalte nie breiter als der Bildschirm */
.hero-v2 .hero-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hero-v2 .hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; } }