/* ============================================================
   MARLOWE MERCER — "COLD LIGHT"
   Designsystem der Autorenwebsite.

   Bewusst das Gegenteil von Svenson-everwood.com ("Dark Grimoire"):
   heller Papiergrund, harte Tinte, redaktioneller Satz. Zwei Pseudonyme,
   die aussehen wie derselbe Verlag, sind keine zwei Pseudonyme.

   Keine externen Schriften, keine externen Skripte, keine Cookies.
   Alle Farben als Tokens; die sechs Genre-Bahnen setzen --akzent lokal.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Papier — KALT, nicht warm. Der erste Entwurf stand auf cremefarbenem
     Papier (#F4F1EA); das ist der Grundton, den heute jede zweite erzeugte
     Seite traegt, und er zieht in Richtung Literaturbeilage. Diese Buecher
     handeln von Kuechentischen um vier Uhr morgens. Der Grund ist deshalb
     leicht blaustichig — Tageslicht durch ein Fenster, nicht Kerzenlicht.
     Kein Reinweiss: das blendet bei Fliesstext. */
  --paper:#E8EBEE; --paper2:#F2F4F6; --paper3:#D9DEE3;
  --ink:#0D1013; --ink2:#39414A; --ink3:#616B76;
  --rule:#C7CED5; --rule2:#AAB4BE;

  /* Genre-Bahnen. Wert und Kontrast in check.py gegen WCAG AA geprueft. */
  --psycho:#6D2E9C;   --psycho-hell:#B589E0;
  --domestic:#9E1B14;  --domestic-hell:#E8776E;
  --crime:#0D5A61;     --crime-hell:#5FBEC6;
  --romance:#A32F62;   --romance-hell:#F090B4;
  --womens:#7A5406;    --womens-hell:#DFAE45;
  --newadult:#2549C4;  --newadult-hell:#88A3F5;

  /* Vorgabe-Akzent: die Marke selbst, nicht eine der Bahnen. */
  --akzent:#0D1013; --akzent-hell:#616B76;
  /* Der Briefkasten kehrt im hellen Thema um und bleibt im dunklen
     eine Flaeche. Als Token, nicht als Regel hinter [data-thema] —
     eine Farbe, die nur dort steht, fehlt im ungestempelten Zustand. */
  --brief-bg:#0D1013; --brief-fg:#E8EBEE; --brief-rand:#0D1013;
  --brief-feld:rgba(255,255,255,.08); --brief-feldrand:rgba(255,255,255,.3);
  --akzent-flaeche:rgba(13,16,19,.06);

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Cascadia Mono',Consolas,'SF Mono','Courier New',monospace;

  --r:4px; --rl:10px;
  --maxw:1200px; --lesemax:68ch;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:64px;
  --schatten:0 1px 2px rgba(13,16,19,.06),0 8px 24px rgba(13,16,19,.08);
  --schatten-hoch:0 2px 4px rgba(13,16,19,.07),0 18px 44px rgba(13,16,19,.16);
}

/* Dunkelmodus: Nachtausgabe derselben Zeitung, nicht ein zweites Design.
   Die Bahnfarben werden aufgehellt, weil die satten Werte auf Schwarz
   unter 4,5:1 fallen.

   DREI ZUSTAENDE, nicht zwei — und deshalb steht der Block zweimal da:
     * der Leser hat im Kopf der Seite gewaehlt  -> [data-thema]
     * der Leser hat nichts gewaehlt, sein System steht auf dunkel
       -> die Medienabfrage weiter unten. Ohne sie haengt der Dunkelmodus
          allein am Kopfskript; ist JavaScript aus, sieht ein Leser mit
          dunklem System die helle Fassung.
     * [data-theme] setzt eine einbettende Umgebung (z. B. die Vorschau).
   Jede der drei Regeln laesst sich von einer ausdruecklichen Wahl 'hell'
   ueberstimmen (:not([data-thema="hell"])) — sonst gewinnt das System
   gegen den Leser.
   check.py vergleicht beide Bloecke Zeichen fuer Zeichen; laufen sie
   auseinander, faellt das Prueftor. */
html[data-thema="dunkel"],
:root[data-theme="dark"]:not([data-thema="hell"]) {
  --paper:#0A0D11; --paper2:#12161C; --paper3:#1A1F27;
  --ink:#E6EAEE; --ink2:#AFB7C0; --ink3:#828C97;
  --rule:#232932; --rule2:#333B46;

  --psycho:#B589E0;   --psycho-hell:#6D2E9C;
  --domestic:#F08A80;  --domestic-hell:#9E1B14;
  --crime:#63C7CF;     --crime-hell:#0D5A61;
  --romance:#F495B8;   --romance-hell:#A32F62;
  --womens:#E5B850;    --womens-hell:#7A5406;
  --newadult:#93ADFA;  --newadult-hell:#2549C4;

  --akzent:#E6EAEE; --akzent-hell:#828C97;
  --brief-bg:#12161C; --brief-fg:#E6EAEE; --brief-rand:#232932;
  --brief-feld:#0A0D11; --brief-feldrand:#333B46;
  --akzent-flaeche:rgba(230,234,238,.08);
  --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);
  --schatten-hoch:0 2px 4px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
 :root:not([data-thema="hell"]):not([data-theme="light"]) {
  --paper:#0A0D11; --paper2:#12161C; --paper3:#1A1F27;
  --ink:#E6EAEE; --ink2:#AFB7C0; --ink3:#828C97;
  --rule:#232932; --rule2:#333B46;

  --psycho:#B589E0;   --psycho-hell:#6D2E9C;
  --domestic:#F08A80;  --domestic-hell:#9E1B14;
  --crime:#63C7CF;     --crime-hell:#0D5A61;
  --romance:#F495B8;   --romance-hell:#A32F62;
  --womens:#E5B850;    --womens-hell:#7A5406;
  --newadult:#93ADFA;  --newadult-hell:#2549C4;

  --akzent:#E6EAEE; --akzent-hell:#828C97;
  --brief-bg:#12161C; --brief-fg:#E6EAEE; --brief-rand:#232932;
  --brief-feld:#0A0D11; --brief-feldrand:#333B46;
  --akzent-flaeche:rgba(230,234,238,.08);
  --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);
  --schatten-hoch:0 2px 4px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.6);
 }
}

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

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  overflow-x:hidden; min-height:100vh;
  font-feature-settings:"kern" 1,"liga" 1;
}

/* Feines Papierraster — bei 3 % Deckkraft nicht als Muster lesbar,
   nimmt der Flaeche aber das Digitale. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:96px 96px; opacity:.28;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 75%);
}
.seite{position:relative;z-index:1;}

/* ---------- 2. GRUNDTYPOGRAFIE ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.015em;}
h1{font-size:clamp(2.6rem,7vw,5.6rem);}
h2{font-size:clamp(1.9rem,4vw,3.1rem);}
h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2;}
p{max-width:var(--lesemax);}
a{color:inherit;text-decoration-color:var(--rule2);text-underline-offset:.22em;}
a:hover{text-decoration-color:var(--akzent);}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);}
.eng{max-width:var(--lesemax);}
.kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);display:block;margin-bottom:1.1rem;
}
.linie{height:1px;background:var(--rule);border:0;margin:0;}
.springlink{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.7rem 1.2rem;z-index:200;
}
.springlink:focus{left:1rem;top:1rem;}

/* ---------- 3. KOPFZEILE ---------- */
.kopf{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--rule);
}
.kopf .wrap{height:100%;display:flex;align-items:center;gap:clamp(12px,3vw,32px);}
.logo{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;
}
.logo b{font-weight:600;}
.logo::after{
  content:'';display:block;height:2px;width:0;background:var(--akzent);
  transition:width .4s var(--ease);
}
.logo:hover::after{width:100%;}
.navi{display:flex;gap:clamp(10px,2vw,26px);margin-left:auto;align-items:center;}
.navi a{
  font-size:.9rem;text-decoration:none;color:var(--ink2);padding:.35rem 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.navi a:hover,.navi a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--akzent);}
.kopf-werkzeug{display:flex;gap:8px;align-items:center;margin-left:8px;}
.knopf-klein{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--rule2);color:var(--ink2);
  padding:.4rem .7rem;border-radius:var(--r);cursor:pointer;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
.knopf-klein:hover{border-color:var(--akzent);color:var(--ink);background:var(--akzent-flaeche);}
.navi-schalter{display:none;}
#fortschritt{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:var(--akzent);transition:width .1s linear;
}

@media (max-width:900px){
  .navi{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:.5rem clamp(20px,5vw,48px) 1.2rem;display:none;
  }
  .navi.offen{display:flex;}
  .navi a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--rule);}
  .navi-schalter{display:inline-block;margin-left:auto;}
}

/* ---------- 4. HERO ---------- */
.hero{padding:clamp(64px,13vh,150px) 0 clamp(48px,8vh,90px);position:relative;}
.hero h1{margin-bottom:.5rem;}
.hero .unter{
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.6rem);
  color:var(--ink2);max-width:34ch;margin-top:1.4rem;line-height:1.35;
}
.hero .kurz{margin-top:2rem;color:var(--ink2);max-width:56ch;}
.hero-aktion{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.6rem;}

/* Der Wechselbegriff im Titel. Die Bahnfarbe faerbt dabei den ganzen
   Abschnitt mit — das ist der eine bewegte Moment der Seite. */
.wechsel{
  color:var(--akzent);position:relative;display:inline-block;
  transition:color .6s var(--ease);
  min-width:1ch;
}
.wechsel::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.09em;
  background:currentColor;opacity:.28;
}
.wechsel-wort{display:inline-block;animation:einblenden .5s var(--ease);}
@keyframes einblenden{from{opacity:0;transform:translateY(.18em);}to{opacity:1;transform:none;}}

.bahnband{display:flex;gap:3px;margin-top:3.4rem;height:5px;max-width:640px;}
.bahnband span{
  flex:1;background:var(--rule2);border-radius:2px;
  transition:background .5s var(--ease),transform .5s var(--ease);transform-origin:left;
}
.bahnband span.an{background:var(--bahnfarbe);transform:scaleY(2.2);}

/* ---------- 5. KNOEPFE ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  padding:.85rem 1.6rem;border-radius:var(--r);border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.knopf:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch);}
.knopf.zweit{background:transparent;color:var(--ink);border-color:var(--rule2);}
.knopf.zweit:hover{border-color:var(--ink);background:var(--akzent-flaeche);}
.knopf.akzent{background:var(--akzent);border-color:var(--akzent);color:var(--paper);}
.knopf[aria-disabled="true"]{opacity:.45;pointer-events:none;}

/* ---------- 6. ABSCHNITTE ---------- */
.abschnitt{padding:clamp(56px,9vh,110px) 0;border-top:1px solid var(--rule);}
.abschnitt-kopf{margin-bottom:clamp(32px,5vh,60px);}
.abschnitt-kopf p{color:var(--ink2);margin-top:1rem;}

.dreier{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.dreier h3{margin-bottom:.7rem;}
.dreier p{color:var(--ink2);font-size:.98rem;}

/* ---------- 7. DIE SECHS BAHNEN ---------- */
.bahnen{border-top:1px solid var(--rule);}
.bahn{
  --akzent:var(--bahnfarbe);
  border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:clamp(66px,9vw,132px) 1fr auto;
  align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(26px,4.5vh,50px) 0;position:relative;
  text-decoration:none;
}
.bahn::before{
  content:'';position:absolute;left:calc(-1 * clamp(20px,5vw,48px));right:calc(-1 * clamp(20px,5vw,48px));
  top:0;bottom:0;background:var(--bahnfarbe);opacity:0;
  transition:opacity .35s var(--ease);z-index:-1;
}
.bahn:hover::before,.bahn:focus-visible::before{opacity:.05;}
.bahn .nr{
  font-family:var(--mono);font-size:clamp(1.6rem,3.4vw,2.6rem);
  color:var(--bahnfarbe);opacity:.5;line-height:1;
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.bahn:hover .nr{opacity:1;transform:translateX(6px);}
.bahn h3{margin-bottom:.35rem;}
.bahn .zeile{
  font-family:var(--serif);font-size:clamp(1.05rem,1.8vw,1.35rem);
  color:var(--bahnfarbe);line-height:1.25;
}
.bahn .text{color:var(--ink2);font-size:.95rem;margin-top:.7rem;max-width:60ch;}
.bahn .zaehler{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);white-space:nowrap;text-align:right;
}
.bahn .zaehler b{display:block;font-size:1.5rem;color:var(--bahnfarbe);letter-spacing:0;}
@media (max-width:720px){
  .bahn{grid-template-columns:clamp(52px,12vw,72px) 1fr;}
  .bahn .zaehler{grid-column:2;text-align:left;margin-top:.6rem;}
}

/* ---------- 8. STIMMUNGSFINDER ---------- */
.finder{background:var(--paper2);border:1px solid var(--rule);border-radius:var(--rl);
        padding:clamp(24px,4vw,44px);box-shadow:var(--schatten);}
.finder-frage{margin-bottom:1.8rem;}
.finder-frage legend{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:.8rem;
}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  font-size:.92rem;padding:.6rem 1.1rem;border-radius:100px;
  border:1px solid var(--rule2);background:transparent;color:var(--ink2);cursor:pointer;
  transition:all .2s var(--ease);
}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.finder-ergebnis{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--rule);}
.finder-ergebnis:empty{display:none;}
.finder-hinweis{color:var(--ink3);font-size:.9rem;margin-top:1rem;}

/* ---------- 9. BUCHKARTEN ---------- */
.regal{display:grid;gap:clamp(24px,3.5vw,44px);grid-template-columns:repeat(auto-fill,minmax(288px,1fr));}
.buch{
  --akzent:var(--bahnfarbe,var(--ink));
  background:var(--paper2);border:1px solid var(--rule);border-radius:var(--rl);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.buch:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch);border-color:var(--rule2);}
.buch-bild{
  position:relative;aspect-ratio:2/3;background:var(--paper3);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.buch-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.buch-bild.leer{
  background:linear-gradient(150deg,var(--bahnfarbe,var(--ink3)) 0%,var(--paper3) 78%);
}
.buch-bild.leer span{
  font-family:var(--serif);font-size:1.35rem;color:var(--paper);text-align:center;
  padding:1.4rem;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.marke{
  position:absolute;top:12px;left:12px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.34rem .6rem;border-radius:var(--r);
  background:var(--ink);color:var(--paper);
}
.marke.vor{background:var(--bahnfarbe,var(--ink));}
.marke.bald{background:var(--ink3);}
.buch-text{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1;gap:.55rem;}
.buch-text .genre{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bahnfarbe,var(--ink3));
}
.buch-text h3{font-size:1.35rem;}
.buch-text .kurz{font-size:.93rem;color:var(--ink2);flex:1;}
.buch-daten{
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;font-family:var(--mono);
  font-size:.72rem;color:var(--ink3);padding-top:.4rem;border-top:1px solid var(--rule);
}
.buch-aktion{display:flex;flex-wrap:wrap;gap:10px;margin-top:.6rem;}
.buch-aktion .knopf{padding:.6rem 1.1rem;font-size:.88rem;}

details.hinweise{margin-top:.5rem;font-size:.9rem;}
details.hinweise summary{
  cursor:pointer;color:var(--ink3);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;list-style:none;
}
details.hinweise summary::-webkit-details-marker{display:none;}
details.hinweise summary::before{content:'+ ';}
details.hinweise[open] summary::before{content:'– ';}
details.hinweise ul{margin:.7rem 0 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;}
details.hinweise li{
  font-size:.8rem;padding:.25rem .6rem;border:1px solid var(--rule2);
  border-radius:100px;color:var(--ink2);
}

/* ---------- 10. FILTER ---------- */
.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:2.4rem;}
.filter .kicker{margin:0 .5rem 0 0;}

/* ---------- 11. LESEPROBE / ZITAT ---------- */
.probe{
  background:var(--paper2);border-left:3px solid var(--bahnfarbe,var(--ink));
  padding:clamp(20px,3vw,34px);border-radius:0 var(--rl) var(--rl) 0;
  font-family:var(--serif);font-size:1.08rem;line-height:1.7;color:var(--ink2);
}
.probe p{max-width:none;}
.probe p + p{margin-top:1rem;}

/* ---------- 12. VORBEREITUNG (Katalog noch leer) ---------- */
.vorbereitung{
  border:1px dashed var(--rule2);border-radius:var(--rl);
  padding:clamp(24px,4vw,44px);background:var(--paper2);
}
.vorbereitung h3{margin-bottom:.8rem;}
.vorbereitung p{color:var(--ink2);}

/* ---------- 13. JOURNAL ---------- */
.beitraege{display:grid;gap:0;}
.beitrag-zeile{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,3vw,32px);
  align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;transition:padding-left .3s var(--ease);
}
.beitrag-zeile:hover{padding-left:12px;}
.beitrag-zeile .datum{font-family:var(--mono);font-size:.75rem;color:var(--ink3);white-space:nowrap;}
.beitrag-zeile h3{font-size:1.2rem;}
.beitrag-zeile .pfeil{color:var(--ink3);}
.artikel{max-width:var(--lesemax);}
.artikel h2{margin:2.2rem 0 .9rem;font-size:1.7rem;}
.artikel h3{margin:1.8rem 0 .7rem;}
.artikel p{margin-bottom:1.1rem;}
.artikel ul,.artikel ol{margin:0 0 1.1rem 1.3rem;}
.artikel li{margin-bottom:.4rem;}
.artikel strong{font-weight:600;}
.ki-hinweis{
  font-family:var(--mono);font-size:.74rem;color:var(--ink3);
  border:1px solid var(--rule);border-radius:var(--r);padding:.7rem .9rem;margin-top:2.5rem;
}

/* ---------- 14. NEWSLETTER ---------- */
.brief{
  background:var(--brief-bg);color:var(--brief-fg);border-radius:var(--rl);
  border:1px solid var(--brief-rand);padding:clamp(28px,5vw,56px);
}
.brief h2{margin-bottom:.9rem;}
.brief p{opacity:.82;max-width:52ch;}
.brief-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem;}
.brief-form input{
  flex:1;min-width:240px;padding:.85rem 1.1rem;font-size:1rem;font-family:var(--sans);
  border:1px solid var(--brief-feldrand);border-radius:var(--r);
  background:var(--brief-feld);color:inherit;
}
.brief-form input::placeholder{color:currentColor;opacity:.55;}
.brief-form .knopf{background:var(--brief-fg);color:var(--brief-bg);border-color:var(--brief-fg);}
.brief .recht{font-size:.82rem;opacity:.66;margin-top:1rem;}

/* ---------- 15. FUSSZEILE ---------- */
.fuss{border-top:1px solid var(--rule);padding:clamp(40px,7vh,80px) 0 3rem;background:var(--paper2);}
.fuss-raster{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.fuss h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
         color:var(--ink3);font-weight:400;margin-bottom:.9rem;}
.fuss ul{list-style:none;}
.fuss li{margin-bottom:.5rem;}
.fuss a{font-size:.92rem;color:var(--ink2);text-decoration:none;}
.fuss a:hover{color:var(--ink);text-decoration:underline;}
.fuss-unten{
  margin-top:clamp(32px,5vh,56px);padding-top:1.6rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.82rem;color:var(--ink3);
}

/* ---------- 16. PROSA (Rechtstexte) ---------- */
.prosa{max-width:var(--lesemax);}
.prosa h2{font-size:1.5rem;margin:2.2rem 0 .8rem;}
.prosa h3{font-size:1.15rem;margin:1.6rem 0 .6rem;}
.prosa p,.prosa li{color:var(--ink2);margin-bottom:.9rem;}
.prosa ul{margin-left:1.3rem;}
.prosa address{font-style:normal;font-family:var(--mono);font-size:.92rem;line-height:1.9;}

/* ---------- 17. EINBLENDEN BEIM SCROLLEN ----------
   Der Startzustand ist SICHTBAR. Verborgen wird nur unter html.js, und diese
   Klasse setzt das Kopfskript. Ohne JavaScript, bei einem Skriptfehler oder
   im Textbrowser steht damit die ganze Seite da — vorher waeren 13 von 15
   Abschnitten auf opacity:0 haengengeblieben, und zwar ohne Fehlermeldung. */
html.js .auf{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
html.js .auf.da{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  .auf{opacity:1;transform:none;}
}

@media print{
  .kopf,.fuss,#fortschritt,.hero-aktion,.finder{display:none;}
  body{background:#fff;color:#000;font-size:11pt;}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}