/* Wasserwaage im Hero: Blase in die Mitte schieben, dann steht die Überschrift gerade. Nur Britton-Farben. */
.hero h1{transform-origin:12% 60%;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.lot{margin-top:34px;max-width:430px}
.lot-note{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:10px;font-size:13px;letter-spacing:.02em}
.lot-note b{font-weight:700}
.lot-state{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lot-state.ok{color:var(--copper)}
.lot-body{position:relative;height:46px;background:var(--copper-metal);box-shadow:5px 6px 0 #0006;display:grid;place-items:center}
.lot-body::before,.lot-body::after{content:"";position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#181b1d;opacity:.35;transform:translateY(-50%)}
.lot-body::before{left:14px}.lot-body::after{right:14px}
.lot-vial{position:relative;width:62%;height:22px;border-radius:999px;background:linear-gradient(#d9e8c4,#b8cf98);box-shadow:inset 0 2px 4px #0005;overflow:hidden}
.lot-vial::before,.lot-vial::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:#181b1d88}
.lot-vial::before{left:calc(50% - 15px)}.lot-vial::after{left:calc(50% + 13px)}
.lot-bubble{position:absolute;top:3px;width:26px;height:16px;border-radius:999px;background:#ffffffe6;box-shadow:inset 0 -3px 0 #0001;left:calc(var(--b,80%) - 13px);transition:left .25s cubic-bezier(.3,1.5,.5,1)}
.lot input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.lot-body:has(input:focus-visible){outline:2px solid var(--copper);outline-offset:4px}
#lot-funken{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}
html[data-theme=light] .lot-body{box-shadow:5px 6px 0 #20262a40}
html[data-theme=light] .lot-state.ok{color:var(--copper-dark)}
@media(max-width:760px){.lot{max-width:none}}
@media(prefers-reduced-motion:reduce){.hero h1,.lot-bubble{transition:none}}
@media print{.lot{display:none}}