:root{
  --brand:#23262b;--brand-2:#14161a;--brand-ink:#0e0f12;--brand-soft:#eceef1;--brand-soft-2:#dcdfe4;
  --ink:#15171b;--body:#3b4046;--muted:#868c94;--line:#e4e6ea;--line-2:#eef0f2;
  --bg-app:#f4f5f7;--card:#fff;--gold:#9a6f26;--gold-soft:#f3ecdd;
  --ok:#3a4048;--ok-soft:#e7e9ed;--warn:#8a6316;--warn-soft:#f4ecdb;--crit:#b23b34;--crit-soft:#f7e6e4;
  --sh-sm:0 1px 2px rgba(20,22,26,.07),0 1px 1px rgba(20,22,26,.04);--sh-md:0 6px 20px rgba(20,22,26,.12);
  --r:14px;--r-lg:20px;--spring:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"],:root:not([data-theme="light"]) .darkprobe{}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand:#3b4048;--brand-2:#22252b;--brand-ink:#eaecef;--brand-soft:#21242b;--brand-soft-2:#2c3038;
  --ink:#edeff2;--body:#b7bcc4;--muted:#80868f;--line:#282c33;--line-2:#1e2128;
  --bg-app:#0e0f12;--card:#16181d;--gold:#cb9d57;--gold-soft:#292317;--ok:#aab0b9;--ok-soft:#20232a;
  --warn:#cf9f54;--warn-soft:#292215;--crit:#e2665e;--crit-soft:#2c1a18;
  --sh-sm:0 1px 2px rgba(0,0,0,.5);--sh-md:0 10px 34px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --brand:#3b4048;--brand-2:#22252b;--brand-ink:#eaecef;--brand-soft:#21242b;--brand-soft-2:#2c3038;
  --ink:#edeff2;--body:#b7bcc4;--muted:#80868f;--line:#282c33;--line-2:#1e2128;
  --bg-app:#0e0f12;--card:#16181d;--gold:#cb9d57;--gold-soft:#292317;--ok:#aab0b9;--ok-soft:#20232a;
  --warn:#cf9f54;--warn-soft:#292215;--crit:#e2665e;--crit-soft:#2c1a18;
  --sh-sm:0 1px 2px rgba(0,0,0,.5);--sh-md:0 10px 34px rgba(0,0,0,.6);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#0a0b0d;color:var(--ink);-webkit-font-smoothing:antialiased}
.app{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--bg-app);display:flex;flex-direction:column;position:relative}
@media(min-width:520px){.app{margin:22px auto;min-height:calc(100dvh - 44px);border-radius:30px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}}

header{background:linear-gradient(135deg,rgba(32,35,40,.95),rgba(16,18,21,.95));color:#fff;padding:calc(env(safe-area-inset-top) + 14px) 18px 14px;display:flex;align-items:center;gap:11px;position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}
header .back{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);display:none;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
header .back svg{width:19px;height:19px}
header.hasback .back{display:flex}header.hasback .crest{display:none}
header .crest{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:0 0 auto}header .crest svg{width:20px;height:20px}
header .t{flex:1;min-width:0}header .t h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .t p{margin:1px 0 0;font-size:11px;opacity:.8}
header .act{margin-left:auto;display:flex;gap:8px}
header .act button{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:10px;padding:8px;cursor:pointer;display:flex;align-items:center}
header .act button svg{width:18px;height:18px}

main{flex:1;overflow-y:auto;padding:18px 18px 40px}
.view{animation:fade .4s var(--spring)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h2{font-size:20px;margin:2px 0 5px;letter-spacing:-.2px}
.eyebrow{font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin:0 0 6px}
.lead{color:var(--muted);font-size:13.5px;margin:0 0 18px;line-height:1.5}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:14px;box-shadow:var(--sh-sm)}
label{display:block;font-size:12px;font-weight:650;color:var(--body);margin:0 0 7px}
input,textarea,select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;font-family:inherit;background:var(--card);color:var(--ink)}
input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea{resize:none;min-height:70px;line-height:1.45}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;transition:.15s;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--sh-sm)}
.btn svg{width:18px;height:18px}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--brand-soft-2);box-shadow:none}
.btn.soft{background:var(--brand-soft);color:var(--brand-ink);box-shadow:none}
.btn.gold{background:linear-gradient(135deg,#c79a44,#a97e2c)}
.btn.line{background:var(--card);color:var(--body);border:1.5px solid var(--line);box-shadow:none}
.btn.danger{background:var(--card);color:var(--crit);border:1.5px solid var(--crit-soft);box-shadow:none}
.btn.sm{padding:11px 14px;font-size:13.5px}.btn.auto{width:auto}
.row2{display:flex;gap:10px}.mt{margin-top:12px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin:34px 0 24px}
.hero .mark{width:84px;height:84px;border-radius:24px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}.hero .mark svg{width:42px;height:42px}
.hero .brand{font-size:23px;font-weight:800;letter-spacing:3px;margin:0}
.hero .sub{color:var(--muted);font-size:12px;margin:5px 0 0;letter-spacing:.5px;text-transform:uppercase}

.rowcard{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:11px;box-shadow:var(--sh-sm);cursor:pointer}
.rowcard:active{transform:scale(.99)}
.rowcard .ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.rowcard .ic svg{width:22px;height:22px}
.rowcard.ok .ic{background:var(--ok-soft);color:var(--ok)}
.rowcard .tx{flex:1;min-width:0}.rowcard .tx b{font-size:14.5px;display:block}.rowcard .tx span{font-size:12px;color:var(--muted)}
.rowcard .chev{color:var(--muted)}.rowcard .chev svg{width:20px;height:20px}
.pill{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;flex:0 0 auto}
.pill.due{background:var(--gold-soft);color:var(--gold)}.pill.done{background:var(--ok-soft);color:var(--ok)}.pill.idle{background:var(--line-2);color:var(--muted)}.pill.crit{background:var(--crit-soft);color:var(--crit)}

.empty{text-align:center;padding:42px 20px;color:var(--muted)}
.empty svg{width:44px;height:44px;opacity:.4;margin-bottom:12px}.empty p{font-size:13.5px;line-height:1.5;margin:0 0 16px}
.chk-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.chk-item:last-child{border-bottom:none}.chk-item span{flex:1;font-size:14px}
.chk-item .x{color:var(--crit);cursor:pointer;padding:4px}.chk-item .x svg{width:15px;height:15px}
.chk-item .badge{font-size:10px;font-weight:700;background:var(--gold-soft);color:var(--gold);padding:2px 7px;border-radius:999px}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ref-grid .ph{aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;background:var(--line)}
.ref-grid .ph img{width:100%;height:100%;object-fit:cover}
.ref-grid .ph .del{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.ref-grid .ph .del svg{width:13px;height:13px}
.ref-grid .add{aspect-ratio:1;border-radius:12px;border:1.5px dashed var(--brand-soft-2);background:var(--card);color:var(--brand);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-size:11px;font-weight:600}.ref-grid .add svg{width:24px;height:24px}

.progress{background:var(--line);border-radius:999px;height:8px;overflow:hidden;margin-bottom:16px}
.progress>i{display:block;height:100%;width:0;border-radius:999px;transition:width .5s var(--spring);background:linear-gradient(90deg,var(--brand),#5b616b)}
.prog-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px}
.st-hero{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.st-hero .ic{width:50px;height:50px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.st-hero .ic svg{width:26px;height:26px}
.st-hero h2{margin:0;font-size:18px}.st-hero p{margin:2px 0 0;font-size:11px;color:var(--muted)}
.instruction{background:var(--gold-soft);color:var(--gold);border-radius:12px;padding:11px 13px;font-size:13px;font-weight:600;margin-bottom:12px}
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:11px;align-items:center;font-size:14px;padding:11px 0;border-bottom:1px solid var(--line-2);color:var(--body);cursor:pointer}
.checks li:last-child{border-bottom:none}
.checks li .cb{width:20px;height:20px;border:1.5px solid var(--brand-soft-2);border-radius:6px;flex:0 0 auto;color:#fff;display:flex;align-items:center;justify-content:center}
.checks li .cb svg{width:13px;height:13px;opacity:0}.checks li.on .cb{background:var(--ok);border-color:var(--ok)}.checks li.on .cb svg{opacity:1}
.checks li.extra span{font-weight:700}.checks li .tag{font-size:10px;font-weight:700;background:var(--gold-soft);color:var(--gold);padding:2px 7px;border-radius:999px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp .frame{border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:var(--brand-soft);border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center}
.cmp .frame img{width:100%;height:100%;object-fit:cover}
.cmp .empty2{color:var(--muted);font-size:11px;text-align:center;padding:10px}
.cmp .shoot{cursor:pointer;flex-direction:column;gap:7px;color:var(--brand)}.cmp .shoot svg{width:30px;height:30px}.cmp .shoot span{font-size:11px;font-weight:600;color:var(--body)}
.cmp .frame.done{border-color:var(--ok)}
.ph-check{position:absolute;top:8px;right:8px;background:var(--ok);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}.ph-check svg{width:15px;height:15px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);background:#0b1a17;color:#fff;font-size:13px;font-weight:600;padding:12px 18px;border-radius:13px;opacity:0;transition:.3s;z-index:300;max-width:90%;text-align:center;pointer-events:none;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#7a2b26}

.cam-ov{position:fixed;inset:0;background:#000;z-index:400;display:none;flex-direction:column}
.cam-ov.show{display:flex}
.cam-stage{flex:1;position:relative;min-height:0;overflow:hidden;background:#000}
.cam-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#cam-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;pointer-events:none;display:none}#cam-ghost.show{display:block}
.cam-top{position:absolute;top:14px;left:0;right:0;text-align:center;color:#fff;font-size:13px;font-weight:650;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.cam-ctrl{position:absolute;left:14px;right:14px;bottom:14px;display:none;align-items:center;gap:12px;background:rgba(0,0,0,.42);backdrop-filter:blur(10px);border-radius:16px;padding:9px 12px}
.cam-ctrl.show{display:flex}
.cam-ctrl #ghost-btn{display:flex;align-items:center;gap:6px;color:#fff;background:rgba(255,255,255,.14);border:none;border-radius:10px;padding:8px 11px;font-size:12.5px;font-weight:650;cursor:pointer;white-space:nowrap}.cam-ctrl #ghost-btn svg{width:15px;height:15px}.cam-ctrl #ghost-btn:not(.on){opacity:.5}
.cam-ctrl input{flex:1;accent-color:#fff}
.cam-bar{padding:18px 20px calc(env(safe-area-inset-bottom) + 20px);display:flex;align-items:center;justify-content:center;gap:30px;background:#000}
.shutter{width:72px;height:72px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.35);cursor:pointer}.shutter:active{transform:scale(.9)}
.cam-cancel{color:#fff;background:rgba(255,255,255,.15);border:none;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;cursor:pointer}

.sheet-bg{position:fixed;inset:0;background:rgba(6,15,13,.6);z-index:200;display:none;align-items:flex-end;justify-content:center}
.sheet-bg.show{display:flex}
.sheet{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:480px;padding:20px 18px calc(env(safe-area-inset-bottom) + 22px);max-height:88vh;overflow-y:auto;animation:up .3s var(--spring)}
@keyframes up{from{transform:translateY(50px)}to{transform:none}}
.sheet h3{margin:0 0 12px;font-size:18px}
.spinner{width:22px;height:22px;border:3px solid var(--brand-soft-2);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.center{display:flex;align-items:center;justify-content:center;padding:60px 0}
.summary{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:4px 16px;box-shadow:var(--sh-sm)}
.summary .r{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:14px}.summary .r:last-child{border-bottom:none}.summary .r span{color:var(--muted)}

/* Notruf-Button */
.crit-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#c0392b,#a52f22);color:#fff;box-shadow:0 6px 16px rgba(178,59,52,.3);text-decoration:none}
.crit-btn svg{width:19px;height:19px}.crit-btn:active{transform:scale(.98)}
/* Status-Banner */
.status-banner{display:flex;align-items:center;gap:13px;border-radius:16px;padding:15px 16px;margin-bottom:16px}
.status-banner svg{width:26px;height:26px;flex:0 0 auto}
.status-banner b{font-size:15px;display:block}.status-banner span{font-size:12.5px;opacity:.85}
.status-banner.ok{background:var(--ok-soft);color:var(--ink)}.status-banner.ok svg{color:#1a7a4a}
.status-banner.bad{background:var(--crit-soft);color:var(--crit)}
/* Foto-Galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gcell{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--line)}
.gcell img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.gcell:active img{transform:scale(.97)}
.gcap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);color:#fff;font-size:10px;padding:10px 6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame[data-full]{cursor:pointer}
/* Vollbild */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:500;display:none;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.lightbox.show{display:flex}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
/* Verlaufs-Karten mit Bildstreifen */
.run-card2{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:var(--sh-sm);cursor:pointer}
.run-card2:active{transform:scale(.99)}
.run-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.run-top b{font-size:15px}.run-date{font-size:12px;color:var(--muted);margin-top:2px}
.tstrip{display:flex;gap:6px;overflow-x:auto;margin:12px 0 8px;padding-bottom:2px}
.tstrip-img{width:62px;height:62px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--line)}
.run-meta{font-size:12px;color:var(--muted)}