/* ============================================================
   book.css — gemeinsames Layout der vier Buchseiten (Hero, Zitate,
   Leseprobe, Feature, Deepscan-Cast, Galerie, Kapitel, Kaufen).
   Wird von tools/build/build_books.py referenziert; der Buch-Akzent
   kommt pro Seite als :root{--acc:var(--acc-…)} aus site.css-Tokens.
   ============================================================ */
/* Hero als Flexzeile: die Textspalte bestimmt die Höhe, das Cover übernimmt
   sie in GANZER Höhe; die Breite setzt promo.js aus dem echten Cover-
   Seitenverhältnis (nie beschnitten, keine Passepartout-Ränder).
   Ohne JS: 300px-Fallback wie früher. */
.hero{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:min(3rem,6vw)}
.hero .coverbox{position:relative;flex:0 0 auto;width:300px;background:var(--surface2);overflow:hidden}
.hero .coverbox img,.hero .coverbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95)}
.hero .body{flex:1 1 0;min-width:0;background:var(--surface);padding:min(2.6rem,5vw);position:relative}
/* Schmal: untereinander, Cover in voller Breite; Höhe folgt dem Verhältnis,
   gedeckelt auf 70vh (Breite dann entsprechend kleiner, zentriert) */
@media (max-width:1000px){
  .hero{flex-direction:column}
  .hero .coverbox{width:100%;aspect-ratio:2/3;max-width:min(100%, calc(70vh * 2 / 3));align-self:center}
}
.hero .body::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--acc)}
.hero h1{font-size:clamp(1.9rem,4vw,3rem)}
.hero .sub{font-family:Georgia,serif;font-style:italic;color:var(--muted);font-size:1.15rem;margin:.15rem 0 1.1rem}
.hero .blurb p{color:var(--muted);max-width:56em;margin-bottom:.9em}
.hero .actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.agenote{display:inline-block;margin-top:1.1rem;font-family:"Inconsolata",monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:.3em .8em}

.veil{position:absolute;inset:0}
.coverbox .veil img{filter:blur(24px) saturate(.7);transform:scale(1.08)}
.veil-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;
  background:rgba(16,10,8,.45);color:#f0e6d4;border:0;cursor:pointer;
  font-family:"Inconsolata",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.8}
.veil-btn:hover{background:rgba(16,10,8,.6)}
.coverbox .veil.revealed img{filter:saturate(.95);transform:none}
.veil.revealed .veil-btn{display:none}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:840px){.quotes{grid-template-columns:1fr}}
.quotes blockquote.q{border:0;border-left:3px solid var(--acc)}

.leseprobe-panel{background:var(--surface);border:1px solid var(--line);padding:min(2.4rem,5vw);margin-top:min(3rem,6vw)}
.excerpt{max-width:68ch;margin-top:1.2rem}
.excerpt p{font-family:Georgia,serif;font-size:1.05rem;line-height:1.75;margin-bottom:1em}
.excerpt p:first-of-type::first-letter{font-size:3.1em;float:left;line-height:.85;padding-right:.09em;color:var(--acc)}
.leseprobe:not(.open) .excerpt{max-height:240px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}

.feature{display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--acc);
  padding:1.5rem 1.7rem;margin-top:min(3rem,6vw)}
@media (max-width:640px){.feature{grid-template-columns:1fr}}
.feature h2{font-size:1.35rem;margin-bottom:.25rem}
.feature p{color:var(--muted);font-size:.93rem;margin:0}

/* ---------- Deepscan: Figuren, Szenen, Kapitel ---------- */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cast .fig{position:relative;background:var(--surface);padding:1.2rem 1.3rem}
.cast .fig::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc)}
.cast .fig .pav{position:relative;margin:-1.2rem -1.3rem .9rem;overflow:hidden;background:var(--surface2);border-bottom:1px solid var(--line)}
.cast .fig .pav img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:saturate(.92)}
/* Hover: Porträt (master) blendet weg, darunter scrollt eine Doppel-Ansicht
   seitlich durch — Buchszene und Alltag, jeweils mit Label. */
.cast .fig .pav .pv-base{position:relative;z-index:1;transition:opacity 1.6s ease}
.cast .fig .pav .pv-strip{position:absolute;top:0;left:0;height:100%;display:flex;z-index:2;
  opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.cast .fig .pav .pv-strip.pv-n1{width:100%}
/* Animation dauerhaft zugewiesen, aber pausiert — beim Mouse-out friert sie an der
   aktuellen Swipe-Position ein und blendet von dort weich aus (kein Zurückspringen). */
.cast .fig .pav .pv-strip.pv-n2{width:200%;animation:pvpan 20s ease-in-out infinite;
  animation-play-state:paused}
.cast .fig .pav .pv-shot{position:relative;height:100%;flex:1 0 0}
.cast .fig .pav .pv-shot img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.cast .fig .pav .pv-tag{position:absolute;left:.55rem;bottom:.55rem;z-index:3;
  font-family:"Inconsolata",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.22rem .5rem;color:#f2e9dc;background:rgba(20,16,12,.72);border:1px solid rgba(240,230,216,.28);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cast .fig:hover .pav .pv-base{opacity:0}
.cast .fig:hover .pav .pv-strip{opacity:1}
.cast .fig:hover .pav .pv-strip.pv-n2{animation-play-state:running}
@keyframes pvpan{0%{transform:translateX(0)}4%{transform:translateX(0)}
  40%{transform:translateX(-50%)}58%{transform:translateX(-50%)}96%{transform:translateX(0)}
  100%{transform:translateX(0)}}
/* Touch: Strip weg UND Porträt nie wegblenden (sonst leeres Bild beim Tap) */
@media (hover:none){.cast .fig .pav .pv-strip{display:none}
  .cast .fig:hover .pav .pv-base,.cast .fig .pav .pv-base{opacity:1}}
@media (prefers-reduced-motion:reduce){.cast .fig .pav .pv-strip.pv-n2{animation:none}}
.cast .fig h3{font-size:1.12rem;margin-bottom:.3rem}
.cast .fig .bio{font-size:.85rem;color:var(--muted)}
.cast .fig .q{font-family:Georgia,serif;font-style:italic;font-size:.88rem;margin-top:.6rem;color:var(--fg)}
.cast .fig details{margin-top:.7rem;font-size:.84rem;color:var(--muted)}
.cast .fig summary{cursor:pointer;font-family:"Inconsolata",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cast .fig details p{margin-top:.5rem}

.sgallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sgallery figure{margin:0;background:var(--surface);padding:10px 10px 8px}
.sgallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.92)}
.sgallery figcaption{padding:.55rem .2rem 0;font-family:"Inconsolata",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.chapters{background:var(--surface);border:1px solid var(--line);padding:min(2rem,5vw)}
.chapters ol{columns:2;column-gap:2.5rem;margin:0;padding-left:1.4em}
@media (max-width:700px){.chapters ol{columns:1}}
.chapters li{margin-bottom:.4em;color:var(--muted);break-inside:avoid}
.chapters li::marker{font-family:"Inconsolata",monospace;color:var(--acc);font-size:.8em}
.chapters li b{color:var(--fg);font-weight:500}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.chgrid .ch{background:var(--surface);padding:0 0 1.1rem}
.chgrid .ch img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:saturate(.92);border-bottom:1px solid var(--line)}
.chgrid .ch .noimg{width:100%;aspect-ratio:16/10;background:var(--surface2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:"Inconsolata",monospace;color:var(--faint);font-size:1.6rem}
.chgrid .ch .kicker{margin:1rem 1.2rem .35rem}
.chgrid .ch h3{font-size:1.05rem;margin:0 1.2rem .35rem}
.chgrid .ch p{font-size:.85rem;color:var(--muted);margin:0 1.2rem}

.buy{display:grid;grid-template-columns:1.2fr .8fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:min(3rem,6vw)}
@media (max-width:840px){.buy{grid-template-columns:1fr}}
.buy>div{background:var(--surface);padding:min(2rem,5vw)}
.buy h2{font-size:1.3rem;margin-bottom:.8rem}
.buy p{color:var(--muted);margin-bottom:.8em}
table{border-collapse:collapse;width:100%}
td{padding:.45rem .8rem .45rem 0;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--faint);white-space:nowrap;font-family:"Inconsolata",monospace;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding-top:.6rem}

/* ---------- 18+-Schleier vor dem Deepscan-Block (deepscan_gate) ---------- */
.dsgate-note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--acc);
  padding:1.5rem 1.7rem;margin-top:min(3rem,6vw)}
.dsgate-note p{color:var(--muted);font-size:.93rem;max-width:56em;margin:.9rem 0 1.2rem}
.dsgate.open .dsgate-note{display:none}
.dsgate-body[hidden]{display:none}