/* =========================================================================
   Sim-Department — Design-Basis (Phase 3)
   Farb-/Font-Tokens + schlanker Reset + Basis-Utilities.
   Komponenten kommen in späteren Phasen; hier liegt das Fundament.
   ========================================================================= */

/* --- Inter Display (selbst gehostet) -------------------------------------
   Inter Display ist NICHT bei Google Fonts. Lade die woff2-Dateien von
   rsms.me/inter (Ordner "Inter Display") nach assets/fonts/ und die
   @font-face greift. Fehlt die Datei, fällt --sd-font-display auf Inter zurück. */
@font-face {
	font-family: 'Inter Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/InterDisplay.var.woff2') format('woff2');
}

:root {

	/* --- Farben --- */
	--sd-black:        #0A0A0A;   /* Basis-Hintergrund (near black) */
	--sd-black-pure:   #000000;
	--sd-surface:      #141414;   /* Karten/Panels */
	--sd-offwhite:     #F5F3EF;   /* warmes Off-White — Haupttext */
	--sd-muted:        #9A9A97;   /* gedämpfter Text */
	--sd-red:          #E10600;   /* F1-Rot — Akzent */
	--sd-red-hover:    #FF1A0D;
	--sd-red-glow:     rgba(225, 6, 0, 0.16);
	--sd-border:       rgba(245, 243, 239, 0.10);

	/* --- Typografie --- */
	--sd-font-display: 'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
	--sd-font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--sd-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

	/* Fluide Typo-Skala */
	--sd-fs-eyebrow:   0.95rem;
	--sd-fs-body:      clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
	--sd-fs-h3:        clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem);
	--sd-fs-h2:        clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	--sd-fs-h1:        clamp(2.6rem, 1.6rem + 4.4vw, 5rem);

	--sd-lh-tight:     1.05;
	--sd-lh-body:      1.6;

	/* --- Layout --- */
	--sd-container:    1200px;
	--sd-gutter:       clamp(1.25rem, 4vw, 3rem);
	--sd-radius:       10px;
	--sd-radius-pill:  999px;

	/* --- Motion --- (kein Code-Suchen nötig, um Tempo zu justieren) */
	--sd-kenburns-duration:     20s;
	--sd-glow-breath-duration:   8s;
	--sd-parallax-factor:      0.15;   /* Anteil der Scroll-Delta, mit dem sich das Bild bewegt */
	--sd-hero-line-stagger:     90ms;
	--sd-reveal-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
	--sd-reveal-duration:       0.7s;
	--sd-reveal-distance:      32px;   /* Standard-Fadedistanz für data-sd-reveal */
	--sd-reveal-distance-quiet: 12px;  /* Dezent — z. B. FAQ */
	--sd-reveal-stagger:       80ms;
	--sd-reveal-stagger-cap:      6;   /* Max Schritte pro Batch, dann konstant */

	/* --- Seiten-Hero (Unterseiten) --- kompakter als der Home-Hero. */
	--sd-page-hero-height:        46svh;
	--sd-page-hero-height-mobile: 34svh;
	--sd-page-hero-padding-block: clamp(3rem, 7vw, 6rem);

	/* --- Hover-Sprache: einheitliche Karten-Anhebung. */
	--sd-hover-lift:           -3px;
	--sd-hover-transition:     transform 0.2s ease, border-color 0.2s ease;
}

/* --- Reset (schlank, greift nur Basiselemente an) ------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Sicherheitsnetz gegen horizontal-Overflow. `clip` verhält sich wie
   `hidden` für die Seite, unterdrückt aber programmatisches Scrollen —
   kein "Scroll-Container" wie bei `hidden`. Die eigentliche Ursache
   für Overflow muss trotzdem gefunden werden; das hier ist der Airbag. */
html, body {
	overflow-x: clip;
	max-width: 100%;
}

/* Bilder/Medien nie über den Container hinauswachsen lassen. `.sd-logo img`
   ist per Specificity ausgenommen (setzt max-width: none explizit). */
img, picture, video, svg {
	max-width: 100%;
}
/* height:auto nur an Roh-Elementen — Layout-Bilder mit expliziten Größen
   (Hero-Cover, Divider-Cover) haben ihre eigenen height-Regeln. */
img:not([class]) { height: auto; }

body.sd-dark,
body {
	background-color: var(--sd-black);
	color: var(--sd-offwhite);
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-body);
	line-height: var(--sd-lh-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--sd-font-display);
	line-height: var(--sd-lh-tight);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 0.4em;
}
h1 { font-size: var(--sd-fs-h1); }
h2 { font-size: var(--sd-fs-h2); }
h3 { font-size: var(--sd-fs-h3); }

a { color: inherit; text-decoration: none; }

::selection { background: var(--sd-red); color: #fff; }

/* =========================================================================
   Basis-Utilities (bewusst wenige — Bricks-Elemente hängen sich hier ein)
   ========================================================================= */

/* Mono-Eyebrow / Labels — ersetzt den alten italic-red-Split-Trick */
.sd-eyebrow {
	font-family: var(--sd-font-mono);
	font-size: var(--sd-fs-eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sd-muted);
}
.sd-eyebrow--red { color: var(--sd-red); }

/* Durchlaufende Sektions-Nummerierung "01 / KATEGORIE" */
.sd-section-index {
	font-family: var(--sd-font-mono);
	font-size: var(--sd-fs-eyebrow);
	letter-spacing: 0.12em;
	color: var(--sd-muted);
}
.sd-section-index b { color: var(--sd-red); font-weight: 500; }

/* Roter Radial-Glow als Sektions-Hintergrund */
.sd-glow {
	position: relative;
	background:
		radial-gradient(ellipse 80% 55% at 50% 0%, var(--sd-red-glow), transparent 70%),
		var(--sd-black);
}

/* Pill-Badge mit rotem Rand */
.sd-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em 0.9em;
	border: 1px solid var(--sd-red);
	border-radius: var(--sd-radius-pill);
	font-family: var(--sd-font-mono);
	font-size: var(--sd-fs-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sd-offwhite);
}

/* Text-CTA mit Unterstrich */
.sd-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	border-bottom: 2px solid var(--sd-red);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.sd-cta:hover { color: var(--sd-red-hover); border-color: var(--sd-red-hover); }

/* Pfeil-Listen (→ statt Bullets) */
.sd-arrow-list { list-style: none; margin: 0; padding: 0; }
.sd-arrow-list li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.5em;
}
.sd-arrow-list li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--sd-red);
}

/* Container-Helper */
.sd-container {
	width: 100%;
	max-width: var(--sd-container);
	margin-inline: auto;
	padding-inline: var(--sd-gutter);
}

/* Karten-Oberfläche */
.sd-card {
	background: var(--sd-surface);
	border: 1px solid var(--sd-border);
	border-radius: var(--sd-radius);
}

/* =========================================================================
   Single-Template Layout (Phase 5) — SD-Modul
   ========================================================================= */

/* Vertikaler Rhythmus für Sektionen */
.sd-section {
	padding-block: clamp(3rem, 6vw, 6rem);
}

/* Hero */
.sd-hero { max-width: 820px; }
.sd-hero h1 { margin: 0.25em 0 0.5em; }
.sd-hero .sd-eyebrow { display: block; margin-bottom: 0.9em; }

/* Fließtext aus WYSIWYG-Feldern */
.sd-prose { color: var(--sd-muted); max-width: 68ch; }
.sd-prose p { margin: 0 0 1em; }

/* Key-Features als Karten-Grid */
.sd-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	align-items: stretch;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.sd-feature {
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.sd-feature h3 {
	font-size: var(--sd-fs-h3);
	margin: 0.6rem 0 0.4rem;
}
.sd-feature-icon {
	color: var(--sd-red);
	margin-bottom: 0.85rem;
	line-height: 1;
}
.sd-icon {
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
}
.sd-feature-text { color: var(--sd-muted); }

/* Screenshots-Galerie (Wrapper) */
.sd-screenshots { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Screenshots-Grid (Modul-Single, [sd_module_screenshots]).
   Auto-Fit; auf Mobil einspaltig via Regel unten. `min(320px, 100%)` cappt
   die minimale Track-Breite bei sehr schmalen Containern automatisch auf
   die verfügbare Breite → kein horizontal-Overflow (der Bug aus R4 kann
   sich hier nicht wiederholen). */
.sd-screenshots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 1.25rem;
}
.sd-screenshot {
	margin: 0;
	border-radius: var(--sd-radius);
	overflow: hidden;
	background: var(--sd-surface);
}
.sd-screenshot img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 720px) {
	.sd-screenshots-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Modul-Archiv (/software/) — Karten-Grid
   ========================================================================= */
.sd-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.75rem;
	align-items: stretch;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.sd-archive-card {
	padding: 2.1rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: var(--sd-hover-transition);
}
.sd-archive-card:hover {
	border-color: var(--sd-red);
	transform: translateY(var(--sd-hover-lift));
}
.sd-archive-card h3 {
	font-size: var(--sd-fs-h3);
	margin: 0.5rem 0;
}
.sd-archive-excerpt {
	color: var(--sd-muted);
	margin-bottom: 1.25rem;
	flex: 1 1 auto;
}

/* Scroll-Reveal: allgemeiner [data-sd-reveal]-Mechanismus liegt am Ende der
   Datei. Klickbare Karten (Modul + Cars-&-Tracks) kombinieren Reveal +
   :hover-transform — wir sichern hier, dass beide Transitions koexistieren:
   Reveal nutzt `translate`, Hover `transform`. */
@media (prefers-reduced-motion: no-preference) {
	html.sd-anim .sd-archive-card[data-sd-reveal],
	html.sd-anim .sd-asset-card--clickable[data-sd-reveal] {
		transition:
			opacity var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-reveal-delay, 0ms),
			translate var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-reveal-delay, 0ms),
			border-color 0.2s ease,
			transform 0.2s ease;
	}
}

/* =========================================================================
   Untertitel (lesbarer Satz statt winziger Eyebrow) — Karten & Hero
   ========================================================================= */
.sd-subtitle {
	font-family: var(--sd-font-body);
	font-size: 1.05rem;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sd-muted);
	margin-bottom: 0.3rem;
}
/* Im Hero etwas größer */
.sd-hero .sd-subtitle {
	font-size: 1.1rem;
	margin-bottom: 0.6rem;
}

/* =========================================================================
   Standort-Karte (Leaflet · CARTO Dark)
   ========================================================================= */
.sd-map {
	height: 440px;
	width: 100%;
	border: 1px solid var(--sd-border);
	border-radius: var(--sd-radius);
	margin-top: clamp(2rem, 4vw, 3rem);
	z-index: 0;
}
.sd-map .leaflet-popup-content-wrapper,
.sd-map .leaflet-popup-tip {
	background: var(--sd-surface);
	color: var(--sd-offwhite);
}
.sd-map .leaflet-container a { color: var(--sd-red); }
.sd-map-all { height: 540px; }

/* =========================================================================
   Header (transparent über Hero → solide beim Scrollen)
   ========================================================================= */
.sd-header {
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease;
	/* Header muss über allen Home-Sektionen liegen. Ohne z-index verdrängt
	   der Stacking-Context von .sd-home-hero (isolation: isolate) den
	   transparenten Header und fängt Menü-Klicks ab. */
	position: relative;
	z-index: 100;
}
.sd-header.sd-header--scrolled {
	background: rgba(10, 10, 10, 0.85);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom-color: var(--sd-border);
}
.sd-header-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 2rem;
}
.sd-logo,
.sd-logo img,
.sd-logo svg {
	height: 50px;
	width: auto;
	max-width: none;
	display: block;
}
.sd-logo { margin: 0.35rem 0; }
/* Navigation */
.sd-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.75rem;
	margin-left: auto;
}
.sd-nav a {
	font-family: var(--sd-font-body);
	font-size: 1.4rem;
	color: var(--sd-offwhite);
	letter-spacing: 0.01em;
	transition: color 0.15s ease;
}
.sd-nav a:hover,
.sd-nav a.active,
.sd-nav .current-menu-item > a {
	color: var(--sd-red);
}
/* Sprachumschalter (WPML) im Header schlank halten */
.sd-nav img.wpml-ls-flag,
.sd-header img.wpml-ls-flag { height: 1em; width: auto; vertical-align: middle; }

/* CTA-Button im Header */
.sd-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 1.25em;
	background: var(--sd-red);
	color: #fff;
	border-radius: var(--sd-radius);
	font-family: var(--sd-font-body);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.2;
	transition: background 0.15s ease, transform 0.15s ease;
}
.sd-btn:hover { background: var(--sd-red-hover); color: #fff; transform: translateY(-1px); }

/* =========================================================================
   Footer
   ========================================================================= */
.sd-footer {
	background: var(--sd-black-pure);
	border-top: 1px solid var(--sd-border);
	padding-block: clamp(3rem, 5vw, 4.5rem) 0;
}
.sd-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
	align-items: start;
}
.sd-footer .sd-logo img,
.sd-footer .sd-logo svg { height: 40px; }
.sd-footer-tagline {
	color: var(--sd-muted);
	margin-top: 1rem;
	max-width: 34ch;
	font-size: 1rem;
	line-height: 1.5;
}
/* Spalten-Überschriften */
.sd-footer-col h4 {
	font-family: var(--sd-font-mono);
	font-size: var(--sd-fs-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sd-muted);
	margin: 0 0 1rem;
}
/* Link-Listen im Footer */
.sd-footer-col ul { list-style: none; margin: 0; padding: 0; }
.sd-footer-col li { margin-bottom: 0.6rem; }
.sd-footer-col a {
	color: var(--sd-offwhite);
	transition: color 0.15s ease;
}
.sd-footer-col a:hover { color: var(--sd-red); }

/* Untere Copyright-Zeile */
.sd-footer-bottom {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-block: 1.5rem;
	border-top: 1px solid var(--sd-border);
	color: var(--sd-muted);
	font-size: 0.9rem;
}

/* Mobil: Spalten untereinander */
@media (max-width: 720px) {
	.sd-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.sd-footer-logo { height: 44px; width: auto; display: block; margin-bottom: 0.25rem; }

/* =========================================================================
   Cars & Tracks — Filter + Grid
   ========================================================================= */
.sd-asset-filter {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.sd-asset-filter-btn {
	font-family: var(--sd-font-mono);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.6em 1.45em;
	border-radius: var(--sd-radius-pill);
	border: 1px solid var(--sd-border);
	background: transparent;
	color: var(--sd-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sd-asset-filter-btn:hover {
	color: var(--sd-offwhite);
	border-color: var(--sd-offwhite);
}
.sd-asset-filter-btn.is-active {
	background: var(--sd-red);
	border-color: var(--sd-red);
	color: #fff;
}

.sd-asset-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.75rem;
}
.sd-asset-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.sd-asset-media {
	aspect-ratio: 16 / 10;
	background-color: var(--sd-black-pure);
	background-size: cover;
	background-position: center;
}
.sd-asset-body {
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1 auto;
}
.sd-asset-body h3 {
	font-size: var(--sd-fs-h3);
	margin: 0.15rem 0;
}
.sd-asset-text { color: var(--sd-muted); margin: 0; }
.sd-asset-tags {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 0.9rem;
}
.sd-asset-tag {
	font-family: var(--sd-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3em 0.7em;
	border-radius: var(--sd-radius-pill);
	border: 1px solid var(--sd-border);
	color: var(--sd-muted);
}
.sd-asset-tag--active { color: #5ec26a; border-color: rgba(94, 194, 106, 0.4); }

/* =========================================================================
   Cars & Tracks — Galerie-Lightbox
   ========================================================================= */
.sd-asset-media { position: relative; }
/* Klickbare Kachel: gemeinsame Hover-Sprache mit .sd-archive-card
   (Border rot + leichter Lift). Der Bild-Fade bleibt zusätzlich. */
.sd-asset-card--clickable {
	cursor: pointer;
	transition: var(--sd-hover-transition);
}
.sd-asset-card--clickable:hover {
	border-color: var(--sd-red);
	transform: translateY(var(--sd-hover-lift));
}
.sd-asset-card--clickable:hover .sd-asset-media { opacity: 0.85; }
.sd-asset-count {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	font-family: var(--sd-font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	padding: 0.4em 0.85em;
	border-radius: var(--sd-radius-pill);
	background: rgba(0, 0, 0, 0.6);
	color: var(--sd-offwhite);
}

.sd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.93);
	display: none;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.sd-lightbox.is-open { display: flex; }
.sd-lb-stage { margin: 0; text-align: center; }
.sd-lightbox img {
	max-width: 88vw;
	max-height: 82vh;
	border-radius: var(--sd-radius);
	display: block;
}
.sd-lb-counter {
	margin-top: 1rem;
	font-family: var(--sd-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	color: var(--sd-muted);
}
.sd-lb-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: none;
	border: none;
	color: var(--sd-offwhite);
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
}
.sd-lb-close:hover { color: var(--sd-red); }
.sd-lb-nav {
	background: none;
	border: none;
	color: var(--sd-offwhite);
	font-size: 3.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 1.5rem;
	transition: color 0.15s ease;
}
.sd-lb-nav:hover { color: var(--sd-red); }
@media (max-width: 640px) {
	.sd-lb-nav { font-size: 2.5rem; padding: 0 0.5rem; }
	.sd-lightbox img { max-width: 94vw; }
}

/* =========================================================================
   Event-Referenzen — Grid
   ========================================================================= */
.sd-event-grid {
	display: grid;
	/* min(320px, 100%) verhindert horizontal-Overflow bei schmalen Viewports
	   (siehe R4-Bugfix bei den anderen Grids). */
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 1.75rem;
}
.sd-event-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative; /* Basis für stretched-link (.sd-event-card-link::before). */
	transition: var(--sd-hover-transition);
}
.sd-event-card:hover {
	border-color: var(--sd-red);
	transform: translateY(var(--sd-hover-lift));
}
.sd-event-media {
	aspect-ratio: 16 / 9;
	background-color: var(--sd-black-pure);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.sd-event-media--empty {
	background-image: linear-gradient(135deg, var(--sd-surface), var(--sd-black));
}
.sd-event-body {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	flex: 1 1 auto;
}
.sd-event-body h3 {
	font-size: var(--sd-fs-h3);
	margin: 0.1rem 0;
}
.sd-event-role {
	font-family: var(--sd-font-mono);
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	color: var(--sd-muted);
	margin: 0;
}
.sd-event-text { color: var(--sd-muted); margin: 0; line-height: 1.55; }
.sd-event-modules {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.75rem;
}
.sd-event-module {
	font-size: 0.9rem;
	padding: 0.4em 0.95em;
	border-radius: var(--sd-radius-pill);
	border: 1px solid var(--sd-border);
	color: var(--sd-muted);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.sd-event-module:hover { color: var(--sd-red); border-color: var(--sd-red); }
.sd-event-link { margin-top: auto; align-self: flex-start; padding-top: 1.1rem; }

/* Stretched-Link: „Mehr erfahren →" macht die ganze Karte klickbar,
   ohne verschachtelte <a>-Elemente (wären invalid HTML). Modul-Chips
   bleiben eigenständig klickbar, weil sie mit z-index über der
   ::before-Overlay liegen. */
.sd-event-card-link { margin-top: auto; align-self: flex-start; padding-top: 1.1rem; }
.sd-event-card-link::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
}
.sd-event-modules,
.sd-event-related-news {
	position: relative;
	z-index: 1;
}

/* Reveal + Hover kombiniert wie bei .sd-archive-card. */
@media (prefers-reduced-motion: no-preference) {
	html.sd-anim .sd-event-card[data-sd-reveal] {
		transition:
			opacity var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-reveal-delay, 0ms),
			translate var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-reveal-delay, 0ms),
			border-color 0.2s ease,
			transform 0.2s ease;
	}
}

/* Referenz-Einzelseite */
.sd-event-facts { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.sd-event-facts .sd-eyebrow { display: inline-block; }
.sd-event-external-cta { margin-top: 1.5rem; }
.sd-screenshot-caption {
	margin: 0.5rem 0 0;
	padding: 0 0.2rem;
	font-family: var(--sd-font-body);
	font-size: 0.9rem;
	color: var(--sd-muted);
	line-height: 1.4;
}

/* =========================================================================
   Startseite
   ========================================================================= */
.sd-home-hero {
	padding-block: clamp(4rem, 9vw, 8rem);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* min-height: erst vh (Fallback), dann svh (moderne Browser — kein
	   Springen mit der iOS-Adressleiste). */
	min-height: 78vh;
	min-height: 78svh;
	display: flex;
	align-items: center;
}
.sd-home-hero .sd-eyebrow { display: block; margin-bottom: 1.1rem; }

/* Hero-Medien-Stack: LQIP-Backdrop, Ken-Burns-Bild, dunkler Verlauf, atmender Glow.
   pointer-events: none vererbt sich auf alle Kinder (Ken-Burns, Video, Veil,
   Breath) → Klicks gehen durch den ganzen Media-Stack hindurch zu den CTAs
   im .sd-home-hero-inner. Ohne diese Regel fängt der absolut positionierte
   Wrapper (inset:0) alle Klicks im Hero ab. */
.sd-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	will-change: transform;
	transform: translate3d(0, calc(var(--sd-hero-scroll, 0) * -40px), 0);
	pointer-events: none;
}
.sd-hero-kenburns {
	position: absolute;
	inset: -4%;
	will-change: transform;
}
.sd-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
}

/* Video-Loop — legt sich beim Playing-Event über das Standbild. */
.sd-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
	opacity: 0;
	transition: opacity 0.6s ease-out;
	will-change: opacity;
	pointer-events: none;
}

/* Blur muss sowohl das Standbild als auch das Video treffen — sonst
   springt die Schärfe beim Einblenden. Filter rasterisiert einmal,
   Ken-Burns transformiert die fertige Textur (GPU-freundlich). */
.sd-hero-img,
.sd-hero-video {
	filter: blur(2px);
}

/* Sobald das Video sichtbar ist:
   - Ken-Burns aus (die Kamerafahrt steckt schon im Video).
   - Video eingeblendet. */
.sd-hero-media.is-video-active .sd-hero-kenburns {
	animation: none;
	transform: none;
}
.sd-hero-media.is-video-active .sd-hero-video {
	opacity: 1;
}
.sd-hero-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Für ein mittig-symmetrisches Motiv:
	   (a) kräftiger Grundschleier über das ganze Bild → Screen-UI wirkt als
	       Textur, lädt nicht zum Mitlesen ein.  Kommt aus background-color,
	       liegt also unter den Gradient-Layern.
	   (b) linksbetonter Verlauf, hart — beruhigt die Textspalte wirklich.
	   (c) Bodenverlauf — sanfter Übergang in die schwarze Folgesektion. */
	background-color: rgba(10, 10, 10, 0.40);
	background-image:
		linear-gradient(90deg,
			rgba(10, 10, 10, 0.95) 0%,
			rgba(10, 10, 10, 0.90) 45%,
			rgba(10, 10, 10, 0.55) 62%,
			rgba(10, 10, 10, 0.0)  72%),
		linear-gradient(0deg,
			rgba(10, 10, 10, 0.7) 0%,
			rgba(10, 10, 10, 0.1) 22%,
			rgba(10, 10, 10, 0.0) 38%);
	opacity: calc(0.95 + var(--sd-hero-scroll, 0) * 0.05);
}
.sd-hero-breath {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--sd-red-glow), transparent 70%);
	opacity: 0.9;
	mix-blend-mode: screen;
}
.sd-home-hero-inner {
	position: relative;
	z-index: 1;
	/* Explizit klicken-lassen — falls jemals eine übergeordnete Regel
	   pointer-events: none an .sd-home-hero setzt, bleibt der Content
	   interaktiv (Hero-Buttons/Links). */
	pointer-events: auto;
}
/* .sd-glow-Section trägt selbst schon einen Radial-Glow als Hintergrund;
   im Hero liegt darüber jetzt das Bild — daher den Glow direkt am Section-
   Background zurücksetzen (der animierte "Breath"-Layer übernimmt).
   background-image + -color statt Shorthand → siehe CLAUDE.md CSS-Hygiene. */
.sd-home-hero.sd-glow {
	background-image: none;
	background-color: var(--sd-black);
}

/* Ken-Burns nur, wenn Motion erlaubt */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sd-kenburns {
		from { transform: scale(1); }
		to   { transform: scale(1.08); }
	}
	@keyframes sd-breath {
		from { opacity: 0.75; }
		to   { opacity: 1; }
	}
	html.sd-anim .sd-hero-kenburns {
		animation: sd-kenburns var(--sd-kenburns-duration) ease-in-out alternate infinite;
	}
	html.sd-anim .sd-hero-breath {
		animation: sd-breath var(--sd-glow-breath-duration) ease-in-out alternate infinite;
	}
}

/* Headline-Zeilen als Blöcke — Grundlage für den gestaffelten Einflug */
.sd-home-title-line { display: block; }

@media (prefers-reduced-motion: no-preference) {
	html.sd-anim .sd-home-title-line {
		opacity: 0;
		translate: 0 32px;
		transition:
			opacity 0.9s var(--sd-reveal-ease) var(--sd-line-delay, 0ms),
			translate 0.9s var(--sd-reveal-ease) var(--sd-line-delay, 0ms);
		will-change: opacity, translate;
	}
	html.sd-anim .sd-home-title-line.is-visible {
		opacity: 1;
		translate: 0 0;
	}
}

.sd-home-title {
	font-size: clamp(2.8rem, 1.6rem + 5vw, 5.5rem);
	max-width: 16ch;
	margin: 0 0 1.2rem;
}
.sd-home-lead {
	color: var(--sd-muted);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	line-height: 1.55;
	max-width: 58ch;
	margin: 0 0 2rem;
}
.sd-home-cta {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}

/* Zentrierte Sektions-Überschrift */
.sd-section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sd-section-head .sd-eyebrow { display: block; margin-bottom: 0.6rem; }
.sd-section-head h2 { margin: 0; }

/* Abschluss-CTA */
.sd-cta-section { text-align: center; }
.sd-cta-section h2 { margin: 0 0 1rem; }
.sd-cta-section .sd-home-lead { margin-inline: auto; }
.sd-cta-section .sd-btn { margin-top: 1.75rem; }

/* =========================================================================
   Section-Trenner (Bildstreifen zwischen Home-Sektionen)
   Feste aspect-ratio verhindert CLS, während das Bild lädt / parallaxt.
   ========================================================================= */
.sd-divider {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 5 / 1;
	min-height: 220px;
	background: var(--sd-black);
	padding: 0;
	margin: 0;
	/* Divider ist aria-hidden und rein dekorativ — nie klickbar.
	   Vererbt sich auf Media/Img/Veil. */
	pointer-events: none;
}
.sd-divider-media {
	position: absolute;
	inset: -12% 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
	transform: translate3d(0, var(--sd-parallax-y, 0px), 0);
}
.sd-divider-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.sd-divider-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		var(--sd-black) 0%,
		rgba(10, 10, 10, 0.15) 22%,
		rgba(10, 10, 10, 0.15) 78%,
		var(--sd-black) 100%);
}

@media (max-width: 720px) {
	.sd-divider { aspect-ratio: 3 / 1; min-height: 180px; }
}

/* Ohne Motion: Parallax abschalten, LQIP-Backdrop verhalten */
@media (prefers-reduced-motion: reduce) {
	.sd-divider-media { transform: none; }
	.sd-hero-media    { transform: none; }
}

/* =========================================================================
   Kontaktseite
   ========================================================================= */
.sd-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.sd-contact-info h3,
.sd-contact-form h3 { font-size: var(--sd-fs-h3); margin: 0 0 1.25rem; }
.sd-contact-list { list-style: none; margin: 0; padding: 0; }
.sd-contact-list li {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-bottom: 1.5rem;
}
.sd-contact-list .sd-eyebrow { color: var(--sd-muted); }
.sd-contact-list a,
.sd-contact-list span:not(.sd-eyebrow) { font-size: 1.35rem; color: var(--sd-offwhite); }
.sd-contact-list a:hover { color: var(--sd-red); }

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

/* =========================================================================
   WPForms im dunklen Theme (nur innerhalb der Kontaktseite)
   ========================================================================= */
.sd-contact-form .wpforms-field-label,
.sd-contact-form .wpforms-field-label-inline {
	color: var(--sd-offwhite) !important;
	font-family: var(--sd-font-body);
}
.sd-contact-form .wpforms-field-sublabel,
.sd-contact-form .wpforms-field-description {
	color: var(--sd-muted) !important;
}
.sd-contact-form input[type="text"],
.sd-contact-form input[type="email"],
.sd-contact-form input[type="tel"],
.sd-contact-form input[type="url"],
.sd-contact-form input[type="number"],
.sd-contact-form textarea,
.sd-contact-form select {
	background: var(--sd-surface) !important;
	border: 1px solid var(--sd-border) !important;
	color: var(--sd-offwhite) !important;
	border-radius: var(--sd-radius) !important;
}
.sd-contact-form input:focus,
.sd-contact-form textarea:focus,
.sd-contact-form select:focus {
	border-color: var(--sd-red) !important;
	outline: none !important;
	box-shadow: none !important;
}
.sd-contact-form ::placeholder { color: var(--sd-muted) !important; opacity: 1; }
.sd-contact-form .wpforms-submit {
	background: var(--sd-red) !important;
	border: none !important;
	color: #fff !important;
	border-radius: var(--sd-radius) !important;
	padding: 0.85em 2em !important;
	font-family: var(--sd-font-body) !important;
	font-weight: 600 !important;
	font-size: 1.2rem !important;
	cursor: pointer;
	transition: background 0.15s ease !important;
}
.sd-contact-form .wpforms-submit:hover { background: var(--sd-red-hover) !important; }

/* =========================================================================
   Referenzen-Streifen (Startseite)
   ========================================================================= */
.sd-refs {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--sd-border);
	border-bottom: 1px solid var(--sd-border);
}
.sd-refs-label {
	display: block;
	text-align: center;
	color: var(--sd-muted);
	margin-bottom: 1.75rem;
}
.sd-refs-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5rem clamp(2rem, 5vw, 4rem);
}
.sd-refs-list span {
	font-family: var(--sd-font-display);
	font-weight: 700;
	font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem);
	letter-spacing: -0.01em;
	color: var(--sd-offwhite);
}
.sd-refs-list img { max-height: 56px; width: auto; opacity: 0.85; filter: grayscale(1); transition: opacity .15s ease, filter .15s ease; }
.sd-refs-list img:hover { opacity: 1; filter: grayscale(0); }

/* =========================================================================
   Testimonial (Alonso) — Startseite
   ========================================================================= */
.sd-testimonial-inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.sd-testimonial-photo { margin: 0; }
.sd-testimonial-photo img {
	width: clamp(190px, 22vw, 300px);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--sd-radius);
	border: 1px solid var(--sd-border);
	display: block;
}
.sd-testimonial-quote { margin: 0; }
.sd-testimonial-quote::before {
	content: "\201C";
	font-family: var(--sd-font-display);
	font-weight: 700;
	color: var(--sd-red);
	font-size: 4rem;
	line-height: 0.4;
	display: block;
	margin-bottom: 0.75rem;
}
.sd-testimonial-quote p {
	font-family: var(--sd-font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 1rem + 2.6vw, 3.1rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
}
.sd-testimonial-cite {
	font-style: normal;
	font-family: var(--sd-font-mono);
	font-size: var(--sd-fs-eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sd-red);
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	flex-wrap: wrap;
}
.sd-testimonial-cite span { color: var(--sd-muted); }
@media (max-width: 720px) {
	.sd-testimonial-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.sd-testimonial-cite { justify-content: center; }
}

/* Testimonial-Banner (Bild) */
.sd-testimonial-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sd-radius);
}

/* =========================================================================
   Mobil-Menü (Hamburger sichtbar machen + Dropdown lesbar)
   ========================================================================= */
/* Hamburger-Icon (Bricks Nav Menu Toggle) in Off-White, rot beim Öffnen */
.sd-nav .bricks-mobile-menu-toggle,
.sd-header .bricks-mobile-menu-toggle,
.sd-nav .brxe-nav-menu-toggle {
	color: var(--sd-offwhite) !important;
}
.sd-nav .bricks-mobile-menu-toggle svg,
.sd-header .bricks-mobile-menu-toggle svg,
.sd-nav .bricks-mobile-menu-toggle svg * {
	fill: var(--sd-offwhite) !important;
	stroke: var(--sd-offwhite) !important;
}
.sd-nav .bricks-mobile-menu-toggle.active,
.sd-header .bricks-mobile-menu-toggle:hover { color: var(--sd-red) !important; }
.sd-nav .bricks-mobile-menu-toggle.active svg,
.sd-nav .bricks-mobile-menu-toggle.active svg * { fill: var(--sd-red) !important; stroke: var(--sd-red) !important; }

/* Aufgeklapptes Mobil-Menü: solider dunkler Grund, lesbare Links */
.sd-nav .bricks-mobile-menu,
.sd-header .bricks-mobile-menu {
	background: rgba(10, 10, 10, 0.97) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.sd-nav .bricks-mobile-menu a,
.sd-header .bricks-mobile-menu a { color: var(--sd-offwhite) !important; }
.sd-nav .bricks-mobile-menu a:hover { color: var(--sd-red) !important; }

/* =========================================================================
   Standorte-Showcase (Foto-Karten nach Gruppen)
   ========================================================================= */
.sd-loc-group {
	margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
}
.sd-loc-group:first-child { margin-top: 0; }
.sd-loc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1.25rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sd-loc-card {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--sd-radius);
	border: 1px solid var(--sd-border);
	background: var(--sd-surface);
}
.sd-loc-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.sd-loc-card:hover img { transform: scale(1.05); }
.sd-loc-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem 1.1rem;
	font-family: var(--sd-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.2;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

/* "und viele weitere"-Kachel am Ende jeder Standort-Gruppe */
.sd-loc-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-align: center;
	background: var(--sd-surface);
	border-style: dashed;
	border-color: var(--sd-border);
	transition: border-color 0.15s ease;
}
.sd-loc-more:hover { border-color: var(--sd-red); }
.sd-loc-more-plus {
	font-family: var(--sd-font-display);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--sd-red);
}
.sd-loc-more-text {
	font-family: var(--sd-font-mono);
	font-size: var(--sd-fs-eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sd-muted);
	padding: 0 1rem;
}

/* =========================================================================
   Newsletter-Block + MailPoet im dunklen Theme
   ========================================================================= */
.sd-newsletter-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.sd-newsletter-text .sd-eyebrow { display: block; margin-bottom: 0.8rem; }
.sd-newsletter-text h2 { margin: 0 0 0.6rem; }
.sd-newsletter-lead { color: var(--sd-muted); font-size: 1.15rem; line-height: 1.5; margin: 0; max-width: 42ch; }

/* MailPoet-Formular an den Look anpassen */
.sd-newsletter .mailpoet_form { padding: 0 !important; }
.sd-newsletter .mailpoet_paragraph { margin-bottom: 0.9rem !important; }
.sd-newsletter .mailpoet_text_label,
.sd-newsletter .mailpoet_checkbox_label { color: var(--sd-offwhite) !important; }
.sd-newsletter input.mailpoet_text,
.sd-newsletter input.mailpoet_email,
.sd-newsletter .mailpoet_input {
	background: var(--sd-surface) !important;
	border: 1px solid var(--sd-border) !important;
	color: var(--sd-offwhite) !important;
	border-radius: var(--sd-radius) !important;
	padding: 0.75em 1em !important;
	width: 100% !important;
}
.sd-newsletter input.mailpoet_text:focus,
.sd-newsletter .mailpoet_input:focus { border-color: var(--sd-red) !important; outline: none !important; }
.sd-newsletter .mailpoet_input::placeholder { color: var(--sd-muted) !important; }
.sd-newsletter input.mailpoet_submit,
.sd-newsletter .mailpoet_submit input {
	background: var(--sd-red) !important;
	border: none !important;
	color: #fff !important;
	border-radius: var(--sd-radius) !important;
	padding: 0.75em 1.8em !important;
	font-family: var(--sd-font-body) !important;
	font-weight: 600 !important;
	font-size: 1.1rem !important;
	cursor: pointer;
}
.sd-newsletter input.mailpoet_submit:hover { background: var(--sd-red-hover) !important; }
.sd-newsletter .mailpoet_message p { color: var(--sd-offwhite) !important; }

@media (max-width: 760px) {
	.sd-newsletter-inner { grid-template-columns: 1fr; }
}

/* Newsletter-Button hart erzwingen (MailPoet-Markup variiert je Version) */
.sd-newsletter button[type="submit"],
.sd-newsletter input[type="submit"],
.sd-newsletter .mailpoet_submit,
.sd-newsletter .mailpoet_submit input {
	border-radius: var(--sd-radius) !important;
	text-align: center !important;
}

/* =========================================================================
   Seiten-Hero (.sd-page-hero) — kompakter Hero für Unterseiten.
   Gleiche Bauweise wie der Home-Hero (Media-Stack aus .sd-hero-*), aber:
     • min-height 46svh (mobil 34svh) statt 78svh
     • KEIN Ken-Burns, KEIN Video — bleibt der Startseite vorbehalten
     • Breath-Glow + Veil + Blur bleiben — sorgt für dieselbe Handschrift
   Text-Ebene: .sd-page-hero-inner (analog .sd-home-hero-inner).
   ========================================================================= */
.sd-page-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: var(--sd-page-hero-height);
	padding-block: var(--sd-page-hero-padding-block);
	display: flex;
	align-items: center;
	background-color: var(--sd-black);
}
/* Media-Stack wiederverwendet die .sd-hero-*-Regeln (position, blur, veil).
   Ken-Burns-Animation im Kontext .sd-page-hero deaktivieren, damit die
   Bewegung der Startseite vorbehalten bleibt. */
.sd-page-hero .sd-hero-kenburns {
	animation: none !important;
	transform: none;
	/* Kein Overshoot-Rand nötig ohne Zoom. */
	inset: 0;
}
.sd-page-hero-inner {
	position: relative;
	z-index: 1;
	pointer-events: auto;
}
.sd-page-hero-eyebrow {
	display: block;
	margin-bottom: 0.9rem;
}
.sd-page-hero-title {
	font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
	max-width: 22ch;
	margin: 0 0 0.7rem;
	line-height: var(--sd-lh-tight);
}
.sd-page-hero-subline {
	color: var(--sd-muted);
	font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
	max-width: 58ch;
	margin: 0;
}

/* Headline-Zeilen-Stagger auf Seiten-Hero (analog .sd-home-title-line). */
.sd-page-hero-title-line { display: block; }
@media (prefers-reduced-motion: no-preference) {
	html.sd-anim .sd-page-hero-title-line {
		opacity: 0;
		translate: 0 var(--sd-reveal-distance);
		transition:
			opacity var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-line-delay, 0ms),
			translate var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-line-delay, 0ms);
		will-change: opacity, translate;
	}
	html.sd-anim .sd-page-hero-title-line.is-visible {
		opacity: 1;
		translate: 0 0;
	}
}

@media (max-width: 720px) {
	.sd-page-hero {
		min-height: var(--sd-page-hero-height-mobile);
		padding-block: clamp(2.5rem, 10vw, 4rem);
	}
	.sd-page-hero-title { font-size: clamp(1.8rem, 6vw, 2.6rem); max-width: 24ch; }
	.sd-page-hero-subline { font-size: 1rem; }
}

/* =========================================================================
   Generischer Scroll-Reveal (data-sd-reveal).
   Jedes Element mit dem Attribut startet unsichtbar/versetzt und wird
   beim ersten Sichtbarwerden per JS auf .is-visible gesetzt. Ein
   umgebender Container mit data-sd-reveal-group staffelt seine Kinder.
   Modus:
     data-sd-reveal            — Standard-Distanz (32 px)
     data-sd-reveal="quiet"    — dezenter, 12 px (z. B. FAQ)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
	html.sd-anim [data-sd-reveal] {
		opacity: 0;
		translate: 0 var(--sd-reveal-distance);
		transition:
			opacity var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-reveal-delay, 0ms),
			translate var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-reveal-delay, 0ms);
		will-change: opacity, translate;
	}
	html.sd-anim [data-sd-reveal="quiet"] {
		translate: 0 var(--sd-reveal-distance-quiet);
	}
	html.sd-anim [data-sd-reveal].is-visible {
		opacity: 1;
		translate: 0 0;
	}
}

/* =========================================================================
   News (Archiv + Einzelbeitrag)
   Karten-Optik lehnt sich an .sd-archive-card an, aber mit Bild oben.
   `min(320px, 100%)` verhindert horizontal-Overflow bei sehr schmalen Viewports.
   ========================================================================= */
.sd-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 1.75rem;
	align-items: stretch;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.sd-news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: var(--sd-hover-transition);
}
.sd-news-card:hover {
	border-color: var(--sd-red);
	transform: translateY(var(--sd-hover-lift));
}
.sd-news-card-media {
	aspect-ratio: 16 / 9;
	background-color: var(--sd-black);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.sd-news-card-media--empty {
	background: linear-gradient(135deg, var(--sd-surface), var(--sd-black));
}
.sd-news-card-body {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.sd-news-card-date {
	display: block;
	margin-bottom: 0.5rem;
}
.sd-news-card-title {
	font-size: var(--sd-fs-h3);
	margin: 0 0 0.7rem;
}
.sd-news-card-excerpt {
	color: var(--sd-muted);
	margin: 0 0 1.25rem;
	flex: 1 1 auto;
}

/* Reveal + Hover: gleiche Kombi-Transition wie bei .sd-archive-card, damit
   Reveal (translate) und Hover (transform) koexistieren. */
@media (prefers-reduced-motion: no-preference) {
	html.sd-anim .sd-news-card[data-sd-reveal] {
		transition:
			opacity var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-reveal-delay, 0ms),
			translate var(--sd-reveal-duration) var(--sd-reveal-ease) var(--sd-reveal-delay, 0ms),
			border-color 0.2s ease,
			transform 0.2s ease;
	}
}

/* Paginierung — schlichte Pill-Optik, konsistent mit Filter-Buttons. */
.sd-news-pagination {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.sd-news-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
.sd-news-pagination a,
.sd-news-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5em 1em;
	border: 1px solid var(--sd-border);
	border-radius: var(--sd-radius-pill);
	font-family: var(--sd-font-mono);
	font-size: 0.95rem;
	color: var(--sd-muted);
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sd-news-pagination a:hover {
	color: var(--sd-offwhite);
	border-color: var(--sd-red);
}
.sd-news-pagination .current {
	color: var(--sd-offwhite);
	border-color: var(--sd-red);
	background: var(--sd-red);
}

/* News-Einzelbeitrag */
.sd-news-post { max-width: 820px; margin-inline: auto; }
.sd-news-post-media {
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--sd-radius);
	overflow: hidden;
	background: var(--sd-surface);
}
.sd-news-post-media img {
	display: block;
	width: 100%;
	height: auto;
}
.sd-news-post-content > * + * { margin-top: 1em; }
.sd-news-post-back {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* Related-News unter jedem Referenz-/Event-Eintrag (dezent). */
.sd-event-related-news {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.sd-event-news-link {
	font-family: var(--sd-font-body);
	font-size: 0.95rem;
	color: var(--sd-muted);
	transition: color 0.15s ease;
}
.sd-event-news-link:hover { color: var(--sd-red); }

/* =========================================================================
   Mobil-Layout — Sicherheitsnetz gegen horizontal-Overflow und
   Hero-Layout-Bruch bei schmalen Viewports (< 720 px).
   Reihenfolge: erst Global-Sicherheit, dann Section-spezifisch.
   ========================================================================= */

/* <picture> nimmt keinen Layout-Slot ein — das <img> darin verankert sich
   direkt am .sd-hero-kenburns / .sd-divider-media. Verhindert, dass ein
   Bricks-Wrapper das <picture> als Block behandelt und das absolute <img>
   dadurch in den Fluss zurückfällt (Symptom „Hero-Bild als eigener Block
   über dem Text"). */
.sd-picture {
	display: contents;
}

/* Hero-Bild + Video: die absolute-Positionierung explizit gegen jede
   Overrides-Kette verankern. Ohne diese Baseline würden intrinsische
   1920 px Bild-Breite oder Video-Default-Größe das Body-Layout sprengen. */
.sd-hero-media,
.sd-hero-kenburns,
.sd-hero-img,
.sd-hero-video,
.sd-divider-media,
.sd-divider-img {
	position: absolute;
	max-width: none; /* max-width:100% aus Reset würde `inset:-4%` sonst kappen */
}
.sd-hero-img,
.sd-hero-video,
.sd-divider-img {
	inset: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 720px) {
	/* Hero kompakter: 78svh wäre auf Mobil überdimensional; 60svh
	   passt zum Fold, Adressleisten-Sprung ist mit svh vermieden. */
	.sd-home-hero {
		min-height: 60vh;
		min-height: 60svh;
		padding-block: clamp(3rem, 12vw, 5rem);
	}
	.sd-home-title  { font-size: clamp(2.2rem, 8vw, 3rem); max-width: 20ch; }
	.sd-home-lead   { font-size: 1.05rem; }

	/* Modul-/Feature-/News-/Event-Grid einspaltig — `minmax(…px, 1fr)`
	   würde bei < min-Content-Breite sonst overflow erzwingen. */
	.sd-archive-grid,
	.sd-feature-grid,
	.sd-news-grid,
	.sd-event-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.sd-archive-card { padding: 1.5rem; }
	.sd-feature      { padding: 1.35rem; }
	.sd-news-card-body { padding: 1.35rem; }
	.sd-event-body { padding: 1.35rem; }

	/* Section-Trenner: aspect-ratio nochmal explizit, `inset` reduzieren,
	   Parallax-Transform NIE anfassen. */
	.sd-divider {
		aspect-ratio: 3 / 1;
		min-height: 160px;
	}
	.sd-divider-media {
		inset: 0;                     /* Overflow-Rand raus — kein Wackeln */
		transform: none !important;   /* Parallax vollständig aus */
	}

	/* Home-CTA-Buttons untereinander, wenn's eng wird */
	.sd-home-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.sd-home-cta .sd-btn { width: 100%; text-align: center; }
}

/* Feinschliff Tablet-Bereich */
@media (min-width: 721px) and (max-width: 1024px) {
	.sd-archive-grid { grid-template-columns: repeat(2, 1fr); }
	.sd-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.sd-news-grid    { grid-template-columns: repeat(2, 1fr); }
	.sd-event-grid   { grid-template-columns: repeat(2, 1fr); }
}