/* Übernahme-/Rückgabeprotokoll – Fahrer-App „Dachschild bei Nacht“ (02.11.2026). */
body.nacht .ho{display:flex;flex-direction:column;min-height:calc(100dvh - var(--n-tabbar) - var(--n-safe) - 120px);margin:0 0 8px}
body.nacht .ho-plain{appearance:none;font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.nacht .ho-plain:disabled{opacity:.4;cursor:default}

/* Kopf: zurück, Fortschritt, Uhrzeit */
body.nacht .ho-top{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;min-height:40px;margin:0 0 6px}
body.nacht .ho-top:empty{display:none}
body.nacht .ho-back{width:40px;height:40px;border-radius:12px;font-size:28px;line-height:1;color:var(--n-text);background:var(--n-s1)}
body.nacht .ho-progress{display:flex;gap:3px;height:4px}
body.nacht .ho-progress i{flex:1;border-radius:2px;background:var(--n-line2);transition:background-color .3s ease}
body.nacht .ho-progress i.is-done{background:var(--n-schild)}
body.nacht .ho-progress i.is-now{background:linear-gradient(90deg,var(--n-schild) 50%,var(--n-line2) 50%);background-size:200% 100%;animation:ho-fill 1.6s ease-in-out infinite alternate}
body.nacht .ho-chip{font-size:13px;font-weight:600;color:var(--n-ink);background:var(--n-schild);border-radius:999px;padding:5px 10px;white-space:nowrap}

body.nacht .ho-stage{flex:1;position:relative}
body.nacht .ho-screen h2{font-size:26px;line-height:1.15;font-weight:700;margin:4px 0 6px;color:var(--n-text)}
body.nacht .ho-sub{margin:0 0 14px;color:var(--n-muted);font-size:15px}
body.nacht .ho-text{margin:0 0 14px;color:var(--n-muted);font-size:15px;line-height:1.45}
body.nacht .ho-count{display:block;color:var(--n-schild);font-size:13px;font-weight:650;margin:2px 0 0}
body.nacht .ho-status{min-height:20px;margin:10px 0 0;color:var(--n-text);font-size:14px}
body.nacht .ho-status:empty{min-height:0;margin:0}
body.nacht .ho-actions{position:sticky;bottom:calc(var(--n-tabbar) + var(--n-safe) + 10px);z-index:5;display:grid;gap:10px;padding:14px 0 0;background:linear-gradient(to bottom,rgba(18,22,27,0),var(--n-bg) 30%)}
body.nacht .ho-actions .ho-primary{width:100%}
body.nacht .ho-secondary{min-height:48px;border-radius:14px;border:1px solid var(--n-line2);color:var(--n-text);font-weight:600;width:100%}
body.nacht .ho-link{color:var(--n-schild);font-size:14px;font-weight:600;padding:6px 0}
body.nacht .ho-discard{display:block;margin:0 auto;color:var(--n-muted)}
body.nacht .ho-discard[data-sure]{color:var(--n-warn)}

/* Auto von oben: zeigt, welches Foto dran ist und welche fertig sind */
body.nacht .ho-car{display:block;width:118px;height:auto;margin:0 auto 6px;overflow:visible}
body.nacht .ho-car-body{fill:var(--n-s1);stroke:var(--n-line2);stroke-width:2}
body.nacht .ho-car-glass{fill:none;stroke:var(--n-line2);stroke-width:2;stroke-linecap:round}
body.nacht .ho-zone-edge{fill:none;stroke:var(--n-line2);stroke-width:6;stroke-linecap:round}
body.nacht .ho-zone-fill{fill:var(--n-s2);stroke:var(--n-line2);stroke-width:1.5}
body.nacht .ho-zone{transition:stroke .35s ease,fill .35s ease}
body.nacht .ho-zone-edge.is-done{stroke:var(--n-schild)}
body.nacht .ho-zone-fill.is-done{fill:var(--n-schild);stroke:var(--n-schild)}
body.nacht .ho-zone-edge.is-now{stroke:var(--n-schild);animation:ho-pulse 1.1s ease-in-out infinite}
body.nacht .ho-zone-fill.is-now{fill:rgba(255,207,0,.35);stroke:var(--n-schild);animation:ho-pulse 1.1s ease-in-out infinite}

/* Start: Übernahme oder Rückgabe */
body.nacht .ho-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px}
body.nacht .ho-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:56px;padding:14px;border-radius:var(--n-radius);background:var(--n-s1);border:2px solid transparent;text-align:left;font-size:16px;font-weight:600;color:var(--n-text);transition:border-color .15s ease,background-color .15s ease,transform .12s ease}
body.nacht .ho-tile:active{transform:scale(.98)}
body.nacht .ho-tile.is-on{border-color:var(--n-schild);background:rgba(255,207,0,.08)}
body.nacht .ho-tile span{color:var(--n-muted);font-size:13px;font-weight:500}
body.nacht .ho-dir{min-height:132px;justify-content:flex-end}
body.nacht .ho-dir strong{font-size:18px}
body.nacht .ho-dir-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--n-s2);margin-bottom:auto}
body.nacht .ho-dir-icon svg{width:24px;height:24px;fill:none;stroke:var(--n-schild);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.nacht .ho-dir.is-on .ho-dir-icon{background:var(--n-schild)}
body.nacht .ho-dir.is-on .ho-dir-icon svg{stroke:var(--n-ink)}
body.nacht .ho-choice-row .ho-tile{min-height:64px;justify-content:center;align-items:center;text-align:center}

/* Kamera-Kachel */
body.nacht .ho-shot{position:relative;display:block;margin:6px 0 0;border-radius:22px;background:var(--n-s1);border:2px dashed rgba(255,207,0,.55);aspect-ratio:4/3;overflow:hidden;cursor:pointer;color:var(--n-text)}
body.nacht .ho-shot.has-photo{border-style:solid;border-color:var(--n-schild)}
body.nacht .ho-file{position:absolute;inset:0;width:100%!important;height:100%!important;min-height:0!important;opacity:0;cursor:pointer;padding:0!important;border:0!important}
body.nacht .ho-shot-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
body.nacht .ho-shot-face strong{font-size:18px}
body.nacht .ho-shot-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.nacht .ho-shot-cam{width:64px;height:64px;border-radius:50%;background:var(--n-schild);box-shadow:0 0 0 10px rgba(255,207,0,.12);position:relative}
body.nacht .ho-shot-cam::after{content:"";position:absolute;inset:20px;border-radius:50%;border:3px solid var(--n-ink)}
body.nacht .ho-shot-ok{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--n-schild);color:var(--n-ink);font-weight:800;font-size:20px}
body.nacht .ho-shot.just-done .ho-shot-ok{animation:ho-pop .45s cubic-bezier(.2,1.6,.4,1)}
body.nacht .ho-shot-again{position:absolute;left:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:rgba(18,22,27,.82);font-size:14px;font-weight:600}
body.nacht .ho-shot.is-busy::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,207,0,.18) 50%,transparent 80%);background-size:200% 100%;animation:ho-scan 1s linear infinite}
body.nacht .ho-shot-small{aspect-ratio:1;border-radius:14px;margin:0}
body.nacht .ho-shot-small .ho-shot-face strong{font-size:13px}
body.nacht .ho-shot-small .ho-shot-cam{width:34px;height:34px;box-shadow:none}
body.nacht .ho-shot-small .ho-shot-cam::after{inset:10px;border-width:2px}

/* Schäden und Übersicht */
body.nacht .ho-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px}
body.nacht .ho-thumb{position:relative;display:block;aspect-ratio:1;border-radius:14px;background:var(--n-s1);overflow:hidden}
body.nacht .ho-thumb img{width:100%;height:100%;object-fit:cover;display:block}
body.nacht .ho-thumb small{position:absolute;left:6px;bottom:6px;right:6px;font-size:11px;font-weight:600;color:var(--n-text);background:rgba(18,22,27,.8);border-radius:6px;padding:3px 5px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.nacht .ho-thumb-ok{position:absolute;inset:0;display:grid;place-items:center;color:var(--n-schild);font-size:26px;font-weight:800}
body.nacht .ho-thumb.is-missing{outline:2px dashed var(--n-warn);outline-offset:-2px}
body.nacht .ho-thumb.is-missing .ho-thumb-ok{color:var(--n-warn)}
body.nacht .ho-thumb-damage{outline:2px solid var(--n-warn);outline-offset:-2px}
body.nacht .ho-review-grid{grid-template-columns:repeat(4,1fr)}

/* Eingaben */
body.nacht .ho-label{display:block;margin:0 0 12px;color:var(--n-muted);font-size:14px;font-weight:500}
body.nacht .ho-label .ho-input{margin-top:6px}
body.nacht .ho-km{font-size:28px!important;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;min-height:62px!important}
body.nacht .ho-warn{margin:-4px 0 10px;color:var(--n-warn);font-size:14px}
body.nacht .ho-warn:empty{display:none}
body.nacht .ho-last{margin-top:-4px}
body.nacht .ho-gauge{--fill:0%;margin:10px 0 0;padding:16px;border-radius:var(--n-radius);background:var(--n-s1)}
body.nacht .ho-gauge .ho-label{margin:0}
body.nacht .ho-readout{display:block;font-size:40px;font-weight:750;color:var(--n-text);font-variant-numeric:tabular-nums;margin:2px 0 8px}
body.nacht .ho-range{-webkit-appearance:none;appearance:none;width:100%;height:10px!important;min-height:0!important;padding:0!important;border-radius:999px!important;border:0!important;background:linear-gradient(90deg,var(--n-schild) var(--fill),var(--n-s2) var(--fill))!important}
body.nacht .ho-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--n-text);border:4px solid var(--n-schild)}
body.nacht .ho-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--n-text);border:4px solid var(--n-schild)}
body.nacht .ho-range.is-unset::-webkit-slider-thumb{border-color:var(--n-muted)}
body.nacht .ho-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 0 0}
body.nacht .ho-q{min-height:42px;border-radius:12px;background:var(--n-s2);font-size:15px;font-weight:650;color:var(--n-text)}
body.nacht .ho-q.is-on{background:var(--n-schild);color:var(--n-ink)}

/* Schlüssel */
body.nacht .ho-options{display:grid;gap:8px;margin:6px 0 14px}
body.nacht .ho-option{min-height:56px;padding:0 16px;border-radius:16px;background:var(--n-s1);border:2px solid transparent;text-align:left;font-size:16px;font-weight:600;color:var(--n-text);display:flex;align-items:center;justify-content:space-between}
body.nacht .ho-option::after{content:"";width:20px;height:20px;border-radius:50%;border:2px solid var(--n-line2);flex:none}
body.nacht .ho-option.is-on{border-color:var(--n-schild)}
body.nacht .ho-option.is-on::after{border:6px solid var(--n-schild)}
body.nacht .ho-tires{position:relative;display:grid;grid-template-columns:1fr 92px 1fr;grid-template-rows:1fr 1fr;gap:10px 0;align-items:center;justify-items:center;margin:0 0 14px;padding:10px 0}
body.nacht .ho-tires-car{grid-column:2;grid-row:1/3;width:72px;height:150px;border-radius:30px;background:var(--n-s1);border:2px solid var(--n-line2)}
body.nacht .ho-tire{width:96px;min-height:56px;border-radius:14px;background:var(--n-s1);border:2px solid transparent;font-size:14px;font-weight:600;color:var(--n-text);white-space:pre-line;line-height:1.2}
body.nacht .ho-tire.is-on{border-color:var(--n-schild);background:rgba(255,207,0,.1)}
body.nacht .ho-tire:nth-child(1){grid-column:1;grid-row:1}
body.nacht .ho-tire:nth-child(2){grid-column:3;grid-row:1}
body.nacht .ho-tire:nth-child(3){grid-column:1;grid-row:2}
body.nacht .ho-tire:nth-child(4){grid-column:3;grid-row:2}

/* Prüfen */
body.nacht .ho-summary{margin:0 0 14px;padding:4px 16px;border-radius:var(--n-radius);background:var(--n-s1)}
body.nacht .ho-summary>div{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--n-line)}
body.nacht .ho-summary>div:last-child{border-bottom:0}
body.nacht .ho-summary dt{color:var(--n-muted);font-size:14px}
body.nacht .ho-summary dd{margin:0;text-align:right;font-weight:600;color:var(--n-text)}

/* Fertig */
body.nacht .ho-done{text-align:center;padding-top:28px}
body.nacht .ho-done-mark{width:96px;height:96px;margin:0 auto 12px;display:block}
body.nacht .ho-done-mark circle{fill:var(--n-schild)}
body.nacht .ho-done-mark path{fill:none;stroke:var(--n-ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:ho-draw .5s .15s ease-out forwards}
body.nacht .ho-done-mark circle{transform-origin:center;animation:ho-pop .45s cubic-bezier(.2,1.6,.4,1)}

/* Fahrzeug-Tab: Protokoll-Karte */
body.nacht .driver-content section.ho-card,body.nacht .ho-card{margin:0 0 12px!important;padding:16px!important;border-radius:var(--n-radius)!important;background:var(--n-s1)!important;border:0!important}
body.nacht .ho-card h2{margin:0 0 4px;font-size:17px}
body.nacht .ho-card p{margin:0 0 12px;font-size:14px;color:var(--n-muted)}
body.nacht .ho-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.nacht .ho-card-actions>:only-child{grid-column:1/-1}
body.nacht .ho-card .ho-secondary{min-height:52px}
body.nacht .ho-history article{padding:12px 0;border-bottom:1px solid var(--n-line)}
body.nacht .ho-history article:last-child{border-bottom:0}
body.nacht .ho-history strong{display:block;color:var(--n-text);font-size:15px}
body.nacht .ho-history span{display:block;color:var(--n-muted);font-size:13px;margin-top:2px}
body.nacht .ho-history .is-confirmed{color:var(--n-ok)}

/* Bewegung: ein Schritt gleitet herein; gelbe Flächen pulsieren nur beim aktuellen Foto */
body.nacht .ho-in-next{animation:ho-next .28s cubic-bezier(.2,.8,.2,1)}
body.nacht .ho-in-back{animation:ho-back .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ho-next{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes ho-back{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes ho-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes ho-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ho-draw{to{stroke-dashoffset:0}}
@keyframes ho-scan{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes ho-fill{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
 body.nacht .ho *,body.nacht .ho{animation:none!important;transition:none!important}
 body.nacht .ho-done-mark path{stroke-dashoffset:0}
}
@media (max-width:360px){body.nacht .ho-dir{min-height:118px}body.nacht .ho-tire{width:84px}}