/* ============================================================================
   Becker Dach — brand layer over Kadence.

   Monochrome, matching the company van: white upper body, black lower panel,
   black wordmark, split on a diagonal. The previous site's gold #b29146 is
   retired (it also failed WCAG AA on white at 3.4:1; black gives 21:1).

   With no accent hue, hierarchy comes from four things instead: the condensed
   display face, weight and scale, solid ink fills, and a grey ramp with
   gradients for depth. Those are tokenised below so the whole system can be
   retuned from one place.

   The original site shipped 252 KB of CSS, but ~90% was unpurged Bootstrap
   that nothing used. Its real design system was about 30 rules. This is that
   system, rebuilt.
   ========================================================================= */

:root {
	/* ── Ink ramp ──────────────────────────────────────────────────────────
	   Contrast on white: 900 = 19.6:1, 700 = 12.6:1, 600 = 7.4:1,
	   500 = 4.6:1 (AA body text floor). Anything 400 and lighter is for
	   borders, fills and large type only — never body copy. */
	--bd-900: #0d0d0d;
	--bd-800: #1c1c1c;
	--bd-700: #2e2e2e;
	--bd-600: #4a4a4a;
	--bd-500: #6b6b6b;
	--bd-400: #9a9a9a;
	--bd-300: #c4c4c4;
	--bd-200: #e4e4e4;
	--bd-100: #f2f2f2;

	--bd-black: #000;   /* brand marks and full-bleed panels */
	--bd-white: #fff;

	/* ── Semantic layer ────────────────────────────────────────────────────
	   Rules consume THESE, never the ramp directly. A ramp cannot invert:
	   #0d0d0d is the darkest ink in light mode and the page background in
	   dark mode, so anything written as `var(--bd-900)` is stuck in one
	   theme. Everything below is redefined wholesale further down for dark.

	   --bd-surface is the colour of a card. Note that in dark mode it is
	   LIGHTER than --bd-bg, not darker: raised things catch more light. That
	   is what the reference does and it is why a naive inversion looks wrong. */
	--bd-bg: var(--bd-white);          /* page */
	--bd-surface: var(--bd-white);     /* cards, panels, the header bar */
	--bd-surface-2: var(--bd-100);     /* subtle bands, inputs, hover fills */
	--bd-ink: var(--bd-900);           /* body text */
	--bd-ink-strong: var(--bd-black);  /* display type, brand marks */
	--bd-muted: var(--bd-500);         /* secondary text — AA floor on --bd-bg */
	--bd-line: var(--bd-200);          /* hairlines and card borders */
	--bd-line-strong: var(--bd-300);   /* inputs and underlined links */
	--bd-badge-bg: var(--bd-100);      /* icon badge fill */
	--bd-badge-ink: var(--bd-900);     /* icon badge glyph */

	/* Text ON a --bd-grad-ink fill. Not the same as --bd-white: the ink
	   gradient inverts to near-white in dark mode, so a button labelled
	   `color: white` would come out white-on-white. This is the one token
	   that must always be the OPPOSITE of --bd-ink. */
	--bd-on-ink: var(--bd-white);

	/* The full-bleed black band (closing CTA). It stays dark in both themes —
	   it is a deliberate black panel, not a surface — but in dark mode it
	   lifts off the page instead of disappearing into it. */
	--bd-band: linear-gradient(135deg, #000 0%, #2e2e2e 100%);
	--bd-band-ink: var(--bd-white);

	/* ── Gradients ─────────────────────────────────────────────────────────
	   Substitutes for the accent colour: they carry emphasis and depth. */
	--bd-grad-ink: linear-gradient(135deg, #000 0%, #2e2e2e 100%);
	--bd-grad-panel: linear-gradient(180deg, var(--bd-bg) 0%, var(--bd-surface-2) 100%);
	/* The van's diagonal white-to-black split, used as a section divider. */
	--bd-grad-split: linear-gradient(105deg, #fff 0% 48%, var(--bd-900) 52% 100%);
	/* Legibility scrim over the hero video. Fixed, not themed — it sits on
	   footage, which is the same in both themes. */
	--bd-grad-scrim: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.6) 100%);

	--bd-shadow-sm: 0 1px 3px rgba(0, 0, 0, .12);
	--bd-shadow-md: 0 6px 20px rgba(0, 0, 0, .16);
	--bd-shadow-lg: 0 14px 40px rgba(0, 0, 0, .22);

	--bd-radius: 1rem;
	--bd-radius-card: 1.25rem;   /* the reference's card corner */
	--bd-radius-btn: .75rem;     /* …and its buttons, which are not pills */

	/* ── Dark palette ──────────────────────────────────────────────────────
	   Declared here, applied below. Defining the values once means a change
	   to the dark theme is one edit, not two — the mapping has to appear
	   twice (attribute selector + media query) but the colours do not. */
	--bd-d-bg: #0a0a0a;
	--bd-d-surface: #171717;
	--bd-d-surface-2: #1f1f1f;
	--bd-d-ink: #f5f5f5;
	--bd-d-muted: #a3a3a3;       /* 7.2:1 on --bd-d-bg */
	--bd-d-line: #2e2e2e;
}

/* ── Dark theme ────────────────────────────────────────────────────────────
   Two selectors, same body. `[data-theme]` is set by the toggle and always
   wins; the media query only applies when the visitor has expressed no
   preference, which is why it is guarded by :not([data-theme="light"]). */
:root[data-theme="dark"] {
	--bd-bg: var(--bd-d-bg);
	--bd-surface: var(--bd-d-surface);
	--bd-surface-2: var(--bd-d-surface-2);
	--bd-ink: var(--bd-d-ink);
	--bd-ink-strong: var(--bd-white);
	--bd-muted: var(--bd-d-muted);
	--bd-line: var(--bd-d-line);
	--bd-line-strong: #3a3a3a;
	--bd-on-ink: var(--bd-900);
	--bd-band: linear-gradient(135deg, #171717 0%, #242424 100%);
	--bd-display-shadow: .035em .035em 0 rgba(255, 255, 255, .13);
	--bd-display-shadow-dark: .035em .035em 0 rgba(255, 255, 255, .13);
	--bd-badge-bg: #ededed;
	--bd-badge-ink: var(--bd-900);
	--bd-grad-ink: linear-gradient(135deg, #f5f5f5 0%, #d4d4d4 100%);
	--bd-grad-split: linear-gradient(105deg, #f5f5f5 0% 48%, var(--bd-d-bg) 52% 100%);
	--bd-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
	--bd-shadow-md: 0 6px 20px rgba(0, 0, 0, .55);
	--bd-shadow-lg: 0 14px 40px rgba(0, 0, 0, .6);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bd-bg: var(--bd-d-bg);
		--bd-surface: var(--bd-d-surface);
		--bd-surface-2: var(--bd-d-surface-2);
		--bd-ink: var(--bd-d-ink);
		--bd-ink-strong: var(--bd-white);
		--bd-muted: var(--bd-d-muted);
		--bd-line: var(--bd-d-line);
		--bd-line-strong: #3a3a3a;
		--bd-on-ink: var(--bd-900);
		--bd-band: linear-gradient(135deg, #171717 0%, #242424 100%);
		--bd-display-shadow: .035em .035em 0 rgba(255, 255, 255, .13);
		--bd-display-shadow-dark: .035em .035em 0 rgba(255, 255, 255, .13);
		--bd-badge-bg: #ededed;
		--bd-badge-ink: var(--bd-900);
		--bd-grad-ink: linear-gradient(135deg, #f5f5f5 0%, #d4d4d4 100%);
		--bd-grad-split: linear-gradient(105deg, #f5f5f5 0% 48%, var(--bd-d-bg) 52% 100%);
		--bd-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
		--bd-shadow-md: 0 6px 20px rgba(0, 0, 0, .55);
		--bd-shadow-lg: 0 14px 40px rgba(0, 0, 0, .6);
		color-scheme: dark;
	}
}

/* The page itself, plus Kadence's own wrappers, which paint their own white. */
html { background: var(--bd-bg); }

body,
.site,
.content-bg,
.entry-content-wrap { background: var(--bd-bg); }

/* ── Display face ─────────────────────────────────────────────────────────
   The original loaded a 33 KB OTF with no format() hint, no font-display and
   no fallback family, so text was invisible while it loaded. */
@font-face {
	font-family: "American Captain";
	src: url("../fonts/AmericanCaptain.woff2") format("woff2"),
	     url("../fonts/AmericanCaptain.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.bd-display,
h1, h2,
.bd-card__title,
.bd-tab,
.main-navigation .primary-menu-container > ul > li > a {
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	letter-spacing: .015em;
	text-transform: uppercase;
}

body { color: var(--bd-ink); }

/* ── Headings ─────────────────────────────────────────────────────────────
   The original wrote `h1,h2{text-decoration:#b29146}` — a colour with no
   text-decoration-line, which only rendered where a Tailwind `underline`
   utility happened to supply the line. Replaced with a drawn rule that does
   not depend on another class being present. */
.bd-underline,
.bd-page-title {
	position: relative;
	display: inline-block;
	padding-bottom: .28em;
}

/* Page and service titles are centred, as on the original. The rule under them
   is drawn by ::after and hugs the text, so the heading stays inline-block and
   the wrapper does the centring. */
.bd-page-title {
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 1;
}

/* text-align must sit on the PARENT: .bd-page-title is an inline-block (so its
   ::after rule hugs the text), and text-align on the element itself only
   centres content inside a box that is still shrink-to-fit and left-placed. */
.bd-leistung__header,
.bd-archive-header,
.bd-prose,
.bd-section { text-align: center; }

/* …but body copy stays left-aligned, as on the original. */
.bd-prose p,
.bd-prose h2,
.bd-prose h3,
.bd-prose ul,
.bd-section .bd-lead { text-align: left; }

/* An explicit .bd-center wins over that default. Without this, a lead
   paragraph marked centred stayed left because the rule above is more
   specific than .bd-center on its own. */
.bd-section .bd-lead.bd-center { text-align: center; margin-inline: auto; }

.bd-leistung__header { margin-bottom: 2rem; }
.bd-leistung__pre { margin-bottom: .35rem; color: var(--bd-muted); }
.bd-leistung__sub { margin-top: .6rem; color: var(--bd-muted); font-size: 1.15rem; }
.bd-leistung__body { max-width: 68ch; margin: 0 auto 1rem; line-height: 1.7; }
.bd-back { margin-top: 3rem; text-align: center; }
.bd-back a { color: var(--bd-muted); }

.bd-archive-header { margin-bottom: 2.5rem; }

/* "Was wir meistern" is a card on the original, with the full service index
   inside it — not a loose heading above a list. */
.bd-index {
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-shadow-sm);
	padding: 2rem 2.5rem;
	margin-bottom: 3.5rem;
	text-align: center;
}

.bd-index > h2 { margin: 0 0 1.5rem; font-size: 1.4rem; }

.bd-underline::after,
.bd-page-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: .09em;
	min-height: 3px;
	background: var(--bd-grad-ink);
}

/* On any dark panel the rule has to invert too. `.bd-page-title::after` was
   missing from this list, so the drawn underline stayed a near-black gradient
   on the dark service band — present, but invisible. Same set of surfaces as
   the inverted display shadow; if you add one, add the other. */
.bd-hero .bd-page-title::after,
.bd-on-dark .bd-underline::after,
.bd-on-dark .bd-page-title::after,
.bd-servicehero .bd-underline::after,
.bd-servicehero .bd-page-title::after,
.bd-ctaband .bd-underline::after,
.bd-ctaband .bd-page-title::after {
	background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .55) 100%);
}

.bd-muted { color: var(--bd-muted); }

/* ── Full-bleed ───────────────────────────────────────────────────────────
   Kadence renders page content inside a max-width container. The hero and the
   split divider have to escape it. 100vw would include the scrollbar and cause
   horizontal overflow, so the width is derived from the viewport instead. */
/* `margin-inline: calc(50% - 50vw)` breaks out of ANY centred or padded
   ancestor without needing left/right offsets, which is what the previous
   left:50% + -50vw version relied on. Once the hero moved into the page's
   block content that assumption stopped holding and the video came up short
   on the right. */
/* Breakout via transform rather than negative margins.
   `margin-inline: calc(50% - 50vw)` and the older left:50%/-50vw both depend on
   the ancestor being a plain centred block; inside Kadence's content container
   neither expanded the element and the hero stopped 240px short of the
   viewport. Translating a 100vw-wide box is independent of the layout context
   it sits in. */
.bd-split {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}

/* ── Diagonal split divider (the van motif) ───────────────────────────── */
.bd-split {
	height: 4.5rem;
	background: var(--bd-grad-split);
	margin-block: 4rem;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.bd-section { padding-block: 3.5rem; }
.bd-center { text-align: center; }

.bd-lead {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.65;
	max-width: 60ch;
}

/* margin-inline:auto centres the measure column itself — without it the legal
   pages sat hard left inside the wide container. */
.bd-prose { max-width: 72ch; margin-inline: auto; }
.bd-prose h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.bd-prose h3 { margin-top: 1.75rem; font-size: 1.15rem; font-weight: 700; }
.bd-prose p { line-height: 1.7; }
.bd-signature { margin-top: 2.5rem; font-weight: 700; text-align: left; }

/* Über uns / Kontakt use core columns blocks so widths stay editable; these
   just set the proportions, alignment and gap. */
.bd-about.wp-block-columns,
.bd-contact.wp-block-columns {
	gap: 3.5rem;
	align-items: flex-start;
	text-align: left;
	margin-top: 2.5rem;
}

.bd-about.wp-block-columns > .wp-block-column:first-child { flex-basis: 60%; }
.bd-about.wp-block-columns > .wp-block-column:last-child { flex-basis: 40%; }

.bd-about .wp-block-column > *:first-child { margin-top: 0; }
.bd-about p { line-height: 1.7; }

@media (max-width: 900px) {
	.bd-about.wp-block-columns,
	.bd-contact.wp-block-columns { gap: 2.5rem; }
}

/* Portrait with the caption overlaid bottom-right, as on the original.
   Now a core image block, so the selector must also beat .wp-block-image. */
.bd-portrait,
figure.wp-block-image.bd-portrait {
	position: sticky;
	top: 8rem;
	width: 100%;
	max-width: 500px;
	margin: 0;
	border-radius: var(--bd-radius);
	overflow: hidden;
	box-shadow: var(--bd-shadow-md);
}

.bd-portrait img { display: block; width: 100%; height: auto; }

.bd-portrait figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2.5rem 1rem .9rem;
	text-align: right;
	font-size: .85rem;
	line-height: 1.4;
	color: var(--bd-white);
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 60%);
}

/* Kadence prints its own page title band above the content. The hero and the
   in-content h1 already provide it, so the duplicate is suppressed. */
.home .entry-hero-container-inner,
.home .entry-hero,
.page .entry-hero-container-inner,
.page .entry-hero { display: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────
   100vh broke on mobile browsers with collapsing toolbars; dvh fixes it. */
/* Breakout lives HERE, not in a separate rule further up: .bd-hero was
   declared twice and this later block's `width: 100%` silently won on source
   order, so max-width applied but the width never did and the video stopped
   short of the viewport edge. */
/* The group block ALWAYS wraps its children in `.wp-block-group__inner-container`,
   even with flow layout. So `.bd-hero`'s children are not the media and the
   overlay — they are that wrapper. Two consequences, both of which broke the
   first attempt: flex centring applied to a single wrapper does nothing useful,
   and anything that made the wrapper `position: relative` became the containing
   block for the absolutely-positioned video, shrinking it to the text box.

   Hence grid + `align-items: center` on the hero (which centres the wrapper
   vertically while letting it stretch horizontally), and the wrapper left
   static so `.bd-hero__media` still anchors to `.bd-hero`. */
.bd-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	align-items: center;
	overflow: hidden;
	background: var(--bd-black);
}

.bd-hero > .wp-block-group__inner-container { position: static; }

.bd-hero__media { position: absolute; inset: 0; z-index: 0; }

.bd-hero__media img,
.bd-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The hero now carries the H1 and the primary calls to action, so it needs a
   real scrim and not just the strip behind the nav bar. Two stops: heavy at
   the top for the nav, heavy again at the bottom under the buttons, and close
   to clear across the middle so the roof footage still reads as footage. */
.bd-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bd-grad-scrim);
}

/* Lifted above the video. The wrapper between it and .bd-hero is static, so
   both sit in the same stacking context and z-index 2 beats the media's 0. */
.bd-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 60rem;
	margin-inline: auto;
	text-align: center;
	padding: 2rem;
	color: var(--bd-white);
	/* The original put this text-shadow on <body>, so every element on every
	   page carried it. Scoped to the only place it is needed. */
	text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 12px 40px rgba(0, 0, 0, .4);
}

.bd-hero__inner :where(h1, h2, p) { color: var(--bd-white); }

/* Small-caps kicker above the headline: says what the business *is* before the
   headline says what it believes. */
.bd-hero__eyebrow {
	margin: 0 0 1rem;
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: clamp(.75rem, 1.6vw, .95rem);
	opacity: .9;
}

.bd-hero__title,
.bd-hero__inner h1 {
	font-size: clamp(2.25rem, 7vw, 6rem);
	line-height: .95;
	margin: 0;
}

.bd-hero__sub {
	margin: 1.25rem auto 0;
	max-width: 46ch;
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	line-height: 1.55;
}

/* wp:buttons renders .wp-block-buttons; the hero styles it as a centred row
   that wraps to a stack on narrow screens rather than squeezing. */
.bd-hero__inner .wp-block-buttons {
	justify-content: center;
	margin-top: 2rem;
	gap: .9rem;
	text-shadow: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   `.bd-btn` is the hand-written form used inside paragraphs; the core Button
   block is folded into the same rule so that a button the client inserts from
   the block inserter comes out looking like the ones already on the site,
   instead of Kadence's default. One look, two ways of authoring it. */
/* Specificity note, because this is where the blue buttons came from: Kadence
   styles the outline variant with
   `.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color)`
   — 0,4,0 — and paints it with its own palette. Anything shorter than that
   loses silently. Every rule below therefore matches at 0,4,1 or higher, and
   the child combinator is deliberate, not decorative. */
.bd-btn,
.wp-block-button > .wp-block-button__link {
	display: inline-block;
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.05rem;
	padding: .8rem 2.25rem;
	border-radius: 999px;
	border: 2px solid var(--bd-ink-strong);
	background: var(--bd-grad-ink);
	color: var(--bd-on-ink);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: var(--bd-shadow-sm);
}

/* The colour has to be restated on hover, not just inherited from the base
   rule. Kadence styles `a:hover` from its palette at (0,1,1), which outranks
   `.bd-btn` at (0,1,0) — so a hover rule that only moves the button leaves the
   label to Kadence, and it picks a tone almost identical to the fill. That was
   unreadable in BOTH themes: dark-grey on near-black, light-grey on near-white. */
.bd-btn:hover,
.bd-btn:focus-visible,
.wp-block-button > .wp-block-button__link:hover,
.wp-block-button > .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--bd-shadow-md);
	color: var(--bd-on-ink);
}

/* Ghost buttons invert on hover, so their label is the opposite again. */
.bd-btn--ghost:hover,
.bd-btn--ghost:focus-visible {
	color: var(--bd-on-ink);
}

.bd-btn--ghost,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	background: transparent;
	color: var(--bd-ink);
	border-color: var(--bd-ink-strong);
	/* Kadence gives the outline variant its own, smaller padding, which left it
	   12px shorter than the filled button standing next to it. */
	padding: .8rem 2.25rem;
}

.bd-btn--ghost:hover,
.bd-btn--ghost:focus-visible,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--bd-grad-ink);
	color: var(--bd-on-ink);
}

/* ── On black: the hero video and the closing CTA band ─────────────────────
   Both invert. Filled becomes white-on-black (the strongest contrast available
   over footage), outline becomes a white hairline. */
/* The fill here is white in BOTH themes — the hero sits on video and the CTA
   band is a black panel either way. So the label must be a literal dark value,
   not --bd-ink, which inverts to near-white and gave white-on-white. */
.bd-hero .wp-block-button > .wp-block-button__link,
.bd-ctaband .wp-block-button > .wp-block-button__link {
	background: var(--bd-white);
	color: var(--bd-900);
	border-color: var(--bd-white);
}

.bd-hero .wp-block-button > .wp-block-button__link:hover,
.bd-ctaband .wp-block-button > .wp-block-button__link:hover {
	background: var(--bd-100);
	color: var(--bd-900);
}

.bd-hero .bd-btn--ghost,
.bd-ctaband .bd-btn--ghost,
.bd-hero .wp-block-button.is-style-outline > .wp-block-button__link,
.bd-ctaband .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--bd-white);
	color: var(--bd-white);
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.bd-hero .bd-btn--ghost:hover,
.bd-ctaband .bd-btn--ghost:hover,
.bd-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.bd-ctaband .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--bd-white);
	color: var(--bd-ink);
}

/* ── Navigation ───────────────────────────────────────────────────────────
   Fixed bar; transparent over the hero video, blurred glass once scrolled.
   The mask fades the bottom edge, as the original did. */
.bd-nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background-color .3s ease, backdrop-filter .3s ease;
}

/* The WP admin bar is fixed at the top for logged-in users and would sit on
   top of the site header. Offset by its real height: 32px normally, 46px on
   the narrow admin-bar layout. */
.admin-bar .bd-nav { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .bd-nav { top: 46px; }
}

/* Below 600px WordPress switches #wpadminbar to position:absolute so it
   scrolls away. A fixed site header then rides up underneath it. Pinning the
   admin bar keeps the two consistent and costs nothing — it is only ever
   rendered for logged-in users, never for visitors. */
@media screen and (max-width: 600px) {
	#wpadminbar { position: fixed !important; }
	.admin-bar .bd-nav { top: 46px; }
}

.bd-nav--solid,
.bd-nav--over-hero.is-scrolled,
.bd-nav.is-open {
	background-color: rgba(255, 255, 255, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	mask-image: linear-gradient(to bottom, #000 95%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 95%, transparent 100%);
}

.bd-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 96rem;
	margin-inline: auto;
	padding: 1.4rem 2.5rem;
}

.bd-nav__menu {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.bd-nav__menu--right { justify-content: flex-end; }

.bd-nav__menu a {
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 1.6rem;   /* 1.5x the previous 1.05rem */
	text-decoration: none;
	white-space: nowrap;
	color: var(--bd-ink);
	transition: opacity .2s ease;
}

/* Underline wipes in from the left on hover. Drawn with ::after rather than
   border-bottom so it can animate and so it does not shift the layout. */
.bd-nav__menu a {
	position: relative;
	padding-bottom: 4px;
}

.bd-nav__menu 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;
}

.bd-nav__menu a:hover::after,
.bd-nav__menu a:focus-visible::after,
.bd-nav__menu a.is-active::after { transform: scaleX(1); }

/* Over the hero the links and logo invert to white. */
.bd-nav--over-hero:not(.is-scrolled):not(.is-open) .bd-nav__menu a {
	color: var(--bd-white);
	text-shadow: var(--bd-shadow-sm);
}

.bd-nav__logo { display: block; flex-shrink: 0; }
.bd-nav__logo img { height: 4rem; width: auto; }

/* Both logo rules must out-specify `.bd-nav__logo img` (0,1,1) or the generic
   display:block wins and both logos render at once. */
.bd-nav__logo img.bd-nav__logo-light { display: none; }
.bd-nav__logo img.bd-nav__logo-dark { display: block; }

.bd-nav--over-hero:not(.is-scrolled):not(.is-open) .bd-nav__logo img.bd-nav__logo-light { display: block; }
.bd-nav--over-hero:not(.is-scrolled):not(.is-open) .bd-nav__logo img.bd-nav__logo-dark { display: none; }

.bd-nav__toggle { display: none; }
.bd-nav__social { display: none; }

/* ── Mobile nav ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/*
	 * Explicit grid rather than wrapping flex. The previous version absolutely
	 * positioned the toggle with no `top`, so in a centre-aligned flex
	 * container it inherited a vertically-centred static position and slid
	 * down over the links as the open menu grew.
	 *
	 * Row 1 is a fixed three-column bar (toggle | logo | spacer) which keeps
	 * the logo optically centred; the menus and icon row are full-width rows
	 * underneath and only exist when open.
	 */
	.bd-nav__inner {
		display: grid;
		grid-template-columns: 2.75rem 1fr 2.75rem;
		grid-template-areas:
			"toggle logo   spacer"
			"menuL  menuL  menuL"
			"menuR  menuR  menuR"
			"social social social";
		align-items: center;
		gap: 0;
		padding: .5rem 1rem;
	}

	/* Kadence styles bare <button> elements, and its `button:focus` rule
	   (0,1,1) out-specifies a single class — which is why pressing the burger
	   flashed the theme's blue button fill. Every state is reset explicitly at
	   0,2,0 so the control stays transparent. */
	.bd-nav__toggle,
	.bd-nav__toggle:hover,
	.bd-nav__toggle:focus,
	.bd-nav__toggle:active,
	.bd-nav__toggle:focus-visible {
		grid-area: toggle;
		position: static;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 2.75rem;
		height: 2.75rem;
		padding: .6rem;
		background: none;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		color: inherit;
		cursor: pointer;
		transform: none;
	}

	.bd-nav__toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
		border-radius: 4px;
	}

	.bd-nav__logo { grid-area: logo; justify-self: center; }
	.bd-nav__menu--left { grid-area: menuL; }
	.bd-nav__menu--right { grid-area: menuR; }
	.bd-nav__social { grid-area: social; }

	.bd-nav__bar {
		display: block;
		height: 2px;
		width: 100%;
		background: var(--bd-ink);
		transition: background .3s ease;
	}

	.bd-nav--over-hero:not(.is-scrolled):not(.is-open) .bd-nav__bar { background: var(--bd-white); }

	/* The two menus are separate grid rows, so spacing between rows must come
	   from a margin equal to the in-row gap — otherwise the seam between
	   "Über uns" and "Dienstleistungen" reads as a bigger gap than the rest. */
	.bd-nav__menu,
	.bd-nav__social {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		text-align: center;
		margin: 1.25rem 0 0;
		padding: 0;
		list-style: none;
	}

	.bd-nav.is-open .bd-nav__menu,
	.bd-nav.is-open .bd-nav__social { display: flex; }

	.bd-nav__social {
		flex-direction: row;
		justify-content: center;
		margin-top: 1.75rem;
		padding-bottom: 1.25rem;
		gap: 2.25rem;
	}

	.bd-nav__social a { color: var(--bd-ink); }
	.bd-nav__social svg { width: 1.4rem; height: 1.4rem; }

	.bd-nav__logo img { height: 2.5rem; }
}

/* ── Page shell ───────────────────────────────────────────────────────── */
.bd-main { min-height: 50vh; }

.bd-container {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* Pages other than the front page start below the fixed bar. */
.bd-nav--solid ~ .bd-main { padding-top: 6.5rem; }

.bd-home-title {
	font-size: clamp(2rem, 5.5vw, 4.75rem);
	line-height: 1;
	text-align: center;
	margin: 0 auto 2.5rem;
	display: block;
}

.bd-center-block { display: block; text-align: center; margin-inline: auto; }

.bd-section--intro .bd-lead { margin-inline: auto; text-align: left; }
.bd-section--preview h2 { margin-bottom: 2.5rem; }
/* .bd-grid--2 is declared after .bd-grid, further down — same specificity, so
   source order decides and it has to win. */

/* ── Contact ──────────────────────────────────────────────────────────────
   Two columns on desktop, matching the legacy layout: the rotating house on
   the left, the form on the right. */
.bd-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	margin-block: 2.5rem;
}

.bd-contact__model model-viewer {
	width: 100%;
	height: 400px;
	background: transparent;
	--poster-color: transparent;
}

/* model-viewer renders a grey loading bar across the top of the element by
   default. The model is ~120 KB and loads in well under a second, so the bar
   only ever flashes — hide it rather than show a progress indicator for
   something that is decorative anyway. */
.bd-contact__model model-viewer::part(default-progress-bar) {
	display: none;
}

.bd-contact__details {
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2.5rem;
	font-size: .95rem;
	color: var(--bd-muted);
}

.bd-contact__details a { color: var(--bd-muted); }

/* Fluent Forms, restyled to the brand. The plugin's own field chrome is
   replaced rather than themed around. */
.bd-contact__form .ff-el-group { margin-bottom: 1.1rem; }

.bd-contact__form .ff-el-input--label label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--bd-700);
	margin-bottom: .35rem;
	display: inline-block;
}

.bd-contact__form input[type="text"],
.bd-contact__form input[type="email"],
.bd-contact__form input[type="tel"],
.bd-contact__form textarea {
	width: 100%;
	padding: .85rem 1rem;
	border: 1px solid var(--bd-line-strong);
	border-radius: .65rem;
	background: var(--bd-surface);
	font: inherit;
	color: var(--bd-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.bd-contact__form input:focus,
.bd-contact__form textarea:focus {
	outline: none;
	border-color: var(--bd-ink-strong);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
}

.bd-contact__form .ff-btn-submit {
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.05rem;
	padding: .8rem 2.25rem;
	border-radius: 999px;
	border: 2px solid var(--bd-ink-strong);
	background: var(--bd-grad-ink);
	color: var(--bd-on-ink);
	cursor: pointer;
}

.bd-form-fallback {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--bd-line-strong);
	border-left: 4px solid var(--bd-ink-strong);
	border-radius: .65rem;
	background: var(--bd-surface-2);
}

.bd-form-fallback p { margin: 0 0 .85rem; font-size: .9rem; color: var(--bd-700); }

.bd-contact__form .ff-el-is-error input,
.bd-contact__form .ff-el-is-error textarea { border-color: #b3261e; }
.bd-contact__form .text-danger { color: #b3261e; font-size: .85rem; }

@media (max-width: 900px) {
	.bd-contact { grid-template-columns: 1fr; gap: 2rem; }
	.bd-contact__model { order: 2; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.bd-footer { margin-top: 5rem; padding-bottom: 2rem; }

.bd-footer__card {
	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: 1.5rem 2rem 2rem;
}

.bd-footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bd-line);
}

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

.bd-footer__social {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bd-footer__social a { color: var(--bd-muted); }
.bd-footer__social svg { width: 1.15rem; height: 1.15rem; }

.bd-footer__cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1.2fr;
	gap: 2.5rem;
	padding-block: 2rem;
}

.bd-footer__heading {
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	text-transform: uppercase;
	font-size: 1.05rem;
	letter-spacing: .04em;
	margin: 0 0 1rem;
}

.bd-footer__col p { font-size: .92rem; line-height: 1.65; color: var(--bd-muted); margin: 0; }

.bd-footer__col ul { list-style: none; margin: 0; padding: 0; }
.bd-footer__col li { margin-bottom: .6rem; font-size: .92rem; color: var(--bd-muted); }
.bd-footer__col a { color: var(--bd-muted); text-decoration: none; border-bottom: 1px solid var(--bd-line-strong); }
.bd-footer__col a:hover { color: var(--bd-ink); border-bottom-color: var(--bd-ink-strong); }

.bd-footer__copy {
	text-align: center;
	font-size: .85rem;
	color: var(--bd-muted);
	padding-top: 1.25rem;
	border-top: 1px solid var(--bd-line);
}

.bd-footer__legal {
	display: flex;
	justify-content: center;
	gap: 3rem;
	flex-wrap: wrap;
	max-width: 83.333%;
	margin: 1.5rem auto 0;
	font-size: .85rem;
}

.bd-footer__legal a { color: var(--bd-muted); text-decoration: none; }
.bd-footer__legal a:hover { color: var(--bd-ink); text-decoration: underline; }

@media (max-width: 900px) {
	.bd-footer__card, .bd-footer__legal { max-width: 92%; }
	.bd-footer__cols { grid-template-columns: 1fr; gap: 2rem; }
	.bd-footer__legal { gap: 1.25rem; flex-direction: column; text-align: center; }
}

/* ── Service cards ────────────────────────────────────────────────────── */
/* Two columns, matching the original's col-lg-6 layout — not an auto-fill
   track list, which produced three at desktop width. */
.bd-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
	text-align: left;
}

@media (max-width: 768px) { .bd-grid { grid-template-columns: 1fr; } }

/* The home page shows the first four services 2×2, as the original did. */
.bd-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 768px) { .bd-grid--2 { grid-template-columns: 1fr; } }

.bd-card {
	position: relative;
	display: block;
	height: 24rem;
	border-radius: var(--bd-radius);
	overflow: hidden;
	box-shadow: var(--bd-shadow-md);
	text-decoration: none;
	background: var(--bd-900);
	transition: transform .25s ease, box-shadow .25s ease;
}

/* The image already zooms on hover; lifting the card as well makes it read as
   a pressable object rather than a picture that happens to move. */
.bd-card:hover,
.bd-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--bd-shadow-lg);
}

.bd-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

/* Gradient scrim so the white label always sits on darkened image, whatever
   the photo behind it. */
.bd-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
}

.bd-card:hover .bd-card__img,
.bd-card:focus-visible .bd-card__img { transform: scale(1.05); }

.bd-card__label {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	right: 1rem;
	z-index: 1;
	max-width: 20rem;
	background: var(--bd-surface);
	border-radius: .75rem;
	padding: .85rem 1rem;
	line-height: 1.25;
	box-shadow: var(--bd-shadow-sm);
}

.bd-card__title {
	display: block;
	font-size: 1.35rem;
	color: var(--bd-ink);
}

.bd-card__pre,
.bd-card__sub { font-size: .95rem; color: var(--bd-muted); }

/* ── Gallery + lightbox ───────────────────────────────────────────────── */
.bd-tabs {
	display: flex;
	gap: .75rem;
	justify-content: center;
	margin: 2.5rem 0 1.5rem;
}

.bd-tab {
	font-size: 1.05rem;
	letter-spacing: .04em;
	padding: .55rem 1.9rem;
	border: 2px solid var(--bd-ink-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--bd-ink);
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.bd-tab[aria-selected="true"] {
	background: var(--bd-grad-ink);
	color: var(--bd-on-ink);
}

.bd-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
}

.bd-gallery__item {
	position: relative;
	padding: 0;
	border: 0;
	background: var(--bd-surface-2);
	cursor: pointer;
	aspect-ratio: 4 / 3;
	border-radius: .75rem;
	overflow: hidden;
}

.bd-gallery__item img,
.bd-gallery__item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.bd-gallery__item:hover img,
.bd-gallery__item:hover video { transform: scale(1.04); }

/* Video tiles get a play affordance — without it they are indistinguishable
   from stills. */
.bd-gallery__item[data-type="video"]::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55) no-repeat center /
		1rem 1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10' fill='%23fff'%3E%3Cpath d='M0 0l8 5-8 5z'/%3E%3C/svg%3E");
	z-index: 1;
}

.bd-gallery__item:focus-visible {
	outline: 3px solid var(--bd-ink-strong);
	outline-offset: 3px;
}

.bd-lightbox[hidden] { display: none; }

.bd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}

.bd-lightbox__media { max-width: min(96vw, 1400px); max-height: 88vh; }

.bd-lightbox__media img,
.bd-lightbox__media video {
	max-width: 100%;
	max-height: 88vh;
	display: block;
	margin: 0 auto;
}

/* grid + place-items, and padding reset to 0: the user-agent stylesheet gives
   buttons their own padding, which offsets the contents inside a fixed-size
   round button. */
.bd-lightbox button {
	position: absolute;
	display: grid;
	place-items: center;
	padding: 0;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
	cursor: pointer;
	line-height: 1;
}

.bd-lightbox button svg { display: block; }

.bd-lightbox button:hover { background: rgba(255, 255, 255, .22); }
.bd-lightbox__close { top: 1rem; right: 1rem; }
.bd-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.bd-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }

.bd-lightbox button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.bd-lightbox__count {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: .9rem;
}

.bd-empty {
	text-align: center;
	color: var(--bd-muted);
	font-style: italic;
	padding: 2rem 0;
}

/* ── Service index list ───────────────────────────────────────────────── */
.bd-index__list {
	columns: 2;
	gap: 3rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bd-index__list li { break-inside: avoid; margin-bottom: .6rem; }

.bd-index__list a {
	color: var(--bd-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--bd-line-strong);
	transition: border-color .2s ease;
}

.bd-index__list a:hover { border-bottom-color: var(--bd-ink-strong); }

@media (max-width: 640px) { .bd-index__list { columns: 1; } }

/* ── Social rail ──────────────────────────────────────────────────────────
   Fixed vertical stack on the left edge. It is a <ul>, so the list styling has
   to be reset or the icons render with bullets. */
.bd-rail {
	position: fixed;
	left: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bd-rail li { margin: 0; }

.bd-rail a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--bd-ink);
	transition: transform .2s ease, opacity .2s ease;
}

.bd-rail a:hover { transform: scale(1.15); }
.bd-rail svg { width: 1.5rem; height: 1.5rem; }

/* Over the hero video the rail inverts, exactly like the nav. `bd-scrolled` is
   toggled on <html> by nav.js so the rail and the bar switch together. */
.home:not(.bd-scrolled) .bd-rail a {
	color: var(--bd-white);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}

@media (max-width: 1024px) { .bd-rail { display: none; } }

/* ── Cookie notice ────────────────────────────────────────────────────── */
.bd-cookie {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	z-index: 200;
	width: min(64rem, calc(100% - 2.5rem));
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.1rem 1.5rem;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-shadow-lg);
}

.bd-cookie__text {
	margin: 0;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--bd-muted);
}

.bd-cookie__text a { color: var(--bd-ink); }
.bd-cookie__btn { flex-shrink: 0; font-size: .9rem; padding: .6rem 1.5rem; }

@media (max-width: 700px) {
	.bd-cookie { flex-direction: column; align-items: stretch; text-align: left; }
	.bd-cookie__btn { align-self: flex-start; }
}

/* ── Display depth ────────────────────────────────────────────────────────
   With the gold retired there is no accent colour left to make a heading feel
   like an event. A hard offset shadow does that job instead: on a condensed
   uppercase face it reads as poster lettering, and because both layers are
   drawn from the existing grey ramp it stays inside the monochrome system.

   Offsets are hard (0 blur) on purpose — a blurred shadow on black-on-white
   type just looks like a printing fault. Scoped to display headings only, so
   nav links, card titles and body copy are untouched. */
/* Offsets are in em, not px: a fixed 3px offset that looks right on a 96px
   hero headline is a smudge on a 28px section heading, and the headings here
   run across a 3.5x clamp range.

   The dark theme overrides these (see the dark blocks above). It has to: the
   light offset is --bd-200, and a near-white offset behind near-white letters
   on a near-black page is not a shadow — it is a second, slightly dimmer copy
   of the letterform, which reads as chunky 3D. On dark the offset has to be
   DARKER than the text, so it is a low-alpha white that composites down to a
   mid-grey, at a shorter distance. */
:root {
	--bd-display-shadow: .05em .05em 0 var(--bd-200), .1em .1em 0 rgba(13, 13, 13, .05);
	--bd-display-shadow-dark: .035em .035em 0 rgba(255, 255, 255, .13);
}

.bd-display,
.bd-page-title {
	text-shadow: var(--bd-display-shadow);
}

/* Inverted on the black panels, and off entirely over the hero video, which
   carries its own soft shadow for legibility rather than for effect. */
.bd-on-dark .bd-display,
.bd-on-dark .bd-page-title {
	text-shadow: var(--bd-display-shadow-dark);
}

.bd-hero .bd-display,
.bd-hero .bd-page-title { text-shadow: inherit; }

/* The offset shifts the visual centre of a centred heading to the right, so it
   is nudged back by half of it. In em, so it tracks the shadow. */
.bd-center-block.bd-display { transform: translateX(-.05em); }

/* ── Trust strip ──────────────────────────────────────────────────────────
   Sits directly under the hero. A regional trade buyer is deciding whether
   this firm is real and nearby before they read anything else; the old site
   answered neither question above the fold. */
.bd-trust {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bd-grad-panel);
	border-block: 1px solid var(--bd-line);
	padding-block: 2rem;
}

/* The band is full-bleed but its contents are not: without this the four items
   line up against the viewport edges instead of the same measure every other
   section uses. */
.bd-trust .wp-block-columns {
	gap: 1.5rem;
	margin-block: 0;
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size, 1200px);
	padding-inline: 1.5rem;
}

.bd-trust .wp-block-column {
	text-align: center;
	padding-inline: 1rem;
	border-left: 1px solid var(--bd-line);
}

.bd-trust .wp-block-column:first-child { border-left: 0; }

.bd-trust h3 {
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 1.35rem;
	margin: 0 0 .3rem;
}

.bd-trust p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--bd-muted);
}

@media (max-width: 900px) {
	.bd-trust .wp-block-columns { flex-wrap: wrap !important; }
	.bd-trust .wp-block-column {
		flex-basis: 50% !important;
		border-left: 0;
		padding-block: .75rem;
	}
}

/* ── Process steps ────────────────────────────────────────────────────────
   Removes the main friction on a "request a quote" action: not knowing what
   happens after you press the button. */
.bd-steps.wp-block-columns {
	gap: 2rem;
	margin-top: 2.5rem;
	text-align: left;
	counter-reset: bd-step;
}

.bd-steps .wp-block-column {
	position: relative;
	counter-increment: bd-step;
	padding: 2.25rem 1.75rem 1.75rem;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-shadow-sm);
}

/* The number is generated, so renumbering is just reordering the columns. */
.bd-steps .wp-block-column::before {
	content: counter(bd-step);
	position: absolute;
	top: -1.1rem;
	left: 1.5rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--bd-grad-ink);
	color: var(--bd-on-ink);
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	font-size: 1.4rem;
	line-height: 1;
	box-shadow: var(--bd-shadow-md);
}

.bd-steps h3 {
	margin: .5rem 0 .6rem;
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.5rem;
}

.bd-steps p { margin: 0; line-height: 1.65; color: var(--bd-muted); }

/* ── Closing CTA band ─────────────────────────────────────────────────── */
.bd-ctaband {
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	position: relative;
	transform: translateX(-50%);
	background: var(--bd-band);
	/* --bd-band-ink, not --bd-on-ink: the band is dark in BOTH themes, so its
	   text must not flip with the theme the way button labels do. */
	color: var(--bd-band-ink);
	padding-block: 4rem;
	margin-top: 5rem;
	text-align: center;
}

.bd-ctaband :where(h2, p) { color: var(--bd-band-ink); }
.bd-ctaband p { max-width: 52ch; margin-inline: auto; }
/* The block version gets its measure from the group's constrained layout; the
   PHP version (parts/cta.php, used by the two Leistungen templates) has no such
   wrapper, so it brings its own. */
.bd-ctaband__inner {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.bd-ctaband__inner > h2 { margin-top: 0; }

/* display:flex is set explicitly rather than relying on core's
   `.is-layout-flex`, which the hand-written markup does not carry. */
.bd-ctaband .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2rem;
	gap: .9rem;
}

/* ── Sticky action bar (phones) ───────────────────────────────────────── */
.bd-actionbar { display: none; }

@media (max-width: 768px) {
	/* grid-auto-flow: column with auto-columns, NOT a fixed `1fr 1fr`.
	   A fixed two-column track means anything that adds a third child — a
	   browser translation extension restructuring the markup, most likely —
	   wraps onto a second row and the bar becomes a 2x2 with blank cells.
	   Auto-flow keeps every child on one row whatever the count. */
	.bd-actionbar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 150;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 1px;
		background: var(--bd-line);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bd-actionbar__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		min-width: 0;          /* lets the label shrink instead of overflowing */
		gap: .5rem;
		/* 48px is the minimum comfortable touch target; the padding keeps it
		   above that at any font size. */
		padding: .95rem .5rem;
		background: var(--bd-surface);
		color: var(--bd-ink);
		font-family: "American Captain", "Oswald", system-ui, sans-serif;
		text-transform: uppercase;
		letter-spacing: .04em;
		font-size: 1rem;
		text-decoration: none;
	}

	.bd-actionbar__btn svg { flex: 0 0 auto; }

	/* Longer labels — a translated page, or a future rename — truncate rather
	   than wrap the icon onto its own line. */
	.bd-actionbar__label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bd-actionbar__btn--primary {
		background: var(--bd-grad-ink);
		color: var(--bd-on-ink);
	}

	/* The bar covers the last strip of the page and would sit on top of the
	   cookie notice, so both are lifted clear of it. */
	body { padding-bottom: 3.6rem; }
	.bd-cookie { bottom: 4.4rem; }
	/* Kadence's mobile drawer is z-index 99999, so it covers the bar on its
	   own — no explicit hide rule needed. */
}

/* ── Icon badge ────────────────────────────────────────────────────────────
   The reference puts every section icon in a rounded square with an inverted
   fill. One class, used by the process steps, the stats, the values and the
   project cards. */
.bd-badge {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	flex: 0 0 auto;
	border-radius: .9rem;
	background: var(--bd-badge-bg);
	color: var(--bd-badge-ink);
}

.bd-badge svg { width: 1.4rem; height: 1.4rem; }

/* ── Hero: logo only ───────────────────────────────────────────────────────
   No headline, no buttons — the reference's hero. The <h1> is the logo: the
   alt text carries the site name for screen readers and search engines, so
   nothing is lost semantically by there being no visible words. */
.bd-hero__logo {
	margin: 0;
	text-align: center;
}

.bd-hero__logo img {
	/* margin-inline, not text-align: the image is display:block here, and a
	   block box ignores the text-align on its parent. */
	margin-inline: auto;
	width: min(72vw, 30rem);
	height: auto;
	filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .45));
}

/* Because the hero has no call to action, the cue is the only thing telling a
   visitor there is more below. */
.bd-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 2.5rem;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	z-index: 2;
	animation: bd-cue 2.4s ease-in-out infinite;
}

.bd-hero__cue svg { width: 1.2rem; height: 1.2rem; }
.bd-hero__cue:hover { background: rgba(255, 255, 255, .16); color: #fff; }

@keyframes bd-cue {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 6px); }
}

/* ── Arbeitsprozess ────────────────────────────────────────────────────────
   Desktop: five cards in a row joined by a rule that runs behind the badges.
   Mobile: one card at a time, paginated (see assets/js/stepper.js). */
.bd-prozess { position: relative; margin-top: 3rem; }

.bd-prozess__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
}

.bd-prozess__step {
	position: relative;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-card);
	padding: 1.75rem 1.25rem 1.5rem;
	text-align: left;
}

.bd-prozess__num {
	position: absolute;
	top: 1.9rem;
	right: 1.25rem;
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	font-size: 1.5rem;
	/* --bd-muted, not --bd-line: a hairline colour used as text is ~1.4:1 and
	   axe flags it in both themes. Muted is the lightest token that still
	   clears AA. */
	color: var(--bd-muted);
}

.bd-prozess__title {
	margin: 1rem 0 .5rem;
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.3rem;
}

.bd-prozess__text { margin: 0 0 1rem; color: var(--bd-muted); line-height: 1.6; font-size: .95rem; }

.bd-prozess__meta {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: .85rem;
	color: var(--bd-muted);
}

.bd-prozess__meta svg { width: .95rem; height: .95rem; }
.bd-prozess__nav { display: none; }

@media (max-width: 1100px) {
	.bd-prozess__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	/* One card at a time, paginated. `is-paged` is added by stepper.js, so with
	   JavaScript off the list stays a plain five-item stack rather than
	   collapsing to one card with dead controls. */
	.bd-prozess.is-paged .bd-prozess__list { grid-template-columns: 1fr; }
	.bd-prozess.is-paged .bd-prozess__step { display: none; }
	.bd-prozess.is-paged .bd-prozess__step[data-active] { display: block; }
	.bd-prozess:not(.is-paged) .bd-prozess__list { grid-template-columns: 1fr; }

	.bd-prozess__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .4rem;
		margin-top: 1.5rem;
	}

	.bd-prozess__dot,
	.bd-prozess__arrow {
		display: grid;
		place-items: center;
		min-width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 1px solid transparent;
		border-radius: .6rem;
		background: transparent;
		color: var(--bd-ink);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	/* Solid fill, inverted label. The previous treatment was a pale tint with
	   the same text colour as the inactive numbers, so the current step was the
	   least readable item in the row — which is the one thing the control has
	   to communicate. */
	.bd-prozess__dot[aria-current] {
		background: var(--bd-grad-ink);
		border-color: transparent;
		color: var(--bd-on-ink);
	}

	.bd-prozess__arrow svg { width: 1.1rem; height: 1.1rem; }
	.bd-prozess__arrow[disabled] { opacity: .35; cursor: default; }
}

/* ── Stats ─────────────────────────────────────────────────────────────── */
.bd-zahlen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.bd-zahlen__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	padding: 1.75rem 1rem;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-card);
	text-align: center;
}

.bd-zahlen__value {
	font-family: "American Captain", "Oswald", system-ui, sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1;
}

.bd-zahlen__label { font-size: .9rem; color: var(--bd-muted); line-height: 1.45; }

@media (max-width: 720px) { .bd-zahlen { grid-template-columns: repeat(2, 1fr); } }

/* ── Project cards ─────────────────────────────────────────────────────── */
.bd-projekte {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
	text-align: left;
}

@media (max-width: 980px) { .bd-projekte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bd-projekte { grid-template-columns: 1fr; } }

.bd-projekt-card {
	display: flex;
	flex-direction: column;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease;
}

.bd-projekt-card:hover,
.bd-projekt-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--bd-shadow-lg);
}

.bd-projekt-card__media {
	aspect-ratio: 16 / 10;
	background: var(--bd-surface-2);
	overflow: hidden;
}

.bd-projekt-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bd-projekt-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--bd-muted);
}

.bd-projekt-card__placeholder svg { width: 2.5rem; height: 2.5rem; }
.bd-projekt-card__body { padding: 1.35rem; display: flex; flex-direction: column; gap: .55rem; }

.bd-projekt-card__title {
	margin: 0;
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 1.3rem;
}

.bd-projekt-card__excerpt { margin: 0; color: var(--bd-muted); font-size: .95rem; line-height: 1.6; }

.bd-projekt-card__meta {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: .85rem;
	color: var(--bd-muted);
}

.bd-projekt-card__meta svg { width: .95rem; height: .95rem; }

/* ── Project detail ────────────────────────────────────────────────────── */
.bd-projekt__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0;
	padding: 1.1rem 1.35rem;
	background: var(--bd-surface-2);
	border-radius: var(--bd-radius);
	font-size: .95rem;
}

.bd-projekt__fact { display: flex; align-items: center; gap: .5rem; color: var(--bd-muted); }
.bd-projekt__fact svg { width: 1.05rem; height: 1.05rem; }
.bd-projekt__fact strong { color: var(--bd-ink); font-weight: 600; }

.bd-projekt__leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.bd-projekt__leistungen li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	line-height: 1.5;
}

.bd-projekt__leistungen svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: .1rem; }

/* ── Carousel ──────────────────────────────────────────────────────────── */
.bd-carousel { margin-top: 1.5rem; }

.bd-carousel__viewport {
	position: relative;
	border-radius: var(--bd-radius-card);
	overflow: hidden;
	background: var(--bd-surface-2);
	aspect-ratio: 16 / 10;
}

.bd-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.bd-carousel__slide[data-active] { opacity: 1; }
.bd-carousel__slide img,
.bd-carousel__slide video { width: 100%; height: 100%; object-fit: cover; display: block; }

.bd-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin-top: 1rem;
}

.bd-carousel__arrow,
.bd-carousel__dot {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: .5rem;
	background: transparent;
	color: var(--bd-ink);
	cursor: pointer;
}

.bd-carousel__arrow svg { width: 1.1rem; height: 1.1rem; }

/* Dots are pills rather than circles so the active one can widen — the
   reference does this and it reads better than a colour change alone. */
.bd-carousel__dot {
	width: .55rem;
	height: .55rem;
	border-radius: 999px;
	background: var(--bd-line-strong);
	font-size: 0;
	transition: width .25s ease, background-color .25s ease;
}

.bd-carousel__dot[aria-current] { width: 1.6rem; background: var(--bd-ink); }
.bd-carousel__count { margin: .75rem 0 0; text-align: center; font-size: .85rem; color: var(--bd-muted); }

/* ── Team ──────────────────────────────────────────────────────────────── */
.bd-team {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
}

@media (max-width: 900px) { .bd-team { grid-template-columns: repeat(2, 1fr); } }

.bd-team__card {
	position: relative;
	border-radius: var(--bd-radius-card);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--bd-surface-2);
}

.bd-team__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bd-team__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem 1rem .9rem;
	text-align: left;
	color: #fff;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .78) 65%);
}

.bd-team__name { display: block; font-size: 1.1rem; font-weight: 600; }
.bd-team__role { display: block; font-size: .85rem; opacity: .85; }

/* ── Inhaber ───────────────────────────────────────────────────────────── */
.bd-inhaber {
	max-width: 34rem;
	margin: 2.5rem auto 0;
	padding: 2.5rem 2rem 2rem;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-card);
	text-align: center;
}

.bd-inhaber__portrait {
	width: 13rem;
	height: 13rem;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bd-surface-2);
}

/* Greyscale is the reference's treatment and it also makes portraits shot on
   different days under different light look like one set. */
.bd-inhaber__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1);
}

.bd-inhaber__name {
	margin: 0 0 .75rem;
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.5rem;
}

.bd-inhaber__bio { margin: 0; color: var(--bd-muted); line-height: 1.7; }

/* ── Values ────────────────────────────────────────────────────────────── */
.bd-werte {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
}

@media (max-width: 900px) { .bd-werte { grid-template-columns: repeat(2, 1fr); } }

.bd-werte__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	padding: 1.75rem 1rem;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-card);
	text-align: center;
	font-weight: 600;
}

/* ── Job listings ──────────────────────────────────────────────────────── */
.bd-stellen { display: grid; gap: 1.25rem; margin-top: 2.5rem; text-align: left; }

.bd-stelle {
	padding: 1.75rem;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-card);
}

.bd-stelle__title {
	margin: 0 0 .75rem;
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 1.4rem;
}

.bd-stelle__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }

.bd-stelle__tag {
	padding: .25rem .7rem;
	border-radius: 999px;
	background: var(--bd-surface-2);
	border: 1px solid var(--bd-line);
	font-size: .82rem;
	color: var(--bd-muted);
}

.bd-stelle__body { color: var(--bd-muted); line-height: 1.7; }
.bd-stelle__body > *:first-child { margin-top: 0; }

/* ── Placeholder marker ────────────────────────────────────────────────────
   Seeded demo content is tagged so it is impossible to ship by accident. */
.bd-placeholder {
	display: inline-block;
	margin-top: 1rem;
	padding: .3rem .7rem;
	border: 1px dashed var(--bd-line-strong);
	border-radius: .4rem;
	font-size: .78rem;
	color: var(--bd-muted);
}

/* ── Motion ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.bd-card:hover .bd-card__img,
	.bd-gallery__item:hover img,
	.bd-gallery__item:hover video { transform: none; }
	.bd-btn:hover,
	.wp-block-button__link:hover { transform: none; }
	.bd-card:hover, .bd-card:focus-visible { transform: none; }
}

/* ── Contact form in dark mode ─────────────────────────────────────────────
   Fluent Forms paints its labels and help text with its own near-black, which
   is invisible on a dark surface. Scoped to the form so nothing else inherits
   a colour override. */
.bd-contact__form label,
.bd-contact__form .ff-el-input--label label,
.bd-contact__form .ff-el-input--content { color: var(--bd-ink); }

.bd-contact__form input[type="text"],
.bd-contact__form input[type="email"],
.bd-contact__form input[type="tel"],
.bd-contact__form textarea {
	background: var(--bd-surface);
	color: var(--bd-ink);
	border-color: var(--bd-line-strong);
}

.bd-contact__form input::placeholder,
.bd-contact__form textarea::placeholder { color: var(--bd-muted); }

/* Fluent Forms sets the field colour on the element with its own selector,
   which outranks a plain descendant rule. Matching input types explicitly
   raises specificity enough without resorting to !important. */
.bd-contact__form textarea#ff_3_message,
.bd-contact__form .ff-el-form-control,
.bd-contact__form textarea.ff-el-form-control,
.bd-contact__form input.ff-el-form-control {
	background: var(--bd-surface);
	color: var(--bd-ink);
	border-color: var(--bd-line-strong);
}

/* ── Ihre Vorteile ─────────────────────────────────────────────────────────
   Badge beside the text rather than above it, so it reads as a list of claims
   rather than another card grid — the page already has three of those. */
.bd-vorteile {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem 2.5rem;
	margin-top: 2.5rem;
	text-align: left;
}

@media (max-width: 780px) { .bd-vorteile { grid-template-columns: 1fr; } }

.bd-vorteile__item { display: flex; align-items: flex-start; gap: 1rem; }

.bd-vorteile__title {
	margin: .25rem 0 .4rem;
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.2rem;
}

.bd-vorteile__text { margin: 0; color: var(--bd-muted); line-height: 1.6; font-size: .95rem; }

/* ── Dienstleistungen intro band ───────────────────────────────────────────
   The dark full-bleed band the reference opens the services page with. Same
   construction as .bd-ctaband — dark in both themes, breaking out of the
   content container. */
.bd-servicehero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bd-band);
	color: var(--bd-band-ink);
	padding-block: clamp(4rem, 9vw, 7rem);
	text-align: center;
}

.bd-servicehero__inner {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.bd-servicehero h1 { margin: 0 0 1rem; color: var(--bd-band-ink); }

/* Belt and braces with the `bd-on-dark` class on the markup: this band is dark
   in BOTH themes, so the display shadow must always be the inverted one. Left
   to the class alone, a future edit that drops it reintroduces a near-white
   offset behind near-white letters. */
.bd-servicehero .bd-display,
.bd-servicehero .bd-page-title,
.bd-ctaband .bd-display,
.bd-ctaband .bd-page-title { text-shadow: var(--bd-display-shadow-dark); }
.bd-servicehero p { margin: 0 auto; max-width: 46ch; color: rgba(255, 255, 255, .78); line-height: 1.6; }

.bd-servicehero .bd-btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .9rem;
	margin-top: 2rem;
}

/* Buttons here sit on the dark band in both themes, so they take the same
   fixed treatment as the hero's — not the themed one. */
.bd-servicehero .bd-btn {
	background: var(--bd-white);
	color: var(--bd-900);
	border-color: var(--bd-white);
}

.bd-servicehero .bd-btn--ghost {
	background: rgba(255, 255, 255, .08);
	color: var(--bd-white);
	border-color: var(--bd-white);
}

.bd-servicehero .bd-btn--ghost:hover { background: var(--bd-white); color: var(--bd-900); }

/* ── Circular badge variant ────────────────────────────────────────────────
   The reference uses a circle on the services and values grids and a rounded
   square in the process steps. Same component, one modifier. */
.bd-badge--round {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--bd-surface-2);
	color: var(--bd-ink);
}

.bd-badge--round svg { width: 1.6rem; height: 1.6rem; }

/* ── Service cards (Dienstleistungen archive) ─────────────────────────── */
.bd-servicegrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
}

@media (max-width: 1000px) { .bd-servicegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bd-servicegrid { grid-template-columns: 1fr; } }

.bd-servicecard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem 1.25rem 1.75rem;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-card);
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease;
}

.bd-servicecard:hover { transform: translateY(-3px); box-shadow: var(--bd-shadow-md); }

.bd-servicecard__title {
	margin: 0;
	font-family: "American Captain", "Oswald", "Arial Narrow", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 1.2rem;
	line-height: 1.2;
}

.bd-btn--sm { font-size: .9rem; padding: .5rem 1.2rem; }

/* Values grid takes the circular badge too. */
.bd-werte__item .bd-badge { width: 4rem; height: 4rem; border-radius: 50%; }
.bd-werte__item .bd-badge svg { width: 1.6rem; height: 1.6rem; }

/* ── Projekte: one page, every project expanded ────────────────────────── */
.bd-projektliste { display: grid; gap: 2.5rem; margin-block: 3rem; }

.bd-projekt {
	padding: 2rem;
	background: var(--bd-surface);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-card);
	text-align: left;
}

.bd-projekt > .bd-badge { margin-bottom: 1.25rem; }

.bd-projekt__title {
	margin: 0 0 1rem;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.15;
}

.bd-projekt__text { color: var(--bd-muted); line-height: 1.7; }
.bd-projekt__text > *:first-child { margin-top: 0; }

.bd-projekt__sub {
	margin: 2rem 0 1rem;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Facts are a definition-style list, not the pill row used on a single
   project — here they sit inside a card that already has a border. */
.bd-projekt__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.bd-projekt__facts .bd-projekt__fact {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	color: var(--bd-muted);
	font-size: .95rem;
}

.bd-projekt__cta { margin: 2rem 0 0; }

@media (max-width: 600px) { .bd-projekt { padding: 1.5rem 1.25rem; } }

/* ── Unser Team opening section ────────────────────────────────────────── */
.bd-teamfoto {
	margin: 2.5rem auto 1.5rem;
	max-width: 46rem;
	border-radius: var(--bd-radius-card);
	overflow: hidden;
	border: 1px solid var(--bd-line);
}

.bd-teamfoto img { display: block; width: 100%; height: auto; }