.site-header {
	position: sticky;
	z-index: 100;
	top: 0;
	background: var(--color-background);
	box-shadow: var(--shadow-header);
	/* overflow: hidden; */
}

.site-header__inner {
	min-height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.site-logo {
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.025em;
	text-decoration: none;
	white-space: nowrap;
}

.site-logo__image {
	display: block;
	width: auto;
	max-width: min(42vw, 15rem);
	max-height: 2.4rem;
}

.site-logo__text {
	display: block;
	letter-spacing: 0.01em;
}

.main-navigation > .site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.5rem);
}

.site-nav__item {
	position: relative;
}

.site-nav__item-row {
	display: flex;
	align-items: center;
	gap: 0.18rem;
}

.main-navigation a {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation a[aria-current="page"],
.site-nav__item--active > .site-nav__item-row > a {
	text-decoration: underline;
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.25em;
}

.site-nav__submenu {
	position: absolute;
	top: 100%;
	left: var(--site-nav-submenu-offset-x, 0px);
	right: auto;
	z-index: 120;
	min-width: min(22rem, 80vw);
	max-width: calc(100vw - 2rem);
	margin: 0;
	padding: 0.55rem 0;
	list-style: none;
	background: var(--color-background);
	box-shadow: 0 0.7rem 2rem rgb(0 0 0 / 10%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.site-nav__submenu a {
	display: block;
	padding: 0.58rem 0.9rem;
	white-space: normal;
}

.site-nav__item--has-children:hover > .site-nav__submenu,
.site-nav__item--has-children:focus-within > .site-nav__submenu,
.site-nav__item--has-children.is-open > .site-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Ein ausdrückliches Schließen übersteuert auch Touch-Hover und :focus-within. */
.site-nav__item--has-children.is-dismissed > .site-nav__submenu {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-0.25rem);
	transition: none;
}

.nav-toggle {
	display: none;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.55rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--color-text);
}

.nav-toggle > span:not(.visually-hidden) {
	display: block;
	height: 1px;
	margin: 0.28rem 0;
	background: currentColor;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.content-page > h1,
.project-content > h1 {
	margin-bottom: var(--space-4);
	letter-spacing: 0.01em;
}

.content-page > p,
.project-content > p {
	margin-bottom: var(--space-5);
}

.content-page > h2,
.project-content > h2 {
	margin-top: var(--space-7);
	margin-bottom: var(--space-4);
	letter-spacing: 0.01em;
}

.content-page--legal {
	max-width: 58rem;
}

.content-page--legal h1 {
	font-size: clamp(2.2rem, 1.8rem + 2vw, 4.2rem);
	letter-spacing: 0.01em;
}

.media-card {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #f2f2f2;
}

.media-card > img,
.media-card__image-link > img,
.media-card__full-link > img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.media-card__image-link,
.media-card__full-link {
	display: block;
	position: relative;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

/*
 * KI-Kennzeichnung bleibt ein eigenständiges Overlay der Media-Card.
 * Die prozentuale Mittelgröße bezieht sich auf die tatsächliche Kartenbreite und
 * vermeidet dadurch zusätzliche Container-Containment-Effekte in den Layouts.
 */
.media-ai-marker {
	position: absolute;
	top: var(--ai-icon-top);
	right: var(--ai-icon-right);
	bottom: var(--ai-icon-bottom);
	left: var(--ai-icon-left);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: clamp(var(--ai-icon-min-size), 6.25%, var(--ai-icon-max-size));
	aspect-ratio: 1;
	opacity: var(--ai-icon-opacity);
	pointer-events: none;
	background-color: #ffffff10;
	border: solid 1px #ffffff20;
}

.media-ai-marker__icon {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--radius-small);
	/* background: rgb(255 255 255 / 92%) var(--ai-icon-image) center / 72% 72% no-repeat; */
	/* box-shadow: 0 1px 5px rgb(0 0 0 / 20%); */
	mask: var(--ai-icon-image) center / 72% 72% no-repeat;
    background-color: #ffffffe0;  
}

.media-card[data-media-context="teaser"] .media-ai-marker {
	top: var(--ai-teaser-icon-top);
	right: var(--ai-teaser-icon-right);
	bottom: var(--ai-teaser-icon-bottom);
	left: var(--ai-teaser-icon-left);
	opacity: var(--ai-teaser-icon-opacity);
}

.media-card[data-media-context="teaser"] .media-ai-marker:not(.media-ai-marker--always) {
	inline-size: var(--ai-teaser-icon-size);
}

.media-ai-marker--always {
	inline-size: auto;
	max-inline-size: calc(100% - (2 * var(--ai-icon-offset)));
	min-block-size: var(--ai-icon-min-size);
	aspect-ratio: auto;
	gap: 0.35rem;
	padding: 0.28rem 0.45rem;
	border-radius: var(--radius-small);
	background: rgb(255 255 255 / 94%);
	box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
	color: #111;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: 1.15;
	white-space: normal;
}

.media-ai-marker--always .media-ai-marker__icon {
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 18px;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.media-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: var(--space-4);
	background: var(--color-overlay);
	color: #fff;
	text-align: center;
	opacity: 0;
	transition: opacity var(--transition-normal);
	pointer-events: none;
}

.media-card__overlay > *,
.media-card__link-text {
	max-width: min(28rem, 100%);
	margin: 0;
}

.media-card__overlay--bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.25rem;
	padding: clamp(0.4rem, 0.7vw, 0.7rem);
	/* padding: clamp(0.8rem, 1.5vw, 1.35rem); */
	background: linear-gradient(to top, rgb(0 0 0 / 68%) 0%, rgb(0 0 0 / 34%) 42%, transparent 78%);
	text-align: left;
}

.media-card__overlay-caption {
	display: block;
	padding-block: 0.04em;
	font-size: clamp(0.86rem, 0.81rem + 0.2vw, 1rem);
	line-height: 1.4;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
}

.media-card__overlay-caption > :first-child { margin-top: 0; }
.media-card__overlay-caption > :last-child { margin-bottom: 0; }
.media-card__overlay-caption p,
.media-card__overlay-caption h3,
.media-card__overlay-caption h4 { margin: 0 0 0.25em; color: inherit; }
.media-card__overlay-caption h3,
.media-card__overlay-caption h4 { font-size: 1em; line-height: 1.28; letter-spacing: normal; }
.media-card__overlay-caption a { color: inherit; }

.media-card__project-title {
	display: block;
	font-size: clamp(0.85rem, 0.80rem + 0.3vw, 1.0rem);
	/* font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.15rem); */
	font-weight: var(--font-weight-bold);
	line-height: 1.0;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
}

.media-card__link-text {
	display: block;
	font-size: clamp(0.9rem, 0.85rem + 0.35vw, 1.15rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	text-align: center;
}

.media-card__link-text--bottom {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: 1.25;
	text-align: left;
	opacity: 0.92;
}

.media-card__caption {
	margin-top: var(--space-2);
	padding-block: 0.04em 0.1em;
	font-size: var(--font-size-sm);
	line-height: 1.4;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
}

.media-card--caption:hover .media-card__overlay,
.media-card--caption:focus-within .media-card__overlay,
.media-card--link:hover .media-card__overlay,
.media-card--link:focus-within .media-card__overlay,
.media-card--project:hover .media-card__overlay,
.media-card--project:focus-within .media-card__overlay {
	opacity: 1;
}

.media-card--caption:hover > img,
.media-card--caption:hover .media-card__image-link > img,
.media-card--link:hover .media-card__full-link > img,
.media-card--project:hover .media-card__full-link > img {
	transform: scale(1.012);
}

.project-card {
	min-height: 0;
}

.project-back {
	margin-top: var(--space-7);
	text-align: center;
}

.project-back a {
	font-size: var(--font-size-sm);
}

.project-more {
	margin-top: var(--space-6);
}

.project-more__title {
	margin: 0 0 var(--space-4);
	font-size: clamp(1.4rem, 1.1rem + 0.8vw, 2rem);
}

.project-teasers {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--gap-small);
	align-items: stretch;
	justify-content: center;
}

.project-teasers > * {
	flex: 1 1 0;
	min-width: 0;
	max-width: var(--project-teaser-max-item-width, none);
}

.project-teasers:not(.is-enhanced) > :nth-child(n+2) {
	display: none;
}

.project-teasers .media-card {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
}

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

.project-teasers .media-card__full-link,
.project-teasers .media-card__image-link {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
}
.project-teasers img {
	width: 100%;
	height: 100%;
	max-width: min(100%, var(--media-max-render-width, 100%));
	max-height: min(100%, var(--media-max-render-height, 100%));
	object-fit: cover;
	object-position: var(--media-position, 50% 50%);
}
.project-teasers .media-card--contain img { object-fit: contain; }
.project-teasers .media-card--cover img { object-fit: cover; }

.video-shell {
	position: relative;
	width: min(100%, var(--video-max-width, var(--video-default-max-width, 48rem)));
	aspect-ratio: var(--video-aspect-ratio, 16 / 9);
	margin-block: var(--space-5);
	background: #080808;
	--video-fit: contain;
	--video-aspect-ratio: 16 / 9;
}

.video-shell--ratio-16-9 { --video-aspect-ratio: 16 / 9; --video-default-max-width: 48rem; }
.video-shell--ratio-9-16 { --video-aspect-ratio: 9 / 16; --video-default-max-width: 28rem; }
.video-shell--ratio-4-3 { --video-aspect-ratio: 4 / 3; --video-default-max-width: 44rem; }
.video-shell--ratio-3-4 { --video-aspect-ratio: 3 / 4; --video-default-max-width: 36rem; }
.video-shell--ratio-3-2 { --video-aspect-ratio: 3 / 2; --video-default-max-width: 48rem; }
.video-shell--ratio-2-3 { --video-aspect-ratio: 2 / 3; --video-default-max-width: 34rem; }
.video-shell--ratio-21-9 { --video-aspect-ratio: 21 / 9; --video-default-max-width: 56rem; }
.video-shell--ratio-9-21 { --video-aspect-ratio: 9 / 21; --video-default-max-width: 26rem; }
.video-shell--ratio-1-1 { --video-aspect-ratio: 1 / 1; --video-default-max-width: 40rem; }
.video-shell--ratio-auto { --video-aspect-ratio: 16 / 9; --video-default-max-width: 48rem; }

/* Portrait-/Square-Videos bleiben auf schmaleren Contentbereichen bewusst kompakt.
 * Ein explizites max-width am [video]-Tag bleibt als --video-max-width vorrangig. */
@media (max-width: 63.999rem) {
	.video-shell--ratio-9-16 { --video-default-max-width: 24rem; }
	.video-shell--ratio-3-4 { --video-default-max-width: 30rem; }
	.video-shell--ratio-2-3 { --video-default-max-width: 28rem; }
	.video-shell--ratio-9-21 { --video-default-max-width: 22rem; }
	.video-shell--ratio-1-1 { --video-default-max-width: 34rem; }
}

@media (max-width: 47.999rem) {
	.video-shell--ratio-9-16 { --video-default-max-width: min(20rem, 88vw); }
	.video-shell--ratio-3-4 { --video-default-max-width: min(24rem, 92vw); }
	.video-shell--ratio-2-3 { --video-default-max-width: min(23rem, 90vw); }
	.video-shell--ratio-9-21 { --video-default-max-width: min(18rem, 84vw); }
	.video-shell--ratio-1-1 { --video-default-max-width: min(28rem, 94vw); }
}
.video-shell--fit-contain { --video-fit: contain; }
.video-shell--fit-cover { --video-fit: cover; }

.video-shell video,
.video-poster {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: inherit;
}

.video-shell video {
	background: #000;
	object-fit: var(--video-fit);
}

.video-shell video[hidden],
.video-shell .video-poster[hidden] {
	display: none !important;
}

.video-poster {
	position: relative;
	padding: 0;
	border: 0;
	background: #111;
	color: #fff;
	cursor: pointer;
	overflow: hidden;
}

.video-poster img,
.video-poster__fallback {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--video-fit);
	opacity: 0.82;
}

.video-poster__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.2rem;
	height: 4.2rem;
	transform: translate(-50%, -50%);
	border: 1px solid rgb(255 255 255 / 80%);
	border-radius: 50%;
	background: rgb(0 0 0 / 34%);
}

.video-poster__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 53%;
	transform: translate(-45%, -50%);
	border-top: 0.55rem solid transparent;
	border-bottom: 0.55rem solid transparent;
	border-left: 0.85rem solid #fff;
}

.video-poster__label {
	position: absolute;
	left: var(--space-3);
	bottom: var(--space-3);
	font-size: var(--font-size-xs);
	letter-spacing: 0.02em;
}

.email-address {
	font: inherit;
}

.email-address--reveal {
	display: inline;
}

.email-address__reveal,
.email-address__copy {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
	cursor: pointer;
}

.email-address__reveal:hover,
.email-address__copy:hover {
	text-decoration-thickness: 0.12em;
}

.email-address__copy {
	margin-inline-start: 0.6em;
	font-size: 0.9em;
	color: var(--color-muted);
}

.email-address__noscript {
	margin-inline-start: 0.4em;
	color: var(--color-muted);
	font-size: 0.9em;
}

.media-missing {
	padding: var(--space-4);
	border: 1px dashed #b33;
	color: #922;
	font-size: var(--font-size-sm);
}

.site-footer {
	border-top: 1px solid var(--color-border);
}

.site-footer__inner {
	min-height: 4.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	font-size: var(--font-size-sm);
	text-align: center;
	flex-wrap: wrap;
}

.site-footer__access-state,
.site-footer__access-action {
	font-size: 0.92em;
	color: var(--color-muted);
}

.site-footer__access-state::before {
	content: "";
	display: inline-block;
	width: 0.34rem;
	height: 0.34rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 0.08em;
}

.site-footer__access-form {
	display: inline;
	margin: 0;
}

.site-footer__access-action {
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.access-overlay {
	position: fixed;
	z-index: 500;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--space-4);
	background: rgb(0 0 0 / 42%);
	backdrop-filter: blur(5px);
}

.access-dialog {
	position: relative;
	width: min(100%, 28rem);
	padding: clamp(1.6rem, 4vw, 2.5rem);
	background: #fff;
	box-shadow: 0 20px 80px rgb(0 0 0 / 20%);
}

.access-dialog h2 {
	margin-bottom: var(--space-3);
	font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem);
}

.access-dialog__close {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	font-size: 1.8rem;
	line-height: 1;
	text-decoration: none;
}

.access-dialog__button {
	display: inline-block;
	margin-top: var(--space-3);
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-text);
	background: var(--color-text);
	color: var(--color-background);
	text-decoration: none;
}

.access-form {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.access-form input {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid #aaa;
	border-radius: 0;
}

.access-form button,
.access-dialog form > button {
	margin-top: var(--space-2);
	padding: 0.8rem 1rem;
	border: 1px solid var(--color-text);
	background: var(--color-text);
	color: var(--color-background);
	cursor: pointer;
}

.form-message--error {
	color: #a00000;
}

.text-link {
	display: inline-block;
	margin-top: var(--space-3);
}

@media (max-width: 47.999rem) {
	.nav-toggle {
		display: block;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 0;
		overflow: hidden;
		background: var(--color-background);
		box-shadow: var(--shadow-header);
		transition: max-height var(--transition-normal);
	}

	.main-navigation.is-open {
		max-height: min(80vh, 42rem);
		overflow-y: auto;
	}

	.main-navigation > .site-nav__list {
		width: min(100%, calc(var(--content-max-width) + (2 * var(--content-padding))));
		margin-inline: auto;
		padding: var(--space-3) var(--content-padding) var(--space-4);
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.site-nav__item-row {
		display: block;
	}

	.main-navigation a {
		display: block;
		padding-block: 0.7rem;
	}

	/* Mobile: Projekt-Unterpunkte sind im geöffneten Hamburger-Menü immer sichtbar. */
	.site-nav__submenu {
		position: static;
		right: auto;
		left: auto;
		min-width: 0;
		margin: 0;
		padding: 0 0 var(--space-2);
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	/* Auch ein zuvor geschlossenes Desktop-Dropdown bleibt mobil sichtbar. */
	.site-nav__item--has-children.is-dismissed > .site-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__submenu a {
		padding: 0.45rem 0 0.45rem var(--space-4);
		font-size: var(--font-size-xs);
	}
}

@media (hover: none) {
	.media-card--link .media-card__overlay,
	.media-card--project .media-card__overlay,
	.media-card--caption .media-card__overlay {
		opacity: 1;
		background: linear-gradient(to top, rgb(0 0 0 / 62%), transparent 58%);
	}

	.media-card__overlay--bottom {
		align-items: flex-start;
	}
}

/* Explizite Inhalts-Trennlinie: Markdown --- oder [hr]. */
.content-rule {
	width: 100%;
	margin: var(--space-3) 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}


/* Footer-Links explizit ohne Dekoration */
.footer-link {
	text-decoration: none;
}


/* Listen gehören optisch enger zur unmittelbar vorausgehenden Überschrift oder fett gesetzten Zwischenzeile. */
.content-page > :is(h2, h3, h4):has(+ :is(ul, ol)),
.project-content > :is(h2, h3, h4):has(+ :is(ul, ol)),
.content-page > p:has(> strong:only-child):has(+ :is(ul, ol)),
.project-content > p:has(> strong:only-child):has(+ :is(ul, ol)) {
	margin-bottom: var(--space-2);
}

/* Projektwechsel zwischen den aktuell sichtbaren Projekten. */
.project-navigation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-m, 24px);
	margin: clamp(40px, 7vw, 88px) 0 28px;
}
.project-navigation__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.project-navigation__link--next { justify-content: flex-end; text-align: right; }
.project-navigation__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-navigation__spacer { min-width: 0; }

.access-dialog__reopen {
	display: block;
	width: fit-content;
	margin: 12px auto 0;
	font-size: .82rem;
	color: inherit;
	opacity: .58;
}
.access-dialog__reopen:hover,
.access-dialog__reopen:focus-visible { opacity: 1; }