/* ==========================================================================
   HADES — Landingpage

   Layout-System: alle Maße sind aus "Claude/Landing Page.png" (1920x6768)
   ausgemessen und als vw-Werte hinterlegt (px / 19.2 = vw). Bei einem
   Viewport von exakt 1920px trifft die Seite damit die Mockup-Koordinaten;
   darunter/darüber skaliert alles proportional (clamp() begrenzt die Extreme).

   Schriften: Gambetta (Variable-Font, lokal in assets/fonts/),
   Geist / Geist Mono / Geist Pixel über Google Fonts (= next/font/google).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Geist+Pixel&display=swap");

@font-face {
	font-family: "Gambetta";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../assets/fonts/Gambetta-Variable.ttf") format("truetype-variations");
}
@font-face {
	font-family: "Gambetta";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../assets/fonts/Gambetta-VariableItalic.ttf") format("truetype-variations");
}

:root {
	/* Farben — Styleguide ist maßgeblich (das Mockup-PNG zeigt durch den
	   Farbprofil-Export ein minimal dunkleres Lime, #C6DD1D). */
	--color-canvas: #000000;
	--color-text: #c7c7a6;
	--color-text-dim: #8a8a72;
	--color-accent: #d1e91f;
	--color-accent-ink: #000000;
	--color-danger: #f22f20;
	--color-field: #1b1811;
	--color-surface: #1e1e19;
	--color-border: #3c3c32;

	/* Typografie */
	--font-serif: "Gambetta", Georgia, "Times New Roman", serif;
	--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
	--font-pixel: "Geist Pixel", "Geist Mono", ui-monospace, monospace;

	/* Schriftgrößen (Mockup @1920) */
	--fs-hero: clamp(56px, 13.59vw, 274px); /* 261px */
	--fs-display: clamp(40px, 8.39vw, 169px); /* 161px */
	--fs-bold: clamp(26px, 3.14vw, 63px); /* 60px  */
	--fs-contact: clamp(30px, 3.14vw, 63px); /* 60px  */
	--fs-body: clamp(15px, 1.094vw, 22px); /* 21px  */

	/* Radien */
	--radius-media: clamp(14px, 1.25vw, 26px); /* 24px */
	--radius-field: clamp(10px, 0.73vw, 15px); /* 14px */
	--radius-full: 9999px;

	/* Layout */
	--pad: clamp(18px, 1.667vw, 34px); /* 32px  Seitenrand (Medien) */
	--pad-text: clamp(20px, 2.14vw, 43px); /* 41px  Seitenrand (Textspalten) */
	--circle: clamp(46px, 5.73vw, 116px); /* 110px Kreis-Buttons */
	--copy-w: clamp(240px, 18.23vw, 370px); /* 350px Textspalte */
	--gap-feature: clamp(72px, 16.35vw, 330px); /* 314px zwischen den Sektionen */
}

/* ---------- Reset ---------- */
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--color-canvas);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.381; /* 29px Zeilenabstand @21px */
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img,
video {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------- Headline-Stile ----------
   Das Mockup nutzt zwei klar getrennte Display-Stile: sehr groß + Regular
   (Hero, KATALOG., KARTE.) und deutlich kleiner + Bold (alle übrigen). */
.h-display {
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-accent);
	margin: 0;
}
.h-bold {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.06;
	color: var(--color-accent);
	margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 0.63vw, 13px);
	height: clamp(44px, 3.59vw, 72px); /* 69px */
	padding: 0 clamp(18px, 1.56vw, 32px); /* 30px */
	border-radius: var(--radius-full);
	font-weight: 400;
	font-size: clamp(14px, 0.99vw, 20px); /* 19px */
	white-space: nowrap;
	transition:
		transform 0.15s ease,
		background-color 0.15s ease,
		border-color 0.15s ease;
}
.btn:hover {
	transform: translateY(-1px);
}
.btn:active {
	transform: translateY(0);
}
.btn__icon {
	width: clamp(16px, 1.04vw, 21px);
	height: clamp(16px, 1.04vw, 21px);
	flex-shrink: 0;
}
.btn--primary {
	background: var(--color-accent);
	color: var(--color-accent-ink);
}
.btn--primary:hover {
	background: #dcf24a;
}
.btn--primary:disabled {
	opacity: 0.55;
	transform: none;
	cursor: not-allowed;
}
/* Ghost: dunkle Füllung, cremefarbener Text, aber limefarbenes Icon. */
.btn--ghost {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}
.btn--ghost .btn__icon,
.btn--ghost .icon {
	color: var(--color-accent);
}
.btn--ghost:hover {
	border-color: var(--color-accent);
}

/* ---------- Icons (Maskentechnik, färben sich über currentColor) ---------- */
.icon {
	display: inline-block;
	flex-shrink: 0;
	width: clamp(16px, 1.04vw, 21px);
	height: clamp(16px, 1.04vw, 21px);
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}
.icon--chat {
	mask-image: url("../assets/icons/ui/chat.svg");
	-webkit-mask-image: url("../assets/icons/ui/chat.svg");
}
.icon--chevron-down {
	mask-image: url("../assets/icons/ui/chevron-down.svg");
	-webkit-mask-image: url("../assets/icons/ui/chevron-down.svg");
}
.icon--chevron-right {
	mask-image: url("../assets/icons/ui/chevron-right.svg");
	-webkit-mask-image: url("../assets/icons/ui/chevron-right.svg");
}
.icon--upload {
	mask-image: url("../assets/icons/ui/upload.svg");
	-webkit-mask-image: url("../assets/icons/ui/upload.svg");
}
.icon--close {
	mask-image: url("../assets/icons/ui/close.svg");
	-webkit-mask-image: url("../assets/icons/ui/close.svg");
}

/* ---------- Kreis-Buttons (Hero-Scroll + Sektions-Pfeile) ----------
   Sitzen im Mockup mittig AUF der Unterkante des Bildes, freigestellt
   durch einen schwarzen Ring. */
.circle-btn {
	position: absolute;
	z-index: 3;
	width: var(--circle);
	height: var(--circle);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 clamp(4px, 0.42vw, 9px) var(--color-canvas);
	transition:
		border-color 0.2s ease,
		color 0.2s ease;
}
.circle-btn .icon {
	width: clamp(18px, 1.35vw, 28px);
	height: clamp(18px, 1.35vw, 28px);
}
.circle-btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Header-CTA ist bewusst kleiner als die Formular-Buttons. */
.site-header .btn {
	height: clamp(36px, 2.34vw, 47px); /* 45px */
	padding: 0 clamp(14px, 1.15vw, 23px); /* 22px */
	font-size: clamp(13px, 0.885vw, 18px); /* 17px */
	gap: clamp(6px, 0.47vw, 10px);
}
.site-header .btn .icon {
	width: clamp(14px, 0.94vw, 19px);
	height: clamp(14px, 0.94vw, 19px);
}

/* ---------- Header ---------- */
.site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: clamp(58px, 4.06vw, 82px); /* 78px */
	padding-inline: var(--pad);
	transition:
		background-color 0.35s ease,
		backdrop-filter 0.35s ease;
}
.site-header.is-stuck {
	position: fixed;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(14px);
	animation: header-drop 0.35s ease both;
}
@keyframes header-drop {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: clamp(6px, 0.42vw, 9px); /* 8px */
}
.brand__icon {
	width: clamp(23px, 1.67vw, 34px); /* 32px */
	height: auto;
}
.brand__name {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(16px, 1.2vw, 24px); /* 23px */
	letter-spacing: 0.06em;
	color: var(--color-accent);
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	padding-top: clamp(58px, 4.06vw, 82px);
	/* Der Titel ragt unter den Rahmen; der Rest ist der Abstand zur
	   nächsten Sektion (Mockup: Rahmenunterkante 1001 -> Katalog 1365). */
	margin-bottom: clamp(90px, 18.96vw, 385px);
}
.hero__frame {
	position: relative;
	margin-inline: var(--pad);
	aspect-ratio: 2.013 / 1;
	border-radius: var(--radius-media);
	overflow: hidden;
	background: var(--color-canvas);
	transform: scale(var(--hero-scale, 1));
	transform-origin: 50% 0;
	will-change: transform;
}
/* Abdunklung beim Wegscrollen */
.hero__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: rgba(0, 0, 0, var(--hero-dim, 0));
}
.hero__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.05) 30%,
		rgba(0, 0, 0, 0.12) 62%,
		rgba(0, 0, 0, 0.6) 100%
	);
}
.hero__video-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #000 url("../assets/video/hades-poster.jpg") center/cover no-repeat;
}
.hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none; /* YouTube-Steuerelemente sind ohnehin ausgeblendet */
}
.hero__lede {
	position: absolute;
	z-index: 2;
	left: clamp(12px, 0.63vw, 13px); /* 44 - 32 Rahmenversatz */
	bottom: clamp(52px, 8.75vw, 178px); /* 168px */
	margin: 0;
	max-width: clamp(220px, 16.67vw, 340px); /* 320px */
	line-height: 1.381;
	color: var(--color-text);
	text-shadow:
		0 1px 4px rgba(0, 0, 0, 0.9),
		0 2px 16px rgba(0, 0, 0, 0.9);
}
.hero__title {
	position: absolute;
	z-index: 2;
	left: clamp(14px, 2.29vw, 47px); /* 44px */
	bottom: -4.69vw; /* Grundlinie 44px unter der Rahmenunterkante */
	font-size: var(--fs-hero);
	transform: translateY(var(--parallax-y, 0));
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.hero__scroll {
	right: clamp(22px, 8.07vw, 164px); /* Mittelpunkt 178px vom Rahmenrand */
	bottom: calc(var(--circle) / -2);
	/* an der Unterkante des Rahmens ausrichten */
	margin-bottom: 0;
}

/* ---------- Feature-Sektionen ----------
   .feature ist ein full-bleed Block; das Bild definiert die Höhe, Headline
   und Text werden absolut darüber/daneben positioniert (Mockup: die
   Headline überlappt das Bild, der Fließtext endet bündig mit dessen
   Unterkante). */
.feature {
	position: relative;
	margin-bottom: var(--gap-feature);
}
.feature__media {
	position: relative;
}
.feature__media picture,
.feature__media > img {
	display: block;
	border-radius: var(--radius-media);
	overflow: hidden;
	isolation: isolate;
}
.feature__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-media);
}
.feature__arrow {
	right: calc(var(--circle) / 2);
	bottom: calc(var(--circle) / -2);
}
.feature__title {
	position: absolute;
	z-index: 2;
	width: max-content;
	max-width: 92vw;
}
.feature__text {
	position: absolute;
	z-index: 2;
	bottom: 0;
	margin: 0;
	width: var(--copy-w);
}

/* Katalog: Bild an der rechten Kante, Headline + Text linksbündig darüber */
.feature--edge-right .feature__media {
	width: 57.4vw;
	margin-left: auto;
	margin-right: var(--pad);
}
.feature--edge-right .feature__title {
	top: clamp(6px, 1.93vw, 39px);
	left: 21vw;
	font-size: var(--fs-display);
}
.feature--edge-right .feature__text {
	left: 21vw;
}

/* Karte: gespiegelt — Bild links, Headline + Text rechtsbündig */
.feature--edge-left .feature__media {
	width: 57.4vw;
	margin-right: auto;
	margin-left: var(--pad);
}
.feature--edge-left .feature__title {
	top: clamp(6px, 1.46vw, 30px);
	right: 21.24vw;
	font-size: var(--fs-display);
}
.feature--edge-left .feature__text {
	right: 21.6vw;
}

/* Vergleichen / HADES Mobile: kleineres Bild rechts, Textblock links davon,
   Headline + Text als eine Einheit an der Bild-Unterkante ausgerichtet. */
.feature--inset {
	margin-bottom: clamp(56px, 11vw, 222px); /* 211px */
}
.feature--inset .feature__media {
	width: 37.8vw;
	margin-left: auto;
	margin-right: var(--pad);
}
.feature--inset .feature__copy {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 40.8vw;
	width: var(--copy-w); /* 350px, wie bei Katalog/Karte */
}
.feature--inset .feature__title {
	position: static;
	font-size: var(--fs-bold);
	white-space: nowrap; /* "HADES MOBILE." steht im Mockup einzeilig */
	margin-bottom: clamp(6px, 0.63vw, 13px);
}
.feature--inset .feature__text {
	position: static;
	width: 100%;
}

/* ---------- Glow-Hintergrund (Vergleichen -> Kontakt) ---------- */
.glow-wrap {
	position: relative;
}
.glow-wrap__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: min(40vw, 800px);
	height: 100%;
	pointer-events: none;
	opacity: 0.95;
	mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
}
.glow-wrap__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}

/* ---------- Kontakt ---------- */
.contact {
	position: relative;
	z-index: 1;
	padding-top: clamp(90px, 25.16vw, 508px); /* Abstand ab Mobile-Bild */
}
.contact__inner {
	margin-left: 40.8vw; /* 783px */
	margin-right: var(--pad);
}
.contact__title {
	font-size: var(--fs-contact);
	margin-bottom: clamp(10px, 1.15vw, 24px);
}
.contact__row {
	display: grid;
	grid-template-columns: 40fr 60fr; /* 429px / 643px */
	gap: clamp(12px, 1.72vw, 35px); /* 33px */
	margin-bottom: clamp(12px, 1.51vw, 31px); /* 29px */
}
.field {
	display: flex;
}
.field__input {
	width: 100%;
	height: clamp(46px, 3.23vw, 66px); /* 62px */
	background: var(--color-field);
	border: 1px solid transparent;
	border-radius: var(--radius-field);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: clamp(14px, 0.94vw, 19px); /* 18px */
	padding: 0 clamp(12px, 0.63vw, 13px);
	outline: none;
	transition: border-color 0.15s ease;
}
.field__input::placeholder {
	color: var(--color-text-dim);
}
.field__input:focus {
	border-color: var(--color-accent);
}
.field__input--area {
	resize: vertical;
	height: clamp(180px, 16.5vw, 335px); /* 317px */
	padding: clamp(12px, 0.73vw, 15px) clamp(12px, 0.63vw, 13px);
	line-height: 1.45;
}
.field__error {
	color: var(--color-danger);
	font-size: 0.85em;
	margin: 8px 0 0;
}
.field__hint {
	font-size: 0.78em;
	color: var(--color-text-dim);
	margin: 10px 0 0;
	min-height: 1em;
}
.contact__actions {
	display: flex;
	justify-content: flex-end;
	gap: clamp(12px, 1.875vw, 38px); /* 36px */
	margin-top: clamp(16px, 1.93vw, 39px); /* 37px */
	flex-wrap: wrap;
}
.form-status {
	margin-top: 14px;
	padding: 10px 18px;
	border-radius: var(--radius-full);
	font-size: 0.85em;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.form-status[hidden] {
	display: none;
}
.form-status__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.form-status[data-state="ok"] {
	background: rgba(209, 233, 31, 0.12);
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
}
.form-status[data-state="error"] {
	background: rgba(242, 47, 32, 0.1);
	color: var(--color-danger);
	border: 1px solid var(--color-danger);
}

/* ---------- Closing ---------- */
.closing {
	padding: clamp(120px, 34.32vw, 693px) var(--pad) 0 var(--pad-text); /* 659px ab Formular */
}
.closing__title {
	font-size: var(--fs-bold);
	line-height: 1.033; /* 62px Zeilenpitch */
}
.closing__indent {
	display: inline-block;
	padding-left: 1.07em; /* 63px @59px */
}

/* ---------- Footer ---------- */
.site-footer {
	display: grid;
	grid-template-columns: minmax(0, 1128fr) minmax(0, 719fr); /* 1128 / 719 im Innenmaß */
	align-items: end;
	gap: 0; /* Textblock und Foto stoßen im Mockup direkt aneinander */
	padding: clamp(80px, 8.95vw, 181px) var(--pad) clamp(20px, 1.93vw, 39px) var(--pad-text);
}
.site-footer__main {
	min-width: 0;
}
.site-footer .brand {
	margin-bottom: clamp(20px, 2.87vw, 58px); /* Logo -> Links */
}
.site-footer__grid,
.site-footer__bottom {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 x 376px, ohne Gap */
	gap: 0;
}
.site-footer__bottom {
	align-items: end;
	margin-top: clamp(16px, 1.35vw, 27px);
}
.footer-col {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-right: clamp(12px, 1vw, 20px);
	font-size: clamp(13px, 0.885vw, 18px); /* 17px */
	color: var(--color-text-dim);
	line-height: 1.765; /* 30px Zeilenpitch */
}
.footer-col a {
	color: var(--color-text-dim);
	transition: color 0.15s ease;
}
.footer-col a:hover {
	color: var(--color-accent);
}
.footer-col__heading {
	color: var(--color-text-dim);
	margin: 0;
}
.site-footer__bottom > span {
	font-size: clamp(13px, 0.885vw, 18px);
	line-height: 1.765;
	color: var(--color-text-dim);
}
.site-footer__photo {
	width: 100%;
	aspect-ratio: 1.556 / 1;
	object-fit: cover;
	object-position: center calc(50% + var(--parallax-y, 0px));
	border-radius: clamp(12px, 1.15vw, 24px); /* 22px */
}

/* ---------- Scroll-Reveal ----------
   Gestaffelt pro Sektion (--reveal-delay wird in js/main.js gesetzt).
   Alle Endzustände sind exakt translate(0)/scale(1), damit die Seite im
   Ruhezustand pixelgenau dem Mockup entspricht. */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Bilder fahren zusätzlich minimal auf. :not(.is-visible) ist wichtig —
   sonst überschreiben diese Regeln den Endzustand von .reveal.is-visible. */
.feature__media.reveal:not(.is-visible),
.hero__frame.reveal:not(.is-visible) {
	transform: translateY(34px) scale(0.988);
}
/* Headlines kommen etwas weiter von unten */
.feature__title.reveal:not(.is-visible),
.contact__title.reveal:not(.is-visible),
.closing__title.reveal:not(.is-visible) {
	transform: translateY(40px);
}

/* ==========================================================================
   Responsive — unterhalb von ~1000px löst sich das Overlap-Layout auf:
   Bild volle Breite, Headline und Text darunter im normalen Fluss.
   ========================================================================== */
@media (max-width: 1000px) {
	:root {
		--fs-hero: clamp(52px, 17vw, 150px);
		--fs-display: clamp(38px, 11vw, 100px);
		--fs-bold: clamp(24px, 5.4vw, 46px);
		--fs-contact: clamp(26px, 6vw, 52px);
		--fs-body: clamp(15px, 1.7vw, 18px);
		--circle: clamp(48px, 8vw, 70px);
		--copy-w: 100%;
		--gap-feature: clamp(64px, 12vw, 110px);
	}

	.hero {
		margin-bottom: clamp(70px, 14vw, 130px);
	}
	.hero__frame {
		aspect-ratio: 4 / 5;
	}
	.hero__lede {
		bottom: auto;
		top: clamp(18px, 4vw, 34px);
		max-width: min(88%, 340px);
	}
	/* Auf schmalen Viewports steht der Text über dem hellsten Teil des
	   Videos — dafür braucht die Oberkante einen kräftigeren Verlauf. */
	.hero__frame::before {
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.82) 0%,
			rgba(0, 0, 0, 0.45) 22%,
			rgba(0, 0, 0, 0.1) 45%,
			rgba(0, 0, 0, 0.55) 100%
		);
	}
	.hero__title {
		bottom: clamp(-30px, -4vw, -10px);
	}
	.hero__scroll {
		right: clamp(14px, 3vw, 30px);
	}

	.feature {
		padding-inline: var(--pad);
	}
	.feature--edge-right .feature__media,
	.feature--edge-left .feature__media,
	.feature--inset .feature__media {
		width: 100%;
		margin-inline: 0;
	}
	.feature__title,
	.feature__text,
	.feature--inset .feature__copy {
		position: static;
		width: 100%;
		max-width: none;
	}
	.feature__title {
		font-size: var(--fs-display);
		margin-top: clamp(20px, 4vw, 40px);
	}
	.feature--inset .feature__title {
		font-size: var(--fs-bold);
	}
	.feature__text {
		margin-top: clamp(12px, 2.5vw, 22px);
	}
	.feature--inset .feature__copy {
		margin-top: clamp(20px, 4vw, 40px);
	}
	.feature__arrow {
		right: clamp(12px, 3vw, 26px);
		bottom: calc(var(--circle) / -2);
	}

	.glow-wrap__bg {
		width: min(70vw, 420px);
		opacity: 0.32; /* sonst frisst der Glow die Lesbarkeit des Formulars */
	}

	.contact {
		padding-top: clamp(70px, 14vw, 130px);
	}
	.contact__inner {
		margin-inline: var(--pad);
	}
	.contact__row {
		grid-template-columns: 1fr;
	}
	.field__input--area {
		height: clamp(170px, 34vw, 260px);
	}
	.contact__actions {
		justify-content: stretch;
	}
	.contact__actions .btn {
		flex: 1 1 auto;
	}

	.closing {
		padding-top: clamp(90px, 18vw, 170px);
	}
	.closing__indent {
		padding-left: 1em;
	}

	.site-footer {
		grid-template-columns: 1fr;
		align-items: start;
		gap: clamp(32px, 6vw, 56px);
		padding-top: clamp(70px, 14vw, 130px);
	}
	.site-footer__photo {
		order: -1;
	}
	.site-footer__grid,
	.site-footer__bottom {
		grid-template-columns: 1fr 1fr;
	}
	.site-footer__bottom > span:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.site-footer__grid,
	.site-footer__bottom {
		grid-template-columns: 1fr;
		gap: clamp(20px, 5vw, 30px);
	}
	.contact__actions {
		flex-direction: column; /* Reihenfolge wie im Mockup: Anhänge, dann Absenden */
	}
}