/* ============================================================
   DESIGN TOKENS — SG BBM Bietigheim Breitensport
   Modern-klar, heller Grundton, Markenfarben der SG BBM:
   Dunkelblau #122142 + Signal-Rot #a20b1e (aus design-pattern.md)
   Fonts: SG Display (Changa One Italic, OFL) + SG Text (Fira Sans Extra Condensed, OFL), seit 08.11.2026, self-hosted.
   ============================================================ */

/* --- Self-hosted Fonts (DSGVO: kein Google-CDN) ---
   SG Display = einzige Display-Schrift der Seite (siehe CLAUDE.md): Ueberschriften, Navigation, Buttons,
   Kicker/Labels, Zahlen. Seit 08.11.2026 steckt hier Changa One Italic (OFL, fonts/ChangaOne-OFL.txt), Kombination 46
   aus vorschau/schriften-50. Gebaut mit build_sg_display_font.py (ergaenzt Akzentbuchstaben wie Ć, Č, intern "SG Display",
   weil die OFL den Namen "Changa" fuer veraenderte Fassungen sperrt). Vorher Passion One Black.
   Hoehen-Korrektur 86,5 % / 24 % (Versalhoehe .625 em): so liegt die Mitte der Grossbuchstaben (.621 em) genau in der Zeilenmitte. */
@font-face {
  font-family: 'SG Display';
  font-style: normal;
  font-weight: 100 900;   /* ein Schnitt fuer alle Staerken: keine kuenstlich fett gerechnete Schrift */
  font-display: block;
  src: url('../fonts/sg-display-black.woff2') format('woff2'); ascent-override: 86.5%; descent-override: 24%; line-gap-override: 0%; }
@font-face {
  font-family: 'SG Display Black';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url('../fonts/sg-display-black.woff2') format('woff2'); ascent-override: 86.5%; descent-override: 24%; line-gap-override: 0%; }
/* SG Text (seit 08.11.2026 Fira Sans Extra Condensed, OFL, fonts/FiraSansExtraCondensed-OFL.txt, Original in
   Schriftart/Fira Sans Extra Condensed (OFL)/, vorher Barlow Semi Condensed). SG Display = Changa One Italic (Kombination 46). Eine Familie, die nach Staerke umschaltet:
   100-500 = gerade (Fliesstext, Formularfelder),
   600-900 = schraeg (Buttons, Labels, Kicker, Ergebnisse, Meta-Zeilen), auch ohne font-style: italic.
   Damit wirken alle Bedienelemente sportlich, der Fliesstext bleibt ruhig. Wer ein fettes Element gerade braucht,
   nimmt 'SG Serif' (unten, gleiche Schrift, alle Staerken gerade). Ersetzt IBM Plex Serif und SG Gothic Bold. */
@font-face { font-family: 'SG Text'; font-style: normal; font-weight: 100 450; font-display: swap; src: url('../fonts/fira-xc-400.woff2') format('woff2'); }
@font-face { font-family: 'SG Text'; font-style: normal; font-weight: 451 550; font-display: swap; src: url('../fonts/fira-xc-500.woff2') format('woff2'); }
@font-face { font-family: 'SG Text'; font-style: normal; font-weight: 551 650; font-display: block; src: url('../fonts/fira-xc-600i.woff2') format('woff2'); }
@font-face { font-family: 'SG Text'; font-style: normal; font-weight: 651 750; font-display: block; src: url('../fonts/fira-xc-700i.woff2') format('woff2'); }
@font-face { font-family: 'SG Text'; font-style: normal; font-weight: 751 1000; font-display: block; src: url('../fonts/fira-xc-800i.woff2') format('woff2'); }
@font-face { font-family: 'SG Text'; font-style: italic; font-weight: 100 550; font-display: swap; src: url('../fonts/fira-xc-400i.woff2') format('woff2'); }
@font-face { font-family: 'SG Text'; font-style: italic; font-weight: 551 750; font-display: block; src: url('../fonts/fira-xc-700i.woff2') format('woff2'); }
@font-face { font-family: 'SG Text'; font-style: italic; font-weight: 751 1000; font-display: block; src: url('../fonts/fira-xc-800i.woff2') format('woff2'); }
/* font-display: block fuer Display und die fetten Schnitte: sonst zeigt der Browser beim Seitenwechsel kurz eine
   Ersatzschrift in Menue und Buttons. Die Dateien werden zusaetzlich in jeder Seite vorgeladen (<link rel=preload>). */
/* SG Akzent (08.11.2026): Racing Sans One (OFL, fonts/RacingSansOne-OFL.txt, Original in Schriftart/Racing Sans One (OFL)/),
   nur fuer einzelne Akzent-Zeilen wie den Fan-Gruss in der Karte "Letztes Spiel" (var(--font-akzent)). Unveraendert, nur Zeichen-Auszug. */
@font-face { font-family: 'SG Akzent'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('../fonts/racing-sans-one.woff2') format('woff2'); }
/* SG Serif (Name historisch): Barlow Semi Condensed in allen Staerken gerade, fuer Hervorhebungen im Fliesstext */
@font-face { font-family: 'SG Serif'; font-style: normal; font-weight: 100 450; font-display: swap; src: url('../fonts/fira-xc-400.woff2') format('woff2'); }
@font-face { font-family: 'SG Serif'; font-style: normal; font-weight: 451 550; font-display: swap; src: url('../fonts/fira-xc-500.woff2') format('woff2'); }
@font-face { font-family: 'SG Serif'; font-style: normal; font-weight: 551 650; font-display: swap; src: url('../fonts/fira-xc-600.woff2') format('woff2'); }
@font-face { font-family: 'SG Serif'; font-style: normal; font-weight: 651 750; font-display: swap; src: url('../fonts/fira-xc-700.woff2') format('woff2'); }
@font-face { font-family: 'SG Serif'; font-style: normal; font-weight: 751 1000; font-display: swap; src: url('../fonts/fira-xc-800.woff2') format('woff2'); }
@font-face { font-family: 'SG Serif'; font-style: italic; font-weight: 100 550; font-display: swap; src: url('../fonts/fira-xc-400i.woff2') format('woff2'); }
@font-face { font-family: 'SG Serif'; font-style: italic; font-weight: 551 1000; font-display: swap; src: url('../fonts/fira-xc-700i.woff2') format('woff2'); }

:root {
  /* --- Flaechen / Hintergruende (nur der helle Banner-Blauton; Weiss nur als Schrift) --- */
  --bg:        #0000e4;   /* Seiten-Hintergrund: Banner-Blau */
  --bg-2:      #0000c4;   /* Wechselsektion: dunkles Blau (Rhythmus dunkel/hell) */
  --bg-3:      #1a1aef;   /* Hover-Aufhellung */
  --bg-card:   #0000c4;   /* Karten: dunkles Blau auf hellem Grund */

  /* --- Marken-Baender: Banner-Rot statt Dunkelblau --- */
  --navy:       #d90000;  /* Band-Rot: Hero/Footer/Seitenkoepfe */
  --navy-2:     #ff1f1f;  /* Sekundaerrot: Verlaeufe, Akzentflaechen */
  --navy-3:     #ff7a7a;  /* helles Rot: Linien/Hover auf Band */
  --on-navy:      #ffffff;
  --on-navy-dim:  rgba(255, 255, 255, 0.72);

  /* --- Text (Weiss auf Blau) — Opazitaet fuer WCAG-AA-Kontrast angehoben --- */
  --fg:        #ffffff;
  --fg-dim:    rgba(255, 255, 255, 0.82);
  --fg-faint:  rgba(255, 255, 255, 0.68);

  /* --- Akzent: Banner-Rot (CTA/Highlights) --- */
  --accent:        #ff0000;
  --accent-light:  #ff4040;
  --accent-dark:   #c90000;
  --accent-soft:   rgba(255, 0, 0, 0.14);
  /* helles Rot fuer roten TEXT/Links auf blauem Grund (Kontrast >= 4.5:1) */
  --accent-text:   #ff9a9a;
  /* dunkleres Rot fuer FLAECHEN mit weisser Schrift (Buttons); weiss darauf >= 4.5:1 */
  --accent-fill:   #d90000;

  /* --- Linien / Border --- */
  --border:        rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.34);

  /* --- Typografie --- */
  --font-display: 'SG Display', 'Arial Narrow', Arial, sans-serif;
  --font-display-black: 'SG Display Black', 'SG Display', 'Arial Narrow', Arial, sans-serif;   /* Abschnitts-Ueberschriften */
  --font-body:    'SG Text', 'Arial Narrow', Arial, sans-serif;
  --font-akzent:  'SG Akzent', var(--font-body);
  --font-text:    'SG Serif', 'Arial Narrow', Arial, sans-serif;   /* Hervorhebungen im Fliesstext */
  /* grosse Hero-Headline und Ghost-Woerter: ebenfalls SG Display */
  --font-hero:    'SG Display', 'Arial Narrow', Arial, sans-serif;

  /* --- Spacing / Layout --- */
  --section-padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem);
  --container-max:   1200px;

  /* --- Radius --- */
  --radius:    6px;
  --radius-lg: 12px;

  /* --- Schatten (dunkles Blau fuer Tiefe) --- */
  --shadow-card: 0 1px 2px rgba(0, 0, 40, 0.25), 0 8px 24px rgba(0, 0, 40, 0.30);
  --shadow-lift: 0 2px 4px rgba(0, 0, 40, 0.30), 0 16px 40px rgba(0, 0, 40, 0.40);

  /* --- Transitions --- */
  --transition:      0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.2s ease;
}

/* Minimaler Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; }
/* H1 seitenweit in Anton (schwere Condensed-Caps); nur ein Schnitt -> keine Fake-Fettung */
h1 { font-family: var(--font-hero); font-synthesis: none; -webkit-font-synthesis: none; }

a { color: var(--accent-text); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: #ffffff; }
/* Links im Fliesstext muessen ohne Farbe erkennbar sein (WCAG 1.4.1) */
p a, li a, dd a, .prose a, .form-note a, .org-contact a { text-decoration: underline; }
.footer-grid a, .nav-sub a { text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

/* Fett und kursiv mitten im Fliesstext: Plex Serif mit echten Schnitten statt Railroad Gothic */
:is(p, li, dd, blockquote, figcaption) :is(strong, b) { font-family: var(--font-text); }

/* Seitenwechsel (05.11.2026): weicher Uebergang statt kurzem Aufblitzen, nur gleiche Domain.
   Browser ohne Unterstuetzung wechseln wie bisher. Bei "Bewegung reduzieren" ohne Animation. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }