/*
 * Home — Intro. Sits right below the Hero (dark ground / paper, system-scheme-aware) and
 * above Leistungen (permanently light), so — like Über-uns-Intro right below its own dark
 * header photo — this section needs its own explicit --bg rather than relying on page-
 * implicit white, or dark mode would show a white gap here. Deliberately a copy of
 * ueber-uns-intro.css (own class prefix, own tokens) rather than a shared stylesheet — see
 * the "Title: Home – Intro" comment in patterns/home-intro.php for why.
 *
 * Large screens (roughly 1900px and up, e.g. 2560x1440): the clamp() ceilings for font
 * size, padding, margin and gap below, plus the fixed max-width caps on the row, the left
 * text column and the vision card, were all raised (analogous to the note at the top of
 * cro.css), with the vw/vh coefficient in every clamp left unchanged. That lets the section
 * keep growing past the width where the old, tighter ceilings already plateaued, instead of
 * freezing early and leaving excess space around it on very wide screens.
 *
 * 2026-08-28: raised again to match the CRO-family pages (cro.css/google-ads.css/
 * social-ads.css), whose own .wrap caps at 2200px. Row max-width 1680px to 2200px
 * (ratio ~1.31), the left column and vision card max-widths and every clamp() ceiling
 * below scaled by the same ratio, min and vw/vh coefficient left untouched.
 *
 * 2026-08-31: fixed a real misalignment bug on large screens (found by the user around
 * 2560px width — H2 sat further left than the row below it). Root cause: .nn-home-intro
 * had NO max-width of its own, only vw-based padding that freezes at its clamp() ceiling
 * around 2179px viewport width; .nn-home-intro-h2 sat flush against that padding, while
 * .nn-home-intro-row carried its OWN separate max-width:2200px + margin:auto nested inside
 * the already-padded area — two independent centering boxes that only happened to agree
 * while the padded area was narrower than 2200px. Above ~2418px viewport width the padded
 * area exceeds 2200px, the row starts centering itself further inward while the H2 stays
 * put, and the gap between them grows with viewport width. Fixed by giving H2 + row a
 * shared .nn-home-intro-inner wrapper (new in patterns/home-intro.php) that alone carries
 * max-width:2200px + margin:auto + the horizontal padding — same single-container pattern
 * #leistungen already used correctly (see leistungen.css). .nn-home-intro itself keeps
 * only vertical padding + its own --bg (still needs that, see note above, for the dark-mode
 * hand-off to Hero) but no longer participates in horizontal centering itself.
 */
.nn-home-intro,
.nn-home-intro *,
.nn-home-intro *::before,
.nn-home-intro *::after {
	box-sizing: border-box;
}

.nn-home-intro {
	--bg: #ffffff;
	--ink-on-paper: #12211a;
	--ink-on-paper-muted: #5c6d64;
	--jade: #288760;
	--jade-mid: #5ca87c;
	--jade-dark: #1a5140;
	--line: #dfe8e2;
	--card: #ffffff;
	--vision-bg: #eef1ee;
	--vision-shadow: rgba(18, 33, 26, 0.1);

	background: var(--bg);
	/* Oberes Padding exakt auf denselben Wert wie #leistungen (leistungen.css) gebracht,
	   damit "Unser Ansatz" und "Was wir für dich in Bewegung setzen" mit demselben Abstand
	   zur Nav/vorherigen Section beginnen (Nutzer-Vorgabe). Unteres Padding bleibt kleiner
	   (voriger Wunsch: Weißraum zur folgenden Section gering halten). Nur noch vertikal —
	   horizontales Padding + Zentrierung liegen jetzt auf .nn-home-intro-inner (siehe
	   Kommentar oben), damit --bg weiterhin volle Breite abdeckt statt nur die 2200px-Box. */
	padding: clamp(1.5rem, 4vh, 4rem) 0;
	color: var(--ink-on-paper);
}

/* Alleinige Zentrierungs-/Breiten-Instanz für H2 + Row (siehe Fix-Kommentar oben) — dasselbe
   Ein-Container-Muster wie .nn-section in leistungen.css. */
.nn-home-intro-inner {
	max-width: 2200px;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 6.81rem);
}

/* light is the unconditional default above, dark is the only guarded/explicit variant —
   see the "Light/Dark-Konvention" comment in nav.css. matches Footer/CTA-Band's black
   exactly, not Hero's jade-tinted --ground, so it reads as a continuation of that same
   near-black rather than a different dark tone. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-home-intro {
		--bg: #0b0c0c;
		--ink-on-paper: #e7e9ec;
		--ink-on-paper-muted: #b0b5bf;
		--jade: #288760;
		--jade-mid: #5ca87c;
		--jade-dark: #1a5140;
		--line: #22362c;
		--card: #111815;
		--vision-bg: #171b19;
		--vision-shadow: rgba(0, 0, 0, 0.5);
	}
}
html[data-theme="dark"] .nn-home-intro {
	--bg: #0b0c0c;
	--ink-on-paper: #e7e9ec;
	--ink-on-paper-muted: #b0b5bf;
	--jade: #288760;
	--jade-mid: #5ca87c;
	--jade-dark: #1a5140;
	--line: #22362c;
	--card: #111815;
	--vision-bg: #171b19;
	--vision-shadow: rgba(0, 0, 0, 0.5);
}

/* kein justify-content:center (Git-Historie) mehr — auf Screens, auf denen die max-width-
   Deckel von .nn-home-intro-left/-vision greifen (Zeile bleibt schmaler als der Container),
   hätte das die ganze Zeile samt Text mittig gerückt statt linksbündig zur H2 (Nutzer-
   Feedback 2026-08-31). flex-grow:1 auf beiden Kindern füllt die Breite ohnehin aus, sobald
   die Deckel nicht greifen — flex-start (Default) reicht für beide Fälle. */
.nn-home-intro-row {
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 5vw, 7.66rem);
}

.nn-home-intro-left {
	flex: 1 1 56%;
	max-width: 1006px;
}

.nn-home-intro-vision {
	flex: 1 1 38%;
	max-width: 655px;
	background: var(--vision-bg);
	border-radius: 1.75rem;
	padding: clamp(2rem, 4vw, 4.58rem);
	box-shadow: 0 30px 60px -30px var(--vision-shadow);
}
.nn-home-intro-vision-kicker {
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-size: clamp(1.3rem, 2.4vw, 2.88rem);
	color: var(--jade);
	margin: 0 0 1.25rem;
}
.nn-home-intro-vision-text {
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--ink-on-paper);
	margin: 0 0 1.1rem;
	text-align: justify;
	text-align-last: left;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.nn-home-intro-vision-text:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.nn-home-intro-row {
		flex-direction: column;
	}
	.nn-home-intro-left,
	.nn-home-intro-vision {
		max-width: none;
	}
	.nn-home-intro-vision {
		margin-top: 2.5rem;
	}
}

.nn-home-intro-h2 {
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-transform: uppercase;
	font-size: clamp(2rem, 4.5vw, 5.11rem);
	color: var(--ink-on-paper);
	margin-top: 0;
	margin-bottom: clamp(1.75rem, 4vh, 4.26rem);
}

.nn-home-intro-text {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--ink-on-paper-muted);
	margin-top: 0;
	margin-bottom: 1.25rem;
	text-align: justify;
	text-align-last: left;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.nn-home-intro-text:last-of-type {
	margin-bottom: 2rem;
}
/* Interne Verlinkung der fett hervorgehobenen Leistungsbegriffe — gleiche Konvention
   wie .warum__link auf den Leistungsseiten: eigene Klasse, überschreibt nur die Farbe
   mit dem Akzent-Grün, Fettschrift kommt weiterhin vom umschließenden <strong>. */
.nn-home-intro-link {
	color: var(--jade);
}


.nn-home-intro-actions.wp-block-buttons {
	display: flex;
	justify-content: flex-start;
}
/* button itself now uses the shared .nn-cta style (hero.css) instead of its own
   home-intro-specific colours, so every CTA button on the page matches (fixed jade
   background + dark text in both Light and Dark Mode). */

/* Nutzer-Wunsch: Blocksatz (.nn-home-intro-vision-text ist justify+hyphens, siehe deren
   Basisregel weiter oben) wirkt auf schmalen Mobile-Spalten unruhig — große, ungleichmäßige
   Wortabstände und viele Trennstriche, weil pro Zeile nur wenige Wörter Platz haben. Auf
   breiteren Screens bleibt Blocksatz, dort sind die Zeilen lang genug für einen ruhigen
   Randausgleich. Bewusst als letzter Block in der Datei (nicht direkt bei den Basisregeln):
   dieselbe Spezifität wie die Basisregel, muss deshalb in der Cascade-Reihenfolge NACH ihr
   stehen, um sie zu überschreiben. Nur .nn-home-intro-vision-text ("Warum no noise"-Box) —
   .nn-home-intro-text ("Unser Ansatz") bleibt auf Nutzer-Wunsch auch mobile im Blocksatz. */
@media (max-width: 640px) {
	.nn-home-intro-vision-text {
		text-align: left;
		hyphens: none;
		-webkit-hyphens: none;
	}
}