:root {
  --bg:#141218; --panel:rgba(24,20,22,.86); --panel2:rgba(40,32,30,.95); --panel-solid:#241e1c;
  --akz:#e3b04f; --akz-hell:#ffd27a; --akz2:#9a6414; --linie:rgba(227,176,79,.32);
  --text:#f6eee2; --text-2:#e2d6c4; --text-3:#b9ab98; --dim:#c4b08e;
  --gold:#ffd36b; --rot:#ff8a72; --gruen:#a6d97a; --blau:#86c0f0;
  --ov-a:#2c2420; --ov-b:#141010; --scrim:rgba(8,6,6,.7);
  --kopf:'Georgia', 'Times New Roman', serif;
  --sans:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ort:url(img/kulisse-abend.webp?v=1); --ort-hoch:url(img/kulisse-abend-hoch.webp?v=1); --ort-dunkel:rgba(10,8,14,.18);
  --flaeche:url(img/tisch-abend.webp?v=2); --kante:#3e2614; --kante-licht:#7a5232;
  --papier:#efe3c4; --papier-2:#dccb9e; --papier-t:#2a2016; --papier-t2:#5a4a32;
  --holz-a:#6a4428; --holz-b:#3e2614; --holz-t:#f4e6c8; --messing:#c9a24c; --messing-d:#6a4a10;
  --fassade:#d8c6a2; --fassade-d:#9a8662; --fenster:#2a3446; --fenster-licht:#f2c96b; --dach:#5a3a2e; --dach-d:#3a2218;
  --plus:#2f7a2a; --minus:#a8301e; --wahl:#ffd27a; --rat:#7fd0ff;
}
:root[data-theme="winter"] {
  --ort:url(img/kulisse-winter.webp?v=1); --ort-hoch:url(img/kulisse-winter-hoch.webp?v=1); --ort-dunkel:rgba(20,24,40,.12);
  --flaeche:url(img/tisch-winter.webp?v=2); --kante:#4a4440; --kante-licht:#8a807a;
  --akz:#e8c070; --akz-hell:#ffe2a0; --linie:rgba(232,192,112,.32); --panel:rgba(26,30,42,.86); --panel2:rgba(40,46,62,.95); --panel-solid:#262c3c;
  --ov-a:#2a3042; --ov-b:#141824; --fenster:#3a4a66; --dach:#4a4a58; --dach-d:#2e2e3a; --fassade:#d6d2c8; --fassade-d:#9a948a;
}
:root[data-theme="light"] {
  --bg:#efe8dc; --panel:rgba(250,246,236,.92); --panel2:rgba(240,232,216,.97); --panel-solid:#f4ecdc;
  --akz:#8a4a10; --akz-hell:#7a3c06; --akz2:#c08a3a; --linie:rgba(110,70,20,.32);
  --text:#24180e; --text-2:#42301c; --text-3:#5c4830; --dim:#665234;
  --gold:#7a4e00; --rot:#b4232f; --gruen:#2f7a2a; --blau:#1a5fb4;
  --ov-a:#f6efe2; --ov-b:#e6dac4; --scrim:rgba(40,26,10,.4);
  --ort:url(img/kulisse-sommer.webp?v=1); --ort-hoch:url(img/kulisse-sommer-hoch.webp?v=1); --ort-dunkel:rgba(255,248,236,.06);
  --flaeche:url(img/tisch-sommer.webp?v=2); --kante:#a08458; --kante-licht:#d8c094;
  --holz-a:#b08a58; --holz-b:#7a5a34; --holz-t:#24180e; --fassade:#efe2c6; --fassade-d:#b8a47e; --fenster:#4a5a70; --dach:#8a5a46; --dach-d:#5a3a2a;
  --wahl:#b46a00; --rat:#1a6fb4;
}
#kulisse { position:absolute; inset:0; background:linear-gradient(180deg, var(--ort-dunkel), var(--ort-dunkel)), var(--ort) center/cover, #2a2420; }
#stage.hoch #kulisse { background-image:linear-gradient(180deg, var(--ort-dunkel), var(--ort-dunkel)), var(--ort-hoch); }
#stage.lobbyhg #kulisse { filter:blur(3px) brightness(.6) saturate(.9); }
:root[data-theme="light"] #stage.lobbyhg #kulisse { filter:blur(3px) brightness(1.05) saturate(.75); }
:where(html, html *) { scrollbar-width:thin; scrollbar-color:var(--akz, #f2c94c) var(--panel2, rgba(20,58,52,.95)); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:var(--panel2, rgba(20,58,52,.95)); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:var(--akz, #f2c94c); border-radius:5px; border:2px solid transparent; background-clip:padding-box; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#040a0b; color:var(--text); font-family:var(--sans); overflow:hidden; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, #2a2030 0%, #040a0b 80%); }
:root[data-theme="light"] #wrap { background:radial-gradient(ellipse at center, #f2eadc 0%, #ccb898 85%); }
#stage { position:relative; width:1280px; height:800px; flex:none; transform-origin:center center; overflow:hidden; background:var(--bg); -webkit-touch-callout:none; }
[hidden] { display:none !important; }
button { font-family:var(--sans); cursor:pointer; }
input, select { font-family:var(--sans); font-size:16px; }
.sgzi { width:18px; height:18px; flex:none; display:inline-block; vertical-align:-3px; }

.kb { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:linear-gradient(180deg, #3a2c44, #1c1424); color:var(--text); border:1px solid var(--linie); border-radius:9px; padding:9px 16px; font-size:16px; font-weight:700; box-shadow:inset 0 1px 0 rgba(255,235,200,.12), 0 2px 8px rgba(0,0,0,.4); }
:root[data-theme="light"] .kb { background:linear-gradient(180deg, #fbf4ea, #eadcc6); box-shadow:inset 0 1px 0 #fff8, 0 2px 6px rgba(60,40,20,.2); }
@media (hover: hover) { .kb:hover:not(:disabled) { border-color:var(--akz-hell); } }
.kb:disabled { opacity:.45; cursor:default; }
.kb-gold { background:linear-gradient(#ffe08a, #d9a81f) !important; color:#2b2405 !important; border-color:#fff0bd; box-shadow:0 2px 0 #6a5006, inset 0 1px 0 #fff6; }
.kb-gruen { background:linear-gradient(#b3e08c, #5f9f3a) !important; border-color:#def3c8; color:#142408 !important; }
.kb.an { outline:2px solid var(--akz-hell); }
.kb-ic { width:38px; height:34px; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,0,0,.28); color:var(--text); border:1px solid var(--linie); border-radius:8px; padding:0; }
:root[data-theme="light"] .kb-ic { background:rgba(255,255,240,.6); }
.kb-ic .sgzi { width:20px; height:20px; }
.kb-ic.an { background:rgba(242,201,76,.3); border-color:var(--akz-hell); }
@media (hover: hover) { .kb-ic:hover { border-color:var(--akz-hell); } }
.kb-klein { padding:5px 12px; font-size:14px; }
.kb-gross { width:100%; padding:11px 18px; font-size:18px; }
.knopf { display:inline-flex; align-items:center; gap:6px; font-weight:800; letter-spacing:.3px; font-size:15px; color:#2b2405; cursor:pointer; padding:9px 15px; border-radius:8px;
  border:1px solid #fff0bd; background:linear-gradient(#ffe08a, #d9a81f); box-shadow:0 2px 0 #6a5006, inset 0 1px 0 #fff6; white-space:nowrap; }
.knopf.leise { color:var(--text); background:var(--panel2); border-color:var(--linie); box-shadow:none; }
.knopf.klein { padding:5px 10px; font-size:13.5px; }
.knopf .sgzi { width:16px; height:16px; }

#lobby, #tisch { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(10,6,14,.25), rgba(4,10,12,.5)); }
:root[data-theme="light"] #lobby, :root[data-theme="light"] #tisch { background:linear-gradient(180deg, rgba(250,244,232,.25), rgba(232,220,200,.45)); }
.lo-kopf { position:relative; display:flex; align-items:center; gap:18px; padding:12px 24px 10px; border-bottom:1px solid var(--linie); background:var(--panel); }
.lo-logo { font-family:var(--kopf); font-size:30px; font-weight:900; letter-spacing:5px; color:var(--akz-hell); text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(242,201,76,.22); }
:root[data-theme="light"] .lo-logo { text-shadow:none; }
.lo-raum { font-size:18px; color:var(--text-2); font-style:italic; }
.lo-ich { margin-left:auto; font-size:15px; color:var(--text-2); }
.lo-ich b { color:var(--akz-hell); }
.lo-kopf-r { display:flex; gap:8px; margin-left:14px; }
.lo-label { font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--akz); margin-bottom:6px; font-weight:800; }
.lo-label small { text-transform:none; letter-spacing:0; color:var(--text-3); font-weight:500; font-size:12px; }
#chatwin, #tchatwin, #pchatwin { flex:1; overflow-y:auto; background:rgba(0,0,0,.25); border:1px solid rgba(242,201,76,.2); border-radius:8px; padding:9px 11px; font-size:15px; line-height:1.45; user-select:text; }
:root[data-theme="light"] #chatwin, :root[data-theme="light"] #tchatwin, :root[data-theme="light"] #pchatwin { background:rgba(255,255,240,.55); }
#chatin, #tchatin, #pchatin { margin-top:8px; padding:8px 12px; background:rgba(0,0,0,.3); color:var(--text); border:1px solid var(--linie); border-radius:8px; outline:none; font-size:16px; }
:root[data-theme="light"] #chatin, :root[data-theme="light"] #tchatin, :root[data-theme="light"] #pchatin { background:rgba(255,255,240,.75); }
#chatin:focus, #tchatin:focus, #pchatin:focus { border-color:var(--akz-hell); }
.nm { color:var(--akz-hell); font-weight:bold; }
.sys { color:var(--text-3); font-style:italic; }
.lo-chat { display:flex; flex-direction:column; min-height:0; }
.lo-spieler { display:flex; flex-direction:column; min-height:0; }
.lo-tabs { display:flex; gap:4px; margin-bottom:8px; }
.lo-tabs button { flex:1; background:rgba(0,0,0,.22); color:var(--text-2); border:1px solid var(--linie); border-radius:8px 8px 0 0; padding:8px; font-size:15px; font-weight:700; }
.lo-tabs button.an { background:rgba(242,201,76,.18); color:var(--akz-hell); border-color:var(--akz); }
.lo-tab { flex:1; display:flex; flex-direction:column; min-height:0; }
.lo-liste { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
.lo-hinweis { color:var(--text-3); font-style:italic; font-size:14px; margin:8px 0; }
.it { display:flex; align-items:center; gap:8px; padding:6px 10px; background:rgba(0,0,0,.18); border-radius:6px; font-size:15px; }
.it .pk { width:9px; height:9px; border-radius:50%; background:var(--gruen); }
.it.spielt .pk { background:var(--gold); }
.it.me { color:var(--akz-hell); }
.tb { display:flex; align-items:center; gap:12px; padding:10px 12px; background:rgba(0,0,0,.18); border:1px solid var(--linie); border-radius:8px; cursor:pointer; }
@media (hover: hover) { .tb:hover { border-color:var(--akz-hell); background:rgba(242,201,76,.08); } }
.tb.voll { opacity:.55; cursor:default; }
.tb.laeuft { border-style:dashed; }
.tb-links { flex:1; min-width:0; }
.tb-kopf { display:flex; justify-content:space-between; font-weight:bold; font-size:16px; gap:8px; }
.tb-kopf .frei { color:var(--gruen); font-size:14px; white-space:nowrap; }
.tb-kopf .frei.aus { color:var(--text-3); }
.tb-sub { color:var(--text-2); font-size:13px; margin-top:3px; }
.tb-plaetze { display:flex; gap:2px; white-space:nowrap; }
.tb-plaetze .sgzi { width:16px; height:16px; }
.tb-plaetze .p-frei { opacity:.35; }
.tb-knopf { flex:none; padding:6px 14px; font-size:14px; }
.tb-route { display:inline-block; margin-left:6px; padding:0 7px; border-radius:7px; font-size:11.5px; font-weight:800; vertical-align:2px; color:var(--gold); background:rgba(255,216,107,.12); border:1px solid rgba(255,216,107,.6); }
:root[data-theme="light"] .tb-route { background:rgba(122,82,0,.08); border-color:rgba(122,82,0,.5); }
.lo-stat { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.st-k { flex:1 1 90px; background:rgba(0,0,0,.2); border:1px solid rgba(242,201,76,.22); border-radius:8px; padding:6px 8px; text-align:center; }
.st-k b { display:block; font-size:20px; color:var(--akz-hell); }
.st-k small { color:var(--text-3); font-size:12px; }
.ar { padding:8px 10px; background:rgba(0,0,0,.18); border-left:3px solid var(--text-3); border-radius:6px; font-size:14px; }
.ar.sieg { border-left-color:var(--gold); }
.ar.weg { border-left-color:var(--rot); opacity:.75; }
.ar-kopf { display:flex; justify-content:space-between; font-weight:bold; }
.ar-kopf .erg { color:var(--akz-hell); }
.ar-sub { color:var(--text-2); font-size:13px; margin-top:2px; }
.lo-fuss { display:flex; align-items:center; gap:10px; padding:12px 24px 16px; border-top:1px solid var(--linie); background:var(--panel); }
.lo-fuss-r { margin-left:auto; display:flex; gap:8px; }
.ti-mitte { flex:1; display:flex; gap:16px; padding:16px 24px; min-height:0; }
.ti-plaetze { flex:0 0 300px; display:flex; flex-direction:column; gap:7px; overflow:auto; }
.pl { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--panel); border:1px solid var(--linie); border-radius:8px; }
.pl.me { border-color:var(--akz-hell); }
.pl.bereit { box-shadow:inset 3px 0 0 var(--gruen); }
.pl.leer { opacity:.75; }
.pl.ki { opacity:.85; border-style:dashed; }
.pl .nm2 { flex:1; display:flex; flex-direction:column; font-weight:bold; font-size:16px; }
.pl .nm2 small { font-weight:normal; color:var(--text-3); font-size:13px; }
.pl .st { font-size:13px; color:var(--text-2); }
.ti-opts { flex:1; display:flex; flex-direction:column; gap:8px; overflow:auto; padding:12px 16px; border-radius:12px; background:var(--panel); border:1px solid var(--linie); }
.ti-opt { display:flex; flex-direction:column; gap:4px; font-size:15px; }
.ti-opt small { color:var(--text-3); font-size:12px; margin-left:6px; }
.ti-wahl { display:flex; gap:6px; flex-wrap:wrap; }
.ti-wahl button { background:rgba(0,0,0,.22); color:var(--text); border:1px solid var(--linie); border-radius:6px; padding:5px 12px; font-size:15px; }
:root[data-theme="light"] .ti-wahl button, :root[data-theme="light"] .lw-wahl button { background:rgba(255,255,240,.65); }
.ti-wahl button.an { background:rgba(242,201,76,.22); border-color:var(--akz-hell); color:var(--akz-hell); font-weight:700; }
.ti-wahl.aus button { pointer-events:none; opacity:.7; }
.ti-info { color:var(--text-2); font-size:14px; margin:6px 0 0; }
.ti-chat { flex:0 0 280px; padding:10px 12px; border-radius:12px; background:var(--panel); border:1px solid var(--linie); }
.lo-streifen { display:flex; align-items:center; gap:14px; margin:10px 24px 0; padding:9px 16px; border-radius:12px; background:linear-gradient(90deg, rgba(154,214,111,.2), rgba(242,201,76,.1)); border:1px solid var(--gruen); }
.lo-streifen.warten { background:linear-gradient(90deg, rgba(242,201,76,.2), rgba(134,192,240,.12)); border-color:var(--akz-hell); }
.ls-ico .sgzi { width:24px; height:24px; }
.ls-text { display:flex; flex-direction:column; font-size:15px; } .ls-text small { color:var(--text-2); font-size:13px; }
#ls-knopf { margin-left:auto; }
.lo-haupt { position:relative; flex:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; padding:12px 24px 16px; min-height:0; }
.lo-start { display:flex; flex-direction:column; gap:8px; min-height:0; padding:12px 16px; border-radius:14px; border:2px solid var(--akz);
  background:linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow:0 0 0 3px rgba(242,201,76,.1), 0 10px 30px rgba(0,0,0,.45); }
.lo-start .lo-label { margin:0; }
.lo-seg { display:flex; border:1px solid var(--akz); border-radius:10px; overflow:hidden; flex:none; }
.lo-seg button { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 6px; font-size:15px; font-weight:800; color:var(--text-2); background:rgba(0,0,0,.18); border:0; }
.lo-seg button + button { border-left:1px solid var(--linie); }
.lo-seg button.an { color:#2b2405; background:linear-gradient(#ffe08a, #d9a81f); }
.seg-ic .sgzi { width:19px; height:19px; vertical-align:-4px; }
.lo-optionen { flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow:row dense; align-content:start; column-gap:14px; row-gap:7px; }
.lo-optionen > .lw-paar { display:contents; }
.lo-optionen > :not(.lw-zeile, .lw-paar), .lo-optionen > .lw-zeile:is(.lw-breit, :has(.lw-name, .lw-ausgabe, .lw-wahl > :nth-child(6))), .lo-optionen > .lw-paar > .lw-zeile:is(.lw-breit, :has(.lw-wahl > :nth-child(6))) { grid-column:1 / -1; }
.lw-zeile { display:flex; flex-direction:column; gap:4px; }
.lw-titel { font-size:13px; color:var(--text-2); } .lw-titel b { color:var(--text); font-size:14px; }
.lw-wahl { display:flex; gap:5px; flex-wrap:wrap; }
.lw-wahl button { padding:5px 9px; border-radius:7px; font-size:14px; color:var(--text); background:rgba(0,0,0,.22); border:1px solid var(--linie); }
@media (hover: hover) { .lw-wahl button:hover { border-color:var(--akz-hell); } }
.lw-wahl button.an { background:rgba(242,201,76,.24); border-color:var(--akz-hell); color:var(--akz-hell); font-weight:800; }
.lw-ausgabe { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.lw-ausgabe button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:7px 10px 8px; border-radius:9px; text-align:left; color:var(--text-2);
  background:linear-gradient(160deg, rgba(150,90,30,.3), rgba(10,6,14,.6)); border:1px solid var(--linie); font-size:11.5px; line-height:1.3; }
:root[data-theme="light"] .lw-ausgabe button { background:linear-gradient(160deg, rgba(200,160,90,.25), rgba(255,255,240,.6)); }
.lw-ausgabe button b { font-size:15px; color:var(--text); font-family:var(--kopf); }
.lw-ausgabe button.an { border-color:var(--akz-hell); box-shadow:0 0 0 2px rgba(242,201,76,.35); color:var(--text); }
.lw-name { display:flex; gap:6px; }
.lw-name input { flex:1; min-width:0; padding:6px 12px; background:rgba(0,0,0,.3); color:var(--text); border:1px solid var(--akz); border-radius:8px; outline:none; font-size:16px; }
:root[data-theme="light"] .lw-name input { background:rgba(255,255,240,.8); }
.lw-wuerfel { width:40px; flex:none; padding:0; }
.lw-info { display:inline-flex; width:18px; height:18px; margin-left:5px; border-radius:50%; align-items:center; justify-content:center; font:800 11px/1 var(--sans); color:#2b2405;
  background:var(--akz-hell); border:0; vertical-align:1px; cursor:pointer; padding:0; }
:root[data-theme="light"] .lw-info { color:#fff8e6; }
.lw-box { font-size:12.5px; color:var(--text-2); line-height:1.45; background:rgba(242,201,76,.08); border:1px solid rgba(242,201,76,.26); border-radius:8px; padding:7px 10px; }
.nw { white-space:nowrap; }
.lo-los { flex:none; display:flex; flex-direction:column; gap:5px; }
.lw-anleitung { padding:8px 10px; border-radius:10px; background:linear-gradient(180deg, rgba(150,90,30,.2), rgba(10,6,14,.3)); border:1px solid rgba(242,201,76,.25); }
:root[data-theme="light"] .lw-anleitung { background:rgba(200,160,90,.14); }
.lw-an-titel { font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--akz-hell); margin-bottom:5px; font-weight:800; }
.lw-schritt { display:grid; grid-template-columns:20px minmax(0, 1fr); align-items:center; gap:8px; padding:3px 0; font-size:12.5px; line-height:1.35; color:var(--text-2); }
.lw-schritt > b { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#2b2405; background:var(--akz-hell); }
:root[data-theme="light"] .lw-schritt > b { color:#fff8e6; }
.lw-schritt span b { color:var(--text); }
.lo-los-hin { font-size:12.5px; color:var(--text-3); text-align:center; }
.lo-rechts { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:minmax(0, 1fr) 200px; gap:14px; min-height:0; }
.lo-rechts .lo-spieler, .lo-rechts .lo-chat { min-height:0; padding:10px 12px; border-radius:12px; border:1px solid var(--linie); background:linear-gradient(180deg, var(--panel2), var(--panel)); }

#partie { position:absolute; inset:0; z-index:2; }
.panel { position:absolute; background:var(--panel); backdrop-filter:blur(5px); border:1px solid var(--linie); border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,240,210,.06), 0 8px 24px rgba(0,0,0,.4); }
:root[data-theme="light"] .panel { box-shadow:inset 0 1px 0 #fff8, 0 6px 18px rgba(60,40,20,.22); }
.pt { font-size:11px; letter-spacing:3px; color:var(--dim); margin:2px 4px 6px; text-transform:uppercase; font-weight:800; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.pt-r { letter-spacing:0; text-transform:none; font-size:12px; color:var(--text-2); }
#kopf { left:12px; right:12px; top:10px; height:56px; display:flex; align-items:center; gap:14px; padding:0 12px 0 14px; z-index:5; }
.logo { font-family:var(--kopf); font-weight:900; font-size:22px; letter-spacing:3px; color:var(--akz); text-shadow:0 2px 0 rgba(0,0,0,.6); line-height:1; white-space:nowrap; }
:root[data-theme="light"] .logo { text-shadow:none; }
.logo small { display:block; font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:2px; color:var(--dim); margin-top:3px; }
.trenner { width:1px; align-self:stretch; margin:10px 0; background:var(--linie); }
.runde { font-size:11px; letter-spacing:2px; color:var(--dim); white-space:nowrap; text-transform:uppercase; font-weight:700; }
.runde b { display:block; font-family:var(--kopf); font-size:19px; letter-spacing:0; color:var(--text); }
.k-phase { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--text-2); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-phase b { color:var(--text); }
.h-dot { display:inline-block; width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 1px #0008; }
.rechts { margin-left:auto; display:flex; align-items:center; gap:8px; }
.uhr { display:inline-flex; align-items:center; gap:6px; font-family:var(--kopf); font-weight:700; font-size:20px; line-height:1; padding:6px 12px 6px 9px; border-radius:18px;
  background:var(--uf, var(--gold)); color:var(--ut, #1a1206); border:1px solid rgba(0,0,0,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.35); white-space:nowrap; }
.uhr .sgzi { width:18px; height:18px; }
.uhr.knapp { box-shadow:0 0 0 3px var(--rot), 0 2px 6px rgba(0,0,0,.35); animation:puls .8s infinite alternate; }
@keyframes puls { to { opacity:.55; } }
.knopf { display:inline-flex; align-items:center; gap:6px; font-weight:800; letter-spacing:.3px; font-size:15px; color:#2b2405; cursor:pointer; padding:9px 15px; border-radius:8px;
  border:1px solid #fff0bd; background:linear-gradient(#ffe08a, #d9a81f); box-shadow:0 2px 0 #6a5006, inset 0 1px 0 #fff6; white-space:nowrap; }
.knopf.leise { color:var(--text); background:var(--panel2); border-color:var(--linie); box-shadow:none; }
.knopf.rot { color:#fff4ee; background:linear-gradient(#e06a52, #a8301e); border-color:#ffc0b0; box-shadow:0 2px 0 #5a1608, inset 0 1px 0 #fff4; }
.knopf.klein { padding:5px 10px; font-size:13.5px; }
.knopf .sgzi { width:16px; height:16px; }
.knopf.lockt { animation:lockt 1s ease-in-out infinite alternate; }
@keyframes lockt { to { box-shadow:0 0 0 4px rgba(255,224,138,.5), 0 2px 0 #6a5006; } }
.warn { color:var(--rot); font-weight:800; }


.st-k { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:3px; min-width:0; padding:8px 12px 9px; border-radius:10px; background:rgba(0,0,0,.2); border:1px solid var(--linie); border-left:4px solid var(--linie); }
:root[data-theme="light"] .st-k { background:rgba(255,255,240,.6); }
.st-k small { font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:800; color:var(--dim); }
.st-k b { display:flex; align-items:center; gap:6px; font-size:18px; line-height:1.15; color:var(--text); }
.st-k b .sgzi { width:18px; height:18px; }
.klau-show { animation:klauDreh 1.3s ease-in-out forwards; z-index:2; }
@keyframes klauDreh { 0% { transform:scale(1) rotate(0); } 35% { transform:scale(1.2) rotate(220deg); } 65% { transform:scale(1.12) rotate(360deg); } 80% { transform:scale(1.22) rotate(370deg); } 100% { transform:scale(1) rotate(360deg); } }


#pchat { flex:1; min-height:110px; padding:6px 8px 8px; display:flex; flex-direction:column; }
#pchatwin { font-size:12.5px; padding:5px 7px; }
#pchatin { margin-top:6px; padding:6px 9px; }
.pc-knoepfe { display:flex; gap:5px; margin-top:5px; }
.pc-knoepfe button { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; font-size:12.5px; padding:4px; color:var(--text); background:var(--panel2); border:1px solid var(--linie); border-radius:6px; }
.pc-knoepfe .sgzi { width:15px; height:15px; }
.ch-tabs { display:flex; gap:4px; margin-bottom:6px; }
.ch-tabs button { flex:1; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--dim); background:transparent; border:1px solid transparent; border-radius:6px; padding:5px; }
.ch-tabs button.an { color:var(--text); background:var(--panel2); border-color:var(--linie); }
#ch-neu { color:var(--rot); }
.ch-liste { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; font-size:12px; line-height:1.35; display:flex; flex-direction:column; gap:3px; user-select:text; }
.ch-z { padding:3px 7px; border-left:3px solid var(--rf, var(--akz)); background:rgba(0,0,0,.18); border-radius:0 5px 5px 0; color:var(--text-2); }
:root[data-theme="light"] .ch-z { background:rgba(255,255,240,.55); }
.ch-z b { color:var(--text); }
.ch-z.gut { color:#d6f0b8; }
.ch-z.schlecht { color:#ffc8b8; }
:root[data-theme="light"] .ch-z.gut { color:#2f6a1c; }
:root[data-theme="light"] .ch-z.schlecht { color:#9c2a1a; }
.ch-z.runde { border-left-color:transparent; background:transparent; color:var(--dim); font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:800; padding-top:6px; }
.ch-chat { flex:1; display:flex; flex-direction:column; min-height:0; }

#flug { position:absolute; inset:0; z-index:60; pointer-events:none; }
.flieger { position:absolute; display:flex; align-items:center; justify-content:center; transform-origin:center; will-change:transform; }
.funken { position:absolute; width:0; height:0; }
.funken i { position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:#ffe08a; animation:funke .8s ease-out forwards; transform:rotate(var(--a)) translateX(10px); }
@keyframes funke { to { transform:rotate(var(--a)) translateX(46px) scale(.3); opacity:0; } }

#ansicht-menu { right:12px; top:72px; padding:10px 12px; z-index:40; width:300px; display:flex; flex-direction:column; gap:6px; }
#ansicht-menu label { display:flex; align-items:flex-start; gap:9px; font-size:14px; cursor:pointer; padding:3px 0; }
#ansicht-menu label small { display:block; font-size:12px; color:var(--dim); }
#ansicht-menu input { width:18px; height:18px; margin-top:1px; accent-color:var(--akz); flex:none; }
#ansicht-menu .am-t { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--dim); font-weight:800; margin-top:4px; }
.am-reihe { display:flex; gap:6px; }
.meldung { padding:9px 18px; border-radius:9px; background:rgba(110,36,20,.95); border:1px solid #ffb8a3; color:#fff; font-size:15px; font-weight:700; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.45);
  max-height:120px; overflow:hidden; animation:meldungRein .45s ease-out; transition:opacity .6s, max-height .6s, padding .6s, margin .6s, border-width .6s; }
.meldung.neutral { background:var(--panel-solid); border-color:var(--akz-hell); color:var(--text); }
.meldung.weg { opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:-6px; border-width:0; }
@keyframes meldungRein { from { opacity:0; max-height:0; padding-top:0; padding-bottom:0; transform:translateY(-10px); } to { opacity:1; max-height:120px; transform:none; } }
.pl-farbe { display:block; width:10px; height:28px; border-radius:4px; flex:none; box-shadow:0 0 0 1px #0006; }
.banner.an { transform:translate(-50%, -50%) scale(1); opacity:1; }
.bn-titel { font-family:var(--kopf); font-weight:900; font-size:42px; letter-spacing:4px; color:var(--akz-hell); text-shadow:0 3px 0 rgba(0,0,0,.6); }
:root[data-theme="light"] .bn-titel { text-shadow:none; }
.bn-unter { margin-top:6px; font-size:15px; font-weight:800; letter-spacing:1.5px; color:var(--text); text-transform:uppercase; }
.banner.gold { background:linear-gradient(180deg, #fbe7a6, #c99a2e); border-color:#fff3cf; }
.banner.gold .bn-titel { color:#2a1d04; text-shadow:none; } .banner.gold .bn-unter { color:#3a2a08; }
.banner.klein { top:22%; min-width:0; padding:10px 24px 9px; }
.banner.klein .bn-titel { font-size:26px; letter-spacing:2px; }
.konfetti { position:absolute; top:-24px; width:16px; height:12px; border-radius:50% 50% 50% 0; z-index:76; pointer-events:none; box-shadow:inset -2px -2px 0 rgba(0,0,0,.15); animation:fallen 3s ease-in forwards; }
@keyframes fallen { to { transform:translateY(860px) rotate(540deg); opacity:.2; } }

.overlay { position:absolute; inset:0; background:var(--scrim); display:flex; align-items:center; justify-content:center; z-index:80; }
.ov-box { max-width:640px; max-height:92%; overflow:auto; background:linear-gradient(180deg, var(--ov-a), var(--ov-b)); border:2px solid var(--akz); border-radius:12px; padding:20px 26px; box-shadow:0 14px 40px rgba(0,0,0,.6); }
.ov-box.ov-breit { max-width:960px; width:92%; }
.ov-titel { font-family:var(--kopf); font-size:26px; font-weight:900; color:var(--akz-hell); text-align:center; margin-bottom:8px; letter-spacing:2px; }
.ov-knoepfe { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
#pop-text { font-size:16px; line-height:1.5; color:var(--text); white-space:pre-line; }
.en-unter { text-align:center; color:var(--text-2); font-size:15px; margin-bottom:12px; }
.en-liste { display:flex; flex-direction:column; gap:7px; }
.en-platz { display:grid; grid-template-columns:44px 30px minmax(0, 1fr) 70px 56px 66px 90px 70px; align-items:center; gap:10px; padding:8px 14px; background:rgba(0,0,0,.2); border:1px solid var(--linie); border-radius:10px; font-size:15px; }
:root[data-theme="light"] .en-platz { background:rgba(255,255,240,.55); }
.en-platz.kopf { background:transparent; border-color:transparent; padding-top:0; padding-bottom:0; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--dim); font-weight:800; }
.en-platz.p1 { border-color:var(--gold); background:rgba(255,216,107,.12); }
.en-platz.ich { outline:1px solid var(--akz-hell); }
.en-platz .pz { font-family:var(--kopf); font-size:22px; font-weight:900; text-align:center; color:var(--text-2); }
.medaille { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; font:900 17px/1 var(--kopf); color:#2b2405;
  box-shadow:inset 0 2px 0 #fff8, inset 0 -3px 0 #0003, 0 2px 4px #0006; border:1px solid #0006; }
.medaille.m1 { background:radial-gradient(circle at 35% 30%, #fff3b0, #f2c531 55%, #9a7414); }
.medaille.m2 { background:radial-gradient(circle at 35% 30%, #ffffff, #c9d1d6 55%, #6f7c84); }
.medaille.m3 { background:radial-gradient(circle at 35% 30%, #ffd9b0, #d08a4a 55%, #7a4416); }
.en-platz .nmx { font-weight:bold; line-height:1.15; min-width:0; overflow-wrap:anywhere; } .en-platz .nmx small { display:block; font-weight:500; font-size:12.5px; color:var(--dim); }
.en-platz .w { text-align:right; font-variant-numeric:tabular-nums; }
.en-platz .w b { font-family:var(--kopf); font-size:18px; color:var(--text); }
.en-platz .pk b { color:var(--gold); }
.en-einladung { margin:10px 0 0; padding:8px 12px; border-radius:10px; text-align:center; font-size:15px; background:rgba(154,214,111,.14); border:1px solid var(--gruen); color:var(--text); }
.hilfe-text { font-size:15px; line-height:1.55; color:var(--text); max-height:600px; overflow:auto; user-select:text; }
.hilfe-text h1, .hilfe-text h2, .hilfe-text h3 { font-family:var(--kopf); color:var(--akz-hell); margin:14px 0 6px; }
.hilfe-text h1 { margin-top:0; }
.hilfe-text table { border-collapse:collapse; font-size:14px; } .hilfe-text td, .hilfe-text th { border-bottom:1px solid var(--linie); padding:3px 8px; text-align:left; }
#note { position:absolute; left:50%; top:10px; transform:translateX(-50%); background:rgba(150,40,20,.95); color:#fff; padding:8px 16px; border-radius:8px; z-index:99; }
.en-platz { grid-template-columns:44px 14px minmax(0, 1fr) 64px 64px 66px 84px 96px; }
.en-platz .pk small { display:block; font-size:11.5px; font-weight:600; color:var(--dim); white-space:nowrap; font-family:var(--sans); }
.konfetti { border-radius:2px; width:10px; height:14px; }

#stage.hoch .lo-haupt { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); }
#stage.hoch .lo-rechts { grid-template-rows:minmax(0, 1fr) 200px; }
#stage.hoch .lo-streifen { margin:10px 16px 0; }
#stage.hoch .lo-raum { display:none; }
#stage.hoch .ti-mitte { flex-wrap:wrap; }
#stage.hoch .ti-plaetze { flex:1 1 100%; max-height:300px; }
#stage.hoch .ti-chat { flex:1 1 100%; min-height:220px; }
#stage.hoch #kopf { height:70px; gap:10px; }
#stage.hoch #kopf .logo, #stage.hoch #kopf .trenner:first-of-type { display:none; }
#stage.hoch #kopf .kb-ic { width:56px; height:50px; }
#stage.hoch #kopf .kb-ic .sgzi { width:26px; height:26px; }
#stage.hoch .k-phase { font-size:21px; }
#stage.hoch .runde { font-size:14px; }
#stage.hoch .runde b { font-size:24px; }
#stage.hoch .uhr { font-size:24px; padding:7px 13px 7px 10px; }
#stage.hoch .uhr .sgzi { width:22px; height:22px; }
#stage.hoch .knopf { font-size:19px; padding:10px 16px; }
#stage.hoch .ch-liste { font-size:16px; }
#stage.hoch .ch-tabs button { font-size:15px; padding:8px; }
#stage.hoch .ch-z.runde { font-size:14px; }
#stage.hoch #pchatwin { font-size:17px; }
#stage.hoch #pchatin { font-size:20px; padding:9px 12px; }
#stage.hoch .pc-knoepfe button { font-size:18px; padding:8px; }
#stage.hoch .pc-knoepfe .sgzi { width:20px; height:20px; }
#stage.hoch .meldung { font-size:21px; }
#stage.hoch .banner { min-width:0; width:86%; top:36%; }
#stage.hoch .bn-unter { font-size:19px; }
#stage.hoch .en-platz { grid-template-columns:36px 12px minmax(0, 1fr) 60px 66px 100px; }
#stage.hoch .en-platz .nur-quer { display:none; }
#stage.hoch .en-platz .pk small { font-size:13px; }

@media (pointer: coarse) {
  .kb-ic { width:50px; height:44px; }
  .lw-wahl:not(.lw-ausgabe) button, .ti-wahl button { min-height:40px; min-width:40px; padding:8px 13px; font-size:15px; }
  .kb { min-height:42px; }
  .knopf { min-height:42px; }
  .pc-knoepfe button { min-height:40px; }
  .ch-tabs button { min-height:40px; }
  button.lw-info { width:40px; height:36px; margin:-9px -11px -9px -6px; border-radius:18px; background:radial-gradient(circle at center, var(--akz-hell) 0 9px, transparent 9.5px); }
}



#spieltisch { position:absolute; left:22px; top:84px; width:var(--tw, 860px); height:var(--th, 692px); border-radius:18px; border:11px solid var(--kante);
  background:linear-gradient(160deg, rgba(255,240,200,.10), rgba(0,0,0,.18)), var(--flaeche) center/cover, #2e4a34;
  box-shadow:inset 0 0 0 2px var(--kante-licht), inset 0 0 40px rgba(0,0,0,.45), 0 7px 0 var(--kante), 0 26px 46px rgba(0,0,0,.6); }
#gegner { position:absolute; left:10px; right:10px; top:8px; height:66px; display:flex; gap:8px; justify-content:center; align-items:stretch; }
.ns { position:relative; flex:0 1 210px; min-width:0; display:flex; align-items:center; gap:8px; padding:5px 9px 5px 12px; border-radius:9px; cursor:pointer; text-align:left; font:inherit;
  color:var(--papier-t); background:linear-gradient(180deg, #f6eedc, #ddd0b2); border:2px solid #8a7a5a; box-shadow:inset 6px 0 0 var(--sf), inset 0 1px 0 #fff8, 0 4px 8px rgba(0,0,0,.45); }
.ns.gezeigt { border-color:var(--sf); box-shadow:inset 6px 0 0 var(--sf), 0 0 0 3px var(--sf), 0 4px 10px rgba(0,0,0,.5); }
.ns.dran { background:linear-gradient(180deg, #fff6d8, #f0d896); }
.ns.weg { filter:grayscale(.5) brightness(.85); }
.ns-haus { flex:none; display:grid; grid-template-columns:repeat(3, 12px); grid-auto-rows:12px; gap:2px; padding:3px; background:#b8a682; border-radius:3px 3px 2px 2px; box-shadow:inset 0 0 0 1px #6a5a3a; }
.ns-haus i { display:block; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
.ns-txt { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ns-nm { font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ns-nm .fa-ki .sgzi { width:14px; height:14px; }
.ns-z { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; white-space:nowrap; }
.ns-sl { display:inline-flex; align-items:center; gap:2px; } .ns-sl .kzs { width:18px; height:18px; }
.ns-pk { color:#5a3a10; }
.ns-dran { position:absolute; right:5px; bottom:3px; padding:1px 7px; border-radius:8px; font-size:11.5px; font-weight:800; color:#2a1a02; background:var(--akz-hell); box-shadow:0 2px 4px rgba(0,0,0,.35); }
.mp-tafel { display:flex; align-items:center; gap:18px; padding:8px 18px; border-radius:10px; color:var(--papier-t); background:linear-gradient(180deg, #f6eedc, #ddd0b2); border:2px solid #8a7a5a; font-size:15px; box-shadow:0 4px 8px rgba(0,0,0,.4); }
.mp-tafel b .sgzi { width:18px; height:18px; } .mp-tafel .mp-nb { color:#6a3a5a; font-weight:700; }

#markt { position:absolute; left:12px; top:88px; width:var(--mw, 470px); height:calc(2.78 * var(--cw, 90px) + 14px); display:flex; flex-direction:column; gap:14px; }
.mr { position:relative; height:calc(1.39 * var(--cw, 90px)); display:flex; gap:8px; align-items:center; padding-left:52px; transition:filter .4s; }
.mr:not(.aktiv) { filter:saturate(.55) brightness(.78); }
.mr.weg { filter:grayscale(.8) brightness(.6); }
.mr-schild { position:absolute; left:0; top:0; bottom:0; width:44px; display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:8px; border-radius:7px;
  background:linear-gradient(90deg, #c49a42, #e8c878 40%, #f6e2a8 55%, #e8c878 70%, #bf9440); border:1px solid var(--messing-d); box-shadow:0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 #fff6; color:#1e1204; }
.mr-schild .kzs { width:28px; height:28px; }
.mr-schild span { writing-mode:vertical-rl; transform:rotate(180deg); font:900 13px/1 var(--kopf); letter-spacing:.5px; }
.mr.aktiv .mr-schild { box-shadow:0 0 0 3px var(--wahl), 0 0 16px rgba(255,210,122,.6); }
.mr-weg { position:absolute; left:52px; right:0; top:50%; transform:translateY(-50%); text-align:center; font:900 18px/1.2 var(--kopf); color:#fff2d0; text-shadow:0 2px 3px #000; }
.stp, .ms { position:relative; flex:none; width:var(--cw, 90px); height:calc(1.39 * var(--cw, 90px)); border-radius:8px; }
.stp { box-shadow:1px 1px 0 #2a1a0a, 2px 2px 0 #4a3020, 3px 3px 0 #2a1a0a, calc(var(--dicke, 4px) + 2px) calc(var(--dicke, 4px) + 3px) 8px rgba(0,0,0,.55); }
.stp small, .abl small { position:absolute; right:3px; bottom:3px; min-width:24px; padding:1px 5px; border-radius:8px; text-align:center; font-size:13px; font-weight:800; color:#fff6e0; background:rgba(20,12,6,.82); z-index:3; }
.stp-leer, .abl-leer { position:absolute; inset:0; border-radius:8px; border:2px dashed rgba(255,240,210,.45); }
.ms.leer { border:2px dashed rgba(255,240,210,.35); }
.ms { box-shadow:2px 4px 8px rgba(0,0,0,.5); }
.ms.kann { cursor:pointer; }
@media (hover: hover) { .ms.kann:hover .kt { transform:translateY(-4px); box-shadow:0 8px 14px rgba(0,0,0,.55); } }
.ms.an .kt { box-shadow:0 0 0 4px var(--wahl), 0 0 20px rgba(255,210,122,.7); transform:translateY(-4px); }
.ms.rat .kt { box-shadow:0 0 0 4px var(--rat), 0 0 18px rgba(127,208,255,.6); }
.ms.teuer .kt-preis { filter:grayscale(.3); }
.ms.teuer .kt-preis b { color:#b4232f; }
.rat-marke { position:absolute; right:-8px; top:-8px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--rat); color:#06243a; z-index:4; box-shadow:0 2px 4px #0008; }
.rat-marke .sgzi { width:16px; height:16px; }
.abl { position:relative; flex:none; width:calc(.62 * var(--cw, 90px)); height:calc(.86 * var(--cw, 90px)); border-radius:6px; align-self:center;
  box-shadow:1px 1px 0 #2a1a0a, calc(var(--dicke, 2px) + 1px) calc(var(--dicke, 2px) + 2px) 6px rgba(0,0,0,.5); transform:rotate(4deg); }
.bote { position:absolute; left:-4px; width:52px; height:78px; z-index:6; pointer-events:auto; transition:top .7s cubic-bezier(.4,.1,.3,1); filter:drop-shadow(2px 4px 3px rgba(0,0,0,.5)); }
.bote svg { width:100%; height:100%; display:block; }
.bote.bv { top:calc(1.39 * var(--cw, 90px) - 82px); }
.bote.bh { top:calc(2.78 * var(--cw, 90px) + 14px - 82px); }
@media (prefers-reduced-motion: reduce) { .bote { transition:none; } }

.kt { position:absolute; inset:0; display:block; border-radius:8px; overflow:hidden; border:3px solid var(--rc); background:#2a2420; container-type:size; transition:transform .15s, box-shadow .15s; }
.kt img, .kt .ers { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.kt-preis { position:absolute; left:3%; top:2%; width:34cqw; z-index:2; }
.kt-preis .mz { width:100%; }
.kt-preis.rabatt .mz { filter:drop-shadow(0 0 3px #7fd07f); }
.kt-stand { position:absolute; right:0; top:0; width:28cqw; height:28cqw; display:flex; align-items:center; justify-content:center; background:var(--sc); border-bottom-left-radius:45%; box-shadow:-1px 1px 3px rgba(0,0,0,.4); }
.kt-stand .kzs { width:68%; height:68%; }
.kt-pfeil { position:absolute; right:3%; top:30cqw; width:26cqw; height:26cqw; filter:drop-shadow(0 1px 2px #000a); }
.kt-pfeil .kzs { width:100%; height:100%; }
.kt-so { position:absolute; left:4%; right:4%; bottom:29cqh; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 5px; padding:1cqh 2cqw; border-radius:6px;
  background:rgba(246,238,220,.92); color:#2a1a0a; font:900 13cqw/1.05 var(--kopf); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.kt-so small { font:700 8.5cqw/1 var(--sans); }
.kt-w { position:absolute; left:0; right:0; bottom:0; height:25cqh; display:flex; align-items:center; justify-content:center; gap:1px; padding:0 3%;
  background:linear-gradient(180deg, var(--papier), var(--papier-2)); border-top:3px solid var(--sc); color:var(--papier-t); font:900 15cqw/1 var(--kopf); white-space:nowrap; }
.kt-w b { font-size:1.12em; } .kt-w i { font-style:normal; color:var(--papier-t2); }
.kt-w .spar { margin-left:2px; }
.kt-w .kreuz { display:inline-flex; } .kt-w .ohne { position:relative; display:inline-flex; margin-left:2px; }
.kt-w .ohne::after { content:''; position:absolute; left:-2px; right:-2px; top:50%; height:2px; background:#b4232f; transform:rotate(-30deg); }
.kt-nm { position:absolute; left:0; right:0; bottom:25cqh; padding:3cqh 3% 1.5cqh; text-align:center; font:800 9cqw/1.1 var(--sans); color:#fff8ea; text-shadow:0 1px 2px #000, 0 0 4px #000; background:linear-gradient(transparent, rgba(0,0,0,.55)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kt-so ~ .kt-nm { display:none; }
.kzs { width:1.05em; height:1.05em; flex:none; display:inline-block; vertical-align:middle; }
.mz { position:relative; display:inline-flex; align-items:center; justify-content:center; width:1.15em; aspect-ratio:1; vertical-align:middle; }
.mz .kzs { position:absolute; inset:0; width:100%; height:100%; }
.mz b { position:relative; font:900 .62em/1 var(--kopf); color:#3a2602; margin-top:-.08em; }
.kt-preis .mz b { font-size:15cqw; }
.ics { display:inline-flex; } .ics .kzs { width:1.05em; height:1.05em; }
.kr { position:absolute; inset:0; display:block; border-radius:8px; overflow:hidden; border:3px solid #c9a24c; background:#2a2420; }
.kr.rh { border-color:#9a5a3a; }
.kr img, .kr .ers { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.kr-ic { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:38%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(20,12,6,.6); }
.kr-ic .kzs { width:70%; height:70%; }
.kr-bett { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:46%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(244,236,216,.85); }
.kr-bett .kzs { width:80%; height:80%; }
.kr.mini { position:relative; display:inline-block; width:16px; height:22px; border-width:1px; border-radius:3px; vertical-align:-5px; } .kr.mini .kr-ic { display:none; }
.kt.klein .kt-w { height:30cqh; font-size:17cqw; }
.kt-flug { position:absolute; inset:0; display:block; } .kt-flug .kt, .kt-flug .kr { position:absolute; inset:0; }

#haus { position:absolute; right:12px; top:84px; width:var(--fw, 370px); bottom:12px; display:flex; flex-direction:column; gap:6px; }
.haus-kopf { flex:none; height:36px; display:flex; align-items:center; gap:10px; padding:0 10px; border-radius:8px; color:var(--papier-t); background:linear-gradient(180deg, #f6eedc, #ddd0b2); border:2px solid var(--sf); box-shadow:0 3px 6px rgba(0,0,0,.4); }
.hk-nm { font:900 17px/1 var(--kopf); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.hk-pk { margin-left:auto; font-size:14px; white-space:nowrap; } .hk-pk b { font:900 19px/1 var(--kopf); color:#5a3a10; }
.haus-kopf .knopf { flex:none; }
.fassade { position:relative; flex:none; padding:0 10px 0 34px; border-radius:6px 6px 3px 3px;
  background:repeating-linear-gradient(0deg, transparent 0 22px, rgba(0,0,0,.05) 22px 23px), linear-gradient(180deg, var(--fassade), var(--fassade-d)); border:2px solid var(--fassade-d);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.18), 10px 16px 24px rgba(0,0,0,.55); }
.dach { position:relative; height:calc(.36 * var(--hw, 100px)); margin:0 -12px 8px -36px; background:linear-gradient(180deg, var(--dach), var(--dach-d)); clip-path:polygon(4% 100%, 12% 0, 88% 0, 96% 100%); }
.dach i { position:absolute; bottom:60%; width:18px; height:calc(.3 * var(--hw, 100px)); background:var(--dach-d); }
.dach i:first-child { left:22%; } .dach i:last-child { right:24%; }
.dach i::after { content:''; position:absolute; left:2px; bottom:100%; width:14px; height:40px; background:radial-gradient(ellipse at 50% 100%, rgba(220,220,220,.45), transparent 70%); animation:rauch 6s ease-in-out infinite; transform-origin:bottom; }
@keyframes rauch { 0%, 100% { transform:translateX(0) scaleY(.8); opacity:.55; } 50% { transform:translateX(5px) scaleY(1.15); opacity:.25; } }
@media (prefers-reduced-motion: reduce) { .dach i::after { animation:none; } }
.etagen { position:absolute; left:3px; top:calc(.36 * var(--hw, 100px) + 8px); width:24px; display:flex; flex-direction:column; gap:8px; }
.etagen span { height:calc(1.25 * var(--hw, 100px)); writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; font:800 12px/1 var(--sans); letter-spacing:1px; color:var(--papier-t2); }
.fenster { display:grid; grid-template-columns:repeat(3, var(--hw, 100px)); grid-auto-rows:calc(1.25 * var(--hw, 100px)); gap:8px; padding-bottom:10px; }
.sockel { height:14px; margin:0 -12px 0 -36px; background:linear-gradient(180deg, #6a5a48, #3e3226); border-radius:0 0 3px 3px; }
.wo { position:relative; border-radius:calc(.5 * var(--hw, 100px)) calc(.5 * var(--hw, 100px)) 4px 4px / 22px 22px 4px 4px; padding:4px; background:#f0e6cc; box-shadow:inset 0 0 0 2px #b8a682, 2px 3px 5px rgba(0,0,0,.35); }
.wo .kt, .wo .kr { inset:4px; border-radius:calc(.45 * var(--hw, 100px)) calc(.45 * var(--hw, 100px)) 3px 3px / 18px 18px 3px 3px; }
.wo.leer .wo-rahmen { position:absolute; inset:4px; border-radius:inherit; background:linear-gradient(180deg, transparent 47%, #e8dcc0 47% 53%, transparent 53%), linear-gradient(90deg, transparent 47%, #e8dcc0 47% 53%, transparent 53%),
  radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.18), transparent 50%), var(--fenster); box-shadow:inset 0 3px 8px rgba(0,0,0,.5); }
.wo.kann { cursor:pointer; box-shadow:inset 0 0 0 2px #b8a682, 0 0 0 4px var(--wahl), 0 0 22px rgba(255,210,122,.75); animation:lockt2 1.1s ease-in-out infinite alternate; }
.wo.kann .wo-rahmen { background:linear-gradient(180deg, transparent 47%, #e8dcc0 47% 53%, transparent 53%), linear-gradient(90deg, transparent 47%, #e8dcc0 47% 53%, transparent 53%), radial-gradient(ellipse at 50% 60%, var(--fenster-licht), #b0822a 75%); }
.wo.rat { box-shadow:inset 0 0 0 2px #b8a682, 0 0 0 4px var(--rat), 0 0 20px rgba(127,208,255,.7); }
@keyframes lockt2 { to { box-shadow:inset 0 0 0 2px #b8a682, 0 0 0 4px var(--wahl), 0 0 8px rgba(255,210,122,.3); } }
@media (prefers-reduced-motion: reduce) { .wo.kann { animation:none; } }
.wo-vor { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:46px; padding:4px 8px; border-radius:12px; text-align:center; font:900 21px/1 var(--kopf); color:#fff; background:var(--plus); box-shadow:0 2px 6px rgba(0,0,0,.5); z-index:2; }
.wo-vor.minus { background:var(--minus); }
.wo-p { position:absolute; right:-6px; top:-6px; min-width:28px; height:28px; padding:0 5px; border-radius:14px; display:flex; align-items:center; justify-content:center; font:900 16px/1 var(--kopf); color:#2a1a02; background:linear-gradient(180deg, #fbe7a6, #d9a830); border:1px solid #6a4a10; box-shadow:0 2px 4px rgba(0,0,0,.45); z-index:3; }
.wo-p.null { background:linear-gradient(180deg, #e8e0d0, #b8ac98); color:#4a3e2e; }

#aktion { position:absolute; left:12px; bottom:12px; width:var(--mw, 470px); height:var(--ak, 128px); padding:7px 14px; display:flex; flex-direction:column; justify-content:center; gap:5px; overflow:hidden;
  color:var(--papier-t); background:linear-gradient(180deg, rgba(255,255,255,.25), transparent 30%), repeating-linear-gradient(180deg, transparent 0 25px, rgba(90,120,170,.18) 25px 26px), var(--papier);
  border-radius:3px; box-shadow:0 1px 0 #fff8 inset, 4px 8px 14px rgba(0,0,0,.5); }
.l-text { font-size:15px; line-height:1.4; } .l-text b { color:#1a1006; } .l-text .warn { color:#a8301e; }
.l-knoepfe { display:flex; flex-wrap:wrap; gap:8px; }
.l-knoepfe .knopf .kzs, .l-knoepfe .knopf .mz { width:20px; height:20px; }
.knopf.aus { filter:grayscale(.8); opacity:.55; border-style:dashed; cursor:not-allowed; }

#ich { position:absolute; right:14px; top:84px; width:var(--sw, 290px); height:268px; padding:10px 12px; border-radius:10px; color:var(--holz-t);
  background:repeating-linear-gradient(92deg, rgba(0,0,0,.06) 0 3px, transparent 3px 11px), linear-gradient(180deg, var(--holz-a), var(--holz-b)); border:2px solid #2a1a0a;
  box-shadow:inset 0 1px 0 rgba(255,230,190,.25), 0 10px 22px rgba(0,0,0,.55); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto 1fr; gap:8px; }
#ich.dran { box-shadow:0 0 0 3px var(--akz-hell), 0 10px 22px rgba(0,0,0,.55); }
.ich-zu { grid-column:1 / -1; font-size:15px; }
.ich-kasse { display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:8px; background:rgba(0,0,0,.25); }
.ich-kasse .mz { width:30px; } .ich-kasse > b { font:900 28px/1 var(--kopf); } .ich-kasse small { font-size:13px; opacity:.85; }
.ich-rab { display:flex; flex-direction:column; justify-content:center; gap:2px; padding:4px 8px; border-radius:8px; background:rgba(0,0,0,.25); font-size:14px; font-weight:800; }
.ich-rab small { font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; opacity:.85; }
.ich-rab span { display:inline-flex; align-items:center; gap:4px; } .ich-rab .kzs { width:18px; height:18px; }
.ich-brett { grid-column:1 / -1; position:relative; display:flex; flex-direction:column; gap:2px; padding:5px 8px; border-radius:8px; background:rgba(0,0,0,.22); }
.ich-brett small { font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; opacity:.85; }
.haken-reihe { display:flex; align-items:flex-start; gap:4px; min-height:34px; padding-top:4px; border-top:3px solid #2a1a0a; }
.haken { position:relative; width:24px; height:32px; } .haken::before { content:''; position:absolute; left:10px; top:-6px; width:4px; height:8px; background:#b89a5a; border-radius:2px; }
.haken .kzs { width:24px; height:30px; transform:rotate(90deg); }
.haken-reihe .leer { font-style:normal; font-size:13px; opacity:.7; padding-top:6px; }
.ich-sl { position:absolute; right:10px; top:6px; font:900 24px/1 var(--kopf); }
.ich-knoepfe { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; }
.ich-knoepfe .knopf { flex:1 1 46%; justify-content:center; font-size:13.5px; padding:7px 8px; white-space:normal; line-height:1.15; }
.ich-knoepfe .knopf .kzs { width:20px; height:20px; }
.rat-knopf { background:linear-gradient(#bfe6ff, #5aa8e0); border-color:#e6f6ff; color:#06243a; box-shadow:0 2px 0 #1a4a6a, inset 0 1px 0 #fff6; }
#pchat { right:14px; top:366px; width:var(--sw, 290px); bottom:190px; }

#hinweise { position:absolute; left:22px; width:var(--tw, 860px); bottom:calc(36px + var(--ak, 128px) + 14px); z-index:55; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.meldung { max-width:78%; }
.banner { position:absolute; left:50%; top:42%; transform:translate(-50%, -50%) scale(.9); opacity:0; z-index:70; min-width:460px; padding:18px 34px 16px; border-radius:14px; text-align:center;
  background:linear-gradient(180deg, var(--ov-a), var(--ov-b)); border:2px solid var(--akz); box-shadow:0 14px 40px rgba(0,0,0,.6); transition:transform .3s, opacity .3s; pointer-events:none; }
.sz-plus { color:#2f7a2a; }
.en-platz { grid-template-columns:44px 52px minmax(0, 1fr) 70px 70px 70px 96px; }
.en-haus { display:grid; grid-template-columns:repeat(3, 14px); grid-auto-rows:14px; gap:2px; padding:3px; background:#b8a682; border-radius:3px; }
.en-haus i { display:block; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
.en-liste-t { margin-top:12px; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); font-weight:800; }
.en-zeile { display:grid; grid-template-columns:36px 1fr auto; gap:8px; padding:4px 10px; border-bottom:1px solid var(--linie); font-size:15px; } .en-zeile.ich { color:var(--gold); font-weight:800; }
.en-regel { margin:10px 0 0; font-size:13px; color:var(--text-3); text-align:center; }
#en-zurueck { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:85; display:flex; gap:10px; padding:8px 10px; border-radius:14px; background:rgba(0,0,0,.74); box-shadow:0 6px 20px rgba(0,0,0,.55); }

#stage.hoch #spieltisch { left:12px; width:776px; top:90px; height:var(--th, 1000px); }
#stage.hoch #gegner { height:72px; gap:6px; }
#stage.hoch .ns { flex:1 1 0; padding:4px 6px 4px 10px; gap:5px; }
#stage.hoch .ns-haus { grid-template-columns:repeat(3, 10px); grid-auto-rows:10px; }
#stage.hoch .ns-nm { font-size:18px; } #stage.hoch .ns-z { font-size:18px; gap:5px; }
#stage.hoch .ns-pk { display:none; }
#stage.hoch #haus { left:50%; right:auto; transform:translateX(-50%); top:86px; bottom:auto; }
#stage.hoch .hk-nm { font-size:22px; } #stage.hoch .hk-pk { font-size:18px; } #stage.hoch .hk-pk b { font-size:24px; } #stage.hoch .haus-kopf { height:44px; }
#stage.hoch .etagen span { font-size:16px; }
#stage.hoch .wo-vor { font-size:28px; } #stage.hoch .wo-p { font-size:20px; min-width:34px; height:34px; border-radius:17px; }
#stage.hoch #markt { left:50%; transform:translateX(-50%); top:calc(86px + var(--hh, 600px) + 12px); }
#stage.hoch .mr-schild span { font-size:19px; }
#stage.hoch .stp small, #stage.hoch .abl small { font-size:18px; }
#stage.hoch #aktion { left:12px; width:auto; right:12px; height:var(--ak, 132px); }
#stage.hoch .l-text { font-size:20px; } #stage.hoch .l-knoepfe .knopf { font-size:19px; }
#stage.hoch #ich { left:12px; right:12px; width:auto; top:calc(90px + var(--th, 1000px) + 10px); height:var(--ichh, 168px); grid-template-columns:150px 150px 1fr; grid-template-rows:auto 1fr; }
#stage.hoch .ich-brett { grid-column:3; grid-row:1; }
#stage.hoch .ich-knoepfe { grid-column:1 / -1; grid-row:2; flex-wrap:nowrap; }
#stage.hoch .ich-knoepfe .knopf { flex:1 1 0; font-size:17px; }
#stage.hoch .ich-kasse > b { font-size:32px; } #stage.hoch .ich-kasse small, #stage.hoch .ich-rab { font-size:18px; } #stage.hoch .ich-rab small, #stage.hoch .ich-brett small { font-size:15px; }
#stage.hoch #pchat { left:12px; right:12px; width:auto; top:calc(90px + var(--th, 1000px) + 10px + var(--ichh, 168px) + 10px); bottom:12px; }
#stage.hoch.kurz #pchat { top:90px; bottom:auto; height:62%; z-index:45; display:none; }
#stage.hoch.kurz #pchat.offen { display:flex; }
#stage.hoch #hinweise { left:12px; width:776px; bottom:auto; top:calc(140px + var(--hh, 600px) - 60px); }
#stage.hoch .meldung { max-width:94%; }
#stage:not(.hoch) .ch-zu, #stage.hoch:not(.kurz) .ch-zu, #stage:not(.kurz) #k-verlauf { display:none; }
#stage.hoch .en-platz { grid-template-columns:36px 46px minmax(0, 1fr) 56px 56px 64px 90px; }
#stage.hoch .banner { min-width:0; width:86%; top:36%; }
@media (pointer: coarse) {
  .ns { min-height:44px; }
  .ich-knoepfe .knopf { min-height:44px; }
}

#stage.hoch .lo-seg .nur-quer { display:none; }
#stage.hoch .k-phase { white-space:normal; line-height:1.3; font-size:19px; display:block; overflow:visible; }
.ch-liste, .ch-z { white-space:normal; overflow-wrap:anywhere; }
#pchat.allein .ch-tabs button[data-c="chat"], #pchat.allein #emotes { display:none; }
.medaille .sgzi { width:18px; height:18px; }
.lw-zwei { grid-template-columns:1fr 1fr; }
.lw-leiter { display:flex; flex-direction:column; gap:6px; }
.ll-titel { font-weight:800; color:var(--text); }
.ll-kette { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ll-stufe { display:flex; align-items:center; gap:5px; padding:3px 8px 3px 5px; border-radius:9px; border:1px solid var(--linie); background:rgba(0,0,0,.18); }
:root[data-theme="light"] .ll-stufe { background:rgba(255,255,240,.6); }
.ll-stufe .sgzi { width:20px; height:20px; }
.ll-stufe b { color:var(--text); text-transform:capitalize; } .ll-stufe small { color:var(--text-3); font-size:11.5px; }
.ll-stufe.ok { border-color:var(--gruen); } .ll-stufe.jetzt { border-color:var(--akz-hell); box-shadow:0 0 0 2px rgba(242,201,76,.3); }
.ll-leer { display:inline-block; width:16px; height:16px; border-radius:50%; border:2px dashed var(--linie); }
.ll-pfeil .sgzi { width:14px; height:14px; opacity:.6; }
.ll-rekorde { font-size:12px; color:var(--text-2); }
.st-leiter { flex:1 1 100%; }

.ns-sl b { font-size:inherit; }

#stage.hoch #kopf { height:176px; top:8px; left:20px; right:20px; flex-wrap:wrap; align-content:center; row-gap:6px; column-gap:14px; background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; padding:0 4px; }
#stage.hoch #kopf .trenner { display:none; }
#stage.hoch #kopf .runde { font-size:20px; color:var(--text); text-shadow:0 2px 3px #000, 0 0 6px #000; }
#stage.hoch #kopf .runde b { font-size:32px; color:var(--text); }
#stage.hoch #kopf .k-phase { font-size:24px; flex:1 1 300px; color:var(--text); text-shadow:0 2px 3px #000, 0 0 6px #000; }
#stage.hoch #kopf .rechts { flex:1 1 100%; justify-content:flex-end; gap:10px; }
#stage.hoch #kopf .kb-ic { width:88px; height:88px; }
#stage.hoch #kopf .kb-ic .sgzi { width:38px; height:38px; }
#stage.hoch .uhr { font-size:28px; padding:10px 14px; }
:root[data-theme="light"] #stage.hoch #kopf .runde, :root[data-theme="light"] #stage.hoch #kopf .k-phase { color:#fff8ea; }
#stage.hoch #spieltisch { left:20px; width:760px; top:196px; }
#stage.hoch #gegner { height:94px; }
#stage.hoch .ns { padding:6px 8px 6px 12px; }
#stage.hoch .ns-nm, #stage.hoch .ns-z { font-size:21px; }
#stage.hoch .ns-sl .kzs { width:22px; height:22px; }
#stage.hoch .ns-dran { font-size:20px; bottom:3px; }
#stage.hoch #haus { top:106px; }
#stage.hoch .hk-nm { font-size:24px; } #stage.hoch .hk-pk { font-size:20px; } #stage.hoch .haus-kopf { height:50px; }
#stage.hoch .haus-kopf .knopf { font-size:20px; min-height:48px; }
#stage.hoch .etagen span { font-size:20px; }
#stage.hoch #markt { top:calc(106px + var(--hh, 600px) + 12px); }
#stage.hoch .mr-schild span { font-size:20px; }
#stage.hoch .stp small, #stage.hoch .abl small { font-size:20px; }
#stage.hoch .l-text { font-size:21px; }
#stage.hoch .l-knoepfe .knopf { font-size:21px; min-height:86px; padding:10px 16px; }
#stage.hoch #ich { left:20px; right:20px; top:calc(196px + var(--th, 1000px) + 10px); height:var(--ichh, 230px); }
#stage.hoch .ich-kasse small, #stage.hoch .ich-rab, #stage.hoch .ich-rab small, #stage.hoch .ich-brett small { font-size:20px; }
#stage.hoch .ich-knoepfe .knopf { font-size:21px; min-height:88px; }
#stage.hoch #pchat { left:20px; right:20px; top:calc(196px + var(--th, 1000px) + 10px + var(--ichh, 230px) + 10px); }
#stage.hoch.kurz #pchat { top:196px; }
#stage.hoch .ch-tabs button { font-size:20px; min-height:86px; }
#stage.hoch .ch-liste { font-size:20px; }
#stage.hoch .ch-z.runde { font-size:20px; }
#stage.hoch #pchatwin { font-size:20px; }
#stage.hoch .pc-knoepfe button { font-size:20px; min-height:86px; }
#stage.hoch .ch-zu { min-width:86px; min-height:86px; }
#stage.hoch #k-verlauf-neu { font-size:20px; }
#stage.hoch #ansicht-menu { width:600px; top:190px; font-size:21px; }
#stage.hoch #ansicht-menu label, #stage.hoch #ansicht-menu label small, #stage.hoch #ansicht-menu .am-t { font-size:21px; }
#stage.hoch #ansicht-menu input { width:40px; height:40px; }
#stage.hoch #ansicht-menu .knopf { font-size:20px; min-height:86px; }
#stage.hoch .mp-tafel { font-size:21px; }
#stage.hoch .mr-schild .kzs { display:none; } #stage.hoch .mr-schild { justify-content:center; padding-top:0; } #stage.hoch .mr-schild span { letter-spacing:0; }

.l-karte { display:block; font-size:13px; line-height:1.3; color:var(--papier-t2); margin:2px 0; }
#stage.hoch .l-karte { font-size:20px; }
.wo-vor.nur { opacity:.85; background:#5a6a3a; box-shadow:0 0 0 2px rgba(255,255,255,.4); }
.wo-vor.nur.minus { background:#7a3a2a; }
.mz-flug { display:block; width:100%; height:100%; font-size:22px; } .mz-flug .mz { width:100%; }
.knopf.rat-an { box-shadow:0 0 0 4px var(--rat), 0 0 18px rgba(127,208,255,.7); }
.begehrt { position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); z-index:4; padding:0 7px; border-radius:9px; font:900 13px/19px var(--kopf); color:#fff8ea; background:#2a1a0a; border:2px solid var(--sf); box-shadow:0 2px 4px #0008; white-space:nowrap; }
.begehrt::before { content:'begehrt '; font:700 11px/19px var(--sans); }
#stage.hoch .begehrt { font-size:20px; line-height:26px; bottom:-14px; } #stage.hoch .begehrt::before { font-size:19px; line-height:26px; }
.bote.geht svg { animation:geht .26s ease-in-out 3 alternate; }
@keyframes geht { from { transform:translateY(0) rotate(-4deg); } to { transform:translateY(-6px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .bote.geht svg { animation:none; } }
#stage.hoch .ns-haus { display:none; }
#stage.hoch .ns { flex:1 1 0; min-width:0; overflow:hidden; }
#stage.hoch .ns-txt { min-width:0; width:100%; }
#stage.hoch .ns-z { gap:8px; }
#stage.hoch .ns { padding:6px 5px 6px 10px; }

#stage:not(.hoch) #hinweise { left:45px; width:var(--mw, 470px); top:calc(67px + var(--th, 692px) - var(--ak, 152px)); bottom:auto; height:calc(var(--ak, 152px) - 12px); justify-content:flex-start; }
#stage:not(.hoch) #hinweise .meldung { max-width:100%; font-size:14px; padding:7px 14px; }
#stage.hoch #hinweise { left:43px; width:714px; top:calc(179px + var(--th, 1000px) - var(--ak, 204px)); bottom:auto; height:calc(var(--ak, 204px) - 12px); justify-content:flex-start; }
#stage.hoch #hinweise .meldung { max-width:100%; font-size:19px; padding:8px 14px; }
#spieltisch { --sz-oben:calc(var(--th, 692px) - 28px - var(--ak, 152px)); }
#stage:not(.hoch) #spieltisch > .sz-karte { left:calc(12px + var(--mw, 470px) / 2); max-width:calc(var(--mw, 470px) - 12px); }
#stage.hoch #spieltisch > .sz-karte { max-width:94%; font-size:21px; gap:16px; }
#stage.hoch #spieltisch > .sz-karte .sz-kb, #stage.hoch #spieltisch > .sz-karte .sz-kb > * { max-width:100px; max-height:100px; }
#stage.hoch .sz-schild { font-size:20px; }
.wo.zuletzt { z-index:2; box-shadow:inset 0 0 0 2px #b8a682, 0 0 0 4px var(--akz-hell), 0 0 20px rgba(255,210,122,.8); animation:kzLetzt 1s ease-in-out infinite alternate; }
@keyframes kzLetzt { from { box-shadow:inset 0 0 0 2px #b8a682, 0 0 0 3px var(--akz-hell), 0 0 8px rgba(255,210,122,.5); } to { box-shadow:inset 0 0 0 2px #b8a682, 0 0 0 5px var(--akz-hell), 0 0 24px rgba(255,210,122,.9); } }
.wo.setzt { box-shadow:inset 0 0 0 2px #b8a682, 0 0 0 4px var(--wahl), 0 0 22px rgba(255,210,122,.75); }
.wo-setzt { position:absolute; left:4px; right:4px; top:50%; transform:translateY(-50%); z-index:3; padding:3px 4px; border-radius:7px; text-align:center; font:800 12px/1.2 var(--sans); color:#2a1a02; background:var(--akz-hell); box-shadow:0 2px 5px rgba(0,0,0,.45); }
#stage.hoch .wo-setzt { font-size:19px; }
@media (prefers-reduced-motion: reduce) { .wo.zuletzt { animation:none; } }
#gegner.viele .ns-haus { display:none; }
#gegner.viele .ns { padding-left:10px; gap:4px; }
#stage.hoch #gegner.viele .ns { padding:6px 4px 6px 8px; }
#stage.hoch #gegner.viele .ns-nm, #stage.hoch #gegner.viele .ns-z { font-size:19px; }
#stage.hoch #gegner.viele .ns-z { gap:4px; }
#stage.hoch #gegner.viele .ns-sl .kzs { width:18px; height:18px; }
@media (pointer: coarse) {
  #stage.hoch #kopf .kb-ic { width:94px; height:94px; }
  #stage.hoch .ich-knoepfe .knopf, #stage.hoch .l-knoepfe .knopf { min-height:94px; }
  #stage.hoch .ch-tabs button, #stage.hoch .pc-knoepfe button { min-height:94px; }
  #stage.hoch .ch-zu { min-width:94px; min-height:94px; }
}

#stage.hoch #haus { left:12px; right:auto; transform:none; top:106px; bottom:auto; width:var(--fw, 370px); }
#stage.hoch .haus-kopf .hk-nm { flex:1 1 auto; }
#stage.hoch #aktion { left:calc(var(--fw, 370px) + 24px); right:12px; width:auto; top:106px; bottom:auto; height:var(--hh, 500px); justify-content:flex-start; padding:14px 14px 222px; gap:8px; overflow:visible; }
#stage.hoch #l-text { flex:1 1 auto; min-height:0; overflow-y:auto; font-size:22px; line-height:1.35; }
#stage.hoch .l-karte { font-size:21px; }
#stage.hoch .l-knoepfe { position:absolute; left:12px; right:12px; bottom:12px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:94px; gap:10px; }
#stage.hoch .l-knoepfe .knopf, #stage.hoch .ich-knoepfe .knopf { min-width:0; min-height:94px; height:100%; justify-content:center; text-align:center; white-space:normal; line-height:1.15; font-size:22px; padding:6px 10px; }
#stage.hoch #markt { left:50%; transform:translateX(-50%); top:calc(106px + var(--hh, 500px) + 12px); }
#stage.hoch #ich, #stage.quer-handy #ich { inset:0; width:auto; height:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; display:block; pointer-events:none; z-index:4; }
#stage.hoch #ich > *, #stage.quer-handy #ich > * { position:absolute; pointer-events:auto; }
#stage.hoch #ich::before { content:""; position:absolute; left:20px; right:20px; top:calc(206px + var(--th, 1000px)); height:var(--ichh, 100px); border-radius:10px; border:2px solid #2a1a0a;
  background:repeating-linear-gradient(92deg, rgba(0,0,0,.06) 0 3px, transparent 3px 11px), linear-gradient(180deg, var(--holz-a), var(--holz-b)); box-shadow:inset 0 1px 0 rgba(255,230,190,.25), 0 10px 22px rgba(0,0,0,.55); }
#stage.hoch #ich.dran::before { box-shadow:0 0 0 3px var(--akz-hell), 0 10px 22px rgba(0,0,0,.55); }
#stage.hoch .ich-kasse, #stage.hoch .ich-rab, #stage.hoch .ich-brett { top:calc(216px + var(--th, 1000px)); height:calc(var(--ichh, 100px) - 20px); }
#stage.hoch .ich-kasse { left:32px; width:190px; }
#stage.hoch .ich-rab { left:232px; width:200px; flex-direction:row; flex-wrap:wrap; align-content:center; column-gap:14px; row-gap:0; }
#stage.hoch .ich-rab small { flex:1 1 100%; }
#stage.hoch .ich-brett { left:442px; right:32px; grid-column:auto; }
#stage.hoch .ich-kasse small, #stage.hoch .ich-rab, #stage.hoch .ich-rab small, #stage.hoch .ich-brett small { font-size:22px; }
#stage.hoch .ich-rab small, #stage.hoch .ich-brett small { letter-spacing:0; text-transform:none; }
#stage.hoch .ich-knoepfe { left:calc(67px + var(--fw, 370px)); right:55px; top:calc(103px + var(--hh, 500px)); height:198px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:94px; gap:10px; }
#stage.hoch.zk .ich-knoepfe, #stage.quer-handy.zk .ich-knoepfe { display:none; }
#stage.hoch #kopf .runde { font-size:22px; }
#stage.hoch .ns-nm, #stage.hoch .ns-z, #stage.hoch #gegner.viele .ns-nm, #stage.hoch #gegner.viele .ns-z { font-size:22px; }
#stage.hoch .ns-dran { font-size:21px; }
#stage.hoch .stp small, #stage.hoch .abl small, #stage.hoch .mr-schild span, #stage.hoch .etagen span { font-size:21px; }
#stage.hoch #hinweise { left:calc(55px + var(--fw, 370px)); width:calc(702px - var(--fw, 370px)); top:323px; height:calc(var(--hh, 500px) - 232px); }
#stage.hoch #hinweise .meldung { font-size:21px; }
#stage.hoch #spieltisch { --sz-oben:calc(var(--hh, 500px) - 80px); }
#stage.hoch #spieltisch > .sz-karte { left:calc(var(--fw, 370px) / 2 + 375px); width:calc(690px - var(--fw, 370px)); max-width:none; font-size:21px; gap:12px; }
#stage.hoch #spieltisch > .sz-karte .sz-kb, #stage.hoch #spieltisch > .sz-karte .sz-kb > * { max-width:64px; max-height:84px; }

#stage.quer-handy #kopf { left:auto; right:6px; top:6px; bottom:6px; width:78px; height:auto; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; padding:4px 5px; }
#stage.quer-handy #kopf .logo, #stage.quer-handy #kopf .trenner, #stage.quer-handy #kopf .k-phase, #stage.quer-handy #kopf .runde[data-ki="stapel"], #stage.quer-handy #k-runde-t { display:none; }
#stage.quer-handy #kopf .runde { text-align:center; letter-spacing:0; }
#stage.quer-handy #kopf .runde b { font-size:19px; line-height:1.2; }
#stage.quer-handy #kopf .rechts { margin:0; flex-direction:column; align-items:stretch; gap:2px; }
#stage.quer-handy #kopf .kb-ic { width:66px; height:64px; }
#stage.quer-handy #kopf .kb-ic .sgzi { width:26px; height:26px; }
#stage.quer-handy .uhr { justify-content:center; font-size:17px; padding:5px 4px; }
#stage.quer-handy .uhr .sgzi { width:16px; height:16px; }
#stage.quer-handy #k-verlauf-neu { font-size:15px; }
#stage.quer-handy #spieltisch { left:6px; top:6px; width:var(--tw, 678px); height:var(--th, 468px); border-width:6px; border-radius:12px; }
#stage.quer-handy #gegner { left:6px; right:auto; top:6px; width:var(--mw, 372px); height:64px; gap:4px; justify-content:flex-start; }
#stage.quer-handy .ns { flex:1 1 0; min-width:0; min-height:64px; overflow:hidden; padding:4px 4px 4px 10px; gap:4px; }
#stage.quer-handy .ns-haus, #stage.quer-handy .ns-pk { display:none; }
#stage.quer-handy .ns-txt { min-width:0; width:100%; }
#stage.quer-handy .ns-nm, #stage.quer-handy .ns-z { font-size:15px; } #stage.quer-handy .ns-z { gap:5px; }
#stage.quer-handy .ns-sl .kzs { width:16px; height:16px; }
#stage.quer-handy .ns-dran { font-size:15px; right:3px; top:3px; bottom:auto; padding:0 5px; }
#stage.quer-handy .mp-tafel { font-size:15px; gap:10px; padding:4px 10px; height:64px; }
#stage.quer-handy #markt { left:6px; top:76px; width:var(--mw, 372px); height:var(--mh, 192px); }
#stage.quer-handy .mr { padding-left:42px; }
#stage.quer-handy .mr-schild { width:36px; justify-content:center; padding-top:0; }
#stage.quer-handy .mr-schild .kzs { display:none; }
#stage.quer-handy .mr-schild span { font-size:15px; letter-spacing:0; }
#stage.quer-handy .stp { width:calc(.55 * var(--cw, 64px)); height:calc(.77 * var(--cw, 64px)); }
#stage.quer-handy .stp small, #stage.quer-handy .abl small { font-size:15px; min-width:22px; padding:0 4px; }
#stage.quer-handy .mr-weg { left:42px; font-size:16px; }
#stage.quer-handy .bote { width:40px; height:60px; left:-2px; }
#stage.quer-handy .bote.bv { top:calc(1.39 * var(--cw, 64px) - 62px); }
#stage.quer-handy .bote.bh { top:calc(2.78 * var(--cw, 64px) + 14px - 62px); }
#stage.quer-handy .begehrt, #stage.quer-handy .begehrt::before { font-size:15px; }
#stage.quer-handy #aktion { left:6px; top:calc(84px + var(--mh, 192px)); bottom:6px; width:var(--mw, 372px); height:auto; padding:8px 12px 82px; justify-content:flex-start; gap:4px; overflow:visible; }
#stage.quer-handy #l-text { flex:1 1 auto; min-height:0; overflow-y:auto; font-size:15px; line-height:1.3; }
#stage.quer-handy .l-karte { font-size:15px; }
#stage.quer-handy .l-knoepfe { position:absolute; left:8px; right:8px; bottom:8px; height:66px; flex-wrap:nowrap; gap:6px; }
#stage.quer-handy .l-knoepfe .knopf, #stage.quer-handy .ich-knoepfe .knopf { flex:1 1 0; min-width:0; min-height:66px; font-size:15px; padding:4px 6px; white-space:normal; line-height:1.1; justify-content:center; text-align:center; }
#stage.quer-handy .ich-knoepfe { left:26px; width:calc(var(--mw, 372px) - 16px); top:388px; height:66px; display:flex; flex-wrap:nowrap; gap:6px; }
#stage.quer-handy #i-bote { flex-grow:1.6; }
#stage.quer-handy #haus { left:auto; right:6px; top:6px; bottom:auto; width:var(--fw, 274px); height:var(--hh, 380px); gap:6px; }
#stage.quer-handy .haus-kopf { height:40px; padding:0 8px; gap:6px; }
#stage.quer-handy .hk-nm { font-size:16px; flex:1 1 auto; } #stage.quer-handy .hk-pk { font-size:15px; } #stage.quer-handy .hk-pk b { font-size:18px; }
#stage.quer-handy #h-meins, #stage.hoch #h-meins { display:none; }
#stage.quer-handy .etagen span { font-size:15px; letter-spacing:0; }
#stage.quer-handy .wo-p { font-size:15px; min-width:26px; height:26px; }
#stage.quer-handy .wo-vor { font-size:17px; min-width:40px; }
#stage.quer-handy .wo-setzt { font-size:15px; }
#stage.quer-handy .ich-kasse, #stage.quer-handy .ich-rab, #stage.quer-handy .ich-brett { top:calc(24px + var(--hh, 380px)); height:calc(438px - var(--hh, 380px)); padding:3px 7px; border-radius:8px; color:var(--holz-t);
  background:repeating-linear-gradient(92deg, rgba(0,0,0,.06) 0 3px, transparent 3px 11px), linear-gradient(180deg, var(--holz-a), var(--holz-b)); border:2px solid #2a1a0a; box-shadow:0 4px 10px rgba(0,0,0,.5); }
#stage.quer-handy #ich.dran .ich-kasse, #stage.quer-handy #ich.dran .ich-rab, #stage.quer-handy #ich.dran .ich-brett { box-shadow:0 0 0 2px var(--akz-hell), 0 4px 10px rgba(0,0,0,.5); }
#stage.quer-handy .ich-kasse { left:calc(var(--tw, 678px) - 6px - var(--fw, 274px)); width:calc(var(--fw, 274px) * .3 - 4px); justify-content:center; }
#stage.quer-handy .ich-kasse .mz { width:22px; } #stage.quer-handy .ich-kasse > b { font-size:22px; } #stage.quer-handy .ich-kasse small { display:none; }
#stage.quer-handy .ich-rab { left:calc(var(--tw, 678px) - 6px - var(--fw, 274px) * .7); width:calc(var(--fw, 274px) * .37 - 4px); flex-direction:row; flex-wrap:wrap; align-content:center; column-gap:8px; row-gap:0; font-size:15px; }
#stage.quer-handy .ich-rab small { flex:1 1 100%; }
#stage.quer-handy .ich-rab small, #stage.quer-handy .ich-brett small { font-size:15px; letter-spacing:0; text-transform:none; }
#stage.quer-handy .ich-rab .kzs { width:15px; height:15px; }
#stage.quer-handy .ich-brett { left:calc(var(--tw, 678px) - 6px - var(--fw, 274px) * .33); width:calc(var(--fw, 274px) * .33); justify-content:center; gap:0; }
#stage.quer-handy .ich-brett .haken-reihe { display:none; }
#stage.quer-handy .ich-sl { position:static; font-size:20px; }
#stage.quer-handy #pchat { left:auto; right:90px; top:6px; bottom:6px; width:360px; z-index:45; display:none; }
#stage.quer-handy #pchat.offen { display:flex; }
#stage.quer-handy .ch-tabs button, #stage.quer-handy .pc-knoepfe button { min-height:64px; font-size:15px; }
#stage.quer-handy .ch-zu { min-width:64px; min-height:64px; }
#stage.quer-handy .ch-liste, #stage.quer-handy .ch-z.runde, #stage.quer-handy #pchatwin { font-size:15px; }
#stage.quer-handy #pchatin { font-size:16px; min-height:64px; }
#stage.quer-handy #ansicht-menu { right:90px; top:6px; max-height:468px; overflow-y:auto; font-size:15px; }
#stage.quer-handy #hinweise { left:18px; width:var(--mw, 372px); top:calc(96px + var(--mh, 192px)); bottom:auto; height:calc(284px - var(--mh, 192px)); }
#stage.quer-handy #hinweise .meldung { font-size:15px; padding:6px 10px; }
#stage.quer-handy #spieltisch { --sz-oben:356px; }
#stage.quer-handy #spieltisch > .sz-karte { left:calc(6px + var(--mw, 372px) / 2); max-width:calc(var(--mw, 372px) - 8px); font-size:15px; }
#stage.quer-handy #spieltisch > .sz-karte .sz-kb, #stage.quer-handy #spieltisch > .sz-karte .sz-kb > * { max-width:56px; max-height:56px; }
#stage.quer-handy .sz-schild { font-size:15px; }
#stage.quer-handy .banner { min-width:0; width:70%; top:40%; }

#stage.quer-handy #a-zurueck { flex:0 0 auto; white-space:nowrap; padding:4px 9px; }
#stage.quer-handy .l-knoepfe .knopf .mz, #stage.quer-handy .l-knoepfe .knopf .kzs { width:24px; height:24px; } #stage.quer-handy .l-knoepfe .knopf .mz b { font-size:15px; }
#stage.hoch #a-zurueck { grid-column:1 / -1; white-space:nowrap; }
#stage.hoch .l-knoepfe .knopf .mz, #stage.hoch .l-knoepfe .knopf .kzs { width:36px; height:36px; } #stage.hoch .l-knoepfe .knopf .mz b { font-size:22px; }
#stage:not(.hoch):not(.quer-handy) #spieltisch { --sz-oben:calc(var(--th, 692px) - 34px - 92px); }
#stage.hoch .hk-pk, #stage.hoch .begehrt, #stage.hoch .begehrt::before, #stage.hoch .wo-setzt, #stage.hoch .sz-schild, #stage.hoch #k-verlauf-neu { font-size:22px; }
#stage.hoch .begehrt, #stage.hoch .begehrt::before { line-height:28px; }
#stage.hoch .wo-p { font-size:22px; min-width:38px; height:38px; border-radius:19px; }
#stage.hoch .ch-tabs button, #stage.hoch .ch-liste, #stage.hoch .ch-z.runde, #stage.hoch #pchatwin, #stage.hoch .pc-knoepfe button, #stage.hoch .mp-tafel { font-size:22px; }
#stage.hoch #ansicht-menu, #stage.hoch #ansicht-menu label, #stage.hoch #ansicht-menu label small, #stage.hoch #ansicht-menu .am-t, #stage.hoch #ansicht-menu .knopf { font-size:22px; }
#stage.hoch #i-bote { grid-column:1 / -1; }
#stage.hoch .ich-knoepfe:has(#i-zurueck) #i-bote { grid-column:auto; padding:6px 4px; }
#stage.hoch .ich-knoepfe:has(#i-zurueck) #i-bote > * { display:none; }
#stage.hoch .l-knoepfe .knopf { padding:6px 4px; gap:4px; }
#stage.hoch .begehrt { line-height:24px; padding:1px 8px 2px; bottom:-18px; } #stage.hoch .begehrt::before { display:block; line-height:22px; font-size:21px; }