/* Layout: Spielwelt in festem Nachtlook. Reiter oben; Spielleitung = Heldenraster + Seitenspalte; Fragenpool = Formular + Liste; Arena = Quizbühne + Gruppe; Held = Charakterblatt; Tauschmarkt = Angebote */
:root{
  color-scheme:dark;
  --night:#0f1024; --stone:#1b1c38; --stone-2:#242649; --edge:#3a3d6c; --text:#ece8f7; --muted:#a3a2ca;
  --ember:#ff8a3d; --gold:#f4c542; --good:#54d18a; --bad:#ff5d6c; --focus:#9fb4ff;
  --k-red:#e2384f; --k-blue:#2f7fe0; --k-yellow:#e0a500; --k-green:#26a65b; --k-purple:#8a4ad0; --k-teal:#1f8a8a;
  --g-eule:#a98ae6; --g-fuchs:#f0874f; --g-moewe:#6aaaf0; --g-hirsch:#62c28a;
  --f-display:"Press Start 2P","Courier New",monospace;
  --f-body:"VT323","Courier New",monospace;
  --f-label:"Press Start 2P","Courier New",monospace;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{background:var(--night);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(163,162,202,.07) 1px, transparent 0);background-size:14px 14px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:16px 48px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0;line-height:1.15}
.label{font-family:var(--f-label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.note{color:var(--muted);font-size:14px;margin:0}
.px{image-rendering:pixelated}

header.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:4px 12px;border-bottom:3px solid var(--edge)}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:30px;color:var(--gold);text-shadow:3px 3px 0 #000}
.brand img{width:36px;height:36px}
nav.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
nav.tabs button{background:transparent;border:2px solid transparent;padding:6px 12px;font-family:var(--f-display);font-size:17px;color:var(--muted)}
nav.tabs button[aria-selected="true"]{color:var(--text);border-color:var(--gold);background:var(--stone);box-shadow:3px 3px 0 #000}
.status{display:flex;gap:10px;align-items:center;flex-wrap:wrap;width:100%}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-label);font-size:11px;padding:3px 9px;border:2px solid currentColor}
.pill.on{color:var(--good)} .pill.off{color:var(--bad)} .pill.fire{color:var(--ember)}
.pill i{width:8px;height:8px;background:currentColor}

section.view{padding-top:20px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--stone);border:2px solid var(--edge);box-shadow:4px 4px 0 #000;padding:16px;min-width:0}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{border:2px solid var(--edge);background:var(--stone-2);padding:7px 12px;font-weight:700;box-shadow:2px 2px 0 #000;display:inline-flex;align-items:center;gap:8px}
.btn:hover:not(:disabled){border-color:var(--gold);transform:translate(-1px,-1px);box-shadow:3px 3px 0 #000}
.btn:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.btn.hot{background:var(--gold);color:#1a1300;border-color:#000}
.btn.fire{background:var(--ember);color:#1a0800;border-color:#000}
.btn.small{padding:4px 8px;font-size:14px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn img{width:24px;height:24px}
.cost{font-family:var(--f-label);font-size:11px}
.gold{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
input[type=number],input[type=text],select,textarea{background:var(--night);border:2px solid var(--edge);padding:6px 8px;min-width:0}
textarea{width:100%;resize:vertical}

/* Spielleitung */
.gifts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.gifts .btn{justify-content:flex-start;text-align:left;padding:8px 10px}
.gifts small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.goldgift{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:2px dashed var(--gold);padding:10px}
.goldgift input{width:90px}
.heroes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.hcard{display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 10px;align-items:center;text-align:left;padding:9px;border:2px solid var(--edge);background:var(--stone-2);position:relative;width:100%}
.hcard img{width:48px;height:48px;grid-row:span 2;border:2px solid var(--gc);background:var(--night)}
.hcard b{font-family:var(--f-display);font-size:18px;font-weight:500}
.hcard .meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--muted)}
.hcard[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset,3px 3px 0 #000}
.hcard.absent{opacity:.4}
.badge{position:absolute;top:-8px;right:-8px;background:var(--ember);color:#1a0800;font-family:var(--f-label);font-size:11px;padding:2px 6px;border:2px solid #000}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;font-size:14px}
.feed li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;border-bottom:1px solid var(--edge);padding-bottom:6px}
.feed time{color:var(--muted);font-variant-numeric:tabular-nums}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px}
.switch{width:52px;height:28px;border:2px solid var(--edge);background:var(--night);position:relative;padding:0;flex-shrink:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--muted);transition:left .15s}
.switch[aria-checked="true"]{background:#1d4a33}
.switch[aria-checked="true"]::after{left:26px;background:var(--good)}
.tiers{display:flex;flex-wrap:wrap;gap:4px}
.tiers span{font-family:var(--f-label);font-size:10px;padding:2px 6px;border:2px solid var(--rc);color:var(--rc)}
.modlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.modlist li{display:flex;justify-content:space-between;gap:8px;align-items:center;border-bottom:1px solid var(--edge);padding-bottom:6px}

/* Fragenpool */
.qform{display:grid;gap:10px}
.qans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){.qans{grid-template-columns:minmax(0,1fr)}}
.qans label{display:grid;grid-template-columns:auto 28px minmax(0,1fr);gap:8px;align-items:center;border:2px solid var(--edge);padding:6px;background:var(--stone-2)}
.qans label:has(input[type=radio]:checked){border-color:var(--good)}
.qans input[type=text]{width:100%}
.shape{width:28px;height:28px;display:grid;place-items:center;color:#fff;font-size:15px;border:2px solid #000}
.s0{background:var(--k-red)} .s1{background:var(--k-blue)} .s2{background:var(--k-yellow)} .s3{background:var(--k-green)}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.qlist li{border:2px solid var(--edge);background:var(--stone-2);padding:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
.qlist li>.btn{align-self:start}
.qlist .ok{color:var(--good);font-size:14px}

/* Arena */
.arena{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px}
@media (max-width:900px){.arena{grid-template-columns:minmax(0,1fr)}}
.stage{position:relative;display:flex;gap:14px;align-items:center}
.stage canvas{width:110px;height:110px;flex-shrink:0;border:2px solid #000;background:var(--night)}
.stage.hit canvas{animation:hit .35s}
@keyframes hit{0%{filter:brightness(3)}40%{transform:translateX(-6px)}70%{transform:translateX(6px)}100%{filter:none;transform:none}}
.stage.rage canvas{box-shadow:0 0 0 3px var(--ember),0 0 24px var(--ember)}
.float{position:absolute;left:30px;top:0;font-family:var(--f-display);font-size:34px;color:var(--gold);text-shadow:3px 3px 0 #000;animation:floatup 1.2s forwards;pointer-events:none}
@keyframes floatup{from{transform:translateY(20px);opacity:1}to{transform:translateY(-50px);opacity:0}}
.bossname{font-size:30px;color:var(--ember);text-shadow:3px 3px 0 #000}
.hpline{display:grid;grid-template-columns:64px minmax(0,1fr) 110px;gap:10px;align-items:center}
.hp{height:20px;border:2px solid #000;background:var(--night);position:relative;overflow:hidden}
.hp>i{position:absolute;inset:0 auto 0 0;transition:width .45s}
.hp.boss>i{background:var(--bad)} .hp.party>i{background:var(--good)}
.qbox{border:3px solid var(--gold);background:var(--night);padding:16px;display:flex;flex-direction:column;gap:14px}
.qtext{font-family:var(--f-display);font-size:28px;line-height:1.25}
.qmeta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}
.timer{font-family:var(--f-display);font-size:44px;color:var(--gold);line-height:1;text-shadow:3px 3px 0 #000}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.answers{grid-template-columns:minmax(0,1fr)}}
.ans{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:3px solid #000;color:#fff;font-weight:700;font-size:19px;text-align:left;min-height:64px}
.ans .shape{width:40px;height:40px;font-size:20px;border:0;background:rgba(0,0,0,.2)}
.ans.dim{opacity:.3}
.ans.right{outline:4px solid #fff;outline-offset:-7px}
.ans .cnt{font-family:var(--f-display);font-size:24px}
button.ans:disabled{cursor:default}
button.ans.chosen{outline:4px solid #fff;outline-offset:-7px}
.result{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.result div{border:2px solid var(--edge);background:var(--stone-2);padding:8px;text-align:center}
.result b{display:block;font-family:var(--f-display);font-size:26px}
.ragebar{border:3px solid var(--ember);background:color-mix(in srgb,var(--ember) 20%,var(--night));padding:10px;font-family:var(--f-display);font-size:20px;text-align:center;color:var(--ember)}
.count{font-family:var(--f-display);font-size:56px;color:var(--gold);line-height:1;text-shadow:3px 3px 0 #000}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--edge);background:var(--stone-2);padding:3px 8px 3px 3px;font-size:14px}
.chip img{width:24px;height:24px}
.chip .k{font-family:var(--f-label);font-size:10px;color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--gc);box-shadow:2px 2px 0 var(--gc);font-weight:700}
.chip.done{border-color:var(--good)}
.fightlog{list-style:none;margin:0;padding:0;font-size:14px;display:flex;flex-direction:column;gap:3px;max-height:200px;overflow:auto}
.fightlog .crit{color:var(--gold);font-weight:700} .fightlog .hurt{color:var(--bad)} .fightlog .heal{color:var(--good)} .fightlog .rage{color:var(--ember);font-weight:700}
.bosspick{display:grid;gap:8px}
.bosspick label{display:grid;grid-template-columns:auto 48px minmax(0,1fr) auto;gap:10px;align-items:center;border:2px solid var(--edge);padding:8px 10px;cursor:pointer;background:var(--stone-2)}
.bosspick label:has(input:checked){border-color:var(--ember)}
.bosspick img{width:48px;height:48px}
.banner{border:3px solid #000;padding:14px;text-align:center;font-family:var(--f-display);font-size:30px}
.banner.won{background:var(--gold);color:#1a1300}
.banner.lost{background:var(--stone-2)}
.classes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.classes div{border:2px solid var(--edge);padding:6px;text-align:center;background:var(--stone-2)}
.classes b{display:block;font-family:var(--f-display);font-size:24px}

/* Held */
.login{max-width:440px}
.pinrow{display:flex;gap:8px}
.pinrow input{width:100%;min-width:0;padding:8px 10px;font-family:var(--f-display);font-size:24px;letter-spacing:.35em}
.err{color:var(--bad);font-size:14px;min-height:1.5em;margin:0}
.sheet{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:520px){.sheet{grid-template-columns:minmax(0,1fr)}}
.portrait{width:112px;height:112px;border:3px solid var(--gc);background:var(--cape,var(--night));box-shadow:4px 4px 0 #000;display:grid;place-items:center}
.portrait img{width:96px;height:96px}
.sheet h2{font-size:34px}
.title{color:var(--gold);font-family:var(--f-display);font-size:16px}
.attrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.attrs{grid-template-columns:minmax(0,1fr)}}
.attrs dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
.attrs dt{color:var(--muted)} .attrs dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.attrs dt.main{color:var(--gold)} .attrs dd.main{color:var(--gold)}
.slots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@media (max-width:760px){.slots{grid-template-columns:repeat(4,minmax(0,1fr))}}
.slot{border:2px solid var(--rc,var(--edge));background:var(--night);padding:6px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0;font-size:12px}
.slot img{width:40px;height:40px}
.slot .nm{line-height:1.2;overflow-wrap:anywhere;color:var(--rc)}
.slot.empty{border-style:dashed;color:var(--muted)}
.bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 10px;align-items:start;border:2px solid var(--rc);background:var(--stone-2);padding:8px;position:relative}
.item img{width:44px;height:44px;background:var(--night)}
.item .nm{color:var(--rc);font-weight:700;overflow-wrap:anywhere}
.item .st{font-size:13px;color:var(--muted)}
.item .acts{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.item .new{position:absolute;top:-8px;left:-8px;background:var(--gold);color:#1a1300;font-family:var(--f-label);font-size:10px;padding:1px 5px;border:2px solid #000}
.up{color:var(--good)} .down{color:var(--bad)}
.chests{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.chest{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.chest img{width:80px;height:80px;filter:drop-shadow(3px 3px 0 #000)}
.chest:hover img{transform:translateY(-3px)}
.chest.opening img{animation:rattle .9s}
@keyframes rattle{0%,100%{transform:none}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg) scale(1.1)}80%{transform:rotate(6deg) scale(1.15);filter:brightness(2)}}
.reveal{border:3px solid var(--gold);background:var(--night);padding:14px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;animation:pop .35s}
@keyframes pop{from{transform:scale(.9);opacity:.3}to{transform:none;opacity:1}}
.reveal img{width:64px;height:64px}
.reveal .big{font-family:var(--f-display);font-size:28px}
.shop{display:grid;gap:8px}
.ware{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;border:2px solid var(--edge);background:var(--stone-2);padding:8px}
.ware img{width:40px;height:40px}
.ware p{margin:0;font-size:13px;color:var(--muted)}
.merchant{display:flex;gap:12px;align-items:center}
.merchant img{width:56px;height:56px}
.quizcard{border:3px solid var(--ember);background:var(--night);padding:14px;display:flex;flex-direction:column;gap:12px}

/* Markt */
.offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.offer{border:2px solid var(--edge);background:var(--stone-2);padding:10px;display:flex;flex-direction:column;gap:10px}
.offer .by{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.offer .by img{width:24px;height:24px}
.offer select{width:100%}
.incoming{border-top:1px dashed var(--edge);padding-top:8px;display:flex;flex-direction:column;gap:8px}

/* Klassenwahl, Dorf, Handbuch */
.bound,.free{display:inline-block;font-family:var(--f-label);font-size:10px;letter-spacing:.04em;padding:1px 6px;border:2px solid currentColor;width:fit-content}
.bound{color:var(--ember)} .free{color:var(--muted)}
.classpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ccard{border:2px solid var(--edge);background:var(--stone-2);padding:14px;display:flex;flex-direction:column;gap:8px}
.ccard img{width:56px;height:56px}
.ccard h3{font-size:24px}
.ccard .btn{margin-top:auto;justify-content:center}
.mini{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;font-size:14px}
.mini dt{color:var(--muted)} .mini dd{margin:0;text-align:right;font-weight:700}
.mini .main{color:var(--gold)}
.shops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:600px){.shops{grid-template-columns:minmax(0,1fr)}}
.shopbtn{display:flex;gap:12px;align-items:center;text-align:left;border:2px solid var(--edge);background:var(--stone-2);padding:10px;box-shadow:3px 3px 0 #000}
.shopbtn img{width:48px;height:48px}
.shopbtn b{font-family:var(--f-display);font-size:20px;font-weight:500}
.shopbtn[aria-pressed="true"]{border-color:var(--gold);background:var(--stone)}
h4.label{margin:6px 0 0}
.manual{max-width:900px}
.manual h3{font-size:24px;color:var(--gold)}
.manual p,.manual li{max-width:68ch;margin:0}
.manual ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.hbdl{margin:0;display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 14px}
@media (max-width:520px){.hbdl{grid-template-columns:minmax(0,1fr)}}
.hbdl dt{font-family:var(--f-display);font-size:18px}
.hbdl dd{margin:0}
.tablewrap{overflow-x:auto}
.manual table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
.manual th,.manual td{border-bottom:1px solid var(--edge);padding:6px 8px;text-align:left;vertical-align:top}
.manual thead th{font-family:var(--f-label);font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.05em}
.tiers.big span{font-size:13px;padding:4px 10px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:600px){.two{grid-template-columns:minmax(0,1fr)}}
.two>div{display:flex;flex-direction:column;gap:6px}

/* Gildenverwaltung */
.ghead{display:flex;align-items:center;gap:10px}
.ghead h3{font-size:20px}
.swatch{width:14px;height:14px;flex-shrink:0;border:2px solid #000}
.linkish{margin-left:auto;background:none;border:0;color:var(--muted);text-decoration:underline;font-size:14px;padding:2px}
.gcard{border-top:8px solid var(--gc)}
.roster{border-collapse:collapse;width:100%;font-size:15px;min-width:560px}
.roster th,.roster td{border-bottom:1px solid var(--edge);padding:6px 8px;text-align:left;vertical-align:middle}
.roster thead th{font-family:var(--f-label);font-size:11px;color:var(--muted);font-weight:400}
.roster .pin{font-family:var(--f-display);font-size:20px;letter-spacing:.15em;color:var(--gold)}
.roster select{padding:3px 6px;font-size:14px}
.addrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.addrow input{flex:1;min-width:160px}

/* Siegchance und gesperrte Bosse */
.chance{display:inline-flex;align-items:center;gap:8px;color:var(--cc);margin-top:4px}
.chance b{font-family:var(--f-display);font-weight:500;font-size:17px}
.pips{display:inline-flex;gap:3px}
.pips i{width:12px;height:12px;border:2px solid var(--cc);background:transparent}
.pips i.on{background:var(--cc)}
.locked{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;border:2px dashed var(--edge);padding:8px 10px;color:var(--muted)}
.lockbox{width:48px;height:48px;display:grid;place-items:center;font-family:var(--f-display);font-size:30px;background:var(--night);border:2px solid var(--edge)}

/* Abenteuer */
.worlds{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.wbtn{display:flex;gap:10px;align-items:center;text-align:left;border:2px solid var(--edge);background:var(--stone-2);padding:8px;min-width:0}
.wbtn img{width:40px;height:40px;flex-shrink:0;background:var(--night)}
.wbtn b{font-family:var(--f-display);font-weight:500;font-size:16px;color:var(--wc)}
.wbtn[aria-pressed="true"]{border-color:var(--wc);box-shadow:3px 3px 0 var(--wc)}
.wbtn:disabled{opacity:.45;cursor:not-allowed}
.wbtn:disabled b{color:var(--muted)}
.levels{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
@media (max-width:620px){.levels{grid-template-columns:repeat(5,minmax(0,1fr))}}
.lvlbtn{aspect-ratio:1;max-width:100%;border:2px solid var(--edge);background:var(--night);font-family:var(--f-display);font-size:18px;display:grid;place-items:center;color:var(--muted)}
.lvlbtn.done{color:var(--good);border-color:var(--good)}
.lvlbtn.cur{color:#1a1300;background:var(--gold);border-color:#000}
.lvlbtn.mini{border-width:3px}
.lvlbtn.boss{border-color:var(--ember);color:var(--ember)}
.lvlbtn.boss.cur{color:#1a0800;background:var(--ember)}
.lvlbtn[aria-pressed="true"]{outline:3px solid var(--text);outline-offset:1px}
.lvlbtn:disabled{opacity:.35;cursor:not-allowed}
.lootcard{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--gold);padding:6px 10px;background:var(--stone)}
.lootcard img{width:36px;height:36px}
/* ===== Stil nach Vorbild: Pixelschriften, Cremerahmen, Holzvitrinen ===== */
body{font-size:20px;line-height:1.35;letter-spacing:.01em}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.5;letter-spacing:.02em}
h1{font-size:20px!important} h2{font-size:15px!important} h3{font-size:12px!important;color:var(--gold)}
.label{font-size:9px;letter-spacing:.04em;line-height:1.6}
.note{font-size:18px}
.panel{border:3px solid #e2d3a0;box-shadow:inset 0 0 0 3px var(--stone),inset 0 0 0 4px #6e6441,5px 5px 0 #000;padding:18px}
nav.tabs button{font-size:11px;padding:9px 12px}
nav.tabs button[aria-selected="true"]{background:var(--gold);color:#1a1300;border-color:#000}
.btn{font-family:var(--f-display);font-size:10px;line-height:1.6;padding:9px 12px;border:2px solid #000;background:#2b2d52}
.btn.small{font-size:9px;padding:6px 9px}
.btn .cost{font-size:9px}
.gifts .btn span small{font-family:var(--f-body);font-size:16px;letter-spacing:0}
.btn.hot,.btn.fire{box-shadow:0 3px 0 #7a5a10,2px 5px 0 #000}
input[type=number],input[type=text],select,textarea{font-family:var(--f-body);font-size:20px}
.brand h1{font-size:18px!important}
.brand img{width:32px;height:32px}
.hcard img{width:64px;height:64px}
.hcard{grid-template-columns:64px minmax(0,1fr)}
.hcard b{font-size:11px;line-height:1.6}
.hcard .meta{font-size:16px}
.chip{font-size:18px}
.chip img{width:32px;height:32px}
.bossname{font-size:16px!important;line-height:1.5}
.qtext{font-family:var(--f-body);font-size:30px;line-height:1.2}
.ans{font-family:var(--f-body);font-size:24px}
.ans .cnt{font-size:16px}
.timer{font-size:30px}.count{font-size:40px}
.banner{font-size:16px;line-height:1.6}
.result b{font-size:16px;margin-top:6px}
.classes b{font-size:16px;margin-top:4px}
.chance b{font-size:10px}
.ragebar{font-size:12px;line-height:1.6}
.wbtn b{font-size:10px;line-height:1.6}
.wbtn img{width:48px;height:48px}
.lvlbtn{font-size:11px}
.shopbtn b{font-size:11px;line-height:1.6}
.shopbtn img,.merchant img{width:64px;height:64px;border:2px solid #000;background:var(--night)}
.ware img{width:48px;height:48px}
.stats b{font-size:14px}
.title{font-size:10px}
.hbdl dt{font-size:11px;line-height:1.6;color:var(--gold)}
.roster .pin{font-size:14px}
.bosspick img{width:96px;height:96px;border:2px solid #000;background:var(--night)}
.bosspick label{grid-template-columns:auto 96px minmax(0,1fr) auto}
.bosspick b{font-family:var(--f-display);font-size:11px;font-weight:400;line-height:1.6;color:var(--ember)}
.ccard img{width:96px;height:96px;border:2px solid #000;background:var(--night)}
.ccard h3{font-size:13px!important}
.genderpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:520px}
.gcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:2px solid var(--edge);background:var(--stone-2);color:inherit;cursor:pointer;font:inherit}
.gcard:hover,.gcard:focus-visible{border-color:var(--ember)}
.gcard img{width:144px;height:144px;border:2px solid #000;background:var(--night)}
.gcard b{font-family:var(--f-display);font-size:13px;font-weight:400}
.lookwrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.lookbig{align-items:center;gap:6px}
.lookbig .portrait{width:176px;height:176px}.lookbig .portrait img{width:144px;height:144px}
.lookpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.lcard{padding:4px;border:2px solid var(--edge);background:var(--night);cursor:pointer;display:grid;place-items:center}
.lcard img{width:84px;height:84px}
.lcard[aria-pressed="true"]{border-color:var(--ember);box-shadow:0 0 0 2px var(--ember)}
.lcard:hover,.lcard:focus-visible{border-color:var(--gold,#f4c542)}
@media (max-width:640px){.lookwrap{grid-template-columns:minmax(0,1fr)}.lookpick{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.lcard img{width:64px;height:64px}.gcard img{width:112px;height:112px}}
.chest img{width:96px;height:96px}
.lootcard img{width:48px;height:48px}
.reveal .big{font-family:var(--f-display);font-size:13px;line-height:1.6}
.mini{font-size:18px}
.slot .nm,.item .st{font-size:16px}
.item .nm{font-family:var(--f-display);font-size:9px;line-height:1.7}
.item{grid-template-columns:84px minmax(0,1fr);gap:6px 12px}
.slots{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.slot{padding:8px 6px}
.vit{position:relative;display:inline-grid;place-items:center;width:84px;height:76px;flex-shrink:0;border:3px solid #24160c;
  background:repeating-linear-gradient(0deg,#6e4727 0 6px,#5c3a1f 6px 7px,#784e2c 7px 13px,#553520 13px 14px);box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),0 0 0 2px var(--rc)}
.vit img{width:64px!important;height:64px!important;background:none!important;border:0!important;padding:0!important;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45))}
.vit.glow{box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),0 0 0 2px var(--rc),0 0 16px var(--rc)}
.vit .tb{position:absolute;right:-7px;bottom:-7px;background:#f4c542;color:#1a1300;font-family:var(--f-display);font-size:9px;font-weight:400;line-height:1;padding:4px 5px;border:2px solid #000}
.slot .vit{width:76px;height:70px}
.vit.big{width:112px;height:100px}.vit.big img{width:96px!important;height:96px!important}
.offer,.ware,.shopbtn{position:relative}
.offer{padding-top:26px}
.offer::before,.shopbtn::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:16px;border-bottom:2px solid #000;
  background:repeating-linear-gradient(90deg,var(--aw,#c0303e) 0 14px,#efe6cf 14px 28px)}
.shopbtn{padding-top:24px}
.offers .offer:nth-child(4n+2){--aw:#2f6fd0}.offers .offer:nth-child(4n+3){--aw:#d9a52a}.offers .offer:nth-child(4n+4){--aw:#3c8a4a}
.slot.empty img{width:64px;height:64px}
.lootcard img{width:64px;height:64px}
.shopbtn[data-shop="markt"]{--aw:#2f6fd0}.shopbtn[data-shop="alchemist"]{--aw:#6b3fa0}

.qtags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.qtags{grid-template-columns:minmax(0,1fr)}}
.qtag{display:flex;flex-wrap:wrap;gap:6px}
.qtag span{font-family:var(--f-display);font-size:8px;line-height:1;padding:4px 6px;border:2px solid var(--edge);color:var(--muted)}
.qtag .d1{color:var(--good);border-color:var(--good)}.qtag .d2{color:var(--gold);border-color:var(--gold)}.qtag .d3{color:var(--ember);border-color:var(--ember)}.qtag .d4{color:var(--bad);border-color:var(--bad)}

/* Abenteuerkarte */
.worldbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border:3px solid #e2d3a0;background:var(--stone);box-shadow:inset 0 0 0 3px var(--stone),inset 0 0 0 4px #6e6441,5px 5px 0 #000;padding:10px 14px}
.wbanner{text-align:center;min-width:0}.wbanner h2{color:var(--wc);text-shadow:2px 2px 0 #000;margin:4px 0}
.wbanner .note{font-size:17px}
.mapbox{position:relative;border:4px solid #e2d3a0;box-shadow:0 0 0 3px #000,6px 6px 0 #000;background:#000;overflow:hidden}
.mapimg{display:block;width:100%;height:auto;max-width:100%}
.node{position:absolute;transform:translate(-50%,-80%);background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.node img{width:clamp(28px,6vw,48px);height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.55))}
.node.k-mini img{width:clamp(34px,7.5vw,60px)}.node.k-boss img{width:clamp(40px,9vw,72px)}
.node .nlab{font-family:var(--f-display);font-size:8px;line-height:1;background:#f4c542;color:#1a1300;border:2px solid #000;padding:3px 4px;margin-top:-4px}
.node.done img{filter:grayscale(.85) brightness(.8) drop-shadow(0 3px 0 rgba(0,0,0,.55))}
.node.done .nlab{background:var(--good)}
.node.lock{cursor:pointer}
.node.lock img{filter:brightness(0) drop-shadow(0 0 0 #6b3fa0) drop-shadow(0 2px 0 #6b3fa0);opacity:.75}
.node.lock .nlab{background:#4a3a7a;color:#e6e0ff}
.node.cur img{filter:drop-shadow(0 0 6px #fff3b0) drop-shadow(0 3px 0 rgba(0,0,0,.55))}
.node.sel .nlab{outline:3px solid #fff;outline-offset:1px}
.node:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.here{font-family:var(--f-display);font-size:14px;color:#f4c542;text-shadow:2px 2px 0 #000;animation:bob 1s ease-in-out infinite;margin-bottom:-2px}
@keyframes bob{50%{transform:translateY(-4px)}}
.mapinfo{position:absolute;left:8px;top:8px;display:flex;gap:10px;background:rgba(15,16,36,.82);border:2px solid #000;padding:4px 10px;font-size:18px}
.stagepop{position:absolute;right:10px;top:10px;bottom:10px;width:min(330px,46%);overflow:auto;background:var(--stone);border:3px solid #e2d3a0;box-shadow:inset 0 0 0 3px var(--stone),inset 0 0 0 4px #6e6441,5px 5px 0 #000;padding:16px;display:flex;flex-direction:column;gap:10px;animation:pop .2s}
.popx{position:absolute;right:8px;top:6px;background:none;border:0;color:var(--muted);font-size:20px;line-height:1}
.popstage{display:grid;place-items:center;padding:10px;border:2px solid #000;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--wc) 35%,transparent),transparent 65%),var(--night)}
.popstage img{width:144px;height:144px}
.popname{font-size:12px!important;text-shadow:2px 2px 0 #000}
.stagepop .loot{display:flex;flex-direction:column;gap:6px}
.stagepop .lootcard{font-size:18px}
.wstrip{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.wdot{width:34px;height:34px;border:2px solid #000;background:var(--wc);color:#1a1300;font-family:var(--f-display);font-size:9px;box-shadow:2px 2px 0 #000}
.wdot.full{box-shadow:0 0 0 2px #f4c542,2px 2px 0 #000}
.wdot.on{outline:3px solid #fff;outline-offset:1px}
.wdot:disabled{background:#2a2c50;color:#555a88;cursor:not-allowed}
@media (max-width:760px){.stagepop{position:static;width:auto;margin:0;border-width:0 0 0 0;box-shadow:none;border-top:3px solid #e2d3a0}}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--gold);color:#1a1300;padding:10px 16px;font-weight:700;border:2px solid #000;box-shadow:3px 3px 0 #000;max-width:calc(100% - 32px);z-index:5}
footer{margin-top:32px;color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Aufgabenformate */
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.task{display:flex;flex-direction:column;gap:12px}
.qkind{align-self:flex-start;font-family:var(--f-display);font-size:9px;line-height:1;padding:5px 7px;border:2px solid var(--gold);color:var(--gold)}
.qhint{margin:0}
.qimg{align-self:center;max-width:100%;max-height:240px;object-fit:contain;border:3px solid #000;background:#fff}
.aimg{display:block;max-width:100%;max-height:72px;object-fit:contain;background:#fff;border:2px solid #000;margin-bottom:4px}
.answers.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.answers.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ans .atxt{min-width:0;overflow-wrap:anywhere}
.ans.chosen{outline:4px solid #fff;outline-offset:-7px;filter:brightness(1.1)}
.ans.wrong{outline:4px dashed #fff;outline-offset:-7px;opacity:.75}
.answers.wf .ans{min-height:84px;font-size:24px}
.ordgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.okard,.mbtn{display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border:3px solid #000;background:#2b2d52;color:#fff;font-weight:700;font-size:18px;min-height:52px;cursor:pointer}
.okard .badge,.mbtn .badge{flex:none;width:30px;height:30px;display:grid;place-items:center;border:2px solid #000;background:var(--night);font-family:var(--f-display);font-size:11px;color:var(--gold)}
.okard.set,.mbtn.set{background:#3b3f7a}.okard.set .badge,.mbtn.set .badge{background:var(--gold);color:#000}
.mbtn.sel{outline:4px solid var(--gold);outline-offset:-7px}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mgrid .stack{gap:8px}
.olist,.mlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.olist li,.mlist li{padding:8px 10px;border:2px solid var(--edge);background:var(--stone-2)}
.olist li.ok,.mlist li.ok{border-color:var(--good)}.olist li.bad,.mlist li.bad{border-color:var(--bad)}
.inrow{display:flex;gap:10px;align-items:center}
.tin{flex:1;min-width:0;font-size:24px;padding:10px 12px;border:3px solid #000;background:#fff;color:#000}
.unit{font-size:20px;font-weight:700}
.solline{margin:0;font-size:20px}
.qsearch{display:grid;gap:6px;margin:10px 0 4px}.qsearch input{flex:1;min-width:0;font-size:20px;padding:10px 12px}.qsearch .note{margin:0}
.qlist mark{background:#ffe066;color:#1a1423;padding:0 2px}
.expl{border:3px solid #000;background:#fff6d8;color:#1a1423;padding:10px 14px;box-shadow:4px 4px 0 #000;display:grid;gap:6px;text-align:left}
.expl .exh{font-size:20px}.expl .exh b{color:#1a7a3a}.expl .ext{margin:0;font-size:18px;line-height:1.35}.expl .exg{display:flex;justify-content:center}.expl .gfx{width:100%;max-width:340px;height:auto;font-family:var(--f-body,sans-serif)}
.axis{padding:34px 18px 30px}
.axis .line{position:relative;height:6px;background:var(--gold);border:2px solid #000}
.axis .tick{position:absolute;top:-8px;width:2px;height:14px;background:#fff;transform:translateX(-1px)}
.axis .tick.big{height:20px;top:-11px}
.axis .tick b{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:14px;white-space:nowrap;font-weight:700}
.axis .mk{position:absolute;top:-22px;width:0;height:0;transform:translateX(-9px);border:9px solid transparent;border-top:16px solid var(--ember)}
.axis .mk.sol{border-top-color:var(--good)}.axis .mk.sol b{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--good);font-size:14px;white-space:nowrap}
.axis .band{position:absolute;top:-8px;height:18px;background:color-mix(in srgb,var(--ember) 55%,transparent);border:2px solid var(--ember)}
.axis .band.sol{background:color-mix(in srgb,var(--good) 45%,transparent);border-color:var(--good);top:-12px;height:26px}
.axval{align-self:center;font-family:var(--f-display);font-size:16px;color:var(--ember)}
.toks{margin:0;font-size:24px;line-height:2.1}
.tok{font:inherit;padding:0 6px;border:2px solid var(--edge);background:var(--stone-2);color:inherit;cursor:pointer}
.tok.sel{background:var(--bad);border-color:#000;color:#fff}
.tok.hit{background:var(--good);color:#000;border-color:#000}.tok.miss{border:2px dashed var(--good);color:var(--good)}.tok.bad{background:var(--bad);color:#fff;text-decoration:line-through}
.tok s{opacity:.7}
.dist{margin:0;display:flex;flex-wrap:wrap;gap:12px;font-weight:700}.dist .ok{color:var(--good)}.dist .part{color:var(--gold)}.dist .bad{color:var(--bad)}
.imgpick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.imgprev{display:flex;align-items:center;gap:8px}.imgprev img{max-height:56px;max-width:90px;border:2px solid #000;background:#fff}
.qthumb{width:64px;height:48px;object-fit:contain;border:2px solid #000;background:#fff;flex:none}
.qtag .fmt{color:var(--gold);border-color:var(--gold)}
.qans .stack input[type=text]{width:100%}

/* Kosmetik und Kalle */
.pv{position:relative;overflow:hidden}
.pv .pbg,.pv .pfr{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.pv .hero{position:relative;z-index:1}.pv .pfr{z-index:2}
.pv.hasfr{border-color:transparent}
.wardrobe,.cosshop{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.cosshop{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.cware b{font-size:16px}.cware .note{font-size:14px;line-height:1.3}
.wtile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:2px solid var(--edge);background:var(--stone-2);color:inherit;cursor:pointer;font:inherit;font-size:14px;text-align:center}
.wtile.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.wtile .portrait,.cware .portrait{width:64px;height:64px;box-shadow:2px 2px 0 #000;border-width:2px;flex:none}
.wtile .portrait img.hero,.cware .portrait img.hero{width:55px;height:55px}
.cware{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border:2px solid var(--rc);background:var(--stone-2)}
.cware .rar{font-family:var(--f-display);font-size:9px;line-height:1.4}
.kalle{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.kcard{display:flex;flex-direction:column;gap:4px;padding:10px;border:2px solid var(--rc,var(--edge));background:var(--stone-2);min-height:150px}
.kcard.sold{opacity:.5;justify-content:center;align-items:center}
.kcard .nm{font-weight:700}.kcard .st{font-size:14px;color:var(--muted)}
.ptag{font-family:var(--f-display);font-size:9px;padding:4px 6px;border:2px solid var(--pc);color:var(--pc)}

/* Ruhmeshalle */
.rlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rrow{display:grid;grid-template-columns:44px auto minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 12px;align-items:center;padding:10px 12px;border:2px solid var(--edge);border-left:6px solid var(--gc);background:var(--stone-2)}
.rrow.me{border-color:var(--gold);border-left-color:var(--gc);box-shadow:0 0 0 2px var(--gold)}
.rrow .portrait{width:64px;height:64px;border-width:2px;box-shadow:2px 2px 0 #000}.rrow .portrait img.hero{width:55px;height:55px}
.rrow .rbar{grid-column:3/5;height:8px;background:var(--night);border:2px solid #000}.rrow .rbar i{display:block;height:100%}
.rval{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}.rval b{font-family:var(--f-display);font-size:18px;color:var(--gold)}
.medal{width:40px;height:40px;display:grid;place-items:center;font-family:var(--f-display);font-size:16px;color:#000;background:var(--mc);border:3px solid #000;box-shadow:2px 2px 0 #000;grid-row:1/3}
.medal.plain{background:var(--night);color:var(--muted);box-shadow:none;border-color:var(--edge)}
.rrow .portrait,.gcrest{grid-row:1/3}
.gcrest{width:48px;height:56px;border:3px solid #000;clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}
.rtitle{font-family:var(--f-display);font-size:9px;line-height:1.4}
@media (max-width:560px){.rrow{grid-template-columns:40px auto minmax(0,1fr)}.rval{grid-column:3;align-items:flex-start}.rrow .rbar{grid-column:1/4}}
/* Aufgaben, überarbeitet für Klasse 5 */
.selcount{margin:0;font-weight:700;color:var(--gold)}
.answers.multi .shape.cb{background:#fff;color:#000;border:3px solid #000;font-size:26px;font-weight:900}
.answers.multi .ans.chosen{outline:5px solid #fff;outline-offset:-8px;filter:brightness(1.15)}
.ordslots{display:flex;flex-direction:column;gap:6px;padding:10px;border:3px dashed var(--edge);background:rgba(0,0,0,.2)}
.oslot{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 10px;border:2px dashed var(--edge);color:inherit;background:transparent;font:inherit;font-weight:700;font-size:18px;text-align:left}
.oslot.set{border:3px solid #000;background:#3b3f7a;cursor:pointer}
.oslot .badge{flex:none;width:30px;height:30px;display:grid;place-items:center;border:2px solid #000;background:var(--gold);color:#000;font-family:var(--f-display);font-size:11px}
.oslot .x{margin-left:auto;opacity:.6}
.mgrid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}
.mgrid .mcol{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.mlines{position:absolute;left:0;top:0;pointer-events:none;z-index:2;overflow:visible}
.mbtn{position:relative;border-color:#000}
.mbtn .dot{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:3px solid #000;background:#fff}
.mbtn.l .dot{right:-12px}.mbtn.r .dot{left:-12px}
.mbtn.l{padding-right:22px}.mbtn.r{padding-left:22px}
.mbtn.set{background:color-mix(in srgb,var(--pc) 35%,#2b2d52);box-shadow:inset 6px 0 0 var(--pc)}.mbtn.r.set{box-shadow:inset -6px 0 0 var(--pc)}
.mbtn.set .dot{background:var(--pc)}
.mbtn.sel{outline:4px solid var(--gold);outline-offset:-2px;animation:pulse 1s infinite alternate}
@keyframes pulse{to{outline-color:#fff}}
@media (prefers-reduced-motion:reduce){.mbtn.sel{animation:none}}
@media (max-width:560px){.mgrid{column-gap:34px}.mbtn{font-size:15px;padding:8px}}
.tok.sel{background:var(--bad);color:#fff;border-color:#000;text-decoration:line-through;text-decoration-thickness:3px}
.axis{position:relative;padding:40px 22px 34px}
.axis .line{height:8px}
.axis.live .rin{position:absolute;left:8px;width:calc(100% - 16px);top:26px;height:36px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.axis.dual .rin{pointer-events:none}
.axis.dual .rin::-webkit-slider-thumb{pointer-events:auto}.axis.dual .rin::-moz-range-thumb{pointer-events:auto}
.axis .rin::-webkit-slider-runnable-track{background:transparent;height:36px}
.axis .rin::-moz-range-track{background:transparent}
.axis .rin::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:4px;border-radius:50%;background:var(--ember);border:4px solid #fff;box-shadow:0 0 0 3px #000}
.axis .rin::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ember);border:4px solid #fff;box-shadow:0 0 0 3px #000}
.axis .rin:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #000,0 0 0 7px var(--focus)}
.axval{margin:0;text-align:center;font-family:var(--f-display);font-size:16px;color:var(--ember)}
.axis .mk.you b{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--ember);font-size:13px}
/* Gegenstände: Details beim Drüberfahren */
.hastip{position:relative}
.itip{display:none;position:absolute;z-index:60;left:0;top:calc(100% + 6px);width:max-content;max-width:290px;padding:10px 12px;border:3px solid var(--rc,var(--gold));background:#0d0e22;box-shadow:4px 4px 0 #000;flex-direction:column;gap:4px;font-size:15px;line-height:1.35;text-align:left;font-family:var(--f-body)}
.hastip:hover .itip,.hastip:focus .itip,.hastip:focus-within .itip{display:flex}
.itip table{border-collapse:collapse;margin:2px 0}.itip th{text-align:left;font-weight:400;color:var(--muted);padding:1px 10px 1px 0}.itip td{padding:1px 8px;text-align:right;font-weight:700}
.itip .up,.dbadge.up{color:var(--good)}.itip .down,.dbadge.down{color:var(--bad)}
.dbadge{font-family:var(--f-display);font-size:9px;line-height:1.5;color:var(--muted)}.dbadge.no{color:var(--bad)}.dbadge.eq{color:var(--gold)}
.slot.hastip .itip{left:50%;transform:translateX(-50%)}
.kslot .item{height:100%}
.itip,.itip *{font-size:17px}.itip b{font-size:18px}.itip .note{color:var(--muted)}.itip table{white-space:nowrap}.itip .bound,.itip .free{font-size:12px}
/* Auswertung (Spielleitung) */
.stlock{max-width:640px}
.stseed{margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{border:3px solid var(--edge);background:var(--stone-2);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi b{font-family:var(--f-display);font-size:24px;color:var(--text)}.kpi span{color:var(--text)}.kpi small{color:var(--muted)}
.kpis.small .kpi{padding:8px 10px}.kpis.small .kpi b{font-size:18px}
.stgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:16px;align-items:start}
.stgrid h3{font-size:18px}
.sbar{display:grid;grid-template-columns:minmax(80px,160px) minmax(60px,1fr) 200px;gap:10px;align-items:center}
.sbar .sl{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar .sv{white-space:nowrap}.sbar .sv small,.stmeter small{color:var(--muted)}
.st{display:block;height:12px;background:var(--night);border:2px solid var(--edge);position:relative;overflow:hidden}
.st i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);border-radius:0 4px 4px 0}
.st.big{height:18px}
.stlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}.stlist li{display:grid;gap:3px;border-left:3px solid var(--edge);padding-left:10px}
.stqlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stq{border:2px solid var(--edge);background:var(--stone-2)}.stq.open{border-color:var(--gold)}
.stqhead{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:14px;padding:12px;width:100%;align-items:center}
.stqhead:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.stqhead b{font-size:18px}
.stmeter{display:grid;gap:4px}
.stqbody{padding:12px 12px 14px;border-top:2px dashed var(--edge)}
.flag{border-color:var(--ember)!important;color:var(--ember)!important}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{font:inherit;font-size:15px;padding:3px 9px;border:2px solid var(--edge);background:var(--night);color:var(--text);cursor:pointer}
.chip.ok{border-color:var(--good)}.chip.no{border-color:var(--bad)}.chip:hover{background:var(--stone)}
.wronglist{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}.wronglist li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--edge);padding:2px 0}
.kidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.kidcard{font:inherit;color:inherit;cursor:pointer;display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start;text-align:left;padding:12px;border:3px solid var(--edge);border-left:8px solid var(--gc);background:var(--stone-2);box-shadow:4px 4px 0 #000}
.kidcard:hover{border-color:var(--gold);border-left-color:var(--gc)}
.kidcard img{width:72px;height:72px;border:2px solid #000;background:var(--night)}
.kmeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:15px}
.tr.up{color:var(--good)}.tr.down{color:var(--bad)}.tr.flat{color:var(--muted)}
.profhead{display:flex;gap:18px;align-items:center;border-left:8px solid var(--gc)}
.profhead img{width:110px;height:110px;border:3px solid #000;background:var(--night)}
.profhead .swatch{display:inline-block;width:14px;height:14px;border:2px solid #000;vertical-align:-2px}
.good{color:var(--good)}.badtxt{color:var(--bad)}
.eqlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.eqlist li{display:flex;gap:8px;align-items:center;border:2px solid var(--edge);padding:6px;background:var(--night)}
.stcols{display:flex;align-items:flex-end;gap:6px;height:150px;padding:4px 0;border-bottom:2px solid var(--edge)}
.stcols .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px;min-width:18px}
.stcols .col i{display:block;width:100%;max-width:34px;background:var(--gold);border-radius:4px 4px 0 0}
.stcols .col b{font-size:13px;color:var(--text)}
.sttable{width:100%;border-collapse:collapse;font-size:16px}.sttable th{text-align:left;color:var(--muted);font-weight:400;border-bottom:2px solid var(--edge);padding:6px}
.sttable td{border-bottom:1px solid var(--edge);padding:6px;vertical-align:top}
.res{white-space:nowrap}.res.ok{color:var(--good)}.res.part{color:var(--gold)}.res.no{color:var(--bad)}
.profhead h2{font-size:24px!important;color:var(--text);margin:0}
.stlist .linkish{justify-self:start;text-align:left;font-size:17px}
@media (max-width:700px){.stqhead{grid-template-columns:1fr}.sbar{grid-template-columns:80px 1fr 130px}.sbar .sv small{display:none}.sttable td:nth-child(2),.sttable th:nth-child(2){display:none}}

/* Ablaufende Zeit */
.qtimer{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--f-display);font-size:26px;line-height:1;color:var(--good);text-shadow:2px 2px 0 #000;white-space:nowrap}
.qtimer small{font-size:12px}.qtimer .tico{font-size:18px;text-shadow:none}
.qtimer.big{font-size:44px}.qtimer.big small{font-size:16px}.qtimer.big .tico{font-size:28px}
.qtimer.mid{color:var(--gold)}.qtimer.low{color:var(--ember)}.qtimer.crit{color:var(--bad);animation:tpulse 1s steps(2) infinite}
@keyframes tpulse{50%{transform:scale(1.12)}}
.tbar{display:block;height:12px;border:2px solid #000;background:var(--night);margin:2px 0 10px;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--good);transition:width 1s linear,background-color .3s}
.tbar.mid i{background:var(--gold)}.tbar.low i{background:var(--ember)}.tbar.crit i{background:var(--bad)}
@media (prefers-reduced-motion:reduce){.qtimer.crit{animation:none}.tbar i{transition:none}}

/* Abstimmung und gemeinsame Bosskämpfe */
.bosspick label{grid-template-columns:auto 48px minmax(0,1fr) auto auto}
.bosspick label:has(input:checked){border-color:var(--edge)}
.bosspick label:has(input[type=radio]:checked){border-color:var(--ember)}
.vchk{display:flex;flex-direction:column;align-items:center;gap:2px;padding-left:8px;border-left:2px dashed var(--edge)}.vchk input{width:22px;height:22px}
.votelist{display:grid;gap:8px}
.voteopt{font:inherit;color:inherit;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border:3px solid var(--edge);background:var(--stone-2);text-align:left}
button.voteopt{cursor:pointer}button.voteopt:hover{border-color:var(--gold)}
.voteopt.mine{border-color:var(--good);box-shadow:0 0 0 2px var(--good) inset}
.voteopt img{width:56px;height:56px;border:2px solid #000;background:var(--night)}
.voteopt .vcount{font-family:var(--f-display);font-size:30px;color:var(--gold);min-width:2ch;text-align:right}
.voteopt .vmark{color:var(--good);font-weight:700;white-space:nowrap}
.voteres{border:2px dashed var(--gold);padding:8px 12px;margin:0}
.kidstart summary{cursor:pointer;list-style:none}.kidstart summary::-webkit-details-marker{display:none}.kidstart summary::before{content:"⚔ ";color:var(--ember)}

/* ===== Server-Version: Schriften, Anmeldung, Handy-Layout, Beamer ===== */
/* Die Schriften liegen auf dem eigenen Server, es wird nichts von Google geladen */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/press-start-2p-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/press-start-2p-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/vt323-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/vt323-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
body{font-size:19px}
a{color:var(--gold)}
footer a{color:var(--muted)}
[hidden]{display:none!important}

/* Startseite mit PIN (wie bei Kahoot groß in der Mitte) */
.gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.gatebox{width:min(460px,100%);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.gatebox.wide{width:min(520px,100%)}
.gatebox h1{font-size:clamp(24px,7vw,42px);color:var(--gold);text-shadow:4px 4px 0 #000;line-height:1.2}
.pinform{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.pinlab{font-family:var(--f-display);font-size:clamp(13px,3.6vw,17px);color:var(--text)}
.pinbig{width:100%;font-family:var(--f-display);font-size:clamp(26px,9vw,48px);letter-spacing:.3em;text-indent:.3em;text-align:center;padding:18px 6px;border:4px solid #000;background:#fffaf0;color:#1a1423;box-shadow:6px 6px 0 #000;border-radius:0;outline:none}
.pinbig:focus{box-shadow:6px 6px 0 #000,0 0 0 4px var(--focus)}
.pinbig::placeholder{color:#c9c3d8}
.gatebtn{width:100%;justify-content:center;font-size:16px;padding:14px}
.gate .err{min-height:1.6em;margin:0;font-size:18px}
.gate form:not(.pinform){width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.gate input[type=email],.gate input[type=password],.gate input[type=text]{width:100%;padding:10px 12px;font-size:20px}
.gatelinks a{color:var(--muted)}

/* Hinweise */
.netbar{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--bad);color:#120a10;text-align:center;font-family:var(--f-label);font-size:11px;padding:7px}
.rest{max-width:640px;margin:24px auto}
#app.resting section.view{display:none!important}
.arenabanner{font:inherit;color:inherit;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 16px;border:3px solid var(--ember);background:linear-gradient(90deg,rgba(255,138,61,.25),rgba(255,138,61,.05));box-shadow:4px 4px 0 #000;text-align:left;font-size:20px}
.arenabanner b{font-family:var(--f-display);font-size:12px;color:var(--ember);white-space:nowrap}
.btn.big{font-size:16px;padding:14px 22px}
.karena .stage{display:flex;gap:14px;align-items:center}
.beameridle{display:grid;place-items:center;gap:16px;min-height:60vh;text-align:center}
.beameridle img{width:96px;height:96px}
nav.tabs button .ico{display:none}

/* Beamer-Fenster: nur die Arena, groß, ohne Bedienknöpfe */
body.beamer header.top,body.beamer footer,body.beamer #arenaSide{display:none}
body.beamer .ctl{display:none!important}
body.beamer .wrap{max-width:none;padding:12px 24px}
@media (min-width:1300px){body.beamer .wrap{zoom:1.2}}
@media (min-width:1800px){body.beamer .wrap{zoom:1.4}}
body.beamer .stage img{width:96px!important;height:96px!important}
body.beamer .qhint{display:none}
.hpline .num{white-space:nowrap}
body.beamer .arena{grid-template-columns:1fr}
body.beamer #arenaMain{font-size:24px}
body.beamer .qtext{font-size:40px}

/* Handys: eine Spalte, Navigation unten, große Tippflächen */
@media (max-width:760px){
  body{font-size:18px}
  .wrap{padding-inline:12px;padding-bottom:96px}
  header.top{gap:8px 12px}
  .brand h1{font-size:20px}.brand img{width:28px;height:28px}
  body[data-role="kid"] nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:0;padding:4px 2px calc(4px + env(safe-area-inset-bottom));background:var(--stone);border-top:3px solid var(--edge);box-shadow:0 -4px 0 #000}
  body[data-role="kid"] nav.tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:8px;border:0;min-height:56px;justify-content:center}
  body[data-role="kid"] nav.tabs button .ico{display:block;font-size:22px;line-height:1;font-family:system-ui,sans-serif}
  body[data-role="kid"] nav.tabs button[aria-selected="true"]{background:var(--stone-2);color:var(--gold);box-shadow:inset 0 3px 0 var(--gold)}
  body[data-role="teacher"] nav.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;margin:0}
  body[data-role="teacher"] nav.tabs button{white-space:nowrap;font-size:8.5px;letter-spacing:0;padding:10px 0;overflow:hidden;text-overflow:ellipsis}
  table{display:block;max-width:100%;overflow-x:auto}
  .bosspick label{grid-template-columns:auto 56px minmax(0,1fr)!important;grid-template-areas:"r i t" "m m c"}
  .bosspick label>input[type=radio]{grid-area:r}.bosspick label>img{grid-area:i;width:56px!important;height:56px!important}
  .bosspick label>span:nth-of-type(1){grid-area:t}.bosspick label>.label{grid-area:m}.bosspick label>.vchk{grid-area:c}
  .bosspick b{font-size:10px}
  .ctl{flex-wrap:wrap}
  table.roster{display:block;min-width:0!important;width:100%}
  .roster thead{display:none}
  .roster tbody{display:flex;flex-direction:column;gap:8px}
  .roster tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;align-items:center;border:2px solid var(--edge);background:var(--stone-2);padding:8px}
  .roster th,.roster td{padding:0!important;border:0!important}
  .roster tr>*:nth-child(3){grid-column:1/3}
  .roster tr>*:nth-child(5){grid-column:1/-1}
  .roster .row{flex-wrap:wrap}
  input,select,textarea{max-width:100%}
  .status{width:100%}
  .grid,.arena,.stgrid,.two{grid-template-columns:minmax(0,1fr)!important}
  .grid>*,.stack>*{min-width:0}
  .panel{padding:12px}
  .answers{grid-template-columns:1fr!important}
  .ans{min-height:56px}
  .btn{min-height:44px}
  .btn.small{min-height:38px}
  .qtext{font-size:22px}
  .qmeta{flex-wrap:wrap;gap:6px}
  .qtimer{font-size:22px}
  .sheet{grid-template-columns:1fr!important;justify-items:center;text-align:center}
  .attrs{grid-template-columns:1fr!important}
  .slots{grid-template-columns:repeat(4,1fr)!important}
  .bag,.offers,.kalle,.cosshop,.shop{grid-template-columns:1fr!important}
  .mapbox{max-width:100%}
  .stagepop{left:4px!important;right:4px!important;width:auto!important;max-width:none!important}
  .mgrid{gap:6px}
  .mbtn{font-size:16px}
  .toast{bottom:84px}
  .kidcard{grid-template-columns:56px minmax(0,1fr)}.kidcard img{width:56px;height:56px}
  .roster{font-size:15px}
}
@media (max-width:380px){body[data-role="kid"] nav.tabs button{font-size:7px}}

/* Rechtstexte */
body.legalpage .legal{max-width:760px;margin:0 auto;padding:24px 16px 48px;line-height:1.5}
.legal h1{font-family:var(--f-display);font-size:24px;color:var(--gold);margin:16px 0}
.legal h2{font-family:var(--f-display);font-size:14px;line-height:1.6;color:var(--ember);margin:28px 0 8px}
.legal p,.legal li{font-size:19px}
.legal ul{padding-left:22px}
.legal a{color:var(--gold)}
.legal .ph{border:2px dashed var(--gold);padding:8px 12px;color:var(--gold)}


/* ===== Peeneschatz-Look: Flussnacht, Wellen und Gold ===== */
:root{
  --night:#08161c; --stone:#0f2730; --stone-2:#15343f; --edge:#2b5b66; --text:#e8f6f3; --muted:#9cc3bd; --focus:#7fe8e0;
  --river:#2fb09c; --river-l:#7fe8e0; --river-d:#17606a;
  --wave-strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='5' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='6' height='1' fill='%237fe8e0'/%3E%3Crect x='6' y='1' width='3' height='1' fill='%237fe8e0'/%3E%3Crect x='9' y='1' width='6' height='1' fill='%232fb09c'/%3E%3Crect x='15' y='1' width='3' height='1' fill='%237fe8e0'/%3E%3Crect x='0' y='2' width='6' height='1' fill='%237fe8e0'/%3E%3Crect x='6' y='2' width='12' height='1' fill='%232fb09c'/%3E%3Crect x='18' y='2' width='6' height='1' fill='%237fe8e0'/%3E%3Crect x='0' y='3' width='24' height='1' fill='%232fb09c'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%2317606a'/%3E%3C/svg%3E");
}
html{background:var(--night)}
body{background-color:var(--night);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' shape-rendering='crispEdges'%3E%3Crect x='0' y='14' width='8' height='1' fill='%232fb09c' fill-opacity='0.1'/%3E%3Crect x='8' y='13' width='6' height='1' fill='%232fb09c' fill-opacity='0.1'/%3E%3Crect x='14' y='12' width='10' height='1' fill='%232fb09c' fill-opacity='0.1'/%3E%3Crect x='24' y='13' width='6' height='1' fill='%232fb09c' fill-opacity='0.1'/%3E%3Crect x='30' y='14' width='18' height='1' fill='%232fb09c' fill-opacity='0.1'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% -20%,rgba(47,176,156,.16),transparent 60%);background-size:96px 48px,100% 100%;background-attachment:scroll,fixed}
.btn{background:#17404b}
.okard,.mbtn{background:#17404b}
.okard.set,.mbtn.set,.oslot.set{background:#1f5b68}
.mbtn.set{background:color-mix(in srgb,var(--pc) 35%,#17404b)}
.wdot:disabled{background:#12303a;color:#4f7d84}
.pinbig::placeholder{color:#b9cfcb}

/* Name zweifarbig: Peene wie Wasser, schatz wie Gold */
.pw{color:var(--river-l)}
.brand img{width:45px;height:36px}
header.top{border-bottom:0;padding-bottom:22px;background:var(--wave-strip) left bottom/48px 10px repeat-x}

/* Startseite mit PIN */
.gate{position:relative;overflow:hidden;padding-bottom:110px}
.gate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:var(--wave-strip) 0 0/96px 20px repeat-x,linear-gradient(transparent 20px,var(--river-d) 20px);animation:flow 6s linear infinite;pointer-events:none}
.gate::before{content:"";position:absolute;left:0;right:0;bottom:30px;height:20px;background:var(--wave-strip) 0 0/72px 15px repeat-x;opacity:.45;animation:flow 9s linear infinite reverse;pointer-events:none}
@keyframes flow{to{background-position:96px 0,0 0}}
.gatelogo{width:clamp(120px,36vw,180px);height:auto;image-rendering:pixelated;filter:drop-shadow(4px 4px 0 #000);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.gatebox h1{letter-spacing:.02em}
.gatebox .tag{margin:-6px 0 0;color:var(--river-l);font-family:var(--f-display);font-size:11px;letter-spacing:.08em;line-height:1.6}
.pinbig{background:#fffaf0;border-color:#000;box-shadow:6px 6px 0 #000,inset 0 -6px 0 #f1e3bd}
.gatebox .panel{border-color:var(--river)}

/* Rechtstexte im selben Stil */
.legal h1 .pw{color:var(--river-l)}
@media (prefers-reduced-motion:reduce){.gate::after,.gate::before,.gatelogo{animation:none}}
.legalbrand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-size:16px;color:var(--gold)!important}.legalbrand img{width:40px;height:32px;image-rendering:pixelated}

/* ===== Rechtsseiten im Spiel-Look ===== */
body.legalpage{min-height:100vh;display:flex;flex-direction:column}
.lhead{background:var(--wave-strip) left bottom/48px 10px repeat-x;padding:14px 16px 24px}
.lhead-in{max-width:860px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.legalbrand{font-size:18px}.legalbrand img{width:45px;height:36px}
body.legalpage .legal{flex:1;width:100%;max-width:860px;margin:0 auto;padding:18px 16px 40px;display:flex;flex-direction:column;gap:18px;line-height:1.45}
.legal p,.legal li,.legal dd{font-size:20px}
.legal a{color:var(--gold)}
.lhero{text-align:center;padding:10px 0 4px;display:grid;gap:10px;justify-items:center}
.lhero h1{font-family:var(--f-display);font-size:clamp(26px,6vw,40px);color:var(--gold);text-shadow:4px 4px 0 #000;margin:0}
.lhero p{max-width:560px;margin:0;color:var(--muted)}
.lhero .label{color:var(--river-l)}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fact{background:var(--stone);border:3px solid #000;box-shadow:inset 0 0 0 2px var(--edge),4px 4px 0 #000;padding:14px 10px;display:grid;justify-items:center;text-align:center;gap:6px}
.fact b{font-family:var(--f-display);font-size:10px;line-height:1.5;color:var(--text)}
.fact span{font-size:16px;line-height:1.25;color:var(--muted)}
.ficon{width:40px;height:40px;filter:drop-shadow(2px 2px 0 #000)}

.kidscroll{background:#fff6d8;color:#1a1423;border:3px solid #000;box-shadow:inset 0 -6px 0 #f1e3bd,6px 6px 0 #000;padding:18px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.kidscroll h2{font-family:var(--f-display);font-size:15px;line-height:1.5;color:#7a4a10;margin:0 0 8px}
.kidchest{width:84px;height:auto;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.35))}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:21px;line-height:1.3;color:#1a1423}
.ckicon{width:20px;height:16px;margin-top:4px}

.toc{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.toc a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--text);background:var(--stone-2);border:2px solid #000;box-shadow:2px 2px 0 #000;padding:3px 9px 3px 3px;font-size:17px}
.toc a b{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--gold);color:#1a1300;font-family:var(--f-display);font-size:9px}
.toc a:hover{background:var(--stone)}

.lsec{background:var(--stone);border:3px solid #e2d3a0;box-shadow:inset 0 0 0 3px var(--stone),inset 0 0 0 4px #6e6441,5px 5px 0 #000;padding:18px 20px;scroll-margin-top:16px}
.lsec h2{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-size:14px;line-height:1.5;color:var(--ember);margin:0 0 10px}
.lsec .nr{flex:none;display:grid;place-items:center;width:32px;height:32px;background:var(--gold);color:#1a1300;border:2px solid #000;box-shadow:2px 2px 0 #000;font-size:12px}
.lsec p{margin:0 0 10px}.lsec p:last-child{margin-bottom:0}
.lsec ul{margin:0;padding-left:22px;display:grid;gap:6px}
.lsec li::marker{color:var(--river-l)}
.lsec b{color:var(--river-l);font-weight:400}

.steckbrief{background:#fff6d8;color:#1a1423;border:3px solid #000;box-shadow:inset 0 -6px 0 #f1e3bd,6px 6px 0 #000;padding:20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.steckbrief dl{margin:0;display:grid;gap:4px}
.steckbrief dt{font-family:var(--f-display);font-size:10px;line-height:1.6;color:#7a4a10;margin-top:8px}
.steckbrief dt:first-child{margin-top:0}
.steckbrief dd{margin:0;font-size:22px;line-height:1.3}
.steckbrief a{color:#17606a}

.lfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:var(--muted);font-size:16px;padding-top:6px}
.lfoot a{color:var(--muted)}
.lwaves{height:64px;background:var(--wave-strip) 0 0/96px 20px repeat-x,linear-gradient(transparent 20px,var(--river-d) 20px);animation:flow 6s linear infinite}
@media (prefers-reduced-motion:reduce){.lwaves{animation:none}}

@media (max-width:640px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kidscroll,.steckbrief{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:left}
  .kidscroll h2{text-align:center}
  .kidchest{width:72px}
  .lsec{padding:14px}
  .lsec h2{font-size:12px}
  .lhead .btn{font-size:9px}
}