@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#f5f8f4;--dark:#0f3d2a;--ink:#0f4a31;--muted:#456455;--line:#cfe0d4;--gold:#b08d4b;--sur:#fff;--neg:#a4412f;--pos:#2f6b46;--f1:#d4e6da}
*{box-sizing:border-box}
body{margin:0;font:400 1rem/1.5 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:#1a1a1a}
a{color:var(--ink)}
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}
nav.side{background:var(--dark);color:#fff;padding:1.25rem 1rem;position:sticky;top:0;height:100vh;overflow:auto}
nav.side img{width:56px;display:block;margin:0 0 .5rem}
nav.side .brand{font-weight:500;letter-spacing:.02em;margin-bottom:1.5rem;color:#fff}
nav.side .brand small{display:block;color:var(--gold);font-weight:400;font-size:.8rem}
nav.side a{display:block;color:#cfe0d4;text-decoration:none;padding:.45rem .7rem;border-radius:6px;margin:1px 0}
nav.side a:hover{background:#ffffff14}
nav.side a.on{background:#ffffff1f;color:#fff;box-shadow:inset 3px 0 var(--gold)}
nav.side h6{margin:1.2rem .7rem .3rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:500}
nav.side .user{margin-top:1.5rem;font-size:.85rem;color:#a9c2b3;padding:0 .7rem}
nav.side button{background:none;border:0;color:#cfe0d4;padding:0;text-decoration:underline;cursor:pointer;font:inherit}
main{padding:1.75rem clamp(1rem,3vw,2.5rem);max-width:1300px;width:100%}
h1{font-weight:500;letter-spacing:-.02em;color:var(--dark);margin:0 0 1rem;font-size:1.8rem}
h2{font-weight:500;color:var(--dark);font-size:1.15rem;margin:1.8rem 0 .6rem}
.bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.bar form{display:flex;gap:.4rem}
input,select,textarea{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:6px;background:#fff;max-width:100%}
textarea{width:100%;min-height:5rem}
.btn{background:var(--dark);color:#fff;border:0;border-radius:6px;padding:.5rem .9rem;text-decoration:none;cursor:pointer;font:inherit;display:inline-block}
.btn.alt{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--neg)}
.btn:hover{filter:brightness(1.15)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem}
.card{background:var(--sur);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.card small{color:var(--muted);display:block}
.card b{font-size:1.5rem;font-weight:500;color:var(--dark);font-variant-numeric:tabular-nums}
.card.gold{border-top:3px solid var(--gold)}
table{width:100%;border-collapse:collapse;background:var(--sur);border:1px solid var(--line)}
th,td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--f1);font-weight:500;font-size:.85rem;color:var(--dark)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:0}
.neg{color:var(--neg);font-weight:500}.pos{color:var(--pos)}
.tag{display:inline-block;padding:.05rem .5rem;border-radius:99px;background:var(--f1);font-size:.8rem}
.tag.warn{background:#f3dcd6;color:var(--neg)}
.msg{padding:.6rem .9rem;border-radius:6px;background:var(--f1);margin-bottom:1rem}.msg.error{background:#f3dcd6;color:var(--neg)}
.form{background:var(--sur);border:1px solid var(--line);border-radius:10px;padding:1.2rem;max-width:760px}
.form p{margin:.6rem 0}.form label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.15rem}
.form input:not([type=checkbox]),.form select{width:100%}
.errorlist{color:var(--neg);list-style:none;padding:0;margin:.2rem 0}
.helptext{font-size:.8rem;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem}
.wrap{overflow-x:auto}
.login{max-width:380px;margin:12vh auto;padding:0 1rem}
.login img{width:72px}
.muted{color:var(--muted)}
@media(max-width:800px){.layout{grid-template-columns:1fr}nav.side{position:static;height:auto}}

/* Diagramme: ein Hero (dunkel), 2-3 kleine */
.charts{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1rem;margin:0 0 1.5rem;align-items:start}
.charts .hero{background:linear-gradient(160deg,var(--dark),#0b2e20);color:#fff;border-radius:14px;padding:1.4rem 1.5rem;border-top:3px solid var(--gold)}
.charts h3{margin:0;font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero h3{color:var(--gold)}
.charts .big{margin:.15rem 0 .1rem;font-size:1.7rem;font-weight:500;letter-spacing:-.02em;color:var(--dark);font-variant-numeric:tabular-nums}
.hero .big{font-size:clamp(1.9rem,4vw,2.8rem);color:#fff}
.charts .sub{margin:0 0 .6rem;font-size:.85rem;color:var(--muted)}.hero .sub{color:#a9c2b3}
.smalls{display:grid;gap:1rem}
.small{background:var(--sur);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.legend{display:flex;gap:1rem;font-size:.8rem;margin:.4rem 0 .7rem}.legend i,.dl i{display:inline-block;width:.7rem;height:.7rem;border-radius:2px;margin-right:.35rem}
.k1{background:#6fa383}.k2{background:var(--gold)}
.small .k1{background:var(--ink)}
.hbars{display:grid;gap:.35rem;max-height:30rem;overflow:auto;padding-right:.3rem}
.hrow{display:grid;grid-template-columns:minmax(5rem,9rem) 1fr 5.5rem;gap:.6rem;align-items:center;font-size:.8rem}
.hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
.htrack{display:grid;gap:2px}
.htrack b{display:block;height:.55rem;border-radius:3px;width:var(--w);animation:wachsen .9s ease-out}
.hv{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.hv small{display:block;opacity:.65}
.small .hl{opacity:1}
.donutwrap{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.donut{width:7rem;height:7rem;border-radius:50%;flex:none;-webkit-mask:radial-gradient(circle,transparent 46%,#000 47%);mask:radial-gradient(circle,transparent 46%,#000 47%)}
.dl{list-style:none;margin:0;padding:0;font-size:.82rem;display:grid;gap:.15rem}.dl small{color:var(--muted)}
.cols{display:flex;gap:.4rem;align-items:flex-end;height:8.5rem;margin-top:.5rem}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font-size:.72rem;gap:.15rem;min-width:0}
.col b{display:block;width:100%;height:var(--h);min-height:2px;background:linear-gradient(var(--gold),#c9aa68);border-radius:4px 4px 0 0;animation:hoch .9s ease-out}
.col small{color:var(--muted)}.col span{color:var(--ink)}
.ringwrap{display:flex;align-items:center;gap:1rem;margin-top:.5rem}
.ring{width:6.5rem;height:6.5rem;border-radius:50%;display:grid;place-items:center;flex:none;position:relative}
.ring::before{content:"";position:absolute;inset:.6rem;border-radius:50%;background:var(--sur)}
.ring span{position:relative;font-size:1.25rem;font-weight:500;color:var(--dark)}
.ring.warn span{color:#8a6a2a}
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}
.band div{padding:.2rem 0}.band small{color:var(--muted);display:block}
.band b{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:500;letter-spacing:-.025em;color:var(--dark);font-variant-numeric:tabular-nums}
.band .gold b{color:#8a6a2a}
@keyframes wachsen{from{width:0}}@keyframes hoch{from{height:0}}
@media(prefers-reduced-motion:reduce){.htrack b,.col b{animation:none}}
@media(max-width:1000px){.charts{grid-template-columns:1fr}.smalls{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
@media(max-width:800px){nav.side{display:flex;flex-wrap:wrap;gap:.2rem .3rem;align-items:center;padding:.6rem}nav.side img,nav.side h6{display:none}nav.side .brand{margin:0 .8rem 0 0}nav.side .brand small{display:none}nav.side .user{margin:0 0 0 auto}}

/* Icons, Navigation, Schnellaktionen, Heute zu tun */
svg.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;margin-right:.55em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.big{width:2rem;height:2rem;margin:0 0 .3rem;color:var(--gold);display:block}
svg.i.go{margin:0 0 0 auto;opacity:.45}
nav.side a,nav.side button{display:flex;align-items:center}
nav.side a svg.i{opacity:.85}
nav.side .brandrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
nav.side .brandrow img{width:44px;margin:0}
nav.side .brandrow .brand{margin:0}
.navsearch{position:relative;margin:0 0 .8rem}
.navsearch svg.i{position:absolute;left:.65rem;top:.62rem;margin:0;opacity:.6}
.navsearch input{width:100%;padding:.5rem .6rem .5rem 2.1rem;background:#ffffff14;border:1px solid #ffffff26;color:#fff;border-radius:8px}
.navsearch input::placeholder{color:#a9c2b3}
nav.side .user{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
nav.side .user button{text-decoration:none;font-size:.85rem;color:#a9c2b3}
nav.side .user button svg.i{margin-right:.3rem}
.herohead{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;background:linear-gradient(135deg,var(--dark),#124d36 60%,#1b6a4a);color:#fff;border-radius:16px;padding:1.5rem 1.6rem 1.3rem;margin-bottom:1.1rem;border-bottom:3px solid var(--gold);overflow:hidden;position:relative}
.herohead p{margin:0;color:var(--gold);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.herohead h1{color:#fff;margin:.15rem 0 .2rem;font-size:clamp(1.5rem,3.4vw,2.3rem)}
.herohead span{color:#cfe0d4;display:block}
.herohead .skyline{width:min(320px,40%);color:#ffffff1c;flex:none;align-self:flex-end;margin:0 0 -1.3rem}
.herohead.small{padding:1.1rem 1.4rem}.herohead.small h1{font-size:1.6rem}
.herohead .btn.alt{align-self:center}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin:0 0 1.2rem}
.quick a,.quick button{display:block;text-align:left;background:var(--sur);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;text-decoration:none;color:var(--dark);cursor:pointer;font:inherit;width:100%;transition:transform .15s,box-shadow .15s,border-color .15s}
.quick form{margin:0}
.quick a:hover,.quick button:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0f3d2a1f;border-color:var(--gold)}
.quick svg.i{width:1.6rem;height:1.6rem;margin:0 0 .35rem;color:var(--gold);display:block}
.quick b{display:block;font-weight:500}.quick small{color:var(--muted)}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.todo li a{display:flex;align-items:center;gap:.2rem;background:var(--sur);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:10px;padding:.7rem 1rem;text-decoration:none;color:inherit}
.todo li a:hover{border-color:var(--gold)}
.todo li.rot a{border-left-color:var(--neg)}.todo li.gelb a{border-left-color:var(--gold)}.todo li.blau a{border-left-color:#4a7fa8}
.todo li span{display:block}.todo li b{font-weight:500}.todo li small{display:block;color:var(--muted)}
.todo li.rot svg.i:first-child{color:var(--neg)}.todo li.gelb svg.i:first-child{color:#8a6a2a}
.leer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem;padding:1.6rem 1rem;background:var(--sur);border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.leer svg.i{width:2.4rem;height:2.4rem;margin:0;color:var(--pos)}.leer b{color:var(--dark);font-weight:500}
.leer.slim{padding:.9rem;border:0;background:none}.leer.slim svg.i{width:1.6rem;height:1.6rem}
h2 .more{font-size:.8rem;font-weight:400;margin-left:.6rem}
.tag.ok{background:#d6ecdc;color:var(--pos)}
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;position:sticky;top:0;background:var(--bg);padding:.5rem 0;z-index:2;border-bottom:1px solid var(--line);margin-top:1.2rem}
.tabs a{padding:.35rem .8rem;border-radius:99px;background:var(--sur);border:1px solid var(--line);text-decoration:none;font-size:.9rem}
.tabs a:hover{border-color:var(--gold)}
.hits{list-style:none;padding:0;display:grid;gap:.3rem}.hits li a{display:block;background:var(--sur);border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;text-decoration:none}
.monat{font-weight:500;font-size:1.15rem;min-width:9rem;text-align:center}
form.inline{display:flex;gap:.4rem}
.form.upload{max-width:none;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.form.upload p{margin:0;flex:1 1 20rem}
.letter textarea{min-height:18rem}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.msg.success{background:#d6ecdc;color:var(--pos)}
button.btn:disabled{opacity:.6;cursor:wait}
@media print{nav.side,.bar,.quick,.tabs,.btn{display:none!important}.layout{display:block}.form{border:0}body{background:#fff}}
@media(max-width:800px){.herohead .skyline{display:none}nav.side .brandrow img,nav.side .navsearch{display:none}nav.side a svg.i{margin-right:.3rem}nav.side .brandrow{margin:0 .8rem 0 0}}
@media(max-width:800px){nav.side{flex-wrap:nowrap!important;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-block:.5rem!important;position:sticky;top:0;z-index:5}nav.side::-webkit-scrollbar{display:none}nav.side a{flex:none}nav.side h6,nav.side .themes,nav.side .user span{display:none!important}}
@media(max-width:800px){.quick{grid-template-columns:1fr 1fr}.quick a,.quick button{padding:.7rem .8rem}}
input[type=file]{display:block;width:100%;max-width:560px;box-sizing:border-box;padding:.55rem;background:var(--sur);border:2px dashed var(--line);border-radius:12px;color:var(--muted);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
input[type=file]:hover,input[type=file]:focus-visible{border-color:var(--gold);background:#fffdf6;outline:none}
input[type=file]::file-selector-button{margin-right:.9rem;padding:.55rem 1.1rem;border:0;border-radius:9px;background:linear-gradient(135deg,var(--dark),#1b6a4a);color:#fff;font:inherit;font-weight:500;cursor:pointer;box-shadow:0 2px 6px #0f3d2a40;transition:transform .15s,box-shadow .15s}
input[type=file]::file-selector-button:hover{transform:translateY(-1px);box-shadow:0 5px 14px #0f3d2a50}
.fuss{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}.fuss a,.lgfuss a{color:inherit}
.lgfuss{position:fixed;left:0;right:0;bottom:.7rem;text-align:center;font-size:.85rem;color:#ffffffb0;z-index:3}
.rechtseite{background:var(--bg,#f6f8f6)}.recht{max-width:760px;margin:0 auto;padding:2rem 1.2rem 4rem;line-height:1.6}.recht h2{margin-top:1.8rem;font-size:1.1rem}.recht code{background:#0001;padding:0 .3rem;border-radius:4px}
.fehlt{background:#fff3cd;color:#7a5b00;padding:0 .3rem;border-radius:4px}
.matrix{margin:.5rem 0 1rem}.matrix th{text-align:left;font-weight:600;width:42%}.matrix small{font-weight:400;color:var(--muted)}
.matrix ul{list-style:none;margin:0;padding:0;display:flex;gap:.3rem 1rem;flex-wrap:wrap}.matrix li label{display:inline-flex;gap:.3rem;align-items:center;margin:0;color:inherit;font-size:.9rem}
.form label.inl{display:inline;font-size:.95rem;color:inherit}
nav.side .user .pw{color:#a9c2b3;font-size:.8rem}
.matrix input{width:auto!important}.matrix td>div,.matrix td>div>div{display:flex;gap:.3rem 1rem;flex-wrap:wrap}
.matrix td>div>div label{display:inline-flex;gap:.3rem;align-items:center;margin:0;color:inherit;font-size:.9rem}