/* =====================================================================
   Südpower – Komponenten- & Sektions-CSS
   Komponenten- und Sektions-CSS, angepasst an die
   Marke (Rot statt Navy, vier Leistungen, echtes Logo) und ergänzt um
   Navigation, Barrierefreiheit, Responsive & Scroll-Reveal.

   Farb-/Font-Tokens kommen aus theme.json (--wp--preset--*). Die:root-
   Aliase unten machen die Regeln nur lesbarer – Single Source bleibt
   theme.json.
   ===================================================================== */

:root {
	--sp-gelb: var(--wp--preset--color--gelb, #F5C946);
	--sp-gelb-dark: #E0B53D;
	--sp-charcoal: var(--wp--preset--color--charcoal, #2D2D2D);
	--sp-charcoal-dark: var(--wp--preset--color--charcoal-dark, #1A1A1A);
	--sp-off-white: var(--wp--preset--color--off-white, #FAFAF7);
	--sp-rot: var(--wp--preset--color--rot, #922826); /* echter Marken-Rot-Ton aus dem Logo */
	--sp-weiss: var(--wp--preset--color--weiss, #FFFFFF);
	--sp-linie: var(--wp--preset--color--grau-linie, #E5E5E0);
	--sp-grau: var(--wp--preset--color--grau-text, #666666);
	--sp-grau-hell: var(--wp--preset--color--grau-text-hell, #707070); /* A11y: auf AA-Kontrast abgedunkelt (war #888888) */

	/* Seit 10.08.2026 trägt Avenir beide Rollen. Die zwei
	   Variablen bleiben getrennt, damit ein späterer Wechsel zurück zu einer
	   eigenen Display-Schrift nicht wieder durch 200 Regeln muss.
	   Das Typekit-Projekt liefert nur 200, 400 und 700 — deshalb stehen in
	   diesem Stylesheet keine 300/500/600 mehr (der Browser würde sonst still
	   auf den nächsten vorhandenen Schnitt springen, 600 also auf 700). */
	--sp-font-head: var(--wp--preset--font-family--avenir, 'avenir-lt-pro', 'Avenir Next', 'Avenir', sans-serif);
	--sp-font-body: var(--wp--preset--font-family--avenir, 'avenir-lt-pro', 'Avenir Next', 'Avenir', sans-serif);

	--sp-header-h: 88px;
	--sp-pad-x: clamp(20px, 5vw, 80px);   /* horizontaler Mindestabstand (fluid) */
	--sp-pad-y: clamp(56px, 8vw, 100px);  /* vertikaler Sektionsabstand (fluid) */
	--sp-container: 1440px;               /* max. Content-Breite je Sektion – zentral änderbar */
	--sp-gutter: max(var(--sp-pad-x), calc((100% - var(--sp-container)) / 2));
}

/* ---------- Basis ---------- */
html {
	background: var(--sp-off-white); /* neutraler Grund; Gelb ist Akzent-/Sektionsfarbe, kein Seitenhintergrund */
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}

/* Vollbreiter Seiten-Container: Sektionen laufen randlos bis an die Viewport-Kante,
   der Content sitzt je Sektion in einem zentrierten Container (--sp-gutter). */
.wp-site-blocks {
	background: var(--sp-off-white);
}

img { max-width: 100%; height: auto; }

/* ---------- Barrierefreiheit ---------- */
.screen-reader-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;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sp-rot);
	outline-offset: 2px;
	border-radius: 2px;
}
/*
 * Auf dunklen Flächen den Fokus hell zeichnen.
 *
 * `.founders-text` stand hier, solange die Fläche rot war. Seit dem 11.08.2026
 * ist sie gelb — ein weißer Rahmen käme dort auf 1,6:1 und wäre nicht zu
 * sehen. Ohne Eintrag greift der rote Standardrahmen (5,2:1 auf Gelb).
 *
 * Aus demselben Grund sind `social-proof` und `karriere` mit herausgefallen:
 * Beide standen schon vorher auf Gelb und trugen den weißen Rahmen zu
 * Unrecht — der Eintrag stammt aus der Zeit, als die Liste „dunkel ODER gelb"
 * meinte. Gelb braucht Rot, nicht Weiß.
 */
/* `.site-footer` ist am 11.08.2026 herausgefallen: Der Footer steht seit der
   Umstellung auf Off-White. Ein weißer
   Fokusrahmen wäre dort unsichtbar (1,1:1); der rote Standardrahmen
   erreicht 7,8:1. */
.opener :focus-visible,
.facts-strip :focus-visible,
.cta :focus-visible {
	outline-color: var(--sp-weiss);
}

.skip-link {
	position: absolute;
	left: 16px; top: -60px;
	z-index: 1000;
	background: var(--sp-charcoal);
	color: var(--sp-weiss);
	padding: 12px 20px;
	border-radius: 6px;
	font-family: var(--sp-font-head);
	font-weight: 700;
	text-decoration: none;
	transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* Sprungziele und Tastaturfokus liegen sonst unter dem festen Kopf.
   --sp-header-h führt navigation.js auf die tatsächliche Kopfhöhe nach
   (der Kopf ist zwischen 1280 und 1439 px zweizeilig). */
html { scroll-padding-top: calc(var(--sp-header-h) + 16px); }

/* =====================================================================
   HEADER / NAVIGATION
   Fixiert; auf der Startseite (body.home) transparent über dem Opener,
   nach dem Scrollen solide hell. Auf Unterseiten immer solide hell.
   ===================================================================== */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	width: 100%;
	z-index: 100;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* `flex-wrap` und schrumpffähige Kinder: Bei 200 % Textvergrößerung (WCAG 1.4.4)
   wurde die Kopfzeile so breit, dass die ganze Seite bis 553px aus einem
   390px-Fenster lief — Logo, Telefonnummer und Knopf standen starr
   nebeneinander (10.08.2026 gemessen). */
/* WordPress schreibt aus dem Block-Attribut `flexWrap: nowrap` die Klasse
   `is-nowrap` mit eigener Regel — eine Regel auf `.site-nav` allein bleibt
   wirkungslos. Deshalb hier gezielt beide Gruppen der Kopfzeile. */
.site-header .site-nav.is-nowrap,
.site-header .nav-right.is-nowrap { flex-wrap: wrap; }
.site-header .site-nav > *, .site-header .nav-right > * { min-width: 0; }
.site-header .nav-phone { overflow-wrap: anywhere; }

.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px var(--sp-gutter);
}

/*
 * Ein einziges Logo für die gesamte Seite.
 *
 * Es liegt nicht mehr als CSS-Hintergrundbild im Theme, sondern als WordPress-
 * Website-Logo in der Mediathek. Damit wird es an einer Stelle gepflegt
 * (Design → Editor → Stile → Logo) und die Änderung greift überall — Header,
 * Opener und Footer.
 *
 * Es gibt bewusst keine weiße oder graue Zweitfassung mehr: eine Marke, eine
 * Wahrheit. Damit das rot-graue Logo auch über dem dunklen Opener und im
 * dunklen Footer lesbar bleibt, steht es dort auf einer dezenten hellen Platte.
 */
.site-brand,
.wp-block-site-logo { line-height: 0; }
.site-brand img,
.wp-block-site-logo img {
	height: 42px; width: auto; display: block;
	transition: height 0.3s ease;
}
/*
 * Größer im Bildbereich der Startseite. Nur solange der Kopf
 * transparent über dem Opener steht — sobald er beim Scrollen solide wird,
 * geht das Logo auf die 42 px der übrigen Seite zurück. Das ist gewollt und
 * läuft über dieselbe Dauer wie der Farbwechsel des Kopfes, sonst springt die
 * Kopfhöhe.
 *
 * Die Quelldatei ist nur 258 × 82 px groß: 58 px Höhe ist
 * die Grenze, ab der die Rasterung auf Displays mit doppelter Pixeldichte
 * sichtbar wird. Mehr geht erst mit einer Vektorfassung.
 */
body.home .site-header:not(.is-scrolled) .site-brand img,
body.home .site-header:not(.is-scrolled) .wp-block-site-logo img {
	height: 58px;
}
/*
 * Das Logo wird NICHT weiter verändert: kein Schatten, keine Platte, keine
 * Sonderfassung. Es erscheint überall so, wie es in der Mediathek liegt.
 * (Festlegung 29.07.2026 — vorherige Versuche mit Platte und Schein waren
 * nicht verwendet.)
 */

/*
 * Transparenter Header über dem Opener: dezenter dunkler Verlauf für Lesbarkeit
 * der weißen Nav (auch über hellen Fotos). Bewusst nicht stärker: Logo und
 * Navigation liegen auf derselben Fläche, ein dunklerer Verlauf nimmt dem Logo
 * seine Form.
 */
body.home .site-header:not(.is-scrolled) {
	background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 100%);
}

/* Nav-Links (WP-Navigation-Block) */
.site-nav .wp-block-navigation {
	--wp--style--block-gap: 32px;
	font-family: var(--sp-font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
}
.site-nav .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--sp-weiss);
	opacity: 0.85;
	text-decoration: none;
	padding: 6px 2px;
}
.site-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	opacity: 1;
}

/* Dropdown-Pfeil („Leistungen") folgt der Nav-Textfarbe: weiß über dem Opener, dunkel im soliden Header */
.site-nav .wp-block-navigation__submenu-icon { color: var(--sp-weiss); opacity: 0.85; }
.site-nav .wp-block-navigation__submenu-icon svg { fill: currentColor; }
.site-header.is-scrolled .wp-block-navigation__submenu-icon,
body:not(.home) .site-header .wp-block-navigation__submenu-icon { color: var(--sp-charcoal); }
/* Im geöffneten Dropdown (heller Grund) immer dunkel */
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { color: var(--sp-charcoal); }

/* Telefon im Header (wichtigster Kanal) */
.nav-phone {
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	color: var(--sp-weiss);
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.nav-phone:hover { text-decoration: underline; }
.nav-phone svg { width: 16px; height: 16px; flex-shrink: 0; }

/* CTA-Button im Header */
.nav-cta .wp-block-button__link,
a.nav-cta {
	background: var(--sp-gelb);
	color: var(--sp-charcoal) !important;
	padding: 10px 24px;
	border-radius: 50px;
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}
.nav-cta .wp-block-button__link:hover,
a.nav-cta:hover { background: var(--sp-gelb-dark); }

/*
 * Der Wechsel hell/dunkel betrifft auch die Schriftfarbe. Ohne eigene
 * Überblendung springt sie hart, während der Hintergrund weich überblendet —
 * seit der Header schon nach 64 Pixeln umschaltet (statt am Ende des Openers)
 * passiert das mitten im Blickfeld. Gleiche Dauer wie der Hintergrund.
 */
.site-header .wp-block-site-title a,
.site-header .site-brand a,
.site-header .nav-phone,
.site-header .wp-block-navigation .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-icon {
	transition: color 0.3s ease;
}

/* Solid-Zustand: gescrollt (Startseite) oder jede Unterseite */
.site-header.is-scrolled,
body:not(.home) .site-header {
	background: var(--sp-off-white);
	box-shadow: 0 1px 0 var(--sp-linie), 0 6px 24px rgba(0,0,0,0.05);
}
.site-header.is-scrolled .wp-block-site-title a,
.site-header.is-scrolled .site-brand a,
.site-header.is-scrolled .nav-phone,
.site-header.is-scrolled .wp-block-navigation .wp-block-navigation-item__content,
body:not(.home) .site-header .wp-block-site-title a,
body:not(.home) .site-header .site-brand a,
body:not(.home) .site-header .nav-phone,
body:not(.home) .site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--sp-charcoal);
}

/* Dropdown „Leistungen" */
.site-nav .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--sp-off-white);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.12);
	padding: 8px;
	min-width: 240px;
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--sp-charcoal) !important;
	opacity: 1;
	padding: 10px 14px;
	border-radius: 8px;
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--sp-gelb);
}
/* Zwischen 1280 und 1439 px steht die Navigation in einer zweiten Zeile ganz
   links. Das Untermenü öffnet dort nach rechts, sonst läge es zur Hälfte links
   außerhalb des Fensters. Ab 1440 px unverändert. */
@media (min-width: 1280px) and (max-width: 1439px) {
	.site-nav .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container { left: 0; right: auto; }
}

/*
 * Klickziel des Burgers und des Schließkreuzes (WCAG 2.2, 2.5.8).
 *
 * Der Navigation-Block liefert beide als 24 × 24 px großes SVG ohne
 * Innenabstand — gemessen am 28.08.2026 auf 390 px Breite. Das ist genau die
 * Untergrenze der Richtlinie und deutlich unter den 44 px, die Apple und
 * Google für den Daumen empfehlen. Ausgerechnet der Schalter, über den auf dem
 * Handy die gesamte Navigation läuft, war das kleinste Ziel der Seite.
 *
 * Der negative Außenabstand hält die Kopfzeilenhöhe: Das Icon bleibt optisch
 * an seinem Platz, nur die anklickbare Fläche wächst nach außen.
 *
 * ⚠️ Hier steht bewusst KEIN `display`. Der Core blendet den Öffner oberhalb
 * von 600 px mit `display: none` aus; eine Regel mit `.site-nav` davor ist
 * spezifischer und hat ihn beim ersten Versuch auch am Schreibtisch eingeblendet
 * — neben der vollständigen Navigation.
 */
.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	margin: -10px;
	padding: 10px;
	box-sizing: border-box;
}

/*
 * Burger-Overlay (mobil) – vom Navigation-Block gestellt, hier nur Feinschliff.
 *
 * ⚠️ Die Fläche braucht die längere Auswahl mit `:not(.has-background)`.
 * Der Kern liefert
 *   .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open
 *   { background-color: #fff }
 * mit derselben Gewichtung wie `.site-nav …is-menu-open` — und steht später im
 * Stylesheet. Damit gewann Weiß. Die Verweise darin sind weiß, also stand am
 * 29.08.2026 auf dem Server weiße Schrift auf weißem Grund: Das Menü ging auf
 * und wirkte leer. Am Bild geprüft, nicht nur am Selektor.
 *
 * Die zusätzliche Klasse hebt die Gewichtung über die des Kerns, ohne
 * `!important`. Beide Auswahlen bleiben stehen: die kurze für den Fall, dass
 * jemand dem Navigationsblock eine Hintergrundfarbe gibt (dann greift die
 * Kernregel nicht mehr), die lange für den heutigen Zustand.
 */
.site-nav .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--sp-charcoal);
	padding: 24px;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--sp-weiss) !important;
	opacity: 1;
	font-size: 20px;
}
/*
 * Das Schließkreuz erbt sonst die Textfarbe des Kerns (dunkel) und ist auf
 * Charcoal genauso unsichtbar wie es die Verweise waren.
 */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--sp-weiss);
}
/*
 * Untermenü im Overlay: gleiche Fläche, keine schwebende Karte.
 *
 * Der Baustein erbt sonst die Gestaltung des Aufklappmenüs vom Schreibtisch —
 * weiße Fläche, 12 px Rundung, Schlagschatten, 32 px Innenabstand. Auf der
 * Charcoal-Fläche des Overlays bleibt davon ein heller Kasten stehen, der wie
 * ein Fehler aussieht. Im Overlay ist das Untermenü eine eingerückte Liste,
 * kein eigenes Fenster.
 */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 4px 0 8px;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	color: var(--sp-weiss);
}

/*
 * Reihenfolge im Kopf, solange der Burger zuständig ist:
 * Der Burger steht ganz rechts, das Telefonsymbol direkt links daneben.
 *
 * Im Markup steht die Navigation vor dem Telefon — richtig für den
 * Schreibtisch, wo die Verweise links vom Telefon und vom Knopf liegen. Unter
 * 1280 px schrumpft die Navigation zum Burger, und dann ist die Leserichtung
 * eine andere: Der Burger gehört an die Daumenkante. Gelöst über `order`,
 * nicht über eine zweite Auszeichnung.
 */
@media (max-width: 1279px) {
	.site-nav .nav-right .nav-cta-wrap { order: 1; }
	.site-nav .nav-right .nav-phone { order: 2; }
	.site-nav .nav-right .wp-block-navigation { order: 3; }
}

/*
 * Das geöffnete Menü.
 *
 * Der Navigationsblock bringt `justifyContent: right` aus dem Schreibtisch-
 * Layout mit; im Overlay landete dadurch jeder Eintrag an der rechten Kante,
 * mit einer Fahne aus unterschiedlich langen Zeilen. Im Overlay wird links
 * ausgerichtet und großzügiger gesetzt — es ist eine Liste, keine Zeile.
 */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	gap: 0;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
}
/* Im offenen Menü alles linksbündig: Die Navigation ist im Kopf rechtsbündig
   ausgerichtet, und WordPress übernimmt das sonst ins Menü — das Untermenü
   stand dann ab 600 px rechts außen, losgelöst von „Leistungen". */
.site-nav .wp-block-navigation__responsive-container.is-menu-open,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
}
/* Jeder Eintrag eine eigene Zeile mit ruhiger Trennung. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255,255,255,0.10);
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 0;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 16px 4px;
	text-align: left;
}
/*
 * Untermenü als eingerückte, leisere Liste unter „Leistungen".
 *
 * Der seitliche Innenabstand von 2rem kommt aus einer Core-Regel
 * (`…is-menu-open:where(:not(.disable-default-overlay))`), die später im
 * Stylesheet steht und nicht ohne `!important` zu überstimmen ist. Der Einzug
 * ergibt zusammen mit den 24 px hier rund 38 px — passend, deshalb bleibt es
 * dabei.
 */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 4px 10px 24px;
	font-size: 17px;
	opacity: 0.82;
}
/* Das Schließkreuz an die obere rechte Ecke, mit Klickziel nach WCAG 2.5.8. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 18px;
	right: 18px;
}
/*
 * Fokusring im Overlay in Gelb statt Marken-Rot.
 *
 * Der allgemeine Ring ist `--sp-rot` (#922826). Auf der Charcoal-Fläche des
 * Menüs sind das 1,67:1 — WCAG 1.4.11 verlangt 3:1 für Bedienelemente und ihre
 * Zustandsanzeigen. Gelb erreicht auf demselben Grund 8,74:1. Dieselbe Ursache
 * wie bei der Notdienstnummer auf /kontakt/: Ein Farbwert, der auf hellem Grund
 * trägt, verschwindet auf dunklem.
 */
.site-nav .wp-block-navigation__responsive-container.is-menu-open :where(a, button, [tabindex]):focus-visible {
	outline-color: var(--sp-gelb);
	outline-offset: -3px;
}

/* =====================================================================
   BUTTONS (Core-Button + Design-System-Varianten)
   ===================================================================== */
.wp-block-button__link {
	font-family: var(--sp-font-head);
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
}
/* Sekundär: Outline auf dunklem Grund (Weiß) */
.is-style-outline-light > .wp-block-button__link {
	background: transparent;
	color: var(--sp-weiss);
	border: 2px solid rgba(255,255,255,0.35);
}
.is-style-outline-light > .wp-block-button__link:hover {
	background: rgba(255,255,255,0.1);
	border-color: var(--sp-weiss);
}
/* Sekundär: Outline auf hellem Grund (Charcoal) */
.is-style-outline-dark > .wp-block-button__link {
	background: transparent;
	color: var(--sp-charcoal);
	border: 2px solid var(--sp-charcoal);
}
.is-style-outline-dark > .wp-block-button__link:hover {
	background: var(--sp-charcoal);
	color: var(--sp-weiss);
}

/* =====================================================================
   1. OPENER (Vollbild-Teamfoto, dunkles Overlay, H1 weiß + Gelb-Akzent)
   ===================================================================== */
.opener {
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh; /* svh = mobil ohne URL-Bar-Sprung */
	overflow: hidden;
	background: var(--sp-charcoal);
	display: flex;
}
.opener .opener-media,
.opener > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
/*
 * Bildausschnitt: Der Fokus soll auf
 * den Menschen liegen, die Wohnhäuser sollen zurücktreten.
 *
 * Zwei Stellschrauben, weil eine allein nicht reicht. Das Foto ist 3:2; im
 * hochformatigen Handyfenster deckt `cover` die volle Bildhöhe ab — dort
 * bleibt `object-position` auf der Y-Achse wirkungslos, weil vertikal nichts
 * übersteht. Deshalb kommt die Fokussierung aus der Kamerafahrt: Sie zoomt
 * etwas weiter (1.06 -> 1.16 statt 1.04 -> 1.13) und dreht um einen Punkt
 * unterhalb der Bildmitte, sodass Himmel und Halle oben aus dem Rahmen
 * laufen, die Gesichter aber im Bild bleiben. `object-position` schiebt den
 * Ausschnitt zusätzlich dort nach unten, wo Höhe übersteht (Desktop/Tablet).
 */
.opener .opener-media img,
.opener > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	/* Langsame Kamerafahrt: gibt dem statischen Teamfoto Bewegung, ohne abzulenken. */
	transform-origin: center 66%;
	animation: sp-ken-burns 28s ease-out both;
}
@keyframes sp-ken-burns {
	from { transform: scale(1.06); }
	to   { transform: scale(1.16); }
}
/*
 * Maskierte Unschärfe über dem oberen Bildteil — dieselbe Vorgabe, die
 * Wohnhäuser zurücktreten zu lassen. Kein neues Bild, keine zweite Datei:
 * `backdrop-filter` zeichnet weich, was hinter dem Element liegt, die
 * Verlaufsmaske lässt die Unschärfe nach unten auslaufen.
 *
 * Die Höhe ist bewusst knapp (32 %) und die Maske bereits bei rund zwei
 * Dritteln davon fast durchsichtig: Die Köpfe der ersten Reihe beginnen im
 * fertigen Ausschnitt bei etwa einem Drittel der Sektionshöhe — eine höhere
 * oder härtere Maske würde Gesichter mitverwischen.
 *
 * Browser ohne `backdrop-filter` zeigen das Element schlicht nicht; damit die
 * Wohnhäuser auch dort zurücktreten, greift darunter ein Verlauf.
 */
.opener-weich {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 32%;
	z-index: 0;
	pointer-events: none;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0) 100%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.opener-weich {
		background: linear-gradient(to bottom, rgba(45,45,45,0.45) 0%, rgba(45,45,45,0.22) 55%, rgba(45,45,45,0) 100%);
	}
}
/*
 * Grunddaempfung ueber dem gesamten Bild. Das Teamfoto ist hell (Himmel, weisse
 * Fahrzeuge); der Verlauf von unten allein reichte fuer die Lesbarkeit nicht.
 */
.opener::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0,0,0,0.30);
	pointer-events: none;
}
.opener-overlay {
	position: relative;
	z-index: 1;
	align-self: flex-end;
	width: 100%;
	padding: 60px var(--sp-gutter) 56px;
	background: linear-gradient(to top,
		rgba(0,0,0,0.92) 0%,
		rgba(0,0,0,0.72) 38%,
		rgba(0,0,0,0.32) 72%,
		transparent 100%);
}
.opener-label {
	font-family: var(--sp-font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-gelb);
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.opener h1 {
	font-size: clamp(2.125rem, 6vw, 3.5rem);
	color: var(--sp-weiss);
	line-height: 1.1;
	max-width: 760px;
	margin: 0;
}
.opener h1 .has-gelb-color,
.opener h1 mark { color: var(--sp-gelb); background: transparent; }
.opener-tagline {
	font-size: clamp(1rem, 2.2vw, 1.125rem);
	color: rgba(255,255,255,0.78);
	margin-top: 18px;
	font-weight: 400;
	max-width: 640px;
}
.opener-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

/* =====================================================================
   2. SOCIAL PROOF (gelbe Fläche, weiße Testimonial-Cards)
   ===================================================================== */
.social-proof {
	background: var(--sp-gelb);
	padding: var(--sp-pad-y) var(--sp-gutter);
}
.social-proof-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.social-proof-header h2 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--sp-charcoal);
	margin: 0;
}
.social-proof-header .rating {
	font-size: 16px;
	color: var(--sp-charcoal);
	font-weight: 400;
}
/*
 * Spaltenzahl folgt der Anzahl der Stimmen. Mit den festen zwei Spalten
 * blieb bei drei Rezensionen die vierte Position leer und bei einer
 * einzelnen Stimme die halbe Sektion.
 */
.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(var(--sp-stimmen, 2), 1fr);
	gap: 24px;
}
/* Einzelne Stimme: Lesebreite behalten und mittig setzen. */
.testimonial-grid.ist-einzeln { max-width: 760px; margin-inline: auto; }
.testimonial-card {
	background: var(--sp-weiss);
	border-radius: 16px;
	padding: 40px;
	position: relative;
}
.testimonial-card .quote-mark {
	font-family: var(--sp-font-head);
	font-size: 72px;
	font-weight: 700;
	/* Markengelb. Hier stand bis zum 11.08.2026 ein abgedunkeltes #d9a520,
	   damit das Zeichen auf Weiß kräftiger wirkt — es war der einzige zweite
	   Gelbton im Projekt und fiel als solcher auf. Das Zeichen ist rein
	   dekorativ (aria-hidden), eine Kontrastvorgabe gilt dafür nicht. */
	color: var(--sp-gelb);
	line-height: 1;
	margin-bottom: 8px;
}
.testimonial-card p {
	font-size: 16px;
	line-height: 1.7;
	color: #444;
	margin: 0 0 24px;
}
.testimonial-card .author { font-weight: 700; font-size: 14px; color: var(--sp-charcoal); }
.testimonial-card .author-detail { font-size: 13px; color: var(--sp-grau-hell); margin-top: 2px; }
.testimonial-card .stars {
	position: absolute;
	top: 40px; right: 40px;
	font-size: 14px;
	/*
	 * Markengelb (11.08.2026). Hier stand ein abgedunkeltes #8a6400 mit der
	 * Begründung, die Sterne trügen eine Aussage und bräuchten deshalb
	 * Kontrast. Das trifft nicht zu: Sie sind im Markup `aria-hidden`, die
	 * Bewertung steht als Text darüber. Damit sind sie Schmuck — und ein
	 * dritter Gelbton im Projekt, der als solcher auffiel.
	 */
	color: var(--sp-gelb);
	letter-spacing: 2px;
}

/* =====================================================================
   3. FOUNDERS (zweigeteilt, Textblock GELB)
   Vorher Rot, davor Navy. Getauscht wurde beides: Fläche gelb, die vormals
   gelben Akzente (Label, Leitsatz, Link) rot.
   ===================================================================== */
.founders {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 600px;
}
/* Rasterspalten brauchen `min-width: 0`, sonst wachsen sie mit ihrem Inhalt
   über das Fenster hinaus. Bei 200 % Textvergrößerung (WCAG 1.4.4) lief die
   Startseite dadurch bis 557px in einem 390px-Fenster. Die Regel greift für
   alle zweispaltigen Sektionen des Themes auf einmal — einzeln nachzuziehen
   hieße, denselben Fehler beim nächsten Zweispalter wieder zu bauen. */
.founders > *, .pv-teaser > *, .pv-kampagne > *, .story-stat > *,
.page-header.hat-bild > *, .page-header.hat-batch > *, .leistung-blocks > *, .gewerbe-hinweis > * { min-width: 0; }
.pv-teaser-text, .story-text, .kopf-text { overflow-wrap: break-word; }

/* `min-width: 0` ist der entscheidende Teil: Rasterspalten bekommen sonst
   `min-width: auto` und wachsen mit ihrem Inhalt über das Fenster hinaus —
   bei 200 % Textvergrößerung lief die Startseite dadurch bis 552px in einem
   390px-Fenster (10.08.2026 gemessen). */
.founders-image { overflow: hidden; margin: 0; min-width: 0; }
.founders-text { min-width: 0; }
.founders h1 mark, .founders mark, .opener mark { overflow-wrap: anywhere; }
.founders-image img { width: 100%; height: 100%; object-fit: cover; }
/*
 * Kontraste gegen Gelb (#F5C946) nachgerechnet, WCAG 2.1 AA:
 *   Rot     #922826  5,2:1  ✓ (Label, Link, Leitsatz-Auszeichnung)
 *   Charcoal#2D2D2D  8,7:1  ✓ (Überschrift, Batch-Rahmen)
 *   Dunkel  #3a3a2f  7,3:1  ✓ (Fließtext, Rolle — derselbe Ton wie auf den
 *                             übrigen gelben Flächen des Themes)
 *   Weiß    #FFFFFF  1,6:1  ✗ — auf dieser Fläche nirgends zulässig.
 */
.founders-text {
	background: var(--sp-gelb);
	color: var(--sp-charcoal);
	padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 72px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
/* Content im Founders-Textpanel begrenzen (Panel ist auf breiten Screens sehr breit) */
.founders-text > * { max-width: 620px; width: 100%; }
.founders-text .label {
	font-family: var(--sp-font-head);
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--sp-rot);
	margin-bottom: 24px;
	font-weight: 700;
}
.founders-text h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; margin: 0 0 24px; color: var(--sp-charcoal); }
.founders-text p {
	font-size: 16px;
	line-height: 1.8;
	color: #3a3a2f;
	margin: 0 0 20px;
	font-weight: 400;
}
.founders-names { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 32px; }
.founder-name { display: flex; align-items: center; gap: 16px; }
.founder-name .avatar {
	width: 56px; height: 56px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--sp-rot);
	flex-shrink: 0;
	margin: 0;
}
.founder-name .avatar img { width: 100%; height: 100%; object-fit: cover; }
.founder-name .name { font-family: var(--sp-font-head); font-weight: 700; font-size: 15px; color: var(--sp-charcoal); }
.founder-name .role { font-size: 13px; color: #3a3a2f; }
/*
 * Der Handwerk-Batch an der Stelle, an der bis zum 11.08.2026 der Leitsatz als
 * Satz stand. Dasselbe Element wie im
 * Stempel-Band, nur eine Nummer kleiner. `width: auto` ist nötig, weil
 * `.founders-text > *` allen direkten Kindern volle Breite gibt — sonst zöge
 * sich die Pille über die ganze Spalte.
 */
.founders-text .founders-stamp {
	font-size: clamp(0.95rem, 2vw, 1.2rem);
	padding: 11px 26px;
	width: auto;
	margin: 4px 0 0;
}
/* Über uns trägt weiter unten schon das Stempel-Band — dort nicht doppelt. */
.page-ueber-uns .founders-text .founders-stamp { display: none; }
.founders-text a { color: var(--sp-rot); text-decoration: none; font-weight: 700; }
.founders-text a:hover { text-decoration: underline; }
.founders-text .founders-more { margin: 28px 0 0; font-family: var(--sp-font-head); font-weight: 700; font-size: 15px; }
/* Auf der Über-uns-Seite kein „Mehr über uns"-Selbstlink im Founders-Block. */
.page-ueber-uns .founders-more { display: none; }

/* =====================================================================
   4. FACTS-STRIP (Charcoal, Kennzahlen Gelb)
   ===================================================================== */
.facts-strip {
	background: var(--sp-charcoal);
	padding: 60px var(--sp-gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.fact { text-align: center; flex: 1 1 auto; }
.fact .number {
	font-family: var(--sp-font-head);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 700;
	color: var(--sp-gelb);
	line-height: 1;
}
.fact .unit {
	font-size: 13px;
	color: rgba(255,255,255,0.65);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 10px;
}
.facts-divider { width: 1px; align-self: stretch; min-height: 60px; background: rgba(255,255,255,0.15); }

/* =====================================================================
   5. SERVICES (Off-White, 3-Karten-Raster mit 1px-Linien)
   Drei Karten in einer Reihe statt 2x2 — ein 2x2-Raster hätte unten
   rechts ein leeres Feld gelassen.
   ===================================================================== */
.services {
	padding: var(--sp-pad-y) var(--sp-gutter);
	background: var(--sp-off-white);
}
.services .section-label {
	font-family: var(--sp-font-head);
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--sp-rot);
	font-weight: 700;
	margin-bottom: 16px;
}
/*
 * Auch `.services-header h2`: Die Überschrift liegt in einer Gruppe und war
 * damit kein direktes Kind von `.services` — der Kindkombinator lief ins
 * Leere und die Überschrift blieb ganz ohne Formatierung.
 */
.services > h2,
.services-header h2 {
	font-size: clamp(1.875rem, 4.5vw, 2.75rem);
	line-height: 1.2;
	margin: 0 0 16px;
	max-width: 600px;
}
/*
 * Der Abstand zu den Leistungskacheln gehört an die Gruppe, nicht an die
 * Überschrift: WordPress setzt beim letzten Kind einer Blockgruppe
 * `margin-block-end: 0` und gewinnt gegen eine Regel auf der Überschrift.
 * Ohne diese Zeile klebten die Kacheln direkt an „Was wir für Sie tun."
 */
.services-header { margin-bottom: 40px; }
.services-intro {
	font-size: 16px;
	color: var(--sp-grau);
	max-width: 520px;
	margin-bottom: 56px;
}
.services-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid var(--sp-linie);
}
.service-card {
	padding: 48px clamp(24px, 2.4vw, 40px);
	border: 0;
	border-right: 1px solid var(--sp-linie);
	border-bottom: 1px solid var(--sp-linie);
	position: relative;
	background: var(--sp-off-white);
	transition: background-color 0.2s ease;
	text-decoration: none;
	color: inherit;
	display: block;
}
/*
 * Eine Reihe zu dritt: jede dritte Karte ohne Rechtsrahmen, die letzten drei
 * ohne Unterrahmen. Gilt so lange, wie die Kartenzahl durch drei teilbar ist
 * — bei einer vierten Kachel gehört die zweite Regel angepasst, sonst
 * verlieren zwei Karten der ersten Reihe ihren Unterrahmen.
 */
.services-cards .service-card:nth-child(3n) { border-right: 0; }
@media (min-width: 901px) {
	.services-cards .service-card:nth-last-child(-n+3) { border-bottom: 0; }
}
/*
 * Drei Spalten brauchen Platz. Unter 900px wird jede Karte schmaler als
 * rund 230px, dann stehen Überschrift und Zusatzzeile zweizeilig — deshalb
 * hier schon untereinander und nicht erst bei 768px wie beim übrigen Layout.
 */
@media (max-width: 900px) {
	.services-cards { grid-template-columns: 1fr; }
	.services-cards .service-card { border-right: 0; border-bottom: 1px solid var(--sp-linie); }
	.services-cards .service-card:last-child { border-bottom: 0; }
}
a.service-card:hover { background: var(--sp-weiss); }
.service-card .card-number {
	font-family: var(--sp-font-head);
	font-size: 48px;
	font-weight: 700;
	/*
	 * Marken-Rot statt des abgedunkelten Golds (11.08.2026). Die Ziffer ist
	 * Teil der Information (die Reihenfolge der Gewerke), braucht also
	 * Kontrast — Markengelb erreicht auf Off-White nur 1,6:1. Rot erreicht
	 * 7,8:1 und ist die zweite Markenfarbe, statt einen dritten Ton
	 * einzuführen, den man als Fremdkörper sieht.
	 */
	color: var(--sp-rot);
	margin-bottom: 20px;
	line-height: 1;
}
.service-card h3 { font-size: 22px; margin: 0 0 12px; color: var(--sp-charcoal); }
.service-card p { font-size: 15px; line-height: 1.7; color: var(--sp-grau); margin: 0; }
.service-card .card-add {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--sp-rot);
}
/*
 * Abbinder der Leistungs-Sektion als Band über die volle Breite
 * (vorher ein gelber Randstrich links).
 *
 * Kein Zahlenzeichen: Eine große 4 stünde direkt unter der Karte „04“ und
 * läse sich als Dopplung. Der Akzent ist stattdessen ein Punkt.
 */
.services-note {
	margin-top: 44px;
	border-top: 1px solid var(--sp-linie);
	padding-top: 26px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px 32px;
	flex-wrap: wrap;
}
.services-note-stark {
	margin: 0;
	font-family: var(--sp-font-head);
	font-size: clamp(17px, 1.7vw, 19px);
	font-weight: 700;
	line-height: 1.35;
	color: var(--sp-charcoal);
}
.services-note-stark::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--sp-gelb);
	margin-right: 11px;
}
.services-note-klein {
	margin: 0;
	max-width: 440px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sp-grau);
}

/*
 * Umbricht das Band, rückt der zweite Absatz unter den ersten. Ohne Einzug
 * stünde er dann links neben dem Punkt statt unter dem Text.
 */
@media (max-width: 720px) {
	.services-note-klein { padding-left: 20px; }
}

/* =====================================================================
   REFERENZEN-TEASER (Off-White/Weiß, Projektkarten -> /referenzen/)
   ===================================================================== */
.referenzen-teaser {
	padding: var(--sp-pad-y) var(--sp-gutter);
	background: var(--sp-weiss);
}
.referenzen-teaser .section-label {
	font-family: var(--sp-font-head);
	font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
	color: var(--sp-rot); font-weight: 700; margin-bottom: 16px;
}
.referenzen-teaser h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 16px; }
.referenzen-teaser .teaser-intro { font-size: 16px; color: var(--sp-grau); max-width: 640px; margin-bottom: 48px; line-height: 1.7; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card { border-radius: 12px; overflow: hidden; background: var(--sp-off-white); border: 1px solid var(--sp-linie); }
.project-card .project-media { aspect-ratio: 4/3; overflow: hidden; margin: 0; }
.project-card .project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-card .project-body { padding: 20px 24px 24px; }
.project-card .project-cat {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 12px;
	letter-spacing: 1px; text-transform: uppercase; color: var(--sp-rot);
}
.project-card h3 { font-size: 18px; margin: 6px 0 4px; }
.project-card .project-place { font-size: 14px; color: var(--sp-grau-hell); }
/*
 * Der Sammelverweis am Fuß einer Sektion („Alle Referenzen ansehen",
 * „Alle Termine ansehen"). Die Regel galt versehentlich nur im
 * Referenzen-Teaser; im Veranstaltungs-Teaser und auf der
 * Veranstaltungsseite klebte der Knopf ohne jeden Abstand an der Liste
 * darüber. Gilt jetzt überall, wo `.teaser-more` steht.
 */
.teaser-more { margin-top: 40px; }

/* =====================================================================
   VERANSTALTUNGS-HINWEIS (Off-White, kommende Events – später CPT-Query)
   ===================================================================== */
.veranstaltungen-teaser {
	padding-block: var(--sp-pad-y);
	background: var(--sp-off-white);
}
.veranstaltungen-teaser .section-label {
	font-family: var(--sp-font-head);
	font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
	color: var(--sp-rot); font-weight: 700; margin-bottom: 16px;
}
.veranstaltungen-teaser h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 16px; }
.veranstaltungen-teaser .teaser-intro { font-size: 16px; color: var(--sp-grau); max-width: 640px; margin-bottom: 48px; line-height: 1.7; }
/*
 * Farbiger Rahmen um die Terminliste.
 *
 * Der Rahmen sitzt um die Liste, nicht um die Sektion: Die Sektion läuft
 * `alignfull` bis an die Fensterkante, ein Rahmen dort klebte am Bildschirmrand.
 * Marken-Rot statt Gelb, weil die Fläche darunter Off-White ist — Gelb auf
 * Off-White trägt als Linie nicht (1,5:1 gegen den Grund).
 *
 * Bewusst auf `.veranstaltungen-teaser` eingegrenzt. Für die
 * Veranstaltungsseite lässt sich der Selektor um `.page-veranstaltungen`
 * erweitern.
 */
.veranstaltungen-teaser > .events-list,
.veranstaltungen-teaser > .events-empty,
.termine-rahmen {
	border: 2px solid var(--sp-rot);
	border-radius: 20px;
	padding: clamp(18px, 2.4vw, 28px);
	/* Ohne eigene Fläche: Die Terminkarten sind weiß, der Grund darunter
	   Off-White. Eine weiße Füllung im Rahmen ließe die Karten verschwinden. */
}
.events-list { display: grid; gap: 16px; }
.event-item {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: 24px;
	align-items: center;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	padding: 24px 28px;
}
.event-date {
	font-family: var(--sp-font-head);
	text-align: center;
	background: var(--sp-charcoal);
	color: var(--sp-weiss);
	border-radius: 10px;
	padding: 12px;
}
.event-date .day { font-size: 28px; font-weight: 700; line-height: 1; }
/* Mehrtägige Termine („19–20") brauchen in der 120px-Spalte etwas weniger Schrift. */
.event-date.is-range .day { font-size: 23px; letter-spacing: -0.5px; }
.event-date .month { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; color: var(--sp-gelb); }
.event-info h3 { font-size: 20px; margin: 0 0 4px; }
.event-info p { font-size: 14px; color: var(--sp-grau); margin: 0; }
/* Schmale Fenster: Bis 389 px passt die Karte nur mit kleineren Innenabständen
   in den roten Rahmen, bis 340 px (etwa 320 px oder starker Textzoom) nur mit
   dem Datum über dem Text. Ab 390 px unverändert. */
@media (max-width: 389px) {
	.event-item { padding: 18px 16px; gap: 14px; }
}
@media (max-width: 340px) {
	.events-list .event-item { grid-template-columns: 1fr; }
	.events-list .event-item .event-date { justify-self: start; min-width: 88px; }
}

/* =====================================================================
   6. IMAGE-BAND (dekorativer Vollflächen-Streifen aus V5, optional)
   ===================================================================== */
/* Bandhöhe 10.08.2026 von festen 400px auf mitwachsende Höhe gebracht (aus der
   Der Ausschnitt war zu eng. Nachgemessen: Bei 1440px
   Fensterbreite und 400px Höhe blieben von einem 3:2-Foto nur 42 % der
   Bildhöhe übrig. Mit 44vw sind es rund zwei Drittel. `object-position`
   steht jetzt mittig statt auf 25 % — bei der alten, flachen Höhe musste der
   Ausschnitt nach oben gezogen werden, das ist nun unnötig. */
.image-band { width: 100%; height: clamp(440px, 44vw, 680px); overflow: hidden; margin: 0; }
.image-band img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/*
 * Variante für Gruppenaufnahmen (09.08.2026, Karriereseite).
 *
 * Zwei Änderungen, beide nötig: Das Band wird höher, damit die Personenzone
 * überhaupt hineinpasst — bei 400 px zeigt der Streifen nur rund 42 % der
 * Bildhöhe, die Leute stehen aber über gut die Hälfte. Und der Ausschnitt
 * rutscht nach unten: `center 25%` zeigt vor allem Himmel und Hallendach,
 * die untere Reihe wurde auf Hüfthöhe abgeschnitten.
 */
/*
 * 16.08.2026: Der Wert stand auf 62 % und schnitt bei breitem Fenster die
 * Köpfe ab. Ursache ist die gedeckelte Bandhöhe: Das Bild wächst mit der
 * Fensterbreite weiter, der Streifen bleibt bei 700 px stehen, also wird der
 * Überschuss immer größer und ein prozentualer Versatz wandert immer tiefer
 * ins Bild.
 *
 * Nachgerechnet am tatsächlichen Motiv (3:2, Personen von 18 % bis 81 % der
 * Bildhöhe), sichtbarer Bereich beginnt bei:
 *
 *   1440 px Fenster →  7,7 %   1920 px → 11,3 %   2560 px → 14,7 %
 *
 * Über den Köpfen bleibt damit in jeder Breite Luft. Bei 62 % begann der
 * Ausschnitt auf 2560 px erst bei 28 % — unterhalb der Köpfe.
 *
 * Der frühere Kommentar, 25 % zeige „vor allem Himmel und Hallendach", galt
 * dem alten Motiv vor der Halle. Seit dem 12.08.2026 steht hier eine
 * Innenaufnahme aus der Ausstellung; oben liegt Decke, kein Himmel.
 *
 * Unterhalb von rund 1000 px Fensterbreite ist das Band höher als das Bild.
 * Dann greift der senkrechte Versatz nicht mehr, und `cover` beschneidet
 * seitlich: Auf dem Handy bleiben von den fünf Personen die mittleren drei.
 */
.image-band.is-gruppe { height: clamp(460px, 46vw, 700px); }
.image-band.is-gruppe img { object-position: center 25%; }

/* =====================================================================
   7. TEAM (Porträt-Raster) – „Die Gesichter hinter Südpower"
   ===================================================================== */
.team-section { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-weiss); }
.team-section .section-label {
	font-family: var(--sp-font-head);
	font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
	color: var(--sp-rot); font-weight: 700; margin-bottom: 16px;
}
.team-section h2 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); margin: 0 0 16px; }
.team-section .team-intro { font-size: 17px; color: var(--sp-grau); line-height: 1.7; max-width: 550px; margin-bottom: 56px; }
/* Standort-Zwischentitel (Freiburg und Lahr getrennt). */
.team-standort {
	font-family: var(--sp-font-head);
	font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
	color: var(--sp-charcoal); font-weight: 700;
	margin: 0 0 20px; padding-bottom: 10px;
	border-bottom: 1px solid rgba(45,45,45,0.15);
}
.team-portraits + .team-standort { margin-top: 56px; }
.team-portraits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-portrait { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; margin: 0; }
.team-portrait img { width: 100%; height: 100%; object-fit: cover; }
/*
 * Ohne Foto: Markenfläche mit Initialen statt eines fremden Gesichts.
 */
.team-portrait .portrait-initialen {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: var(--sp-rot);
	color: var(--sp-weiss);
	font-family: var(--sp-font-head); font-weight: 700;
	font-size: clamp(2.5rem, 5vw, 3.5rem); letter-spacing: 2px;
	padding-bottom: 48px; /* Platz für die Namenszeile darunter */
}
/* Namensband auf dem Porträt. */
.team-portrait .portrait-info {
	position: absolute; inset: auto 0 0 0;
	padding: 20px;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
	color: var(--sp-weiss);
}
.team-portrait .portrait-name { font-family: var(--sp-font-head); font-weight: 700; font-size: 15px; }
.team-portrait .portrait-role { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 2px; }

/* Gruppenbild des Vor-Ort-Teams unter den Einzelporträts. */
.team-gruppe { margin: 56px 0 0; }
/* Bandhöhe 11.08.2026 erhöht, damit auf dem
   Gruppenbild die Beine abgeschnitten sind. Der Anschnitt kam aus dem
   Fenster, nicht aus der Datei.

   16.08.2026 nachgemessen — die Höhe allein genügte nicht. Am Motiv
   ausgezählt stehen die Personen zwischen 37,5 % (Köpfe der hinteren Reihe)
   und 85 % der Bildhöhe (Schuhe der vorderen Reihe). Mit `center 45%` zeigte
   das Band bei 1150 px Lesebreite 14,5 % bis 82,4 %: oben lief Himmel mit,
   unten fehlten die Füße. `center 70%` verschiebt den Ausschnitt auf 22,5 %
   bis 90,4 % — die Gruppe steht vollständig im Bild, darüber bleibt ein
   Streifen Halle. Damit steht auch den
   Fokus auf die Menschen zu legen statt auf Lager und Gebäude. */
.team-gruppe img {
	width: 100%; height: clamp(300px, 40vw, 520px); object-fit: cover;
	object-position: center 70%; border-radius: 12px; display: block;
}
.team-gruppe figcaption {
	margin-top: 14px; font-size: 14px; color: var(--sp-grau); line-height: 1.6;
}

/* Standortkarte auf der Kontaktseite (inc/map.php, standort-map.js). */
.sp-standort-karte { margin-top: 40px; }
#sp-standort-map {
	height: clamp(280px, 38vw, 440px); border-radius: 16px; overflow: hidden;
	background: var(--sp-off-white); border: 1px solid var(--sp-linie);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sp-font-head); color: var(--sp-grau);
}
#sp-standort-map.is-loaded { display: block; }
/* Vor der Einwilligung wächst der Kasten mit dem Hinweistext. */
#sp-standort-map:not(.is-loaded) { height: auto; min-height: clamp(280px, 38vw, 440px); }
.standort-route { margin-top: 12px !important; }
.standort-route a {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 14px;
	color: var(--sp-rot); text-decoration: none; border-bottom: 1px solid currentColor;
}
.standort-route a:hover { color: var(--sp-charcoal); }

/* =====================================================================
   Kampagne „PV nach Vertragsabspeisung" (Elektro-Seite + Startseiten-Teaser)
   ===================================================================== */
/*
 * Gelb ist die Signalfarbe der Marke und kommt auf der Elektro-Seite sonst
 * nicht vor — die Kampagne soll zwischen off-white und weiß auffallen.
 * Textfarbe wie in der Karriere-Sektion, damit der Kontrast auf Gelb trägt.
 */
.pv-kampagne { background: var(--sp-gelb); padding: var(--sp-pad-y) var(--sp-gutter); color: #3a3a2f; }
.pv-kampagne-head { max-width: 760px; }
/*
 * Marken-Rot statt eines abgedunkelten Gelbtons: Der zunächst gewählte
 * Braunton #7a5c12 kam auf Gelb nur auf 3,96:1 und verfehlte damit die
 * WCAG-AA-Schwelle von 4,5:1 für kleinen Text. Rot erreicht 5,22:1 und ist
 * zugleich die Farbe, die alle übrigen Sektions-Label im Theme tragen.
 */
.pv-kampagne .section-label {
	font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; font-weight: 700; color: var(--sp-rot); margin: 0 0 16px;
}
.pv-kampagne h2 {
	font-family: var(--sp-font-head); font-size: clamp(1.875rem, 4.5vw, 2.75rem);
	line-height: 1.15; margin: 0 0 20px; color: var(--sp-charcoal);
}
.pv-kampagne-lead { font-size: 17px; line-height: 1.7; margin: 0 0 48px; }

.pv-wege { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pv-weg {
	background: rgba(255, 255, 255, 0.55); border-radius: 12px; padding: 24px 26px;
}
.pv-weg-icon { display: block; color: var(--sp-rot); margin-bottom: 12px; }
.pv-weg h3 { font-family: var(--sp-font-head); font-size: 18px; margin: 0 0 8px; color: var(--sp-charcoal); }
.pv-weg p { font-size: 15px; line-height: 1.65; margin: 0; }

.pv-kampagne-fuss {
	margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center;
	gap: 24px; justify-content: space-between;
}
.pv-kampagne-fuss p { font-size: 16px; line-height: 1.7; margin: 0; max-width: 560px; }

@media (max-width: 900px) {
	.pv-wege { grid-template-columns: 1fr; }
	.pv-kampagne-fuss { flex-direction: column; align-items: flex-start; }
}

/*
 * Teaser auf der Startseite: dieselbe Kampagne, auf einen Absatz eingedampft.
 * Rechts steht statt eines Symbolbilds, was wir konkret tun.
 *
 * Gelber Grund, Symbole in Rot.
 *
 * Kontraste gegen Gelb (#F5C946) nachgerechnet:
 *   Rot #922826 5,2:1 ✓ (Label, Symbole — für Grafik reichen 3:1)
 *   Charcoal #2D2D2D 8,7:1 ✓ · Dunkel #3a3a2f 7,3:1 ✓ · Weiß 1,6:1 ✗
 */
.pv-teaser {
	background: var(--sp-gelb); padding: var(--sp-pad-y) var(--sp-gutter); color: var(--sp-charcoal);
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.pv-teaser .section-label {
	font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; font-weight: 700; color: var(--sp-rot); margin: 0 0 16px;
}
.pv-teaser h2 {
	font-family: var(--sp-font-head); font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15; margin: 0 0 16px; color: var(--sp-charcoal);
}
.pv-teaser p { font-size: 16px; line-height: 1.75; margin: 0 0 28px; color: #3a3a2f; }
.pv-teaser-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pv-teaser-liste li {
	display: flex; align-items: flex-start; gap: 12px;
	font-family: var(--sp-font-head); font-weight: 700; font-size: 16px;
	color: var(--sp-charcoal);
	padding-bottom: 14px; border-bottom: 1px solid rgba(45,45,45,0.2);
}
.pv-teaser-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.pv-teaser-liste svg { color: var(--sp-rot); flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 900px) {
	.pv-teaser { grid-template-columns: 1fr; gap: 36px; }
}

/* =====================================================================
   8. KARRIERE (gelbe Fläche, Text + Bildraster, dunkler Button)
   ===================================================================== */
.karriere {
	background: var(--sp-gelb);
	padding: var(--sp-pad-y) var(--sp-gutter);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.karriere-text h2 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); line-height: 1.15; margin: 0 0 20px; }
.karriere-text p { font-size: 16px; line-height: 1.7; color: #3a3a2f; margin: 0 0 32px; }
.karriere-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.karriere-images .k-img { border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; margin: 0; }
.karriere-images .k-img img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   Arbeitsalltag · Bildstrecke zum Blättern (Karriere)
   ---------------------------------------------------------------------
   Vorher ein festes Zweierraster in der Lesebreite von 760 px. Die Sektion
   läuft jetzt auf der allgemeinen Inhaltsbreite (1150 px) wie FAQ, Stellen
   und Termine, und die Bilder liegen in einem Band zum Blättern.

   Das Scrollen macht der Browser; `karriere-slider.js` ergänzt nur die
   Pfeile und blendet sie aus, wenn nichts zu blättern ist.
   ===================================================================== */
/* `padding-block` statt der Kurzform: Die seitliche Breite kommt aus der
   gemeinsamen Sektionsregel weiter unten. Als Kurzform würde sie diese je nach
   Reihenfolge im Stylesheet überstimmen — genau der Fehler, der am 06.08. zwei
   Anläufe gekostet hat. */
.alltag-section {
	padding-block: var(--sp-pad-y);
	background: var(--sp-weiss);
}
.alltag-section .section-label {
	font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; color: var(--sp-rot); font-weight: 700; margin-bottom: 16px;
}
.alltag-section h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 20px; }
.alltag-lead { color: var(--sp-charcoal); line-height: 1.8; font-size: 16px; max-width: 62ch; margin: 0 0 36px; }

/*
 * Rahmen der rollenden Strecken. Seit 28.08.2026 teilen sich Bildstrecke
 * (Karriere) und Videostrecke (Referenzen, Ueber uns) dieselben Pfeile — die
 * Regeln haengen deshalb an beiden Klassen statt nur an `.alltag-slider`.
 */
.alltag-slider,
.video-slider { position: relative; }
.alltag-track {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0 0 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Die Bildkanten sollen nicht unter den Pfeilen kleben. */
	scroll-padding-inline: 4px;
	/* Rollbalken ausblenden, Scrollen bleibt möglich. */
	scrollbar-width: none;
}
.alltag-track::-webkit-scrollbar { display: none; }
.alltag-track:focus-visible,
.video-strecke:focus-visible { outline: 3px solid var(--sp-rot); outline-offset: 4px; border-radius: 14px; }

.alltag-item {
	flex: 0 0 clamp(230px, 30%, 330px);
	scroll-snap-align: start;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	/* 4:5 statt 3:4 (10.08.2026): In der Strecke stehen hoch- und querformatige
	   Aufnahmen nebeneinander, 3:4 beschnitt die querformatigen zu stark. */
	aspect-ratio: 4 / 5;
	background: var(--sp-off-white);
}
.alltag-item img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.4s ease;
}
.alltag-item:hover img { transform: scale(1.04); }

/* Pfeile: erst sichtbar, wenn das Skript etwas zu blättern gefunden hat. */
.slider-pfeil { display: none; }
.alltag-slider.hat-pfeile .slider-pfeil,
.video-slider.hat-pfeile .slider-pfeil {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--sp-charcoal);
	color: var(--sp-weiss);
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	transition: background-color 0.2s ease, opacity 0.2s ease;
	z-index: 2;
}
.alltag-slider.hat-pfeile .slider-pfeil:hover:not(:disabled),
.video-slider.hat-pfeile .slider-pfeil:hover:not(:disabled) { background: #000; }
.alltag-slider.hat-pfeile .slider-pfeil:disabled,
.video-slider.hat-pfeile .slider-pfeil:disabled { opacity: 0; pointer-events: none; }
.alltag-slider .slider-pfeil.ist-zurueck,
.video-slider .slider-pfeil.ist-zurueck { left: -10px; }
.alltag-slider .slider-pfeil.ist-vor,
.video-slider .slider-pfeil.ist-vor { right: -10px; }

@media (max-width: 640px) {
	.alltag-item { flex-basis: 78%; }
	/* Auf dem Handy wird gewischt; Pfeile über dem Bild wären nur im Weg. */
	.alltag-slider.hat-pfeile .slider-pfeil,
	.video-slider.hat-pfeile .slider-pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.alltag-track { scroll-behavior: auto; }
	.alltag-item img,
	.alltag-item:hover img { transition: none; transform: none; }
}

/* =====================================================================
   9. CTA (dunkel, zentriert, Button-Paar)
   ===================================================================== */
.cta { background: var(--sp-charcoal); padding: var(--sp-pad-y) var(--sp-gutter); text-align: center; }
.cta h2 { font-size: clamp(1.875rem, 5vw, 3rem); color: var(--sp-weiss); margin: 0 0 16px; }
.cta p { font-size: 17px; color: rgba(255,255,255,0.65); margin: 0 auto 40px; font-weight: 400; max-width: 560px; }
.cta-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* =====================================================================
   FOOTER
   ===================================================================== */
/* Heller Footer seit 11.08.2026.
   Vorher stand er auf Charcoal und trug deshalb die weiße Logo-Fassung. Der
   Footer trägt das farbige Originallogo; eine weiße Zweitfassung entfällt.
   Stattdessen soll der
   Hintergrund heller werden. Die Fläche ist deshalb Off-White, alle
   Schriftfarben sind von halbtransparentem Weiß auf Charcoal umgestellt.
   Gemessene Kontraste auf #FAFAF7: Charcoal #2D2D2D 13,2:1 · Fließtext
   #4a4a4a 8,5:1 · Rot #922826 7,8:1. */
.site-footer {
	background: var(--sp-off-white);
	padding: 60px var(--sp-gutter);
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	color: #4a4a4a;
	font-size: 14px;
	border-top: 1px solid rgba(45,45,45,0.12);
}
.site-footer h3, .site-footer h4 {
	color: var(--sp-charcoal);
	font-family: var(--sp-font-head);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 0 20px;
}
.site-footer p { line-height: 1.8; margin: 0 0 8px; }
.site-footer a { color: #4a4a4a; text-decoration: none; }
.site-footer a:hover { color: var(--sp-rot); text-decoration: underline; }
/* Seit 11.08.2026 steht der Footer auf Off-White und trägt das farbige
   Originallogo — die weiße Fassung ist raus.
   Wortmarke seit 10.08.2026 mit „Elektro", Seitenverhältnis 258:82. */
.footer-brand .brand-name {
	display: inline-block;
	/* von 152 auf 210 px verbreitert,
	   Höhe entsprechend dem Seitenverhältnis 258:82 mitgewachsen. Bei 210 px
	   liegt die Darstellung auf zweifacher Pixeldichte bei 163 % der
	   Quellauflösung — sichtbar weich wird es erst darüber. Scharf wird es
	   endgültig erst mit einer Vektorfassung. */
	width: 210px; height: 67px;
	/* 16.08.2026: dieselbe Grafik als WebP statt PNG — 151 KB werden zu 51 KB,
	   auf jeder der 13 Seiten. Bildinhalt, Maße und Transparenz sind
	   unverändert, die PNG-Fassung liegt weiterhin im Ordner. */
	background: url("../images/suedpower-logo-2026.webp") left center / contain no-repeat;
	text-indent: -9999px; overflow: hidden; white-space: nowrap;
	margin-bottom: 16px;
}
.footer-brand .brand-name span { color: var(--sp-gelb); }
.footer-stamp {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	/* Gelb auf dem jetzt hellen Footer
	   ergäbe 1,6:1. Rot auf Off-White sind 7,8:1. Der Stempel ist zugleich
	   etwas größer gesetzt, damit man ihn deutlich sehen
	   will. */
	color: var(--sp-rot);
	border: 2px solid var(--sp-rot);
	border-radius: 50px;
	padding: 8px 18px;
	font-size: 13px;
}
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 8px; }

/*
 * Klickziele im Fuß auf 24 px Höhe bringen (WCAG 2.2, 2.5.8 „Target Size
 * (Minimum)", Stufe AA).
 *
 * Gemessen am 28.08.2026 auf 360, 390 und 430 px Breite: Alle Verweise im Fuß
 * waren 17 px hoch — die Navigationsliste, die beiden Rufnummern, die
 * Notdienstnummer, die E-Mail-Adresse und die drei Rechtstexte. Die Ausnahme
 * für „inline" gilt hier nicht: Das sind Listen, keine Verweise mitten im
 * Fließtext.
 *
 * Gelöst über Innenabstand statt über eine größere Schrift, damit sich das
 * Schriftbild des Fußes nicht ändert. Der Ausgleich über einen negativen
 * Außenabstand hält die Zeilen dort, wo sie vorher standen; die 8 px Abstand
 * zwischen den Listenpunkten bleiben also erhalten.
 */
.site-footer a,
.site-footer-bottom a {
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
	min-height: 24px;
}
.site-footer-bottom {
	/* Seit 11.08.2026 hell wie der Footer darüber, aus derselben Umstellung. */
	background: var(--sp-off-white);
	border-top: 1px solid rgba(45,45,45,0.12);
	padding: 24px var(--sp-gutter);
	font-size: 13px;
	color: #4a4a4a;
	text-align: center;
}

/* =====================================================================
   SCROLL-REVEAL (dezent; via IntersectionObserver, s. scroll-reveal.js)
   ===================================================================== */
.sp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.sp-reveal.is-visible { opacity: 1; transform: none; }

/* =====================================================================
   DETAIL-FIXES (roh eingebettete Elemente aus wp:html, Buttons, Seiten)
   ===================================================================== */

/* Fixer Header überlagert Unterseiten nicht */
body:not(.home) .site-main { padding-top: var(--sp-header-h); }

/* Testimonial-Card: Zitat & Autorenzeilen sauber stapeln */
.testimonial-card blockquote { margin: 0; }
.testimonial-card figcaption { display: block; }
.testimonial-card .author,
.testimonial-card .author-detail { display: block; }

/* Facts: rohe Absätze ohne Browser-Margins */
.fact p { margin: 0; }

/* Founder-Namen: Name/Rolle stapeln */
.founder-name .name,
.founder-name .role { display: block; }

/* Team-Porträt: Name/Rolle stapeln */
.team-portrait .portrait-name,
.team-portrait .portrait-role { display: block; }

/* Referenz-/Event-Karten: rohe Elemente ohne Margins */
.project-card h3, .project-card p, .project-card span,
.event-info h3, .event-info p { margin: 0; }
.social-proof-header h2 { margin: 0; }

/* Karriere-Button (solid Charcoal) */
.btn-charcoal > .wp-block-button__link {
	background: var(--sp-charcoal);
	color: var(--sp-weiss);
}
.btn-charcoal > .wp-block-button__link:hover { background: #000; color: var(--sp-weiss); }

/*
 * Event-Button (kleiner Outline-Button).
 *
 * `inline-flex` statt `inline-block`: In der Schaltfläche steht seit dem
 * 29.07.2026 nur noch der Kalender-Link mit Icon plus Text. Mit `inline-block`
 * lag das Icon auf der Textgrundlinie statt in der optischen Mitte (rund 3,5 px
 * zu hoch), und `gap` blieb wirkungslos — die Regel ist spezifischer als
 * `.event-ics` und hat deren `inline-flex` überstimmt. Der Elternteil
 * `.event-action` ist ein Flex-Container, der daraus zusätzlich `block`
 * gemacht hat.
 */
.event-action a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	color: var(--sp-charcoal);
	border: 2px solid var(--sp-charcoal);
	border-radius: 50px;
	padding: 10px 20px;
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-decoration: none;
	white-space: nowrap;
}
.event-action a:hover { background: var(--sp-charcoal); color: var(--sp-weiss); }

/* Generische Inhaltsseiten (Impressum, Datenschutz, AGB, Barrierefreiheit …) */
.page-content { padding: 40px var(--sp-gutter) 80px; }
.page-content > * { max-width: 820px; margin-inline: auto; }
.page-content > h1 { font-size: clamp(1.875rem, 5vw, 3rem); margin-bottom: 24px; }
.page-content h2 { font-size: 28px; margin: 40px 0 16px; }
.page-content h3 { font-size: 22px; margin: 32px 0 12px; }
.page-content p, .page-content li { font-size: 16px; line-height: 1.8; color: var(--sp-charcoal); }
.page-content p, .page-content ul, .page-content ol { margin-bottom: 20px; }
.page-content ul, .page-content ol { padding-left: 1.4em; }
.page-content a { color: var(--sp-rot); text-decoration: underline; }
/* Knöpfe in Inhaltsseiten (404) sind keine Textlinks: eigene Farbe, kein
   Unterstrich, Abstand zwischen den Knöpfen. */
.page-content .wp-block-buttons { gap: 16px 20px; }
.page-content a.wp-block-button__link { color: inherit; text-decoration: none; }
/* Telefonnummern brechen nicht mitten in der Nummer um. */
main a[href^="tel:"] { white-space: nowrap; }
/* Hinweis unter den Kundenstimmen (Herkunft der Bewertungen). */
.rezensionen-hinweis { max-width: 760px; margin: 24px auto 0; font-size: 13px; line-height: 1.6; color: var(--sp-grau); text-align: center; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.founders { grid-template-columns: 1fr; }
	.founders-image { min-height: 360px; }
	.team-portraits { grid-template-columns: repeat(2, 1fr); }
	.projects-grid { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Burger schon ab 768 px statt erst ab 600 px.
 *
 * Gemessen am 29.08.2026 im Bereich zwischen 560 und 800 px — der erste
 * Prüflauf hatte ihn ausgelassen und war von 430 direkt auf 768 px gesprungen.
 * Dort klaffte eine Lücke: Der Navigation-Block schaltet mit
 * `overlayMenu: "mobile"` erst unter 600 px auf den Burger um, der mobile Kopf
 * dieses Themes greift dagegen schon bei 768 px und blendet unter anderem den
 * CTA-Knopf aus.
 *
 * Zwischen 601 und 767 px stand deshalb die vollständige Navigation in einer
 * Kopfzeile, die dafür nicht gebaut ist: **218 px hoch statt 80**, sechs
 * Punkte auf zwei Zeilen, „Über uns" und „Kontakt & FAQ" jeweils über zwei
 * Zeilen gebrochen, das Telefonsymbol allein in einer dritten Reihe.
 *
 * **Die Grenze liegt bei 1280 px, nicht bei 768.** Nachgemessen an den
 * Bestandteilen: Die Navigation braucht 710 px, die Rufnummer 143, der
 * CTA-Knopf 179, das Logo 183 — mit den Abständen zusammen rund 1290 px plus
 * Innenabstand. Unterhalb davon bricht die Kopfzeile um, und zwar nicht sauber:
 * Bei 1024 px fällt der gelbe Knopf allein in eine dritte Zeile links unter die
 * Navigation, die Kopfzeile wird 212 px hoch. Erst ab 1280 px stehen Logo und
 * Navigationszeile in der Form, für die das Design gebaut ist.
 *
 * Der Burger ist damit bis 1279 px zuständig. Auf einem Tablet im Querformat
 * ersetzt er eine sichtbare Navigation — das ist die bewusste Abwägung: ein
 * Burger ist besser als drei gestapelte Reihen mit einem verwaisten Knopf.
 *
 * Der Core setzt seine Regeln ab `min-width: 600px`; dieser Block dreht sie bis
 * 1279 px zurück. `:not(.is-menu-open)` bleibt außen vor, sonst ließe sich das
 * geöffnete Menü nicht mehr anzeigen.
 */
@media (min-width: 600px) and (max-width: 1279px) {
	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (max-width: 768px) {
	:root { --sp-header-h: 72px; }
	.site-nav { padding: 16px 22px; }
	/* Mobiler Header: Telefon nur als Icon (Tap-to-Call, Nummer bleibt in Hero/Footer/Menü),
	   redundanten CTA-Button ausblenden – sonst laufen beide über den rechten Rand. */
	.nav-cta-wrap { display: none !important; } /* schlägt WP-Core .wp-block-buttons.is-layout-flex */
	.nav-phone span { display: none; }
	.nav-phone { gap: 0; padding: 10px; }
	.nav-phone svg { width: 24px; height: 24px; }
	.opener-overlay { padding: 40px 22px 40px; }
	/* Das vergrößerte Logo über dem Opener eine Stufe zurück — auf dem Handy
	   teilt es sich die Zeile mit dem Telefonknopf. */
	body.home .site-header:not(.is-scrolled) .site-brand img,
	body.home .site-header:not(.is-scrolled) .wp-block-site-logo img { height: 48px; }
	.testimonial-grid { grid-template-columns: 1fr; }
	/* Das Leistungsraster steht schon ab 900px einspaltig, s. dort. */
	.karriere { grid-template-columns: 1fr; gap: 40px; }
	.facts-strip { gap: 32px 24px; }
	.facts-divider { display: none; }
	.fact { flex-basis: 40%; }
	.event-item { grid-template-columns: 88px 1fr; }
	.event-item .event-action { grid-column: 1 / -1; }
	.site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
	.projects-grid { grid-template-columns: 1fr; }
	.team-portraits { grid-template-columns: 1fr; }
	.site-footer { grid-template-columns: 1fr; }
	.fact { flex-basis: 100%; }
}

/* =====================================================================
   MOTION-REDUKTION (Barrierefreiheit)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sp-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* =====================================================================
   UNTERSEITEN (Sitemap) – gemeinsame Komponenten
   ===================================================================== */

/* Seiten-Kopf: schlanker Hero für Unterseiten */
.page-header { padding: 72px var(--sp-gutter) 56px; background: var(--sp-off-white); }
.page-header .section-label {
	font-family: var(--sp-font-head);
	font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
	color: var(--sp-rot); font-weight: 700; margin-bottom: 16px;
}
.page-header h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; margin: 0; max-width: 900px; }
.page-header h1 .has-gelb-color, .page-header h1 mark { color: var(--sp-gelb); background: transparent; }
.page-header .lead { font-size: 18px; line-height: 1.7; color: var(--sp-grau); max-width: 680px; margin-top: 20px; }

/*
 * Seitenkopf mit Bild (10.08.2026): Die vier Leistungsseiten trugen bis auf
 * ein Bildband nur Text. Der Kopf ist deshalb zweispaltig — Text links,
 * Foto rechts.
 *
 * Bewusst NEBEN dem Text statt dahinter: Text über einem Foto braucht eine
 * Verlaufsabdeckung und trotzdem eine Kontrastmessung je Bild. Nebeneinander
 * bleibt der Kontrast der Textfarbe unverändert, und das Bild darf hell sein.
 *
 * Die Fotos liegen bereits im Seitenverhältnis 4:5 zugeschnitten vor, damit im
 * Browser nichts weggeschnitten wird, was bei der Auswahl noch zu sehen war.
 */
.page-header.hat-bild,
.page-header.hat-batch {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding-block: clamp(48px, 6vw, 80px);
}
.page-header.hat-bild .kopf-text,
.page-header.hat-batch .kopf-text { min-width: 0; }
.page-header.hat-bild .kopf-bild {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	/* 10.08.2026 von 460 auf 580: Der Ausschnitt schnitt Kran und Personen an. */
	max-height: 580px;
}
.page-header.hat-bild .kopf-bild img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* Unter 900px steht das Bild wieder unter dem Text und wird flacher, sonst
   schiebt ein hochkantes Foto den Seiteninhalt weit nach unten. */
/*
 * Variante mit Stempel statt Foto (Referenzen-Seite).
 *
 * Gleiches Raster wie `.hat-bild`, damit es nur eine Bauweise für zweispaltige
 * Seitenköpfe gibt. Der Stempel ist derselbe wie auf der Startseite und auf
 * „Über uns" (`.stamp`) — Charcoal auf Gelb misst 8,74:1.
 *
 * `width: auto` gegen die Blockifizierung: Als Flex-Kind wird aus dem
 * `inline-block` des Stempels ein `block`, und die Pille zöge sich sonst über
 * die ganze Spalte.
 */
.page-header.hat-batch .kopf-batch {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sp-gelb);
	border-radius: 20px;
	padding: clamp(32px, 5vw, 56px) clamp(20px, 3vw, 32px);
	min-height: 200px;
}
.page-header.hat-batch .kopf-batch .stamp { width: auto; text-align: center; }

@media (max-width: 900px) {
	.page-header.hat-bild { grid-template-columns: 1fr; gap: 32px; }
	.page-header.hat-bild .kopf-bild { max-height: 300px; }
	.page-header.hat-batch { grid-template-columns: 1fr; gap: 32px; }
	.page-header.hat-batch .kopf-batch { min-height: 0; padding-block: 32px; }
}

/* Leistungsblöcke (Detailseiten) */
.leistung-blocks { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-weiss); }
.leistung-blocks .section-label { font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--sp-rot); font-weight: 700; margin-bottom: 16px; }
.leistung-blocks > h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 48px; max-width: 620px; }
.leistung-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.leistung-block { border: 1px solid var(--sp-linie); border-radius: 16px; padding: 32px; background: var(--sp-off-white); }
.leistung-block.is-primary { grid-column: 1 / -1; background: var(--sp-charcoal); color: var(--sp-weiss); border-color: var(--sp-charcoal); }
.leistung-block .tag { display: inline-block; font-family: var(--sp-font-head); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--sp-rot); margin-bottom: 12px; }
.leistung-block.is-primary .tag { color: var(--sp-gelb); }
.leistung-block h3 { font-size: 22px; margin: 0 0 10px; }
.leistung-block.is-primary h3 { color: var(--sp-weiss); }
.leistung-block p { font-size: 15px; line-height: 1.7; color: var(--sp-grau); margin: 0; }
.leistung-block.is-primary p { color: rgba(255,255,255,0.85); }

/* Prozess-Schritte */
.process-steps { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-off-white); }
.process-steps .section-label { font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--sp-rot); font-weight: 700; margin-bottom: 16px; }
.process-steps > h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 48px; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.step .step-num { font-family: var(--sp-font-head); font-size: 40px; font-weight: 700; color: var(--sp-rot); /* 11.08.2026: Marken-Rot statt drittem Gelbton, siehe .card-number */ line-height: 1; margin-bottom: 12px; }
.step h3 { font-size: 17px; margin: 0 0 8px; }
.step p { font-size: 14px; line-height: 1.6; color: var(--sp-grau); margin: 0; }

/* Gewerbe-/Landwirte-Hinweis (Charcoal-Karte auf Off-White) */
.gewerbe-hinweis { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-off-white); }
/* Die Karte lief auf 1120px und stand damit als einziges Element der Seite
   eingerückt (10.08.2026 auf volle Content-Breite gezogen). Die Textbreite
   begrenzt weiterhin der Absatz selbst, nicht die Karte. */
.gewerbe-hinweis .inner { max-width: none; background: var(--sp-charcoal); color: var(--sp-weiss); border-radius: 20px; padding: 56px 60px; }
.gewerbe-hinweis .section-label { font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--sp-gelb); font-weight: 700; margin-bottom: 16px; }
.gewerbe-hinweis h2 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); margin: 0 0 16px; color: var(--sp-weiss); }
.gewerbe-hinweis p { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.82); margin: 0 0 28px; font-weight: 400; max-width: 680px; }
@media (max-width: 768px) { .gewerbe-hinweis .inner { padding: 36px 28px; } }

/* Hinweis-/Notdienst-Box */
.hinweis-box { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-off-white); }
/* Kein Randstrich mehr, sondern ein Icon (10.08.2026) — dieselbe Form wie
   die Icon-Kacheln: Radius rundum, Icon
   setzt den farbigen Akzent. */
.notdienst-box { max-width: 820px; margin-inline: auto; background: var(--sp-weiss); border-radius: 12px; padding: 32px; box-shadow: 0 6px 24px rgba(0,0,0,0.04); }
.notdienst-box h3 { font-size: 20px; margin: 0 0 10px; color: var(--sp-rot); }
.notdienst-box p { font-size: 15px; line-height: 1.7; color: var(--sp-charcoal); margin: 0; }

@media (max-width: 1024px) {
	.leistung-grid { grid-template-columns: 1fr; }
	.steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.steps { grid-template-columns: 1fr; }
}

/* =====================================================================
   STYLEGUIDE-SEITE (lebende Doku der Design-Tokens)
   Alle Muster ziehen aus denselben Variablen wie das restliche Theme –
   Änderungen an theme.json / im Site-Editor wirken hier automatisch mit.
   ===================================================================== */
.styleguide { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-weiss); }
.sg-section { margin-bottom: 80px; }
.sg-section:last-child { margin-bottom: 0; }
.sg-section > h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; }
.sg-section > .sg-desc { color: var(--sp-grau); margin: 0 0 32px; max-width: 680px; line-height: 1.7; }

.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.sg-swatch { border: 1px solid var(--sp-linie); border-radius: 12px; overflow: hidden; background: var(--sp-weiss); }
.sg-swatch .chip { height: 96px; border-bottom: 1px solid var(--sp-linie); }
.sg-swatch .meta { padding: 12px 14px; }
.sg-swatch .meta .name { font-family: var(--sp-font-head); font-weight: 700; font-size: 14px; }
.sg-swatch .meta .token { font-size: 12px; color: var(--sp-grau-hell); font-family: var(--sp-font-head); }
.sg-swatch .meta .val { font-size: 12px; color: var(--sp-grau); font-variant-numeric: tabular-nums; }

.sg-type .sg-specimen { padding: 20px 0; border-top: 1px solid var(--sp-linie); }
.sg-type .sg-specimen:first-child { border-top: 0; }
.sg-type .sg-meta { font-family: var(--sp-font-head); font-size: 12px; letter-spacing: 1px; color: var(--sp-grau-hell); text-transform: uppercase; margin-bottom: 8px; }

.sg-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sg-row.on-dark { background: var(--sp-charcoal); padding: 24px; border-radius: 12px; }
.sg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; align-items: start; }

.sg-scale { display: grid; gap: 14px; }
.sg-scale .bar-row { display: flex; align-items: center; gap: 16px; }
.sg-scale .bar { height: 24px; background: var(--sp-gelb); border-radius: 4px; }
.sg-scale .bar-label { font-family: var(--sp-font-head); font-size: 13px; color: var(--sp-grau); min-width: 220px; }

/* Ohne Randstrich wie die übrigen Kästen seit 10.08.2026 — der Styleguide soll
   die geltende Bauweise zeigen, nicht die vorherige. */
.sg-note { background: var(--sp-off-white); padding: 20px 24px; border-radius: 12px; margin-top: 24px; }
.sg-note p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--sp-charcoal); }
.sg-note code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; font-size: 13px; }

/* =====================================================================
   UNTERSEITEN – Kontakt/FAQ · Karriere · Über uns · Referenzen
   ===================================================================== */

/* Gemeinsame Prosa-/Sektionsköpfe */
.section-lead { padding-block: var(--sp-pad-y); background: var(--sp-weiss); }
/*
 * „Lieber schreiben?" auf der Kontaktseite hatte als einzige Überschrift der
 * Seite keinen Abstand nach unten — das Formular begann unmittelbar darunter.
 * 40 px wie bei „Zwei Standorte in Südbaden" und „Häufige Fragen".
 */
.section-lead > h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 40px; }
.section-lead .section-label,
.kontakt-section .section-label,
.faq .section-label,
.stellen-section .section-label,
.prosa .section-label,
.referenzen-page .section-label,
.veranstaltungen-page .section-label {
	font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; color: var(--sp-rot); font-weight: 700; margin-bottom: 16px;
}

/* Prosa-Block (Geschichte/Philosophie) */
.prosa { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-weiss); }

/* =====================================================================
   Flächennutzung: Inhaltscontainer (06.08.2026)
   ---------------------------------------------------------------------
   Ausgangslage: 38 Breitenregeln, davon 36 linksbündig. Die Sektionen
   laufen über die volle Breite, der Inhalt darin saß in einer schmalen
   Spalte links — bei 1670 px Fenster blieben je nach Seite 33 bis 50 %
   rechts ungenutzt.

   Zwei Antworten, je nach Aufbau der Sektion:
   • Liegt die Überschrift MIT im Container (.inner), wird er zentriert.
     Aus 680 px Leere rechts werden zweimal 340 px links und rechts —
     die Zeilenlänge bleibt lesbar, die Fläche wirkt ruhig.
   • Sind Überschrift und Inhalt Geschwister (FAQ, Stellen, Termine,
     Formulare), wird der Inhalt verbreitert. Zentrieren ginge dort nicht,
     ohne dass die Überschrift daneben stehen bliebe.
   ===================================================================== */
.prosa .inner { max-width: 760px; margin-inline: auto; }
.prosa h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 24px; }
.prosa p { color: var(--sp-charcoal); line-height: 1.8; font-size: 16px; margin: 0 0 20px; }

/* =====================================================================
   Zeitstrahl (Über uns) – Firmengeschichte
   ===================================================================== */
.zeitstrahl-section { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-off-white); }
.zeitstrahl-section .inner { max-width: 760px; margin-inline: auto; }
.zeitstrahl-section .section-label {
	font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; color: var(--sp-rot); font-weight: 700; margin-bottom: 16px;
}
.zeitstrahl-section h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 48px; }

/* Die Linie liegt hinter den Jahreszahlen, die Punkte sitzen darauf. */
/*
 * Die Spalte ist 110 px breit, damit auch die einzige Spanne („2021–2025")
 * hineinpasst, ohne den Punkt auf der Linie zu berühren. Mit 96 px lag sie
 * 8 px darüber.
 */
.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 152px; position: relative; }
.zeitstrahl::before {
	content: ""; position: absolute; left: 130px; top: 6px; bottom: 6px;
	width: 2px; background: rgba(45, 45, 45, 0.14);
}
.zeitstrahl-station { position: relative; padding-bottom: 32px; }
.zeitstrahl-station:last-child { padding-bottom: 0; }

/*
 * Zeitleiste am Scrollfortschritt (11.08.2026).
 *
 * Vorher liefen alle Stationen gestaffelt ein, sobald die Liste ins Bild kam —
 * eine einmalige Bewegung, die vorbei war, bevor man die erste Station gelesen
 * hatte. Jetzt baut sich die Leiste beim Scrollen auf: Jede Station wird
 * einzeln aktiv, wenn sie die Fenstermitte erreicht, und die senkrechte Linie
 * wächst mit. Wer zurückscrollt, sieht die Bewegung erneut.
 *
 * Die Steuerung übernimmt `assets/js/zeitstrahl.js`. Ohne JavaScript greift
 * `.zeitstrahl:not(.ist-gesteuert)` und alles steht sofort da — die
 * Firmengeschichte darf nicht an einem Skript hängen.
 */
/*
 * Ruhezustand: gedämpft, aber lesbar. 0.25 war zu wenig — die noch nicht
 * erreichten Stationen sahen nach Darstellungsfehler aus statt nach
 * „kommt gleich". Der Text bleibt bei 0.55 auf Off-White mit rund 6:1 lesbar.
 *
 * KEIN horizontaler Versatz (11.08.2026): Ein `translateX` verschiebt die
 * ganze Station samt Jahreszahl in der linken Spalte. Aktive und inaktive
 * Zeilen fluchteten dadurch nicht mehr, und die Leiste sah verzogen aus —
 * Aktive und inaktive Zeilen fluchten dadurch nicht mehr. Die
 * Bewegung kommt jetzt allein aus der wachsenden Linie und den sich füllenden
 * Punkten; die Spalten stehen fest.
 */
.zeitstrahl.ist-gesteuert .zeitstrahl-station {
	opacity: 0.55;
	transition: opacity 0.45s ease;
}
.zeitstrahl.ist-gesteuert .zeitstrahl-station.ist-aktiv {
	opacity: 1;
}

/*
 * Die mitwachsende Linie liegt als zweites Element über der grauen Grundlinie.
 * `--fortschritt` setzt das Skript auf 0–1; `transform-origin: top` lässt sie
 * von oben nach unten laufen statt aus der Mitte.
 */
.zeitstrahl.ist-gesteuert::after {
	content: "";
	position: absolute;
	left: 130px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--sp-rot);
	transform: scaleY(var(--fortschritt, 0));
	transform-origin: top center;
	transition: transform 0.15s linear;
	/* Über der grauen Grundlinie (`::before`), aber unter den Punkten. */
	z-index: 1;
}
.zeitstrahl-station::before { z-index: 2; }

/*
 * Der Punkt der erreichten Station füllt sich. Im Ruhezustand steht er weiß
 * mit rotem Rand auf der Linie, aktiv ist er ausgefüllt — damit ist auf einen
 * Blick zu sehen, wie weit die Geschichte gelaufen ist.
 */
.zeitstrahl.ist-gesteuert .zeitstrahl-station::before {
	transition: background-color 0.35s ease, transform 0.35s ease;
}
.zeitstrahl.ist-gesteuert .zeitstrahl-station.ist-aktiv::before {
	background: var(--sp-rot);
	transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
	.zeitstrahl.ist-gesteuert .zeitstrahl-station {
		opacity: 1;
		transition: none;
	}
	.zeitstrahl.ist-gesteuert::after { display: none; }
}

/* Wer Bewegung reduziert haben will, bekommt die Stationen ohne Versatz. */
@media (prefers-reduced-motion: reduce) {
	.zeitstrahl.sp-reveal .zeitstrahl-station {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
.zeitstrahl-station::before {
	content: ""; position: absolute; left: -27px; top: 7px;
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--sp-weiss); border: 2px solid var(--sp-rot);
}
.zeitstrahl-jahr {
	position: absolute; left: -152px; top: 0; width: 110px;
	font-family: var(--sp-font-head); font-weight: 700; font-size: 17px;
	color: var(--sp-charcoal); letter-spacing: 0.3px; line-height: 1.5;
}
.zeitstrahl-text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--sp-charcoal); }

/* Die 600 Wärmepumpen sind das Ergebnis der Jahre davor, nicht eine Station mehr. */
.zeitstrahl-station.ist-ergebnis::before { background: var(--sp-rot); }
.zeitstrahl-station.ist-ergebnis .zeitstrahl-jahr { color: var(--sp-rot); }
.zeitstrahl-station.ist-ergebnis .zeitstrahl-text {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 19px;
}

@media (max-width: 720px) {
	/* Unter dem Text ist zu wenig Platz für eine eigene Jahresspalte. */
	.zeitstrahl { padding-left: 26px; }
	/*
	 * Beide Linien rücken mit: die graue Grundlinie und die rote
	 * Fortschrittslinie darüber. Ohne die zweite Zeile blieb der Fortschritt
	 * bei 130 px stehen und lief quer durch den Text (11.08.2026).
	 */
	.zeitstrahl::before,
	.zeitstrahl.ist-gesteuert::after { left: 4px; }
	.zeitstrahl-station::before { left: -27px; top: 5px; }
	.zeitstrahl-jahr { position: static; display: block; width: auto; margin-bottom: 4px; color: var(--sp-rot); }
	.zeitstrahl-section h2 { margin-bottom: 32px; }
}


/*
 * Sektionen, in denen Überschrift und Inhalt Geschwister sind (FAQ, Stellen,
 * Bewerbung, Termine, Kontaktformular): Zentrieren des Inhalts allein würde
 * die Überschrift links stehen lassen. Stattdessen bekommt die SEKTION einen
 * mitwachsenden Innenabstand — Kopf und Inhalt sitzen dadurch gemeinsam auf
 * einer Achse, und rechts bleibt nichts mehr übrig als links.
 *
 * Seit 10.08.2026 auf die volle Content-Breite (--sp-container, 1440px).
 * Vorher lagen hier 1150px, wodurch diese Sektionen
 * schmaler standen als Kacheln, Karte und Bildbänder daneben — nebeneinander
 * gesehen wirkte das wie ein Fehler, nicht wie Hierarchie. `--sp-gutter` ist
 * selbst ein `max`-Ausdruck und greift auf schmalen Fenstern als normaler
 * Seitenabstand.
 *
 * Bewusst NICHT hier: alles mit Lesebreite (`.prosa`, `.zeitstrahl-section`,
 * `.page-content`, 760–820px), die mittige Service-Sektion und der Stempel.
 * Dort ist die Begrenzung Absicht.
 */
.faq,
.stellen-section,
.section-lead,
.veranstaltungen-teaser,
.alltag-section {
	padding-inline: var(--sp-gutter);
}
.faq-list,
.stellen-liste,
.events-list { max-width: none; }

/*
 * Das Formular läuft auf einer Kante mit der Überschrift (09.08.2026).
 * Vorher war es auf 980 px begrenzt und saß damit mittig in einer
 * 1150 px breiten Sektion — links und rechts sprang es um 85 px gegenüber
 * Überschrift und Vortext ein, was wie ein Versehen aussah.
 *
 * Die einzeiligen Felder stehen ohnehin zu zweit nebeneinander
 * (`.sp-field-row`), sie werden dadurch nicht unangenehm lang. Nur das
 * Nachrichtenfeld nutzt die volle Breite — das ist bei einem Textfeld
 * unkritisch.
 */
.sp-form-wrap { max-width: none; }

/* Kontakt: Standorte */
.kontakt-section { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-off-white); }
.kontakt-section > h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 40px; }
.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.standort-card { background: var(--sp-weiss); border: 1px solid var(--sp-linie); border-radius: 16px; padding: 36px; }
.standort-card .badge { display: inline-block; font-family: var(--sp-font-head); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sp-charcoal); background: var(--sp-gelb); border-radius: 50px; padding: 4px 12px; margin-bottom: 16px; }
.standort-card h3 { font-size: 22px; margin: 0 0 12px; }
.standort-card p { color: var(--sp-grau); line-height: 1.8; margin: 0 0 12px; }
/*
 * Rufnummer, E-Mail-Adresse und „Route planen" in der Standortkarte waren
 * 18 px hoch (gemessen 28.08.2026 auf 390 px). Auf der Kontaktseite sind das
 * die Ziele, um derentwillen jemand die Seite überhaupt öffnet. Innenabstand
 * statt größerer Schrift, negativer Außenabstand hält die Zeilen an ihrem
 * Platz — dieselbe Lösung wie im Fuß (WCAG 2.5.8).
 */
.standort-card a {
	color: var(--sp-rot);
	font-weight: 400;
	text-decoration: none;
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
	min-height: 24px;
}
.standort-card a:hover { text-decoration: underline; }

/* Erreichbarkeit / Öffnungszeiten (USP-Band) */
.oeffnungszeiten { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-charcoal); color: var(--sp-weiss); text-align: center; }
.oeffnungszeiten .section-label { font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--sp-gelb); font-weight: 700; margin-bottom: 16px; }
.oeffnungszeiten .times { font-family: var(--sp-font-head); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 0 0 12px; line-height: 1.3; }
.oeffnungszeiten .times .accent { color: var(--sp-gelb); }
/*
 * Die Notdienstnummer ist ein Telefonlink und erbte damit das Marken-Rot aus
 * der allgemeinen Linkregel — #922826 auf Charcoal #2D2D2D ergibt 1,67:1.
 * Gemessen am 28.08.2026: praktisch unlesbar, und das ausgerechnet an der
 * Nummer, die im Störungsfall gewählt werden soll. Gelb auf demselben Grund
 * erreicht 8,74:1 und entspricht der Auszeichnung von „Notdienst:" davor.
 * Die Unterstreichung beim Überfahren bleibt als zweites Merkmal.
 */
.oeffnungszeiten a { color: var(--sp-gelb); text-decoration: none; }
.oeffnungszeiten a:hover,
.oeffnungszeiten a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.oeffnungszeiten p { color: rgba(255,255,255,0.72); margin: 0; font-weight: 400; }

/* FAQ-Accordion – natives details/summary (tastaturbedienbar, ohne JS) */
.faq { padding-block: var(--sp-pad-y); background: var(--sp-off-white); }
.faq > h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 40px; }
.faq-list { /* Breite kommt von der Sektion */ }
.faq-item { border-bottom: 1px solid var(--sp-linie); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--sp-font-head); font-weight: 700; font-size: 18px; color: var(--sp-charcoal); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--sp-font-head); font-size: 26px; line-height: 1; color: var(--sp-rot); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-answer { padding: 0 0 24px; }
.faq-item .faq-answer p { color: var(--sp-grau); line-height: 1.8; margin: 0; font-size: 16px; max-width: 760px; }

/* Formular-Platzhalter */
.formular-platzhalter { border: 2px dashed var(--sp-linie); border-radius: 16px; padding: 40px; background: var(--sp-weiss); color: var(--sp-grau); max-width: 980px; margin-inline: auto; }
.formular-platzhalter strong { color: var(--sp-charcoal); font-family: var(--sp-font-head); display: block; margin-bottom: 8px; }

/* Karriere: Stellen */
.stellen-section { padding-block: var(--sp-pad-y); background: var(--sp-weiss); }
.stellen-section > h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 32px; }
.stellen-liste { display: grid; gap: 16px; }
.stelle-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: var(--sp-off-white); border: 1px solid var(--sp-linie); border-radius: 12px; padding: 24px 28px; flex-wrap: wrap; }
.stelle-card h3 { font-size: 20px; margin: 0 0 4px; }
.stelle-card .meta { color: var(--sp-grau-hell); font-size: 14px; }

/*
 * Warum-Grid (Veranstaltungen, Über uns)
 *
 * `auto-fit` statt `auto-fill` (09.08.2026): auto-fill legt so viele Spalten
 * an, wie hineinpassen, und lässt die überzähligen leer stehen — bei drei
 * Kacheln in einer 1150 px breiten Sektion entstanden fünf Spalten, die
 * Kacheln drängten sich links und rechts blieb ein Drittel frei. auto-fit
 * lässt die leeren Spalten zusammenfallen, die vorhandenen füllen die Breite.
 */
.warum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.warum-item { background: var(--sp-off-white); border-left: 3px solid var(--sp-gelb); border-radius: 0 12px 12px 0; padding: 28px; }

/*
 * Kacheln mit Icon tragen den gelben Randstrich nicht mehr (09.08.2026):
 * Das Icon setzt den farbigen Akzent bereits, beides nebeneinander war zu viel.
 * Die Variante gilt nur, wo Icons stehen — auf „Über uns" laufen dieselben
 * Kacheln ohne Icon, dort bleibt der Strich das einzige Gestaltungsmerkmal.
 */
.warum-grid.is-icons .warum-item {
	border-left: 0;
	border-radius: 12px;
}
.warum-item h3 { font-size: 17px; margin: 0 0 6px; }
.warum-item p { color: var(--sp-grau); font-size: 14px; line-height: 1.6; margin: 0; }

/* Icon der Veranstaltungsarten: Markenrot auf zurückhaltender gelber Fläche. */
.warum-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: rgba(245, 201, 70, 0.22);
	color: var(--sp-rot);
}
.warum-icon svg { display: block; }

/* Referenzen: Karte-/Grid-Platzhalter + Kundenstimmen */
.referenzen-page { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-weiss); }
/*
 * Die Überschrift stand ohne jeden Abstand auf den Filter-Chips der Karte
 * (gemessen 0 px). Sie hatte als einzige Sektions-Überschrift keine eigene
 * Regel und damit weder Größe noch Außenabstand. 40 px wie bei den
 * Kundenstimmen darunter.
 */
.referenzen-page > h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 40px; }
/* Rückfall, wenn die Karte nicht lädt — als reguläre Fläche, nicht als
   gestrichelter Platzhalter. */
.map-leer { border-radius: 16px; background: var(--sp-off-white); color: var(--sp-grau); display: flex; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; line-height: 1.6; border: 1px solid var(--sp-linie); }

/* Einblicke ins Team auf der Karriereseite (Kundenbilder, August 2026). */
.team-einblicke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-einblicke figure { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.team-einblicke img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .team-einblicke { grid-template-columns: 1fr; } }

/* Trefferflächen unter 24px vergrößern, ohne das Layout zu verschieben
   (WCAG 2.5.8, gemessen am 10.08.2026). Das unsichtbare Pseudoelement liegt
   über dem Element und fängt den Klick. */
.wp-block-navigation__submenu-icon { position: relative; }
.wp-block-navigation__submenu-icon::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 34px; height: 34px; transform: translate(-50%, -50%);
}
/* Der Elternknopf darf die Fläche seitlich nicht kappen. */
/* WordPress gibt dem Knopf eigene Maße; Padding allein kam auf 23px Breite —
   ein Pixel unter der Anforderung. Deshalb die Mindestmaße direkt setzen. */
.wp-block-navigation__submenu-icon { min-width: 26px; min-height: 26px; display: inline-flex; align-items: center; justify-content: center; }
/* Der Knopf selbst darf die Fläche nicht abschneiden. */
.wp-block-navigation__submenu-icon { overflow: visible; }
/* Die Telefonnummer im Kopf lag mit 24px exakt auf der Mindestgröße —
   ein Pixel Puffer nach oben und unten macht sie eindeutig konform. */
.nav-phone { padding-block: 3px; }

.sp-form-fluent .ff-el-form-check-input { position: relative; }
.sp-form-fluent .ff-el-form-check-input::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 24px; height: 24px; transform: translate(-50%, -50%);
}

/* Der Rückfalltext im video-Element ist nur ohne Videounterstützung sichtbar,
   wurde aber als Text auf gleichfarbigem Grund gemessen. */
.video-item video { color: var(--sp-weiss); }

/* Videostrecke (Kundenvideos, August 2026).
   Die Videos tragen `preload="none"`, geladen wird erst beim Abspielen. */
.video-strecke {
	display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
	/* Der Abstand nach oben steht hier und nicht am Absatz darueber: In den
	   Patterns liegt die Strecke in einem `wp:html`-Block, und WordPress nullt
	   den unteren Abstand des letzten Absatzes einer Gruppe. Der Einleitungstext
	   klebte dadurch direkt auf der ersten Kachel.
	   Oben und unten Platz fuer den angehobenen Zustand beim Ueberfahren und
	   den Schatten: `overflow-x: auto` laesst den senkrechten Ueberlauf nicht
	   stehen, sondern beschneidet ihn — die angehobene Kachel wurde oben glatt
	   abgeschnitten, was den Schatten wie eine harte Kante aussehen liess. Der Abstand nach oben ist um dieselben 10px
	   verringert, damit die Sektion optisch unveraendert bleibt. */
	padding: 10px 0 24px; margin: 26px 0 0;
	scrollbar-width: thin;
	/* Hoch- und Querformat stehen nebeneinander und sind damit verschieden
	   hoch. Ohne diese Zeile zieht der Flexcontainer alle Kacheln auf gleiche
	   Höhe und die Bildunterschrift des kürzeren Videos steht frei in der
	   Luft statt unter ihrem Bild. */
	align-items: flex-start;
}
.video-item {
	/* Groesser als die 42 % vom 16.08.2026: Drei kleine Kacheln nebeneinander
	   lasen sich als Miniaturenliste, nicht als Videos. */
	flex: 0 0 clamp(280px, 48%, 540px);
	scroll-snap-align: start; margin: 0;
	position: relative;
	transition: transform .3s ease;
}
/*
 * Seitenverhältnis je Video (16.08.2026).
 *
 * Hier stand `aspect-ratio: 16/9` fest. Sechs der sieben Aufnahmen von den
 * Energieabenden sind aber hochkant — `object-fit: cover` schnitt sie auf rund
 * ein Drittel ihrer Bildhöhe zusammen und köpfte die Referenten. Für die
 * Karriereseite war das am 12.08. bereits behoben, die Veranstaltungsstrecke
 * blieb übrig.
 *
 * Das Verhältnis kommt jetzt aus `--sp-video-ar`; `inc/videos.php` setzt die
 * Variable je Kachel aus den gemessenen Anzeigemaßen. Ein gemeinsamer Wert
 * für die Strecke reicht nicht: Sie enthält 16:9, 9:16 und 3:4 nebeneinander.
 * Der Rückfall 16/9 greift nur, wenn jemand einen Eintrag ohne Maße ergänzt.
 *
 * `height: auto` ist hier keine Kosmetik, sondern Voraussetzung: Die
 * width/height-Attribute am `video` gelten als Darstellungshinweis und setzen
 * sonst eine feste Höhe in Pixeln. Sind Breite und Höhe beide gesetzt, wird
 * `aspect-ratio` schlicht ignoriert — die erste Kachel stünde dadurch
 * mit 460×576 statt 460×259 da. Wer die Zeile entfernt, holt den Fehler zurück.
 */
.video-item video {
	width: 100%; height: auto; aspect-ratio: var(--sp-video-ar, 16 / 9); display: block;
	background: var(--sp-charcoal);
	object-fit: cover;
	/* Die Rundung sitzt seit dem 20.08.2026 auf der Buehne, nicht mehr hier:
	   Nur ein Elternelement mit `overflow: hidden` kann das vergroesserte
	   Standbild beim Ueberfahren beschneiden. */
	transition: transform .45s ease;
}
/* Ein hochkantes Video würde in der 460px breiten Kachel über 800px hoch —
   schmalere Kachel, damit das Band eine bedienbare Höhe behält. */
.video-item.video-hoch {
	flex: 0 0 clamp(200px, 26%, 300px);
}

/*
 * Abspielknopf über dem Standbild.
 *
 * Die Videos zeigen wegen `preload="none"` bis zum Start nur ihr Standbild;
 * dass dahinter ein Video steckt, war allein an der Bedienleiste zu ahnen.
 * Der Knopf sitzt in der Bildmitte und lässt die Leiste am unteren Rand frei,
 * damit die Bedienelemente des Browsers erreichbar bleiben.
 *
 * Sichtbar wird er erst, wenn das Skript aus `inc/videos.php` der Strecke
 * `video-strecke--js` gegeben hat — ohne JavaScript stünde dort sonst eine
 * Schaltfläche, die nichts tut.
 */
.video-buehne {
	position: relative; display: block; overflow: hidden;
	border-radius: 14px; background: var(--sp-charcoal);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
	transition: box-shadow .3s ease, transform .3s ease;
}
.video-play {
	display: none;
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 68px; height: 68px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--sp-rot); color: var(--sp-weiss);
	cursor: pointer;
	align-items: center; justify-content: center;
	/* Schlagschatten seit 20.08.2026: Auf hellen Standbildern — der Ausstellung
	   in Lahr etwa — schwamm der Kreis vorher in der Fläche. */
	box-shadow: 0 6px 22px rgba(0, 0, 0, .32);
	transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}
.video-strecke--js .video-play { display: flex; }
/* Das Dreieck gefüllt statt nur konturiert: Auf einem Foto liest sich eine
   reine Linienform nicht als Schaltfläche. Der kleine Versatz rückt die
   optische Mitte des Dreiecks auf die Mitte des Kreises. */
.video-play .sp-icon { fill: currentColor; margin-left: 3px; }
.video-play:hover { background: var(--sp-charcoal); transform: translate(-50%, -50%) scale(1.06); }
/*
 * Zweifarbiger Fokusring statt des roten aus der Grundregel: Der wäre auf dem
 * roten Knopf unsichtbar. Der weiße Rand trennt vom Knopf, der rote Ring
 * darum vom Standbild — ein einfarbiger Ring verschwindet je nach Motiv.
 */
.video-play:focus-visible {
	outline: 3px solid var(--sp-weiss);
	outline-offset: 0;
	box-shadow: 0 0 0 6px var(--sp-rot);
}
/* Läuft das Video, ist der Knopf weg — `visibility` nimmt ihn zugleich aus
   der Tabreihenfolge. Das Skript setzt den Fokus deshalb auf das Video. */
.video-item.is-playing .video-play { visibility: hidden; opacity: 0; }

/*
 * Mitarbeiterstimmen (12.08.2026): Die vier Interviews sind mit dem Handy im
 * Hochformat aufgenommen. In der
 * 16:9-Kachel der übrigen Videostrecken würde `object-fit: cover` den
 * Bildausschnitt auf einen schmalen Streifen zusammenschneiden und die
 * Sprechenden köpfen. Deshalb hier schmalere Kacheln.
 *
 * Das Seitenverhältnis stand hier bis zum 16.08.2026 fest auf 9:16; es kommt
 * jetzt wie in der Veranstaltungsstrecke aus den gemessenen Maßen. Bei diesen
 * vier Dateien sind das 540×960 — also unverändert 9:16.
 */
.team-stimmen .video-item {
	flex: 0 0 clamp(200px, 26%, 280px);
}
.video-item figcaption {
	margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--sp-grau);
}

/*
 * Kachel im Zuschnitt gängiger Videoportale.
 *
 * Drei Punkte sind dafür nötig: Die graue Bedienleiste des Browsers liegt
 * sonst dauerhaft über dem Standbild, der Titel steht als hellgrauer
 * Fließtext darunter, und die Kachel reagiert nicht auf den Mauszeiger.
 *
 * Alles hier hängt an `.video-strecke--js`, das Skript aus `inc/videos.php`
 * setzt es. Ohne JavaScript bleibt die Kachel, wie sie war: Bedienleiste
 * sichtbar, Titel als Text darunter, kein Overlay, das etwas verdecken könnte.
 * Dieselbe Bedingung trägt schon der Abspielknopf.
 */
.video-strecke--js .video-item figcaption {
	position: absolute; inset: auto 0 0 0;
	margin: 0; padding: 64px 18px 16px;
	color: var(--sp-weiss); font-size: 15px; line-height: 1.45;
	/*
	 * Der Verlauf statt einer Fläche: Auf hellen Motiven trägt er den Text,
	 * auf dunklen fällt er nicht auf.
	 *
	 * Die Abdeckung ist bis 55 % der Höhe nahezu voll und blendet erst darüber
	 * aus. Grund: Der Verlauf hängt an der Höhe der `figcaption`, und die
	 * wächst mit der Zeilenzahl. Bei einem gleichmäßigen Verlauf steht die
	 * oberste Zeile eines langen Titels genau dort, wo die Abdeckung am
	 * dünnsten ist — mit den ersten Werten (.82 auf.55 bei 42 %) waren das
	 * einzeilig 0,61 Alpha, dreizeilig nur 0,45. Auf der Karriereseite fiel
	 * der dreizeilige Titel damit auf 3,68:1 und unter 700 px auf 2,95:1,
	 * beides unter den 4,5:1 aus WCAG AA. Der Text beginnt wegen der 64 px
	 * Innenabstand bei höchstens 56 % der Kastenhöhe und liegt damit in jedem
	 * Fall im gedeckten Bereich.
	 *
	 * Der Textschatten ist die zweite Sicherung: Er wirkt unabhängig vom
	 * Motiv und von der Zeilenzahl.
	 */
	background: linear-gradient(to top,
		rgba(0, 0, 0, .86) 0%,
		rgba(0, 0, 0, .84) 55%,
		rgba(0, 0, 0, .62) 78%,
		rgba(0, 0, 0, 0) 100%);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
	border-radius: 0 0 14px 14px;
	/* Der Titel liegt über der Bedienleiste des laufenden Videos. Er
	   verschwindet dort zwar, aber solange die Blende läuft, dürfen Klicks
	   nicht an ihm hängen bleiben. */
	pointer-events: none;
	transition: opacity .25s ease;
}
/* Läuft das Video wirklich, ist die Fläche frei — Titel und Laufzeit würden
   sonst über der Bedienleiste stehen. Bei der stummen Vorschau bleiben beide:
   Dort ist der Titel das Einzige, was die Kachel noch benennt. */
.video-strecke--js .video-item.is-playing figcaption { opacity: 0; }

/*
 * Laufzeit als Zeichen auf dem Standbild.
 *
 * Sie beantwortet die Frage, die vor jedem Klick steht: Sind das zwanzig
 * Sekunden oder zwei Minuten? Bei den Kundeninterviews ist das der Unterschied
 * zwischen 20 s und 2:02. `aria-hidden`, weil die Angabe im `aria-label` des
 * Videos benannt steht — als nackte Zahl vorgelesen hätte sie keinen Bezug.
 */
.video-dauer {
	/* Oben rechts, nicht unten: Unten steht der Titel, und bei den 280 px
	   schmalen Hochkant-Kacheln der Karriereseite läuft er über drei Zeilen bis
	   in die Ecke. Die Laufzeit lag dann auf dem Text (20.08.2026 gemessen). */
	position: absolute; right: 12px; top: 12px;
	padding: 3px 8px; border-radius: 6px;
	background: rgba(0, 0, 0, .72); color: var(--sp-weiss);
	font-family: var(--sp-font-head); font-weight: 400;
	font-size: 13px; line-height: 1.4; letter-spacing: .3px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	transition: opacity .25s ease;
}
.video-strecke--js .video-item.is-playing .video-dauer { opacity: 0; }

/* Der Titel steht bei Overlay-Darstellung im Bild, nicht darunter — sonst
   bliebe unter der Kachel eine leere Zeile stehen. */
.video-strecke--js .video-item figcaption { margin-top: 0; }

/*
 * Bewegung beim Überfahren. Nur mit echtem Mauszeiger: Auf dem Telefon gibt es
 * kein Hover, dort löst eine Berührung sonst Vorschau und Klick zugleich aus.
 */
@media (hover: hover) {
	/*
	 * Angehoben wird die ganze Kachel, nicht nur die Bühne.
	 *
	 * Die `figcaption` hängt an der `figure`, der Schatten an der Bühne
	 * darin. Wandert nur die Bühne, bleibt der Titel vier Pixel darunter
	 * stehen — der dunkle Verlauf steht dann mit eckiger Unterkante unter dem
	 * gerundeten Bildrand auf dem Seitenhintergrund. Nachgemessen: Bühne
	 * endete bei 409,6 px, Titel bei 413,6 px.
	 */
	.video-strecke--js .video-item:hover { transform: translateY(-4px); }
	.video-strecke--js .video-item:hover .video-buehne {
		/* Flach und weich: Ein Sprung von 2 px Versatz im Ruhezustand auf
		   18 px liest sich als Absetzen der Kachel statt als Anheben. */
		box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
	}
	/* Der Zoom greift nur auf dem Standbild. Läuft das Video, wäre er ein
	   Beschnitt des Bildes, das jemand gerade ansieht. */
	.video-strecke--js .video-item:hover:not(.is-playing) video { transform: scale(1.045); }
	/*
	 * Nur die Größe, nicht die Farbe. Eine Umfärbung schon beim Überfahren der
	 * Kachel läse sich auf hellem Standbild als abgeschalteter Knopf, und das
	 * Marken-Rot wäre weg, sobald der Zeiger irgendwo auf der Kachel steht.
	 * Dunkel wird er erst bei direktem Hover; diese Regel steht weiter unten.
	 */
	.video-strecke--js .video-item:hover .video-play {
		transform: translate(-50%, -50%) scale(1.06);
	}
}

/*
 * Weniger Bewegung, wenn das System danach fragt (BFSG). Die stumme Vorschau
 * schaltet `inc/videos.php` an derselben Bedingung ab; hier fallen Zoom,
 * Anheben und die Blenden weg. Die Kachel bleibt vollständig bedienbar.
 */
@media (prefers-reduced-motion: reduce) {
	.video-strecke--js .video-item,
	.video-strecke--js .video-item video,
	.video-strecke--js .video-item .video-buehne,
	.video-strecke--js .video-item .video-play,
	.video-strecke--js .video-item figcaption,
	.video-strecke--js .video-item .video-dauer { transition: none; }
	.video-strecke--js .video-item:hover { transform: none; }
	.video-strecke--js .video-item:hover .video-buehne { transform: none; }
	.video-strecke--js .video-item:hover:not(.is-playing) video { transform: none; }
	/* Der Knopf stand bis zum 20.08.2026 nicht in dieser Liste und wuchs
	   weiter mit — die Grundregel skaliert ihn beim Überfahren, und die
	   Zeile darüber nimmt nur Bühne und Bild zurück. */
	.video-strecke--js .video-item:hover .video-play,
	.video-play:hover { transform: translate(-50%, -50%); }
}

/*
 * Einleitungstext über einer Videostrecke.
 *
 * Zwei Fehler auf einmal am 20.08.2026: Der Absatz lief über die volle
 * Sektionsbreite — bei 1400 px sind das rund 190 Zeichen je Zeile, doppelt so
 * viel wie lesbar ist — und er saß ohne Abstand auf der ersten Kachel. Die
 * Lesebreite steht hier, der Abstand an der Strecke.
 */
.video-lead {
	max-width: 62ch; color: var(--sp-grau);
	font-size: 16px; line-height: 1.8; margin: 0;
}
@media (max-width: 700px) {
	/*
	 * Titel zurück unter das Bild — aber nur bei den queren Kacheln.
	 *
	 * Gerechnet für 430 px Bildschirmbreite: Die Kachel ist dann rund 320 px
	 * breit und bei 16:9 nur 180 px hoch. Ein dreizeiliger Titel samt Verlauf
	 * braucht rund 145 px und läge damit auf vier Fünfteln des Bildes. Auf dem
	 * Schreibtisch ist dieselbe Kachel 540 × 304 px groß, dort sind es 40 %.
	 *
	 * Hochkant bleibt das Overlay: Die Kachel ist dort bei 62 % Breite rund
	 * 430 px hoch, derselbe Titel nimmt ein Drittel ein. Genau dafür ist die
	 * Darstellung gedacht.
	 */
	.video-strecke--js .video-item.video-quer figcaption {
		position: static; inset: auto;
		margin-top: 10px; padding: 0;
		background: none; color: var(--sp-grau);
		border-radius: 0; font-size: 14px; line-height: 1.5;
		text-shadow: none;
	}
	/*
	 * Steht der Titel unter dem Bild, bleibt er beim Abspielen stehen. Die
	 * Regel weiter oben blendet ihn aus, damit er nicht über der Bedienleiste
	 * liegt — hier liegt er gar nicht im Bild. Ohne diese Zeile bleibt beim
	 * Abspielen eine leere Zeile von 42 px unter der Kachel stehen.
	 */
	.video-strecke--js .video-item.video-quer.is-playing figcaption { opacity: 1; }
	.video-item { flex-basis: 82%; }
	/* Hochkant bleibt auch am Telefon schmaler als quer: Bei 82% Breite wäre
	   eine einzige Kachel rund anderthalb Bildschirme hoch. */
	.video-item.video-hoch { flex-basis: 62%; }
	/* Die Karrierestrecke behält ihre Breite — die Zeile darüber würde sie
	   sonst schmaler machen. */
	.team-stimmen .video-item.video-hoch { flex-basis: clamp(200px, 26%, 280px); }
}

/* Einblicke auf der Karriereseite: volle Breite, Bilder und Videos als ein
   zusammenhängender Block (10.08.2026). Zwei Videos brauchen kein Blätterband —
   hier stehen sie nebeneinander und füllen die Reihe. */
.einblicke-section .einblicke-lead {
	max-width: 62ch; color: var(--sp-grau); font-size: 16px; line-height: 1.8; margin: 0 0 40px;
}
.einblicke-section .team-einblicke { margin-bottom: 48px; }
.einblicke-section .video-hinweis {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 14px;
	letter-spacing: 1px; text-transform: uppercase; color: var(--sp-rot);
	margin: 0 0 20px;
}
.einblicke-section .video-strecke {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
	overflow: visible;
}
.einblicke-section .video-item { flex: none; }
/* ACHTUNG: Dieses feste Verhältnis überstimmt `--sp-video-ar` und stammt aus
   einer früheren Fassung mit zwei Videos. In `.einblicke-section` steht
   keine Videostrecke mehr. Wer hier wieder eine einhängt, nimmt die Zeile
   heraus — sonst werden hochkante Videos falsch beschnitten. */
.einblicke-section .video-item video { aspect-ratio: 16/10; border-radius: 16px; }
@media (max-width: 700px) {
	.einblicke-section .video-strecke { grid-template-columns: 1fr; }
	.einblicke-section .team-einblicke { margin-bottom: 36px; }
}

/* Engagement ohne Logos: zwei belegende Fotos nebeneinander. */
.engagement-belege { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.engagement-belege figure { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
.engagement-belege img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .engagement-belege { grid-template-columns: 1fr; } }
/*
 * Seit dem 16.08.2026 steht hier nur noch ein Beleg — das Messestand-Foto ist
 * entfallen. Ein einzelnes Bild würde sonst halbbreit links kleben, während
 * rechts eine leere Spalte bleibt, und in der 4:3-Vorgabe seitlich
 * beschnitten: Der Zuschnitt ist 528 × 312, das Logo säße am Rand und würde
 * angeschnitten. Beides fängt die `:only-child`-Regel ab, ohne den Zustand
 * mit zwei Bildern zu verändern — kommen die Partnerlogos, greift ohnehin
 * wieder das Karussell.
 */
.engagement-belege figure:only-child { grid-column: 1 / -1; max-width: 560px; margin-inline: auto; aspect-ratio: 528 / 312; }

/*
 * Platzhalter statt Ersatzfoto (16.08.2026). Er soll erkennbar kein fertiger
 * Inhalt sein: gestrichelter Rahmen auf Off-White, keine Bildfläche, kein
 * Marken-Rot. Die gestrichelte Linie ist im Theme sonst nirgends im Einsatz
 * und liest sich dadurch eindeutig als Leerstelle.
 */
.engagement-platzhalter {
	border: 2px dashed var(--sp-linie);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 48px);
	background: var(--sp-off-white);
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
}
.engagement-platzhalter .platzhalter-titel {
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--sp-grau);
	margin: 0 0 10px;
}
.engagement-platzhalter .platzhalter-text {
	margin: 0;
	color: var(--sp-grau);
	line-height: 1.7;
	max-width: 46ch;
	margin-inline: auto;
}

/* Leerzustand der Terminliste. */
.events-empty { border: 1px solid var(--sp-linie); border-radius: 16px; padding: 40px 32px; background: var(--sp-off-white); text-align: center; }
.events-empty p { margin: 0 0 20px; color: var(--sp-grau); line-height: 1.7; }
.events-empty p:last-child { margin: 0; }
.testimonials-full { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-off-white); }
.testimonials-full > h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 40px; }
/* Sechs Stimmen: mit auto-fit werden daraus drei Spalten statt zwei, die
   Sektion füllt sich und wird um eine Zeile kürzer. */
/* Referenzenseite: Spaltenzahl kommt ebenfalls aus --sp-stimmen. */

/* Social Wall (Über uns) — Einwilligungskasten und Flockler-Feed.
   Der Feed bringt eigenes CSS mit; hier wird nur der Rahmen gesetzt und die
   Breite begrenzt, damit die Kachelspalten nicht über die Lesebreite laufen. */
/* Der Feed richtet seine Spaltenzahl nach der Containerbreite. In der
   760px-Lesebreite von .prosa werden daraus zwei schmale Spalten und rund
   5000px Seitenhöhe — deshalb die volle Content-Breite (--sp-container,
   1440px, vorher 1150px). */
.social-wall-section .inner { max-width: none; }
.sp-social-wall { margin-inline: auto; }
/* Der Feed läuft über die volle Content-Breite, der Einwilligungskasten davor
   nicht: Auf 1296 px stünden drei Textzeilen in einem fast leeren Rahmen. */
.sp-social-consent {
	max-width: 900px; margin-inline: auto;
	border: 1px solid var(--sp-linie); border-radius: 16px; padding: 48px 32px;
	text-align: center; color: var(--sp-grau); background: var(--sp-off-white);
}
/* `margin-inline: auto` muss in beiden Regeln stehen — die Kurzform `margin`
   im Hinweis würde das `auto` der Regel darüber sonst zurücksetzen und den
   Absatz linksbündig in den 900er Kasten stellen. */
.sp-social-consent p { max-width: 620px; margin: 0 auto 20px; line-height: 1.6; font-size: 15px; }
.sp-social-consent .sp-social-hinweis { margin: 20px auto 0; font-size: 14px; }
.sp-social-wall [id^="flockler-embed-"] { min-height: 120px; }

/*
 * Handwerk-Batch.
 *
 * Die Optik lag bis zum 11.08.2026 an `.stamp-band .stamp` und war damit an
 * das Stempel-Band der Über-uns-Seite gekettet. Seit der Batch auch in der
 * Über-uns-Sektion der Startseite steht, ist
 * `.stamp` die Grundform und `.stamp-band` nur noch die Fläche darum. Es gibt
 * weiterhin genau eine Fassung — Größe und Abstände variieren, Form und Farbe
 * nicht.
 */
.stamp {
	display: inline-block; font-family: var(--sp-font-head); font-weight: 700;
	font-size: clamp(1.25rem, 3vw, 1.75rem); letter-spacing: 1px; text-transform: uppercase;
	color: var(--sp-charcoal); border: 2px solid var(--sp-charcoal); border-radius: 50px; padding: 14px 32px;
}
.stamp-band { padding: 48px var(--sp-gutter); background: var(--sp-gelb); text-align: center; }
/*
 * 16.08.2026: Das Band steht wieder auf Gelb. Damit
 * müssen die Kennzahlen die Farbe wechseln — `.fact .number` steht auf Gelb,
 * das wäre auf gelbem Grund unsichtbar. Rot auf Gelb misst 5,22:1 und liegt
 * über AA; Stempel und Einheiten stehen auf Charcoal mit 8,74:1.
 */
.stamp-band .fact .number { color: var(--sp-rot); }
.stamp-band .facts-divider { background: rgba(45, 45, 45, 0.25); }

@media (max-width: 768px) {
	.kontakt-grid { grid-template-columns: 1fr; }
	.testimonials-full .testimonial-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   EMOTIONALE SEKTIONSMUSTER (gegen den „Baukasten"-Eindruck)
   ===================================================================== */

/* Story-Stat: erzählerischer Einblick statt Kartenraster (echte Fakten) */
.story-stat {
	padding: var(--sp-pad-y) var(--sp-gutter);
	background: var(--sp-off-white);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.story-stat .section-label {
	font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; color: var(--sp-rot); font-weight: 700; margin-bottom: 16px;
}
.story-stat h2 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; margin: 0 0 24px; }
.story-stat p { font-size: 17px; line-height: 1.8; color: #3a3a38; margin: 0 0 20px; max-width: 46ch; }
.story-stat .kicker {
	display: block; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--sp-linie);
	font-family: var(--sp-font-head); font-weight: 400; font-size: 16px; color: var(--sp-charcoal);
	max-width: 42ch;
}
.story-stat .kicker strong { color: var(--sp-rot); font-weight: 700; }
.story-stat .story-media {
	/* 4:5 schnitt von einem querformatigen Foto die halbe Breite ab (10.08.2026). */
	position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; margin: 0;
	background: var(--sp-charcoal);
}
.story-stat .story-media img { width: 100%; height: 100%; object-fit: cover; }
/* Video-Marker */
.story-stat .story-media .play {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	color: var(--sp-weiss); font-family: var(--sp-font-head); font-weight: 700; font-size: 14px;
	letter-spacing: 0.5px; gap: 14px; text-align: center; padding: 20px;
	background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
}
.story-stat .story-media .play::before {
	content: ""; width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
	background: var(--sp-gelb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%232D2D2D'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/20px no-repeat;
}
@media (max-width: 900px) {
	.story-stat { grid-template-columns: 1fr; }
	.story-stat .story-media { max-width: 420px; }
}

/* Ehrlich-gesagt: meinungsstarke Service-Haltung (gelbe Fläche) */
.service-honest { padding: var(--sp-pad-y) var(--sp-gutter); background: var(--sp-gelb); }
/*
 * Der Inhaltsblock rückt mittig, die Zeilen bleiben linksbündig * Vorher war der Container 1040 px breit, während
 * Überschrift (20ch) und Fließtext (56ch) nur rund 700 px füllten — alles
 * klebte links, rechts stand eine leere Gelbfläche.
 *
 * Begrenzt wird bewusst der Container und nicht jedes Element einzeln:
 * Zentriert man Überschrift und Text getrennt, wandern ihre linken Kanten
 * auseinander, sobald die Überschrift über `clamp` ihre Größe ändert.
 */
.service-honest .inner { max-width: 720px; margin-inline: auto; }
.service-honest .section-label {
	font-family: var(--sp-font-head); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; color: var(--sp-charcoal); font-weight: 700; margin-bottom: 16px; opacity: 0.72;
}
.service-honest h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.12; margin: 0 0 24px; color: var(--sp-charcoal); max-width: 20ch; }
.service-honest p { font-size: 18px; line-height: 1.75; color: #3a3a2f; margin: 0 0 32px; max-width: 56ch; }
.service-honest .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.service-honest .actions a.tel {
	display: inline-block; background: var(--sp-charcoal); color: var(--sp-weiss);
	font-family: var(--sp-font-head); font-weight: 700; font-size: 15px; letter-spacing: 0.5px;
	text-decoration: none; padding: 14px 32px; border-radius: 50px;
}
.service-honest .actions a.tel:hover { background: #000; }
.service-honest .actions a.more {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 14px; letter-spacing: 0.5px;
	color: var(--sp-charcoal); text-decoration: none; border-bottom: 2px solid rgba(45,45,45,0.35); padding-bottom: 2px;
}
.service-honest .actions a.more:hover { border-color: var(--sp-charcoal); }

/* ------------------------------------------------------------------ *
 * Formulare (Kontakt + Bewerbung) – inc/forms.php
 * ------------------------------------------------------------------ */
.sp-form-wrap { /* siehe Regelblock Flächennutzung */ }
.sp-form { display: flex; flex-direction: column; gap: 20px; }
.sp-form .sp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sp-form .sp-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-form label { font-family: var(--sp-font-head); font-weight: 700; font-size: 14px; color: var(--sp-charcoal); }
/*
 * `box-sizing: border-box` ist hier keine Kosmetik, sondern behebt einen
 * echten Fehler: `width: 100%` plus 14 px Innenabstand und 1 px Rahmen ergab
 * Felder, die 30 px breiter waren als ihre Spalte. Auf dem Handy (390 px)
 * ragten sie aus dem Bild und erzeugten einen waagerechten Scrollbalken.
 *
 * Das Theme setzt `box-sizing` an keiner Stelle global. Das nachzuholen wäre
 * richtig, verschiebt aber rund 60 weitere Elemente (unter anderem die
 * Untermenüs der Navigation) und gehört mit einem eigenen Durchgang gemacht.
 */
.sp-form input[type="text"],
.sp-form input[type="email"],
.sp-form input[type="tel"],
.sp-form input[type="file"],
.sp-form select,
.sp-form textarea {
	box-sizing: border-box;
	font-family: var(--sp-font-body); font-size: 16px; color: var(--sp-charcoal);
	background: var(--sp-weiss); border: 1px solid var(--sp-linie); border-radius: 10px;
	padding: 12px 14px; width: 100%;
}
.sp-form textarea { resize: vertical; min-height: 120px; }
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus {
	outline: 3px solid var(--sp-rot); outline-offset: 1px; border-color: transparent;
}
.sp-form .sp-consent { margin: 0; }
/*
 * Einwilligungszeile: Kästchen und Text sind GENAU ZWEI Flex-Elemente.
 *
 * Behoben am 28.08.2026. Vorher stand der Text ohne Hülle im Flex-Container.
 * Ein Flex-Container macht aus jedem zusammenhängenden Textstück ein eigenes
 * (anonymes) Element und aus dem Verweis ein weiteres — aus einem Satz wurden
 * vier Spalten nebeneinander. Auf 390 px sah das so aus: „Ich habe die"
 * dreizeilig in einer schmalen Spalte, daneben „Datenschutzerklärung", daneben
 * der Rest. Auf dem Schreibtisch fiel es kaum auf, weil jede Spalte noch in
 * eine Zeile passte.
 *
 * Der Text liegt jetzt in einem <span> (inc/forms.php); `min-width: 0` erlaubt
 * ihm zu schrumpfen, statt den Container zu sprengen.
 */
.sp-form .sp-consent label { display: flex; gap: 10px; align-items: flex-start; font-family: var(--sp-font-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--sp-grau); }
.sp-form .sp-consent label > span { min-width: 0; }
.sp-form .sp-consent input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.sp-form .sp-consent a, .sp-form .sp-hint a { color: var(--sp-rot); }
.sp-form .sp-submit { margin: 0; }
.sp-form .sp-hint { margin: 0; font-size: 14px; color: var(--sp-grau); }
/* Honeypot – für Menschen unsichtbar, Bots füllen es aus */
.sp-form .sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   Fluent Forms im Theme-Look (10.08.2026)
   ---------------------------------------------------------------------
   Zwei Eigenheiten des Plugins bestimmen den Aufbau dieses Blocks:

   1. Fluent Forms schreibt beim Rendern einen EIGENEN style-Block ins
      Dokument, der hinter allen Stylesheets steht. Bei gleicher Spezifität
      gewinnt er. Deshalb hängt hier alles an `.sp-form-fluent` und kommt
      damit über die Plugin-Selektoren (dieselbe Ursache verursacht sonst
      Darstellungsfehler).
   2. Farben laufen über CSS-Variablen (`--fluentform-primary`). Wer nur die
      Button-Regel überschreibt, bekommt den Standard-Blau an anderer Stelle
      zurück — deshalb die Variablen gleich mit setzen.

   Die tatsächliche Wirkung ergibt sich aus der Kaskade im Browser, nicht
   aus diesem Block allein.
   ===================================================================== */
.sp-form-fluent {
	--fluentform-primary: var(--sp-gelb);
	--fluentform-secondary: var(--sp-charcoal);
	--ff-input-border-radius: 10px;
}
.sp-form-fluent .frm-fluent-form .ff-el-group { margin-bottom: 20px; }
.sp-form-fluent .frm-fluent-form .ff-el-input--label label {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 14px;
	color: var(--sp-charcoal); margin-bottom: 6px;
}
/* Das Pflichtsternchen sitzt auf demselben Element wie das Label — eine
   eigene Regel dafür, sonst erbt es die Labelfarbe. */
.sp-form-fluent .frm-fluent-form .ff-el-is-required.asterisk-right label:after { color: var(--sp-rot); }

.sp-form-fluent .frm-fluent-form .ff-el-form-control {
	box-sizing: border-box;
	font-family: var(--sp-font-body); font-size: 16px; color: var(--sp-charcoal);
	background: var(--sp-weiss); border: 1px solid var(--sp-linie); border-radius: 10px;
	padding: 12px 14px; width: 100%; line-height: 1.5; box-shadow: none;
}
.sp-form-fluent .frm-fluent-form textarea.ff-el-form-control { resize: vertical; min-height: 120px; }
.sp-form-fluent .frm-fluent-form .ff-el-form-control:focus {
	outline: 3px solid var(--sp-rot); outline-offset: 1px; border-color: transparent; box-shadow: none;
}
.sp-form-fluent .frm-fluent-form .ff-el-form-control::placeholder { color: var(--sp-grau-text-hell); }

/* Einwilligung: Kästchen und Text nebeneinander, Text in Lesegröße.
   Die Struktur ist verschachtelter als erwartet — das Kästchen steckt in
   `span.ff_tc_checkbox` INNERHALB des Labels, der Text daneben in einem `p`.
   Eine Regel auf das Label allein lässt das Kästchen deshalb in einer eigenen
   Zeile stehen (im Browser nachgemessen, nicht im Stylesheet gelesen). */
.sp-form-fluent .frm-fluent-form .ff-el-tc .ff_tc_label {
	display: flex; gap: 10px; align-items: flex-start; margin: 0;
}
.sp-form-fluent .frm-fluent-form .ff-el-tc .ff_tc_checkbox { flex: 0 0 auto; margin-top: 2px; }
.sp-form-fluent .frm-fluent-form .ff-el-tc .ff-el-form-check-input { margin: 0; }
.sp-form-fluent .frm-fluent-form .ff-el-tc p {
	margin: 0; font-family: var(--sp-font-body); font-size: 14px; line-height: 1.5; color: var(--sp-grau);
}
.sp-form-fluent .frm-fluent-form .ff-el-tc a { color: var(--sp-rot); }

/* Absenden im Theme-Stil: gelbe Pille mit Charcoal-Schrift wie überall. */
.sp-form-fluent .frm-fluent-form .ff-btn-submit,
.sp-form-fluent .frm-fluent-form .ff_submit_btn_wrapper button {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 15px;
	background: var(--sp-gelb); color: var(--sp-charcoal);
	border: 0; border-radius: 50px; padding: 15px 32px; cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sp-form-fluent .frm-fluent-form .ff-btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.sp-form-fluent .frm-fluent-form .ff-btn-submit:focus-visible { outline: 3px solid var(--sp-rot); outline-offset: 2px; }

/* Datei-Auswahl des Bewerbungsformulars an die Felder angleichen. */
.sp-form-fluent .frm-fluent-form .ff-el-input--content .ff_upload_btn.ff-btn {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 14px;
	background: var(--sp-off-white); color: var(--sp-charcoal);
	border: 1px solid var(--sp-linie); border-radius: 10px; padding: 12px 18px;
}
.sp-form-fluent .frm-fluent-form .ff-el-input--content .ff_upload_btn.ff-btn:focus-visible,
.sp-form-fluent .frm-fluent-form .ff_file_upload_holder:has(input[type="file"]:focus-visible) .ff_upload_btn.ff-btn {
	outline: 3px solid var(--sp-rot);
	outline-offset: 2px;
}
.sp-form-fluent .frm-fluent-form .ff-upload-preview { border-radius: 10px; }

/* Meldungen: gleiche Form wie die Hinweiskästen des Themes. */
.sp-form-fluent .frm-fluent-form .ff-el-is-error .text-danger,
.sp-form-fluent .frm-fluent-form .error-text { color: var(--sp-rot); font-size: 14px; }
.sp-form-fluent .ff-message-success {
	border: 1px solid var(--sp-linie); border-left: 4px solid var(--sp-rot);
	border-radius: 12px; padding: 20px 24px; background: var(--sp-off-white);
	font-family: var(--sp-font-body); line-height: 1.6; color: var(--sp-charcoal);
}
.form-notice { border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; font-family: var(--sp-font-body); line-height: 1.5; }
.form-notice--ok { background: rgba(245,201,70,0.18); border: 1px solid var(--sp-gelb); color: var(--sp-charcoal); }
.form-notice--err { background: rgba(146,40,38,0.08); border: 1px solid var(--sp-rot); color: var(--sp-rot); }
/* Leerzustand Veranstaltungen */
.events-empty { max-width: 640px; background: var(--sp-weiss); border: 1px solid var(--sp-linie); border-radius: 16px; padding: 32px 36px; }
.events-empty p { margin: 0 0 12px; color: var(--sp-grau); line-height: 1.7; }
.events-empty p:first-child { color: var(--sp-charcoal); font-family: var(--sp-font-head); font-size: 18px; }
.events-empty a.wp-block-button__link { margin-top: 8px; }

@media (max-width: 640px) {
	.sp-form .sp-field-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Interaktive Referenzkarte (Leaflet) – inc/map.php, reference-map.js
 * ------------------------------------------------------------------ */
.sp-map-wrap { margin: 0; }
.sp-map-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sp-map-filters button {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--sp-font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.3px;
	color: var(--sp-charcoal); background: var(--sp-weiss); border: 1px solid var(--sp-linie);
	border-radius: 50px; padding: 8px 16px; cursor: pointer; line-height: 1;
}
.sp-map-filters button svg { flex: 0 0 auto; }
.sp-map-filters button[aria-pressed="true"] { background: var(--sp-charcoal); color: var(--sp-weiss); border-color: var(--sp-charcoal); }
.sp-map-filters button:hover { border-color: var(--sp-charcoal); }
.sp-map {
	height: clamp(360px, 50vw, 560px); border-radius: 16px; overflow: hidden;
	border: 1px solid var(--sp-linie); position: relative; z-index: 0;
	display: flex; align-items: center; justify-content: center;
}
/* Vor der Einwilligung dunkle Consent-Fläche, danach die Karte */
.sp-map:not(.is-loaded) { background: var(--sp-charcoal); color: var(--sp-weiss); height: auto; min-height: clamp(360px, 50vw, 560px); }
.sp-map.is-loaded { display: block; }
.sp-map-consent { max-width: 460px; text-align: center; padding: 32px; }
.sp-map-consent p { margin: 0 0 20px; line-height: 1.6; font-size: 15px; }
@media (max-width: 480px) { .sp-map-consent { padding: 28px 20px; } }
.sp-map-hint { margin: 12px 0 0; font-size: 13px; color: var(--sp-grau-hell); }
/* Marker-Pin (divIcon) – runder Punkt mit Leistungs-Icon */
.sp-pin-dot {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3); border: 2px solid var(--sp-weiss);
}
.sp-pin-dot svg { display: block; }
/* ------------------------------------------------------------------ *
 * Leistungs-Bildkacheln (patterns/page-leistungen.php)
 * Grosse Flaechen mit Bild oder Markenfarbe statt kompakter Textkarten.
 * Das versetzte Einblenden laeuft ueber --tile-delay.
 * ------------------------------------------------------------------ */
.service-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.service-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* 10.08.2026 von 380 auf 480: Bei 380px war von den hochkanten Fotos nur
	   knapp die Hälfte zu sehen. */
	min-height: 480px;
	padding: 36px;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	background: var(--tile-color, var(--sp-charcoal));
	isolation: isolate;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--tile-delay, 0ms);
}
.sp-reveal.is-visible .service-tile,
.service-tiles.is-visible .service-tile {
	opacity: 1;
	transform: none;
}
.tile-media { position: absolute; inset: 0; z-index: -2; }
.tile-media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.7s ease;
}
.service-tile:hover .tile-media img,
.service-tile:focus-visible .tile-media img { transform: scale(1.07); }
/*
 * Heizungskachel (16.08.2026, im Browser nachgemessen).
 *
 * Diese Kachel läuft über die volle Zeile und steht bei 1440 px Fensterbreite
 * auf 1440 × 552, also 2,6: 1. Das Foto hat 3: 2. `cover` skaliert es
 * deshalb auf die Breite und beschneidet **oben und unten** — waagerecht wird
 * gar nichts abgeschnitten. Der senkrechte Wert ist hier der einzige Hebel;
 * ein waagerechter Versatz bliebe auf dem Desktop wirkungslos.
 *
 * Am Motiv ausgezählt: Der Kopf des Mitarbeiters sitzt bei 5,6 % bis 20 % der
 * Bildhöhe, die Außeneinheit reicht von 39 % bis 90 %. Sichtbar sind 58 % der
 * Höhe. Mittig zentriert zeigte der Streifen 21 % bis 79 % — genau daher der
 * kopflose Rücken und das unten angeschnittene Gerät. Mit 75 % steht das
 * Gerät vollständig im Bild.
 *
 * Kopf und Gerät gleichzeitig zu zeigen bräuchte 84 % der Bildhöhe und ist in
 * diesem Streifen nicht möglich.
 *
 * Der waagerechte Wert von 60 % greift erst unterhalb von 860 px: Dort wird
 * die Kachel einspaltig und flacher als das Foto, dann beschneidet `cover`
 * seitlich, und ohne den Versatz fiele der Mitarbeiter am linken Rand weg.
 */
.service-tile.tile-heizung .tile-media img { object-position: 60% 75%; }
/* Lesbarkeit des Textes ueber dem Bild */
.service-tile::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgba(0,0,0,0.88) 8%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.12) 100%);
}
/* Reine Farbflaeche (noch kein Gewerk-Bild): dezente Tiefe statt flachem Ton */
.service-tile.is-flaeche::before {
	background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.35) 100%);
}
.tile-icon {
	position: absolute; top: 28px; right: 30px; z-index: 1;
	display: block; line-height: 0;
	color: var(--sp-gelb);
	transition: transform 0.4s ease;
}
.tile-icon svg { display: block; }
.service-tile:hover .tile-icon { transform: scale(1.12) rotate(-4deg); }
.tile-body { position: relative; z-index: 1; color: var(--sp-weiss); }
.tile-num {
	display: block;
	font-family: var(--sp-font-head); font-size: 13px; font-weight: 700;
	/* Auf dem blauen Overlay der Sanitär-Kachel erreichte das Marken-Gelb nur
	   3,44:1 (Soll 4,5 für kleinen Text, 10.08.2026 gemessen). Der hellere Ton
	   trägt auf allen vier Kachelfarben. */
	letter-spacing: 3px; color: #ffe9a3; margin-bottom: 12px;
}
.service-tile h2.tile-titel, .service-tile h3 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: var(--sp-weiss); margin: 0 0 10px; line-height: 1.15;
}
.service-tile p {
	margin: 0 0 14px; max-width: 42ch;
	color: rgba(255,255,255,0.88); line-height: 1.55; font-size: 15px;
}
.tile-add {
	display: inline-block;
	font-family: var(--sp-font-head); font-size: 13px; font-weight: 700;
	color: #ffe9a3; letter-spacing: 0.4px;
}
.service-tile::after {
	content: "";
	position: absolute; inset: 0;
	border: 2px solid transparent; border-radius: 20px;
	transition: border-color 0.3s ease;
}
.service-tile:hover::after,
.service-tile:focus-visible::after { border-color: var(--sp-gelb); }
@media (max-width: 860px) {
	.service-tiles { grid-template-columns: 1fr; gap: 18px; }
	.service-tile { min-height: 300px; padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.service-tile { opacity: 1; transform: none; transition: none; }
}

/*
 * Kalender-Download je Veranstaltung (Plugin: includes/ics.php).
 *
 * Die Optik (Pillenform, Rahmen, Typo, Hover) kommt aus `.event-action a`
 * weiter oben — die Regel ist spezifischer und hat gewonnen. Hier stand
 * vorher dieselbe Formatierung ein zweites Mal, teils widersprüchlich: ein
 * `border-bottom: 1px` gegen den 2px-Rahmen ringsum und ein roter
 * Unterstrich-Hover gegen die gefüllte Schaltfläche. Nichts davon war je
 * sichtbar. Übrig bleibt, was tatsächlich wirkt.
 */
.event-action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* Gilt auch für den Flyer-Download: Er ist ebenfalls ein Link in
   `.event-action` und
   übernimmt dieselbe Pillenform. */
.event-ics svg,
.event-flyer svg { flex: 0 0 auto; }

/* Cluster – Markenfarbe + Gewerk-Icon statt Leaflet-Standardkreis (reference-map.js) */
.sp-cluster { background: none; border: 0; }
.sp-cluster-dot {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	border-radius: 50%; border: 3px solid var(--sp-weiss); line-height: 1;
	box-shadow: 0 3px 10px rgba(0,0,0,0.28);
	transition: transform 0.15s ease;
}
.sp-cluster-dot:hover { transform: scale(1.06); }
.sp-cluster-icon { display: block; line-height: 0; }
.sp-cluster-num {
	font-family: var(--sp-font-head); font-weight: 700; font-size: 13px;
	letter-spacing: 0.2px; margin-top: 3px;
}
/* Leaflet blendet seine Standard-Clusterflächen sonst zusätzlich ein */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: none; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: none; }

/*
 * Kartenkacheln entsättigt und warm getönt.
 *
 * Die Standardkacheln von OpenStreetMap sind grün-blau und stehen quer zur
 * Palette aus Rot, Gelb und Anthrazit — die Marker gingen darin unter. Der
 * Filter liegt bewusst NUR auf der Kachelebene: Marker, Cluster und Popups
 * liegen in eigenen Ebenen und behalten ihre Farbe.
 *
 * Kein anderer Kachelanbieter: Ein Wechsel zu Carto, Stadia oder MapTiler
 * hieße, einen weiteren Dienst einzubinden, der wieder einzeln auf Einwilligung
 * und Datenschutz zu prüfen wäre. Der Filter kostet nichts und ändert an der
 * Datenlage nichts.
 *
 * Andere Anmutung: `grayscale(1) contrast(.92) brightness(1.06)` ergibt neutrales
 * Grau, `grayscale(1) contrast(.72) brightness(1.16)` eine blasse Andeutung.
 */
.leaflet-tile-pane {
	filter: grayscale(1) sepia(0.22) contrast(0.88) brightness(1.1);
}

.leaflet-container { font-family: var(--sp-font-body); border-radius: 16px; }
.leaflet-popup-content { font-family: var(--sp-font-body); line-height: 1.5; }
.leaflet-popup-content strong { font-family: var(--sp-font-head); }

/* ------------------------------------------------------------------ *
 * Engagement · Logo-Karussell (patterns/engagement.php)
 * Endlos laufendes Band. Die Liste wird doppelt ausgegeben, deshalb
 * genuegt eine Verschiebung um -50 % fuer einen nahtlosen Umlauf.
 * ------------------------------------------------------------------ */
.engagement { padding: 72px 0; background: var(--sp-off-white); overflow: hidden; }
.engagement-header { max-width: 640px; padding: 0 var(--sp-gutter); margin-bottom: 36px; }
.engagement-track-wrap {
	position: relative;
	/* Weiche Kanten links und rechts, damit die Logos nicht abgeschnitten wirken */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.engagement-track {
	display: flex; align-items: center; gap: 64px;
	list-style: none; margin: 0; padding: 0; width: max-content;
	animation: sp-engagement-lauf 38s linear infinite;
}
.engagement-track-wrap:hover .engagement-track { animation-play-state: paused; }
.engagement-track li { flex: 0 0 auto; }
.engagement-track img {
	height: 56px; width: auto; display: block;
	filter: grayscale(1); opacity: 0.65;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.engagement-track li:hover img { filter: none; opacity: 1; }
@keyframes sp-engagement-lauf {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.engagement-track { animation: none; flex-wrap: wrap; width: auto; gap: 40px; padding: 0 var(--sp-gutter); }
	.engagement-track img { filter: none; opacity: 1; }
}