/* ---------- Scanner ---------- */
body.scanner-offen { overflow: hidden; }
.scanner { position: fixed; inset: 0; z-index: 80; background: #000; color: #fff; display: flex; flex-direction: column; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scanner.blitz::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .7; animation: fade .18s reverse; }
.scanner-top, .scanner-bottom { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px max(16px, env(safe-area-inset-left, 0px)) 16px max(16px, env(safe-area-inset-right, 0px)); }
.scanner-top { padding-top: max(16px, env(safe-area-inset-top, 0px)); background: linear-gradient(rgba(0, 0, 0, .55), transparent); justify-content: space-between; }
.scanner-titel { text-align: center; display: flex; flex-direction: column; min-width: 0; }
.scanner-titel strong { font-size: 17px; }
.scanner-titel span { font-size: 14px; color: rgba(255, 255, 255, .8); }
.scanner-bottom { margin-top: auto; flex-direction: column; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.scanner-seiten { display: flex; gap: 8px; min-height: 0; }
.scanner-seiten img { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; border: 2px solid #fff; }
.scanner-ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: 100%; max-width: 420px; }
.scanner-ctrl [data-auto] { justify-self: end; }
.scanner-ctrl [data-fertig] { justify-self: start; }
.sc-round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; backdrop-filter: blur(8px); }
.sc-round.on { background: #fff; color: #000; }
.sc-pill { height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; backdrop-filter: blur(8px); }
.sc-pill.on { background: #fff; color: #000; }
.sc-pill:disabled { opacity: .35; }
.sc-pill-weiss { background: #fff; color: #000; }
.sc-shutter { width: 78px; height: 78px; border-radius: 50%; border: 0; padding: 0; background: #fff; cursor: pointer; position: relative; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.sc-shutter:active { transform: scale(.94); }
.sc-shutter svg { position: absolute; inset: -6px; width: 90px; height: 90px; transform: rotate(-90deg); pointer-events: none; }
.sc-shutter .ring { fill: none; stroke: var(--rust); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.scanner-review { position: absolute; inset: 0; z-index: 5; background: #0d0e10; display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px)); gap: 12px; }
.rv-bild, .ek-wrap { flex: 1; min-height: 0; display: grid; place-items: center; }
.rv-bild img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.ek-canvas { touch-action: none; border-radius: 6px; }
.rv-info { margin: 0; text-align: center; color: rgba(255, 255, 255, .65); font-size: 13.5px; }
.rv-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rv-meta { margin: 6px 4px 0; font-size: 13px; }
.beleg-bild a + a, .beleg-bild img + img, .beleg-bild iframe + iframe, .beleg-bild a + iframe, .beleg-bild iframe + a { display: block; margin-top: 10px; }
.ki-card { margin-top: 0; }
.logo-box { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-vorschau { width: 220px; height: 96px; border-radius: 16px; background: var(--field); display: grid; place-items: center; padding: 14px; flex: none;
  background-image: linear-gradient(45deg, #f1f1f0 25%, transparent 25%), linear-gradient(-45deg, #f1f1f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f1f0 75%), linear-gradient(-45deg, transparent 75%, #f1f1f0 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.logo-vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 220px; }
.logo-aktionen small { flex-basis: 100%; }
.hero-logo-img { display: block; max-height: 56px; max-width: min(280px, 50vw); object-fit: contain; }
.hero-logo-img.is-mono { filter: brightness(0) invert(1); }
.inv-logo { display: block; max-height: 16mm; max-width: 70mm; object-fit: contain; }
.db-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.db-card { padding: 14px 26px; }
.db-row { display: grid; grid-template-columns: 1fr auto minmax(130px, auto); gap: 16px; align-items: baseline; padding: 12px 0; font-size: 16px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.db-row:first-child { border-top: 0; }
.db-row span:first-child { color: var(--muted); }
.db-val { text-align: right; }
.db-pct { color: var(--muted); font-size: 13.5px; }
.db-sum { border-top: 1.5px solid var(--ink); font-weight: 650; font-size: 18px; }
.db-sum span:first-child { color: var(--ink); }
.db-sum + .db-row { border-top: 0; }
.db-sum.neg .db-val { color: var(--rust); }
.db-kpis { display: grid; gap: 8px; }
.db-kpis > div { background: var(--soft); border-radius: 20px; padding: 18px 20px; }
.db-kpis span { display: block; color: var(--muted); font-size: 13.5px; }
.db-kpis strong { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tbl tfoot td { padding: 13px 14px; border-top: 1.5px solid var(--line-strong); }
@media (max-width: 860px) { .db-grid { grid-template-columns: 1fr; } .db-card { padding: 8px 18px; } .db-row { grid-template-columns: 1fr auto; } .db-pct { display: none; } }
.set-tabs { display: flex; gap: 8px; margin: -8px 0 20px; overflow-x: auto; scrollbar-width: none; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tabs .chip { height: 42px; padding: 0 18px; flex: none; }
.set-form { gap: 16px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--field); border-radius: 16px; cursor: pointer; }
.switch-row strong { display: block; font-weight: 600; font-size: 15px; }
.switch-row small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.switch { position: relative; display: inline-block; flex: none; width: 48px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--soft-2); transition: background .2s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.switch input:checked + i { background: var(--ink); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.seg-zuordnung { background: var(--soft-2); }
.modal .seg-zuordnung { background: var(--soft); }
.modal .seg-zuordnung input:checked + span { background: var(--bg); }
.ki-modi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 860px) { .ki-modi { grid-template-columns: 1fr; } }
.ki-status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14.5px; }