/* Saga of Dilmun -- gebaut von tools/webseite.js. NICHT von Hand ändern. */
@font-face{font-family:'Lora';src:url('schrift/lora.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Poppins';src:url('schrift/poppins.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('schrift/poppins-bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --tinte:#100d09; --stein:#1a150f; --stein2:#241d15; --linie:#3a2e1f;
  --bronze:#a8762f; --gold:#e3b661; --sand:#d8c8a6; --text:#bfb29a; --hell:#f2e8d5;
  --rot:#9e3b2a; --gruen:#5d7a46;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--tinte);
  color:var(--text);
  font-family:'Poppins',system-ui,sans-serif;
  font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--hell);text-decoration:underline}
h1,h2,h3,h4{font-family:'Lora',Georgia,serif;color:var(--hell);line-height:1.22;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.5vw,3.6rem);letter-spacing:.06em;text-transform:uppercase}
h2{font-size:clamp(1.45rem,3.2vw,2.1rem)}
h3{font-size:1.15rem;color:var(--gold)}
p{margin:0 0 1.1em}
.mitte{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---- Kopf ------------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(16,13,9,.97);
  border-bottom:1px solid var(--linie);backdrop-filter:blur(6px)}
/* Auf der Startseite schwebt er über dem Tor und wird erst fest, wenn man
   daran vorbei ist. Die Kennung body.start setzt nur diese eine Seite. */
body.start .kopf{position:fixed;left:0;right:0;background:transparent;
  border-bottom-color:transparent;transition:background .3s, border-color .3s}
body.start.gescrollt .kopf{background:rgba(16,13,9,.95);border-bottom-color:var(--linie)}
.kopf .mitte{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap;max-width:1360px}
.marke{font-family:'Lora',serif;font-size:1.02rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;font-weight:700}
.marke span{color:var(--bronze)}
/* Neun Menüpunkte plus Marke plus zwei Knöpfe -- das passt auf 1440 Punkte
   nur, wenn die Punkte eng stehen. Bei .82rem und 12 Punkt Polsterung brach
   die Zeile um, und „Support" und „Shop" standen allein darunter: Das sieht
   aus wie ein Fehler, nicht wie eine zweite Reihe. */
nav.haupt{display:flex;gap:0;flex:1;flex-wrap:wrap;justify-content:center}
nav.haupt a{padding:7px 7px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);border-bottom:2px solid transparent;white-space:nowrap}
nav.haupt a:hover{color:var(--hell);text-decoration:none;border-bottom-color:var(--bronze)}
nav.haupt a.hier{color:var(--gold);border-bottom-color:var(--gold)}
.kopfknopf{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.musikKnopf{position:fixed;left:16px;bottom:16px;z-index:60;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--bronze);background:rgba(20,15,10,.82);color:var(--text);font-size:1.25rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .2s,color .2s,border-color .2s}
.musikKnopf:hover{opacity:1;color:var(--gold);border-color:var(--gold)}
.musikKnopf.an{color:var(--gold);border-color:var(--gold);opacity:.95}
.musikKnopf.an span{animation:musikWippen 2.4s ease-in-out infinite}
@keyframes musikWippen{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.musikKnopf.an span{animation:none}}
.sprachwahl{display:flex;gap:4px;align-items:center;font-size:.76rem;letter-spacing:.06em}
.sprachwahl a{color:var(--text);padding:4px 2px}
.sprachwahl a:hover{color:var(--gold)}
.sprachwahl b{color:var(--gold)}
.sprachwahl span{color:var(--bronze)}

/* ---- Knöpfe ----------------------------------------------------------- */
.knopf{display:inline-block;padding:11px 22px;font-family:'Lora',serif;font-size:.88rem;
  letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--bronze);
  color:var(--gold);background:linear-gradient(180deg,#2b2115,#1a140d);cursor:pointer}
.knopf:hover{color:#1a140d;background:linear-gradient(180deg,var(--gold),var(--bronze));
  text-decoration:none;border-color:var(--gold)}
.knopf.voll{color:#160f07;background:linear-gradient(180deg,var(--gold),var(--bronze));
  border-color:var(--gold);font-weight:700}
.knopf.voll:hover{background:linear-gradient(180deg,#f6d894,var(--gold))}
.knopf.schmal{padding:8px 15px;font-size:.78rem}

/* ---- Held ------------------------------------------------------------- */
.held{position:relative;min-height:min(74vh,660px);display:flex;align-items:flex-end;
  border-bottom:1px solid var(--linie);overflow:hidden;background:#0a0806}
.held img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
.held .schleier{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,13,9,.55) 0%,rgba(16,13,9,.12) 38%,rgba(16,13,9,.93) 100%)}
.held .inhalt{position:relative;padding:54px 0 62px;width:100%}
.held h1{margin-bottom:.22em;text-shadow:0 4px 26px rgba(0,0,0,.9)}
.held .unter{font-family:'Lora',serif;font-size:clamp(1rem,2.2vw,1.35rem);color:var(--sand);
  max-width:46ch;text-shadow:0 2px 14px rgba(0,0,0,.9);margin-bottom:1.6em}
.held .knoepfe{display:flex;gap:12px;flex-wrap:wrap}

/* ---- Abschnitte ------------------------------------------------------- */
section{padding:56px 0;border-bottom:1px solid var(--linie)}
section.dunkel{background:var(--stein)}
.kopfzeile{margin-bottom:34px;max-width:70ch}
.kopfzeile .aug{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);
  margin-bottom:.6em;display:block}

.gitter{display:grid;gap:26px}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.karte{background:var(--stein2);border:1px solid var(--linie);overflow:hidden;
  display:flex;flex-direction:column}
.karte img,.karte .fehlbild{width:100%;aspect-ratio:3/4;object-fit:cover}
.karte.quer img,.karte.quer .fehlbild{aspect-ratio:16/10}
.karte .text{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.karte h3{margin-bottom:.35em}
.karte p{font-size:.94rem;margin-bottom:.8em}
.karte .fuss{margin-top:auto;font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bronze);border-top:1px solid var(--linie);padding-top:12px}

/* Ein Bild, das noch nicht gerechnet ist, darf den Aufbau nicht einreißen --
   sonst sieht eine halbfertige Seite kaputt aus statt unfertig. */
.fehlbild{background:repeating-linear-gradient(45deg,#1c1710,#1c1710 12px,#211a12 12px,#211a12 24px);
  display:flex;align-items:center;justify-content:center;color:#6b5c44;font-size:.8rem;
  text-align:center;padding:18px;min-height:220px}

/* ---- Zahlen ----------------------------------------------------------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie)}
.zahlen div{background:var(--stein);padding:22px 16px;text-align:center}
.zahlen b{display:block;font-family:'Lora',serif;font-size:1.9rem;color:var(--gold);line-height:1}
.zahlen span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}

/* ---- Neuigkeiten ------------------------------------------------------ */
.news{border-left:2px solid var(--bronze);padding:2px 0 2px 20px;margin-bottom:28px}
.news .wann{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.news h3{margin:.3em 0 .4em;color:var(--hell)}

/* ---- Band ------------------------------------------------------------- */
.band{position:relative;min-height:190px;display:flex;align-items:center;overflow:hidden;
  border:1px solid var(--linie);margin-bottom:34px;background:#0a0806}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.band .schleier{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,13,9,.95) 22%,rgba(16,13,9,.25) 100%)}
.band .text{position:relative;padding:26px 30px;max-width:60ch}
.band h1{font-size:clamp(1.7rem,4vw,2.7rem);margin-bottom:.15em}
.band p{margin:0;color:var(--sand)}

/* ---- Formular --------------------------------------------------------- */
.form{max-width:470px;background:var(--stein2);border:1px solid var(--linie);padding:30px}
.form label{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);margin:18px 0 6px}
.form input{width:100%;padding:12px 14px;background:#100c08;border:1px solid var(--linie);
  color:var(--hell);font-family:'Poppins',sans-serif;font-size:1rem}
.form input:focus{outline:none;border-color:var(--gold)}
.form .hinweis{font-size:.82rem;color:#8d8069;margin:6px 0 0}
.form .knopf{margin-top:26px;width:100%;text-align:center}
.meldung{margin-top:20px;padding:13px 16px;border-left:3px solid var(--bronze);
  background:#161109;font-size:.92rem;display:none}
.meldung.an{display:block}
.meldung.schlecht{border-left-color:var(--rot);color:#e8b7ac}
.meldung.gut{border-left-color:var(--gruen);color:#c6dcb4}

/* ---- Fragen ----------------------------------------------------------- */
details{border-bottom:1px solid var(--linie);padding:16px 0}
details summary{cursor:pointer;font-family:'Lora',serif;font-size:1.06rem;color:var(--hell);
  list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'+ ';color:var(--bronze)}
details[open] summary::before{content:'– '}
details p{margin:.9em 0 0}

/* ---- Fuß -------------------------------------------------------------- */
footer{background:#0b0906;padding:44px 0 34px;font-size:.87rem;color:#8d8069}
footer .spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;
  margin-bottom:28px}
footer h4{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);
  margin-bottom:.9em}
footer a{display:block;color:#a99a80;padding:3px 0}
footer .strich{border-top:1px solid var(--linie);padding-top:18px;font-size:.8rem}

/* Die Figur aus dem Spiel neben dem gemalten Bild.
   Sie ist 380 Punkte breit und bleibt es: Hochgerechnet auf Spaltenbreite
   wird sie matschig und sieht aus wie ein Fehler. In ihrer eigenen Größe und
   mit harten Kanten (pixelated) sieht sie aus, wie sie gemeint ist -- und
   der Unterschied zum Gemälde ist dann eine Aussage, kein Versehen. */
.spielfigur{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.spielfigur img{width:auto;max-width:min(300px,100%);image-rendering:pixelated;
  background:radial-gradient(ellipse at 50% 92%,rgba(224,176,85,.10),transparent 62%)}
.spielfigur figcaption{font-size:.8rem;line-height:1.55;color:#8d8069;max-width:42ch}

.tafel{border:1px solid var(--linie);background:var(--stein2);padding:22px 26px;margin:0 0 26px}
.tafel h3{margin-top:0}
.tafel p:last-child{margin-bottom:0}

@media (max-width:760px){
  .kopf .mitte{min-height:0;padding-top:10px;padding-bottom:10px}
  nav.haupt{order:3;width:100%}
  nav.haupt a{padding:6px 9px;font-size:.76rem}
  /* DE | EN STEHT AUF DEM TELEFON NEBEN DER MARKE (30. September). In der
     Knopfzeile schob es „Jetzt spielen" in eine eigene Zeile, der Kopf wuchs
     auf 242 Punkte (pw_test_webseite, Grenze 200). */
  .kopf .marke{flex:1}
  section{padding:40px 0}
}

.handbuch{max-width:72ch}
.pdfzeile{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 1.4em}
.pdfzeile span{font-size:.88rem;color:var(--text)}
.patchnotes h2{color:var(--gold)}
.patchnotes h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin:1.4em 0 .5em}
.patchnotes li{margin:.45em 0}
.handbuch h2{margin:2.4em 0 .5em;padding-top:.6em;border-top:1px solid var(--linie);
  font-size:1.5rem;color:var(--hell)}
.handbuch h2:first-of-type{border-top:0;padding-top:0;margin-top:1em}
.handbuch h3{margin:1.8em 0 .4em;font-size:1.12rem;color:var(--gold)}
.handbuch h4{margin:1.4em 0 .3em;font-size:1rem;color:var(--hell)}
.handbuch p{margin:0 0 1em;line-height:1.75}
.handbuch ul,.handbuch ol{margin:0 0 1em 1.3em;line-height:1.7}
.handbuch li{margin:.25em 0}
.handbuch code{background:rgba(0,0,0,.35);border:1px solid var(--linie);
  padding:.06em .4em;border-radius:3px;font-size:.92em}
.handbuch b{color:var(--hell)}
.handbuch hr{border:0;border-top:1px solid var(--linie);margin:2.4em 0}
.handbuch blockquote{margin:1.2em 0;padding:.6em 1em;border-left:3px solid var(--gold);
  background:rgba(0,0,0,.2);color:var(--text-fern)}
.tabellenkasten{overflow-x:auto;margin:0 0 1.4em}
.handbuch table{border-collapse:collapse;width:100%;font-size:.95rem}
.handbuch th,.handbuch td{border:1px solid var(--linie);padding:.5em .7em;
  text-align:left;vertical-align:top}
.handbuch th{background:rgba(0,0,0,.3);color:var(--gold);font-weight:600;white-space:nowrap}
/* DAS INHALTSVERZEICHNIS steht oben und klebt nicht: Ein Heft, das man
   durchliest, braucht keinen mitlaufenden Balken -- eines, in dem man etwas
   sucht, braucht einen Anfang, von dem aus alles in einem Sprung erreichbar
   ist. */
.kapitelliste{margin:0 0 2.4em;padding:1em 1.2em;background:var(--tafel);
  border:1px solid var(--linie)}
.kapitelliste b{display:block;margin-bottom:.6em;color:var(--gold);
  letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
.kapitelwege{display:flex;flex-wrap:wrap;gap:.35em 1.2em}
.kapitelwege a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent}
.kapitelwege a:hover{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:640px){.handbuch th{white-space:normal}}

/* ---- Das Tor ---------------------------------------------------------- */
.tor{position:relative;height:100svh;min-height:600px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end}
.torlage,.torbild{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,183.34svh);aspect-ratio:2112/1152}
.torbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  pointer-events:none}
.torlage{z-index:5}
/* Die Scheibe: zwei Lagen, gegenläufig, sehr langsam. Eine einzelne sich
   drehende Scheibe sieht aus wie ein Plattenteller — das Auge findet einen
   Punkt und verfolgt ihn. Zwei Lagen in verschiedenem Tempo haben keinen
   solchen Punkt mehr, daraus wird eine Strömung. */
.wirbel{position:absolute;left:50.189%;top:52.083%;width:26.705%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);pointer-events:none;
  animation:wirbelAtem 11s ease-in-out infinite}
.wirbel i{position:absolute;inset:0;background:url('tor/wirbel.webp') center/contain no-repeat;
  will-change:transform}
.wirbel i:nth-child(1){animation:wirbelA 54s linear infinite}
.wirbel i:nth-child(2){animation:wirbelB 82s linear infinite;opacity:.16}
@keyframes wirbelA{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes wirbelB{from{transform:rotate(360deg) scale(1.07)}to{transform:rotate(0) scale(1.07)}}
@keyframes wirbelAtem{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}
/* Die Anmeldung sitzt IN den Gravuren — dafür sind sie gemalt. Die
   Prozentwerte sind Zeile für Zeile die des Spiels (public/style.css:
   .loginFeld, .loginOben, .loginUnten, #loginAktionen); dort sind sie am
   Bild gemessen, hier wären sie geraten.
   Von hier geht es OHNE zweite Anmeldung in die Welt: /api/login gibt das
   gewöhnliche Sitzungstoken, und das reist im Fragment mit (siehe konto.js). */
.torfeld{position:absolute;left:40.6%;width:18.9%;height:3.9%}
.torfeld.oben{top:36.98%}
.torfeld.unten{top:55.86%}
.tormarke{position:absolute;bottom:100%;left:0;right:0;margin-bottom:7px;text-align:center;
  font-size:clamp(9px,.82vw,13px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#f0dfae;white-space:nowrap;padding:2px 0;
  text-shadow:0 2px 6px rgba(0,0,0,.95), 0 0 12px rgba(120,180,255,.5);
  background:radial-gradient(ellipse at 50% 55%, rgba(6,4,10,.72), rgba(6,4,10,0) 72%)}
.torfeld input{width:100%;height:100%;display:block;background:transparent;border:none;
  color:#f6eee0;font-family:inherit;font-size:clamp(11px,.95vw,15px);padding:0 12px;
  letter-spacing:.06em;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.torfeld input:focus{outline:none;box-shadow:inset 0 0 14px rgba(150,200,255,.35)}
.tortun{position:absolute;left:50%;top:64%;transform:translateX(-50%);
  display:flex;gap:12px;white-space:nowrap}
.tortun .knopf{padding:11px 26px;font-size:clamp(11.5px,1.02vw,14px);letter-spacing:.16em}
.tortun .knopf:not(.voll){background:rgba(10,7,4,.72);border-color:#c9a45f}
.tortun .knopf:not(.voll):hover{background:rgba(24,17,8,.88);text-decoration:none}
.tormeldung{position:absolute;left:50%;top:71.5%;transform:translateX(-50%);margin:0;
  font-size:.86rem;color:#ffb2a0;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.95)}
.tormeldung.gut{color:#b6e8a8}
.torschleier{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg, rgba(16,13,9,.62) 0%, rgba(16,13,9,0) 20%,
    rgba(16,13,9,0) 62%, rgba(16,13,9,.78) 88%, var(--tinte) 100%),
    radial-gradient(ellipse at 50% 46%, rgba(16,13,9,0) 34%, rgba(16,13,9,.42) 100%)}
.torlogo{position:absolute;top:70px;left:28px;width:min(300px,34vw);z-index:6;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
/* DAS LOGO UND DIE ZEILE UNTEN LINKS (1. Oktober). Oliver, mit Bild: *„auf
   anderen bildschirmen skaliert die startseite komisch, nimm bitte das große
   logo oben raus, der text unten links muss kleiner sein, auf einem 15 zoll
   macbook steht er dann genau über den knöpfen"*. Das Logo bleibt nur auf dem
   Telefon (dort ist das Tor nicht zu sehen). Die Zeile wird kleiner UND
   bekommt eine Spalte, die vor den Knöpfen endet: Die Knöpfe stehen mittig
   (rund 50vw − 185px links), die Spalte endet bei 50vw − 196px -- so kann
   sie sie bei keiner Fensterhöhe mehr berühren. pw_test_webseite misst das
   auf sieben Fenstergrößen. */
@media (min-width:901px){.torlogo{display:none}
  /* „Server online" rückt neben den Musikknopf (♪ unten links) -- vorher
     standen beide übereinander, zu sehen auf Olivers Bild. */
  .tor .lampe{margin-left:50px}}
.torworte{position:relative;z-index:6;padding:0 24px 26px;max-width:min(520px,calc(50vw - 220px))}
.torworte h1{font-size:clamp(1.15rem,1.9vw,1.9rem);margin:0 0 .3em;
  text-shadow:0 4px 30px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.9)}
.torworte p{font-family:'Lora',serif;font-size:clamp(.92rem,1.1vw,1.1rem);
  color:var(--sand);margin:0 0 14px;text-shadow:0 2px 16px rgba(0,0,0,.95)}
.torworte p b{color:var(--gold);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lampe{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;color:var(--sand);
  letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.lampe b{width:8px;height:8px;border-radius:50%;background:var(--gruen);
  box-shadow:0 0 10px var(--gruen);animation:pochen 2.6s ease-in-out infinite}
@keyframes pochen{0%,100%{opacity:1}50%{opacity:.45}}
.runter{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;
  color:var(--bronze);font-size:1.4rem;pointer-events:none;
  animation:sinken 2.4s ease-in-out infinite}
@keyframes sinken{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,7px);opacity:1}}
/* Auf dem Telefon ein anderes Bild. Das Tor ist 11:6 breit, ein Telefon 9:19
   hoch — gedeckt bleibt davon der Wirbel, eingepasst stehen die Gravuren leer
   darin. Also bekommt das Telefon die Schlucht von Edin, und die Knöpfe
   stehen darunter. Das machen die großen Browserspiele genauso. */
.torhandy{display:none}
@media (max-width:900px){
  .tor{height:auto;min-height:0;display:block}
  .torbild,.torlage,.runter{display:none}
  .torhandy{display:block;width:100%;height:46svh;min-height:260px;object-fit:cover;
    object-position:50% 42%}
  .torschleier{background:linear-gradient(180deg, rgba(16,13,9,.55) 0%, rgba(16,13,9,0) 34%,
    rgba(16,13,9,.35) 72%, var(--tinte) 100%)}
  .torlogo{top:78px;left:50%;transform:translateX(-50%);width:min(200px,54vw)}
  .torworte{padding:24px 20px 26px;max-width:none;text-align:center;background:var(--tinte)}
  .torworte h1{font-size:clamp(1.35rem,6.2vw,1.9rem)}
  .torknoepfe{display:flex;gap:10px;flex-direction:column;margin-bottom:16px}
}
.torknoepfe{display:none}
@media (max-width:900px){.torknoepfe{display:flex}}
/* Die Startseite ist eine Auslage, keine Lesestrecke: ihre Überschriften
   stehen mittig, die der Unterseiten bleiben links. */
body.start .kopfzeile{max-width:74ch;margin-left:auto;margin-right:auto;text-align:center}
body.start .mitteknopf{text-align:center}/* ---- Karten mit Zeichen ------------------------------------------------ */
.karten{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.karten .kachel{background:var(--stein2);border:1px solid var(--linie);border-radius:12px;
  padding:26px 24px;transition:transform .2s, border-color .2s}
.karten .kachel:hover{transform:translateY(-3px);border-color:var(--bronze)}
.karten .zeichen{font-size:1.75rem;line-height:1;margin-bottom:14px}
.karten h3{font-size:1.14rem;margin-bottom:.45em}
.karten p{margin:0;font-size:.95rem}
.mitteknopf{text-align:center;margin-top:38px}
.fusszeile{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  flex-wrap:wrap;padding-bottom:14px}
.fusszeile>span{font-size:.9rem}
.fusswege{display:flex;gap:16px;flex-wrap:wrap;font-size:.84rem}
.fusswege a{color:var(--text)}
.fusswege a:hover{color:var(--gold)}
.grossknopf{font-size:.98rem;padding:16px 42px;letter-spacing:.17em}

/* ---- Die Geschichte in drei Zügen -------------------------------------- */
.zuege{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.zug{display:flex;flex-direction:column;border:1px solid #8a6526;border-radius:3px;
  overflow:hidden;background:#0c0a07;transition:transform .25s, box-shadow .25s;
  box-shadow:inset 0 0 0 3px #16110a, inset 0 0 0 5px #b8873a, 0 10px 30px rgba(0,0,0,.5)}
.zug:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 3px #16110a,
  inset 0 0 0 5px #b8873a, 0 18px 44px rgba(0,0,0,.6)}
.zug .bild{position:relative;aspect-ratio:16/10;overflow:hidden}
.zug .bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.45) contrast(1.16) brightness(1.04) hue-rotate(-6deg)}
/* Der Aufsatz, der aus gemalter Kunst ein Spielhallen-Plakat macht: ein
   feiner Zeilenraster, ein warmer Schein aus der Mitte, ein Hauch Farbstich.
   Oliver, 27. September: *„nutze Bilder aus dem 80er Jahre Stil."* */
.zug .bild::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(ellipse at 50% 42%, rgba(255,214,140,.18) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(200deg, rgba(255,170,90,.14), rgba(90,40,140,.14));
  mix-blend-mode:screen}
.zug .schild{padding:14px 16px;background:#2a2013;border-top:1px solid var(--linie);flex:1}
.zug .schild b{display:block;font-family:'Lora',serif;font-size:.95rem;color:#f5d489;
  letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 12px rgba(245,212,137,.4)}
.zug .schild i{font-style:normal;font-size:.85rem;color:var(--text);line-height:1.6}
.spruch{max-width:760px;margin:40px auto 0;padding:0 0 0 22px;
  border-left:2px solid var(--bronze);font-family:'Lora',serif;
  font-size:clamp(1.05rem,2vw,1.3rem);color:var(--hell);font-style:italic;line-height:1.55}
.spruch cite{display:block;margin-top:12px;font-style:normal;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}

/* ---- Hinweisschild und Mitmachen --------------------------------------- */
.hinweisschild{background:var(--stein);border:1px solid var(--bronze);border-radius:12px;
  padding:26px 28px;max-width:760px;margin:0 auto;text-align:center}
.hinweisschild h3{color:var(--gold);margin-bottom:.45em}
.hinweisschild p{color:var(--text);margin:0;font-size:.96rem}
.mitkarten{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:900px;margin:0 auto}
.mitkarte{background:var(--stein2);border:1px solid var(--linie);border-radius:12px;
  padding:32px 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.mitkarte .zeichen{font-size:1.9rem;line-height:1;margin-bottom:14px}
.mitkarte h3{font-size:1.2rem;margin-bottom:.5em}
.mitkarte p{font-size:.95rem;margin:0 0 22px}
.mitkarte .reihe{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.knopf.blau{background:#5865f2;border-color:#5865f2;color:#fff;font-weight:700}
.knopf.blau:hover{background:#6c78f5;border-color:#6c78f5;color:#fff;text-decoration:none}
@media (prefers-reduced-motion:reduce){
  .wirbel,.wirbel i:nth-child(1),.wirbel i:nth-child(2),.lampe b,.runter{animation:none}
  .wirbel i:nth-child(2){display:none}
}
/* ---- Roadmap ---------------------------------------------------------- */
.rm-einleitung{margin-left:auto;margin-right:auto;text-align:center}
.rm-pfad{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:6px 0 22px}
.rm-pfad::before{content:"";position:absolute;left:12.5%;right:12.5%;top:50%;height:2px;
  background:linear-gradient(90deg,var(--gruen),var(--gold) 38%,var(--bronze) 66%,#4b5466)}
.rm-pfad span{justify-self:center;position:relative;width:18px;height:18px;transform:rotate(45deg);
  border:2px solid var(--gold);background:var(--tinte)}
.rm-pfad span:nth-child(1){background:var(--gruen);border-color:#9fc47f}
.rm-pfad span:nth-child(2){background:var(--gold);box-shadow:0 0 14px rgba(227,182,97,.8)}
.rm-pfad span:nth-child(4){border-color:#6f7a90}
.rm-gitter{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.rm-phase{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--stein2),var(--stein));
  border:1px solid var(--linie);box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(227,182,97,.06)}
.rm-phase::before{content:"";position:absolute;inset:5px;border:1px solid rgba(168,118,47,.28);pointer-events:none;z-index:2}
.rm-bild{position:relative;height:150px;overflow:hidden;border-bottom:2px solid var(--bronze)}
.rm-bild img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.9) brightness(.8)}
.rm-geplant .rm-bild img{object-position:center 18%}
.rm-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,13,9,0) 40%,rgba(16,13,9,.85))}
.rm-marke{position:absolute;z-index:3;top:14px;right:14px;padding:3px 11px;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--tinte);background:var(--gold);border-radius:2px}
.rm-kopf{position:relative;z-index:3;margin-top:-34px;padding:0 20px 8px;text-align:center}
.rm-nr{display:inline-block;padding:2px 12px;font-family:'Lora',serif;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);background:var(--tinte);border:1px solid var(--bronze)}
.rm-kopf h3{margin:12px 0 2px;font-size:1.32rem;color:var(--hell);letter-spacing:.03em}
.rm-wann{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.rm-liste{list-style:none;margin:8px 0 0;padding:6px 20px 22px}
.rm-liste li{position:relative;padding:11px 0 11px 22px;border-top:1px solid rgba(58,46,31,.8)}
.rm-liste li:first-child{border-top:0}
.rm-liste li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;transform:rotate(45deg);
  background:var(--gold);box-shadow:0 0 6px rgba(227,182,97,.6)}
.rm-liste strong{display:block;font-family:'Lora',serif;color:var(--hell);font-size:1rem;line-height:1.3}
.rm-liste span{display:block;font-size:.88rem;line-height:1.5;color:var(--text);margin-top:2px}
.rm-live .rm-marke{background:#7fae5c}
.rm-live .rm-liste li::before{background:#8fbf6a;box-shadow:0 0 6px rgba(143,191,106,.55)}
.rm-arbeit{border-color:var(--bronze);box-shadow:0 0 0 1px rgba(227,182,97,.35),0 12px 36px rgba(0,0,0,.5),0 0 40px rgba(227,182,97,.12)}
.rm-arbeit .rm-marke{animation:rm-puls 2.4s ease-in-out infinite}
@keyframes rm-puls{0%,100%{box-shadow:0 0 0 0 rgba(227,182,97,.6)}50%{box-shadow:0 0 0 7px rgba(227,182,97,0)}}
.rm-geplant .rm-marke{background:var(--bronze);color:var(--hell)}
.rm-ausblick .rm-marke{background:#4b5466;color:var(--hell)}
.rm-ausblick .rm-bild img{filter:saturate(.6) brightness(.7)}
.rm-ausblick .rm-liste li::before{background:#8a93a8;box-shadow:none}
.rm-fuss{margin-top:34px;text-align:center}
.rm-fuss .knopf{margin:6px}
@media (max-width:1000px){.rm-gitter{grid-template-columns:repeat(2,1fr)}.rm-pfad{display:none}}
@media (max-width:620px){.rm-gitter{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rm-arbeit .rm-marke{animation:none}}

/* ---- Unterstützen ----------------------------------------------------- */
.us-einleitung{margin-left:auto;margin-right:auto;text-align:center}
.us-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.us-stufe,.us-einmal{position:relative;display:flex;flex-direction:column;padding:26px 24px 24px;text-align:center;
  background:linear-gradient(180deg,var(--stein2),var(--stein));border:1px solid var(--linie);
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(227,182,97,.06)}
.us-stufe::before,.us-einmal::before{content:"";position:absolute;inset:5px;border:1px solid rgba(168,118,47,.28);pointer-events:none}
.us-nr{align-self:center;padding:2px 12px;font-family:'Lora',serif;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);background:var(--tinte);border:1px solid var(--bronze)}
.us-stufe h3,.us-einmal h3{margin:14px 0 4px;font-size:1.45rem;color:var(--hell);letter-spacing:.03em}
.us-preis{color:var(--sand);font-size:.9rem;margin-bottom:10px}
.us-preis b{font-family:'Lora',serif;font-size:1.7rem;color:var(--gold);margin-right:4px}
.us-stufe ul{list-style:none;margin:6px 0 20px;padding:0;text-align:left;flex:1}
.us-stufe li{position:relative;padding:9px 0 9px 22px;border-top:1px solid rgba(58,46,31,.8);font-size:.93rem}
.us-stufe li:first-child{border-top:0}
.us-stufe li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;transform:rotate(45deg);
  background:var(--gold);box-shadow:0 0 6px rgba(227,182,97,.6)}
.us-gatekeeper{border-color:var(--bronze);box-shadow:0 0 0 1px rgba(227,182,97,.35),0 12px 36px rgba(0,0,0,.5),0 0 40px rgba(227,182,97,.12)}
.us-founder .us-nr{background:var(--gold);color:var(--tinte)}
.us-nie{max-width:62ch;margin:26px auto 0;text-align:center;color:var(--sand)}
.us-einmalgitter{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto}
.us-einmal p{flex:1;margin:4px 0 18px}
.us-danke{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.us-gruppe{padding:20px 22px;border:1px solid var(--linie);background:rgba(26,21,15,.6)}
.us-gruppe h3{margin:0 0 10px;text-align:center}
.us-namen{list-style:none;margin:0;padding:0;columns:2;column-gap:20px}
.us-namen li{padding:4px 0;color:var(--hell);font-family:'Lora',serif;break-inside:avoid}
.us-leer{margin:0;text-align:center;font-style:italic;color:var(--text)}
@media (max-width:900px){.us-gitter{grid-template-columns:1fr}.us-einmalgitter,.us-danke{grid-template-columns:1fr}}