/* Rundenvergleich — Einstieg in der Rangliste und das Blatt dazu.
   🔒 Noch gesperrt: der Knopf ist ohne Admin-Rechte `hidden` (siehe
   `js/views/_rangliste_vergleich.js`). */

/* Marc, 01.09.2026: „muss groesser und auffaelliger, evtl. mit animiertem
   Farbverlauf". Vorher war es eine unscheinbare 134x32-Pille am rechten Rand —
   der Rundenvergleich ist aber das Beste, was die Rangliste kann, und niemand
   hat ihn gefunden. */
.vgl-leiste { display: flex; justify-content: flex-end; margin: var(--space-2) 0 0; }

/* Der laufende Farbverlauf sitzt im RAND, nicht in der Flaeche: gefuellt waere
   der Knopf lauter als die Bestzeit darunter, und die Schrift muesste dunkel
   werden. So leuchtet er, ohne die Rangliste zu erschlagen.
   Technik: zwei Hintergruende — Fuellung auf `padding-box`, Verlauf auf
   `border-box` — und nur der Verlauf wird verschoben. Kein zusaetzliches
   Element noetig, und die Beschriftung bleibt reines `textContent` (das JS
   setzt sie an fuenf Stellen um; ein Symbol im HTML wuerde dabei geloescht,
   deshalb steht es hier als `::before`). */
.vgl-knopf {
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.2px;
  cursor: var(--cur-pointer); display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 99px; color: var(--text);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--card-strong), var(--card-strong)) padding-box,
    var(--grad-main) border-box;
  background-size: auto, 300% 100%;
  animation: vglFluss 7s linear infinite;
  transition: transform .18s ease, box-shadow .25s ease, color .18s ease;
  /* Zwei Bewegungen mit ABSICHT unterschiedlich lang (7 s und 4,2 s): laufen
     sie gleich, wirkt es wie ein Blinken. So atmet der Knopf unregelmaessig
     und faellt auf, ohne zu nerven — das Problem war ja, dass ihn niemand
     gefunden hat, nicht dass er zu leise war. */
  animation: vglFluss 7s linear infinite, vglAtem 4.2s ease-in-out infinite;
}
@keyframes vglAtem {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 229, 255, 0); }
  50%      { box-shadow: 0 6px 26px -12px rgba(255, 46, 151, .75), 0 0 16px rgba(0, 229, 255, .35); }
}
.vgl-knopf::before { content: '⇄'; font-size: 18px; line-height: 1; opacity: .95; }
.vgl-knopf:hover {
  transform: translateY(-2px);
  animation: vglFluss 7s linear infinite;   /* Atmen aus — der Schein unten ist staerker */
  box-shadow: 0 10px 30px -10px rgba(255, 46, 151, .55), var(--glow-cyan);
}
.vgl-knopf:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Scharfgestellt: jetzt FUELLT der Verlauf, damit der Zustand nicht zu erraten
   ist — der Knopf wartet ab hier auf zwei Antipper. */
.vgl-knopf[data-an="true"] {
  color: #06121a;
  background: var(--grad-main) border-box;
  background-size: 300% 100%;
  animation: vglFluss 2.6s linear infinite;
  box-shadow: var(--glow-cyan);
}
.vgl-knopf[data-an="true"]::before { content: '◎'; }
.vgl-knopf[hidden] { display: none; }

@keyframes vglFluss {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 0, 300% 50%; }
}

/* Am Telefon volle Breite: dort ist rechts oben der unauffaelligste Platz
   ueberhaupt, und der Daumen liegt unten. */
@media (max-width: 620px) {
  .vgl-leiste { justify-content: stretch; }
  .vgl-knopf { width: 100%; justify-content: center; padding: 14px 20px; }
}

/* Wer Bewegung abbestellt hat, bekommt denselben Verlauf — nur still. */
@media (prefers-reduced-motion: reduce) {
  .vgl-knopf, .vgl-knopf[data-an="true"], .vgl-knopf:hover {
    animation: none; background-position: 0 0, 50% 50%; box-shadow: none;
  }
  .vgl-knopf:hover { transform: none; }
}

/* Das Blatt ist breiter als das Detail-Blatt: es traegt ein Diagramm.
   Am Telefon bleibt es die volle Breite, am Desktop mittig gedeckelt.
   1400 statt 1080 px (Marc, 23.08.2026: „koennte etwas groesser sein") —
   das Diagramm zeichnet 1:1 auf die gemessene Breite und waechst dadurch
   von selbst mit, in der Hoehe bis zum Deckel von 460 px. */
.sheet--breit { max-height: 94vh; }
@media (min-width: 860px) {
  .sheet--breit {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(1400px, 96vw); border-radius: 18px 18px 0 0;
  }
}

/* --- Fahrerkarten und Duell-Band ------------------------------------------
   Marc am 26.08.2026: „designtechnisch etwas duenn. geht noch was". Vorher
   standen zwei halbleere Karten nebeneinander und der Zeitunterschied kam
   nirgends vor. Jetzt: Karte — Vorsprung — Karte, die schnellere Karte
   leuchtet, die langsamere traegt ihren Rueckstand. */

.vgl-karten {
  display: grid; gap: var(--space-2); margin: var(--space-3) 0;
  grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 720px) {
  .vgl-karten { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  /* Das Band bekommt eine eigene Spalte statt einer Ecke in einer Karte —
     es gehoert zu BEIDEN Runden, nicht zu einer. Die Reihenfolge der Karten
     bleibt dabei die der Daten: Karte 1 ist cyan, Karte 2 magenta, genau wie
     die Kurven im Diagramm darunter. Wer nach Zeit umsortierte, wuerde die
     Farbzuordnung zwischen Karte und Kurve zerreissen. */
  .vgl-karten--duell { grid-template-columns: 1fr minmax(140px, 0.46fr) 1fr; }
}

.vgl-karte {
  position: relative; overflow: hidden;
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) clamp(84px, 32%, 200px);
  column-gap: var(--space-3); row-gap: var(--space-2);
  border: 1px solid var(--line); border-left: 3px solid var(--vgl-farbe, var(--cyan));
  border-radius: 12px; padding: var(--space-3);
  background:
    linear-gradient(102deg, color-mix(in srgb, var(--vgl-farbe, #fff) 13%, transparent) 0%,
      transparent 52%),
    var(--card);
}
/* Die schnellere Runde: kraeftigerer Rand und ein Schein in ihrer Farbe.
   Bewusst nur Rand und Schein — Hintergrund oder Schriftgroesse zu aendern
   wuerde die beiden Rundenzeiten schlechter vergleichbar machen. */
.vgl-karte--sieger {
  border-color: color-mix(in srgb, var(--vgl-farbe, #fff) 42%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vgl-farbe, #fff) 26%, transparent),
    0 10px 32px rgba(0, 0, 0, 0.45);
}
.vgl-karte--ungueltig { border-left-color: var(--amber); }

.vgl-karte__inhalt { grid-column: 1; grid-row: 1; min-width: 0; }
.vgl-karte__kopf {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0;
}
.vgl-karte h4 {
  font-family: var(--font-display); font-size: var(--text-lg); margin: 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.vgl-karte__rang {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 9px; border-radius: 99px;
  color: #06121a; background: var(--vgl-farbe, var(--cyan));
}
.vgl-karte__auto { margin: 3px 0 0; font-size: var(--text-sm); color: var(--text-dim); }
.vgl-karte__zeit {
  margin: var(--space-2) 0 0; font-family: var(--font-mono); font-size: var(--text-2xl);
  font-weight: 700; line-height: 1.05; color: var(--vgl-farbe, var(--cyan));
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2);
  text-shadow: 0 0 22px color-mix(in srgb, var(--vgl-farbe, #fff) 38%, transparent);
}
/* Rueckstand bzw. Bestaetigung — steht auf BEIDEN Karten, damit die Rangfolge
   auch dann ablesbar ist, wenn am Telefon nur eine Karte im Bild ist. */
.vgl-karte__ab {
  display: inline-block; margin-top: 4px;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-dim);
}
.vgl-karte--sieger .vgl-karte__ab { color: var(--vgl-farbe, var(--cyan)); }
.vgl-karte__marke {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--amber); padding: 2px 8px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
}
.vgl-karte__sekt { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vgl-sekt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-dim); }
.vgl-karte__na { color: var(--text-faint); font-size: var(--text-sm); }
.vgl-karte__hinweis {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--amber); line-height: 1.5;
}

/* Das Auto im vorher toten Raum rechts. Eigene Rasterspalte statt einer
   Ueberlagerung: so kann es den Namen nie verdecken. Der gezeichnete Umriss
   liegt im selben Feld darunter und wird sichtbar, sobald `onerror` das Bild
   entfernt — dadurch entsteht auch ohne Bilddatei keine Luecke. */
.vgl-karte__bild {
  grid-column: 2; grid-row: 1; display: grid; place-items: center;
  aspect-ratio: 16 / 10; pointer-events: none;
}
.vgl-karte__bild > * { grid-area: 1 / 1; width: 100%; }
.vgl-karte__bild > .car-photo__ph { display: none; color: rgba(255, 255, 255, 0.16); }
.vgl-karte__bild:not(:has(img)) > .car-photo__ph { display: grid; place-items: center; }
.vgl-karte__bild img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  filter: brightness(1.2) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}

/* Fakten-Reihe: Angaben, die die Schnittstelle laengst liefert und die bis
   zum 26.08.2026 niemand zu sehen bekam (`gefahren_am`, `cuts`). Sie laeuft
   ueber die volle Kartenbreite und schliesst die Karte unten ab. */
.vgl-karte__fakten {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px var(--space-3);
  padding-top: var(--space-2); border-top: 1px solid var(--line);
}
@media (min-width: 1100px) {
  .vgl-karten:not(.vgl-karten--duell) .vgl-karte__fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vgl-fakt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vgl-fakt > span {
  font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}
.vgl-fakt > b {
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vgl-fakt--warn { color: var(--amber); }

/* Der Vorsprung — das Element, das aus zwei Zeiten ein Duell macht.
   Kein Richtungspfeil: am Desktop stehen die Karten nebeneinander, am Telefon
   untereinander; ein Pfeil zeigte in einer der beiden Anordnungen ins Leere.
   Der Name des Schnelleren ist immer eindeutig. */
.vgl-duell {
  display: grid; align-content: center; justify-items: center; gap: 2px;
  text-align: center; padding: var(--space-3);
  border: 1px solid var(--line); border-radius: 12px;
  background:
    radial-gradient(130% 100% at 50% 0%,
      color-mix(in srgb, var(--vgl-farbe, #fff) 16%, transparent), transparent 72%),
    var(--card);
}
.vgl-duell__kappe {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint);
}
.vgl-duell__wert {
  font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700;
  line-height: 1.1; color: var(--vgl-farbe, var(--text));
  text-shadow: 0 0 26px color-mix(in srgb, var(--vgl-farbe, #fff) 55%, transparent);
}
.vgl-duell__wer {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  margin-top: 2px; font-size: var(--text-md); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vgl-duell__wer i { flex: 0 0 auto; width: 18px; height: 3px; border-radius: 99px; background: var(--vgl-farbe, var(--text-dim)); }
.vgl-duell__na { font-size: var(--text-sm); color: var(--text-dim); }
.vgl-duell--gleich .vgl-duell__wert { color: var(--text); text-shadow: none; }

/* Strecke im Kopf des Blattes. Am schmalen Telefon steht dort schon der Titel
   und der 44 px breite Schliessen-Knopf — dann faellt sie weg. */
.sheet__unter {
  display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-sm); color: var(--text-dim);
  padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
}
@media (min-width: 560px) { .sheet__unter { display: inline-block; } }

.vgl-bild { margin-top: var(--space-2); }

/* Legende ueber dem Diagramm — die Farbe sagt, welche Kurve wem gehoert.
   Ohne sie waeren zwei Kurven nicht auseinanderzuhalten. */
.tempo-legende { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-2); }
.tempo-legende__eintrag { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-dim); }
.tempo-legende__eintrag i { width: 16px; height: 3px; border-radius: 99px; }

/* --- HRC-Leaderboard-App: persönlicher Schlüssel im Profil -------------------
   🔒 Noch gesperrt (nur Admins sehen den Abschnitt, siehe _profil_app.js). */
.pf-app { margin-top: 22px; }   /* wie .pf-steam, damit die Abschnitte gleich sitzen */
.pf-appkey {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: var(--space-2) 0 4px;
}
.pf-appkey code {
  font-family: var(--font-mono); font-size: var(--text-sm);
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  /* Der Schlüssel ist 36 Zeichen lang — auf 360 px umbrechen statt überlaufen. */
  word-break: break-all;
}
.btn--klein { padding: 4px 10px; font-size: var(--text-sm); }

/* Streckenkarte über der Tempokurve. Eigene Zeile, weil sie sonst neben der
   Kurve stünde und beide zu schmal würden — auf dem Telefon ohnehin. */
.vgl-strecke { margin-bottom: var(--space-3); }
.vgl-strecke .hg-bild { display: flex; justify-content: center; }
/* Beim Hineinzoomen liegt der Rest der Strecke außerhalb der viewBox.
   `css/diagramme.css` setzt für Diagramm-SVGs `overflow: visible` — dort ragen
   Achsenbeschriftungen absichtlich heraus. Hier muss abgeschnitten werden,
   sonst steht die halbe Nordschleife neben der Karte. */
.vgl-strecke svg { max-width: 100%; height: auto; overflow: hidden; }
/* Im hineingezoomten Zustand ist die Karte greifbar; sonst bleibt der
   Fadenkreuz-Zeiger, weil es dann nichts zu schwenken gibt. */
.vgl-strecke .hg-bild { cursor: grab; }
.vgl-strecke[data-ganz="true"] .hg-bild { cursor: crosshair; }

/* Sektor-Unterschied: die drei GEMESSENEN Sektorzeiten als Differenz.
   Steht bewusst zwischen den Fahrerkarten und dem Diagramm — gemessene
   Zahlen zuerst, die Kurve darunter (aus ihr lassen sich keine Zeiten
   ablesen, siehe Kopf von `_vgl_sektor_delta.js`).
   Fehlen Sektoren, liefert das Modul einen leeren String; dann gibt es
   dieses Element gar nicht und damit auch keine Lücke im Layout. */
.vgl-sekdelta {
  margin: 0 0 var(--space-3); padding: var(--space-3);
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.vgl-sekdelta__titel {
  margin: 0 0 var(--space-2); font-family: var(--font-display);
  font-size: var(--text-base); display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 8px;
}
.vgl-sekdelta__quelle {
  font-family: var(--font-ui); font-weight: 400;
  font-size: var(--text-sm); color: var(--text-dim);
}
/* Grid statt flex: bei 360 px stehen die vier Werte zweispaltig
   untereinander statt zu überlaufen, ab 620 px in einer Reihe. */
.vgl-sekdelta__reihe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 620px) { .vgl-sekdelta__reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vgl-sekdelta__wert {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--vgl-farbe, var(--text-dim));
  background: rgba(255, 255, 255, 0.02);
}
.vgl-sekdelta__wert b {
  font-family: var(--font-mono); font-size: var(--text-base);
  color: var(--vgl-farbe, var(--text-dim));
  /* 10 Zeichen ("−0.175 s") müssen bei 360 px in die halbe Breite passen. */
  white-space: nowrap;
}
.vgl-sekdelta__marke { font-size: var(--text-sm); color: var(--text-dim); }
.vgl-sekdelta__wert--summe { border-left-style: double; border-left-width: 4px; }
.vgl-sekdelta__fuss {
  margin: var(--space-2) 0 0; font-size: var(--text-sm);
  color: var(--text-dim); line-height: 1.5;
}
.vgl-sekdelta__fuss b { color: var(--text); font-weight: 600; }

/* Verkopplung Tempokurve ↔ Streckenkarte (26.08.2026).
   Beide Diagramme markieren dieselbe Stelle der Runde. Die Markierung sitzt
   auf den ohnehin vorhandenen Fühlpunkten — deshalb braucht es kein zweites
   Element und nichts, was beim Neuzeichnen aufgeräumt werden müsste. */
.vgl-bild rect.vgl-markiert {
  fill: var(--cyan);
  opacity: .14;
}
.vgl-bild circle.vgl-markiert {
  fill: #fff;
  fill-opacity: .95;
  stroke: var(--cyan);
  stroke-width: 3;
  paint-order: stroke;
}