/* drivebro — Bereichsregler mit Verteilungsbalken und Tachozähler (assets/seiten/bereichsregler.js, window.OccRegler).
   Präfixe vr- (Regler) und tz- (Tachozähler). Gebraucht auf suche.html (Popover) und erweiterte-suche.html. Medienabfragen am Ende. */

.vr{display:grid;gap:10px;min-width:0}
.vr-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:28px;margin:0}
.vr-wert{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--tinte);font-variant-numeric:tabular-nums}
.vr-wert.vr-leer{font-weight:600;color:var(--grau)}
.vr-zusatz{font-size:13.5px;line-height:1.35;color:var(--grau)}
.vr-zusatz:empty{display:none}

/* Verteilung: Balken im gewählten Bereich Graphit, ausserhalb hellgrau; ohne Werte zugeklappt */
.vr-histo{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s var(--weich),opacity .22s,margin .32s var(--weich)}
.vr-histo-innen{min-height:0;overflow:hidden}
.vr-reihe{position:relative;display:flex;align-items:flex-end;gap:2px;height:52px;padding:0 11px;border-bottom:1px solid var(--linie)}
.vr-viele .vr-reihe{gap:1px}
.vr-balken{flex:1;display:flex;align-items:flex-end;height:100%;min-width:0}
.vr-balken i{display:block;width:100%;height:0;border-radius:2px 2px 0 0;background:var(--linie-stark);transition:height .35s var(--weich),background-color .15s}
.vr-balken.an i{background:var(--akzent)}
.vr-mitte{position:absolute;bottom:-4px;width:2px;height:calc(100% + 4px);margin-left:-1px;border-radius:1px;background:var(--limette);pointer-events:none}
.vr-mitte[hidden]{display:none}
.vr-ohne .vr-histo{grid-template-rows:0fr;opacity:0;margin-top:-10px}
.vr-start .vr-histo,.vr-start .vr-balken i,.vr-start .tz-band{transition:none!important}

/* Doppel-Schieberegler */
.vr-doppel{position:relative;height:28px}
.vr-spur{position:absolute;left:11px;right:11px;top:12px;height:4px;border-radius:2px;background:var(--linie)}
.vr-fuell{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--akzent)}
.vr-r{position:absolute;inset:0;z-index:1;width:100%;height:28px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.vr-r:focus{outline:0}
.vr-r::-webkit-slider-runnable-track{height:28px;background:none}
.vr-r::-moz-range-track{height:28px;background:none}
.vr-r::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:3px;border-radius:50%;border:2px solid var(--akzent);background:#fff;box-shadow:0 2px 6px rgba(40,40,35,.2);cursor:grab;transition:box-shadow .15s}
.vr-r::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--akzent);background:#fff;box-shadow:0 2px 6px rgba(40,40,35,.2);cursor:grab}
.vr-r:active::-webkit-slider-thumb{cursor:grabbing;box-shadow:0 0 0 7px color-mix(in srgb,var(--akzent) 14%,transparent),0 2px 6px rgba(40,40,35,.2)}
.vr-r:active::-moz-range-thumb{cursor:grabbing;box-shadow:0 0 0 7px color-mix(in srgb,var(--akzent) 14%,transparent)}
.vr-r:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 28%,transparent)}
.vr-r:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 28%,transparent)}

/* Tachozähler: Ziffernrollen wie ein Kilometerzähler, führende Nullen gedämpft */
.tz{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 7px;font-size:15px;line-height:1;vertical-align:middle}
.tz-zahl{display:inline-flex;align-items:flex-end;gap:1.5px}
.tz-rolle{position:relative;display:inline-block;width:.8em;height:1.42em;overflow:hidden;border-radius:3px;background:var(--akzent);color:#fff;
  box-shadow:inset 0 4px 3px -3px rgba(0,0,0,.7),inset 0 -4px 3px -3px rgba(0,0,0,.7)}
.tz-band{position:absolute;left:0;right:0;top:0;display:block;transform:translateY(calc(var(--d,0) * -10%));transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.tz-band span{display:block;height:1.42em;line-height:1.42em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.tz-null .tz-band{color:rgba(255,255,255,.36)}
.tz-trenn{width:.32em;text-align:center;font-weight:700;color:var(--grau);line-height:1.1}
.tz-strich{color:var(--grau);font-weight:600}
.tz-plus{margin-left:-4px;font-weight:800;color:var(--tinte)}
.tz-plus[hidden]{display:none}
.tz-einheit{font-size:13.5px;font-weight:600;color:var(--grau)}
.vr-leer .tz-rolle{background:#5A5F66}

@media (prefers-reduced-motion:reduce){
  .vr-histo,.vr-balken i,.tz-band{transition:none}
}