:root { --rosa:#D4006E; --grau:#F4F4F4; --rand:#d9d9d9; --text:#222; --rot:#C62828; --gelb:#FFF4CC; }
* { box-sizing:border-box; }
body { margin:0; background:var(--grau); color:var(--text); font:17px/1.35 "Segoe UI",system-ui,-apple-system,sans-serif; padding-bottom:env(safe-area-inset-bottom); }
.kopf { display:flex; align-items:center; gap:12px; background:#fff; padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); border-bottom:1px solid var(--rand); position:sticky; top:0; z-index:5; }
.kopf img { height:34px; }
.kopf div { display:flex; flex-direction:column; line-height:1.15; }
.kopf span { font-size:.85rem; color:#666; }
main { max-width:560px; margin:0 auto; padding:14px 16px 40px; }
.karte { background:#fff; border:1px solid var(--rand); border-radius:10px; padding:14px; margin-bottom:12px; }
h2 { margin:0 0 10px; font-size:1.05rem; }
label { display:block; font-size:.85rem; color:#555; margin:8px 0 3px; }
input, select { width:100%; font:inherit; padding:11px 12px; border:1px solid var(--rand); border-radius:8px; background:#fff; }
input:focus, select:focus { outline:2px solid var(--rosa); border-color:var(--rosa); }
input:disabled, select:disabled { background:#eee; color:#777; }
.reihe { display:flex; gap:8px; align-items:flex-end; }
.reihe > * { flex:1; }
.reihe .eng { flex:0 0 auto; }
.zeit { display:flex; gap:6px; align-items:center; }
.zeit input { text-align:center; font-size:1.25rem; font-weight:600; }
.zeit button { flex:0 0 52px; }
.zg-knopf { font:inherit; font-weight:600; padding:11px 14px; border-radius:8px; border:1px solid var(--rosa); background:var(--rosa); color:#fff; cursor:pointer; }
.zg-knopf.hell { background:#fff; color:var(--rosa); }
.zg-knopf:disabled { opacity:.45; }
.zg-knopf.voll { width:100%; }
.umschalter { display:flex; gap:8px; }
.umschalter button { flex:1; }
.zeile { border-top:1px dashed var(--rand); padding-top:8px; margin-top:8px; }
.zeile:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.status { font-size:.9rem; color:#555; margin:4px 2px 12px; }
.status.fehl { color:var(--rot); font-weight:600; }
.hinweis { background:var(--gelb); border-radius:8px; padding:10px 12px; margin:0 0 12px; font-size:.95rem; }
.hinweis.rot { background:#fde8e8; color:var(--rot); }
.rest { font-weight:600; margin-top:8px; }
.rest.rot { color:var(--rot); }
.rest.ok { color:#2e7d32; }
.tage { list-style:none; margin:0; padding:0; }
.tage li { display:flex; justify-content:space-between; padding:11px 2px; border-top:1px solid var(--rand); cursor:pointer; }
.tage li:first-child { border-top:0; }
.tage .offen { color:var(--rot); }
.klein { font-size:.85rem; color:#666; }