/* =====================================================================================
   Gemeinsame Stile der Turnierseiten (Entwurf D, Frank 14.11.2026). Präfix: tn-
   Eigentümer: Fundament-Helfer (H6). Die Seiten haben ihre eigenen Stile in <Seite>.razor.css.

   REGELN (Bauvorgaben 3):
   - Nur ECHTE Sedna-Variablen (Thema ItsHomepageTheme, hell und dunkel): --bg, --card-bg, --bg-hover,
     --border, --border-strong, --fg, --fg-soft, --muted, --brand, --brand-hover, --brand-text, --on-solid,
     --badge-bg, --radius-surface, --radius-control, --radius-pill. KEINE erfundenen Namen (--text, --card,
     --soft, --line, --chip, --radius): sie wären leer und ergäben dunkle Schrift auf dunklem Grund.
   - Kein .btn{…} und keine Umgestaltung von Sedna-Klassen. Keine Farbfläche über die volle Breite
     (außer dem Foto-Kopfband in TurnierKopf.razor.css).
   - Der Inhalt steht in <div class="its-wrap tn-inhalt"> (Breite wie die Startseite).
   ===================================================================================== */

/* ---------- Seitenrahmen ---------- */
.tn-inhalt { padding-block: 26px 36px; box-sizing: border-box; }
.tn-leiste-rahmen { padding-top: 26px; padding-bottom: 0; }
.tn-leiste-rahmen + .tn-inhalt { padding-top: 16px; }

/* Nebentext im HELLEN Modus (gemessen 14.11.2026): Das Thema setzt --muted hell auf Stufe 600 (#707070). Auf dem
   leicht getönten Grund der Kopfzeilen, Leisten und Zähler (--bg, --table-head-bg) ergibt das nur 4,46 : 1 – knapp
   unter WCAG AA (4,5 : 1) für die 13-px-Nebentexte. Auf den Turnierseiten wird --muted deshalb im Hellen um gut ein
   Viertel Richtung Stufe 700 abgedunkelt (≈ #616161, 5,2 : 1 auf #EBEBEB). Nur hier, nicht im Thema, damit andere
   Seiten unberührt bleiben; aus echten Stufen des Themas gemischt (keine erfundene Farbe). Dunkel ist unverändert. */
:root[data-variant="light"] :is(.tn-inhalt, .tn-leiste-rahmen) {
    --muted: color-mix(in srgb, var(--slate-600) 72%, var(--slate-700));
}

/* Seite für unbekannte Adressen (NotFoundPage) unter Turnier-Adressen: Dort gilt seit dem Umbau der Vollbreite-Rahmen
   ohne Polsterung ("its-main-home"); die Meldung bekommt dieselbe Inhaltsbreite wie its-wrap. Im normalen Rahmen
   ("its-main-detail") greift die Regel nicht. */
.its-main-home .its-nicht-gefunden { width: min(1240px, calc(100% - 80px)); margin: 28px auto 48px; }
@media (max-width: 580px) { .its-main-home .its-nicht-gefunden { width: calc(100% - 32px); } }

/* ---------- Statuspille (Entwurf .st) ---------- */
.tn-status { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 10px; box-sizing: border-box; border-radius: var(--radius-pill); font-size: 13px; font-weight: 650; white-space: nowrap; line-height: 1.2; }
.tn-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tn-status-beendet { border: 1px solid var(--border-strong); color: var(--muted); }
.tn-status-laeuft { background: var(--brand); color: var(--on-solid); border: 1px solid var(--brand); }
.tn-status-geplant { border: 1px solid var(--border-strong); color: var(--fg); }

/* ---------- Kopfnummer (Entwurf .kn) ---------- */
.tn-kn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 7px; margin-right: 8px; box-sizing: border-box; border-radius: 6px; background: var(--badge-bg); color: var(--fg); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; vertical-align: 1px; }

/* =====================================================================================
   Ergebnisansicht (ErgebnisAnsicht.razor)
   Der Rahmen ist ein Container: PC- und Handy-Teil stehen beide im Markup, die Breite des RAHMENS
   (nicht des Fensters) entscheidet. Grenze 700 px wie im Entwurf.
   ===================================================================================== */
.tn-ergebnis { container: tn / inline-size; display: grid; gap: 28px; min-width: 0; }
.tn-gruppe { display: grid; gap: 14px; min-width: 0; }
.tn-ansicht-handy { display: none; }
.tn-ansicht-pc, .tn-ansicht-handy { min-width: 0; }
.tn-gruppenkopf { margin: 0 0 14px; font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Rang ---------- */
.tn-rang { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tn-rang-plakette { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; padding: 0 8px; box-sizing: border-box; border-radius: var(--radius-control); background: var(--badge-bg); border: 1px solid var(--border); color: var(--fg-soft); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Gemeinsame Feinheiten ---------- */
.tn-reiter { font-weight: 650; font-size: 17px; color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.tn-reiter a { color: inherit; }
.tn-reiter-zusatz { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 14px; color: var(--muted); }
.tn-nation { display: inline-flex; align-items: center; gap: 6px; }
.tn-flagge-slot { display: inline-flex; align-items: center; justify-content: center; width: 22px; min-height: 15px; }
.tn-flagge { width: 22px; max-height: 15px; object-fit: contain; }
.tn-pferd { font-size: 16px; color: var(--fg-soft); min-width: 0; overflow-wrap: anywhere; }
.tn-pferd a { color: inherit; }
.tn-abstammung, .tn-muttervater { margin-left: 8px; font-size: 14px; color: var(--muted); }
.tn-abst-teil + .tn-abst-teil::before { content: " · "; white-space: pre; }
.tn-muttervater { display: inline-block; }
.tn-wert { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; font-variant-numeric: tabular-nums; }
.tn-wert-haupt { font-size: 15px; font-weight: 650; color: var(--fg); }
.tn-wert-neben { font-size: 13px; color: var(--muted); }
.tn-ausfall { color: var(--muted); font-size: 15px; font-weight: 650; }
.tn-trenner { padding: 10px 20px; font-size: 13px; font-weight: 650; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg-hover); }
.tn-trenner:empty { padding: 0; height: 1px; border-bottom: 0; background: var(--border-strong); }
.tn-hinweis { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 20px; font-size: 14px; color: var(--fg-soft); border-bottom: 1px solid var(--border); }
.tn-hinweis-vorsatz { font-weight: 700; color: var(--muted); }
.tn-zusatz { grid-column: 1 / -1; min-width: 0; }

/* ---------- PC: Podium ---------- */
.tn-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.tn-pod-n1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.tn-pod-n2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.tn-pod-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tn-pod-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tn-pod-karte { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 20px; box-sizing: border-box; text-align: center; min-width: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.tn-pod-p1 { padding-top: 34px; padding-bottom: 30px; border-color: var(--brand); }
.tn-pod-o1 { order: 1; } .tn-pod-o2 { order: 2; } .tn-pod-o3 { order: 3; } .tn-pod-o4 { order: 4; } .tn-pod-o5 { order: 5; } .tn-pod-o6 { order: 6; }
.tn-pod-platz { margin-top: 6px; font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tn-pod-reiter { margin: 0; font-size: 21px; }
.tn-pod-karte .tn-reiter-zusatz { justify-content: center; }
.tn-pod-pferd { font-size: 17px; }
.tn-pod-pferd .tn-kn { margin-right: 6px; }
.tn-pod-karte .tn-pferd-zusatz { font-size: 14px; }
.tn-pod-karte .tn-abstammung, .tn-pod-karte .tn-muttervater { display: block; margin: 2px 0 0; }
.tn-pod-werte { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 6px; }
.tn-pod-werte .tn-wert { align-items: center; text-align: center; flex-direction: column; }
.tn-pod-werte .tn-wert::before, .tn-pod-gesamt::after { content: attr(data-kopf); font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tn-pod-werte .tn-wert::before { order: -1; letter-spacing: .04em; }
.tn-pod-gesamt { display: flex; flex-direction: column; align-items: center; margin-top: 8px; font-variant-numeric: tabular-nums; }
.tn-pod-gesamt .tn-wert-haupt { font-size: 36px; font-weight: 800; line-height: 1.1; }
.tn-pod-p1 .tn-pod-gesamt .tn-wert-haupt { font-size: 44px; }
.tn-pod-gesamt .tn-wert-neben { font-size: 14px; }

/* ---------- PC: schlanke Liste ---------- */
.tn-liste { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-surface); overflow: hidden; }
.tn-kopfzeile, .tn-zeile { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.7fr) repeat(var(--tn-wn, 0), minmax(60px, .5fr)); gap: 0 16px; align-items: center; padding: 8px 20px; box-sizing: border-box; }
.tn-mit-gesamt .tn-kopfzeile, .tn-mit-gesamt .tn-zeile { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.7fr) repeat(var(--tn-wn, 0), minmax(60px, .5fr)) minmax(96px, auto); }
/* Ohne Wertspalten (Klasse aus ErgebnisAnsicht): "repeat(0, …)" wäre ungültig und ließe die Zeile in eine Spalte fallen. */
.tn-ohne-wertspalten .tn-kopfzeile, .tn-ohne-wertspalten .tn-zeile { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.7fr); }
.tn-ohne-wertspalten .tn-mit-gesamt .tn-kopfzeile, .tn-ohne-wertspalten .tn-mit-gesamt .tn-zeile { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.7fr) minmax(96px, auto); }
.tn-kopfzeile { min-height: 40px; background: var(--bg-hover); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tn-kopf-wert { text-align: right; }
.tn-zeile { min-height: 80px; border-bottom: 1px solid var(--border); }
.tn-liste > :last-child { border-bottom: 0; }
.tn-reiter-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tn-zeile .tn-rang { width: 64px; height: 74px; }
.tn-gesamt { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.tn-gesamt .tn-wert-haupt { font-size: 22px; font-weight: 800; }
.tn-gesamt .tn-wert-neben { font-size: 14px; }
/* Auf dem Podium trägt der Wert beide Klassen. Die Regel .tn-gesamt (rechtsbündig, steht weiter unten) überstimmte
   bisher die mittige Ausrichtung von .tn-pod-gesamt; ein langer Wert (Stechen) ragte dann aus der schmalen Karte
   (gemessen 14.11.2026, 1024 px). Mit beiden Klassen gewinnt die Mitte, und der Wert bleibt in der Karte. */
.tn-gesamt.tn-pod-gesamt { align-items: center; text-align: center; max-width: 100%; }
.tn-aus .tn-reiter, .tn-aus .tn-pferd { color: var(--muted); }
.tn-aus .tn-ausfall { font-size: 15px; }

/* ---------- Handy-Teil (Karten) ---------- */
.tn-karten { display: grid; gap: 8px; }
.tn-karte { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "rk who mark" "rk horse mark" "rk meta mark" "rk abst mark" "zus zus zus"; gap: 2px 12px; align-items: start; padding: 10px 14px; box-sizing: border-box; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.tn-karte > .tn-rang { grid-area: rk; width: 56px; height: 68px; align-self: center; }
.tn-karte > .tn-reiter { grid-area: who; font-size: 15px; }
.tn-karte > .tn-pferd { grid-area: horse; font-size: 14px; }
.tn-karte > .tn-reiter-zusatz { grid-area: meta; font-size: 13px; }
.tn-karte > .tn-pferd-zusatz { grid-area: abst; }
.tn-karte > .tn-pferd-zusatz .tn-abstammung, .tn-karte > .tn-pferd-zusatz .tn-muttervater { display: block; margin: 2px 0 0; font-size: 13px; }
.tn-karte > .tn-wertung-block { grid-area: mark; align-self: center; }
.tn-karte > .tn-zusatz { grid-area: zus; }
.tn-wertung-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tn-wertung { text-align: right; font-size: 14px; font-weight: 650; color: var(--fg); font-variant-numeric: tabular-nums; }
.tn-karten .tn-trenner, .tn-karten .tn-hinweis { padding-inline: 4px; background: none; }

/* ---------- Handy-Podium ---------- */
.tn-ansicht-handy .tn-pod { grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.tn-ansicht-handy .tn-pod-karte { padding: 16px 10px; }
.tn-ansicht-handy .tn-pod-p1 { grid-column: 1 / -1; padding: 22px 12px; }
.tn-ansicht-handy .tn-pod-reiter { font-size: 16px; }
.tn-ansicht-handy .tn-pod-pferd { font-size: 15px; }
.tn-ansicht-handy .tn-wertung-block { align-items: center; }
.tn-ansicht-handy .tn-wertung { text-align: center; font-size: 17px; }
.tn-ansicht-handy .tn-pod-p1 .tn-wertung { font-size: 22px; }
.tn-ansicht-handy .tn-pod-karte .tn-pferd-zusatz { font-size: 13px; }

@container tn (max-width: 700px) {
    .tn-ansicht-pc { display: none; }
    .tn-ansicht-handy { display: block; }
    .tn-ergebnis { gap: 22px; }
    .tn-ansicht-handy > .tn-pod { margin-bottom: 10px; }
    .tn-trenner { padding-block: 8px; }
}