/* Grundlagen: Reset, Container, Typografie, Eyebrow, Button, Speedlines, Einblenden. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--nav-height); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-body); color: var(--text-primary); background: var(--surface-page); }
img, svg { max-width: 100%; height: auto; }
.bh-icon { flex: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bh-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 200; padding: var(--space-3) var(--space-4); background: var(--bh-white); color: var(--bh-black); }
.bh-skip:focus { top: var(--space-4); }

.bh-container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin-inline: auto; padding-inline: var(--container-pad); }
.bh-section { padding-block: var(--space-9); }
.bh-section--white { background: var(--surface-card); }
.bh-section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
.bh-speedlines { position: relative; isolation: isolate; }
.bh-speedlines::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--speedline); animation: bh-speedlines 9s linear infinite; }

.bh-eyebrow { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); font: var(--weight-regular) var(--text-xs)/1.5 var(--font-accent); letter-spacing: var(--tracking-accent); text-transform: uppercase; color: var(--text-secondary); }
.bh-eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--bh-red); flex: none; }
.bh-section--dark .bh-eyebrow, .bh-hero .bh-eyebrow { color: var(--text-on-dark-muted); }

.bh-h1, .bh-h2, .bh-h3 { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); }
.bh-h1 { font-weight: var(--weight-bold); font-size: clamp(40px, 5.5vw, var(--text-5xl)); line-height: var(--leading-tight); }
.bh-h2 { font-weight: var(--weight-bold); font-size: clamp(32px, 4vw, var(--text-4xl)); line-height: var(--leading-snug); }
.bh-h3 { font-weight: var(--weight-semibold); font-size: var(--text-2xl); line-height: var(--leading-snug); }
.bh-accent { display: block; color: var(--bh-red); }
.bh-section--dark .bh-accent, .bh-hero .bh-accent { color: var(--bh-red-on-dark); }
.bh-lead { max-width: 46ch; margin: var(--space-5) 0 0; font-size: var(--text-lg); color: var(--text-secondary); }
.bh-section--dark .bh-lead, .bh-hero .bh-lead { color: var(--text-on-dark-muted); }
.bh-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }

.bh-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btn-height-md); padding: 0 var(--space-5); border: 1.5px solid transparent; border-radius: var(--radius-xs); font: var(--weight-semibold) var(--text-sm)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-fast); }
.bh-btn--sm { height: var(--btn-height-sm); padding: 0 var(--space-4); font-size: var(--text-xs); }
.bh-btn--lg { height: var(--btn-height-lg); padding: 0 30px; font-size: 15px; }
.bh-btn--primary { background: var(--color-brand); color: var(--text-on-brand); }
.bh-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--bh-black); }
.bh-btn--secondary.bh-btn--on-dark { color: var(--bh-white); border-color: rgba(255,255,255,0.6); }
.bh-btn:active { transform: translateY(1px) scale(0.99); }
.bh-btn--primary:active { background: var(--color-brand-active); }

@media (hover: hover) {
	.bh-btn--primary:hover { background: var(--color-brand-hover); box-shadow: var(--shadow-red); }
	.bh-btn--primary::after { content: ""; position: absolute; inset: 0; background: var(--sweep-gradient); transform: translateX(-120%) skewX(-18deg); }
	.bh-btn--primary:hover::after { animation: bh-sweep var(--dur-slow) var(--ease-out); }
	.bh-btn--secondary:hover { background: var(--bh-black); color: var(--bh-white); }
	.bh-btn--secondary.bh-btn--on-dark:hover { background: var(--bh-white); color: var(--bh-black); border-color: var(--bh-white); }
}

/* Mobil: Tippziele mindestens 44px, Aktionen untereinander in voller Breite. */
@media (max-width: 767px) {
	.bh-btn--sm { height: var(--btn-height-md); }
	.bh-actions .bh-btn { flex: 1 1 100%; }
}

/* Inhalte sind ohne JavaScript sichtbar; erst die Klasse .js schaltet das Einblenden scharf. */
.js .bh-reveal { opacity: 0; }
.js .bh-reveal.is-visible { animation: bh-reveal-up var(--dur-slow) var(--ease-out) forwards; }