:root{--scape-h:clamp(60px,7.5vw,100px)}
/* ===== Retro-Plakat / Risografie-Look (Prototyp) =====
   Zwei bis drei Druckfarben (Saarblau, Grubenrot, Senf), Papierkorn, leichter Druckversatz,
   dicke Konturen, große schmale Schrift. Systemschriften; für die öffentliche Seite später
   Immer helles Design (kein Dunkelmodus, Entscheidung 15.10.).
   Bebas Neue (SIL OFL) wird selbst ausgeliefert, nichts von Google. */
@font-face{font-family:'Bebas Neue';src:url('../fonts/bebas-neue.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;
  --paper:#F1E6D2;--surface:#FBF4E6;--ink:#1E2A4A;--muted:#5B6278;--line:#1E2A4A;--grid:#1E2A4A;
  --accent:#D2452B;--accent-ink:#FBF4E6;--accent-soft:#F6D3C6;--ok:#2F6B4A;--ok-soft:#D8EAD6;--warn:#9A5B00;--warn-soft:#F7E2B5;
  --senf:#E9B44C;--saar:#7FA9D6;--huegel:#3E6B4F;--huegel2:#2C5039;
  --wall:#1E2A4A;--x:#1E2A4A;--xauto:rgba(30,42,74,.22);--hl:rgba(233,180,76,.55);--hlline:#D2452B;
  --r0:#F4B5A3;--r1:#F2D07A;--r2:#A9C8E8;--r3:#B8D7A4;--r4:#D2B9E5;--r5:#9DD6CC;--r6:#F6C59E;--r7:#E6E09A;--r8:#F1B3CE;--r9:#C3CCD8;--r10:#E89C7C;--r11:#D9C6A2;
  --f-display:'Bebas Neue','Oswald','Impact','Haettenschweiler','Arial Narrow Bold','Arial Black',sans-serif;
  --f-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --shadow:6px 6px 0 var(--accent);
}

body{overflow-x:hidden;background-color:var(--paper);
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1.1px,transparent 1.3px);background-size:9px 9px}
/* Papierkorn über allem */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.10;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{padding-top:0}
/* Kopf: blaues Plakatband mit Hügeln und Saarschleife */
header{position:relative;margin:0 calc(50% - 50vw);padding:18px max(16px,calc(50vw - 474px)) calc(var(--scape-h) + 22px);background:#1E2A4A;color:#F1E6D2;border-bottom:0;overflow:hidden;align-items:flex-start}
header .scape{position:absolute;left:0;right:0;bottom:13px;width:100%;height:var(--scape-h);pointer-events:none}
.brand{position:relative;z-index:1}
.brand svg{width:58px;height:58px;filter:drop-shadow(3px 3px 0 #D2452B)}
.brand b{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,8vw,62px);letter-spacing:.04em;text-transform:uppercase;line-height:.9;color:#F1E6D2;text-shadow:4px 4px 0 #D2452B}
.brand small{color:#E9B44C;letter-spacing:.28em;font-weight:800;margin-top:6px}
.lang{position:relative;z-index:1;border:2px solid #F1E6D2;border-radius:0}
.lang button{color:#F1E6D2;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:800}
.lang button[aria-pressed=true]{background:#E9B44C;color:#1E2A4A}

h1,h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.03em}
h1{font-size:clamp(34px,6vw,52px);line-height:.95;text-shadow:2px 2px 0 color-mix(in srgb,var(--accent) 70%,transparent)}
h2{font-size:30px}
.card{background:var(--surface);border:3px solid var(--line);border-radius:0;box-shadow:var(--shadow)}
.muted{color:var(--muted)}

/* Knöpfe wie Stempel */
.btn{border:3px solid var(--line);border-radius:0;background:transparent;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:900;transition:transform .08s,box-shadow .08s}
.btn:hover{background:var(--accent-soft);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--line)}
.btn:active{transform:none;box-shadow:none}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.ghost{border-color:var(--line);border-style:dashed}

/* Übersicht */
.staffel span{border-radius:0;border:2px dashed var(--line);background:transparent;font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:.12em}
.staffel span.got{border:3px solid var(--accent);color:var(--accent);background:transparent;transform:rotate(-2deg)}
.folgen li button{border:3px solid var(--line);border-radius:0;box-shadow:5px 5px 0 var(--line);transition:transform .1s,box-shadow .1s}
.folgen li button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent);border-color:var(--line)}
.folgen .nr{color:var(--accent);letter-spacing:.25em}
.folgen b{font-family:var(--f-display);font-weight:400;font-size:28px;text-transform:uppercase;line-height:1}
.tag{border-radius:0;letter-spacing:.12em;text-transform:uppercase;background:var(--senf);color:#1E2A4A}
.tag.done{background:var(--ok);color:var(--paper)}
.tag.new{background:var(--accent);color:var(--accent-ink);transform:rotate(-2deg)}
figure.ex .mini{box-shadow:5px 5px 0 var(--accent)}
.howto h3{color:var(--accent);letter-spacing:.2em}
.ctl svg{outline:2px solid var(--line);border-radius:0}

/* Spiel */
#gNr{background:transparent;color:var(--accent);padding:0;letter-spacing:.25em;font-size:12px}
.timer{font-family:var(--f-display);font-size:34px;font-weight:400;border:0;color:var(--accent);letter-spacing:.06em;padding:0}
.board{border:6px solid var(--wall);background:var(--wall);gap:1px;border-radius:0;box-shadow:10px 10px 0 var(--accent)}
.cell .w{background:var(--wall)}
.cell .wt,.cell .wb{height:4px}.cell .wl,.cell .wr{width:4px}
.cell svg.xb path{stroke-linecap:square;stroke-width:10}
.colh,.rowh{color:var(--ink);font-weight:900}
.legend i{border:2px solid var(--line);border-radius:0}
.story{border-left:8px solid var(--accent);padding:4px 0 4px 14px;font-size:17px;font-style:italic}
.box{border-radius:0;border-width:3px}
.box.hint{border-color:var(--line);background:var(--warn-soft);box-shadow:5px 5px 0 var(--senf)}
.box.win{border:4px double var(--accent);background:transparent;color:var(--accent);transform:rotate(-1.5deg)}
.box.win .word{font-family:var(--f-display);font-weight:400;font-size:52px;letter-spacing:.18em;color:var(--ink);text-shadow:3px 3px 0 var(--senf)}
.cell .lt{font-family:var(--f-display);font-weight:400}
.cell .lt.big{font-size:clamp(24px,7vw,42px);background:color-mix(in srgb,var(--paper) 78%,transparent)}
details.card{box-shadow:4px 4px 0 var(--line)}
footer{border-top:3px solid var(--line);color:var(--muted)}

/* ===== Bewegung ===== */
@keyframes swing{0%{transform:rotate(-14deg) scale(.6);opacity:.2}35%{transform:rotate(10deg) scale(1.08);opacity:1}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.cell.pop svg.sw{transform-origin:50% 8%;animation:swing .7s ease-out}
@keyframes puff{0%{opacity:0;transform:translate(-50%,0) scale(.4)}25%{opacity:.85}100%{opacity:0;transform:translate(-30%,-140%) scale(1.5)}}
.cell .puff{position:absolute;left:62%;top:8%;width:38%;height:38%;border-radius:50%;background:radial-gradient(circle,#fff 0 35%,rgba(255,255,255,.6) 60%,transparent 70%);pointer-events:none;animation:puff 1.1s ease-out forwards}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px) rotate(-3deg)}40%{transform:translateX(3px) rotate(3deg)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.cell.bad svg.sw{animation:shake .45s ease-in-out}
.cell.bad::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(120,120,120,.45),transparent 65%);pointer-events:none}
@keyframes flip{0%{transform:rotateX(90deg);opacity:0}100%{transform:rotateX(0);opacity:1}}
.board.reveal .lt.big{animation:flip .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,0ms)}
.board.reveal .lt.small{animation:flip .3s ease-out both;animation-delay:calc(var(--d,0ms) + 600ms)}
@keyframes stamp{0%{transform:scale(2.4) rotate(-12deg);opacity:0}60%{transform:scale(.94) rotate(-1deg);opacity:1}100%{transform:scale(1) rotate(-1.5deg)}}
.box.win.fresh{animation:stamp .55s cubic-bezier(.2,1.2,.4,1) both;animation-delay:.9s}
@keyframes roll{0%{transform:translateX(-30vw) rotate(-540deg);opacity:0}15%{opacity:1}100%{transform:translateX(0) rotate(0)}}
.lyoroll{display:block;width:84px;height:84px;margin-top:6px;animation:roll 1.4s cubic-bezier(.2,.9,.3,1) both;animation-delay:1.3s}
@media (prefers-reduced-motion:reduce){.cell.pop svg.sw,.cell .puff,.cell.bad svg.sw,.board.reveal .lt,.box.win.fresh,.lyoroll{animation:none}}

/* ===== Einstieg (Hero) ===== */
.hero{display:flex;flex-wrap:wrap;gap:28px;align-items:center;padding:8px 0 6px}
.herotxt{flex:1 1 380px;display:flex;flex-direction:column;gap:14px;min-width:0}
.eyebrow{margin:0;color:var(--accent);font-weight:900;letter-spacing:.25em;text-transform:uppercase;font-size:13px}
.herotitle{font-size:clamp(46px,8vw,86px);line-height:.9;margin:0}
.herosub{margin:0;font-size:19px;max-width:34ch}
.btn.big{font-size:16px;padding:14px 22px;min-height:54px;box-shadow:5px 5px 0 var(--accent)}
.btn.big:hover{box-shadow:7px 7px 0 var(--accent)}
a.btn{text-decoration:none;color:inherit}
.perks{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:700;font-size:14px}
.perks li::before{content:"✕";color:var(--accent);margin-right:6px;font-weight:900}
.herodemo{flex:0 1 300px;margin:0 auto}
.demo{display:grid;grid-template-columns:repeat(4,1fr);width:min(300px,78vw);aspect-ratio:1;border:6px solid var(--wall);background:var(--wall);gap:1px;box-shadow:10px 10px 0 var(--accent);transform:rotate(2deg)}
.demo .cell{position:relative;display:flex;align-items:center;justify-content:center}
.demo svg.sw{width:78%;height:78%;transform-origin:50% 8%;opacity:0;animation:demoin 8s infinite;animation-delay:calc(var(--i) * .9s)}
.demo svg.dx{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:demox 8s infinite;animation-delay:calc(var(--i) * .9s + .35s)}
.demo svg.dx path{stroke:var(--xauto);stroke-width:10;stroke-linecap:square;fill:none}
@keyframes demoin{0%{opacity:0;transform:rotate(-14deg) scale(.5)}4%{opacity:1;transform:rotate(9deg) scale(1.08)}7%{transform:rotate(-4deg) scale(1)}9%{transform:rotate(0)}80%{opacity:1}88%,100%{opacity:0}}
@keyframes demox{0%{opacity:0}4%{opacity:1}80%{opacity:1}88%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.demo svg.sw,.demo svg.dx{animation:none;opacity:1}}

/* ===== Farbvariante „Saar 1947“: Landesflagge 1947–1956 (weißes Kreuz auf Blau und Rot),
   Wappen 1948 mit lichtkobaltblau und mittelzinnoberrot; Gold aus dem heutigen Wappen ===== */
:root:is([data-pal="saar"],[data-pal="wappen"]){
  --paper:#F4EFE4;--surface:#FFFCF5;--ink:#14213D;--muted:#52607A;--line:#14213D;--grid:#14213D;
  --accent:#E2412E;--accent-ink:#FFFFFF;--accent-soft:#F8D5CC;--senf:#E8B23A;
  --wall:#14213D;--x:#14213D;--hlline:#E2412E;
  --r0:#F2A99B;--r1:#F2CF6E;--r2:#9DBBE6;--r3:#B5D3A2;--r4:#C9BEE6;--r5:#A3D6CF;--r6:#F5C7A4;--r7:#E4E3A2;--r8:#EDB6D0;--r9:#C6CEDA;--r10:#F09880;--r11:#DCCAA6;
}
:root:is([data-pal="saar"],[data-pal="wappen"]) header{background:#1F57A6}
:root:is([data-pal="saar"],[data-pal="wappen"]) .brand b{text-shadow:4px 4px 0 #E2412E}
:root:is([data-pal="saar"],[data-pal="wappen"]) .lang button[aria-pressed=true]{background:#FFFFFF;color:#1F57A6}
:root:is([data-pal="saar"],[data-pal="wappen"]) .btn.primary{background:#1F57A6;border-color:#14213D;color:#fff}

/* ===== Feldfarben aus dem heutigen Landeswappen: Blau (Nassau), Rot (Trier, Lothringen),
   Gold (Lothringen), Schwarz/Silber (Pfalz). Je Wappenfarbe drei Abstufungen, Index mod 4 = Farbfamilie ===== */
:root[data-pal="wappen"]{
  --r0:#9EB7DD;--r1:#F0A496;--r2:#F2D27A;--r3:#CFCDC5;
  --r4:#6F93C9;--r5:#DD7A6B;--r6:#D9AE4C;--r7:#9C9A93;
  --r8:#CCDAEF;--r9:#F7D0C8;--r10:#F8E6B0;--r11:#ECE8DE}

/* Bei mehr als acht Orten: die blassesten Töne bekommen zusätzlich die heraldische Schraffur
   ihrer Wappenfarbe (Blau waagerecht, Rot senkrecht, Gold gepunktet, Schwarz/Silber gekreuzt).
   So bleiben auch zwölf Orte unterscheidbar, auch bei Farbschwäche. */
:root[data-pal="wappen"] .r8{background-image:repeating-linear-gradient(0deg,rgba(43,74,126,.38) 0 2px,transparent 2px 7px)}
:root[data-pal="wappen"] .r9{background-image:repeating-linear-gradient(90deg,rgba(157,58,48,.34) 0 2px,transparent 2px 7px)}
:root[data-pal="wappen"] .r10{background-image:radial-gradient(rgba(140,100,20,.55) 1.4px,transparent 1.7px);background-size:7px 7px}
:root[data-pal="wappen"] .r11{background-image:repeating-linear-gradient(0deg,rgba(40,40,40,.28) 0 1.5px,transparent 1.5px 7px),repeating-linear-gradient(90deg,rgba(40,40,40,.28) 0 1.5px,transparent 1.5px 7px)}

/* Flaggenstreifen (weiß-rot) zwischen blauem Kopf und Landschaft */
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(#FFFFFF 0 5px,#E2412E 5px);z-index:1;pointer-events:none}
/* Fußzeile mit Impressum und Datenschutz */
footer .legal{white-space:nowrap}
footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:var(--ink)}
/* Rechtsseiten (Impressum, Datenschutz) */
.recht{max-width:760px;display:flex;flex-direction:column;gap:6px}
.recht h1{margin:4px 0 6px}
.recht h2{font-size:22px;margin:18px 0 2px}
.recht p,.recht li{line-height:1.55;margin:4px 0}
.recht address{font-style:normal;line-height:1.55}
.recht .back{margin-top:8px}
.recht a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.recht a:hover{color:var(--accent)}
/* Umschalter zwischen den Staffeln */
.sttabs{display:flex;gap:8px;flex-wrap:wrap}
.sttabs button{font:inherit;font-family:var(--f-display);font-size:20px;letter-spacing:.06em;padding:6px 14px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);cursor:pointer}
.sttabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:rotate(-1.5deg)}