:root{--p-weiss: #ffffff;--p-grau-25: #f9fafb;--p-grau-50: #f4f6f8;--p-grau-100: #eceff2;--p-grau-200: #dfe3e8;--p-grau-500: #667085;--p-grau-900: #1a2230;--p-petrol-50: #e6f0f5;--p-petrol-200: #b9d9e6;--p-petrol-400: #7fc4e0;--p-petrol-600: #0b4f6c;--p-petrol-700: #0a4257;--p-gruen-50: #ecfdf3;--p-gruen-200: #a6f4c5;--p-gruen-700: #027a48;--p-gelb-50: #fffaeb;--p-gelb-200: #fedf89;--p-gelb-700: #b54708;--p-rot-50: #fef3f2;--p-rot-200: #fecdca;--p-rot-700: #b42318;--p-abstand-1: 4px;--p-abstand-2: 8px;--p-abstand-3: 12px;--p-abstand-4: 16px;--p-abstand-5: 22px;--p-abstand-6: 30px;--p-radius-s: 6px;--p-radius-m: 8px;--p-radius-gross: 11px;--p-schrift-xs: 11px;--p-schrift-s: 12px;--p-schrift-m: 13px;--p-schrift-basis: 14px;--p-schrift-l: 18px;--p-schrift-xl: 26px;--p-gewicht-normal: 400;--p-gewicht-halb: 550;--p-gewicht-fett: 650;--p-schatten-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);--p-schatten-2: 0 10px 30px rgba(0, 0, 0, .2);--p-schriftfamilie: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--flaeche-seite: var(--p-grau-50);--flaeche: var(--p-weiss);--flaeche-gedaempft: var(--p-grau-25);--flaeche-versenkt: var(--p-grau-100);--linie: var(--p-grau-200);--text: var(--p-grau-900);--text-leise: var(--p-grau-500);--text-auf-akzent: var(--p-weiss);--akzent: var(--p-petrol-600);--akzent-tief: var(--p-petrol-700);--akzent-hell: var(--p-petrol-50);--akzent-linie: var(--p-petrol-200);--akzent-marke: var(--p-petrol-400);--erfolg: var(--p-gruen-700);--erfolg-hell: var(--p-gruen-50);--erfolg-linie: var(--p-gruen-200);--warnung: var(--p-gelb-700);--warnung-hell: var(--p-gelb-50);--warnung-linie: var(--p-gelb-200);--gefahr: var(--p-rot-700);--gefahr-hell: var(--p-rot-50);--gefahr-linie: var(--p-rot-200);--radius: var(--p-radius-m);--schatten: var(--p-schatten-1);--karte-flaeche: var(--flaeche);--karte-linie: var(--linie);--karte-radius: var(--radius);--knopf-flaeche: var(--akzent);--knopf-flaeche-hover: var(--akzent-tief);--knopf-text: var(--text-auf-akzent);--knopf-radius: var(--p-radius-s);--knopf-polster: 7px 14px;--knopf-zweit-flaeche: var(--flaeche);--knopf-zweit-text: var(--text);--knopf-zweit-linie: var(--linie);--feld-flaeche: var(--flaeche);--feld-linie: var(--linie);--feld-radius: var(--p-radius-s);--feld-polster: 7px 10px;--feld-fokus: var(--akzent);--tabelle-kopf-flaeche: var(--flaeche-gedaempft);--tabelle-zeile-hover: var(--flaeche-gedaempft);--marke-radius: var(--p-radius-gross);--marke-polster: 2px 8px;--dialog-flaeche: var(--flaeche);--dialog-radius: var(--p-radius-gross);--dialog-schatten: var(--p-schatten-2);--dialog-schleier: rgba(16, 24, 40, .45);--auswahlleiste-flaeche: var(--akzent);--auswahlleiste-text: var(--text-auf-akzent);--seitenleiste-flaeche: var(--akzent);--seitenleiste-text: #cddde6;--seitenleiste-text-aktiv: var(--p-weiss)}*{box-sizing:border-box}body{margin:0;background:var(--flaeche-seite);color:var(--text);font-family:var(--p-schriftfamilie);font-size:var(--p-schrift-basis);line-height:1.5}a{color:var(--akzent);text-decoration:none}a:hover{text-decoration:underline}.app{display:flex;min-height:100vh}.sidebar{width:220px;flex-shrink:0;background:var(--seitenleiste-flaeche);color:var(--seitenleiste-text);padding:var(--p-abstand-5) 0;display:flex;flex-direction:column}.sidebar .brand{padding:0 var(--p-abstand-5) var(--p-abstand-4);font-weight:var(--p-gewicht-fett);font-size:15px;color:var(--seitenleiste-text-aktiv);line-height:1.3}.sidebar .brand small{display:block;font-weight:var(--p-gewicht-normal);font-size:var(--p-schrift-s);opacity:.7}.sidebar nav{display:flex;flex-direction:column;gap:2px}.sidebar nav a{padding:9px var(--p-abstand-5);color:var(--seitenleiste-text);font-size:var(--p-schrift-basis);border-left:3px solid transparent}.sidebar nav a:hover{background:#ffffff12;text-decoration:none}.sidebar nav a.active{background:#ffffff1f;color:var(--seitenleiste-text-aktiv);border-left-color:var(--akzent-marke);font-weight:var(--p-gewicht-halb)}.sidebar .spacer{flex:1}.sidebar .user{padding:var(--p-abstand-3) var(--p-abstand-5) 0;border-top:1px solid rgba(255,255,255,.14);font-size:var(--p-schrift-s)}.sidebar .user strong{display:block;color:var(--seitenleiste-text-aktiv);font-size:var(--p-schrift-m)}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:var(--p-abstand-3) var(--p-abstand-5);display:flex;align-items:center;gap:var(--p-abstand-4);flex-wrap:wrap}.topbar h1{font-size:var(--p-schrift-l);margin:0;font-weight:var(--p-gewicht-fett)}.topbar .grow{flex:1}.content{padding:var(--p-abstand-5) var(--p-abstand-5) 60px;flex:1}.card{background:var(--karte-flaeche);border:1px solid var(--karte-linie);border-radius:var(--karte-radius);box-shadow:var(--schatten)}.card>h2{margin:0;padding:var(--p-abstand-3) var(--p-abstand-4);font-size:var(--p-schrift-basis);font-weight:var(--p-gewicht-fett);border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:var(--p-abstand-2)}.card>.body{padding:var(--p-abstand-3) var(--p-abstand-4)}.grid{display:grid;gap:var(--p-abstand-4)}.kpis{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}.cols-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}.kpi{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:var(--p-abstand-3) 15px;box-shadow:var(--schatten)}.kpi .label{font-size:var(--p-schrift-s);color:var(--text-leise)}.kpi .value{font-size:var(--p-schrift-xl);font-weight:var(--p-gewicht-fett);line-height:1.2;margin-top:2px}.kpi.alert .value{color:var(--gefahr)}.kpi.good .value{color:var(--erfolg)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:var(--p-schrift-m)}th{text-align:left;padding:9px var(--p-abstand-3);font-size:var(--p-schrift-xs);text-transform:uppercase;letter-spacing:.4px;color:var(--text-leise);background:var(--tabelle-kopf-flaeche);border-bottom:1px solid var(--linie);white-space:nowrap}td{padding:9px var(--p-abstand-3);border-bottom:1px solid var(--linie);vertical-align:top}tbody tr:hover{background:var(--tabelle-zeile-hover)}tbody tr.markiert{background:var(--akzent-hell)}td.num{text-align:right;font-variant-numeric:tabular-nums}.badge{display:inline-block;padding:var(--marke-polster);border-radius:var(--marke-radius);font-size:var(--p-schrift-xs);font-weight:var(--p-gewicht-halb);white-space:nowrap;background:var(--flaeche-gedaempft);border:1px solid var(--linie);color:var(--text-leise)}.badge.a,.badge.erfolg,.badge.gewonnen{background:var(--erfolg-hell);color:var(--erfolg);border-color:var(--erfolg-linie)}.badge.b,.badge.aktiv{background:var(--akzent-hell);color:var(--akzent);border-color:var(--akzent-linie)}.badge.c,.badge.warn{background:var(--warnung-hell);color:var(--warnung);border-color:var(--warnung-linie)}.badge.d{background:var(--flaeche-gedaempft)}.badge.gesperrt,.badge.gefahr{background:var(--gefahr-hell);color:var(--gefahr);border-color:var(--gefahr-linie)}.score{font-weight:var(--p-gewicht-fett);font-variant-numeric:tabular-nums}.statuschip{display:inline-flex;align-items:center;gap:var(--p-abstand-1);padding:var(--marke-polster);border-radius:var(--marke-radius);font-size:var(--p-schrift-xs);font-weight:var(--p-gewicht-halb);white-space:nowrap;background:var(--flaeche-gedaempft);border:1px solid var(--linie);color:var(--text-leise)}.statuschip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.statuschip.laeuft{background:var(--akzent-hell);color:var(--akzent);border-color:var(--akzent-linie)}.statuschip.laeuft:before{animation:chip-puls 2s ease-in-out infinite}.statuschip.erfolg{background:var(--erfolg-hell);color:var(--erfolg);border-color:var(--erfolg-linie)}.statuschip.entscheidung{background:var(--warnung-hell);color:var(--warnung);border-color:var(--warnung-linie)}.statuschip.beendet{background:var(--gefahr-hell);color:var(--gefahr);border-color:var(--gefahr-linie)}@keyframes chip-puls{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.statuschip.laeuft:before{animation:none}}input,select,textarea,button{font:inherit}input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{width:100%;padding:var(--feld-polster);border:1px solid var(--feld-linie);border-radius:var(--feld-radius);background:var(--feld-flaeche);color:var(--text)}input:focus,select:focus,textarea:focus{outline:2px solid var(--feld-fokus);outline-offset:-1px;border-color:var(--feld-fokus)}textarea{min-height:76px;resize:vertical}label{display:block;font-size:var(--p-schrift-s);color:var(--text-leise);margin-bottom:3px}.field{margin-bottom:var(--p-abstand-3)}.form-grid{display:grid;gap:var(--p-abstand-3);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.auswahl-zelle{width:40px;padding-left:var(--p-abstand-4)}.auswahl-zelle input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--akzent)}button,.btn{padding:var(--knopf-polster);border-radius:var(--knopf-radius);border:1px solid var(--knopf-flaeche);background:var(--knopf-flaeche);color:var(--knopf-text);font-weight:var(--p-gewicht-halb);cursor:pointer}button:hover:not(:disabled),.btn:hover{background:var(--knopf-flaeche-hover)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:var(--knopf-zweit-flaeche);color:var(--knopf-zweit-text);border-color:var(--knopf-zweit-linie)}button.secondary:hover:not(:disabled){background:var(--flaeche-gedaempft)}button.danger{background:var(--gefahr);border-color:var(--gefahr);color:var(--text-auf-akzent)}button.small{padding:var(--p-abstand-1) 10px;font-size:var(--p-schrift-s)}.toolbar{display:flex;gap:var(--p-abstand-2);align-items:flex-end;flex-wrap:wrap}.row{display:flex;gap:var(--p-abstand-2);align-items:center;flex-wrap:wrap}.auswahlleiste{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:var(--p-abstand-3);flex-wrap:wrap;background:var(--auswahlleiste-flaeche);color:var(--auswahlleiste-text);padding:var(--p-abstand-3) var(--p-abstand-4);border-radius:var(--radius);box-shadow:var(--p-schatten-2);margin-top:var(--p-abstand-3)}.auswahlleiste .anzahl{font-weight:var(--p-gewicht-fett)}.auswahlleiste button{background:var(--flaeche);color:var(--akzent);border-color:var(--flaeche)}.auswahlleiste button:hover:not(:disabled){background:var(--akzent-hell)}.auswahlleiste button.klar{background:transparent;color:var(--auswahlleiste-text);border-color:#ffffff80}.auswahlleiste button.klar:hover:not(:disabled){background:#ffffff1f}.dialog-schleier{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--dialog-schleier);display:flex;align-items:center;justify-content:center;padding:var(--p-abstand-4);z-index:100}.dialog{background:var(--dialog-flaeche);color:var(--text);border-radius:var(--dialog-radius);box-shadow:var(--dialog-schatten);width:100%;max-width:560px;max-height:90vh;overflow-y:auto}.dialog>header{padding:var(--p-abstand-4) var(--p-abstand-5) var(--p-abstand-2)}.dialog>header h2{margin:0;font-size:var(--p-schrift-l)}.dialog>header p{margin:var(--p-abstand-1) 0 0;color:var(--text-leise);font-size:var(--p-schrift-m)}.dialog>.body{padding:var(--p-abstand-3) var(--p-abstand-5)}.dialog>footer{padding:var(--p-abstand-3) var(--p-abstand-5) var(--p-abstand-5);display:flex;gap:var(--p-abstand-2);justify-content:flex-end}.msg{padding:10px var(--p-abstand-3);border-radius:var(--radius);margin-bottom:var(--p-abstand-3);font-size:var(--p-schrift-m)}.msg.error{background:var(--gefahr-hell);color:var(--gefahr);border:1px solid var(--gefahr-linie)}.msg.ok{background:var(--erfolg-hell);color:var(--erfolg);border:1px solid var(--erfolg-linie)}.msg.warn{background:var(--warnung-hell);color:var(--warnung);border:1px solid var(--warnung-linie)}.muted{color:var(--text-leise)}.small{font-size:var(--p-schrift-s)}.empty{padding:var(--p-abstand-6);text-align:center;color:var(--text-leise)}.sperrbanner{background:var(--gefahr-hell);border:1px solid var(--gefahr-linie);border-left:4px solid var(--gefahr);color:var(--gefahr);padding:var(--p-abstand-3) var(--p-abstand-4);border-radius:var(--radius);margin-bottom:var(--p-abstand-4);font-weight:var(--p-gewicht-halb)}.board{display:flex;gap:var(--p-abstand-3);overflow-x:auto;padding-bottom:var(--p-abstand-3);align-items:flex-start}.board .spalte{min-width:244px;width:244px;flex-shrink:0;background:var(--flaeche-versenkt);border-radius:var(--radius);padding:var(--p-abstand-2)}.board .spalte>h3{margin:2px var(--p-abstand-1) var(--p-abstand-2);font-size:var(--p-schrift-s);text-transform:uppercase;letter-spacing:.4px;color:var(--text-leise);display:flex;justify-content:space-between}.board .spalte.ziel{background:var(--akzent-hell);outline:2px dashed var(--akzent)}.board .karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--p-radius-s);padding:9px 10px;margin-bottom:7px;cursor:grab;box-shadow:var(--schatten)}.board .karte:active{cursor:grabbing}.board .karte .name{font-weight:var(--p-gewicht-halb);font-size:var(--p-schrift-m)}.board .karte .meta{font-size:var(--p-schrift-xs);color:var(--text-leise);margin-top:2px}.timeline{list-style:none;margin:0;padding:0}.timeline li{padding:10px 0 10px var(--p-abstand-4);border-left:2px solid var(--linie);position:relative}.timeline li:before{content:"";position:absolute;left:-5px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--akzent)}.timeline .kopf{display:flex;gap:var(--p-abstand-2);align-items:baseline;flex-wrap:wrap}.timeline .zeit{font-size:var(--p-schrift-xs);color:var(--text-leise)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--akzent);padding:var(--p-abstand-5)}.login-box{background:var(--flaeche);border-radius:10px;padding:var(--p-abstand-6);width:100%;max-width:380px;box-shadow:var(--p-schatten-2)}.login-box h1{margin:0 0 var(--p-abstand-1);font-size:20px}.login-box p.sub{margin:0 0 var(--p-abstand-5);color:var(--text-leise);font-size:var(--p-schrift-m)}@media(max-width:860px){.app{flex-direction:column}.sidebar{width:100%;padding:var(--p-abstand-3) 0}.sidebar nav{flex-direction:row;overflow-x:auto}.sidebar nav a{border-left:none;border-bottom:3px solid transparent;white-space:nowrap}.sidebar nav a.active{border-left-color:transparent;border-bottom-color:var(--akzent-marke)}.sidebar .brand{padding-bottom:10px}.sidebar .spacer,.sidebar .user{display:none}.content{padding:var(--p-abstand-4) var(--p-abstand-3) 50px}.topbar{padding:10px var(--p-abstand-3)}.auswahlleiste{position:fixed;left:var(--p-abstand-3);right:var(--p-abstand-3);bottom:var(--p-abstand-3)}}