/* ==========================================================================
   NUIT NOIRE INTERNATIONAL — gate.css
   The Threshold: Akt I (Atmosphäre) → Akt II (Der Schlüssel) → Die Tür.

   Farben ausschliesslich aus tokens.css (var(--nni-*)).
   Alles im Scope .nni-gate-body, damit die Schwelle unabhängig
   von der Ladereihenfolge der übrigen Stylesheets stimmt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — Bühne
   -------------------------------------------------------------------------- */

.nni-gate-body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	background-color: var(--nni-black);
	background-image: radial-gradient( 128% 80% at 50% 34%, var(--nni-ink) 0%, var(--nni-black) 64% );
	background-repeat: no-repeat;
	color: var(--nni-cream-soft);
	font-family: var(--nni-sans);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.nni-gate-body *,
.nni-gate-body *::before,
.nni-gate-body *::after {
	box-sizing: border-box;
}

.nni-gate-body ::selection {
	background: var(--nni-cream);
	color: var(--nni-black);
}

/* Lichtschein hinter der Bühne — zwei Pools, sehr langsam atmend. */
.nni-halo {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.nni-halo::before,
.nni-halo::after {
	content: "";
	position: absolute;
	inset: -6%;
	transition: opacity var(--nni-t-slow) var(--nni-ease-soft);
}

.nni-halo::before {
	background: radial-gradient( 42% 30% at 50% 21%, var(--nni-cream) 0%, transparent 72% );
	opacity: .045;
	animation: nni-halo-drift 26s var(--nni-ease-soft) infinite;
}

.nni-halo::after {
	background: radial-gradient( 64% 28% at 50% 100%, var(--nni-bronze) 0%, transparent 74% );
	opacity: .05;
	animation: nni-halo-drift 34s var(--nni-ease-soft) infinite reverse;
}

/* Im zweiten Akt wandert das Licht nach unten zur Tür. */
.nni-gate-body[data-nni-state="key"] .nni-halo::before { opacity: .07; }
.nni-gate-body[data-nni-state="key"] .nni-halo::after { opacity: .08; }

@keyframes nni-halo-drift {
	0%, 100% { transform: scale(1) translateY(0); }
	50%      { transform: scale(1.06) translateY(-1.8%); }
}

/* --------------------------------------------------------------------------
   2 — Raster
   -------------------------------------------------------------------------- */

.nni-gate {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vh, 3.6rem);
	min-height: 100vh;
	min-height: 100svh;
	width: 100%;
	max-width: var(--nni-max);
	margin-inline: auto;
	padding: clamp(1.3rem, 3.2vh, 2.4rem) var(--nni-gutter) clamp(1.4rem, 3.2vh, 2.4rem);
}

/* --------------------------------------------------------------------------
   3 — Kopfleiste
   -------------------------------------------------------------------------- */

.nni-gate__bar {
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	animation: nni-fade var(--nni-t-slow) var(--nni-ease-soft) both;
	animation-delay: 620ms;
}

.nni-gate__bar .nni-mark {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: .75rem;
	line-height: 1;
	letter-spacing: .5em;
	text-indent: .25em;
	text-transform: uppercase;
	color: var(--nni-cream);
	text-decoration: none;
}

.nni-gate__hint {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: .75rem;
	line-height: 1;
	letter-spacing: .24em;
	text-indent: .15em;
	text-transform: uppercase;
	color: var(--nni-faint);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4 — Akte + Überblendung
   -------------------------------------------------------------------------- */

/* Beide Akte teilen sich dieselbe Rasterzelle → echtes Crossfade,
   kein Höhensprung. Sichtbarkeit steuert data-nni-state, nicht [hidden]. */
.nni-act {
	grid-row: 2;
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: clamp(1.1rem, 2.6vh, 1.8rem);
	width: 100%;
	padding-block: clamp(1rem, 4vh, 3rem);
}

/* Beide Akte müssen dieselbe Zelle belegen — auch der noch verborgene.
   Verborgen wird über visibility (bleibt für Hilfsmittel unsichtbar),
   nicht über display, sonst springt das Layout beim Wechsel. */
.nni-act[hidden] { display: flex !important; }

.nni-act--one {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--nni-t-med) var(--nni-ease),
		transform var(--nni-t-med) var(--nni-ease),
		visibility 0s linear 0s;
}

.nni-act--two {
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--nni-t-med);
}

.nni-act--two > * {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--nni-t-med) var(--nni-ease),
		transform var(--nni-t-med) var(--nni-ease);
}

.nni-gate-body[data-nni-state="key"] .nni-act--one {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-20px);
	transition:
		opacity var(--nni-t-med) var(--nni-ease),
		transform var(--nni-t-med) var(--nni-ease),
		visibility 0s linear var(--nni-t-med);
}

.nni-gate-body[data-nni-state="key"] .nni-act--two {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.nni-gate-body[data-nni-state="key"] .nni-act--two > * {
	opacity: 1;
	transform: none;
}

/* Sanft gestaffeltes Eintreten des zweiten Aktes. */
.nni-gate-body[data-nni-state="key"] .nni-act--two > :nth-child(1) { transition-delay: 180ms; }
.nni-gate-body[data-nni-state="key"] .nni-act--two > :nth-child(2) { transition-delay: 260ms; }
.nni-gate-body[data-nni-state="key"] .nni-act--two > :nth-child(3) { transition-delay: 340ms; }
.nni-gate-body[data-nni-state="key"] .nni-act--two > :nth-child(4) { transition-delay: 420ms; }
.nni-gate-body[data-nni-state="key"] .nni-act--two > :nth-child(5) { transition-delay: 560ms; }

/* --------------------------------------------------------------------------
   5 — Typografie der Schwelle
   -------------------------------------------------------------------------- */

.nni-gate-body .nni-eyebrow {
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: .75rem;
	line-height: 1.6;
	letter-spacing: .28em;
	text-indent: .17em;
	text-transform: uppercase;
	color: var(--nni-muted);
}

.nni-gate-body .nni-display {
	margin: 0;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(2.15rem, 7.6vw, 5.2rem);
	line-height: 1.02;
	letter-spacing: -.015em;
	color: var(--nni-cream);
	text-wrap: balance;
}

.nni-gate-body .nni-display--sm {
	font-size: clamp(1.85rem, 5.6vw, 3.5rem);
	line-height: 1.06;
}

.nni-gate-body .nni-lede {
	margin: 0 auto;
	max-width: 44ch;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: clamp(.94rem, .88rem + .3vw, 1.06rem);
	line-height: 1.85;
	color: var(--nni-cream-soft);
}

/* Siegel — dieselbe Marke wie im privaten Bereich (Ring + Bronzepunkt),
   an der Schwelle nur etwas grösser und mit eigenem Auftritt.
   Bewusst eigenständig formuliert, damit die Schwelle auch dann steht,
   wenn nur tokens.css und gate.css geladen sind. */
.nni-gate-body .nni-seal {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: clamp(46px, 9vw, 56px);
	height: clamp(46px, 9vw, 56px);
	border: 1px solid var(--nni-line);
	border-radius: 50%;
	margin-bottom: clamp(.2rem, 1.4vh, 1rem);
	animation: nni-seal-in var(--nni-t-slow) var(--nni-ease) both;
}

.nni-gate-body .nni-seal i {
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--nni-bronze);
	animation: nni-seal-breathe 5.6s var(--nni-ease-soft) infinite;
}

@keyframes nni-seal-in {
	from { opacity: 0; transform: scale(.84); }
	to   { opacity: 1; transform: none; }
}

@keyframes nni-seal-breathe {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}

/* Gestaffeltes Erscheinen in Akt I. */
.nni-gate-body .nni-rise {
	animation: nni-rise var(--nni-t-slow) var(--nni-ease) both;
}

.nni-gate-body .nni-rise[data-d="1"] { animation-delay: 0ms; }
.nni-gate-body .nni-rise[data-d="2"] { animation-delay: 140ms; }
.nni-gate-body .nni-rise[data-d="3"] { animation-delay: 280ms; }
.nni-gate-body .nni-rise[data-d="4"] { animation-delay: 420ms; }

@keyframes nni-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@keyframes nni-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   6 — Knöpfe und Links
   -------------------------------------------------------------------------- */

.nni-gate-body .nni-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	border-radius: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	overflow: hidden;
}

.nni-gate-body .nni-btn--line {
	margin-top: clamp(.8rem, 3vh, 2rem);
	padding: 1.3em 2.9em;
	border: 1px solid var(--nni-line);
	background: transparent;
	color: var(--nni-cream);
	font-size: .75rem;
	letter-spacing: .22em;
	text-indent: .22em;
	transition:
		border-color var(--nni-t-med) var(--nni-ease),
		box-shadow var(--nni-t-med) var(--nni-ease);
}

.nni-gate-body .nni-btn--line::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--nni-cream);
	opacity: 0;
	transition: opacity var(--nni-t-med) var(--nni-ease);
	pointer-events: none;
}

.nni-gate-body .nni-btn--line:hover,
.nni-gate-body .nni-btn--line:focus-visible {
	border-color: var(--nni-muted);
	box-shadow: 0 18px 42px -34px color-mix(in srgb, var(--nni-cream) 16%, transparent);
}

.nni-gate-body .nni-btn--line:hover::before,
.nni-gate-body .nni-btn--line:focus-visible::before {
	opacity: .05;
}

.nni-gate-body .nni-btn--solid {
	min-width: 12.5em;
	padding: 1.2em 3em;
	border: 1px solid var(--nni-cream);
	background: var(--nni-cream);
	color: var(--nni-black);
	font-size: .75rem;
	letter-spacing: .26em;
	text-indent: .26em;
	transition:
		background-color var(--nni-t-fast) var(--nni-ease),
		color var(--nni-t-fast) var(--nni-ease),
		border-color var(--nni-t-fast) var(--nni-ease),
		box-shadow var(--nni-t-med) var(--nni-ease),
		opacity var(--nni-t-fast) var(--nni-ease);
}

.nni-gate-body .nni-btn--solid:hover,
.nni-gate-body .nni-btn--solid:focus-visible {
	background: transparent;
	color: var(--nni-cream);
	box-shadow: 0 20px 46px -36px color-mix(in srgb, var(--nni-cream) 22%, transparent);
}

.nni-gate-body .nni-btn[disabled] {
	cursor: default;
	opacity: .5;
}

/* Die Unterstreichung gehört dem gemeinsamen Link-Baustein (components.css);
   hier nur Grösse, Ruhe und das Ausblenden im Erfolgsfall. */
.nni-gate-body .nni-link {
	position: relative;
	display: inline-block;
	margin: 0;
	margin-inline-end: -.2em;
	padding: .25em 0;
	border: 0;
	background: none;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: .75rem;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nni-faint);
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--nni-t-fast) var(--nni-ease),
		opacity var(--nni-t-med) var(--nni-ease);
}

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

.nni-gate-body :focus-visible {
	outline: 1px solid var(--nni-cream);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7 — Akt II: der Schlüssel
   -------------------------------------------------------------------------- */

.nni-act--two .nni-lede {
	max-width: 40ch;
}

.nni-key {
	width: 100%;
	max-width: 34rem;
	margin: clamp(.6rem, 2.4vh, 1.6rem) auto 0;
}

.nni-label {
	display: block;
	margin: 0 0 clamp(1rem, 2.6vh, 1.6rem);
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: .6rem;
	line-height: 1;
	letter-spacing: .34em;
	text-indent: .17em;
	text-transform: uppercase;
	color: var(--nni-muted);
	text-align: center;
	transition: color var(--nni-t-fast) var(--nni-ease);
}

.nni-key__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.6rem, 4.4vh, 2.6rem);
	width: 100%;
}

/* Das Feld ist kein Kasten, sondern eine Linie. */
.nni-key__input {
	display: block;
	width: 100%;
	max-width: 24rem;
	margin: 0;
	padding: .85em .2em .7em;
	border: 0;
	border-bottom: 1px solid var(--nni-line-strong);
	border-radius: 0;
	background: transparent;
	color: var(--nni-cream);
	caret-color: var(--nni-cream);
	font-family: var(--nni-sans);
	font-weight: 300;
	/* Nie unter 16px — sonst zoomt iOS beim Antippen in die Seite hinein. */
	font-size: clamp(1rem, 3.4vw, 1.35rem);
	line-height: 1.4;
	letter-spacing: .28em;
	text-indent: .14em;
	text-align: center;
	text-transform: uppercase;
	-webkit-appearance: none;
	appearance: none;
	transition:
		border-color var(--nni-t-med) var(--nni-ease),
		box-shadow var(--nni-t-med) var(--nni-ease),
		opacity var(--nni-t-fast) var(--nni-ease);
}

.nni-key__input::placeholder {
	color: var(--nni-faint);
	opacity: .7;
	letter-spacing: .28em;
}

.nni-key__input:focus {

	border-bottom-color: var(--nni-cream-soft);
	box-shadow: 0 12px 26px -22px color-mix(in srgb, var(--nni-cream) 20%, transparent);
}

.nni-key__input:focus-visible {

}

.nni-key__input:-webkit-autofill {
	-webkit-text-fill-color: var(--nni-cream);
	transition: background-color 100000s;
}

.nni-key:focus-within .nni-label {
	color: var(--nni-cream-soft);
}

.nni-key__msg {
	display: block;
	min-height: 2.8em;
	margin: clamp(1.3rem, 3.2vh, 2rem) 0 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: .75rem;
	line-height: 1.9;
	letter-spacing: .2em;
	text-indent: .1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--nni-muted);
	transition: color var(--nni-t-fast) var(--nni-ease);
}

/* Ladezustand */
.nni-key.is-busy .nni-key__input {
	opacity: .55;
}

.nni-key.is-busy .nni-btn--solid {
	animation: nni-pulse 1.8s var(--nni-ease-soft) infinite;
}

@keyframes nni-pulse {
	0%, 100% { opacity: .5; }
	50%      { opacity: .85; }
}

/* Fehlerzustand */
.nni-key.is-error .nni-key__input,
.nni-key.is-error .nni-key__input:focus {
	border-bottom-color: var(--nni-danger);
	box-shadow: none;
}

.nni-key.is-error .nni-key__msg {
	color: var(--nni-danger);
}

.nni-key.is-error .nni-key__row {
	animation: nni-shiver 460ms var(--nni-ease-soft) both;
}

@keyframes nni-shiver {
	0%, 100% { transform: translateX(0); }
	14%      { transform: translateX(-3px); }
	30%      { transform: translateX(3px); }
	46%      { transform: translateX(-2px); }
	62%      { transform: translateX(2px); }
	80%      { transform: translateX(-1px); }
}

/* Erfolgszustand */
.nni-key.is-ok .nni-key__input,
.nni-key.is-ok .nni-key__input:focus {
	border-bottom-color: var(--nni-cream);
	box-shadow: 0 14px 32px -24px color-mix(in srgb, var(--nni-cream) 18%, transparent);
}

.nni-key.is-ok .nni-key__msg {
	color: var(--nni-cream);
}

.nni-key.is-ok .nni-btn--solid {
	opacity: 0;
	pointer-events: none;
}

.nni-key.is-ok ~ .nni-link {
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   8 — Fusszeile
   -------------------------------------------------------------------------- */

.nni-gate__foot {
	grid-row: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: .75rem;
	line-height: 1.6;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--nni-faint);
	animation: nni-fade var(--nni-t-slow) var(--nni-ease-soft) both;
	animation-delay: 760ms;
}

.nni-gate__foot > span {
	text-indent: .14em;
}

.nni-gate__foot > span:last-child {
	color: var(--nni-muted);
}

@media (max-width: 47.999em) {
	.nni-gate__foot {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: .55rem;
	}
}

/* --------------------------------------------------------------------------
   9 — Die Tür
   -------------------------------------------------------------------------- */

.nni-passage {
	position: fixed;
	inset: 0;
	z-index: 10000;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	background: var(--nni-black);
}

/* Zwei Türflügel: aussen fast schwarz, zur Mitte hin belichtet. */
.nni-passage::before,
.nni-passage::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 50%;
	transform: translateX(0);
}

/* Die Innenkanten tragen das Licht — daran liest das Auge das Öffnen ab. */
.nni-passage::before {
	left: 0;
	background: linear-gradient( 90deg, var(--nni-black) 0%, var(--nni-ink) 58%, var(--nni-surface) 100% );
	box-shadow:
		inset -1px 0 0 0 color-mix(in srgb, var(--nni-cream) 20%, transparent),
		inset -22px 0 30px -22px color-mix(in srgb, var(--nni-cream) 12%, transparent);
}

.nni-passage::after {
	right: 0;
	background: linear-gradient( 270deg, var(--nni-black) 0%, var(--nni-ink) 58%, var(--nni-surface) 100% );
	box-shadow:
		inset 1px 0 0 0 color-mix(in srgb, var(--nni-cream) 20%, transparent),
		inset 22px 0 30px -22px color-mix(in srgb, var(--nni-cream) 12%, transparent);
}

/* Die Fuge: eine haarfeine senkrechte Lichtlinie. */
.nni-passage__seam {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 3;
	display: block;
	width: 1px;
	margin-left: -.5px;
	background: var(--nni-cream);
	opacity: 0;
	transform: scaleY(0);
	transform-origin: 50% 50%;
}

/* Der Schein um die Fuge: in der Mitte am hellsten, nach oben und unten aus. */
.nni-passage__seam::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 300px;
	margin-left: -150px;
	background: radial-gradient( 30% 42% at 50% 50%, var(--nni-cream) 0%, transparent 72% );
	opacity: 0;
	transform: scaleX(.25);
}

.nni-passage.is-open {
	visibility: visible;
	pointer-events: auto;
	animation: nni-veil calc(var(--nni-t-door) * .22) var(--nni-ease-soft) both;
}

.nni-passage.is-open::before {
	will-change: transform;
	animation: nni-door-left var(--nni-t-door) var(--nni-ease) both;
}

.nni-passage.is-open::after {
	will-change: transform;
	animation: nni-door-right var(--nni-t-door) var(--nni-ease) both;
}

.nni-passage.is-open .nni-passage__seam {
	animation: nni-seam var(--nni-t-door) var(--nni-ease) both;
}

.nni-passage.is-open .nni-passage__seam::after {
	animation: nni-seam-glow var(--nni-t-door) var(--nni-ease) both;
}

@keyframes nni-veil {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Erst wächst die Fuge, dann leuchtet sie kurz auf … */
@keyframes nni-seam {
	0%   { opacity: 0;   transform: scaleY(0); }
	16%  { opacity: .3;  }
	44%  { opacity: .65; transform: scaleY(1); }
	53%  { opacity: 1;   transform: scaleY(1); }
	76%  { opacity: .35; }
	100% { opacity: 0;   transform: scaleY(1); }
}

@keyframes nni-seam-glow {
	0%, 26% { opacity: 0;   transform: scaleX(.25); }
	53%     { opacity: .55; transform: scaleX(1); }
	100%    { opacity: 0;   transform: scaleX(2.4); }
}

/* … dann fahren die Flügel auseinander. */
@keyframes nni-door-left {
	0%, 53% { transform: translateX(0); }
	100%    { transform: translateX(-101%); }
}

@keyframes nni-door-right {
	0%, 53% { transform: translateX(0); }
	100%    { transform: translateX(101%); }
}

/* --------------------------------------------------------------------------
   10 — Grössere Schirme
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
	/* Untergrenze 12 px: die drei Grade lagen hier bei 10,9 / 9,9 / 9,6 px. */
	.nni-gate-body .nni-eyebrow { font-size: .78rem; }
	.nni-gate__hint { font-size: .78rem; }
	.nni-gate__foot { font-size: .78rem; }
	.nni-key__msg { min-height: 2.4em; }
}

@media (min-width: 64em) {
	.nni-act { gap: clamp(1.3rem, 2.8vh, 2.1rem); }
	.nni-key__input { max-width: 26rem; }
}

/* Sehr flache Fenster (Querformat am Telefon): Luft zurücknehmen. */
@media (max-height: 34em) and (min-width: 40em) {
	.nni-gate { gap: 1.4rem; }
	.nni-act { padding-block: .6rem; }
	.nni-gate-body .nni-display { font-size: clamp(1.9rem, 5vw, 3.2rem); }
}

/* --------------------------------------------------------------------------
   11 — Bewegungsarmut
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.nni-gate-body .nni-rise,
	.nni-gate-body .nni-seal,
	.nni-gate-body .nni-seal i,
	.nni-gate__bar,
	.nni-gate__foot,
	.nni-halo::before,
	.nni-halo::after,
	.nni-key.is-busy .nni-btn--solid {
		animation: none;
	}

	.nni-act--one,
	.nni-act--two,
	.nni-act--two > *,
	.nni-gate-body[data-nni-state="key"] .nni-act--one,
	.nni-gate-body[data-nni-state="key"] .nni-act--two,
	.nni-gate-body[data-nni-state="key"] .nni-act--two > * {
		transition: none;
		transform: none;
		transition-delay: 0s;
	}

	/* Fehler: nur Farbwechsel, kein Zittern. */
	.nni-key.is-error .nni-key__row {
		animation: none;
	}

	/* Tür: kein Öffnen, nur ein ruhiger Wechsel ins Schwarz. */
	.nni-passage.is-open,
	.nni-passage.is-open::before,
	.nni-passage.is-open::after,
	.nni-passage.is-open .nni-passage__seam,
	.nni-passage.is-open .nni-passage__seam::after {
		animation: none;
	}

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

	.nni-passage__seam {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   12 — Ohne JavaScript: beide Akte untereinander, Formular direkt erreichbar
   -------------------------------------------------------------------------- */

@media (scripting: none) {

	.nni-gate {
		grid-template-rows: auto auto auto auto;
	}

	.nni-gate__bar { grid-row: 1; }
	.nni-act--one  { grid-row: 2; }
	.nni-act--two  { grid-row: 3; }
	.nni-gate__foot { grid-row: 4; }

	.nni-act,
	.nni-act[hidden],
	.nni-gate-body[data-nni-state] .nni-act--one,
	.nni-gate-body[data-nni-state] .nni-act--two {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}

	.nni-act--two > *,
	.nni-gate-body[data-nni-state] .nni-act--two > * {
		opacity: 1 !important;
		transform: none !important;
	}

	.nni-gate-body [data-nni-advance],
	.nni-gate-body [data-nni-back] {
		display: none !important;
	}

	.nni-gate-body .nni-rise {
		animation: none;
	}
}