/* ============================================================================
   agentbooks.de — Startseite
   Seitenklassen (Präfix hp- für homepage, konfliktfrei zu den ab-* des
   Design-Systems).

   Die Seite wird seit OP-16 aus templates/index.html.j2 erzeugt (zwei
   Sektionen kommen aus dem Katalog) — Struktur und Klassen sind dieselben.

   Alle Werte sind 1:1 aus den Inline-Styles der Design-System-Seite
   „Startseite" (templates/website/Startseite.dc.html) übernommen. Wo das
   Design-System eine Komponente hat (ab-card, ab-btn, ab-badge, ab-cover,
   ab-metadata, ab-lead, ab-display), trägt das Markup deren Klassen und hier
   steht nur, was zusätzlich nötig ist.

   Umrechnung auf Tokens: Farben, Radien und Schriftfamilien ausnahmslos über
   die Tokens aus css/tokens/. Abstände und Schriftgrade dort, wo der Wert
   exakt auf der Token-Skala liegt; die Zwischenwerte des Designs (6, 9, 10,
   11, 14, 17, 18, 20, 24, 28, 56 px) stehen literal — für sie gibt es kein
   Token, und ein Verbiegen auf den nächsten Skalenwert wäre eine stille
   Designänderung.

   Die sechs Welt-Akzente (--hp-accent) stammen aus den Zielgruppen-Akzenten
   des Design-Systems (tokens/colors.css dort: --accent-privat …
   --accent-government). Sie fehlen in css/tokens/colors.css dieser Site und
   werden deshalb hier einmalig als Modifier deklariert, statt sie zwölfmal
   inline zu wiederholen. Kommen die Weltseiten dazu, gehören sie in die
   Token-Datei — das ist eine Entscheidung der Hauptsession, nicht dieser Seite.

   Ergänzt wurde ausschließlich der als solcher markierte Responsive-Block am
   Dateiende — der Prototyp ist desktop-only.
   ============================================================================ */

/* ---- Seitenrahmen ---- */
.hp-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-12)}
.hp-section{padding-top:var(--space-24)}
.hp-spacer{flex:1}

/* ---- Wiederkehrende Textrollen ---- */
.hp-eyebrow{display:block;margin-bottom:var(--space-3)}
.hp-h2--gap{margin-bottom:var(--space-8)}
.hp-h4{font-size:var(--fs-h4);line-height:1.3;letter-spacing:var(--ls-h4)}
.hp-section-lede{margin:var(--space-3) 0 var(--space-8)}
.hp-head-lede{margin-top:var(--space-3)}
.hp-text{font-size:var(--fs-body-sm);line-height:1.55;color:var(--text-secondary);margin-top:var(--space-2)}
.hp-text--l{margin-top:var(--space-3)}
/* Mono-Zeilen, die im Design NICHT versalisiert sind (ab-metadata wäre es). */
.hp-mono{font-family:var(--font-mono);font-size:var(--fs-metadata);letter-spacing:var(--ls-metadata);color:var(--text-tertiary)}
.hp-lead-in{color:var(--text-primary);font-weight:var(--weight-medium)}
.hp-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);border:1px solid var(--border-default);color:var(--text-secondary)}
.hp-tag--strong{border-color:var(--border-strong)}
.hp-headlink{font-size:var(--fs-button);font-weight:var(--weight-medium);color:var(--text-accent);text-decoration:none;white-space:nowrap}
.hp-headlink:hover{color:var(--text-link-hover)}

/* ---- Akzente ---- */
.hp-rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hp-accent)}
.hp-dot{width:8px;height:8px;border-radius:1px;background:var(--hp-accent);flex:none}
.hp-dot--sm{width:6px;height:6px}

/* Zielgruppen-Akzente (Welten) */
.hp-a--privat{--hp-accent:#d8552f}
.hp-a--startups{--hp-accent:#0fa05c}
.hp-a--creator{--hp-accent:#a03fb4}
.hp-a--business{--hp-accent:#1d6fd6}
.hp-a--enterprise{--hp-accent:#0e8f99}
.hp-a--government{--hp-accent:#c41e4a}

/* Die Fachgebiets-Akzente des Prototyps (hp-c--business … --consumer) sind
   mit OP-16 entfallen: sie trugen die alte Kategorie-Achse, die im Katalog
   keine Entsprechung mehr hat. Die Karten der Startseite tragen den Akzent
   ihrer Welt. */

/* ============================================================================
   HERO
   ============================================================================ */

.hp-hero{background:var(--surface-card);border-bottom:1px solid var(--border-default)}
.hp-hero-inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-20) var(--space-12) var(--space-16);display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.hp-hero-kicker{display:block;margin-bottom:var(--space-6)}
.hp-hero-title{max-width:20ch}
.hp-hero-lede{margin-top:var(--space-6)}
.hp-hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hp-taglist{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:28px}

.hp-media{position:relative}
/* contain statt cover: im Vollbild sonst beschnitten, weil der Kasten dem Bild
   sein Seitenverhaeltnis aufzwingt */
.hp-video{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--border-default);border-radius:var(--radius-medium);background:var(--graphite-950);object-fit:contain}
.hp-media-zoom{position:absolute;top:var(--space-3);right:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-2);height:34px;padding:0 var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-xs);background:var(--surface-card);color:var(--text-secondary);font-family:var(--font-sans);font-size:13px;font-weight:var(--weight-medium);cursor:pointer;opacity:.92}
.hp-media-zoom:hover{color:var(--text-primary);border-color:var(--border-strong);opacity:1}
.hp-media-zoom[hidden]{display:none}

/* Filmbox — nur am Desktop; mobil bleibt der native Player zustaendig */
.hp-filmbox{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:var(--space-6);border:0;background:transparent;overflow:hidden}
.hp-filmbox:not([open]){display:none}
.hp-filmbox[open]{display:grid;place-items:center}
.hp-filmbox::backdrop{background:rgba(15,18,22,.78)}
.hp-filmbox-frame{width:min(92vw,1280px,calc((100vh - 120px) * 16 / 9));aspect-ratio:16/9}
.hp-filmbox-video{display:block;width:100%;height:100%;object-fit:contain;background:#000;border-radius:var(--radius-medium)}
.hp-filmbox-inner{position:relative}
.hp-filmbox-close{position:absolute;top:-48px;right:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-card);color:var(--text-secondary);cursor:pointer}
.hp-filmbox-close:hover{color:var(--text-primary);border-color:var(--border-strong)}
.hp-video-caption{display:block;margin-top:var(--space-3)}

/* ============================================================================
   01 — SECHS WELTEN
   ============================================================================ */

.hp-worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.hp-world{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:28px}
.hp-world-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.hp-world-name{display:flex;align-items:center;gap:var(--space-2)}
.hp-world-title{display:block;font-size:24px;line-height:1.18;letter-spacing:var(--ls-h2);font-weight:var(--weight-semibold);margin-top:18px;overflow-wrap:anywhere}
.hp-world-cta{display:block;color:var(--text-accent);margin-top:var(--space-6)}

/* ============================================================================
   02 — WAS IST EIN AGENTBOOK
   ============================================================================ */

.hp-grid280{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4)}
.hp-grid280--l{gap:var(--space-6)}
.hp-layer-h3{margin-top:var(--space-8)}
.hp-rule{height:1px;background:var(--border-default);margin:var(--space-5) 0 var(--space-3)}

/* ============================================================================
   03 — EIN AGENTBOOK
   ============================================================================ */

.hp-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-8)}
.hp-live{display:grid;grid-template-columns:300px 1fr;gap:var(--space-6);align-items:start}

/* Das Cover ist seit OP-16 das echte Kartenderivat des Exponats
   (site/covers/AB-xxx-card.webp, 480 px breit) statt der nachgebauten
   ab-cover-Kachel des Prototyps — die zeigte einen erfundenen Titel. */
.hp-cover-img{display:block;width:100%;height:auto;border-radius:var(--radius-medium);border:1px solid var(--border-default)}

.hp-bookmeta{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-4)}
.hp-bookmeta-cat{display:flex;align-items:center;gap:6px}
.hp-booktitle{font-size:var(--fs-h4);font-weight:var(--weight-semibold);letter-spacing:var(--ls-h4);line-height:1.3}
.hp-bookdesc{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary)}
.hp-bookver{margin-top:6px}

.hp-chat{border:1px solid var(--border-default);border-radius:var(--radius-large);background:var(--surface-card);overflow:hidden}
.hp-chat-head{display:flex;align-items:center;gap:10px;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-default)}
.hp-chat-name{font-size:var(--fs-button);font-weight:var(--weight-semibold);letter-spacing:var(--ls-h4)}
.hp-chat-body{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-6) var(--space-5)}
.hp-turn{display:flex;flex-direction:column;gap:10px}
.hp-q{align-self:flex-end;max-width:44ch;padding:var(--space-3) var(--space-4);border-radius:var(--radius-medium);background:var(--surface-sunken);border:1px solid var(--border-default);font-size:var(--fs-button);line-height:1.55}
.hp-a{max-width:64ch;padding:14px var(--space-4);border-radius:var(--radius-medium);background:var(--surface-card);border:1px solid var(--border-default);border-left:3px solid var(--interactive-agent)}
.hp-a-text{font-family:var(--font-serif);font-size:var(--fs-button);line-height:1.6}
.hp-cites{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-3)}
.hp-cite{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:3px 7px;border-radius:var(--radius-xs);background:var(--petrol-50);color:var(--petrol-700);border:1px solid var(--petrol-200)}
.hp-cite--neutral{background:var(--graphite-100);color:var(--text-secondary);border-color:transparent}
.hp-chat-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-default);background:var(--surface-sunken)}
.hp-chat-note{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary)}

/* Die Arbeitsergebnisse des Exponats — dieselbe Rahmenfigur wie der (heute
   abgeschaltete) Demo-Chat: Kopfzeile, Körper, Fußzeile in einer ab-card.
   Kopf und Fuß teilen sich deshalb die hp-chat-Klassen. */
.hp-expo{overflow:hidden}
.hp-expo-head{display:flex;align-items:center;gap:10px;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-default)}
.hp-expo-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3);padding:var(--space-5)}
.hp-expo-item{display:flex;flex-direction:column;gap:4px;padding:14px var(--space-4);border:1px solid var(--border-default);border-left:3px solid var(--interactive-primary);border-radius:var(--radius-medium)}
.hp-expo-typ{display:block}
.hp-expo-name{font-size:var(--fs-button);font-weight:var(--weight-semibold);line-height:1.35}
.hp-expo-umfang{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary)}
.hp-expo-aufbau{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.55;color:var(--text-tertiary)}
.hp-expo-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-default);background:var(--surface-sunken)}

/* ============================================================================
   04 — ERGEBNISSE
   ============================================================================ */

/* Ergebnis-Vitrine: je Dateifamilie eine Karte mit einem echten Beispiel aus
   dem Katalog (catalog/render.index_vitrine). Werte aus dem Design-Artboard
   „Ergebnis-Vitrine" — die Zwischengroessen (2, 6, 7, 8, 9, 10, 11, 14, 30,
   40, 108 px) stehen wie im Rest der Datei literal. */
.hp-vitrine{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4)}
.hp-vit-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:10px}
.hp-vit-ext{color:var(--blue-600);font-weight:var(--weight-medium)}
.hp-vit-typ{font-size:11px}
.hp-vit-h3{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:-.01em;margin-top:14px}
.hp-vit-fuss{display:block;border-top:1px solid var(--border-subtle);margin-top:14px;padding-top:var(--space-3)}
.hp-vit-name{display:block;font-size:var(--fs-button);font-weight:var(--weight-medium);line-height:1.35;overflow-wrap:anywhere}
.hp-vit-umfang{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);margin-top:2px}
.hp-vit-quelle{display:block;margin-top:6px;overflow-wrap:anywhere}

/* Die Miniatur ueber jeder Karte ist eine Zeichnung aus leeren Spans: sie
   zeigt die Gestalt der Datei, nicht ihren Inhalt, und ist deshalb im Markup
   aria-hidden. Jede Familie hat ihre eigene Figur — die Masse stehen hier,
   damit das Template ohne Inline-Styles auskommt. */
.hp-vit-mini{display:block;height:108px;padding:10px;background:var(--graphite-25);border:1px solid var(--border-subtle);border-radius:var(--radius-small)}
/* .xlsx — sechs Zeilen zu vier Zellen, die Kopfzeile blau getoent. */
.hp-vit-mrow{display:flex;gap:4px;margin-top:4px}
.hp-vit-mrow:first-child{margin-top:0}
.hp-vit-mcell{flex:1;height:9px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:1px}
.hp-vit-mini--xlsx .hp-vit-mrow:first-child .hp-vit-mcell{background:var(--blue-100);border-color:var(--blue-200)}
/* .docx — Ueberschrift und sechs Textzeilen unterschiedlicher Laenge. */
.hp-vit-mtitel{display:block;width:56%;height:9px;background:var(--graphite-300);border-radius:1px}
.hp-vit-mline{display:block;height:6px;background:var(--graphite-100);border-radius:1px;margin-top:7px}
.hp-vit-mline--akzent{background:var(--blue-100)}
.hp-vit-mline--kurz{width:34%;margin-top:10px}
.hp-vit-mini--docx .hp-vit-mline:nth-child(2){width:92%}
.hp-vit-mini--docx .hp-vit-mline:nth-child(3){width:86%}
.hp-vit-mini--docx .hp-vit-mline:nth-child(4){width:90%}
.hp-vit-mini--docx .hp-vit-mline:nth-child(5){width:40%}
.hp-vit-mini--docx .hp-vit-mline:nth-child(6){width:88%}
.hp-vit-mini--docx .hp-vit-mline:nth-child(7){width:74%}
/* .pptx — eine Folie mit Titel und zwei Feldern, die naechste angedeutet. */
.hp-vit-mini--pptx{display:flex;flex-direction:column;justify-content:center}
.hp-vit-folie{display:block;width:78%;margin:0 auto;padding:var(--space-2);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xs)}
.hp-vit-ftitel{display:block;width:62%;height:8px;background:var(--graphite-300);border-radius:1px}
.hp-vit-frow{display:flex;gap:6px;margin-top:var(--space-2)}
.hp-vit-fbox{flex:1;height:30px;background:var(--graphite-25);border:1px solid var(--border-subtle);border-radius:2px}
.hp-vit-fbox--akzent{background:var(--blue-50);border-color:var(--blue-100)}
.hp-vit-fnaechste{display:block;width:78%;height:8px;margin:6px auto 0;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xs)}
/* .pdf — Kopfzeile mit Fassungsmarke, darunter drei Haken und ein Rest. */
.hp-vit-pkopf{display:flex;align-items:center;justify-content:space-between}
.hp-vit-pbalken{width:44%;height:8px;background:var(--graphite-300);border-radius:1px}
.hp-vit-pmarke{width:18%;height:6px;background:var(--blue-100);border-radius:1px}
.hp-vit-plinie{display:block;margin-top:var(--space-2);border-top:1px solid var(--border-default)}
.hp-vit-phaken{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:7px}
/* Der erste Haken steht einen Pixel tiefer als die folgenden (Artboard); als
   drittes Kind der Miniatur ist er ueber nth-child ansprechbar. */
.hp-vit-phaken:nth-child(3){margin-top:var(--space-2)}
.hp-vit-pbox{flex:none;width:7px;height:7px;border:1px solid var(--blue-300);border-radius:1px}
.hp-vit-pbox--voll{background:var(--blue-100)}
.hp-vit-pzeile{flex:1;height:6px;background:var(--graphite-100);border-radius:1px;margin-top:1px}

/* Zweite Reihe: Agentenschicht, wiederholbare Ablaeufe, die Zahl der
   kuratierten Anwendungsfaelle. */
.hp-vit-reihe2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.hp-vit-block{padding:var(--space-5)}
/* Dieselbe Schiene wie auf den Weltkarten, hier im Petrol der Agentenschicht. */
.hp-vit-agent{position:relative;overflow:hidden;--hp-accent:var(--petrol-600)}
.hp-vit-agentkopf{display:flex;align-items:center;gap:var(--space-2)}
.hp-vit-h4{font-size:var(--fs-h4);letter-spacing:-.01em}
.hp-vit-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
/* Die letzte Marke steht fuer die ungenannten Phasen — offener Rand. */
.hp-vit-tag--offen{border-style:dashed}
.hp-vit-zahl{background:var(--blue-50);border-color:var(--blue-200)}
.hp-vit-zahl-wert{display:block;font-size:40px;line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--weight-semibold);color:var(--blue-600)}
.hp-vit-zahl-text{font-size:var(--fs-body-sm);line-height:1.55;color:var(--graphite-700);margin-top:10px}
.hp-vit-zahl-stand{display:block;margin-top:14px;color:var(--blue-500)}

.hp-note{margin-top:var(--space-4)}
.hp-note a{color:var(--text-accent);text-decoration:none}
.hp-note a:hover{color:var(--text-link-hover)}

/* ============================================================================
   05 — AUSGEWÄHLTE TITEL
   ============================================================================ */

.hp-shelf{display:grid;grid-template-columns:minmax(180px,220px) 1fr;gap:var(--space-8);padding:var(--space-6) 0;border-bottom:1px solid var(--border-default)}
.hp-shelf:last-child{border-bottom:0}
.hp-shelf-title{font-size:17px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-h4)}
.hp-shelf-sub{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary);margin-top:6px}
/* Je Regal ein Verweis in die Bibliothek: das Regal zeigt hoechstens sechs
   Titel, die Welt hat mehr (catalog/render.INDEX_REGAL_MAX). */
.hp-shelf-link{display:inline-block;margin-top:var(--space-3);font-size:var(--fs-body-sm);font-weight:var(--weight-medium);color:var(--text-accent);text-decoration:none}
.hp-shelf-link:hover{color:var(--text-link-hover)}
.hp-shelf-books{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}
.hp-book{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:18px var(--space-5)}
.hp-book-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.hp-book-cat{display:flex;align-items:center;gap:var(--space-2)}
.hp-book-title{display:block;font-size:17px;line-height:1.3;font-weight:var(--weight-semibold);letter-spacing:-.01em;overflow-wrap:anywhere;margin-top:var(--space-3)}

/* ============================================================================
   06 — NACHWEISBARKEIT
   ============================================================================ */

.hp-grid240{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4)}
.hp-stufe{border-top:3px solid var(--interactive-primary);padding:var(--space-5)}
.hp-stufe-kicker{display:block;margin-bottom:var(--space-3)}
.hp-proof{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-6);padding:var(--space-6)}
.hp-proof-main{flex:1;min-width:32ch}
.hp-proof-text{max-width:64ch}
.hp-facts{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.hp-fact-val{font-size:var(--fs-h4);font-weight:var(--weight-semibold);margin-top:var(--space-1)}
.hp-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-4)}
.hp-duo-head{display:block;margin-bottom:var(--space-4)}
.hp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.hp-list li{font-size:var(--fs-body);line-height:1.55;color:var(--text-secondary)}

/* ============================================================================
   07 — STUFEN
   ============================================================================ */

.hp-tier{display:flex;flex-direction:column;padding:var(--space-6)}
.hp-tier--agent{border-color:var(--petrol-200)}
.hp-tier-head{display:flex;align-items:center;gap:var(--space-2)}
.hp-tier-kicker{font-family:var(--font-mono);font-size:var(--fs-metadata);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.hp-tier-kicker--agent{color:var(--petrol-700)}
.hp-tier-h3{margin-top:var(--space-6)}
.hp-tier-text{font-size:var(--fs-body-sm);line-height:1.55;color:var(--text-secondary);margin:var(--space-3) 0 var(--space-5)}
.hp-tier-rule{height:1px;background:var(--border-default);margin-bottom:var(--space-4)}
.hp-tier-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary)}
.hp-outlook{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-6);padding:var(--space-6);background:var(--surface-sunken)}
.hp-outlook-main{flex:1;min-width:36ch}
.hp-outlook-text{max-width:72ch}

/* ============================================================================
   08 — FAQ
   Ohne eigene Regeln: die Fragen stehen seit dem 30.08.2026 im Akkordeon
   .faq-* (css/faq.css, Markup aus templates/partials/faq.j2). Damit sind
   .hp-grid300 und .hp-faq-a ohne Nutzer und entfallen.
   ============================================================================ */

/* ============================================================================
   09 — SCHLUSS-CTA
   ============================================================================ */

.hp-final{background:var(--surface-card);border:1px solid var(--border-default);border-top:3px solid var(--interactive-primary);border-radius:var(--radius-large);padding:56px}
.hp-final-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-8)}
.hp-final-title{max-width:24ch}
.hp-final-lede{margin-top:var(--space-3)}
.hp-final-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.hp-mini{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:var(--space-5)}
.hp-mini-meta{display:flex;align-items:center;gap:var(--space-2)}
.hp-mini-title{display:block;font-size:20px;font-weight:var(--weight-semibold);letter-spacing:-.014em;margin-top:var(--space-3)}
.hp-mini-text{display:block;font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary);margin-top:6px}
.hp-mini-cta{display:block;color:var(--text-accent);margin-top:var(--space-4)}

/* ============================================================================
   RESPONSIVE — Ergänzung zum Prototyp
   Der Design-Prototyp ist desktop-only (zweispaltiger Hero, 3er-Raster,
   48px-Gutter). Alles ab hier steht NICHT im Prototyp; die Gutter-Stufen
   48/32/20 folgen den Layout-Tokens und den übrigen Seiten der Site.
   ============================================================================ */

@media (max-width:1024px){
  .hp-inner{padding:0 var(--space-8)}
  .hp-section{padding-top:var(--space-16)}
  .hp-hero-inner{grid-template-columns:1fr;gap:var(--space-10);padding:var(--space-16) var(--space-8) var(--space-12)}
  .hp-worlds{grid-template-columns:repeat(2,1fr)}
  .hp-duo{grid-template-columns:1fr}
  .hp-final{padding:var(--space-8)}
  .hp-final-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  .hp-media-zoom{display:none}
  .hp-inner{padding:0 var(--space-5)}
  .hp-hero-inner{padding:var(--space-12) var(--space-5) var(--space-10)}
  .hp-taglist{margin-top:var(--space-5)}
  .hp-worlds{grid-template-columns:1fr}
  .hp-world{padding:var(--space-5)}
  .hp-head-row{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .hp-live{grid-template-columns:1fr}
  .hp-bookpanel{max-width:320px}
  .hp-q{align-self:stretch;max-width:none}
  /* Vitrine: die erste Reihe bricht ueber auto-fit von selbst um, die zweite
     nicht — bei 720 px stuenden dort noch zwei Karten nebeneinander. */
  .hp-vit-reihe2{grid-template-columns:1fr}
  .hp-shelf{grid-template-columns:1fr;gap:var(--space-4)}
  .hp-shelf-books{grid-template-columns:1fr}
  .hp-proof-main,.hp-outlook-main{min-width:0}
  .hp-final{padding:var(--space-6)}
  .hp-final-grid{grid-template-columns:1fr}
  .hp-final-head{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
}