/* ==========================================================================
   SV Musterfeld 1920 — Design Tokens, Reset, Typografie-Skala
   Farbstrategie: „Committed" — Vereinsgrün trägt die Fläche, EIN Gold-Akzent
   nur für CTAs. Anton (Scoreboard-Display) + Work Sans (humanistisch, warm).
   ========================================================================== */

:root {
	/* Vereinsgrün (Primär) */
	--pitch-900: #123322;
	--pitch-800: #17422C;
	--pitch-700: #1E5D3A;
	--pitch-600: #267449;
	--pitch-500: #2F8F52;
	--pitch-400: #4CAB68;
	--pitch-300: #8FD1A0;
	--pitch-100: #E3F3E7;

	/* Neutral / Papier */
	--ink: #0E1F16;
	--ink-soft: #3C4E43;
	--paper: #F5FAF6;
	--white: #FFFFFF;
	--line: #D7E5DC;

	/* Sieger-Gold (einziger Akzent, nur CTAs / Highlights) */
	--gold-600: #C6862A;
	--gold-500: #E2A33B;
	--gold-400: #F0B75A;
	--gold-100: #FCEFD9;

	/* Typografie */
	--font-display: 'Anton', 'Arial Narrow', sans-serif;
	--font-body: 'Work Sans', 'Segoe UI', sans-serif;

	/* Abstände */
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 9rem;

	/* Radien & Schatten (dezent, keine Ghost-Card-Kombi) */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--shadow-soft: 0 8px 24px -12px rgba(14, 31, 22, 0.28);
	--shadow-lift: 0 20px 48px -20px rgba(14, 31, 22, 0.35);

	/* Motion */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 480ms;

	/* Z-Index-Skala */
	--z-dropdown: 20;
	--z-sticky: 30;
	--z-overlay: 40;
	--z-drawer: 45;
	--z-toast: 60;

	/* Generische Aliase für theme-fähige Plugins (z.B. Spielplan/Tabelle) */
	--surface: var(--pitch-900);
	--text: var(--white);
	--radius: var(--radius-md);
	--accent: var(--gold-500);
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	width: 100%;
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
svg { max-width: 100%; height: auto; }

/* Icon-Sicherheitsnetz: jedes .icon ist dezentes Beiwerk, nie Blickfang */
.icon {
	width: 1.4em;
	height: 1.4em;
	flex: 0 0 auto;
	vertical-align: middle;
	max-width: 32px;
	max-height: 32px;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--pitch-900);
	text-wrap: balance;
	margin: 0 0 var(--space-sm);
}

h1 { font-size: clamp(2.4rem, 5.2vw + 1rem, 5.5rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 3vw + 1rem, 3.4rem); }
h3 { font-size: clamp(1.3rem, 1.4vw + 1rem, 1.9rem); }
h4 { font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem); }

p { margin: 0 0 var(--space-sm); max-width: 65ch; text-wrap: pretty; }
p.lead { font-size: clamp(1.1rem, 0.6vw + 1rem, 1.35rem); color: var(--ink-soft); }

a { color: var(--pitch-700); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--pitch-500); }

ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

::selection { background: var(--gold-400); color: var(--ink); }

:focus-visible {
	outline: 3px solid var(--gold-500);
	outline-offset: 3px;
	border-radius: 4px;
}

button, input, textarea, select { font-family: inherit; }