/*
 * Über uns — Header. Full-Bleed-Foto der drei Gründer in echten Farben (kein Duotone —
 * ein erster Anlauf hatte einen Jade-Farbverlauf per mix-blend-mode:color über ein
 * entsättigtes Foto gelegt, auf Nutzer-Wunsch wieder entfernt), Text unten links/rechts
 * gesplittet (Referenz: clubathletic.co/about, dort sitzt "THE STORY" + Headline unten
 * links, eine zweite, kürzere Aussage unten rechts).
 *
 * Pinned Photo statt Scroll-Away (Nutzer-Vorgabe, weicht bewusst vom Referenz-Video ab —
 * dort scrollt das Foto mit weg, hier bleibt es stehen): .nn-au-header ist 1,25 Viewport-
 * Höhen hoch (125svh) und liefert damit den Scroll-"Weg", über den .nn-au-header-pin
 * (position:sticky, 100svh) am oberen Rand stehen bleibt, während .nn-au-header-content
 * (normal positioniert, NICHT sticky) ganz regulär mit der Seite wegscrollt. Parallel dazu
 * verdunkelt sich das gepinnte Foto scroll-gekoppelt (assets/js/ueber-uns-header.js) — Text-
 * Exit und Fade laufen also gleichzeitig über dieselbe Scroll-Distanz, nicht nacheinander.
 * Sobald die 125svh durchgescrollt sind, ist die Ebene volldeckend in --au-fade-color
 * (== --bg der folgenden ueber-uns-intro.css-Section) und die Sticky-Fixierung löst sich
 * genau in dem Moment, in dem die nächste Section (bereits derselben Farbe) übernimmt —
 * kein sichtbarer Bruch.
 *
 * Bugfix beim ursprünglichen Umbau entdeckt: die alte Datei nutzte
 * `mix-blend-mode: var(--grain-blend)`, ohne --grain-blend je selbst zu deklarieren (auch
 * nicht global in style.css) — eine ungültige Custom Property fällt bei mix-blend-mode
 * lautlos auf ihren Ausgangswert `normal` zurück, exakt derselbe Fehlerklasse wie der
 * dokumentierte --jade-light-Bug in hero.css. Hier jetzt lokal deklariert (Konvention aus
 * cro.css: overlay/soft-light).
 */
.nn-au-header,
.nn-au-header *,
.nn-au-header *::before,
.nn-au-header *::after {
	box-sizing: border-box;
}

.nn-au-header {
	/* Motion-Persönlichkeit "Physical" (awwwards-motion-Skill) — eine Kurve reicht hier,
	   es gibt keine Hover/Press-Interaktion im Header selbst, nur den Entry. */
	--spring-snappy: linear(
		0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%,
		0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26.0%,
		1.079 30.3%, 1.049 36.0%, 1.024 42.6%, 1.011 50.3%,
		1.004 59.2%, 1.001 69.3%, 1
	);

	--jade-light: #b7e5ba;
	--jade-mid: #5ca87c;
	--jade: #288760;
	--jade-dark: #1a5140;

	/* Light ist der unbewachte Default, Dark die einzige bewachte Variante — siehe
	   "Light/Dark-Konvention" in nav.css. Literal-Werte statt --ink/--bg: der Text sitzt
	   direkt auf einem Foto+Scrim, nicht auf der Seiten-Fläche, braucht also seine eigenen
	   Tokens (gleiche Logik wie .nn-headline in hero.css, dort ebenfalls literal #000/#fff). */
	--au-text: #06110c;
	--au-accent: var(--jade);
	--au-scrim-0: rgba(247, 249, 247, 0.95);
	--au-scrim-1: rgba(247, 249, 247, 0.6);
	--au-photo-brightness: 0.98;
	--grain-blend: overlay;
	/* Deckfarbe der Scroll-Verdunkelung (siehe .nn-au-header-fade unten) — bewusst exakt der
	   --bg-Wert von ueber-uns-intro.css (#ffffff), nicht --au-scrim-0: die Section danach
	   soll nahtlos anschließen, nicht nur "irgendwie dunkler" werden. */
	--au-fade-color: #ffffff;

	position: relative;
	height: 125svh;
	margin: 0;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-au-header {
		--au-text: #f5f7f5;
		--au-accent: var(--jade-light);
		--au-scrim-0: rgba(6, 10, 8, 0.92);
		--au-scrim-1: rgba(6, 10, 8, 0.48);
		--au-photo-brightness: 0.8;
		--grain-blend: soft-light;
		--au-fade-color: #0b0c0c;
	}
}
html[data-theme="dark"] .nn-au-header {
	--au-text: #f5f7f5;
	--au-accent: var(--jade-light);
	--au-scrim-0: rgba(6, 10, 8, 0.92);
	--au-scrim-1: rgba(6, 10, 8, 0.48);
	--au-photo-brightness: 0.8;
	--grain-blend: soft-light;
	--au-fade-color: #0b0c0c;
}

/* Gepinnte Fläche: bleibt für die Dauer der 125svh-Scroll-Distanz des Elternelements am
   oberen Rand stehen (position:sticky braucht diesen "Überschuss" beim Elternelement, sonst
   gibt es nichts, wodurch es stehen bleiben könnte). isolation:isolate hält die eigene
   Stacking-Context für Foto/Fade/Korn/Scrim zusammen, overflow:hidden clippt das
   Ken-Burns-scale() des Fotos an den 100svh-Rand. */
.nn-au-header-pin {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	isolation: isolate;
}

/* Foto: echte Farben, nur ein leichter Kontrast/Helligkeits-Grade (kein grayscale/Duotone
   mehr). --au-photo-brightness dimmt das Foto im Dark Mode etwas, damit der weiße/helle Text
   darüber lesbar bleibt, ohne dass der Scrim allein die ganze Arbeit machen muss. Dezenter
   Ken-Burns-Einzug beim Laden (transform-only, GPU-billig) — kein Loop, läuft einmal aus. */
.nn-au-header-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 24%;
	filter: contrast(1.05) brightness(var(--au-photo-brightness));
	transform: scale(1.08);
	animation: nnAuPhotoIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes nnAuPhotoIn {
	to { transform: scale(1); }
}

/* Scroll-gekoppelte Verdunkelung, läuft PARALLEL zum Wegscrollen von .nn-au-header-content
   (Nutzer-Vorgabe), nicht erst danach: --au-fade geht von 0 (Seitenanfang) auf 1 genau dann,
   wenn die 125svh-Scroll-Distanz des Elternelements durchgescrollt ist — derselbe Moment, in
   dem sich .nn-au-header-pin löst und die nächste Section übernimmt (assets/js/
   ueber-uns-header.js berechnet den Fortschritt über die tatsächliche Pin-Reichweite, siehe
   dortiger Kommentar). Deckelung bei 1 statt z. B. 0.94: soll VOLLDECKEND in --au-fade-color
   enden (== --bg der folgenden Section), kein bleibender Rest des Fotos — bewusste Abweichung
   vom Referenz-Video (dort bleibt ein hauchdünner Rest sichtbar), da der Nutzer explizit
   einen nahtlosen Übergang in die volle Hintergrundfarbe der nächsten Section wollte. Ohne JS
   (oder bei prefers-reduced-motion) bleibt --au-fade auf seinem Default 0 — der Effekt fällt
   dann lautlos weg, der Header bleibt einfach durchgehend sichtbar. */
.nn-au-header-fade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--au-fade-color);
	opacity: var(--au-fade, 0);
	pointer-events: none;
}

.nn-au-header-grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0.16;
	mix-blend-mode: var(--grain-blend);
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scrim: bodenlastig, da der gesamte Text unten sitzt (Referenz clubathletic.co/about) —
   oben bleibt das Foto fast unverändert sichtbar, unten sorgt der Verlauf für Kontrast zum
   Text. --au-scrim-0/-1 sind bereits theme-abhängig (siehe Token-Block oben). */
.nn-au-header-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(0deg, var(--au-scrim-0) 0%, var(--au-scrim-1) 38%, transparent 68%);
}

/* NICHT sticky (im Unterschied zu .nn-au-header-pin) — sitzt normal positioniert am Anfang
   des 125svh-hohen .nn-au-header und scrollt dadurch ganz regulär mit der Seite weg, während
   das Foto dahinter stehen bleibt. Startet bei top:0 relativ zu .nn-au-header, deckt exakt
   die ersten 100svh ab — optisch also am Seitenanfang exakt deckungsgleich mit
   .nn-au-header-pin darunter, genau wie vor diesem Umbau. justify-content:flex-end ersetzt
   das frühere align-items:flex-end auf dem (jetzt entfernten) Flex-Parent .nn-au-header. */
.nn-au-header-content {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(1.25rem, 3vh, 2rem);
	padding: 0 clamp(1.5rem, 5vw, 5.25rem) clamp(2.75rem, 7vh, 5.5rem);
}

.nn-au-header-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	align-self: flex-start;
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--au-text);
	border: 1px solid color-mix(in srgb, var(--au-text) 28%, transparent);
	border-radius: 999px;
	padding: 0.55em 1.15em;
	background: color-mix(in srgb, var(--au-scrim-0) 55%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.nn-au-header-dot {
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--au-accent);
	flex: none;
}

/* Bewusst kein WP-Layout-Attribut auf dieser Gruppe (siehe Kommentar im Pattern-File) —
   core/group ohne "layout" rendert plain flow, das eigene Flexbox-CSS hier gewinnt dadurch
   ohne Spezifitäts-Kampf gegen core-generierte Layout-Klassen (Lehre aus CLAUDE.md
   Abschnitt 7, "core/group ohne explizites Layout"). */
.nn-au-header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 4rem);
	width: 100%;
}

.nn-au-header-h1 {
	flex: 1 1 auto;
	max-width: 14ch;
	margin: 0;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 0.98;
	font-size: clamp(2.75rem, 8vw, 6.75rem);
	color: var(--au-text);
	text-wrap: balance;
}
.nn-au-header-h1 em {
	font-style: italic;
	font-weight: 700;
	color: var(--au-accent);
}

.nn-au-header-diff {
	flex: 0 1 34ch;
	margin: 0 0 0.35em;
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	font-weight: 600;
	line-height: 1.5;
	color: var(--au-text);
	text-align: right;
	text-wrap: pretty;
}

@media (max-width: 720px) {
	.nn-au-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
	.nn-au-header-diff {
		text-align: left;
		flex-basis: auto;
	}

	/* Mobile-Sonderfall: das Foto zeigt alle drei Gründer nur auf einem Streifen, der
	   knapp 80 % der Bildbreite einnimmt (links/rechts Fenster/Regal als Rahmen). Bei
	   voller Viewport-Höhe (wie auf Desktop) ist der Container so viel schmaler als
	   hoch, dass object-fit:cover den Großteil der Breite wegschneidet — sichtbar blieb
	   nur die mittlere Person. object-position hilft hier nicht (wählt nur, WELCHER
	   Ausschnitt sichtbar ist, nicht WIE VIEL Breite erhalten bleibt). Fix: Container
	   bekommt auf Mobile das native Foto-Seitenverhältnis (aspect-ratio statt
	   height:100svh) — dadurch schneidet cover nichts mehr von der Breite weg, alle drei
	   bleiben garantiert im Bild. Wird dadurch zu einem kürzeren Foto-Banner statt
	   Vollbild-Overlay; der Text rutscht folgerichtig darunter in den normalen
	   Textfluss statt als Overlay darüber (siehe .nn-au-header-content unten) — der
	   Scroll-Pin-/Verdunkelungs-Effekt ergibt ohne die 125svh-Laufstrecke keinen Sinn
	   mehr und wird komplett deaktiviert (siehe assets/js/ueber-uns-header.js). */
	.nn-au-header {
		height: auto;
		/* Die Hauptnav (.nn-nav) ist position:fixed und schwebt über dem Seiteninhalt —
		   auf Desktop bewusst so (Foto läuft absichtlich unter ihr durch, siehe
		   Dateikopf-Kommentar). Auf dem deutlich kürzeren Mobile-Banner blieben Köpfe
		   dadurch aber hinter der Nav verdeckt. Nutzer-Vorgabe: nicht komplett darunter
		   starten (wirkte zu abgesetzt), sondern nur etwa zur Hälfte unter der Nav
		   durchlaufen — die Mobile-Nav ist ca. 4.5rem hoch (.nn-nav {
		   padding-top:.75rem; padding-bottom:.75rem } in nav.css), daher die Hälfte. */
		padding-top: 2.25rem;
	}
	.nn-au-header-pin {
		/* relative statt static: bleibt Positionierungsrahmen für die absolut
		   positionierten Kinder (Foto/Fade/Korn/Scrim, alle position:absolute;inset:0),
		   sonst "entkommen" die zum nächsten positionierten Vorfahren (.nn-au-header,
		   position:relative) und strecken sich über dessen VOLLE Auto-Höhe (Foto +
		   Text zusammen) statt nur über die hier vorgesehene Banner-Höhe — genau der
		   Bug, der Foto und Text übereinander legte und den Seitenverhältnis-Fix
		   unten wirkungslos machte (gefunden per Live-DOM-Check, nicht nur vermutet). */
		position: relative;
		height: auto;
		aspect-ratio: 6 / 5;
	}
	.nn-au-header-scrim {
		/* Andere Aufgabe als auf Desktop: dort sorgt der Scrim für Kontrast unter dem
		   Text-Overlay, hier liegt der Text nicht mehr auf dem Foto (siehe
		   .nn-au-header-content unten) — der Verlauf blendet stattdessen das untere
		   Ende des Foto-Banners weich in die Hintergrundfarbe der Seite über, statt
		   hart abzuschneiden. --au-fade-color ist bereits exakt auf die Hintergrund-
		   farbe der folgenden Section abgestimmt (siehe Token-Block oben). */
		background: linear-gradient(0deg, var(--au-fade-color) 0%, transparent 25%);
	}
	.nn-au-header-content {
		position: static;
		height: auto;
		padding: clamp(2rem, 8vw, 3rem) clamp(1.5rem, 5vw, 2rem);
	}
}

/* Große Screens (ab ca. 1900px): Obergrenzen angehoben, gleiche Konvention wie der Rest des
   Themes (siehe Kopf von cro.css) — vw-Koeffizient bleibt unangetastet. */
@media (min-width: 1900px) {
	.nn-au-header-h1 { font-size: clamp(2.75rem, 8vw, 9rem); }
	.nn-au-header-diff { font-size: clamp(1rem, 1.3vw, 1.6rem); }
}

/* ==========================================================================
   ENTRY-CHOREOGRAFIE (awwwards-motion-Skill) — Foto animiert für sich (Ken-Burns oben),
   Text-Ebene staffelt zusätzlich per .nn-enter, identische Mechanik wie hero.css.
   ========================================================================== */
.nn-enter {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(3px);
	animation: nnAuHeaderEnter 0.7s var(--spring-snappy) both;
}
.nn-au-header-kicker.nn-enter { animation-delay: 80ms; }
.nn-au-header-h1.nn-enter { animation-delay: 200ms; }
.nn-au-header-diff.nn-enter { animation-delay: 340ms; }
@keyframes nnAuHeaderEnter {
	to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
	.nn-au-header-photo { animation: none; transform: scale(1); }
	.nn-enter { animation: none; opacity: 1; transform: none; filter: none; }
}