/* ==========================================================================
   TT-Akademie Külsheim — Seiten-Stylesheet
   --------------------------------------------------------------------------
   Zusammenführung von styles.css, site-fx.css, site-neu.css, foto-damen.css
   und nav-2026.css der Designreferenz (Stand 2026-09-18).

   Regeln dieser Zusammenführung:
   • Kein Wert wurde geändert. Ziel ist gleiches Aussehen, nicht besseres.
   • Die Reihenfolge der Abschnitte folgt der Kaskade der Referenz
     (colors → styles → site-fx → site-neu → foto-damen → nav-2026),
     damit spätere Überschreibungen weiterhin greifen.
   • Doppelt deklarierte Regeln sind an einer Stelle zusammengefasst; der
     gewinnende Wert der Referenz wurde übernommen. Jede Zusammenfassung ist
     am Ort vermerkt.
   • Der Mitgliederbereich („Intern") ist entfallen: nav-2026.js:380-389
     entfernt den Abschnitt und alle Links darauf, site-fx.css:9-11 blendet
     die Reste aus. Die zugehörigen Regeln (styles.css:213-236, 301-302)
     waren damit toter Code und sind hier nicht mehr enthalten.

   Setzt tta-tokens.css voraus.
   ========================================================================== */


/* ==========================================================================
   1. Grundlagen
   ========================================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* hält Ankerziele frei vom klebenden Kopf */
  scroll-padding-top: var(--anker-versatz);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: var(--linie-18);
  overflow-x: hidden;
}

/* sperrt das Scrollen, solange das Klappmenü offen ist */
body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; }
/* Frappes website.bundle setzt `a:hover{color:#000;text-decoration:underline}`
   fuer jeden Link - ganze Karten-Links wurden beim Ueberfahren schwarz und
   unterstrichen. Gleiche Spezifitaet, spaeter geladen: Links behalten ihre
   Farbe; wer Unterstreichen will, setzt es am eigenen Selektor. */
a:hover, a:focus { color: inherit; text-decoration: none; }

/* ---- Ueberschriften erben die Farbe ihrer Flaeche ----------------------

   Frappes Website-Basis faerbt h1..h6 DIREKT: bootstrap 4.6.2
   scss/_type.scss:7-14 setzt `color: $headings-color`, und
   frappe/public/scss/website/variables.scss:10 belegt $headings-color mit
   $gray-900 = #171717 (frappe/public/scss/espresso/_colors.scss:14).
   Eine direkte Regel am Element gewinnt immer gegen Vererbung, egal wie
   spezifisch der Vorfahre ist. Deshalb kam die H1 im Seiten-Hero am
   2026-09-18 fast schwarz (rgb(23,23,23)) auf dem Petrol-Verlauf heraus,
   waehrend der Lead darunter richtig weiss war.

   Diese eine Regel stellt die Vererbung fuer ALLE Ueberschriften wieder
   her. Damit bestimmt allein die Flaeche die Farbe: helle Flaeche -> --ink
   vom body, dunkle Flaeche -> deren #fff. Das gilt auch fuer Flaechen, die
   es heute noch nicht gibt.

   Sie steht bewusst als ELEMENT-Regel (0,0,1): jede eigene Klassenregel
   dieser Datei (.section-head h2, .package h3, .news-card--accent h3 …)
   ist spezifischer und gewinnt weiter, unabhaengig von der Reihenfolge.
   Gegen Frappes gleich spezifische h1..h6-Regel gewinnt sie, weil unsere
   Stylesheets im style-Block von tta_basis.html NACH der Website-Basis
   geladen werden.

   VORHER standen dafuer am Dateiende zwei gewachsene Listen betroffener
   Klassen (.hero h1 …, .page-hero h1 …, .site-footer h2 …, im Nachtrag
   .section--petrol h1 … und .heft-card--current h3). Jede neue dunkle
   Flaeche brauchte einen weiteren Eintrag, jede vergessene Klasse war
   wieder dunkel. Beide Listen sind durch diese Regel vollstaendig
   abgedeckt und deshalb entfernt. Bitte keine neue anlegen: eine dunkle
   Flaeche braucht nur `color: #fff` am Container, die Ueberschrift folgt
   von allein. */
h1, h2, h3, h4, h5, h6 { color: inherit; }


/* ---- Schriftgroessen am ELEMENT, nicht an einer Elternliste ----------

   BEFUND DES AUDITS 2026-09-20 (Kurzfassung 9), HIER BEHOBEN.

   Die Groesse der H2 stand ausschliesslich in einer Aufzaehlung von
   Elternklassen (.section-head h2, .split__content h2, .event-copy h2,
   .trailer-copy h2, .contact-card h2 - weiter unten in §10). Eine H2, die
   zufaellig in keinem dieser fuenf Container stand, bekam gar keine Regel.
   Gemessen kam dabei heraus: 64,8px innerhalb, 38,4px auf /newsletter und
   /kontakt, 40px auf /mannschaften und /spielplan, mobil 22,4px. Nicht
   zwei Groessen, sondern vier - je nachdem, welchen Vorfahren die
   Ueberschrift zufaellig hatte.

   Eine Groesse gehoert an das Element. Diese vier Regeln geben jeder
   Ueberschrift der Site einen Grundwert aus der Leiter in tta-tokens.css
   §8b. Die grosse H2 der fuenf Container bleibt als BEWUSSTE Abweichung
   bestehen und gewinnt weiter, weil sie spezifischer ist.

   SPEZIFITAET: 0,0,1, genau wie die Farbregel darueber. Frappes
   Website-Basis bringt fuer h1..h6 ebenfalls nur Elementregeln mit
   (bootstrap 4.6.2 scss/_type.scss:1-14, $h1-font-size..$h6-font-size,
   und website/variables.scss). Bei gleicher Spezifitaet gewinnt die
   spaeter geladene Datei - unsere Stylesheets haengen im style-Block von
   tta_basis.html NACH der Website-Basis. Dieselbe Begruendung wie oben,
   deshalb ohne !important.

   Die Aussenabstaende bleiben absichtlich unberuehrt: Frappes Basis setzt
   an h1..h6 margin-top:0 und margin-bottom:.5rem, jede Karte und jeder
   Kopf dieser Datei setzt seinen eigenen Wert daneben. Hier nur die
   Groesse anzufassen haelt den Eingriff klein und nachvollziehbar. */
h1 { font-size: var(--schrift-d2); line-height: .96; }
h2 { font-size: var(--schrift-2);  line-height: 1.06; }
h3 { font-size: var(--schrift-4);  line-height: 1.2; }
h4 { font-size: var(--schrift-5);  line-height: 1.3; }


/* ---- Fokusring auf hellem UND dunklem Grund ---------------------------

   VORHER: `outline: 3px solid var(--gold)` mit 2px Versatz. Der Versatz
   zeigt den Seitengrund, der Ring liegt also nicht am Element, sondern
   frei davor. Gerechnet:
     Gold #fdad1f auf --petrol      #0b6570 = 3,59:1  (genuegt)
     Gold #fdad1f auf --paper       #fffdf8 = 1,85:1  (zu wenig)
     Gold #fdad1f auf #ffffff (Karte)       = 1,88:1  (zu wenig)
   WCAG 1.4.11 verlangt 3:1 gegen die ANGRENZENDE Farbe. Auf jeder hellen
   Flaeche - und das ist der groessere Teil der Site - war der Ring damit
   rechnerisch unsichtbar.

   Jetzt fuellt ein 2px breiter Petrolring den Versatz. Der Goldring
   grenzt damit ueberall an dieselbe dunkle Farbe:
     Gold #fdad1f auf --petrol-dark #06474f = 5,53:1  (ueberall)
   und der Petrolring wiederum an den Untergrund:
     #06474f auf --paper  #fffdf8 = 10,22:1
     #06474f auf #ffffff          = 10,39:1
   Auf dunklem Grund (Hero, Fusszeile) traegt der Goldring die Sichtbarkeit,
   auf hellem der Petrolring - eine Regel fuer beide Faelle. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
  box-shadow: 0 0 0 2px var(--petrol-dark);
  border-radius: 6px;
}

section[id] { scroll-margin-top: var(--anker-versatz); }

[hidden] { display: none !important; }


/* ---- Container und Abschnittsflächen ----------------------------------- */

.container {
  width: min(var(--container), calc(100% - var(--container-rand)));
  margin: 0 auto;
}

/* Hero-Rhythmus: BEFUND DES AUDITS 2026-09-20, HIER BEHOBEN.
   Die Startseite lief mit 96/80, jede Unterseite mit 78/60 - zwei
   Rhythmen ohne Grund. Beide stehen jetzt auf --raum-10 / --raum-9.
   Die Unterseiten werden dadurch oben 18px und unten 20px luftiger.
   Siehe auch .page-hero in §7, das die zweite Haelfte dieses Befunds ist. */
.section     { padding: var(--abstand-abschnitt) 0; }
.section-pad { padding: var(--raum-10) 0 var(--raum-9); }

.section--light {
  background: linear-gradient(180deg, var(--white) 0%, var(--petrol-soft) 100%);
}

.section--petrol {
  background:
    radial-gradient(circle at top left, var(--gold-28), transparent 32%),
    linear-gradient(135deg, var(--petrol), var(--petrol-dark));
  color: var(--white);
}

.center-actions {
  display: flex;
  gap: var(--raum-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--raum-6);
}


/* ---- Hilfsklassen ------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: var(--z-skiplink);
  background: var(--white);
  padding: var(--raum-3) var(--raum-3);
  border-radius: var(--radius-mini);
}
.skip-link:focus { left: 8px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Honigtopf gegen Formular-Roboter.

   DIESE KLASSE GIBT ES BEREITS - Lane 2 braucht keine neue. Sie ist genau
   so gebaut, wie ein Honigtopf gebaut sein muss: NICHT display:none (das
   fuellen viele Roboter gerade deshalb nicht aus), sondern weit aus dem
   Bild geschoben. Fuer Vorlesesoftware gehoert `aria-hidden="true"` und
   `tabindex="-1"` ans Feld dazu; so steht es bereits in
   www/newsletter.html:35, www/kontakt.html:98 und
   templates/includes/footer.html:69.
   left und position tragen !important, weil .form-grid und .form-field das
   Feld sonst als Rasterzelle wieder einblenden wuerden. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   2. Topline — schmale Kontaktleiste ganz oben
   ========================================================================== */

.topline {
  background: var(--petrol-dark);
  color: var(--white);
  font-size: var(--text-sm);
}

.topline__inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-5);
  flex-wrap: wrap;
}

.topline a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--weiss-45);
}


/* ==========================================================================
   3. Spiele-Ticker („Nächste Spiele")
   Herkunft: site-fx.css:21-86. Liegt zwischen Topline und Kopf.
   ========================================================================== */

.tt-ticker {
  background: var(--ticker-bg);
  color: var(--ticker-text);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  border-bottom: 1px solid var(--gold-35);
  /* Klebt beim Scrollen oben. In der Referenz setzt site-neu.js:38-57 das
     per element.style; hier steht es fest im Stylesheet. sticky erzeugt auch
     den Positionierungskontext, den .tt-ticker__label braucht (vorher
     position:relative in site-fx.css:28). */
  position: sticky;
  top: 0;
  z-index: var(--z-ticker);
}

.tt-ticker__label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  background: var(--gold);
  color: var(--ticker-label-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Das Innenmass bestimmt die Hoehe des ganzen Tickers und damit die des
   Anhalte-Knopfs, der darin von oben bis unten steht. min-height haelt die
   Zeile auf den 44px, die der Knopf als Trefferflaeche braucht - siehe
   .tt-ticker__pause weiter unten. Rechnung: 13px Schrift x 1,4 = 18,2px
   plus 2 x 12px Innenmass = 42,2px, die letzten 1,8px kommen aus
   min-height. */
.tt-ticker__viewport {
  overflow: hidden;
  padding: var(--raum-3) 0;
  min-height: 44px;
}

.tt-ticker__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: tt-ticker-run var(--ticker-dauer) linear infinite;
}

/* anhalten, solange die Maus darauf liegt oder etwas darin den Fokus hat */
.tt-ticker:hover .tt-ticker__track,
.tt-ticker:focus-within .tt-ticker__track { animation-play-state: paused; }

@keyframes tt-ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tt-ticker__item { padding: 0 var(--raum-5); white-space: nowrap; }
/* Lücke, bevor die Liste von vorn beginnt */
.tt-ticker__gap  { display: inline-block; width: 14rem; }
.tt-ticker__when { color: var(--gold); font-weight: 700; }
.tt-ticker__team { font-weight: 600; }
.tt-ticker__vs   { opacity: .75; }
.tt-ticker__hall { opacity: .8; }
.tt-ticker__dot  { opacity: .45; }

/* Auf schmalen Schirmen nähme das Label zu viel Platz weg. */
@media (max-width: 640px) {
  .tt-ticker__label { display: none; }
}
@media (min-width: 641px) {
  /* Bleibt bewusst ein harter Wert: das ist keine Rhythmus-Groesse,
     sondern die Breite des absolut gesetzten .tt-ticker__label, die das
     Laufband freihalten muss. Wer den Labeltext oder sein Innenmass
     aendert, muss diesen Wert nachmessen. */
  .tt-ticker__viewport { margin-left: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-ticker__track   { animation: none; }
  .tt-ticker__viewport { overflow-x: auto; }
}


/* ==========================================================================
   4. Kopf, Marke, Hauptnavigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  background: var(--weiss-94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--linie-mittel);
  transition: box-shadow var(--tempo-kopf) ease, background var(--tempo-kopf) ease;
}

/* JS setzt .is-scrolled, sobald die Seite bewegt wurde */
.site-header.is-scrolled {
  background: var(--weiss-98);
  box-shadow: 0 10px 30px var(--schatten-12);
}

.nav {
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-5);
  transition: height var(--tempo-kopf) ease;
}
.site-header.is-scrolled .nav { height: var(--kopf-hoehe-scroll); }

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img {
  height: var(--logo-hoehe);
  width: auto;
  transition: height var(--tempo-kopf) ease;
}
.site-header.is-scrolled .brand img { height: var(--logo-hoehe-scroll); }

/* Die Navigationspunkte sind Flex-Kinder und damit blockartig - min-height
   greift. Ohne sie kamen sie in der engen Leiste auf 10px + 10px + 23,8px
   Zeilenhoehe = 43,8px heraus, also 0,2px unter dem Mindestmass. Mit
   align-items:center bleibt der Text dabei mittig.
   Zum zweiten Teil des Befunds - .nav-drop__btn misst mobil 0 x 0px - siehe
   den Vermerk bei .nav-drop__btn. */
.mainnav { display: flex; align-items: center; gap: var(--raum-1); }
.mainnav a,
.nav-drop__btn { min-height: 44px; }

/* white-space stammt aus site-fx.css:6-7 — hier zusammengefasst,
   damit "Spielplan & Termine" nicht auf zwei Zeilen bricht. */
.mainnav a {
  position: relative;
  text-decoration: none;
  font-weight: 700;
  color: var(--petrol-dark);
  padding: var(--raum-3) var(--raum-3);
  border-radius: var(--radius-pille);
  white-space: nowrap;
  transition: var(--tempo) ease;
}
.mainnav a:hover,
.mainnav a:focus { background: var(--petrol-soft); color: var(--petrol); }

.mainnav a.is-active { color: var(--petrol); }
.mainnav a.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 3px;
  border-radius: var(--radius-pille);
  background: var(--gold);
}


/* ---- Aufklappknopf und Verdunkler -------------------------------------- */

.nav-toggle {
  display: none;
  border: 0;
  background: var(--petrol);
  width: 46px;
  height: 46px;
  border-radius: var(--radius-mini);
  padding: var(--raum-3);
  cursor: pointer;
}
.nav-toggle span:not(.sr-only) {
  display: block;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
  border-radius: var(--radius-pille);
  transition: transform var(--tempo-kopf) ease, opacity var(--tempo) ease;
}
/* Burger wird zum Kreuz */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--schatten-45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 0;
}


/* ---- Klappmenüs in der Hauptnavigation --------------------------------- */

.nav-drop { position: relative; display: flex; align-items: center; }

/* Der Audit-Befund "0 x 0px bei geschlossenem Menue" ist KEIN Fehler
   dieser Regel: unterhalb von 980px steht .mainnav auf `display:none`,
   solange das Klappmenue zu ist. Ein Kind eines display:none-Elements hat
   definitionsgemaess keine Box - jede Messung liefert dort 0 x 0px, auch
   bei tadellosem CSS. Offen gemessen: 15px + 15px Innenmass plus 1,08rem
   x 1,6 = 27,6px Zeilenhoehe = 57,6px Hoehe bei voller Breite. Die Flaeche
   ist da, sobald es etwas zu treffen gibt.
   Repariert ist trotzdem etwas: die waagerechte Leiste lag mit 43,8px
   knapp unter dem Mindestmass, dafuer sorgt jetzt das min-height oben. */
.nav-drop__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font: inherit;
  font-weight: 700;
  color: var(--petrol-dark);
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--raum-3) var(--raum-3);
  border-radius: var(--radius-pille);
  white-space: nowrap;
  transition: var(--tempo) ease;
}
.nav-drop__btn:hover,
.nav-drop__btn:focus-visible { background: var(--petrol-soft); color: var(--petrol); }

/* Pfeil als reines CSS-Dreieck */
.nav-drop__chev {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: .7;
  transition: transform var(--tempo) ease;
}
.nav-drop.is-open .nav-drop__chev { transform: rotate(180deg); }

/* Menü, dessen Unterseite gerade offen ist */
.nav-drop.is-current .nav-drop__btn { color: var(--petrol); }
.nav-drop.is-current .nav-drop__btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 26px;
  bottom: 3px;
  height: 3px;
  border-radius: var(--radius-pille);
  background: var(--gold);
}

.nav-drop__menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 310px;
  padding: var(--raum-3);
  border-radius: var(--radius-s);
  background: var(--white);
  border: 1px solid var(--linie-mittel);
  box-shadow: var(--shadow-menue);
}
.nav-drop.is-open > .nav-drop__menu { display: block; }

.nav-drop__menu a {
  display: block;
  padding: var(--raum-3) var(--raum-3);
  border-radius: var(--radius-feld);
  font-weight: 700;
  font-size: var(--text-m);
  color: var(--petrol-dark);
  text-decoration: none;
  white-space: normal;
}
.nav-drop__menu a::after { display: none !important; }
.nav-drop__menu a:hover,
.nav-drop__menu a:focus-visible { background: var(--petrol-soft); color: var(--petrol); }
.nav-drop__menu a.is-active { background: var(--petrol-soft); color: var(--petrol); }
/* Das Winkelzeichen ist Text auf weissem Klappmenue - gleiche Rechnung. */
.nav-drop__menu a.is-active::before { content: "› "; color: var(--gold-auf-hell); font-weight: 900; }


/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ziel-hoehe);
  border-radius: var(--radius-pille);
  text-decoration: none;
  font-weight: 900;
  transition: transform var(--tempo) ease, box-shadow var(--tempo) ease,
              background var(--tempo) ease, border-color var(--tempo) ease;
}
.btn:hover { transform: translateY(var(--anheben-knopf)); }
/* ---- Knopf-Innenmass gegen Frappes :not()-Kette halten ----------------

   Das Innenmass gehoert zum Knopf, steht aber NICHT im Block oben: Frappe
   setzt es mit einer spezifischeren Regel.

     frappe/public/scss/common/buttons.scss:8-11 (Upstream version-16)
       .btn {
         &:not(.btn-md):not(.btn-lg):not(.btn-xs) { padding: 4px 8px; }
       }

   Das ist eine Klasse plus drei :not()-Klassen, also Spezifitaet 0,4,0.
   `.btn { padding: 0 20px }` hatte 0,1,0 und verliert dagegen UNABHAENGIG
   von der Ladereihenfolge. Die Knoepfe kamen dadurch seitlich mit 8px
   statt 20px heraus, also deutlich schmaler als gestaltet, und senkrecht
   mit 4px statt 0. (Das Seitenmass steht seit 2026-09-20 auf --raum-5 und
   damit auf 24px statt 20px - die Spezifitaetsfalle daran ist dieselbe.) Die Regel gilt auch auf der Website: website.bundle.scss
   laedt website/index.scss, und das importiert `../common/buttons`.

   Diese Regel traegt bewusst dieselbe :not()-Kette und damit dieselben
   0,4,0. Ein !important ist nicht noetig: bei gleicher Spezifitaet gewinnt
   die spaeter geladene Datei, und unsere Stylesheets haengen im style-Block
   von tta_basis.html NACH der Website-Basis - dieselbe Begruendung wie beim
   Farbsatz darunter. Kein Eintrag je Knopfvariante: die Kette greift alle
   Knoepfe auf einmal. Unsere Knoepfe tragen ausschliesslich
   `btn btn--<variante>` (makros.html:240, footer.html:70, index.html:38-39,
   kontakt.html:114, newsletter.html:51); btn-md, btn-lg und btn-xs kommen
   im ganzen Repo nicht vor, die Kette greift also immer.

   Die uebrigen Knopfmasse sind am Upstream geprueft und NICHT betroffen,
   sie stehen alle direkt an `.btn` mit 0,1,0 und sind damit schon durch die
   Ladereihenfolge erledigt: border-radius (buttons.scss:12), box-shadow
   (:13), font-size/font-weight/letter-spacing (:14, @include
   get_textstyle -> espresso/_typography.scss:96-99). `height` setzt Frappe
   nur an `.btn.icon-btn` (:23-24) - diese Klasse kommt bei uns nicht vor.
   `min-height` setzt Frappe ueberhaupt nicht. `line-height` kommt aus
   bootstraps `.btn` mit 0,1,0. `.btn.btn-lg { font-size }`
   (website/base.scss) greift ohne btn-lg nie. */
.btn:not(.btn-md):not(.btn-lg):not(.btn-xs) { padding: 0 var(--raum-5); }


/* ---- Knopffarben gegen Frappes .btn-Regeln halten ---------------------

   Die drei Varianten setzen ihre Farbe mit EINER Klasse (0,1,0). Im
   Ruhezustand genuegt das, weil diese Datei spaeter geladen wird. Frappes
   Website-Basis bringt aber Zustandsregeln mit, die spezifischer sind oder
   ein !important tragen:

     bootstrap 4.6.2 scss/_buttons.scss:22-25
       .btn:hover  { color: $body-color; }      -> 0,2,0 schlaegt 0,1,0
       ($body-color = $gray-700 = #525252, website/variables.scss:7)
     frappe/public/scss/common/buttons.scss:16-21
       .btn:active { color: var(--text-color) !important;
                     background-color: var(--control-bg) !important; }

   Sichtbar wurde das als grauer Text auf dem Goldknopf beim Zeigen und als
   grauer Knopf beim Antippen - auf Beruehrgeraeten bleibt :active waehrend
   der ganzen Beruehrung stehen.

   Loesung ohne Liste je Knopf: die Variante hinterlegt ihre Farben als
   eigene Eigenschaften (--btn-schrift, --btn-flaeche). Die vererben normal
   und kennen keine Spezifitaet. Die Zustandsregeln unten greifen sie
   einmal fuer alle Varianten ab. Eine neue Variante braucht deshalb nur
   diese zwei Eigenschaften und keine Zustandsregel mehr. */

/* --- Der Hauptknopf traegt Petrol, nicht Gold ------------------------

   ENTSCHEIDUNG MARC, 2026-09-20: Knoepfe auf Petrol mit weisser Schrift.

   Weisse Schrift auf dem Markengold #fdad1f ergibt 1,88:1 und ist
   unlesbar; das war nie eine Option. Der vorherige Stand (--on-gold
   #2b2508 auf Gold = 8,15:1) war rechnerisch in Ordnung, aber der Knopf
   sah damit wie ein Warnhinweis aus. Petrol traegt Weiss muehelos:

     normal          #ffffff auf --petrol      #0b6570 =  6,75:1
     :hover          --petrol auf --grau-100   #eef0f1 =  5,9:1
     :focus-visible  wie :hover, Ring siehe §1
     :active         --petrol auf --grau-200   #e1e4e6 =  5,3:1
                     (--btn-flaeche haelt die Flaeche gegen Frappes
                      !important-Regel, siehe Block darunter)

   ENTSCHEIDUNG MARC, 2026-10-02: Hover nicht mehr dunkel (--petrol-dark
   wirkte schwarz), sondern hell: --grau-100, Schrift und 1px Rahmen
   Petrol. Der Rahmen liegt im Ruhezustand transparent an, damit der
   Knopf beim Zeigen nicht um 1px springt.
     :disabled       --petrol-dark auf --silver #c2c6ca = 6,05:1

   GOLD BLEIBT AKZENTFARBE. Es traegt weiterhin Zahlen (.hero__stats
   strong, .offer-card span), Kicker (.eyebrow), Linien (.match-row--heim,
   .team-cat-head h2), Zierkreise und die goldenen Flaechen mit dunkler
   Schrift (.heft-card__cta, .person-card__role, .map-placeholder a).
   Nur der Hauptknopf wechselt.

   Der goldene Schlagschatten passt unter einer Petrolflaeche nicht mehr -
   er sah aus wie ein zweiter, verrutschter Rand. Dafuer gibt es
   --shadow-knopf mit derselben Geometrie auf der Schattengrundfarbe. */
.btn--primary {
  border: 1px solid transparent;
  background: var(--petrol);
  box-shadow: var(--shadow-knopf);
  --btn-schrift: var(--white);
  --btn-flaeche: var(--petrol);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  border-color: var(--zustand-hover-rahmen);
  background: var(--zustand-hover-flaeche);
  --btn-schrift: var(--zustand-hover-schrift);
  --btn-flaeche: var(--zustand-hover-flaeche);
}
.btn--primary:active {
  border-color: var(--zustand-hover-rahmen);
  --btn-schrift: var(--zustand-hover-schrift);
  --btn-flaeche: var(--zustand-active-flaeche);
}
/* Auf Dunkel: Hover hellt die Flaeche fast deckend auf, Schrift Petrol. */
.btn--ghost {
  border: 1px solid var(--weiss-38);
  background: var(--weiss-08);
  --btn-schrift: var(--white);
  --btn-flaeche: var(--weiss-08);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--zustand-hover-auf-dunkel);
  --btn-schrift: var(--petrol);
  --btn-flaeche: var(--zustand-hover-auf-dunkel);
}
.btn--ghost:active {
  --btn-schrift: var(--petrol);
  --btn-flaeche: var(--weiss-80);
}
/* Sekundaer: --grau-50 und Petrolrahmen beim Zeigen. */
.btn--ghost-dark {
  border: 1px solid var(--linie-stark);
  background: var(--white);
  --btn-schrift: var(--petrol-dark);
  --btn-flaeche: var(--white);
}
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  border-color: var(--zustand-hover-rahmen);
  background: var(--grau-50);
  --btn-flaeche: var(--grau-50);
}
.btn--ghost-dark:active {
  border-color: var(--zustand-hover-rahmen);
  --btn-flaeche: var(--zustand-active-flaeche);
}

.btn,
.btn:hover,
.btn:focus,
.btn:focus-visible { color: var(--btn-schrift, var(--petrol-dark)); }

/* Nur hier ein !important, weil Frappes :active-Regel selbst eines traegt. */
.btn:active {
  color: var(--btn-schrift, var(--petrol-dark)) !important;
  background: var(--btn-flaeche, transparent) !important;
}

/* Gesperrter Knopf: fester Farbsatz statt Bootstraps `opacity: .65`
   (scss/_buttons.scss:33). Opazitaet rechnet den Kontrast herunter, ohne
   dass man ihm ansieht, wo er landet - auf Petrol waeren es 2,6:1. Der
   Satz hier steht fest bei 6,05:1 und ist trotzdem eindeutig als gesperrt
   zu erkennen, weil Flaeche und Schatten wechseln.
   Die :not()-Kette traegt dieselben 0,4,0 wie Frappes Innenmassregel. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--silver) !important;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  --btn-schrift: var(--petrol-dark);
  --btn-flaeche: var(--silver);
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; }

.link-row { display: flex; flex-wrap: wrap; gap: var(--raum-3); margin-top: var(--raum-5); }


/* ==========================================================================
   6. Hero (Startseite)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-dark) 56%, var(--petrol-deep) 100%);
  color: var(--white);
}
/* zwei Zierkreise: gold oben rechts, silbrig unten links */
.hero:before {
  content: "";
  position: absolute;
  width: 720px; height: 720px;
  right: -220px; top: -260px;
  border-radius: 50%;
  background: var(--gold-schleier);
}
.hero:after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  left: -180px; bottom: -220px;
  border-radius: 50%;
  background: rgba(194, 198, 202, .16);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: var(--raum-8);
  align-items: center;
}

.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 900;
  font-size: var(--text-xs);
  margin: 0 0 var(--raum-3);
}

.hero h1 {
  font-size: var(--schrift-d1);
  line-height: .92;
  margin: 0 0 var(--raum-5);
  letter-spacing: 0;
}

.lead {
  font-size: clamp(1.18rem, 2.2vw, 1.55rem);
  max-width: 670px;
  margin: 0 0 var(--raum-6);
  color: var(--weiss-90);
}

/* wird auch im Kontaktblock als Buttonleiste wiederverwendet */
.hero__actions { display: flex; gap: var(--raum-3); flex-wrap: wrap; align-items: center; }

.hero__visual { position: relative; }

/* leicht gekipptes Bild im weißen Passepartout */
.image-card {
  border-radius: var(--radius);
  padding: var(--raum-3);
  background: var(--weiss-16);
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}
.image-card img {
  border-radius: calc(var(--radius) - 8px);
  min-height: 450px;
  object-fit: cover;
  width: 100%;
}

/* schwebende Karte links unten am Hero-Bild */
.float-card {
  position: absolute;
  left: -22px;
  bottom: 28px;
  background: var(--white);
  color: var(--petrol-dark);
  border-radius: var(--radius-m);
  padding: var(--raum-4) var(--raum-4);
  display: flex;
  gap: var(--raum-3);
  align-items: center;
  font-weight: 900;
  box-shadow: var(--shadow);
}
/* zusammengefasst aus styles.css:100 und styles.css:299 */
.float-card__icon { display: inline-flex; font-size: 2rem; }
.float-card__icon svg { width: 38px; height: 38px; }


/* ==========================================================================
   7. Seiten-Hero (Unterseiten)
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-dark) 60%, var(--petrol-deep) 100%);
  color: var(--white);
  /* war 78px 0 60px - jetzt derselbe Rhythmus wie .hero.section-pad
     auf der Startseite (§1). */
  padding: var(--raum-10) 0 var(--raum-9);
}
.page-hero:before {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  right: -200px; top: -240px;
  border-radius: 50%;
  background: var(--gold-schleier);
}
.page-hero:after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  left: -160px; bottom: -200px;
  border-radius: 50%;
  background: rgba(194, 198, 202, .14);
}
.page-hero .container { position: relative; z-index: 1; }

/* Kapiteloeffner des Saisonhefts als Hero-Bild (seiten_hero.html, hero.bild) */
.page-hero--bild { position: relative; overflow: hidden; }
.page-hero__bild {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: .28; pointer-events: none;
}

.page-hero h1 {
  font-size: var(--schrift-d2);
  line-height: .96;
  margin: 0 0 var(--raum-4);
  letter-spacing: 0;
}
.page-hero .lead { margin-bottom: 0; }

.page-hero .breadcrumb {
  margin: 0 0 var(--raum-3);
  font-size: var(--text-sm);
  color: var(--weiss-72);
  font-weight: 700;
}
.page-hero .breadcrumb a { color: var(--gold); text-decoration: none; }


/* ==========================================================================
   8. Kennzahlen-Leisten
   ========================================================================== */

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
  margin-top: var(--raum-6);
  max-width: 650px;
}
.hero__stats div {
  border: 1px solid var(--weiss-22);
  background: var(--weiss-10);
  border-radius: var(--radius-m);
  padding: var(--raum-4);
}
.hero__stats strong { display: block; color: var(--gold); font-size: var(--schrift-4); line-height: 1.1; }
.hero__stats span   { color: var(--auf-dunkel); font-weight: 700; }

/* gleiche Bausteine, aber als umbruchfähige Reihe */
.page-stats { display: flex; gap: var(--raum-3); flex-wrap: wrap; margin-top: var(--raum-5); }
.page-stats div {
  border: 1px solid var(--weiss-22);
  background: var(--weiss-10);
  border-radius: var(--radius-xs);
  padding: var(--raum-3) var(--raum-5);
}
.page-stats strong { display: block; color: var(--gold); font-size: 1.3rem; line-height: 1.1; }
.page-stats span   { color: var(--auf-dunkel); font-weight: 700; font-size: var(--text-sm); }


/* ==========================================================================
   9. Schnellzugriff — schiebt sich über den Abschnitt darüber
   ========================================================================== */

/* Der einzige negative Aussenabstand der Site - und er BLEIBT, weil er
   nichts korrigiert, sondern etwas gestaltet: die Schnellzugriffskarten
   sollen sichtbar in den Hero darueber greifen. Der Wert war mit -36px
   frei gegriffen und liegt jetzt auf der Leiter (-32px). */
.quicklinks {
  margin-top: calc(var(--raum-6) * -1);
  position: relative;
  z-index: var(--z-quicklinks);
}
.quicklinks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--raum-4); }

.quick-card {
  min-height: 112px;
  padding: var(--raum-5);
  background: var(--white);
  border-radius: var(--radius-l);
  text-decoration: none;
  box-shadow: var(--shadow);
  border: 1px solid var(--linie);
  transition: var(--tempo) ease;
}
.quick-card:hover { transform: translateY(var(--anheben-karte)); border-color: var(--gold-rahmen); }
.quick-card span   { display: block; color: var(--muted); font-weight: 800; font-size: var(--text-klein); }
.quick-card strong { display: block; color: var(--petrol); font-size: 1.3rem; margin-top: var(--raum-1); }


/* ==========================================================================
   10. Abschnittsköpfe
   ========================================================================== */

.section-head { max-width: var(--breite-kopf); margin: 0 auto var(--raum-7); text-align: center; }

/* Die grosse H2 der fuenf Abschnittscontainer. Das ist jetzt eine
   BEWUSSTE ABWEICHUNG vom Grundwert (§1: h2 -> --schrift-2), nicht mehr
   die einzige Stelle, an der H2 ueberhaupt eine Groesse bekommt. */
.section-head h2,
.split__content h2,
.event-copy h2,
.trailer-copy h2,
.contact-card h2 {
  font-size: var(--schrift-1);
  line-height: 1.02;
  letter-spacing: 0;
  margin: 0 0 var(--raum-4);
  color: var(--petrol-dark);
}

.section-head p { margin: 0; color: var(--muted); font-size: var(--text-xl); }
.section-head--invert h2,
.section-head--invert p { color: var(--white); }


/* ==========================================================================
   11. Aktuelles — Meldungskarten und Historie
   ========================================================================== */

.news-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--raum-5); align-items: start; }
.news-grid   { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-5); align-items: stretch; }

.news-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--linie-zart);
}
.news-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;
}
.news-card__body { padding: var(--raum-5); }
/* BEFUND DES AUDITS 2026-09-20 (Kurzfassung 10), HIER BEHOBEN.
   `color: var(--gold)` auf der weissen Karte ergab 1,88:1 bei 14,4px und
   Gewicht 900; gefordert sind 4,5:1. Sechs Vorkommen allein auf der
   Startseite. --gold-auf-hell ist derselbe Farbfamilienton in lesbar:
     #7a5a10 auf #ffffff = 6,37:1
   Die Markenfarbe bleibt, wo sie Flaeche, Linie oder Ziffer ist. */
.news-card time {
  color: var(--gold-auf-hell);
  font-weight: 900;
  font-size: var(--text-klein);
  text-transform: uppercase;
  letter-spacing: 0;
}
/* H3-Rolle 2 von 2: Kartenkopf - Ueberschrift IN einer Karte.
   Vorher standen hier vier Groessen fuer dieselbe Rolle (Audit: 20,8px
   Infokarte / 24px Personenkarte / 26,4px Angebotskarte / 30,4px
   Leitungskarte). Alle sechs Kartentypen tragen jetzt --schrift-4. */
.news-card h3 { font-size: var(--schrift-4); line-height: 1.14; margin: var(--raum-3) 0; color: var(--petrol-dark); }
.news-card p  { color: var(--muted); margin: 0 0 var(--raum-4); }
.news-card a  { color: var(--petrol); font-weight: 900; text-decoration: none; }

/* Bild und Überschrift führen zum Bericht.
   Zusammengefasst aus site-neu.css:59-64 und foto-damen.css:11-13;
   die Werte aus foto-damen.css gewinnen (dort später geladen). */
.news-card__link { display: block; background: var(--petrol-soft); }
.news-card__link img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 18%;
  transition: transform var(--tempo-bild) ease;
}
.news-card__link:hover img { transform: scale(1.03); }
.news-card h3 a        { color: inherit; text-decoration: none; }
.news-card h3 a:hover  { color: var(--petrol); }

/* hervorgehobene Variante auf Petrol */
.news-card--accent {
  background: linear-gradient(135deg, var(--petrol), var(--petrol-dark));
  color: var(--white);
  display: flex;
  align-items: end;
}
.news-card--accent h3,
.news-card--accent p,
.news-card--accent a { color: var(--white); }
.news-card--accent .news-card__body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ---- Historienspalte --------------------------------------------------- */

.news-history {
  background: var(--white);
  border: 1px solid var(--linie);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: var(--raum-5);
  position: sticky;
  top: 110px;
}
.news-history h3 { margin: 0 0 var(--raum-2); color: var(--petrol-dark); font-size: var(--schrift-4); }
.news-history__hint { margin: 0 0 var(--raum-4); color: var(--muted); font-size: var(--text-sm); }

.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li {
  position: relative;
  padding: 0 0 var(--raum-4) var(--raum-5);
  border-left: 2px solid var(--linie-16);
  margin-left: var(--raum-2);
}
.history-list li:last-child { padding-bottom: 0; }
/* goldener Punkt auf der Linie */
.history-list li:before {
  content: "";
  position: absolute;
  left: -7px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--white);
  box-shadow: var(--shadow-gold-ring);
}
/* Gleiche Rechnung wie bei .news-card time: weisse Karte, 12,5px, 900. */
.history-list time   { display: block; color: var(--gold-auf-hell); font-weight: 900; font-size: var(--text-xxs); text-transform: uppercase; }
.history-list strong { display: block; color: var(--petrol-dark); font-size: var(--text-s); line-height: 1.35; font-weight: 800; }

/* jeder Eintrag ist ein Link auf die zugehörige Meldung (site-neu.css:49-53) */
.history-list a {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-mini);
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background var(--tempo) ease, transform var(--tempo) ease;
}
.history-list a:hover,
.history-list a:focus-visible { background: var(--petrol-soft); transform: translateX(2px); }
.history-list a strong { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--tempo) ease; }
.history-list a:hover strong { text-decoration-color: var(--gold); }


/* ==========================================================================
   12. Split-Block (Bild neben Text) und Merkmalsliste
   ========================================================================== */

.split { display: grid; grid-template-columns: .95fr 1fr; gap: var(--raum-8); align-items: center; }

.split__media img,
.events-grid img,
.sponsor-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: cover;
}

.split__content p { color: var(--muted); font-size: var(--text-l); }

.feature-list { display: grid; gap: var(--raum-3); margin-top: var(--raum-5); }
.feature-list div {
  padding: var(--raum-4) var(--raum-5);
  border-radius: var(--radius-s);
  background: var(--white);
  border: 1px solid var(--linie);
  box-shadow: var(--shadow-karte);
}
.feature-list strong { display: block; color: var(--petrol); font-size: var(--text-xl); }
.feature-list span   { color: var(--muted); }


/* ==========================================================================
   13. Angebotskarten — glasige Karten auf Petrolgrund
   ========================================================================== */

.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-5); }
.offer-card {
  background: var(--weiss-10);
  border: 1px solid var(--weiss-22);
  border-radius: var(--radius-xl);
  padding: var(--raum-6);
  min-height: 260px;
}
.offer-card span { color: var(--gold); font-weight: 1000; font-size: 3.4rem; line-height: 1; opacity: .88; }
.offer-card h3   { font-size: var(--schrift-4); margin: var(--raum-5) 0 var(--raum-3); }
.offer-card p    { color: var(--auf-dunkel); margin: 0; }


/* ==========================================================================
   14. Events und Trailer
   ========================================================================== */

.events-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--raum-7); align-items: center; }
.event-card  { background: var(--white); padding: var(--raum-3); border-radius: var(--radius); box-shadow: var(--shadow); }
.event-card img { max-height: 520px; object-fit: cover; object-position: center; }
.event-copy p { color: var(--muted); font-size: var(--text-l); }

.trailer-section { background: var(--white); }
.trailer-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--raum-7); align-items: center; }
.trailer-copy p { color: var(--muted); font-size: var(--text-l); }
.trailer-player {
  background: linear-gradient(135deg, var(--petrol), var(--petrol-dark));
  border: 10px solid var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.trailer-player video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--video-bg);
}


/* ==========================================================================
   15. Sponsoring — Pakete und Sponsorenwand
   ========================================================================== */

.sponsor-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--raum-6); align-items: stretch; }
.sponsor-image img { height: 100%; min-height: 420px; object-fit: cover; }

.sponsor-packages { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
.package {
  border-radius: var(--radius-l);
  padding: var(--raum-5);
  background: var(--white);
  border: 1px solid var(--linie);
  box-shadow: var(--shadow-karte);
}
.package h3 { color: var(--petrol); font-size: var(--schrift-4); margin: 0 0 var(--raum-3); }
.package p  { margin: 0; color: var(--muted); }
/* nur das Goldpaket ist farblich ausgezeichnet */
.package--gold {
  background: linear-gradient(135deg, var(--gold-22), var(--white));
  border-color: var(--gold-50);
}

.sponsor-wall {
  margin-top: var(--raum-9);
  padding-top: var(--raum-8);
  border-top: 1px solid var(--linie-14);
}
.sponsor-wall__head { max-width: 720px; margin: 0 auto var(--raum-6); text-align: center; }
/* Bewusste Abweichung: diese H3 fuehrt einen ganzen Abschnitt an und ist
   der Sache nach ein Abschnittskopf, deshalb --schrift-2 statt einer der
   beiden H3-Rollen. */
.sponsor-wall__head h3 {
  font-size: var(--schrift-2);
  line-height: 1.04;
  letter-spacing: 0;
  margin: 0 0 var(--raum-3);
  color: var(--petrol-dark);
}
.sponsor-wall__head p { margin: 0; color: var(--muted); font-weight: 700; }
.sponsor-wall__head a {
  color: var(--petrol);
  font-weight: 1000;
  text-decoration: none;
  border-bottom: 2px solid var(--gold-80);
}

.sponsor-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raum-3);
  max-width: 900px;
  margin: 0 auto;
}
/* kleiner Radius als sonst — Logos sollen rechteckig wirken */
.sponsor-logo-card {
  min-height: 166px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--linie);
  border-radius: 8px;
  box-shadow: 0 10px 26px var(--schatten-08);
  overflow: hidden;
}
/* BEFUND DES AUDITS 2026-09-20, HIER BEHOBEN: 42 Logos in derselben
   214 x 128px-Box ohne Normalisierung. `object-fit: contain` war schon
   richtig und bleibt - es verhindert das Verzerren. Es normalisiert aber
   nicht: ein hochformatiges Logo fuellt die 128px Hoehe voll aus und wirkt
   dadurch doppelt so gross wie ein querformatiges, das dieselbe Box nur
   als schmalen Streifen belegt.

   Die Normalisierung kommt aus dem Seitenverhaeltnis der INNENFLAECHE.
   Mit 16px oben/unten und 24px links/rechts bleibt von 214 x 128px eine
   Flaeche von 166 x 96px, Verhaeltnis 1,73:1. Ein hochformatiges Logo
   erreicht damit hoechstens 96px Hoehe, ein querformatiges bis zu 166px
   Breite - beide belegen ungefaehr gleich viel Flaeche.
   object-position bleibt mittig, damit beide Formate gleich sitzen. */
.sponsor-logo-card img {
  display: block;
  width: 100%;
  height: 128px;
  padding: var(--raum-4) var(--raum-5);
  object-fit: contain;
  object-position: center center;
  background: var(--white);
}
.sponsor-logo-card figcaption {
  min-height: 36px;
  padding: var(--raum-2) var(--raum-2) var(--raum-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--linie-zart);
  color: var(--petrol-dark);
  font-size: .73rem;
  line-height: 1.25;
  font-weight: 900;
  text-align: center;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   16. Downloads
   ========================================================================== */

.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-4); }
.download-grid--single { grid-template-columns: 1fr; }

.download-card {
  position: relative;
  min-height: 150px;
  padding: var(--raum-5);
  background: var(--white);
  border-radius: var(--radius-m);
  text-decoration: none;
  border: 1px solid var(--linie);
  box-shadow: var(--shadow-kachel);
  transition: var(--tempo) ease;
  overflow: hidden;
}
/* goldener Zierkreis oben rechts */
.download-card:after {
  content: "";
  position: absolute;
  right: -34px; top: -34px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--gold-16);
}
.download-card:hover { transform: translateY(var(--anheben-karte)); border-color: var(--gold-rahmen); }
.download-card span {
  display: inline-flex;
  min-width: 46px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pille);
  background: var(--petrol-soft);
  color: var(--petrol);
  font-weight: 900;
  font-size: var(--text-xxs);
}
.download-card strong { display: block; color: var(--petrol-dark); font-size: 1.18rem; margin-top: var(--raum-4); }
.download-card small  { display: block; color: var(--muted); margin-top: var(--raum-1); }


/* ==========================================================================
   17. Saisonheft — aktuelles Heft als Panel, Archiv daneben
   Herkunft: site-neu.css:4-35
   ========================================================================== */

.heft-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--raum-5); align-items: stretch; }
/* R7 E7-1: Hauptfassung + zweiter Download "Alternative" (Magazin) */
.heft-haupt { display: flex; flex-direction: column; gap: var(--raum-2, .75rem); min-width: 0; }
.heft-haupt > .heft-card--current { flex: 1 1 auto; }
.heft-alternative { margin: 0; font-size: .95rem; }
.heft-alternative a { color: var(--petrol, #0b6570); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.heft-alternative a:hover { color: var(--gold); }
.heft-card--current:hover h3 { color: var(--gold); }

.heft-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--tempo) ease, box-shadow var(--tempo) ease, border-color var(--tempo) ease;
}
.heft-card:hover { transform: translateY(var(--anheben-karte)); }

.heft-card--current {
  justify-content: flex-end;
  min-height: 310px;
  padding: var(--raum-6);
  color: var(--white);
  background: linear-gradient(135deg, var(--petrol), var(--petrol-dark));
  box-shadow: var(--shadow);
}
.heft-card--current:after {
  content: "";
  position: absolute;
  right: -70px; top: -70px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: var(--gold-schleier);
}
.heft-card--current > * { position: relative; z-index: 1; }
/* H3-Rolle 1 von 2: Blockkopf. */
.heft-card--current h3 {
  margin: var(--raum-4) 0 0;
  font-size: var(--schrift-3);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.heft-card--current p { margin: var(--raum-3) 0 0; max-width: 46ch; color: var(--weiss-88); font-weight: 600; }

.heft-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--raum-4);
  border-radius: var(--radius-pille);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 900;
  font-size: var(--text-xxs);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.heft-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  align-self: flex-start;
  margin-top: var(--raum-5);
  min-height: var(--ziel-hoehe);
  padding: 0 var(--raum-5);
  border-radius: var(--radius-pille);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 900;
  box-shadow: var(--shadow-gold);
}
.heft-card__cta svg { width: 18px; height: 18px; transition: transform var(--tempo) ease; }
.heft-card--current:hover .heft-card__cta svg { transform: translateX(4px); }

.heft-archive { display: flex; flex-direction: column; gap: var(--raum-3); }
.heft-archive__head {
  margin: 0;
  color: var(--muted);
  font-weight: 900;
  font-size: var(--text-xxs);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.heft-card--archive {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 150px;
  padding: var(--raum-5);
  background: var(--white);
  border: 1px solid var(--linie);
  box-shadow: var(--shadow-kachel);
}
.heft-card--archive:hover { border-color: var(--gold-rahmen); }
.heft-card--archive strong { display: block; color: var(--petrol-dark); font-size: 1.18rem; }
.heft-card--archive small  { display: block; margin-top: var(--raum-1); color: var(--muted); }
.heft-card--archive em     { margin-top: var(--raum-3); color: var(--petrol); font-style: normal; font-weight: 900; font-size: var(--text-sm); }


/* ==========================================================================
   18. Kontakt und Anfahrt
   ========================================================================== */

.contact-section { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: 1fr .78fr; gap: var(--raum-5); align-items: stretch; }

.contact-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--raum-7);
  box-shadow: var(--shadow);
  border: 1px solid var(--linie);
}
.contact-card p { color: var(--muted); }

.contact-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-4); margin: var(--raum-5) 0; }
.contact-details p      { margin: 0; padding: var(--raum-4); border-radius: var(--radius-xs); background: var(--petrol-soft); }
.contact-details strong { color: var(--petrol-dark); }
.contact-details a      { color: var(--petrol); font-weight: 800; text-decoration: none; }

/* kein eingebetteter Kartendienst, sondern ein Panel mit Nadel und Link */
.map-card {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 460px;
  background: linear-gradient(135deg, var(--petrol), var(--petrol-dark));
  color: var(--white);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  padding: var(--raum-6);
}
.map-placeholder { text-align: center; }
.map-placeholder span   { font-size: 4rem; }
.map-placeholder strong { display: block; font-size: 1.7rem; margin: var(--raum-3) 0 var(--raum-1); }
.map-placeholder p      { color: var(--auf-dunkel); }
.map-placeholder a {
  display: inline-flex;
  margin-top: var(--raum-3);
  color: var(--on-gold-strong);
  background: var(--gold);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius-pille);
  text-decoration: none;
  font-weight: 900;
}
.map-pin { display: inline-flex; }
.map-pin svg { width: 64px; height: 64px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25)); }


/* ==========================================================================
   19. Formulare (Kontakt, Newsletter)
   ========================================================================== */

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--raum-6);
  box-shadow: var(--shadow);
  border: 1px solid var(--linie);
}
.form-title { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; margin: 0 0 var(--raum-3); color: var(--petrol-dark); }

.newsletter-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--raum-6); align-items: start; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--petrol-dark);
}
.form-field--full { grid-column: 1 / -1; }

.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--linie-feld);
  border-radius: var(--radius-feld);
  min-height: var(--ziel-hoehe);
  padding: var(--raum-3) var(--raum-3);
  font-size: var(--text-m);
  font-family: inherit;
  background: var(--white);
  color: var(--ink);
  font-weight: 500;
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: var(--fokus-ring); outline-offset: var(--fokus-versatz); border-color: var(--gold); }

.form-consent {
  display: flex;
  gap: var(--raum-3);
  align-items: flex-start;
  font-size: var(--text-klein);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}
.form-consent input { width: 18px; height: 18px; margin-top: var(--raum-1); flex: 0 0 auto; accent-color: var(--petrol); }
.form-consent a     { color: var(--petrol); font-weight: 800; }

.form-msg      { font-weight: 800; margin: var(--raum-3) 0 0; }
.form-msg--ok  { color: var(--petrol); }
.form-msg--err { color: var(--error); }
.form-card .btn { margin-top: var(--raum-4); }


/* ==========================================================================
   20. Diashow (Impressionen)
   ========================================================================== */

.slideshow { position: relative; max-width: var(--breite-diashow); margin: 0 auto; }
.slideshow__frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 10;
  background: var(--petrol-dark);
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--raum-5) var(--raum-5) var(--raum-4);
  background: linear-gradient(transparent, rgba(6, 56, 63, .88));
  color: var(--white);
  font-weight: 800;
}

.slideshow__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--weiss-92);
  color: var(--petrol-dark);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px var(--schatten-28);
  z-index: 2;
  transition: var(--tempo) ease;
}
.slideshow__btn:hover,
.slideshow__btn:focus-visible {
  background: var(--zustand-hover-flaeche);
  border-color: var(--zustand-hover-rahmen);
  color: var(--zustand-hover-schrift);
}
.slideshow__btn:active { background: var(--zustand-active-flaeche); }
.slideshow__btn svg { width: 20px; height: 20px; }
.slideshow__btn--prev { left: 14px; }
.slideshow__btn--next { right: 14px; }

.slideshow__dots { display: flex; justify-content: center; gap: var(--raum-2); margin-top: var(--raum-4); }
.slideshow__dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 0;
  background: var(--linie-stark);
  cursor: pointer;
  padding: 0;
  transition: var(--tempo) ease;
}
.slideshow__dots button.is-active { background: var(--gold); transform: scale(1.25); }


/* ==========================================================================
   21. Hallenzeiten — Register und Tabellen
   ========================================================================== */

.tabs { max-width: var(--breite-tabs); margin: 0 auto; }
.tabs__nav { display: flex; gap: var(--raum-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--raum-6); }

.tabs__btn {
  border: 2px solid var(--petrol);
  background: var(--white);
  color: var(--petrol-dark);
  font: inherit;
  font-weight: 800;
  padding: var(--raum-3) var(--raum-5);
  border-radius: var(--radius-pille);
  cursor: pointer;
  transition: var(--tempo) ease;
}
.tabs__btn:hover,
.tabs__btn:focus-visible { background: var(--zustand-hover-flaeche); }
.tabs__btn.is-active { background: var(--petrol); color: var(--white); box-shadow: 0 12px 30px var(--schatten-22); }

/* Panels werden ausschließlich über [hidden] verborgen. */
.tabs__panel[hidden] { display: none; }

.tabs__intro    { text-align: center; color: var(--muted); margin: 0 0 var(--raum-5); }
.tabs__note     { color: var(--muted); font-size: var(--text-s); margin: var(--raum-3) var(--raum-1) 0; }
.tabs__note a   { color: var(--petrol); font-weight: 700; }
.tabs__subhead  { color: var(--petrol-dark); font-size: var(--schrift-4); margin: var(--raum-6) 0 var(--raum-3); }
.tabs__subhead:first-child { margin-top: 0; }

.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-karte);
  background: var(--white);
}
.zeit-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--text-m); }
.zeit-table thead th {
  background: var(--petrol);
  color: var(--white);
  text-align: left;
  padding: var(--raum-3) var(--raum-4);
  font-weight: 800;
  white-space: nowrap;
}
.zeit-table tbody th,
.zeit-table tbody td { padding: var(--raum-3) var(--raum-4); border-top: 1px solid var(--linie-mittel); vertical-align: top; }
.zeit-table tbody th { text-align: left; color: var(--petrol-dark); font-weight: 800; white-space: nowrap; background: var(--petrol-soft); }
/* stärkere Linie am Tageswechsel */
.zeit-table tbody tr.day-start td,
.zeit-table tbody tr.day-start th { border-top: 2px solid var(--linie-feld); }
.zeit-table tbody tr:first-child td,
.zeit-table tbody tr:first-child th { border-top: 0; }
.zeit-table small { color: var(--muted); font-weight: 600; }

.cell-empty { color: var(--silver); }

.time-chip {
  display: inline-block;
  background: var(--petrol-soft);
  color: var(--petrol-dark);
  font-weight: 700;
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--radius-pille);
  margin: var(--raum-1) var(--raum-1) var(--raum-1) 0;
  white-space: nowrap;
}


/* ==========================================================================
   22. Mannschaften
   ========================================================================== */

.team-nav {
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: var(--z-teamnav);
  background: var(--paper);
  border-bottom: 1px solid var(--linie-mittel);
  box-shadow: 0 10px 24px var(--schatten-08);
}
.team-nav__inner { display: flex; gap: var(--raum-3); justify-content: center; flex-wrap: wrap; padding: var(--raum-3) 0; }
.team-nav .team-chip--cat { padding: var(--raum-3) var(--raum-5); font-size: var(--text-m); }

.team-chip {
  flex: 0 0 auto;
  padding: var(--raum-2) var(--raum-4);
  border-radius: var(--radius-pille);
  background: var(--white);
  border: 1px solid var(--linie-18);
  color: var(--petrol-dark);
  font-weight: 800;
  font-size: var(--text-klein);
  text-decoration: none;
  transition: var(--tempo) ease;
}
.team-chip:hover,
.team-chip:focus { background: var(--zustand-hover-flaeche); border-color: var(--zustand-hover-rahmen); color: var(--zustand-hover-schrift); }
.team-chip--damen  { border-color: var(--gold-60); }
.team-chip--jugend { border-color: var(--linie-45); background: var(--petrol-soft); }
.team-chip--cat    { background: var(--petrol); border-color: var(--petrol); color: var(--white); }
.team-chip--cat:hover,
.team-chip--cat:focus { background: var(--zustand-hover-flaeche); border-color: var(--zustand-hover-rahmen); color: var(--zustand-hover-schrift); }
.team-chip--cat.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--petrol-dark);
  box-shadow: 0 8px 22px var(--gold-35);
}
.team-chip--cat.is-active:hover,
.team-chip--cat.is-active:focus { background: var(--gold); border-color: var(--gold); color: var(--petrol-dark); }

.team-cat-head { margin: var(--raum-8) 0 var(--raum-5); scroll-margin-top: 170px; }
.team-cat-head:first-child { margin-top: 0; }
.team-cat-head h2 {
  margin: 0 0 var(--raum-2);
  font-size: var(--schrift-1);
  line-height: 1.05;
  color: var(--petrol-dark);
  border-bottom: 4px solid var(--gold);
  display: inline-block;
  padding-bottom: var(--raum-2);
}
.team-cat-head p { margin: var(--raum-2) 0 0; color: var(--muted); font-weight: 600; }

.team-block {
  background: var(--white);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--shadow-karte);
  padding: var(--raum-6);
  margin-bottom: var(--raum-5);
  scroll-margin-top: 170px;
}
.team-block__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--raum-4); flex-wrap: wrap; }
/* H3-Rolle 1 von 2: Blockkopf - Ueberschrift ueber einem ganzen Block.

   .team-block > h3 steht hier ZUSAETZLICH, weil .team-block__title im
   Markup nicht vorkommt: www/mannschaften.html:31 setzt den Mannschafts-
   namen als direktes Kind von .team-block (`<article class="team-block">
   <h3>{{ team.name }}</h3>`). Die Regel mit dem __title-Vorfahren lief
   also ins Leere, und der Mannschaftsname fiel auf den Browserwert zurueck
   - das sind die 30,4px, die das Audit als vierte H3-Groesse gemessen hat.
   Der Name ist der Kopf eines ganzen Blocks, nicht einer Karte, und
   gehoert damit in Rolle 1. .team-block__title h3 bleibt stehen, falls
   der Wrapper spaeter nachgereicht wird. */
.team-block > h3,
.team-block__title h3 { margin: 0 0 var(--raum-2); font-size: var(--schrift-3); line-height: 1.05; color: var(--petrol-dark); }
.team-block__title .team-liga { color: var(--muted); font-weight: 800; margin: 0; }
.team-desc { color: var(--muted); margin: var(--raum-4) 0 0; max-width: var(--breite-prosa); }

.team-tags { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--radius-pille);
  background: var(--petrol-soft);
  color: var(--petrol-dark);
  font-weight: 800;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.tag--gold { background: var(--gold-schleier); color: var(--gold-ink); }

.player-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-3); margin-top: var(--raum-5); }
.player-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-4);
  border-radius: var(--radius-s);
  background: var(--petrol-soft);
  border: 1px solid var(--linie-mittel);
}
.player-card__pos {
  position: absolute;
  top: 10px; right: 14px;
  font-weight: 900;
  font-size: var(--text-xxs);
  color: var(--petrol);
  background: var(--white);
  border-radius: var(--radius-pille);
  padding: var(--raum-1) var(--raum-2);
}
.player-card__body strong { display: block; color: var(--petrol-dark); font-size: var(--text-m); line-height: 1.2; padding-right: var(--raum-6); }
.player-card__info { display: block; color: var(--muted); font-size: var(--text-xs); margin-top: var(--raum-1); }

/* Initialen-Kreis; liegt ein Foto vor, tritt .avatar--foto an seine Stelle */
.avatar {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--petrol), var(--petrol-dark));
  color: var(--white);
  font-weight: 900;
  font-size: var(--text-m);
  letter-spacing: .5px;
}
/* Der Bildausschnitt entsteht hier, damit die Dateien unverändert bleiben. */
.avatar--foto { object-fit: cover; object-position: center 28%; background: var(--petrol-soft); }

/* ---- Pillenreihen ------------------------------------------------------

   BEFUND DES AUDITS 2026-09-20 (Kurzfassung 6), HIER BEHOBEN.
   Gemessener Abstand zwischen zwei .pill: 0px. Sichtbar wurde daraus
   "VerbandsligaSamstag · 19:00 · PAGSZiel: Aufstieg" und "Q-TTR 2216JG
   1998" - auf allen 18 Mannschaften und allen 84 Spielerkarten.

   URSACHE: die Regel hiess `.player-meta`. Diese Klasse kommt im ganzen
   Repo NICHT vor - geprueft ueber alle .html, .js und .py der App. Die
   Vorlage benutzt .team-meta (www/mannschaften.html:33) und
   .player-card__meta (:53). Beide blieben damit display:block mit
   gap:normal, die Regel lief ins Leere.

   Die Klassennamen gehoeren den Vorlagen und werden hier nicht angefasst;
   stattdessen traegt die Regel jetzt die Namen, die es wirklich gibt.
   .player-meta bleibt als dritter Selektor stehen, falls die Klasse
   irgendwo ausserhalb dieses Repos noch auftaucht - sie kostet nichts.

   .team-meta ist ein <p> und braucht deshalb margin:0 oben, sonst setzt
   der Browsergrundwert von 1em die Pillenreihe zu tief. */
.team-meta,
.player-card__meta,
.player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: var(--raum-2) 0 0;
}
.pill {
  display: inline-flex;
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--radius-pille);
  background: var(--white);
  color: var(--petrol-dark);
  font-weight: 800;
  font-size: .75rem;
  border: 1px solid var(--linie-14);
}
.pill--gold { background: var(--gold-20); border-color: var(--gold-40); color: var(--gold-ink); }


/* ==========================================================================
   23. Spielplan und Termine
   ========================================================================== */

.sp-tabs { display: flex; gap: var(--raum-3); flex-wrap: wrap; margin-bottom: var(--raum-5); }
.sp-tab {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linie-stark);
  background: var(--white);
  color: var(--petrol-dark);
  font: inherit;
  font-weight: 900;
  padding: var(--raum-3) var(--raum-5);
  border-radius: var(--radius-pille);
  cursor: pointer;
  transition: var(--tempo) ease;
  text-decoration: none;
}
.sp-tab:hover,
.sp-tab:focus-visible { background: var(--zustand-hover-flaeche); border-color: var(--zustand-hover-rahmen); }
.sp-tab[aria-selected="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--white); }

.sp-filters {
  display: flex;
  gap: var(--raum-3) var(--raum-4);
  flex-wrap: wrap;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--linie-mittel);
  border-radius: var(--radius-m);
  padding: var(--raum-4) var(--raum-4);
  box-shadow: 0 10px 30px var(--schatten-06);
  margin-bottom: var(--raum-3);
}
.sp-filters label  { font-weight: 800; font-size: var(--text-klein); color: var(--petrol-dark); display: flex; align-items: center; gap: var(--raum-2); }
.sp-filters select {
  font: inherit;
  font-weight: 700;
  color: var(--petrol-dark);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-mini);
  padding: var(--raum-2) var(--raum-3);
  background: var(--white);
  max-width: 230px;
}

.sp-toggle { display: flex; gap: var(--raum-1); background: var(--petrol-soft); border-radius: var(--radius-pille); padding: var(--raum-1); }
.sp-toggle button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  font-size: var(--text-klein);
  color: var(--petrol-dark);
  padding: var(--raum-2) var(--raum-4);
  border-radius: var(--radius-pille);
  cursor: pointer;
}
.sp-toggle button.is-active { background: var(--petrol); color: var(--white); }

.sp-count  { margin-left: auto; color: var(--muted); font-weight: 700; font-size: var(--text-klein); }
.sp-legend { display: flex; gap: var(--raum-4); flex-wrap: wrap; margin: var(--raum-3) var(--raum-1) var(--raum-5); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.sp-legend span { display: inline-flex; align-items: center; gap: var(--raum-2); }
.sp-legend i    { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

.sp-month { margin: var(--raum-6) 0 var(--raum-3); }
.sp-month h3 { margin: 0; font-size: var(--schrift-4); color: var(--petrol-dark); display: flex; align-items: center; gap: var(--raum-3); }
/* Linie, die den Monatsnamen ausfüllt */
.sp-month h3:after { content: ""; flex: 1; height: 1px; background: var(--linie-16); }

/* Farbige Linkskante: Silber auswärts, Gold heim. */
.match-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: var(--raum-4);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--silver);
  border-radius: var(--radius-xs);
  padding: var(--raum-4) var(--raum-5);
  margin-bottom: var(--raum-3);
  box-shadow: var(--shadow-flach);
}
.match-row--heim { border-left-color: var(--gold); }
.match-row__date strong { display: block; color: var(--petrol-dark); }
.match-row__date span   { color: var(--muted); font-size: var(--text-klein); font-weight: 700; }
.match-row__teams { font-weight: 800; color: var(--ink); }
.match-row__teams .vs { color: var(--muted); font-weight: 700; padding: 0 var(--raum-2); }
.match-row__teams .us { color: var(--petrol); }
.match-row__liga  { display: block; color: var(--muted); font-weight: 700; font-size: var(--text-xs); margin-top: var(--raum-1); }
.match-row__aside { display: flex; gap: var(--raum-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Ort und Ergebnis sollen untereinander stehen, egal wie lang der Hallenname
   ist — sonst franst die rechte Spalte aus (site-fx.css:13-19). */
.match-row__aside .pill--ort { min-width: 10.5em; text-align: center; }

.event-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: var(--raum-4);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--petrol);
  border-radius: var(--radius-xs);
  padding: var(--raum-3) var(--raum-5);
  margin-bottom: var(--raum-3);
  box-shadow: var(--shadow-flach);
}
.event-row--event { border-left-color: var(--gold); }
.event-row--frist { border-left-color: var(--bronze); }
.event-row__date  { font-weight: 900; color: var(--petrol-dark); }
.event-row__title { font-weight: 700; color: var(--ink); }
.event-row__title small { display: block; color: var(--muted); font-weight: 700; }


/* ==========================================================================
   24. Bausteine der Unterseiten
   ========================================================================== */

/* ---- Fließtext ---------------------------------------------------------- */
.prose    { max-width: var(--breite-prosa); }
.prose h2 { font-size: var(--schrift-2); line-height: 1.06; margin: 0 0 var(--raum-4); color: var(--petrol-dark); }
.prose h3 { font-size: var(--schrift-4); margin: var(--raum-6) 0 var(--raum-3); color: var(--petrol); }
.prose p  { color: var(--muted); font-size: var(--text-l); }
.prose ul { color: var(--muted); font-size: var(--text-l); padding-left: var(--raum-5); }
.prose ul li { margin: var(--raum-2) 0; }
.prose strong { color: var(--petrol-dark); }

/* ---- Artikelseiten (Berichte aus „Aktuelles") --------------------------- */
.artikel   { max-width: var(--breite-artikel); margin: 0 auto; }
.artikel p { color: var(--muted); font-size: var(--text-l); margin: 0 0 var(--raum-4); }
.artikel__intro { font-size: 1.22rem !important; color: var(--petrol-dark) !important; font-weight: 700; line-height: 1.6; }
.artikel h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; color: var(--petrol-dark); margin: var(--raum-6) 0 var(--raum-3); }
.artikel__bild { margin: var(--raum-6) 0; }
/* zusammengefasst aus site-neu.css:45 und foto-damen.css:15-21 */
.artikel__bild img {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--petrol-soft);
}
.artikel__bild figcaption { margin-top: var(--raum-3); color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.artikel__quelle { margin-top: var(--raum-5) !important; font-size: var(--text-sm) !important; font-style: italic; }

/* ---- Info-Karten -------------------------------------------------------- */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-4); }
.info-card {
  background: var(--white);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: var(--raum-5);
  box-shadow: var(--shadow-karte);
}
.info-card h3 { margin: 0 0 var(--raum-3); color: var(--petrol); font-size: var(--schrift-4); }
.info-card p  { margin: 0; color: var(--muted); }
.info-card .tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--raum-3);
  margin-bottom: var(--raum-3);
  border-radius: var(--radius-pille);
  background: var(--petrol-soft);
  color: var(--petrol);
  font-weight: 900;
  font-size: var(--text-xxs);
  text-transform: uppercase;
}

/* ---- Personenkarten ----------------------------------------------------- */
.person-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--raum-5); }
.person-card {
  background: var(--white);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: var(--raum-6);
  box-shadow: var(--shadow-karte);
}
.person-card__role {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--raum-3);
  border-radius: var(--radius-pille);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 900;
  font-size: var(--text-xxs);
  text-transform: uppercase;
}
.person-card h3 { margin: var(--raum-3) 0 var(--raum-2); color: var(--petrol-dark); font-size: var(--schrift-4); }
.person-card p  { color: var(--muted); margin: 0 0 var(--raum-3); }
.person-card p:last-child { margin-bottom: 0; }
/* die erste Person darf über die ganze Breite und wird golden hinterlegt */
.person-card--lead {
  grid-column: 1 / -1;
  border-color: var(--gold-60);
  background: linear-gradient(135deg, var(--gold-14), var(--white) 60%);
}
/* ENTFERNT (Audit /akademie/task-force): die erste Personenkarte trug
   30,4px, die sieben folgenden 24px - dieselbe Rolle, dieselbe Seite,
   zwei Groessen. Die Karte bleibt ueber die volle Breite und golden
   hinterlegt, ihre Ueberschrift ist jetzt so gross wie die der anderen.
   .person-card--lead h3 { font-size: 1.9rem; }  <- war hier */

/* ---- Zeitstrahl --------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--linie-18); }
.timeline li { position: relative; padding: 0 0 var(--raum-5) var(--raum-5); }
.timeline li::before {
  content: "";
  position: absolute;
  left: -9px; top: 7px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--linie-18);
}
.timeline b    { display: block; color: var(--petrol); font-size: var(--text-l); }
.timeline span { color: var(--muted); }

/* Zeitstrahl "Zwei Jahre Akademie" (akademie/abteilung.html) */
.zeitstrahl__titel { display: block; color: var(--petrol-dark); margin: 2px 0 var(--raum-2); }
.zeitstrahl__text { color: var(--muted); }
.zeitstrahl__text p { margin: 0 0 var(--raum-2); }
.zeitstrahl__bild {
  display: block; width: 100%; max-width: 420px; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--radius-klein); margin-top: var(--raum-3);
}
.zeitstrahl__figuren {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raum-3); margin: 0 0 var(--raum-5);
}
.zeitstrahl__figuren img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-klein); }
@media (max-width: 640px) {
  .zeitstrahl__figuren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mannschaftsfoto je Team-Block (mannschaften.html) */
.team-block__foto { margin: 0 0 var(--raum-4); }
.team-block__foto img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-klein); }

/* ---- Zitatkarte --------------------------------------------------------- */
.quote-card {
  background: var(--white);
  border-left: 5px solid var(--gold);
  border-radius: 0 var(--radius-l) var(--radius-l) 0;
  padding: var(--raum-5) var(--raum-6);
  box-shadow: var(--shadow-karte);
}
.quote-card p      { color: var(--muted); font-size: var(--text-l); margin: 0 0 var(--raum-3); }
.quote-card footer { color: var(--petrol-dark); font-weight: 900; }

/* ---- Hinweise auf noch fehlende Inhalte --------------------------------- */
.placeholder-note {
  margin: var(--raum-5) 0;
  padding: var(--raum-4) var(--raum-5);
  border-radius: var(--radius-xs);
  border: 2px dashed var(--gold-85);
  background: var(--gold-09);
}
.placeholder-note strong { display: block; color: var(--petrol-dark); margin-bottom: var(--raum-1); }
.placeholder-note p      { margin: 0; color: var(--muted); font-size: var(--text-m); }

.inhalt-offen {
  border: 1px dashed var(--linie-45);
  border-radius: var(--radius-xs);
  padding: var(--raum-5) var(--raum-5);
  background: var(--petrol-soft);
  color: var(--petrol-dark);
}
.inhalt-offen strong { display: block; margin-bottom: var(--raum-2); }
.inhalt-offen p      { margin: 0; line-height: 1.6; }

/* ---- Häufige Fragen ----------------------------------------------------- */
.faq-liste { display: grid; gap: var(--raum-3); margin-top: var(--raum-2); }
.faq-liste details {
  background: var(--white);
  border: 1px solid var(--linie-14);
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 18px var(--schatten-06);
  overflow: hidden;
}
.faq-liste summary {
  cursor: pointer;
  list-style: none;
  padding: var(--raum-4) var(--raum-7) var(--raum-4) var(--raum-5);
  position: relative;
  font-weight: 800;
  color: var(--petrol-dark);
  font-size: var(--text-m);
}
.faq-liste summary::-webkit-details-marker { display: none; }
/* eigener Pfeil, dreht beim Öffnen */
.faq-liste summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 2.4px solid var(--petrol);
  border-bottom: 2.4px solid var(--petrol);
  transform: rotate(45deg);
  transition: transform var(--tempo) ease;
}
.faq-liste details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-liste summary:hover,
.faq-liste summary:focus-visible { background: var(--petrol-soft); }
.faq-liste details > *:not(summary) { padding: 0 var(--raum-5); }
.faq-liste details > *:last-child   { padding-bottom: var(--raum-5); }
.faq-liste p { margin: 0 0 var(--raum-3); line-height: 1.65; }

/* ---- Presse und Medienecho ---------------------------------------------- */
.presse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--raum-4); }
.presse-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-5) var(--raum-5);
  background: var(--white);
  border: 1px solid var(--linie-14);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-leicht);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--tempo) ease, box-shadow var(--tempo) ease;
}
.presse-kachel:hover,
.presse-kachel:focus-visible { transform: translateY(var(--anheben-karte)); box-shadow: 0 14px 32px var(--schatten-14); }
.presse-kachel__logo { height: 52px; display: flex; align-items: center; }
.presse-kachel__logo img  { max-height: 52px; width: auto; object-fit: contain; }
.presse-kachel__logo span { font-weight: 900; font-size: 1.15rem; color: var(--petrol); letter-spacing: .01em; }
.presse-kachel strong { font-size: var(--text-l); color: var(--petrol-dark); }
.presse-kachel small  { color: rgba(18, 38, 42, .7); line-height: 1.55; font-size: var(--text-sm); }
.presse-kachel em     { margin-top: auto; font-style: normal; font-weight: 800; color: var(--petrol); font-size: var(--text-sm); }
/* Kachel ohne hinterlegten Link — sichtbar als noch offen */
.presse-kachel--offen { opacity: .72; box-shadow: none; border-style: dashed; }
.presse-kachel--offen:hover { transform: none; box-shadow: none; }

/* ---- Unsere Akademiekinder ---------------------------------------------- */
.kinder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--raum-4); }
.kinder-grid:empty { display: none; }
.kinder-karte {
  background: var(--white);
  border: 1px solid var(--linie-14);
  border-radius: var(--radius-s);
  overflow: hidden;
  box-shadow: var(--shadow-leicht);
}
.kinder-karte img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kinder-karte__body { padding: var(--raum-4) var(--raum-4) var(--raum-5); }
.kinder-karte__body strong { display: block; font-size: 1.05rem; color: var(--petrol-dark); }
.kinder-karte__body small  { display: block; margin-top: var(--raum-1); color: rgba(18, 38, 42, .7); }
.kinder-karte dl { margin: var(--raum-3) 0 0; display: grid; grid-template-columns: auto 1fr; gap: var(--raum-1) var(--raum-3); font-size: var(--text-sm); }
.kinder-karte dt { font-weight: 800; color: var(--petrol); }
.kinder-karte dd { margin: 0; }


/* ==========================================================================
   25. Fußbereich
   ========================================================================== */

.site-footer { background: var(--petrol-dark); color: var(--white); padding: var(--raum-8) 0 var(--raum-5); }

/* Grundraster (vier Spalten) — der aktuelle Stand nutzt .footer-grid--2026 */
.footer-grid { display: grid; grid-template-columns: 1.35fr .75fr .95fr .7fr; gap: var(--raum-6); }
.footer-grid img    { max-width: 270px; margin-bottom: var(--raum-4); }
.footer-grid strong { display: block; margin-bottom: var(--raum-3); color: var(--gold); }
.footer-grid a      { display: block; color: var(--auf-dunkel); text-decoration: none; margin: var(--raum-2) 0; }
.footer-grid a:hover { color: var(--gold); }

.footer-bottom { margin-top: var(--raum-6); color: var(--weiss-58); font-size: var(--text-sm); }

/* fünf Spalten mit Newsletter in der Mitte (nav-2026.css:74-125) */
.footer-grid--2026 { grid-template-columns: 1.15fr .7fr .8fr 1.1fr .55fr; }

.footer-newsletter__text {
  margin: 0 0 var(--raum-3);
  color: var(--weiss-78);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.footer-newsletter__form { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.footer-newsletter__form input[type="email"] {
  flex: 1 1 170px;
  min-width: 0;
  padding: var(--raum-3) var(--raum-3);
  border: 1px solid var(--weiss-28);
  border-radius: var(--radius-mini);
  background: var(--weiss-08);
  color: var(--white);
  font: inherit;
  font-size: var(--text-s);
}
.footer-newsletter__form input[type="email"]::placeholder { color: var(--weiss-55); }
.footer-newsletter__form input[type="email"]:focus {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
  border-color: var(--gold);
  background: var(--weiss-14);
}
.footer-newsletter__form .btn { flex: 0 0 auto; padding: var(--raum-3) var(--raum-5); font-size: var(--text-s); }

.footer-newsletter__msg { margin: var(--raum-3) 0 0; font-size: var(--text-klein); font-weight: 700; color: var(--gold); }

/* Archivlink ist ein normaler Fußlink, braucht nach dem Formular aber Luft. */
.footer-grid a.footer-newsletter__more { margin-top: var(--raum-3); text-decoration: underline; }


/* ==========================================================================
   26. Einblenden, Nach-oben-Knopf, Sicherheitsabstände
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--tempo-reveal) ease, transform var(--tempo-reveal) ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay   { transition-delay: .12s; }
.reveal--delay-2 { transition-delay: .22s; }

.to-top {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-mobilmenue);
  width: 50px; height: 50px;
  border: 1px solid transparent;
  border-radius: var(--radius-pille);
  background: var(--petrol);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px var(--schatten-32);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--tempo-kopf) ease, transform var(--tempo-kopf) ease, background var(--tempo) ease,
              color var(--tempo) ease, border-color var(--tempo) ease;
}
.to-top svg { width: 22px; height: 22px; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover,
.to-top:focus-visible {
  background: var(--zustand-hover-flaeche);
  border-color: var(--zustand-hover-rahmen);
  color: var(--zustand-hover-schrift);
  transform: translateY(var(--anheben-knopf));
}
.to-top:active { background: var(--zustand-active-flaeche); }

/* Notch-Geräte im Querformat */
@supports (padding: max(0px)) {
  .container {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}


/* ==========================================================================
   27. Anpassung an die Bildschirmbreite
   Reihenfolge wie in der Referenz: kleinere Schwelle zuletzt, damit sie
   gewinnt. Nichts hier verschieben, ohne die Kaskade nachzuprüfen.
   ========================================================================== */

/* ---- ≤980px: Tablet — Hauptraster einspaltig, Klappmenü ---------------- */
@media (max-width: 980px) {
  .nav { height: var(--kopf-hoehe-tablet); }
  .site-header.is-scrolled .nav { height: var(--kopf-hoehe-tablet-scroll); }
  .brand img,
  .site-header.is-scrolled .brand img { height: var(--logo-hoehe-tablet); }
  .nav-toggle { display: block; }

  .mainnav {
    position: fixed;
    left: 14px; right: 14px; top: 84px;
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    z-index: var(--z-mobilmenue);
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-radius: var(--radius-m);
    padding: var(--raum-3);
    gap: var(--raum-1);
    box-shadow: var(--shadow);
    transform: translateY(-10px);
    opacity: 0;
    transition: transform var(--tempo-menue) ease, opacity var(--tempo-menue) ease;
  }
  .mainnav.is-open { display: flex; transform: none; opacity: 1; }
  .mainnav a { padding: var(--raum-4) var(--raum-4); font-size: var(--text-l); border-radius: var(--radius-feld); }
  .mainnav a.is-active { background: var(--petrol-soft); }
  .mainnav a.is-active::after { display: none; }

  .nav-scrim { display: none; }
  .nav-scrim.is-open { display: block; }

  .nav-drop { display: block; width: 100%; }
  .nav-drop__btn { width: 100%; justify-content: space-between; padding: var(--raum-4) var(--raum-4); font-size: var(--text-l); border-radius: var(--radius-feld); }
  .nav-drop.is-current .nav-drop__btn { background: var(--petrol-soft); }
  .nav-drop.is-current .nav-drop__btn::after { display: none; }
  .nav-drop__menu {
    position: static;
    min-width: 0;
    margin: var(--raum-1) 0 var(--raum-2);
    padding: var(--raum-2) 0 var(--raum-2) var(--raum-3);
    border: 0;
    border-left: 3px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav-drop__menu a { padding: var(--raum-3) var(--raum-3); font-size: var(--text-m); }

  .hero__grid,
  .split,
  .events-grid,
  .trailer-grid,
  .sponsor-layout,
  .contact-grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
  .image-card img { min-height: 330px; }

  .quicklinks__grid,
  .news-grid,
  .offer-grid,
  .download-grid,
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .news-layout { grid-template-columns: 1fr; }
  .news-history { position: static; }
  .news-grid { align-items: stretch; }

  .sponsor-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; }
  .contact-details { grid-template-columns: 1fr; }
  .newsletter-grid { grid-template-columns: 1fr; }
  .heft-grid { grid-template-columns: 1fr; }

  .info-cards  { grid-template-columns: 1fr 1fr; }
  .person-grid { grid-template-columns: 1fr; }

  .team-nav { top: var(--kopf-hoehe-tablet); }
  .player-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid--2026 { grid-template-columns: 1fr 1fr; }
  /* Der Newsletter darf über beide Spalten, sonst wird das Feld unbrauchbar schmal. */
  .footer-newsletter { grid-column: 1 / -1; }
}

/* ---- 641–980px: iPad hoch — zwei Raster bleiben mehrspaltig ------------ */
@media (min-width: 641px) and (max-width: 980px) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); }
  .sponsor-packages { grid-template-columns: 1fr 1fr; }
}

/* ---- ≤720px: nur ein Detail der Spielzeilen ---------------------------- */
@media (max-width: 720px) {
  .match-row__aside .pill--ort { min-width: 0; }
}

/* ---- ≤640px: Telefon --------------------------------------------------- */
@media (max-width: 640px) {
  .container { width: min(100% - var(--container-rand-mobil), var(--container)); }

  .topline { font-size: var(--text-xs); }
  .topline__inner { justify-content: center; gap: var(--raum-1) var(--raum-4); padding: var(--raum-2) 0; text-align: center; }

  .section, .section-pad { padding: var(--abstand-abschnitt-mobil) 0; }

  .hero { padding-top: var(--raum-8); }
  .hero h1 { font-size: clamp(2.5rem, 13vw, 3.4rem); }
  .lead { font-size: var(--text-xl); }

  .btn,
  .hero__actions .btn,
  .center-actions .btn { width: 100%; }
  .center-actions { flex-direction: column; }

  .hero__stats,
  .quicklinks__grid,
  .news-grid,
  .offer-grid,
  .download-grid,
  .sponsor-packages,
  .footer-grid { grid-template-columns: 1fr; }

  .hero__stats { gap: var(--raum-3); }
  /* Zahl und Text nebeneinander statt untereinander */
  .hero__stats div { display: flex; align-items: baseline; gap: var(--raum-3); padding: var(--raum-3) var(--raum-4); }
  .hero__stats strong { font-size: 1.15rem; }

  .sponsor-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3); }
  .sponsor-logo-card { min-height: 152px; }
  .sponsor-logo-card img { height: 112px; padding: var(--raum-2) var(--raum-3); }

  .float-card { left: 10px; right: 10px; bottom: 16px; }
  .contact-card { padding: var(--raum-5); }
  .section-head { text-align: left; }

  .form-card { padding: var(--raum-5) var(--raum-5); }
  .form-grid { grid-template-columns: 1fr; }
  .slideshow__frame { aspect-ratio: 4 / 3; }

  .player-grid { grid-template-columns: 1fr; }
  .team-block { padding: var(--raum-5) var(--raum-5); }
  .match-row, .event-row { grid-template-columns: 1fr; gap: var(--raum-2); }
  .match-row__aside { justify-content: flex-start; }
  .sp-count { margin-left: 0; width: 100%; }
  .sp-filters select { max-width: 100%; }

  .tabs__btn { width: 100%; }
  .zeit-table { font-size: var(--text-sm); }
  .zeit-table thead th,
  .zeit-table tbody th,
  .zeit-table tbody td { padding: var(--raum-3) var(--raum-3); }

  .info-cards { grid-template-columns: 1fr; }

  .heft-card--current { min-height: 0; padding: var(--raum-5) var(--raum-5); }
  .heft-card__cta { width: 100%; justify-content: center; }

  .footer-grid--2026 { grid-template-columns: 1fr; }
}

/* ---- Breite Leiste: Abstände enger, damit alle Punkte passen ------------ */
@media (min-width: 981px) {
  /* Ohne JavaScript öffnen die Untermenüs per Hover bzw. Tastaturfokus.
     Ist JS aktiv (html.js-nav), übernimmt das Skript und hält aria-expanded
     und Sichtbarkeit zusammen. */
  html:not(.js-nav) .nav-drop:hover > .nav-drop__menu,
  html:not(.js-nav) .nav-drop:focus-within > .nav-drop__menu { display: block; }

  .mainnav { gap: 0; }
  .mainnav a     { padding: var(--raum-3) var(--raum-3); font-size: var(--text-s); }
  .nav-drop__btn { padding: var(--raum-3) var(--raum-3); font-size: var(--text-s); }
}

/* MANGEL 5 DER REFERENZ, HIER BEHOBEN: die Schwelle stand auf 1180px,
   die nächste Regel beginnt erst bei 1200px. Zwischen 1181px und 1199px
   galt damit wieder die weiteste Einstellung (10px/.96rem) auf der
   schmalsten Leiste — die sieben Punkte liefen über. Jetzt reicht die
   enge Einstellung lückenlos bis 1199px. */
@media (min-width: 981px) and (max-width: 1199px) {
  .mainnav a     { padding: var(--raum-3) var(--raum-2); font-size: var(--text-klein); }
  .nav-drop__btn { padding: var(--raum-3) var(--raum-2); font-size: var(--text-klein); gap: var(--raum-1); }
}

/* ---- 981–1199px mit JavaScript: Klappmenü statt waagerechter Leiste -----
   Alles hier hängt an html.js-nav. Ohne JavaScript fehlt die Klasse, der
   Aufklappknopf bliebe tot und die Leiste unerreichbar — deshalb bleibt es
   dann bei der waagerechten Leiste, nur enger gesetzt (siehe unten). */
@media (min-width: 981px) and (max-width: 1199px) {
  html.js-nav .nav { height: var(--kopf-hoehe-tablet); }
  html.js-nav .site-header.is-scrolled .nav { height: var(--kopf-hoehe-tablet-scroll); }
  html.js-nav .brand img,
  html.js-nav .site-header.is-scrolled .brand img { height: var(--logo-hoehe-tablet); }
  html.js-nav .nav-toggle { display: block; }

  html.js-nav .mainnav {
    position: fixed;
    left: 14px; right: 14px; top: 84px;
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    z-index: var(--z-mobilmenue);
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-radius: var(--radius-m);
    padding: var(--raum-3);
    gap: var(--raum-1);
    box-shadow: var(--shadow);
    transform: translateY(-10px);
    opacity: 0;
    transition: transform var(--tempo-menue) ease, opacity var(--tempo-menue) ease;
  }
  html.js-nav .mainnav.is-open { display: flex; transform: none; opacity: 1; }
  html.js-nav .mainnav a { padding: var(--raum-4) var(--raum-4); font-size: var(--text-l); border-radius: var(--radius-feld); }
  html.js-nav .mainnav a.is-active { background: var(--petrol-soft); }
  html.js-nav .mainnav a.is-active::after { display: none; }

  html.js-nav .nav-scrim { display: none; }
  html.js-nav .nav-scrim.is-open { display: block; }

  html.js-nav .nav-drop { display: block; width: 100%; }
  html.js-nav .nav-drop__btn { width: 100%; justify-content: space-between; padding: var(--raum-4) var(--raum-4); font-size: var(--text-l); border-radius: var(--radius-feld); }
  html.js-nav .nav-drop.is-current .nav-drop__btn { background: var(--petrol-soft); }
  html.js-nav .nav-drop.is-current .nav-drop__btn::after { display: none; }
  html.js-nav .nav-drop__menu {
    position: static;
    min-width: 0;
    margin: var(--raum-1) 0 var(--raum-2);
    padding: var(--raum-2) 0 var(--raum-2) var(--raum-3);
    border: 0;
    border-left: 3px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  html.js-nav .nav-drop__menu a { padding: var(--raum-3) var(--raum-3); font-size: var(--text-m); }

  /* Ohne JavaScript: so eng wie möglich, damit alle Punkte nebeneinander stehen. */
  html:not(.js-nav) .mainnav a,
  html:not(.js-nav) .nav-drop__btn { padding: var(--raum-3) var(--raum-1); font-size: var(--text-xs); }
  html:not(.js-nav) .nav-drop__btn { gap: var(--raum-1); }
}

/* ---- ≥1200px: waagerechte Leiste --------------------------------------- */
@media (min-width: 1200px) {
  .mainnav { gap: 0; }
  .mainnav a     { padding: var(--raum-3) var(--raum-2); font-size: var(--text-sm); }
  .nav-drop__btn { padding: var(--raum-3) var(--raum-2); font-size: var(--text-sm); gap: var(--raum-1); }
  .mainnav a.is-active::after { left: 9px; right: 9px; }
}


/* ==========================================================================
   28. Rücksicht auf reduzierte Bewegung
   ========================================================================== */

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


/* ==========================================================================
   29. Korrekturen gegenüber der Designreferenz
   --------------------------------------------------------------------------
   Steht bewusst GANZ AM ENDE, damit jede Regel hier gegen die übernommene
   Kaskade gewinnt und in einem Block nachlesbar ist, was vom Original
   abweicht. Belege zu den Mängeln: design/BEFUND.md.

   Behoben werden hier die Mängel 1 (Überlappung des Klappmenüs),
   3 (Ticker nicht anhaltbar) und 4 (Kontrast). Mangel 5 (Breakpoint-Lücke)
   ist oben an Ort und Stelle geändert, Mangel 2 (Schrift) steckt in
   tta-schrift.css.
   ========================================================================== */


/* ---- MANGEL 1: Kopf klebt als EIN Block --------------------------------
   Referenz: css/styles.css:244 setzt das Klappmenü auf
   `position: fixed; top: 84px` — ein fester Abstand, der stimmt, solange
   nichts über dem Kopf steht. Der Spiele-Ticker schiebt den Kopf aber nach
   unten, und seine Höhe hängt davon ab, ob das Label sichtbar ist und ob
   Spiele anstehen. Auf dem Telefon lag das Menü damit unter dem Kopf oder
   ragte darüber.

   Zweiter Fehler derselben Familie: Ticker UND Kopf klebten beide auf
   `top: 0`. Beim Scrollen legte sich der Kopf (z-index 100) über den Ticker
   (z-index 80), der Ticker verschwand.

   Beides fällt weg, wenn Ticker und Kopf gemeinsam in einem klebenden
   Block sitzen. Das Klappmenü hängt dann unter diesem Block statt auf einem
   geratenen Pixelwert. Markup: templates/includes/header.html. */

.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
}

/* Die Kinder kleben nicht mehr selbst — das erledigt jetzt der Block. */
.site-head .tt-ticker,
.site-head .site-header {
  position: static;
}

/* .tt-ticker__label ist absolut gesetzt und braucht weiterhin einen
   Bezugsrahmen; `sticky` hatte den nebenbei geliefert. */
.site-head .tt-ticker { position: relative; }

/* Der Kopf behält seinen Schlagschatten, liegt aber innerhalb des Blocks. */
.site-head .site-header { z-index: 1; }

@media (max-width: 980px) {
  /* Klappmenü hängt am Kopfblock, nicht am Ansichtsfenster. */
  .mainnav {
    position: absolute;
    top: calc(100% + 10px);
    left: 14px;
    right: 14px;
    max-height: 72dvh;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  html.js-nav .mainnav {
    position: absolute;
    top: calc(100% + 10px);
    left: 14px;
    right: 14px;
    max-height: 72dvh;
  }
}

/* Ankerziele frei vom klebenden Kopf. tta-site.js misst dessen echte Höhe
   und schreibt sie nach --kopf-ist-hoehe; der Rückfallwert in
   tta-tokens.css greift, solange kein JavaScript läuft. */
html {
  scroll-padding-top: calc(var(--kopf-ist-hoehe, var(--anker-versatz)) + 14px);
}

/* Die Mannschaftsleiste klebte unter einem fest angenommenen Kopf. */
.team-nav { top: var(--kopf-ist-hoehe, var(--anker-versatz)); }
@media (max-width: 980px) {
  .team-nav { top: var(--kopf-ist-hoehe, var(--kopf-hoehe-tablet)); }
}


/* ---- MANGEL 3: Ticker anhaltbar (WCAG 2.2.2) ---------------------------
   Referenz: das Laufband läuft, solange die Seite offen ist. Anhalten geht
   nur, indem man mit der Maus darauf zeigt — auf dem Telefon also gar nicht.
   WCAG 2.2.2 verlangt für Bewegung, die länger als fünf Sekunden läuft, ein
   Bedienelement zum Anhalten.

   Der Knopf steht rechts im Ticker, ist per Tastatur erreichbar und auf
   jeder Breite sichtbar. Die Entscheidung merkt sich tta-site.js. */

/* BEFUND DES AUDITS 2026-09-20, HIER BEHOBEN: der Knopf mass 40 x 32px,
   das Mindestmass fuer eine Trefferflaeche ist 44 x 44px (WCAG 2.5.8).
   Die Breite steht hier, die Hoehe kommt aus der Zeilenhoehe des Tickers
   (min-height am .tt-ticker__viewport weiter oben) - der Knopf steht mit
   top:0;bottom:0 darin und ist so hoch wie der Ticker. Ein min-height am
   Knopf selbst wuerde ihn aus dem overflow:hidden des Tickers schieben.
   Der Ticker waechst dabei von 32px auf 44px; tta-site.js misst die echte
   Kopfhoehe und schreibt sie nach --kopf-ist-hoehe, die Ankerabstaende
   ziehen also von allein nach. */
.tt-ticker__pause {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--gold-35);
  background: var(--ticker-bg);
  color: var(--ticker-text);
  cursor: pointer;
  transition: background var(--tempo) ease, color var(--tempo) ease;
}
.tt-ticker__pause:hover,
.tt-ticker__pause:focus-visible {
  background: var(--zustand-hover-flaeche);
  color: var(--zustand-hover-schrift);
}
.tt-ticker__pause svg { width: 14px; height: 14px; display: block; }

/* Zwei Symbole im Knopf; je nach Zustand ist eines sichtbar. */
.tt-ticker__pause .ikon-start { display: none; }
.tt-ticker.is-paused .tt-ticker__pause .ikon-start { display: block; }
.tt-ticker.is-paused .tt-ticker__pause .ikon-pause { display: none; }

/* Platz für den Knopf, damit der letzte Eintrag nicht darunter läuft.
   Harter Wert mit Absicht: er muss exakt die Breite von .tt-ticker__pause
   sein (44px), nicht eine Stufe der Abstandsleiter. */
.tt-ticker__viewport { margin-right: 44px; }

/* Angehalten: das Laufband steht still und lässt sich von Hand schieben. */
.tt-ticker.is-paused .tt-ticker__track { animation-play-state: paused; }
.tt-ticker.is-paused .tt-ticker__viewport { overflow-x: auto; }

/* Wer Bewegung abbestellt hat, bekommt gar keine — dann ist der Knopf
   gegenstandslos. */
@media (prefers-reduced-motion: reduce) {
  .tt-ticker__pause { display: none; }
  .tt-ticker__viewport { margin-right: 0; }
}


/* ---- MANGEL 4: Kontrast der Eyebrow-Zeile ------------------------------
   Referenz: `.eyebrow { color: var(--gold) }` (css/styles.css:482) gilt
   überall. Auf Petrol sind das 3,6:1, auf dem hellen Seitengrund sogar nur
   2,2:1 — WCAG 1.4.3 verlangt 4,5:1 für Text dieser Größe.

   Die Markenfarbe bleibt, wo sie Fläche ist. Nur Text bekommt den passenden
   Ton derselben Familie: hell auf dunklem Grund, dunkel auf hellem Grund.
   Die Token stehen in tta-tokens.css §4b mit den gerechneten Werten. */

.eyebrow { color: var(--gold-auf-hell); }

.hero .eyebrow,
.page-hero .eyebrow,
.section--petrol .eyebrow,
.section-head--invert .eyebrow,
.site-footer .eyebrow { color: var(--gold-auf-dunkel); }

/* Dieselbe Rechnung trifft die Brotkrume im Seiten-Hero (styles.css:588). */
.page-hero .breadcrumb a { color: var(--gold-auf-dunkel); }

/* Ohne JavaScript gibt es keinen bedienbaren Anhalte-Knopf — dann läuft das
   Band gar nicht erst los. So ist WCAG 2.2.2 in beiden Fällen erfüllt.
   html.js setzt der Einzeiler im head-Block von base.html. */
html:not(.js) .tt-ticker__track { animation: none; }
html:not(.js) .tt-ticker__viewport { overflow-x: auto; margin-right: 0; }

/* Ankerabstand der Abschnitte hängt an derselben gemessenen Kopfhöhe
   (Referenz: styles.css nutzte den Festwert --anker-versatz). */
section[id] { scroll-margin-top: calc(var(--kopf-ist-hoehe, var(--anker-versatz)) + 14px); }


/* ==========================================================================
   Kontaktseite (Feedback Holger Würzberger, 08.10.2026)
   Nur Tokens; Karten bauen auf .offer-card und .contact-card auf.
   ========================================================================== */

.tta-kontakt-hero__intro { color: var(--auf-dunkel); max-width: 62ch; margin: var(--raum-3) 0 var(--raum-5); }
.tta-kontakt-hero__download { margin: var(--raum-4) 0 0; }
.tta-kontakt-hero__download a { color: var(--gold-auf-dunkel); font-weight: 700; }

.tta-schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--raum-4);
}
.tta-schritte .offer-card { min-height: 0; padding: var(--raum-5); }
.tta-schritte .offer-card h3 { margin-top: var(--raum-3); }

.tta-ansprech { display: flex; gap: var(--raum-5); align-items: flex-start; }
.tta-ansprech__text { flex: 1; min-width: 0; }
.tta-ansprech__text h3 { color: var(--petrol-dark); margin: var(--raum-2) 0 var(--raum-1); }
.tta-ansprech__funktion { font-weight: 700; color: var(--petrol); margin: 0 0 var(--raum-3); }
.tta-ansprech__daten p { margin: 0 0 var(--raum-1); }
.tta-ansprech__daten a { color: var(--petrol); font-weight: 800; text-decoration: none; }
.tta-ansprech__daten { margin-bottom: var(--raum-4); }
.tta-ansprech__foto {
  flex: 0 0 auto; width: 160px; aspect-ratio: 4 / 5;
  border-radius: var(--radius-karte); overflow: hidden; background: var(--petrol-soft);
}
.tta-ansprech__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tta-ansprech__foto--leer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed var(--linie-stark); color: var(--petrol);
}
.tta-ansprech__foto--leer span { font-size: var(--schrift-3); font-weight: 900; }
.tta-ansprech__foto--leer small { color: var(--muted); }
.tta-ansprech--gross .tta-ansprech__foto { width: 220px; }

.tta-ansprech-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--raum-5); }
.tta-kontakt-mitte { justify-content: center; margin-top: var(--raum-6); }

.tta-kontakt-download { margin: var(--raum-5) 0 var(--raum-2); }
.tta-kontakt-download a { color: var(--petrol); font-weight: 800; }
.tta-kontakt-fussnote { color: var(--muted); font-size: var(--text-s, .9rem); margin: 0; }

.tta-kontakt-slogan { text-align: center; }
.tta-kontakt-slogan p { margin: 0; font-size: var(--schrift-3); font-weight: 900; color: var(--white); }

@media (max-width: 980px) {
  .tta-schritte { grid-template-columns: repeat(2, 1fr); }
  .tta-ansprech-raster { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tta-schritte { grid-template-columns: 1fr; }
  .tta-ansprech { flex-direction: column; }
  .tta-ansprech__foto, .tta-ansprech--gross .tta-ansprech__foto { width: 140px; }
}

/* Ergebnisdienst (W-01, Runde 3): Ergebnis als Link auf den click-TT-Spielbericht,
   Startseite #ergebnisse und /spielplan. Unsere Punkte stehen vorn. */
.match-row__ergebnis {
  justify-self: end;
  min-width: 3.5em;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--radius-xs);
  background: var(--linie-16);
  color: var(--ink);
  text-decoration: none;
}
.match-row__ergebnis:hover, .match-row__ergebnis:focus-visible { text-decoration: underline; }
.match-row__ergebnis.is-sieg { background: var(--gold-20); color: var(--gold-ink); }
.match-row__ergebnis.is-niederlage { background: var(--linie-16); color: var(--muted); }
#ergebnisse .match-row { grid-template-columns: 110px 1fr 1fr auto; }
#ergebnisse .match-row__vs { display: none; }
.ergebnisse__mehr { margin-top: var(--raum-4); font-weight: 700; }
@media (max-width: 640px) {
  #ergebnisse .match-row { grid-template-columns: 1fr auto; }
}