/* Cockpit – Optik im Stil eines Militär-Shooter-HUD (MW2-inspiriert, eigene Gestaltung) */
:root{
  color-scheme:dark;
  /* TauRes: Blau #003c7c und Warmgrau #76726c (aus dem Logo) – auf dunklem HUD */
  --brand:#003c7c; --brand-hi:#0a55a8; --gray:#76726c;
  --bg:#05090f; --surface:#0b121c; --ink:#e8ecf2; --muted:#a39e97; --line:#1d2a3c;
  --accent:#c9c3ba; --accent-ink:#0b0f15; --accent-soft:rgba(201,195,186,.12);
  --navy:#5b9be6; --navy-soft:rgba(91,155,230,.13); --track:#101a28; --ok:#5fbf7f; --warn:#e5674d; --maybe:#e8c547;
  --hud:#5b9be6; --hud-dim:rgba(91,155,230,.38); --glass:rgba(9,15,24,.86);
  --display:"Teko","Oswald",ui-sans-serif,system-ui,sans-serif;
  --body:"Barlow",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);overflow-x:hidden;
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
  padding-block:calc(18px + env(safe-area-inset-top,0px)) calc(60px + env(safe-area-inset-bottom,0px))}
.wrap{max-width:1100px;margin:0 auto;display:grid;gap:18px}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
h2{font-size:20px;font-weight:600}
h3{font-size:16px;font-weight:600}
p{margin:0}
.eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}
a{color:var(--navy)}

/* Knöpfe & Felder */
.btn{appearance:none;border:1px solid var(--navy);background:var(--navy);color:var(--surface);font:600 14px/1 var(--body);
  padding:10px 14px;border-radius:10px;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn.ghost:hover{background:var(--navy-soft)}
.btn.gold{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{background:transparent;color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.btn.small{padding:7px 10px;font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,.lnk:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.lnk{all:unset;cursor:pointer;color:var(--navy);text-decoration:underline;font-size:13.5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],input[type=month],select,textarea{
  font:15px/1.3 var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0;max-width:100%}
textarea{width:100%;resize:vertical}
label.field{display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
label.field input,label.field select{width:100%}
.check{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--navy)}
.err{color:var(--warn);font-size:13.5px;min-height:1.2em}

/* Karten */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:14px;min-width:0}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.stat{background:var(--surface);padding:12px 14px;display:grid;gap:4px;align-content:start}
.stat b{font:600 22px/1.1 var(--display)}
.stat span{font-size:12.5px;color:var(--muted)}

/* Anmeldung */
.auth{min-height:calc(100dvh - 100px);display:grid;place-items:center}
.auth-card{width:100%;max-width:420px;gap:16px}
.auth-card h1{font:800 clamp(32px,8vw,42px)/1 var(--display);letter-spacing:-.02em}
.brandbar{margin:-20px -20px 4px;height:8px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,var(--navy) 0 60%,var(--accent) 60%)}
.pinrow{display:flex;gap:8px}
.pinrow input{flex:1;letter-spacing:.3em;font-family:var(--mono)}

/* Kopf */
.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font:800 24px/1 var(--display);letter-spacing:-.01em}
.brand h1 span{color:var(--accent)}
.who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.who b{color:var(--ink)}
.who select{padding:7px 10px;font-size:13.5px;border-radius:999px}
.badge{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.04em;padding:4px 6px;border-radius:5px;background:var(--track);color:var(--muted);vertical-align:1px;white-space:nowrap}
.badge.fk{background:var(--accent-soft);color:var(--ink)}
.badge.admin{background:var(--navy-soft);color:var(--navy)}
.teamchip{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--body);padding:5px 9px 5px 6px;border-radius:999px;
  background:color-mix(in srgb,var(--tc) 14%,var(--surface));color:var(--ink);border:1px solid color-mix(in srgb,var(--tc) 40%,transparent)}
.teamchip i{width:10px;height:10px;border-radius:50%;background:var(--tc)}
.viewbanner{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;background:var(--navy-soft);color:var(--navy);
  border-radius:10px;padding:10px 14px;font:500 14px/1.35 var(--body)}

/* Reiter */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;text-decoration:none;color:var(--muted);font:600 14px/1 var(--body);padding:12px 12px 13px;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs a.lead{color:var(--navy)}
.tabs a.lead[aria-selected="true"]{border-bottom-color:var(--navy)}

/* Übersicht */
.hero{display:grid;gap:6px}
.hero h2{font:800 clamp(26px,5vw,34px)/1.1 var(--display);letter-spacing:-.01em}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tile{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:6px;align-content:start}
.tile:hover{border-color:var(--navy)}
.tile:focus-visible{outline:2px solid var(--navy)}
.tile b{font:600 17px/1.2 var(--display)}
.tile span{font-size:13px;color:var(--muted)}
.soon{display:grid;gap:8px;place-items:center;text-align:center;padding:40px 20px;color:var(--muted)}
.soon b{font:600 18px/1.2 var(--display);color:var(--ink)}

/* Struktur-Baum */
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.teamcard{border:1px solid var(--line);border-top:5px solid var(--tc);border-radius:12px;padding:14px;display:grid;gap:10px;background:var(--surface);min-width:0}
.teamcard header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.teamcard h3{display:flex;align-items:center;gap:8px}
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree ul{margin-left:14px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--tc) 35%,transparent)}
.tree li{padding:3px 0}
.node{all:unset;box-sizing:border-box;display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;font-size:14px}
button.node{cursor:pointer}
button.node:hover{background:var(--track)}
button.node:focus-visible{outline:2px solid var(--navy)}
.node.lead b{font-family:var(--display)}
.node .me{font:500 11px/1 var(--mono);color:var(--ink);background:var(--accent-soft);border-radius:5px;padding:3px 5px}

/* Verwaltung */
.ulist{width:100%;border-collapse:collapse;font-size:14px}
.ulist th{text-align:left;font:500 12px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.ulist td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.ulist tr:last-child td{border-bottom:0}
.ulist .tabsmini{display:flex;flex-wrap:wrap;gap:4px}
.ulist .tabsmini span{font:500 11px/1 var(--mono);padding:3px 5px;border-radius:4px;background:var(--track);color:var(--muted)}
.ulist .tabsmini span.off{text-decoration:line-through;opacity:.6}
.scroll-x{overflow-x:auto}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline input[type=text]{flex:1 1 180px}
.swatch{width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.teamrow{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.teamrow:last-child{border-bottom:0}
@media (max-width:640px){.teamrow{grid-template-columns:auto minmax(0,1fr) auto}.teamrow select{grid-column:1/-1;grid-row:2}}

/* Dialog */
dialog{border:1px solid var(--line);border-radius:14px;padding:0;background:var(--surface);color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px)}
dialog::backdrop{background:rgba(10,16,30,.45)}
dialog form{padding:20px;display:grid;gap:14px}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tabtoggles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;border:1px solid var(--line);border-radius:10px;padding:12px}
.tabtoggles legend{font-size:13px;color:var(--muted);padding:0 4px}
.dlg-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:10px;font-size:14px;z-index:10;max-width:calc(100vw - 32px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Werkzeuge (gemeinsam) ---------- */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--track);border-radius:9px}
.seg button{all:unset;cursor:pointer;font:500 12.5px/1 var(--body);padding:6px 10px;border-radius:7px;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg button:focus-visible{outline:2px solid var(--navy)}
.daynav{display:inline-flex;align-items:center;gap:6px}
.daynav b{font:600 14px/1 var(--body);min-width:120px;text-align:center}
.daynav button{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.daynav button:disabled{opacity:.35;cursor:default}
.line-chart{width:100%;height:auto;display:block}
.line-chart text{fill:var(--muted);font:10.5px var(--mono)}
.progress{height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.progress span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .3s}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.legend i.ln{height:2px;background:var(--ink);vertical-align:3px}

/* Check-in */
.ci-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:800px){.ci-grid{grid-template-columns:1fr}}
.ci-row{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;cursor:pointer;position:relative}
.ci-row input[type=checkbox],.ci-todo input[type=checkbox]{width:19px;height:19px;accent-color:var(--ok);flex:none}
.ci-row.num span:first-child{flex:1}
.ci-row.num input{width:84px}
.ci-week{min-width:90px;text-align:right}
.ci-todos,.ci-text{display:block;padding:9px 0;border-bottom:1px solid var(--line);position:relative}
.ci-head{display:block;font-size:14.5px;margin-bottom:6px}
.ci-todo{display:flex;gap:8px;align-items:center;margin:5px 0}
.ci-todo input[type=text]{flex:1;padding:7px 10px}
.ci-stats{width:100%;border-collapse:collapse;font-size:13px}
.ci-stats th,.ci-stats td{padding:6px;text-align:right;border-bottom:1px solid var(--line)}
.ci-stats th:first-child,.ci-stats td:first-child{text-align:left}
.ci-stats th{font:500 11.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ci-total td{font-weight:600}
.ci-weeks{display:flex;gap:6px;align-items:flex-end;height:90px;overflow-x:auto}
.ci-wk{flex:1 0 28px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.ci-wk span{width:70%;background:var(--navy);border-radius:3px 3px 0 0;min-height:2px}
.ci-wk em{font-style:normal;font:10.5px var(--mono);color:var(--muted);margin-top:3px}
.ci-editing{padding-right:96px!important}
.ci-tools{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:3px}
.ci-tools button{all:unset;cursor:pointer;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:13px}
.ci-tools button:disabled{opacity:.3;cursor:default}
.ci-tools button[data-rm]:hover{background:var(--warn);color:#fff}
.ci-add{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:12px}
@media (max-width:560px){.ci-add{grid-template-columns:1fr 1fr}.ci-add input{grid-column:1/-1}}
fieldset[disabled] .ci-row,fieldset[disabled] .ci-todos{cursor:default}
fieldset.plain{border:0;padding:0;margin:0;min-width:0}

/* GeKo */
.gk-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}
@media (max-width:760px){.gk-grid{grid-template-columns:1fr}}
.gk-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.gk-p{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;border:1px solid transparent;background:var(--track);font-size:14px}
.gk-p span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gk-p em{font:normal 12px var(--mono);color:var(--muted)}
.gk-p:focus-visible{outline:2px solid var(--navy)}
.gk-list li.on .gk-p{border-color:var(--accent);background:var(--accent-soft)}
.gk-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;margin-right:6px}
.gk-p .gk-dot{margin-right:0}
.gk-dot.good{background:var(--ok)}.gk-dot.warn{background:var(--accent)}.gk-dot.crit{background:var(--warn)}
.gk-right{background:var(--bg);border-radius:12px;padding:14px 16px;min-height:200px;display:grid;gap:4px;align-content:start}
.gk-right h4{font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:12px}
.gk-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 10px;flex-wrap:wrap}
.gk-card-head h3{font-size:18px}
.gk-item small{display:block;font-size:12px;margin-top:2px}
.gk-streak{font-size:12.5px;font-weight:700;white-space:nowrap}
.gk-streak.risk{opacity:.6}
.gk-streak-big{font-weight:600;font-size:14px}
.gk-trend-wrap{padding-top:16px;border-top:1px solid var(--line);display:grid;gap:10px}
.gk-hist{list-style:none;margin:0;padding:0;display:grid}
.gk-hist li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--line)}
.gk-hist li:last-child{border-bottom:0}
.gk-hist p{flex-basis:100%;font-size:14px;margin-left:17px}

/* Stille Stunde */
.st-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.st-ph{all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.st-ph b{font:600 14px/1.2 var(--body)}
.st-ph i{position:absolute;left:0;bottom:0;height:3px;background:var(--accent)}
.st-ph.on{border-color:var(--navy);background:var(--navy-soft)}
.st-ph:focus-visible{outline:2px solid var(--navy)}
.st-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
@media (max-width:800px){.st-cols{grid-template-columns:1fr}}
.st-cols>div{display:grid;gap:10px;align-content:start}
.st-cols h3{margin-top:8px}
.st-cols h4{font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:10px}
.st-cols input[type=text]{width:100%}
.st-f{display:grid;gap:6px;font-size:14px}
.st-rate{display:grid;grid-template-columns:150px 1fr 34px;align-items:center;gap:10px;font-size:14px}
.st-rate input{accent-color:var(--navy)}
.st-rate input.unset{opacity:.45}
.st-rate output{font:600 14px var(--mono);text-align:right}
.st-goal,.st-ifthen{display:flex;gap:6px;align-items:center}
.st-goal input{flex:1}
.st-ifthen{flex-wrap:wrap}
.st-ifthen input{flex:1 1 140px;width:auto!important}
.st-ifthen span{font-weight:600;font-size:13.5px}
.st-x{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;flex:none}
.st-x:hover{background:var(--warn);color:#fff}
.st-ifc-row{display:grid;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}
.st-basis dt{font-weight:600;margin-top:10px}
.st-basis dd{margin:2px 0 0;color:var(--muted);font-size:14px}
.st-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.st-state{font-size:13.5px;padding:7px 10px;border-radius:8px}
.st-state.saved{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.st-state.dirty{background:var(--accent-soft);color:var(--ink)}

/* MPL */
.mpl-wrap{overflow:auto;max-height:calc(100dvh - 260px);border:1px solid var(--line);border-radius:10px;margin-inline:-4px}
.mpl{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
.mpl th,.mpl td{padding:4px 6px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;text-align:right;background:var(--surface)}
.mpl thead th{position:sticky;top:0;z-index:2;font:500 11px/1.25 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--track)}
.mpl thead tr:nth-child(2) th{top:25px}
.mpl thead th.grp{text-align:center;color:var(--ink);background:var(--navy-soft)}
.mpl th.name{position:sticky;left:0;z-index:1;text-align:left;font:500 13.5px/1.3 var(--body);min-width:170px;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.mpl thead th.name{z-index:3;font:500 11px/1.25 var(--mono)}
.mpl td.lvl{text-align:center;font:500 12px var(--mono);color:var(--muted)}
.mpl td.soll,.mpl thead th.soll,.mpl thead th.ziel{background:color-mix(in srgb,var(--track) 55%,var(--surface))}
.mpl td input{width:62px;padding:4px 6px;font:13px var(--mono);text-align:right;border-radius:6px;border:1px solid transparent;background:transparent}
.mpl td input:hover{border-color:var(--line)}
.mpl td input:focus{border-color:var(--navy);background:var(--surface)}
.mpl td.ro{color:var(--muted);font-family:var(--mono)}
.mpl td.mpl-out{font-family:var(--mono);color:var(--navy)}
.mpl tr.mpl-team th{background:color-mix(in srgb,var(--tc) 10%,var(--surface));border-left:4px solid var(--tc)}
.mpl tr.mpl-sum th,.mpl tr.mpl-sum td{font-weight:600;font-family:var(--mono);background:var(--navy-soft)}
.mpl tr.mpl-sum th{font-family:var(--body)}
.mpl tr.mpl-sum.team th,.mpl tr.mpl-sum.team td{background:color-mix(in srgb,var(--tc) 16%,var(--surface))}
.mpl tr.mpl-sum.total th,.mpl tr.mpl-sum.total td{background:var(--accent-soft)}
.mpl-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}
.gk-ctl{margin:2px 0 8px 29px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--navy);display:grid;gap:6px}
.gk-ctl-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font-size:13.5px}
.gk-ctl-list,.gk-ctl-list ul{list-style:none;margin:0;padding:0;font-size:13.5px;display:grid;gap:3px}
.gk-ctl-list ul{margin:3px 0 2px 14px}
.gk-ctl .ok{color:var(--ok);font-weight:700}
.gk-ctl .miss{color:var(--warn);font-weight:700}
@media (max-width:560px){.gk-ctl{margin-left:0}}

/* Pyramide */
.pyramid{font-size:14px}
.pyramid ul{list-style:none;margin:0;padding:0}
.pyramid ul ul{margin-left:12px;padding-left:14px;border-left:2px solid color-mix(in srgb,var(--tc,var(--line)) 45%,transparent)}
.pyramid li{padding:1px 0}
.pyramid summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px}
.pyramid summary::-webkit-details-marker{display:none}
.pyramid summary::before{content:"▸";width:16px;flex:none;color:var(--muted);transition:transform .15s}
.pyramid details[open]>summary::before{transform:rotate(90deg)}
.pyramid .leaf{display:flex;align-items:center;gap:4px;padding-left:20px}
.pyramid .node{border-left:3px solid var(--tc,transparent)}
.node-add{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--muted);opacity:.35;font-weight:600}
li:hover>details>summary>.node-add,li:hover>.leaf>.node-add,.node-add:focus-visible{opacity:1}
.node-add:hover{background:var(--navy-soft);color:var(--navy)}
.teamname{display:flex;align-items:center;gap:8px;min-width:0}
.teamname input{flex:1;min-width:0}
.mpl tr.mpl-p th.name{border-left:4px solid var(--tc,transparent)}
.mpl tr.mpl-sum.team th.name,.mpl tr.mpl-sum.area th.name{border-left:4px solid var(--tc,transparent)}

/* Wochenziele aus der Stille Stunde */
.wg{display:grid;gap:4px}
.wg-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px;font-size:14px}
#ci-wg{padding:12px 14px;border-radius:12px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.wg-row{padding:6px 0;font-size:14px}
.wg-row:last-of-type{border-bottom:0}
.wg-if summary{cursor:pointer;margin-top:4px}
.wg-if ul{margin:4px 0 0;padding-left:18px}
.gk-ctl.wg{border-left-color:var(--accent)}
.stack{display:grid;gap:14px;align-content:start;min-width:0}

/* =====================================================================
   HUD-Ebene (MW2-inspiriert): Raster, Scanlines, eckige Panels, Leuchtakzente
   ===================================================================== */
html{background:var(--bg)}
body{background:
    radial-gradient(ellipse at 50% -10%,rgba(91,155,230,.10),transparent 55%),
    radial-gradient(ellipse at 50% 120%,rgba(201,195,186,.06),transparent 50%),
    linear-gradient(rgba(91,155,230,.035) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(91,155,230,.035) 1px,transparent 1px) 0 0/40px 40px,
    var(--bg);
  background-attachment:fixed;font-size:15.5px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:49;box-shadow:inset 0 0 180px rgba(0,0,0,.75)}
h1,h2,h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;line-height:1}
h2{font-size:27px}
h3{font-size:21px}
h4{font-family:var(--mono)}
.eyebrow,.badge,th{font-family:var(--mono)!important}
::selection{background:var(--brand);color:#fff}

/* Panels mit Eck-Klammern */
.panel,.stats,.tile,.teamcard,dialog,.gk-right,.mpl-wrap,.st-ph,#ci-wg,.gk-ctl,.viewbanner{border-radius:2px!important}
.panel,.tile,dialog{background:
    linear-gradient(var(--hud),var(--hud)) top left/16px 2px no-repeat,
    linear-gradient(var(--hud),var(--hud)) top left/2px 16px no-repeat,
    linear-gradient(var(--hud),var(--hud)) top right/16px 2px no-repeat,
    linear-gradient(var(--hud),var(--hud)) top right/2px 16px no-repeat,
    linear-gradient(var(--hud),var(--hud)) bottom left/16px 2px no-repeat,
    linear-gradient(var(--hud),var(--hud)) bottom left/2px 16px no-repeat,
    linear-gradient(var(--hud),var(--hud)) bottom right/16px 2px no-repeat,
    linear-gradient(var(--hud),var(--hud)) bottom right/2px 16px no-repeat,
    var(--glass);
  border-color:var(--line);backdrop-filter:blur(3px)}
.panel-head h2::before{content:"";display:inline-block;width:8px;height:18px;background:var(--hud);margin-right:10px;vertical-align:-1px;box-shadow:0 0 10px var(--hud-dim)}
.stats{background:var(--line)}
.stat{background:var(--glass)}
.stat b{font:500 34px/1 var(--display);color:var(--hud);text-shadow:0 0 14px var(--hud-dim)}
.stat span{font:12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* Kopf & Reiter */
.brand h1{font:700 34px/1 var(--display);letter-spacing:.08em}
.brand h1 span{color:var(--hud);text-shadow:0 0 16px var(--hud-dim)}
.brand{position:relative;padding-left:14px}
.brand::before{content:"";position:absolute;left:0;top:-8px;width:44px;height:44px;border-radius:50%;border:3px solid var(--gray);border-right-color:transparent;border-bottom-color:transparent;transform:rotate(-20deg);opacity:.9}
.brand h1{position:relative;color:#dfe8f5}
.tabs{border-bottom:1px solid var(--line);gap:2px}
.tabs a{font:500 21px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:12px 14px 9px;color:var(--muted);border-bottom-width:3px}
.tabs a:hover{color:var(--ink);background:linear-gradient(to top,rgba(91,155,230,.08),transparent)}
.tabs a[aria-selected="true"]{color:#fff;background:var(--brand);border-bottom-color:var(--hud);box-shadow:0 0 18px var(--hud-dim)}
.tabs a.lead{color:var(--accent)}
.tabs a.lead[aria-selected="true"]{color:var(--accent-ink);background:var(--accent);border-bottom-color:#fff;box-shadow:0 0 18px rgba(201,195,186,.35)}
.who{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
.who select{border-radius:2px}

/* Knöpfe: angeschnittene Ecken */
.btn{border-radius:0;font:600 18px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;padding:10px 16px 7px;color:#fff;background:var(--brand);border-color:var(--hud);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn:hover{filter:none;box-shadow:0 0 18px var(--hud-dim);background:var(--brand-hi)}
.btn.ghost{color:var(--hud);border-color:var(--hud-dim);background:rgba(91,155,230,.04)}
.btn.ghost:hover{background:rgba(91,155,230,.14);color:var(--hud)}
.btn.danger{color:var(--warn);border-color:rgba(229,83,61,.5)}
.btn.danger:hover{background:rgba(229,83,61,.14)}
.btn.small{font-size:16px;padding:7px 11px 5px}
.lnk{color:var(--hud);font-family:var(--mono);text-transform:uppercase;font-size:12.5px;letter-spacing:.05em}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],input[type=month],select,textarea{border-radius:2px;background:rgba(0,0,0,.35);border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--hud);box-shadow:0 0 0 1px var(--hud-dim)}
.check input,.ci-row input[type=checkbox],.ci-todo input[type=checkbox]{accent-color:var(--hud)}
.seg{border-radius:2px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.seg button{border-radius:0;font:500 17px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 4px}
.seg button.on{background:var(--brand);color:#fff;box-shadow:inset 0 -2px 0 var(--hud)}
.daynav button{border-radius:2px;border-color:var(--hud-dim);color:var(--hud)}
.daynav b{font:500 20px/1 var(--display);text-transform:uppercase;letter-spacing:.05em}
.badge{border-radius:0;text-transform:uppercase}
.badge.fk{background:var(--accent-soft);color:var(--accent)}
.badge.admin{background:var(--navy-soft);color:var(--hud)}
.teamchip{border-radius:0;text-transform:uppercase;font:600 12px/1 var(--mono);letter-spacing:.05em}
.viewbanner{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-family:var(--mono);text-transform:uppercase;font-size:13px}
.progress,.ci-wk span{border-radius:0}
.progress span{background:linear-gradient(90deg,var(--hud),#9cc6f5);box-shadow:0 0 12px var(--hud-dim)}
.toast{border-radius:0;background:var(--brand);color:#fff;border:1px solid var(--hud);font:600 18px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:12px 18px 9px}
dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(2px)}
.auth-card h1{font:700 64px/.9 var(--display);letter-spacing:.06em;color:#dfe8f5;text-shadow:0 0 22px var(--hud-dim)}
.auth-card .eyebrow{color:var(--accent)}
.brandbar{border-radius:0;height:6px;background:linear-gradient(90deg,var(--brand) 0 70%,var(--gray) 70%)}
.tile b{font:600 24px/1 var(--display);text-transform:uppercase;letter-spacing:.05em}
.tile:hover{border-color:var(--hud);box-shadow:0 0 22px var(--hud-dim)}
.hero h2{font:700 clamp(40px,7vw,60px)/.9 var(--display);letter-spacing:.04em}
.mpl thead th{background:#141a10}
.mpl thead th.grp{background:rgba(91,155,230,.12);color:var(--hud)}
.mpl th,.mpl td{background:#0d110b}
.ulist th{color:var(--hud)}
@media (prefers-reduced-motion:reduce){body::before{display:none}}

/* ---------- Ränge, Patches, Spielerkarte ---------- */
.ins{display:block;flex:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.ins.tier5,.ins.tier6{filter:drop-shadow(0 0 6px rgba(242,193,78,.55))}
.ins.tier7{filter:drop-shadow(0 0 8px rgba(255,107,74,.7))}
.rankchip{display:inline-flex;align-items:center;gap:4px;font:12px/1 var(--mono);color:var(--muted);vertical-align:middle}
.rankchip b{font-weight:400;letter-spacing:.06em}
.rankchip.none{opacity:.5}
.who-me{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--line);background:rgba(0,0,0,.3)}
.who-me:hover,.who-me:focus-visible{border-color:var(--hud);box-shadow:0 0 12px var(--hud-dim)}
.who-me b{color:var(--ink)}
.pyramid .node{gap:6px}
button.node:hover{background:rgba(91,155,230,.1)}

.patch{--ps:34px;display:inline-grid;place-items:center;width:var(--ps);height:calc(var(--ps) * 1.12);flex:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 85%,#fff 15%),color-mix(in srgb,var(--pc) 60%,#000 40%));
  clip-path:polygon(50% 0,100% 14%,100% 62%,50% 100%,0 62%,0 14%);position:relative}
.patch::after{content:"";position:absolute;inset:2px;clip-path:inherit;border:0;background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 45%);pointer-events:none}
.patch i{font-style:normal;font-size:calc(var(--ps) * .5);line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));margin-top:-8%}
.patchrow{display:inline-flex;gap:3px;vertical-align:middle;flex-wrap:wrap}

.hovercard{position:fixed;z-index:60;width:260px;padding:12px;background:var(--glass);border:1px solid var(--line);border-top:3px solid var(--tc,var(--hud));
  box-shadow:0 12px 40px rgba(0,0,0,.6);display:grid;gap:10px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;pointer-events:none;backdrop-filter:blur(6px)}
.hovercard.on{opacity:1;transform:none}
.hc-top{display:flex;gap:10px;align-items:center}
.hc-top b{display:block;font:600 24px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.hc-top span{font:12px/1.3 var(--mono);color:var(--muted)}
.hc-patches{display:flex;flex-wrap:wrap;gap:8px}
.hc-p{display:grid;justify-items:center;gap:2px;width:56px;text-align:center}
.hc-p em{font:normal 10.5px/1.15 var(--mono);color:var(--muted)}

/* Spielerkarte */
.player-dlg{width:min(560px,calc(100vw - 24px));padding:0;overflow:hidden;border:1px solid var(--tc)}
.pc{display:grid;gap:14px;padding-bottom:18px;position:relative}
.pc-x{all:unset;cursor:pointer;position:absolute;top:10px;right:12px;z-index:3;font:20px/1 var(--mono);color:var(--ink);opacity:.7}
.pc-x:hover{opacity:1}
.pc-banner{position:relative;min-height:170px;display:flex;align-items:center;gap:18px;padding:22px 22px 18px;overflow:hidden;
  background:linear-gradient(110deg,color-mix(in srgb,var(--tc) 30%,#000) 0%,#05090f 75%)}
.pc-stripes{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 14px,transparent 14px 28px);opacity:.8}
.pc-ins{position:relative;z-index:1;display:grid;place-items:center;width:130px;height:130px;flex:none}
.pc-ins::before{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 45%,transparent),transparent 70%)}
.pc-ins .ins{position:relative}
.pc-burst{position:absolute;inset:50% auto auto 50%;width:0;height:0;z-index:2;pointer-events:none}
.pc-burst i{position:absolute;font-style:normal;font-size:22px;left:-11px;top:-11px;opacity:0}
.pc-id{position:relative;z-index:1;min-width:0}
.pc-rank{font:13px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.pc-nick{font:700 clamp(40px,9vw,58px)/.9 var(--display);letter-spacing:.03em;margin-top:6px;overflow-wrap:anywhere;text-shadow:0 0 18px color-mix(in srgb,var(--tc) 60%,transparent)}
.pc-real{color:var(--muted);font-size:14px;margin-top:4px}
.pc-flash{position:absolute;right:16px;bottom:10px;z-index:1;font:600 15px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--tc);opacity:0}
.pc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin:0 18px;border:1px solid var(--line)}
.pc-stats div{background:var(--glass);padding:10px;display:grid;gap:2px;text-align:center}
.pc-stats b{font:500 28px/1 var(--display);color:var(--hud);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-stats .pc-team{font-size:20px;color:var(--tc)}
.pc-stats span{font:10.5px/1.2 var(--mono);text-transform:uppercase;color:var(--muted)}
@media (max-width:480px){.pc-stats{grid-template-columns:repeat(2,1fr)}.pc-banner{flex-direction:column;text-align:center}}
.pc-patches{display:flex;flex-wrap:wrap;gap:12px;padding:0 18px}
.pc-p{display:grid;justify-items:center;gap:4px;width:72px;text-align:center}
.pc-p em{font:normal 11px/1.2 var(--mono);color:var(--muted)}
.pc-meta{padding:0 18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pc-edit{margin:0 18px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:12px}
.pc-actions{display:flex;flex-wrap:wrap;gap:8px}
.pc-award{border:1px solid var(--line);padding:10px;display:flex;flex-wrap:wrap;gap:8px}
.pc-award legend{font:12px var(--mono);text-transform:uppercase;color:var(--muted);padding:0 4px}
.pc-award-p{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--line);cursor:pointer;font-size:13px}
.pc-award-p input{accent-color:var(--hud)}
.pc-award-p:has(input:checked){border-color:var(--hud);background:var(--navy-soft)}

/* Animation beim Öffnen – stärker je Rang */
.player-dlg.play .pc-ins .ins{animation:insIn .7s cubic-bezier(.2,1.5,.4,1) both}
.player-dlg.play .pc-nick{animation:slideIn .5s .15s ease-out both}
.player-dlg.play .pc-rank{animation:slideIn .5s .05s ease-out both}
.player-dlg.play .pc-stripes{animation:stripes 1.6s linear infinite}
.player-dlg.play .pc-burst i{animation:burst var(--t) var(--dl) cubic-bezier(.15,.8,.3,1) forwards}
.player-dlg.play .pc-flash{animation:flash 1.8s .3s ease-out both}
.player-dlg.play.tier5 .pc,.player-dlg.play.tier6 .pc{animation:shake .45s .25s both}
.player-dlg.play.tier6 .pc-banner::after,.player-dlg.play.tier7 .pc-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);animation:sweep 1.1s .35s ease-out both}
.player-dlg.play.tier7 .pc{animation:shake .6s .2s both}
.player-dlg.play.tier7 .pc-ins::before{animation:aura 1.4s ease-in-out infinite}
@keyframes insIn{0%{transform:scale(.2) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes slideIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes stripes{to{background-position:56px 0}}
@keyframes burst{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) rotate(calc(-1 * var(--a))) scale(1.1)}}
@keyframes flash{0%{opacity:0;letter-spacing:1em}30%{opacity:1;letter-spacing:.3em}100%{opacity:.65}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes aura{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:1}}
@media (prefers-reduced-motion:reduce){.player-dlg.play *{animation:none!important}.pc-burst{display:none}.pc-flash{opacity:.65}}

/* Lobby */
.lobby-list{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.lobby-row{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:30px 44px 34px minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:6px 12px 6px 8px;background:linear-gradient(90deg,color-mix(in srgb,var(--tc,var(--hud)) 16%,transparent),rgba(0,0,0,.25) 45%);border-left:3px solid var(--tc,var(--line))}
.lobby-row:hover,.lobby-row:focus-visible{background:linear-gradient(90deg,color-mix(in srgb,var(--tc,var(--hud)) 34%,transparent),rgba(91,155,230,.08) 60%);outline:1px solid var(--hud-dim)}
.lr-pos{font:14px var(--mono);color:var(--muted)}
.lr-lvl{font:500 26px/1 var(--display);color:var(--hud);text-align:center}
.lr-name{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.lr-name b{font:600 24px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.lr-name small{flex-basis:100%;font-size:12px;color:var(--muted)}
.lr-tag{font:normal 13px var(--mono);color:var(--tc,var(--muted))}
.lr-meta{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.badge.warn{background:rgba(229,103,77,.15);color:var(--warn)}
@media (max-width:640px){.lobby-row{grid-template-columns:24px 40px minmax(0,1fr)}.lr-lvl,.lr-meta{display:none}.lr-patches{grid-column:3}}
#lobby-q{min-width:200px}

/* Einladung & Patch-Katalog */
.invite-code{display:flex;gap:6px;justify-content:center}
.invite-code span{display:grid;place-items:center;width:46px;height:58px;font:500 40px/1 var(--display);color:#fff;background:var(--brand);border:1px solid var(--hud);box-shadow:0 0 14px var(--hud-dim)}
.patch-list{display:grid;gap:8px}
.patch-item{display:grid;grid-template-columns:auto minmax(0,1fr) 56px 40px auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.patch-fields{display:grid;gap:4px;min-width:0}
.patch-fields input{width:100%;padding:6px 8px}
.patch-emoji{text-align:center;font-size:20px;padding:6px!important}
.patch-add{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr) 40px auto;gap:8px;align-items:center}
.patch-add #pa-emoji{text-align:center;font-size:20px}
@media (max-width:700px){.patch-add{grid-template-columns:64px 1fr 40px}.patch-add #pa-desc{grid-column:1/-1}.patch-add .btn{grid-column:1/-1}.patch-item{grid-template-columns:auto minmax(0,1fr) auto}.patch-item .patch-emoji,.patch-item .swatch{display:none}}

/* Patches: Bild, Anzahl, verdeckt */
.patch.img{background:none;clip-path:none}
.patch.img::after{display:none}
.patch.img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.patchw{position:relative;display:inline-grid;flex:none}
.patch-n{position:absolute;right:-7px;bottom:-5px;font:600 calc(var(--ps) * .3 + 3px)/1 var(--mono);color:#fff;background:var(--brand);border:1px solid var(--hud);padding:1px 3px}
.patch.locked{background:linear-gradient(160deg,#1a2433,#0b111a)}
.patch.locked i{color:#3b5170;font-family:var(--display);font-size:calc(var(--ps) * .55)}

/* Trophäen */
.trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.trophy{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;padding:16px 10px 12px;border:1px solid var(--line);background:rgba(0,0,0,.25);outline:none}
.trophy b{font:600 20px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.trophy span{font:11.5px/1.3 var(--mono);color:var(--muted)}
.trophy.got{background:linear-gradient(180deg,color-mix(in srgb,var(--hud) 10%,transparent),rgba(0,0,0,.25))}
.trophy.got:hover,.trophy.got:focus-visible{border-color:var(--hud);box-shadow:0 0 18px var(--hud-dim)}
.trophy.locked b{color:#3b5170}
.trophy.locked:hover,.trophy.locked:focus-visible{border-color:var(--accent)}
.trophy .tt{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:220px;z-index:5;
  padding:8px 10px;background:var(--glass);border:1px solid var(--accent);font-size:13px;line-height:1.35;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;backdrop-filter:blur(6px)}
.trophy .tt em{display:block;font:normal 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:2px}
.trophy:hover .tt,.trophy:focus-visible .tt{opacity:1;transform:translateX(-50%)}

/* Lobby: Punkte, eigene Zeile */
.lobby-row{grid-template-columns:30px 44px 40px minmax(0,1fr) auto auto auto}
.lr-lvl{font:500 18px/1 var(--display)!important;letter-spacing:.04em}
.lr-score{font:500 26px/1 var(--display);color:var(--accent);min-width:44px;text-align:right}
.lr-score small{font-size:14px;margin-left:2px}
.lobby-row.me{outline:1px solid var(--hud-dim)}
@media (max-width:640px){.lobby-row{grid-template-columns:24px 40px minmax(0,1fr) auto}.lr-lvl,.lr-patches{display:none}}

/* Positionen & Patch-Katalog */
.lvl-list{display:grid;gap:6px}
.lvl-item{display:grid;grid-template-columns:24px 52px 48px minmax(0,1fr) 56px minmax(0,170px) 34px auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
.lvl-n{font:500 22px/1 var(--display);color:var(--hud)}
.lvl-id{font:600 20px/1 var(--display);letter-spacing:.05em}
.lvl-ins{all:unset;cursor:pointer;display:grid;place-items:center;width:52px;height:52px;border:1px dashed transparent}
.lvl-ins:hover,.lvl-ins:focus-visible{border-color:var(--hud)}
.lvl-tools{display:flex;gap:4px}
.lvl-add{display:grid;grid-template-columns:110px minmax(0,1fr) 60px minmax(0,170px) auto;gap:8px}
.patch-item{grid-template-columns:52px minmax(0,1fr) 56px 40px 34px auto}
.patch-add{grid-template-columns:auto 60px minmax(0,1fr) minmax(0,1.3fr) 40px auto}
.patch-add #pa-img{display:inline-flex;align-items:center;gap:6px}
@media (max-width:760px){.lvl-item{grid-template-columns:24px 52px 48px minmax(0,1fr) auto}.lvl-item .patch-emoji,.lvl-item select,.lvl-item>.muted{display:none}
  .lvl-add,.patch-add{grid-template-columns:1fr 1fr}.lvl-add .btn,.patch-add .btn{grid-column:1/-1}}

/* Spielerkarte: Patches verleihen mit +/− */
.pc-award{flex-direction:column;align-items:stretch}
.pc-award-p{display:grid;grid-template-columns:auto minmax(0,1fr) 28px 26px 28px;gap:8px;align-items:center;padding:4px 6px;border:1px solid var(--line);cursor:default}
.pc-award-p.on{border-color:var(--hud-dim);background:var(--navy-soft)}
.pc-award-p b{text-align:center;font:500 22px/1 var(--display)}
.pa-btn{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--hud-dim);color:var(--hud);font:600 18px/1 var(--mono)}
.pa-btn:hover{background:var(--brand);color:#fff}
.pa-btn:disabled{opacity:.3;cursor:default}

/* ---------- Glanz nach Anzahl ---------- */
.patch::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0}
.patch.img::before{-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.sh1 .patch{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--pc) 70%,transparent))}
.sh1 .patch::before{opacity:1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:sheen 5s ease-in-out infinite}
.sh2 .patch{filter:drop-shadow(0 0 6px rgba(220,230,245,.55)) saturate(1.15)}
.sh2 .patch::before{opacity:1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(190,210,235,.4) 52%,transparent 70%) -150% 0/250% 100% no-repeat;animation:sheen 3.2s ease-in-out infinite}
.sh3 .patch{filter:drop-shadow(0 0 8px rgba(255,200,80,.75)) saturate(1.25) brightness(1.08)}
.sh3 .patch::before{opacity:1;background:linear-gradient(115deg,transparent 28%,rgba(255,240,180,.7) 47%,rgba(255,200,80,.5) 53%,transparent 72%) -150% 0/250% 100% no-repeat;animation:sheen 2.2s ease-in-out infinite}
.sh4 .patch{filter:drop-shadow(0 0 10px rgba(180,140,255,.8)) saturate(1.3) brightness(1.1);animation:holoGlow 3s linear infinite}
.sh4 .patch::before{opacity:.55;mix-blend-mode:color-dodge;background:linear-gradient(120deg,#ff4d6d,#ffd166,#06d6a0,#4cc9f0,#b388ff,#ff4d6d) 0 0/300% 300%;animation:holo 4s linear infinite}
.sh3 .patch-n{background:#9a6b12;border-color:#ffd76a}
.sh4 .patch-n{background:linear-gradient(90deg,#b388ff,#4cc9f0);border-color:#fff}
.sparks{position:absolute;inset:-4px;pointer-events:none}
.sparks i{position:absolute;width:6px;height:6px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark 2.4s ease-in-out infinite;opacity:0}
.sparks i:nth-child(1){top:6%;left:12%}
.sparks i:nth-child(2){top:30%;right:4%;animation-delay:.8s}
.sparks i:nth-child(3){bottom:14%;left:30%;animation-delay:1.6s}
.sh4 .sparks i{background:#e9dcff}
@keyframes sheen{0%,35%{background-position:-150% 0}70%,100%{background-position:150% 0}}
@keyframes holo{to{background-position:300% 300%}}
@keyframes holoGlow{0%,100%{filter:drop-shadow(0 0 10px rgba(180,140,255,.8)) saturate(1.3) brightness(1.1)}50%{filter:drop-shadow(0 0 12px rgba(76,201,240,.85)) saturate(1.4) brightness(1.15)}}
@keyframes spark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(90deg)}}

/* ---------- Ketten & Freischalten ---------- */
.tr-art{position:relative;display:grid;place-items:center;width:110px;height:110px}
.tr-art>*{grid-area:1/1}
.chains{position:absolute;inset:-6px;pointer-events:none;z-index:2}
.chains .lk{position:absolute;left:var(--x);top:var(--y);width:16px;height:10px;margin:-5px 0 0 -8px;border:3px solid #7d8796;border-radius:6px;
  background:transparent;box-shadow:inset 0 0 0 1px #2b333e,0 1px 2px rgba(0,0,0,.7);transform:rotate(var(--r))}
.chains .lk.edge{width:14px;height:5px;margin:-2.5px 0 0 -7px;border-width:0;background:linear-gradient(#a3adba,#5d6775);border-radius:2px}
.padlock{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.trophy.locked .tr-art{filter:saturate(.6)}
.trophy.locked:hover .chains .lk{animation:rattleLink .35s ease-in-out}
.tr-real{display:grid;place-items:center}
.tr-cover{display:grid;place-items:center;z-index:1}
.tr-flash{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(91,155,230,.5) 35%,transparent 65%);opacity:0;z-index:3;pointer-events:none}
.tr-label{position:absolute;top:8px;left:50%;transform:translateX(-50%) scale(.6);font:600 15px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:var(--brand);border:1px solid var(--hud);padding:5px 8px 3px;opacity:0;white-space:nowrap;box-shadow:0 0 18px var(--hud-dim)}
/* Ablauf: vorher → rütteln → sprengen → fertig */
.trophy.unlocking .tr-real{opacity:0;transform:scale(.4)}
.trophy.unlocking>b,.trophy.unlocking>span{opacity:.2}
.trophy.unlocking.rattle .chains{animation:rattle .7s ease-in-out}
.trophy.unlocking.rattle .tr-cover{animation:rattle .7s ease-in-out}
.trophy.unlocking.burst .chains .lk{transition:transform .9s cubic-bezier(.2,.7,.3,1) var(--dl),opacity .9s ease-in var(--dl);
  transform:translate(var(--fx),var(--fy)) rotate(var(--fr));opacity:0}
.trophy.unlocking.burst .padlock{transition:transform .8s cubic-bezier(.5,0,.9,.6),opacity .8s;transform:translate(-50%,120px) rotate(35deg);opacity:0}
.trophy.unlocking.burst .tr-cover{transition:transform .35s ease-out,opacity .35s;transform:scale(1.35);opacity:0}
.trophy.unlocking.burst .tr-flash{animation:trFlash .8s ease-out both}
.trophy.unlocking.burst .tr-real{transition:transform .7s cubic-bezier(.2,1.6,.4,1) .15s,opacity .3s .15s;opacity:1;transform:none}
.trophy.unlocking.burst .tr-label{transition:transform .5s cubic-bezier(.2,1.6,.4,1) .3s,opacity .3s .3s;opacity:1;transform:translateX(-50%) scale(1)}
.trophy.unlocking.burst{border-color:var(--hud);box-shadow:0 0 30px var(--hud-dim)}
.trophy.unlocking.done>b,.trophy.unlocking.done>span{opacity:1;transition:opacity .4s}
.trophy.unlocking.done .tr-label{transition:opacity 1.2s 1.5s;opacity:0}
.trophy.plusone .tr-real{animation:plusPulse 1.2s .4s ease-out both}
.tr-plus{position:absolute;right:-4px;top:4px;z-index:3;font:600 22px/1 var(--display);color:#ffd76a;text-shadow:0 0 10px rgba(255,215,106,.8);animation:plusUp 1.6s .4s ease-out both}
@keyframes rattle{0%,100%{transform:none}15%{transform:translate(-3px,1px) rotate(-3deg)}30%{transform:translate(3px,-1px) rotate(3deg)}45%{transform:translate(-3px,0) rotate(-2deg)}60%{transform:translate(3px,1px) rotate(2deg)}80%{transform:translate(-1px,0)}}
@keyframes rattleLink{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(var(--r)) translateY(-2px)}}
@keyframes trFlash{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes plusPulse{0%{transform:none}30%{transform:scale(1.18);filter:brightness(1.6)}100%{transform:none}}
@keyframes plusUp{0%{opacity:0;transform:translateY(10px)}25%{opacity:1}100%{opacity:0;transform:translateY(-28px)}}
@media (prefers-reduced-motion:reduce){.sh1 .patch::before,.sh2 .patch::before,.sh3 .patch::before,.sh4 .patch::before,.sh4 .patch,.sparks i,.tr-plus,.trophy.plusone .tr-real{animation:none!important}.sparks{display:none}}

/* „Neu“ am Reiter */
.tab-new{display:inline-block;margin-left:6px;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 5px 2px;background:#e5674d;color:#fff;vertical-align:4px;animation:newPulse 1.6s ease-in-out infinite}
@keyframes newPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,103,77,.6)}50%{box-shadow:0 0 0 5px rgba(229,103,77,0)}}

/* ---------- Besondere, geheime, zeitlich begrenzte Patches ---------- */
.patchw.special::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,#ffd76a,#fff4c2,#b37a00,#ffd76a,#fff4c2,#b37a00,#ffd76a);
  filter:blur(5px);opacity:.75;animation:spin 4s linear infinite;z-index:-1}
.patchw.special{isolation:isolate}
@keyframes spin{to{transform:rotate(360deg)}}
.trophy.special{border-color:rgba(255,215,106,.55);background:linear-gradient(180deg,rgba(255,215,106,.12),rgba(0,0,0,.25))}
.trophy.special.got:hover,.trophy.special.got:focus-visible{border-color:#ffd76a;box-shadow:0 0 22px rgba(255,215,106,.4)}
.tr-tags{position:absolute;top:6px;left:6px;right:6px;display:flex;flex-wrap:wrap;gap:4px;z-index:4}
.tr-tag{font:normal 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 5px;background:rgba(0,0,0,.55);border:1px solid var(--line);color:var(--muted)}
.tr-tag.special{color:#ffd76a;border-color:rgba(255,215,106,.6)}
.tr-tag.time{color:var(--accent);border-color:rgba(201,195,186,.5)}
.trophy.missed{opacity:.45;filter:grayscale(1)}
.trophy.missed .chains .lk{border-color:#555}
.trophy .tr-art{margin-top:10px}
.patch-opts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:var(--muted);padding:2px 0 4px 60px}
.patch-opts .check{font-size:13px}
.po-date{display:inline-flex;align-items:center;gap:6px}
.po-date input{padding:5px 8px;font-size:13px;color-scheme:dark}
.patch-opts-new{grid-column:1/-1}
.patch-opts-new .patch-opts{padding-left:0}
.pc-award-p.off{opacity:.55}
.pc-award-p small{font:11px var(--mono)}
@media (prefers-reduced-motion:reduce){.patchw.special::before{animation:none}}
.tr-label{top:auto;bottom:64px}
.trophy.unlocking.done{border-color:var(--line);box-shadow:none;transition:border-color 1.5s 1s,box-shadow 1.5s 1s}
.trophy.unlocking.special.done{border-color:rgba(255,215,106,.55)}
.po-range{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:6px;white-space:nowrap}
.po-date input{width:138px}
@media (max-width:560px){.po-range{flex-wrap:wrap;white-space:normal}.patch-opts{padding-left:0}}

/* ---------- SC-Tapete ---------- */
.tp-head{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
@media (max-width:760px){.tp-head{grid-template-columns:1fr}}
.tp-who{display:flex;gap:14px;align-items:center}
.tp-who h2{font-size:38px}
.tp-ziel input{width:170px;color-scheme:dark}
.tp-ready{font:600 22px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px 9px;border:1px solid var(--line);color:var(--muted)}
.tp-ready.yes{color:#fff;background:var(--brand);border-color:var(--hud);box-shadow:0 0 22px var(--hud-dim);animation:newPulse 2s infinite}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:3px}
.tp-cell{display:grid;place-items:center;height:36px;font:12px/1 var(--mono);color:var(--muted);border:1px solid var(--line);background:rgba(0,0,0,.25)}
.tp-cell.soft{background:repeating-linear-gradient(45deg,rgba(91,155,230,.25) 0 4px,transparent 4px 8px);color:var(--ink)}
.tp-cell.full{background:var(--brand);border-color:var(--hud);color:#fff;box-shadow:inset 0 0 8px rgba(91,155,230,.5)}
.tp-key{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;border:1px solid var(--line)}
.tp-key.full{background:var(--brand);border-color:var(--hud)}
.tp-key.soft{background:repeating-linear-gradient(45deg,rgba(91,155,230,.5) 0 3px,transparent 3px 6px)}
.tp-months{width:100%;border-collapse:collapse;font-size:14px}
.tp-months th{text-align:left;font:11px var(--mono);text-transform:uppercase;color:var(--muted);padding:6px;border-bottom:1px solid var(--line)}
.tp-months td{padding:5px 6px;border-bottom:1px solid var(--line)}
.tp-months input[type=number]{width:120px;padding:6px 8px}
.tp-ev .small{margin-top:6px}
.tp-ev.ok .small{color:var(--ok)}
.tp-konto{display:grid;grid-template-columns:repeat(9,1fr);gap:3px}
.tp-konto span{text-align:center;font:12px var(--mono);padding:6px 0;border:1px solid var(--line);color:var(--muted)}
.tp-konto span.full{background:var(--brand);color:#fff;border-color:var(--hud)}
.tp-cash{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.tp-cash label{display:grid;gap:4px;padding:8px;border:1px solid var(--line);font-size:13px}
.tp-cash label.full{border-color:var(--hud);background:var(--navy-soft)}
.tp-cash b{font:600 20px/1 var(--display)}
.tp-cash input{padding:5px 6px;font-size:12.5px;color-scheme:dark}
.tp-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 24px}
.tp-checks h4{font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--hud);margin:8px 0 4px}
.tp-check{display:grid;grid-template-columns:minmax(0,1fr) auto 70px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line);font-size:14px}
.tp-check.req span:first-child{font-weight:600}
.tp-req{font-style:normal;color:var(--accent);font-size:10px;vertical-align:2px}
.tp-check .seg button{font-size:14px;padding:5px 8px 3px}
.tp-check .seg button.on.s-p{background:#8a6a12;box-shadow:none}
.tp-check .seg button.on.s-x{background:#2f6f45;box-shadow:none}
.tp-check .seg button:disabled{cursor:default}
.tp-kunden{width:100%;border-collapse:collapse;font-size:14px}
.tp-kunden th{text-align:left;font:11px var(--mono);text-transform:uppercase;color:var(--muted);padding:6px;border-bottom:1px solid var(--line)}
.tp-kunden td{padding:3px 6px;border-bottom:1px solid var(--line)}
.tp-kunden input[type=text]{width:100%;padding:6px 8px}
.tp-kunden input[type=number]{width:110px;padding:6px 8px}
.tp-kunden input[type=checkbox]{width:18px;height:18px;accent-color:var(--hud)}
.tp-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tp-list-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tp-list-head b{font:600 20px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.tp-list ol{margin:0;padding-left:26px;display:grid;gap:4px;font:12px var(--mono);color:var(--muted)}
.tp-list input{width:100%;padding:6px 8px}

/* ---------- Rennliste ---------- */
.rl{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.rl th{text-align:left;font:11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--hud);padding:8px 6px;border-bottom:1px solid var(--line)}
.rl td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.rl tr.ready td{background:rgba(91,155,230,.08)}
.rl .ok{color:var(--ok)}
.rl .miss{color:var(--warn)}
.rl-name{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.rl-name b{font:600 19px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.rl-name:hover b,.rl-name:focus-visible b{color:var(--hud)}
.rl-checks{display:inline-flex;gap:3px;flex-wrap:wrap}
.rl-c{display:inline-grid;place-items:center;min-width:22px;height:20px;font:normal 11px/1 var(--mono);border:1px solid var(--line)}
.rl-c.x{background:#2f6f45;color:#fff;border-color:#5fbf7f}
.rl-c.p{background:#8a6a12;color:#fff;border-color:#e8c547}
.rl-c.o{color:var(--muted)}
.rl-bar{min-width:190px}
.rl-bar b{font:500 18px/1 var(--display);margin-left:8px;white-space:nowrap}
.rl-track{display:inline-block;position:relative;width:120px;height:12px;background:var(--track);vertical-align:middle;border:1px solid var(--line)}
.rl-track i{position:absolute;left:0;top:0;bottom:0}
.rl-track i.soft{background:var(--hud-dim)}
.rl-track i.full{background:linear-gradient(90deg,var(--brand),var(--hud));box-shadow:0 0 10px var(--hud-dim)}
#rl-from button small{font:11px var(--mono);opacity:.7;margin-left:4px}
.rl-rules{display:grid;gap:8px}
.rl-rule{border:1px solid var(--line);padding:10px 12px}
.rl-rule summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.rl-rule summary b{font:600 22px/1 var(--display);letter-spacing:.04em}
.rl-rule[open] summary{margin-bottom:10px}
.rl-rule .tabtoggles{margin-top:10px}

/* ---------- Pflicht-Patches ---------- */
.rl-req{position:relative;display:inline-grid}
.rl-req:not(.has) .patchw{opacity:.75}
.rl-lock{position:absolute;right:-5px;bottom:-4px;font-style:normal;font-size:11px;filter:drop-shadow(0 1px 1px #000)}
.rl-reqs{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle;margin-right:6px}
.rl-goal{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;font-size:14px;color:var(--muted)}
.rl-goal b{color:var(--ink)}
.rl-goal-req{display:inline-flex;align-items:center;gap:5px}
.rl-abg b{color:var(--hud)}
.rl-abg small,.rl-eing small{display:block}
.rl-eing{color:var(--muted)}
.rl-seed{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px dashed var(--accent);background:var(--accent-soft)}
.rl-sum-req{display:inline-flex;gap:3px;flex-wrap:wrap}
.rl-pick{border:1px solid var(--line);padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-top:10px}
.rl-pick legend{font:12px var(--mono);text-transform:uppercase;color:var(--muted);padding:0 4px}
.rl-pick-p{display:flex;align-items:center;gap:8px;padding:4px 6px;border:1px solid var(--line);cursor:pointer;font-size:13.5px}
.rl-pick-p input{accent-color:var(--hud)}
.rl-pick-p:has(input:checked){border-color:var(--hud);background:var(--navy-soft)}
.tp-req-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tp-reqp{display:grid;justify-items:center;gap:6px;text-align:center;padding:12px 8px;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.tp-reqp.has{border-color:var(--hud-dim);background:linear-gradient(180deg,rgba(91,155,230,.1),rgba(0,0,0,.25))}
.tp-reqp b{font:600 19px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.tp-reqart{position:relative;display:inline-grid}
.tp-reqart .rl-lock{font-size:18px;right:-6px;bottom:-6px}
.rl td{white-space:nowrap}
.rl-reqs{flex-wrap:nowrap}
.rl td small.muted{font:11px var(--mono)}
.rl-abg small{font:11px var(--mono)}
.rl{min-width:980px}

/* Info-Popup (antippen / drüberfahren) */
.tip-pop{position:fixed;z-index:70;max-width:260px;padding:10px 12px;display:grid;gap:4px;background:var(--glass);border:1px solid var(--accent);
  box-shadow:0 10px 30px rgba(0,0,0,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .12s}
.tip-pop.on{opacity:1}
.tip-pop b{font:600 18px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.tip-pop span{font-size:13.5px;line-height:1.35}
button.rl-req{all:unset;cursor:pointer;position:relative;display:inline-grid}
button.rl-req:focus-visible{outline:2px solid var(--hud)}
.tp-reqart{cursor:pointer}
.rl-win{display:block;font:11px var(--mono)}
.tp-ziel{display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
.tp-ziel-row{display:flex;gap:6px;align-items:center}
.tp-ziel-row input{width:160px;color-scheme:dark}
.tp-ziel small{font:11.5px var(--mono)}

/* Spielerkarte scrollbar, Führungskraft */
.player-dlg{overflow-y:auto;overscroll-behavior:contain;max-height:calc(100dvh - 24px)}
.pc-fk{display:flex;align-items:center;gap:10px;margin:0 18px;padding:10px 12px;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.pc-fk-l{font:11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pc-fk-b{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-fk-b b{font:600 22px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.pc-fk-b small{font-size:12px}
.pc-fk-b:hover b,.pc-fk-b:focus-visible b{color:var(--hud)}
/* Struktur: nur Namen */
.pyramid .node{border-left:0;padding:3px 8px}
.pyramid .node b{font-weight:600}
.pc-award-wrap{border:1px solid var(--line)}
.pc-award-wrap summary{cursor:pointer;padding:10px 12px;font:600 18px/1 var(--display);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;gap:8px}
.pc-award-wrap[open] summary{border-bottom:1px solid var(--line)}
.pc-award-wrap .pc-award{border:0;padding:10px;display:flex;flex-direction:column;gap:6px}

/* ---------- Reiter blinkt bei neuen Trophäen ---------- */
.tabs a.has-new{color:#ffd76a;animation:tabBlink 1.1s ease-in-out infinite}
.tabs a.has-new[aria-selected="true"]{color:#fff}
@keyframes tabBlink{0%,100%{background:transparent;box-shadow:none}50%{background:rgba(255,215,106,.18);box-shadow:inset 0 -3px 0 #ffd76a,0 0 22px rgba(255,215,106,.45)}}

/* ---------- Neu im Archiv ---------- */
.trophy.fresh{border-color:#ffd76a;box-shadow:0 0 0 1px rgba(255,215,106,.4),0 0 26px rgba(255,215,106,.25);animation:freshGlow 2.4s ease-in-out 3}
.tr-ribbon{position:absolute;top:10px;right:-6px;z-index:5;font:600 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#1a1000;background:#ffd76a;padding:5px 10px 3px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.tr-ribbon::after{content:"";position:absolute;right:0;bottom:-6px;border:3px solid #9a6b12;border-right-color:transparent;border-bottom-color:transparent}
@keyframes freshGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,215,106,.4),0 0 18px rgba(255,215,106,.2)}50%{box-shadow:0 0 0 1px rgba(255,215,106,.8),0 0 36px rgba(255,215,106,.5)}}

/* ---------- Bühne: Trophäe enthüllen ---------- */
.reveal-dlg{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;padding:0;border:1px solid var(--pc);text-align:center;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--pc) 28%,transparent),transparent 60%),var(--glass)}
.reveal-dlg::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(4px)}
.reveal-dlg.special{border-color:#ffd76a}
.rv{display:grid;justify-items:center;gap:10px;padding:26px 22px 22px}
.rv-kicker{font:12px var(--mono);text-transform:uppercase;letter-spacing:.24em;color:var(--accent);animation:slideIn .4s ease-out both}
.reveal-dlg.special .rv-kicker{color:#ffd76a}
.rv-art{all:unset;cursor:pointer;position:relative;display:grid;place-items:center;width:220px;height:220px}
.rv-art>*{grid-area:1/1}
.rv-art .chains{inset:20px}
.rv-art .chains .lk{width:26px;height:16px;margin:-8px 0 0 -13px;border-width:4px}
.rv-art .chains .lk.edge{width:22px;height:7px;margin:-3.5px 0 0 -11px}
.rv-art .padlock svg{width:40px;height:46px}
.rv-art .tr-flash{inset:-10px}
.rv-rays{position:absolute;inset:-30px;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--pc) 40%,transparent) 0 8deg,transparent 8deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);opacity:0;transition:opacity .6s}
.reveal-dlg.burst .rv-rays{opacity:.9;animation:spin 14s linear infinite}
.reveal-dlg .tr-real{opacity:0;transform:scale(.4)}
.reveal-dlg.rattle .chains,.reveal-dlg.rattle .tr-cover{animation:rattle .7s ease-in-out}
.reveal-dlg.burst .chains .lk{transition:transform 1s cubic-bezier(.2,.7,.3,1) var(--dl),opacity 1s ease-in var(--dl);transform:translate(calc(var(--fx) * 1.8),calc(var(--fy) * 1.8)) rotate(var(--fr));opacity:0}
.reveal-dlg.burst .padlock{transition:transform .9s cubic-bezier(.5,0,.9,.6),opacity .9s;transform:translate(-50%,200px) rotate(40deg);opacity:0}
.reveal-dlg.burst .tr-cover{transition:transform .35s ease-out,opacity .35s;transform:scale(1.4);opacity:0}
.reveal-dlg.burst .tr-flash{animation:trFlash .9s ease-out both}
.reveal-dlg.burst .tr-real{transition:transform .8s cubic-bezier(.2,1.6,.4,1) .12s,opacity .3s .12s;opacity:1;transform:none}
.rv-name,.rv-desc,.rv-meta,.rv-next{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.reveal-dlg.done .rv-name,.reveal-dlg.done .rv-desc,.reveal-dlg.done .rv-meta,.reveal-dlg.done .rv-next{opacity:1;transform:none}
.reveal-dlg.done .rv-desc{transition-delay:.08s}.reveal-dlg.done .rv-meta{transition-delay:.16s}.reveal-dlg.done .rv-next{transition-delay:.24s}
.rv-name{font:700 46px/.95 var(--display);letter-spacing:.04em;text-shadow:0 0 22px color-mix(in srgb,var(--pc) 70%,transparent)}
.rv-desc{color:var(--muted);font-size:15px;max-width:340px}
.rv-meta{font:12.5px/1.4 var(--mono);color:var(--muted)}
.rv-meta b{color:#ffd76a}
.rv-plus{position:absolute;right:24px;top:20px;font:700 40px/1 var(--display);color:#ffd76a;text-shadow:0 0 16px rgba(255,215,106,.9);opacity:0}
.reveal-dlg.burst .rv-plus{animation:plusUp 1.8s .2s ease-out both}
@media (prefers-reduced-motion:reduce){.reveal-dlg .tr-real{opacity:1;transform:none}.reveal-dlg .chains,.reveal-dlg .tr-cover{display:none}.rv-rays{display:none}.tabs a.has-new,.trophy.fresh{animation:none}}

/* ---------- MPL überarbeitet ---------- */
.mpl-tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}
.amp{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.amp.good{background:#5fbf7f}.amp.mid{background:#e8c547}.amp.low{background:#e5674d}
.mpl td.amp-good{box-shadow:inset 3px 0 0 #5fbf7f;background:rgba(95,191,127,.10)}
.mpl td.amp-mid{box-shadow:inset 3px 0 0 #e8c547;background:rgba(232,197,71,.10)}
.mpl td.amp-low{box-shadow:inset 3px 0 0 #e5674d;background:rgba(229,103,77,.10)}
.mpl td output{font-family:var(--mono)}
.mpl td.end{background:rgba(91,155,230,.06)}
.mpl thead tr.pin th,.mpl thead tr.pin td{position:sticky;top:50px;z-index:2;background:#2a2410;color:var(--ink);font-weight:600;font-family:var(--mono);border-bottom:2px solid var(--accent)}
.mpl thead tr.pin th.name{z-index:3;font-family:var(--body)}
.mpl-who{all:unset;cursor:pointer}
.mpl-who:hover,.mpl-who:focus-visible{color:var(--hud)}
.mpl-admin summary{cursor:pointer;color:var(--muted)}
.mpl-admin .inline{margin-top:8px}
.mpl-md{padding:5px 8px;font-size:13px;color-scheme:dark}
/* Karte (Handy) */
.mk{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px}
@media (max-width:760px){.mk{grid-template-columns:1fr}.mk-people{flex-direction:row;overflow-x:auto;max-height:none}.mk-people button{flex:none;padding-left:10px!important}}
.mk-people{display:flex;flex-direction:column;gap:2px;max-height:70dvh;overflow:auto}
.mk-people button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-left:3px solid var(--tc,var(--line));background:rgba(0,0,0,.25);font-size:14px}
.mk-people button small{font:12px var(--mono);color:var(--muted)}
.mk-people button[aria-selected="true"]{background:var(--brand);color:#fff}
.mk-people button[aria-selected="true"] small{color:#cfe0f7}
.mk-people button:focus-visible{outline:2px solid var(--hud)}
.mk-card{display:grid;gap:12px;align-content:start}
.mk-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mk-head b{font:600 26px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.mk-res{display:flex;align-items:baseline;gap:6px}
.mk-res b{font:500 34px/1 var(--display);color:var(--hud)}
.mk-res small{font:11px var(--mono);color:var(--muted);text-transform:uppercase}
.mk-g{border:1px solid var(--line);padding:8px 12px 10px;display:grid;gap:6px;min-width:0}
.mk-g legend{font:12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--hud);padding:0 4px}
.mk-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(70px,96px));gap:8px;align-items:end}
.mk-l{font-size:14px;padding-bottom:8px}
.mk-f{display:grid;gap:2px}
.mk-f small{font:10.5px var(--mono);text-transform:uppercase;color:var(--muted)}
.mk-f input,.mk-f output{width:100%;padding:8px;font:15px var(--mono);text-align:right}
.mk-f output{display:block;border:1px dashed var(--line);color:var(--muted);min-height:38px}
.mk-f input.good{border-color:#5fbf7f;box-shadow:inset 0 0 0 1px #5fbf7f}
.mk-f input.mid{border-color:#e8c547;box-shadow:inset 0 0 0 1px #e8c547}
.mk-f input.low{border-color:#e5674d;box-shadow:inset 0 0 0 1px #e5674d}
@media (max-width:480px){.mk-row{grid-template-columns:1fr 1fr}.mk-l{grid-column:1/-1;padding-bottom:0}}

/* ---------- MPL neu ---------- */
.mpl-h{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.mpl-h .small{font-family:var(--body);text-transform:none;letter-spacing:0}
.mpl-factor{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding:10px 14px;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.mpl-factor>div{display:grid;gap:2px}
.mpl-factor small{font:10.5px var(--mono);text-transform:uppercase;color:var(--muted)}
.mpl-factor b{font:500 26px/1 var(--display)}
.mpl-factor b.hud{color:var(--hud)}
.mpl-suggest{display:flex!important;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-left:auto;padding-left:14px;border-left:1px solid var(--line)}
.mpl-suggest b{color:#ffd76a}
.mpl tr.off td,.mpl tr.off th{opacity:.45}
.mpl td.act{text-align:center}
.mpl-act{display:inline-flex;align-items:center;gap:5px;font:11px var(--mono);text-transform:uppercase;cursor:pointer}
.mpl-act input{accent-color:var(--hud);width:16px;height:16px}
.mpl-act.ro{cursor:default;color:var(--muted)}
.mpl td.end.changed,.mk-f.end.changed input{background:rgba(255,215,106,.16);box-shadow:inset 0 0 0 1px #ffd76a}
.mpl td.end input::placeholder,.mk-f.end input::placeholder{color:var(--muted);opacity:.85}
.chg-key{display:inline-block;width:12px;height:12px;vertical-align:-1px;background:rgba(255,215,106,.3);border:1px solid #ffd76a}
.mpl td.final,.mpl th.final{background:rgba(91,155,230,.10);border-left:2px solid var(--hud)}
.mpl-weeks td.ist,.mpl-weeks td.end{min-width:76px}
.mpl td.barc{min-width:170px;white-space:nowrap}
.mpl-bar{display:inline-block;position:relative;width:110px;height:10px;background:var(--track);border:1px solid var(--line);vertical-align:middle}
.mpl-bar i{position:absolute;left:0;top:0;bottom:0}
.mpl-bar.good i{background:#5fbf7f}.mpl-bar.mid i{background:#e8c547}.mpl-bar.low i{background:#e5674d}
.mpl-pct{font:500 17px/1 var(--display);margin-left:8px}
.mk-bar{display:flex;align-items:center;gap:6px}
.mk-bar .mpl-bar{width:160px}
.mk-people button.off{opacity:.45}
.mk-final{border-top:1px solid var(--line);padding-top:8px}

/* MPL: Prognose (gelb), Auto-Ist, Filter */
.mpl input.prog,.mk-f input.prog,output.prog{background:rgba(255,215,106,.14);color:#ffd76a;border-color:rgba(255,215,106,.55)}
.mpl td.progc{background:rgba(255,215,106,.06)}
.prog-key{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:4px;background:rgba(255,215,106,.25);border:1px solid #ffd76a}
.mpl output.auto{color:var(--hud)}
.mpl-filter select{padding:7px 10px;font-size:13.5px}
.mpl th.now,.mpl td.now{background:rgba(91,155,230,.14)}
.mpl thead th.grp.now{color:#fff;background:var(--brand)}
.mpl td.bnw{background:rgba(255,255,255,.02)}
.mpl-weeks td.bnw{min-width:70px}
@media (max-width:480px){.mk-row{grid-template-columns:1fr 1fr 1fr}}
.po-auto{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--accent)}
.po-auto select{padding:5px 8px;font-size:13px}
.po-n{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.po-n input{width:70px;padding:5px 8px;font-size:13px}
.trophy .tt small{display:block;margin-top:4px;font:11.5px/1.3 var(--mono);color:var(--accent)}

/* ---------- Rollen ---------- */
.role-wrap select{padding:7px 10px;font-size:13.5px;border-color:var(--accent);color:var(--accent)}
.viewbanner.role{border-color:var(--hud);background:var(--navy-soft);color:var(--hud)}
.roles-pick{border:1px solid var(--line);padding:10px;display:grid;gap:6px}
.roles-pick legend{font:12px var(--mono);text-transform:uppercase;color:var(--muted);padding:0 4px}
.role-opt{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;align-items:baseline;padding:8px 10px;border:1px solid var(--line);cursor:pointer}
.role-opt input{accent-color:var(--hud)}
.role-opt b{font:600 18px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.role-opt span{font-size:13px;color:var(--muted)}
.role-opt:has(input:checked){border-color:var(--hud);background:var(--navy-soft)}
.roles-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.roles-legend>div{padding:10px;border:1px solid var(--line);background:rgba(0,0,0,.2)}
.roles-legend b{font:600 18px/1 var(--display);text-transform:uppercase}
.v-users select{padding:6px 8px;font-size:13.5px}

/* ---------- Verwaltung ---------- */
.v-nav{display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:0;z-index:5;padding:8px 0;background:linear-gradient(var(--bg) 70%,transparent)}
.v-nav a{font:500 16px/1 var(--display);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;color:var(--hud);padding:7px 10px 5px;border:1px solid var(--hud-dim);background:rgba(0,0,0,.35)}
.v-nav a:hover{background:var(--brand);color:#fff}
.v-list{margin:0;padding-left:22px;display:grid;gap:6px;font:12px var(--mono);color:var(--muted)}
.v-list li>*{vertical-align:middle}
.v-list li{display:list-item}
.v-list input[type=text]{width:min(420px,60%);padding:7px 9px;margin-right:6px}
.v-list select{padding:7px 8px;margin-right:6px}
.v-tools{display:inline-flex;gap:4px}
.v-group{border:1px solid var(--line);padding:10px 12px;display:grid;gap:8px}
.v-group legend input{font:600 18px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:5px 8px}
#v-geko .v-list input[type=text]{width:min(300px,40%)}

/* ---------- Führung (Tages-Cockpit) ---------- */
.fk-tasks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fk-tasks li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--accent);background:rgba(0,0,0,.25)}
.fk-ic{font-size:22px;text-align:center}
.fk-tasks b{font:600 18px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.fk-tasks p{font-size:14px;margin-top:3px}
.fk-clear{padding:12px;border:1px solid #5fbf7f;color:#5fbf7f;background:rgba(95,191,127,.08)}
.fk-table{width:100%;border-collapse:collapse;font-size:14px;min-width:860px}
.fk-table th{text-align:left;font:11px var(--mono);text-transform:uppercase;color:var(--hud);padding:8px 6px;border-bottom:1px solid var(--line)}
.fk-table td{padding:7px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.fk-table tr.off td{opacity:.45}
.fk-table .ok{color:#5fbf7f}
.fk-mini{display:inline-block;width:60px;height:8px;background:var(--track);vertical-align:middle;position:relative;border:1px solid var(--line)}
.fk-mini i{position:absolute;left:0;top:0;bottom:0;background:var(--hud)}

/* ---------- Das Eine ---------- */
.eine-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
@media (max-width:640px){.eine-top{grid-template-columns:auto 1fr}.eine-count{grid-column:1/-1}}
.eine-ring{width:120px;height:120px}
.eine-ring circle{fill:none;stroke-width:10}
.eine-ring .bg{stroke:var(--track)}
.eine-ring .fg{stroke:var(--hud);filter:drop-shadow(0 0 6px var(--hud-dim));transition:stroke-dasharray .8s}
.eine-ring text{fill:var(--ink);font:500 26px var(--display)}
.eine-ring text.sm{font:10px var(--mono);fill:var(--muted);text-transform:uppercase}
.eine-main h2{font-size:clamp(28px,5vw,40px);margin:4px 0}
.eine-num b{font:500 22px var(--display);color:var(--hud)}
.eine-track.ok{color:#5fbf7f}.eine-track.miss{color:var(--warn)}
.eine-count{text-align:center;padding:10px 16px;border:1px solid var(--line);background:rgba(0,0,0,.3)}
.eine-count b{display:block;font:700 48px/1 var(--display);color:var(--accent)}
.eine-count span{font:11px var(--mono);text-transform:uppercase;color:var(--muted)}
.eine-bars{display:grid;gap:6px}
.eine-bars>div{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px}
.eine-bars small{font:11px var(--mono);text-transform:uppercase;color:var(--muted)}
.eine-bars .mpl-bar{width:100%}
.eine-why,.eine-week{font-size:14.5px}
.eine-week b{color:var(--accent)}
.eine-ms span{display:grid}
.eine-ms.done b{text-decoration:line-through;opacity:.7}
.eine-arch{margin:0;padding-left:18px;display:grid;gap:4px}
.eine-form{display:grid;gap:12px}

/* ---------- Challenges ---------- */
.ch.live{border-color:var(--hud-dim)}
.ch.done{opacity:.85}
.ch-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ch-head h2{font-size:34px;margin:4px 0}
.ch.live .eyebrow{color:#5fbf7f}
.ch-prize{display:grid;justify-items:center;gap:4px;text-align:center}
.ch-prize small{font:11px var(--mono);color:var(--muted)}
.ch-me{font:600 16px/1 var(--display);color:var(--accent);text-transform:uppercase}
.ch-board{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.ch-board li{display:grid;grid-template-columns:34px minmax(0,200px) minmax(0,1fr) 80px;gap:10px;align-items:center;padding:5px 8px;background:rgba(0,0,0,.25)}
.ch-board li.me{outline:1px solid var(--hud-dim)}
.ch-board li.win{background:rgba(255,215,106,.1)}
.ch-pos{font:500 20px/1 var(--display);text-align:center;color:var(--muted)}
.ch-bar{height:10px;background:var(--track);position:relative;border:1px solid var(--line)}
.ch-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--brand),var(--hud))}
.ch-v{font:500 20px/1 var(--display);text-align:right}
.ch-pts{width:80px;padding:5px 8px;text-align:right}
.ch-form{display:grid;gap:10px;border:1px solid var(--line);padding:12px}
.ch-admin{border-top:1px solid var(--line);padding-top:10px}
@media (max-width:560px){.ch-board li{grid-template-columns:28px minmax(0,1fr) 64px}.ch-bar{display:none}}

/* ---------- Stille Stunde anpassen ---------- */
.st-cfg ol{margin:0 0 8px;padding-left:22px;display:grid;gap:6px}
.st-cfg li{display:flex;gap:6px}
.st-cfg input{flex:1}
.mpl.qpl td.qm,.mpl.qpl th.qm{background:rgba(91,155,230,.05);min-width:56px}
.mpl.qpl td.soll output{font-family:var(--mono)}

/* ---------- Größer: QPL & MPL ---------- */
.mpl{font-size:15px}
.mpl td input{width:76px;padding:7px 8px;font-size:15px}
.mpl th.name{font-size:15px;min-width:190px}
.mpl thead th{font-size:12px}
.mpl.qpl td,.mpl.qpl th{padding:7px 9px}
.mpl.qpl td input{width:86px;font-size:16px}
.mpl.qpl td.ist,.mpl.qpl td.qm{font:500 16px var(--mono)}
.mpl thead tr.pin th,.mpl thead tr.pin td{top:58px}

/* ---------- Leben: Balken wachsen beim Öffnen ---------- */
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mpl-bar i,.fk-mini i,.ch-bar i,.rl-track i,.progress span,.lb-bar i,.tp-cell.full{transform-origin:left;animation:growX .9s cubic-bezier(.2,.8,.2,1) both}
.tile,.lobby-row,.trophy{transition:transform .15s ease,box-shadow .15s}
.tile:hover,.lobby-row:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.mpl-bar i,.fk-mini i,.ch-bar i,.rl-track i,.progress span,.lb-bar i,.tp-cell.full{animation:none}}

/* ---------- Feier-Pop-up ---------- */
.cele-dlg{width:min(420px,calc(100vw - 24px));padding:0;border:1px solid var(--pc);text-align:center;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--pc) 30%,transparent),transparent 62%),var(--glass)}
.cele-dlg::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(3px)}
.cele{display:grid;justify-items:center;gap:10px;padding:24px 20px 20px}
.cele-art{position:relative;display:grid;place-items:center;width:200px;height:170px}
.cele-art>*{grid-area:1/1}
.cele-dlg .rv-rays{opacity:.9;animation:spin 14s linear infinite}
.cele-emoji{font-size:84px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));transform:scale(.2);opacity:0}
.cele-bits{position:absolute;inset:50% auto auto 50%;width:0;height:0}
.cele-bits i{position:absolute;width:9px;height:14px;left:-4px;top:-7px;background:var(--c);border-radius:2px;opacity:0}
.cele-dlg.go .cele-emoji{animation:insIn .8s cubic-bezier(.2,1.6,.4,1) .1s both}
.cele-dlg.go .cele-bits i{animation:confetti var(--t) cubic-bezier(.15,.8,.3,1) .15s forwards}
.cele-dlg.go .rv-name,.cele-dlg.go .rv-desc,.cele-dlg.go .btn{animation:slideIn .5s .35s ease-out both}
.cele-dlg .rv-name,.cele-dlg .rv-desc{opacity:1;transform:none}
.cele-dlg.big .cele-emoji{font-size:110px}
@keyframes confetti{0%{opacity:1;transform:rotate(var(--a)) translateX(0) rotate(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) translateY(60px) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.cele-dlg .cele-emoji{opacity:1;transform:none;animation:none}.cele-bits{display:none}}

/* Lobby-Ranglisten */
.lb-tabs{display:flex;flex-wrap:wrap;gap:8px}
.lobby-row.rk{grid-template-columns:34px 44px 40px minmax(0,1fr) auto 120px}
.lb-vals{display:flex;gap:12px}
.lb-vals span{display:grid;justify-items:end;font:500 17px/1 var(--display);color:var(--muted)}
.lb-vals span small{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.lb-vals span em{font:normal 10px var(--mono);margin-left:2px}
.lb-vals span.on{color:var(--hud);font-size:24px}
.lb-bar{height:10px;background:var(--track);position:relative;border:1px solid var(--line)}
.lb-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--brand),var(--hud))}
.lobby-row.rk .lr-pos{font-size:18px}
@media (max-width:760px){.lobby-row.rk{grid-template-columns:28px 40px minmax(0,1fr) auto}.lobby-row.rk .lr-lvl,.lobby-row.rk .lb-bar{display:none}.lb-vals span:not(.on){display:none}}
.eine-pick{display:flex;justify-content:flex-end}
.eine-pick select{padding:7px 10px;font-size:14px}
.lb-bar.full i{background:linear-gradient(90deg,#5fbf7f,#ffd76a)}

/* Planung: Unter-Reiter */
.plan-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.plan-tabs button{all:unset;cursor:pointer;display:grid;gap:2px;padding:10px 14px 8px;border:1px solid var(--line);background:rgba(0,0,0,.3);text-align:center}
.plan-tabs b{font:600 26px/1 var(--display);letter-spacing:.06em}
.plan-tabs span{font:11px var(--mono);text-transform:uppercase;color:var(--muted)}
.plan-tabs button[aria-selected="true"]{background:var(--brand);border-color:var(--hud);box-shadow:0 0 18px var(--hud-dim)}
.plan-tabs button[aria-selected="true"] span{color:#cfe0f7}
.plan-tabs button:focus-visible{outline:2px solid var(--hud)}

/* WPL */
.wpl h3{margin-top:6px}
.wpl-todos{border:1px solid var(--hud-dim);background:rgba(91,155,230,.06);padding:12px 14px;display:grid;gap:6px}
.wpl-todo{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:15px}
.wpl-todo input{width:20px;height:20px;accent-color:var(--hud)}
.wpl-todo.done span{text-decoration:line-through;opacity:.6}
.wpl-add input[type=text]{flex:1 1 240px}
.wpl-add input[type=date]{color-scheme:dark}
.wpl-prev{font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wpl-themen{display:grid;gap:10px}
.wpl-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:760px){.wpl-3{grid-template-columns:1fr}}
.wpl-ro{margin:0;padding:8px 10px;border:1px dashed var(--line);min-height:38px;white-space:pre-wrap;color:var(--ink)}
.wpl-q{font:600 20px/1.2 var(--display);color:var(--accent)}
.ch-join{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0}
.fk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.fk-card{border:1px solid var(--line);background:rgba(0,0,0,.25);padding:10px 12px;display:grid;gap:6px;align-content:start;font-size:13.5px}
.fk-card.empty{opacity:.6}
.fk-card header{border-bottom:1px solid var(--line);padding-bottom:6px}
.fk-card h4{font:500 11px/1.2 var(--mono);text-transform:uppercase;color:var(--hud);margin-top:4px}
.fk-card ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.fk-card ul ul{margin:2px 0 2px 14px}
.fk-card .ok{color:#5fbf7f;font-weight:700}.fk-card .miss{color:var(--warn);font-weight:700}
.fk-note{white-space:pre-wrap;border-left:2px solid var(--accent);padding-left:8px;margin:0}
.ci-week{display:grid;justify-items:end;min-width:96px;line-height:1.05}
.ci-week small{font:10px var(--mono);text-transform:uppercase;color:var(--muted)}
.ci-week b{font:500 22px/1 var(--display);color:var(--hud)}
.ci-carry{border:1px solid var(--accent);background:var(--accent-soft);padding:10px 12px;display:grid;gap:6px}
.ci-carry b{font:600 18px/1 var(--display);text-transform:uppercase}
.ci-carry-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.gk-carry{margin:0 0 6px;font-size:13px;color:var(--accent)}
.rl-pick-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.rl-pick-p select{padding:4px 6px;font-size:12.5px}
.rl-pick-p.pflicht{border-color:var(--hud);background:var(--navy-soft)}
.rl-pick-p.optional{border-color:var(--accent);background:var(--accent-soft)}
.rl-opt{opacity:.7;margin-left:8px;padding-left:8px;border-left:1px dashed var(--line)}

/* ---------- SC-Tapete neu ---------- */
.tp-pathwrap{grid-column:1/-1;overflow-x:auto}
.tp-path{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:4px;min-width:max-content}
.tp-path li{display:grid;justify-items:center;gap:2px;padding:8px 12px;min-width:96px;border:1px solid var(--line);background:rgba(0,0,0,.25);position:relative;opacity:.55}
.tp-path li:not(:last-child)::after{content:"›";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:18px;z-index:1}
.tp-path li b{font:600 18px/1 var(--display)}
.tp-path li small{font:10px var(--mono);color:var(--muted);text-align:center}
.tp-path li.done{opacity:.85;border-color:#5fbf7f}
.tp-path li.done b::after{content:" ✓";color:#5fbf7f}
.tp-path li.now{opacity:1;border-color:var(--hud);background:var(--brand);box-shadow:0 0 16px var(--hud-dim)}
.tp-path li.now small{color:#cfe0f7}
.tp-path li.next{opacity:1;border-color:var(--accent);border-style:dashed}
.tp-pot{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px}
.tp-pot-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:5px 8px;border:1px solid var(--line);background:rgba(0,0,0,.2)}
.tp-pot-row.on{border-color:#5fbf7f;background:rgba(95,191,127,.08)}
.tp-pot-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-pot-row .check input{accent-color:#5fbf7f}
.tp-kunden td b{font-weight:600}
.tp-pipe{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:8px;overflow-x:auto}
.tp-stage{border:1px solid var(--line);background:rgba(0,0,0,.25);padding:8px;display:grid;gap:5px;align-content:start;min-width:150px}
.tp-stage h4{font:600 16px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center;margin:0 0 4px}
.tp-stage:last-child{border-color:#5fbf7f}
.tp-pcard{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:6px 8px;background:var(--glass);border-left:3px solid var(--hud);font-size:14px}
.tp-pcard .pa-btn{width:24px;height:24px;font-size:12px}
.tp-pcard.struck{border-left-color:var(--warn);opacity:.6}
.tp-pcard.struck span:first-child{text-decoration:line-through}
.tp-pp-add{display:flex;gap:4px}
.tp-pp-add input{flex:1;min-width:0;padding:6px 8px}
.tp-struck summary{cursor:pointer;margin-top:6px}
.tp-sub{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--hud)}
.tp-reqp.opt{border-style:dashed}
small.real{display:block;font:11px/1.2 var(--body);color:var(--muted);text-transform:none;letter-spacing:0}
.rl-name small.real{display:inline;margin-left:4px}

/* ---------- Gesperrte Reiter ---------- */
.tabs a.locked{color:#4a5568;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px);position:relative}
.tabs a.locked::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:repeating-linear-gradient(90deg,#5d6775 0 6px,transparent 6px 9px);transform:rotate(-6deg);opacity:.7}
.tabs a.locked:hover{color:#6b7685}
.tabs a.locked[aria-selected="true"]{background:#1a2230;color:#8a94a3;box-shadow:none;border-bottom-color:#5d6775}
.tab-lock{font-style:normal;font-size:12px;margin-right:4px;filter:grayscale(1)}
.tabs a.opened{animation:tabOpen 1.6s ease-out 2}
@keyframes tabOpen{0%{box-shadow:0 0 0 0 rgba(255,215,106,.9);color:#ffd76a}60%{box-shadow:0 0 0 12px rgba(255,215,106,0)}100%{box-shadow:none}}
.locked-view{justify-items:center;text-align:center;padding:40px 20px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px),var(--glass)}
.lv-art{position:relative;width:140px;height:140px;display:grid;place-items:center}
.lv-art::before,.lv-art::after{content:"";position:absolute;width:180px;height:14px;background:repeating-linear-gradient(90deg,#7d8796 0 14px,transparent 14px 20px);border-radius:7px;opacity:.6}
.lv-art::before{transform:rotate(35deg)}.lv-art::after{transform:rotate(-35deg)}
.lv-ico{font-size:64px;position:relative;z-index:1;filter:drop-shadow(0 4px 8px #000)}
.locked-view h2{font-size:40px;color:#8a94a3}
.tile.locked{opacity:.45;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 8px,transparent 8px 16px),var(--glass)}
.pc-prof{padding:10px;display:grid;gap:10px}.pc-prof input[type=date]{color-scheme:dark}

/* ---------- Prüfungen (34d / 34f) ---------- */
.good{color:var(--ok)} .bad{color:var(--warn)}
.pr-term{display:grid;justify-items:end;gap:2px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--track)}
.pr-term small{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pr-term b{font:700 18px/1.1 var(--display,inherit)}
.pr-term span{font-size:12.5px;color:var(--hud)}
.pr-term.soon{border-color:var(--maybe)} .pr-term.soon span{color:var(--maybe)}
.pr-term.past span{color:var(--muted)}
.pr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pr-stats>div{background:var(--surface);padding:10px 12px;display:grid;gap:2px}
.pr-stats small{font-size:12px;color:var(--muted)} .pr-stats b{font-size:20px}
.pr-path{display:flex;align-items:center;gap:0;padding:8px 0;overflow-x:auto}
.pr-ms{display:grid;justify-items:center;gap:3px;min-width:96px;text-align:center}
.pr-ms small{font-size:12px;color:var(--muted)}
.pr-dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;border:2px solid var(--line);background:var(--track);color:var(--muted)}
.pr-ms.done .pr-dot{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok);box-shadow:0 0 14px color-mix(in srgb,var(--ok) 45%,transparent)}
.pr-ms.fail .pr-dot{border-color:var(--warn);color:var(--warn)}
.pr-line{flex:1;min-width:24px;height:3px;background:var(--line);border-radius:2px;margin-bottom:34px}
.pr-line.on{background:var(--ok)}
.pr-lead{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:10px;border:1px dashed var(--hud-dim);border-radius:10px}
.pr-lead .field{font-size:13.5px;color:var(--muted);display:grid;gap:6px}
.pr-themen{display:grid;gap:6px}
.pr-th{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.pr-th .bar{height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.pr-th .bar i{display:block;height:100%;background:var(--maybe);animation:growX .8s ease-out both;transform-origin:left}
.pr-th .bar i.good{background:var(--ok)} .pr-th .bar i.bad{background:var(--warn)}
.pr-th small{color:var(--muted);white-space:nowrap}
.pr-add{flex-wrap:wrap} .pr-add input{width:auto;flex:1 1 110px}
.pr-log{width:100%;border-collapse:collapse;font-size:13.5px}
.pr-log th,.pr-log td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.pr-log th{font:500 11px/1 var(--mono);text-transform:uppercase;color:var(--muted)}
@media (max-width:560px){.pr-th{grid-template-columns:1fr auto}.pr-th .bar{grid-column:1/-1;grid-row:2}}

/* ---------- PDF-Export ---------- */
@media print{
  @page{size:A4 landscape;margin:12mm}
  :root{--bg:#fff;--surface:#fff;--ink:#111;--muted:#555;--line:#ccc;--track:#f1f1f1;--hud:#003c7c;--navy:#003c7c}
  body{background:#fff!important;color:#111;font-size:11.5px}
  body::before{content:attr(data-print-title);display:block;font:700 16px/1.3 sans-serif;margin-bottom:8px;color:#003c7c}
  .topbar,.tabs,#tabs,.btn,button:not(.mpl-who):not(.pc-who),select,.daynav,form.inline,.toast,.celebrate,.no-print,.plan-tabs,.st-x{display:none!important}
  .panel{border:1px solid #ccc;box-shadow:none;break-inside:avoid;padding:10px}
  .mpl-wrap{overflow:visible!important;max-height:none!important}
  table{font-size:10px} input,textarea{border:none!important;background:none!important;color:#111!important;padding:0!important}
  *{animation:none!important;transition:none!important;text-shadow:none!important}
}
.wpl-ablauf{border:1px solid var(--hud-dim);background:var(--navy-soft);border-radius:10px;padding:10px 14px;font-size:13.5px}
.wpl-ablauf ol{margin:6px 0 0;padding-left:20px;display:grid;gap:3px}
.wpl-lock{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:6px;border-top:1px solid var(--line)}
/* Meilensteine (JC auf dem Weg T → SC) */
.tp-path li.ms{opacity:.75;transform:scale(.86)}
.tp-path li.ms small::after{content:" · Meilenstein";color:var(--maybe)}
.tp-ms{display:flex;flex-wrap:wrap;gap:8px}
.tp-ms span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px dashed var(--line);border-radius:999px;font-size:13px;color:var(--muted)}
.tp-ms span.on{border-style:solid;border-color:var(--ok);color:var(--ink)}
.tp-pct{color:var(--ok)} .tp-pct.soft{color:var(--hud)}
.rl-track{position:relative}
.rl-ms{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--maybe);font:600 9px/1 var(--mono);font-style:normal;color:var(--maybe)}
.rl-ms::after{content:attr(title);display:none}
.rl-ms{text-indent:4px;white-space:nowrap;padding-top:0}
.rl-ms.on{background:var(--ok);color:var(--ok)}
.rl-ev{width:110px;text-align:right;padding:4px 6px;font-size:13px}
/* Das Eine – Bild */
.eine-bild{position:relative;min-height:180px;border-radius:12px;background:center/cover no-repeat var(--track);display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:14px;overflow:hidden;animation:fadeIn .6s ease-out}
.eine-bild::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75))}
.eine-bild>*{position:relative}
.eine-bild span{font:700 20px/1.2 var(--display,inherit);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.eine-addimg{justify-self:start}
.eine-thumb{width:40px;height:28px;object-fit:cover;border-radius:4px;vertical-align:middle}
.eine-katb{font:500 12px/1 var(--mono);padding:4px 7px;border-radius:5px;background:var(--navy-soft);color:var(--hud);vertical-align:4px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ---------- Partneraufbau ---------- */
.pa-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:10px}
table.pa{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
table.pa th,table.pa td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;white-space:nowrap}
table.pa thead th{position:sticky;top:0;z-index:2;background:var(--track);font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 6px}
table.pa .pa-name{position:sticky;left:0;z-index:1;background:var(--surface);min-width:150px;border-left:3px solid var(--tc,transparent)}
table.pa thead .pa-name{z-index:3;background:var(--track)}
.pa-name span{display:block;font-weight:600}
.pa-stage{display:inline-block;font:500 10px/1 var(--mono);padding:2px 5px;border-radius:4px;background:var(--navy-soft);color:var(--hud)}
.pa-ber{color:var(--tc,var(--muted));font-weight:600}
.pa-fk{color:var(--muted)}
table.pa input,table.pa select,table.pa textarea{font-size:13px;padding:5px 6px;border-radius:6px}
table.pa textarea{resize:vertical;overflow:hidden;line-height:1.35;white-space:pre-wrap}
table.pa td.pa-over input{border-color:var(--warn);color:var(--warn)}
tr.pa-prio .pa-name span::after{content:" P!";color:var(--maybe);font-size:11px}
.pa-stats{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)} .pa-stats b{color:var(--ink);font-size:16px}
.pa-hold table.pa{opacity:.85}
.pa-add input{flex:1 1 180px}
.ch-metrics{display:flex;flex-wrap:wrap;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px}
.ch-mt{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.ch-mt input[type=number]{width:62px;padding:4px 6px}
.ch-parts{display:block;font:400 11px/1.2 var(--mono);color:var(--muted);white-space:nowrap}
/* MPL/QPL/JPL: Nur Teams, Bereiche einklappen, Position, Auswertung */
.mpl-collapse{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
table.mpl.teams-only:not(.ev-tab) tr.mpl-p{display:none}
table.mpl tr.coll-hide{display:none}
table.mpl tr[data-sumrow] th.name{cursor:pointer;user-select:none}
table.mpl tr[data-sumrow] th.name::before{content:"▾ ";color:var(--muted)}
table.mpl tr[data-sumrow].coll th.name::before{content:"▸ "}
.mpl-lv{font:600 10px/1 var(--mono);padding:2px 4px;border-radius:4px;background:var(--navy-soft);color:var(--hud);margin-left:4px;vertical-align:1px}
.mpl-eval{border-top:1px solid var(--line);padding-top:10px}
.mpl-eval summary{cursor:pointer;list-style:none} .mpl-eval summary h3{display:inline}
.mpl-eval summary::before{content:"▾ ";color:var(--muted)} .mpl-eval:not([open]) summary::before{content:"▸ "}
.ev-chart{display:flex;align-items:flex-end;gap:12px;height:190px;padding:10px 4px 0;overflow-x:auto}
.ev-col{flex:1 0 46px;display:grid;justify-items:center;gap:3px;height:100%;grid-template-rows:1fr auto auto}
.ev-bars{display:flex;align-items:flex-end;gap:3px;height:100%;width:100%;justify-content:center}
.ev-bars i{width:16px;border-radius:4px 4px 0 0;min-height:2px;transform-origin:bottom;animation:growY .8s ease-out both}
.ev-bars i.s{background:var(--line)} .ev-bars i.i{background:var(--hud)}
.ev-bars i.i.good{background:var(--ok)} .ev-bars i.i.mid{background:var(--maybe)} .ev-bars i.i.low{background:var(--warn)}
.ev-col b{font-size:12.5px} .ev-col small{font-size:11.5px;color:var(--muted)}
.ev-key{display:inline-block;width:12px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:4px}
.ev-key.s{background:var(--line)} .ev-key.i{background:var(--hud)}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ev-tab td{text-align:center}
/* Führung – neue Optik */
.fk-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.fk-hero-t{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,var(--navy-soft),transparent 70%);animation:fadeIn .5s ease-out both}
.fk-hero-t b{display:block;font:700 24px/1 var(--display);letter-spacing:.02em}
.fk-hero-t span{display:block;font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:4px}
.fk-hero-t small{display:block;font-size:12px;color:var(--hud)}
.fk-ring{width:54px;height:54px;flex:none}
.fk-ring circle{fill:none;stroke:var(--track);stroke-width:6}
.fk-ring circle.fg{stroke-linecap:round;transition:stroke-dasharray .9s ease-out}
.fk-tasks{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:10px}
.fk-tasks li{border-radius:12px;border-left-width:4px;background:linear-gradient(90deg,rgba(91,155,230,.08),rgba(0,0,0,.2));transition:transform .15s ease,border-color .15s ease}
.fk-tasks li:hover{transform:translateY(-2px);border-color:var(--hud)}
.fk-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--track);border:1px solid var(--line)}
.fk-tasks b{font-size:16px}
.fk-table{border-collapse:separate;border-spacing:0}
.fk-table tbody tr{transition:background .15s}
.fk-table tbody tr:hover td{background:var(--navy-soft)}
.fk-table td:first-child,.fk-table th:first-child{position:sticky;left:0;background:var(--surface);z-index:1}
.fk-card{border-radius:12px;transition:border-color .15s}
.fk-card:hover{border-color:var(--hud-dim)}
/* Logo „Call of Business – Modern Dealfare“ */
.cob-logo{display:inline-grid;justify-items:center;line-height:.9;text-transform:uppercase;font-family:var(--display)}
.cob-logo small{font:600 13px/1 var(--display);letter-spacing:.42em;color:#dfe8f5;margin-right:-.42em}
.brand h1.cob-logo{font:700 32px/.9 var(--display);letter-spacing:.06em}
.brand h1.cob-logo span{color:var(--hud);text-shadow:0 0 16px var(--hud-dim)}
.brand::before{display:none}
.auth .cob-logo{font:700 64px/.9 var(--display);color:var(--hud);text-shadow:0 0 22px var(--hud-dim);letter-spacing:.05em;margin:6px 0 10px}
.auth .cob-logo small{font-size:20px}
.auth .cob-logo em{font:600 16px/1.6 var(--display);font-style:normal;letter-spacing:.3em;color:#e8c547;border-top:2px solid #e8c547;margin-top:6px;padding-top:4px;text-shadow:none}
p.invite-code{font:600 34px/1.2 var(--mono);letter-spacing:.06em;color:#fff;text-align:center;padding:12px;border:1px solid var(--hud);background:var(--brand);box-shadow:0 0 14px var(--hud-dim);user-select:all;word-break:break-all}
#pwforce-form .lnk{justify-self:center}

/* =====================================================================
   Bewegung: animierter Hintergrund (fx.js) und Übergänge
   ===================================================================== */
#fx-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
#app,#auth{position:relative;z-index:1}
.toast,dialog{z-index:60}

/* Reiterwechsel: Panels gleiten nacheinander herein, kurzer Glitch */
@keyframes panelIn{0%{opacity:0;transform:translateY(18px) scale(.985);filter:blur(3px)}60%{filter:none}100%{opacity:1;transform:none}}
@keyframes viewGlitch{0%{clip-path:inset(0 0 0 0);transform:none}20%{clip-path:inset(12% 0 60% 0);transform:translateX(-6px)}40%{clip-path:inset(55% 0 20% 0);transform:translateX(5px)}60%{clip-path:inset(30% 0 40% 0);transform:translateX(-3px)}100%{clip-path:inset(0 0 0 0);transform:none}}
#view.view-in{animation:viewGlitch .22s steps(2) 1}
#view.view-in .panel,#view.view-in .tile,#view.view-in .fk-hero-t{animation:panelIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}

/* Panels leben: leichtes Leuchten beim Drüberfahren, Ecken pulsieren dezent */
.panel{transition:border-color .25s ease,box-shadow .25s ease}
.panel:hover{border-color:var(--hud-dim);box-shadow:0 0 0 1px rgba(91,155,230,.08),0 10px 40px -20px rgba(91,155,230,.45)}

/* Knöpfe: Lichtkante wischt beim Drüberfahren durch */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .55s ease;pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px)}

/* Reiter: Hover hebt an, aktiver Reiter bekommt wandernden Lichtstreifen */
.tabs a{transition:color .2s ease,transform .2s ease,text-shadow .2s ease}
.tabs a:hover:not(.locked){color:#fff;transform:translateY(-1px);text-shadow:0 0 12px rgba(91,155,230,.7)}
.tabs a[aria-selected="true"]{position:relative;overflow:hidden}
.tabs a[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,#fff,transparent);background-size:50% 100%;background-repeat:no-repeat;animation:tabSweep 2.8s ease-in-out infinite}
@keyframes tabSweep{0%{background-position:-60% 0}100%{background-position:160% 0}}

/* Logo: Glanz läuft regelmäßig über „BUSINESS“ */
.cob-logo span,.auth .cob-logo{background:linear-gradient(100deg,var(--hud) 40%,#e6f0ff 50%,var(--hud) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:logoSheen 6s ease-in-out infinite}
.auth .cob-logo small,.auth .cob-logo em{-webkit-text-fill-color:initial}
.auth .cob-logo small{color:#dfe8f5}.auth .cob-logo em{color:#e8c547}
@keyframes logoSheen{0%,70%{background-position:100% 0}100%{background-position:-60% 0}}

/* Anmeldung: Karte schwebt herein, Glas-Effekt über dem animierten Hintergrund */
.auth-card{background:rgba(11,18,28,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:panelIn .7s cubic-bezier(.2,.8,.2,1) both}
.auth .cob-logo{animation:logoSheen 6s ease-in-out infinite,logoDrop .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes logoDrop{0%{opacity:0;letter-spacing:.4em;filter:blur(6px)}100%{opacity:1;filter:none}}

/* Kacheln der Übersicht kippen leicht zum Zeiger */
.tile{transition:transform .25s ease,box-shadow .25s ease}
.tile:hover:not(.locked){transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(91,155,230,.6)}

/* Kopfleiste: Effekte-/App-Knöpfe */
#fx-toggle[aria-pressed="false"]{opacity:.55}

@media (prefers-reduced-motion:reduce){
  #view.view-in,#view.view-in .panel,#view.view-in .tile,#view.view-in .fk-hero-t,.auth-card,.auth .cob-logo,.cob-logo span,.tabs a[aria-selected="true"]::after{animation:none!important}
  .btn::after{display:none}
}
/* Web-App im Vollbild: Platz für Notch und Home-Leiste */
html.standalone .wrap{padding-top:max(env(safe-area-inset-top),8px);padding-bottom:env(safe-area-inset-bottom)}
html.standalone body{overscroll-behavior-y:none}
.ios-steps{display:grid;gap:10px;padding-left:22px;font-size:15px}
/* Hintergrund schimmert durch die Panels */
.panel{background-color:rgba(11,18,28,.86)}
.panel .panel{background-color:rgba(11,18,28,.6)}

/* ---------- Organigramm (Verwaltung → Struktur), Drag & Drop ---------- */
.oc-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.oc-legend{display:flex;flex-wrap:wrap;gap:12px;font:500 12px/1 var(--mono);color:var(--muted)}
.oc-legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:5px;vertical-align:-2px}
.oc-scroll{overflow:auto;padding:8px 4px 16px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.25);max-height:75vh}
.oc-drop-root{visibility:hidden;margin:0 auto 10px;max-width:420px;padding:10px;text-align:center;border:2px dashed var(--hud-dim);border-radius:8px;color:var(--hud);font:500 13px var(--mono)}
.oc-is-dragging .oc-drop-root{visibility:visible}
.oc{width:max-content;min-width:100%;padding:6px 10px}
.oc ul{display:flex;justify-content:center;margin:0;padding:22px 0 0;position:relative;list-style:none}
.oc>ul{padding-top:0}
.oc li{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px 7px 0}
.oc>ul>li{padding-top:0}
/* Verbindungslinien wie im Excel-Organigramm */
.oc li::before,.oc li::after{content:"";position:absolute;top:0;width:50%;height:22px;border-top:2px solid #4b6a8f}
.oc li::before{right:50%}.oc li::after{left:50%;border-left:2px solid #4b6a8f}
.oc li:only-child::before,.oc li:only-child::after{border-top:0}
.oc li:first-child::before,.oc li:last-child::after{border-top:0}
.oc li:last-child::before{border-right:2px solid #4b6a8f;border-radius:0 4px 0 0}
.oc li:first-child::after{border-radius:4px 0 0 0}
.oc li:only-child::after{border-radius:0}
.oc ul ul::before{content:"";position:absolute;top:0;left:50%;height:22px;border-left:2px solid #4b6a8f}
.oc>ul>li::before,.oc>ul>li::after{display:none}
/* unterste Ebene: Liste untereinander mit seitlicher Linie */
.oc ul.oc-stack{flex-direction:column;align-items:flex-start;padding:10px 0 0 18px;gap:8px}
.oc ul.oc-stack::before{left:6px;height:calc(100% - 26px);top:0}
.oc ul.oc-stack>li{padding:0;align-items:flex-start}
.oc ul.oc-stack>li::before{display:block;content:"";position:absolute;left:-12px;top:50%;width:12px;height:0;border-top:2px solid #4b6a8f;border-right:0;border-radius:0}
.oc ul.oc-stack>li::after{display:none}
.oc-card{position:relative;min-width:118px;padding:10px 14px 8px;background:var(--lc);color:#fff;text-align:center;cursor:grab;user-select:none;-webkit-user-select:none;
  border-top:4px solid var(--tc,rgba(255,255,255,.3));box-shadow:0 6px 16px -8px rgba(0,0,0,.8);transition:transform .15s ease,box-shadow .15s ease,outline-color .15s}
.oc-card b{display:block;font:600 22px/1 var(--display);letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.oc-card small{display:block;font:500 11px/1.4 var(--mono);opacity:.85}
.oc-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,0,0,.9),0 0 0 2px rgba(255,255,255,.35)}
.oc-card:focus-visible{outline:3px solid #fff;outline-offset:2px}
.oc-add{position:absolute;right:-9px;top:-9px;width:22px;height:22px;border-radius:50%;border:1px solid var(--hud);background:var(--bg);color:var(--hud);font:700 15px/1 var(--body);cursor:pointer;opacity:0;transition:opacity .15s}
.oc-card:hover .oc-add,.oc-card:focus-within .oc-add{opacity:1}
@media (hover:none){.oc-add{opacity:1}}
.oc-dragging{opacity:.35}
.oc-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:.92;box-shadow:0 20px 40px -10px rgba(0,0,0,.9),0 0 0 2px #fff}
.oc-over{outline:3px solid #ffd76a;outline-offset:3px;transform:scale(1.06)}
.oc-bad{outline:3px solid var(--warn);outline-offset:3px;cursor:not-allowed}
.oc-drop-root.oc-over{background:rgba(255,215,106,.12);border-color:#ffd76a;outline:0;transform:none}
.oc-is-dragging .oc-card{cursor:grabbing}
/* Partnerliste: sortierbare Spalten, Überfälliges */
table.pa th.pa-sort{cursor:pointer;user-select:none;white-space:nowrap}
table.pa th.pa-sort i{font-style:normal;margin-left:4px;opacity:.45;font-size:10px}
table.pa th.pa-sort.on{color:#fff}table.pa th.pa-sort.on i{opacity:1;color:var(--hud)}
table.pa th.pa-sort:hover{color:#fff}
tr.pa-overdue td,tr.pa-overdue th{background:rgba(229,103,77,.09)!important}
tr.pa-overdue .pa-name{border-left-color:var(--warn)!important;box-shadow:inset 3px 0 0 var(--warn)}
.pa-late{display:inline-block;margin-top:3px;font:600 10.5px/1 var(--mono);font-style:normal;color:#fff;background:var(--warn);padding:3px 6px;border-radius:3px;animation:newPulse 1.6s ease-in-out infinite}
table.pa td.pa-over input{border-color:var(--warn)!important;color:#ffb3a6!important;background:rgba(229,103,77,.15)!important;font-weight:600}
.pa-late-btn{all:unset;cursor:pointer;color:var(--muted);font-size:13px}
.pa-late-btn b{color:var(--warn);font-size:16px}
.pa-late-btn.on{color:#fff;text-decoration:underline}
/* Drag & Drop (dnd.js) – Tapete-Pipeline */
.dnd-item{cursor:grab;user-select:none;-webkit-user-select:none}
.dnd-active .dnd-item{cursor:grabbing}
.dnd-dragging{opacity:.35}
.dnd-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;box-shadow:0 18px 36px -10px rgba(0,0,0,.9),0 0 0 2px #fff;background:var(--surface)}
.dnd-active [data-drop]{transition:background .15s,box-shadow .15s}
.dnd-active [data-drop]:not(.dnd-over){box-shadow:inset 0 0 0 1px var(--hud-dim)}
[data-drop].dnd-over{background:rgba(255,215,106,.10)!important;box-shadow:inset 0 0 0 2px #ffd76a!important}
.tp-stage{min-height:120px}
.tp-struck{margin-top:10px;padding:8px 10px;border:1px dashed rgba(229,103,77,.5);border-radius:8px;display:grid;gap:6px}
.tp-struck[data-drop].dnd-over{background:rgba(229,103,77,.12)!important;box-shadow:inset 0 0 0 2px var(--warn)!important}
.pc-has{gap:16px;flex-wrap:wrap}
td.pa-steps{white-space:nowrap}
td.pa-steps label{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-right:6px;font:500 10px/1 var(--mono);color:var(--muted)}
td.pa-steps input{width:17px;height:17px;accent-color:var(--ok)}
td.pa-steps input:checked+span{color:var(--ok)}
/* PDF je Reiter */
.view-tools{display:flex;justify-content:flex-end;margin:10px 0 -4px}
body.pdf-mode #fx-bg{display:none}
body.pdf-mode *,body.pdf-mode *::before,body.pdf-mode *::after{animation:none!important;transition:none!important}
body.pdf-mode #view .mpl-wrap,body.pdf-mode #view .pa-wrap,body.pdf-mode #view .scroll-x,body.pdf-mode #view .oc-scroll,body.pdf-mode #view .ch-board{overflow:visible!important;max-height:none!important}
body.pdf-mode #view table.pa .pa-name,body.pdf-mode #view table.pa thead th{position:static!important}
body.pdf-mode #view .btn,body.pdf-mode #view .st-x,body.pdf-mode #view .pa-btn,body.pdf-mode #view .oc-add{display:none!important}
body.pdf-mode #view,body.pdf-mode #view .wrap,body.pdf-mode #view .stack,body.pdf-mode #view .panel{max-width:none!important}
body.pdf-mode #view .wrap,body.pdf-mode #view .stack,body.pdf-mode #view>.panel,body.pdf-mode #view .stack>.panel,body.pdf-mode #view .wrap>.panel{width:max-content;min-width:100%}

/* MPL: rowspan-Zellen der Kopfzeile kleben mit der ersten Zeile; Σ-Zeilen deckend, damit nichts durchscheint */
.mpl tr.mpl-sum th,.mpl tr.mpl-sum td{background-clip:padding-box}
.mpl thead tr.pin th,.mpl thead tr.pin td{box-shadow:0 2px 0 var(--accent)}
.ev-range{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0}
.ev-range input[type=month]{width:auto}
.ev-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:6px 0}
.ev-sum>div{background:var(--surface);padding:8px 12px;display:grid;gap:2px}
.ev-sum small{font-size:12px;color:var(--muted)}.ev-sum b{font-size:20px}
.ev-sum b.amp-good{color:var(--ok)}.ev-sum b.amp-mid{color:var(--maybe)}.ev-sum b.amp-low{color:var(--warn)}
.ev-abs{display:block;font-size:10.5px;font-weight:400}
/* Organigramm: bei nur einer Person darunter eine gerade Linie ohne Knick */
.oc li:only-child::before{border:0!important}
.oc li:only-child::after{border-radius:0!important}
.rl-team{display:inline-block;margin-top:3px;font:500 10.5px/1 var(--mono);padding:2px 6px;border-radius:3px;border-left:3px solid var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);color:var(--ink)}
span.rl-name{display:inline-flex;align-items:center;gap:6px}
/* SC-Tapete geschafft: „Mission erfüllt“ (MW2-Missionsende) */
.tp-done{position:relative;overflow:hidden;min-height:440px;display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;
  background:radial-gradient(ellipse at 50% 40%,rgba(91,155,230,.18),transparent 60%),rgba(5,9,15,.92)}
.tp-done-scan{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0,rgba(91,155,230,.14) 50%,transparent 100%);height:30%;animation:doneScan 3.2s linear infinite;pointer-events:none}
@keyframes doneScan{from{transform:translateY(-120%)}to{transform:translateY(420%)}}
.tp-done-k{font:500 13px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);animation:fadeIn .6s .1s both}
.tp-done-ins{filter:drop-shadow(0 0 22px rgba(232,197,71,.55));animation:insIn .7s .3s cubic-bezier(.2,.8,.2,1) both}
.tp-done-t{position:relative;margin:4px 0 0;font:700 clamp(48px,9vw,96px)/.95 var(--display);letter-spacing:.08em;color:#f2f5f9;text-shadow:0 0 30px rgba(91,155,230,.8);animation:doneSlam .55s .6s cubic-bezier(.2,.9,.3,1.2) both}
.tp-done-t::before,.tp-done-t::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;animation:doneGlitch 4s 1.2s infinite}
.tp-done-t::before{color:rgba(255,50,50,.7);transform:translateX(-3px)}
.tp-done-t::after{color:rgba(50,150,255,.7);transform:translateX(3px)}
@keyframes doneSlam{0%{opacity:0;transform:scale(1.6);letter-spacing:.4em;filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes doneGlitch{0%,92%,100%{clip-path:inset(0 0 100% 0)}93%{clip-path:inset(20% 0 55% 0);transform:translateX(-6px)}95%{clip-path:inset(60% 0 15% 0);transform:translateX(5px)}97%{clip-path:inset(40% 0 40% 0)}}
.tp-done-s{font:600 22px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#e8c547;animation:fadeIn .6s 1.1s both}
.tp-done-w{margin-top:18px;font:500 16px/1 var(--mono);letter-spacing:.08em;color:var(--hud);animation:fadeIn .6s 1.6s both}
.tp-cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tp-done *,.tp-done-t::before,.tp-done-t::after{animation:none!important}}
/* Das Eine: frei wählbare Meilensteine */
#ms-list{display:grid;gap:8px;margin-bottom:8px}
.eine-msrow{display:grid;grid-template-columns:28px minmax(0,1fr) 150px auto auto;gap:8px;align-items:center}
.eine-msn{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy-soft);color:var(--hud);font:600 13px/1 var(--mono)}
.eine-msrow[data-done="1"] .eine-msn{background:var(--ok);color:#05090f}
@media (max-width:560px){.eine-msrow{grid-template-columns:26px 1fr auto auto}.eine-msrow .ms-d{grid-column:2/3;grid-row:2}}
/* Auswertung: Kennzahlen mit Trend zum Vorzeitraum */
.ev-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:10px 0}
.ev-kpis>div{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.25)}
.ev-kpis small{font-size:12px;color:var(--muted)}
.ev-kpis b{font:700 24px/1.1 var(--display);letter-spacing:.02em}
.ev-tr{font:600 13px/1 var(--mono);white-space:nowrap}
.ev-tr small{font-weight:400;font-size:11px}
.ev-tr.up{color:var(--ok)}.ev-tr.down{color:var(--warn)}.ev-tr.eq{color:var(--maybe)}.ev-tr.none{color:var(--muted)}
.ev-sparten th,.ev-sparten td{white-space:nowrap}
/* SC-Tapete: Ladebalken (MW-Erfahrungsleiste) statt Positionsreihe */
.tp-xp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:6px}
.tp-xp-end{display:grid;justify-items:center;gap:2px;font:600 15px/1 var(--display);letter-spacing:.06em}
.tp-xp-end.next{opacity:.85;filter:drop-shadow(0 0 8px rgba(232,197,71,.45))}
.tp-xp-track{position:relative;height:30px;border:1px solid var(--hud-dim);background:rgba(0,0,0,.45);overflow:visible;border-radius:3px;margin-top:14px}
.tp-xp-abg{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#2f6fc0,#5b9be6);box-shadow:0 0 16px rgba(91,155,230,.6);transform-origin:left;animation:growX 1.2s cubic-bezier(.2,.8,.2,1) both}
.tp-xp-abg::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:200% 100%;animation:xpShine 2.6s linear infinite}
@keyframes xpShine{from{background-position:200% 0}to{background-position:-100% 0}}
.tp-xp-eing{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(91,155,230,.35) 0 6px,transparent 6px 12px);animation:fadeIn 1s .9s both}
.tp-xp-tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.12)}
.tp-xp-ms{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1px;background:var(--maybe);box-shadow:0 0 8px rgba(232,197,71,.8)}
.tp-xp-ms em{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font:600 10px/1 var(--mono);font-style:normal;color:var(--maybe)}
.tp-xp-ms.on{background:var(--ok);box-shadow:0 0 8px rgba(95,191,127,.8)}.tp-xp-ms.on em{color:var(--ok)}
.tp-xp-pct{position:absolute;inset:0;display:grid;place-items:center;font:700 15px/1 var(--display);letter-spacing:.08em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.tp-xp-info{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);margin:4px 0 0}
.tp-xp-info b{color:var(--ink)}
.tp-pathwrap{overflow:visible;padding-top:14px}
/* Raster-Kästchen: Beträge (auch „Mio“) immer mittig */
.tp-cell{text-align:center;line-height:1.1;padding:0 2px;font-size:11.5px;white-space:normal}

/* =====================================================================
   Hochfahren (boot.js) – Militärcomputer im MW2-/Black-Ops-Stil
   ===================================================================== */
.boot{position:fixed;inset:0;z-index:200;background:#020407;color:#5b9be6;overflow:hidden;cursor:pointer;
  font-family:var(--mono);animation:crtOn .5s ease-out both}
.boot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);pointer-events:none;z-index:3}
.boot::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.85));pointer-events:none;z-index:3}
.boot-crt{position:absolute;left:0;right:0;top:50%;height:2px;background:#cfe3ff;box-shadow:0 0 30px 8px rgba(91,155,230,.8);animation:crtLine .45s ease-out both;z-index:4}
@keyframes crtOn{0%{filter:brightness(4) saturate(0)}100%{filter:none}}
@keyframes crtLine{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1) scaleY(400);opacity:0}}
.boot-hud{position:absolute;font-size:12px;letter-spacing:.18em;color:rgba(91,155,230,.65);z-index:2}
.boot-hud.tl{top:18px;left:22px}.boot-hud.tr{top:18px;right:22px}.boot-hud.bl{bottom:18px;left:22px}.boot-hud.br{bottom:18px;right:22px;animation:blink 1.2s steps(1) infinite}
.boot-main{position:absolute;inset:60px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.boot-log{height:min(70vh,520px);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;font-size:13px;color:#8fb3d9;mask-image:linear-gradient(transparent,#000 30%)}
.boot-line{display:flex;justify-content:space-between;gap:16px;animation:lineIn .15s ease-out both;white-space:nowrap}
.boot-line span{overflow:hidden;text-overflow:ellipsis}
.boot-line b{color:#5fbf7f;font-weight:400}
.boot-line.hl{color:#fff;letter-spacing:.06em}
@keyframes lineIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.boot-center{display:grid;justify-items:center;gap:14px}
.boot-emb{width:min(36vw,260px);height:auto;color:#5b9be6;filter:drop-shadow(0 0 18px rgba(91,155,230,.55));animation:embIn .9s .25s cubic-bezier(.2,.9,.3,1.2) both}
.boot-ring{transform-origin:100px 100px}
.boot-ring.r1{animation:spin 9s linear infinite}
.boot-ring.r2{animation:spin 6s linear infinite reverse}
.boot-ring.r3{animation:spin 14s linear infinite}
.boot-hex{transform-origin:100px 100px;animation:hexSpin 1.4s .3s cubic-bezier(.2,.8,.2,1) both}
.boot-cob{font:700 46px var(--display),sans-serif;fill:#fff}
@keyframes embIn{0%{opacity:0;transform:scale(.4) rotate(-90deg)}100%{opacity:1;transform:none}}
@keyframes hexSpin{0%{transform:rotateY(0) rotate(-180deg) scale(.5)}100%{transform:none}}
.boot-title{display:grid;justify-items:center;line-height:.9;color:#5b9be6;font:700 54px/.9 var(--display);letter-spacing:.06em;text-shadow:0 0 24px rgba(91,155,230,.7);animation:fadeIn .6s .6s both}
.boot-title small{font:600 16px/1 var(--display);letter-spacing:.45em;color:#dfe8f5;margin-right:-.45em}
.boot-title em{font:600 14px/1.8 var(--display);font-style:normal;letter-spacing:.35em;color:#e8c547;text-shadow:none}
.boot-bar{width:min(36vw,320px);height:6px;border:1px solid rgba(91,155,230,.5);background:rgba(0,0,0,.6)}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f6fc0,#9cc7ff);box-shadow:0 0 12px #5b9be6;transition:width .18s linear}
.boot-pct{font-size:12px;letter-spacing:.2em;color:#9cc7ff}
.boot-granted{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;z-index:5;pointer-events:none;opacity:0}
.boot.granted .boot-granted{animation:granted .9s cubic-bezier(.2,.9,.3,1.2) both}
.boot.granted .boot-main{animation:mainOut .4s ease-in both}
.boot-granted span{position:relative;font:700 clamp(44px,8vw,92px)/1 var(--display);letter-spacing:.1em;color:#5fbf7f;text-shadow:0 0 30px rgba(95,191,127,.8)}
.boot-granted span::before,.boot-granted span::after{content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen}
.boot-granted span::before{color:rgba(255,60,60,.7);animation:gl1 .9s steps(2) infinite}
.boot-granted span::after{color:rgba(60,150,255,.7);animation:gl2 .9s steps(2) infinite}
.boot-granted small{font:500 14px/1 var(--mono);letter-spacing:.3em;color:#dfe8f5}
@keyframes granted{0%{opacity:0;transform:scale(1.6);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes mainOut{to{opacity:.12;filter:blur(3px)}}
@keyframes gl1{0%{clip-path:inset(10% 0 70% 0);transform:translate(-4px)}50%{clip-path:inset(60% 0 10% 0);transform:translate(3px)}100%{clip-path:inset(40% 0 40% 0);transform:translate(-2px)}}
@keyframes gl2{0%{clip-path:inset(70% 0 5% 0);transform:translate(4px)}50%{clip-path:inset(15% 0 60% 0);transform:translate(-3px)}100%{clip-path:inset(30% 0 50% 0);transform:translate(2px)}}
.boot.off{animation:crtOff .45s ease-in both}
@keyframes crtOff{0%{transform:none;filter:none}50%{transform:scaleY(.01);filter:brightness(3)}100%{transform:scale(0,.01);filter:brightness(5);opacity:0}}
@media (max-width:720px){.boot-main{grid-template-columns:1fr;inset:50px 16px}.boot-log{order:2;height:30vh}.boot-emb{width:46vw}.boot-title{font-size:40px}}

/* Reiterwechsel: Lichtband mit Reitername fegt quer durch (Missions-Ladebildschirm) */
.tab-flash{position:fixed;left:0;right:0;top:38%;z-index:150;pointer-events:none;display:grid;justify-items:center;gap:4px;padding:14px 0;
  background:linear-gradient(90deg,transparent,rgba(0,60,124,.85) 20%,rgba(0,60,124,.85) 80%,transparent);border-top:1px solid rgba(91,155,230,.7);border-bottom:1px solid rgba(91,155,230,.7);
  animation:flashBand .85s cubic-bezier(.2,.8,.2,1) both}
.tab-flash span{font:700 34px/1 var(--display);letter-spacing:.2em;color:#fff;text-shadow:0 0 18px rgba(91,155,230,.9)}
.tab-flash small{font:500 11px/1 var(--mono);letter-spacing:.3em;color:#9cc7ff}
@keyframes flashBand{0%{opacity:0;transform:scaleY(0) translateX(-30%)}20%{opacity:1;transform:scaleY(1) translateX(0)}70%{opacity:1;transform:none}100%{opacity:0;transform:translateX(25%) scaleY(.6)}}

/* Panels: beim Hereinkommen läuft ein Scan-Strahl einmal hindurch */
.panel{position:relative}
#view.view-in .panel::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(91,155,230,.14) 80%,rgba(156,199,255,.45) 100%);animation:panelScan .9s calc(var(--i,0) * 55ms + .1s) ease-out both}
@keyframes panelScan{0%{transform:translateY(-100%);opacity:1}100%{transform:translateY(260%);opacity:0}}

/* Zielerfassung: Knöpfe und Kacheln bekommen beim Drüberfahren einrastende Ecken */
.btn:not(.ghost),.tile{--lock:#e8c547}
.tile:hover:not(.locked){outline:1px solid transparent;box-shadow:0 0 0 1px var(--hud-dim),0 14px 30px -18px rgba(91,155,230,.6),inset 0 0 0 1px rgba(232,197,71,.0)}
.tile::before{content:"";position:absolute;inset:-6px;pointer-events:none;opacity:0;transition:opacity .15s,inset .2s;
  background:linear-gradient(var(--lock),var(--lock)) top left/12px 2px no-repeat,linear-gradient(var(--lock),var(--lock)) top left/2px 12px no-repeat,
    linear-gradient(var(--lock),var(--lock)) top right/12px 2px no-repeat,linear-gradient(var(--lock),var(--lock)) top right/2px 12px no-repeat,
    linear-gradient(var(--lock),var(--lock)) bottom left/12px 2px no-repeat,linear-gradient(var(--lock),var(--lock)) bottom left/2px 12px no-repeat,
    linear-gradient(var(--lock),var(--lock)) bottom right/12px 2px no-repeat,linear-gradient(var(--lock),var(--lock)) bottom right/2px 12px no-repeat}
.tile{position:relative}
.tile:hover:not(.locked)::before{opacity:1;inset:-2px}

/* Meldungen im HUD-Stil: gleiten herein, mit Funk-Ping */
.toast{display:flex;align-items:center;gap:10px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);box-shadow:0 0 24px rgba(91,155,230,.5)}
.toast.in{animation:toastIn .35s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,30px) scaleX(.6)}100%{opacity:1;transform:translate(-50%,0)}}
.toast-ping{position:relative;width:10px;height:10px;border-radius:50%;background:#e8c547;flex:none}
.toast-ping::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #e8c547;animation:ping 1s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:1}100%{transform:scale(3.2);opacity:0}}

/* Logo oben: langsam rotierende Zielmarke dahinter */
.brand{position:relative}
.brand::after{content:"";position:absolute;left:-14px;top:50%;width:46px;height:46px;margin-top:-23px;border:2px dashed rgba(91,155,230,.45);border-radius:50%;animation:spin 12s linear infinite;pointer-events:none}

@media (prefers-reduced-motion:reduce){.tab-flash,#view.view-in .panel::after,.toast.in,.toast-ping::after,.brand::after{animation:none!important}.tab-flash{display:none}}