:root {
  --bg:#14241a; --panel:rgba(16,32,22,.88); --panel2:rgba(26,46,32,.95); --panel-solid:#1a3022;
  --akz:#e8c05a; --akz-hell:#ffe08a; --akz2:#9a7414; --linie:rgba(232,192,90,.3);
  --text:#f0f2ea; --text-2:#d6dcca; --text-3:#aab8a0; --dim:#a8b89c;
  --gold:#ffd86b; --rot:#ff8a72; --gruen:#a6e07a; --blau:#8ec4f4;
  --ov-a:#22382a; --ov-b:#0e1c14; --scrim:rgba(4,12,8,.72);
  --schild-a:#2e5a3a; --schild-b:#183420; --schild-rand:#efe2c0; --schild-text:#fbf5e6; --schild-dim:#cfdcc4; --schild-gold:#f2cf6a;
  --aue-bild:url(img/aue.webp?v=1);
  --kopf:'Georgia', 'Times New Roman', serif;
  --sans:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
:root[data-theme="light"] {
  --bg:#e6e8dc; --panel:rgba(246,244,234,.93); --panel2:rgba(234,236,222,.97); --panel-solid:#eeeee0;
  --akz:#7a4a10; --akz-hell:#6a3c06; --akz2:#c08a3a; --linie:rgba(70,80,40,.3);
  --text:#1c2414; --text-2:#30402a; --text-3:#4a5a40; --dim:#4c5c44;
  --gold:#7a4e00; --rot:#b4232f; --gruen:#2f7a2a; --blau:#1a5fb4;
  --ov-a:#f4f2e6; --ov-b:#dcdecc; --scrim:rgba(30,40,20,.45);
  --schild-a:#f2e8cc; --schild-b:#ddd0a8; --schild-rand:#3e5a2a; --schild-text:#1e2a14; --schild-dim:#4a5a3a; --schild-gold:#7a4e00;
  --aue-bild:url(img/aue-hell.webp?v=1);
}
:root[data-ansicht="abend"] { --schild-a:#2a2a44; --schild-b:#14142a; --schild-gold:#ffcf6a; --aue-bild:url(img/aue-abend.webp?v=1); }
: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:#0a0604; 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, #1c3a2a 0%, #040c06 80%); }
:root[data-theme="light"] #wrap { background:radial-gradient(ellipse at center, #eef0dc 0%, #a4b08a 85%); }
#stage { position:relative; width:1280px; height:800px; flex:none; transform-origin:center center; overflow:hidden; background:var(--bg); -webkit-touch-callout:none; }
#kulisse { position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,16,10,.12), rgba(6,16,10,.38)), url(img/dorf-q.webp?v=1) center/cover, linear-gradient(180deg, #9cc4d8 0%, #c8dcae 40%, #4a7a44 70%, #23402a 100%); }
:root[data-ansicht="abend"] #kulisse { background:linear-gradient(180deg, rgba(6,16,10,.18), rgba(6,16,10,.42)), url(img/abend-q.webp?v=1) center/cover, linear-gradient(180deg, #1a2440 0%, #5a4a6a 40%, #1e3424 75%, #0c160e 100%); }
:root[data-theme="light"] #kulisse { background:linear-gradient(180deg, rgba(255,255,245,.04), rgba(255,255,245,.18)), url(img/herbst-q.webp?v=1) center/cover, linear-gradient(180deg, #dce4e0 0%, #e8dcc0 45%, #b8a070 75%, #7a6a40 100%); }
#stage.hoch #kulisse { background-image:linear-gradient(180deg, rgba(6,16,10,.12), rgba(6,16,10,.38)), url(img/dorf-h.webp?v=1), linear-gradient(180deg, #7aa6c8 0%, #e9cf9b 45%, #6f5338 70%, #3a2614 100%); }
:root[data-ansicht="abend"] #stage.hoch #kulisse { background-image:linear-gradient(180deg, rgba(6,16,10,.18), rgba(6,16,10,.42)), url(img/abend-h.webp?v=1), linear-gradient(180deg, #1a2440 0%, #6a4a5a 40%, #3a2614 75%, #1a1008 100%); }
:root[data-theme="light"] #stage.hoch #kulisse { background-image:linear-gradient(180deg, rgba(255,255,245,.04), rgba(255,255,245,.18)), url(img/herbst-h.webp?v=1), linear-gradient(180deg, #a8d0ec 0%, #f4e2b8 45%, #c8a070 75%, #8a6440 100%); }
#stage.lobbyhg #kulisse { filter:blur(3px) brightness(.6) saturate(.9); }
:root[data-theme="light"] #stage.lobbyhg #kulisse { filter:blur(3px) brightness(1.08) saturate(.75); }
[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, #2e5a3a, #163020); 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, #f6f4e8, #dcdcc4); box-shadow:inset 0 1px 0 #fff8, 0 2px 6px rgba(30,60,30,.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(6,16,10,.25), rgba(2,8,6,.5)); }
:root[data-theme="light"] #lobby, :root[data-theme="light"] #tisch { background:linear-gradient(180deg, rgba(246,244,230,.25), rgba(222,226,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(60,140,90,.3), rgba(6,16,10,.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(120,189,78,.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(60,140,90,.2), rgba(6,16,10,.3)); border:1px solid rgba(242,201,76,.25); }
:root[data-theme="light"] .lw-anleitung { background:rgba(120,189,78,.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(220,255,230,.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(30,60,30,.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; }
#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; }

#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; }
#hinweise { position:absolute; left:calc((100% - 466px) / 2); top:146px; transform:translateX(-50%); z-index:70; width:max-content; max-width:680px; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.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 { position:absolute; left:calc((100% - 466px) / 2); top:44%; z-index:75; min-width:420px; max-width:760px; 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: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; } }
#stage.hoch .konfetti { animation-name:fallenH; }
@keyframes fallenH { to { transform:translateY(1860px) 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 .an-farbe { width:12px; height:30px; justify-self:center; }
.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-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; }
.konfetti { border-radius:2px; width:10px; height:14px; }



.kinfo { position:absolute; z-index:72; width:300px; pointer-events:none; border-radius:12px; overflow:hidden; color:var(--text); background:var(--panel-solid); }
.kinfo .ki-kopf { display:flex; gap:11px; padding:10px; background:linear-gradient(135deg, var(--zf, #3a5a2a), rgba(10,14,30,.92)); color:#f2f4fa; }
.kinfo .ki-bild { flex:none; width:64px; height:64px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); }
.kinfo .ki-buch { font:900 34px/1 var(--kopf); color:#ffe7a0; }
.kinfo .ki-tt { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.kinfo .ki-titel { font-family:var(--kopf); font-size:21px; font-weight:900; color:#ffe7a0; line-height:1.1; }
.kinfo .ki-kat { font-size:12.5px; color:#d8deec; }
.kinfo .ki-gross { font:900 20px/1 var(--kopf); color:#fff; margin-top:3px; }
.kinfo .ki-zeilen { padding:7px 12px 3px; font-size:13px; }
.kinfo .ki-zeilen > div { display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.kinfo .ki-zeilen span { color:var(--dim); }
.kinfo .ki-zeilen b { text-align:right; color:var(--text); }
.kinfo .ki-regel { margin:4px 12px 8px; font-size:12.5px; line-height:1.4; color:var(--text-2); }
.kinfo .ki-tipp { margin:0 10px 8px; padding:7px 9px; border-radius:8px; font-size:12.5px; line-height:1.35; color:var(--text); background:rgba(111,180,240,.14); border:1px solid var(--blau); }
#flug { position:absolute; inset:0; z-index:60; pointer-events:none; }

.en-platz { grid-template-columns:44px 12px minmax(0, 1fr) 62px 62px 62px 62px 62px 108px; }
.en-platz .pl-farbe { background:var(--sf); height:30px; }
.en-platz .pk2 b { color:var(--gold); }
.en-platz .pk2 small { display:block; font-size:11.5px; font-weight:600; color:var(--dim); white-space:nowrap; font-family:var(--sans); }
.en-extra { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.en-rekord { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; font-size:14.5px; color:var(--text); background:rgba(255,216,107,.14); border:1px solid var(--gold); }
.en-rekord .sgzi { width:20px; height:20px; color:var(--gold); flex:none; }
.en-rekord.leise { background:transparent; border-color:var(--linie); color:var(--text-2); }
.en-tag { padding:8px 12px; border-radius:10px; border:1px solid var(--linie); background:rgba(0,0,0,.16); max-height:220px; overflow:auto; }
:root[data-theme="light"] .en-tag { background:rgba(255,255,240,.55); }
.en-tag-t { font:800 13px/1.3 var(--sans); letter-spacing:1px; text-transform:uppercase; color:var(--dim); margin-bottom:4px; }
.en-tag-t small { text-transform:none; letter-spacing:0; font-weight:600; }
.en-tag-z { display:grid; grid-template-columns:34px minmax(0, 1fr) 100px 90px; gap:8px; padding:2px 0; font-size:14.5px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.en-tag-z.ich { color:var(--text); font-weight:800; }
.en-erkl { font-size:12.5px; line-height:1.4; color:var(--dim); text-align:center; }

@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:44px; }
  .pc-knoepfe button { min-height:40px; }
  .ch-tabs button { min-height:40px; }
  .knopf .taste { display:none; }
  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); }
}
#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; }
.en-teilen { display:flex; align-items:center; gap:10px; margin:8px 0 2px; color:var(--text-2); font-size:13px; }
#stage.hoch .en-teilen { font-size:18px; }
.st-erf { flex:1 1 100%; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; margin-top:4px; }
.erf { display:grid; grid-template-columns:24px 1fr; column-gap:8px; align-items:center; padding:6px 8px; border-radius:8px; border:1px dashed var(--linie); opacity:.55; }
.erf .sgzi { grid-row:span 2; width:22px; height:22px; color:var(--text-3); }
.erf b { font-size:13px; color:var(--text-2); }
.erf small { font-size:11.5px; color:var(--text-3); }
.erf.ja { opacity:1; border-style:solid; border-color:rgba(242,201,76,.45); background:rgba(242,201,76,.08); }
.erf.ja .sgzi { color:var(--gold); }
.erf.ja b { color:var(--akz-hell); }

#kopf, #kopf-r { position:absolute; top:14px; height:56px; display:flex; align-items:center; gap:14px; padding:0 12px 0 16px; z-index:5; border-radius:10px;
  background:linear-gradient(180deg, var(--schild-a), var(--schild-b)); border:3px solid var(--schild-rand); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.45); color:var(--schild-text); }
#kopf { left:24px; width:min(640px, calc(100% - 420px)); }
#kopf-r { right:24px; gap:8px; padding:0 10px; margin-left:0; }
#kopf .logo { color:var(--schild-gold); text-shadow:0 2px 0 rgba(0,0,0,.45); }
#kopf .logo small, #kopf .runde { color:var(--schild-dim); }
#kopf .runde b, #kopf .k-phase b { color:var(--schild-text); }
#kopf .k-phase { color:var(--schild-text); }
#kopf .trenner { background:rgba(255,240,210,.3); }
#kopf-r .kb-ic { background:rgba(255,248,230,.12); color:var(--schild-text); border-color:rgba(255,240,210,.35); }
.uhr { --uf:#e2ad1e; --ut:#2a1c04; }

#flaeche { position:absolute; left:24px; top:88px; bottom:24px; right:376px; border-radius:22px; padding:12px; z-index:2;
  background:linear-gradient(135deg, rgba(255,250,220,.1), rgba(0,0,0,.18)), var(--aue-bild) center/cover, linear-gradient(135deg, #3f7f92, #23505e);
  box-shadow:inset 0 0 0 3px rgba(80,110,50,.55), inset 0 0 26px rgba(10,30,30,.55), 0 3px 0 #1c3a2a, 0 22px 44px rgba(0,0,0,.55); }
#papier { position:absolute; inset:12px; border-radius:14px; overflow:hidden; display:grid; grid-template-columns:206px minmax(0, 1fr); grid-template-rows:34px minmax(0, 1fr) 70px; grid-template-areas:"ablage kopf" "ablage plan" "aktion aktion"; color:#20200e; }
#ablage { grid-area:ablage; position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 6px 6px 4px; z-index:1; }
#rahmen { width:184px; padding:6px 8px 7px; border-radius:10px; text-align:center; background:linear-gradient(135deg, #6a4422, #4a2c12 60%, #2e1a08); border:2px solid #3a2210; box-shadow:inset 0 1px 0 #fff4, 0 6px 14px rgba(10,20,10,.55); cursor:default; }
#rahmen .ra-t, #vorschau .ra-t { font:800 11px/1.2 var(--sans); letter-spacing:2px; text-transform:uppercase; color:#fbe8c0; }
#aktuell { height:118px; margin:4px 0; border-radius:6px; background:radial-gradient(circle at 40% 35%, #2f5a4a, #12261e); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 3px 8px rgba(0,0,0,.6); }
#aktuell .teil { filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.ra-leer { font:italic 14px var(--kopf); color:#d8c49a; }
.ra-nr { font:600 13px/1.2 var(--sans); color:#fbe8c0; } .ra-nr b { font:900 15px var(--kopf); color:#fff2cc; }
#vorschau { width:150px; padding:4px; border-radius:8px; text-align:center; background:rgba(40,30,16,.55); border:1px dashed rgba(250,230,190,.6); }
#naechste { height:62px; display:flex; align-items:center; justify-content:center; }
#korb { width:184px; display:flex; align-items:center; gap:8px; padding:3px 8px; border-radius:9px; background:rgba(30,24,12,.5); }
.kb-korb { height:62px; display:flex; justify-content:center; }
.ko-t { font-size:13px; color:#f4ead2; text-align:left; line-height:1.25; }
.ko-t b { font-family:var(--kopf); font-size:17px; color:#fff6dc; }
#preise { width:184px; padding:6px 7px 4px; border-radius:6px; background:linear-gradient(180deg, #f6ecd2, #e6d6b0); box-shadow:0 4px 10px rgba(10,20,10,.45), inset 0 0 0 1px rgba(90,60,20,.35); transform:rotate(-.6deg); }
.pr-titel { font:800 11px/1.2 var(--sans); letter-spacing:1.6px; text-transform:uppercase; color:#5a3a12; text-align:center; margin-bottom:3px; }
.pr { display:grid; grid-template-columns:26px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:6px; align-items:center; padding:3px 2px; border-top:1px dashed rgba(90,60,20,.3); }
.pr-sym { grid-row:span 2; display:flex; }
.pr-n { font:700 12.5px/1.15 var(--kopf); color:#2a1a08; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-chips { display:flex; gap:3px; flex-wrap:wrap; min-height:20px; align-items:center; }
.pc { font:normal 900 12.5px/1 var(--kopf); min-width:20px; height:20px; padding:0 4px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:2px; color:#3a2a14; background:rgba(255,255,255,.55); border:1.5px solid var(--kf); }
.pc.oben { background:var(--kd); color:#fff; border-color:var(--kf); box-shadow:0 1px 2px rgba(0,0,0,.35); }
.pc.meins { background:#2f8a3a; color:#fff; border-color:#145a1e; }
.pc .sgzi { width:12px; height:12px; }
.pr-leer, .pr-allein { font-size:12px; color:#5a4426; font-style:italic; }
.pr-allein { font-style:normal; font-weight:800; color:#2a1a08; }

#plan-kopf { grid-area:kopf; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 14px 0 8px; z-index:1; font-size:14px; color:#fbf4dc; min-width:0; text-shadow:0 1px 2px rgba(0,0,0,.6); }
#pl-titel { font:900 18px/1 var(--kopf); color:#fff6d8; white-space:nowrap; display:flex; align-items:center; gap:7px; }
.pl-dot { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 1px #0006; }
#pl-r { display:flex; align-items:center; gap:8px; min-width:0; }
.pl-st { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2px 8px; border-radius:7px; background:rgba(20,30,16,.45); }
.pl-st b { font:900 17px var(--kopf); }
#plan { grid-area:plan; position:relative; min-height:0; display:flex; align-items:center; justify-content:center; padding:2px 6px 4px 0; z-index:1; touch-action:manipulation; }
#plan svg { width:100%; height:100%; display:block; overflow:visible; }
#plan.fremd { filter:saturate(.85); }
.zl { cursor:default; }
.zl .zl-rand { fill:transparent; stroke:transparent; stroke-width:4; }
.zl.kann { cursor:pointer; }
@media (hover: hover) { .zl.kann:hover .zl-rand { stroke:#ffe08a; } }
.vs-rand { fill:transparent; stroke:#ffd84a; stroke-width:5; }
.zl.rat .zl-rand { stroke:#ffe08a; stroke-width:6; stroke-dasharray:10 6; animation:ratLauf 1s linear infinite; }
@keyframes ratLauf { to { stroke-dashoffset:-32; } }
.zl.wartet .zl-rand { stroke:#9ad0ff; stroke-width:5; stroke-dasharray:7 5; }
.zl.neu .tl { animation:neuAuf .6s ease-out; transform-box:fill-box; transform-origin:center; }
@keyframes neuAuf { from { transform:scale(.6); opacity:.2; } }
.tl.geist { opacity:.62; }
.vb circle { fill:#4ad06a; stroke:#fff; stroke-width:3; }
.vb.offen circle { fill:#d8eef4; stroke:#2f6f86; }
.vb.ufer path { stroke:#e0402a; stroke-width:5; stroke-linecap:round; }
.st-p, .an-p { filter:drop-shadow(1px 3px 2px rgba(10,20,10,.45)); }
.st-p.kst { cursor:pointer; }
.kp { transition:transform .24s linear; cursor:default; filter:drop-shadow(2px 4px 3px rgba(10,20,10,.5)); }
.kp.kann { cursor:pointer; }
@media (hover: hover) { .kp.kann:hover .kahn > path:nth-child(2) { stroke:#ffe08a; stroke-width:4; } }
.kp.wahl .kahn > path:nth-child(2) { stroke:#ffe08a; stroke-width:5; }
.kp.wahl { animation:kahnWahl 1s ease-in-out infinite alternate; }
@keyframes kahnWahl { to { filter:drop-shadow(0 0 8px rgba(255,224,138,.95)); } }
.kp.wartet { opacity:.72; }
.zi { cursor:pointer; }
.zi .zi-r { fill:rgba(255,224,138,.22); stroke:#ffe08a; stroke-width:4; stroke-dasharray:8 6; animation:ratLauf 1.2s linear infinite; }
.zi.fd .zi-r { fill:rgba(120,220,120,.25); stroke:#8ef08a; }
.zi.anl .zi-r { stroke:#fff; stroke-width:5; fill:rgba(255,255,255,.18); }
.zi.an .zi-r { fill:rgba(255,224,138,.45); stroke-dasharray:none; stroke-width:6; }
.zi .zi-n { fill:#2a1a08; stroke:#ffe08a; stroke-width:2; }
.zi .zi-t { font:900 15px var(--kopf); fill:#fff4d0; pointer-events:none; }
.zi-rat circle { fill:none; stroke:#ffe08a; stroke-width:6; stroke-dasharray:10 6; animation:ratLauf 1s linear infinite; pointer-events:none; }
#aktion { grid-area:aktion; position:relative; z-index:2; margin:0 10px 8px; display:flex; align-items:center; gap:10px; padding:6px 10px 6px 14px; border-radius:3px;
  background:linear-gradient(180deg, #fffaf0, #f2e6c8); color:#2a1e10; box-shadow:0 3px 8px rgba(10,20,10,.4); transform:rotate(-.3deg); }
#aktion::before { content:''; position:absolute; left:46%; top:-9px; width:70px; height:18px; background:rgba(230,215,170,.75); transform:rotate(2deg); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.l-text { flex:1; min-width:0; height:54px; overflow:hidden; display:flex; align-items:center; font-size:14px; line-height:1.3; }
.l-text .gut { color:#1f6a2a; } .l-text .warn { color:#a8261a; }
.rat-text { color:#1a5e2a; margin-right:4px; }
.l-knoepfe { display:flex; gap:7px; flex:none; }
#aktion .knopf { padding:8px 12px; }
#aktion .knopf.leise { color:#2a1e10; background:#efe4c8; border-color:#b8a274; }
#aktion .knopf:disabled { opacity:.5; border-style:dashed; box-shadow:none; animation:none; cursor:default; filter:saturate(.4); }
.knopf .taste { font-size:11.5px; opacity:.75; margin-left:2px; }

#fahrer { position:absolute; right:24px; top:88px; width:328px; height:var(--fahrer-h, 400px); display:flex; flex-direction:column; gap:8px; z-index:3; }
.fz { position:relative; height:var(--fz-h, 60px); display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:6px; padding:4px 8px 4px 5px; border-radius:9px; text-align:left;
  color:#2a1c06; border:1px solid #5a3a14; border-left:7px solid var(--sf); background:linear-gradient(135deg, #ecd6a6, #c89c5a 55%, #9a6e34); box-shadow:inset 0 1px 0 #fff8, 0 4px 10px rgba(0,0,0,.4); font-family:var(--sans); }
.fz.gezeigt { outline:3px solid #fff2c0; }
.fz.weg { filter:grayscale(.7); }
.fz-mini { height:calc(var(--fz-h, 60px) - 8px); aspect-ratio:1.08; display:flex; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; }
.fz-mini .mini { width:100%; height:100%; }
.fz-t { min-width:0; display:flex; flex-direction:column; gap:1px; }
.fz-t b { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fz-t b small { font-weight:600; }
.fz-ki .sgzi { width:15px; height:15px; vertical-align:-2px; }
.fz-t > small { font-size:12.5px; color:#3e2a0e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fz-t em { font-style:normal; font-weight:800; color:#5a2a04; }
.fz.fertig .fz-t em { color:#1f5a1a; }
.fz-p { text-align:right; } .fz-p b { display:block; font:900 22px/1 var(--kopf); } .fz-p small { font-size:11.5px; color:#3e2a0e; }
.fz-haken { position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#2f8a3a; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.fz-haken .sgzi { width:14px; height:14px; }

#pchat { position:absolute; right:24px; width:328px; height:var(--pc-q, 300px); bottom:24px; z-index:3; display:flex; flex-direction:column; padding:10px 10px 8px; border-radius:8px;
  background:radial-gradient(ellipse at 30% 20%, #3a4a44, #1c2622); border:7px solid #6a4422; box-shadow:inset 0 0 18px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.45); color:#eef0e4; }
#pchat .ch-tabs button { color:#c8d2c4; }
#pchat .ch-tabs button.an { color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); }
#pchat .ch-z { background:rgba(255,255,255,.07); color:#e6eadc; }
#pchat .ch-z b { color:#fff; }
#pchat .ch-z.gut { color:#cdeeb4; } #pchat .ch-z.schlecht { color:#ffc8b8; } #pchat .ch-z.leise { color:#c0c8bc; font-size:11.5px; }
#pchat .ch-z.runde { color:#d8dccc; }
#pchat #pchatwin { flex:1; min-height:0; overflow:auto; background:rgba(0,0,0,.18); border-radius:6px; color:#eef0e4; }
#pchat #pchatin { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:6px; }
#pchat .pc-knoepfe button { color:#eef0e4; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); }
.vf { display:inline-block; vertical-align:-7px; margin-right:5px; }

.flieger { position:absolute; z-index:61; transform:translate(-50%, -50%); filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
#hinweise { left:calc(24px + (100% - 400px) / 2); top:auto; bottom:110px; transform:translateX(-50%); flex-direction:column-reverse; }
.banner { left:calc(24px + (100% - 400px) / 2); }
#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); }
.en-platz { grid-template-columns:44px 12px minmax(0, 1fr) 70px 60px 60px 60px 62px 108px; }
.en-platz .pl-farbe { background:var(--sf); height:30px; }
.en-mini .mini { width:60px; height:auto; }

.ku-licht { position:absolute; inset:0; background-size:200% 100% !important; pointer-events:none; mix-blend-mode:soft-light; opacity:.5;
  background:repeating-linear-gradient(105deg, rgba(255,240,200,0) 0 140px, rgba(255,240,200,.5) 180px 240px, rgba(255,240,200,0) 300px 440px); animation:lichtWandern 42s ease-in-out infinite alternate; }
:root[data-ansicht="abend"] .ku-licht { background:radial-gradient(circle at 80% 30%, rgba(255,200,120,.55), transparent 22%), radial-gradient(circle at 14% 36%, rgba(255,190,110,.45), transparent 20%); animation:lampe 5s ease-in-out infinite alternate; }
:root[data-theme="light"] .ku-licht { background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); background-size:240% 100% !important; mix-blend-mode:screen; opacity:.35; animation:nebel 30s ease-in-out infinite alternate; }
@keyframes lichtWandern { from { background-position:0 0; } to { background-position:-260px 0; } }
@keyframes lampe { from { opacity:.42; } to { opacity:.62; } }
@keyframes nebel { from { background-position:0 0; } to { background-position:-400px 0; } }
#flaeche::after { content:''; position:absolute; inset:0; border-radius:22px; pointer-events:none; background:repeating-linear-gradient(170deg, rgba(220,245,250,0) 0 26px, rgba(220,245,250,.08) 30px 33px, rgba(220,245,250,0) 37px 60px); background-size:100% 300%; animation:wellen 16s linear infinite; }
@keyframes wellen { to { background-position:0 -300px; } }
#stage.lobbyhg .ku-licht { display:none; }
@media (prefers-reduced-motion: reduce) { .ku-licht, #flaeche::after, .zl.rat .zl-rand, .zi .zi-r, .kp.wahl, .zi-rat circle { animation:none; } .kp { transition:none; } }

#stage.hoch #kopf { left:16px; right:16px; width:auto; top:10px; height:62px; gap:12px; padding:0 12px; }
#stage.hoch #kopf .logo, #stage.hoch #kopf .trenner { display:none; }
#stage.hoch #kopf-r { left:16px; right:16px; top:80px; height:70px; justify-content:space-between; gap:10px; padding:0; background:transparent; border:0; box-shadow:none; }
#stage.hoch #kopf-r .kb-ic { width:78px; height:68px; background:linear-gradient(180deg, var(--schild-a), var(--schild-b)); border:3px solid var(--schild-rand); box-shadow:0 4px 10px rgba(0,0,0,.4); }
#stage.hoch #kopf-r .kb-ic .sgzi { width:30px; height:30px; }
#stage.hoch .runde { font-size:18px; } #stage.hoch .runde b { font-size:28px; }
#stage.hoch .k-phase { font-size:24px; }
#stage.hoch .uhr { font-size:24px; padding:7px 13px 7px 10px; }
#stage.hoch #fahrer { left:16px; right:16px; width:auto; top:166px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
#stage.hoch .fz { grid-template-columns:minmax(0, 1fr) auto; padding-left:10px; }
#stage.hoch .fz-mini { display:none; }
#stage.hoch .fz-haken { left:auto; right:3px; }
#stage.hoch .fz-t b { font-size:18px; } #stage.hoch .fz-t > small { font-size:16px; } #stage.hoch .fz-t .nur-quer { display:none; }
#stage.hoch .fz-p b { font-size:26px; } #stage.hoch .fz-p small { font-size:16px; }
#stage.hoch #flaeche { left:16px; right:16px; top:var(--fl-top, 420px); bottom:calc(16px + var(--pc-h, 0px)); padding:10px; }
#stage.hoch #papier { inset:10px; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto 40px minmax(0, 1fr) 196px; grid-template-areas:"ablage" "kopf" "plan" "aktion"; }
#stage.hoch #ablage { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; justify-content:center; align-items:start; padding:8px 6px 0; gap:8px 12px; }
#stage.hoch #rahmen { width:176px; grid-row:span 2; }
#stage.hoch #aktuell { height:104px; }
#stage.hoch #korb { width:300px; }
#stage.hoch #preise { width:300px; display:grid; grid-template-columns:1fr 1fr; column-gap:8px; }
#stage.hoch .pr-titel { grid-column:span 2; font-size:15px; }
#stage.hoch #vorschau { display:none; }
#stage.hoch .pr-n { font-size:15px; } #stage.hoch .pc { font-size:16px; height:26px; min-width:26px; border-radius:13px; }
#stage.hoch .ko-t { font-size:17px; }
#stage.hoch #rahmen .ra-t { font-size:16px; } #stage.hoch .ra-nr { font-size:16px; } #stage.hoch .ra-nr b { font-size:18px; }
#stage.hoch #pl-titel { font-size:22px; } #stage.hoch #plan-kopf { font-size:17px; padding:6px 10px 0; }
#stage.hoch .pl-st b { font-size:20px; }
#stage.hoch #plan { padding:4px 4px; }
#stage.hoch #aktion { flex-direction:column; align-items:stretch; gap:8px; padding:8px 12px; }
#stage.hoch .l-text { font-size:19px; height:auto; min-height:76px; }
#stage.hoch .l-knoepfe { justify-content:center; flex-wrap:wrap; }
#stage.hoch .knopf, #stage.hoch #aktion .knopf { font-size:20px; padding:12px 14px; min-height:64px; }
#stage.hoch #pchat { left:16px; right:16px; width:auto; top:auto; bottom:16px; height:var(--pc-h, 0px); }
#stage.hoch .ch-liste, #stage.hoch .ch-tabs button, #stage.hoch #pchatwin, #stage.hoch .pc-knoepfe button { font-size:19px; }
#stage.hoch .ch-tabs button { min-height:52px; }
#stage.hoch #hinweise, #stage.hoch .banner { left:50%; }
#stage.hoch #hinweise { bottom:auto; top:calc(var(--fl-top, 420px) + 260px); max-width:560px; }
#stage.hoch .meldung, #stage.hoch .bn-unter { font-size:22px; }
#stage.hoch .banner { min-width:0; width:86%; top:34%; }
#stage.hoch .kinfo { width:540px; }
#stage.hoch .kinfo .ki-titel { font-size:26px; }
#stage.hoch .kinfo .ki-kat, #stage.hoch .kinfo .ki-zeilen, #stage.hoch .kinfo .ki-regel, #stage.hoch .kinfo .ki-tipp { font-size:19px; }
#stage.hoch #ansicht-menu { width:560px; top:140px; }
#stage.hoch #ansicht-menu label, #stage.hoch #ansicht-menu label small { font-size:19px; }
#stage.hoch .en-platz { grid-template-columns:34px 8px minmax(0, 1fr) 70px 70px 90px; }
#stage.hoch .en-platz .nur-quer, #stage.hoch .en-platz .pk2 { display:none; }
#stage.hoch .en-rekord, #stage.hoch .en-tag-z, #stage.hoch .en-erkl, #stage.hoch .en-platz small { font-size:18px; }
#stage.hoch .en-teilen { font-size:18px; }
#stage.hoch .pl-st .nur-quer { display:none; }
#stage.hoch.breit #papier { grid-template-columns:206px minmax(0, 1fr); grid-template-rows:40px minmax(0, 1fr) 150px; grid-template-areas:"ablage kopf" "ablage plan" "aktion aktion"; }
#stage.hoch.breit #ablage { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; padding:10px 6px 6px 6px; }
#stage.hoch.breit #rahmen, #stage.hoch.breit #korb, #stage.hoch.breit #preise { width:184px; }
#stage.hoch.breit #preise { display:block; }
#stage.hoch.breit .pr-n { font-size:13px; }
#stage.hoch.breit #fahrer { grid-template-columns:repeat(3, minmax(0, 1fr)); left:34px; right:34px; gap:10px; }
#stage.hoch.breit #flaeche { left:34px; right:34px; bottom:calc(30px + var(--pc-h, 0px)); }
#stage.hoch.breit .fz-t b { font-size:14.5px; white-space:normal; line-height:1.1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
#stage.hoch.breit .fz-t > small { font-size:15px; }
#stage.hoch .lw-mobil button:not(.lw-info), #stage.hoch .lw-mobil .kb, #stage.hoch .lw-mobil .kb-ic { min-height:calc(var(--lw-ziel, 40px) * 1.12) !important; }
#stage.hoch .lw-mobil input[type=text] { min-height:calc(var(--lw-ziel, 40px) * 1.12) !important; }
#stage.hoch .lw-mobil .kb-ic, #stage.hoch .lw-mobil .lw-wahl button { min-width:calc(var(--lw-ziel, 40px) * 1.12) !important; }
#stage.hoch .ti-mitte { flex-direction:column; flex-wrap:nowrap; overflow-y:auto; padding:14px 16px; }
#stage.hoch .ti-plaetze { flex:none; max-height:none; overflow:visible; }
#stage.hoch .ti-opts { flex:none; overflow:visible; }
#stage.hoch .ti-chat { flex:none; min-height:280px; }
#stage.hoch #tisch .pl .nm2 { font-size:19px; }
#stage.hoch #tisch .pl .nm2 small, #stage.hoch #tisch .pl .st, #stage.hoch .ti-opt small, #stage.hoch #ti-chef-hinweis, #stage.hoch #tisch .lo-label { font-size:16px; }
#stage.hoch .ti-opt { font-size:18px; }
#stage.hoch .ti-opt small { display:block; margin-left:0; }
#stage.hoch .ti-wahl button { min-height:66px; min-width:66px; font-size:18px; padding:8px 14px; }
#stage.hoch #tisch .kb { min-height:66px; font-size:18px; }
#stage.hoch #tchatin { min-height:66px; font-size:18px; }
#stage.hoch #tchatwin { font-size:16px; }
#stage.hoch .ti-info { font-size:16px; }
#stage.hoch .lo-fuss { flex-wrap:wrap; padding:10px 16px 14px; }
#stage.hoch .tl-nr text, #stage.hoch .rd-nr text { font-size:22px; }
#stage.hoch .tl-nr rect { x:-16px; y:-13px; width:34px; height:28px; }
#stage.hoch .fz-haken { display:none; }
#stage.hoch .pr-n { font-size:14.5px; }
#stage.hoch .pr-sym svg { width:22px; height:22px; }
#stage.hoch .fz-t b { font-size:17px; }
#stage.hoch #korb, #stage.hoch #preise { width:344px; }
#stage.hoch .pr { grid-template-columns:22px minmax(0, 1fr); column-gap:4px; }
#stage.hoch.breit #korb, #stage.hoch.breit #preise { width:184px; }
.kp .kahn > :not(.griff), .st-p .steg > :not(.griff), .an-p .anl > :not(.griff) { pointer-events:none; }
#stage.hoch .fz-t b small { font-size:15px; }
#stage.hoch.breit #aktion { flex-direction:row; align-items:center; }
#stage.hoch.breit .l-text { font-size:17px; }
#stage.hoch.breit .l-knoepfe { flex-direction:row; flex-wrap:wrap; justify-content:flex-end; max-width:340px; }
#stage.hoch.breit #aktion .knopf { font-size:17px; min-height:52px; padding:8px 12px; }
.zi.blass { pointer-events:none; opacity:.55; }
.zi.blass .zi-r { animation:none; stroke-dasharray:4 6; }
.paar { stroke-width:6; stroke-dasharray:3 12; stroke-linecap:round; opacity:.8; pointer-events:none; filter:drop-shadow(0 0 3px rgba(255,255,255,.7)); }
.pr-z { font:normal 800 11.5px/1 var(--sans); color:#2a4a1a; background:rgba(120,180,90,.32); border-radius:6px; padding:3px 5px; margin-left:auto; white-space:nowrap; }
#stage.hoch .pr-z { font-size:15px; padding:3px 4px; }
.st-p.waehlbar, .an-p.waehlbar { cursor:pointer; animation:waehlbar 1.1s ease-in-out infinite alternate; }
@keyframes waehlbar { to { filter:drop-shadow(0 0 7px rgba(255,224,138,.95)); } }
.st-p.gewaehlt, .an-p.gewaehlt { filter:drop-shadow(0 0 9px #ffe08a); }
@media (prefers-reduced-motion: reduce) { .st-p.waehlbar, .an-p.waehlbar { animation:none; filter:drop-shadow(0 0 6px rgba(255,224,138,.9)); } }
#stage.hoch .ra-leer { font-size:16px; }
#hinweise { top:14px; bottom:auto; }
#stage.hoch #hinweise { top:12px; bottom:auto; }
.meldung { max-width:100%; }
#aktion .sz-karte { max-width:96%; font-size:14px; line-height:1.3; gap:8px; padding:4px 12px 4px 6px; }
#aktion .sz-karte .sz-kb { min-width:0; }
#stage.hoch #aktion .sz-karte { font-size:20px; padding:8px 14px 8px 8px; }
.l-text { flex-direction:column; align-items:flex-start; justify-content:center; }
.l-text > span { max-width:100%; }
.l-haupt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.l-haupt.mit-rat { -webkit-line-clamp:2; line-clamp:2; }
.rat-zeile { flex:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#stage.hoch .l-text { height:104px; min-height:0; }
#stage.hoch .l-haupt { -webkit-line-clamp:4; line-clamp:4; }
#stage.hoch .l-haupt.mit-rat { -webkit-line-clamp:3; line-clamp:3; }
#pl-titel { min-width:0; flex:0 3 auto; }
.pl-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-dot { flex:none; }
#pl-r { flex:0 1 auto; }
.ch-zu { flex:0 0 auto !important; display:flex; align-items:center; justify-content:center; }
.ch-zu .sgzi { width:18px; height:18px; }
#pchat:not(.blatt) .ch-zu { display:none; }
#stage.hoch #pchat.blatt { top:calc(var(--fl-top, 420px) + 10px); bottom:16px; height:auto; z-index:68; box-shadow:0 14px 40px rgba(0,0,0,.7); }
#stage.hoch .ch-tabs button { min-height:72px; }
#stage.hoch .ch-zu { min-width:72px; }
#stage.hoch .pc-knoepfe button { min-height:72px; }
#stage.hoch #pchatin { min-height:72px; font-size:26px; }
#stage.hoch #kopf-r .kb-ic { flex:0 1 78px; min-width:70px; height:72px; }
#stage.hoch #kopf-r { height:72px; }
.kb-ic.neu { position:relative; }
.kb-ic.neu::after { content:''; position:absolute; right:6px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--rot, #c0392b); box-shadow:0 0 0 2px #fff; }
#stage.hoch.dreier .fz { padding-left:7px; gap:4px; }
#stage.hoch.dreier .fz-t b { font-size:16px; }
#stage.hoch.dreier .fz-p b { font-size:22px; }
#stage.hoch.dreier .fz-p small { display:none; }
#stage.quer-handy #kopf-r { left:auto; right:4px; top:4px; bottom:4px; width:70px; height:auto; flex-direction:column; justify-content:flex-start; gap:3px; padding:2px 0; background:transparent; border:0; box-shadow:none; }
#stage.quer-handy #kopf-r .kb-ic { flex:0 1 60px; width:66px; height:60px; min-height:58px; background:linear-gradient(180deg, var(--schild-a), var(--schild-b)); border:3px solid var(--schild-rand); box-shadow:0 3px 8px rgba(0,0,0,.4); }
#stage.quer-handy #kopf-r .kb-ic .sgzi { width:26px; height:26px; }
#stage.quer-handy #kopf-r .uhr { position:absolute; right:calc(100% + 12px); top:12px; font-size:18px; padding:6px 11px 6px 8px; }
#stage.quer-handy #kopf { left:var(--q-cx, 700px); width:var(--q-cw, 300px); top:8px; height:52px; gap:10px; padding:0 12px; }
#stage.quer-handy:not(.qh-schmal) #partie:has(#k-uhr:not([hidden])) #kopf { padding-right:100px; }
#stage.quer-handy #kopf .logo, #stage.quer-handy #kopf .trenner { display:none; }
#stage.quer-handy .runde { font-size:14px; letter-spacing:1px; } #stage.quer-handy .runde b { font-size:20px; }
#stage.quer-handy .k-phase { font-size:15px; white-space:normal; line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
#stage.quer-handy #flaeche { left:4px; top:4px; bottom:4px; right:78px; padding:4px; border-radius:16px; }
#stage.quer-handy #flaeche::after { border-radius:16px; }
#stage.quer-handy #papier { inset:4px; border-radius:12px; grid-template-columns:186px var(--q-plan-w, 490px) minmax(0, 1fr); grid-template-rows:58px auto minmax(0, 1fr) calc(var(--fahrer-h, 130px) + 6px);
  grid-template-areas:"ablage plan ." "ablage plan kopf" "ablage plan aktion" "ablage plan ."; }
#stage.quer-handy #ablage { gap:6px; padding:4px 2px 4px 2px; justify-content:flex-start; }
#stage.quer-handy #vorschau { display:none; }
#stage.quer-handy #rahmen { width:178px; padding:4px 6px 5px; }
#stage.quer-handy #aktuell { height:86px; margin:3px 0; }
#stage.quer-handy #rahmen .ra-t, #stage.quer-handy .ra-nr, #stage.quer-handy .ra-leer { font-size:14px; letter-spacing:1px; } #stage.quer-handy .ra-nr b { font-size:16px; }
#stage.quer-handy #korb { width:178px; padding:2px 8px; gap:6px; }
#stage.quer-handy .kb-korb { height:66px; }
#stage.quer-handy .ko-t { font-size:14px; } #stage.quer-handy .ko-t b { font-size:17px; }
#stage.quer-handy #preise { width:178px; padding:4px 6px 3px; }
#stage.quer-handy .pr-titel { font-size:14px; letter-spacing:1px; margin-bottom:1px; }
#stage.quer-handy .pr { grid-template-columns:22px minmax(0, 1fr); column-gap:4px; padding:2px 1px; }
#stage.quer-handy .pr-sym svg { width:22px; height:22px; }
#stage.quer-handy .pr-n { font-size:14px; }
#stage.quer-handy .pc { font-size:14px; height:22px; min-width:22px; border-radius:11px; }
#stage.quer-handy .pr-z, #stage.quer-handy .pr-leer, #stage.quer-handy .pr-allein { font-size:14px; }
#stage.quer-handy #plan { padding:0; }
#stage.quer-handy .tl-nr text, #stage.quer-handy .rd-nr text { font-size:23px; }
#stage.quer-handy .tl-nr rect { x:-17px; y:-14px; width:36px; height:30px; }
#stage.quer-handy #plan-kopf { flex-wrap:wrap; gap:4px 8px; margin:0 4px 0 10px; padding:6px 8px; font-size:15px; border-radius:9px; background:linear-gradient(180deg, var(--schild-a), var(--schild-b)); border:2px solid var(--schild-rand); color:var(--schild-text); }
#stage.quer-handy #pl-titel { font-size:18px; }
#stage.quer-handy .pl-st { white-space:normal; padding:2px 6px; } #stage.quer-handy .pl-st b { font-size:18px; }
#stage.quer-handy .pl-st .nur-quer { display:none; }
#stage.quer-handy #pl-meins { min-height:60px; font-size:15px; }
#stage.quer-handy #aktion { margin:8px 4px 8px 10px; flex-direction:column; align-items:stretch; gap:6px; padding:8px 10px; min-height:0; }
#stage.quer-handy .l-text { flex:1 1 auto; height:auto; min-height:0; font-size:15px; overflow-y:auto; justify-content:flex-start; }
#stage.quer-handy .l-haupt, #stage.quer-handy .l-haupt.mit-rat { -webkit-line-clamp:unset; line-clamp:none; display:block; overflow:visible; }
#stage.quer-handy .l-knoepfe { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
#stage.quer-handy .knopf, #stage.quer-handy #aktion .knopf { font-size:16px; min-height:60px; padding:8px 12px; }
#stage.quer-handy .knopf .sgzi { width:20px; height:20px; }
#stage.quer-handy #aktion .sz-karte { font-size:15px; max-width:98%; }
#stage.quer-handy #fahrer { left:var(--q-cx, 700px); width:var(--q-cw, 300px); right:auto; top:auto; bottom:8px; display:grid; gap:6px; }
#stage.quer-handy .fz { grid-template-columns:minmax(0, 1fr) auto; padding:3px 8px 3px 8px; gap:4px; }
#stage.quer-handy .fz-mini, #stage.quer-handy .fz-haken, #stage.quer-handy .fz-t .nur-quer, #stage.quer-handy .fz-p small { display:none; }
#stage.quer-handy .fz-t b { font-size:15px; } #stage.quer-handy .fz-t b small { font-size:14px; } #stage.quer-handy .fz-t > small { font-size:14px; }
#stage.quer-handy .fz-p b { font-size:22px; }
#stage.quer-handy .fz.fertig { box-shadow:inset 0 0 0 3px #2f8a3a, 0 4px 10px rgba(0,0,0,.4); }
#stage.quer-handy #pchat.blatt { left:var(--q-cx, 700px); width:var(--q-cw, 300px); right:auto; top:8px; bottom:8px; height:auto; z-index:68; box-shadow:0 14px 40px rgba(0,0,0,.7); }
#stage.quer-handy .ch-liste, #stage.quer-handy #pchatwin, #stage.quer-handy .ch-z.leise, #stage.quer-handy .ch-z.runde { font-size:15px; }
#stage.quer-handy .ch-tabs button { font-size:14px; min-height:60px; }
#stage.quer-handy .ch-zu { min-width:60px; }
#stage.quer-handy .pc-knoepfe button { font-size:15px; min-height:60px; }
#stage.quer-handy #pchatin { min-height:60px; font-size:16px; }
#stage.quer-handy #hinweise { left:calc(8px + 186px + var(--q-plan-w, 490px) / 2); top:10px; bottom:auto; max-width:min(560px, 96%); }
#stage.quer-handy .meldung { font-size:15px; }
#stage.quer-handy .banner { left:calc(8px + 186px + var(--q-plan-w, 490px) / 2); min-width:0; max-width:620px; }
#stage.quer-handy .kinfo { width:360px; }
#stage.quer-handy .kinfo .ki-kat, #stage.quer-handy .kinfo .ki-zeilen, #stage.quer-handy .kinfo .ki-regel, #stage.quer-handy .kinfo .ki-tipp { font-size:15px; }
#stage.quer-handy #ansicht-menu { top:8px; right:84px; max-height:calc(100% - 16px); overflow-y:auto; }
#stage.quer-handy #ansicht-menu label, #stage.quer-handy #ansicht-menu label small { font-size:15px; }
#q-reiter { display:none; }
#stage.qh-schmal #q-reiter { display:flex; position:absolute; left:8px; bottom:8px; width:var(--q-l, 165px); height:71px; gap:6px; z-index:4; }
#q-reiter button { flex:1 1 0; min-width:0; min-height:71px; font:800 17px/1.1 var(--sans); letter-spacing:.5px; color:var(--schild-text); border-radius:10px; position:relative;
  background:linear-gradient(180deg, var(--schild-a), var(--schild-b)); border:3px solid var(--schild-rand); box-shadow:0 3px 8px rgba(0,0,0,.4); opacity:.82; }
#q-reiter button.an { opacity:1; color:var(--schild-gold); box-shadow:inset 0 -5px 0 var(--schild-gold), 0 3px 8px rgba(0,0,0,.4); }
#q-reiter button.neu::after { content:''; position:absolute; right:7px; top:7px; width:14px; height:14px; border-radius:50%; background:var(--rot, #c0392b); box-shadow:0 0 0 2px #fff; }
#stage.qh-schmal #kopf-r { width:76px; }
#stage.qh-schmal #kopf-r .kb-ic { flex:0 1 71px; width:74px; height:71px; min-height:66px; }
#stage.qh-schmal #flaeche { right:84px; }
#stage.qh-schmal #kopf-r .uhr { position:fixed; left:calc(8px + var(--q-l, 165px) + 10px); right:auto; top:12px; font-size:17px; padding:5px 9px 5px 7px; z-index:6; }
#stage.qh-schmal #kopf { left:8px; width:var(--q-l, 165px); top:8px; height:62px; gap:1px; padding:0 8px; flex-direction:column; align-items:flex-start; justify-content:center; }
#stage.qh-schmal .runde { font-size:16px; letter-spacing:0; display:flex; align-items:baseline; gap:6px; line-height:1.1; } #stage.qh-schmal .runde b { display:inline; font-size:18px; }
#stage.qh-schmal .k-phase { font-size:16px; line-height:1.15; max-width:100%; -webkit-line-clamp:1; line-clamp:1; }
#stage.qh-schmal #papier { grid-template-columns:var(--q-l, 165px) var(--q-plan-w, 588px); column-gap:6px; grid-template-rows:66px auto auto minmax(0, 1fr) 77px;
  grid-template-areas:". plan" "kopf plan" "ablage plan" "aktion plan" ". plan"; }
#stage.qh-schmal #ablage { padding:0; gap:6px; align-items:stretch; }
#stage.qh-schmal #rahmen { width:auto; display:grid; grid-template-columns:68px minmax(0, 1fr); grid-template-areas:"t t" "bild nr"; align-items:center; column-gap:6px; padding:4px 6px 6px; transform:none; }
#stage.qh-schmal #rahmen .ra-t { grid-area:t; font-size:16px; letter-spacing:0; text-transform:none; }
#stage.qh-schmal #aktuell { grid-area:bild; width:68px; height:68px; margin:2px 0 0; }
#stage.qh-schmal .ra-nr { grid-area:nr; font-size:16px; text-align:left; min-width:0; overflow-wrap:anywhere; } #stage.qh-schmal .ra-nr b { font-size:16px; display:block; }
#stage.qh-schmal .ra-leer { font-size:16px; }
#stage.qh-schmal #korb, #stage.qh-schmal #plan-kopf, #stage.qh-schmal #preise, #stage.qh-schmal #fahrer { display:none; }
#stage.qh-schmal #aktion { margin:6px 0 4px; padding:6px 8px; transform:none; }
#stage.qh-schmal #aktion::before { left:40%; width:50px; }
#stage.qh-schmal .l-text { font-size:17px; line-height:1.25; }
#stage.qh-schmal .l-knoepfe { display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)); gap:6px; }
#stage.qh-schmal #aktion .knopf { min-height:71px; min-width:0; font-size:16px; letter-spacing:0; padding:4px 3px; white-space:normal; flex-direction:column; justify-content:center; text-align:center; line-height:1.1; gap:2px; }
#stage.qh-schmal #aktion .knopf .sgzi { width:18px; height:18px; flex:none; }
#stage.qh-schmal #aktion .sz-karte { font-size:16px; max-width:98%; padding:4px 8px 4px 4px; }
#stage.qh-schmal.qh-tisch #papier { grid-template-rows:0 auto auto minmax(0, 1fr) 77px; }
#stage.qh-schmal.qh-tisch #kopf, #stage.qh-schmal.qh-tisch #rahmen, #stage.qh-schmal.qh-tisch #aktion { display:none; }
#stage.qh-schmal.qh-tisch #preise { display:block; width:auto; padding:4px 6px 4px; transform:none; }
#stage.qh-schmal.qh-tisch #fahrer { display:grid; left:8px; width:var(--q-l, 165px); right:auto; top:auto; bottom:85px; gap:6px; }
#stage.qh-schmal.qh-tisch.qh-fremd #preise { display:none; }
#stage.qh-schmal.qh-tisch.qh-fremd #plan-kopf { display:flex; flex-direction:column; align-items:stretch; margin:0; padding:6px 8px; font-size:16px; }
#stage.qh-schmal .pr-titel { display:none; }
#stage.qh-schmal .pr { grid-template-columns:24px minmax(0, 1fr); grid-template-rows:auto; padding:2px 0; }
#stage.qh-schmal .pr:first-of-type { border-top:0; }
#stage.qh-schmal .pr-sym { grid-row:auto; } #stage.qh-schmal .pr-sym svg { width:24px; height:24px; }
#stage.qh-schmal .pr-n { display:none; }
#stage.qh-schmal .pr-chips { gap:3px; min-height:26px; flex-wrap:nowrap; }
#stage.qh-schmal .pc { font-size:16px; height:26px; min-width:25px; padding:0 3px; border-radius:13px; }
#stage.qh-schmal .pr-z, #stage.qh-schmal .pr-leer, #stage.qh-schmal .pr-allein { font-size:16px; }
#stage.qh-schmal .pr-z { padding:3px 3px; }
#stage.qh-schmal .fz-t b { font-size:17px; } #stage.qh-schmal .fz-t b small { font-size:17px; } #stage.qh-schmal .fz-t > small { font-size:17px; }
#stage.qh-schmal .fz-p b { font-size:24px; }
#stage.qh-schmal #pl-titel { font-size:18px; } #stage.qh-schmal .pl-st b { font-size:18px; } #stage.qh-schmal #pl-r { flex-direction:column; align-items:stretch; }
#stage.qh-schmal #pl-meins { min-height:71px; font-size:16px; justify-content:center; }
#stage.qh-schmal #hinweise, #stage.qh-schmal .banner { left:calc(8px + var(--q-l, 165px) + 6px + var(--q-plan-w, 588px) / 2); }
#stage.qh-schmal #hinweise { max-width:var(--q-plan-w, 588px); }
#stage.qh-schmal .meldung { font-size:17px; }
#stage.qh-schmal #pchat.blatt { left:calc(8px + var(--q-l, 165px) + 6px); width:var(--q-plan-w, 588px); top:8px; bottom:8px; }
#stage.qh-schmal .ch-liste, #stage.qh-schmal #pchatwin, #stage.qh-schmal .ch-z.leise, #stage.qh-schmal .ch-z.runde, #stage.qh-schmal .pc-knoepfe button { font-size:17px; }
#stage.qh-schmal .ch-tabs button { font-size:16px; min-height:71px; } #stage.qh-schmal .ch-zu { min-width:71px; }
#stage.qh-schmal .pc-knoepfe button, #stage.qh-schmal #pchatin { min-height:71px; } #stage.qh-schmal #pchatin { font-size:17px; }
#stage.qh-schmal .kinfo { width:400px; }
#stage.qh-schmal .kinfo .ki-kat, #stage.qh-schmal .kinfo .ki-zeilen, #stage.qh-schmal .kinfo .ki-regel, #stage.qh-schmal .kinfo .ki-tipp { font-size:17px; }
#stage.qh-schmal #ansicht-menu label, #stage.qh-schmal #ansicht-menu label small { font-size:17px; }
#stage.quer-handy .zi .zi-t { font-size:23px; }
#stage.hoch .zl .zl-rand, #stage.quer-handy .zl .zl-rand { x:-50px; y:-50px; width:100px; height:100px; }
#stage.hoch .steg .griff, #stage.hoch .anl .griff, #stage.quer-handy .steg .griff, #stage.quer-handy .anl .griff { x:-50px; y:-50px; width:100px; height:100px; }
#stage.hoch .kp .griff, #stage.quer-handy .kp .griff { x:-58px; y:-58px; width:116px; height:116px; }
#stage.quer-handy .fz-t b { white-space:normal; line-height:1.22; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere; }
#stage.quer-handy .fz-t > small { white-space:normal; line-height:1.22; overflow:visible; }
#stage.quer-handy #pl-titel, #stage.quer-handy .pl-name { white-space:normal; overflow:visible; line-height:1.15; }
#stage.quer-handy .pl-st { white-space:normal; overflow:visible; }
#stage.qh-schmal #pl-meins { width:100%; white-space:normal; }
#stage.quer-handy:not(.qh-schmal) .fz-t > small { white-space:nowrap; }
#stage.quer-handy:not(.qh-schmal) .fz-t b { font-size:14px; } #stage.quer-handy:not(.qh-schmal) .fz { padding-left:6px; }
#stage.hoch:not(.breit) #flaeche { left:4px; right:4px; padding:4px; }
#stage.hoch:not(.breit) #papier { inset:4px; }
#stage.hoch:not(.breit) #plan { padding:0; }
#stage.hoch:not(.breit) .tl-nr text, #stage.hoch:not(.breit) .rd-nr text { font-size:24px; }
#stage.hoch:not(.breit) .tl-nr rect { x:-18px; y:-15px; width:38px; height:31px; }
#stage.hoch .zi .zi-t { font-size:24px; }
#stage.hoch:not(.breit) #rahmen .ra-t, #stage.hoch:not(.breit) .ra-nr, #stage.hoch:not(.breit) .ra-leer { font-size:17px; }
#stage.hoch:not(.breit) .pr-titel, #stage.hoch:not(.breit) .pr-n, #stage.hoch:not(.breit) .pr-z, #stage.hoch:not(.breit) .pc, #stage.hoch:not(.breit) .pr-leer, #stage.hoch:not(.breit) .pr-allein { font-size:17px; }
#stage.hoch:not(.breit) .pc { height:27px; min-width:27px; border-radius:14px; }
#stage.hoch:not(.breit) .fz-t b small, #stage.hoch:not(.breit) .fz-t > small, #stage.hoch:not(.breit) .fz-t em, #stage.hoch:not(.breit) .fz-p small { font-size:17px; }
#stage.hoch:not(.breit) .knopf, #stage.hoch:not(.breit) #aktion .knopf { min-height:72px; }
#stage.hoch:not(.breit) .ko-t { font-size:18px; }
#stage.hoch:not(.breit) #korb, #stage.hoch:not(.breit) #preise { width:376px; }
#stage.hoch:not(.breit) #ablage { gap:8px 8px; }
#stage.hoch .knopf .taste, #stage.quer-handy .knopf .taste { font-size:14px; }
#stage.quer-handy .hilfe-text, #stage.quer-handy #pop-text, #stage.quer-handy .en-unter, #stage.quer-handy .en-einladung, #stage.quer-handy .en-rekord,
#stage.quer-handy .en-tag-t, #stage.quer-handy .en-tag-z, #stage.quer-handy .en-erkl, #stage.quer-handy .en-teilen, #stage.quer-handy .en-platz, #stage.quer-handy .en-platz small { font-size:17px; }
#stage.quer-handy .ov-knoepfe .kb, #stage.quer-handy .ov-knoepfe button { min-height:72px; }
#stage.quer-handy .ov-box { padding:14px 18px; }
#stage.quer-handy .en-platz { grid-template-columns:34px 8px minmax(0, 1fr) 70px 70px 90px; }
#stage.quer-handy .en-platz .nur-quer, #stage.quer-handy .en-platz .pk2 { display:none; }