/* ============================================================
   Diagramme im Fahrerprofil — Formkurve, Punkte je Lauf,
   Aktivitaet je Monat, gefahrene Kilometer (Monat/Woche/Tag).
   Handgezeichnetes SVG, keine Fremdbibliothek.
   Balkenstil ist fest „Neon 3D"; bei schmalen Spalten faellt er
   selbsttaetig auf flaches Neon zurueck (siehe _dia_balken.js).
   ============================================================ */

/* Kartenoptik. Im Entwurf kam sie aus `profil-v2.css`; das Board kennt weder
   `.karte` noch `.stat`, deshalb steht sie hier — angelehnt an `.stat-card`
   in components.css, damit die Diagramme wie die uebrigen Kacheln aussehen. */
.dia-karte { padding: 18px 20px; border-radius: var(--radius); background: var(--card);
             border: 1px solid var(--line); position: relative; }
.dia-karte h3 { font-family: var(--font-display); font-size: 14px; letter-spacing: 1px;
                text-transform: uppercase; margin: 0 0 3px; }
.dia-frage { color: var(--text-faint); font-size: 12.5px; margin: 0 0 16px; line-height: 1.5; }
.dia-fuss { margin: 12px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.5;
            border-top: 1px solid var(--line); padding-top: 10px; }
.dia-fuss b { color: var(--text); }
.dia-karte svg { display: block; overflow: visible; }

/* --- Kopf einer Diagramm-Karte: Text links, Bedienung rechts ----------- */

.dia-karte .hg-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dia-karte .hg-kopf > div:first-child { min-width: 0; }
.hg-bild { touch-action: pan-y; overflow: hidden; }
/* Formkurve ueber die volle Breite, darunter die beiden Balken nebeneinander.
   Erst wenn je Spalte zu wenig Platz bleibt, untereinander. */
.dia-block { display: grid; gap: 18px; margin-top: 22px; }
.hg-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hg-paar > * { min-width: 0; }
@media (max-width: 1000px) { .hg-paar { grid-template-columns: 1fr; } }
.dia-karte[data-zieht] { cursor: grabbing; }
.hg-bild { cursor: crosshair; }
.dia-karte[data-zieht] .hg-bild { user-select: none; }

/* --- Zoom-Leiste ------------------------------------------------------- */
.hg-zoom { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hg-zoom__stand { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
                  margin-right: 6px; white-space: nowrap; }
.hg-zoom button { width: 44px; height: 44px; border-radius: 9px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--text-dim);
  font-family: var(--font-ui); font-size: 17px; line-height: 1;
  transition: border-color .16s, color .16s, background .16s; }
.hg-zoom button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan);
                                       background: rgba(0,229,255,.08); }
.hg-zoom button:disabled { opacity: .3; cursor: default; }
.hg-zoom button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* --- Kurzinfo-Kasten (ersetzt den Browser-Tooltip) ---------------------
   z-index ueber ALLEM: der Kasten lag auf 90, das Detail-Blatt liegt auf 91
   (css/sheet.css). Im Rundenvergleich steckt das Diagramm IM Blatt — der
   Kasten verschwand dadurch dahinter, sichtbar blieb nur, was seitlich
   herausragte (gemeldet 23.08.2026 mit Bild). Ein Hinweis am Mauszeiger
   gehoert immer nach ganz oben, sonst verdeckt ihn das naechste Fenster
   wieder. */
.hg-tip { position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none;
  min-width: 168px; padding: 11px 14px 11px 16px; border-radius: 10px;
  background: rgba(10, 13, 24, .97); border: 1px solid var(--line-strong);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .66); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .13s ease; overflow: hidden; }
.hg-tip[data-an="true"] { opacity: 1; }
.hg-tip__strich { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.hg-tip__kopf { font-family: var(--font-display); font-size: 12px; letter-spacing: .8px;
                text-transform: uppercase; color: var(--text); margin-bottom: 8px; }
.hg-tip__gitter { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; align-items: baseline; }
.hg-tip__gitter span { font-size: 12.5px; color: var(--text-faint); }
.hg-tip__gitter b { font-family: var(--font-mono); font-size: 13.5px; color: var(--text);
                    text-align: right; }

/* --- Balken: gemeinsames Verhalten ------------------------------------ */
.hgb { cursor: default; }
.hgb__b, .hgb__kante, .hgb__v { transition: opacity .16s, transform .16s, filter .16s; }
.hgb__b, .hgb__kante { transform-origin: center bottom; }
.hgb:focus { outline: none; }
.hgb:focus-visible .hgb__b { filter: drop-shadow(0 0 8px var(--bf)); }
.hgb:hover .hgb__v { transform: translateY(-3px); }
.hgb-svg:hover .hgb:not(:hover) .hgb__b,
.hgb-svg:hover .hgb:not(:hover) .hgb__kante { opacity: .34; }
.hgb-svg:hover .hgb:not(:hover) .hgb__v { opacity: .32; }

/* Stil „Flach" — wie bisher, nur leicht zurueckgenommen. */
.hgb-svg--flach .hgb__b { opacity: .86; }
.hgb-svg--flach .hgb:hover .hgb__b { opacity: 1; }

/* Stil „Verlauf" — die Farbe laeuft nach unten aus. */
.hgb-svg--verlauf .hgb:hover .hgb__b { filter: brightness(1.18); }

/* Stil „Neon" — Leuchten aus der Balkenfarbe, helle Deckkante. */
.hgb-svg--neon .hgb__b { filter: drop-shadow(0 0 6px var(--bf)); }
.hgb-svg--neon .hgb__kante { filter: drop-shadow(0 0 7px var(--bf)); }
.hgb-svg--neon .hgb:hover .hgb__b { filter: drop-shadow(0 0 14px var(--bf)) brightness(1.12); }
.hgb-svg--neon .hgb:hover .hgb__kante { filter: drop-shadow(0 0 12px var(--bf)); }

/* Stil „Neon 3D" — Leuchten wie bei Neon, dazu ein Schlagschatten nach
   unten rechts und eine hellere Deckflaeche. Die Woelbung selbst steckt im
   SVG (Lichtverlauf quer ueber den Balken), hier kommt nur das Licht drumherum. */
.hgb-svg--koerper .hgb__b { filter: drop-shadow(0 0 5px var(--bf))
                                    drop-shadow(2px 4px 4px rgba(0, 0, 0, .6)); }
.hgb-svg--koerper .hgb__deckel { filter: brightness(1.3) drop-shadow(0 0 7px var(--bf)); }
.hgb-svg--koerper .hgb__glanz { pointer-events: none; }
.hgb-svg--koerper .hgb:hover .hgb__b { filter: drop-shadow(0 0 13px var(--bf))
                                               drop-shadow(3px 6px 6px rgba(0, 0, 0, .65)); }
.hgb-svg--koerper .hgb:hover .hgb__deckel { filter: brightness(1.5) drop-shadow(0 0 12px var(--bf)); }
.hgb-svg--koerper .hgb__glanz, .hgb-svg--koerper .hgb__deckel {
  transition: opacity .16s, filter .16s; }
.hgb-svg--koerper:hover .hgb:not(:hover) .hgb__glanz,
.hgb-svg--koerper:hover .hgb:not(:hover) .hgb__deckel { opacity: .34; }

/* Stil „Spur" — die dunkle Bahn zeigt den Abstand zum Bestwert. */
.hgb-svg--spur .hgb:hover .hgb__b { filter: drop-shadow(0 0 10px var(--bf)); }

/* --- Formkurve: die Punkte reagieren auf die Maus ---------------------- */

/* Die Balken hatten das von Anfang an, die Kurvenpunkte nicht — dort ging nur
   der Kurzinfo-Kasten auf, ohne dass sich am Punkt selbst etwas ruehrte
   (Marcs Anmerkung 17.08.2026). Jetzt hebt sich der Punkt, leuchtet in seiner
   eigenen Farbe (`--pf`, gold am Podium) und die beiden Beschriftungen
   „P7" / „19 Pkt" wandern ein Stueck mit.

   `transform-box: fill-box` ist noetig, damit `transform-origin: center` sich
   auf das Element bezieht und nicht auf den SVG-Ursprung — sonst springt der
   Punkt beim Vergroessern quer durchs Bild. */
.fk-pkt { cursor: default; }
.fk-pkt__p, .fk-pkt__v, .fk-pkt__n {
  transform-box: fill-box; transform-origin: center;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.fk-pkt:hover .fk-pkt__p,
.fk-pkt:focus-visible .fk-pkt__p { transform: scale(1.5);
  filter: drop-shadow(0 0 9px var(--pf)) drop-shadow(0 0 3px var(--pf)); }
.fk-pkt:hover .fk-pkt__v,
.fk-pkt:focus-visible .fk-pkt__v { transform: translateY(-4px);
  filter: drop-shadow(0 0 7px var(--pf)); }
.fk-pkt:hover .fk-pkt__n,
.fk-pkt:focus-visible .fk-pkt__n { transform: translateY(-2px); }
.fk-pkt:focus { outline: none; }

/* Die uebrigen Punkte treten zurueck, damit der angefasste heraussticht —
   dasselbe Verhalten wie bei den Balken. */
.hg-kurve:hover .fk-pkt:not(:hover) .fk-pkt__p,
.hg-kurve:hover .fk-pkt:not(:hover) .fk-pkt__v,
.hg-kurve:hover .fk-pkt:not(:hover) .fk-pkt__n { opacity: .34; }

/* --- Zeitraum-Umschalter des Kilometer-Diagramms ----------------------- */

/* Sitzt zwischen Kopf und Bild. Bewusst NICHT in der `.hg-leiste` oben rechts:
   dort steht schon der Zoom, und beides nebeneinander bricht am Handy um. */
.km-stufen { display: flex; gap: 6px; margin: 0 0 10px; }
.km-stufe { min-height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer;
            font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .4px;
            background: rgba(255, 255, 255, .04); color: var(--text-dim);
            border: 1px solid var(--line); transition: color .16s, border-color .16s; }
.km-stufe:hover { color: var(--lime); border-color: var(--lime); }
.km-stufe[aria-pressed="true"] { color: var(--lime); border-color: var(--lime);
            box-shadow: 0 0 10px -2px var(--lime); }
.km-stufe:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Hinweis auf fehlende Streckenlaengen — die km-Summe ist dann eine
   Untergrenze. Auffaellig genug zum Lesen, ruhig genug fuer eine Fussnote. */
.dia-warn { color: var(--gold); }

@media (max-width: 700px) {
  .dia-karte .hg-kopf { flex-direction: column; }
  .hg-zoom { align-self: flex-end; }
  .hg-zoom__stand { margin-right: 2px; }
  .hg-tip { min-width: 148px; }
  /* Am Handy fuellen die drei Knoepfe die Breite — sie sind das
     Haupt-Bedienelement der Karte und duerfen nicht zu Puenktchen werden. */
  .km-stufen { gap: 8px; }
  .km-stufe { flex: 1; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hgb__b, .hgb__kante, .hgb__v, .hg-tip,
  .fk-pkt__p, .fk-pkt__v, .fk-pkt__n { transition: none; }
}