/* Designsystem Bilotta + Hau – Tokens 1:1 aus Claude Design, ergänzt um --bh-red-on-dark. */
:root {
	/* Farben – CI */
	--bh-red: #B22023; --bh-red-600: #951B1E; --bh-red-700: #7A1518; --bh-red-100: #FBEAEA;
	--bh-red-on-dark: #D4393C; /* rote Schrift auf Anthrazit: 3,4:1 statt 2,4:1 */
	--bh-red-glow: rgba(178, 32, 35, 0.45);
	--bh-black: #232021; --bh-black-900: #1A1718; --bh-black-800: #2E2A2B;
	--bh-gray-700: #3A3637; --bh-gray-600: #6B6566; --bh-gray-500: #8A8384; --bh-gray-400: #A39C9D;
	--bh-gray-300: #C4BFC0; --bh-gray-200: #D9D5D6; --bh-gray-100: #ECEAEA;
	--bh-light: #F6F6F6; --bh-white: #FFFFFF;
	--bh-success: #2E7D4F; --bh-success-bg: #E6F2EB;
	--bh-warning: #C77A00; --bh-warning-bg: #FBF0DC;
	--bh-info: #3F5F86; --bh-info-bg: #E6ECF4;
	--bh-danger: var(--bh-red); --bh-danger-bg: var(--bh-red-100);

	/* Aliase */
	--color-brand: var(--bh-red); --color-brand-hover: var(--bh-red-600); --color-brand-active: var(--bh-red-700);
	--surface-page: var(--bh-light); --surface-card: var(--bh-white); --surface-muted: var(--bh-gray-100);
	--surface-dark: var(--bh-black); --surface-dark-2: var(--bh-black-800);
	--text-primary: var(--bh-black); --text-secondary: var(--bh-gray-600); --text-muted: var(--bh-gray-400);
	--text-on-dark: var(--bh-white); --text-on-dark-muted: var(--bh-gray-300); --text-on-brand: var(--bh-white);
	--border-default: var(--bh-gray-200); --border-strong: var(--bh-gray-300); --border-on-dark: rgba(255, 255, 255, 0.12);
	--focus-ring: 0 0 0 3px rgba(178, 32, 35, 0.35);
	--overlay-protect: linear-gradient(180deg, rgba(35,32,33,0) 30%, rgba(35,32,33,0.85) 100%);

	/* Typografie */
	--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
	--font-accent: "Michroma", "Orbitron", sans-serif;
	--text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px;
	--text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 96px; --text-7xl: 140px;
	--leading-tight: 0.95; --leading-snug: 1.1; --leading-normal: 1.5; --leading-relaxed: 1.65;
	--tracking-display: -0.01em; --tracking-accent: 0.14em; --tracking-caps: 0.08em;
	--weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800;

	/* Abstände, Radien, Schatten, Maße */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
	--space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
	--radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(35,32,33,0.08); --shadow-md: 0 6px 20px rgba(35,32,33,0.10);
	--shadow-lg: 0 24px 60px rgba(35,32,33,0.22); --shadow-red: 0 10px 30px rgba(178,32,35,0.35);
	--container-max: 1280px; --container-pad: 24px; --nav-height: 76px;
	--btn-height-sm: 36px; --btn-height-md: 44px; --btn-height-lg: 56px; --control-height: 48px;

	/* Bewegung */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; --dur-reveal: 900ms; --dur-sweep: 2600ms;
	--sweep-gradient: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 65%);
	--speedline: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 48px);
}

/* Das Kit kennt nur Desktop – mobil engere Ränder und Sektionsabstände (Handoff §6). */
@media (max-width: 767px) { :root { --container-pad: 16px; --space-9: 64px; --space-10: 96px; } }

@keyframes bh-sweep { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes bh-reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bh-clip-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bh-speedlines { from { background-position: 0 0; } to { background-position: -480px 0; } }
@keyframes bh-headlight { 0% { opacity: 0; transform: translateX(-30%) scaleX(0.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%) scaleX(1.4); } }
@keyframes bh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}