/* ============================================================================
   NUIT NOIRE INTERNATIONAL — private.css
   Layout der privaten Welt hinter der Tür + Chrome (Kopf, Drawer, Fuß).
   Nutzt ausschliesslich Tokens aus tokens.css und die Bausteine aus
   components.css. Hier werden keine Komponenten neu erfunden — nur ihre
   Anordnung, ihr Rhythmus und ihr Auftritt auf den einzelnen Seiten.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0 · Lokale Layout-Variablen (Prefix --nnip-, damit sie nie mit den
       unveränderlichen Design-Tokens kollidieren)
   ------------------------------------------------------------------------ */

.nni-body {
	--nnip-head: clamp(58px, 7.4vh, 82px);
	--nnip-step: clamp(72px, 10vw, 168px);
	--nnip-step-sm: clamp(44px, 6vw, 96px);
	--nnip-lane: calc(var(--nni-max) + var(--nni-gutter) * 2);
	--nnip-veil: var(--nni-t-slow);

	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--nni-black);
}

/* ---------------------------------------------------------------------------
   1 · Skip-Link
   ------------------------------------------------------------------------ */

.nni-skip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	padding: 14px 22px;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nni-cream);
	background-color: var(--nni-ink);
	border: 1px solid var(--nni-line);
	transform: translateY(-140%);
	transition: transform var(--nni-t-fast) var(--nni-ease);
}

.nni-skip:focus,
.nni-skip:focus-visible {
	transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   2 · Kopfzeile
   ------------------------------------------------------------------------ */

.nni-head {
	position: sticky;
	top: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 64px);
	min-height: var(--nnip-head);
	padding-inline: var(--nni-gutter);
	padding-block: clamp(14px, 2vw, 22px);
	/* Deckend ist der Grundzustand, durchsichtig die Ausnahme — und nicht
	   umgekehrt. Vorher stand hier `transparent`, und die Fläche kam allein
	   über die Klasse `is-stuck`, die ausschliesslich site.js setzt. Blieb das
	   Skript aus (abgeschaltet, blockiert, Ladefehler), klebte die Kopfzeile
	   beim Scrollen weiterhin oben, hatte aber keine Fläche: der Text der
	   Seite lief sichtbar unter Wortmarke und Burger hindurch.

	   Die Umkehr kostet am Seitenanfang nichts. Die Kopfzeile steht als
	   Flex-Kind von .nni-body im normalen Fluss und überdeckt dort nichts;
	   hinter ihr liegt nur die Fläche von .nni-body, und die trägt dieselbe
	   Farbe --nni-black. Sichtbar wird der Unterschied erst, sobald Inhalt
	   unter die Kopfzeile wandert — genau dann greift `is-stuck`. */
	background-color: var(--nni-black);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--nni-t-med) var(--nni-ease-soft),
		border-color var(--nni-t-med) var(--nni-ease-soft);
}

/* Der Zwilling ohne Klassennamen, damit beide Selektoren im Gleichschritt
   bleiben — die Regeln für `is-stuck` führen ihn ebenso. */
[data-nni-head] {
	background-color: var(--nni-black);
}

/* Läuft ein Skript, schwebt die Kopfzeile am Seitenanfang wieder frei über der
   Seite, wie entworfen. Ab 24px Scrollhöhe setzt site.js `is-stuck`, und die
   Fläche kommt zurück, bevor der erste Buchstabe darunter geraten kann. */
.nni-js .nni-head:not(.is-stuck),
.nni-js [data-nni-head]:not(.is-stuck) {
	background-color: transparent;
}

.nni-head.is-stuck,
[data-nni-head].is-stuck {
	background-color: var(--nni-black);
	border-bottom-color: var(--nni-line-soft);
}

@supports (backdrop-filter: blur(2px)) and (color: color-mix(in srgb, #000 50%, transparent)) {
	.nni-head.is-stuck,
	[data-nni-head].is-stuck {
		background-color: color-mix(in srgb, var(--nni-black) 76%, transparent);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
	}
}

/* Wortmarke im Kopf — nur Auftritt an dieser Stelle, keine Komponente. */
.nni-head .nni-mark {
	flex: 0 0 auto;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.82rem;
	line-height: 1;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nni-cream);
	opacity: 0.92;
	transition: opacity var(--nni-t-fast) var(--nni-ease);
}

.nni-head .nni-mark:hover,
.nni-head .nni-mark:focus-visible {
	opacity: 1;
}

/* Navigation */
.nni-nav {
	display: none;
	align-items: baseline;
	gap: clamp(26px, 3vw, 52px);
}

.nni-nav a {
	position: relative;
	display: inline-block;
	padding-block: 4px;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nni-muted);
	transition: color var(--nni-t-fast) var(--nni-ease);
}

.nni-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background-color: currentColor;
	opacity: 0.55;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform var(--nni-t-med) var(--nni-ease);
}

.nni-nav a:hover,
.nni-nav a:focus-visible {
	color: var(--nni-cream);
}

.nni-nav a:hover::after,
.nni-nav a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.nni-nav a.is-current,
.nni-nav .is-current > a,
.nni-nav a[aria-current] {
	color: var(--nni-cream);
}

.nni-nav a.is-current::after,
.nni-nav a[aria-current]::after {
	opacity: 0.26;
	transform: scaleX(1);
	transform-origin: 0 50%;
}

@media (min-width: 64em) {
	.nni-nav {
		display: flex;
	}
}

/* ---------------------------------------------------------------------------
   3 · Burger + Drawer (nur unter 64em)
   ------------------------------------------------------------------------ */

.nni-burger {
	position: relative;
	z-index: 95;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 34px;
	height: 26px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.nni-burger span {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--nni-cream);
	opacity: 0.78;
	transform-origin: 50% 50%;
	transition:
		transform var(--nni-t-med) var(--nni-ease),
		opacity var(--nni-t-fast) var(--nni-ease);
}

.nni-burger:hover span,
.nni-burger:focus-visible span {
	opacity: 1;
}

.nni-burger[aria-expanded="true"] span:first-child {
	transform: translateY(4px) rotate(45deg);
}

.nni-burger[aria-expanded="true"] span:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

@media (min-width: 64em) {
	.nni-burger {
		display: none;
	}
}

.nni-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(32px, 7vh, 72px);
	padding: calc(var(--nnip-head) + clamp(28px, 8vh, 72px)) var(--nni-gutter) clamp(36px, 8vh, 72px);
	background-color: var(--nni-black);
	opacity: 0;
	transition: opacity var(--nni-t-med) var(--nni-ease-soft);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.nni-drawer[hidden] {
	display: none;
}

.nni-drawer.is-open {
	opacity: 1;
}

.nni-drawer nav,
.nni-drawer__nav {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 2.4vh, 22px);
}

.nni-drawer a:not(.nni-link):not(.nni-mark) {
	display: block;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(2.1rem, 10vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-decoration: none;
	color: var(--nni-cream);
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--nni-t-med) var(--nni-ease),
		transform var(--nni-t-med) var(--nni-ease),
		color var(--nni-t-fast) var(--nni-ease);
}

.nni-drawer a:not(.nni-link):not(.nni-mark):hover,
.nni-drawer a:not(.nni-link):not(.nni-mark):focus-visible {
	color: var(--nni-cream);
}

.nni-drawer a.is-current:not(.nni-link):not(.nni-mark),
.nni-drawer a[aria-current]:not(.nni-link):not(.nni-mark) {
	color: var(--nni-muted);
}

.nni-drawer.is-open a:not(.nni-link):not(.nni-mark) {
	opacity: 1;
	transform: translateY(0);
}

.nni-drawer.is-open a:nth-child(1) { transition-delay: 90ms; }
.nni-drawer.is-open a:nth-child(2) { transition-delay: 180ms; }
.nni-drawer.is-open a:nth-child(3) { transition-delay: 270ms; }
.nni-drawer.is-open a:nth-child(4) { transition-delay: 360ms; }
.nni-drawer.is-open a:nth-child(5) { transition-delay: 450ms; }
.nni-drawer.is-open a:nth-child(6) { transition-delay: 540ms; }

.nni-drawer__head {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--nnip-head);
	padding-inline: var(--nni-gutter);
	padding-block: clamp(14px, 2vw, 22px);
}

.nni-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px clamp(18px, 4vw, 40px);
	padding-top: clamp(22px, 4vh, 40px);
	border-top: 1px solid var(--nni-line-soft);
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--nni-faint);
}

.nni-drawer__close,
[data-nni-drawer-close] {
	background: none;
	border: 0;
	padding: 6px 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--nni-muted);
	cursor: pointer;
	transition: color var(--nni-t-fast) var(--nni-ease);
}

.nni-drawer__close:hover,
[data-nni-drawer-close]:hover {
	color: var(--nni-cream);
}

/* Scroll-Lock, wird von site.js gesetzt */
html.is-locked,
.nni-body.is-locked {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   4 · Ankunfts-Zeremonie (?nni_open=1)
   ------------------------------------------------------------------------ */

.nni-body.is-opening::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	background-color: var(--nni-black);
	pointer-events: none;
	animation: nnip-veil 1400ms var(--nni-ease-soft) forwards;
}

.nni-body.is-opening .nni-main,
.nni-body.is-opening .nni-head,
.nni-body.is-opening .nni-foot {
	animation: nnip-arrive 1400ms var(--nni-ease) both;
}

@keyframes nnip-veil {
	0% { opacity: 1; }
	18% { opacity: 0.98; }
	100% { opacity: 0; }
}

@keyframes nnip-arrive {
	0% { opacity: 0.001; transform: translate3d(0, 12px, 0); }
	100% { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   5 · Grundgerüst der Inhaltsseiten
   ------------------------------------------------------------------------ */

.nni-main {
	flex: 1 0 auto;
	display: block;
	width: 100%;
	min-height: 56vh;
	padding-bottom: var(--nnip-step);
}

/* Sehr niedrige Spezifität: Templates und Komponenten dürfen jederzeit
   überschreiben. */
:where(.nni-main) > :where(section, article, header, aside, div, form) {
	width: 100%;
	max-width: var(--nnip-lane);
	margin-inline: auto;
	padding-inline: var(--nni-gutter);
}

:where(.nni-main) > :where(section, article, aside) {
	padding-block: clamp(52px, 7.5vw, 118px);
}

:where(.nni-main) > :where(section, article, aside):first-child {
	padding-block-start: clamp(32px, 5vw, 72px);
}

.nni-lane {
	width: 100%;
	max-width: var(--nni-max);
	margin-inline: auto;
}

.nni-lane--text {
	max-width: var(--nni-max-text);
}

/* Hero auf Innenseiten */
.nni-main .nni-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(18px, 2.6vw, 32px);
}

.nni-main .nni-hero > * {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   6 · Private Home — Hero, drei Wege, Editorial
   ------------------------------------------------------------------------ */

.home .nni-main > :where(section, article):first-child,
.nni-home__hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: min(74vh, 720px);
	padding-block: clamp(48px, 9vh, 132px) clamp(40px, 7vh, 96px);
}

/*
 * Auf dem Telefon frisst der Auftakt zu viel. 74vh sind dort rund 580 Pixel,
 * und weil der Text unten sitzt, sieht man beim Öffnen zuerst 270 Pixel
 * Nichts, bevor das erste Wort kommt. Am Schreibtisch ist genau das die
 * Wirkung — der Blick fällt ins Leere und findet den Satz erst danach. Auf
 * einem Schirm von 780 Pixeln ist es nur verschenkte Fläche.
 */
@media (max-width: 47.999em) {
	.home .nni-main > :where(section, article):first-child,
	.nni-home__hero {
		min-height: min(46vh, 380px);
		padding-block: clamp(28px, 5vh, 56px) clamp(28px, 5vh, 56px);
	}
}

.home .nni-hero .nni-lede,
.nni-home__hero .nni-lede {
	max-width: 46ch;
}

.home .nni-hero .nni-display,
.nni-home__hero .nni-display {
	max-width: 18ch;
}

/* Die drei Wege: bewusst kein gleichförmiges Kartenraster, sondern drei
   versetzt gesetzte, offene Blöcke. */
.nni-ways,
.home .nni-main .nni-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(24px, 4vw, 72px);
	row-gap: clamp(56px, 9vw, 128px);
	align-items: start;
}

.nni-way,
.home .nni-main .nni-grid > * {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(12px, 1.6vw, 20px);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
}

.nni-way::before,
.home .nni-main .nni-grid > *::before {
	content: "";
	display: block;
	width: clamp(48px, 7vw, 96px);
	height: 1px;
	margin-bottom: clamp(14px, 2vw, 26px);
	background-color: var(--nni-line);
	transition:
		width var(--nni-t-slow) var(--nni-ease),
		background-color var(--nni-t-med) var(--nni-ease);
}

.nni-way:hover::before,
.nni-way:focus-within::before,
.home .nni-main .nni-grid > a:hover::before,
.home .nni-main .nni-grid > *:focus-within::before {
	width: clamp(96px, 14vw, 200px);
	background-color: var(--nni-bronze);
}

.nni-way .nni-card__title,
.nni-way__title,
.home .nni-main .nni-grid .nni-card__title {
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.9rem, 3.6vw, 3.15rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--nni-cream);
}

.nni-way .nni-card__text,
.nni-way__text,
.home .nni-main .nni-grid .nni-card__text {
	max-width: 34ch;
	color: var(--nni-cream-soft);
}

@media (min-width: 64em) {
	.nni-ways,
	.home .nni-main .nni-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		row-gap: 0;
	}

	/* Überschrift und der innere Wege-Raster laufen über die volle Breite —
	   versetzt werden erst die drei Wege selbst (Regeln darunter). */
	.nni-ways > .nni-eyebrow,
	.nni-ways > .nni-grid,
	.nni-ways > .nni-rule,
	.nni-ways > p {
		grid-column: 1 / -1;
	}

	.nni-way:nth-child(3n + 1),
	.home .nni-main .nni-grid > *:nth-child(3n + 1) {
		grid-column: 1 / span 6;
	}

	.nni-way:nth-child(3n + 2),
	.home .nni-main .nni-grid > *:nth-child(3n + 2) {
		grid-column: 8 / span 5;
		margin-top: clamp(80px, 13vw, 210px);
	}

	.nni-way:nth-child(3n + 3),
	.home .nni-main .nni-grid > *:nth-child(3n + 3) {
		grid-column: 3 / span 6;
		margin-top: clamp(64px, 10vw, 168px);
	}
}

/* Editorial-Zweispalter (Text + Figur) */
.nni-editorial {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.nni-editorial__body > * + * {
	margin-top: clamp(16px, 2vw, 26px);
}

.nni-editorial__body :where(p) {
	max-width: var(--nni-max-text);
}

@media (min-width: 64em) {
	.nni-editorial {
		grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
		column-gap: clamp(56px, 7vw, 128px);
	}

	.nni-editorial--flip .nni-editorial__body {
		order: 2;
	}

	.nni-editorial .nni-figure {
		margin-top: clamp(24px, 5vw, 84px);
	}

	.nni-editorial--flip .nni-figure {
		margin-top: 0;
		margin-bottom: clamp(24px, 5vw, 84px);
	}
}

/* Falls das Template keinen eigenen Editorial-Wrapper setzt: ein Abschnitt,
   der eine Figur enthält, wird auf grossen Schirmen zum Zweispalter. */
@supports selector(:has(*)) {
	@media (min-width: 64em) {
		.home .nni-main > section:not(:first-child):has(> .nni-figure) {
			display: grid;
			grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
			column-gap: clamp(56px, 7vw, 128px);
			align-items: start;
		}

		.home .nni-main > section:not(:first-child):has(> .nni-figure) > .nni-figure {
			grid-row: 1 / span 20;
			grid-column: 2;
			margin-top: clamp(24px, 5vw, 84px);
		}
	}
}

/* ---------------------------------------------------------------------------
   7 · The Selection — editoriales, asymmetrisches Archiv
   ------------------------------------------------------------------------ */

.nni-selection,
.post-type-archive-nni_selection .nni-main .nni-grid,
.tax-nni_selection .nni-main .nni-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(24px, 3.2vw, 60px);
	row-gap: clamp(64px, 9vw, 132px);
	padding-block-start: clamp(24px, 4vw, 56px);
}

.nni-selection__item,
.post-type-archive-nni_selection .nni-main .nni-grid > *,
.tax-nni_selection .nni-main .nni-grid > * {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.4vw, 18px);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
}

.nni-selection__item .nni-figure,
.post-type-archive-nni_selection .nni-main .nni-grid .nni-figure {
	margin-bottom: clamp(14px, 2vw, 26px);
	overflow: hidden;
}

.nni-selection__item .nni-figure img,
.post-type-archive-nni_selection .nni-main .nni-grid .nni-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform var(--nni-t-door) var(--nni-ease), opacity var(--nni-t-med) var(--nni-ease);
}

.nni-selection__item:hover .nni-figure img,
.nni-selection__item:focus-within .nni-figure img,
.post-type-archive-nni_selection .nni-main .nni-grid > *:hover .nni-figure img,
.post-type-archive-nni_selection .nni-main .nni-grid > *:focus-within .nni-figure img {
	transform: scale(1.035);
}

.nni-selection__item .nni-card__title,
.post-type-archive-nni_selection .nni-main .nni-grid .nni-card__title {
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--nni-cream);
}

.nni-selection__item .nni-card__text,
.post-type-archive-nni_selection .nni-main .nni-grid .nni-card__text {
	max-width: 36ch;
	color: var(--nni-muted);
}

/* Unterschiedliche Bildhöhen — der Rhythmus entsteht im Bild, nicht im Rahmen. */
.nni-selection > *:nth-child(6n + 1) .nni-figure,
.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 1) .nni-figure { aspect-ratio: 3 / 4; }
.nni-selection > *:nth-child(6n + 2) .nni-figure,
.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 2) .nni-figure { aspect-ratio: 4 / 5; }
.nni-selection > *:nth-child(6n + 3) .nni-figure,
.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 3) .nni-figure { aspect-ratio: 1 / 1; }
.nni-selection > *:nth-child(6n + 4) .nni-figure,
.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 4) .nni-figure { aspect-ratio: 5 / 7; }
.nni-selection > *:nth-child(6n + 5) .nni-figure,
.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 5) .nni-figure { aspect-ratio: 3 / 4; }
.nni-selection > *:nth-child(6n + 6) .nni-figure,
.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 6) .nni-figure { aspect-ratio: 4 / 3; }

@media (min-width: 48em) and (max-width: 63.99em) {
	.nni-selection,
	.post-type-archive-nni_selection .nni-main .nni-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nni-selection > *:nth-child(2n),
	.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(2n) {
		margin-top: clamp(40px, 8vw, 96px);
	}
}

@media (min-width: 64em) {
	.nni-selection,
	.post-type-archive-nni_selection .nni-main .nni-grid,
	.tax-nni_selection .nni-main .nni-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		row-gap: clamp(40px, 5vw, 72px);
	}

	.nni-selection > *:nth-child(6n + 1),
	.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 1) {
		grid-column: 1 / span 5;
	}

	.nni-selection > *:nth-child(6n + 2),
	.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 2) {
		grid-column: 8 / span 4;
		margin-top: clamp(96px, 16vw, 260px);
	}

	.nni-selection > *:nth-child(6n + 3),
	.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 3) {
		grid-column: 2 / span 4;
		margin-top: clamp(32px, 6vw, 108px);
	}

	.nni-selection > *:nth-child(6n + 4),
	.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 4) {
		grid-column: 7 / span 5;
		margin-top: clamp(-40px, -2vw, 0px);
	}

	.nni-selection > *:nth-child(6n + 5),
	.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 5) {
		grid-column: 1 / span 4;
		margin-top: clamp(48px, 8vw, 140px);
	}

	.nni-selection > *:nth-child(6n + 6),
	.post-type-archive-nni_selection .nni-main .nni-grid > *:nth-child(6n + 6) {
		grid-column: 6 / span 6;
		margin-top: clamp(24px, 4vw, 80px);
	}
}

/* ---------------------------------------------------------------------------
   8 · Portrait — Einzelseite The Selection
   ------------------------------------------------------------------------ */

.nni-portrait,
.single-nni_selection .nni-main > article {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(30px, 5vw, 64px);
	align-items: start;
}

.nni-portrait__media,
.single-nni_selection .nni-main > article > .nni-figure {
	min-width: 0;
}

.nni-portrait .nni-figure,
.single-nni_selection .nni-main .nni-figure {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.nni-portrait .nni-figure img,
.single-nni_selection .nni-main .nni-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nni-portrait__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 2.2vw, 28px);
}

.nni-portrait__body :where(p) {
	max-width: var(--nni-max-text);
}

.single-nni_selection .nni-main .nni-display {
	font-size: clamp(2.4rem, 5.2vw, 4.4rem);
}

.single-nni_selection .nni-quote,
.nni-portrait .nni-quote {
	margin-block: clamp(30px, 5vw, 64px);
	max-width: 24ch;
	font-family: var(--nni-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.7rem, 3.2vw, 2.7rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--nni-cream);
}

/* Faktenliste — Platzierung und Haarlinien im Kontext des Portraits. */
.single-nni_selection .nni-facts,
.nni-portrait .nni-facts {
	width: 100%;
	margin-top: clamp(20px, 3vw, 40px);
	border-top: 1px solid var(--nni-line);
}

.single-nni_selection .nni-facts__row,
.nni-portrait .nni-facts__row {
	display: grid;
	grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
	gap: 8px clamp(16px, 3vw, 40px);
	padding-block: clamp(11px, 1.4vw, 16px);
	border-bottom: 1px solid var(--nni-line-soft);
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--nni-cream-soft);
}

.single-nni_selection .nni-facts__row > :first-child,
.nni-portrait .nni-facts__row > :first-child {
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--nni-faint);
}

@media (min-width: 64em) {
	.nni-portrait,
	.single-nni_selection .nni-main > article {
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
		column-gap: clamp(56px, 7vw, 132px);
	}

	.nni-portrait__media,
	.single-nni_selection .nni-main > article > .nni-figure {
		position: sticky;
		top: calc(var(--nnip-head) + 28px);
	}

	.single-nni_selection .nni-facts,
	.nni-portrait .nni-facts {
		max-width: 46ch;
	}
}

/* ---------------------------------------------------------------------------
   9 · Journeys — ruhige horizontale Bänder
   ------------------------------------------------------------------------ */

.nni-bands,
.post-type-archive-nni_journey .nni-main .nni-grid {
	display: block;
	border-top: 1px solid var(--nni-line);
	margin-top: clamp(28px, 4vw, 56px);
}

.nni-band,
.post-type-archive-nni_journey .nni-main .nni-grid > * {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	padding: clamp(26px, 4vw, 52px) 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--nni-line-soft);
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	transition: border-color var(--nni-t-med) var(--nni-ease);
}

.nni-band:hover,
.post-type-archive-nni_journey .nni-main .nni-grid > *:hover {
	border-bottom-color: var(--nni-line);
}

.nni-band .nni-card__idx,
.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__idx {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--nni-faint);
	transition: color var(--nni-t-med) var(--nni-ease), transform var(--nni-t-med) var(--nni-ease);
}

.nni-band:hover .nni-card__idx,
.post-type-archive-nni_journey .nni-main .nni-grid > *:hover .nni-card__idx {
	color: var(--nni-bronze);
}

.nni-band .nni-card__title,
.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__title {
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.7rem, 3.1vw, 2.7rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--nni-cream-soft);
	transition: color var(--nni-t-med) var(--nni-ease);
}

.nni-band:hover .nni-card__title,
.nni-band:focus-within .nni-card__title,
.post-type-archive-nni_journey .nni-main .nni-grid > *:hover .nni-card__title {
	color: var(--nni-cream);
}

.nni-band .nni-card__text,
.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__text {
	max-width: 40ch;
	color: var(--nni-muted);
}

/* Ortsangaben */
.nni-places {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--nni-muted);
}

.nni-places > li {
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
}

.nni-places > li + li::before {
	content: "·";
	color: var(--nni-faint);
	opacity: 0.8;
}

@media (min-width: 48em) {
	.nni-band,
	.post-type-archive-nni_journey .nni-main .nni-grid > * {
		grid-template-columns: minmax(0, 7ch) minmax(0, 1fr) minmax(0, 30ch);
		align-items: baseline;
		column-gap: clamp(24px, 4vw, 72px);
		row-gap: 14px;
	}

	.nni-band .nni-card__text,
	.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__text {
		grid-column: 2;
	}

	.nni-band .nni-places,
	.nni-band .nni-card__more,
	.post-type-archive-nni_journey .nni-main .nni-grid .nni-places {
		grid-column: 3;
		grid-row: 1;
		justify-content: flex-start;
	}
}

/* Journey-Einzelseite */
.nni-journey {
	display: block;
}

.single-nni_journey .nni-main .nni-figure {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-block: clamp(24px, 4vw, 56px);
}

.single-nni_journey .nni-main .nni-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-nni_journey .nni-main :where(p) {
	max-width: var(--nni-max-text);
}

.nni-journey__places {
	margin: clamp(36px, 6vw, 80px) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--nni-line);
}

.nni-journey__places > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	padding-block: clamp(16px, 2.4vw, 26px);
	border-bottom: 1px solid var(--nni-line-soft);
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	line-height: 1.12;
	color: var(--nni-cream);
}

@media (min-width: 48em) {
	.nni-journey__places > li {
		grid-template-columns: minmax(0, 6ch) minmax(0, 1fr);
		align-items: baseline;
		column-gap: clamp(20px, 4vw, 56px);
	}
}

/* ---------------------------------------------------------------------------
   10 · The House — reine Typografie, sehr viel Luft
   ------------------------------------------------------------------------ */

.nni-house,
.page-template-template-house .nni-main > :where(article, section, div) {
	display: block;
}

.nni-house :where(p),
.page-template-template-house .nni-main :where(p) {
	max-width: var(--nni-max-text);
	margin-inline: auto;
}

.nni-house :where(p) + :where(p),
.page-template-template-house .nni-main :where(p) + :where(p) {
	margin-top: clamp(20px, 2.6vw, 34px);
}

/* Freistehende Sätze — nehmen fast eine ganze Bildschirmhöhe ein.
   Der Satz stand bisher in der Mitte seiner Fläche und damit gleich weit vom
   eigenen Absatz wie vom Absatz davor (gemessen 291 px zu 291 px). Er band
   sich damit an nichts. Jetzt sitzt er am Fuss seiner Fläche: die Ruhe steht
   über ihm und trennt, der eigene Text folgt dicht darunter. */
.nni-house__line,
.page-template-template-house .nni-main h2 {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: min(74vh, 620px);
	max-width: 20ch;
	margin-inline: auto;
	margin-block: clamp(24px, 5vh, 64px) clamp(34px, 6.5vh, 66px);
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.95rem, 4.4vw, 3.7rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-align: center;
	text-wrap: balance;
	color: var(--nni-cream);
}

.nni-house__line--left,
.page-template-template-house .nni-main h3 {
	max-width: 24ch;
	margin-inline: auto;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--nni-cream);
}

.page-template-template-house .nni-main .nni-rule {
	max-width: var(--nni-max-text);
	margin-inline: auto;
	margin-block: clamp(40px, 8vh, 110px);
}

.page-template-template-house .nni-main > :where(article, section) {
	padding-block: clamp(40px, 8vh, 120px);
}

/* ---------------------------------------------------------------------------
   11 · Concierge — Linienformular
   ------------------------------------------------------------------------ */

.nni-concierge {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

.nni-concierge__intro > * + * {
	margin-top: clamp(14px, 2vw, 24px);
}

.nni-concierge__intro :where(p) {
	max-width: 44ch;
}

@media (min-width: 64em) {
	.nni-concierge {
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
		column-gap: clamp(56px, 8vw, 148px);
	}

	.nni-concierge__intro {
		position: sticky;
		top: calc(var(--nnip-head) + 28px);
	}
}

.nni-form {
	display: grid;
	gap: clamp(26px, 3.4vw, 46px);
	width: 100%;
	max-width: 46rem;
	min-width: 0;
}

.nni-field {
	display: grid;
	gap: 10px;
	min-width: 0;
}

/*
 * „Regarding …" — steht über dem Formular, wenn der Gast von einer
 * Profilseite kommt. Eine Zeile, sonst nichts; sie soll den Blick nicht
 * vom ersten Feld wegziehen.
 */
.nni-form__about {
	margin: 0;
	padding-left: var(--nni-sp-3);
	border-left: var(--nni-hair) solid var(--nni-line);
	color: var(--nni-muted);
	font-family: var(--nni-serif);
	font-size: var(--nni-fs-md);
	font-style: italic;
	line-height: var(--nni-lh-snug);
}

.nni-form__about-name {
	color: var(--nni-cream);
	font-style: normal;
}

.nni-field--pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 3.4vw, 46px);
}

@media (min-width: 48em) {
	.nni-field--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.nni-form label,
.nni-field > label,
.nni-concierge label {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nni-faint);
	transition: color var(--nni-t-fast) var(--nni-ease);
}

.nni-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"], textarea, select),
.nni-concierge :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"], textarea, select) {
	width: 100%;
	max-width: 100%;
	padding: 10px 0 12px;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--nni-line);
	border-radius: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--nni-cream);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--nni-t-med) var(--nni-ease);
}

.nni-form textarea,
.nni-concierge textarea {
	min-height: 8.5em;
	resize: vertical;
}

.nni-form :is(input, textarea, select)::placeholder,
.nni-concierge :is(input, textarea)::placeholder {
	color: var(--nni-faint);
	opacity: 1;
}

.nni-form :is(input, textarea, select):hover,
.nni-concierge :is(input, textarea, select):hover {
	border-bottom-color: var(--nni-muted);
}

.nni-form :is(input, textarea, select):focus,
.nni-form :is(input, textarea, select):focus-visible,
.nni-concierge :is(input, textarea, select):focus-visible {
	border-bottom-color: var(--nni-cream);
	outline-offset: 6px;
}

.nni-field:focus-within > label {
	color: var(--nni-muted);
}

.nni-form select {
	background-image: none;
}

.nni-form select option {
	background-color: var(--nni-ink);
	color: var(--nni-cream);
}

/* Honeypot / verborgene Felder bleiben unsichtbar, aber im Fluss der Seite. */
.nni-form .nni-hp,
.nni-concierge .nni-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nni-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 3vw, 34px);
	padding-top: clamp(6px, 1vw, 14px);
}

.nni-form .nni-btn.is-busy,
.nni-form .nni-btn[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

/* Statusmeldung — sehr ruhig */
.nni-form [data-nni-msg],
.nni-concierge [data-nni-msg] {
	min-height: 1.4em;
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.78rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--nni-muted);
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity var(--nni-t-med) var(--nni-ease),
		transform var(--nni-t-med) var(--nni-ease);
}

.nni-form [data-nni-msg].is-in,
.nni-form [data-nni-msg].is-ok,
.nni-form [data-nni-msg].is-error,
.nni-concierge [data-nni-msg].is-in {
	opacity: 1;
	transform: translateY(0);
}

.nni-form [data-nni-msg].is-error,
.nni-concierge [data-nni-msg].is-error {
	color: var(--nni-danger);
}

.nni-form [data-nni-msg].is-ok,
.nni-concierge [data-nni-msg].is-ok {
	color: var(--nni-cream-soft);
}

/* Dankestext nach dem Absenden */
[data-nni-thanks] {
	max-width: 40ch;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity var(--nni-t-slow) var(--nni-ease),
		transform var(--nni-t-slow) var(--nni-ease);
}

[data-nni-thanks].is-in {
	opacity: 1;
	transform: translateY(0);
}

[data-nni-thanks] > * + * {
	margin-top: clamp(12px, 1.8vw, 20px);
}

/* ---------------------------------------------------------------------------
   12 · 404 — karg
   ------------------------------------------------------------------------ */

.error404 .nni-main,
.nni-void {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: clamp(18px, 3vw, 32px);
	min-height: min(72vh, 680px);
}

/*
 * Vorher stand hier `max-width: 30ch` auf den Abschnitten selbst. In einem
 * Flex-Container mit `align-items: flex-start` hat das die ganze Seite auf
 * 292 Pixel zusammengezogen: die Überschrift stand als sechs einzeln
 * untereinander gesetzte Wörter, der halbe Schirm blieb leer. Die Abschnitte
 * behalten jetzt die Bahn wie überall sonst; gedeckelt wird der Text darin.
 * Die Regel nennt jedes Kind ausdrücklich, weil die Bahn-Deklaration in
 * Abschnitt 5 weder `nav` noch `hr` führt — beide klebten sonst am linken
 * Fensterrand.
 */
.error404 .nni-main > *,
.nni-void > * {
	width: 100%;
	max-width: var(--nnip-lane);
	margin-inline: auto;
	padding-inline: var(--nni-gutter);
}

/* Die Haarlinie trägt ihren Verlauf im Hintergrund; ein Innenabstand würde
   ihn nicht einrücken, sondern mitzeichnen. Sie bekommt darum Breite statt
   Polster und beginnt damit dort, wo der Text beginnt. */
.error404 .nni-main > hr,
.nni-void > hr {
	width: calc(100% - var(--nni-gutter) * 2);
	max-width: var(--nni-max);
	padding-inline: 0;
}

.error404 .nni-main .nni-display {
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	max-width: 20ch;
}

.error404 .nni-main .nni-lede {
	max-width: var(--nni-max-text);
}

/* ---------------------------------------------------------------------------
   13 · Fusszeile
   ------------------------------------------------------------------------ */

.nni-foot {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 14px clamp(24px, 4vw, 64px);
	max-width: var(--nnip-lane);
	width: 100%;
	margin-inline: auto;
	padding: clamp(30px, 4vw, 52px) var(--nni-gutter) clamp(34px, 5vw, 64px);
	border-top: 1px solid var(--nni-line-soft);
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.7;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nni-faint);
}

.nni-foot .nni-mark {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: var(--nni-muted);
	text-decoration: none;
}

.nni-foot a {
	color: var(--nni-faint);
	text-decoration: none;
	transition: color var(--nni-t-fast) var(--nni-ease);
}

.nni-foot a:hover,
.nni-foot a:focus-visible {
	color: var(--nni-cream-soft);
}

@media (min-width: 48em) {
	.nni-foot {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.nni-foot > :nth-child(2) {
		justify-self: center;
		text-align: center;
	}

	.nni-foot > :last-child {
		justify-self: end;
		text-align: right;
	}
}

/* ---------------------------------------------------------------------------
   14 · Reduced Motion
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.nni-head,
	.nni-nav a,
	.nni-nav a::after,
	.nni-burger span,
	.nni-drawer,
	.nni-drawer a,
	.nni-way::before,
	.home .nni-main .nni-grid > *::before,
	.nni-selection__item .nni-figure img,
	.post-type-archive-nni_selection .nni-main .nni-grid .nni-figure img,
	.nni-band,
	.nni-band .nni-card__idx,
	.nni-band .nni-card__title,
	.nni-form :is(input, textarea, select),
	.nni-form [data-nni-msg],
	[data-nni-thanks],
	.nni-skip {
		transition: none !important;
		animation: none !important;
	}

	.nni-drawer a:not(.nni-link):not(.nni-mark),
	.nni-drawer.is-open a:not(.nni-link):not(.nni-mark) {
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.nni-body.is-opening::after {
		display: none;
	}

	.nni-body.is-opening .nni-main,
	.nni-body.is-opening .nni-head,
	.nni-body.is-opening .nni-foot {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.nni-form [data-nni-msg],
	[data-nni-thanks] {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   15 · Druck
   ------------------------------------------------------------------------ */

@media print {
	.nni-body {
		display: block;
		background: #fff;
		color: #000;
	}

	.nni-grain,
	.nni-head,
	.nni-burger,
	.nni-drawer,
	.nni-skip,
	.nni-cta,
	.nni-btn,
	.nni-card__more,
	.nni-foot a {
		display: none !important;
	}

	.nni-main {
		min-height: 0;
		padding: 0;
	}

	:where(.nni-main) > :where(section, article, aside) {
		padding: 0 0 18mm;
		max-width: none;
		break-inside: avoid;
	}

	.nni-display,
	.nni-house__line,
	.page-template-template-house .nni-main h2,
	.nni-quote,
	.nni-card__title {
		color: #000;
		min-height: 0;
		page-break-after: avoid;
	}

	.nni-lede,
	.nni-eyebrow,
	p,
	li {
		color: #111;
	}

	.nni-figure,
	.nni-figure__ph {
		border: 1px solid #ccc;
		aspect-ratio: auto;
	}

	.nni-facts__row,
	.nni-journey__places > li,
	.nni-band {
		border-color: #ccc;
	}

	.nni-portrait,
	.single-nni_selection .nni-main > article,
	.nni-concierge,
	.nni-editorial {
		display: block;
	}

	.nni-portrait__media,
	.nni-concierge__intro {
		position: static;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.72em;
		color: #555;
	}
}

/* --------------------------------------------------------------------------
   Ergänzungen Ausbaustufe 2 — In her words, zweites Zitat, Ablauf einer Reise
   -------------------------------------------------------------------------- */

.nni-words__body {
	max-width: 46ch;
	margin-top: clamp(20px, 3vw, 34px);
}

.nni-words__line {
	margin: 0;
	padding: clamp(14px, 2vw, 22px) 0;
	border-bottom: 1px solid var(--nni-line-soft);
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.18rem, 1.02rem + .7vw, 1.6rem);
	line-height: 1.45;
	color: var(--nni-cream);
}

.nni-words__line:last-child {
	border-bottom: 0;
}

.nni-quote--second {
	margin-top: clamp(48px, 7vw, 96px);
}

.nni-stages__list {
	margin: clamp(20px, 3vw, 34px) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(24px, 3.5vw, 44px);
}

.nni-stages__item {
	display: grid;
	grid-template-columns: 3.2rem minmax(0, 1fr);
	column-gap: clamp(16px, 2.4vw, 30px);
	align-items: baseline;
	padding-top: clamp(16px, 2.2vw, 26px);
	border-top: 1px solid var(--nni-line-soft);
}

.nni-stages__idx {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: .22em;
	color: var(--nni-faint);
}

.nni-stages__title {
	margin: 0;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.85rem);
	line-height: 1.2;
	color: var(--nni-cream);
}

.nni-stages__text {
	grid-column: 2;
	margin: .55rem 0 0;
	max-width: 42ch;
	color: var(--nni-cream-soft);
}

@media (max-width: 34em) {
	.nni-stages__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.nni-stages__text {
		grid-column: 1;
	}
}

/* Reisen-Archiv: die Karte legt alles in einen einzigen Link. Das Bandraster
   muss deshalb auf dem Link liegen, nicht auf dem Artikel darüber. */
.post-type-archive-nni_journey .nni-main .nni-grid > * {
	display: block;
}

.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	text-decoration: none;
}

@media (min-width: 48em) {
	.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__link {
		grid-template-columns: minmax(0, 7ch) minmax(0, 1fr) minmax(0, 30ch);
		align-items: baseline;
		column-gap: clamp(24px, 4vw, 72px);
		row-gap: 14px;
	}

	.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__body {
		display: contents;
	}
}

/* --------------------------------------------------------------------------
   Prosa — gilt auf JEDER Breite, nicht nur auf dem Telefon.
   Vorher lagen diese Regeln ausschliesslich in max-width-Abfragen; am
   Schreibtisch hatte selbst gepflegter Fliesstext dadurch keinen Absatz-
   abstand und keine Zeilenlängenbegrenzung (base.css setzt * { margin: 0 }).
   -------------------------------------------------------------------------- */

.nni-prose > * + *,
.nni-page__body > * + * {
	margin-top: clamp(16px, 1.6vw, 26px);
}

.nni-prose :where(p, ul, ol, blockquote),
.nni-page__body :where(p, ul, ol, blockquote) {
	max-width: var(--nni-max-text);
}

.nni-prose :where(h2, h3),
.nni-page__body :where(h2, h3) {
	margin-top: clamp(40px, 5vw, 84px);
	margin-bottom: clamp(12px, 1.4vw, 20px);
	font-family: var(--nni-serif);
	font-weight: 300;
	line-height: 1.14;
	color: var(--nni-cream);
}

.nni-prose :where(h2),
.nni-page__body :where(h2) {
	font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.7rem);
}

.nni-prose :where(h3),
.nni-page__body :where(h3) {
	font-size: clamp(1.3rem, 1.1rem + .9vw, 1.8rem);
}

.nni-prose :where(ul, ol),
.nni-page__body :where(ul, ol) {
	padding-left: 1.2em;
}

.nni-prose :where(li) + :where(li),
.nni-page__body :where(li) + :where(li) {
	margin-top: .5em;
}

.nni-prose :where(strong),
.nni-page__body :where(strong) {
	font-weight: 400;
	color: var(--nni-cream);
}

.nni-prose :where(em),
.nni-page__body :where(em) {
	font-family: var(--nni-serif);
	font-style: italic;
}

/* Bilder springen nicht mehr beim Laden — unabhängig von der Fensterbreite. */
.nni-figure__img,
.nni-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--nni-ratio, 3 / 4);
	object-fit: cover;
}

/* Rechtslinks in der Fusszeile — leise, aber auffindbar. */
.nni-foot__legal {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 2vw, 26px);
	align-items: baseline;
}

.nni-foot__legal .nni-link {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nni-faint);
}

.nni-foot__legal .nni-link:hover,
.nni-foot__legal .nni-link:focus-visible {
	color: var(--nni-cream-soft);
}

@media (max-width: 48em) {
	.nni-foot__legal {
		width: 100%;
		justify-content: flex-start;
	}
}