/* ==========================================================================
   Projekte / Single Project
   ========================================================================== */

/* ==========================================================================
   Project Hero — Poster-Layout (Cover-Bild links, Text rechts, BG blurred)
   ========================================================================== */

.project-hero {
	position: relative;
	min-height: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	margin-top: calc(var(--header-h) * -1);
	padding-top: calc(var(--header-h) + var(--sp-10));
	padding-bottom: var(--sp-9);
	background: var(--color-bg);
}

/* Höhen-Varianten (aus Page-Header / Banner Meta). */
.project-hero--h-sm   { min-height: 240px; }
.project-hero--h-md   { min-height: 360px; }
.project-hero--h-lg   { min-height: 480px; }
.project-hero--h-xl   { min-height: 640px; }
.project-hero--h-full { min-height: 100vh; }

@media (max-width: 768px) {
	.project-hero--h-md   { min-height: 300px; }
	.project-hero--h-lg   { min-height: 380px; }
	.project-hero--h-xl   { min-height: 480px; }
}

/* Text-Farbe (aus Banner-Meta). */
.project-hero--custom-bg .project-hero__title,
.project-hero--custom-bg .project-hero__tagline {
	color: var(--project-hero-color, var(--color-white));
}

/* Text-Ausrichtung (aus Banner-Meta) — bewegt nur den Content-Block innerhalb
   des Hero-Bereichs, ändert NICHT das Grid-Layout. */
.project-hero--align-center .project-hero__content {
	justify-self: center;
	text-align: center;
	align-items: center;
}

.project-hero--align-center .project-hero__tags,
.project-hero--align-center .project-hero__actions {
	justify-content: center;
}

.project-hero--align-right .project-hero__content {
	justify-self: end;
	text-align: right;
	align-items: flex-end;
}

.project-hero--align-right .project-hero__tags,
.project-hero--align-right .project-hero__actions {
	justify-content: flex-end;
}

/* Hintergrund — minimal-blur, stark abgedunkelt für Lesbarkeit. */
.project-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	filter: blur(6px) brightness(0.32) saturate(110%);
	transform: scale(1.06);
	overflow: hidden;
}

/* Custom Banner aus der Page-Header-Meta-Box: kein Blur/Filter,
   damit das gewählte Bild/Video klar sichtbar ist. */
.project-hero--custom-bg .project-hero__bg {
	filter: none;
	transform: none;
}

.project-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-hero__bg--youtube {
	overflow: hidden;
}

.project-hero__yt {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh;
	height: 56.25vw;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.project-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		radial-gradient(ellipse at 25% 50%, rgba(10, 10, 10, 0.1), rgba(10, 10, 10, 0.55) 70%),
		linear-gradient(180deg, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.6) 100%);
}

/* Wenn der User ein eigenes Overlay konfiguriert hat, ersetzt es das Default. */
.project-hero--custom-bg .project-hero__overlay {
	background: var(--project-hero-overlay, none);
}

/* Grid-Layout: Poster (380px) + Content. Beide gleich hoch. */
.project-hero__inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: var(--sp-7);
	align-items: stretch;
	width: 100%;
}

/* Bei aktivem Banner (Bild, Video, YouTube): Poster ausgeblendet → Content füllt die volle Breite. */
.project-hero--no-poster .project-hero__inner {
	grid-template-columns: 1fr;
}

.project-hero--no-poster .project-hero__content {
	max-width: 760px;
}

/* Poster-Box füllt die Höhe der Text-Spalte. */
.project-hero__poster {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow:
		0 20px 50px -16px rgba(0, 0, 0, 0.85),
		0 0 0 1px rgba(200, 169, 110, 0.18);
	background: var(--color-surface);
	position: relative;
	min-height: 280px;
}

.project-hero__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.project-hero__poster video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.project-hero__poster-fallback {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, rgba(200, 169, 110, 0.28), transparent 60%),
		linear-gradient(160deg, #1a1a1a, #2a2014);
}

/* Content (rechts) */
.project-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	align-items: flex-start;
}

.project-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--sp-2);
}

.project-hero__tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-bg);
	background: var(--color-accent);
	padding: 5px var(--sp-3);
	border-radius: var(--radius-sm);
}

.project-hero__tag--ghost {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border-2);
}

.project-hero__title {
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 1.2rem + 1vw, 2.25rem);
	font-weight: 600;
	color: var(--color-white);
	margin: 0;
	line-height: 1.2;
	letter-spacing: var(--ls-tight);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.project-hero__tagline {
	font-family: var(--font-serif);
	font-size: var(--fs-base);
	color: rgba(232, 232, 232, 0.88);
	line-height: var(--lh-relaxed);
	margin: 0;
	max-width: 620px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.project-hero__actions {
	margin-top: var(--sp-3);
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.project-hero {
		min-height: auto;
		padding-top: calc(var(--header-h) + var(--sp-7));
		padding-bottom: var(--sp-7);
	}
	.project-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
		text-align: center;
		align-items: center;
	}
	.project-hero__poster {
		width: 100%;
		max-width: 720px;
		min-height: 320px;
		aspect-ratio: 16 / 10;
		margin: 0 auto;
	}
	.project-hero__content {
		align-items: center;
	}
	.project-hero__tags,
	.project-hero__actions {
		justify-content: center;
	}
}

/* Mobile (≤768px): Banner größer, Kurzbeschreibung im Hero ausblenden —
 * sie wird ohnehin weiter unten im Beschreibungsblock wiederholt, hier würde
 * sie das volle Banner-Bild verdecken. Außerdem startet der Hero auf Mobile
 * UNTER dem Header (kein negativer Margin), damit das Bild nicht vom
 * Header-Balken verdeckt wird. */
@media (max-width: 768px) {
	.project-hero {
		/* Statt -header-h margin (Bild läuft sonst UNTER den fixed Header)
		 * → +header-h margin: Hero startet sauber UNTER dem Header. */
		margin-top: var(--header-h);
		padding-top: var(--sp-5);
	}
	.project-hero__poster {
		width: 100%;
		max-width: none;
		min-height: 280px;
		aspect-ratio: 4 / 3;
	}
	.project-hero__tagline,
	.project-hero__tags {
		display: none;
	}
}

@media (max-width: 480px) {
	.project-hero__poster {
		min-height: 240px;
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Single Project — Premium Layout
   ========================================================================== */

/* Meta-Strip (Breadcrumbs + Badges + External Link) */

.project-metastrip {
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	padding: var(--sp-4) 0;
}

.project-metastrip__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	flex-wrap: wrap;
}

.project-metastrip .breadcrumbs {
	margin: 0;
}

.project-metastrip__right {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.project-metastrip__tags {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* Lead-Sektion mit Tagline */

.project-lead {
	padding: var(--sp-8) 0 var(--sp-6);
	text-align: center;
}

.project-lead__text {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--color-white);
	max-width: 780px;
	margin: 0 auto;
	position: relative;
	padding: 0 var(--sp-5);
}

.project-lead__text::before,
.project-lead__text::after {
	content: '';
	position: absolute;
	width: 40px;
	height: 1px;
	background: var(--color-accent);
	top: 50%;
}

.project-lead__text::before { left: -60px; }
.project-lead__text::after  { right: -60px; }

@media (max-width: 900px) {
	.project-lead__text::before,
	.project-lead__text::after { display: none; }
}

/* Content + Sidebar */

.project-body {
	padding-block: var(--sp-7) var(--sp-9);
}

.project-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--sp-8);
	align-items: start;
}

.project-body__main {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
}

.project-body__main p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 4em;
	float: left;
	line-height: 0.9;
	margin: 6px 10px 0 0;
	color: var(--color-accent);
	font-weight: 600;
}

.project-body__main h2,
.project-body__main h3 {
	margin-top: var(--sp-7);
}

.project-body__main > * + * {
	margin-top: var(--sp-4);
}

/* Sidebar */

.project-body__aside {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-4));
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	max-height: calc(100vh - var(--header-h) - var(--sp-5));
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-accent) var(--color-bg-alt);
}

.project-body__aside::-webkit-scrollbar { width: 4px; }
.project-body__aside::-webkit-scrollbar-track { background: var(--color-bg-alt); }
.project-body__aside::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 2px; }

.project-widget {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
}

.project-widget__title {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-accent);
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--color-border);
}

.project-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.project-widget__list li {
	margin: 0;
	padding: 0;
}

.project-widget__list li + li {
	border-top: 1px solid var(--color-border);
}

.project-widget__event {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease);
}

.project-widget__event:hover {
	opacity: 0.85;
}

.project-widget__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--sp-2) 0;
	min-width: 56px;
}

.project-widget__day {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	color: var(--color-white);
	line-height: 1;
}

.project-widget__month {
	font-family: var(--font-sans);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-accent);
	margin-top: 2px;
}

.project-widget__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}

.project-widget__loc {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	color: var(--color-white);
	line-height: 1.2;
}

.project-widget__city {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

.project-widget__downloads {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

/* Sections zwischen Inhalten */

.project-section {
	padding-block: var(--section-py);
}

.project-section + .project-section {
	padding-top: 0;
}

/* Section-Abstände auf der Single-Project-Seite — identisch zur Termine-Single-Page.
   Sektionen erben padding-block von der globalen .section-Regel (--section-py)
   und werden zwischen aufeinanderfolgenden Sektionen kollabiert, damit kein
   doppelter Abstand entsteht. */
.main--project .event-section + .event-section {
	padding-top: 0;
}

.project-section--alt {
	background: var(--color-bg-alt);
}

.project-section + .project-section--alt,
.project-section--alt + .project-section {
	padding-top: var(--section-py);
}

.project-section__header {
	margin-bottom: var(--sp-7);
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

.project-section__heading {
	font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
	margin: var(--sp-3) 0 0;
	color: var(--color-white);
}

/* Foto-Galerie — Masonry-Layout (CSS-Columns), behält natürliche Proportionen. */

.project-gallery {
	column-count: 3;
	column-gap: var(--sp-4);
}

@media (max-width: 1024px) { .project-gallery { column-count: 2; } }
@media (max-width: 640px)  { .project-gallery { column-count: 1; } }

.project-gallery__item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	cursor: zoom-in;
	background: var(--color-surface);
	margin: 0 0 var(--sp-4);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	transition: transform var(--dur) var(--ease);
}

.project-gallery__item:hover {
	transform: translateY(-4px);
}

.project-gallery__item img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity var(--dur) var(--ease);
}

.project-gallery__item:hover img {
	opacity: 0.88;
}

/* Video-Items: feste 16:9-Box, damit der Player nicht kollabiert. */
.project-gallery__item--video {
	cursor: default;
	aspect-ratio: 16 / 9;
}

.project-gallery__item--video:hover {
	transform: none;
}

.project-gallery__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* Video-Galerie — klassisches 2-Spalten-Raster (Videos haben feste Höhe). */
.project-gallery--videos {
	column-count: unset;
	column-gap: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
}

@media (max-width: 640px) {
	.project-gallery--videos {
		grid-template-columns: 1fr;
	}
}

.project-gallery--videos .project-gallery__item {
	margin: 0;
}

/* CTA */

.project-cta {
	padding-block: var(--sp-9);
}

/* CTA-Box am Ende der Single-Project-Seite — linksbündig, ohne Container-Border. */
.project-cta-box {
	text-align: left;
	max-width: 760px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* Radial-Gradient-Overlay aus events.css deaktivieren. */
.project-cta-box::before {
	content: none;
	background: none;
}

.project-cta-box .eyebrow {
	margin: 0 0 var(--sp-3);
}

.project-cta-box__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
	margin: 0 0 var(--sp-4);
	color: var(--color-white);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.project-cta-box__lead {
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-5);
	max-width: 620px;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
}

.project-cta-box__actions {
	display: flex;
	gap: var(--sp-3);
	justify-content: flex-start;
	flex-wrap: wrap;
}

.project-cta__inner {
	text-align: center;
	background:
		radial-gradient(circle at 30% 20%, rgba(200, 169, 110, 0.08), transparent 50%),
		radial-gradient(circle at 70% 80%, rgba(200, 169, 110, 0.06), transparent 55%);
	padding: var(--sp-8) var(--sp-5);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}

.project-cta__title {
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	margin: var(--sp-3) 0 var(--sp-4);
}

.project-cta__lead {
	color: var(--color-text-muted);
	margin: 0 auto var(--sp-6);
	max-width: 540px;
	font-size: var(--fs-md);
}

.project-cta__actions {
	display: flex;
	gap: var(--sp-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* Responsive */

@media (max-width: 1024px) {
	.project-body__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
	.project-body__aside {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* ==========================================================================
   Projects Archive — Projekttypen-Filter (gleicher Stil wie Shop)
   ========================================================================== */

/* Intro-Text (Inhalt der „Projekte"-Seite) über dem Filter/Grid. */
.projects-archive .projects-intro {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	text-align: center;
	color: var(--color-text-muted);
}

.projects-archive .projects-intro > :last-child {
	margin-bottom: 0;
}

.projects-archive .shop-filter {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--sp-7);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--color-border);
}

/* Status-Filter (Aktuell / Vergangen / Alle) sitzt direkt über dem Typ-Filter:
   kein zweiter Trennstrich, nur etwas Abstand. */
.projects-archive .shop-filter--status {
	margin-bottom: var(--sp-4);
	padding-bottom: 0;
	border-bottom: none;
}

.projects-archive .shop-filter__item {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	padding: 9px var(--sp-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.projects-archive .shop-filter__item:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.projects-archive .shop-filter__item.is-active {
	border-color: var(--color-accent);
	color: var(--color-bg);
	background: var(--color-accent);
}

/* Desktop: Toggle ausgeblendet, Items inline. */
.projects-archive .shop-filter__toggle {
	display: none;
}

.projects-archive .shop-filter__items {
	display: contents;
}

/* Mobile: als Dropdown. */
@media (max-width: 640px) {
	.projects-archive .shop-filter {
		position: relative;
		display: block;
		padding-bottom: var(--sp-5);
	}

	.projects-archive .shop-filter__toggle {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		gap: var(--sp-3);
		padding: 12px var(--sp-4);
		font-family: var(--font-sans);
		font-size: var(--fs-xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: var(--ls-wider);
		background: var(--color-surface);
		color: var(--color-text);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		cursor: pointer;
		transition: border-color var(--dur-fast) var(--ease);
	}

	.projects-archive .shop-filter__toggle:hover,
	.projects-archive .shop-filter.is-open .shop-filter__toggle {
		border-color: var(--color-accent);
	}

	.projects-archive .shop-filter__toggle-label {
		flex: 1;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.projects-archive .shop-filter__caret {
		flex: 0 0 auto;
		color: var(--color-accent);
		transition: transform var(--dur-fast) var(--ease);
	}

	.projects-archive .shop-filter.is-open .shop-filter__caret {
		transform: rotate(180deg);
	}

	.projects-archive .shop-filter__items {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 40;
		flex-direction: column;
		gap: 4px;
		margin-top: 6px;
		padding: 6px;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow:
			0 10px 30px rgba(0, 0, 0, 0.45),
			0 2px 6px rgba(0, 0, 0, 0.35);
	}

	.projects-archive .shop-filter.is-open .shop-filter__items {
		display: flex;
	}

	.projects-archive .shop-filter__items .shop-filter__item {
		width: 100%;
		text-align: left;
		border: 0;
		border-radius: var(--radius);
		padding: 10px var(--sp-4);
	}

	.projects-archive .shop-filter__items .shop-filter__item:hover {
		background: rgba(200, 169, 110, 0.12);
	}

	.projects-archive .shop-filter__items .shop-filter__item.is-active {
		background: var(--color-accent);
		color: var(--color-bg);
	}
}

/* ==========================================================================
   Projects Archive (unverändert)
   ========================================================================== */

.projects-archive .project-grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Card-Anpassungen — gleicher Stil wie Homepage "Im Fokus" Carousel. */
.projects-archive .project-grid .project-card {
	aspect-ratio: 4 / 5;
	max-height: 540px;
}

.projects-archive .project-grid .project-card__tagline {
	display: none;
}

.projects-archive .project-grid .project-card__title {
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.projects-archive .project-grid .project-card__eyebrow {
	font-size: 10px;
	font-weight: 600;
	background: rgba(10, 10, 10, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 4px var(--sp-3);
	border-radius: var(--radius-pill);
	border: 1px solid rgba(200, 169, 110, 0.35);
	align-self: flex-start;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: var(--sp-2);
}

.projects-archive .project-grid .project-card__overlay {
	background:
		linear-gradient(
			180deg,
			rgba(10, 10, 10, 0.35) 0%,
			rgba(10, 10, 10, 0.55) 35%,
			rgba(10, 10, 10, 0.92) 75%,
			rgba(10, 10, 10, 0.98) 100%
		);
}

.projects-archive .project-grid .project-card__cta {
	font-size: 10px;
	padding: 7px var(--sp-3);
}

@media (max-width: 1024px) { .projects-archive .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .projects-archive .project-grid { grid-template-columns: 1fr; } }

/* --- Single Project ------------------------------------------------------ */

.single-project__intro {
	max-width: var(--container-narrow);
	margin: 0 auto var(--sp-8);
	padding-top: var(--sp-7);
	text-align: center;
}

.single-project__subtitle {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-accent);
	margin-bottom: var(--sp-3);
}

.single-project__content {
	max-width: var(--container-narrow);
	margin: 0 auto;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
}

.project-section {
	padding-block: var(--section-py);
}

.project-section + .project-section {
	padding-top: 0;
}

.project-section--alt {
	background: var(--color-bg-alt);
}

.project-section__title {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-accent);
	margin-bottom: var(--sp-5);
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.project-section__title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.project-section__heading {
	font-size: var(--fs-3xl);
	margin-bottom: var(--sp-6);
}

/* --- Project Sidebar (sticky) ------------------------------------------- */

.project-aside {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-5));
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

@media (max-width: 1024px) {
	.project-aside { position: static; }
}

/* ==========================================================================
   Beschreibung — Premium Panel (analog Shop-Produktseite).
   Nur für Projekt-Single-Page; greift nicht auf Termine/Events.
   ========================================================================== */

.main--project .event-description {
	padding-block: var(--sp-8) var(--sp-10);
}

.main--project .event-description__body {
	width: 100%;
	margin: 0;
	padding: clamp(var(--sp-6), 4vw, var(--sp-8));
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%),
		var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
	position: relative;
}

.main--project .event-description__body::before {
	content: '';
	position: absolute;
	top: -1px;
	left: var(--sp-6);
	right: var(--sp-6);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(200, 169, 110, 0.35), transparent);
}

.main--project .event-description__body .entry-content {
	font-family: var(--font-serif);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.75;
	color: rgba(232, 232, 232, 0.92);
}

.main--project .event-description__body .entry-content > * + * {
	margin-top: var(--sp-4);
}

.main--project .event-description__body .entry-content h2 {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
	margin-top: var(--sp-7);
	margin-bottom: var(--sp-3);
	color: var(--color-white);
	letter-spacing: var(--ls-tight);
}

.main--project .event-description__body .entry-content h3 {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-3);
	color: var(--color-white);
}

.main--project .event-description__body .entry-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-color: rgba(200, 169, 110, 0.4);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--dur) var(--ease);
}

.main--project .event-description__body .entry-content a:hover {
	text-decoration-color: var(--color-accent);
}

.main--project .event-description__body .entry-content ul,
.main--project .event-description__body .entry-content ol {
	padding-left: var(--sp-6);
}

.main--project .event-description__body .entry-content ul li::marker {
	color: var(--color-accent);
}

.main--project .event-description__body .entry-content blockquote {
	border-left: 3px solid var(--color-accent);
	padding-left: var(--sp-5);
	margin-left: 0;
	font-style: italic;
	color: rgba(232, 232, 232, 0.78);
}

.main--project .event-description__body .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	margin-block: var(--sp-4);
}

.main--project .event-description__body .entry-content hr {
	border: 0;
	height: 1px;
	background: var(--color-border);
	margin-block: var(--sp-6);
}

/* Mobile-Härtung: Inhalt darf nicht aus dem Panel ausbrechen.
   Lange Wörter/URLs umbrechen, Medien skalieren, Tabellen/Code horizontal scrollen. */

.main--project .event-description__body,
.main--project .event-description__body .entry-content {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.main--project .event-description__body .entry-content img,
.main--project .event-description__body .entry-content video,
.main--project .event-description__body .entry-content embed,
.main--project .event-description__body .entry-content object {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Video-Embeds (YouTube / Vimeo) — moderate Breite, 16:9-Proportionen, zentriert.
   Kein Vollbreiten-Stretching im Beschreibungs-Panel. */
.main--project .event-description__body .entry-content iframe[src*="youtube.com"],
.main--project .event-description__body .entry-content iframe[src*="youtube-nocookie.com"],
.main--project .event-description__body .entry-content iframe[src*="youtu.be"],
.main--project .event-description__body .entry-content iframe[src*="vimeo.com"] {
	display: block;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 9;
	height: auto;
	margin: var(--sp-4) 0;
	border: 0;
	border-radius: var(--radius-sm);
}

.main--project .event-description__body .entry-content figure {
	max-width: 100%;
	margin-inline: 0;
}

.main--project .event-description__body .entry-content pre,
.main--project .event-description__body .entry-content code {
	max-width: 100%;
	white-space: pre-wrap;
	word-break: break-word;
}

.main--project .event-description__body .entry-content pre {
	overflow-x: auto;
	padding: var(--sp-4);
	background: rgba(0, 0, 0, 0.3);
	border-radius: var(--radius-sm);
}

.main--project .event-description__body .entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

.main--project .event-description__body .entry-content .wp-block-embed,
.main--project .event-description__body .entry-content .wp-block-video,
.main--project .event-description__body .entry-content .wp-block-image {
	max-width: 100%;
}

@media (max-width: 720px) {
	.main--project .event-description {
		padding-block: var(--sp-6) var(--sp-7);
	}

	.main--project .event-description__body {
		padding: var(--sp-5) var(--sp-4);
		border-radius: var(--radius-sm);
		box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.55);
	}

	.main--project .event-description__body::before {
		left: var(--sp-4);
		right: var(--sp-4);
	}

	.main--project .event-description__body .entry-content {
		font-size: 0.95rem;
		line-height: 1.65;
	}

	.main--project .event-description__body .entry-content > * + * {
		margin-top: var(--sp-3);
	}

	.main--project .event-description__body .entry-content h2 {
		font-size: clamp(1.2rem, 4.5vw, 1.5rem);
		margin-top: var(--sp-5);
	}

	.main--project .event-description__body .entry-content h3 {
		font-size: clamp(1.05rem, 4vw, 1.25rem);
		margin-top: var(--sp-4);
	}

	.main--project .event-description__body .entry-content ul,
	.main--project .event-description__body .entry-content ol {
		padding-left: var(--sp-5);
	}

	.main--project .event-description__body .entry-content blockquote {
		padding-left: var(--sp-4);
	}
}

/* Sehr schmale Geräte (< 380 px) — extrem kompaktes Panel. */
@media (max-width: 380px) {
	.main--project .event-description__body {
		padding: var(--sp-4) var(--sp-3);
	}

	.main--project .event-description__body::before {
		left: var(--sp-3);
		right: var(--sp-3);
	}
}

/* Globaler Overflow-Schutz für die Projekt-Single-Page — verhindert
   horizontalen Scroll, wenn Inhalt (Hero-Subtitel, Tagline, Section-Titel,
   eingebettete Embeds) zufällig die Container-Breite sprengt. */
.main--project {
	overflow-x: clip;
}

.main--project .container {
	max-width: 100%;
	box-sizing: border-box;
}

.main--project .event-section__heading,
.main--project .event-section__lead {
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media (max-width: 720px) {
	.main--project .event-section {
		padding-block: var(--sp-6) var(--sp-7);
	}

	.main--project .event-section__heading {
		font-size: clamp(1.4rem, 5vw, 1.85rem);
	}

	.main--project .event-section__header {
		margin-bottom: var(--sp-4);
	}
}

/* ==========================================================================
   Bandmitglieder / Mitwirkende — Carousel.
   Bei wenigen Mitgliedern zentriert; bei vielen horizontal scrollbar.
   ========================================================================== */

.project-members-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.project-members-carousel,
.project-members-carousel * {
	min-width: 0;
}

.project-members {
	list-style: none;
	padding: var(--sp-2) 0;
	margin: 0;
	display: flex;
	gap: clamp(var(--sp-5), 3vw, var(--sp-7));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: flex-start;
}

.project-members::-webkit-scrollbar { display: none; }

.project-member {
	flex: 0 0 calc((100% - 3 * clamp(var(--sp-5), 3vw, var(--sp-7))) / 4);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-2);
	min-width: 0;
}

@media (max-width: 1024px) {
	.project-member {
		flex: 0 0 calc((100% - 2 * clamp(var(--sp-5), 3vw, var(--sp-7))) / 3);
	}
}

/* Mobile / Tablet: ein Mitglied pro Ansicht, mit sichtbaren Pfeilen. */
@media (max-width: 720px) {
	.project-member {
		flex: 0 0 100%;
		padding-inline: var(--sp-3);
		box-sizing: border-box;
	}
}

/* Navigations-Buttons — nur sichtbar bei Overflow (JS togglet hidden). */
.project-members__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-accent);
	border: 1px solid var(--color-border);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.project-members__nav:hover {
	background: rgba(200, 169, 110, 0.12);
	border-color: var(--color-accent);
}

.project-members__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.project-members__nav[hidden] {
	display: none;
}

@media (max-width: 720px) {
	.project-members-carousel {
		position: relative;
	}

	.project-members__nav {
		position: absolute;
		top: 70px;
		z-index: 2;
		width: 40px;
		height: 40px;
		background: rgba(20, 20, 20, 0.78);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		border-color: rgba(200, 169, 110, 0.35);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	}

	.project-members__nav--prev { left: 4px; }
	.project-members__nav--next { right: 4px; }
}

.project-member__avatar {
	position: relative;
	width: 100%;
	max-width: 110px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(160deg, #2a2014, #141414);
	border: 1px solid rgba(200, 169, 110, 0.18);
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.project-member:hover .project-member__avatar {
	border-color: rgba(200, 169, 110, 0.5);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}

.project-member__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.project-member__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	color: var(--color-accent);
	opacity: 0.7;
}

.project-member__name {
	margin: var(--sp-3) 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 500;
	color: var(--color-white);
	letter-spacing: var(--ls-tight);
	line-height: 1.25;
	max-width: 100%;
	overflow-wrap: anywhere;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.project-member__role {
	margin: 4px 0 0;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-accent);
	font-weight: 500;
	max-width: 100%;
	overflow-wrap: anywhere;
	hyphens: auto;
	-webkit-hyphens: auto;
}

@media (max-width: 720px) {
	.project-member__name {
		font-size: var(--fs-md);
	}
	.project-member__role {
		font-size: var(--fs-xs);
	}
}

/* „Mehr anzeigen"-Button (Load-More) */
.projects-archive .projects-load-more {
	display: flex;
	justify-content: center;
	margin-top: var(--sp-7);
}

.projects-archive .projects-load-more .btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* =====================================================================
 * Sektion-Hintergründe (pro Sektion individuell wählbare Farbe/Bild).
 * ================================================================== */

.project-section-bg {
	position: relative;
}

/* Hintergrundbilder bekommen den gleichen Padding-Block wie .section,
 * damit Inhalt nicht direkt am Bildrand sitzt. Die innere .section liefert
 * ihren eigenen padding-block — daher hier nur ein subtiler Reset, damit
 * das Bild bündig schließt. */
.project-section-bg .section {
	background: transparent;
}

/* Parallax („Bild fixieren beim Scrollen") wird per Inline-Style
 * background-attachment: fixed umgesetzt. Auf Mobile ruckelt fixed auf iOS,
 * und der Effekt lohnt sich auf kleinen Screens nicht — daher zurück auf scroll. */
@media (max-width: 768px) {
	.project-section-bg {
		background-attachment: scroll !important;
	}
}

/* Im Sidebar-Layout (2 Spalten) macht Parallax keinen Sinn — die Bilder sind
 * dort nur so breit wie die Spalte und wirken zerhackt. Immer scroll. */
.single-project--sidebar .project-section-bg {
	background-attachment: scroll !important;
}

/* =====================================================================
 * Sidebar-Layout (Projekt-Detail): Hauptbereich 2/3, Sidebar 1/3.
 * ================================================================== */

.single-project--sidebar .project-layout-wrap {
	padding-top: var(--sp-5);
	padding-bottom: var(--sp-6);
}

.single-project--sidebar .project-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--sp-7);
	align-items: start;
}

@media (max-width: 960px) {
	.single-project--sidebar .project-layout {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}
}

/* Innerhalb des Grids brauchen die Sektionen keine eigene Container-Begrenzung
 * — sie füllen die Spaltenbreite. */
.single-project--sidebar .project-layout .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Sektionen im Grid: kompakteres Vertikal-Padding, damit nicht jede Sektion
 * wie auf der ganzseitigen Variante riesig wirkt. */
.single-project--sidebar .project-layout .section {
	padding-block: var(--sp-5);
}

.single-project--sidebar .project-layout .section:first-child {
	padding-top: 0;
}

/* Sektionen mit eigenem Hintergrund (linke Hauptspalte) brauchen inneres
 * horizontales Padding — sonst kleben Überschrift, Cards, Textblöcke am
 * Bildrand, weil der Container im Grid-Layout kein Padding mehr hat. */
.single-project--sidebar .project-layout__main .project-section-bg {
	padding-inline: var(--sp-5);
	border-radius: 12px;
}

@media (max-width: 600px) {
	.single-project--sidebar .project-layout__main .project-section-bg {
		padding-inline: var(--sp-4);
	}
}

/* Sidebar teilt sich EINEN Hintergrund für die gesamte Spalte (statt pro Sektion).
 * Padding sorgt dafür, dass der Inhalt (Player, CTA, Links …) nicht am Bildrand klebt.
 * Auf Mobile ist die Aside kein sticky-Grid mehr, aber der gemeinsame BG bleibt sinnvoll. */
.single-project--sidebar .project-layout__side {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.single-project--sidebar .project-layout__side--has-bg {
	padding: var(--sp-5) var(--sp-4);
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Sidebar ist „sticky" beim Scrollen ab Desktop-Breite. */
@media (min-width: 961px) {
	.single-project--sidebar .project-layout__side {
		position: sticky;
		top: calc(var(--header-h, 80px) + var(--sp-4));
	}

	/* Auf Desktop trägt die Aside EINEN gemeinsamen Hintergrund — daher die
	 * per-Sektion Backgrounds hier neutralisieren (Inline-Style via !important
	 * überschreiben). Auf Mobile (≤960px) bleiben sie aktiv, wie im Standard-Layout. */
	.single-project--sidebar .project-layout__side .project-section-bg {
		background: none !important;
		padding-inline: 0 !important;
		border-radius: 0 !important;
	}

	/* Sidebar-Sektionen kompakter und ohne den großen Sektion-Abstand. */
	.single-project--sidebar .project-layout__side .section {
		padding-block: 0;
	}

	.single-project--sidebar .project-layout__side .event-section__heading {
		font-size: 1.4rem;
	}

	.single-project--sidebar .project-layout__side .event-section__header {
		margin-bottom: var(--sp-3);
	}
}

/* Downloads in der linken Spalte: kleinere Typo + linksbündig, damit der
 * Block nicht visuell aus dem Rahmen fällt. */
.single-project--sidebar .project-downloads-section .event-section__header {
	text-align: left;
	align-items: flex-start;
}

.single-project--sidebar .project-downloads-section .eyebrow,
.single-project--sidebar .project-downloads-section .event-section__heading {
	text-align: left;
}

.single-project--sidebar .project-downloads-section .event-section__heading {
	font-size: clamp(1.4rem, 2vw, 1.7rem);
}

/* Soziale Netzwerke im Sidebar: Typo & Ausrichtung an die anderen
 * Sidebar-Sektionen angleichen (sonst zentriert + große Headline). */
.single-project--sidebar .project-layout__side .social-section,
.single-project--sidebar .project-layout__side .social-section .container,
.single-project--sidebar .project-layout__side .social-section .section__header {
	text-align: left;
}

.single-project--sidebar .project-layout__side .social-section .section__header {
	align-items: flex-start;
}

.single-project--sidebar .project-layout__side .social-section .section__title {
	font-size: 1.4rem;
	text-align: left;
}

.single-project--sidebar .project-layout__side .social-section .social-grid {
	grid-template-columns: 1fr;
	gap: var(--sp-2);
}

.single-project--sidebar .project-layout__side .social-section .social-card {
	padding: var(--sp-3);
	font-size: 0.9rem;
}

/* Events-Tabelle in der schmalen Sidebar besser handhabbar machen. */
.single-project--sidebar .project-layout__side .event-table,
.single-project--sidebar .project-layout__side .event-archive {
	font-size: 0.9rem;
}

.single-project--sidebar .project-layout__side .event-table th,
.single-project--sidebar .project-layout__side .event-table td {
	padding: var(--sp-2) var(--sp-3);
}

/* CTA im Sidebar: kompakter, kleinere Typo. */
.single-project--sidebar .project-layout__side .project-cta-box {
	padding: var(--sp-4);
}

.single-project--sidebar .project-layout__side .project-cta-box__title {
	font-size: 1.3rem;
}

.single-project--sidebar .project-layout__side .project-cta-box__lead {
	font-size: 0.95rem;
}

.single-project--sidebar .project-layout__side .project-cta-box__actions {
	flex-direction: column;
	align-items: stretch;
}

.single-project--sidebar .project-layout__side .project-cta-box__actions .btn {
	width: 100%;
	justify-content: center;
}

/* =====================================================================
 * Mobile Override: Sidebar-Layout soll auf Handys wie das Standard-Layout
 * aussehen. 2 Spalten sind auf schmalen Screens sowieso nicht sinnvoll.
 * MUSS am Ende der Datei stehen, damit die desktop-spezifischen
 * Sidebar-Regeln (Container ohne Padding, Section-BG Padding-Inline,
 * gemeinsamer Aside-BG, sticky) alle zurückgesetzt werden.
 * ================================================================== */
@media (max-width: 960px) {

	/* Container-Padding wiederherstellen (auf Desktop entfernt für Grid-Layout). */
	.single-project--sidebar .project-layout .container {
		padding-left: var(--container-px) !important;
		padding-right: var(--container-px) !important;
	}

	/* Gemeinsamer Aside-Hintergrund: auf Mobile transparent — passt zum Standard-Look. */
	.single-project--sidebar .project-layout__side--has-bg {
		background: none !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}

	/* Extra Padding-Inline auf Section-BGs im Main-Grid entfernen. */
	.single-project--sidebar .project-layout__main .project-section-bg {
		padding-inline: 0 !important;
		border-radius: 0 !important;
	}
}

/* =====================================================================
 * SIDEBAR STICKY DEAKTIVIERT (temporär, auf Kundenwunsch)
 * Hebt die klebende rechte Spalte auf — beide Spalten stehen in ihrer
 * natürlichen Höhe im normalen Fluss (kein Scroll-Effekt).
 * Zum Wiederherstellen: diesen gesamten Block entfernen und in
 * assets/js/project-sticky-columns.js den Inhalt von *.js.smooth einsetzen.
 * ================================================================== */
@media (min-width: 961px) {
	.single-project--sidebar .project-layout__side {
		position: static !important;
		top: auto !important;
		transform: none !important;
	}
}