/* Entwurf 03.09.2026: Redaktionelles Layout statt Karten. Tokens unverändert. */
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-2.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-1.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter_18pt-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter_18pt-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}

:root{
  --bg:#0b0b0d; --text:#e8e8ea; --muted:#a0a0a8; --dim:#6f6f78;
  --pink:#cc0066; --pink-dark:#8a003f; --pink-soft:#d7b1c5;
  --line:rgba(255,255,255,.1);
  --akzent:#a8396b;        /* Betonung auf Dunkel: tiefes Himbeer statt Neon */
  --akzent-hell:#7a1f47;   /* Betonung auf Hell: Wein */
  --trouble:#5d6690;       /* Blau aus der So-Much-Trouble-Wand (#4e5371), leicht aufgehellt */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,sans-serif;
  --w:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.65;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--pink);color:#fff}

/* Typo-Bausteine */


em.trouble{font-style:normal;color:var(--trouble);font-weight:400}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 18px}
.eyebrow b{color:var(--pink);font-weight:600}
.eyebrow span, .tropes span{margin-left:22px}
.eyebrow span:first-of-type, .tropes span:first-of-type{margin-left:26px}

p.lead{color:var(--muted);font-size:18px;max-width:46ch;margin:0 0 14px}
p.lead:last-of-type{margin-bottom:0}
.link{color:var(--text);text-decoration:none;border-bottom:1px solid var(--pink);padding-bottom:2px;transition:border-color .2s,color .2s}
.link:hover{color:var(--pink-soft);border-color:var(--pink-soft)}
.link.quiet{border-color:var(--line)}
.btn{display:inline-block;background:var(--pink);color:#fff;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.02em;padding:14px 26px;border-radius:2px;transition:background .2s}
.btn:hover{background:var(--pink-dark)}
.actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:34px}
.actions .link{font-size:15px}

/* Kopf */
header{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.92);border-bottom:1px solid var(--line)}
.bar{max-width:var(--w);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}


nav{display:flex;gap:26px;flex-wrap:wrap;justify-content:flex-end}
nav a{color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover{color:var(--text)}
nav a.active{color:var(--text);border-color:var(--pink)}
nav a.nl{color:var(--pink-soft)}

/* Raster */
main{max-width:var(--w);margin:0 auto;padding:0 28px}
section{padding:88px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}




/* Hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;padding:96px 0 80px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(50px,7vw,92px);line-height:.98;letter-spacing:-.02em;margin:0 0 30px}
.hero-cover{justify-self:end;width:min(100%,380px);box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.hero-cover img{width:100%}

.tropes{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:22px 0 0;line-height:2}
.tropes b{color:var(--muted);font-weight:600}
.welt .buecher{font-size:14px;line-height:1.9;margin:0 0 18px}
.welt .buecher b{font-weight:600}
.nacht .buecher{color:var(--muted)} .nacht .buecher b{color:var(--text)}
.tag .buecher{color:#5c4652} .tag .buecher b{color:#1b1016}
/* Fakten */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:34px 0}
.facts div{border-left:1px solid var(--line);padding-left:20px}
.facts strong{display:block;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;margin-bottom:6px}
.facts strong i{font-style:normal;color:var(--akzent)}
.facts span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* Buchreihe */









/* Zitat */





/* Manifest */




/* Welten */










/* Demnächst + Newsletter */
.next{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.next blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(30px,4vw,50px);line-height:1.1;letter-spacing:-.01em}
.next blockquote span{display:block;color:var(--pink)}
.next .copy p{color:var(--muted);margin:0 0 16px}
.nl-form{display:flex;gap:10px;margin-top:22px;max-width:460px}
.nl-form input{flex:1;background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--text);font:inherit;font-size:15px;padding:12px 14px}
.nl-form input:focus{outline:none;border-color:var(--pink)}
.nl-form .btn{padding:12px 22px}


/* Ailessio */






/* Fuß */
footer{border-top:1px solid var(--line);margin-top:40px}
footer .bar{padding:36px 28px 48px;align-items:flex-start}

footer small{display:block;color:var(--dim);font-size:12px;margin-top:8px}
footer nav a{font-size:11px}

/* Über mich */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start;padding:96px 0 80px}
.about h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,7vw,92px);line-height:.98;letter-spacing:-.02em;margin:0 0 30px}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wall img{width:100%;aspect-ratio:2/3.1;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.5)}


.row{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:56px 0;border-bottom:1px solid var(--line)}
.row:last-of-type{border-bottom:0}
.row h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.05;margin:0;letter-spacing:-.01em}

.row p{color:var(--muted);margin:0 0 16px;max-width:58ch}
.row p:last-child{margin-bottom:0}
.row p strong{color:var(--text);font-weight:600}
.row p.big{font-family:var(--serif);font-size:30px;line-height:1.2;color:var(--text);max-width:24ch;margin-bottom:22px}
.def{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}
.def div{border-top:1px solid var(--line);padding-top:14px}
.def h3{margin:0 0 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-soft);font-weight:600}
.def p{font-size:15px;margin:0}
.row p.kern{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1.2;color:var(--text);margin:0;max-width:26ch}
.kern i{color:var(--akzent);font-style:normal}




.social{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;align-content:flex-start}
.social a{font-size:14px}

@media (max-width:900px){
  .hero, .about, .next{grid-template-columns:1fr;gap:36px}
  .hero{padding:56px 0 60px}
  .hero-cover{justify-self:start;width:min(100%,300px);order:-1}
  .facts{grid-template-columns:1fr 1fr;gap:28px 16px}
  
  
  
  
  .row{grid-template-columns:1fr;gap:18px;padding:44px 0}
  .def{grid-template-columns:1fr}
  
  
  section{padding:64px 0}
  .bar{justify-content:center;text-align:center}
  nav{justify-content:center;gap:16px}
}
@media (max-width:560px){
  
  .facts{grid-template-columns:1fr 1fr}
  .nl-form{flex-direction:column}
}

/* ---------- Bruch und Welten (03.09., zweite Runde) ---------- */
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.bruch{padding:130px 28px 110px;text-align:center;border-bottom:0;
  background:linear-gradient(112deg,var(--bg) 0%,var(--bg) 48%,#1d0c16 82%,#3a1428 100%)}
.bruch p{font-family:var(--serif);font-size:clamp(38px,5.6vw,74px);line-height:1.04;margin:0 auto;max-width:17ch;letter-spacing:-.015em}
.bruch small{display:block;margin-top:30px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}

.welten{display:flex;min-height:760px;overflow:hidden;padding:0;border-bottom:0}
.welt{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;padding:96px 5vw 64px;transition:flex .85s cubic-bezier(.2,.8,.2,1);overflow:hidden}
@media (hover:hover){.welten:hover .welt{flex:.82}.welten .welt:hover{flex:1.5}}
.welt .inner{position:relative;z-index:2;max-width:560px;margin:0 auto;width:100%}
.welt h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.6vw,66px);line-height:1;margin:0 0 14px;letter-spacing:-.015em}
.welt p{max-width:40ch;margin:0 0 16px;font-size:16px}
.welt q{display:block;font-family:var(--serif);font-size:21px;line-height:1.3;margin:0 0 22px;quotes:"„" "“"}
.welt .cta{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;font-weight:600}
.welt .eyebrow{margin-bottom:14px}

/* Nacht */
.nacht{background:#050507;color:var(--text);padding-right:calc(5vw + 9%)}
.nacht::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 50% 108%,rgba(120,0,40,.28),rgba(120,0,40,.08) 55%,transparent 75%)}
.nacht p{color:var(--muted)} .nacht q{color:#9d97a3} .nacht .cta{color:var(--text)}

/* Tag */
.tag{background:linear-gradient(180deg,#fff9fc 0%,#fbeaf2 55%,#f6dbe7 100%);color:#1b1016;
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);margin-left:-8%;padding-left:calc(5vw + 8%)}
.tag p{color:#5c4652} .tag q{color:#8a5f74} .tag .cta{color:var(--pink)} .tag .eyebrow{color:#a06b85} .tag .eyebrow b{color:var(--pink)}
.tag::before{content:"";position:absolute;top:-18%;right:-14%;width:52vw;max-width:640px;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(204,0,102,.16),rgba(204,0,102,.05) 45%,transparent 68%)}

/* Cover-Fächer */
.faecher{position:relative;height:clamp(240px,26vw,400px);width:min(100%,520px);margin:0 auto 34px}
.faecher a{position:absolute;bottom:0;left:50%;width:44%;transform-origin:50% 100%;transition:transform .85s cubic-bezier(.2,.8,.2,1)}
.faecher img{width:100%;display:block;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.tag .faecher img{box-shadow:0 26px 50px rgba(120,0,60,.22)}
.faecher a:nth-child(1){transform:translateX(-96%) rotate(-9deg);z-index:1}
.faecher a:nth-child(2){transform:translateX(-50%) translateY(-22px);z-index:3}
.faecher a:nth-child(3){transform:translateX(-4%) rotate(9deg);z-index:2}
.welt:hover .faecher a:nth-child(1){transform:translateX(-120%) rotate(-13deg) translateY(4px)}
.welt:hover .faecher a:nth-child(2){transform:translateX(-50%) translateY(-42px)}
.welt:hover .faecher a:nth-child(3){transform:translateX(20%) rotate(13deg) translateY(4px)}
.faecher a:hover{z-index:5}

@media (max-width:900px){
  .bruch{padding:80px 24px 70px}
  .welten{flex-direction:column;min-height:auto;overflow:visible}
  .welt{overflow:visible;min-height:auto;justify-content:flex-start}
  .welt{padding:60px 24px 56px}
  .tag{clip-path:polygon(0 7%,100% 0,100% 100%,0 100%);margin:-7% 0 0;padding:130px 24px 60px}
  .nacht{padding-right:24px;padding-bottom:90px}
  .faecher{height:64vw;max-height:360px}
}


/* ---------- Runde 4: nahtlos. Keine Linien, keine Kaesten, ein Verlauf ueber die ganze Seite ---------- */
:root{--hell:#fbeaf2;--hell-tief:#f3d9e6;--wein:#4a1630;--dunkeltext:#1b1016;--dunkelmuted:#5c4652}
body.start{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 34%,#150a10 44%,var(--wein) 51%,var(--hell-tief) 56%,var(--hell) 100%)}
body.ueber{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 60%,#150a10 82%,var(--wein) 100%)}
header{position:static;background:transparent;border-bottom:0}
section, .row, .welten, footer{border:0}
.def div{border-top:0;padding-top:0}
.facts{padding:24px 0 40px}
.bruch{background:transparent;padding:120px 28px 60px}
.bruch small{color:rgba(255,255,255,.55)}
.welten{background:transparent;overflow:visible;min-height:720px}
.welt.tag{background:transparent;clip-path:none;margin-left:0;padding-left:5vw;color:var(--dunkeltext)}
.tag p, .tag .buecher{color:var(--dunkelmuted)} .tag .buecher b{color:var(--dunkeltext)}
.tag::before{display:none}
.welt.nacht{z-index:1;margin-right:-16%;padding-right:calc(5vw + 16%);padding-bottom:150px;
  background:linear-gradient(97deg,#050507 0%,#050507 58%,rgba(5,5,7,.92) 70%,rgba(5,5,7,.45) 84%,rgba(5,5,7,0) 100%)}
.welt.nacht::before{background:radial-gradient(60% 40% at 45% 100%,rgba(120,0,40,.28),rgba(120,0,40,.08) 55%,transparent 75%)}
.welt.nacht::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,234,242,0) 0%,var(--hell) 100%)}

/* Diese drei Zeilen galten frueher fuer alle Seiten, obwohl sie fuer den
   hellen Fuss der Startseite gedacht waren. Auf dunklem Grund war die
   Ailessio-Zeile dadurch fast unsichtbar. Jetzt auf body.start begrenzt. */
 


footer{margin-top:0}
 
footer small{color:var(--dunkelmuted)}
footer nav a{color:var(--dunkelmuted)} footer nav a:hover{color:var(--dunkeltext)}
 body.ueber footer small, body.ueber footer nav a{color:var(--muted)}
@media (max-width:900px){
  .welt.nacht{margin:0;padding-right:24px;padding-bottom:120px;background:linear-gradient(180deg,#050507 0%,#050507 70%,rgba(5,5,7,0) 100%)}
  .welt.nacht::after{display:none}
  .welt.tag{margin:0;padding:40px 24px 60px}
  body.start{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 38%,#150a10 46%,var(--wein) 52%,var(--hell-tief) 58%,var(--hell) 100%)}
}

/* Runde 4b: Nachtseite als weiche Insel (Maske statt Kanten) */
.eyebrow span, .tropes span{display:inline-block;white-space:nowrap}
.welten{margin-top:-60px}
.welt.nacht{background:#050507;padding-top:150px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 150px),transparent 100%),linear-gradient(97deg,#000 0,#000 60%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.4) 85%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 150px),transparent 100%),linear-gradient(97deg,#000 0,#000 60%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.4) 85%,transparent 100%);
  mask-composite:intersect}
.welt.nacht::after{display:none}
.welt.tag{padding-top:150px}
@media (max-width:900px){
  .welten{margin-top:-30px}
  .welt.nacht{padding-top:110px;padding-bottom:130px;background:#050507;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 120px),transparent 100%);-webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 120px),transparent 100%);mask-composite:add}
  .welt.tag{padding-top:20px}
}
/* Runde 4c: laengerer, weicherer Auslauf nach rechts */
@media (min-width:901px){
  .welt.nacht{margin-right:-24%;padding-right:calc(5vw + 24%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 150px),transparent 100%),linear-gradient(97deg,#000 0,#000 52%,rgba(0,0,0,.85) 64%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.2) 88%,rgba(0,0,0,.05) 96%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 150px),transparent 100%),linear-gradient(97deg,#000 0,#000 52%,rgba(0,0,0,.85) 64%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.2) 88%,rgba(0,0,0,.05) 96%,transparent 100%)}
}
/* Runde 4d: Auslauf endet vor der Elementkante, dadurch keine Restkante */
@media (min-width:901px){
  .welt.nacht{margin-right:-30%;padding-right:calc(5vw + 30%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 150px),transparent 100%),linear-gradient(97deg,#000 0,#000 46%,rgba(0,0,0,.8) 58%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.15) 80%,rgba(0,0,0,.03) 88%,transparent 92%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 150px),transparent 100%),linear-gradient(97deg,#000 0,#000 46%,rgba(0,0,0,.8) 58%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.15) 80%,rgba(0,0,0,.03) 88%,transparent 92%,transparent 100%)}
}
.welt.tag{z-index:2}
@media (min-width:901px){.welt.tag .inner{margin-left:auto;margin-right:0}}
@media (min-width:901px){.welt.tag{padding-left:calc(5vw + 14%)}}
@media (min-width:901px){.welt.tag .faecher{width:min(135%,620px);margin-left:-12%}}
@media (min-width:901px){.welt.tag .faecher{width:min(118%,560px);margin-left:-16%}}

/* ---------- Runde 5: Header schlicht, helles Thema, MM-Seite ---------- */
header .bar{justify-content:center;padding:18px 28px}
nav{justify-content:center;gap:28px}
footer .bar{justify-content:space-between}
footer small{margin-top:0;font-size:12px}
.hell{--bg:#fbeaf2;--text:#1b1016;--muted:#5c4652;--dim:#8a6f7c;--line:rgba(27,16,22,.14);--akzent:#7a1f47;--hell:#fbeaf2}
body.hell{background:linear-gradient(180deg,#fff9fc 0%,#fbeaf2 30%,#f5dde9 100%);color:var(--text)}
.hell nav a{color:var(--dim)} .hell nav a:hover, .hell nav a.active{color:var(--text)} .hell nav a.nl{color:var(--pink)}
.hell .hero-cover{box-shadow:0 30px 70px rgba(120,0,60,.22)}
.hell .facts div{border-left-color:var(--line)}
.hell .nl-form input{border-color:rgba(27,16,22,.25)}

.hell footer{border-top:1px solid var(--line)}
.hell .next blockquote{color:var(--text)}
.reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:56px 0 0}
.reihe a{text-decoration:none;color:inherit}
.reihe img{width:100%;aspect-ratio:2/3.1;object-fit:cover;box-shadow:0 22px 50px rgba(120,0,60,.2);transition:transform .35s}
.reihe a:hover img{transform:translateY(-6px)}
.reihe .nr{font-family:var(--serif);font-size:20px;margin:18px 0 0;color:var(--akzent)}
.reihe .t{font-family:var(--serif);font-size:24px;line-height:1.1}
.reihe .p{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.intro{padding:80px 0 20px}
.intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.4vw,84px);line-height:1;letter-spacing:-.02em;margin:0 0 24px;max-width:14ch}
.buch{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start;padding:80px 0 20px}
.buch img{width:100%;box-shadow:0 22px 50px rgba(120,0,60,.22)}
.buch h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.4vw,56px);line-height:1;margin:0 0 10px;letter-spacing:-.015em}
.buch h2 span{color:var(--akzent)}
.buch .paar{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 20px}
.buch p{color:var(--muted);max-width:56ch;margin:0 0 14px}
.buch .tropes{margin:0 0 6px}
.buch .sprecher{font-size:14px;color:var(--dim);margin:16px 0 0}
.shops{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-top:24px}
.shops .link{font-size:15px}
@media (max-width:900px){
  .reihe{grid-template-columns:1fr 1fr;gap:20px}
  .buch{grid-template-columns:1fr;gap:28px;padding:56px 0 0}
  .buch img{max-width:220px}
  .intro{padding:48px 0 0}
}
html{background:#0b0b0d}
html:has(body.start){background:#fbeaf2}
html:has(body.hell){background:#f5dde9}

/* ---------- Runde 6: kein Querstreifen, Rosé blendet selbst ein ---------- */
@media (min-width:901px){
  body.start{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 34%,#150a10 44%,var(--wein) 50%,var(--wein) 58%,var(--hell-tief) 64%,var(--hell) 100%)}
  .bruch{padding-bottom:30px}
  .welten{margin-top:-40px}
  .welt.nacht{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 260px,#000 calc(100% - 150px),transparent 100%),linear-gradient(97deg,#000 0,#000 46%,rgba(0,0,0,.8) 58%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.15) 80%,rgba(0,0,0,.03) 88%,transparent 92%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 260px,#000 calc(100% - 150px),transparent 100%),linear-gradient(97deg,#000 0,#000 46%,rgba(0,0,0,.8) 58%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.15) 80%,rgba(0,0,0,.03) 88%,transparent 92%,transparent 100%)}
  .welt.tag{background:linear-gradient(180deg,var(--hell-tief) 0%,var(--hell) 45%,var(--hell) 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 240px),linear-gradient(90deg,transparent 0,#000 40%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,transparent 0,#000 240px),linear-gradient(90deg,transparent 0,#000 40%);mask-composite:intersect}
  .welt.tag{padding-top:190px}
}
.intro h1{max-width:20ch;font-size:clamp(42px,5.4vw,74px)}
.hero h1{font-size:clamp(46px,6.2vw,84px)}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 7 (03.09.2026): Handy-Kopf, Kontraste, Umbrueche.
   Steht bewusst am Ende, damit es die spaeteren Runden ueberschreibt.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Kontrast: --dim war 3,95:1 auf Dunkel und 3,76:1 auf Rose.
       Ein Wert kann nicht beides. Deshalb heller Grundwert fuer die
       dunklen Flaechen, und in den hellen Bereichen wird --dim
       ueberschrieben. Custom Properties vererben, das reicht. --- */
:root{
  --dim:#85858f;         /* 5,38:1 auf #0b0b0d */
  --dim-hell:#6a5f68;    /* 5,26:1 auf Rose, 4,60:1 auf Rose-tief */
  --pink-text:#ef6ea0;   /* kleiner pinker Text auf Dunkel, 6,94:1 */
}
body.hell, body.start .welt.tag, body.start footer{--dim:var(--dim-hell);--pink-text:var(--pink)}

.eyebrow b{color:var(--pink-text)}


.next blockquote span{color:var(--pink-text)}
          /* war 2,39:1 auf Wein, jetzt 7,58:1 */
.hell nav a{color:var(--dim-hell)}            /* Navigation auf der hellen MM-Seite */

/* --- Umbruch in Eyebrow- und Trope-Zeilen: margin-left blieb am
       Zeilenanfang stehen, die zweite Zeile rutschte ein. --- */
.eyebrow, .tropes{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:22px;row-gap:0}
.eyebrow b, .eyebrow span, .tropes b, .tropes span, .eyebrow span:first-of-type, .tropes span:first-of-type{margin-left:0}

/* --- Handy: der Kopf war 251px hoch, Titel und Button lagen unter der
       Kante. Engere Navigation, und das Cover kommt nach dem Text. --- */
@media (max-width:900px){
  .bar{padding:14px 20px;justify-content:center;text-align:center}
  nav{justify-content:center;gap:10px 18px}
  nav a{font-size:11px;letter-spacing:.1em;padding:4px 0}
  .hero-cover{order:0;justify-self:start;width:min(100%,300px)}
  .hero{gap:34px}
}

/* --- Wer Animationen abgeschaltet hat, bekommt keine. --- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}

/* --- Sichtbarer Tastatur-Fokus. Vorher nur beim Newsletter-Feld. --- */
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--pink-soft);outline-offset:3px;border-radius:2px}
.nl-form input:focus-visible{outline:2px solid var(--pink-soft);outline-offset:2px}

/* --- Newsletter-Feld direkt auf der Seite: Einwilligung als Kaestchen,
       damit die Anmeldung ohne Umweg und DSGVO-konform funktioniert. --- */
.nl-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;max-width:460px;font-size:12px;color:var(--dim);line-height:1.5;cursor:pointer}
.nl-consent input{margin:2px 0 0;width:15px;height:15px;flex:0 0 auto;accent-color:var(--pink)}
.nl-status{margin-top:10px;font-size:13px;min-height:1px;max-width:460px}
.nl-status.ok{color:var(--pink-soft)}
.nl-status.fehler{color:#ff8fa8}
body.hell .nl-status.ok{color:var(--akzent-hell)}
body.hell .nl-status.fehler{color:#a1122e}

/* Ueber mich endet im Weinton, das html darunter war noch schwarz.
   Auf hohen Bildschirmen und beim Ueberscrollen gab das einen
   schwarzen Streifen unter dem Fuss. */
html:has(body.ueber){background:var(--wein)}

/* "Brandenburg, 2026" sitzt ganz unten auf dem Weinton.
   Dort reicht --dim nicht (3,97:1), --muted schon (5,58:1). */


/* ═══════════════════════════════════════════════════════════════════════
   Runde 8 (03.09.2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Der Balken. Die weichen Raender lagen auf zwei uebereinander
       gerechneten Masken (mask-composite:intersect). Firefox rechnet das
       anders und liess die obere Kante hart stehen, quer ueber die ganze
       Seite. Jetzt nur noch EINE Maske je Flaeche, die zweite Richtung
       steckt im Hintergrund selbst. Das kann jeder Browser. --- */
.welt.nacht{
  background:#050507;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 120px,#000 calc(100% - 150px),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 120px,#000 calc(100% - 150px),rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-over;mask-composite:add}
.welt.tag{-webkit-mask-image:none;mask-image:none}

@media (max-width:900px){
  .welt.nacht{
    background:#050507;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 90px,#000 calc(100% - 120px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 90px,#000 calc(100% - 120px),rgba(0,0,0,0) 100%)}
  .welt.tag{background:transparent}
}

@media (min-width:901px){
  /* Auslauf nach rechts steckt jetzt im Hintergrund, nicht in einer Maske */
  .welt.nacht{
    background:linear-gradient(97deg,#050507 0,#050507 46%,rgba(5,5,7,.8) 58%,rgba(5,5,7,.45) 70%,rgba(5,5,7,.15) 80%,rgba(5,5,7,.03) 88%,rgba(5,5,7,0) 94%);
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 260px,#000 calc(100% - 150px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 260px,#000 calc(100% - 150px),rgba(0,0,0,0) 100%)}
  /* Oberer Auslauf der Tagseite steckt jetzt im Verlauf, Maske nur noch
     fuer die linke Kante. rgba statt transparent, damit kein Grauschleier
     entsteht. */
  .welt.tag{
    background:linear-gradient(180deg,rgba(243,217,230,0) 0,var(--hell-tief) 240px,var(--hell) 45%,var(--hell) 100%);
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 40%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 40%)}
}

/* --- Sprechernamen jetzt als eigene stille Zeile, nicht mehr als Link.
       Der Link zog sonst einen Unterstrich ueber zwei ganze Zeilen. --- */
.sprecher{font-size:14px;color:var(--dim);margin:16px 0 0;max-width:52ch}

/* --- Statt 01/02/03 die Season vom Cover --- */
.season, .reihe .nr{font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--akzent);font-weight:600;margin:0 0 10px}
.reihe .nr{margin:18px 0 6px}

/* --- Runde 8b: Der Aufmacher der MM-Seite stand als einzelne Spalte
       ganz links, rechts daneben war nichts. Jetzt Ueberschrift links,
       Einleitung rechts, unten buendig. Gleiche Aufteilung wie der
       Hero der Startseite und der Kopf von Ueber mich. --- */
.intro-kopf{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}
.intro-kopf h1{margin-bottom:0}
.intro-kopf .lead{max-width:40ch;margin-bottom:10px}
@media (max-width:900px){
  .intro-kopf{grid-template-columns:1fr;gap:22px;align-items:start}
  .intro-kopf h1{margin-bottom:0}
  .intro-kopf .lead{margin-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 9 (03.09.2026): Ein Schriftmuster statt gewachsener Werte.

   Vorher: Versalzeilen in 11 und 12px mit sieben verschiedenen
   Sperrungen (.10 bis .24em), drei verschieden grosse h1, und
   Fliesstext in 12, 13, 14, 15, 16, 17 und 18px.

   Regel: zwei Schriften, zwei Rollen.
     Instrument Serif  nur Ueberschriften, Zitate und Zahlen
     Inter             alles andere

   Sechs Serif-Stufen, vier Inter-Stufen plus eine Versalzeile.
   Nichts ausserhalb dieser Stufen. Wer eine neue Groesse braucht,
   nimmt die naechstgelegene Stufe.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Serif, von gross nach klein */
  --s1:clamp(44px,6vw,84px);      /* Seitentitel      h1 */
  --s2:clamp(38px,5.2vw,72px);    /* Statement        Bruch, Unterschrift */
  --s3:clamp(32px,4.2vw,56px);    /* Abschnittstitel  h2 */
  --s4:clamp(26px,3.2vw,40px);    /* Zitat und Zahl */
  --s5:clamp(24px,2.4vw,30px);    /* Zwischentitel */
  --s6:24px;                      /* Kartentitel */
  /* Inter */
  --t-lead:19px;                  /* Einleitung */
  --t-basis:17px;                 /* Fliesstext */
  --t-klein:15px;                 /* Nebentext, Links, Formular */
  --t-fein:13px;                  /* Fussnote, Rechtshinweis */
  --t-label:11px;                 /* Versalzeile */
  --sperrung:.18em;
}

/* Fliesstext in den Welten war als Einziges 16px */
.welt p:not(.eyebrow):not(.tropes):not(.buecher){font-size:var(--t-basis);line-height:1.65}

/* ---- Versalzeile: eine Groesse, eine Sperrung, ueberall gleich ---- */
nav a, footer nav a, .eyebrow, .tropes, .facts span, .bruch small, .welt .cta, .welt .eyebrow, .welt .tropes, .season, .reihe .nr, .reihe .p, .buch .paar, .def h3{
  font-family:var(--sans);font-size:var(--t-label);letter-spacing:var(--sperrung);
  text-transform:uppercase;line-height:1.9}
.eyebrow b, .tropes b, .welt .cta, .season, .reihe .nr, .def h3{font-weight:600}
.eyebrow, .tropes, .facts span, .reihe .p, .buch .paar{font-weight:400}
.eyebrow b, .tropes b{font-weight:600}

/* ---- Serif ---- */
.hero h1, .about h1, .intro h1{font-size:var(--s1);line-height:1;letter-spacing:-.02em}
.bruch p{font-size:var(--s2);line-height:1.04;letter-spacing:-.02em}
.welt h2, .buch h2{font-size:var(--s3);line-height:1.02;letter-spacing:-.015em}
.next blockquote, .row p.kern{font-size:var(--s4);line-height:1.2;letter-spacing:-.01em}
.facts strong{font-size:var(--s4);line-height:1;letter-spacing:-.01em}
.row h2, .row p.big{font-size:var(--s5);line-height:1.2;letter-spacing:-.01em}
.reihe .t, .welt q{font-size:var(--s6);line-height:1.25;letter-spacing:-.01em}

/* ---- Inter ---- */
p.lead{font-size:var(--t-lead);line-height:1.6}
body{font-size:var(--t-basis);line-height:1.65}
.actions .link, .shops .link, .def p, .social a, .sprecher, .buch .sprecher, .welt .buecher, .nl-form input, .btn{font-size:var(--t-klein)}
.welt .buecher{line-height:1.9}
footer small, .nl-consent, .nl-status{font-size:var(--t-fein);line-height:1.6}

/* Ausnahme von der Zeilenhoehe 1.9: die gilt fuer Versalzeilen im
   Fliesstext, damit umbrechende Zeilen Luft haben. In der Navigation
   und bei den Knopf-Links macht sie die Zeilen unnoetig hoch. */
nav a, footer nav a{line-height:1.3}
.welt .cta{line-height:1.4}
nav a, footer nav a{line-height:1.2}
@media (max-width:900px){
  .bar{padding:12px 20px}
  nav{gap:8px 14px}
  nav a{padding:3px 0}
}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 10 (03.09.2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* Der Kern-Absatz auf Ueber mich stand als einziger Fliesstext in der
   Serifenschrift und in 40px. Jetzt normaler Fliesstext wie die Absaetze
   darueber und darunter. Die farbigen Betonungen bleiben, aber im
   helleren Pink: das tiefe Himbeer kam bei 17px nur auf 3,2:1. */
.row p.kern{font-family:var(--sans);font-size:var(--t-basis);line-height:1.65;
  letter-spacing:0;color:var(--muted);max-width:58ch;margin:0 0 16px}
.row p.kern i{font-style:normal;font-weight:600;color:var(--pink-text)}

/* Die Statuszeile des Newsletter-Feldes steckt in .next .copy, und
   .next .copy p ist spezifischer als .nl-status.fehler. Die Meldung
   erschien deshalb immer in Grau statt in Rot beziehungsweise Rose.
   Mit dem p davor gewinnt die richtige Farbe. */
p.nl-status.ok{color:var(--pink-soft)}
p.nl-status.fehler{color:#ff8fa8}
body.hell p.nl-status.ok{color:var(--akzent-hell)}
body.hell p.nl-status.fehler{color:#a1122e}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 12 (03.09.2026): die drei Seiten aus der Navigation.
   Hoerbuecher, Lesereihenfolge, Triggerwarnungen.
   ═══════════════════════════════════════════════════════════════════════ */

/* Eine schlichte dunkle Seite. Startseite und Ueber mich haben ihren
   eigenen Verlauf, diese drei brauchen nur ruhigen Grund. */
body.dunkel{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 74%,#150a10 100%);
  color:var(--text);--akzent:var(--pink-text)}
html:has(body.dunkel){background:#150a10}

/* Reihenueberschrift, zum Beispiel "The Gang" ueber den Hoerbuechern */
.teil{padding:52px 0 0}
.teil>h2{font-family:var(--serif);font-weight:400;font-size:var(--s5);
  line-height:1.2;letter-spacing:-.01em;margin:0}
.hinweis{font-size:var(--t-klein);color:var(--dim);margin:22px 0 0;max-width:56ch}
.hinweis b{color:var(--text);font-weight:600}

/* Hoerbuch-Cover sind quadratisch, Buchcover nicht */
.reihe.hoer{margin:30px 0 0}
.reihe.hoer img{aspect-ratio:1}

/* Lesereihenfolge: Reihe, Kurztext, nummerierte Baende */
.folge{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:52px 0 0;align-items:start}
.folge h2{font-family:var(--serif);font-weight:400;font-size:var(--s5);
  line-height:1.2;letter-spacing:-.01em;margin:0}
.folge .baende{list-style:none;margin:6px 0 18px;padding:0;max-width:44ch}
.folge .baende li{break-inside:avoid;padding:7px 0;border-top:1px solid var(--line);
  display:flex;gap:14px;align-items:baseline}
.folge .baende li span{font-family:var(--sans);color:var(--pink-text);
  font-size:var(--t-klein);font-weight:600;min-width:1.6em;flex:0 0 auto}
.folge .fazit{font-size:var(--t-klein);color:var(--dim);margin:16px 0 0;max-width:56ch}
.folge>div>p{color:var(--muted);margin:0 0 14px;max-width:58ch}
.folge .reihe{margin:0 0 24px}

/* Triggerwarnungen: ruhige Textseite mit einer Warnkarte */
.hinweiskasten{border-left:2px solid var(--pink);padding:4px 0 4px 24px;margin:34px 0 0}
.hinweiskasten p{margin:0 0 10px}
.hinweiskasten p:last-child{margin:0}
.themen{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;
  margin:26px 0 0;padding:0;list-style:none}
.themen li{padding:9px 0;border-top:1px solid var(--line);
  font-size:var(--t-klein);color:var(--muted)}

@media (max-width:900px){
  .folge{grid-template-columns:1fr;gap:18px;padding:40px 0 0}
  .themen{grid-template-columns:1fr 1fr;gap:0 24px}
  .teil{padding:40px 0 0}
  .reihe.hoer{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .themen{grid-template-columns:1fr}
}
/* Cover ohne Einzellink, zum Beispiel die Sinister-Baende */
.reihe>div{color:inherit}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 13: das Cover-Karussell der Hoerbuecher, uebernommen von der
   Live-Seite und auf die neue Bildsprache gezogen. Flache Cover ohne
   abgerundete Ecken, Beschriftung auf der Schriftskala.
   ═══════════════════════════════════════════════════════════════════════ */
.coverflow{padding:44px 0 0}
.flow-stage{position:relative;height:clamp(240px,25vw,340px);perspective:1100px;
  margin-bottom:30px;overflow:hidden}
.flow-track{position:relative;width:100%;height:100%}
.flow-item{position:absolute;top:50%;left:50%;width:clamp(170px,19vw,262px);aspect-ratio:1;
  padding:0;border:0;background:none;cursor:pointer;
  transition:transform .55s cubic-bezier(.2,.75,.25,1),opacity .45s,filter .55s}
.flow-item img{width:100%;height:100%;object-fit:cover;display:block;
  box-shadow:0 26px 52px rgba(0,0,0,.6)}
.flow-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:40;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:rgba(11,11,13,.72);color:var(--muted);font-size:22px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0 0 3px;transition:color .2s,border-color .2s}
.flow-nav:hover{color:var(--text);border-color:var(--pink)}
.flow-nav.prev{left:0}
.flow-nav.next{right:0}
.flow-caption{text-align:center;min-height:156px}
.flow-series{display:block;font-size:var(--t-label);letter-spacing:var(--sperrung);
  text-transform:uppercase;color:var(--dim);font-weight:600;line-height:1.9;margin-bottom:8px}
.flow-title{font-family:var(--serif);font-weight:400;font-size:var(--s5);
  line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
.flow-meta{color:var(--muted);font-size:var(--t-klein);margin:0 0 22px}
.flow-status{margin-left:14px;font-size:var(--t-label);letter-spacing:var(--sperrung);
  text-transform:uppercase;color:var(--pink-text);font-weight:600}
.flow-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.flow-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.18);cursor:pointer;transition:background .25s,transform .25s}
.flow-dots button.active{background:var(--pink-text);transform:scale(1.3)}
@media (max-width:900px){
  .flow-stage{height:236px}
  .flow-nav{width:36px;height:36px;font-size:19px}
  .flow-caption{min-height:170px}
}
/* Freigestellte Cover: die Redveil-Bilder haben einen transparenten
   Hintergrund. Ein Schlagschatten am rechteckigen Bildfeld wuerde ein
   Rechteck um das freigestellte Buch zeichnen. */
.reihe.frei img{box-shadow:none}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 15: Impressum und Datenschutz. Reine Textseiten.
   Eigene Klasse statt .row ul, damit die Themen-Raster auf der
   Triggerwarnungsseite nicht versehentlich mit erfasst werden.
   ═══════════════════════════════════════════════════════════════════════ */
.punkte{list-style:none;margin:0 0 16px;padding:0;max-width:60ch}
.punkte li{padding:9px 0;border-top:1px solid var(--line);color:var(--muted)}
.punkte li strong{color:var(--text);font-weight:600}
.anschrift{color:var(--muted);margin:0 0 16px;line-height:1.8}
.anschrift strong{color:var(--text);font-weight:600}
.stand{font-size:var(--t-fein);color:var(--dim);margin:52px 0 0}

/* Lange deutsche Woerter in grossen Ueberschriften passen auf schmalen
   Displays nicht in eine Zeile und weiten die ganze Seite auf.
   "Datenschutzerklaerung" ist bei 44px allein 333px breit.
   Unter 560px darf getrennt werden, die Seiten sind auf Deutsch
   ausgezeichnet, der Browser trennt also richtig. */
@media (max-width:560px){
  h1, h2, .big, .kern{-webkit-hyphens:auto;hyphens:auto}
}

/* Hoerbuecher und Lesereihenfolge enden mit einem Abschnitt ohne
   unteren Abstand. Frueher stellte die Ailessio-Zeile diese Luft,
   die ist jetzt weg. */
.teil:last-child,.folge:last-child{padding-bottom:56px}

/* "Cole ist Goalie." hing auf der Startseite an einem style-Attribut
   im HTML und war auf der MM-Seite deshalb blass. Jetzt eine Regel
   fuer beide. */
.next .copy p strong{color:var(--text);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 18: die zwei Welten als Diptychon.

   Gemessen war: die Tagseite hing 141px tiefer als die Nachtseite,
   die Knoepfe 86px auseinander. Zwei Spalten nebeneinander, aber
   nichts lag auf einer Linie. Grund: beide Seiten haengen unten
   (justify-content:flex-end), haben aber verschieden hohe Inhalte,
   die Nachtseite hat ein Zitat, die Tagseite nicht.

   Jetzt drei feste Reihen je Seite: Faecher oben, Text in der Mitte,
   Knopf unten. Die Faecher starten auf einer Linie, die Knoepfe enden
   auf einer Linie, der Text dazwischen darf unterschiedlich lang sein.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  .welt{justify-content:stretch}
  .welt .inner{flex:1;display:grid;grid-template-rows:auto 1fr auto;align-content:stretch}
  .welt .mitte{align-self:start;padding-top:34px}

  /* Gleiches Polster oben und unten, damit die Linien wirklich treffen */
  .welt.nacht,.welt.tag{padding-top:210px;padding-bottom:130px}

  /* Der Tag-Faecher lehnte sich zur Naht, der Nacht-Faecher nicht.
     Jetzt lehnen sich beide aufeinander zu, gespiegelt. */
  .welt.nacht .faecher{width:min(118%,560px);margin-left:auto;margin-right:-16%}
  .welt .faecher{margin-bottom:0}
  /* Als Rasterelement wird der Knopf sonst auf die ganze Spaltenbreite
     gezogen und der Unterstrich laeuft quer durch die Seite. */
  .welt .cta{justify-self:start}
}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 19: weichere Uebergaenge oben und unten an den zwei Welten.

   Gemessen war: der untere Verlauf lief ueber 150px mit exakt
   +15 Helligkeit je 10 Pixel. Perfekt linear. Genau das sieht das
   Auge als Kante, obwohl es ein Verlauf ist: an Anfang und Ende der
   Rampe springt die Steigung, und darauf reagiert das Auge staerker
   als auf den Verlauf selbst.

   Zwei Aenderungen: laenger (oben 300 statt 260, unten 260 statt 150)
   und weich an- und auslaufend statt linear. Die Stuetzpunkte folgen
   3x²-2x³, also einer S-Kurve. Dadurch ist die Steigung an beiden
   Enden null und es gibt keinen Knick mehr.

   Dazu mehr Polster oben und unten, damit Cover und Knopf nicht in
   den laengeren Verlauf rutschen.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  .welt.nacht,.welt.tag{padding-top:250px;padding-bottom:270px}

  .welt.nacht{
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0,rgba(0,0,0,.06) 45px,rgba(0,0,0,.22) 90px,
      rgba(0,0,0,.43) 135px,rgba(0,0,0,.65) 180px,rgba(0,0,0,.84) 225px,
      rgba(0,0,0,.97) 270px,#000 300px,
      #000 calc(100% - 340px),rgba(0,0,0,.97) calc(100% - 306px),
      rgba(0,0,0,.84) calc(100% - 255px),rgba(0,0,0,.65) calc(100% - 204px),
      rgba(0,0,0,.43) calc(100% - 153px),rgba(0,0,0,.22) calc(100% - 102px),
      rgba(0,0,0,.06) calc(100% - 51px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0,rgba(0,0,0,.06) 45px,rgba(0,0,0,.22) 90px,
      rgba(0,0,0,.43) 135px,rgba(0,0,0,.65) 180px,rgba(0,0,0,.84) 225px,
      rgba(0,0,0,.97) 270px,#000 300px,
      #000 calc(100% - 340px),rgba(0,0,0,.97) calc(100% - 306px),
      rgba(0,0,0,.84) calc(100% - 255px),rgba(0,0,0,.65) calc(100% - 204px),
      rgba(0,0,0,.43) calc(100% - 153px),rgba(0,0,0,.22) calc(100% - 102px),
      rgba(0,0,0,.06) calc(100% - 51px),rgba(0,0,0,0) 100%)}

  /* Die Tagseite blendet oben ueber ihren Hintergrund ein, nicht ueber
     eine Maske. Dieselbe S-Kurve, damit beide Seiten gleich anlaufen. */
  .welt.tag{
    background:linear-gradient(180deg,
      rgba(243,217,230,0) 0,rgba(243,217,230,.06) 45px,rgba(243,217,230,.22) 90px,
      rgba(243,217,230,.43) 135px,rgba(243,217,230,.65) 180px,
      rgba(243,217,230,.84) 225px,rgba(243,217,230,.97) 270px,
      var(--hell-tief) 300px,var(--hell) 52%,var(--hell) 100%)}
}

/* Auf dem Handy stapeln die Welten, dort sind die Verlaeufe kuerzer.
   Dieselbe S-Kurve, nur auf 150px oben und 190px unten. */
@media (max-width:900px){
  .welt.nacht{
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0,rgba(0,0,0,.06) 23px,rgba(0,0,0,.22) 45px,
      rgba(0,0,0,.43) 68px,rgba(0,0,0,.65) 90px,rgba(0,0,0,.84) 113px,
      rgba(0,0,0,.97) 135px,#000 150px,
      #000 calc(100% - 190px),rgba(0,0,0,.97) calc(100% - 171px),
      rgba(0,0,0,.84) calc(100% - 143px),rgba(0,0,0,.65) calc(100% - 114px),
      rgba(0,0,0,.43) calc(100% - 86px),rgba(0,0,0,.22) calc(100% - 57px),
      rgba(0,0,0,.06) calc(100% - 29px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0,rgba(0,0,0,.06) 23px,rgba(0,0,0,.22) 45px,
      rgba(0,0,0,.43) 68px,rgba(0,0,0,.65) 90px,rgba(0,0,0,.84) 113px,
      rgba(0,0,0,.97) 135px,#000 150px,
      #000 calc(100% - 190px),rgba(0,0,0,.97) calc(100% - 171px),
      rgba(0,0,0,.84) calc(100% - 143px),rgba(0,0,0,.65) calc(100% - 114px),
      rgba(0,0,0,.43) calc(100% - 86px),rgba(0,0,0,.22) calc(100% - 57px),
      rgba(0,0,0,.06) calc(100% - 29px),rgba(0,0,0,0) 100%);
    padding-top:150px;padding-bottom:170px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Runde 20: der Effekt aus dem Muster, jetzt fest eingebaut.

   Die Seite, auf der die Maus NICHT liegt, tritt zurueck: weniger
   Farbe, weniger Licht, die Cover sinken ab, Text und Knopf werden
   leiser. Dafuer faellt die Breitenaenderung kleiner aus als vorher
   (1.32 statt 1.5), weil jetzt die Abdunklung die Arbeit macht.

   Nur mit Maus und nur ab 901px. Auf dem Handy passiert nichts.
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (min-width:901px){
  .welten .welt{transition:flex .85s cubic-bezier(.2,.8,.2,1),
                           filter .55s ease,opacity .55s ease}
  .welten .faecher{transition:transform .55s ease}
  .welten .mitte,.welten .cta{transition:opacity .55s ease}

  .welten:hover .welt{flex:.9}
  .welten .welt:hover{flex:1.32}

  .welten:hover .welt:not(:hover){filter:saturate(.22) brightness(.62)}

  /* Die Nachtseite startet schon dunkel. Mit demselben Wert wie die
     Tagseite verschwindet sie fast ganz, deshalb tritt sie sanfter
     zurueck. Ungleiche Zahlen, gleiche Wirkung. */
  .welten:hover .welt.nacht:not(:hover){filter:saturate(.28) brightness(.78)}

  .welten:hover .welt:not(:hover) .faecher{transform:translateY(14px) scale(.97)}
  .welten:hover .welt:not(:hover) .mitte,
  .welten:hover .welt:not(:hover) .cta{opacity:.55}
}


/* Quinn, 05.09.2026: Buchauswahl vor Newsletter, kompakter mobiler Einstieg. */
body.start{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 21%,#150a10 30%,var(--wein) 42%,var(--hell-tief) 60%,var(--hell) 72%,var(--hell) 100%)}
.start .next{--text:#24151f;--muted:#5c4652;--dim:#6a5f68;--pink-text:#a8396b;--line:rgba(70,24,46,.25);color:var(--text)}
.start .next blockquote{color:var(--text)}
.start .next .link:hover{color:#7a1f47;border-color:#7a1f47}
.start .next .nl-status.ok{color:#38613b}
.start .next .nl-status.fehler{color:#a1122e}
.dark-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:8px 0 72px}
.dark-shelf a{display:block;text-transform:none;letter-spacing:normal;border:0;font-size:20px;padding:0;text-decoration:none}
.dark-shelf img{width:100%;aspect-ratio:2/3;object-fit:contain;object-position:bottom;transition:transform .2s}
.dark-shelf a:hover img{transform:translateY(-5px)}
.dark-shelf span{display:block;margin-top:18px;color:var(--text);font-weight:600}
.dark-shelf small{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.folge[id]{scroll-margin-top:90px}
.mobile-menu{display:none}
@media(max-width:600px){
  header .bar{position:relative;display:flex;justify-content:space-between;padding:10px 22px;gap:12px}
  header .bar>nav>a:not(:first-child){display:none}
  header .bar>nav>a:first-child{font-size:12px;padding:12px 0}
  .mobile-menu{display:block;text-align:left}
  .mobile-menu summary{cursor:pointer;padding:10px 0;font-size:14px;min-height:44px}
  .mobile-menu nav{position:absolute;top:100%;left:0;right:0;padding:16px 22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;background:var(--bg);box-shadow:0 18px 24px rgba(0,0,0,.18)}
  .mobile-menu nav a{font-size:12px;letter-spacing:.05em;padding:12px 0;color:var(--text)}
  .hell .mobile-menu nav{background:#fff9fc}
  .hero{grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr);gap:20px;padding:32px 0 44px;align-items:start}
  .hero-copy{display:contents}
  .hero .eyebrow{grid-column:1/-1;grid-row:1;margin:0;gap:3px 14px}
  .hero h1{grid-column:1/-1;grid-row:2;margin:0;font-size:clamp(38px,10.7vw,56px)}
  .hero .lead{grid-column:2;grid-row:3;font-size:16px;line-height:1.55;margin:0}
  .hero .hero-cover{grid-column:1;grid-row:3;width:100%;order:0;align-self:start}
  .hero .tropes{grid-column:1/-1;grid-row:4;margin:0;gap:2px 16px}
  .hero .actions{grid-column:1/-1;grid-row:5;margin:0}
  .hero .sprecher{grid-column:1/-1;grid-row:6;margin:0;font-size:13px}
  .dark-shelf{gap:14px;margin-bottom:32px}
  .dark-shelf a{font-size:15px}
  .dark-shelf small{font-size:12px}
  .dark-shelf span{margin-top:10px}
  .folge[id]{scroll-margin-top:80px}
}

/* Ruhiger Kaufweg neben farbstarken Buchcovern. */
.series-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;color:var(--text);font-size:16px;font-weight:600;text-decoration:none;border-bottom:1px solid #797980;transition:border-color .2s}
.series-link:hover{border-bottom-color:var(--text)}



/* ═══════════════════════════════════════════════════════════════════════
   Runde 22 (05.09.2026): der lila Querbalken.
   Gemessen war das Weinrot mitten im Grundverlauf: Chroma 52 bei y=1340,
   ueber die volle Breite. Ein waagerechtes Band, das die Seite quer
   zerschneidet, obwohl die Weltenteilung senkrecht erzaehlt.
   Jetzt zwei getrennte Aufgaben: der Grundverlauf traegt nur noch
   Helligkeit (entsaettigt, S-Kurve, Chroma bleibt unter 17), die Farbe
   kommt aus zwei Nebeln, die zu ihrer Seite gehoeren: Wein links unter
   der Nachtseite, Rose rechts unter der Tagseite.
   --wein gehoert nicht mehr in den Grundverlauf.
   ═══════════════════════════════════════════════════════════════════════ */
/* Nur ab 901px. Auf dem Handy stehen die Welten untereinander: die
   Tagseite bringt dort keinen eigenen Hintergrund mit, sondern nimmt
   ihre Helligkeit aus dem Grund, und zwischen ihrem Knopf (78%) und
   dem Zitat des Fusses (80%) liegen keine 80px. Ein Umschlag passt da
   nicht hinein, ohne durch den Text zu laufen. Der Fuss bleibt auf dem
   Handy deshalb hell, samt seiner dunklen Textfarben. */
@media (min-width:901px){
  body.start{
    background:
      radial-gradient(74% 24% at 25% 40%, rgba(120,16,64,.40), rgba(120,16,64,0) 72%),
      radial-gradient(66% 22% at 79% 51%, rgba(206,132,166,.26), rgba(206,132,166,0) 74%),
      linear-gradient(180deg,var(--bg) 0%,var(--bg) 26%,#111012 30%,#201e21 35%,#373437 39%,#534e52 43%,#736b70 47%,#938a8f 52%,#b3a7ad 56%,#cfc1c8 60%,#e6d7de 64%,#f5e5ed 69%,var(--hell) 73%,var(--hell) 100%);
  }
  @media (max-width:900px){
    body.start{
      background:
        radial-gradient(90% 16% at 50% 40%, rgba(120,16,64,.34), rgba(120,16,64,0) 72%),
        linear-gradient(180deg,var(--bg) 0%,var(--bg) 30%,#111012 34%,#201e21 38%,#373437 41%,#534e52 45%,#736b70 48%,#938a8f 52%,#b3a7ad 55%,#cfc1c8 59%,#e6d7de 62%,#f5e5ed 66%,var(--hell) 70%,var(--hell) 100%);
    }
  }


  /* Runde 22b: die anderen Reihen waren tot.
     Sinister Royals und Redveil standen nur als grauer Fliesstext ganz unten
     in der Nachtseite ("Danach: ..."), zwei komplette Reihen ohne Cover und
     ohne Link. Jetzt zwei kleine Kacheln, die auf ihren Abschnitt in der
     Lesereihenfolge zeigen. Auf der Tagseite waren die vier Titel lesbar,
     aber nicht anklickbar; sie fuehren jetzt zum jeweiligen Buch.
     Twin Deal, Dark Blossom und Ruthless stehen bewusst nicht mehr hier:
     der Twin-Verse ist zurzeit nicht erhaeltlich und steht mit diesem
     Hinweis auf der Lesereihenfolge. */
  .mehr{display:flex;flex-wrap:wrap;gap:10px 26px;margin:14px 0 0}
  .mehr a{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;padding:6px 0}
  .mehr img{width:46px;flex:0 0 46px;display:block;box-shadow:0 10px 20px rgba(0,0,0,.55);
    transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .mehr a:hover img{transform:translateY(-5px)}
  .mehr b{display:block;font-size:14px;font-weight:600;line-height:1.25;
    border-bottom:1px solid transparent;transition:border-color .25s}
  .mehr a:hover b{border-bottom-color:currentColor}
  .mehr small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim);margin-top:4px}
  .welt.tag .buecher a{color:inherit;text-decoration:none;
    border-bottom:1px solid transparent;transition:border-color .25s}
  .welt.tag .buecher a:hover{border-bottom-color:currentColor}
  @media (max-width:900px){
    .mehr{gap:8px 20px}
    .mehr img{width:40px;flex:0 0 40px}
  }

  /* Zwei Kacheln in eine Zeile: die Genre-Angabe stand schon in der
     Eyebrow-Zeile darueber, die Bandzahl ist die neue Information.
     Redveil-Cover ist freigestellt (transparent), deshalb contain statt
     cover und kein Schlagschatten, sonst haengt der Schatten am Bildrand
     statt am Buch. */
  .mehr{gap:8px 30px}
  .mehr a{flex:0 0 auto}
  .mehr img{width:52px;flex:0 0 52px;height:78px;object-fit:cover;object-position:top}
  .mehr a.frei img{object-fit:contain;object-position:center;box-shadow:none}
  .mehr small{letter-spacing:.14em}
  /* Die Mitte klebt oben in ihrer 1fr-Zelle (Runde 18). Mit den neuen
     Kacheln reicht sie bis an den Knopf; ein Bodenpolster haelt Abstand,
     ohne die drei festen Reihen anzutasten. */
  @media (min-width:901px){ .welt .mitte{padding-bottom:30px} }
  /* Auf schwarzem Grund verschluckt ein dunkles Cover in Kachelgroesse seine
     eigenen Kanten: Sinister Crown war auf dem Handy kaum als Buch zu
     erkennen. Eine haarfeine helle Kante gibt der Kachel wieder einen Rand.
     Beim freigestellten Redveil-Cover entfaellt sie, dort waere sie ein
     Rahmen um transparente Flaeche. */
  .mehr img{width:58px;flex:0 0 58px;height:87px;
    box-shadow:0 10px 20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.16)}
  .mehr a.frei img{box-shadow:none}
  .tag .mehr img{box-shadow:0 10px 20px rgba(120,0,60,.20),0 0 0 1px rgba(27,16,22,.12)}
  /* Das Redveil-Cover ist freigestellt und hat weiche Ecken, ein
     rechteckiger Rahmen laege daneben. drop-shadow folgt dem Alphakanal
     und zeichnet den Lichtsaum am Buch entlang. */
  .mehr a.frei img{box-shadow:none;
    filter:drop-shadow(0 0 1.5px rgba(255,255,255,.45)) drop-shadow(0 8px 14px rgba(0,0,0,.55))}
  .tag .mehr a.frei img{filter:drop-shadow(0 0 1.5px rgba(27,16,22,.30)) drop-shadow(0 8px 14px rgba(120,0,60,.20))}

  /* "Wähle deine Welt" steht auf dem Uebergang von Nacht nach Tag, also
     auf dem unruhigsten Grund der ganzen Seite. Mit rgba(255,255,255,.55)
     kam die Zeile auf 5,2:1: formal ueber der Grenze, bei 11px Versalien
     mit .22em Sperrung aber zu wenig. Jetzt .82, gemessen 9,4:1. */
  .bruch small{color:rgba(255,255,255,.82)}


  /* ═══════════════════════════════════════════════════════════════════════
     Runde 26 (05.09.2026): unten wieder dunkel, wie oben.
     Zweiter Anlauf auf denselben Wunsch. Runde 24 hat die Naht der Welten
     nach unten verlaengert; das ergab eine zweite Naht, die gegen die
     erste versetzt lag und schief wirkte. Jetzt gibt es weiterhin nur
     eine Naht: die Seite beginnt dunkel, oeffnet sich in die zwei Welten
     und schliesst wieder ins Dunkle. Das Rose ist der helle Ausschnitt
     in der Mitte, nicht das Ende der Seite.

     Der Umschlag liegt zwischen 70 und 78 Prozent der Seitenhoehe. Er muss
     fertig sein, BEVOR die Nachtseite auslaeuft, nicht erst wenn die
     Sektion endet: sie wird ueber ihre letzten 150px durchsichtig, und
     ein noch heller Grund dahinter leuchtet dann als grauer Querbalken
     durch. Genau das war der erste Versuch mit 74 bis 82,5 Prozent.
     Die Tagseite stoert das nicht, sie bringt ihre Helligkeit selbst mit. Weg zurueck entsaettigt und mit S-Kurve, aus dem
     gleichen Grund wie in Runde 22: gesaettigte Zwischentoene ergeben
     Baender, lineare Rampen ergeben Knicke.
     ═══════════════════════════════════════════════════════════════════════ */
  body.start{
    background:
      radial-gradient(74% 24% at 25% 40%, rgba(120,16,64,.40), rgba(120,16,64,0) 72%),
      radial-gradient(66% 22% at 79% 51%, rgba(206,132,166,.26), rgba(206,132,166,0) 74%),
      linear-gradient(180deg,var(--bg) 0%,var(--bg) 26%,
        #111012 29.5%,#201e21 32.9%,#373437 36.4%,#534e52 39.8%,#736b70 43.3%,#938a8f 46.7%,#b3a7ad 50.2%,#cfc1c8 53.6%,#e6d7de 57.1%,#f5e5ed 60.5%,
        var(--hell) 64%,var(--hell) 70%,
        #f3e2ea 70.9%,#ddced5 71.8%,#bdb0b7 72.7%,#978d93 73.6%,#6f686c 74.4%,#494548 75.3%,#29272a 76.2%,#131315 77.1%,var(--bg) 78%,var(--bg) 100%);
  }
  html:has(body.start){background:var(--bg)}
}

/* Die Tagseite endet unten hart. Solange der Grund darunter hell war,
   sah man das nicht; jetzt wuerde ihre Unterkante als Kante quer ueber
   die rechte Haelfte stehen.
   ACHTUNG: ihr Einblenden nach OBEN steckt seit Runde 20 ebenfalls in
   diesem Hintergrund, nicht in einer Maske. Wer hier nur den Auslauf
   nach unten ergaenzt und mit var(--hell-tief) 0% anfaengt, loescht den
   Anlauf und bekommt eine harte Oberkante quer ueber die rechte
   Haelfte, gemessen 160 Helligkeitspunkte auf 10px. Die S-Kurve am
   Anfang gehoert dazu. Ihr Hintergrund laeuft deshalb die letzten
   16 Prozent aus, nach einer S-Kurve. Mit linearer Rampe war der
   groesste Sprung zwar nur 5 Helligkeitspunkte, aber die Rampe endete
   abrupt, und genau diesen Knick liest das Auge als Kante (Runde 19).
   Der Auslauf beginnt hinter ihrem Knopf, der bei 80,2 Prozent ihrer
   Hoehe sitzt.
   Ihre Maske bleibt unangetastet, dort steckt mask-composite aus Runde 6. */
@media (min-width:901px){
  .welt.tag{background:linear-gradient(180deg,
    rgba(243,217,230,0) 0,rgba(243,217,230,.06) 45px,rgba(243,217,230,.22) 90px,
    rgba(243,217,230,.43) 135px,rgba(243,217,230,.65) 180px,
    rgba(243,217,230,.84) 225px,rgba(243,217,230,.97) 270px,
    var(--hell-tief) 300px,var(--hell) 52%,
    var(--hell) 84%,
    rgba(251,234,242,.90) 87.2%,rgba(251,234,242,.65) 90.4%,
    rgba(251,234,242,.35) 93.6%,rgba(251,234,242,.10) 96.8%,
    rgba(251,234,242,0) 100%)}
}

@media (min-width:901px){
  /* Der Fuss steht wieder auf Dunkel, also gelten dort wieder die dunklen
     Textfarben. Astras Runde vom 05.09. hatte sie fuer den rosa Fuss
     umgestellt; das wird hier zurueckgenommen, nicht geloescht, damit die
     Herkunft sichtbar bleibt. */
  .start .next{--text:#e8e8ea;--muted:#a0a0a8;--dim:#85858f;--pink-text:#ef6ea0;
    --line:rgba(255,255,255,.1);color:var(--text)}
  .start .next blockquote{color:var(--text)}
  .start .next .link:hover{color:var(--pink-soft);border-color:var(--pink-soft)}
  .start .next p.nl-status.ok{color:var(--pink-soft)}
  .start .next p.nl-status.fehler{color:#ff8fa8}
  body.start footer{--dim:#85858f;--pink-text:#ef6ea0}
  body.start footer small{color:var(--dim)}
  body.start footer nav a{color:var(--dim)}
  body.start footer nav a:hover{color:var(--text)}
}


/* ═══════════════════════════════════════════════════════════════════════
   Runde 28 (05.09.2026): der Fuss folgt der gewaehlten Welt.
   Grundzustand bleibt dunkel. Wer mit der Maus in die Tagseite geht,
   zieht das Rose bis nach unten durch; wer in die Nachtseite geht, holt
   das Dunkel zurueck. Die Wahl bleibt stehen, auch wenn die Maus die
   Welten wieder verlaesst, sonst waere der Effekt genau dann weg, wenn
   man unten angekommen ist.

   Gebaut als eine Ebene, die nur den Unterschied traegt: oberhalb von
   60 Prozent sind beide Varianten identisch, also muss die Ebene nur
   den hellen Fuss mitbringen. Ihre Deckkraft laesst sich weich
   ueberblenden, ein Verlauf selbst nicht. Die zwei Nebel des
   Grundverlaufs sitzen bei 40 und 51 Prozent, bleiben also unverdeckt.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px) and (hover:hover){
  body.start{position:relative}
  body.start::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    left:0;right:0;top:0;bottom:0;
    background:linear-gradient(180deg,rgba(251,234,242,0) 60%,var(--hell) 70%,var(--hell) 100%);
    opacity:0;transition:opacity .7s ease;
  }
  body.start.welt-tag::before{opacity:1}
  body.start .next, body.start footer{position:relative;z-index:1}
  body.start .next blockquote,body.start .next .copy p,body.start .next .nl-consent span,
  body.start footer small,body.start footer nav a{transition:color .7s ease}

  /* Bei gewaehlter Tagseite gelten im Fuss wieder die dunklen Textfarben,
     also die Werte aus Quinns Runde vom 05.09. */
  body.start.welt-tag .next{--text:#24151f;--muted:#5c4652;--dim:#6a5f68;--pink-text:#a8396b;
    --line:rgba(70,24,46,.25);color:var(--text)}
  body.start.welt-tag .next blockquote{color:var(--text)}
  body.start.welt-tag .next .link:hover{color:#7a1f47;border-color:#7a1f47}
  body.start.welt-tag .next p.nl-status.ok{color:#38613b}
  body.start.welt-tag .next p.nl-status.fehler{color:#a1122e}
  body.start.welt-tag footer{--dim:#6a5f68;--pink-text:var(--pink)}
  body.start.welt-tag footer small,body.start.welt-tag footer nav a{color:var(--dim)}
  body.start.welt-tag footer nav a:hover{color:var(--dunkeltext)}
}

/* Das Hero-Cover traegt jetzt width- und height-Attribute im HTML, damit
   beim Laden kein Sprung entsteht. Ohne height:auto gilt das Attribut
   aber als CSS-Hoehe, und das Bild wurde 380 breit bei 1136 hoch. */
.hero-cover img{height:auto}
/* Die Printausgabe von So Much Trouble ist freigestellt: transparente
   Raender oben, unten und an den Seiten. Der rechteckige Rahmen und
   Schatten von .hero-cover laegen daneben, drop-shadow folgt dem
   Alphakanal. Gleicher Fall wie bei den Redveil-Kacheln. */
.hero-cover.frei{box-shadow:none}
.hero-cover.frei img{filter:drop-shadow(0 26px 44px rgba(0,0,0,.7))}

/* Sprecherzeilen der Hoerbuecher: seit alle Namen genannt werden, stehen
   dort bis zu vier Eigennamen. In gesperrten Versalien liest man die
   buchstabierend. Versalien bleiben den kurzen Labels vorbehalten
   (ERHAELTLICH, NEU), die Namen laufen in normaler Schreibweise.
   13px ist eine bestehende Stufe aus Runde 9, keine neue Groesse. */
.reihe.hoer .p{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.55}
/* Im Karussell stand der Status hinter dem Sprechernamen, daher der
   Einzug. Der Name ist raus, der Status steht jetzt allein. */
.flow-status{margin-left:0}