/* Time Keeper Live · Liveansicht für Zuschauer, Hochformat zuerst.
   Farben, Schrift und Bausteine kommen aus /gestaltung/tkl.css (Thema tkl-live, hell und dunkel);
   hier stehen nur Anordnung und die Teile, die es nur in der Liveansicht gibt. Nur Rollen, keine Farbwerte. */

/* ======================================================================
   Gerüst: Kopf, Bänder, Spalte, Reiter, Fuss, Meldungen, Umschalter
   ====================================================================== */

/* Waagrechtes Wischen gehört der Seite (Blättern), nicht dem Zurück des Browsers */
html, body { overscroll-behavior-x: none; }
/* Fokus nie unter dem klebenden Kopf oder den Reitern: live.js setzt die Höhen in dieser Regel (CSSOM) */
:root { --kopf-h: 0px; --unten-h: calc(76px + env(safe-area-inset-bottom)); }
html { scroll-padding-top: calc(var(--kopf-h) + var(--tkl-a2)); scroll-padding-bottom: calc(var(--unten-h) + var(--tkl-a2)); }
body { min-height: 100vh; min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
/* small verkleinert sonst unter 14 px */
small { font-size: var(--tkl-s-klein); }

.spalte {
  width: 100%; max-width: 720px; margin-left: auto; margin-right: auto;
  padding-left: max(var(--tkl-a4), env(safe-area-inset-left));
  padding-right: max(var(--tkl-a4), env(safe-area-inset-right));
}
/* Breite Leisten (Kopf, Reiter) richten ihren Inhalt an der Spalte aus */
.live-kopf, .tkl-app-reiter { --rand: max(0px, calc((100% - 720px) / 2)); }

/* ----- Kopf: Anlass, Frische, Bänder und Laufkopf bleiben oben stehen ----- */
.live-kopf {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: var(--tkl-fläche); border-bottom: 1px solid var(--tkl-rand);
}
.live-kopf .tkl-app-kopf {
  position: static; border-bottom: 0;
  padding-left: calc(var(--rand) + max(var(--tkl-a1), env(safe-area-inset-left)));
  padding-right: calc(var(--rand) + max(var(--tkl-a4), env(safe-area-inset-right)));
}
.tkl-app-anlass { flex: 1; }
.tkl-app-anlass span:empty { display: none; }
/* Startseite: Marke statt Zurück */
.kopf-zeichen { margin: 0 var(--tkl-a1) 0 var(--tkl-a3); }
#heim:not([hidden]) ~ .kopf-zeichen { display: none; }
.tkl-frisch { flex: none; }

/* Testbetrieb und Demo: Pillen unter dem Anlass, solange sie gelten */
.kopf-bänder {
  display: flex; flex-wrap: wrap; gap: var(--tkl-a2);
  max-width: 720px; margin: 0 auto; padding: 0 var(--tkl-a4) var(--tkl-a2);
  padding-left: max(var(--tkl-a4), env(safe-area-inset-left));
  padding-right: max(var(--tkl-a4), env(safe-area-inset-right));
}
.kopf-bänder:not(:has(> :not([hidden]))) { display: none; }
.kopf-bänder .tkl-pille { flex: 1 1 auto; margin: 0; }

/* Daten veraltet: Hinweis über dem Inhalt (der Kopf zeigt den Zustand weiter) */
.bänder > .tkl-hinweis { margin-top: var(--tkl-a3); }

#haupt { padding-bottom: var(--tkl-a5); touch-action: pan-y pinch-zoom; }
#haupt.wisch-l { animation: wischL 200ms var(--tkl-kurve); }
#haupt.wisch-r { animation: wischR 200ms var(--tkl-kurve); }
@keyframes wischL { from { transform: translateX(28px); opacity: 0.35; } }
@keyframes wischR { from { transform: translateX(-28px); opacity: 0.35; } }

/* ----- Reiter unten: einhändig, mittig zur Spalte ----- */
.tkl-app-reiter {
  padding-left: calc(var(--rand) + env(safe-area-inset-left));
  padding-right: calc(var(--rand) + env(safe-area-inset-right));
}
.tkl-app-reiter .tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Startseite ohne Reiter: kein leerer Platz unten */
.tkl-app-platz.ohne-reiter { padding-bottom: calc(var(--tkl-a5) + env(safe-area-inset-bottom)); }

/* ----- Fuss: Hinweis, Sprache, Absender ----- */
.live-fuss { padding-top: var(--tkl-a6); padding-bottom: var(--tkl-a5); color: var(--tkl-text-2); font-size: var(--tkl-s-klein); }
.fuss-hinweis { padding-bottom: var(--tkl-a4); border-bottom: 1px solid var(--tkl-rand); }
.sprachen { display: flex; flex-wrap: wrap; gap: 2px; margin: var(--tkl-a3) 0 var(--tkl-a2) calc(-1 * var(--tkl-a3)); }
.sprachen button {
  min-width: 44px; min-height: 44px; padding: 0 var(--tkl-a3); margin: 0;
  border: 0; border-radius: var(--tkl-ecke); background: transparent; color: var(--tkl-text-2);
  font-size: var(--tkl-s-klein); font-weight: 600; cursor: pointer;
}
.sprachen button:hover { background: var(--tkl-fläche-2); color: var(--tkl-text); }
.sprachen button[aria-current="true"] { color: var(--tkl-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--tkl-a2); }
.fuss-zeile a { display: inline-flex; align-items: center; gap: var(--tkl-a2); min-height: 44px; color: var(--tkl-text); font-weight: 600; }
.fuss-zeile a .tkl-symbol { width: 18px; height: 18px; }
/* Statistik-Hinweis: nötig, aber nicht so laut wie die Marke daneben */
.fuss-zeile a.fuss-leise { color: var(--tkl-text-2); font-weight: 400; }

/* ----- Unten schwebend: Hinweis «Als App», hält über den Reitern ----- */
.live-unten { position: sticky; z-index: 15; bottom: calc(76px + env(safe-area-inset-bottom)); }
.ohne-reiter .live-unten { bottom: calc(var(--tkl-a4) + env(safe-area-inset-bottom)); }
.live-unten > .tkl-hinweis {
  grid-template-columns: 24px minmax(0, 1fr) 44px; padding-right: var(--tkl-a1); margin-bottom: var(--tkl-a2);
  background: var(--tkl-fläche); box-shadow: var(--tkl-schatten);
}
.live-unten .tkl-hinweis-text { grid-column: 2 / -1; font-size: var(--tkl-s-klein); }
.live-unten .tkl-hinweis-aktion { grid-column: 2 / -1; grid-row: auto; margin-top: var(--tkl-a2); }
.live-unten .hinweis-zu { grid-column: 3; grid-row: 1; align-self: start; margin-top: calc(-1 * var(--tkl-a2)); }

/* ----- Rückmeldungen: über den Reitern, mittig zur Spalte ----- */
.tkl-live .tkl-meldungen {
  left: max(var(--tkl-a4), calc((100% - 720px) / 2 + var(--tkl-a4)));
  right: max(var(--tkl-a4), calc((100% - 720px) / 2 + var(--tkl-a4)));
}
.tkl-live.ohne-reiter .tkl-meldungen { bottom: calc(var(--tkl-a4) + env(safe-area-inset-bottom)); }
.tkl-meldung-text { margin: 0; }

/* ----- Umschalter Einfach/Erweitert und andere Knopfgruppen ----- */
.werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tkl-a2) var(--tkl-a3); margin: var(--tkl-a4) 0 var(--tkl-a3); }
/* Unter den Bahnen: ruhig, mit Wort davor (Entwurf B) */
.lauf-ansicht { justify-content: flex-start; margin: var(--tkl-a3) 0 var(--tkl-a4); }
.wz-titel { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }

/* ----- Verweise unter dem Inhalt, Zurück und Blättern ----- */
.mehr { display: inline-flex; align-items: center; gap: var(--tkl-a2); min-height: 44px; font-weight: 600; text-decoration: none; }
.mehr .tkl-symbol { color: var(--tkl-text-2); }
.fussl { margin: var(--tkl-a3) 0 var(--tkl-a1); }
.fussl:empty { display: none; }
.fussl:has(.lnav) { display: flex; align-items: center; justify-content: space-between; gap: var(--tkl-a3); }
/* Zurück zur übergeordneten Seite, rechts daneben das Blättern */
.zurück { display: flex; align-items: center; gap: var(--tkl-a2); margin: var(--tkl-a2) 0 0; }
.zurück-link {
  flex: 1 1 auto; display: inline-flex; align-items: center; gap: 2px; min-width: 0; min-height: 44px; padding-right: var(--tkl-a2);
  color: var(--tkl-text); font-weight: 600; text-decoration: none;
}
.zurück-link > .tkl-symbol { margin-left: calc(-1 * var(--tkl-a1)); }
.zurück-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Blättern zwischen Läufen bzw. Wettkämpfen (Wischen tut dasselbe) */
.lnav { flex: none; display: inline-flex; align-items: center; gap: var(--tkl-a2); }
/* Gesperrt ohne Rahmen: sonst wäre der gesperrte Pfeil kräftiger als der aktive */
.lnav .blatt[aria-disabled="true"] { border-color: transparent; }
.lnav-pos { min-width: 3.5em; font-size: var(--tkl-s-klein); font-weight: 600; text-align: center; white-space: nowrap; color: var(--tkl-text-2); }

/* Vergleich mit der Länge davor bzw. der Meldezeit: grün schneller, orange langsamer, nie ohne Vorzeichen */
.f { color: var(--tkl-ok); }
.s { color: var(--tkl-warn); }
.g { color: var(--tkl-text); }

/* ======================================================================
   Live-Lauf: Laufkopf mit Uhr, Bahnen mit Bodenlinie, Details, Foto, Werbung
   ====================================================================== */

/* ----- Laufkopf: im Live-Reiter oben im Kopf, in «Lauf» über den Bahnen ----- */
#rennkopf:empty { display: none; }
.rh { border-top: 1px solid var(--tkl-rand); }
:is(.rh, .lauf-kopf-block) .tkl-lauf-kopf { padding-left: 0; padding-right: 0; }
.lauf-kopf-block { margin-top: var(--tkl-a2); }
.lauf-kopf-block .tkl-lauf-kopf { padding-top: var(--tkl-a2); }
.lauf-kopf-text { min-width: 0; }
.lauf-titel { overflow-wrap: anywhere; }
.lauf-titel .wknr { white-space: nowrap; }
.tkl-lauf-meta { margin: var(--tkl-a2) 0 0; }
.tkl-lauf-meta .tkl-marke { gap: 0; }
/* Live: die Zeile mit Lauf, Zustand und Rekorden steht unter dem klebenden Kopf und scrollt mit */
.lauf-meta-block { margin: var(--tkl-a3) 0 var(--tkl-a4); }
.lauf-meta-block .tkl-lauf-meta { margin: 0; }
.lauf-uhr { flex: none; margin: 0; line-height: 1; text-align: right; }
.lauf-uhr:has(#uhr:empty) { display: none; }
#uhr { display: block; white-space: nowrap; }
#uhr:is(.uhr-steht, .uhr-alt) { color: var(--tkl-text-2); }
/* «Final» als Wort (die umrandete Marke gehört den Rekorden) */
.final-wort { color: var(--tkl-text); font-weight: 600; }

/* Zustand des Laufs: nach dem Abgleich mit der Rangliste zusätzlich Haken und Wort */
.bdg .mmh { display: inline-flex; align-items: center; gap: var(--tkl-a1); font-weight: 400; }
.bdg .mmh .tkl-symbol { width: 16px; height: 16px; }

/* ----- Kein Lauf geladen, letzter Lauf ----- */
.kein-lauf { margin-top: var(--tkl-a3); }
.kein-lauf .tkl-knopf { margin-top: var(--tkl-a2); }
.letzter-lauf { margin: var(--tkl-a6) 0 0; }
.letzter-lauf h2 { margin-bottom: var(--tkl-a2); font-size: var(--tkl-s-text); }
.lauf-link {
  display: flex; align-items: center; gap: var(--tkl-a3); min-height: 56px; padding: var(--tkl-a2) var(--tkl-a1);
  border-top: 1px solid var(--tkl-rand); border-bottom: 1px solid var(--tkl-rand); color: var(--tkl-text); text-decoration: none;
}
.lauf-link:hover { background: var(--tkl-fläche-2); }
.lauf-link-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lauf-link .lauf-titel { font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.2; }
.lauf-link > .tkl-symbol { color: var(--tkl-text-2); }

/* ----- Bahnen: Rahmen mit Spaltenköpfen, darin ol.tkl-bahnen ----- */
/* Handy (schmal): Linie unter dem Namen; Tablet: Linie zwischen Name und Zeit (wie tkl.css) */
.bahnen-rahmen { container-type: inline-size; margin: 0 0 var(--tkl-a3); }
.bahnen-rahmen .tkl-bahnzeile {
  grid-template-columns: 1.75rem minmax(0, 1fr) auto 2rem 44px;
  grid-template-areas: "bahn wer zeit rang stern" ". linie linie linie stern";
  column-gap: var(--tkl-a2); row-gap: var(--tkl-a1);
  min-height: 56px; padding: var(--tkl-a2) 0 var(--tkl-a2) var(--tkl-a3);
}
.bahnen-rahmen.ohne-rang .tkl-bahnzeile { grid-template-columns: 1.75rem minmax(0, 1fr) auto 44px; grid-template-areas: "bahn wer zeit stern" ". linie linie stern"; }
.bahnen-rahmen.erw .tkl-bahnzeile { grid-template-areas: "bahn wer zeit rang stern" ". linie linie . stern"; }
.bahnen-rahmen.erw.ohne-rang .tkl-bahnzeile { grid-template-columns: 1.75rem minmax(0, 1fr) auto 20px 44px; grid-template-areas: "bahn wer zeit . stern" ". linie linie . stern"; }
@container (min-width: 34rem) {
  .bahnen-rahmen .tkl-bahnzeile {
    grid-template-columns: 1.75rem minmax(8rem, 15rem) minmax(4rem, 1fr) 5.5rem 2.25rem 44px;
    grid-template-areas: "bahn wer linie zeit rang stern"; column-gap: var(--tkl-a3);
  }
  .bahnen-rahmen.ohne-rang .tkl-bahnzeile { grid-template-columns: 1.75rem minmax(8rem, 15rem) minmax(4rem, 1fr) 5.5rem 44px; grid-template-areas: "bahn wer linie zeit stern"; }
  .bahnen-rahmen.erw .tkl-bahnzeile { grid-template-columns: 1.75rem minmax(8rem, 15rem) minmax(4rem, 1fr) 5.5rem 2.25rem 20px 44px; grid-template-areas: "bahn wer linie zeit rang . stern"; }
  .bahnen-rahmen.erw.ohne-rang .tkl-bahnzeile { grid-template-columns: 1.75rem minmax(8rem, 15rem) minmax(4rem, 1fr) 5.5rem 20px 44px; grid-template-areas: "bahn wer linie zeit . stern"; }
  .bahnen-rahmen .bahn-auf { align-items: center; }
  .bahnen-rahmen .tkl-bahnzeile > .tkl-bodenlinie { height: 12px; }
}
/* Spaltenköpfe ruhig, gleiche Spalten wie die Bahnen */
.bahnen-rahmen .bahn-kopf {
  min-height: 0; padding-top: 0; padding-bottom: var(--tkl-a1); row-gap: 0;
  background: none; font-size: var(--tkl-s-klein); color: var(--tkl-text-2);
}
.bahn-kopf > span { white-space: nowrap; }
.kopf-bahn { grid-area: bahn; justify-self: center; }
.kopf-name { grid-area: wer; }
.kopf-zeit { grid-area: zeit; justify-self: end; }
.kopf-rang { grid-area: rang; justify-self: end; }

/* Zellen der Bahnzeile */
.bahnen-rahmen .tkl-bahn-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
}
.bahnen-rahmen .offen .tkl-bahn-name { display: block; -webkit-line-clamp: unset; }
.bahnen-rahmen .tkl-bahn-verein { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--tkl-a3); white-space: normal; overflow: visible; }
/* Mein Verein: ruhig in Textfarbe 600, ohne Leuchtstift und ohne Seitenstreifen */
.kürzel.mein-verein { color: var(--tkl-text); font-weight: 600; }
.bahnen-rahmen.mit-zeit .tkl-bahn-zeit { min-width: 4.25rem; }
.tkl-bahn-zeit b.mz { font-size: var(--tkl-s-text); color: var(--tkl-text-2); }
.tkl-bahn-zeit b.ng { color: var(--tkl-text-2); text-decoration: line-through; text-decoration-thickness: 2px; }
/* Unter der Zeit: Rekord und Bestzeit, darunter immer auf eigener Zeile der Vergleich mit der Meldezeit */
.tkl-bahn-zeit .zeit-unter { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--tkl-a1); max-width: 5.5rem; margin-top: 2px; }
.zeit-unter .mz-vgl { flex-basis: 100%; text-align: right; }
.tkl-bahn-zeit .f { color: var(--tkl-ok); }
.tkl-bahn-zeit .s { color: var(--tkl-warn); }
.tkl-bahn-zeit .g { color: var(--tkl-text); }
.tkl-bahn-zeit .tkl-marke { color: var(--tkl-text); }
.tkl-bahn-zeit .tkl-marke-voll { color: var(--tkl-grund); }
.tkl-bahn-rang .tkl-medaille { vertical-align: middle; }
.bahnen-rahmen .tkl-bahnzeile > .tkl-bodenlinie { align-self: center; height: 10px; }
/* Geschätzter Teil zwischen letzter Wand und jetzt: dünn und blass, nie als Weg */
.bl-schätzung { stroke: var(--tkl-spur-stark); stroke-width: 2; }
.tkl-bahn-hinweis { align-self: center; overflow-wrap: anywhere; }
/* Nicht gestartet: schmal in der Vereinszeile (die Zeile bleibt zweizeilig), breit an der Stelle der Linie */
.dns-linie { display: none; }
.bahnen-rahmen .tkl-bahnzeile[data-zustand="dns"] .tkl-bahn-zeit { min-width: 0; }
.bahnen-rahmen .tkl-bahnzeile[data-zustand="dns"] .tkl-bahn-verein { column-gap: var(--tkl-a2); }
@container (min-width: 34rem) {
  .dns-linie { display: block; }
  .dns-unter { display: none; }
}
.dsq-wort { color: var(--tkl-bad); font-weight: 600; }
/* Bahnnummer und Medaille in rem: sie wachsen mit, wenn das Handy grosse Schrift verlangt */
.bahnen-rahmen .tkl-plakette { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
.bahnen-rahmen .tkl-medaille { width: 1.625rem; height: 1.625rem; font-size: 0.875rem; }
.stern-leer { cursor: default; }

/* Staffel: Teamname, darunter die Schwimmer; wer im Wasser ist, steht in 600 mit Wort */
.bahnen-rahmen .staffel > :is(.tkl-plakette, .tkl-bahn-zeit, .tkl-bahn-rang) { align-self: start; margin-top: 2px; }
.bahnen-rahmen .staffel > .tkl-stern { align-self: start; margin-top: calc(-1 * var(--tkl-a2)); }
.staffel-schwimmer { margin: var(--tkl-a1) 0 0; padding: 0; list-style: none; font-size: var(--tkl-s-klein); line-height: 1.35; color: var(--tkl-text-2); }
.staffel-schwimmer li { display: grid; grid-template-columns: 0.8em minmax(0, 1fr); column-gap: var(--tkl-a1); }
.sw-n { overflow-wrap: anywhere; }
.staffel-schwimmer .im-wasser { color: var(--tkl-text); font-weight: 600; }
/* «im Wasser» als eigene Zeile unter dem Namen, nicht angehängt (bricht sonst mit dem Punkt voran um) */
.sw-wasser { display: block; font-weight: 400; }
/* Der volle Stern vor dem Namen der Favoritin erklärt den Leuchtstift der ganzen Staffel */
.sw-fav { width: 20px; height: 20px; margin-right: var(--tkl-a1); vertical-align: -4px; }

/* Aufklappen: Knopf über der ganzen Zeile ausser dem Stern, Zeichen unten rechts */
.bahn-auf {
  grid-column: 1 / -2; grid-row: 1 / -1; z-index: 1; align-self: stretch;
  display: flex; align-items: flex-end; justify-content: flex-end;
  margin: 0; padding: 0; border: 0; border-radius: var(--tkl-ecke-innen);
  background: transparent; color: var(--tkl-text-2); cursor: pointer;
}
.bahn-auf .tkl-symbol { transition: transform var(--tkl-dauer) ease-out; }
.bahn-auf[aria-expanded="true"] .tkl-symbol { transform: rotate(180deg); }
@media (hover: hover) {
  .tkl-bahnzeile:has(> .bahn-auf:hover) { background: var(--tkl-fläche-2); }
  .bahn-auf:hover { color: var(--tkl-text); }
}

/* Anschlag: Fläche und Weg kurz kräftiger, ohne Leuchten (bei reduzierter Bewegung aus, siehe unten) */
.tkl-bahnzeile.blitz { animation: bahnBlitz 600ms ease-out; }
.tkl-bahnzeile.blitz .tkl-bl-weg { animation: wegBlitz 600ms ease-out; }
.tkl-live .tkl-leuchtstift.blitz::before { animation: bandBlitz 600ms ease-out; }
@keyframes bahnBlitz { 0%, 30% { background-color: var(--tkl-fläche-3); } }
@keyframes wegBlitz { 0%, 40% { stroke-width: 6; } }
@keyframes bandBlitz { 0%, 30% { inset: 0; } }

/* Leuchtstift (Favorit): im Band alles in Tinte, auch Zustands- und Vergleichsfarben (das Vorzeichen bleibt) */
.tkl-live .tkl-leuchtstift > :not(.bahn-detail) :is(.f, .s, .g, .mz, .ng, .dsq-wort, .kürzel, .staffel-schwimmer, .im-wasser, .tkl-marke) { color: var(--tkl-leuchtstift-tinte); }
.tkl-live .tkl-leuchtstift .tkl-bahn-zeit b, .tkl-live .tkl-leuchtstift > .bahn-auf { color: var(--tkl-leuchtstift-tinte); }
.tkl-live .tkl-leuchtstift > :not(.bahn-detail) .tkl-marke { border-color: var(--tkl-leuchtstift-tinte); }
.tkl-live .tkl-leuchtstift > :not(.bahn-detail) .tkl-marke-voll { background: var(--tkl-leuchtstift-tinte); color: var(--tkl-leuchtstift); }
/* Schätzung im Band: Tinte halb durchsichtig, damit sie sich vom gemessenen Weg (Tinte voll) abhebt */
.tkl-live .tkl-leuchtstift .bl-schätzung { stroke: var(--tkl-leuchtstift-tinte); stroke-opacity: 0.4; }
/* Wende im Band mindestens 3:1 gegen das Gelb (die Spur darf blass bleiben); Wunsch 22 an tkl.css */
.tkl-live .tkl-leuchtstift .tkl-bl-wende { stroke: var(--tkl-leuchtstift-tinte); stroke-opacity: 0.55; }
/* Aufgeklappte Details im Leuchtstift wieder in den Farben des Themas */
.tkl-live .tkl-leuchtstift > .bahn-detail { color: var(--tkl-text); }
.tkl-live .tkl-leuchtstift > .bahn-detail .tkl-stern { color: var(--tkl-text-2); }
.tkl-live .tkl-leuchtstift > .bahn-detail .tkl-stern[aria-pressed="true"] { color: var(--tkl-text); }
.tkl-live .tkl-leuchtstift > .bahn-detail :focus-visible { --tkl-fokus: inherit; --tkl-fokus-gegen: inherit; }

/* ----- Details einer Bahn (Erweitert) ----- */
.bahn-detail {
  grid-column: 1 / -1; display: grid; gap: var(--tkl-a4);
  margin: var(--tkl-a1) 0 calc(-1 * var(--tkl-a2)) calc(-1 * var(--tkl-a3)); padding: var(--tkl-a4) var(--tkl-a3);
  border-top: 1px solid var(--tkl-rand); background: var(--tkl-zeile); color: var(--tkl-text);
}
.bahn-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--tkl-a3) var(--tkl-a4); margin: 0; }
.bahn-werte div { min-width: 0; }
.bahn-werte dt { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.bahn-werte dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.kv-neben { font-weight: 400; color: var(--tkl-text-2); }
.kv-zeile { display: block; margin-top: 2px; font-size: var(--tkl-s-klein); font-weight: 400; color: var(--tkl-text-2); }
.kv-zeile .tkl-marke { color: var(--tkl-text); }
.split-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2) var(--tkl-a3); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.split-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tkl-a4); }
.split-tabelle { flex: 1 1 16rem; }
.split-tabelle :is(th, td) { padding-top: var(--tkl-a1); padding-bottom: var(--tkl-a1); }
.split-tabelle tbody th { color: var(--tkl-text-2); font-weight: 400; }
.split-tabelle td > :is(.f, .s, .g) { font-weight: 600; }
.split-diff { font-size: var(--tkl-s-klein); }
.verlauf { flex: 0 1 18rem; min-width: 0; }
.verlauf-hinweis { margin: var(--tkl-a1) 0 0; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.spark { display: block; width: 100%; max-width: 18rem; height: auto; }
.spark line { stroke-width: 2.4; stroke-linecap: round; }
.spark line.f { stroke: var(--tkl-ok); } .spark line.s { stroke: var(--tkl-warn); } .spark line.g { stroke: var(--tkl-text-2); }
.spark circle.f { fill: var(--tkl-ok); } .spark circle.s { fill: var(--tkl-warn); } .spark circle.g { fill: var(--tkl-text-2); }
.spark rect.f { fill: var(--tkl-ok); } .spark rect.s { fill: var(--tkl-warn); } .spark rect.g { fill: var(--tkl-text-2); } .spark rect.n { fill: var(--tkl-spur-stark); }
.staffel-favoriten { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tkl-rand); }
.staffel-favoriten li { display: flex; align-items: center; justify-content: space-between; gap: var(--tkl-a2); border-bottom: 1px solid var(--tkl-rand); overflow-wrap: anywhere; }
.detail-aktion { display: flex; flex-wrap: wrap; gap: var(--tkl-a2); }
.vbtn { max-width: 100%; white-space: normal; text-align: left; }
.vbtn[aria-pressed="true"] { border-color: var(--tkl-auswahl); background: var(--tkl-auswahl-hauch); }

/* ----- Unter den Bahnen: Hinweise, Fortsetzung ----- */
.lauf-hinweis { margin: var(--tkl-a3) 0; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.mm-hinweis { display: flex; align-items: flex-start; gap: var(--tkl-a2); margin: var(--tkl-a3) 0; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.mm-hinweis .tkl-symbol { color: var(--tkl-ok); }

/* ----- Werbung: Logos brauchen hellen Grund, auch im dunklen Thema ----- */
.wb { margin: var(--tkl-a5) 0 var(--tkl-a2); }
.wb:not(.bereit) { display: none; }
.wb-fl { position: relative; height: 72px; border-radius: var(--tkl-ecke); background: var(--tkl-weiss); overflow: hidden; }
.wb-box.gross .wb-fl { height: 128px; }
.wb-img {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--tkl-a2) var(--tkl-a3);
  object-fit: contain; opacity: 0; transition: opacity 800ms ease;
}
.wb-img.an { opacity: 1; }
/* Dunkel ist die weisse Fläche das Hellste der Seite: schmaler, damit sie nicht blendet */
@media (prefers-color-scheme: dark) {
  .tkl-live:not(.tkl-hell) .wb-fl { max-width: 20rem; }
}
.wb-lbl { margin: var(--tkl-a1) 0 0; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }

/* ----- Siegerfoto: Bild ohne Rahmen und Schatten, antippen = gross ----- */
.siegerfoto { margin: var(--tkl-a4) 0 var(--tkl-a3); }
.sf-knopf { display: block; width: 100%; padding: 0; margin: 0; border: 0; border-radius: var(--tkl-ecke); background: transparent; cursor: zoom-in; }
.sf-img { width: 100%; height: auto; aspect-ratio: auto 16 / 9; max-height: min(50vh, 440px); object-fit: contain; color: transparent; }
.sf figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--tkl-a2); line-height: 1.3; }
.sf-t { font-weight: 600; }
.sf figcaption b { color: var(--tkl-text); font-weight: 600; overflow-wrap: anywhere; }
.sf-b { white-space: nowrap; }

/* ======================================================================
   Zeitplan, Wettkampf, Ranglisten, Sieger, Medaillen
   ====================================================================== */
/* Kopf der Listen: Umschalter (Unternavigation), Titel, Zeile mit Zustand und Zahlen */
.umschalter { margin: var(--tkl-a4) 0 var(--tkl-a2); }
.umschalter .tkl-segment { display: flex; flex-wrap: nowrap; max-width: 30rem; }
.umschalter .tkl-segment > a { flex: 1 1 0; min-width: 0; padding: 0 var(--tkl-a2); }
.zl-titel h1 { margin: var(--tkl-a5) 0 0; font-size: var(--tkl-s-gross); line-height: 1.25; }
.zl-neben { margin: var(--tkl-a2) 0 0; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.zl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a1) var(--tkl-a3); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.zl-meta:empty { display: none; }
.wk-kopf { margin: var(--tkl-a3) 0 0; }
.wk-kopf h1 { font-size: var(--tkl-s-gross); line-height: 1.25; overflow-wrap: anywhere; }
.wk-nr { white-space: nowrap; }
.wk-kopf .zl-meta { margin-top: var(--tkl-a2); }
.zl-leer { margin: var(--tkl-a2) 0; }
.zl-lädt { padding: var(--tkl-a5) 0; }
.zl-fussnote { max-width: 60ch; margin: var(--tkl-a3) 0 0; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }

/* Listen wie Bahnen: jede Zeile eine Fläche, dazwischen Fugen; die ganze Zeile ist der Link */
.zl { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.zl > li { min-width: 0; background: var(--tkl-zeile); }
.zl-link, .rl-link {
  position: relative; display: grid; align-items: start; column-gap: var(--tkl-a3);
  min-height: 56px; padding: var(--tkl-a2) var(--tkl-a2) var(--tkl-a2) var(--tkl-a3);
  color: var(--tkl-text); text-decoration: none;
}
.zl-link:focus-visible { outline-offset: -4px; box-shadow: inset 0 0 0 2px var(--tkl-fokus-gegen); }
@media (hover: hover) { a.zl-link:hover { background: var(--tkl-fläche-2); } }
.zl-pfeil { align-self: center; width: 18px; height: 18px; color: var(--tkl-text-2); }
/* Laufende Zeile wie in Tabellen: Fläche 2 und ein Quadrat vor dem ersten Wert, dazu «läuft» als Wort */
.zl-link[aria-current="true"] { background: var(--tkl-fläche-2); }
.zl-link[aria-current="true"]::before { content: ""; position: absolute; top: 17px; left: 2px; width: 6px; height: 6px; background: var(--tkl-text); }

/* Eigene Starts: je Art höchstens eine Zeile, zu lang endet sie mit «…» und «+n».
   Favoriten mit vollem Stern, Leuchtstift nur hinter dem Namen; eigener Verein mit Kürzel davor, Namen in 400 */
.marks { container: marks / inline-size; display: flex; flex-direction: column; gap: 2px; margin-top: var(--tkl-a2); font-size: var(--tkl-s-klein); line-height: 1.5; }
/* Schmal: nur der erste Favorit sichtbar, die weiteren für Vorleser, dazu «+n» */
.mark-fav .mark-weitere { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mark-mehr-breit { display: none; }
@container marks (min-width: 18rem) {
  .mark-fav .mark-weitere { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .mark-mehr-schmal { display: none; }
  .mark-mehr-breit { display: inline; }
}
.mark-zeile { display: flex; align-items: center; gap: var(--tkl-a1); min-width: 0; color: var(--tkl-text); }
.mark-namen { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-fav mark {
  padding: 0 4px; border-radius: var(--tkl-ecke-innen); background: var(--tkl-leuchtstift); color: var(--tkl-leuchtstift-tinte); font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mark-kürzel { font-weight: 600; }
.mark-mehr { flex: none; color: var(--tkl-text-2); }
.mark-stern { width: 16px; height: 16px; margin-right: 2px; vertical-align: -3px; }

/* Zeitplan: geplante Zeit, Nummer, Wettkampf mit Zustand */
.zp-link, .zp-spalten { grid-template-columns: 2.75rem 1.75rem minmax(0, 1fr) 18px; }
.zp-spalten {
  display: grid; column-gap: var(--tkl-a3); margin-top: var(--tkl-a3); padding: 0 var(--tkl-a2) var(--tkl-a2) var(--tkl-a3);
  font-size: var(--tkl-s-klein); color: var(--tkl-text-2);
}
.zp-spalten > :nth-last-child(2) { text-align: right; }
.ohne-zeit :is(.zp-link, .zp-spalten), .zp-spalten.ohne-zeit { grid-template-columns: 1.75rem minmax(0, 1fr) 18px; }
.zp-zeit { color: var(--tkl-text-2); white-space: nowrap; }
.zp-nr { font-family: var(--tkl-titel-schrift); font-weight: 600; text-align: right; white-space: nowrap; }
.zp-link[aria-current="true"] .zp-zeit { color: var(--tkl-text); font-weight: 600; }
.zp-wer { display: flex; flex-direction: column; min-width: 0; }
.zp-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.zp-wer .zl-meta { margin-top: var(--tkl-a1); }

/* Läufe eines Wettkampfs */
:is(.wk-kopf, .umschalter) + :is(.zl, .zl-leer) { margin-top: var(--tkl-a4); }
.lz-link { grid-template-columns: auto minmax(0, 1fr) 18px; grid-template-areas: "lauf zustand pfeil" "info info pfeil"; row-gap: var(--tkl-a1); }
.lz-lauf { grid-area: lauf; font-weight: 600; white-space: nowrap; }
.lz-zustand { grid-area: zustand; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--tkl-a1) var(--tkl-a2); }
.lz-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.lz-link > .zl-pfeil { grid-area: pfeil; }
.lz-zustand .tkl-symbol-klein { width: 16px; height: 16px; }

/* Rangliste je Kategorie; dieselben Zeilen zeigen die Sieger */
.rl-stand { margin-top: var(--tkl-a3); }
.rl-block > .zl:first-child { margin-top: var(--tkl-a3); }
.rl-gruppe { margin: var(--tkl-a5) 0 var(--tkl-a2); font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-text); font-weight: 600; color: var(--tkl-text-2); }
.rl-link { grid-template-columns: 28px minmax(0, 1fr) auto 18px; }
.rl-rang { display: grid; place-items: center; min-height: 26px; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-text); font-weight: 600; }
.rl-wer { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rl-name { font-weight: 600; overflow-wrap: anywhere; }
.rl-stern { width: 16px; height: 16px; margin-right: var(--tkl-a1); vertical-align: -2px; }
.rl-unter { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--tkl-a3); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.rl-verein { overflow-wrap: anywhere; }
.rl-verein.mein-verein { color: var(--tkl-text); font-weight: 600; }
.rl-staffel { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); overflow-wrap: anywhere; }
.rl-sw { display: inline-block; max-width: 100%; }
.rl-zeit { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rl-zeit .tkl-zeit { font-size: var(--tkl-s-gross); line-height: 1.2; }
.rl-zusatz { display: flex; align-items: center; gap: var(--tkl-a2); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); white-space: nowrap; }
.rl-dsq { font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-text); font-weight: 600; line-height: 26px; color: var(--tkl-bad); }
.zl > li.dsq .rl-name { color: var(--tkl-text-2); }
/* Favorit: Band im Leuchtstift knapp innerhalb der Zeile (als Fläche des Links, damit Prüfwerkzeuge es sehen), alles darin in Tinte */
.zl > li.fav > .rl-link {
  border: solid transparent; border-width: 4px 6px 4px 3px;
  padding: calc(var(--tkl-a2) - 4px) calc(var(--tkl-a2) - 6px) calc(var(--tkl-a2) - 4px) calc(var(--tkl-a3) - 3px);
  background-color: var(--tkl-leuchtstift); background-clip: padding-box; color: var(--tkl-leuchtstift-tinte);
}
@media (hover: hover) { .zl > li.fav > a.rl-link:hover { background-color: var(--tkl-leuchtstift); } }
.zl > li.fav :is(.rl-unter, .rl-verein, .rl-staffel, .rl-zusatz, .rl-dsq, .zl-pfeil, .rl-name) { color: var(--tkl-leuchtstift-tinte); }
.zl > li.fav .tkl-marke { border-color: var(--tkl-leuchtstift-tinte); color: var(--tkl-leuchtstift-tinte); }
.zl > li.fav .tkl-marke-voll { background: var(--tkl-leuchtstift-tinte); color: var(--tkl-leuchtstift); }
.zl > li.fav > .rl-link:focus-visible { --tkl-fokus: var(--tkl-leuchtstift-tinte); --tkl-fokus-gegen: var(--tkl-leuchtstift); }

/* Sieger: je Wettkampf ein Titel als Link zur ganzen Rangliste, darunter die ersten drei je Kategorie */
.sg { margin-top: var(--tkl-a6); }
.umschalter + .zl-titel + .sg { margin-top: var(--tkl-a4); }
.sg-kopf { margin: 0 0 var(--tkl-a2); font-size: var(--tkl-s-gross); line-height: 1.25; }
.sg-link { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--tkl-a2); min-height: 44px; color: var(--tkl-text); text-decoration: none; }
.sg-link:hover .sg-titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.sg-titel { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.sg-stand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2); font-family: var(--tkl-text-schrift); }
.sg-link > .zl-pfeil { flex: none; }
.sg .rl-gruppe { margin: var(--tkl-a3) 0 var(--tkl-a1); font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-klein); }

/* Medaillenspiegel: Tabelle, Filter nach Kategorie als Wörter wie die Sprachwahl (leiser als der Umschalter darüber) */
.med-filter { display: flex; flex-wrap: wrap; gap: 2px; margin-left: calc(-1 * var(--tkl-a3)); }
.med-filter button {
  min-width: 44px; min-height: 44px; padding: 0 var(--tkl-a3); margin: 0;
  border: 0; border-radius: var(--tkl-ecke); background: transparent; color: var(--tkl-text-2);
  font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-text); font-weight: 600; cursor: pointer;
}
.med-filter button:hover { background: var(--tkl-fläche-2); color: var(--tkl-text); }
.med-filter button[aria-pressed="true"] { color: var(--tkl-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.med-rahmen { margin-top: var(--tkl-a2); }
.med-tabelle :is(th, td) { padding-left: var(--tkl-a1); padding-right: var(--tkl-a1); }
.med-tabelle tbody th { padding-left: var(--tkl-a2); padding-right: var(--tkl-a2); }
.med-tabelle td { vertical-align: middle; }
.med-tabelle tbody th { font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.med-verein { display: block; }
.med-kürzel { display: block; font-size: var(--tkl-s-klein); font-weight: 400; color: var(--tkl-text-2); }
.med-kürzel.mein-verein { color: var(--tkl-text); font-weight: 600; }
.med-tabelle :is(.med-spalte, .med-zahl) { width: 2rem; text-align: center; }
.med-spalte .tkl-medaille { vertical-align: middle; }
.med-rang { width: 2rem; font-weight: 600; }
.med-null { color: var(--tkl-text-2); }
.med-total { font-weight: 600; }

/* 320 px: der Name braucht jeden Pixel */
@media (max-width: 359px) {
  .zl-link, .rl-link, .zp-spalten { column-gap: var(--tkl-a2); }
  .zp-link, .zp-spalten { grid-template-columns: 2.6rem 1.5rem minmax(0, 1fr) 18px; }
  .med-tabelle tbody th { padding-left: var(--tkl-a1); padding-right: var(--tkl-a1); }
}

/* ======================================================================
   Startseite, Meine, Suche
   ====================================================================== */
/* Titel über einer Liste, Zahl ruhig daneben */
.liste-titel { margin: var(--tkl-a6) 0 var(--tkl-a3); }
.liste-titel h2 { font-size: var(--tkl-s-text); line-height: 1.3; overflow-wrap: anywhere; }
.liste-zahl { font-family: var(--tkl-text-schrift); font-weight: 400; color: var(--tkl-text-2); white-space: nowrap; }
.liste-titel + .tkl-leer { padding-top: 0; }

/* ----- Startseite: QR-Code ist der Weg hinein, darunter die Wettkämpfe ----- */
.start-scan { margin-top: var(--tkl-a5); }
/* Tablet: nicht über die ganze Spalte strecken */
.scan-knopf { width: 100%; max-width: 24rem; }
.start-neben { margin-top: var(--tkl-a2); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.start-code { margin: var(--tkl-a5) 0 0; }
.start-fehler { margin-bottom: var(--tkl-a3); }
.wk-link { grid-template-columns: minmax(0, 1fr) 18px; align-items: center; }
.wk-wer { display: flex; flex-direction: column; min-width: 0; }
.wk-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.wk-zeile.mit-weg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.wk-weg { margin-right: var(--tkl-a2); color: var(--tkl-text-2); }

/* Code oder Link: Feld und Knopf bleiben in einer Reihe, der Fehler steht darunter */
.code-form .tkl-feld-reihe { flex-wrap: nowrap; }
.code-form .tkl-feld-reihe > .tkl-eingabe { flex: 1 1 0; }
.code-form .tkl-knopf { flex: none; }

/* ----- Person (Suche, Meine): Kopf mit Glocke und Stern, darunter die Starts als Zeilen ----- */
.ps { margin-bottom: var(--tkl-a5); }
.ps-kopf { background: var(--tkl-zeile); }
/* Leuchtstift als Fläche mit durchsichtigem Rand: das Band liegt knapp innerhalb der Zeile wie bei den Bahnen */
.ps-band {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--tkl-a2);
  min-height: 56px; padding-left: calc(var(--tkl-a3) - 3px);
  border: solid transparent; border-width: 4px 6px 4px 3px; background-clip: padding-box;
}
.ps-band.fav { background-color: var(--tkl-leuchtstift); color: var(--tkl-leuchtstift-tinte); }
.ps-band.fav :is(.ps-verein, .mein-verein, .glocke, .tkl-stern) { color: var(--tkl-leuchtstift-tinte); }
.ps-band.fav :focus-visible { --tkl-fokus: var(--tkl-leuchtstift-tinte); --tkl-fokus-gegen: var(--tkl-leuchtstift); }
.ps-wer { min-width: 0; padding: var(--tkl-a2) 0; }
.ps-name { font-size: var(--tkl-s-gross); line-height: 1.25; overflow-wrap: anywhere; }
.ps-verein { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); overflow-wrap: anywhere; }
.ps-verein .mein-verein { color: var(--tkl-text); font-weight: 600; }
.ps-akt { display: flex; align-items: center; }
.ps-sek { margin: var(--tkl-a3) 0 var(--tkl-a2); padding-left: var(--tkl-a3); font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-klein); font-weight: 600; color: var(--tkl-text-2); }
.ps-kopf + .zl { margin-top: 2px; }
.ps-ohne { display: grid; gap: 2px; }
.ps-ohne > .ps-sek { margin-top: 0; }
.ps-ohne .ps-name { font-size: var(--tkl-s-text); }
.glocke {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: var(--tkl-ecke); background: transparent; color: var(--tkl-text-2); cursor: pointer;
}
.glocke[aria-pressed="true"] { color: var(--tkl-text); }
.glocke .tkl-symbol { width: 22px; height: 22px; }

/* Ein Start: links die Zeit im Plan (bzw. «ca.» mit Verzug), Mitte Wettkampf, Lauf und Bahn, rechts Stand oder Resultat */
.st-link { grid-template-columns: 3.25rem minmax(0, 1fr) auto 18px; }
.st-plan { display: flex; flex-direction: column; font-size: var(--tkl-s-klein); line-height: 1.3; color: var(--tkl-text-2); }
.st-ca { display: flex; flex-direction: column; }
.st-ca b { font-size: var(--tkl-s-text); font-weight: 600; color: var(--tkl-text); }
.st-wer { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.st-wk { font-weight: 600; overflow-wrap: anywhere; }
.st-wer .zl-meta { column-gap: var(--tkl-a2); }
.st-team { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); overflow-wrap: anywhere; }
.st-vergleich { font-size: var(--tkl-s-klein); font-weight: 600; }
.st-zustand { margin-top: var(--tkl-a1); }
.dsq-grund { font-size: var(--tkl-s-klein); font-weight: 600; line-height: 1.3; color: var(--tkl-bad); overflow-wrap: anywhere; }
.st-rechts { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.st-wert { display: inline-flex; align-items: center; gap: var(--tkl-a2); }
.st-rechts .tkl-zeit { font-size: var(--tkl-s-gross); line-height: 1.2; }
.st-rechts .tkl-zeit.ng { color: var(--tkl-text-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.st-x { font-family: var(--tkl-titel-schrift); font-weight: 600; color: var(--tkl-bad); }
.st-kommt, .st-ohne { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); white-space: nowrap; }
.st-link > .zl-pfeil { align-self: center; }
/* Ab Tablet passt «geplant 14:24» auf eine Zeile */
@media (min-width: 560px) { .st-link { grid-template-columns: 6rem minmax(0, 1fr) auto 18px; } }
.zl-link .tkl-läuft { white-space: nowrap; }
/* «läuft» auf der Startseite: Zeichen und Wort ohne Fläche */
.läuft-wort { display: inline-flex; align-items: center; gap: 4px; color: var(--tkl-text); font-weight: 600; white-space: nowrap; }
.läuft-wort .tkl-symbol { width: 16px; height: 16px; }

/* ----- Suche ----- */
.such-feld { margin-top: var(--tkl-a3); }
.such-eingabe { position: relative; }
.such-eingabe > .tkl-symbol { position: absolute; top: 50%; left: var(--tkl-a3); transform: translateY(-50%); color: var(--tkl-text-2); pointer-events: none; }
.such-eingabe > .tkl-eingabe { padding-left: calc(var(--tkl-a3) + 20px + var(--tkl-a2)); }
.such-hinweis { margin-top: var(--tkl-a2); }
.vr-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--tkl-a3);
  min-height: 56px; padding: var(--tkl-a2) var(--tkl-a2) var(--tkl-a2) var(--tkl-a3);
}
.vr-wer { display: flex; flex-direction: column; min-width: 0; }
.vr-name { font-weight: 600; overflow-wrap: anywhere; }
.vr-wer .zl-meta { margin-top: var(--tkl-a1); }

/* ----- Meine ----- */
.meine-verein { max-width: 30rem; margin-top: var(--tkl-a4); }
.meine-signal { margin-top: var(--tkl-a6); }
.signal-feld { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.signal-feld legend { padding: 0; font-family: var(--tkl-titel-schrift); font-weight: 600; }
.signal-schalter { display: flex; }
/* Grund unter dem gesperrten Schalter: sein Text steht bündig mit dem Wort des Schalters */
.signal-feld .tkl-sperrgrund { margin: 0 0 var(--tkl-a2) var(--tkl-a1); }
.signal-hinweis, .glocke-hinweis, .meine-lokal { max-width: 60ch; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.signal-hinweis { margin-top: var(--tkl-a2); }
.glocke-hinweis { display: flex; align-items: flex-start; gap: var(--tkl-a2); margin-top: var(--tkl-a4); }
.meine-lokal { margin-top: var(--tkl-a5); }

/* Rückmeldung mit Abhilfe: der Knopf steht unter dem Text, Schliessen bleibt oben rechts */
.tkl-meldung > .meldung-abhilfe { grid-column: 2; justify-self: start; margin-top: var(--tkl-a2); }
.tkl-meldung:has(> .meldung-abhilfe) > :is(.tkl-symbol, .tkl-meldung-aktion) { align-self: start; }

/* ======================================================================
   Ebenen: Rekord-Jubel, Siegerfoto gross, QR-Scanner
   ====================================================================== */
/* Rekord-Jubel: ruhige Ebene wie ein Dialog; Tippen, Esc oder nach 10 s weg */
.jubel {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  padding: var(--tkl-a5) var(--tkl-a4); background: var(--tkl-schleier); animation: jEin 200ms var(--tkl-kurve) both;
}
.jubel.weg { animation: jAus 300ms ease-in both; }
.jubel-karte {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--tkl-a2);
  width: min(100%, 26rem); padding: var(--tkl-a6) var(--tkl-a5) var(--tkl-a5); overflow: hidden; text-align: center;
  border: 1px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke); background: var(--tkl-fläche); color: var(--tkl-text);
  box-shadow: var(--tkl-schatten); animation: jKarte 360ms var(--tkl-kurve) both;
}
.jubel-karte p { margin: 0; }
.jubel-zu { position: absolute; top: var(--tkl-a1); right: var(--tkl-a1); }
.jubel-flagge { width: 56px; height: 56px; }
.jubel-flagge svg { display: block; width: 100%; height: 100%; }
.jubel-marke .tkl-marke { min-height: 52px; padding: 0 var(--tkl-a3); border-width: 3px; font-size: var(--tkl-s-titel); }
.jubel-text { font-weight: 600; }
.jubel-name { font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.jubel-verein, .jubel-wk { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); overflow-wrap: anywhere; }
.jubel-karte .jubel-zeit { margin-top: var(--tkl-a1); font-size: var(--tkl-s-titel); line-height: 1.1; }
/* Konfetti einmal, in Medaillenfarben; Lage und Takt je Teil, damit kein Stil-Attribut nötig ist */
.jubel-konfetti { position: absolute; inset: 0; pointer-events: none; }
.jubel-konfetti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 1px; background: var(--tkl-gold); animation: jFall 3s linear both; }
.jubel-konfetti i:nth-child(3n+2) { background: var(--tkl-silber); }
.jubel-konfetti i:nth-child(3n) { background: var(--tkl-bronze); }
.jubel-konfetti i:nth-child(even) { animation-name: jFall2; }
.jubel-konfetti i:nth-child(1) { left: 5%; animation-delay: 0s; animation-duration: 2.8s; }
.jubel-konfetti i:nth-child(2) { left: 14%; animation-delay: .5s; animation-duration: 3.3s; }
.jubel-konfetti i:nth-child(3) { left: 23%; animation-delay: .2s; animation-duration: 2.6s; }
.jubel-konfetti i:nth-child(4) { left: 32%; animation-delay: .9s; animation-duration: 3.1s; }
.jubel-konfetti i:nth-child(5) { left: 41%; animation-delay: .3s; animation-duration: 3.5s; }
.jubel-konfetti i:nth-child(6) { left: 50%; animation-delay: 1.1s; animation-duration: 2.7s; }
.jubel-konfetti i:nth-child(7) { left: 59%; animation-delay: .1s; animation-duration: 3.2s; }
.jubel-konfetti i:nth-child(8) { left: 68%; animation-delay: .7s; animation-duration: 2.9s; }
.jubel-konfetti i:nth-child(9) { left: 77%; animation-delay: .4s; animation-duration: 3.4s; }
.jubel-konfetti i:nth-child(10) { left: 86%; animation-delay: 1.3s; animation-duration: 2.6s; }
.jubel-konfetti i:nth-child(11) { left: 93%; animation-delay: .6s; animation-duration: 3s; }
.jubel-konfetti i:nth-child(12) { left: 45%; animation-delay: 1.6s; animation-duration: 3.3s; }
@keyframes jEin { from { opacity: 0; } }
@keyframes jAus { to { opacity: 0; } }
@keyframes jKarte { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes jFall { to { transform: translateY(calc(100vh + 40px)) rotate(540deg); } }
@keyframes jFall2 { to { transform: translateY(calc(100vh + 40px)) rotate(-420deg); } }

/* Siegerfoto gross: ganze Fläche, Schliessen oben rechts, Fokus bleibt in der Ebene */
.sf-gross {
  position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tkl-a3);
  padding: calc(64px + env(safe-area-inset-top)) var(--tkl-a4) calc(var(--tkl-a5) + env(safe-area-inset-bottom));
  background: var(--tkl-grund); cursor: zoom-out;
}
.sf-gross img { display: block; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.sf-gross p { margin: 0; color: var(--tkl-text); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.sf-gross .sf-zu { position: absolute; top: calc(var(--tkl-a2) + env(safe-area-inset-top)); right: var(--tkl-a3); }
body.sf-offen { overflow: hidden; }

/* QR-Scanner: Kamerabild über die ganze Fläche, Rahmen immer hell, unten Code-Eingabe und Abbrechen */
.scanner { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--tkl-grund); }
body.scan-offen { overflow: hidden; }
.scan-bild { position: relative; flex: 1; display: flex; min-height: 0; overflow: hidden; }
.scan-bild video { flex: 1; width: 100%; min-height: 0; object-fit: cover; }
/* Abdunkeln ausserhalb des Rahmens als Kontur, nicht als Schatten */
.scan-rahmen {
  position: absolute; top: 50%; left: 50%; width: min(64vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 3px solid var(--tkl-weiss); border-radius: var(--tkl-ecke); outline: 100vmax solid var(--tkl-schleier);
}
.scan-fehler .scan-bild { align-items: center; justify-content: center; padding: var(--tkl-a4); }
.scan-fehler .scan-bild > .tkl-hinweis { width: min(100%, 720px); }
.scan-fehler .scan-text { display: none; }
.scan-unten {
  display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: var(--tkl-a3);
  padding: var(--tkl-a4) max(var(--tkl-a4), env(safe-area-inset-right)) calc(var(--tkl-a4) + env(safe-area-inset-bottom)) max(var(--tkl-a4), env(safe-area-inset-left));
  border-top: 1px solid var(--tkl-rand); background: var(--tkl-fläche);
}
.scan-text { margin: 0; font-weight: 600; text-align: center; }
.scan-zu { width: 100%; }

/* ======================================================================
   Schmal, breit, quer, Bewegung
   ====================================================================== */
@media (max-width: 359px) {
  /* 320 px: Name braucht jeden Pixel, Zeit eine Stufe kleiner */
  .bahnen-rahmen .tkl-bahnzeile { column-gap: var(--tkl-a1); padding-left: var(--tkl-a2); }
  .bahnen-rahmen.mit-rang .tkl-bahnzeile { grid-template-columns: 1.75rem minmax(0, 1fr) auto 1.75rem 44px; }
  .bahnen-rahmen.mit-zeit .tkl-bahn-zeit { min-width: 3.5rem; }
  .bahnen-rahmen .tkl-bahn-zeit b { font-size: var(--tkl-s-text); }
  .bahn-detail { margin-left: calc(-1 * var(--tkl-a2)); }
  .st-link { grid-template-columns: 3rem minmax(0, 1fr) auto 18px; }
}
/* Handy quer: wenig Höhe, Reiter mit Symbol und Wort nebeneinander */
@media (orientation: landscape) and (max-height: 520px) {
  .tkl-app-reiter a { flex-direction: row; gap: var(--tkl-a2); min-height: 48px; }
  .tkl-app-platz:not(.ohne-reiter) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .live-unten { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tkl-live:not(.ohne-reiter) .tkl-meldungen { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .live-kopf .tkl-app-kopf { min-height: 48px; }
  .rh .tkl-lauf-kopf { padding-top: var(--tkl-a1); padding-bottom: var(--tkl-a1); }
}
/* Grosse Schrift (em zählt hier mit der Schrift des Behälters, ab etwa 140 %) oder Seitenzoom: der Name bekommt die
   ganze Zeile, Zeit und Rang stehen darunter. Steht nach den 320-px-Regeln, damit es diese übersteuert. */
@container (max-width: 16em) {
  .bahnen-rahmen .tkl-bahnzeile, .bahnen-rahmen.erw .tkl-bahnzeile, .bahnen-rahmen.mit-rang .tkl-bahnzeile {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto 44px;
    grid-template-areas: "bahn wer wer stern" ". zeit rang stern" ". linie . stern";
  }
  .bahnen-rahmen.ohne-rang .tkl-bahnzeile, .bahnen-rahmen.erw.ohne-rang .tkl-bahnzeile {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto 44px;
    grid-template-areas: "bahn wer wer stern" ". zeit . stern" ". linie . stern";
  }
  .bahnen-rahmen .tkl-bahn-name { display: block; -webkit-line-clamp: unset; }
  .bahnen-rahmen .tkl-bahn-zeit { align-items: flex-start; }
  .bahnen-rahmen .tkl-bahn-zeit .zeit-unter { justify-content: flex-start; max-width: none; }
  .bahnen-rahmen .zeit-unter .mz-vgl { text-align: left; }
  .bahnen-rahmen .tkl-bahn-rang { align-self: start; }
  .bahnen-rahmen > .bahn-kopf { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .jubel-konfetti { display: none; }
}