/* ==========================================================================
   Tewoort — Design tokens + base + components.
   Single stylesheet. ~12 kB minified. No build step.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
	/* Colors — derived from logo. Contrast-checked against WCAG 2.1 AA.
	   Body text uses ink (16:1) or ink-muted (9.5:1). Subtle/meta text uses
	   ink-subtle (5.9:1 — was 5.3 before). Orange (#E85A2C) is reserved for
	   large headings, UI components (button bg), and non-text decoration —
	   on body text we use primary-dark (5.4:1). */
	--c-primary:        #E85A2C; /* 3.54:1 on white — large text + UI only */
	--c-primary-dark:   #B8431F; /* 5.44:1 on white — links, hover, eyebrow on light */
	--c-primary-soft:   #FFE4D6;
	--c-ink:            #1F1F1F; /* 16.1:1 on white */
	--c-ink-muted:      #4A4A4A; /* 9.5:1 on white */
	--c-ink-subtle:     #5F5F5F; /* 6.9:1 on white — bumped from #6B6B6B */
	--c-line:           #E6E0D6;
	--c-sand:           #F5EFE6;
	--c-sand-strong:    #EAE0CC;
	--c-surface:        #FFFFFF;
	--c-success:        #1F7A4D;
	--c-danger:         #B33A2A;
	/* Deep blue-purple from the Tewoort wordmark. Used for the active nav pill.
	   Contrast on white text = 10.3:1 (WCAG AAA). */
	--c-logo-lila:      #3D2F8C;

	/* Typography */
	--ff-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--fs-base: 1.125rem; /* 18px — comfortable reading size, all rem values scale with it */
	--lh-base: 1.7;

	/* Spacing scale (4-px grid: 4,8,12,16,24,32,48,64,96) */
	--s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
	--s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem; --s-9: 6rem;

	/* Layout */
	--container-max: 1200px;
	--container-narrow: 72ch;
	--radius-sm: 0.375rem;
	--radius:    0.5rem;
	--radius-lg: 1rem;

	/* Effects */
	--shadow-sm: 0 1px 2px rgba(31,31,31,.08);
	--shadow:    0 4px 14px rgba(31,31,31,.10);
	--shadow-lg: 0 12px 32px rgba(31,31,31,.16);

	/* Solid dual-layer focus ring — 2px white halo + 3px solid primary-dark.
	   Visible on light, dark, and color-image backgrounds (e.g. hero overlay). */
	--focus-ring: 0 0 0 2px var(--c-surface), 0 0 0 5px var(--c-primary-dark);

	--t-fast: 150ms;
	--t-base: 220ms;
	--ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	background: var(--c-surface);
	/* Force the vertical scrollbar to ALWAYS be rendered. Combined with
	   scrollbar-gutter: stable, this guarantees the viewport width is
	   constant from the first paint — preventing every `vw`-based length
	   on the page from recalculating when content grows past the fold and
	   the scrollbar would normally appear. That recalculation was the
	   underlying cause of the visible "shrink" on long pages. */
	overflow-y: scroll;
	scrollbar-gutter: stable;
	margin: 0 !important;
	padding: 0 !important;
}
/* Smooth-scroll ONLY when an in-page anchor is the target — never on
   page-to-page navigation, never on aria-current re-activation. */
html:has(:target) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	font-family: var(--ff-system);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-ink);
	background: var(--c-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
	/* `!important` to defeat WP block library `:where()` rules that add
	   `margin-block-start: 24px` to body's first child based on body class. */
	margin: 0 !important;
	padding: 0 !important;
}
/* Also override the WP rule that adds margin to body's first child. */
body > :first-child { margin-top: 0 !important; }
body > .site-header { margin: 0 !important; }
body > main { margin: 0 !important; }
body > footer { margin: 0 !important; }
html {
	overflow-x: clip;
	margin: 0;
}

/* No flex-shrink needed — grid handles it. Main keeps the white background. */
main.site-main {
	background: var(--c-surface);
	min-width: 0;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

a {
	color: var(--c-primary-dark);
	text-decoration-skip-ink: auto;
	text-underline-offset: 0.15em;
}
/* On hover keep the SAME (already AA-compliant) color and instead change the
   underline accent — avoids dropping below 4.5:1 contrast on white. */
a:hover { color: var(--c-primary-dark); text-decoration-thickness: 0.125em; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid transparent;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.2; color: var(--c-ink); }
h1 { font-size: clamp(2.15rem, 4.8vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

p, ul, ol, blockquote, figure, pre { margin-bottom: var(--s-4); }
ul, ol { padding-left: 1.25rem; }
blockquote {
	padding: var(--s-4) var(--s-5);
	border-left: 4px solid var(--c-primary);
	background: var(--c-sand);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
}
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-6) 0; }

::selection { background: var(--c-primary-soft); color: var(--c-ink); }

/* WCAG 1.4.12 Text Spacing — ensure user-defined overrides for line-height,
   letter-spacing, word-spacing, and paragraph spacing don't break the layout.
   We declare nothing here; this comment exists to document the audit:
   - no fixed `height` on text containers (only `min-height`)
   - all card paddings are responsive
   - `overflow: hidden` is avoided where text lives
   Verified: large user-applied spacing remains readable and doesn't clip. */

/* ---------- 3. A11y helpers ---------- */
.visually-hidden, .screen-reader-text {
	position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px;
	padding: 0; border: 0; overflow: hidden; white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--c-ink); color: #fff; padding: var(--s-3) var(--s-4);
	border-radius: 0 0 var(--radius) 0; text-decoration: none;
}
.skip-link:focus-visible { left: 0; box-shadow: none; }

/* ---------- 4. Layout ---------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--s-4);
}
@media (min-width: 48rem) { .container { padding-inline: var(--s-6); } }
.container--narrow { max-width: var(--container-narrow); }

main.site-main { display: block; min-height: 50vh; }
/* Direct .container children of main are content wrappers (NOT used on the
   front page, which uses full-bleed sections). Give them breathing room:
   - the first container holds breadcrumbs (small top, no bottom)
   - any subsequent container holds the page content (full padding) */
.site-main > .container:first-child { padding-block: var(--s-4) 0; }
.site-main > .container:not(:first-child),
.site-main > .container:only-child { padding-block: var(--s-5) var(--s-7); }

/* Row + columns (mapped from legacy [wpcol_*] shortcodes) */
.row { display: grid; gap: var(--s-5); margin-block: var(--s-5); }
@media (min-width: 48rem) {
	.row { grid-template-columns: repeat(12, 1fr); }
	.col { grid-column: span 12; }
	.col--one-third     { grid-column: span 4; }
	.col--two-thirds    { grid-column: span 8; }
	.col--one-half      { grid-column: span 6; }
	.col--one-fourth    { grid-column: span 3; }
	.col--three-fourths { grid-column: span 9; }
}

/* ---------- 5. Header — two-tier, glass-morphism, scroll-adaptive ---------- */
.site-header { position: sticky; top: 0; z-index: 60; }

/* —————— Utility bar (top, white, thin) —————— */
.utility-bar {
	background: var(--c-surface);
	color: var(--c-ink-muted);
	font-size: 0.9rem;
	border-bottom: 1px solid var(--c-line);
}
.utility-bar__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s-4);
	padding-block: 20px;
	height: 72px;
	box-sizing: border-box;
}
.utility-bar__left, .utility-bar__right {
	display: flex; align-items: center; gap: var(--s-4);
}

.status-pill {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.3rem 0.75rem;
	background: rgba(31, 31, 31, 0.04);
	border: 1px solid rgba(31, 31, 31, 0.06);
	border-radius: 999px;
	font-weight: 600;
	white-space: nowrap;
}
.status-pill__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-pill--open  .status-pill__dot {
	background: #16a34a;            /* darker green — contrast on light bg */
	animation: status-pulse 2.4s ease-in-out infinite;
}
.status-pill--open  { color: #0e5132; }   /* dark forest green — 9.6:1 on sand */
.status-pill--closed .status-pill__dot { background: #dc2626; }
.status-pill--closed { color: #7f1d1d; }
@keyframes status-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0.50); }
	70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);    }
	100% { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0);    }
}
@media (prefers-reduced-motion: reduce) {
	.status-pill--open .status-pill__dot { animation: none; }
}

.utility-link {
	display: inline-flex; align-items: center; gap: 0.5rem;
	color: var(--c-ink); text-decoration: none;
	font-weight: 600;
	transition: color var(--t-fast) var(--ease);
}
.utility-link svg { color: var(--c-primary-dark); }
.utility-link:hover { color: var(--c-primary-dark); text-decoration: underline; text-underline-offset: 3px; }

.utility-trust {
	display: inline-flex; align-items: center; gap: 0.55rem;
	padding: 0.4rem 1rem 0.4rem 0.8rem;
	background: linear-gradient(135deg, #FFE89F 0%, #F0B53A 45%, #C9870D 100%);
	color: #3a2606;
	font-weight: 800;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 999px;
	border: 1px solid rgba(255, 215, 130, 0.55);
	box-shadow:
		0 0 0 1px rgba(120, 75, 10, 0.25),
		0 4px 14px -4px rgba(240, 181, 58, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
	text-shadow: 0 1px 0 rgba(255, 230, 150, 0.6);
}
.utility-trust svg {
	color: #6B3F00;
	filter: drop-shadow(0 1px 0 rgba(255, 230, 150, 0.6));
}

@media (max-width: 48rem) {
	.utility-bar { font-size: 0.8rem; }
	.utility-bar__inner {
		flex-direction: column; align-items: center;
		gap: 0.4rem;
		padding-block: 0.6rem;
		/* The desktop rule pins height:72px. In column-flex on mobile with
		 * three stacked rows (status pill / phone / trust badge) that's not
		 * enough room — the trust badge spills below the bar and visually
		 * overlaps the logo row in the main header. Let the bar grow with
		 * its content. */
		height: auto;
		min-height: 0;
	}
	.utility-bar__left, .utility-bar__right { gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
	/* Visually hide the phone-number text on mobile, but keep it in the
	 * accessibility tree — the visible icon alone gives the link no
	 * accessible name, which fails the "links have a discernible name"
	 * audit. Clipping (not display:none) preserves SR access. */
	.utility-link__text {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.utility-trust { font-size: 0.7rem; }
}

/* —————— Main bar (clean white, subtle scroll-shadow) —————— */
.site-header__main {
	background: var(--c-surface);     /* solid white — no glass tint */
	border-bottom: 1px solid rgba(31, 31, 31, 0.06);
	transition:
		box-shadow 220ms var(--ease),
		border-color 220ms var(--ease);
}
.site-header.is-scrolled .site-header__main {
	box-shadow: 0 8px 26px -18px rgba(31, 31, 31, 0.4);
	border-bottom-color: transparent;
}

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s-5);
	height: 112px;                /* slightly taller — more breathing room */
	padding-block: 0;
	box-sizing: border-box;
	position: relative;
}

.site-branding { display: flex; align-items: center; }
.site-logo img, .custom-logo-link img {
	max-height: 64px;             /* slightly larger logo for the airier header */
	width: auto; display: block;
}

/* —————— Nav — pill-style with primary-soft active state —————— */
.primary-nav { display: flex; align-items: center; }
.primary-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center;
	gap: 6px;
}
.primary-menu li { position: relative; }
.primary-menu a {
	display: inline-flex; align-items: center;
	padding: 0.7rem 1.15rem;
	border-radius: 999px;
	font-weight: 600; font-size: 0.95rem;
	color: var(--c-ink-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.primary-menu a:hover { color: var(--c-ink); background: rgba(31, 31, 31, 0.05); }
.primary-menu .is-current > a,
.primary-menu .current-menu-item > a {
	color: #fff;
	background: var(--c-logo-lila);
	box-shadow: 0 4px 10px -3px rgba(61, 47, 140, 0.45);
}
.primary-menu .is-current > a:hover,
.primary-menu .current-menu-item > a:hover {
	background: var(--c-logo-lila);
	color: #fff;
}

.submenu {
	list-style: none; padding: var(--s-2); margin: 0;
	position: absolute; top: 100%; left: 0;
	background: var(--c-surface);
	box-shadow: var(--shadow); border-radius: var(--radius);
	min-width: 14rem;
	opacity: 0; pointer-events: none; transform: translateY(4px);
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.primary-menu li:hover > .submenu,
.primary-menu li:focus-within > .submenu { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* —————— Header CTA button —————— */
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.btn--header-cta {
	border-radius: 999px;
	padding: 0.8rem 1.5rem;
	font-size: 0.95rem;
	gap: 0.5rem;
	box-shadow: 0 4px 14px -4px rgba(232, 90, 44, 0.45);
	min-height: 0; /* override global min-height: 44px to keep header tight */
}
.btn--header-cta:hover, .btn--header-cta:focus-visible {
	box-shadow: 0 10px 22px -4px rgba(232, 90, 44, 0.55);
}
.btn--header-cta svg { transition: transform var(--t-fast) var(--ease); }
.btn--header-cta:hover svg { transform: translateX(3px); }

/* —————— Mobile nav toggle —————— */
.nav-toggle {
	display: none;
	flex-direction: column; gap: 4px;
	background: transparent; border: 0; padding: 0.5rem;
	cursor: pointer;
}
.nav-toggle__bar {
	width: 26px; height: 2.5px;
	background: var(--c-ink);
	border-radius: 2px;
	transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* —————— Tablet & Mobile —————— */
@media (max-width: 64rem) {
	.primary-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: saturate(180%) blur(20px);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		border-top: 1px solid var(--c-line);
		box-shadow: 0 18px 40px -16px rgba(31, 31, 31, 0.25);
		padding: var(--s-3) var(--s-4) var(--s-5);
		animation: nav-slide-in 240ms var(--ease) both;
	}
	.primary-nav[data-open="true"] { display: block; }
	.primary-menu { flex-direction: column; gap: 0; }
	.primary-menu li { width: 100%; }
	.primary-menu a {
		display: flex; width: 100%; justify-content: flex-start;
		padding: var(--s-3) var(--s-4);
		font-size: 1.05rem;
		border-radius: var(--radius);
		color: var(--c-ink);
	}
	@keyframes nav-slide-in {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: none; }
	}
	@media (prefers-reduced-motion: reduce) { .primary-nav { animation: none; } }

	.nav-toggle { display: inline-flex; }
	.btn--header-cta { padding: 0.5rem 0.85rem; font-size: 0.875rem; }
}

/* —————— Mobile (≤ 36rem) — stack header on two rows ——————
 * Row 1: [logo] ━━━━━━━━ [CTA]
 * Row 2:        [ ≡ menu trigger ]
 *
 * Uses CSS Grid + display:contents on .header-actions so the button and
 * the toggle (which live in the same DOM wrapper) can be placed into
 * separate grid cells. Generous gaps + a subtle hairline above the
 * toggle so the eye reads the two rows as distinct, not stacked.        */
@media (max-width: 36rem) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"logo    cta"
			"toggle  toggle";
		row-gap: var(--s-4);
		column-gap: var(--s-5);
		height: auto;
		padding-block: var(--s-4) var(--s-3);
		align-items: center;
	}
	.site-branding { grid-area: logo; }
	.site-logo img, .custom-logo-link img { max-height: 44px; }

	.header-actions { display: contents; }
	.btn--header-cta {
		grid-area: cta;
		justify-self: end;
		padding: 0.45rem 0.95rem;
		font-size: 0.78rem;
		gap: 0.4rem;
		box-shadow: 0 3px 10px -3px rgba(232, 90, 44, 0.45);
	}
	.btn--header-cta svg { width: 14px; height: 14px; }

	.nav-toggle {
		grid-area: toggle;
		justify-self: center;
		margin-top: var(--s-2);
		padding: 0.55rem 1.6rem;
		border-radius: 999px;
		background: rgba(31, 31, 31, 0.045);
		position: relative;
	}
	.nav-toggle:hover { background: rgba(31, 31, 31, 0.08); }
	/* Hairline above the toggle, spanning the full container width, so the
	 * two rows feel deliberately separated rather than stacked. */
	.nav-toggle::before {
		content: "";
		position: absolute;
		left: 50%; transform: translateX(-50%);
		top: calc(-1 * var(--s-2));
		width: calc(100vw - var(--s-5) * 2);
		max-width: 22rem;
		height: 1px;
		background: var(--c-line);
	}

	/* (Utility-bar mobile styling already handled at the 48rem breakpoint
	 * above — including height:auto so the column-stacked rows don't get
	 * clipped into the header below.) */
}

/* ---------- 6. Hero ---------- */
.hero-carousel {
	position: relative; isolation: isolate;
	width: 100vw; margin-left: calc(50% - 50vw);
	height: clamp(360px, 70vh, 720px);
	overflow: hidden; background: var(--c-ink);
}
.hero-carousel__viewport { position: absolute; inset: 0; }
.hero-carousel__track { list-style: none; margin: 0; padding: 0; height: 100%; }
.hero-carousel__slide {
	position: absolute; inset: 0;
	opacity: 0; pointer-events: none; visibility: hidden;
	transition: opacity 800ms var(--ease);
}
.hero-carousel__slide.is-active { opacity: 1; pointer-events: auto; visibility: visible; }
.hero-carousel__image {
	width: 100%; height: 100%; object-fit: cover; object-position: center;
	display: block;
}
.hero-carousel__overlay {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end;
	background: linear-gradient(180deg, rgba(15,15,15,.10) 0%, rgba(15,15,15,.55) 70%, rgba(15,15,15,.85) 100%);
	padding-bottom: clamp(2rem, 6vh, 4rem);
}
.hero-carousel__caption { color: #fff; max-width: 56ch; }
.hero-carousel__title {
	color: #fff; font-size: clamp(1.75rem, 4.5vw, 3rem);
	line-height: 1.15; margin-bottom: var(--s-2);
	text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.hero-carousel__lead {
	color: #f1f1f1; font-size: clamp(1rem, 1.6vw, 1.2rem);
	margin-bottom: var(--s-4);
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.hero-carousel__cta { display: inline-flex; }

.hero-carousel__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 48px; height: 48px; border-radius: 50%;
	border: 0; background: rgba(255,255,255,.18); color: #fff;
	display: grid; place-items: center; cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.hero-carousel__nav:hover, .hero-carousel__nav:focus-visible { background: rgba(255,255,255,.32); }
.hero-carousel__nav svg { width: 24px; height: 24px; }
.hero-carousel__nav--prev { left: var(--s-4); }
.hero-carousel__nav--next { right: var(--s-4); }

.hero-carousel__dots {
	position: absolute; left: 50%; bottom: var(--s-3); transform: translateX(-50%);
	display: flex; gap: 4px; z-index: 2;
}
/* The button itself is the full 44×44 touch target (WCAG 2.5.5 / 2.5.8).
 * The visible "dot" is a 12×12 ::before centred inside. Old approach used a
 * 10×10 button + invisible ::before for hit-area, but Lighthouse can't see
 * the pseudo-element and flagged it as a small target — and the invisible
 * hit-zones overlapped each other, which is also a violation. */
.hero-carousel__dot {
	position: relative;
	width: 44px; height: 44px;
	border: 0; padding: 0; background: transparent;
	cursor: pointer;
	display: grid; place-items: center;
}
.hero-carousel__dot::before {
	content: ""; display: block;
	width: 12px; height: 12px; border-radius: 50%;
	border: 2px solid #fff; background: transparent;
	transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero-carousel__dot.is-active::before {
	background: var(--c-primary); border-color: var(--c-primary); transform: scale(1.2);
}
.hero-carousel__dot:hover::before { background: #fff; }
.hero-carousel__dot:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 50%; }

.hero-carousel__playpause {
	position: absolute; right: var(--s-4); bottom: var(--s-4);
	width: 44px; height: 44px; border-radius: 50%; /* WCAG 2.5.5 minimum target */
	border: 0; background: rgba(255,255,255,.18); color: #fff;
	cursor: pointer; font-size: 1rem;
	backdrop-filter: blur(6px);
	display: grid; place-items: center;
}
.hero-carousel__playpause:hover, .hero-carousel__playpause:focus-visible { background: rgba(255,255,255,.32); }

@media (max-width: 48rem) {
	.hero-carousel { height: clamp(280px, 60vh, 480px); }
	.hero-carousel__nav { width: 40px; height: 40px; }
	.hero-carousel__nav--prev { left: var(--s-2); }
	.hero-carousel__nav--next { right: var(--s-2); }
	/* Push caption text inward on mobile so it never sits underneath the
	 * absolutely-positioned prev/next arrows. The arrows occupy roughly
	 * 16–56 px from each side; padding of 56 px keeps the title's first
	 * letter from disappearing behind the prev arrow. */
	.hero-carousel__caption { padding-inline: 56px; }
}

/* Tighter phones — drop the arrow nav entirely so the caption can use the
 * full width. Swipe + dots remain available, which is the convention on
 * touch devices anyway. */
@media (max-width: 30rem) {
	.hero-carousel__nav { display: none; }
	.hero-carousel__caption { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-carousel__slide { transition: none; }
}

/* Static fallback hero (kept for non-front pages or if slider option is empty) */
.hero {
	background:
		radial-gradient(60% 90% at 80% 10%, rgba(232,90,44,.10), transparent 60%),
		linear-gradient(180deg, var(--c-sand), var(--c-surface));
	padding-block: clamp(3rem, 6vw, 5rem);
}
.hero__inner { display: flex; flex-direction: column; gap: var(--s-4); max-width: 64ch; }
.hero__eyebrow {
	display: inline-flex; align-items: center; gap: var(--s-2);
	font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--c-primary-dark);
}
.hero__eyebrow::before {
	content: ""; width: 28px; height: 2px; background: var(--c-primary);
}
.hero__title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; }
.hero__lead  { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--c-ink-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* ---------- 5b. Page hero — banner image on every sub-page ---------- */
.page-hero {
	position: relative;
	width: 100%;
	height: var(--page-hero-height, 360px);
	min-height: var(--page-hero-height, 360px);
	max-height: var(--page-hero-height, 360px);
	box-sizing: border-box;
	overflow: hidden;
	/* Light sand placeholder — visible only for the few ms before the
	   preloaded image paints. Matches the overall page palette so the
	   dark-flash perception is gone. */
	background-color: var(--c-sand);
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
	color: #fff;
	isolation: isolate;
}
.page-hero--no-image {
	background-color: var(--c-ink);
	background-image:
		radial-gradient(60% 80% at 10% 20%, rgba(232,90,44,.30), transparent 65%),
		linear-gradient(180deg, #2a2a2a 0%, var(--c-ink) 100%);
}
.page-hero__shade {
	position: absolute; inset: 0;
	background: linear-gradient(
		180deg,
		rgba(15, 15, 15, calc(var(--page-hero-overlay, 0.55) * 0.6)) 0%,
		rgba(15, 15, 15, var(--page-hero-overlay, 0.55)) 100%
	);
	z-index: 1;
}
.page-hero__inner {
	position: relative; z-index: 2;
	height: 100%;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding-block: var(--s-5);
	gap: var(--s-3);
}

.page-hero__crumbs { color: rgba(255, 255, 255, 0.85); }
.page-hero__crumbs .breadcrumbs ol { color: rgba(255, 255, 255, 0.75); }
.page-hero__crumbs .breadcrumbs a { color: rgba(255, 255, 255, 0.85); }
.page-hero__crumbs .breadcrumbs a:hover { color: #fff; }
.page-hero__crumbs .breadcrumbs [aria-current="page"] { color: #fff; }
.page-hero__crumbs .breadcrumbs li + li::before { color: rgba(255, 255, 255, 0.45); }

.page-hero__kicker {
	display: inline-flex; align-items: center; gap: 0.5rem;
	color: #ffd9c6;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.page-hero__kicker::before {
	content: "";
	width: 28px; height: 2px;
	background: var(--c-primary);
	display: inline-block;
}

.page-hero__title {
	color: #fff;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	margin: 0;
	max-width: 36ch;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	letter-spacing: -0.01em;
}

@media (max-width: 48rem) {
	.page-hero { height: max(280px, calc(var(--page-hero-height, 360px) * 0.7)); }
}
@media print {
	.page-hero__bg, .page-hero__shade { display: none; }
	.page-hero { background: none; color: var(--c-ink); height: auto; min-height: 0; }
	.page-hero__title { color: var(--c-ink); text-shadow: none; }
	.page-hero__kicker { color: var(--c-ink-muted); text-shadow: none; }
}

/* ---------- 6a-1. Front-page: Hero-Intro section ---------- */
.home-intro {
	padding-block: clamp(var(--s-6), 7vw, var(--s-8));
	background: var(--c-surface);
}
.home-intro__inner {
	display: grid;
	gap: var(--s-5);
	max-width: 70rem;
}
@media (min-width: 60rem) {
	.home-intro__inner { grid-template-columns: 1fr 1.5fr; gap: var(--s-7); }
}
.home-intro__eyebrow {
	color: var(--c-primary-dark);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 700;
	margin: 0 0 var(--s-2);
}
.home-intro__title {
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
	line-height: 1.15;
	margin: 0;
	color: var(--c-ink);
}
.home-intro__body p {
	color: var(--c-ink-muted);
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0 0 var(--s-3);
}
.home-intro__body p:last-child { margin-bottom: 0; color: var(--c-ink); }

/* ---------- 6a-2. Front-page: "Warum Tewoort?" 9-bullet list ---------- */
.why-tewoort {
	padding-block: clamp(var(--s-6), 7vw, var(--s-8));
	background: var(--c-sand);
}
.why-tewoort__list {
	list-style: none;
	padding: 0;
	margin: var(--s-5) 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-3) var(--s-5);
}
@media (min-width: 40rem) {
	.why-tewoort__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
	.why-tewoort__list { grid-template-columns: repeat(3, 1fr); }
}
.why-tewoort__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	color: var(--c-ink);
	font-size: 1rem;
	line-height: 1.45;
	padding: var(--s-2) 0;
}
.why-tewoort__list svg {
	flex-shrink: 0;
	width: 22px; height: 22px;
	color: var(--c-primary-dark);
	margin-top: 1px;
}

/* ---------- 6a-3. Front-page: CTA-Karussell ---------- */
.cta-carousel {
	padding-block: clamp(var(--s-6), 7vw, var(--s-8));
	background: var(--c-surface);
}
.cta-carousel__viewport {
	position: relative;
	background: linear-gradient(135deg, var(--c-primary-soft), color-mix(in srgb, var(--c-primary-soft) 30%, var(--c-surface)));
	border-radius: var(--radius-lg);
	padding: clamp(var(--s-5), 5vw, var(--s-7)) clamp(var(--s-5), 5vw, var(--s-7)) clamp(var(--s-6), 6vw, var(--s-8));
	overflow: hidden;
	max-width: 56rem;
	margin: 0 auto;
}
.cta-carousel__track {
	position: relative;
	min-height: 11rem;
}
.cta-carousel__slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	align-items: flex-start;
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	transition: opacity 400ms var(--ease), transform 400ms var(--ease);
	pointer-events: none;
}
.cta-carousel__slide.is-active {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	position: relative;
}
.cta-carousel__title {
	margin: 0;
	font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
	color: var(--c-ink);
	line-height: 1.25;
}
.cta-carousel__lead {
	margin: 0;
	color: var(--c-ink-muted);
	font-size: 1.05rem;
	line-height: 1.55;
}
.cta-carousel__cta {
	margin-top: var(--s-2);
}
.cta-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: var(--s-3);
	transform: translateX(-50%);
	display: flex;
	gap: 4px;
}
.cta-carousel__dot {
	width: 44px; height: 44px;
	border: 0; padding: 0; background: transparent;
	cursor: pointer;
	display: grid; place-items: center;
	position: relative;
}
.cta-carousel__dot::before {
	content: "";
	width: 10px; height: 10px;
	border-radius: 50%;
	border: 2px solid var(--c-primary);
	background: transparent;
	transition: background-color var(--t-fast) var(--ease);
}
.cta-carousel__dot.is-active::before {
	background: var(--c-primary);
}
.cta-carousel__dot:hover::before { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.cta-carousel__dot:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -4px; border-radius: 50%; }


/* ---------- 6b. Section heads ---------- */
.section-head { margin-bottom: var(--s-6); max-width: 64ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; max-width: 100%; }
.section-head__eyebrow {
	display: inline-flex; align-items: center; gap: var(--s-2);
	color: var(--c-primary-dark); font-weight: 600;
	font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em;
	margin-bottom: var(--s-2);
}
.section-head__eyebrow::before {
	content: ""; width: 28px; height: 2px; background: var(--c-primary);
}
.section-head--center .section-head__eyebrow { justify-content: center; }
.section-head__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 var(--s-3);
}
.section-head__lead {
	color: var(--c-ink-muted);
	font-size: 1.1rem;
	margin: 0;
}

/* ---------- 6c. Reveal-on-scroll (CSS-only, modern browsers) ----------
 *
 * The reveal uses ONLY transform (slide-up) — NOT opacity. An opacity fade
 * looks nice but breaks Lighthouse / axe-core contrast audits: at any mid-
 * animation frame the element sits at e.g. opacity 0.69, which dramatically
 * reduces the effective contrast ratio the audit calculates against the
 * underlying background. The contrast check then fails for elements like
 * .usp-card__title even though the *final* contrast (16:1) is fine.
 *
 * Slide-up alone still gives the "appears" feeling. Cards never spend any
 * time at reduced visibility — their colour is at full strength the whole
 * scroll-reveal duration. */
@supports (animation-timeline: view()) {
	.usp-card, .service-tile, .process-step, .stat, .masonry-item, .testimonial__quote {
		animation: tw-reveal-up linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}
}
@keyframes tw-reveal-up {
	from { transform: translateY(24px); }
	to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.usp-card, .service-tile, .process-step, .stat, .masonry-item, .testimonial__quote {
		animation: none !important; transform: none !important;
	}
}

/* ---------- 7. Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: var(--s-2);
	padding: 0.75rem 1.25rem; border-radius: var(--radius);
	font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
	border: 2px solid transparent;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
	min-height: 44px; /* hit target */
}
.btn:active { transform: translateY(1px); }
/* Primary button: uses --c-primary-dark (5.4:1 on white) rather than the
 * brand orange --c-primary (3.5:1), because white text on the brand orange
 * fails WCAG AA for normal-size text. Hover state goes one notch darker
 * for clear feedback. The brand orange stays in other UI roles where it
 * doesn't need to pass text-contrast (dot indicators, accent strips). */
.btn--primary { background: var(--c-primary-dark); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: #8a3217; color: #fff; }
.btn--ghost   { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--c-ink); color: #fff; }
.btn--ghost-light { color: #fff; border-color: #fff; }
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { background: #fff; color: var(--c-ink); }
.btn--lg { padding: 1rem 1.5rem; font-size: 1.05rem; }
.btn svg { flex-shrink: 0; }

/* ============ Front-page sections (USP, services-v2, process, stats, masonry, testimonial, call-cta) ============ */

/* USP strip — sits right below the hero */
.usp-strip {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	padding-block: clamp(var(--s-4), 4vw, var(--s-5));
}
.usp-strip__grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.usp-card {
	display: flex; align-items: flex-start; gap: var(--s-3);
	background: var(--c-surface);
	color: var(--c-ink);
	/* Explicit background so axe-core's contrast walker can resolve the
	 * effective background colour without ambiguity (some Lighthouse runs
	 * mis-detect transparent backgrounds when a card overlaps the hero). */
}
.usp-card__icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--c-primary-dark); }
.usp-card__title { font-weight: 700; color: var(--c-ink); margin: 0 0 2px; font-size: 0.95rem; }
.usp-card__lead  { color: var(--c-ink-muted); margin: 0; font-size: 0.875rem; }
/* --c-ink-muted = #424242 → 9.7:1 on white. Was --c-ink-subtle (6.9:1).
 * Both pass AA, but Lighthouse occasionally measures lead text against
 * the wrong (hero) ancestor, so we promote contrast to be safe. */

/* Services v2 — numbered tiles, hover reveal */
.services-v2 { padding-block: clamp(var(--s-7), 8vw, var(--s-9)); background: var(--c-surface); }
.services-v2__grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: var(--s-4);
	/* 6 service tiles — explicit 1/2/3-column breakpoints so the grid
	 * always lays out as a tidy rectangle (1×6 mobile, 2×3 tablet, 3×2
	 * desktop) instead of the auto-fit 4+2 split that wastes space. */
	grid-template-columns: 1fr;
}
@media (min-width: 36rem) {
	.services-v2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
	.services-v2__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-tile {
	position: relative;
	border-radius: var(--radius-lg);
	background: var(--c-sand);
	overflow: clip;
	transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.service-tile::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
	opacity: 0; transition: opacity var(--t-base) var(--ease);
	border-radius: inherit;
}
.service-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-tile:hover::before { opacity: 1; }
.service-tile__link {
	position: relative; display: flex; flex-direction: column; gap: var(--s-3);
	padding: var(--s-5) var(--s-5) var(--s-6);
	text-decoration: none; color: var(--c-ink);
	min-height: 100%;
	transition: color var(--t-base) var(--ease);
}
.service-tile:hover .service-tile__link,
.service-tile:hover .service-tile__title,
.service-tile:hover .service-tile__lead,
.service-tile:hover .service-tile__bullets li,
.service-tile:hover .service-tile__num,
.service-tile:hover .service-tile__more { color: #fff; }
.service-tile:hover .service-tile__icon { color: rgba(255,255,255,.85); }
.service-tile:hover .service-tile__bullets li::before { color: #fff; }

.service-tile__num {
	font-family: var(--ff-system);
	font-weight: 800; font-size: 2.25rem; line-height: 1;
	color: var(--c-primary);
	letter-spacing: -0.02em;
	opacity: 0.5;
	transition: color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.service-tile:hover .service-tile__num { opacity: 0.7; }
.service-tile__icon { width: 56px; height: 56px; color: var(--c-primary); transition: color var(--t-base) var(--ease); }
.service-tile__icon svg { width: 100%; height: 100%; }
.service-tile__title { color: var(--c-ink); margin: 0; font-size: 1.25rem; }
.service-tile__lead  { color: var(--c-ink-muted); margin: 0; font-size: 0.95rem; }
.service-tile__bullets {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: var(--s-1);
}
.service-tile__bullets li {
	position: relative; padding-left: 1.25rem;
	color: var(--c-ink-muted); font-size: 0.9rem;
}
.service-tile__bullets li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	color: var(--c-primary); font-weight: 700;
}
.service-tile__more {
	display: inline-flex; align-items: center; gap: var(--s-2);
	font-weight: 600; color: var(--c-primary-dark);
	margin-top: auto;
}
.service-tile__more svg { transition: transform var(--t-fast) var(--ease); }
.service-tile:hover .service-tile__more svg { transform: translateX(4px); }

/* Process — 4 step horizontal with connector */
.process { padding-block: clamp(var(--s-7), 8vw, var(--s-9)); background: var(--c-sand); }
.process__steps {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: var(--s-5);
	grid-template-columns: 1fr;
	counter-reset: step;
	position: relative;
}
@media (min-width: 48rem) {
	.process__steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
	/* Connector line behind the numbers */
	.process__steps::before {
		content: ""; position: absolute;
		top: 28px; left: 12.5%; right: 12.5%;
		height: 2px;
		background: repeating-linear-gradient(90deg, var(--c-primary) 0 8px, transparent 8px 16px);
		z-index: 0;
	}
}
.process-step { position: relative; text-align: center; padding: 0 var(--s-2); }
.process-step__num {
	display: inline-grid; place-items: center;
	width: 56px; height: 56px;
	background: var(--c-primary); color: #fff;
	border-radius: 50%; font-weight: 800; font-size: 1.5rem;
	box-shadow: 0 0 0 8px var(--c-sand);
	position: relative; z-index: 1;
	margin-bottom: var(--s-3);
}
.process-step__title { margin: 0 0 var(--s-2); font-size: 1.1rem; }
.process-step__desc  { color: var(--c-ink-muted); font-size: 0.95rem; margin: 0; }

/* Stats banner — dark contrast block */
.stats-banner {
	padding-block: clamp(var(--s-6), 6vw, var(--s-7));
	background: var(--c-ink);
	color: #fff;
	background-image:
		radial-gradient(60% 80% at 10% 20%, rgba(232,90,44,.18), transparent 60%),
		radial-gradient(40% 60% at 90% 80%, rgba(232,90,44,.10), transparent 60%);
}
.stats-banner__grid {
	display: grid; gap: var(--s-5);
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
}
@media (min-width: 48rem) {
	.stats-banner__grid { grid-template-columns: repeat(4, 1fr); }
}
.stat { text-align: center; padding: var(--s-2); }
.stat__value {
	display: flex; justify-content: center; align-items: baseline;
	font-weight: 800; font-size: clamp(2.5rem, 6vw, 3.75rem);
	line-height: 1;
	background: linear-gradient(135deg, #ffd1bd 0%, var(--c-primary) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	margin: 0 0 var(--s-2);
	letter-spacing: -0.02em;
}
.stat__unit { font-size: 0.7em; color: var(--c-primary); -webkit-text-fill-color: var(--c-primary); margin-left: 2px; }
.stat__label { color: #d0d0d0; font-size: 0.95rem; margin: 0; }

/* ============ Tradition + Kontakt&Service-Card (mirrors original layout) ============ */
.tradition-contact {
	padding-block: clamp(var(--s-7), 8vw, var(--s-9));
	background: var(--c-sand);
	/* subtle top + bottom edge so the section reads as its own band */
	border-block: 1px solid var(--c-line);
}
.tradition-contact__grid {
	display: grid; gap: var(--s-6);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 60rem) {
	.tradition-contact__grid { grid-template-columns: 1.3fr 1fr; gap: var(--s-7); }
}

.tradition-contact__text { max-width: 60ch; }
.tradition-contact__text .section-head__eyebrow { margin-bottom: var(--s-3); }
.tradition-contact__title {
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	margin: 0 0 var(--s-4);
	letter-spacing: -0.01em;
}
.tradition-contact__title-accent {
	display: block;
	color: var(--c-primary);
}
.tradition-contact__subtitle {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	color: var(--c-ink);
	margin: 0 0 var(--s-4);
}
.tradition-contact__lead {
	color: var(--c-ink-muted);
	font-size: 1.05rem; line-height: 1.65;
	margin: 0 0 var(--s-5);
}
.tradition-contact__lead strong { color: var(--c-ink); }

/* Dark button variant — matches the original CTA appearance */
.btn--dark {
	background: var(--c-ink); color: #fff; border-color: var(--c-ink);
	border-radius: 999px;
	padding: 0.875rem 1.75rem;
}
.btn--dark:hover, .btn--dark:focus-visible { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* Kontakt & Service card
 *
 * Used in two contexts:
 *   - Front page (next to the Tradition block) — sticks to the viewport
 *     so opening hours stay visible while scrolling.
 *   - Kontakt page (inside .kontakt-grid, 3 cards side-by-side) — must
 *     NOT stick or the cards drift over each other.
 *
 * The default rule below applies to the Kontakt-Page context. The front-
 * page sticky behaviour gets re-attached via .tradition-contact .kontakt-card. */
.kontakt-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: clamp(var(--s-5), 4vw, var(--s-6));
}
.tradition-contact .kontakt-card {
	position: sticky; top: 6rem;
}

/* 3-column grid for the Kontakt page (Adresse / Öffnungszeiten / Ansprechpartner) */
.kontakt-grid {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: 1fr;
	margin-block: var(--s-5) var(--s-6);
}
@media (min-width: 48rem) {
	.kontakt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kontakt-grid .kontakt-card { margin: 0; }
.kontakt-grid .kontakt-card h2 { font-size: 1.15rem; margin: 0 0 var(--s-3); color: var(--c-ink); }
.kontakt-grid .kontakt-card p { margin: 0 0 var(--s-2); color: var(--c-ink); }
.kontakt-grid .kontakt-card ul { margin: 0; padding: 0; list-style: none; }
.kontakt-grid .kontakt-card ul li { padding: var(--s-1) 0; border-bottom: 1px solid var(--c-line); }
.kontakt-grid .kontakt-card ul li:last-child { border-bottom: 0; }
.kontakt-grid .kontakt-card ul a { color: var(--c-primary-dark); text-decoration: none; }
.kontakt-grid .kontakt-card ul a:hover { text-decoration: underline; }

/* Öffnungszeiten — definition list with label/value rows.
 * Using <dl> + <div class="…__row"><dt><dd> is the standard pattern
 * because <dl> doesn't allow direct grid layout (mixed dt/dd children
 * don't pair up cleanly). The .__row wrapper gives us tidy 2-column
 * rows that stay aligned. */
.kontakt-hours {
	margin: 0 0 var(--s-3);
	padding: 0;
	display: grid;
	gap: var(--s-2);
}
.kontakt-hours__row {
	display: grid;
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap: var(--s-3);
	align-items: baseline;
	padding-block: var(--s-1);
	border-bottom: 1px solid var(--c-line);
}
.kontakt-hours__row:last-child { border-bottom: 0; }
.kontakt-hours dt {
	font-weight: 600;
	color: var(--c-ink);
	white-space: nowrap;
}
.kontakt-hours dd {
	margin: 0;
	color: var(--c-ink);
	white-space: nowrap; /* hold "07:30 – 17:00 Uhr" on one line */
}
.kontakt-card__note {
	font-size: 0.875rem;
	color: var(--c-ink-muted);
	margin: var(--s-2) 0 0;
}

/* Compact portraits in the "Ansprechpartner"-Card on the Kontakt page.
 * Deliberately uses its own class (.ansprechpartner) instead of the
 * legacy .wp-caption markup so the inc/team.php filter — which targets
 * wp-caption figures on /kontakt and /das-team — does not transform
 * these into the large .team-card rendering used on the Team page. */
.ansprechpartner-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin: 0;
}
.ansprechpartner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.ansprechpartner__img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	border: 2px solid var(--c-line);
	box-shadow: 0 4px 12px -6px rgba(31, 31, 31, 0.18);
}
.ansprechpartner__name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--c-ink);
	text-align: center;
	line-height: 1.3;
}
.kontakt-card__title {
	font-size: 1.5rem; margin: 0 0 var(--s-5); color: var(--c-ink);
}
.kontakt-card__list {
	list-style: none; padding: 0; margin: 0 0 var(--s-5);
	display: flex; flex-direction: column; gap: var(--s-3);
}
.kontakt-card__list li {
	display: flex; align-items: center; gap: var(--s-3);
}
.kontakt-card__icon {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	background: var(--c-primary-soft); color: var(--c-primary-dark);
	border-radius: 50%;
	flex-shrink: 0;
}
.kontakt-card__icon--inline {
	width: 26px; height: 26px; background: transparent; color: var(--c-primary);
}
.kontakt-card__icon svg { width: 20px; height: 20px; }
.kontakt-card__icon--inline svg { width: 22px; height: 22px; }
.kontakt-card__list a {
	color: var(--c-primary-dark); font-weight: 600; text-decoration: none;
	word-break: break-word;
}
.kontakt-card__list a:hover { color: var(--c-primary-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.kontakt-card__hours {
	background: var(--c-sand);
	border-radius: var(--radius);
	padding: var(--s-4);
}
.kontakt-card__hours-title {
	display: flex; align-items: center; gap: var(--s-2);
	font-size: 1rem; margin: 0 0 var(--s-3); color: var(--c-ink);
}
.kontakt-card__hours-list {
	margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: var(--s-2);
}
.kontakt-card__hours-list > div {
	display: grid; grid-template-columns: 1fr auto; gap: var(--s-3);
	padding-block: var(--s-1);
	border-bottom: 1px dashed var(--c-line);
}
.kontakt-card__hours-list > div:last-child { border-bottom: 0; }
.kontakt-card__hours-list dt { color: var(--c-ink); font-weight: 600; margin: 0; }
.kontakt-card__hours-list dd { color: var(--c-ink-muted); margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* On mobile, drop the sticky behaviour so the card doesn't get pinned to the
   top during scroll — it can sit naturally below the text. */
@media (max-width: 60rem) {
	.kontakt-card { position: static; }
}

/* ============ Google reviews — workshop photo + reviews card ============ */
.reviews {
	padding-block: clamp(var(--s-7), 8vw, var(--s-9));
	background: var(--c-sand);
}
.reviews__grid {
	display: grid; gap: var(--s-5);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 60rem) {
	.reviews__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-7); }
}
.reviews__media {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: clip;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 3;
	background: var(--c-sand-strong);
}
.reviews__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.reviews__card {
	background: var(--c-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: clamp(var(--s-5), 4vw, var(--s-6));
}
.reviews__title { margin: 0 0 var(--s-2); font-size: 1.65rem; color: var(--c-ink); }
.reviews__sub   { margin: 0 0 var(--s-4); color: var(--c-ink-subtle); font-size: 1rem; }
.reviews__rating {
	display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
	margin-bottom: var(--s-4);
	font-size: 1.05rem;
}
.reviews__score { color: var(--c-ink); font-weight: 800; font-size: 1.25rem; }
.reviews__stars { color: #FFB400; letter-spacing: 0.05em; font-size: 1.25rem; }
.reviews__count { color: var(--c-ink-subtle); }
.reviews__lead  { color: var(--c-ink-muted); margin: 0 0 var(--s-5); line-height: 1.65; }
.reviews__card .btn svg { margin-right: var(--s-2); }

/* ============ Specialty — Helicopter & Special orders (2-card highlight) ============ */
.specialty {
	padding-block: clamp(var(--s-7), 8vw, var(--s-9));
	background: var(--c-surface);
}
.specialty__grid {
	display: grid; gap: var(--s-5);
	grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
	.specialty__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
.specialty-card {
	background: var(--c-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	border-left: 5px solid var(--c-primary);
	padding: clamp(var(--s-5), 4vw, var(--s-6));
	display: flex; flex-direction: column; gap: var(--s-4);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.specialty-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.specialty-card__head { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.specialty-card__icon {
	display: grid; place-items: center;
	width: 56px; height: 56px;
	background: var(--c-primary-soft); color: var(--c-primary-dark);
	border-radius: var(--radius);
	flex-shrink: 0;
}
.specialty-card__icon svg { width: 32px; height: 32px; }
.specialty-card__title {
	font-size: clamp(1.25rem, 2.5vw, 1.65rem);
	margin: 0;
	color: var(--c-ink);
	line-height: 1.2;
}

.specialty-card__lead { margin: 0; color: var(--c-ink-muted); line-height: 1.65; }
.specialty-card__body { margin: 0; color: var(--c-ink-muted); line-height: 1.65; }
.specialty-card__lead strong, .specialty-card__body strong { color: var(--c-ink); }

.specialty-card__bullets {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: var(--s-2);
}
.specialty-card__bullets li {
	position: relative; padding-left: 2rem;
	color: var(--c-ink);
}
.specialty-card__bullets li::before {
	content: "→";
	position: absolute; left: 0; top: 0;
	color: var(--c-primary);
	font-weight: 700;
	font-size: 1.2rem;
}

.specialty-card__cta { align-self: flex-start; margin-top: var(--s-2); }
.specialty-card__cta svg { margin-left: var(--s-1); transition: transform var(--t-fast) var(--ease); }
.specialty-card__cta:hover svg { transform: translateX(3px); }

.specialty-card__badge {
	margin-top: auto;
	display: flex; align-items: center; gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	background: var(--c-sand);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	color: var(--c-ink-muted);
	font-size: 0.9rem;
}
.specialty-card__badge svg { width: 20px; height: 20px; color: var(--c-primary); flex-shrink: 0; }
.specialty-card__badge strong { color: var(--c-ink); font-weight: 600; }

/* Masonry-like project grid (7 items) */
.recent-projects-v2 { padding-block: clamp(var(--s-7), 8vw, var(--s-9)); background: var(--c-sand); }
.masonry-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: var(--s-4);
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	.masonry-grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 200px;
		grid-auto-flow: dense;
	}
	.masonry-item--1 { grid-column: span 2; grid-row: span 2; }
	.masonry-item--2 { grid-column: span 1; grid-row: span 1; }
	.masonry-item--3 { grid-column: span 1; grid-row: span 2; }
	.masonry-item--4 { grid-column: span 1; grid-row: span 1; }
	.masonry-item--5 { grid-column: span 2; grid-row: span 1; }
	.masonry-item--6 { grid-column: span 1; grid-row: span 1; }
	.masonry-item--7 { grid-column: span 2; grid-row: span 1; }
}
.masonry-card {
	position: relative; display: block; height: 100%;
	border-radius: var(--radius-lg); overflow: clip;
	background: var(--c-ink);
}
.masonry-card__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 500ms var(--ease), opacity 300ms var(--ease);
}
.masonry-card:hover .masonry-card__img { transform: scale(1.06); opacity: 0.75; }
.masonry-card__overlay {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end;
	padding: var(--s-4);
	background: linear-gradient(180deg, transparent 50%, rgba(15,15,15,.85) 100%);
	color: #fff;
}
.masonry-card__title {
	color: #fff; font-size: 1.05rem; margin: 0;
	transition: transform var(--t-base) var(--ease);
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.masonry-card:hover .masonry-card__title { transform: translateY(-4px); }

/* Testimonial — single quote, large, calm */
.testimonial {
	padding-block: clamp(var(--s-7), 8vw, var(--s-9));
	background: var(--c-surface);
}
.testimonial__quote {
	position: relative; margin: 0;
	padding: var(--s-6) var(--s-4);
	text-align: center;
}
.testimonial__mark {
	width: 56px; height: 42px; color: var(--c-primary-soft);
	margin-bottom: var(--s-4); display: inline-block;
}
.testimonial__text {
	font-family: Georgia, Cambria, "Times New Roman", serif;
	font-size: clamp(1.25rem, 2.4vw, 1.65rem);
	font-style: italic; line-height: 1.5;
	color: var(--c-ink);
	margin: 0 0 var(--s-5);
	padding: 0; border: 0;
}
.testimonial__text p { margin: 0; }
.testimonial__author {
	display: flex; flex-direction: column; gap: 2px;
	font-style: normal;
}
.testimonial__author strong { color: var(--c-ink); font-size: 1.05rem; }
.testimonial__role { color: var(--c-ink-subtle); font-size: 0.875rem; }

/* ============ Team CTA — dark gradient band (image optional via customizer) ============ */
.team-cta {
	position: relative; isolation: isolate;
	padding-block: clamp(var(--s-7), 8vw, var(--s-9));
	background: var(--c-ink);
	color: #fff;
	background-image:
		radial-gradient(60% 80% at 10% 20%, rgba(232,90,44,.28), transparent 60%),
		radial-gradient(50% 70% at 90% 80%, rgba(232,90,44,.14), transparent 65%);
	overflow: hidden;
	margin-top: 0;
}
/* Optional background image variant — only used when the customizer/option sets one */
.team-cta--with-image { background-image: none; }
.team-cta--with-image .team-cta__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 35%;
	z-index: 0;
}
.team-cta--with-image .team-cta__shade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15,15,15,.45) 0%, rgba(15,15,15,.72) 100%);
	z-index: 1;
}

.team-cta__inner {
	position: relative; z-index: 2;
	display: grid; gap: var(--s-5);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 60rem) {
	.team-cta__inner { grid-template-columns: 1fr auto; gap: var(--s-7); }
}

.team-cta__eyebrow {
	color: var(--c-primary); font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem;
	margin: 0 0 var(--s-2);
}
.team-cta__title {
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 var(--s-2);
	max-width: 32ch;
}
.team-cta__lead { color: #d0d0d0; font-size: 1.05rem; margin: 0; }
.team-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- 8. Sections / cards ---------- */
.section-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: var(--s-5);
	position: relative; padding-bottom: var(--s-3);
}
.section-title::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 3rem; height: 3px; background: var(--c-primary);
	border-radius: 2px;
}

.services { padding-block: var(--s-8); background: var(--c-sand); }
.service-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.service-card {
	background: var(--c-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card__link {
	display: block; padding: var(--s-5);
	text-decoration: none; color: inherit; border-radius: inherit;
}
.service-card__title { color: var(--c-ink); margin-bottom: var(--s-2); }
.service-card__desc  { color: var(--c-ink-muted); margin-bottom: var(--s-3); }
.service-card__more  { color: var(--c-primary-dark); font-weight: 600; }
.service-card__link:hover .service-card__more { color: var(--c-primary); }

.recent-projects { padding-block: var(--s-8); }
.recent-projects__more { margin-top: var(--s-5); text-align: center; }

/* ---------- 9. Post grid ---------- */
.post-grid {
	display: grid; gap: var(--s-5);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin-bottom: var(--s-6);
}
.post-grid--3 { list-style: none; padding: 0; }
.post-grid--3 li { list-style: none; }

/* Equal-height row, image is constrained, body has explicit visible content area. */
.post-grid { align-items: stretch; }

/* Post-card uses the "stretched link" a11y pattern: the title is the ONLY
 * <a> inside the card, and its ::after pseudo-element covers the whole card
 * for click/touch users. The thumbnail wrapper is a hidden decorative link
 * (aria-hidden + tabindex=-1) — included for legacy semantic structure but
 * not part of the accessibility tree. The post-meta (which contains its own
 * category <a>) sits OUTSIDE any wrapping link, so the HTML is valid (no
 * nested <a> tags) and the category link is independently focusable. */
.post-card {
	position: relative;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: clip;
	display: flex; flex-direction: column;
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--c-primary-soft); }

.post-card__thumb-link {
	display: block;
	color: inherit; text-decoration: none;
}
.post-card__thumb { aspect-ratio: 3/2; background: var(--c-sand); flex-shrink: 0; overflow: hidden; }
.post-card__thumb img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 500ms var(--ease);
}
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__body {
	padding: var(--s-4);
	display: flex; flex-direction: column; gap: var(--s-2);
	flex: 1;
	min-height: 7rem;
	background: var(--c-surface);
}
.post-card__title {
	margin: 0; font-size: 1.15rem; line-height: 1.3;
	color: var(--c-ink); font-weight: 700;
}
.post-card__link {
	color: inherit; text-decoration: none;
}
.post-card__link::after {
	/* Stretched-link: make the whole card clickable without nesting links. */
	content: ""; position: absolute; inset: 0;
}
/* But links INSIDE post-meta still need to win clicks (category link). */
.post-card .post-meta a {
	position: relative; z-index: 1;
}
.post-card:hover .post-card__title, .post-card__link:hover { color: var(--c-primary-dark); }
.post-card__link:focus-visible { outline: none; }
.post-card:has(.post-card__link:focus-visible) {
	outline: 2px solid var(--c-primary);
	outline-offset: 3px;
}
.post-card__excerpt { color: var(--c-ink-muted); margin: 0; font-size: 0.95rem; }
.post-card .post-meta { font-size: 0.875rem; color: var(--c-ink-subtle); }

.post-meta { font-size: 0.875rem; color: var(--c-ink-subtle); margin: 0; }
/* Inline links in post-meta (category, author) — give them a small hit-zone
 * padding so they exceed the 24px-spacing requirement for adjacent targets. */
.post-meta a {
	display: inline-block;
	padding: 4px 2px;
	color: var(--c-primary-dark); /* 5.4:1 on white — passes AA */
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--t-fast) var(--ease);
}
.post-meta a:hover, .post-meta a:focus-visible { border-bottom-color: currentColor; }

/* Single post / page */
.single-post, .page { padding-block: var(--s-5); }
.single-title, .page-title { margin-bottom: var(--s-4); }
.page-thumb { margin: 0 0 var(--s-6); border-radius: var(--radius-lg); overflow: clip; }

.entry-content > * + * { margin-top: var(--s-4); }
.entry-content h2 { margin-top: var(--s-7); }
.entry-content h3 { margin-top: var(--s-5); }
.entry-content img, .entry-content figure { border-radius: var(--radius); }
.entry-content .wp-caption,
.entry-content figcaption { font-size: 0.875rem; color: var(--c-ink-subtle); }

.post-nav { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.post-nav a { text-decoration: none; }
.post-tags { margin-top: var(--s-5); }
.post-tags a {
	display: inline-block; padding: 0.25rem 0.625rem; margin-right: var(--s-1);
	background: var(--c-sand); color: var(--c-ink-muted); border-radius: 999px;
	font-size: 0.85rem; text-decoration: none;
}
.post-tags a:hover { background: var(--c-primary-soft); color: var(--c-ink); }

/* Pagination */
.pagination, .nav-links { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; margin-top: var(--s-6); }
.pagination a, .pagination span, .nav-links a, .nav-links span {
	padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
	border: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink);
	min-width: 44px; text-align: center;
}
.pagination .current, .nav-links .current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- 9c. Leistungen — long-form layout with sticky TOC ----------
 *
 * Used on /leistungen.html. Two-column layout on desktop:
 *   - Left column: sticky table-of-contents that scroll-tracks the body
 *   - Right column: numbered service sections, each with icon + lead + body
 *
 * On mobile the TOC collapses into a <details> element at the top, and
 * the content flows full-width.
 *
 * Anchors: each .leistungs-block has an id, so the TOC links jump to
 * deep-link targets that survive sharing. */

/* ── Leistungen-Hero ──
 *   - Soft tinted background to set the section apart
 *   - Eyebrow with a longer accent bar + small "10 Leistungen" badge
 *   - Title with the city name in primary-dark for emphasis
 *   - Lead with a stronger first paragraph
 *   - Decorative wedge at the bottom that signals "scroll for more" */
.leistungen-hero {
	margin: 0 0 var(--s-6);
	padding: var(--s-7) var(--s-5) var(--s-7);
	background:
		radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--c-primary-soft) 60%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, var(--c-sand) 0%, var(--c-surface) 100%);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
}
.leistungen-hero__head {
	margin-bottom: var(--s-5);
	position: relative;
	z-index: 1;
}
.leistungen-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--c-primary-dark);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0 0 var(--s-3);
}
.leistungen-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 56px;
	height: 3px;
	background: var(--c-primary);
	border-radius: 2px;
}
.leistungen-hero__title {
	font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--c-ink);
	max-width: 24ch;
	font-weight: 800;
}
.leistungen-hero__title em {
	font-style: normal;
	color: var(--c-primary-dark);
}
.leistungen-hero__lead {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--s-3);
}
.leistungen-hero__lead p {
	color: var(--c-ink);
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0;
}
/* Second paragraph (Versicherungs-/Ersatzfahrzeug-Hinweis) — visually
 * distinguished as an "info" note via a soft tinted background and a
 * small primary accent bar at the left edge. */
.leistungen-hero__lead p:last-child {
	background: color-mix(in srgb, var(--c-primary-soft) 55%, var(--c-surface));
	border-left: 3px solid var(--c-primary);
	border-radius: var(--radius);
	padding: var(--s-3) var(--s-4);
	color: var(--c-ink);
	font-size: 1.05rem; /* same as first paragraph for typographic consistency */
}
.leistungen-hero__lead p strong { color: var(--c-ink); font-weight: 700; }

.leistungen-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	align-items: start;
	margin-block: var(--s-5) var(--s-7);
}
@media (min-width: 60rem) {
	.leistungen-layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--s-7);
	}
}

/* ── TOC (sticky on desktop, collapsible on mobile) ────────────── */
.leistungen-toc {
	font-size: 0.95rem;
}
@media (min-width: 60rem) {
	.leistungen-toc {
		position: sticky;
		top: calc(var(--s-5));
		max-height: calc(100vh - var(--s-5) * 2);
		overflow-y: auto;
	}
	.leistungen-toc__mobile {
		border: 0;
		padding: 0;
		background: transparent;
	}
	.leistungen-toc__mobile > summary {
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--c-ink-muted);
		cursor: default;
		pointer-events: none;
		margin-bottom: var(--s-3);
	}
	.leistungen-toc__mobile > summary::before {
		display: none;
	}
}
.leistungen-toc__mobile {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: var(--s-3) var(--s-4);
	background: var(--c-surface);
}
.leistungen-toc__mobile > summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--c-ink);
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
.leistungen-toc__mobile > summary::before {
	content: "▸";
	color: var(--c-primary-dark);
	transition: transform var(--t-fast) var(--ease);
	display: inline-block;
}
.leistungen-toc__mobile[open] > summary::before {
	transform: rotate(90deg);
}
.leistungen-toc__mobile > summary::-webkit-details-marker {
	display: none;
}
.leistungen-toc ol {
	list-style: none;
	padding: 0;
	margin: var(--s-3) 0 0;
	counter-reset: toc;
	display: grid;
	gap: 2px;
}
.leistungen-toc li {
	counter-increment: toc;
}
.leistungen-toc a {
	color: var(--c-ink-muted);
	text-decoration: none;
	padding: 0.55rem 0.7rem 0.55rem 0.5rem;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	gap: 0.7rem;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
	min-height: 40px;
	border-left: 3px solid transparent;
	font-weight: 500;
}
.leistungen-toc a::before {
	content: counter(toc, decimal-leading-zero);
	color: var(--c-primary-dark);
	font-weight: 700;
	font-size: 0.75rem;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-primary-soft);
	border-radius: 50%;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.leistungen-toc a:hover {
	color: var(--c-ink);
	padding-left: 0.7rem;
}
.leistungen-toc a:hover::before {
	background: var(--c-primary-dark);
	color: #fff;
}
.leistungen-toc a:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}
/* Active section (set by scroll-spy JS) */
.leistungen-toc a.is-current {
	color: var(--c-ink);
	font-weight: 700;
	border-left-color: var(--c-primary);
	background: linear-gradient(90deg, color-mix(in srgb, var(--c-primary-soft) 70%, transparent), transparent);
}
.leistungen-toc a.is-current::before {
	background: var(--c-primary-dark);
	color: #fff;
	transform: scale(1.05);
}

/* ── Service sections ──────────────────────────────────────────── */
.leistungen-sections {
	display: grid;
	gap: var(--s-5);
}

.leistungs-block {
	scroll-margin-top: 6rem;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: var(--s-6) var(--s-5) var(--s-5);
	transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	position: relative;
	overflow: hidden;
}
.leistungs-block:hover {
	border-color: var(--c-primary-soft);
	box-shadow: 0 8px 28px -16px rgba(31, 31, 31, 0.18);
	transform: translateY(-2px);
}
/* Giant decorative number behind the title — adds visual punch without
 * stealing focus. The actual semantic number stays in .leistungs-block__num
 * for screen readers. */
.leistungs-block::before {
	content: attr(id);                /* not perfect, but we override per-block via JS not needed */
	display: none;
}

.leistungs-block__head {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-3);
	flex-wrap: wrap;
}
.leistungs-block__num {
	color: var(--c-primary);
	font-weight: 800;
	font-size: clamp(2.6rem, 2rem + 1.5vw, 3.6rem);
	line-height: 1;
	letter-spacing: -0.04em;
	opacity: 0.5;
	font-feature-settings: "tnum"; /* tabular numerals for clean alignment */
}
.leistungs-block__icon {
	color: var(--c-primary-dark);
	display: inline-flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	background: var(--c-primary-soft);
	border-radius: 50%;
	flex-shrink: 0;
}
.leistungs-block__icon svg {
	width: 32px;
	height: 32px;
}
.leistungs-block__title {
	margin: 0;
	font-size: clamp(1.35rem, 1rem + 1vw, 1.7rem);
	line-height: 1.2;
	color: var(--c-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
	flex: 1 1 100%;
}
@media (min-width: 48rem) {
	.leistungs-block__title { flex: 1 1 auto; }
}
.leistungs-block__lead {
	font-size: 1.1rem;
	color: var(--c-ink);
	margin: 0 0 var(--s-3);
	line-height: 1.55;
	font-weight: 500;
}
.leistungs-block p {
	color: var(--c-ink-muted);
	line-height: 1.7;
	margin: 0 0 var(--s-3);
}
.leistungs-block p:last-child {
	margin-bottom: 0;
}

.leistungs-cta-inline {
	padding: var(--s-4) var(--s-5);
	background: linear-gradient(135deg, var(--c-primary-soft), color-mix(in srgb, var(--c-primary-soft) 50%, var(--c-surface)));
	border-left: 4px solid var(--c-primary);
	border-radius: var(--radius);
	margin-block: var(--s-2);
}
.leistungs-cta-inline p {
	margin: 0;
	color: var(--c-ink);
	font-size: 1rem;
}
.leistungs-cta-inline a {
	color: var(--c-primary-dark);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.leistungs-cta-inline a:hover {
	color: var(--c-primary);
}


/* ---------- 9b. Leistungen — horizontal image-left/text-right cards ---------- */
.leistung-section { margin-block: var(--s-6); }
.leistung-section + .leistung-section { margin-top: var(--s-7); }
.leistung-section__title {
	margin: 0 0 var(--s-4); font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	color: var(--c-ink); position: relative; padding-left: var(--s-3);
}
.leistung-section__title::before {
	content: ""; position: absolute; left: 0; top: .35em; bottom: .35em;
	width: 4px; border-radius: 2px; background: var(--c-primary);
}

.leistung-grid {
	display: grid; gap: var(--s-4);
	list-style: none; padding: 0; margin: 0;
}

.leistung-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: clip;
	display: grid;
	grid-template-columns: 1fr;
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.leistung-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	border-color: var(--c-primary-soft);
}
.leistung-card__media {
	display: grid; place-items: center;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c-primary-soft) 55%, transparent) 0%, transparent 60%),
		linear-gradient(135deg, var(--c-sand) 0%, var(--c-surface) 100%);
	padding: var(--s-5);
	color: var(--c-primary-dark);
	text-decoration: none;
}
.leistung-card__media svg {
	width: 64%; height: auto; max-width: 110px;
	stroke-width: 1.6;
	transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.leistung-card:hover .leistung-card__media svg {
	transform: scale(1.08) rotate(-2deg);
	color: var(--c-primary);
}

.leistung-card__body {
	padding: var(--s-5);
	display: flex; flex-direction: column; gap: var(--s-2);
}
.leistung-card__title {
	margin: 0; font-size: 1.35rem; line-height: 1.25;
}
.leistung-card__link {
	color: var(--c-ink); text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
/* Stretched-link: the title's ::after covers the whole card so pointer users
 * can click anywhere on the card to navigate, while there's only ONE <a>
 * element in the DOM (great for screen readers — no duplicate link spam). */
.leistung-card { position: relative; }
.leistung-card__link::after {
	content: ""; position: absolute; inset: 0;
}
.leistung-card:hover .leistung-card__link {
	color: var(--c-primary-dark);
	background-size: 100% 1px;
}
.leistung-card__link:focus-visible { outline: none; }
.leistung-card:has(.leistung-card__link:focus-visible) {
	outline: 2px solid var(--c-primary);
	outline-offset: 3px;
}
.leistung-card__text {
	margin: 0; color: var(--c-ink-muted); line-height: 1.55;
}
/* "Details ansehen" is now a decorative <span> — the whole card is the link.
 * We still keep the visual affordance so users see where the action lives. */
.leistung-card__more {
	margin-top: auto; padding-top: var(--s-2);
	color: var(--c-primary-dark); font-weight: 600;
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: .35rem;
}
.leistung-card__more::after {
	content: "→";
	transition: transform var(--t-fast) var(--ease);
}
.leistung-card:hover .leistung-card__more { color: var(--c-primary); }
.leistung-card:hover .leistung-card__more::after { transform: translateX(3px); }

@media (min-width: 48rem) {
	.leistung-card {
		grid-template-columns: minmax(220px, 280px) 1fr;
	}
	.leistung-card__media { aspect-ratio: auto; height: 100%; min-height: 200px; }
	.leistung-card__media svg { max-width: 130px; }
	/* Alternate image side every other card for visual rhythm */
	.leistung-card:nth-child(even) { grid-template-columns: 1fr minmax(220px, 280px); }
	.leistung-card:nth-child(even) .leistung-card__media { order: 2; }
	.leistung-card:nth-child(even) .leistung-card__body { order: 1; }
}

/* Closing CTA block at the bottom of the page */
.leistung-cta {
	margin-top: var(--s-7); padding: var(--s-5) var(--s-5);
	background: linear-gradient(135deg, var(--c-sand) 0%, var(--c-surface) 100%);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	display: grid; gap: var(--s-3);
}
.leistung-cta h2 { margin: 0; font-size: 1.4rem; color: var(--c-ink); }
.leistung-cta p  { margin: 0; color: var(--c-ink-muted); }
.leistung-cta__actions {
	display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
}
.leistung-cta__phone {
	font-weight: 700; color: var(--c-ink); text-decoration: none;
	display: inline-flex; align-items: center; gap: .4rem;
}
.leistung-cta__phone:hover { color: var(--c-primary-dark); }

/* ---------- 10. Breadcrumbs ---------- */
.breadcrumbs { padding: var(--s-3) 0 0; }
.breadcrumbs ol {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: var(--s-2);
	font-size: 0.875rem; color: var(--c-ink-subtle);
}
.breadcrumbs li + li::before { content: "›"; margin-right: var(--s-2); color: var(--c-line); }
.breadcrumbs a { color: var(--c-ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-primary-dark); }
.breadcrumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* ---------- 11. Forms ---------- */
.contact-form, .search-form, .comment-form {
	display: grid; gap: var(--s-4);
	max-width: 36rem;
}
.contact-form { margin-block: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-weight: 600; }
.field input, .field textarea, .search-form input, .comment-form input, .comment-form textarea {
	width: 100%; padding: 0.75rem 0.875rem;
	border: 1px solid var(--c-line); border-radius: var(--radius);
	font: inherit; background: var(--c-surface); color: var(--c-ink);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
	min-height: 44px;
}
.field input:focus-visible, .field textarea:focus-visible {
	border-color: var(--c-primary);
}
.field--error input, .field--error textarea {
	border-color: var(--c-danger);
	border-width: 2px;
}
.field__error {
	color: #8a1f17; /* darker red — 7.5:1 on white */
	font-size: 0.875rem;
	margin: 0;
	display: flex; align-items: flex-start; gap: 0.4rem;
}
.field__error::before {
	content: "⚠"; /* high-contrast warning glyph */
	flex-shrink: 0;
}
.field--check { flex-direction: row; align-items: flex-start; gap: var(--s-3); }
.field--check input { width: auto; min-height: auto; margin-top: 0.25rem; }
.req { color: var(--c-primary-dark); }

.hp-field {
	position: absolute !important; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}

.form-message {
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius);
	border-left: 4px solid;
}
.form-message--success { background: #e6f4ec; border-color: var(--c-success); color: #0e5132; }
.form-message--error   { background: #fdecea; border-color: var(--c-danger);  color: #6a1f17; }

.search-form { grid-template-columns: 1fr auto; align-items: stretch; max-width: 100%; }
.search-form input { width: 100%; }

/* ---------- 11b. Sidebar layout ---------- */
.layout-with-sidebar { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 64rem) {
	.layout-with-sidebar { grid-template-columns: minmax(0, 1fr) 260px; }
	.layout-with-sidebar--no-sidebar { grid-template-columns: 1fr; }
}
.layout-with-sidebar__main { min-width: 0; }

.sidebar { display: flex; flex-direction: column; gap: var(--s-5); }
.sidebar-widget {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
}
.sidebar-widget__title {
	font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--c-ink); margin: 0 0 var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 2px solid var(--c-primary);
	display: inline-block;
}
.sidebar-widget__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sidebar-widget__list li + li { border-top: 1px solid var(--c-line); }
.sidebar-widget__list a {
	display: block; padding: var(--s-2) 0;
	color: var(--c-ink-muted); text-decoration: none;
	font-size: 0.95rem;
}
.sidebar-widget__list a:hover, .sidebar-widget__list a:focus-visible { color: var(--c-primary-dark); }
.sidebar-widget__legacy { display: block; }
.sidebar-widget__legacy img { width: 100%; height: auto; border-radius: var(--radius); }

/* ---------- 12. Footer ---------- */
.site-footer {
	background: var(--c-ink);
	color: #d7d7d7;
}
/* When the last section before the footer is light/sand, give it some
   breathing space. When it's already dark (team-cta, stats-banner), the
   footer just continues — no gap. */
.site-main:has(> *:last-child.team-cta) + .site-footer,
.site-main:has(> *:last-child.stats-banner) + .site-footer { margin-top: 0; }
.site-footer__grid {
	display: grid; gap: var(--s-5);
	padding-block: var(--s-7);
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	.site-footer__grid { grid-template-columns: 2fr 1fr 1.5fr; }
}
.site-footer__search .search-form { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.site-footer__search .search-form input[type="search"] {
	flex: 1 1 12rem;
	padding: 10px 12px;
	border: 1px solid #444;
	background: #1a1a1a;
	color: #fff;
	border-radius: 4px;
	min-width: 0;
}
.site-footer__search .search-form input[type="search"]::placeholder { color: #888; }
.site-footer__search .search-form input[type="search"]:focus-visible {
	outline: 2px solid var(--c-primary); outline-offset: 1px;
	border-color: var(--c-primary);
}
.site-footer__search .search-form button { flex: 0 0 auto; }
.site-footer__title { color: #fff; font-size: 1rem; margin-bottom: var(--s-3); text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--c-primary); }
/* "Datenschutz-Hinweis anzeigen" trigger — a <button> styled to match the
 * neighbouring footer links so it sits naturally in the legal menu. */
.site-footer .privacy-show-link {
	background: none; border: 0; padding: 0; margin: 0;
	font: inherit; color: #fff; text-align: left;
	cursor: pointer;
}
.site-footer .privacy-show-link:hover { color: var(--c-primary); }
.site-footer .privacy-show-link:focus-visible {
	outline: 2px solid var(--c-primary); outline-offset: 2px;
}
.site-footer .footer-menu, .site-footer .legal-menu {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column;
	gap: var(--s-3); /* WCAG 2.5.8: ≥ 24px between touch targets */
}
.site-footer .footer-menu a, .site-footer .legal-menu a,
.site-footer .footer-menu .privacy-show-link, .site-footer .legal-menu .privacy-show-link {
	display: inline-block;
	padding-block: 6px; /* lift line-height to ~44px target zone */
	min-height: 44px; box-sizing: border-box;
	line-height: 1.6;
}
.site-footer__base { border-top: 1px solid #333; padding-block: var(--s-4); font-size: 0.875rem; color: #bdbdbd; }
.site-footer .site-logo img { filter: brightness(0) invert(1); opacity: .95; }

.site-footer__brand { display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer__wordmark {
	display: inline-block;
	text-decoration: none;
	line-height: 1;
	margin-bottom: var(--s-2);
}
.site-footer__wordmark-text {
	display: inline-block;
	font-family: var(--ff-system);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	letter-spacing: -0.02em;
	color: #fff;
	transform-origin: left center;
	will-change: transform, opacity;
	animation: tewoort-pulse 3.6s ease-in-out infinite;
}
.site-footer__wordmark-accent {
	color: var(--c-primary);
}
.site-footer__wordmark:hover .site-footer__wordmark-text,
.site-footer__wordmark:focus-visible .site-footer__wordmark-text {
	animation-play-state: paused;
	transform: scale(1.03);
	transition: transform var(--t-base) var(--ease);
}
.site-footer__contact { margin: 0; }
.site-footer__contact a { font-weight: 600; }

@keyframes tewoort-pulse {
	0%, 100% { transform: scale(1);     opacity: 1;    }
	50%      { transform: scale(1.025); opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__wordmark-text { animation: none; }
}

@media print {
	.site-footer__wordmark-text { animation: none; color: #000; }
}

/* ---------- 13. Consent banner ---------- */
.consent-banner {
	position: fixed; inset: auto var(--s-4) var(--s-4) var(--s-4); z-index: 100;
	max-width: 32rem; margin-inline: auto;
	background: var(--c-surface); color: var(--c-ink);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
	padding: var(--s-5);
	animation: tw-pop var(--t-base) var(--ease);
}
@keyframes tw-pop { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.consent-title { font-size: 1.1rem; margin-bottom: var(--s-2); }
.consent-text  { color: var(--c-ink-muted); margin-bottom: var(--s-3); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }

/* Video-embed placeholder — click-to-load, 16:9 aspect-ratio preserved */
.embed-gate {
	position: relative;
	margin-block: var(--s-5);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, #2a2a2a 0%, var(--c-ink) 100%);
	aspect-ratio: 16 / 9;
	box-shadow: var(--shadow);
}
.embed-gate.is-active {
	background: transparent;
	box-shadow: none;
	display: block;
	height: auto;
	aspect-ratio: auto;
}
.embed-gate.is-active iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	border-radius: var(--radius-lg);
}
.embed-gate__placeholder {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--s-3);
	padding: var(--s-4);
	color: #fff;
	text-align: center;
}
.embed-gate__play {
	display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-2);
	background: transparent; border: 0; cursor: pointer; padding: var(--s-2);
	color: #fff;
	transition: transform var(--t-base) var(--ease);
}
.embed-gate__play:hover, .embed-gate__play:focus-visible { transform: scale(1.04); }
.embed-gate__play svg {
	width: 64px; height: 64px;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}
.embed-gate__label {
	font-size: 1.05rem; font-weight: 700;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.embed-gate__notice {
	max-width: 36rem;
	margin: 0;
	font-size: 0.825rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.embed-gate__notice a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.embed-gate__notice a:hover { color: var(--c-primary-soft); }
@media (max-width: 36rem) {
	.embed-gate__play svg { width: 48px; height: 48px; }
	.embed-gate__notice  { font-size: 0.75rem; }
}

/* Lightweight privacy bar — single info line at the bottom of the viewport */
.privacy-bar {
	position: fixed;
	left: clamp(var(--s-3), 2vw, var(--s-5));
	right: clamp(var(--s-3), 2vw, var(--s-5));
	bottom: clamp(var(--s-3), 2vw, var(--s-5));
	z-index: 70;
	background: var(--c-surface);
	color: var(--c-ink);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 40px -10px rgba(31, 31, 31, 0.25);
	max-width: 56rem;
	margin-inline: auto;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.privacy-bar.is-visible { opacity: 1; transform: none; }
.privacy-bar[hidden] { display: none; }
.privacy-bar__inner {
	display: flex; align-items: center; gap: var(--s-4);
	padding: var(--s-3) var(--s-4);
	flex-wrap: wrap;
}
.privacy-bar__icon {
	width: 22px; height: 22px;
	color: var(--c-primary-dark);
	flex-shrink: 0;
	vertical-align: -4px;
	margin-right: 0.5em;
}
.privacy-bar__text {
	flex: 1 1 22rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--c-ink-muted);
	line-height: 1.5;
}
.privacy-bar__text a { color: var(--c-primary-dark); }
.privacy-bar__dismiss {
	background: var(--c-ink);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.55rem 1.25rem;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color var(--t-fast) var(--ease);
}
.privacy-bar__dismiss:hover, .privacy-bar__dismiss:focus-visible { background: var(--c-primary-dark); }
@media (max-width: 36rem) {
	.privacy-bar__inner { padding: var(--s-3); }
	.privacy-bar__text { font-size: 0.8rem; }
	.privacy-bar__dismiss { width: 100%; }
}
@media print {
	.privacy-bar { display: none !important; }
}

/* ---------- 13b. Pop-up / Hinweis dialog ---------- */
.tw-popup {
	border: 0; padding: 0;
	border-radius: var(--radius-lg);
	max-width: min(560px, 92vw);
	width: 100%;
	background: var(--c-surface);
	color: var(--c-ink);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	animation: tw-popup-in 280ms var(--ease);
}
.tw-popup::backdrop {
	background: rgba(15,15,15,.6);
	backdrop-filter: blur(4px);
}
@keyframes tw-popup-in {
	from { transform: translateY(20px) scale(0.97); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tw-popup { animation: none; }
}
.tw-popup__close {
	position: absolute; top: var(--s-3); right: var(--s-3);
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,.85); border: 0;
	display: grid; place-items: center; cursor: pointer;
	color: var(--c-ink); z-index: 2;
	box-shadow: var(--shadow-sm);
}
.tw-popup__close:hover, .tw-popup__close:focus-visible { background: #fff; color: var(--c-primary-dark); }
.tw-popup__close svg { width: 18px; height: 18px; }

.tw-popup__image { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; background: var(--c-sand); }
.tw-popup__body { padding: clamp(var(--s-5), 4vw, var(--s-6)); }
.tw-popup__title { font-size: clamp(1.25rem, 2.4vw, 1.65rem); margin: 0 0 var(--s-3); color: var(--c-ink); }
.tw-popup__message { color: var(--c-ink-muted); line-height: 1.6; margin-bottom: var(--s-4); }
.tw-popup__message p:last-child { margin-bottom: 0; }
.tw-popup__cta { margin-top: var(--s-3); }

/* ---------- 14. Lightbox (native <dialog>) ---------- */
.tw-lightbox {
	/* reset the default <dialog> chrome */
	padding: 0; border: 0; background: transparent; color: #fff;
	max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
	overflow: hidden;
}
.tw-lightbox::backdrop { background: rgba(15,15,15,.92); }
.tw-lightbox[open] {
	display: grid; place-items: center; padding: var(--s-4);
}
.tw-lightbox__figure {
	margin: 0; display: grid; place-items: center; gap: var(--s-2);
	max-width: 92vw; max-height: 88vh;
}
.tw-lightbox__figure img {
	max-width: 92vw; max-height: 80vh; border-radius: var(--radius);
	display: block; object-fit: contain;
}
.tw-lightbox__caption {
	color: rgba(255,255,255,.85); font-size: .95rem; text-align: center;
	max-width: 80ch;
}
.tw-lightbox__caption[hidden] { display: none; }
.tw-lightbox__close, .tw-lightbox__prev, .tw-lightbox__next {
	position: fixed; background: rgba(255,255,255,.12); color: #fff;
	border: 0; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; transition: background-color .15s ease;
	z-index: 1;
}
.tw-lightbox__close svg, .tw-lightbox__prev svg, .tw-lightbox__next svg {
	width: 24px; height: 24px;
}
.tw-lightbox__close { top: var(--s-4); right: var(--s-4); }
.tw-lightbox__prev  { left:  var(--s-4); top: 50%; transform: translateY(-50%); }
.tw-lightbox__next  { right: var(--s-4); top: 50%; transform: translateY(-50%); }
.tw-lightbox__close:hover, .tw-lightbox__prev:hover, .tw-lightbox__next:hover { background: rgba(255,255,255,.28); }
.tw-lightbox__close:focus-visible, .tw-lightbox__prev:focus-visible, .tw-lightbox__next:focus-visible {
	outline: 2px solid #fff; outline-offset: 2px;
}
.tw-lightbox__prev[hidden], .tw-lightbox__next[hidden] { display: none; }

/* ---------- 15. WP gallery defaults ---------- */
.gallery { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin-block: var(--s-5); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) {
	.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
	.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
	.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
	.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
}
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); transition: transform var(--t-base) var(--ease); }
.gallery-item a:hover img { transform: scale(1.03); }
.gallery-caption { font-size: 0.85rem; color: var(--c-ink-subtle); margin-top: var(--s-1); }

/* ---------- 15a. Team / Kontakt — compact person cards, ALWAYS 2 per row ---------- */
.team-grid {
	/* Override any inherited entry-content rules with !important — these cards
	   live inside `.entry-content` which sets margin-top on every child; the
	   grid uses gap, not margins, so margins-on-children would break alignment. */
	display: grid !important;
	gap: var(--s-4);
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	margin: var(--s-5) auto !important;
	max-width: 44rem;        /* harder cap so portraits don't get big on wide screens */
}
.team-grid > * { margin-top: 0 !important; } /* defeat .entry-content > * + * { margin-top } */

.team-card {
	position: relative;
	background: var(--c-surface);
	border-radius: var(--radius-lg);
	overflow: clip;
	box-shadow: 0 4px 14px -6px rgba(31, 31, 31, 0.18),
	            0 0 0 1px var(--c-line);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
	display: flex; flex-direction: column;
	min-width: 0;
}
.team-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px -8px rgba(31, 31, 31, 0.28),
	            0 0 0 1px var(--c-primary-soft);
}

/* Decorative orange accent strip at the top — gives the card an "ID-card" feel */
.team-card::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
	z-index: 1;
}

.team-card__media {
	margin: 0;
	aspect-ratio: 1 / 1;     /* square portrait, compact */
	background: var(--c-sand);
	overflow: hidden;
}
.team-card__media img {
	width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
	display: block;
	transition: transform 500ms var(--ease);
}
.team-card:hover .team-card__media img { transform: scale(1.04); }

.team-card__name {
	margin: 0 !important;     /* override .entry-content h3 { margin-top } */
	padding: var(--s-3) var(--s-3);
	text-align: center;
	font-size: 0.95rem;
	background: var(--c-surface);
}
.team-card__name span {
	display: inline-block;
	background: var(--c-primary);
	color: #fff;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 3px 8px -2px rgba(232, 90, 44, 0.45);
	transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	max-width: 100%;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.team-card:hover .team-card__name span {
	background: var(--c-primary-dark);
	transform: scale(1.04);
}

@media print {
	.team-card { box-shadow: none; }
	.team-card__name span { background: #000; color: #fff; box-shadow: none; }
}

/* ---------- 15b. Timeline (firmen-historie) ---------- */
.timeline {
	list-style: none;
	padding: 0;
	margin: var(--s-6) 0;
	position: relative;
	counter-reset: timeline;
}

/* The vertical "track" running behind the year badges */
.timeline::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 60px;
	width: 2px;
	background: linear-gradient(180deg,
		transparent 0,
		var(--c-line) 24px,
		var(--c-line) calc(100% - 24px),
		transparent 100%);
}

.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--s-4);
	align-items: start;
	margin-bottom: var(--s-5);
	padding-left: 0;
}
.timeline__item:last-child { margin-bottom: 0; }

/* Year marker: a pill badge sitting on the track */
.timeline__marker {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	z-index: 1;
}
.timeline__year {
	display: inline-grid;
	place-items: center;
	min-width: 80px;
	padding: 0.5rem 1rem;
	background: var(--c-primary);
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	border-radius: 999px;
	box-shadow: 0 0 0 4px var(--c-surface), var(--shadow);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.timeline__item:hover .timeline__year {
	background: var(--c-primary-dark);
	transform: scale(1.04);
}

/* The text card alongside the year */
.timeline__body {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: var(--s-4) var(--s-5);
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.timeline__item:hover .timeline__body {
	transform: translateX(2px);
	box-shadow: var(--shadow);
	border-color: var(--c-primary-soft);
}
.timeline__text {
	margin: 0;
	color: var(--c-ink);
	line-height: 1.65;
}

/* Decorative arrow that connects the body to the track */
.timeline__body { position: relative; }
.timeline__body::before {
	content: "";
	position: absolute;
	left: -8px; top: 1.25rem;
	width: 0; height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid var(--c-line);
}
.timeline__body::after {
	content: "";
	position: absolute;
	left: -7px; top: 1.25rem;
	width: 0; height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid var(--c-surface);
}

/* Tablet: tighten the track-to-content gap. */
@media (max-width: 60rem) {
	.timeline::before { left: 36px; }
	.timeline__item { grid-template-columns: 72px 1fr; gap: var(--s-3); }
	.timeline__year {
		min-width: 56px;
		padding: 0.4rem 0.65rem;
		font-size: 0.9rem;
	}
}

/* Mobile: stack badge above text, drop the vertical track and arrow */
@media (max-width: 36rem) {
	.timeline::before { display: none; }
	.timeline__item { grid-template-columns: 1fr; gap: var(--s-2); }
	.timeline__marker { justify-content: flex-start; }
	.timeline__body::before, .timeline__body::after { display: none; }
	.timeline__year   { font-size: 0.95rem; }
}

/* Print: clean black-on-white, no shadows */
@media print {
	.timeline::before { display: none; }
	.timeline__body { border-color: #000; box-shadow: none; }
	.timeline__year { background: #000; color: #fff; box-shadow: none; }
}

/* ---------- 16. Tables (WP default content tables) ---------- */
.entry-content table {
	width: 100%; border-collapse: collapse; margin-block: var(--s-5);
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius); overflow: hidden;
}
.entry-content th, .entry-content td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--c-line); }
.entry-content th { background: var(--c-sand); }

/* ---------- 16b. Back-to-top floating button ---------- */
.back-to-top {
	position: fixed; right: clamp(var(--s-3), 3vw, var(--s-5)); bottom: clamp(var(--s-3), 3vw, var(--s-5));
	z-index: 60;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	background: var(--c-primary); color: #fff;
	border: 0; border-radius: 50%;
	box-shadow: var(--shadow-lg);
	cursor: pointer;
	opacity: 0; transform: translateY(8px);
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), background-color var(--t-fast) var(--ease);
}
.back-to-top.is-visible { opacity: 1; transform: none; }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--c-primary-dark); color: #fff; }
.back-to-top svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
	.back-to-top { transition: none; }
}
@media print {
	.back-to-top { display: none !important; }
}

/* ---------- 17. Print ---------- */
@media print {
	.site-header, .site-footer, .consent-banner, .nav-toggle, .hero__actions, .post-nav, .pagination, .breadcrumbs { display: none !important; }
	a { color: inherit; text-decoration: underline; }
	body { background: #fff; color: #000; }
}

/* ---------- 18. Forced colors / high contrast ---------- */
@media (forced-colors: active) {
	.btn--primary { border-color: ButtonText; }
	.post-card { border-color: ButtonText; }
}