/* Höhenstreifen der Eintragsseite (lib/hoehe.php): wie hoch liegt dieser Ort im Dorf? Der Endzustand steht im Markup. Anlass: die Tafel
   eines Ortes ist da und die Fahrt der Karte zu Ende. Dann gleitet die Marke einmal von St. Martin zur Höhe des Ortes und das Stück in
   Ocker wächst mit. Nur transform; Kurven und Dauer aus tokens.css; danach Standbild. */
.hs { margin: var(--r-4) 0; max-width: 28rem; }
.hs-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs-achse { stroke: var(--linie); stroke-width: 2; stroke-linecap: round; }
.hs-ort { stroke: var(--tinte-2); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.hs-bezug { stroke: var(--tinte); stroke-width: 2.5; stroke-linecap: round; }
.hs-strecke { fill: var(--glanz-licht); transform-box: fill-box; transform-origin: var(--hs-ursprung, left) center; }
.hs-marke circle { fill: var(--ocker-fl); stroke: var(--tinte); stroke-width: 2; }
.hs-wert { fill: var(--tinte); font: 700 17px var(--schrift-text); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--papier); stroke-width: 4px; stroke-linejoin: round; }
.hs-ende { fill: var(--tinte-2); font: 500 16px var(--schrift-text); font-variant-numeric: tabular-nums; }
.hs figcaption { margin-top: var(--r-2); font-size: var(--t-klein); line-height: 1.5; color: var(--tinte-2); }

/* Bewegung: nur mit Klasse hs-los (gesetzt von hoehenstreifen.js), sonst steht alles */
.hs-los .hs-marke { animation: hs-marke var(--d-moment) var(--kurve-gleiten) both; }
.hs-los .hs-strecke { animation: hs-strecke var(--d-moment) var(--kurve-zeichnen) both; }
@keyframes hs-marke { from { transform: translateX(var(--hs-dx)); } to { transform: none; } }
@keyframes hs-strecke { from { transform: scaleX(0); } to { transform: none; } }

html[data-theme="kontrast"] .hs-strecke { fill: var(--akzent); }
html[data-theme="kontrast"] .hs-ort { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .hs-los .hs-marke, .hs-los .hs-strecke { animation: none !important; } }
html[data-bewegung="ruhig"] .hs-los .hs-marke, html[data-bewegung="ruhig"] .hs-los .hs-strecke { animation: none !important; }