:root{
  /* Markenfarbe — der Farbwähler in den Einstellungen ändert genau diese Zeile */
  --gruen:      #4ecf94;
  --gruen-satt: #2f8f63;

  /* Flächen — deutlich heller als der erste Entwurf */
  --bg:   #1b2320;
  --s1:   #222c28;
  --s2:   #2a3531;
  --s3:   #33403a;
  --line: #38453f;
  --line2:#46554d;

  /* Schrift */
  --ink:  #eef3f0;
  --ink2: #b9c7c0;
  --ink3: #8c9c94;
}

/* ===== HELLE VARIANTE — eigene Statusfarben, kein Umdrehen der dunklen.
   Die dunklen Töne fallen auf Weiß unter 3:1 Kontrast und sind dort unbrauchbar. ===== */
[data-modus="hell"]{
  --gruen:      #2f8f63;
  --gruen-satt: #2f8f63;

  --bg:   #f2f5f3;
  --s1:   #ffffff;
  --s2:   #f0f3f1;
  --s3:   #e4e9e6;
  --line: #dfe5e2;
  --line2:#c3cec9;

  --ink:  #1a231f;
  --ink2: #4d5b55;
  --ink3: #7d8b84;
}
[data-modus="hell"] .kiosk{background:#eef2f0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
svg.i{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.sm{width:14px;height:14px}

/* ---------- Gerüst ---------- */
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.side{background:var(--s1);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.wordmark{padding:20px 18px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px;letter-spacing:.13em}
.wordmark small{display:block;font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--ink3);margin-top:5px}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:1px;flex:1;overflow:auto}
.nav .lbl{font-size:10px;letter-spacing:.15em;color:var(--ink3);padding:15px 9px 7px;font-weight:600}
.nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;
  color:var(--ink2);padding:9px 10px;border-radius:7px;font-size:14px;cursor:pointer;font-family:inherit}
.nav button:hover{background:var(--s2);color:var(--ink)}
.nav button.on{background:var(--s3);color:var(--ink)}
.nav .cnt{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.side-foot{padding:13px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.side-foot span{display:block;color:var(--ink3);font-size:11.5px}

.main{display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:16px;padding:16px 26px;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.top h1{font-size:19px;font-weight:600;margin:0}
.top .crumb{color:var(--ink3);font-size:12.5px;margin-top:2px}
.search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--s1);
  border:1px solid var(--line);border-radius:7px;padding:8px 12px;color:var(--ink3);width:260px}
.search input{background:none;border:0;outline:none;color:var(--ink);font-size:13.5px;width:100%;font-family:inherit}
.content{padding:26px;max-width:1480px}

/* ---------- Schaltflächen: schlicht, kein Leuchten, keine Animation ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line2);
  color:var(--ink2);border-radius:7px;padding:8px 13px;font-size:13.5px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--s2);color:var(--ink)}
.btn-primary{background:var(--gruen-satt);border-color:var(--gruen-satt);color:#f2fff8}
.btn-primary:hover{background:#357a58;border-color:#357a58;color:#f2fff8}

/* ---------- Karten ---------- */
.card{background:var(--s1);border:1px solid var(--line);border-radius:10px}
.card > header{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card > header h2{font-size:13px;font-weight:600;margin:0;letter-spacing:.09em;color:var(--ink2)}
.card > header .hint{font-size:12px;color:var(--ink3);margin-left:auto;font-weight:400;letter-spacing:0}
.pad{padding:18px}

/* ---------- Status: farbiger Punkt + Text, keine bunten Pillen ---------- */
.st{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap;color:var(--ink2)}
.st i{width:8px;height:8px;border-radius:50%;flex:none}
.d-geplant{background:var(--st-geplant)} .d-offen{background:var(--st-offen)}
.d-arbeit{background:var(--st-arbeit)}   .d-warte{background:var(--st-warte)}
.d-fertig{background:var(--st-fertig)}   .d-kaputt{background:var(--st-kaputt)}
.d-live{background:var(--st-live)}
.quelle{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink3)}
.quelle svg{width:13px;height:13px}

/* ---------- Kennzahlen ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{background:var(--s1);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.kpi .k{font-size:11.5px;color:var(--ink3);letter-spacing:.07em}
.kpi .v{font-size:29px;font-weight:600;margin-top:7px;line-height:1}
.kpi .d{font-size:12px;color:var(--ink3);margin-top:6px}

/* ---------- Tabelle ---------- */
table.t{width:100%;border-collapse:collapse}
table.t th{font-size:10.5px;letter-spacing:.11em;color:var(--ink3);text-align:left;font-weight:600;padding:0 16px 11px;border-bottom:1px solid var(--line)}
table.t td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
table.t tbody tr:hover{background:var(--s2);cursor:pointer}
table.t tbody:last-child tr:last-child td{border-bottom:0}
.pn{display:flex;align-items:center;gap:11px}
.kz{font-size:10.5px;font-weight:600;color:var(--ink3);border:1px solid var(--line2);border-radius:4px;padding:2px 7px;letter-spacing:.06em;flex:none}

/* ---------- aufklappbare Projektzeilen ---------- */
.exp{background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--ink3);display:grid;place-items:center;
     width:20px;height:20px;border-radius:4px;flex:none}
.exp:hover{background:var(--s3);color:var(--ink)}
.exp svg{transition:transform .14s ease}
tbody.open .exp svg{transform:rotate(90deg)}
.exp.leer{visibility:hidden}
.tpz{font-size:11.5px;color:var(--ink3);margin-left:2px}
tr.tp{display:none}
tbody.open tr.tp{display:table-row}
tbody.open tr.head{background:var(--s2)}
tr.tp td{background:var(--s2);font-size:13.5px;border-bottom:1px solid var(--line)}
tr.tp:hover td{background:var(--s3)}
tr.tp .nm2{display:flex;align-items:center;gap:10px;padding-left:31px;color:var(--ink2)}
tr.tp .zw{color:var(--ink3);flex:none}
.bar{height:4px;border-radius:3px;background:var(--s3);overflow:hidden;width:96px}
.bar i{display:block;height:100%;background:var(--gruen-satt);border-radius:3px}

/* ---------- Filterzeile ---------- */
.filters{display:flex;gap:9px;align-items:center;margin-bottom:16px;flex-wrap:wrap}

/* ---------- Kanban ---------- */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(216px,1fr));gap:13px;align-items:start;overflow-x:auto;padding-bottom:8px}
.col{background:var(--s1);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;min-height:180px}
.col > header{padding:12px 14px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line)}
.col > header .nm{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink2)}
.col > header .n{margin-left:auto;font-size:12px;color:var(--ink3)}
.stack{padding:11px;display:flex;flex-direction:column;gap:10px}
.kc{background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:12px 13px;cursor:grab}
.kc:hover{border-color:var(--line2)}
.kc .t{font-size:13.5px;line-height:1.4}
.kc .meta{display:flex;align-items:center;gap:11px;margin-top:10px;flex-wrap:wrap;color:var(--ink3);font-size:11.5px}
.kc .meta span{display:inline-flex;align-items:center;gap:5px}
.kc.hoch{border-left:2px solid var(--pr-hoch);padding-left:12px}
.kc .over{color:var(--st-kaputt)}
.kc.fertig{opacity:.55}
.grund{margin-top:9px;font-size:12px;color:var(--st-warte);display:flex;gap:6px;align-items:flex-start}
.ghost{border:1px dashed var(--line2);border-radius:8px;padding:15px;text-align:center;color:var(--ink3);font-size:12.5px}

/* ---------- Radar ---------- */
.radar{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:24px;align-items:start}
.leg{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink3);margin-top:8px}
.leg span{display:inline-flex;align-items:center;gap:7px}
.leg i{width:8px;height:8px;border-radius:50%}
.fall{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line)}
.fall:last-child{border-bottom:0}
.fall .txt{min-width:0;flex:1}
.fall .t{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fall .m{font-size:11.5px;color:var(--ink3);display:flex;gap:12px;margin-top:3px}
.fall .w{font-size:12.5px;white-space:nowrap;color:var(--ink2)}
.fall .w.over{color:var(--st-kaputt)} .fall .w.today{color:var(--st-warte)}

/* ---------- Detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:20px;align-items:start}
.chk{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.chk:last-child{border-bottom:0}
.chk .b{width:17px;height:17px;border-radius:4px;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none}
.chk.done .b{background:var(--gruen-satt);border-color:var(--gruen-satt);color:#f2fff8}
.chk.done .l{color:var(--ink3);text-decoration:line-through}
.row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.row:last-child{border-bottom:0}
.row .k{color:var(--ink3)}
.ko{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.ko:last-child{border-bottom:0}
.ko .w{font-size:13px;font-weight:600}
.ko .w em{font-style:normal;font-size:11.5px;color:var(--ink3);font-weight:400;margin-left:8px}
.ko p{margin:5px 0 0;font-size:13.5px;color:var(--ink2)}
.ini{width:30px;height:30px;border-radius:50%;background:var(--s3);color:var(--ink2);display:grid;place-items:center;font-size:11.5px;font-weight:600;flex:none}
.hist{font-size:12.5px;color:var(--ink3);padding:8px 0;display:flex;gap:9px}
.hist b{color:var(--ink2);font-weight:600}

/* ---------- Statusboard ---------- */
.kiosk{background:#161d1a;border:1px solid var(--line);border-radius:10px;padding:22px}
.khead{display:flex;align-items:center;margin-bottom:18px;font-size:13px;letter-spacing:.12em;color:var(--ink2);font-weight:600}
.khead .u{margin-left:auto;font-size:12px;color:var(--ink3);letter-spacing:0;font-weight:400;display:flex;gap:7px;align-items:center}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{border-radius:10px;padding:18px;border:1px solid var(--line);background:var(--s1);min-height:150px;display:flex;flex-direction:column;border-left-width:3px}
.tile .pn2{font-size:18px;font-weight:600}
.tile .in{font-size:11px;letter-spacing:.1em;color:var(--ink3);margin-top:4px;display:flex;align-items:center;gap:6px}
.tile .sx{font-size:13.5px;margin-top:12px;color:var(--ink2);line-height:1.45}
.tile .fr{margin-top:auto;padding-top:11px;font-size:12.5px;color:var(--st-warte);display:flex;gap:7px;align-items:flex-start}
.tile .ts{font-size:11.5px;color:var(--ink3);margin-top:10px}
.b-blau{border-left-color:var(--st-arbeit)} .b-orange{border-left-color:var(--st-warte)}
.b-gruen{border-left-color:var(--st-fertig)} .b-rot{border-left-color:var(--st-kaputt)}
.tile.kalt{opacity:.42}

/* ---------- Kundenansicht ---------- */
.kunde-bar{background:var(--s1);border:1px solid var(--line);border-radius:10px;padding:16px 20px;
  display:flex;align-items:center;gap:14px;margin-bottom:20px}
.kunde-bar .who{font-weight:600}
.kunde-bar .sub{color:var(--ink3);font-size:12.5px}
.hinweis{border:1px dashed var(--line2);border-radius:8px;padding:11px 14px;color:var(--ink3);
  font-size:12.5px;margin-bottom:18px;display:flex;gap:9px;align-items:flex-start}

/* ---------- Einstellungen ---------- */
.sw{width:20px;height:20px;border-radius:5px;border:1px solid var(--line2);flex:none}
.themes{display:flex;gap:10px;flex-wrap:wrap}
.th{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--s2);
  border-radius:8px;padding:10px 14px;cursor:pointer;font-size:13px}
.th.on{border-color:var(--gruen)}
.th i{width:22px;height:22px;border-radius:5px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink3)}
.hidden{display:none}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,1fr)}.radar,.detail,.g2{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}}

/* ---------- Anmeldeseite ---------- */
.login-huelle{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:340px;padding:28px}
.login .wordmark{padding:0 0 20px;border:0}
.login label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:14px}
.login input{display:block;width:100%;margin-top:6px;background:var(--s2);border:1px solid var(--line2);
  border-radius:7px;padding:9px 11px;color:var(--ink);font-size:14px;font-family:inherit}
.login button{width:100%;justify-content:center;margin-top:6px}
.fehlermeldung{color:var(--st-kaputt);font-size:13px;margin:0 0 14px}

/* ---------- Navigation als Verweise statt Schaltflaechen ---------- */
.nav a{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  color:var(--ink2);padding:9px 10px;border-radius:7px;font-size:14px;text-decoration:none}
.nav a:hover{background:var(--s2);color:var(--ink)}
.nav a.on{background:var(--s3);color:var(--ink)}
.side-foot a{color:var(--ink3);text-decoration:underline}
.top .btn{text-decoration:none}

/* ---------- Karten-Statusfeld und Formulare ---------- */
.karte-status{margin-top:9px}
.karte-status select{width:100%;background:var(--s1);border:1px solid var(--line);border-radius:6px;
  color:var(--ink2);font-size:12px;padding:4px 6px;font-family:inherit}
.formular{max-width:620px}
.formular label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:16px}
.formular input,.formular select,.formular textarea{display:block;width:100%;margin-top:6px;
  background:var(--s2);border:1px solid var(--line2);border-radius:7px;padding:9px 11px;
  color:var(--ink);font-size:14px;font-family:inherit}
.formular .hinweis{display:block;margin-top:6px;font-size:11.5px;color:var(--ink3)}
.filters select.btn{font-family:inherit}

/* ---------- Aufgaben-Detail ---------- */
.chk{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);
  font-size:14px;margin:0}
.chk:last-child{border-bottom:0}
.chk .b{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line2);display:grid;
  place-items:center;flex:none;background:none;color:var(--ink);cursor:pointer;padding:0}
.chk.done .b{background:var(--gruen-satt);border-color:var(--gruen-satt);color:#f2fff8}
.chk.done .l{color:var(--ink3);text-decoration:line-through}
.warnung{display:flex;gap:9px;align-items:flex-start;background:color-mix(in srgb,var(--st-warte) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--st-warte) 45%,transparent);color:var(--st-warte);
  border-radius:8px;padding:11px 14px;font-size:13px;margin-bottom:18px}
.hist a{color:var(--ink2)}
.fall .t a{color:var(--ink)}
.pn a,.nm2 a{color:var(--ink)}
.pn a:hover,.nm2 a:hover,.kc .t a:hover{color:var(--gruen)}
.kc .t a{color:var(--ink)}

/* ---------- Einstellungen ---------- */
.feld-klein{background:var(--s2);border:1px solid var(--line2);border-radius:6px;padding:5px 8px;
  color:var(--ink);font-size:13px;font-family:inherit;width:100%;max-width:180px}
.feld-farbe{width:40px;height:30px;padding:2px;background:var(--s2);border:1px solid var(--line2);
  border-radius:6px}
table.t td form{margin:0}