/* =========================================================================
   ELLDUS MAFIA – Mitarbeiterparty 08.11.2026
   Aufbau: Tokens · Grundlagen · Bewegung · Bausteine · Sektionen
   ========================================================================= */

/* --- Schriften ---------------------------------------------------------- */

@font-face {
	font-family: 'Cinzel';
	src: url('../fonts/Cinzel-latin.woff2') format('woff2');
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Cinzel';
	src: url('../fonts/Cinzel-latin-ext.woff2') format('woff2');
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Jost';
	src: url('../fonts/Jost-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	src: url('../fonts/Jost-latin-ext.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Special Elite';
	src: url('../fonts/SpecialElite-latin.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Special Elite';
	src: url('../fonts/SpecialElite-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
	color-scheme: dark;

	--ink:        #0b0a09;
	--panel-glas: rgb(18 15 12 / .82);
	--ink-2:      #100e0b;
	--panel:      #16130f;
	--panel-2:    #1c1813;
	--line:       #322a20;
	--line-soft:  #241e17;

	--gold:        #c9a227;
	--gold-bright: #f2dc9c;
	--gold-deep:   #8a6d16;
	--blood:       #7b1420;
	--blood-soft:  #4a0e16;

	--cream:     #efe6d2;
	--cream-dim: #b6ab95;
	--muted:     #857a6a;
	--elldus:    #4c6172;

	--font-display: 'Cinzel', 'Times New Roman', serif;
	--font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
	--font-type:    'Special Elite', 'Courier New', monospace;

	/* Bewegung */
	--mo-fast:    220ms;
	--mo-base:    560ms;
	--mo-slow:    980ms;
	--mo-ease:    cubic-bezier(.22, 1, .36, 1);
	--mo-ease-in: cubic-bezier(.7, 0, .84, 0);
	--mo-rise:    1.4rem;
	--mo-stagger: 70ms;

	--shell: 74rem;
	--pad:   clamp(1.15rem, 4vw, 2.5rem);
}

/* --- Grundlagen --------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--font-body);
	font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
	line-height: 1.68;
	font-weight: 300;
	letter-spacing: .012em;
	overflow-x: hidden;
	/* Warmes Licht von oben, Dunkelheit an den Rändern. */
	background-image:
		radial-gradient(120% 70% at 50% -10%, #221b12 0%, transparent 58%),
		linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 55%, #080706 100%);
	background-attachment: fixed;
}

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

a {
	color: var(--gold);
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--gold-bright);
}

:focus-visible {
	outline: 2px solid var(--gold-bright);
	outline-offset: 3px;
	border-radius: 2px;
}

.m-shell {
	width: min(100% - 2 * var(--pad), var(--shell));
	margin-inline: auto;
}

.m-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--gold);
	color: var(--ink);
	padding: .8rem 1.4rem;
	font-weight: 500;
}

.m-skip:focus {
	left: .5rem;
	top: .5rem;
}

/* --- Atmosphäre: Korn, Vignette, Fortschritt ---------------------------- */

.m-grain,
.m-vignette {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.m-grain {
	opacity: .5;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
	animation: m-grain-shift 900ms steps(3) infinite;
}

@keyframes m-grain-shift {
	0%   { transform: translate3d(0, 0, 0); }
	33%  { transform: translate3d(-2%, 1%, 0); }
	66%  { transform: translate3d(1%, -2%, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

.m-vignette {
	background: radial-gradient(130% 95% at 50% 42%, transparent 46%, rgb(0 0 0 / .58) 100%);
}

.m-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	z-index: 40;
	background: rgb(255 255 255 / .05);
}

.m-progress span {
	display: block;
	height: 100%;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
	animation: m-fill both linear;
	animation-timeline: scroll(root block);
}

@keyframes m-fill {
	to { transform: scaleX(1); }
}


/* =========================================================================
   ATMOSPHÄRE – driftende Farbwolken und der Lichtkegel am Zeiger

   Die Wolken sind reine Verläufe ohne Blur-Filter: ein radial-gradient mit
   weichem Ausklang ist von Haus aus weich und kostet einen Bruchteil dessen,
   was `filter: blur()` auf dieser Fläche verlangen würde.

   Drei Bewegungen liegen übereinander, ohne sich zu stören:
     transform  – die Eigendrift (Keyframes, läuft immer)
     translate  – der Zug zum Mauszeiger (JS setzt nur zwei Zahlen)
     opacity    – die Stimmungswanderung über die Scrollstrecke
   ========================================================================= */

.m-aurora {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: clip;
	/* Ohne Zeiger stehen die Wolken in der Mitte. */
	--mx: 50;
	--my: 45;
}

.m-cloud {
	position: absolute;
	display: block;
	border-radius: 50%;
	/* Zug zum Zeiger – die Amplitude steckt in --pull. */
	translate:
		calc((var(--mx) - 50) * var(--pull, 1) * .34px)
		calc((var(--my) - 50) * var(--pull, 1) * .28px);
	transition: translate 1.1s cubic-bezier(.16, 1, .3, 1);
	will-change: transform;
}

.m-cloud--blut {
	width: 78vmax;
	height: 62vmax;
	top: -22vmax;
	left: -18vmax;
	background: radial-gradient(closest-side, rgb(139 26 38 / .30), rgb(139 26 38 / .10) 46%, transparent 72%);
	animation: m-cloud-a 34s ease-in-out infinite alternate;
}

.m-cloud--gold {
	width: 66vmax;
	height: 54vmax;
	top: 12vmax;
	right: -22vmax;
	background: radial-gradient(closest-side, rgb(201 162 39 / .24), rgb(201 162 39 / .08) 48%, transparent 74%);
	animation: m-cloud-b 41s ease-in-out infinite alternate;
}

.m-cloud--petrol {
	width: 72vmax;
	height: 58vmax;
	bottom: -26vmax;
	left: -14vmax;
	background: radial-gradient(closest-side, rgb(58 92 112 / .26), rgb(58 92 112 / .09) 46%, transparent 72%);
	animation: m-cloud-c 47s ease-in-out infinite alternate;
}

.m-cloud--kupfer {
	width: 58vmax;
	height: 50vmax;
	bottom: -18vmax;
	right: -16vmax;
	background: radial-gradient(closest-side, rgb(140 78 26 / .24), rgb(140 78 26 / .08) 48%, transparent 74%);
	animation: m-cloud-d 38s ease-in-out infinite alternate;
}

/* Diese Wolke wandert mit der Scrollstrecke ein – unten wird es wärmer. */
.m-cloud--tief {
	width: 90vmax;
	height: 60vmax;
	bottom: -30vmax;
	left: 50%;
	margin-left: -45vmax;
	background: radial-gradient(closest-side, rgb(176 122 32 / .22), rgb(120 30 40 / .09) 50%, transparent 76%);
	opacity: 0;
	animation: m-cloud-tief both linear;
	animation-timeline: scroll(root block);
}

@keyframes m-cloud-tief {
	0%   { opacity: 0; }
	55%  { opacity: .55; }
	100% { opacity: 1; }
}

@keyframes m-cloud-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(9vmax, 7vmax, 0) scale(1.16); }
}

@keyframes m-cloud-b {
	from { transform: translate3d(0, 4vmax, 0) scale(1.1); }
	to   { transform: translate3d(-11vmax, -6vmax, 0) scale(.94); }
}

@keyframes m-cloud-c {
	from { transform: translate3d(0, 0, 0) scale(1.05); }
	to   { transform: translate3d(12vmax, -8vmax, 0) scale(.92); }
}

@keyframes m-cloud-d {
	from { transform: translate3d(0, 0, 0) scale(.95); }
	to   { transform: translate3d(-8vmax, -9vmax, 0) scale(1.18); }
}

/* Der Lichtkegel, der dem Zeiger folgt. */
.m-aurora__spot {
	position: absolute;
	inset: 0;
	opacity: 0;
	background:
		radial-gradient(34vmax circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),
			rgb(242 220 156 / .13), rgb(201 162 39 / .05) 38%, transparent 66%);
	transition: opacity .5s var(--mo-ease);
}

body.hat-zeiger .m-aurora__spot {
	opacity: 1;
}

/* Ohne Zeigergerät atmet die Fläche stattdessen von selbst. */
@media (hover: none) {
	.m-aurora__spot {
		opacity: 1;
		background:
			radial-gradient(40vmax circle at 50% 38%,
				rgb(242 220 156 / .09), transparent 62%);
		animation: m-atem 11s ease-in-out infinite alternate;
	}

	.m-cloud {
		translate: none;
	}
}

@keyframes m-atem {
	from { opacity: .45; transform: scale(1); }
	to   { opacity: 1;   transform: scale(1.14); }
}

/* Der Inhalt liegt über der Atmosphäre. */
.m-main,
.m-footer {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   Flächen, die auf den Zeiger reagieren
   ------------------------------------------------------------------------- */

.m-spot {
	position: relative;
	isolation: isolate;
}

.m-spot::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(18rem circle at var(--cx, 50%) var(--cy, 50%),
		rgb(201 162 39 / .12), transparent 68%);
	transition: opacity .45s var(--mo-ease);
	pointer-events: none;
}

.m-spot.is-hover::before {
	opacity: 1;
}

/* Ein mitwandernder Lichtsaum auf der Kante – das, was eine Karte teuer
   aussehen lässt. */
.m-spot::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	padding: 1px;
	background: radial-gradient(14rem circle at var(--cx, 50%) var(--cy, 50%),
		rgb(242 220 156 / .55), transparent 62%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	transition: opacity .45s var(--mo-ease);
	pointer-events: none;
}

.m-spot.is-hover::after {
	opacity: 1;
}

@media (hover: none) {
	.m-spot::before,
	.m-spot::after {
		display: none;
	}
}

/* --- Typografie --------------------------------------------------------- */

.m-kicker {
	font-family: var(--font-body);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .38em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1rem;
}

.m-h2 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 1.3rem + 3.1vw, 3.6rem);
	line-height: 1.06;
	letter-spacing: .03em;
	margin: 0 0 1rem;
	color: var(--cream);
	text-wrap: balance;
}

.m-lead {
	max-width: 46ch;
	color: var(--cream-dim);
	font-size: 1.06em;
	margin: 0;
	text-wrap: pretty;
}

.m-section-head {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	position: relative;
}

.m-section-head::before {
	content: '';
	position: absolute;
	inset: -30% -1rem -20%;
	z-index: -1;
	background: radial-gradient(52% 62% at 26% 50%, rgb(8 7 6 / .58), transparent 74%);
	pointer-events: none;
}

.m-dot {
	color: var(--gold-deep);
	margin-inline: .55rem;
}

/* --- Bewegung: Leitmotiv „aus dem Dunkel aufsteigen" -------------------- */

@keyframes m-rise {
	from { opacity: 0; transform: translateY(var(--mo-rise)); }
	to   { opacity: 1; transform: none; }
}

.m-reveal {
	animation: m-rise both;
	animation-timeline: view();
	animation-range: entry calc(4% + var(--i, 0) * 3%) cover calc(30% + var(--i, 0) * 3%);
	animation-timing-function: var(--mo-ease);
}

@supports not (animation-timeline: view()) {
	.m-reveal {
		opacity: 0;
		transform: translateY(var(--mo-rise));
		transition:
			opacity var(--mo-base) var(--mo-ease),
			transform var(--mo-base) var(--mo-ease);
		transition-delay: calc(var(--i, 0) * var(--mo-stagger));
		animation: none;
	}

	.m-reveal.in {
		opacity: 1;
		transform: none;
	}
}

/* Fokus schlägt Animation: was den Fokus hat, ist sichtbar. */
.m-reveal:focus-within {
	opacity: 1 !important;
	transform: none !important;
}

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

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

	.m-reveal,
	.m-hero__title-inner,
	.m-smoke,
	.m-hero__mountain,
	.m-hero__beam,
	.m-grain,
	.m-cloud,
	.m-aurora__spot {
		animation: none !important;
		opacity: 1;
		transform: none !important;
	}

	/* Die Farbe darf bleiben, die Bewegung nicht. */
	.m-cloud {
		translate: none !important;
		transition: none !important;
	}

	.m-cloud--tief {
		opacity: .6;
	}

	.m-grain { opacity: .35; }
	.m-progress span { transform: scaleX(0); }
}


/* -------------------------------------------------------------------------
   Gold, das lebt

   Über die Buchstaben wandert ein Lichtband, wie über poliertes Metall.
   Der Schein dahinter ist eine zweite Textebene – ein text-shadow greift
   bei transparent gefülltem Text nicht.
   ------------------------------------------------------------------------- */

.m-gold {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(
		100deg,
		#7a5f14 0%,
		#c9a227 11%,
		#f7e7b4 24%,
		#fffbe8 31%,
		#f2dc9c 38%,
		#c9a227 52%,
		#8a6d16 66%,
		#e8cd85 82%,
		#c9a227 92%,
		#7a5f14 100%
	);
	background-size: 260% 100%;
	background-position: 130% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: m-gold-fluss 9s linear infinite;
}

@keyframes m-gold-fluss {
	from { background-position: 130% 0; }
	to   { background-position: -130% 0; }
}

/* Der warme Schein hinter der Schrift. */
.m-gold::before {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	z-index: -1;
	color: rgb(201 162 39 / .5);
	-webkit-text-fill-color: rgb(201 162 39 / .5);
	filter: blur(22px);
	pointer-events: none;
}

/* Kennt der Browser die Textmaske nicht, bleibt es schlicht golden. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.m-gold {
		color: var(--gold-bright);
		-webkit-text-fill-color: var(--gold-bright);
		background: none;
		animation: none;
	}

	.m-gold::before {
		display: none;
	}
}

/* Funken, die über dem Gold aufblitzen. */
.m-glints {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.m-glints i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: calc(var(--s, 1) * 1.15rem);
	aspect-ratio: 1;
	translate: -50% -50%;
	color: #fff8e2;
	opacity: 0;
	animation: m-glint 5.6s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}

/* Vier Strahlen plus Kern – zusammen ein Funkeln, kein Punkt. */
.m-glints i::before,
.m-glints i::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(closest-side, currentColor, transparent) center / 26% 100% no-repeat;
}

.m-glints i::after {
	background-size: 100% 26%;
}

@keyframes m-glint {
	0%, 72%  { opacity: 0; transform: scale(.25) rotate(0deg); }
	78%      { opacity: 1; transform: scale(1) rotate(28deg); }
	84%      { opacity: .55; transform: scale(.72) rotate(46deg); }
	90%      { opacity: .9; transform: scale(.92) rotate(62deg); }
	100%     { opacity: 0; transform: scale(.25) rotate(90deg); }
}

/* Ein Lichtstreif, der über eine Grafik wandert – für das Logo. */
.m-shine {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.m-shine::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(102deg,
		transparent 38%,
		rgb(255 252 238 / .92) 48%,
		rgb(255 252 238 / .35) 54%,
		transparent 62%);
	background-size: 320% 100%;
	background-position: 160% 0;
	-webkit-mask: url('../img/logo-gold.png') center / contain no-repeat;
	mask: url('../img/logo-gold.png') center / contain no-repeat;
	animation: m-shine-lauf 7.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes m-shine-lauf {
	0%, 62%  { background-position: 160% 0; }
	100%     { background-position: -160% 0; }
}

/* Goldene Zahlen und Zeichen bekommen denselben Fluss, nur ruhiger. */
.m-countdown__unit b,
.m-act__num,
.m-rule__num {
	background-image: linear-gradient(115deg,
		#a5811c 0%, #e8cd85 22%, #fff6d8 34%, #d8b444 48%, #a5811c 70%, #f0d894 88%, #c9a227 100%);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: m-gold-fluss 14s linear infinite;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.m-countdown__unit b,
	.m-act__num,
	.m-rule__num {
		color: var(--gold-bright);
		-webkit-text-fill-color: var(--gold-bright);
		background: none;
		animation: none;
	}
}

/* Der goldene Knopf bekommt einen langsam wandernden Glanz. */
.m-btn--gold {
	background-image: linear-gradient(
		100deg,
		#b08c1c 0%, #e6cb7e 16%, #fff6d8 26%, #e0c064 38%,
		#c9a227 54%, #9a7b1f 72%, #e6cb7e 88%, #b08c1c 100%
	);
	background-size: 260% 100%;
	background-position: 130% 0;
	animation: m-gold-fluss 6.5s linear infinite;
}

.m-btn--gold:hover {
	background-image: linear-gradient(
		100deg,
		#c9a227 0%, #f6e3a8 16%, #fffceb 26%, #f0d894 38%,
		#e0c064 54%, #b08c1c 72%, #f6e3a8 88%, #c9a227 100%
	);
}

@media (prefers-reduced-motion: reduce) {
	.m-gold,
	.m-btn--gold,
	.m-countdown__unit b,
	.m-act__num,
	.m-rule__num,
	.m-shine::after,
	.m-glints i {
		animation: none !important;
	}

	.m-glints {
		display: none;
	}

	.m-gold {
		background-position: 50% 0;
	}
}

/* =========================================================================
   HERO
   ========================================================================= */

.m-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: center;
	overflow: clip;
	padding-block: clamp(4rem, 12vh, 8rem) clamp(3rem, 8vh, 6rem);
}

.m-hero__scene {
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: 0;
}

.m-hero__mountain {
	position: absolute;
	inset-inline: -6%;
	bottom: 8%;
	height: 46%;
	background: url('../img/berg-gold.png') center bottom / contain no-repeat;
	opacity: .028;
	filter: blur(3px);
	animation: m-drift both linear;
	animation-timeline: view();
	animation-range: cover;
}

.m-smoke {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	animation: m-drift both linear;
	animation-timeline: view();
	animation-range: cover;
}

.m-smoke--a {
	width: 58vw;
	height: 46vw;
	left: -12vw;
	top: 8%;
	background: radial-gradient(circle, rgb(123 20 32 / .22), transparent 68%);
}

.m-smoke--b {
	width: 52vw;
	height: 40vw;
	right: -10vw;
	bottom: 4%;
	background: radial-gradient(circle, rgb(201 162 39 / .16), transparent 70%);
}

@keyframes m-drift {
	from { transform: translateY(calc(var(--tiefe, 1) *  5vh)); }
	to   { transform: translateY(calc(var(--tiefe, 1) * -5vh)); }
}

/* Der Lichtkegel einer Straßenlaterne. */
.m-hero__beam {
	position: absolute;
	top: -22%;
	left: 50%;
	width: 70vw;
	height: 90%;
	translate: -50% 0;
	background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgb(242 220 156 / .085) 50%, transparent 58%);
	mix-blend-mode: screen;
	animation: m-beam 9s var(--mo-ease) infinite alternate;
}

@keyframes m-beam {
	from { opacity: .55; transform: rotate(-1.1deg); }
	to   { opacity: 1;   transform: rotate(1.1deg); }
}

.m-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	display: grid;
	justify-items: center;
}

/* Ohne diesen weichen Schatten säuft die Schrift ab, sobald eine helle
   Wolke hinter ihr steht. */
.m-hero__inner::before {
	content: '';
	position: absolute;
	inset: -14% -1.5rem;
	z-index: -1;
	background: radial-gradient(58% 52% at 50% 46%, rgb(8 7 6 / .68), rgb(8 7 6 / .3) 62%, transparent 78%);
	pointer-events: none;
}

.m-hero__logo {
	width: clamp(94px, 12vw, 140px);
	margin-bottom: clamp(1.4rem, 4vh, 2.6rem);
}

.m-hero__logo img {
	width: 100%;
	height: auto;
	opacity: .92;
}

.m-hero__kicker {
	margin-bottom: .4rem;
	font-size: .66rem;
	letter-spacing: .44em;
	color: var(--cream-dim);
}

.m-hero__title {
	position: relative;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(3.6rem, 17vw, 13rem);
	line-height: .92;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* Wichtig: Weder Verlauf noch Filter liegen hier. Safari verwirft die
	   Textmaske von background-clip, sobald auf demselben Element ein
	   filter steht – der Titel war dort schlicht unsichtbar. Deshalb trägt
	   jede Schicht genau eine Aufgabe. */
}

.m-hero__title-inner {
	display: block;
	animation: m-title-in var(--mo-slow) var(--mo-ease) both;
}

@keyframes m-title-in {
	from { opacity: 0; transform: translateY(.24em) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.m-hero__slogan {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.05rem, .84rem + .95vw, 1.72rem);
	color: var(--cream);
	margin: clamp(1rem, 3vh, 1.8rem) 0 0;
	letter-spacing: .02em;
	text-wrap: balance;
	animation: m-rise var(--mo-slow) var(--mo-ease) 220ms both;
}

.m-hero__meta {
	margin: 1.1rem 0 0;
	font-size: .82rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	animation: m-rise var(--mo-slow) var(--mo-ease) 340ms both;
}

.m-countdown {
	display: flex;
	gap: clamp(.9rem, 3vw, 2.2rem);
	margin-top: clamp(2rem, 5vh, 3.2rem);
	animation: m-rise var(--mo-slow) var(--mo-ease) 460ms both;
}

.m-countdown__unit {
	display: grid;
	justify-items: center;
	gap: .35rem;
	min-width: 3.6rem;
}

.m-countdown__unit b {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--gold-bright);
	font-variant-numeric: tabular-nums;
}

.m-countdown__unit span {
	font-size: .6rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--muted);
}

.m-hero__cue {
	margin-top: clamp(2.4rem, 6vh, 4rem);
	display: grid;
	justify-items: center;
	gap: .5rem;
	color: var(--cream-dim);
	text-decoration: none;
	font-size: .66rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	animation: m-rise var(--mo-slow) var(--mo-ease) 620ms both;
}

.m-hero__cue svg {
	animation: m-nudge 2.6s var(--mo-ease) infinite;
}

@keyframes m-nudge {
	0%, 100% { transform: translateY(0); opacity: .55; }
	50%      { transform: translateY(6px); opacity: 1; }
}

/* =========================================================================
   BRIEF DES DON
   ========================================================================= */

.m-brief {
	padding-block: clamp(4rem, 12vh, 8rem);
	overflow-x: clip;
}

.m-letter {
	position: relative;
	max-width: 44rem;
	margin-inline: auto;
	padding: clamp(2.2rem, 5vw, 3.8rem) clamp(1.6rem, 5vw, 3.6rem);
	font-family: var(--font-type);
	font-size: clamp(.96rem, .92rem + .2vw, 1.07rem);
	line-height: 1.95;
	color: #2b2620;
	rotate: -.55deg;
	/* Papier: warme Fläche mit Flecken und einer weichen Kante. */
	background:
		radial-gradient(60% 45% at 18% 12%, rgb(160 120 60 / .09), transparent 70%),
		radial-gradient(45% 40% at 88% 82%, rgb(120 80 40 / .1), transparent 72%),
		linear-gradient(172deg, #f4ead2 0%, #e9dcbe 52%, #dfd0ae 100%);
	box-shadow:
		0 30px 70px -30px rgb(0 0 0 / .85),
		0 2px 0 rgb(255 255 255 / .3) inset;
}

.m-letter::after {
	/* Angerissene untere Kante. */
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -9px;
	height: 10px;
	background: linear-gradient(172deg, #dfd0ae, #cbbb98);
	clip-path: polygon(0 0, 4% 62%, 9% 12%, 15% 74%, 21% 22%, 28% 80%, 34% 18%, 41% 68%, 48% 14%, 55% 76%, 62% 24%, 69% 70%, 76% 16%, 83% 72%, 90% 20%, 96% 66%, 100% 8%, 100% 0);
}

.m-letter p {
	margin: 0 0 1.35em;
}

.m-letter em {
	font-style: normal;
	border-bottom: 2px solid rgb(123 20 32 / .5);
	padding-bottom: 1px;
}

.m-letter__salut {
	font-size: 1.24em;
	margin-bottom: 1.1em !important;
}

.m-letter__stamp {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2.4rem);
	width: clamp(78px, 12vw, 106px);
	aspect-ratio: 1;
	display: grid;
	place-content: center;
	gap: .1rem;
	text-align: center;
	border: 2px solid rgb(123 20 32 / .42);
	border-radius: 50%;
	rotate: 13deg;
	color: rgb(123 20 32 / .55);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1.25;
	font-size: .5rem;
}

.m-letter__stamp strong {
	font-size: .72rem;
	letter-spacing: .04em;
}

.m-letter__sign {
	margin-top: 2.4em;
	display: grid;
	gap: .1rem;
}

.m-letter__sign-name {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.7em;
	color: #1f1a15;
	letter-spacing: .01em;
}

.m-letter__sign-role {
	font-size: .78em;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6d6252;
}

/* =========================================================================
   REGELN
   ========================================================================= */

.m-rules {
	padding-block: clamp(4rem, 12vh, 8rem);
	overflow-x: clip;
}

.m-rules__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
}

.m-rule {
	position: relative;
	background: linear-gradient(180deg, var(--panel-glas) 0%, rgb(12 10 8 / .9) 100%);
	padding: clamp(1.7rem, 3vw, 2.4rem);
	transition: background var(--mo-base) var(--mo-ease);
}

.m-rule:hover {
	background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}

.m-rule__num {
	display: block;
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--gold-deep);
	line-height: 1;
	margin-bottom: 1rem;
}

.m-rule__head {
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 600;
	letter-spacing: .04em;
	margin: 0 0 .55rem;
	color: var(--cream);
}

.m-rule__body {
	margin: 0;
	font-size: .94rem;
	color: var(--cream-dim);
	line-height: 1.66;
}

/* =========================================================================
   DIE AUFNAHMEPRÜFUNG
   ========================================================================= */

.m-trial {
	padding-block: clamp(4rem, 12vh, 8rem);
	scroll-margin-top: 2rem;
	overflow-x: clip;
}

/* Siegel als Fortschrittsanzeige */

.m-seals {
	list-style: none;
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 4vw, 3rem);
	align-items: center;
	justify-content: center;
	border-block: 1px solid var(--line-soft);
	padding-block: 1.5rem;
}

.m-seal {
	display: flex;
	align-items: center;
	gap: .8rem;
	opacity: .4;
	transition: opacity var(--mo-base) var(--mo-ease);
}

.m-seal__wax {
	display: grid;
	place-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--panel);
	font-family: var(--font-display);
	font-size: .9rem;
	color: var(--muted);
	transition:
		background var(--mo-base) var(--mo-ease),
		color var(--mo-base) var(--mo-ease),
		border-color var(--mo-base) var(--mo-ease),
		box-shadow var(--mo-base) var(--mo-ease);
}

.m-seal__name {
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
}

.m-seal.is-done {
	opacity: 1;
}

.m-seal.is-done .m-seal__wax {
	background: radial-gradient(circle at 35% 30%, #a01c2c, var(--blood-soft));
	border-color: #b3243a;
	color: var(--cream);
	box-shadow: 0 0 22px -4px rgb(160 28 44 / .8);
	animation: m-stamp 620ms var(--mo-ease);
}

.m-seal.is-done .m-seal__name {
	color: var(--cream);
}

@keyframes m-stamp {
	0%   { transform: scale(2.1) rotate(-14deg); opacity: 0; }
	55%  { transform: scale(.92) rotate(3deg);   opacity: 1; }
	100% { transform: none; }
}

/* Akte */

.m-acts {
	display: grid;
	gap: clamp(1.2rem, 2.5vw, 2rem);
}

.m-act {
	border: 1px solid var(--line-soft);
	background:
		radial-gradient(90% 60% at 50% 0%, rgb(201 162 39 / .05), transparent 62%),
		linear-gradient(180deg, var(--panel-glas) 0%, rgb(12 10 8 / .88) 100%);
	backdrop-filter: blur(6px);
	transition:
		border-color var(--mo-base) var(--mo-ease),
		opacity var(--mo-base) var(--mo-ease);
}

.m-act.is-open {
	border-color: var(--line);
}

.m-act.is-locked {
	opacity: .34;
	filter: saturate(.25);
}

.m-act.is-locked .m-act__body {
	pointer-events: none;
	user-select: none;
}

.m-act.is-solved {
	border-color: rgb(201 162 39 / .38);
	opacity: 1;
	filter: none;
}

.m-act.is-solved .m-act__body {
	display: none;
}

.m-act.is-solved .m-act__head::after {
	content: 'bestanden';
	margin-left: auto;
	align-self: center;
	font-size: .64rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gold);
	border: 1px solid rgb(201 162 39 / .4);
	padding: .3rem .7rem;
	white-space: nowrap;
}

.m-act__head {
	display: flex;
	gap: clamp(1rem, 2.5vw, 1.6rem);
	align-items: flex-start;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border-bottom: 1px solid var(--line-soft);
}

.m-act.is-solved .m-act__head {
	border-bottom: 0;
}

.m-act__num {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--gold-deep);
	min-width: 1.6em;
}

.m-act__title {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 2.4vw, 1.7rem);
	font-weight: 600;
	letter-spacing: .04em;
	margin: 0 0 .35rem;
}

.m-act__sub {
	margin: 0;
	color: var(--cream-dim);
	font-size: .94rem;
	max-width: 56ch;
}

.m-act__body {
	padding: clamp(1.6rem, 3.5vw, 2.8rem);
}

.m-act__status {
	margin: 1.2rem 0 0;
	min-height: 1.5em;
	font-family: var(--font-type);
	font-size: .88rem;
	color: var(--cream-dim);
	line-height: 1.5;
}

.m-act__status.is-bad {
	color: #d9576b;
}

.m-act__status.is-good {
	color: var(--gold-bright);
}

/* --- Akt I: Safe -------------------------------------------------------- */

.m-safe {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: start;
}

.m-safe__door {
	position: relative;
	border: 1px solid var(--line);
	border-radius: 3px;
	background:
		radial-gradient(120% 90% at 50% 0%, #2a241c, #15120e 70%);
	box-shadow: 0 24px 60px -34px rgb(0 0 0 / .9), 0 1px 0 rgb(255 255 255 / .04) inset;
	padding: clamp(1.4rem, 3vw, 2.4rem);
	overflow: hidden;
}

.m-safe__hinge {
	position: absolute;
	left: 0;
	top: 12%;
	bottom: 12%;
	width: 6px;
	background: linear-gradient(180deg, transparent, var(--gold-deep) 18%, #4b3a0d 50%, var(--gold-deep) 82%, transparent);
	opacity: .5;
}

.m-safe__plate {
	position: relative;
}

.m-dials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.7rem, 2vw, 1.4rem);
}

.m-dial {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		'face face face'
		'minus label plus';
	justify-items: center;
	align-items: center;
	gap: .5rem;
}

.m-dial__face {
	grid-area: face;
	position: relative;
	width: min(100%, 8.5rem);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	cursor: grab;
	/* Senkrecht wischen scrollt die Seite; gedreht wird waagerecht oder
	   über die Tasten. Sonst klebt der Finger am Rad fest. */
	touch-action: pan-y;
	background:
		radial-gradient(circle at 38% 30%, #4a4036, #221d17 60%, #14110d 100%);
	box-shadow:
		0 0 0 1px var(--line) inset,
		0 10px 24px -12px rgb(0 0 0 / .9);
}

.m-dial__face:active {
	cursor: grabbing;
}

.m-dial__ring {
	position: absolute;
	inset: 9%;
	border-radius: 50%;
	/* Die Kerben des Zahlenrads – sie drehen sich mit dem Wert. */
	background: repeating-conic-gradient(
		from 0deg,
		rgb(201 162 39 / .42) 0deg .9deg,
		transparent .9deg 9deg
	);
	mask: radial-gradient(circle, transparent 62%, #000 64%, #000 100%);
	rotate: var(--deg, 0deg);
	transition: rotate 320ms var(--mo-ease);
}

.m-dial__marker {
	position: absolute;
	top: 2%;
	left: 50%;
	translate: -50% 0;
	width: 0;
	height: 0;
	border-inline: 6px solid transparent;
	border-top: 10px solid var(--gold-bright);
	filter: drop-shadow(0 0 4px rgb(242 220 156 / .6));
}

.m-dial__value {
	position: relative;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: 600;
	color: var(--cream);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 12px rgb(0 0 0 / .8);
}

.m-dial__step {
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--line);
	background: var(--panel-2);
	color: var(--cream-dim);
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: all var(--mo-fast) var(--mo-ease);
}

.m-dial__step:first-of-type { grid-area: minus; }
.m-dial__step:last-of-type  { grid-area: plus; }

.m-dial__step:hover {
	border-color: var(--gold);
	color: var(--gold-bright);
	background: #241f18;
}

.m-dial__label {
	grid-area: label;
	margin: 0;
	font-size: .62rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

.m-safe__door.is-wrong {
	animation: m-shake 420ms var(--mo-ease);
}

@keyframes m-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-9px); }
	40%      { transform: translateX(8px); }
	60%      { transform: translateX(-5px); }
	80%      { transform: translateX(3px); }
}

.m-safe__door.is-open {
	animation: m-open-flash 900ms var(--mo-ease);
}

@keyframes m-open-flash {
	0%   { box-shadow: 0 0 0 0 rgb(242 220 156 / .5); }
	40%  { box-shadow: 0 0 60px 6px rgb(242 220 156 / .35); }
	100% { box-shadow: 0 24px 60px -34px rgb(0 0 0 / .9); }
}

/* Notizzettel */

.m-notes {
	display: grid;
	gap: clamp(.8rem, 2vw, 1.2rem);
}

.m-note {
	padding: 1.1rem 1.3rem;
	rotate: var(--r, 0deg);
	font-family: var(--font-type);
	color: #332c24;
	background: linear-gradient(168deg, #efe3c6, #ddceac);
	box-shadow: 0 14px 30px -20px rgb(0 0 0 / .9);
	transition: rotate var(--mo-base) var(--mo-ease), translate var(--mo-base) var(--mo-ease);
}

.m-note:hover {
	rotate: 0deg;
	translate: 0 -3px;
}

.m-note__title {
	margin: 0 0 .4rem;
	font-size: .62rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #8a6d16;
}

.m-note__text {
	margin: 0;
	font-size: .88rem;
	line-height: 1.6;
}

/* --- Akt II: Hütchenspiel ---------------------------------------------- */

.m-shells {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center;
}

.m-shells__table {
	position: relative;
	padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1rem, 2vw, 1.6rem);
	border-radius: 4px;
	background:
		radial-gradient(66% 58% at 50% 36%, rgb(120 26 38 / .62), transparent 74%),
		linear-gradient(180deg, #2c1418 0%, #170b0d 100%);
	box-shadow: 0 0 0 1px var(--line-soft) inset;
	overflow: hidden;
}

.m-shells__stage {
	/* Der Abstand richtet sich nach der Spielfläche, nicht nach dem Hut –
	   deshalb Container-Einheiten statt Prozent. */
	--gap: 8.4rem;
	container-type: inline-size;
	position: relative;
	height: clamp(9rem, 22vw, 12.5rem);
	margin-inline: auto;
	width: min(100%, 30rem);
}

@supports (width: 1cqw) {
	.m-shells__stage {
		--gap: 30cqw;
	}
}

.m-cup {
	position: absolute;
	bottom: 1.6rem;
	left: 50%;
	width: min(7rem, 26cqw);
	padding: 0;
	border: 0;
	background: none;
	cursor: not-allowed;
	transform: translateX(calc(-50% + (var(--pos) - 1) * var(--gap))) translateY(var(--lift, 0px));
	transition:
		transform var(--swap, 460ms) var(--mo-ease),
		filter var(--mo-fast) linear;
	z-index: 2;
}

.m-cup svg {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 12px 14px rgb(0 0 0 / .6));
}

.m-cup__crown {
	fill: #2c251d;
	stroke: rgb(201 162 39 / .22);
	stroke-width: 1.5;
}

.m-cup__brim {
	fill: #171310;
	stroke: rgb(201 162 39 / .16);
	stroke-width: 1;
}

.m-cup__band { fill: #6e1420; }

.m-shells.is-playable .m-cup {
	cursor: pointer;
}

.m-shells.is-playable .m-cup:hover,
.m-shells.is-playable .m-cup:focus-visible {
	filter: brightness(1.35);
}

.m-cup.is-lifted {
	--lift: -3.4rem;
}

.m-cup.is-wrong .m-cup__crown {
	fill: #3a1a1c;
	stroke: rgb(200 70 84 / .55);
}

.m-cup.is-found .m-cup__crown {
	fill: #3a3122;
	stroke: var(--gold);
	stroke-width: 2;
}

.m-cup.is-found {
	filter: drop-shadow(0 0 18px rgb(201 162 39 / .45));
}

/* Der Ring liegt frei – ein kurzes Aufblitzen quittiert den Treffer. */
.m-ring.is-visible {
	animation: m-ring-pop 520ms var(--mo-ease);
}

@keyframes m-ring-pop {
	0%   { transform: translateX(calc(-50% + (var(--pos, 0) - 1) * var(--gap))) scale(.4); opacity: 0; }
	60%  { transform: translateX(calc(-50% + (var(--pos, 0) - 1) * var(--gap))) scale(1.15); opacity: 1; }
	100% { transform: translateX(calc(-50% + (var(--pos, 0) - 1) * var(--gap))) scale(1); opacity: 1; }
}

.m-ring {
	position: absolute;
	bottom: 2.1rem;
	left: 50%;
	transform: translateX(calc(-50% + (var(--pos, 0) - 1) * var(--gap)));
	transition: transform 300ms var(--mo-ease), opacity 240ms linear;
	opacity: 0;
	z-index: 1;
}

.m-ring.is-visible {
	opacity: 1;
}

.m-shells__shadowline {
	display: none;
}

/* Die Tischkante, auf der die Hüte stehen. */
.m-shells__stage::after {
	content: '';
	position: absolute;
	left: 5%;
	right: 5%;
	bottom: 1.15rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(201 162 39 / .34), transparent);
}

.m-shells__panel {
	display: grid;
	gap: 1.1rem;
	justify-items: start;
}

.m-rounds {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .6rem;
}

.m-rounds li {
	width: 2.1rem;
	height: 2.1rem;
	display: grid;
	place-content: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	font-size: .78rem;
	color: var(--muted);
	transition: all var(--mo-base) var(--mo-ease);
}

.m-rounds li.is-won {
	border-color: var(--gold);
	color: var(--ink);
	background: var(--gold);
	font-weight: 600;
}

.m-rounds li.is-active {
	border-color: var(--gold-bright);
	color: var(--gold-bright);
	box-shadow: 0 0 16px -4px var(--gold);
}

/* --- Akt III: Chiffrierscheibe ----------------------------------------- */

.m-cipher {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center;
}

.m-cipher__discwrap {
	display: grid;
	justify-items: center;
	gap: .8rem;
}

.m-cipher__disc {
	position: relative;
	width: min(100%, 21rem);
	aspect-ratio: 1;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.m-cipher__disc:active {
	cursor: grabbing;
}

.m-cipher__pointer {
	position: absolute;
	top: -2px;
	left: 50%;
	translate: -50% 0;
	width: 0;
	height: 0;
	border-inline: 7px solid transparent;
	border-top: 13px solid var(--gold-bright);
	z-index: 2;
	filter: drop-shadow(0 0 5px rgb(242 220 156 / .55));
}

.m-cipher__plate       { fill: #14110d; stroke: var(--line); stroke-width: 1; }
.m-cipher__groove      { fill: none; stroke: rgb(201 162 39 / .2); stroke-width: 1; }
.m-cipher__innerplate  { fill: radial-gradient(#2a241c, #16130f); fill: #1d1913; stroke: rgb(201 162 39 / .28); stroke-width: 1; }
.m-cipher__hub         { fill: var(--gold-deep); }

.m-cipher__outer text {
	fill: var(--cream-dim);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	text-anchor: middle;
}

.m-cipher__inner text {
	fill: var(--gold);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	text-anchor: middle;
}

.m-cipher__inner {
	transform-origin: 160px 160px;
	transform: rotate(var(--rot, 0deg));
	transition: transform 180ms var(--mo-ease);
}

.m-cipher__disc.is-dragging .m-cipher__inner {
	transition: none;
}

.m-cipher__steps {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.m-cipher__shift {
	min-width: 2.4rem;
	text-align: center;
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--gold-bright);
	font-variant-numeric: tabular-nums;
}

.m-cipher__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem 1.4rem;
	margin: 0;
	font-size: .7rem;
	letter-spacing: .1em;
}

.m-cipher__legend span {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.m-cipher__legend span::before {
	content: '';
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	border: 1px solid currentColor;
}

.m-cipher__legend-outer { color: var(--cream-dim); }
.m-cipher__legend-inner { color: var(--gold); }

/* Bedienhinweise passen sich dem Eingabegerät an, nicht der Bildschirmbreite. */
.nur-touch { display: none; }

@media (hover: none) {
	.nur-zeiger { display: none; }
	.nur-touch  { display: inline; }
}

.m-cipher__hint {
	margin: 0;
	font-size: .66rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
}

.m-cipher__reading {
	display: grid;
	gap: .4rem;
}

.m-cipher__label {
	margin: .8rem 0 0;
	font-size: .62rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--muted);
}

.m-cipher__crypt,
.m-cipher__plain {
	margin: 0;
	font-family: var(--font-type);
	font-size: clamp(.94rem, .84rem + .4vw, 1.16rem);
	line-height: 1.6;
	word-spacing: .18em;
	overflow-wrap: anywhere;
}

.m-cipher__crypt {
	color: var(--muted);
}

.m-cipher__plain {
	color: var(--cream);
	min-height: 2em;
	padding: .6rem .8rem;
	background: rgb(201 162 39 / .05);
	border-left: 2px solid var(--line);
	transition: border-color var(--mo-base) var(--mo-ease), color var(--mo-base) var(--mo-ease);
}

.m-cipher__plain.is-clear {
	border-left-color: var(--gold);
	color: var(--gold-bright);
}

.m-cipher__form {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	align-items: flex-end;
	margin-top: 1.2rem;
}

.m-cipher__form .m-field {
	flex: 1 1 12rem;
}

.m-cipher__form input {
	text-transform: uppercase;
	letter-spacing: .28em;
	font-family: var(--font-type);
}

.m-trial__help {
	margin-top: 2rem;
	text-align: center;
}

.m-linkbtn {
	background: none;
	border: 0;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: .82rem;
	letter-spacing: .06em;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-color: rgb(201 162 39 / .4);
	padding: .4rem;
}

.m-linkbtn:hover {
	color: var(--gold);
}

.m-noscript {
	border: 1px solid var(--line);
	background: var(--panel);
	padding: 1.2rem 1.4rem;
	margin-bottom: 2rem;
	color: var(--cream-dim);
}

/* =========================================================================
   ANMELDUNG
   ========================================================================= */

.m-signup {
	position: relative;
	padding-block: clamp(4rem, 12vh, 8rem);
	scroll-margin-top: 2rem;
	overflow-x: clip;
}

/* Der verschlossene Tresor */

.m-vault {
	position: relative;
	width: min(100% - 2 * var(--pad), var(--shell));
	margin-inline: auto;
	min-height: clamp(22rem, 46vh, 30rem);
	display: grid;
	place-items: center;
	text-align: center;
	border: 1px solid var(--line);
	background:
		radial-gradient(80% 70% at 50% 40%, #221c15, #0f0d0a 76%);
	overflow: hidden;
	transition: opacity var(--mo-slow) var(--mo-ease);
}

.m-vault__door {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: .3;
}

.m-vault__wheel {
	width: min(58%, 20rem);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid rgb(201 162 39 / .3);
	background:
		repeating-conic-gradient(from 0deg, rgb(201 162 39 / .12) 0deg 1.4deg, transparent 1.4deg 15deg),
		radial-gradient(circle, #1b1610 40%, transparent 70%);
	transition: rotate 2.4s var(--mo-ease);
}

.m-vault__bolts {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.m-vault__bolts span {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gold-deep);
	opacity: .55;
	transform: rotate(var(--a)) translateY(min(-31vw, -11rem));
	transition: transform 900ms var(--mo-ease), opacity 700ms linear;
}

.m-vault.is-opening .m-vault__wheel {
	rotate: 900deg;
}

.m-vault.is-opening .m-vault__bolts span {
	transform: rotate(var(--a)) translateY(min(-24vw, -8rem));
	opacity: 0;
}

.m-vault__locked {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: .6rem;
	padding: clamp(2rem, 5vw, 3rem);
	max-width: 40rem;
}

.m-vault__locked .m-lead {
	margin-bottom: 1rem;
}

/* Formular */

.m-signup__inner {
	animation: m-rise var(--mo-slow) var(--mo-ease) both;
}

.m-signup__inner .m-section-head {
	max-width: 52rem;
	margin-inline: auto;
}

.m-signup__inner .m-closed {
	margin-inline: auto;
}

.m-form {
	display: grid;
	gap: clamp(1.4rem, 3vw, 2.2rem);
	max-width: 52rem;
	margin-inline: auto;
}

.m-fieldset {
	border: 1px solid var(--line-soft);
	background: linear-gradient(180deg, var(--panel-glas) 0%, rgb(12 10 8 / .9) 100%);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	margin: 0;
	display: grid;
	gap: 1.2rem;
}

.m-legend {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 0 .7rem;
	margin-left: -.7rem;
	font-family: var(--font-display);
	font-size: .96rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cream);
}

.m-legend span {
	display: grid;
	place-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border: 1px solid var(--gold-deep);
	border-radius: 50%;
	font-size: .68rem;
	color: var(--gold);
}

.m-grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1rem 1.2rem;
}

.m-field {
	display: grid;
	gap: .38rem;
}

.m-field--wide {
	grid-column: 1 / -1;
}

.m-field__label {
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cream-dim);
}

.m-field__label i,
.m-check i,
.m-form__note i {
	color: var(--gold);
	font-style: normal;
}

.m-field__hint {
	font-size: .74rem;
	color: var(--muted);
	line-height: 1.4;
}

.m-field__error {
	font-size: .76rem;
	color: #e0798a;
	min-height: 0;
}

.m-field__error:empty {
	display: none;
}

input[type='text'],
input[type='email'],
input[type='tel'],
textarea {
	width: 100%;
	font: inherit;
	font-weight: 300;
	color: var(--cream);
	background: #0c0a08;
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: .72rem .85rem;
	transition: border-color var(--mo-fast) var(--mo-ease), background var(--mo-fast) var(--mo-ease);
}

input::placeholder,
textarea::placeholder {
	color: #5e564b;
}

input:hover,
textarea:hover {
	border-color: #4a3f30;
}

input:focus,
textarea:focus {
	outline: none;
	border-color: var(--gold);
	background: #100d0a;
	box-shadow: 0 0 0 3px rgb(201 162 39 / .12);
}

.m-field.has-error input,
.m-field.has-error textarea {
	border-color: #8d3040;
}

textarea {
	resize: vertical;
	min-height: 3.4rem;
}

/* Auswahl als Chips */

.m-choice {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .5rem;
}

.m-choice__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.m-chip {
	position: relative;
	cursor: pointer;
}

.m-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.m-chip span {
	display: block;
	padding: .55rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-size: .88rem;
	color: var(--cream-dim);
	transition: all var(--mo-fast) var(--mo-ease);
}

.m-chip:hover span {
	border-color: #4a3f30;
	color: var(--cream);
}

.m-chip input:checked + span {
	border-color: var(--gold);
	background: rgb(201 162 39 / .12);
	color: var(--gold-bright);
}

.m-chip input:focus-visible + span {
	outline: 2px solid var(--gold-bright);
	outline-offset: 2px;
}

/* Checkboxen */

.m-check {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	cursor: pointer;
	font-size: .92rem;
	color: var(--cream-dim);
	line-height: 1.5;
}

.m-check input {
	appearance: none;
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .18rem;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: #0c0a08;
	cursor: pointer;
	transition: all var(--mo-fast) var(--mo-ease);
}

.m-check input:hover {
	border-color: #4a3f30;
}

.m-check input:checked {
	background: var(--gold);
	border-color: var(--gold);
	/* Haken als Maske – braucht kein zusätzliches Element. */
	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='%230b0a09' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 100%;
}

.m-check--privacy {
	font-size: .86rem;
}

.m-check--switch {
	font-size: 1rem;
	color: var(--cream);
}

.m-guest {
	display: grid;
	gap: 1.2rem;
	padding-top: .4rem;
	border-top: 1px dashed var(--line-soft);
	animation: m-rise var(--mo-base) var(--mo-ease) both;
}

.m-honey {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Knöpfe */

.m-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .9rem 1.9rem;
	border: 1px solid var(--gold-deep);
	background: linear-gradient(180deg, rgb(201 162 39 / .16), rgb(201 162 39 / .04));
	color: var(--gold-bright);
	font-family: var(--font-body);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	cursor: pointer;
	overflow: hidden;
	transition: all var(--mo-fast) var(--mo-ease);
}

.m-btn::after {
	/* Ein Lichtstreif, der beim Überfahren durchs Metall wandert. */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .16) 50%, transparent 62%);
	translate: -110% 0;
	transition: translate var(--mo-slow) var(--mo-ease);
}

.m-btn:hover::after {
	translate: 110% 0;
}

.m-btn:hover {
	border-color: var(--gold);
	color: #fff6dc;
	background: linear-gradient(180deg, rgb(201 162 39 / .28), rgb(201 162 39 / .08));
}

.m-btn--gold {
	background: linear-gradient(180deg, var(--gold-bright), var(--gold) 45%, var(--gold-deep));
	color: #191307;
	border-color: var(--gold-bright);
	font-weight: 600;
}

.m-btn--gold:hover {
	background: linear-gradient(180deg, #fff3cd, var(--gold-bright) 45%, var(--gold));
	color: #120e05;
}

.m-btn--ghost {
	background: transparent;
	color: var(--cream-dim);
	border-color: var(--line);
}

.m-btn--big {
	padding: 1.15rem 2.4rem;
	font-size: .86rem;
}

.m-btn[disabled],
.m-btn.is-busy {
	opacity: .5;
	pointer-events: none;
}

.m-btn.is-busy .m-btn__label::after {
	content: ' …';
}

.m-form__foot {
	display: grid;
	gap: .8rem;
	justify-items: start;
}

.m-form__note {
	margin: 0;
	font-size: .76rem;
	color: var(--muted);
}

.m-form__error {
	margin: 0;
	padding: .9rem 1.1rem;
	border: 1px solid #7a2c38;
	background: rgb(122 44 56 / .14);
	color: #f0a9b4;
	font-size: .9rem;
}

.m-closed {
	border: 1px solid var(--line);
	background: var(--panel);
	padding: clamp(1.6rem, 4vw, 2.6rem);
	max-width: 44rem;
}

.m-closed h3 {
	font-family: var(--font-display);
	font-size: 1.4rem;
	margin: 0 0 .6rem;
}

.m-closed p {
	margin: 0;
	color: var(--cream-dim);
}

/* --- Bestätigung -------------------------------------------------------- */

.m-done {
	position: relative;
	width: min(100% - 2 * var(--pad), var(--shell));
	margin-inline: auto;
	text-align: center;
	padding: clamp(2.5rem, 7vw, 5rem) clamp(1.2rem, 4vw, 3rem);
	border: 1px solid rgb(201 162 39 / .3);
	background:
		radial-gradient(80% 70% at 50% 0%, rgb(201 162 39 / .09), transparent 70%),
		linear-gradient(180deg, var(--panel) 0%, var(--ink-2) 100%);
	animation: m-rise var(--mo-slow) var(--mo-ease) both;
}

.m-done__inner {
	display: grid;
	justify-items: center;
	gap: .5rem;
	max-width: 46rem;
	margin-inline: auto;
}

.m-wax {
	margin-bottom: 1rem;
	animation: m-stamp 760ms var(--mo-ease) 160ms both;
}

.m-wax__blob {
	fill: radial-gradient(#a01c2c, #4a0e16);
	fill: #8c1826;
}

.m-wax__rim {
	fill: none;
	stroke: rgb(255 255 255 / .18);
	stroke-width: 1.5;
	stroke-dasharray: 3 5;
}

.m-wax__mark {
	fill: rgb(255 255 255 / .82);
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: .06em;
}

.m-done__quote {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem);
	font-weight: 600;
	font-style: italic;
	line-height: 1.2;
	margin: 0;
	color: var(--gold-bright);
	text-wrap: balance;
}

.m-done__sub {
	margin: .4rem 0 1.6rem;
	color: var(--cream-dim);
	font-size: 1.06em;
	max-width: 40ch;
	text-wrap: pretty;
}

.m-done__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1px;
	margin: 0 0 1.6rem;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
}

.m-done__facts > div {
	background: var(--ink-2);
	padding: 1rem 1.6rem;
	min-width: 9rem;
}

.m-done__facts dt {
	font-size: .6rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: .35rem;
}

.m-done__facts dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.06rem;
	color: var(--cream);
	letter-spacing: .04em;
}

.m-done__mail {
	margin: 0;
	font-size: .88rem;
	color: var(--cream-dim);
	max-width: 40ch;
}

.m-done__reload {
	margin: 1.4rem 0 0;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.m-done__reload b {
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------------------
   Mikrobewegung – die Kleinigkeiten, die eine Seite lebendig machen
   ------------------------------------------------------------------------- */

/* Das Gold im Titel wandert langsam, als liefe Licht darüber. */
.m-hero__title {
	background-size: 100% 340%;
	background-position: 50% 22%;
	animation: m-schimmer 13s ease-in-out infinite alternate;
}

@keyframes m-schimmer {
	from { background-position: 50% 14%; }
	to   { background-position: 50% 62%; }
}

/* Karten heben sich unter dem Zeiger. */
.m-rule {
	transition:
		background var(--mo-base) var(--mo-ease),
		transform var(--mo-base) var(--mo-ease),
		box-shadow var(--mo-base) var(--mo-ease);
}

@media (hover: hover) {
	.m-rule:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 44px -28px rgb(0 0 0 / .9);
	}

	.m-btn:hover {
		transform: translateY(-2px);
	}

	.m-btn:active {
		transform: translateY(0);
	}
}

.m-btn {
	transition:
		background var(--mo-fast) var(--mo-ease),
		border-color var(--mo-fast) var(--mo-ease),
		color var(--mo-fast) var(--mo-ease),
		transform var(--mo-fast) var(--mo-ease),
		box-shadow var(--mo-fast) var(--mo-ease);
}

.m-btn--gold:hover {
	box-shadow: 0 12px 30px -14px rgb(201 162 39 / .7);
}

/* Der Brief neigt sich sacht zum Zeiger. */
@media (hover: hover) and (pointer: fine) {
	.m-brief {
		perspective: 1400px;
	}

	.m-letter {
		transition:
			rotate var(--mo-slow) var(--mo-ease),
			transform var(--mo-slow) var(--mo-ease),
			box-shadow var(--mo-slow) var(--mo-ease);
	}

	.m-letter.is-hover {
		transform:
			rotateX(calc((50 - var(--cyn, 50)) * .045deg))
			rotateY(calc((var(--cxn, 50) - 50) * .06deg));
		box-shadow:
			0 44px 90px -40px rgb(0 0 0 / .95),
			0 2px 0 rgb(255 255 255 / .3) inset;
	}
}

/* Ein Akt, der aufgeht, gibt kurz Licht. */
.m-act.is-open {
	animation: m-akt-auf 1.1s var(--mo-ease);
}

@keyframes m-akt-auf {
	0%   { box-shadow: 0 0 0 0 rgb(201 162 39 / 0); }
	35%  { box-shadow: 0 0 46px -8px rgb(201 162 39 / .35); }
	100% { box-shadow: 0 0 0 0 rgb(201 162 39 / 0); }
}

/* Wechselnde Ziffern im Countdown blitzen kurz auf. */
.m-countdown__unit b {
	transition: color var(--mo-fast) linear;
}

.m-countdown__unit b.is-tick {
	animation: m-tick 420ms var(--mo-ease);
}

/* Die Sekunden springen im Takt – dort genügt ein Hauch, sonst flimmert es. */
.m-countdown__unit b[data-cd="s"].is-tick {
	animation: m-tick-leise 260ms var(--mo-ease);
}

@keyframes m-tick-leise {
	from { opacity: .45; }
	to   { opacity: 1; }
}

@keyframes m-tick {
	0%   { transform: translateY(-30%); opacity: 0; filter: blur(3px); }
	100% { transform: none; opacity: 1; filter: blur(0); }
}

/* Die Siegel pulsieren leise, solange sie noch zu holen sind. */
.m-seal:not(.is-done) .m-seal__wax {
	animation: m-warten 3.4s ease-in-out infinite;
}

@keyframes m-warten {
	0%, 100% { border-color: var(--line); }
	50%      { border-color: rgb(201 162 39 / .42); }
}

/* Der Tresor dreht sein Rad, solange er zu ist. */
.m-vault:not(.is-opening) .m-vault__wheel {
	animation: m-rad 64s linear infinite;
}

@keyframes m-rad {
	to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
	.m-hero__title,
	.m-seal:not(.is-done) .m-seal__wax,
	.m-vault:not(.is-opening) .m-vault__wheel,
	.m-act.is-open,
	.m-countdown__unit b.is-tick {
		animation: none !important;
	}

	.m-rule:hover,
	.m-btn:hover,
	.m-letter.is-hover {
		transform: none !important;
	}
}

/* =========================================================================
   FUSS
   ========================================================================= */

.m-footer {
	border-top: 1px solid var(--line-soft);
	padding-block: clamp(3rem, 8vh, 5rem);
	text-align: center;
}

.m-footer__logo {
	width: 108px;
	height: auto;
	margin: 0 auto 1.4rem;
	opacity: .34;
}

.m-footer__line {
	margin: 0 0 .4rem;
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
}

.m-footer__quote {
	margin: 0 0 1.6rem;
	font-family: var(--font-display);
	font-style: italic;
	color: var(--cream-dim);
}

.m-footer__nav {
	display: flex;
	gap: 1.6rem;
	justify-content: center;
	flex-wrap: wrap;
	font-size: .8rem;
}

.m-footer__nav a {
	color: var(--muted);
	text-decoration: none;
}

.m-footer__nav a:hover {
	color: var(--gold);
	text-decoration: underline;
}

/* =========================================================================
   SCHMALE SCHIRME
   ========================================================================= */

@media (max-width: 62rem) {
	.m-safe,
	.m-shells,
	.m-cipher {
		grid-template-columns: 1fr;
	}

	.m-shells__panel {
		justify-items: center;
		text-align: center;
	}

	.m-cipher__reading {
		order: 2;
	}
}

@media (max-width: 34rem) {
	/* Drei Räder nebeneinander passen nur, wenn die Beschriftung eine eigene
	   Zeile bekommt – sonst schiebt sie die Spalten auseinander. */
	.m-dial {
		grid-template-areas:
			'face  face  face'
			'label label label'
			'minus .     plus';
		gap: .35rem;
	}

	.m-dial__label {
		letter-spacing: .12em;
		font-size: .58rem;
	}

	.m-dials {
		gap: .9rem;
	}

	.m-dial__step {
		width: 1.7rem;
		height: 1.7rem;
	}

	.m-safe__door {
		padding-inline: .9rem;
	}

	/* Schräge Zettel würden am Rand angeschnitten. */
	.m-note {
		rotate: 0deg;
	}
}

@media (max-width: 30rem) {
	.m-countdown {
		gap: .6rem;
	}

	.m-countdown__unit {
		min-width: 3rem;
	}

	.m-act__head {
		flex-direction: column;
		gap: .5rem;
	}

	.m-letter__stamp {
		display: none;
	}
}

/* Parallax kostet auf Touchgeräten mehr, als es bringt. */
@media (hover: none) {
	.m-smoke,
	.m-hero__mountain {
		animation: none;
	}
}

@media print {
	.m-grain,
	.m-vignette,
	.m-progress,
	.m-hero__scene {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* Ausgeblendetes bleibt ausgeblendet – auch gegen display:grid. */
[hidden] {
	display: none !important;
}

/* =========================================================================
   HANDY UND TABLET

   Zwei Dinge zählen hier: Fingerfreundlichkeit und Ruhe für die Grafikeinheit.
   Deshalb weniger Farbwolken, kein Glas-Weichzeichner und größere Ziele.
   ========================================================================= */

@media (max-width: 48rem) {
	/* Weniger Schichten – vier vollflächige Verläufe kosten auf schwachen
	   Geräten spürbar Bilder pro Sekunde. */
	.m-cloud--kupfer {
		display: none;
	}

	.m-cloud--blut   { width: 110vmax; height: 90vmax; }
	.m-cloud--gold   { width: 96vmax;  height: 80vmax; }
	.m-cloud--petrol { width: 104vmax; height: 86vmax; }

	/* backdrop-filter ist auf Mobilgeräten der teuerste Effekt überhaupt. */
	.m-act {
		backdrop-filter: none;
		background:
			radial-gradient(90% 60% at 50% 0%, rgb(201 162 39 / .05), transparent 62%),
			linear-gradient(180deg, rgb(20 17 13 / .96) 0%, rgb(11 9 7 / .97) 100%);
	}

	.m-rule,
	.m-fieldset {
		background: linear-gradient(180deg, rgb(20 17 13 / .95) 0%, rgb(11 9 7 / .97) 100%);
	}

	/* Fingerfreundliche Ziele: mindestens 44 px in jeder Richtung. */
	.m-dial__step {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.25rem;
	}

	.m-chip span {
		padding: .8rem 1.2rem;
		font-size: .95rem;
	}

	.m-check {
		padding-block: .35rem;
	}

	.m-check input {
		width: 1.4rem;
		height: 1.4rem;
	}

	.m-btn {
		padding: 1rem 1.6rem;
		min-height: 3rem;
		width: 100%;
		justify-content: center;
	}

	.m-btn--ghost,
	.m-hero__cue {
		width: auto;
	}

	.m-linkbtn {
		padding: .8rem;
		display: inline-block;
	}

	/* Der Tastendruck ersetzt den fehlenden Hover. */
	.m-btn:active,
	.m-chip:active span,
	.m-cup:active {
		filter: brightness(1.22);
	}

	/* Statt Ziehen bekommen die Räder Wischgesten und große Tasten. */
	.m-dial__face {
		width: min(100%, 7.5rem);
	}

	/* Die Hüte dürfen den Platz nutzen, den sie kriegen können. */
	.m-shells__stage {
		height: clamp(10rem, 34vw, 13rem);
	}

	.m-cup {
		width: min(8rem, 29cqw);
	}

	/* Die Chiffrierscheibe ist auf dem Handy das Hauptbedienelement. */
	.m-cipher__disc {
		width: min(100%, 24rem);
	}

	.m-cipher__outer text { font-size: 17px; }
	.m-cipher__inner text { font-size: 16px; }

	.m-notes {
		gap: .7rem;
	}

	.m-note__text {
		font-size: .92rem;
	}

	.m-act__body {
		padding-inline: clamp(.9rem, 4vw, 1.6rem);
	}

	.m-letter {
		rotate: 0deg;
		line-height: 1.85;
	}

	.m-done__facts > div {
		flex: 1 1 8rem;
		padding: .9rem 1rem;
	}
}

/* Wo kein Zeiger ist, braucht es keine Zeiger-Effekte. */
@media (hover: none) {
	.m-rule:hover,
	.m-note:hover {
		transform: none;
		rotate: var(--r, 0deg);
	}
}

/* Sehr schmale Geräte */
@media (max-width: 26rem) {
	.m-hero__title {
		font-size: clamp(3rem, 21vw, 5rem);
	}

	.m-countdown__unit b {
		font-size: 1.4rem;
	}

	.m-seals {
		gap: .8rem;
		justify-content: flex-start;
	}

	.m-seal__name {
		font-size: .66rem;
	}
}

/* Quergehaltenes Handy: der Hero darf nicht die ganze Höhe fressen. */
@media (max-height: 30rem) and (orientation: landscape) {
	.m-hero {
		min-height: auto;
		padding-block: 3rem;
	}

	.m-hero__logo {
		width: 70px;
	}

	.m-countdown {
		margin-top: 1.2rem;
	}
}

/* =========================================================================
   SPRACHWAHL
   ========================================================================= */

.m-langs {
	position: fixed;
	top: clamp(.6rem, 2vw, 1.2rem);
	right: clamp(.6rem, 2vw, 1.4rem);
	z-index: 30;
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgb(12 10 8 / .72);
	backdrop-filter: blur(10px);
}

.m-langs__item {
	display: block;
	padding: .42rem .8rem;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
	transition: color var(--mo-fast) var(--mo-ease), background var(--mo-fast) var(--mo-ease);
}

.m-langs__item:hover {
	color: var(--gold-bright);
	background: rgb(201 162 39 / .12);
}

.m-langs__item.is-current {
	color: var(--ink);
	background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}

/* Der ausgeschriebene Name steht nur für Vorlesewerkzeuge da. */
.m-langs__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Der Hero-Kopf darf nicht unter der Sprachwahl liegen. */
.m-hero {
	padding-block-start: clamp(5rem, 14vh, 9rem);
}

.m-form__privacy {
	margin: .2rem 0 0;
	max-width: 46ch;
	font-size: .74rem;
	line-height: 1.5;
	color: var(--muted);
}

@media (max-width: 30rem) {
	.m-langs {
		top: auto;
		bottom: .7rem;
		right: 50%;
		translate: 50% 0;
	}

	.m-langs__item {
		padding: .55rem 1rem;
		font-size: .72rem;
	}

	/* Platz für die Leiste am unteren Rand. */
	.m-footer {
		padding-block-end: 4.5rem;
	}
}