/* Layout: a full-bleed 3D world; glass HUD panels float over it (top bar, left resources, right project file, bottom ops). */
:root{
  --bg:#dfe7f3; --panel:rgba(255,255,255,.86); --panel-solid:#ffffff; --panel2:#eef3fa; --line:rgba(23,34,56,.10);
  --ink:#1a2327; --ink2:#4f5d66; --ink3:#8a979f;
  --brand:#b51f1f; /* Markenrot des Kunden: nur Marke (Logo, Titel, Pitch), nie als Alarmfarbe */
  --p1:#2c5be0; --p2:#7e3fd6; --p3:#1d9a86; --p4:#e8641b; --p5:#c9961a;
  --good:#1e9e5a; --warn:#e2a416; --crit:#d93a3a; --accent:#2c5be0;
  --shadow:0 12px 32px rgba(23,34,56,.12), 0 1px 2px rgba(23,34,56,.06);
  --font-display:"Open Sans",ui-sans-serif,system-ui,sans-serif; --font-body:"Open Sans",ui-sans-serif,system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0f1626; --brand:#e0504c; --panel:rgba(20,28,46,.86); --panel-solid:#161f33; --panel2:#1d2840; --line:rgba(255,255,255,.08); --ink:#eaf0fa; --ink2:#aab6cc; --ink3:#6f7d98; --shadow:0 12px 32px rgba(0,0,0,.4); color-scheme:dark }}
:root[data-theme="dark"]{ --bg:#0f1626; --brand:#e0504c; --panel:rgba(20,28,46,.86); --panel-solid:#161f33; --panel2:#1d2840; --line:rgba(255,255,255,.08); --ink:#eaf0fa; --ink2:#aab6cc; --ink3:#6f7d98; --shadow:0 12px 32px rgba(0,0,0,.4); color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:13px;line-height:1.45;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
#stage{position:fixed;inset:0;display:block;touch-action:none;cursor:grab}
#stage.grabbing{cursor:grabbing}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;transform:translate(-50%,0);background:rgba(255,255,255,.94);border:1px solid rgba(23,34,56,.1);border-left:4px solid var(--p1);border-radius:8px;padding:4px 8px 4px 8px;box-shadow:0 4px 14px rgba(23,34,56,.12);white-space:nowrap;font-size:11px;line-height:1.2;color:#172238;transition:opacity .2s}
.lbl b{display:block;font-weight:700}
.lbl span{font:10px var(--font-mono);color:#53627c}
.lbl.sel{box-shadow:0 0 0 2px var(--accent),0 6px 18px rgba(44,91,224,.25)}
.lbl .pill{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:5px;font:700 9px var(--font-body);color:#fff;background:var(--crit);vertical-align:middle}
.lbl .pill.cond{background:var(--warn)}
.lbl .pill.g{background:var(--accent)}

.ui{position:fixed;inset:0;pointer-events:none;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:56px 220px 1fr 330px;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.ui>*{pointer-events:auto}
.glass{background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.hud{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em}
.logo i{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--p1),var(--p3));display:inline-block;position:relative;flex:none}
.logo i::after{content:"";position:absolute;inset:8px;border:2px solid #fff;border-radius:3px;transform:rotate(45deg)}
.logo img.mark{width:28px;height:28px;flex:none}
.logo small{display:block;font:500 9px/1 var(--font-body);color:var(--ink3);letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.search{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 10px;color:var(--ink3)}
.search input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;outline:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-weight:600;white-space:nowrap}
.chip.off .dot{background:var(--crit);box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 25%,transparent)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
.chip select{border:0;background:none;color:var(--ink);font:inherit;font-weight:700;outline:none;max-width:200px}
.tabs{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px}
.tabs button{padding:5px 12px;border-radius:8px;font-weight:600;color:var(--ink2)}
.tabs button[aria-selected="true"]{background:var(--panel-solid);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.avatar{display:flex;align-items:center;gap:8px}
.avatar b{display:block;font-size:12px}.avatar span{font-size:11px;color:var(--ink3)}
.avatar i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f0b27a,#c67a4a);display:inline-block}

.rail{display:flex;flex-direction:column;gap:10px;align-self:start}
.card{padding:12px 14px;min-width:0}
.card h3{margin:0 0 8px;font:600 10px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.kpi .v{font:700 22px/1.1 var(--font-display);letter-spacing:-.01em}
.kpi .v small{font:600 12px var(--font-body);color:var(--ink3);margin-left:4px}
.kpi .d{font-size:11px;color:var(--ink2)}
.kpi .d.dn{color:var(--crit)}
.bar{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:6px;display:flex}
.bar span{height:100%;display:block}
.legend{display:grid;gap:5px;font-size:11px;color:var(--ink2)}
.legend div{display:flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}

.center{position:relative;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;min-width:0}
.center>*{pointer-events:auto}
.minis{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start;max-width:calc(100% - 50px)}
.mini{padding:8px 12px;min-width:118px}
.mini .l{font:600 10px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.mini .v{font:700 17px/1.2 var(--font-display);margin-top:3px}
.mini .v small{font:600 11px var(--font-body);color:var(--ink3);margin-left:3px}
.camctl{position:absolute;right:0;top:0;display:flex;flex-direction:column;gap:4px;padding:4px}
.camctl button{width:30px;height:30px;border-radius:8px;font-weight:700;color:var(--ink2)}
.camctl button:hover{background:var(--panel2)}
.hint{align-self:flex-start;margin-top:auto;font-size:11px;color:var(--ink2);padding:5px 10px;border-radius:9px}
.hint b{color:var(--ink)}

.file{display:flex;flex-direction:column;gap:10px;align-self:start;max-height:100%;overflow:auto}
.file .head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.file h2{margin:0;font:600 16px/1.2 var(--font-display);text-wrap:balance}
.file .sub{color:var(--ink2);font-size:11px;margin-top:2px}
.tag{display:inline-block;padding:2px 7px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;flex:none}
.tag.A{background:var(--p4)}.tag.B{background:var(--p1)}
.phase{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:11px;color:var(--ink2)}
.phase i{width:9px;height:9px;border-radius:2px;display:inline-block}
.kv{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:12px;margin:0}
.kv dt{color:var(--ink2);margin:0}.kv dd{margin:0;font-weight:600;text-align:right}
.kv dd.crit{color:var(--crit)}.kv dd.warn{color:var(--warn)}.kv dd.good{color:var(--good)}
.bridge{display:flex;height:14px;border-radius:5px;overflow:hidden;margin:6px 0 4px;background:var(--panel2)}
.bridge-l{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3);gap:6px;flex-wrap:wrap}
.bridge-l b{color:var(--ink2)}
.risks{display:flex;flex-direction:column;gap:6px}
.risk{display:grid;grid-template-columns:4px 1fr auto;gap:8px;align-items:start;padding:7px 9px;border-radius:9px;background:var(--panel2)}
.risk i{width:4px;height:100%;border-radius:2px;background:var(--warn);min-height:28px}
.risk.crit i{background:var(--crit)}.risk.good i{background:var(--good)}
.risk b{display:block;font-size:12px}.risk span{font-size:11px;color:var(--ink2)}
.risk .out{font-size:10px;font-weight:700;color:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;white-space:nowrap}
.btnrow{display:flex;gap:6px;flex-wrap:wrap}
.btn{padding:7px 11px;border-radius:9px;font-weight:700;font-size:12px;background:var(--panel2);border:1px solid var(--line);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.trades{display:flex;flex-direction:column;gap:6px}
.trade{display:grid;grid-template-columns:90px 1fr 46px;gap:8px;align-items:center;font-size:11px}
.trade .tb{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden}
.trade .tb span{display:block;height:100%;background:var(--p4)}
.trade.done .tb span{background:var(--good)}
.trade .pct{text-align:right;font-weight:600}

.bottom{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.bottom .card{max-height:34vh;overflow:auto}
.gates{display:flex;align-items:center;overflow-x:auto;padding:12px 14px 8px;grid-column:1/-1}
.gate{position:relative;flex:1 1 0;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.gate::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.gate:first-child::before{display:none}
.gate.done::before{background:var(--good)}
.gate .n{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--font-mono);background:var(--panel2);border:2px solid var(--line);color:var(--ink2)}
.gate.done .n{background:var(--good);border-color:var(--good);color:#fff}
.gate.cond .n{background:var(--warn);border-color:var(--warn);color:#fff}
.gate.open .n{background:var(--panel-solid);border-color:var(--accent);color:var(--accent);animation:pulse 1.8s infinite}
.gate.locked .n{border-style:dashed}
.gate b{font-size:11px}.gate span{font-size:10px;color:var(--ink3);line-height:1.25}
.gate.open b{color:var(--accent)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 6%,transparent)}}
@media (prefers-reduced-motion:reduce){.gate.open .n{animation:none}}
.quests{display:flex;flex-direction:column;gap:6px}
.quest{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--panel2);border:1px solid transparent}
.quest.over{border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.quest.done{opacity:.55}
.quest .g{font:700 11px var(--font-mono);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff}
.quest b{display:block;font-size:12px}.quest small{display:block;color:var(--ink2);font-size:11px}
.quest .due{font-size:10px;font-weight:700;text-align:right;white-space:nowrap}
.quest .due.over{color:var(--crit)}
.quest .acts{display:flex;gap:4px;grid-column:1/-1;flex-wrap:wrap}
.quest .acts button{font-size:10px;font-weight:700;padding:4px 7px;border-radius:6px;border:1px solid var(--line);color:var(--ink2)}
.quest .acts button:hover{background:var(--panel-solid)}
.quest .acts button.frei:hover{color:var(--good);border-color:var(--good)}
.quest .acts button.stop:hover{color:var(--crit);border-color:var(--crit)}
.quest .acts button:disabled,.dec button:disabled{opacity:.45;cursor:progress;transform:none;box-shadow:none}
.p2p{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.stn{position:relative;background:var(--panel2);border-radius:10px;padding:9px 8px;display:flex;flex-direction:column;gap:3px;min-width:0}
.stn .l{font:600 9px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.stn .v{font:700 20px/1.1 var(--font-display)}
.stn .s{font-size:10px;color:var(--ink2);line-height:1.25}.stn .s b{color:var(--crit)}
.stn::after{content:"›";position:absolute;right:-7px;top:50%;transform:translateY(-50%);color:var(--ink3);font-weight:700;z-index:1}
.stn:last-child::after{display:none}
.flow{height:6px;border-radius:99px;background:var(--panel2);margin-top:10px;position:relative;overflow:hidden}
.flow span{position:absolute;top:0;bottom:0;width:18%;border-radius:99px;background:linear-gradient(90deg,transparent,var(--p3),transparent);animation:flow 3s linear infinite}
@keyframes flow{from{left:-20%}to{left:100%}}
@media (prefers-reduced-motion:reduce){.flow span{animation:none;left:40%}}
.note{font-size:11px;color:var(--ink2);margin-top:8px}
.ai{display:flex;flex-direction:column;gap:8px}
.ai .doc{background:var(--panel2);border-radius:10px;padding:10px;display:grid;gap:4px;font-size:11px}
.ai .doc .row{display:flex;justify-content:space-between;gap:8px}.ai .doc .row b{font-weight:600;text-align:right}
.ai .doc .row.diff b{color:var(--warn)}
.conf{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink2)}.conf .bar{flex:1;margin:0}
.ai .meta{font-size:10px;color:var(--ink3);font-family:var(--font-mono)}
.ai .rule{font-size:11px;padding:7px 9px;border-radius:8px;border:1px dashed var(--line);color:var(--ink2)}
.cockpit{display:grid;gap:8px}
.ck{display:grid;grid-template-columns:140px 1fr 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--panel2)}
.ck .dom b{display:block;font-size:13px}.ck .dom span{font-size:10px;color:var(--ink3)}
.ck .m{font-size:11px;color:var(--ink2)}.ck .m b{display:block;color:var(--ink);font-size:14px;font-family:var(--font-mono)}
.ck .r{font-size:11px}
.ck .amp{width:14px;height:14px;border-radius:50%;background:var(--good)}
.ck.warn .amp{background:var(--warn)}.ck.crit .amp{background:var(--crit);box-shadow:0 0 0 4px color-mix(in srgb,var(--crit) 20%,transparent)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:12px;opacity:0;transition:.25s;pointer-events:none;max-width:90vw;z-index:9}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--crit);color:#fff}.toast.ok{background:var(--good);color:#fff}
.tour{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(560px,calc(100vw - 32px));padding:14px 16px 12px;z-index:8;border-left:5px solid var(--accent)}
.tour-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tour-step{font:700 11px var(--font-mono);color:var(--ink3)}
.tour-kicker{font:600 10px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);flex:1}
.tour-x{color:var(--ink3);font-size:14px;padding:2px 6px}
.tour h2{margin:0 0 6px;font:600 17px/1.25 var(--font-display);text-wrap:balance}
.tour p{margin:0;font-size:12.5px;color:var(--ink2);max-width:62ch}
.tour-win{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.tour-win span{font-size:11px;font-weight:700;color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);border-radius:7px;padding:4px 8px}
.tour-win span.k{color:var(--p4);background:color-mix(in srgb,var(--p4) 12%,transparent)}
.tour-nav{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.spot{outline:3px solid var(--accent)!important;outline-offset:2px;animation:spot 1.4s infinite}
@keyframes spot{50%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.spot{animation:none}}

/* dock */
.dock{display:flex;flex-direction:column;gap:4px;padding:6px;align-self:start}
.dock button{position:relative;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--ink2)}
.dock button svg{width:21px;height:21px}
.dock button:hover{background:var(--panel2);color:var(--ink)}
.dock button[aria-current="page"]{background:var(--accent);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.dock .sep{height:1px;background:var(--line);margin:4px 6px}
.dock .tip{position:absolute;left:52px;top:50%;transform:translateY(-50%);background:var(--ink);color:var(--bg);font-size:11px;font-weight:600;padding:4px 8px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
.dock button:hover .tip,.dock button:focus-visible .tip{opacity:1}
.dock .pitch{color:var(--brand)}
/* live feed */
.feed{display:flex;flex-direction:column;gap:5px;align-self:flex-start;max-width:min(440px,100%)}
.fe{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:11px;padding:6px 10px;border-radius:10px;background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:var(--shadow);animation:feIn .4s ease}
.fe i{font-style:normal;font:700 9px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--p3);padding:2px 6px;border-radius:5px}
.fe span{color:var(--ink2);min-width:0}
.fe time{font:10px var(--font-mono);color:var(--ink3)}
@keyframes feIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fe{animation:none}}
.lbl em.pres{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;font:700 8px var(--font-body);color:#fff;font-style:normal;margin-left:4px;vertical-align:middle;border:2px solid #fff;box-shadow:0 0 0 1px rgba(23,34,56,.15)}
/* screens */
.scrim{position:fixed;inset:78px 0 0 80px;background:rgba(15,22,38,.30);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:6}
.modal,.sheet{position:fixed;z-index:7;display:flex;flex-direction:column;overflow:hidden;background:var(--panel-solid);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(15,22,38,.35)}
.modal{left:50%;top:84px;transform:translateX(-50%);width:min(1120px,calc(100vw - 32px));max-height:calc(100vh - 100px)}
.modal.narrow{width:min(900px,calc(100vw - 32px))}
.sheet{right:16px;top:84px;bottom:16px;width:min(580px,calc(100vw - 32px))}
body.touring .modal{max-height:calc(100vh - 340px)}
body.touring .sheet{bottom:260px}
.scr-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex:none}
.scr-head .k{display:block;font:600 10px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.scr-head h2{margin:0;font:600 18px/1.2 var(--font-display)}
.scr-head .x{margin-left:auto}
.scr-body{padding:16px 18px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:14px}
.scr-body h3{margin:0 0 8px;font:600 10px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.box{background:var(--panel2);border-radius:12px;padding:12px}
/* market */
.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fst{background:var(--panel2);border-radius:10px;padding:9px 10px;position:relative;overflow:hidden}
.fst b{display:block;font:700 20px var(--font-display)}
.fst span{font-size:10px;color:var(--ink2)}
.fst i{position:absolute;left:0;bottom:0;height:4px;background:var(--p1)}
.leads{display:flex;flex-direction:column;gap:8px}
.lead{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--panel2);border:1px solid transparent}
.lead.claimed{opacity:.55}
.lead.out{border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.score{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--font-display);background:conic-gradient(var(--good) calc(var(--v)*1%),var(--line) 0);position:relative}
.score::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel2)}
.score span{position:relative;z-index:1}
.lead.out .score{background:conic-gradient(var(--crit) calc(var(--v)*1%),var(--line) 0)}
.lead b{display:block;font-size:13px}
.lead .meta{font-size:11px;color:var(--ink2)}
.fit{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.fit span{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.fit span.no{background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit)}
.fit span.w{background:color-mix(in srgb,var(--warn) 18%,transparent);color:color-mix(in srgb,var(--warn) 80%,var(--ink))}
/* scenario */
.sc-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px}
.branches{display:flex;flex-direction:column;gap:6px}
.branch{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:var(--panel2);border:1px solid transparent;text-align:left;font-size:12px}
.branch i{width:10px;height:10px;border-radius:50%;flex:none}
.branch small{display:block;color:var(--ink3);font-size:10px}
.branch[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel2))}
.sl{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ink2)}
.sl span{display:flex;justify-content:space-between;gap:8px}
.sl b{color:var(--ink);font-family:var(--font-mono)}
.sl input{width:100%;accent-color:var(--accent)}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--ink3);font:10px var(--font-mono)}
.chart .grid{stroke:var(--line)}
.chart .zero{stroke:var(--ink3);stroke-dasharray:4 4}
.chart .lb{fill:none;stroke:var(--ink3);stroke-width:2;stroke-dasharray:5 4}
.chart .lbr{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round}
.chart .neg{fill:var(--crit);opacity:.16}
.chart .dot{fill:var(--accent);stroke:var(--panel-solid);stroke-width:2}
.chart .dl{fill:var(--ink);font-weight:600}
.chart-leg{display:flex;gap:14px;font-size:11px;color:var(--ink2);flex-wrap:wrap}
.chart-leg i{display:inline-block;width:18px;height:0;border-top:2.6px solid var(--accent);vertical-align:middle;margin-right:5px}
.chart-leg i.b{border-top:2px dashed var(--ink3)}
.kt{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kt div{background:var(--panel2);border-radius:10px;padding:9px 10px}
.kt .l{font:600 9px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.kt b{display:block;font:700 18px var(--font-display);margin-top:2px}
.kt span{font-size:10px;color:var(--ink2)}
.kt .crit b{color:var(--crit)} .kt .good b{color:var(--good)}
/* gate */
.gate-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.ev{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.ev:last-child{border-bottom:0}
.ev .ok{color:var(--good);font-weight:700}
.ev small{color:var(--ink3);font-size:10px;font-family:var(--font-mono)}
.wirk{display:flex;gap:6px;flex-wrap:wrap}
.wirk span{font-size:11px;font-weight:600;padding:4px 8px;border-radius:7px;background:var(--panel-solid);border:1px solid var(--line)}
.dec{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dec button{padding:12px;border-radius:12px;font-weight:700;font-size:13px;border:2px solid var(--line);background:var(--panel-solid);text-align:left}
.dec button small{display:block;font-weight:500;font-size:10px;color:var(--ink3);margin-top:2px}
.dec .d1{border-color:color-mix(in srgb,var(--good) 55%,transparent);color:var(--good)}
.dec .d2{border-color:color-mix(in srgb,var(--warn) 60%,transparent);color:color-mix(in srgb,var(--warn) 80%,var(--ink))}
.dec .d4{border-color:color-mix(in srgb,var(--crit) 50%,transparent);color:var(--crit)}
.dec button:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.auth{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:12px;background:var(--panel2)}
.auth.ok{background:color-mix(in srgb,var(--good) 12%,transparent)}
.auth.no{background:color-mix(in srgb,var(--crit) 12%,transparent)}
.auth b{display:block}
.sigs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sig{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;border:1.5px dashed var(--line);font-size:11px;color:var(--ink3);min-height:56px}
.sig.on{border-style:solid;border-color:var(--good);color:var(--ink);background:color-mix(in srgb,var(--good) 8%,transparent)}
.sig.wait{border-color:var(--accent);color:var(--ink)}
.sig i{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 10px var(--font-body);color:#fff;background:var(--ink3);font-style:normal}
.sig.on i{background:var(--good)} .sig.wait i{background:var(--accent);animation:pulse 1.4s infinite}
.sig b{display:block;font-size:12px}
.deny{padding:10px 12px;border-radius:10px;background:var(--crit);color:#fff;font-size:12px;font-weight:600;animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.deny{animation:none}}
/* npc */
.npc-grid{display:grid;grid-template-columns:200px minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.queue{display:flex;flex-direction:column;gap:5px}
.qd{padding:8px 10px;border-radius:9px;background:var(--panel2);font-size:11px;border:1px solid transparent}
.qd b{display:block;font-size:12px}
.qd span{color:var(--ink3)}
.qd.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel2))}
.qd.done{opacity:.5}
.paper{background:#ffffff;color:#1f2737;border-radius:6px;box-shadow:0 10px 30px rgba(15,22,38,.18),0 0 0 1px rgba(15,22,38,.06);padding:22px 24px;font-size:10.5px;line-height:1.5;font-family:var(--font-body)}
.paper .lh{display:flex;justify-content:space-between;border-bottom:2px solid #1f2737;padding-bottom:8px;margin-bottom:12px}
.paper .lh b{font-size:14px;letter-spacing:.02em}
.paper table{width:100%;border-collapse:collapse;margin:10px 0}
.paper td,.paper th{padding:4px 2px;border-bottom:1px solid #e3e7ef;text-align:left;font-size:10px}
.paper th{color:#6b7488;font-weight:600}
.paper td.r,.paper th.r{text-align:right}
.hl{outline:2px solid #1d9a86;outline-offset:1px;border-radius:2px;position:relative;background:rgba(29,154,134,.08)}
.hl.w{outline-color:#e2a416;background:rgba(226,164,22,.12)}
.hl[data-n]::before{content:attr(data-n);position:absolute;top:-9px;left:-11px;width:15px;height:15px;border-radius:50%;background:#1d9a86;color:#fff;font:700 8px/15px var(--font-mono);text-align:center}
.hl.w[data-n]::before{background:#e2a416}
.fld{display:grid;grid-template-columns:18px 104px minmax(0,1fr) 54px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.fld .n{width:16px;height:16px;border-radius:50%;background:var(--p3);color:#fff;font:700 8px/16px var(--font-mono);text-align:center}
.fld.w .n{background:var(--warn)}
.fld .lab{color:var(--ink2);font-size:11px}
.fld .val{font-weight:600;min-width:0}
.fld .val input{width:100%;font:inherit;padding:3px 6px;border:1px solid var(--accent);border-radius:6px;background:var(--panel-solid);color:var(--ink)}
.fld .cf{font:600 10px var(--font-mono);text-align:right;color:var(--good)}
.fld.w .cf{color:var(--warn)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.metrics div{background:var(--panel2);border-radius:9px;padding:8px}
.metrics .l{font:600 8.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.metrics b{display:block;font:700 15px var(--font-display);margin-top:2px}
.metrics span{font-size:9.5px;color:var(--good)}
/* tablet */
.tab-frame{width:min(820px,100%);margin:0 auto;background:#121826;border-radius:34px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.tab-screen{background:var(--bg);border-radius:20px;overflow:hidden}
.tab-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel-solid);border-bottom:1px solid var(--line);font-size:12px;flex-wrap:wrap}
.tab-bar b{font-family:var(--font-display)}
.tab-bar span{color:var(--ink2)}
.tab-sync{margin-left:auto;color:var(--good)!important;font-weight:600}
.tab-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;padding:16px}
.tab-form{display:flex;flex-direction:column;gap:10px}
.tab-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--ink2)}
.tab-form input,.tab-form select,.tab-form textarea{font:inherit;font-size:14px;font-weight:500;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink)}
.tab-form input[type=range]{padding:0;accent-color:var(--accent)}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.tab-side{display:flex;flex-direction:column;gap:10px}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ph{aspect-ratio:1;border-radius:10px;background:linear-gradient(160deg,#9db7d8 0%,#c9d6e8 45%,#b8a183 46%,#8f7a5e 100%);position:relative;overflow:hidden;max-width:100%}
.ph::before{content:"";position:absolute;left:22%;right:22%;bottom:28%;top:30%;background:repeating-linear-gradient(0deg,#e9edf3 0 10px,#c3ccd9 10px 12px);box-shadow:inset 0 0 0 2px #aab4c4}
.ph span{position:absolute;left:5px;bottom:4px;font:600 9px var(--font-mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ph.add{background:var(--panel-solid);border:2px dashed var(--line);display:grid;place-items:center;color:var(--ink3);font-size:22px}
.ph.add::before{display:none}
.tab-check{font-size:11px;color:var(--ink2);display:grid;gap:4px;padding:10px;border-radius:10px;background:var(--panel-solid)}
.tab-check b{color:var(--good)}
.btn.big{padding:14px;font-size:14px;border-radius:12px}
/* cockpit */
.ck-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ck-kpis div{background:var(--panel2);border-radius:12px;padding:12px}
.ck-kpis .l{font:600 9.5px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.ck-kpis b{display:block;font:700 24px var(--font-display);margin:2px 0}
.ck-kpis span{font-size:11px;color:var(--ink2)}
.ck-kpis .crit span{color:var(--crit)} .ck-kpis .warn span{color:color-mix(in srgb,var(--warn) 80%,var(--ink))}
.mx-wrap{overflow-x:auto}
.mx{width:100%;border-collapse:collapse;font-size:12px;min-width:720px}
.mx th{font:600 9.5px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.mx td{padding:8px;border-bottom:1px solid var(--line)}
.mx td.r{text-align:right;font-family:var(--font-mono)}
.mx tr{cursor:pointer}
.mx tr:hover td{background:var(--panel2)}
.mx .ph-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.mx .bad{color:var(--crit)} .mx .goodc{color:var(--good)}
/* replay */
.replay{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
body.replaying .bottom{visibility:hidden}
.rp-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rp-date b{display:block;font:700 18px var(--font-display)}
.rp-date span{font-size:11px;color:var(--ink2)}
.rp-tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--p2);background:color-mix(in srgb,var(--p2) 12%,transparent);padding:4px 8px;border-radius:6px}
.rp-track{position:relative;padding-top:14px}
.rp-track input{width:100%;accent-color:var(--p2)}
.rp-ticks{position:absolute;left:8px;right:8px;top:0;height:12px}
.rp-ticks i{position:absolute;top:0;width:8px;height:8px;border-radius:50%;background:var(--p2);transform:translateX(-50%);opacity:.5}
.rp-ticks i.on{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--p2) 25%,transparent)}
.rp-events{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rpe{background:var(--panel2);border-radius:10px;padding:8px 10px;font-size:11px;min-width:0}
.rpe time{display:block;font:600 10px var(--font-mono);color:var(--p2)}
.rpe b{display:block;font-size:11.5px}
.rpe span{color:var(--ink3);font-size:10px}
.rpe.now{outline:2px solid var(--p2)}
/* title */
.title{position:fixed;inset:0;z-index:10;display:flex;align-items:center;padding:24px 6vw;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 42%,color-mix(in srgb,var(--bg) 0%,transparent) 72%)}
.title-in{max-width:560px;display:flex;flex-direction:column;gap:18px}
.title .eyebrow{font:600 11px var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.title h1{font:700 clamp(44px,6.4vw,84px)/.92 var(--font-display);letter-spacing:-.035em;margin:0}
.title h1 span{color:var(--brand)}
.title .kunde-logo img{display:block;height:72px;width:auto;margin-bottom:6px}
.title p{margin:0;font-size:16px;color:var(--ink2);max-width:44ch;line-height:1.5}
.worldcard{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:12px 14px;font-size:12px}
.worldcard dt{color:var(--ink3);margin:0}.worldcard dd{margin:0;font-weight:600}.worldcard dd.bad{color:var(--crit)}
.worldcard .ok{color:var(--good)}
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rolec{text-align:left;padding:12px 14px;border-radius:12px;background:var(--panel);backdrop-filter:blur(10px);border:1.5px solid var(--line);display:flex;gap:10px;align-items:center;transition:transform .15s,border-color .15s}
.rolec:hover{border-color:var(--accent);transform:translateY(-2px)}
.rolec i{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 11px var(--font-body);color:#fff;font-style:normal}
.rolec b{display:block;font-size:13px}.rolec span{font-size:11px;color:var(--ink3)}
.title-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.title-act small{color:var(--ink3);font-size:11px}
body.at-title .ui,body.at-title #labels,body.at-title .demo{opacity:0;pointer-events:none}
.tour.top{top:84px;bottom:auto}
.demo a{color:inherit;pointer-events:auto}
.lbl.yard{border-left-color:#5b6678;cursor:pointer}
.yk{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.yk div{background:var(--panel2);border-radius:9px;padding:8px}
.yk .l{font:600 9px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.yk b{display:block;font:700 15px var(--font-display)}
.ls{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.ls b{display:block;font-size:12px}.ls span{color:var(--ink3);font-size:10.5px}
.ls .st{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--panel2)}
.ls .st.go{color:var(--p4);background:color-mix(in srgb,var(--p4) 12%,transparent)}
.ls .st.ok{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.demo{position:fixed;right:16px;bottom:calc(2px + env(safe-area-inset-bottom,0px));font-size:10px;color:var(--ink3);pointer-events:none}
@media (max-width:1100px){.ui{grid-template-columns:1fr 300px}.dock{grid-column:1/-1;flex-direction:row!important;flex-wrap:wrap}.dock .tip{display:none}.rail{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.rail .card{flex:1 1 150px}.bottom{grid-template-columns:1fr 1fr}.ai{grid-column:1/-1}}
@media (max-width:760px){body{overflow:auto}.ui{position:static;display:flex;flex-direction:column;min-height:100%}#stage{height:62vh;position:sticky;top:0}.center{display:none}.file{max-height:none}.bottom{grid-template-columns:1fr}.bottom .card{max-height:none}.ck{grid-template-columns:1fr 1fr;row-gap:6px}}

/* ---- Controlling ---- */
.ctrl-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ctrl-top select{font:600 12px var(--font-body);background:transparent;border:0;color:var(--ink)}
.ctrl-src{font-size:11px;color:var(--ink3)}
.ctrl-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;align-items:start}
.ctrl-grid .box{min-width:0;overflow-x:auto}
.bridge.big{height:14px;margin:4px 0 6px}
.mx.ct{min-width:0;font-size:11.5px;margin-top:10px}.mx.ct tr{cursor:default}.mx.ct td{padding:6px 8px}
.mx th.r{text-align:right}
.mb-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink2);padding:4px 0 8px;border-bottom:1px solid var(--line)}
.mb-head.end{border-bottom:0;border-top:2px solid var(--ink);padding-top:8px;margin-bottom:8px}
.mb-head b{font:700 16px var(--font-display);color:var(--ink)}
.mb-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.mb-row span{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px}
.mb-row .bad,.mb-head .bad,.ad .bad{color:var(--crit)} .mb-row .goodc{color:var(--good)}
/* ---- Schnittstellen ---- */
.ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ad{background:var(--panel2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ad-h{display:flex;justify-content:space-between;align-items:center}.ad-h b{font:700 14px var(--font-display)}
.ad-dir{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.ad-f{font-size:11px;color:var(--ink2)}
.ad dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:11px}.ad dt{color:var(--ink3)}.ad dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ad-st{font-size:11px;font-weight:700;padding:5px 7px;border-radius:7px;background:var(--panel2)}.ad-st.fertig{color:var(--good)}.ad-st.fehler{color:var(--crit)}
.ad-err{display:flex;flex-direction:column;gap:4px}.ad-err span{font-size:10.5px;padding:5px 7px;border-radius:7px;background:color-mix(in srgb,var(--crit) 10%,transparent);color:var(--ink)}
.ad .btnrow{margin-top:auto}
.chain{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--good) 12%,transparent);font-size:11px;margin-bottom:8px}
.chain b{color:var(--good)}.chain.bad{background:color-mix(in srgb,var(--crit) 12%,transparent)}.chain.bad b{color:var(--crit)}
.evlog{display:flex;flex-direction:column;font-size:11px;max-height:300px;overflow:auto}
.evlog div{display:grid;grid-template-columns:78px 74px 1fr auto;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);align-items:baseline}
.evlog time{font-family:var(--font-mono);color:var(--ink3)}.evlog i{font-style:normal;font-weight:700;color:var(--accent)}.evlog code{font-size:9.5px;color:var(--ink3)}
@media (max-width:900px){.ctrl-grid{grid-template-columns:1fr}.ad-grid{grid-template-columns:1fr}.evlog div{grid-template-columns:70px 1fr}.evlog i,.evlog code{display:none}}
.title-act .btn.primary{background:var(--brand);border-color:var(--brand)}

/* ---- Vier Situationen: Titelkarten, Begleiter, Kasse, Monatsbericht, Abschluss ---- */
.szcards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.szcard{text-align:left;padding:12px 14px;border-radius:12px;background:var(--panel);backdrop-filter:blur(10px);border:1.5px solid var(--line);display:flex;gap:11px;align-items:flex-start;transition:transform .15s,border-color .15s}
.szcard:hover{border-color:var(--brand);transform:translateY(-2px)}
.szcard i{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 12px var(--font-mono);font-style:normal;color:#fff;background:var(--brand)}
.szcard.done i{background:var(--good)}
.szcard b{display:block;font-size:13px;line-height:1.3;text-wrap:balance}.szcard span{display:block;font-size:11px;color:var(--ink3);margin-top:3px}
body.has-sz .title-in{max-width:640px;gap:14px}
body.has-sz .title{overflow:auto;align-items:flex-start;padding-top:max(24px,5vh)}
body.has-sz .roles{grid-template-columns:repeat(4,1fr)}
body.has-sz .rolec{padding:8px 10px;gap:8px}body.has-sz .rolec i{width:26px;height:26px;font-size:10px}body.has-sz .rolec span{display:none}body.has-sz .rolec b{font-size:11.5px}
body.has-sz .worldcard{display:none}
.coach{border-left-color:var(--brand);width:min(620px,calc(100vw - 32px))}
.coach.ok{border-left-color:var(--good)}
.coach.ergebnis{border-left-color:var(--good)}.coach.ergebnis h2{font-size:24px;color:var(--good)}
.co-zug{margin-top:10px;padding:9px 11px;border-radius:10px;font-size:12.5px;font-weight:600;background:color-mix(in srgb,var(--brand) 9%,transparent);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.co-zug b{font:700 10px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-right:8px}
.coach.ok .co-zug{background:color-mix(in srgb,var(--good) 12%,transparent);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.coach.ok .co-zug b{color:var(--good)}.coach.ok .co-zug b::before{content:'✓ '}
.ka-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px}
#kaTab tr[data-g]{cursor:pointer}#kaTab tr[data-g]:hover td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
#kaTab tr.sel td{background:color-mix(in srgb,var(--accent) 13%,transparent);font-weight:700}
#kaTab .alt{color:var(--ink3);text-decoration:line-through;font-weight:400}
.ka-hebel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hebel{background:var(--panel2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;border:1.5px solid transparent}
.hebel:has(input:checked){border-color:var(--accent)}
.hebel.done{opacity:.6}
.hebel label{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}.hebel label input{width:17px;height:17px;accent-color:var(--accent)}
.hebel p{margin:0;font-size:11.5px;color:var(--ink2);flex:1}
.h-in{display:flex;gap:8px;align-items:center}.h-in input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}.h-in b{font-size:12px;white-space:nowrap}
.h-in select{font:inherit;font-size:11.5px;padding:4px 6px;border-radius:7px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink)}
.h-foot{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}.h-foot span{font-size:10.5px;color:var(--ink3)}
.wirkt th span{display:block;font-weight:500;font-size:10px;color:var(--ink3);text-transform:none;letter-spacing:0}
.wirkt th b{text-transform:none;letter-spacing:0;font-size:12px;color:var(--ink)}
.wirkt td:first-child{color:var(--ink2)}.wirkt td{font-size:12.5px}
#gWirk{margin-top:14px}
.sheet-a4{background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.sheet-a4>header{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;border-bottom:2px solid var(--ink);padding-bottom:10px;flex-wrap:wrap}
.sheet-a4>header .k{display:block;font:600 10px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:3px}
.sheet-a4>header h2{margin:0;font:600 19px/1.2 var(--font-display)}
.sheet-a4>header dl{margin:0;display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:11px}.sheet-a4>header dt{color:var(--ink3)}.sheet-a4>header dd{margin:0;font-weight:600}
.sheet-a4>footer{font-size:10px;color:var(--ink3);border-top:1px solid var(--line);padding-top:8px}
.be-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.be-li{display:flex;flex-direction:column;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}.be-li span{font-size:11.5px;color:var(--ink2)}
.be-li .bad,.sheet-a4 .bad{color:var(--crit)}
.amp-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.urs{text-align:left;font-size:12px;padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.urs:hover{border-color:var(--accent)}.urs b{white-space:nowrap}
.be-ev{margin-top:10px;padding:12px;border-radius:12px;background:var(--panel2)}
.annahme{font:700 9px var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--warn) 22%,transparent);color:color-mix(in srgb,var(--warn) 70%,var(--ink));margin-right:4px}
.ab-lead{font-size:13.5px;line-height:1.55}
.ab-v{font-size:19px!important;line-height:1.2}
.ab-stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ab-stufen>div{border:1.5px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:5px}
.ab-stufen>div.on{border-color:var(--brand)}
.ab-stufen b{font-size:13px}.ab-stufen span{font-size:12px;font-weight:600}.ab-stufen p{margin:0;font-size:11.5px;color:var(--ink2);flex:1}.ab-stufen em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--brand)}
.ab-act .btn.primary{background:var(--brand);border-color:var(--brand)}
@media (max-width:900px){.ka-grid,.ka-hebel,.be-two,.ab-stufen,.szcards{grid-template-columns:1fr}body.has-sz .roles{grid-template-columns:1fr 1fr}.ck-kpis{grid-template-columns:1fr 1fr}.gate-grid{grid-template-columns:1fr}.modal{top:8px;max-height:calc(100vh - 16px)}body.touring .modal{max-height:calc(100vh - 250px)}}
@media print{
  @page{size:A4;margin:12mm}
  :root{--bg:#fff;--panel-solid:#fff;--panel2:#f3f5f7;--line:#d5dade;--ink:#1a2327;--ink2:#3c4a52;--ink3:#6b7880;color-scheme:light}
  html,body{background:#fff!important;height:auto!important;overflow:visible!important}
  body[data-print]>*{display:none!important}
  body[data-print="scrBericht"]>#scrBericht,body[data-print="scrAbschluss"]>#scrAbschluss{display:block!important;position:static;transform:none;width:auto;max-height:none;border:0;box-shadow:none;overflow:visible}
  body[data-print] .scr-head,body[data-print] .noprint,body[data-print] .ab-lead,body[data-print="scrAbschluss"] #abBody>.ck-kpis{display:none!important}
  body[data-print] .scr-body{overflow:visible;padding:0;display:block}
  .sheet-a4{border:0;padding:0;font-size:10.5pt}.sheet-a4 section,.sheet-a4 tr{break-inside:avoid}
  .urs{border:0;background:none;padding:0}
}
.ka-grid .mx,.be-two .mx,.sheet-a4 .mx,.wirkt{min-width:0}
/* Begleiter der Situationen: links neben der Arbeit, nicht darüber. Auf schmalen Schirmen unten. */
@media (min-width:1101px){
  body.coaching .coach{left:88px;top:84px;bottom:auto;transform:none;width:340px;max-height:calc(100vh - 110px);overflow:auto}
  body.coaching .modal{left:444px;transform:none;width:min(1120px,calc(100vw - 460px))}
  body.coaching .toast{left:calc(444px + (100vw - 460px)/2)}
}
@media (max-width:1100px){body.coaching .modal{max-height:calc(100vh - 290px)}}
.sheet-a4 .urs{display:block;width:100%;margin-bottom:4px}.sheet-a4 .urs:last-child{margin-bottom:0}
body.coaching .coach .tour-head{flex-wrap:wrap}body.coaching .coach .tour-kicker{flex-basis:100%;order:3}body.coaching .coach .tour-step{flex:1}
.ab-act{position:sticky;bottom:-16px;background:var(--panel-solid);padding:12px 0 14px;border-top:1px solid var(--line);z-index:1}
.queue .qd{cursor:pointer}
/* Schmale Schirme (Tablet, Telefon): Begleiter kompakt unten, Text auf zwei Zeilen (Tippen klappt auf), Arbeitsfläche endet darüber. */
@media (max-width:1100px){
  body.coaching .coach{padding:10px 12px 10px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  body.coaching .coach h2{font-size:14.5px;margin-bottom:4px}
  body.coaching .coach p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;font-size:12px}
  body.coaching .coach.auf p{display:block}
  body.coaching .coach .co-zug{margin-top:7px;padding:7px 9px;font-size:12px}
  body.coaching .coach .tour-nav{margin-top:7px}
  body.coaching .coach.ergebnis p{display:block}
  body.coaching .modal{top:8px;max-height:calc(100vh - 236px)}
  body.coaching .demo{display:none}
}
@media (max-width:760px){
  .title{padding:16px 16px 32px}.title h1{font-size:44px}.title p{font-size:14px}
  .scr-head{padding:10px 12px}.scr-head h2{font-size:15px}.scr-body{padding:12px}
  .ck-kpis b{font-size:19px}.sheet-a4{padding:14px 12px}.sheet-a4 .mx{min-width:640px}
  .dec{grid-template-columns:1fr}.ab-act .btn.big{flex:1 1 100%}
}
@media (max-width:900px){#gBody{display:flex;flex-direction:column}#gWirk{order:-1;margin:0 0 12px}.wirkt{min-width:560px}}
/* Telefon: die Welt bleibt als Vollbild hinter der Oberfläche; oben ist sie frei sichtbar und bedienbar, die Karten scrollen darüber. */
@media (max-width:760px){
  #stage{position:fixed;inset:0;height:auto}
  #labels{inset:0 0 46vh 0}
  .ui{padding-top:54vh;pointer-events:none}.ui>*{pointer-events:auto}
}
/* Verwaltung */
.vw select{font:inherit;font-size:12px;padding:4px 6px;border-radius:7px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink)}
.vw-neu{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.vw-neu h3{flex-basis:100%;margin:0}
.vw-neu label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600}
.vw-neu input:not([type=checkbox]),.vw-neu select{font:inherit;font-size:13px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);min-width:180px}
.vw-neu .vw-cb{flex-direction:row;align-items:center;padding-bottom:8px}
#vwBtn,#abmelden{flex:none}
/* Einrichtung */
.ein-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ein-form{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}.ein-form h3{flex-basis:100%;margin:0}
.ein-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;flex:1 1 200px;min-width:0}
.ein-form input:not([type=checkbox]),.ein-form select{font:inherit;font-size:13px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);width:100%}
.ein-form .vw-cb{flex-direction:row;align-items:center;flex:0 0 auto;padding-bottom:8px}
.ein-akt{display:flex;gap:10px;align-items:center;flex-basis:100%;flex-wrap:wrap}
.ein-plan{display:flex;flex-direction:column;gap:6px;flex-basis:100%}
.ein-zeile{display:grid;grid-template-columns:160px 1fr 180px;gap:8px}
.ein-zeile input,.ein-zeile select{font:inherit;font-size:13px;padding:7px 9px;border-radius:9px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink)}
.ein-leer{font-size:13px}
#einBtn{flex:none}
@media (max-width:760px){.ein-zeile{grid-template-columns:1fr 1fr}.ein-zeile select{grid-column:1/-1}}

/* Meine Arbeit */
.ar-kpi{display:flex;gap:10px;flex-wrap:wrap;font-size:12px}.ar-kpi span{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px 10px}.ar-kpi b{font-family:var(--font-mono);font-size:15px;margin-right:4px}.ar-kpi .bad b{color:var(--crit)}
.ar-n{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--crit);color:#fff;font-size:10.5px;line-height:18px;text-align:center}
.ein-form .ar-lang{flex-basis:100%}.ein-form textarea{font:inherit;font-size:13px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);width:100%;resize:vertical}
.ar-ang{grid-template-columns:1fr 160px 1fr}
@media (max-width:760px){.ar-ang{grid-template-columns:1fr 1fr}.ar-ang [name=bem]{grid-column:1/-1}}
.ar-bed{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600}.ar-bed textarea{font:inherit;font-size:13px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);resize:vertical}
.tab-beh{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;margin-top:6px}.tab-beh input{font:inherit;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink)}
.be-kette{margin-bottom:6px;font-size:10.5px;overflow-wrap:anywhere}.be-kette code{font-size:10px}
.csv-btn{float:right;font-size:10.5px;padding:3px 9px;margin:-2px 0 4px 8px}
/* Hilfe und Tabellen-Start */
.hi-ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.6}
.hi-dl{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:6px 14px;margin:0;font-size:13px}.hi-dl dt{font-weight:700}.hi-dl dd{margin:0}
@media (max-width:640px){.hi-dl{grid-template-columns:1fr}.hi-dl dd{margin-bottom:6px}}
.tb-tab tr[data-p]{cursor:pointer}.tb-tab tr[data-p]:hover td{background:var(--panel2)}
.tb-wahl{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:4px}
.ar-q{cursor:pointer}.ar-q:hover td{background:var(--panel2)}