/* ============================================================
   SVENSON EVERWOOD — DARK GRIMOIRE
   Designsystem der Autorenwebsite. Tokens identisch zum
   Dashboard v2 (siehe A:\Claude\Roadmaps\dashboard-umbau-roadmap.html).
   Keine externen Fonts, keine externen Scripts.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Grund — tiefes Schwarz mit alten Tintentönen */
  --bg:#03050A; --bg2:#060A12; --surf:#080F1C; --surf2:#0C1525;
  --border:#1A2540; --border2:#2A3A60;

  /* Gold — altes Pergament-Gold, kein Tech-Neon */
  --gold:#C8912A; --gold2:#8B5E1A; --gold-light:#E8B84B;
  --gold-bg:rgba(200,145,42,.10); --gold-glow:rgba(200,145,42,.35);

  /* Blut-Purpur — die Fantasy-Farbe */
  --crimson:#8B1A3A; --crimson2:#6B1228;
  --crimson-bg:rgba(139,26,58,.12); --crimson-glow:rgba(139,26,58,.4);
  --rose:#C04070;   /* Romantasy-Akzent */

  /* Gezeiten — der zweite Strang (Romantasy), passend zum Coral-Compass-Cover */
  --tide:#2E9E96; --tide-light:#5FD3C4; --tide-glow:rgba(46,158,150,.38);
  /* The Bone Ledger: Knochen-Elfenbein auf Blut. Bewusst NICHT das
     vorhandene Crimson des Vorbestell-Badges — sonst liest sich der
     ganze Strang wie ein Statushinweis. */
  --bone:#A33249; --bone-light:#F7EEDD; --bone-glow:rgba(163,50,73,.40);
  /* Nachtbrennerei: Glut auf Stahlblau, dem Cover abgenommen. Bewusst
     roter als das Pergament-Gold (Hue 20 statt 44) und deutlich saettigter —
     sonst liest sich der Strang wie eine zweite Drachen-Chronik. */
  --ember:#C2410C; --ember-light:#FF9147; --ember-glow:rgba(194,65,12,.42);
  /* The Fraying: Indigo mit hellem Fadensilber. Der fuenfte Strang ist wieder
     Dark Romantasy und lag deshalb zuerst auf dem Bone-Akzent — zwei
     fuenfbaendige Reihen in derselben Farbe waren nicht auseinanderzuhalten.
     Indigo (Hue 250) ist der einzige Bereich, den keiner der vier anderen
     Straenge belegt, und passt zu den blau-violetten Covern der Reihe. */
  --thread:#4C3FBF; --thread-light:#A99BFF; --thread-glow:rgba(76,63,191,.42);

  /* Die Geschmacklosen: Giftgelb auf Anthrazit, den Covern der Trilogie
     abgenommen (Kolben, Kapsel, Glas leuchten gelbgruen). Hue 68 ist der
     letzte freie Bereich — Gold liegt bei 42, Ember bei 24, Bone bei 39.
     Gemessen gegen alle vier Flaechen der Seite: 14,2:1 bis 15,9:1. */
  --venom:#8FA30F; --venom-light:#D9EE5C; --venom-glow:rgba(143,163,15,.42);

  /* Zwei Ufer: Violett-Magenta, den Covern der Reihe abgenommen (Kristall,
     Dornen, Nebel leuchten violett). Hue 276, damit 28 Grad von Thread (248)
     entfernt — Ember steht mit 18 Grad zu Gold naeher. Gemessen gegen die
     vier Flaechen: 7,4:1 bis 8,3:1. */
  --rift:#8B2FC9; --rift-light:#C98BF5; --rift-glow:rgba(139,47,201,.42);

  /* Tinte auf dunklem Pergament */
  --text:#D8CBBB; --text2:#9A9086;
  /* --text3 traegt die Nebentexte: Genre-Zeile, Fussnoten der Preistafel,
     Kennzahlen-Beschriftungen, den DE/EN-Schalter und den Umdrehen-Hinweis.
     Alles davon steht bei 0,6-0,86rem. Der alte Wert #6E655C kam auf 3,2-3,6:1
     gegen die drei Grundflaechen — unter den 4,5:1, die WCAG AA fuer Text
     dieser Groesse verlangt, und der WebGL-Nebel liegt noch darueber.
     #887D72 haelt den Farbton und erreicht 4,54:1 (surf2) bis 5,07:1 (bg).
     Ein dunklerer Wert hier macht Preis-Fussnoten unlesbar. */
  --text3:#887D72;
  --parchment:#E8DCC8;

  --serif:Georgia,'Palatino Linotype','Book Antiqua',Palatino,'Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'Cascadia Code',Consolas,'Courier New',monospace;

  --r:10px; --rl:16px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:74px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  min-height:100vh;
}

/* ---------- 2. ATMOSPHÄRE: SHADER, PERGAMENT, VIGNETTE ---------- */

/* WebGL-Nebel (von site.js befüllt) */
#bg-shader{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0;
  transition:opacity 1.6s ease;
}
#bg-shader.ready{opacity:.85;}

/* Glut-Partikel */
#bg-embers{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}

/* Pergament-Textur: Adern + feines Gitter + Farbschleier */
body::before{
  content:''; position:fixed; inset:0; z-index:2; pointer-events:none;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 85%, rgba(139,26,58,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 12%, rgba(200,145,42,.075) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(192,64,112,.035) 0%, transparent 70%),
    linear-gradient(rgba(26,37,64,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,37,64,.13) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,64px 64px,64px 64px;
}

/* CRT-Vignette + feine Scanlines */
body::after{
  content:''; position:fixed; inset:0; z-index:3; pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.055) 2px 4px),
    radial-gradient(ellipse 90% 75% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}

.page{position:relative;z-index:4;}

/* ---------- 3. SCROLL-FORTSCHRITT ---------- */
#scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--crimson),var(--gold),var(--gold-light));
  box-shadow:0 0 12px var(--gold-glow);
  transition:width .1s linear;
}

/* ---------- 4. HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;gap:24px;
  padding:0 clamp(18px,4vw,48px);
  background:rgba(3,5,10,.72);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--border);
  transition:background .35s var(--ease),border-color .35s var(--ease),height .35s var(--ease);
}
.site-header.scrolled{
  background:rgba(3,5,10,.93);
  border-bottom-color:var(--border2);
  box-shadow:0 10px 40px -20px rgba(0,0,0,.9);
}
/* Goldfaden unter dem Header */
.site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-glow) 20%,var(--crimson-glow) 50%,var(--gold-glow) 80%,transparent);
  opacity:.6;
}

.brand{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--text);
  font-family:var(--serif);font-size:1.06rem;font-weight:700;letter-spacing:.055em;
  white-space:nowrap;flex-shrink:0;
}
.brand .rune{
  font-size:1.3rem;color:var(--gold-light);line-height:1;
  filter:drop-shadow(0 0 10px var(--gold-glow));
  transition:transform .5s var(--ease),filter .4s var(--ease);
}
.brand:hover .rune{transform:rotate(180deg) scale(1.12);filter:drop-shadow(0 0 18px var(--gold-glow));}
.brand em{font-style:normal;color:var(--gold-light);}

.site-nav{display:flex;gap:4px;margin-left:auto;}
.site-nav a{
  position:relative;
  padding:8px 14px;
  color:var(--text2);text-decoration:none;
  font-size:.83rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  transition:color .25s var(--ease);
}
.site-nav a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s var(--ease);
}
.site-nav a:hover{color:var(--text);}
.site-nav a:hover::after{transform:scaleX(1);}
.site-nav a.active{color:var(--gold-light);}
.site-nav a.active::after{transform:scaleX(1);background:linear-gradient(90deg,transparent,var(--gold-light),transparent);}

.lang-switch{
  display:flex;align-items:center;gap:1px;flex-shrink:0;
  border:1px solid var(--border);border-radius:20px;padding:2px;
  background:rgba(0,0,0,.35);
}
.lang-switch a{
  padding:3px 12px;border-radius:16px;
  color:var(--text3);text-decoration:none;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;
  transition:all .25s var(--ease);
}
.lang-switch a:hover{color:var(--text2);}
.lang-switch a.active{
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:#0A0603;
  box-shadow:0 0 14px var(--gold-glow);
}

/* Mobile-Menü-Schalter */
.nav-toggle{
  display:none;margin-left:auto;
  width:42px;height:42px;border:1px solid var(--border);border-radius:8px;
  background:rgba(0,0,0,.35);color:var(--gold-light);
  cursor:pointer;align-items:center;justify-content:center;
  font-size:1.1rem;transition:all .25s var(--ease);
  flex-shrink:0;  /* sonst quetscht der Header den Knopf auf wenige Pixel */
}
.nav-toggle:hover{border-color:var(--gold2);}

/* ---------- 5. TYPOGRAFIE ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;text-wrap:balance;color:var(--text);}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:16px;
}
.eyebrow::before,.eyebrow::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent);}
.eyebrow.left-only::after{display:none;}

.section-title{
  font-size:clamp(1.7rem,4vw,2.6rem);
  margin-bottom:18px;
}
.section-title em{font-style:italic;color:var(--gold-light);}

.lede{
  font-size:clamp(1rem,1.6vw,1.14rem);
  color:var(--text2);max-width:66ch;line-height:1.85;
}
p{max-width:70ch;}
p + p{margin-top:1.1em;}

a{color:var(--gold-light);text-decoration-color:rgba(200,145,42,.35);text-underline-offset:3px;}
a:hover{color:var(--gold);}

/* Initial-Buchstabe für Erzähltext */
.dropcap::first-letter{
  float:left;font-family:var(--serif);font-size:4.1rem;line-height:.82;
  padding:6px 12px 0 0;
  color:var(--gold-light);
  text-shadow:0 0 26px var(--gold-glow);
}

/* ---------- 6. LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px);}
section.band{padding:clamp(64px,9vw,116px) 0;position:relative;}
section.band.tight{padding:clamp(44px,6vw,72px) 0;}

/* Trennornament zwischen Bändern */
.rule{
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:8px 0;color:var(--gold2);
}
.rule::before,.rule::after{
  content:'';height:1px;flex:1;max-width:220px;
  background:linear-gradient(90deg,transparent,var(--border2),transparent);
}
.rule span{font-size:.95rem;color:var(--gold);opacity:.7;letter-spacing:.4em;}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:flex;align-items:center;
  padding:clamp(48px,7vw,90px) 0 clamp(60px,8vw,110px);
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,6vw,80px);align-items:center;width:100%;
}
.hero h1{
  font-size:clamp(2.05rem,4.5vw,3.5rem);
  line-height:1.1;
  letter-spacing:-.01em;
  margin-bottom:24px;
}
/* Gold-Schimmer, der langsam über die Zeile wandert */
.shimmer{
  background:linear-gradient(100deg,
    var(--text) 0%,var(--text) 32%,
    var(--gold-light) 45%,#FFF3D0 50%,var(--gold-light) 55%,
    var(--text) 68%,var(--text) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 9s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:180% 0;}50%{background-position:-80% 0;}}

.hero .lede{margin-bottom:34px;font-size:clamp(1.02rem,1.7vw,1.2rem);}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* Schwebendes Cover mit Goldrahmen und Glut */
.hero-cover{
  position:relative;justify-self:center;
  perspective:1400px;width:min(100%,360px);
}
.hero-cover img{
  display:block;width:100%;height:auto;border-radius:4px;
  box-shadow:
    0 2px 0 rgba(200,145,42,.5),
    0 40px 80px -30px rgba(0,0,0,.95),
    0 0 90px -18px var(--crimson-glow);
  transform:rotateY(-9deg) rotateX(3deg);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
  animation:float 8s ease-in-out infinite;
}
.hero-cover:hover img{
  transform:rotateY(0deg) rotateX(0deg) scale(1.035);
  box-shadow:0 2px 0 var(--gold),0 50px 100px -30px rgba(0,0,0,1),0 0 120px -12px var(--gold-glow);
}
@keyframes float{0%,100%{translate:0 0;}50%{translate:0 -16px;}}
/* Lichtkranz hinter dem Cover */
.hero-cover::before{
  content:'';position:absolute;inset:-16% -22%;z-index:-1;
  background:radial-gradient(ellipse at 50% 50%,var(--crimson-glow) 0%,rgba(200,145,42,.14) 38%,transparent 70%);
  filter:blur(38px);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:1;transform:scale(1.09);}}

/* Doppel-Cover: Band 1 vorn, Band 2 dahinter */
.hero-cover.duo{width:min(100%,430px);aspect-ratio:1/.95;}
.hero-cover.duo img{
  position:absolute;animation:none;border-radius:3px;
}
.hero-cover.duo .c1{
  left:0;bottom:0;width:66%;z-index:2;
  transform:rotateY(-11deg) rotateX(2deg) translateZ(30px);
  box-shadow:0 2px 0 rgba(200,145,42,.55),0 40px 70px -26px rgba(0,0,0,.98),0 0 80px -20px var(--crimson-glow);
  animation:float 8s ease-in-out infinite;
}
.hero-cover.duo .c2{
  right:0;top:0;width:58%;z-index:1;opacity:.86;
  transform:rotateY(-15deg) rotateX(3deg);
  filter:saturate(.9) brightness(.88);
  box-shadow:0 2px 0 rgba(139,26,58,.5),0 34px 60px -26px rgba(0,0,0,.95),0 0 70px -22px var(--gold-glow);
  animation:float 8s ease-in-out infinite .9s;
}
.hero-cover.duo:hover .c1{transform:rotateY(-4deg) rotateX(0) translateZ(46px) scale(1.03);}
.hero-cover.duo:hover .c2{opacity:1;filter:none;transform:rotateY(-7deg) rotateX(0) translateX(4%) scale(1.02);}
.hero-cover.duo .sigil{bottom:-30px;}

/* Runenband am Cover */
.hero-cover .sigil{
  position:absolute;bottom:-22px;left:50%;translate:-50% 0;
  font-size:.62rem;letter-spacing:.5em;color:var(--gold);opacity:.55;
  text-transform:uppercase;white-space:nowrap;
}

/* Scroll-Hinweis */
.scroll-hint{
  position:absolute;bottom:26px;left:50%;translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text3);
  text-decoration:none;
}
.scroll-hint span.line{width:1px;height:34px;background:linear-gradient(180deg,var(--gold),transparent);animation:drop 2.4s ease-in-out infinite;}
@keyframes drop{0%{opacity:0;transform:scaleY(.2);transform-origin:top;}45%{opacity:1;transform:scaleY(1);transform-origin:top;}100%{opacity:0;transform:scaleY(1);transform-origin:bottom;}}

/* ---------- 8. BUTTONS (WACHSSIEGEL) ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:13px 28px;border-radius:3px;
  font-family:var(--sans);font-size:.8rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--gold2);
  background:linear-gradient(160deg,#1B1008,#0C0704);
  color:var(--gold-light);
  overflow:hidden;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease),transform .25s var(--ease);
}
.btn::before{ /* Gold-Füllung von unten */
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn::after{ /* Lichtstreif */
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,240,200,.35),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.btn:hover{color:#100A03;border-color:var(--gold-light);box-shadow:0 10px 34px -12px var(--gold-glow);transform:translateY(-2px);}
.btn:hover::before{transform:translateY(0);}
.btn:hover::after{left:130%;}
.btn > *{position:relative;z-index:1;}

.btn.seal{ /* Blut-Siegel-Variante */
  border-color:var(--crimson);
  color:#E8B0C0;
  background:linear-gradient(160deg,#1A0810,#0A0407);
}
.btn.seal::before{background:linear-gradient(180deg,var(--crimson),var(--crimson2));}
.btn.seal:hover{color:#FFE8EE;border-color:var(--rose);box-shadow:0 10px 34px -12px var(--crimson-glow);}

.btn.ghost{
  border-color:var(--border2);color:var(--text2);
  background:transparent;
}
.btn.ghost::before{background:linear-gradient(180deg,rgba(200,145,42,.14),rgba(200,145,42,.04));}
.btn.ghost:hover{color:var(--gold-light);border-color:var(--gold2);box-shadow:none;}

.btn.lg{padding:16px 34px;font-size:.86rem;}

/* ---------- 9. KARTEN / OBERFLÄCHEN ---------- */
.card{
  position:relative;
  background:linear-gradient(160deg,var(--surf) 0%,var(--bg2) 100%);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:clamp(22px,3vw,32px);
  overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.card::before{ /* diagonaler Glanz */
  content:'';position:absolute;top:-60%;left:-30%;width:60%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.028),transparent);
  transform:rotate(12deg);pointer-events:none;
}
.card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:0 22px 50px -28px rgba(0,0,0,.95);}

/* Karte mit rotierendem Goldrand */
.card.aura::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0%,var(--gold-glow) 12%,transparent 26%,transparent 60%,var(--crimson-glow) 74%,transparent 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 9s linear infinite;opacity:0;transition:opacity .5s var(--ease);
}
.card.aura:hover::after{opacity:1;}
@keyframes spin{to{transform:rotate(1turn);}}

.card-label{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:12px;
}

.grid{display:grid;gap:clamp(16px,2.4vw,26px);}
.grid.g2{grid-template-columns:repeat(2,1fr);}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid.g4{grid-template-columns:repeat(4,1fr);}

/* ---------- 10. BADGES ---------- */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 12px;border-radius:20px;
  font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.badge.gold{background:var(--gold-bg);color:var(--gold-light);border-color:rgba(200,145,42,.35);}
.badge.crimson{background:var(--crimson-bg);color:var(--rose);border-color:rgba(139,26,58,.4);}
.badge.live{background:rgba(0,184,106,.10);color:#3FD08E;border-color:rgba(0,184,106,.3);}
.badge.live .dot{width:6px;height:6px;border-radius:50%;background:#3FD08E;box-shadow:0 0 8px #3FD08E;animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ---------- 11. BUCH-KARTEN MIT 3D-FLIP ---------- */
.book-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,4vw,52px);}

.book{
  display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,3.4vw,44px);
  align-items:start;
}
.book.solo{grid-template-columns:1fr;}

/* Der klickbare Buchkörper */
.flipper{
  perspective:1600px;width:min(100%,300px);justify-self:center;
  cursor:pointer;
}
.flipper-inner{
  position:relative;width:100%;aspect-ratio:1600/2560;
  transform-style:preserve-3d;
  transition:transform .95s var(--ease);
}
.flipper.flipped .flipper-inner{transform:rotateY(180deg);}
.flip-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:4px;overflow:hidden;
  box-shadow:0 2px 0 rgba(200,145,42,.42),0 34px 64px -28px rgba(0,0,0,.95),0 0 70px -22px var(--crimson-glow);
}
/* <picture> ist von Haus aus inline und wuerde die Bildflaeche nicht
   ausfuellen. Seit 2026-08-27 liefern die Cover WebP mit JPEG-Rueckfall. */
.flip-face picture,.hero-cover picture{display:block;width:100%;height:100%;}
.flip-face img{width:100%;height:100%;object-fit:cover;display:block;}
.flip-back{
  transform:rotateY(180deg);
  /* backface-visibility allein versteckt die Rueckseite nur optisch: Der
     Kauf-Button darauf blieb tabbierbar und der Klappentext blieb fuer
     Screenreader lesbar. Auf buecher.html waren das 16 unsichtbare
     Amazon-Links im Fokusverlauf und 16-mal der Buchtitel doppelt vorgelesen.
     visibility nimmt beides heraus. Die Verzoegerung von .48s ist die halbe
     Drehzeit (.95s): Beim Zuklappen verschwindet die Rueckseite erst, wenn sie
     hochkant steht — sonst blinkt sie mitten in der Drehung weg. */
  visibility:hidden;
  transition:visibility 0s linear .48s;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(139,26,58,.16),transparent 60%),
    linear-gradient(165deg,var(--surf2),#050810);
  border:1px solid var(--border2);
  padding:26px 22px;
  display:flex;flex-direction:column;gap:12px;
  font-size:.86rem;line-height:1.7;color:var(--text2);
}
.flipper.flipped .flip-back{visibility:visible;transition-delay:0s;}
/* War ein <h4>. Die Rueckseite ist keine Gliederungsebene — sie wiederholt
   nur den Titel, der daneben schon als Ueberschrift steht. */
.flip-back .flip-title{font-size:1.05rem;color:var(--gold-light);margin-bottom:2px;
  font-family:var(--serif);line-height:1.3;}
.flip-back p{max-width:none;font-size:.85rem;}
.flip-back .btn{margin-top:auto;justify-content:center;padding:11px 18px;font-size:.7rem;}

/* Hinweis „umdrehen" */
.flip-cue{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text3);transition:color .3s var(--ease);
}
.flipper:hover + .flip-cue,.flipper.flipped + .flip-cue{color:var(--gold);}
.flip-cue .glyph{transition:transform .6s var(--ease);}
.flipper.flipped + .flip-cue .glyph{transform:rotateY(180deg);}

/* Bandtitel-Block */
.book-body h3{font-size:clamp(1.5rem,3vw,2.1rem);margin:12px 0 8px;}
.book-meta{font-size:.78rem;color:var(--text3);letter-spacing:.06em;margin-bottom:16px;}
.book-blurb{color:var(--text2);margin-bottom:22px;}

/* Preistafel */
.price-table{list-style:none;margin:0 0 22px;border-top:1px solid var(--border);}
.price-table li{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:11px 2px;border-bottom:1px solid var(--border);
  font-size:.9rem;
}
.price-table .fmt{color:var(--text);font-weight:600;min-width:118px;}
.price-table .price{
  margin-left:auto;font-family:var(--serif);font-size:1.12rem;
  color:var(--gold-light);font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.price-table .note{width:100%;font-size:.72rem;color:var(--text3);letter-spacing:.05em;}

/* Kaufreihe */
.buy-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* Hinweisfeld für noch fehlende Angaben */
.pending{
  display:block;max-width:56ch;
  font-size:.85rem;color:var(--text2);
  border:1px dashed var(--border2);border-radius:var(--r);
  padding:14px 18px;background:rgba(200,145,42,.045);
}
.pending strong{color:var(--gold-light);}

/* Buch-Kennzahlen */
.book-facts{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 22px;}
.fact{min-width:88px;}
.fact .v{font-family:var(--serif);font-size:1.4rem;color:var(--gold-light);line-height:1.2;font-variant-numeric:tabular-nums;}
.fact .k{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text3);}

/* ---------- 12. COUNTDOWN ---------- */
.countdown{
  display:flex;gap:clamp(10px,2vw,20px);flex-wrap:wrap;margin:26px 0 8px;
}
.cd-unit{
  min-width:82px;flex:1 1 82px;text-align:center;
  padding:16px 10px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(200,145,42,.07),rgba(0,0,0,.3));
  border:1px solid var(--border);
  position:relative;overflow:hidden;
}
.cd-unit::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.cd-unit .n{
  display:block;font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.5rem);
  color:var(--gold-light);line-height:1.1;font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px var(--gold-glow);
}
.cd-unit .l{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text2);margin-top:5px;display:block;}

/* ---------- 13. ZITAT / „DAS FLÜSTERN" ---------- */
.whisper{
  text-align:center;padding:clamp(50px,8vw,96px) 0;position:relative;
}
.whisper blockquote{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.25rem,3.4vw,2.15rem);
  line-height:1.5;color:var(--parchment);
  max-width:22ch;margin:0 auto;text-wrap:balance;
  opacity:.94;
}
.whisper blockquote::before,.whisper blockquote::after{
  content:'»';color:var(--gold2);font-size:1.4em;line-height:0;vertical-align:-.18em;opacity:.55;
}
.whisper blockquote::after{content:'«';}
.whisper cite{
  display:block;margin-top:26px;font-style:normal;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text3);
}
/* Tinten-Einblenden */
.ink{opacity:0;filter:blur(6px);transition:opacity 1.8s ease,filter 1.8s ease;}
.ink.seen{opacity:1;filter:blur(0);}

/* ---------- 14. LESEREIHENFOLGE ---------- */
.path{position:relative;display:grid;gap:0;}
.path-step{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding-bottom:34px;position:relative;
}
.path-step:last-child{padding-bottom:0;}
.path-node{
  width:46px;height:46px;flex-shrink:0;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--gold2);
  background:radial-gradient(circle at 40% 35%,rgba(200,145,42,.22),rgba(0,0,0,.6));
  font-family:var(--serif);font-size:1rem;color:var(--gold-light);
  box-shadow:0 0 22px -6px var(--gold-glow);position:relative;z-index:1;
}
.path-step::before{ /* Verbindungslinie */
  content:'';position:absolute;left:23px;top:46px;bottom:-4px;width:1px;
  background:linear-gradient(180deg,var(--gold2),transparent);
  opacity:.5;
}
.path-step:last-child::before{display:none;}
.path-step h3,.path-step h4{font-size:1.12rem;margin-bottom:4px;}
.path-step p{font-size:.9rem;color:var(--text2);}
.path-step .tag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:5px;}

/* ---------- 15. FEATURE-KACHELN ---------- */
.tile{
  padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--border);border-radius:var(--r);
  background:linear-gradient(165deg,rgba(12,21,37,.7),rgba(6,10,18,.7));
  transition:all .4s var(--ease);position:relative;overflow:hidden;
}
.tile:hover{border-color:var(--gold2);transform:translateY(-4px);box-shadow:0 20px 44px -26px rgba(0,0,0,.95);}
.tile .glyph{
  font-size:1.5rem;color:var(--gold-light);display:block;margin-bottom:14px;
  filter:drop-shadow(0 0 14px var(--gold-glow));
  transition:transform .5s var(--ease);
}
.tile:hover .glyph{transform:scale(1.12) rotate(-6deg);}
/* Eigene Sigel statt Emoji — Farbe folgt currentColor */
.glyph svg{width:30px;height:30px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
/* h3 seit 2026-08-27: Die Kacheln stehen unter einer <h2>, ein <h4>
   dazwischen uebersprang eine Ebene. h4 bleibt im Selektor, falls noch
   irgendwo eine alte Kachel steht. */
.tile h3,.tile h4{font-size:1.06rem;margin-bottom:8px;}
.tile p{font-size:.88rem;color:var(--text2);max-width:none;}

/* ---------- 16. NEWSLETTER / CTA-BAND ---------- */
.cta-band{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%,rgba(139,26,58,.16),transparent 70%),
    linear-gradient(180deg,rgba(8,15,28,.6),rgba(3,5,10,.8));
  text-align:center;
}
.cta-band h2{font-size:clamp(1.6rem,4vw,2.5rem);margin-bottom:16px;}
.cta-band .lede{margin:0 auto 30px;}

/* ---------- 16b. ROMANTASY-BAND („Gezeiten") ----------
   Zweiter Erzählstrang, eigene Farbwelt: Türkis + Rose statt Gold + Blut.
   Alles über eine Elternklasse, damit der Rest des Systems unberührt bleibt. */
.tide-band{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 95% at 12% 100%, rgba(46,158,150,.15), transparent 62%),
    radial-gradient(ellipse 70% 85% at 88% 0%, rgba(192,64,112,.13), transparent 62%),
    linear-gradient(180deg,rgba(4,14,20,.7),rgba(3,5,10,.92));
}
.tide-band .eyebrow{color:var(--tide-light);}
.tide-band .eyebrow::before{background:linear-gradient(90deg,transparent,var(--tide-light));}
.tide-band .eyebrow::after{background:linear-gradient(90deg,var(--tide-light),transparent);}
.tide-band .section-title em,
.tide-band h2 em,
.tide-band .fact .v,
.tide-band .price-table .price,
.tide-band .flip-back .flip-title{color:var(--tide-light);}
.tide-band .dropcap::first-letter{color:var(--tide-light);text-shadow:0 0 26px var(--tide-glow);}
.tide-band .rule span{color:var(--tide);}

.badge.tide{background:rgba(46,158,150,.12);color:var(--tide-light);border-color:rgba(46,158,150,.38);}
.badge.tide .dot{background:var(--tide-light);box-shadow:0 0 8px var(--tide-light);}

.btn.tide{border-color:var(--tide);color:var(--tide-light);background:linear-gradient(160deg,#04201E,#03100F);}
.btn.tide::before{background:linear-gradient(180deg,var(--tide-light),var(--tide));}
.btn.tide:hover{color:#03100F;border-color:var(--tide-light);box-shadow:0 10px 34px -12px var(--tide-glow);}

.tide-band .flip-face{
  box-shadow:0 2px 0 rgba(46,158,150,.5),0 34px 64px -28px rgba(0,0,0,.95),0 0 70px -22px var(--tide-glow);
}
.tide-band .flip-back{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(46,158,150,.18),transparent 60%),
    linear-gradient(165deg,#071C1E,#04080E);
  border-color:rgba(46,158,150,.3);
}
.tide-band .flipper:hover + .flip-cue,
.tide-band .flipper.flipped + .flip-cue{color:var(--tide-light);}
.tide-band .tile:hover{border-color:var(--tide);}
.tide-band .tile .glyph{color:var(--tide-light);filter:drop-shadow(0 0 14px var(--tide-glow));}

.tide-band .hero-cover::before{
  background:radial-gradient(ellipse at 50% 50%,var(--tide-glow) 0%,rgba(192,64,112,.16) 40%,transparent 72%);
}
.tide-band .hero-cover img{
  box-shadow:0 2px 0 rgba(46,158,150,.55),0 40px 80px -30px rgba(0,0,0,.95),0 0 90px -18px var(--tide-glow);
}
.tide-band .hero-cover:hover img{
  box-shadow:0 2px 0 var(--tide-light),0 50px 100px -30px rgba(0,0,0,1),0 0 120px -12px var(--tide-glow);
}

/* ---------- The Bone Ledger: eigener Strang-Akzent ---------- */
.bone-band{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 95% at 12% 100%, rgba(163,50,73,.17), transparent 62%),
    radial-gradient(ellipse 70% 85% at 88% 0%, rgba(239,226,198,.07), transparent 62%),
    linear-gradient(180deg,rgba(16,6,10,.72),rgba(3,5,10,.94));
}
.bone-band .eyebrow{color:var(--bone-light);}
.bone-band .eyebrow::before{background:linear-gradient(90deg,transparent,var(--bone-light));}
.bone-band .eyebrow::after{background:linear-gradient(90deg,var(--bone-light),transparent);}
.bone-band .section-title em,
.bone-band h2 em,
.bone-band .fact .v,
.bone-band .price-table .price,
.bone-band .flip-back .flip-title{color:var(--bone-light);}
.bone-band .dropcap::first-letter{color:var(--bone-light);text-shadow:0 0 26px var(--bone-glow);}
.bone-band .rule span{color:var(--bone);}

.badge.bone{background:rgba(163,50,73,.14);color:var(--bone-light);border-color:rgba(163,50,73,.42);}
.badge.bone .dot{background:var(--bone-light);box-shadow:0 0 8px var(--bone-light);}

.btn.bone{border-color:var(--bone);color:var(--bone-light);background:linear-gradient(160deg,#1E0910,#0C0407);}
.btn.bone::before{background:linear-gradient(180deg,var(--bone-light),var(--bone));}
.btn.bone:hover{color:#0C0407;border-color:var(--bone-light);box-shadow:0 10px 34px -12px var(--bone-glow);}

.bone-band .flip-face{
  box-shadow:0 2px 0 rgba(163,50,73,.55),0 34px 64px -28px rgba(0,0,0,.95),0 0 70px -22px var(--bone-glow);
}
.bone-band .flip-back{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(163,50,73,.20),transparent 60%),
    linear-gradient(165deg,#1A0A11,#04080E);
  border-color:rgba(163,50,73,.34);
}
.bone-band .flipper:hover + .flip-cue,
.bone-band .flipper.flipped + .flip-cue{color:var(--bone-light);}
.bone-band .tile:hover{border-color:var(--bone);}
.bone-band .tile .glyph{color:var(--bone-light);filter:drop-shadow(0 0 14px var(--bone-glow));}

.bone-band .hero-cover::before{
  background:radial-gradient(ellipse at 50% 50%,var(--bone-glow) 0%,rgba(239,226,198,.10) 40%,transparent 72%);
}
.bone-band .hero-cover img{
  box-shadow:0 2px 0 rgba(163,50,73,.6),0 40px 80px -30px rgba(0,0,0,.95),0 0 90px -18px var(--bone-glow);
}
.bone-band .hero-cover:hover img{
  box-shadow:0 2px 0 var(--bone-light),0 50px 100px -30px rgba(0,0,0,1),0 0 120px -12px var(--bone-glow);
}

/* ---------- Nachtbrennerei: eigener Strang-Akzent ---------- */
.ember-band{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 85% 95% at 15% 100%, rgba(194,65,12,.20), transparent 62%),
    radial-gradient(ellipse 70% 85% at 88% 0%, rgba(58,92,140,.12), transparent 62%),
    linear-gradient(180deg,rgba(14,9,6,.72),rgba(3,5,10,.94));
}
.ember-band .eyebrow{color:var(--ember-light);}
.ember-band .eyebrow::before{background:linear-gradient(90deg,transparent,var(--ember-light));}
.ember-band .eyebrow::after{background:linear-gradient(90deg,var(--ember-light),transparent);}
.ember-band .section-title em,
.ember-band h2 em,
.ember-band .fact .v,
.ember-band .price-table .price,
.ember-band .flip-back .flip-title{color:var(--ember-light);}
.ember-band .dropcap::first-letter{color:var(--ember-light);text-shadow:0 0 26px var(--ember-glow);}
.ember-band .rule span{color:var(--ember);}

.badge.ember{background:rgba(194,65,12,.14);color:var(--ember-light);border-color:rgba(194,65,12,.42);}
.badge.ember .dot{background:var(--ember-light);box-shadow:0 0 8px var(--ember-light);}

.btn.ember{border-color:var(--ember);color:var(--ember-light);background:linear-gradient(160deg,#1E0D05,#0C0603);}
.btn.ember::before{background:linear-gradient(180deg,var(--ember-light),var(--ember));}
.btn.ember:hover{color:#0C0603;border-color:var(--ember-light);box-shadow:0 10px 34px -12px var(--ember-glow);}

.ember-band .flip-face{
  box-shadow:0 2px 0 rgba(194,65,12,.55),0 34px 64px -28px rgba(0,0,0,.95),0 0 70px -22px var(--ember-glow);
}
.ember-band .flip-back{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(194,65,12,.20),transparent 60%),
    linear-gradient(165deg,#1A0D06,#04080E);
  border-color:rgba(194,65,12,.34);
}
.ember-band .flipper:hover + .flip-cue,
.ember-band .flipper.flipped + .flip-cue{color:var(--ember-light);}
.ember-band .tile:hover{border-color:var(--ember);}
.ember-band .tile .glyph{color:var(--ember-light);filter:drop-shadow(0 0 14px var(--ember-glow));}

.ember-band .hero-cover::before{
  background:radial-gradient(ellipse at 50% 50%,var(--ember-glow) 0%,rgba(58,92,140,.12) 40%,transparent 72%);
}
.ember-band .hero-cover img{
  box-shadow:0 2px 0 rgba(194,65,12,.6),0 40px 80px -30px rgba(0,0,0,.95),0 0 90px -18px var(--ember-glow);
}
.ember-band .hero-cover:hover img{
  box-shadow:0 2px 0 var(--ember-light),0 50px 100px -30px rgba(0,0,0,1),0 0 120px -12px var(--ember-glow);
}

/* ---------- The Fraying: eigener Strang-Akzent ---------- */
.thread-band{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 85% 95% at 14% 100%, rgba(76,63,191,.20), transparent 62%),
    radial-gradient(ellipse 70% 85% at 88% 0%, rgba(169,155,255,.08), transparent 62%),
    linear-gradient(180deg,rgba(8,7,20,.74),rgba(3,5,10,.94));
}
.thread-band .eyebrow{color:var(--thread-light);}
.thread-band .eyebrow::before{background:linear-gradient(90deg,transparent,var(--thread-light));}
.thread-band .eyebrow::after{background:linear-gradient(90deg,var(--thread-light),transparent);}
.thread-band .section-title em,
.thread-band h2 em,
.thread-band .fact .v,
.thread-band .price-table .price,
.thread-band .flip-back .flip-title{color:var(--thread-light);}
.thread-band .dropcap::first-letter{color:var(--thread-light);text-shadow:0 0 26px var(--thread-glow);}
.thread-band .rule span{color:var(--thread);}

.badge.thread{background:rgba(76,63,191,.16);color:var(--thread-light);border-color:rgba(76,63,191,.44);}
.badge.thread .dot{background:var(--thread-light);box-shadow:0 0 8px var(--thread-light);}

.btn.thread{border-color:var(--thread);color:var(--thread-light);background:linear-gradient(160deg,#0F0B2A,#050410);}
.btn.thread::before{background:linear-gradient(180deg,var(--thread-light),var(--thread));}
.btn.thread:hover{color:#050410;border-color:var(--thread-light);box-shadow:0 10px 34px -12px var(--thread-glow);}

.thread-band .flip-face{
  box-shadow:0 2px 0 rgba(76,63,191,.55),0 34px 64px -28px rgba(0,0,0,.95),0 0 70px -22px var(--thread-glow);
}
.thread-band .flip-back{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(76,63,191,.20),transparent 60%),
    linear-gradient(165deg,#0D0A24,#04060E);
  border-color:rgba(76,63,191,.34);
}
.thread-band .flipper:hover + .flip-cue,
.thread-band .flipper.flipped + .flip-cue{color:var(--thread-light);}
.thread-band .tile:hover{border-color:var(--thread);}
.thread-band .tile .glyph{color:var(--thread-light);filter:drop-shadow(0 0 14px var(--thread-glow));}

.thread-band .hero-cover::before{
  background:radial-gradient(ellipse at 50% 50%,var(--thread-glow) 0%,rgba(169,155,255,.12) 40%,transparent 72%);
}
.thread-band .hero-cover img{
  box-shadow:0 2px 0 rgba(76,63,191,.6),0 40px 80px -30px rgba(0,0,0,.95),0 0 90px -18px var(--thread-glow);
}
.thread-band .hero-cover:hover img{
  box-shadow:0 2px 0 var(--thread-light),0 50px 100px -30px rgba(0,0,0,1),0 0 120px -12px var(--thread-glow);
}

/* ---------- Die Geschmacklosen: eigener Strang-Akzent ---------- */
.venom-band{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 85% 95% at 14% 100%, rgba(143,163,15,.18), transparent 62%),
    radial-gradient(ellipse 70% 85% at 88% 0%, rgba(217,238,92,.07), transparent 62%),
    linear-gradient(180deg,rgba(12,14,6,.74),rgba(3,5,10,.94));
}
.venom-band .eyebrow{color:var(--venom-light);}
.venom-band .eyebrow::before{background:linear-gradient(90deg,transparent,var(--venom-light));}
.venom-band .eyebrow::after{background:linear-gradient(90deg,var(--venom-light),transparent);}
.venom-band .section-title em,
.venom-band h2 em,
.venom-band .fact .v,
.venom-band .price-table .price,
.venom-band .flip-back .flip-title{color:var(--venom-light);}
.venom-band .dropcap::first-letter{color:var(--venom-light);text-shadow:0 0 26px var(--venom-glow);}
.venom-band .rule span{color:var(--venom);}

.badge.venom{background:rgba(143,163,15,.16);color:var(--venom-light);border-color:rgba(143,163,15,.44);}
.badge.venom .dot{background:var(--venom-light);box-shadow:0 0 8px var(--venom-light);}

.btn.venom{border-color:var(--venom);color:var(--venom-light);background:linear-gradient(160deg,#1A1F06,#080A03);}
.btn.venom::before{background:linear-gradient(180deg,var(--venom-light),var(--venom));}
.btn.venom:hover{color:#080A03;border-color:var(--venom-light);box-shadow:0 10px 34px -12px var(--venom-glow);}

.venom-band .flip-face{
  box-shadow:0 2px 0 rgba(143,163,15,.55),0 34px 64px -28px rgba(0,0,0,.95),0 0 70px -22px var(--venom-glow);
}
.venom-band .flip-back{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(143,163,15,.18),transparent 60%),
    linear-gradient(165deg,#161A08,#04060E);
  border-color:rgba(143,163,15,.34);
}
.venom-band .flipper:hover + .flip-cue,
.venom-band .flipper.flipped + .flip-cue{color:var(--venom-light);}
.venom-band .tile:hover{border-color:var(--venom);}
.venom-band .tile .glyph{color:var(--venom-light);filter:drop-shadow(0 0 14px var(--venom-glow));}

.venom-band .hero-cover::before{
  background:radial-gradient(ellipse at 50% 50%,var(--venom-glow) 0%,rgba(217,238,92,.12) 40%,transparent 72%);
}
.venom-band .hero-cover img{
  box-shadow:0 2px 0 rgba(143,163,15,.6),0 40px 80px -30px rgba(0,0,0,.95),0 0 90px -18px var(--venom-glow);
}
.venom-band .hero-cover:hover img{
  box-shadow:0 2px 0 var(--venom-light),0 50px 100px -30px rgba(0,0,0,1),0 0 120px -12px var(--venom-glow);
}

/* ---------- Zwei Ufer: eigener Strang-Akzent ---------- */
.rift-band{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 85% 95% at 14% 100%, rgba(139,47,201,.20), transparent 62%),
    radial-gradient(ellipse 70% 85% at 88% 0%, rgba(201,139,245,.08), transparent 62%),
    linear-gradient(180deg,rgba(14,7,22,.74),rgba(3,5,10,.94));
}
.rift-band .eyebrow{color:var(--rift-light);}
.rift-band .eyebrow::before{background:linear-gradient(90deg,transparent,var(--rift-light));}
.rift-band .eyebrow::after{background:linear-gradient(90deg,var(--rift-light),transparent);}
.rift-band .section-title em,
.rift-band h2 em,
.rift-band .fact .v,
.rift-band .price-table .price,
.rift-band .flip-back .flip-title{color:var(--rift-light);}
.rift-band .dropcap::first-letter{color:var(--rift-light);text-shadow:0 0 26px var(--rift-glow);}
.rift-band .rule span{color:var(--rift);}

.badge.rift{background:rgba(139,47,201,.16);color:var(--rift-light);border-color:rgba(139,47,201,.44);}
.badge.rift .dot{background:var(--rift-light);box-shadow:0 0 8px var(--rift-light);}

.btn.rift{border-color:var(--rift);color:var(--rift-light);background:linear-gradient(160deg,#1A0A26,#08040D);}
.btn.rift::before{background:linear-gradient(180deg,var(--rift-light),var(--rift));}
.btn.rift:hover{color:#08040D;border-color:var(--rift-light);box-shadow:0 10px 34px -12px var(--rift-glow);}

.rift-band .flip-face{
  box-shadow:0 2px 0 rgba(139,47,201,.55),0 34px 64px -28px rgba(0,0,0,.95),0 0 70px -22px var(--rift-glow);
}
.rift-band .flip-back{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(139,47,201,.20),transparent 60%),
    linear-gradient(165deg,#170A24,#04060E);
  border-color:rgba(139,47,201,.34);
}
.rift-band .flipper:hover + .flip-cue,
.rift-band .flipper.flipped + .flip-cue{color:var(--rift-light);}
.rift-band .tile:hover{border-color:var(--rift);}
.rift-band .tile .glyph{color:var(--rift-light);filter:drop-shadow(0 0 14px var(--rift-glow));}

.rift-band .hero-cover::before{
  background:radial-gradient(ellipse at 50% 50%,var(--rift-glow) 0%,rgba(201,139,245,.12) 40%,transparent 72%);
}
.rift-band .hero-cover img{
  box-shadow:0 2px 0 rgba(139,47,201,.6),0 40px 80px -30px rgba(0,0,0,.95),0 0 90px -18px var(--rift-glow);
}
.rift-band .hero-cover:hover img{
  box-shadow:0 2px 0 var(--rift-light),0 50px 100px -30px rgba(0,0,0,1),0 0 120px -12px var(--rift-glow);
}

/* Sprachhinweis für Titel, die es nur in einer Sprache gibt */
.lang-note{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;padding:9px 15px;border-radius:var(--r);
  font-size:.8rem;color:var(--text2);
  border:1px solid rgba(46,158,150,.28);background:rgba(46,158,150,.06);
}
.lang-note strong{color:var(--tide-light);font-weight:700;}
.bone-band .lang-note{border-color:rgba(163,50,73,.32);background:rgba(163,50,73,.07);}
.bone-band .lang-note strong{color:var(--bone-light);}
.ember-band .lang-note{border-color:rgba(194,65,12,.32);background:rgba(194,65,12,.07);}
.ember-band .lang-note strong{color:var(--ember-light);}
.thread-band .lang-note{border-color:rgba(76,63,191,.32);background:rgba(76,63,191,.08);}
.thread-band .lang-note strong{color:var(--thread-light);}
.venom-band .lang-note{border-color:rgba(143,163,15,.32);background:rgba(143,163,15,.08);}
.venom-band .lang-note strong{color:var(--venom-light);}
.rift-band .lang-note{border-color:rgba(139,47,201,.32);background:rgba(139,47,201,.08);}
.rift-band .lang-note strong{color:var(--rift-light);}

/* ---------- 17. AUTOREN-SEITE ---------- */
.author-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,64px);align-items:start;}
.sigil-plate{
  aspect-ratio:1;display:grid;place-items:center;border-radius:var(--rl);
  border:1px solid var(--border2);
  background:
    radial-gradient(circle at 50% 40%,rgba(200,145,42,.14),transparent 62%),
    radial-gradient(circle at 50% 80%,rgba(139,26,58,.16),transparent 60%),
    linear-gradient(160deg,var(--surf2),#04070E);
  position:relative;overflow:hidden;
}
.sigil-plate .mark{
  font-family:var(--serif);font-size:clamp(3.2rem,9vw,5.6rem);
  color:var(--gold-light);letter-spacing:.04em;line-height:1;
  text-shadow:0 0 44px var(--gold-glow);
}
.sigil-plate .ring{
  position:absolute;inset:12%;border-radius:50%;
  border:1px solid rgba(200,145,42,.18);
  animation:spin 44s linear infinite;
}
.sigil-plate .ring:nth-child(2){inset:22%;border-style:dashed;border-color:rgba(139,26,58,.24);animation-duration:32s;animation-direction:reverse;}
.sigil-plate .cap{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text3);
}

.creed{list-style:none;display:grid;gap:14px;margin-top:26px;}
.creed li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding-bottom:14px;border-bottom:1px solid var(--border);
  font-size:.94rem;color:var(--text2);
}
.creed li:last-child{border-bottom:none;}
.creed .g{color:var(--gold);font-size:.8rem;line-height:1.9;}

/* ---------- 18. LEGAL-SEITEN ---------- */
.legal{max-width:78ch;}
.legal h1{font-size:clamp(1.9rem,4.4vw,2.7rem);margin-bottom:10px;}
.legal h2{
  font-size:1.08rem;margin:34px 0 10px;color:var(--gold-light);
  padding-bottom:7px;border-bottom:1px solid var(--border);
}
.legal p{font-size:.94rem;color:var(--text2);}
.legal .disclaimer{
  font-size:.86rem;font-style:italic;color:var(--text3);
  border-left:2px solid var(--gold2);padding-left:16px;margin:18px 0 6px;
}

/* ---------- 19. KONTAKT ---------- */
.contact-card{
  text-align:center;padding:clamp(34px,5vw,58px);
  border:1px solid var(--border2);border-radius:var(--rl);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(200,145,42,.10),transparent 62%),
    linear-gradient(170deg,var(--surf),#04070E);
}
.contact-card .mail{
  display:inline-block;margin:6px 0 26px;
  font-family:var(--serif);font-size:clamp(1.05rem,2.6vw,1.5rem);
  color:var(--gold-light);text-decoration:none;letter-spacing:.01em;
  border-bottom:1px solid rgba(200,145,42,.3);padding-bottom:4px;
  transition:border-color .3s var(--ease),text-shadow .3s var(--ease);
  word-break:break-word;
}
.contact-card .mail:hover{border-color:var(--gold);text-shadow:0 0 26px var(--gold-glow);}

/* ---------- 20. FOOTER ---------- */
.site-footer{
  position:relative;z-index:4;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(3,5,10,.4),rgba(3,5,10,.95));
  padding:clamp(44px,6vw,72px) 0 34px;
  margin-top:0;
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(26px,4vw,54px);margin-bottom:38px;
}
/* Die Spaltenueberschriften der Fusszeile waren bis zum 2026-08-27 <h5> und
   standen damit direkt unter einer <h2> — ein Sprung ueber zwei Ebenen, den
   ein Screenreader beim Durchgehen der Gliederung als Luecke liest. Jetzt
   sind es <h2> innerhalb des <footer>-Landmarks: eine Ebene zurueckzugehen
   ist immer erlaubt, nur das Ueberspringen nach unten ist ein Fehler.
   Die Klasse traegt die Gestaltung, damit sie trotzdem klein bleiben. */
.footer-grid .footer-head{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:14px;
  /* Als <h5> erbte die Zeile die 1.75 des Fliesstextes. Als <h2> greift jetzt
     die Regel h1,h2,h3,h4{line-height:1.15} weiter oben und ruecke die Spalten
     um rund 6 px gegeneinander. 'inherit' holt den alten Wert zurueck — die
     Ueberschrift zaehlt in der Gliederung anders, sieht aber gleich aus. */
  line-height:inherit;
}
.footer-grid a{
  display:block;color:var(--text2);text-decoration:none;font-size:.87rem;
  padding:4px 0;transition:color .25s var(--ease),padding-left .25s var(--ease);
}
.footer-grid a:hover{color:var(--gold-light);padding-left:6px;}
.footer-brand .name{font-family:var(--serif);font-size:1.15rem;color:var(--text);margin-bottom:8px;}
.footer-brand p{font-size:.86rem;color:var(--text3);max-width:38ch;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--border);
  font-size:.75rem;color:var(--text3);
}
.footer-bottom .runes{letter-spacing:.5em;color:var(--gold2);opacity:.6;}

/* ---------- 21. REVEAL-ANIMATIONEN ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.seen{opacity:1;transform:none;}
.reveal.d1{transition-delay:.09s;} .reveal.d2{transition-delay:.18s;}
.reveal.d3{transition-delay:.27s;} .reveal.d4{transition-delay:.36s;}
.reveal.d5{transition-delay:.45s;} .reveal.d6{transition-delay:.54s;}

/* ---------- 22. CUSTOM CURSOR ---------- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;mix-blend-mode:screen;opacity:0;
  transition:opacity .3s ease;
}
.cursor-dot{width:6px;height:6px;background:var(--gold-light);box-shadow:0 0 12px var(--gold-glow);}
.cursor-ring{
  width:34px;height:34px;border:1px solid rgba(200,145,42,.45);
  transition:opacity .3s ease,width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease);
}
body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{opacity:1;}
body.cursor-on.cursor-hot .cursor-ring{width:54px;height:54px;border-color:var(--rose);}

/* ---------- 23. TILT ---------- */
.tilt{transform-style:preserve-3d;will-change:transform;}

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:36px;text-align:center;}
  .hero-cover{order:-1;width:min(74%,300px);}
  /* .duo hat zwei Klassen und schlaegt sonst die Regel darueber */
  .hero-cover.duo{width:min(88%,350px);}
  .hero .lede{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .eyebrow{justify-content:center;}
  .author-grid{grid-template-columns:1fr;}
  .sigil-plate{max-width:340px;margin:0 auto;}
  .grid.g4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width:820px){
  .site-nav{
    position:fixed;top:var(--header-h);left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(3,5,10,.98);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border2);
    padding:10px 0 18px;margin-left:0;
    transform:translateY(-130%);opacity:0;pointer-events:none;
    transition:transform .45s var(--ease),opacity .35s var(--ease);
  }
  .site-nav.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .site-nav a{padding:14px clamp(18px,5vw,40px);font-size:.9rem;border-bottom:1px solid var(--border);}
  .site-nav a::after{display:none;}
  .nav-toggle{display:flex;}
  .site-header{gap:10px;padding:0 16px;}
  .lang-switch{margin-left:2px;order:3;}
  .book{grid-template-columns:1fr;}
  .flipper{width:min(78%,260px);}
  .grid.g3{grid-template-columns:1fr;}
  #bg-embers{display:none;}
  /* Kein 100vh-Hero auf dem Handy — sonst steht nichts Klickbares über der Falz */
  .hero{min-height:auto;padding:clamp(28px,6vw,48px) 0 clamp(44px,8vw,72px);}
  .scroll-hint{display:none;}
}
@media (max-width:560px){
  .grid.g2,.grid.g4{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .price-table .fmt{min-width:auto;}
  .cd-unit{min-width:66px;}
  .brand{font-size:.88rem;gap:8px;min-width:0;flex-shrink:1;overflow:hidden;}
  .brand .rune{font-size:1.1rem;}
  .hero h1{font-size:clamp(1.8rem,7.4vw,2.35rem);}
  .hero-grid{gap:26px;}
  .hero-cover.duo{width:min(84%,250px);}
  .hero .lede{margin-bottom:26px;}
  .hero-actions .btn{flex:1 1 100%;justify-content:center;}
  .book-facts{gap:16px;}
  .fact{min-width:72px;}
}

/* ---------- 25. BEDIENHILFEN ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
  .ink{opacity:1;filter:none;}
  .flip-back{transition-delay:0s;}
  #bg-shader,#bg-embers{display:none;}
}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:2px;}
.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:200;
  padding:10px 18px;background:var(--gold);color:#0A0603;
  font-size:.8rem;font-weight:700;border-radius:4px;text-decoration:none;
}
.skip-link:focus{left:12px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Druck */

/* ============================================================
   BLOG — Uebersicht und Einzelartikel
   Erzeugt von build_blog.py. Nutzt durchgaengig die vorhandenen
   Variablen; keine neuen Farben, damit der Blog nicht wie ein
   Fremdkoerper neben dem Buchkatalog steht.
   ============================================================ */

.post-list{display:grid;gap:26px;max-width:820px;}

.post-card{
  position:relative;padding:26px 26px 22px;
  background:linear-gradient(180deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--border);border-radius:3px;
  transition:border-color .35s ease,transform .35s ease;
}
.post-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.post-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold2),transparent);
  opacity:.55;
}
.post-card h2{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:10px 0 10px;}
.post-card h2 a{color:var(--text);text-decoration:none;}
.post-card h2 a:hover{color:var(--gold-light);}
.post-card p{color:var(--text2);font-size:.94rem;line-height:1.8;margin:0 0 16px;max-width:62ch;}

.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:.76rem;color:var(--text3);letter-spacing:.06em;}
.post-meta .eyebrow{margin:0;}

.post-lang{
  font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  padding:2px 8px;border:1px solid var(--border2);border-radius:2px;
  color:var(--text3);
}

.post-more{
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--gold);
}
.post-more:hover{color:var(--gold-light);}

/* --- Einzelartikel --- */
.post-body{margin-top:30px;}
.post-body h2{
  font-size:clamp(1.2rem,2.6vw,1.6rem);
  margin:2.2em 0 .7em;padding-top:.7em;
  border-top:1px solid var(--border);
}
.post-body h2:first-child{border-top:none;padding-top:0;margin-top:0;}
.post-body h3{font-size:1.1rem;margin:1.8em 0 .5em;color:var(--text);}
.post-body p{color:var(--text2);line-height:1.9;font-size:1.02rem;max-width:68ch;}
.post-body strong{color:var(--text);}
.post-body em{color:var(--text);font-style:italic;}

.post-lang-note{
  display:inline-block;margin:4px 0 0;padding:5px 11px;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);
  border:1px solid var(--border);border-radius:2px;
}

.post-cta{margin-top:2.6em;padding-top:1.8em;border-top:1px solid var(--border);}

@media (max-width:640px){
  .post-card{padding:20px 18px 18px;}
  .post-body p{font-size:.98rem;}
}

@media print{
  #bg-shader,#bg-embers,#scroll-progress,.site-header,.scroll-hint,.cursor-dot,.cursor-ring{display:none!important;}
  body{background:#fff;color:#000;}
  body::before,body::after{display:none;}
  a{color:#000;}
}

/* ---------- 26. NOTAUSSTIEG OHNE SITE.JS ----------
   .reveal und .ink starten auf opacity:0 und werden erst von site.js
   sichtbar geschaltet. Auf index.html haengen 44 Elemente daran, auf
   buecher.html 45 — praktisch der gesamte Inhalt. Kommt site.js nicht an
   (Netzfehler, blockierte Skripte, 404 nach einem missglueckten Upload),
   bliebe die Seite schwarz.

   Deshalb: lang.js setzt im <head> die Klasse 'js' und nimmt sie nach sechs
   Sekunden wieder weg, falls site.js sich bis dahin nicht gemeldet hat.
   Ohne diese Klasse greifen die Regeln hier und alles ist sofort sichtbar.

   Bewusst additiv formuliert — die bestehenden Regeln fuer .reveal/.ink
   bleiben unveraendert, damit hier kein Spezifitaets-Wettlauf entsteht. */
html:not(.js) .reveal,
html:not(.js) .ink{opacity:1;transform:none;filter:none;}

/* ============================================================
   27. BUCHSEITEN (buch-*.html) — seit 2026-09-02
   Erzeugt von build_site.py. Wie beim Blog: keine neuen Farben,
   nur die vorhandenen Variablen — die Buchseite soll wie ein
   Ausschnitt des Katalogs wirken, nicht wie eine andere Website.

   EIN AKZENT STATT SIEBEN UEBERSCHREIBUNGEN
   Die Strang-Bloecke oben zaehlen jedes Element einzeln auf
   (".bone-band .fact .v", ".bone-band .price-table .price", ...).
   Bei sieben Straengen kostet jedes neue Bauteil sieben Zeilen, und
   eine davon wird beim achten Strang vergessen — genau das Muster,
   das in dieser Datei schon dreimal zugeschlagen hat.
   Deshalb tragen die Baender jetzt zusaetzlich eine Variable, und
   die Bauteile hier unten fragen nur die. Die bestehenden Regeln
   bleiben unangetastet; das hier ist rein additiv.
   ============================================================ */

:root{--akzent:var(--gold-light);--akzent-tief:var(--gold);--akzent-glow:var(--gold-glow);}
.tide-band  {--akzent:var(--tide-light);  --akzent-tief:var(--tide);  --akzent-glow:var(--tide-glow);}
.bone-band  {--akzent:var(--bone-light);  --akzent-tief:var(--bone);  --akzent-glow:var(--bone-glow);}
.ember-band {--akzent:var(--ember-light); --akzent-tief:var(--ember); --akzent-glow:var(--ember-glow);}
.thread-band{--akzent:var(--thread-light);--akzent-tief:var(--thread);--akzent-glow:var(--thread-glow);}
.venom-band {--akzent:var(--venom-light); --akzent-tief:var(--venom); --akzent-glow:var(--venom-glow);}
.rift-band  {--akzent:var(--rift-light);  --akzent-tief:var(--rift);  --akzent-glow:var(--rift-glow);}

/* --- Brotkrumen --- */
.krumen{
  padding:14px 0 0;font-family:var(--sans);font-size:.76rem;
  letter-spacing:.05em;color:var(--text3);
}
.krumen a{color:var(--text3);text-decoration:none;border-bottom:1px solid transparent;}
.krumen a:hover{color:var(--gold-light);border-bottom-color:var(--gold);}
.krumen span{opacity:.5;margin:0 4px;}
.krumen [aria-current]{color:var(--text2);opacity:1;margin:0;}

/* --- Weg vom Katalog auf die Buchseite --- */
.mehr-zum-buch{margin:18px 0 0;}
.mehr-zum-buch a{
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--akzent);
}
.mehr-zum-buch a:hover{opacity:.75;}

/* --- Leseprobe ---
   Buchtext, also Buchtypografie: Serifen, ruhige Zeilen, ein Maass
   um 62 Zeichen. Der Rest der Seite ist Marketing, das hier ist die
   Ware — es darf sich anders lesen als ein Klappentext. */
.probe-kopf{text-align:center;margin-bottom:clamp(26px,4vw,42px);}
.probe-kopf .lede{margin:0 auto;}

.probe{
  max-width:64ch;margin:0 auto;
  padding:clamp(24px,4vw,46px) clamp(20px,4vw,44px);
  background:linear-gradient(180deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--border);border-radius:3px;
  position:relative;
}
.probe::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--akzent-tief),transparent);
  opacity:.6;
}
.probe p{
  font-family:var(--serif);font-size:1.04rem;line-height:1.92;
  color:var(--text);margin:0 0 1.25em;hyphens:auto;
}
.probe p:first-of-type::first-letter{
  float:left;font-size:3.1em;line-height:.82;
  margin:.06em .09em 0 0;color:var(--akzent);
  text-shadow:0 0 26px var(--akzent-glow);
}
.probe .probe-ende{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text3);
  text-align:center;margin:2.2em 0 0;padding-top:1.4em;
  border-top:1px solid var(--border);
}

/* --- Bandnavigation innerhalb einer Reihe --- */
.reihe-liste{
  list-style:none;counter-reset:band;margin:0 auto;padding:0;
  max-width:640px;display:grid;gap:2px;
}
.reihe-liste li{
  counter-increment:band;position:relative;
  padding:14px 18px 14px 54px;
  background:linear-gradient(180deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--border);
  font-family:var(--sans);font-size:.92rem;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.reihe-liste li::before{
  content:counter(band,upper-roman);
  position:absolute;left:0;top:0;bottom:0;width:42px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:.9rem;color:var(--text3);
  border-right:1px solid var(--border);
}
.reihe-liste a{color:var(--text);text-decoration:none;}
.reihe-liste a:hover{color:var(--akzent);}
.reihe-liste li.hier{border-color:var(--akzent-tief);background:linear-gradient(180deg,var(--surf2),var(--surf));}
.reihe-liste li.hier span{color:var(--akzent);font-weight:700;}
.reihe-liste li.hier::before{color:var(--akzent);border-right-color:var(--akzent-tief);}
/* .tag ist ausserhalb von .path-step nicht gestaltet — deshalb hier eigene Form. */
.reihe-liste .tag{
  margin-left:auto;font-family:var(--sans);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);
  padding:3px 9px;border:1px solid var(--border2);border-radius:2px;
  white-space:nowrap;
}

/* --- Artikel zum Buch --- */
.artikel-gitter{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.artikel-karte{
  display:block;text-decoration:none;padding:20px 20px 18px;
  background:linear-gradient(180deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--border);border-radius:3px;
  transition:border-color .35s ease,transform .35s ease;
}
.artikel-karte:hover{border-color:var(--border2);transform:translateY(-2px);}
.artikel-karte .k{
  display:block;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.08em;color:var(--text3);margin-bottom:8px;
}
.artikel-karte .t{
  display:block;font-family:var(--serif);font-size:1.06rem;
  line-height:1.4;color:var(--text);margin-bottom:10px;
}
.artikel-karte:hover .t{color:var(--gold-light);}
.artikel-karte p{
  color:var(--text2);font-size:.88rem;line-height:1.7;margin:0;
}

@media (max-width:640px){
  .probe{padding:22px 18px;}
  .probe p{font-size:1rem;line-height:1.85;}
  .reihe-liste li{padding:12px 14px 12px 48px;font-size:.86rem;}
  .reihe-liste .tag{margin-left:0;}
}

/* Hero-Doppelcover mit WebP-Rueckfall (seit 2026-09-02).
   Die zwei Cover im Hero waren als einzige Bilder der Seite noch nackte
   JPEGs mit loading="eager" — 463 KB im LCP-Pfad der Startseite, obwohl
   die WebP-Fassungen (335 KB) daneben lagen.

   display:contents statt der allgemeinen Regel .hero-cover picture{display:block}:
   Damit verschwindet die <picture>-Box aus dem Layout und das <img> bleibt
   genau da, wo es vorher war — .hero-cover.duo .c1/.c2 positionieren es
   absolut, mit width:66%/58% gegen .hero-cover.duo. Ein <picture> mit
   eigener Box haette dazwischen gelegen, und weil die allgemeine Regel
   height:100% setzt, waeren zwei gestapelte Bilder auf 200% Hoehe gekommen. */
.hero-cover.duo picture{display:contents;}

/* ---------- 28. KATALOGFILTER (buecher.html) — seit 2026-09-02 ----------
   Ersetzt die Sprungleiste, die bei sieben Straengen nur noch laenger
   wurde. Die Leiste selbst traegt 'hidden', bis site.js sie aufdeckt —
   eine Bedienung, die ohne JavaScript nichts tut, soll man nicht sehen. */
.filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:20px 22px;margin-bottom:8px;
  background:linear-gradient(180deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--border);border-radius:3px;
}
.filter-titel{
  width:100%;margin:0;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text3);
}
.filter-gruppe{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.filter-label{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3);margin-right:4px;
}
.filter-knopf{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.04em;
  padding:6px 12px;cursor:pointer;
  color:var(--text2);background:transparent;
  border:1px solid var(--border2);border-radius:2px;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.filter-knopf:hover{color:var(--text);border-color:var(--text3);}
.filter-knopf.aktiv{
  color:var(--bg);background:var(--akzent);border-color:var(--akzent);
  font-weight:700;
}
/* Strang-Knoepfe tragen ihren Akzent, damit die Farbwelt schon in der
   Leiste sichtbar ist — dieselben Namen wie die .btn-Varianten. */
.filter-knopf.tide.aktiv  {background:var(--tide-light);  border-color:var(--tide-light);}
.filter-knopf.bone.aktiv  {background:var(--bone-light);  border-color:var(--bone-light);}
.filter-knopf.ember.aktiv {background:var(--ember-light); border-color:var(--ember-light);}
.filter-knopf.thread.aktiv{background:var(--thread-light);border-color:var(--thread-light);}
.filter-knopf.venom.aktiv {background:var(--venom-light); border-color:var(--venom-light);}
.filter-knopf.rift.aktiv  {background:var(--rift-light);  border-color:var(--rift-light);}
.filter-knopf:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.filter-stand{
  margin:0 0 0 auto;font-family:var(--sans);font-size:.74rem;
  letter-spacing:.06em;color:var(--text3);
}
.filter-reset{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;
  background:none;border:none;border-bottom:1px solid var(--border2);
  color:var(--text3);padding:2px 0;
}
.filter-reset:hover{color:var(--gold-light);border-bottom-color:var(--gold);}
.filter-leer{
  width:100%;margin:6px 0 0;font-family:var(--serif);
  font-size:1rem;color:var(--text2);
}

@media (max-width:640px){
  .filter{padding:16px 14px;gap:8px 12px;}
  .filter-stand{margin:6px 0 0;width:100%;}
  .filter-label{width:100%;margin:2px 0 0;}
}