/*
 * Hero — sechster Anlauf (2026-09-02, siehe ausführlichen Kommentar in patterns/hero.php):
 * Grid-Papier-Hintergrund + kinetische Kopfzeile (durchgestrichenes "Rauschen") + abstrakte
 * Geometrie-Collage mit Cursor-Parallax, statt des vorherigen animierten Noise-Field-Canvas.
 * Tokens bleiben auf .nn-hero gescopt (wie in jedem vorherigen Anlauf).
 *
 * Große Screens (ab ca. 1900px): clamp()-Obergrenzen und max-width-Deckel folgen derselben
 * Konvention wie der Rest des Themes (siehe Kopf von cro.css) — vw/vh-Koeffizient bleibt
 * unangetastet, nur die Obergrenze wächst mit.
 */
.nn-hero,
.nn-hero *,
.nn-hero *::before,
.nn-hero *::after {
	box-sizing: border-box;
}

.nn-hero {
	/* Motion-Persönlichkeit "Physical" (awwwards-motion-Skill) — genau drei Kurven im
	   gesamten Hero, keine weiteren. */
	--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
	);
	--spring-smooth: linear(
		0, 0.004, 0.016 2.3%, 0.063 4.7%, 0.141 7.2%,
		0.25 9.9%, 0.601 16.5%, 0.815 21.0%, 0.929 25.2%,
		0.987 29.0%, 1.025 33.5%, 1.042 38.0%, 1.04 43.5%,
		1.027 50.0%, 1.013 57.5%, 1.005 67.0%, 1.001 79.0%, 1
	);
	--ease-snap: cubic-bezier(0.22, 1, 0.36, 1);

	/* raw palette values for both themes, always available regardless of which is active */
	--ground: #0a1410;
	--ink: #e7e9ec;
	--ink-muted: #b0b5bf;
	--line: #22362c;
	--jade-light: #b7e5ba;
	--jade-mid: #5ca87c;
	--jade: #288760;
	--jade-dark: #1a5140;
	--paper: #f7f9f7;
	--ink-on-paper: #12211a;
	--ink-on-paper-muted: #5c6d64;
	--line-light: #dfe8e2;

	/* light is the unconditional default — see the "Light/Dark-Konvention" comment in
	   nav.css for why only the dark variant ever needs a guard/override below */
	--hero-bg: var(--paper);
	--hero-ink: var(--ink-on-paper);
	--hero-ink-muted: var(--ink-on-paper-muted);
	--hero-line: var(--line-light);
	--hero-accent: var(--jade);
	--hero-card: #ffffff;

	position: relative;
	min-height: 100svh;
	background: var(--hero-bg);
	color: var(--hero-ink);
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	margin: 0;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-hero {
		--hero-bg: var(--ground);
		--hero-ink: var(--ink);
		--hero-ink-muted: var(--ink-muted);
		--hero-line: var(--line);
		--hero-accent: var(--jade-light);
		--hero-card: #111815;
	}
}
html[data-theme="dark"] .nn-hero {
	--hero-bg: var(--ground);
	--hero-ink: var(--ink);
	--hero-ink-muted: var(--ink-muted);
	--hero-line: var(--line);
	--hero-accent: var(--jade-light);
	--hero-card: #111815;
}

/* Animierter Noise-Field-Canvas, 2026-08-31 aus Staging zurückgeholt (Nutzer-Wunsch: "den
   Noise-Hintergrund der Stage-Startseite auch lokal hinterlegen"), mit etwas hellerer
   Grün-Palette in assets/js/noise-field.js. Ersetzt den zwischenzeitlichen Aurora-CSS-
   Hintergrund (Git-Historie) wieder durch das ursprüngliche Cursor-reaktive Canvas-Duo:
   .nn-canvas-color (grob, geblurrt, liefert die fließenden Farbflächen) + .nn-canvas-grain
   (fein, ungeblurrt, liefert die fotografische Textur). */
/* CSS-Fallback-Hintergrund auf dem Canvas-Element selbst: Canvas ist von Natur aus
   transparent, bis assets/js/noise-field.js seinen ersten Frame zeichnet — bis dahin
   schimmerte darunter kurz das pure --hero-bg durch (in Light Mode fast Weiß), ein
   sichtbarer Blitz vor der grünen Animation. Mehrere überlappende, weich auslaufende
   Radial-Blobs statt eines linearen Verlaufs: form-ähnlicher zum eigentlichen, organischen
   Noise-Field-Muster, damit der spätere Wechsel auf den echten Canvas-Inhalt nicht wie ein
   Umschalten zwischen zwei sichtbar unterschiedlichen Formen wirkt, sondern nahtlos ist.
   Deckender --jade-mid-Grundton dahinter, damit an KEINER Stelle Paper/Ground durchscheint.
   assets/js/noise-field.js zeichnet außerdem synchron (kein DOMContentLoaded-Umweg mehr,
   siehe dortiger Kommentar), damit die Lücke, die dieser Fallback überbrücken muss, so kurz
   wie möglich ist. */
.nn-canvas-color {
	position: absolute;
	inset: -6%;
	z-index: 0;
	width: 112%;
	height: 112%;
	display: block;
	pointer-events: none;
	filter: blur(22px);
	background:
		radial-gradient(circle at 28% 22%, var(--jade-light) 0%, transparent 52%),
		radial-gradient(circle at 78% 62%, var(--jade) 0%, transparent 58%),
		radial-gradient(circle at 48% 88%, var(--jade-mid) 0%, transparent 60%),
		var(--jade-mid);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-canvas-color {
		background:
			radial-gradient(circle at 28% 22%, var(--jade) 0%, transparent 52%),
			radial-gradient(circle at 78% 62%, var(--jade-dark) 0%, transparent 58%),
			radial-gradient(circle at 48% 88%, var(--jade-dark) 0%, transparent 60%),
			var(--ground);
	}
}
html[data-theme="dark"] .nn-canvas-color {
	background:
		radial-gradient(circle at 28% 22%, var(--jade) 0%, transparent 52%),
		radial-gradient(circle at 78% 62%, var(--jade-dark) 0%, transparent 58%),
		radial-gradient(circle at 48% 88%, var(--jade-dark) 0%, transparent 60%),
		var(--ground);
}
.nn-canvas-grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	opacity: 0.2;
	mix-blend-mode: overlay;
	image-rendering: pixelated;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.nn-hero-grid {
	position: relative;
	z-index: 2;
	flex: 1;
	/* align-self statt nur margin:0 auto: .nn-hero-grid ist Flex-Kind von .nn-hero
	   (flex-direction:column), auf der Cross-Achse eines solchen Kindes zentriert
	   margin:auto den Karton nicht zuverlässig, sobald max-width unter der verfügbaren
	   Breite liegt (Rest bleibt einseitig rechts stehen statt sich beidseitig zu verteilen).
	   Erst ab dem 1900px-Deckel wirklich sichtbar geworden (Nutzer-Feedback "Schrift
	   Richtung Mitte"), betraf aber jede Breite über max-width. */
	align-self: center;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(3rem, 7vh, 4.5rem);
	padding: clamp(6.5rem, 14vh, 10rem) clamp(1.5rem, 5vw, 5.2rem) clamp(3rem, 7vh, 4.5rem);
	width: 100%;
	max-width: 1720px;
	margin: 0 auto;
}
@media (min-width: 960px) {
	.nn-hero-grid {
		/* 55/45-Split (Nutzer-Vorgabe): fr-Einheiten statt %, damit die Ratio nach Abzug von
		   `gap` stimmt — % Spalten würden zusätzlich zum Gap aufsummiert überlaufen. */
		--hero-col-gap: clamp(1.5rem, 3.5vw, 3.5rem);
		grid-template-columns: 55fr 45fr;
		gap: var(--hero-col-gap);
		padding-top: clamp(5rem, 10vh, 7rem);
	}
}
/* Große Screens (ab ca. 1900px, z. B. 2560x1440): der 1720px-Deckel ließ auf sehr breiten
   Monitoren viel ungenutzte Fläche links/rechts stehen (Nutzer-Vorgabe: "die gesamte Fläche
   ausnutzen") — derselbe Skalierungs-Ansatz wie in cro.css/home-intro.css (vw/vh-Koeffizient
   jedes clamp() bleibt unangetastet, nur die Obergrenze wächst mit, Faktor ~1.3 wie dort).
   Betrifft nur den Content-Rahmen, nicht den Canvas-Hintergrund (der ist ohnehin schon
   100%-breit über ganz .nn-hero). Die Schrift-/Foto-Anteile dieses Blocks stehen bewusst
   NICHT hier, sondern jeweils direkt NACH der zugehörigen Basis-Regel weiter unten im File
   (.nn-headline/.nn-sub/.nn-hero-photo-parallax) — bei gleicher Spezifität gewinnt in CSS die
   später im Quelltext stehende Regel, unabhängig von der Media-Query-Verschachtelung; hier
   oben hätte die spätere, unbedingte Basis-Regel diesen Block sonst wieder überschrieben. */
@media (min-width: 1900px) {
	.nn-hero-grid {
		max-width: 2360px;
		/* asymmetrisch: mehr Platz links als rechts, damit die Text-Spalte spürbar von der
		   Kante wegrückt (Nutzer-Vorgabe "Schrift weiter Richtung Mitte"), statt wie vorher
		   symmetrisch beide Spalten gleich weit nach innen zu schieben. */
		padding-left: clamp(3rem, 8vw, 10rem);
		padding-right: clamp(1.5rem, 5vw, 6.8rem);
		/* kleinerer Spalten-Gap als vorher (war bis 5.8rem) — zieht das Foto näher an den
		   Text heran, also spürbar weiter nach links (Nutzer-Vorgabe), statt der vorher sehr
		   breiten Lücke dazwischen. Direkt auf die var gesetzt (nicht mehr zusätzlich per
		   festem `gap`-Shorthand überschrieben wie vorher — das machte --hero-col-gap
		   wirkungslos). */
		--hero-col-gap: clamp(1.5rem, 2.2vw, 2.75rem);
		gap: var(--hero-col-gap);
		/* Foto-Spalte bekommt mehr Anteil (war 55/45) — zusammen mit der größeren
		   max-width unten macht das die Bild-Card spürbar größer (Nutzer-Vorgabe). */
		grid-template-columns: 48fr 52fr;
	}
}

.nn-hero-copy {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	margin: 0;
}

/* ==========================================================================
   EYEBROW + HIGHLIGHT-MARKER-BOX
   ========================================================================== */
/* Nutzer-Vorgabe (wie .nn-headline/.nn-sub oben): Schwarz/Weiß statt gedämpftem Grau. */
.nn-payoff {
	display: block;
	font-size: clamp(0.75rem, 0.9vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #000000;
	margin: 0 0 clamp(0.9rem, 2vh, 1.25rem);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-payoff {
		color: #ffffff;
	}
}
html[data-theme="dark"] .nn-payoff {
	color: #ffffff;
}
@media (min-width: 1900px) {
	.nn-payoff {
		font-size: clamp(0.75rem, 0.9vw, 1.15rem);
		margin-bottom: clamp(0.9rem, 2vh, 1.75rem);
	}
}

/* ==========================================================================
   HEADLINE — "Strategischer Partner für *digitales Marketing & KI*", Akzentwort kursiv +
   in Markenfarbe statt einheitlichem Fließtext-Look.
   ========================================================================== */
/* Nutzer-Vorgabe: die Headline ist im Light Mode komplett Schwarz, im Dark Mode komplett
   Weiß — außer dem Akzentwort ("digitales Marketing & KI", .nn-headline-final unten), das
   bewusst in Markenfarbe bleibt. Deshalb literal #000/#fff statt --hero-ink (das wäre nur
   near-black/near-white). Light ist der unbewachte Default, Dark die einzige bewachte
   Variante — siehe "Light/Dark-Konvention" in nav.css. */
.nn-headline {
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	font-size: clamp(2.25rem, 4.6vw, 4.5rem);
	color: #000000;
	margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
	max-width: 20ch;
	text-wrap: balance;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-headline {
		color: #ffffff;
	}
}
html[data-theme="dark"] .nn-headline {
	color: #ffffff;
}
.nn-headline em {
	font-style: italic;
	font-weight: 600;
	color: var(--hero-ink-muted);
}
.nn-headline em.nn-headline-final {
	font-style: italic;
	color: var(--hero-accent);
	font-weight: 700;
}
/* Große Screens: siehe Kommentar bei .nn-hero-grid weiter oben (min-width:1900px-Block) —
   muss NACH der Basis-Regel stehen, um sie bei gleicher Spezifität zu schlagen. */
@media (min-width: 1900px) {
	.nn-headline {
		font-size: clamp(2.25rem, 4.6vw, 6.75rem);
		max-width: 26ch;
		margin-bottom: clamp(1.5rem, 4vh, 3rem);
	}
}

/* Nutzer-Vorgabe (wie bei .nn-headline oben): auch der Subtext ist Schwarz/Weiß statt
   gedämpftem Grau — literal #000/#fff, aus demselben Grund wie dort. */
.nn-sub {
	font-size: clamp(1rem, 1.1vw, 1.2rem);
	line-height: 1.6;
	color: #000000;
	font-weight: 600;
	max-width: 40ch;
	margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
}
@media (min-width: 1900px) {
	.nn-sub {
		font-size: clamp(1rem, 1.1vw, 1.75rem);
		max-width: 48ch;
		margin-bottom: clamp(1.75rem, 4vh, 3.25rem);
	}
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-sub {
		color: #ffffff;
	}
}
html[data-theme="dark"] .nn-sub {
	color: #ffffff;
}

/* scoped to .nn-hero — cta-band.php/ueber-uns-cta.php reuse the same "nn-actions" class
   name for their own CTA button, and this stylesheet is enqueued site-wide (see Konvention
   in CLAUDE.md Abschnitt 8: Selektoren immer aufs Pattern scopen). Was unscoped until
   2026-08-31, when it silently forced the CTA-Band button to justify-content:flex-start
   (left-aligned) despite .nn-cta-band's own text-align:center — flex layout ignores
   text-align, so the button drifted left instead of sitting centered on the page. Found by
   the user comparing the homepage CTA-Band button position against the section's centered
   heading. */
.nn-hero .nn-actions.wp-block-buttons {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.25rem;
	flex-wrap: wrap;
}
/* Nutzer-Vorgabe: die CTA-Gruppe soll auf Desktop ganz leicht (~16px) über den linken Rand
   der Bild-Card hinausragen, oben liegend (z-index). translateX statt margin, weil ein
   negativer margin-right bei einem shrink-to-fit-Flex-Item (dieses hier ist letztes Kind,
   nichts danach) keine sichtbare Verschiebung bewirkt — nur transform verschiebt das Element
   tatsächlich, ohne den Grid-Fluss der übrigen Copy-Elemente zu stören.

   Der 16px-Shift steckt bewusst IM Entry-Keyframe (nnActionsEnter unten), nicht als
   zusätzliche statische transform-Regel: .nn-actions trägt schon die gemeinsame
   .nn-enter-Animation (translateY/opacity/blur), eine separate transform-Deklaration daneben
   würde von der laufenden Animation überschrieben, sobald diese das transform der Endposition
   setzt (Animationen gewinnen die Kaskade) — derselbe Konflikt wie schon beim Hub/den
   Aurora-Streifen in früheren Anläufen, siehe Git-Historie. */
@media (min-width: 960px) {
	.nn-hero .nn-actions.wp-block-buttons {
		position: relative;
		z-index: 5;
	}
	.nn-hero .nn-actions.wp-block-buttons.nn-enter {
		animation-name: nnActionsEnter;
	}
}
@keyframes nnActionsEnter {
	from {opacity: 0; transform: translateY(18px) translateX(16px); filter: blur(3px)}
	to {opacity: 1; transform: translateY(0) translateX(16px); filter: blur(0)}
}

/* .wp-block-button.nn-cta (die site-weite CTA-Pille) ist nach style.css umgezogen — hero.css
   lädt seit dem "Assets bedingt geladen"-Umbau nur noch auf der Startseite (is_front_page()
   in functions.php), .nn-cta wird aber von praktisch jeder anderen Seite ebenfalls genutzt
   (Kontakt, Leistungen-Übersicht, alle Leistungsseiten, Über-uns-Intro/-CTA). Blieb die Regel
   hier, hätten diese Buttons auf jeder Nicht-Startseite ihre komplette Farb-/Hover-Definition
   verloren und wären auf WordPress' Standard-Button (schwarz, kein Hover) zurückgefallen —
   genau das ist einem Nutzer beim Über-uns-CTA aufgefallen, siehe style.css für die volle
   Begründung inkl. der dort ergänzten Fallback-Werte für --jade/--ease-snap. */

/* Zweiter Hero-CTA bewusst unauffälliger als die solide .nn-cta-Pille (Nutzer-Wunsch): reiner
   Text-Link mit Pfeil statt Button-Optik, damit "Kostenloses Audit anfragen" klar die primäre
   Handlung bleibt. Nur hier in hero.css definiert, nicht sitework wie .nn-cta. */
/* Basisfarbe Schwarz/Weiß (Nutzer-Vorgabe, wie die übrigen Hero-Texte) statt gedämpftem Grau
   — bleibt trotzdem unauffälliger als die solide .nn-cta-Pille, weil hier Fläche/Border/
   Schatten fehlen, nicht wegen der Textfarbe. Hover wechselt auf die Akzentfarbe statt nur
   "noch dunkler" (var(--hero-ink) läge fast auf #000/#fff und wäre kaum sichtbar). */
.wp-block-button.nn-cta-ghost .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	color: #000000;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.9rem 0.4rem;
	border-radius: 999px;
	border: none;
	text-decoration: none;
	transition: color 0.3s var(--ease-snap), gap 0.3s var(--ease-snap);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .wp-block-button.nn-cta-ghost .wp-block-button__link {
		color: #ffffff;
	}
}
html[data-theme="dark"] .wp-block-button.nn-cta-ghost .wp-block-button__link {
	color: #ffffff;
}
.wp-block-button.nn-cta-ghost .wp-block-button__link:hover,
.wp-block-button.nn-cta-ghost .wp-block-button__link:focus-visible {
	color: var(--hero-accent);
	gap: 0.75rem;
}
.wp-block-button.nn-cta-ghost .wp-block-button__link:focus-visible {
	outline: 2px solid var(--hero-line);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   COLLAGE — Wrapper für das Hero-Foto (siehe unten). Kein dekorativer Blob mehr dahinter
   (auf Nutzer-Wunsch entfernt) — reiner zentrierender Flex-Container.
   ========================================================================== */
.nn-collage {
	position: relative;
	z-index: 2;
	min-height: clamp(380px, 42vw, 560px);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Mobile: frühere Fassung (Git-Historie) gab .nn-collage einen eigenen deckenden
   Hintergrund + negativen Inline-Margin, damit das Foto auf eigenem hellem/dunklem Grund
   statt weiter im grünen Canvas eingebettet steht. War kaputt: .nn-collage hat width:100%
   in der Basis-Regel oben, wodurch der negative-margin-Full-Bleed-Trick (der width:auto
   voraussetzt) nicht griff — die Box wurde nur als Ganzes nach links verschoben statt in
   beide Richtungen zu wachsen, sichtbar als asymmetrischer ~48px-Streifen grünen Canvas'
   rechts (bei 375px Viewport gemessen). Auf Nutzerwunsch entfernt (2026-09-02): Foto bleibt
   jetzt im durchlaufenden grünen Canvas eingebettet, zentriert über justify-content:center
   aus der Basis-Regel. min-height bleibt als eigener, etwas kompakterer Mobile-Wert. */
@media (max-width: 959px) {
	.nn-hero-grid {row-gap: 0}
	.nn-collage {
		min-height: clamp(320px, 88vw, 440px);
	}
}

/* ==========================================================================
   FOTO — die drei Gründer, statt des System-Diagramms (das jetzt unter "Unser Ansatz" auf
   der Startseite sitzt, siehe patterns/home-intro.php + assets/css/home-intro.css).

   Drei verschachtelte Ebenen (siehe Kommentar im Pattern):
   .nn-hero-photo-parallax (JS-Scroll-Parallax-Ziel, KEIN eigener CSS-Transform)
     > .nn-hero-photo (statische Schräglage + scale(0.98→1)-Entry, beides CSS-Transform)
       > .nn-hero-photo-frame (Card-Rahmen/Clipping + Maus-Spotlight-Glow) */
.nn-hero-photo-parallax {
	width: 100%;
	max-width: clamp(400px, 44vw, 640px);
	margin: 0 auto;
	will-change: transform;
}
@media (min-width: 1900px) {
	.nn-hero-photo-parallax {
		/* margin:0 auto von der Basis-Regel zentriert das Bild sonst INNERHALB seiner Spalte —
		   bei margin-left:0 rutscht es stattdessen an deren linken Rand, zusammen mit dem
		   verkleinerten Spalten-Gap oben (.nn-hero-grid) macht das den Abstand zum Text
		   spürbar kleiner (Nutzer-Vorgabe "Bild weiter links"). */
		max-width: clamp(400px, 46vw, 1040px);
		margin-left: 0;
	}
}
.nn-hero-photo {
	position: relative;
	transform: rotate(-1deg) scale(0.98);
	animation: nnPhotoEnter 0.6s var(--ease-snap) 220ms both;
}
@keyframes nnPhotoEnter {
	to {transform: rotate(-1deg) scale(1)}
}
/* Weicher Glow-Rand (Nutzer-Wunsch): verbindet Foto und Noise-Field-Hintergrund, statt dass
   die Card wie ein scharf abgesetzter Fremdkörper davor schwebt. Liegt HINTER der Card
   (::before von .nn-hero-photo, gemalt vor .nn-hero-photo-frame im DOM, braucht daher kein
   eigenes z-index) und ragt an allen Seiten über deren Kante hinaus (inset:-14%) — drei
   versetzte, stark geblurrte Jade-Flecken statt einer gleichmäßigen Aura, damit es an Ecken/
   Rändern organisch "durchscheint" statt wie ein sauberer Rahmen zu wirken. */
.nn-hero-photo::before {
	content: "";
	position: absolute;
	inset: -14%;
	background:
		radial-gradient(circle at 22% 18%, var(--jade-light) 0%, transparent 55%),
		radial-gradient(circle at 82% 30%, var(--jade-mid) 0%, transparent 52%),
		radial-gradient(circle at 60% 88%, var(--jade) 0%, transparent 58%);
	filter: blur(38px);
	opacity: 0.6;
	pointer-events: none;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-hero-photo::before {
		opacity: 0.8;
	}
}
html[data-theme="dark"] .nn-hero-photo::before {
	opacity: 0.8;
}
/* Klar definierte Glassmorphism-Card (1px helle Border, großer weicher Schlagschatten),
   jetzt mit größerem, weicherem Radius (Nutzer-Wunsch "weichere Ecken") statt der
   ursprünglichen 24px. Border-Radius/overflow sitzen hier (Kind), nicht auf .nn-hero-photo
   selbst — hält die Card-Kante getrennt vom äußeren rotate()/scale() UND vom Glow-::before
   oben (der über dieselbe Kante hinausragen soll, dürfte also nicht mit-geclippt werden).
   --spot-x/-y/-o: vom Maus-Spotlight-Effekt gesetzte Custom Properties, siehe
   assets/js/hero-photo-fx.js. */
.nn-hero-photo-frame {
	--spot-x: 50%;
	--spot-y: 50%;
	--spot-o: 0;
	position: relative;
	display: block;
	border-radius: 36px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.nn-hero-photo-frame img {
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: auto;
}
/* Maus-Spotlight: dezenter, radialer Jade-Leuchteffekt, der der Cursor-Position über der Card
   folgt (opacity-Maximum 0.15, per color-mix in die Gradient-Farbe selbst eingerechnet statt
   zusätzlich über CSS opacity multipliziert). --spot-o togglet 0/1 bei Enter/Leave, mit
   weichem Fade über transition. */
.nn-hero-photo-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle clamp(180px, 30vw, 320px) at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--jade) 15%, transparent) 0%, transparent 70%);
	opacity: var(--spot-o);
	transition: opacity 0.35s var(--ease-snap);
	pointer-events: none;
}
/* dezenter Glas-Sheen (diagonales Licht von oben-links) statt der Vignette, unterstützt den
   "Grounded Glassmorphism"-Eindruck der Card. */
.nn-hero-photo-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%);
	pointer-events: none;
}

@media (max-width: 959px) {
	.nn-hero-photo-parallax {max-width: clamp(300px, 80vw, 440px)}
}

@media (prefers-reduced-motion: reduce) {
	.nn-hero-photo {animation: none; transform: rotate(-1deg) scale(1)}
}

/* ==========================================================================
   ENTRY-CHOREOGRAFIE (awwwards-motion-Skill, Pflicht-Layer 1)
   ========================================================================== */
/* Nutzer-Feedback: der Entry wirkte "seltsam überschneidend" mit dem Noise-Field-Hintergrund
   und die Eyebrow ("Tracking · SEO/GEO...") sehr verschwommen am Anfang — zwei Ursachen:
   (1) .nn-payoff hatte GAR KEINE eigene animation-delay, startete also als allererstes
   Element exakt im selben Frame wie der Canvas-Hintergrund, statt sich sauber einzureihen;
   (2) blur(6px) ist auf kleiner, breit getrackter Versalschrift (0.14em letter-spacing)
   deutlich unruhiger/"verwaschener" als auf der großen Headline. Blur halbiert (6px→3px),
   kürzere Gesamtdauer (0.8s→0.6s) für ein knackigeres statt lange "schwammiges" Einblenden,
   plus expliziter Delay für .nn-payoff, damit es sich in die Staffelung einreiht statt
   isoliert zuerst zu erscheinen. */
.nn-enter {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(3px);
	animation: nnHeroEnter 0.6s var(--spring-snappy) both;
}
.nn-payoff.nn-enter {animation-delay: 40ms}
.nn-headline.nn-enter {animation-delay: 120ms}
.nn-sub.nn-enter {animation-delay: 260ms}
.nn-actions.nn-enter {animation-delay: 360ms}
.nn-collage.nn-enter {animation-delay: 200ms}
@keyframes nnHeroEnter {
	to {opacity: 1; transform: translateY(0); filter: blur(0)}
}

@media (prefers-reduced-motion: reduce) {
	.nn-enter {animation: none; opacity: 1; transform: none; filter: none}
	.nn-collage-blob {animation: none}
	.nn-system-node, .nn-system-node-label, .nn-system-node-desc, .nn-system-line {transition: none}
}
/* Der 16px-Überlapp-Shift ist ein Layout-Entscheid, keine Bewegung — bleibt deshalb auch bei
   reduzierter Motion erhalten. Muss NACH obigem "transform:none"-Reset stehen und höher
   spezifisch sein (3 statt 1 Klasse), um ihn zu überschreiben. */
@media (prefers-reduced-motion: reduce) and (min-width: 960px) {
	.nn-actions.wp-block-buttons.nn-enter {transform: translateX(16px)}
}