/* ============================================================
   TCLE – Unterseiten-Stile (page.css · Mobile-First 2026)
   ============================================================ */

/* ── Abschnitts-Überschrift (Unterseiten) ──
   .sec-h2 und .h2 sind auf Unterseiten dieselbe Stufe.

   .h2 ist laut css/base.css die Display-Überschrift der Startseite
   (--fs-display, 35,2px → 56px). Zwölf Unterseiten hatten sie sich
   geliehen, sechs andere benutzten .sec-h2 – ohne Regel, welche Seite
   welche Stufe bekommt: Trainingsteam lief auf 56px, Vorstand auf 36px,
   Mitgliedschaft auf 56px, Mitgliederaktion auf 36px. Auf
   pages/trainingsangebote.html standen beide Stufen in derselben Konstruktion
   (.sec-hdr > div > p.eyebrow + h2) direkt untereinander.

   Deshalb nimmt page.css .h2 hier auf die Unterseiten-Stufe zurück,
   statt in zwölf Dateien Klassen zu tauschen: Die margin-Ausnahmen
   .tk-anm-lead .h2 (css/training.css) und .mem-prices .h2 (inline in
   pages/mitgliedschaft.html) zielen auf .h2 und blieben bei einem
   Klassentausch wirkungslos. Die Startseite ist nicht betroffen, sie
   bindet page.css nicht ein – .h2 behält dort --fs-display.

   Das margin-bottom von .h2 (--space-5) wird bewusst NICHT
   überschrieben: es trägt die Abstände der zwölf Seiten. .sec-h2 hat
   weiterhin keins, damit die sechs bestehenden Seiten unverändert
   bleiben. Die beiden Klassen sind also gleich groß, aber nicht
   identisch.
──────────────────────────────────────────────────────────── */
.sec-h2,
.h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  /* 700 statt 800 – Begründung siehe h1/h2 in css/base.css */
  font-weight: var(--weight-bold);
  color: var(--color-text);
  /* Eigene Größenstufe (24px → 36px), deshalb ein eigener Verlauf statt
     eines --tracking-*-Tokens; Aufbau und Begründung siehe base.css.
     Der Bereich beginnt hier erst bei 686px Viewport – vorher greift
     die 1.5rem-Untergrenze der font-size, also auch die em-Obergrenze.
     Um +.011em zurückgenommen, gleiche Messung wie bei den Tokens: bei
     -.034em berührten sich in "Unsere Ansprechpartner" A und n. */
  letter-spacing: clamp(-.023em, .0271rem - .123vw, -.017em);
  /* 1.05 statt der --leading-none von .h2: die engere Zeilenhöhe war für
     56px gedacht. Greift nur bei mehrzeiligen Titeln, also bei den
     <br>-Umbrüchen auf pages/mitgliedschaft.html und pages/trainingsangebote.html. */
  line-height: var(--leading-tight);
}

/* Akzent-Kind der Abschnitts-Überschrift: aufrecht statt kursiv, in
   Vereinsblau. Stand bisher nur als .h2 em in css/base.css – .sec-h2
   hatte keine Entsprechung, und es gibt auch keine globale em-Regel.
   Sichtbar wurde das auf pages/trainingsangebote.html:362, wo "probieren" als
   einzige Überschrift der Website kursiv und schwarz lief statt
   aufrecht und blau. Alle 33 .h2 der Unterseiten enthalten ein <em>,
   diese Regel trägt sie mit. */
.sec-h2 em,
.h2 em {
  font-style: normal;
  color: var(--color-navy);
}

/* ── PAGE HERO (Unterseiten-Header) ── */
.page-hero {
  /* Mobile: genug Platz für Nav (60px, schwebend) + Headline */
  padding: calc(clamp(4.5rem, 10vw, 7rem) + var(--space-4)) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 4rem);
  background: var(--color-navy);
  position: relative;
  overflow: hidden;
}

.page-hero-inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .4rem;
  font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold);
  color: rgba(255,255,255,.55);
  margin-bottom: var(--space-4);
  letter-spacing: .02em;
  overflow: hidden;
}
.breadcrumb a { color: rgba(255,255,255,.65); transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .breadcrumb a:hover { color: #fff; }
}
.breadcrumb-sep { opacity: .4; flex-shrink: 0; }

/* ── Page-Hero Tag ── */
.page-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: var(--space-3);
}
.page-hero-tag::before {
  content: '';
  display: block;
  width: 14px; height: 2px;
  background: rgba(255,255,255,.4);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Page-Hero Headline ── */
.page-hero h1 {
  font-size: var(--fs-4xl);
  font-weight: var(--weight-bold);
  color: #fff;
  letter-spacing: var(--tracking-4xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  max-width: 700px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.page-hero h1 em { font-style: normal; color: var(--color-brand); }

/* ── Schmaler Kopf für Seiten zum Nachschlagen ──────────────
   Impressum, Datenschutz, Spielordnung, Dokumente. Kein blaues
   Feld, sondern Grundton wie der Abschnitt darunter; Farben wie
   .tag und .h2 auf hellem Grund. Unten kein eigener Abstand, den
   bringt die folgende .sec-cream mit. */
.page-hero.page-hero-plain {
  background: var(--color-bg-base);
  padding-bottom: 0;
}
.page-hero-plain .breadcrumb   { color: var(--color-text-mute); }
.page-hero-plain .breadcrumb a { color: var(--color-text-soft); }
@media (hover: hover) {
  .page-hero-plain .breadcrumb a:hover { color: var(--color-navy); }
}
.page-hero-plain .page-hero-tag         { color: var(--color-navy); }
.page-hero-plain .page-hero-tag::before { background: var(--color-navy); }
/* padding-bottom: Die Zeilenhöhe 1.05 ist knapper als die Schriftbox
   von Libre Baskerville. Ohne Abstand unten schneidet das
   overflow: hidden des Hero die Unterlängen der letzten Zeile ab
   („Spielordnung“, „Datenschutzerklärung“). */
.page-hero-plain h1    { color: var(--color-text); margin-bottom: 0; padding-bottom: .1em; }
.page-hero-plain h1 em { color: var(--color-navy); }
/* Voller Abschnittsabstand wirkt ohne Flächenwechsel wie ein Loch
   zwischen Titel und Text – hier reicht die Hälfte. */
.page-hero-plain + .sec { padding-top: calc(var(--space-section) / 2); }

/* Mehrere Buttons im Page-Hero: sauberer Abstand statt zu dichtem Umbruch */
.page-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Zahlenband unter dem Page-Hero ──────────────────────────
   Derzeit nur auf pages/ueber-uns.html. Gestaltet wie frueher die
   blaue Leiste .hero-stats unter dem Hero der Startseite. Die gibt
   es nicht mehr: Auf der Startseite stehen die Zahlen jetzt ohne
   blaue Flaeche in "Mehr als nur Tennis" (.about-stats in
   css/home.css), in Blau auf Grau. Dieses Band bleibt bewusst blau.
──────────────────────────────────────────────────────────── */
.page-stats {
  background: var(--color-navy);
  position: relative;
  z-index: 2;
}
.page-stats-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
}
@media (min-width: 600px) {
  .page-stats-inner { grid-template-columns: repeat(4, 1fr); }
}
.ps-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem;
}
.ps-number {
  font-size: clamp(2rem, 5vw, 3.25rem);
  /* Bewusste Ausnahme: Serif auch ausserhalb von h1-h3. 700 statt 800,
     weil Libre Baskerville nur mit 400 und 700 geladen ist. */
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-brand);
  /* 0 statt negativ: der Wert war auf Urbanist abgestimmt, in der Serif
     stossen die Ziffern damit zusammen. Siehe .hs-number in home.css. */
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ps-label {
  font-size: clamp(.65rem, 1.2vw, .75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  /* .7 statt .55: erst damit sind 4.5:1 auf Navy erreicht (WCAG AA) */
  color: rgba(255, 255, 255, .7);
}
@media (min-width: 600px) {
  .ps-item + .ps-item {
    border-left: 1px solid rgba(255, 255, 255, .08);
    padding-left: clamp(1rem, 3vw, 2rem);
  }
}

/* ── Prosa-Text ── */
.prose {
  font-size: var(--fs-base);
  color: var(--color-text-soft);
  line-height: var(--leading-relaxed);
  max-width: 680px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.prose p { margin-bottom: var(--space-5); }
.prose h2,
.prose h3 {
  font-size: var(--fs-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: var(--tracking-3xl);
  margin: var(--space-8) 0 var(--space-3);
}
.prose ul,
.prose ol:not([class]) { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose strong { color: var(--color-text); font-weight: 700; }
.prose a { color: var(--color-navy); font-weight: var(--weight-semibold); transition: opacity var(--dur-fast) var(--ease-out); word-break: break-all; overflow-wrap: anywhere; }
@media (hover: hover) {
  .prose a:hover { opacity: .75; }
}
/* .prose-full nimmt die volle Inhaltsbreite, weil Tabellen und der
   Kostenrechner sie brauchen. Der Fließtext darin soll sie nicht erben:
   Über 1320px kamen Absätze auf 110 bis 134 Zeichen je Zeile, gut liest
   sich Fließtext bei 45 bis 75, ab etwa 90 wird das Zurückspringen ans
   Zeilenende anstrengend. Grenze in ch, damit sie der Schriftgröße folgt.
   Überschriften bleiben ohne Grenze, die sind kurz genug. */
.prose-full { max-width: 100%; }
.prose-full > p,
.prose-full > ul,
.prose-full > ol { max-width: 68ch; }
.note-mute { font-size: .82rem; color: var(--color-text-mute); }

/* ── Infoboxen ──
   Nur die blaue Tönung, kein Rahmen und kein Schatten: eine Fläche reicht,
   um die Box abzusetzen (wie die Tabellen unten).
   Abstände kommen aus dem CSS, nicht aus <br><br>: Der Titel sitzt eng an
   seinem Text, Gruppen sind durch Abstand getrennt. Die Selektoren tragen
   ein Element mit, damit sie .prose p/ul/li schlagen, wenn die Box in
   einem Prosa-Block steht. */
.infobox {
  background: var(--color-navy-bg);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.6;
  margin: var(--space-8) 0;
}
.infobox p,
.infobox ul,
.infobox dl { margin: 0; padding: 0; }
.infobox > * + p,
.infobox > * + ul,
.infobox > * + dl { margin-top: var(--space-3); }
.infobox > .infobox-title + p { margin-top: .3rem; }
.infobox > * + .infobox-title { margin-top: var(--space-5); }
.infobox-title {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}
.infobox strong { color: var(--color-text); font-weight: 700; }
.infobox a { color: var(--color-navy); font-weight: 600; }

/* Aktionen: jeder Kontaktweg und jeder Link eine eigene Zeile, über die
   volle Breite tippbar (mind. 44px). Den Pfeil rechts (.ia-end) bekommen
   nur Links auf Seiten, nicht mailto:/tel: – die öffnen eine andere App. */
.infobox > * + .infobox-actions { margin-top: var(--space-2); }
.infobox > .infobox-title + .infobox-actions { margin-top: .2rem; }
.infobox-actions { list-style: none; }
.infobox-actions li { margin: 0; }
.infobox-actions li + li { border-top: 1px solid rgba(33,79,152,.14); }
.infobox-actions a {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: var(--touch);
  padding: .35rem 0;
  word-break: normal;
  overflow-wrap: anywhere;
}
.infobox-actions svg { width: 18px; height: 18px; flex-shrink: 0; }
.infobox-actions .ia-end { width: 16px; height: 16px; margin-left: auto; opacity: .55; }
/* Zusatz zur Zeile, z. B. wer abnimmt oder dass WhatsApp geht */
.infobox-actions .ia-meta {
  margin-left: auto;
  padding-left: .5rem;
  font-weight: 400;
  color: var(--color-text-soft);
  text-align: right;
}

/* Kurzfakten nebeneinander (Fälligkeit, Datum, Ort …) */
.infobox-facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.infobox-facts dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green-dk);
}
.infobox-facts dd {
  margin: .15rem 0 0;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}
.infobox-facts dd small {
  display: block;
  margin-top: .15rem;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-soft);
}

/* ── Zitat ── eigenes Element statt Infobox */
.zitat {
  margin: var(--space-8) 0 0;
  max-width: 46rem;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-navy);
}
.zitat blockquote { margin: 0; }
.zitat p {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}
.zitat figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green-dk);
}

/* Infobox-Kopf mit Vereinswappen (siehe pages/ueber-uns.html) */
.infobox-hd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.infobox-hd .infobox-crest {
  height: 52px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.infobox-hd strong { font-size: var(--fs-base); }

/* ── Tabellen ── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  /* Scroll-Schatten als visueller Hinweis auf scrollbare Tabelle */
  border-radius: var(--radius-lg);
}

/* Tabelle als ruhige Karte (Vorbild: gruppierte Listen bei iOS): kein
   Rahmen, kaum Schatten, Kopfzeile nur als graue Beschriftung. Die Inhalte
   tragen, nicht die Kopfzeile.
   border-collapse: separate, weil die Trennlinien als Hintergrund der
   Zellen gezeichnet werden (siehe td unten). --tbl-px ist der seitliche
   Innenabstand; die eingerueckte Trennlinie beginnt genau dort. */
.tcle-table {
  --tbl-px: 1.1rem;
  width: 100%;
  min-width: 440px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: clamp(.875rem, .85rem + .15vw, .9375rem);
  line-height: 1.4;
  /* Gleich breite Ziffern: Preise und Punkte stehen exakt untereinander. */
  font-variant-numeric: tabular-nums;
  margin: var(--space-6) 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.035);
}
/* Zweispaltige Tabellen mit kurzem Inhalt brauchen die 440px Mindestbreite
   nicht - sie passen auch auf schmale Displays komplett ins Bild und
   sollen dort nicht seitlich gescrollt werden muessen. */
.tcle-table-fit { min-width: 0; }

.tcle-table th {
  background: var(--color-bg-card);
  color: var(--color-text-soft);
  font-weight: var(--weight-semibold);
  padding: .85rem var(--tbl-px) .55rem;
  text-align: left;
  font-size: clamp(.75rem, .72rem + .1vw, .78rem);
  letter-spacing: .01em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
/* Mindestens 52px je Zeile. Die Trennlinie sitzt als 1px-Hintergrund oben
   an jeder Zeile ausser der ersten und beginnt in der ersten Spalte erst an
   der Textkante. Hover und Druck setzen deshalb nur background-color,
   nie das Kurzwort background - das wuerde die Linie loeschen. */
.tcle-table td {
  padding: .8rem var(--tbl-px);
  height: 52px;
  color: var(--color-text);
  background-color: var(--color-bg-card);
  word-break: break-word;
  transition: background-color .18s ease;
}
.tcle-table tbody tr + tr td {
  background-image: linear-gradient(var(--color-border), var(--color-border));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
.tcle-table tbody tr + tr td:first-child {
  background-size: calc(100% - var(--tbl-px)) 1px;
  background-position: var(--tbl-px) 0;
}
@media (hover: hover) {
  .tcle-table tbody tr:hover td { background-color: var(--color-tint); }
}
/* Rueckmeldung sofort beim Antippen, nicht erst nach dem Loslassen. */
.tcle-table tbody tr:active td { background-color: var(--color-tint); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tcle-table td { transition: none; }
}

/* Team-Link: Mannschaft + Gruppe/Liga stehen in einer Zelle übereinander,
   damit die Tabelle ohne horizontales Scrollen auf schmale Bildschirme passt */
.team-link {
  display: block;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  text-decoration: none;
  font-size: 1em;
}
.group-link {
  display: block;
  margin-top: 3px;
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: clamp(.72rem, .7rem + .1vw, .75rem);
  font-weight: var(--weight-medium);
}
@media (hover: hover) {
  .team-link:hover { text-decoration: underline; opacity: .8; }
  .group-link:hover { color: var(--color-navy); text-decoration: underline; }
}
/* Rückmeldung beim Antippen, auch ohne Maus. Mit Elementselektor, weil
   pages/verbandsrunde.html beide Klassen im eigenen <style> noch einmal
   deklariert und dessen :hover sonst gewinnt. */
a.team-link:active { opacity: .6; }
a.group-link:active { color: var(--color-navy); }

/* ── Über uns – Bild ── */
.about-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: block;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-md);
}

/* Bild-neben-Text-Reihe: Das Bild steht im Quelltext vor dem Text, damit es
   auf dem Handy (eine Spalte) über der Überschrift liegt. Ab 768px, wo .two
   zwei Spalten bildet, tauscht order die beiden – das Bild steht dann rechts
   neben dem Text. */
@media (min-width: 768px) {
  .two-media-right > :first-child { order: 2; }
}
/* Auf dem Handy trennt schon der grid-gap Bild und Überschrift, die
   Grundmarge von .about-img käme doppelt dazu. */
.two-media-right .about-img { margin-bottom: 0; }

/* ── Seitenfoto oben im ersten Abschnitt ────────────────────
   Training, Plätze, Mannschaften. Volle Inhaltsbreite, damit die
   Seite mit einem Bild anfängt statt mit Text. Aussehen wie
   .about-img. Auf dem Handy 4:3, sonst würde das Bild zu flach. */
.page-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: block;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .page-photo { aspect-ratio: 16 / 9; }
}
/* ── Über uns – Gruppenfoto enger beschnitten ──────────────
   Das Tenniscamp-Foto ist 4:3, und die Hauswand nimmt darin die
   obere Hälfte ein. In der Spaltenbreite werden die Kinder dadurch
   sehr klein. 16:10 statt 4:3 schneidet den oberen Teil weg
   (object-position: center bottom), die Gruppe füllt das Bild.
   Gilt nur für dieses Foto - das Anlagenbild bleibt bei 4:3. */
.about-img-group {
  aspect-ratio: 16 / 10;
  object-position: center bottom;
}

/* ── Über uns – Vereinswappen über der ersten Überschrift ──
   Steht bewusst auf hellem Grund: der Wappenkörper ist #214F98,
   also exakt --color-navy. Auf dem blauen Page-Hero würde er mit
   dem Hintergrund verschmelzen und nur Gelb und Kontur blieben. */
.about-crest {
  height: clamp(64px, 9vw, 88px);
  width: auto;
  display: block;
  margin-bottom: var(--space-4);
}

/* ── Über uns – Karten „Was uns wichtig ist" ──────────────
   Eigener Wrapper statt Regeln auf .page-card: die Karte wird
   auch auf pages/foerderungskonzept.html benutzt, die soll sich
   nicht mitverändern. */
.about-cards .page-card h3 {
  font-size: var(--fs-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.about-cards .page-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: var(--leading-relaxed);
}

/* ── Über uns – Verweise auf die weiterführenden Seiten ──── */
.next-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-4);
}
.next-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  /* .9rem vertikal ergibt mit der Zeilenhöhe ein Touch-Ziel über 44px */
  padding: .9rem 1.15rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.next-links a span { color: rgba(33,79,152,.45); }
@media (hover: hover) {
  .next-links a:hover {
    border-color: var(--color-navy-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }
}

/* ── Page-Grids (Mobile-First, auto-fit) ── */

/* 2-Spalten: bricht bei ~22rem/Spalte auf 2 Spalten um */
.page-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-gap);
}

/* ── Cards (Unterseiten) ── */
.page-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  /* Keine feste Höhe — Grid-Zeilen gleichen Höhen über align-items:stretch */
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
/* Anheben beim Überfahren nur bei Karten, die als Ganzes ein Link sind
   (Download-Karten im Ressourcen-Center). Karten mit bloß einem Textlink
   darin sind als Fläche nicht klickbar; Rand, Schatten und Anheben
   versprachen dort einen Klick, auf den nichts folgte. Gleiche Regel wie
   beim Druck-Feedback darunter. */
@media (hover: hover) {
  a.page-card:hover {
    border-color: var(--color-navy-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }
}

/* Druck-Feedback für Karten, die als Ganzes ein Link sind (Download-Karten
   im Ressourcen-Center, Weiter-Links): Die Karte gibt beim Drücken leicht
   nach, sofort (0,1s) – auch auf Touch-Geräten, wo es kein Hover gibt.
   Nur hier, nicht bei Karten mit bloß einem Textlink darin: Die sind als
   Fläche nicht klickbar und sollen es auch nicht versprechen. Über
   transform, weil die Einblendung beim Scrollen translate/scale belegt. */
a.page-card:active,
.next-links a:active {
  transform: scale(.98);
  transition-duration: .1s;
}

/* ── Section Padding Unterseiten ── */
/* content-visibility: auto ist hier bewusst ENTFERNT, Grund siehe css/home.css.
   Auf den Unterseiten kam es ohnehin nur dreimal zum Tragen (spielplan,
   verbandsrunde, kontakt, je ein Abschnitt direkt unter dem Hero, also beim
   Laden schon im Bild) und brachte gemessen nichts: 44,9ms Layout mit gegen
   45,5ms ohne, ein Layout-Durchlauf je Scroll in beiden Fällen. Der Platzhalter
   lag dabei um bis zu 2913px daneben (verbandsrunde: 3413px echt statt 500px). */
.page-sec {
  padding: var(--space-section) var(--space-inline);
}

/* ── Kleine Smartphones (≤360px): Unterseiten-Anpassungen ── */
@media (max-width: 360px) {
  .page-hero {
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .page-hero h1 { font-size: 1.5rem; }
  .breadcrumb { font-size: .6rem; }
  .tcle-table { --tbl-px: .65rem; }
  .infobox { padding: 1rem; }
}

/* ── Große Monitore (1920px+) ── */
@media (min-width: 1920px) {
  .page-sec { padding-top: clamp(7rem, 6vw, 9rem); padding-bottom: clamp(7rem, 6vw, 9rem); }
  .page-hero { padding-top: calc(clamp(6rem, 8vw, 9rem) + var(--space-4)); }
}

/* ── Kontakt-Seite ── */
.c-items { display: flex; flex-direction: column; gap: .85rem; }
.c-item  {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.c-icon { font-size: 1.15rem; flex-shrink: 0; width: 1.75rem; text-align: center; margin-top: .05rem; }
/* Die Kontaktliste trug frueher Emoji an dieser Stelle. Seit dort SVG stehen,
   braucht es eine Groesse: text-align zentriert ein Blockelement nicht. */
.c-icon svg {
  width: 1.15rem; height: 1.15rem;
  display: block; margin: 0 auto;
  fill: none;
  stroke: var(--color-green-dk);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icon und Beschriftung tragen den Zweitakzent aus CLAUDE.md: Gruen ist
   dort die Farbe fuer Labels und Rollenbezeichnungen auf hellem Grund.
   Sonst steht auf der Kontaktseite alles in Blau und die Rollen
   konkurrieren mit den Telefon- und Mailverweisen daneben, die blau
   bleiben. Dieselbe Aufteilung wie bei .tk-deadline-lbl in
   css/training.css. --color-green-dk statt --color-green (#318366),
   das erreicht auf der Kartenflaeche nur 4,04:1 und verfehlt WCAG AA. */
.c-lbl  { font-size: var(--fs-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-green-dk); margin-bottom: .2rem; }
.c-val  { font-size: var(--fs-sm); color: var(--color-text-soft); line-height: 1.65; }
.c-val a { color: var(--color-navy); font-weight: var(--weight-semibold); }
@media (hover: hover) { .c-val a:hover { opacity: .75; } }

.map-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.map-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Dunkles Overlay fürs Luftbild: haelt Name und Adresse lesbar,
   unabhaengig davon wie hell der Bildausschnitt ist. */
.map-box::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(10,16,28,.35), rgba(10,16,28,.55));
}
.map-pin  { font-size: 2.5rem; position: relative; z-index: 2; }
.map-name { font-size: var(--fs-base); font-weight: var(--weight-extrabold); color: #fff; position: relative; z-index: 2; }
.map-addr { font-size: var(--fs-sm); color: rgba(255,255,255,.85); line-height: 1.6; position: relative; z-index: 2; }

.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-gap);
  align-items: start;
}

.form-section {
  background: var(--color-bg-alt);
  padding: var(--space-section) var(--space-inline);
}
.form-section .inner {
  max-width: 680px;
  margin: 0 auto;
}
/* Die Überschrift des Formularabschnitts stand ohne Abstand auf der
   Formularkarte (gemessen 0px auf Desktop und Handy): .sec-h2 trägt
   bewusst kein margin-bottom, weil es auf den anderen Seiten im
   .sec-hdr steht, der den Abstand mitbringt. Hier steht die
   Überschrift direkt vor der Karte, deshalb hier derselbe Wert wie
   bei .h2. */
.form-section .sec-h2 { margin-bottom: var(--space-5); }

/* ── Mannschaften (pages/mannschaften.html) ────────────────────
   Die drei Mannschaftsseiten als Link-Karten mit Foto. Sie nutzen
   .page-card und bringen damit Anheben und Druck-Feedback mit. Ohne
   Foto steht derselbe leise Platzhalter wie auf den Mannschaftsseiten
   (graues Logo, „Foto folgt“), siehe .mk-leer dort. */
.wk-teams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}
.wk-teams { margin: var(--space-6) 0 var(--space-8); }
.wk-teams a { height: 100%; padding: 0; overflow: hidden; text-decoration: none; }
/* Das Bild liegt absolut in der Fläche, damit Hochformat-Fotos die Karte
   nicht strecken: Höhe gibt das Seitenverhältnis vor, auf dem Handy der
   Text daneben. */
.wk-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #EBEBED;
}
.wk-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}
/* Leichter Zoom beim Überfahren, gleiche Werte wie in der Galerie
   (.gallery-item in css/home.css) */
@media (hover: hover) {
  .wk-teams a:hover .wk-media img { transform: scale(1.04); }
}
.wk-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
.wk-leer img {
  position: static;
  width: 34%;
  max-width: 9rem;
  height: auto;
  filter: grayscale(1);
  opacity: .28;
}
.wk-teams a:hover .wk-leer img { transform: none; }
.wk-leer span {
  font-size: var(--fs-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.wk-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}
.wk-team {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-text);
}
.wk-team-more { font-size: var(--fs-sm); font-weight: var(--weight-semibold); color: var(--color-green); }

@media (max-width: 700px) {
  .wk-teams { grid-template-columns: 1fr; }
  /* Untereinander: Foto links neben dem Text, sonst würden drei Karten
     mit Foto oben fast zwei Bildschirmhöhen lang */
  .wk-teams a { flex-direction: row; }
  .wk-media { flex: 0 0 38%; aspect-ratio: auto; }
  .wk-body { flex: 1; justify-content: center; min-height: 124px; }
}

/* ════════════════════════════════════════════════════════════
   BEREICHSLEISTE – Training und Spielbetrieb
   Wird von buildLocalNav() in js/layout.js direkt hinter den
   Page-Hero gesetzt. Desktop: bleibt beim Scrollen unter der
   Hauptnavigation stehen (Unterkante #nav bei 102px), in deren
   Glas-Optik. Unter 1160px, wo #nav selbst kein Glas hat, steht
   sie fest und scrollt mit: zwei schwebende Leisten nähmen auf
   dem Handy fast ein Fünftel des Bildschirms.
   ════════════════════════════════════════════════════════════ */
.lnav {
  position: relative;
  z-index: 50;
  width: min(var(--max), calc(100% - 2 * var(--space-inline)));
  margin: var(--space-4) auto 0;
}
.lnav-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 52px;
  padding: .3rem .4rem;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
}
.lnav-t { display: none; }
.lnav-l {
  display: flex;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
/* Auslaufender Rand zeigt, dass es seitlich weitergeht. Die Klassen
   setzt updateLocalNavFade() in js/layout.js je nach Scrollstand. */
.lnav-l.lnav-fade-r {
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.lnav-l.lnav-fade-l {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%);
          mask-image: linear-gradient(90deg, transparent, #000 15%);
}
.lnav-l.lnav-fade-l.lnav-fade-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.lnav-l::-webkit-scrollbar { display: none; }
.lnav-l a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .45rem .8rem;
  border-radius: var(--radius-full);
  font-size: .85rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-soft);
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform 100ms var(--ease-out);
}
/* Rückmeldung beim Drücken, nicht erst beim Loslassen – wie die
   Buttons (.btn:active in base.css). */
.lnav-l a:active {
  background: var(--color-tint);
  color: var(--color-text);
  transform: scale(.97);
}
.lnav-l a[aria-current="page"]:active {
  background: var(--color-navy-dk);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .lnav-l a:active { transform: none; }
}
@media (hover: hover) {
  .lnav-l a:hover { background: var(--color-tint); color: var(--color-text); }
}
.lnav-l a[aria-current="page"],
.lnav-l a[aria-current="page"]:hover {
  background: var(--color-navy);
  color: #fff;
}

@media (min-width: 601px) {
  .lnav-in { padding: .3rem .4rem .3rem 1.25rem; }
  .lnav-t {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
    white-space: nowrap;
  }
  .lnav-l { margin-left: auto; }
}
@media (min-width: 1160px) {
  .lnav { position: sticky; top: 112px; }
  .lnav-in {
    background: rgba(250,250,248,.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  /* Anker nicht unter Hauptnavigation und Leiste verstecken */
  html:has(.lnav) { scroll-padding-top: 11rem; }
}
@media (min-width: 1160px) and (prefers-reduced-transparency: reduce) {
  .lnav-in { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── Desktop: engerer Abschnittsrhythmus ───────────────────
   Ab 1024px halbe Polster oben und unten, dazu ein engerer
   Abstand unter dem Sektionskopf. Damit steht die Überschrift
   oben im Abschnitt und sitzt als Deckel auf ihrem Inhalt,
   statt zwischen zwei großen Flächen zu schweben. Gemessen auf
   trainingsteam.html: Lücke über der Dachzeile 180px → 124px,
   Lücke unter der Überschrift 89px → 57px.

   Gilt für jeden Abschnittsanfang, auch dort, wo die Fläche
   wechselt. Die beiden Sonderregeln für Grenzen ohne Farbwechsel
   (.sec-cream + .sec-cream / .sec-white + .sec-white oben und
   .page-hero-plain + .sec) setzen denselben Wert und laufen
   hier deshalb ins Leere, ohne zu stören; unter 1024px gelten
   sie weiter.

   Steht in page.css statt in base.css: Die Startseite lädt diese
   Datei nicht und behält ihren eigenen Rhythmus samt der daran
   hängenden Überschriften-Animation.
──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .sec,
  .page-sec,
  .form-section {
    padding-block: calc(var(--space-section) / 2);
  }
  .sec .sec-hdr { margin-bottom: var(--space-6); }
}