/*
Programm: Mobile Checklisten
Datei: app.css
Bereich: BCSE Checklisten / Darstellung
Kurzbeschreibung:
- Responsive Darstellung fuer Anmeldung und offene Checklisten auf Mobiltelefonen.

Aktuelle Version: BETA.0003

Changelog
=========
- 2026-09-13 | BETA.0001 | Darstellung fuer die eigenstaendige mobile Checklisten-App angelegt.
- 2026-09-14 | BETA.0002 | Kompakte Anzeige fuer aktive Listen und Zuweisungen an Checklistenpunkten ergaenzt.
- 2026-09-14 | BETA.0003 | Auswahlansicht fuer aktive Listen und eigene Aufgaben ergaenzt.
*/
:root{color-scheme:light;--bg:#f1f4f2;--surface:#fff;--text:#17201d;--muted:#68736e;--line:#d9dfdc;--primary:#176b54;--primary-soft:#e1f0ea;--danger:#a53636}
*{box-sizing:border-box}
html{font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg)}
body{margin:0;color:var(--text);background:var(--bg);letter-spacing:0}
button,input{font:inherit}
.login-shell{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-panel{width:min(100%,390px);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px}
.brand-mark{width:48px;height:48px;display:grid;place-items:center;background:var(--primary);color:#fff;border-radius:8px;font-size:1.3rem;font-weight:800}
h1{font-size:1.45rem;margin:14px 0 2px}.muted{color:var(--muted);margin:0 0 24px}
label{display:block;margin:16px 0 6px;font-size:.88rem;font-weight:650}
input{width:100%;min-height:46px;border:1px solid #aeb8b3;border-radius:6px;padding:10px 12px;background:#fff}
input:focus{outline:3px solid rgba(23,107,84,.16);border-color:var(--primary)}
button{border:0}.primary{background:var(--primary);color:#fff;border-radius:6px;padding:12px 16px;font-weight:750}
.full{width:100%;margin-top:22px}.message{padding:11px 12px;border-radius:6px;margin:16px 0}.error{background:#fae8e8;color:var(--danger)}
.app-header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.app-header h1{margin:1px 0 0;font-size:1.2rem}.eyebrow{color:var(--muted);font-size:.78rem}
.sync-status{margin-top:3px;color:var(--muted);font-size:.72rem;min-height:1em}.list-count{margin-top:2px;color:var(--primary);font-size:.74rem;font-weight:750}
.icon-button{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:6px;font-size:1.25rem}
.sync-button{display:grid;place-items:center;line-height:1;cursor:pointer}
.sync-button.is-syncing{animation:sync-spin .8s linear infinite;pointer-events:none}
@keyframes sync-spin{to{transform:rotate(360deg)}}
.connection-banner{display:none;padding:8px 14px;background:#a53636;color:#fff;text-align:center;font-size:.78rem;font-weight:650}
body.is-offline .connection-banner{display:block}
.list-shell{max-width:720px;margin:0 auto;padding:14px 12px calc(30px + env(safe-area-inset-bottom))}
.selection-list{display:grid;gap:9px}.selection-card{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:7px;color:var(--text);text-decoration:none}.selection-card--mine{border-color:#a9cdbf;background:#f8fcfa}.selection-card strong{display:block;font-size:1rem}.selection-card small{display:block;margin-top:3px;color:var(--muted);font-size:.8rem}.selection-card b{font-size:1.7rem;color:var(--primary);line-height:1}.back-link{display:inline-flex;margin:0 2px 10px;color:var(--primary);font-weight:750;text-decoration:none}
.checklist-section{margin-bottom:18px}.day-heading{display:flex;justify-content:space-between;align-items:end;padding:8px 3px;gap:12px}
.day-label{font-weight:800;font-size:1.08rem}.day-weekday{display:block;margin-top:2px;color:var(--muted);font-size:.8rem}.day-progress{font-size:.78rem;color:var(--muted);white-space:nowrap}
.checklist-description{margin:0 3px 10px;color:var(--muted);font-size:.88rem}.items{display:grid;gap:7px}
.checklist-item{width:100%;min-height:64px;display:grid;grid-template-columns:34px 1fr;align-items:center;text-align:left;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:7px;color:var(--text)}
.checklist-item:active{transform:scale(.995)}.check{width:27px;height:27px;display:grid;place-items:center;border:2px solid #8d9993;border-radius:5px;font-weight:900;color:#fff}
.item-main{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.item-name{font-weight:680;overflow-wrap:anywhere}.item-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto;flex-wrap:wrap}.item-status{color:#24704f;font-size:.76rem;font-weight:750}.item-quantity{color:var(--muted);font-size:.88rem}.item-assignees{padding:2px 7px;border:1px solid #abd0c1;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:.74rem;font-weight:750;white-space:nowrap}
.checklist-item.is-done{background:var(--primary-soft);border-color:#abd0c1}.checklist-item.is-done .check{background:var(--primary);border-color:var(--primary)}.checklist-item.is-done .item-name{text-decoration:line-through;color:#50605a}
.checklist-item.is-saving{opacity:.55;pointer-events:none}.checklist-heading{margin:8px 2px 2px;color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase}.checklist-note{padding:11px 12px;background:#f8faf9;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:.9rem}
.empty-state{margin-top:20px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:8px;display:grid;gap:5px}.empty-state span{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#202824;color:#fff;border-radius:6px;padding:10px 14px;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 32px)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:700px){.list-shell{padding-top:24px}.checklist-item{min-height:70px}}