/* Scroll-Hero Startseite (Variante 2). Animiert werden nur transform, opacity und clip-path.
   Die letzte Bildschirmhöhe der Strecke gehört dem Blatt-Übergang: Der Leistungsbereich
   gleitet über den stehenden Hero, das Foto tritt als abgerundete Karte zurück. */

.sk-hero {
	position: relative;
	height: 400svh;
}

.sk-hero__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	background: var(--sk-navy);
}

.sk-hero__media {
	position: absolute;
	inset: 0;
	background: var(--sk-navy);
	will-change: transform, clip-path;
}

/* Feine Goldkante, sobald das Foto zur Karte wird (--sk-k von 0 bis 1 aus hero-scroll.js) */
.sk-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border: 1px solid rgba(200, 169, 126, 0.6);
	border-radius: calc(var(--sk-k, 0) * 28px);
	opacity: var(--sk-k, 0);
	pointer-events: none;
}

/* Inhalt des Blatts baut sich nacheinander auf. sk-wartet setzt erst das Skript, ohne JS bleibt alles sichtbar */
.sk-wartet .sk-overline,
.sk-wartet h2,
.sk-wartet .sk-leistungen__intro,
.sk-wartet .sk-ablauf__intro,
.sk-wartet .sk-lp-intro p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Karten: gleiche Einblendung, dazu die eigenen Hover-Übergänge behalten */
.sk-wartet .sk-leistung {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.sk-wartet.sk-einblenden .sk-overline,
.sk-wartet.sk-einblenden h2,
.sk-wartet.sk-einblenden .sk-leistungen__intro,
.sk-wartet.sk-einblenden .sk-ablauf__intro,
.sk-wartet.sk-einblenden .sk-lp-intro p,
.sk-wartet.sk-einblenden .sk-leistung {
	opacity: 1;
	transform: none;
}

.sk-wartet.sk-einblenden h2 { transition-delay: 0.1s; }
.sk-wartet.sk-einblenden .sk-leistungen__intro,
.sk-wartet.sk-einblenden .sk-ablauf__intro,
.sk-wartet.sk-einblenden .sk-lp-intro p { transition-delay: 0.2s; }
.sk-wartet.sk-einblenden .sk-leistung:nth-child(1) { transition-delay: 0.3s; }
.sk-wartet.sk-einblenden .sk-leistung:nth-child(2) { transition-delay: 0.42s; }
.sk-wartet.sk-einblenden .sk-leistung:nth-child(3) { transition-delay: 0.54s; }

/* Hover nach dem Einblenden sofort und mit leichtem Anheben */
.sk-wartet.sk-einblenden .sk-leistung:hover,
.sk-wartet.sk-einblenden .sk-leistung:focus-within {
	transition-delay: 0s;
	transform: translateY(-4px);
}

/* Abdunkeln beim Zurücktreten */
.sk-hero__shade {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: var(--sk-navy);
	opacity: 0;
	pointer-events: none;
}

.sk-hero__layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: opacity;
}

.sk-hero__layer:first-child {
	opacity: 1;
}

.sk-hero__layer picture,
.sk-hero__layer img {
	display: block;
	width: 100%;
	height: 100%;
}

.sk-hero__layer img {
	object-fit: cover;
	object-position: var(--sk-focus);
	transform-origin: var(--sk-focus);
	will-change: transform;
}

.sk-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Schräg von links unten, wo der Text steht. Oben bleibt das Bild hell, auch wenn das Gesicht links sitzt (Bild 3) */
	background:
		/* oben ein leichter Schleier, damit das helle Menü auch auf hellen Wänden lesbar bleibt */
		linear-gradient(to bottom, rgba(10, 31, 68, 0.55) 0, rgba(10, 31, 68, 0) 220px),
		linear-gradient(
			25deg,
			rgba(10, 31, 68, 0.9) 0%,
			rgba(10, 31, 68, 0.66) 30%,
			rgba(10, 31, 68, 0.12) 58%,
			rgba(10, 31, 68, 0) 78%
		);
}

.sk-hero__dip {
	position: absolute;
	inset: 0;
	background: var(--sk-navy);
	opacity: 0;
	pointer-events: none;
}

/* Textblöcke links unten */
.sk-hero__step {
	position: absolute;
	left: 0;
	bottom: 16vh;
	z-index: 3;
	padding: 0 var(--sk-rand);
	max-width: min(46vw, 900px); /* wächst mit dem Bildschirm, bleibt links vom Gesicht (ca. 59 %) */
	box-sizing: content-box; /* Kadence setzt border-box, das Polster soll die Textbreite nicht schmälern */
	opacity: 0;
	will-change: transform, opacity;
}

.sk-hero__step:first-of-type {
	opacity: 1;
}

.sk-hero__rule {
	width: 48px;
	height: 2px;
	background: var(--sk-gold);
	margin-bottom: 20px;
}

.sk-hero__title {
	font-family: var(--sk-font-heading);
	font-weight: 300;
	font-size: clamp(2.75rem, min(6.2vw, 9svh), 7.5rem); /* 44 bis 120 px, bei niedrigen Fenstern kleiner, damit der Textblock nicht ins Logo ragt */
	line-height: 1.06;
	color: var(--sk-creme);
	margin: 0 0 16px;
	text-wrap: balance;
}

.sk-hero__title em {
	font-style: italic;
	color: var(--sk-gold-hell);
}

.sk-hero__step p {
	margin: 0;
	max-width: 40ch;
	font-size: clamp(1rem, min(0.55rem + 0.75vw, 2.6svh), 1.375rem); /* 16 bis 22 px, bei niedrigen Fenstern kleiner */
	line-height: 1.65;
	color: rgba(248, 245, 239, 0.85);
}

/* Leiser Zweitlink unter dem Haupt-CTA: Textlink statt Button-Box, damit der Haupt-CTA
   optisch führend bleibt. Abstand nach oben groß genug gegen versehentliches Antippen. */
.sk-hero__sekundaer {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 6px;
	margin-top: clamp(20px, 2vw, 28px);
	padding: 6px 2px;
	font-family: var(--sk-font-body);
	font-size: clamp(0.8125rem, 0.65rem + 0.3vw, 0.9375rem); /* 13 bis 15 px */
	font-weight: 400;
	color: var(--sk-gold-hell);
	text-decoration: underline;
	text-decoration-color: rgba(232, 213, 183, 0.4);
	text-underline-offset: 3px;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.sk-hero__sekundaer::after {
	content: "→";
	transition: transform 0.2s;
}

.sk-hero__sekundaer:hover,
.sk-hero__sekundaer:focus-visible {
	color: var(--sk-creme);
	text-decoration-color: rgba(248, 245, 239, 0.6);
}

.sk-hero__sekundaer:hover::after,
.sk-hero__sekundaer:focus-visible::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.sk-hero__sekundaer,
	.sk-hero__sekundaer::after {
		transition: none;
	}
}

/* Scroll-Marker rechts */
.sk-hero__rail {
	position: absolute;
	right: clamp(22px, 4vw, 56px);
	top: 50%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: translateY(-50%);
}

.sk-hero__rail span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(248, 245, 239, 0.3);
	transition: background-color 0.35s, transform 0.35s;
}

.sk-hero__rail span.is-active {
	background: var(--sk-gold);
	transform: scale(1.5);
}

/* Mobil: kürzere Strecke, Hochformat-Fokus, Verlauf von unten */
@media (max-width: 767px) {
	.sk-hero {
		height: 340svh;
	}

	.sk-hero__layer img {
		object-position: var(--sk-focus-m);
		transform-origin: var(--sk-focus-m);
	}

	.sk-hero__scrim {
		background: linear-gradient(
			to top,
			rgba(10, 31, 68, 0.92) 0%,
			rgba(10, 31, 68, 0.7) 38%,
			rgba(10, 31, 68, 0.1) 70%,
			rgba(10, 31, 68, 0) 100%
		);
	}

	.sk-hero__step {
		bottom: max(calc(10svh + 28px), 108px); /* Luft über dem WhatsApp-Knopf (unten links, fixed) */
		max-width: 88vw;
	}

	.sk-hero__rail {
		right: 14px;
	}
}

/* Leistungsbereich (Block-Gruppe mit Klasse sk-leistungen), volle Breite, Inhalt max. --sk-inhalt */
.sk-leistungen {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 96px max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2)) 112px;
	background: var(--sk-creme);
}

/* Direkt nach dem Hero: als Blatt mit runden Ecken über die letzte Bildschirmhöhe schieben */
.sk-hero + .sk-leistungen,
.sk-hero + .sk-ablauf {
	margin-top: -100svh; /* die folgenden Abschnitte (z. B. .sk-ablauf) decken den Hero mit ab */
	border-radius: 28px 28px 0 0;
	box-shadow: 0 -24px 60px rgba(10, 31, 68, 0.25);
}

/* Reduced Motion: erstes Bild statisch, kein Zoom, kein Blatt-Übergang */
@media (prefers-reduced-motion: reduce) {
	.sk-hero {
		height: auto;
	}

	.sk-hero__stage {
		position: relative;
	}

	.sk-hero__layer:not(:first-child),
	.sk-hero__step:not(:first-of-type),
	.sk-hero__rail,
	.sk-hero__dip,
	.sk-hero__shade {
		display: none;
	}

	.sk-hero + .sk-leistungen,
	.sk-hero + .sk-ablauf {
		margin-top: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.sk-hero__cta {
		transition: none;
	}
}