@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jost-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jost-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jost-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jost-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/jost-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================
   CEDRA · Design-System  (ein Fundament für alle Seiten)
   Hell: Creme + Grün   ·   Dunkel: Navy + Lila
   Mobile-first, überlaufsicher.
   ============================================================ */

:root{
  --bg:#faf9f5; --surface:#ffffff; --surface-2:#f3f2ea;
  --text:#1b1c18; --muted:#6a6f66;
  --accent:#647d46; --accent-2:#465b30; --on-accent:#ffffff;
  --line:#dde0d3; --shadow:0 14px 40px rgba(40,50,25,.10);
  --font-ui:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --font-read:Georgia,"Times New Roman",serif;
  --wrap:1120px; --read:720px; --radius:16px;
}
[data-theme="dark"]{
  --bg:#020609; --surface:#081a26; --surface-2:#0c2230;
  --text:#e9edf1; --muted:#9db0bd;
  --accent:#cdb4e6; --accent-2:#deccf2; --on-accent:#0a1119;
  --line:#122736; --shadow:0 18px 50px rgba(0,0,0,.5);
}

*{box-sizing:border-box; min-width:0;}                 /* min-width:0 => nichts läuft aus Flex/Grid */
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-read); font-size:1.08rem; line-height:1.7;
  overflow-wrap:break-word; transition:background .3s,color .3s;
}
h1,h2,h3,.brand,.eyebrow,.tag,.btn,.nav,.card-k,.pillar h3,.state,.label{font-family:var(--font-ui);}
h1,h2,h3{line-height:1.1; letter-spacing:0; overflow-wrap:break-word; font-kerning:normal;}
p{overflow-wrap:break-word;}
a{color:var(--accent-2);}
img{max-width:100%; height:auto;}
.wrap{width:min(var(--wrap),100% - 40px); margin-inline:auto;}
.read{width:min(var(--read),100% - 40px); margin-inline:auto;}
.eyebrow{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700;}

/* ---------- Kopfleiste ---------- */
.topbar{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:14px;
  padding:12px clamp(16px,4vw,40px);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.brand{font-weight:800; font-size:1.1rem; color:var(--accent); text-decoration:none; white-space:nowrap;}
.brand small{color:var(--muted); font-weight:400; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; margin-left:.5em;}
.spacer{flex:1;}
.nav{display:none; gap:22px;}
.nav a{font-size:.85rem; font-weight:600; color:var(--muted); text-decoration:none;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent-2);}
details.menu{position:relative;}
details.menu>summary{
  list-style:none; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--text);
  border:1px solid var(--line); border-radius:999px; padding:.45em 1.05em; white-space:nowrap;
}
details.menu>summary::-webkit-details-marker{display:none;}
details.menu>summary::after{content:"▾"; color:var(--muted); margin-left:.4em;}
details.menu>summary:hover{border-color:var(--accent);}
.menu-panel{
  position:absolute; right:0; top:calc(100% + 10px); width:250px; padding:8px;
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
}
.menu-panel a{
  display:flex; justify-content:space-between; align-items:center; gap:1em;
  padding:.6em .8em; border-radius:9px; font-family:var(--font-ui); font-size:.9rem;
  color:var(--text); text-decoration:none;
}
.menu-panel a:hover{background:var(--surface-2);}
.menu-panel a[aria-current="page"]{color:var(--accent-2); font-weight:700;}
.tag{font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:.15em .55em; white-space:nowrap;}
.toggle{
  width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--text);
  cursor:pointer; font-size:1rem;
}
.toggle:hover{border-color:var(--accent);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:.6em 1.3em; border-radius:999px; font-size:.85rem; font-weight:700; text-decoration:none;
  border:1px solid var(--accent); color:var(--accent-2); background:transparent; transition:.15s;}
.btn:hover{background:var(--accent); color:var(--on-accent);}
.btn.solid{background:var(--accent); color:var(--on-accent);}
.btn.solid:hover{filter:brightness(1.05);}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem;}

/* ---------- Hero ---------- */
.hero{position:relative; text-align:center; padding:14vh 20px 8vh; overflow:hidden;}
.hero{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--bg)),var(--bg) 72%);}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 26%,transparent) 1px,transparent 1.6px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 28%,#000,transparent 76%);
          mask-image:radial-gradient(72% 62% at 50% 28%,#000,transparent 76%);}
[data-theme="dark"] .hero{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--bg)),var(--bg) 72%);}
[data-theme="dark"] .hero::before{opacity:.4;}
.hero h1{font-size:clamp(3rem,13vw,6.5rem); color:var(--accent); margin:.05em 0 0;}
.hero .kick{font-family:var(--font-ui); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-size:clamp(.75rem,2.5vw,1rem); margin:.2em 0 0;}
.hero .copy{max-width:640px; margin:1.6rem auto 0; font-size:clamp(1.15rem,3.5vw,1.5rem); line-height:1.5;}
.hero .btn-row{justify-content:center;}

/* ---------- Abschnitte ---------- */
section{padding:8vh 0;}
.section-label{font-family:var(--font-ui); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:1rem;}
h2{font-size:clamp(1.9rem,6vw,3.2rem); margin:.1em 0 .5em;}
.lead{font-size:1.2rem;}
.two{display:grid; gap:clamp(24px,5vw,64px);}
.divider{border:none; border-top:1px solid var(--line); margin:0;}

/* Kompass (Signatur) */
.compass{background:var(--surface); border-block:1px solid var(--line); text-align:center;}
.compass .grid{display:grid; grid-template-columns:1fr; gap:1px; max-width:820px; margin:2.5rem auto 0;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.compass .cell{background:var(--bg); padding:1.5rem; text-align:left;}
.compass .cell span{font-family:var(--font-ui); font-size:.72rem; color:var(--muted);}
.compass .cell strong{display:block; margin-top:.4em; font-family:var(--font-ui); font-weight:700;
  font-size:1.25rem; color:var(--accent-2);}
.compass .note{margin-top:1.6rem; color:var(--muted); font-style:italic;}

/* ---------- Säulen ---------- */
.pillars{display:grid; grid-template-columns:1fr; gap:16px; margin-top:2.5rem;}
.pillar{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.4rem;}
.pillar .badge{width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent-2);
  font-family:var(--font-ui); font-weight:800; font-size:1.15rem;}
.pillar .meta{margin-top:1.2rem; font-family:var(--font-ui); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);}
.pillar h3{font-size:1.6rem; margin:.15em 0 .3em;}
.pillar p{color:var(--muted); font-size:.98rem; line-height:1.55; margin:0;}
.pillar .state{margin-top:1.2rem; font-family:var(--font-ui); font-weight:700; font-size:.72rem; color:var(--accent-2);}

/* OS-Erklärung */
.os{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 76%,#000));
  color:var(--on-accent); border-radius:var(--radius); padding:clamp(1.8rem,5vw,3rem); margin-top:3rem;}
.os .section-label{color:var(--on-accent); opacity:.85;}
.os h2{margin-top:0;}

/* Karten-Wegweiser */
.cards{display:grid; grid-template-columns:1fr; gap:16px; margin-top:2.5rem;}
.card{display:flex; flex-direction:column; gap:.4em; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.4rem 1.5rem; text-decoration:none; color:var(--text);
  transition:transform .16s,border-color .16s,box-shadow .16s;}
.card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow);}
.card-k{font-weight:700; font-size:1.2rem; color:var(--accent-2);}
.card-d{color:var(--muted); font-size:.98rem; line-height:1.5;}
.card .state{margin-top:.3em; align-self:flex-start;}

/* Zitat */
blockquote{border-left:3px solid var(--accent); margin:0; padding:.4em 0 .4em 1.2rem;
  color:var(--muted); font-style:italic; font-size:1.3rem; line-height:1.4;}

/* ---------- Leseseite (Manifest) ---------- */
.page-head{text-align:center; padding:9vh 20px 3vh;}
.page-head h1{font-size:clamp(2.2rem,7vw,3.6rem); color:var(--accent); margin:0 0 .3em;}
.page-head .autor{font-style:italic;}
.page-head .version{color:var(--muted); font-family:var(--font-ui); font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; margin-top:1em;}
.page-head .kompass{max-width:420px; margin:1.8rem auto 0; color:var(--accent-2); font-style:italic;}
.downloads{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:1rem 20px 2.5rem;}
.downloads a{font-family:var(--font-ui); font-size:.85rem; text-decoration:none; color:var(--accent-2);
  border:1px solid var(--accent); border-radius:999px; padding:.5em 1.2em;}
.downloads a:hover{background:var(--accent); color:var(--on-accent);}
.hoerbuch{text-align:center; padding:0 20px 2.5rem; border-bottom:1px solid var(--line);}
.hoerbuch .label{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem;}
.hoerbuch audio{width:min(520px,100%);}
.toc{width:min(var(--read),100% - 40px); margin:2.5rem auto 0; font-family:var(--font-ui);}
.toc>summary{list-style:none; cursor:pointer; text-align:center; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px;
  max-width:200px; margin:0 auto; padding:.6em 0;}
.toc>summary::-webkit-details-marker{display:none;}
.toc[open]>summary{margin-bottom:1.4rem;}
.toc ol{list-style:none; padding:0; margin:0; columns:2; column-gap:2.4rem;}
.toc li{margin:.35em 0; break-inside:avoid;}
.toc a{text-decoration:none; color:var(--accent-2); font-size:.92rem;}
.toc a:hover{text-decoration:underline;}
main.reader{padding:4vh 0 12vh;}
main.reader h1{display:none;}
main.reader h1 + p, main.reader h1 + p + p{display:none;}
main.reader h2{font-size:1.6rem; color:var(--accent-2); margin:2.4em 0 .5em; padding-bottom:.2em;
  border-bottom:1px solid var(--line); scroll-margin-top:5em;}
main.reader h3{font-size:1.15rem; margin:1.8em 0 .3em;}
main.reader hr{border:none; border-top:1px solid var(--line); margin:2.4em 0;}

/* ---------- Einfache Seiten ---------- */
.stub{width:min(var(--read),100% - 40px); margin-inline:auto; padding:12vh 0; text-align:center;}
.stub h1{font-size:clamp(2.2rem,7vw,3.6rem); color:var(--accent); margin:0 0 .4em;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;}
.stub .note{display:inline-block; font-family:var(--font-ui); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px;
  padding:.3em 1em; margin-bottom:1.6rem;}
.stub p{text-align:left; margin:1em 0;}
.stub .ph{color:var(--muted); font-style:italic;}
.stub ul{text-align:left; color:var(--text);}

/* ---------- Fuß ---------- */
footer{border-top:1px solid var(--line); padding:5vh 20px 7vh; text-align:center; color:var(--muted);
  font-size:.85rem; line-height:1.9;}
footer .fbrand{font-family:var(--font-ui); font-weight:800; font-size:1.2rem; color:var(--accent);}
footer .fbrand small{color:var(--muted); font-weight:400; font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; margin-left:.4em;}
footer .fnav{display:flex; flex-wrap:wrap; justify-content:center; gap:1.3rem; margin:1.2rem 0;
  font-family:var(--font-ui); font-size:.82rem;}
footer .fnav a{text-decoration:none; color:var(--muted);}
footer .fnav a:hover{color:var(--accent);}

/* Fokus + Bewegung */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s,transform .7s;}
.js .reveal.vis{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important;} .reveal{opacity:1; transform:none;} html{scroll-behavior:auto;}}

/* ---------- Größere Viewports ---------- */
@media (min-width:640px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .compass .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:900px){
  .nav{display:flex;}
  .two{grid-template-columns:1.05fr .95fr; align-items:start;}
  .os{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  .os h2{margin-bottom:0;}
}
@media (min-width:1040px){
  .pillars{grid-template-columns:repeat(5,minmax(0,1fr));}
}

@media (min-width:900px){ .menu{display:none;} }

/* Marken-Schriftzug (nah am Logo) */
.brand,footer .fbrand{font-family:"Jost",var(--font-ui); text-transform:uppercase; letter-spacing:.03em; font-weight:700;}
.hero h1{font-family:"Jost",var(--font-ui); font-weight:600; letter-spacing:.015em;}

/* CEDRA durchgehend in Versalien */
.hero h1{text-transform:uppercase; letter-spacing:.03em;}
/* Leichter Verlauf in den Blasen */
.pillar .badge{background:radial-gradient(circle at 32% 26%,
  color-mix(in srgb,var(--accent) 34%,transparent),
  color-mix(in srgb,var(--accent) 12%,transparent));}

/* ============================================================
   7TV-inspiriert, aber Cedra: Glas, Tiefe, Verläufe
   (dezent gehalten – Energie, kein Klon)
   ============================================================ */

/* Gläserne Karten mit Tiefe */
.pillar,.card{
  background:color-mix(in srgb,var(--surface) 76%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent) 10%);
}
.card:hover{
  box-shadow:0 22px 60px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* Verlaufs-Buttons */
.btn.solid{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 68%,#000)); border-color:transparent;}
[data-theme="dark"] .btn.solid{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 52%,#6b4fa0));}

/* Reicherer Hero – gerichtete Verläufe statt Glow-Fleck */
.hero{background:
  radial-gradient(90% 60% at 50% -6%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 60%),
  linear-gradient(180deg, color-mix(in srgb,var(--accent) 6%,var(--bg)), var(--bg) 74%);}
[data-theme="dark"] .hero{background:
  radial-gradient(85% 55% at 50% -6%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 58%),
  radial-gradient(60% 45% at 82% 8%, color-mix(in srgb,#6b4fa0 20%,transparent), transparent 60%),
  linear-gradient(180deg, color-mix(in srgb,var(--accent) 9%,var(--bg)), var(--bg) 74%);}

/* Sanfte Verlaufs-Tönung hinter dem Kompass für Tiefe */
[data-theme="dark"] .compass{background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 6%,var(--surface)), var(--surface));}

/* Sektions-Überschrift mit leichtem Verlaufston (nur groß) */
.hero h1{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#000));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
[data-theme="dark"] .hero h1{background:linear-gradient(180deg,var(--accent-2),color-mix(in srgb,var(--accent) 80%,#7a5cb0));
  -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ============================================================
   Reichere Töne + Community-Formular
   ============================================================ */
:root{--g-deep:#324b19; --g-mid:#4a5c33; --g-soft:#88a065;}
[data-theme="dark"]{--p-violet:#6b4fa0; --p-muted:#9b82b9; --p-soft:#dfceff;}

/* Blasen: mehrere Töne */
.pillar .badge{color:#fff; background:linear-gradient(145deg,var(--g-soft),var(--accent) 52%,var(--g-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px color-mix(in srgb,var(--g-deep) 35%,transparent);}
[data-theme="dark"] .pillar .badge{color:#160f24; background:linear-gradient(145deg,var(--p-soft),var(--accent) 50%,var(--p-violet));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(107,79,160,.45);}

/* Buttons: satter Verlauf */
.btn.solid{background:linear-gradient(135deg,var(--accent),var(--g-mid) 55%,var(--g-deep)); border-color:transparent; color:#fff;}
[data-theme="dark"] .btn.solid{background:linear-gradient(135deg,var(--p-soft),var(--accent) 42%,var(--p-violet)); color:#151021;}

/* Hero: mehrere Farbfelder */
.hero{background:
  radial-gradient(70% 50% at 20% 0%, color-mix(in srgb,var(--g-soft) 18%,transparent), transparent 60%),
  radial-gradient(78% 52% at 82% 6%, color-mix(in srgb,var(--g-mid) 15%,transparent), transparent 60%),
  linear-gradient(180deg, color-mix(in srgb,var(--accent) 6%,var(--bg)), var(--bg) 74%);}
[data-theme="dark"] .hero{background:
  radial-gradient(66% 48% at 18% -4%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 58%),
  radial-gradient(60% 44% at 84% 4%, color-mix(in srgb,var(--p-violet) 30%,transparent), transparent 60%),
  radial-gradient(58% 46% at 55% 34%, color-mix(in srgb,var(--p-muted) 18%,transparent), transparent 62%),
  linear-gradient(180deg, color-mix(in srgb,var(--accent) 9%,var(--bg)), var(--bg) 76%);}

/* OS-Block: Ton-Verlauf */
.os{background:linear-gradient(135deg,var(--g-soft),var(--accent) 45%,var(--g-deep));}
[data-theme="dark"] .os{background:linear-gradient(135deg,var(--p-soft),var(--accent) 42%,var(--p-violet)); color:#151021;}
[data-theme="dark"] .os .section-label{color:#151021;}

/* CEDRA-Titel: mehrfarbig */
.hero h1{background:linear-gradient(120deg,var(--g-mid),var(--accent) 48%,var(--g-soft)); -webkit-background-clip:text; background-clip:text; color:transparent;}
[data-theme="dark"] .hero h1{background:linear-gradient(120deg,var(--p-soft),var(--accent) 44%,var(--p-violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ---- Formular ---- */
.form{max-width:560px; margin:2rem auto 0; text-align:left; display:flex; flex-direction:column; gap:14px;}
.form label{font-family:var(--font-ui); font-size:.8rem; font-weight:600; color:var(--muted); display:block; margin-bottom:.35em;}
.form input,.form textarea{width:100%; font-family:var(--font-read); font-size:1rem; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.7em .9em;}
.form textarea{min-height:140px; resize:vertical;}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.form .hp{position:absolute; left:-9999px; height:0; overflow:hidden;}
.form button{align-self:flex-start; cursor:pointer;}
.form-ok{max-width:560px; margin:1.2rem auto 0; text-align:left; padding:1rem 1.2rem; border-radius:12px;
  background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid var(--accent); color:var(--text);}

/* ============================================================
   Gesamtüberarbeitung: Rhythmus, Tiefe, Lesekomfort
   ============================================================ */

/* --- Rhythmus & Typo-Feinschliff --- */
section{padding:clamp(3.5rem,9vh,6.5rem) 0;}
h2{margin:.1em 0 .55em;}
.lead{font-size:1.22rem; line-height:1.6;}
.section-label{margin-bottom:1.1rem;}
main.reader p{margin:1em 0;}
main.reader h2{margin-top:2.8em;}
.read{line-height:1.75;}

/* --- Dunkelmodus: mehr Räumlichkeit --- */
[data-theme="dark"] body{background:linear-gradient(180deg,#04101a,#010508 55%,#000203);}
[data-theme="dark"] .pillar,[data-theme="dark"] .card{
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,#071723 92%,transparent));}
[data-theme="dark"] footer{background:linear-gradient(180deg,transparent,rgba(107,79,160,.06));}

/* --- Lesefortschritt --- */
.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--g-mid),var(--accent));}
[data-theme="dark"] .progress{background:linear-gradient(90deg,var(--accent),var(--p-violet));}

/* --- Nach-oben-Knopf --- */
.totop{position:fixed; right:18px; bottom:18px; z-index:90; width:44px; height:44px;
  display:grid; place-items:center; border-radius:50%; border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(8px);
  color:var(--accent-2); font-size:1.1rem; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; transform:translateY(8px);}
.totop.show{opacity:1; pointer-events:auto; transform:none;}
.totop:hover{border-color:var(--accent);}


/* ============================================================
   1) Inhalt-Knopf: sichtbares Feedback
   ============================================================ */
.toc>summary{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  max-width:220px; padding:.65em 1.2em; color:var(--accent-2);
  border:1.5px solid var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-weight:700; transition:background .15s, box-shadow .15s, transform .15s;
}
.toc>summary::after{content:"▾"; font-size:.9em; transition:transform .25s ease;}
.toc>summary:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 25%,transparent); transform:translateY(-1px);}
.toc[open]>summary{background:var(--accent); color:var(--on-accent);}
.toc[open]>summary::after{transform:rotate(180deg);}

/* ============================================================
   2) Zwei Welten: Hell = organisch/pflanzlich · Dunkel = futuristisch
   ============================================================ */

/* ---- HELL: Blätter & organische Formen ---- */
:root:not([data-theme="dark"]) .hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23647d46' stroke-width='1.2' opacity='.45'%3E%3Cpath d='M30 46 Q42 22 62 20 Q60 44 38 52 Q33 50 30 46 Z'/%3E%3Cpath d='M38 51 Q50 36 60 22'/%3E%3Cpath d='M96 108 Q84 130 106 128 Q118 112 108 98 Q99 100 96 108 Z'/%3E%3Cpath d='M100 122 Q104 112 108 100'/%3E%3Ccircle cx='112' cy='36' r='2.4' fill='%2388a065' stroke='none' opacity='.6'/%3E%3Ccircle cx='20' cy='104' r='1.8' fill='%23647d46' stroke='none' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 25%,#000,transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 25%,#000,transparent 78%);
}
/* organischere Formen im Hellen */
:root:not([data-theme="dark"]) .pillar,
:root:not([data-theme="dark"]) .card{border-radius:22px 26px 22px 28px;}
:root:not([data-theme="dark"]) .pillar .badge{border-radius:46% 54% 52% 48%/54% 46% 54% 46%;}
:root:not([data-theme="dark"]) .os{border-radius:26px 32px 26px 34px;}
/* Blatt-Punkt vor Sektions-Labels */
/* Fuß mit feiner Wurzel-Linie */
:root:not([data-theme="dark"]) footer{
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--g-soft) 8%,transparent));}

/* ---- DUNKEL: Gitternetz & Leuchtlinien ---- */
[data-theme="dark"] .hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(color-mix(in srgb,var(--p-muted) 16%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--p-muted) 16%,transparent) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(80% 68% at 50% 22%,#000,transparent 76%);
          mask-image:radial-gradient(80% 68% at 50% 22%,#000,transparent 76%);
}
/* präzise Kanten + Leuchtakzente im Dunklen */
[data-theme="dark"] .pillar,[data-theme="dark"] .card{border-radius:12px;}
[data-theme="dark"] .pillar .badge{border-radius:12px;}
[data-theme="dark"] .os{border-radius:14px;}
[data-theme="dark"] .pillar{position:relative; overflow:hidden;}
[data-theme="dark"] .pillar::after{content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--p-violet),transparent); opacity:.7;}
[data-theme="dark"] h2{text-shadow:0 0 26px color-mix(in srgb,var(--accent) 26%,transparent);}
[data-theme="dark"] .section-label::before{content:"▸ "; color:var(--p-muted);}
[data-theme="dark"] .topbar{border-bottom:1px solid color-mix(in srgb,var(--p-violet) 40%,var(--line));}


/* Fix: eigener Stapelkontext, damit Deko-Ebenen sichtbar sind */
.hero{isolation:isolate;}

/* ============================================================
   Dunkler Modus: Sternschnuppen im Hero (v2 – echte Schnuppen)
   ============================================================ */
.stars{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; display:none;}
[data-theme="dark"] .stars{display:block;}
.star{position:absolute; top:var(--y,12%); left:-16%;
  width:var(--w,140px); height:1.5px; border-radius:999px; opacity:0;
  /* Schweif: läuft nach hinten aus, vorn hell */
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c,#cdb4e6) 55%,transparent) 55%,var(--c,#cdb4e6) 82%,#fff);
  transform:rotate(var(--a,11deg));
  animation:shoot var(--d,11s) linear var(--del,0s) infinite;}
/* heller Kopf mit Glühen */
.star::after{content:""; position:absolute; right:-2px; top:50%; width:4px; height:4px;
  border-radius:50%; transform:translateY(-50%);
  background:#fff; box-shadow:0 0 6px 2px color-mix(in srgb,var(--c,#cdb4e6) 80%,#fff);}
.star:nth-child(1){--y:9%;  --w:150px; --a:12deg; --d:9s;  --del:0s;    --c:#dfceff;}
.star:nth-child(2){--y:24%; --w:110px; --a:9deg;  --d:13s; --del:4.5s;  --c:#cdb4e6;}
.star:nth-child(3){--y:15%; --w:170px; --a:14deg; --d:11s; --del:7.8s;  --c:#e9defc;}
.star:nth-child(4){--y:36%; --w:95px;  --a:8deg;  --d:15s; --del:2.2s;  --c:#9b82b9;}
/* Flug entlang der eigenen Achse: schnell durch, lange Pause */
@keyframes shoot{
  0%  {transform:rotate(var(--a)) translateX(0) scaleX(.4); opacity:0;}
  1%  {opacity:1;}
  7%  {transform:rotate(var(--a)) translateX(120vw) scaleX(1); opacity:1;}
  9%  {transform:rotate(var(--a)) translateX(150vw) scaleX(.5); opacity:0;}
  100%{transform:rotate(var(--a)) translateX(150vw) scaleX(.5); opacity:0;}
}
/* Ruhende Sterne als Grund */
[data-theme="dark"] .stars::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(#dfceff 1px,transparent 1.4px),
                   radial-gradient(#9b82b9 1px,transparent 1.4px);
  background-size:190px 170px,240px 210px;
  background-position:20px 30px,120px 90px;
  -webkit-mask-image:radial-gradient(85% 70% at 50% 20%,#000,transparent 80%);
          mask-image:radial-gradient(85% 70% at 50% 20%,#000,transparent 80%);}
@media (prefers-reduced-motion:reduce){.star{animation:none; opacity:0;}}

/* ============================================================
   Dunkel: atmende Sterne · Hell: Lichtflecken durchs Blätterdach
   ============================================================ */

/* --- Atmende Sterne (stationär) --- */
.tw{position:absolute; width:var(--s,3px); height:var(--s,3px); border-radius:50%;
  background:#fff; opacity:.15;
  animation:breathe var(--d,5s) ease-in-out var(--del,0s) infinite alternate;}
@keyframes breathe{
  from{opacity:.12; transform:scale(1); box-shadow:0 0 0 transparent;}
  to  {opacity:.75; transform:scale(1.3); box-shadow:0 0 8px 1px color-mix(in srgb,#dfceff 60%,transparent);}
}
.tw:nth-child(1){top:12%; left:14%; --s:2px; --d:4.5s; --del:0s;}
.tw:nth-child(2){top:8%;  left:38%; --s:3px; --d:6s;   --del:1.2s;}
.tw:nth-child(3){top:20%; left:61%; --s:2px; --d:5s;   --del:2.4s;}
.tw:nth-child(4){top:9%;  left:82%; --s:3px; --d:7s;   --del:.8s;}
.tw:nth-child(5){top:31%; left:24%; --s:2px; --d:5.5s; --del:3.1s;}
.tw:nth-child(6){top:40%; left:48%; --s:2px; --d:6.5s; --del:1.8s;}
.tw:nth-child(7){top:27%; left:90%; --s:2px; --d:4.8s; --del:2.9s;}
.tw:nth-child(8){top:45%; left:74%; --s:3px; --d:7.5s; --del:.4s;}
.tw:nth-child(9){top:52%; left:10%; --s:2px; --d:6.2s; --del:3.6s;}
.tw:nth-child(10){top:16%; left:50%; --s:2px; --d:5.8s; --del:4.2s;}

/* --- Lichtflecken (nur hell) --- */
.sunlight{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
[data-theme="dark"] .sunlight{display:none;}
.spot{position:absolute; border-radius:50%; filter:blur(46px); opacity:.5;
  background:radial-gradient(circle,color-mix(in srgb,#e8edda 85%,transparent),color-mix(in srgb,var(--g-soft) 30%,transparent) 55%,transparent 75%);
  animation:drift var(--d,22s) ease-in-out var(--del,0s) infinite alternate;}
.spot:nth-of-type(1){top:4%;  left:6%;  width:340px; height:300px; --d:24s; --del:0s;}
.spot:nth-of-type(2){top:20%; right:4%; width:420px; height:340px; --d:30s; --del:6s;}
.spot:nth-of-type(3){top:48%; left:32%; width:300px; height:260px; --d:26s; --del:12s; opacity:.38;}
@keyframes drift{
  from{transform:translate(0,0) scale(1);}
  to  {transform:translate(46px,26px) scale(1.12);}
}
@media (prefers-reduced-motion:reduce){.tw,.spot{animation:none;}}

/* Container für atmende Sterne (getrennt von den Schnuppen!) */
.twinkles{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; display:none;}
[data-theme="dark"] .twinkles{display:block;}

body{text-rendering:optimizeLegibility;}


/* Gesperrte Versal-Labels: Kerning aus -> gleichmäßige Abstände (kein "WA S") */
.section-label,.eyebrow,.kick,.tag,.state,.pillar .meta,.page-head .version,.hoerbuch .label,.toc>summary,.stub .note{
  font-kerning:none; font-feature-settings:"kern" 0;
}

/* ============================================================
   Finale: Labels in Jost (gleichmäßige Versalien) + goldene Sonne
   ============================================================ */

/* Labels: geometrische Schrift, moderate Sperrung -> kein "WA S" mehr */
.section-label,.eyebrow,.kick{
  font-family:"Jost",var(--font-ui); font-weight:600;
  letter-spacing:.06em; font-kerning:none; font-feature-settings:"kern" 0;
}

/* Lichtflecken -> goldener Sonnenschein, sanft atmend */
.spot{
  background:radial-gradient(circle,
    rgba(255,243,214,.95),
    rgba(240,201,106,.4) 52%,
    transparent 74%);
  opacity:.42; filter:blur(42px);
  animation:drift var(--d,22s) ease-in-out var(--del,0s) infinite alternate,
            sun-breathe 8s ease-in-out var(--del,0s) infinite alternate;
}
.spot:nth-of-type(3){opacity:.32;}
@keyframes sun-breathe{
  from{opacity:.32;}
  to  {opacity:.55;}
}
/* Heller Hero: Hauch Morgenwärme statt Grünstich oben */
:root:not([data-theme="dark"]) .hero{
  background:linear-gradient(180deg,
    color-mix(in srgb,#f2e3bd 26%,var(--bg)),
    color-mix(in srgb,var(--g-soft) 7%,var(--bg)) 45%,
    var(--bg) 74%);
}

/* ============================================================
   Heller Hero: Retro-Sunburst statt Sonnenflecken
   ============================================================ */
.sunlight{display:none;}
:root:not([data-theme="dark"]) .hero{background:var(--bg);}
:root:not([data-theme="dark"]) .hero::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:34%; width:230vmax; height:230vmax; inset:auto;
  transform:translate(-50%,-50%) rotate(0deg);
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    color-mix(in srgb,var(--g-soft) 36%,#ece9d6) 0deg 7.5deg,
    #f0efe3 7.5deg 15deg);
  opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);
          mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);
  animation:sunburst-spin 150s linear infinite;
}
@keyframes sunburst-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media (prefers-reduced-motion:reduce){:root:not([data-theme="dark"]) .hero::before{animation:none;}}

/* Sprachschalter */
.lang{display:inline-flex; align-items:center; gap:.35em; font-family:var(--font-ui);
  font-size:.78rem; font-weight:700; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:.42em .9em; white-space:nowrap;}
.lang:hover{border-color:var(--accent); color:var(--accent-2);}

/* ============================================================
   Unterseiten auf Startseiten-Niveau: Atmosphäre + Panels
   ============================================================ */

/* Kopfbereiche bekommen denselben Hintergrund wie der Hero */
.stub, .page-head{position:relative; isolation:isolate;}
:root:not([data-theme="dark"]) .stub::before,
:root:not([data-theme="dark"]) .page-head::before{
  content:""; position:absolute; z-index:-1; left:50%; top:-40%;
  width:190vmax; height:190vmax; transform:translate(-50%,-50%); border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    color-mix(in srgb,var(--g-soft) 30%,#ece9d6) 0deg 7.5deg,
    #f0efe3 7.5deg 15deg);
  opacity:.34;
  -webkit-mask-image:radial-gradient(closest-side,#000 22%,transparent 62%);
          mask-image:radial-gradient(closest-side,#000 22%,transparent 62%);
  animation:sunburst-spin 190s linear infinite;
}
[data-theme="dark"] .stub::before,
[data-theme="dark"] .page-head::before{
  content:""; position:absolute; z-index:-1; inset:-10% -20% auto;
  height:130%;
  background:
    radial-gradient(60% 60% at 22% 0%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 62%),
    radial-gradient(55% 55% at 82% 8%, color-mix(in srgb,var(--p-violet) 26%,transparent), transparent 64%),
    linear-gradient(color-mix(in srgb,var(--p-muted) 12%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--p-muted) 12%,transparent) 1px,transparent 1px);
  background-size:auto,auto,56px 56px,56px 56px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 18%,#000,transparent 78%);
          mask-image:radial-gradient(75% 70% at 50% 18%,#000,transparent 78%);
}

/* Überschriften mit derselben Wucht wie der Hero */
.stub{padding:14vh 0 12vh;}
.stub h1, .page-head h1{
  font-family:"Jost",var(--font-ui); font-weight:600; letter-spacing:.01em;
  font-size:clamp(2.6rem,8vw,4.4rem);
  background:linear-gradient(120deg,var(--g-mid),var(--accent) 48%,var(--g-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
[data-theme="dark"] .stub h1, [data-theme="dark"] .page-head h1{
  background:linear-gradient(120deg,var(--p-soft),var(--accent) 44%,var(--p-violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Inhalts-Panel im Glaslook der Startseiten-Karten */
.panel{
  margin-top:2rem; padding:clamp(1.6rem,4.5vw,2.6rem);
  text-align:left; border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent) 10%);
  box-shadow:var(--shadow);
}
[data-theme="dark"] .panel{
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,#071723 92%,transparent));
}
.panel > p:first-child{font-size:1.15rem; line-height:1.65;}
.panel p{margin:1.1em 0;}
.panel p:last-child{margin-bottom:0;}
.panel blockquote{margin-top:1.6rem;}
.panel ul{margin:1em 0; padding-left:1.2em;}
.panel .form{margin-top:1.6rem;}

/* FIX: Deko-Hintergründe der Unterseiten abschneiden und klickdurchlässig machen */
.stub, .page-head{overflow:hidden;}
.stub::before, .page-head::before, .hero::before, .stars, .twinkles, .sunlight{pointer-events:none;}
html, body{overflow-x:hidden;}

/* ============================================================
   Hörbuch: Kapitel-Player
   ============================================================ */

/* ============================================================
   Kapitel-Player (Hörbuch)
   ============================================================ */
.now{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.pp{flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  font-size:1rem; color:var(--on-accent); display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--g-mid));}
[data-theme="dark"] .pp{background:linear-gradient(135deg,var(--accent),var(--p-violet)); color:#151021;}
.pp:hover{filter:brightness(1.06);}
.now-meta{min-width:0;}
.now-label{font-family:var(--font-ui); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.now-title{font-family:var(--font-ui); font-weight:700; font-size:1.05rem; color:var(--accent-2); line-height:1.3;}
.chapters{list-style:none; margin:0; padding:0;}
.chapters li{border-bottom:1px solid var(--line); counter-increment:cap;}
.chapters li:last-child{border-bottom:none;}
.chapters button{display:flex; align-items:center; gap:.8em; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; padding:.72em 1em;
  font-family:var(--font-ui); font-size:.92rem; color:var(--text); transition:background .12s;}
.chapters button::before{content:"▸"; color:var(--muted); font-size:.8em; flex:0 0 auto;}
.chapters button:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);}
.chapters button.active{color:var(--accent-2); font-weight:700;
  background:color-mix(in srgb,var(--accent) 14%,transparent);}
.chapters button.active::before{content:"♪"; color:var(--accent);}

/* ============================================================
   Hörbuch-Seite: Player + Mitlesen
   ============================================================ */
.audiobook-section{padding:2vh 20px 12vh;}
.audiobook{max-width:660px; margin:0 auto; text-align:left;}
.crosslink{font-family:var(--font-ui); font-size:.92rem; margin-top:1em;}
.crosslink a{text-decoration:none; color:var(--accent-2); border-bottom:1px solid var(--accent); padding-bottom:1px;}
.crosslink a:hover{color:var(--accent);}

/* Tempo */
.speed{display:flex; gap:6px; flex-wrap:wrap;}
.speed button{font-family:var(--font-ui); font-size:.74rem; font-weight:700; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:999px; padding:.32em .72em; transition:background .12s,color .12s;}
.speed button:hover{color:var(--accent-2);}
.speed button.active{color:var(--on-accent); background:var(--accent); border-color:transparent;}
[data-theme="dark"] .speed button.active{color:#151021;}

/* Mitlese-Text */
.transcript{position:relative; margin-top:16px; max-height:54vh; overflow-y:auto;
  padding:1.3rem 1.4rem; border:1px solid var(--line); border-radius:14px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  line-height:1.95; font-size:1.06rem; color:var(--text);}
.cue{cursor:pointer; border-radius:5px; padding:.02em .12em; transition:color .12s, background .12s;}
.cue:hover{color:var(--accent-2);}
.cue.on{background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent-2); font-weight:600;}

/* Hörbuch v2: Lautstärke, Wort-Highlight */
.volume{display:flex; align-items:center; gap:8px;}
.volume svg{color:var(--muted); flex:0 0 auto;}
.vol{-webkit-appearance:none; appearance:none; width:100px; height:5px; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--v,100%), color-mix(in srgb,var(--line) 90%,transparent) var(--v,100%));}
.vol::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg); box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer;}
.vol::-moz-range-thumb{width:14px; height:14px; border:2px solid var(--bg); border-radius:50%; background:var(--accent); cursor:pointer;}
.vol::-moz-range-track{height:5px; border-radius:999px; background:color-mix(in srgb,var(--line) 90%,transparent);}
.word{cursor:pointer; border-radius:4px; padding:.02em .06em; transition:color .1s, background .1s;}
.word:hover{color:var(--accent-2);}
.word.on{background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--accent-2); font-weight:600;}

/* Fix: Unterlängen bei Verlaufs-Überschriften */
.stub h1, .page-head h1{ line-height:1.2; padding-bottom:.14em; }

/* Fix: Icons echt zentrieren (kein Grundlinien-Versatz mehr) */
.toggle{display:inline-grid; place-items:center; line-height:0;}
.toggle .i{display:grid; place-items:center; line-height:0; width:auto; height:auto;}
.pp{display:grid; place-items:center;}
.toggle svg, .toggle .i svg, .pp svg, .volume svg{display:block;}

.vol-ic{display:grid; place-items:center; color:var(--muted); background:none; border:none; padding:0; cursor:pointer;}
.vol-ic:hover{color:var(--accent-2);}
.vol-ic svg{display:block;}

/* Hörbuch: Fortschritt + Spulen */
.seek{display:flex; align-items:center; gap:10px; margin-top:14px;}
.t-cur,.t-tot{font-family:var(--font-ui); font-size:.72rem; color:var(--muted); min-width:36px; font-variant-numeric:tabular-nums;}
.t-tot{text-align:right;}
.seekbar{-webkit-appearance:none; appearance:none; flex:1; height:5px; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--v,0%), color-mix(in srgb,var(--line) 90%,transparent) var(--v,0%));}
.seekbar::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer;}
.seekbar::-moz-range-thumb{width:14px; height:14px; border:2px solid var(--bg); border-radius:50%; background:var(--accent); cursor:pointer;}
.seekbar::-moz-range-track{height:5px; border-radius:999px; background:color-mix(in srgb,var(--line) 90%,transparent);}
.skip{display:inline-flex; align-items:center; gap:3px; background:none; border:1px solid var(--line); border-radius:999px; color:var(--muted); cursor:pointer; padding:.34em .6em; font-family:var(--font-ui); font-size:.72rem; font-weight:700;}
.skip:hover{color:var(--accent-2); border-color:var(--accent);}
.skip svg{display:block;}


/* ===== Hörbuch: ein zusammenhängender Player ===== */
.player-card{padding:16px 18px; border-radius:16px;
  border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent) 10%);
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.player-card .now-meta{min-width:0;}
.controls{display:flex; align-items:center; justify-content:center; gap:14px;}
.tools{display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.tools .speed{justify-content:center;}
.tools .vol{width:150px;}

/* Kapitelwahl: aufklappbar, damit nur ein Bereich scrollt */
.chapter-toggle{margin-top:16px; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:color-mix(in srgb,var(--surface) 60%,transparent);}
.chapter-toggle>summary{cursor:pointer; list-style:none; padding:.9em 1.1em;
  font-family:var(--font-ui); font-size:.8rem; font-weight:700; letter-spacing:.04em;
  color:var(--accent-2); display:flex; align-items:center; gap:.6em;}
.chapter-toggle>summary::-webkit-details-marker{display:none;}
.chapter-toggle>summary::after{content:"▾"; margin-left:auto; color:var(--muted); transition:transform .18s;}
.chapter-toggle[open]>summary::after{transform:rotate(180deg);}
.chapter-toggle>summary:hover{color:var(--accent);}
.chapter-toggle[open]>summary{border-bottom:1px solid var(--line);}

.chapter-toggle>summary{justify-content:center; position:relative;}
.chapter-toggle>summary::after{position:absolute; right:1.1em; margin-left:0;}

@media (max-width:560px){
  .controls{gap:10px;}
  .tools .vol{width:130px;}
  .player-card{padding:16px 14px;}
}