/* ==========================================================================
   Powerbike Winterthur — Design System
   Reduziert, mobile-first, sympathisch. Schwarz / Weiss / Powerbike-Rot.
   ========================================================================== */

/* Das hidden-Attribut gilt — ausnahmslos.
   Der Browser setzt dafuer display:none, aber jede eigene Regel mit display
   schlaegt sie, weil sie spaeter kommt. Dreimal hat uns das etwas angezeigt,
   das versteckt sein sollte: zuletzt der Knopf «0 vergangene Tage zeigen» im
   Wochenplan, davor zwei Felder im Trainerbereich. Darum hier einmal fuer
   alle, statt pro Klasse nachzuflicken. */
[hidden] { display: none !important; }

:root {
  --red: #E4231D;        /* nahe PANTONE 485 C */
  --red-dark: #B81812;
  --red-soft: #FDEDEC;

  /* Vereinsfarben. Verbindlich sind die Pantone-Werte aus den Santini-
     Produktionsdaten der Trikots (CS990DVLLBMX, 07.08.2025):

       Schwarz  NERO 100        alle drei Trikots
       Rot      PANTONE 485 C   alle drei
       Rot 2    PANTONE 186 C   alle drei
       Türkis   PANTONE 326 C   nur Variante B
       Violett  PANTONE 2592 C  nur Variante C

     MASSGEBLICH IST DIE NUMMER — 485, 186, 326, 2592. Der Buchstabe dahinter
     ist nur der Untergrund: C = Coated (gestrichenes Papier, satter),
     U = Uncoated (ungestrichen, matter). Dieselbe Farbe, andere Wirkung.
     Der Verein schickte Santini Faecherkarten mit «326 U», «2592 U» und
     «186 C»; Santini notierte im Datenblatt durchweg «C». Kein Widerspruch,
     nur eine andere Reihe derselben Farben. Fuer Stoff gilt streng genommen
     keine von beiden — dafuer haette Pantone die TCX-Reihe.

     Die Hexwerte unten sind veroeffentlichte Naeherungen — Santini schreibt
     auf das Blatt: «refer to the pantone color book/chart only». Fotos der
     Faecherkarten wurden gegengeprueft (21.09.2026) und liegen rund 20
     Punkte je Kanal neben diesen Werten, also im Rahmen dessen, was ein
     Handyfoto ohne Graukarte abweicht. Kein Grund, die getesteten Werte
     dagegen einzutauschen.
     Fuer Flaechen und Text auf dunklem Grund je eine hellere Variante. */
  /* PANTONE 326 C (#00B2A9) schafft auf Weiss nur 2.64:1 und ist als Text
     unlesbar. #12897C ist die dunklere, texttaugliche Stufe derselben Farbe. */
  --tuerkis: #12897C;
  --tuerkis-hell: #35D6C1;
  --tuerkis-dark: #0C6A60;
  --tuerkis-soft: #E7F5F3;
  /* Ein Violett fuer alles. Frueher standen hier zwei: das dunkle
     Logo-Violett #400078 fuer Flaechen und das Trikot-Violett fuer Text —
     nebeneinander sahen sie aus wie zwei verschiedene Farben. Jetzt gilt
     ueberall PANTONE 2592 C. Weisse Schrift darauf: 6.28:1, also lesbar. */
  --violett: #9B26B6;
  /* Das Logo-Violett #400078 ist fuer Text zu dunkel: nur 1.33:1 Abstand zur
     Schriftfarbe, es liest sich als Schwarz. Darum fuer Text das Trikot-
     Violett PANTONE 2592 C — 6.28:1 auf Weiss, 2.98:1 zur Schrift, also
     lesbar UND erkennbar violett. Flaechen und Raender bleiben beim
     dunklen Logo-Ton. */
  --violett-text: #9B26B6;   /* PANTONE 2592 C */
  --violett-hell: #9B6BFF;
  /* Neon-Blauviolett: nur fuer den Interesse-Aufruf auf den Aemtli-Karten */
  --neon-blauviolett: #8A7BFF;
  --neon-blauviolett-text: #BCADFF;
  /* Dunklere Stufe DESSELBEN Violetts — fuer Schrift auf hellviolettem
     Grund. #35006A gehoerte zum alten Logo-Violett und fiel aus der Reihe.
     8.61:1 auf --violett-soft. */
  --violett-dark: #6B1A7E;
  --violett-soft: #F0EAFB;

  /* Blau ist keine Vereinsfarbe, sondern die Signalfarbe des
     Trainerbereichs (--tr-kante / --tr-flaeche). Fuer Hinweiskaesten, die
     weder Warnung (rot) noch Vereinsauftritt sind, hier uebernommen. */
  --blau: #2F6FB5;
  --blau-dark: #1F4C86;
  --blau-soft: #E9F1FA;

  /* Die drei Jersey-Farben als ein Band — Rot, Tuerkis, Violett in Dritteln. */
  --jersey: linear-gradient(90deg,
              var(--red)     0 33.334%,
              var(--tuerkis) 33.334% 66.667%,
              var(--violett) 66.667% 100%);

  /* Akzent je Seite. Rot ist die Grundstimmung und bleibt es fuer alle
     Handlungsknoepfe — wer «Anmelden» sucht, soll es ueberall gleich
     erkennen. Gefaerbt werden nur Eyebrow und Textverweise: oft zu sehen,
     nie laut. Gesetzt wird der Akzent ueber data-akzent am <body>, das
     kommt aus dem Front-Matter der jeweiligen Seite. */
  --akzent: var(--red);
  --akzent-hell: #FF6B63;

  --ink: #121214;
  --ink-2: #3D3D44;
  --muted: #6E6E78;
  --bg: #FFFFFF;
  --surface: #F5F5F6;
  --surface-2: #EDEDEF;
  --line: #E3E3E7;
  --dark: #131316;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18,18,20,.06), 0 2px 8px rgba(18,18,20,.04);
  --shadow: 0 2px 4px rgba(18,18,20,.05), 0 12px 28px rgba(18,18,20,.08);

  --wrap: 1120px;
  --pad: 20px;
  --bottom-nav-h: 64px;

  --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body[data-akzent="tuerkis"] { --akzent: var(--tuerkis); --akzent-hell: var(--tuerkis-hell); }
body[data-akzent="violett"] { --akzent: var(--violett-text); --akzent-hell: var(--violett-hell); }


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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
h3 { font-size: 1.18rem; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.1rem; color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: .92rem; }

/* --------------------------------------------------------------- Layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap--narrow { max-width: 760px; }

section { padding: 52px 0; }
@media (min-width: 900px) { section { padding: 88px 0; } }
section.tight { padding: 32px 0; }

.section-head { max-width: 640px; margin-bottom: 28px; }
.section-head p { color: var(--ink-2); }

.eyebrow {
  display: inline-block;
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 10px;
}

.surface { background: var(--surface); }
.inverted { background: var(--dark); color: #fff; }
.inverted .lead, .inverted p { color: rgba(255,255,255,.78); }
.inverted .eyebrow { color: var(--akzent-hell); }

/* -------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { border-color: var(--line); background: var(--bg); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.inverted .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.inverted .btn--ghost:hover { border-color: #fff; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-display); font-weight: 700;
  color: var(--akzent); text-decoration: none;
}
.inverted .link-arrow { color: var(--akzent-hell); }
.link-arrow::after { content: "→"; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* Sprungziele halten Abstand zum klebenden Kopf.
   Ohne das landet jeder Anker — /training#mitglied, /bmx-school#kursdaten —
   mit seiner Überschrift unter der Leiste, und man sieht erst den zweiten
   Absatz. Bisher hielt nur die Ämtli-Karte diesen Abstand ein; gebraucht
   wird er überall, wo ein Link mitten in eine Seite zeigt. */
/* 64px Kopfhoehe + 1px Linie + Luft. */
:target { scroll-margin-top: 84px; }

/* --------------------------------------------------------------- Header -- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: 16px;
  height: 64px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
}
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { height: 30px; width: auto; }

.nav-desktop { display: none; }
@media (min-width: 900px) {
  .nav-desktop { display: flex; align-items: center; gap: 4px; }
  .nav-desktop a {
    padding: 8px 14px; border-radius: var(--r-pill);
    font-family: var(--f-display); font-weight: 600; font-size: .95rem;
    text-decoration: none; color: var(--ink-2);
  }
  .nav-desktop a:hover { background: var(--surface); color: var(--ink); }
  .nav-desktop a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }

  /* Ein Navigationspunkt mit Unterliste. Sie klappt beim Darueberfahren auf
     und bleibt offen, solange etwas darin den Fokus hat — so erreicht man sie
     auch mit der Tastatur. Ohne das muesste der Punkt breiter werden oder die
     Seite ein Skript laden, nur um zwei Links zu zeigen. */
  .nav-gruppe { position: relative; display: inline-flex; }
  .nav-gruppe > a { display: inline-flex; align-items: center; gap: 5px; }
  .nav-gruppe__pfeil {
    width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; opacity: .5; transition: transform .14s, opacity .14s;
  }
  .nav-gruppe:hover .nav-gruppe__pfeil,
  .nav-gruppe:focus-within .nav-gruppe__pfeil { opacity: 1; transform: rotate(180deg); }
  .nav-gruppe__liste {
    position: absolute; top: 100%; left: 0; z-index: 60; min-width: 215px; max-width: 270px;
    display: none; flex-direction: column; gap: 2px; margin-top: 6px; padding: 6px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .5);
  }
  .nav-gruppe:hover .nav-gruppe__liste,
  .nav-gruppe:focus-within .nav-gruppe__liste { display: flex; }
  /* Kein «nowrap»: Ein langer Eintrag wie «Powerbike & Friends · EC
     Zeltbetreuung» schoebe die Liste sonst ueber den rechten Fensterrand. */
  .nav-gruppe__liste a { padding: 9px 12px; font-size: .9rem; line-height: 1.3; }
}
.header .btn { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.header__cta { display: none; }
@media (min-width: 700px) { .header__cta { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--surface); border: 0; border-radius: 12px; cursor: pointer;
}
.burger span { position: relative; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
@media (min-width: 900px) { .burger { display: none; } }

/* --------------------------------------------------------- Menu overlay -- */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  padding: 0 var(--pad) 40px;
  overflow-y: auto;
  /* Hart ein- und ausgeblendet statt ueber Deckkraft eingefadet: sonst scheint
     die Seite darunter waehrend der Animation durch und es sieht aus wie zwei
     Ebenen uebereinander. Das Menue ist ab dem ersten Bild deckend, nur der
     Inhalt schiebt sich kurz hoch. */
  display: none;
}
.menu[data-open="true"] { display: block; }
.menu[data-open="true"] > * { animation: menu-in .18s ease-out both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu__top { display: flex; align-items: center; height: 64px; }
.menu__top .brand { margin-right: auto; }
.menu__close {
  width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--surface); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink);
}
.menu__group { margin-top: 22px; }
.menu__group h4 {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.menu a.menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; text-decoration: none;
}
.menu a.menu__link::after { content: "→"; color: var(--muted); }
.menu a.menu__link[target="_blank"]::after { content: "↗"; }

/* ----------------------------------------------------------- Bottom nav -- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--bottom-nav-h);
  font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); text-decoration: none;
}
.tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tabbar a[aria-current="page"] { color: var(--red); }
@media (min-width: 900px) { .tabbar { display: none; } }

/* ----------------------------------------------------------------- Hero -- */
.hero { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.hero img.hero__bg, .hero video.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%; opacity: .55;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,19,22,.55) 0%, rgba(19,19,22,.35) 45%, rgba(19,19,22,.92) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; padding: 96px var(--pad) 56px;
}
@media (min-width: 900px) { .hero__inner { padding: 150px var(--pad) 110px; } }
.hero h1 { max-width: 14ch; }
.hero p { max-width: 46ch; color: rgba(255,255,255,.82); font-size: 1.08rem; }
.hero .btn-row { margin-top: 26px; }

.hero--page .hero__inner { padding: 56px var(--pad) 44px; }
@media (min-width: 900px) { .hero--page .hero__inner { padding: 84px var(--pad) 72px; } }
.hero--page h1 { max-width: 20ch; }

/* ---------------------------------------------------------------- Cards -- */
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fuenf Fakten nebeneinander: Auf der BMX-School-Seite gehoert das Alter in
   dieselbe Reihe wie Preis und Dauer — es ist die erste Frage, die Eltern
   stellen. Am Handy stehen sie zu zweit, die erste Kachel ueber die ganze
   Breite: Das Alter soll man nicht suchen muessen. */
.grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--5 > :first-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--5 > :first-child { grid-column: auto; }
}

@media (max-width: 560px) {
  .grid--4 .card { padding: 18px; }
  .grid--4 .card h3 { font-size: 1.05rem; }
  .grid--5 .card { padding: 18px; }
  .grid--5 .card h3 { font-size: 1.05rem; }
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.card--link { text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.card--link:hover { border-color: var(--ink); transform: translateY(-2px); }
.card h3 { margin-bottom: 2px; }
.card p { color: var(--ink-2); font-size: .98rem; }
.card__foot { margin-top: auto; padding-top: 12px; }

.card--media { padding: 0; overflow: hidden; }
.card--media img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.card--media .card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.surface .card { background: var(--bg); border-color: transparent; }

/* ----------------------------------------------------------------- Step -- */
.step { position: relative; padding-left: 0; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 12px;
  border-radius: var(--r-pill);
  background: var(--red); color: #fff;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
}

/* ---------------------------------------------------------------- Stats -- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--bg); padding: 24px 20px; }
.inverted .stats { background: rgba(255,255,255,.14); }
.inverted .stat { background: var(--dark); }
.stat b {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1; letter-spacing: -.03em;
}
.stat span { display: block; margin-top: 6px; font-size: .9rem; color: var(--muted); }
.inverted .stat span { color: rgba(255,255,255,.65); }

/* ----------------------------------------------------------- Fact / Info -- */
.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fact { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fact dt { flex: 0 0 40%; max-width: 190px; color: var(--muted); font-size: .95rem; margin: 0; }
.fact dd { margin: 0; flex: 1; font-weight: 500; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: .82rem; font-weight: 600;
}
.pill--red { background: var(--red-soft); color: var(--red-dark); }
.pill--open { background: #E7F6EC; color: #14653A; }
.pill--full { background: var(--surface-2); color: var(--muted); }

/* ------------------------------------------------------------- Accordion -- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--muted); line-height: 1; }
.acc details[open] summary::after { content: "–"; }
.acc .acc__body { padding-bottom: 20px; color: var(--ink-2); }
.acc .acc__body ul { margin: 0; padding-left: 20px; }
.acc .acc__body li { margin-bottom: 6px; }

/* --------------------------------------------------------- Fairgate form -- */
.formbox {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}
.formbox__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.formbox__head strong { font-family: var(--f-display); font-size: 1rem; }
.formbox__head .pill { margin-left: auto; }
.formbox__frame { position: relative; min-height: 620px; background: var(--bg); }
.formbox__frame iframe { width: 100%; border: 0; display: block; min-height: 620px; }
.formbox__loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  gap: 10px; color: var(--muted); font-size: .95rem; text-align: center; padding: 24px;
}
.formbox__loading[hidden] { display: none; }
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--surface-2); border-top-color: var(--red);
  animation: spin .8s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.formbox__fallback { padding: 20px; border-top: 1px solid var(--line); background: var(--surface); font-size: .93rem; }
.formbox__fallback a { color: var(--red); font-weight: 600; }

/* ------------------------------------------------------------- Instagram -- */
.insta__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.insta__head h2 { margin: 0; }
.insta__handle { color: var(--muted); font-weight: 600; }
.insta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .insta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.insta-item {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r); background: var(--surface-2); text-decoration: none;
}
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.insta-item:hover img { transform: scale(1.04); }
.insta-item__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
  color: #fff; font-size: .78rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.insta-skeleton { background: var(--surface-2); border-radius: var(--r); aspect-ratio: 1; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* --------------------------------------------------------------- Banner -- */
.cta-band {
  border-radius: var(--r-lg);
  background: var(--red); color: #fff;
  padding: 34px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
@media (min-width: 800px) {
  .cta-band { flex-direction: row; align-items: center; padding: 44px 44px; }
  .cta-band > div:first-child { flex: 1; }
}
.cta-band h2 { margin-bottom: 6px; }
.cta-band p { color: rgba(255,255,255,.88); margin: 0; }
.cta-band .btn { background: #fff; color: var(--red-dark); }
.cta-band .btn:hover { background: #FFF1F0; }

/* --------------------------------------------------------------- Footer -- */
.footer { background: var(--dark); color: rgba(255,255,255,.72); padding: 48px 0 40px; }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer img.footer__logo { height: 34px; margin-bottom: 18px; }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer h4 {
  color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 8px; font-size: .95rem; }
.footer__bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: .87rem;
}
.footer__bottom span { margin-right: auto; }

/* ---------------------------------------------------------------- Utils -- */
.stack > * + * { margin-top: 16px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   Bild-Komponenten
   ========================================================================== */

/* Bild mit Bildlegende */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--r-lg); object-fit: cover; }
.figure figcaption { margin-top: 10px; font-size: .88rem; color: var(--muted); }

/* Bilderstreifen — auf dem Handy seitlich wischbar, auf grossen Schirmen ein Raster */
.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 76%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Snap-Punkte muessen den Innenabstand kennen, sonst rutscht das erste Bild
     beim Laden an den Bildschirmrand. */
  scroll-padding-inline: var(--pad);
  padding-bottom: 6px;
  margin: 0 calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip > * { scroll-snap-align: start; }
.strip img { aspect-ratio: 4/3; }
@media (min-width: 700px) {
  .strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin: 0;
    padding-inline: 0;
    gap: 16px;
  }
}

/* Mosaik — ein grosses Bild, mehrere kleine */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); aspect-ratio: 1; }
/* Auf dem Handy: erstes und letztes Bild ueber die volle Breite — ergibt ein
   sauberes Raster ohne einzelne Kachel am Schluss. */
.mosaic > *:first-child,
.mosaic > *:last-child { grid-column: span 2; }
.mosaic > *:first-child img,
.mosaic > *:last-child img { aspect-ratio: 16/10; }
@media (min-width: 700px) {
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .mosaic > *:first-child,
  .mosaic > *:last-child { grid-column: auto; }
  .mosaic > *:first-child img,
  .mosaic > *:last-child img { aspect-ratio: 1; }
}

/* Bild neben Text */
.split { display: grid; gap: 24px; align-items: center; }
@media (min-width: 800px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .split--flip > *:first-child { order: 2; }
}
.split img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4/3; object-fit: cover; }

/* Bildkarte mit Text darunter (Karten mit Foto) */
.card--media img { aspect-ratio: 3/2; }

/* ==========================================================================
   Entwicklungspfad, Wochenplan, Struktur, Kalender, Shop-Popup
   ========================================================================== */

/* --------------------------------------------------- Entwicklungspfad -- */
.levels { display: grid; gap: 14px; }

/* --- Entwicklungspfad in drei Phasen ------------------------------------
   Rot = Einstieg, Türkis = Altersgruppen, Violett = Leistungspfad.
   Die Farbe markiert die Phase, nicht die einzelne Gruppe — so heisst sie
   etwas, statt bloss bunt zu sein. */
/* Der Pfad ist eine Leseflaeche, keine Tabelle: ueber die volle Breite eines
   grossen Schirms werden die Zeilen zu lang, das Auge verliert den
   Zeilenanfang. Darum eine ruhige Spalte in der Mitte. */
.phase, .weiche, .level--neben, .levels + .small {
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.phase { --phasenfarbe: var(--red); }
.phase + .phase { margin-top: 28px; }
.phase--start    { --phasenfarbe: var(--red); }
.phase--gruppen  { --phasenfarbe: var(--tuerkis); }
.phase--leistung { --phasenfarbe: var(--violett); }
.phase__titel {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font-family: var(--f-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--phasenfarbe);
}
.phase__titel::after {
  content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--phasenfarbe) 28%, transparent);
}

.level {
  background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--phasenfarbe, var(--line));
  border-radius: var(--r-lg); padding: 18px 20px;
}
.level--entry { background: var(--surface); }
.level--neben { border-left-color: var(--line); background: var(--surface); }
.level__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.level__head h3 { margin: 0; }
.level__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--phasenfarbe, var(--ink)); color: #fff;
  font-family: var(--f-body); font-size: .8rem; font-weight: 700;
  flex: none;
}
.level__badge--stern { font-size: .9rem; line-height: 1; }
.level__age { margin-left: auto; font-size: .88rem; color: var(--muted); font-weight: 600; }
.level__note { font-size: .82rem; color: var(--muted); font-weight: 500; }
.level p { color: var(--ink-2); font-size: .96rem; }

/* Inhalte als feine Punkte statt als Etiketten. Fünf Gruppen mit je fünf
   Etiketten ergeben eine Wand aus Kästchen — Punkte ordnen sich unter. */
.level__list {
  margin: 12px 0 0; padding: 0; list-style: none;
  display: grid; gap: 4px 20px;
  font-size: .89rem; color: var(--muted);
}
@media (min-width: 560px) { .level__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.level__list li { display: flex; align-items: baseline; gap: 8px; }
.level__list li::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--phasenfarbe, var(--muted));
  transform: translateY(-1px);
}
.level__count { margin: 14px 0 0; font-size: .88rem; color: var(--muted); }
.level__count b { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); }

/* Die Racing-Gruppen: drei ruhige Felder, keine Aufzählung im Fliesstext */
.racing { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.racing__gruppe {
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--phasenfarbe) 35%, transparent);
  background: color-mix(in srgb, var(--phasenfarbe) 7%, transparent);
  color: var(--phasenfarbe);
  font-size: .85rem; font-weight: 600;
}

/* Die Weiche zwischen Altersgruppen und Leistungspfad */
.weiche {
  display: flex; align-items: flex-start; gap: 14px;
  /* «auto» links und rechts, nicht 0: Die gemeinsame Regel weiter oben
     zentriert .phase und .weiche auf 860 Pixel — ein «margin: 28px 0» hier
     haette sie danach wieder an den linken Rand gesetzt. Genau das war der
     Versatz gegenueber den Gruppenkarten. */
  margin: 28px auto; padding: 16px 20px;
  border: 1px dashed color-mix(in srgb, var(--violett) 45%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--violett) 4%, transparent);
  font-size: .95rem; color: var(--ink-2);
}
.weiche__stern { color: var(--violett); font-size: 1.2rem; line-height: 1.3; flex: none; }
.crit__icon { font-size: 1.8rem; line-height: 1; }

/* ==========================================================================
   Ämtli-Anmeldung
   Label, Feld und Erklärung standen in einem <p> nebeneinander und flossen
   als ein langer Absatz — man las «Dein Name [Feld] E-Mail [Feld] Du bekommst
   eine Mail…» in einem Zug. Jetzt ist jedes Feld ein eigener Block mit
   Beschriftung oben, Feld darunter, Erklärung zuletzt.
   Türkis ordnet: Es ist die Farbe für die Menschen im Verein, und genau darum
   geht es hier. Rot bleibt dem einen Knopf vorbehalten, der etwas auslöst.
   ========================================================================== */
.anmeldung {
  display: grid; gap: 22px;
  margin-top: 28px; padding: 24px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tuerkis);
  border-radius: var(--r-lg);
}
.anmeldung__feld { display: grid; gap: 7px; }
.anmeldung__feld label {
  font-weight: 600; font-size: .95rem; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px;
}
.anmeldung__optional {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--surface);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.anmeldung__feld input {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.anmeldung__feld input::placeholder { color: #A8A8B0; }
.anmeldung__feld input:focus {
  outline: 0; border-color: var(--tuerkis);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tuerkis) 18%, transparent);
}
.anmeldung__hinweis {
  font-size: .87rem; line-height: 1.5; color: var(--ink-2);
}
.anmeldung__abschluss { margin-top: 26px; }

/* ==========================================================================
   Aufklappbare Abschnitte
   Drei lange Blöcke auf der Trainingsseite — Wochenplan, Kalender-Abo,
   Entwicklungspfad. Zusammengeklappt sieht man die drei Überschriften
   untereinander und entscheidet, was man lesen will, statt zu scrollen.
   Der Kopf sieht aus wie jede andere Abschnittsüberschrift; nur der Pfeil
   rechts verrät, dass man ihn anklicken kann.
   ========================================================================== */
/* Die drei Abschnitte sollen als Liste gelesen werden. Mit dem normalen
   Abschnittsrhythmus lagen 178 Pixel zwischen zwei Ueberschriften — dann
   wirkt jede fuer sich und nicht als Auswahl. Der Klappkopf bringt seinen
   eigenen Abstand mit, darum hier keiner. */
.sektion--klapp { padding-top: 0; padding-bottom: 0; }
.klappsektion { border-top: 1px solid var(--line); }
.klappsektion + .klappsektion { border-top: 0; }
/* Raster statt Reihe: Die Augenbraue gehoert UEBER die Ueberschrift, wie in
   jedem anderen Abschnittskopf — nebeneinander sah es aus wie ein Etikett.
   Der Pfeil steht rechts und ueberspannt beide Zeilen. */
.klappsektion__kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 16px;
  padding: 26px 0; cursor: pointer; list-style: none;
}
.klappsektion__kopf::-webkit-details-marker { display: none; }
.klappsektion__kopf .eyebrow { grid-column: 1; grid-row: 1; display: block; }
.klappsektion__kopf h2 { grid-column: 1; grid-row: 2; margin: 2px 0 0; }
.klappsektion__kopf::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; justify-self: end;
  width: 11px; height: 11px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px);
  transition: transform .18s ease, border-color .18s ease;
}
.klappsektion[open] > .klappsektion__kopf::after {
  transform: rotate(-135deg) translateY(-2px);
}
.klappsektion__kopf:hover::after { border-color: var(--red); }
/* Die leise Fassung: fuer Abschnitte, die nuetzlich sind, aber nicht die
   Seite tragen. Das Kalender-Abo ist so einer — man sucht ihn, wenn man ihn
   braucht, und sonst soll er nicht nach Aufmerksamkeit rufen. Darum keine
   Augenbraue, kleinere Zeile, weniger Luft. */
.klappsektion--leise > .klappsektion__kopf { padding: 18px 0; }
.klappsektion--leise > .klappsektion__kopf h2 {
  grid-row: 1; font-size: 1.1rem; line-height: 1.3; margin: 0;
}
.klappsektion__dazu {
  grid-column: 1; grid-row: 2; margin-top: 2px;
  font-size: .88rem; color: var(--muted);
}
.klappsektion--leise[open] > .klappsektion__kopf { padding-bottom: 10px; }
.klappsektion--leise .klappsektion__inhalt { padding-bottom: 32px; }

.klappsektion__inhalt { padding-bottom: 40px; }
.klappsektion__lead { max-width: 640px; margin: 0 0 28px; color: var(--ink-2); }

/* ----------------------------------------------------------- Wochenplan -- */
.week { display: grid; gap: 14px; }
@media (min-width: 800px) { .week { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; } }
.week__day { background: var(--surface); border-radius: var(--r-lg); padding: 16px; }
.surface .week__day { background: var(--bg); }
.week__title {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
/* Das Datum neben dem Wochentag. Ohne es koennte der Plan von jedem Jahr
   sein — mit ihm ist sofort klar: das ist diese Woche. */
.week__datum { font-weight: 700; color: var(--ink); letter-spacing: .02em; }

/* Blaettern zwischen den Wochen. Steht erst da, wenn das Skript laeuft —
   ohne JavaScript waere ein Pfeil ohne Wirkung schlimmer als keiner. */
.week__kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.week__spanne {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
.week__spanne strong {
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.01em;
}
/* Die Kalenderwoche als ruhiges Schild — im Trainerbereich ist sie das
   Arbeitsmittel und steht vorn, hier genuegt sie als Beigabe. */
.week__kw {
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
/* Das Pfeilpaar steht ganz vorn — am linken Rand, wo es bei jeder Woche an
   derselben Stelle liegt. Rechts aussen war es zwar ebenso ruhig, aber man
   musste es suchen. Neben den Text ginge nicht: Der Zeitraum schwankt
   zwischen 156 und 282 Pixeln, die Pfeile wuerden mitwandern. */
.week__nav { display: flex; gap: 8px; flex: none; }
.week__heute { margin-left: auto; }
.week__pfeil {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.week__pfeil:hover { border-color: var(--ink); background: var(--surface-2); }
.week__heute {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 700;
  font-size: .88rem; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease;
}
.week__heute:hover { border-color: var(--ink); }
@media (max-width: 560px) {
  .week__spanne { order: -1; flex-basis: 100%; }
  .week__spanne strong { font-size: 1.1rem; }
}

/* Ferien und Ausfaelle. Der Tag bleibt stehen — wer ihn sucht, soll den
   Grund lesen und nicht ein Loch im Plan finden. */
.week__day--ferien, .week__day--aus { opacity: .62; }
/* Ferienkurs am Vormittag. Er faellt aus der Woche heraus — andere Zeit,
   anderes Publikum — und soll das auch zeigen. */
.slot--ferienkurs {
  border-left-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 5%, var(--bg));
}
.week__hinweis {
  margin: -6px 0 12px; font-size: .84rem; font-weight: 600;
  color: var(--akzent);
}
.week__day--aus .week__hinweis { color: var(--muted); }

/* Rennen im Trainingsplan — schmal, farbig, zuoberst im Tag.
   Sie sind kein Training und sehen darum anders aus als ein Slot: ein
   flacher Streifen mit der Farbe des Rennkalenders, keine Kachel. So liest
   man an einem Blick, welches Wochenende besetzt ist (Vorstand 14.10.2026). */
.week__rennen { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 12px; }
.week__rennen__eintrag {
  display: block; border-left: 3px solid var(--renn, #2563EB);
  background: color-mix(in srgb, var(--renn, #2563EB) 9%, transparent);
  border-radius: 0 8px 8px 0; padding: 5px 9px;
  font-size: .8rem; font-weight: 700; line-height: 1.25;
  color: var(--ink); text-decoration: none;
}
a.week__rennen__eintrag:hover {
  background: color-mix(in srgb, var(--renn, #2563EB) 18%, transparent);
}
/* Browser ohne color-mix bekommen wenigstens den farbigen Rand. */
@supports not (background: color-mix(in srgb, red 9%, transparent)) {
  .week__rennen__eintrag { background: var(--surface-2); }
}
/* Das Wochenendband laeuft ueber alle fuenf Spalten — am Wochenende wird
   nicht trainiert, es gibt also keine Tagesspalte, in die es passen wuerde. */
.week__wochenende { grid-column: 1 / -1; }
.week__wochenende .week__title { margin-bottom: 10px; }
.week__rennen--breit { flex-direction: row; flex-wrap: wrap; margin: 0; }
.week__rennen--breit .week__rennen__eintrag { padding: 7px 12px; }
.week__rennen__tag {
  display: inline-block; margin-right: 8px; color: var(--muted);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.slot {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; margin-bottom: 10px;
}
.slot:last-child { margin-bottom: 0; }
.slot__time { font-family: var(--f-display); font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.slot__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.slot__head strong { font-size: .92rem; }
.slot__head .pill { font-size: .72rem; padding: 3px 9px; }
.slot__groups { margin: 0 0 8px; padding: 0; list-style: none; }
.slot__groups li {
  font-size: .84rem; color: var(--ink-2); padding: 3px 0;
  border-bottom: 1px dashed var(--line);
}
.slot__groups li:last-child { border-bottom: 0; }
.slot__details { margin: 0; font-size: .8rem; color: var(--muted); }


/* -------------------------------------------------------------- FAQ -- */
.faq__group {
  margin: 32px 0 0; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
}
.faq__group:first-child { margin-top: 0; }
.acc summary { font-size: .98rem; }

/* ---------------------------------------------------------- Personen -- */
.person { align-items: flex-start; }
.person__photo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  margin-bottom: 12px; display: flex; align-items: center; justify-content: center;
}
.person__photo--initials {
  background: var(--surface-2); color: var(--muted);
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
}
.person__role { margin: 0; font-weight: 600; color: var(--red); font-size: .95rem; }
.person__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.person__tags .pill { font-size: .74rem; padding: 3px 9px; }

/* ------------------------------------------------------- Organigramm -- */
/* --------------------------------------------------- Vereinsstruktur --
   Zwei Teile statt einer Leiter: oben die Organe, die entscheiden, darunter
   die Bereiche, in denen gearbeitet wird — nebeneinander, nicht untereinander.
   Eine Leiter wuerde behaupten, Infrastruktur sei dem Trainerteam
   untergeordnet. Ist sie nicht. */
.org__titel {
  margin: 0 0 14px; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--akzent);
}
.org__titel + * { margin-top: 0; }
.org > .org__titel:not(:first-child) { margin-top: 40px; }

/* Die Organe: eine kurze, nummerierte Kette — hier ist die Reihenfolge echt. */
.org__organe { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.org__organ {
  position: relative; padding: 16px 20px 16px 52px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  counter-increment: organ;
}
.org__organe { counter-reset: organ; }
.org__organ::before {
  content: counter(organ); position: absolute; left: 18px; top: 17px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--akzent); color: #fff;
  font-size: .76rem; font-weight: 700; line-height: 22px; text-align: center;
}
.org__organ p { margin: 4px 0 0; color: var(--ink-2); font-size: .95rem; }

/* Die Bereiche: gleichwertig nebeneinander. */
.org__bereiche {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.org__bereich {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px; border-radius: var(--r);
  background: var(--bg); border: 1px solid var(--line);
}
.org__bereich--kern { border-color: color-mix(in srgb, var(--akzent) 45%, var(--line)); }
.org__bereich p { margin: 0; color: var(--ink-2); font-size: .93rem; flex: 1; }
.org__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.org__kopf strong { font-family: var(--f-display); font-size: 1.05rem; }
.org__kopf .pill { margin-left: auto; font-size: .74rem; }
.org__kern {
  margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
.org__zahl {
  font-size: .82rem; font-weight: 700; color: var(--akzent);
  letter-spacing: .02em;
}
.org__zahl--leer { color: var(--muted); font-weight: 600; }
.org__fuss { margin: 24px 0 0; color: var(--ink-2); }
.org__fuss .link-arrow { margin-left: 8px; }

/* ---------------------------------------------------------- Kalender -- */
.cal__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg); color: var(--ink-2);
  font-family: var(--f-body); font-size: .86rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.chip:hover { border-color: color-mix(in srgb, var(--chipfarbe, var(--ink)) 55%, transparent); }
/* Aktiv traegt der Knopf die Farbe seiner Kategorie — dieselbe Farbe wie der
   Strich am Termin. Man sieht ohne Erklaerung, was zusammengehoert. */
.chip.is-active {
  background: var(--chipfarbe, var(--ink));
  border-color: var(--chipfarbe, var(--ink));
  color: #fff;
}
.chip__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--chipfarbe, var(--ink));
}
.chip.is-active .chip__dot { background: rgba(255,255,255,.85); }
/* Die Zahl sagt vorher, wie viele Termine der Filter uebrig laesst. */
.chip__zahl {
  font-size: .76rem; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chipfarbe, var(--ink)) 13%, transparent);
  color: var(--chipfarbe, var(--ink));
}
.chip.is-active .chip__zahl { background: rgba(255,255,255,.22); color: #fff; }
.cal__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

/* Jahreswechsel. Absichtlich klein und grau: die laufende Saison ist das
   Thema, die naechste liegt nur einen Pfeil weiter. */
/* Gebaut wie die Wochenleiste im Trainingsplan — dieselbe Geste, dieselbe
   Gestalt: Zahl gross links, Pfeilpaar rechts aussen, Haarlinie darunter.
   Vorher standen hier zwei graue 26-Pixel-Pfeile, die niemand als «hier geht
   es weiter» gelesen hat. */
/* Ein Pfeil links der Jahreszahl, einer rechts davon — zurueck und vor
   liegen dort, wo man sie erwartet. Das geht hier, weil eine Jahreszahl
   immer vier Zeichen breit ist; bei der Wochenleiste waere der rechte Pfeil
   mitgewandert, darum steht das Paar dort beisammen. */
.cal__jahre {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cal__jahrzahl {
  min-width: 4ch; text-align: center;
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink);
}
.cal__pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--ink);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cal__pfeil:hover:not(:disabled) { border-color: var(--ink); background: var(--surface-2); }
.cal__pfeil:disabled { opacity: .3; cursor: default; }

/* Termin mit Anmeldelink: das ganze Kaestchen ist anklickbar. */
.cal__event--link { text-decoration: none; cursor: pointer; }
.cal__event--link:hover { border-color: var(--typfarbe); }
.cal__go {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: .8rem; font-weight: 700; color: var(--typfarbe);
}
/* Der Pfeil nur bei fremden Adressen — er ist das Versprechen «neues
   Fenster», nicht bloss Dekoration. */
.cal__go--extern::after { content: "↗"; font-size: .9em; }
.cal__go:not(.cal__go--extern)::after { content: "→"; font-size: .9em; }

/* Zwei Anmeldungen am selben Termin — Rennen und Zeltbetreuung. Untereinander
   statt nebeneinander: auf dem Handy bricht eine Zeile sonst mitten im Wort. */
.cal__wege {
  display: flex; flex-direction: column; align-items: flex-start;
  /* Dicht an den Typ heran — «Rennanmeldung» gehoert zum Rennen darueber,
     nicht als eigener Block darunter. Derselbe Abstand wie Titel zu Typ. */
  margin-top: 2px; gap: 8px;
}
.cal__wege .cal__go { margin-top: 0; }
/* Hier fliessend statt als Flex-Zeile: Bricht «Anmeldung Powerbike & Friends
   Betreuungszelt» auf dem Handy um, soll der Pfeil hinter dem letzten Wort
   stehen und nicht am rechten Rand allein. */
.cal__wege .cal__go { display: inline; text-decoration: none; }
.cal__wege .cal__go::after { margin-left: 5px; }
/* Das Emblem laeuft im Text mit — darum inline und an der Grundlinie
   ausgerichtet, nicht als Block daneben. */
.cal__zeichen {
  /* display ausdruecklich: weiter oben stehen alle Bilder auf block, und
     als Block saesse das Zeichen allein auf der ersten Zeile. */
  display: inline-block;
  width: 18px; height: 18px; margin-right: 6px;
  vertical-align: -4px; border-radius: 50%;
}
.cal__wege .cal__go:hover { text-decoration: underline; }

/* Der Nebenweg: dieselbe Zeile, nur leiser. Nicht die Schrift kleiner machen
   — das waere schwer zu lesen —, sondern den Kontrast senken. Farbe hat dann
   nur noch das Emblem, und genau daran erkennt man die Zeile im Vorbeischauen. */
.cal__go--leise { font-weight: 600; color: var(--ink-2); }

.cal__months { display: grid; gap: 20px; }
@media (min-width: 700px)  { .cal__months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cal__months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cal__month {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px;
}
.cal__month.is-empty { display: none; }
.cal__month h3 {
  margin: 0 0 12px; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.cal__list { display: flex; flex-direction: column; gap: 8px; }

/* Ein Tag. Finden zwei Termine gleichzeitig statt, stehen sie nebeneinander —
   auch auf dem Handy, damit ein Rennwochenende als Einheit lesbar bleibt. */
.cal__tag { display: grid; gap: 8px; }
.cal__tag--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal__tag[hidden] { display: none; }

/* Jeder Termin in einem eigenen dünnen Rahmen */
.cal__event {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); position: relative; overflow: hidden;
  min-width: 0;
}
.cal__event[hidden] { display: none; }
.cal__marke {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--typfarbe);
}
.cal__date { font-size: .76rem; color: var(--muted); font-weight: 700; letter-spacing: .01em; }
.cal__title { font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.cal__typ {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--typfarbe); font-weight: 700; margin-top: 2px;
}

/* ------------------------------------------------------- Shop-Popup -- */
.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
@media (min-width: 700px) { .modal { align-items: center; padding: 24px; } }
.modal__backdrop { position: absolute; inset: 0; background: rgba(12,12,14,.6); backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 760px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow); overflow: hidden;
  animation: sheet-in .22s ease-out;
}
@media (min-width: 700px) { .modal__panel { border-radius: var(--r-lg); } }
@keyframes sheet-in { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal__head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.modal__head h2 { margin: 0; font-size: 1.25rem; }
.modal__close {
  margin-left: auto; width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 12px; background: var(--surface-2);
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink);
}
/* flex:1 + min-height:0 — ohne das scrollt der Inhalt in einer Flex-Spalte
   nicht, sondern wird unten abgeschnitten. */
.modal__body { flex: 1; min-height: 0; padding: 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.product { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
/* Produktbilder sind freigestellte Renderings — nicht beschneiden. */
.product img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; padding: 10px; }
.product__body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product__body h3 { margin: 0; font-size: 1.05rem; }
.product__body p { margin: 0; }
.product__price { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: var(--red); }
.product .btn { margin-top: auto; }

/* Zwischenüberschrift im Shop-Popup */
.modal__section {
  margin: 28px 0 14px; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.modal__section:first-child { margin-top: 0; }
.product__body h4 { margin: 0; font-family: var(--f-display); font-size: 1.05rem; letter-spacing: -.01em; }

/* Hero ohne Bild — für Seiten, zu denen es (noch) kein passendes Foto gibt */
.hero--plain { background: var(--dark); }
.hero--plain::after {
  background: radial-gradient(120% 90% at 15% 0%, rgba(228,35,29,.35) 0%, transparent 60%);
}

/* Freigestelltes Produktbild im Fliesstext */
.split img.img--product {
  background: #fff; object-fit: contain; padding: 18px;
  border: 1px solid var(--line); aspect-ratio: 4/3;
}

/* The-Drop-Karten mit Abspielsymbol */
/* Faehnchen auf einer Medienkarte, z. B. «Vorankuendigung». Sitzt ueber
   dem Titel und bekommt darum unten etwas Luft. */
.card__marke { margin-bottom: 8px; }

/* Hinweiskasten ueber einem Formular: nennt eine Voraussetzung, bevor
   jemand anfaengt auszufuellen. Roter Balken links, damit er sich von
   einer normalen Karte unterscheidet und nicht ueberlesen wird. */
.hinweisbox {
  background: var(--red-soft); border-left: 4px solid var(--red);
  border-radius: var(--r-sm); padding: 18px 20px; margin-bottom: 26px;
}
.hinweisbox__titel {
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  color: var(--red-dark); margin-bottom: 6px;
}
.hinweisbox p { margin: 0 0 12px; }
.hinweisbox p:last-of-type { margin-bottom: 14px; }
.hinweisbox .btn { margin-top: 2px; }

.drop .drop__thumb { position: relative; display: block; }
.drop .drop__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.drop .drop__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(18,18,20,.6); backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.drop .drop__play::after {
  content: ""; position: absolute; left: 21px; top: 17px;
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}
.drop:hover .drop__play { background: var(--red); transform: translate(-50%, -50%) scale(1.06); }

/* Instagram-Block auf dunklem Grund */
.inverted .insta-skeleton { background: rgba(255,255,255,.12); }
.inverted .insta-item { background: rgba(255,255,255,.12); }
.inverted .insta-grid .muted { color: rgba(255,255,255,.7); }

/* Kartenstreifen (The Drop): gleiche Wischlogik wie .strip, aber mit Karten */
.strip--cards { align-items: stretch; }
.strip--cards > .card { height: 100%; }
@media (min-width: 700px) { .strip--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Instagram und YouTube im Menü als Symbol statt als Menüpunkt —
   in den Originalfarben der Marken. */
.menu__social { display: flex; gap: 12px; margin-top: 26px; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 0; border-radius: 16px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.social-btn svg { width: 26px; height: 26px; }
.social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* Instagram-Verlauf von Gelb über Pink nach Blau */
.social-btn--instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
/* YouTube-Rot */
.social-btn--youtube { background: #FF0000; }

/* Vorstandskarten: Porträt oben, kompakter als die Trainerkarten */
.person__photo { object-position: 50% 20%; }
.social-btn--facebook { background: #1877F2; }

/* ==========================================================================
   Team — Gesichterreihe und Riders
   ========================================================================== */

/* Gesichterreihe: kompakte Vorschau des Trainerteams */
.faces { display: flex; flex-wrap: wrap; gap: 20px 26px; }
.faces__item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; }
.faces__photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line);
}
.faces__name { font-size: .85rem; font-weight: 600; text-align: center; line-height: 1.2; }
.surface .faces__photo { border-color: var(--surface); }

/* Riders: viele Personen kompakt, nach Gruppe gebündelt */
/* Das Abo an der Gruppenzeile. Leise: Es ist ein Angebot, keine Aufgabe —
   wer es braucht, sieht es, alle anderen lesen darueber hinweg. */
.riders__abo {
  flex: none; margin-left: 10px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.riders__abo:hover { border-color: var(--gruppenfarbe); color: var(--gruppenfarbe); }
/* Auf dem Handy NICHT ausblenden: Dort liegt die Kalender-App, dort wird
   abonniert. Nur hat die Zeile dann keinen Platz mehr fuer drei Dinge
   nebeneinander — der Chip ragte ueber den Kartenrand. Also faellt er auf
   eine eigene Zeile, linksbuendig unter den Gruppennamen. */
@media (max-width: 560px) {
  .riders__gruppe > summary { flex-wrap: wrap; }
  .riders__abo {
    order: 4; flex: 0 0 auto; width: auto;
    margin: 0 0 2px; padding: 4px 12px;
  }
  .riders__gruppename { flex: 1 1 100%; }
}

.riders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; margin-bottom: 32px; }
@media (min-width: 600px) { .riders { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 900px) { .riders { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* Trainer:innen tragen ihre Farbe — dieselbe wie in der Verwaltung und im
   Trainerbereich. Nur als Balken und Initialen-Kreis, damit die Kachel ruhig
   bleibt. Kontaktangaben stehen hier bewusst nicht. */
/* Zugehoerigkeit innerhalb einer Stufe (Powerbike-Trainer / Gasttrainer).
   Gleicher Abstand oben wie unten — vorher stand der Titel je nach Gruppe
   unterschiedlich nah am Text darunter. */
.trainer__gruppe {
  margin: 22px 0 10px; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
}
.trainer__gruppe:first-of-type { margin-top: 4px; }

/* Erklaerung zur Stufe, direkt unter dem aufgeklappten Titel. */
.trainer__erklaerung {
  margin: 0 0 4px; max-width: 62ch;
  font-size: .93rem; line-height: 1.55; color: var(--muted);
}
/* Die Kachel ist mittig aufgebaut — ein Rand links sähe schief aus. Darum
   trägt das Bild einen feinen Ring in der Farbe, der Initialen-Kreis ist ganz
   in der Farbe. */
.riders__item--farbe .riders__photo { box-shadow: 0 0 0 3px var(--personfarbe, var(--line)); }
.riders__item--farbe .person__photo--initials { background: var(--personfarbe, var(--surface-2));
  color: var(--personschrift, #121214); }

.riders__item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.riders__photo {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted);
  font-family: var(--f-display); font-weight: 700;
}
.riders__name { font-size: .82rem; font-weight: 600; line-height: 1.2; }
.riders__nr {
  font-family: var(--f-display); font-size: .72rem; font-weight: 700;
  color: var(--red); letter-spacing: .04em;
}
.riders__hl { font-size: .72rem; color: var(--muted); line-height: 1.2; }
/* Weitere Toepfe, in denen eine Rider:in steht — Renngruppe, Kader, Talent Card */
.riders__kat {
  display: inline-block; margin-top: 3px; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .66rem; font-weight: 600; color: var(--muted); line-height: 1.5;
}
.riders__item .riders__kat + .riders__kat { margin-left: 4px; }

/* Weitere Toepfe: nur Farbpunkte, damit alle Kacheln gleich hoch bleiben.
   Welche Farbe wofuer steht, sagt die Legende ueber der Liste. */
.riders__dots { display: inline-flex; gap: 4px; margin-top: 3px; }
.riders__dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.riders__foto { display: block; text-decoration: none; }

/* Jede Trainingsgruppe ist eine Klapplasche — geschlossen, damit die Seite
   am Handy ueberschaubar bleibt. Die Gruppenfarbe traegt die Zeile als Balken
   links; Name links, Anzahl rechts, Pfeil ganz aussen. */
.riders__gruppe {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); margin-bottom: 8px; overflow: hidden;
  transition: border-color .14s, box-shadow .14s;
}
.surface .riders__gruppe { background: var(--bg); }
.riders__gruppe:hover { border-color: var(--gruppenfarbe); }
.riders__gruppe[open] {
  border-color: var(--gruppenfarbe);
  box-shadow: 0 8px 24px rgba(18,18,20,.06);
}
.riders__gruppe > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px 15px 0; cursor: pointer; list-style: none;
  position: relative;
}
.riders__gruppe > summary::-webkit-details-marker { display: none; }
/* Farbbalken links */
.riders__gruppe > summary::before {
  content: ""; flex: none; width: 5px; align-self: stretch;
  margin-right: 4px; border-radius: 0 3px 3px 0;
  background: var(--gruppenfarbe);
}
.riders__gruppename {
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .01em; color: var(--ink);
}
.riders__anzahl {
  margin-left: auto; display: flex; align-items: baseline; gap: 5px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  color: var(--gruppenfarbe);
}
.riders__anzahl em {
  font-family: var(--f-body, inherit); font-style: normal; font-weight: 500;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
/* Pfeil statt Plus — dreht sich beim Aufklappen */
.riders__pfeil {
  flex: none; width: 9px; height: 9px; margin-left: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease, border-color .18s;
}
.riders__gruppe[open] .riders__pfeil {
  transform: rotate(-135deg) translateY(-2px);
  border-color: var(--gruppenfarbe);
}
.riders__gruppe > summary:hover .riders__pfeil { border-color: var(--gruppenfarbe); }
.riders__gruppe > summary:focus-visible { outline: 2px solid var(--gruppenfarbe); outline-offset: -2px; }
/* Trainer-Stufen: dieselbe Klapp-Optik wie die Rider-Gruppen, aber der
   Inhalt hat oben etwas mehr Luft, weil hier eine Erklaerung folgt. */
.trainer__stufe > summary { padding-top: 15px; padding-bottom: 15px; }
.trainer__stufe[open] > summary { padding-bottom: 12px; }

.riders__gruppe .riders {
  margin: 0; padding: 4px 18px 20px;
  border-top: 1px solid var(--line);
}

/* Farblegende ueber den Riders */
.legende {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 5px 16px; margin: -4px 0 22px;
}
.legende__punkt {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  margin-right: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.legende__name { font-size: .72rem; color: var(--muted); }
/* Aus Datenschutzgruenden steht nur der Jahrgang da, kein Geburtsdatum.
   Klein und kursiv in Klammern direkt hinter dem Vornamen. */
.riders__jahr { font-size: .72em; font-style: italic; font-weight: 400; color: var(--muted); }
/* Farbpunkt vor der Gruppenueberschrift */
.riders__punkt {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}

/* Offizielle Instagram-Einbettungen: Instagram bringt eigenes Layout mit,
   wir geben nur den Rahmen vor. */
.insta-embeds { display: grid; gap: 14px; }
@media (min-width: 700px) { .insta-embeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .insta-embeds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.insta-embeds .instagram-media { margin: 0 !important; min-width: 0 !important; max-width: 100% !important; }

/* Kachel mit verlinktem Instagram-Profil */
.riders__item--link { text-decoration: none; color: inherit; }
.riders__media { position: relative; display: block; }
/* Instagram-Farbring: nur wer ein Profil hinterlegt hat, bekommt ihn — der Ring
   ist damit selbst der Hinweis, dass das Foto anklickbar ist. */
.riders__media--ig {
  padding: 3px; border-radius: 50%;
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.riders__media--ig .riders__photo { border: 2px solid var(--bg); }
.surface .riders__media--ig .riders__photo { border-color: var(--surface); }
.riders__item--link:hover .riders__media--ig { filter: brightness(1.08); }
.riders__item--link:focus-visible .riders__media--ig {
  outline: 2px solid var(--red); outline-offset: 3px;
}
.riders__ig {
  position: absolute; right: -2px; bottom: -2px;
  width: 24px; height: 24px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border: 2px solid var(--bg);
}
.surface .riders__ig { border-color: var(--surface); }
.riders__ig svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.2; }
.riders__item--link:hover .riders__name { color: var(--red); }

/* ==========================================================================
   Bestellprozess Jersey
   ========================================================================== */
.schritte { counter-reset: schritt; list-style: none; margin: 20px 0 0; padding: 0; }
.schritte li {
  counter-increment: schritt; position: relative;
  padding: 12px 0 12px 46px; border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.schritte li:last-child { border-bottom: 0; }
.schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--f-display); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}

.tabelle-huelle { overflow-x: auto; margin-top: 18px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
/* Auf dem Telefon wird enger gesetzt statt geschoben. Eine Tabelle, die man
   erst nach rechts ziehen muss, um die letzte Spalte zu sehen, verbirgt
   genau die Angabe, wegen der man hergekommen ist. */
@media (max-width: 520px) {
  .tabelle { min-width: 0; font-size: .86rem; }
  .tabelle th, .tabelle td { padding-right: 8px; }
  .tabelle th:last-child, .tabelle td:last-child { padding-right: 0; }
}
.tabelle th {
  text-align: left; padding: 10px 14px 10px 0;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 700;
}
.tabelle td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .ist-naechste td { background: var(--red-soft); }
.tabelle .ist-naechste td:first-child { border-radius: 10px 0 0 10px; padding-left: 12px; }
.tabelle .ist-naechste td:last-child { border-radius: 0 10px 10px 0; }
.tabelle .pill { margin-left: 8px; font-size: .7rem; padding: 2px 8px; }

/* ==========================================================================
   Shop auf der Seite — Produktkarte mit Farb- und Grössenwahl
   ========================================================================== */
.produkt {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; background: var(--bg);
}
.produkt__bild { background: #fff; }
.produkt__bild img { width: 100%; aspect-ratio: 4/3; object-fit: contain; padding: 14px; }
.produkt__text { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.produkt__text h3 { margin: 0; }
.produkt__text p { margin: 0; }
.produkt__preis {
  font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; color: var(--red);
}
.wahlzeile { display: flex; flex-direction: column; gap: 7px; }
.wahlzeile__titel {
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.wahlen { display: flex; flex-wrap: wrap; gap: 7px; }
.wahl {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.wahl:hover:not(:disabled) { border-color: var(--ink); }
.wahl.ist-gewaehlt { background: var(--ink); border-color: var(--ink); color: #fff; }
.wahl:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.produkt__hinweis { font-size: .86rem; color: var(--muted); min-height: 1.3em; }
.produkt__kauf { margin-top: auto; }
.produkt__kauf[aria-disabled="true"] { opacity: .45; pointer-events: auto; cursor: not-allowed; }

/* ==========================================================================
   News und Einbettungen
   ========================================================================== */
.news { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.news:last-child { border-bottom: 0; margin-bottom: 0; }
.news__datum {
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 6px;
}
.news h2 { margin-bottom: 10px; }
.news__bild { margin: 22px 0; }
/* Aufklappbar: Datum, Titel und Anriss stehen immer da, der ausführliche
   Teil kommt auf Klick. So sieht man alle Beiträge auf einmal, statt einen
   langen Text nach dem anderen zu scrollen. */
.news__kopf { cursor: pointer; list-style: none; position: relative; padding-right: 34px; }
.news__kopf::-webkit-details-marker { display: none; }
.news__kopf > *:last-child { margin-bottom: 0; }
.news__kopf::after {
  content: ""; position: absolute; right: 6px; top: 26px;
  width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease;
}
.news__klapp[open] > .news__kopf::after { transform: rotate(-135deg); }
.news__kopf:hover::after { border-color: var(--red); }
/* Mehrere Bilder nebeneinander: Ein WM-Bericht hat ein Bild pro Fahrer.
   Untereinander in voller Breite wäre das eine Tapete. */
.news__galerie {
  display: grid; gap: 14px; margin: 24px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.news__kachel { margin: 0; }
.news__kachel a { display: block; border-radius: var(--r-lg); overflow: hidden; }
/* Alle WM-Bilder liegen in genau 1200x1600 vor — die Kacheln duerfen
   darum ein festes Format haben, ohne dass etwas gequetscht wird. */
.news__kachel img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  display: block; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .18s ease;
}
.news__kachel a:hover img { transform: scale(1.02); }
.news__kachel figcaption {
  margin-top: 8px; font-size: .84rem; color: var(--muted); line-height: 1.45;
}
.news__inhalt { margin-top: 22px; }
.news__inhalt > *:last-child { margin-bottom: 0; }
/* Zwischentitel in einem Beitrag. Kleiner als der Beitragstitel und mit mehr
   Luft davor als danach — er gehoert zum Absatz darunter, nicht zu dem
   darueber. */
.news__zwischentitel {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 700;
  line-height: 1.3; color: var(--ink);
  margin: 28px 0 8px;
}
.news__inhalt > .news__zwischentitel:first-child { margin-top: 0; }
.card .news__datum { margin-bottom: 4px; }

/* Video und Instagram laden erst auf Klick — vorher keine fremde Verbindung */
.einbett { margin: 24px 0; }
.einbett__start {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16/9; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); font: inherit; color: var(--ink);
}
.einbett--insta .einbett__start { aspect-ratio: 4/5; max-width: 420px; }
/* Ohne Vorschaubild. Die Videos der Weltmeistertitel gehoeren der UCI, ihre
   Vorschaubilder kopieren wir nicht auf unseren Server — dann blieb die
   Flaeche weiss und sah aus wie ein Bild, das nicht geladen hat. Dunkel mit
   dem roten Knopf darauf liest sie sich als das, was sie ist: ein Video,
   das auf einen Klick wartet. */
.einbett__start--leer {
  background: radial-gradient(120% 120% at 50% 0%, #34343B 0%, #1C1C1F 70%);
  border-color: rgba(255,255,255,.16);
}
.einbett__start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.einbett__play {
  position: relative; z-index: 1;
  width: 62px; height: 62px; border-radius: 50%; background: #FF0000;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.einbett__play::after {
  content: ""; position: absolute; left: 24px; top: 19px;
  border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff;
}
.einbett__logo {
  position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 18px;
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.einbett__hinweis {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 10px 14px; font-size: .82rem; font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); color: #fff;
}
.einbett--insta .einbett__hinweis { background: var(--surface-2); color: var(--ink-2); }
.einbett__start:hover .einbett__play { transform: scale(1.05); }
.einbett iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-lg); display: block; }
.einbett--insta blockquote { margin: 0 auto !important; }

/* Formular mit Zahlung: öffnet auf der Fairgate-Domain statt im Rahmen.
   Grund: Cookies von Drittanbietern und 3-D-Secure brechen in fremden
   Rahmen häufig ab — bei einer Zahlung will man das nicht riskieren. */
.formbox--extern .formbox__aussen { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.formbox--extern .formbox__aussen p { margin: 0; color: var(--ink-2); }
.formbox--extern .formbox__aussen .btn { align-self: flex-start; }
.formbox--extern .formbox__aussen .small { color: var(--muted); }

/* ==========================================================================
   Kalender abonnieren — ohne Login, ohne Datenbank
   ========================================================================== */
.abos { display: grid; gap: 8px; }
/* Ab Tablet nebeneinander: elf Kalender untereinander waren am Rechner
   ein langer Weg nach unten. Die Zeilen sind schmal genug, dass zwei
   nebeneinander passen — mehr nicht, sonst brechen die Knoepfe um. */
@media (min-width: 780px) {
  .abos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 1180px) {
  .abos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.abo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r);
  /* Als Rasterfeld waere die Zeile sonst so breit wie ihr laengster
     unumbrechbarer Inhalt — und stuende damit ueber den Rand hinaus.
     min-width:0 erlaubt ihr, sich auf die Spalte einzupassen. */
  min-width: 0;
}
.abo__name { font-weight: 600; font-size: .95rem; }
.abo__zahl { font-size: .78rem; color: var(--muted); }
.abo__knopf, .abo__kopie {
  border-radius: var(--r-pill); font: inherit; font-size: .86rem; font-weight: 700;
  padding: 9px 18px; cursor: pointer; text-decoration: none; min-height: 42px;
  display: inline-flex; align-items: center;
}
/* Name und Takt stehen zusammen links, die zwei Knoepfe rechts — so bleibt
   alles auf einer Zeile, auch auf dem Handy. Vorher schob der Zaehler den
   Abonnieren-Knopf auf volle Breite und «Adresse» rutschte darunter. */
.abo__wer { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.abo__name, .abo__zahl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Türkis wie die Knöpfe im Wochenplan — es ist derselbe Handgriff, und
   zweimal dieselbe Sache in zwei Farben verwirrt nur. */
.abo__knopf { background: var(--tuerkis); color: #fff; border: 0;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tuerkis) 30%, transparent); }
.abo__knopf:hover { background: var(--tuerkis-dark); }
.abo__kopie { background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.abo__kopie:hover { border-color: var(--ink); }
.abo__kopie.ist-kopiert { background: #E7F6EC; border-color: #b7e0c5; color: #14653A; }
.abo__knopf, .abo__kopie { flex: 0 0 auto; white-space: nowrap; }
/* Auf schmalen Telefonen passen Name und zwei Knöpfe nicht nebeneinander —
   die Zeile stand 27 Pixel über den Rand hinaus. Dort rückt der Name auf eine
   eigene Zeile und die Knöpfe teilen sich die darunter. Lieber zwei Zeilen
   als eine, die nicht hineinpasst. */
/* Reihenfolge von breit nach schmal, sonst gewinnt die falsche Regel: Die
   560er-Zeile stand frueher hinter der 430er und setzte flex-wrap:nowrap —
   damit konnte der Name nie auf seine eigene Zeile ruecken und wurde auf
   schmalen Geraeten zu «Power…» gequetscht. */
@media (max-width: 560px) {
  .abo { gap: 8px; flex-wrap: nowrap; padding: 10px 12px; }
  .abo__knopf, .abo__kopie { padding: 8px 13px; font-size: .8rem; min-height: 38px; }
}
@media (max-width: 430px) {
  .abo { gap: 8px; flex-wrap: wrap; }
  .abo__wer { flex: 1 1 100%; }
  .abo__knopf, .abo__kopie { flex: 1 1 0; justify-content: center; padding: 8px 12px; }
}
@media (max-width: 380px) {
  /* Ganz schmale Geräte: der Takt tritt zurück, die Knöpfe bleiben lesbar. */
  .abo__zahl { display: none; }
}

/* ==========================================================================
   Ämtli — Karten aus dem Vorstandsantrag September 2026
   Ein Auftrag pro Karte: Titel, drei Schritte, Takt, Plaetze.
   ========================================================================== */
/* Wie oft die Seite angeschaut wurde — leise unter den drei Zahlen. Sie
   gehört nicht in dieselbe Reihe: Die drei oben sagen, wer mitmacht, diese
   sagt nur, wer vorbeigeschaut hat. */
.amt-besuche {
  margin: 12px 0 0; font-size: .82rem; color: var(--muted); text-align: center;
}
.amt-besuche[hidden] { display: none; }
.amt-besuche strong { color: var(--ink-2); font-weight: 700; }

.amt-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.amt-zahl {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 18px 16px; text-align: center;
}
.surface .amt-zahl { background: var(--bg); }
.amt-zahl strong {
  display: block; font-family: var(--f-display); font-size: 1.9rem;
  line-height: 1; color: var(--tuerkis);
}
.amt-zahl:nth-child(1) strong { color: var(--tuerkis); }
.amt-zahl:nth-child(2) strong { color: var(--violett); }
.amt-zahl:nth-child(3) strong { color: var(--ink); }
.amt-zahl span {
  display: block; margin-top: 6px; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

.amt-regeln { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: regel; }
.amt-regeln li {
  position: relative; padding: 16px 0 16px 46px;
  border-bottom: 1px solid var(--line);
}
.amt-regeln li:last-child { border-bottom: 0; }
.amt-regeln li::before {
  counter-increment: regel; content: counter(regel, upper-alpha);
  position: absolute; left: 0; top: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--violett); color: #fff;
  font-family: var(--f-display); font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.amt-regeln strong { display: block; margin-bottom: 3px; }
.amt-regeln span { color: var(--ink-2); font-size: .92rem; }

/* Die Überschrift eines Bereichs ist der Orientierungspunkt beim Scrollen.
   Als kleine Grossbuchstabenzeile ging sie zwischen Filterknöpfen und
   Hashtags unter — man wusste nicht mehr, in welchem Block man gerade liest.
   Jetzt eine richtige Überschrift mit violettem Balken darüber. */
.amt-bereich + .amt-bereich { margin-top: 54px; }
.amt-bereich__titel {
  position: relative; margin: 0; padding-top: 19px;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.08;
  letter-spacing: -.015em; text-transform: none; color: var(--ink);
}
.amt-bereich__titel::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 56px; height: 4px; border-radius: 2px;
  background: var(--violett);
}
.amt-bereich__zahl { margin: 7px 0 20px; font-size: .86rem; color: var(--muted); }

/* align-items:start ist hier kein Feinschliff, sondern die Behebung eines
   Fehlers: Im Raster sind alle Karten einer Reihe von Haus aus gleich hoch.
   Klappte man eine auf, wuchs die Reihe mit — und die Nachbarinnen wurden
   auf dieselbe Hoehe gezogen, obwohl sie zugeklappt blieben. Uebrig blieb
   unter ihrem Kopf eine grosse schwarze Flaeche, die aussah wie ein Fehler.
   Mit «start» behaelt jede Karte ihre eigene Hoehe; nur die geoeffnete
   waechst. */
.amt-karten { display: grid; gap: 14px; align-items: start; }
@media (min-width: 700px)  { .amt-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .amt-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.amt-karte {
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1C1C21 0%, #131316 60%, #0E0E11 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-lg); padding: 20px;
  color: #F2F2F4;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.18);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.surface .amt-karte { background: linear-gradient(160deg, #1C1C21 0%, #131316 60%, #0E0E11 100%); }
/* Ein Hauch Vereinsrot am oberen Rand — die Karte soll knallen. */
.amt-karte::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--tuerkis-hell) 0%, var(--violett-hell) 65%, transparent 100%);
}
.amt-karte:hover {
  transform: translateY(-2px);
  border-color: rgba(53, 214, 193, .5);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.26);
}
.amt-karte--voll { opacity: .58; }
.amt-karte--voll::before { background: rgba(255,255,255,.18); }
.amt-karte__kopf { display: flex; align-items: center; gap: 11px; }
.amt-karte__emoji { font-size: 1.6rem; line-height: 1.2; }
.amt-karte__bereich {
  margin: 14px 0 0; font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: #6E6E7A;
}
.amt-karte__name {
  margin: 3px 0 0; font-size: 1.12rem; color: #fff; line-height: 1.2;
}
.amt-karte__schild {
  flex: none; padding: 5px 11px; border-radius: 6px;
  border: 2px solid rgba(255,255,255,.8);
  font-family: var(--f-display); font-weight: 700; font-size: .74rem;
  line-height: 1; color: #fff; white-space: nowrap;
  display: inline-flex; align-items: center;
}

/* Schlagwörter: grob, was einen erwartet — vor allen Details */
.amt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.amt-tag {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #C9C9D2;
  font-size: .7rem; font-weight: 600; letter-spacing: .01em;
}

/* Die Zahl, die Angst nimmt: Zeit, zu zweit, wie oft */
.amt-karte__aufwand {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 13px 0 0; padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.amt-karte__aufwand strong {
  font-family: var(--f-display); font-size: 1.25rem; color: #fff; line-height: 1;
}
.amt-karte__aufwand span { font-size: .78rem; color: #A9A9B4; }
.amt-karte__aufwand span + span::before { content: "· "; color: #55555F; }

/* Der Nutzensatz sitzt direkt unter dem Titel und trägt die Karte */
.amt-karte__claim {
  margin: 9px 0 0; font-size: 1rem; line-height: 1.4;
  color: #F2F2F4; font-weight: 500;
}
.amt-karte__schritte {
  margin: 14px 0 0; padding: 0; list-style: none;
  counter-reset: schritt2; font-size: .84rem; color: #9A9AA6;
}
.amt-karte__schritte li {
  position: relative; padding: 5px 0 5px 22px;
  border-bottom: 1px dashed rgba(255,255,255,.09);
}
.amt-karte__schritte li:last-child { border-bottom: 0; }
.amt-karte__schritte li::before {
  counter-increment: schritt2; content: counter(schritt2);
  position: absolute; left: 0; top: 5px;
  font-family: var(--f-display); font-size: .74rem; color: var(--tuerkis-hell);
}
.amt-karte__goetti {
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px dashed rgba(255,255,255,.12);
  font-size: .8rem; color: #C9C9D2;
}
.amt-karte__goetti span { display: block; margin-top: 2px; color: #85858F; font-size: .76rem; }
.amt-karte__goetti a { color: inherit; }
/* Der Kopf statt der Adresse — dasselbe Prinzip wie im Kontaktformular:
   man sieht, wem man schreibt. Die Karte ist dunkel, darum helle Schrift. */
.amt-kopf {
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.12);
  text-decoration: none; color: inherit;
}
.amt-kopf__bild {
  flex: none; width: 46px; height: 46px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 2px rgba(255,255,255,.14);
  transition: box-shadow .15s;
}
.amt-kopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amt-kopf__bild--leer {
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #C9C9D2;
}
.amt-kopf__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.amt-kopf__text strong { font-size: .86rem; font-weight: 700; color: #ECECEF; }
.amt-kopf__text span { font-size: .78rem; color: #9A9AA4; }
.amt-kopf:hover .amt-kopf__bild { box-shadow: 0 0 0 2px var(--red); }
.amt-kopf:hover .amt-kopf__text span { color: #ECECEF; }
.amt-plaetze {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 7px;
}
.amt-platz {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  font-size: .84rem; font-weight: 600; line-height: 1;
}
.amt-platz--voll { background: rgba(255,255,255,.1); color: #EDEDF2; }
.amt-platz__haken { color: #5BD98A; font-weight: 700; }
.amt-platz--frei {
  border: 1px dashed rgba(255,255,255,.3); background: none; color: #B6B6C0;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
}
.amt-platz--frei:hover {
  border-style: solid; border-color: var(--tuerkis-hell);
  color: #06231F; background: var(--tuerkis-hell);
}
.amt-platz--frei:focus-visible { outline: 2px solid var(--tuerkis-hell); outline-offset: 2px; }
.amt-karte:target {
  outline: 2px solid var(--red); outline-offset: 4px;
  scroll-margin-top: 90px;
}

/* ==========================================================================
   Rückmeldungen auf Formularseiten (Ämtli-Anmeldung, Verwaltung)
   Ohne diese Regeln stand eine Fehlermeldung als nackter Text da und wurde
   schlicht übersehen — genau das ist am 09.09.2026 passiert.
   ========================================================================== */
.warn, .gut {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0; padding: 14px 16px;
  border-radius: var(--r); font-size: .95rem; line-height: 1.45;
}
.warn {
  background: var(--red-soft); border: 1px solid #F3B7B4; color: #8C1A15;
}
.gut {
  background: #E7F6EC; border: 1px solid #B7E0C5; color: #14653A;
}
.warn::before, .gut::before {
  flex: none; font-weight: 700; font-size: 1.05rem; line-height: 1.3;
}
.warn::before { content: "!"; }
.gut::before  { content: "✓"; }
.warn strong, .gut strong { font-weight: 700; }

/* Themenleiste über den Ämtli-Karten */
.amt-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
}
.amt-filter__knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  font-family: inherit; font-size: .86rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.amt-filter__knopf span {
  font-size: .74rem; font-weight: 700; color: var(--muted);
}
.amt-filter__knopf:hover { border-color: var(--tuerkis); }
.amt-filter__knopf--an {
  background: var(--violett); border-color: var(--violett); color: #fff;
}
.amt-filter__knopf--an span { color: rgba(255,255,255,.7); }
.amt-filter__leer { flex: 0 0 100%; margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.amt-filter__zurueck {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--tuerkis); text-decoration: underline;
}
.amt-bereich[hidden], .amt-karte[hidden] { display: none !important; }

/* Die kleinere Schwelle: Interesse statt Zusage.
   Sitzt klein am Ende der Namenszeile, in Neon-Blauviolett und gestrichelt —
   gestrichelt, weil nichts daran verbindlich ist. Wer sich einträgt, bekommt
   sein Namensschildchen davor; der Aufruf bleibt stehen. */
.amt-crew__dazu {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  border: 1.5px dashed var(--neon-blauviolett);
  font-size: .72rem; font-weight: 600; line-height: 1;
  color: var(--neon-blauviolett-text); text-decoration: none;
  background: rgba(138, 123, 255, .07);
  box-shadow: 0 0 12px rgba(138, 123, 255, .16);
  transition: color .14s, border-color .14s, background .14s, box-shadow .14s;
}
.amt-crew__dazu:hover, .amt-crew__dazu:focus-visible {
  color: #EFE9FF; border-color: #AE93FF;
  background: rgba(138, 123, 255, .2);
  box-shadow: 0 0 22px rgba(138, 123, 255, .34);
}

/* Weitergeben. Die meisten Ämtli werden nicht über die Website gefunden,
   sondern weil jemand gefragt hat. Das Teilen-Zeichen sitzt oben rechts in
   der Titelzeile; der Tipp klappt die Wege darunter auf — beschriftet, weil
   ein Logo allein nicht sagt, wozu der Knopf da ist. */
.amt-teilen {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 11px 0 0;
}
/* Ohne diese Zeile schlägt display:flex das hidden-Attribut. */
.amt-teilen[hidden] { display: none; }
.amt-teilen__weg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  font-family: inherit; font-size: .76rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #DCDCE4;
  transition: background .14s, color .14s, border-color .14s;
}
.amt-teilen__weg:hover, .amt-teilen__weg:focus-visible {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
/* WhatsApp ist der Weg, den hier fast alle nehmen — der darf grün sein. */
.amt-teilen__weg:first-child {
  background: rgba(37, 211, 102, .15);
  border-color: rgba(37, 211, 102, .5);
  color: #9CEFBD;
}
.amt-teilen__weg:first-child:hover,
.amt-teilen__weg:first-child:focus-visible {
  background: #25D366; border-color: #25D366; color: #042814;
}

/* Weiterschicken sitzt oben rechts in der Titelzeile — dort sucht man es,
   und dort sieht man es, ohne die Karte aufzuklappen. Die äusserste Ecke
   bleibt frei: Dort sitzt bei vollen Karten das Band «✓ Komplett». */
.amt-weiter {
  margin-left: auto; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #CFCFD8;
  transition: background .14s, border-color .14s, color .14s;
}
.amt-weiter svg { width: 16px; height: 16px; }
.amt-weiter:hover, .amt-weiter:focus-visible {
  background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.amt-weiter[aria-expanded="true"] {
  background: #fff; border-color: #fff; color: #15151A;
}
/* Das Plus steht danach — es darf den Platz nicht mehr selber greifen. */
.amt-weiter + .amt-klapp__plus { margin-left: 8px; }
/* Bei vollen Karten rückt die Glyphe nach links weg vom Band. */
.amt-karte--besetzt .amt-weiter { margin-right: 0; }

/* Wer schon dabei ist — zuoberst auf der Karte, direkt unter dem Titel,
   sichtbar auch ohne Aufklappen. Grün leuchtend: Das Auge soll als Erstes
   sehen, dass sich jemand gemeldet hat. */
.amt-crew {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 11px 0 0;
}
/* Ohne diese Zeile schlägt display:flex das hidden-Attribut — und eine
   leere Crew-Zeile hinterlässt eine Lücke unter jedem Titel. */
.amt-crew[hidden] { display: none; }
.amt-crew__wer {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; line-height: 1;
  background: rgba(126, 226, 190, .12);
  border: 1px solid rgba(126, 226, 190, .34);
  color: #C6F5E2;
}
.amt-crew__wer--neu {
  background: rgba(126, 226, 190, .2);
  border-color: rgba(126, 226, 190, .65);
  color: #E2FBF1;
  box-shadow: 0 0 14px rgba(126, 226, 190, .3),
              inset 0 0 12px rgba(126, 226, 190, .1);
}
.amt-crew__bild {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.amt-crew__bild--buchstabe {
  background: rgba(126, 226, 190, .3); color: #06231F;
  font-family: var(--f-display); font-size: .66rem; font-weight: 700;
}
.amt-crew .wa { margin-left: 2px; }

/* Besetzte Karte: ruhig, kein Aufruf mehr zum Übernehmen — dafür die
   Ansprechpersonen und der Weg auf die Interessensliste. */
/* Besetzt heisst nicht «erledigt», sondern «läuft» — darum ein feiner
   Mintrahmen statt Grau. */
.amt-karte--besetzt {
  border-color: rgba(126, 226, 190, .45);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.18),
              inset 0 0 0 1px rgba(126, 226, 190, .12);
}
.amt-karte--besetzt:hover { border-color: rgba(126, 226, 190, .75); }
.amt-karte--besetzt::before {
  background: linear-gradient(90deg, #7EE2BE 0%, rgba(126,226,190,.25) 70%, transparent 100%);
}
.amt-karte--besetzt .amt-karte__schild { border-color: rgba(255,255,255,.35); color: #B6B6C0; }
.amt-karte__fragen { margin: 8px 0 0; font-size: .78rem; color: #9A9AA6; }

/* Die wichtigste Zusage der Ämtli-Seite: man ist nie allein */
.amt-zusammen {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px; padding: 14px 18px;
  border-left: 4px solid var(--tuerkis);
  background: rgba(18, 137, 124, .07);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 1rem; color: var(--ink-2);
}
.amt-zusammen strong { color: var(--ink); }

/* Captains mit Gesicht — wie bei den Riders, nur klein */
.amt-platz--voll { padding-left: 5px; }
.amt-platz__bild {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
}
.amt-platz__bild--buchstabe {
  background: rgba(255,255,255,.16); color: #E2E2E8;
  font-family: var(--f-display); font-size: .68rem; font-weight: 700;
}

/* WhatsApp direkt hinter dem Namen — dezent, wird erst beim Zeigen grün */
.wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 6px; flex: none;
  color: #8E8E99; vertical-align: -3px;
  transition: color .12s, transform .12s;
}
.wa svg { width: 100%; height: 100%; }
.wa:hover, .wa:focus-visible { color: #25D366; transform: scale(1.12); }
.amt-platz .wa { margin-left: 5px; }

/* Unübersehbar: diese Karte ist voll. Die Marke sitzt in der oberen rechten
   Ecke — dort, wo das Auge nach dem Titel hinwandert, und ohne die Hashtags
   zu verdrängen. */
.amt-komplett {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 0 var(--r) 0 var(--r);
  background: #7EE2BE; color: #06231F;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(126, 226, 190, .25);
}
/* Platz für die Marke, damit die Hashtags nicht darunterlaufen */
.amt-karte--besetzt .amt-tags { padding-right: 112px; }
.amt-karte--besetzt { background: linear-gradient(160deg, #16211E 0%, #121A18 60%, #0D1413 100%); }
.surface .amt-karte--besetzt { background: linear-gradient(160deg, #16211E 0%, #121A18 60%, #0D1413 100%); }
/* Die erste Zahl ist die, auf die es ankommt: wie viele schon da sind.
   Die Gesamtzahl steht zuletzt und ruhig — sie soll niemanden erschlagen. */
.amt-zahl:nth-child(1) strong { color: var(--ink-2); }
.amt-zahl:nth-child(2) strong { color: #12897C; }
.amt-zahl:nth-child(3) strong { color: var(--tuerkis); }
/* Die Frage über der Filterleiste — sonst weiss niemand, wozu die Knöpfe da sind */
.amt-filter__frage {
  margin: 0 0 10px; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
/* Legende der Zusatz-Punkte an den Rider-Kacheln */
.legende__titel {
  margin: 0 0 6px; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* ==========================================================================
   Kader — eigener Weg, eigene Darstellung. Bewusst nicht wie die
   Trainingsgruppen: keine Klappkästchen, sondern Porträts.
   ========================================================================== */
.kader { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 600px) { .kader { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .kader { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kader__karte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kader__foto {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted);
  font-family: var(--f-display); font-weight: 700; font-size: 1.5rem;
}
.kader__bildlink { text-decoration: none; }
.kader .riders__media--ig { padding: 3px; }
.kader__kat {
  margin-top: 12px; padding: 2px 10px; border-radius: 999px;
  background: var(--violett); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.kader__name { margin: 7px 0 0; font-size: .95rem; line-height: 1.25; }
.kader__team { margin-top: 3px; font-size: .76rem; color: var(--muted); }

/* Talent Cards — alphabetisch, ohne Rangfolge. Wer eine Karte hat, gehört dazu.
   Dasselbe Format wie der Kader: grosse Porträts, Foto verlinkt aufs Profil.
   Ohne das violette Fähnchen — eine Talent Card ist kein Kader. */
.tcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 600px) { .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tcards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tcard { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tcard__foto {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--surface-2); color: var(--muted);
  font-family: var(--f-display); font-weight: 700; font-size: 1.5rem;
}
.tcard__bildlink { text-decoration: none; }
.tcards .riders__media--ig { padding: 3px; }
.tcard__name { margin-top: 10px; font-size: .95rem; font-weight: 600; line-height: 1.25; }
.tcard__jahr { margin-top: 3px; font-size: .76rem; font-style: italic; color: var(--muted); }


/* ==========================================================================
   Vereinsfarben — das Jersey über die ganze Website
   Rot bleibt die Hauptfarbe. Türkis und Violett kommen als Akzent dazu:
   als feines Band, als Reihenfolge in Dreiergruppen, nie als Fläche.
   ========================================================================== */

/* Jersey-Band unter der Kopfzeile. Die Kopfzeile klebt oben, das Band
   bleibt darum beim Scrollen immer sichtbar. */
.header { border-bottom: 1px solid var(--line); }
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 3px; background: var(--jersey);
}

/* Dasselbe Band als Abschluss oben am Fussbereich. */
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--jersey);
}

/* --- Dreierreihen bekommen die Farbfolge -------------------------------- */
/* Verlinkte Karten in einer Dreierreihe: jede Karte ihre Farbe. Sichtbar
   wird sie am Pfeil unten und am Rahmen beim Draufzeigen — sonst nichts. */
.card--link { --akzent: var(--ink); }
.grid--3 > .card--link:nth-child(3n+1) { --akzent: var(--red); }
.grid--3 > .card--link:nth-child(3n+2) { --akzent: var(--tuerkis); }
.grid--3 > .card--link:nth-child(3n+3) { --akzent: var(--violett); }
.card--link:hover { border-color: var(--akzent); }
.card--link .card__foot { color: var(--akzent); }

/* Das Etikett auf der Karte nimmt dieselbe Farbe, sehr hell hinterlegt. */
.grid--3 > .card--link:nth-child(3n+2) .pill:not(.pill--open):not(.pill--full) {
  background: var(--tuerkis-soft); color: var(--tuerkis-dark);
}
.grid--3 > .card--link:nth-child(3n+3) .pill:not(.pill--open):not(.pill--full) {
  background: var(--violett-soft); color: var(--violett-dark);
}

/* Die nummerierten Schritte — 1 rot, 2 türkis, 3 violett. */
.grid--3 > .step:nth-child(3n+2) .step__num { background: var(--tuerkis); }
.grid--3 > .step:nth-child(3n+3) .step__num { background: var(--violett); }

/* Zahlenband: feiner Strich über jeder Zahl, in der Farbfolge. */
.stat { position: relative; }
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--red);
}
.stat:nth-child(3n+2)::before { background: var(--tuerkis); }
.stat:nth-child(3n+3)::before { background: var(--violett); }
.inverted .stat:nth-child(3n+2)::before { background: var(--tuerkis-hell); }
.inverted .stat:nth-child(3n+3)::before { background: var(--violett-hell); }

/* --- Bausteine in den Zweitfarben, für den Einsatz nach Bedarf ---------- */
.pill--tuerkis { background: var(--tuerkis-soft); color: var(--tuerkis-dark); }
.pill--violett { background: var(--violett-soft); color: var(--violett-dark); }

.hinweisbox--tuerkis { background: var(--tuerkis-soft); border-left-color: var(--tuerkis); }
.hinweisbox--tuerkis .hinweisbox__titel { color: var(--tuerkis-dark); }
.hinweisbox--violett { background: var(--violett-soft); border-left-color: var(--violett); }
.hinweisbox--violett .hinweisbox__titel { color: var(--violett-dark); }
.hinweisbox--blau { background: var(--blau-soft); border-left-color: var(--blau); }
.hinweisbox--blau .hinweisbox__titel { color: var(--blau-dark); }

/* Hinweiskasten ohne Knopf: der Platz unter dem letzten Absatz ist fuer
   einen Button gedacht und stuende hier als Leerraum herum. */
.hinweisbox--schlicht p:last-of-type { margin-bottom: 0; }

/* Markiertes Textstück in Vereinsfarbe statt im Browserblau. */
::selection { background: var(--tuerkis-hell); color: #06231F; }

/* Die Kreise mit den Initialen wechseln durch die drei Farben. So wirkt die
   Reihe gestaltet, auch solange noch nicht alle Trainerfotos da sind. */
.faces__item:nth-child(3n+1) .person__photo--initials { background: var(--red-soft);     color: var(--red-dark); }
.faces__item:nth-child(3n+2) .person__photo--initials { background: var(--tuerkis-soft); color: var(--tuerkis-dark); }
.faces__item:nth-child(3n+3) .person__photo--initials { background: var(--violett-soft); color: var(--violett-dark); }

/* Der zweite Knopf im roten Band war weiss auf weiss und damit unlesbar:
   Die Regel darueber faerbt jeden Knopf im Band weiss, der Kontakt-Knopf
   bringt aber weisse Schrift mit. Hier bekommt er wieder einen Rahmen. */
.cta-band .btn--ghost {
  background: transparent; border-color: rgba(255,255,255,.55); color: #fff;
}
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* --- Ampel bei den Kursdaten ------------------------------------------- */
/* Drei Zustaende, je ein Punkt in der Farbe des Textes davor. Der Punkt
   macht den Zustand auch dann lesbar, wenn jemand Farben schlecht
   unterscheidet — die Beschriftung sagt es zusaetzlich. */
.pill--ampel::before {
  content: ""; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.pill--voll  { background: var(--red-soft); color: var(--red-dark); }
.pill--wenig { background: #FFF1E0;         color: #8A4A00; }
.pill--frei  { background: #E7F6EC;         color: #14653A; }
.pill--bald  { background: var(--blau-soft);  color: var(--blau-dark); }

/* Kleiner Knopf direkt an der Kurszeile — nur dort, wo es noch Plaetze hat.
   Er sitzt unter dem Zustand, damit die Zeile auf dem Handy nicht bricht. */
.btn--klein { min-height: 40px; padding: 0 18px; font-size: .92rem; }
.kurs-cta { display: inline-flex; margin-top: 10px; }
.facts--kurse .fact dd { display: flex; flex-direction: column; align-items: flex-start; }
/* Preise in einer Karte: Der Betrag steht rechts, nicht in einer eigenen
   Spalte. Eine Tabelle mit Mindestbreite musste auf dem Telefon geschoben
   werden — der Tagespreis stand ausserhalb des Bildschirms. */
.facts--preis { margin-top: 12px; border-top: 0; }
.facts--preis .fact { padding: 9px 0; }
.facts--preis .fact:last-child { border-bottom: 0; padding-bottom: 0; }
.facts--preis .fact dt { flex: 1 1 auto; max-width: none; }
.facts--preis .fact dd { flex: 0 0 auto; font-weight: 700; }

/* Kalender leer: die Saison ist durch. Kein Fehler, sondern eine Ansage. */
.cal__leer { padding: 32px 4px; color: var(--muted); }

/* Powerbike & Friends als eigener dunkler Streifen. Das Logo steht ohnehin
   auf Schwarz — gross und stark zurueckgenommen im Hintergrund wird daraus
   eine Teamzone, statt dass eine schwarze Kachel im Hellen klebt.
   Der Farbverlauf darueber haelt die linke Seite dunkel: dort steht der Text,
   und Lesbarkeit geht vor Dekoration. */
.friends-band { position: relative; overflow: hidden; }
.friends-band::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/powerbike-friends.png") no-repeat;
  background-position: right -40px center;
  background-size: auto 130%;
  opacity: .75;
}
/* Der Textblock steht links und reicht auf schmalen Schirmen weit nach
   rechts. Darum bleibt die Flaeche bis 68 % voll dunkel und wird erst danach
   durchsichtig — das Abzeichen bleibt ein Schatten, der Text bleibt Text.
   Lesbarkeit schlaegt Dekoration, auch wenn das Logo dabei Anschnitt wird. */
.friends-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              var(--dark) 0%, var(--dark) 68%,
              rgba(17,17,17,.82) 84%, rgba(17,17,17,.62) 100%);
}
/* Auf breiten Schirmen steht rechts echter Platz zur Verfuegung — dort darf
   das Abzeichen deutlich mehr zeigen. */
@media (min-width: 1200px) {
  .friends-band::after {
    background: linear-gradient(100deg,
                var(--dark) 0%, var(--dark) 48%,
                rgba(17,17,17,.78) 66%, rgba(17,17,17,.45) 100%);
  }
}
.friends-band > * { position: relative; z-index: 1; }
.friends-kopf .section-head { margin-bottom: 0; }

/* Auf dem Handy waere das Logo hinter dem Text nur noch Unruhe: Es sitzt
   dort oben als Streifen, der Text beginnt darunter im Dunkeln. */
@media (max-width: 760px) {
  /* Das Abzeichen ganz zeigen statt anschneiden — ein halb abgeschnittener
     Schriftzug sieht nach Fehler aus, nicht nach Absicht. */
  .friends-band::before {
    inset: 8px 0 auto 0; height: 190px;
    background-position: center top;
    background-size: contain; opacity: 1;
  }
  .friends-band::after {
    background: linear-gradient(180deg,
                rgba(17,17,17,0) 0%, rgba(17,17,17,0) 150px,
                var(--dark) 205px, var(--dark) 100%);
  }
  .friends-band .wrap { padding-top: 200px; }
}

/* Im dunklen Streifen brauchen die Faktenzeilen helle Linien. */
.friends-band .facts .fact { border-color: rgba(255,255,255,.16); }
.friends-band .facts dt { color: rgba(255,255,255,.62); }
.friends-band .acc { border-color: rgba(255,255,255,.16); }
.friends-band .acc details { border-color: rgba(255,255,255,.16); }
.friends-band .acc summary { color: #fff; }

/* Pfeil an Knöpfen, die die Website verlassen. Er steht etwas kleiner und
   zurückgenommen — ein Hinweis, keine zweite Botschaft. */
.btn__extern { margin-left: 2px; font-size: .9em; opacity: .75; }

/* Kurzinfo im Kalender: eine Zeile für das, was der Titel nicht sagt.
   Bewusst klein — der Kalender bleibt eine Übersicht, kein Programmheft. */
.cal__info { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   Sponsorenwand
   24 Logos aus 24 Werkstätten: verschiedene Formate, Hintergründe, Qualitäten.
   Dieselbe weisse Kachel mit abgerundeten Ecken und demselben Innenabstand
   bringt sie auf eine Linie, ohne eines zu bevorzugen. Die Logos werden nur
   eingepasst, nie beschnitten — ein angeschnittenes Firmenlogo wäre ein
   Affront gegen den, der dafür bezahlt.
   ========================================================================== */
.sponsoren {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px)  { .sponsoren { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .sponsoren { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sponsoren { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sponsor {
  display: flex; align-items: center; justify-content: center;
  /* Die Logos sind bis 520 Pixel breit. Ohne min-width:0 ist die Kachel als
     Rasterfeld so breit wie ihr Logo — Safari hat die Spalte darauf
     aufgeblasen, während der Seitenkopf bei der Bildschirmbreite blieb. Genau
     das sah man: Gerteis, Schweizer und Brossi standen rechts heraus. */
  min-width: 0;
  aspect-ratio: 5 / 3; padding: 18px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* Das Bild füllt die Kachel und wird von object-fit: contain hineingepasst —
   es kann also gar nicht breiter werden als die Kachel. Vorher stand hier
   width:auto mit max-width und max-height: Dabei rechnet der Browser die
   Breite aus dem Seitenverhältnis und muss sie danach ein zweites Mal
   begrenzen. Safari tut das bei einem Elternteil mit aspect-ratio nicht
   zuverlässig — ein Logo mit Seitenverhältnis 4.4 (Max Schweizer) wurde so
   breiter als seine Kachel. Diese Fassung hat den zweiten Schritt nicht
   nötig. Zugeschnitten wird weiterhin nichts. */
.sponsor img {
  width: 100%; height: 100%; min-width: 0;
  object-fit: contain;
}
a.sponsor:hover, a.sponsor:focus-visible {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
}

/* ==========================================================================
   Logoband auf der Startseite
   Eine einzige Zeile, die langsam durchläuft. So bekommen 24 Logos ihren
   Auftritt, ohne dass die Startseite um einen halben Bildschirm wächst.
   ========================================================================== */
.logoband__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.logoband {
  overflow: hidden;
  /* Ausblenden an beiden Rändern: das Band hört nicht auf, es zieht weiter */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logoband__lauf { display: flex; width: max-content; animation: logolauf 80s linear infinite; }
.logoband:hover .logoband__lauf { animation-play-state: paused; }
.logoband__spur { display: flex; align-items: center; gap: 12px; padding-right: 12px; }
.logoband__spur img {
  height: 64px; width: 132px; object-fit: contain;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px;
  flex: none;
}
@keyframes logolauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt keine — dann lässt
   sich das Band von Hand schieben. */
@media (prefers-reduced-motion: reduce) {
  .logoband { overflow-x: auto; }
  .logoband__lauf { animation: none; }
}

/* --- Wochenplan: eigenes Training vs. Gast ------------------------------
   Die Kader-Trainings von Swiss Cycling stehen im Plan, weil die Bahn dann
   belegt ist. Sie treten aber zurück — wer ein Powerbike-Training sucht,
   soll nicht erst aussortieren müssen. */
.slot--eigen { border-left: 3px solid var(--tuerkis); }
.slot--fremd { opacity: .62; border-left: 3px solid var(--line); }
.slot--fremd:hover, .slot--fremd:focus-within { opacity: 1; }
.slot__herkunft {
  display: block; margin: 2px 0 6px;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted);
}

/* ==========================================================================
   Ämtli-Karten: zugeklappt eine Liste, aufgeklappt der ganze Auftrag
   ========================================================================== */
.amt-klapp > summary { list-style: none; cursor: pointer; }
.amt-klapp > summary::-webkit-details-marker { display: none; }
.amt-klapp__kopf:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--r-md); }
/* Das Pluszeichen zum Aufklappen. Vorher stand hier ein dünner grauer
   Haken — der ging zwischen Emoji, Titel und Nummernschild schlicht unter,
   und damit auch die Information, dass hinter der Karte noch Details
   stecken. Jetzt ein farbiger Kreis, der beim Öffnen zum × dreht. */
.amt-klapp__plus {
  margin-left: auto; flex: none; position: relative;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--violett-hell);
  box-shadow: 0 0 0 4px rgba(155, 107, 255, .15);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.amt-klapp__plus::before, .amt-klapp__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: #14141A; border-radius: 2px;
  transform: translate(-50%, -50%);
}
.amt-klapp__plus::before { width: 15px; height: 2.5px; }
.amt-klapp__plus::after  { width: 2.5px; height: 15px; }
.amt-klapp__kopf:hover .amt-klapp__plus {
  background: #B48CFF; box-shadow: 0 0 0 6px rgba(155, 107, 255, .22);
}
/* Offen: gedreht zum ×, und ruhig — die Karte spricht jetzt selber. */
.amt-klapp[open] .amt-klapp__plus {
  transform: rotate(45deg);
  background: rgba(255, 255, 255, .22); box-shadow: none;
}
.amt-klapp[open] .amt-klapp__plus::before,
.amt-klapp[open] .amt-klapp__plus::after { background: #E8E8EE; }
.amt-klapp[open] .amt-klapp__kopf:hover .amt-klapp__plus {
  transform: rotate(45deg); background: rgba(255, 255, 255, .34); box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .amt-klapp__plus { transition: none; }
}
.amt-klapp__inhalt { padding-top: 14px; }

/* «In Entwicklung»: sichtbar, aber sichtbar unfertig. Übernehmen geht
   trotzdem — wer sich meldet, schreibt die Beschreibung mit. */
.amt-bereich--entwurf .amt-karten { opacity: .58; }
.amt-bereich--entwurf .amt-karten:hover,
.amt-bereich--entwurf .amt-karte:focus-within { opacity: 1; }
.amt-karte--entwurf { border-style: dashed; }
.amt-entwurf {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px dashed currentColor;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .8;
}

/* Abonnieren direkt am Trainingsslot — dort fällt die Entscheidung.
   Dahinter steckt immer der Gruppenkalender, nie der einzelne Termin:
   AllRiders am Montag, Mittwoch und Freitag ist ein Abo, nicht drei. */
/* Die Knoepfe fuellen die Karte. Als inline-flex waren sie so breit wie ihr
   Text — in der schmalsten Wochenspalte (121 px innen) ergab das 129 px und
   der Knopf stand 25 px ueber den Rand hinaus, bei allen dreizehn. Ueber die
   volle Breite passt er immer, ist leichter zu treffen und sieht gewollt aus. */
.slot__abos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
/* Gefuellt statt nur umrandet: Der Knopf ist der eine Handgriff, wegen dem
   jemand auf dieser Seite ist — das Training im eigenen Kalender zu haben.
   Als blasse Umrandung sah er aus wie ein Etikett und wurde uebersehen. */
.slot__abo {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; max-width: 100%; text-align: center;
  padding: 8px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--tuerkis);
  background: var(--tuerkis); color: #fff;
  font-size: .86rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tuerkis) 30%, transparent);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.slot__abo::before { content: "＋"; font-weight: 700; opacity: .85; }
.slot__abo:hover, .slot__abo:focus-visible {
  background: var(--tuerkis-dark); border-color: var(--tuerkis-dark);
  transform: translateY(-1px);
}

/* Tastatur offen → die untere Leiste tritt ab.
   Auf dem Handy legt sie sich sonst über das Formularfeld, in das man gerade
   tippt — besonders in eingebetteten Formularen, wo die Seite nicht mitscrollt.
   Gesetzt wird die Klasse von app.js über visualViewport. */
body.tastatur-offen .tabbar { transform: translateY(110%); pointer-events: none; }
.tabbar { transition: transform .18s ease; }

/* Der Saisonkalender steht neben dem Jahreskalender, nicht bei den
   Trainings — er enthaelt Rennen und Anlaesse und kein einziges Training. */
.abo-saison { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
/* Ueber dem Kalender: Der Knopf steht vor den Terminen, nicht hinter ihnen.
   Wer abonnieren will, soll nicht erst ein Jahr lang scrollen. */
.abo-saison--oben { margin: 0 0 28px; padding-top: 0; border-top: 0; }
.abo-saison--oben p { margin: 10px 0 0; }
.abo-saison h3 { margin: 0 0 6px; }
.abo-saison > p { margin: 0 0 18px; max-width: 62ch; color: var(--muted); }

/* Fremde Marke neben den eigenen Knoepfen: das Logo macht wiedererkennbar,
   wohin der Weg fuehrt, bevor jemand klickt. */
.marke { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.marke__logo {
  flex: none; width: 64px; height: 64px; border-radius: var(--r);
  object-fit: contain; background: #0000FF;
}
.marke__text { flex: 1 1 260px; min-width: 0; }
.marke__text .btn-row { margin: 0; }
.marke__text > p { margin: 10px 0 0; }

/* Die Weltmeister-Videos. Sie liegen im dunklen Abschnitt, darum helle
   Schrift — und je Video eine Zeile Herkunft, weil sie nicht von uns sind. */
.wm-videos {
  display: grid; gap: 22px; margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.wm-video { margin: 0; }
.wm-video figcaption {
  display: flex; flex-direction: column; gap: 2px; margin-top: 10px;
  line-height: 1.45;
}
.wm-video figcaption strong { font-size: 1.02rem; }

/* Hochkant-Video (YouTube Short). Es beginnt eine eigene Zeile und bleibt
   schmal — sonst stuende ein 9:16-Video in einem 16:9-Rahmen und haette
   links und rechts schwarze Balken. */
.wm-video--hoch { grid-column: 1 / -1; max-width: 320px; }
.wm-video--hoch .einbett__start,
.wm-video--hoch .einbett iframe { aspect-ratio: 9 / 16; }
.wm-video figcaption span { font-size: .9rem; opacity: .8; }

/* ---------------------------------------------------- Kontaktformular -- */
/* Eigenes Formular statt eines fremden Rahmens: schmal, wenige Felder,
   und die Empfaengerwahl zuerst — wer schreibt, denkt zuerst an das
   Gegenueber, nicht an sich. */
.kform { margin: 0; }
.kform__zeile {
  display: grid; gap: 14px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.kform__feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kform__feld--voll { grid-column: 1 / -1; }
.kform__feld > span {
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.kform input, .kform select, .kform textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); min-width: 0;
}
.kform textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.kform input:focus, .kform select:focus, .kform textarea:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent;
}
.kform .btn { margin-top: 4px; }
.kform__fuss { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }
/* Der Koeder muss fuer Maschinen erreichbar, fuer Menschen unsichtbar sein.
   display:none wuerde von manchen Robotern erkannt. Frueher stand hier
   left:-9999px — das kann die Seite nach links aufziehen. clip-path haelt
   das Feld an Ort und Stelle und trotzdem unsichtbar. */
.kform { position: relative; }
.kform__koeder {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Auswahl am Gesicht. Die Kaestchen bleiben echte Kaestchen — sie liegen
   nur unsichtbar unter dem Bild. Ohne JavaScript, ohne ARIA-Bastelei:
   Tastatur, Vorlesegeraet und Formularversand funktionieren von selbst. */
/* Mailadressen stehen rueckwaerts im Quelltext (siehe mails_verstecken in
   build.py). bidi-override dreht sie am Bildschirm zurueck — gelesen wird
   «marketing@powerbike.ch», im Quelltext steht «hc.ekibrewop@gnitekram».
   Beim Kopieren mit der Maus kommt die gedrehte Fassung mit; darum baut das
   JavaScript zusaetzlich einen echten mailto-Verweis. */
.mail__r { unicode-bidi: bidi-override; direction: rtl; }
a.mail[href] { cursor: pointer; }

/* Der Aufruf an die Eltern steht als eigene Box unter der Liste — nicht
   als Kleingedrucktes. Wer ihn liest, soll ihn als Einladung lesen. */
.riders__aufruf {
  margin-top: 26px; padding: 20px 22px;
  border: 1px solid var(--line); border-left: 4px solid var(--akzent);
  border-radius: var(--r-sm); background: var(--bg);
}
.riders__aufruf p { margin: 0; font-size: 1.02rem; }
.riders__aufruf p + p { margin-top: 8px; font-size: .88rem; }
.riders__aufruf a { color: var(--akzent); font-weight: 600; }

/* «Vergangene Tage zeigen» — nur am Handy sichtbar, ruhig gehalten.
   Es ist ein Nachschlagen, kein Hauptweg. */
.week__frueher {
  display: block; width: 100%; margin: 0 0 12px; padding: 11px 14px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.week__frueher:hover { border-color: var(--akzent); color: var(--ink-2); }
@media (min-width: 761px) { .week__frueher { display: none; } }

/* Der Anriss auf der Startseite: EIN Beitrag, gross genug, dass Bild,
   Titel und Anrisstext zusammen wirken. Vorher standen hier drei Karten
   nebeneinander — auf der wichtigsten Seite des Vereins zu viel Gedraenge. */
.anriss {
  display: grid; gap: 0; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, border-color .18s;
}
.anriss:hover { box-shadow: var(--shadow); border-color: transparent; }
.anriss__bild { display: block; overflow: hidden; background: var(--surface); }
.anriss__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 16 / 10; transition: transform .4s ease;
}
.anriss:hover .anriss__bild img { transform: scale(1.03); }
.anriss__text {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 26px 24px 24px;
}
.anriss__text h3 {
  margin: 0; font-size: clamp(1.3rem, 3.4vw, 1.9rem); line-height: 1.15;
}
.anriss__text p { margin: 0; color: var(--ink-2); }
.anriss .card__foot { margin-top: 4px; }
@media (min-width: 760px) {
  .anriss { grid-template-columns: 46% 1fr; align-items: stretch; }
  /* Festes Verhaeltnis statt «so hoch wie das Bild». Das WM-Plakat ist
     hochkant — ohne Deckel waere der Anriss 660 Pixel hoch geworden und
     haette die halbe Startseite gefuellt. */
  .anriss__bild { aspect-ratio: 4 / 3; }
  .anriss__bild img { height: 100%; aspect-ratio: auto; }
  .anriss__text { padding: 34px 34px 32px; justify-content: center; }
}

/* Der gezeichnete Helm steht anstelle eines Fotos. Er ist ein SVG und
   traegt dieselbe Klasse wie das Bild, damit Groesse und Rundung stimmen. */
.riders__photo.helm { padding: 0; background: none; object-fit: fill; }

/* Leere Riders-Gruppe: das Kaestchen bleibt stehen, die Zeile darin
   erklaert warum. Weglassen wuerde so aussehen, als gaebe es die Gruppe nicht. */
.riders__leer { margin: 0; padding: 16px 18px 18px; font-size: .92rem; color: var(--muted); }
.riders__anzahl--leer { color: var(--muted); font-weight: 600; }

.kform__wahl { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.kform__wahl legend {
  padding: 0; margin-bottom: 12px;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
/* Feste Spaltenzahl statt auto-fit: Bei acht Koepfen ergab auto-fit eine
   Reihe zu sieben und einen einsamen Nachzuegler. Drei bzw. vier Spalten
   teilen jede Vorstandsgroesse ruhig auf. */
.kform__koepfe { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 560px) { .kform__koepfe { grid-template-columns: repeat(4, 1fr); } }
.kkopf {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 12px 6px 10px; text-align: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.kkopf input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  clip-path: inset(50%); margin: 0; padding: 0;
}
.kkopf__bild {
  display: block; width: 56px; height: 56px; border-radius: 999px;
  overflow: hidden; background: var(--line);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 2px transparent;
  transition: box-shadow .15s;
}
.kkopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kkopf__bild--leer {
  display: grid; place-items: center; font-weight: 800; color: var(--muted);
}
.kkopf__name { font-weight: 700; font-size: .86rem; line-height: 1.2; }
.kkopf__rolle {
  font-size: .72rem; color: var(--muted); line-height: 1.25;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.kkopf:hover { border-color: var(--akzent); }
/* Gewaehlt: Rahmen, Flaeche UND ein Haken. Wer Farben schlecht
   unterscheidet, sieht trotzdem, was angetippt ist. */
.kkopf:has(input:checked) {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 9%, var(--bg));
}
.kkopf:has(input:checked) .kkopf__bild {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--akzent);
}
.kkopf:has(input:checked)::after {
  content: "\2713"; position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--akzent); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center;
}
.kkopf:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Aeltere Browser ohne :has() — dort bleibt das Kaestchen sichtbar,
   damit die Auswahl nicht unsichtbar wird. */
@supports not selector(:has(*)) {
  .kkopf input { position: static; width: auto; height: auto; opacity: 1; clip-path: none; }
}
.kkopf--wa { border-style: dashed; }
.kkopf--wa:hover { border-color: #0B6B4F; }
.kkopf--wa .kkopf__rolle { color: #0B6B4F; font-weight: 700; }
.kkopf--wa svg { flex: none; }

/* Der Kontaktkopf auf hellem Grund — dieselbe Form wie auf den dunklen
   Ämtli-Karten, nur mit lesbaren Farben. */
.amt-kopf--hell { border-top-color: var(--line); color: var(--ink); }
.amt-kopf--hell .amt-kopf__bild { background: var(--surface-2);
  box-shadow: 0 0 0 2px var(--line); }
.amt-kopf--hell .amt-kopf__text strong { color: var(--ink); }
.amt-kopf--hell .amt-kopf__text span { color: var(--akzent); font-weight: 600; }
.amt-kopf--hell:hover .amt-kopf__bild { box-shadow: 0 0 0 2px var(--akzent); }
.amt-kopf--hell:hover .amt-kopf__text span { color: var(--ink); }

.kform__alle {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; font-weight: 700; cursor: pointer; background: var(--bg);
}
.kform__alle input { accent-color: var(--akzent); width: 16px; height: 16px; }
.kform__alle:has(input:checked) {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 9%, var(--bg));
}
.kform__hinweis { margin: 12px 0 0; font-size: .86rem; color: var(--muted); }

/* Wer keine Mailadresse hat, bekommt seinen eigenen Kanal. */
.kform__wa {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .92rem;
  color: #0B6B4F; background: #E4F7EE; border: 1px solid #A8DCC4;
}
.kform__wa:hover { border-color: #0B6B4F; }

/* Leiser Link: fuer Wege, die es geben muss, aber niemand bewerben will —
   der Austritt zum Beispiel. Farbe erst beim Darauffahren. */
.leise-link {
  color: var(--ink-2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line);
  white-space: nowrap;
}
.leise-link:hover { color: var(--rot); text-decoration-color: currentColor; }
.leise-link::after { content: "\2197"; margin-left: 3px; font-size: .9em; }

/* Die Kachel, die zuerst gelesen werden soll. Nur ein Strich in der
   Akzentfarbe und ein festerer Titel — keine Signalfarbe, sonst schreit
   sie die vier daneben nieder. */
.card--betont { border-color: color-mix(in srgb, var(--akzent) 45%, var(--line)); }
.card--betont h3 { color: var(--akzent); }
/* Im Hero liegt der Text auf einem Foto und ist absichtlich leicht
   zurueckgenommen. Was fett ist, soll trotzdem voll weiss stehen. */
.hero p strong { color: #fff; }

/* ===========================================================================
   Pistenbelegung — die Woche auf der Anlage, zum Blättern.

   Grosse Blöcke statt Trainingsdetails: draussen muss man wissen, WANN die
   Piste belegt ist, nicht wer darauf fährt. Das Raster ist eine CSS-Grid aus
   Halbstunden-Zeilen; jeder Block spannt über so viele Zeilen, wie er dauert.
   =========================================================================== */
.piste { margin-top: 32px }
.piste__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.piste__pfeil, .piste__heute {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 999px; cursor: pointer; font: inherit; line-height: 1;
  min-height: 44px; min-width: 44px; padding: 0 14px;
}
.piste__pfeil { font-size: 1.3rem }
.piste__heute { font-size: .85rem; min-width: 0; margin-left: auto }
.piste__pfeil:hover, .piste__heute:hover { border-color: var(--ink) }
.piste__spanne { font-weight: 600; font-variant-numeric: tabular-nums }
/* Monatsleiste: Wer im Februar nachschauen will, musste bisher zwanzigmal
   auf den Pfeil tippen. Auf dem Handy laesst sie sich seitlich schieben —
   darum der negative Rand, damit die Kacheln den Seitenrand beruehren. */
.piste__monate {
  display: flex; gap: 6px; margin: 0 -4px 14px; padding: 0 4px 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.piste__monate::-webkit-scrollbar { display: none }
.piste__monat {
  flex: none; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .82rem;
  font-weight: 600; min-height: 38px; cursor: pointer; white-space: nowrap;
}
.piste__monat:hover { border-color: var(--ink) }
.piste__monat.ist-aktiv { background: var(--ink); border-color: var(--ink); color: #fff }

.piste__gitter {
  display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr));
  gap: 6px; align-items: start;
}
.piste__zeiten, .piste__spalte {
  display: grid; grid-template-rows: repeat(var(--zeilen), 17px);
}
.piste__zeiten { padding-top: 30px }
.piste__zeit {
  font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums;
  line-height: 1; text-align: right; padding-right: 6px;
}
.piste__kalender {
  font-size: .78rem; color: var(--muted); text-align: center; height: 26px;
  line-height: 26px; white-space: nowrap;
}
.piste__kalender b { color: var(--ink) }
.piste__spalte {
  position: relative; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.piste__tag--we .piste__spalte { background: color-mix(in srgb, var(--surface) 60%, transparent) }
.piste__tag--heute .piste__kalender b { color: var(--accent) }
.piste__tag--heute .piste__spalte { border-color: var(--accent) }

.piste__block {
  grid-column: 1; margin: 1px 2px; border-radius: 7px; padding: 3px 6px;
  overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  font-size: .68rem; line-height: 1.25; min-width: 0;
}
.piste__block b { font-variant-numeric: tabular-nums; font-size: .66rem; opacity: .75 }
.piste__block span { font-weight: 600; overflow: hidden; text-overflow: ellipsis }
.piste__block--eigen { background: #12897C; color: #fff }
.piste__block--gast { background: #D8DEE4; color: #24313D }
.piste__block--sperre { background: #c8102e; color: #fff }

/* Die Mittagspause ist keine Belegung, sondern eine Regel — darum liegt sie
   als Schraffur UNTER den Blöcken und trägt keine Fläche. */
.piste__mittag {
  grid-column: 1; z-index: 0; display: flex; align-items: center;
  justify-content: center; font-size: .6rem; color: var(--muted);
  background: repeating-linear-gradient(135deg,
    transparent 0 5px, color-mix(in srgb, var(--muted) 22%, transparent) 5px 7px);
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
}
.piste__mittag span { background: var(--surface); padding: 0 3px; border-radius: 3px }
.piste__notiz { font-size: .7rem; color: var(--muted); text-align: center; margin: 5px 0 0 }

.piste__legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px }
.piste__punkt {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  vertical-align: -1px; margin-right: 6px;
}
.piste__punkt--eigen { background: #12897C }
.piste__punkt--gast { background: #D8DEE4 }
.piste__punkt--mittag {
  background: repeating-linear-gradient(135deg,
    transparent 0 3px, color-mix(in srgb, var(--muted) 45%, transparent) 3px 5px);
  border: 1px dashed var(--line);
}
.piste__fuss { margin-top: 10px }

/* Auf dem Telefon wird aus den sieben Spalten ein Band zum Wischen. Sieben
   Spalten auf 375 Pixeln wären 45 Pixel je Tag — da liest niemand mehr. */
@media (max-width: 760px) {
  .piste__raster { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px }
  .piste__gitter { grid-template-columns: 44px repeat(7, 96px); min-width: 740px }
}
/* Geteilte Spalte: dann ist für die Uhrzeit kein Platz mehr, der Name zählt. */
.piste__block--schmal { padding: 3px 4px; font-size: .62rem }
.piste__block--schmal b { display: none }

/* Schulferien im Belegungsplan: warm eingefärbt, mit Namen darunter. Dass
   Ferien sind, muss man sehen — ob trotzdem trainiert wird, steht dabei. */
.piste__tag--ferien .piste__kalender { color: #8a5a00 }
.piste__tag--ferien .piste__kalender b { color: #8a5a00 }
.piste__tag--ferien .piste__spalte { background: #FDF3E3; border-color: #E3C999 }
.piste__notiz--ferien { color: #8a5a00; font-weight: 600 }
.piste__notiz--ferien b { display: block; font-weight: 600; color: var(--muted); margin-top: 2px }
.piste__ferien {
  margin: 8px 0 0; font-size: .8rem; color: #6b4e00;
  background: #FDF3E3; border: 1px solid #E3C999; border-radius: 9px; padding: 7px 11px;
}
.piste__ferien b { font-family: var(--f-display) }

/* Ein Hinweis, der nur eine Karte betrifft. Warm statt rot: Es ist keine
   Warnung, sondern eine Auskunft — und sie steht vor dem Knopf, nicht
   daneben. */
.amt-karte__hinweis {
  margin: 14px 0 0; padding: 10px 13px;
  background: rgba(255, 214, 102, .12);
  border-left: 3px solid rgba(255, 214, 102, .55);
  border-radius: 0 10px 10px 0;
  font-size: .86rem; line-height: 1.45; color: #E8DCBF;
}
/* Ein Platz auf einer Karte, deren Crew steht: kein Angebot mehr, aber auch
   kein Fehler — darum ruhig statt leer. */
.amt-platz--zu {
  background: rgba(255,255,255,.05); color: rgba(242,242,244,.45);
  border: 1px dashed rgba(255,255,255,.14); cursor: default;
}

/* Jersey-Sponsor auf der Riderkarte. Eine kleine Plakette, kein Satz: Sie
   soll gelesen werden, aber den Namen des Kindes nicht überstimmen. Darum
   gedämpft, mit feinem Rand — und nur da, wo es einen Sponsor gibt. */
.riders__sponsor {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 100%; margin-top: 2px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2); line-height: 1.35;
  overflow-wrap: anywhere;
}
.riders__sponsorlogo { display: block; height: 14px; width: auto; max-width: 110px; }
.riders__sponsor--link { text-decoration: none; transition: border-color .12s, color .12s; }
.riders__sponsor--link:hover { border-color: var(--red); color: var(--red); }
.riders__sponsor--link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* In der Legende steht ein Musterexemplar der Sponsor-Plakette — gleiche
   Form, gleiche Schrift, nur mit dem Wort «Name» darin. So sieht man, wonach
   man auf den Kacheln sucht, statt es sich aus einer Beschreibung
   zusammenzureimen. */
.legende__marke {
  display: inline-flex; align-items: center; margin-right: 6px;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2); line-height: 1.35;
}

/* Die Plakette trägt zwei Zeilen: winzig das Wort, darunter der Name. So ist
   ohne Legende klar, was dasteht — und der Name bleibt trotzdem das, was man
   zuerst sieht. */
.riders__sponsor { padding: 3px 9px; }
/* In der Legende steht das Wort allein in der Plakette — dort ist es die
   Erklaerung. Auf den Kacheln steht nur der Name. */
.legende__marke { flex-direction: column; gap: 0; padding: 3px 9px; }
.riders__sponsorwort {
  font-size: .5rem; font-weight: 700; letter-spacing: .09em;
  color: var(--muted); line-height: 1.3;
}
.riders__sponsorname {
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  color: var(--ink-2); line-height: 1.3;
}
.riders__sponsor--link:hover .riders__sponsorname { color: var(--red); }
.legende__marke { flex-direction: column; gap: 0; padding: 3px 9px; }