/* ============================================================
   Im Schatten der Hexen — Design-System v3 · "Das Grimoire"
   Illuminiertes Zauberbuch: dunkles Vellum · Gold-Folie ·
   Blutrot-Wachs · Fraktur · verwunschen-magisch mit Bedrohung
   ============================================================ */

@font-face { font-family:'UnifrakturCook'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/unifrakturcook.woff2') format('woff2'); }
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:400 900; font-display:swap; src:url('../fonts/cinzel.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap; src:url('../fonts/cormorant-garamond.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/inter.woff2') format('woff2'); }
@font-face { font-family:'Noto Runic'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/noto-sans-runic.woff2') format('woff2'); }

:root {
  /* Grimoire-Basis (dunkles Leder / rußgeschwärztes Pergament) */
  --grund:#070403;
  --vellum:#0D0705;
  --panel:#140B07;
  --leder:#060302;
  --linie:#3A2A18;
  --linie-hell:#5A4222;

  /* Tinte / Text (gealtertes Knochenweiß) */
  --text:#E9DFC7;
  --text-sek:#B7A986;
  --text-meta:#8C7D5C;

  /* Gold-Illumination */
  --gold:#C9A24B;
  --gold-hell:#F1DA96;
  --gold-tief:#7E611F;
  --kerze:#F4CE72;

  /* Blutrot / Wachs (Bedrohung, Siegel, Initialen) */
  --blut:#93151F;
  --blut-hell:#C33341;
  --wachs:#7A1018;
  --blut-glow:#B0202E;

  /* Verwunschenes Grün (Natur, sekundär) */
  --gruen:#6E8A5F;
  --gruen-tief:#33452B;

  /* Pergament (helle Einleger: Zitate, Siegel-Karten) */
  --pergament:#E7D9B8;
  --perg-ink:#2C2114;
  --perg-linie:#C8B78C;

  /* funktional */
  --bg:var(--grund);
  --card:var(--panel);
  --card-rand:var(--linie);
  --cta-text:#120C04;
  --fokus:var(--gold-hell);

  --foil:linear-gradient(100deg, #7E611F 0%, #E7C464 22%, #F7EAB4 42%, #C9A24B 55%, #F1DA96 70%, #7E611F 100%);

  /* Schrift */
  --display:'UnifrakturCook','Cinzel',serif;   /* Fraktur — Grimoire-Titel */
  --caps:'Cinzel','Cormorant Garamond',serif;  /* gemeißelte Versalien */
  --serif:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --maxw:1180px; --maxw-text:66ch; --radius:10px; --radius-s:7px;
  --gap:clamp(1rem,2.5vw,2rem); --pad-band:clamp(3.5rem,8vw,7rem);
  --shadow:0 26px 70px -28px rgba(0,0,0,.9);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  --grund:#EBDFC1; --vellum:#E4D6B4; --panel:#F1E6C9; --leder:#DCCBA2;
  --linie:#C3AE7E; --linie-hell:#A98F55;
  --text:#241A0E; --text-sek:#5A4A2C; --text-meta:#7A6A48;
  --gold:#8A6A24; --gold-hell:#A9852E; --gold-tief:#6a5015; --kerze:#b8912f;
  --blut:#7A1018; --blut-hell:#93202B; --wachs:#7A1018;
  --pergament:#F5ECD6; --perg-ink:#2C2114;
  --cta-text:#F5ECD6; --shadow:0 22px 54px -26px rgba(60,40,10,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; color:var(--text); font-family:var(--serif);
  font-size:1.12rem; line-height:1.72; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  background-color:var(--grund);
  background-image:
    radial-gradient(110% 55% at 50% 112%, rgba(138,20,32,.26), transparent 55%),
    radial-gradient(80% 55% at 6% 0%, rgba(90,10,18,.18), transparent 55%),
    radial-gradient(80% 65% at 100% 12%, rgba(16,4,4,.45), transparent 55%),
    radial-gradient(58% 24% at 9% 36%, rgba(112,14,24,.13), transparent 60%),
    radial-gradient(58% 24% at 91% 58%, rgba(112,14,24,.13), transparent 60%),
    radial-gradient(66% 22% at 50% 80%, rgba(122,16,26,.14), transparent 60%),
    linear-gradient(180deg,#070403,#030201);
  background-repeat:no-repeat;
}
[data-theme="light"] body{ background-image:radial-gradient(90% 60% at 50% -10%,rgba(180,140,60,.18),transparent 55%),linear-gradient(180deg,#ebdfc1,#e6d8b6); }

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-hell); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2{ font-weight:700; line-height:1.07; margin:0 0 .4em; }
h1{ font-family:var(--display); letter-spacing:.01em; }
h2{ font-family:var(--caps); font-size:clamp(1.9rem,3.9vw,3rem); color:var(--gold-hell); letter-spacing:.05em; }
h3,h4{ font-family:var(--caps); font-weight:600; letter-spacing:.06em; line-height:1.2; margin:0 0 .5em; }
h3{ font-size:1.15rem; text-transform:uppercase; color:var(--text); }
p{ margin:0 0 1em; }
em{ color:var(--gold-hell); font-style:italic; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
.band{ padding-block:var(--pad-band); position:relative; }
.band--alt{ background:linear-gradient(180deg, rgba(14,6,5,.62), rgba(4,2,1,.9)); border-block:1px solid var(--linie); }
.eyebrow{ font-family:var(--caps); font-size:.82rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem; display:inline-flex; align-items:center; gap:.7rem; }
.eyebrow::before,.eyebrow::after{ content:"❧"; color:var(--gold-tief); font-size:.9rem; letter-spacing:0; }
.eyebrow::after{ content:"☙"; }
.lead{ font-size:1.3rem; color:var(--text-sek); max-width:var(--maxw-text); font-style:italic; }
.center{ text-align:center; margin-inline:auto; }

.foil{ background:var(--foil); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 7s linear infinite; }
@keyframes shimmer{ to{ background-position:220% center; } }

.skip{ position:absolute; left:-999px; top:0; background:var(--gold); color:var(--cta-text); padding:.7rem 1.1rem; z-index:200; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px; }

/* ---------- Hexen-Runen (fixe Marginalien) ---------- */
.runes{ position:fixed; top:0; bottom:0; width:70px; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(1.4rem,3.8vh,3.1rem); pointer-events:none; color:var(--gold); }
.runes.l{ left:max(16px, calc(50% - 640px)); } .runes.r{ right:max(16px, calc(50% - 640px)); }
.runes::before{ content:""; position:absolute; top:14%; bottom:14%; width:1px; background:linear-gradient(180deg,transparent,var(--gold-tief) 22%,var(--gold-tief) 78%,transparent); opacity:.4; }
.rune{ font-family:'Noto Runic','Cinzel',serif; font-size:clamp(26px,3.5vh,36px); line-height:1; text-align:center; color:var(--gold); opacity:.42; filter:drop-shadow(0 0 6px rgba(201,162,75,.4)); transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1), filter .5s ease; will-change:opacity,transform,filter; }
.rune.dissolve{ opacity:0; transform:translateY(-10px) scale(.45) rotate(12deg); filter:drop-shadow(0 0 13px rgba(241,218,150,.8)) blur(3px); }
/* Unter 1180px fehlt der Platz für die breite Runen-Spalte. Sie wird deshalb
   NICHT mehr ausgeblendet, sondern rückt als schmale Leiste an den Rand:
   auf 375px beginnt der Fließtext bei 35px, die 24-px-Spalte am Rand bleibt
   damit kollisionsfrei. */
@media (max-width:1180px){
  .runes{ width:24px; gap:clamp(1.1rem,3vh,2.4rem); }
  .runes.l{ left:2px; }
  .runes.r{ right:2px; }
  .rune{ font-size:clamp(15px,2.2vh,20px); opacity:.32; }
  .runes::before{ opacity:.25; }
}
/* Auf Handys ist der Rand am knappsten: der Text der Unterseiten beginnt schon
   bei 18px (Startseite 35px). Die Spalte rückt daher ganz an die Kante und wird
   auf 14px verschmälert — so bleibt sie überall vor dem Text. */
@media (max-width:520px){
  .runes{ width:14px; }
  .runes.l{ left:0; }
  .runes.r{ right:0; }
  .rune{ font-size:13px; opacity:.28; }
  .runes::before{ display:none; }
}

/* ---------- Buttons (Gold-Emboss) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--caps); font-weight:600; font-size:.92rem; letter-spacing:.12em; text-transform:uppercase; padding:.9rem 1.7rem; border-radius:var(--radius-s); border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s; min-height:46px; text-align:center; }
.btn:hover{ text-decoration:none; }
.btn--gold{ background:var(--foil); background-size:180% auto; color:var(--cta-text); box-shadow:0 1px 0 rgba(255,240,200,.5) inset, 0 10px 26px -12px rgba(201,162,75,.6); text-shadow:0 1px 0 rgba(255,245,215,.4); }
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--gold), 0 16px 40px -14px rgba(201,162,75,.75); }
.btn--ghost{ background:transparent; color:var(--gold-hell); border-color:var(--gold-tief); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-hell); transform:translateY(-2px); box-shadow:0 0 20px -6px rgba(201,162,75,.4); }
.btn--burgund{ background:transparent; color:var(--text); border-color:var(--blut-hell); }
.btn--burgund:hover{ background:var(--blut); border-color:var(--blut); transform:translateY(-2px); }
.btn--sm{ padding:.62rem 1.1rem; font-size:.78rem; min-height:40px; }

.badge{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--caps); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:.34rem .75rem; border-radius:3px; }
.badge--award{ border:1px solid var(--gold-tief); color:var(--gold-hell); background:rgba(201,162,75,.08); }
.badge--zyklus{ border:1px solid var(--gruen-tief); color:var(--gruen); background:rgba(110,138,95,.08); }
.badge--neu{ background:var(--blut); color:#f3e6c0; letter-spacing:.16em; }
.chip{ display:inline-block; font-family:var(--sans); font-size:.74rem; color:var(--text-sek); border:1px solid var(--linie); border-radius:2px; padding:.22rem .6rem; letter-spacing:.03em; }

/* ---------- Wachssiegel ---------- */
.seal{ width:96px; height:96px; position:relative; display:grid; place-items:center; flex:none; }
.seal__wax{ position:absolute; inset:0; border-radius:48% 52% 55% 45%/50% 48% 52% 50%; background:radial-gradient(35% 30% at 38% 32%, #C43A44, #8A1420 55%, #5E0C14 100%); box-shadow:inset 0 4px 10px rgba(255,180,180,.25), inset 0 -8px 16px rgba(0,0,0,.55), 0 10px 24px -8px rgba(0,0,0,.7); }
.seal svg{ position:relative; width:52px; height:52px; color:#5E0C14; opacity:.85; filter:drop-shadow(0 1px 0 rgba(255,170,170,.2)); }

/* ---------- Header ---------- */
.header{ position:sticky; top:0; z-index:100; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--grund) 82%, transparent); border-bottom:1px solid var(--linie); }
.header__inner{ display:flex; align-items:center; gap:1.2rem; padding-block:.75rem; }
.brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-size:1.85rem; font-weight:700; color:var(--gold-hell); line-height:1; white-space:nowrap; }
.brand:hover{ text-decoration:none; color:var(--kerze); }
.brand .sigil{ width:32px; height:32px; color:var(--gold); flex:none; filter:drop-shadow(0 0 7px rgba(201,162,75,.45)); }
.nav{ display:flex; gap:1.4rem; margin-left:auto; }
.nav a{ font-family:var(--caps); color:var(--text-sek); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; }
.nav a:hover{ color:var(--gold-hell); text-decoration:none; }
.header__cta{ display:flex; align-items:center; gap:.6rem; }
.theme-toggle{ background:transparent; border:1px solid var(--linie); color:var(--gold-hell); width:42px; height:42px; border-radius:var(--radius-s); cursor:pointer; font-size:1.05rem; display:grid; place-items:center; transition:border-color .15s, transform .15s; }
.theme-toggle:hover{ border-color:var(--gold); transform:translateY(-1px); }
.nav-toggle{ display:none; }

/* ---------- HERO (illuminierte Titelseite) ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--linie); background:radial-gradient(120% 78% at 50% 122%, rgba(150,20,34,.34), transparent 55%), radial-gradient(120% 90% at 50% -12%, rgba(26,14,8,.55), transparent 60%), radial-gradient(130% 100% at 50% 42%, rgba(8,4,3,.55), rgba(3,1,1,.98)); }
.hero{ min-height:min(94vh,940px); display:grid; align-items:center; }
.hero__scene{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* keine gezeichneten Bäume/Wald mehr — reine Mystik (Nutzer-Entscheid) */
.hero__forest,.hero__tree{ display:none !important; }
.hero__moon{ position:absolute; top:2%; left:50%; transform:translateX(-50%); width:min(900px,112vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(198,34,48,.34) 0%, rgba(152,18,30,.21) 22%, rgba(88,10,16,.10) 42%, transparent 62%); }
.hero__moon::after{ content:""; position:absolute; inset:22%; border-radius:50%; background:radial-gradient(circle, rgba(214,44,58,.14), transparent 70%); }
.hero__forest{ position:absolute; left:-2%; right:-2%; bottom:0; width:104%; height:60%; }
.hero__forest svg{ width:100%; height:100%; }
.hero__fog{ position:absolute; inset:0; background:radial-gradient(60% 34% at 24% 78%, rgba(142,76,74,.14), transparent 60%), radial-gradient(55% 32% at 76% 72%, rgba(106,58,58,.12), transparent 60%), radial-gradient(85% 46% at 50% 100%, rgba(84,50,50,.26), transparent 66%), radial-gradient(70% 40% at 50% 30%, rgba(126,42,46,.09), transparent 60%); animation:fogdrift 34s ease-in-out infinite alternate; }
.hero__fog2{ position:absolute; inset:0; background:radial-gradient(50% 30% at 62% 88%, rgba(160,64,64,.08), transparent 60%); animation:fogdrift2 46s ease-in-out infinite alternate; }
@keyframes fogdrift{ from{ transform:translate3d(-4%,0,0);} to{ transform:translate3d(5%,-2%,0);} }
@keyframes fogdrift2{ from{ transform:translate3d(3%,1%,0);} to{ transform:translate3d(-5%,-1%,0);} }
.hero__vig{ position:absolute; inset:0; background:radial-gradient(120% 92% at 50% 32%, transparent 36%, rgba(4,1,1,.7) 80%, rgba(2,0,0,.95) 100%); }
/* Kino: volumetrische Lichtstrahlen aus dem Blutmond */
.hero__rays{ position:absolute; top:-34%; left:50%; width:min(1200px,150vw); aspect-ratio:1; transform:translateX(-50%); z-index:1; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 6.5deg, rgba(228,78,76,.055) 6.5deg 8.4deg, transparent 8.4deg 15deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,.55) 32%, transparent 60%);
  mask:radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,.55) 32%, transparent 60%);
  filter:blur(2px); opacity:.7; animation:rayspin 150s linear infinite; }
@keyframes rayspin{ to{ transform:translateX(-50%) rotate(360deg); } }
/* Die 13 Hexen — Silhouetten, die aus den Schatten links & rechts auftauchen */
.hero__coven{ display:none; position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 0 16px rgba(90,14,30,.3)); animation:covenAppear 2.4s ease-out both, covenBreathe 11s ease-in-out 2.4s infinite; }
@keyframes covenAppear{ from{ opacity:0; } to{ opacity:1; } }
@keyframes covenBreathe{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
/* Kino: Hero-Einblendung + atmendes Wappen */
.hero__inner{ animation:heroIn 1.5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
.hero__crest{ animation:crestGlow 7s ease-in-out 1s infinite; }
@keyframes crestGlow{
  0%,100%{ filter:drop-shadow(0 0 34px rgba(178,42,56,.38)) drop-shadow(0 0 10px rgba(201,162,75,.14)); }
  50%{ filter:drop-shadow(0 0 56px rgba(208,54,64,.54)) drop-shadow(0 0 15px rgba(224,190,120,.22)); }
}
.hero__tree{ position:absolute; bottom:0; z-index:2; height:min(94vh,940px); width:clamp(150px,21vw,330px); pointer-events:none; filter:drop-shadow(0 0 20px rgba(52,112,74,.32)); }
.hero__tree.l{ left:-1%; }
.hero__tree.r{ right:-1%; transform:scaleX(-1); }
.hero__tree svg{ width:100%; height:100%; display:block; }
.hero__tree .glint{ fill:#cdeccf; filter:drop-shadow(0 0 3px rgba(180,240,190,.85)); animation:twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.12; } 50%{ opacity:.92; } }
@media (max-width:720px){ .hero__tree{ width:108px; opacity:.5; } }
.hero__inner{ position:relative; z-index:3; max-width:960px; margin-inline:auto; padding:clamp(3rem,7vw,5.5rem) clamp(1.2rem,5vw,3rem) clamp(3.5rem,8vw,6rem); text-align:center; }
/* Illuminations-Rahmen */
.frame{ position:relative; padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,3rem); }
.frame__b{ position:absolute; inset:0; pointer-events:none; }
.frame__b::before,.frame__b::after{ content:""; position:absolute; left:14px; right:14px; height:2.5px; background:linear-gradient(90deg,transparent,var(--gold-tief) 10%,var(--gold-hell) 50%,var(--gold-tief) 90%,transparent); box-shadow:0 0 10px rgba(201,162,75,.25); }
.frame__b::before{ top:8px; } .frame__b::after{ bottom:8px; }
.frame__v{ position:absolute; top:14px; bottom:14px; width:2.5px; background:linear-gradient(180deg,transparent,var(--gold-tief) 10%,var(--gold-hell) 50%,var(--gold-tief) 90%,transparent); box-shadow:0 0 10px rgba(201,162,75,.25); }
.frame__v.l{ left:8px; } .frame__v.r{ right:8px; }
.frame__c{ position:absolute; width:68px; height:68px; color:var(--gold-hell); filter:drop-shadow(0 0 8px rgba(201,162,75,.35)); }
.frame__c.tl{ top:-4px; left:-4px; } .frame__c.tr{ top:-4px; right:-4px; transform:scaleX(-1); }
.frame__c.bl{ bottom:-4px; left:-4px; transform:scaleY(-1); } .frame__c.br{ bottom:-4px; right:-4px; transform:scale(-1); }

.hero .eyebrow{ justify-content:center; color:var(--gold); }
.hero__crest{ width:min(384px,80vw); margin:.4rem auto 1.3rem; filter:drop-shadow(0 0 40px rgba(178,42,56,.45)) drop-shadow(0 0 12px rgba(201,162,75,.16)); }
.hero__crest svg{ width:100%; height:auto; display:block; }
.hero h1{ font-family:var(--display); font-size:clamp(2.9rem,8vw,6rem); line-height:.98; letter-spacing:.01em; margin:.2rem 0 .5rem; filter:drop-shadow(0 2px 18px rgba(0,0,0,.6)); }
.hero .motto{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.4rem,2.6vw,2rem); color:var(--blut-hell); margin:.35rem 0 1.5rem; letter-spacing:.01em; text-shadow:0 0 22px rgba(138,20,32,.4); }
.hero .claim{ font-family:var(--serif); font-size:clamp(1.2rem,2.1vw,1.5rem); color:var(--text); max-width:44ch; margin:0 auto 2rem; font-style:italic; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:2rem; }
.hero__seal{ position:absolute; right:clamp(-6px,3vw,60px); bottom:clamp(-10px,2vw,30px); z-index:4; transform:rotate(-9deg); }
.trust{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 1.6rem; font-size:.95rem; color:var(--text-sek); }
.trust .stars{ color:var(--gold); letter-spacing:.1em; }
.trust span strong{ color:var(--text); }
/* schwebende Glut */
.embers{ position:absolute; inset:0; z-index:1; pointer-events:none; }
/* translateZ/will-change hebt die Funken auf eine eigene Compositor-Ebene.
   Ohne das friert die Aufwärts-Animation auf Handys ein: `body` ist wegen
   `overflow-x:hidden` ein eigener Scroll-Container, und fixierte Elemente
   darin werden auf Mobil-Browsern beim Scrollen nicht zuverlässig neu
   gezeichnet — die Funken standen dann still am unteren Rand. */
.sparks{ position:fixed; inset:0; z-index:3; overflow:hidden; pointer-events:none; transform:translateZ(0); }
.ember{ position:absolute; bottom:0; width:calc(var(--s,4px)*1.55); height:calc(var(--s,4px)*3.2); opacity:0; animation:rise var(--dur,16s) linear infinite; will-change:transform,opacity; }
.ember::before{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 45%, #fffdf7 0%, #fff6c2 6%, #ffe45c 13%, #ffc21f 21%, #ff8f14 30%, #f2570f 40%, #c81a0e 52%, #7d0e09 66%, #360303 79%, rgba(26,2,2,0) 90%); filter:drop-shadow(0 0 3px rgba(200,70,14,.5)); transform-origin:50% 50%; animation:flicker 1s linear infinite; }
/* Unregelmaessiges Aufflackern: harte Helligkeitsspruenge statt gleichmaessigem Pulsieren. */
@keyframes flicker{
  0%,100%{ opacity:.52; transform:scale(.82); }
  7%{  opacity:1;   transform:scale(1.14); }
  14%{ opacity:.64; transform:scale(.91); }
  23%{ opacity:.98; transform:scale(1.06); }
  31%{ opacity:.42; transform:scale(.78); }
  39%{ opacity:.9;  transform:scale(1.03); }
  47%{ opacity:1;   transform:scale(1.17); }
  55%{ opacity:.58; transform:scale(.87); }
  63%{ opacity:.95; transform:scale(1.05); }
  71%{ opacity:.48; transform:scale(.83); }
  80%{ opacity:1;   transform:scale(1.11); }
  88%{ opacity:.68; transform:scale(.94); }
  94%{ opacity:.86; transform:scale(1.01); }
}
/* 7 Takte à 1 s — sonst flackern alle 16 Funken im Gleichschritt.
   Die negativen Verzoegerungen sind ueber die volle Sekunde verteilt, damit
   keine zwei Funken phasengleich laufen; jeder startet mitten im Zyklus. */
.ember:nth-child(7n+1)::before{ animation-delay:-.06s; }
.ember:nth-child(7n+2)::before{ animation-delay:-.51s; }
.ember:nth-child(7n+3)::before{ animation-delay:-.23s; }
.ember:nth-child(7n+4)::before{ animation-delay:-.78s; }
.ember:nth-child(7n+5)::before{ animation-delay:-.37s; }
.ember:nth-child(7n+6)::before{ animation-delay:-.92s; }
.ember:nth-child(7n+7)::before{ animation-delay:-.64s; }
@keyframes rise{
  0%{ opacity:0; transform:translate(0,12vh) scale(.5); }
  8%{ opacity:.95; }
  24%{ opacity:.5; transform:translate(5px,-16vh) scale(.9); }
  48%{ opacity:1; transform:translate(-5px,-42vh) scale(1); }
  72%{ opacity:.55; transform:translate(7px,-68vh) scale(1.05); }
  100%{ opacity:0; transform:translate(-2px,-96vh) scale(1.15); }
}

/* ---------- Section-Head ---------- */
.sec-head{ max-width:64ch; margin-bottom:clamp(2rem,4vw,3rem); }
.sec-head.center{ margin-inline:auto; }
.sec-head.center .eyebrow{ justify-content:center; }

/* ---------- Ornament-Divider ---------- */
.orn{ display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--gold); margin:1.6rem auto 0; max-width:360px; }
.orn::before,.orn::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--gold-tief)); }
.orn svg{ width:46px; height:46px; filter:drop-shadow(0 0 8px rgba(201,162,75,.3)); }

.dropcap::first-letter{ font-family:var(--display); font-size:4rem; float:left; line-height:.72; padding:.08em .12em 0 0; color:var(--blut-hell); text-shadow:0 0 16px rgba(178,42,56,.3); }

/* ---------- Storyworld ---------- */
.story-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.story-facts{ display:grid; gap:.9rem; }
.fact{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.1rem; background:var(--panel); border:1px solid var(--linie); border-radius:var(--radius); transition:border-color .18s, transform .18s; }
.fact:hover{ border-color:var(--gold-tief); transform:translateX(3px); }
.fact .ic{ color:var(--gold); flex:none; width:28px; height:28px; margin-top:2px; filter:drop-shadow(0 0 5px rgba(201,162,75,.3)); }
.fact b{ color:var(--gold-hell); display:block; font-family:var(--caps); font-size:1rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.15rem; }
.fact span{ color:var(--text-sek); font-size:1rem; }

/* ---------- Buchkarten (illuminierte Tafeln) ---------- */
.books{ display:grid; grid-template-columns:repeat(auto-fill,minmax(324px,1fr)); gap:var(--gap); }
.book{ display:flex; flex-direction:column; background:linear-gradient(180deg,var(--panel),var(--leder)); border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; transition:transform .18s, border-color .18s, box-shadow .18s; position:relative; }
.book::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(201,162,75,.14); border-radius:6px; pointer-events:none; }
.book:hover{ transform:translateY(-5px); border-color:var(--blut); box-shadow:var(--shadow), 0 0 36px -12px rgba(178,42,56,.55); }
.book__top{ display:flex; gap:1.1rem; padding:1.3rem 1.3rem 0; }
.cover{ flex:none; width:120px; aspect-ratio:2/3; border-radius:3px 6px 6px 3px; position:relative; overflow:hidden; box-shadow:0 12px 30px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(201,162,75,.2); display:flex; flex-direction:column; justify-content:space-between; padding:.6rem .55rem; color:#E9DFC7; background:linear-gradient(160deg,#241a10,#0b0805 72%); }
.cover::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--foil); opacity:.9; }
.cover::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 45% at 50% 22%, rgba(201,162,75,.14), transparent 62%); }
.cover.zyk-mitternacht{ background:linear-gradient(160deg,#28141a,#0a0605 72%); }
.cover.zyk-mitternacht::after{ background:radial-gradient(70% 45% at 50% 22%, rgba(178,42,56,.18), transparent 62%); }
.cover .c-serie{ font-size:.52rem; color:var(--text-meta); letter-spacing:.12em; text-transform:uppercase; position:relative; z-index:1; }
.cover .c-sigil{ position:absolute; right:.4rem; top:40%; width:40px; height:40px; color:rgba(201,162,75,.55); }
.cover .c-nr{ font-family:var(--caps); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hell); position:relative; z-index:1; }
.cover .c-title{ font-family:var(--serif); font-weight:600; font-size:1.12rem; line-height:1.05; position:relative; z-index:1; text-shadow:0 1px 6px rgba(0,0,0,.7); }
.book__head{ min-width:0; }
.book__badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
.book__title{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--gold-hell); margin:0 0 .1rem; letter-spacing:.005em; }
.book__title a{ color:inherit; } .book__title a:hover{ color:var(--kerze); text-decoration:none; }
.book__meta{ font-family:var(--caps); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-meta); margin:0; }
.book__blurb{ color:var(--text-sek); font-size:1.02rem; padding:1rem 1.3rem 0; flex:1; }
.book__formats{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.9rem 1.3rem 0; }
.buy{ padding:1rem 1.3rem 1.3rem; margin-top:.8rem; }
.buy__label{ font-family:var(--caps); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-meta); margin-bottom:.55rem; display:flex; align-items:center; gap:.4rem; }
/* Passt sich der Zahl der Buttons an: einer fuellt die Breite, zwei teilen sie sich. */
.buy__row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.buy__row .btn{ flex:1 1 140px; width:auto; }
.werbung{ font-family:var(--sans); font-size:.64rem; color:var(--text-meta); text-transform:uppercase; letter-spacing:.1em; border:1px solid var(--linie); border-radius:3px; padding:.05rem .3rem; }

/* ---------- Timeline ---------- */
.timeline{ position:relative; display:grid; gap:.2rem; }
.timeline::before{ content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--gold),var(--gold-tief),var(--linie)); }
.tl{ position:relative; padding:.9rem 0 .9rem 3.4rem; }
.tl__dot{ position:absolute; left:8px; top:1.1rem; width:22px; height:22px; border-radius:50%; background:var(--grund); border:2px solid var(--gold-tief); display:grid; place-items:center; font-family:var(--caps); font-size:.7rem; color:var(--gold-hell); font-weight:700; }
.tl.start .tl__dot{ background:var(--foil); color:var(--cta-text); border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,162,75,.14), 0 0 16px rgba(201,162,75,.5); }
.tl__body{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; }
.tl__title{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--gold-hell); }
.tl__title a:hover{ color:var(--kerze); }
.tl__log{ color:var(--text-sek); font-size:1rem; width:100%; margin:.1rem 0 0; }
.tl__start-tag{ font-family:var(--caps); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--kerze); }

/* ---------- Hörbuch ---------- */
.audio{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,2rem); align-items:center; background:linear-gradient(120deg, rgba(26,18,9,.9), rgba(12,8,4,.92)); border:1px solid var(--linie); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:inset 0 0 50px rgba(0,0,0,.45); }
.audio__ic{ width:66px; height:66px; color:var(--gold); filter:drop-shadow(0 0 8px rgba(201,162,75,.35)); }
.audio h3{ font-family:var(--serif); font-weight:600; font-size:1.7rem; color:var(--gold-hell); text-transform:none; letter-spacing:0; margin:0 0 .3rem; }
.audio p{ margin:0; color:var(--text-sek); }

/* ---------- Autorin ---------- */
.author{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.author__portrait{ aspect-ratio:4/5; border-radius:var(--radius); background:linear-gradient(160deg,#221808,#0b0704); border:1px solid var(--gold-tief); display:grid; place-items:center; color:var(--text-meta); text-align:center; overflow:hidden; box-shadow:inset 0 0 60px rgba(0,0,0,.55); position:relative; }
.author__portrait::before{ content:""; position:absolute; inset:22px; border:1px solid rgba(201,162,75,.35); border-radius:6px; z-index:3; }
.author__portrait .ph{ padding:1.5rem; font-size:.9rem; }
.author__portrait .mono{ width:80px; height:80px; color:var(--gold); margin-bottom:.8rem; filter:drop-shadow(0 0 8px rgba(201,162,75,.35)); }
.author__awards{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.quote{ background:var(--pergament); color:var(--perg-ink); border-radius:2px; padding:1.2rem 1.4rem; margin:0 0 1rem; position:relative; box-shadow:0 10px 26px -12px rgba(0,0,0,.6); border:1px solid var(--perg-linie); }
.quote::before{ content:"“"; font-family:var(--display); position:absolute; top:-.2rem; left:.5rem; font-size:3rem; color:var(--blut); opacity:.5; }
.quote p{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--perg-ink); margin:0 0 .5rem; padding-left:1rem; }
.quote cite{ font-family:var(--caps); font-style:normal; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#6a5330; padding-left:1rem; }
.placeholder-note{ font-family:var(--sans); font-size:.82rem; color:var(--text-meta); border:1px dashed var(--linie); border-radius:var(--radius-s); padding:.55rem .85rem; margin-top:.6rem; }

/* ---------- Testimonials (Pergament-Schnipsel) ---------- */
.testi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--gap); }
.testi__card{ background:var(--pergament); color:var(--perg-ink); border:1px solid var(--perg-linie); border-radius:2px; padding:1.5rem 1.4rem 1.4rem; position:relative; box-shadow:0 12px 30px -14px rgba(0,0,0,.7); }
.testi__stars{ color:var(--blut); letter-spacing:.12em; margin-bottom:.5rem; }
.testi__text{ font-family:var(--serif); font-size:1.24rem; font-style:italic; color:var(--perg-ink); margin:0 0 .8rem; }
.testi__src{ font-family:var(--sans); font-size:.8rem; color:#6a5330; }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--linie); }
.faq summary{ cursor:pointer; list-style:none; padding:1.15rem .2rem; font-family:var(--serif); font-weight:600; font-size:1.35rem; color:var(--gold-hell); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"✦"; color:var(--gold-tief); font-size:1.1rem; transition:transform .25s, color .2s; flex:none; }
.faq details[open] summary::after{ transform:rotate(180deg); color:var(--kerze); }
.faq details>div{ padding:0 .2rem 1.2rem; color:var(--text-sek); font-size:1.06rem; }

/* ---------- Final CTA ---------- */
.final{ text-align:center; position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(24,17,9,.7), rgba(10,7,4,.96)); border-block:1px solid var(--linie); }
.final::before{ content:""; position:absolute; inset:0; background:radial-gradient(72% 100% at 50% 120%, rgba(150,20,34,.46), transparent 60%), radial-gradient(50% 70% at 50% -10%, rgba(201,162,75,.1), transparent 60%); pointer-events:none; }
.final .wrap{ position:relative; }
.final h2{ max-width:22ch; margin-inline:auto; }
.final p{ max-width:54ch; margin-inline:auto; color:var(--text-sek); font-style:italic; font-size:1.2rem; }

/* ---------- Footer ---------- */
.footer{ background-color:#080604; border-top:2px solid var(--linie); padding-block:3rem 2.2rem; font-size:.95rem; }
[data-theme="light"] .footer{ background-color:#ddceac; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footer h4{ font-family:var(--caps); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-tief); margin-bottom:.8rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer a{ color:var(--text-sek); }
.footer a:hover{ color:var(--gold-hell); }
.disclosure{ font-family:var(--sans); color:var(--text-meta); font-size:.85rem; line-height:1.6; border-top:1px solid var(--linie); padding-top:1.4rem; }
.disclosure strong{ color:var(--text-sek); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s, transform .8s; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .story-grid,.author{ grid-template-columns:1fr; }
  .audio{ grid-template-columns:auto 1fr; }
  .audio .btn{ grid-column:1 / -1; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
/* Burger-Menü schon unter 1024px: der 6-Punkte-Nav braucht gemessen ~990px
   Platz — zwischen 720 und 1024 lief er sonst rechts aus dem Fenster (Tablets). */
@media (max-width:1023px){
  .nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--grund); border-bottom:1px solid var(--linie); padding:.5rem 0; }
  .nav.open{ display:flex; }
  .nav a{ padding:.85rem 1.5rem; }
  .nav-toggle{ display:grid; place-items:center; margin-left:auto; background:transparent; border:1px solid var(--linie); color:var(--gold-hell); width:42px; height:42px; border-radius:var(--radius-s); cursor:pointer; }
}
@media (max-width:720px){
  .header__cta .btn{ display:none; }
  .hero__seal{ transform:scale(.75) rotate(-9deg); right:-6px; bottom:-10px; }
}
@media (max-width:460px){
  .footer__grid{ grid-template-columns:1fr; }
  .book__top{ flex-direction:column; }
  .cover{ width:104px; }
}

@media (prefers-reduced-motion:reduce){
  .foil,.ember,.ember::before,.hero__fog,.hero__fog2,.hero__tree .glint,.rune{ animation:none; }
  .hero__tree .glint{ opacity:.6; }
  .rune{ opacity:.42; }
  /* Funken ganz ausblenden statt sie sichtbar einzufrieren: ohne Animation
     klebten sie als Reihe am unteren Bildschirmrand und sahen defekt aus. */
  .sparks{ display:none; }
  .hero__rays,.hero__inner,.hero__crest{ animation:none !important; }
  .hero__coven{ animation:none !important; opacity:.9; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .book:hover,.btn:hover,.fact:hover{ transform:none; }
}

/* ============================================================
   Unterseiten (Buch / Hörbuch / Reihenfolge / Autorin)
   ============================================================ */
.pagehead{ position:relative; padding-block:clamp(2.4rem,6vw,4rem) clamp(1.6rem,4vw,2.6rem); border-bottom:1px solid var(--linie); background:radial-gradient(90% 130% at 50% -30%, rgba(120,16,26,.2), transparent 62%); text-align:center; }
.pagehead h1{ font-family:var(--caps); font-weight:600; letter-spacing:.04em; font-size:clamp(1.9rem,4.6vw,3.2rem); color:var(--gold-hell); margin:.3rem 0; }
.pagehead__sub{ font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2vw,1.35rem); color:var(--text-sek); max-width:60ch; margin:0 auto; }
.pagehead__badges{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:.5rem; }
.crumbs{ font-family:var(--caps); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-meta); display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.crumbs a{ color:var(--gold); } .crumbs i{ color:var(--gold-tief); font-style:normal; } .crumbs span{ color:var(--text-sek); }

.detail__grid{ display:grid; grid-template-columns:322px 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:start; }
.detail__aside{ position:sticky; top:86px; display:grid; gap:1.2rem; }
@media (max-width:860px){ .detail__grid{ grid-template-columns:1fr; } .detail__aside{ position:static; max-width:360px; margin-inline:auto; } }

.bigcover{ width:100%; aspect-ratio:2/3; border-radius:4px 9px 9px 4px; position:relative; overflow:hidden; box-shadow:0 20px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(201,162,75,.22); display:flex; flex-direction:column; justify-content:space-between; padding:1.1rem 1rem; color:#E9DFC7; background:linear-gradient(160deg,#241a10,#0b0805 72%); }
.bigcover::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--foil); opacity:.9; }
.bigcover::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 45% at 50% 20%, rgba(201,162,75,.14), transparent 62%); }
.bigcover.zyk-mitternacht{ background:linear-gradient(160deg,#28141a,#0a0605 72%); }
.bigcover.zyk-mitternacht::after{ background:radial-gradient(70% 45% at 50% 20%, rgba(178,42,56,.18), transparent 62%); }
.bigcover .c-serie{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-meta); position:relative; z-index:1; }
.bigcover .c-sigil{ position:absolute; right:1rem; top:38%; width:66px; height:66px; color:rgba(201,162,75,.5); }
.bigcover .c-nr{ font-family:var(--caps); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hell); position:relative; z-index:1; }
.bigcover .c-title{ font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.05; position:relative; z-index:1; text-shadow:0 1px 6px rgba(0,0,0,.7); }

.buybox{ background:linear-gradient(180deg,var(--panel),var(--leder)); border:1px solid var(--linie); border-radius:var(--radius); padding:1.2rem; display:grid; gap:.6rem; }
.buybox__label{ font-family:var(--caps); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-meta); display:flex; align-items:center; gap:.4rem; margin-bottom:.2rem; }
.buybox__hint{ font-size:.82rem; color:var(--text-meta); margin:.3rem 0 0; }
.btn--block{ width:100%; }
.detail__hoerlink{ font-family:var(--caps); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-hell); text-align:center; display:block; }

.prose{ max-width:66ch; }
.prose > h2{ font-family:var(--caps); font-size:clamp(1.3rem,2.6vw,1.7rem); color:var(--gold-hell); letter-spacing:.05em; margin:2rem 0 .6rem; text-transform:none; }
.prose > h2:first-child{ margin-top:0; }
.prose p{ color:var(--text-sek); font-size:1.08rem; }
.prose .faq{ max-width:none; margin:0; }
.prose .faq summary{ font-size:1.15rem; }

.seriesnav{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--linie); }
.seriesnav__a{ display:grid; gap:.1rem; color:var(--text-sek); }
.seriesnav__a span{ font-family:var(--caps); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-meta); }
.seriesnav__a b{ font-family:var(--serif); font-size:1.15rem; color:var(--gold-hell); }
.seriesnav__a.right{ text-align:right; }
.seriesnav__hub{ font-family:var(--caps); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-tief); border-radius:var(--radius-s); padding:.6rem 1rem; }
.seriesnav__hub:hover{ background:rgba(201,162,75,.08); text-decoration:none; }

.rf-tablewrap{ overflow-x:auto; margin:1.4rem 0; }
.rf-table{ width:100%; border-collapse:collapse; font-size:1rem; }
.rf-table th{ font-family:var(--caps); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-tief); text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--linie); }
.rf-table td{ padding:.8rem; border-bottom:1px solid rgba(58,42,24,.5); color:var(--text-sek); vertical-align:top; }
.rf-table td a{ color:var(--gold-hell); }
.rf-nr{ font-family:var(--display); font-size:1.4rem; color:var(--gold); width:2.5rem; }
.rf-zyk{ display:block; font-size:.78rem; color:var(--text-meta); }
.rf-note{ display:block; font-size:.9rem; color:var(--text-sek); margin-top:.35rem; max-width:64ch; line-height:1.5; }
.rf-meta{ display:block; font-size:.76rem; color:var(--gold-tief); margin-top:.3rem; letter-spacing:.02em; }
.rf-links{ white-space:nowrap; font-size:.9rem; }

/* E-Mail-Schutz (Impressum/Datenschutz): Die Adresse steht NICHT im HTML,
   sondern wird hier als CSS-Inhalt gerendert — Pseudo-Element-Text laesst
   sich nicht markieren/kopieren und wird von Spam-Robotern, die den
   Quelltext lesen, nicht gefunden. \0040 = @, \002E = Punkt. */
.mail-schutz{ user-select:none; -webkit-user-select:none; white-space:nowrap; color:var(--gold-hell); }
.mail-schutz::after{ content:"info" "\0040" "hexen-krimi" "\002E" "de"; }

.hublist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; }
.hubcard{ display:flex; align-items:center; gap:1rem; background:linear-gradient(180deg,var(--panel),var(--leder)); border:1px solid var(--linie); border-radius:var(--radius); padding:1.1rem 1.2rem; transition:transform .16s, border-color .16s, box-shadow .16s; }
.hubcard:hover{ transform:translateY(-3px); border-color:var(--gold-tief); box-shadow:0 0 28px -12px rgba(201,162,75,.35); text-decoration:none; }
.hubcard__ic{ width:40px; height:40px; color:var(--gold); flex:none; }
.hubcard b{ font-family:var(--serif); font-size:1.25rem; color:var(--gold-hell); display:block; }
.hubcard__nr{ font-family:var(--caps); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-meta); }
.hubcard__go{ margin-left:auto; color:var(--gold); font-size:1.4rem; }

.audiocover{ width:100%; aspect-ratio:1; border-radius:var(--radius); background:radial-gradient(circle at 50% 38%, #241a10, #0b0805 72%); border:1px solid var(--linie); display:grid; place-items:center; gap:.6rem; color:var(--gold); box-shadow:inset 0 0 50px rgba(0,0,0,.5); }
.audiocover svg{ width:64px; height:64px; }
.audiocover span{ font-family:var(--caps); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hell); }

/* Echte Cover (per JS eingesetzt, sobald assets/img/cover/band-N.jpg existiert) */
.cover.has-cover, .bigcover.has-cover{ background-size:cover !important; background-position:center; padding:0; }
.cover.has-cover > *, .bigcover.has-cover > *{ display:none; }
.cover.has-cover::before, .cover.has-cover::after, .bigcover.has-cover::before, .bigcover.has-cover::after{ display:none; }
.author__portrait.has-cover{ background-size:cover; background-position:center top; }
.author__portrait.has-cover > *:not(.portrait-runes){ display:none; }
.portrait-runes{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.portrait-runes path{ fill:none; stroke:none; }
.portrait-runes text{ fill:var(--gold); font-family:'Noto Runic','Cinzel',serif; font-size:13px; opacity:.62; dominant-baseline:central; filter:drop-shadow(0 0 3px rgba(201,162,75,.45)); }