/* GEM-CI — gemeinsames Stylesheet für Gesamt-Dashboard und (generierte)
   Einzelprojekt-Dashboards. Farben/Schriften 1:1 aus den Prototypen. */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;700;800;900&family=Public+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
:root{
  --bg:#000000; --panel:#0e120b; --panel2:#171d10; --line:#26301b;
  --text:#f2f5ee; --muted:#9aa891; --accent:#cefa05;
  --bad:#ff5a5a; --ok:#cefa05;
  /* §3b: genau drei Schriftfarben — gruen/rot/weiss. Offene/unsichere
     Zustaende sind WEISS (frueher orange), Soll-Balken dunkelgruen (frueher blau). */
  --warn:#f2f5ee;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Public Sans',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;padding:0 0 64px;font-size:15px}
.wrap{max-width:1800px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.head-font{font-family:'League Spartan','Public Sans',sans-serif}
header{border-bottom:1px solid var(--line);padding:26px 0 22px;margin-bottom:18px}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand-row{display:flex;align-items:center;gap:13px}
.brand-logo{height:30px;width:auto;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.brand{font-family:'League Spartan',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.01em;line-height:1}
.brand .rest{color:#fff} .brand .m{color:var(--accent)}
.backlink{color:var(--muted);text-decoration:none;font-size:13px;font-weight:700}
.backlink:hover{color:var(--accent)}
.eyebrow{font-family:'League Spartan',sans-serif;color:var(--accent);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-top:6px}
h1{font-family:'League Spartan',sans-serif;margin:4px 0 2px;font-size:29px;letter-spacing:-.01em;font-weight:800;text-transform:uppercase}
.sub{color:var(--text);font-size:14px;margin-bottom:14px}

/* Konsistenzcheck-Banner (§4.7 Gate) */
.consistency{border-radius:12px;padding:11px 14px;margin:0 0 16px;font-size:13px;border:1px solid var(--line)}
.consistency.ok{background:var(--panel);border-left:3px solid var(--accent)}
.consistency.err{background:rgba(255,90,90,.08);border-left:3px solid var(--bad)}
.consistency b{color:var(--text)}
.consistency ul{margin:6px 0 0;padding-left:18px}
.consistency li.warn{color:var(--warn)} .consistency li.error{color:var(--bad)}

/* Tabs / Controls */
.tabs{display:flex;gap:8px;margin:6px 0 16px}
.tabbtn{background:var(--panel);color:var(--text);border:1px solid var(--line);border-bottom:2px solid var(--line);border-radius:10px 10px 0 0;padding:10px 18px;font-family:'League Spartan';font-weight:800;font-size:15px;cursor:pointer;text-transform:uppercase}
.tabbtn.active{border-bottom:2px solid var(--accent);color:var(--accent)}
.controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:0 0 20px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.cg{display:flex;gap:6px;align-items:center}.cg .lab{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-family:'League Spartan';font-weight:700;font-size:13px;cursor:pointer}
.btn.active{background:var(--accent);color:#000;border-color:var(--accent)}
select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-family:'Public Sans';font-size:13px}
.pane{display:none}.pane.active{display:block}

/* KPI-Kacheln */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.kpis.six{grid-template-columns:repeat(6,1fr)}
@media(max-width:820px){.kpis,.kpis.six{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.kpis,.kpis.six{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 13px 12px;cursor:pointer;transition:border-color .15s;display:flex;flex-direction:column;min-height:120px}
.kpi:hover{border-color:var(--accent)}
.kpi .lbl{color:var(--muted);font-size:11px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.02em;font-weight:600;min-height:28px;line-height:1.25}
.kpi .val{font-family:'League Spartan',sans-serif;font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1}
.kpi .val.bad{color:var(--bad)}.kpi .val.ok{color:var(--accent)}.kpi .val.warn{color:var(--warn)}
.kpi .note{color:var(--text);font-size:11px;margin-top:auto;padding-top:6px;line-height:1.3}
.kpi .exp{color:var(--muted);font-size:10px;margin-top:8px}

h2{font-family:'League Spartan',sans-serif;font-size:18px;margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--accent)}
h2 .hint{float:right;font-family:'Public Sans';font-size:12px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;padding-top:4px}
h2 .dot{color:var(--accent)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bad{color:var(--bad)}.ok{color:var(--accent)}
.delta-bad{color:var(--bad);font-weight:700}.delta-ok{color:var(--ok);font-weight:700}
.sub-row td{font-weight:800;background:var(--panel2)}
.rate{color:var(--muted);font-size:12px}
.verdict{display:inline-block;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:7px 14px;border-radius:999px;font-weight:700;font-size:13px;margin-bottom:20px}

/* Balken – Farbe folgt dem Δ (ci.md) */
.bar{height:7px;border-radius:4px;background:var(--panel2);position:relative;overflow:hidden;min-width:70px}
.bar > span{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.bar .soll{background:#3a4a24;opacity:.9}
.bar .ist{background:var(--bad);height:3px;top:2px}
.bar .ist.pos{background:var(--accent)}

/* Drill-down */
.drill{background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:14px 16px;margin:12px 0 4px;display:none}
.drill.open{display:block}
.drill h3{font-family:'League Spartan';margin:0 0 10px;font-size:14px;text-transform:uppercase;color:var(--text)}
.close{float:right;cursor:pointer;color:var(--muted);font-size:12px}
.drill th{cursor:pointer;user-select:none;color:var(--muted)}.drill th:hover{color:var(--accent)}
.dfilter{background:#fff;color:#111;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;margin-bottom:10px;width:240px}
.dfilter::placeholder{color:#666}
input:focus,select:focus,.btn:focus,.dfilter:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.psort th{cursor:pointer;user-select:none;color:var(--muted)}.psort th:hover{color:var(--accent)}
.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:5px;background:var(--panel2);color:var(--muted);margin-left:6px}
.pos{color:var(--text);font-size:13px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:10px}
.ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media(max-width:760px){.ranks{grid-template-columns:1fr}}
.rt{font-family:'League Spartan';font-weight:700;text-transform:uppercase;font-size:13px;color:var(--accent);margin-bottom:8px}
.rankcard ol{margin:0;padding-left:20px}.rankcard li{margin:5px 0;font-size:13px}
a.detail{color:var(--accent);text-decoration:none;font-size:12px;font-weight:700;cursor:pointer}
.clk{color:var(--accent);cursor:pointer;font-weight:700;font-size:12px}
.collap-h{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.collap-b{display:none;margin-top:12px}.collap-b.open{display:block}
.flag{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:11px 14px;font-size:13px;margin-top:10px}
.foot{color:var(--muted);font-size:12px;margin-top:30px;border-top:1px solid var(--line);padding-top:16px}

/* Erklär-Dropdowns (ci.md) */
details.exp{margin:8px 0 2px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
details.exp>summary{cursor:pointer;list-style:none;padding:9px 13px;font-size:12px;color:var(--muted);font-weight:600}
details.exp>summary::-webkit-details-marker{display:none}
details.exp>summary::before{content:'▸';color:var(--accent);margin-right:8px}
details.exp[open]>summary::before{content:'▾'}
details.exp .exp-body{padding:11px 14px 13px;color:var(--muted);font-size:13px;line-height:1.55}

/* Einzelprojekt-spezifisch (generierte Dashboards) */
.ok-flag{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font-size:13px;margin-top:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:760px){.two{grid-template-columns:1fr}}
.months{display:flex;gap:12px;align-items:flex-end;height:120px;margin-top:10px}
.mcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end}
.mcol .b{width:100%;background:linear-gradient(180deg,var(--accent),#7a9a13);border-radius:6px 6px 0 0;min-height:3px}
.mcol .mv{font-size:12px;color:var(--text);font-weight:700}.mcol .ml{font-size:11px;color:var(--muted)}
.scale{display:flex;height:16px;border-radius:8px;overflow:hidden;margin-top:14px;border:1px solid var(--line)}
.scale > span{display:flex;align-items:center;justify-content:center;font-size:10px;color:#000;font-weight:800;padding:0 4px;text-align:center}
.learn b{color:var(--accent)}
ul{margin:8px 0 0;padding-left:18px}li{margin:7px 0}
li.warn{color:var(--warn)}
.num.warn{color:var(--warn)}