/* Speedcampus – KI-Campus in der Lausitz, Frühjahr 2034: „Morgen am See“ (hell, Standard) und „Campus bei Nacht“ (dunkel).
 * Bühne 1280 × 800 (Hochformat 540 × 960–1300 in der Partie), skaliert. Hinter allen Bildschirmen liegt der Campus (#kulisse, KI-Bild).
 * Foyer, Tischraum, Overlays und Endtafel aus der Vorlage Speedcats (Muster Speedmurano); der Partie-Teil am Ende ist eigen und überschreibt. */
:root {
  --bg:#141a24; --panel:rgba(20,26,38,.9); --panel2:rgba(34,42,58,.95); --panel-solid:#1c2433;
  --akz:#f0b85a; --akz-hell:#ffd58a; --akz2:#a8742a; --linie:rgba(240,184,90,.32);
  --text:#f6eee2; --text-2:#e2d8c8; --text-3:#bdb2a0; --dim:#c8b690;
  --gold:#ffd36b; --rot:#ff8a72; --gruen:#a6d97a; --blau:#86c0f0; --rand:#5a4a34;
  --ov-a:#26304a; --ov-b:#121826; --scrim:rgba(6,8,14,.72);
  --kopf:'Georgia', 'Times New Roman', serif;
  --sans:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --pt-grund:#f3e9d6;
}
:root[data-theme="light"] {
  --bg:#f1e8d6; --panel:rgba(251,246,236,.93); --panel2:rgba(242,233,216,.97); --panel-solid:#f6eedf;
  --akz:#7a4a14; --akz-hell:#6a3a06; --akz2:#b98a46; --linie:rgba(110,76,30,.3);
  --text:#24180e; --text-2:#42301c; --text-3:#5c4830; --dim:#665234;
  --gold:#7a4e00; --rot:#b4232f; --gruen:#2f7a2a; --blau:#1a5fb4; --rand:#cbb48c;
  --ov-a:#f8f1e4; --ov-b:#e8dcc6; --scrim:rgba(40,26,10,.45);
  --pt-grund:#fbf5ea;
}
#kulisse { position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,20,.15), rgba(8,10,20,.45)), url(img/nacht.webp) center/cover, radial-gradient(ellipse at center, #2a3448 0%, #10141e 80%); }
:root[data-theme="light"] #kulisse { background:linear-gradient(180deg, rgba(255,250,240,.12), rgba(255,250,240,.28)), url(img/kulisse.webp) center/cover, radial-gradient(ellipse at center, #f2eadc 0%, #d8c8b0 85%); }
#stage.hoch #kulisse { background-image:linear-gradient(180deg, rgba(8,10,20,.15), rgba(8,10,20,.45)), url(img/nacht.webp), radial-gradient(ellipse at center, #2a3448 0%, #10141e 80%); }
:root[data-theme="light"] #stage.hoch #kulisse { background-image:linear-gradient(180deg, rgba(255,250,240,.12), rgba(255,250,240,.28)), url(img/kulisse-hoch.webp), radial-gradient(ellipse at center, #f2eadc 0%, #d8c8b0 85%); }
#stage.lobbyhg #kulisse { filter:blur(3px) brightness(.6) saturate(.9); }
:root[data-theme="light"] #stage.lobbyhg #kulisse { filter:blur(3px) brightness(1.05) saturate(.8); }
:where(html, html *) { scrollbar-width:thin; scrollbar-color:var(--akz, #f2c94c) var(--panel2, rgba(20,58,52,.95)); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:var(--panel2, rgba(20,58,52,.95)); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:var(--akz, #f2c94c); border-radius:5px; border:2px solid transparent; background-clip:padding-box; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#040a0b; color:var(--text); font-family:var(--sans); overflow:hidden; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, #26304a 0%, #06080e 80%); }
:root[data-theme="light"] #wrap { background:radial-gradient(ellipse at center, #f2eadc 0%, #ccb898 85%); }
#stage { position:relative; width:1280px; height:800px; flex:none; transform-origin:center center; overflow:hidden; background:var(--bg); -webkit-touch-callout:none; }
[hidden] { display:none !important; }
button { font-family:var(--sans); cursor:pointer; }
input, select { font-family:var(--sans); font-size:16px; }
.sgzi { width:18px; height:18px; flex:none; display:inline-block; vertical-align:-3px; }

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

/* ================================================================ Dorfplatz (Wartesaal) / Tischraum */
#lobby, #tisch { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(10,12,20,.25), rgba(4,8,14,.5)); }
:root[data-theme="light"] #lobby, :root[data-theme="light"] #tisch { background:linear-gradient(180deg, rgba(250,244,232,.25), rgba(232,220,200,.45)); }
.lo-kopf { position:relative; display:flex; align-items:center; gap:18px; padding:12px 24px 10px; border-bottom:1px solid var(--linie); background:var(--panel); }
.lo-logo { font-family:var(--kopf); font-size:30px; font-weight:900; letter-spacing:5px; color:var(--akz-hell); text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(242,201,76,.22); }
:root[data-theme="light"] .lo-logo { text-shadow:none; }
.lo-raum { font-size:18px; color:var(--text-2); font-style:italic; }
.lo-ich { margin-left:auto; font-size:15px; color:var(--text-2); }
.lo-ich b { color:var(--akz-hell); }
.lo-kopf-r { display:flex; gap:8px; margin-left:14px; }
.lo-label { font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--akz); margin-bottom:6px; font-weight:800; }
.lo-label small { text-transform:none; letter-spacing:0; color:var(--text-3); font-weight:500; font-size:12px; }
#chatwin, #tchatwin, #pchatwin { flex:1; overflow-y:auto; background:rgba(0,0,0,.25); border:1px solid rgba(242,201,76,.2); border-radius:8px; padding:9px 11px; font-size:15px; line-height:1.45; user-select:text; }
:root[data-theme="light"] #chatwin, :root[data-theme="light"] #tchatwin, :root[data-theme="light"] #pchatwin { background:rgba(255,255,240,.55); }
#chatin, #tchatin, #pchatin { margin-top:8px; padding:8px 12px; background:rgba(0,0,0,.3); color:var(--text); border:1px solid var(--linie); border-radius:8px; outline:none; font-size:16px; }
:root[data-theme="light"] #chatin, :root[data-theme="light"] #tchatin, :root[data-theme="light"] #pchatin { background:rgba(255,255,240,.75); }
#chatin:focus, #tchatin:focus, #pchatin:focus { border-color:var(--akz-hell); }
.nm { color:var(--akz-hell); font-weight:bold; }
.sys { color:var(--text-3); font-style:italic; }
.lo-chat { display:flex; flex-direction:column; min-height:0; }
.lo-spieler { display:flex; flex-direction:column; min-height:0; }
.lo-tabs { display:flex; gap:4px; margin-bottom:8px; }
.lo-tabs button { flex:1; background:rgba(0,0,0,.22); color:var(--text-2); border:1px solid var(--linie); border-radius:8px 8px 0 0; padding:8px; font-size:15px; font-weight:700; }
.lo-tabs button.an { background:rgba(242,201,76,.18); color:var(--akz-hell); border-color:var(--akz); }
.lo-tab { flex:1; display:flex; flex-direction:column; min-height:0; }
.lo-liste { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
.lo-hinweis { color:var(--text-3); font-style:italic; font-size:14px; margin:8px 0; }
.it { display:flex; align-items:center; gap:8px; padding:6px 10px; background:rgba(0,0,0,.18); border-radius:6px; font-size:15px; }
.it .pk { width:9px; height:9px; border-radius:50%; background:var(--gruen); }
.it.spielt .pk { background:var(--gold); }
.it.me { color:var(--akz-hell); }
.tb { display:flex; align-items:center; gap:12px; padding:10px 12px; background:rgba(0,0,0,.18); border:1px solid var(--linie); border-radius:8px; cursor:pointer; }
@media (hover: hover) { .tb:hover { border-color:var(--akz-hell); background:rgba(242,201,76,.08); } }
.tb.voll { opacity:.55; cursor:default; }
.tb.laeuft { border-style:dashed; }
.tb-links { flex:1; min-width:0; }
.tb-kopf { display:flex; justify-content:space-between; font-weight:bold; font-size:16px; gap:8px; }
.tb-kopf .frei { color:var(--gruen); font-size:14px; white-space:nowrap; }
.tb-kopf .frei.aus { color:var(--text-3); }
.tb-sub { color:var(--text-2); font-size:13px; margin-top:3px; }
.tb-plaetze { display:flex; gap:2px; white-space:nowrap; }
.tb-plaetze .sgzi { width:16px; height:16px; }
.tb-plaetze .p-frei { opacity:.35; }
.tb-knopf { flex:none; padding:6px 14px; font-size:14px; }
.tb-route { display:inline-block; margin-left:6px; padding:0 7px; border-radius:7px; font-size: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(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; }
.seg-t { white-space:nowrap; } .lo-seg button { flex:1 1 0; min-width:0; }
.lo-seg button + button { border-left:1px solid var(--linie); }
.lo-seg button.an { color:#2b2405; background:linear-gradient(#ffe08a, #d9a81f); }
.seg-ic .sgzi { width:19px; height:19px; vertical-align:-4px; }
.lo-optionen { flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow:row dense; align-content:start; column-gap:14px; row-gap:7px; }
.lo-optionen > .lw-paar { display:contents; }
.lo-optionen > :not(.lw-zeile, .lw-paar), .lo-optionen > .lw-zeile:is(.lw-breit, :has(.lw-name, .lw-ausgabe, .lw-wahl > :nth-child(6))), .lo-optionen > .lw-paar > .lw-zeile:is(.lw-breit, :has(.lw-wahl > :nth-child(6))) { grid-column:1 / -1; }
.lw-zeile { display:flex; flex-direction:column; gap:4px; }
.lw-titel { font-size:13px; color:var(--text-2); } .lw-titel b { color:var(--text); font-size:14px; }
.lw-wahl { display:flex; gap:5px; flex-wrap:wrap; }
.lw-wahl button { padding:5px 9px; border-radius:7px; font-size:14px; color:var(--text); background:rgba(0,0,0,.22); border:1px solid var(--linie); }
@media (hover: hover) { .lw-wahl button:hover { border-color:var(--akz-hell); } }
.lw-wahl button.an { background:rgba(242,201,76,.24); border-color:var(--akz-hell); color:var(--akz-hell); font-weight:800; }
.lw-ausgabe { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.lw-ausgabe button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:7px 10px 8px; border-radius:9px; text-align:left; color:var(--text-2);
  background:linear-gradient(160deg, rgba(150,90,30,.3), rgba(10,6,14,.6)); border:1px solid var(--linie); font-size:12px; line-height:1.3; }
:root[data-theme="light"] .lw-ausgabe button { background:linear-gradient(160deg, rgba(200,160,90,.25), rgba(255,255,240,.6)); }
.lw-ausgabe button b { font-size:15px; color:var(--text); font-family:var(--kopf); }
.lw-ausgabe button.an { border-color:var(--akz-hell); box-shadow:0 0 0 2px rgba(242,201,76,.35); color:var(--text); }
.lw-name { display:flex; gap:6px; }
.lw-name input { flex:1; min-width:0; padding:6px 12px; background:rgba(0,0,0,.3); color:var(--text); border:1px solid var(--akz); border-radius:8px; outline:none; font-size:16px; }
:root[data-theme="light"] .lw-name input { background:rgba(255,255,240,.8); }
.lw-wuerfel { width:40px; flex:none; padding:0; }
.lw-info { display:inline-flex; width:18px; height:18px; margin-left:5px; border-radius:50%; align-items:center; justify-content:center; font:800 12.5px/1 var(--sans); color:#2b2405;
  background:var(--akz-hell); border:0; vertical-align:1px; cursor:pointer; padding:0; }
:root[data-theme="light"] .lw-info { color:#fff8e6; }
.lw-box { font-size:12.5px; color:var(--text-2); line-height:1.45; background:rgba(242,201,76,.08); border:1px solid rgba(242,201,76,.26); border-radius:8px; padding:7px 10px; }
.nw { white-space:nowrap; }
.lo-los { flex:none; display:flex; flex-direction:column; gap:5px; }
.lw-anleitung { padding:8px 10px; border-radius:10px; background:linear-gradient(180deg, rgba(150,90,30,.2), rgba(10,6,14,.3)); border:1px solid rgba(242,201,76,.25); }
:root[data-theme="light"] .lw-anleitung { background:rgba(200,160,90,.14); }
.lw-an-titel { font-size: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)); }
/* ================================================================ Partie */
#partie { position:absolute; inset:0; z-index:2; }
.panel { position:absolute; background:var(--panel); backdrop-filter:blur(5px); border:1px solid var(--linie); border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,240,210,.06), 0 8px 24px rgba(0,0,0,.4); }
:root[data-theme="light"] .panel { box-shadow:inset 0 1px 0 #fff8, 0 6px 18px rgba(60,40,20,.22); }
#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:12px; letter-spacing:2px; color:var(--dim); margin-top:3px; }
.trenner { width:1px; align-self:stretch; margin:10px 0; background:var(--linie); }
.runde { font-size:12px; 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 span { display:inline-block; min-width:3.4ch; text-align:right; font-variant-numeric:tabular-nums; }
.uhr.knapp { box-shadow:0 0 0 3px var(--rot), 0 2px 6px rgba(0,0,0,.35); animation:puls .8s infinite alternate; }
@keyframes puls { to { opacity:.55; } }
.knopf { display:inline-flex; align-items:center; gap:6px; font-weight:800; letter-spacing:.3px; font-size:15px; color:#2b2405; cursor:pointer; padding:9px 15px; border-radius:8px;
  border:1px solid #fff0bd; background:linear-gradient(#ffe08a, #d9a81f); box-shadow:0 2px 0 #6a5006, inset 0 1px 0 #fff6; white-space:nowrap; }
.knopf.leise { color:var(--text); background:var(--panel2); border-color:var(--linie); box-shadow:none; }
.knopf.rot { color:#fff4ee; background:linear-gradient(#e06a52, #a8301e); border-color:#ffc0b0; box-shadow:0 2px 0 #5a1608, inset 0 1px 0 #fff4; }
.knopf.klein { padding:5px 10px; font-size:13.5px; }
.knopf .sgzi { width:16px; height:16px; }
.knopf.lockt { animation:lockt 1s ease-in-out infinite alternate; }
@keyframes lockt { to { box-shadow:0 0 0 4px rgba(255,224,138,.5), 0 2px 0 #6a5006; } }
.warn { color:var(--rot); font-weight:800; }


.st-k { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:3px; min-width:0; padding:8px 12px 9px; border-radius:10px; background:rgba(0,0,0,.2); border:1px solid var(--linie); border-left:4px solid var(--linie); }
:root[data-theme="light"] .st-k { background:rgba(255,255,240,.6); }
.st-k small { font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:800; color:var(--dim); }
.st-k b { display:flex; align-items:center; gap:6px; font-size:18px; line-height:1.15; color:var(--text); }
.st-k b .sgzi { width:18px; height:18px; }


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

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

#ansicht-menu { right:12px; top:72px; padding:10px 12px; z-index:40; width:300px; display:flex; flex-direction:column; gap:6px; }
#ansicht-menu label { display:flex; align-items:flex-start; gap:9px; font-size:14px; cursor:pointer; padding:3px 0; }
#ansicht-menu label small { display:block; font-size:12px; color:var(--dim); }
#ansicht-menu input { width:18px; height:18px; margin-top:1px; accent-color:var(--akz); flex:none; }
#ansicht-menu .am-t { font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--dim); font-weight:800; margin-top:4px; }
.am-reihe { display:flex; gap:6px; }
/* Meldungen: Stapel, neue oben, ältere rutschen tiefer, jede blendet nach 5 s aus */
.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:flex; flex:none; }
/* Banner */
.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; } }

/* Overlays */
.overlay { position:absolute; inset:0; background:var(--scrim); display:flex; align-items:center; justify-content:center; z-index:80; }
/* Endtafel deckt das Brett ganz ab: der Hof bekommt eine eigene Ebene (seine z-index 90–96 bleiben drinnen), die Tafel einen dichten Grund */
#hof { isolation:isolate; }
#endtafel { z-index:120; background:rgba(8,10,18,.82); backdrop-filter:blur(3px); }
:root[data-theme="light"] #endtafel { background:rgba(40,30,16,.6); }
#endtafel .ov-box { background:linear-gradient(180deg, var(--ov-a), var(--ov-b)), var(--panel, #1c2233); }
/* Abrechnung mit Spannung: verdeckte Werte, Häuser springen nacheinander auf, die laufende Punktzahl hüpft */
.en-liste.spannung .en-h, .en-liste.fertig .en-h { animation:none; }   /* das Einblenden übernimmt die Abrechnung */
.en-liste.spannung .en-h { opacity:0; transform:scale(.6); }
.en-liste.spannung .en-sp { visibility:hidden; }
.en-liste .en-h.auf, .en-liste .en-sp.auf { opacity:1; transform:none; visibility:visible; transition:opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.en-liste.spannung .en-sp.auf { animation:enAuf .4s ease-out; }
@keyframes enAuf { from { transform:scale(.5); opacity:0; } to { transform:none; opacity:1; } }
.en-platz.zaehlt { border-color:var(--akz-hell); box-shadow:0 0 14px rgba(255,210,122,.35); }
.en-su b.hupf { animation:enHupf .45s ease-out; } .en-su b.minus.hupf { color:#e77a6a; }
@keyframes enHupf { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1); } }
.en-su b { display:inline-block; }
.en-liste.spannung { cursor:pointer; }
.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: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-einladung { margin:10px 0 0; padding:8px 12px; border-radius:10px; text-align:center; font-size:15px; background:rgba(154,214,111,.14); border:1px solid var(--gruen); color:var(--text); }
.hilfe-text { font-size:15px; line-height:1.55; color:var(--text); max-height:600px; overflow:auto; user-select:text; }
.hilfe-text h1, .hilfe-text h2, .hilfe-text h3 { font-family:var(--kopf); color:var(--akz-hell); margin:14px 0 6px; }
.hilfe-text h1 { margin-top:0; }
.hilfe-text table { border-collapse:collapse; font-size:14px; } .hilfe-text td, .hilfe-text th { border-bottom:1px solid var(--linie); padding:3px 8px; text-align:left; }
#note { position:absolute; left:50%; top:10px; transform:translateX(-50%); background:rgba(150,40,20,.95); color:#fff; padding:8px 16px; border-radius:8px; z-index:99; }
.en-platz { grid-template-columns:44px 14px minmax(0, 1fr) 64px 64px 66px 84px 96px; }
.en-platz .pk small { display:block; font-size:12px; font-weight:600; color:var(--dim); white-space:nowrap; font-family:var(--sans); }
.konfetti { border-radius:2px; width:10px; height:14px; }
/* ================================================================ Hochformat (Handy hochkant): Bühne 800 × 1100–1800 */
#stage.hoch .lo-haupt { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); }
#stage.hoch .lo-rechts { grid-template-rows:minmax(0, 1fr) 200px; }
#stage.hoch .lo-streifen { margin:10px 16px 0; }
#stage.hoch .lo-raum { display:none; }
#stage.hoch .ti-mitte { flex-wrap:wrap; }
#stage.hoch .ti-plaetze { flex:1 1 100%; max-height:300px; }
#stage.hoch .ti-chat { flex:1 1 100%; min-height:220px; }
#stage.hoch #kopf { height:70px; gap:10px; }
#stage.hoch #kopf .logo, #stage.hoch #kopf .trenner:first-of-type { display:none; }
#stage.hoch #kopf .kb-ic { width:56px; height:50px; }
#stage.hoch #kopf .kb-ic .sgzi { width:26px; height:26px; }
#stage.hoch .k-phase { font-size:21px; }
#stage.hoch .runde { font-size:14px; }
#stage.hoch .runde b { font-size:24px; }
#stage.hoch .uhr { font-size:24px; padding:7px 13px 7px 10px; }
#stage.hoch .uhr .sgzi { width:22px; height:22px; }
#stage.hoch .knopf { font-size:19px; padding:10px 16px; }
#stage.hoch .ch-liste { font-size:16px; }
#stage.hoch .ch-tabs button { font-size:15px; padding:8px; }
#stage.hoch .ch-z.runde { font-size:14px; }
#stage.hoch #pchatwin { font-size:17px; }
#stage.hoch #pchatin { font-size:20px; padding:9px 12px; }
#stage.hoch .pc-knoepfe button { font-size:18px; padding:8px; }
#stage.hoch .pc-knoepfe .sgzi { width:20px; height:20px; }
#stage.hoch .meldung { font-size:21px; }
#stage.hoch .banner { min-width:0; width:86%; top:36%; }
#stage.hoch .bn-unter { font-size:19px; }
#stage.hoch .en-platz { grid-template-columns:36px 12px minmax(0, 1fr) 60px 66px 100px; }
#stage.hoch .en-platz .nur-quer { display:none; }
#stage.hoch .en-platz .pk small { font-size:13px; }

@media (pointer: coarse) {
  .kb-ic { width:50px; height:44px; }
  .lw-wahl:not(.lw-ausgabe) button, .ti-wahl button { min-height:40px; min-width:40px; padding:8px 13px; font-size:15px; }
  .kb { min-height:42px; }
  .knopf { min-height:42px; }
  .pc-knoepfe button { min-height:40px; }
  .ch-tabs button { min-height:40px; }
  button.lw-info { width:40px; height:36px; margin:-9px -11px -9px -6px; border-radius:18px; background:radial-gradient(circle at center, var(--akz-hell) 0 9px, transparent 9.5px); }
}
/* ================================================================ Partie (Neuaufbau 2026-11-02): Spielerleiste oben (Klick wechselt das Brett), links Lieferwagen mit
 * Anhängern, Rassen-Leiste, Zugzusammenfassung und Auftrag, rechts groß das Brett mit dem Hof des Spielers am Zug (oder des gewählten).
 * Spielverlauf und Chat sind eine Schublade (Knopf im Kopf). Alle Bereiche haben feste Größen – Inhalt verändert keinen Rahmen (Gate R31). */
#hinweise { position:absolute; left:20px; width:424px; top:470px; height:112px; overflow:hidden; z-index:70; display:flex; flex-direction:column; align-items:stretch; gap:5px; pointer-events:none; }
#hinweise .meldung { font-size:13px; font-weight:600; padding:7px 11px; text-align:left; max-height:100px; animation-name:meldungRein2; line-height:1.35; }
@keyframes meldungRein2 { from { opacity:0; transform:translateY(-10px); } }
.banner { position:absolute; left:50%; top:40%; z-index:75; min-width:420px; max-width:680px; padding:16px 30px 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); }
.bn-unter { text-transform:none; letter-spacing:.3px; }
.konfetti { border-radius:50% 0 50% 0; width:12px; height:9px; }
.siegel { flex:none; }
.fa-ki .sgzi { width:15px; height:15px; vertical-align:-2px; opacity:.8; }
.tn { color:var(--text); white-space:nowrap; box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--rf) 70%, transparent); }

/* Stufenleiter (Solo) – aus der Vorlage */
.lw-leiter { display:flex; flex-direction:column; gap:6px; }
.ll-titel { font-weight:800; color:var(--text); }
.ll-kette { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ll-stufe { display:flex; align-items:center; gap:5px; padding:3px 8px 3px 5px; border-radius:9px; border:1px solid var(--linie); background:rgba(0,0,0,.18); }
:root[data-theme="light"] .ll-stufe { background:rgba(255,255,240,.6); }
.ll-stufe .sgzi { width:20px; height:20px; }
.ll-stufe b { color:var(--text); text-transform:capitalize; } .ll-stufe small { color:var(--text-3); font-size:12.5px; }
.ll-stufe.ok { border-color:var(--gruen); } .ll-stufe.jetzt { border-color:var(--akz-hell); box-shadow:0 0 0 2px rgba(242,201,76,.3); }
.ll-leer { display:inline-block; width:16px; height:16px; border-radius:50%; border:2px dashed var(--linie); }
.ll-pfeil .sgzi { width:14px; height:14px; opacity:.6; }
.ll-rekorde { font-size:12.5px; color:var(--text-2); }
.st-leiter { flex:1 1 100%; }

/* ================================================================ Speedcampus: Farbwelt und Partie (überschreibt die Vorlage)
 * Hell „Morgen am See“ (Standard): Nebelblau, Seegrün, warmes Holz – kein Reinweiß. Dunkel „Campus bei Nacht“: Tiefblau mit warmen Fenstern.
 * Quer 1280 × 800: Spielerleiste oben, links das große Brett (Campus des Spielers am Zug), rechts Aktionsfeld (feste Höhe) und Reiter
 * Markt | Wertung | Verlauf | Chat. Hochformat 540 breit: Brett oben, darunter Aktionsfeld und Reiter. Kein Bereich wächst mit dem Inhalt (Gate R31). */
:root {
  --bg:#0f1824; --panel:rgba(16,26,40,.9); --panel2:rgba(28,42,60,.96); --panel-solid:#162232;
  --akz:#52d1bf; --akz-hell:#8ff0e2; --akz2:#2a8f82; --linie:rgba(110,200,190,.3);
  --text:#eef4f8; --text-2:#d2dee8; --text-3:#a9b9c6; --dim:#9fb3c2;
  --gold:#ffd36b; --rot:#ff8a72; --gruen:#9be08a; --blau:#86c0f0; --rand:#2e4a5a;
  --ov-a:#1d2c40; --ov-b:#0f1826; --scrim:rgba(4,8,14,.72);
  --ziel:#21d0b2; --zahl:#ffd36b; --ziel-d:#086b5b;
}
:root[data-theme="light"] {
  --bg:#e7edf0; --panel:rgba(246,248,247,.93); --panel2:rgba(232,239,240,.97); --panel-solid:#f1f5f4;
  --akz:#0e7d70; --akz-hell:#0a5f55; --akz2:#4aa79a; --linie:rgba(40,90,100,.28);
  --text:#14212b; --text-2:#26384a; --text-3:#4a5e6e; --dim:#4f6372;
  --gold:#7a5600; --rot:#b4232f; --gruen:#2f7a2a; --blau:#1a5fb4; --rand:#b7c9cf;
  --ov-a:#f4f7f6; --ov-b:#e2eaec; --scrim:rgba(14,30,40,.45);
  --ziel:#0b9e86; --zahl:#c98a06; --ziel-d:#086b5b;
}
#kulisse { background:linear-gradient(180deg, rgba(6,10,20,.2), rgba(6,10,20,.5)), url(img/nacht.webp) center/cover, radial-gradient(ellipse at center, #1d2c40 0%, #0a1220 80%); }
:root[data-theme="light"] #kulisse { background:linear-gradient(180deg, rgba(240,246,248,.1), rgba(240,246,248,.3)), url(img/kulisse.webp) center/cover, radial-gradient(ellipse at center, #e8f0f2 0%, #c4d4da 85%); }
#stage.hoch #kulisse { background-image:linear-gradient(180deg, rgba(6,10,20,.2), rgba(6,10,20,.5)), url(img/nacht.webp), radial-gradient(ellipse at center, #1d2c40 0%, #0a1220 80%); }
:root[data-theme="light"] #stage.hoch #kulisse { background-image:linear-gradient(180deg, rgba(240,246,248,.1), rgba(240,246,248,.3)), url(img/kulisse-hoch.webp), radial-gradient(ellipse at center, #e8f0f2 0%, #c4d4da 85%); }
#wrap { background:radial-gradient(ellipse at center, #1d2c40 0%, #050a12 80%); }
:root[data-theme="light"] #wrap { background:radial-gradient(ellipse at center, #e8f0f2 0%, #b8cad0 85%); }
:root[data-theme="light"] .kb { background:linear-gradient(180deg, #f7faf9, #dfe8ea); box-shadow:inset 0 1px 0 #fff8, 0 2px 6px rgba(20,40,50,.2); }
.kb { background:linear-gradient(180deg, #2c3e56, #18263a); }
.kb-gold { background:linear-gradient(#ffe08a, #d9a81f) !important; }
.kb-gruen { background:linear-gradient(#8ff0d8, #2fae96) !important; border-color:#d0fff4; color:#04241e !important; }
.logo { color:var(--akz); }
.lo-logo { color:var(--akz); }

/* ---- Grundlayout quer */
#kopf { left:12px; right:12px; top:10px; height:56px; }
#spieler { left:12px; right:12px; top:72px; height:54px; display:flex; gap:6px; padding:5px; background:transparent; border:none; box-shadow:none; backdrop-filter:none; }
#brett { left:12px; top:132px; width:776px; bottom:10px; overflow:hidden; isolation:isolate; }
#aktion { left:796px; right:12px; top:132px; height:276px; padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
#reiter { left:796px; right:12px; top:414px; bottom:10px; padding:6px 8px 8px; display:flex; flex-direction:column; }
#wurfebene { position:absolute; inset:0; z-index:58; pointer-events:none; }

/* ---- Kopf: Phasen A–E mit je 5 Runden */
.k-zeit { display:flex; gap:6px; align-items:center; }
.kz { display:flex; flex-direction:column; align-items:center; gap:2px; padding:2px 5px; border-radius:6px; opacity:.55; }
.kz b { font:900 15px/1 var(--kopf); color:var(--text-2); }
.kz i { display:flex; gap:2px; }
.kz em { width:6px; height:6px; border-radius:50%; background:var(--linie); }
.kz em.v { background:var(--text-3); } .kz em.j { background:var(--akz); box-shadow:0 0 0 2px color-mix(in srgb, var(--akz) 35%, transparent); }
.kz.an { opacity:1; background:color-mix(in srgb, var(--akz) 16%, transparent); } .kz.an b { color:var(--akz-hell); }
.kz.vorbei { opacity:.4; }
#k-rat.an { background:color-mix(in srgb, var(--gold) 30%, transparent); }

/* ---- Spielerleiste */
.sp { flex:1 1 0; min-width:0; font-size:14px; display:flex; align-items:center; gap:8px; padding:4px 10px 4px 6px; border-radius:10px; border:1px solid var(--linie); background:var(--panel); color:var(--text); text-align:left; box-shadow:0 3px 10px rgba(0,0,0,.25); border-left:5px solid var(--sf); }
.sp.blick { background:var(--panel2); outline:2px solid var(--sf); outline-offset:-1px; }
.sp.dran { box-shadow:0 0 0 2px var(--sf), 0 3px 14px color-mix(in srgb, var(--sf) 45%, transparent); }
.sp.weg { opacity:.65; }
.sp-platz { flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 13px/1 var(--sans); background:var(--sd, var(--sf)); color:#fff; box-shadow:inset 0 -2px 0 #0003; }
.sp-nm { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.sp-nm b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-nm small { font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-du { color:var(--dim); font-weight:600; }
.sp-st { color:var(--text); font-weight:800; } .sp-st::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--sf); margin-right:4px; vertical-align:1px; }
.sp-wf { display:flex; gap:2px; flex:none; } .sp-wf span.weg { opacity:.3; } .sp-wf svg { display:block; }
.sp-kredit, .sp-fk, .sp-pk { flex:none; display:inline-flex; align-items:center; gap:2px; font:700 14px/1 var(--sans); font-variant-numeric:tabular-nums; min-width:34px; }
.sp-pk { font:900 16px/1 var(--kopf); min-width:40px; }
.sp.allein { flex:1; } .sp.allein .sgzi { width:24px; height:24px; color:var(--akz); } .sp-best { font-size:13px; color:var(--dim); white-space:nowrap; } .sp-best b { color:var(--text); }

/* ---- Brett */
.br-kopf { position:absolute; left:12px; right:12px; top:8px; height:26px; display:flex; align-items:center; gap:10px; z-index:2; }
.br-titel { font:900 17px/1 var(--kopf); color:var(--text); white-space:nowrap; padding-left:10px; border-left:5px solid var(--sf, var(--akz)); }
#br-info { font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
#br-zurueck { margin-left:auto; font:700 13px var(--sans); padding:5px 12px; border-radius:14px; border:1px solid var(--akz); background:color-mix(in srgb, var(--akz) 18%, transparent); color:var(--text); }
#campus { position:absolute; left:6px; right:6px; top:36px; bottom:34px; width:calc(100% - 12px); height:calc(100% - 70px); touch-action:pinch-zoom; }
#hinweise { left:12px; top:40px; width:330px; height:150px; }
#hinweise .meldung { background:rgba(22,34,50,.95); border:1px solid var(--akz); color:var(--text); }
:root[data-theme="light"] #hinweise .meldung { background:rgba(241,245,244,.96); }
#hinweise .meldung:not(.neutral) { background:rgba(120,30,20,.94); border-color:#ffb8a3; color:#fff; }
.fd { cursor:default; }
.fd-grund { stroke:rgba(20,40,50,.28); stroke-width:.03; transition:filter .2s; }
:root:not([data-theme="light"]) .fd:not(.gebaut) .fd-grund { filter:brightness(.78) saturate(.9); }
.fd-sym { opacity:.5; }
.fd-kreis { fill:rgba(250,252,250,.9); stroke:rgba(20,40,50,.35); stroke-width:.03; }
.fd-z { font:800 .46px var(--sans); text-anchor:middle; fill:#14212b; }
.fd-rand { fill:none; stroke:rgba(10,20,30,.45); stroke-width:.035; }
.ab-svg circle { fill:#fbfbf7; stroke:rgba(0,0,0,.35); stroke-width:.03; }
.ab-svg circle.ende { fill:#ffe9a8; }
.ab-svg text { font:900 .36px var(--sans); text-anchor:middle; fill:#fff; }
.ab-svg circle:not([style]) + text { fill:#14212b; }
.ab-svg.st circle { fill:#2f6f5e; } .ab-svg.st text { fill:#fff; }
.grenzen { fill:none; stroke:rgba(14,26,36,.8); stroke-width:.075; stroke-linecap:round; pointer-events:none; }
:root:not([data-theme="light"]) .grenzen { stroke:rgba(190,230,235,.65); }
.fd.zahl .fd-grund { stroke:var(--zahl); stroke-width:.09; }
.fd.zahl .fd-kreis { fill:#fff3c4; stroke:var(--zahl); stroke-width:.06; }
.fd.ziel { cursor:pointer; }
.fd-ziel { fill:none; stroke:var(--ziel); stroke-width:.11; animation:zielPuls 1.2s ease-in-out infinite alternate; pointer-events:none; }
@keyframes zielPuls { from { opacity:.55; } to { opacity:1; } }
.fd.ziel .fd-grund { filter:brightness(1.08) saturate(1.1); }
.fd-k circle { fill:var(--ziel-d); stroke:#fff; stroke-width:.03; } .fd-k text { font:900 .3px var(--sans); text-anchor:middle; fill:#fff; }
.fd.vor .fd-grund, .fd.rat .fd-grund { stroke:var(--gold); stroke-width:.14; }
.fd.vor .fd-ziel { stroke:var(--gold); animation:none; }
@media (hover: hover) { .fd.ziel:hover .fd-grund { filter:brightness(1.18); } }
.fd.leuchtet .fd-pt, .fd.leuchtet .fd-grund { animation:gebietGlanz 1.6s ease-out; }
@keyframes gebietGlanz { 0% { filter:brightness(1); } 25% { filter:brightness(1.6) drop-shadow(0 0 .2px #fff); } 100% { filter:brightness(1); } }
#campus.fremd .fd { cursor:default; }

/* ---- Plättchen: Sechseck (flach oben) */
.pt.hex { position:relative; display:block; width:100%; aspect-ratio:1.1547; clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background:var(--pf, #888); overflow:hidden; }
.pt.hex img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pt.hex.leer { background:color-mix(in srgb, var(--fa, #8899aa) 22%, transparent); clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.pt-ers { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pf) 70%, #fff), var(--pf)); }
.pt-ab { position:absolute; right:14%; bottom:6%; display:inline-flex; align-items:center; gap:1px; padding:1px 4px; border-radius:8px; font:900 12px/1 var(--sans); color:#fff; background:rgba(20,30,40,.78); }
.pt-ab.ab-d { background:var(--af); }
.pt-ab.ab-g { background:rgba(250,240,215,.92); padding:1px 2px; }
.pt-ab.ab-l { background:#fff1b8; color:#5a4204; } .pt-ab.ab-l.ende { background:#2a3a4a; color:#ffe9a8; }
.flieger .pt.hex { width:100%; height:auto; }
.flieger.weg { opacity:1; }
.flieger.landen { filter:drop-shadow(0 8px 10px rgba(0,0,0,.4)); }

/* ---- Bauteile */
.bt { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:2px; color:var(--bf); }
.bt-z { position:absolute; left:-4px; top:-5px; display:flex; } .bt-z svg { display:block; filter:drop-shadow(0 1px 1px #0005); }
.bt-n { position:absolute; right:-6px; bottom:-6px; min-width:17px; height:17px; border-radius:9px; padding:0 4px; background:var(--bf); color:#fff; font:900 12px/17px var(--sans); text-align:center; box-shadow:0 1px 2px #0006; }

/* ---- Aktionsfeld */
#aktion.fremd { border-color:color-mix(in srgb, var(--sf) 60%, transparent); }
.ak-reihe { display:flex; gap:10px; align-items:stretch; }
.ak-oben { height:62px; }
.ak-mitte { height:72px; }
.ak-knoepfe { height:40px; gap:8px; flex:none; }
.ak-knoepfe .kb { flex:1; padding:6px 10px; font-size:15px; min-width:0; white-space:nowrap; }
.ak-t { display:block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; font-weight:800; color:var(--dim); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ak-wuerfel { flex:none; width:150px; }
.wu-reihe { display:flex; gap:8px; }
.wu { position:relative; width:46px; height:46px; padding:0; border-radius:10px; border:2px solid transparent; background:transparent; display:flex; align-items:center; justify-content:center; }
.wu svg { display:block; }
.wu.an { border-color:var(--zahl); box-shadow:0 0 0 3px color-mix(in srgb, var(--zahl) 40%, transparent); }
.wu.benutzt svg { opacity:.35; filter:grayscale(.6); }
.wu.rollt svg, .weiss.rollt svg { visibility:hidden; }
.wu:disabled { cursor:default; }
.wu.leer { border:2px dashed var(--linie); background:rgba(0,0,0,.08); }
.wu-haken { position:absolute; right:0; bottom:0; width:20px; height:20px; border-radius:50%; background:var(--akz); color:#04241e; display:flex; align-items:center; justify-content:center; }
.wu-haken .sgzi { width:14px; height:14px; }
.wu.x { width:auto; padding:0 8px; flex-direction:column; border-color:var(--zahl); background:color-mix(in srgb, var(--zahl) 18%, transparent); color:var(--text); }
.wu.x b { font:900 15px/1 var(--kopf); } .wu.x small { font-size:12px; color:var(--dim); }
.ak-werte { flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.wt { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:60px; height:56px; border-radius:9px; background:rgba(0,0,0,.16); border:1px solid var(--linie); }
:root[data-theme="light"] .wt { background:rgba(255,255,255,.45); }
.wt b { font:900 17px/1 var(--kopf); font-variant-numeric:tabular-nums; } .wt small { font-size:12px; color:var(--dim); }
.weiss { display:flex; flex-direction:column; align-items:center; gap:2px; width:44px; } .weiss small { font-size:12px; color:var(--dim); }
.ak-box { flex:1; min-width:0; }
.ak-ablage, .ak-lager { display:flex; gap:6px; }
.ab-pl, .lg-pl { position:relative; flex:none; width:62px; height:54px; padding:0; border-radius:8px; border:2px solid transparent; background:transparent; display:flex; align-items:center; justify-content:center; }
.ab-pl.leer, .lg-pl.leer { border:2px dashed var(--linie); background:rgba(0,0,0,.08); }
.ab-pl .pt.hex { width:58px; }
.ab-pl.an { border-color:var(--ziel); background:color-mix(in srgb, var(--ziel) 18%, transparent); }
.ab-pl.weg { border-color:var(--rot); background:color-mix(in srgb, var(--rot) 22%, transparent); }
.ab-pl.passtnicht .pt.hex { filter:saturate(.45) brightness(.85); }
.ab-n { position:absolute; right:1px; top:1px; min-width:18px; height:18px; border-radius:9px; padding:0 4px; background:var(--ziel-d); color:#fff; font:900 11.5px/18px var(--sans); }
.lg-pl { background:rgba(0,0,0,.1); border:1px solid var(--linie); }
:root[data-theme="light"] .lg-pl { background:rgba(255,255,255,.5); }
.lg-pl.ziel { border:2px solid var(--ziel); }
.lg-pl.vor { border:2px solid var(--gold); }
.ak-hinweis { flex:none; height:38px; overflow:hidden; font-size:14px; line-height:1.35; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ak-hinweis b { color:var(--text); } .ak-hinweis small { color:var(--dim); } .ak-hinweis .rat { color:var(--gold); font-weight:800; } .ak-hinweis .rat .sgzi { width:15px; height:15px; }

/* ---- Reiter */
.re-tabs { display:flex; gap:4px; margin-bottom:6px; flex:none; }
.re-tabs button { flex:1; font-size:12.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--dim); background:transparent; border:1px solid transparent; border-radius:7px; padding:6px 4px; min-height:32px; }
.re-tabs button.an { color:var(--text); background:var(--panel2); border-color:var(--linie); }
.re-inhalt { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.re-inhalt.ch-chat { display:flex; flex-direction:column; }
.re-inhalt.ch-chat[hidden] { display:none !important; }
#pchatwin { flex:1; min-height:0; overflow-y:auto; border-radius:7px; background:rgba(0,0,0,.18); padding:6px 8px; font-size:13px; user-select:text; }
:root[data-theme="light"] #pchatwin { background:rgba(255,255,255,.5); }
#pchatin { margin-top:6px; padding:7px 9px; border-radius:7px; border:1px solid var(--linie); background:rgba(0,0,0,.2); color:var(--text); }
:root[data-theme="light"] #pchatin { background:rgba(255,255,255,.7); }
#re-verlauf { display:flex; flex-direction:column; gap:3px; font-size:12.5px; line-height:1.35; }
#re-verlauf[hidden] { display:none !important; }

/* ---- Markt */
.mk-depots { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.dp { padding:4px 6px 5px; border-radius:9px; border:1px solid var(--linie); background:rgba(0,0,0,.14); }
:root[data-theme="light"] .dp { background:rgba(255,255,255,.42); }
.dp.zahl { border-color:var(--zahl); box-shadow:0 0 0 2px color-mix(in srgb, var(--zahl) 35%, transparent); }
.dp.ziel { border:2px solid var(--ziel); cursor:pointer; }
.dp.vor { border:2px solid var(--gold); }
.dp-kopf { display:flex; align-items:center; gap:6px; height:24px; }
.dp-kopf svg { display:block; flex:none; }
.dp-t { font:800 13px var(--sans); color:var(--text-2); }
.dp-k { margin-left:auto; min-width:22px; height:18px; border-radius:9px; background:var(--ziel-d); color:#fff; font:900 12px/18px var(--sans); text-align:center; padding:0 5px; }
.dp-waren { display:flex; align-items:center; gap:10px; height:24px; padding-left:4px; }
.dp-waren small { font-size:12px; color:var(--dim); }
.dw { position:static; display:inline-flex; align-items:center; gap:2px; height:22px; padding:0 5px 0 2px; border-radius:11px; background:color-mix(in srgb, var(--bf) 22%, transparent); border:1px solid color-mix(in srgb, var(--bf) 60%, transparent); }
.dw svg { display:block; } .dw b { font:900 12px/1 var(--sans); color:var(--text); }
.dp-waren { gap:4px !important; overflow:hidden; }
.dp-plaetze { display:flex; gap:4px; }
.dp-pl, .sw-pl { position:relative; flex:none; width:48px; height:44px; padding:0; border:2px solid transparent; border-radius:7px; background:transparent; display:flex; align-items:center; justify-content:center; }
.dp-pl .pt.hex, .sw-pl .pt.hex { width:44px; }
.dp-pl.ziel, .sw-pl.ziel { border-color:var(--ziel); background:color-mix(in srgb, var(--ziel) 14%, transparent); }
.dp-pl.kaufbar:not(.ziel) { border-color:color-mix(in srgb, var(--gold) 60%, transparent); }
.dp-pl.vor, .sw-pl.vor { border-color:var(--gold); background:color-mix(in srgb, var(--gold) 20%, transparent); }
.dp-pl:disabled { cursor:default; }
.dp-pl.neu .pt.hex, .sw-pl.neu .pt.hex { animation:plNeu .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes plNeu { from { transform:translateY(-14px) scale(.6); opacity:0; } }
.mk-unten { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.mk-box { padding:5px 7px; border-radius:9px; border:1px solid var(--linie); background:rgba(0,0,0,.14); }
:root[data-theme="light"] .mk-box { background:rgba(255,255,255,.42); }
.mk-box .ak-t small { font-size:12px; text-transform:none; letter-spacing:0; font-weight:600; }
.mk-schwarz-l { display:flex; flex-wrap:wrap; gap:4px; min-height:46px; align-items:center; }
.leer-t { font-size:12.5px; color:var(--dim); }
.mk-boni { display:flex; gap:5px; }
.bo { flex:1; display:flex; align-items:center; justify-content:center; gap:3px; height:32px; border-radius:7px; background:var(--fa); border:1px solid var(--fr); }
.bo-w { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:50%; background:#fffbe8; color:#2a1d04; font:900 12.5px/1 var(--sans); box-shadow:inset 0 -2px 0 #0002; }
.bo-w.klein { min-width:18px; height:18px; font-size:12px; }
.bo-w.weg { background:var(--sf); color:#fff; opacity:.9; }

/* ---- Wertung */
.wt-tab { width:100%; border-collapse:collapse; font-size:13.5px; }
.wt-tab th { font-size:12.5px; text-align:right; padding:3px 6px; border-bottom:3px solid var(--sf); white-space:nowrap; overflow:hidden; max-width:90px; text-overflow:ellipsis; }
.wt-tab td { padding:3px 6px; border-bottom:1px solid var(--linie); text-align:right; font-variant-numeric:tabular-nums; }
.wt-tab td:first-child { text-align:left; color:var(--text-2); }
.wt-tab tr.su td { font-weight:800; } .wt-tab tr.su b { font:900 16px var(--kopf); }
.wt-tab tr.kopf td { text-align:left; padding-top:9px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); font-weight:800; }
.wt-labs { margin-top:8px; font-size:13px; line-height:1.6; }
.wl { display:inline-block; margin:2px 4px 0 0; padding:1px 7px; border-radius:9px; background:color-mix(in srgb, #e2bd2e 28%, transparent); border:1px solid #e2bd2e; font-size:12px; }
.wt-regel { font-size:12px; color:var(--text-3); line-height:1.45; margin:8px 0 0; }

/* ---- Schwebende Zahlen, Banner, Endtafel */
.schweb { position:absolute; transform:translate(-50%, -50%); font:900 20px/1 var(--kopf); color:#fff; padding:3px 9px; border-radius:12px; background:var(--akz2); box-shadow:0 3px 10px rgba(0,0,0,.4); animation:schweben 1.6s ease-out forwards; white-space:nowrap; }
.schweb.minus { background:#b4402f; } .schweb.gross { font-size:26px; background:linear-gradient(#ffe08a, #d9a81f); color:#2a1d04; }
@keyframes schweben { 0% { opacity:0; transform:translate(-50%, -30%) scale(.7); } 15% { opacity:1; transform:translate(-50%, -60%) scale(1.05); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -160%); } }
.en-platz { grid-template-columns:44px minmax(0, 175px) minmax(0, 1fr) 64px 92px; }
.en-figs { display:flex; flex-wrap:wrap; gap:4px; }
.en-z { display:flex; flex-direction:column; align-items:center; min-width:50px; padding:2px 4px; border-radius:6px; background:rgba(0,0,0,.14); }
:root[data-theme="light"] .en-z { background:rgba(255,255,255,.5); }
.en-z small { font-size:12px; color:var(--dim); white-space:nowrap; } .en-z b { font:800 14px var(--kopf); }
.en-z.en-e { background:color-mix(in srgb, var(--akz) 16%, transparent); }
.en-liste.spannung .en-e { opacity:0; transform:scale(.6); }
.en-liste .en-e.auf { opacity:1; transform:none; transition:opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
#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-regel { order:99; text-align:center; font-size:12.5px; color:var(--text-3); margin:8px 0 0; }
.en-liste-t { margin:12px 0 4px; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:800; color:var(--dim); }
.en-zeile { display:grid; grid-template-columns:34px 1fr auto; gap:8px; padding:4px 10px; border-radius:7px; font-size:15px; }
.en-zeile.ich { background:color-mix(in srgb, var(--akz) 16%, transparent); }
.en-zeile b { text-align:right; }
.banner { border-color:var(--akz); }
.bn-titel { color:var(--akz-hell); }

/* ================================================================ Hochformat: Bühne 540 × 960–1300 (am Handy Faktor etwa 0,69)
 * Tippziele mindestens 58 Bühnenpixel (etwa 40 px real), Schrift mindestens 13 px (etwa 9 px real). Ton und Spielregeln liegen im Menü. */
#stage.hoch #kopf { left:8px; right:8px; top:6px; height:66px; gap:8px; padding:0 8px; }
#stage.hoch #kopf .logo, #stage.hoch #kopf .trenner, #stage.hoch .k-phase, #stage.hoch #k-ton, #stage.hoch #k-hilfe { display:none; }
#stage.hoch #kopf .kb-ic { width:60px; height:59px; }
#stage.hoch #kopf .kb-ic .sgzi { width:26px; height:26px; }
#stage.hoch .uhr { font-size:20px; padding:6px 10px; }
#stage.hoch .kz:not(.an) { display:none; } #stage.hoch .kz { padding:3px 8px; } #stage.hoch .kz b { font-size:20px; } #stage.hoch .kz em { width:8px; height:8px; }
#stage.hoch #spieler { left:8px; right:8px; top:74px; height:62px; padding:2px; gap:5px; }
#stage.hoch .sp { padding:3px 8px 3px 5px; gap:6px; border-left-width:5px; min-height:58px; font-size:15px; }
#stage.hoch .sp-wf, #stage.hoch .sp-kredit, #stage.hoch .sp-fk { display:none; }
#stage.hoch .sp-nm b { font-size:15px; } #stage.hoch .sp-nm small { display:block; font-size:13.5px; }
#stage.hoch .sp-platz { width:26px; height:26px; font-size:14px; }
#stage.hoch .sp-pk { font-size:18px; min-width:0; }
#stage.hoch #brett { left:8px; right:8px; width:auto; top:140px; bottom:auto; height:var(--bh, 430px); }
#stage.hoch .br-titel { font-size:17px; }
#stage.hoch #br-info { font-size:13px; }
#stage.hoch #br-zurueck { min-height:44px; font-size:14px; }
#stage.hoch #hinweise { width:auto; right:12px; top:40px; height:150px; }
#stage.hoch #hinweise .meldung { font-size:15px; }
#stage.hoch #aktion { left:8px; right:8px; top:var(--at, 576px); height:284px; padding:6px 8px; gap:5px; }
#stage.hoch .ak-oben { height:76px; } #stage.hoch .ak-mitte { height:82px; } #stage.hoch .ak-knoepfe { height:58px; }
#stage.hoch .ak-t { font-size:14px; margin-bottom:2px; }
#stage.hoch .ak-wuerfel { width:140px; }
#stage.hoch .wu { width:58px; height:58px; } #stage.hoch .wu svg { width:46px; height:46px; }
#stage.hoch .wt { width:60px; height:66px; } #stage.hoch .wt small { font-size:14px; } #stage.hoch .wt b { font-size:19px; }
#stage.hoch .weiss small { font-size:13px; }
#stage.hoch .ab-pl, #stage.hoch .lg-pl { width:66px; height:60px; } #stage.hoch .ab-pl .pt.hex { width:62px; }
#stage.hoch .ab-n, #stage.hoch .bt-n { font-size:13px; min-width:20px; height:20px; line-height:20px; border-radius:10px; }
#stage.hoch .ak-knoepfe .kb { font-size:17px; min-height:58px; }
#stage.hoch .ak-hinweis { height:40px; font-size:14.5px; line-height:1.35; }
#stage.hoch #reiter { left:8px; right:8px; top:var(--rt, 866px); bottom:8px; }
#stage.hoch .re-tabs button { font-size:15px; min-height:58px; }
#stage.hoch .mk-depots { grid-template-columns:1fr 1fr; gap:5px; }
#stage.hoch .dp-kopf { height:28px; } #stage.hoch .dp-t { font-size:14px; } #stage.hoch .dp-k { font-size:14px; height:21px; line-height:21px; }
#stage.hoch .dp-waren { height:28px; } #stage.hoch .dp-waren small { font-size:13px; } #stage.hoch .dw b { font-size:13px; }
#stage.hoch .dp-plaetze { gap:3px; }
#stage.hoch .dp-pl, #stage.hoch .sw-pl { width:59px; height:58px; } #stage.hoch .dp-pl .pt.hex, #stage.hoch .sw-pl .pt.hex { width:55px; }
#stage.hoch .mk-box .ak-t small, #stage.hoch .leer-t { font-size:13px; }
#stage.hoch .bo { height:40px; } #stage.hoch .bo-w { min-width:24px; height:24px; font-size:14px; } #stage.hoch .bo-w.klein { min-width:21px; height:21px; font-size:13px; }
#stage.hoch #re-verlauf, #stage.hoch .wt-tab { font-size:14px; } #stage.hoch .wt-tab th { font-size:13.5px; } #stage.hoch .wt-labs, #stage.hoch .wt-regel { font-size:13.5px; } #stage.hoch .wl { font-size:13px; }
#stage.hoch #pchatwin { font-size:15px; } #stage.hoch #pchatin { font-size:16px; padding:9px 12px; }
#stage.hoch .pc-knoepfe button { font-size:15px; min-height:58px; }
#stage.hoch .banner { width:92%; min-width:0; top:30%; padding:12px 14px; } #stage.hoch .bn-titel { font-size:28px; } #stage.hoch .bn-unter { font-size:15px; }
#stage.hoch .en-platz { grid-template-columns:34px minmax(0, 1fr) 56px 70px; font-size:14px; } #stage.hoch .en-figs { grid-column:1 / -1; order:5; }
#stage.hoch .en-platz.kopf > :nth-child(3) { display:none; }
#stage.hoch .en-z small { font-size:13px; } #stage.hoch .en-z b { font-size:15px; }
#stage.hoch #ansicht-menu { right:8px; top:74px; width:auto; left:8px; }
#stage.hoch #ansicht-menu label { font-size:16px; } #stage.hoch #ansicht-menu label small { font-size:14px; } #stage.hoch #ansicht-menu .knopf { min-height:52px; font-size:15px; }
#stage.hoch .lo-seg .nur-quer { display:none; }
#stage.hoch .konfetti { animation-name:fallenH; }
@keyframes fallenH { to { transform:translateY(1360px) rotate(540deg); opacity:.2; } }
#stage.hoch #en-zurueck .kb, #stage.hoch .ov-knoepfe .kb { min-height:58px; }
#stage.hoch .ov-box { padding:14px 12px; } #stage.hoch .ov-titel { font-size:21px; }
#stage.hoch .en-regel { font-size:14px; }

@media (pointer: coarse) {
  .re-tabs button { min-height:40px; }
  .ak-knoepfe .kb { min-height:42px; }
  #br-zurueck { min-height:40px; }
}

/* ---- Verbesserungsrunde 2026-11-05 */
.fd.imgeb .fd-grund { stroke:var(--gold); stroke-width:.07; stroke-dasharray:.18 .1; }
.dp-pl.passt::after { content:''; position:absolute; left:2px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--gruen); box-shadow:0 0 0 2px var(--panel-solid); }
.ab-pl.wegwahl { border:2px dashed var(--rot); }
.kb.kw { flex:0 0 52px; padding:4px; } .kb.kw.an { outline:3px solid var(--ziel); background:color-mix(in srgb, var(--ziel) 22%, transparent); }
.wt-f { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--fa); margin-right:5px; vertical-align:0; }
.wt-tab td.bon { color:var(--gold); font-weight:800; }
.en-mini { width:54px; height:60px; float:left; margin:-4px 8px 0 0; }
#stage.hoch .kb.kw { flex-basis:58px; }
#hinweise .meldung.neutral b { color:var(--text); }
#hinweise { height:172px; }
#br-letzt { position:absolute; left:12px; right:12px; bottom:8px; height:22px; z-index:3; font-size:13px; line-height:22px; padding:0 10px; border-radius:11px; white-space:nowrap; overflow:hidden; color:var(--text-2); background:var(--panel-solid); border:1px solid var(--linie); pointer-events:none; }
#stage.hoch #br-letzt { font-size:13.5px; height:24px; line-height:24px; }
#stage.hoch #br-zurueck { display:none; }   /* Hochformat: der eigene Name in der Spielerleiste führt zurück (58 px hoch) */
#stage.hoch .wu { overflow:hidden; } #stage.hoch .wu svg { width:44px; height:44px; }

/* ---- Depot-Ring auf dem Brett (quer, Wunsch Denis 2026-11-05): links Depot 1–3, rechts 4–6, dazwischen der Campus hinter seiner Mauer */
#partie.ring #campus { left:150px; right:150px; width:calc(100% - 300px); }
#partie.ring #depots { position:absolute; left:10px; right:10px; top:38px; bottom:36px; z-index:2; display:grid; grid-template-columns:138px 1fr 138px; grid-template-rows:repeat(3, 1fr); gap:10px 0; pointer-events:none; }
#partie.ring #depots .dp { pointer-events:auto; align-self:center; padding:5px 6px 6px; background:var(--panel2); box-shadow:0 4px 12px rgba(0,0,0,.25); }
#partie.ring .dp[data-d="1"] { grid-column:1; grid-row:1; } #partie.ring .dp[data-d="2"] { grid-column:1; grid-row:2; } #partie.ring .dp[data-d="3"] { grid-column:1; grid-row:3; }
#partie.ring .dp[data-d="4"] { grid-column:3; grid-row:1; } #partie.ring .dp[data-d="5"] { grid-column:3; grid-row:2; } #partie.ring .dp[data-d="6"] { grid-column:3; grid-row:3; }
#partie.ring .dp-plaetze { display:grid; grid-template-columns:1fr 1fr; gap:4px; justify-items:center; }
#partie.ring .dp-pl { width:60px; height:54px; } #partie.ring .dp-pl .pt.hex { width:56px; }
#partie.ring .dp-waren { overflow:hidden; }
#partie.ring #hinweise { left:158px; width:440px; }
.mauer-grund { fill:rgba(120,150,140,.10); stroke:none; }
.mauer { fill:none; stroke:#8f9a9e; stroke-width:.32; stroke-linejoin:round; filter:drop-shadow(.04px .07px .05px rgba(0,0,0,.45)); }
.mauer-fuge { fill:none; stroke:#c9d1d3; stroke-width:.06; stroke-dasharray:.34 .16; stroke-linejoin:round; }
:root:not([data-theme="light"]) .mauer { stroke:#5d6b72; } :root:not([data-theme="light"]) .mauer-fuge { stroke:#8a979c; }
#stage.hoch .ak-wuerfel { width:auto; min-width:130px; flex:none; } #stage.hoch .wu { flex:none; } #stage.hoch .wu-reihe { gap:5px; } #stage.hoch .wu.x small { font-size:13px; }
#stage.hoch .en-z small { font-size:14px; } #stage.hoch .en-z b { font-size:16px; } #stage.hoch .en-platz .nmx small { font-size:14px; }

/* ---- Brett mit Gelände, Würfelaugen und Zählern in der Mauer (Wunsch Denis 2026-11-05) */
.fd-ton { opacity:.28; mix-blend-mode:multiply; pointer-events:none; }
:root:not([data-theme="light"]) .fd-ton { opacity:.38; }
:root:not([data-theme="light"]) .fd:not(.gebaut) .fd-grund { filter:none; }
.fd-land { pointer-events:none; }
:root:not([data-theme="light"]) .fd-land { filter:brightness(.82); }
.fd-sym { opacity:.85; filter:drop-shadow(0 .02px .02px rgba(255,255,255,.6)); }
.fd-wf-s { fill:rgba(0,0,0,.28); }
.fd-wf-k { fill:#fbfbf7; stroke:rgba(20,30,40,.45); stroke-width:.025; }
.fd-wf-a { fill:#1d2430; }
.fd.zahl .fd-wf-k { fill:#fff3c4; stroke:var(--zahl); stroke-width:.06; }
.mz-ring { fill:#8f9a9e; } :root:not([data-theme="light"]) .mz-ring { fill:#5d6b72; }
.mz-grund { fill:#f7f8f6; stroke:#c9d1d3; stroke-width:.04; } :root:not([data-theme="light"]) .mz-grund { fill:#1c2a3a; stroke:#8a979c; }
.mz-z { font:900 .44px var(--kopf); text-anchor:middle; fill:var(--text); }
.mz-t { font:800 .3px var(--sans); text-anchor:middle; fill:var(--text-2); letter-spacing:.01px; }
.fd-zahlring { fill:none; stroke:var(--zahl); stroke-width:.1; pointer-events:none; }

/* ---- Würfeln per Knopf, Ablage unter dem Brett, Zugübersicht, Farbrand an Plättchen (Wunsch Denis 2026-11-05) */
.ak-oben { height:72px; }
.ak-mitte { height:74px; }
.ak-hinweis { height:58px; -webkit-line-clamp:3; }
.ak-knoepfe { height:44px; }
.wu { width:54px; height:54px; } .wu svg { width:46px; height:46px; }
.wu-frage { font:900 22px/1 var(--kopf); color:var(--dim); }
.wu-los { width:100%; height:54px; font-size:19px; gap:8px; animation:wurfPuls 1.6s ease-in-out infinite; }
.wu-los .sgzi, .kb-wurf .sgzi, #br-wurf .sgzi { width:24px; height:24px; }
.ak-knoepfe .kb-wurf { font-size:18px; }
@keyframes wurfPuls { 50% { box-shadow:0 0 0 5px rgba(255,214,102,.35), 0 2px 0 #6a5006; } }
#br-wurf { position:absolute; left:50%; top:46%; transform:translate(-50%, -50%); z-index:6; min-width:210px; height:68px; font-size:24px; gap:10px; border-radius:14px; animation:wurfPuls 1.6s ease-in-out infinite; box-shadow:0 8px 26px rgba(0,0,0,.5), 0 2px 0 #6a5006; }
#br-wurf[hidden] { display:none; }
#br-wurf::before { content:''; display:block; width:28px; height:28px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.6'/%3E%3Ccircle cx='8.5' cy='15.5' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.6'/%3E%3Ccircle cx='8.5' cy='15.5' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat; }
.kb-zurueck { flex:0 0 auto !important; }
.ak-t small { display:block; font-size:12px; text-transform:none; letter-spacing:0; font-weight:600; color:var(--dim); }
.lg-zeile { display:flex; gap:10px; align-items:center; }
.lg-text { flex:1; min-width:0; font-size:13px; line-height:1.35; color:var(--text-2); }
.lg-text b { color:var(--text); }
#lager-box .ak-t, #ab-titel { cursor:help; }

/* Ablage quer: wie eine Kartenhand mittig unter dem Campus */
#partie.ring #ablage-box { position:absolute; left:162px; right:162px; bottom:36px; height:72px; z-index:3; display:flex; align-items:center; justify-content:center; gap:12px; padding:3px 12px; border-radius:12px; background:var(--panel2); border:1px solid var(--linie); box-shadow:0 4px 14px rgba(0,0,0,.3); }
#partie.ring #ab-titel { margin:0; flex:none; width:118px; white-space:normal; font-size:13px; line-height:1.2; text-align:right; }
#partie.ring .ak-ablage { gap:8px; }
#partie.ring .ab-pl { width:70px; height:62px; } #partie.ring .ab-pl .pt.hex { width:66px; }
#partie.ring #br-letzt { bottom:6px; }
#partie.ring #ak-mitte { height:74px; }

/* alle Plättchen-Sechsecke mit Rand in der Farbe ihres Feldes – man sieht, wohin sie gehören */
.pt.hex:not(.leer) { background:var(--pf, #888); }
.pt.hex:not(.leer) > img, .pt.hex:not(.leer) > .pt-ers { inset:2.4px; width:calc(100% - 4.8px); height:calc(100% - 4.8px); clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* Markt quer: größere Plättchen, Bonus deutlicher, Zugübersicht */
.sw-pl { width:58px; height:52px; } .sw-pl .pt.hex { width:54px; }
.mk-schwarz-l { gap:5px; }
.bo { height:40px; } .bo-w { min-width:24px; height:24px; font-size:14px; } .bo-w.klein { min-width:21px; height:21px; font-size:13px; }
.mk-zug-box .ak-t { margin-bottom:5px; }
.mk-zug { display:flex; flex-direction:column; gap:5px; }
.mz-l { display:flex; gap:9px; align-items:center; width:100%; margin:0; text-align:left; padding:6px 8px; border-radius:8px; border:1px solid var(--linie); background:rgba(0,0,0,.1); color:var(--text-2); font:inherit; font-size:13.5px; line-height:1.35; }
:root[data-theme="light"] .mz-l { background:rgba(255,255,255,.45); }
.mz-l b { color:var(--text); font-weight:700; } .mz-l small { display:block; color:var(--dim); font-size:12.5px; }
.mz-l svg, .mz-l .sgzi { flex:none; }
.mz-l .sgzi { width:20px; height:20px; }
.mz-w { cursor:pointer; } .mz-w:hover { border-color:var(--zahl); }
.mz-l.an { border-color:var(--zahl); background:color-mix(in srgb, var(--zahl) 14%, transparent); }
.mz-ablauf { margin:0; padding-left:22px; font-size:13.5px; line-height:1.5; color:var(--text-2); }
.mz-ablauf b { color:var(--text); }
#stage.hoch .lg-text { display:none; }
#stage.hoch .mz-l, #stage.hoch .mz-ablauf { font-size:14.5px; } #stage.hoch .mz-l small { font-size:13.5px; }
#stage.hoch .wu-los { height:58px; font-size:19px; }
#stage.hoch #br-wurf { min-width:200px; height:64px; font-size:22px; }
#stage.hoch .ak-hinweis { height:40px; -webkit-line-clamp:2; }

#stage.hoch #ab-titel small { display:none; }
#stage.hoch .mz-w { min-height:58px; }

/* ---- Phasen-Box: Bonusleiter A10 … E2 und Bauteile der Runden (Denis 2026-11-05) */
.mk-phasen { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ph-leiter { display:flex; gap:4px; cursor:help; }
.ph-st { display:flex; flex-direction:column; align-items:center; justify-content:center; width:30px; height:40px; border-radius:7px; border:1px solid var(--linie); background:rgba(0,0,0,.12); }
.ph-st b { font:900 12px/1 var(--kopf); color:var(--dim); }
.ph-st i { font:900 15px/1.1 var(--kopf); font-style:normal; color:var(--text); margin-top:2px; }
.ph-st.an { border:2px solid var(--gold); background:color-mix(in srgb, var(--gold) 22%, transparent); }
.ph-st.an b { color:var(--text); }
.ph-st.vorbei { opacity:.45; }
.ph-runden { display:flex; gap:4px; }
.ph-rd { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; width:38px; padding:2px 0 3px; border-radius:7px; border:1px solid var(--linie); background:rgba(0,0,0,.1); }
.ph-rd small { font:800 12px/1 var(--sans); color:var(--dim); }
.ph-rd.an { border:2px solid var(--zahl); background:color-mix(in srgb, var(--zahl) 16%, transparent); }
.ph-rd.vorbei .bt { opacity:.4; }
.ph-rd em { position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; background:var(--akz); color:#04241e; display:flex; align-items:center; justify-content:center; }
.ph-rd em .sgzi { width:11px; height:11px; }
.ph-leer { display:block; width:20px; height:20px; }
#stage.hoch .ph-st { width:34px; height:44px; } #stage.hoch .ph-st b { font-size:13px; } #stage.hoch .ph-rd small { font-size:13px; }

#stage.hoch .ph-st { width:40px; height:50px; } #stage.hoch .ph-st b { font-size:15px; } #stage.hoch .ph-st i { font-size:18px; } #stage.hoch .ph-rd { width:44px; } #stage.hoch .ph-rd small { font-size:15px; }

/* ---- Wunsch Denis 2026-11-05: Knöpfe neben dem Bauteillager (Erklärung per Hover), Markt größer, Bonus als schlanke Karos */
#partie.ring #aktion { height:226px; }
#partie.ring #reiter { top:364px; }
#partie.ring .lg-text { display:none; }
#partie.ring #ak-mitte { height:76px; gap:10px; }
#partie.ring #lager-box { flex:none; }
#partie.ring #ak-mitte .ak-knoepfe { flex:1; min-width:0; height:auto; display:flex; flex-wrap:wrap; align-content:center; gap:6px; }
#partie.ring #ak-mitte .ak-knoepfe .kb { flex:1 1 auto; height:34px; min-height:0; padding:4px 10px; font-size:14.5px; }
#partie.ring #ak-mitte .ak-knoepfe #ak-fertig, #partie.ring #ak-mitte .ak-knoepfe #ak-verzicht, #partie.ring #ak-mitte .ak-knoepfe .kb-wurf { flex-basis:100%; }
#partie.ring #ak-mitte .ak-knoepfe .kw { flex:0 0 auto; padding:4px 6px; }
#partie.ring .ak-hinweis { height:58px; }
.bo { height:34px; gap:6px; padding:0 6px; }
.bo-w { min-width:0; width:22px; height:30px; border-radius:0; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background:rgba(10,18,28,.55); color:#fff; font:900 13px/1 var(--sans); box-shadow:none; }
.bo-w.klein { width:19px; height:26px; font-size:12px; background:rgba(10,18,28,.4); }
.bo-w.weg { background:var(--sf); opacity:.95; }
#stage.hoch .bo { height:42px; } #stage.hoch .bo-w { width:26px; height:36px; font-size:15px; } #stage.hoch .bo-w.klein { width:23px; height:32px; font-size:14px; }
.mk-unten { gap:5px; margin-top:4px; }
.mk-box { padding:4px 7px 6px; }
#partie.ring #aktion { height:208px; }
#partie.ring #reiter { top:346px; }
#partie.ring .ak-hinweis { height:40px; -webkit-line-clamp:2; }
#partie.ring .mk-box .ak-t small { display:inline; margin-left:6px; }
#partie.ring .mz-l { padding:4px 8px; font-size:13px; }
#partie.ring .mz-l small { display:inline; font-size:12.5px; }
#partie.ring .mz-l svg { width:20px; height:20px; }
#partie.ring .mz-ablauf { font-size:13px; line-height:1.4; }
#partie.ring .sw-pl { width:52px; height:48px; } #partie.ring .sw-pl .pt.hex { width:50px; }
#partie.ring .mz-ablauf { display:grid; grid-template-columns:1fr 1fr; column-gap:18px; }
.mz-fuss { margin:3px 0 0; font-size:12.5px; color:var(--dim); }

.bo-w { background:#17212d; } .bo-w.klein { background:#2b3846; } .bo-w.weg { background:var(--sf); }
.bo { min-width:0; gap:3px; padding:0 3px; } .bo-w { width:20px; height:28px; } .bo-w.klein { width:17px; height:24px; } .mk-boni { gap:4px; }
#k-zeit .kz, .ph-st { cursor:help; }
/* Info-Fenster: Plättchen als Sechseck mit Farbrand wie im Spiel (Denis 2026-11-05) */
.kinfo .ki-bild:has(.ki-hex) { width:112px; height:98px; background:none; box-shadow:none; border-radius:0; overflow:visible; }
.kinfo .ki-hex { display:block; width:110px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); } .kinfo .ki-hex .pt.hex { width:110px; } .kinfo .ki-hex .pt-ab { font-size:14px; }