/* ============================================================
   TCLE – Trainingskosten (Winter und Sommer)
   ============================================================

   Gemeinsame Stile der beiden Saisonseiten:
     pages/trainingskosten-winter.html         (Winter)
     pages/trainingskosten-sommer.html  (Sommer)

   Beide Seiten sehen gleich aus und sollen es bleiben. Die Regeln lagen
   vorher als <style>-Block in der Winterseite; mit der zweiten Saison
   haetten sie doppelt gepflegt werden muessen und waeren auseinander
   gelaufen. Deshalb eine eigene Datei statt eines Eintrags in page.css:
   die uebrigen 28 Unterseiten brauchen weder Preistabellen noch Rechner
   und sollen ihre Stile nicht mitladen.

   Geladen NACH base.css, nav.css und page.css - die Regeln hier setzen
   auf .tcle-table, .page-card und den Variablen aus base.css auf.

   Abschnitte, die es nur im Winter gibt (Platzkapazitaet: .tk-hall-table),
   stehen trotzdem hier. Sie kosten nichts, wenn die Sommerseite sie nicht
   verwendet, und gehoeren thematisch dazu.
   ============================================================ */

/* Tabellen ohne feste Mindestbreite: passen so auch auf schmale Bildschirme,
   Programm/Trainer-Name + Zusatzinfo stehen in einer Zelle übereinander. */
.tcle-table { min-width: 0; table-layout: fixed; }
.tcle-table th { white-space: normal; }
.tcle-table th:first-child,
.tcle-table td:first-child { width: 46%; }
.tcle-table th.right,
.tcle-table td.right { text-align: right; }
/* Preistabelle: 1 Namensspalte + 2 Spaltengruppen zu je 3 Zahlenspalten.
   Bei 390px bleiben je Zahlenspalte rund 44px - knapp, aber die Zahlen
   sind dreistellig und die Spaltentitel stehen als Kurzform da. Wer hier
   an Breiten oder Schriftgroessen dreht, prueft es bei 390px nach: eine
   Spalte mehr Umbruch macht die Kopfzeile doppelt so hoch. */
.tk-price-table thead th:first-child,
.tk-price-table td:first-child { width: 22%; }
.tk-price-table th { padding: .55rem .35rem; letter-spacing: normal; }
.tk-price-table thead th { padding: .7rem .3rem .45rem; }
/* "Gruppe" sitzt unten, auf einer Linie mit Gold/Silver/Junior. */
.tk-price-table thead tr:first-child th:first-child { padding-left: var(--tbl-px); vertical-align: bottom; }
/* Dauer ueber den drei Stufenspalten, deshalb zentriert. */
.tk-price-table th.mid {
  text-align: center;
  color: var(--color-navy);
  font-weight: var(--weight-bold);
  border-bottom: 0;
  padding-top: .9rem;
}
/* Stufenzeile ohne Grossbuchstaben: "SILVER" passt in 44px nicht,
   "Silver" schon. */
.tk-price-table th.tk-st {
  text-transform: none;
  font-size: .75rem;
  padding: .2rem .5rem .55rem .2rem;
}
.tk-price-table td { height: 46px; }
.tk-price-table td.right { padding: .6rem .5rem .6rem .2rem; }
.tk-price-table td:first-child {
  font-weight: var(--weight-semibold);
  padding: .6rem .3rem .6rem var(--tbl-px);
}
/* Handy: sechs Zahlenspalten mit je rund 44px. Mit dem Innenabstand vom
   Desktop bricht "Gold" dort in "Gol" + "d" um. */
@media (max-width: 480px) {
  .tk-price-table th.tk-st { padding-left: 0; padding-right: .3rem; }
  .tk-price-table td.right { padding-left: 0; padding-right: .3rem; }
}
/* Trennlinie zwischen dem 60- und dem 90-Minuten-Block. Ohne sie laufen
   sechs Zahlen in einer Zeile ineinander und man verzaehlt sich. */
.tk-price-table .tk-sep { box-shadow: inset 1px 0 0 var(--color-border); }
/* Unter 360px reicht die Spaltenbreite fuer "Silver" und "Junior" nicht
   mehr, sie brechen dann mit einem einzelnen "r" in der zweiten Zeile um.
   Eine Spur kleinere Schrift und weniger Innenabstand fangen das ab. Die
   Spaltenbreiten bleiben, wie sie sind: Zieht man die Namensspalte
   schmaler, bricht stattdessen "Einzel" um. Zahlen und Gruppennamen
   passen bei 320px unveraendert. */
@media (max-width: 359px) {
  .tk-price-table th.tk-st {
    font-size: .7rem;
    padding-left: .1rem;
    padding-right: .1rem;
  }
}
/* Aeussere Zwischenzeile: der Trainingstag. Er verhaelt sich zur Dauer wie
   das Kapitel zum Abschnitt, deshalb eine Stufe kraeftiger als .tk-dauer -
   Navy-Tint statt Grau-Tint. Bewusst NICHT das volle Navy der Kopfzeile:
   die erste Bandzeile steht direkt darunter, zwei gleiche Flaechen
   verschmelzen dort zu einem Block und die Spaltentitel gingen unter. */
.tk-price-table .tk-tage th {
  background: var(--color-navy-bg);
  color: var(--color-navy);
  font-weight: var(--weight-bold);
  padding: .55rem var(--tbl-px);
  border-top: 1px solid var(--color-border);
}
/* Die Bandzeile hat unten schon ihre Linie - keine zweite ueber "Einzel". */
.tk-price-table .tk-tage + tr td { background-image: none; }
/* Die erste Bandzeile grenzt nach oben schon an die Kopfzeile. */
.tk-price-table tbody:first-of-type .tk-tage th { border-top: none; }
/* ══ KOSTENRECHNER ═══════════════════════════════════
   Links die Fragen als Umschalter, rechts die Antwort als blaue Karte.
   Unter 1024px steht die Karte unter den Fragen.

   Die Umschalter folgen dem Tarif-Umschalter auf pages/mitgliedschaft.html
   (.filter-segment): gemeinsame Spur, nur die Auswahl traegt Blau und
   einen leichten Schatten, Hover nur als Tint. Die Regeln stehen hier
   lokal, weil jene Seite sie inline fuehrt.

   Die Spur nimmt var(--color-bg): Im weissen Abschnitt #preise ist das
   Weiss, die Karte darum herum Grau (--color-bg-card) - dieselbe
   Umkehrung wie bei Eingabefeldern (siehe CLAUDE.md, Hintergruende).

   .tk-calc steht in .prose - dessen Absatzabstand (.prose p, Spezifitaet
   0,1,1) wuerde auf jedes <p> im Rechner durchschlagen. Die <p> unten
   setzen ihren margin deshalb mit vorangestelltem .tk-calc selbst;
   ohne das Praefix gewinnt .prose p. */
.tk-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
  margin: var(--space-6) 0 var(--space-8);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1.5px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
}
.tk-calc[hidden] { display: none; }
@media (min-width: 1024px) {
  .tk-calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: start;
  }
  .tk-calc-hd { grid-column: 1 / -1; }
  /* Fussnote links unter den Fragen, die Karte belegt rechts beide
     Zeilen daneben. Stuende die Fussnote ueber die volle Breite, glitte
     die mitlaufende Karte (unten) beim Scrollen ueber sie. */
  .tk-calc-note { grid-column: 1; }
  .tk-calc-out { grid-column: 2; grid-row: 2 / span 2; }
}
/* Die Karte ist kuerzer als die Fragen daneben und laeuft beim Scrollen
   mit, bis der Rechner endet - so bleibt die Summe im Blick, waehrend
   man unten Beitrag oder Gruppe umstellt.
   top haelt 20px Abstand unter dem, was oben fest steht (gemessen):
   bis 1159px nur #nav (Unterkante 92px), ab 1160px zusaetzlich die
   klebende Bereichsleiste .lnav aus css/page.css (Unterkante 164px).
   Nur ab 700px Fensterhoehe: Darunter passt die Karte mit Beitragszeile
   nicht mehr unter die Leisten und wuerde unten abgeschnitten. */
@media (min-width: 1024px) and (min-height: 700px) {
  .tk-calc-out { position: sticky; top: 7rem; }
}
@media (min-width: 1160px) and (min-height: 700px) {
  .tk-calc-out { top: 11.5rem; }
}
.tk-calc-hd h3 { margin: 0 0 .25rem; }
.tk-calc-hd p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

/* ── Fragen ── */
.tk-calc-in { display: grid; gap: var(--space-4); }
.tk-calc-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Gruen ist laut CLAUDE.md die Label-Farbe auf hellem Grund. */
.tk-calc-field legend {
  padding: 0;
  margin-bottom: .45rem;
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green-dk);
}
.tk-calc-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
}
.tk-calc-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
/* "Nein" steht allein in der ersten Zeile, die vier Beitragsarten
   darunter als 2 x 2 - so bleibt keine Kachel allein uebrig. */
.tk-calc-chips label:first-child { grid-column: 1 / -1; }
.tk-calc-seg label,
.tk-calc-chips label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: .35rem .6rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-align: center;
  color: var(--color-text-soft);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tk-calc-seg label { white-space: nowrap; }
/* Kacheln statt Pillen: "Studium oder Ausbildung" bricht auf dem Handy
   um, mit voller Rundung saesse der Text dann in der Kurve. */
.tk-calc-chips label {
  flex-direction: column;
  padding: .45rem .75rem;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.tk-calc-chips small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  opacity: .85;
}
/* Das Radio selbst ist unsichtbar, bleibt aber fokussier- und
   bedienbar; die Beschriftung zeigt Auswahl und Fokus. */
.tk-calc-seg input,
.tk-calc-chips input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tk-calc-seg label:active,
.tk-calc-chips label:active { transform: scale(.97); transition-duration: .12s; }
@media (hover: hover) {
  .tk-calc-seg label:not(:has(input:checked)):hover,
  .tk-calc-chips label:not(:has(input:checked)):hover {
    background: var(--color-tint);
    color: var(--color-text);
  }
}
.tk-calc-seg label:has(input:checked),
.tk-calc-chips label:has(input:checked) {
  background: var(--color-navy);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
/* Gleitender Knopf in den Umschaltern: Statt dass das alte Feld aus-
   und das neue angeht, liegt ein blauer Knopf unter der Leiste und
   gleitet zum gewaehlten Feld. Lage und Breite setzt js/training.js,
   erst dann bekommt die Leiste .gleitet - ohne JS bleibt es bei der
   Hinterlegung am Feld selbst (Regel darueber). Kurve und Dauer wie die
   Beitragszeile im Rechner. Beim Mitgliedsbeitrag bewusst nicht: Die
   Kacheln liegen in zwei Reihen, ein Knopf quer durchs Raster waere
   unruhig. */
.tk-calc-seg { position: relative; }
.tk-calc-knopf {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
  transition: transform .3s cubic-bezier(.33, 1, .68, 1);
  pointer-events: none;
}
.tk-calc-seg.gleitet label:has(input:checked) {
  background: transparent;
  box-shadow: none;
}
/* Schrift wechselt so lange wie der Knopf unterwegs ist, sonst stuende
   kurz weisse Schrift auf hellem Grund. */
.tk-calc-seg.gleitet label {
  transition: background-color var(--dur-fast) var(--ease-out),
              color .3s cubic-bezier(.33, 1, .68, 1),
              transform var(--dur-fast) var(--ease-out);
}
.tk-calc-seg label:has(input:focus-visible),
.tk-calc-chips label:has(input:focus-visible) {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}
/* Ausgeschriebene Tage passen auf schmalen Handys nicht in eine Haelfte
   der Spur ("Mittwoch bis Samstag" braucht rund 165px, bei 390px
   bleiben gut 150). Darunter die Kurzform. */
.tk-calc-kurz { display: none; }
@media (max-width: 459px) {
  .tk-calc-lang { display: none; }
  .tk-calc-kurz { display: inline; }
}
.tk-calc .tk-calc-hint {
  margin: .4rem 0 0 .9rem;
  font-size: var(--fs-xs);
  color: var(--color-text-mute);
}

/* ── Ergebnis ── */
.tk-calc-out {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--color-navy);
  color: #fff;
  box-shadow: 0 10px 30px rgba(33,79,152,.22);
}
/* Dachzeile: sagt, was in der Summe steckt. Gelb nur als Strich davor,
   nicht als Schrift - gelbe Schrift ist laut CLAUDE.md dem Hero
   vorbehalten. */
.tk-calc .tk-calc-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.tk-calc-kicker::before {
  content: '';
  flex-shrink: 0;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-brand);
}
/* Serif fuer die Zahl - dieselbe Ausnahme wie bei .tk-deadline-date
   weiter unten. 700 ist der schwerste geladene Schnitt. */
.tk-calc .tk-calc-total {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-normal);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tk-calc-total > span { display: block; }
.tk-calc-bis {
  margin-top: .45rem;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  color: rgba(255,255,255,.8);
}
.tk-calc-bis:empty { display: none; }

.tk-calc-rows { margin: 0; display: flex; flex-direction: column; }
.tk-calc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem var(--space-4);
  padding: .7rem 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.tk-calc-row[hidden] { display: none; }
.tk-calc-row dt { font-size: var(--fs-sm); color: #fff; }
.tk-calc-row dt span {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.72);
}
.tk-calc-row dd {
  /* margin-left:auto statt nur space-between: bricht die Zeile auf
     schmalen Schirmen um, steht der Betrag sonst linksbuendig unter der
     Beschriftung. So bleibt er auch dann rechts. */
  margin: 0 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  color: #fff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Zusatzzeile unter einem Betrag, derzeit der Monatspreis beim Training. */
.tk-calc-sub {
  display: block;
  margin-top: .15rem;
  font-size: var(--fs-xs);
  font-weight: var(--weight-normal);
  color: rgba(255,255,255,.72);
}
/* Die Grenze aus demselben Grund wie bei .prose-full: Über die ganze
   Breite des Rechners (gemessen 846px) kam diese Fußnote auf rund 179
   Zeichen je Zeile. */
.tk-calc .tk-calc-note {
  margin: 0;
  max-width: 68ch;
  font-size: var(--fs-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
}

/* Einheit direkt in den Spaltenkopf: In den Zellen steht nur die nackte
   Zahl ("225"). Die Fussnote unter der Tabelle erklaert sie zwar, steht
   auf dem Handy aber rund zwei Bildschirmhoehen nach den Zahlen. Der
   Spaltenkopf ist die naechstgelegene Beschriftung und damit die Stelle,
   an der die Einheit gelesen wird. Die Fussnote bleibt fuer den Zeitraum
   und die Umsatzsteuer stehen.
   Dieselbe Rolle hat .tk-tage-sub in der Tag-Bandzeile: Die Zahl der
   Trainingswochen gehoert zum Trainingstag und stand vorher in der
   Zeile unter der Ueberschrift, die es mit der zusammengefuehrten
   Tabelle nicht mehr gibt. */
.tk-price-table .tk-unit,
.tk-price-table .tk-tage-sub {
  display: block;
  margin-top: .15rem;
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-mute);
}
/* Hallenzeiten: schmale Tagesspalte, die beiden Ortsspalten teilen sich
   den Rest. Die Quelle listet die Wochentage als Spalten - bei sieben
   Spalten bleibt auf dem Handy pro Spalte zu wenig uebrig, deshalb hier
   gedreht: Tage als Zeilen, Orte als Spalten. */
.tk-hall-table th:first-child,
.tk-hall-table td:first-child { width: 22%; }
.tk-hall-table th { letter-spacing: normal; }
/* Schmale Tagesspalte: rechts nur wenig Abstand, sonst bricht schon
   "Montag" auf dem Handy um. */
.tk-hall-table th:first-child,
.tk-hall-table td:first-child { padding-right: .3rem; }
/* ══ ANMELDUNG ══════════════════════════════════════════
   Kopfzeile: links Ueberschrift und Einleitung, rechts die Frist als
   eigene Karte. Ab 900px zweispaltig, darunter untereinander. */
.tk-anm-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-8);
}
@media (min-width: 900px) {
  .tk-anm-top {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-8);
  }
}
.tk-anm-lead .h2 { margin-bottom: var(--space-4); }
.tk-anm-text {
  max-width: 34rem;
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
}
/* ── Frist-Karte ── */
.tk-deadline {
  padding: 1.2rem 1.4rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.tk-deadline-lbl {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
  font-size: var(--fs-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* Gruen ist laut CLAUDE.md die Label-Farbe auf hellem Grund - so
     konkurriert die Zeile nicht mit den blauen Verweisen daneben. */
  color: var(--color-green-dk);
}
.tk-deadline-lbl svg { flex-shrink: 0; }
/* Serif fuer die Zahl - dieselbe Ausnahme wie bei .as-number in
   css/home.css und .news-date-num in css/base.css. 700 ist der
   schwerste geladene Schnitt von Libre Baskerville. */
.tk-deadline-date {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-slight);
  color: var(--text);
  margin-bottom: .5rem;
}
.tk-deadline-note {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  line-height: 1.55;
}

/* ── Schritt-Karten ──
   Zwei Karten nebeneinander, dazwischen ein Pfeil als Leserichtung.
   Unter 760px stapeln sie, der Pfeil steht dann dazwischen und zeigt
   nach unten. Kein <ol>: der Pfeil waere darin ein dritter Eintrag. */
.tk-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: var(--space-6);
}
@media (min-width: 760px) {
  .tk-steps {
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: center;
  }
}
.tk-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .tk-step:hover { border-color: rgba(33,79,152,.25); box-shadow: var(--shadow-md); }
}
.tk-step-hd {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: var(--space-3);
}
.tk-step-n {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  color: var(--navy);
}
.tk-step-of {
  font-size: var(--fs-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-mute);
}
/* Absichtlich <p> statt <h3>: die Karten-Titel laufen in Urbanist,
   h1-h3 waeren laut CLAUDE.md Libre Baskerville. */
.tk-step-title {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text);
  margin-bottom: .6rem;
}
.tk-step-text {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}
.tk-step-badge {
  display: inline-block;
  padding: .4rem .85rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-navy-bg);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-navy-dk);
}
/* Haelt den Button am Fuss der Karte - sonst stehen die beiden
   Knoepfe auf verschiedener Hoehe, sobald ein Text laenger ist. */
.tk-step-btn { margin-top: auto; }
/* Gefuellter Blau-Button. css/base.css kennt bisher nur Gelb, Weiss und
   die Outline-Varianten; Geometrie und Hover-Logik kommen von .btn. */
.btn-navy {
  background: var(--color-navy);
  color: #fff;
}
@media (hover: hover) {
  .btn-navy:hover {
    background: var(--color-navy-dk);
  }
}
/* Pfeil zwischen den Karten: reine Leserichtung, deshalb aria-hidden.
   Gedreht wird das SVG, nicht der Wrapper. */
.tk-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-navy-bg);
  color: var(--navy);
}
.tk-step-arrow svg { transform: rotate(90deg); }
@media (min-width: 760px) {
  .tk-step-arrow svg { transform: none; }
}

/* ── Hinweis Mitgliedschaft ── */
.tk-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: clamp(1.1rem, 3vw, 1.4rem) clamp(1.1rem, 3vw, 1.75rem);
  border: 1.5px solid rgba(33,79,152,.18);
  border-radius: var(--radius-md);
  background: var(--color-navy-bg);
}
.tk-member-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
}
.tk-member-txt {
  flex: 1 1 18rem;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
}
.tk-member-txt strong { color: var(--text); font-weight: 700; }
.tk-member-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--touch);
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.tk-member-link::after { content: '\2192'; }
@media (hover: hover) {
  .tk-member-link:hover { opacity: .75; }
}
/* ── Saison-Wechsel ──
   Sitzt im Hero direkt unter der Subline, an der Stelle der
   Hero-Buttons: die Frage "welche Saison" kommt beim Ankommen auf, also
   wird sie dort beantwortet. Vorher stand hier ein eigener Block im
   grauen Bereich - damit lagen drei Navigationsebenen uebereinander
   (Hero, Saison und eine inzwischen entfernte Sprungleiste) und der gefuellte blaue Eintrag sass
   direkt unter dem blauen Hero.
   Zwei echte <a>, kein Umschalter per JS - die beiden Saisons sind
   eigene Seiten mit eigenen Fristen und Terminen, und der Wechsel soll
   teilbar und ohne JS benutzbar sein.
   aria-current="page" markiert die Seite, auf der man gerade steht. */
.tk-seasontab {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .25rem;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-full);
}
.tk-seasontab a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: .5rem 1.15rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,.75);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .tk-seasontab a:hover { background: rgba(255,255,255,.16); color: #fff; }
}
/* Der globale Fokusring ist blau (css/base.css) und waere auf dem blauen
   Hero unsichtbar. Hier deshalb weiss, sonst unveraendert. */
.tk-seasontab a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: var(--radius-full);
}
/* Aktuelle Seite: gefuellt statt transparent. Weiss statt Gelb, weil das
   Gelb im Hero schon der Ueberschrift gehoert - zwei gelbe Flaechen
   nebeneinander wuerden sich um denselben Akzent streiten. */
.tk-seasontab a[aria-current="page"] {
  background: #fff;
  color: var(--color-navy);
  cursor: default;
}
@media (hover: hover) {
  .tk-seasontab a[aria-current="page"]:hover { background: #fff; color: var(--color-navy); }
}

/* Anker nicht unter die fixe #nav-Leiste schieben - dieselben
   5rem wie bei .teams-section in css/home.css und .mob-group in
   css/nav.css. Gilt fuer alle Abschnitte beider Saisonseiten; die
   Sommerseite hat weniger davon, die ueberzaehligen Regeln greifen
   dort einfach ins Leere. */
#anmeldung, #preise, #hallenzeiten, #ablauf, #platzregeln, #termine {
  scroll-margin-top: 5rem;
}
/* Ab 1160px uebernimmt scroll-padding-top in css/page.css (Nav plus
   Bereichsleiste) - beides zusammen wuerde den Abstand verdoppeln. */
@media (min-width: 1160px) {
  #anmeldung, #preise, #hallenzeiten, #ablauf, #platzregeln, #termine {
    scroll-margin-top: 0;
  }
}
.tk-title { display: block; font-weight: var(--weight-bold); color: var(--text); }
.tk-sub   { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-soft); }

/* ── Auf dem Platz (nur Sommerseite) ──
   Liste links, Foto rechts; unter 860px steht das Foto unter der Liste.
   Das Foto ist 700px breit und wird auf 360px begrenzt, damit es auch
   auf Retina-Bildschirmen scharf bleibt. */
.tk-platz {
  display: grid;
  gap: var(--space-gap);
  align-items: center;
}
@media (min-width: 860px) {
  /* Erste Spalte so breit wie .prose maximal (680px), damit das Foto
     direkt neben der Liste steht und nicht am rechten Rand. */
  .tk-platz {
    grid-template-columns: minmax(0, 680px) minmax(0, 360px);
    column-gap: var(--space-10);
  }
}
.tk-platz-img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ── Abschluss des Kostenabschnitts ──────────────────────────
   Hallenkosten und Abrechnung links, der Kontaktkasten rechts daneben.
   Spaltenmaße wie bei .tk-platz: Die erste Spalte wird höchstens so
   breit wie .prose (680px), damit der Kasten direkt neben dem Text
   steht und nicht am rechten Rand. Darunter eine Spalte, der Kasten
   liegt dann wie bisher unter dem Text.
   Der Kasten sitzt senkrecht mittig zur Textspalte, nicht oben bündig:
   Er beantwortet Fragen zu Hallenkosten wie zu Abrechnung, und oben an
   der ersten Überschrift läse er sich wie eine Fußnote allein zu den
   Hallenkosten. Mittig statt gestreckt, sonst stünden die paar
   Kontaktzeilen in einer halbleeren Fläche.
   Erst ab 1024px, nicht ab 860px wie bei .tk-platz: Dort steht rechts
   ein Bild, das mit jeder Breite zurechtkommt. Hier bliebe für den
   Fließtext bei 860px nur eine 368px schmale Spalte, gemessen rund 45
   Zeichen je Zeile. Ab 1024px sind es 527px. */
.tk-schluss {
  display: grid;
  gap: var(--space-gap);
  align-items: center;
}
.tk-schluss > .infobox { margin: 0; }
@media (min-width: 1024px) {
  .tk-schluss {
    grid-template-columns: minmax(0, 680px) minmax(0, 360px);
    column-gap: var(--space-10);
  }
}