/* ============================================================================
   NUIT NOIRE INTERNATIONAL — mobile.css

   Letzte Stufe der Kaskade. Wird nach tokens.css, base.css, components.css,
   gate.css, private.css und profile.css geladen und VERFEINERT nur.
   Keine neue Komponente, keine neue Farbe, keine neue Klasse — ausschliesslich
   Korrekturen für 320 / 360 / 375 / 390 / 414 / 768 px, Hoch- und Querformat,
   Notch-Bereiche, Tastatur und Tap-Ziele.

   Reihenfolge der Abschnitte:
     1  Sichere Bereiche (Notch, Home-Indikator)
     2  Höhen ohne Sprung (svh/dvh statt vh)
     3  Umbruch — keine Wortunfälle, keine Überläufe
     4  Bilder — Seitenverhältnis gegen Layoutsprünge
     5  Tap-Ziele
     6  Eingabefelder
     7  Kopfzeile
     8  Drawer
     9  Fusszeile
    10  Inhaltsseiten — Zeilenlänge, Fakten, Listen
    11  Die Schwelle — Hochformat
    12  Die Schwelle — flache Fenster und eingeblendete Tastatur
    13  Sehr schmale Geräte
    14  Querformat
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1 · Sichere Bereiche
   Die Dokumente tragen `viewport-fit=cover`; ohne env() läuft Inhalt unter
   Notch und Home-Indikator. Jedes env() mit Rückfall, damit ältere Browser
   die Deklaration nicht verwerfen.
   ------------------------------------------------------------------------ */

@media (max-width: 63.999em) {

	.nni-skip {
		top: env(safe-area-inset-top, 0px);
		left: env(safe-area-inset-left, 0px);
	}

	.nni-head {
		padding-inline-start: max(var(--nni-gutter), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--nni-gutter), env(safe-area-inset-right, 0px));
		padding-block-start: calc(clamp(14px, 2vw, 22px) + env(safe-area-inset-top, 0px));
	}

	.nni-drawer {
		padding-inline-start: max(var(--nni-gutter), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--nni-gutter), env(safe-area-inset-right, 0px));
		padding-block-start: calc(var(--nnip-head) + clamp(28px, 8vh, 72px) + env(safe-area-inset-top, 0px));
		padding-block-end: calc(clamp(36px, 8vh, 72px) + env(safe-area-inset-bottom, 0px));
	}

	.nni-foot {
		padding-inline-start: max(var(--nni-gutter), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--nni-gutter), env(safe-area-inset-right, 0px));
		padding-block-end: calc(clamp(34px, 5vw, 64px) + env(safe-area-inset-bottom, 0px));
	}

	/* Die Schwelle setzt ihre Ränder als Kurzform; hier einzeln nachgezogen. */
	.nni-gate {
		padding-inline-start: max(var(--nni-gutter), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--nni-gutter), env(safe-area-inset-right, 0px));
		padding-block-start: calc(clamp(1.3rem, 3.2vh, 2.4rem) + env(safe-area-inset-top, 0px));
		padding-block-end: calc(clamp(1.4rem, 3.2vh, 2.4rem) + env(safe-area-inset-bottom, 0px));
	}
}


/* ---------------------------------------------------------------------------
   2 · Höhen ohne Sprung
   `vh` rechnet mit der grossen Ansicht — beim Ein- und Ausblenden der
   Browserleisten springt das Layout. `svh` steht still.
   ------------------------------------------------------------------------ */

@media (max-width: 63.999em) {

	.nni-body {
		min-height: 100svh;
	}

	.nni-main {
		min-height: 56svh;
	}

	/*
	 * Der Auftakt der Startseite. 74svh waren auf einem Telefon rund 600
	 * Pixel, und weil der Text am unteren Rand sitzt, sah der Gast beim
	 * Oeffnen zuerst 333 Pixel Nichts, bevor das erste Wort kam — auf einem
	 * Schirm von 812 Pixeln also fast die halbe Ansicht.
	 *
	 * Am Schreibtisch ist genau das die Wirkung: der Blick faellt ins Leere
	 * und findet den Satz erst danach. Auf dem Telefon ist es nur verschenkte
	 * Flaeche. Deshalb hier deutlich weniger — und ein Deckel in Pixeln,
	 * damit ein langes Telefon nicht wieder eine Wand daraus macht.
	 */
	.home .nni-main > :where(section, article):first-child,
	.nni-home__hero {
		min-height: min(42svh, 320px);
	}

	.nni-house__line,
	.page-template-template-house .nni-main h2 {
		min-height: min(74svh, 620px);
	}

	.error404 .nni-main,
	.nni-void {
		min-height: min(72svh, 680px);
	}

	.nni-gate-body,
	.nni-gate {
		min-height: 100svh;
	}
}


/* ---------------------------------------------------------------------------
   3 · Umbruch
   Lange Wörter, Adressen und Schlüssel dürfen die Spalte nie sprengen.
   `anywhere` dort, wo unteilbare Zeichenfolgen zu erwarten sind, sonst
   `break-word` — das bricht nur im Notfall und lässt den Satz in Ruhe.
   ------------------------------------------------------------------------ */

@media (max-width: 47.999em) {

	.nni-main :where(p, li, dd, dt, blockquote, figcaption, address) {
		overflow-wrap: break-word;
	}

	.nni-display,
	.nni-lede,
	.nni-eyebrow,
	.nni-label,
	.nni-card__title,
	.nni-card__text,
	.nni-list__title,
	.nni-list__text,
	.nni-quote,
	.nni-places,
	.nni-facts__value,
	.nni-facts > dd,
	.nni-facts__row > :last-child,
	.nni-foot,
	.nni-drawer__foot,
	.nni-gate__foot,
	.nni-key__msg {
		overflow-wrap: anywhere;
	}

	/* Überschriften niemals trennen — Silbentrennung bliebe hier sichtbar. */
	.nni-display,
	.nni-card__title,
	.nni-list__title,
	.nni-house__line {
		-webkit-hyphens: none;
		hyphens: none;
	}

	/* Raster- und Flex-Kinder dürfen nicht an ihrem Inhalt hängen bleiben. */
	.nni-card,
	.nni-card__body,
	.nni-field,
	.nni-form,
	.nni-editorial__body,
	.nni-prose,
	.nni-portrait__body {
		min-width: 0;
	}
}


/* ---------------------------------------------------------------------------
   4 · Bilder
   `parts/figure.php` gibt das gewünschte Verhältnis als --nni-ratio mit.
   Ohne aspect-ratio springt das Layout, sobald das Bild eintrifft.
   ------------------------------------------------------------------------ */

@media (max-width: 63.999em) {

	/* Die Platzhalterfläche folgt dem Verhältnis ihrer Figur; steht der Figur
	   bereits eine Höhe zu (Archiv, Portrait), füllt sie diese vollständig. */
	.nni-figure > .nni-figure__ph {
		--nni-ratio: inherit;
		aspect-ratio: var(--nni-ratio, 4 / 5);
		block-size: 100%;
	}
}

@supports selector(:has(*)) {

	@media (max-width: 63.999em) {

		.nni-figure:has(> img) {
			aspect-ratio: var(--nni-ratio, 3 / 4);
			overflow: hidden;
		}

		.nni-figure:has(> img) > img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}
}


/* ---------------------------------------------------------------------------
   5 · Tap-Ziele
   Mindestens 44 × 44 px, ohne die Optik zu verändern: der Kasten wächst,
   die Zeichnung bleibt an ihrem Platz.
   ------------------------------------------------------------------------ */

@media (max-width: 63.999em) {

	/* Zwei Striche von 34 px bleiben sichtbar, die Fläche wird 44 × 44. */
	.nni-burger {
		width: 44px;
		height: 44px;
		padding: 9px 5px;
		margin-inline-end: -5px;
	}

	/* Die Unterlinie wandert mit dem neuen Innenabstand nach unten, damit der
	   Link nicht über seiner eigenen Linie zu schweben scheint. */
	.nni-link {
		padding-block: 15px;
	}

	.nni-link::before,
	.nni-link::after {
		bottom: 15px;
	}

	.nni-gate-body .nni-link {
		padding-block: 15px;
	}

	.nni-gate-body .nni-link::before,
	.nni-gate-body .nni-link::after {
		bottom: 15px;
	}

	.nni-list__link,
	.nni-card__link {
		display: block;
		min-height: 44px;
	}

	/* Die Wortmarke im Kopf ist ein Verweis auf die Startseite und damit das
	   am häufigsten gebrauchte Ziel der Seite. Sie stand trotzdem als
	   kleinste Fläche im ganzen Kopf da: `line-height: 1`, keine Füllung,
	   kein Mindestmass — nachgerechnet rund 37 × 12,5px. Hier wächst nur der
	   Kasten, die Zeichnung bleibt an ihrem Platz: der Kopf ist ein
	   Flex-Behälter mit `align-items: center`, und der senkrechte
	   Innenabstand ist auf beiden Seiten gleich gross.

	   `1em` rechnet gegen den zuletzt gültigen Schriftgrad der Marke, also
	   gegen 0,78rem aus Abschnitt 7 und gegen 0,74rem aus Abschnitt 13. Die
	   Höhe ergibt deshalb in jedem Fall 44px, ohne dass die Zahl an zwei
	   Stellen gepflegt werden müsste. Die Breite trägt der Text auf 360, 390
	   und 414px nicht allein — dafür steht das Mindestmass daneben.

	   `min-height` steht zusätzlich daneben, weil die Rechnung im Browser
	   auf Bruchteile eines Pixels genau ausgeht: bei 390px kam die Marke aus
	   Füllung plus Zeilenhöhe auf 43,98px. Das ist keine sichtbare Grösse,
	   aber die Vorgabe lautet 44, und ein Boden kostet nichts. */
	.nni-head .nni-mark {
		min-width: 44px;
		min-height: 44px;
		padding-block: calc((44px - 1em) / 2);
	}

	/* Genug Luft zwischen zwei aufeinanderfolgenden Zielen. */
	.nni-list__item + .nni-list__item {
		margin-block-start: 6px;
	}
}


/* ---------------------------------------------------------------------------
   6 · Eingabefelder
   Unter 16 px zoomt iOS beim Antippen in die Seite hinein — das reisst die
   ganze Komposition auseinander.
   ------------------------------------------------------------------------ */

@media (max-width: 47.999em) {

	.nni-main .nni-form :is(input, select, textarea),
	.nni-main .nni-concierge :is(input, select, textarea) {
		font-size: max(1rem, 16px);
		line-height: 1.6;
	}

	/* Textfelder behalten ihre grosszügige Grundhöhe — hier nur die einzeiligen. */
	.nni-main .nni-form :is(input, select),
	.nni-main .nni-concierge :is(input, select) {
		min-height: 44px;
	}

	.nni-key__input {
		min-block-size: 44px;
	}
}


/* ---------------------------------------------------------------------------
   7 · Kopfzeile — bricht nicht um
   ------------------------------------------------------------------------ */

@media (max-width: 63.999em) {

	.nni-head {
		gap: 16px;
	}

	.nni-head .nni-mark {
		white-space: nowrap;
		font-size: 0.78rem;
		letter-spacing: 0.3em;
		text-indent: 0.3em;
	}
}


/* ---------------------------------------------------------------------------
   8 · Drawer — volle Höhe, sicherer Fokus, erreichbarer Schliesser
   ------------------------------------------------------------------------ */

@media (max-width: 63.999em) {

	/* `inset: 0` misst die grosse Ansicht; `dvh` folgt der wirklich sichtbaren.
	   Bei gesetzter Höhe wird `bottom` verworfen — genau so gewollt. */
	.nni-drawer {
		height: 100vh;
		height: 100dvh;
		justify-content: flex-start;
		overscroll-behavior: contain;
	}

	/* Zentriert, solange Platz ist; läuft die Liste über, beginnt sie oben und
	   bleibt vollständig erreichbar (zentrierter Überlauf wäre abgeschnitten). */
	.nni-drawer nav,
	.nni-drawer__nav {
		margin-block: auto;
	}

	.nni-drawer a:not(.nni-link):not(.nni-mark) {
		font-size: clamp(1.85rem, 8.4vw, 3.1rem);
		line-height: 1.06;
	}

	/* Der Kopf liegt über dem Drawer, damit die Schaltfläche zum Schliessen
	   erreichbar bleibt — sie steht in einem eigenen Stapelkontext und wäre
	   sonst hinter der Fläche begraben. */
	.nni-head {
		z-index: 95;
	}

	/* Bei offenem Drawer trägt der Kopf keine eigene Fläche mehr. */
	html.is-locked .nni-head {
		background-color: transparent;
		border-bottom-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	html.is-locked {
		overscroll-behavior: none;
	}
}


/* ---------------------------------------------------------------------------
   9 · Fusszeile — bricht nicht um
   ------------------------------------------------------------------------ */

@media (max-width: 47.999em) {

	.nni-foot {
		justify-items: start;
		gap: 8px;
	}

	.nni-foot > * {
		max-width: 100%;
	}

	.nni-foot .nni-mark,
	.nni-foot__name,
	.nni-foot__claim {
		white-space: nowrap;
	}
}


/* ---------------------------------------------------------------------------
   10 · Inhaltsseiten
   ------------------------------------------------------------------------ */

@media (max-width: 47.999em) {

	/* Portrait und Reise: ruhige Zeilenlänge, höchstens 38 Zeichen. */
	.single-nni_selection .nni-prose :where(p, li),
	.single-nni_journey .nni-prose :where(p, li),
	.single-nni_selection .nni-hero .nni-lede,
	.single-nni_journey .nni-hero .nni-lede {
		max-width: min(100%, 38ch);
	}

	/* Faktenzeilen einspaltig — 11 Zeichen Beschriftung plus Wert sind auf
	   einem Telefon zwei Spalten zu viel. */
	.single-nni_selection .nni-facts__row,
	.nni-portrait .nni-facts__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.nni-quote {
		max-width: min(100%, 28ch);
	}

	/* Ortsangaben brechen an den Trennpunkten, nie mitten im Namen. */
	.nni-places > li,
	.nni-places__item {
		white-space: nowrap;
	}
}

/* Reisen-Archiv auf dem Tablet im Hochformat: das Band rechnet mit drei
   Spalten, die Karte trägt aber nur ein einziges Kind. Es sässe sonst in der
   7ch schmalen ersten Spalte. Eine Spur — mehr braucht diese Breite nicht. */
@media (min-width: 48em) and (max-width: 63.999em) {

	.post-type-archive-nni_journey .nni-main .nni-grid > * {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ---------------------------------------------------------------------------
   11 · Die Schwelle — Hochformat
   Akt I darf höchstens vier Zeilen brauchen, Akt II muss als Ganzes stehen.
   ------------------------------------------------------------------------ */

@media (max-width: 47.999em) {

	.nni-gate {
		gap: clamp(1.2rem, 3.4vh, 2.4rem);
	}

	.nni-act {
		gap: clamp(0.9rem, 2.2vh, 1.6rem);
		padding-block: clamp(0.5rem, 2.4vh, 2rem);
	}

	.nni-gate-body .nni-display {
		font-size: clamp(2rem, 8.2vw, 3.2rem);
		line-height: 1.04;
	}

	.nni-gate-body .nni-display--sm {
		font-size: clamp(1.7rem, 6.6vw, 2.6rem);
		line-height: 1.08;
	}

	.nni-gate-body .nni-lede {
		max-width: 34ch;
		font-size: clamp(0.94rem, 0.9rem + 0.3vw, 1rem);
		line-height: 1.78;
	}

	.nni-key__row {
		gap: clamp(1.2rem, 3.4vh, 2rem);
	}

	/* Platz für zwei Zeilen Meldung. Erscheint der Hinweis, rückt nichts. */
	.nni-key__msg {
		min-height: 3.9em;
		margin-block-start: clamp(1rem, 2.6vh, 1.6rem);
	}
}


/* ---------------------------------------------------------------------------
   12 · Die Schwelle — flache Fenster und eingeblendete Tastatur

   Zwei Vorkehrungen:
   a) Die mittlere Rasterzeile darf nicht unter ihren Inhalt schrumpfen —
      sonst schöbe sich Akt II unter die Fusszeile.
   b) Holt der Browser das Feld ins Bild, hält der Scroll-Rand darüber
      Eyebrow, Überschrift und Feld gemeinsam sichtbar.
   ------------------------------------------------------------------------ */

@media (max-height: 40em) {

	.nni-gate {
		grid-template-rows: auto minmax(min-content, 1fr) auto;
	}
}

@media (max-width: 63.999em) {

	.nni-key,
	.nni-key__input {
		scroll-margin-block: 9rem 7rem;
	}
}

@media (max-height: 34em) {

	.nni-gate {
		gap: clamp(0.7rem, 2.2vh, 1.4rem);
		grid-template-rows: auto minmax(min-content, 1fr) auto;
		padding-block-start: calc(0.7rem + env(safe-area-inset-top, 0px));
		padding-block-end: calc(0.7rem + env(safe-area-inset-bottom, 0px));
	}

	/* Läuft ein Akt über, beginnt er oben und bleibt vollständig lesbar. */
	.nni-act {
		justify-content: flex-start;
		gap: clamp(0.5rem, 1.6vh, 1rem);
		padding-block: 0.3rem;
	}

	.nni-gate-body .nni-seal {
		width: 34px;
		height: 34px;
		margin-bottom: 0;
	}

	.nni-gate-body .nni-display {
		font-size: clamp(1.6rem, 4.8vh, 2.4rem);
		line-height: 1.06;
	}

	.nni-gate-body .nni-display--sm {
		font-size: clamp(1.4rem, 3.8vh, 2rem);
		line-height: 1.1;
	}

	.nni-gate-body .nni-lede {
		max-width: 52ch;
		font-size: 0.88rem;
		line-height: 1.62;
	}

	.nni-gate-body .nni-btn--line {
		margin-top: 0.4rem;
		padding: 0.95em 2.2em;
	}

	.nni-key {
		margin-top: 0.3rem;
	}

	.nni-label {
		margin-bottom: 0.55rem;
	}

	.nni-key__row {
		gap: 0.9rem;
	}

	.nni-key__msg {
		min-height: 2.4em;
		margin-block-start: 0.7rem;
	}

	.nni-key,
	.nni-key__input {
		scroll-margin-block: 5rem 4rem;
	}

	.nni-gate__foot {
		gap: 0.3rem;
	}
}

/* Sehr flach — Landschaft auf kleinen Telefonen. */
@media (max-height: 26em) {

	.nni-gate {
		gap: 0.6rem;
	}

	.nni-gate-body .nni-display {
		font-size: clamp(1.35rem, 6vh, 1.9rem);
	}

	.nni-gate-body .nni-display--sm {
		font-size: clamp(1.2rem, 5vh, 1.6rem);
	}

	.nni-gate-body .nni-lede {
		font-size: 0.82rem;
		line-height: 1.55;
	}

	.nni-gate-body .nni-seal {
		width: 28px;
		height: 28px;
	}

	.nni-key__msg {
		min-height: 2.1em;
	}
}


/* ---------------------------------------------------------------------------
   13 · Sehr schmale Geräte
   Die gesperrten Grossbuchstaben kosten auf 360 und 320 px am meisten Breite.
   ------------------------------------------------------------------------ */

@media (max-width: 22.5em) {

	/* Hier wurde bisher der Grad zurückgenommen (0,54 bis 0,62 rem, also 8,6
	   bis 9,9 px). Unter 12 px darf nichts stehen — auf diesen Breiten kostet
	   deshalb die Sperrung Platz, nicht die Schrift. */
	.nni-gate-body .nni-eyebrow {
		letter-spacing: 0.2em;
		text-indent: 0.1em;
	}

	.nni-gate__hint {
		letter-spacing: 0.16em;
	}

	.nni-gate__foot {
		letter-spacing: 0.14em;
	}

	.nni-key__input {
		letter-spacing: 0.22em;
		text-indent: 0.11em;
	}

	.nni-foot {
		letter-spacing: var(--nni-ls-ui);
	}

	.nni-head .nni-mark {
		font-size: 0.75rem;
		letter-spacing: 0.22em;
		text-indent: 0.22em;
	}
}

@media (max-width: 20em) {

	.nni-gate-body .nni-display {
		font-size: 1.95rem;
	}

	.nni-gate-body .nni-display--sm {
		font-size: 1.62rem;
	}

	.nni-gate-body .nni-btn--line {
		padding-inline: 2em;
	}

	.nni-gate-body .nni-btn--solid {
		min-width: 11em;
		padding-inline: 2.2em;
	}

	.nni-key__input {
		letter-spacing: var(--nni-ls-ui);
		text-indent: 0.1em;
	}

	.nni-head .nni-mark {
		letter-spacing: var(--nni-ls-ui);
		text-indent: var(--nni-ls-ui);
	}

	.nni-foot {
		letter-spacing: 0.18em;
	}

	.nni-drawer a:not(.nni-link):not(.nni-mark) {
		font-size: 1.75rem;
	}
}


/* ---------------------------------------------------------------------------
   14 · Querformat
   Wenig Höhe, viel Breite: Ruhe schaffen, ohne den Rhythmus zu verlieren.
   ------------------------------------------------------------------------ */

@media (max-width: 63.999em) and (orientation: landscape) {

	.nni-drawer {
		padding-block-start: calc(var(--nnip-head) + 14px + env(safe-area-inset-top, 0px));
		padding-block-end: calc(18px + env(safe-area-inset-bottom, 0px));
		gap: 18px;
	}

	.nni-drawer nav,
	.nni-drawer__nav {
		gap: 6px;
	}

	.nni-drawer a:not(.nni-link):not(.nni-mark) {
		font-size: clamp(1.35rem, 7.2vh, 2.2rem);
		line-height: 1.12;
	}

	.nni-drawer__foot {
		padding-top: 16px;
	}

	.home .nni-main > :where(section, article):first-child,
	.nni-home__hero {
		min-height: min(52svh, 260px);
	}

	.nni-house__line,
	.page-template-template-house .nni-main h2 {
		min-height: min(88svh, 440px);
	}

	.error404 .nni-main,
	.nni-void {
		min-height: min(88svh, 460px);
	}
}


/* ============================================================================
   ANNAHMEN

   1  Ladereihenfolge: diese Datei kommt als letzte — nach tokens, base,
      components, gate, private und profile. Nur darum genügen überall gleiche
      oder gleich hohe Selektoren; es steht kein einziges !important darin.
   2  `svh`/`dvh`, `:has()`, `max()` und `env()` gelten als vorhanden. Alle drei
      erscheinen ausschliesslich in Überschreibungen mit vollwertigem Vorgänger:
      fällt eine Deklaration aus, bleibt der bisherige Wert stehen.
   3  Als „mobil" gilt hier alles unter 64em (1024px), damit das Tablet im
      Hochformat (768px) mitgenommen wird. Feinheiten der Typografie greifen
      erst unter 48em, Sonderfälle unter 22.5em (360px) und 20em (320px).
      Auch die sicheren Bereiche sind an diese Grenze gebunden — auf grösseren
      Geräten mit Aussparung gehören sie in die Grundlayoutdatei, nicht hierher.
   4  Die Schwelle: die Höhe des Fensters ändert sich beim Einblenden der
      Tastatur nicht auf allen Systemen. Deshalb zwei voneinander unabhängige
      Vorkehrungen — eine feste Untergrenze der mittleren Rasterzeile gegen
      Überlappung und ein Scroll-Rand am Schlüsselfeld, damit der Browser beim
      Heranholen des Feldes Eyebrow, Überschrift und Feld zusammen im Bild
      lässt. Die Schriftgrösse des Feldes bleibt immer bei mindestens 1rem.
   5  Der Kopf erhält unter 64em eine höhere Ebene als der Drawer. Grund: die
      Schaltfläche liegt im Stapelkontext des Kopfes und wäre sonst hinter der
      Drawer-Fläche unerreichbar. Bei offenem Drawer (`html.is-locked`) legt
      der Kopf seine eigene Fläche ab, damit keine Kante über der Liste steht.
   6  Reihenfolge im Quelltext bleibt unangetastet. Auf Portrait- und
      Reiseseiten steht der Text (Eyebrow, Überschrift, Anriss) bereits vor
      dem Bild; eine Umsortierung per `order` würde den Fliesstext hinter das
      Bild schieben und wurde deshalb nicht vorgenommen.
   7  Die Platzhalterfläche übernimmt das Verhältnis ihrer Figur. Fehlt der
      Figur die Angabe, bleibt der bisherige Rückfall 4/5 bestehen.
   8  Nicht angefasst: Farben, Bewegung, Fokusringe, Druckausgabe und alle
      Regeln für `prefers-reduced-motion` — diese Datei fügt keine einzige
      Animation und keine einzige Farbe hinzu.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Fliesstext auf dem Telefon nie unter 16px — darunter wird gekniffen gelesen
   und iOS neigt beim Antippen von Feldern zum Hineinzoomen.
   -------------------------------------------------------------------------- */
@media (max-width: 30em) {
	.nni-body,
	.nni-prose :where(p, li),
	.nni-psec__body :where(p, li),
	.nni-interview__a,
	.nni-card__text {
		font-size: 1rem;
		line-height: 1.85;
	}
}

/* --------------------------------------------------------------------------
   Klebende Balken auf dem Telefon vollflächig deckend.
   Mit 82 % Deckkraft und Weichzeichner schien der Text darunter durch — auf
   diesem sehr ruhigen Design liest sich das nicht als Glas, sondern als Fehler.
   Am Schreibtisch bleibt der Glaseffekt, dort ist genug Raum darum herum.
   -------------------------------------------------------------------------- */
@media (max-width: 48em) {
	.nni-head.is-stuck,
	[data-nni-head].is-stuck,
	.nni-pnav {
		background-color: var(--nni-black);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ===========================================================================
   14 · Der senkrechte Rhythmus auf dem Telefon

   Der Auftraggeber hat dreimal „riesen spaces" gemeldet, und er hat recht.
   Die Ursache steckt nicht in einer einzelnen Regel, sondern in der Bauart der
   Abstands-Token: sie sind fliessend als clamp(min, vw, max) geschrieben, und
   auf einem schmalen Schirm greift nicht der vw-Anteil, sondern das MINIMUM.
   `--nni-sp-10: clamp(98px, 11vw, 168px)` ergibt bei 375 Pixeln Fensterbreite
   nicht die erwarteten 41, sondern volle 98 Pixel — der grösste Abstand des
   Entwurfs steht ausgerechnet auf dem kleinsten Gerät.

   Nachgemessen auf /house/ bei 375x812: rund 130 Pixel Luft um jede haarfeine
   Linie (zweimal auf der Seite), 196 Pixel im Schlussruf, 130 Pixel am Artikel
   selbst. Zusammen fast 600 Pixel reines Nichts — drei Viertel eines
   Telefonschirms, auf einer Seite, auf der jemand nach Inhalt sucht.

   Hier werden deshalb die grossen Stufen der Skala neu gesetzt, statt einzelne
   Regeln zu jagen. Das trifft jede Stelle auf einmal, auch die, die noch
   niemand gefunden hat, und es lässt den Entwurf am Schreibtisch unberührt.
   Die kleinen Stufen (1 bis 6) bleiben, wie sie sind — sie tragen den Abstand
   INNERHALB eines Blocks und stimmen dort.
   ======================================================================== */

@media (max-width: 47.999em) {

	:root {
		--nni-sp-7:  clamp(30px, 7.0vw,  42px);
		--nni-sp-8:  clamp(36px, 9.0vw,  54px);
		--nni-sp-9:  clamp(44px, 11.0vw, 66px);
		--nni-sp-10: clamp(52px, 13.5vw, 80px);
		--nni-sp-11: clamp(62px, 16.0vw, 96px);
		--nni-sp-12: clamp(72px, 19.0vw, 112px);
	}

	/*
	 * Die haarfeine Linie trennt zwei Abschnitte. Dafür genügt weniger Luft,
	 * als der Entwurf ihr am Schreibtisch gibt — dort steht sie in einer
	 * Spalte von 1150 Pixeln und braucht das Gewicht, hier nicht.
	 */
	.nni-main .nni-rule,
	.nni-single > .nni-rule,
	article > .nni-rule {
		margin-block: clamp(26px, 6.5vw, 40px);
	}

	/* Der Schlussruf steht am Ende und darf ruhig stehen — aber nicht auf
	   zwei Dritteln eines Bildschirms. */
	.nni-cta {
		padding-block: clamp(40px, 10vw, 60px);
	}

	/*
	 * Die Bildflächen tragen sehr dunkle Aufnahmen. Auf schwarzem Grund sind
	 * ihre Ränder nicht zu sehen, und was man nicht als Bild erkennt, liest
	 * man als Lücke — das ist der zweite Teil desselben Befunds. Eine
	 * haarfeine Umrandung macht aus der Fläche wieder ein Bild, und ein
	 * stehenderes Format gibt ihr auf dem Telefon Gewicht.
	 */
	.nni-plate {
		margin-block: clamp(22px, 5.5vw, 34px);
	}

	.nni-plate img,
	.nni-figure img {
		border: var(--nni-hair) solid var(--nni-line-soft);
	}

	/*
	 * Das Seitenverhaeltnis steht als Eigenschaft --nni-ratio am <figure> und
	 * kommt als Inline-Wert aus der Vorlage; am <img> nachzusetzen bringt
	 * nichts, weil der Kasten der Figur die Hoehe bestimmt. Auf dem Telefon
	 * wird aus 16/9 deshalb hier 4/3: ein 346 mal 194 Pixel breiter Streifen
	 * hat auf schwarzem Grund kein Gewicht, und weil diese Aufnahmen sehr
	 * dunkel sind, liest man ihn als Luecke statt als Bild.
	 */
	.nni-figure--wide,
	.nni-plate--wide .nni-figure {
		--nni-ratio: 4 / 3;
	}

	/*
	 * Der Rahmen jeder Inhaltsseite. In private.css steht dafuer
	 * clamp(52px, 7.5vw, 118px) — auf 375 Pixeln greift wieder das Minimum,
	 * also 52 oben und 52 unten je Abschnitt. Der Artikel traegt das an
	 * seinem Anfang und an seinem Ende ein zweites Mal.
	 */
	:where(.nni-main) > :where(section, article, aside) {
		padding-block: clamp(30px, 7vw, 44px);
	}

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

	.nni-main {
		padding-bottom: clamp(36px, 9vw, 56px);
	}

	/*
	 * Der eigentliche Grund, und er war gut versteckt: mehrere senkrechte
	 * Abstaende rechnen in vh, nicht in vw. Auf einem Telefon ist das Fenster
	 * fast so HOCH wie auf einem Laptop — nur schmal. Ein Abstand von 8vh
	 * ergibt bei 812 Pixeln Fensterhoehe volle 65 Pixel und schrumpft beim
	 * Wechsel aufs Telefon kein Stueck. Genau daher kamen die 130 Pixel Luft
	 * um jede haarfeine Linie.
	 *
	 * Hier stehen dieselben Stellen noch einmal, in vw gerechnet. Die
	 * Auswahlausdruecke sind so schwer wie die Vorlagen, die sie ueberschreiben
	 * (drei Klassen bei den House-Regeln), sonst greifen sie nicht.
	 */
	.page-template-template-house .nni-main .nni-rule {
		margin-block: clamp(24px, 6vw, 38px);
	}

	.page-template-template-house .nni-main > :where(article, section) {
		padding-block: clamp(24px, 6vw, 38px);
	}

	.nni-single > .nni-rule,
	.nni-main .nni-rule {
		margin-block: clamp(24px, 6vw, 38px);
	}
}