/* fahrtenbuch.css — the public logbook page (lane B-HPF 30.09.2026, Variante A „Leitstand").
   Only the HP colour keys of hp.css + karte.css (--grund, --karte, --rand, --ton, --lk-*),
   plus a few own --fb-* keys, each defined for dark AND light (both ways: system + switch).
   No box shadows (HP design language 0.3: a 1px shine line instead); the glow of the
   routes is an SVG blur on the night map only (dark), the day map stays plain. */

:root {
  --fb-glas:   rgba(14, 20, 29, .80);
  --fb-glas2:  rgba(22, 32, 43, .55);
  --fb-glasrand: rgba(255, 255, 255, .10);
  --fb-gold2:  #ffcf6b;
  --fb-blau:   #6aa7ff;
  --fb-gruen:  #4cc38a;
  --fb-warn:   #e9b949;
  --fb-leucht: 1;
}
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]) {
    --fb-glas:   rgba(255, 255, 255, .90);
    --fb-glas2:  rgba(255, 255, 255, .70);
    --fb-glasrand: rgba(22, 32, 43, .12);
    --fb-gold2:  #d98d16;
    --fb-blau:   #2d6fd6;
    --fb-gruen:  #1a7f4b;
    --fb-warn:   #8a5a00;
    --fb-leucht: 0;
  }
  :root:not([data-farbe="dunkel"]) .fb-glut, :root:not([data-farbe="dunkel"]) .fb-stadtlicht { display: none; }
  :root:not([data-farbe="dunkel"]) .fb-b-bild, :root:not([data-farbe="dunkel"]) .fb-z-form { --stz-tint: .10; }
}
:root[data-farbe="hell"] {
  --fb-glas:   rgba(255, 255, 255, .90);
  --fb-glas2:  rgba(255, 255, 255, .70);
  --fb-glasrand: rgba(22, 32, 43, .12);
  --fb-gold2:  #d98d16;
  --fb-blau:   #2d6fd6;
  --fb-gruen:  #1a7f4b;
  --fb-warn:   #8a5a00;
  --fb-leucht: 0;
}
/* the day map stays plain: no glow (the inline opacity of a line would beat --fb-leucht) */
:root[data-farbe="hell"] .fb-glut, :root[data-farbe="hell"] .fb-stadtlicht { display: none; }
:root[data-farbe="hell"] .fb-b-bild, :root[data-farbe="hell"] .fb-z-form { --stz-tint: .10; }

/* ── T-HPFB 02.10.2026: two tabs „Fahrtenbuch | Statistik" on one page ─────────────────
   fb-reiter.js (loaded synchronously right after the bar) sets <html data-fb-reiter> from the
   address BEFORE the panels are parsed → the chosen panel is the first one painted, no jump.
   Without the attribute (no JS) the logbook shows, as before. */
.fb-reiterleiste { border-bottom: 1px solid var(--rand); background: var(--grund); }
.fb-reiter { display: flex; gap: 4px; }
.fb-reiter a { flex: 1 1 0; text-align: center; padding: 14px 12px 11px; font-weight: 650; font-size: 15px;
  color: var(--matt); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
  white-space: nowrap; }
.fb-reiter a:hover { color: var(--text); }
.fb-reiter a[aria-selected="true"] { color: var(--text); border-bottom-color: var(--ton); }
.fb-reiter a:focus-visible { outline: 2px solid var(--ton); outline-offset: -2px; border-radius: 6px; }
.fb-feld-stat { display: none; }
:root[data-fb-reiter="statistik"] .fb-feld-buch { display: none; }
:root[data-fb-reiter="statistik"] .fb-feld-stat { display: block; }

.fb-seite h1 { font-size: 30px; line-height: 1.1; margin: 12px 0 8px; letter-spacing: -.02em; }
.fb-seite h2 { font-size: 21px; margin: 0 0 12px; letter-spacing: -.01em; }
.fb-leise { color: var(--matt); }
.fb-bald { padding: 32px 0; }

/* ── Kopf: Nachtkarte über die ganze Breite ─────────────────────────────── */
.fb-kopf { position: relative; overflow: hidden; border-bottom: 1px solid var(--rand); background: var(--lk-meer); }
.fb-karte { position: relative; height: 300px; }
.fb-karte svg { display: block; width: 100%; height: 100%; }
.fb-ohne-karte svg { display: none; }
.fb-schleier { display: none; }
.fb-kopf-inhalt { position: relative; padding-top: 20px; padding-bottom: 28px; background: var(--grund); }
.fb-unter { color: var(--matt); margin: 0; max-width: 540px; }
.fb-stand { color: var(--matt); font-size: 13px; margin: 4px 0 0; }

.fb-welten { display: inline-flex; gap: 4px; padding: 4px; margin: 20px 0; border-radius: 999px;
  background: var(--mulde); border: 1px solid var(--rand); }
.fb-welten button { font: inherit; font-weight: 600; font-size: 14px; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; background: transparent; color: var(--matt); }
.fb-welten button[aria-selected="true"] { background: linear-gradient(180deg, var(--fb-gold2), var(--ton)); color: var(--auf-ton); }
.fb-welten button:focus-visible, .fb-zeile:focus-visible, .fb-zeitraum button:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }

.fb-kacheln, .fb-stil { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-stil { margin-top: 12px; grid-template-columns: repeat(3, 1fr); }
/* B-OEFH 01.10.: the § 7b counts (Standard-/Renn-Touren, Unfälle, schwere Unfälle) — own row,
   hidden while the file carries none of them */
.fb-stil.fb-stil-n { margin-top: 8px; grid-template-columns: 1fr 1fr; }
.fb-stil-n[hidden] { display: none; }
.fb-stil-titel { margin: 20px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--matt); }
.fb-kachel { position: relative; overflow: hidden; padding: 12px; border-radius: var(--rd-gross, 16px);
  background: var(--fb-glas); border: 1px solid var(--fb-glasrand); }
.fb-kachel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--ton), transparent); }
.fb-stil .fb-kachel::before { background: linear-gradient(90deg, var(--fb-blau), transparent); }
.fb-k-name { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--matt); }
.fb-k-wert { font-size: 21px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: anywhere; }
.fb-k-wert small { font-size: 12px; font-weight: 600; color: var(--matt); margin-left: 4px; }
.fb-k-zeile { font-size: 12px; color: var(--matt); margin-top: 2px; }

/* ── Karte: Linien und Städte ───────────────────────────────────────────── */
.fb-route { fill: none; stroke: var(--ton); stroke-width: 2.2; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-dasharray: 7 5; animation: fb-fluss 2.6s linear infinite; }
.fb-neu { stroke: var(--fb-gold2); stroke-width: 3.2; }
.fb-glut { fill: none; stroke: var(--ton); stroke-width: 9; vector-effect: non-scaling-stroke; filter: blur(3px);
  opacity: calc(.5 * var(--fb-leucht)); }
.fb-linien .fb-aus { opacity: .12 !important; }
.fb-linien .fb-an { opacity: 1 !important; stroke: var(--fb-gold2); stroke-width: 4; stroke-dasharray: none; }
.fb-linien .fb-glut.fb-an { stroke-width: 16; opacity: calc(.7 * var(--fb-leucht)) !important; }
.fb-stadt { fill: var(--ton); stroke: var(--grund); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fb-stadtlicht { fill: var(--ton); opacity: calc(.22 * var(--fb-leucht)); filter: blur(4px); }
.fb-stadtname { font-family: var(--schrift); font-weight: 600; fill: var(--lk-schrift); paint-order: stroke;
  stroke: var(--lk-halo); stroke-width: 4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes fb-fluss { to { stroke-dashoffset: -24; } }

/* ── Tafeln: Lieblinge ─────────────────────────────────────────────────── */
.fb-teil { padding: 28px 0 0; }
.fb-teil-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.fb-zeitraum { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--mulde); border: 1px solid var(--rand); }
.fb-zeitraum button { font: inherit; font-size: 13px; border: 0; cursor: pointer; padding: 4px 12px; border-radius: 999px; background: transparent; color: var(--matt); }
.fb-zeitraum button[aria-pressed="true"] { background: var(--karte); color: var(--text); font-weight: 650; }
.fb-tafeln { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.fb-tafel { position: relative; padding: 20px; border-radius: var(--rd-gross, 16px); background: var(--karte); border: 1px solid var(--rand); }
.fb-tafel::before { content: ""; position: absolute; inset: 0 12px auto 12px; height: 1px; background: var(--glanz); }
.fb-tafel h3 { margin: 0 0 12px; font-size: 17px; }
.fb-balken { display: grid; grid-template-columns: 48px 1fr auto; gap: 4px 12px; align-items: center; margin: 0 0 12px; }
.fb-b-bild { width: 48px; height: 48px; display: grid; place-items: center; grid-row: 1 / 3; color: var(--text); --stz-gold: var(--ton); --stz-tint: .14; }
.fb-b-aufl .fb-b-bild { --stz-gold: var(--fb-blau); }
.fb-b-bild svg { width: 48px; height: 48px; }
.fb-b-fracht .fb-b-bild, .fb-b-strecke .fb-b-bild, .fb-b-stadt .fb-b-bild { width: 0; }
.fb-b-fracht, .fb-b-strecke, .fb-b-stadt { grid-template-columns: 0 1fr auto; column-gap: 0; }
.fb-b-fracht .fb-b-wert, .fb-b-strecke .fb-b-wert, .fb-b-stadt .fb-b-wert { padding-left: 12px; }
.fb-b-name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.fb-b-name em { font-style: normal; color: var(--ton); }
.fb-b-wert { font-weight: 700; color: var(--ton); font-variant-numeric: tabular-nums; }
.fb-b-spur { grid-column: 2 / 4; height: 8px; border-radius: 99px; background: var(--mulde); overflow: hidden; }
.fb-b-spur i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ton), var(--fb-gold2)); }
.fb-b-aufl .fb-b-spur i { background: linear-gradient(90deg, var(--fb-blau), #9fd0ff); }
.fb-b-fracht .fb-b-spur i { background: linear-gradient(90deg, var(--fb-gruen), #9be7c0); }
.fb-b-aufl .fb-b-wert { color: var(--fb-blau); }
.fb-b-fracht .fb-b-wert { color: var(--fb-gruen); }
/* B-HPF2 01.10.: STAT_VERTRAG v1.2 boards (cargo by tonnes, loading/unloading) — hidden
   while the file does not carry the list */
.fb-tafel[hidden], .fb-tafeln-lade[hidden] { display: none; }
.fb-lade-titel { margin: 28px 0 0; font-size: 17px; color: var(--matt); font-weight: 600; }
.fb-b-name b { font-weight: 700; }

/* ── Fahrtenbuch ───────────────────────────────────────────────────────── */
.fb-buch { border: 1px solid var(--rand); border-radius: 14px; background: var(--karte); overflow: hidden; margin-top: 12px; }
.fb-buch summary { list-style: none; cursor: pointer; padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 650; }
.fb-buch summary::-webkit-details-marker { display: none; }
.fb-buch summary::before { content: "▸"; color: var(--ton); font-size: 12px; }
.fb-buch[open] summary::before { content: "▾"; }
.fb-buch-summe { margin-left: auto; color: var(--matt); font-weight: 500; font-size: 13.5px; }
.fb-zeilen { max-height: 720px; overflow-y: auto; }
.fb-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; font: inherit; font-size: 14px;
  color: var(--text); background: transparent; border: 0; border-top: 1px solid var(--rand); padding: 12px 20px; cursor: pointer; }
.fb-zeile:hover, .fb-zeile[aria-pressed="true"] { background: var(--tonhauch); }
.fb-zeile[aria-pressed="true"] { background: linear-gradient(90deg, var(--ton) 3px, var(--tonhauch) 3px); }
.fb-neueste .fb-z-vor { color: var(--ton); }
.fb-z-vor { grid-column: 1 / 3; color: var(--matt); font-size: 12.5px; }
.fb-z-weg { font-weight: 650; }
.fb-z-weg em { font-style: normal; color: var(--ton); }
.fb-z-fracht, .fb-z-lkw, .fb-z-dauer { grid-column: 1 / 2; color: var(--matt); font-size: 13px; }
.fb-z-km { grid-row: 2; grid-column: 2; text-align: right; font-variant-numeric: tabular-nums; }
.fb-z-form { display: inline-block; width: 24px; height: 24px; vertical-align: -7px; margin-right: 6px; color: var(--text); --stz-gold: var(--ton); --stz-tint: .14; }
.fb-z-form svg { width: 24px; height: 24px; }
.fb-pille { grid-row: 3; grid-column: 2; justify-self: end; align-self: start; line-height: 1.4; font-size: 12px; border-radius: 99px; padding: 2px 8px; border: 1px solid; }
.fb-ok { color: var(--fb-gruen); }
.fb-warn { color: var(--fb-warn); }
.fb-hinweis { margin: 0; padding: 20px; border-top: 1px solid var(--rand); color: var(--matt); }

/* ── Rekorde ───────────────────────────────────────────────────────────── */
.fb-rekorde { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.fb-rekord { position: relative; padding: 12px 20px 12px; border-radius: 14px; background: var(--karte); border: 1px solid var(--rand); }
.fb-rekord::before { content: ""; position: absolute; inset: 0 12px auto 12px; height: 1px; background: var(--glanz); }
.fb-rekord b { display: block; font-size: 20px; overflow-wrap: anywhere; }
.fb-rekord b small { display: block; font-size: 13px; font-weight: 600; color: var(--ton); }
.fb-rekord span { color: var(--matt); font-size: 13px; }
.fb-fuss { color: var(--matt); font-size: 12.5px; margin: 20px 0 32px; }

/* ── ab 700 px ─────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .fb-reiter { gap: 8px; }
  .fb-reiter a { flex: 0 0 auto; padding: 16px 20px 13px; font-size: 16px; }
  .fb-seite h1 { font-size: 44px; }
  .fb-seite h2 { font-size: 26px; }
  .fb-kacheln { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .fb-stil.fb-stil-n { grid-template-columns: repeat(4, 1fr); }
  .fb-kachel { padding: 16px 16px 12px; }
  .fb-k-wert { font-size: 26px; }
  .fb-tafeln { grid-template-columns: 1fr 1fr; }
  .fb-zeile { grid-template-columns: 84px 1.3fr 1.5fr 1.1fr 110px 150px 64px; align-items: center; }
  .fb-z-vor, .fb-z-fracht, .fb-z-lkw, .fb-z-dauer, .fb-z-km, .fb-pille { grid-column: auto; grid-row: auto; }
  .fb-pille { align-self: center; }
  .fb-rekorde { grid-template-columns: repeat(3, 1fr); }
}
/* ab 900 px: die Karte liegt HINTER dem Kopf, die Kacheln stehen links auf Glas */
@media (min-width: 900px) {
  .fb-karte { position: absolute; inset: 0; height: auto; }
  .fb-schleier { display: block; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--grund) 0%, var(--grund-halb) 44%, transparent 72%); }
  .fb-kopf-inhalt { background: transparent; padding-top: 52px; padding-bottom: 40px; }
  .fb-kopf-inhalt > * { max-width: 900px; }
  .fb-tafeln-3 { grid-template-columns: repeat(3, 1fr); }
}

/* P5: wer „weniger Bewegung" eingestellt hat, bekommt alles still */
@media (prefers-reduced-motion: reduce) {
  .fb-route { animation: none; }
}

/* KARTE-JETZT fb roads */
/* KARTE-JETZT 07.10.2026: grundkarte-ets2/-ats.svg now carry a road net (<g class="gk-strassen">, styled only by
   karte-grund-neu.css on the live map). The logbook map copies every group of the same file — without styles the
   road paths would be FILLED black shapes. The logbook keeps today's look: no roads there. */
.fb-karte .gk-strassen { display: none; }