:root{--accent:#f49b00;--accent-d:#c97f00;--headline:#3a002a;--surface:#fff;--surface-alt:#fbf7f1;--border:#ecdfc4;--green:#c7d301;--danger:#a3352c;--success:#2e7d32;--text:#2b2226;--muted:#7a6b70;--radius:10px;--nav-h:58px;--head-h:52px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.4 Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--surface-alt);padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
body.sheet-open{overflow:hidden}
h1,h2,h3{color:var(--headline);margin:.2em 0 .5em;line-height:1.2}
h2{font-size:1.15rem}h3{font-size:1rem}
a{color:var(--accent-d)}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
/* Kopf */
#app-head{position:sticky;top:0;z-index:20;height:var(--head-h);display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--headline);color:#fff}
#app-head .logo{font-weight:700;letter-spacing:.2px}
#app-head .sub{opacity:.75;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
#app-head button{background:transparent;border:0;color:#fff;font-size:1.2rem;padding:6px 8px;cursor:pointer}
#off-badge{background:var(--accent);color:#2b1a00;border-radius:999px;font-size:.7rem;padding:2px 8px;font-weight:600}
main{max-width:980px;margin:0 auto;padding:12px 12px 90px}
/* Navigation unten */
#bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;background:#fff;border-top:1px solid var(--border)}
#bottom-nav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.68rem;color:var(--muted);cursor:pointer;padding:4px 2px}
#bottom-nav button .ic{font-size:1.25rem;line-height:1}
#bottom-nav button.on{color:var(--headline);font-weight:600;box-shadow:inset 0 3px 0 var(--accent)}
/* Chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;position:sticky;top:var(--head-h);z-index:10;background:var(--surface-alt);margin:0 -12px;padding-left:12px;padding-right:12px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 13px;font-size:.85rem;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--accent);border-color:var(--accent);color:#2b1a00;font-weight:600}
/* Karten, Kacheln */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin:0 0 12px}
.card>h3:first-child{margin-top:0}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.kachel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.kachel .k-wert{font-size:1.35rem;font-weight:700;color:var(--headline)}
.kachel .k-label{font-size:.78rem;color:var(--muted)}
.kachel .k-sub{font-size:.72rem;color:var(--muted);margin-top:2px}
.kachel.warn{border-color:var(--accent);background:#fff8ea}
.kachel.bad{border-color:var(--danger)}
.badge{display:inline-block;border-radius:999px;padding:1px 8px;font-size:.72rem;background:#f2e8d0;color:#5b4a1f}
.badge.ok{background:#e1f0d9;color:#1f5a22}.badge.warn{background:#ffe9c0;color:#7a4a00}.badge.bad{background:#f6d9d6;color:var(--danger)}
.empty{color:var(--muted);text-align:center;padding:18px 8px}
.hint{color:var(--muted);font-size:.85rem;margin:.3em 0 .8em}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.sb{justify-content:space-between}
.grow{flex:1}
.muted{color:var(--muted)}.small{font-size:.8rem}.r{text-align:right}.bad-t{color:var(--danger)}.ok-t{color:var(--success)}
/* Buttons */
.btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:500;min-height:40px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#2b1a00;font-weight:600}
.btn.danger{color:var(--danger);border-color:#e3b9b5}
.btn.sm{padding:5px 10px;min-height:32px;font-size:.85rem}
.btn:disabled{opacity:.5;cursor:default}
.btn-icon{border:0;background:none;font-size:1.2rem;cursor:pointer;padding:6px 10px}
.btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.btn-row.sticky{position:sticky;bottom:0;background:#fff;padding:10px 0 2px;border-top:1px solid var(--border)}
.fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom));z-index:15;width:54px;height:54px;border-radius:50%;border:0;background:var(--accent);color:#2b1a00;font-size:1.8rem;box-shadow:0 3px 10px rgba(0,0,0,.25);cursor:pointer}
/* Formulare */
.form{display:flex;flex-wrap:wrap;gap:8px 10px}
.fld{display:flex;flex-direction:column;gap:3px;flex:1 1 100%;font-size:.85rem}
.fld.half{flex:1 1 calc(50% - 6px);min-width:130px}
.fld>span{color:var(--muted)}.fld>span em{font-style:normal;opacity:.8}
.fld small{color:var(--muted);font-size:.75rem}
.fld.chk{flex-direction:row;align-items:center;gap:8px}
.fld.chk input{width:20px;height:20px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],input[type=search],input[type=number],select,textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 10px;background:#fff;font-size:16px;min-height:42px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0}
.search{margin-bottom:10px}
.form-h{flex:1 1 100%;margin:10px 0 0;border-bottom:1px solid var(--border);padding-bottom:3px}
/* Sheet */
.sheet-back{position:fixed;inset:0;z-index:50;background:rgba(40,10,30,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:100%;max-width:640px;max-height:94vh;border-radius:16px 16px 0 0;display:flex;flex-direction:column}
.sheet.wide{max-width:900px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 4px 16px;border-bottom:1px solid var(--border)}
.sheet-head h2{margin:0;font-size:1.05rem}
.sheet-body{padding:12px 16px 16px;overflow:auto}
.sheet-back.dlg{z-index:60;align-items:center;padding:16px}
.dialog{background:#fff;border-radius:14px;padding:16px;max-width:420px;width:100%}
@media(min-width:700px){.sheet-back{align-items:center}.sheet{border-radius:16px}}
/* Tabellen */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff;margin-bottom:12px}
.tbl{border-collapse:collapse;width:100%;font-size:.88rem}
.tbl th{background:#f6efe0;text-align:left;font-weight:600;padding:7px 9px;white-space:nowrap;position:sticky;top:0}
.tbl td{padding:7px 9px;border-top:1px solid #f0e6d0;vertical-align:top}
.tbl th.r,.tbl td.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover{background:#fff8ea}
.tbl tr.sum td{font-weight:700;background:#faf3e3}
.tbl tr.bad td{color:var(--danger)}
/* Liste (Karten-Zeilen für Mobilgeräte) */
.liste{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;display:flex;gap:10px;align-items:center;cursor:pointer}
.item .main{flex:1;min-width:0}.item .t{font-weight:600;color:var(--headline)}.item .s{font-size:.8rem;color:var(--muted)}
.item .v{text-align:right;font-weight:600;white-space:nowrap}
.gruppe-kopf{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 6px;border-bottom:2px solid var(--accent);padding-bottom:3px}
.gruppe-kopf .name{font-weight:700;color:var(--headline)}.gruppe-kopf .total{font-weight:600}
/* Balken */
.bar{height:10px;background:#f2e8d0;border-radius:6px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--accent)}
/* Anmeldung */
.auth{max-width:380px;margin:8vh auto;padding:20px;background:#fff;border:1px solid var(--border);border-radius:16px}
.auth h1{font-size:1.4rem}.auth .btn{width:100%;margin-top:8px}
.auth .fld{margin-bottom:8px}
.err{color:var(--danger);font-size:.85rem;margin:6px 0}
/* Toast */
#toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 20px);transform:translateX(-50%) translateY(20px);background:#333;color:#fff;padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:80;max-width:90vw;font-size:.88rem}
#toast.show{opacity:1;transform:translateX(-50%)}#toast.fehler{background:var(--danger)}
/* Jahreskalender (Bildschirm) */
.jk{display:grid;grid-template-columns:repeat(12,minmax(70px,1fr));gap:2px;overflow-x:auto;font-size:.7rem}
/* Druck */
#print-area{display:none}
@media print{
 @page{size:A4;margin:10mm}
 body.printing>*:not(#print-area){display:none!important}
 body.printing{background:#fff;padding:0}
 body.printing #print-area{display:block}
 #print-area.quer{page:quer}
}
@page quer{size:A4 landscape;margin:8mm}
.fab ~ .btn-row{justify-content:flex-start}