/* ============================================================
   JESUS SOCIETY · EIN LEBEN, DAS TRÄGT
   Design-System v4 (neues Cover, Oktober 2026)

   Zwei Stimmen:
   Poppins      = die Stimme des Covers. Überschriften fett in Großbuchstaben,
                  Navigation, Buttons, Kennzeichnungen, Begriffe, Wortstapel.
   EB Garamond  = die Stimme des Buches. Lesetext und Verse.
   Keine Kursivschrift, wie im gedruckten Buch.

   Farben vom Cover: Schwarz als Fläche, Weiß für Text,
   Orange (#FE6807) als einziger Akzent.
   ============================================================ */

:root{
  /* Flächen: Schwarz wie das Cover, Orange aus Marke und Titel */
  --paper:        #0E0E10;   /* Grundfläche */
  --paper-lift:   #18181B;   /* Karten */
  --paper-deep:   #141417;   /* abgesetzte Sektionen */
  --night:        #050506;   /* tiefste Fläche, wie das Cover */
  --night-lift:   #121214;

  /* Schrift auf dunkel */
  --ink:          #F5F5F4;
  --ink-strong:   #FFFFFF;
  --ink-76:       rgba(245,245,244,.76);
  --ink-56:       rgba(245,245,244,.58);
  --ink-40:       rgba(245,245,244,.40);
  --paper-76:     rgba(245,245,244,.76);
  --paper-52:     rgba(245,245,244,.54);
  --paper-30:     rgba(245,245,244,.30);
  --dark:         #0A0A0B;   /* Schrift auf Orange */

  /* Akzent: Orange vom Cover (#FE6807). Die Namen --gold* bleiben, damit nichts bricht. */
  --gold:         #FE6807;
  --gold-warm:    #FF8A3D;
  --gold-deep:    #B84800;
  --gold-soft:    rgba(254,104,7,.2);

  /* Linien und Schatten */
  --line:         rgba(245,245,244,.12);
  --line-soft:    rgba(245,245,244,.07);
  --line-night:   rgba(245,245,244,.12);
  --shadow-book:  0 50px 80px -40px rgba(0,0,0,.8), 0 18px 30px -24px rgba(0,0,0,.6);

  /* Schrift: Poppins wie auf dem Cover, Garamond für Lesetext und Verse */
  --f-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --f-text:    'EB Garamond', 'Garamond', 'Iowan Old Style', Georgia, serif;

  --t-mega:  clamp(4.6rem, 12.6vw, 12.6rem);
  --t-h1:    clamp(2rem, 4vw, 3.7rem);
  --t-h2:    clamp(1.7rem, 3.1vw, 2.9rem);
  --t-h3:    clamp(1.42rem, 2vw, 1.85rem);
  --t-lead:  clamp(1.2rem, 1.55vw, 1.45rem);
  --t-body:  1.1875rem;
  --t-small: 1rem;
  --t-label: .78rem;

  /* Raum */
  --gap:   clamp(1rem, 1.6vw, 1.5rem);
  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --sec:   clamp(6.5rem, 12vw, 12rem);
  --shell: 1340px;
  --measure: 36rem;

  /* Bewegung */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  /* Ebenen */
  --z-path: 40;
  --z-nav: 70;
  --z-menu: 69;
  --z-dock: 75;
  --z-grain: 80;
  --z-intro: 130;
}

/* ---------- Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","onum";
  overflow-x:hidden;
}
main{ width:100%; display:block; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
em,i{ font-style:normal; }
::selection{ background:var(--gold); color:var(--dark); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:1rem; top:-4rem; z-index:200; padding:.7rem 1rem;
  background:var(--ink); color:var(--dark); font-family:var(--f-display); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  transition:top .2s var(--ease-out);
}
.skip:focus{ top:1rem; }

/* Papierkorn, nur als fixierte Ebene */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.07; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Primitive ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--sec) calc(var(--sec) * 1.08); position:relative; }

.label{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--f-display); font-size:var(--t-label); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); line-height:1;
}
.label::before{ content:""; width:1.4rem; height:1px; background:currentColor; opacity:.7; }
.label--plain::before{ display:none; }

.h-display{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:-.005em; line-height:1.08;
  text-wrap:balance;
}
/* Zweiteilige Überschrift: zweiter Satz in Gold */
.h-display > .hd-part{ display:block; }
.h-display > .hd-part + .hd-part{ color:var(--gold-warm); }
.h1{ font-size:var(--t-h1); }
.h2{ font-size:var(--t-h2); }
.gold{ color:var(--gold); }

.lead{
  font-family:var(--f-text); font-size:var(--t-lead); line-height:1.55; color:var(--ink-76);
  max-width:var(--measure); text-wrap:pretty;
}
.body{ max-width:var(--measure); color:var(--ink-76); text-wrap:pretty; }
.small{ font-size:var(--t-small); }
.rule{ height:1px; background:var(--line); border:0; margin:0; transform-origin:left center; }

/* ---------- Buttons ----------
   Gefüllt und gerahmt, ohne Pfeil. Ein Klick öffnet erst das Kreuz
   aus dem Intro, dann geht es zu Amazon (site.js). */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.05rem 2rem 1rem; border-radius:3px; border:1px solid transparent;
  font-family:var(--f-display); font-weight:600; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.2;
  transition:background-color .28s var(--ease-out), color .28s var(--ease-out), border-color .28s var(--ease-out), transform .16s var(--ease-out);
}
.btn:active{ transform:scale(.97); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--dark); }
.btn--line{ background:transparent; border-color:rgba(254,104,7,.7); color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{ background:var(--gold-warm); border-color:var(--gold-warm); }
  .btn--line:hover{ background:var(--gold); border-color:var(--gold); color:var(--dark); }
  /* Im Paar: Farbe hat immer der Button unter der Maus, der andere zeigt nur den Rahmen */
  .btn-pair:hover .btn--gold:not(:hover){ background:transparent; border-color:rgba(254,104,7,.7); color:var(--ink); }
}

/* Textlink mit gezeichneter Linie */
.tlink{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-display); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; padding-block:.35rem;
}
.tlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold);
  transform:scaleX(.28); transform-origin:left; transition:transform .45s var(--ease-out);
}
.tlink svg{ width:13px; height:13px; transition:transform .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .tlink:hover::after{ transform:scaleX(1); }
  .tlink:hover svg{ transform:translate(2px,-2px); }
}

/* ---------- Karte mit Doppelrand ---------- */
.bez{
  background:rgba(245,245,244,.03); border:1px solid var(--line-soft);
  border-radius:16px; padding:6px; height:100%;
}
.bez__core{
  background:var(--paper-lift); border-radius:11px; height:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  padding:clamp(1.5rem,2.4vw,2.4rem);
}
.on-night .bez{ background:rgba(245,245,244,.04); border-color:var(--line-night); }
.on-night .bez__core{ background:var(--night-lift); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }

/* ============================================================
   KOPF: links Navigation, mittig die Marke, rechts Kauf
   ============================================================ */
.mast{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:1.5rem;
  padding:clamp(1.1rem,2.6vh,1.9rem) var(--pad-x) clamp(.9rem,2vh,1.4rem);
  color:var(--ink);
  transition:transform .5s var(--ease-drawer), padding .45s var(--ease-out), background-color .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom:1px solid transparent;
}
.mast.is-hidden{ transform:translateY(-110%); }
.mast.is-solid{
  padding-block:.7rem;
  background:rgba(20,21,25,.82); border-bottom-color:var(--line-soft);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
}
.mast__side{ display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2.4rem); min-width:0; }
.mast__side--r{ justify-content:flex-end; }
.mast__side a{
  position:relative; font-family:var(--f-display); font-weight:500; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-76); padding-block:.3rem; white-space:nowrap; transition:color .2s var(--ease-out);
}
.mast__side a::after{
  content:""; position:absolute; left:0; right:.14em; bottom:0; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out);
}
.mast__side a.is-here{ color:var(--ink); }
.mast__side a.is-here::after{ transform:scaleX(1); }
@media (hover:hover) and (pointer:fine){
  .mast__side a:hover{ color:var(--ink); }
  .mast__side a:hover::after{ transform:scaleX(1); }
}
.mast__side a.mast__cta{ color:var(--gold-warm); }
.mast__side a.mast__cta::after{ transform:scaleX(1); background:currentColor; opacity:.5; }

.mast__brand{ display:flex; justify-content:center; color:var(--ink); }
.brand{ display:inline-flex; align-items:center; gap:.7em; font-size:clamp(1rem,1.5vw,1.3rem); transition:font-size .45s var(--ease-out); }
.brand .mark{ width:2.1em; color:var(--gold); flex:none; }
.badge{ display:inline-block; background:var(--gold); color:#FFFFFF; font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:1em; letter-spacing:.01em; line-height:1; padding:.42em .5em .36em; white-space:nowrap; }
.mast.is-solid .brand{ font-size:.92rem; }

.burger{ display:none; width:42px; height:42px; border-radius:100px; position:relative; background:rgba(245,245,244,.08); }
.burger i{
  position:absolute; left:12px; width:18px; height:1.5px; background:var(--ink); display:block;
  transition:transform .3s var(--ease-out), background-color .2s;
}
.burger i:nth-child(1){ top:17px; }
.burger i:nth-child(2){ top:23px; }
.is-open .burger i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.is-open .burger i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:var(--z-menu); display:grid; place-items:center;
  background:rgba(20,21,25,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out), visibility .3s;
}
.is-open .menu{ opacity:1; visibility:visible; }
.menu ul{ list-style:none; margin:0; padding:0; text-align:center; }
.menu li{ overflow:hidden; }
.menu a{
  display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,8vw,2.8rem); text-transform:uppercase; letter-spacing:-.005em; line-height:1.2;
  transform:translateY(105%); transition:transform .55s var(--ease-out);
}
.menu li:last-child a{ color:var(--gold-warm); }
.is-open .menu a{ transform:none; }
.is-open .menu li:nth-child(2) a{ transition-delay:.04s }
.is-open .menu li:nth-child(3) a{ transition-delay:.08s }
.is-open .menu li:nth-child(4) a{ transition-delay:.12s }
.is-open .menu li:nth-child(5) a{ transition-delay:.16s }
.is-open .menu li:nth-child(6) a{ transition-delay:.20s }

/* ============================================================
   INTRO: ein Kreuz wächst von unten und öffnet die Seite
   ============================================================ */
.intro{ position:fixed; inset:0; z-index:var(--z-intro); overflow:hidden; }
.intro__half{ position:absolute; top:-2px; bottom:-2px; width:50.4%; background:var(--night); will-change:transform; }
.intro__half--l{ left:0; }
.intro__half--r{ right:0; }
.intro__stage{ position:absolute; inset:0; pointer-events:none; }
.intro__halo{
  position:absolute; left:50%; top:36%; width:min(64vw,660px); aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.55); opacity:0;
  background:radial-gradient(circle, rgba(254,104,7,.38), rgba(254,104,7,.07) 42%, transparent 66%);
}
.intro__beam{
  position:absolute; left:50%; bottom:0; width:2px; height:72%; margin-left:-1px;
  background:linear-gradient(to top, rgba(254,104,7,0), var(--gold-warm) 26%, #FFC7A1);
  transform:scaleY(0); transform-origin:bottom center; will-change:transform;
  /* Lücke, wo der Schriftzug steht: das Licht läuft hinter ihm durch, ohne ihn zu schneiden */
  -webkit-mask-image:linear-gradient(to bottom, #000 0 33%, transparent 36% 52%, #000 55%);
          mask-image:linear-gradient(to bottom, #000 0 33%, transparent 36% 52%, #000 55%);
}
.intro__arm{
  position:absolute; left:50%; top:36%; height:2px; width:min(34vw,380px);
  transform:translateX(-50%) scaleX(0); will-change:transform;
  background:linear-gradient(90deg, rgba(254,104,7,0), #FFC7A1 22%, #FFC7A1 78%, rgba(254,104,7,0));
}
.intro__word{
  position:absolute; left:0; right:0; top:55%; text-align:center; color:var(--ink);
  font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.35rem,2.4vw,2.1rem); letter-spacing:0;
  opacity:0; transform:translateY(14px);
}
.intro__word span{ padding:.12em .7em; }
.intro__word .badge{ padding:.42em .5em .36em; }
.intro__word small{ display:block; font-family:var(--f-display); font-weight:600; font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-warm); margin-top:.9rem; }
.intro__skip{
  position:absolute; left:0; right:0; bottom:clamp(1.6rem,4vh,2.6rem); width:100%; text-align:center;
  font-family:var(--f-display); font-weight:500; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-30);
  opacity:0; pointer-events:auto;
}
@media (hover:hover){ .intro__skip:hover{ color:var(--gold-warm); } }

/* ============================================================
   KOPF DER RECHTSSEITEN
   ============================================================ */
.pagehead{ padding-block:clamp(9rem,17vh,12rem) clamp(3rem,6vw,5rem); position:relative; }
.pagehead h1{ font-size:var(--t-h1); margin:1.3rem 0 1.6rem; max-width:18ch; }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.8rem; margin-top:2rem; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font-size:1rem; color:var(--ink-56); }
@media (hover:hover){ .crumbs a:hover{ color:var(--gold); } }
.crumbs i{ width:14px; height:1px; background:var(--ink-40); display:block; }

/* ============================================================
   DAS BUCH ALS OBJEKT: Hardcover
   Maße laut Amazon: 15,84 × 23,46 cm, Rücken 2,46 cm.
   --bw  Breite des Deckels      --bd  Rückenstärke
   --bt  Pappenstärke            --ov  Überstand der Pappe über den Buchblock
   ============================================================ */
.bookstage{ display:grid; place-items:center; perspective:1800px; padding-block:1rem; --bw:clamp(220px,22vw,320px); }

.book{
  --bd:calc(var(--bw) * .135);
  --bt:calc(var(--bw) * .013);
  --ov:calc(var(--bw) * .02);
  --bh:calc(var(--bw) * 1.519);
  --cream:#000000;
  position:relative; width:var(--bw); height:var(--bh); transform-style:preserve-3d;
  transform:rotateX(5deg) rotateY(24deg);
  will-change:transform;
}
.book__face{
  position:absolute; top:0; left:0; width:100%; height:100%;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden;
}
.book__shade{ position:absolute; inset:0; background:#0B0C0E; opacity:0; pointer-events:none; z-index:3; }

/* Vorderdeckel mit dem echten Cover */
.book__front{
  transform:translateZ(calc(var(--bd) * .5));
  background:var(--cream) url("../img/cover-front-exact-v7.jpg") center / cover no-repeat;
  border-radius:1px 3px 3px 1px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
/* Falz am Rücken und ein Hauch Glanz, wie bei kaschierter Pappe */
.book__front::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.4) 0, rgba(0,0,0,0) 1.4%, rgba(255,255,255,.1) 2.4%, rgba(0,0,0,.3) 3.6%, rgba(0,0,0,0) 5.2%),
    linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.045) 46%, rgba(255,255,255,0) 60%);
}

/* Innenseiten der Pappen (Vorsatz), sichtbar im Überstand */
.book__inner{ background:#0D0D0E; }
.book__inner--f{ transform:translateZ(calc(var(--bd) * .5 - var(--bt))) rotateY(180deg); }
.book__inner--b{ transform:translateZ(calc(var(--bd) * -.5 + var(--bt))); }

/* Rücken */
.book__spine{
  width:var(--bd); left:calc(50% - var(--bd) * .5);
  transform:translateX(calc(var(--bw) * -.5)) rotateY(-90deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0) 18%, rgba(255,255,255,.09) 42%, rgba(255,255,255,0) 62%, rgba(0,0,0,.45)),
    #000 url("../img/cover-spine-v6.png") center / 100% 100% no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.spine__mark{ width:calc(var(--bd) * .5); color:var(--gold); flex:none; }

/* Buchblock: Schnitt vorne, oben, unten. Leicht zurückgesetzt hinter die Pappen */
.book__edge{
  width:calc(var(--bd) - var(--bt) * 2); left:calc(50% - (var(--bd) - var(--bt) * 2) * .5);
  transform:translateX(calc(var(--bw) * .5 - var(--ov))) rotateY(90deg);
  background:
    linear-gradient(to bottom, #030303 0, #030303 var(--ov), transparent var(--ov), transparent calc(100% - var(--ov)), #030303 calc(100% - var(--ov))),
    linear-gradient(90deg, rgba(20,18,14,.28), transparent 16%, transparent 84%, rgba(20,18,14,.28)),
    repeating-linear-gradient(90deg, #FAF7F1 0 1px, #E3DCCF 1px 2.2px);
}
.book__top, .book__bottom{
  width:calc(var(--bw) - var(--ov)); height:calc(var(--bd) - var(--bt) * 2);
  top:calc(50% - (var(--bd) - var(--bt) * 2) * .5);
  background:
    linear-gradient(to bottom, rgba(20,18,14,.25), transparent 18%, transparent 82%, rgba(20,18,14,.25)),
    repeating-linear-gradient(0deg, #FAF7F1 0 1px, #E3DCCF 1px 2.2px);
}
.book__top{ transform:translateY(calc(var(--bh) * -.5 + var(--ov))) rotateX(90deg); }
.book__bottom{ transform:translateY(calc(var(--bh) * .5 - var(--ov))) rotateX(-90deg); }

/* Pappkanten am Schnitt */
.book__board{
  width:var(--bt); left:calc(50% - var(--bt) * .5);
  background:linear-gradient(90deg, #121213, #232325);
}
.book__board--f{ transform:translateX(calc(var(--bw) * .5)) translateZ(calc(var(--bd) * .5 - var(--bt) * .5)) rotateY(90deg); }
.book__board--b{ transform:translateX(calc(var(--bw) * .5)) translateZ(calc(var(--bd) * -.5 + var(--bt) * .5)) rotateY(90deg); }

/* Rückseite: Datei von Patrick */
.book__back{
  transform:translateZ(calc(var(--bd) * -.5)) rotateY(180deg);
  background:var(--cream) url("../img/cover-back-v6.png") center / cover no-repeat;
  border-radius:3px 1px 1px 3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.book__back::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(270deg, rgba(0,0,0,.4) 0, rgba(0,0,0,0) 1.4%, rgba(255,255,255,.1) 2.4%, rgba(0,0,0,.3) 3.6%, rgba(0,0,0,0) 5.2%);
}

.book__shadow{
  position:absolute; left:-14%; right:-14%; bottom:-7%; height:calc(var(--bw) * .14);
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6), transparent 72%);
  filter:blur(16px); transform:translateZ(calc(var(--bd) * -.5)) rotateX(80deg);
}

/* ============================================================
   DER KOPF DER STARTSEITE
   Oben Anthrazit mit Begriffen aus dem Buch, unten Schiefer. In der Mitte dreht sich das Hardcover.
   ============================================================ */
.spin{ position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:var(--paper-deep); }
.spin__stage{ position:absolute; inset:0; }
.spin__top{ position:absolute; left:0; right:0; top:0; height:var(--split-y,79%); background:var(--night); overflow:hidden; }
.spin__top::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(34% 44% at 50% 58%, rgba(254,104,7,.2), rgba(254,104,7,.05) 55%, transparent 75%);
}

/* Begriffe */
.terms{ position:absolute; left:0; right:0; top:55%; transform:translateY(-50%); display:grid; gap:0; }
.terms__row{ white-space:nowrap; overflow:visible; }
.terms__track{
  display:inline-block; will-change:transform;
  font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(2.6rem,min(6.6vw,10.2vh),7.4rem); line-height:1.02; letter-spacing:-.02em;
  color:rgba(245,245,244,.07);
}
.terms__track span{ transition:color .7s var(--ease-out); }
.terms__track span.is-lit{ color:var(--gold); }

/* Das Buch */
.spin__book{
  position:absolute; left:50%; top:var(--book-y,55%); z-index:2;
  perspective:2000px; transform:translate(-50%,-50%);
  --bw:clamp(150px, min(44vh, 30vw), 430px);
}
.spin__float{ transform-style:preserve-3d; will-change:transform; }
.spin .book{ transform:rotateX(-4deg) rotateY(0deg); }

/* Seitenangaben links und rechts */
.spin__meta{
  right:var(--pad-x); text-align:right;
  position:absolute; top:calc(var(--book-y,55%) + 8%); transform:translateY(-50%); z-index:3;
  display:grid; gap:.85rem; font-family:var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.14em;
}
.spin__price{ font-size:.72rem; color:var(--ink-56); }
.spin__price b{ display:block; font-weight:700; font-size:1.5rem; letter-spacing:-.01em; color:var(--ink); line-height:1.1; margin-top:.3rem; }
.spin__hint{
  position:absolute; left:50%; bottom:clamp(.9rem,2.4vh,1.6rem); transform:translateX(-50%); z-index:1;
  font-family:var(--f-display); font-weight:500; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-40);
  white-space:nowrap; display:none;
}

/* Text unter dem Kopf */
.pitch{ background:linear-gradient(to bottom, var(--paper-deep) 0%, var(--paper-deep) 62%, var(--night) 100%); padding-block:clamp(3.5rem,7vw,6rem) calc(var(--sec) * .8); text-align:center; }
.pitch__h{ font-size:var(--t-h2); max-width:30ch; margin-inline:auto; }
.pitch__cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,4vw,4rem);
  max-width:64rem; margin:clamp(2.6rem,5vw,4rem) auto 0; text-align:left;
  font-size:1.14rem; line-height:1.7; color:var(--ink-76);
}
.pitch__cols p{ text-wrap:pretty; }
.pitch__buy{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 1.2rem; margin-top:clamp(2.4rem,4vw,3.4rem); }
.pitch__note{ margin-top:1.2rem; font-size:1rem; color:var(--ink-56); }
.btn small{ font-family:var(--f-text); font-size:.86em; letter-spacing:0; text-transform:none; opacity:.8; margin-left:.35em; }

/* ============================================================
   DIE LAST: dunkle Sektion, Wörter stapeln sich
   ============================================================ */
.on-night{ background:var(--night); color:var(--ink); }
.on-night .label{ color:var(--gold-warm); }
.on-night .lead,.on-night .body{ color:var(--paper-76); }
.on-night .rule{ background:var(--line-night); }

.last{ position:relative; overflow:clip; }
.last__stage{
  min-height:100dvh; display:grid; align-items:center;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,6rem);
  padding-block:clamp(6rem,12vh,8rem);
}
.last__copy h2{ font-size:var(--t-h2); margin:0 0 1.6rem; }
.last__turn{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line-night); }
.last__turn p{ font-size:var(--t-lead); line-height:1.55; color:var(--ink); max-width:30rem; }
.last__turn p span{ color:var(--gold-warm); }
.pile{ display:flex; flex-direction:column-reverse; align-items:flex-start; gap:.06em; min-height:0; justify-content:flex-start; }
.pile__w{
  display:block; font-family:var(--f-display); font-weight:800; text-transform:uppercase; line-height:1; letter-spacing:-.02em;
  font-size:clamp(1.6rem,min(3.4vw,5.8vh),3.4rem); color:var(--ink); white-space:nowrap;
  transform-origin:50% 100%; will-change:transform;
}
.pile__w:nth-child(1){ margin-left:0;    color:rgba(245,245,244,.92); }
.pile__w:nth-child(2){ margin-left:8%;   color:rgba(245,245,244,.82); }
.pile__w:nth-child(3){ margin-left:2%;   color:rgba(245,245,244,.72); }
.pile__w:nth-child(4){ margin-left:14%;  color:rgba(245,245,244,.62); }
.pile__w:nth-child(5){ margin-left:5%;   color:rgba(245,245,244,.54); }
.pile__w:nth-child(6){ margin-left:11%;  color:rgba(245,245,244,.46); }
.pile__w:nth-child(7){ margin-left:3%;   color:rgba(245,245,244,.38); }
.pile__w:nth-child(8){ margin-left:9%;   color:var(--gold-warm); }

/* ============================================================
   DER MOMENT: ein Vers entfaltet sich
   ============================================================ */
.moment{ position:relative; background:linear-gradient(to bottom, var(--night) 0%, var(--paper) 28%); }
.moment__stage{
  min-height:100dvh; display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,7rem);
  padding-block:clamp(6rem,12vh,8rem);
}
.moment__verse{
  margin:0; font-family:var(--f-text); font-weight:400; font-size:clamp(2rem,3.4vw,3.3rem); line-height:1.18; letter-spacing:-.005em;
  color:var(--ink); text-wrap:balance; will-change:filter, opacity;
}
.moment__ref{ margin-top:1.4rem; display:flex; align-items:center; gap:1rem; }
.moment__ref b{ font-family:var(--f-display); font-weight:600; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.moment__ref span{ color:var(--ink-56); font-size:1rem; }
.moment__doubt{ margin-top:2rem; font-size:var(--t-lead); color:var(--ink-56); max-width:28rem; }
.sv{ position:relative; padding:1.25rem 0 1.35rem; border-bottom:1px solid var(--line-soft); }
.sv:last-child{ border-bottom:0; }
.sv::before{
  content:""; position:absolute; left:calc(-2.2rem - 4px); top:1.65rem; width:9px; height:9px; border-radius:99px;
  background:var(--paper); border:1px solid var(--gold);
}
.sv__k{ font-family:var(--f-display); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.sv__v{ margin-top:.35rem; font-size:1.18rem; line-height:1.55; color:var(--ink); }
.sv--today{ margin-top:.6rem; padding:1.4rem 1.5rem; border-radius:10px; background:var(--gold); color:var(--dark); border-bottom:0; }
.sv--today::before{ background:var(--gold); border-color:var(--gold); left:calc(-2.2rem - 4px); }
.sv--today .sv__k{ color:rgba(22,23,27,.72); }
.sv--today .sv__v{ color:var(--dark); }
.moment__foot{ margin-top:1.8rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; color:var(--ink-56); font-size:1.02rem; }

/* ============================================================
   AUFSCHLAGEN: wie man das Buch liest
   Die senkrechte Linie ist der Falz eines aufgeschlagenen Buches.
   ============================================================ */
.aufschlag{ text-align:center; padding-block:calc(var(--sec) * .8); }
.aufschlag__in{ display:flex; flex-direction:column; align-items:center; }
.aufschlag__fold{ display:block; width:1px; height:clamp(3.5rem,8vw,6rem); margin-bottom:clamp(1.8rem,3.5vw,2.6rem);
  background:linear-gradient(to bottom, rgba(254,104,7,0), var(--gold)); transform-origin:top center; }
.aufschlag h2{ font-size:var(--t-h2); max-width:24ch; }
.aufschlag .lead{ margin-top:1.6rem; max-width:38rem; }

/* ============================================================
   DAS FUNDAMENT: vier Teile bauen ein Haus
   ============================================================ */
.haus{ background:linear-gradient(to bottom, var(--paper) 0%, var(--paper-deep) 22%, var(--paper-deep) 78%, var(--paper) 100%); }
.haus__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(1.6rem,4vw,4rem); align-items:end; margin-bottom:clamp(3rem,6vw,5rem); }
.haus__head h2{ font-size:var(--t-h2); }
/* Vier Spalten wie ein Inhaltsverzeichnis. Die goldene Linie ist das Fundament,
   auf dem alle vier Teile stehen. */
.plan{ position:relative; }
.plan__rule{ display:block; height:1px; background:var(--gold); transform-origin:left center; }
.plan__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.pcol{ padding:clamp(1.6rem,2.4vw,2.2rem) clamp(1.1rem,1.8vw,1.8rem) 0; border-left:1px solid var(--line-soft); }
.pcol:first-child{ border-left:0; padding-left:0; }
.pcol:last-child{ padding-right:0; }
.pcol__n{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.9rem,2.6vw,2.5rem); line-height:1; color:var(--gold); }
.pcol__t{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.2; letter-spacing:.01em; margin-top:1rem; }
.pcol__s{ margin:.4rem 0 0; font-size:1rem; color:var(--ink-56); }
.pcol__list{ list-style:none; margin:1.5rem 0 0; padding:0; }
.pcol__list li{ display:grid; grid-template-columns:2rem 1fr; gap:.6rem; align-items:baseline; padding:.7rem 0; border-top:1px solid var(--line-soft); font-size:1.06rem; line-height:1.38; color:var(--ink-76); }
.pcol__list b{ font-family:var(--f-display); font-weight:600; font-size:.76rem; letter-spacing:.04em; color:var(--gold-warm); font-variant-numeric:tabular-nums; }

/* ============================================================
   AUTOR
   ============================================================ */
.autor{ padding-bottom:calc(var(--sec) * .55); }
.autor__grid{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(2rem,6vw,7rem); align-items:center; }
.portrait{ position:relative; aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:var(--paper-deep); will-change:transform; }
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; filter:saturate(.86) contrast(1.02); }
.portrait::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(245,245,244,.08); border-radius:inherit; pointer-events:none; }
.portrait__frame{ position:absolute; left:-14px; top:28px; bottom:-14px; width:1px; background:var(--gold); }
.portrait__cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem .95rem;
  font-family:var(--f-display); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(transparent, rgba(28,30,36,.72));
}
.autor h2{ font-size:var(--t-h2); margin:0 0 1.8rem; }
.autor__body{ font-size:1.22rem; line-height:1.68; color:var(--ink-76); max-width:38rem; }
.sig{ margin-top:2rem; padding-top:1.3rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.2rem; }
.sig__n{ font-family:var(--f-display); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.sig__c{ font-size:1rem; color:var(--ink-56); }

/* ============================================================
   KAUF
   ============================================================ */
.buy{ position:relative; overflow:clip; background:linear-gradient(to bottom, var(--paper) 0%, var(--night) 38%); }
.section.buy{ padding-top:calc(var(--sec) * .75); padding-bottom:calc(var(--sec) * .8); }
.buy__light{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(38% 42% at 72% 52%, rgba(254,104,7,.13), transparent 70%); }
.buy .shell{ position:relative; }
.buy__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.buy h2{ font-size:var(--t-h1); margin:0 0 1.6rem; }
.buy__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.2rem; margin-top:2.2rem; }
.buy__more{ margin-top:1.6rem; }
.buy__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; margin-top:1.8rem; color:var(--paper-52); font-size:1.02rem; }
.buy__price b{ font-family:var(--f-display); font-weight:400; font-size:2.2rem; letter-spacing:.03em; color:var(--ink); }
.buy .bookstage{ --bw:clamp(200px,20vw,290px); }

/* ============================================================
   BUCHSEITE: Fakten, Einträge, Kapitel, Fragen
   ============================================================ */
.sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(1.6rem,4vw,4rem); align-items:end; margin-bottom:clamp(2.8rem,5vw,4.5rem); }
.sec-head h2{ font-size:var(--t-h2); }
.sec-head .lead{ padding-bottom:.4rem; }

/* Einträge */
.stack__item{ position:sticky; top:11vh; margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.entry{
  background:var(--paper-lift); border:1px solid var(--line); border-radius:14px; will-change:transform;
  padding:clamp(1.8rem,4vw,3.8rem) clamp(1.4rem,4vw,4rem);
  box-shadow:0 34px 70px -60px rgba(31,33,40,.75);
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(1.6rem,4vw,4rem);
}
.entry__l{ border-right:1px solid var(--line); padding-right:clamp(1rem,3vw,3rem); }
.entry__head{ position:relative; padding-left:1.1rem; }
.entry__head::before{ content:""; position:absolute; left:0; top:.1rem; bottom:.15rem; width:2px; background:var(--gold); }
.entry__no{ font-family:var(--f-display); font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.entry__t{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.2; margin-top:.45rem; }
.entry__q{ font-family:var(--f-text); font-weight:400; font-size:clamp(1.25rem,1.7vw,1.5rem); line-height:1.45; margin-top:1.8rem; color:var(--ink); }
.entry__ref{ margin-top:1.1rem; }
.entry__ref b{ display:block; font-family:var(--f-display); font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.entry__ref span{ display:block; font-size:1rem; color:var(--ink-56); margin-top:.3rem; line-height:1.5; }
.entry__body{ font-size:1.14rem; line-height:1.7; color:var(--ink-76); }
.entry__today{ margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--gold-soft); }
.entry__today .label{ margin-bottom:.7rem; }
.entry__today p{ font-weight:500; font-size:1.12rem; line-height:1.6; color:var(--ink); }

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.legal{ max-width:46rem; }
.legal h2{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.15rem; margin:2.6rem 0 .8rem; letter-spacing:.01em; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--ink-76); line-height:1.75; }
.legal .fill{ background:rgba(254,104,7,.14); border-bottom:1px solid var(--gold); padding:0 .25em; color:var(--ink); }

/* ============================================================
   FUSS
   ============================================================ */
.foot{ background:var(--night); color:var(--ink); padding-block:clamp(3.5rem,6vw,5.5rem) clamp(2rem,3vw,3rem); }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.8fr)); gap:clamp(2rem,4vw,4rem); }
.foot__brand .brand{ font-size:1.15rem; }
.foot__brand p{ margin-top:1.3rem; font-size:1.04rem; color:var(--paper-52); max-width:26rem; }
.foot h4{ font-family:var(--f-display); font-weight:600; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-warm); margin-bottom:1.1rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot ul a{ font-size:1.06rem; color:var(--paper-76); transition:color .2s var(--ease-out); }
@media (hover:hover){ .foot ul a:hover{ color:var(--gold-warm); } }
.foot__bot{ margin-top:clamp(2.6rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid var(--line-night);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; font-size:.98rem; color:var(--paper-52); }

/* Mobiler Kaufbalken */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-dock); display:none;
  padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(20,21,25,.9); border-top:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform:translateY(115%); transition:transform .45s var(--ease-drawer);
}
.dock.is-up{ transform:none; }
.dock .btn{ width:100%; justify-content:space-between; }

/* ============================================================
   BEWEGUNG: Grundzustände
   ============================================================ */
.rv{ opacity:0; transform:translateY(24px); }
.mask-line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.mask-line > span{ display:block; will-change:transform; }
.no-motion .rv{ opacity:1 !important; transform:none !important; filter:none !important; }
.no-motion .intro{ display:none; }
.no-motion .moment__verse{ filter:none !important; opacity:1 !important; }

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width:1100px) and (min-width:861px){
  .plan__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2.6rem; }
  .pcol:nth-child(odd){ border-left:0; padding-left:0; }
  .pcol:nth-child(even){ padding-right:0; }
}
@media (max-width:1100px){
  .sec-head,.haus__head{ grid-template-columns:1fr; align-items:start; gap:1.4rem; }
  .autor__grid, .buy__grid{ grid-template-columns:1fr; gap:2.6rem; }
  .portrait{ max-width:24rem; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1/-1; }
}
@media (min-width:1101px){
}
@media (max-width:860px){
  :root{ --t-body:1.125rem; }
  .mast__side a{ display:none; }
  .mast{ grid-template-columns:42px 1fr 42px; gap:.8rem; }
  .mast__brand{ justify-content:center; white-space:nowrap; }
  .burger{ display:block; }
  .mast{ padding-block:.9rem; }
  .brand{ font-size:.95rem; }
  .mast.is-solid .brand{ font-size:.85rem; }
  .spin{ --split-y:76%; --book-y:47%; }
  .spin__book{ --bw:clamp(150px, min(58vw, 38vh), 300px); }
  /* Preise wandern mobil in das untere Band, statt neben dem Buch zu fehlen */
  .spin__meta{
    left:var(--pad-x); right:var(--pad-x); top:calc(var(--split-y) + clamp(1.1rem,3.4vh,2.2rem)); transform:none;
    display:flex; justify-content:space-between; gap:1rem; text-align:left;
  }
  .spin__price{ font-size:.64rem; }
  .spin__price b{ font-size:1.2rem; }
  .spin__hint{ display:block; }
  /* Begriffe verteilen sich über die ganze Höhe: oben und unten stehen sie frei vom Buch */
  .terms{ top:calc(4.6rem + env(safe-area-inset-top)); bottom:.9rem; transform:none; align-content:space-between; }
  .terms__track{ font-size:clamp(1.9rem,9.4vw,3.4rem); }
  .aufschlag{ padding-block:1rem calc(var(--sec) * .7); }
  .tlink{ padding-block:.8rem; }
  .foot ul{ gap:0; }
  .foot ul a{ display:inline-block; padding-block:.55rem; }
  .pitch__cols{ grid-template-columns:1fr; gap:0; }
  .pitch__cols > div + div{ margin-top:1.1em; }
  .last__stage,.moment__stage{ grid-template-columns:1fr; min-height:0; gap:2.6rem; }
  .pile{ min-height:0; }
  .plan__grid{ grid-template-columns:1fr; }
  .pcol{ border-left:0; padding:2rem 0 0; }
  .pcol + .pcol{ margin-top:1rem; border-top:1px solid var(--line); }
  .pcol__head{ display:grid; grid-template-columns:3.2rem 1fr; align-items:end; column-gap:.6rem; }
  .pcol__n{ grid-row:span 2; align-self:center; }
  .pcol__t{ margin-top:0; }
  .f-b, .f-c, .f-d, .f-e, .f-f{ grid-column:span 1; grid-row:span 1; }
  .entry{ grid-template-columns:1fr; gap:1.8rem; }
  .entry__l{ border-right:0; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:1.8rem; }
  .stack__item{ position:relative; top:auto; }
  .dock{ display:block; }
}
@media (max-width:560px){
  .btn{ width:100%; justify-content:space-between; }
  .foot__grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Marke: Seitenverhältnis erzwingen, Haarlinien bei kleinen Größen verstärken */
.mark,.spine__mark{ height:auto; aspect-ratio:642/645; }
.mark path,.spine__mark path{ stroke:currentColor; stroke-width:.45px; vector-effect:non-scaling-stroke; }
@media (max-width:860px){ .foot{ padding-bottom:calc(6.5rem + env(safe-area-inset-bottom)); } }
section[id]{ scroll-margin-top:5.5rem; }