:root {
  --bg:#1a1c1e; --panel:rgba(28,26,24,.9); --panel2:rgba(42,38,34,.95); --panel-solid:#28241f;
  --akz:#d9b26a; --akz-hell:#f2d79a; --akz2:#a8763a; --linie:rgba(230,205,150,.3);
  --text:#f3ede2; --text-2:#e2d8c6; --text-3:#c2b6a0; --dim:#c8bca6;
  --gold:#f2c861; --rot:#ff8a7a; --gruen:#a6dc8e; --blau:#9cc8f0; --dran:#8ad8c4;
  --ov-a:#34302a; --ov-b:#141210; --scrim:rgba(8,8,8,.7);
  --kn-a:#4a4238; --kn-b:#26211b;
  --holz:#6a4428; --holz-d:#3a2412; --holz-h:#956a40; --perg:#efe3c6; --perg-t:#2a2118;
  --kopf:'Georgia', 'Times New Roman', serif;
  --sans:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
:root[data-theme="light"] {
  --bg:#e8e2d4; --panel:rgba(248,243,232,.93); --panel2:rgba(238,230,214,.97); --panel-solid:#f0e9da;
  --akz:#8a5414; --akz-hell:#74420a; --akz2:#b88a3a; --linie:rgba(90,60,30,.3);
  --text:#22190f; --text-2:#3c2e1e; --text-3:#584634; --dim:#584634;
  --gold:#835000; --rot:#b4232f; --gruen:#2a6e3a; --blau:#1a5fb4; --dran:#0f7a62;
  --ov-a:#f5efe2; --ov-b:#e2d6bf; --scrim:rgba(40,30,20,.42);
  --kn-a:#f5efe2; --kn-b:#ddcfb6;
  --holz:#a77c52; --holz-d:#6e4a2c; --holz-h:#cfa676; --perg:#f3ead6; --perg-t:#2a2118;
}
html[data-design="nacht"]:not([data-theme="light"]) {
  --bg:#12162a; --panel:rgba(20,24,44,.9); --panel2:rgba(30,36,62,.95); --panel-solid:#1c2240;
  --akz:#9cc0f0; --akz-hell:#d6e6ff; --linie:rgba(170,200,250,.3); --ov-a:#222a4a; --ov-b:#0c0f20; --kn-a:#2e3860; --kn-b:#161c36;
  --holz:#2e3a6a; --holz-d:#141a38; --holz-h:#4a5a96;
}
:where(html, html *) { scrollbar-width:thin; scrollbar-color:var(--akz, #d9b26a) var(--panel2, rgba(42,38,34,.95)); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:var(--panel2, rgba(42,38,34,.95)); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:var(--akz, #d9b26a); border-radius:5px; border:2px solid transparent; background-clip:padding-box; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#0d0d0c; 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, #34302a 0%, #0d0d0c 80%); }
:root[data-theme="light"] #wrap { background:radial-gradient(ellipse at center, #f2ecdf 0%, #c9bca2 85%); }
#stage { position:relative; width:1280px; height:800px; flex:none; transform-origin:center center; overflow:hidden; background:var(--bg); -webkit-touch-callout:none; }
#grund { position:absolute; inset:0; background:url(img/kulisse-abend.webp?v=2) center 30% / cover no-repeat, linear-gradient(180deg, #c87a4a, #4a3020); }
html[data-design="nacht"]:not([data-theme="light"]) #grund { background:url(img/kulisse-nacht.webp?v=2) center 30% / cover no-repeat, linear-gradient(180deg, #1c2450, #0c1020); }
:root[data-theme="light"] #grund { background:url(img/kulisse-mittag.webp?v=2) center 30% / cover no-repeat, linear-gradient(180deg, #a9cfe8, #e0cca0); }
#stage.hoch #grund { background-image:url(img/kulisse-abend-hoch.webp?v=2); background-position:center 20%; }
html[data-design="nacht"]:not([data-theme="light"]) #stage.hoch #grund { background-image:url(img/kulisse-nacht-hoch.webp?v=2); }
:root[data-theme="light"] #stage.hoch #grund { background-image:url(img/kulisse-mittag-hoch.webp?v=2); }
#grund::before { content:""; position:absolute; left:-30%; right:-30%; bottom:0; height:52%; pointer-events:none;
  background:radial-gradient(ellipse 18% 22% at 34% 62%, rgba(255,190,110,.22), transparent 70%), radial-gradient(ellipse 16% 20% at 70% 66%, rgba(255,180,100,.18), transparent 70%), radial-gradient(ellipse 40% 30% at 50% 80%, rgba(240,210,160,.08), transparent 70%);
  animation:laterne 6s ease-in-out infinite alternate; }
:root[data-theme="light"] #grund::before { opacity:.35; }
@keyframes laterne { 0% { opacity:.75; transform:translateX(-1.5%); } 40% { opacity:1; } 70% { opacity:.85; } 100% { opacity:1; transform:translateX(1.5%); } }
#grund::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.12), rgba(8,8,8,.32)); }
:root[data-theme="light"] #grund::after { background:linear-gradient(180deg, rgba(255,250,236,.05), rgba(240,232,214,.2)); }
#stage.lobbyhg #grund { filter:blur(3px) brightness(.72); }
:root[data-theme="light"] #stage.lobbyhg #grund { filter:blur(2px) brightness(1.04) saturate(.85); }
@media (prefers-reduced-motion: reduce) { #grund::before { animation:none; } }
[hidden] { display:none !important; }
button { font-family:var(--sans); cursor:pointer; }
input, select { font-family:var(--sans); font-size:16px; }

.kb { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:linear-gradient(180deg, var(--kn-a), var(--kn-b)); 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,236,200,.14), 0 2px 8px rgba(0,0,0,.4); }
:root[data-theme="light"] .kb { background:linear-gradient(180deg, var(--kn-a), var(--kn-b)); 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(#ffe39a, #e0a52a) !important; color:#2b2405 !important; border-color:#fff3c8; box-shadow:0 2px 0 #6a4a06, 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,250,236,.6); }
.kb-ic .sgzi { width:20px; height:20px; }
.kb-ic.an { background:rgba(255,207,106,.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; }

#lobby, #tisch { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(8,14,10,.25), rgba(6,10,8,.55)); }
:root[data-theme="light"] #lobby, :root[data-theme="light"] #tisch { background:linear-gradient(180deg, rgba(250,250,236,.3), rgba(226,232,206,.5)); }
.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(255,207,106,.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(255,207,106,.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,250,236,.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,250,236,.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(255,207,106,.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(255,207,106,.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:12px; 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(255,207,106,.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,250,236,.65); }
.ti-wahl button.an { background:rgba(255,207,106,.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(255,207,106,.1)); border:1px solid var(--gruen); }
.lo-streifen.warten { background:linear-gradient(90deg, rgba(255,207,106,.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(255,207,106,.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(#ffe39a, #e0a52a); }
.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(255,207,106,.24); border-color:var(--akz-hell); color:var(--akz-hell); font-weight:800; }
.lw-ausgabe { display:grid; grid-template-columns: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(232,184,96,.28), rgba(16,8,24,.6)); border:1px solid var(--linie); font-size:12px; line-height:1.3; }
:root[data-theme="light"] .lw-ausgabe button { background:linear-gradient(160deg, rgba(232,184,96,.22), rgba(255,250,236,.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(255,207,106,.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,250,236,.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 12px/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(255,207,106,.08); border:1px solid rgba(255,207,106,.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(232,184,96,.16), rgba(16,8,24,.3)); border:1px solid rgba(255,207,106,.25); }
:root[data-theme="light"] .lw-anleitung { background:rgba(232,184,96,.14); }
.lw-an-titel { font-size:12px; 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)); }


.banner { position:absolute; left:calc((100% - 404px) / 2); top:40%; z-index:75; min-width:420px; max-width:720px; padding:16px 34px 14px; text-align:center; border-radius:14px; pointer-events:none;
  transform:translate(-50%, -50%) scale(.6); opacity:0; transition:transform .4s cubic-bezier(.2, 1.4, .4, 1), opacity .35s;
  background:linear-gradient(180deg, var(--ov-a), var(--ov-b)); border:2px solid var(--akz); box-shadow:0 18px 50px rgba(0,0,0,.6); }
.banner.an { transform:translate(-50%, -50%) scale(1); opacity:1; }
.bn-titel { font-family:var(--kopf); font-weight:900; font-size:40px; 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.2px; color:var(--text); }
.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:24%; min-width:0; padding:10px 24px 9px; }
.banner.klein .bn-titel { font-size:26px; letter-spacing:2px; }
.banner .bn-karte { display:flex; justify-content:center; margin-bottom:4px; }

.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:48px 40px minmax(0, 1fr) 70px 100px; align-items:center; gap:10px; padding:7px 12px; border-radius:10px; background:rgba(0,0,0,.2); border:1px solid var(--linie); }
:root[data-theme="light"] .en-platz { background:rgba(255,250,236,.55); }
.en-platz.kopf { background:transparent; border-color:transparent; padding-top:0; padding-bottom:0; font-size:12px; 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-platz .w small { display:block; font-size:12px; color:var(--dim); }
.en-einladung { margin:10px 0 0; padding:8px 12px; border-radius:10px; text-align:center; font-size:15px; background:rgba(111,214,190,.14); border:1px solid var(--gruen); color:var(--text); }
.en-stat { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 16px; margin-top:12px; font-size:15px; color:var(--text-2); }
.en-stat b { color:var(--gold); font-family:var(--kopf); }
.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; }

#stage.hoch .lo-haupt { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); }
#stage.hoch .lo-rechts { grid-template-columns:minmax(0, 1fr); 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; }
@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; }
  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); }
}


#partie { position:absolute; inset:0; z-index:2; }
.panel { position:absolute; border:1px solid rgba(40,24,10,.7); border-radius:10px; color:#f6ecd8;
  background:repeating-linear-gradient(90deg, rgba(255,230,190,.05) 0 2px, transparent 2px 23px), repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 7px), linear-gradient(180deg, var(--holz-h), var(--holz) 40%, var(--holz-d));
  box-shadow:inset 0 1px 0 rgba(255,230,190,.25), 0 8px 22px rgba(0,0,0,.45); }
#kopf { position:absolute; left:12px; right:12px; top:8px; height:44px; display:flex; align-items:center; gap:14px; padding:0 10px 0 128px; z-index:5; border-radius:10px;
  background:repeating-linear-gradient(90deg, rgba(255,230,190,.05) 0 2px, transparent 2px 23px), linear-gradient(180deg, rgba(106,68,40,.74), rgba(58,36,18,.74)); border:1px solid rgba(40,24,10,.6); color:#f6ecd8;
  box-shadow:0 6px 16px rgba(0,0,0,.35); }
html[data-design="nacht"]:not([data-theme="light"]) #kopf { background:linear-gradient(180deg, rgba(46,58,106,.78), rgba(20,26,56,.78)); border-color:rgba(150,180,240,.35); }
#kopf .logo { font-family:var(--kopf); font-weight:900; font-size:19px; letter-spacing:2.5px; color:#f6dca0; line-height:1; text-shadow:0 2px 0 rgba(0,0,0,.5); }
#kopf .logo small { display:block; font-size:11px; letter-spacing:2.2px; color:#e8d6b0; margin-top:2px; }
#kopf .runde { font-size:12px; color:#e8d6b0; display:flex; flex-direction:column; align-items:center; line-height:1.1; text-transform:uppercase; letter-spacing:1px; }
#kopf .runde b { font-family:var(--kopf); font-size:17px; color:#fff3d6; text-transform:none; letter-spacing:0; }
.k-phase { flex:1; min-width:0; height:34px; display:flex; align-items:center; font-size:16px; color:#fff3d6; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.k-phase b { margin-right:5px; }
.uhr { padding:4px 10px; border-radius:8px; background:rgba(0,0,0,.35); font:800 15px/1 var(--sans); color:#fff3d6; font-variant-numeric:tabular-nums; }
.uhr.knapp { background:#a8302a; animation:puls 1s ease-in-out infinite; }
#kopf .rechts { display:flex; gap:6px; }
#kopf .kb-ic { color:#fff3d6; background:rgba(0,0,0,.25); border-color:rgba(255,230,190,.35); }
#k-verlauf { width:auto; padding:0 9px; gap:5px; font-size:13px; font-weight:700; }
#stage:not(.hoch) #k-verlauf { display:none; }
.sn { white-space:nowrap; }
.sn[data-f="0"] { color:#ff9aa6; } .sn[data-f="1"] { color:#aab8ff; } .sn[data-f="2"] { color:#ffd572; } .sn[data-f="3"] { color:#7ee0b4; } .sn[data-f="4"] { color:#dba8f2; } .sn[data-f="5"] { color:#ffb488; }
#lage .sn[data-f="0"], .meldung .sn[data-f="0"], .ch-liste .sn[data-f="0"] { color:#a4202e; } #lage .sn[data-f="1"], .meldung .sn[data-f="1"], .ch-liste .sn[data-f="1"] { color:#2a3e9a; }
#lage .sn[data-f="2"], .meldung .sn[data-f="2"], .ch-liste .sn[data-f="2"] { color:#8a5a00; } #lage .sn[data-f="3"], .meldung .sn[data-f="3"], .ch-liste .sn[data-f="3"] { color:#13704a; }
#lage .sn[data-f="4"], .meldung .sn[data-f="4"], .ch-liste .sn[data-f="4"] { color:#6a2a8a; } #lage .sn[data-f="5"], .meldung .sn[data-f="5"], .ch-liste .sn[data-f="5"] { color:#9a4410; }

#feld { position:absolute; left:22px; right:300px; top:64px; bottom:16px; z-index:2; display:grid; grid-template-rows:var(--sh, 118px) var(--mh, 182px) var(--rkh, 30px) minmax(0, 1fr); row-gap:6px;
  padding:12px 14px 12px; border-radius:16px; touch-action:manipulation;
  background:url(img/tisch-abend.webp?v=2) center / cover no-repeat, #4a2e18;
  box-shadow:inset 0 0 0 2px rgba(255,220,170,.18), inset 0 0 0 9px rgba(40,22,10,.55), inset 0 10px 30px rgba(0,0,0,.35), 0 0 0 4px #2a170a, 0 0 0 6px rgba(200,160,100,.35), 0 26px 50px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.45); }
html[data-design="nacht"]:not([data-theme="light"]) #feld { background:url(img/tisch-nacht.webp?v=2) center / cover no-repeat, #1c2650;
  box-shadow:inset 0 0 0 2px rgba(190,210,255,.2), inset 0 0 0 9px rgba(10,14,40,.5), inset 0 10px 30px rgba(0,0,0,.35), 0 0 0 4px #121836, 0 0 0 6px rgba(150,180,240,.3), 0 26px 50px rgba(0,0,0,.65), 0 6px 14px rgba(0,0,0,.45); }
:root[data-theme="light"] #feld { background:url(img/tisch-mittag.webp?v=2) center / cover no-repeat, #e6d8b8;
  box-shadow:inset 0 0 0 2px rgba(255,255,240,.4), inset 0 0 0 9px rgba(120,90,50,.28), inset 0 10px 24px rgba(80,60,30,.18), 0 0 0 4px #8a6a40, 0 0 0 6px rgba(255,240,210,.5), 0 22px 44px rgba(60,40,20,.45), 0 6px 12px rgba(60,40,20,.3); }

#sitze { display:flex; gap:10px; justify-content:center; align-items:stretch; min-height:0; }
.sitz { position:relative; flex:0 1 250px; min-width:0; display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); column-gap:7px; row-gap:4px; padding:5px 7px 6px;
  border-radius:10px; cursor:pointer; background:linear-gradient(180deg, rgba(20,12,6,.32), rgba(20,12,6,.18)); border:1px solid rgba(255,220,170,.18); }
:root[data-theme="light"] .sitz { background:linear-gradient(180deg, rgba(120,90,50,.16), rgba(120,90,50,.08)); border-color:rgba(90,60,30,.25); }
.sitz.blick { box-shadow:0 0 0 2px var(--sf), 0 0 14px color-mix(in srgb, var(--sf) 55%, transparent); }
.sitz.dran { box-shadow:0 0 0 3px #ffe08c, 0 0 18px rgba(255,224,140,.55); }
.sitz .bildnis { grid-row:1; align-self:start; }
.st-kopf { min-width:0; display:flex; flex-direction:column; gap:1px; }
.st-name { display:flex; align-items:center; gap:5px; min-width:0; padding:1px 7px; border-radius:6px; font-size:14px; font-weight:800; color:#2a1a08; white-space:nowrap; overflow:hidden;
  background:linear-gradient(180deg, #f6dc9a, #c99a46); border:1px solid #6a4a14; border-left:4px solid var(--sf); box-shadow:inset 0 1px 0 #fff6, 0 2px 4px rgba(0,0,0,.35); }
.st-name span { overflow:hidden; text-overflow:ellipsis; } .st-name small { font-weight:600; font-size:12px; color:#5a3e10; }
.st-zahlen { display:flex; flex-wrap:wrap; column-gap:9px; row-gap:0; align-items:center; font-size:12.5px; color:#fff1d6; white-space:nowrap; min-width:0; }
#sitze.eng .st-name small { display:none; }
#sitze.eng .st-zahlen { column-gap:6px; }
:root[data-theme="light"] .st-zahlen { color:#3a2814; }
.st-zahlen b { font-size:14px; } .st-zahlen .ksym { width:15px; height:15px; vertical-align:-3px; }
.st-reihe { position:absolute; top:-7px; right:-6px; min-width:24px; height:24px; padding:0 5px; border-radius:12px; display:flex; align-items:center; justify-content:center; font:900 13px/1 var(--sans);
  color:#2a1a08; background:radial-gradient(circle at 35% 30%, #fff3b0, #e8b83a 60%, #8a6014); border:1px solid #4a3008; box-shadow:0 2px 4px rgba(0,0,0,.45); z-index:2; }
.st-route { grid-column:1 / -1; display:flex; gap:2px; align-items:flex-end; min-width:0; }
.st-route .slot { flex:none; width:var(--mw, 20px); height:calc(var(--mw, 20px) * 1.4); border-radius:3px; border:1px dashed rgba(255,230,190,.28); }
:root[data-theme="light"] .st-route .slot { border-color:rgba(90,60,30,.3); }
.st-sereien { white-space:nowrap; }
.mini { position:relative; flex:none; display:inline-flex; flex-direction:column; align-items:center; justify-content:space-between; width:var(--mw, 20px); height:calc(var(--mw, 20px) * 1.4); padding:1px 0;
  border-radius:3px; background:linear-gradient(170deg, color-mix(in srgb, var(--lf) 85%, #fff 15%), var(--lf) 55%, var(--ld)); border:1px solid rgba(0,0,0,.5); box-shadow:0 2px 3px rgba(0,0,0,.4); color:#fff; overflow:hidden; }
.mini b { font:800 calc(var(--mw, 20px) * .5)/1 var(--sans); text-shadow:0 1px 1px rgba(0,0,0,.7); }
.mini i { display:flex; flex-wrap:wrap; justify-content:center; gap:1px; font-style:normal; }
.mini em { width:4px; height:4px; border-radius:50%; } .mini .w0 { background:#ff9ab8; } .mini .w1 { background:#ffb85a; } .mini .w2 { background:#7af0bc; } .mini .mk { background:#ffe08c; border-radius:1px; transform:rotate(45deg); }
.mini.nacht::after { content:""; position:absolute; right:1px; top:1px; width:5px; height:5px; border-radius:50%; background:#dfe6ff; box-shadow:-1.5px .5px 0 var(--lf) inset; }
.mini.ms { background:linear-gradient(170deg, #f0d8a8, #b8874a); } .mini.ms .ksym { width:85%; height:auto; margin:auto; }
.mini.rueck, .mini.ms.rueck { background:repeating-linear-gradient(45deg, #5a2a3a 0 3px, #7a3a4a 3px 6px); }
.mini.dreh { animation:dreh .6s ease-out; }

#mitte { display:grid; grid-template-columns:110px minmax(0, 1fr) 132px; gap:10px; align-items:center; min-height:0; }
#stapel { display:flex; gap:12px; justify-content:center; align-items:center; }
.stapel { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:12px; color:#f6ecd8; cursor:help; }
:root[data-theme="light"] .stapel { color:#3a2814; }
.stapel .karte.dick { box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 1.5px 2px 0 #2a1608, 3px 4px 0 #6a4a2a, 4.5px 6px 0 #2a1608, 6px 8px 0 #6a4a2a, 8px 12px 14px rgba(0,0,0,.5); }
.stapel .karte.dick.d1 { box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 1.5px 2px 0 #2a1608, 4px 6px 10px rgba(0,0,0,.5); }
.stapel .karte.dick.d2 { box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 1.5px 2px 0 #2a1608, 3px 4px 0 #6a4a2a, 6px 8px 12px rgba(0,0,0,.5); }
.stapel b { font-size:14px; }
#markt { position:relative; display:flex; gap:8px; justify-content:center; align-items:center; min-width:0; height:100%; border-radius:12px; padding:6px;
  background:radial-gradient(ellipse at center, rgba(255,230,180,.08), transparent 70%); }
#markt .leer-text { color:rgba(255,236,200,.75); font-style:italic; font-size:14px; text-align:center; padding:0 12px; }
:root[data-theme="light"] #markt .leer-text { color:#5a4428; }
#markt .karte.waehlbar { cursor:pointer; box-shadow:0 0 0 3px #ffe08c, 0 6px 16px rgba(0,0,0,.5); animation:zielpuls 1.4s ease-in-out infinite; }
#markt .karte.gewaehlt, #hand .karte.gewaehlt, #wahl .karte.gewaehlt { transform:translateY(-10px); box-shadow:0 0 0 4px #fff3b0, 0 0 20px rgba(255,224,140,.85), 0 10px 18px rgba(0,0,0,.5); }
@keyframes zielpuls { 50% { box-shadow:0 0 0 3px #fff6c8, 0 0 18px rgba(255,224,140,.75), 0 6px 16px rgba(0,0,0,.5); } }
#tage { display:flex; flex-direction:column; gap:6px; align-items:center; }
.tage-leiste { display:grid; grid-template-columns:repeat(4, 26px); gap:4px; }
.tag { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 12.5px/1 var(--sans); color:#3a2a10;
  background:radial-gradient(circle at 35% 30%, #fff1c4, #c8a050 60%, #7a5a20); border:1px solid #4a3410; box-shadow:0 2px 3px rgba(0,0,0,.45); opacity:.55; }
.tag.vorbei { opacity:.3; } .tag.jetzt { opacity:1; transform:scale(1.18); box-shadow:0 0 0 2px #fff3b0, 0 0 12px rgba(255,224,140,.8); }
.tage-text { font-size:12.5px; color:#f6ecd8; text-align:center; line-height:1.25; }
:root[data-theme="light"] .tage-text { color:#3a2814; }
.tage-text b { color:#ffe08c; } :root[data-theme="light"] .tage-text b { color:#8a5a00; }

#route-kopf { display:flex; align-items:center; gap:10px; min-width:0; height:var(--rkh, 30px); overflow:hidden; font-size:14px; color:#fff1d6; }
:root[data-theme="light"] #route-kopf { color:#2a1d0c; }
#route-kopf .rk-titel { font-family:var(--kopf); font-weight:900; font-size:16px; white-space:nowrap; padding:2px 10px; border-radius:7px; color:#2a1a08;
  background:linear-gradient(180deg, #f6dc9a, #c99a46); border:1px solid #6a4a14; border-left:5px solid var(--sf, #c99a46); }
#route-kopf .rk-info { display:flex; gap:12px; white-space:nowrap; overflow:hidden; }
#route-kopf .rk-info span { cursor:help; } #route-kopf .rk-info b { color:#ffe08c; } :root[data-theme="light"] #route-kopf .rk-info b { color:#8a5a00; }
#route-kopf .ksym { width:16px; height:16px; vertical-align:-3px; }
#route-kopf .knopf { margin-left:auto; min-height:28px; padding:3px 10px; font-size:13px; }
#route { position:relative; display:flex; flex-direction:column; gap:12px; align-items:flex-start; min-height:0; }
.r-slots { display:flex; gap:6px; flex:none; }
.r-slot { position:relative; flex:none; width:var(--rk, 92px); height:calc(var(--rk, 92px) * 1.38); border-radius:9px; border:2px dashed rgba(255,230,190,.32); display:flex; align-items:center; justify-content:center;
  font:800 calc(var(--rk, 92px) * .3)/1 var(--kopf); color:rgba(255,236,200,.28); }
:root[data-theme="light"] .r-slot { border-color:rgba(90,60,30,.32); color:rgba(90,60,30,.32); }
.r-slot.jetzt { border-color:#ffe08c; color:rgba(255,224,140,.6); background:rgba(255,224,140,.07); }
.r-slot > .karte { position:absolute; left:-2px; top:-2px; }
.r-slot .r-pkt { position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); z-index:3; min-width:34px; padding:2px 8px; border-radius:11px; font:900 15px/1.1 var(--sans); text-align:center;
  color:#14300c; background:linear-gradient(#c8f0a8, #6ab84a); border:1px solid #1c4a0c; box-shadow:0 2px 5px rgba(0,0,0,.5); }
.r-slot .r-pkt.null { color:#3a2a20; background:linear-gradient(#e8dccb, #b8a890); border-color:#5a4a3a; }
.r-slot .r-geist { opacity:.55; filter:saturate(.7); }
.r-slot .r-schild { position:absolute; left:50%; top:-12px; transform:translateX(-50%); z-index:3; white-space:nowrap; padding:1px 8px; border-radius:9px; font:800 12px/1.3 var(--sans);
  color:#2a1a08; background:#ffe08c; border:1px solid #6a4a14; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.r-slot .r-schild.nein { background:#e8dccb; color:#4a3a2a; }
.r-sereien { min-width:0; width:100%; display:flex; align-items:center; gap:10px; }
.r-sereien .rs-titel { flex:none; font-size:12px; color:#f6ecd8; letter-spacing:1px; text-transform:uppercase; font-weight:800; white-space:nowrap; }
:root[data-theme="light"] .r-sereien .rs-titel { color:#3a2814; }
.rs-fach { display:flex; flex-wrap:wrap; gap:4px; }
.rs-fach .karte + .karte { margin-left:calc(var(--sk, 50px) * -.42); }
.rs-leer { font-size:12px; color:rgba(255,236,200,.7); font-style:italic; line-height:1.3; }
:root[data-theme="light"] .rs-leer { color:#5a4428; }
.r-slot.sieht > .karte, .rs-fach .karte.sieht { box-shadow:0 0 0 3px #9ff0c0, 0 0 16px rgba(160,240,190,.7); }
.r-slot.wertet > .karte { box-shadow:0 0 0 4px #fff3b0, 0 0 24px rgba(255,224,140,.95); transform:translateY(-6px); }
.mini.sieht { box-shadow:0 0 0 2px #9ff0c0; }

.karte { position:relative; flex:none; display:block; width:var(--kw, 80px); height:calc(var(--kw, 80px) * 1.38); border-radius:calc(var(--kw, 80px) * .08); font-size:calc(var(--kw, 80px) / 6);
  background:linear-gradient(160deg, color-mix(in srgb, var(--lf, #9a7a4a) 80%, #fff 20%), var(--lf, #9a7a4a) 45%, var(--ld, #4a3416)); border:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.45); overflow:hidden; transition:transform .2s, box-shadow .2s; color:#fff; }
.karte .k-bild { position:absolute; left:6%; right:6%; top:4.5%; bottom:21%; border-radius:.35em; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -10px 16px rgba(0,0,0,.25); }
.karte.nacht .k-bild { box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 22px rgba(10,20,60,.55); }
.karte .ksym { width:1.15em; height:1.15em; display:inline-block; vertical-align:middle; filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.k-plak { position:absolute; left:2%; top:1.5%; width:2.25em; height:2.25em; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:radial-gradient(circle at 35% 30%, #fff3c4, #d8a84a 55%, #7a5414); border:1px solid #3a2406; box-shadow:0 2px 4px rgba(0,0,0,.55); color:#2a1806; }
.k-plak b { font:900 .95em/1 var(--sans); letter-spacing:-.02em; }
.k-plak .ksym { width:.8em; height:.8em; margin-top:.05em; }
.k-sterne { position:absolute; left:4%; top:28%; display:flex; flex-direction:column; gap:.1em; }
.k-sterne .ksym { width:1.25em; height:1.25em; }
.k-waren { position:absolute; right:5%; top:3.5%; display:flex; flex-direction:column; gap:.08em; padding:.15em; border-radius:.5em; background:rgba(20,10,4,.35); }
.k-land { position:absolute; left:6%; bottom:22%; } .k-land .ksym { width:1.1em; height:1.1em; }
.k-auftrag { position:absolute; left:3%; right:3%; bottom:2.5%; height:18%; display:flex; align-items:center; justify-content:center; gap:.15em; padding:0 .2em; border-radius:.35em;
  background:linear-gradient(180deg, #f6ebcf, #dcc79c); border:1px solid rgba(60,40,10,.6); color:#2a1806; box-shadow:inset 0 1px 0 #fff8; white-space:nowrap; overflow:hidden; }
.k-auftrag .ksym { width:1.05em; height:1.05em; }
.k-p { font:900 max(1.05em, 12px)/1 var(--sans); } .k-p.gross { font-size:max(1.12em, 12.5px); line-height:1; }
.k-mal { font-size:max(.8em, 12px); font-weight:700; margin:0 .05em; }
.k-satz { display:inline-flex; } .k-satz .ksym { width:.8em; height:.8em; margin-left:-.12em; }
.k-bed { display:inline-flex; align-items:center; gap:.02em; padding:0 .15em; border-radius:.3em; background:rgba(120,40,30,.14); }
.k-bw { position:relative; display:inline-flex; } .k-bw i { font:900 max(.62em, 12px)/1 var(--sans); font-style:normal; margin-right:.05em; align-self:center; }
.k-bed .ksym { width:.85em; height:.85em; }
.k-pfeil { font-weight:900; font-size:.95em; color:#6a3a10; }
.k-ohne { font-size:max(.62em, 12px); font-style:italic; color:#5a4428; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.karte.ks .k-bild { bottom:4.5%; }
.karte.ks.f-x { --lf:#a8824a; --ld:#4a3416; }
.ks-kopf { position:absolute; left:4%; right:4%; top:3%; display:flex; flex-wrap:wrap; gap:.1em; padding:.12em; border-radius:.4em; background:rgba(20,10,4,.45); width:max-content; max-width:92%; }
.karte.ks .k-auftrag { height:19%; }
.karte.krueck { background:radial-gradient(circle at 50% 45%, #a8485a, #6a2234 60%, #3a1018); }
.karte.krueck .kr-muster { position:absolute; inset:6%; border-radius:.4em; border:1px solid rgba(255,220,160,.5);
  background:repeating-linear-gradient(45deg, rgba(255,220,160,.12) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(255,220,160,.12) 0 2px, transparent 2px 9px); }
.karte.krueck .kr-st, .karte.ksrueck .kr-st { position:absolute; left:50%; top:50%; width:2.4em; height:2.4em; transform:translate(-50%, -50%); }
.karte.ksrueck { background:radial-gradient(circle at 50% 45%, #d8b06a, #8a6028 60%, #4a3010); }
.karte.verdeckt::after { content:"verdeckt"; position:absolute; left:0; right:0; top:42%; text-align:center; font:800 .75em/1.4 var(--sans); color:#fff; background:rgba(40,20,30,.75); letter-spacing:.06em; }
.karte.dreh { animation:dreh .6s ease-out; }
@keyframes dreh { 0% { transform:rotateY(90deg) scale(1.08); } 100% { transform:none; } }
.karte.waehlbar { cursor:pointer; }
.k-vor { position:absolute; left:50%; top:58%; transform:translateX(-50%); z-index:2; padding:1px 7px; border-radius:9px; font:900 max(.78em, 12px)/1.25 var(--sans);
  color:#14300c; background:linear-gradient(#d4f6b8, #7ac458); border:1px solid #1c4a0c; box-shadow:0 2px 4px rgba(0,0,0,.5); pointer-events:none; }
.k-vor.null { color:#3a2a20; background:linear-gradient(#efe4d2, #c4b49a); border-color:#5a4a3a; }
#markt .karte.passt::before { content:""; position:absolute; right:3%; bottom:22%; width:1.5em; height:1.5em; border-radius:50%; z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9l9-6 9 6v12z' fill='%23c8954a' stroke='%235a3a10' stroke-width='1.2'/%3E%3Cpath d='M8.5 21v-5a3.5 3.5 0 0 1 7 0v5z' fill='%233a2410'/%3E%3C/svg%3E") center / 80% no-repeat, #fff3c4;
  border:1px solid #6a4a14; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.wt-liste .sz-zeile.wt-blick { box-shadow:0 0 0 2px #9ff0c0; }
.wt-liste .sz-zeile { cursor:pointer; }
@media (prefers-reduced-motion: reduce) { .karte.dreh, .mini.dreh, #markt .karte.waehlbar, .uhr.knapp { animation:none; } }

#meldungen { position:absolute; right:12px; top:542px; bottom:24px; width:276px; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; z-index:20; pointer-events:none; overflow:hidden; }
#stage.hoch #meldungen { left:22px; right:22px; width:auto; top:90px; bottom:auto; height:var(--sh, 104px); justify-content:flex-end; }
#partie:has(#ch-chat:not([hidden])) #meldungen { justify-content:flex-start; }
#partie:has(#wahl:not([hidden])) #meldungen, #partie:has(#endtafel:not([hidden])) #meldungen { visibility:hidden; }
.meldung { flex:none; padding:6px 12px; border-radius:9px; font-size:14px; line-height:1.35; color:var(--perg-t); text-align:center;
  background:var(--perg); border:1px solid rgba(80,50,20,.45); box-shadow:0 6px 16px rgba(0,0,0,.35); transition:opacity .5s, transform .5s; }
.meldung.dran { border:2px solid #b8862e; } .meldung.schlecht { border:2px solid #a8302a; } .meldung.gut { border:2px solid #3a8a4a; }
.meldung.weg { opacity:0; transform:translateY(-8px); }
.meldung b { color:#2a1a08; }

#wahl { left:50%; top:50%; transform:translate(-50%, -50%); width:min(760px, 94%); max-height:calc(100% - 16px); padding:14px 16px; z-index:30; text-align:center; display:flex; flex-direction:column; }
#wahl .wa-titel, #wahl .wa-unter, #wahl .wa-knoepfe, #wahl .wa-rat { flex:none; }
#wahl .wa-karten { flex:0 1 auto; min-height:0; overflow-y:auto; padding:4px 2px; }
.wa-titel { font-family:var(--kopf); font-size:20px; color:#fff3d6; margin-bottom:4px; }
.wa-unter { font-size:13.5px; color:#f0e2c6; margin-bottom:10px; }
.wa-karten { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.wa-k { display:flex; flex-direction:column; align-items:center; gap:6px; width:150px; padding:8px; border-radius:10px; background:rgba(0,0,0,.25); border:1px solid rgba(255,230,190,.35); color:#fff3d6; cursor:pointer; }
@media (hover: hover) { .wa-k:hover { border-color:#ffe08c; background:rgba(255,224,140,.12); } }
.wa-k.an { border-color:#fff3b0; background:rgba(255,224,140,.2); box-shadow:0 0 0 2px #ffe08c; }
.wa-t { font-size:12.5px; line-height:1.3; color:#f0e2c6; }
.wa-knoepfe { display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.wa-rat { margin-top:8px; padding:5px 9px; border-radius:7px; background:rgba(255,224,140,.18); font-size:13.5px; color:#fff3d6; }

#wtafel { position:absolute; left:12px; right:12px; top:10px; height:calc(var(--sh, 118px) + var(--mh, 182px) + 10px); z-index:25; display:flex; flex-direction:column; padding:10px 14px 8px; border-radius:12px;
  background:linear-gradient(180deg, rgba(36,24,14,.94), rgba(22,14,8,.94)); border:2px solid #c8a04a; box-shadow:0 14px 34px rgba(0,0,0,.55); color:#f2ece2; }
.wt-kopf { display:flex; align-items:baseline; gap:12px; flex:none; }
.wt-kopf b { font-family:var(--kopf); font-size:20px; color:#f6d896; }
.wt-kopf span { font-size:13.5px; color:#d8cfc0; }
.wt-liste { flex:1; min-height:0; overflow-y:auto; margin-top:6px; padding-right:4px; }
.wt-liste .sz-liste { gap:5px; }
.wt-liste .sz-zeile { padding:5px 10px; grid-template-columns:minmax(120px, 170px) 70px 1fr; }
.wt-liste .sz-z { font-size:24px; }
.wt-liste .sz-chip { font-size:12.5px; padding:2px 8px; }
.wt-fuss { flex:none; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:6px; min-height:40px; }
.wt-fuss small { color:#b9b0a2; font-size:13px; }

#seite { position:absolute; right:12px; top:64px; bottom:16px; width:276px; display:flex; flex-direction:column; gap:10px; z-index:3; }
#hand { position:relative; flex:none; height:178px; padding:0 4px 4px; }
.h-titel { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#2a1a08; font-weight:800; margin-bottom:6px;
  padding:3px 10px; border-radius:8px; background:linear-gradient(180deg, #f6dc9a, #c99a46); border:1px solid #6a4a14; box-shadow:inset 0 1px 0 #fff6, 0 3px 8px rgba(0,0,0,.45); }
.h-titel small { text-transform:none; letter-spacing:0; color:#5a3e10; font-weight:700; font-size:12px; }
.h-karten .karte { box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px rgba(0,0,0,.6); }
.h-leer { padding:6px 10px; border-radius:8px; background:rgba(20,12,6,.6); }
.h-karten { display:flex; gap:6px; justify-content:center; align-items:flex-end; height:138px; }
.h-karten .karte { cursor:pointer; }
.h-karten .karte.passt::before { content:""; position:absolute; right:3%; bottom:22%; width:1.5em; height:1.5em; border-radius:50%; z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9l9-6 9 6v12z' fill='%23c8954a' stroke='%235a3a10' stroke-width='1.2'/%3E%3Cpath d='M8.5 21v-5a3.5 3.5 0 0 1 7 0v5z' fill='%233a2410'/%3E%3C/svg%3E") center / 80% no-repeat, #fff3c4;
  border:1px solid #6a4a14; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.h-leer { color:#f0e2c6; font-style:italic; font-size:13px; align-self:center; text-align:center; }
#lage { flex:none; height:120px; overflow:hidden; padding:9px 12px; border-radius:10px; font-size:14px; line-height:1.38; color:var(--perg-t);
  background:linear-gradient(180deg, rgba(243,234,214,.95), rgba(226,212,184,.95)); border:1px solid rgba(80,50,20,.45); box-shadow:0 6px 16px rgba(0,0,0,.35); }
#lage .lg-k { display:block; color:#5a4834; font-size:12.5px; margin-top:3px; }
.lg-rat { margin-top:5px; padding:4px 7px; border-radius:6px; background:rgba(200,160,74,.22); font-size:13px; line-height:1.3; }
.lg-rat .sgzi { width:15px; height:15px; vertical-align:-2px; }
#aktion { position:relative; flex:none; height:104px; overflow:hidden; display:flex; flex-direction:column; gap:7px; padding:10px 10px 56px; border-radius:10px;
  background:linear-gradient(180deg, rgba(120,82,50,.42), rgba(58,38,20,.42)); border:1px solid rgba(40,24,10,.6); box-shadow:inset 0 1px 0 rgba(255,230,190,.25), 0 6px 16px rgba(0,0,0,.35); }
.knopf { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:7px 12px; border-radius:9px; font:800 15px var(--sans); color:#2a1d08;
  background:linear-gradient(#ffe39a, #d8a23a); border:1px solid #fff0c0; box-shadow:0 2px 0 #6a4a10, inset 0 1px 0 #fff6; }
.knopf:disabled { opacity:.45; cursor:default; }
.knopf.leise { background:linear-gradient(180deg, rgba(255,240,210,.18), rgba(0,0,0,.2)); color:#fff3d6; border-color:rgba(255,230,190,.4); box-shadow:none; }
.knopf.klein { min-height:34px; padding:5px 9px; font-size:13.5px; }
.knopf .sgzi { width:17px; height:17px; }
.a-warte { color:#f0e2c6; font-style:italic; font-size:14px; padding:6px 2px; min-height:38px; }
#a-rat { position:absolute; left:10px; right:10px; bottom:10px; white-space:nowrap; }
#a-legen, #a-nimm, #a-wahl { white-space:nowrap; }
#pchat { flex:1; min-height:0; display:flex; flex-direction:column; padding:8px 10px; border-radius:10px; color:var(--perg-t);
  background:linear-gradient(180deg, rgba(243,234,214,.92), rgba(226,212,184,.92)); border:1px solid rgba(80,50,20,.45); box-shadow:0 6px 16px rgba(0,0,0,.35); }
.ch-tabs { display:flex; gap:4px; margin-bottom:6px; }
.ch-tabs button { flex:1; padding:5px; font-size:13px; font-weight:800; border-radius:7px; border:1px solid rgba(80,50,20,.4); background:rgba(255,255,255,.25); color:#3a2a16; }
.ch-tabs button.an { background:#7a5030; color:#fff3d6; }
.ch-liste { flex:1; min-height:0; overflow-y:auto; font-size:13px; line-height:1.38; }
.ch-z { padding:2px 0 2px 7px; border-left:3px solid var(--rf, transparent); margin-bottom:2px; }
.ch-z.leise { color:#5a4834; } .ch-z.abschnitt { margin-top:6px; font-weight:800; color:#6a3a10; border-left-color:#b8862e; } .ch-z.schlecht { color:#a8302a; }
.ch-chat { flex:1; min-height:0; display:flex; flex-direction:column; }
#pchatwin { background:rgba(255,255,255,.35); color:var(--perg-t); }
.pc-knoepfe { display:flex; gap:6px; margin-top:6px; } .pc-knoepfe button { flex:1; padding:5px; border-radius:7px; border:1px solid rgba(80,50,20,.4); background:rgba(255,255,255,.3); font-size:13px; color:#3a2a16; }
.pc-knoepfe .sgzi { width:15px; height:15px; vertical-align:-3px; }

.bildnis { flex:none; display:inline-block; width:var(--bg, 40px); height:var(--bg, 40px); border-radius:50%; background-size:cover; background-position:center; border:3px solid var(--sf, #c99a46);
  box-shadow:0 2px 6px rgba(0,0,0,.5); }

#flug { position:absolute; inset:0; pointer-events:none; z-index:70; }
.flieg { position:absolute; left:0; top:0; transform:translate(-50%, -50%); filter:drop-shadow(2px 6px 4px rgba(0,0,0,.45)); }
.pkt { position:absolute; transform:translate(-50%, -50%); font:900 20px var(--kopf); color:#fff6d6; text-shadow:0 0 6px var(--pf, #b8862e), 0 2px 2px rgba(0,0,0,.7); animation:pkt 2.5s ease-out forwards; pointer-events:none; }
@keyframes pkt { 0% { opacity:0; transform:translate(-50%, -30%) scale(.6); } 15% { opacity:1; transform:translate(-50%, -60%) scale(1.15); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -150%) scale(1); } }
#hinweis { position:absolute; left:50%; bottom:120px; transform:translateX(-50%); max-width:560px; padding:9px 18px; border-radius:10px; z-index:72; font-size:15px; color:#fff;
  background:rgba(150,40,20,.94); box-shadow:0 8px 20px rgba(0,0,0,.4); pointer-events:none; }
#hinweis.neutral { background:var(--perg); color:var(--perg-t); border:1px solid rgba(80,50,20,.45); }
#ansicht-menu { right:12px; top:56px; width:330px; padding:10px 14px; z-index:60; }
.am-t { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#f2d79a; margin:8px 0 4px; font-weight:800; }
#ansicht-menu label { display:flex; gap:8px; align-items:flex-start; padding:4px 0; font-size:14px; color:#fff3d6; } #ansicht-menu label small { display:block; color:#e8d6b0; font-size:12px; }
.am-reihe { display:flex; flex-wrap:wrap; gap:6px; }
#en-zurueck { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:none; gap:10px; z-index:85; }
.konfetti { position:absolute; top:-30px; width:var(--gr); height:calc(var(--gr) * .7); background:var(--kf); border-radius:2px; z-index:90; animation:fall linear forwards; pointer-events:none; }
@keyframes fall { to { transform:translateY(900px) rotate(540deg); } }
@keyframes puls { 50% { opacity:.6; } }
.sz-karte .karte { --kw:52px; }
#feld .sz-karte .sz-kb:has(.zk-sammel), #feld .sz-karte .sz-kb > .zk-sammel { max-width:132px; }
.zk-sammel { display:flex; align-items:center; } .zk-sammel .karte + .karte { margin-left:-24px; }
.en-route { display:flex; gap:2px; margin-top:3px; } .en-route .mini { --mw:18px; }

#stage.hoch #kopf { left:6px; right:6px; top:6px; height:64px; padding-left:96px; gap:6px; }
#stage.hoch .k-phase { display:none; }
#stage.hoch #kopf .rechts { margin-left:auto; gap:4px; }
#stage.hoch #kopf .logo { display:none; }
#stage.hoch #kopf .runde { font-size:14px; } #stage.hoch #kopf .runde b { font-size:20px; }
#stage.hoch #kopf .kb-ic { width:58px; height:56px; } #stage.hoch #kopf .kb-ic .sgzi { width:26px; height:26px; }
#stage.hoch #k-verlauf .lang { display:none; }
#stage.hoch .uhr { font-size:17px; }
#stage.hoch #feld { left:14px; right:14px; top:80px; bottom:auto; height:var(--fh, 760px); padding:10px 8px; grid-template-rows:var(--sh, 150px) var(--mh, 160px) var(--rkh, 30px) minmax(0, 1fr); }
#stage.hoch #sitze { flex-wrap:wrap; gap:6px; align-content:flex-start; }
#stage.hoch .sitz { flex:1 1 30%; padding:4px 5px 5px; }
#stage.hoch .st-name { font-size:15px; } #stage.hoch .st-name small { display:none; }
#stage.hoch .st-zahlen { font-size:14px; gap:6px; }
#stage.hoch .st-zahlen .st-ueb { display:none; }
#stage.hoch #mitte { grid-template-columns:minmax(0, 1fr); grid-template-rows:40px minmax(0, 1fr); gap:4px; }
#stage.hoch #stapel { display:none; }
#stage.hoch #tage { grid-row:1; flex-direction:row; justify-content:center; gap:10px; }
#stage.hoch .tage-leiste { grid-template-columns:repeat(8, 30px); } #stage.hoch .tag { width:30px; height:30px; font-size:14px; }
#stage.hoch .tage-text { font-size:14px; text-align:left; }
#stage.hoch #markt { grid-row:2; gap:5px; }
#stage.hoch #route { flex-direction:column; gap:8px; }
#stage.hoch .r-slots { flex-wrap:wrap; justify-content:center; width:100%; row-gap:18px; }
#stage.hoch #route-kopf { font-size:14px; } #stage.hoch #route-kopf .rk-info { display:none; }
#stage.hoch #seite { left:14px; right:14px; width:auto; top:calc(96px + var(--fh, 760px)); bottom:12px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0, 1fr); gap:6px; }
#stage.hoch #hand { grid-column:1 / -1; height:auto; }
#stage.hoch .h-karten { height:auto; }
#stage.hoch #lage { height:auto; font-size:15px; }
#stage.hoch #aktion { height:auto; min-height:128px; }
#stage.hoch #pchat { display:none; }
#stage.hoch.verlauf #pchat { display:flex; position:fixed; left:8px; right:8px; top:80px; height:60%; z-index:65; }
#stage.hoch #wtafel { height:auto; bottom:calc(30px + var(--rk, 110px) * 2.76 + 40px); }
#stage.hoch #wahl { width:96%; }
#stage.hoch .wa-k { width:46%; }
#stage.hoch #hinweis { bottom:auto; top:40%; font-size:16px; }
#stage.hoch .banner { left:50%; min-width:0; width:max-content; max-width:92%; padding:14px 20px 12px; }
#stage.hoch .bn-titel { font-size:32px; letter-spacing:2px; }
#stage.hoch .meldung { font-size:16px; }
#stage.hoch .ch-liste, #stage.hoch .lg-rat, #stage.hoch #lage .lg-k { font-size:14px; }
#seite, #kopf, #wahl, #wtafel { touch-action:manipulation; }
@media (pointer: coarse) {
  .knopf { min-height:44px; }
  #route-kopf .knopf { min-height:30px; }
  #stage.hoch .knopf { min-height:64px; font-size:17px; }
  #stage.hoch #route-kopf .knopf { min-height:64px; font-size:16px; padding:4px 14px; }
  #stage.hoch #kopf { height:68px; }
  #stage.hoch #kopf .kb-ic { width:64px; height:64px; }
  #stage.hoch #aktion { min-height:160px; padding-bottom:84px; }
  #stage.hoch .ch-tabs button { min-height:64px; }
}
#stage.quer-handy #kopf { left:6px; right:6px; top:4px; height:70px; padding:0 6px 0 12px; gap:10px; }
#stage.quer-handy #kopf .logo { display:none; }
#stage.quer-handy #kopf .runde { font-size:16px; } #stage.quer-handy #kopf .runde b { font-size:21px; }
#stage.quer-handy .k-phase { height:62px; font-size:17px; line-height:1.2; white-space:normal; }
#stage.quer-handy #kopf .rechts { margin-left:auto; gap:5px; }
#stage.quer-handy #kopf .kb-ic { width:68px; height:68px; } #stage.quer-handy #kopf .kb-ic .sgzi { width:28px; height:28px; }
#stage.quer-handy #k-verlauf { display:inline-flex; width:auto; padding:0 12px; font-size:16px; }
#stage.quer-handy #k-verlauf .lang { display:none; }
#stage.quer-handy .uhr { font-size:18px; }
#stage.quer-handy #feld { left:10px; right:282px; top:80px; bottom:6px; padding:6px; row-gap:4px; }
#stage.quer-handy #seite { right:8px; top:80px; bottom:6px; width:264px; gap:8px; }
#stage.quer-handy #pchat { display:none; }
#stage.quer-handy.verlauf #pchat { display:flex; position:absolute; left:-180px; right:0; top:0; bottom:0; z-index:65; }
#stage.quer-handy .ch-tabs button { min-height:68px; font-size:16px; }
#stage.quer-handy .ch-liste { font-size:16px; }
#stage.quer-handy #pchatwin { font-size:16px; }
#stage.quer-handy #pchatin { min-height:68px; }
#stage.quer-handy .pc-knoepfe button { min-height:68px; font-size:16px; }
#stage.quer-handy #hand { height:auto; padding:0 2px 2px; }
#stage.quer-handy .h-titel, #stage.quer-handy .h-titel small { font-size:16px; }
#stage.quer-handy .h-titel { margin-bottom:4px; letter-spacing:.5px; padding:2px 8px; }
#stage.quer-handy .h-titel small { display:none; }
#stage.quer-handy .h-karten { height:126px; }
#stage.quer-handy .h-leer { font-size:16px; }
#stage.quer-handy #lage { flex:1; min-height:0; height:auto; overflow-y:auto; padding:7px 10px; font-size:16px; line-height:1.34; scrollbar-width:thin; scrollbar-color:#b8862e transparent; }
#stage.quer-handy #lage .lg-k, #stage.quer-handy .lg-rat { font-size:16px; }
#stage.quer-handy #aktion { height:84px; flex-direction:row; align-items:center; gap:8px; padding:7px; }
#stage.quer-handy #aktion .knopf { min-height:70px; font-size:18px; }
#stage.quer-handy #aktion > .knopf:not(#a-rat) { flex:1; min-width:0; }
#stage.quer-handy #a-rat { position:static; flex:none; padding:7px 12px; }
#stage.quer-handy .a-warte { flex:1; font-size:16px; min-height:0; }
#stage.quer-handy #sitze { gap:8px; }
#stage.quer-handy .sitz { flex:1 1 0; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto; align-content:center; padding:4px 6px; }
#stage.quer-handy .sitz .bildnis, #stage.quer-handy .st-route { display:none; }
#stage.quer-handy .st-name { font-size:16px; }
#stage.quer-handy .st-zahlen { font-size:16px; column-gap:8px; }
#stage.quer-handy .st-zahlen b { font-size:16px; }
#stage.quer-handy .st-zahlen .st-ueb { display:none; }
#stage.quer-handy .st-reihe { font-size:16px; min-width:26px; height:26px; top:-4px; right:-4px; }
#stage.quer-handy #mitte { grid-template-columns:minmax(0, 1fr); }
#stage.quer-handy #stapel, #stage.quer-handy #tage { display:none; }
#stage.quer-handy #markt { padding:2px 6px; }
#stage.quer-handy #markt .leer-text { font-size:16px; }
#stage.quer-handy #route-kopf { font-size:16px; gap:10px; }
#stage.quer-handy #route-kopf .rk-titel { font-size:17px; }
#stage.quer-handy #route-kopf .rk-info { flex-wrap:wrap; column-gap:12px; row-gap:0; min-width:0; line-height:1.2; }
#stage.quer-handy #route-kopf .rk-info [data-ki="tage"] { display:none; }
#stage.quer-handy #route-kopf .knopf { display:none; }
#stage.quer-handy #route { flex-direction:column; gap:12px; padding-top:12px; }
#stage.quer-handy #feld.breit #route { flex-direction:row; align-items:flex-start; gap:12px; }
#stage.quer-handy .r-sereien { gap:8px; }
#stage.quer-handy #feld.breit .r-sereien { flex:1; min-width:0; flex-direction:column; align-items:flex-start; gap:4px; }
#stage.quer-handy .r-sereien .rs-titel, #stage.quer-handy .rs-leer { font-size:16px; }
#stage.quer-handy .rs-titel { letter-spacing:.5px; }
#stage.quer-handy .r-slot .r-schild { font-size:16px; }
#stage.quer-handy .k-plak b { font-size:max(.95em, 16px); }
#stage.quer-handy .k-p { font-size:max(1.05em, 16px); } #stage.quer-handy .k-p.gross { font-size:max(1.12em, 16px); }
#stage.quer-handy .k-mal { font-size:max(.8em, 16px); }
#stage.quer-handy .k-bw i, #stage.quer-handy .k-ohne { font-size:max(.62em, 16px); }
#stage.quer-handy .k-vor { font-size:max(.78em, 16px); }
#stage.quer-handy .k-pfeil { font-size:max(.95em, 16px); }
#stage.quer-handy .k-auftrag, #stage.quer-handy .karte.ks .k-auftrag { height:auto; min-height:max(18%, 23px); flex-wrap:wrap; align-content:center; row-gap:0; padding:2px .1em; gap:.1em; white-space:normal; line-height:1.25; }
#stage.quer-handy .k-ohne { overflow:visible; line-height:1.25; }
#stage.quer-handy .k-bed, #stage.quer-handy .k-satz { flex-wrap:wrap; justify-content:center; }
.k-ohne .ko-k { display:none; }
#stage.quer-handy .k-ohne .ko-l { display:none; } #stage.quer-handy .k-ohne .ko-k { display:inline; }
#stage.quer-handy #meldungen { left:16px; right:288px; width:auto; top:86px; bottom:auto; height:calc(var(--sh, 68px) + var(--mh, 112px)); justify-content:flex-start; }
#stage.quer-handy .meldung { font-size:16px; }
#stage.quer-handy .wa-unter, #stage.quer-handy .wa-rat, #stage.quer-handy .wa-t { font-size:16px; }
#stage.quer-handy #wahl { max-height:calc(100% - 8px); padding:8px 12px; }
#stage.quer-handy #wahl .knopf { min-height:70px; font-size:18px; }
#stage.quer-handy .wt-kopf span, #stage.quer-handy .wt-fuss small, #stage.quer-handy .wt-liste .sz-chip { font-size:16px; }
#stage.quer-handy .wt-fuss .knopf { min-height:68px; }
#stage.quer-handy #hinweis { bottom:auto; top:40%; font-size:16px; }
#stage.quer-handy #ansicht-menu { top:76px; max-height:calc(100% - 82px); overflow-y:auto; }
#stage.quer-handy #ansicht-menu label { font-size:16px; } #stage.quer-handy #ansicht-menu label small { font-size:16px; }
#stage.quer-handy .am-t { font-size:16px; }
#stage.quer-handy .ov-box { max-height:96%; padding:12px 18px; }
#stage.quer-handy .ov-knoepfe .kb { min-height:68px; }
#stage.quer-handy .en-platz.kopf, #stage.quer-handy .en-platz .nmx small, #stage.quer-handy .en-platz .w small { font-size:16px; }
#stage.quer-handy .banner { left:calc((100% - 282px) / 2); min-width:0; width:max-content; max-width:500px; padding:12px 22px 10px; }
#stage.quer-handy .bn-unter { font-size:16px; letter-spacing:.5px; }
#stage.quer-handy .wa-k[data-s] { flex-direction:row; width:auto; max-width:420px; text-align:left; gap:12px; }
#stage.quer-handy .wa-k[data-n] { width:132px; }
#stage.quer-handy .wa-unter { margin-bottom:6px; }
#stage.quer-handy .k-vor { top:36%; }
#stage.quer-handy .h-karten .karte.passt::before, #stage.quer-handy #markt .karte.passt::before { bottom:auto; top:36%; }
#stage.hoch .st-route { flex-wrap:wrap; row-gap:3px; max-width:calc(var(--mw, 20px) * 4 + 6px); }
#stage.hoch .mini b { font-size:16px; }
#stage.hoch .k-plak b { font-size:max(.95em, 12px); }
#stage.hoch .knopf { min-height:56px; }
#stage.hoch .k-auftrag, #stage.hoch .karte.ks .k-auftrag { height:auto; min-height:max(18%, 23px); flex-wrap:wrap; align-content:center; row-gap:0; padding:2px .1em; gap:.1em; white-space:normal; line-height:1.25; }
#stage.hoch .k-bed, #stage.hoch .k-satz { flex-wrap:wrap; justify-content:center; }
#stage.hoch .k-ohne { overflow:visible; line-height:1.25; }
#stage.hoch .k-vor { top:36%; }
#stage.hoch .h-karten .karte.passt::before, #stage.hoch #markt .karte.passt::before { bottom:auto; top:36%; }
#stage.hoch #feld.zweireihig .r-slots { max-width:calc(var(--rk, 92px) * 4 + 20px); margin:0 auto; }
@media (pointer: coarse) {
  #stage.hoch #kopf { height:76px; padding-left:72px; gap:4px; }
  #stage.hoch #kopf .rechts { gap:3px; }
  #stage.hoch #kopf .kb-ic { width:68px; height:70px; }
  #stage.hoch #kopf .runde { font-size:16px; letter-spacing:.5px; }
  #stage.hoch .knopf, #stage.hoch #route-kopf .knopf { min-height:70px; }
  #stage.hoch .ch-tabs button, #stage.hoch .pc-knoepfe button, #stage.hoch #pchatin { min-height:70px; }
  #stage.hoch .st-name, #stage.hoch .st-zahlen, #stage.hoch .st-zahlen b { font-size:16px; }
  #stage.hoch .st-reihe { font-size:16px; min-width:28px; height:28px; }
  #stage.hoch .tage-leiste { grid-template-columns:repeat(8, 34px); gap:4px; } #stage.hoch .tag { width:34px; height:34px; font-size:16px; }
  #stage.hoch .tage-text, #stage.hoch #route-kopf, #stage.hoch .h-titel, #stage.hoch .h-titel small, #stage.hoch .r-sereien .rs-titel, #stage.hoch .rs-leer { font-size:16px; }
  #stage.hoch #route-kopf .rk-titel { font-size:17px; }
  #stage.hoch .r-slot .r-schild { font-size:16px; }
  #stage.hoch #lage, #stage.hoch #lage .lg-k, #stage.hoch .lg-rat, #stage.hoch .ch-liste, #stage.hoch .a-warte, #stage.hoch .h-leer, #stage.hoch #markt .leer-text { font-size:16px; }
  #stage.hoch .wa-unter, #stage.hoch .wa-rat, #stage.hoch .wa-t, #stage.hoch .wt-kopf span, #stage.hoch .wt-fuss small, #stage.hoch .wt-liste .sz-chip, #stage.hoch .bn-unter { font-size:16px; }
  #stage.hoch #ansicht-menu label, #stage.hoch #ansicht-menu label small, #stage.hoch .am-t { font-size:16px; }
  #stage.hoch .en-platz.kopf, #stage.hoch .en-platz .nmx small, #stage.hoch .en-platz .w small { font-size:16px; }
  #stage.hoch .ov-knoepfe .kb, #stage.hoch .wt-fuss .knopf { min-height:70px; }
  #stage.hoch .k-plak b { font-size:max(.95em, 16px); }
  #stage.hoch .k-p { font-size:max(1.05em, 16px); } #stage.hoch .k-p.gross { font-size:max(1.12em, 16px); }
  #stage.hoch .k-mal, #stage.hoch .k-pfeil { font-size:max(.8em, 16px); }
  #stage.hoch .k-bw i, #stage.hoch .k-ohne { font-size:max(.62em, 16px); }
  #stage.hoch .k-vor { font-size:max(.78em, 16px); }
  #stage.hoch .k-ohne .ko-l { display:none; } #stage.hoch .k-ohne .ko-k { display:inline; }
}
#stage.quer-handy.verlauf #pchat { background:linear-gradient(180deg, #f3ead6, #e2d4b8); }
#stage.hoch .sz-schild, #stage.quer-handy .sz-schild { font-size:16px; }
#stage.quer-handy .en-route .mini, #stage.hoch .en-route .mini { --mw:32px; }
#stage.quer-handy .en-route .mini b, #stage.hoch .en-route .mini b { font-size:16px; }
#stage.quer-handy .r-slot .r-pkt, #stage.hoch .r-slot .r-pkt { font-size:16px; }
#stage.quer-handy #en-zurueck .kb, #stage.hoch #en-zurueck .kb { min-height:70px; }