/*
 * Über uns — Intro. Follows the system colour scheme (like Hero/CTA-Band do on Home),
 * unlike Leistungen/Team-Teaser which stay permanently light — the whole Über-uns page is
 * meant to re-theme together, so every section here needs its own explicit --bg (a
 * "transparent" section here would otherwise show the page's implicit white through in dark
 * mode, breaking the illusion). Self-contained tokens, not shared across sibling patterns.
 *
 * Große Screens (ab ca. 1900px, z. B. 2560x1440): alle clamp()-Obergrenzen sowie die
 * Container-/Spaltenbreiten wurden analog zu cro.css angehoben (Row 1400px→1750px, linke
 * Spalte 640px→780px, Vision-Karte 420px→500px usw.), der vw/vh-Koeffizient blieb dabei
 * jeweils unverändert, damit die Sektion über den bisherigen Plateau-Punkt hinaus weiterwächst
 * statt auf sehr breiten Screens frühzeitig einzufrieren.
 *
 * Zweite Anhebung (Angleichung an cro.css & Co., die mit .wrap 2200px breiter laufen):
 * .nn-au-intro-row 1750px→2200px, alle übrigen clamp()-Obergrenzen um denselben Faktor
 * (~1.257) angehoben — Koeffizient und Minimum unverändert. Linke Spalte (780px) und
 * Vision-Karte (500px) sind Inhaltsbreiten-Caps, keine Viewport-Fill-Caps, und blieben
 * bewusst unverändert.
 */
.nn-au-intro,
.nn-au-intro *,
.nn-au-intro *::before,
.nn-au-intro *::after {
	box-sizing: border-box;
}

.nn-au-intro {
	--bg: #ffffff;
	--ink-on-paper: #12211a;
	--ink-on-paper-muted: #5c6d64;
	--jade: #288760;
	--vision-bg: #eef1ee;
	--vision-shadow: rgba(18, 33, 26, 0.1);

	background: var(--bg);
	padding: clamp(3rem, 9vh, 9.75rem) clamp(1.5rem, 5vw, 6.6rem);
	color: var(--ink-on-paper);
}

/* 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 — this section sits right below the header
   photo's dark scrim, so it should read as a continuation of that same near-black, not a
   different dark tone. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-au-intro {
		--bg: #0b0c0c;
		--ink-on-paper: #e7e9ec;
		--ink-on-paper-muted: #b0b5bf;
		--jade: #288760;
		--vision-bg: #171b19;
		--vision-shadow: rgba(0, 0, 0, 0.5);
	}
}
html[data-theme="dark"] .nn-au-intro {
	--bg: #0b0c0c;
	--ink-on-paper: #e7e9ec;
	--ink-on-paper-muted: #b0b5bf;
	--jade: #288760;
	--vision-bg: #171b19;
	--vision-shadow: rgba(0, 0, 0, 0.5);
}

.nn-au-intro-row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(2rem, 5vw, 7.25rem);
	max-width: 2200px;
	margin-left: auto;
	margin-right: auto;
}

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

/* starts about a third of the way down the left column and, thanks to its own generous
   padding, reads as running a bit past the left column's bottom edge too — the "abgehoben"
   card effect from the reference screenshot, minus the pastel colour (grey/jade-tinted
   instead, so it holds up in both colour schemes). */
.nn-au-intro-vision {
	flex: 1 1 38%;
	max-width: 500px;
	margin-top: clamp(3rem, 22vh, 14.75rem);
	background: var(--vision-bg);
	border-radius: 1.75rem;
	padding: clamp(2rem, 4vw, 4.4rem);
	box-shadow: 0 30px 60px -30px var(--vision-shadow);
}
.nn-au-intro-vision-kicker {
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-size: clamp(1.3rem, 2.4vw, 2.75rem);
	color: var(--jade);
	margin: 0 0 1.25rem;
}
.nn-au-intro-vision-text {
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--ink-on-paper);
	margin: 0 0 1.1rem;
}
.nn-au-intro-vision-text:last-child {
	margin-bottom: 0;
}

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

.nn-au-intro-h2 {
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	font-size: clamp(2rem, 4.5vw, 4.9rem);
	color: var(--ink-on-paper);
	margin-top: 0;
	margin-bottom: 1rem;
}

.nn-au-intro-lede {
	font-weight: 600;
	font-size: clamp(1.1rem, 2vw, 2.2rem);
	color: var(--jade);
	margin-top: 0;
	margin-bottom: clamp(1.75rem, 4vh, 4.1rem);
}

.nn-au-intro-text {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--ink-on-paper-muted);
	margin-top: 0;
	margin-bottom: 1.25rem;
	/* justified body copy, the way it's usually done well on the web: text-align-last:left
	   keeps the final (often short) line of each paragraph from being stretched out to full
	   width, and hyphens:auto (needs the page's lang="de-DE" from WP) avoids the large,
	   uneven word-gaps ("rivers") that plain justify produces without hyphenation */
	text-align: justify;
	text-align-last: left;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.nn-au-intro-text:last-of-type {
	margin-bottom: 2rem;
}

.nn-au-intro-actions.wp-block-buttons {
	display: flex;
	justify-content: flex-start;
}
/* Button itself used to have its own nn-au-intro-cta styling here (white text, dark-green
   hover) instead of the site-wide unified .nn-cta component (fixed jade bg, dark text,
   light-jade hover — see "CTA-Buttons sind theme-weit vereinheitlicht" in CLAUDE.md
   Abschnitt 4) — missed during that unification pass. Now uses .nn-cta from hero.css
   directly, nothing left to style here. */

/* Breadcrumb navigation */
.nn-au-intro .crumbs {
	list-style: none;
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
	font-size: clamp(.75rem, .45vw, .95rem);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.nn-au-intro .crumbs li {
	display: flex;
	align-items: center;
	gap: .45rem;
}
.nn-au-intro .crumbs a {
	color: var(--ink-on-paper-muted);
	text-decoration: none;
}
.nn-au-intro .crumbs a:hover, .nn-au-intro .crumbs a:focus-visible {
	color: var(--jade);
	transition: color .2s ease;
}
.nn-au-intro .crumbs [aria-current="page"] {
	color: var(--ink-on-paper);
	font-weight: 600;
}
.nn-au-intro .crumbs__sep {
	opacity: .5;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-au-intro .crumbs a {
		color: var(--ink-on-paper-muted);
	}
	html:not([data-theme="light"]) .nn-au-intro .crumbs [aria-current="page"] {
		color: var(--ink-on-paper);
	}
}
[data-theme="dark"] .nn-au-intro .crumbs a {
	color: var(--ink-on-paper-muted);
}
[data-theme="dark"] .nn-au-intro .crumbs [aria-current="page"] {
	color: var(--ink-on-paper);
}