:root{
  --ground:#F4F6F7; --surface:#FFFFFF; --surface-2:#EBEFF1; --surface-3:#E0E6EA;
  --rail:#101A21; --rail-2:#1A272F; --rail-ink:#C9D6DE; --rail-ink-2:#7C8F9C;
  --ink:#131C24; --ink-2:#3A4954; --muted:#5C6C7A;
  --rule:#DDE3E8; --rule-2:#C6D0D7;
  --accent:#0D6E77; --accent-2:#0A555C; --accent-soft:#E0EFF0;
  --good:#2E7D51; --good-soft:#E3F1E9;
  --warn:#96660B; --warn-soft:#F8EFDB;
  --crit:#A6382C; --crit-soft:#F8E6E3;
  --steel:#3D6183; --steel-soft:#E5EBF2;
  --viol:#6C4A93; --viol-soft:#EDE7F4;
  --shadow:0 1px 2px rgba(19,28,36,.05), 0 10px 26px -18px rgba(19,28,36,.35);
  --radius:7px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1319; --surface:#141D25; --surface-2:#1B262F; --surface-3:#243139;
    --rail:#080D12; --rail-2:#131E26; --rail-ink:#C2D2DC; --rail-ink-2:#71838F;
    --ink:#E1E8EE; --ink-2:#B6C4CE; --muted:#8DA0AE;
    --rule:#233039; --rule-2:#30404B;
    --accent:#45B5BE; --accent-2:#7ED4DB; --accent-soft:#10333A;
    --good:#5FBE8C; --good-soft:#102A1E;
    --warn:#D8A83C; --warn-soft:#2C2311;
    --crit:#E48273; --crit-soft:#321B17;
    --steel:#8FB0CE; --steel-soft:#18242F;
    --viol:#B79BD8; --viol-soft:#221A2D;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -20px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1319; --surface:#141D25; --surface-2:#1B262F; --surface-3:#243139;
  --rail:#080D12; --rail-2:#131E26; --rail-ink:#C2D2DC; --rail-ink-2:#71838F;
  --ink:#E1E8EE; --ink-2:#B6C4CE; --muted:#8DA0AE;
  --rule:#233039; --rule-2:#30404B;
  --accent:#45B5BE; --accent-2:#7ED4DB; --accent-soft:#10333A;
  --good:#5FBE8C; --good-soft:#102A1E;
  --warn:#D8A83C; --warn-soft:#2C2311;
  --crit:#E48273; --crit-soft:#321B17;
  --steel:#8FB0CE; --steel-soft:#18242F;
  --viol:#B79BD8; --viol-soft:#221A2D;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -20px rgba(0,0,0,.95);
}

*{box-sizing:border-box}
/* Muss vor allen Klassen stehen und sie ueberstimmen: sonst haelt jede Regel
   mit display:flex ein ausgeblendetes Element am Leben — sichtbar leer, aber
   es belegt Platz und faengt Klicks ab. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.mono,code,.num{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums}
button{font-family:inherit; font-size:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

/* ---------------- Grundraster ---------------- */
.app{display:grid; grid-template-columns:1fr; min-height:100vh}
@media (min-width:900px){ .app{grid-template-columns:236px minmax(0,1fr)} }

/* ---------------- Seitenleiste ---------------- */
.rail{background:var(--rail); color:var(--rail-ink); display:flex; flex-direction:column; padding:16px 12px; gap:18px}
.rail[hidden]{display:none}
@media (min-width:900px){ .rail{position:sticky; top:0; height:100vh} }
.brand{display:flex; align-items:center; gap:10px; padding:2px 8px 0}
.brand .mark{
  width:36px; height:36px; border-radius:50%; object-fit:cover; display:block; flex:none;
}
.brand .n{font-weight:700; font-size:16px; letter-spacing:-.01em; color:#fff; line-height:1.1}
.brand .s{font-size:10.5px; color:var(--rail-ink-2); letter-spacing:.05em; text-transform:uppercase}
nav.menu{display:flex; flex-direction:column; gap:2px}
nav.menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; color:var(--rail-ink); padding:8px 10px; border-radius:6px;
  font-size:13.5px; font-weight:500;
}
nav.menu button:hover{background:var(--rail-2); color:#fff}
nav.menu button[aria-current="page"]{background:var(--accent); color:#fff; font-weight:600}
nav.menu .badge{
  margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:9px;
  background:var(--rail-2); color:var(--rail-ink-2); font-family:"JetBrains Mono",monospace;
}
nav.menu button[aria-current="page"] .badge{background:rgba(255,255,255,.22); color:#fff}
.railfoot{margin-top:auto; display:flex; flex-direction:column; gap:9px}
.whoami{background:var(--rail-2); border-radius:7px; padding:10px 11px}
.whoami .lab{font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--rail-ink-2); margin-bottom:6px}
.whoami .who{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.whoami .av{width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none}
.whoami .nm{font-size:12.5px; font-weight:600; color:#fff; line-height:1.2}
.whoami .rl{font-size:10.5px; color:var(--rail-ink-2)}
.hilfeleiste{display:flex; gap:6px; margin-top:8px}
.hilfeleiste .btn{flex:1; background:var(--rail-2); border-color:var(--rail-2); color:var(--rail-ink); text-align:center; justify-content:center}
.hilfeleiste .btn:hover{border-color:var(--accent); color:#fff}
.hilfeleiste .btn[aria-pressed="false"]{opacity:.6}

/* ---------------- Inhalt ---------------- */
main{min-width:0; padding:0 0 60px}
.pagehead{
  background:var(--surface); border-bottom:1px solid var(--rule);
  padding:18px 26px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
  position:sticky; top:0; z-index:5;
}
.pagehead h1{margin:0; font-size:21px; font-weight:700; letter-spacing:-.015em; line-height:1.2}
.pagehead .sub{margin:3px 0 0; color:var(--muted); font-size:13px}
.pagehead .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.body{padding:22px 26px; display:flex; flex-direction:column; gap:18px; max-width:1180px}

/* ---------------- Bausteine ---------------- */
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow)}
.card > h2{
  margin:0; padding:12px 16px; font-size:13px; font-weight:600; letter-spacing:.02em;
  border-bottom:1px solid var(--rule); background:var(--surface-2); border-radius:var(--radius) var(--radius) 0 0;
  display:flex; align-items:center; gap:9px;
}
.card > h2 .c{margin-left:auto; font-size:11px; color:var(--muted); font-family:"JetBrains Mono",monospace}
.card .inner{padding:14px 16px}

.btn{
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink-2);
  padding:6px 12px; border-radius:5px; font-size:12.5px; font-weight:600;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2); color:#fff}
.btn.sm{padding:3px 9px; font-size:11.5px}
.btn:disabled{opacity:.45; cursor:not-allowed}

.pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:2px 9px; border-radius:20px; white-space:nowrap; border:1px solid transparent;
}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.st-entwurf{background:var(--surface-3); color:var(--muted)}
.st-anfrage_raus{background:var(--steel-soft); color:var(--steel)}
.st-angebote_da{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.st-freigabe_kunde{background:var(--viol-soft); color:var(--viol); border-color:var(--viol)}
.st-vergeben{background:var(--accent-soft); color:var(--accent-2)}
.st-in_ausfuehrung{background:var(--warn-soft); color:var(--warn)}
.st-ausgefuehrt{background:var(--good-soft); color:var(--good)}
.st-abgerechnet{background:var(--good-soft); color:var(--good)}
.st-abgeschlossen{background:var(--surface-3); color:var(--muted)}
.st-abgebrochen{background:var(--crit-soft); color:var(--crit)}
.st-abgelehnt{background:var(--crit-soft); color:var(--crit)}
.st-zurueckgestellt{background:var(--surface-3); color:var(--muted)}
.hp-ja{background:var(--good-soft); color:var(--good)}
.hp-nein{background:var(--crit-soft); color:var(--crit)}
.hp-ungeprueft{background:var(--warn-soft); color:var(--warn)}
.ps-neuer_eintrag{background:var(--surface-3); color:var(--muted)}
.ps-gute_zusammenarbeit{background:var(--good-soft); color:var(--good)}
.ps-nur_wenn_noetig{background:var(--warn-soft); color:var(--warn)}
.ps-nie_wieder{background:var(--crit-soft); color:var(--crit)}

.tag{display:inline-block; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:4px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--rule)}
.tag.sub{background:var(--accent-soft); color:var(--accent-2); border-color:var(--accent)}

/* ---------------- KVA-Art: muss ins Auge springen ---------------- */
.kva{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  padding:3px 9px 3px 7px; border-radius:5px; border:1.5px solid; white-space:nowrap;
  letter-spacing:.01em;
}
.kva::before{font-size:12px; line-height:1; font-weight:700}
.kva.raus{ background:var(--good-soft); color:var(--good); border-color:var(--good) }
.kva.raus::before{content:"✓"}
.kva.stop{ background:var(--crit-soft); color:var(--crit); border-color:var(--crit) }
.kva.stop::before{content:"✕"}
.kvabox{
  border:2px solid; border-radius:7px; padding:12px 15px; display:flex; gap:12px; align-items:flex-start;
}
.kvabox.raus{ background:var(--good-soft); border-color:var(--good) }
.kvabox.stop{ background:var(--crit-soft); border-color:var(--crit) }
.kvabox.warn{ background:var(--warn-soft); border-color:var(--warn) }
.kvabox .ic{font-size:20px; font-weight:700; line-height:1.1; flex:none}
.kvabox.raus .ic{color:var(--good)} .kvabox.stop .ic{color:var(--crit)} .kvabox.warn .ic{color:var(--warn)}
.kvabox .hd{font-weight:700; font-size:13.5px; margin-bottom:3px}
.kvabox.raus .hd{color:var(--good)} .kvabox.stop .hd{color:var(--crit)} .kvabox.warn .hd{color:var(--warn)}
.kvabox .tx{font-size:12.5px; color:var(--ink-2); line-height:1.45}

/* ---------------- Bewertung in drei Stufen ---------------- */
.stufen{display:flex; gap:6px; flex-wrap:wrap}
.stufen button{
  flex:1 1 92px; border:1.5px solid var(--rule-2); background:var(--surface); color:var(--ink-2);
  padding:9px 8px; border-radius:6px; font-size:13px; font-weight:600;
}
.stufen button:hover{border-color:var(--accent)}
.stufen button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-2)}
.stufen button[aria-pressed="true"][data-wert="schlecht"],
.stufen button[aria-pressed="true"][data-wert="nie_wieder"]{border-color:var(--crit); background:var(--crit-soft); color:var(--crit)}
.stufen button[aria-pressed="true"][data-wert="mittel"],
.stufen button[aria-pressed="true"][data-wert="brauchbar"]{border-color:var(--warn); background:var(--warn-soft); color:var(--warn)}
.stufen button[aria-pressed="true"][data-wert="gut"]{border-color:var(--good); background:var(--good-soft); color:var(--good)}

/* ---------------- Mini-Dashboard (Aufgaben-Link) ---------------- */
.mini{max-width:520px; margin:0 auto; padding:20px 18px 60px; display:flex; flex-direction:column; gap:16px}
.mini .kopf{text-align:center; padding:8px 0 4px}
.mini .kopf .b{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px}
.mini .kopf .b .mark{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}
.mini h2{margin:0 0 4px; font-size:19px; font-weight:700; line-height:1.25; text-wrap:balance}
.mini .meta{font-size:13px; color:var(--muted)}
.mini .gross{font-size:32px; font-weight:700; font-family:"JetBrains Mono",monospace; text-align:center; letter-spacing:-.02em}
.mini input[type=range]{height:30px}

/* ---------------- Tabellen ---------------- */
.tw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:640px}
th{
  text-align:left; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); padding:8px 12px; border-bottom:1px solid var(--rule); background:var(--surface-2);
  white-space:nowrap; position:sticky; top:0;
}
td{padding:9px 12px; border-bottom:1px solid var(--rule); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--surface-2)}
td.r,th.r{text-align:right}
.stripe{border-left:3px solid var(--rule-2)}
.stripe.s-angebote_da,.stripe.s-vergeben{border-left-color:var(--accent)}
.stripe.s-freigabe_kunde{border-left-color:var(--viol)}
.stripe.s-in_ausfuehrung{border-left-color:var(--warn)}
.stripe.s-ausgefuehrt,.stripe.s-abgerechnet{border-left-color:var(--good)}
.stripe.s-abgebrochen,.stripe.s-abgelehnt{border-left-color:var(--crit)}
.stripe.s-anfrage_raus{border-left-color:var(--steel)}

/* ---------------- Kennzahlen / Warteschlangen ---------------- */
.queues{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.q{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
   padding:13px 15px; box-shadow:var(--shadow); text-align:left; width:100%; border-left:3px solid var(--rule-2)}
.q:hover{border-color:var(--rule-2)}
.q .n{font-size:27px; font-weight:700; line-height:1; font-family:"JetBrains Mono",monospace; letter-spacing:-.02em}
.q .t{font-size:12.5px; font-weight:600; margin-top:6px; color:var(--ink-2)}
.q .h{font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.35}
.q.acc{border-left-color:var(--accent)} .q.acc .n{color:var(--accent)}
.q.vio{border-left-color:var(--viol)} .q.vio .n{color:var(--viol)}
.q.wrn{border-left-color:var(--warn)} .q.wrn .n{color:var(--warn)}
.q.crt{border-left-color:var(--crit)} .q.crt .n{color:var(--crit)}
.q.gd{border-left-color:var(--good)} .q.gd .n{color:var(--good)}

/* ---------------- Detail ---------------- */
.split{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:1040px){ .split{grid-template-columns:minmax(0,1fr) 310px; align-items:start} }
.fields{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:640px){ .fields{grid-template-columns:1fr 1fr} }
.f{display:flex; flex-direction:column; gap:4px; min-width:0}
.f.wide{grid-column:1/-1}
.f label{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.f .v{font-size:14px; color:var(--ink); min-height:21px; word-break:break-word}
.f .v.empty{color:var(--muted); font-style:italic}
input,select,textarea{
  font-family:inherit; font-size:13.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule-2); border-radius:5px; padding:6px 9px; width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
input[type=range]{padding:0; border:0; background:none; accent-color:var(--accent)}
.linkbtn{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent);
  padding:3px 9px; border-radius:5px; text-decoration:none;
}
.linkbtn:hover{background:var(--accent); color:#fff}

.money{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; font-weight:500}
.marge{font-size:22px; font-weight:700; font-family:"JetBrains Mono",monospace; letter-spacing:-.02em}
.marge.pos{color:var(--good)} .marge.neg{color:var(--crit)}

.prog{display:flex; align-items:center; gap:11px}
.prog .track{flex:1; height:8px; background:var(--surface-3); border-radius:5px; overflow:hidden}
.prog .track i{display:block; height:100%; background:var(--accent); border-radius:5px}
.prog .pct{font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:600; min-width:44px; text-align:right}

.timeline{display:flex; flex-direction:column; gap:0}
.tl{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; padding:9px 0; border-bottom:1px solid var(--rule)}
.tl:last-child{border-bottom:none}
.tl .when{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--muted); white-space:nowrap; padding-top:2px}
.tl .what{font-size:12.5px; color:var(--ink-2); min-width:0}
.tl .what b{font-weight:600; color:var(--ink)}
.tl .who{font-size:11px; color:var(--muted)}

.empty-note{color:var(--muted); font-size:13px; padding:14px 0; text-align:center}
.hint{font-size:12px; color:var(--muted); line-height:1.45}
.uebfein{font-size:6pt; color:var(--muted); line-height:1.4; margin-top:8px}
.fehler{color:var(--crit); font-size:12.5px; line-height:1.5; padding:10px 0}

/* ---------------- Anmeldung ---------------- */
.anmeldung{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.anmeldung .card{width:100%; max-width:360px}
.anmeldung .inner{display:flex; flex-direction:column; gap:14px}
.anmeldung .brand{justify-content:center; padding:0 0 6px; color:var(--ink)}
.anmeldung .brand .n{color:var(--ink)}

/* ---------------- Modal ---------------- */
.scrim{position:fixed; inset:0; background:rgba(10,16,20,.55); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:50}
.modal{background:var(--surface); border-radius:9px; border:1px solid var(--rule); max-width:620px;
  width:100%; max-height:88vh; overflow:auto; box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.modal h3{margin:0; padding:15px 18px; font-size:15px; font-weight:700; border-bottom:1px solid var(--rule)}
.modal .mb{padding:16px 18px; display:flex; flex-direction:column; gap:13px}
.modal .mf{padding:12px 18px; border-top:1px solid var(--rule); display:flex; gap:8px; justify-content:flex-end;
  background:var(--surface-2); border-radius:0 0 9px 9px; flex-wrap:wrap}
.msg{background:var(--surface-2); border:1px solid var(--rule); border-radius:6px; padding:12px 14px;
  font-size:12.5px; line-height:1.6; white-space:pre-wrap; color:var(--ink-2); max-height:270px; overflow:auto}

.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--rail); color:#fff; padding:10px 18px; border-radius:7px; font-size:13px;
  font-weight:500; z-index:60; box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
}

/* ---------------- Tipps (kleines "i") ---------------- */
.info-tip{
  display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; border:1px solid var(--rule-2); background:var(--surface-2); color:var(--muted);
  font-size:10px; font-weight:700; font-style:italic; font-family:Georgia,"Times New Roman",serif;
  line-height:1; padding:0; vertical-align:middle; margin-left:5px; flex:none;
}
.info-tip:hover,.info-tip:focus-visible{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
body.tipps-aus .info-tip{display:none}
.info-popover{
  position:absolute; z-index:70; max-width:280px; background:var(--rail); color:#fff;
  font-size:12px; line-height:1.5; padding:9px 12px; border-radius:6px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
}

/* ---------------- Einfuehrungstour ---------------- */
.tour-scrim{background:rgba(10,16,20,.4)}
.tour{
  background:var(--surface); border-radius:11px; border:1px solid var(--rule); max-width:440px; width:100%;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5); padding:20px 22px;
}
.tour-kopf{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.tour-schritt{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tour-x{background:none; border:0; color:var(--muted); font-size:15px; line-height:1; padding:2px}
.tour-x:hover{color:var(--ink)}
.tour h3{margin:0 0 8px; font-size:17px; font-weight:700}
.tour-text{font-size:13.5px; color:var(--ink-2); line-height:1.55}
.tour-punkte{display:flex; gap:5px; margin:16px 0 2px}
.tour-punkte i{width:6px; height:6px; border-radius:50%; background:var(--rule-2)}
.tour-punkte i.an{background:var(--accent)}
.tour-fuss{display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap}
.tour-fuss [data-tour-ueberspringen]{margin-right:auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}