/* ============================================================
   Philosophies in a Morgan — Stylesheet
   Dunkel, elegant, britisch. Messing/Gold-Akzent, Serifen-Display.
   ============================================================ */

/* ---------- Selbst gehostete Schriften (DSGVO-konform) ------ */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-400-italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: optional;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: optional;
}

/* ---------------------- Design-Tokens ----------------------- */
:root {
    --bg:        #0b0b0b;
    --bg-2:      #111111;
    --bg-3:      #161616;
    --ink:       #f5f2ea;      /* warmes Off-White */
    --ink-dim:   #b9b4a9;
    --ink-faint: #7d7970;
    --gold:      #b89b5e;      /* Messing/Gold, passend zur Cover-Folie */
    --gold-soft: #cdb583;
    --blue:      #4d7a99;      /* Midsummer-Blau, sparsamer Sekundärakzent */
    --line:      rgba(184,155,94,0.22);
    --line-soft: rgba(245,242,234,0.10);

    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --maxw: 1340px;
    --pad:  clamp(1.25rem, 4vw, 4rem);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------- Reset ---------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; -webkit-text-size-adjust: 100%; }
/* Auf Mobile ist die Nav niedriger -> kleinerer Anker-Offset (weniger Leerraum). */
@media (max-width: 768px) { html { scroll-padding-top: 4.75rem; } }
/* „Das Buch" soll enger unter der Nav landen (kleinerer Abstand als die übrigen
   Sektionen): Desktop ~10px, Mobile ~2px zwischen Nav-Unterkante und Sektionsanfang. */
#book { scroll-margin-top: -53px; }
@media (max-width: 768px) { #book { scroll-margin-top: -39px; } }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* App-artiges Verhalten: Text nicht markierbar, damit beim Klick
       kein Text-Cursor (I-Beam) erscheint und die Seite professionell
       wirkt. Formularfelder sind unten wieder ausgenommen. */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Eingabefelder bleiben markier- und beschreibbar (Text-Cursor nötig). */
input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0.01em;
}

::selection { background: var(--gold); color: #000; }

/* ---------------------- Wiederkehrend ----------------------- */
.eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.1rem;
    font-weight: 500;
}
.section__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    color: var(--ink);
    margin-bottom: 1.4rem;
}
.section__head {
    max-width: 780px;
    margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
    text-align: center;
}
.section__lead {
    color: var(--ink-dim);
    font-size: 1.08rem;
    max-width: 60ch;
    margin: 0 auto;
}

section { padding: clamp(3.25rem, 6vw, 5.5rem) var(--pad); position: relative; }

/* --------------------------- Buttons ------------------------ */
.btn {
    display: inline-block;
    padding: 1rem 2.4rem;
    border: 1px solid var(--gold);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--gold); color: #0b0b0b; }
.btn--gold { background: var(--gold); color: #0b0b0b; border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn--sm { padding: .62rem 1.3rem; font-size: .68rem; letter-spacing: .16em; }
.btn--full { width: 100%; text-align: center; }
.btn--disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ============================ NAV ========================== */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
    border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
    background: rgba(11,11,11,0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--line-soft);
}
.nav__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.1rem var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.nav__brand { display: flex; flex-direction: column; line-height: 1; }
.nav__brand-main { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; }
.nav__brand-sub  { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; }

.nav__links { display: flex; gap: 2rem; }
.nav__links a {
    font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
    position: relative; padding: .3rem 0; transition: color .3s; white-space: nowrap;
}
.nav__links a::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
    background: var(--gold); transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 1.1rem; }
.langtoggle { display: flex; align-items: center; gap: .35rem; }
.langtoggle__btn {
    background: none; border: none; color: var(--ink-faint); font-family: var(--sans);
    font-size: .78rem; letter-spacing: .1em; cursor: pointer; padding: .2rem; transition: color .3s;
}
.langtoggle__btn:hover { color: var(--ink); }
.langtoggle__btn.is-active { color: var(--gold); font-weight: 600; }
.langtoggle__sep { color: var(--ink-faint); }

/* Musik-Button (Fan-Song an/aus) – auf Desktop und Mobil in der Kopfleiste */
.nav__audio { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: .2rem; display: inline-flex; align-items: center; transition: color .3s; }
.nav__audio:hover { color: var(--ink); }
.nav__audio.is-playing { color: var(--gold); }
.nav__audio .nav__audio-on { display: none; }
.nav__audio.is-playing .nav__audio-on { display: block; }
.nav__audio.is-playing .nav__audio-off { display: none; }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav__burger span { width: 24px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Desktop: Nav-Links echt im Header zentrieren (Marke links, Aktionen rechts).
   Nur ab 901px, damit das mobile Vollbild-Overlay (position:fixed) unberührt bleibt. */
@media (min-width: 901px) {
    .nav__inner   { display: grid; grid-template-columns: 1fr auto 1fr; }
    .nav__brand   { grid-column: 1; justify-self: start; }
    .nav__links   { grid-column: 2; justify-self: center; }
    .nav__actions { grid-column: 3; justify-self: end; }
    /* Der Bestell-Button im Overlay ist nur fürs mobile Burger-Menü gedacht. */
    .nav__cta     { display: none; }
}

/* ============================ HERO ========================== */
.hero { height: 100svh; min-height: 620px; position: relative; overflow: hidden; display: flex; }
.hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
    z-index: 1;
}
.hero__overlay {
    position: relative; z-index: 4; margin: auto; text-align: center; padding: 6rem 1.25rem 4rem;
    max-width: 900px;
}
.hero::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.6)),
        linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.55) 100%);
}
/* Farbige Überblendung über dem Video (Farbe/Deckkraft aus dem Adminpanel). */
.hero__tint { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Dunkler Übergang am unteren Rand ins Zitat (Länge/Farbe/Stärke/Weichheit aus dem
   Adminpanel; das Verlaufs-CSS wird inline gesetzt). */
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; }
.hero__eyebrow {
    font-size: .74rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold-soft);
    margin-bottom: 1.6rem;
}
.hero__title {
    font-size: clamp(3.2rem, 9vw, 7rem); font-weight: 600; letter-spacing: .01em;
    text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
.hero__subtitle {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 3vw, 2rem);
    color: var(--ink); margin-top: 1.4rem;
}
.hero__author {
    margin-top: 2.4rem; font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-dim);
}
.hero__cta { margin-top: 2.6rem; }

.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 4; width: 40px; height: 34px; display: grid; place-items: center; }
/* Nach unten weisender Pfeil (Chevron aus zwei Kanten eines um 45° gedrehten
   Quadrats), der sanft nach unten wandert und ausfadet. */
.hero__scroll span { display: block; width: 13px; height: 13px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); animation: scrollarrow 1.8s var(--ease) infinite; }
@keyframes scrollarrow { 0% { opacity: 0; transform: rotate(45deg) translate(-5px, -5px); } 45% { opacity: 1; } 100% { opacity: 0; transform: rotate(45deg) translate(5px, 5px); } }

/* ======================= QUOTE / PHILOSOPHY ================= */
.quote { background: var(--bg); text-align: center; }
.quote__inner { max-width: 980px; margin: 0 auto; position: relative; }
.quote__mark { font-family: var(--serif); font-size: 8rem; line-height: .5; color: var(--gold); opacity: .35; display: block; height: 3rem; }
.quote__text { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.28; color: var(--ink); }
.quote__cite { margin-top: 2rem; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }

/* ============================ BOOK ========================== */
.book { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.book__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.book__cover img { width: 100%; border-radius: 2px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.book__blurb p { color: var(--ink-dim); margin-bottom: 1.1rem; }
.book__blurb p:first-child::first-letter { font-family: var(--serif); font-size: 3.2rem; float: left; line-height: .8; padding: .3rem .6rem .1rem 0; color: var(--gold); }

/* ============================ CARS ========================== */
.cars { background: var(--bg-2); }
/* In-Place-Slider: füllt die jeweilige Bildfläche (Autos/Autor). */
.reveal--inplace { position: absolute; inset: 0; aspect-ratio: auto; border-radius: inherit; }
.author__portrait { position: relative; }
.author__portrait:has(.reveal--inplace) { aspect-ratio: 3 / 2; }

/* ==================== AUTOS: Bento-Grid ==================== */
.bento {
    max-width: var(--maxw);
    margin: clamp(2rem, 5vw, 3.5rem) auto 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(150px, 16.5vw) minmax(150px, 16.5vw) minmax(240px, 26vw);
    grid-template-areas:
        "pf pf pf pf mid mid"
        "pf pf pf pf ap  ap"
        "road road road roof roof roof";
    gap: clamp(.5rem, 1vw, .9rem);
}
.bento__tile {
    position: relative; margin: 0; overflow: hidden;
    min-width: 0; min-height: 0;
    border-radius: 10px;
    background: #14110c;
    box-shadow: 0 16px 34px rgba(0,0,0,.38);
    -webkit-tap-highlight-color: transparent;
}
/* Anordnung: Plus Four groß oben-links, Midsummer + Apfel rechts gestapelt,
   Straße + Offen fahren unten über die volle Breite. */
.bento__tile--0 { grid-area: pf; }
.bento__tile--1 { grid-area: mid; }
.bento__tile--2 { grid-area: ap; }
.bento__tile--3 { grid-area: road; }
.bento__tile--4 { grid-area: roof; }

.bento__media { position: absolute; inset: 0; }
.bento__media > img,
.bento__media .reveal--inplace { position: absolute; inset: 0; width: 100%; height: 100%; }
.bento__media > img {
    object-fit: cover; display: block;
    transform: scale(var(--mscale, 1)); transform-origin: center;
    transition: transform .5s var(--ease);
    /* Auf eigene GPU-Ebene heben, damit die Skalierung nicht pro Frame neu
       gerastert wird (sonst Flimmern/Aliasing an Kanten). */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Der clippende Rahmen bekommt ebenfalls eine eigene Ebene – das glättet die
   abgerundeten Ecken während der Animation. */
.bento__tile { transform: translateZ(0); }
/* Bild-Zoom nur auf Geräten mit echtem Hover (nicht auf Touch – dort bliebe der
   Effekt „kleben"). */
@media (hover: hover) and (pointer: fine) {
    .bento__tile:hover .bento__media > img { transform: scale(calc(var(--mscale, 1) * 1.06)); }
}

/* Verlauf unten für die Lesbarkeit des Text-Overlays */
.bento__tile::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 34%, rgba(0,0,0,0) 62%);
}
/* Text on picture, unten-links im Bild bündig */
.bento__cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    pointer-events: none; text-align: left;
    padding: clamp(.9rem, 1.6vw, 1.5rem);
}
.bento__title {
    margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.08; color: #fff;
    font-size: clamp(1.15rem, 1.6vw, 1.55rem);
    text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.bento__tile--0 .bento__title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.bento__text {
    margin: .3rem 0 0; max-width: 40ch; line-height: 1.45; color: rgba(255,255,255,.85);
    font-size: clamp(.8rem, 1.05vw, .98rem);
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* Tablet: Plus Four oben, dann Midsummer+Apfel, dann Straße+Offen fahren.
   Erste Zeile (Plus Four, volle Breite) höher, damit das Auto beim Umbruch nicht
   abgeschnitten wird; die übrigen zwei Zeilen bleiben wie gehabt. */
@media (max-width: 860px) {
    .bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(260px, 52vw) minmax(150px, 30vw) minmax(150px, 30vw);
        grid-template-areas:
            "pf pf"
            "mid ap"
            "road roof";
    }
}
/* Mobile: eine Spalte, gestapelt */
@media (max-width: 520px) {
    .bento {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
        grid-auto-rows: minmax(190px, 56vw);
    }
    /* Ohne benannte Areas müssen die Kacheln frei platziert werden,
       sonst erzeugen die grid-area-Namen implizite Leerspalten. */
    .bento .bento__tile { grid-area: auto; }
}

/* ==================== REVEAL (Foto ↔ Tusche) =============== */
.gallery { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }
.reveal-pairs { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); }
.reveal {
    position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 3 / 2;
    user-select: none; touch-action: pan-y; cursor: ew-resize; background: #000;
}
.reveal__base { width: 100%; height: 100%; object-fit: cover; }
.reveal__top { position: absolute; inset: 0; width: var(--pos, 50%); overflow: hidden; border-right: 2px solid var(--gold); }
.reveal__top img { width: var(--reveal-w, 100%); max-width: none; height: 100%; object-fit: cover; }
.reveal__handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 44px; transform: translateX(-50%);
    display: grid; place-items: center; cursor: ew-resize;
}
.reveal__handle::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); }
.reveal__handle::after {
    content: '⟷'; position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center;
    background: var(--gold); color: #000; border-radius: 50%; font-size: 1rem; box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.reveal__handle:focus-visible { outline: none; }
.reveal__handle:focus-visible::after { box-shadow: 0 0 0 3px rgba(184,155,94,.5); }
.reveal__tag {
    position: absolute; bottom: 1rem; z-index: 2; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
    padding: .3rem .7rem; background: rgba(0,0,0,.55); color: var(--ink); border: 1px solid var(--line-soft); border-radius: 2px;
    pointer-events: none;
}
.reveal__tag--left  { left: 1rem; }
.reveal__tag--right { right: 1rem; }

/* ===================== KI-Hinweis-Badge ===================== */
.ai-badge {
    position: absolute; left: .55rem; bottom: .55rem; z-index: 6;
    display: inline-flex; align-items: center; gap: .3em;
    padding: .26em .5em; border-radius: 999px;
    font-family: var(--sans); font-size: .54rem; font-weight: 500;
    letter-spacing: .06em; line-height: 1; text-transform: uppercase;
    color: rgba(255,255,255,.82); background: rgba(10,10,10,.4);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    pointer-events: none; white-space: nowrap;
}
.ai-badge svg { flex: 0 0 auto; opacity: .6; }
.book__cover { position: relative; }
/* Reveal-Slider tragen unten die Foto/Tusche-Tags – Badge dort nach oben links. */
.reveal .ai-badge { bottom: auto; top: .55rem; }

/* ============================ VIDEO ========================= */
.videosec { background: var(--bg); text-align: center; }
.videosec__frame { position: relative; max-width: 1040px; margin: 0 auto; border-radius: 2px; overflow: hidden; box-shadow: 0 30px 90px -40px rgba(0,0,0,.9); background: #000; }
.videosec__frame video { width: 100%; display: block; }
/* Desktop: Video-Box auf 75 % der Breite (1040px → 780px) und oben/unten je 21 %
   des (hochkant aufgenommenen) Videos abschneiden – nur der mittlere 58%-Streifen
   bleibt sichtbar. 1080×1920 → sichtbar 1080×1113.6. */
@media (min-width: 861px) {
    .videosec__frame { max-width: 780px; aspect-ratio: 1080 / 1113.6; }
    .videosec__frame video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

/* ============================ AUTHOR ======================== */
.author { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.author__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.author__portrait > img { width: 100%; border-radius: 2px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.author__bio p { color: var(--ink-dim); margin-bottom: 1.1rem; }

/* ============================ PRE-ORDER ===================== */
.preorder { background: var(--bg-2); }
.preorder__inner { max-width: 660px; margin: 0 auto; text-align: center; }
.preorder__status { color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.4rem; margin-bottom: 2.5rem; }
/* Im Verkaufsmodus folgt direkt der Preis – Abstand dorthin verkleinern. */
.preorder__status:has(+ .priceinfo) { margin-bottom: .55rem; }

/* Stripe-Kauf-Buttons */
.buybuttons { margin: 0 auto 1.5rem; }
.buybuttons__label { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.buybuttons__row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.buybuttons__secure { margin-top: .9rem; font-size: .76rem; letter-spacing: .04em; color: var(--ink-faint); }
.buybuttons__or { position: relative; text-align: center; margin-top: 2.2rem; }
.buybuttons__or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-soft); }
.buybuttons__or span { position: relative; z-index: 1; background: var(--bg-2); padding: 0 1.1rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.preorder__form { text-align: left; display: grid; gap: 1.3rem; }
.field { display: grid; gap: .5rem; }
.field--row { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.field label, .consent span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.preorder__form input, .preorder__form select, .preorder__form textarea {
    background: var(--bg); border: 1px solid var(--line-soft); color: var(--ink);
    font-family: var(--sans); font-size: 1rem; padding: .9rem 1rem; border-radius: 2px; width: 100%;
    transition: border-color .3s;
}
.preorder__form input:focus, .preorder__form select:focus, .preorder__form textarea:focus { outline: none; border-color: var(--gold); }
.preorder__form textarea { resize: vertical; }
.consent { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.consent input { width: auto; margin-top: .2rem; accent-color: var(--gold); }
.consent span { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--ink-dim); line-height: 1.5; }
.preorder__note { font-size: .8rem; color: var(--ink-faint); text-align: center; }
.req { color: var(--gold); }
.form-reqnote { font-size: .72rem; color: var(--ink-faint); letter-spacing: .04em; margin: -.2rem 0 .1rem; }
.preorder__privacy, .row-privacy { font-size: .78rem; color: var(--ink-faint); line-height: 1.5; text-align: center; }
.preorder__privacy a, .row-privacy a { color: var(--ink-dim); text-decoration: underline; }
.preorder__privacy a:hover, .row-privacy a:hover { color: var(--gold); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formmsg { padding: 1rem 1.2rem; border-radius: 2px; font-size: .95rem; text-align: center; }
.formmsg.is-ok  { background: rgba(90,140,100,.14); border: 1px solid rgba(120,180,130,.4); color: #cfe6d3; }
.formmsg.is-err { background: rgba(160,70,70,.14); border: 1px solid rgba(200,110,110,.4); color: #f0cccc; }

/* Kauf-Popups (Versandland / Rest der Welt) */
.buybuttons__row-btn { margin: 1rem auto 0; display: inline-block; }
.pmodal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow: auto; }
.pmodal[hidden] { display: none; }
.pmodal__box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; max-width: 460px; width: 100%; padding: 2.2rem 1.8rem 1.8rem; position: relative; text-align: center; }
.pmodal__close { position: absolute; top: .6rem; right: .8rem; background: none; border: none; color: var(--ink-dim); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.pmodal__title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin-bottom: 1.2rem; }
.pmodal__buttons { display: flex; flex-direction: column; gap: .8rem; }
.pmodal__note { margin-top: 1rem; font-size: .78rem; color: var(--ink-faint); }
.pmodal form { text-align: left; display: grid; gap: 1rem; margin-top: .5rem; }
.pmodal .field label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); display: block; margin-bottom: .35rem; }
.pmodal .field input, .pmodal .field textarea { width: 100%; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); font-family: var(--sans); font-size: 1rem; padding: .7rem .8rem; border-radius: 2px; }
.pmodal .field input:focus, .pmodal .field textarea:focus { outline: none; border-color: var(--gold); }
.row-status { font-size: .9rem; text-align: center; min-height: 1.2em; }
.row-status.is-ok { color: #cfe6d3; }
.row-status.is-err { color: #f0cccc; }

/* ============================ FOOTER ======================== */
.footer { background: var(--bg); border-top: 1px solid var(--line-soft); padding: 3.5rem var(--pad) 2.5rem; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: space-between; align-items: center; }
.footer__brand { display: flex; flex-direction: column; }
.footer__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.footer__tag { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__links a { font-size: .82rem; letter-spacing: .08em; color: var(--ink-dim); transition: color .3s; }
.footer__links a:hover { color: var(--gold); }
.footer__copy { max-width: var(--maxw); margin: 2rem auto 0; font-size: .76rem; color: var(--ink-faint); text-align: center; }

/* ==================== Scroll-Reveal-Animation ============== */
.reveal-up { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-up.is-in { opacity: 1; transform: none; }

/* ============================ RESPONSIVE =================== */
@media (max-width: 900px) {
    .nav__links {
        position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; gap: 0;
        background: rgba(11,11,11,.97); backdrop-filter: blur(14px);
        padding: 6rem 2rem 2rem; transform: translateY(-100%); transition: transform .45s var(--ease);
        height: 100svh; justify-content: center; align-items: center; z-index: -1;
        /* Überlauf innerhalb des Overlays halten: sonst ragen bei niedrigem Viewport
           (Handy quer) die unteren Menüpunkte oben in die Seite, obwohl das Menü zu ist. */
        overflow-y: auto;
    }
    .nav.is-open .nav__links { transform: translateY(0); }
    /* Bei geöffnetem Menü den oberen Header-Button ausblenden – der Bestell-Button
       steht dann nur noch unten im Overlay (kein doppelter „Order now"). */
    .nav.is-open .nav__actions .btn--sm { display: none; }
    .nav__links a { font-size: 1.4rem; font-family: var(--serif); text-transform: none; letter-spacing: .02em; color: var(--ink); }
    .nav__burger { display: flex; }
    .nav__links a { padding: .8rem 0; }
    /* Bestell-Button als goldener Button im Overlay (überschreibt das Textlink-Styling). */
    .nav__links a.nav__cta {
        margin-top: 1.6rem; padding: .95rem 2.6rem;
        font-family: var(--sans); font-size: .82rem; letter-spacing: .2em;
        text-transform: uppercase; color: #0b0b0b;
    }
    .nav__links a.nav__cta::after { display: none; }
}
/* Handy im Querformat (niedriger Viewport): Menü kompakter + oben ausgerichtet,
   damit alle Punkte hineinpassen und scrollbar bleiben. */
@media (max-width: 900px) and (max-height: 520px) {
    .nav__links { justify-content: flex-start; padding: 4.2rem 2rem 1.5rem; }
    .nav__links a { font-size: 1.15rem; padding: .45rem 0; }
    .nav__links a.nav__cta { margin-top: 1rem; padding: .7rem 2.2rem; }
}
@media (max-width: 820px) {
    .book__grid { grid-template-columns: 1fr; }
    .book__cover { max-width: 360px; margin: 0 auto; }
    .reveal-pairs { grid-template-columns: 1fr; }
    .author__grid { grid-template-columns: 1fr; text-align: center; }
    .author__portrait { max-width: 420px; margin: 0 auto; }
    .author__bio { text-align: left; }
}
@media (max-width: 520px) {
    body { font-size: 16px; }
    .nav__actions .btn--sm { display: none; }
    .field--row { grid-template-columns: 1fr; }
    .footer__inner { flex-direction: column; text-align: center; align-items: center; }
}

/* ============================ LEGAL ======================== */
.legal { max-width: 820px; margin: 0 auto; padding: 8rem var(--pad) 5rem; }
.legal__back { display: inline-block; margin-bottom: 2.5rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2rem; }
.legal h2 { font-family: var(--serif); font-size: 1.5rem; margin: 2.4rem 0 .8rem; color: var(--ink); }
.legal p, .legal li { color: var(--ink-dim); margin-bottom: .9rem; }
.legal ul { padding-left: 1.3rem; margin-bottom: 1rem; }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal .placeholder { color: var(--gold-soft); background: rgba(184,155,94,.10); padding: 0 .3em; border-radius: 2px; }
.legal .note { font-size: .82rem; color: var(--ink-faint); border-left: 2px solid var(--line); padding-left: 1rem; margin: 1.5rem 0; }
.legal__highlight { border: 1px solid var(--gold-soft); background: rgba(184,155,94,.08); border-radius: 4px; padding: 1rem 1.2rem; margin: 1.2rem 0; }
.legal__lang { float: right; font-size: .8rem; }
.legal__lang a { margin-left: .6rem; }
.legal__box { border: 1px solid var(--line); border-radius: 3px; padding: 1.2rem 1.4rem; margin: 1rem 0 1.5rem; background: var(--bg-2); }
.legal__box p { margin-bottom: .7rem; }

/* --------------------- Reduced motion ---------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .reveal-up { opacity: 1; transform: none; }
    .bento__media > img { transition: none; }
    .hero__scroll span { opacity: 1; transform: rotate(45deg); }
}

/* ==================== LESEPROBE (Reader) =================== */
/* Auslöse-Button: erscheint beim Scrollen unter den Hero. */
.lp-fab {
    position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 50;
    display: inline-flex; align-items: center; gap: .55rem; padding: .82rem 1.35rem;
    border: none; border-radius: 999px; background: var(--gold); color: #141210;
    font-family: var(--sans); font-weight: 700; font-size: .95rem; letter-spacing: .01em; cursor: pointer;
    box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
    opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none;
    transition: opacity .5s var(--ease), transform .55s cubic-bezier(.34, 1.56, .64, 1), background .2s;
}
.lp-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.lp-fab:hover { background: #cdae74; transform: translateY(-2px) scale(1.04); }
.lp-fab__icon { flex: 0 0 auto; }
/* Aufmerksamkeits-Puls (Radar-Ping) – nur solange die Leseprobe noch nie geöffnet wurde. */
.lp-fab::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.lp-fab--pulse.is-visible::after { animation: lpFabPulse 2.2s ease-out infinite; }
@keyframes lpFabPulse {
    0%   { box-shadow: 0 0 0 0 rgba(184,155,94,.55); }
    70%  { box-shadow: 0 0 0 20px rgba(184,155,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(184,155,94,0); }
}
/* Mobile-Aufmerksamkeits-Callout: „Sprechblase" links neben der FAB. Nur auf
   kleinen Screens sichtbar (Desktop trägt die FAB ohnehin ein Text-Label) und
   nur kurz, wenn die Leseprobe beim Runterscrollen erstmals erscheint. */
.lp-fab__hint {
    display: none; position: absolute; right: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(10px); white-space: nowrap;
    padding: .5rem .8rem; border-radius: 10px; background: var(--gold); color: #141210;
    font-family: var(--sans); font-weight: 700; font-size: .82rem;
    box-shadow: 0 12px 34px rgba(0,0,0,.45); opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.lp-fab__hint::after {
    content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-left-color: var(--gold);
}
.lp-fab--attention .lp-fab__hint { opacity: 1; transform: translateY(-50%); }
.lp-fab--attention { animation: lpFabAttention 1.15s ease 2; }
@keyframes lpFabAttention {
    0%, 100% { transform: none; }
    28% { transform: translateY(-9px); }
    45% { transform: translateY(0); }
    62% { transform: translateY(-5px); }
    80% { transform: translateY(0); }
}

/* Overlay */
.lpreader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.lpreader[hidden] { display: none; }
.lpreader__backdrop { position: absolute; inset: 0; background: rgba(6,6,8,.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* „Buch" – bewusst heller Papier-Look, unabhängig vom dunklen Seitendesign */
.lpreader__book {
    --lp-paper: #f4efe6; --lp-ink: #241f1a; --lp-muted: #8a7f70;
    --lp-norman: #1f4e79; --lp-pana: #2e7d46;
    position: relative; z-index: 1; width: min(760px, 94vw); height: min(88vh, 900px);
    background: var(--lp-paper); color: var(--lp-ink); border-radius: 8px;
    box-shadow: 0 40px 120px rgba(0,0,0,.6); overflow: hidden;
    display: flex; flex-direction: column; font-family: var(--serif);
}
.lpreader__close {
    position: absolute; top: .3rem; right: .55rem; z-index: 5; background: none; border: none;
    font-size: 1.9rem; line-height: 1; color: var(--lp-muted); cursor: pointer; padding: .1rem .5rem;
}
.lpreader__close:hover { color: var(--lp-ink); }

.lpreader__view { position: relative; flex: 1 1 auto; overflow: hidden; }
/* column-width / column-gap / padding / height werden per JS gesetzt (abhängig von der Ansichtsgröße). */
.lpreader__pages { column-fill: auto; transition: transform .42s var(--ease); will-change: transform; }

.lpreader__pages .lp__part {
    font-size: 1.5rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    text-align: center; margin: .3rem 0 1.2rem; break-after: avoid;
}
.lpreader__pages .lp__chapnum {
    font-family: var(--sans); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
    text-align: center; color: var(--gold); margin: .4rem 0 .1rem; break-after: avoid;
}
.lpreader__pages .lp__chaptitle {
    font-size: 1.35rem; font-weight: 600; text-align: center; margin: 0 0 1.1rem; break-after: avoid;
}
.lpreader__pages .lp__p { font-size: 1.02rem; line-height: 1.62; margin: 0 0 .85rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* Kapitel/Teile beginnen auf einer neuen „Seite" (Spalte) – nie mitten auf einer.
   Der allererste Block (Prolog) bleibt auf Seite 1 (kein Umbruch davor). */
.lpreader__pages .lp__part,
.lpreader__pages .lp__chapnum { break-before: column; -webkit-column-break-before: always; }
.lpreader__pages > :first-child { break-before: auto; -webkit-column-break-before: auto; }
/* Auslassungs-Marke „Fortsetzung folgt …": zeigt, dass es im Buch weitergeht. */
.lpreader__pages .lp__more {
    text-align: center; color: var(--gold); font-family: var(--serif);
    font-style: italic; font-size: 1.2rem; line-height: 1.3;
    letter-spacing: .02em; margin: 1.7rem 0 1.9rem;
}
.lpreader__pages .lp__p--norman { color: var(--lp-norman); }
.lpreader__pages .lp__p--pana { color: var(--lp-pana); }

/* Abschluss-Seite mit Vorbestell-Aufruf (per JS eingefügt) */
.lpreader__cta { break-before: column; -webkit-column-break-before: always; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.1rem; padding: 0 1rem; }
.lpreader__cta h3 { font-size: 1.55rem; font-weight: 600; margin: 0; }
.lpreader__cta p { font-size: 1rem; line-height: 1.5; color: #4b4238; max-width: 34ch; margin: 0; }

/* Pfeil-Navigation */
.lpreader__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.72); color: var(--lp-ink); font-size: 1.9rem; line-height: 1;
    cursor: pointer; display: grid; place-items: center; transition: background .2s, opacity .2s;
}
.lpreader__nav--prev { left: .35rem; }
.lpreader__nav--next { right: .35rem; }
.lpreader__nav:hover { background: #fff; }
.lpreader__nav:disabled { opacity: .25; cursor: default; }

/* Untere Leiste: Legende (oben) + Fortschritt/Zähler (darunter) */
.lpreader__bar { flex: 0 0 auto; display: flex; flex-direction: column; gap: .45rem; padding: .5rem 1rem .6rem; border-top: 1px solid rgba(0,0,0,.08); }
.lpreader__barrow { display: flex; align-items: center; gap: .8rem; }

/* Sprecher-Legende – Zeilenhöhe bleibt reserviert (verhindert Repaginierung);
   auf Seiten ohne farbigen Dialog nur unsichtbar geschaltet. */
.lpreader__legend { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 1.1em; }
.lpreader__leglabel { font-family: var(--sans); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); }
.lpreader__leg { font-family: var(--sans); font-size: .74rem; letter-spacing: .02em; color: #5a5045; display: inline-flex; align-items: center; gap: .34rem; }
.lpreader__leg[hidden] { display: none; }
.lpreader__leg::before { content: ""; width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lpreader__leg--norman::before { background: var(--lp-norman); }
.lpreader__leg--pana::before { background: var(--lp-pana); }
.lpreader__progress { flex: 1 1 auto; height: 3px; background: rgba(0,0,0,.1); border-radius: 2px; overflow: hidden; }
.lpreader__progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s var(--ease); }
.lpreader__count { flex: 0 0 auto; font-family: var(--sans); font-size: .75rem; color: var(--lp-muted); letter-spacing: .05em; }

@media (max-width: 560px) {
    .lpreader__book { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
    .lpreader__pages .lp__part { font-size: 1.3rem; }
    .lpreader__pages .lp__chaptitle { font-size: 1.2rem; }
    .lpreader__pages .lp__p { font-size: .98rem; }
    .lpreader__nav { width: 38px; height: 38px; font-size: 1.6rem; }
    .lp-fab__label { display: none; }
    .lp-fab { padding: .8rem; }
    .lp-fab__hint { display: block; }
}

/* ==================== PREIS-/VERSANDINFO (Verkaufsmodus) === */
.priceinfo { text-align: center; margin: 0 auto 1.7rem; max-width: 44ch; }
.priceinfo__price { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--gold); margin: 0 0 .85rem; }
.priceinfo__vat { font-size: .8rem; line-height: 1.5; color: var(--ink-dim); margin: 0 0 .55rem; }
.priceinfo__line { font-size: .92rem; color: var(--ink-dim); margin: .12rem 0; }