/* Local fonts: IBM Plex Sans */
@font-face {
	font-family: "IBM Plex Sans";
	src: url("./font/IBMPlexSans-Light.woff2") format("woff2"),
		url("./font/IBMPlexSans-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("./font/IBMPlexSans-Medium.woff2") format("woff2"),
		url("./font/IBMPlexSans-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("./font/IBMPlexSans-SemiBold.woff2") format("woff2"),
		url("./font/IBMPlexSans-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("./font/IBMPlexSans-Bold.woff2") format("woff2"),
		url("./font/IBMPlexSans-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
/* Gotham für Badge-Ziffern */
@font-face {
	font-family: "Gotham";
	src: url("./font/Gotham Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--frame-w: 1080px;
	--frame-h: 1920px;
	--scale: 1;
	--blue-700: #005aa9;
	--blue-500: #1e90ff;
	--blue-400: #37a5ff;
	--blue-300: #59c0ff;
	--bg-1: #0b2a66;
	--bg-2: #0e3b8a;
	--white: #ffffff;
	--shadow: 0 10px 24px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--white);
	background: #05173a;
	overflow: hidden;
	/* Verhindert künstlich erzeugte Schriftschnitte und sorgt für sauberes Rendering */
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Full-bleed animated gradient background */
.bg {
	position: fixed;
	inset: 0;
	/* neutrale Bühne hinter dem 1080x1920-Frame */
	background: radial-gradient(1200px 800px at 70% 30%, rgba(88, 164, 255, 0.25), transparent 60%),
		radial-gradient(800px 600px at 20% 80%, rgba(46, 109, 255, 0.3), transparent 60%),
		linear-gradient(160deg, var(--bg-1), var(--bg-2));
	filter: saturate(110%) contrast(105%);
	z-index: 0;
}
/* Video als vollflächiger Hintergrund */
.bg, .bg * { pointer-events: none; }
.bg .bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
	transform: none;
	will-change: filter, transform;
	transition: filter .8s ease, transform .8s ease;
}
.bg.is-blur .bg-video {
	/* leichter Overscan, damit der Blur keine Kanten sichtbar macht */
	filter: blur(6px);
	transform: scale(1.03);
}
/* Startscreen: niemals Blur auf dem Video, auch wenn Klassen togglen sollten */
html[data-screen="title"] .bg .bg-video {
	filter: none !important;
	transform: none !important;
}

/* Frame-internes Hintergrundbild (skaliert mit dem 1080x1920-Frame) */
.frame-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: transparent;
	pointer-events: none; /* darf keine Klicks abfangen */
}
.frame-bg.bg-start {
	background-image: none;
}

/* Fixed frame that scales proportionally and stays centered */
#frame-wrapper {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 1;
}

#frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--frame-w);
	height: var(--frame-h);
	transform: translate(-50%, -50%) scale(var(--scale));
	transform-origin: center center;
	box-shadow: none;
	will-change: transform;
}

.screen {
	position: absolute;
	inset: 0;
	padding: 64px 64px 96px;
	display: none;
	background: transparent; /* Hintergrund durchscheinen lassen */
	z-index: 1; /* über Frame-Background */
}
.screen[data-active] { display: block; }

.title-hero {
	position: absolute;
	top: 200px; /* Abstand von oben im 1080x1920-Frame */
	left: 0;
	right: 0;
	transform: none;
	margin: 0;
	text-align: center;
	font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 600; /* Semibold */
	font-size: 213.06px;
	line-height: 1;
	letter-spacing: .01em;
	/* dezenter Glow statt Schlagschatten */
	text-shadow: 0 0 16px rgba(100,189,255,.35), 0 0 32px rgba(50,140,255,.22);
}
.btn-letsplay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 82px; /* Abstand zum unteren Rand */
	margin: 0 auto; /* ohne translate zentrieren */
	width: 505px;
	height: 150px;
	min-width: 0;
	padding: 0;
	display: grid;
	place-items: center;
	font-size: 64px;
	font-weight: 700;
	letter-spacing: .005em;
	border-radius: 0;
	background: linear-gradient(139deg, #01bbdb, #0c83d2);
}
.btn-letsplay:active {
	filter: brightness(.98); /* kein translate auf Buttons */
}

.home-title {
	position: absolute;
	top: 150px;
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 600; /* Semibold */
	font-size: 145.83px;
	line-height: 150px; /* Zeilenabstand */
	letter-spacing: .005em;
	/* dezenter Glow auf Titel */
	text-shadow: 0 0 14px rgba(100,189,255,.28), 0 0 28px rgba(50,140,255,.18);
}
.home-sub {
	position: absolute;
	top: 697px; /* absolut zum oberen Rand wie gewünscht */
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 300; /* Light */
	font-size: 54.17px;
	line-height: 70.83px;
}
.home-sub .medium { font-weight: 500; }
.home-sub sup {
	line-height: 0;
	vertical-align: super;
	font-size: 0.75em;
}
.btn-home-start {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 105px;
	margin: 0 auto;
	display: grid;
	place-items: center;
}

/* So funktioniert's */
.home-how-title {
	position: absolute;
	top: 1120px; /* absoluter Abstand */
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center; /* mittelaxial */
	font-weight: 600; /* Semibold */
	font-size: 54.17px;
	/* dezenter Glow auf Untertitel */
	text-shadow: 0 0 10px rgba(100,189,255,.22), 0 0 20px rgba(50,140,255,.14);
}
.how-list {
	position: absolute;
	top: 1224px; /* unterhalb der Überschrift */
	left: 95px; /* Abstand zum linken Rand */
	right: 96px;
	display: grid;
	gap: 24px;
}
.how-step {
	display: grid;
	grid-template-columns: 75px 1fr; /* Kreisbreite */
	column-gap: 28px; /* Abstand Kreis → Text */
	align-items: center;
}
.badge {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #44ade2; /* gewünschte Farbe */
	box-shadow: none; /* kein Schlagschatten */
	font-weight: 700;
	font-family: "Gotham", "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 40px; /* passend zur kleineren Fläche */
}
.how-text {
	font-weight: 300; /* Light */
	font-size: 54.17px;
	line-height: 70.83px;
}

/* Standard-CTA-Buttons (überall außer Let's Play) */
button {
    border-width:0;
}

.btn-cta {
	width: 470px;
	height: 101px;
	font-size: 54.17px;
	font-weight: 700;
	display: grid;
	place-items: center;
}
.btn-cta.btn-home-start {
	font-size: 54px; /* etwas kleiner für SPIEL WÄHLEN */
	letter-spacing: .005em;
}

/* Lose-Screen Typografie und Button */
.lose-title {
	position: absolute;
	top: 366px;
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 600; /* Semibold */
	font-size: 170.83px;
	line-height: 187.5px;
	/* dezenter Glow */
	text-shadow: 0 0 14px rgba(100,189,255,.28), 0 0 28px rgba(50,140,255,.18);
}
.lose-sub {
	position: absolute;
	top: 1170px;
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 300; /* Light */
	font-size: 54.17px;
	line-height: 70.83px;
}
.btn-tryagain {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 105px; /* wie Spiel wählen */
	margin: 0 auto;
	width: 590px;
	height: 100px;
    font-size: 54.17px !important;
	display: grid;
	place-items: center;
}

.btn-win-cta { bottom: 250px; 
text-decoration:none;}

/* Win-Screen Typografie */
.win-title {
	position: absolute;
	top: 242px;
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 600; /* Semibold */
	font-size: 208.33px;
	line-height: 229.17px;
	/* dezenter Glow */
	text-shadow: 0 0 16px rgba(100,189,255,.32), 0 0 32px rgba(50,140,255,.2);
}
.win-sub {
	position: absolute;
	top: 968px;
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 300; /* Light */
	font-size: 54.17px;
	line-height: 70.83px;
}

/* Lose-Better Screen */
.lose2-title {
	position: absolute;
	top: 295px;
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 600; /* Semibold */
	font-size: 170.83px;
	line-height: 187.5px;
	/* dezenter Glow */
	text-shadow: 0 0 14px rgba(100,189,255,.28), 0 0 28px rgba(50,140,255,.18);
}
.lose2-sub {
	position: absolute;
	top: 968px;
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 300; /* Light */
	font-size: 54.17px;
	line-height: 70.83px;
}
.contest-title {
	position: absolute;
	top: 400px;
	left: 64px;
	right: 64px;
	margin: 0;
	text-align: center;
	font-weight: 600;
	font-size: 135px;
	line-height: 1.12;
	text-shadow: 0 0 14px rgba(100,189,255,.28), 0 0 28px rgba(50,140,255,.18);
}
.contest-actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 300px;
	display: grid;
	justify-items: center;
	gap: 40px;
}
.btn-contest-choice {
	width: 590px;
	height: 100px;
	font-size: 54.17px !important;
	display: grid;
	place-items: center;
}
.title-xl {
	font-weight: 800;
	font-size: 96px;
	line-height: 1.05;
	margin: 0 0 16px;
	text-wrap: balance;
	/* dezenter Glow */
	text-shadow: 0 0 14px rgba(100,189,255,.28), 0 0 28px rgba(50,140,255,.18);
}
.title-lg {
	font-weight: 800;
	font-size: 72px;
	line-height: 1.05;
	margin: 0 0 24px;
	text-wrap: balance;
	/* dezenter Glow */
	text-shadow: 0 0 12px rgba(100,189,255,.26), 0 0 24px rgba(50,140,255,.16);
}
.lead {
	font-size: 36px;
	line-height: 1.35;
	max-width: 800px;
}
.lead.centered { text-align: center; margin-left: auto; margin-right: auto; }

.stack {
	display: flex;
	flex-direction: column;
	gap: 32px;
	height: 100%;
}
.stack.center { align-items: center; justify-content: center; text-align: center; }
.stack-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: center; }

.btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-weight: 700;
	font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .01em; /* etwas reduziertes Tracking */
	border-radius: 0; /* spitze Ecken */
	padding: 20px 28px;
	min-width: 320px;
	color: var(--white);
	transition: transform .06s ease, filter .12s ease, box-shadow .12s ease, background-color .35s ease, color .35s ease, background .35s ease;
	/* sanftes Pulsieren */
	animation: btn-pulse 4.2s ease-in-out infinite;
	will-change: transform, filter;
	
	font-size: 69.53px; /* globale Button-Schriftgröße */
}
.btn.small { padding: 10px 16px; min-width: 0; font-weight: 700; box-shadow: none; font-size: 36px; }
.btn:active { filter: brightness(.98); } /* keine Translates auf Buttons */
.btn-primary {
	background: linear-gradient(139deg, #01bbdb, #0c83d2);
}
.btn-accent {
	background: linear-gradient(139deg, #01bbdb, #0c83d2);
}
.btn-ghost {
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(6px);
}
.btn:hover {
	background: #ffffff;
	color: #144198;
	filter: none;
	animation-play-state: paused; /* Pulsieren pausieren, solange Hover aktiv */
	transform: scale(1); /* Puls-Scale neutralisieren im Hover */
}

/* explizit auf Start-/CTA-Buttons anwenden */
.btn-letsplay,
.btn-home-start,
.btn-tryagain,
.btn-win-cta,
.btn-cta {
	/* stärkere, gut sichtbare Pulsvariante für CTAs */
	animation: btn-pulse-cta 4.2s ease-in-out infinite;
	will-change: transform, filter;
}
.btn-letsplay:hover,
.btn-home-start:hover,
.btn-tryagain:hover,
.btn-win-cta:hover,
.btn-cta:hover {
	background: #ffffff;
	color: #144198;
	transform: scale(1);
}

@keyframes btn-pulse {
	0% { filter: brightness(1); transform: scale(1); }
	50% { filter: brightness(1.18); transform: scale(1.045); }
	100% { filter: brightness(1); transform: scale(1); }
}
@keyframes btn-pulse-cta {
	0% { filter: brightness(1); transform: scale(1); }
	50% { filter: brightness(1.22); transform: scale(1.055); }
	100% { filter: brightness(1); transform: scale(1); }
}

.mode-buttons { display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* Sprachswitch (nur im Startscreen sichtbar, dort positioniert) */
.lang-switch {
	position: absolute;
	top: 48px;
	right: 64px;
	font-size: 50px;
	line-height: 1;
	user-select: none;
}
.lang-switch .sep { opacity: .9; margin: 0 8px; }
.lang-option {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--white);
	cursor: pointer;
	font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 40px;
	font-weight: 300; /* Light */
	padding: 0;
}
.lang-option.is-active { font-weight: 700; } /* aktives in Bold */
.lang-option:focus-visible { outline: 3px solid #8bd3ff; outline-offset: 3px; }

/* EN-spezifisches Layout-Tuning nur auf dem Home-Screen: Texte 100px höher */
[data-lang="en"] #screen-home .home-sub { top: 597px; }
[data-lang="en"] #screen-home .home-how-title { top: 1020px; }
[data-lang="en"] #screen-home .how-list { top: 1124px; }

/* DE: Home-Subtext breiter + etwas kleinere Schrift → genau 5 Zeilen (unterste Zeile weg) */
html[data-lang="de"] #screen-home .home-sub {
	left: 0;
	right: 0;
	padding-left: 8px;
	padding-right: 8px;
	box-sizing: border-box;
	font-size: 48px;
	line-height: 62px;
}

/* Button-Label (außer LET’S PLAY, dort kein Wrapper) 3px nach oben rücken */
.btn .btn-label {
	position: relative;
	top: -5px;
}

/* Mode-Auswahlboxen */
.mode-box {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	height: 682px;
	overflow: visible;
}
.mode-bone { top: 606px; z-index: 1; }
.mode-membrane { top: 1140px; z-index: 2; }
.mode-box.is-active { z-index: 3; } /* angewählte Box nach vorne */
.mode-box.is-inactive { z-index: 1; }
.mode-img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 682px;
	object-fit: contain;
	pointer-events: none;
	/* noch weicheres Hover/Rollout */
	transition: transform .6s cubic-bezier(.2,.65,.2,1), opacity .6s cubic-bezier(.2,.65,.2,1), filter .6s cubic-bezier(.2,.65,.2,1), height .6s cubic-bezier(.2,.65,.2,1);
	will-change: transform, opacity, filter;
}
.mode-bone .mode-img { left: 58px; }
.mode-membrane .mode-img { left: 236px; }
.mode-img.glow {
	opacity: 0;
	filter: saturate(115%) brightness(1.05);
	/* Glow blendet schnell ein, die Skalierung startet leicht verzögert → kein sichtbarer Sprung */
	transition:
		transform .5s cubic-bezier(.2,.65,.2,1) .06s,
		opacity .18s ease-out;
	will-change: transform, opacity, filter;
}
/* Glow-Bild skaliert auf Hover, nicht das Basisbild */
.mode-box:hover .mode-img.base { transform: translateY(-50%) scale(1); }
.mode-box:hover .mode-img.glow { opacity: 1; transform: translateY(-50%) scale(1.02); }
.mode-box.is-active .mode-img.base { transform: translateY(-50%) scale(1); }
.mode-box.is-active .mode-img.glow { opacity: 1; transform: translateY(-50%) scale(1.02); }
.mode-box.is-active .btn-mode { background: #ffffff; color: #144198; }
.mode-box.is-inactive .mode-img.base { opacity: .76; transform: translateY(-50%) scale(0.98); }
.mode-box.is-inactive .mode-img.glow { opacity: 0; transform: translateY(-50%) scale(0.98); }
.btn-mode {
	position: absolute;
	top: 260px;
	left: 310px;
	font-size: 54.17px;
	transition: background-color .45s ease, color .45s ease, transform .45s cubic-bezier(.2,.65,.2,1);
}
.mode-membrane .btn-mode {
	width: 670px;
	left: 90px;
}
.mode-bone .btn-mode { width: 636px; }
.mode-box:hover .btn-mode {
	background: #ffffff;
	color: #144198;
}

/* Top bar (timer + exit) */
.topbar {
	position: absolute;
	top: 84px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center; /* mittelaxial */
	font-size: 58.33px;
	font-weight: 300; /* Light für das Wort 'Zeit:' */
	padding: 0;
	border-radius: 0;
	background: transparent; /* keine Fläche */
	box-shadow: none;
}
.time { text-shadow: none; }
.time #time-remaining { font-weight: 600; } /* Semibold für Zahlen */
.top-actions { display: none; }

/* Memory grid */
.grid {
	position: absolute;
	top: 340px; /* Abstand nach oben */
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: repeat(3, 309px); /* fixe Kartengröße */
	grid-auto-rows: 309px;
	justify-content: center; /* mittig platzieren */
	gap: 20px; /* Abstand zwischen Karten */
	background: transparent; /* Board ohne eigene Fläche */
}

.card {
	position: relative;
	perspective: 1200px;
	width: 309px;
	height: 309px;
	background: transparent;
}
.card-inner {
	position: absolute;
	inset: 0;
	border-radius: 0; /* keine abgerundeten Ecken */
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg);
	transition: transform .55s cubic-bezier(.2,.65,.2,1);
	box-shadow: 0 14px 22px #03194e; /* Schattenfarbe wie gewünscht */
	border: 0 solid rgba(255,255,255,0); /* für animierbaren Rand */
	background: transparent;
}
/* leichte Skalierung beim Hover (nur wenn nicht bereits geflippt oder gematcht) */
.card:not(.is-flipped):not(.is-matched):hover .card-inner {
	transform: scale(1.03);
}
.card.is-flipped .card-inner { 
	transform: rotateX(2deg) rotateY(180deg); /* realistischer Flip mit leichter Perspektive */
}
.card.is-matched .card-inner {
	transform: rotateX(2deg) rotateY(180deg) scale(1); /* Endposition: keine Z-Drehung, Originalgröße */
}
.card.just-matched { z-index: 10; }
.card.just-matched .card-inner {
	animation: match-pop .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes match-pop {
	0% {
		transform: rotateX(2deg) rotateY(180deg) scale(1);
		box-shadow: 0 14px 22px #03194e, 0 0 0 rgba(4,192,254,0), inset 0 0 0 rgba(4,192,254,0);
		border-width: 0px;
		border-color: rgba(255,255,255,0);
	}
	20% {
		/* früher, leichter Glow schon während des Scalings */
		transform: rotateX(2deg) rotateY(180deg) rotateZ(var(--pop-rotz, 4deg)) scale(1.12);
		box-shadow: 0 14px 22px #03194e,
			0 0 14px rgba(4,192,254,.65),
			0 0 36px rgba(4,192,254,.45),
			inset 0 0 14px rgba(4,192,254,.6);
		border-width: 3px;
		border-color: #ffffff;
	}
	45% {
		/* 309 -> 380px entspricht ~1.23 */
		transform: rotateX(2deg) rotateY(180deg) rotateZ(var(--pop-rotz, 6deg)) scale(1.23); /* zufällige Z-Drehung am Peak */
		box-shadow: 0 14px 22px #03194e,
			0 0 24px rgba(4,192,254,.9),
			0 0 64px rgba(4,192,254,.6),
			inset 0 0 24px rgba(4,192,254,.9);
		border-width: 6px;
		border-color: #ffffff;
	}
	100% {
		transform: rotateX(2deg) rotateY(180deg) scale(1); /* zurück zur Startgröße ohne Drehung */
		box-shadow: 0 14px 22px #03194e, 0 0 0 rgba(4,192,254,0), inset 0 0 0 rgba(4,192,254,0);
		border-width: 0px;
		border-color: rgba(255,255,255,0);
	}
}

.card-face {
	position: absolute;
	inset: 0;
	border-radius: 0; /* keine abgerundeten Ecken */
	backface-visibility: hidden;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 120px;
	background: transparent;
}
.card-face.front {
	background: url("./img/cardtop.jpg.png") center / cover no-repeat; /* Vorderseite mit 175 */
}
.card-face.front::after {
	content: none; /* keine überlagerte Zahl mehr */
}
.card-face.back {
	transform: rotateY(180deg);
	background: transparent; /* Bild übernimmt */
	color: #101213;
	text-shadow: none;
}

/* Token-spezifische Rückseitenfarben: A und C grün */
.card[data-token="A"] .card-face.back,
.card[data-token="a"] .card-face.back,
.card[data-token="C"] .card-face.back,
.card[data-token="c"] .card-face.back {
	background: linear-gradient(145deg, #34d399, #10b981);
	color: #0b1d12;
}

/* Bildfüllung für Motivkarten */
.card-face.back img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Utility when the grid must preserve square cards inside fixed frame */
.grid::before {
	content: "";
	display: none;
}

/* Accessibility focus */
button:focus-visible {
	outline: 3px solid #8bd3ff;
	outline-offset: 2px;
}

/* Small helper when we render text placeholders in the back face */
.token {
	font-size: 104px;
}

/* ---------- Screen-Flash und Entrance Animations ---------- */
.screen-flash {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,1);
	opacity: 0;
	pointer-events: none;
	z-index: 3; /* über Screens */
}
.screen-flash.is-active {
	animation: flash-blink .7s ease-out both;
}
@keyframes flash-blink {
	0% { opacity: 0; }
	20% { opacity: .6; }
	100% { opacity: 0; }
}

/* Basisklassen für gestaffelte Entrance-Animation */
.enter-hidden {
	opacity: 0;
	transform: translateY(18px);
}
.enter-show {
	animation: enter-up var(--dur, .6s) cubic-bezier(.2,.65,.2,1) var(--delay, 0s) both;
}
@keyframes enter-up {
	from { opacity: 0; transform: translateY(18px) scale(var(--scale-in, 1)); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}