/* Meterdoor – nur Startseite (Begründung: outbox/design/2026-10-23-design/pruefung.md; in DESIGN.md nachzutragen).
   Bausteine: Statusband (Prototyp/Vorverkauf), Code-Karte mit Registern und Kopierknopf, Ablaufgrafik.
   Keine überschriebenen Kit-Bausteine; Farben aus marke.css bzw. Codepalette (#0f172a) mit gemessenen Kontrasten:
   #cbd5e1 auf #1e293b 9,85:1 · #fff auf #0f172a 17,85:1 · #94a3b8 auf #0f172a 6,96:1 · #86efac auf #0f172a 12,71:1 ·
   #16202a auf --marke-hell 14,08:1 · Weiß auf --marke-dunkel 10,36:1 · Rahmen #64748b auf #0f172a 3,75:1 (Bedienelement, ≥ 3:1) */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, h3 { hyphens: manual; overflow-wrap: normal; }

/* Statusband unter dem Kopf: Zustand steht als Text da, nicht nur als Farbe */
.statusband { background: var(--marke-hell); border-bottom: 1px solid var(--linie); font-size: .92rem; line-height: 1.45; }
.statusband p { margin: 0; padding-block: .6rem; max-width: none; color: var(--text); }
.statusband .etikett { display: inline-block; margin-right: .35rem; padding: .05rem .5rem; border-radius: 999px; background: var(--marke-dunkel);
  color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.statusband a { color: var(--marke-dunkel); font-weight: 600; }

/* Startbereich: Code bekommt auf breiten Bildschirmen mehr Platz als der Text */
.hero { padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
@media (min-width: 64rem) { .hero .raster-2.hero-code { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; } }
.hero-code h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); }

/* Code-Karte mit Registern */
.code-karte { border-radius: var(--radius); background: #0f172a; box-shadow: var(--schatten), 0 0 0 1px #1e293b; overflow: hidden; min-width: 0; }
.tabs { display: flex; background: #1e293b; overflow-x: auto; scrollbar-width: thin; }
.tab { flex: 1 0 auto; min-height: 48px; padding: 0 .7rem; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #cbd5e1;
  font: 600 .875rem/1.2 var(--schrift-text); cursor: pointer; white-space: nowrap; }
.tab:hover { color: #fff; }
.tab[aria-selected="true"] { color: #fff; background: #0f172a; border-bottom-color: var(--akzent); font-weight: 700; }
.tab:focus-visible { outline-offset: -3px; }
.code-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .6rem 0 1.25rem; color: #94a3b8; font-size: .8rem; }
.code-kopf .beispiel { font-weight: 600; }
.kopieren { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 7.5rem; justify-content: center; padding: 0 .8rem;
  border: 1px solid #64748b; border-radius: var(--radius-klein); background: transparent; color: #e2e8f0; font: 600 .875rem/1 var(--schrift-text); cursor: pointer; }
.kopieren:hover { border-color: #e2e8f0; color: #fff; }
.kopieren svg { width: 16px; height: 16px; flex: none; }
.kopieren .haken { display: none; }
.kopieren[data-zustand="ok"] { border-color: #86efac; color: #fff; }
.kopieren[data-zustand="ok"] .haken { display: block; color: #86efac; }
.kopieren[data-zustand="ok"] .blatt { display: none; }
.code-karte .code { font-variant-ligatures: none; padding-top: .6rem; }
@media (min-width: 64rem) { .code-karte .code { font-size: .9rem; } }
.tab-panel:focus-visible { outline-offset: -3px; }
/* Ohne JavaScript: alle Beispiele untereinander, keine Register und keine Kopierknöpfe */
html:not(.js) .tabs, html:not(.js) .kopieren { display: none; }
.js .tab-panel[hidden] { display: none; }

/* Ablaufgrafik: zeitlich begrenzter Zugang vs. Bezahlung je Anfrage */
.ablauf { margin: 2.5rem 0 0; }
.ablauf > figcaption { font-family: var(--schrift-kopf); font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; }
.ablauf-raster { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.ablauf-weg h3 { margin-bottom: .15rem; }
.ablauf-wer { color: var(--text-leise); font-size: .92rem; margin-bottom: 1rem; }
.ablauf-weg ol { padding-left: 1.2rem; margin: 1rem 0 0; font-size: .97rem; }
.ablauf-weg li { margin-bottom: .3rem; }
.zeitleiste { position: relative; padding-top: 1.9rem; }
.zeitleiste .fenster { display: flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .3rem .6rem; border-radius: var(--radius-klein);
  background: var(--marke-hell); border: 2px solid var(--marke); color: var(--marke-dunkel); font-weight: 650; font-size: .9rem; text-align: center; }
.zeitleiste .abrufe { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding-inline: 1.5rem; }
.zeitleiste .abrufe span { width: 2px; height: 1.6rem; background: var(--marke); }
.zeitleiste .achse { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .82rem; color: var(--text-leise); }
.einzeln { display: flex; flex-wrap: nowrap; gap: .5rem; align-items: stretch; }
.einzeln .anfrage { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 4.5rem;
  padding: .4rem; border-radius: var(--radius-klein); border: 2px solid var(--text); background: var(--grund); font-size: .85rem; text-align: center; line-height: 1.25; }
.einzeln .anfrage b { font-family: var(--schrift-mono); font-size: .82rem; }
@media (max-width: 30rem) { .einzeln .anfrage { font-size: .8rem; } }
.einzeln .mehr { align-self: center; color: var(--text-leise); font-weight: 700; padding-inline: .2rem; }
.beispiel-hinweis { font-size: .85rem; color: var(--text-leise); margin: .75rem 0 0; }
.vorschau > .klein { margin-top: .9rem; }
/* Sprungziele nicht unter dem klebenden Kopf verstecken */
main [id] { scroll-margin-top: 76px; }

/* ---- Nachtrag 24.10.2026 (Auftrag Verständlichkeit/Einstieg) ---- */
/* Register ohne Layoutsprung: alle Panels liegen in derselben Rasterzelle; die Karte ist so hoch wie das längste Beispiel.
   Die Beispiele sind auf 21–23 Zeilen angeglichen, damit mobil keine große Leerfläche entsteht. Ohne JS: untereinander. */
.js .panels { display: grid; grid-template-columns: minmax(0, 1fr); }
.js .panels > .tab-panel { grid-area: 1 / 1; min-width: 0; }
.js .panels > .tab-panel[hidden] { display: block; visibility: hidden; }

.raster-2.oben { align-items: start; }
.hinweis { margin-bottom: 2rem; }

/* Schnellstart: drei getrennte Schritte */
.schnellstart { counter-reset: q; list-style: none; padding: 0; margin: 0; max-width: 48rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.schnellstart > li { counter-increment: q; position: relative; padding-left: 3.25rem; max-width: none; min-width: 0; }
.schnellstart > li::before { content: counter(q); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--marke); color: #fff; font-weight: 700; font-family: var(--schrift-kopf); }
.schnellstart h3 { padding-top: .45rem; }
.schnellstart .code-karte { margin: .75rem 0 1rem; }
@media (max-width: 30rem) { .schnellstart > li { padding-left: 0; padding-top: 3rem; } }
.variablen { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem 1rem; margin: 0 0 1rem; }
.variablen dt { font-weight: 600; }
.variablen dd { margin: 0; }
@media (max-width: 30rem) { .variablen { grid-template-columns: minmax(0, 1fr); gap: 0; } .variablen dd { margin-bottom: .6rem; } }
.schnellstart p code, .variablen code, .klein code { overflow-wrap: anywhere; }

/* Eignung: Kennzeichnung über Überschrift und Randlinie, nicht nur Farbe */
.eignung { border-top: 4px solid var(--erfolg); }
.eignung-nein { border-top-color: var(--fehler); border-top-style: dashed; }
.eignung ul { padding-left: 1.1rem; margin: 0; }
.eignung li { margin-bottom: .5rem; }
.gut-zu-wissen { margin-top: 2rem; }
#eignung ul { max-width: var(--lesebreite); }

/* Funktionsübersicht: Tabelle; auf schmalen Bildschirmen Zeilen als Blöcke statt waagerecht scrollen */
.stufen { max-width: var(--lesebreite); }
.funktionen { background: var(--grund); }
.funktionen td:nth-child(2) { white-space: nowrap; font-weight: 600; }
@media (max-width: 47.99rem) {
  .funktionen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .funktionen, .funktionen tbody, .funktionen tr, .funktionen td { display: block; width: 100%; }
  .funktionen tr { border-bottom: 1px solid var(--linie); padding: .6rem 0; }
  .funktionen td { border: 0; padding: .15rem .8rem; }
  .funktionen td:first-child { font-weight: 650; }
  .funktionen td:not(:first-child)::before { content: attr(data-label) ": "; color: var(--text-leise); font-weight: 600; }
}

/* Englische Fassung (/en/): Etikett der empfohlenen Preiskarte */
html[lang="en"] .preis-karte.empfohlen::before { content: "Recommended"; }