/* ============================================================================
   Becker Dach — brand styling applied to Kadence's header/footer builder
   markup.

   The header and footer are built in Kadence's Customizer so the client can
   rearrange them by drag-and-drop. Everything here re-creates the legacy look
   over that markup: the glass bar with its bottom mask fade, the condensed
   uppercase nav with a wiping underline, the light/dark logo swap over the
   hero, and the inset rounded footer card.

   Loaded after brand.css, which owns the design tokens.
   ========================================================================= */

/* ── Header shell ─────────────────────────────────────────────────────────
   Kadence renders #masthead in flow. The legacy bar floats over the hero, so
   it is fixed here and the transparent-header state supplies the overlay. */
#masthead.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	width: 100%;
	background: transparent;
	transition: background-color .3s ease, backdrop-filter .3s ease;
}

.admin-bar #masthead.site-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar #masthead.site-header { top: 46px; }
}

@media screen and (max-width: 600px) {
	#wpadminbar { position: fixed !important; }
	.admin-bar #masthead.site-header { top: 46px; }
}

/* Kadence paints the header wrap white by default; the glass panel replaces it. */
#masthead .site-header-wrap,
#masthead .site-header-row-container,
#masthead .site-main-header-wrap {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Frosted glass: inner pages always, the front page once past the hero.
   !important because Kadence emits an inline #masthead background rule that
   would otherwise flatten this to solid white.
   The bottom fade is applied to a ::after overlay rather than mask-image on
   the header itself — masking the element also faded the bottom of the logo
   and read as the mark being cut off. */
body:not(.transparent-header) #masthead.site-header,
body.transparent-header #masthead.site-header.bd-scrolled {
	background-color: rgba(255, 255, 255, .82) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

body:not(.transparent-header) #masthead.site-header::after,
body.transparent-header #masthead.site-header.bd-scrolled::after {
	content: "";
	position: absolute;
	inset: auto 0 -14px 0;
	height: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, transparent 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
	pointer-events: none;
}

/* The header is fixed, so it is out of flow and inner pages would start
   underneath it. The offset must equal header_main_height exactly, and needs
   !important because Kadence emits its own #inner-wrap padding rule.
   The front page is exempt: its hero is meant to run under the bar. */
:root {
	--bd-header-h: 112px;
}

@media (max-width: 1024px) { :root { --bd-header-h: 92px; } }
@media (max-width: 767px)  { :root { --bd-header-h: 76px; } }

body:not(.transparent-header) #wrapper #inner-wrap {
	padding-top: var(--bd-header-h) !important;
}

/* Over the hero: a soft scrim only, so the video reads cleanly.
   Scoped to the un-scrolled state — left unscoped it stayed stacked under the
   frosted panel after scrolling and made the glass read muddy and dark. */
body.transparent-header:not(.bd-scrolled) #masthead.site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 10rem;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 100%);
	pointer-events: none;
	z-index: -1;
}

/* Kadence's sticky row clones itself into a fixed wrapper on scroll and paints
   its own background, which killed the transparency on the first scroll and
   visibly re-laid out the menu. The header is positioned by this stylesheet
   instead, so that machinery is neutralised outright — deterministic
   regardless of which sticky options are set. */
#masthead .kadence-sticky-header,
#masthead .kadence-sticky-header.item-is-fixed,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
	position: static !important;
	top: auto !important;
	transform: none !important;
	background: transparent !important;
	box-shadow: none !important;
	animation: none !important;
	transition: none !important;
}

/* ── Header rows ──────────────────────────────────────────────────────────
   Three balanced zones so the logo sits optically centred no matter how many
   items each menu holds. */
#masthead .site-header-main-section-left,
#masthead .site-header-main-section-right {
	flex: 1 1 0;
	min-width: 0;
}

#masthead .site-header-main-section-left { justify-content: flex-start; }
#masthead .site-header-main-section-right { justify-content: flex-end; }
#masthead .site-header-main-section-center { flex: 0 0 auto; }

#masthead .site-header-inner-wrap {
	max-width: 96rem;
	margin-inline: auto;
	padding-inline: 2.5rem;
	gap: 1.5rem;
}

/* On mobile the desktop gutter pushed the burger 64px in, crowding it against
   the centred logo. The toggle belongs hard left. */
@media (max-width: 1024px) {
	#masthead .site-header-inner-wrap,
	#masthead .site-container {
		padding-inline: 1rem;
		gap: .5rem;
	}

	#masthead .site-header-main-section-left { justify-content: flex-start; }
	#masthead .site-header-main-section-left > * { margin-left: 0; }
}

/* The two logo files are not the same aspect (light 705x354, dark 1080x516),
   so a width-only rule rendered them 85px vs 81px tall and the mark appeared
   to resize between the front page and everything else. Fixing the box and
   letting the artwork fit inside it keeps them identical. */
.site-branding img.custom-logo {
	display: block;
	width: 170px;
	height: 85px;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 1024px) {
	.site-branding img.custom-logo { width: 150px; height: 75px; }
}

@media (max-width: 767px) {
	.site-branding img.custom-logo { width: 120px; height: 60px; }
}

/* Kadence prints only ONE logo — it picks the transparent variant server-side
   for transparent-header pages, so once the bar turns frosted the white mark
   is invisible against it. The artwork is pure white, so inverting it yields
   the black lockup exactly; no second request, no DOM surgery. */
body.transparent-header.bd-scrolled .site-branding img.kadence-transparent-logo {
	filter: invert(1);
}

/* Nav colour has to follow the same switch. */
body.transparent-header.bd-scrolled #masthead .header-navigation ul li a {
	color: var(--bd-ink);
	text-shadow: none;
}

/* ── Navigation ─────────────────────────────────────────────────────────
   Was a flat 1.6rem, set when the header held two links either side of a
   centred logo. Five links plus a toggle and a Kontakt button no longer fit:
   the nav overflowed its zone and ran back underneath the wordmark.

   clamp() keeps it emphatic on wide screens and lets it shrink before it
   collides, rather than giving up the size everywhere to fix a collision that
   only happens under ~1500px. */
#masthead .header-navigation ul li a {
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: clamp(1.05rem, 1.2vw, 1.6rem);
	line-height: 1.1;
	color: var(--bd-ink);
	position: relative;
	padding-bottom: 4px;
	text-decoration: none;
}

#masthead .header-navigation ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s ease;
}

#masthead .header-navigation ul li a:hover::after,
#masthead .header-navigation ul li a:focus-visible::after,
#masthead .header-navigation ul li.current-menu-item > a::after,
#masthead .header-navigation ul li.current_page_item > a::after { transform: scaleX(1); }

/* Kadence draws its own hover/active fills — suppressed, this design has none. */
#masthead .header-navigation ul li a:hover,
#masthead .header-navigation ul li.current-menu-item > a {
	background: transparent;
	color: inherit;
}

#masthead .header-navigation .menu > li { margin-inline: 1.4rem; }

/* Over the hero everything inverts to white. */
body.transparent-header:not(.bd-scrolled) #masthead .header-navigation ul li a {
	color: var(--bd-white);
	text-shadow: var(--bd-shadow-sm);
}

/* ── Mobile toggle ────────────────────────────────────────────────────────
   Kadence styles bare <button>, and `button:focus` (0,1,1) beats a single
   class, so every state is reset explicitly. */
#masthead .menu-toggle,
#masthead .menu-toggle:hover,
#masthead .menu-toggle:focus,
#masthead .menu-toggle:active,
#masthead .menu-toggle:focus-visible {
	background: transparent;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: var(--bd-ink);
}

#masthead .menu-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The burger is an inline SVG whose bars are painted by Kadence's own colour
   rule, so setting colour on the button alone did not reach them — it stayed
   white over the frosted bar after scrolling. Both states target the icon
   explicitly and force currentColor onto the SVG. */
body.transparent-header:not(.bd-scrolled) #masthead .menu-toggle,
body.transparent-header:not(.bd-scrolled) #masthead .menu-toggle .menu-toggle-icon,
body.transparent-header:not(.bd-scrolled) #masthead .menu-toggle svg,
body.transparent-header:not(.bd-scrolled) #masthead .drawer-toggle svg {
	color: var(--bd-white) !important;
	fill: currentColor;
	stroke: currentColor;
}

body.transparent-header.bd-scrolled #masthead .menu-toggle,
body.transparent-header.bd-scrolled #masthead .menu-toggle .menu-toggle-icon,
body.transparent-header.bd-scrolled #masthead .menu-toggle svg,
body.transparent-header.bd-scrolled #masthead .drawer-toggle svg,
body:not(.transparent-header) #masthead .menu-toggle svg,
body:not(.transparent-header) #masthead .drawer-toggle svg {
	color: var(--bd-ink) !important;
	fill: currentColor;
	stroke: currentColor;
}

/* ── Mobile drawer ────────────────────────────────────────────────────────
   Kadence ships a right-hand slide-in side panel. The legacy site dropped a
   full-width panel down from under the bar, so the drawer is re-anchored to
   the top and made full width. */
#mobile-drawer.popup-drawer {
	--bd-drawer-top: 76px;
}

.admin-bar #mobile-drawer.popup-drawer { --bd-drawer-top: 122px; }

#mobile-drawer.popup-drawer .drawer-inner {
	width: 100% !important;
	max-width: 100% !important;
	left: 0 !important;
	right: 0 !important;
	top: var(--bd-drawer-top) !important;
	bottom: auto !important;
	height: auto !important;
	max-height: calc(100dvh - var(--bd-drawer-top));
	transform: translateY(-10px);
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--bd-shadow-md);
	transition: transform .3s ease, opacity .3s ease;
	opacity: 0;
}

#mobile-drawer.popup-drawer.show-drawer .drawer-inner {
	transform: translateY(0);
	opacity: 1;
}

/* The stock close button belongs to the side-panel chrome; the burger toggles
   it, so it is redundant here. */
#mobile-drawer .drawer-header { justify-content: flex-end; padding: .5rem 1rem 0; }

#mobile-drawer .drawer-content { display: grid; place-items: center; }

/* Same three icons as the desktop rail, monochrome. */
#mobile-drawer .bd-drawer-social {
	display: flex;
	justify-content: center;
	gap: 2.25rem;
	list-style: none;
	margin: 1.75rem 0 1.25rem;
	padding: 0;
}

#mobile-drawer .bd-drawer-social li { margin: 0; border: 0; }

#mobile-drawer .bd-drawer-social a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--bd-ink);
	border: 0;
}

#mobile-drawer .bd-drawer-social svg { width: 1.5rem; height: 1.5rem; }

#mobile-drawer .site-header-item-mobile-html { width: 100%; }

#mobile-drawer .mobile-navigation ul {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
}

#mobile-drawer .mobile-navigation ul li { width: 100%; border: 0; }

#mobile-drawer .mobile-navigation ul li a {
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.6rem;
	color: var(--bd-ink);
	justify-content: center;
	text-align: center;
	padding: .55rem 1rem;
	border: 0;
}

/* ── Footer ───────────────────────────────────────────────────────────────
   The legacy footer is an inset rounded card. Kadence's rows are restyled
   rather than replaced so the widget areas stay drag-and-drop editable. */
.site-footer { background: transparent; margin-top: 5rem; }

.site-footer .site-middle-footer-wrap {
	max-width: 83.333%;
	margin-inline: auto;
	background: var(--bd-grad-panel);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-shadow-sm);
	padding: 2rem 2.5rem;
}

.site-footer .site-bottom-footer-wrap {
	max-width: 83.333%;
	margin-inline: auto;
	padding-top: 1.25rem;
}

.site-footer .footer-widget-area .widget-title,
.site-footer .footer-widget-area h2 {
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	text-transform: uppercase;
	font-size: 1.05rem;
	letter-spacing: .04em;
	margin: 0 0 1rem;
	color: var(--bd-ink);
}

.site-footer .footer-widget-area,
.site-footer .footer-widget-area p,
.site-footer .footer-widget-area li {
	font-size: .92rem;
	line-height: 1.65;
	color: var(--bd-muted);
}

/* Widget lists are plain link columns, not bulleted lists. */
.site-footer .footer-widget-area ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .footer-widget-area li { margin-bottom: .6rem; }

.site-footer .footer-widget-area a {
	color: var(--bd-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--bd-300);
}

.site-footer .footer-widget-area a:hover {
	color: var(--bd-ink);
	border-bottom-color: var(--bd-900);
}

/* The bottom row is a flex ROW, so the copyright and the legal links sat side
   by side — centred as a pair, neither centred itself. Stacking it puts the
   copyright above the links, both centred, which is the legacy order. */
.site-footer .site-footer-bottom-section-1 {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	/* Kadence puts an asymmetric inline padding on this section, which offset
	   the legal row 15px right of the copyright above it. */
	padding-inline: 0;
	margin-inline: 0;
}

.site-footer .site-footer-bottom-section-1 > * {
	width: 100%;
	max-width: 100%;
	justify-content: center;
	text-align: center;
}

/* Kadence applies a 30px left margin between footer widget areas. In a
   stacked single column that is not spacing between neighbours, it is a 30px
   shift — which pushed the legal row 15px off centre from the copyright. */
.site-footer .site-footer-bottom-section-1 .footer-widget-area {
	margin-left: 0;
	margin-right: 0;
}

.site-footer .site-info,
.site-footer .footer-html,
.site-footer .footer-navigation {
	width: 100%;
	max-width: 100%;
	text-align: center;
	justify-content: center;
}

.site-footer .footer-html {
	font-size: .85rem;
	color: var(--bd-muted);
	text-align: center;
}

/* Every level, not just the outer <ul> — a nested .menu kept its default
   padding-inline-start and pushed the row ~15px right of centre. */
.site-footer .footer-navigation ul,
.site-footer .footer-navigation .menu,
.site-footer .footer-navigation .footer-menu-container {
	display: flex;
	justify-content: center;
	gap: 3rem;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.site-footer .footer-navigation li { margin: 0; }

/* Kadence's link colour (its blue palette slot) was winning here, so the legal
   links rendered blue against a monochrome footer. Scoped to the footer and
   forced, including the visited state. */
.site-footer .footer-navigation a,
.site-footer .footer-navigation a:link,
.site-footer .footer-navigation a:visited {
	font-size: .85rem;
	color: var(--bd-muted) !important;
	text-decoration: none;
	border: 0;
}

/* Same wiping underline as the header nav, so the two read as one system. */
.site-footer .footer-navigation a {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
}

.site-footer .footer-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s ease;
}

.site-footer .footer-navigation a:hover,
.site-footer .footer-navigation a:focus-visible {
	color: var(--bd-ink) !important;
	text-decoration: none;
	background: transparent;
}

.site-footer .footer-navigation a:hover::after,
.site-footer .footer-navigation a:focus-visible::after { transform: scaleX(1); }

@media (max-width: 900px) {
	.site-footer .site-middle-footer-wrap,
	.site-footer .site-bottom-footer-wrap { max-width: 92%; }

	/* Was a column with Kadence's 48px gap: three short legal links took 188px
	   of vertical space at the very bottom of every page. A wrapping row costs
	   one or two lines instead.

	   The gap is set on `.site-footer .footer-navigation ul` at (0,3,0) because
	   Kadence's own rule for the same element is what put 48px there — a
	   shorter selector loses and the column simply becomes a very airy row. */
	/* `.menu`, not just `ul`: the desktop rule above targets
	   `.site-footer .footer-navigation .menu` at (0,3,0), and this element is a
	   <ul class="menu">. Matching it as `ul` gives (0,2,1), which loses — so the
	   direction changed to row but the 3rem gap stayed and the links still
	   wrapped onto three lines. */
	.site-footer .footer-navigation ul,
	.site-footer .footer-navigation .menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: .5rem 1.5rem;
		text-align: center;
	}

	.site-footer .footer-navigation .menu li { margin: 0; }
	.site-footer .footer-navigation .menu li a { padding-block: .15rem; }

	/* The copyright sat a long way above the links for the same reason. */
	.site-footer .site-bottom-footer-inner-wrap { gap: .75rem; }
}

/* ── Dark theme over Kadence ───────────────────────────────────────────────
   Kadence derives its colours from --global-palette1..9, which it writes as
   inline CSS on :root from a stored option. There is no runtime palette
   switching in the theme, so the dark values are supplied here instead.

   Slot meanings, matching the light palette set in configure-kadence.php:
   1 accent, 2 accent-hover, 3-6 the text ramp, 7-8 surfaces, 9 the "reverse"
   colour Kadence puts text in when it sits on an accent fill. In dark mode
   the ramp has to run the other way: 3 becomes near-white, 9 becomes near
   black, or every button comes out white-on-white. */
:root[data-theme="dark"],
:root[data-theme="dark"] body {
	--global-palette1: #f5f5f5;
	--global-palette2: #d4d4d4;
	--global-palette3: #f5f5f5;
	--global-palette4: #e5e5e5;
	--global-palette5: #a3a3a3;
	--global-palette6: #737373;
	--global-palette7: #1f1f1f;
	--global-palette8: #171717;
	--global-palette9: #0d0d0d;
	--global-palette9rgb: 13, 13, 13;
	--global-palette-btn: #0d0d0d;
	--global-palette-btn-bg: #f5f5f5;
	--global-palette-btn-hover: #0d0d0d;
	--global-palette-btn-bg-hover: #d4d4d4;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]),
	:root:not([data-theme="light"]) body {
		--global-palette1: #f5f5f5;
		--global-palette2: #d4d4d4;
		--global-palette3: #f5f5f5;
		--global-palette4: #e5e5e5;
		--global-palette5: #a3a3a3;
		--global-palette6: #737373;
		--global-palette7: #1f1f1f;
		--global-palette8: #171717;
		--global-palette9: #0d0d0d;
		--global-palette9rgb: 13, 13, 13;
		--global-palette-btn: #0d0d0d;
		--global-palette-btn-bg: #f5f5f5;
		--global-palette-btn-hover: #0d0d0d;
		--global-palette-btn-bg-hover: #d4d4d4;
	}
}

/* Kadence paints several wrappers with an explicit palette colour rather than
   inheriting, so they need pointing at the themed surface directly.

   `.site-container` is deliberately NOT in this list. Kadence reuses that class
   inside the header row as well as around the content, so painting it gave the
   transparent header an opaque box exactly the width of the content container —
   and the white over-hero nav text then sat on white. Anything added here must
   be a content-only wrapper. */
.site,
.content-area,
.site-main,
#wrapper { background-color: var(--bd-bg); }

/* The header's structural wrappers never paint a background, so transparency
   over the hero survives whatever Kadence or a future content rule sets.

   Named individually rather than `#masthead *`: that would be (1,0,0) and
   would flatten the theme toggle and the Kontakt button too, which are inside
   the header and DO have backgrounds. */
#masthead .site-container,
#masthead .site-header-row-container-inner,
#masthead .site-header-inner-wrap,
#masthead .site-header-upper-wrap,
#masthead .site-header-upper-inner-wrap,
#masthead .site-main-header-wrap,
#masthead .site-main-header-inner-wrap,
#masthead .site-header-row { background-color: transparent; }

/* ── Header: frosted glass, dark ───────────────────────────────────────────
   The selectors mirror the light rule above exactly, with the theme guard
   prepended. That is deliberate: the light rule is
   `body:not(.transparent-header) #masthead.site-header` at specificity
   (1,2,1), and a shorter dark selector — even with !important — loses to it,
   because !important only decides between important declarations and
   specificity still breaks the tie. Both are important, so the longer
   selector wins.

   rgba() cannot be derived from a hex custom property, hence literal values
   rather than a composited token. */
:root[data-theme="dark"] body:not(.transparent-header) #masthead.site-header,
:root[data-theme="dark"] body.transparent-header #masthead.site-header.bd-scrolled {
	background-color: rgba(10, 10, 10, .82) !important;
}

:root[data-theme="dark"] body:not(.transparent-header) #masthead.site-header::after,
:root[data-theme="dark"] body.transparent-header #masthead.site-header.bd-scrolled::after {
	background: linear-gradient(180deg, rgba(10, 10, 10, .82) 0%, transparent 100%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body:not(.transparent-header) #masthead.site-header,
	:root:not([data-theme="light"]) body.transparent-header #masthead.site-header.bd-scrolled {
		background-color: rgba(10, 10, 10, .82) !important;
	}

	:root:not([data-theme="light"]) body:not(.transparent-header) #masthead.site-header::after,
	:root:not([data-theme="light"]) body.transparent-header #masthead.site-header.bd-scrolled::after {
		background: linear-gradient(180deg, rgba(10, 10, 10, .82) 0%, transparent 100%);
	}
}

/* ── Theme toggle ──────────────────────────────────────────────────────── */
.bd-theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--bd-line);
	border-radius: .6rem;
	background: var(--bd-surface-2);
	color: var(--bd-ink);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.bd-theme-toggle:hover { background: var(--bd-line); }
.bd-theme-toggle svg { display: block; width: 1.05rem; height: 1.05rem; }

/* Only one of the two glyphs is ever shown: the icon advertises what pressing
   it will DO, so light mode shows the moon. */
.bd-theme-toggle .bd-icon-sun { display: none; }
:root[data-theme="dark"] .bd-theme-toggle .bd-icon-sun { display: block; }
:root[data-theme="dark"] .bd-theme-toggle .bd-icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .bd-theme-toggle .bd-icon-sun { display: block; }
	:root:not([data-theme="light"]) .bd-theme-toggle .bd-icon-moon { display: none; }
}

/* In the mobile drawer it becomes a labelled row, as in the reference. */
.bd-theme-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.25rem;
	margin-top: 1.25rem;
	border-top: 1px solid var(--bd-line);
}

.bd-theme-row__label { font-size: .95rem; color: var(--bd-muted); }

/* ── Header layout: logo left, everything else right ───────────────────────
   Kadence gives each zone its own flex row; this only sets the rhythm between
   the nav, the toggle and the button so they read as one group. */
.site-header-main-section-right {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.site-header-item.site-header-focus-item { margin: 0; }

/* The wordmark is a black PNG. Rather than ship a second asset and a second
   Customizer setting, dark mode inverts it — the mark is monochrome, so an
   invert is exact rather than approximate.

   Scoped away from .kadence-transparent-logo: over the hero video Kadence
   already swaps in the white logo, and inverting that would put a black
   wordmark back on the footage. */
:root[data-theme="dark"] .custom-logo:not(.kadence-transparent-logo) {
	filter: invert(1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .custom-logo:not(.kadence-transparent-logo) {
		filter: invert(1);
	}
}

/* ── Header Kontakt button ─────────────────────────────────────────────── */
.site-header-item .header-button,
.mobile-header-button-wrap .mobile-header-button {
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
	border-radius: var(--bd-radius-btn);
	background: var(--bd-grad-ink);
	color: var(--bd-on-ink);
	border: 0;
	padding: .7rem 1.6rem;
	transition: transform .2s ease, box-shadow .2s ease;
}

.site-header-item .header-button:hover,
.mobile-header-button-wrap .mobile-header-button:hover {
	color: var(--bd-on-ink);
	transform: translateY(-1px);
	box-shadow: var(--bd-shadow-md);
}

/* Over the hero the bar is transparent, so the button inverts to stay legible
   against footage rather than against the (invisible) header background. */
.transparent-header:not(.bd-scrolled) .site-header-item .header-button {
	background: var(--bd-white);
	color: var(--bd-900);
}

.transparent-header:not(.bd-scrolled) .bd-theme-toggle {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}

/* ── Mobile drawer ─────────────────────────────────────────────────────── */
.mobile-header-button-wrap { margin-top: 1.25rem; }
.mobile-header-button-wrap .mobile-header-button { display: block; text-align: center; }

/* The drawer paints its own near-black; in light mode it should be a surface
   so the two themes are not the same drawer. */
:root:not([data-theme="dark"]) #mobile-drawer .drawer-inner {
	background: var(--bd-surface) !important;
}

/* :not(.mobile-header-button) matters: without it this rule (1,3,1) beats the
   button's own colour (1,2,0) and the Kontakt label takes the drawer's text
   colour — which is the same colour as the button fill, in both themes. */
:root:not([data-theme="dark"]) #mobile-drawer .drawer-inner,
:root:not([data-theme="dark"]) #mobile-drawer .drawer-inner a:not(.mobile-header-button) { color: var(--bd-ink); }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #mobile-drawer .drawer-inner {
		background: rgba(9, 12, 16, .97) !important;
	}
	:root:not([data-theme="light"]) #mobile-drawer .drawer-inner,
	:root:not([data-theme="light"]) #mobile-drawer .drawer-inner a:not(.mobile-header-button) { color: #f5f5f5; }
}

/* ── Primary navigation sizing ─────────────────────────────────────────────
   The menu was set to 1.6rem back when the header held two links either side
   of a centred logo and had room to spare. With five links plus a toggle and
   a Kontakt button it overflowed and "Karriere" wrapped onto a second row,
   which pushed the header to double height.

   clamp() keeps it large on wide screens and lets it shrink before it wraps —
   the alternative, a fixed smaller size, would give up the emphasis on every
   screen to fix a problem that only exists on narrow desktops. */
.main-navigation .primary-menu-container > ul > li > a {
	padding-inline: .7rem;
	white-space: nowrap;
}

.main-navigation .primary-menu-container > ul {
	flex-wrap: nowrap;
}

/* Below this the drawer takes over anyway, so the desktop nav never has to
   survive a width where clamp() alone is not enough. */
@media (max-width: 1100px) {
	.site-header-main-section-right { gap: 1rem; }
}

/* The header row is a CSS grid whose right zone already spans to the edge —
   the problem was that its CONTENTS were packed to the start, so the nav began
   0px after the wordmark ended. Aligning the contents to the end is the fix;
   touching the zones themselves does nothing, because they were never the
   thing that was mis-sized. */
.site-header-main-section-right {
	justify-content: flex-end;
}

/* Between the drawer breakpoint and ~1300px the bar is tight: five links, the
   toggle and the button in a zone that is only as wide as the viewport minus
   the wordmark. Tightening the internal spacing here buys ~60px, which is
   enough, and it only applies in the band where it is needed. */
@media (max-width: 1300px) {
	.site-header-main-section-right { gap: 1rem; }
	.main-navigation .primary-menu-container > ul > li > a { padding-inline: .35rem; }
	.site-header-item .header-button { padding: .6rem 1.1rem; }
}

/* The scrolled transparent header inverts the white logo back to black, which
   is right on a white bar and wrong on a dark one. Undo it in dark mode —
   `none` rather than a second invert, so the two rules cannot compound. */
:root[data-theme="dark"] body.transparent-header.bd-scrolled .site-branding img.kadence-transparent-logo {
	filter: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body.transparent-header.bd-scrolled .site-branding img.kadence-transparent-logo {
		filter: none;
	}
}

/* Same switch for the nav labels. */
:root[data-theme="dark"] body.transparent-header.bd-scrolled #masthead .header-navigation ul li a {
	color: var(--bd-ink);
}

/* ── Mobile drawer contents ────────────────────────────────────────────────
   Left-aligned links, as in the reference — Kadence centres them by default,
   which reads as a splash screen rather than a menu. */
#mobile-drawer .drawer-inner .mobile-navigation ul li a {
	justify-content: flex-start;
	text-align: left;
	padding-block: .55rem;
	font-size: 1.35rem;
}

#mobile-drawer .drawer-inner .mobile-navigation ul li { border: 0; }

#mobile-drawer .drawer-content { padding-inline: 1.75rem; }

/* The Kontakt button was label-invisible in both themes: Kadence styles
   `.mobile-header-button` from its own palette, which outranked the shared
   rule, so the fill and the text ended up the same colour. Pinned explicitly,
   and to the drawer's own scheme rather than the page's — the drawer is dark
   in dark mode and light in light mode, same as its background. */
#mobile-drawer .mobile-header-button-wrap .mobile-header-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--bd-grad-ink);
	color: var(--bd-on-ink);
	border: 0;
	border-radius: var(--bd-radius-btn);
	padding: .85rem 1.5rem;
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
}

#mobile-drawer .mobile-header-button-wrap .mobile-header-button:hover,
#mobile-drawer .mobile-header-button-wrap .mobile-header-button:focus-visible {
	color: var(--bd-on-ink);
	opacity: .9;
}

/* Drawer close button follows the theme rather than Kadence's palette. */
#mobile-drawer .drawer-toggle { color: var(--bd-ink); }

/* ── Mobile header logo over the hero ──────────────────────────────────────
   The hero already shows the wordmark, large and centred. Repeating it in the
   bar directly above is the same mark twice in one screen, so on phones it is
   dropped until the visitor scrolls past the hero — at which point the bar
   becomes the only place the brand appears and it comes back.

   Front page only: every other template has no hero to be redundant with. */
@media (max-width: 1199px) {
	body.home.transparent-header:not(.bd-scrolled) .mobile-site-branding {
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
	}

	body.home .mobile-site-branding {
		transition: opacity .25s ease, visibility .25s ease;
	}
}

/* ── Theme toggle, stronger ────────────────────────────────────────────────
   The glyph was 17px of 1.7-weight stroke inside a 36px box — legible by the
   numbers (13:1) but visually faint, which is not the same thing. Bigger box,
   larger and heavier glyph, and a border that actually reads. */
.bd-theme-toggle {
	width: 2.6rem;
	height: 2.6rem;
	border-color: var(--bd-line-strong);
}

.bd-theme-toggle svg {
	width: 1.3rem;
	height: 1.3rem;
	stroke-width: 2;
}

.bd-theme-toggle:hover {
	background: var(--bd-ink);
	color: var(--bd-bg);
	border-color: var(--bd-ink);
}

.bd-theme-toggle:focus-visible {
	outline: 2px solid var(--bd-ink);
	outline-offset: 2px;
}

/* In the drawer it sits on the drawer's own surface, not the page's. */
#mobile-drawer .bd-theme-toggle {
	background: transparent;
	border-color: var(--bd-line-strong);
}

#mobile-drawer .bd-theme-toggle:hover {
	background: var(--bd-ink);
	color: var(--bd-bg);
}

.bd-theme-row__label {
	font-size: 1rem;
	color: var(--bd-ink);
}

/* ── Drawer close button sits where the burger was ─────────────────────────
   Kadence puts the close control in the drawer's own flow, which lands it
   about 60px below the burger — so opening the menu appears to add a second
   control rather than swap the one you just pressed.

   Toggling the burger itself into an X is not an option: the drawer is
   z-index 99999 and the header is 100, so the burger is underneath the
   overlay and cannot be clicked. Instead the close button is lifted out of
   flow and positioned over the header band.

   `top: 0` with `height` equal to the header row means the glyph centres on
   exactly the same line as the burger, without hardcoding a top offset that
   would drift the moment the header height changes. */
/* The drawer panel deliberately starts BELOW the header, at --bd-drawer-top,
   so the logo stays visible while the menu is open. That is also why Kadence's
   close button landed ~76px under the burger: it sits in the panel, and the
   panel starts where the header ends.

   `.drawer-inner` is a fixed-position element with a transform (our own
   slide-down animation), so it is the containing block here — which makes the
   fix exact rather than guessy: lifting the button by --bd-drawer-top puts its
   box over the header band, and giving it that same height centres the glyph
   on precisely the line the burger sat on.

   Do NOT "fix" this by clearing the transform. It drives the open animation. */
/* With the X sitting exactly where the burger is, the burger has to go, or the
   two glyphs overlap and the lines show through the cross.
   `aria-expanded` rather than the body class: Kadence names that class after
   the drawer's side (`showing-popup-drawer-from-left`), so keying off it would
   silently stop working the day the drawer is moved back to the right. The
   attribute is on the button itself and describes the state, not the geometry. */
#masthead .menu-toggle-open[aria-expanded="true"] {
	opacity: 0;
	visibility: hidden;
}

/* Both the backdrop and the panel are z-index:auto siblings, so the button —
   which now sits outside the panel's box, over the header band — was landing
   under the backdrop and could not be clicked. Visible but dead is worse than
   mispositioned, so the two get explicit layers. */
#mobile-drawer .drawer-overlay { z-index: 1; }
#mobile-drawer .drawer-inner { z-index: 2; overflow: visible; }

#mobile-drawer .drawer-toggle {
	position: absolute;
	top: calc(-1 * var(--bd-drawer-top));
	right: 1.75rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: var(--bd-drawer-top);
	/* border-box, because Kadence's own padding on this button survives the
	   `padding: 0` below and would otherwise be added OUTSIDE the height —
	   making the box 105px instead of 76 and dropping the glyph 14px below the
	   burger's line. */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}