:root { color-scheme:dark; --bg:#0b0b0d; --panel:#16171a; --line:#2a2b30; --text:#e8eaed; --muted:#9aa0a6; --gruen:#58cc02; --gelb:#ffc800; --rot:#ff4b4b; --blau:#1cb0f6 }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) }
main { max-width:760px; margin:0 auto; padding:12px 14px 40px }
button { font:inherit; color:inherit; cursor:pointer }
.hint { color:var(--muted); font-size:.85rem; margin:4px 0 }
.mitte { text-align:center } .leer { text-align:center; color:var(--muted); padding:30px 0 }
.login { min-height:80vh; display:grid; place-content:center; justify-items:center; gap:12px; text-align:center }
.login .logo { width:84px; height:84px; border-radius:24px; background:#1f2937; display:grid; place-items:center; font-size:2.6rem; color:var(--gruen) }
.login h1 { margin:6px 0 0 } .login label { display:grid; gap:6px; text-align:left; width:min(320px, 80vw); color:var(--muted) }
.login input, .werkzeug input, .werkzeug select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--text); font:inherit }
.gross { padding:14px 22px; border:0; border-radius:14px; background:var(--gruen); color:#0b2000; font-weight:800; min-width:260px; border-bottom:4px solid #46a302 }
.fehler { color:var(--rot) }
.kopf { display:flex; justify-content:space-between; align-items:center; margin:4px 0 12px } .kopf h1 { margin:0; font-size:1.6rem } .kopf small { color:var(--muted) }
.rund { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--panel); font-size:1.2rem }
.budget { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px 16px; margin-bottom:12px }
.budget .zahl { font-size:1.8rem; font-weight:800; color:var(--gelb) } .budget .zahl small { font-size:.9rem; color:var(--muted); font-weight:600 }
.budget p { margin:6px 0 0 }
.balken { height:10px; background:#25262b; border-radius:6px; overflow:hidden; margin-top:8px } .balken span { display:block; height:100%; background:var(--gruen) } .balken.zuviel span { background:var(--rot) }
.projekte { display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none } .projekte::-webkit-scrollbar { display:none }
.projekte button { flex:none; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:8px 12px; white-space:nowrap }
.projekte button.an { background:var(--text); color:#111; border-color:var(--text) } .projekte b { margin-left:4px; opacity:.7 } .projekte i { margin-left:4px; color:var(--rot); font-style:normal; font-weight:900 }
.werkzeug { display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:10px } .werkzeug select { width:auto }
.liste { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.karte { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:14px; overflow:hidden }
.karte.s-arbeit { border-left-color:var(--blau) } .karte.s-wartet { border-left-color:var(--gelb) } .karte.s-pausiert { opacity:.7 } .karte.s-erledigt { border-left-color:var(--gruen); opacity:.6 }
.zeile { width:100%; display:flex; gap:10px; justify-content:space-between; align-items:flex-start; padding:12px 14px; border:0; background:none; text-align:left }
.titel { display:grid; gap:2px; min-width:0 } .titel b { font-weight:650 } .titel small { color:var(--muted); font-size:.75rem }
.rechts { display:grid; justify-items:end; gap:4px; flex:none } .rechts small { color:var(--muted); font-size:.75rem; white-space:nowrap }
.chip { font-size:.7rem; padding:2px 8px; border-radius:999px; background:#25262b; white-space:nowrap }
.chip.s-arbeit { background:#0c3a52; color:#9bdcff } .chip.s-wartet { background:#4a3a00; color:#ffe17a } .chip.s-erledigt { background:#163b05; color:#a8f07a } .chip.hoch { background:#4d1414; color:#ffb4b4 }
.details { padding:0 14px 12px; border-top:1px solid var(--line) } .details p { margin:10px 0 0 } .lbl { display:block; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
.details pre { white-space:pre-wrap; font:inherit; font-size:.85rem; color:#c9ccd1; background:#101114; border-radius:10px; padding:10px; margin:10px 0 0; max-height:50vh; overflow:auto }
footer { text-align:center; margin-top:24px } .leise { border:0; background:none; color:var(--muted); padding:10px }