/**
 * @file theme.css
 * adesso Theme Design Tokens (CSS Custom Properties)
 *
 * Based on adesso Corporate Design Styleguide (June 2025).
 * All colors converted to OKLch for perceptual uniformity.
 *
 * Hausfarben:
 *   adesso-Blau: #006ec7 (RGB 0, 110, 199) → oklch(0.509 0.149 250.644)
 *   adesso-Grau: #887d75 (RGB 136, 125, 117) → oklch(0.583 0.016 51.707)
 *
 * Schmuckfarben:
 *   Yellow: #ffff00 → oklch(0.975 1.765 116.555)
 *   Legacy orange channel: mapped to MSV blue in this fork
 *   Legacy pink channel: mapped to MSV cyan in this fork
 *   Violet: #461ebe → oklch(0.390 0.921 290.105)
 *   Turquoise: #28dcaa → oklch(0.817 1.052 171.514)
 *   Green: #76c800 → oklch(0.767 1.140 138.313)
 *
 * WCAG Note: adesso-Grau on white background = 3.35:1 (fails AA).
 * Use darker shades (70%+) or adesso-Blau for accessible text.
 */

:root {
  /* ========================================
   * Hausfarben (Primary Brand Colors)
   * ======================================== */
  --color-brand-blue: oklch(0.509 0.149 250.644); /* adesso-Blau #006ec7 - Primary brand color */
  --color-brand-gray: oklch(0.583 0.016 51.707); /* adesso-Grau #887d75 - Secondary brand color */
  --color-brand-gray-10: oklch(0.95 0.016 51.707); /* adesso-Grau 10% - Light backgrounds */
  --color-brand-gray-70: oklch(0.45 0.016 51.707); /* adesso-Grau 70% - Accessible text */
  --color-brand-gray-90: oklch(0.3 0.016 51.707); /* adesso-Grau 90% - Dark text */

  /* ========================================
   * Schmuckfarben (Accent Colors)
   * ======================================== */
  --color-accent-yellow: oklch(0.975 1.765 116.555); /* #ffff00 - Highlights, Badges */
  --color-accent-orange: var(--color-msv-blue); /* Legacy warm accent alias: MSV blue in this fork */
  --color-accent-pink: #0b9ac5; /* Legacy pink alias: MSV cyan, never red/pink in this fork */
  --color-accent-violet: oklch(0.39 0.921 290.105); /* #461ebe - Categories, Tags */
  --color-accent-turquoise: oklch(0.817 1.052 171.514); /* #28dcaa - Success, Confirmations */
  --color-accent-green: oklch(0.767 1.14 138.313); /* #76c800 - Status, Progress */

  /* ========================================
   * Semantic UI Colors (Light Scheme)
   * ======================================== */
  --background: oklch(1 0 0); /* White background */
  --foreground: var(--color-brand-gray-90); /* adesso-Grau 90% for text */
  --card: oklch(0.98 0 0); /* Off-white card background */
  --card-foreground: var(--foreground);
  --primary: var(--color-brand-primary); /* MSV Navy for primary actions */
  --primary-foreground: oklch(1 0 0); /* White text on primary */
  --secondary: var(--color-brand-secondary); /* MSV Blue for secondary actions */
  --secondary-foreground: oklch(1 0 0); /* White text on blue */
  --muted: var(--color-brand-gray-10); /* Light background for muted sections */
  --muted-foreground: var(--color-brand-gray-70); /* Accessible gray for muted text */
  --accent: var(--color-brand-cta); /* MSV blue CTA accent */
  --accent-foreground: oklch(1 0 0); /* White text on primary accent */
  --destructive: var(--color-alert); /* MSV blue for destructive/error states in this fork */
  --destructive-foreground: oklch(1 0 0); /* White text on blue */
  --border: oklch(0.85 0 0); /* Light gray borders */
  --input: oklch(0.85 0 0); /* Light gray input borders */
  --ring: var(--color-brand-cyan); /* Focus ring color */

  /* ========================================
   * Typography Tokens (MSV)
   * ======================================== */
  --font-sans: "Hind", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Hind", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Hind", "Helvetica Neue", Arial, sans-serif;
  --font-serif-italic: "Hind", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Semantic Font Tokens */
  --font-heading: var(--font-display);
  --font-body: var(--font-club-regular);

  /* Premium-Pfad (unverändert für Migration) */
  --font-heading-premium: "Klavika", var(--font-display);
  --font-body-premium: "ABC Marist", var(--font-sans);

  /* ========================================
   * Icon Tokens
   * ======================================== */
  --icon-style: "Phosphor Thin"; /* Phosphor Icons library (thin/outline style only) */
  --icon-color-primary: var(--color-brand-primary); /* Icons in MSV Navy */
  --icon-color-secondary: var(--color-brand-gray); /* Icons in adesso-Grau #887d75 */
  --icon-stroke-width: 1px; /* Consistent stroke width for outlined icons */

  /* ========================================
   * Gradient Tokens (Blue-Anchored)
   * ======================================== */
  --gradient-blue-turquoise: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-accent-turquoise) 100%);
  --gradient-blue-violet: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-accent-violet) 100%);
  --gradient-blue-green: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-accent-green) 100%);
  --gradient-blue-orange: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-msv-blue) 100%);
  --gradient-club: linear-gradient(180deg, transparent 0%, var(--color-brand-primary) 100%);
  --gradient-club-black: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-black) 100%);

  /* ========================================
   * Layout & Styling Tokens
   * ========================================
   * FCN-Brand-Direktive 2026-05-16 (User-Mandate): 100% eckig, NICHTS rundes.
   * Alle Radius-Tokens auf 0 — überschreibt §7-Kantigkeit-Block des
   * fc-nuernberg-styleguide-Skills (der bisher 3-14px erlaubte).
   * Hebel statt 178 einzelner rounded-* Class-Removals: die Utilities
   * werden weiter generiert, rendern aber 0px.
   */
  --radius: 0;

  /* FCN Tracking Tokens (Styleguide §2): Knile-Italic-Kicker = 0.2em */
  --tracking-kicker: 0.2em;
  --tracking-section-label: 0.14em;

  /* Megamenü Editorial (Variant D) — Sizes + Tracking Tokens */
  --text-megamenu-meta: 10px;
  --text-megamenu-subline: 11px;
  --text-megamenu-display: clamp(2.5rem, 5vw, 5.5rem);
  --tracking-megamenu-meta: 0.35em;
  --tracking-megamenu-eyebrow: 0.3em;
  --tracking-megamenu-cta: 0.2em;

  /* Player-Card Jersey-Watermark — responsiver Oversized-Hintergrundtext.
   * cqw = Container-Query-Width (Card ist isolate-Container via clip-path-card-wedge).
   * Kein arbitrary [clamp(...)] im Twig erlaubt ([[no-arbitrary-tailwind-values]]). */
  --text-jersey-watermark: clamp(4rem, 13cqw, 9rem);

  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* ========================================
   * MSV Duisburg Brand Tokens
   * --------------------------------------------------------
   * The branch keeps legacy `fcn-*` utility names for component
   * compatibility, but the source values are MSV club tokens.
   * ======================================== */
  --color-msv-navy: #24356e;
  --color-msv-blue: #2f4799;
  --color-msv-cta: var(--color-msv-blue);
  --color-msv-cyan: #0b9ac5;
  --color-msv-ink: #1a1a1a;
  --color-msv-paper: #ffffff;
  --color-msv-mist: #f1f5f9;
  --color-msv-border: #cccccc;

  --color-brand-primary: var(--color-msv-navy);
  --color-brand-secondary: var(--color-msv-blue);
  --color-brand-cta: var(--color-msv-cta);
  --color-brand-cyan: var(--color-msv-cyan);
  --color-brand-primary-dark: #1b2854;
  --color-brand-primary-hover: var(--color-msv-blue);
  --color-brand-primary-active: #172246;
  --color-brand-primary-foreground: #ffffff;
  --color-brand-black: var(--color-msv-ink);
  --color-brand-white: var(--color-msv-paper);

  /* Club-neutral aliases for new code. */
  --color-club-primary: var(--color-msv-navy);
  --color-club-primary-hover: var(--color-msv-blue);
  --color-club-primary-foreground: var(--color-msv-paper);
  --color-club-brand: var(--color-msv-navy);
  --color-club-brand-deep: #1b2854;
  --color-club-cta: var(--color-msv-cta);
  --color-club-cta-hover: var(--color-msv-navy);
  --color-club-cyan: var(--color-msv-cyan);
  --color-club-surface: var(--color-msv-navy);
  --color-club-surface-2: #1b2854;
  --color-club-surface-3: #172246;
  --color-club-off-white: var(--color-msv-mist);
  --color-club-cream: #f8fafc;
  --color-club-text-body: var(--color-msv-ink);
  --color-club-text-muted: #d7ddea;

  /* Legacy utility aliases. */
  --color-fcn-primary: var(--color-club-cta);
  --color-fcn-primary-hover: var(--color-club-cta-hover);
  --color-fcn-primary-foreground: #ffffff;
  --color-fcn-brand: var(--color-club-cta);
  --color-fcn-brand-deep: var(--color-club-brand-deep);
  --color-fcn-stats-tile-dark: var(--color-club-surface-2);
  --color-fcn-live-dot: var(--color-msv-cyan);
  --color-fcn-bar: var(--color-msv-cyan);
  --color-fcn-weiss: var(--color-msv-paper);
  --color-fcn-muted: var(--color-club-text-muted);

  /* Legacy communication aliases mapped to MSV blues for this fork. */
  --color-fcn-pink: var(--color-msv-cyan);
  --color-fcn-orange: var(--color-msv-blue);
  --color-fcn-violett: var(--color-msv-navy);

  --gradient-match-card: linear-gradient(161deg, rgba(36, 53, 110, 0.88) 0%, rgb(23, 34, 70) 100%);

  /* ========================================
   * Legacy variant tokens, mapped to MSV blues in this fork.
   * ======================================== */
  --color-fcn-frauen: var(--color-msv-blue);
  --color-fcn-frauen-bg: var(--color-msv-navy);
  --color-fcn-frauen-header: #1b2854;
  --color-fcn-frauen-icon-box: #172246;

  /* Commerce accent — used ONLY for Shop/Ticket CTAs, never elsewhere. */
  --color-msv-commerce: #bf2a40;
  --color-msv-commerce-hover: #9e2234;

  /* Alert/Error color — intentionally blue in the MSV fork, never red. */
  --color-alert: var(--color-msv-blue);

  /* FCN-100%-eckig (User-Direktive 2026-05-16) — alle Radien 0 */
  --radius-club: 0;
  --radius-none: 0;

  /* ========================================
   * Legacy surface tokens, backed by MSV values.
   * ======================================== */
  --color-fcn-bg: var(--color-club-surface);
  --color-fcn-surface: var(--color-club-surface);
  --color-fcn-surface-2: var(--color-club-surface-2);
  --color-fcn-surface-3: var(--color-club-surface-3);
  --color-fcn-header: var(--color-club-brand-deep);
  --color-fcn-off-white: var(--color-club-off-white);
  --color-fcn-cream: var(--color-club-cream);
  --color-fcn-text-body: var(--color-club-text-body);
  --color-fcn-text-muted: var(--color-club-text-muted);

  /* Neutrale Grau-Stufen */
  --color-fcn-grau-100: #f8fafc;
  --color-fcn-grau-200: #e2e8f0;
  --color-fcn-grau-400: #94a3b8;
  --color-fcn-grau-700: #334155;
  --color-fcn-grau-900: var(--color-msv-ink);

  /* Signal-Farben — NICHT Branding! Für Success/Sub-In etc. */
  --color-fcn-success: #1a7f37; /* Styleguide §1 Signal-Grün */

  /* Match-Kontext: Club-Oberflächen (Night-Match-Look) */
  --color-grass-base: #0e2a1a;
  --color-grass-edge: var(--color-club-brand-deep);

  /* FCN 100% eckig (User-Direktive 2026-05-16) — alle Radien 0.
     Token-Namen bleiben für Backward-Compat in 47 Component-Files erhalten,
     Werte sind 0px. */
  --radius-card: 0; /* war 6px — News-Cards, Media-Frames */
  --radius-md: 0; /* war 8px — Secondary Surfaces */
  --radius-round: 0; /* war 14px — Odometer, Avatars, Pills */

  /* ========================================
   * Font-Aliase
   * --------------------------------------------------------
   * New code should use font-club-*. Existing components still use
   * font-fcn-* utilities, so those aliases point to the same MSV stack.
   * ======================================== */
  --font-club-regular: "Hind", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-club-headline: "Hind", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-club-subheadline: "Hind", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-fcn-regular: var(--font-club-regular);
  --font-fcn-headline: var(--font-club-headline);
  --font-fcn-subheadline: var(--font-club-subheadline);
  --font-fcn-semibold-italic: var(--font-club-subheadline);
  --font-fcn-icon: "fcn-icon";

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 16);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 22);
  }

  /* ========================================
   * Club-Frame 125-35105 Erweiterungs-Tokens
   * --------------------------------------------------------
   * Neue Tokens für vier SDC-Anpassungen (hero-club Slider,
   * stats-bar Frame-Pattern, match-highlight, navbar Tickets-Pill).
   * KEINE arbitrary Tailwind-Values — alle Werte als Token.
   * ======================================== */

  --shadow-club-tickets: 0 10px 7.5px rgba(47, 71, 153, 0.28), 0 4px 3px rgba(11, 154, 197, 0.2);
  --shadow-fcn-tickets: var(--shadow-club-tickets);

  /* Hero-Club Right-Side Slider Dimensionen (Figma x=947, w=800, h=461) */
  --width-hero-slider: min(800px, 45vw);
  --aspect-ratio-hero-slider: 800 / 461;
  /* Cinematic 21:9 Widescreen-Ratio (Navbar-Megamenu Media) */
  --aspect-ratio-cinematic: 21 / 9;

  /* Navbar Burger MENU-Label (10px, Tracking 0.2em) */
  --font-size-fcn-burger-label: 10px;
  --tracking-fcn-burger: 0.2em;

  /* ========================================
   * Club-frame swap vars. Tailwind indirection lives in main.css @theme inline. */
  --club-body-bg: var(--color-msv-paper);
  --club-header-bg: rgba(36, 53, 110, 0.96);
  --club-section-bg: var(--color-msv-paper);
  --club-stats-tile-a: var(--color-msv-blue);
  --club-stats-tile-b: #1b2854;
  --club-stats-icon-box: #172246;
  --club-headline-accent: var(--color-msv-cta);

  /* ========================================
   * MSV Editorial Bold System Tokens
   * --------------------------------------------------------
   * Flächen-Staffelung, Editorial-Typo, Interaktion, Zebra.
   * Komponenten konsumieren NUR diese Tokens — keine Hex-Literale.
   * ======================================== */

  /* Flächen-Staffelung */
  --surface-1: var(--color-msv-paper); /* Weiß — Basisflächen */
  --surface-2: var(--color-msv-mist); /* Mist — Sekundärflächen / Karten-Fonds */
  --surface-3: var(--color-msv-navy); /* Navy — Clubbänder */

  /* Editorial-Typo */
  --kicker-color: var(--color-msv-navy);
  --kicker-color-on-dark: var(--color-msv-cyan);
  --kicker-tracking: 0.14em; /* uppercase, extrabold, text-xs */
  --display-h1: clamp(3.25rem, 6.5vw, 6.5rem);
  --display-h2: clamp(2rem, 3.5vw, 3rem);

  /* Interaktion */
  --hover-lift: -3px;
  --hover-duration: 220ms;
  --card-radius: 0.25rem;

  /* Zebra */
  --zebra-opacity-light: 0.12; /* hell: 8–14 % wahrgenommene Deckkraft */
  --zebra-opacity-dark-mask: 0.85; /* dunkel: Navy-Tönung über Zebra-Struktur */

  /* ========================================
   * Reference Theme Tokens
   * --------------------------------------------------------
   * Default token set for the local reference theme.
   * ======================================== */
  --color-clone-red: #d2003c;
  --color-clone-red-hover: #b80035;
  --color-clone-red-active: #99002c;
  --color-clone-navy: #000f1e;
  --color-clone-navy-soft: #102235;
  --color-clone-blue: #173b70;
  --color-clone-paper: #ffffff;
  --color-clone-bg: #f6f6f6;
  --color-clone-muted: #e9edf2;
  --color-clone-border: #d7dde5;
  --color-clone-text-muted: #5d6876;
  --color-clone-success: #53b550;
  --color-clone-draw: #ffb800;
  --color-clone-loss: var(--color-clone-red);

  --font-clone-sans: "Fira Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-clone-display: "Fira Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-clone-body: var(--font-clone-sans);

  --clone-display-h1: clamp(3rem, 6vw, 6rem);
  --clone-display-h2: clamp(2rem, 3.75vw, 3.5rem);
  --clone-score-display: clamp(4rem, 8vw, 5rem);
  --clone-body-size: 0.9375rem;
  --clone-tracking-display: 0;
  --clone-radius-card: 0.5rem;
  --clone-radius-pill: 9999px;
  --clone-navbar-height: calc(var(--spacing) * 15);
  --clone-shadow-header: 0 2px 4px rgba(0, 15, 30, 0.1);
  --clone-shadow-card: 0 12px 30px rgba(0, 15, 30, 0.1);
}

:root {
  --background: var(--color-clone-bg);
  --foreground: var(--color-clone-navy);
  --card: var(--color-clone-paper);
  --card-foreground: var(--color-clone-navy);
  --primary: var(--color-clone-red);
  --primary-foreground: var(--color-clone-paper);
  --secondary: var(--color-clone-navy);
  --secondary-foreground: var(--color-clone-paper);
  --muted: var(--color-clone-muted);
  --muted-foreground: var(--color-clone-text-muted);
  --accent: var(--color-clone-red);
  --accent-foreground: var(--color-clone-paper);
  --destructive: var(--color-clone-loss);
  --destructive-foreground: var(--color-clone-paper);
  --border: var(--color-clone-border);
  --input: var(--color-clone-border);
  --ring: var(--color-clone-red);

  --font-sans: var(--font-clone-sans);
  --font-display: var(--font-clone-display);
  --font-serif: var(--font-clone-sans);
  --font-serif-italic: var(--font-clone-sans);
  --font-heading: var(--font-clone-display);
  --font-body: var(--font-clone-body);
  --font-club-regular: var(--font-clone-body);
  --font-club-headline: var(--font-clone-display);
  --font-club-subheadline: var(--font-clone-display);
  --font-fcn-regular: var(--font-club-regular);
  --font-fcn-headline: var(--font-club-headline);
  --font-fcn-subheadline: var(--font-club-subheadline);
  --font-fcn-semibold-italic: var(--font-club-subheadline);

  --radius: var(--clone-radius-card);
  --radius-club: var(--clone-radius-card);
  --radius-card: var(--clone-radius-card);
  --radius-md: var(--clone-radius-card);
  --radius-round: var(--clone-radius-pill);
  --navbar-height: var(--clone-navbar-height);

  --color-brand-primary: var(--color-clone-red);
  --color-brand-secondary: var(--color-clone-navy);
  --color-brand-cta: var(--color-clone-red);
  --color-brand-cyan: var(--color-clone-blue);
  --color-brand-primary-dark: var(--color-clone-red-active);
  --color-brand-primary-hover: var(--color-clone-red-hover);
  --color-brand-primary-active: var(--color-clone-red-active);
  --color-brand-primary-foreground: var(--color-clone-paper);
  --color-brand-black: var(--color-clone-navy);
  --color-brand-white: var(--color-clone-paper);

  --color-club-primary: var(--color-clone-red);
  --color-club-primary-hover: var(--color-clone-red-hover);
  --color-club-primary-foreground: var(--color-clone-paper);
  --color-club-brand: var(--color-clone-red);
  --color-club-brand-deep: var(--color-clone-navy);
  --color-club-cta: var(--color-clone-red);
  --color-club-cta-hover: var(--color-clone-red-hover);
  --color-club-cyan: var(--color-clone-blue);
  --color-club-surface: var(--color-clone-navy);
  --color-club-surface-2: var(--color-clone-navy-soft);
  --color-club-surface-3: var(--color-clone-blue);
  --color-club-off-white: var(--color-clone-bg);
  --color-club-cream: var(--color-clone-paper);
  --color-club-text-body: var(--color-clone-navy);
  --color-club-text-muted: var(--color-clone-text-muted);

  --color-fcn-primary: var(--color-clone-red);
  --color-fcn-primary-hover: var(--color-clone-red-hover);
  --color-fcn-primary-foreground: var(--color-clone-paper);
  --color-fcn-brand: var(--color-clone-red);
  --color-fcn-brand-deep: var(--color-clone-navy);
  --color-fcn-live-dot: var(--color-clone-red);
  --color-fcn-bar: var(--color-clone-red);
  --color-fcn-weiss: var(--color-clone-paper);
  --color-fcn-muted: var(--color-clone-muted);
  --color-fcn-pink: var(--color-clone-red);
  --color-fcn-orange: var(--color-clone-red-hover);
  --color-fcn-violett: var(--color-clone-navy);
  --color-fcn-bg: var(--color-clone-navy);
  --color-fcn-surface: var(--color-clone-navy);
  --color-fcn-surface-2: var(--color-clone-navy-soft);
  --color-fcn-surface-3: var(--color-clone-blue);
  --color-fcn-header: var(--color-clone-navy);
  --color-fcn-off-white: var(--color-clone-bg);
  --color-fcn-cream: var(--color-clone-paper);
  --color-fcn-text-body: var(--color-clone-navy);
  --color-fcn-text-muted: var(--color-clone-text-muted);
  --color-fcn-grau-100: var(--color-clone-bg);
  --color-fcn-grau-200: var(--color-clone-muted);
  --color-fcn-grau-400: var(--color-clone-text-muted);
  --color-fcn-grau-700: var(--color-clone-navy-soft);
  --color-fcn-grau-900: var(--color-clone-navy);
  --color-fcn-success: var(--color-clone-success);
  --color-fcn-frauen: var(--color-clone-red);
  --color-fcn-frauen-bg: var(--color-clone-navy);
  --color-fcn-frauen-header: var(--color-clone-navy-soft);
  --color-fcn-frauen-icon-box: var(--color-clone-blue);
  --color-alert: var(--color-clone-red);

  --surface-1: var(--color-clone-paper);
  --surface-2: var(--color-clone-bg);
  --surface-3: var(--color-clone-navy);
  --kicker-color: var(--color-clone-red);
  --kicker-color-on-dark: var(--color-clone-paper);
  --display-h1: var(--clone-display-h1);
  --display-h2: var(--clone-display-h2);
  --kicker-tracking: 0;
  --tracking-kicker: 0;
  --tracking-section-label: 0;
  --hover-lift: -2px;
  --card-radius: var(--clone-radius-card);

  --gradient-blue-orange: linear-gradient(135deg, var(--color-clone-red) 0%, var(--color-clone-red-active) 100%);
  --gradient-club: linear-gradient(180deg, transparent 0%, var(--color-clone-red) 100%);
  --gradient-club-black: linear-gradient(135deg, var(--color-clone-navy) 0%, var(--color-clone-blue) 100%);
  --gradient-match-card: linear-gradient(161deg, rgba(210, 0, 60, 0.92) 0%, rgb(0, 15, 30) 100%);

  --club-body-bg: var(--color-clone-bg);
  --club-header-bg: rgba(255, 255, 255, 0.96);
  --club-section-bg: var(--color-clone-paper);
  --club-stats-tile-a: var(--color-clone-red);
  --club-stats-tile-b: var(--color-clone-navy);
  --club-stats-icon-box: var(--color-clone-navy-soft);
  --club-headline-accent: var(--color-clone-red);
  --shadow-club-tickets: 0 10px 20px rgba(210, 0, 60, 0.18);
  --shadow-fcn-tickets: var(--shadow-club-tickets);
}

/* ==========================================================================
 * MSV Body Font — explicit assignment for the frontend shell.
 * ========================================================================== */
html,
body {
  font-family: var(--font-club-regular);
}

/* ==========================================================================
 * FCN GDA-2026 Pattern Utilities
 * --------------------------------------------------------------------------
 * Muster extrahiert aus dem German-Design-Award-2026-Keyvisual:
 *   - chevron-stack: gestaffelte 3D-Pfeile (Ecke links unten)
 *   - chevron-diamond: große Diamant-Chevron (Ecke oben links)
 *   - sawtooth: feines Zickzack-Raster (Ecke rechts unten)
 *   - battlement: Burg-Zinnen (Silhouette aus dem Stadtwappen)
 * Einsatz als Section-BG via class="fcn-pattern fcn-pattern--chevron-stack".
 * ========================================================================== */
.fcn-pattern {
  position: relative;
  isolation: isolate;
}

.fcn-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-repeat: no-repeat;
}

.fcn-pattern--chevron-stack::before {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 12%, transparent 12% 24%),
    linear-gradient(135deg, rgba(11, 154, 197, 0.18) 0 8%, transparent 8% 16%);
  background-position: left bottom;
  background-size: 420px auto;
}

.fcn-pattern--chevron-diamond::before {
  background-image:
    linear-gradient(
      45deg,
      transparent 42%,
      rgba(255, 255, 255, 0.22) 42% 48%,
      transparent 48% 52%,
      rgba(11, 154, 197, 0.18) 52% 58%,
      transparent 58%
    ),
    linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.14) 42% 58%, transparent 58%);
  background-position: right top;
  background-size: 360px auto;
}

.fcn-pattern--sawtooth::before {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 10px, transparent 10px 20px);
  background-position: right bottom;
  background-size: 240px auto;
  background-repeat: repeat-x;
  opacity: 0.5;
}

.fcn-pattern--battlement::before {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 24px, transparent 24px 48px);
  background-position: center top;
  background-size: 180px auto;
  background-repeat: repeat-x;
  opacity: 0.9;
}

/* MSV Keyvisual-Section: Blue gradient + sparse corner patterns.
   Referenz: Duisburg light/blue zebra key visual for this demo fork.
   Einsatz: class="fcn-keyvisual" auf einer Section/CTA. */
.fcn-keyvisual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ffffff;
  background: radial-gradient(ellipse 85% 70% at 50% 50%, var(--color-msv-blue) 0%, var(--color-msv-navy) 48%, #172246 100%);
}

/* Corner-Muster als ein einzelnes ::before — jedes Pattern in seiner Ecke. */
.fcn-keyvisual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.18) 40% 54%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 24px, transparent 24px 48px),
    linear-gradient(135deg, rgba(11, 154, 197, 0.18) 0 12%, transparent 12% 24%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 10px, transparent 10px 20px);
  background-position:
    left -40px top -30px,
    right -20px top,
    left -30px bottom -40px,
    right bottom 12%;
  background-size:
    260px auto,
    140px auto,
    280px auto,
    180px auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* ==========================================================================
 * Global Brand-BG — Club-Frame 125-35105 (Figma führend)
 * --------------------------------------------------------------------------
 * Scope: gilt für ALLE Frontend-Routen. Der Club-Frame zeigt schwarzen
 * Grund (#000000) mit dezent erkennbarem GDA-Keyvisual als Marken-Watermark.
 *
 * Memory-Update: ersetzt fcn_global_body_bg_ssot (alter Dark-First-Gradient,
 * Stand 2026-04-17). Direktive 2026-05-15: Figma führend.
 *
 * Layer-Stack (bottom → top):
 *   1. Body: pures Schwarz #000000 (Figma Club-Frame BG)
 *   2. Body::before (fixed, z-index: -1): GDA-Keyvisual als Watermark,
 *      opacity reduziert auf 0.18 — sichtbar genug für DNA, leise genug
 *      damit Hero-/Stats-/Match-Cluster ihre Farben tragen
 *   3. Content rendert on top
 * ========================================================================== */
body {
  background-color: var(--club-body-bg);
  background-attachment: fixed;
  color: var(--color-msv-ink);
}

/* GDA-Keyvisual als fixed viewport-Watermark hinter allem Content.
   Club-Frame zeigt es nicht explizit, behält aber die Marken-DNA als
   stiller Anker bei langen Scroll-Seiten — Stats-/Match-/Footer-Cluster
   sind bereits opak und überdecken das Pattern vollständig. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 10%, transparent 10% 22%),
    radial-gradient(circle at 20% 10%, rgba(11, 154, 197, 0.24), transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(47, 71, 153, 0.3), transparent 34%);
  background-position: center center;
  background-size:
    420px 420px,
    cover,
    cover;
  background-repeat: repeat, no-repeat, no-repeat;
  opacity: 0.1;
  mix-blend-mode: multiply;
}

/* Responsive: Mobile etwas zurückhaltender. */
@media (max-width: 768px) {
  body::before {
    background-size: 180vw auto;
    opacity: 0.2;
  }
}

/* Reduced-Motion: fixed-attachment fallback auf Body-Gradient. */
@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll;
  }
}

/* ==========================================================================
 * Smooth Scrolling (Anchor-Links, scrollIntoView) — global
 * --------------------------------------------------------------------------
 * Wichtig für Match-Center-Nav, Spieltag-Anchors und Scroll-To-Top-Buttons.
 * scroll-padding-top hält Ziel-Anchors frei vom Sticky-Header (≈102px +
 * match-center-nav-Polster). Reduced-Motion-User bekommen instant scroll.
 * ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

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

/* ==========================================================================
 * MSV Foreground-Token-Remap für Canvas-Pages
 * --------------------------------------------------------------------------
 * Mercury-Starterkit setzt `--foreground` auf ein dunkles adesso-Zink
 * (oklch 0.3) — on dark club surfaces this token can disappear.
 *
 * Auf dunklen MSV-Flaechen ist Weiss der Default. Light-Card-Surfaces sind der
 * Ausnahme-Kontext: dort re-assertieren wir Dark-Text, damit Blog-Cards,
 * Testimonials und News-Cards mit `bg-card`/`bg-background` lesbar
 * bleiben. `text-muted-foreground` bleibt unangetastet — in Production
 * sitzt er nur innerhalb Light-Card-Surfaces.
 * ========================================================================== */
/*
 * Scope: nur innerhalb `<main>`. Navbar, Header-Region und Footer liegen
 * ausserhalb und haben ihre eigene Light-auf-Light-Logik
 * (`.navbar.is-megamenu-open { @apply text-foreground }` u. ä. in
 * main.css), die auf dem Original-Token-Schema (dark `--foreground`)
 * aufbaut. Wir fassen die nicht an.
 */
body.canvas-page main {
  --foreground: var(--color-msv-ink);
  --card-foreground: var(--color-brand-gray-90);
}

body.canvas-page main :where(.bg-card, .bg-white) {
  color: var(--card-foreground);
}

/* ==========================================================================
 * Frontpage-CTA „Werde Teil der Legende" as a navy transition zone
 * --------------------------------------------------------------------------
 * Die letzte CTA-Section leitet nahtlos in den Footer über: von transparent
 * am oberen Rand bis Club-Navy am unteren. Hier nur Gradient + text-shadow
 * für Lesbarkeit der Headline gegen den Verlauf.
 * SDC cta.twig bleibt unangetastet — reiner CSS-Scope auf Frontpage.
 * ========================================================================== */
body.path-frontpage section.cq-full.bg-none.text-foreground {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(to bottom, transparent 0%, rgba(36, 53, 110, 0.58) 45%, var(--color-msv-navy) 100%);
}
body.path-frontpage section.cq-full.bg-none.text-foreground :where(h2, p) {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
 * Sport-Footer — MSV Navy Surface
 * --------------------------------------------------------------------------
 * Footer specifics live in the Twig component and use MSV navy/blue tokens.
 * ========================================================================== */