/* =========================================================================
   Startseite – Premium-Redesign ("Literary Warm")
   Nutzt ausschließlich die bestehenden Marken-Token (Farben, Fraunces/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: var(--accent);
    --home-primary-hover: var(--accent-hover);
    --home-radius:  var(--radius-lg);
    --home-radius-lg: var(--radius-lg);
    --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: var(--glow);
    --home-glow-soft: var(--glow-soft);
    --home-glow-tint: color-mix(in srgb, var(--glow) 16%, transparent);
}
@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: 600;
    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:disabled,
.btn-cta[aria-disabled="true"],
.btn-cta.is-disabled { opacity: .45; pointer-events: none; }
.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%; }
/* Hover NUR bei echtem Zeiger (Desktop): auf Touch „klebt" :hover nach dem
   Antippen und würde Buttons dauerhaft umfärben. */
@media (hover: hover) {
    .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: var(--gold-ink);
}
@media (hover: hover) {
    .btn-cta--primary:hover {
        background: var(--gold-hover);
        color: var(--gold-ink);
        transform: translateY(-2px);
    }
}

.btn-cta--outline {
    background: var(--surface-card);
    border-color: transparent;
    color: var(--secondary);
}
@media (hover: hover) {
    .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(2.75rem, 6vh, 4rem);   /* kompakter: weniger Leerband zwischen Nav und Titel */
    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. */
/* Dokumentierte Regel: Auf Goldbändern invertiert der Primär-Button bewusst zu Weiß – kein Defekt. */
.home-hero .btn-cta--primary { background: var(--text-on-dark); color: var(--secondary); }
.home-hero .btn-cta--outline { background: transparent; border-color: color-mix(in srgb, var(--text-on-dark) 75%, transparent); color: var(--text-on-dark); }
/* Beide Hero-Buttons: IDENTISCHER Hover – weiß füllen, Navy-Text, leicht
   anheben. NUR bei echtem Zeiger (Desktop): auf Touch klebt :hover nach dem
   Tippen und die Schrift-/Hintergrundfarbe bliebe dauerhaft verändert. */
@media (hover: hover) {
    .home-hero .btn-cta--primary:hover,
    .home-hero .btn-cta--outline:hover {
        background: var(--text-on-dark);
        border-color: var(--text-on-dark);
        color: var(--secondary);
        transform: translateY(-2px);
    }
}
/* Dunkelmodus: --secondary ist jetzt Weiß – der weiße Hero-Button braucht dunkle
   Schrift statt der (nun weißen) Sekundärfarbe. */
html[data-theme="dark"] .home-hero .btn-cta--primary { color: var(--bg-page); }
@media (hover: hover) {
    html[data-theme="dark"] .home-hero .btn-cta--primary:hover,
    html[data-theme="dark"] .home-hero .btn-cta--outline:hover { color: var(--bg-page); }
}
.btn-cta__lead { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; }
.btn-cta__lead svg { width: 100%; height: 100%; }

/* 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.4rem, 2.5vw, 1.9rem);
    color: var(--text-on-dark);
    font-family: var(--font-display-medium);
    font-weight: 460;                           /* etwas kräftiger als die übrigen Titel (400) */
    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: var(--text-on-dark); }      /* komplett weiß */

.home-hero__lead {
    max-width: 40rem;
    margin: 0 auto;
    color: color-mix(in srgb, var(--text-on-dark) 97%, transparent);
    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 */
    /* Hinweis: Der frühere clamp(-10rem, -11vh, -13rem) war invertiert (min > max)
       und lief damit konstant auf -10rem hinaus. Gültige Reihenfolge + kleinerer
       Anschnitt → das Buch rückt höher ins Sichtfeld. */
    margin-bottom: clamp(-6rem, -6vh, -3rem);    /* unten leicht 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,
        color-mix(in srgb, var(--gold) 50%, transparent),
        color-mix(in srgb, var(--gold) 20%, transparent) 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: 0;
    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: -16.5rem; --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: 16.5rem;  --ry: -18deg; --s: 1; --o: 1; --zi: 4;
    --x-end: 2.6rem;  --s-end: .92; --o-end: .72;
}

/* Interaktive Buch-Rotation: 300vh-Scrollstrecke, sticky 100vh-Bühne.
   Der Scrollfortschritt (bzw. horizontales Ziehen) steuert die Videoposition
   1:1 (home.js) – kein Autoplay, kein Loop, kein Player. Das Video hat einen
   rein weißen Hintergrund; multiply färbt Weiß exakt auf den Seitenhintergrund
   (die Bühne malt ihn als Backdrop). */
.book-scrub { height: 300vh; }
.book-scrub__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: var(--bg-page);   /* Backdrop für multiply + deckt Nachbarn ab */
    touch-action: pan-y;          /* horizontale Gesten erreichen unser JS */
    cursor: grab;
}
.book-scrub__stage.is-dragging { cursor: grabbing; }
/* Bühnen-Inhalt: Buch links, Projekt-Text rechts (wie das frühere Grid). */
.book-scrub__inner {
    display: grid;
    gap: clamp(2.4rem, 5vw, 4.5rem);
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) {
    .book-scrub__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.book-scrub__video {
    width: min(78vh, 100%, 40rem);
    justify-self: center;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    mix-blend-mode: multiply;
    pointer-events: none;         /* Gesten landen auf der Bühne */
    user-select: none;
    -webkit-user-drag: none;
}
/* Mobil: ungepinnt im normalen Fluss (Text + Video teilen sich keine 100svh);
   der Scrub läuft dort über den Viewport-Durchlauf des Abschnitts (home.js). */
@media (max-width: 879px) {
    .book-scrub { height: auto; }
    .book-scrub__stage { position: static; height: auto; padding-block: clamp(1rem, 4vw, 2rem); }
    .book-scrub__video { width: min(100%, 27rem); }
}
/* Dunkles Theme: eigene Videoquelle mit rein schwarzem Hintergrund –
   screen lässt Schwarz exakt im dunklen Seitenhintergrund aufgehen
   (Spiegelbild des Multiply im hellen Theme). Solange die Dunkel-Quelle
   (noch) nicht geladen ist, dient die Doppel-Inversion der hellen Quelle
   als Fallback. */
html[data-theme="dark"] .book-scrub__video {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(180deg);   /* Fallback: helle Quelle invertiert */
}
html[data-theme="dark"] .book-scrub__video.has-dark-source {
    filter: none;                            /* echte Dunkel-Quelle aktiv */
}


/* Scroll-Hinweis */
.home-hero__scrollcue {
    position: relative;
    z-index: 1;
    align-self: center;
    margin-bottom: 1.4rem;
    display: grid;
    place-items: start center;
    width: 1.7rem;
    height: 2.9rem;
    padding-top: .45rem;
    border-radius: var(--radius-full);
    border: 2px solid color-mix(in srgb, var(--secondary) 60%, transparent);
    background: color-mix(in srgb, var(--secondary) 8%, transparent);
    backdrop-filter: blur(2px);
    transition: border-color .2s var(--ease-hover), background .2s var(--ease-hover), transform .25s var(--ease-out-soft);
}
.home-hero__scrollcue:hover {
    border-color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 16%, transparent);
    transform: translateY(3px);
}
.home-hero__scrollcue span {
    width: 4px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--secondary);
    animation: home-scrollcue 1.9s var(--ease-out-soft) infinite;
}
@keyframes home-scrollcue {
    0%   { transform: translateY(0);    opacity: 0; }
    25%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(11px); 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: var(--radius-full);
    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: var(--radius-lg);
    /* Rahmen in BEIDEN Themes reservieren (im Hellmodus transparent) – der
       Dunkelmodus färbt ihn nur ein, damit die Kartenhöhe identisch bleibt
       (kein Höhenunterschied zwischen Hell/Dunkel). */
    border: 1px solid transparent;
    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: var(--radius-md);
    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: var(--radius-md); }
}
/* Ohne Bewegung: kein Stapel, schlichte Liste */
@media (prefers-reduced-motion: reduce) {
    .scard { position: relative; top: auto; }
}

/* ---- 3. Über das Projekt – Offenbarungs-Faden -------------------------- */
.home-project__photo { --ph-ratio: 4 / 5; width: 100%; max-width: 26rem; }
/* 3D-Buch im Projekt-Abschnitt (aus dem Hero hierher verschoben). */
@media (min-width: 960px) {
    /* Buch links, Text rechts (Reihenfolge im Markup bleibt: Text zuerst,
       damit auf Mobil der Abschnittstitel führt). */
    .home-project__photo { max-width: none; justify-self: end; }
}

/* 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)
   und zentriert ausrichten (nur Mobil). */
@media (max-width: 640px) {
    .home-project__copy { text-align: center; }
    .home-project__mission { font-size: 1.35rem; line-height: 1.4; margin-inline: auto; }
    .home-project__cols p { margin-inline: auto; }
}

/* 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);
    /* Durchgehendes Marken-Navy (kein Verlauf). */
    background: var(--secondary);
    color: color-mix(in srgb, var(--text-on-dark) 94%, transparent);
}
.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: var(--text-on-dark);
}
.home-reader__sub {
    margin: 1.1rem 0 0; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
    line-height: 1.5; color: color-mix(in srgb, var(--text-on-dark) 78%, transparent);
}

/* 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: var(--radius-lg);
    /* Weiße Karte auf dem Navy-Grund – Icon und Titel in Navy (Sekundärfarbe). */
    background: var(--surface-card);
    transition: transform 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: var(--radius-lg);
    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 color-mix(in srgb, var(--paper-sepia) 7%, transparent);
}
.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: var(--radius-full); background: color-mix(in srgb, var(--paper-sepia) 13%, transparent); }
.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: var(--text-strong); }
.reader-mock__num {
    display: inline-grid; place-items: center;
    width: 1.55rem; height: 1.55rem; margin-top: .12rem;
    border-radius: var(--radius-full); background: color-mix(in srgb, var(--gold) 12%, transparent);
    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 color-mix(in srgb, var(--paper-sepia) 8%, transparent);
    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: var(--bg-inverse);
}
/* 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: var(--radius-lg);
}
.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: var(--radius-md);
    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: color-mix(in srgb, var(--paper-sepia) 14%, transparent); 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: var(--radius-sm); }
    .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: var(--radius-full);
    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: var(--radius-full);
    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: var(--radius-full);
    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;
    border-right: 8px solid var(--page-edge);
    border-bottom: 7px solid color-mix(in srgb, var(--page-edge) 86%, var(--surface-mix));
    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: 400;
    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: var(--radius-full);
}
.home-support__chips button {
    min-height: 42px;
    padding: .45rem 1.15rem;
    border: 0;
    border-radius: var(--radius-full);
    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: var(--gold-ink); }

/* 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: var(--radius-full) var(--radius-full) 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-tint: color-mix(in srgb, var(--glow) 14%, transparent);
}
/* Seitengrund folgt der Navy-Leinwand (var(--bg-page)). */
html[data-theme="dark"] .page-index #main { background: transparent; }
html[data-theme="dark"] .page-index .home-hero {
    background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-page) 60%);   /* ohne Gold */
}
/* Rotierendes Marken-Wasserzeichen im Dunkelmodus dezenter (weiß auf dunkel). */
html[data-theme="dark"] .home-hero::before { opacity: .04; }
/* Der warme Kupfer-/Gold-Fokusschein hinter dem Buch passt nicht zur Navy-Nacht –
   auf Dunkel entfernen; das Cover liegt flach über dem Verlaufsgrund (keine Schatten). */
html[data-theme="dark"] .page-index .home-hero__covers-glow { display: none; }
/* 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-color: var(--surface-line);   /* Breite bereits im Basis-Rahmen reserviert – nur einfärben */
}
/* 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 hebt sich als alternierende Sekundärfläche
   vom Seitengrund der Nachbarabschnitte ab – Sektionen wechseln,
   liegen nicht als ein durchgehender Block. */
html[data-theme="dark"] .page-index .home-xp-section { background: var(--bg-alt); }
/* 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, var(--text-on-dark) 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.
   Fläche bleibt hell (es ist gedrucktes Papier), nur die flachen Tiefen-Bänder
   folgen der Nacht; keine Elevations-Schatten. */
/* Seitenschnitt folgt im Nachtmodus automatisch dem --page-edge-Token. */

/* ---- 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: -13.5rem;  --ry: 18deg; }
    .home-hero__cover--r1 { --cw: 19.5rem; --x: 13.5rem;   --ry: -18deg; }
}
@media (max-width: 879px) {
    .home-hero__inner { padding-top: var(--hero-gap); }
    .home-hero__copy { max-width: 40rem; }
    .home-hero__scrollcue { display: none; }
}

/* Mobil: Cover dominant, die Seiten lugen knapp dahinter hervor. */
@media (max-width: 620px) {
    /* Ebenfalls: vorheriger clamp(-3rem, -4vh, -5rem) war invertiert (konstant -3rem). */
    .home-hero__covers { perspective: 1200px; margin-top: -.6rem; margin-bottom: clamp(-2.5rem, -3vh, -1.5rem); }
    .home-hero__cover--front { --cw: 16rem; }
    .home-hero__cover--l1 { --cw: 14.5rem; --x: -7rem; --ry: 22deg; --s: 1; --o: .96; }
    .home-hero__cover--r1 { --cw: 14.5rem; --x: 7rem;  --ry: -22deg; --s: 1; --o: .96; }
}

@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.) */
    }
}

/* ---- 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: „Den Koran verstehen" bleibt durchgehende Navy-Tinten­fläche
   (kein Verlauf; --secondary würde im Nachtmodus zu Hellblau). */
html[data-theme="dark"] .home-reader {
    background: var(--surface-ink);
}
/* "Was diese Übersetzung auszeichnet": eigenes, ruhiges Nacht-Band. */
html[data-theme="dark"] .home-reasons {
    background: linear-gradient(152deg, var(--surface-ink) 0%, var(--bg-page) 100%);
}