/* Trulla Universum – gemeinsame Styles für die Spielecke (Phase 1). */

.trulla-wallet {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var( --wp--preset--color--creme, #fff8ee );
	border: 2px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-wallet__icon {
	font-size: 1.3em;
}

.trulla-game {
	max-width: 480px;
	margin: 1.5rem auto;
	padding: 1.25rem;
	background: var( --wp--preset--color--creme, #fff8ee );
	border-radius: 20px;
	box-shadow: 0 4px 16px rgba( 26, 58, 143, 0.12 );
	text-align: center;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.trulla-game__status {
	min-height: 1.6em;
	margin: 0 0 1rem;
	font-weight: 600;
	font-size: 1.15rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-game__reward {
	display: inline-block;
	margin-top: 0.75rem;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-orange, #e8621a );
}

.trulla-game__actions {
	margin-top: 1rem;
}

.trulla-game__button {
	display: inline-block;
	border: none;
	border-radius: 999px;
	padding: 0.65em 1.4em;
	background: var( --wp--preset--color--trulla-orange, #e8621a );
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	touch-action: manipulation;
}

.trulla-game__button:hover,
.trulla-game__button:focus-visible {
	background: var( --wp--preset--color--orange-hell, #f4893a );
}

.trulla-game__button--secondary {
	background: transparent;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
}

/* Tic-Tac-Toe & Vier gewinnt: gemeinsames Raster-Grundgerüst */
.trulla-grid {
	display: grid;
	gap: 6px;
	margin: 0 auto;
	touch-action: manipulation;
}

.trulla-grid__cell {
	background: #fff;
	border: none;
	border-radius: 10px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 4px;
}

.trulla-grid__cell:disabled {
	cursor: default;
}

.trulla-grid__cell img {
	width: 78%;
	height: 78%;
	object-fit: contain;
}

.trulla-game__title {
	margin: 0 0 0.15em;
	font-family: "Rum Raisin", "Andika", sans-serif;
	font-size: 1.5rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-game__subtitle {
	margin: 0 0 1rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	opacity: 0.8;
}

.trulla-game__alter {
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	color: var( --wp--preset--color--ink-soft, #5b6288 );
	text-align: center;
	margin: -0.5rem 0 0.75rem;
}

/* Trulla & Torti flankieren das Spielfeld bei Tic-Tac-Toe/Vier gewinnt,
   wie in der ursprünglichen Optik-Vorlage. */
.trulla-charakter-reihe {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0.4rem;
}

/* Ohne dies bleibt das Grid als Flex-Kind auf seiner Content-Mindestgröße
   hängen (die leeren Zellen mit minmax(0,1fr) geben ihm sonst keine
   eigene Breite) und wirkt winzig statt bis max-width zu wachsen. */
.trulla-charakter-reihe .trulla-grid {
	flex: 1 1 0%;
	min-width: 0;
}

.trulla-charakter {
	flex: 0 0 auto;
	width: 60px;
	height: auto;
	display: block;
	filter: drop-shadow( 0 3px 4px rgba( 0, 0, 0, 0.2 ) );
}

@media ( max-width: 400px ) {
	.trulla-charakter {
		width: 42px;
	}
}

.trulla-tic-tac-toe .trulla-grid {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	max-width: 300px;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	padding: 8px;
	border-radius: 16px;
}

.trulla-tic-tac-toe .trulla-grid__cell {
	background: var( --wp--preset--color--creme, #fff8ee );
}

.trulla-vier-gewinnt .trulla-grid {
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	max-width: 490px;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	padding: 10px;
	border-radius: 16px;
}

.trulla-vier-gewinnt .trulla-grid__cell {
	background: var( --wp--preset--color--creme, #fff8ee );
	border-radius: 999px;
	padding: 2px;
}

/* Die Spielsteine (Stern/Zahn) füllen ihr Feld fast komplett aus, statt
   wie X/O bei Tic-Tac-Toe kleiner zu wirken. */
.trulla-vier-gewinnt .trulla-grid__cell img {
	width: 94%;
	height: 94%;
}

/* Zweifarbiger Titel wie auf den Spielbrett-Vorlagen ("TRULLA gegen
   Torti", "VIER gewinnt"): erstes Wort orange, Rest blau. */
.trulla-game__title-a {
	color: var( --wp--preset--color--trulla-orange, #e8621a );
}

.trulla-game__title-b {
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

/* Sanfter Himmel-Hintergrund mit Sternen-Punkten, angelehnt an die
   Spielbrett-Vorlagen aus Dropbox/Spielecke (Tic tac toe/Vier gewinnt
   Spielbrett.png). Nur für diese beiden Spiele, die anderen behalten
   den schlichten Creme-Hintergrund. */
.trulla-tic-tac-toe,
.trulla-vier-gewinnt {
	position: relative;
	overflow: hidden;
	background: linear-gradient( 180deg, #cfe6ff 0%, #eaf3ff 55%, var( --wp--preset--color--creme, #fff8ee ) 100% );
}

.trulla-tic-tac-toe::before,
.trulla-vier-gewinnt::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient( circle, #fff 1px, transparent 1.5px ),
		radial-gradient( circle, #fff 1px, transparent 1.5px );
	background-size: 60px 60px, 90px 90px;
	background-position: 0 0, 30px 40px;
	opacity: 0.6;
	pointer-events: none;
}

.trulla-tic-tac-toe > *,
.trulla-vier-gewinnt > * {
	position: relative;
	z-index: 1;
}

/* Trullas Zahlenzauber */
.trulla-zahlenzauber .trulla-grid {
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	max-width: 420px;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	padding: 8px;
	border-radius: 16px;
}

.trulla-zahlenzauber .trulla-grid__cell {
	background: var( --wp--preset--color--creme, #fff8ee );
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: clamp( 1rem, 4vw, 1.4rem );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-zahlenzauber .trulla-grid__cell.is-selected {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	color: #fff;
}

/* Kurze Erklärung mit Beispiel-Raster: zeigt an vier fest zugeordneten
   Zahlenpaaren, welche Verbindungen zählen (waagerecht/senkrecht/
   diagonal/zeilenübergreifend). Rein informativ, nicht klickbar. */
.trulla-zahlenzauber__erklaerung {
	max-width: 420px;
	margin: 0 auto 1.25rem;
	text-align: left;
}

.trulla-zahlenzauber__erklaerung-text {
	margin: 0 0 0.75rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	font-size: 0.92rem;
}

.trulla-zahlenzauber__demo-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 4px;
	max-width: 260px;
	margin: 0 auto 0.85rem;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	padding: 6px;
	border-radius: 12px;
}

.trulla-zahlenzauber__demo-zelle {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	background: var( --wp--preset--color--creme, #fff8ee );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-zahlenzauber__demo-zelle.is-demo-waagerecht {
	background: var( --wp--preset--color--trulla-orange, #e8621a );
	color: #fff;
	animation: trulla-zz-demo-puls 6s ease-in-out infinite;
	animation-delay: 0s;
}

.trulla-zahlenzauber__demo-zelle.is-demo-senkrecht {
	background: #1e9e75;
	color: #fff;
	animation: trulla-zz-demo-puls 6s ease-in-out infinite;
	animation-delay: 1.5s;
}

.trulla-zahlenzauber__demo-zelle.is-demo-diagonal {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	color: #fff;
	animation: trulla-zz-demo-puls 6s ease-in-out infinite;
	animation-delay: 3s;
}

.trulla-zahlenzauber__demo-zelle.is-demo-wrap {
	background: #c0398e;
	color: #fff;
	animation: trulla-zz-demo-puls 6s ease-in-out infinite;
	animation-delay: 4.5s;
}

@keyframes trulla-zz-demo-puls {
	0%, 8%, 100% {
		transform: scale( 1 );
		box-shadow: none;
	}
	4% {
		transform: scale( 1.14 );
		box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.25 );
	}
}

.trulla-zahlenzauber__legende {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	font-size: 0.82rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-zahlenzauber__legende li {
	position: relative;
	padding-left: 1.2em;
}

.trulla-zahlenzauber__legende li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 0.8em;
	height: 0.8em;
	border-radius: 4px;
}

.trulla-zahlenzauber__legende li.is-demo-waagerecht::before {
	background: var( --wp--preset--color--trulla-orange, #e8621a );
}

.trulla-zahlenzauber__legende li.is-demo-senkrecht::before {
	background: #1e9e75;
}

.trulla-zahlenzauber__legende li.is-demo-diagonal::before {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
}

.trulla-zahlenzauber__legende li.is-demo-wrap::before {
	background: #c0398e;
}

@media ( prefers-reduced-motion: reduce ) {
	.trulla-zahlenzauber__demo-zelle {
		animation: none !important;
	}
}

.trulla-zahlenzauber__rest {
	display: inline-block;
	margin-top: 1rem;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.5em 1.2em;
	font-weight: 700;
}

/* Schattenspiel */
.trulla-schattenspiel__ziel {
	max-width: 220px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 1.25rem;
	background: var( --wp--preset--color--creme, #fff8ee );
	border: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	box-sizing: border-box;
}

.trulla-schattenspiel__ziel img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.trulla-schattenspiel__optionen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
	gap: 0.75rem;
	max-width: 520px;
	margin: 0 auto;
}

.trulla-schattenspiel__option {
	aspect-ratio: 1 / 1;
	border: 3px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: var( --wp--preset--color--creme, #fff8ee );
	border-radius: 14px;
	padding: 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.trulla-schattenspiel__option img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness( 0 );
	opacity: 0.82;
}

.trulla-schattenspiel__option:hover {
	transform: scale( 1.04 );
}

.trulla-schattenspiel__option.is-richtig {
	border-color: var( --wp--preset--color--trulla-gold, #f5c842 );
	background: #fff7d6;
}

.trulla-schattenspiel__option.is-richtig img {
	filter: none;
	opacity: 1;
}

.trulla-schattenspiel__option.is-falsch {
	border-color: #d9534f;
	animation: trulla-schatten-wackeln 0.4s ease;
}

@keyframes trulla-schatten-wackeln {
	0%, 100% { transform: translateX( 0 ); }
	25% { transform: translateX( -6px ); }
	75% { transform: translateX( 6px ); }
}

.trulla-schattenspiel__serie {
	text-align: center;
	margin-top: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

/* Baumquiz – Baum-/Rinden-/Blatt-Ausschnitte werden per Hintergrundposition
   aus Sammelbildern herausgeschnitten (background-image/-size/-position
   werden in baumquiz.js pro Runde berechnet, je nachdem welche Sammeltafel
   und Zelle gerade dran ist – zwei Sammeltafeln im Einsatz: die ursprüngliche
   Blätter-Sammeltafel (4x2, nur Blatt, 8 Baumarten) und die neue "Bäume –
   Rinde – Blätter"-Tafel (1 Spalte Baumart-Text + 3 Bildspalten x 8 Reihen,
   weitere 8 Baumarten, alle drei Fragetypen). */
.trulla-baumquiz__bild {
	width: 220px;
	height: 200px;
	margin: 0 auto 1.25rem;
	border: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--creme, #fff8ee );
	background-repeat: no-repeat;
	box-sizing: border-box;
}

.trulla-baumquiz__optionen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 0.6rem;
	max-width: 480px;
	margin: 0 auto;
}

.trulla-baumquiz__option {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.6em 1em;
	font-weight: 700;
	cursor: pointer;
}

.trulla-baumquiz__option.is-richtig {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	border-color: var( --wp--preset--color--trulla-gold, #f5c842 );
	color: #fff;
}

.trulla-baumquiz__option.is-falsch {
	border-color: #d9534f;
	animation: trulla-schatten-wackeln 0.4s ease;
}

.trulla-baumquiz__serie {
	text-align: center;
	margin-top: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

/* Spurenspiel – zeigt nur den rechten Bildstreifen (dort liegen die
   Pfotenabdrücke im Originalmotiv) per Hintergrundposition/-zoom. Da
   jedes Tierbild eine eigene Datei ist (kein gemeinsames Sammelbild),
   reicht eine einheitliche Zuschnittregel für alle 16 Tiere. */
/* Zuschnitt kalibriert auf die neuen Spur-Motive (einheitlich 1448x1086,
   Pfotenabdrücke im Bereich x:65-97%, y:10-95%). */
.trulla-spurenspiel__spur {
	width: 170px;
	height: 340px;
	margin: 0 auto 1.25rem;
	border: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--creme, #fff8ee );
	background-repeat: no-repeat;
	background-size: 531px 399px;
	background-position: -345px -40px;
	box-sizing: border-box;
}

.trulla-spurenspiel__optionen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
	gap: 0.75rem;
	max-width: 520px;
	margin: 0 auto;
}

.trulla-spurenspiel__option {
	border: 3px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: var( --wp--preset--color--creme, #fff8ee );
	border-radius: 14px;
	padding: 0.5rem;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	transition: transform 0.15s ease;
}

.trulla-spurenspiel__option img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Für Katze/Hund (kein eigenes Schattenspiel-Bild): zeigt per
   CSS-Hintergrundposition nur den linken Tier-Ausschnitt aus dem
   1448x1086-Spur-Motiv, ohne die Pfotenabdrücke rechts. */
.trulla-spurenspiel__option-bild {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var( --wp--preset--color--creme, #fff8ee );
	background-repeat: no-repeat;
	background-size: 164.5% 123.4%;
	background-position: 3.5% 29.1%;
	border-radius: 8px;
}

.trulla-spurenspiel__name {
	font-weight: 700;
	font-size: 0.85rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-spurenspiel__option:hover {
	transform: scale( 1.04 );
}

.trulla-spurenspiel__option.is-richtig {
	border-color: var( --wp--preset--color--trulla-gold, #f5c842 );
	background: #fff7d6;
}

.trulla-spurenspiel__option.is-falsch {
	border-color: #d9534f;
	animation: trulla-schatten-wackeln 0.4s ease;
}

.trulla-spurenspiel__serie {
	text-align: center;
	margin-top: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

/* Blumenquiz – Blüten-Ausschnitte werden per Hintergrundposition (in
   blumenquiz.js berechnet) aus einer von 4 Sammeltafeln (je 5 Spalten x
   2 Reihen, Originalgröße 1448x1086) herausgeschnitten – bewusst ohne
   den Namenstext darunter, sonst wäre die Antwort schon zu sehen. */
.trulla-blumenquiz__bluete {
	width: 180px;
	height: 200px;
	margin: 0 auto 1.25rem;
	border: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--creme, #fff8ee );
	background-repeat: no-repeat;
	background-size: 900px 675px;
	box-sizing: border-box;
}

.trulla-blumenquiz__optionen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 0.6rem;
	max-width: 480px;
	margin: 0 auto;
}

.trulla-blumenquiz__option {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.6em 1em;
	font-weight: 700;
	cursor: pointer;
}

.trulla-blumenquiz__option.is-richtig {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	border-color: var( --wp--preset--color--trulla-gold, #f5c842 );
	color: #fff;
}

.trulla-blumenquiz__option.is-falsch {
	border-color: #d9534f;
	animation: trulla-schatten-wackeln 0.4s ease;
}

.trulla-blumenquiz__serie {
	text-align: center;
	margin-top: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

/* Mamas Kunstatelier – rein informative Projektseiten, kein Feenstaub,
   kein JS. Nur ein kleiner Stufen-Badge zur Einordnung. */
.trulla-atelier-stufe {
	display: inline-block;
	border-radius: 999px;
	padding: 0.35em 1em;
	font-weight: 700;
}

.trulla-atelier-stufe--1 {
	background: #e3f5e1;
	color: #2f7a3d;
}

.trulla-atelier-stufe--2 {
	background: #fff3d0;
	color: #8a6400;
}

.trulla-atelier-stufe--3 {
	background: #dcebff;
	color: #1a3a8f;
}

/* Meine Zahnfee – Feen-Marktplatz */
.trulla-zahnfee-seite {
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem;
	text-align: center;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.trulla-zahnfee-titel {
	font-family: "Rum Raisin", "Andika", sans-serif;
	font-size: 2rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	margin: 0 0 0.3em;
}

.trulla-zahnfee-untertitel {
	margin: 0 0 1rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	opacity: 0.85;
}

.trulla-zahnfee-seite .trulla-wallet {
	margin-bottom: 1.5rem;
}

/* Zahnfee-Welt ist der Oberbegriff; "Meine Zahnfee" (dieser Marktplatz)
   und "Feen-Namen-Generator" sind die beiden Unterbereiche darin. */
.trulla-zahnfee__unterbereiche {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	flex-wrap: wrap;
}

.trulla-zahnfee__unterbereich {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.35em 1em;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	text-decoration: none;
	background: #fff;
}

.trulla-zahnfee__unterbereich.is-aktiv {
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: #fff;
}

.trulla-zahnfee-marktplatz {
	max-width: 900px;
	margin: 0 auto;
}

/* Kartenvorschau – Hintergrund, Fee und Rahmen übereinandergelegt. */
.trulla-zahnfee__vorschau {
	position: relative;
	width: 220px;
	aspect-ratio: 3 / 4;
	margin: 0 auto 1.25rem;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

.trulla-zahnfee__vorschau-hg,
.trulla-zahnfee__vorschau-fee,
.trulla-zahnfee__vorschau-rahmen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.trulla-zahnfee__vorschau-hg {
	object-fit: cover;
}

.trulla-zahnfee__vorschau-fee {
	object-fit: contain;
	padding: 14%;
	box-sizing: border-box;
}

.trulla-zahnfee__vorschau-rahmen {
	object-fit: fill;
	pointer-events: none;
}

/* Basic-Rahmen sind innerhalb ihrer eigenen Bilddatei kleiner gezeichnet
   als die teureren Rahmen-Stufen (viel Leerraum drumherum) und wirken
   dadurch beim Strecken wie ein kleines Fenster statt wie ein echter
   Rahmen um die Karte. Per Pixel-Analyse vermessen und herausgezoomt. */
.trulla-zahnfee__vorschau-rahmen--basic {
	transform: scale( 1.14, 1.24 );
}

.trulla-zahnfee__vorschau-platzhalter {
	position: relative;
	z-index: 1;
	background: rgba( 255, 255, 255, 0.85 );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.3em 0.9em;
	font-weight: 700;
	font-size: 0.8rem;
}

.trulla-zahnfee__download-button {
	display: block;
	margin: 0 auto 1rem;
	border: none;
	border-radius: 999px;
	padding: 0.6em 1.4em;
	background: var( --wp--preset--color--trulla-orange, #e8621a );
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.trulla-zahnfee__download-button:disabled {
	background: #ccc;
	cursor: default;
}

/* Typ-Auswahl (Feen/Rahmen/Hintergründe) */
.trulla-zahnfee__typ-tabs {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.trulla-zahnfee__tab-button {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.4em 1em;
	font-weight: 600;
	cursor: pointer;
}

.trulla-zahnfee__tab-button.is-active {
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: #fff;
}

/* Stufen-Unterauswahl innerhalb von Feen/Rahmen */
.trulla-zahnfee__stufe-tabs {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.trulla-zahnfee__stufe-tabs[hidden] {
	display: none;
}

.trulla-zahnfee__stufe-button {
	border: 2px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	background: #fff;
	color: var( --wp--preset--color--trulla-orange, #e8621a );
	border-radius: 999px;
	padding: 0.3em 0.8em;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}

.trulla-zahnfee__stufe-button.is-active {
	background: var( --wp--preset--color--trulla-orange, #e8621a );
	color: #fff;
}

.trulla-zahnfee__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 1rem;
}

.trulla-zahnfee__karte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.trulla-zahnfee__rahmen-box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var( --wp--preset--color--creme, #fff8ee );
	border-radius: 10px;
	overflow: hidden;
}

.trulla-zahnfee__bild {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8%;
	box-sizing: border-box;
}

.trulla-zahnfee__karte.is-ausgewaehlt .trulla-zahnfee__rahmen-box {
	box-shadow: inset 0 0 0 3px var( --wp--preset--color--trulla-gold, #f5c842 );
}

.trulla-zahnfee__rahmen-box--leer {
	border: 2px dashed #ccc;
}

.trulla-zahnfee__kein-rahmen-symbol {
	font-size: 2rem;
	opacity: 0.5;
}

.trulla-zahnfee__karte.is-gesperrt .trulla-zahnfee__bild {
	filter: grayscale( 1 ) brightness( 0.75 );
}

.trulla-zahnfee__schloss,
.trulla-zahnfee__haken {
	position: absolute;
	top: 6%;
	right: 8%;
	font-size: 1.3rem;
	filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, 0.4 ) );
}

.trulla-zahnfee__haken {
	color: var( --wp--preset--color--trulla-gold, #f5c842 );
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	width: 1.4em;
	height: 1.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

.trulla-zahnfee__name {
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	text-align: center;
	font-size: 0.9rem;
}

.trulla-zahnfee__preis {
	display: inline-block;
	border: 2px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	background: #fff;
	color: var( --wp--preset--color--trulla-orange, #e8621a );
	border-radius: 999px;
	padding: 0.2em 0.8em;
	font-weight: 700;
	font-size: 0.85rem;
}

.trulla-zahnfee__preis--frei {
	border-color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

/* Schwierigkeitsauswahl (Tic-Tac-Toe & Vier gewinnt), gleiche Optik wie
   die Stufen-Buttons beim Memory. */
.trulla-schwierigkeit,
.trulla-modus {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.trulla-schwierigkeit__button,
.trulla-modus__button {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.4em 1em;
	font-weight: 600;
	cursor: pointer;
}

.trulla-schwierigkeit__button.is-active,
.trulla-modus__button.is-active {
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: #fff;
}

.trulla-scoreboard {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	margin-top: 1rem;
	background: #fff;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.5em 1.2em;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-scoreboard__divider {
	opacity: 0.5;
}

.trulla-scoreboard__score {
	color: var( --wp--preset--color--trulla-orange, #e8621a );
}

/* Memory */
.trulla-memory__stufen {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.trulla-memory__stufe-button {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.4em 1em;
	font-weight: 600;
	cursor: pointer;
}

.trulla-memory__stufe-button.is-active {
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: #fff;
}

.trulla-memory__grid {
	display: grid;
	gap: 6px;
	margin: 0 auto;
}

.trulla-memory__card {
	aspect-ratio: 3 / 4;
	border: none;
	border-radius: 10px;
	background-color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	background-size: cover;
	background-position: center;
	cursor: pointer;
	font-size: clamp( 1.2rem, 4vw, 2rem );
	display: flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	padding: 0;
	overflow: hidden;
}

.trulla-memory__card.is-flipped,
.trulla-memory__card.is-matched {
	background-color: #fff;
	color: initial;
	box-shadow: inset 0 0 0 2px var( --wp--preset--color--trulla-gold, #f5c842 );
}

.trulla-memory__bild {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.trulla-memory__card.is-matched {
	opacity: 0.55;
}

.trulla-memory__card:disabled {
	cursor: default;
}

.trulla-memory__statusleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.trulla-memory__pill {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-weight: 700;
}

@media ( max-width: 480px ) {
	.trulla-game {
		padding: 1rem 0.75rem;
	}
}

/* Zahnexpress */
.trulla-zahnexpress {
	max-width: 900px;
	padding: 0;
	overflow: hidden;
}

.ze-screen {
	display: none;
	padding: 1.5rem 1.25rem;
	text-align: center;
}

.ze-screen.is-active {
	display: block;
}

.ze-title {
	margin: 0 0 0.1em;
	font-family: "Rum Raisin", "Andika", sans-serif;
	font-size: 1.8rem;
	color: var( --wp--preset--color--trulla-orange, #e8621a );
}

.ze-subtitle {
	margin: 0 0 0.25em;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.ze-hint {
	margin: 0 0 1rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	opacity: 0.85;
}

.ze-vehicle-preview {
	max-width: 260px;
	width: 60%;
	margin: 0.5rem auto 1rem;
	display: block;
}

.ze-info-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.ze-info-card {
	background: #eaf2ff;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 14px;
	padding: 0.6rem 0.9rem;
	min-width: 110px;
}

.ze-info-card img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.ze-info-card__label {
	display: block;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-orange, #e8621a );
	margin-top: 0.2rem;
}

.ze-info-card__desc {
	display: block;
	font-size: 0.85rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.ze-diff-auswahl {
	margin-bottom: 1rem;
}

.ze-diff-auswahl__label {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	opacity: 0.7;
}

.ze-diff-buttons {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ze-diff-button {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.4em 1.2em;
	font-weight: 600;
	cursor: pointer;
}

.ze-diff-button.is-active {
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: #fff;
}

/* Spielbildschirm */
.ze-hud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	background: var( --wp--preset--color--creme, #fff8ee );
	border-bottom: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	padding: 0.5rem 0.75rem;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	flex-wrap: wrap;
}

.ze-hud__leben {
	display: flex;
	gap: 2px;
}

.ze-hud__leben img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.ze-hud__sterne {
	color: var( --wp--preset--color--trulla-orange, #e8621a );
	white-space: nowrap;
}

.ze-hud__glitzer-wrap {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ze-hud__glitzer-bar {
	width: 80px;
	height: 12px;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.ze-hud__glitzer-fill {
	height: 100%;
	width: 0%;
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	transition: width 0.2s ease;
}

.ze-viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	touch-action: manipulation;
	cursor: pointer;
}

.ze-track {
	/* Breite/Zonenbreite werden per JS gesetzt (abhängig von der Stufe:
	   Kurz/Mittel/Lang haben unterschiedlich viele Zonen-Schritte). */
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	will-change: transform;
}

.ze-zone {
	height: 100%;
	flex: 0 0 auto;
	position: relative;
}

.ze-zone img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ze-hindernis,
.ze-collectible {
	position: absolute;
	/* deutlich über der Fahrbahnkante, damit nichts mit der Kulisse
	   verschmilzt oder am Bildrand abgeschnitten wirkt */
	bottom: 13%;
	/* Breite wird per JS als Inline-Style gesetzt (hängt von der
	   Gesamtzahl der Zonen-Schritte der aktuellen Stufe ab, siehe
	   zahnexpress.js setEntityWidth()). */
	aspect-ratio: 1 / 1;
	transform: translateX( -50% );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ze-hindernis img,
.ze-collectible img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow( 0 4px 6px rgba( 0, 0, 0, 0.25 ) );
}

/* Bodenhindernisse (Sprung nötig): Werkzeugkasten/Förderanlage/Zahnkisten
   -stapel/Sortiermaschine/Sternenschranke sitzen alle auf der Fahrbahn. */
.ze-hindernis--jump,
.ze-hindernis--block,
.ze-hindernis--moving {
	bottom: 13%;
}

/* Von der Decke hängend (Ducken nötig): Zahnscanner/Sortierarm. */
/* Deutlich länger/größer als andere Hindernisse, damit der hängende Teil
   klar sichtbar tief genug ins Bild reicht (Feedback: "hängen zu hoch,
   schlecht zu sehen"). */
.ze-hindernis--duck {
	bottom: auto;
	top: 0;
	aspect-ratio: 0.42 / 1;
}

/* Fliegt auf Kopfhöhe (nicht springen, sonst Zusammenstoß). */
.ze-hindernis--flying {
	bottom: 34%;
}

/* Durchfahrten: große, unten offene Bögen/Tunnel/Vorhänge über die volle
   Fahrbahnbreite – reine Kulisse, keine Kollisionsgefahr auf einer Spur. */
.ze-hindernis--passage,
.ze-hindernis--passage-hard {
	bottom: 0;
	aspect-ratio: 1.1 / 1;
	z-index: 1;
}

/* Schwebt höher – nur per Sprung erreichbar. */
.ze-collectible--hoch {
	bottom: 26%;
}

.ze-hindernis.is-resolved,
.ze-collectible.is-resolved {
	opacity: 0;
	pointer-events: none;
}

.ze-collectible.is-sucked {
	--ze-sog-x: 0%;
	transform: translateX( calc( -50% + var( --ze-sog-x ) ) ) scale( 0.15 );
	opacity: 0;
	transition: transform 0.35s ease-in, opacity 0.35s ease-in;
}

/* Sortierarm (Duck-Hindernis mit motion:"swing") pendelt sanft. */
.ze-hindernis--swing img {
	animation: ze-swing 1.6s ease-in-out infinite;
	transform-origin: top center;
}

@keyframes ze-swing {
	0%, 100% { transform: rotate( -6deg ); }
	50% { transform: rotate( 6deg ); }
}

/* Drehende Sternenschranke (motion:"rotate") dreht sich kontinuierlich. */
.ze-hindernis--rotate img {
	animation: ze-rotate 3.2s linear infinite;
}

@keyframes ze-rotate {
	from { transform: rotate( 0deg ); }
	to { transform: rotate( 360deg ); }
}

/* Fliegende Transportdrohne (motion:"bob") schwebt sanft auf und ab. */
.ze-hindernis--bob img {
	animation: ze-bob 2.2s ease-in-out infinite;
}

@keyframes ze-bob {
	0%, 100% { transform: translateY( 0 ); }
	50% { transform: translateY( -8% ); }
}

/* Zahnradmaschine (motion:"rotate-ring") – der äußere Ring dreht sich
   langsam, wirkt wie ein rotierendes Zahnrad-Tor. */
.ze-hindernis--rotate-ring img {
	animation: ze-rotate-ring 5s linear infinite;
}

@keyframes ze-rotate-ring {
	from { transform: rotate( 0deg ); }
	to { transform: rotate( -360deg ); }
}

.ze-vehicle {
	position: absolute;
	/* Muss zu VEHICLE_X in zahnexpress.js passen (dort in Zonen-Einheiten,
	   hier in % vom Viewport – bei einer Zone = 100% Viewportbreite sind
	   das dieselbe Zahl). */
	left: 32%;
	bottom: 6%;
	width: 20%;
	aspect-ratio: 1.5 / 1;
	transform: translateX( -50% );
	transition: bottom 0.05s linear;
	z-index: 5;
}

/* Die 3 herzförmigen Sitzpolster der Lore (Bild ist exakt 1.5:1, also
   deckt sich die Prozentangabe hier 1:1 mit der Bildposition). Ein Zahn
   pro Sitz, verblasst wenn das Leben verloren geht – die leere blaue
   Polstermulde bleibt sichtbar (kein eigenes "leer"-Bild nötig). */
.ze-vehicle-sitze {
	position: absolute;
	inset: 0;
}

.ze-vehicle-sitz {
	position: absolute;
	top: 38%;
	width: 11%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transform: translate( -50%, -50% );
	transition: opacity 0.3s ease;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.25 ) );
}

.ze-vehicle-sitz:nth-child( 1 ) {
	left: 37%;
}

.ze-vehicle-sitz:nth-child( 2 ) {
	left: 54%;
}

.ze-vehicle-sitz:nth-child( 3 ) {
	left: 71%;
}

.ze-vehicle-sitz.is-leer {
	opacity: 0;
}

.ze-vehicle > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow( 0 6px 8px rgba( 0, 0, 0, 0.3 ) );
}

.ze-vehicle.is-hit > img {
	filter: drop-shadow( 0 6px 8px rgba( 0, 0, 0, 0.3 ) ) brightness( 1.6 ) saturate( 2 );
}

/* Sprung: die Lore neigt sich leicht nach vorn, während sie in der Luft
   ist – rein optisch, die Höhe selbst steuert applyVehiclePosition(). */
.ze-vehicle.is-jumping > img {
	transform: rotate( -8deg );
}

/* Ducken: die Lore geht sichtbar in die Hocke (gestaucht), bleibt aber
   auf der Fahrbahn stehen. */
.ze-vehicle.is-ducking {
	transform: translateX( -50% ) scaleY( 0.6 );
	transform-origin: bottom center;
}

.ze-tap-hint {
	position: absolute;
	left: 50%;
	bottom: 3%;
	transform: translateX( -50% );
	background: rgba( 255, 255, 255, 0.85 );
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.3em 0.9em;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	font-size: 0.85rem;
	pointer-events: none;
}

.ze-gameover-banner {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	background: rgba( 26, 58, 143, 0.85 );
	color: #fff;
	text-align: center;
	padding: 1rem;
}

.ze-gameover-banner.is-active {
	display: flex;
}

.ze-gameover-banner__title {
	font-family: "Rum Raisin", "Andika", sans-serif;
	font-size: 1.6rem;
	color: var( --wp--preset--color--trulla-gold, #f5c842 );
	margin: 0;
}

/* Ergebnisbildschirm */
.ze-result-wrap {
	position: relative;
}

.ze-result-figur {
	max-width: 160px;
	width: 45%;
	margin: 0.5rem auto;
	display: block;
	position: relative;
	z-index: 2;
	animation: ze-kiki-winken 1.6s ease-in-out infinite;
	transform-origin: 50% 85%;
}

@keyframes ze-kiki-winken {
	0%, 100% { transform: rotate( 0deg ); }
	25% { transform: rotate( -4deg ); }
	75% { transform: rotate( 4deg ); }
}

/* Glitzerregen – mehrere Partikel mit versetztem Timing, rein CSS. */
.ze-glitzerregen {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.ze-glitzerregen span {
	position: absolute;
	top: -10%;
	font-size: 1.3rem;
	opacity: 0;
	animation: ze-glitzer-fallen 3.2s linear infinite;
}

@keyframes ze-glitzer-fallen {
	0% { transform: translateY( 0 ) rotate( 0deg ); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateY( 420% ) rotate( 200deg ); opacity: 0; }
}

.ze-glitzerregen span:nth-child(1) { left: 5%; animation-delay: 0s; }
.ze-glitzerregen span:nth-child(2) { left: 18%; animation-delay: 0.5s; font-size: 1rem; }
.ze-glitzerregen span:nth-child(3) { left: 32%; animation-delay: 1s; }
.ze-glitzerregen span:nth-child(4) { left: 48%; animation-delay: 0.3s; font-size: 0.9rem; }
.ze-glitzerregen span:nth-child(5) { left: 62%; animation-delay: 1.4s; }
.ze-glitzerregen span:nth-child(6) { left: 75%; animation-delay: 0.8s; font-size: 1.1rem; }
.ze-glitzerregen span:nth-child(7) { left: 88%; animation-delay: 1.8s; }
.ze-glitzerregen span:nth-child(8) { left: 95%; animation-delay: 0.2s; font-size: 0.85rem; }

.ze-result-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 1rem 0;
}

.ze-result-stat {
	background: #eaf2ff;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 14px;
	padding: 0.6rem 1rem;
	min-width: 90px;
}

.ze-result-stat img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.ze-result-stat__value {
	display: block;
	font-weight: 700;
	font-size: 1.3rem;
	color: var( --wp--preset--color--trulla-orange, #e8621a );
}

.ze-result-stat__label {
	display: block;
	font-size: 0.75rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	text-transform: uppercase;
}

.ze-result-glitzer-label {
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	margin-bottom: 0.3rem;
}

.ze-result-glitzer-bar {
	max-width: 320px;
	height: 20px;
	margin: 0 auto 1rem;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.ze-result-glitzer-fill {
	height: 100%;
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
}

.ze-result-reward {
	font-weight: 700;
	color: var( --wp--preset--color--trulla-orange, #e8621a );
	margin-bottom: 1rem;
}

.ze-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}

/* Feenstaub sortieren */
.trulla-feenstaub-sortieren__board {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 1rem;
	margin: 1.5rem 0;
}

.trulla-fs-jar {
	position: relative;
	width: clamp( 100px, 26vw, 150px );
	aspect-ratio: 1024 / 1536;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.trulla-fs-jar:hover:not( :disabled ) {
	transform: translateY( -3px );
}

.trulla-fs-jar.is-selected {
	transform: translateY( -10px ) scale( 1.06 );
	filter: drop-shadow( 0 8px 16px rgba( 26, 58, 143, 0.35 ) );
}

.trulla-fs-jar.is-sorted {
	filter: drop-shadow( 0 0 10px rgba( 245, 200, 66, 0.7 ) );
}

.trulla-fs-jar:disabled {
	cursor: default;
}

/* Schlichtes, gerade-wandiges Einmachglas (glasgefaess.png) – Füllbereich
 * beginnt unterhalb des Schraubgewindes/Halses (oberes Sechstel) und
 * spannt den geraden Glaskörper, unten leicht gerundet passend zum
 * Glasboden. */
.trulla-fs-jar__fill {
	position: absolute;
	left: 10%;
	right: 10%;
	top: 25%;
	bottom: 6%;
	display: flex;
	flex-direction: column-reverse;
	border-radius: 6% 6% 16% 16%;
	overflow: hidden;
	border: 2px solid rgba( 26, 58, 143, 0.3 );
}

.trulla-fs-jar__segment {
	flex: 0 0 16.6667%;
	transition: background 0.2s ease;
}

.trulla-fs-jar__segment + .trulla-fs-jar__segment {
	border-top: 2px solid rgba( 255, 255, 255, 0.65 );
}

.trulla-fs-jar__glas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

/* Sternenraten */
.trulla-sternenraten__sterne {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.4rem;
	background: var( --wp--preset--color--weiss, #fff );
	border: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 24px;
	padding: 1rem 1.2rem 0.6rem;
	margin: 0 auto 1.5rem;
	max-width: 560px;
	box-shadow: 0 8px 20px rgba( 26, 58, 143, 0.1 );
}

.trulla-sternenraten__stern-slot {
	width: clamp( 42px, 10vw, 64px );
	aspect-ratio: 200 / 226;
	position: relative;
}

.trulla-sternenraten__stern-slot img {
	width: 100%;
	height: 100%;
	display: block;
	transition: transform 0.75s cubic-bezier( 0.55, -0.2, 0.86, 0.44 ), opacity 0.75s ease-in;
}

.trulla-sternenraten__stern-slot.is-gefallen img {
	transform: translateY( 160px ) translateX( var( --drift, 0px ) ) rotate( var( --spin, 140deg ) );
	opacity: 0;
}

.trulla-sternenraten__wort {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0 0 1.5rem;
}

.trulla-sternenraten__buchstabe {
	min-width: 1.6rem;
	font-family: var( --wp--preset--font-family--plus-jakarta-sans );
	font-weight: 700;
	font-size: clamp( 1.1rem, 4vw, 1.6rem );
	text-align: center;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-bottom: 3px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	padding-bottom: 0.15rem;
}

.trulla-sternenraten__buchstabe.is-leer {
	color: transparent;
}

.trulla-sternenraten__tastatur {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.55rem;
	max-width: 680px;
	margin: 0 auto 1rem;
}

.trulla-sternenraten__taste {
	font-family: var( --wp--preset--font-family--plus-jakarta-sans );
	font-weight: 700;
	font-size: 1.15rem;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 999px;
	border: 2px solid var( --wp--preset--color--blau-hell, #7baee8 );
	background: var( --wp--preset--color--weiss, #fff );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	cursor: pointer;
	transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
}

.trulla-sternenraten__taste:hover:not( :disabled ) {
	transform: translateY( -2px );
}

.trulla-sternenraten__taste.is-richtig {
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: var( --wp--preset--color--weiss, #fff );
}

.trulla-sternenraten__taste.is-falsch {
	background: var( --wp--preset--color--hell-grau, #f4f4f2 );
	border-color: var( --wp--preset--color--hell-grau, #f4f4f2 );
	color: #999;
	text-decoration: line-through;
}

.trulla-sternenraten__taste:disabled {
	cursor: default;
	opacity: 0.7;
}

/* Trulla-Alphabet Zuordnen */
.trulla-alphabet__buchstabe {
	font-family: var( --wp--preset--font-family--rum-raisin );
	font-size: clamp( 3rem, 14vw, 5rem );
	line-height: 1;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	text-align: center;
	margin: 0.5rem 0 1.25rem;
	display: flex;
	justify-content: center;
}

.trulla-alphabet__buchstabe-bild {
	width: clamp( 140px, 34vw, 220px );
	height: clamp( 140px, 34vw, 220px );
	object-fit: contain;
}

.trulla-alphabet__auswahl {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.trulla-alphabet__karte {
	width: clamp( 90px, 24vw, 140px );
	aspect-ratio: 1 / 1;
	padding: 0.5rem;
	border-radius: 18px;
	border: 3px solid var( --wp--preset--color--blau-hell, #7baee8 );
	background: var( --wp--preset--color--weiss, #fff );
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.trulla-alphabet__karte img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.trulla-alphabet__karte-buchstabe {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var( --wp--preset--font-family--rum-raisin );
	font-size: clamp( 2rem, 8vw, 3rem );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	pointer-events: none;
}

.trulla-alphabet__karte:hover:not( :disabled ) {
	transform: translateY( -3px );
}

.trulla-alphabet__karte.is-richtig {
	border-color: var( --wp--preset--color--trulla-gold, #f5c842 );
	box-shadow: 0 0 0 4px rgba( 245, 200, 66, 0.4 );
}

.trulla-alphabet__karte.is-falsch {
	opacity: 0.35;
	border-color: var( --wp--preset--color--hell-grau, #f4f4f2 );
}

.trulla-alphabet__karte:disabled {
	cursor: default;
}

.trulla-alphabet__fortschritt {
	font-family: var( --wp--preset--font-family--plus-jakarta-sans );
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: var( --wp--preset--color--weiss, #fff );
	padding: 0.5rem 1rem;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 26, 58, 143, 0.08 );
}

.trulla-bilderraetsel__frage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0.5rem 0 1.5rem;
}

.trulla-bilderraetsel__teil {
	width: clamp( 80px, 20vw, 130px );
	height: clamp( 80px, 20vw, 130px );
	object-fit: contain;
}

.trulla-bilderraetsel__plus,
.trulla-bilderraetsel__gleich {
	font-family: var( --wp--preset--font-family--rum-raisin );
	font-size: clamp( 1.6rem, 5vw, 2.2rem );
	color: var( --wp--preset--color--orange-hell, #f4893a );
}

.trulla-bilderraetsel__fragezeichen {
	font-family: var( --wp--preset--font-family--rum-raisin );
	font-size: clamp( 2.2rem, 7vw, 3rem );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	line-height: 1;
}

.trulla-bilderraetsel__auswahl {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.trulla-bilderraetsel__karte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	width: clamp( 100px, 26vw, 150px );
	padding: 0.5rem;
	border-radius: 18px;
	border: 3px solid var( --wp--preset--color--blau-hell, #7baee8 );
	background: var( --wp--preset--color--weiss, #fff );
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.trulla-bilderraetsel__karte img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	pointer-events: none;
}

.trulla-bilderraetsel__karte-wort {
	font-family: var( --wp--preset--font-family--plus-jakarta-sans );
	font-weight: 600;
	font-size: 0.8rem;
	color: var( --wp--preset--color--ink-soft, #5b6288 );
	pointer-events: none;
	align-self: stretch;
	width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	text-align: center;
}

.trulla-bilderraetsel__karte:hover:not( :disabled ) {
	transform: translateY( -3px );
}

.trulla-bilderraetsel__karte.is-richtig {
	border-color: var( --wp--preset--color--trulla-gold, #f5c842 );
	box-shadow: 0 0 0 4px rgba( 245, 200, 66, 0.4 );
}

.trulla-bilderraetsel__karte.is-falsch {
	opacity: 0.35;
	border-color: var( --wp--preset--color--hell-grau, #f4f4f2 );
}

.trulla-bilderraetsel__karte:disabled {
	cursor: default;
}

.trulla-bilderraetsel__fortschritt {
	font-family: var( --wp--preset--font-family--plus-jakarta-sans );
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: var( --wp--preset--color--weiss, #fff );
	padding: 0.5rem 1rem;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 26, 58, 143, 0.08 );
}

.trulla-fangspiel__statusleiste {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.trulla-fangspiel__feld {
	position: relative;
	width: 100%;
	max-width: 560px;
	height: clamp( 320px, 60vh, 480px );
	margin: 0 auto 1.25rem;
	background-color: var( --wp--preset--color--blau-hell, #7baee8 );
	background-size: cover;
	background-position: center;
	border: 3px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 20px;
	overflow: hidden;
	touch-action: none;
	cursor: none;
}

.trulla-fangspiel__item {
	position: absolute;
	top: -60px;
	width: 56px;
	height: 56px;
	object-fit: contain;
	pointer-events: none;
	animation-name: trulla-fangspiel-fall;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	transform: translateX( -50% );
}

.trulla-fangspiel__item.is-gefangen {
	animation-play-state: paused;
	opacity: 0;
	transition: opacity 0.15s ease;
}

@keyframes trulla-fangspiel-fall {
	from {
		top: -60px;
	}
	to {
		top: 100%;
	}
}

.trulla-fangspiel__korb {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 15%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	object-position: bottom center;
	transform: translateX( -50% );
	filter: drop-shadow( 0 3px 4px rgba( 26, 58, 143, 0.25 ) );
	transition: transform 0.15s ease;
}

.trulla-fangspiel__korb.is-jubel {
	transform: translateX( -50% ) scale( 1.08 );
}

/* Mengenspiel – Sterne im Feld zählen, richtige Anzahl antippen. */
.trulla-mengenspiel__feld {
	position: relative;
	width: 100%;
	max-width: 480px;
	height: 220px;
	margin: 0 auto 1.25rem;
	background: var( --wp--preset--color--creme, #fff8ee );
	border: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 16px;
	overflow: hidden;
}

.trulla-mengenspiel__stern {
	position: absolute;
	width: 13%;
	height: auto;
}

.trulla-mengenspiel__optionen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 70px, 1fr ) );
	gap: 0.6rem;
	max-width: 360px;
	margin: 0 auto;
}

.trulla-mengenspiel__option {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.6em 1em;
	font-weight: 700;
	font-size: 1.1rem;
	cursor: pointer;
}

.trulla-mengenspiel__option.is-richtig {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	border-color: var( --wp--preset--color--trulla-gold, #f5c842 );
	color: #fff;
}

.trulla-mengenspiel__option.is-falsch {
	border-color: #d9534f;
	animation: trulla-schatten-wackeln 0.4s ease;
}

.trulla-mengenspiel__serie {
	text-align: center;
	margin-top: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

/* Wortsuche – Buchstabengitter, Größe kommt aus JS als CSS-Variable. */
.trulla-wortsuche__gitter {
	display: grid;
	grid-template-columns: repeat( var( --trulla-wortsuche-groesse, 8 ), 1fr );
	gap: 2px;
	max-width: 480px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 1.25rem;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border: 3px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 12px;
	overflow: hidden;
}

.trulla-wortsuche__zelle {
	background: #fff;
	border: none;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	font-weight: 700;
	font-size: clamp( 0.6rem, 2.4vw, 1rem );
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	padding: 0;
}

.trulla-wortsuche__zelle.is-auswahl {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
}

.trulla-wortsuche__zelle.is-gefunden {
	background: var( --done-bg, #eff6ec );
	color: var( --done-line, #8fbe86 );
}

.trulla-wortsuche__woerter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.9rem;
	max-width: 480px;
	margin: 0 auto 1rem;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
}

.trulla-wortsuche__wort {
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-wortsuche__wort.is-gefunden {
	color: var( --done-line, #8fbe86 );
	text-decoration: line-through;
}

/* Trulla Sudoku – Gittergröße kommt aus JS als CSS-Variable. */
.trulla-sudoku__gitter {
	display: grid;
	grid-template-columns: repeat( var( --trulla-sudoku-groesse, 4 ), 1fr );
	gap: 1px;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 1.25rem;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border: 3px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 12px;
	overflow: hidden;
}

.trulla-sudoku__zelle {
	background: #fff;
	border: none;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	font-weight: 700;
	font-size: clamp( 0.7rem, 3vw, 1.2rem );
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	padding: 2px;
}

.trulla-sudoku__zelle img {
	width: 70%;
	height: 70%;
	object-fit: contain;
}

.trulla-sudoku__zelle.is-vorgabe {
	background: var( --wp--preset--color--creme, #fff8ee );
	cursor: default;
}

.trulla-sudoku__zelle.is-ausgewaehlt {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
}

.trulla-sudoku__zelle.is-richtig {
	background: var( --done-bg, #eff6ec );
}

.trulla-sudoku__zelle.is-hinweis {
	background: var( --wp--preset--color--trulla-blau-hell, #7baee8 );
}

/* 100er-Tafel – Nachbarzahlen-Kreuz + Zifferntastatur. */
.trulla-hundertertafel__kreuz {
	display: grid;
	grid-template-columns: repeat( var( --trulla-hundertertafel-spalten, 3 ), 1fr );
	gap: 0.6rem;
	max-width: 320px;
	margin: 0 auto 1rem;
}

.trulla-hundertertafel__platzhalter {
	visibility: hidden;
}

.trulla-hundertertafel__feld {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: clamp( 1.1rem, 4vw, 1.5rem );
	background: #fff;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 12px;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-hundertertafel__feld.is-zentrum {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	color: #fff;
	border-color: var( --wp--preset--color--trulla-gold, #f5c842 );
}

.trulla-hundertertafel__feld.is-leer {
	background: var( --wp--preset--color--creme, #fff8ee );
	color: var( --ink-soft, #5b6288 );
	cursor: pointer;
}

.trulla-hundertertafel__feld.is-ausgewaehlt {
	border-color: var( --wp--preset--color--orange, #e8621a );
	color: var( --wp--preset--color--orange, #e8621a );
}

.trulla-hundertertafel__feld.is-geloest {
	background: var( --done-bg, #eff6ec );
	border-color: var( --done-line, #8fbe86 );
}

.trulla-hundertertafel__feld.is-falsch {
	border-color: #d9534f;
	animation: trulla-schatten-wackeln 0.4s ease;
}

.trulla-hundertertafel__eingabe {
	text-align: center;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	min-height: 1.6em;
	margin-bottom: 0.75rem;
}

.trulla-hundertertafel__tastatur {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 0.5rem;
	max-width: 260px;
	margin: 0 auto 1rem;
}

.trulla-hundertertafel__tastatur button {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	padding: 0.7em 0;
	border-radius: 12px;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	cursor: pointer;
}

.trulla-hundertertafel__ok {
	background: var( --wp--preset--color--orange, #e8621a ) !important;
	border-color: var( --wp--preset--color--orange, #e8621a ) !important;
	color: #fff !important;
}

.trulla-hundertertafel__serie {
	text-align: center;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	margin-top: 0.5rem;
}

.trulla-sudoku__zelle.is-falsch {
	background: #fbe0df;
	animation: trulla-schatten-wackeln 0.4s ease;
}

.trulla-sudoku__zelle.is-box-rechts {
	box-shadow: inset -2px 0 0 var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-sudoku__zelle.is-box-unten {
	box-shadow: inset 0 -2px 0 var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-sudoku__zelle.is-box-rechts.is-box-unten {
	box-shadow: inset -2px 0 0 var( --wp--preset--color--trulla-blau, #1a3a8f ), inset 0 -2px 0 var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-sudoku__palette {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	max-width: 420px;
	margin: 0 auto;
}

.trulla-sudoku__palette-taste {
	width: 46px;
	height: 46px;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 12px;
	font-weight: 700;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 4px;
}

.trulla-sudoku__palette-taste img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media ( prefers-reduced-motion: reduce ) {
	.trulla-fangspiel__item {
		animation-duration: 6s !important;
	}
}

/* Trullas Feenleiter – digitales Leiterspiel */
.trulla-feenleiter {
	max-width: 640px;
}

.trulla-feenleiter__setup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.trulla-feenleiter__setup-label {
	font-weight: 600;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-feenleiter__anzahl-reihe {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	justify-content: center;
}

.trulla-feenleiter__anzahl-button {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: #fff;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.6em 1.3em;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	touch-action: manipulation;
}

.trulla-feenleiter__anzahl-button:hover,
.trulla-feenleiter__anzahl-button:focus-visible {
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: #fff;
}

.trulla-feenleiter__brett {
	position: relative;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	margin: 0 auto 1rem;
	box-shadow: 0 4px 16px rgba( 26, 58, 143, 0.18 );
}

.trulla-feenleiter__bild {
	display: block;
	width: 100%;
	height: auto;
}

.trulla-feenleiter__spielstein {
	position: absolute;
	width: 8%;
	height: 8%;
	min-width: 20px;
	min-height: 20px;
	object-fit: contain;
	transform: translate( -50%, -50% );
	transition: left 0.55s ease, top 0.55s ease;
	filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, 0.35 ) );
	pointer-events: none;
}

.trulla-feenleiter__spielstein--torti {
	width: 11%;
	height: 11%;
	min-width: 28px;
	min-height: 28px;
}

.trulla-feenleiter__steuerung {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0.5rem 0 1rem;
}

.trulla-feenleiter__wuerfel-anzeige {
	font-size: 2.6rem;
	line-height: 1;
	min-width: 1.4em;
}

.trulla-feenleiter__wuerfel-button {
	display: inline-block;
	border: none;
	border-radius: 999px;
	padding: 0.65em 1.4em;
	background: var( --wp--preset--color--trulla-orange, #e8621a );
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	touch-action: manipulation;
}

.trulla-feenleiter__wuerfel-button:hover,
.trulla-feenleiter__wuerfel-button:focus-visible {
	background: var( --wp--preset--color--orange-hell, #f4893a );
}

.trulla-feenleiter__wuerfel-button:disabled {
	opacity: 0.5;
	cursor: default;
}

.trulla-feenleiter__feenfeld {
	background: #fff;
	border: 2px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 14px;
	padding: 1rem;
	margin-bottom: 1rem;
	text-align: left;
}

.trulla-feenleiter__feenfeld-text {
	margin: 0 0 0.75rem;
	font-weight: 600;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-feenleiter__feenfeld-formular {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}

.trulla-feenleiter__feenfeld-eingabe {
	flex: 1 1 140px;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 10px;
	padding: 0.5em 0.7em;
	font-size: 1.1rem;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	text-align: center;
}

.trulla-feenleiter__feenfeld-pruefen {
	border: none;
	border-radius: 999px;
	padding: 0.55em 1.2em;
	background: var( --wp--preset--color--trulla-orange, #e8621a );
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
}

.trulla-feenleiter__feenfeld-ueberspringen {
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: transparent;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-weight: 600;
	cursor: pointer;
	touch-action: manipulation;
}

.trulla-feenleiter__feenfeld-feedback {
	margin: 0.6rem 0 0;
	min-height: 1.4em;
	font-weight: 600;
	color: var( --wp--preset--color--trulla-orange, #e8621a );
}

.trulla-feenleiter__sieg {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 14px;
	padding: 1rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

/* Trullas Plus-und-Minus-Bingo */
.trulla-bingo {
	max-width: 640px;
}

.trulla-bingo__aufgabenkarte-wrap {
	position: relative;
	width: 100%;
	max-width: 320px;
	margin: 0 auto 1rem;
}

.trulla-bingo__aufgabenkarte-bild {
	display: block;
	width: 100%;
	height: auto;
}

.trulla-bingo__aufgabenkarte-text {
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate( -50%, -50% );
	margin: 0;
	font-size: clamp( 1.6rem, 6vw, 2.2rem );
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-bingo__karten {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1rem;
}

.trulla-bingo__karte {
	flex: 1 1 220px;
	max-width: 280px;
}

.trulla-bingo__karte-name {
	margin: 0 0 0.4rem;
	font-weight: 700;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-bingo__brett {
	position: relative;
	width: 100%;
}

.trulla-bingo__bild {
	display: block;
	width: 100%;
	height: auto;
}

.trulla-bingo__zelle {
	position: absolute;
	transform: translate( -50%, -50% );
	width: 22.5%;
	height: 20%;
	border: none;
	background: transparent;
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: clamp( 0.9rem, 4vw, 1.3rem );
	cursor: pointer;
	touch-action: manipulation;
}

.trulla-bingo__zelle.is-bedeckt {
	color: transparent;
	cursor: default;
	pointer-events: none;
}

.trulla-bingo__zelle.is-falsch {
	color: #c0392b;
}

.trulla-bingo__stern {
	position: absolute;
	transform: translate( -50%, -50% );
	width: 13%;
	height: auto;
	pointer-events: none;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.25 ) );
}

.trulla-bingo__ziehen-button {
	display: inline-block;
	border: none;
	border-radius: 999px;
	padding: 0.65em 1.4em;
	background: var( --wp--preset--color--trulla-orange, #e8621a );
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	touch-action: manipulation;
}

.trulla-bingo__ziehen-button:hover,
.trulla-bingo__ziehen-button:focus-visible {
	background: var( --wp--preset--color--orange-hell, #f4893a );
}

.trulla-bingo__ziehen-button:disabled {
	opacity: 0.5;
	cursor: default;
}

.trulla-bingo__sieg {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	border-radius: 14px;
	padding: 1rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

/* Trullas Wörter-Zauber */
.trulla-zuordnung {
	max-width: 680px;
}

.trulla-zuordnung__brett {
	position: relative;
	width: 100%;
	aspect-ratio: 1600 / 1120;
	background: #fff;
	border: 3px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	border-radius: 16px;
	margin: 0 auto;
	overflow: hidden;
}

.trulla-zuordnung__bildfeld {
	position: absolute;
	border: 2px solid var( --wp--preset--color--trulla-blau, #1a3a8f );
	background: var( --wp--preset--color--creme, #fff8ee );
	border-radius: 12px;
	padding: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: manipulation;
}

.trulla-zuordnung__bildfeld img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.trulla-zuordnung__bildfeld.is-emoji {
	font-size: clamp( 1.6rem, 6vw, 2.6rem );
	line-height: 1;
}

.trulla-zuordnung__textfeld {
	position: absolute;
	border: 2px solid var( --wp--preset--color--trulla-gold, #f5c842 );
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: #fff;
	border-radius: 14px;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: clamp( 0.42rem, 1.4vw, 0.75rem );
	line-height: 1.05;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	touch-action: manipulation;
	padding: 2px 4px;
}

.trulla-zuordnung__bildfeld.is-ausgewaehlt,
.trulla-zuordnung__textfeld.is-ausgewaehlt {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
	border-color: var( --wp--preset--color--trulla-blau, #1a3a8f );
	color: var( --wp--preset--color--trulla-blau, #1a3a8f );
}

.trulla-zuordnung__bildfeld.is-geloest,
.trulla-zuordnung__textfeld.is-geloest {
	background: #eff6ec;
	border-color: #8bc48a;
	color: #3f7a3d;
	cursor: default;
	pointer-events: none;
	opacity: 0.7;
}

.trulla-zuordnung__bildfeld.is-falsch,
.trulla-zuordnung__textfeld.is-falsch {
	border-color: #c0392b;
}

/* Trullas Sternenkette */
.trulla-sternenkette__brett {
	display: grid;
	grid-template-columns: repeat( var( --trulla-sternenkette-spalten, 6 ), 1fr );
	gap: 3px;
	max-width: 420px;
	margin: 0 auto 1rem;
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	padding: 6px;
	border-radius: 12px;
}

.trulla-sternenkette__zelle {
	aspect-ratio: 1 / 1;
	border: none;
	border-radius: 6px;
	background: #fff;
	padding: 2px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: manipulation;
}

.trulla-sternenkette__zelle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.trulla-sternenkette__zelle.is-spezial {
	background: var( --wp--preset--color--trulla-gold, #f5c842 );
}

.trulla-sternenkette__zelle.is-ausgewaehlt {
	background: var( --wp--preset--color--trulla-blau, #1a3a8f );
	box-shadow: inset 0 0 0 3px var( --wp--preset--color--trulla-gold, #f5c842 );
}

.trulla-sternenkette__zelle.is-falsch {
	background: #fbe0df;
}

.trulla-sternenkette__leerfeld {
	aspect-ratio: 1 / 1;
}

@keyframes trulla-sk-tauscht {
	from {
		transform: translate( calc( var( --dc, 0 ) * 100% ), calc( var( --dr, 0 ) * 100% ) );
	}
	to {
		transform: translate( 0, 0 );
	}
}

.trulla-sternenkette__zelle.is-tauscht {
	position: relative;
	z-index: 2;
	animation: trulla-sk-tauscht 220ms ease;
}

@keyframes trulla-sk-verschwindet {
	0% {
		transform: scale( 1 );
		opacity: 1;
	}
	100% {
		transform: scale( 0.2 );
		opacity: 0;
	}
}

.trulla-sternenkette__zelle.is-verschwindet {
	animation: trulla-sk-verschwindet 220ms ease forwards;
	pointer-events: none;
}

@keyframes trulla-sk-faellt {
	from {
		transform: translateY( calc( var( --dr, -1 ) * 100% ) );
	}
	to {
		transform: translateY( 0 );
	}
}

.trulla-sternenkette__zelle.is-faellt {
	position: relative;
	z-index: 1;
	animation: trulla-sk-faellt 260ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.trulla-sternenkette__zelle.is-tauscht,
	.trulla-sternenkette__zelle.is-verschwindet,
	.trulla-sternenkette__zelle.is-faellt {
		animation: none;
	}
}