/* Gully Gustav – gemeinsames Erscheinungsbild für alle Seiten von gullygustav.de (Stand 12.11.2026).
   Statisch, ohne Fremdressourcen: Schrift liegt selbst gehostet unter /assets/fonts (Lilita One, SIL Open Font License). */
@font-face{font-family:"Gustav";src:url("/assets/fonts/lilita_one.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --tinte:#160c09; --nacht:#21130e; --flaeche:#2c1a13; --flaeche-2:#39221a; --linie:rgba(255,232,196,.14);
  --text:#f7eddc; --leise:#cbb69b; --papier:#fff2cf; --papier-text:#2a1a10;
  --gold:#ffc533; --gold-hell:#ffd86a; --orange:#ff8a1f; --wasser:#74d68a; --rand:#150b08; --ziegel:#6a332b;
  --max:1120px; --lesen:760px; --rad:18px; --rad-klein:12px;
  --schatten:0 18px 50px rgba(0,0,0,.38); --anzeige:"Gustav","Arial Black",Impact,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--nacht);color:var(--text);font:17px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--anzeige);font-weight:400;line-height:1.08;letter-spacing:.01em;margin:0;text-wrap:balance}
p{margin:0 0 1em}
.huelle{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.lesen{max-width:var(--lesen)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:10px 14px;z-index:99;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopfleiste */
.kopf{position:sticky;top:0;z-index:20;background:rgba(22,12,9,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;align-items:center;gap:20px;min-height:68px}
.marke{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:400 21px/1 var(--anzeige);letter-spacing:.02em;margin-right:auto;min-height:44px}
.marke img{width:38px;height:38px;border-radius:10px;flex:none}
.marke{min-width:44px}
.marke:hover{color:var(--gold-hell)}
.haupt{display:flex;align-items:center;gap:4px}
.haupt a{color:var(--text);text-decoration:none;font-size:15.5px;font-weight:600;padding:12px 12px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.haupt a:hover{background:rgba(255,255,255,.07);color:#fff}
.haupt a[aria-current="page"]{color:var(--gold)}
.kopf .knopf{min-height:44px;padding:9px 18px;font-size:16px}
@media (max-width:820px){.haupt a.weg{display:none}}
@media (max-width:560px){.kopf .huelle{gap:8px;padding:0 16px}.haupt a{padding:12px 8px;font-size:15px}.marke span{display:none}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:14px;border:0;background:var(--gold);color:#1a1404;font:400 19px/1.1 var(--anzeige);letter-spacing:.02em;text-decoration:none;box-shadow:0 4px 0 #b47d07,0 10px 24px rgba(255,197,51,.18);transition:transform .12s ease,box-shadow .12s ease,background .12s ease;cursor:pointer}
.knopf:hover{background:var(--gold-hell);color:#1a1404;transform:translateY(-1px);box-shadow:0 5px 0 #b47d07,0 14px 28px rgba(255,197,51,.24)}
.knopf:active{transform:translateY(3px);box-shadow:0 1px 0 #b47d07}
.knopf.zweit{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.knopf.zweit:hover{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.knopf svg{width:20px;height:20px;flex:none}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px}
.textlink{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.textlink::after{content:"→";transition:transform .15s ease}
.textlink:hover::after{transform:translateX(3px)}

/* Bühne (Startseite) */
.buehne{position:relative;overflow:hidden;background:radial-gradient(1100px 520px at 78% 8%,rgba(63,199,199,.20),transparent 62%),radial-gradient(800px 480px at 4% 96%,rgba(255,138,31,.13),transparent 60%),linear-gradient(180deg,var(--tinte),var(--nacht))}
.buehne .huelle{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:104px}
.etikett{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(116,214,138,.13);color:#c9f3d2;font-size:14.5px;font-weight:700;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(116,214,138,.38)}
.etikett::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wasser)}
.buehne h1{font-size:clamp(42px,5.3vw,72px);margin:20px 0 18px;color:#fff}
.buehne h1 em{font-style:normal;color:var(--gold);display:block}
.buehne .knopf{padding:12px 20px;font-size:18px}
.vorspann{font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:#eadcc5;max-width:33em;margin:0 0 28px}
.belege{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:0;list-style:none;color:var(--leise);font-size:15px;font-weight:600}
.belege li{display:flex;align-items:center;gap:8px}
.belege li::before{content:"";width:16px;height:16px;flex:none;background:var(--wasser);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.6 3 8.2l1.2-1.2 2.2 2.2 5.4-5.4L13 5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.6 3 8.2l1.2-1.2 2.2 2.2 5.4-5.4L13 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.geraet{position:relative;border-radius:34px;padding:11px;background:linear-gradient(145deg,#3b2a22,#0c0605);box-shadow:var(--schatten),inset 0 0 0 1.5px rgba(255,255,255,.09);transform:rotate(-1.4deg)}
.geraet video,.geraet img{width:100%;aspect-ratio:1280/572;object-fit:cover;border-radius:24px;background:#0c0605}
.geraet::after{content:"";position:absolute;left:19px;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:#1a0f0b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.welle{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:56px;color:var(--nacht)}
@media (max-width:900px){.buehne .huelle{grid-template-columns:1fr;gap:40px;padding-top:44px;padding-bottom:88px}.geraet{transform:none;border-radius:26px;padding:8px}.geraet video,.geraet img{border-radius:19px}}
@media (max-width:560px){.huelle{padding:0 16px}.knopfreihe .knopf{flex:1 1 100%}.geraet::after{display:none}}

/* Abschnitte */
.abschnitt{padding:96px 0}
.abschnitt.eng{padding:64px 0}
.abschnitt.hell{background:var(--flaeche)}
.kopfzeile{max-width:44em;margin:0 0 44px}
.kopfzeile.mitte{margin-left:auto;margin-right:auto;text-align:center}
.oberzeile{display:block;color:var(--wasser);font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.abschnitt h2{font-size:clamp(32px,4.1vw,50px);color:#fff}
.kopfzeile p{margin:16px 0 0;color:#e3d3ba;font-size:19px}
@media (max-width:700px){.abschnitt{padding:64px 0}.abschnitt.eng{padding:48px 0}.kopfzeile{margin-bottom:30px}.kopfzeile p{font-size:17.5px}}

/* Merkmale: Bild und Text im Wechsel */
.merkmal{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:56px;align-items:center}
.merkmal + .merkmal{margin-top:88px}
.merkmal.gedreht .bild{order:2}
.merkmal .bild{margin:0;border-radius:var(--rad);overflow:hidden;background:var(--tinte);box-shadow:var(--schatten),0 0 0 1px var(--linie)}
.merkmal .bild img{width:100%;aspect-ratio:16/9;object-fit:cover}
.merkmal h3{font-size:clamp(26px,2.7vw,34px);color:#fff;margin:0 0 14px}
.merkmal p{color:#e3d3ba;margin:0 0 16px}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:#eee1cb}
.haken li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.haken li::before{content:"";width:22px;height:22px;margin-top:2px;border-radius:50%;background:rgba(255,197,51,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffc533' d='M6.4 11.6 3 8.2l1.2-1.2 2.2 2.2 5.4-5.4L13 5z'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width:900px){.merkmal{grid-template-columns:1fr;gap:24px}.merkmal.gedreht .bild{order:0}.merkmal + .merkmal{margin-top:56px}}

/* Karten */
.raster{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.karte{background:var(--flaeche);border-radius:var(--rad);padding:26px;box-shadow:inset 0 0 0 1px var(--linie)}
.abschnitt.hell .karte{background:var(--flaeche-2)}
.karte h3{font-size:23px;color:#fff;margin:0 0 10px}
.karte p{color:#dccbb1;margin:0;font-size:16.5px}
.karte .zahl{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,197,51,.14);color:var(--gold);font:400 20px/1 var(--anzeige);margin:0 0 16px}
.karte.kopf-karte .farbe{width:44px;height:6px;border-radius:3px;margin:0 0 16px;background:var(--gold)}

/* Betrieb */
.betrieb{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.betrieb h2{margin:0 0 18px}
.betrieb p{color:#e3d3ba}
.kennzahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.kennzahlen li{background:var(--flaeche-2);border-radius:var(--rad);padding:22px;box-shadow:inset 0 0 0 1px var(--linie)}
.kennzahlen strong{display:block;font:400 26px/1.1 var(--anzeige);color:var(--gold);margin:0 0 6px}
.kennzahlen span{color:#dccbb1;font-size:15.5px;line-height:1.45;display:block}
@media (max-width:900px){.betrieb{grid-template-columns:1fr;gap:32px}}
@media (max-width:420px){.kennzahlen{grid-template-columns:1fr}}

/* Fragen */
.fragen{display:grid;gap:12px;max-width:820px;margin:0 auto}
.fragen details{background:var(--flaeche);border-radius:var(--rad-klein);box-shadow:inset 0 0 0 1px var(--linie)}
.fragen summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-weight:700;font-size:17.5px;color:#fff;position:relative;min-height:56px;display:flex;align-items:center}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(45deg);transition:transform .18s ease}
.fragen details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.fragen details > div{padding:0 22px 20px;color:#e3d3ba}
.fragen details > div p:last-child{margin-bottom:0}

/* Schlussband */
.band{background:linear-gradient(135deg,#ff9a2a,#ffc533);color:#1a1404;text-align:center;padding:76px 0}
.band h2{font-size:clamp(34px,4.6vw,56px);color:#1a1404;margin:0 0 12px}
.band p{font-size:19px;margin:0 auto 28px;max-width:34em;color:#3b2a05;font-weight:600}
.band .knopfreihe{justify-content:center}
.band .knopf{background:#2a1710;color:#fff;box-shadow:0 4px 0 #000,0 12px 26px rgba(0,0,0,.22)}
.band .knopf:hover{background:#3b2117;color:#fff;box-shadow:0 5px 0 #000,0 14px 30px rgba(0,0,0,.26)}
.band .knopf.zweit{background:rgba(42,23,16,.10);color:#1a1404;box-shadow:inset 0 0 0 2px rgba(42,23,16,.6)}
.band .knopf.zweit:hover{background:rgba(42,23,16,.18);color:#1a1404}

/* Fuß */
.fuss{background:var(--tinte);border-top:1px solid var(--linie);padding:56px 0 34px;color:var(--leise);font-size:15.5px}
.fuss .spalten{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:36px}
.fuss h2{font:800 13px/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fuss a{color:var(--leise);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .marke{font-size:22px;margin:0 0 12px}
.fuss .klein{margin:42px 0 0;padding:22px 0 0;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:baseline;font-size:14.5px}
@media (max-width:820px){.fuss .spalten{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.fuss .spalten{grid-template-columns:1fr}}

/* Unterseiten: Seitenkopf, Lesetext, Tabellen */
.seitenkopf{padding:64px 0 44px;background:radial-gradient(900px 380px at 82% 0,rgba(63,199,199,.16),transparent 62%),linear-gradient(180deg,var(--tinte),var(--nacht))}
.seitenkopf h1{font-size:clamp(36px,5.2vw,62px);color:#fff;margin:16px 0 14px}
.seitenkopf .vorspann{margin:0;max-width:38em}
.seitenkopf .knopfreihe{margin-top:26px}
.seitenkopf .zwei{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center}
.seitenkopf .zwei img{width:min(360px,100%);margin:0 auto}
@media (max-width:820px){.seitenkopf{padding:40px 0 30px}.seitenkopf .zwei{grid-template-columns:1fr}.seitenkopf .zwei img{width:min(260px,70%);margin:0}}
.inhalt{padding:44px 0 88px}
.inhalt > .huelle > section{margin:0 0 56px;scroll-margin-top:90px}
.inhalt h2{font-size:clamp(27px,3.1vw,36px);color:#fff;margin:0 0 18px}
.inhalt h3{font:800 18.5px/1.3 system-ui,sans-serif;color:#fff;margin:26px 0 8px;letter-spacing:0}
.inhalt p,.inhalt li{color:#e6d7bf}
.inhalt ul,.inhalt ol{padding-left:1.25em;margin:0 0 1em}
.inhalt li{margin:.3em 0}
.inhalt .klein,.klein{font-size:15px;color:var(--leise)}
.blatt{background:var(--papier);color:var(--papier-text);border-radius:var(--rad);padding:8px 26px;box-shadow:var(--schatten)}
.blatt p,.blatt li{color:var(--papier-text)}
.blatt a{color:#8a4b00}
.fakten{display:grid;grid-template-columns:220px 1fr;margin:0}
.fakten dt,.fakten dd{padding:14px 0;margin:0;border-bottom:1px solid rgba(42,26,16,.16)}
.fakten dt{font-weight:800;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#6a4a08;padding-right:18px}
.fakten dt:last-of-type,.fakten dd:last-of-type{border-bottom:0}
.fakten code{background:rgba(42,26,16,.10);padding:2px 7px;border-radius:6px;font-size:.92em}
@media (max-width:620px){.fakten{grid-template-columns:1fr}.fakten dt{border-bottom:0;padding-bottom:2px}.fakten dd{padding-top:0}.blatt{padding:6px 18px}}
.hinweis{background:rgba(255,197,51,.10);box-shadow:inset 0 0 0 1px rgba(255,197,51,.34);border-radius:var(--rad-klein);padding:16px 20px;color:#f3e6cf}
.hinweis p:last-child{margin:0}
.galerie{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.galerie figure{margin:0;background:var(--flaeche);border-radius:var(--rad-klein);overflow:hidden;box-shadow:inset 0 0 0 1px var(--linie)}
.galerie img{width:100%;aspect-ratio:16/9;object-fit:cover}
.galerie figcaption{padding:12px 16px 4px;font-size:15px;color:#dccbb1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.galerie figcaption a{font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.inhaltsleiste{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px;padding:0;list-style:none}
.inhaltsleiste a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--flaeche);color:var(--text);text-decoration:none;font-size:15px;font-weight:600;box-shadow:inset 0 0 0 1px var(--linie)}
.inhaltsleiste a:hover{background:var(--flaeche-2);color:#fff}
table{border-collapse:collapse;width:100%;margin:0 0 1em;font-size:16px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
th{color:#fff;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.tabelle{overflow-x:auto;border-radius:var(--rad-klein);box-shadow:inset 0 0 0 1px var(--linie);background:var(--flaeche)}
.tabelle table{margin:0;min-width:520px}
.wischhinweis{display:none;margin:0 0 8px;font-size:14px;font-weight:700;color:var(--leise)}
@media (max-width:640px){.wischhinweis{display:block}}
.fehlerseite{min-height:62vh;display:grid;place-items:center;text-align:center;padding:72px 0}
.fehlerseite h1{font-size:clamp(46px,8vw,96px);color:#fff;margin:0 0 12px}
.fehlerseite h1 em{font-style:normal;color:var(--gold)}
.fehlerseite .knopfreihe{justify-content:center;margin-top:26px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.kopf,.fuss,.band,.knopfreihe,.geraet{display:none!important}body{background:#fff;color:#000}.inhalt p,.inhalt li,.inhalt h2,.inhalt h3,.seitenkopf h1{color:#000}a{color:#000}}

/* Unterseiten: Bausteine aus Presse, Hilfe und Rechtlichem */
.inhalt section{margin:0 0 56px;scroll-margin-top:90px}
.inhalt [id]{scroll-margin-top:90px}
.blatt{padding:22px 26px}
.blatt > :last-child{margin-bottom:0}
.blatt > .fakten{margin:-14px 0}
.fakten > div{display:contents}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:8px 44px}
.logos{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin:0 0 22px}
.logos figure{margin:0;border-radius:var(--rad-klein);padding:24px;display:grid;gap:10px;justify-items:center;align-content:center;text-align:center;font-size:15px}
.logos img{max-height:150px;width:auto}
.logos .dunkel{background:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie);color:#dccbb1}
.logos .hell{background:var(--papier);color:var(--papier-text)}
.logos .hell a{color:#8a4b00}
.logos a{font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.inhalt video{width:100%;border-radius:var(--rad);box-shadow:var(--schatten);background:#000}
.inhalt details{background:var(--flaeche);border-radius:var(--rad-klein);box-shadow:inset 0 0 0 1px var(--linie);margin:0 0 12px}
.inhalt summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-weight:700;font-size:17.5px;color:#fff;position:relative;min-height:56px;display:flex;align-items:center}
.inhalt summary::-webkit-details-marker{display:none}
.inhalt summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(45deg);transition:transform .18s ease}
.inhalt details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.antwort{padding:0 22px 20px}
.antwort > :last-child{margin-bottom:0}
.inhalt.recht h2{margin-top:52px;padding-top:36px;border-top:1px solid var(--linie)}
.inhalt.recht .inhaltsleiste + h2{margin-top:0;padding-top:0;border-top:0}
.inhalt.recht table{font-size:15px}
.inhalt.recht th,.inhalt.recht td{color:#e6d7bf}
.inhalt.recht th{color:#fff}
.seitenkopf .vorspann.klein{font-size:15.5px;color:var(--leise)}
.inhalt .blatt,.inhalt p.blatt,.inhalt .blatt p,.inhalt .blatt li,.inhalt .blatt dd{color:var(--papier-text)}
.inhalt .blatt a{color:#8a4b00}
.inhalt p.blatt{margin:0 0 1em}
.inhalt p a,.inhalt li a,.inhalt dd a{overflow-wrap:anywhere}
.linkzeile a{display:inline-flex;align-items:center;min-height:44px}


/* ===== WERKSTATT-OPTIK (12.11.2026 abends, Kevin: "kalt, ohne Herz") – die Seite sieht aus wie der Keller im Spiel:
   Backsteinwand, warmes Lampenlicht, cremefarbene Schilder mit dunklem Rand und hartem Schatten wie die Anzeigen im Spiel. ===== */
body{background:var(--nacht)}
.buehne,.seitenkopf{background:
  radial-gradient(620px 420px at 74% 30%,rgba(255,190,96,.42),transparent 68%),
  radial-gradient(520px 360px at 8% 104%,rgba(255,138,31,.20),transparent 64%),
  linear-gradient(180deg,rgba(22,12,9,.74) 0,rgba(22,12,9,.30) 34%,rgba(33,19,14,.94) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='88'%3E%3Cg fill='none' stroke='%23120705' stroke-opacity='.62' stroke-width='4'%3E%3Cpath d='M0 2h132M0 46h132M2 0v44M68 0v44M35 46v42M101 46v42'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.035'%3E%3Cpath d='M4 4h62v6H4zM70 4h60v6H70zM37 48h62v6H37z'/%3E%3C/g%3E%3C/svg%3E") 0 0/132px 88px,
  linear-gradient(180deg,#6f372e,#56271f)}
.seitenkopf{background:
  radial-gradient(520px 300px at 84% 0,rgba(255,190,96,.34),transparent 68%),
  linear-gradient(180deg,rgba(22,12,9,.70) 0,rgba(33,19,14,.96) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='88'%3E%3Cg fill='none' stroke='%23120705' stroke-opacity='.62' stroke-width='4'%3E%3Cpath d='M0 2h132M0 46h132M2 0v44M68 0v44M35 46v42M101 46v42'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.035'%3E%3Cpath d='M4 4h62v6H4zM70 4h60v6H70zM37 48h62v6H37z'/%3E%3C/g%3E%3C/svg%3E") 0 0/132px 88px,
  linear-gradient(180deg,#6f372e,#56271f)}
.buehne h1,.seitenkopf h1{text-shadow:0 3px 0 var(--rand),0 10px 26px rgba(0,0,0,.5)}
.buehne h1 em{color:var(--gold);text-shadow:0 3px 0 #6b3d00,0 10px 26px rgba(0,0,0,.5)}
.vorspann{color:#f3e7d2;text-shadow:0 1px 0 rgba(0,0,0,.55)}
.etikett{background:var(--papier);color:var(--papier-text);box-shadow:0 3px 0 var(--rand),inset 0 0 0 2px var(--rand);font-family:var(--anzeige);font-weight:400;font-size:15.5px;letter-spacing:.03em;padding:8px 15px;transform:rotate(-1.2deg)}
.etikett::before{background:#2f9a4c}
.belege{color:#f0e2ca}
.belege li::before{background:var(--gold)}
/* Deckenlampe über dem Gerät */
.geraet{background:linear-gradient(145deg,#4a372d,#0c0605);box-shadow:0 0 0 2px var(--rand),0 26px 60px rgba(0,0,0,.55),0 0 90px rgba(255,180,80,.22),inset 0 0 0 1.5px rgba(255,236,200,.14)}
.buehne .huelle > div:last-child{position:relative}
.buehne .huelle > div:last-child::before{content:"";position:absolute;left:50%;top:-118px;width:6px;height:86px;margin-left:-3px;background:linear-gradient(90deg,#1a100c,#4b3a30,#1a100c);border-radius:3px}
.buehne .huelle > div:last-child::after{content:"";position:absolute;left:50%;top:-40px;width:74px;height:34px;margin-left:-37px;border-radius:38px 38px 8px 8px;background:linear-gradient(180deg,#3c2c24,#1a100c);box-shadow:0 0 0 2px var(--rand),0 16px 34px 6px rgba(255,205,120,.55),inset 0 -6px 0 #ffd98a}
@media (max-width:900px){.buehne .huelle > div:last-child::before,.buehne .huelle > div:last-child::after{display:none}}
/* Rohr als Trennlinie zwischen den Abschnitten */
.abschnitt.hell,.fuss{position:relative}
.abschnitt.hell::before,.abschnitt.hell::after,.fuss::before{content:"";position:absolute;left:0;right:0;height:16px;background:
  repeating-linear-gradient(90deg,transparent 0 228px,#2a211d 228px 232px,#8d7f76 232px 246px,#2a211d 246px 250px),
  linear-gradient(180deg,#3a302b 0,#a2948a 26%,#6d6058 58%,#2a211d 100%);box-shadow:0 3px 0 rgba(0,0,0,.45)}
.abschnitt.hell::before,.fuss::before{top:-8px}
.abschnitt.hell::after{bottom:-8px;z-index:1}
.abschnitt.hell{background:
  linear-gradient(180deg,rgba(33,19,14,.90),rgba(33,19,14,.90)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='88'%3E%3Cg fill='none' stroke='%23120705' stroke-opacity='.62' stroke-width='4'%3E%3Cpath d='M0 2h132M0 46h132M2 0v44M68 0v44M35 46v42M101 46v42'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.035'%3E%3Cpath d='M4 4h62v6H4zM70 4h60v6H70zM37 48h62v6H37z'/%3E%3C/g%3E%3C/svg%3E") 0 0/132px 88px,#5c2b23}
.welle{color:var(--nacht)}
/* Überzeile als Stempel wie "ROHR FREI!" */
.oberzeile{display:inline-block;color:#8fe6a2;font:400 15px/1 var(--anzeige);letter-spacing:.12em;padding:7px 12px 6px;border:2.5px solid currentColor;border-radius:8px;transform:rotate(-2deg);margin:0 0 18px;text-shadow:none;background:rgba(47,154,76,.10)}
.kopfzeile.mitte .oberzeile{transform:rotate(-2deg)}
.abschnitt h2,.merkmal h3{text-shadow:0 2px 0 var(--rand)}
/* Schilder: Karten, Kennzahlen, Fragen */
.karte,.abschnitt.hell .karte,.kennzahlen li,.fragen details,.inhalt details,.inhaltsleiste a,.tabelle{background:var(--papier);color:var(--papier-text);box-shadow:0 5px 0 var(--rand),inset 0 0 0 2.5px var(--rand);border-radius:16px}
.karte h3,.fragen summary,.inhalt summary{color:var(--papier-text)}
.karte p,.kennzahlen span,.fragen details > div,.fragen details > div p,.inhalt details p,.inhalt details li,.antwort,.antwort p,.antwort li{color:#4a3424}
.karte a,.fragen details a,.inhalt details a,.antwort a{color:#8a4b00}
.karte .zahl{background:var(--gold);color:var(--papier-text);box-shadow:0 3px 0 #9a6a05,inset 0 0 0 2px var(--rand);border-radius:50%;width:42px;height:42px}
.raster .karte:nth-child(odd){transform:rotate(-.6deg)}
.raster .karte:nth-child(even){transform:rotate(.5deg)}
.kennzahlen li:nth-child(odd){transform:rotate(-.7deg)}
.kennzahlen li:nth-child(even){transform:rotate(.6deg)}
.kennzahlen strong{color:#b25a00}
.fragen summary::after,.inhalt summary::after{border-color:#b25a00}
.inhaltsleiste a{color:var(--papier-text);box-shadow:0 3px 0 var(--rand),inset 0 0 0 2px var(--rand)}
.inhaltsleiste a:hover{background:var(--gold-hell);color:var(--papier-text)}
.tabelle th,.tabelle td,.inhalt.recht .tabelle th,.inhalt.recht .tabelle td{color:var(--papier-text);border-bottom-color:rgba(42,26,16,.18)}
.blatt{box-shadow:0 6px 0 var(--rand),inset 0 0 0 2.5px var(--rand)}
/* Spielbilder wie angepinnte Fotos */
.merkmal .bild,.galerie figure{border-radius:14px;background:var(--papier);padding:7px;box-shadow:0 6px 0 var(--rand),0 0 0 2.5px var(--rand),0 22px 44px rgba(0,0,0,.45);overflow:visible;position:relative}
.merkmal .bild img,.galerie img{border-radius:8px}
.merkmal:nth-of-type(odd) .bild{transform:rotate(-1.1deg)}
.merkmal:nth-of-type(even) .bild{transform:rotate(1deg)}
.merkmal .bild::before{content:"";position:absolute;left:50%;top:-13px;width:92px;height:26px;margin-left:-46px;background:rgba(255,214,120,.86);box-shadow:0 2px 0 rgba(0,0,0,.25);transform:rotate(-2.5deg);z-index:1}
.galerie figure{padding:7px 7px 2px}
.galerie figcaption{color:#4a3424}
.galerie figcaption a{color:#8a4b00}
@media (max-width:900px){.merkmal:nth-of-type(odd) .bild,.merkmal:nth-of-type(even) .bild,.raster .karte:nth-child(odd),.raster .karte:nth-child(even),.kennzahlen li:nth-child(odd),.kennzahlen li:nth-child(even){transform:none}}
/* Knöpfe: dunkler Rand wie im Spiel */
.knopf{box-shadow:0 4px 0 #9a6a05,0 0 0 2.5px var(--rand),0 14px 26px rgba(0,0,0,.35)}
.knopf:hover{box-shadow:0 5px 0 #9a6a05,0 0 0 2.5px var(--rand),0 16px 30px rgba(0,0,0,.4)}
.knopf:active{box-shadow:0 1px 0 #9a6a05,0 0 0 2.5px var(--rand)}
.knopf.zweit{background:var(--papier);color:var(--papier-text);box-shadow:0 4px 0 #b9a47c,0 0 0 2.5px var(--rand),0 14px 26px rgba(0,0,0,.35)}
.knopf.zweit:hover{background:#fff;color:var(--papier-text);box-shadow:0 5px 0 #b9a47c,0 0 0 2.5px var(--rand),0 16px 30px rgba(0,0,0,.4)}
.band{background:linear-gradient(180deg,#ffcf4d,#ff9d2e);box-shadow:inset 0 6px 0 rgba(255,255,255,.28),inset 0 -6px 0 rgba(120,60,0,.28)}
.band .knopf{box-shadow:0 4px 0 #000,0 0 0 2.5px var(--rand),0 12px 26px rgba(0,0,0,.25)}
.band .knopf.zweit{background:var(--papier);box-shadow:0 4px 0 #b9a47c,0 0 0 2.5px var(--rand)}
.band .knopf.zweit:hover{background:#fff}
.kopf{border-bottom:3px solid var(--rand);box-shadow:0 1px 0 rgba(255,232,196,.10)}
.hinweis{color:#f3e6cf}
.logos .dunkel{color:#dccbb1}
/* Tonknopf am Startvideo */
.tonknopf{position:absolute;right:30px;bottom:-22px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:var(--papier);color:var(--papier-text);font:400 15px/1 var(--anzeige);letter-spacing:.03em;cursor:pointer;box-shadow:0 3px 0 var(--rand),inset 0 0 0 2px var(--rand)}
.tonknopf:hover{background:#fff}
.tonknopf[aria-pressed="true"]{background:var(--gold)}
.tonknopf svg{width:18px;height:18px;flex:none}
@media (max-width:900px){.tonknopf{right:16px;bottom:-20px}}
@media print{.tonknopf{display:none!important}}
