/* Gestaltung NUR der Startseite (Konzept A „Lesebuch“ mit Kachelraster aus B und Prüfstand aus C).
   Wird nach site.css geladen. Farben, Schatten, Radien und Schriften kommen aus site.css (gleiche Namen wie in der App);
   neu sind hier nur --mono, --ochre und die Graphit-Flächen des Kachelrasters (--g-*). Die Unterseiten laden diese Datei nicht. */
:root {
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ochre:#8f6212; --ochre-quiet:#f4ead6;
  /* Graphit (Kachelraster): auch im hellen Thema dunkel, damit die hellen App-Ausschnitte darauf stehen */
  --g-page:var(--surface); --g-top:#2c2e34; --g-mid:#212226; --g-bot:#1a1b1f; --g-edge:#33353b;
  --g-hi:rgba(255,255,255,.10); --g-sheen:rgba(255,255,255,.07); --g-drop:rgba(10,12,16,.55);
  --good:#1d7a46;
  --shadow-xl:0 6px 18px rgba(20,22,30,.1),0 40px 80px -24px rgba(20,22,30,.32);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --ochre:#d9a54a; --ochre-quiet:#2d2516;
    --g-page:var(--ground); --g-top:#303238; --g-mid:#2a2c31; --g-bot:#25272b; --g-edge:rgba(255,255,255,.10);
    --g-hi:rgba(255,255,255,.08); --g-sheen:rgba(255,255,255,.08); --g-drop:rgba(0,0,0,.7);
    --good:#5cc98b;
    --shadow-xl:0 6px 18px rgba(0,0,0,.45),0 44px 90px -24px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"] {
  --ochre:#d9a54a; --ochre-quiet:#2d2516;
  --g-page:var(--ground); --g-top:#303238; --g-mid:#2a2c31; --g-bot:#25272b; --g-edge:rgba(255,255,255,.10);
  --g-hi:rgba(255,255,255,.08); --g-sheen:rgba(255,255,255,.08); --g-drop:rgba(0,0,0,.7);
  --good:#5cc98b;
  --shadow-xl:0 6px 18px rgba(0,0,0,.45),0 44px 90px -24px rgba(0,0,0,.75);
}

body { overflow-x:clip; }
h1, h2 { font-weight:700; }
h1 { font-size:clamp(2.5rem,1.5rem + 4.4vw,5rem); line-height:1.02; letter-spacing:-0.035em; }
h2 { font-size:clamp(1.8rem,1.25rem + 2.1vw,2.9rem); line-height:1.08; letter-spacing:-0.025em; }
.read { font-family:var(--read); font-size:1.125rem; line-height:1.65; color:var(--text-dim); }
.read strong { color:var(--text); font-weight:600; }
.kicker { font-weight:500; font-size:.9375rem; color:var(--ochre); letter-spacing:.01em; margin:0 0 14px; }
.num { font-family:var(--display); font-weight:800; color:var(--ochre); letter-spacing:-0.02em; }
.sec-head { max-width:46rem; }
.sec-head .read { margin-top:16px; }

/* Knöpfe (Grundform .btn/.btn-primary und der Kopfzeilen-Knopf stehen in site.css, weil die Unterseiten ihn auch zeigen) */
.btn-quiet { background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-quiet:hover { border-color:var(--text); }
/* „Bald im Microsoft Store“ ist (noch) kein Kauf-Knopf: ein ruhiges Schild ohne Klickziel. */
.soon { display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; font-weight:600;
  border:1px dashed var(--line-strong); color:var(--text); background:var(--surface); }
.soon::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ochre); }

/* Bilder */
.shot { max-width:none; box-shadow:var(--shadow-xl); }
.media-box { margin:0; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-md); }
.media-box picture { display:block; }
.media-box img { display:block; width:100%; height:auto; }

/* ---------- Kopf ---------- */
.hero { padding:clamp(44px,7vw,104px) 0 0; }
.hero .wrap { display:grid; gap:26px; }
.hero h1 { max-width:14ch; }
.hero .lead { max-width:40rem; font-size:clamp(1.125rem,1rem + .5vw,1.35rem); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:4px; }
.hero-note { font-size:.9375rem; color:var(--text-dim); }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px 26px; color:var(--text-dim); font-size:.9375rem; margin:0; padding:0; list-style:none; }
.hero-meta li::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ochre);
  margin-right:10px; vertical-align:2px; }
/* Bildstapel: das ganze Fenster, davor zwei Ausschnitte (nur ab 601 px) */
.stack { position:relative; margin:clamp(30px,5vw,64px) 0 0; padding-bottom:clamp(56px,8vw,112px); }
.stack .shot { position:relative; z-index:1; }
.stack .media-box.float { position:absolute; z-index:2; width:min(33%,400px); box-shadow:var(--shadow-xl); }
.stack .float-a { left:-2%; bottom:5%; transform:rotate(-2deg); }
.stack .float-b { right:-1.5%; bottom:-1%; transform:rotate(1.5deg); }
/* Die Karteikarte ist im Bild viel leere Fläche: nur den Kern zeigen. Fenster 2:1 = 600 von 794 Bildzeilen; 23 % setzt es so,
   dass Zeile „1 / 5 · Anki-Datei“ oben und der Fortschrittsbalken unten GANZ drin sind und kein Knopf halb abgeschnitten ist (W-N5). */
.stack .float-b img { aspect-ratio:2/1; object-fit:cover; object-position:50% 23%; }
.stack::before { content:""; position:absolute; inset:auto 8% -2% 8%; height:42%; z-index:0; filter:blur(12px);
  background:radial-gradient(60% 60% at 50% 60%,var(--accent-quiet),transparent 70%); }
.hero-caption { max-width:46rem; margin-top:calc(-1 * clamp(14px,3vw,44px)); color:var(--text-dim); font-size:1.0625rem; }

/* ---------- Eckdaten ---------- */
.facts { margin-top:clamp(44px,6vw,80px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--tint); }
.facts .wrap { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.fact { padding:30px 26px 30px 0; border-right:1px solid var(--line); }
.fact:last-child { border-right:0; }
.fact + .fact { padding-left:26px; }
.fact .num { font-size:clamp(2rem,1.4rem + 1.8vw,3rem); line-height:1; display:block; }
.fact p { margin-top:10px; color:var(--text-dim); font-size:.9375rem; }

/* ---------- Scroll-Geschichte ---------- */
.story { padding:clamp(64px,8vw,120px) 0 clamp(40px,5vw,80px); }
.story-grid { margin-top:clamp(36px,5vw,72px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,72px); align-items:start; }
.steps { display:grid; gap:clamp(48px,7vw,120px); padding:10px 0 clamp(20px,6vw,90px); }
.step { position:relative; padding-left:70px; }
.step .num { position:absolute; left:0; top:-4px; font-size:2.5rem; line-height:1; opacity:.45; transition:opacity .4s; }
.step.is-on .num { opacity:1; }
.step h3 { font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem); letter-spacing:-0.02em; }
.step .read { margin-top:12px; }
.ui-note { margin-top:16px; display:inline-block; padding:7px 13px; border-radius:var(--r-md); background:var(--surface);
  border:1px solid var(--line); font-size:.875rem; color:var(--text-dim); }
.ui-note b { color:var(--text); font-weight:600; }
/* W-N5: Hinweis zu einem Bild (die echte Stelle zum Prüfen) und zu allen App-Bildern (Fußzeile) – leise wie der FFmpeg-Satz. */
.step .step-note { margin-top:10px; font-size:.8125rem; color:var(--text-faint); }
.img-note { margin-top:16px; font-size:.8125rem; color:var(--text-faint); }
/* Nachgebaute Meldung „nichts Verlässliches“ – nach Quonn-Farben, als Nachbau beschriftet */
.mock { margin-top:18px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  padding:14px 16px 16px; box-shadow:var(--shadow-sm); }
.mock .tag { font-family:var(--mono); font-size:.75rem; color:var(--text-faint); letter-spacing:.02em; }
.mock .q { margin-top:6px; font-size:.9375rem; color:var(--text-dim); }
.mock .q b { color:var(--text); font-weight:500; }
.mock .a { margin-top:10px; padding:10px 12px; border-radius:var(--r-md); background:var(--tint); font-size:.9375rem; color:var(--text); }
/* Das Bild bleibt stehen und wechselt mit dem Kapitel; jedes Kapitel hat zusätzlich ein eigenes Bild für schmale
   Bildschirme und für den Fall ohne Skript (dann steht es unter dem Text). */
.story-figure { position:sticky; top:96px; margin:0; display:none; }
.js .story-figure { display:block; }
.story-figure .frame { position:relative; aspect-ratio:16/10; }
.story-figure .media-box { position:absolute; inset:0; opacity:0; transform:translateY(8px) scale(.985);
  transition:opacity .45s ease,transform .45s ease; }
.story-figure .media-box.is-on { opacity:1; transform:none; z-index:1; }
.story-figure .media-box picture, .story-figure .media-box img { height:100%; }
.story-figure .media-box img { object-fit:var(--fit,cover); object-position:var(--pos,50% 0); }
.story-figure figcaption { margin-top:14px; font-size:.9375rem; color:var(--text-faint); min-height:1.5em; }
.step-img { margin-top:20px; }
.js .story-grid .step-img { display:none; }

/* ---------- Zwei Fälle ---------- */
.cases { padding:clamp(56px,7vw,110px) 0; border-top:1px solid var(--line); }
.case-grid { margin-top:clamp(32px,4vw,56px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,40px); }
.case { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-sm); display:grid; grid-template-rows:auto 1fr; }
.case-img { margin:0; background:var(--tint); border-bottom:1px solid var(--line); overflow:hidden; aspect-ratio:1.5; }
.case-img picture { display:block; height:100%; }
.case-img img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.case-body { padding:26px 28px 30px; }
.case .kicker { color:var(--accent); margin:0; }
.case h3 { margin-top:8px; font-size:1.5rem; }
.case .read { margin-top:12px; font-size:1.0625rem; }
.case ul { margin:16px 0 0; padding:0; list-style:none; display:grid; gap:8px; color:var(--text-dim); font-size:.9375rem; }
.case li { padding-left:22px; position:relative; }
.case li::before { content:""; position:absolute; left:0; top:.75em; width:12px; height:1px; background:var(--ochre); }
.case li b { color:var(--text); font-weight:600; }

/* ---------- Kachelraster „Was sonst noch drin ist“ ---------- */
.register { padding:clamp(56px,7vw,110px) 0; background:var(--g-page); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.register-head { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,4vw,64px); align-items:end; }
/* Raster aus halben und breiten Kacheln. Jedes App-Element steht GANZ da, nie angeschnitten, und ALLE in derselben Größe
   (vom Nutzer am 27-Zoll-Monitor gewählt: 75 %): Breite = natürliche Breite (--w = Rohbreite/2) × --shot. Ist die Bühne
   schmaler (Handy), wird nur verkleinert. Halbe Kacheln einer Zeile sind nach ähnlicher Bildhöhe gepaart; ihre Bühne ist
   so hoch wie das höhere Bild der Zeile (--hrow), damit die Texte auf einer Linie beginnen. „imgtop“ = breit, Bild oben. */
.feat-grid { --shot:.75; margin-top:clamp(32px,4vw,56px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.feat { position:relative; min-width:0; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-xl);
  border:1px solid var(--g-edge);
  background:radial-gradient(120% 70% at 0% 0%, var(--g-sheen), transparent 55%),
             linear-gradient(180deg, var(--g-top) 0%, var(--g-mid) 60%, var(--g-bot) 100%);
  box-shadow:inset 0 1px 0 var(--g-hi), 0 22px 44px -26px var(--g-drop); }
.feat.wide { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); align-items:center; }
.feat.wide.rev { grid-template-columns:minmax(0,8fr) minmax(0,4fr); }
.feat-text { padding:22px 28px 28px; }
.feat.wide .feat-text { padding:40px 8px 40px 40px; }
.feat.wide.rev .feat-text { order:2; padding:40px 40px 40px 8px; }
/* stretch, nicht das geerbte center: sonst wird die Bühne so breit wie das Bild und das Bild wird angeschnitten */
.feat.wide.imgtop { display:flex; align-items:stretch; }
.feat.wide.imgtop .feat-text { align-self:center; padding:4px 40px 40px; max-width:48rem; text-align:center; }
.feat:not(.wide) .feat-stage, .feat.wide.imgtop .feat-stage { order:-1; }
.feat .label { font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:#d9b46a; }
.feat h3 { margin-top:6px; font-size:1.25rem; color:#f3f4f6; }
.feat.wide h3 { font-size:1.5rem; }
.feat p { margin-top:8px; color:#b3b6be; font-size:.9375rem; }
.feat p.note { font-size:.8125rem; color:#8f929b; }
.feat-stage { display:flex; align-items:center; justify-content:center; padding:36px 24px; }
.feat:not(.wide) .feat-stage { min-height:calc(var(--hrow) * var(--shot) * 1px + 72px); }
.feat.wide .feat-stage { padding:44px 32px; }
.feat-shot { flex:none; width:calc(var(--w) * var(--shot) * 1px); max-width:100%; margin:0; overflow:hidden;
  background:var(--surface); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.6); }
.feat-shot picture { display:block; }
.feat-shot img { display:block; width:100%; height:auto; }
.feat.wide.list { grid-template-columns:1fr; }
.feat.list .feat-text { padding:32px 40px 36px; }
.feat ul.more { margin:14px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 28px; }
.feat ul.more li { color:#b3b6be; font-size:.9375rem; padding-top:10px; border-top:1px solid rgba(255,255,255,.14); }
.feat ul.more b { display:block; color:#f3f4f6; font-weight:600; }

/* ---------- Dossier: Prüfstand, Messprotokoll, Entscheidungen ---------- */
.dossier { background:var(--band); color:var(--band-ink); padding:clamp(64px,8vw,120px) 0; position:relative; overflow:hidden; }
.dossier::after { content:""; position:absolute; right:-12%; top:-22%; width:52%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 65%); pointer-events:none; }
.dossier .wrap { position:relative; z-index:1; }
.dossier .kicker { color:var(--band-dim); }
.dossier h2 { color:var(--band-ink); max-width:18ch; }
.dossier .read { color:var(--band-dim); max-width:44rem; margin-top:16px; }
.dossier a { color:var(--band-ink); }
.ledger { margin-top:clamp(32px,4vw,52px); width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--band-line);
  border-radius:var(--r-lg); background:rgba(255,255,255,.04); font-size:.9375rem; }
.ledger caption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ledger th, .ledger td { text-align:left; vertical-align:top; padding:15px 18px; border-bottom:1px solid var(--band-line); }
.ledger tr:last-child > * { border-bottom:0; }
.ledger thead th { font-family:var(--mono); font-weight:500; font-size:.75rem; letter-spacing:.05em; color:var(--band-dim); padding-top:12px; padding-bottom:12px; }
.ledger tbody th { font-weight:600; color:var(--band-ink); width:24%; }
.ledger td { color:var(--band-dim); }
.ledger td:nth-child(2) { width:42%; }
.ledger .d { display:block; font-family:var(--mono); font-size:.75rem; color:var(--band-ink); opacity:.85; margin-bottom:3px; }
.proofs { margin-top:clamp(28px,4vw,48px); display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(18px,2.5vw,28px); align-items:start; }
.proof { border:1px solid var(--band-line); border-radius:var(--r-lg); padding:22px 24px 24px; background:rgba(255,255,255,.04); }
.proof .label { font-family:var(--mono); font-size:.8125rem; color:var(--band-dim); letter-spacing:.02em; }
.proof h3 { margin-top:6px; color:var(--band-ink); font-size:1.25rem; }
.proof p { margin-top:8px; color:var(--band-dim); font-size:.9375rem; }
.proof-stack { display:grid; gap:clamp(18px,2.5vw,28px); }
.timeline { margin:20px 0 0; padding:0; list-style:none; border-left:2px solid var(--band-line); margin-left:6px; }
.timeline li { position:relative; padding:0 0 22px 24px; }
.timeline li:last-child { padding-bottom:0; }
.timeline li::before { content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--band-ink); box-shadow:0 0 0 4px var(--band); }
.timeline .d { font-family:var(--mono); font-size:.8125rem; color:var(--band-dim); }
.timeline h4 { margin-top:3px; font-size:1.05rem; color:var(--band-ink); letter-spacing:-0.01em; }
.timeline p { margin-top:5px; color:var(--band-dim); font-size:.9375rem; }
.timeline li.result::before { background:var(--good); }
.proof .facts-line { margin-top:18px; padding-top:16px; border-top:1px solid var(--band-line); font-size:.9375rem; color:var(--band-ink); }
.dossier .more { margin-top:32px; display:flex; flex-wrap:wrap; gap:12px 32px; }
.dossier .more a { font-weight:500; }

/* ---------- Zuschnitt ---------- */
.scope { padding:clamp(56px,7vw,100px) 0; }
.scope .wrap { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,64px); }
.scope ul { margin:0; padding:0; list-style:none; }
.scope li { padding:16px 0; border-top:1px solid var(--line-strong); color:var(--text-dim); font-family:var(--read); font-size:1.0625rem; }
.scope li:last-child { border-bottom:1px solid var(--line-strong); }
.scope li b { color:var(--text); font-weight:600; font-family:var(--ui); font-size:.9375rem; display:block; margin-bottom:4px; }

/* ---------- Zusatzpakete & PC ---------- */
.packs { padding:clamp(56px,7vw,100px) 0; background:var(--tint); border-top:1px solid var(--line); }
.packs-split { margin-top:clamp(28px,4vw,48px); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(22px,3vw,40px); align-items:start; }
.packs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pack { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px 20px; box-shadow:var(--shadow-sm); }
.pack .label { font-size:.8125rem; color:var(--text-faint); }
.pack h3 { margin-top:4px; font-size:1.0625rem; }
.pack p { margin-top:6px; color:var(--text-dim); font-size:.9375rem; }
.packs-img { --h:420px; }
.packs-img .media-box { height:var(--h); }
.packs-img picture { height:100%; }
.packs-img img { height:100%; object-fit:cover; object-position:top left; }
.packs-img figcaption { margin-top:10px; font-size:.875rem; color:var(--text-faint); }
.sys { margin:clamp(28px,4vw,40px) 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,40px); max-width:64rem; }
.sys dt { font-weight:600; font-size:.9375rem; }
.sys dd { margin:6px 0 0; color:var(--text-dim); font-size:.9375rem; }
.sys-note { margin-top:16px; color:var(--text-dim); font-size:.9375rem; max-width:52rem; }
.sys-note + .sys-note { margin-top:6px; color:var(--text-faint); font-size:.875rem; }

/* ---------- Preis ---------- */
.price { padding:clamp(64px,8vw,120px) 0; text-align:center; }
.price .kicker { margin-bottom:10px; }
.price .amount { font-family:var(--display); font-weight:800; font-size:clamp(3.4rem,2rem + 6vw,6.6rem); letter-spacing:-0.04em; line-height:1; }
.price .amount small { font-size:.3em; font-weight:600; letter-spacing:-0.01em; margin-left:.2em; color:var(--text-dim); }
.price .read { max-width:36rem; margin:18px auto 0; }
.price .hero-actions { justify-content:center; margin-top:28px; }
.price ul { margin:28px auto 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; color:var(--text-dim); font-size:.9375rem; }
.price li::before { content:"—"; margin-right:8px; color:var(--ochre); }

/* ---------- Fragen ---------- */
.qa { padding:clamp(56px,7vw,100px) 0; border-top:1px solid var(--line); }
.qa .wrap { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px,4vw,64px); }
.qa .faq { margin-top:0; max-width:none; }
.qa .faq details > p { font-family:var(--read); font-size:1.0625rem; max-width:46rem; }

/* ---------- Bewegung: sanftes Einblenden, abschaltbar; ohne Skript ist alles sichtbar ---------- */
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .7s ease,transform .7s ease; }
.js .reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
  .story-figure .media-box, .step .num { transition:none; }
}

/* ---------- Umbrüche ---------- */
@media (max-width:1000px) {
  .facts .wrap { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fact:nth-child(2) { border-right:0; }
  .fact:nth-child(n+3) { border-top:1px solid var(--line); }
  .fact:nth-child(3) { padding-left:0; }
  .register-head, .scope .wrap, .qa .wrap, .packs-split { grid-template-columns:1fr; }
  .proofs { grid-template-columns:1fr; }
  .packs-img { --h:340px; max-width:40rem; }
}
@media (max-width:860px) {
  /* Kachelraster einspaltig: Bild oben, Text darunter */
  .feat-grid { grid-template-columns:1fr; }
  /* stretch statt center: sonst wird die Bühne so breit wie das Bild und das Bild wird nicht verkleinert, sondern abgeschnitten */
  .feat.wide, .feat.wide.rev { display:flex; align-items:stretch; }
  .feat.wide .feat-stage { order:-1; }
  .feat:not(.wide) .feat-stage { min-height:0; }
  .feat.wide.imgtop .feat-text { padding:22px 28px 28px; text-align:left; }
  .feat.wide .feat-text, .feat.wide.rev .feat-text { order:0; padding:22px 28px 28px; }
  .feat ul.more { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .js .story-figure { display:none; }
  .story-grid { grid-template-columns:1fr; gap:0; }
  .js .story-grid .step-img { display:block; }
  .step { padding-left:0; padding-top:44px; }
  .step .num { top:0; font-size:1.8rem; opacity:1; }
  .case-grid { grid-template-columns:1fr; }
  /* Prüfstand als Karten: jede Zeile ein Block, die Spaltennamen stehen davor */
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display:block; width:auto !important; }
  .ledger thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ledger tbody tr { padding:14px 16px; border-bottom:1px solid var(--band-line); }
  .ledger tbody tr:last-child { border-bottom:0; }
  .ledger th, .ledger td { padding:0; border:0; }
  .ledger td { margin-top:8px; }
  .ledger td::before { content:attr(data-h); display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.05em; color:var(--band-dim); opacity:.8; }
}
@media (max-width:600px) {
  .wrap { padding:0 20px; }
  .hero { padding-top:32px; }
  .hero h1 { font-size:clamp(2.2rem,1.8rem + 4vw,2.9rem); }
  .stack .float { display:none; }
  .stack { padding-bottom:24px; }
  .hero-caption { margin-top:0; font-size:1rem; }
  .facts .wrap { grid-template-columns:1fr; }
  .fact, .fact:nth-child(3) { border-right:0; padding:20px 0; }
  .fact + .fact { padding-left:0; border-top:1px solid var(--line); }
  .feat ul.more { grid-template-columns:1fr; }
  .feat-stage, .feat.wide .feat-stage { padding:24px 16px; }
  .feat-text, .feat.wide .feat-text, .feat.wide.rev .feat-text, .feat.wide.imgtop .feat-text, .feat.list .feat-text { padding:20px 20px 24px; }
  .packs-grid, .sys { grid-template-columns:1fr; }
  .packs-img { --h:300px; }
  .case-body { padding:20px; }
  .read { font-size:1.0625rem; }
  .price .amount { font-size:3.5rem; }
}