/* =========================================================================
   Basketball Aid RegioTeam Stuttgart
   Design-System — Farben und Typografie siehe docs/DESIGN.md
   ========================================================================= */

:root {
  /* Marke — aus dem Logo ausgelesen */
  --orange: #f28b00;
  --orange-dark: #d47b00;
  --bordeaux: #98272d;
  --bordeaux-dark: #7d1f24;
  --ink: #2a1416;
  --white: #fff;
  --paper: #f7f3f0;
  --line: rgba(42, 20, 22, 0.14);
  --line-light: rgba(255, 255, 255, 0.22);

  /* Schrift */
  --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-text: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  /* Comic-Schrift, bewusst nur fuer den Spendenreiter reserviert. */
  --font-pop: 'Bangers', 'Archivo', Impact, sans-serif;

  /* Raster */
  --wrap: 1280px;
  --gap: 1.5rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  --shadow: 0 18px 40px -24px rgba(42, 20, 22, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height: auto ist hier keine Kosmetik: Die Bilder tragen im Quelltext
   width- und height-Angaben, damit der Browser den Platz kennt, bevor das
   Bild da ist. Ohne height: auto bleibt diese feste Höhe stehen, sobald
   die Breite per CSS schrumpft — das Bild wird dann zum Hochformat und ein
   angegebenes aspect-ratio greift gar nicht mehr. Auf dem Handy war der
   Fernsehbildschirm dadurch 291 statt 164 Pixel hoch. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

/* Für Überschriften, die der Struktur wegen da sind, aber nicht sichtbar
   sein sollen — bleiben für Screenreader lesbar, anders als [hidden]. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Typografie ---------------------------------------------------------- */

/* Der ALBA-Effekt: Versalien, kondensiert, Zeilenabstand 1.0.
   Die Zeilen stehen auf Block — das erzeugt die Plakatwirkung. */
.display,
h1, h2, h3, .site-footer__head {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}

h1, .display--xl { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2, .display--l  { font-size: clamp(2rem, 4.4vw, 3.45rem); }
h3, .display--m  { font-size: clamp(1.35rem, 2.2vw, 2rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

.eyebrow--ink { color: var(--bordeaux); }

/* --- Platzhalter ausblenden -------------------------------------------- */

/* Solange ein Bild noch der erzeugte Platzhalter ist (gestreift, mit Dateiname
   und Maßen darin), zeigt die Website es nicht — solche Arbeitshinweise sind
   nichts für Besucher. Liegt das echte Foto unter demselben Namen, in der
   Seite das Attribut data-platzhalter entfernen: dann erscheint es.
   Welche Plätze noch offen sind, steht in docs/PLATZHALTER.md. */
[data-platzhalter] { display: none; }
/* Trainerkarten: Statt des Platzhalterfotos eine gleich große ruhige Fläche
   mit dem RegioTeam-Logo — so bleibt das Raster gleichmäßig, wenn erst
   einzelne echte Fotos da sind. Name und Rolle bleiben stehen. */
.person[data-platzhalter] { display: block; }
.person[data-platzhalter] img { display: none; }
.person[data-platzhalter]::before {
  content: '';
  display: block;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  background: var(--white) url('../img/logos/regioteam-logo.png') center / 38% no-repeat;
  border: 1px solid var(--line);
}
/* Ein Abschnitt, der nur aus dem Platzhalter bestand (Teamfoto), fällt ganz weg. */
.section:has(> .wrap > [data-platzhalter]:only-child) { display: none; }
/* Kachel im Kartenstapel ohne Trainerfoto: ruhige Fläche statt Streifen. */
.projektkachel__bild[data-platzhalter] {
  display: block;
  background: var(--white) url('../img/logos/regioteam-logo.png') center / 34% no-repeat;
}

/* --- Buttons ------------------------------------------------------------- */

/* Pop-Art wie beim Spendenreiter: harte Kontur, versetzter Schatten ohne
   Weichzeichnung. Beim Überfahren hebt sich die Fläche vom Schatten ab, beim
   Klicken sinkt sie darauf herunter — die Bewegung erklärt den Schatten.
   Die Schräglage bleibt dem Reiter vorbehalten; auf Fließtextseiten würde
   sie unruhig wirken. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 3px solid var(--ink);
  border-radius: 0.45rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
  transition:
    transform 0.16s var(--ease),
    box-shadow 0.16s var(--ease),
    background-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.btn::after {
  content: '→';
  font-family: var(--font-text);
  font-weight: 400;
  transition: transform 0.18s var(--ease);
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.85);
}
.btn:hover::after { transform: translateX(4px); }

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 rgba(42, 20, 22, 0.85);
}

/* Orange Grund, Text in Tinte — 7.0:1. Orangener Text auf Weiß wäre 2.5:1
   und ist deshalb nirgends erlaubt. */
.btn--primary {
  background: var(--orange);
  color: var(--ink);
}
.btn--primary:hover { background: #ffa428; }

/* Auf dunklem Grund dreht sich das Prinzip um: Kontur und Schatten in Weiß. */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.5);
}
.btn--ghost:hover {
  background: var(--white);
  color: var(--ink);
  box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.5);
}
.btn--ghost:active { box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); }

/* Für helle Flächen und das orange Aufruf-Band. */
.btn--ink {
  background: var(--white);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ink:hover { background: var(--ink); color: var(--white); }

/* Im Kopfbereich etwas kompakter, sonst drückt der Schatten die Zeile auf. */
.site-nav__cta {
  padding: 0.7rem 1.2rem;
  box-shadow: 4px 4px 0 rgba(42, 20, 22, 0.85);
}
.site-nav__cta:hover { box-shadow: 6px 6px 0 rgba(42, 20, 22, 0.85); }
.site-nav__cta:active { box-shadow: 1px 1px 0 rgba(42, 20, 22, 0.85); }

/* --- Kanalleiste ganz oben ----------------------------------------------- */

/* Schmales Band über der Navigation. Es klebt bewusst nicht: beim Scrollen
   bleibt nur die Navigationsleiste stehen, die Kanäle rollen weg. */
.sozialleiste {
  background: var(--bordeaux);
  color: var(--white);
}

.sozialleiste__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  /* Alles nach rechts: Links ragt das vergroesserte Logo in die Leiste
     hinein — dort stuende der Sprachumschalter halb dahinter. */
  justify-content: flex-end;
  gap: 0.75rem;
}

.sozial {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2,75 rem sind 44 Pixel — das Maß, das Apple und die Barrierefreiheits-
   Richtlinien als Mindestgröße für Tippziele nennen. Auf dem Handy wird mit
   dem Daumen getroffen, nicht mit dem Mauszeiger. Die Fläche ist größer als
   das Symbol darin; das ist Absicht. */
.sozial__link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
.sozial__link svg { width: 1.6rem; height: 1.6rem; display: block; }

a.sozial__link:hover,
a.sozial__link:focus-visible {
  color: var(--orange);
  transform: translateY(-1px);
}

/* Noch keine Adresse hinterlegt: Symbol bleibt stehen, ist aber sichtbar
   als offene Stelle markiert — dieselbe Sprache wie .todo im Fließtext. */
.sozial__link--offen {
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 2px solid var(--orange);
  cursor: default;
}

/* Auf breiten Bildschirmen steht DE | EN in der Navigation — dort ist es
   sichtbar. Die Fassung in der Leiste bleibt bis 1080 px ausgeschaltet.

   Der Elternwähler .sozialleiste ist nötig: Die Grundregel für .lang-switch
   steht weiter unten in der Datei und setzt display: flex. Bei gleicher
   Spezifität gewinnt die spätere Regel — ohne ihn stünden beide Umschalter
   gleichzeitig da. */
.sozialleiste .lang-switch { display: none; }

@media (max-width: 1080px) {
  .sozialleiste .lang-switch {
    display: flex;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
  }
  .sozialleiste .lang-switch a {
    color: rgba(255, 255, 255, 0.8);
    /* Großzügige Fläche: Auf dem Handy wird mit dem Daumen getroffen,
       nicht mit dem Mauszeiger. */
    padding: 0.55rem 0.7rem;
  }
  .sozialleiste .lang-switch a:hover { color: var(--white); }
  .sozialleiste .lang-switch a[aria-current] {
    color: var(--white);
    box-shadow: inset 0 -3px 0 var(--orange);
  }

  /* Im aufgeklappten Menü wäre er ein zweites Mal da. */
  .site-nav .lang-switch { display: none; }
}

@media (max-width: 640px) {
  .sozialleiste__inner { width: min(100% - 1.5rem, var(--wrap)); }
}

/* Kanalsymbole im Kopfbereich — nur auf schmalen Bildschirmen, dort steht
   zwischen Logo und Menue-Knopf weisse Flaeche frei. Auf weissem Grund
   brauchen sie andere Farben als in der Bordeaux-Leiste. */
.kopf-sozial { display: none; }

@media (max-width: 1080px) {
  .kopf-sozial {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0.35rem;
  }
  .kopf-sozial .sozial__link { color: var(--bordeaux); }
  .kopf-sozial a.sozial__link:hover,
  .kopf-sozial a.sozial__link:focus-visible { color: var(--orange-dark); }
  .kopf-sozial .sozial__link--offen {
    color: rgba(42, 20, 22, 0.3);
    border-bottom-color: var(--orange);
  }

  /* In der Leiste oben bleibt dann nur noch DE | EN. */
  .sozialleiste .sozial-nav { display: none; }
}

/* Nachgemessen bei 375 Pixeln: Zwischen Logo und Menü-Knopf bleiben nach den
   drei Symbolen noch 24 und 26 Pixel Luft. Erst unter 340 Pixeln — alte
   iPhone SE und ähnliches — wird es zu eng; dort lieber etwas kleiner als
   umgebrochen. */
@media (max-width: 340px) {
  .kopf-sozial { margin-right: 0.1rem; }
  .kopf-sozial .sozial__link { width: 2.25rem; height: 2.25rem; }
  .kopf-sozial .sozial__link svg { width: 1.3rem; height: 1.3rem; }
}

/* --- Kopfbereich --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px -14px rgba(42, 20, 22, 0.5); }

.site-header__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-right: auto;
}
/* Oben auf der Seite steht das Logo groß auf einem weißen Schild mit
   Tinte-Kontur und hartem Schatten — dieselbe Formensprache wie bei den
   Schaltflächen. Der negative Rand oben lässt es in die Kanalleiste
   hineinragen, ohne den Kopfbereich höher zu machen: 104 px Höhe minus
   24 px Rand ergeben wieder die 80 px, die in die Zeile passen.

   Sobald gescrollt wird (.is-stuck), schrumpft es auf seine Normalgröße und
   fügt sich in die weiße Leiste ein — Schild, Kontur und Schatten
   verschwinden mit. */
.brand__mark {
  width: 104px;
  height: 104px;
  object-fit: contain;
  margin-top: -24px;
  padding: 0.3rem;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0.6rem;
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
  transition:
    width 0.28s var(--ease),
    height 0.28s var(--ease),
    margin-top 0.28s var(--ease),
    padding 0.28s var(--ease),
    border-width 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.site-header.is-stuck .brand__mark {
  width: 62px;
  height: 62px;
  margin-top: 0;
  padding: 0;
  border-width: 0;
  border-radius: 0.3rem;
  box-shadow: none;
}

.brand__claim {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--bordeaux);
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  max-width: 16rem;
  transition:
    max-width 0.28s var(--ease),
    opacity 0.18s var(--ease),
    font-size 0.28s var(--ease);
}

/* Beim Scrollen verschwindet der Zusatz — im verkleinerten Logo steht er
   ohnehin mit drin. */
.site-header.is-stuck .brand__claim {
  max-width: 0;
  opacity: 0;
}
.site-header.is-stuck .brand { gap: 0; }

.brand__claim-line--accent { color: var(--orange-dark); }

@media (prefers-reduced-motion: reduce) {
  .brand__mark,
  .brand__claim { transition: none; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Bewusst gemischte Schreibung statt Versalien: Versalien wirken in der
   Navigation wie Abkürzungen und sind schlechter zu überfliegen. Die Wucht
   der Versalien bleibt den Überschriften vorbehalten — genau so macht es
   auch das Vorbild. */
.site-nav__list > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

/* Kleiner Pfeil an den Punkten, hinter denen sich ein Untermenü verbirgt —
   sonst sieht ein Sammelpunkt wie eine Sackgasse aus. */
.site-nav__list > li > a[data-sub-toggle]::before {
  content: '';
  order: 2;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  opacity: 0.55;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.has-sub:hover > a[data-sub-toggle]::before,
.has-sub:focus-within > a[data-sub-toggle]::before {
  opacity: 1;
  transform: translateY(0.05em) rotate(225deg);
}

.site-nav__list > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease);
}
.site-nav__list > li > a:hover::after,
.site-nav__list > li > a[aria-current]::after { transform: scaleX(1); }

.has-sub { position: relative; }

.site-nav__sub {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -1rem;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--ink);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}

.has-sub:hover .site-nav__sub,
.has-sub:focus-within .site-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__sub a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--white);
  text-decoration: none;
  font-size: 0.975rem;
}
.site-nav__sub a:hover { background: var(--bordeaux); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  padding: 0.6rem 0.9rem;
  background: var(--ink);
  border: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(82vh, 780px);
  background: var(--ink);
  overflow: hidden;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img {
  object-fit: cover;
  object-position: center 32%;
}

/* Der Verlauf macht die Schrift lesbar, ohne das Foto abzudunkeln. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(42, 20, 22, 0.96) 0%, rgba(42, 20, 22, 0.88) 26%, rgba(42, 20, 22, 0.58) 55%, rgba(42, 20, 22, 0.38) 78%, rgba(42, 20, 22, 0.62) 100%);
}

.hero__inner {
  position: relative;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  color: var(--white);
}

/* Die Zeile sitzt im hellsten Bereich des Fotos — dort trägt Orange nicht,
   deshalb steht sie in Weiß. Orange bleibt dem Akzent in der Headline. */
.hero .eyebrow { color: var(--white); }

.hero__title {
  max-width: 17ch;
  margin-block: 0.6rem 1.25rem;
}
.hero__title .accent { color: var(--orange); }

/* Wortwechsel in der Überschrift (main.js): Die Buchstaben des alten Worts
   gleiten versetzt nach oben weg, die des neuen kommen von unten. Alle Wörter
   liegen in derselben Rasterzelle; das längste steht unsichtbar mit darin und
   hält den Platz — so springt die Überschrift beim Wechsel nicht. */
.wortwechsel { display: inline-grid; }
.wortwechsel > * { grid-area: 1 / 1; white-space: nowrap; }
.wortwechsel__platz { visibility: hidden; }
.wortwechsel__b {
  display: inline-block;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease-out;
}
.wortwechsel__b.ist-unten { transform: translateY(0.55em); opacity: 0; }
.wortwechsel__b.ist-oben { transform: translateY(-0.55em); opacity: 0; }

.hero__text {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.9rem;
}

/* --- Seitenkopf der Unterseiten ------------------------------------------ */

.page-head {
  background: var(--bordeaux);
  color: var(--white);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.page-head__title { margin-block: 0.5rem 0.9rem; }
.page-head .lead { max-width: 58ch; color: rgba(255, 255, 255, 0.92); }
.page-head .eyebrow { color: var(--orange); }

/* --- Sektionen ----------------------------------------------------------- */

.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--white); }
.section--bordeaux { background: var(--bordeaux); color: var(--white); }
.section--ink .eyebrow,
.section--bordeaux .eyebrow { color: var(--orange); }

.section__head {
  text-align: center;
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section__head p { margin-top: 1rem; }
.section__head--left {
  text-align: left;
  margin-inline: 0;
}

/* --- Spielplan-Band ------------------------------------------------------ */

.fixtures {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fixtures__col {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--white);
}
/* Nicht :first-child — das erste Kind ist die unsichtbare Überschrift, die
   Spalte bekäme dann gar keine Fläche und weiße Schrift stünde auf Weiß.
   Der Geschwisterwähler trifft immer die zweite Spalte, egal was davor
   im Quelltext steht. */
.fixtures__col { background: var(--bordeaux); }
.fixtures__col + .fixtures__col { background: var(--bordeaux-dark); }

.fixtures__label {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.5rem;
}

/* Im Quelltext stehen alle Spiele der Saison, sichtbar ist eines. Welches,
   entscheidet das Skript beim Öffnen — deshalb stimmt das Band an jedem Tag,
   ohne dass die Seite neu gebaut wird. */
.fixture-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fixture { display: none; text-align: center; }
.fixture.ist-sichtbar { display: block; }

/* „Heute", „Diese Woche", „Läuft gerade" — setzt das Skript. Ohne Text
   nimmt die Marke keinen Platz weg. */
.fixture__status {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}
.fixture__status:empty { display: none; }

/* Kein Wappen vorhanden: Kreis mit den Initialen statt eines leeren Rahmens. */
.fixture__wappen {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

/* Heimspiel oder Auswärtsspiel ist die Frage, die Eltern an eine solche
   Tabelle stellen — deshalb steht sie in der Fläche, nicht in einer Spalte.
   Gelaufene Spiele treten zurück, ohne unlesbar zu werden. */
.data tr.ist-heimspiel { background: rgba(242, 139, 0, 0.12); }
.data tr.ist-vorbei { color: rgba(42, 20, 22, 0.55); }
.data tr.ist-vorbei strong { font-weight: 600; }

.fixture__ort {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.fixture__meta {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.25rem;
}
.fixture__meta strong { color: var(--white); }

.fixture__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.fixture__team {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}
.fixture__team img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  background: var(--white);
  border-radius: 50%;
  padding: 6px;
}
/* Weiße Wappen (z. B. Young Tigers Tübingen) auf dunklem Grund. */
.fixture__team img.ist-hell {
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--white);
  padding: 2px;
}
.fixture__team span {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  line-height: 1.05;
}

.fixture__vs {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--orange);
}
/* Mit Ergebnis: groß und weiß — in Orange ging es auf dem Bordeaux-Band unter. */
.fixture[data-ergebnis] .fixture__vs {
  font-stretch: 75%;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
  white-space: nowrap;
}

.fixture__links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-light);
  font-size: 0.95rem;
}
.fixture__links a { color: var(--orange); }

/* --- Karten -------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease);
}
.card:hover { transform: translateY(-6px); }

.card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.card__date {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-weight: 600;
}

.card__title { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.card__text { font-size: 0.975rem; margin: 0; }

.card__more {
  margin-top: auto;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bordeaux);
  font-size: 0.95rem;
}

/* --- Werte --------------------------------------------------------------- */

.value {
  border-top: 4px solid var(--orange);
  padding-top: 1.5rem;
}
.value h3 { margin-bottom: 0.75rem; }
.value p { font-size: 1rem; }

/* --- Der Weg: die Leiter ------------------------------------------------- */

.ladder {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: stufe;
  /* Eine Stelle für die senkrechte Linie — graue Spur, orange Füllung und
     die schmale Fassung weiter unten greifen alle darauf zu. */
  --ladder-linie: 2.65rem;
}

.ladder__step {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  counter-increment: stufe;
}

/* Durchgehende Linie zwischen den Stufen */
.ladder__step::before {
  content: '';
  position: absolute;
  left: var(--ladder-linie);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-light);
}
.ladder__step:first-child::before { top: 50%; }
.ladder__step:last-child::before { bottom: 50%; }

.ladder__num {
  position: relative;
  z-index: 1;
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
}

.ladder__step--goal .ladder__num {
  background: var(--white);
  color: var(--bordeaux);
}

/* --- Fortschritt auf der Stufenleiter ------------------------------------ */

/* Die orange Füllung liegt über der grauen Spur und wächst beim Scrollen von
   Punkt zu Punkt mit; beim Zurückscrollen zieht sie sich genauso zurück.
   Höhe und Startpunkt setzt das Skript in --leiter-fuellung und
   --leiter-start. Ohne Skript bleibt die Leiter, wie sie war. */
.ladder--mit-fortschritt::after {
  content: '';
  position: absolute;
  left: calc(var(--ladder-linie) - 1px);
  top: var(--leiter-start, 0px);
  width: 4px;
  height: var(--leiter-fuellung, 0px);
  border-radius: 2px;
  background: var(--orange);
  box-shadow: 0 0 14px rgba(242, 139, 0, 0.45);
  pointer-events: none;
}

/* Noch nicht erreichte Stufen stehen zurück und leuchten auf, sobald die
   Linie bei ihnen ankommt. */
.ladder--mit-fortschritt .ladder__num {
  opacity: 0.4;
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.ladder--mit-fortschritt .ist-erreicht .ladder__num {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(242, 139, 0, 0.22);
}
.ladder--mit-fortschritt .ist-erreicht.ladder__step--goal .ladder__num {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .ladder--mit-fortschritt .ladder__num { transition: none; }
}

.ladder__body { padding-top: 0.75rem; }
.ladder__body h3 { margin-bottom: 0.5rem; }
.ladder__body p { max-width: 52ch; margin: 0; color: rgba(255, 255, 255, 0.85); }

/* --- Logoraster (Vereine, Partner) --------------------------------------- */

.logos {
  display: grid;
  /* Feste Kachelbreite, mittig: Bei wenigen Partnern werden die Logos nicht
     auf volle Breite gezogen. */
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 15rem));
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: center;
}

.logos__item {
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  min-height: 8rem;
}
.logos__item img {
  max-height: 5rem;
  width: auto;
  object-fit: contain;
}
/* Für weiße Logos, die auf Weiß verschwinden würden. */
.logos__item--dunkel {
  background: #000;
  border-color: #000;
}
a.logos__item { transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
a.logos__item:hover,
a.logos__item:focus-visible { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }

/* --- Bild-Text-Blöcke ---------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split--flip .split__media { order: 2; }

/* --- Kennzahlen ---------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stat__value {
  /* Hochzählen (main.js): gleich breite Ziffern, damit die Zahl beim Zählen
     nicht zittert; skaliert wird von links unten, wo sie steht. */
  font-variant-numeric: tabular-nums;
  transform-origin: left bottom;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--orange);
}
.stat__label {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* --- Aufruf-Band --------------------------------------------------------- */

.cta-band {
  background: var(--orange);
  color: var(--ink);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}
.cta-band h2 { max-width: 20ch; }
.cta-band .btn--ink { border-color: var(--ink); }

/* --- Spielbericht ------------------------------------------------------- */

.bericht { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.bericht img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(42, 20, 22, 0.85);
}
.bericht__titelbild { margin: 0; }
.bericht__spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .bericht__spalten { grid-template-columns: minmax(0, 1fr); }
}
.bericht__kasten {
  padding: 1.25rem;
  background: var(--paper);
  border: 3px solid var(--ink);
}
.bericht__endstand {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
}
.bericht__endstand strong {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-size: 2.4rem;
  color: var(--bordeaux);
}
.bericht__kasten .data { width: 100%; }
/* Rechte Spalte mit Hochformat-Foto über dem Ergebniskasten — für Berichte,
   deren bestes Foto hochkant ist (z. B. Mannschaft vor der Anzeigetafel). */
.bericht__seite { display: grid; gap: 1.25rem; align-content: start; }
.bericht__hochbild { margin: 0; }
.bericht .bericht__hochbild img { aspect-ratio: auto; height: auto; }
/* Hochformat in der 16:9-Galerie: Köpfe oben im Bild behalten. */
.bericht img.bericht__bild--oben { object-position: center 28%; }
.bericht__statistik { margin-top: 1rem; font-size: 0.85rem; }
.bericht__statistik td:first-child { text-align: left; }
.bericht__klein { margin: 0.75rem 0 0; font-size: 0.85rem; color: rgba(42, 20, 22, 0.7); }
.bericht__galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.bericht__galerie--zwei { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

/* --- Teilen ------------------------------------------------------------ */

.teilen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.teilen__titel {
  margin-right: 0.25rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.teilen__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.45rem 0.8rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.teilen__knopf[hidden] { display: none; }
.teilen__knopf svg { width: 20px; height: 20px; flex: none; }
.teilen__knopf:hover,
.teilen__knopf:focus-visible { background: var(--orange); border-color: var(--orange); color: var(--ink); }
/* Im Fließtext in Bordeaux, im roten Seitenkopf weiß (erbt die Schriftfarbe). */
.prose .teilen { color: var(--bordeaux); margin-block: 2.5rem 1.5rem; }
.prose .teilen a { color: inherit; }
.page-head .teilen__titel { color: var(--orange); }

/* Auf dem Handy nur Symbole — die Namen bleiben für Screenreader lesbar.
   Gibt es den Teilen-Dialog des Telefons, bekommt nur er seine Beschriftung. */
@media (max-width: 640px) {
  .teilen__knopf { padding: 0.45rem; min-width: 44px; justify-content: center; }
  .teilen__knopf span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .teilen.hat-nativ [data-teilen="nativ"] { padding-inline: 0.9rem; }
  .teilen.hat-nativ [data-teilen="nativ"] span { position: static; width: auto; height: auto; clip: auto; }
}

/* --- Störer Sponsoringmappe -------------------------------------------- */

/* Pop-Art wie das Cover der Mappe: Tinten-Kontur, harter Schatten,
   Rasterpunkte. Links die Mappe als gedrehtes Buch mit Rücken und
   Seitenschnitt, rechts das Formular. */
.mappe {
  width: min(100% - 2rem, 54rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  border: 4px solid var(--ink);
  border-radius: 1rem;
  background:
    radial-gradient(rgba(242, 139, 0, 0.22) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.mappe[open] {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  animation: mappe-rein 0.45s var(--ease) both;
}
/* Dieselbe Mappe als fester Abschnitt (Partner-Seite) statt als Fenster. */
.mappe--seite {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  width: 100%;
  max-width: 60rem;
  max-height: none;
  margin-inline: auto;
  overflow: visible;
}
.mappe::backdrop {
  background: rgba(42, 20, 22, 0.72);
  backdrop-filter: blur(3px);
}
@keyframes mappe-rein {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.mappe__zu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.mappe__zu:hover,
.mappe__zu:focus-visible { background: var(--orange); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

/* Das Buch: Cover leicht nach hinten gedreht, links ein dunkler Rücken,
   rechts der helle Schnitt der Seiten. */
.mappe__buch {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 2.5rem 1.5rem 2.5rem 2.75rem;
  background: var(--bordeaux);
  border-right: 4px solid var(--ink);
  perspective: 1400px;
}
.mappe__cover {
  position: relative;
  width: min(100%, 15rem);
  transform: rotateY(-22deg) rotateX(4deg);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
  box-shadow: 14px 16px 0 rgba(42, 20, 22, 0.9);
}
.mappe__buch:hover .mappe__cover { transform: rotateY(-10deg) rotateX(2deg); }
.mappe__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 4px 4px 0;
}
/* Buchrücken */
.mappe__cover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  transform: translateX(-100%) rotateY(-90deg);
  transform-origin: right;
  background: linear-gradient(to right, #120809, #3a1d20);
}
/* Falz und Seitenschnitt */
.mappe__cover::after {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: -9px;
  width: 9px;
  background: repeating-linear-gradient(to bottom, #fff 0 2px, #e6ded2 2px 3px);
  border-radius: 0 3px 3px 0;
}
.mappe__cover img { box-shadow: inset 6px 0 8px rgba(0, 0, 0, 0.35); }
.mappe__sticker {
  position: absolute;
  right: 1rem;
  bottom: 1.5rem;
  padding: 0.55rem 0.8rem;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-pop);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  transform: rotate(-8deg);
  box-shadow: 3px 3px 0 var(--ink);
}

.mappe__inhalt {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: clamp(2.5rem, 5vw, 3rem);
}
.mappe__titel {
  margin: 0.4rem 0 0.75rem;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bordeaux);
}
.mappe__text { margin: 0 0 1.25rem; font-size: 0.98rem; }
.mappe__zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mappe__zeile input {
  flex: 1 1 12rem;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 3px solid var(--ink);
  border-radius: 0.5rem;
  background: var(--white);
  font: inherit;
}
.mappe__zeile input:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.mappe__check { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.45; }
/* Doppelte Klasse: .field label (weiter unten) setzt sonst Fettschrift. */
.mappe .mappe__check label { font-weight: 400; font-size: 0.8rem; line-height: 1.45; }
.mappe__check a { color: var(--bordeaux); }
.mappe__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mappe__meldung {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--bordeaux);
  background: rgba(152, 39, 45, 0.08);
  font-size: 0.85rem;
  font-weight: 600;
}
.mappe__danke a { color: var(--bordeaux); font-weight: 600; }
.mappe__nein {
  margin-top: 1rem;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: rgba(42, 20, 22, 0.65);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 700px) {
  .mappe[open], .mappe--seite { grid-template-columns: 1fr; }
  .mappe { box-shadow: 7px 7px 0 var(--ink); }
  .mappe__buch { border-right: 0; border-bottom: 4px solid var(--ink); padding: 1.1rem 1rem 1.1rem 1.75rem; }
  .mappe__cover { width: 6rem; box-shadow: 8px 9px 0 rgba(42, 20, 22, 0.9); }
  .mappe__sticker { font-size: 0.9rem; right: 0.75rem; bottom: 0.75rem; }
  .mappe__inhalt { padding: 1.25rem 1.25rem 1rem; }
  .mappe__titel { font-size: 1.75rem; }
  .mappe__text { font-size: 0.9rem; margin-bottom: 1rem; }
  .mappe .mappe__check label { font-size: 0.75rem; }
  .mappe__nein { margin-top: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mappe[open] { animation: none; }
  .mappe__cover { transition: none; }
}

/* --- Förderverein: Online-Antrag ---------------------------------------- */

.fv-form { max-width: 48rem; }
.fv-form fieldset { margin: 0; padding: 0; border: 0; }
.fv-form legend { margin-bottom: 0.6rem; font-weight: 700; }
.fv-zwischen {
  margin: 1rem 0 -0.25rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--line);
  font-size: 1.2rem;
}

/* Auswahl als zwei Karten — das Radio steckt sichtbar mit drin. */
.fv-wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
}
.fv-wahl legend { grid-column: 1 / -1; }
.fv-karte {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  padding: 1rem 1.1rem;
  border: 3px solid var(--ink);
  border-radius: 0.7rem;
  background: var(--white);
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.fv-karte input { grid-row: 1 / 3; margin-top: 0.25rem; accent-color: var(--bordeaux); }
.fv-karte__titel { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.fv-karte__text { font-size: 0.88rem; color: rgba(42, 20, 22, 0.75); }
.fv-karte:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.fv-karte:has(input:checked) { background: rgba(242, 139, 0, 0.16); box-shadow: 5px 5px 0 var(--ink); }

.fv-spende { display: grid; gap: 1.25rem; }
/* display: grid überschreibt sonst das hidden-Attribut. */
.fv-spende[hidden], .fv-danke[hidden], .fv-meldung[hidden] { display: none; }
.fv-betrag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.fv-betrag legend { width: 100%; }
.fv-betrag > label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font-weight: 600;
  cursor: pointer;
}
.fv-betrag > label:has(input:checked) { background: var(--orange); }
.fv-betrag input[type="radio"] { accent-color: var(--ink); }
.fv-betrag__frei input {
  width: 9rem;
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--line);
  font: inherit;
}

.fv-zustimmungen { display: grid; gap: 0.9rem; }
.fv-zustimmungen .field--check { padding: 0.8rem 1rem; background: var(--paper); border-radius: 0.5rem; }
.fv-zustimmungen .field--check[hidden] { display: none; }
.fv-lesen {
  display: inline;
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bordeaux);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.fv-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fv-meldung {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--bordeaux);
  background: rgba(152, 39, 45, 0.08);
  font-weight: 600;
}
.fv-danke {
  max-width: 48rem;
  padding: 1.5rem;
  border: 3px solid var(--ink);
  border-radius: 0.7rem;
  background: rgba(242, 139, 0, 0.14);
  box-shadow: 6px 6px 0 var(--ink);
}
.fv-danke h3 { margin-top: 0; font-family: var(--font-pop); font-weight: 400; font-size: 2rem; color: var(--bordeaux); }

/* Die Textfenster: wie der Störer, nur ruhiger. */
.fv-text {
  width: min(100% - 2rem, 42rem);
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  overflow: auto;
  border: 4px solid var(--ink);
  border-radius: 1rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}
.fv-text::backdrop { background: rgba(42, 20, 22, 0.72); }
.fv-text h3 { margin-top: 0; color: var(--bordeaux); }
.fv-text p { font-size: 0.95rem; }
.fv-text a { color: var(--bordeaux); }
.fv-text form { margin-top: 1.25rem; }

/* --- Rechenaufgabe gegen Bots ------------------------------------------ */

.captcha__frage {
  display: inline-block;
  min-width: 3.2em;
  padding: 0.05rem 0.45rem;
  border: 2px solid var(--ink);
  border-radius: 0.35rem;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.captcha__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.captcha__zeile input { width: 6.5rem; flex: none; }
.mappe .captcha__zeile input {
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  border: 3px solid var(--ink);
  border-radius: 0.5rem;
  font: inherit;
}
.mappe .captcha { margin-top: 0.9rem; gap: 0.4rem; }
.mappe .captcha label { font-size: 0.9rem; font-weight: 600; }
.captcha__neu {
  min-height: 44px;
  padding: 0.3rem 0.2rem;
  border: 0;
  background: none;
  color: var(--bordeaux);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.mappe__senden { margin: 1rem 0 0; }

/* --- Fließtext ----------------------------------------------------------- */

.prose {
  max-width: 68ch;
}
.prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin-bottom: 1.1em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--bordeaux); }

.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.975rem;
}
table.data th,
table.data td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
table.data th {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
  background: var(--paper);
}

/* --- Formular ------------------------------------------------------------ */

.form {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}
.field { display: grid; gap: 0.4rem; }
.field label {
  font-weight: 600;
  font-size: 0.95rem;
}
.field input,
.field select,
.field textarea {
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--line);
  background: var(--white);
  font: inherit;
  color: inherit;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--bordeaux);
  outline: none;
}
.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}
.field--check input { margin-top: 0.3rem; }
.field__hint { font-size: 0.875rem; color: rgba(42, 20, 22, 0.7); }

/* Rückmeldung nach dem Absenden: fertiger Text zum Kopieren, falls sich kein
   Mailprogramm geöffnet hat. */
.form__mail {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 2px solid var(--bordeaux);
  background: var(--white);
}
.form__mail p { margin: 0; }
.form__mail textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--line);
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.form__mail .btn { justify-self: start; }

/* --- Fußbereich ---------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-light);
}

.site-footer__brand img { width: 88px; height: 88px; object-fit: contain; }
.site-footer__claim { margin-top: 1rem; font-size: 0.95rem; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem;
}
.site-footer__head {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 0.9rem;
}
.site-footer__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.site-footer__cols a,
.site-footer__legal a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-footer__cols a:hover,
.site-footer__legal a:hover { color: var(--white); text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.9rem;
}
.site-footer__legal {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Einblenden beim Scrollen -------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .card:hover { transform: none; }
}

/* --- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 1240px) {
  .site-nav__list { gap: 1.1rem; }
  .site-nav__list > li > a { font-size: 1rem; letter-spacing: 0.04em; }
  .site-nav { gap: 1.1rem; }
}

/* Mit sechs Punkten plus Knopf und Sprachwahl wird die Zeile ab etwa
   1080 px zu eng — dort beginnt die Schublade. Der Wert muss mit der
   Abfrage in assets/js/main.js übereinstimmen. */
/* Zwischen 1081 und 1200 px steht die Navigation noch in voller Länge neben
   dem Logo — dort nimmt sich beides etwas zurück, sonst bricht die
   Schaltfläche um. */
@media (max-width: 1200px) {
  .brand__mark { width: 88px; height: 88px; margin-top: -16px; }
  .brand__claim { font-size: 0.95rem; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }

  /* Hängt an der Kopfleiste statt an der Fensterkante: über dem Kopfbereich
     steht die Kanalleiste, solange noch nicht gescrollt wurde. Eine feste
     Angabe von 84 px würde das Menü dann in die Navigation hineinschieben. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    justify-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 2rem;
    background: var(--ink);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    transform: translateY(-120%);
    /* visibility ist hier kein Beiwerk: Das geschlossene Menue wird nur nach
       oben geschoben und ragt mit seiner Unterkante wieder in die Kanalleiste
       hinein — dunkler Balken ueber DE | EN, und Klicks landeten im Menue
       statt auf dem Sprachumschalter. Ausgeblendet ist es weg, auch fuer die
       Tabulatortaste. Die Verzoegerung laesst das Wegschieben zu Ende laufen,
       bevor es verschwindet. */
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .site-nav.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s var(--ease), visibility 0s;
  }

  .site-nav__list {
    display: grid;
    gap: 0;
  }
  .site-nav__list > li > a {
    color: var(--white);
    padding: 1rem 0;
    border-bottom: 1px solid var(--line-light);
    font-size: 1.25rem;
  }
  .site-nav__list > li > a::after { display: none; }
  .site-nav__list > li > a[aria-current] { color: var(--orange); }

  .site-nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    display: none;
  }
  .has-sub.is-open .site-nav__sub { display: block; }
  .site-nav__sub a {
    padding: 0.7rem 0 0.7rem 1.25rem;
    border-bottom: 1px solid var(--line-light);
    color: rgba(255, 255, 255, 0.8);
  }

  .site-nav__cta { margin-top: 1.5rem; justify-content: center; }

  .fixtures { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}

@media (max-width: 560px) {
  .brand__claim { display: none; }
  .brand__mark { width: 84px; height: 84px; margin-top: -18px; }
  .hero { min-height: 74vh; }
  .ladder { --ladder-linie: 1.65rem; }
  .ladder__step { grid-template-columns: 3.5rem 1fr; gap: 1rem; }
  .ladder__num { width: 3.5rem; height: 3.5rem; font-size: 1.35rem; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* --- Häufige Fragen ------------------------------------------------------ */

.faq {
  max-width: 68ch;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--orange-dark);
}
.faq details[open] summary::after { content: '–'; }
.faq details > *:not(summary) { margin-bottom: 1.15rem; }

/* --- Personen ------------------------------------------------------------ */

.person { text-align: center; }
.person img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 1rem;
}
.person h3 { margin-bottom: 0.35rem; }
.person p { font-size: 0.975rem; margin: 0; }
.person__role {
  color: var(--bordeaux);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* Die Vita steht unter Name und Aufgabe. Linksbündig, obwohl die Karte
   sonst mittig ist: Fließtext mit Flatterrand liest sich zentriert
   schlecht, sobald er über zwei Zeilen geht. */
.person__vita {
  margin: 0;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(42, 20, 22, 0.8);
}

/* --- Kontaktangaben ------------------------------------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.contact-grid dt {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  color: var(--bordeaux);
  margin-bottom: 0.35rem;
}
.contact-grid dd { margin: 0 0 1.5rem; }

/* --- Redaktionshinweis --------------------------------------------------- */

/* Markiert Textstellen, die noch mit echten Inhalten gefüllt werden müssen.
   Zum Entfernen: das <span class="todo"> auflösen. */
.todo {
  background: rgba(242, 139, 0, 0.18);
  border-bottom: 2px solid var(--orange);
  padding: 0.05em 0.2em;
}

/* --- Sprachumschalter ---------------------------------------------------- */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: rgba(42, 20, 22, 0.45);
}
.lang-switch a {
  padding: 0.2rem 0.1rem;
  text-decoration: none;
  color: rgba(42, 20, 22, 0.55);
  transition: color 0.18s var(--ease);
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current] {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--orange);
}

/* --- Spendenreiter am Bildschirmrand ------------------------------------- */

/* Pop-Art-Reiter, mittig am linken Rand. Er bleibt an der Kante stehen —
   beim Überfahren schiebt sich nur die Beschriftung nach rechts heraus.
   Deshalb wächst die Breite, statt das Element zu verschieben.
   skewY lässt die waagerechten Kanten schräg laufen, hält die linke Kante
   aber senkrecht und damit bündig am Bildschirmrand. */
.spenden-reiter {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 55;
  display: flex;
  align-items: center;
  padding: 0.85rem 0.85rem;
  background: var(--orange);
  color: var(--ink);
  text-decoration: none;
  border: 3px solid var(--ink);
  border-left: 0;
  border-radius: 0 0.5rem 0.5rem 0;
  /* Harter, unscharfer Schatten — der Comic-Look lebt von der klaren Kante. */
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
  transform: translateY(-50%) skewY(-4deg);
  transition: background-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}

/* Rasterpunkte wie im Siebdruck. */
.spenden-reiter::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(42, 20, 22, 0.55) 1px, transparent 1.3px);
  background-size: 6px 6px;
  opacity: 0.35;
  pointer-events: none;
}

.spenden-reiter:hover,
.spenden-reiter:focus-visible {
  background: #ffa428;
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.85);
}

.spenden-reiter__icon {
  display: grid;
  place-items: center;
  flex: none;
  /* Kippt bewusst mit dem Schild — Symbol und Schrift stehen in derselben
     Schräge wie die Fläche. */
}
.spenden-reiter__icon svg { display: block; fill: var(--ink); stroke: var(--ink); }

.spenden-reiter__text {
  /* Zusammengeschoben: Breite 0. Beim Überfahren fährt der Text heraus.
     Keine Gegenschräge — die Schrift läuft in derselben Schräge wie das
     Schild, sonst wirkt sie aufgeklebt statt aufgedruckt. */
  display: block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Bangers sitzt optisch hoch — der Versatz stellt es auf die Mittelachse. */
  padding-top: 0.12em;
  transition: max-width 0.42s var(--ease), padding-left 0.42s var(--ease);
}

.spenden-reiter:hover .spenden-reiter__text,
.spenden-reiter:focus-visible .spenden-reiter__text,
.spenden-reiter.ist-offen .spenden-reiter__text {
  max-width: 16rem;
  padding-left: 0.7rem;
}

/* Megafon: leichtes Rufen, dazu pulsende Schallwellen. */
.megafon {
  transform-origin: 14px 24px;
  animation: megafon-ruf 2.4s var(--ease) infinite;
}
.megafon__welle {
  opacity: 0;
  transform-origin: 34px 24px;
  animation: megafon-welle 2.4s var(--ease) infinite;
}
.megafon__welle--2 { animation-delay: 0.18s; }

@keyframes megafon-ruf {
  0%, 62%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-9deg); }
  78% { transform: rotate(-3deg); }
  86% { transform: rotate(-7deg); }
}

@keyframes megafon-welle {
  0%, 55% { opacity: 0; transform: scale(0.75); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}

/* Im geöffneten Menü würde der Reiter nur im Weg liegen. */
body.nav-offen .spenden-reiter { display: none; }

@media (prefers-reduced-motion: reduce) {
  .megafon, .megafon__welle { animation: none; }
  .megafon__welle { opacity: 1; }
  .spenden-reiter__text { transition: none; }
}

@media (max-width: 920px) {
  /* Ohne Mauszeiger gibt es kein Überfahren — also steht der Text von Anfang
     an da, und der Reiter wandert in den Daumenbereich unten links. */
  .spenden-reiter {
    top: auto;
    bottom: 1rem;
    left: 1rem;
    padding: 0.6rem 1rem;
    border-left: 3px solid var(--ink);
    border-radius: 0.6rem;
    transform: skewY(-4deg);
    box-shadow: 4px 4px 0 rgba(42, 20, 22, 0.85);
  }
  /* Eingezogen wie am Schreibtisch — nur das Megafon steht da. Der erste
     Tipp fährt den Schriftzug aus (.ist-offen, gesetzt von main.js), der
     zweite führt zur Förderverein-Seite. Ein dauerhaft ausgefahrenes Schild
     läge über dem Inhalt. */
  .spenden-reiter__text {
    font-size: 0.9rem;
  }
  .spenden-reiter.ist-offen .spenden-reiter__text {
    max-width: 16rem;
    padding-left: 0.6rem;
  }
}

@media print {
  .spenden-reiter, .site-nav, .nav-toggle, .sozialleiste { display: none; }
}

/* --- REGIOSHOP ----------------------------------------------------------- */

/* Farbband wie beim Vorbild: Signalfarbe im oberen Teil, Weiß darunter. Das
   Promo-Bild überlappt die Kante — daraus entsteht die Tiefe der Sektion. */
.shop {
  background: linear-gradient(to bottom, var(--orange) 0 56%, var(--white) 56%);
  padding-block: var(--section-y);
}

/* Auf Orange trägt Bordeaux als Augenbraue nicht (3.2:1) — deshalb Tinte. */
.shop .eyebrow { color: var(--ink); }

.shop__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.shop__promo {
  position: relative;
  display: block;
  border: 3px solid var(--ink);
  border-radius: 0.45rem;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.85);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.shop__promo:hover {
  transform: translate(-2px, -2px);
  box-shadow: 11px 11px 0 rgba(42, 20, 22, 0.85);
}
.shop__promo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.shop__promo-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  background: var(--orange);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.shop__promo-bar::after {
  content: '→';
  font-family: var(--font-text);
  font-weight: 400;
  transition: transform 0.18s var(--ease);
}
.shop__promo:hover .shop__promo-bar::after { transform: translateX(4px); }

.shop__seite {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

/* Im Quelltext stehen alle Artikel des Shops, sichtbar sind vier — welche,
   würfelt das Skript bei jedem Aufruf. Ohne Skript bleiben die vier stehen,
   die der Build gesetzt hat. */
.artikel { display: none; }

.artikel.ist-sichtbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 1rem 1.25rem;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0.45rem;
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.artikel:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.85);
}
.artikel:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 rgba(42, 20, 22, 0.85);
}

.artikel__media {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
}
.artikel__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.artikel__name {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  text-wrap: balance;
}

.artikel__preis {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--bordeaux);
}

.shop__fuss {
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.shop__hinweis {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(42, 20, 22, 0.72);
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) {
  .shop__promo:hover, .artikel:hover, .artikel:active { transform: none; }
}

@media (max-width: 920px) {
  /* Das hohe Promo-Bild würde auf dem Handy die halbe Seite füllen — es rückt
     unter die Artikel und wird flacher. */
  .shop {
    background: linear-gradient(to bottom, var(--orange) 0 38%, var(--white) 38%);
  }
  .shop__inner { grid-template-columns: 1fr; }
  .shop__promo { order: 2; }
  /* Nicht flacher als 4:5. Das Motiv zeigt zwei Spielerinnen in voller
     Größe — bei 16:10 bliebe von ihnen ein Streifen Oberkörper übrig. */
  .shop__promo img { aspect-ratio: 4 / 5; }
  .shop__seite { order: 1; }
}

@media (max-width: 560px) {
  .shop__grid { gap: 0.9rem; }
  .artikel { padding: 0.8rem 0.7rem 1rem; }
}

/* --- Musterfassung ------------------------------------------------------- */

/* Nur in dist-muster/ vorhanden. Soll unübersehbar sein — diese Dateien
   dürfen nicht auf den Server. */
.muster-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  margin: 0;
  padding: 0.6rem 1rem;
  background: repeating-linear-gradient(
    45deg, var(--ink) 0 14px, #3d1e21 14px 28px
  );
  color: var(--orange);
  text-align: center;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.muster-banner ~ .site-header { top: 2.4rem; }

/* --- Community: Angebot und Preis ---------------------------------------- */

.angebot {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.preis-karte {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--orange);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 0.45rem;
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.85);
}

.preis-karte__label {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.preis-karte__preis {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(3.5rem, 8vw, 5rem);
  line-height: 0.9;
}

.preis-karte__zusatz {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.preis-karte__liste {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
  font-size: 0.975rem;
}
.preis-karte__liste li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
}
.preis-karte__liste li::before {
  content: '✓';
  font-weight: 700;
  line-height: 1.4;
}

/* Die Karte liegt auf Orange — der Hauptknopf braucht hier eine andere
   Farbe, sonst verschwindet er im Untergrund. */
.preis-karte .btn--primary {
  background: var(--white);
  justify-content: center;
}
.preis-karte .btn--primary:hover { background: var(--ink); color: var(--white); }

/* --- Community: Vorteilspartner ------------------------------------------ */

.vorteil {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0.45rem;
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
}

.vorteil__logo {
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
  background: var(--paper);
  border-radius: 0.25rem;
  overflow: hidden;
}
.vorteil__logo img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: contain;
}

.vorteil__ort {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(42, 20, 22, 0.65));
}

.vorteil__rabatt {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--bordeaux);
}

/* Nur in der Musterfassung sichtbar: Betrieb hat noch nicht zugesagt. */
.vorteil--angefragt { position: relative; }
.vorteil--angefragt::after {
  content: 'noch keine Zusage';
  position: absolute;
  top: -0.9rem;
  right: -0.4rem;
  padding: 0.2rem 0.55rem;
  background: var(--bordeaux);
  color: var(--white);
  border-radius: 0.25rem;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.partner-leer {
  grid-column: 1 / -1;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 3px dashed rgba(42, 20, 22, 0.3);
  border-radius: 0.45rem;
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

/* --- Community: Schritte -------------------------------------------------- */

.schritte {
  counter-reset: schritt;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  column-gap: 1rem;
  row-gap: 0.3rem;
  align-items: start;
}

/* Kreis, Überschrift und Absatz sind drei Rasterelemente in zwei Spalten.
   Ohne feste Zuordnung landet der Absatz in der ersten Spalte — also unter
   dem Kreis, auf 2,75 rem Breite. Deshalb bekommt jedes Element seinen
   Platz zugewiesen. */
.schritte h3,
.schritte p { grid-column: 2; }
.schritte li::before {
  content: counter(schritt);
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--ink);
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
}
.schritte h3 { margin-bottom: 0.3rem; }
.schritte p { margin: 0; font-size: 1rem; }

@media (max-width: 920px) {
  .angebot { grid-template-columns: 1fr; }
}

/* --- Vereinskarten -------------------------------------------------------- */

.verein {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.5rem 1.25rem;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0.45rem;
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
  text-align: center;
}

/* Feste Höhe, damit die Logos trotz sehr unterschiedlicher Formate —
   von querformatigen Schriftzügen bis zu hochkanten Wappen — auf einer
   gemeinsamen Linie sitzen. */
.verein__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

/* Begrenzung bewusst in absoluten Einheiten: max-height in Prozent löst
   gegen die automatisch berechnete Zeilenhöhe auf, nicht gegen die feste
   Höhe des Kastens — das Logo würde dann ungebremst über den Text laufen. */
.verein__logo img {
  max-height: 6.5rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.verein h3 { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

.verein__ort {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-weight: 600;
}

.verein__kontakt {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(42, 20, 22, 0.75);
}

/* Gegner noch nicht bekannt — Kreis in derselben Größe wie ein Vereinslogo,
   damit die Paarung nicht einseitig kippt. */
.fixture__team-offen {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 3px dashed rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Die Serie: Fernseher im Pop-Art-Stil -------------------------------- */

/* Der Bildschirm schiebt sich über die Unterkante des Heros. Damit die
   Hero-Schrift nicht darunter verschwindet, bekommt der Hero zusätzliche
   Luft nach unten — beide Werte gehören zusammen. */
/* Der Fernseher schob sich frueher ueber die Unterkante des Heros. Seit der
   Spielplan direkt unter dem Hero steht, gibt es nichts mehr zu ueberlappen —
   der Abschnitt beginnt normal, mit eigener Flaeche. */
.tv-sektion {
  position: relative;
  padding-block: var(--section-y);
  background: var(--ink);
  color: var(--white);
}

/* Steht ueber dem Geraet: erst sagen, worum es geht, dann der Fernseher. */
.tv-sektion__kopf {
  max-width: 60ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.tv-sektion__kopf p { margin-top: 1rem; color: rgba(255, 255, 255, 0.82); }

/* --- Das Gerät ----------------------------------------------------------- */

.tv {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
}

/* Antenne mit zwei Bällen — das Pop-Art-Zitat. Rein dekorativ. */
.tv__antenne {
  position: relative;
  height: 4.5rem;
  margin-inline: auto;
  width: 14rem;
}
.tv__antenne span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4.5rem;
  background: var(--ink);
  transform-origin: bottom center;
}
.tv__antenne span:first-child { transform: rotate(-32deg); }
.tv__antenne span:last-child { transform: rotate(28deg); }

/* Die Bälle an den Antennenspitzen: Kreis mit den typischen Linien. */
.tv__antenne span::after {
  content: '';
  position: absolute;
  top: -1.05rem;
  left: 50%;
  width: 2.1rem;
  height: 2.1rem;
  margin-left: -1.05rem;
  border-radius: 50%;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle at 50% -40%, transparent 68%, var(--ink) 68% 72%, transparent 72%),
    radial-gradient(circle at 50% 140%, transparent 68%, var(--ink) 68% 72%, transparent 72%),
    var(--orange);
  border: 3px solid var(--ink);
  box-sizing: border-box;
}

.tv__gehaeuse {
  position: relative;
  padding: clamp(0.8rem, 1.6vw, 1.4rem);
  background: var(--orange);
  border: 5px solid var(--ink);
  border-radius: 1.6rem;
  box-shadow: 12px 12px 0 rgba(42, 20, 22, 0.85);
}

/* Rasterpunkte wie im Siebdruck — dieselbe Signatur wie beim Spendenreiter. */
.tv__gehaeuse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(42, 20, 22, 0.5) 1px, transparent 1.3px);
  background-size: 7px 7px;
  opacity: 0.3;
  pointer-events: none;
}

.tv__schirm {
  position: relative;
  border: 4px solid var(--ink);
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--ink);
}

.tv__play {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.tv__bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s var(--ease), filter 0.3s var(--ease);
}
.tv__play:hover .tv__bild { transform: scale(1.03); filter: brightness(1.05); }

/* Folgennummer in der Bedienblende — die Vorschaubilder tragen sie schon
   selbst, ein zweiter Aufkleber auf dem Bild wäre doppelt gemoppelt. */
.tv__marke {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.15rem 0.6rem;
  background: var(--ink);
  color: var(--orange);
  border-radius: 0.25rem;
  font-family: var(--font-pop);
  font-size: 1.15em;
  letter-spacing: 0.05em;
  transform: rotate(-2deg);
}

.tv__knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(4.5rem, 8vw, 6.5rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--orange);
  border: 4px solid var(--ink);
  border-radius: 50%;
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.8);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
/* Dreieck aus Rahmen — kein Zeichen, das eine Schrift mitbringen müsste. */
.tv__knopf::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.85em 0 0.85em 1.3em;
  border-color: transparent transparent transparent var(--ink);
}
.tv__play:hover .tv__knopf,
.tv__play:focus-visible .tv__knopf {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.8);
}

/* Bedienblende unter dem Bildschirm. */
.tv__blende {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0.4rem 0.2rem;
}
.tv__lampe {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #4ade80;
  border: 3px solid var(--ink);
  box-sizing: content-box;
}
.tv__titel {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tv__regler {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--ink);
  background-image: linear-gradient(to bottom, var(--ink) 0 0.9rem, transparent 0.9rem);
  background-repeat: no-repeat;
  background-position: center 0.1rem;
  background-size: 3px 0.9rem;
}

.tv__fuesse {
  display: flex;
  justify-content: space-between;
  width: 65%;
  margin: 0 auto;
}
.tv__fuesse span {
  width: 3.2rem;
  height: 1.1rem;
  background: var(--ink);
  border-radius: 0 0 0.6rem 0.6rem;
}

.tv__hinweis {
  max-width: 52ch;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Auswahlleiste der Folgen -------------------------------------------- */

.folgen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 1fr);
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.folge {
  display: grid;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}

.folge__bild {
  display: block;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.4rem;
  overflow: hidden;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.folge__bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.folge:hover .folge__bild { border-color: var(--white); transform: translateY(-3px); }
.folge[aria-current] .folge__bild {
  border-color: var(--orange);
  box-shadow: 4px 4px 0 rgba(242, 139, 0, 0.5);
}

.folge__marke {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.folge__titel {
  font-size: 0.95rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .tv__play:hover .tv__bild,
  .tv__play:hover .tv__knopf,
  .folge:hover .folge__bild { transform: none; }
}

@media (max-width: 920px) {
  .tv__antenne { height: 3rem; width: 10rem; }
  .tv__antenne span { height: 3rem; }
  .folgen { grid-auto-columns: minmax(9rem, 1fr); }
}

/* Das nachgeladene YouTube-Fenster füllt den Bildschirm. */
.tv__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* --- Pfeile an der Folgenleiste ------------------------------------------ */

.scroll-leiste { position: relative; }

/* Der Verlauf am rechten Rand zeigt, dass die Reihe weitergeht — der Pfeil
   allein reicht nicht, weil er über dem Bild sitzt und übersehen wird. */
.scroll-leiste::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 100%;
  background: linear-gradient(to left, var(--ink), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s var(--ease);
}
.scroll-leiste:has(.scroll-pfeil--rechts[hidden])::after { opacity: 0; }

.scroll-pfeil {
  position: absolute;
  /* Auf Höhe der Bilder, nicht der Beschriftung darunter. */
  top: 3.2rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--orange);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 4px 0 rgba(42, 20, 22, 0.85);
  cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.scroll-pfeil:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(42, 20, 22, 0.85);
}
.scroll-pfeil:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(42, 20, 22, 0.85);
}

/* Winkel aus zwei Rahmenkanten — unabhängig von Schriftzeichen. */
.scroll-pfeil::before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.scroll-pfeil--rechts { right: -0.5rem; }
.scroll-pfeil--rechts::before { transform: translateX(-2px) rotate(-45deg); }
.scroll-pfeil--links { left: -0.5rem; }
.scroll-pfeil--links::before { transform: translateX(2px) rotate(135deg); }

@media (prefers-reduced-motion: reduce) {
  .scroll-pfeil:hover, .scroll-pfeil:active { transform: none; }
}

@media (max-width: 560px) {
  .scroll-pfeil { width: 2.5rem; height: 2.5rem; top: 2.2rem; }
  .scroll-pfeil--rechts { right: 0; }
  .scroll-pfeil--links { left: 0; }
}

/* --- Chronik: waagerechte Zeitleiste ------------------------------------- */

.chronik-sektion { background: var(--paper); }

/* Die Pfeile sitzen bei der Chronik mittig auf der Linie, nicht oben wie
   bei den Folgen. */
.chronik-leiste .scroll-pfeil { top: calc(50% - 1.5rem); }
.chronik-leiste::after { background: linear-gradient(to left, var(--paper), transparent); }

.chronik {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: 0;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.meilenstein {
  position: relative;
  display: grid;
  /* Karte oben — Jahr auf der Linie — Karte unten. Jede zweite Karte
     wechselt die Reihe, dadurch entsteht der Zickzack. */
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  padding-inline: 0.7rem;
  scroll-snap-align: center;
  /* Durchmesser der Jahreszahl. Die Nase weiter unten rechnet damit, wo sie
     anfangen muss — sonst müsste jede Größenänderung an zwei Stellen
     nachgezogen werden. */
  --jahr: 5.2rem;
}

/* Die durchgehende Linie liegt hinter den Jahreszahlen. */
.meilenstein::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  background: var(--ink);
}
.meilenstein:first-child::before { left: 50%; }
.meilenstein:last-child::before { right: 50%; }

.meilenstein__jahr {
  position: relative;
  z-index: 1;
  grid-row: 2;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--jahr);
  height: var(--jahr);
  border-radius: 50%;
  background: var(--orange);
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
  color: var(--ink);
  font-family: var(--font-pop);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  transform: rotate(-3deg);
  transition: transform 0.2s var(--ease);
}
.meilenstein:nth-child(even) .meilenstein__jahr { transform: rotate(3deg); }
.meilenstein:hover .meilenstein__jahr { transform: rotate(0) scale(1.06); }

.meilenstein__karte {
  /* Bezugspunkt für die Nase unten — sonst säße sie am Rand des ganzen
     Meilensteins statt an der Karte. */
  position: relative;
  /* Über der Jahreszahl: Die wächst im aktiven Zustand auf 135 Prozent, also
     von 5,2 auf 7 rem. Sie kommt der Karte damit knapp 1 rem näher, als der
     Abstand hergibt, und ragte bisher über den Text. Jetzt schiebt sie sich
     dahinter — die Karte bleibt lesbar, die Jahreszahl behält ihren Auftritt. */
  z-index: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 1.4rem;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0.45rem;
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
}
.meilenstein--unten .meilenstein__karte {
  grid-row: 3;
  align-self: start;
  margin: 1.4rem 0 0;
}

/* Kleine Nase, die Karte und Jahreszahl verbindet.

   Sie haengt am Meilenstein, nicht an der Karte. Das ist der Unterschied
   zwischen "Strich liegt unter der Jahreszahl" und "Strich laeuft quer
   darueber": Die Karte liegt auf z-index 2, damit die wachsende Jahreszahl
   nicht ueber den Text ragt. Ein Kind der Karte erbt diese Ebene und wuerde
   deshalb ebenfalls ueber der Jahreszahl liegen. Am Meilenstein bleibt die
   Nase unter ihr — und ueber der durchgehenden Linie.

   Die Jahreszahl sitzt immer mittig im Meilenstein, deshalb laesst sich der
   Anfang der Nase aus ihrem Durchmesser ausrechnen, ohne die Hoehe der Karte
   zu kennen. */
.meilenstein::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 4px;
  height: 1.4rem;
  margin-left: -2px;
  background: var(--ink);
}
.meilenstein:not(.meilenstein--unten)::after {
  top: calc(50% - var(--jahr) / 2 - 1.4rem);
}
.meilenstein--unten::after {
  top: calc(50% + var(--jahr) / 2);
}

.meilenstein__karte h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.meilenstein__karte p {
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .meilenstein:hover .meilenstein__jahr { transform: rotate(-3deg); }
}

@media (max-width: 560px) {
  .chronik { grid-auto-columns: minmax(14rem, 1fr); }
  .meilenstein { --jahr: 4.2rem; }
  .meilenstein__jahr { font-size: 1.3rem; }
  .meilenstein__karte { padding: 0.8rem 0.9rem; }
  .meilenstein__karte p { font-size: 0.875rem; }
}

/* --- Chronik: fixierte Bühne --------------------------------------------- */

/* Ohne Skript bleibt alles wie zuvor: eine seitlich scrollbare Reihe mit
   Pfeilen. Erst das Skript setzt .ist-fixiert und macht daraus den Abschnitt,
   der sich beim Herunterscrollen von selbst durchzieht. */
.chronik-buehne.ist-fixiert {
  position: relative;
}

.chronik-buehne.ist-fixiert .chronik-haft {
  position: sticky;
  /* Unter dem stehenden Kopfbereich. */
  top: 84px;
  height: calc(100vh - 84px);
  display: grid;
  align-content: center;
  gap: 2.5rem;
  overflow: hidden;
}

/* In der fixierten Fassung wandert die Reihe per transform — sie darf dann
   nicht zusätzlich seitlich scrollbar sein. */
.chronik-buehne.ist-fixiert .chronik {
  overflow: visible;
  width: max-content;
  /* Feste Spaltenbreite statt 1fr: In einem max-content-Container hat ein
     Bruchteil keinen Bezugswert und die Spalten laufen ins Uferlose — die
     Bühne wäre dann viermal so hoch wie nötig. */
  grid-auto-columns: 20rem;
  will-change: transform;
}
.chronik-buehne.ist-fixiert .scroll-pfeil,
.chronik-buehne.ist-fixiert .scroll-leiste::after { display: none; }

/* Das aktive Jahr wächst, sobald der Balken es erreicht. */
.meilenstein__jahr {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.meilenstein.ist-aktiv .meilenstein__jahr {
  transform: rotate(0) scale(1.35);
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.85);
}
.meilenstein__karte {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              opacity 0.3s var(--ease);
}
.chronik-buehne.ist-fixiert .meilenstein__karte { opacity: 0.55; }
.chronik-buehne.ist-fixiert .meilenstein.ist-aktiv .meilenstein__karte {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.85);
}

/* --- Statusbalken --------------------------------------------------------- */

.chronik-balken {
  display: none;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  height: 10px;
  background: rgba(42, 20, 22, 0.15);
  border: 3px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.chronik-buehne.ist-fixiert .chronik-balken { display: block; }

.chronik-balken__fuellung {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .meilenstein__jahr, .meilenstein__karte { transition: none; }
}

@media (max-width: 920px) {
  .chronik-buehne.ist-fixiert .chronik-haft {
    top: 84px;
    height: calc(100dvh - 84px);
    gap: 1.5rem;
  }
}


/* --- Kartenstapel im Hero ------------------------------------------------ */

/* Zwei Karten liegen uebereinander: vorne die Einblicke aus der Halle,
   dahinter die Projekte. Ein Klick tauscht sie. Der Stapel schiebt sich beim
   ersten Scrollen von rechts ins Bild — vorher steht er ausserhalb, damit er
   die Schlagzeile nicht sofort ueberlagert.

   Formensprache wie bei den Schaltflaechen: 3 px Tinte-Kontur, harter
   Schatten, keine Weichzeichnung. */

@media (min-width: 900px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 30rem);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
  }
}

.kartenstapel {
  position: relative;
  /* Rechts bleibt Platz fuer den herausstehenden Reiter — sonst schneidet
     ihn der Hero ab, der seinen Inhalt beschneidet. */
  width: min(100% - 3rem, 27rem);
  aspect-ratio: 4 / 5;
  margin: clamp(2rem, 6vw, 3rem) auto 0;
  justify-self: end;
  transform: translateX(120%) rotate(5deg);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}
.kartenstapel.ist-da {
  transform: none;
  opacity: 1;
}

@media (min-width: 900px) {
  .kartenstapel { margin-top: 0; margin-right: 2.6rem; }
}

.karte {
  position: absolute;
  inset: 0;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0.9rem;
  box-shadow: 8px 8px 0 rgba(42, 20, 22, 0.85);
  /* Hintere Karte: leicht gedreht und versetzt, damit sie herausschaut und
     als anklickbar zu erkennen ist. */
  transform: rotate(3.5deg) translate(1.1rem, 0.8rem) scale(0.96);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  z-index: 1;
}
.karte.ist-vorn {
  transform: rotate(-1.5deg);
  z-index: 2;
}

/* Die Flaeche zum Umblaettern liegt ueber der Karte — aber unter den
   Kacheln, die eigene Ziele haben. */
.karte__wechsel {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.karte__wechsel:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -6px;
}

/* --- Vorderseite: Einblicke ---------------------------------------------- */

/* Nur hier beschnitten: Die Fotos duerfen beim Heranfahren nicht ueber den
   Rand laufen. Die Projektkarte bleibt unbeschnitten, ihr Reiter steht
   absichtlich heraus. */
.karte--einblicke { overflow: hidden; }

.karte__buehne {
  position: absolute;
  inset: 0;
}

.karte__folie {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.karte__folie.ist-aktiv { opacity: 1; }

.karte__folie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
/* Langsames Heranfahren, solange die Folie zu sehen ist. */
.karte__folie.ist-aktiv img { animation: karte-zoom 9s var(--ease) forwards; }

@keyframes karte-zoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.16); }
}

/* --- Rueckseite: Projekte ------------------------------------------------ */

.karte--projekte {
  display: grid;
  /* minmax(0, …): Das Raster bleibt in der Karte, egal wie groß der Inhalt ist. */
  grid-template-rows: minmax(0, 1fr);
  padding: 0.9rem;
  background: var(--orange);
}

/* Der Reiter steht seitlich aus der Karte heraus — er ist der Griff, an dem
   man sie nach vorn holt, und sagt zugleich, was dahinter steckt. Er ist
   selbst der Knopf: Das Bild daneben schaltet weiter, der Reiter wechselt
   die Karte. Zwei Flaechen, zwei Aufgaben, keine Verwechslung. */
.karte__reiter {
  position: absolute;
  top: 2rem;
  left: 100%;
  z-index: 3;
  cursor: pointer;
  padding: 1rem 0.4rem;
  background: var(--orange);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-left: 0;
  border-radius: 0 0.6rem 0.6rem 0;
  box-shadow: 5px 5px 0 rgba(42, 20, 22, 0.85);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.projektkacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Ueber der Umblaetter-Flaeche: Ein Klick auf eine Kachel fuehrt zur Seite,
     ein Klick daneben blaettert um. */
  position: relative;
  z-index: 2;
}
/* Solange die Karte hinten liegt, blaettert jeder Klick nur um. */
.karte:not(.ist-vorn) .projektkacheln { pointer-events: none; }

.projektkachel {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 0.5rem;
  background: var(--paper);
  text-decoration: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.projektkachel:hover,
.projektkachel:focus-visible {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 rgba(42, 20, 22, 0.85);
}

.projektkachel__bild {
  display: block;
  height: 100%;
  min-height: 4.5rem;
  background:
    repeating-linear-gradient(45deg,
      rgba(42, 20, 22, 0.08) 0 10px,
      rgba(42, 20, 22, 0.14) 10px 20px);
}

/* Trainerteam: sechs Kacheln in drei Reihen. */
.projektkacheln--team { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.projektkacheln > li { min-height: 0; }
/* Foto absolut in der Kachel: Es füllt sie, bestimmt aber nicht ihre Höhe —
   sonst drückte ein 400-px-Foto die Reihe über den Kartenrand. */
.projektkachel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projektkachel__name small {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font-text);
  font-stretch: normal;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.8);
}
.projektkachel--alle {
  display: grid;
  place-items: center;
  background: var(--orange);
}
.projektkachel__alle {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.projektkachel__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.3rem 0.45rem;
  background: rgba(42, 20, 22, 0.88);
  color: var(--white);
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Solange die Projekte vorn liegen, stimmt der Hinweis auf das naechste
   Bild nicht — dann tritt er zurueck. */
.kartenstapel.ist-projekte .kartenstapel__hinweis { opacity: 0; }

.kartenstapel__hinweis {
  transition: opacity 0.3s var(--ease);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.1rem;
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 899px) {
  .kartenstapel { width: min(100% - 3rem, 21rem); }
  .karte__reiter { top: 1.4rem; font-size: 0.72rem; padding: 0.9rem 0.35rem; }
  .kartenstapel__hinweis { bottom: -1.9rem; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kartenstapel { transition: none; }
  .karte { transition: none; }
  .karte__folie { transition: none; }
  .karte__folie.ist-aktiv img { animation: none; }
}

/* --- WNBL: Gelb und Schwarz ---------------------------------------------- */

/* Farben aus dem Logo Porsche BBA × Basketball Aid. Gelten nur für die
   WNBL-Tafel und die WNBL-Seite — der übrige Auftritt bleibt Bordeaux/Orange.
   Schwarz auf Gelb und Gelb auf Schwarz: rund 13 : 1 — für alles erlaubt. */
:root {
  --wnbl-gelb: #fdc913;
  --wnbl-gelb-hell: #ffd84a;
  --wnbl-schwarz: #0b0b0b;
  --wnbl-grau: #1c1c1c;
}

.wnbl-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--wnbl-schwarz);
  color: var(--white);
}

.wnbl-band__info {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--wnbl-gelb);
  color: var(--wnbl-schwarz);
}
.wnbl-band__logo {
  flex: none;
  width: clamp(96px, 12vw, 140px);
  height: auto;
  /* RegioTeam-Logo: Orange auf Gelb ginge unter — darum ein weißer Kreis. */
  padding: 8px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--wnbl-schwarz);
}
.wnbl-band__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wnbl-band__titel {
  margin: 0.4rem 0 0.6rem;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.02;
  color: var(--wnbl-schwarz);
}
.wnbl-band__text { margin: 0 0 1.1rem; font-size: 0.975rem; max-width: 42ch; }
.wnbl-band__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0;
  font-size: 0.925rem;
}
.wnbl-band__links a:not(.btn) { color: var(--wnbl-schwarz); font-weight: 600; }

.wnbl-band__spiel { padding: clamp(1.75rem, 3vw, 2.75rem); }

/* Die Spielkarte von U14w/U16w, umgefärbt. */
.wnbl-band .fixtures__label,
.wnbl-band .fixture__vs,
.wnbl-band .fixture__links a { color: var(--wnbl-gelb); }
.wnbl-band .fixture__status,
.wnbl-band .fixture__wappen { background: var(--wnbl-gelb); color: var(--wnbl-schwarz); }
.wnbl-band .fixture[data-ergebnis] .fixture__vs { color: var(--white); }
.wnbl-band .fixture__links { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.wnbl-band .fixture__team span { font-size: 0.95rem; }
.fixture__ausblick {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--wnbl-gelb);
}

/* Knöpfe: schwarz mit gelber Schrift auf Gelb, Kontur auf Weiß/Gelb. */
.btn--wnbl {
  background: var(--wnbl-schwarz);
  color: var(--wnbl-gelb);
  border-color: var(--wnbl-schwarz);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
}
.btn--wnbl:hover { background: var(--wnbl-grau); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35); }
.btn--wnbl-rand {
  background: transparent;
  color: var(--wnbl-schwarz);
  border-color: var(--wnbl-schwarz);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
}
.btn--wnbl-rand:hover { background: var(--wnbl-schwarz); color: var(--wnbl-gelb); }

@media (max-width: 900px) {
  .wnbl-band { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wnbl-band__info { flex-direction: column; align-items: flex-start; }
}

/* --- WNBL-Seite ---------------------------------------------------------- */

.seite-wnbl .page-head {
  /* Gelber Keil nur hinter dem Logo — der Text steht immer auf Schwarz. */
  background: linear-gradient(105deg, var(--wnbl-schwarz) 0 calc(100% - 22rem), var(--wnbl-gelb) calc(100% - 22rem) 100%);
}
.seite-wnbl .page-head .wrap > div { max-width: min(52rem, calc(100% - 20rem)); }
.seite-wnbl .page-head .eyebrow { color: var(--wnbl-gelb); }
.seite-wnbl .page-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wnbl-kopf__logo {
  flex: none;
  width: clamp(120px, 16vw, 210px);
  height: auto;
  padding: 12px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--wnbl-schwarz);
}
@media (max-width: 760px) {
  .seite-wnbl .page-head { background: var(--wnbl-schwarz); border-bottom: 10px solid var(--wnbl-gelb); }
  .seite-wnbl .page-head .wrap { flex-direction: column-reverse; align-items: flex-start; }
  .seite-wnbl .page-head .wrap > div { max-width: none; }
}

.section--wnbl { background: var(--wnbl-schwarz); color: var(--white); }
.section--wnbl-gelb { background: var(--wnbl-gelb); color: var(--wnbl-schwarz); }
.section--wnbl .eyebrow { color: var(--wnbl-gelb); }
.section--wnbl h2 { color: var(--white); }
.section--wnbl-gelb .eyebrow,
.section--wnbl-gelb h2,
.section--wnbl-gelb h3 { color: var(--wnbl-schwarz); }
.seite-wnbl .eyebrow--ink { color: var(--wnbl-schwarz); }
.seite-wnbl .btn--primary { background: var(--wnbl-gelb); color: var(--wnbl-schwarz); border-color: var(--wnbl-schwarz); }
.seite-wnbl .btn--primary:hover { background: var(--wnbl-gelb-hell); }
.seite-wnbl .cta-band { background: var(--wnbl-gelb); }

.wnbl-knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* Spielplan-Tabelle: Heimspiele gelb hinterlegt. */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data--wnbl { min-width: 50rem; background: var(--white); }
table.data--wnbl th { background: var(--wnbl-schwarz); color: var(--wnbl-gelb); }
.data--wnbl tr.ist-heimspiel { background: rgba(253, 201, 19, 0.25); }
.data--wnbl tr.ist-spielfrei td { color: rgba(11, 11, 11, 0.55); font-style: italic; }
.data--wnbl a { color: var(--wnbl-schwarz); font-weight: 600; }

/* Die sieben Teams der Gruppe. */
.wnbl-gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wnbl-gruppe li {
  padding: 1rem 1.15rem;
  border: 2px solid var(--wnbl-schwarz);
  background: var(--white);
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.wnbl-gruppe li.ist-eigen { background: var(--wnbl-schwarz); color: var(--wnbl-gelb); }
.wnbl-gruppe li { display: flex; align-items: center; gap: 0.9rem; }
.wnbl-gruppe img {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--white);
  border-radius: 50%;
  padding: 3px;
}

/* Der Weg durch die Saison: vier Stufen, je mit gutem und schwerem Ausgang. */
.wnbl-weg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  counter-reset: stufe;
}
.wnbl-weg__stufe {
  position: relative;
  padding: 1.5rem 1.35rem 1.35rem;
  background: var(--wnbl-grau);
  border-top: 6px solid var(--wnbl-gelb);
  counter-increment: stufe;
}
.wnbl-weg__stufe::before {
  content: counter(stufe);
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(253, 201, 19, 0.28);
}
.wnbl-weg h3 { color: var(--wnbl-gelb); margin-bottom: 0.25rem; font-size: 1.35rem; }
.wnbl-weg__zeit {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}
.wnbl-weg p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); }
.wnbl-weg__wege { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.wnbl-weg__wege li {
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
  border-left: 4px solid var(--wnbl-gelb);
  background: rgba(253, 201, 19, 0.1);
}
.wnbl-weg__wege li.ist-unten { border-left-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); }
.wnbl-weg__wege strong { color: var(--white); }

@media (max-width: 1080px) { .wnbl-weg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wnbl-weg { grid-template-columns: 1fr; } }

/* Termine der Runden. */
.wnbl-termine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.wnbl-termine > div { padding: 1.25rem; background: var(--white); border: 2px solid var(--wnbl-schwarz); }
.wnbl-termine h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.wnbl-termine p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* --- Spielpläne auf dem Handy: jede Zeile eine Karte --------------------- */

/* Unter 760 px passen sechs bis sieben Spalten nicht nebeneinander — statt
   seitlich zu schieben, wird jede Zeile zur Karte: oben Spieltag, Datum,
   Uhrzeit und Ergebnis, darunter die Begegnung, dann die Halle. Die kleinen
   Überschriften kommen aus data-label (build.js, zelle()). */
@media (max-width: 760px) {
  .table-wrap,
  .tabelle-scroll { overflow: visible; }
  table.data--spielplan,
  table.data--wnbl { min-width: 0; background: transparent; }
  table.data--spielplan thead { display: none; }
  table.data--spielplan,
  table.data--spielplan tbody { display: block; width: 100%; }

  table.data--spielplan tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "tag datum zeit erg"
      "paar paar paar paar"
      "halle halle halle halle"
      "link link link link";
    column-gap: 1.1rem;
    margin-bottom: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 5px solid var(--line);
  }
  table.data--spielplan tr.ist-heimspiel { border-left-color: var(--orange); }
  table.data--wnbl tr.ist-heimspiel { border-left-color: var(--wnbl-gelb); }

  table.data--spielplan td {
    display: block;
    padding: 0;
    border: 0;
  }
  .data--spielplan .sp__tag { grid-area: tag; }
  .data--spielplan .sp__datum { grid-area: datum; }
  .data--spielplan .sp__zeit { grid-area: zeit; }
  .data--spielplan .sp__erg { grid-area: erg; text-align: right; font-weight: 800; }
  .data--spielplan .sp__paar { grid-area: paar; margin-top: 0.65rem; line-height: 1.35; }
  .data--spielplan .sp__halle { grid-area: halle; margin-top: 0.3rem; font-size: 0.875rem; opacity: 0.75; }
  .data--spielplan .sp__link { grid-area: link; margin-top: 0.5rem; font-size: 0.9rem; }

  /* Kleine Überschrift über den Werten der ersten Zeile. */
  .data--spielplan .sp__tag::before,
  .data--spielplan .sp__datum::before,
  .data--spielplan .sp__zeit::before,
  .data--spielplan .sp__erg::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    font-family: var(--font-display);
    font-stretch: 87.5%;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  /* Spielfrei: eine schmale Zeile. */
  table.data--spielplan tr.ist-spielfrei .sp__paar { margin-top: 0.4rem; }
}

/* --- Einwilligung Fotos und Videos -------------------------------------- */

.einwilligung h3 { margin: 2.2rem 0 0.9rem; }
.einwilligung h3:first-of-type { margin-top: 0; }
.einwilligung__wahl { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.einwilligung__name { margin: 1.5rem 0 0; padding: 0; border: 0; display: grid; gap: 0.5rem; }
.einwilligung__name legend { font-weight: 700; margin-bottom: 0.6rem; }
.einwilligung__info { padding: 1.25rem 1.4rem; background: var(--paper); border-radius: 0.5rem; font-size: 0.95rem; }
.einwilligung__klein,
.einwilligung__alternativ { font-size: 0.9rem; color: rgba(42, 20, 22, 0.75); }
.einwilligung__alternativ { margin-top: 2rem; }

/* Unterschriftsfeld: breit, mit dem Finger beschreibbar. touch-action: none,
   sonst scrollt das Handy die Seite, statt die Linie zu zeichnen. */
.unterschrift { margin-top: 1.5rem; }
.unterschrift__titel { margin: 0 0 0.5rem; font-weight: 700; }
.unterschrift__feld {
  display: block;
  width: 100%;
  height: 180px;
  background:
    linear-gradient(to top, transparent 34px, rgba(42, 20, 22, 0.35) 34px, rgba(42, 20, 22, 0.35) 35px, transparent 35px),
    var(--white);
  border: 2px dashed rgba(42, 20, 22, 0.35);
  border-radius: 0.5rem;
  touch-action: none;
  cursor: crosshair;
}
.unterschrift.ist-unterschrieben .unterschrift__feld { border-style: solid; border-color: var(--ink); }
.unterschrift__fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  color: rgba(42, 20, 22, 0.7);
}
.einwilligung__frage { margin: 1.75rem 0 0.5rem; font-weight: 600; }
.einwilligung__janein { display: flex; gap: 2rem; }
.einwilligung__name + .einwilligung__name { margin-top: 1rem; }
.einwilligung__info { margin: 1.5rem 0; }
.unterschrift__feld--klein { height: 130px; }