/* ==========================================================================
   Homepage sections: Hero-Slider, Intro, Leistungen-Reihen, Bruch, Vertrauen
   ========================================================================== */

/* --- Hero slider: vollflächiges Bild, Text-Overlay unten links ----------- */
.hero-slider {
	position: relative;
	min-height: clamp(26rem, 78vh, 46rem);
	overflow: hidden;
	background: var(--primary);
}

.hero-slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 900ms var(--ease-out);
}

.hero-slide.is-active {
	z-index: 2;
	opacity: 1;
}

.hero-slide:not(.is-active) {
	pointer-events: none;
}

.hero-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, oklch(20% 0.05 230 / 0.78) 0%, oklch(20% 0.05 230 / 0.25) 42%, oklch(20% 0.05 230 / 0.05) 65%);
}

.hero-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 3.5rem);
	max-width: 720px;
	color: #fff;
	z-index: 2;
}

.hero-content .eyebrow {
	color: oklch(92% 0.03 155);
}

.hero-content h1 {
	color: #fff;
	margin-bottom: 0.4em;
}

.hero-content p {
	color: oklch(96% 0.01 90 / 0.92);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	max-width: 46ch;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.hero-phone-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid oklch(100% 0 0 / 0.4);
	padding-bottom: 0.15em;
	transition: border-color var(--dur-fast) var(--ease-out);
}

.hero-phone-link:hover {
	border-color: #fff;
}

.hero-dots {
	position: absolute;
	right: clamp(1.25rem, 5vw, 3.5rem);
	bottom: clamp(2.5rem, 7vw, 5.5rem);
	display: flex;
	gap: 0.6rem;
	z-index: 2;
}

.hero-dot {
	width: 28px;
	height: 2px;
	background: oklch(100% 0 0 / 0.35);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out);
}

.hero-dot.is-active {
	background: #fff;
}

/* --- Intro: ruhige, zentrierte Textspalte --------------------------------- */
.section-intro {
	padding-block: var(--space-m);
	text-align: center;
}

.section-intro .intro-inner {
	max-width: 54ch;
	margin-inline: auto;
}

.section-intro p {
	font-size: clamp(1.1rem, 1.03rem + 0.3vw, 1.3rem);
	color: var(--ink-soft);
	margin-inline: auto;
}

/* --- Leistungen: breite Einzelreihen statt Karten-Raster ------------------ */
.section-services {
	padding-block: var(--space-l);
}

.services-head,
.section-head {
	max-width: 62ch;
	margin-bottom: var(--space-s);
}

.service-rows {
	display: flex;
	flex-direction: column;
}

.service-row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gap);
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--line);
}

.service-rows .service-row:last-child {
	border-bottom: 1px solid var(--line);
}

.service-row:nth-child(even) .service-row-media {
	order: 2;
}

.service-row-media {
	grid-column: span 5;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius);
}

.service-row-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-out);
}

.service-row:hover .service-row-media img {
	transform: scale(1.03);
}

.service-row-body {
	grid-column: span 7;
}

.service-row-number {
	font-family: var(--font-display);
	font-size: var(--fs-small);
	color: var(--accent-dark);
	letter-spacing: 0.08em;
}

.service-row-body h3 {
	margin-top: 0.3em;
}

.service-row-body p {
	color: var(--ink-soft);
}

.service-row-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	text-decoration: none;
	color: var(--primary);
	border-bottom: 1.5px solid var(--line-strong);
	padding-bottom: 0.2em;
	transition: border-color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}

.service-row-link:hover {
	border-color: var(--accent-dark);
	gap: 0.75em;
}

.service-row-link .icon {
	width: 1.1em;
	height: 1.1em;
}

/* --- Bewusst überbreiter Bruch: vollflächiges Zitat ------------------------ */
.section-break {
	background: var(--sand);
	padding-block: var(--space-xl);
	text-align: center;
}

.section-break blockquote {
	max-width: 46ch;
	margin: 0 auto;
	font-family: var(--font-display);
	font-size: var(--fs-quote);
	font-weight: 400;
	font-style: italic;
	color: var(--primary);
	line-height: 1.3;
}

/* --- Vertrauen: asymmetrisches 12-Spalten-Grid, strukturell anders -------- */
.section-trust {
	padding-block: var(--space-l);
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gap);
	align-items: center;
}

.trust-media {
	grid-column: span 7;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius);
}

.trust-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trust-body {
	grid-column: span 5;
}

.trust-body p {
	color: var(--ink-soft);
}

.trust-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.trust-list li {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-weight: 600;
	color: var(--primary);
}

.trust-list .icon {
	color: var(--accent-dark);
}

/* --- Breakpoints ------------------------------------------------------------ */
@media (max-width: 900px) {
	.service-row-media,
	.service-row-body,
	.trust-media,
	.trust-body {
		grid-column: span 12;
	}

	.service-row:nth-child(even) .service-row-media {
		order: 0;
	}

	.trust-media {
		order: 0;
	}
}

@media (max-width: 600px) {
	.hero-content {
		max-width: none;
	}

	.hero-dots {
		display: none;
	}

	.section-break blockquote {
		font-size: clamp(1.5rem, 1.3rem + 2vw, 2rem);
	}
}