/* =========================================================================
   nikokulisch.de — Child-Theme-Stylesheet
   1 Basis & Hintergrund · 2 Header · 3 Hero (Portrait, Sternenfeld)
   4 Cursor · 5 Sektionen & Grafik · 6 Patterns · 7 Formular
   8 Motion · 9 Reduced Motion / kein JS / Mobil / Print
   Farben und Groessen kommen als --wp--preset--* aus theme.json.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · Basis & Hintergrund
   ---------------------------------------------------------------------- */

:root {
	--nk-gutter: clamp(1rem, 2vw, 2rem);
	--nk-section: clamp(2.5rem, 5vw, 4.5rem);
	--nk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--nk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	/* Hoehe des Blocksy-Headers. Klebende Ueberschriften und der
	   Karten-Stapel setzen darunter an — bei Bedarf hier anpassen. */
	--nk-header-h: 4.5rem;
	--nk-stack-top: 6rem;

	/* Versatz von Karte zu Karte im Stapel. Muss mindestens so hoch sein wie
	   der Streifen mit Ziffer und Schlagwort, sonst verdeckt die obere Karte
	   die Kennung der darunterliegenden. Seit die Kennung statisch oben
	   links in der Karte steht (Polster + Ziffernzeile), braucht der
	   Streifen etwas mehr Höhe. */
	--nk-stack-step: 5.25rem;

	/* Nachlauf unter dem Stapel.
	   Rechnerisch notwendig, nicht Geschmackssache: Ein klebendes Element
	   darf seine Inhaltsbox nicht verlassen. Bei N gleich hohen Karten ohne
	   Zwischenraum reicht der Platz fuer die LETZTE Karte auf genau null
	   Pixel — sie erreicht ihre Klebeposition also nie, sondern wird sofort
	   wieder hochgeschoben. Innenabstand hilft nicht: Chrome misst die
	   Grenze an der Inhaltsbox, nicht an der Polsterbox. Es braucht echten
	   Inhalt darunter — deshalb weiter unten ein ::after mit dieser Hoehe.
	   Nebeneffekt: der fertige Stapel steht diese Strecke lang still. */
	--nk-stack-tail: clamp(4rem, 22vh, 11rem);

	/* Einheitliche Kartenhöhe im Orbit — zugleich die Höhe des Fotos in der
	   Mitte. Der Wert liegt über der höchsten Karte (369px gemessen) und
	   entspricht ungefähr der natürlichen Fotohöhe (403–411px). Dadurch sind
	   alle sechs Karten und das Foto exakt gleich groß. */
	--nk-orbit-h: 26rem;

	/* Der Halt des Kompetenzen-Bands (orbit.js): Wie viel Scroll-Strecke die
	   Bühne über die Fensterhöhe hinaus bekommt, und um wie viel jede Karte
	   im Stapel tiefer sitzt als die vorige. Der Versatz zeigt Polster plus
	   Überschrift der darunterliegenden Karte — mehr nicht.
	   Strecke bewusst knapp: Wer scrollt, soll sofort etwas passieren sehen —
	   und DIREKT nach der letzten Reihe kommt die nächste Sektion hoch, kein
	   Leerscrollen. Die Karten fahren fast über die ganze Strecke ein (letzte
	   Reihe bei 90 %), danach löst sich der Halt sofort. Nur Fallback: die
	   wirksame Höhe setzt orbit.js inline (Halter + 25vh). */
	--nk-orbit-strecke: 25vh;
	--nk-orbit-versatz: 4rem;

	/* Gedaempftes Grau fuer Text auf den hellen Toenungen. ink-muted
	   (#6B6560) erreicht auf Petrol- und Sandflaechen nur 4,38:1 und
	   verfehlt damit AA knapp — dieser Wert liegt bei 5,3:1. */
	--nk-ink-soft: #5C5751;
}

html {
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

/* Kein flaches Weiss: eine warme, sehr langsam laufende Verlaufsbuehne aus
   Bone, Sand und einem Hauch Ocker/Umbra. Die Sektionen setzen sich mit ihren
   eigenen Tints davon ab. */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	background-color: #F3EDE3;
	background-image:
		radial-gradient(100% 70% at 78% 8%,  rgba(180, 128, 47, 0.13) 0%, transparent 58%),
		radial-gradient(90% 60% at 8% 34%,   rgba(107, 74, 46, 0.10) 0%, transparent 62%),
		radial-gradient(120% 80% at 50% 100%, rgba(31, 78, 74, 0.09) 0%, transparent 60%),
		linear-gradient(180deg, #F8F4ED 0%, #F2EADE 48%, #EDE2D2 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.entry-content p:not([class*="has-"]),
.nk-measure p {
	max-width: var(--wp--custom--measure, 68ch);
}

/* -------------------------------------------------------------------------
   Volle Breite + Inhaltsspalte — die Grundlage für die Fluchtlinie

   Jede Sektion nimmt die VOLLE Fensterbreite ein (damit getönte Flächen und
   der Kontakt-Aufruf randlos spannen) und legt ihren Inhalt in eine
   zentrierte 1000px-Spalte (die Fluchtlinie, an der alles ausgerichtet ist).

   Warum hier und nicht im Vorschau-Bauskript: Auf dem Server steckt Blocksy
   jeden Block in einen zentrierten Container von nur 720px. Ohne diese Regel
   säße der ganze Inhalt schmal und versetzt zu Hero und Laufband. Weil die
   Spalte jetzt in theme.css selbst entsteht, sehen Vorschau und echte Seite
   gleich aus.

   Der Trick: full-bleed über 100vw, dann die Innenpolsterung so wählen, dass
   die Inhaltsbox genau 1000px breit und mittig ist. body hat overflow-x: clip
   (siehe oben), deshalb entsteht durch das 100vw keine Querleiste.
   ---------------------------------------------------------------------- */

.nk-section,
.nk-marquee {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Der Hero darf seine volle Breite NICHT über width:100vw holen.
   Grund (auf dem Server gemessen): GSAP legt den gepinnten Hero in einen
   Hilfsrahmen (.pin-spacer), der auf einer Full-Width-Seite nur die
   INHALTSBREITE (~1290px) bekommt und mittig sitzt. Ein 100vw-breiter Hero
   ragt dann nach rechts über diesen Rahmen hinaus — und das in sich mittig
   gesetzte Porträt landet dadurch rechts. Deshalb FÜLLT der Hero nur seinen
   Rahmen (bleibt so in jeder Pin-Phase mittig); die volle Breite bekommt er
   über den Rahmen selbst (Regel weiter unten). */
.nk-hero {
	width: auto;
	max-width: none;
	margin-inline: 0;
}

/* Die Inhaltsspalte: 1000px mittig, darunter der schlichte Seitenrand. */
.nk-section {
	padding-inline: max(var(--nk-gutter), calc((100vw - var(--nk-content)) / 2));
}

/* Den Pin-Rahmen des Hero auf die volle Fensterbreite ziehen — nur die
   Breite. Das vertikale Polster, aus dem GSAP die Scroll-Strecke des Pins
   nimmt, bleibt unberührt. Der Hero füllt den Rahmen dann randlos, und weil
   der Rahmen jetzt bündig am Fenster sitzt, sitzt auch das Porträt mittig.
   :has(> .nk-hero) trifft ausschliesslich den Rahmen des Hero. */
.pin-spacer:has(> .nk-hero) {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
}

/* Blocksys Zwangsbreite (--theme-block-width = 720px) gilt innerhalb der
   Seite nicht mehr: die direkten Kinder füllen die 1000px-Spalte, ihre eigenen
   max-width-Regeln (Bänder, Absätze) bleiben davon unberührt. Ein Wert, der
   nur auf dem Server existiert — in der Vorschau ist er schlicht wirkungslos. */
.nk-section,
.nk-hero,
.nk-marquee {
	--theme-block-width: 100%;
}

/* Die Bühne der 3D-Modelle und das Namensband füllen den vollen Hero. */
.nk-hero__stage {
	width: 100%;
	max-width: none;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #1F4E4A);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   2 · Header
   ---------------------------------------------------------------------- */

.nk-brand {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	display: inline-block;
}

.nk-brand span {
	display: block;
}

body.nk-has-hero header[id="header"] {
	background: transparent;
	transition: background-color 350ms var(--nk-ease), box-shadow 350ms var(--nk-ease);
}

body.nk-has-hero header[id="header"]::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(248, 244, 237, 0.8), rgba(248, 244, 237, 0));
	transition: opacity 350ms var(--nk-ease);
}

body.nk-scrolled header[id="header"] {
	background-color: rgba(248, 244, 237, 0.88);
	backdrop-filter: saturate(1.4) blur(10px);
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
}

body.nk-scrolled header[id="header"]::before {
	opacity: 0;
}

.nk-pill,
.wp-block-button.nk-pill .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border-radius: 999px;
	padding: 0.6em 1.25em;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 200ms var(--nk-ease), transform 200ms var(--nk-ease);
}

.nk-pill:hover,
.nk-pill:focus-visible {
	background: #173B38;
	color: var(--wp--preset--color--on-accent);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   3 · Hero
   Ebenen im selben Rasterfeld:
     .nk-hero__band     Namensband, endlose Schleife    (hinten,  z 1)
     .nk-hero__portrait das freigestellte Foto          (Mitte,   z 2)
     .nk-hero__stars    Begriffe, die sich um das Foto legen (vorn, z 4)
   ---------------------------------------------------------------------- */

.nk-hero {
	position: relative;
	margin: 0;
	padding: 0;
}

.nk-hero__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	height: 100svh;
	min-height: 32rem;
	width: 100%;
	overflow: hidden;
}

/* Warmer Lichtkegel hinter dem Portrait — der "Tunnel", der das Foto in die
   Flaeche einbettet, statt es davorzukleben. */
.nk-hero__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		46% 52% at 50% 46%,
		rgba(255, 252, 246, 0.95) 0%,
		rgba(247, 240, 229, 0.55) 42%,
		rgba(236, 225, 208, 0) 72%
	);
}

.nk-hero__band,
.nk-hero__stars {
	grid-area: 1 / 1;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
}

/* Das Porträt wird ABSOLUT über die ganze Bühne gelegt und sein Bild per
   Flexbox mittig-unten verankert. Bewusst nicht über das Raster + object-fit:
   auf dem Server hat irgendeine fremde Regel (Blocksys eingebettetes CSS oder
   ein Plugin) das rasterbasierte Bild nach rechts geschoben. Absolut plus
   !important kann davon nichts mehr verrücken — egal, welche Breiten- oder
   Ausrichtungsregel dazukommt. */
.nk-hero__portrait {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	will-change: transform;
	transform-origin: 50% 100%;
	pointer-events: none;
}

/* Die Maske weicht den harten Zuschnitt auf: unten laeuft die Schulterkante
   aus, ringsum eine sanfte Ellipse. Zwei Ebenen, per intersect verrechnet.
   Kein !important auf der Höhe — sonst überschriebe es die kleinere Größe im
   mobilen Sternenhimmel. Die Zentrierung macht die Flexbox oben, nicht das
   Bild selbst. */
.nk-hero__portrait img {
	display: block;
	height: 100%;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	object-fit: contain;
	object-position: center bottom;
	-webkit-mask-image:
		linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.72) 79%, rgba(0, 0, 0, 0.18) 93%, transparent 100%),
		radial-gradient(78% 74% at 50% 44%, #000 58%, rgba(0, 0, 0, 0.78) 76%, rgba(0, 0, 0, 0.25) 92%, transparent 100%);
	mask-image:
		linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.72) 79%, rgba(0, 0, 0, 0.18) 93%, transparent 100%),
		radial-gradient(78% 74% at 50% 44%, #000 58%, rgba(0, 0, 0, 0.78) 76%, rgba(0, 0, 0, 0.25) 92%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* 3.1 Namensband ---------------------------------------------------------- */

.nk-hero__band {
	position: relative;
	z-index: 1;
	align-self: center;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.nk-hero__band-track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.nk-hero__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--mega);
	font-weight: 800;
	font-stretch: 88%;
	line-height: 1;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	color: rgba(107, 74, 46, 0.16);
	white-space: nowrap;
	margin: 0;
	padding-inline-end: clamp(2rem, 5vw, 5rem);
	flex: 0 0 auto;
}

html:not(.nk-js) .nk-hero__band-track {
	width: 100%;
	justify-content: center;
}

.nk-hero__band-track.is-running {
	animation: nk-band 80s linear infinite;
}

@keyframes nk-band {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* 3.2 Begriffs-Sternenfeld ------------------------------------------------
   Die Begriffe kommen beim Scrollen gross aus der Bildmitte, schrumpfen und
   legen sich auf zwei Ellipsen um das Portrait. Naeher = groesser und
   dunkler, weiter = kleiner und leiser: das erzeugt Tiefe.
   Positionen und Startzustand setzt hero.js; hier steht nur die Optik. */

.nk-hero__stars {
	position: relative;
	z-index: 4;
	pointer-events: none;
}

.nk-star {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	white-space: nowrap;
	pointer-events: auto;
	will-change: transform, opacity;
	/* Der Begriff soll MIT SEINER MITTE auf dem berechneten Punkt sitzen.
	   left/top: 50% setzen dort aber seine linke obere Ecke — jedes Wort
	   stand dadurch um seine halbe Breite zu weit rechts, und die Rechnung,
	   die es in der Bühne halten soll, ging entsprechend daneben.
	   Bewusst die eigenständige translate-Eigenschaft und nicht transform:
	   transform gehört der Positionierung (GSAP bzw. hero.js), beide
	   zusammen würden sich gegenseitig überschreiben. */
	translate: -50% -50%;
}

/* Zwischenebene: hier laeuft die langsame Wanderung. Getrennt von der
   Positionierung (aussen, GSAP) und vom Hover (innen) — sonst wuerden sich
   drei Transformationen gegenseitig ueberschreiben. */
.nk-star__drift {
	display: inline-block;
	animation: nk-drift var(--nk-drift-time, 28s) ease-in-out infinite;
	animation-delay: var(--nk-drift-delay, 0s);
	will-change: transform;
}

@keyframes nk-drift {
	0%   { transform: translate3d(0, 0, 0); }
	25%  { transform: translate3d(var(--nk-dx, 30px), calc(var(--nk-dy, 20px) * -1), 0); }
	50%  { transform: translate3d(calc(var(--nk-dx, 30px) * -0.7), var(--nk-dy, 20px), 0); }
	75%  { transform: translate3d(calc(var(--nk-dx, 30px) * 0.45), calc(var(--nk-dy, 20px) * 0.7), 0); }
	100% { transform: translate3d(0, 0, 0); }
}

.nk-star__label {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--nk-star-size, 1rem);
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--nk-star-color, var(--wp--preset--color--ink-muted));
	background: rgba(251, 250, 247, 0);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.4em 0.8em;
	transition:
		color 280ms var(--nk-ease-out),
		background-color 280ms var(--nk-ease-out),
		border-color 280ms var(--nk-ease-out),
		transform 320ms var(--nk-ease-out),
		box-shadow 320ms var(--nk-ease-out);
}

.nk-star:hover .nk-star__label,
.nk-star:focus-within .nk-star__label {
	color: var(--wp--preset--color--accent);
	background: rgba(251, 250, 247, 0.92);
	border-color: rgba(31, 78, 74, 0.18);
	transform: translateY(-2px) scale(1.08);
	box-shadow: 0 8px 22px -12px rgba(26, 23, 20, 0.45);
}

/* Beim Hovern eines Begriffs steht die Wanderung kurz still — sonst
   rutscht das Wort unter dem Zeiger weg. */
.nk-star:hover .nk-star__drift {
	animation-play-state: paused;
}

/* Ohne JS: kein Sternenfeld, sondern eine ruhige Zeile unter dem Portrait. */
html:not(.nk-js) .nk-hero__stars,
.nk-hero--static .nk-hero__stars {
	position: static;
	align-self: end;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.2rem;
	padding: 0 var(--nk-gutter) clamp(1.5rem, 5vh, 3rem);
}

html:not(.nk-js) .nk-star,
.nk-hero--static .nk-star {
	position: static;
	transform: none !important;
	opacity: 1 !important;
}

/* Scroll-Hinweis */
.nk-hero__cue {
	position: absolute;
	inset-inline: 0;
	bottom: clamp(0.75rem, 3vh, 2rem);
	z-index: 5;
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--s);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	transition: opacity 300ms var(--nk-ease);
	margin: 0;
}

.nk-hero__cue::after {
	content: "";
	width: 1px;
	height: 2.25rem;
	background: linear-gradient(to bottom, var(--wp--preset--color--ink-muted), transparent);
}

body.nk-scrolled .nk-hero__cue {
	opacity: 0;
}

.nk-hero.is-animated .nk-hero__band {
	opacity: 0;
}

/* -------------------------------------------------------------------------
   4 · Signatur-Cursor
   ---------------------------------------------------------------------- */

/* Der Systemzeiger verschwindet erst, wenn der Punkt wirklich läuft. */
html.nk-cursor-on,
html.nk-cursor-on * {
	cursor: none;
}

/* In Eingabefeldern kommt die Schreibmarke zurück — ohne sie trifft man
   beim Korrigieren die Stelle nicht. */
html.nk-cursor-on :is(input, textarea, select) {
	cursor: auto;
}

.nk-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 0 solid #FFFFFF;
	/* difference kehrt den Untergrund um: auf hellem Papier wird der Punkt
	   dunkel, auf dunklen Flächen hell. Immer sichtbar, ohne Farbwechsel. */
	mix-blend-mode: difference;
	pointer-events: none;
	opacity: 0;
	transition:
		width 260ms var(--nk-ease-out),
		height 260ms var(--nk-ease-out),
		border-width 260ms var(--nk-ease-out),
		background-color 260ms var(--nk-ease-out),
		opacity 180ms linear;
}

.nk-cursor.is-visible { opacity: 1; }
.nk-cursor.is-hidden  { opacity: 0; }

/* Über Links: etwas größer, weiterhin gefüllt. */
.nk-cursor.is-link {
	width: 34px;
	height: 34px;
}

/* Über Überschriften und Begriffen: Ring statt Fläche. Innen bleibt der
   Text komplett unberührt und damit voll lesbar. */
.nk-cursor.is-big {
	width: 64px;
	height: 64px;
	background: transparent;
	border-width: 1.5px;
}

.nk-cursor.is-down {
	width: 14px;
	height: 14px;
	border-width: 0;
	background: #FFFFFF;
}

/* -------------------------------------------------------------------------
   5 · Sektionen & Grafik
   ---------------------------------------------------------------------- */

.nk-section {
	padding-block: var(--nk-section);
	position: relative;
}

/* Getoente Sektionen sind bündige, vollflächige Bänder (Fundament §3.4:
   Radien 0 für Sektionen). Kein Radius = keine durchscheinende Grundfarbe an
   den Ecken/Nähten; die Farben treffen als ruhige Bänder direkt aufeinander.
   Die Textur-/Scroll-Ebenen dahinter bleiben davon unberührt. */
.nk-section.has-background {
	border-radius: 0;
}

.nk-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--s);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	margin-block-end: 0.5rem;
}

.nk-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	flex: 0 0 auto;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Abschnittskopf — überall gleich aufgebaut: die Kategorie ("Herkunft",
   "Roter Faden", "Stationen" …) steht als Randmarke LINKS NEBEN dem Inhalt,
   der Titel bleibt exakt auf der Fluchtlinie des Fliesstextes darunter.
   ---------------------------------------------------------------------- */

/* Breite der Randspalte und ihr Abstand zum Inhalt. Beide Werte werden vom
   negativen Aussenabstand unten wieder eingerechnet, damit der Titel NICHT
   nach rechts wandert — sonst stuende er nicht mehr ueber dem Absatz. */
:root {
	/* 8,5rem = 136px. Der breiteste Begriff ("KOMPETENZEN") misst bei 0,72rem
	   und 0,1em Laufweite 101px, dazu der Strich (20px) und sein Abstand
	   (8px) — macht 129px. Damit passt jede Kategorie in eine Zeile. */
	--nk-label-w: 8.5rem;
	--nk-label-gap: 1.25rem;

	/* Verbindliche Inhaltsbreite. Sie steht zwar auch in jedem Pattern als
	   contentSize, aber darauf ist kein Verlass: sobald GSAP einen Abschnitt
	   festhaelt, schiebt es einen pin-spacer dazwischen — und der ist dann
	   das Kind, auf das die WordPress-Layoutregel zielt. Deshalb bekommen
	   die Kartenbaender ihre Breite hier direkt. */
	--nk-content: 1000px;
}

/* Alle Kartenbaender sind exakt so breit wie der Fliesstext daneben —
   Themen, Kompetenzen, Wie ich arbeite, Engagement, Kernpositionen. */
.nk-stack,
.nk-orbit,
.nk-zigzag {
	max-width: var(--nk-content);
	margin-inline: auto;
}

/* Fliesstext füllt die volle Inhaltsspalte (1000px), sitzt links auf
   DERSELBEN Fluchtlinie wie Kategorie, Titel und Karten. Früher war er auf
   68 Zeichen gedeckelt — das ließ rechts eine Leere, die neben den
   full-width-Karten wie ein Fehler aussah.
   max-width mit !important: Auf dem Server steckt der Inhalt in
   .entry-content, und dessen Lesebreiten-Regel (.entry-content
   p:not([class*="has-"]), Zeile 83) ist eine Stufe spezifischer als diese
   hier — nur !important schlägt sie zuverlässig (live gemessen).
   Das margin-!important verhindert zusätzlich, dass WordPress den Absatz
   zentriert und die linke Kante verspringt. */
.nk-section > p,
.nk-section > .wp-block-list,
.nk-section > .nk-lead {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.nk-section__head {
	display: grid;
	justify-items: start;
	gap: 0.3rem;
	text-align: left;
	margin-block-end: clamp(1.25rem, 2.5vw, 2rem);
}

.nk-section__head .nk-eyebrow {
	margin-block-end: 0;
}

/* Ab dieser Breite ist links vom 1000px-Inhalt genug Luft fuer die
   Randspalte (bei 1360px bleiben 180px je Seite, gebraucht werden 156px).
   Darunter bleibt die Kategorie schlicht ueber dem Titel stehen. */
@media (min-width: 1360px) {
	.nk-section__head {
		position: relative;
	}

	/* Die Kategorie wird aus dem Textfluss genommen und links neben das
	   Inhaltsband gesetzt. Wichtig: NICHT den ganzen Kopf nach links ziehen
	   — dann verliert er die zentrierende auto-Marge und Titel, Fliesstext
	   und Karten stehen nicht mehr auf einer Kante. So bleibt der Titel
	   exakt dort, wo auch die Absaetze und die Karten beginnen. */
	.nk-section__head > .nk-eyebrow {
		position: absolute;
		top: 0;
		right: calc(100% + var(--nk-label-gap));
		width: var(--nk-label-w);
		margin: 0;
		/* Flex mit Ausrichtung nach rechts: Strich und Text stehen als Paar
		   an der rechten Kante der Randspalte, der Strich also links vom
		   Wort — genau wie im Beispiel. */
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 0.5em;
		white-space: nowrap;
		font-size: 0.72rem;
		letter-spacing: 0.1em;
		line-height: 1.35;
		/* Auf die Grundlinie der ersten Titelzeile ausgerichtet. */
		padding-block-start: 0.5em;
	}

	/* Der Strich bleibt — nur etwas kuerzer, damit das Paar in die
	   Randspalte passt. */
	.nk-section__head > .nk-eyebrow::before {
		width: 1.25rem;
	}
}

/* Der Titel bleibt in EINER Zeile. Kein overflow:hidden — das hat die
   Unterlaengen abgeschnitten (das "g" in "eingebracht"). Stattdessen
   passt fit-headings.js die Schriftgroesse an, bis die Zeile passt. */
.nk-section__head :is(h1, h2, h3) {
	margin: 0;
	max-width: 100%;
	white-space: nowrap;
	font-size: clamp(1.6rem, 4vw, 2.8rem);
	line-height: 1.14;
	padding-block-end: 0.06em;
}

/* Der Seitentitel darf groesser sein als eine Abschnittsueberschrift. */
.nk-section__head h1 {
	font-size: clamp(2rem, 5vw, 3.4rem);
}

.nk-section__head .nk-lead {
	margin-block-start: 0.5rem;
	/* Auch der Vorspann im Sektionskopf (z. B. auf „Politische Einordnung")
	   füllt die Inhaltsbreite statt schmal links zu stehen. !important aus
	   demselben Grund wie oben — die .entry-content-Lesebreite überstimmt
	   sonst. */
	max-width: none !important;
}

@media (max-width: 640px) {
	/* Auf schmalen Schirmen darf der Titel umbrechen. */
	.nk-section__head :is(h1, h2, h3) {
		white-space: normal;
		text-wrap: balance;
	}
}

/* Ausgewogene Umbrueche: Ueberschriften mittig ausbalanciert, Fliesstext
   ohne kurze Schlusszeilen (Schusterjungen). */
h1, h2, h3, h4, .nk-lead {
	text-wrap: balance;
}

.nk-section > p, .entry-content p, .nk-panel p, .nk-value p {
	text-wrap: pretty;
}

/* Lange Einzelwörter wie "Datenschutzerklärung" passen auf dem Telefon in
   keine Zeile und schoben die ganze Seite seitlich heraus. Mit lang="de"
   trennt der Browser sie sauber; break-word ist die Rückfallebene, falls
   keine Trennmuster geladen sind. */
@media (max-width: 780px) {
	:is(h1, h2, h3, h4) {
		overflow-wrap: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

.nk-lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
	max-width: 26ch;
}

.nk-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	margin-block: var(--nk-section) 0;
}

/* Dekorative Formen — liegen hinter dem Inhalt, nie im Weg. */
.nk-blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(2px);
	opacity: 0.5;
}

.nk-shape {
	display: block;
	color: var(--wp--preset--color--accent);
}

/* Icon in einer Kachel / einem Cluster */
.nk-icon {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 14px;
	background: var(--wp--preset--color--petrol-tint);
	color: var(--wp--preset--color--accent);
	margin-block-end: 0.9rem;
	transition: transform 320ms var(--nk-ease-out), background-color 320ms var(--nk-ease-out);
}

.nk-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
   6 · Patterns
   ---------------------------------------------------------------------- */

/* 6.1 Teaser-Kacheln ------------------------------------------------------ */
/* Bewusst FESTE Spaltenzahl statt auto-fit: sechs Kacheln ergeben so immer
   ein symmetrisches Raster (3x2 bzw. 2x3), nie eine angebrochene Reihe. */
.nk-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (min-width: 560px) {
	.nk-pillars { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.nk-pillars { grid-template-columns: repeat(3, 1fr); }
}

.nk-pillar {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	background: rgba(251, 250, 247, 0.72);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card, 12px);
	transition: border-color 240ms var(--nk-ease), transform 240ms var(--nk-ease-out), background-color 240ms var(--nk-ease);
}

.nk-pillar::after {
	/* Feiner Lichtstreif, der beim Hovern durchwandert. */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 700ms var(--nk-ease-out);
	pointer-events: none;
}

.nk-pillar:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	background: rgba(251, 250, 247, 0.95);
	transform: translateY(-3px);
}

.nk-pillar:hover::after {
	transform: translateX(120%);
}

/* Die Kopfzeile der Karten. Früher stand hier ein kleines Icon-Kästchen
   neben dem Titel — das ist Geschichte: Das Icon wandert als grosses,
   blasses Wasserzeichen in den Kartenhintergrund (Regel unten). Die
   Head-Row bleibt bewusst UNpositioniert, damit das absolute Icon bis zur
   positionierten Karte durchfällt und dort ankert. */
.nk-head-row {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.nk-head-row :is(h2, h3) {
	margin: 0;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.nk-pillar .nk-head-row :is(h2, h3) {
	font-size: var(--wp--preset--font-size--m);
}

.nk-pillar p {
	margin: 0;
	color: var(--nk-ink-soft);
	font-size: 0.98rem;
}

.nk-pillar a {
	text-decoration: none;
	color: inherit;
}

/* Das Icon der Kopfzeile als Wasserzeichen — die gleiche Formensprache wie
   bei den Kompetenz- und Zitat-Karten: gross, ruhig, kaum da. Es lehnt in
   der rechten unteren Ecke seiner Karte an. */
.nk-head-row .nk-icon {
	position: absolute;
	right: -1.25rem;
	bottom: -1.75rem;
	z-index: 0;
	width: 9rem;
	height: 9rem;
	margin: 0;
	background: none;
	border-radius: 0;
	opacity: 0.11;
	pointer-events: none;
}

.nk-head-row .nk-icon svg {
	width: 100%;
	height: 100%;
	stroke-width: 1;
}

/* Die Zeitleisten-Karte hat KEIN overflow: hidden (ihr Verbindungsstrich
   ragt bewusst unten hinaus). Dort bleibt das Wasserzeichen vollständig
   innerhalb der Karte, etwas kleiner und noch leiser. */
.nk-timeline__item .nk-head-row .nk-icon {
	right: 1rem;
	bottom: 0.75rem;
	width: 7.5rem;
	height: 7.5rem;
	opacity: 0.08;
}

/* Der Text liegt über dem Wasserzeichen. */
.nk-pillar > :not(.nk-head-row),
.nk-timeline__body > :not(.nk-head-row) {
	position: relative;
	z-index: 1;
}

.nk-pillar a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}

/* 6.2 Keyword-Band -------------------------------------------------------- */
.nk-marquee {
	overflow: hidden;
	border-block: 1px solid var(--wp--preset--color--line);
	padding-block: clamp(0.75rem, 1.5vw, 1.25rem);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.nk-marquee__track {
	display: flex;
	width: max-content;
	animation: nk-marquee 90s linear infinite;
}

.nk-marquee__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.nk-marquee__group > * {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 500;
	color: var(--wp--preset--color--umbra);
	padding-inline: clamp(1rem, 2.5vw, 2rem);
	white-space: nowrap;
	margin: 0;
}

.nk-marquee__group > *::after {
	content: "◆";
	margin-inline-start: clamp(1rem, 2.5vw, 2rem);
	color: var(--wp--preset--color--ocker);
	font-size: 0.5em;
	vertical-align: 0.35em;
}

@keyframes nk-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* 6.3 Zeitleiste ---------------------------------------------------------- */
.nk-timeline {
	position: relative;
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.nk-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(5.5rem, 8rem) 1fr;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	background: rgba(251, 250, 247, 0.66);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card, 12px);
	transition: transform 260ms var(--nk-ease-out), border-color 260ms var(--nk-ease), background-color 260ms var(--nk-ease);
}

.nk-timeline__item:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	background: rgba(251, 250, 247, 0.9);
}

/* Verbindende Linie mit Knoten — macht aus Kaesten eine Reise. */
.nk-timeline__item::before {
	content: "";
	position: absolute;
	left: clamp(1.25rem, 2.4vw, 1.9rem);
	top: -1px;
	width: 2px;
	height: calc(100% + clamp(1.25rem, 2.5vw, 2rem));
	background: linear-gradient(to bottom, var(--wp--preset--color--line), rgba(228, 222, 213, 0));
	z-index: 0;
}

/* Auch der letzte Eintrag trägt seinen Strich — nur eben ohne Überhang,
   weil darunter kein Nachfolger mehr kommt. Vorher fehlte er ganz und der
   älteste Eintrag wirkte aus der Reise herausgelöst. */
.nk-timeline__item:last-child::before {
	height: 100%;
	background: linear-gradient(to bottom, var(--wp--preset--color--line), rgba(228, 222, 213, 0.35));
}

.nk-timeline__period {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	align-self: start;
	gap: 0.5em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--petrol-tint);
	border-radius: 999px;
	padding: 0.35em 0.85em;
	margin: 0;
}

.nk-timeline__body :is(h2, h3) {
	margin: 0;
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.15;
}

/* Die Karten-Titel bleiben einzeilig — fit-headings.js verkleinert die
   Schrift, bis der Titel passt. Nur mit JS (sonst liefe ein langer Titel
   über den Rand) und nicht auf dem Telefon (dort darf er umbrechen). */
@media (min-width: 641px) {
	.nk-js .nk-timeline__body :is(h2, h3) {
		white-space: nowrap;
	}
}

.nk-timeline__body .nk-head-row {
	margin-block-end: 0.6rem;
}

.nk-timeline__body .nk-icon {
	width: 2.75rem;
	height: 2.75rem;
}

.nk-timeline__body .nk-icon svg {
	width: 1.35rem;
	height: 1.35rem;
}

.nk-timeline__body p {
	margin: 0 0 0.6rem;
}

.nk-timeline__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}

.nk-timeline__tags > * {
	margin: 0;
}

/* Wie .nk-timeline__period: inline-flex + mittige Ausrichtung + knappe
   line-height. Vorher erbte die Pille die Fliesstext-Zeilenhöhe und sass je
   nach Wort (mit/ohne Unterlängen) sichtbar unterschiedlich in der Form —
   „Inventur" wirkte nach oben verrutscht. */
.nk-tag {
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--wp--preset--color--umbra);
	border: 1px solid rgba(107, 74, 46, 0.22);
	border-radius: 999px;
	padding: 0.3em 0.75em;
	background: rgba(239, 228, 210, 0.5);
}

@media (max-width: 640px) {
	.nk-timeline__item {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.nk-timeline__item::before { display: none; }
	.nk-timeline__period { justify-self: start; }
}

/* 6.4 Cluster (Kompetenzen / Werte) --------------------------------------- */
.nk-cluster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.nk-cluster > * {
	position: relative;
	display: grid;
	gap: 0.4rem;
	align-content: start;
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	background: rgba(251, 250, 247, 0.66);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card, 12px);
	transition: transform 260ms var(--nk-ease-out), border-color 260ms var(--nk-ease);
}

.nk-cluster > *:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}

.nk-cluster > *:hover .nk-icon {
	transform: translateY(-2px) rotate(-4deg);
	background: color-mix(in srgb, var(--wp--preset--color--petrol-tint), var(--wp--preset--color--accent) 20%);
}

.nk-cluster :is(h2, h3) {
	margin: 0;
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.2;
}

.nk-cluster p {
	margin: 0;
	color: var(--nk-ink-soft);
	font-size: 0.98rem;
}

/* 6.5 Standpunkte --------------------------------------------------------- */
.nk-standpunkte {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.nk-standpunkte > * {
	position: relative;
	display: grid;
	gap: 0.5rem;
	padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.6rem) clamp(2rem, 3.5vw, 3rem);
	background: rgba(251, 250, 247, 0.6);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card, 12px);
}

.nk-standpunkte > *::before {
	content: "";
	position: absolute;
	left: clamp(0.85rem, 1.6vw, 1.35rem);
	top: clamp(1.4rem, 2.6vw, 2rem);
	bottom: clamp(1.1rem, 2.2vw, 1.6rem);
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(to bottom, var(--wp--preset--color--accent), rgba(31, 78, 74, 0.15));
}

.nk-standpunkte :is(h2, h3) {
	margin: 0;
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.15;
}

.nk-standpunkte p {
	margin: 0;
}

/* 6.6 Bild/Text-Split ----------------------------------------------------- */
.nk-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: center;
}

.nk-split figure {
	margin: 0;
	position: relative;
}

.nk-split img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: clamp(14px, 2vw, 24px);
}

/* Wenn ein Bild bewusst als Hochformat laufen soll. */
.nk-split img.nk-ratio-portrait {
	aspect-ratio: 4 / 5;
}

/* Foto-Platzhalter, solange kein Bild eingesetzt ist. */
.nk-photo-slot {
	display: grid;
	place-items: center;
	gap: 0.5rem;
	aspect-ratio: 4 / 5;
	border: 2px dashed rgba(107, 74, 46, 0.35);
	border-radius: clamp(14px, 2vw, 24px);
	background: rgba(239, 228, 210, 0.45);
	color: var(--wp--preset--color--umbra);
	font-size: var(--wp--preset--font-size--s);
	text-align: center;
	padding: 1.5rem;
}

/* 6.7 Zahlen-Blickfang ---------------------------------------------------- */
/* Auch auf dem Telefon nebeneinander: Untereinander fraßen die drei Kacheln
   fast 270px Höhe, ohne dass ihr Inhalt das gebraucht hätte. Der Text darin
   ist kurz genug, dass drei schmale Spalten funktionieren. */
/* -------------------------------------------------------------------------
 * Zweispalter für Abschnitte mit Faktenkacheln (z. B. „Woher ich komme").
 *
 * Vorher lief der Fließtext über die volle 1000px-Spalte (~110 Zeichen/Zeile,
 * zu lang) und die drei Fakten hingen als Streifen darunter. Jetzt: Text links
 * auf ruhige Leseweite (~68 Zeichen), die Fakten als schlanke Spalte rechts
 * daneben. Die Leere rechts wird also durch VORHANDENEN Inhalt gefüllt, nicht
 * durch breitgezogenen Text. Reine Umsortierung per :has(), kein Markup.
 *
 * Die linke Spaltenbreite (1fr von 1000px minus Rail) ergibt von selbst die
 * ruhige Leseweite — ohne gegen die max-width-Regeln kämpfen zu müssen.
 * Greift ab 900px; darunter bleibt alles gestapelt (Text, dann Fakten quer).
 * ---------------------------------------------------------------------- */
@media (min-width: 900px) {
	.nk-section.has-background:has(> .nk-facts) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
		column-gap: clamp(1.5rem, 4vw, 3rem);
		align-items: start;
	}

	/* Kopf (Kategorie + Überschrift) spannt über beide Spalten. */
	.nk-section.has-background:has(> .nk-facts) > .nk-section__head {
		grid-column: 1 / -1;
	}

	/* Absätze bleiben in der linken Spalte. */
	.nk-section.has-background:has(> .nk-facts) > p,
	.nk-section.has-background:has(> .nk-facts) > .wp-block-list,
	.nk-section.has-background:has(> .nk-facts) > .nk-lead {
		grid-column: 1;
	}

	/* Der Abstandhalter zwischen Text und Fakten ist im Zweispalter unnötig. */
	.nk-section.has-background:has(> .nk-facts) > .wp-block-spacer {
		grid-column: 1;
		display: none;
	}

	/* Die Fakten: rechte Spalte, ab der ersten Textzeile untereinander. Der
	   große span-Wert lässt die Spalte zuverlässig über alle Textzeilen laufen
	   (robust gegen die -1-Falle bei impliziten Rasterzeilen). */
	.nk-section.has-background:has(> .nk-facts) > .nk-facts {
		grid-column: 2;
		grid-row: 2 / span 99;
		align-self: start;
		grid-template-columns: 1fr;
		gap: clamp(0.6rem, 1.4vw, 1rem);
	}
}

.nk-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.4rem, 1.6vw, 1.25rem);
}

/* Warum die letzte Kachel einer Reihe „größer" war (live gemessen, Runde 19):
   Auf dem Server gibt Blocksy jedem Block-Kind margin-block-end: 1.5em —
   außer dem LETZTEN (:last-child auf 0). In einem Raster zählt dieser Margin
   in die Zeilenhöhe hinein (140px Inhalt + 24px Margin = 164px Spur), und
   die letzte Karte OHNE Margin füllt die volle Spur: nur sie wurde 164px
   hoch. Deshalb hier: Karten in Rastern tragen keine fremden Margins. */
.nk-facts > .nk-fact,
.nk-pillars > .nk-pillar,
.nk-timeline > .nk-timeline__item,
.nk-values__list > .nk-value {
	margin-block: 0;
}

.nk-fact {
	display: grid;
	gap: 0.4rem;
	/* Rasterelemente haben von Haus aus min-width: auto — die Spalte kann
	   dann nicht unter das laengste Wort schrumpfen. Ohne diese Zeile
	   sprengt die erste Kachel auf schmalen Telefonen ihren Rahmen. */
	min-width: 0;
	padding: clamp(1.35rem, 2.4vw, 1.9rem);
	border-radius: var(--wp--custom--radius--card, 12px);
	/* Klare, ruhige Petrol-Fläche (voll deckend statt milchig) + feine Kante —
	   hebt die Karte vom schlichten Kasten zur gestalteten Fläche. */
	background: var(--wp--preset--color--petrol-tint);
	border: 1px solid rgba(31, 78, 74, 0.16);
}

.nk-fact strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	/* Lange Ortsnamen sollen umbrechen statt aus der Kachel zu laufen. */
	display: block;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* Kacheln mit Wörtern statt Zahlen brauchen weniger Schriftgröße. */
.nk-fact--word strong {
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}

.nk-fact span,
.nk-fact p {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-muted);
	/* Ohne das schiebt ein langes Wort wie "Ausbildungstag" den Text aus der
	   schmalen Kachel heraus — auf 360px rund 11px weit, quer über die
	   Nachbarkachel. */
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* Auf dem Telefon stehen drei Kacheln nebeneinander — dort wird alles
   eine Nummer kleiner, damit "seit 2018" und die Beschreibung passen.

   Dieser Block MUSS nach der Grundregel darüber stehen: Beide haben dieselbe
   Spezifitaet, und bei Gleichstand gewinnt die spaetere Regel — stuende er
   davor, waeren die 0,72rem wirkungslos. */
@media (max-width: 560px) {
	.nk-fact {
		padding: 0.7rem 0.65rem;
		gap: 0.1rem;
	}

	.nk-fact strong {
		font-size: 1.15rem;
		letter-spacing: -0.03em;
	}

	.nk-fact--word strong {
		font-size: 0.95rem;
	}

	.nk-fact span,
	.nk-fact p {
		font-size: 0.72rem;
		line-height: 1.3;
	}
}

/* 6.8 Abschluss-CTA -------------------------------------------------------
   Zwei Spalten: links die Ansprache, rechts ein Foto. Dahinter ein grosses,
   sehr zurueckhaltendes Icon und ein Punktraster — vorher war das eine
   leere farbige Flaeche mit einem Knopf in der Mitte.
   ---------------------------------------------------------------------- */
.nk-cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(80% 120% at 15% 0%, rgba(180, 128, 47, 0.25) 0%, transparent 55%),
		var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	/* Bündiges, vollflächiges Band statt abgerundeter Karte (Fundament §3.4:
	   Radien 0 für Sektionen). So trifft das Petrol ohne durchscheinende
	   Grundfarbe direkt auf den Footer — keine Streifen an der Naht. */
	border-radius: 0;
}

.nk-cta :is(h2, h3, p) {
	color: var(--wp--preset--color--on-accent);
}

/* Punktraster als ruhige Textur. */
.nk-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
	-webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
	pointer-events: none;
}

/* Grosses Icon im Hintergrund — dasselbe Mittel wie bei den Karten. */
.nk-cta__deko {
	position: absolute;
	right: -3.5rem;
	bottom: -4.5rem;
	z-index: 0;
	width: clamp(14rem, 26vw, 22rem);
	height: clamp(14rem, 26vw, 22rem);
	opacity: 0.11;
	pointer-events: none;
	color: var(--wp--preset--color--on-accent);
}

.nk-cta__deko svg {
	width: 100%;
	height: 100%;
	stroke-width: 0.8;
}

.nk-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	max-width: var(--nk-content);
	margin-inline: auto;
}

.nk-cta__text > * {
	max-width: 34ch;
}

.nk-cta__text .nk-eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.nk-cta__text .nk-eyebrow::before {
	background: rgba(255, 255, 255, 0.72);
}

.nk-cta__text :is(h2, h3) {
	margin: 0 0 0.6rem;
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.nk-cta__text p {
	margin: 0;
	line-height: 1.55;
}

.nk-cta__photo {
	margin: 0;
	position: relative;
}

.nk-cta__photo img {
	display: block;
	width: 100%;
	height: clamp(13rem, 24vw, 19rem);
	object-fit: cover;
	object-position: 50% 38%;
	border-radius: clamp(14px, 2vw, 22px);
	box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.6);
}

/* Die Schaltflaeche steht links unter dem Text, nicht mehr mittig. */
.nk-cta .wp-block-buttons {
	justify-content: flex-start;
	margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 900px) {
	.nk-cta__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}

/* Heller Knopf auf der dunklen Fläche.
   Die Selektoren müssen die Grundregel `.wp-block-button.nk-pill
   .wp-block-button__link` (0-3-0) schlagen — mit `.nk-cta .wp-block-button__link`
   (0-2-0) allein blieb der Knopf dunkel auf dunkel, also praktisch unlesbar.
   Reihenfolge hilft dagegen nicht, Spezifität geht vor. */
.nk-cta .wp-block-button.nk-pill .wp-block-button__link,
.nk-cta .nk-pill > .wp-block-button__link,
.nk-cta a.nk-pill {
	background: var(--wp--preset--color--on-accent);
	color: var(--wp--preset--color--accent);
}

.nk-cta .wp-block-button.nk-pill .wp-block-button__link:hover,
.nk-cta .nk-pill > .wp-block-button__link:hover,
.nk-cta a.nk-pill:hover {
	background: #FFFFFF;
	color: var(--wp--preset--color--accent);
}

/* 6.9 Orbit — sechs Felder symmetrisch um ein Bild ----------------------- */
/* Drei links, Bild in der Mitte, drei rechts. Auf schmalen Schirmen kippt es
   sauber untereinander, das Bild wandert nach oben. */

.nk-orbit {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}

.nk-orbit__col {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-content: center;
}

.nk-orbit__media {
	order: -1;
	margin: 0;
	position: relative;
}

.nk-orbit__media img {
	width: 100%;
	border-radius: clamp(16px, 2.5vw, 28px);
	display: block;
}

/* Warmer Schein hinter dem Bild — nimmt die Mitte optisch auf.
   Einspaltig füllt das Bild die ganze Breite; ein seitlicher Überstand
   schöbe den Schein aus dem Fenster und erzeugte eine waagerechte
   Bildlaufleiste. Deshalb dort nur oben und unten überstehen. */
.nk-orbit__media::before {
	content: "";
	position: absolute;
	inset: -12% 0;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(220, 230, 227, 0.85), transparent 72%);
}

/* Dreispaltig ist das Bild nur etwa ein Drittel breit — dort ist Platz. */
@media (min-width: 1000px) {
	.nk-orbit__media::before {
		inset: -12% -8%;
	}
}

/* Die Karten. Jede hat ein grosses Icon im Hintergrund und eine eigene
   Form — abwechselnd staerker gerundet, damit die Reihe nicht schematisch
   wirkt. Die Toenungen wechseln ebenfalls. */
.nk-orbit__item {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 0.45rem;
	padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.75rem);
	border: 1px solid rgba(228, 222, 213, 0.95);
	box-shadow: 0 -16px 38px -26px rgba(26, 23, 20, 0.45);
	transition: border-color 320ms var(--nk-ease), box-shadow 320ms var(--nk-ease-out);
}

/* Vier Formen im Wechsel.
   Die Töne sind DECKEND. Vorher waren sie leicht durchsichtig (Alpha 0,90
   bis 0,96). Solange die Karten nebeneinander standen, fiel das nicht auf —
   seit sie sich beim Scrollen um rund 320px überlappen, schimmerte die
   darunterliegende Karte samt Text durch. Die Werte hier sind die alten
   Farben, ausgerechnet auf dem Seitenhintergrund: optisch derselbe Ton,
   aber ohne Durchscheinen. */
.nk-orbit__item:nth-child(1) { border-radius: 26px 26px 26px 4px; background: #FCFAF5; }
.nk-orbit__item:nth-child(2) { border-radius: 4px 26px 26px 26px;  background: #DEE7E3; }
.nk-orbit__item:nth-child(3) { border-radius: 26px 4px 26px 26px;  background: #EFE5D4; }

.nk-orbit__col:last-of-type .nk-orbit__item:nth-child(1) { background: #EAE0D8; }
.nk-orbit__col:last-of-type .nk-orbit__item:nth-child(2) { background: #FCFAF5; }
.nk-orbit__col:last-of-type .nk-orbit__item:nth-child(3) { background: #DEE7E3; }

.nk-orbit__item:hover {
	border-color: rgba(31, 78, 74, 0.4);
	box-shadow: 0 -18px 46px -24px rgba(26, 23, 20, 0.55);
}

/* Titel und Text liegen ueber dem Hintergrund-Icon. */
.nk-orbit__item :is(h2, h3),
.nk-orbit__item p {
	position: relative;
	z-index: 1;
}

.nk-orbit__item :is(h2, h3) {
	margin: 0;
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.2;
}

.nk-orbit__item p {
	margin: 0;
	color: var(--nk-ink-soft);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Das Icon wird zum grossen, ruhigen Wasserzeichen. Deckkraft niedrig
   genug, dass der Text darueber voll lesbar bleibt. */
.nk-orbit__item .nk-icon {
	position: absolute;
	right: -1.5rem;
	bottom: -2rem;
	z-index: 0;
	width: 11rem;
	height: 11rem;
	margin: 0;
	background: none;
	border-radius: 0;
	opacity: 0.13;
	pointer-events: none;
	transition: transform 500ms var(--nk-ease-out), opacity 500ms var(--nk-ease-out);
}

.nk-orbit__item .nk-icon svg {
	width: 100%;
	height: 100%;
	stroke-width: 1;
}

.nk-orbit__item:hover .nk-icon {
	transform: rotate(-6deg) scale(1.06);
	opacity: 0.2;
}

@media (min-width: 1000px) {
	/* Drei Spalten: Karten links, Foto in der Mitte, Karten rechts.
	   Ohne JavaScript ist das die ganze Geschichte: alles sichtbar, die
	   Spalten sind normale Raster mit Abstand (Grundregel oben). */
	.nk-orbit {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
		column-gap: clamp(1rem, 2vw, 2rem);
		align-items: center;
	}

	.nk-orbit__media {
		order: 0;
	}

	.nk-orbit__media img {
		height: var(--nk-orbit-h);
		object-fit: cover;
	}

	/* Gleiche Ecken für alle. Die wechselnden Formen weiter oben
	   (26/26/26/4, 4/26/26/26 …) sind für Karten gedacht, die NEBENeinander
	   stehen — versetzt übereinander schauten sonst an jeder Ecke Zipfel
	   hervor. Der Kindselektor liefert dieselbe Spezifität wie die
	   :nth-child-Regeln. */
	.nk-orbit__col > .nk-orbit__item {
		border-radius: 26px;
	}

	.nk-orbit__col > .nk-orbit__item:nth-child(1) { --nk-i: 0; z-index: 1; }
	.nk-orbit__col > .nk-orbit__item:nth-child(2) { --nk-i: 1; z-index: 2; }
	.nk-orbit__col > .nk-orbit__item:nth-child(3) { --nk-i: 2; z-index: 3; }
	.nk-orbit__col > .nk-orbit__item:nth-child(4) { --nk-i: 3; z-index: 4; }

	/* --- Der Halt (orbit.js) --------------------------------------------
	   orbit.js legt um die Sektion eine hohe Bühne (.nk-orbit-buehne) und
	   heftet die Sektion darin fest (position: sticky). Während man durch
	   die Bühne scrollt, fahren die Karten REIHENWEISE von links und rechts
	   herein und stapeln sich versetzt — der Versatz ist so gewählt, dass
	   von jeder Karte die Überschrift sichtbar bleibt. Erst wenn alle sechs
	   stehen, gibt die Bühne die Seite wieder frei. */

	.nk-orbit-buehne {
		height: calc(100vh + var(--nk-orbit-strecke));
	}

	/* Der Halter klebt als Ganzes: ÜBERSCHRIFT UND KARTEN. orbit.js legt die
	   Einleitungs-Sektion (h1 + Vorspann) mit in den Halter — beide bleiben
	   stehen, bis alle sechs Karten hereingefahren sind, erst dann läuft die
	   Seite weiter.

	   Kein height: 100vh mehr: Der Halter ist nur so hoch wie sein Inhalt.
	   Dadurch schleppt die Sektion nach dem Halt keinen leeren Rest mehr
	   hinter sich her (der Abstand zur nächsten Sektion war eine halbe
	   Fensterhöhe). Ist der Inhalt höher als das Fenster, schiebt orbit.js
	   den Halter per --nk-halter-top so weit hoch, dass die Karten unten
	   sichtbar bleiben.

	   overflow-x: clip hält die seitlich geparkten Karten aus der
	   Scroll-Breite heraus; sichtbar ist davon nichts. */
	.nk-orbit-halter {
		position: sticky;
		top: var(--nk-halter-top, 0px);
		overflow-x: clip;
	}

	/* Innerhalb des Halters rücken Kopf und Karten dicht zusammen —
	   die normalen Sektions-Abstände gelten hier nicht. */
	.nk-orbit-halter > .nk-section {
		margin-block: 0;
	}

	.nk-orbit-halter > .nk-section:first-child {
		padding-block-start: clamp(1.25rem, 4svh, 2.5rem);
		padding-block-end: 0;
	}

	.nk-orbit-halter > .nk-section:last-child {
		padding-block-start: clamp(0.75rem, 2.5svh, 1.5rem);
		padding-block-end: clamp(1.5rem, 4svh, 2.5rem);
	}

	/* Im Halt zählt jede Zeile Höhe: Überschrift und Vorspann treten eine
	   Stufe kürzer, die Karten-Titel wickeln mit 1.1rem seltener um — das
	   drückt den gemessenen Stapel-Versatz und damit den ganzen Halter unter
	   die Fensterhöhe. */
	.nk-orbit-halter .nk-section__head h1 {
		font-size: clamp(1.8rem, 3vw, 2.6rem);
	}

	.nk-orbit-halter .nk-section__head .nk-lead {
		font-size: 1rem;
	}

	.nk-orbit--pin .nk-orbit__item :is(h2, h3) {
		font-size: 1.1rem;
	}

	/* Die Spalte wird zum festen Bezugsrahmen: so hoch wie eine Karte plus
	   zwei Versätze — genau die Höhe des fertigen Stapels. */
	.nk-orbit--pin .nk-orbit__col {
		position: relative;
		height: calc(var(--nk-orbit-h) + 2 * var(--nk-orbit-versatz));
	}

	/* Jede Karte sitzt absolut auf ihrem Platz im Stapel: Karte 2 beginnt
	   einen Versatz tiefer als Karte 1 und deckt deren Rumpf ab — die
	   Überschrift von Karte 1 bleibt frei. Karte 3 ebenso. Verstecktes
	   wartet seitlich vor dem Fenster (links negativ, rechts positiv). */
	.nk-orbit--pin .nk-orbit__item {
		position: absolute;
		inset-inline: 0;
		top: calc(var(--nk-i) * var(--nk-orbit-versatz));
		height: var(--nk-orbit-h);
		min-height: 0;
		margin-block: 0;
		opacity: 0;
		transform: translateX(calc(var(--nk-seite, -1) * 55vw));
		transition:
			opacity 620ms var(--nk-ease-out),
			transform 620ms var(--nk-ease-out);
	}

	.nk-orbit--pin .nk-orbit__col:last-of-type .nk-orbit__item {
		--nk-seite: 1;
	}

	.nk-orbit--pin .nk-orbit__item.is-da {
		opacity: 1;
		transform: none;
	}
}

/* Auf niedrigen Fenstern (Laptop mit Leiste unten) den Stapel etwas
   stauchen, damit Karten samt Versatz bequem in die Bühne passen. */
@media (min-width: 1000px) and (max-height: 760px) {
	:root {
		--nk-orbit-h: 21rem;
	}
}

/* -------------------------------------------------------------------------
   6.10a Karten-Stapel — beim Scrollen schiebt sich Karte über Karte, die
   Ziffer der darunterliegenden bleibt sichtbar.

   Die Karten stehen im normalen Textfluss untereinander und kleben der Reihe
   nach fest (position: sticky), jede etwas tiefer als die vorherige. Beim
   Scrollen fährt dadurch jede Karte sichtbar von unten über die davor, und
   von der darunterliegenden bleibt genau der Streifen mit Ziffer und
   Schlagwort stehen.

   Bewusst ohne Skript. Die vorherige Fassung hat den Abschnitt mit GSAP
   festgehalten (pin) und die Karten per Rechnung verschoben. Daraus kamen
   drei Fehler, die sich nicht sauber beheben liessen:
     · Die Überschrift lag ausserhalb des festgehaltenen Bereichs und lief
       weg, obwohl der Stapel noch gar nicht fertig war.
     · Zwei festgehaltene Abschnitte auf einer Seite (Kompetenzen und "Wie ich
       arbeite") überlappten sich — der zweite begann, bevor der erste endete.
     · Die Startpositionen lagen ausserhalb des Behälters und waren dadurch
       im nächsten Abschnitt sichtbar.

   Sticky kennt keines dieser Probleme: Es wird nichts gemessen, nichts am
   Scrollen gedreht und nichts zur Laufzeit nachgerechnet. Der Browser macht
   es allein — auch ohne JavaScript und in jedem Fenster gleich.
   ---------------------------------------------------------------------- */

.nk-stack {
	position: relative;
	/* Bewusst ein schlichter Block, KEIN Raster: Ein klebendes Rasterelement
	   hat laut Spezifikation seinen Rasterbereich als Bezugsrahmen — es
	   duerfte sich darin gar nicht bewegen. Chrome legt das grosszuegiger
	   aus, andere Browser womoeglich nicht; dort klebte dann nichts mehr.
	   Als normales Block-Kind ist der Bezugsrahmen eindeutig der Stapel
	   selbst, und das Verhalten ist ueberall dasselbe.
	   Die Karten stehen ohne Zwischenraum untereinander — das ist Absicht,
	   dadurch geht der Stapel beim Scrollen lueckenlos ineinander ueber. */
	display: block;
	/* Breite kommt aus --nk-content weiter oben — hier nicht ueberschreiben. */
}

/* Der Nachlauf als echter Inhalt. Warum kein padding: siehe --nk-stack-tail. */
.nk-stack::after {
	content: "";
	display: block;
	height: var(--nk-stack-tail);
}

.nk-stack > .nk-panel,
.nk-stack > .wp-block-group {
	position: sticky;
	/* Jede Karte klebt eine Stufe tiefer als die vorherige. --nk-i wird
	   unten je Position gesetzt. */
	top: calc(var(--nk-stack-top) + var(--nk-i, 0) * var(--nk-stack-step));
	padding-block-start: clamp(3.25rem, 5vw, 4rem);
	box-shadow: 0 -20px 44px -26px rgba(26, 23, 20, 0.5);
	/* .nk-panel bringt weiter unten 1,75rem Aussenabstand mit. Im Stapel
	   muss der weg: er reisst Lücken zwischen die Karten UND verbraucht den
	   Klebeweg, den die unterste Karte braucht — sie kam sonst nie oben an. */
	margin-block: 0;
	/* Gemeinsame Mindesthöhe, damit die Karten eines Stapels möglichst gleich
	   hoch sind und sich am Ende des Abschnitts gleichzeitig lösen.

	   Ehrlich dazugesagt: Das gelingt nicht überall. Auf "Über mich" und
	   "Werte" liegen alle Karten darunter und werden dadurch angeglichen.
	   Bei "Wie ich arbeite" ist die erste Karte von Haus aus 493px hoch
	   (sie hat den längsten Text) — dort greift der Wert nicht, und die
	   Karten lösen sich um bis zu 30px versetzt. Höher zu gehen wäre der
	   schlechtere Tausch: Bei 800px Fensterbreite sind dieselben Karten nur
	   296px hoch, eine Mindesthöhe über 493px risse dort 200px Leerraum in
	   jede Karte.

	   Dass der fertige Stapel beim Verlassen des Abschnitts zusammenfährt,
	   liegt in der Natur der Sache: Ein klebendes Element wird am Ende
	   seines Behälters wieder hochgeschoben. Das ist gewollt — so verlässt
	   der Stapel das Bild, statt abrupt zu verschwinden. */
	min-height: 27rem;
}

/* Variante "hoch" (bei "Wie ich arbeite").
   Hier bleibt die Treppe: Jede Karte klebt eine Stufe tiefer als die
   vorherige, damit von den darunterliegenden die Ziffer und das Schlagwort
   sichtbar bleiben — 01, 02, 03 stehen also untereinander am oberen Rand,
   während die oberste Karte den Rest verdeckt.
   Die gemeinsame Mindesthöhe sorgt nur dafür, dass alle Karten dieses
   Stapels gleich hoch sind und sich gleichzeitig lösen. 32rem liegt über
   der höchsten gemessenen Karte (493px). */
.nk-stack--hoch > .nk-panel,
.nk-stack--hoch > .wp-block-group {
	min-height: 32rem;
}

.nk-stack > *:nth-child(1) { --nk-i: 0; z-index: 1; }
.nk-stack > *:nth-child(2) { --nk-i: 1; z-index: 2; }
.nk-stack > *:nth-child(3) { --nk-i: 2; z-index: 3; }
.nk-stack > *:nth-child(4) { --nk-i: 3; z-index: 4; }
.nk-stack > *:nth-child(5) { --nk-i: 4; z-index: 5; }
.nk-stack > *:nth-child(6) { --nk-i: 5; z-index: 6; }

.nk-stack .nk-panel__no {
	top: clamp(0.9rem, 1.8vw, 1.35rem);
	right: auto;
	left: clamp(1.5rem, 3vw, 3rem);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	/* Volle Deckkraft statt 0.55: auf den hellen Toenungen reichte der
	   Kontrast sonst nicht fuer WCAG AA. */
	opacity: 1;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0;
}

/* Kurzes Schlagwort neben der Ziffer — so ist im Streifen erkennbar,
   welche Karte darunter liegt. */
.nk-panel__tag {
	position: absolute;
	top: clamp(1.15rem, 2vw, 1.6rem);
	left: calc(clamp(1.5rem, 3vw, 3rem) + 4.75ch);
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	/* Kein opacity-Trick: auf Sand und Petrol-Tint blieb der Kontrast sonst
	   unter dem AA-Wert. Stattdessen eine Farbe, die dort sicher traegt. */
	color: var(--nk-ink-soft);
}

.nk-panel--dark .nk-panel__tag {
	color: #A79E92;
}

.nk-panel--dark .nk-panel__no {
	color: #FFFFFF;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   Aufklappbare Karten auf dem Telefon

   Statt sechs bildschirmhohe Karten hintereinander stehen dort nur die Titel;
   angetippt klappt die Karte auf. Zugeklappt wird über das Attribut hidden,
   nicht über CSS — dadurch ist der Inhalt auch für Vorleseprogramme wirklich
   zu und der Knopf meldet seinen Zustand.
   ---------------------------------------------------------------------- */

.nk-klapp {
	position: relative;
}

.nk-klapp__knopf {
	position: absolute;
	top: 0;
	right: 0;
	width: 3rem;
	height: 3.25rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
}

.nk-panel--dark .nk-klapp__knopf {
	color: var(--wp--preset--color--on-accent);
}

.nk-klapp__pfeil svg {
	width: 1.35rem;
	height: 1.35rem;
	transition: transform 260ms var(--nk-ease-out);
}

.nk-klapp.is-offen .nk-klapp__pfeil svg {
	transform: rotate(180deg);
}

.nk-klapp__knopf:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 8px;
}

/* Platz für den Pfeil, damit er nicht auf der Überschrift liegt. */
.nk-klapp :is(h2, h3) {
	padding-inline-end: 2.5rem;
}

/* Die Titelzeile schaltet mit — dafür der Zeigefinger als Hinweis. */
.nk-klapp .nk-head-row,
.nk-klapp > :is(h2, h3) {
	cursor: pointer;
}

.nk-klapp__koerper > :first-child {
	margin-block-start: 0.75rem;
}

/* Auf schmalen Schirmen kein Stapel — dort ist Scrollweg zu kostbar und die
   Karten sind fast so hoch wie das Fenster. Sie stehen schlicht
   untereinander. */
@media (max-width: 780px) {
	/* Nichts klebt — also auch kein Nachlauf noetig. */
	.nk-stack::after {
		display: none;
	}

	.nk-stack > .nk-panel,
	.nk-stack > .wp-block-group {
		/* relative, NICHT static. Beides beendet das Kleben — aber static
		   nimmt der Karte auch den Bezugsrahmen. Ziffer und Schlagwort sind
		   absolut in der Karte gesetzt; ohne Bezugsrahmen fallen sie auf den
		   Stapel zurück und landen alle drei übereinander am oberen Rand. */
		position: relative;
		box-shadow: none;
		padding-block-start: clamp(2.75rem, 8vw, 3.25rem);
		margin-block-end: 1rem;
		min-height: 0;
	}
}

/* -------------------------------------------------------------------------
   6.10b Klebende Abschnitts-Überschriften

   Zurzeit von keinem Pattern benutzt: Die Überschriften kollidierten mit dem
   Karten-Stapel. Die Regeln bleiben stehen, weil die Klasse jederzeit an eine
   Überschrift geschrieben werden kann, wenn der Titel doch stehen bleiben
   soll — sie kosten ohne Verwendung nichts.
   ---------------------------------------------------------------------- */

.nk-sticky-title {
	position: sticky;
	top: var(--nk-header-h, 4.25rem);
	z-index: 4;
	margin-block: 0 0.75rem;
	padding-block: 0.5rem 0.6rem;
	/* Kein fester Farbwert: der Hintergrund wird verwischt durchgereicht,
	   damit die Zeile auf hellen wie getönten Flächen funktioniert. */
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	background: linear-gradient(180deg, rgba(249, 245, 238, 0.94) 0%, rgba(249, 245, 238, 0.88) 62%, rgba(249, 245, 238, 0) 100%);
	padding-inline: 0.75rem;
	margin-inline: -0.75rem;
	border-radius: 10px;
}

/* Auf getoenten Flaechen die Toenung durchreichen, damit der Streifen
   nicht als heller Balken auffaellt. */
.has-background .nk-sticky-title {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 100%);
}

.nk-eyebrow.nk-sticky-title {
	top: calc(var(--nk-header-h, 4.25rem) - 0.25rem);
	z-index: 5;
}

@media (max-width: 780px) {
	.nk-sticky-title {
		position: static;
		backdrop-filter: none;
		background: none;
	}
}

/* 6.10 Werte — grosse Wortliste mit mitlaufendem Bild -------------------- */

.nk-values {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

.nk-values__media {
	margin: 0;
	position: relative;
}

.nk-values__media img {
	width: 100%;
	border-radius: clamp(16px, 2.5vw, 28px);
	display: block;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.nk-values__list {
	display: grid;
	gap: 0;
}

.nk-value {
	padding-block: clamp(1.25rem, 2.5vw, 2rem);
	border-top: 1px solid var(--wp--preset--color--line);
}

.nk-value:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.nk-value :is(h2, h3) {
	margin: 0 0 0.4rem;
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	/* Ruhezustand grau, im Blickfeld tiefschwarz — wie in der Referenz.
	   Das frühere #A9A29A kam auf dem Sandton nur auf 2,17:1 und war damit
	   auch als große Schrift zu blass. Dieser Wert liegt bei 3,2:1 und
	   behält den Unterschied zum aktiven Zustand trotzdem deutlich. */
	color: #877F76;
	transition: color 500ms var(--nk-ease-out);
}

.nk-value p {
	margin: 0;
	max-width: 46ch;
	/* Kein Abblenden über opacity: 0,65 auf ink-muted ergab effektiv nur
	   2,4:1. Der Ruhezustand wird stattdessen über die Farbe gesetzt —
	   gleicher Eindruck, aber durchgehend lesbar. */
	color: var(--nk-ink-soft);
	transition: color 500ms var(--nk-ease-out);
}

.nk-value.is-active :is(h2, h3) { color: var(--wp--preset--color--ink); }
.nk-value.is-active p           { color: var(--wp--preset--color--ink); }

@media (min-width: 900px) {
	.nk-values { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
	.nk-values__media { position: sticky; top: 6rem; }
}

/* 6.10c Zickzack — Karten wandern beim Scrollen abwechselnd von links
   und von rechts herein. Bricht die reine Untereinander-Leserichtung auf.
   ---------------------------------------------------------------------- */

/* Zwei Spalten statt weit auseinanderliegender Einzelkarten — dadurch
   entsteht kein leerer Streifen in der Mitte mehr. Die rechte Spalte
   sitzt etwas tiefer, das haelt den Zickzack-Charakter. */
.nk-zigzag {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.9rem, 1.8vw, 1.4rem);
	align-items: start;
	/* Die Karten starten 34px seitlich versetzt und ragen dabei kurz über den
	   Rand — das erzeugte für einen Moment eine waagerechte Bildlaufleiste.
	   clip statt hidden: es entsteht kein Scroll-Container, klebende
	   Elemente weiter oben funktionieren also weiter. Der Schlagschatten
	   hat waagerecht keine Ausdehnung (Weichzeichnung 44, Spreizung −32)
	   und wird deshalb nicht angeschnitten. */
	overflow-x: clip;
}

@media (min-width: 900px) {
	.nk-zigzag {
		grid-template-columns: 1fr 1fr;
	}

	.nk-zigzag > *:nth-child(even) {
		margin-block-start: clamp(1.5rem, 3vw, 3rem);
	}
}

.nk-zigzag > * {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	/* Kein fremder Blocksy-Margin im Raster — siehe Kommentar bei .nk-facts. */
	margin-block-end: 0;
	padding: clamp(1.25rem, 2.2vw, 1.8rem);
	border-radius: clamp(16px, 2vw, 24px);
	border: 1px solid var(--wp--preset--color--line);
	background: rgba(252, 250, 246, 0.9);
	box-shadow: 0 20px 44px -32px rgba(26, 23, 20, 0.5);
}

/* Aus der jeweiligen Richtung eingeblendet. */
.nk-js .nk-zigzag > *.nk-reveal:nth-child(odd)  { transform: translateX(-34px); }
.nk-js .nk-zigzag > *.nk-reveal:nth-child(even) { transform: translateX(34px); }
.nk-js .nk-zigzag > *.nk-reveal.is-visible      { transform: none; }

/* -------------------------------------------------------------------------
   Bildkarten im Zickzack

   Sie stehen als gleichwertige Karten zwischen den Textkarten und lockern
   die Reihe auf. Das Gestaltungsmittel ist ein versetzter Rahmen hinter dem
   Bild — eine Fläche in der Akzentfarbe, um ein paar Pixel verschoben. Das
   wirkt wie ein aufgelegtes Foto, kostet aber kein einziges Bild extra.
   ---------------------------------------------------------------------- */

.nk-zigzag > .nk-photo {
	/* Ohne Innenabstand: Das Bild füllt die Karte bis an den Rand. */
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

.nk-photo__frame {
	position: relative;
	margin: 0;
	border-radius: clamp(16px, 2vw, 24px);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 20px 44px -32px rgba(26, 23, 20, 0.5);
}

.nk-photo__frame img {
	display: block;
	width: 100%;
	height: clamp(15rem, 26vw, 20rem);
	object-fit: cover;
	object-position: 50% 28%;
}

.nk-photo--hoch .nk-photo__frame img {
	height: clamp(18rem, 32vw, 25rem);
}

.nk-photo {
	position: relative;
	/* Erzwingt einen eigenen Stapelkontext. Ohne das rutscht das ::before mit
	   z-index: -1 bis in den Wurzelkontext und wird VOR den Hintergründen
	   aller positionierten Vorfahren gezeichnet — in einer getönten Sektion
	   verschwindet der versetzte Rahmen dadurch vollständig. */
	isolation: isolate;
}

/* Der versetzte Rahmen liegt hinter dem Bild und schaut an zwei Seiten
   hervor. Rein dekorativ, deshalb ohne eigenes Element.

   Einspaltig ragt er nur nach unten: Das Band hat overflow-x: clip (gegen
   die waagerechte Bildlaufleiste der Einblendung), ein seitlicher Überstand
   würde dort abgeschnitten. */
.nk-photo::before {
	content: "";
	position: absolute;
	inset: 1.1rem 0.9rem -1.1rem 0.9rem;
	z-index: -1;
	border-radius: clamp(16px, 2vw, 24px);
	border: 1.5px solid var(--wp--preset--color--accent);
	opacity: 0.35;
	pointer-events: none;
}

/* Zweispaltig zeigt der Überstand jeweils in die Spalte hinein — dort ist
   Platz, und er wird nicht abgeschnitten. */
@media (min-width: 900px) {
	.nk-zigzag > .nk-photo:nth-child(odd)::before  { inset: 1.1rem -1.1rem -1.1rem 1.1rem; }
	.nk-zigzag > .nk-photo:nth-child(even)::before { inset: 1.1rem 1.1rem -1.1rem -1.1rem; }
}

.nk-photo__caption {
	margin: 0.85rem 0 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.45;
	color: var(--nk-ink-soft);
}

/* Grosses Icon als Wasserzeichen — wie bei den Kompetenz-Karten. */
.nk-zigzag > * > .nk-icon,
.nk-zigzag .nk-watermark {
	position: absolute;
	right: -1.25rem;
	bottom: -1.75rem;
	z-index: 0;
	width: 9rem;
	height: 9rem;
	margin: 0;
	background: none;
	border-radius: 0;
	opacity: 0.12;
	pointer-events: none;
}

.nk-zigzag > * > .nk-icon svg,
.nk-zigzag .nk-watermark svg {
	width: 100%;
	height: 100%;
	stroke-width: 1;
}

/* .nk-head-row ausgenommen: Sie muss unpositioniert bleiben, damit ihr
   Icon-Wasserzeichen an der KARTE ankert, nicht an der Kopfzeile. */
.nk-zigzag > * > :not(.nk-icon):not(.nk-watermark):not(.nk-head-row) {
	position: relative;
	z-index: 1;
}

.nk-zigzag :is(h2, h3) {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--l);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.nk-zigzag p {
	margin: 0 0 0.6rem;
}

.nk-zigzag p:last-child {
	margin-bottom: 0;
}

.nk-zigzag .nk-icon {
	margin: 0;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
}

.nk-zigzag .nk-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Die Bildkarten sind ausgenommen: Sie sollen randlos sein. Sonst legte die
   Tönung — sie steht später in der Datei und gewinnt bei gleicher
   Spezifität — einen farbigen Streifen unter das Bild, auf dem die
   Bildunterschrift ohne Innenabstand aufliegt. */
.nk-zigzag--tint > *:nth-child(3n+1):not(.nk-photo) { background: rgba(220, 230, 227, 0.85); }
.nk-zigzag--tint > *:nth-child(3n+2):not(.nk-photo) { background: rgba(239, 228, 210, 0.85); }
.nk-zigzag--tint > *:nth-child(3n+3):not(.nk-photo) { background: rgba(233, 223, 215, 0.85); }

/* Zitat-Karte — für öffentlich geteilte Aussagen. */
.nk-quote {
	border-inline-start: 3px solid var(--wp--preset--color--accent);
}

.nk-quote blockquote,
.nk-quote .nk-quote__text {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.4;
	font-weight: 500;
}

.nk-quote__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--nk-ink-soft);
	letter-spacing: 0.04em;
}

/* 6.11 Nummerierte Paneele ----------------------------------------------- */

.nk-panel {
	position: relative;
	overflow: hidden;
	border-radius: clamp(16px, 2.5vw, 28px);
	padding: clamp(1.5rem, 3.5vw, 3rem);
	margin-block-end: clamp(1rem, 2vw, 1.75rem);
}

.nk-panel__no {
	position: absolute;
	top: clamp(1rem, 2.5vw, 2rem);
	right: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	opacity: 0.28;
}

.nk-panel :is(h2, h3) {
	margin: 0 0 0.5rem;
	max-width: 22ch;
}

.nk-panel p {
	/* Ruhige Zeilenlänge — 52ch wirkte auf der 1000px-Karte noch zu breit. */
	max-width: 44ch;
}

.nk-panel--sand   { background: var(--wp--preset--color--sand-tint); }
.nk-panel--petrol { background: var(--wp--preset--color--petrol-tint); }
.nk-panel--ton    { background: var(--wp--preset--color--ton-tint); }

.nk-panel--dark {
	background: #221E1A;
	color: #EFE9E0;
}

.nk-panel--dark :is(h2, h3) { color: #FFFFFF; }
.nk-panel--dark p           { color: #C9C1B6; }
.nk-panel--dark .nk-panel__no { color: #FFFFFF; }

/* 6.12 W124 — kleines 3D-Modell aus reinem CSS --------------------------- */
/* Bewusst ohne WebGL: der W124 ist ein Dreikastenwagen mit klaren Flaechen,
   den kann man aus transformierten Ebenen bauen. Das kostet ~4 KB statt
   ~600 KB Bibliothek, laeuft auf jedem Geraet und laesst sich drehen. */

.nk-car-stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(17rem, 34vw, 26rem);
	perspective: 1400px;
	perspective-origin: 50% 42%;
	touch-action: pan-y;
	user-select: none;
}

/* Die Buehne ist mit der Tastatur erreichbar — der Fokus muss sichtbar sein. */
.nk-car-stage:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 6px;
	border-radius: 18px;
}

/* Der Hinweis bekommt eine eigene Rasterzeile unter dem Modell.
   Vorher lag er absolut am unteren Rand der Bühne — seit der Schreibtisch
   bis auf den Boden reicht, stand das Modell darüber und die Schrift lief
   mitten hinein. Mit eigener Zeile kann sich das nicht mehr überschneiden,
   egal wie groß das Modell wird. */
.nk-car-stage,
.nk-pc-stage {
	grid-template-rows: minmax(0, 1fr) auto;
}

.nk-car,
.nk-pc {
	grid-row: 1;
}

.nk-car-hint {
	grid-row: 2;
	position: relative;
	margin: 0;
	padding-block-start: 0.75rem;
	font-size: var(--wp--preset--font-size--s);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	pointer-events: none;
}

.nk-car-stage::after {
	/* Schatten auf dem Boden. */
	content: "";
	position: absolute;
	bottom: 20%;
	width: 66%;
	height: 9%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(26, 23, 20, 0.34), transparent 76%);
	filter: blur(3px);
}

/* Lackfarben. Aus den Fotos abgenommen: kräftiges Signalrot mit dunklem
   Schattenanteil. Alles über Variablen, damit die Farbe tauschbar bleibt. */
.nk-car {
	--nk-car-w: clamp(15rem, 34vw, 26rem);
	--nk-red-light: #E0433C;
	--nk-red:       #C5211F;
	--nk-red-dark:  #8E1416;
	--nk-red-deep:  #5E0D10;
	--nk-chrome:    linear-gradient(180deg, #FDFDFD 0%, #C9CCCE 45%, #8E9295 55%, #EDEFF0 100%);

	position: relative;
	width: var(--nk-car-w);
	height: calc(var(--nk-car-w) * 0.30);
	transform-style: preserve-3d;
	transform: rotateX(-9deg) rotateY(-34deg);
}

.nk-car > * {
	position: absolute;
	transform-style: preserve-3d;
}

/* Jede Karosserieflaeche ist einseitig. Zu jeder gibt es eine Innenseite
   (nk-car__panel--inner), die genau dann sichtbar wird, wenn die Aussenhaut
   wegfaellt. Dadurch entstehen keine Loecher und der Browser muss sich
   beruehrende Ebenen nicht mehr sortieren — das war die Ursache der
   weissen Luecken. Die Raeder sind Scheiben und bleiben beidseitig. */
.nk-car__side,
.nk-car__face,
.nk-car__panel {
	backface-visibility: hidden;
}

/* Innenseite: dunkel, damit sie wie Schatten im Innenraum wirkt. */
.nk-car__panel--inner {
	background: #3A1214;
}

/* Aussen nur die Drehung — damit die Rueckseiten-Ausblendung greift. */
.nk-car__side {
	background: none;
}

/* Innen der Zuschnitt auf den Umriss. Der Verlauf setzt die Lichtkante
   an der Schulter und laesst den Schweller absaufen. */
.nk-car__side-shape {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			var(--nk-red-light) 0%,
			var(--nk-red) 34%,
			var(--nk-red) 58%,
			var(--nk-red-dark) 84%,
			var(--nk-red-deep) 100%
		);
}

.nk-car__glass-side {
	position: absolute;
	inset: 0;
	background: linear-gradient(168deg, rgba(226, 238, 243, 0.96) 0%, rgba(150, 178, 190, 0.94) 46%, rgba(74, 96, 105, 0.96) 100%);
}

/* Chromleiste auf Tuerhoehe. */
.nk-car__trim {
	position: absolute;
	height: 2px;
	background: var(--nk-chrome);
	opacity: 0.9;
	border-radius: 2px;
}

.nk-car__seam {
	position: absolute;
	top: 46%;
	bottom: 6%;
	width: 1px;
	background: rgba(0, 0, 0, 0.22);
}

/* Verbindungsflaechen. Jede bekommt ihren eigenen Lichtwert — dadurch
   entsteht Plastizitaet ohne echte Beleuchtung. */
.nk-car__panel {
	position: absolute;
	background: var(--nk-red);
}

.nk-car__panel--hood      { background: linear-gradient(180deg, var(--nk-red-light), var(--nk-red)); }
.nk-car__panel--roof      { background: linear-gradient(180deg, #EE5B52, var(--nk-red-light)); }
.nk-car__panel--trunk     { background: linear-gradient(180deg, var(--nk-red-light), var(--nk-red)); }
.nk-car__panel--cowl      { background: linear-gradient(180deg, rgba(232, 243, 247, 0.97), rgba(158, 186, 198, 0.95)); }
.nk-car__panel--backlight { background: linear-gradient(180deg, rgba(150, 180, 192, 0.95), rgba(206, 226, 234, 0.95)); }
.nk-car__panel--bumper-f,
.nk-car__panel--bumper-r  { background: linear-gradient(180deg, var(--nk-red), var(--nk-red-dark)); }
.nk-car__panel--floor     { background: #2A1012; }

/* Front und Heck. */
.nk-car__face {
	position: absolute;
	background: linear-gradient(180deg, var(--nk-red) 0%, var(--nk-red-dark) 70%, var(--nk-red-deep) 100%);
}

/* Kuehlergrill mit den senkrechten Lamellen. */
.nk-car__grille {
	position: absolute;
	left: 31%;
	top: 8%;
	width: 38%;
	height: 46%;
	border-radius: 2px;
	background:
		repeating-linear-gradient(90deg, #1A1A1A 0 2px, #C7CACC 2px 3.5px),
		#1A1A1A;
	box-shadow: 0 0 0 1.5px #E3E5E6, inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.nk-car__star {
	position: absolute;
	left: 50%;
	top: 4%;
	width: 13%;
	aspect-ratio: 1;
	margin-left: -6.5%;
	border-radius: 50%;
	background: var(--nk-chrome);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Der Stern selbst: drei Speichen. */
.nk-car__star::before,
.nk-car__star::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.5px;
	height: 42%;
	margin-left: -0.75px;
	background: #6E7275;
	transform-origin: 50% 0;
}

.nk-car__star::before { transform: rotate(0deg); }
.nk-car__star::after  { transform: rotate(120deg); box-shadow: 0 0 0 0 transparent; }

/* Schriftzug in der Sternmitte — ein echter Mercedes-Stern liesse sich in
   dieser Groesse nicht sauber zeichnen, "MB" liest sich klar. */
.nk-car__star span {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 0.5em;
	letter-spacing: -0.04em;
	color: #4A4E51;
}

.nk-car__star--rear {
	top: 26%;
	width: 10%;
	margin-left: -5%;
}

/* -------------------------------------------------------------------------
   6.12b Rechner — zweites Modell aus CSS-Ebenen (Abschnitt "Technik")
   ---------------------------------------------------------------------- */

.nk-pc-stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(16rem, 30vw, 22rem);
	perspective: 1400px;
	perspective-origin: 50% 44%;
	touch-action: pan-y;
	user-select: none;
}

.nk-pc-stage::after {
	content: "";
	position: absolute;
	bottom: 22%;
	/* Breiter als frueher: der Stuhl steht vor dem Tisch und braucht
	   ebenfalls Boden unter sich. */
	width: 64%;
	height: 8%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(26, 23, 20, 0.32), transparent 76%);
	filter: blur(3px);
}

.nk-pc-stage:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 6px;
	border-radius: 18px;
}

.nk-pc {
	/* Die Szene ist rund 1,65 mal so breit und 1,15 mal so hoch wie dieser
	   Wert (Tisch + Rechner daneben). Bei 21rem ragte sie unten und rechts
	   aus der Buehne heraus — deshalb kleiner. */
	--nk-pc-w: clamp(9rem, 19vw, 16.5rem);
	--nk-case: #2E3234;
	--nk-case-light: #454A4D;
	--nk-case-dark: #1B1E20;
	/* Weiss der Monitore und des Schreibtischs — leicht warm, damit es zum
	   Bone der Seite passt statt kalt herauszustechen. */
	--nk-white: #F7F5F1;
	--nk-white-mid: #E6E2DB;
	--nk-white-dark: #CFC9C0;
	position: relative;
	width: var(--nk-pc-w);
	/* Hoehe wie die tatsaechliche Szene, damit die Buehne sie mittig setzt. */
	height: calc(var(--nk-pc-w) * 1.15);
	transform-style: preserve-3d;
}

.nk-pc > *,
.nk-pc__box,
.nk-pc__group {
	position: absolute;
	transform-style: preserve-3d;
}

.nk-pc__face {
	position: absolute;
	background: var(--nk-case);
	backface-visibility: hidden;
}

/* Innenseiten — verhindern Loecher bei jedem Blickwinkel. */
.nk-pc__face--inner { background: #15181A; }

/* Schreibtisch und Beine in warmem Weiss. */
.nk-pc__desk  { background: linear-gradient(180deg, var(--nk-white), var(--nk-white-mid)); }
.nk-pc__desk.nk-pc__face--top    { background: var(--nk-white); }
.nk-pc__desk.nk-pc__face--bottom { background: var(--nk-white-dark); }
.nk-pc__leg   { background: linear-gradient(180deg, var(--nk-white-mid), var(--nk-white-dark)); }

/* Monitore ebenfalls weiss. */
.nk-pc__mon { background: linear-gradient(180deg, var(--nk-white), var(--nk-white-mid)); }
.nk-pc__mon.nk-pc__face--side   { background: var(--nk-white-dark); }
.nk-pc__mon.nk-pc__face--back   { background: var(--nk-white-mid); }

/* Bildflaeche — ruhiger Verlauf in den Seitenfarben. */
.nk-pc__screen {
	position: absolute;
	border-radius: 3px;
	background:
		linear-gradient(150deg, rgba(31, 78, 74, 0.85), rgba(26, 23, 20, 0.92) 55%, rgba(107, 74, 46, 0.8)),
		#1A1714;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	backface-visibility: hidden;
}

/* Rechner in Anthrazit — der einzige dunkle Koerper der Szene. */
.nk-pc__case { background: linear-gradient(180deg, var(--nk-case-light), var(--nk-case)); }
.nk-pc__case.nk-pc__face--front { background: linear-gradient(165deg, #3A3F42, #222628); }
.nk-pc__case.nk-pc__face--back  { background: var(--nk-case-dark); }
.nk-pc__case.nk-pc__face--top   { background: linear-gradient(180deg, #4E5457, #383D40); }
.nk-pc__case.nk-pc__face--bottom{ background: #141618; }

/* Glasseite mit Blick auf die Beleuchtung. */
.nk-pc__glass {
	position: absolute;
	backface-visibility: hidden;
	background:
		radial-gradient(60% 40% at 30% 28%, rgba(31, 78, 74, 0.55), transparent 70%),
		radial-gradient(50% 35% at 70% 72%, rgba(180, 128, 47, 0.4), transparent 70%),
		linear-gradient(150deg, rgba(200, 220, 226, 0.35), rgba(40, 48, 52, 0.6));
	box-shadow: inset 0 0 0 2px rgba(220, 230, 227, 0.25);
}

.nk-pc__fan {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(220, 230, 227, 0.9) 0 12%, rgba(31, 78, 74, 0.55) 14% 46%, rgba(20, 24, 26, 0.9) 48%);
	box-shadow: inset 0 0 0 2px rgba(200, 215, 220, 0.35);
	animation: nk-fan 4s linear infinite;
}

@keyframes nk-fan {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.nk-pc__strip {
	position: absolute;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(31, 78, 74, 0.9), rgba(180, 128, 47, 0.9));
	box-shadow: 0 0 12px rgba(180, 128, 47, 0.45);
}

/* Tastatur und Maus — weiss wie die Monitore, gleiches Dreistufen-Licht. */
.nk-pc__kbd,
.nk-pc__mouse {
	background: linear-gradient(180deg, var(--nk-white), var(--nk-white-mid));
}

.nk-pc__kbd.nk-pc__face--top,
.nk-pc__mouse.nk-pc__face--top {
	background: var(--nk-white);
}

.nk-pc__kbd.nk-pc__face--side,
.nk-pc__kbd.nk-pc__face--bottom,
.nk-pc__mouse.nk-pc__face--side,
.nk-pc__mouse.nk-pc__face--bottom {
	background: var(--nk-white-dark);
}

/* Das Tastenraster: zwei Streifenmuster uebereinander ergeben die Tasten. */
.nk-pc__keys {
	position: absolute;
	backface-visibility: hidden;
	border-radius: 2px;
	opacity: 0.55;
	background:
		repeating-linear-gradient(90deg, var(--nk-white-dark) 0 4.5%, transparent 4.5% 7%),
		repeating-linear-gradient(180deg, var(--nk-white-dark) 0 16%, transparent 16% 25%);
}

/* Lautsprecher und Stuhl in Anthrazit — sie gehoeren zur Rechner-Familie. */
.nk-pc__spk,
.nk-pc__chair {
	background: linear-gradient(180deg, var(--nk-case-light), var(--nk-case));
}

.nk-pc__spk.nk-pc__face--top,
.nk-pc__chair.nk-pc__face--top {
	background: linear-gradient(180deg, #4E5457, #383D40);
}

.nk-pc__spk.nk-pc__face--side,
.nk-pc__spk.nk-pc__face--back,
.nk-pc__chair.nk-pc__face--side {
	background: var(--nk-case-dark);
}

.nk-pc__chair.nk-pc__face--bottom {
	background: #141618;
}

/* Die Membran: ruhig, mit Petrol-Ring — bewusst OHNE die Luefter-Drehung. */
.nk-pc__spk-cone {
	position: absolute;
	border-radius: 50%;
	backface-visibility: hidden;
	background: radial-gradient(circle at 50% 45%, rgba(220, 230, 227, 0.85) 0 10%, rgba(31, 78, 74, 0.5) 12% 44%, rgba(20, 24, 26, 0.95) 46%);
	box-shadow: inset 0 0 0 2px rgba(200, 215, 220, 0.3);
}

/* Das Lehnenpolster mit den beiden Akzentstreifen der Seite. */
.nk-pc__chair-back {
	position: absolute;
	backface-visibility: hidden;
	border-radius: 6px;
	background:
		linear-gradient(90deg, transparent 0 18%, rgba(31, 78, 74, 0.55) 18% 26%, transparent 26% 74%, rgba(180, 128, 47, 0.45) 74% 82%, transparent 82%),
		linear-gradient(180deg, #3A3F42, #24282A);
	box-shadow: inset 0 0 0 1px rgba(220, 230, 227, 0.14);
}

@media (prefers-reduced-motion: reduce) {
	.nk-pc__fan { animation: none; }
}

/* -------------------------------------------------------------------------
   6.12c Fantasy — drittes Modell: ein Stapel Bände mit Kristall
   (Abschnitt „Was mich fasziniert")
   ---------------------------------------------------------------------- */

.nk-fantasy-stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(16rem, 30vw, 22rem);
	perspective: 1400px;
	perspective-origin: 50% 42%;
	touch-action: pan-y;
	user-select: none;
}

.nk-fantasy-stage::after {
	content: "";
	position: absolute;
	bottom: 24%;
	width: 52%;
	height: 8%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(26, 23, 20, 0.32), transparent 76%);
	filter: blur(3px);
}

.nk-fantasy-stage:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 6px;
	border-radius: 18px;
}

.nk-fantasy {
	--nk-fantasy-w: clamp(10rem, 22vw, 18rem);
	position: relative;
	width: var(--nk-fantasy-w);
	height: calc(var(--nk-fantasy-w) * 0.98);
	transform-style: preserve-3d;
}

.nk-fantasy > *,
.nk-fantasy__box {
	position: absolute;
	transform-style: preserve-3d;
}

.nk-fantasy__face {
	position: absolute;
	backface-visibility: hidden;
}

.nk-fantasy__face--inner { background: #15181A; }

/* --- Galadriel: Gewand in Silberweiß, verjüngt sich nach oben -------- */
.nk-gal-robe { background: linear-gradient(180deg, #EDEBE6, #CDCEC9); }
.nk-gal-robe.nk-fantasy__face--top    { background: #F4F3EF; }
.nk-gal-robe.nk-fantasy__face--side   { background: #C3C6C2; }
.nk-gal-robe.nk-fantasy__face--back   { background: #BFC2BF; }
.nk-gal-robe.nk-fantasy__face--bottom { background: #A9ADAA; }

/* Haut, blass und ruhig. */
.nk-gal-skin { background: linear-gradient(180deg, #E9C9A8, #D8B491); }
.nk-gal-skin.nk-fantasy__face--side,
.nk-gal-skin.nk-fantasy__face--back { background: #C9A582; }

/* Goldenes Haar. */
.nk-gal-hair { background: linear-gradient(180deg, #D8B25A, #A9812F); }
.nk-gal-hair.nk-fantasy__face--top  { background: #E4C574; }
.nk-gal-hair.nk-fantasy__face--side,
.nk-gal-hair.nk-fantasy__face--back { background: #8F6C28; }

/* --- Der weiße Leucht-Trank in ihren Händen ------------------------- */
.nk-phial.nk-fantasy__face {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(214, 232, 255, 0.85) 60%, rgba(184, 212, 255, 0.9));
	box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.9), 0 0 10px rgba(220, 238, 255, 0.9);
}
.nk-phial.nk-fantasy__face--top { background: #FFFFFF; }

.nk-phial-wrap { animation: nk-gem-schweben 4.5s ease-in-out infinite; }

@keyframes nk-gem-schweben {
	0%, 100% { margin-top: 0; }
	50%      { margin-top: calc(var(--nk-fantasy-w) * -0.025); }
}

.nk-phial-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(210, 232, 255, 0.4) 40%, transparent 72%);
	filter: blur(2px);
	animation: nk-gem-puls 4.5s ease-in-out infinite;
}

@keyframes nk-gem-puls {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; }
}

/* --- DVD-/CD-Hüllen: dunkle Kanten, farbiger Deckel ----------------- */
.nk-dvd { background: #1A1E22; }
.nk-dvd.nk-fantasy__face--bottom { background: #0E1013; }
.nk-dvd--a.nk-fantasy__face--top { background: linear-gradient(135deg, #3A2A55, #22163A); }
.nk-dvd--b.nk-fantasy__face--top { background: linear-gradient(135deg, #1F5A55, #123734); }
.nk-dvd--c.nk-fantasy__face--top { background: linear-gradient(135deg, #6A2130, #3F1520); }

.nk-dvd__streifen {
	position: absolute;
	backface-visibility: hidden;
	background: linear-gradient(90deg, rgba(230, 235, 240, 0.85), rgba(180, 190, 200, 0.5));
	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}

/* --- Ring der Macht: flacher Goldreif mit metallischem Rand --------- */
.nk-ring {
	position: absolute;
	border-radius: 50%;
	background: transparent;
	border: calc(var(--nk-fantasy-w) * 0.022) solid;
	border-color: #E8C56A #B78B2E #7A5A1C #C99B3A;
	box-shadow: 0 0 8px rgba(214, 176, 94, 0.6), inset 0 0 4px rgba(255, 246, 214, 0.5);
}

/* --- Geheimnisvolle Tränke: mattes Glas, leuchtende Flüssigkeit ----- */
.nk-flask.nk-fantasy__face { background: rgba(190, 205, 210, 0.28); }
.nk-flask-glas.nk-fantasy__face { background: rgba(190, 205, 210, 0.42); }
.nk-cork { background: linear-gradient(180deg, #7A5A38, #4E3A22); }

.nk-flask__saft {
	position: absolute;
	border-radius: 40% 40% 46% 46%;
	backface-visibility: hidden;
}
.nk-flask__saft.nk-flask--gruen {
	background: radial-gradient(circle at 50% 35%, #9BE86A, #2E8B3A 60%, #16491F);
	box-shadow: 0 0 10px rgba(120, 220, 110, 0.7);
}
.nk-flask__saft.nk-flask--violett {
	background: radial-gradient(circle at 50% 35%, #C78BF0, #7A32C0 60%, #3A1560);
	box-shadow: 0 0 10px rgba(170, 110, 230, 0.7);
}

/* Zauberstab: dunkles Holz mit heller Lichtkante oben. */
.nk-wand { background: linear-gradient(180deg, #4A3A2A, #2E2318); }
.nk-wand.nk-fantasy__face--top { background: linear-gradient(180deg, #6A5238, #4A3A2A); }
.nk-wand.nk-fantasy__face--bottom { background: #211913; }

/* Griffwicklung — ein paar dunkle Ringe. */
.nk-wand__griff {
	position: absolute;
	backface-visibility: hidden;
	border-radius: 2px;
	background: repeating-linear-gradient(90deg, #241B12 0 2px, #3A2C1D 2px 5px);
}

/* Leuchtende Spitze — warmer Kern mit weichem Schein, funkelt leise. */
.nk-wand__spitze {
	position: absolute;
	border-radius: 50%;
	backface-visibility: hidden;
	background: radial-gradient(closest-side, #FFF6D8, rgba(214, 176, 94, 0.9) 45%, transparent 72%);
	box-shadow: 0 0 10px rgba(214, 176, 94, 0.8), 0 0 20px rgba(214, 176, 94, 0.5);
	animation: nk-gem-puls 3.2s ease-in-out infinite;
}

/* Sternchen vor der Szene — vierzackig, funkelnd, drehen nicht mit. */
.nk-sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.nk-spark {
	position: absolute;
	background: radial-gradient(closest-side, #FFFBEA, rgba(214, 176, 94, 0.85) 55%, transparent);
	clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
	filter: drop-shadow(0 0 3px rgba(214, 176, 94, 0.7));
	animation: nk-funkeln 3.4s ease-in-out infinite;
}

@keyframes nk-funkeln {
	0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); }
	50%      { opacity: 1;   transform: scale(1) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
	.nk-phial-wrap,
	.nk-phial-glow,
	.nk-wand__spitze,
	.nk-spark { animation: none; }
	.nk-spark { opacity: 0.7; }
}

/* Doppelscheinwerfer, gerahmt — Kennzeichen der Baureihe. */
.nk-car__lamp {
	position: absolute;
	top: 12%;
	width: 26%;
	height: 34%;
	border-radius: 2px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(196, 206, 210, 0.9)),
		#DfE4E6;
	box-shadow: 0 0 0 1.5px #D8DBDC, inset 0 0 6px rgba(0, 0, 0, 0.25);
}

.nk-car__lamp::after {
	/* Trennsteg zwischen den beiden Kammern. */
	content: "";
	position: absolute;
	left: 52%;
	top: 8%;
	bottom: 8%;
	width: 1.5px;
	background: rgba(60, 65, 68, 0.6);
}

.nk-car__lamp--l { left: 3%; }
.nk-car__lamp--r { right: 3%; }

/* Rueckleuchten mit der typischen Riffelung. */
.nk-car__tail {
	position: absolute;
	top: 18%;
	width: 27%;
	height: 40%;
	border-radius: 2px;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #E86A5A 0%, #C0281E 55%, #8E1A16 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.nk-car__tail--l { left: 3%; }
.nk-car__tail--r { right: 3%; }

/* Raeder: Reifen mit Flanke, darin die Felge. */
.nk-car__wheel {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, #2C2C2C 0 58%, #1A1A1A 59% 88%, #101010 90%);
	box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.nk-car__rim {
	position: absolute;
	inset: 22%;
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, #C9CCCE 0deg 14deg, #8E9295 14deg 28deg),
		#B8BCBE;
	box-shadow: inset 0 0 0 2px #9CA0A2, 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.nk-car__rim::after {
	content: "";
	position: absolute;
	inset: 34%;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 38%, #E6E8E9, #9CA0A2);
}

/* 6.13 Footer ------------------------------------------------------------ */
.nk-footer {
	/* Volle Fensterbreite aus eigener Kraft — egal, in welche Spalte des
	   Footer-Builders das HTML-Element gezogen wird, die dunkle Fläche
	   spannt immer randlos. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	background: #221E1A;
	color: #C9C1B6;
	padding-block: clamp(2.5rem, 5vw, 4rem);
	margin-block-start: 0;
	position: relative;
}

/* Blocksys Footer-Container (.ct-container) legt je 30px durchsichtiges Polster
   ÜBER und UNTER das Footer-HTML (live gemessen: pt/pb 30px). Durch dieses
   transparente Polster scheint die Grundfarbe als heller Streifen zwischen
   letztem Abschnitt und dunklem Footer durch. Nur genau den Container flach
   stellen, der den Footer enthält (per :has()); alle anderen .ct-container
   (Header, Inhalt) bleiben unberührt. */
.ct-container:has(.nk-footer) {
	padding-block: 0 !important;
}

/* Der Inhalts-Container (.ct-container-full im <main>) hat 60px Polster unten
   (live gemessen: pb 60px, Unterkante = Footer-Oberkante). Dieses durchsichtige
   Polster ist der cremefarbene Reststreifen zwischen letztem Abschnitt und
   Footer. Flach stellen, damit der letzte Abschnitt bündig auf den Footer
   trifft; die Innenpolster von Abschnitt (CTA pb 72px) und Footer geben Luft.
   Gescopt auf den Inhaltsbereich — Container in Header/Footer bleiben unberührt. */
.site-main .ct-container-full {
	padding-bottom: 0 !important;
}

.nk-footer__inner {
	max-width: var(--nk-content);
	margin-inline: auto;
	padding-inline: var(--nk-gutter);
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 780px) {
	.nk-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

.nk-footer__brand {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.4rem, 3vw, 2rem);
	letter-spacing: -0.035em;
	line-height: 1;
	color: #FFFFFF;
	margin: 0 0 0.6rem;
}

.nk-footer__slogan {
	margin: 0;
	max-width: 30ch;
	color: #A79E92;
}

.nk-footer h2,
.nk-footer h3,
.nk-footer__title {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--s);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: #9C9386;
	margin: 0 0 0.75rem;
}

.nk-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}

.nk-footer a {
	color: #C9C1B6;
	text-decoration: none;
	transition: color 200ms var(--nk-ease);
}

.nk-footer a:hover,
.nk-footer a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nk-footer__legal {
	max-width: var(--nk-content);
	margin-inline: auto;
	padding-inline: var(--nk-gutter);
	margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-block-start: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--s);
	color: #9C9386;
}

.nk-footer__legal nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.25rem;
}

/* -------------------------------------------------------------------------
   7 · Kontaktformular
   ---------------------------------------------------------------------- */

.nk-form {
	display: grid;
	gap: 1rem;
	max-width: 34rem;
}

.nk-form__row {
	display: grid;
	gap: 0.35rem;
}

.nk-form label {
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.nk-form .nk-form__hint {
	font-weight: 400;
	color: var(--nk-ink-soft);
}

.nk-form__error {
	color: #8C2F2F;
	font-weight: 600;
}

.nk-form :is(input, textarea)[aria-invalid="true"] {
	border-color: #8C2F2F;
	background: #fff;
}

.nk-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	background: rgba(251, 250, 247, 0.85);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--button, 10px);
	padding: 0.7em 0.9em;
	width: 100%;
	transition: border-color 200ms var(--nk-ease), background-color 200ms var(--nk-ease);
}

.nk-form :is(input, textarea):focus {
	border-color: var(--wp--preset--color--accent);
	background: #FFFFFF;
}

.nk-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.nk-form button[type="submit"] {
	justify-self: start;
	font: inherit;
	font-weight: 600;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border: 0;
	border-radius: 999px;
	padding: 0.85em 1.9em;
	cursor: pointer;
	transition: background-color 200ms var(--nk-ease), transform 200ms var(--nk-ease-out);
}

.nk-form button[type="submit"]:hover {
	background: #173B38;
	transform: translateY(-1px);
}

.nk-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nk-notice {
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--petrol-tint);
	padding: 1rem 1.25rem;
	border-radius: 0 8px 8px 0;
	margin-block-end: 1.5rem;
}

.nk-notice--error {
	border-color: #8C2F2F;
	background: #F6E7E4;
}

/* -------------------------------------------------------------------------
   8 · Motion: Reveal
   ---------------------------------------------------------------------- */

.nk-js .nk-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 550ms var(--nk-ease-out), transform 550ms var(--nk-ease-out);
}

.nk-js .nk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
   9 · Reduced Motion, kein JS, Mobil, Print
   ---------------------------------------------------------------------- */

html:not(.nk-js) .nk-hero__stage,
.nk-hero--static .nk-hero__stage {
	height: auto;
	min-height: 0;
	padding-block: var(--nk-section);
	grid-template-rows: auto auto;
}

html:not(.nk-js) .nk-hero__portrait img,
.nk-hero--static .nk-hero__portrait img {
	height: clamp(16rem, 42vh, 26rem);
	width: auto;
	margin-inline: auto;
}

html:not(.nk-js) .nk-hero__cue,
.nk-hero--static .nk-hero__cue {
	display: none;
}

/* -------------------------------------------------------------------------
   Sternenhimmel auf dem Telefon

   Ruhend statt gescrubbt: Das Foto schwebt mittig, die Begriffe stellen sich
   in zwei symmetrischen Spalten links und rechts daneben auf (hero.js,
   flanken()) und wandern langsam. hero.js dünnt auf zehn Begriffe aus und
   lässt die weg, die breiter als 44 Prozent der Bühne sind.
   ---------------------------------------------------------------------- */

/* Kompakt: Der Inhalt sitzt direkt unter der Kopfleiste, ohne leere
   Bildschirmmeter davor und danach — die Bühne ist nur so hoch, wie Foto
   und Flanken brauchen. */
.nk-hero--himmel .nk-hero__stage {
	height: clamp(20rem, 48svh, 25rem);
	min-height: 0;
	padding-block: 0;
}

/* Das Foto schwebt MITTIG in der Bühne; die Begriffe flankieren es links
   und rechts (hero.js, flanken()). Das Namensband läuft dahinter durch. */
.nk-hero--himmel .nk-hero__portrait {
	align-items: center;
}

.nk-hero--himmel .nk-hero__portrait img {
	height: clamp(14rem, 44svh, 20rem);
}

/* Die ausgedünnten Begriffe. */
.nk-star--aus {
	display: none;
}

/* Etwas zurückgenommen: Auf dem kleinen Schirm sollen die Wörter das Foto
   nicht überstrahlen. */
.nk-hero--himmel .nk-star__label {
	padding: 0.2em 0.35em;
	opacity: 0.9;
}

/* Das Namensband tritt auf dem Telefon in den Hintergrund — kleiner und
   blasser, damit es hinter Foto und Begriffen nur noch mitschwingt. */
.nk-hero--himmel .nk-hero__name {
	font-size: clamp(2.4rem, 15vw, 4rem);
	opacity: 0.5;
}

.nk-hero--himmel .nk-hero__cue {
	display: block;
}

/* -------------------------------------------------------------------------
   Begriffe im ruhenden Hero (kein JS, reduzierte Bewegung)

   Ohne den Sternenflug haben die Wörter keine berechnete Position mehr. Statt
   sie absolut übereinander in der Mitte liegen zu lassen, stehen sie hier als
   ruhige, umbrechende Reihe unter dem Foto — lesbar und ohne einen einzigen
   abgeschnittenen Begriff.
   ---------------------------------------------------------------------- */

html:not(.nk-js) .nk-hero__stars,
.nk-hero--static .nk-hero__stars {
	grid-area: auto;
	position: static;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.5rem;
	max-width: 34rem;
	margin: clamp(1rem, 3vw, 1.75rem) auto 0;
	padding-inline: var(--nk-gutter);
}

.nk-hero--static .nk-star {
	position: static;
	transform: none !important;
	/* In der Reihe steht nichts mehr auf einem Punkt — die Zentrierung von
	   oben muss hier weg, sonst rutscht jedes Wort nach links oben. */
	translate: none;
	opacity: 1 !important;
	filter: none !important;
}

.nk-hero--static .nk-star__drift {
	animation: none;
	transform: none !important;
}

.nk-hero--static .nk-star__label {
	font-size: 0.85rem;
	padding: 0.35em 0.75em;
	border-color: var(--wp--preset--color--line);
	background: rgba(252, 250, 246, 0.75);
	color: var(--nk-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.nk-hero__stage {
		height: auto;
		min-height: 0;
		padding-block: var(--nk-section);
	}

	.nk-hero__portrait {
		transform: none !important;
	}

	.nk-hero__portrait img {
		height: clamp(16rem, 42vh, 26rem);
		width: auto;
		margin-inline: auto;
	}

	.nk-hero__band,
	.nk-hero.is-animated .nk-hero__band {
		opacity: 1 !important;
	}

	.nk-hero__band-track,
	.nk-hero__band-track.is-running,
	.nk-marquee__track {
		animation: none;
		width: 100%;
		justify-content: center;
	}

	.nk-hero__cue { display: none; }
	.nk-cursor    { display: none; }

	/* Kein Karten-Stapel: nichts klebt, alles steht untereinander. Die Karten
	   brauchen dann wieder einen Zwischenraum — im Stapel ist der bewusst
	   null, damit die Karten lückenlos ineinander übergehen.

	   relative, NICHT static: Beides beendet das Kleben, aber static nimmt
	   den Karten auch den Bezugsrahmen. Ziffer, Schlagwort und das grosse
	   Wasserzeichen-Icon sind absolut in der Karte gesetzt — ohne
	   Bezugsrahmen fallen sie bis zum Abschnitt durch und sammeln sich alle
	   an einem Punkt in dessen Ecke. */
	.nk-orbit__item,
	.nk-orbit__media,
	.nk-stack > .nk-panel,
	.nk-stack > .wp-block-group {
		position: relative;
	}

	/* Nichts klebt — also auch kein Nachlauf noetig. */
	.nk-stack::after,
	.nk-orbit__col::after {
		display: none;
	}

	.nk-stack > .nk-panel,
	.nk-stack > .wp-block-group {
		margin-block-end: clamp(1rem, 2vw, 1.5rem);
		box-shadow: none;
		min-height: 0;
	}

	.nk-orbit__item {
		min-height: 0;
		margin-block-end: clamp(1rem, 2vw, 1.5rem);
	}

	.nk-js .nk-reveal {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 781px) {
	body { background-attachment: scroll; }

	.nk-star__label {
		padding: 0.35em 0.7em;
	}
}

/* -------------------------------------------------------------------------
   10 · Abstände auf dem Telefon

   Auf 390px wirkt jeder Abstand, der am Schreibtisch stimmt, doppelt so
   groß — es passt schlicht weniger ins Bild. Alles hier zieht die Luft
   zusammen, ohne die Ordnung aufzugeben.
   ---------------------------------------------------------------------- */

@media (max-width: 780px) {
	:root {
		/* Abstand zwischen den Abschnitten: 40px statt 72px. */
		--nk-section: 2.25rem;
	}

	/* Titel dichter an dem, was er ankündigt. */
	.nk-section__head {
		margin-block-end: 0.6rem;
	}

	.nk-section__head .nk-lead {
		margin-block-start: 0.35rem;
	}

	/* Der Vorspann unter der Seitenüberschrift darf kürzer atmen. */
	.nk-lead {
		font-size: var(--wp--preset--font-size--m);
	}

	/* Die Karten brauchen oben nur so viel Platz, wie Ziffer und Schlagwort
	   wirklich einnehmen. */
	.nk-stack > .nk-panel,
	.nk-stack > .wp-block-group {
		padding-block-start: 2.5rem;
	}

	.nk-stack .nk-panel__no {
		top: 0.7rem;
		left: clamp(1.1rem, 4vw, 1.5rem);
		font-size: 1.35rem;
	}

	/* Das Schlagwort steht in Versalien mit weiter Sperrung — bei 0,7rem
	   wurde daraus ein kaum lesbarer Strich. Etwas groesser und deutlich
	   enger gesperrt liest es sich auch auf dem Telefon. */
	.nk-panel__tag {
		top: 0.95rem;
		left: calc(clamp(1.1rem, 4vw, 1.5rem) + 3.4ch);
		font-size: 0.78rem;
		letter-spacing: 0.08em;
	}

	.nk-panel {
		padding: clamp(1.1rem, 4vw, 1.5rem);
	}

	/* Bild und Text in den Zweispaltern rücken zusammen. */
	.nk-split {
		gap: clamp(0.9rem, 3vw, 1.5rem);
	}

	/* Der Abschluss-Aufruf braucht nicht die volle Abschnittshöhe. */
	.nk-cta {
		padding-block: clamp(1.75rem, 6vw, 2.5rem);
	}

	.nk-cta__inner {
		gap: 1.25rem;
	}

	.nk-cta__photo img {
		height: clamp(10rem, 38vw, 14rem);
	}

	/* Karten brauchen auch auf dem Telefon sichtbare Luft — 0,6rem wirkte
	   wie aneinandergeklebt. */
	.nk-stack > .nk-panel,
	.nk-stack > .wp-block-group {
		margin-block-end: 1rem;
	}

	.nk-orbit__item {
		margin-block-end: 1rem;
	}

	.nk-zigzag {
		gap: 1rem;
	}
}

@media print {
	.nk-hero__cue,
	.nk-marquee,
	.nk-cursor,
	.nk-form button {
		display: none;
	}

	.nk-hero__stage {
		height: auto;
	}
}

/* -------------------------------------------------------------------------
   11 · Eigene Scroll-Leiste

   Die Browser-Leiste ist auf breiten Schirmen ausgeblendet; stattdessen
   zeigt links eine feine Spur mit Laufstrecke und Punkt, wie weit die Seite
   gescrollt ist (scrollbar.js). Reine Anzeige, pointer-events aus.

   Alles hängt an html.nk-js: Ohne JS gibt es keine .nk-leiste — dann bleibt
   auch die normale Browser-Leiste stehen. Auf dem Telefon ebenso.
   ---------------------------------------------------------------------- */

@media (min-width: 782px) {
	html.nk-js {
		scrollbar-width: none;             /* Firefox */
	}
	html.nk-js::-webkit-scrollbar {        /* Chrome, Edge, Safari */
		width: 0;
		height: 0;
	}
}

.nk-leiste {
	display: none;
}

@media (min-width: 782px) {
	/* Die Leiste ist GREIFBAR: 16px breite Anfasszone, Ziehen scrollt die
	   Seite (scrollbar.js), Klick auf die Spur springt dorthin. */
	.nk-leiste.is-da {
		display: block;
		position: fixed;
		z-index: 60;
		left: clamp(0.6rem, 1.5vw, 1.5rem);
		top: 7rem;
		bottom: 3.5rem;
		width: 16px;
		cursor: grab;
		touch-action: none;
	}

	.nk-leiste.is-ziehen {
		cursor: grabbing;
	}

	/* Die Spur: eine ruhige, aber sichtbare Linie. */
	.nk-leiste__spur {
		position: absolute;
		inset-block: 0;
		left: 50%;
		width: 3px;
		transform: translateX(-50%);
		border-radius: 999px;
		background: color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	}

	/* Die Laufstrecke: füllt sich von oben, im Akzentgrün. */
	.nk-leiste__lauf {
		position: absolute;
		top: 0;
		left: 50%;
		width: 3px;
		transform: translateX(-50%);
		border-radius: 999px;
		height: calc(var(--nk-p, 0) * 100%);
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent),
			var(--wp--preset--color--accent)
		);
	}

	/* Der Punkt markiert die aktuelle Position — mit einem weichen Hof,
	   damit er auch auf den getönten Flächen leuchtet. Beim Überfahren und
	   beim Ziehen wächst er, damit klar ist: mich kann man anfassen. */
	.nk-leiste__punkt {
		position: absolute;
		top: calc(var(--nk-p, 0) * 100%);
		left: 50%;
		width: 13px;
		height: 13px;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		background: var(--wp--preset--color--accent);
		border: 2px solid rgba(252, 250, 246, 0.9);
		box-shadow:
			0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent),
			0 0 16px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
		transition: width 160ms var(--nk-ease-out), height 160ms var(--nk-ease-out);
	}

	.nk-leiste:hover .nk-leiste__punkt,
	.nk-leiste.is-ziehen .nk-leiste__punkt {
		width: 17px;
		height: 17px;
	}
}

/* -------------------------------------------------------------------------
   12 · Sektions-Stimmungen

   Jede inhaltlich besondere Sektion bekommt eine SEHR dezente eigene
   Stimmung: eine leichte Tint-Verschiebung plus ein kaum sichtbares Muster,
   das zum Inhalt passt (Werdegang: aufsteigende Linien, Kompetenzen:
   Punktraster, Arbeitsweise: Treppenstufen …). Alles über :has() an den
   vorhandenen Klassen — die Patterns bleiben unangetastet. Kann ein Browser
   kein :has(), fehlt schlicht die Stimmung; es geht nichts kaputt.

   Die Muster liegen als ::before über der Flächenfarbe und unter dem Text
   (isolation + z-index -1), mit weicher Maske, damit nichts hart ansetzt.
   ---------------------------------------------------------------------- */

.nk-section:has(> .nk-timeline),
.nk-section:has(> .nk-orbit),
.nk-section:has(> .nk-stack--hoch),
.nk-section:has(> .nk-values),
.nk-section:has(> .nk-zigzag),
.nk-section:has(> .nk-pillars),
.nk-section:has(> .nk-split),
.nk-section:has(.nk-form) {
	position: relative;
	isolation: isolate;
}

.nk-section:has(> .nk-timeline)::before,
.nk-section:has(> .nk-orbit)::before,
.nk-section:has(> .nk-stack--hoch)::before,
.nk-section:has(> .nk-values)::before,
.nk-section:has(> .nk-zigzag)::before,
.nk-section:has(> .nk-pillars)::before,
.nk-section:has(> .nk-split)::before,
.nk-section:has(.nk-form)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Werdegang: Sand-Hauch + feine aufsteigende Linien. */
.nk-section:has(> .nk-timeline) {
	background-image: linear-gradient(180deg, rgba(239, 228, 210, 0.30) 0%, rgba(239, 228, 210, 0.10) 55%, rgba(239, 228, 210, 0) 100%);
}
.nk-section:has(> .nk-timeline)::before {
	background-image: repeating-linear-gradient(55deg, rgba(26, 23, 20, 0.05) 0 1px, transparent 1px 64px);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

/* Kompetenzen: Petrol-Hauch von oben + feines Punktraster. */
.nk-section:has(> .nk-orbit) {
	background-image: radial-gradient(120% 80% at 50% 0%, rgba(220, 230, 227, 0.38) 0%, rgba(220, 230, 227, 0.10) 55%, rgba(220, 230, 227, 0) 100%);
}
.nk-section:has(> .nk-orbit)::before {
	background-image: radial-gradient(rgba(31, 78, 74, 0.05) 1px, transparent 1.4px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(95% 90% at 50% 45%, #000 40%, transparent 100%);
	mask-image: radial-gradient(95% 90% at 50% 45%, #000 40%, transparent 100%);
}

/* Arbeitsweise: Ton-Hauch + Treppenstufen (Schritt für Schritt). */
.nk-section:has(> .nk-stack--hoch) {
	background-image: linear-gradient(180deg, rgba(233, 223, 215, 0.32) 0%, rgba(233, 223, 215, 0) 70%);
}
.nk-section:has(> .nk-stack--hoch)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 96V64h32V32h32V0h32' fill='none' stroke='%231A1714' stroke-opacity='0.045'/%3E%3C/svg%3E");
	background-size: 96px 96px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

/* Werte: warmer Ocker-Hauch + Jahresringe oben rechts. */
.nk-section:has(> .nk-values) {
	background-image: radial-gradient(90% 70% at 12% 8%, rgba(180, 128, 47, 0.08) 0%, transparent 60%);
}
.nk-section:has(> .nk-values)::before {
	background-image: repeating-radial-gradient(circle at 88% 10%, rgba(26, 23, 20, 0.04) 0 1px, transparent 1px 72px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}

/* Einordnung: ruhiges Bone + hauchzartes Chevron — nimmt den Zickzack der
   Karten auf. */
.nk-section:has(> .nk-zigzag) {
	background-image: linear-gradient(180deg, rgba(251, 250, 247, 0.45) 0%, rgba(239, 228, 210, 0.14) 100%);
}
.nk-section:has(> .nk-zigzag)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28'%3E%3Cpath d='M0 21 14 7l14 14L42 7l14 14' fill='none' stroke='%231F4E4A' stroke-opacity='0.04'/%3E%3C/svg%3E");
	background-size: 56px 28px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

/* Überblick (Startseite): Petrol-zu-Sand-Hauch + feines Ordnungsraster —
   passt zu den Kacheln. */
.nk-section:has(> .nk-pillars) {
	background-image: linear-gradient(180deg, rgba(220, 230, 227, 0.20) 0%, rgba(239, 228, 210, 0.16) 100%);
}
.nk-section:has(> .nk-pillars)::before {
	background-image:
		linear-gradient(rgba(26, 23, 20, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(26, 23, 20, 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(100% 100% at 50% 40%, #000 35%, transparent 100%);
	mask-image: radial-gradient(100% 100% at 50% 40%, #000 35%, transparent 100%);
}

/* Bild-Text-Sektionen: nur eine leichte Aufhellung + feines Papierkorn. */
.nk-section:has(> .nk-split) {
	background-image: linear-gradient(165deg, rgba(251, 250, 247, 0.35) 0%, rgba(251, 250, 247, 0) 60%);
}
.nk-section:has(> .nk-split)::before {
	background-image: radial-gradient(rgba(107, 74, 46, 0.03) 0.5px, transparent 1px);
	background-size: 9px 9px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

/* Kontakt: sanfter Lichtkegel von oben (greift den Hero-Tunnel auf) +
   ausgehende Wellen einer Nachricht. */
.nk-section:has(.nk-form) {
	background-image: radial-gradient(55% 60% at 50% 0%, rgba(255, 252, 246, 0.85) 0%, rgba(247, 240, 229, 0.35) 45%, rgba(236, 225, 208, 0) 75%);
}
.nk-section:has(.nk-form)::before {
	background-image: repeating-radial-gradient(140% 110% at 50% -25%, rgba(31, 78, 74, 0.04) 0 1px, transparent 1px 88px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* -------------------------------------------------------------------------
   13 · 3D-Licht auf den Karten

   Zweistufiges Licht statt eines flachen Schattens: ein weiter, kühler
   Ambient-Schatten (Hauch Petrol), ein gerichteter warmer Key-Schatten,
   ein Kontaktschatten direkt unter der Kante — und oben ein 1px-Kantenlicht,
   als fiele Licht von oben auf die Kartenkante. Beim Zeigen hebt sich die
   Karte 4px und kippt unter einem Grad — Tiefe, kein Spektakel.

   Klebende bzw. choreografierte Karten (Stapel, Orbit, Zickzack) bekommen
   NUR das Licht, keinen Lift: transform gehört dort der Choreografie.
   ---------------------------------------------------------------------- */

.nk-pillar,
.nk-timeline__item {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.60),
		0 1px 2px rgba(26, 23, 20, 0.06),
		0 10px 24px -14px rgba(26, 23, 20, 0.12),
		0 34px 64px -46px rgba(31, 78, 74, 0.16);
	transition:
		transform 320ms var(--nk-ease-out),
		box-shadow 320ms var(--nk-ease-out),
		border-color 240ms var(--nk-ease),
		background-color 240ms var(--nk-ease);
}

.nk-pillar:hover,
.nk-timeline__item:hover {
	transform: perspective(1100px) translateY(-4px) rotateX(0.7deg) rotateY(-0.4deg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		0 2px 3px rgba(26, 23, 20, 0.05),
		0 18px 34px -18px rgba(26, 23, 20, 0.16),
		0 48px 84px -46px rgba(31, 78, 74, 0.22);
}

/* Zickzack-Karten: Licht ja, Kippen nein — ihr transform gehört der
   Herein-Choreografie (translateX beim Erscheinen). */
.nk-zigzag > *:not(.nk-photo) {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.60),
		0 1px 2px rgba(26, 23, 20, 0.06),
		0 20px 44px -32px rgba(26, 23, 20, 0.5);
}

/* Stapel-Karten: der nach oben gerichtete Stapel-Schatten bleibt, dazu das
   Kantenlicht. */
.nk-stack > .nk-panel,
.nk-stack > .wp-block-group {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		0 -2px 3px rgba(26, 23, 20, 0.04),
		0 -20px 44px -26px rgba(26, 23, 20, 0.5);
}

/* Die dunkle Karte verträgt nur ein leises Kantenlicht — sonst wirkt es
   wie ein Riss. */
.nk-stack > .nk-panel--dark {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.09),
		0 -2px 3px rgba(26, 23, 20, 0.04),
		0 -20px 44px -26px rgba(26, 23, 20, 0.5);
}

/* Orbit-Karten: Kantenlicht + Kontaktschatten zum vorhandenen Schein. */
.nk-orbit__item {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		0 1px 2px rgba(26, 23, 20, 0.05),
		0 -16px 38px -26px rgba(26, 23, 20, 0.45);
}

.nk-orbit__item:hover {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.70),
		0 1px 2px rgba(26, 23, 20, 0.05),
		0 -18px 46px -24px rgba(26, 23, 20, 0.55);
}

/* Ruhe-Einstellung: kein Lift, kein Kippen. */
@media (prefers-reduced-motion: reduce) {
	.nk-pillar:hover,
	.nk-timeline__item:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   14 · Die Kopfleiste

   Blocksy liefert das Menü mit seinen Werks-Einstellungen aus: Versalien,
   Blau für Links und aktiven Punkt, Such-Icon. Alles davon wird hier auf
   die Sprache der Seite gebracht — Tinte, Akzentgrün, die Textschrift der
   Seite, keine Versalien, keine Suche.

   Blocksy setzt fast nichts direkt, sondern reicht CSS-Variablen durch —
   genau die werden überschrieben. Die #header-ID gibt jeder Regel eine
   höhere Spezifität als Blocksys generierte Attribut-Ketten; damit ist die
   Ladereihenfolge (Customizer-CSS kommt NACH dem Child-Theme) egal, und
   auch der Sticky-Zustand erbt die Werte.
   ---------------------------------------------------------------------- */

#header [data-id="menu"] {
	--theme-link-initial-color: var(--wp--preset--color--ink);
	--theme-link-hover-color: var(--wp--preset--color--accent);
	--theme-link-active-color: var(--wp--preset--color--accent);
	--menu-indicator-hover-color: var(--wp--preset--color--accent);
	--menu-indicator-active-color: var(--wp--preset--color--accent);
	--dropdown-background-color: #FBFAF7;
}

/* Die Menüpunkte selbst: Blocksys generiertes CSS setzt die Typo-Variablen
   auf genau dieser Selektor-Ebene — deshalb hier noch einmal mit ID.
   Display-Schrift wie die Überschriften der Seite: kräftig, mit Charakter —
   die Textschrift wirkte hier verloren. */
#header [data-id="menu"] {
	--menu-items-spacing: 34px;
}

#header [data-id="menu"] > ul > li > a {
	--theme-link-initial-color: var(--wp--preset--color--ink);
	--theme-text-transform: none;
	--theme-font-family: var(--wp--preset--font-family--display);
	--theme-font-weight: 700;
	--theme-font-size: 1rem;
	--theme-line-height: 1.4;
	--theme-letter-spacing: 0.005em;
}

/* Gürtel UND Hosenträger: dieselben Werte noch einmal als direkte
   Eigenschaften — falls eine Blocksy-Version die Variablen an einer Stelle
   nicht durchreicht, gilt trotzdem die Sprache der Seite. Am Live-Objekt
   verifiziert (Runde 19). */
#header [data-id="menu"] .ct-menu-link {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.005em;
}

#header [data-id="menu"] li:hover > .ct-menu-link {
	color: var(--wp--preset--color--accent);
}

/* Aktiver Punkt in Akzentgrün. Solange kein eigenes WordPress-Menü
   zugewiesen ist, rendert WordPress die Punkte als page_item mit
   current_page_item — beide Schreibweisen abdecken. */
#header [data-id="menu"] :is(li[class*="current-menu-"], li[class*="current_page"]) > .ct-menu-link {
	color: var(--wp--preset--color--accent);
}

/* Aufklapp-Menü („Mehr" und Unterpunkte): heller Grund, gleiche Schrift. */
#header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-link-initial-color: var(--wp--preset--color--ink);
	--theme-link-hover-color: var(--wp--preset--color--accent);
	--theme-text-transform: none;
	--theme-font-family: var(--wp--preset--font-family--text);
	--theme-font-size: 0.9rem;
	--theme-font-weight: 500;
}

/* Das Ausklapp-Panel hinter dem Burger. Blocksys Standard ist eine dunkle,
   halbdurchsichtige Fläche — mit Tinten-Links darauf unlesbar. Deshalb hier
   fest verdrahtet, mit #offcanvas-ID gegen jedes Customizer-CSS: heller
   Grund in der Sprache der Seite, die Seite dahinter wird abgedunkelt. */
#offcanvas {
	background: rgba(26, 23, 20, 0.45);
}

/* !important mit Ansage: Blocksys Panel-Hintergrund (rgba(18,21,25,0.98))
   kommt aus dem Customizer-CSS, das NACH dem Child-Theme lädt und sich mit
   normaler Spezifität nicht überstimmen liess — live nachgemessen, der
   Ausstich unten ist die einzige Fassung, die gewinnt. */
#offcanvas.ct-panel .ct-panel-inner {
	background: #FBFAF7 !important;
}

#offcanvas .ct-panel-actions .ct-panel-heading {
	color: var(--wp--preset--color--ink);
}

#offcanvas .ct-toggle-close {
	color: var(--wp--preset--color--ink);
	--theme-icon-color: var(--wp--preset--color--ink);
	--theme-icon-hover-color: var(--wp--preset--color--accent);
}

/* Die Menüpunkte im Panel: Tinte auf hell, Display-Schrift, ruhige Grösse.
   Variablen UND direkte Eigenschaften — wie beim Desktop-Menü. */
#offcanvas .ct-menu-link {
	--theme-link-initial-color: var(--wp--preset--color--ink);
	--theme-link-hover-color: var(--wp--preset--color--accent);
	--theme-link-active-color: var(--wp--preset--color--accent);
	--theme-text-transform: none;
	--theme-font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
	text-transform: none;
}

#offcanvas li:hover > .ct-menu-link,
#offcanvas .ct-menu-link:hover,
#offcanvas :is(li[class*="current-menu-"], li[class*="current_page"]) > .ct-menu-link {
	color: var(--wp--preset--color--accent);
}

/* Die Seite hat keine Suchfunktion — Icon und Modal verschwinden. */
#header [data-id="search"],
#search-modal {
	display: none;
}

/* Hover und aktiver Punkt UNMISSVERSTÄNDLICH: Tinte und Akzentgrün liegen
   farblich zu nah beieinander, ein reiner Farbwechsel ging unter. Deshalb
   wächst beim Überfahren ein grüner Unterstrich aus der Mitte; der aktive
   Punkt trägt ihn dauerhaft. */
#header [data-id="menu"] .ct-menu-link {
	position: relative;
}

/* WICHTIG: Der Strich hängt an der TEXTMITTE, nicht an der Boxunterkante.
   Die Menü-Links sind headerhohe Boxen (~120px, live gemessen) — ein
   Strich an deren Unterkante sass rund 50px unter dem Wort und war
   praktisch unsichtbar. Genau deshalb wirkte das Menü „ohne Hover". */
#header [data-id="menu"] .ct-menu-link::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(50% + 0.95em);
	width: calc(100% - 1.5em);
	height: 2.5px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	transition: transform 240ms var(--nk-ease-out);
}

#header [data-id="menu"] .ct-menu-link:hover::after,
#header [data-id="menu"] li:hover > .ct-menu-link::after,
#header [data-id="menu"] :is(li[class*="current-menu-"], li[class*="current_page"]) > .ct-menu-link::after {
	transform: translateX(-50%) scaleX(1);
}

/* -------------------------------------------------------------------------
 * 14a · Feinschliff Kopfleiste — aktive Seite klar, „Mehr"-Dropdown sauber
 * ---------------------------------------------------------------------- */

/* Aktive Seite UNMISSVERSTÄNDLICH markieren. Akzentfarbe allein ging unter
   (liegt zu nah an der Tinte), und der animierte ::after-Strich sitzt an der
   headerhohen Box — auf diesem Header zu tief. Deshalb ein ruhiger Unterstrich
   per text-decoration: der hängt am WORT, nicht an der Box, und sitzt dadurch
   immer korrekt — auch wenn der Header sticky wird und die Höhe wechselt. */
#header [data-id="menu"] :is(li[class*="current-menu-"], li[class*="current_page"]) > .ct-menu-link {
	color: var(--wp--preset--color--accent);
	font-weight: 800;
	text-decoration-line: underline !important;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

/* Auf der aktiven Seite entfällt der animierte ::after-Strich — sonst lägen
   zwei Unterstriche übereinander. Der klare Text-Unterstrich übernimmt. */
#header [data-id="menu"] :is(li[class*="current-menu-"], li[class*="current_page"]) > .ct-menu-link::after {
	display: none;
}

/* Das „Mehr"-Aufklappmenü als sauberes Kärtchen in der Sprache der Seite:
   genug Breite (kein Umbruch von „Politische Einordnung"), Innenabstand, feine
   Kante und weicher Schatten wie bei den Karten. */
#header [data-id="menu"] .sub-menu {
	min-width: 16rem;
	padding: 0.4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(26, 23, 20, 0.14);
}

#header [data-id="menu"] .sub-menu li > .ct-menu-link {
	white-space: nowrap;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	line-height: 1.3;
}

/* Ruhiger Hover im Dropdown: sanfte Petrol-Fläche statt des mittigen Strichs. */
#header [data-id="menu"] .sub-menu li:hover > .ct-menu-link {
	background: var(--wp--preset--color--petrol-tint);
	color: var(--wp--preset--color--accent);
}

/* Der animierte Mittelstrich stört im Dropdown — dort abschalten. */
#header [data-id="menu"] .sub-menu .ct-menu-link::after {
	display: none;
}

/* -------------------------------------------------------------------------
   15 · Kleinkram aus den Rückmelde-Runden
   ---------------------------------------------------------------------- */

/* Der Hinweis „Ziehen oder Pfeiltasten" unter den 3D-Szenen ist Geschichte —
   er überlappte mit den Modellen und erklärt ohnehin nur, was die Hand von
   selbst herausfindet. Die Szenen bleiben per Tastatur bedienbar. */
.nk-car-hint {
	display: none;
}

/* Der Hintergrund des Startseiten-Heros ist einstellbar: In WordPress unter
   Design → Customizer → Zusätzliches CSS z. B.
       :root { --nk-hero-bg: #E9DFD7; }
   eintragen — ohne Eintrag bleibt alles wie gehabt. */
.nk-hero {
	background: var(--nk-hero-bg, transparent);
}

/* -------------------------------------------------------------------------
   16 · Editor: keine Full-Bleed-Tricks im Bearbeiten-Modus

   Die width:100vw-Mechanik der Sektionen ist für die LIVE-Seite gedacht.
   Im Desktop-Editor (nicht eingerahmt) zerquetschte sie den Inhalt zu
   schmalen Spalten — hier gelten schlichte 100 Prozent mit ruhigem
   Seitenrand, und die Bearbeitung sieht aus wie die Seite.
   ---------------------------------------------------------------------- */

.editor-styles-wrapper .nk-section,
.editor-styles-wrapper .nk-hero,
.editor-styles-wrapper .nk-marquee {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

.editor-styles-wrapper .nk-section {
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   17 · Zeigen heißt Antworten — Hover für ALLE Karten

   Pillar, Zeitleiste und Orbit haben ihre Effekte schon (Abschnitt 13).
   Hier bekommen die übrigen Kartenfamilien ihre Antwort auf die Maus —
   jeweils so, dass die Choreografie (Kleben, Hereinfahren) unberührt
   bleibt: Karten mit eigener Transform-Logik antworten über Licht, Kante
   und ihr Wasserzeichen, freie Karten dürfen sich zusätzlich heben.
   ---------------------------------------------------------------------- */

/* Zahlen- und Wort-Kacheln: heben sich leicht. */
.nk-fact {
	transition:
		transform 260ms var(--nk-ease-out),
		box-shadow 260ms var(--nk-ease-out),
		border-color 240ms var(--nk-ease);
}

.nk-fact:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	box-shadow:
		0 2px 3px rgba(26, 23, 20, 0.05),
		0 16px 30px -18px rgba(26, 23, 20, 0.18);
}

/* Stapel-Karten (Arbeitsweise, Themen, Engagement): kleben — deshalb kein
   Heben, sondern Kante und Kantenlicht. */
.nk-stack > .nk-panel,
.nk-stack > .wp-block-group {
	transition: box-shadow 280ms var(--nk-ease-out), border-color 240ms var(--nk-ease);
}

.nk-stack > .nk-panel:hover,
.nk-stack > .wp-block-group:hover {
	border-color: rgba(31, 78, 74, 0.4);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		0 -2px 3px rgba(26, 23, 20, 0.05),
		0 -20px 44px -24px rgba(26, 23, 20, 0.55);
}

/* Zickzack-Karten (Einordnung): fahren choreografiert herein — die Antwort
   sind Kante, Schatten und das wachsende Wasserzeichen. */
.nk-zigzag > *:not(.nk-photo) {
	transition: box-shadow 280ms var(--nk-ease-out), border-color 240ms var(--nk-ease);
}

.nk-zigzag > *:not(.nk-photo):hover {
	border-color: rgba(31, 78, 74, 0.4);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		0 2px 3px rgba(26, 23, 20, 0.05),
		0 26px 52px -30px rgba(26, 23, 20, 0.6);
}

.nk-zigzag > * > .nk-icon,
.nk-zigzag .nk-watermark,
.nk-head-row .nk-icon {
	transition: transform 500ms var(--nk-ease-out), opacity 500ms var(--nk-ease-out);
}

.nk-zigzag > *:hover > .nk-icon,
.nk-zigzag > *:hover .nk-watermark,
.nk-pillar:hover .nk-head-row .nk-icon,
.nk-timeline__item:hover .nk-head-row .nk-icon {
	transform: rotate(-6deg) scale(1.06);
	opacity: 0.18;
}

/* Bildkarten: das Foto rückt minimal auf, der versetzte Akzentrahmen wird
   deutlicher. */
.nk-photo__frame {
	transition: transform 320ms var(--nk-ease-out);
}

.nk-photo:hover .nk-photo__frame {
	transform: translate(-2px, -2px);
}

.nk-photo::before {
	transition: opacity 320ms var(--nk-ease-out);
}

.nk-photo:hover::before {
	opacity: 0.55;
}

/* Werte-Zeilen: der Ton der aktiven Zeile, schon beim Zeigen. */
.nk-value {
	transition: background-color 240ms var(--nk-ease);
}

.nk-value:hover {
	background-color: rgba(220, 230, 227, 0.35);
}

/* -------------------------------------------------------------------------
   18 · Die Kartenstapel: klebende Überschrift + Wasserzeichen + Hover

   1) Die Sektions-Überschrift („Wie ich arbeite", „Wo ich mich eingebracht
      habe", „Woran ich dranbleibe") klebt oben, während sich die Karten
      darunter übereinanderschieben — sie bleibt stehen, bis der Stapel
      durch ist, erst dann zieht die Seite weiter. Die Karten setzen dafür
      eine Stufe tiefer an (--nk-stack-top), damit nichts kollidiert.

   2) Jede Stapel-Karte bekommt ihr eigenes Wasserzeichen — als Maske mit
      currentColor eingefärbt: auf der dunklen Karte hell, auf hellen
      Karten tintig, ohne je Karte eine eigene Grafik zu pflegen.

   3) Beim Zeigen antwortet die Karte: Wasserzeichen dreht und wächst,
      die Ziffer tritt vor.
   ---------------------------------------------------------------------- */

.nk-section:has(> .nk-stack) {
	/* Die Karten setzen jetzt DIREKT unter der klebenden Überschrift an
	   (vorher 8.25rem = großer Abstand, damit die Überschrift davor Platz
	   hatte). Da die Überschrift nun HINTER den Karten liegt, reicht knapp
	   über ihrer Unterkante — die erste Karte hängt an der Überschrift und
	   bleibt mit ihr bis zum Verschwinden zusammen. */
	--nk-stack-top: 5.5rem;
}

.nk-section:has(> .nk-stack) .nk-section__head {
	/* Die Überschrift KLEBT oben mit (bleibt sichtbar, solange die Karten
	   sichtbar sind), liegt aber HINTER den Karten (z-index 0 < Karten 1–6).
	   Dadurch stapeln sich die Karten sauber darunter, ohne dass die Überschrift
	   sie überlappt (der frühere Fehler war z-index 7 = Überschrift ÜBER den
	   Karten). Am Ende des Stapels löst sich der Halt und Überschrift + Karten
	   scrollen GEMEINSAM weg. */
	position: sticky;
	top: 1rem;
	z-index: 0;
}

/* Standard: leere Maske — Karten ohne zugewiesenes Zeichen zeigen nichts. */
.nk-stack > .nk-panel {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

.nk-stack > .nk-panel::before {
	content: "";
	position: absolute;
	right: -1.25rem;
	bottom: -1.75rem;
	width: 13rem;
	height: 13rem;
	background: currentColor;
	opacity: 0.07;
	pointer-events: none;
	-webkit-mask: var(--nk-panel-ikon) center / contain no-repeat;
	mask: var(--nk-panel-ikon) center / contain no-repeat;
	transition: transform 500ms var(--nk-ease-out), opacity 500ms var(--nk-ease-out);
}

.nk-stack > .nk-panel:hover::before {
	transform: rotate(-6deg) scale(1.06);
	opacity: 0.12;
}

.nk-stack > .nk-panel:hover .nk-panel__no {
	opacity: 0.6;
}

.nk-stack > .nk-panel--dark:hover .nk-panel__no {
	opacity: 1;
}

/* Text liegt über dem Wasserzeichen — aber NUR der Fliesstext und die
   Titel. Ziffer und Schlagwort sind eigene p-Elemente: bekämen sie hier
   position: relative, verlören sie ihre Positionierung und fielen mitten
   in die Überschrift (genau das war der Karten-Fehler der 21. Runde). */
.nk-stack > .nk-panel :is(h2, h3, p):not(.nk-panel__no):not(.nk-panel__tag) {
	position: relative;
	z-index: 1;
}

/* --- Der Kartenkopf, auf jeder Karte gleich -----------------------------
   „01 EHRLICH" steht absolut oben links (Ziffer + Schlagwort in einer
   Zeile — das machen die bestehenden Regeln in 6.10a/6.11), der Titel
   beginnt direkt darunter und bleibt EINZEILIG: fit-headings.js
   verkleinert notfalls die Schrift. Nur mit JS und nicht auf dem Telefon —
   dort darf er umbrechen. */
.nk-panel :is(h2, h3) {
	max-width: none;
}

@media (min-width: 641px) {
	.nk-js .nk-panel :is(h2, h3) {
		white-space: nowrap;
	}
}

/* Der Fliesstext verteilt sich über die Kartenbreite: zwei ruhige Spalten
   statt eines schmalen Streifens neben viel Leere. Der Titel spannt über
   beide; Ziffer und Schlagwort sind absolut und bleiben unberührt. Ein
   einzelner Absatz läuft über die volle Breite, gedeckelt auf ein
   lesbares Mass. */
@media (min-width: 900px) {
	.nk-stack > .nk-panel {
		columns: 2;
		column-gap: clamp(2rem, 4vw, 3.5rem);
	}

	.nk-stack > .nk-panel :is(h2, h3) {
		column-span: all;
	}

	.nk-stack > .nk-panel p:not(.nk-panel__no):not(.nk-panel__tag) {
		max-width: none;
	}

}

/* Die Kartenhöhe richtet sich nach dem LÄNGSTEN Text der Reihe: motion.js
   misst die natürlichen Höhen und setzt alle Karten eines Stapels auf das
   Maximum (inline min-height). Die festen Mindesthöhen aus 6.10a sind mit
   JS deshalb aus — ohne JS bleiben sie als Rückfallebene stehen, damit der
   Stapel weiter deckt. */
.nk-js .nk-stack > .nk-panel,
.nk-js .nk-stack > .wp-block-group {
	min-height: 0;
}

/* Arbeitsweise (Kompetenzen-Seite): Funke, fast geschlossener Ring, Haken. */
.nk-stack--hoch > .nk-panel:nth-child(1) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 2v5M12 17v5M2 12h5M17 12h5M4.9 4.9l3.5 3.5M15.6 15.6l3.5 3.5M19.1 4.9l-3.5 3.5M8.4 15.6l-3.5 3.5'/%3E%3C/svg%3E");
}

.nk-stack--hoch > .nk-panel:nth-child(2) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-dasharray='51 5.5' stroke-dashoffset='10'/%3E%3C/svg%3E");
}

.nk-stack--hoch > .nk-panel:nth-child(3) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 10 18 19.5 6.5'/%3E%3C/svg%3E");
}

/* Themen auf „Über mich" (der einzige Stapel mit Ton-Karte):
   Sprechblase (erklären), Raster (Warenwirtschaft), Chip (KI). */
.nk-stack:not(.nk-stack--hoch):has(.nk-panel--ton) > .nk-panel:nth-child(1) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a3 3 0 0 1-3 3H8l-4 3V6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3z'/%3E%3C/svg%3E");
}

.nk-stack:not(.nk-stack--hoch):has(.nk-panel--ton) > .nk-panel:nth-child(2) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

.nk-stack:not(.nk-stack--hoch):has(.nk-panel--ton) > .nk-panel:nth-child(3) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E");
}

/* Engagement auf „Werte" (Stapel ohne Ton-Karte):
   Klartext, Blatt, Waage. */
.nk-stack:not(.nk-stack--hoch):not(:has(.nk-panel--ton)) > .nk-panel:nth-child(1) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}

.nk-stack:not(.nk-stack--hoch):not(:has(.nk-panel--ton)) > .nk-panel:nth-child(2) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20C4 11 10 5 20 4c-1 10-7 16-16 16Z'/%3E%3Cpath d='M4 20c4-5 8-9 12-12'/%3E%3C/svg%3E");
}

.nk-stack:not(.nk-stack--hoch):not(:has(.nk-panel--ton)) > .nk-panel:nth-child(3) {
	--nk-panel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 21h14M4 7h16M7 7l-3 6.5a3.3 3.3 0 0 0 6.6 0zM17 7l-3 6.5a3.3 3.3 0 0 0 6.6 0z'/%3E%3C/svg%3E");
}