/* ==========================================================================
   SquashFlow — Squashfreunde-Nord — Design System
   Farbwelt: Marken-Navy (Logo) + Squash-Lime (Ballpunkte) + Court-Holz
   ========================================================================== */

/* ---------- 0. Überschriftenschrift -------------------------------------- */
/* Barlow Condensed 800 — dieselbe Schrift, die die Vereinsseite für ihre
   Überschriften verwendet, damit beide Teile zusammengehören.
   Die woff2-Datei liegt gemeinsam in /fonts/ und wird von hier aus verwiesen,
   nicht kopiert. Das Stylesheet bleibt trotzdem getrennt — geteilt wird nur
   die Datei, nicht das Design-System. Lizenz: OFL 1.1, siehe fonts/LIZENZ.txt */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../../../fonts/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Marke — beide Werte exakt aus der Logodatei (logo.svg) */
  --navy: #071b32;
  --lime: #d9ea0a;
  /* abgedunkelte Ableitung für Akzenttext auf hellem Grund */
  --lime-deep: #97a507;
  --lime-soft: #f1f8bd;
  --coral: #ff6b3d;
  --teal: #2ed3c6;
  --wood: #e3c79a;
  --wood-deep: #c39d63;

  /* Neutrale Basis (Light) */
  --ink: var(--navy);
  --ink-2: #1d3450;
  --ink-3: #2b4a6b;
  --slate: #5b6879;
  --slate-2: #8b97a6;
  --line: #e4e8ee;
  --paper: #ffffff;
  --paper-2: #f6f7f9;
  --paper-3: #eef0f4;

  /* Semantisch */
  --bg: var(--paper-2);
  --surface: var(--paper);
  --surface-2: var(--paper-3);
  --border: var(--line);
  --text: var(--ink);
  --text-soft: var(--slate);
  --text-faint: var(--slate-2);
  --accent: var(--lime-deep);
  --accent-bg: var(--lime);
  --on-accent: #10140a;

  /* Typografie */
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Überschriften: dieselbe Schrift wie auf der Vereinsseite */
  --font-head: 'Barlow Condensed', 'Barlow', sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-hero: clamp(2.4rem, 6.2vw, 4.6rem);
  --fs-h1: clamp(2rem, 4.6vw, 3.2rem);
  --fs-h2: clamp(1.55rem, 3vw, 2.2rem);
  --fs-h3: clamp(1.12rem, 1.7vw, 1.35rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  /* Raster */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --gap: 1.5rem;

  /* Radien & Schatten */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --sh-1: 0 1px 2px rgba(17, 21, 28, .06), 0 2px 8px rgba(17, 21, 28, .04);
  --sh-2: 0 4px 12px rgba(17, 21, 28, .07), 0 14px 34px rgba(17, 21, 28, .07);
  --sh-3: 0 10px 24px rgba(17, 21, 28, .1), 0 30px 70px rgba(17, 21, 28, .12);

  --ease: cubic-bezier(.22, .68, 0, 1);
  --t: .32s var(--ease);
}

[data-theme="dark"] {
  --bg: #0b1420;
  --surface: #12202e;
  --surface-2: #1a2c3d;
  --border: #293f54;
  --text: #edf1f5;
  --text-soft: #a3b0bf;
  --text-faint: #74828f;
  --accent: var(--lime);
  --accent-bg: var(--lime);
  --on-accent: #10140a;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 6px 18px rgba(0, 0, 0, .45);
  --sh-3: 0 18px 50px rgba(0, 0, 0, .55);
}

/* ---------- 2. Reset & Grundlagen --------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
/* Muss nach den Komponenten greifen: eigene display-Regeln (z. B. .btn)
   überschreiben sonst das display:none des hidden-Attributs. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.06;
  /* Barlow Condensed ist von sich aus schmal. Die frühere negative Laufweite
     war auf Inter abgestimmt und würde hier die Buchstaben zusammenkleben —
     derselbe leicht positive Wert wie auf der Vereinsseite. */
  letter-spacing: .01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--text); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--accent-bg); color: var(--on-accent);
  padding: .7rem 1.1rem; border-radius: var(--r-sm); font-weight: 700;
  transition: top .2s;
}
.skip:focus { top: 1rem; }

/* <main> bekommt vom Nach-oben-Button programmatisch den Fokus, damit die
   Tab-Reihenfolge oben weitergeht. Kein Rahmen darum: niemand hat dorthin
   navigiert, der Kasten um den ganzen Inhalt wäre nur Störung. */
#main:focus { outline: none; }

/* ---------- 3. Layout ---------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark {
  background: var(--ink);
  color: #edf1f5;
  --text: #edf1f5;
  --text-soft: #a3b0bf;
  --surface: #1a212b;
  --surface-2: #222b37;
  --border: #2c3743;
}

.head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-xs); font-weight: 750;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor;
}
.head--center .eyebrow::before { display: none; }

.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--text-soft); margin-top: 1rem; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Feste zwei Spalten: bei vier Elementen ergibt auto-fit sonst je nach
   Breite ein 3+1-Bild statt eines sauberen 2×2-Blocks. */
.grid--pair { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--pair { grid-template-columns: repeat(2, 1fr); } }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

/* ---------- 4. Buttons & Pills ------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: 100px;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  border: 1.5px solid transparent;
  transition: transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t), color var(--t);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--lime); color: #10140a; box-shadow: 0 6px 20px rgba(217, 234, 10, .35); }
.btn--primary:hover { background: #e7f63c; box-shadow: 0 10px 28px rgba(217, 234, 10, .45); }

.btn--ghost { border-color: currentColor; color: var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--bg); }

.btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(8px); }
.btn--light:hover { background: rgba(255, 255, 255, .2); }

.btn--sm { padding: .55rem 1.1rem; font-size: var(--fs-sm); }

.arrow { transition: transform var(--t); }
.btn:hover .arrow, .lnk:hover .arrow { transform: translateX(4px); }

.lnk {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--accent);
  border-bottom: 2px solid transparent;
  transition: border-color var(--t);
}
.lnk:hover { border-color: currentColor; }

.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .68rem;
  border-radius: 100px;
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.tag--accent { background: var(--lime-soft); color: #4b5c05; border-color: transparent; }
[data-theme="dark"] .tag--accent { background: rgba(217, 234, 10, .16); color: var(--lime); }
.tag--coral { background: rgba(255, 107, 61, .14); color: #b83a13; border-color: transparent; }
[data-theme="dark"] .tag--coral { color: #ff9673; }
.tag--teal { background: rgba(46, 211, 198, .16); color: #10756c; border-color: transparent; }
[data-theme="dark"] .tag--teal { color: var(--teal); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- 5. Header / Navigation -------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.site-header.is-stuck { border-bottom-color: var(--border); }

.nav { display: flex; align-items: center; gap: 1.25rem; min-height: 72px; }

/* Wort-Bild-Marke — das Original-SVG, unverändert in der Geometrie.
   logo.svg für helle, logo-inv.svg für dunkle Flächen (nur Farbtausch).
   Höhe steuert die Größe, Breite folgt dem Seitenverhältnis 1268:280. */
.brand { display: flex; align-items: center; margin-right: auto; }

.brand__logo {
  height: 46px; width: auto; flex: none;
  /* verhindert Verzerrung, falls die Breite je begrenzt wird */
  object-fit: contain;
}
.brand__logo--on-dark { display: none; }
[data-theme="dark"] .brand__logo--on-light { display: none; }
[data-theme="dark"] .brand__logo--on-dark { display: block; }

/* Footer liegt immer auf Navy — dort fest die invertierte Fassung.
   Breitenbasiert, weil die Footer-Spalte schmaler sein kann als das Logo:
   so skaliert es proportional mit statt in eine feste Höhe gequetscht zu werden. */
.site-footer .brand__logo { width: 210px; max-width: 100%; height: auto; }

.nav__links { display: flex; align-items: center; gap: .3rem; }
.nav__links a {
  padding: .5rem .85rem; border-radius: 100px;
  font-size: .93rem; font-weight: 650; color: var(--text-soft);
  transition: color var(--t), background var(--t);
  /* Nie innerhalb eines Menüpunkts umbrechen: sonst wird der Kopf zweizeilig,
     statt dass die Enge auffällt. */
  white-space: nowrap;
}
.nav__links a:hover { color: var(--text); background: var(--surface-2); }
.nav__links a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

/* Rückweg zur Vereinsseite. Durch Rahmen und Abstand abgesetzt, damit er nicht
   wie eine weitere SquashFlow-Seite gelesen wird, sondern als Sprung eine Ebene
   höher. */
.nav__up {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--border);
  margin-right: .55rem;
  white-space: nowrap;
}
.nav__up .arr { font-size: 1.05em; line-height: 1; transition: transform var(--t); }
.nav__up:hover .arr { transform: translateX(-3px); }

.nav__tools { display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft);
  transition: color var(--t), border-color var(--t), transform var(--t);
}
.icon-btn:hover { color: var(--text); border-color: var(--text-faint); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-btn .moon { display: none; }
[data-theme="dark"] .theme-btn .sun { display: none; }
[data-theme="dark"] .theme-btn .moon { display: block; }

.burger { display: none; }

/* Schwelle 1040 statt vorher 900: mit dem Rückweg zur Vereinsseite braucht die
   Leiste einen Menüpunkt mehr Platz. Bei 900 lief sie in den Umbruch. */
@media (max-width: 1040px) {
  .nav__links {
    /* an die echte Header-Höhe gekoppelt statt fester Pixelwert */
    position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
    max-height: calc(100vh - 100%); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: .15rem;
    padding: 1rem clamp(1.1rem, 4vw, 2.5rem) 1.6rem;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-2);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s var(--ease);
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding: .8rem 1rem; font-size: 1.05rem; }
  .burger { display: grid; }
}

/* ---------- 6. Hero mit Slider ------------------------------------------ */

.hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: grid; align-items: end;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s ease, transform 8s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.22) saturate(1.08);
}
/* Scrim: links dunkel für Textkontrast, rechts offen für die Grafik */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(9, 12, 16, .93) 0%, rgba(9, 12, 16, .78) 38%, rgba(9, 12, 16, .22) 78%, rgba(9, 12, 16, .1) 100%),
    linear-gradient(to top, rgba(9, 12, 16, .82) 0%, rgba(9, 12, 16, .18) 46%, rgba(9, 12, 16, .38) 100%),
    radial-gradient(110% 80% at 84% 14%, rgba(217, 234, 10, .14), transparent 60%);
}
/* Auf Mobil steht der Text über dem Bild statt daneben -> flächiges,
   deutlich stärkeres Scrim, sonst ist die Headline nicht lesbar. */
@media (max-width: 700px) {
  .hero::after {
    background:
      linear-gradient(to top, rgba(9, 12, 16, .96) 0%, rgba(9, 12, 16, .88) 38%, rgba(9, 12, 16, .74) 70%, rgba(9, 12, 16, .66) 100%),
      radial-gradient(110% 70% at 78% 10%, rgba(217, 234, 10, .12), transparent 58%);
  }
}

.hero__inner { position: relative; padding-block: clamp(4.5rem, 12vw, 7rem) clamp(2.5rem, 5vw, 3.5rem); }
.hero__body { max-width: 46rem; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .4rem .95rem .4rem .55rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero__eyebrow .dot { color: var(--lime); box-shadow: 0 0 0 4px rgba(217, 234, 10, .2); }

.hero h1 { font-size: var(--fs-hero); letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero__text { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(237, 241, 245, .82); margin-top: 1.2rem; max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Slide-spezifischer Text: nur der aktive Text ist sichtbar */
.hero__copy { display: none; }
.hero__copy.is-active { display: block; animation: rise .7s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.hero__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.hero__dots { display: flex; gap: .5rem; }
.hero__dot {
  width: 42px; height: 4px; border-radius: 100px;
  background: rgba(255, 255, 255, .25);
  position: relative; overflow: hidden;
  transition: background var(--t);
}
.hero__dot:hover { background: rgba(255, 255, 255, .45); }
.hero__dot.is-active { background: rgba(255, 255, 255, .28); }
.hero__dot.is-active::after {
  content: ""; position: absolute; inset: 0;
  background: var(--lime); transform-origin: left;
  animation: fill 7s linear forwards;
}
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 7. Karten ---------------------------------------------------- */

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card--link:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: transparent; }

.card__num {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-faint); letter-spacing: .08em;
}
.card__icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--surface-2); color: var(--accent);
  transition: background var(--t), transform var(--t);
}
.card--link:hover .card__icon { transform: scale(1.08) rotate(-4deg); }
.card__icon svg { width: 22px; height: 22px; }

/* Karte mit Foto: Bild randlos oben, Text darunter. Die Fotos liegen im
   gemeinsamen /img/ der Vereinsseite und werden von hier aus verwiesen, nicht
   kopiert — eine Quelle, kein Abgleich.
   Das Seitenverhältnis ist fest gesetzt (die Dateien sind 1600 × 1067, also 3:2),
   damit die Karten nicht springen, solange die Bilder noch laden. */
.card--photo { padding: 0; overflow: hidden; }
.card--photo .card__media {
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  overflow: hidden;
}
.card--photo .card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
/* Infografiken sind in Kartenbreite nicht lesbar. Das Bild sitzt deshalb in
   einem Button — anklickbar und per Tastatur erreichbar — und öffnet die Grafik
   in Originalgröße. Ohne diese Möglichkeit wären die drei Grafiken im
   Material-Abschnitt bloße Dekoration. */
.card__media--zoom {
  display: block; width: 100%; padding: 0;
  position: relative; cursor: zoom-in;
}
.card__media--zoom::after {
  content: "";
  position: absolute; right: .7rem; bottom: .7rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10, 13, 17, .62) center / 17px 17px no-repeat;
  /* Lupensymbol als data-URI, damit keine externe Datei nötig ist */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  backdrop-filter: blur(2px);
  transition: transform var(--t);
}
.card__media--zoom:hover::after { transform: scale(1.12); }

.card--photo .card__body { padding: 1.3rem 1.5rem 1.5rem; }
.card--photo .card__body h3 { margin-top: .35rem; }
.card--photo .card__body p { margin-top: .5rem; color: var(--text-soft); }
.card--link.card--photo:hover .card__media img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .card--photo .card__media img { transition: none; }
  .card--link.card--photo:hover .card__media img { transform: none; }
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-soft); font-size: var(--fs-sm); }
.card__foot { margin-top: auto; padding-top: 1.2rem; }
.card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }

/* Themenkachel mit Court-Linien-Deko */
.topic {
  overflow: hidden;
  padding: 1.7rem;
  background: var(--surface);
}
.topic::after {
  content: ""; position: absolute; right: -30px; bottom: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px solid var(--border);
  transition: transform var(--t), border-color var(--t);
}
.topic:hover::after { transform: scale(1.25); border-color: var(--accent); }

/* ---------- 8. Trainingskarten ------------------------------------------ */

.results-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
.results-bar__count { font-weight: 750; }
.results-bar__count b { color: var(--accent); }

.t-card {
  text-align: left; width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .85rem;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.t-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--accent); }

.t-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.t-card__players {
  flex: none;
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 100px;
  background: var(--ink); color: #fff;
  font-size: var(--fs-xs); font-weight: 750;
}
[data-theme="dark"] .t-card__players { background: var(--surface-2); }
.t-card__players svg { width: 14px; height: 14px; }

.t-card h3 { font-size: 1.14rem; }
.t-card__goal { color: var(--text-soft); font-size: var(--fs-sm); }
.t-card__meta {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: auto; padding-top: .4rem;
}

.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars i { width: 3px; border-radius: 2px; background: var(--border); display: block; }
.bars i:nth-child(1) { height: 45%; }
.bars i:nth-child(2) { height: 72%; }
.bars i:nth-child(3) { height: 100%; }
.bars[data-level="1"] i:nth-child(1),
.bars[data-level="2"] i:nth-child(-n+2),
.bars[data-level="3"] i { background: currentColor; }

/* ---------- 9. Filter ---------------------------------------------------- */

.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  margin-bottom: 2rem;
  box-shadow: var(--sh-1);
}
.filters__row + .filters__row { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px dashed var(--border); }
.filters__label {
  display: block;
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: .7rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  padding: .5rem 1rem; border-radius: 100px;
  border: 1.5px solid var(--border); background: transparent;
  font-size: var(--fs-sm); font-weight: 650; color: var(--text-soft);
  transition: all var(--t);
  white-space: nowrap;
}
.chip:hover { border-color: var(--text-faint); color: var(--text); }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--on-accent); }

.search {
  position: relative; display: flex; align-items: center;
}
.search svg { position: absolute; left: 1rem; width: 17px; height: 17px; color: var(--text-faint); pointer-events: none; }
.search input {
  width: 100%; padding: .8rem 1rem .8rem 2.85rem;
  border: 1.5px solid var(--border); border-radius: 100px;
  background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-sm);
  transition: border-color var(--t), background var(--t);
}
.search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.search input::placeholder { color: var(--text-faint); }

.empty {
  text-align: center; padding: 4rem 1.5rem;
  border: 2px dashed var(--border); border-radius: var(--r-lg);
  color: var(--text-soft);
}
.empty b { display: block; font-size: 1.2rem; color: var(--text); margin-bottom: .4rem; }

/* Tabs */
.tabs { display: inline-flex; gap: .25rem; padding: .3rem; background: var(--surface-2); border-radius: 100px; margin-bottom: 2rem; }
.tab {
  padding: .55rem 1.3rem; border-radius: 100px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-soft);
  transition: all var(--t);
}
.tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

/* ---------- 10. Detail-Drawer -------------------------------------------- */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10, 13, 17, .55);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151;
  width: min(660px, 100%);
  background: var(--bg);
  box-shadow: var(--sh-3);
  transform: translateX(100%);
  transition: transform .42s var(--ease);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: none; }

.drawer__head {
  position: sticky; top: 0; z-index: 2;
  padding: 1.3rem clamp(1.2rem, 4vw, 2.2rem);
  background: var(--ink); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.drawer__head .tag { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .18); }
.drawer__close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #fff;
  transition: background var(--t), transform var(--t);
}
.drawer__close:hover { background: rgba(255, 255, 255, .24); transform: rotate(90deg); }
.drawer__close svg { width: 17px; height: 17px; }
.drawer__title { margin: .85rem 0 .6rem; padding-right: 3rem; font-size: 1.5rem; }
.drawer__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.drawer__body { padding: clamp(1.4rem, 4vw, 2.2rem); overflow-y: auto; flex: 1; }

.dsec + .dsec { margin-top: 2.2rem; }
.dsec__title {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 1rem;
}
.dsec__title::after { content: ""; height: 1px; flex: 1; background: var(--border); }

.callout {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent-bg);
  border-radius: var(--r); padding: 1.1rem 1.3rem;
  font-size: var(--fs-sm);
}

/* Timeline der Trainingsblöcke */
.block { position: relative; padding-left: 3.4rem; padding-bottom: 1.7rem; }
.block:last-child { padding-bottom: 0; }
.block::before {
  content: ""; position: absolute; left: 15px; top: 2.1rem; bottom: 0;
  width: 2px; background: var(--border);
}
.block:last-child::before { display: none; }
.block__min {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: -.02em;
}
[data-theme="dark"] .block__min { background: var(--lime); color: var(--on-accent); }
.block__name { font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; margin-bottom: .1rem; }
.block__note { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: .85rem; }
.block__items { display: flex; flex-direction: column; gap: .7rem; }
.block__item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: .9rem 1.05rem;
}
.block__item b { display: block; font-size: .93rem; margin-bottom: .2rem; }
.block__item p { font-size: var(--fs-sm); color: var(--text-soft); }

/* Listen mit Marker */
.ticks li, .warns li {
  position: relative; padding-left: 1.75rem; margin-bottom: .6rem;
  font-size: var(--fs-sm); color: var(--text-soft);
}
.ticks li::before, .warns li::before {
  position: absolute; left: 0; top: .1rem;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 800;
}
.ticks li::before { content: "✓"; background: var(--lime-soft); color: #4b5c05; }
[data-theme="dark"] .ticks li::before { background: rgba(217, 234, 10, .18); color: var(--lime); }
.warns li::before { content: "!"; background: rgba(255, 107, 61, .16); color: #b83a13; }
[data-theme="dark"] .warns li::before { color: #ff9673; }

/* Court-Schema in der Detailansicht
   Eigene Farbtokens, weil der Court seine eigene Materialwelt hat (Holz, rote
   Linien, Glasrückwand) und die nicht mit den Oberflächentokens kollidieren
   soll. Dunkelfassung dimmt das Holz, hebt Linien und Wege an. */
.cdiag {
  --crt-wood: #f2e0c2;  --crt-plank: #c9a874;
  --crt-wall: #2a3442;  --crt-glass: #6fc7e8;  --crt-line: #c0392b;
  --crt-hit: #5c7a04;   --crt-return: #10756c;
  --crt-feed: #e8620c;  --crt-move: #46536a;
  --crt-ink: #2a3442;   --crt-paper: #fbf9f5;
}
[data-theme="dark"] .cdiag {
  --crt-wood: #4a3b25;  --crt-plank: #6d5636;
  --crt-wall: #8fa3ba;  --crt-glass: #6fc7e8;  --crt-line: #e0705d;
  --crt-hit: #d9ea0a;   --crt-return: #2ed3c6;
  --crt-feed: #ff8a5c;  --crt-move: #a3b0bf;
  --crt-ink: #edf1f5;   --crt-paper: #12202e;
}

.cdiag__steps { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.cdiag__step {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .8rem .38rem .42rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-soft);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.cdiag__step:hover { background: var(--surface-2); color: var(--text); }
.cdiag__num {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-faint);
  font-size: .68rem; font-weight: 800;
}
.cdiag__step[aria-selected="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
[data-theme="dark"] .cdiag__step[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: var(--on-accent); }
.cdiag__step[aria-selected="true"] .cdiag__num { background: rgba(255, 255, 255, .18); color: #fff; }
[data-theme="dark"] .cdiag__step[aria-selected="true"] .cdiag__num { background: rgba(0, 0, 0, .22); color: var(--on-accent); }

.cdiag__panel { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
.cdiag__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r); }
@media (max-width: 680px) { .cdiag__panel { grid-template-columns: 1fr; } }

.cdiag__stage { background: var(--crt-paper); border: 1px solid var(--border); border-radius: var(--r); padding: .5rem; }
.crt { display: block; width: 100%; height: auto; font-family: var(--font); }

.cdiag__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.cdiag__head h4 { font-family: var(--font); font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; text-transform: none; }
.cdiag__side p { font-size: var(--fs-sm); color: var(--text-soft); }
.cdiag__note { margin-top: .9rem; font-size: var(--fs-xs); color: var(--text-faint); }

.cdiag__legend { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.lg {
  position: relative; padding-left: 1.6rem;
  font-size: var(--fs-xs); font-weight: 650; color: var(--text-soft);
}
.lg::before { content: ""; position: absolute; left: 0; top: .52em; width: 18px; height: 3px; border-radius: 2px; }
.lg--hit::before { background: var(--crt-hit); }
.lg--return::before { background: var(--crt-return); }
.lg--feed::before { background: var(--crt-feed); }
.lg--move::before { background: var(--crt-move); height: 0; border-top: 3px dashed var(--crt-move); }
.lg--player::before,
.lg--spot::before { top: .18em; left: .2em; width: 13px; height: 13px; border-radius: 50%; }
.lg--player::before { background: var(--crt-wall); }
.lg--spot::before { background: transparent; border: 2.5px solid var(--crt-line); }
.lg--zone::before,
.lg--band::before { top: .2em; left: .1em; width: 15px; height: 11px; border-radius: 3px; }
.lg--zone::before { border: 2px dashed var(--accent); }
.lg--band::before { height: 5px; top: .5em; background: var(--crt-hit); }
.lg--band-target::before { background: var(--crt-feed); }

.cdiag__toggle {
  margin-top: 1rem; padding: .38rem .85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-soft);
}
.cdiag__toggle:hover { background: var(--surface-2); color: var(--text); }

/* Bauteile im SVG */
.crt-floor { fill: var(--crt-wood); }
.crt-plank-line { stroke: var(--crt-plank); stroke-opacity: .38; stroke-width: 1; }
.crt-walls { fill: none; stroke: var(--crt-wall); stroke-width: 6; }
.crt-glass { stroke: var(--crt-glass); stroke-width: 6; }
.crt-lines { fill: none; stroke: var(--crt-line); stroke-width: 3; stroke-opacity: .8; }
.crt-t { fill: none; stroke: var(--crt-hit); stroke-width: 2.5; }
.crt-t__dot { fill: var(--crt-hit); stroke: none; }
.crt-side { font-size: 14.5px; font-weight: 800; letter-spacing: .14em; fill: var(--crt-wall); fill-opacity: .55; }
.crt-side--glas { fill: var(--crt-glass); fill-opacity: .9; }

.crt-zone { fill: var(--crt-hit); fill-opacity: .1; stroke: var(--crt-hit); stroke-width: 2; stroke-dasharray: 7 5; }

.crt-band { fill: var(--crt-hit); }
.crt-band--target { fill: var(--crt-feed); }
.crt-band__lbl { font-size: 14px; font-weight: 750; fill: var(--crt-ink); fill-opacity: .8; }

.crt-halo { fill: none; stroke: var(--crt-paper); stroke-opacity: .78; stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.crt-way { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.crt-way--hit { stroke: var(--crt-hit); }
.crt-way--return { stroke: var(--crt-return); stroke-dasharray: 1 7; stroke-width: 3.6; }
.crt-way--feed { stroke: var(--crt-feed); }
.crt-way--move { stroke: var(--crt-move); stroke-dasharray: 9 7; stroke-width: 2.6; }
.crt-ar--hit path { fill: var(--crt-hit); }
.crt-ar--return path { fill: var(--crt-return); }
.crt-ar--feed path { fill: var(--crt-feed); }
.crt-ar--move path { fill: var(--crt-move); }

.crt-lbl {
  font-size: 16px; font-weight: 800; fill: var(--crt-ink);
  paint-order: stroke; stroke: var(--crt-paper); stroke-width: 4; stroke-linejoin: round;
}

.crt-spot circle { fill: var(--crt-paper); stroke: var(--crt-line); stroke-width: 2.5; }
.crt-spot text { font-size: 13.5px; font-weight: 800; fill: var(--crt-line); }

.crt-player circle { fill: var(--crt-wall); stroke: var(--crt-paper); stroke-width: 2.5; }
.crt-player text { font-size: 16px; font-weight: 800; fill: var(--crt-paper); }
.crt-player--ghost circle { fill: var(--crt-paper); stroke: var(--crt-wall); stroke-width: 2.5; stroke-dasharray: 5 4; }
.crt-player--ghost text { fill: var(--crt-wall); }
.crt-note rect { fill: var(--crt-wall); fill-opacity: .9; }
.crt-note text { font-size: 13.5px; font-weight: 750; fill: var(--crt-paper); }

.crt-mover__ball { fill: var(--crt-hit); stroke: var(--crt-paper); stroke-width: 2; }
.crt-mover--feed .crt-mover__ball { fill: var(--crt-feed); }
.crt-mover--return .crt-mover__ball { fill: var(--crt-return); }
.crt-mover__ring { fill: none; stroke: var(--crt-move); stroke-width: 3; }

/* ---------- 11. Inhalt: Prosa, Accordion, Tabellen ---------------------- */

.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.6rem; margin-bottom: .8rem; }
.prose h3 { margin-top: 1.8rem; margin-bottom: .5rem; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-soft); }
.prose ul, .acc__inner ul, .callout ul { margin: 0 0 1.2rem; }
.prose ul:last-child, .acc__inner ul:last-child, .callout ul:last-child { margin-bottom: 0; }
.prose ul li, .acc__inner ul li, .callout ul li {
  position: relative; padding-left: 1.4rem; margin-bottom: .55rem;
}
.prose ul li::before, .acc__inner ul li::before, .callout ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bg);
}

.acc { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.acc + .acc { margin-top: .75rem; }
.acc__btn {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.3rem; text-align: left;
  font-weight: 750; font-size: 1.02rem; letter-spacing: -.015em;
  transition: background var(--t);
}
.acc__btn:hover { background: var(--surface-2); }
.acc__btn .idx { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-faint); flex: none; }
.acc__btn .chev { margin-left: auto; flex: none; width: 18px; height: 18px; color: var(--text-faint); transition: transform var(--t); }
.acc__btn[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--accent); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__inner { padding: 0 1.3rem 1.35rem; font-size: var(--fs-sm); color: var(--text-soft); }
.acc__inner > :first-child { margin-top: 0; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 480px; }
th, td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); }
th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); font-weight: 750; background: var(--surface-2); }
caption {
  caption-side: top; text-align: left;
  padding: 1.05rem 1.1rem .55rem;
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
}
tr:last-child td { border-bottom: 0; }
td strong { font-weight: 700; }

/* Faktenkacheln */
.facts { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fact { background: var(--surface); padding: 1.4rem; }
.fact b { display: block; font-size: 1.7rem; font-weight: 850; letter-spacing: -.035em; color: var(--text); }
.fact span { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .09em; font-weight: 650; }

/* Zwei-Spalten-Feature */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide { grid-template-columns: 1.15fr .85fr; } }
.split__media { border-radius: var(--r-xl); overflow: hidden; background: var(--surface-2); box-shadow: var(--sh-2); }
.split__media img { width: 100%; height: auto; }

/* Court-Legende */
.legend { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: 1.5rem; }
.legend div { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--text-soft); }
.legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }

/* Ballfarben */
.balls { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ball-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.2rem; text-align: center; }
.ball-card i {
  width: 32px; height: 32px; border-radius: 50%; margin: 0 auto .8rem;
  display: block; background: #1c1c1c; position: relative;
  box-shadow: inset -3px -4px 8px rgba(0, 0, 0, .6);
}
.ball-card i::after, .ball-card i::before {
  content: ""; position: absolute; top: 8px; width: 6px; height: 6px; border-radius: 50%;
}
.ball-card i::after { left: 9px; }
.ball-card i::before { left: 17px; opacity: 0; }
.ball-card[data-ball="dy"] i::after, .ball-card[data-ball="dy"] i::before { background: #f5e429; opacity: 1; }
.ball-card[data-ball="y"] i::after { background: #f5e429; left: 13px; }
.ball-card[data-ball="r"] i::after { background: #e0432d; left: 13px; }
.ball-card[data-ball="b"] i::after { background: #3d8ce0; left: 13px; }
.ball-card b { display: block; font-size: .95rem; }
.ball-card span { font-size: var(--fs-xs); color: var(--text-soft); }

/* ---------- 12. CTA & Footer -------------------------------------------- */

.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink); color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 50% -20%, rgba(217, 234, 10, .22), transparent 60%);
}
.cta > * { position: relative; }
.cta h2 { font-size: var(--fs-h2); }
.cta p { color: rgba(237, 241, 245, .78); max-width: 48ch; margin: 1rem auto 2rem; }
.cta__row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

.site-footer { background: var(--ink); color: rgba(237, 241, 245, .68); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-footer .brand { color: #fff; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__grid h4 { color: #fff; font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1rem; }
.footer__grid li { margin-bottom: .55rem; font-size: var(--fs-sm); }
.footer__grid a:hover { color: var(--lime); }
.footer__about { font-size: var(--fs-sm); max-width: 34ch; margin-top: 1rem; }

/* Zweiter Rückweg zur Vereinsseite — wer unten auf einer langen Seite steht,
   soll nicht erst nach oben scrollen müssen. */
.footer__up {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.2rem; min-height: 44px;
  font-size: var(--fs-sm); font-weight: 700; color: #fff;
}
.footer__up .arr { transition: transform var(--t); }
.footer__up:hover { color: var(--lime); }
.footer__up:hover .arr { transform: translateX(-3px); }

.footer__bar {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(237, 241, 245, .5);
}

/* ---------- Nach-oben-Button --------------------------------------------- */
/* z-index bewusst unter dem Drawer (151) und dessen Hintergrund (150): bei
   geöffnetem Trainingsdetail soll der Button verdeckt sein, nicht darüber
   schweben. */
.to-top {
  position: fixed; z-index: 90;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  /* über die iPhone-Hausleiste hinaus, sonst liegt der Button darunter */
  margin-bottom: env(safe-area-inset-bottom, 0px);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-bg); color: var(--on-accent);
  box-shadow: var(--sh-2);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .28s ease, transform .28s var(--ease);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .28s ease; transform: none; }
  .to-top:hover { transform: none; }
}

/* ---------- 13. Animation ----------------------------------------------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }
.reveal:nth-child(5) { transition-delay: .28s; }
.reveal:nth-child(6) { transition-delay: .35s; }

.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }

body.no-scroll { overflow: hidden; }

/* ---------- Grafik in Originalgröße -------------------------------------- */
/* z-index über dem Drawer (151), weil die Grafik auch aus einem geöffneten
   Detail heraus aufgerufen werden könnte. */
.zoom {
  position: fixed; inset: 0; z-index: 160;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 11, 15, .88);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: zoomIn .2s ease both;
}
@keyframes zoomIn { from { opacity: 0; } }
.zoom img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--r);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  cursor: default;
}
.zoom__close {
  position: absolute; top: clamp(.8rem, 3vw, 1.5rem); right: clamp(.8rem, 3vw, 1.5rem);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #fff;
  transition: background var(--t), transform var(--t);
}
.zoom__close:hover { background: rgba(255, 255, 255, .26); transform: rotate(90deg); }
.zoom__close svg { width: 20px; height: 20px; }

/* Auf schmalen Viewports nützt „auf Bildschirm einpassen" nichts: eine 1400 px
   breite Textgrafik wäre bei 375 px Breite genauso unlesbar wie die Vorschau.
   Deshalb wird das Overlay dort zur scrollbaren Fläche und zeigt die Grafik
   vergrößert — man schiebt sie hin und her, statt sie zu erraten. */
@media (max-width: 700px) {
  .zoom {
    display: block; overflow: auto;
    padding: 3.6rem .6rem .6rem;
    -webkit-overflow-scrolling: touch;
  }
  .zoom img { max-width: none; width: 900px; border-radius: var(--r-sm); }
  .zoom__close { position: fixed; }
}

@media (prefers-reduced-motion: reduce) {
  .zoom { animation: none; }
  .zoom__close:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__slide { transform: none; }
}

/* ==========================================================================
   14. Responsive — schmale Viewports
   Eine Website, keine separate Fassung. Geprüft von 360 px (kompakte
   Smartphones) über 390 und 430 px bis zum Querformat.
   ========================================================================== */

/* Touch-Geräte: Hover-Effekte durch Press-Feedback ersetzen */
@media (hover: none) {
  .btn:hover, .card--link:hover, .t-card:hover, .icon-btn:hover { transform: none; }
  .card--link:active, .t-card:active { transform: scale(.985); }
  .btn:active { transform: scale(.97); }
  .topic:hover::after { transform: none; border-color: var(--border); }
}

/* Safe Area bei Notch und Home-Indicator */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(clamp(1.1rem, 4vw, 2.5rem), env(safe-area-inset-left));
    padding-right: max(clamp(1.1rem, 4vw, 2.5rem), env(safe-area-inset-right));
  }
  .site-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* Header-CTA entfällt, sobald das Burger-Menü übernimmt — Schwelle muss mit der
   Klapp-Schwelle der Navigation oben übereinstimmen (1040px). */
@media (max-width: 1040px) {
  .nav__tools > .btn { display: none; }
  .nav { gap: .6rem; }
}

/* Filter-Panel: auf schmalen Viewports einklappbar (breite Ansicht unverändert) */
.filters__toggle { display: none; }

@media (max-width: 760px) {
  .filters { padding: 0; }
  .filters__toggle {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; padding: 1.05rem 1.2rem; min-height: 52px;
    font-weight: 750; font-size: .98rem; text-align: left;
  }
  .filters__toggle .ico { width: 18px; height: 18px; flex: none; color: var(--accent); }
  .filters__toggle .chev { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--text-faint); transition: transform var(--t); }
  .filters__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--accent); }
  .filters__badge {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px;
    padding: 0 .4rem; border-radius: 100px;
    background: var(--lime); color: var(--on-accent);
    font-size: .74rem; font-weight: 800;
  }
  .filters__badge[hidden] { display: none; }
  .filters__body { display: none; padding: 0 1.2rem 1.2rem; }
  .filters__body.is-open { display: block; }
  .filters__body > .filters__row:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 700px) {

  /* --- Typografie & Abstände --- */
  html { scroll-padding-top: 80px; }
  .section { padding-block: clamp(2.6rem, 9vw, 3.6rem); }
  .section--tight { padding-block: 2.2rem; }
  .head { margin-bottom: 1.75rem; }
  .grid { gap: 1rem; }
  .card { padding: 1.35rem; }
  .lede { font-size: 1rem; }

  /* --- Hero ---
     Keine 84vh mehr: Der Text steht unten, die Grafik füllt den Rest. Bei
     84vh blieben auf einem hohen Handy über 500 px leere Fläche über der
     Überschrift, und der Text klebte am unteren Rand. Jetzt entscheidet der
     Inhalt die Höhe, die Deckelung sorgt nur noch für ein sichtbares
     Grafikband darüber — auf kleinen Geräten wächst der Hero mit dem Text. */
  .hero { min-height: min(56vh, 470px); align-items: end; }
  .hero__inner { padding-block: 3rem 1.75rem; }
  .hero h1 { font-size: clamp(2.05rem, 9.2vw, 2.9rem); letter-spacing: .01em; }
  .hero__text { font-size: 1rem; max-width: none; margin-top: 1rem; }
  .hero__eyebrow { font-size: .7rem; margin-bottom: 1.1rem; }
  /* Bild nicht aufhellen — sonst leidet der Textkontrast.
     object-position rückt den Bildausschnitt auf den Bildmittelpunkt der
     16:9-Grafik, die im Hochformat stark beschnitten wird. */
  .hero__slide img { filter: saturate(1.05); object-position: 58% 45%; }
  .hero__cta { margin-top: 1.6rem; gap: .6rem; }
  .hero__cta .btn { width: 100%; }
  .hero__foot { margin-top: 1.9rem; gap: 1.1rem; }
  .hero__dots { width: 100%; }
  .hero__dot { flex: 1; height: 5px; }

  /* --- Bedienelemente: Touch-Ziele mind. 44 px --- */
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  .lnk { min-height: 44px; }
  .btn { min-height: 46px; }
  .btn--sm { min-height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
  .nav__links a { min-height: 48px; display: flex; align-items: center; }
  .brand { min-height: 44px; }
  /* Logo staffeln, damit es die Werkzeuge nie verdrängt */
  .brand__logo { height: 42px; }
  .site-footer .brand__logo { width: 190px; height: auto; }
  /* Footer-Links sind eine Liste, keine Fließtext-Links -> volle Tap-Fläche */
  .footer__grid li { margin-bottom: 0; }
  .footer__grid li a { display: flex; align-items: center; min-height: 44px; }
  /* 16 px verhindert den automatischen Zoom von iOS Safari beim Fokus */
  .search input { font-size: 16px; padding-block: .85rem; }

  /* --- Tabs volle Breite --- */
  .tabs { display: flex; width: 100%; }
  .tab { flex: 1; text-align: center; padding: .7rem .5rem; min-height: 44px; }

  /* --- Ergebniszeile --- */
  .results-bar { gap: .75rem; }
  .results-bar #tReset, .results-bar .btn { margin-left: 0 !important; width: 100%; }

  /* --- Kacheln --- */
  .facts { grid-template-columns: repeat(2, 1fr); }
  /* Ungerade Anzahl: letzte Kachel füllt die Zeile, sonst bleibt eine Lücke */
  .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fact { padding: 1.1rem; }
  .fact b { font-size: 1.4rem; }
  .balls { grid-template-columns: repeat(2, 1fr); }

  /* --- Detailansicht: seitliches Panel, auf schmalen Schirmen volle Breite --- */
  .drawer__close { width: 44px; height: 44px; }
  .drawer__title { font-size: 1.28rem; padding-right: 3.4rem; }
  .drawer__body { padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 2rem)); }

  /* --- Timeline schmaler, damit der Text Platz behält --- */
  .block { padding-left: 2.5rem; padding-bottom: 1.4rem; }
  .block::before { left: 13px; top: 1.9rem; }
  .block__min { width: 28px; height: 28px; font-size: .62rem; }
  .block__item { padding: .8rem .9rem; }

  /* --- Tabellen: Scroll-Hinweis --- */
  .table-scroll { position: relative; -webkit-overflow-scrolling: touch; }
  .table-scroll::after {
    content: ""; position: sticky; right: 0; top: 0;
    display: block; width: 28px; height: 100%;
    pointer-events: none;
  }
  th, td { padding: .75rem .9rem; }

  /* --- Footer --- */
  .footer__grid { gap: 2rem; }
  .footer__bar { flex-direction: column; gap: .5rem; }

  /* --- CTA-Blöcke --- */
  .cta { padding: 2rem 1.4rem; border-radius: var(--r-lg); }
  .cta__row .btn { width: 100%; }
  .split { gap: 1.75rem; }
}

/* Sehr schmale Geräte (320–380 px) */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.95rem; }
  .brand__logo { height: 36px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .tag { font-size: .72rem; padding: .26rem .58rem; }
  .drawer__title { font-size: 1.18rem; }
}

/* Querformat auf dem Handy: Hero darf nicht die ganze Höhe fressen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: 1.9rem 1.1rem; }
  .hero h1 { font-size: 1.7rem; }
  .hero__eyebrow { margin-bottom: .75rem; }
  .hero__text { font-size: .94rem; margin-top: .6rem; }
  .hero__cta { margin-top: 1rem; }
  .hero__foot { margin-top: 1rem; }
}

/* Moderne Viewport-Einheit, wo verfügbar (vermeidet Sprünge durch die
   ein- und ausfahrende Adressleiste mobiler Browser) */
@supports (height: 100dvh) {
  @media (max-width: 700px) {
    .hero { min-height: min(56dvh, 470px); }
  }
}

@media print {
  .site-header, .site-footer, .filters, .hero__slides, .drawer-backdrop { display: none; }
  .drawer { position: static; transform: none; width: 100%; box-shadow: none; }
}