/* dispolotse.de · HkKarte · hk/hk-teil2b.css — tabs „Personal" + „Fahrer unterwegs" (lane HKH, helper of HPW, 29./30.09.2026)
   Rides on hk.css (colour keys --hkf-*, classes hk-f-/hk-s-, layout hk-karte/hk-titel/hk-leise/hk-zeile/hk-kachel…).
   Own classes only hk2b-* / --hk2b-*. No colour value except the headlight cone (F.Scheinwerferkegel is a gradient in the app's
   Farbwelt.Dunkel/.Hell — dark #80FFE3A0 → #00FFE3A0, light fully transparent #00FFF1C2 on purpose: „Licht nur abends"). */
:root { --hk2b-kegel: #ffe3a0; --hk2b-kegel-o: 0.502; }
@media (prefers-color-scheme: light) { :root:not([data-farbe="dunkel"]) { --hk2b-kegel: #fff1c2; --hk2b-kegel-o: 0; } }
:root[data-farbe="hell"] { --hk2b-kegel: #fff1c2; --hk2b-kegel-o: 0; }
.hk2b-st-Kegel0 { stop-color: var(--hk2b-kegel); stop-opacity: var(--hk2b-kegel-o); }
.hk2b-st-Kegel1 { stop-color: var(--hk2b-kegel); stop-opacity: 0; }

/* text colours for the words drawn outside the SVG (legend signs, stand pill, sections) */
.hk2b-c-Frei { color: var(--hkf-Frei); } .hk2b-c-Achtung { color: var(--hkf-Achtung); } .hk2b-c-Signal2 { color: var(--hkf-Signal2); }
.hk2b-c-Kartenfahrzeugfremd { color: var(--hkf-Kartenfahrzeugfremd); } .hk2b-c-Kalt { color: var(--hkf-Kalt); }
.hk2b-c-Signal { color: var(--hkf-Signal); } .hk2b-c-Nebel { color: var(--hkf-Nebel); }
.hk2b-r-Signal { border-color: var(--hkf-Signal); } .hk2b-r-Frei { border-color: var(--hkf-Frei); } .hk2b-r-Nebel { border-color: var(--hkf-Nebel); }

/* the picture „Unterwegs" (Viewbox Uniform, DownOnly: never larger than drawn) */
.hk2b-buehne { display: block; min-width: 0; }
.hk2b-fahrtenbild { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.hk2b-fahrtenbild text { font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; }
.hk2b-klick { cursor: pointer; }
.hk2b-legende { display: flex; width: fit-content; max-width: 100%; margin: 4px auto 8px; font-size: 11.5px; }
.hk2b-legende b { font-size: 12px; font-weight: 700; }

/* sections of one trip (Fahrtenbild0421.Abschnitte) */
.hk2b-abschnitte { display: grid; gap: 2px; margin: 4px 0; }
.hk2b-zeitband, .hk2b-zeigerbahn { display: block; width: 100%; height: 12px; }
.hk2b-zeiger { display: grid; gap: 0; }
.hk2b-zeiger b { font-size: 10.5px; font-weight: 700; }
.hk2b-abschnittsliste { display: grid; gap: 2px; margin-top: 8px; }
.hk2b-abschnitt { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; font-size: 11.5px; color: var(--hkf-Nebel); min-width: 0; }
.hk2b-abschnitt > span { min-width: 0; overflow-wrap: anywhere; }
.hk2b-abschnitt.hk2b-jetzt > span:nth-child(2) { color: var(--hkf-Licht); font-weight: 600; }
.hk2b-abschnitt.hk2b-vorbei > span { opacity: 0.75; }
.hk2b-zeit { white-space: nowrap; }

/* rows of the tab (Kartenunterwegs0926: two lines, stand pill right, radius 6, padding 12/4, the chosen one framed 2 px) */
.hk2b-fahrt { display: grid; gap: 1px; margin: 0 0 4px; padding: 4px 12px; border: 1px solid var(--hkf-Naht); border-radius: 6px; background: var(--hkf-Kabine); min-width: 0; }
.hk2b-fahrt.hk2b-gewaehlt { border: 2px solid var(--hkf-Signal); padding: 3px 11px; }
.hk2b-fahrt:focus-visible { outline: 2px solid var(--hkf-Signal); outline-offset: 2px; }
.hk2b-fahrt-kopf { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.hk2b-fahrt-eins { flex: 1 1 auto; margin: 0; font-size: 14px; color: var(--hkf-Licht); min-width: 0; overflow-wrap: anywhere; }
.hk2b-fahrt-eins b { font-weight: 600; }
.hk2b-pille { flex: none; font-size: 12px; padding: 0 8px 2px; border: 1px solid; border-radius: 12px; line-height: 1.5; }
.hk2b-saetze { margin-top: 4px; }

/* fold head (HsKlappkopf) */
.hk2b-klappkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hk2b-klappkopf .hk-titel { margin: 0; }

/* the map strip (Kartenstreifen0926: ~¼ page, border Naht, radius 6) */
.hk2b-streifen { margin: 4px 0 8px; border: 1px solid var(--hkf-Naht); border-radius: 6px; overflow: hidden; }
.hk2b-streifenbild { display: block; width: 100%; height: 230px; }
.hk2b-saum { paint-order: stroke; stroke: var(--hkf-Kartenmeer); stroke-width: 3px; stroke-linejoin: round; }
@media (max-width: 480px) { .hk2b-streifenbild { height: 190px; } .hk2b-fahrt { padding: 4px 8px; } }

/* motion: the three loops of the app (Fahrtenbild0421.Schleife — opacity only, never faster than 1 Hz, no blinking):
   waves 0.3↔0.9 in 3.2 s, gate lamp 0.35↔1 in 2.4 s, „z z" 0.35↔1 in 3.0 s. Gates as hk.css. */
@keyframes hk2b-welle { from { opacity: 0.9; } to { opacity: 0.3; } }
@keyframes hk2b-lampe { from { opacity: 1; } to { opacity: 0.35; } }
.hk2b-welle { animation: hk2b-welle 1.6s ease-in-out infinite alternate; }
.hk2b-lampe { animation: hk2b-lampe 1.2s ease-in-out infinite alternate; }
.hk2b-zz { animation: hk2b-lampe 1.5s ease-in-out infinite alternate; }
/* the still line „Stand hh:mm" stands only when nothing moves (the app shows it only without motion) */
.hk2b-nur-still { display: none; }
html[data-sichtbar="nein"] .hk2b-welle, html[data-sichtbar="nein"] .hk2b-lampe, html[data-sichtbar="nein"] .hk2b-zz { animation-play-state: paused; }
html[data-bewegung]:not([data-bewegung="voll"]) .hk2b-welle, html[data-bewegung]:not([data-bewegung="voll"]) .hk2b-lampe,
html[data-bewegung]:not([data-bewegung="voll"]) .hk2b-zz { animation: none; }
html[data-bewegung]:not([data-bewegung="voll"]) .hk2b-nur-still { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .hk2b-welle, .hk2b-lampe, .hk2b-zz { animation: none; }
  .hk2b-nur-still { display: inline; }
}