/* =========================================================================
   Startseite – Premium-Redesign ("Literary Warm")
   Nutzt ausschließlich die bestehenden Marken-Token (Farben, Cooper/TASA
   Explorer, Motion-Kurven) aus style.css. Neue Layout-Entscheidungen (Radien,
   Flächenwechsel, Bento-Grid) gelten nur für die Startseite (.page-index).

   Abschnitte: 0 Token/Basis · 1 Hero · 2 Statistiken · 3 Bento ·
   4 Showcase/Tabs · 5 Journey · 6 Leserstimmen · 7 Abschluss-CTA ·
   8 Header-Verfeinerung · 9 Dark Mode · 10 Responsive
   ========================================================================= */

/* ---- 0. Token & Basis -------------------------------------------------- */
.page-index {
    --home-primary: #0B0B0B;
    --home-primary-hover: #1C1C1C;
    --home-radius:  18px;
    --home-radius-lg: 26px;
    --home-border:  color-mix(in srgb, var(--home-primary) 9%, transparent);
    --home-border-strong: color-mix(in srgb, var(--home-primary) 16%, transparent);
    --home-header-h: 100px;  /* Desktop: bewusst etwas größer als die reale
                                Header-Höhe (~86px). Der Hero wird so um genau
                                diesen Wert hochgezogen UND unten freigehalten –
                                Überschuss zieht den Hintergrund nur unsichtbar
                                über den oberen Rand, der Inhalt bleibt exakt
                                unter dem Header. Kein Streifen über der Navi. */
    /* Einheitliche Farbgebung: Gold ist der einzige Vordergrund-Akzent,
       das warme Amber-Leuchten dient ausschließlich als Ambient/Hintergrund
       (harmoniert mit Gold-Marke + warmem Licht der Fotos). */
    --home-accent: var(--gold);
    --home-glow: #E3A24C;
    --home-glow-soft: #EBB877;
    --home-glow-tint: rgba(227, 162, 76, .16);
}
@media (max-width: 1120px) {
    .page-index { --home-header-h: 92px; }   /* etwas höhere Pille auch mobil */
}

/* Dezent grauer Grund – nur der Showcase-Abschnitt trägt noch ein Bild.
   Hero zieht unter den transparenten Header. */
/* Hero füllt den Bereich hinter der fixierten Nav (kein Inhaltsabstand nötig);
   das Hero-eigene padding-top hält den Inhalt frei. */
.page-index #main { background: transparent; margin-top: 0; padding-top: 0; }

/* Wiederkehrende Kopfzeile über den Sektionen */
.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ---- CTA-Buttons (Startseite) – Aliasse auf das globale System --------- */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 48px;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-hover),
                color var(--dur-fast) var(--ease-hover),
                border-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
    will-change: transform;
}
.btn-cta:active { transform: translateY(-1px) scale(.985); transition-duration: var(--dur-micro); }
.btn-cta:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.btn-cta__icon { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; transition: transform var(--dur-fast) var(--ease-hover); }
.btn-cta__icon svg { width: 100%; height: 100%; }
.btn-cta:hover .btn-cta__icon { transform: translateX(3px); }

.btn-cta--xl { min-height: 56px; padding: 1rem 1.9rem; font-size: 1.02rem; }

.btn-cta--primary {
    background: var(--gold);
    color: #fff;
}
.btn-cta--primary:hover {
    background: color-mix(in srgb, var(--gold) 89%, #000);
    color: #fff;
    transform: translateY(-2px);
}

.btn-cta--outline {
    background: var(--surface-card);
    border-color: transparent;
    color: var(--secondary);
}
.btn-cta--outline:hover {
    background: var(--surface-card);
    color: var(--secondary-hover);
    transform: translateY(-2px);
}

/* ---- 1. Hero – editorial / „warmes Pergament" -------------------------
   Kein Bild, kein SaaS-Verlauf. Eine ruhige Pergament-Basis und ein sehr
   weicher Goldschein hinter dem Buch geben Tiefe. Das Cover ist der
   alleinige Blickfang. */
.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 100vh;                        /* Fallback für ältere Browser */
    height: 100dvh;                       /* exakt ein sichtbarer Bildschirm (mobil ohne Adressleiste) */
    --hero-gap: clamp(4rem, 10vh, 6rem);
    padding-top: calc(var(--home-header-h) + var(--sat));   /* Inhalt frei unter der schwebenden Nav (inkl. Safe-Area) */
    display: flex;
    flex-direction: column;
    background: var(--gold);              /* Primärgold */
    border-radius: 0 0 clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px);  /* unten abgerundet */
}
/* Ein einzelnes, langsam rotierendes Marken-Motiv (gleicher Stil wie die übrigen
   Seiten) – dezentes Wasserzeichen hinter dem Inhalt. */
.home-hero::before {
    content: ""; position: absolute; z-index: -1;
    top: 50%; left: 50%;
    height: clamp(34rem, 85vw, 70rem); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url("../images/SVG/overlay-icon.svg") center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: .07;
    pointer-events: none;
    will-change: transform;
    animation: pt-emblem 150s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .home-hero::before { animation: none; } }
/* Buttons & Scroll-Hinweis auf dem Gold lesbar halten. */
.home-hero .btn-cta--primary { background: #fff; color: var(--secondary); }
/* Beide Hero-Buttons füllen sich beim Hover weiß (Text wird Navy für Kontrast). */
.home-hero .btn-cta--primary:hover { background: #fff; color: var(--secondary); }
.home-hero .btn-cta--outline { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.home-hero .btn-cta--outline:hover { background: #fff; border-color: #fff; color: var(--secondary); transform: translateY(-2px); }
.btn-cta__lead { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; }
.btn-cta__lead svg { width: 100%; height: 100%; }
.home-hero__scrollcue span { background: rgba(255, 255, 255, .8); }

/* Inhalt oben (Titel + Buttons), Buch-Display füllt darunter bis zum Fold. */
.home-hero__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--hero-gap);
    min-height: 0;
}
.home-hero__copy { position: relative; z-index: 2; flex: none; max-width: 60rem; }
.home-hero__title {
    margin: 0 0 clamp(1.5rem, 3vw, 2.1rem);
    color: #fff;
    font-family: var(--font-display-medium);   /* etwas kräftiger */
    font-size: clamp(3.2rem, 6vw, 5.25rem);
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;                        /* Desktop: eine Zeile */
}
.home-hero__title-accent { color: #fff; }      /* komplett weiß */

.home-hero__lead {
    max-width: 40rem;
    margin: 0 auto;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.6;
}

.home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
}
/* Beschriftung beider Buttons immer einzeilig. */
.home-hero__ctas .btn-cta { white-space: nowrap; }

/* ---- 3D-Buch-Display (Hero) ------------------------------------------
   Cover mittig, dominant & groß; je zwei Innenseiten links/rechts. Alle auf
   gemeinsamer unterer Grundlinie, am unteren Hero-Rand verankert und leicht
   angeschnitten (laufen unter den Fold weiter). Schließen sich beim Scrollen. */
.home-hero__covers {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;                              /* nicht schrumpfen → läuft nach unten aus dem Fold */
    min-height: 0;
    width: 100%;
    margin-top: clamp(1.4rem, 3.5vh, 2.4rem);    /* Buch rückt hoch, nah an die CTAs */
    margin-bottom: clamp(-10rem, -11vh, -13rem); /* unten stärker anschneiden */
    display: grid;
    place-items: end center;                    /* gemeinsame untere Grundlinie */
    align-content: end;
    perspective: 2400px;
    perspective-origin: 50% 86%;
    isolation: isolate;
}
/* Großer, weicher Fokus-Schein in der Markenfarbe (Kupfer) hinter dem Cover –
   schafft Tiefe und macht das Buch zum klaren Blickfang. */
.home-hero__covers-glow {
    position: absolute;
    left: 50%;
    bottom: 16%;
    translate: -50% 0;
    z-index: 0;
    width: clamp(34rem, 66vw, 64rem);
    aspect-ratio: 1.1 / 1;
    background: radial-gradient(closest-side,
        rgba(160, 154, 108, .50), rgba(160, 154, 108, .20) 46%, transparent 72%);
    filter: blur(46px);
    pointer-events: none;
}
.home-hero__cover {
    grid-area: 1 / 1;                  /* alle im selben Feld → unten zentriert gestapelt */
    width: var(--cw, 22rem);
    height: auto;
    border-radius: 8px;
    box-shadow: 0 34px 60px -26px rgba(22, 19, 12, .58);
    transform: translateX(var(--x)) rotateY(var(--ry)) scale(var(--s));
    transform-origin: bottom center;  /* gemeinsame Grundlinie bei Skalierung/Drehung */
    opacity: var(--o, 1);
    z-index: var(--zi, 1);
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* Spread- (Start) und Schließ- (End-) Werte je Cover (End = --*-end). */
.home-hero__cover--front { --cw: 27.5rem; --x: 0; --ry: 0deg; --s: 1; --o: 1; --zi: 5; }
.home-hero__cover--l1 {
    --cw: 24.75rem; --x: -12rem; --ry: 18deg;  --s: 1; --o: 1; --zi: 4;
    --x-end: -2.6rem; --s-end: .92; --o-end: .72;
}
.home-hero__cover--r1 {
    --cw: 24.75rem; --x: 12rem;  --ry: -18deg; --s: 1; --o: 1; --zi: 4;
    --x-end: 2.6rem;  --s-end: .92; --o-end: .72;
}
.home-hero__cover--l2 {
    --cw: 22.5rem; --x: -20.5rem; --ry: 29deg;  --s: 1; --o: .98; --zi: 3;
    --x-end: -4.8rem; --s-end: .82; --o-end: .44;
}
.home-hero__cover--r2 {
    --cw: 22.5rem; --x: 20.5rem;  --ry: -29deg; --s: 1; --o: .98; --zi: 3;
    --x-end: 4.8rem;  --s-end: .82; --o-end: .44;
}

/* Buch-Inszenierung (3D-Buch, jetzt im Abschnitt „Über das Projekt“) */
.home-book-scene {
    position: relative;
    width: min(100%, 35rem);
    aspect-ratio: 1 / 1.04;
    display: grid;
    place-items: center;
}

/* Buch-Flip: zeigt Vorder- und Rückseite. Dreht sich um die senkrechte Achse –
   bei Hover (Desktop) und per Klick/Enter (Touch & Tastatur, .is-flipped via
   home.js). Nur transform (GPU-freundlich); respektiert prefers-reduced-motion. */
.bookflip {
    position: relative;
    z-index: 1;
    width: 73%;
    aspect-ratio: 1000 / 1419;
    perspective: 1150px;
    perspective-origin: 50% 42%;
    animation: home-book-float 9s ease-in-out infinite;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bookflip:focus-visible { outline: var(--focus-ring); outline-offset: 8px; border-radius: 12px; }
@keyframes home-book-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}

.bookflip__inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    /* Ruhelage leicht angewinkelt → räumlicher, 3D-Eindruck. */
    transform: rotateY(-18deg);
    transition: transform 1.15s cubic-bezier(.2, .8, .25, 1);
}
.bookflip:hover .bookflip__inner,
.bookflip.is-flipped .bookflip__inner { transform: rotateY(162deg); }   /* -18° + 180° */

.bookflip__face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 2px 12px 12px 2px;
    background: #fff;
    /* Geerdeter Schlagschatten + feiner, gebänderter Seitenschnitt (schlankeres,
       realistischeres Buch – dünnere Seiten, weiche Tonabstufung). */
    box-shadow:
        0 34px 60px -28px rgba(15, 25, 40, .5),
        0 6px 16px -6px rgba(15, 25, 40, .22),
        4px 2px 0 -1px #F5F4F0,
        8px 5px 0 -1px #E8E7E2,
        12px 8px 0 -2px #F1F0EC,
        16px 11px 0 -2px #E4E3DE,
        20px 14px 0 -3px #ECEBE6;
}
.bookflip__face img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* Buchrücken: dezenter Bindungs-Schatten an der Innenkante. */
.bookflip__face::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 10%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(15, 25, 40, .2), rgba(15, 25, 40, .06) 45%, transparent);
    pointer-events: none;
    z-index: 1;
}
.bookflip__face--back { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
    .bookflip { animation: none; }
    .bookflip__inner { transition: none; }
}


/* Scroll-Hinweis */
.home-hero__scrollcue {
    position: relative;
    z-index: 1;
    align-self: center;
    margin-bottom: 1.1rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 3.6rem;
    border-radius: 999px;
}
.home-hero__scrollcue span {
    width: 4px;
    height: 9px;
    border-radius: 999px;
    background: var(--text-muted);
    animation: home-scrollcue 2.1s var(--ease-out-soft) infinite;
}
@keyframes home-scrollcue {
    0%   { transform: translateY(-6px); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateY(8px); opacity: 0; }
}

/* ---- 2. Sechs Gründe – ruhiger Karten-Stapel ------------------------------
   Reines CSS: Jede Karte bleibt beim Scrollen unter dem Header haften
   (position: sticky, gestaffelte Offsets); die nächste legt sich darüber,
   die Kanten des Stapels bleiben sichtbar. Kein JavaScript, keine Effekte. */
.home-kicker {
    margin-bottom: 1rem;
    color: var(--gold);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* =====================================================================
   SECHS MERKMALE – eine Karte pro Reihe, die sich beim Scrollen zu einem
   ruhigen Stapel schichten (CSS-sticky, gestaffelte top-Offsets je --n).
   Warme Elfenbein-Karten mit weichem Rahmen + Schatten, große, sehr blasse
   Hintergrund-Ziffer. Die Oberkante (Nummer + Titel) bleibt als „Peek"
   sichtbar. Rein per CSS – robust, kein JS.
   ===================================================================== */
.home-reasons { position: relative; overflow: clip; }
.home-reasons__glow {
    position: absolute;
    width: 46rem; height: 40rem;
    left: -9rem; top: 16rem;
    background: var(--home-glow);
    opacity: .09;
    filter: blur(185px);
    border-radius: 50%;
    pointer-events: none;
}
.home-reasons > .container { position: relative; z-index: 1; }

/* Abschnittskopf */
.home-reasons__head { max-width: 42rem; margin: 0 0 clamp(2.4rem, 5vw, 3.8rem); }
.home-reasons__eyebrow {
    margin: 0 0 .95rem; color: var(--gold);
    font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.home-reasons__title {
    margin: 0; font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; letter-spacing: -.02em;
    color: var(--text-strong);
}

/* Stapel: eine Karte pro Reihe. Beim Scrollen heftet jede Karte etwas tiefer
   (über --n) und schiebt sich zu einem geschichteten Stapel zusammen; die
   Oberkanten (Nummer + Titel) bleiben als „Peek" sichtbar. Unten etwas
   Scroll-Reserve, damit auch die letzte Karte sauber einrastet. */
.home-reasons__stack {
    list-style: none; margin: 0;
    padding: 0 0 clamp(2rem, 4vw, 3rem);
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}
.scard {
    position: sticky;
    /* Schmaler Versatz: gestapelte Karten zeigen nur einen dünnen Streifen
       (kein Text der vorherigen Karte mehr sichtbar). */
    top: calc(var(--home-header-h) + 1rem + var(--n, 0) * 1.5rem);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem 1.9rem;
    padding: clamp(1.5rem, 2.5vw, 2.1rem) clamp(1.8rem, 3.4vw, 2.8rem) clamp(1.7rem, 2.8vw, 2.3rem);
    border-radius: 18px;
    background: var(--surface-card);
    /* Tiefe ohne Schatten: je weiter hinten im Stapel, desto kleiner (von der
       Oberkante her, damit der Streifen an Ort bleibt). Voll überdeckte Karten
       liegen bei sehr niedriger Deckkraft, gestuft je Kartennummer: 01 ≈ 10 %,
       02 ≈ 20 % … 05 ≈ 50 %, aktive Karte 100 %. --covered (0 = aktiv, 1 =
       überdeckt) blendet weich dorthin. */
    transform-origin: 50% 0;
    transform: scale(calc(1 - .05 * var(--recede, 0)));
    opacity: calc(1 - var(--covered, 0) * (1 - (var(--n, 0) + 1) * .1));
}
/* Passendes Icon rechts (ersetzt die frühere Ziffer) – dezenter goldener Chip. */
.scard__icon {
    position: relative; z-index: 1;
    flex: none;
    display: grid; place-items: center;
    width: clamp(3rem, 4.6vw, 3.6rem);
    height: clamp(3rem, 4.6vw, 3.6rem);
    border-radius: 14px;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--gold);
}
.scard__icon svg { width: 54%; height: 54%; }
.scard__body { position: relative; z-index: 1; display: grid; gap: .6rem; }
/* Inhalt blendet beim Zurücktreten zügig ganz aus → kein halb angeschnittener
   Text während des Einrastens und nichts, was durch die jetzt leicht
   transparenten Streifen davor durchscheinen könnte. */
.scard__icon, .scard__body { opacity: calc(1 - 2.2 * var(--recede, 0)); }
.scard__title {
    margin: 0;
    font-family: var(--font-display-medium);
    font-size: clamp(1.32rem, 2.2vw, 1.72rem); line-height: 1.16;
    color: var(--text-strong); letter-spacing: -.01em;
}
.scard__desc {
    margin: 0; max-width: 62ch;
    color: var(--text-muted);
    font-size: clamp(.95rem, 1.1vw, 1.02rem); line-height: 1.65;
}
/* Mobil: kompakterer Versatz, kleinere Hintergrund-Ziffer */
@media (max-width: 720px) {
    .scard {
        top: calc(var(--home-header-h) + .7rem + var(--n, 0) * 1.25rem);
        gap: .5rem 1rem;
        padding: 1.4rem 1.5rem 1.6rem;
    }
    .scard__icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
}
/* Ohne Bewegung: kein Stapel, schlichte Liste */
@media (prefers-reduced-motion: reduce) {
    .scard { position: relative; top: auto; }
}

/* ---- 3. Über das Projekt – Offenbarungs-Faden -------------------------- */
.home-project__grid { display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }
.home-project__photo { --ph-ratio: 4 / 5; width: 100%; max-width: 26rem; }
/* 3D-Buch im Projekt-Abschnitt (aus dem Hero hierher verschoben). */
.home-project__visual { display: grid; justify-items: center; width: 100%; }
@media (min-width: 960px) {
    /* Buch links, Text rechts (Reihenfolge im Markup bleibt: Text zuerst,
       damit auf Mobil der Abschnittstitel führt). */
    .home-project__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
    .home-project__photo { max-width: none; justify-self: end; }
    .home-project__visual { order: -1; justify-self: center; }
}

/* Leitsatz: der Kern der Sektion – kompakte redaktionelle Aussage. */
.home-project__mission {
    max-width: 34ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    line-height: 1.45;
    letter-spacing: -.005em;
    color: var(--home-primary);
}
/* Auf dem Smartphone etwas größer setzen (sonst sitzt sie auf dem clamp-Minimum). */
@media (max-width: 640px) {
    .home-project__mission { font-size: 1.35rem; line-height: 1.4; }
}

/* Hintergrund-Erzählung: ruhiger gesetzt – klare Hierarchie zur These. */
.home-project__cols {
    display: grid;
    gap: 1.15rem;
    margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 clamp(1.9rem, 4vw, 2.6rem);
}
.home-project__cols p {
    max-width: 54ch;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.8;
}

/* ---- 3d. Lese-Erlebnis – zentrales Reader-Mockup mit Feature-Callouts -----
   Premium-Showcase: ein realistisches Lese-Seiten-Mockup als Held; links/rechts
   umkreisen die Merkmale den Reader mit dünnen Verbindungslinien. Warmes
   Sandstein, weiche Schatten, Serifen-Headline + Sans-UI-Text. */
.home-reader {
    position: relative;
    overflow: hidden;
    padding-block: clamp(5rem, 10vw, 9rem);
    /* Gerichteter Verlauf in der Sekundärfarbe (Navy). */
    background: linear-gradient(152deg, var(--secondary) 0%, var(--secondary-hover) 100%);
    color: #f3ebe0;
}
.home-reader > .container { position: relative; z-index: 1; }

.home-reader__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.home-reader__eyebrow {
    margin: 0 0 1.1rem; color: var(--gold);
    font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.home-reader__title {
    margin: 0; font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.02em;
    color: #fbf5ec;
}

/* Bühne: links Karten · Mitte Reader · rechts Karten */
.home-reader__stage {
    position: relative;
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.4rem);
    justify-items: center;
}
@media (min-width: 1024px) {
    .home-reader__stage {
        /* Mitte fest auf die Mockup-Breite begrenzen, damit der lange Vers-Text
           die auto-Spalte nicht aufbläht und die Karten aus dem Container drängt. */
        grid-template-columns: minmax(0, 1fr) min(29rem, 100%) minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(1.8rem, 3.5vw, 3.4rem);
    }
    .home-reader__feats--left { align-items: flex-end; }
    .home-reader__feats--right { align-items: flex-start; }
}
.home-reader__mock { display: grid; justify-items: center; align-self: center; }

/* ---- Schwebende Glas-Feature-Karten (nur Icon + Titel) ---- */
.home-reader__feats {
    list-style: none; margin: 0; padding: 0; width: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: clamp(1.1rem, 2.2vw, 1.9rem);
}
.rfeat {
    display: grid; justify-items: center; gap: .7rem; text-align: center;
    width: clamp(8.5rem, 13vw, 11rem);
    padding: clamp(1rem, 1.8vw, 1.4rem) 1rem;
    border-radius: 18px;
    /* Weiße Karte auf dem Navy-Grund – Icon und Titel in Navy (Sekundärfarbe). */
    background: var(--surface-card);
    border: 1px solid rgba(34, 58, 85, .08);
    box-shadow: 0 16px 34px -22px rgba(8, 14, 24, .6);
    transition: transform var(--dur-fast) var(--ease-hover),
                border-color var(--dur-fast) var(--ease-hover);
}
.rfeat:hover {
    transform: translateY(-3px);
}
.rfeat__icon {
    display: grid; place-items: center;
    color: var(--secondary);
}
.rfeat__icon svg { width: 2.15rem; height: 2.15rem; }
.rfeat__title {
    font-family: var(--font-body);
    font-size: clamp(.96rem, 1.2vw, 1.08rem); font-weight: 600;
    color: var(--secondary); letter-spacing: .005em;
}

/* ---- Reader-Mockup: heller Produkt-Screenshot auf dunklem Grund ---- */
.reader-mock {
    position: relative;
    z-index: 1;
    width: min(100%, 29rem);
    background: var(--surface-card);
    border-radius: 20px;
    overflow: hidden;
    text-align: left;
}
.reader-mock__bar {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1.25rem;
    background: var(--surface-card);
    border-bottom: 1px solid rgba(40, 28, 16, .07);
}
.reader-mock__name { font-family: var(--font-display-medium); font-size: 1.02rem; color: var(--text-strong); }
.reader-mock__meta { font-size: .72rem; color: var(--text-muted); }
.reader-mock__dots { margin-left: auto; display: flex; gap: .32rem; }
.reader-mock__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(40, 28, 16, .13); }
.reader-mock__page { padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.5rem, 3.2vw, 2rem) clamp(1.6rem, 3.4vw, 2.1rem); }
.reader-mock__theme { margin: 1.15rem 0 .8rem; font-family: var(--font-display-medium); color: var(--gold); font-size: 1.08rem; }
.reader-mock__verses + .reader-mock__theme { margin-top: 1.15rem; }
.reader-mock__page > .reader-mock__verses:first-child { margin-top: 0; }
.reader-mock__verses { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.reader-mock__verses li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.reader-mock__txt { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.6; color: #2c2925; }
.reader-mock__num {
    display: inline-grid; place-items: center;
    width: 1.55rem; height: 1.55rem; margin-top: .12rem;
    border-radius: 50%; background: rgba(160, 154, 108, .12);
    color: var(--gold); font-family: var(--font-body); font-size: .7rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.reader-mock__fn { color: var(--gold); font-weight: 700; font-size: .62em; vertical-align: super; margin-left: .08em; font-family: var(--font-body); }
.reader-mock__note {
    margin: 1.35rem 0 0; padding-top: 1rem;
    border-top: 1px solid rgba(40, 28, 16, .08);
    color: var(--text-muted); font-size: .82rem; line-height: 1.55;
}
.reader-mock__note sup { color: var(--gold); font-weight: 700; }

/* Mobil/Tablet: Reader führt; darunter die sechs Karten als einheitliche
   Zeilen – Icon links, Titel rechts (volle Breite, gleiche Größe). */
@media (max-width: 1023px) {
    .home-reader__stage { grid-template-columns: 1fr; gap: .7rem; align-items: stretch; justify-items: stretch; }
    .home-reader__mock { order: -1; margin-bottom: 1.1rem; justify-items: center; }
    .home-reader__feats { display: contents; }   /* ULs auflösen → Karten ins Raster */
    .rfeat {
        width: auto;
        grid-template-columns: auto 1fr;
        justify-items: start;
        align-items: center;
        text-align: left;
        gap: .9rem;
        padding: .95rem 1.15rem;
    }
}

/* ---- 3b. Showcase – großes Visual mit Kennzahlen ----------------------- */
/* Vollflächige Bild-Bande: Produktfoto randlos, Text darüber. Oben das
   Statement, unten die Eckdaten (Zahl zuerst). Ein dunkler Verlauf hält beide
   klar lesbar; die Mitte zeigt ungestört das Bild. */
.home-showcase {
    /* Boxed-Band: der Abschnitt liefert nur den vertikalen Rhythmus, das Bild
       sitzt darin als auf die Containerbreite begrenzte Box (nicht volle Breite). */
    padding-block: clamp(4.5rem, 9vw, 7rem);
}
/* Das Bildband ist auf die globale Containerbreite begrenzt und abgerundet. */
.home-showcase__inner {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: clamp(24rem, 52vh, 34rem);
    display: flex;
    align-items: center;
    padding: clamp(1.8rem, 4vw, 3rem);
    border-radius: clamp(18px, 2.2vw, 26px);
    /* Bild in voller Deckkraft, ohne Overlay; Fallback-Ton dahinter. */
    background: url("../images/background.webp") center / cover no-repeat;
    background-color: #14100b;
}
/* Mobil/Tablet: eigenes Hochformat-Bild. */
@media (max-width: 768px) {
    .home-showcase__inner { background-image: url("../images/background-mobile.webp"); }
}
/* Weiße Box links – der Text liegt darin, das Bild bleibt rundherum sichtbar. */
.home-showcase__panel {
    width: min(100%, 33rem);
    display: grid;
    gap: clamp(1.6rem, 3vw, 2.4rem);
    padding: clamp(1.8rem, 3.5vw, 2.6rem);
    background: var(--surface-card);
    border-radius: 20px;
    box-shadow: 0 46px 90px -38px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .14);
}
.home-showcase__head { text-align: left; }
.home-showcase__eyebrow {
    margin: 0 0 .8rem; color: var(--gold);
    font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.home-showcase__head h2 {
    margin: 0; font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em;
    color: var(--text-strong);
}
/* Eckdaten 2×2: Zahl zuerst, dann Haarlinie, Label, Erläuterung */
.home-showcase__stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.4rem, 3vw, 1.9rem) clamp(1.4rem, 3vw, 2.2rem);
}
.home-showcase__stat { display: grid; align-content: start; }
/* Icon + Zahl in EINER Zeile (Icon links neben der Zahl). */
.home-showcase__metric { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.home-showcase__ic {
    flex: none;
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--gold);
}
.home-showcase__ic svg { width: 1.25rem; height: 1.25rem; }
.home-showcase__num {
    min-width: 0;
    font-family: var(--font-display);
    /* Kleiner als zuvor, damit Icon + Zahl nebeneinander passen. */
    font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1;
    white-space: nowrap;
    color: var(--gold);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.home-showcase__rule { height: 1px; background: rgba(40, 28, 16, .14); margin: .7rem 0; }
.home-showcase__label {
    color: var(--text-strong); font-size: .8rem; font-weight: 600;
    /* Engere Laufweite, damit „VERSANDLÄNDER" o. ä. auf Mobil nicht umbricht. */
    letter-spacing: .02em; text-transform: uppercase;
}
.home-showcase__desc {
    margin-top: .45rem; max-width: 24ch;
    color: var(--text-muted); font-size: .88rem; line-height: 1.5;
}
@media (max-width: 760px) {
    .home-showcase__inner { min-height: 0; }
    .home-showcase__panel { width: 100%; }
}
@media (max-width: 430px) {
    /* Auch auf kleinen Phones zweispaltig (2×2) statt gestapelt. */
    .home-showcase__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .9rem; }
    .home-showcase__desc { font-size: .82rem; max-width: none; }
    /* Enger gerechnet, damit Icon + Zahl in der schmalen Spalte einzeilig bleiben. */
    .home-showcase__metric { gap: .4rem; }
    .home-showcase__ic { width: 2rem; height: 2rem; border-radius: 10px; }
    .home-showcase__ic svg { width: 1.05rem; height: 1.05rem; }
    .home-showcase__num { font-size: 1.5rem; }
    /* Label auf schmalen Phones noch enger + kleiner – bleibt einzeilig. */
    .home-showcase__label { font-size: .72rem; letter-spacing: 0; }
}

/* ---- 4. Lesen & Hören – geteiltes Paneel -------------------------------- */
.home-xp-section { background: transparent; }
.home-xp__head { display: grid; gap: 1.2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.home-xp__head-copy { max-width: 40rem; }
.home-xp__head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.18; }
.home-xp__fact {
    max-width: 52ch;
    margin: .9rem 0 0;
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.7;
}
@media (min-width: 880px) {
    .home-xp__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .home-xp__head .btn-cta { margin-bottom: .3rem; }
}

.home-xp {
    display: grid;
    overflow: hidden;
    border-radius: var(--home-radius-lg);
    background: var(--surface-card);
}
/* Trennlinie zwischen „Lesen" und „Hören" (auf weißem Grund). */
.home-xp__panel + .home-xp__panel { border-top: 1px solid color-mix(in srgb, var(--secondary) 10%, transparent); }
.home-xp__panel {
    display: grid;
    gap: .65rem;
    align-content: start;
    padding: clamp(1.8rem, 4vw, 3rem);
}
.home-xp__panel h3 { display: flex; align-items: center; gap: .65rem; font-size: 1.35rem; }
.home-xp__soon {
    padding: .22rem .6rem;
    border-radius: 999px;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.home-xp__panel p { max-width: 46ch; color: var(--text-muted); line-height: 1.7; }

/* Lesen: abstrahierte Textzeilen mit Vers-Ring */
.home-xp__lines { display: grid; gap: .6rem; max-width: 17rem; margin-bottom: 1.2rem; }
.home-xp__lines i {
    width: var(--w, 100%);
    height: 4px;                /* gleiche Stärke wie die Hören-Wellenform */
    border-radius: 2px;
    background: color-mix(in srgb, var(--secondary) 14%, var(--surface-mix));
    transform-origin: left center;
    /* Gleiche Anmutung wie „Hören": weicher Scale-Puls, gleiches Timing/Easing. */
    animation: home-xp-pulse 1.8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .16s);
}
@keyframes home-xp-pulse {
    0%, 100% { transform: scaleX(.62); }
    50%      { transform: scaleX(1); }
}
.home-xp__lines i:first-child { background: var(--gold); }

/* Hören: stille Wellenform in Gold */
.home-xp__wave {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 56px;
    margin-bottom: 1.2rem;
}
.home-xp__wave i {
    width: 4px;
    height: var(--h, 50%);
    border-radius: 2px;
    background: var(--gold);
    transform-origin: bottom;
    animation: home-xp-wave 1.8s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes home-xp-wave {
    0%, 100% { transform: scaleY(.55); }
    50%      { transform: scaleY(1); }
}


@media (min-width: 880px) {
    .home-xp { grid-template-columns: 1fr 1fr; }
    .home-xp__panel { padding-block: clamp(1.8rem, 4vw, 3rem); }
    .home-xp__panel + .home-xp__panel { border-top: 0; border-left: 1px solid color-mix(in srgb, var(--secondary) 10%, transparent); }
}

/* ---- 5. Kostenlose Bestellung – dunkle Buch-Bühne ------------------------ */
.home-order__plate {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.6rem, 5vw, 4.5rem);
    background: transparent;
    border-radius: var(--radius-xl);
}
.home-order__book { margin: 0; display: grid; justify-items: center; }
.home-order__cover {
    width: min(15rem, 70%);
    border-radius: 4px 10px 10px 4px;
    box-shadow:
        6px 6px 0 -2px #E9E7E2,
        12px 12px 0 -4px #DDDAD3,
        0 34px 50px -30px rgba(0, 0, 0, .8);
    transform: rotate(-2.5deg);
    transition: transform .45s var(--ease-out-soft);
}
.home-order__plate:hover .home-order__cover { transform: rotate(0deg) translateY(-6px); }
.home-order__book::after {
    content: "";
    display: block;
    width: 62%;
    height: 2px;
    margin-top: 1.6rem;
    background: var(--gold);
}
.home-order__copy h2 {
    max-width: 24ch;
    margin-bottom: 1.4rem;
    color: var(--text-strong);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.22;
}
.home-order__checks {
    list-style: none;
    display: grid;
    gap: .65rem;
    margin: 0 0 1.3rem;
    padding: 0;
}
.home-order__checks li {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    color: var(--text-default);
    font-family: var(--font-display-medium);
    font-weight: 500;
    font-size: 1.15rem;
}
.home-order__checks li::before { content: "✓"; color: var(--gold); font-weight: 700; }
.home-order__note { margin-bottom: 1.7rem; color: var(--text-muted); font-size: .95rem; }

@media (min-width: 880px) {
    .home-order__plate { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
/* Fokusringe auf der dunklen Platte: Tinte wäre unsichtbar – heller Steinton. */
.home-order__plate :focus-visible,
.home-order__plate .btn-cta:focus-visible { outline-color: var(--secondary-soft); }

/* ---- 6. Unterstütze die Verbreitung – Regal-Bühne ------------------------- */
.home-support__inner {
    display: grid;
    justify-items: center;
    text-align: center;
}
.home-support__lead {
    max-width: 46ch;
    margin: 0 auto;
    color: var(--text-default);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.65;
}
.home-support__chips {
    display: flex;
    gap: .3rem;
    margin-top: clamp(1.8rem, 4vw, 2.6rem);
    padding: .3rem;
    background: var(--bg-page);
    border-radius: 999px;
}
.home-support__chips button {
    min-height: 42px;
    padding: .45rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.home-support__chips button:hover { color: var(--text-strong); }
.home-support__chips button[aria-pressed="true"] { background: var(--gold); color: #fff; }

/* Das Regal: Buchrücken wachsen auf einer Standlinie */
.home-support__stage {
    display: grid;
    align-items: end;
    width: min(100%, 32rem);
    min-height: 110px;
    margin-top: 1.6rem;
    border-bottom: 2px solid var(--text-strong);
}
.home-support__books {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
}
.home-support__books i {
    width: 10px;
    height: 26px;
    border-radius: 2px 2px 0 0;
    background: var(--gold);
    opacity: 0;
    transform: translateY(6px);
    animation: home-book-in .35s var(--ease-out-soft) forwards;
    animation-delay: var(--bd, 0s);
}
.home-support__books i:nth-child(5n) { height: 22px; }
.home-support__books i:nth-child(3n) { height: 30px; }
@keyframes home-book-in {
    to { opacity: 1; transform: none; }
}
.home-support__books .home-support__more {
    align-self: center;
    margin-left: .4rem;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 600;
}
.home-support__eq {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    color: var(--text-strong);
}
.home-support__eq strong { color: var(--gold); font-weight: 500; }

.home-support__facts { display: grid; justify-items: center; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.home-support__enable { margin-bottom: .7rem; color: var(--text-muted); font-size: .95rem; }
.home-support__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 2.2rem;
    margin: 0 0 1.4rem;
    padding: 0;
}
.home-support__list li { display: flex; gap: .6rem; color: var(--text-default); }
.home-support__list li::before { content: "–"; color: var(--gold); font-weight: 700; }
.home-support__every {
    margin-bottom: 1.6rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--text-strong);
}

/* ---- 9. Dark Mode (Lese-Nachtmodus) --------------------------------------
   Die Startseite definiert eigene Seiten-Token (--home-*). Im Dunkelmodus auf
   die theme-fähigen Marken-Token aus style.css abbilden, damit Flächen, Text
   und Linien automatisch mitwechseln. Hartkodierte Flächen oben nutzen bereits
   die --surface-*-Token; hier nur, was Token allein nicht abdecken. */
html[data-theme="dark"] .page-index {
    --home-primary: var(--text-strong);
    --home-primary-hover: var(--text-strong);
    --home-border:  var(--surface-line);
    --home-border-strong: var(--border);
    --home-glow: #6E89A8;            /* Ambient-Schein gedämpft auf Dunkel */
    --home-glow-tint: rgba(110, 137, 168, .14);
}
/* Seitengrund folgt der Navy-Schwarz-Leinwand (var(--bg-page) = #0E141C). */
html[data-theme="dark"] .page-index #main { background: transparent; }
html[data-theme="dark"] .page-index .home-hero {
    background: linear-gradient(180deg, #18222F 0%, var(--bg-page) 60%);   /* ohne Gold */
}
/* Gestapelte Reasons-Karten: dunkle Kartenfläche (var(--surface-card)) plus
   feine Haarlinie, damit sich übereinander liegende Karten auf dunklem Grund
   sauber abheben (sonst Dunkel-auf-Dunkel ohne Kante). */
html[data-theme="dark"] .page-index .scard {
    border: 1px solid var(--surface-line);
}
/* Glas-Feature-Karten auf der Navy-Bande: dunkle Karte braucht helle Kante,
   Icon/Titel auf Textfarbe heben (Sekundär-Steel wäre zu kontrastarm). */
html[data-theme="dark"] .page-index .rfeat { border-color: var(--surface-line); }
html[data-theme="dark"] .page-index .rfeat__icon,
html[data-theme="dark"] .page-index .rfeat__title { color: var(--text-strong); }

/* „Lesen & Hören“-Bande folgt dem Seitengrund. */
html[data-theme="dark"] .page-index .home-xp-section { background: var(--bg-page); }
/* Paper-Sektionen → theme-fähige Paper-Fläche statt hartem Schwarz. */
html[data-theme="dark"] .page-index .section--paper { background: var(--bg-alt); }
/* Bestell-Platte: dezent erhöhte Fläche + Haarlinie statt transparent. */
html[data-theme="dark"] .page-index .home-order__plate {
    background: var(--surface-card);
    border: 1px solid var(--surface-line);
}
/* Segment-Pille: eingelassene Spur statt Seitengrund (sonst unsichtbar). */
html[data-theme="dark"] .page-index .home-support__chips { background: var(--surface-sunken); }

/* ---- Reader-Mockup: stellt im Dunkelmodus den dunklen Lese-Screen dar ----
   Flächen kommen bereits aus var(--surface-card); dunkle Tinten-Linien und der
   hartkodierte Verstext mussten auf theme-fähige Werte umgestellt werden. */
html[data-theme="dark"] .page-index .reader-mock__bar { border-bottom-color: var(--surface-line); }
html[data-theme="dark"] .page-index .reader-mock__dots i { background: color-mix(in srgb, #fff 16%, transparent); }
html[data-theme="dark"] .page-index .reader-mock__txt { color: var(--text-default); }
html[data-theme="dark"] .page-index .reader-mock__note { border-top-color: var(--surface-line); }

/* Showcase-Panel über dem Foto: dunkle Tinten-Haarlinie aufhellen. */
html[data-theme="dark"] .page-index .home-showcase__rule { background: var(--surface-line); }

/* Buchseiten-Faces (illustriertes Buch): die hellen gebänderten Seitenschnitte
   würden auf Dunkel grell wirken – auf gedämpfte, dunklere Bänder umstellen und
   den Schlagschatten weicher setzen. Fläche bleibt hell (es ist gedrucktes
   Papier), nur die Tiefen-Bänder folgen der Nacht. */
html[data-theme="dark"] .page-index .bookflip__face {
    box-shadow:
        0 34px 60px -28px rgba(0, 0, 0, .7),
        0 6px 16px -6px rgba(0, 0, 0, .45),
        4px 2px 0 -1px #20262B,
        8px 5px 0 -1px #171C20,
        12px 8px 0 -2px #20262B,
        16px 11px 0 -2px #171C20,
        20px 14px 0 -3px #20262B;
}

/* ---- 10. Responsive ------------------------------------------------------ */
/* Headline nur auf Tablet/Mobil umbrechen – Desktop bleibt einzeilig. */
@media (max-width: 860px) {
    /* Mobil/Tablet: „Entdecke“ in Zeile 1, „den Koran“ in Zeile 2 – etwas größer. */
    .home-hero__title { white-space: normal; font-size: clamp(3.7rem, 12vw, 5rem); }
    .home-hero__title-accent { display: block; }
}

/* Tablet: kompakteres, flacheres Display – Seiten bleiben groß. */
@media (max-width: 960px) {
    .home-hero__cover--front { --cw: 21rem; }
    .home-hero__cover--l1 { --cw: 19.5rem; --x: -9.5rem;  --ry: 18deg; }
    .home-hero__cover--r1 { --cw: 19.5rem; --x: 9.5rem;   --ry: -18deg; }
    .home-hero__cover--l2 { --cw: 18rem;   --x: -16.5rem; --ry: 28deg; }
    .home-hero__cover--r2 { --cw: 18rem;   --x: 16.5rem;  --ry: -28deg; }
}
@media (max-width: 879px) {
    .home-hero__inner { padding-top: var(--hero-gap); }
    .home-hero__copy { max-width: 40rem; }
    .home-book-scene { width: min(100%, 27rem); }
    .home-hero__scrollcue { display: none; }
}

/* Mobil: Cover dominant, die Seiten lugen knapp dahinter hervor. */
@media (max-width: 620px) {
    .home-hero__covers { perspective: 1200px; margin-bottom: clamp(-3rem, -4vh, -5rem); }
    .home-hero__cover--front { --cw: 16rem; }
    .home-hero__cover--l1 { --cw: 14.5rem; --x: -4.6rem; --ry: 22deg; --s: 1; --o: .96; }
    .home-hero__cover--r1 { --cw: 14.5rem; --x: 4.6rem;  --ry: -22deg; --s: 1; --o: .96; }
    .home-hero__cover--l2 { --cw: 13.5rem; --x: -8rem;   --ry: 33deg; --s: 1; --o: .8; }
    .home-hero__cover--r2 { --cw: 13.5rem; --x: 8rem;    --ry: -33deg; --s: 1; --o: .8; }
}

@media (max-width: 560px) {
    /* Buttons füllen zusammen die volle Breite – je 50 %, nebeneinander.
       Copy auf volle Breite ziehen (sonst schrumpft die zentrierte Spalte auf
       ihren Inhalt und die Buttons werden zu schmal). */
    .home-hero__copy { width: 100%; }
    .home-hero__ctas { flex-direction: row; flex-wrap: nowrap; gap: .6rem; }
    .home-hero__ctas .btn-cta { flex: 1 1 0; min-width: 0; padding-inline: .85rem; font-size: .95rem; line-height: 1.2; text-align: center; }
}

/* Sehr niedrige Viewports (z. B. Querformat): Hero nicht hart auf 100vh kappen,
   damit Headline & Buttons nie abgeschnitten werden. */
@media (max-height: 640px) {
    .home-hero { height: auto; min-height: 100vh; min-height: 100dvh; }
}

/* Reduzierte Bewegung: Schwebe-/Wellen-Animationen abschalten. */
@media (prefers-reduced-motion: reduce) {
    .book3d,
    .home-xp__wave i,
    .home-xp__lines i,
    .home-hero__scrollcue span { animation: none !important; }
    .book3d__volume, .book3d__cover, .book3d__cast, .book3d__page { transition: none !important; }
}

/* =========================================================================
   Scroll- & Eintritts-Animationen (Startseite) – performant & kompositor-nah.
   Nur transform/opacity, abgesichert über @supports + prefers-reduced-motion,
   damit es auf Desktop wie Mobil flüssig bleibt.
   ========================================================================= */

/* ---- Hero: ruhiger, gestaffelter Eintritt beim Laden ------------------- */
@media (prefers-reduced-motion: no-preference) {
    .home-hero__title,
    .home-hero__lead,
    .home-hero__ctas,
    .home-hero__covers {
        animation: home-rise-in var(--dur-media) var(--ease-out-soft) both;
    }
    .home-hero__title  { animation-delay: .08s; }
    .home-hero__lead   { animation-delay: .20s; }
    .home-hero__ctas   { animation-delay: .30s; }
    /* Cover kommen zuletzt und schweben danach unmerklich weiter: der Eintritt
       nutzt translate, das Schweben transform – beide komponieren miteinander
       (und mit dem Schließen, das auf den einzelnen Covern liegt). */
    .home-hero__covers {
        animation: home-rise-in var(--dur-media) var(--ease-out-soft) .42s both,
                   home-covers-float 11s var(--ease-in-out) 1.6s infinite;
    }
    @keyframes home-rise-in {
        from { opacity: 0; translate: 0 20px; }
        to   { opacity: 1; translate: 0 0; }
    }
    @keyframes home-covers-float {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-6px); }
    }
}

/* ---- Scroll-getriebene Parallaxe (nur mit Scroll-Timeline-Support) ------ */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        /* Buch-Display schließt sich beim Scrollen durch den Hero zu einem
           Stapel: Seiten rücken nach innen, Drehung → 0, treten in die Tiefe
           zurück und werden blasser. Das Cover bleibt der stabile Anker und
           wird leicht größer. */
        .home-hero__cover {
            animation: hero-cover-close linear both;
            animation-timeline: scroll(root);
            animation-range: 0 78vh;
        }
        .home-hero__cover--front { animation-name: hero-cover-close-front; }
        @keyframes hero-cover-close {
            to {
                transform: translateX(var(--x-end, 0)) rotateY(0deg) scale(var(--s-end, 1));
                opacity: var(--o-end, 1);
            }
        }
        @keyframes hero-cover-close-front {
            to { transform: translateX(0) rotateY(0deg) scale(1.05); }
        }
    }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* (Showcase-Hintergrund nutzt jetzt background-attachment: fixed –
           kein Transform-Parallax mehr, da Transforms fixe Hintergründe brechen.) */
        /* Projekt-Buch: zarte Tiefen-Parallaxe (translate komponiert mit dem
           transform-Schweben des 3D-Buchs darin). */
        .home-project__visual {
            animation: home-project-parallax linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }
        @keyframes home-project-parallax {
            from { translate: 0 4%; }
            to   { translate: 0 -4%; }
        }
    }
}

/* ---- Sanfte Hover-Mikrointeraktionen (leises Anheben + weicher Schatten) - */
@media (prefers-reduced-motion: no-preference) {
    .home-showcase__stat { transition: transform var(--dur-fast) var(--ease-hover); }
    .home-showcase__stat:hover { transform: translateY(-3px); }

    /* „Lesen & Hören“-Block: nur ein dezentes Anheben, ohne Schatten. */
    .home-xp { transition: transform var(--dur-fast) var(--ease-hover); }
    .home-xp:hover { transform: translateY(-3px); }
}

/* Dunkelmodus: Navy-CTA-Band nutzt Tinten-/Canvas-Flächen statt der Akzentfarbe
   (die im Nachtmodus zu Hellblau wird → sonst helles Band auf dunkler Seite). */
html[data-theme="dark"] .home-reader {
    background: linear-gradient(152deg, var(--surface-ink) 0%, var(--bg-page) 100%);
}