/* =========================================================================
   LA FAMILIA – zweiter Entwurf

   Liegt über main.css und tauscht vor allem die Farbwerte: kein Gold, kein
   warmes Licht. Schwarz, Weiß, ein einziges Rot. Härtere Kanten, weniger
   Schein, mehr Leere.
   ========================================================================= */

.stil-noir {
	--ink:        #000000;
	--ink-2:      #050505;
	--panel:      #0a0a0a;
	--panel-2:    #101010;
	--line:       #2a2a2a;
	--line-soft:  #191919;

	/* Was in der ersten Fassung Gold war, ist hier Weiß – nur die
	   Signalfarbe bleibt eine: Rot. */
	--gold:        #e8e8e8;
	--gold-bright: #ffffff;
	--gold-deep:   #8a8a8a;
	--blood:       #b3141f;
	--blood-soft:  #5c0a11;

	--cream:     #f2f2f2;
	--cream-dim: #9a9a9a;
	--muted:     #6a6a6a;

	--rot:        #c1121f;
	--rot-hell:   #e63946;
	--rot-tief:   #6b0910;
}

/* Kein warmer Lichtkegel, kein Verlauf – nur Schwarz und ein Hauch Rot. */
.stil-noir body,
body.stil-noir {
	background: #000;
	background-image:
		radial-gradient(120% 80% at 50% -20%, #140406 0%, transparent 55%),
		linear-gradient(180deg, #000 0%, #050505 60%, #000 100%);
}

/* Die farbigen Wolken der ersten Fassung entfallen – der Lichtkegel am
   Zeiger bleibt, in kaltem Weiß mit einem Hauch Rot. */
.stil-noir .m-cloud,
.stil-noir .m-hero__scene {
	display: none;
}

/* Das Skript liefert --mx/--my als blanke Zahl (0–100), deshalb hier mal 1%. */
.stil-noir .m-aurora__spot {
	background:
		radial-gradient(22vmax circle at calc(var(--mx, 50) * 1%) calc(var(--my, 45) * 1%),
			rgb(255 255 255 / .1), transparent 60%),
		radial-gradient(40vmax circle at calc(var(--mx, 50) * 1%) calc(var(--my, 45) * 1%),
			rgb(193 18 31 / .14), transparent 66%);
	mix-blend-mode: screen;
}

/* Ohne Zeiger ein ruhiger Schein aus der Mitte statt nichts. */
@media (hover: none) {
	.stil-noir .m-aurora__spot {
		background:
			radial-gradient(42vmax circle at 50% 34%,
				rgb(193 18 31 / .13), transparent 64%);
	}
}

/* Das Korn lag bei 0.72 und hob jede schwarze Fläche ins Graue – genau das
   Gegenteil von düster. Als Überlagerung bleibt die Tiefe erhalten, die
   Textur trotzdem spürbar. */
.stil-noir .m-grain {
	opacity: .3;
	mix-blend-mode: overlay;
}

.stil-noir .m-vignette {
	background: radial-gradient(120% 90% at 50% 45%, transparent 34%, rgb(0 0 0 / .92) 100%);
}

.stil-noir .m-progress span {
	background: linear-gradient(90deg, var(--rot-tief), var(--rot-hell));
}

/* =========================================================================
   AUFTAKT: EINSCHÜSSE
   ========================================================================= */

/* Solange der Auftakt läuft, bleibt der Inhalt darunter still. */
.n-wartet,
.n-wartet body {
	overflow: hidden;
}

.n-intro {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: #000;
	isolation: isolate;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: opacity 800ms ease, visibility 800ms;
}

.n-intro.is-weg {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.n-intro.is-ruck {
	animation: n-ruck 180ms cubic-bezier(.36, .07, .19, .97);
}

@keyframes n-ruck {
	0%   { transform: translate3d(0, 0, 0); }
	18%  { transform: translate3d(-7px, 4px, 0) rotate(-.22deg); }
	42%  { transform: translate3d(6px, -3px, 0) rotate(.18deg); }
	68%  { transform: translate3d(-3px, 2px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

.n-intro__schuesse {
	position: absolute;
	inset: 0;
	transition: opacity 900ms ease;
}

.n-intro.is-verblasst .n-intro__schuesse {
	opacity: 0;
}

/* Ein einzelnes Loch */

.n-loch {
	position: absolute;
	translate: -50% -50%;
	rotate: var(--dreh, 0deg);
	/* Der Einschlag ist hart: fast kein Anlauf, ein kurzes Überschießen. */
	animation: n-einschlag 220ms cubic-bezier(.16, 1.4, .3, 1) both;
}

@keyframes n-einschlag {
	0%   { opacity: 0; scale: .1; filter: blur(3px); }
	42%  { opacity: 1; scale: 1.22; filter: blur(0); }
	100% { opacity: 1; scale: 1; }
}

.n-loch svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Der Krater ist fast schwarz – das Glas ist dort weg. Erst der Saum und das
   Rissnetz drumherum fangen das Licht. */
.n-loch__kern {
	fill: #0c0c0c;
}

.n-loch__saum {
	fill: none;
	stroke: #fff;
	stroke-width: 1.3;
	stroke-linejoin: round;
}

.n-loch__netz polygon {
	fill: rgb(255 255 255 / .92);
}

/* Die Splitterflächen brechen das Licht nur schwach – sie geben dem Netz
   Fläche, ohne es zu einem weißen Fleck zu machen. */
.n-loch__facetten polygon {
	fill: rgb(255 255 255 / .055);
}

.n-loch__ringe path {
	fill: none;
	stroke: rgb(255 255 255 / .5);
	stroke-width: .55;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.n-loch__netz,
.n-loch__facetten,
.n-loch__ringe,
.n-loch__saum,
.n-loch__kern {
	transform-origin: 50px 50px;
}

/* Das Netz springt einen Lidschlag nach dem Einschlag auf. */
.n-loch__netz polygon,
.n-loch__facetten polygon {
	animation: n-splitter 200ms cubic-bezier(.2, 1.25, .3, 1) 30ms both;
}

@keyframes n-splitter {
	from { scale: .3; opacity: 0; }
	to   { scale: 1; opacity: 1; }
}

.n-loch__ringe path {
	animation: n-ring 300ms ease-out 110ms both;
}

@keyframes n-ring {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Die Einschläge bleiben als schwache Narben im Kopfbereich zurück. */
.n-hero__narben {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: clip;
	z-index: 0;
}

.n-loch--narbe {
	/* Nur noch eine Ahnung – sonst liest sich der Einschlag als Schmutzfleck
	   hinter dem Schriftzug. */
	opacity: .028;
	animation: none;
	scale: .7;
}

.n-loch--narbe .n-loch__netz polygon,
.n-loch--narbe .n-loch__facetten polygon,
.n-loch--narbe .n-loch__ringe path {
	animation: none;
	scale: 1;
	opacity: 1;
}


/* --- Stufe 1: die Sprache ---------------------------------------------- */

.n-sprache {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: clamp(1.8rem, 5vh, 3.2rem);
	padding-inline: 1.2rem;
	animation: n-sprache-an 620ms cubic-bezier(.16, 1.1, .3, 1) 180ms both;
}

.n-sprache.is-weg {
	animation: n-sprache-weg 400ms ease forwards;
}

@keyframes n-sprache-an {
	from { opacity: 0; transform: translateY(.8rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes n-sprache-weg {
	to { opacity: 0; transform: scale(.97); }
}

/* Die Frage steht in allen drei Sprachen – auf dieser Stufe weiß die Seite
   ja noch nicht, welche gemeint ist. */
.n-sprache__frage {
	margin: 0;
	display: grid;
	gap: .35rem;
	text-align: center;
	font-size: .68rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--muted);
}

.n-sprache__frage span:first-child {
	color: var(--cream-dim);
}

.n-sprache__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(.8rem, 3vw, 2rem);
}

/* Auf dem Handy passen nicht alle Sprachen nebeneinander. Ein 2×2-Raster
   ist ruhiger als drei oben und eine allein darunter. */
@media (max-width: 30rem) {
	.n-sprache__liste {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 22rem;
		margin-inline: auto;
	}

	.n-sprache__wahl {
		padding-inline: .8rem;
	}
}

.n-sprache__wahl {
	display: grid;
	justify-items: center;
	gap: .4rem;
	padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.4rem, 4vw, 2.8rem);
	border: 1px solid var(--line);
	border-radius: 3px;
	text-decoration: none;
	color: var(--cream);
	transition:
		border-color 220ms var(--mo-ease),
		background 220ms var(--mo-ease),
		color 220ms var(--mo-ease);
}

.n-sprache__kuerzel {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
}

.n-sprache__name {
	font-size: .64rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color 220ms var(--mo-ease);
}

@media (hover: hover) {
	.n-sprache__wahl:hover {
		border-color: var(--rot);
		background: rgb(193 18 31 / .12);
		color: #fff;
	}

	.n-sprache__wahl:hover .n-sprache__name {
		color: var(--rot-hell);
	}
}

.n-sprache__wahl:focus-visible {
	outline: 2px solid var(--rot-hell);
	outline-offset: 3px;
}

/* Die zuletzt genutzte Fassung ist vorgemerkt. */
.n-sprache__wahl.is-current {
	border-color: rgb(255 255 255 / .34);
}

/* Solange die Sprache zur Wahl steht, ruhen Salve und Spruch. */
.n-intro.is-sprache .n-intro__schuesse,
.n-intro.is-sprache .n-intro__spruch {
	display: none;
}

/* --- Das Angebot, Wort für Wort ----------------------------------------

   Kein Laufband: Der Satz stellt sich hin. Jedes Wort tritt einzeln auf, die
   letzten beiden in Rot – dort sitzt die Pointe.
   ------------------------------------------------------------------------- */

.n-intro__spruch {
	position: relative;
	z-index: 1;
	margin: 0;
	padding-inline: clamp(1.2rem, 6vw, 5rem);
	max-width: 60rem;
	text-align: center;
	text-wrap: balance;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1rem + 3.4vw, 4.2rem);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: .01em;
	color: #fff;
	opacity: 0;
	pointer-events: none;
}

.n-intro.is-band .n-intro__spruch {
	opacity: 1;
}

.n-wort {
	display: inline-block;
	margin-inline-end: .28em;
	opacity: 0;
}

/* Jedes Wort kommt hart herein und rastet ein – im selben Takt wie die
   Einschläge davor. */
.n-intro.is-band .n-wort {
	animation: n-wort-an 420ms cubic-bezier(.16, 1.2, .3, 1) both;
	animation-delay: calc(var(--i, 0) * 105ms);
}

@keyframes n-wort-an {
	from {
		opacity: 0;
		transform: translateY(.36em) scale(.92);
		filter: blur(7px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

/* Ohne Skript steht der Satz einfach da. */
.n-intro[hidden] {
	display: none;
}

.n-intro__skip {
	position: absolute;
	inset-block-end: clamp(1.2rem, 4vh, 2.4rem);
	inset-inline: 0;
	margin-inline: auto;
	width: max-content;
	padding: .7rem 1.4rem;
	background: transparent;
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: 999px;
	color: rgb(255 255 255 / .55);
	font-family: var(--font-body);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 200ms, border-color 200ms;
}

@media (hover: hover) {
	.n-intro__skip:hover {
		color: #fff;
		border-color: rgb(255 255 255 / .6);
	}
}



/* --- Der Ton-Schalter ---------------------------------------------------
   Sitzt fest am Bildrand, unaufdringlich, aber jederzeit erreichbar – wer
   Ton nicht will, soll nicht suchen müssen.
   ------------------------------------------------------------------------- */

.n-ton {
	position: fixed;
	z-index: 210;
	inset-block-end: clamp(1rem, 3vh, 1.8rem);
	inset-inline-end: clamp(1rem, 3vw, 1.8rem);
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem .95rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgb(8 8 8 / .72);
	backdrop-filter: blur(6px);
	color: var(--cream-dim);
	cursor: pointer;
	transition: color 220ms var(--mo-ease), border-color 220ms var(--mo-ease);
}

.n-ton__text {
	font-size: .6rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	/* Auf schmalen Schirmen genügt das Zeichen. */
	display: none;
}

.n-ton__bild {
	display: block;
	line-height: 0;
}

/* Der Strich durchs Zeichen erscheint nur im stummen Zustand. */
.n-ton__strich {
	opacity: 0;
	transition: opacity 200ms var(--mo-ease);
}

.ton-aus .n-ton__wellen {
	opacity: 0;
}

.ton-aus .n-ton__strich {
	opacity: 1;
}

.n-ton__wellen {
	transition: opacity 200ms var(--mo-ease);
}

@media (hover: hover) {
	.n-ton:hover {
		color: #fff;
		border-color: var(--rot);
	}
}

/* Ton ist gewünscht, aber der Browser gibt ihn erst nach einer Handlung frei –
   ein ruhiges Pulsieren zeigt, dass hier etwas wartet. */
.ton-wartet .n-ton {
	color: #fff;
	border-color: var(--rot);
	animation: n-ton-puls 2.2s ease-in-out infinite;
}

@keyframes n-ton-puls {
	0%, 100% { box-shadow: 0 0 0 0 rgb(193 18 31 / .5); }
	50%      { box-shadow: 0 0 0 8px rgb(193 18 31 / 0); }
}

.n-ton:focus-visible {
	outline: 2px solid var(--rot-hell);
	outline-offset: 3px;
}

@media (min-width: 48rem) {
	.n-ton__text {
		display: inline;
	}
}

/* =========================================================================
   DIE TASCHENLAMPE

   Der Kopfbereich liegt im Dunkeln: Eine fast deckende schwarze Ebene liegt
   über dem Inhalt und bekommt am Zeiger ein weiches Loch. Dadurch leuchtet
   man die Seite ab, statt sie nur zu betrachten – und der Text ist genau
   dort klar, wo man hinsieht.

   Umgesetzt als Maske auf der Dunkelheit, nicht als aufhellender Verlauf:
   Aufhellen würde Grund und Schrift gleichermaßen heben und nichts
   lesbarer machen.
   ========================================================================= */

.n-dunkel {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: #000;
	/* Ohne Zeiger bleibt der Kopf ungedimmt – niemand soll vor einer
	   schwarzen Fläche sitzen, weil ein Effekt nicht greift. */
	opacity: 0;
	transition: opacity .6s ease;
}

body.hat-zeiger .n-dunkel {
	opacity: .84;

	/* Weit genug, dass eine ganze Textzeile im Licht steht – ein enger Kegel
	   sieht zwar dramatisch aus, macht aber nichts lesbar. */
	--loch: 34vmax;
	-webkit-mask-image: radial-gradient(
		circle var(--loch) at calc(var(--lx, 50) * 1%) calc(var(--ly, 45) * 1%),
		transparent 0%, transparent 42%, rgb(0 0 0 / .72) 72%, #000 100%);
	mask-image: radial-gradient(
		circle var(--loch) at calc(var(--lx, 50) * 1%) calc(var(--ly, 45) * 1%),
		transparent 0%, transparent 42%, rgb(0 0 0 / .72) 72%, #000 100%);
}

/* Der Inhalt liegt über der Dunkelheit nur dort, wo er leuchten soll. */
.n-hero .m-hero__inner {
	position: relative;
	z-index: 1;
}

/* Ein warmer Rand am Lichtkegel, damit es nach Lampe aussieht und nicht
   nach ausgeschnittenem Loch. */
.n-hero__schein {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease;
	background: radial-gradient(
		circle 34vmax at calc(var(--lx, 50) * 1%) calc(var(--ly, 45) * 1%),
		rgb(255 240 235 / .055) 0%, transparent 52%);
	mix-blend-mode: screen;
}

body.hat-zeiger .n-hero__schein {
	opacity: 1;
}

/* --- Ohne Zeigergerät --------------------------------------------------
   Auf dem Handy gibt es keinen Cursor. Dort wandert das Licht selbst: Es
   sitzt in der oberen Bildschirmhälfte und atmet, sodass der Kopfbereich
   lesbar bleibt und die Fläche trotzdem lebt. Berührt jemand den Schirm,
   folgt es dem Finger. */
@media (hover: none) {
	.n-dunkel {
		opacity: .78;

		--loch: 48vmax;
		-webkit-mask-image: radial-gradient(
			circle var(--loch) at calc(var(--lx, 50) * 1%) calc(var(--ly, 38) * 1%),
			transparent 0%, transparent 46%, rgb(0 0 0 / .7) 74%, #000 100%);
		mask-image: radial-gradient(
			circle var(--loch) at calc(var(--lx, 50) * 1%) calc(var(--ly, 38) * 1%),
			transparent 0%, transparent 46%, rgb(0 0 0 / .7) 74%, #000 100%);
		animation: n-atmen 7s ease-in-out infinite;
	}

	.n-hero__schein {
		opacity: 1;
		background: radial-gradient(
			circle 48vmax at calc(var(--lx, 50) * 1%) calc(var(--ly, 38) * 1%),
			rgb(255 240 235 / .045) 0%, transparent 56%);
	}
}

@keyframes n-atmen {
	0%, 100% { --loch: 46vmax; }
	50%      { --loch: 54vmax; }
}

/* Die Lochgröße lässt sich nur weich ändern, wenn sie als Länge angemeldet
   ist – sonst springt sie zum Endwert. */
@property --loch {
	syntax: '<length>';
	inherits: false;
	initial-value: 20vmax;
}

@media (prefers-reduced-motion: reduce) {
	.n-dunkel {
		opacity: 0 !important;
		animation: none !important;
	}

	.n-hero__schein {
		opacity: 0 !important;
	}
}

/* =========================================================================
   KOPF
   ========================================================================= */

.n-hero {
	position: relative;
}

.n-hero__logo {
	display: inline-block;
	line-height: 0;
	/* Der Kicker steht mittig zwischen Logo und Titel: gleicher Abstand
	   nach oben wie nach unten. */
	margin-bottom: var(--n-luft);
}

.stil-noir {
	--n-luft: clamp(1.1rem, 3.2vh, 2.1rem);
}

.stil-noir .m-hero__kicker {
	margin-block: 0 var(--n-luft);
}

.n-hero__title {
	margin-top: 0;
}

.n-hero__logo img {
	width: clamp(94px, 12vw, 140px);
	height: auto;
	opacity: .86;
}

.n-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(3rem, 14vw, 11rem);
	line-height: .86;
	letter-spacing: .02em;
	text-transform: uppercase;
	display: grid;
	justify-items: center;
}

.n-hero__zeile {
	display: block;
	color: #fff;
	animation: n-titel 700ms cubic-bezier(.16, 1.1, .3, 1) both;
}

.n-hero__zeile--rot {
	color: var(--rot-hell);
	animation-delay: 140ms;
}

.n-hero__title {
	margin-bottom: clamp(1.2rem, 3.4vh, 2.2rem);
}

@keyframes n-titel {
	from { opacity: 0; transform: translateY(.2em); }
	to   { opacity: 1; transform: none; }
}

.stil-noir .m-hero__sub {
	color: var(--cream-dim);
	letter-spacing: .28em;
	font-size: clamp(.76rem, .6rem + .6vw, 1.05rem);
}

.stil-noir .m-hero__kicker {
	color: var(--rot-hell);
}

/* Die Zahlen tragen in der ersten Fassung einen fest verdrahteten Goldverlauf
   mit background-clip – eine Farbvariable erreicht sie dort nicht. Hier wird
   der Verlauf deshalb ganz abgeschaltet. */
.stil-noir .m-countdown__unit b,
.stil-noir .m-act__num,
.stil-noir .m-rule__num {
	background-image: none;
	background: none;
	animation: none;
	-webkit-text-fill-color: currentColor;
	color: #fff;
}

.stil-noir .m-act__num,
.stil-noir .m-rule__num {
	color: var(--rot-hell);
}

/* Dasselbe gilt für den Schriftzug im Kopf der ersten Fassung. */
.stil-noir .m-gold {
	background-image: none;
	background: none;
	animation: none;
	-webkit-text-fill-color: currentColor;
	color: #fff;
}

/* =========================================================================
   DIE ÜBRIGEN ABSCHNITTE
   ========================================================================= */

/* Der Brief: kaltes Papier statt vergilbtem. */
.stil-noir .m-letter {
	background:
		radial-gradient(60% 45% at 18% 12%, rgb(0 0 0 / .05), transparent 70%),
		linear-gradient(172deg, #ececec 0%, #dcdcdc 60%, #cfcfcf 100%);
	color: #17171a;
	box-shadow: 0 30px 70px -30px rgb(0 0 0 / 1);
}

.stil-noir .m-letter::after {
	background: linear-gradient(172deg, #cfcfcf, #bcbcbc);
}

.stil-noir .m-letter__stamp {
	border-color: rgb(193 18 31 / .5);
	color: rgb(193 18 31 / .62);
}

.stil-noir .m-letter em {
	border-bottom-color: rgb(193 18 31 / .6);
}

.stil-noir .m-letter__sign-name {
	color: #101013;
}

/* Regeln, Akte, Formular: harte Kanten, kein Schein. */
.stil-noir .m-rule,
.stil-noir .m-act,
.stil-noir .m-fieldset,
.stil-noir .m-vault,
.stil-noir .m-done {
	background: linear-gradient(180deg, #0b0b0b 0%, #050505 100%);
}

.stil-noir .m-act.is-solved {
	border-color: rgb(193 18 31 / .45);
}

.stil-noir .m-act__done {
	color: var(--rot-hell);
	border-color: rgb(193 18 31 / .5);
}

.stil-noir .m-seal.is-done .m-seal__wax {
	background: var(--rot);
	border-color: var(--rot-hell);
	box-shadow: 0 0 22px -6px var(--rot);
	color: #fff;
}

.stil-noir .m-section-head::after {
	background: linear-gradient(90deg, var(--rot), rgb(193 18 31 / .05));
}

/* Knöpfe: weiß auf schwarz, die Signalfarbe nur beim Zugriff. */
.stil-noir .m-btn {
	border-color: rgb(255 255 255 / .3);
	background: transparent;
	color: #fff;
}

.stil-noir .m-btn--gold {
	background: #fff;
	border-color: #fff;
	color: #000;
	font-weight: 600;
}

@media (hover: hover) {
	.stil-noir .m-btn:hover {
		border-color: var(--rot-hell);
		color: var(--rot-hell);
		background: transparent;
	}

	.stil-noir .m-btn--gold:hover {
		background: var(--rot);
		border-color: var(--rot);
		color: #fff;
	}
}

.stil-noir .m-chip input:checked + span {
	border-color: var(--rot);
	background: rgb(193 18 31 / .16);
	color: #fff;
}

.stil-noir .m-check input:checked {
	background-color: var(--rot);
	border-color: var(--rot);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.stil-noir input:focus,
.stil-noir textarea:focus {
	border-color: var(--rot);
	box-shadow: 0 0 0 3px rgb(193 18 31 / .18);
}

/* Spiele */

/* Der Tisch war so dunkel, dass die Hüte auf dem Handy mit dem Hintergrund
   verschmolzen. Er bleibt düster, gibt den Silhouetten aber wieder Grund. */
.stil-noir .m-shells__table {
	background:
		radial-gradient(120% 96% at 50% 34%, rgb(96 12 20 / .5), transparent 88%),
		linear-gradient(180deg, #1a1012 0%, #0b0708 100%);
	box-shadow: 0 0 0 1px rgb(255 255 255 / .07) inset;
}

/* Der Tresor: Im Original ist er aus warmem Messing und Nussbaum. Diese
   Farbwerte stehen fest im Stylesheet und werden von den Farbvariablen nicht
   erreicht – hier also ausdrücklich auf Stahl umgestellt. */
.stil-noir .m-safe__door {
	background: radial-gradient(120% 90% at 50% 0%, #1c1c1c, #0a0a0a 70%);
}

.stil-noir .m-dial__face {
	background: radial-gradient(circle at 38% 30%, #3a3a3a, #1b1b1b 60%, #0d0d0d 100%);
}

.stil-noir .m-note {
	/* Papier ohne Vergilbung – passend zum kalten Brief. */
	background: linear-gradient(168deg, #e8e8e8, #d2d2d2);
	color: #1a1a1a;
}

.stil-noir .m-note__title {
	color: var(--rot);
}

/* Eigene Verläufe statt flacher Füllung: Volumen und genug Helligkeit, damit
   die Hüte auch auf einem Handy im Hellen erkennbar bleiben. Alle drei
   bekommen dieselben Werte – eine Abweichung würde den Ring verraten. */
.stil-noir .m-cup__crown { fill: url(#m-filz-noir); stroke: rgb(255 255 255 / .26); }
.stil-noir .m-cup__brim  { fill: url(#m-krempe-noir); stroke: rgb(255 255 255 / .3); }
.stil-noir .m-cup__brimtop { fill: rgb(255 255 255 / .07); }
.stil-noir .m-cup__band  { fill: #0d0d0d; stroke: rgb(193 18 31 / .75); }

.stil-noir .m-cup.is-found .m-cup__crown { stroke: var(--rot-hell); }
.stil-noir .m-rounds li.is-won { background: var(--rot); border-color: var(--rot); color: #fff; }

.stil-noir .m-dial__ring {
	background: repeating-conic-gradient(from 0deg,
		rgb(255 255 255 / .34) 0deg .9deg, transparent .9deg 9deg);
}

.stil-noir .m-dial__marker {
	border-top-color: var(--rot-hell);
	filter: none;
}

.stil-noir .m-cipher__inner text { fill: var(--rot-hell); }
.stil-noir .m-cipher__hub { fill: var(--rot); }
.stil-noir .m-cipher__pointer { border-top-color: #fff; filter: none; }
.stil-noir .m-cipher__plain.is-clear { color: #fff; border-left-color: var(--rot); }
.stil-noir .m-cipher__legend-inner { color: var(--rot-hell); }

/* Bestätigung */

.stil-noir .m-crest img {
	filter: none;
}

.stil-noir .m-done {
	border-color: rgb(193 18 31 / .35);
}

.stil-noir .m-done__quote {
	color: #fff;
	font-style: normal;
}

.stil-noir .m-done__kicker,
.stil-noir .m-kicker {
	color: var(--rot-hell);
}

.stil-noir .m-done__reload b {
	color: var(--rot-hell);
}

/* Sprachwahl und Fuß */

.stil-noir .m-langs__item.is-current {
	background: #fff;
	color: #000;
}

.stil-noir .m-footer__logo {
	opacity: .2;
}

@media (prefers-reduced-motion: reduce) {
	.n-intro__spruch,
	.n-intro,
	.n-loch,
	.n-loch__netz polygon,
	.n-loch__facetten polygon,
	.n-loch__ringe path,
	.n-wort,
	.n-hero__zeile,
		animation: none !important;
		transform: none !important;
		opacity: 1;
	}
}

/* Die Meldung zur abgelaufenen Frist: In La Familia trägt sie Rot statt Gold. */
.stil-noir .m-hero__schluss {
	border-color: rgb(193 18 31 / .45);
	background: rgb(10 4 5 / .55);
}

.stil-noir .m-hero__schluss-titel {
	color: var(--rot-hell);
}

.stil-noir .m-closed--gross {
	border-color: rgb(193 18 31 / .35);
}

.stil-noir .m-closed__frist {
	color: var(--rot-hell);
}

/* Das Plakat in La Familia: roter Rahmen, weiße Winkel, rote Ziffern –
   genau wie der gedruckte Aushang „Die Regeln des Hauses“. */
.stil-noir .m-plakat {
	border-color: var(--rot);
	background:
		radial-gradient(70% 50% at 50% 0%, rgb(120 16 24 / .28), transparent 72%),
		rgb(6 4 5 / .55);
}

.stil-noir .m-plakat::after {
	border-color: rgb(244 241 236 / .3);
}

.stil-noir .m-plakat__ecke {
	border-color: var(--weiss, #f4f1ec);
}

.stil-noir .m-plakat__ecke > span {
	border-color: var(--rot);
}

.stil-noir .m-plakat__kopf .m-kicker,
.stil-noir .m-hausregel__num,
.stil-noir .m-hausregeln__schluss {
	color: var(--rot-hell);
}

.stil-noir .m-plakat__zier i {
	background: linear-gradient(90deg, transparent, var(--rot) 40%, var(--rot));
}

.stil-noir .m-plakat__zier i:last-child {
	background: linear-gradient(270deg, transparent, var(--rot) 40%, var(--rot));
}

.stil-noir .m-plakat__zier b { background: var(--rot); }

.stil-noir .m-hausregel {
	border-bottom-color: rgb(244 241 236 / .14);
}

/* Die Kapelle in La Familia: Rot statt Gold. */
.stil-noir .m-player__start {
	border-color: var(--rot);
}

.stil-noir .m-player__start:hover,
.stil-noir .m-player__start:focus-visible {
	background: rgb(193 18 31 / .18);
}

.stil-noir .m-player__icon {
	background: var(--rot);
	color: #f4f1ec;
}

.stil-noir .m-wunsch__treffer-eintrag:hover,
.stil-noir .m-wunsch__treffer-eintrag:focus-visible {
	background: rgb(193 18 31 / .16);
}

.stil-noir .m-wunsch__gewaehlt {
	border-color: rgb(193 18 31 / .5);
	background: rgb(193 18 31 / .08);
}

.stil-noir .m-wunsch__meldung.is-doppelt {
	border-left-color: var(--rot);
	background: rgb(193 18 31 / .1);
}