/* Navigation
   Sticky sitzt am Template-Part: WordPress umschließt den Kopf mit einem <header>, der nur so hoch
   ist wie die Navigation selbst – sticky auf .bh-nav hätte darin keinen Weg zum Mitlaufen. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }

/* Kurze Seiten (404): Footer sitzt am unteren Rand statt mitten im Bild. */
.wp-site-blocks { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
.bh-nav { position: relative; height: var(--nav-height); background: rgba(35,32,33,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--bh-white); border-bottom: 1px solid var(--border-on-dark); }
.bh-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 100%; }
.bh-nav__logo img { display: block; height: 40px; width: auto; }
.bh-nav__menu { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.bh-nav__menu a { position: relative; padding: var(--space-2) 0; color: var(--bh-white); text-decoration: none; font: var(--weight-semibold) var(--text-xs)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.bh-nav__menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--bh-red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.bh-nav__menu a:hover::after, .bh-nav__menu a[aria-current="page"]::after { transform: scaleX(1); }
.bh-nav__cta { display: flex; align-items: center; gap: var(--space-3); }
.bh-nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; color: var(--bh-white); cursor: pointer; }
.bh-nav__toggle .bh-icon--close, .bh-nav__toggle[aria-expanded="true"] .bh-icon--open { display: none; }
.bh-nav__toggle[aria-expanded="true"] .bh-icon--close { display: block; }

/* Unter 1024px: Burger-Menü, Telefon und Termin nur noch als Symbol (Beschriftung bleibt für Screenreader). */
@media (max-width: 1023px) {
	.bh-nav__toggle { display: inline-flex; }
	.bh-nav__cta .bh-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.bh-nav__cta .bh-btn { width: 44px; height: 44px; padding: 0; }
	/* absolute statt fixed: backdrop-filter macht .bh-nav zum Bezugsrahmen für fixed, das Panel hätte sonst Höhe 0. */
	.bh-nav__panel { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--nav-height)); height: calc(100dvh - var(--nav-height)); padding: var(--space-6) var(--container-pad); background: var(--bh-black); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity var(--dur-base), visibility var(--dur-base); }
	.bh-nav__panel.is-open { visibility: visible; opacity: 1; }
	.bh-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.bh-nav__menu a { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-on-dark); font: var(--weight-bold) var(--text-2xl)/1.1 var(--font-display); }
	.bh-nav__menu a::after { display: none; }
}

/* Hero */
.bh-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-dark); color: var(--text-on-dark); padding-block: clamp(72px, 12vw, 160px) clamp(96px, 12vw, 176px); }
.bh-hero__title { margin: 0; font: var(--weight-black) clamp(44px, 8vw, 112px)/0.92 var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.bh-hero__title span { display: block; }
.js .bh-hero__title span { animation: bh-clip-in var(--dur-reveal) var(--ease-out) both; }
.js .bh-hero__title span + span { animation-delay: 150ms; }
.bh-hero__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%); animation: bh-headlight var(--dur-sweep) var(--ease-in-out) 600ms both; }

/* Footer */
.bh-foot { background: var(--bh-black-900); color: var(--text-on-dark-muted); border-top: 3px solid var(--bh-red); padding: 72px 0 var(--space-6); font-size: var(--text-sm); }
.bh-foot a { color: inherit; text-decoration: none; }
.bh-foot a:hover { color: var(--bh-white); }
.bh-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-7); }
.bh-foot__logo { display: block; height: 44px; width: auto; margin-bottom: var(--space-5); }
.bh-foot h2 { margin: 0 0 var(--space-4); font: var(--weight-regular) var(--text-xs)/1 var(--font-accent); letter-spacing: var(--tracking-accent); text-transform: uppercase; color: var(--bh-white); }
.bh-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.bh-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-on-dark); }
.bh-foot__legal ul { display: flex; gap: var(--space-5); }
@media (max-width: 1023px) { .bh-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .bh-foot__grid { grid-template-columns: 1fr; gap: var(--space-6); } }