/* Grabpflege Schanbacher – mobile-first, sonnenlicht-tauglich, große Bedienelemente */
:root{
  --gruen:#2E6B45; --gruen-dunkel:#20492F; --gruen-hell:#E7F1EA; --gruen-mittel:#4E8A66;
  --bg:#F4F6F3; --karte:#FFFFFF; --text:#17211B; --muted:#5C6B61; --linie:#E2E7E1;
  --gut:#2E7D46; --mittel:#B36F0A; --schlecht:#BC3A2B; --blau:#2A6496;
  --radius:14px; --schatten:0 1px 3px rgba(20,40,25,.08);
  --safe-b:env(safe-area-inset-bottom, 0px); --safe-t:env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{font-size:17px}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.45;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none}
.hidden{display:none!important}
.hidden-input{position:fixed; left:-9999px; width:1px; height:1px; opacity:0}
button{font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer; touch-action:manipulation}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{margin:0; line-height:1.2}

/* ---------- Boot & Sperrbildschirm ---------- */
.boot,.lock{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(170deg,#F7FAF6 0%, #E9F1EA 100%)}
.boot-inner,.lock-inner{text-align:center; padding:32px; width:100%; max-width:360px}
.lock-logo{font-size:56px; margin-bottom:8px}
.lock h1{font-size:1.7rem; color:var(--gruen-dunkel); margin-bottom:6px}
.lock-sub{color:var(--muted); margin:10px 0 18px}
.pin-input{width:100%; padding:16px; font-size:2rem; text-align:center; letter-spacing:.5em;
  border:2px solid var(--linie); border-radius:var(--radius); background:#fff; margin-bottom:14px; outline:none}
.pin-input:focus{border-color:var(--gruen)}
.lock-msg{min-height:1.4em; color:var(--schlecht); font-weight:600}
#bootMsg{color:var(--muted)}

/* ---------- Grundgerüst ---------- */
.app{max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  padding:calc(10px + var(--safe-t)) 14px 10px; background:var(--bg); border-bottom:1px solid var(--linie)}
.topbar-title{font-size:1.35rem; font-weight:700; flex:1; color:var(--gruen-dunkel)}
.worker-chip{background:var(--gruen-hell); color:var(--gruen-dunkel); font-weight:600;
  padding:8px 12px; border-radius:999px; font-size:.95rem}
.icon-btn{font-size:1.4rem; padding:6px 10px; color:var(--muted)}
.main{flex:1; padding:14px 14px calc(86px + var(--safe-b)); }

.tabbar{position:fixed; bottom:0; left:0; right:0; z-index:20; display:flex; justify-content:center; gap:2px;
  background:#fff; border-top:1px solid var(--linie); padding:6px 4px calc(6px + var(--safe-b))}
.tab{flex:1; max-width:130px; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; font-size:.78rem; color:var(--muted); font-weight:600; border-radius:10px; position:relative}
.tab.active{color:var(--gruen); background:var(--gruen-hell)}
.tab-ico{font-size:1.35rem; line-height:1}
.badge{position:absolute; top:2px; right:16%; background:var(--schlecht); color:#fff; font-size:.7rem;
  min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px}

/* ---------- Karten & Buttons ---------- */
.card{background:var(--karte); border-radius:var(--radius); box-shadow:var(--schatten);
  padding:16px; margin-bottom:14px}
.card h2{font-size:1.05rem; color:var(--muted); font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.card h2 .spacer{flex:1}
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:56px; border-radius:var(--radius); font-size:1.12rem; font-weight:700; padding:10px 16px}
.btn-xl{min-height:64px; font-size:1.2rem}
.btn-primary{background:var(--gruen); color:#fff}
.btn-primary:active{background:var(--gruen-dunkel)}
.btn-sekundaer{background:var(--gruen-hell); color:var(--gruen-dunkel)}
.btn-neutral{background:#EDF0EC; color:var(--text)}
.btn-rot{background:#FBEAE7; color:var(--schlecht)}
.btn-blau{background:#E8F0F7; color:var(--blau)}
.btn[disabled]{opacity:.45}
.btn-reihe{display:flex; gap:10px}
.btn-reihe .btn{flex:1}
.hinweis{color:var(--muted); font-size:.92rem}
.gross{font-size:1.5rem; font-weight:800}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Status ---------- */
.dot{display:inline-block; width:12px; height:12px; border-radius:6px; margin-right:4px; vertical-align:baseline}
.dot.gut{background:var(--gut)} .dot.mittel{background:var(--mittel)} .dot.schlecht{background:var(--schlecht)}
.dot.leer{background:#C9D2CB}
.chip{display:inline-flex; align-items:center; gap:6px; background:#EEF2ED; color:var(--text);
  border-radius:999px; padding:7px 13px; font-size:.95rem; font-weight:600}
.chip.an{background:var(--gruen); color:#fff}
.chip.prio-hoch{background:#FBEAE7; color:var(--schlecht)}
.chip.prio-mittel{background:#FBF3E2; color:var(--mittel)}
.chip-reihe{display:flex; flex-wrap:wrap; gap:8px}
.pill{font-size:.8rem; font-weight:700; padding:3px 9px; border-radius:999px}
.pill.gruen{background:var(--gruen-hell); color:var(--gruen-dunkel)}
.pill.gelb{background:#FBF3E2; color:var(--mittel)}
.pill.rot{background:#FBEAE7; color:var(--schlecht)}
.pill.grau{background:#EEF0ED; color:var(--muted)}

/* ---------- Listen ---------- */
.liste{display:flex; flex-direction:column; gap:10px}
.zeile{display:flex; align-items:center; gap:12px; background:var(--karte); border-radius:var(--radius);
  box-shadow:var(--schatten); padding:10px 12px; width:100%; text-align:left}
.zeile:active{background:var(--gruen-hell)}
.zeile.fertig{opacity:.55}
.zeile-thumb{width:64px; height:64px; border-radius:10px; object-fit:cover; background:#DDE4DD; flex-shrink:0}
.zeile-mitte{flex:1; min-width:0}
.zeile-titel{font-weight:700; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zeile-sub{color:var(--muted); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zeile-rechts{text-align:right; flex-shrink:0; font-size:.9rem; color:var(--muted)}
.zeile-nr{font-weight:800; color:var(--gruen); font-size:1.05rem}

/* ---------- Suche & Filter ---------- */
.suchfeld{width:100%; padding:13px 16px; border:1.5px solid var(--linie); border-radius:var(--radius);
  background:#fff; font-size:1.05rem; margin-bottom:10px; outline:none}
.suchfeld:focus{border-color:var(--gruen)}
.filter-reihe{display:flex; gap:8px; margin-bottom:12px; overflow-x:auto; padding-bottom:2px}
.filter-reihe .chip{flex-shrink:0}

/* ---------- Vollbild-Overlay (Grab-Arbeit / Detail) ---------- */
.overlay{position:fixed; inset:0; z-index:40; background:var(--bg); overflow-y:auto;
  max-width:520px; margin:0 auto}
.ov-kopf{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  background:var(--bg); padding:calc(10px + var(--safe-t)) 14px 10px; border-bottom:1px solid var(--linie)}
.ov-zurueck{font-size:1.05rem; font-weight:700; color:var(--gruen); display:flex; align-items:center; gap:4px; padding:6px 8px 6px 0}
.ov-titel{flex:1; font-size:1.15rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ov-body{padding:14px 14px calc(160px + var(--safe-b))}
.ov-fuss{position:fixed; bottom:0; left:0; right:0; z-index:6; max-width:520px; margin:0 auto;
  background:linear-gradient(transparent, var(--bg) 30%); padding:18px 14px calc(14px + var(--safe-b))}

/* ---------- Grab-Arbeitsansicht ---------- */
.foto-haupt{width:100%; border-radius:var(--radius); background:#DDE4DD; display:block; max-height:34vh; object-fit:cover}
.foto-tabs{display:flex; gap:8px; margin:10px 0}
.foto-galerie{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px}
.foto-galerie img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; background:#DDE4DD}
.timer{font-variant-numeric:tabular-nums; font-weight:800; color:var(--gruen-dunkel)}
.aufgaben-box{background:#FFF8E8; border:1px solid #F0E3BC; border-radius:var(--radius); padding:12px 14px; margin-bottom:12px}
.aufgaben-box.leer{background:var(--gruen-hell); border-color:#D5E6DA}
.aufgabe-item{display:flex; align-items:flex-start; gap:10px; padding:8px 0}
.aufgabe-item + .aufgabe-item{border-top:1px solid rgba(0,0,0,.06)}
.check{width:28px; height:28px; border-radius:8px; border:2px solid var(--gruen); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; background:#fff; margin-top:1px}
.check.an{background:var(--gruen)}
textarea.eingabe,input.eingabe,select.eingabe{width:100%; padding:12px 14px; border:1.5px solid var(--linie);
  border-radius:12px; background:#fff; font-size:1rem; outline:none; margin-top:6px}
textarea.eingabe:focus,input.eingabe:focus{border-color:var(--gruen)}
label.feld{display:block; font-size:.9rem; font-weight:600; color:var(--muted); margin-top:12px}

/* ---------- Info-Tabellen ---------- */
.info-tab{width:100%; border-collapse:collapse; font-size:.98rem}
.info-tab td{padding:7px 0; vertical-align:top; border-bottom:1px solid var(--linie)}
.info-tab tr:last-child td{border-bottom:0}
.info-tab td:first-child{color:var(--muted); width:42%; padding-right:10px}
.info-tab td:last-child{font-weight:600}

/* ---------- Sheet (unteres Auswahlmenü) ---------- */
.sheet{position:fixed; inset:0; z-index:50; background:rgba(15,25,18,.45); display:flex; align-items:flex-end}
.sheet-inner{background:#fff; width:100%; max-width:520px; margin:0 auto; border-radius:20px 20px 0 0;
  padding:20px 16px calc(20px + var(--safe-b)); max-height:88dvh; overflow-y:auto}
.sheet-titel{font-size:1.2rem; font-weight:800; margin-bottom:14px}
.sheet .btn{margin-bottom:10px}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:calc(96px + var(--safe-b)); left:50%; transform:translateX(-50%); z-index:60;
  background:var(--gruen-dunkel); color:#fff; padding:12px 20px; border-radius:999px; font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.25); max-width:90vw; text-align:center}

/* ---------- Auswertung ---------- */
.kpi-reihe{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.kpi{background:var(--karte); border-radius:var(--radius); box-shadow:var(--schatten); padding:12px 14px}
.kpi .wert{font-size:1.45rem; font-weight:800; color:var(--gruen-dunkel)}
.kpi .lbl{font-size:.82rem; color:var(--muted); font-weight:600}
.wirt-tab{width:100%; border-collapse:collapse; font-size:.9rem}
.wirt-tab th{text-align:left; color:var(--muted); font-size:.78rem; padding:6px 4px; border-bottom:2px solid var(--linie)}
.wirt-tab td{padding:8px 4px; border-bottom:1px solid var(--linie); vertical-align:middle}
.wirt-tab td.r,.wirt-tab th.r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.fortschritt{height:10px; background:#E5EAE4; border-radius:5px; overflow:hidden; margin:8px 0 4px}
.fortschritt > div{height:100%; background:var(--gruen); border-radius:5px; transition:width .3s}

/* ---------- Foto-Voll ---------- */
.foto-voll{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.92); display:flex; align-items:center;
  justify-content:center; flex-direction:column; gap:12px; padding:20px}
.foto-voll img{max-width:100%; max-height:80vh; border-radius:8px}
.foto-voll .meta{color:#ddd; font-size:.9rem; text-align:center}

@media (min-width:521px){ .overlay,.ov-fuss{border-left:1px solid var(--linie); border-right:1px solid var(--linie)} }