/* ==========================================================================
   Hero — asymmetrisches Split-Grid, funktionale 3D-Tiefe (kein Zentrieren)
   ========================================================================== */

.hero {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 4rem) var(--space-xl);
	overflow: clip;
}

.hero-grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 981px) {
	.hero-grid { grid-template-columns: 1fr 0.92fr; }
}

.hero-copy { max-width: 34rem; }

.hero-copy h1 { margin-bottom: var(--space-sm); }
.hero-copy h1 em {
	font-style: normal;
	color: var(--color-accent);
}

.hero-copy .lede { margin-bottom: var(--space-md); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-line);
}
.hero-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: var(--fw-medium); color: var(--color-ink-soft); }
.hero-trust-item .icon { color: var(--color-accent); width: 18px; height: 18px; }

/* Bildseite: perspektivischer Rahmen + Parallax-Layer */
.hero-visual {
	position: relative;
	perspective: 1400px;
}

.hero-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border: 1.5px solid var(--color-ink);
	background: var(--color-ink);
	transform-style: preserve-3d;
	transform: rotateX(1.5deg) rotateY(-3deg);
	transition: transform var(--dur-slow) var(--ease-out);
	will-change: transform;
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-in-out);
}
.hero-slide.is-active { opacity: 1; z-index: 1; }

.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	transition: transform 6.5s var(--ease-out);
}
.hero-slide.is-active img { transform: scale(1); }

.hero-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 20, 20, 0) 55%, rgba(16, 20, 20, 0.55) 100%);
	pointer-events: none;
	z-index: 2;
}

.hero-dots {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	display: flex;
	gap: 0.5rem;
	z-index: 3;
}
.hero-dots button {
	width: 22px;
	height: 3px;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	padding: 0;
	transition: background var(--dur-base) var(--ease-out);
}
.hero-dots button.is-active { background: #fff; }

.hero-frame-tag {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	font-weight: var(--fw-medium);
	z-index: 3;
	max-width: 60%;
	text-align: right;
	justify-content: flex-end;
}
.hero-frame-tag .icon { color: #fff; }

.hero-badge {
	position: absolute;
	top: -1.25rem;
	right: -1.25rem;
	background: var(--color-accent);
	color: var(--color-on-accent);
	padding: 1.1rem 1.3rem;
	box-shadow: var(--shadow-hard);
	transform: translateZ(48px);
	text-align: center;
	line-height: 1.15;
}
.hero-badge strong { display: block; font-size: 1.6rem; font-weight: var(--fw-black); }
.hero-badge span { display: block; font-size: 0.72rem; letter-spacing: 0.04em; opacity: 0.9; }

@media (max-width: 900px) {
	.hero-badge { top: -1rem; right: 1rem; padding: 0.85rem 1rem; }
	.hero-badge strong { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-frame { transform: none; }
}

/* Kennzahlen-Leiste */
.stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--color-line);
	border: 1px solid var(--color-line);
}
.stat-item {
	background: var(--color-surface);
	padding: var(--space-sm) var(--space-xs);
	text-align: center;
}
.stat-item strong { display: block; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: var(--fw-black); color: var(--color-accent); letter-spacing: -0.02em; }
.stat-item span { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--color-ink-soft); }