/* ==========================================================================
   Components — Buttons, Cards, Forms, Hero, Navigation, Footer, Modals
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	text-decoration: none;
	padding: var(--sp-3) var(--sp-6);
	border: 1px solid var(--color-accent);
	background: transparent;
	color: var(--color-accent);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		transform var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
	background: var(--color-accent);
	color: var(--color-bg);
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn--solid {
	background: var(--color-accent);
	color: var(--color-bg);
}

.btn--solid:hover,
.btn--solid:focus-visible {
	background: var(--color-accent-soft);
	border-color: var(--color-accent-soft);
	color: var(--color-bg);
}

.btn--ghost {
	border-color: var(--color-border-2);
	color: var(--color-text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: var(--color-surface);
	color: var(--color-white);
	border-color: var(--color-text);
}

.btn--lg {
	font-size: var(--fs-base);
	padding: var(--sp-4) var(--sp-7);
}

.btn--sm {
	font-size: var(--fs-xs);
	padding: var(--sp-2) var(--sp-4);
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn[disabled],
.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.btn .arrow {
	transition: transform var(--dur) var(--ease);
}

.btn:hover .arrow {
	transform: translateX(4px);
}

/* --- Form Controls ------------------------------------------------------- */

.field {
	margin-bottom: var(--sp-5);
}

.field__label {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-2);
}

.field__required {
	color: var(--color-accent);
}

.input,
.textarea,
.select {
	width: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: var(--sp-3) var(--sp-4);
	font-family: var(--font-serif);
	font-size: var(--fs-base);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.input:focus,
.textarea:focus,
.select:focus {
	outline: none;
	border-color: var(--color-accent);
	background: var(--color-bg-alt);
}

.input::placeholder,
.textarea::placeholder {
	color: var(--color-text-subtle);
}

.textarea {
	min-height: 140px;
	resize: vertical;
}

.select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
		linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 12px) center;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--sp-7);
}

.checkbox-row,
.radio-row {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
}

.checkbox-row input[type="checkbox"],
.radio-row input[type="radio"] {
	margin-top: 4px;
	accent-color: var(--color-accent);
}

.field__error {
	display: block;
	color: var(--color-error);
	font-size: var(--fs-sm);
	margin-top: var(--sp-2);
}

.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select {
	border-color: var(--color-error);
}

/* --- Notice / Toast ------------------------------------------------------ */

.notice {
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-4);
}

.notice--success {
	background: rgba(108, 180, 90, 0.1);
	border: 1px solid var(--color-success);
	color: var(--color-success);
}

.notice--error {
	background: rgba(212, 88, 77, 0.1);
	border: 1px solid var(--color-error);
	color: var(--color-error);
}

/* --- Cards --------------------------------------------------------------- */

.card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition:
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
	position: relative;
	height: 100%;
}

.card:hover {
	border-color: var(--color-accent-2);
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.card__media {
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	aspect-ratio: 16 / 10;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.card:hover .card__media img {
	transform: scale(1.04);
}

.card__media--square { aspect-ratio: 1 / 1; }
.card__media--portrait { aspect-ratio: 3 / 4; }

.card__body {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--sp-3);
}

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

.card__title {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	color: var(--color-white);
	line-height: var(--lh-snug);
	margin: 0;
}

.card__title a {
	color: inherit;
}

.card:hover .card__title a {
	color: var(--color-accent);
}

.card__excerpt {
	color: var(--color-text-muted);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	margin: 0;
}

.card__footer {
	margin-top: auto;
	padding-top: var(--sp-3);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-accent);
}

/* --- Project Card -------------------------------------------------------- */

.project-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-surface);
	aspect-ratio: 4 / 5;
	display: block;
	color: var(--color-white);
	text-decoration: none;
	isolation: isolate;
}

.project-card__media,
.project-card__media img,
.project-card__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: transform var(--dur-slow) var(--ease);
}

.project-card:hover .project-card__media img,
.project-card:hover .project-card__media video {
	transform: scale(1.06);
}

.project-card__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(10, 10, 10, 0.15) 0%,
			rgba(10, 10, 10, 0.35) 35%,
			rgba(10, 10, 10, 0.85) 70%,
			rgba(10, 10, 10, 0.96) 100%
		),
		linear-gradient(
			180deg,
			transparent 45%,
			rgba(10, 10, 10, 0.3) 100%
		);
	z-index: 2;
	transition: background var(--dur) var(--ease);
}

.project-card:hover .project-card__overlay {
	background:
		linear-gradient(
			180deg,
			rgba(10, 10, 10, 0.25) 0%,
			rgba(10, 10, 10, 0.45) 35%,
			rgba(10, 10, 10, 0.9) 70%,
			rgba(10, 10, 10, 0.98) 100%
		);
}

.project-card__body {
	position: relative;
	z-index: 3;
	padding: var(--sp-6);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--sp-2);
}

.project-card__eyebrow {
	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);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.project-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-white);
	margin: 0;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.project-card__tagline {
	font-size: var(--fs-base);
	color: rgba(240, 240, 240, 0.92);
	max-width: 90%;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.45;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* Schöner Call-to-Action — wirkt wie Button, nicht wie Text. */
.project-card__cta {
	margin-top: var(--sp-4);
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 9px var(--sp-4);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-white);
	background: rgba(10, 10, 10, 0.55);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease),
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.project-card__cta span {
	display: inline-block;
	transition: transform var(--dur) var(--ease);
}

.project-card:hover .project-card__cta {
	background: var(--color-accent);
	color: var(--color-bg);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px var(--color-accent);
}

.project-card:hover .project-card__cta span {
	transform: translateX(4px);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--color-bg);
	margin-top: calc(var(--header-h) * -1);
	padding-top: var(--header-h);
}

.hero--video,
.hero--image {
	min-height: 100vh;
}

.hero--compact {
	min-height: 60vh;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero__media img,
.hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		180deg,
		rgba(10, 10, 10, 0.35) 0%,
		rgba(10, 10, 10, 0.45) 50%,
		rgba(10, 10, 10, 0.85) 100%
	);
}

.hero__content {
	position: relative;
	z-index: 3;
	width: 100%;
	padding-block: var(--sp-9) var(--sp-8);
}

.hero__inner {
	max-width: 900px;
}

.hero__eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-accent);
	margin-bottom: var(--sp-4);
}

.hero__title {
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: 1;
	color: var(--color-white);
	margin: 0 0 var(--sp-5);
	letter-spacing: var(--ls-tight);
}

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

.hero__actions {
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.hero__scroll {
	position: absolute;
	bottom: var(--sp-5);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	animation: tian-scroll-bounce 2.4s var(--ease) infinite;
}

.hero__scroll svg {
	width: 14px;
	height: 14px;
	fill: var(--color-accent);
}

@keyframes tian-scroll-bounce {
	0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
	50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* --- Page Header --------------------------------------------------------- */

.page-header {
	--page-header-min-h: 360px;
	--page-header-color: var(--color-white);
	--page-header-overlay: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
	min-height: var(--page-header-min-h);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--page-header-color);
}

.page-header > .container { width: 100%; }

/* Höhen-Varianten. */
.page-header--h-sm   { --page-header-min-h: 240px; }
.page-header--h-md   { --page-header-min-h: 360px; }
.page-header--h-lg   { --page-header-min-h: 480px; }
.page-header--h-xl   { --page-header-min-h: 640px; }
.page-header--h-full { --page-header-min-h: 100vh; }

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

/* Ausrichtung. */
.page-header--align-center {
	text-align: center;
}

.page-header--align-center .page-header__inner {
	margin-inline: auto;
}

.page-header--align-center .page-header__subtitle {
	margin-inline: auto;
}

.page-header--align-right {
	text-align: right;
}

.page-header--align-right .page-header__inner {
	margin-inline-start: auto;
}

.page-header--align-right .page-header__subtitle {
	margin-inline-start: auto;
}

/* Hintergrund-Medien-Layer. */
.page-header__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--color-bg);
	background-size: cover;
	background-repeat: no-repeat;
}

.page-header__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.page-header__media--youtube {
	overflow: hidden;
}

.page-header__youtube {
	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;
}

/* Overlay. */
.page-header__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--page-header-overlay);
}

.page-header > .container,
.page-header__inner {
	position: relative;
	z-index: 2;
}

.page-header__inner {
	max-width: var(--container-narrow);
	color: var(--page-header-color);
}

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

.page-header__title {
	font-size: var(--fs-3xl);
	margin: 0 0 var(--sp-3);
	color: inherit;
}

.page-header__subtitle {
	font-size: var(--fs-md);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 640px;
}

.page-header--has-media .page-header__subtitle {
	color: var(--page-header-color);
	opacity: 0.85;
}

.page-header__extra {
	margin-top: var(--sp-4);
}

/* --- Site Header / Navigation -------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-h);
	z-index: var(--z-header);
	background: rgba(10, 10, 10, 0.001);
	transition:
		background var(--dur) var(--ease),
		height var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
	border-bottom: 1px solid transparent;
}

.site-header.is-scrolled,
.site-header.is-open,
body:not(.home) .site-header,
body.has-page-header:not(.home) .site-header {
	background: rgba(10, 10, 10, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: var(--color-border);
}

.site-header.is-scrolled {
	height: var(--header-h-scrolled);
}

/* Optionen aus dem Customizer (Header-Panel). */
.site-header--static {
	position: absolute;
}

.site-header--solid,
.site-header--solid.is-scrolled {
	background: rgba(10, 10, 10, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: var(--color-border);
}

.site-header__inner {
	height: 100%;
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 0 var(--container-px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
}

.site-logo {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-xl);
	color: var(--color-white);
	text-decoration: none;
	letter-spacing: var(--ls-tight);
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.site-logo__sub {
	font-family: var(--font-sans);
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	margin-top: 4px;
}

.site-logo:hover {
	color: var(--color-accent);
}

.site-logo img {
	max-height: 56px;
	width: auto;
}

/* Primary Nav */
.primary-nav {
	display: flex;
	align-items: center;
}

.primary-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--sp-6);
	align-items: center;
}

.primary-nav__list a {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	position: relative;
	padding: var(--sp-2) 0;
	transition: color var(--dur-fast) var(--ease);
}

.primary-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.primary-nav__list a:hover,
.primary-nav__list a:focus-visible,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a,
.primary-nav__list .current-menu-parent > a {
	color: var(--color-white);
}

.primary-nav__list a:hover::after,
.primary-nav__list a:focus-visible::after,
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .current_page_item > a::after {
	transform: scaleX(1);
}

/* Sub-menu */
.primary-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	padding: var(--sp-3) 0;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
	z-index: var(--z-overlay);
	box-shadow: var(--shadow-lg);
	border-radius: var(--radius);
}

.primary-nav__list > .menu-item-has-children { position: relative; }
.primary-nav__list > .menu-item-has-children:hover > .sub-menu,
.primary-nav__list > .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav__list .sub-menu li {
	margin: 0;
}

.primary-nav__list .sub-menu a {
	display: block;
	padding: var(--sp-2) var(--sp-5);
	font-size: var(--fs-sm);
	text-transform: none;
	letter-spacing: 0;
}

.primary-nav__list .sub-menu a::after {
	display: none;
}

.primary-nav__list .sub-menu a:hover {
	background: var(--color-surface);
	color: var(--color-accent);
}

/* Header tools (search + nav-toggle) */
.header-tools {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.icon-btn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.icon-btn:hover,
.icon-btn:focus-visible {
	color: var(--color-accent);
	border-color: var(--color-border);
	background: var(--color-surface);
}

.icon-btn svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

/* Hamburger */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.nav-toggle__bar {
	display: block;
	width: 24px;
	height: 1.5px;
	background: var(--color-text);
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
	border-radius: 1px;
}

.site-header.is-open .nav-toggle__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
	background: var(--color-accent);
}
.site-header.is-open .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.site-header.is-open .nav-toggle__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
	background: var(--color-accent);
}

@media (max-width: 1024px) {
	.nav-toggle { display: flex; }

	.primary-nav {
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100dvh - var(--header-h));
		background: rgba(10, 10, 10, 0.98);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-top: 1px solid var(--color-border);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: var(--sp-6) var(--sp-5) calc(var(--sp-7) + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0.32s var(--ease);
		pointer-events: none;
	}

	.site-header.is-open .primary-nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}

	.primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
	}

	.primary-nav__list > li {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}

	.site-header.is-open .primary-nav__list > li {
		opacity: 1;
		transform: translateY(0);
	}

	.site-header.is-open .primary-nav__list > li:nth-child(1) { transition-delay: 0.06s; }
	.site-header.is-open .primary-nav__list > li:nth-child(2) { transition-delay: 0.10s; }
	.site-header.is-open .primary-nav__list > li:nth-child(3) { transition-delay: 0.14s; }
	.site-header.is-open .primary-nav__list > li:nth-child(4) { transition-delay: 0.18s; }
	.site-header.is-open .primary-nav__list > li:nth-child(5) { transition-delay: 0.22s; }
	.site-header.is-open .primary-nav__list > li:nth-child(6) { transition-delay: 0.26s; }
	.site-header.is-open .primary-nav__list > li:nth-child(7) { transition-delay: 0.30s; }
	.site-header.is-open .primary-nav__list > li:nth-child(8) { transition-delay: 0.34s; }
	.site-header.is-open .primary-nav__list > li:nth-child(n+9) { transition-delay: 0.38s; }

	.primary-nav__list a {
		display: block;
		padding: var(--sp-4) var(--sp-2);
		font-size: var(--fs-xl);
		text-transform: none;
		letter-spacing: 0;
		font-family: var(--font-display);
		font-weight: 400;
		line-height: 1.2;
	}

	.primary-nav__list a::after { display: none; }

	.primary-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		border: none;
		padding: 0 0 var(--sp-3) var(--sp-4);
		box-shadow: none;
		min-width: 0;
	}

	.primary-nav__list .sub-menu a {
		font-size: var(--fs-base);
		padding: var(--sp-2) 0;
	}
}

/* --- Search Form (collapsible) ------------------------------------------ */

.search-form-wrap {
	position: absolute;
	top: 100%;
	right: var(--container-px);
	width: min(420px, calc(100% - 2 * var(--container-px)));
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	padding: var(--sp-4);
	transform: translateY(-12px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

.search-form-wrap.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.search-form {
	display: flex;
	gap: var(--sp-2);
}

.search-form .input {
	flex: 1;
}

/* --- Site Footer --------------------------------------------------------- */

.site-footer {
	background: linear-gradient(180deg, #111 0%, #090909 100%);
	border-top: 1px solid rgba(200, 169, 110, 0.08);
	color: var(--color-text-muted);
	padding-top: var(--sp-9);
	margin-top: var(--sp-8);
	position: relative;
}

.site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(200, 169, 110, 0.2), transparent);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 0.8fr 0.8fr 1.2fr;
	gap: var(--sp-7);
	padding-bottom: var(--sp-8);
}

/* Spalten-Override aus dem Customizer (Footer-Panel). */
.site-footer--cols-3 .site-footer__grid {
	grid-template-columns: 1.4fr 0.9fr 1fr;
}

.site-footer--cols-2 .site-footer__grid {
	grid-template-columns: 1.4fr 1fr;
}

.site-footer--cols-1 .site-footer__grid {
	grid-template-columns: 1fr;
}

.site-footer__col--brand .site-logo {
	display: inline-block;
	margin-bottom: var(--sp-3);
}

.site-footer__bio {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: 1.7;
	max-width: 360px;
	margin-bottom: var(--sp-5);
}

.site-footer__col-title {
	font-family: var(--font-sans);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-accent);
	margin-bottom: var(--sp-5);
	font-weight: 600;
	position: relative;
	padding-bottom: var(--sp-3);
}

.site-footer__col-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 24px;
	height: 2px;
	background: var(--color-accent);
	border-radius: 1px;
}

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

.site-footer__links li {
	margin: 0;
}

.site-footer__links a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	letter-spacing: 0.01em;
	transition: color 0.2s ease, padding-left 0.2s ease;
	display: block;
	padding: 6px 0;
}

.site-footer__links a:hover {
	color: var(--color-accent);
	padding-left: 4px;
}

.site-footer a {
	color: var(--color-text);
}

.site-footer a:hover {
	color: var(--color-accent);
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer ul li {
	margin-bottom: 0;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: var(--sp-5) 0;
	font-size: var(--fs-xs);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
	color: rgba(255, 255, 255, 0.3);
}

.site-footer__legal-nav ul {
	display: flex;
	gap: var(--sp-5);
}

.site-footer__legal-nav a {
	color: rgba(255, 255, 255, 0.35);
	transition: color 0.2s ease;
}

.site-footer__legal-nav a:hover {
	color: var(--color-accent);
}

@media (max-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-6);
	}
}

@media (max-width: 640px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Social Links -------------------------------------------------------- */

.social-links {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-links a {
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.social-links a:hover {
	color: var(--color-bg);
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.social-links svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* --- Press Quote --------------------------------------------------------- */

.press-quote {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	padding: var(--sp-7);
	border-radius: var(--radius);
	position: relative;
	font-family: var(--font-display);
	transition: border-color var(--dur) var(--ease);
}



.press-quote:hover {
	border-color: var(--color-accent-2);
}

.press-quote__text {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-style: italic;
	color: var(--color-white);
	line-height: var(--lh-snug);
	margin: 0 0 var(--sp-5);
}

.press-quote__source {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	font-style: normal;
}

.press-quote__logo {
	max-height: 24px;
	width: auto;
	opacity: 0.8;
	filter: grayscale(100%) brightness(0.95);
	transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.press-quote:hover .press-quote__logo {
	opacity: 1;
	filter: grayscale(0%) brightness(1);
}

/* --- Press Slider -------------------------------------------------------- */

.press-slider {
	position: relative;
}

.press-slider__track {
	display: flex;
	gap: var(--sp-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: var(--container-px);
	padding-bottom: var(--sp-3);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.press-slider__track::-webkit-scrollbar {
	display: none;
}

.press-slider__item {
	flex: 0 0 min(520px, 90%);
	scroll-snap-align: start;
	display: flex;
}

.press-slider__item .press-quote {
	width: 100%;
}

@media (max-width: 768px) {
	.press-slider__item .press-quote {
		min-height: 280px;
	}
}

.press-slider__dots {
	display: flex;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.press-slider__dot {
	width: 32px;
	height: 3px;
	background: var(--color-border);
	border: none;
	border-radius: 2px;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.press-slider__dot.is-active,
.press-slider__dot:hover {
	background: var(--color-accent);
}

.press-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
	z-index: 2;
}

.press-slider__nav:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-bg);
}

.press-slider__nav--prev { left: 0; }
.press-slider__nav--next { right: 0; }

@media (max-width: 768px) {
	.press-slider__nav { display: none; }
}

/* --- Tables (Termine) ---------------------------------------------------- */

.events-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
}

.events-table thead th {
	text-align: left;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	font-weight: 500;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--color-border);
}

.events-table tbody td {
	padding: var(--sp-5) var(--sp-4);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	vertical-align: top;
}

.events-table tbody tr {
	transition: background var(--dur-fast) var(--ease);
}

.events-table tbody tr:hover {
	background: var(--color-surface);
}

.events-table .event-date {
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--color-white);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	white-space: nowrap;
}

.events-table .event-date__time {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: 400;
	margin-top: 2px;
}

.events-table .event-project a {
	color: var(--color-accent);
	font-weight: 500;
}

.events-table .event-location {
	font-family: var(--font-serif);
	font-size: var(--fs-base);
}

.events-table .event-location__city {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	margin-top: 2px;
}

.events-table .event-tickets {
	text-align: right;
	white-space: nowrap;
}

.events-table .event-row--cancelled {
	opacity: 0.5;
	text-decoration: line-through;
}

@media (max-width: 768px) {
	.events-table thead { display: none; }
	.events-table tbody tr {
		display: grid;
		grid-template-columns: 1fr;
		padding: var(--sp-4) 0;
		gap: var(--sp-2);
	}
	.events-table tbody td {
		padding: 0;
		border: none;
	}
	.events-table tbody tr + tr {
		border-top: 1px solid var(--color-border);
		padding-top: var(--sp-5);
		margin-top: var(--sp-5);
	}
}

/* --- Filter Bar ---------------------------------------------------------- */

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	align-items: center;
	margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--color-border);
}

.filter-bar__group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
}

.filter-bar__group + .filter-bar__group {
	padding-left: var(--sp-5);
	border-left: 1px solid var(--color-border);
}

@media (max-width: 640px) {
	.filter-bar__group + .filter-bar__group {
		padding-left: 0;
		border-left: 0;
	}
}

.filter-bar__label {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	margin-right: var(--sp-3);
}

.filter-chip {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	padding: var(--sp-2) var(--sp-4);
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	cursor: pointer;
	border-radius: var(--radius-pill);
	transition:
		background var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.filter-chip:hover {
	color: var(--color-text);
	border-color: var(--color-text-muted);
	transform: translateY(-1px);
}

.filter-chip:active {
	transform: translateY(0);
}

.filter-chip.is-active {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px rgba(200, 169, 110, 0.25);
}

.filter-chip__count {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	color: inherit;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

.filter-chip.is-active .filter-chip__count {
	background: rgba(0, 0, 0, 0.18);
	opacity: 0.9;
}

/* --- Flat variant (Termine: kompakte Chip-Reihen + Live-Count) ---------- */

.filter-bar--flat {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sp-3);
	padding: 0;
	margin-bottom: var(--sp-4);
	border: 0;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--sp-3);
	background: transparent;
}

.filter-bar--flat .filter-bar__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	padding: 0;
	border-left: 0;
}

.filter-bar--flat .filter-bar__group + .filter-bar__group {
	padding-left: 0;
	border-left: 0;
	border-top: 0;
}

/* Sekundäre Filter-Reihe: kompakte Select-Dropdowns (Projekt, Stadt). */
.filter-bar__secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
}

.filter-bar__select-group {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.filter-bar__select-label {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
}

.filter-bar__select {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 8px 36px 8px 16px;
	cursor: pointer;
	min-width: 200px;
	max-width: 300px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a96e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
	transition:
		border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.filter-bar__select:hover {
	border-color: var(--color-text-muted);
}

.filter-bar__select:focus-visible {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.18);
}

.filter-bar__select option {
	background: var(--color-surface);
	color: var(--color-text);
}

/* --- Custom Dropdown (filter-dropdown.js) ------------------------------ */

/* Native <select> bleibt im DOM (für Form-Reset / fallback), wird aber
   visuell vom Custom-Widget abgelöst. Bei aktivem JS sofort ausgeblendet,
   damit kein Flash beim Initialisieren entsteht. */
html.js .filter-bar__select-group > select.filter-bar__select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

.filter-dropdown__native {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	pointer-events: none;
	opacity: 0;
}

.filter-dropdown {
	position: relative;
	display: inline-flex;
	min-width: 200px;
	max-width: 300px;
}

.filter-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease);
	text-align: left;
}

.filter-dropdown__toggle:hover {
	border-color: var(--color-text-muted);
}

.filter-dropdown__toggle:focus-visible,
.filter-dropdown.is-open .filter-dropdown__toggle {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.18);
}

.filter-dropdown__value {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filter-dropdown__caret {
	flex: 0 0 auto;
	color: var(--color-accent);
	transition: transform var(--dur-fast) var(--ease);
}

.filter-dropdown.is-open .filter-dropdown__caret {
	transform: rotate(180deg);
}

.filter-dropdown__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 6px;
	max-height: 320px;
	overflow-y: auto;
	list-style: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 12px);
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.45),
		0 2px 6px rgba(0, 0, 0, 0.35);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	animation: tian-fd-fade var(--dur-fast) var(--ease);
}

.filter-dropdown__panel--up {
	top: auto;
	bottom: calc(100% + 6px);
}

@keyframes tian-fd-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.filter-dropdown__option {
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--color-text);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.filter-dropdown__option.is-active,
.filter-dropdown__option:hover {
	background: rgba(200, 169, 110, 0.12);
	color: var(--color-accent);
}

.filter-dropdown__option.is-selected {
	color: var(--color-accent);
	font-weight: 600;
}

.filter-dropdown__option.is-selected.is-active,
.filter-dropdown__option.is-selected:hover {
	background: rgba(200, 169, 110, 0.18);
}

/* Slim scrollbar for the panel (WebKit + Firefox). */
.filter-dropdown__panel {
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
.filter-dropdown__panel::-webkit-scrollbar {
	width: 8px;
}
.filter-dropdown__panel::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 8px;
}

@media (max-width: 640px) {
	.filter-bar__select {
		min-width: 0;
		flex: 1 1 100%;
	}
	.filter-bar__select-group {
		flex: 1 1 100%;
	}
	.filter-dropdown {
		min-width: 0;
		flex: 1 1 100%;
	}
}

/* Reset-Knopf inline am Ende der Chip-Reihe (verblasst wenn nichts aktiv ist). */
.filter-bar__reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid transparent;
	padding: var(--sp-1) var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-subtle);
	cursor: pointer;
	border-radius: var(--radius-pill);
	transition:
		color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		opacity var(--dur-fast) var(--ease);
	opacity: 0;
	pointer-events: none;
	margin-left: auto;
}

.filter-bar.has-active-filters .filter-bar__reset {
	opacity: 1;
	pointer-events: auto;
}

.filter-bar__reset:hover {
	color: var(--color-accent);
	border-color: var(--color-accent-2);
}

/* --- Year Group (Konzert-Archiv) ---------------------------------------- */

.year-group {
	margin-bottom: var(--sp-3);
	border-bottom: 1px solid var(--color-border);
}

.year-group__toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-5) 0;
	cursor: pointer;
	background: none;
	border: none;
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	color: var(--color-white);
	text-align: left;
}

.year-group__count {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	font-weight: 400;
}

.year-group__icon {
	width: 16px;
	height: 16px;
	transition: transform var(--dur) var(--ease);
	color: var(--color-accent);
}

.year-group[open] .year-group__icon {
	transform: rotate(180deg);
}

.year-group__body {
	padding-bottom: var(--sp-6);
}

/* --- Newsletter Form ----------------------------------------------------- */

.newsletter {
	background: var(--color-bg-alt);
	padding: var(--sp-8) var(--sp-6);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.newsletter__title {
	font-size: var(--fs-2xl);
	margin-bottom: var(--sp-3);
}

.newsletter__lead {
	color: var(--color-text-muted);
	margin-bottom: var(--sp-5);
}

.newsletter__form {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
	max-width: 480px;
	margin: 0 auto;
}

.newsletter__form .input {
	flex: 1;
	min-width: 200px;
}

@media (max-width: 480px) {
	.newsletter__form .btn { width: 100%; }
}

/* Kompakte Variante (Footer): jedes Feld auf eigener Zeile, Button am Ende
 * voller Breite — der Footer-Spalt ist zu schmal für Eingaben nebeneinander. */
.newsletter__form--compact {
	flex-direction: column;
	max-width: none;
	margin: 0;
}

.newsletter__form--compact .input { width: 100%; min-width: 0; }
.newsletter__form--compact .btn   { width: 100%; }

/* --- Download Item ------------------------------------------------------- */

.download-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: var(--sp-5);
	align-items: start;
	padding: var(--sp-6) var(--sp-7);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.download-item:hover {
	border-color: var(--color-accent-2);
	background: var(--color-surface);
}

.download-item__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-accent);
	flex-shrink: 0;
}

.download-item__icon svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

.download-item__body {
	min-width: 0;
}

.download-item__body h3 {
	font-size: var(--fs-lg);
	margin: 0 0 var(--sp-2);
	line-height: 1.25;
}

.download-item__action {
	align-self: center;
}

/* Liste zusätzlicher Dateien (PDF, ZIP, …) unterhalb der Karten-Beschreibung. */
.download-item__files {
	list-style: none;
	margin: var(--sp-4) 0 0;
	padding: var(--sp-4) 0 0;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.download-item__file {
	margin: 0;
}

.download-item__file-link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 8px 10px;
	margin-inline: -10px;
	border-radius: var(--radius-sm, 6px);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.download-item__file-link:hover,
.download-item__file-link:focus-visible {
	color: var(--color-accent);
	background: rgba(200, 169, 110, 0.08);
	outline: none;
}

.download-item__file-link svg {
	flex-shrink: 0;
	color: var(--color-accent);
	opacity: 0.8;
}

.download-item__file-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-text);
}

.download-item__file-size {
	flex-shrink: 0;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-xs);
}

@media (max-width: 640px) {
	.download-item {
		grid-template-columns: 48px 1fr;
		grid-template-rows: auto auto;
		gap: var(--sp-4);
		padding: var(--sp-5);
	}
	.download-item__icon {
		width: 48px;
		height: 48px;
	}
	.download-item__action {
		grid-column: 1 / -1;
	}
	.download-item__action .btn {
		width: 100%;
	}
}

.download-item__meta {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
}

.download-item__desc {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
	margin-top: var(--sp-3);
}

/* --- Modal --------------------------------------------------------------- */

.modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: var(--z-modal);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--sp-5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.modal.is-open {
	display: flex;
	opacity: 1;
}

.modal__dialog {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--sp-7);
	max-width: 540px;
	width: 100%;
	position: relative;
	box-shadow: var(--shadow-lg);
}

.modal__close {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	width: 36px;
	height: 36px;
	color: var(--color-text-muted);
	border: 1px solid transparent;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.modal__close:hover {
	color: var(--color-accent);
	border-color: var(--color-border);
}

.modal__title {
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-4);
}

.modal__body {
	color: var(--color-text-muted);
	margin-bottom: var(--sp-5);
}

/* --- Hero Zoom (Poster-Bild im Hero klickbar) --------------------------- */

.hero-zoom {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
	background: var(--color-surface);
}

.hero-zoom img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}

.hero-zoom:hover img,
.hero-zoom:focus-visible img {
	transform: scale(1.06);
	filter: brightness(0.78);
}

.hero-zoom__icon {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	opacity: 0;
	transform: translateY(-6px) scale(0.92);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
	pointer-events: none;
}

.hero-zoom__icon svg {
	width: 20px;
	height: 20px;
}

.hero-zoom:hover .hero-zoom__icon,
.hero-zoom:focus-visible .hero-zoom__icon {
	opacity: 1;
	transform: translateY(0) scale(1);
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

@media (hover: none) {
	.hero-zoom__icon {
		opacity: 1;
		transform: none;
	}
}

/* --- Lightbox ------------------------------------------------------------ */

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.95);
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox__img {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	box-shadow: var(--shadow-lg);
	cursor: zoom-in;
	transform: scale(0.96);
	transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
	will-change: transform;
}

.lightbox.is-open .lightbox__img {
	transform: scale(1);
}

.lightbox.is-zoomed {
	overflow: auto;
	cursor: zoom-out;
}

.lightbox.is-zoomed .lightbox__img {
	max-width: none;
	max-height: none;
	cursor: zoom-out;
	transform: scale(2);
	transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

.lightbox.is-zoomed .lightbox__nav,
.lightbox.is-zoomed .lightbox__caption {
	opacity: 0;
	pointer-events: none;
}

.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: all var(--dur-fast) var(--ease);
}

.lightbox__nav:hover {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

.lightbox__nav--prev { left: var(--sp-5); }
.lightbox__nav--next { right: var(--sp-5); }

.lightbox__close {
	position: absolute;
	top: var(--sp-5);
	right: var(--sp-5);
	width: 44px;
	height: 44px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--dur-fast) var(--ease);
}

.lightbox__close:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.lightbox__caption {
	position: absolute;
	bottom: var(--sp-5);
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-text);
	background: rgba(0, 0, 0, 0.6);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	max-width: 80%;
	text-align: center;
}

/* --- Pagination ---------------------------------------------------------- */

.pagination {
	margin-top: var(--sp-8);
	display: flex;
	justify-content: center;
}

.pagination .nav-links,
.page-numbers {
	display: flex;
	gap: var(--sp-2);
	font-family: var(--font-sans);
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.page-numbers {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--sp-3);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: var(--fs-sm);
	border-radius: var(--radius);
	transition: all var(--dur-fast) var(--ease);
}

.page-numbers:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.page-numbers.current {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

/* --- Breadcrumbs --------------------------------------------------------- */

.breadcrumbs {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-5);
}

.breadcrumbs a { color: var(--color-text); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs__sep { margin: 0 var(--sp-2); color: var(--color-text-subtle); }

/* --- Tag/Badge ----------------------------------------------------------- */

.badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	padding: 4px var(--sp-3);
	background: var(--color-surface);
	color: var(--color-accent);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
}

.badge--solid {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

.badge--cancelled {
	background: rgba(212, 88, 77, 0.15);
	color: var(--color-error);
	border-color: var(--color-error);
}

/* --- Loader -------------------------------------------------------------- */

.loader {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 2px solid var(--color-border-2);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: tian-spin 0.8s linear infinite;
}

@keyframes tian-spin {
	to { transform: rotate(360deg); }
}

/* --- Press Slider (Pressezitate) ----------------------------------------- */

.press-slider {
	position: relative;
	isolation: isolate;
}

.press-slider__track {
	display: flex;
	gap: var(--sp-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: var(--sp-2) var(--sp-1) var(--sp-3);
	margin: 0 calc(var(--sp-1) * -1);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.press-slider__track::-webkit-scrollbar {
	display: none;
}

.press-slider__item {
	flex: 0 0 calc((100% - var(--sp-5) * (var(--press-cols, 3) - 1)) / var(--press-cols, 3));
	scroll-snap-align: start;
	min-width: 0;
	display: flex;
}

.press-slider__item > .press-card {
	width: 100%;
}

@media (max-width: 1024px) {
	.press-slider__item { flex-basis: calc((100% - var(--sp-5)) / 2); }
}

@media (max-width: 640px) {
	.press-slider__item { flex-basis: 88%; }
}

.press-slider__item .press-quote {
	position: relative;
	width: 100%;
	margin: 0;
	padding: var(--sp-7) var(--sp-6) var(--sp-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	transition:
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.press-slider__item .press-quote::before {
	content: "\201C";
	position: absolute;
	top: -0.25rem;
	left: var(--sp-5);
	font-family: var(--font-display);
	font-size: 5rem;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.55;
	pointer-events: none;
}

.press-slider__item .press-quote:hover {
	border-color: var(--color-accent-2);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.press-slider__item .press-quote__text {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-style: italic;
	font-weight: 400;
	line-height: var(--lh-relaxed);
	color: var(--color-white);
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.press-slider__item .press-quote__source {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--color-border);
}

.press-slider__item .press-quote__logo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	max-height: none;
	object-fit: contain;
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	padding: 6px;
	filter: grayscale(1) brightness(1.4);
	opacity: 0.85;
	transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.press-slider__item .press-quote:hover .press-quote__logo {
	filter: none;
	opacity: 1;
}

.press-slider__item .press-quote__source cite {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-style: normal;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
}

.press-slider__item .press-quote__source cite a {
	color: var(--color-accent);
	transition: color var(--dur-fast) var(--ease);
}

.press-slider__item .press-quote__source cite a:hover,
.press-slider__item .press-quote__source cite a:focus-visible {
	color: var(--color-accent-soft);
}

.press-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.7);
	border: 1px solid var(--color-border);
	color: var(--color-white);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.9;
	transition:
		background var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		opacity var(--dur-fast) var(--ease);
}

.press-slider__nav:hover,
.press-slider__nav:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-bg);
	outline: none;
}

.press-slider__nav--prev { left: -20px; }
.press-slider__nav--next { right: -20px; }

@media (max-width: 768px) {
	.press-slider__nav { width: 40px; height: 40px; }
	.press-slider__nav--prev { left: 4px; }
	.press-slider__nav--next { right: 4px; }
}

.press-slider__dots {
	display: flex;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
	min-height: 12px;
}

.press-slider__dots.is-hidden { display: none; }

.press-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-border-2);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition:
		background var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.press-slider__dot:hover { background: var(--color-text-muted); }

.press-slider__dot.is-active {
	background: var(--color-accent);
	transform: scale(1.2);
}

/* --- Soziale Netzwerke: Karten-Grid (Home, Projekte, Produkte, Term-Archive) -------- */

.social-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-4);
	max-width: 1100px;
	margin-inline: auto;
}

.social-grid__item { margin: 0; }

.social-card {
	--brand: var(--color-accent);
	--brand-soft: rgba(200, 169, 110, 0.18);
	--brand-bg: var(--color-accent);
	--brand-fg: var(--color-bg);

	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-6);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	text-decoration: none;
	overflow: hidden;
	transition:
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease),
		background var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
	isolation: isolate;
}

.social-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at 20% 20%,
		var(--brand-soft),
		transparent 55%
	);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	z-index: -1;
}

.social-card:hover,
.social-card:focus-visible {
	border-color: var(--brand);
	transform: translateY(-4px);
	background: var(--color-surface);
	box-shadow: 0 14px 40px -18px var(--brand);
	outline: none;
}

.social-card:hover::after,
.social-card:focus-visible::after {
	opacity: 1;
}

.social-card__icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--brand-bg);
	color: var(--brand-fg);
	flex-shrink: 0;
	position: relative;
	transition:
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
	            0 8px 24px -12px var(--brand);
}

.social-card__icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	transition: transform var(--dur) var(--ease);
	position: relative;
	z-index: 1;
}

/* Eigene (Custom) Netzwerke: Brand-Farbe + Soft-Halo per Inline-Style auf der
 * Karte. Icon-Bild rund zugeschnitten passend zum Standard-Look. */
.social-card--custom {
	--brand-soft: color-mix(in srgb, var(--brand) 18%, transparent);
}

.social-card--custom .social-card__icon img {
	width: 70%;
	height: 70%;
	object-fit: contain;
	display: block;
	position: relative;
	z-index: 1;
	transition: transform var(--dur) var(--ease);
}

.social-card--custom:hover .social-card__icon img {
	transform: rotate(8deg);
}

.social-card:hover .social-card__icon {
	transform: rotate(-8deg) scale(1.08);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset,
	            0 14px 32px -10px var(--brand);
}

.social-card:hover .social-card__icon svg {
	transform: rotate(8deg);
}

.social-card--youtube {
	--brand: #ff0033;
	--brand-soft: rgba(255, 0, 51, 0.18);
	--brand-bg: linear-gradient(135deg, #ff0033, #cc0026);
	--brand-fg: #fff;
}

.social-card--instagram {
	--brand: #d83b72;
	--brand-soft: rgba(216, 59, 114, 0.18);
	--brand-bg: linear-gradient(135deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
	--brand-fg: #fff;
}

.social-card--facebook {
	--brand: #1877f2;
	--brand-soft: rgba(24, 119, 242, 0.18);
	--brand-bg: linear-gradient(135deg, #1877f2, #0b5dc2);
	--brand-fg: #fff;
}

.social-card--linkedin {
	--brand: #0a66c2;
	--brand-soft: rgba(10, 102, 194, 0.18);
	--brand-bg: linear-gradient(135deg, #0a66c2, #004182);
	--brand-fg: #fff;
}

.social-card--soundcloud {
	--brand: #ff5500;
	--brand-soft: rgba(255, 85, 0, 0.18);
	--brand-bg: linear-gradient(135deg, #ff7700, #ff3300);
	--brand-fg: #fff;
}

.social-card--spotify {
	--brand: #1db954;
	--brand-soft: rgba(29, 185, 84, 0.18);
	--brand-bg: linear-gradient(135deg, #1ed760, #169c43);
	--brand-fg: #0a0a0a;
}

.social-card--wikipedia {
	--brand: #e8e8e8;
	--brand-soft: rgba(232, 232, 232, 0.14);
	--brand-bg: linear-gradient(135deg, #f5f5f5, #bdbdbd);
	--brand-fg: #0a0a0a;
}

.social-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.social-card__name {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 500;
	color: var(--color-white);
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
}

.social-card__handle {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: lowercase;
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color var(--dur) var(--ease);
}

.social-card:hover .social-card__handle {
	color: var(--brand);
}

.social-card__follow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	padding: 6px var(--sp-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	transition:
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		background var(--dur) var(--ease);
}

.social-card__follow svg {
	transition: transform var(--dur) var(--ease);
}

.social-card:hover .social-card__follow {
	color: var(--brand-fg);
	background: var(--brand-bg);
	border-color: transparent;
}

.social-card:hover .social-card__follow svg {
	transform: translateX(3px);
}

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

@media (max-width: 600px) {
	.social-grid {
		grid-template-columns: 1fr;
	}

	.social-card {
		grid-template-columns: 48px 1fr auto;
		padding: var(--sp-4) var(--sp-5);
		gap: var(--sp-3);
	}

	.social-card__icon {
		width: 48px;
		height: 48px;
	}

	.social-card__icon svg {
		width: 18px;
		height: 18px;
	}
}

/* --- Shared Home-Section Background + Overlay ---------------------------
 * Wird in helpers.php (tian_render_home_section_bg) für jede Home-Sektion
 * mit konfiguriertem Hintergrundbild ausgegeben. Section-Tag erhält die
 * Klasse `home-section--has-bg` und Inline-Style `--section-overlay-opacity`.
 */

.home-section--has-bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.home-section-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.home-section-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Parallax-Variante: der Wrapper trägt das Bild als CSS-Background mit
 * background-attachment: fixed. So bleibt es beim Scrollen an Ort und Stelle.
 * Fixed funktioniert nur bei CSS-Backgrounds (nicht bei <img>), deshalb die
 * separate Markup-Variante in tian_render_home_section_bg(). */
.home-section-bg--parallax {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Mobile: fixed-Attachment ruckelt auf iOS/Safari und ist auf kleinen
 * Screens ohne echten Parallax-Effekt. → Auf scroll zurückfallen. */
@media (max-width: 768px) {
	.home-section-bg--parallax {
		background-attachment: scroll;
	}
}

.home-section-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(10, 10, 10, var(--section-overlay-opacity, 0.6));
	pointer-events: none;
}

.home-section--has-bg > .container,
.home-section--has-bg > .container-fluid,
.home-section--has-bg > .container--wide {
	position: relative;
	z-index: 2;
}

/* --- Press Cards Grid ---------------------------------------------------- */

.home-press {
	position: relative;
	overflow: hidden;
}

.home-press__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.home-press__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.home-press__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(10, 10, 10, var(--home-press-overlay-opacity, 0.6));
	pointer-events: none;
}

.home-press--has-bg > .container {
	position: relative;
	z-index: 2;
}

.press-card {
	position: relative;
	background: var(--color-surface, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--color-border, rgba(200, 169, 110, 0.18));
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	transition: transform var(--dur, 0.3s) var(--ease, ease),
	            border-color var(--dur, 0.3s) var(--ease, ease),
	            box-shadow var(--dur, 0.3s) var(--ease, ease);
}

.press-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-accent, #c8a96e);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

/* === Vertical Layout (Default — alle Unterseiten) ===
 * Kompakte Karte: großes Anführungszeichen, Zitat, Trenner, Avatar + Quelle.
 */
.press-card--vertical {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3, 0.75rem);
	padding: var(--sp-5, 1.5rem);
	min-height: 100%;
}

.press-card--vertical .press-card__quote {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2, 0.5rem);
}

.press-card--vertical .press-card__byline {
	display: flex;
	align-items: center;
	gap: var(--sp-3, 0.75rem);
	padding-top: var(--sp-3, 0.75rem);
	border-top: 1px solid rgba(200, 169, 110, 0.18);
}

.press-card--vertical .press-card__avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(200, 169, 110, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(200, 169, 110, 0.3);
}

.press-card--vertical .press-card__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.press-card--vertical .press-card__avatar-initial {
	font-family: var(--font-display, Georgia, serif);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-accent, #c8a96e);
	line-height: 1;
}

.press-card--vertical .press-card__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--color-accent, #c8a96e);
	text-decoration: none;
	transition: gap var(--dur-fast, 0.2s) var(--ease, ease);
	align-self: flex-start;
}

.press-card--vertical .press-card__link:hover {
	gap: 8px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Horizontale Layout-Variante: Foto links, Text rechts */
.press-card--horizontal {
	display: grid;
	grid-template-columns: minmax(180px, 46%) 1fr;
	/* align-items: stretch (default) — Media-Spalte füllt die volle Karten-Höhe. */
	min-height: 280px;
}

.press-card--horizontal.press-card--no-media {
	grid-template-columns: 1fr;
	min-height: 240px;
}

/* Media-Container: inset mit Padding, füllt seine Grid-Spalte vertikal. */
.press-card__media {
	padding: var(--sp-5, 1.5rem);
	display: flex;
	align-items: stretch;
}

/* Foto-Rahmen: füllt verfügbare Höhe (kein aspect-ratio-Lock — passt sich
 * der Karten-Höhe an). Min-Height verhindert Mini-Thumbnails. */
.press-card__media-frame {
	position: relative;
	flex: 1;
	width: 100%;
	min-height: 200px;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid rgba(200, 169, 110, 0.25);
	background: var(--color-surface-2, rgba(0, 0, 0, 0.3));
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: transform var(--dur, 0.3s) var(--ease, ease),
	            box-shadow var(--dur, 0.3s) var(--ease, ease),
	            border-color var(--dur, 0.3s) var(--ease, ease);
}

.press-card:hover .press-card__media-frame {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
	border-color: var(--color-accent, #c8a96e);
}

.press-card__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur, 0.5s) var(--ease, ease);
}

.press-card:hover .press-card__media-img {
	transform: scale(1.06);
}

/* Body: aufgeräumte vertikale Hierarchie. */
.press-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4, 1rem);
	padding: var(--sp-6, 1.75rem) var(--sp-6, 1.75rem) var(--sp-6, 1.75rem) 0;
	min-width: 0;
	justify-content: center;
}

.press-card--no-media .press-card__body {
	padding: var(--sp-6, 1.75rem);
}

/* Override default blockquote-styling (typography.css) für saubere Card-Optik. */
.press-card__quote {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-style: normal;
	line-height: inherit;
	color: inherit;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3, 0.75rem);
}

/* Automatische open-/close-quote-Pseudos aus typography.css unterdrücken. */
.press-card__quote p::before,
.press-card__quote p::after,
.press-card__text::before,
.press-card__text::after {
	content: none !important;
}

.press-card__mark {
	display: block;
	font-family: var(--font-display, Georgia, serif);
	font-size: 3.5rem;
	line-height: 0.65;
	color: var(--color-accent, #c8a96e);
	opacity: 0.85;
}

.press-card__text {
	margin: 0;
	font-family: var(--font-display, Georgia, serif);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--color-text, #e8e6df);
	letter-spacing: 0.005em;
}

/* Byline: Author + Source. */
.press-card__byline {
	display: flex;
	align-items: center;
	gap: var(--sp-3, 0.75rem);
	padding-top: var(--sp-3, 0.75rem);
	border-top: 1px solid rgba(200, 169, 110, 0.2);
}

.press-card__avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(200, 169, 110, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(200, 169, 110, 0.3);
}

.press-card__avatar-initial {
	font-family: var(--font-display, Georgia, serif);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-accent, #c8a96e);
	line-height: 1;
}

.press-card__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.press-card__author {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-text, #e8e6df);
	letter-spacing: 0.01em;
	line-height: 1.3;
}

.press-card__source {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-accent, #c8a96e);
	line-height: 1.4;
}

/* Actions: Button-Reihe (Zum Projekt + Original lesen). */
.press-card__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-4, 1rem);
	flex-wrap: wrap;
}

.press-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: transparent;
	border: 1px solid var(--color-accent, #c8a96e);
	border-radius: 999px;
	color: var(--color-accent, #c8a96e);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--dur-fast, 0.2s) var(--ease, ease),
	            color var(--dur-fast, 0.2s) var(--ease, ease),
	            gap var(--dur-fast, 0.2s) var(--ease, ease);
}

.press-card__btn:hover,
.press-card__btn:focus-visible {
	background: var(--color-accent, #c8a96e);
	color: var(--color-bg, #0a0a0a);
	gap: 10px;
}

.press-card__btn-arrow {
	display: inline-block;
	transition: transform var(--dur-fast, 0.2s) var(--ease, ease);
}

.press-card__btn:hover .press-card__btn-arrow {
	transform: translateX(3px);
}

.press-card__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--color-text-muted, rgba(232, 230, 223, 0.7));
	text-decoration: none;
	transition: gap var(--dur-fast, 0.2s) var(--ease, ease),
	            color var(--dur-fast, 0.2s) var(--ease, ease);
}

.press-card__link:hover,
.press-card__link:focus-visible {
	gap: 8px;
	color: var(--color-accent, #c8a96e);
}

.press-card__link-arrow {
	display: inline-block;
	transition: transform var(--dur-fast, 0.2s) var(--ease, ease);
}

.press-card__link:hover .press-card__link-arrow {
	transform: translate(2px, -2px);
}

/* Schmale Card-Breite (Carousel mit 3+ Spalten oder schmales Viewport):
 * Bild oben, Text drunter, Padding reduziert. */
@media (max-width: 900px) {
	.press-card--horizontal {
		grid-template-columns: 1fr;
		min-height: 0;
		max-width: 100%;
		overflow: hidden;
	}
	.press-card__media {
		padding: var(--sp-5, 1.5rem) var(--sp-5, 1.5rem) 0;
	}
	.press-card__media-frame {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
	.press-card__body {
		padding: var(--sp-5, 1.5rem);
		min-width: 0;
		max-width: 100%;
	}
}

/* Mobile: kompakter, Texte umbrechen sauber, kein Overflow. */
@media (max-width: 600px) {

	/* Slider-Pfeile auf Touch-Geräten ausblenden — Swipe + Dots reichen. */
	.press-slider__nav {
		display: none !important;
	}

	/* Track: zentrierter Snap-Modus, mit Polster damit Karten mittig snappen. */
	.press-slider__track {
		gap: var(--sp-3, 0.75rem);
		padding-left: var(--sp-2, 0.5rem);
		padding-right: var(--sp-2, 0.5rem);
	}

	.press-slider__item {
		flex: 0 0 92%;
		scroll-snap-align: center;
	}

	/* Media als Block-Layout — saubere zentrierte Box, kein Flex-Verschachteln. */
	.press-card--horizontal .press-card__media {
		display: block;
		padding: var(--sp-4, 1rem) var(--sp-4, 1rem) 0;
		box-sizing: border-box;
	}

	.press-card--horizontal .press-card__media-frame {
		width: 100%;
		max-width: 100%;
		margin: 0;
		flex: none;
	}

	.press-card--horizontal .press-card__body {
		padding: var(--sp-4, 1rem);
		gap: var(--sp-3, 0.75rem);
		box-sizing: border-box;
	}

	.press-card__text,
	.press-card__author,
	.press-card__source {
		overflow-wrap: break-word;
		word-break: break-word;
		min-width: 0;
	}
	.press-card__text {
		font-size: 0.95rem;
	}
	.press-card__source {
		letter-spacing: 0.08em;
		white-space: normal;
	}
	.press-card__byline {
		gap: var(--sp-2, 0.5rem);
	}
	.press-card__actions {
		gap: var(--sp-3, 0.75rem);
	}
	.press-card__btn {
		padding: 6px 14px;
		font-size: 0.72rem;
	}
}

/* --- Print styles -------------------------------------------------------- */

@media print {
	.site-header, .site-footer, .nav-toggle { display: none !important; }
	body { background: white; color: black; }
	a { color: black; text-decoration: underline; }
}