/* ==========================================================================
   Verwandlung – Stylesheet
   Farbwelt: Variante A "Frühlingsblatt" (am 26.10.2026 abgenommen).
   Nur Systemschriften, keine externen Dateien.
   ========================================================================== */

/* ---------- 1. Farben und Maße (Tokens) ---------- */
:root {
  /* Seite und Text */
  --seite: #eef6dc;
  --seite-tief: #e1eec7;
  --text: #23301c;
  --text-leise: #4f6a3a;
  --weiss: #fffdf6;
  --linie: #c9dca8;

  /* Akzent für Knöpfe und Fokus */
  --gruen: #2f7a52;
  --gruen-dunkel: #1f5a3c;
  --gruen-hell: #d7ecc0;
  --fokus: #1f5a3c;

  /* Spielbrett (Blatt) */
  --blatt: #9fcf5f;
  --blatt-rand: #6e9e35;
  --ader: #cdeb9b;
  --mulde: #8dbf50;

  /* Kachelfarben der elf Stufen */
  --t1: #f5fbe4; --t2: #e3f3bf; --t3: #d0e99c; --t4: #badd7e; --t5: #619f4b; --t6: #2f7a52;
  --t7: #f6e2a0; --t8: #fbf1d3; --t9: #1f6a5c; --t10: #4f806b; --t11: #cbe5f3;
  --kachel-rand: rgba(255, 255, 255, .55);

  /* Schrift */
  --schrift: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* Abstände */
  --rand: max(16px, env(safe-area-inset-left, 0px));
  --rand-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 18px;

  color-scheme: light;
}

/* ---------- 2. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--seite);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

img { max-width: 100%; display: block; }

/* Handy: kein Zoomen per Doppeltipp auf Bedienelementen, kein Kontextmenü beim langen Drücken auf Spielbilder */
a, button, input { touch-action: manipulation; }
.btn, .schalter, .icon-btn { user-select: none; -webkit-user-select: none; }
.kachel img, .titel-szene img, .vorstellung img, .mini-kachel img { -webkit-touch-callout: none; }

a { color: var(--gruen-dunkel); }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 8px; }

.noscript { padding: 24px; text-align: center; }

#app { min-height: 100%; }

/* Jede Ansicht füllt den Bildschirm und respektiert die sicheren Ränder von Handys */
.screen {
  min-height: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: var(--rand);
  padding-right: var(--rand-r);
}

/* ---------- 3. Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 10px 26px;
  border: 2px solid var(--gruen); border-radius: 999px;
  background: var(--weiss); color: var(--gruen-dunkel);
  font: inherit; font-weight: 800; font-size: 18px; text-decoration: none;
  cursor: pointer; user-select: none;
  box-shadow: 0 4px 0 var(--linie);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.btn:hover { background: #ffffff; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--linie); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 0 4px 0 var(--linie); }

.btn-haupt {
  background: var(--gruen); color: #fff; border-color: var(--gruen-dunkel);
  box-shadow: 0 4px 0 var(--gruen-dunkel); font-size: 20px;
}
.btn-haupt:hover { background: #348a5c; }
.btn-haupt:active { box-shadow: 0 1px 0 var(--gruen-dunkel); }

.btn-klein { min-height: 44px; padding: 8px 18px; font-size: 16px; }

.icon-btn {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--weiss); color: var(--gruen-dunkel);
  border: 2px solid var(--linie);
  font-size: 30px; line-height: 1; font-weight: 700; text-decoration: none;
  padding-bottom: 4px;
}

/* ---------- 4. Schalter (Ton, Bewegung) ---------- */
.schalter-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }

.schalter {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 6px;
  background: none; border: 0; color: var(--text);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.schalter-spur {
  position: relative; width: 48px; height: 28px; border-radius: 999px;
  background: var(--linie); transition: background-color .2s ease;
}
.schalter-knopf {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease;
}
.schalter[aria-checked="true"] .schalter-spur { background: var(--gruen); }
.schalter[aria-checked="true"] .schalter-knopf { transform: translateX(20px); }

/* ---------- 5. Titelbild ---------- */
.screen-titel { display: grid; place-items: center; }

.titel-inhalt {
  width: 100%; max-width: 460px;
  display: grid; justify-items: center; gap: 22px;
  padding-block: 32px;
  text-align: center;
}

/* Titelbild: Zweig mit Blatt als Hintergrund, die Tiere als einzelne Bilder darauf.
   Positionen in Prozent der Szene, damit alles mit der Breite mitwächst. */
.titel-szene { position: relative; width: min(100%, 400px); aspect-ratio: 400 / 250; margin-bottom: -6px; }
.szene-hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; }
.szene-teil { position: absolute; height: auto; }
.szene-puppe     { left: 64%; top: 6%;  width: 22%; }
.szene-ei        { left: 20%; top: 64%; width: 14%; }
.szene-raupe     { left: 41%; top: 45%; width: 26%; animation: kriechen 5s ease-in-out infinite; }
.szene-pfau      { left: 3%;  top: 16%; width: 23%; animation: flattern 3s ease-in-out infinite; }
.szene-weissling { left: 80%; top: 54%; width: 15%; animation: flattern 2.4s ease-in-out -1.1s infinite; }
@keyframes kriechen {
  0%, 100% { transform: translateX(0) scaleX(1); }
  20%      { transform: translateX(3%) scaleX(.94); }
  40%      { transform: translateX(7%) scaleX(1); }
  60%      { transform: translateX(10%) scaleX(.94); }
  80%      { transform: translateX(4%) scaleX(1); }
}
@keyframes flattern {
  0%, 100% { transform: translate(0, 0) scaleX(1); }
  15%      { transform: translate(2%, -6%) scaleX(.72); }
  30%      { transform: translate(4%, -10%) scaleX(1); }
  45%      { transform: translate(5%, -6%) scaleX(.78); }
  60%      { transform: translate(3%, -2%) scaleX(1); }
  80%      { transform: translate(1%, -5%) scaleX(.85); }
}

.logo {
  margin: 0;
  font-size: clamp(42px, 13vw, 64px); line-height: 1; font-weight: 900; letter-spacing: -.01em;
  color: var(--gruen-dunkel);
}
.untertitel { margin: -12px 0 0; color: var(--text-leise); font-weight: 700; }

.menu { display: grid; gap: 12px; width: min(100%, 320px); }
.menu .btn { width: 100%; }

.link-zurueck { font-weight: 700; color: var(--text-leise); text-decoration: none; padding: 8px; }
.link-zurueck:hover { text-decoration: underline; }

/* ---------- 6. Kopfleiste (Spiel und Unterseiten) ---------- */
.leiste {
  display: flex; align-items: center; gap: 12px;
  padding-block: 12px;
  max-width: 600px; margin: 0 auto; width: 100%;
}
.leiste-titel { margin: 0; font-size: 22px; font-weight: 900; color: var(--gruen-dunkel); flex: 1; min-width: 0; }
.leiste-titel:focus { outline: none; }

.punkte { display: flex; gap: 8px; }
.punkte-box {
  min-width: 74px; padding: 4px 12px; border-radius: 12px;
  background: var(--gruen); color: #fff; text-align: center;
  display: grid; line-height: 1.15;
}
.punkte-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.punkte-wert { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---------- 7. Spielansicht ---------- */
/* Hochformat und Desktop: Leiste oben, Blatt in der Mitte, Knöpfe unten.
   Das Blatt nimmt den größten Platz, den Breite UND Höhe erlauben, höchstens 600 px. */
.screen-spiel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "leiste" "brett" "aktionen";
  height: 100vh; height: 100dvh;
  overscroll-behavior: none;
}
.screen-spiel .leiste { grid-area: leiste; }
.screen-spiel .leiste-titel { font-size: 20px; }

.spielbereich {
  grid-area: brett;
  display: grid; place-items: center;
  min-height: 0;
  padding-block: 10px 6px;
  container-type: size;           /* für die Größenberechnung des Blattes */
  touch-action: none;             /* Wischen schiebt Kacheln statt die Seite */
  user-select: none; -webkit-user-select: none;
}

.brett-huelle { position: relative; width: min(100%, 600px); }
@supports (width: 1cqh) {
  /* 88 % der Höhe, damit Blattspitze und Stiel noch Platz haben */
  .brett-huelle { width: min(100cqw, 88cqh, 600px); }
}

/* Das Blatt: weiche Blattform mit Rand, Spitze oben, Stiel unten */
.brett {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1;
  container-type: inline-size;    /* Kachelzahlen wachsen mit dem Blatt */
  border-radius: 46% 46% 22% 22% / 24% 24% 18% 18%;
  background: radial-gradient(120% 90% at 30% 20%, #c4e596 0%, var(--blatt) 55%, #87b84c 100%);
  box-shadow: inset 0 0 0 4px var(--blatt-rand), 0 10px 24px rgba(35, 48, 28, .18);
}
/* Blattspitze liegt hinter dem Blatt, damit nur der äußere Teil zu sehen ist */
.brett-huelle::before {
  content: ""; position: absolute; left: 50%; top: -3.6%; z-index: 0;
  width: 9%; aspect-ratio: 1;
  background: #b9df86;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 14% 0 0 0;
  box-shadow: inset 3px 3px 0 0 var(--blatt-rand);
}
.brett-stiel {
  position: absolute; left: 50%; top: 99%;
  width: 2%; height: 6%;
  background: var(--blatt-rand); border-radius: 0 0 6px 6px;
  transform: translateX(-50%);
}

/* Spielfläche innerhalb des Blattes */
.raster { position: absolute; inset: 6%; }
.adern { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ader); stroke-width: 3; stroke-linecap: round; }
.adern .mittelrippe { stroke-width: 7; }

.mulden { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
.mulde { display: grid; place-items: center; }
.mulde::before { content: ""; width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--mulde); opacity: .55; }

.ebene { position: absolute; inset: 0; }

/* Eine Kachel belegt ein Viertel der Fläche und wird per --c (Spalte) und --r (Zeile) verschoben */
.kachel {
  position: absolute; left: 0; top: 0; width: 25%; height: 25%;
  display: grid; place-items: center;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
}
.kachel-blatt {
  position: relative; width: 86%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%;
  background: radial-gradient(70% 70% at 32% 28%, color-mix(in srgb, var(--t) 70%, white) 0%, var(--t) 60%, color-mix(in srgb, var(--t) 88%, black) 100%);
  background-color: var(--t); /* Ersatz für ältere Browser ohne color-mix */
  box-shadow: inset 0 0 0 2px var(--kachel-rand), 0 3px 6px rgba(0, 0, 0, .18);
}
.kachel-bild { width: 88%; height: 88%; pointer-events: none; -webkit-user-drag: none; }
.kachel-nummer {
  position: absolute; top: 3%; left: 5%;
  min-width: 1.6em; height: 1.6em; border-radius: 1em; padding-inline: .25em;
  display: grid; place-items: center;
  font-size: 11px; font-size: max(9px, 2.4cqw);
  font-weight: 800; line-height: 1; color: #24301f;
  background: rgba(255, 255, 255, .88);
  font-variant-numeric: tabular-nums;
}

/* ---------- 7b. Animationen der Kacheln ----------
   Die Position steckt im transform von .kachel und gleitet per Übergang.
   Alles andere (Hüpfen, Schrumpfen, Erscheinen, Flügel) bewegt nur das
   Innere, damit es sich nicht mit der Position beißt.
   Zeiten passen zu SCHIEBE_MS, SCHRUMPF_MS und POLLEN_MS in game.js. */
.kachel { transition: transform 120ms ease-in-out; will-change: transform; }
/* Leistung auf älteren Handys: das Innere als eigene Ebene, und während der kurzen
   Animationen ohne Schatten (spart Neuzeichnen; man sieht den Unterschied nicht) */
.kachel-blatt { will-change: transform; }
.kachel.huepft .kachel-blatt, .kachel.erscheint .kachel-blatt, .kachel.schrumpft .kachel-blatt {
  box-shadow: inset 0 0 0 2px var(--kachel-rand);
}

.kachel.schrumpft { z-index: 1; }
.kachel.schrumpft .kachel-blatt { animation: schrumpfen 140ms ease-in forwards; }
.kachel.huepft { z-index: 2; }
.kachel.huepft .kachel-blatt { animation: huepfen 260ms ease-out; }
.kachel.erscheint .kachel-blatt { animation: erscheinen 180ms ease-out 40ms both; }

@keyframes schrumpfen { to { transform: scale(.55); opacity: 0; } }
@keyframes huepfen {
  0%   { transform: scale(.6); }
  45%  { transform: scale(1.14) translateY(-6%); }
  75%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
@keyframes erscheinen { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Flügelschlag: kurz zuklappen, dann lange offen; jeder Falter mit eigenem Versatz */
.kachel.fluegel .kachel-bild { animation: fluegel 2.6s ease-in-out infinite; animation-delay: var(--versatz, 0s); transform-origin: 50% 50%; }
@keyframes fluegel {
  0%, 52%, 100% { transform: scaleX(1); }
  64%           { transform: scaleX(.7); }
  76%           { transform: scaleX(1); }
  86%           { transform: scaleX(.8); }
}
/* Zitronenfalter (von der Seite) wiegt sich leicht, die Wolke schwebt */
.kachel.s6 .kachel-bild { animation: wiegen 3.4s ease-in-out infinite; animation-delay: var(--versatz, 0s); transform-origin: 40% 80%; }
.kachel.s11 .kachel-bild { animation: schweben 3.2s ease-in-out infinite; animation-delay: var(--versatz, 0s); }
@keyframes wiegen { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }

/* Pollenpuff: kleine gelbe und helle Körner fliegen vom Feld nach außen */
.pollen {
  position: absolute; left: 0; top: 0; width: 25%; height: 25%;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  pointer-events: none; z-index: 3;
}
.pollen span {
  position: absolute; left: 50%; top: 50%;
  width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%; border-radius: 50%;
  background: #f2c94c; box-shadow: 0 0 0 1.5px rgba(150, 105, 10, .45);
  animation: pollen 520ms ease-out forwards;
}
.pollen span.hell { background: #fffbe6; width: 6%; margin: -3% 0 0 -3%; }
@keyframes pollen {
  0%   { transform: translate(0, 0) scale(.6); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 11), calc(var(--dy) * 11)) scale(1); opacity: 0; }
}

.s1 { --t: var(--t1); } .s2 { --t: var(--t2); } .s3 { --t: var(--t3); } .s4 { --t: var(--t4); }
.s5 { --t: var(--t5); } .s6 { --t: var(--t6); } .s7 { --t: var(--t7); } .s8 { --t: var(--t8); }
.s9 { --t: var(--t9); } .s10 { --t: var(--t10); } .s11 { --t: var(--t11); }

.aktionen {
  grid-area: aktionen;
  display: grid; justify-items: center; gap: 6px;
  padding-block: 4px 16px;
}
.aktionen-knoepfe { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.status { margin: 0; min-height: 1.5em; font-weight: 700; color: var(--text-leise); text-align: center; }

/* Handy quer (wenig Höhe): Leiste und Knöpfe links, Blatt rechts */
@media (orientation: landscape) and (max-height: 560px) {
  .screen-spiel {
    grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "leiste brett" "aktionen brett";
    column-gap: 16px;
  }
  .screen-spiel .leiste { flex-wrap: wrap; align-content: flex-start; padding-block: 10px 0; }
  .screen-spiel .leiste-titel { flex-basis: calc(100% - 56px); }
  .screen-spiel .punkte { width: 100%; }
  .screen-spiel .punkte-box { flex: 1; }
  .aktionen { align-content: end; justify-items: stretch; }
  .aktionen-knoepfe { flex-direction: column; align-items: stretch; }
  .spielbereich { padding-block: 8px; }
}

/* Rückgängig zeigt, wie oft es noch geht */
.zaehler {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--gruen-hell); color: var(--gruen-dunkel);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---------- 7c. Vorstellung einer neuen Stufe ----------
   Liegt über dem Spielbereich, nicht über der Leiste. Der Kreis trägt die
   Kachelfarbe der Stufe, der Balken unten läuft die 1,5 s ab. */
.spielbereich { position: relative; }
.vorstellung {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: radial-gradient(closest-side, rgba(255, 253, 246, .92), rgba(238, 246, 220, .75) 70%, rgba(238, 246, 220, .4));
  cursor: pointer;
  animation: vorstellung-ein 160ms ease-out;
}
.vorstellung-karte {
  display: grid; justify-items: center; gap: 8px;
  width: min(86%, 380px);
  text-align: center;
}
.vorstellung-neu {
  padding: 4px 14px; border-radius: 999px;
  background: var(--gruen); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.vorstellung-kreis {
  width: min(64cqmin, 260px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(70% 70% at 32% 28%, color-mix(in srgb, var(--t) 70%, white) 0%, var(--t) 60%, color-mix(in srgb, var(--t) 88%, black) 100%);
  background-color: var(--t);
  box-shadow: inset 0 0 0 4px var(--kachel-rand), 0 0 0 10px rgba(242, 201, 76, .35), 0 14px 30px rgba(35, 48, 28, .25);
  animation: vorstellung-pop 520ms cubic-bezier(.2, .9, .3, 1.3);
}
.vorstellung-bild { width: 84%; height: 84%; }
.vorstellung.fluegel .vorstellung-bild { animation: fluegel 1.4s ease-in-out infinite; }
.vorstellung-name { margin: 2px 0 0; font-size: clamp(26px, 7vw, 38px); line-height: 1.05; font-weight: 900; color: var(--gruen-dunkel); text-wrap: balance; }
.vorstellung-stufe { font-weight: 800; color: var(--text-leise); }
.vorstellung-zeit {
  width: 120px; height: 5px; border-radius: 999px; background: var(--gruen);
  transform-origin: left center; animation: vorstellung-zeit 1500ms linear forwards;
}
@keyframes vorstellung-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes vorstellung-pop {
  0% { transform: scale(.4) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes vorstellung-zeit { from { transform: scaleX(1); } to { transform: scaleX(0); } }
html[data-ruhig="1"] .vorstellung-zeit { display: none; }

/* ---------- 7d. Dialog ---------- */
.dialog-ebene {
  position: fixed; inset: 0; z-index: 40;
  display: grid; justify-items: center; align-items: start;
  grid-template-columns: minmax(0, 1fr); /* sonst macht langer Text die Spalte breiter als den Bildschirm */
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--rand-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--rand);
  background: rgba(35, 48, 28, .45);
  overflow-y: auto;
}
.dialog {
  width: min(100%, 380px);
  margin-block: auto; /* mittig, aber bei wenig Höhe oben beginnend und scrollbar */
  display: grid; justify-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  padding: 24px 22px 22px;
  border-radius: 26px;
  background: var(--weiss);
  box-shadow: inset 0 0 0 3px var(--gruen-hell), 0 18px 40px rgba(35, 48, 28, .3);
  text-align: center;
  animation: dialog-auf 200ms ease-out;
}
@keyframes dialog-auf { from { transform: scale(.92) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.dialog-bild { width: 120px; height: 120px; }
.dialog-titel { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 900; color: var(--gruen-dunkel); text-wrap: balance; }
.dialog-text { margin: 0; color: var(--text); max-width: 30ch; }
.dialog-text:empty { display: none; }
.dialog-werte { display: flex; gap: 8px; justify-content: center; }
.dialog-hinweis {
  margin: 0; padding: 4px 14px; border-radius: 999px;
  background: #f6e2a0; color: #6a4a08; font-weight: 800;
}
.dialog-knoepfe { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
.dialog-knoepfe .btn { width: 100%; }

/* Eintragen in die Bestenliste (im Endbild) */
.dialog-extra { width: 100%; }
.dialog-extra:empty { display: none; }
.eintrag {
  display: grid; gap: 6px; text-align: left;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px; border-radius: 16px; background: var(--seite); box-shadow: inset 0 0 0 2px var(--gruen-hell);
}
.eintrag-titel { margin: 0; font-weight: 900; color: var(--gruen-dunkel); }
.eintrag-label { font-size: 14px; font-weight: 700; color: var(--text-leise); }
.eintrag-reihe { display: flex; gap: 8px; }
.eintrag input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px;
  border: 2px solid var(--linie); border-radius: 12px; background: #fff; color: var(--text);
  font: 700 17px var(--schrift);
}
.eintrag input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; }
.eintrag .btn { box-shadow: 0 3px 0 var(--gruen-dunkel); }
.eintrag-meldung { margin: 0; font-size: 14px; color: var(--text-leise); }
.eintrag-meldung:empty { display: none; }
.eintrag-fertig { margin: 0; font-weight: 800; color: var(--gruen-dunkel); }
.eintrag-link { font-weight: 800; }

/* Wenig Höhe (Handy quer): Bild kleiner, damit alles ohne Scrollen passt */
@media (max-height: 560px) {
  .dialog { gap: 8px; padding: 16px 18px; }
  .dialog-bild { width: 72px; height: 72px; }
  .dialog-titel { font-size: 24px; }
  .dialog-knoepfe { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---------- 8. Unterseiten ---------- */
.seiten-inhalt { max-width: 600px; margin: 0 auto; padding-block: 8px 32px; }
.platzhalter {
  padding: 22px; border-radius: var(--radius);
  background: var(--weiss); border: 2px dashed var(--linie); color: var(--text-leise);
  text-align: center;
}

/* ---------- 8a. Anleitung ---------- */
.anleitung { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: schritt; }
.anleitung-schritt {
  counter-increment: schritt;
  display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 16px; border-radius: 20px;
  background: var(--weiss); box-shadow: 0 2px 0 var(--linie);
}
.anleitung-bild { display: grid; justify-items: center; gap: 6px; }
.anleitung-text { display: grid; gap: 8px; }
.anleitung-text p { margin: 0; font-size: 18px; line-height: 1.45; }
.anleitung-text p:first-child::before {
  content: counter(schritt);
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .45em;
  border-radius: 50%; background: var(--gruen); color: #fff; font-size: 15px; font-weight: 900; vertical-align: 2px;
}
.tasten { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px !important; color: var(--text-leise); }
.tasten span { margin-inline: 4px; }
kbd {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 6px;
  border-radius: 7px; background: #fff; border: 2px solid var(--linie); box-shadow: 0 2px 0 var(--linie);
  font: 800 14px/1 var(--schrift); color: var(--text);
}

/* Kleine Kacheln für die Bilder der Anleitung */
.mini-kachel {
  display: inline-grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(70% 70% at 32% 28%, color-mix(in srgb, var(--t) 70%, white) 0%, var(--t) 60%, color-mix(in srgb, var(--t) 88%, black) 100%);
  background-color: var(--t);
  box-shadow: inset 0 0 0 2px var(--kachel-rand), 0 2px 4px rgba(0, 0, 0, .15);
}
.mini-kachel img { width: 86%; height: 86%; }
.mini-kachel.gross { width: 64px; }
.mini-kachel.klein { width: 30px; }
.mini-kachel.neu { box-shadow: inset 0 0 0 2px var(--kachel-rand), 0 0 0 4px rgba(242, 201, 76, .55); }
.mini-reihe {
  display: grid; grid-template-columns: repeat(4, 46px); gap: 2px; padding: 4px;
  border-radius: 14px; background: var(--blatt); box-shadow: inset 0 0 0 2px var(--blatt-rand);
}
.mini-feld { display: grid; place-items: center; height: 46px; position: relative; }
.mini-feld::before { content: ""; position: absolute; width: 34px; aspect-ratio: 1; border-radius: 50%; background: var(--mulde); opacity: .55; }
.mini-feld .mini-kachel { position: relative; }
.mini-pfeil { font-size: 13px; font-weight: 800; color: var(--text-leise); }
.mini-gleichung, .mini-kette { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mini-kette { gap: 3px; }
.mini-zeichen { font-size: 22px; font-weight: 900; color: var(--gruen-dunkel); }
.mini-zeichen { line-height: 1; }
.mini-zeichen.wort { font-size: 15px; font-weight: 800; color: var(--text-leise); margin-inline: 6px; }
.mini-punkte { font-size: 22px; font-weight: 900; color: var(--text-leise); }

.anleitung-los { display: grid; justify-items: center; padding-top: 20px; }
.anleitung-los .btn { min-width: 220px; }

@media (max-width: 560px) {
  .anleitung-schritt { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- 8b. Sammelalbum ---------- */
.album-kopf { display: grid; gap: 8px; margin-bottom: 16px; }
.album-zahl { margin: 0; font-weight: 700; color: var(--text-leise); }
.album-zahl strong { color: var(--gruen-dunkel); font-size: 22px; font-weight: 900; }
.album-balken { height: 12px; border-radius: 999px; background: var(--gruen-hell); overflow: hidden; }
.album-balken span { display: block; height: 100%; border-radius: inherit; background: var(--gruen); }

.album-hinweis {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 14px; border-radius: 16px;
  background: #fbf1d3; border: 2px solid #f0dc9c;
}
.album-hinweis p { margin: 0; flex: 1 1 240px; font-size: 15px; }

.album-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.album-eintrag {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px; border-radius: 20px;
  background: var(--weiss); box-shadow: 0 2px 0 var(--linie);
}
.album-kreis {
  position: relative; width: 96px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(70% 70% at 32% 28%, color-mix(in srgb, var(--t) 70%, white) 0%, var(--t) 60%, color-mix(in srgb, var(--t) 88%, black) 100%);
  background-color: var(--t);
  box-shadow: inset 0 0 0 2px var(--kachel-rand);
}
.album-kreis img { width: 86%; height: 86%; }
.album-text { min-width: 0; }
.album-stufe { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); }
.album-neu {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--gruen); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.album-name { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 900; color: var(--gruen-dunkel); }
.album-satz { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }

/* Noch nicht entdeckt: Schattenriss mit Fragezeichen */
.album-eintrag.unbekannt { background: transparent; box-shadow: inset 0 0 0 2px var(--linie); }
.album-eintrag.unbekannt .album-kreis { background: var(--seite-tief); box-shadow: inset 0 0 0 2px var(--linie); }
.album-eintrag.unbekannt .album-kreis img { filter: brightness(0); opacity: .16; }
.album-frage { position: absolute; font-size: 40px; font-weight: 900; color: var(--text-leise); }
.album-eintrag.unbekannt .album-name { color: var(--text-leise); }
.album-eintrag.unbekannt .album-satz { color: var(--text-leise); }

@media (min-width: 760px) {
  .screen-seite .seiten-inhalt { max-width: 900px; }
  .screen-seite .leiste { max-width: 900px; }
  .album-liste { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .album-eintrag { grid-template-columns: 72px minmax(0, 1fr); }
  .album-kreis { width: 72px; }
}

/* ---------- 8c. Bestenliste ---------- */
.liste-laden, .liste-kopf, .liste-fuss { color: var(--text-leise); font-weight: 700; }
.liste-kopf { margin-top: 0; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste-zeile {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 14px;
  background: var(--weiss); box-shadow: 0 2px 0 var(--linie);
}
.liste-platz {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--seite-tief); font-weight: 900; font-variant-numeric: tabular-nums;
}
.liste-name { font-weight: 800; overflow-wrap: anywhere; }
.liste-punkte { font-weight: 900; color: var(--gruen-dunkel); font-variant-numeric: tabular-nums; }
.platz1 .liste-platz { background: #f2c94c; }
.platz2 .liste-platz { background: #dfe3e6; }
.platz3 .liste-platz { background: #e6b88a; }
.liste-zeile.eigen { box-shadow: inset 0 0 0 3px var(--gruen), 0 2px 0 var(--linie); }

/* ---------- 9. Bewegung reduzieren ---------- */
/* Gesetzt über den Schalter (data-ruhig) und als Grundeinstellung aus dem System übernommen */
html[data-ruhig="1"] *, html[data-ruhig="1"] *::before, html[data-ruhig="1"] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
}