/*
 * bds|architects – Ergänzendes Stylesheet
 * Wird im Frontend und im Editor geladen (add_editor_style).
 * Grundlegendes Styling kommt aus theme.json; hier nur, was sich dort
 * nicht abbilden lässt.
 */

/* ---------------------------------------------------------------------------
   Grundlegendes
   --------------------------------------------------------------------------- */
:root {
	--bds-transition: 0.2s ease;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   Scroll-Fortschrittslinie (oben, rot)
   --------------------------------------------------------------------------- */
.bds-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background-color: var(--wp--preset--color--accent);
	z-index: 9999;
	pointer-events: none;
	will-change: width;
}

@media (prefers-reduced-motion: reduce) {
	.bds-scroll-progress {
		transition: none;
	}
}

a {
	transition: color var(--bds-transition);
}

/* Links im Inhalt schwarz – ohne Buttons; bei Hover rot (Akzent) */
.wp-block-post-content a:not(.wp-element-button) {
	color: var(--wp--preset--color--contrast);
}
.wp-block-post-content a:not(.wp-element-button):hover,
.wp-block-post-content a:not(.wp-element-button):focus {
	color: var(--wp--preset--color--accent);
}

/* Bilder nie verzerren */
img {
	height: auto;
	max-width: 100%;
}

/* Kein Abstand zwischen Header/Main und vor dem Footer (Root-Layout-Gap entfernen) */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
   Eigener Button-Stil: Umriss
   --------------------------------------------------------------------------- */
.wp-block-button.is-style-outline-contrast .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	transition: background-color var(--bds-transition), color var(--bds-transition);
}

.wp-block-button.is-style-outline-contrast .wp-block-button__link:hover,
.wp-block-button.is-style-outline-contrast .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
   Eigener Trenner-Stil: Akzent
   --------------------------------------------------------------------------- */
.wp-block-separator.is-style-accent {
	border: none;
	height: 3px;
	width: 64px;
	margin-left: 0;
	background-color: var(--wp--preset--color--accent);
	opacity: 1;
}

.wp-block-separator.is-style-accent.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Projekt-Bildergalerie (Slider)
   --------------------------------------------------------------------------- */
.bds-galerie {
	position: relative;
}

.bds-galerie__track {
	--bds-gap: var(--wp--preset--spacing--20);
	display: flex;
	gap: var(--bds-gap);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* sanftes Wischen auf iOS */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Firefox */
}

.bds-galerie__track::-webkit-scrollbar {
	display: none; /* WebKit */
}

/* Sichtbare Slides je Breakpoint: Desktop 3 · Tablet 2 · Mobil 1 */
.bds-galerie__slide {
	flex: 0 0 calc((100% - 2 * var(--bds-gap)) / 3);
	scroll-snap-align: start;
	margin: 0;
}

@media (max-width: 900px) {
	.bds-galerie__slide {
		flex-basis: calc((100% - var(--bds-gap)) / 2);
	}
}

@media (max-width: 600px) {
	.bds-galerie__slide {
		flex-basis: 100%;
	}
}

.bds-galerie__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bds-galerie__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 0; /* Quadrat */
	background: var(--wp--preset--color--base); /* weiß */
	color: var(--wp--preset--color--contrast); /* schwarzer Pfeil */
	/* gleiche Schrift + Gewicht wie der Kachel-Pfeil, damit die Glyphe identisch fällt */
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 6px rgba(17, 17, 17, 0.18);
	transition: color var(--bds-transition);
}

.bds-galerie__nav:hover,
.bds-galerie__nav:focus-visible {
	color: var(--wp--preset--color--accent); /* Pfeil rot bei Hover */
}

/* Deaktiviert (kein Weiter/Zurück möglich): gedimmt */
.bds-galerie__nav:disabled {
	opacity: 0.3;
	cursor: default;
	box-shadow: none;
	pointer-events: none;
}

/* Exakt derselbe Pfeil wie auf den Projektkacheln (\2192), Prev gespiegelt */
.bds-galerie__nav::before {
	content: "\2192";
	display: block;
	line-height: 1;
}

.bds-galerie__nav--prev::before {
	transform: scaleX(-1);
}

.bds-galerie__nav--prev {
	left: var(--wp--preset--spacing--30);
}

.bds-galerie__nav--next {
	right: var(--wp--preset--spacing--30);
}

/* Bei nur einem Bild: keine Navigation, Bild zentriert auf Content-Breite */
.bds-galerie.is-single .bds-galerie__nav {
	display: none;
}

.bds-galerie:not(.bds-hero).is-single .bds-galerie__track {
	justify-content: center;
}

.bds-galerie:not(.bds-hero).is-single .bds-galerie__slide {
	flex-basis: min(var(--wp--style--global--content-size, 768px), 100%);
}

/* Einzelbild auf Content-Breite: etwas breiteres Format, dadurch oben/unten
   beschnitten (object-fit: cover). */
.bds-galerie:not(.bds-hero).is-single .bds-galerie__img {
	aspect-ratio: 3 / 2;
}

/* Genau 2 Bilder: ab 601px beide nebeneinander, mittig/füllend, keine Pfeile.
   Pfeile (zum Wischen) erst mobil (≤600px). */
@media (min-width: 601px) {
	.bds-galerie.is-double .bds-galerie__track {
		justify-content: center;
	}
	.bds-galerie.is-double .bds-galerie__slide {
		flex-basis: calc((100% - var(--bds-gap)) / 2);
	}
	.bds-galerie.is-double .bds-galerie__nav {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Projekt-Hero-Slider (Startseite, volle Breite, 1 Projekt pro Ansicht)
   --------------------------------------------------------------------------- */
.bds-hero .bds-galerie__track {
	gap: 0;
}

.bds-hero .bds-galerie__slide {
	flex: 0 0 100%;
	position: relative;
	display: block;
	scroll-snap-align: start;
	color: var(--wp--preset--color--base);
}

.bds-hero__img {
	display: block;
	width: 100%;
	height: min(82vh, 820px);
	object-fit: cover;
}

.bds-hero__overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--base);
	background: linear-gradient(to top, rgba(17, 17, 17, 0.65) 0%, rgba(17, 17, 17, 0) 100%);
}

.bds-hero__eyebrow {
	color: var(--wp--preset--color--base);
}

.bds-hero__title {
	font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* Titel/Eyebrow bleiben bei Hover weiß (überschreibt globalen Link-Hover) */
.bds-hero__slide:hover .bds-hero__title,
.bds-hero__slide:hover .bds-hero__eyebrow {
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
   Logo
   --------------------------------------------------------------------------- */
.site-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.site-logo-svg {
	display: block;
	width: auto;
	height: 64px;        /* Höhe steuert die Logo-Größe */
	max-width: 100%;
}

@media (max-width: 600px) {
	.site-logo-svg {
		height: 48px;
	}
}

/* ---------------------------------------------------------------------------
   Rotes Quadrat – wiederkehrendes Gestaltungselement
   .bds-square         : eigenständiger Marker (überall einsetzbar)
   .bds-eyebrow::before : Marker vor einer Eyebrow-Zeile
   --------------------------------------------------------------------------- */
.bds-square {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	background-color: var(--wp--preset--color--accent);
	vertical-align: middle;
}

.bds-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	line-height: 1;
}

.bds-eyebrow::before {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	background-color: var(--wp--preset--color--accent);
}

/* Trenner zwischen den Eyebrow-Angaben (z. B. Kategorie · Jahr) */
.bds-eyebrow > * {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Projektkachel
   --------------------------------------------------------------------------- */
.bds-project-tile {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.bds-project-tile .wp-block-post-featured-image,
.bds-project-tile .wp-block-image {
	overflow: hidden;
	margin: 0;
}

.bds-project-tile .wp-block-post-featured-image img,
.bds-project-tile .wp-block-image img {
	display: block;
	width: 100%;
	transition: transform 0.4s ease, filter var(--bds-transition);
}

.bds-project-tile:hover .wp-block-post-featured-image img,
.bds-project-tile:hover .wp-block-image img {
	transform: scale(1.03);
}

/* Projekt-Raster: feste Spalten mit eigenen Breakpoints
   Desktop ≥901px: 3 Spalten · 600–900px: 2 · ≤599px: 1
   (höhere Spezifität als WordPress' generierte .wp-container-…-Regel) */
.bds-project-grid.is-layout-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------------------------------------------------------------------------
   Projekt-Filter (AJAX)
   --------------------------------------------------------------------------- */
.bds-projekt-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.bds-filter-btn {
	background: none;
	border: 0;
	padding: 0 0 0.2em 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	box-shadow: inset 0 -2px 0 0 transparent;
	transition: box-shadow var(--bds-transition), color var(--bds-transition);
}

.bds-filter-btn:hover,
.bds-filter-btn:focus-visible {
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--accent);
}

.bds-filter-btn.is-active {
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--accent);
}

.bds-projekt-grid {
	transition: opacity var(--bds-transition);
}

.bds-projekt-grid.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

.bds-eyebrow__sep {
	color: var(--wp--preset--color--muted);
}

.bds-projekt-empty {
	grid-column: 1 / -1;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 900px) {
	.bds-project-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.bds-project-grid.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* Titel mit Pfeil */
.bds-project-title {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	margin: 0.5rem 0;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Desktop: kleinere Kachel-Titel */
@media (min-width: 901px) {
	.bds-project-tile .bds-project-title {
		font-size: 1.25rem;
	}
}

.bds-project-title a {
	color: var(--wp--preset--color--contrast);
}

.bds-project-title::after {
	content: "\2192"; /* → */
	color: var(--wp--preset--color--contrast);
	transition: transform var(--bds-transition), color var(--bds-transition);
}

.bds-project-tile:hover .bds-project-title::after {
	transform: translateX(0.25em);
	color: var(--wp--preset--color--accent);
}

.bds-project-tile:hover .bds-project-title a {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   Navigation: rote Linie bei Hover und beim aktiven Eintrag
   --------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
	padding-bottom: 0.15em;
	box-shadow: inset 0 -2px 0 0 transparent;
	transition: box-shadow var(--bds-transition), color var(--bds-transition);
}

/* Header-Navigation etwas fetter */
.bds-main-nav .wp-block-navigation-item__content {
	font-weight: 600;
}

/* Mobiles Navigations-Overlay: mehr Abstand zwischen den Punkten und mehr Rand */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Schließen-Button (X) mit einheitlichem Abstand zum Rand */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
   Fokus-Sichtbarkeit (Barrierefreiheit)
   --------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Intro-Loader (nur Startseite) – Logo baut sich auf und fährt in den Header
   --------------------------------------------------------------------------- */
.intro-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--wp--preset--color--base, #fff);
	align-items: center;
	justify-content: center;
}
/* nur bei aktivem Intro sichtbar (Klasse setzt das Inline-Script im <head>) */
html.intro .intro-overlay {
	display: flex;
}
html.intro {
	overflow: hidden;
}
/* echtes Header-Logo verstecken, bis das animierte Logo „gelandet" ist */
html.intro .site-logo-svg {
	opacity: 0;
}

.intro__logo {
	width: min(560px, 72vw);
	transform-origin: top left; /* für die FLIP-Berechnung */
	will-change: transform;
}
.intro__logo-svg {
	display: block;
	width: 100%;
	height: auto;
}
/* Startzustand der Teile, damit nichts aufblitzt, bevor JS übernimmt */
html.intro #lg-bds,
html.intro #lg-line {
	opacity: 0;
}

/* ---------------------------------------------------------------------------
   Lageplan (interaktive Karte) – Frontend
   Desktop: alle Callouts dauerhaft sichtbar, schwarze Verbindungslinie.
   Mobil: Karte in Höhe sichtbar, horizontal scrollbar, Callout per Tap.
   --------------------------------------------------------------------------- */
.bds-lageplan {
	--bds-lp-lead: 32px; /* Länge der Verbindungslinie */
	--bds-header-h: 112px; /* per JS überschrieben; Fallback */
	--bds-map-zoom: 1.5; /* >1 = stärker hineinzoomen, leere Ränder oben/unten weg */
	--bds-map-shift: -4%; /* vertikaler Versatz (negativ = Karte nach oben) */
	position: relative;
	height: calc(100vh - var(--bds-header-h));
	height: calc(100dvh - var(--bds-header-h)); /* Viewport minus Header */
	overflow: hidden;
	background: var(--wp--preset--color--surface-soft);
}

.bds-lageplan__scroll {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center; /* vertikal zentrierter Ausschnitt */
	overflow-x: auto; /* horizontal scrollbar, sobald breiter als sichtbar */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

/* Karte füllt die Höhe UND mindestens die Breite (cover). Ist sie dabei
   breiter als der sichtbare Bereich, wird der Überhang horizontal scrollbar;
   ist sie höher, wird oben/unten (markerlos) beschnitten. */
.bds-lageplan__inner {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 2267 / 1323;
	height: calc((100dvh - var(--bds-header-h)) * var(--bds-map-zoom));
	width: auto;
	line-height: 0;
	transform: translateY(var(--bds-map-shift));
}

.bds-lageplan__map {
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
}

/* Headline oben rechts – bündig zum Header-Inhalt (gleiche Wide-Breite/Gutter),
   festes Overlay (scrollt nicht mit der Karte). */
.bds-lageplan__head {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	max-width: 1280px; /* = wideSize wie der Header */
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
	display: flex;
	justify-content: flex-start;
	pointer-events: none;
}
.bds-lageplan__headline {
	margin: 0;
	max-width: 22ch;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-align: left;
	color: var(--wp--preset--color--contrast);
}

/* Bildunterschrift unten rechts (bleibt im Sichtbereich, scrollt nicht mit). */
.bds-lageplan__caption {
	position: absolute;
	right: 12px;
	bottom: 12px; /* knapp über der horizontalen Scrollbar (10px) */
	z-index: 3;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	pointer-events: none;
}

/* Marker = Nullpunkt auf der Karte; Kinder positionieren sich relativ dazu. */
.bds-lageplan__marker {
	--bds-lp-diag: calc(var(--bds-lp-lead) * 0.7071); /* Kathete der 45°-Linie */
	position: absolute;
	width: 0;
	height: 0;
	line-height: normal;
}
/* Abstand zum Punkt (Linienlänge) pro Marker: klein (Standard) oder groß. */
.bds-lageplan__marker.is-dist-long {
	--bds-lp-lead: 64px;
}
.bds-lageplan__marker:hover,
.bds-lageplan__marker:focus-within {
	z-index: 5;
}

/* Roter Marker: Ring mit rotem Punkt in der Mitte (Zielscheibe). */
.bds-lageplan__dot {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: transform var(--bds-transition);
}
.bds-lageplan__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
.bds-lageplan__dot:hover {
	transform: translate(-50%, -50%) scale(1.18);
}

/* Schwarze Verbindungslinie. */
.bds-lageplan__leader {
	position: absolute;
	background: var(--wp--preset--color--contrast);
}
.is-right .bds-lageplan__leader {
	left: 0;
	top: 0;
	width: var(--bds-lp-lead);
	height: 1px;
	transform: translateY(-50%);
}
.is-left .bds-lageplan__leader {
	right: 0;
	top: 0;
	width: var(--bds-lp-lead);
	height: 1px;
	transform: translateY(-50%);
}
.is-top .bds-lageplan__leader {
	left: 0;
	bottom: 0;
	width: 1px;
	height: var(--bds-lp-lead);
	transform: translateX(-50%);
}
.is-bottom .bds-lageplan__leader {
	left: 0;
	top: 0;
	width: 1px;
	height: var(--bds-lp-lead);
	transform: translateX(-50%);
}
/* Diagonale Seiten: Linie um 45° gedreht, dreht sich um den Punkt. */
.is-top-right .bds-lageplan__leader,
.is-bottom-right .bds-lageplan__leader,
.is-top-left .bds-lageplan__leader,
.is-bottom-left .bds-lageplan__leader {
	left: 0;
	top: 0;
	width: var(--bds-lp-lead);
	height: 1px;
	transform-origin: 0 50%;
}
.is-top-right .bds-lageplan__leader { transform: rotate(-45deg); }
.is-bottom-right .bds-lageplan__leader { transform: rotate(45deg); }
.is-top-left .bds-lageplan__leader { transform: rotate(-135deg); }
.is-bottom-left .bds-lageplan__leader { transform: rotate(135deg); }

/* Callout: weiße Karte mit quadratischem Bild + Projektname darunter. */
.bds-lageplan__callout {
	position: absolute;
	width: 120px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20);
}
.bds-lageplan__link {
	display: block;
	text-decoration: none;
}
/* Schließen-Button (X) – auch auf Desktop. */
.bds-lageplan__close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: background var(--bds-transition), color var(--bds-transition);
}
.bds-lageplan__close:hover {
	background: var(--wp--preset--color--accent);
	color: #fff;
}
/* Geschlossen: nur der Punkt bleibt. */
.bds-lageplan__marker.is-closed .bds-lageplan__callout,
.bds-lageplan__marker.is-closed .bds-lageplan__leader {
	display: none;
}
.is-right .bds-lageplan__callout {
	left: var(--bds-lp-lead);
	top: 0;
	transform: translateY(-50%);
	margin-left: 6px;
}
.is-left .bds-lageplan__callout {
	right: var(--bds-lp-lead);
	top: 0;
	transform: translateY(-50%);
	margin-right: 6px;
}
.is-top .bds-lageplan__callout {
	left: 0;
	bottom: var(--bds-lp-lead);
	transform: translateX(-50%);
	margin-bottom: 6px;
}
.is-bottom .bds-lageplan__callout {
	left: 0;
	top: var(--bds-lp-lead);
	transform: translateX(-50%);
	margin-top: 6px;
}
/* Diagonale Callouts: Ecke der Karte sitzt am Ende der 45°-Linie. */
.is-top-right .bds-lageplan__callout {
	left: var(--bds-lp-diag);
	bottom: var(--bds-lp-diag);
	margin: 0 0 4px 4px;
}
.is-bottom-right .bds-lageplan__callout {
	left: var(--bds-lp-diag);
	top: var(--bds-lp-diag);
	margin: 4px 0 0 4px;
}
.is-top-left .bds-lageplan__callout {
	right: var(--bds-lp-diag);
	bottom: var(--bds-lp-diag);
	margin: 0 4px 4px 0;
}
.is-bottom-left .bds-lageplan__callout {
	right: var(--bds-lp-diag);
	top: var(--bds-lp-diag);
	margin: 4px 4px 0 0;
}

.bds-lageplan__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3; /* wie die Projektkacheln */
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.bds-lageplan__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bds-lageplan__title {
	display: block;
	margin: 0;
	padding: 7px 6px;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--wp--preset--color--contrast);
	transition: color var(--bds-transition);
}
.bds-lageplan__link:hover .bds-lageplan__title {
	color: var(--wp--preset--color--accent);
}

/* Mobil verhält sich wie Desktop: alle Callouts + Verbindungslinien direkt
   sichtbar; die Karte ist horizontal scrollbar zum Erkunden. */

/* Aufbau-Animation beim Laden: einzelne Farbflächen fallen herein → Punkte → Projekte. */
.bds-lageplan__map { display: block; }
.bds-lp-area {
	animation: bds-lp-fall 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
	animation-delay: calc(var(--i, 0) * 0.028s);
}
@keyframes bds-lp-fall {
	from { opacity: 0; transform: translateY(-26px); }
	to   { opacity: 1; transform: translateY(0); }
}
.bds-lageplan__dot {
	animation: bds-lp-pop 0.45s ease backwards;
	animation-delay: calc(1s + var(--i, 0) * 0.05s);
}
@keyframes bds-lp-pop {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.bds-lageplan__leader {
	animation: bds-lp-fade 0.4s ease backwards;
	animation-delay: calc(1.25s + var(--i, 0) * 0.05s);
}
.bds-lageplan__callout {
	animation: bds-lp-fade 0.5s ease backwards;
	animation-delay: calc(1.35s + var(--i, 0) * 0.05s);
}
@keyframes bds-lp-fade { from { opacity: 0; } to { opacity: 1; } }

/* Aufbau pausiert, bis JS startet (erst nach dem Intro bzw. sofort ohne Intro). */
.bds-lp-area,
.bds-lageplan__dot,
.bds-lageplan__leader,
.bds-lageplan__callout {
	animation-play-state: paused;
}
.bds-lageplan.is-animate .bds-lp-area,
.bds-lageplan.is-animate .bds-lageplan__dot,
.bds-lageplan.is-animate .bds-lageplan__leader,
.bds-lageplan.is-animate .bds-lageplan__callout {
	animation-play-state: running;
}

/* Nach Nutzer-Interaktion mit einem Marker: keine Aufbau-Animation mehr –
   der Callout/Link erscheint beim erneuten Öffnen sofort. */
.bds-lageplan__marker.is-user .bds-lageplan__callout,
.bds-lageplan__marker.is-user .bds-lageplan__leader {
	animation: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.bds-lageplan__dot,
	.bds-lageplan__callout {
		transition: none;
	}
	.bds-lp-area,
	.bds-lageplan__dot,
	.bds-lageplan__leader,
	.bds-lageplan__callout {
		animation: none;
	}
}

/* Swipe-Hinweis (mobil): Touch-Icon zentriert über der Karte. */
.bds-lageplan {
	position: relative;
}
.bds-lageplan__hint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	pointer-events: none; /* Wischen geht durch das Icon hindurch */
	transition: opacity 0.3s ease;
}
.bds-lageplan__hint.is-hidden {
	opacity: 0;
}
.bds-lageplan__hint img {
	display: block;
	width: 56px;
	height: auto;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
	animation: bds-lp-swipe 1.4s ease-in-out infinite;
}
@keyframes bds-lp-swipe {
	0%, 100% { transform: translateX(-12px); }
	50%      { transform: translateX(12px); }
}

/* Maus-Drag am Desktop: Greif-Cursor über der scrollbaren Karte. */
.bds-lageplan__scroll {
	cursor: grab;
	/* Firefox: dünne Scrollbar – Thumb rot, Track grau. */
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--contrast, #111111) #d9d9d9;
}
.bds-lageplan__scroll.is-dragging {
	cursor: grabbing;
	user-select: none;
}
/* WebKit (Chrome/Safari): Track grau, Thumb (Dragger) schwarz. */
.bds-lageplan__scroll::-webkit-scrollbar {
	height: 10px;
}
.bds-lageplan__scroll::-webkit-scrollbar-track {
	background: #d9d9d9;
}
.bds-lageplan__scroll::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--contrast, #111111);
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Projektdaten-Tabelle (Einzelprojekt)
   --------------------------------------------------------------------------- */
.bds-projekt-daten {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--wp--preset--spacing--40);
}
.bds-projekt-daten th,
.bds-projekt-daten td {
	text-align: left;
	vertical-align: top;
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}
.bds-projekt-daten th {
	width: 14rem;
	padding-right: 1.5rem;
	font-weight: 700;
}
@media (max-width: 600px) {
	.bds-projekt-daten th {
		width: 9rem;
	}
}

/* ---------------------------------------------------------------------------
   Zeitstrahl (Meilensteine) – Profil-Seite
   Desktop: vertikale Mittellinie, Einträge abwechselnd links/rechts.
   Mobil: Linie links, alle Einträge einspaltig rechts.
   --------------------------------------------------------------------------- */
.bds-zeitstrahl {
	max-width: 1000px;
	margin-inline: auto;
}
.bds-zeitstrahl__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Mittellinie */
.bds-zeitstrahl__list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: rgba(17, 17, 17, 0.14);
}
.bds-zeitstrahl__item {
	position: relative;
	width: 50%;
	box-sizing: border-box;
	padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}
.bds-zeitstrahl__item:nth-child(odd) {
	left: 0;
	text-align: right;
}
.bds-zeitstrahl__item:nth-child(even) {
	left: 50%;
	text-align: left;
}
/* Punkt auf der Linie */
.bds-zeitstrahl__marker {
	position: absolute;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	border: 2px solid var(--wp--preset--color--base);
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
}
.bds-zeitstrahl__item:nth-child(odd) .bds-zeitstrahl__marker {
	right: -7px;
}
.bds-zeitstrahl__item:nth-child(even) .bds-zeitstrahl__marker {
	left: -7px;
}
.bds-zeitstrahl__year {
	display: block;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--large);
}
.bds-zeitstrahl__title {
	margin: 0.25em 0 0.35em;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.2;
}
.bds-zeitstrahl__text {
	color: var(--wp--preset--color--muted);
}
.bds-zeitstrahl__text > :first-child {
	margin-top: 0;
}
.bds-zeitstrahl__text > :last-child {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.bds-zeitstrahl__list::before {
		left: 7px;
	}
	.bds-zeitstrahl__item,
	.bds-zeitstrahl__item:nth-child(odd),
	.bds-zeitstrahl__item:nth-child(even) {
		width: 100%;
		left: 0;
		text-align: left;
		padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}
	.bds-zeitstrahl__item:nth-child(odd) .bds-zeitstrahl__marker,
	.bds-zeitstrahl__item:nth-child(even) .bds-zeitstrahl__marker {
		left: 0;
		right: auto;
	}
}

/* ---------------------------------------------------------------------------
   Netzwerk-Grafik (Leistungen) – animiert
   --------------------------------------------------------------------------- */
.bds-netzwerk-wrap {
	max-width: 560px;
	margin-inline: auto;
}
.bds-netzwerk {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Verbindungslinien zeichnen sich ein */
.bds-net__edge {
	fill: none;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: bds-net-draw 1s ease forwards;
	animation-delay: var(--d, 0s);
}
.bds-net__edge--black {
	stroke: var(--wp--preset--color--contrast);
	stroke-width: 1.2;
}
.bds-net__edge--beige {
	stroke: var(--wp--preset--color--surface-dark);
	stroke-width: 1;
}

/* Rote Signale, die vom Zentrum nach außen fließen */
.bds-net__signal {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 1.5 100;
	stroke-dashoffset: 100;
	animation: bds-net-signal 2.6s linear infinite;
	animation-delay: calc(1.4s + var(--d, 0s));
}

/* Partner-Knoten */
.bds-net__node {
	fill: var(--wp--preset--color--surface-dark);
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
	animation: bds-net-pop 0.6s ease forwards;
	animation-delay: var(--d, 0s);
}
.bds-net__floater {
	animation: bds-net-float 7s ease-in-out var(--d, 0s) infinite alternate;
}

/* Zentrum (Hub) */
.bds-net__core {
	fill: var(--wp--preset--color--accent);
	transform-box: fill-box;
	transform-origin: center;
	animation: bds-net-breathe 3.4s ease-in-out infinite;
}
.bds-net__radar {
	fill: var(--wp--preset--color--accent);
	opacity: 0.3;
	transform-box: fill-box;
	transform-origin: center;
	animation: bds-net-radar 3.4s ease-out infinite;
}

@keyframes bds-net-draw { to { stroke-dashoffset: 0; } }
@keyframes bds-net-signal { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bds-net-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes bds-net-float { to { transform: translate(var(--fx, 0), var(--fy, 0)); } }
@keyframes bds-net-breathe { 50% { transform: scale(1.07); } }
@keyframes bds-net-radar { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.bds-net__edge { stroke-dashoffset: 0; animation: none; }
	.bds-net__node { opacity: 1; animation: none; }
	.bds-net__floater,
	.bds-net__core,
	.bds-net__radar { animation: none; }
	.bds-net__signal { display: none; }
}

/* ---------------------------------------------------------------------------
   Projekt-Navigation (Einzelprojekt): 3 Buttons – vorheriges / alle / nächstes
   --------------------------------------------------------------------------- */
.bds-projekt-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
.bds-projekt-nav__prev { justify-self: start; }
.bds-projekt-nav__all { justify-self: center; }
.bds-projekt-nav__next { justify-self: end; }

.bds-projekt-nav__btn {
	display: inline-block;
	padding: 0.7em 1.4em;
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--bds-transition), color var(--bds-transition);
}
.bds-projekt-nav__btn:hover,
.bds-projekt-nav__btn:focus {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
	.bds-projekt-nav {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}
	.bds-projekt-nav__prev,
	.bds-projekt-nav__all,
	.bds-projekt-nav__next {
		justify-self: stretch;
	}
	.bds-projekt-nav__btn {
		display: block;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
   Leistungen-Grafik (Hub & Spoke): bds im Zentrum, 3 Knoten + Realisierung.
   Texte editierbar (Pattern), Kreise/Icons/Linien/Layout per CSS.
   --------------------------------------------------------------------------- */
.bds-leistungen {
	--bds-hub: 150px;
	--bds-node: 104px;
	--bds-line: 46px;
	--bds-icon: 48px;
	--bds-l-color: var(--wp--preset--color--contrast);
	display: grid;
	grid-template-columns: 1fr calc(var(--bds-hub) + 2 * var(--bds-line)) 1fr;
	grid-template-rows: auto calc(var(--bds-hub) + 2 * var(--bds-line)) auto;
	align-items: center;
	justify-items: center;
	max-width: 1080px;
	margin-inline: auto;
	text-align: center;
}

.bds-leistungen__cell.is-top    { grid-column: 2; grid-row: 1; align-self: end; }
.bds-leistungen__cell.is-left   { grid-column: 1; grid-row: 2; justify-self: end; }
.bds-leistungen__hub            { grid-column: 2; grid-row: 2; }
.bds-leistungen__cell.is-right  { grid-column: 3; grid-row: 2; justify-self: start; }
.bds-leistungen__cell.is-bottom { grid-column: 2; grid-row: 3; align-self: start; }

/* Anordnung innerhalb der Knoten */
.bds-leistungen__cell.is-top,
.bds-leistungen__cell.is-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.bds-leistungen__cell.is-left { display: flex; align-items: center; gap: 18px; }
.bds-leistungen__cell.is-right { display: flex; align-items: center; gap: 18px; }
.bds-leistungen__cell.is-left .bds-leistungen__text { order: -1; text-align: right; }
.bds-leistungen__cell.is-right .bds-leistungen__text { text-align: left; }

/* Hub */
.bds-leistungen__hub {
	width: var(--bds-hub);
	height: var(--bds-hub);
	border-radius: 50%;
	background: var(--wp--preset--color--surface-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* Kreise + Icons */
.bds-leistungen__circle {
	position: relative;
	flex: none;
	width: var(--bds-node);
	height: var(--bds-node);
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-dark);
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--bds-icon);
}
.bds-leistungen__cell.is-top .bds-leistungen__circle {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.6%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%2220%22%2F%3E%3Crect%20x%3D%2219%22%20y%3D%2219%22%20width%3D%2220%22%20height%3D%2220%22%2F%3E%3C%2Fsvg%3E");
}
.bds-leistungen__cell.is-left .bds-leistungen__circle {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%2211%22%20y%3D%2217%22%20width%3D%2220%22%20height%3D%2220%22%2F%3E%3Cpath%20d%3D%22M11%2017%20L18%2010%20L38%2010%20L31%2017%22%2F%3E%3Cpath%20d%3D%22M31%2037%20L38%2030%20L38%2010%22%2F%3E%3C%2Fsvg%3E");
}
.bds-leistungen__cell.is-right .bds-leistungen__circle {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3C%2Fsvg%3E");
}
.bds-leistungen__arrow {
	position: relative;
	width: 56px;
	height: 40px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2040%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.6%22%3E%3Cpath%20d%3D%22M3%204%20H53%20L28%2036%20Z%22%2F%3E%3C%2Fsvg%3E");
}

/* Verbindungslinien (zeigen jeweils Richtung Zentrum) */
.bds-leistungen__cell.is-top .bds-leistungen__circle::after,
.bds-leistungen__cell.is-left .bds-leistungen__circle::after,
.bds-leistungen__cell.is-right .bds-leistungen__circle::after,
.bds-leistungen__cell.is-bottom .bds-leistungen__arrow::before {
	content: "";
	position: absolute;
	background: var(--bds-l-color);
}
.bds-leistungen__cell.is-top .bds-leistungen__circle::after {
	top: 100%; left: 50%; transform: translateX(-50%);
	width: 1px; height: var(--bds-line);
}
.bds-leistungen__cell.is-bottom .bds-leistungen__arrow::before {
	bottom: 100%; left: 50%; transform: translateX(-50%);
	width: 1px; height: var(--bds-line);
}
.bds-leistungen__cell.is-left .bds-leistungen__circle::after {
	left: 100%; top: 50%; transform: translateY(-50%);
	height: 1px; width: var(--bds-line);
}
.bds-leistungen__cell.is-right .bds-leistungen__circle::after {
	right: 100%; top: 50%; transform: translateY(-50%);
	height: 1px; width: var(--bds-line);
}

/* Texte */
.bds-leistungen__title {
	margin: 0 0 0.3em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--medium);
}
.bds-leistungen__cell.is-bottom .bds-leistungen__title {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
}
.bds-leistungen__desc {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
}
.bds-leistungen__text { max-width: 26ch; }

/* Mobil: vertikaler Stapel, Kreuz-Linien aus */
@media (max-width: 820px) {
	.bds-leistungen {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
		width: 100%;
		max-width: 22rem;
		margin-inline: auto;
		--bds-hub: 120px;
		--bds-node: 86px;
		--bds-icon: 40px;
	}
	.bds-leistungen__cell.is-bottom .bds-leistungen__title {
		font-size: var(--wp--preset--font-size--medium);
	}
	.bds-leistungen__cell {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		text-align: center;
		gap: 10px;
	}
	.bds-leistungen__cell.is-left .bds-leistungen__text,
	.bds-leistungen__cell.is-right .bds-leistungen__text {
		order: 0;
		text-align: center;
	}
	.bds-leistungen__cell .bds-leistungen__circle::after,
	.bds-leistungen__cell .bds-leistungen__arrow::before {
		display: none;
	}
	.bds-leistungen__text {
		max-width: 17rem;
		text-align: center;
		overflow-wrap: break-word;
	}
}

/* ---------------------------------------------------------------------------
   Automatische Anker-Navigation: linke, sticky Spalte – Inhalt rechts
   --------------------------------------------------------------------------- */
.bds-doc-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

.bds-doc-layout > .wp-block-post-content {
	max-width: none;
	width: auto;
	margin: 0;
	min-width: 0;
	counter-reset: bds-sec;
}

/* Abschnitte (H2) automatisch nummerieren (Nummer in Textfarbe, nicht rot). */
.bds-doc-layout > .wp-block-post-content > h2.wp-block-heading::before {
	counter-increment: bds-sec;
	content: counter(bds-sec) ". ";
	color: inherit;
}

.bds-anker-nav {
	position: sticky;
	top: 2rem;
	align-self: start;
	margin: 0;
	padding: 1rem 1.25rem;
	border-left: 1px solid #cccccc;
	background: var(--wp--preset--color--subtle, #f2f2f2);
	font-size: 0.95rem;
}

.bds-anker-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	counter-reset: bds-toc;
}

.bds-anker-nav li {
	counter-increment: bds-toc;
}

.bds-anker-nav a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.bds-anker-nav a::before {
	content: counter(bds-toc) ". ";
	color: inherit;
}

.bds-anker-nav a:hover,
.bds-anker-nav a:focus-visible {
	text-decoration: underline;
	color: var(--wp--preset--color--accent, #c8102e);
}

/* Aktiver Punkt (Scroll-Spy): rot. */
.bds-anker-nav a.is-active {
	color: var(--wp--preset--color--accent, #c8102e);
	font-weight: 600;
}

/* Sprungziele nicht ganz an den oberen Rand kleben. */
main h2[id] {
	scroll-margin-top: 2rem;
}

/* Mobil: Navigation über den Inhalt, nicht sticky. */
@media (max-width: 781px) {
	.bds-doc-layout {
		display: block;
	}
	.bds-anker-nav {
		position: static;
		margin-bottom: 2rem;
	}
}

/* ---------------------------------------------------------------------------
   Sticky Header auf Mobil/Tablet
   --------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 100;
		background-color: var(--wp--preset--color--base, #ffffff);
	}
}

/* ---------------------------------------------------------------------------
   „Alte Projekte" – Swipe-Slider (unter Profil)
   --------------------------------------------------------------------------- */
.bds-altslider {
	position: relative;
	--bds-alt-gap: var(--wp--preset--spacing--30);
}
.bds-altslider__track {
	display: flex;
	gap: var(--bds-alt-gap);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.bds-altslider__track::-webkit-scrollbar {
	display: none;
}
/* Desktop 3 · Tablet 2 · Mobil 1 */
.bds-altslider__slide {
	flex: 0 0 calc((100% - 2 * var(--bds-alt-gap)) / 3);
	scroll-snap-align: start;
	margin: 0;
}
@media (max-width: 900px) {
	.bds-altslider__slide {
		flex-basis: calc((100% - var(--bds-alt-gap)) / 2);
	}
}
@media (max-width: 600px) {
	.bds-altslider__slide {
		flex-basis: 100%;
	}
}
.bds-altslider__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.bds-altslider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bds-altslider__title {
	margin: 0.7rem 0 0.4rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}
.bds-altslider__meta {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
}
.bds-altslider__row {
	display: flex;
	gap: 0.4em;
}
.bds-altslider__row dt {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.bds-altslider__row dd {
	margin: 0;
	color: var(--wp--preset--color--muted);
}
/* Navigation (wie Galerie: weißes Quadrat, roter Pfeil bei Hover) */
.bds-altslider__nav {
	position: absolute;
	top: var(--bds-alt-nav-top, 38%);
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 6px rgba(17, 17, 17, 0.18);
	transition: color var(--bds-transition);
}
.bds-altslider__nav:hover,
.bds-altslider__nav:focus-visible {
	color: var(--wp--preset--color--accent);
}
.bds-altslider__nav:disabled {
	opacity: 0.3;
	cursor: default;
	box-shadow: none;
	pointer-events: none;
}
.bds-altslider__nav::before {
	content: "\2192";
	display: block;
	line-height: 1;
}
.bds-altslider__nav--prev::before {
	transform: scaleX(-1);
}
.bds-altslider__nav--prev {
	left: var(--wp--preset--spacing--30);
}
.bds-altslider__nav--next {
	right: var(--wp--preset--spacing--30);
}
.bds-altslider.is-single .bds-altslider__nav {
	display: none;
}