/* Eine Spalte wie ein Handy-Startbildschirm: Kopf, Tageskarte, Eingabe, neun Ritter, Zugbrücke, Vorführteil.
   Sechzehn Welten setzen nur Tokens um; jede Welt ist ein eigener, fester Look (kein Hell/Dunkel-Wechsel). */
:root{
  --bg:#12122a; --bg-img:url(img/burg_bg.jpg); --veil:rgba(10,10,30,.78);
  --panel:rgba(22,24,52,.82); --line:rgba(232,190,110,.32); --fg:#f2ead8; --muted:#b9b2c9;
  --accent:#e8743b; --accent-fg:#fff; --gold:#e8be6e; --ok:#7fc79a;
  --display:'Cinzel',Georgia,serif; --body:'Alegreya Sans',system-ui,sans-serif;
  --r-card:20px; --r-tile:16px; --r-btn:999px;
  color-scheme:dark;
}
:root[data-welt="buero"]{
  --bg:#eef0f4; --bg-img:none; --veil:transparent;
  --panel:#ffffff; --line:#dde1e9; --fg:#1d2433; --muted:#5d6678;
  --accent:#2f5bd3; --accent-fg:#fff; --gold:#2f5bd3; --ok:#1f8a54;
  --display:'IBM Plex Sans',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif;
  --r-card:10px; --r-tile:8px; --r-btn:8px; color-scheme:light;
}
:root[data-welt="zen"]{
  --bg:#ece7dd; --bg-img:none; --veil:transparent;
  --panel:rgba(255,255,255,.6); --line:#d3cbbb; --fg:#46463e; --muted:#77776b;
  --accent:#6f7d63; --accent-fg:#fff; --gold:#6f7d63; --ok:#6f7d63;
  --display:'Cormorant Garamond',Georgia,serif; --body:'Jost',system-ui,sans-serif;
  --r-card:24px; --r-tile:999px; --r-btn:999px; color-scheme:light;
}
:root[data-welt="einhorn"]{
  --bg:#fbe6f3; --bg-img:linear-gradient(160deg,#ffe3f1,#f3e1ff 55%,#e2f0ff); --veil:transparent;
  --panel:rgba(255,255,255,.82); --line:#f1cfe4; --fg:#5b2a5e; --muted:#8a5f8c;
  --accent:#d0499b; --accent-fg:#fff; --gold:#d0499b; --ok:#3f9d78;
  --display:'Fredoka',system-ui,sans-serif; --body:'Fredoka',system-ui,sans-serif;
  --r-card:24px; --r-tile:22px; --r-btn:999px; color-scheme:light;
}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font:400 17px/1.45 var(--body)}
.grund{position:fixed;inset:0;background:var(--bg-img) center/cover no-repeat,var(--bg);z-index:-2}
.grund::after{content:"";position:absolute;inset:0;background:var(--veil)}
.wrap{max-width:560px;margin:0 auto;padding-inline:16px;padding-block:18px 56px;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.kopf{display:flex;align-items:center;gap:14px}
.av{width:60px;height:60px;border-radius:18px;flex:none;background:var(--panel) center/cover no-repeat;border:1px solid var(--line);display:grid;place-items:center;font-size:32px}
.kopf .wer{flex:1;min-width:0}
.kopf h1{font-size:26px;line-height:1.1;color:var(--gold)}
.kopf .sub{color:var(--muted);font-size:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 13px;font-size:14px;cursor:pointer;color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.karte{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.label{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.gruss{font-family:var(--display);font-size:22px}
.zeilen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.zeilen li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.zeilen li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:9px;flex:none}
.zeilen .z{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:500;margin-right:4px}
.zeilen .mini{color:var(--muted);font-size:14px}
.leise{color:var(--muted);font-size:15px}
.reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{appearance:none;border:0;border-radius:var(--r-btn);background:var(--accent);color:var(--accent-fg);font-weight:600;padding:12px 20px;cursor:pointer;font-size:16px}
.btn.zwei{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn:disabled{opacity:.5;cursor:default}
a.btn{text-decoration:none;display:inline-block}
.zusammen{white-space:pre-wrap;overflow-wrap:anywhere}
textarea{width:100%;box-sizing:border-box;min-height:84px;resize:vertical;background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:12px;font:400 17px var(--body)}
textarea::placeholder{color:var(--muted)}
.raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kachel{appearance:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-tile);min-height:84px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-align:center;font-size:14px;line-height:1.15}
:root[data-welt="zen"] .kachel{aspect-ratio:1;min-height:0;background:transparent}
.kachel .ic{font-size:24px;line-height:1}
.kachel b{font-weight:500;font-family:var(--display);color:var(--gold);font-size:13.5px;max-width:100%;overflow-wrap:anywhere}
.stufen button[aria-pressed="true"] .leise{color:inherit;opacity:.85}
:root[data-welt="buero"] .kachel b,:root[data-welt="zen"] .kachel b{color:var(--fg)}
.balken{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.balken i{display:block;height:100%;background:var(--accent);transition:width .4s}
.pflichten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pflichten label{display:flex;gap:10px;align-items:center;cursor:pointer}
.pflichten input{width:22px;height:22px;accent-color:var(--accent)}
.stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stufen button{appearance:none;border:1px solid var(--line);background:transparent;border-radius:12px;padding:9px 6px;cursor:pointer;font-size:14px;line-height:1.2}
.stufen button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.bruecke{display:flex;align-items:center;gap:12px}
.bruecke .zu{font-weight:600}
.schritte{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.film{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000}
.film video{display:block;width:100%;height:auto}
.fuss{color:var(--muted);font-size:14px;text-align:center}
.fuss a{color:var(--gold)}
.blatt-hg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.blatt{background:var(--bg);color:var(--fg);width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;max-height:85vh;overflow:auto;border:1px solid var(--line)}
.blatt h3{font-size:22px;color:var(--gold)}
.vorf{background:var(--accent);color:var(--accent-fg);border-radius:12px;padding:8px 12px;font-size:14px}
:root[data-welt="raumschiff"]{--bg:#070b1a;--bg-img:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#cde,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 85% 15%,#fff,transparent),radial-gradient(ellipse at 80% 0%,#1b2b5c,#070b1a 60%);--veil:transparent;--panel:rgba(14,24,54,.82);--line:rgba(120,200,255,.3);--fg:#e6f1ff;--muted:#93a9cc;--accent:#3ad1ff;--accent-fg:#00121c;--gold:#7fe3ff;--ok:#3ad1ff;--display:'Orbitron',system-ui,sans-serif;--body:'Barlow',system-ui,sans-serif;--r-card:14px;--r-tile:10px;--r-btn:8px;color-scheme:dark}
:root[data-welt="piraten"]{--bg:#24160d;--bg-img:repeating-linear-gradient(90deg,#2b1a10 0 46px,#24160d 46px 48px),linear-gradient(#000,#000);--veil:rgba(15,8,3,.55);--panel:rgba(52,32,18,.88);--line:rgba(214,170,90,.35);--fg:#f3e6cc;--muted:#c4ad8a;--accent:#c9a227;--accent-fg:#1d1206;--gold:#e9c46a;--ok:#c9a227;--display:'Pirata One',Georgia,serif;--body:'Alegreya Sans',system-ui,sans-serif;--r-card:14px;--r-tile:12px;--r-btn:10px;color-scheme:dark}
:root[data-welt="werkstatt"]{--bg:#22252a;--bg-img:repeating-linear-gradient(135deg,#25292e 0 14px,#212429 14px 28px);--veil:transparent;--panel:rgba(40,44,50,.92);--line:rgba(242,169,0,.35);--fg:#eef0f2;--muted:#a9b0b8;--accent:#f2a900;--accent-fg:#1a1400;--gold:#f2a900;--ok:#f2a900;--display:'Roboto Slab',Georgia,serif;--body:'Barlow',system-ui,sans-serif;--r-card:8px;--r-tile:6px;--r-btn:6px;color-scheme:dark}
:root[data-welt="kueche"]{--bg:#f6efe4;--bg-img:linear-gradient(#f6efe4,#efe3cf);--veil:transparent;--panel:#fffaf2;--line:#e3d3b8;--fg:#3b2a1f;--muted:#7c6655;--accent:#b5452a;--accent-fg:#fff;--gold:#b5452a;--ok:#b5452a;--display:'Playfair Display',Georgia,serif;--body:'Jost',system-ui,sans-serif;--r-card:16px;--r-tile:14px;--r-btn:999px;color-scheme:light}
:root[data-welt="hotel"]{--bg:#0f2a24;--bg-img:radial-gradient(ellipse at top,#1d4a3f,#0f2a24 70%);--veil:transparent;--panel:rgba(18,52,44,.88);--line:rgba(212,175,95,.4);--fg:#f4efe2;--muted:#bcc8bd;--accent:#d4af5f;--accent-fg:#14261f;--gold:#e6c77d;--ok:#d4af5f;--display:'Playfair Display',Georgia,serif;--body:'Jost',system-ui,sans-serif;--r-card:6px;--r-tile:4px;--r-btn:4px;color-scheme:dark}
:root[data-welt="stadion"]{--bg:#0d3b1e;--bg-img:repeating-linear-gradient(90deg,#0f4423 0 60px,#0d3b1e 60px 120px);--veil:rgba(0,0,0,.25);--panel:rgba(8,40,20,.86);--line:rgba(255,255,255,.28);--fg:#ffffff;--muted:#bfe0c8;--accent:#f4d03f;--accent-fg:#102010;--gold:#f4d03f;--ok:#f4d03f;--display:'Bebas Neue',Impact,sans-serif;--body:'Barlow',system-ui,sans-serif;--r-card:10px;--r-tile:8px;--r-btn:6px;color-scheme:dark}
:root[data-welt="detektei"]{--bg:#151515;--bg-img:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 3px,transparent 3px 26px),linear-gradient(#1c1a17,#0e0e0e);--veil:transparent;--panel:rgba(32,29,25,.9);--line:rgba(200,169,106,.35);--fg:#ece4d4;--muted:#a99f8d;--accent:#c8a96a;--accent-fg:#141210;--gold:#d9bd84;--ok:#c8a96a;--display:'Special Elite',Courier,monospace;--body:'Jost',system-ui,sans-serif;--r-card:4px;--r-tile:4px;--r-btn:4px;color-scheme:dark}
:root[data-welt="wald"]{--bg:#1b2e20;--bg-img:radial-gradient(ellipse at 50% -10%,#3d6b45,#1b2e20 65%);--veil:transparent;--panel:rgba(28,52,34,.86);--line:rgba(217,142,58,.35);--fg:#eef3e6;--muted:#b3c4a8;--accent:#d98e3a;--accent-fg:#1a1206;--gold:#e8b26a;--ok:#d98e3a;--display:'Cormorant Garamond',Georgia,serif;--body:'Alegreya Sans',system-ui,sans-serif;--r-card:22px;--r-tile:18px;--r-btn:999px;color-scheme:dark}
:root[data-welt="dschungel"]{--bg:#e7f7d4;--bg-img:linear-gradient(160deg,#d4f2b0,#fff4b8 55%,#bfeedd);--veil:transparent;--panel:rgba(255,255,255,.8);--line:#bfe29a;--fg:#24451a;--muted:#577a45;--accent:#2e9e4f;--accent-fg:#fff;--gold:#2e9e4f;--ok:#2e9e4f;--display:'Fredoka',system-ui,sans-serif;--body:'Fredoka',system-ui,sans-serif;--r-card:26px;--r-tile:24px;--r-btn:999px;color-scheme:light}
:root[data-welt="ozean"]{--bg:#06243d;--bg-img:linear-gradient(180deg,#0b4a73,#06243d 55%,#031524);--veil:transparent;--panel:rgba(8,48,78,.82);--line:rgba(120,220,230,.3);--fg:#e3f7fb;--muted:#9cc7d4;--accent:#ffb347;--accent-fg:#2a1600;--gold:#7fe0e8;--ok:#ffb347;--display:'Fredoka',system-ui,sans-serif;--body:'Jost',system-ui,sans-serif;--r-card:22px;--r-tile:20px;--r-btn:999px;color-scheme:dark}
:root[data-welt="zirkus"]{--bg:#fff3e3;--bg-img:repeating-linear-gradient(90deg,#fbe3d3 0 40px,#fff3e3 40px 80px);--veil:transparent;--panel:rgba(255,255,255,.9);--line:#e9b8a0;--fg:#4a1414;--muted:#86504a;--accent:#c62828;--accent-fg:#fff;--gold:#c62828;--ok:#c62828;--display:'Bebas Neue',Impact,sans-serif;--body:'Fredoka',system-ui,sans-serif;--r-card:18px;--r-tile:14px;--r-btn:999px;color-scheme:light}
:root[data-welt="retro"]{--bg:#0b0b1e;--bg-img:linear-gradient(transparent 0 96%,rgba(255,43,214,.25) 96%),linear-gradient(90deg,transparent 0 96%,rgba(57,255,20,.18) 96%);--veil:transparent;--panel:rgba(20,16,48,.9);--line:rgba(255,43,214,.45);--fg:#f0f0ff;--muted:#a9a6d6;--accent:#ff2bd6;--accent-fg:#0b0b1e;--gold:#39ff14;--ok:#ff2bd6;--display:'Press Start 2P',monospace;--body:'Barlow',system-ui,sans-serif;--r-card:0px;--r-tile:0px;--r-btn:0px;color-scheme:dark}
:root[data-welt="retro"] .grund{background-size:32px 32px,32px 32px,auto}
:root[data-welt="raumschiff"] .kachel b{font-size:10.5px;letter-spacing:.02em}
:root[data-welt="retro"] .kachel b{font-size:9px;line-height:1.5}
:root[data-welt="retro"] .kopf h1{font-size:18px}
:root[data-welt="stadion"] .kachel b,:root[data-welt="zirkus"] .kachel b{font-size:17px;letter-spacing:.04em}
.chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{flex:none}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.balken i{transition:none}}

/* ---- Web-App-Ergänzungen ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-tap-highlight-color:transparent}
.wrap{padding-inline:max(16px,env(safe-area-inset-left,0px))}
@media (min-width:820px){.wrap{max-width:720px}.raster{grid-template-columns:repeat(5,minmax(0,1fr))}}
.kopf .zahnrad{appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:14px;width:44px;height:44px;font-size:20px;cursor:pointer;color:var(--fg)}
.verlauf{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow:auto}
.verlauf:empty{display:none}
.msg{padding:10px 14px;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4;max-width:92%}
.msg.ich{align-self:flex-end;background:var(--accent);color:var(--accent-fg)}
.msg.marvin{align-self:flex-start;background:transparent;border:1px solid var(--line)}
.tor{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.tor .karte{width:100%;max-width:400px}
.tor input,.blatt input{width:100%;box-sizing:border-box;background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:12px;font:400 17px var(--body)}
.feld{display:flex;flex-direction:column;gap:6px}
.hinweis{border:1px dashed var(--line);border-radius:14px;padding:12px;font-size:15px;color:var(--muted)}
.fehler{color:#ff8a7a}