/* =====================================================================
   COSI - Kinderbereich
   Groß, bunt, fingerfreundlich. Alles ab 64px Tippfläche, kurze Texte,
   kräftige Farben. Funktioniert am Tablet quer wie hoch und am Handy.
   ===================================================================== */

body.kind {
  background: radial-gradient(circle at 20% 0%, #d9efff 0%, #eaf4fd 45%, #fff6e8 100%);
  min-height: 100dvh;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.kidapp {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------- Profilauswahl */
.picker {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  gap: 2rem;
  padding: 2rem 1.2rem;
  text-align: center;
}
.picker h1 { font-size: clamp(2rem, 7vw, 3rem); margin: 0; letter-spacing: .06em; }
.picker p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: center;
}
.tile {
  border: none;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 1.2rem 1rem 1rem;
  width: 10.5rem;
  box-shadow: var(--shadow-lg);
  display: grid;
  justify-items: center;
  gap: .6rem;
  transition: transform .12s ease;
}
.tile:active { transform: scale(.96); }
.tile .avatar { width: 7rem; height: 7rem; }
.tile b { font-size: 1.35rem; }
.tile span { font-size: .82rem; color: var(--ink-soft); font-weight: 700; }

/* -------------------------------------------------------- Geheimzeichen */
.pinpad { display: grid; gap: 1.2rem; justify-items: center; }
.pinpad__preview {
  font-size: 2.6rem;
  min-height: 3.4rem;
  letter-spacing: .6rem;
}
.pinpad__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.pinpad__grid button {
  width: 5rem; height: 5rem;
  font-size: 2.6rem;
  border: none;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow);
}
.pinpad__grid button:active { transform: scale(.93); }
.pinpad--digits .pinpad__grid { grid-template-columns: repeat(3, 1fr); }
.pinpad--digits .pinpad__grid button { font-size: 2rem; font-weight: 800; }

/* ------------------------------------------------------------- Kopfzeile */
.kidbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: calc(.6rem + var(--safe-top)) .9rem .6rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.kidbar .avatar { width: 2.9rem; height: 2.9rem; flex: 0 0 auto; }
.kidbar__name { font-weight: 800; font-size: 1.1rem; }
.kidbar__spacer { flex: 1; }

.coin {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #fff3c4;
  color: #8a6100;
  border-radius: 999px;
  padding: .35rem .9rem;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: var(--shadow);
}
.coin--money { background: #ddf5e9; color: #1f6f52; }
.coin--time { background: #e4ecff; color: #33489c; }

.roundbtn {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 1.35rem;
  display: grid; place-items: center;
  position: relative;
}
.roundbtn:active { transform: scale(.93); }
.roundbtn .badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  background: var(--bad); color: #fff;
  border-radius: 999px; font-size: .75rem; font-weight: 800;
  display: grid; place-items: center;
}

/* ---------------------------------------------------------------- Inhalt */
.kidmain {
  flex: 1;
  padding: 1rem .9rem calc(2rem + var(--safe-bottom));
  max-width: 60rem;
  width: 100%;
  margin: 0 auto;
}

.hero {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
}
.hero h2 { font-size: 1.35rem; margin: 0 0 .2rem; }
.hero p { margin: 0; color: var(--ink-soft); }

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .9rem;
}
.wall--big { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

.card-btn {
  border: none;
  border-radius: var(--r-lg);
  padding: 1.1rem .8rem;
  min-height: 8.5rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .45rem;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
  line-height: 1.15;
}
.card-btn:active { transform: scale(.96); }
.card-btn .ico { font-size: 2.6rem; line-height: 1; }
.card-btn small { font-weight: 600; font-size: .74rem; opacity: .9; }
.card-btn .flag {
  position: absolute;
}
.card-btn[data-count]::after {
  content: attr(data-count);
  position: absolute;
  transform: translate(3.2rem, -3.4rem);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  min-width: 1.6rem;
  padding: .1rem .45rem;
  font-size: .8rem;
  box-shadow: var(--shadow);
}
.card-btn { position: relative; }

.stage-1 .card-btn { min-height: 10.5rem; font-size: 1.2rem; }
.stage-1 .card-btn .ico { font-size: 3.4rem; }
.stage-1 .wall { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.1rem; }

.strip {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  margin-bottom: 1rem;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip > * { flex: 0 0 auto; }

.mini {
  background: #fff;
  border-radius: var(--r);
  padding: .55rem .9rem;
  box-shadow: var(--shadow);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .45rem;
  border: none;
  font-size: .95rem;
}

.goal {
  background: #fff;
  border-radius: var(--r-lg);
  padding: .9rem 1.1rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.goal__bar { height: 1rem; border-radius: 999px; background: #eef2f7; overflow: hidden; margin-top: .5rem; }
.goal__bar > i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #43aa8b); }

/* ------------------------------------------------------ Aktionsleiste
   Die wichtigen Knöpfe („Fertig", „Nochmal") kleben am unteren Rand und
   sind immer erreichbar — auch wenn darüber gemalt oder geschrieben wird.
   Ohne das rutscht der Fertig-Knopf auf dem Handy aus dem Bild, und beim
   Scrollversuch zeichnet man stattdessen. */
.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: .7rem .6rem calc(.7rem + var(--safe-bottom));
  margin: .9rem -.9rem 0;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.actionbar .btn { flex: 1 1 8rem; max-width: 14rem; }

/* -------------------------------------------------------------- Aufgaben */
.task {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border-radius: var(--r-lg);
  padding: .9rem 1rem;
  box-shadow: var(--shadow);
  margin-bottom: .7rem;
  width: 100%;
  border: none;
  text-align: left;
}
.task__ico { font-size: 2.1rem; }
.task__main { flex: 1; min-width: 0; }
.task__title { font-weight: 800; font-size: 1.05rem; }
.task__sub { color: var(--ink-soft); font-size: .85rem; }
.task--done { opacity: .55; }

/* ---------------------------------------------------------------- Spiele */
.game {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 4.5rem);
}
.game__prompt {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 1.2rem 1.2rem;
  box-shadow: var(--shadow);
  text-align: center;
  margin-bottom: 1rem;
}
.game__prompt h2 {
  font-size: clamp(1.3rem, 5vw, 2rem);
  margin: 0;
  line-height: 1.25;
}
.game__display { font-size: 2.4rem; line-height: 1.3; margin-top: .5rem; word-break: break-word; }

.answers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}
.answers--wide { grid-template-columns: 1fr; }
.answer {
  min-height: 5.5rem;
  border: 3px solid transparent;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow);
  font-size: clamp(1.1rem, 4.5vw, 1.6rem);
  font-weight: 800;
  padding: .8rem;
  display: grid;
  place-items: center;
  transition: transform .1s ease;
}
.answer:active { transform: scale(.97); }
.answer.right { background: #d8f5e6; border-color: var(--good); }
.answer.wrong { background: #fde3e6; border-color: var(--bad); }
.answer .shape { width: 3.4rem; height: 3.4rem; }
.answer .swatch { width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 3px solid rgba(0,0,0,.12); }

/* Bildantwort: Für Kinder, die noch nicht lesen können, trägt das Bild
   die Bedeutung. Das Wort steht klein darunter — zum Mitwachsen. */
.answer--icon { gap: .3rem; align-content: center; }
.answer__icon {
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1.05;
  word-break: break-all;
}
.answer__label {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.stage-1 .answer { min-height: 7.5rem; }
.stage-1 .answer__label { font-size: 1.05rem; color: var(--ink); }

/* Witz des Tages */
.joke {
  background: linear-gradient(150deg, #fff3c4, #ffe08a);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
  border: none;
  width: 100%;
  text-align: left;
}
.joke b { display: block; font-size: 1.05rem; margin-bottom: .3rem; }
.joke__q { font-weight: 700; }
.joke__a { margin-top: .5rem; font-weight: 800; color: #8a5b00; }
.joke__hint { font-size: .8rem; color: #8a6100; margin-top: .4rem; }

.progressdots { display: flex; gap: .3rem; justify-content: center; margin-bottom: .8rem; }
.progressdots i { width: .7rem; height: .7rem; border-radius: 50%; background: #cfdae7; }
.progressdots i.done { background: var(--good); }
.progressdots i.miss { background: var(--bad); }
.progressdots i.now { background: var(--brand); transform: scale(1.35); }

.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 18rem; margin: 0 auto; }
.numpad button {
  min-height: 4rem; font-size: 1.6rem; font-weight: 800;
  border: none; border-radius: var(--r); background: #fff; box-shadow: var(--shadow);
}
.numinput {
  font-size: 2.4rem; font-weight: 800; text-align: center;
  border: 3px solid var(--line); border-radius: var(--r); padding: .4rem;
  width: 100%; max-width: 18rem; margin: 0 auto 1rem; display: block;
  background: #fff;
}

/* ---------------------------------------------------------------- Ergebnis */
.result { text-align: center; padding: 2rem 1rem; }
.result .big { font-size: 4.5rem; }
.result h2 { font-size: 2rem; margin: .4rem 0; }
.stars { font-size: 2.6rem; letter-spacing: .3rem; }

.confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 800; overflow: hidden;
}
.confetti i {
  position: absolute; width: .7rem; height: 1.1rem; border-radius: 2px;
  animation: fall 2.4s linear forwards;
}
@keyframes fall {
  from { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  to   { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

/* ---------------------------------------------------------------- Malen */
.paint { display: flex; flex-direction: column; gap: .7rem; }
/* Feste quadratische Malfläche: passt sich der Bildschirmhöhe an, damit
   Palette und Knöpfe darunter immer sichtbar bleiben. */
.paint__stage {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  touch-action: none;
  width: min(92vw, 54dvh, 30rem);
  aspect-ratio: 1;
  margin: 0 auto;
}
.paint__stage svg { width: 100%; height: 100%; display: block; }
.paint__stage svg .c { cursor: pointer; }
.paint__stage > div { width: 100%; height: 100%; }
.paint__stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.paint__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.palette { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.swatch-btn {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 3px solid #fff; box-shadow: var(--shadow);
}
.swatch-btn[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }

.tools { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ Nachspuren */
/* Schreibfeld im Seitenverhältnis der Vorlage (100 zu 122), an die
   Bildschirmhöhe gebunden — so bleibt der Fertig-Knopf immer sichtbar. */
.trace__stage {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  touch-action: none;
  position: relative;
  width: min(88vw, 40dvh, 22rem);
  aspect-ratio: 100 / 122;
  margin: 0 auto;
}
.trace__stage svg { width: 100%; height: 100%; display: block; }
.letterstrip { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.letterstrip button {
  width: 3.1rem; height: 3.1rem;
  border-radius: var(--r-sm);
  border: none; background: #fff; box-shadow: var(--shadow);
  font-size: 1.3rem; font-weight: 800;
  position: relative;
}
.letterstrip button .s { position: absolute; bottom: -.1rem; right: .15rem; font-size: .6rem; }

/* ---------------------------------------------------------------- Memory */
.memory { display: grid; gap: .6rem; justify-content: center; }
.memcard {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--r);
  background: linear-gradient(135deg, #3fa9f5, #1f7fc4);
  box-shadow: var(--shadow);
  font-size: 2.2rem;
  display: grid; place-items: center;
  transition: transform .18s ease;
  color: #fff;
}
.memcard.open { background: #fff; }
.memcard.done { background: #d8f5e6; opacity: .75; }

/* ------------------------------------------------------- Würfelspiel */
.board { display: grid; place-items: center; gap: 1rem; }
.board svg { width: min(92vw, 30rem); height: auto; }
.dice {
  width: 5rem; height: 5rem; border-radius: var(--r);
  background: #fff; box-shadow: var(--shadow-lg);
  font-size: 2.6rem; font-weight: 800; border: none;
  display: grid; place-items: center;
}

/* ------------------------------------------------------------- Sonstiges */
.emptykid { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.emptykid .big { font-size: 3.4rem; display: block; margin-bottom: .6rem; }

.badgewall { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .8rem; }
.badge-card {
  background: #fff; border-radius: var(--r-lg); padding: 1rem .6rem;
  text-align: center; box-shadow: var(--shadow);
}
.badge-card .ico { font-size: 2.6rem; display: block; }
.badge-card.locked { opacity: .35; filter: grayscale(1); }
.badge-card b { display: block; font-size: .9rem; margin-top: .3rem; }
.badge-card small { color: var(--ink-soft); font-size: .72rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .7rem; }
.gallery img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); background: #fff; }

.timer {
  font-size: 3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* =====================================================================
   Zwei Oberflächen, ein Programm.

   Stufe 1 (2–5 Jahre): Das Kind kann nicht lesen. Alles ist riesig,
   höchstens zwei Kacheln nebeneinander, jede Kachel spricht ihren Namen
   beim Antippen. Keine Zahlenkolonnen, keine Balken, kein Scrollen für
   das Wichtigste.

   Ab Stufe 2 (6+): Das Kind liest und will Überblick — mehr Kacheln,
   Punktestand, Fortschritt, Serie, Termine.
   ===================================================================== */

body[data-stufe="1"] .wall {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 46rem) {
  body[data-stufe="1"] .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body[data-stufe="1"] .card-btn {
  min-height: 11rem;
  font-size: 1.3rem;
  border-radius: var(--r-xl);
  gap: .6rem;
}
body[data-stufe="1"] .card-btn .ico { font-size: 4.2rem; }
body[data-stufe="1"] .card-btn small { font-size: .85rem; }

/* Kopfzeile: weniger Knöpfe, dafür groß genug für kleine Finger */
body[data-stufe="1"] .roundbtn {
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.7rem;
}
body[data-stufe="1"] .kidbar .avatar { width: 3.4rem; height: 3.4rem; }
body[data-stufe="1"] .kidbar__name { font-size: 1.25rem; }
body[data-stufe="1"] .coin { font-size: 1.15rem; padding: .4rem 1rem; }

body[data-stufe="1"] .hero { border-radius: var(--r-xl); padding: 1.2rem 1.3rem; }
body[data-stufe="1"] .hero h2 { font-size: 1.65rem; }
body[data-stufe="1"] .hero p { font-size: 1.1rem; }

/* Die große Missionskachel steht ganz oben und über die volle Breite */
.mission-tile {
  width: 100%;
  border: none;
  border-radius: var(--r-xl);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, #ff9d4d, #f4640a);
  box-shadow: var(--shadow-lg);
  transition: transform .12s ease;
}
.mission-tile:active { transform: scale(.98); }
.mission-tile .ico { font-size: 3.2rem; line-height: 1; }
.mission-tile b { display: block; font-size: 1.25rem; }
.mission-tile span { font-size: .95rem; opacity: .95; }
.mission-tile .pfeil { margin-left: auto; font-size: 2rem; }

body[data-stufe="1"] .mission-tile .ico { font-size: 4rem; }
body[data-stufe="1"] .mission-tile b { font-size: 1.45rem; }
body[data-stufe="1"] .mission-tile span { font-size: 1.05rem; }

/* Fortschritt der Missionen */
.mission-dots { display: flex; gap: .35rem; margin-top: .5rem; }
.mission-dots i {
  width: 1rem; height: 1rem; border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}
.mission-dots i.done { background: #fff; }

/* =====================================================================
   Grüße und Überraschungen von Zuhause
   ===================================================================== */
.gruss {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  background: rgba(19, 28, 38, .55);
  backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.gruss__karte {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2rem 1.6rem 1.6rem;
  text-align: center;
  max-width: min(92vw, 24rem);
  box-shadow: var(--shadow-lg);
  animation: gruss-rein .35s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes gruss-rein {
  from { opacity: 0; transform: scale(.8) translateY(20px); }
}
.gruss__emoji {
  font-size: 5.5rem;
  line-height: 1;
  animation: gruss-wippen 1.4s ease-in-out infinite;
}
@keyframes gruss-wippen {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.08); }
}
.gruss__von { font-size: 1.3rem; font-weight: 800; margin: .8rem 0 .2rem; }
.gruss__text { font-size: 1.1rem; color: var(--ink-soft); }

/* Überraschung, die auf der Startseite stehen bleibt */
.ueberraschung {
  width: 100%;
  border: none;
  text-align: left;
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: linear-gradient(135deg, #ffd76e, #ffab2e);
  box-shadow: var(--shadow);
}
.ueberraschung .ico { font-size: 2.6rem; }
.ueberraschung b { display: block; font-size: 1.05rem; }
.ueberraschung span { font-size: .95rem; }

/* „Wusstest du schon?" — ein Häppchen Wissen pro Tag */
.wusstest {
  width: 100%;
  border: none;
  text-align: left;
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #dcefff, #b9dcff);
  box-shadow: var(--shadow);
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.wusstest .ico { font-size: 2.2rem; line-height: 1; }
.wusstest b { display: block; font-size: .95rem; color: #1f5b8f; margin-bottom: .15rem; }
.wusstest span { font-size: 1.02rem; line-height: 1.4; }
body[data-stufe="1"] .wusstest span { font-size: 1.12rem; }

/* ------------------------------------------------ Kartenspiele (Mau-Mau) */
.spielkarte {
  width: 4.6rem;
  height: 6.4rem;
  border-radius: 12px;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
  transition: transform .12s ease;
}
button.spielkarte:active { transform: translateY(3px) scale(.97); }
button.spielkarte:not(:disabled):hover { transform: translateY(-4px); }
.spielkarte--klein { width: 3.4rem; height: 4.8rem; }
.spielkarte--matt { opacity: .38; filter: grayscale(.5); }
.spielkarte__zeichen {
  font-size: 2.1rem;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.spielkarte--klein .spielkarte__zeichen { font-size: 1.6rem; }

.maumau__tisch {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: flex-end;
  margin: 1rem 0;
}
.maumau__hand {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: .8rem;
  background: rgba(255, 255, 255, .55);
  border-radius: var(--r-lg);
  min-height: 7rem;
}
.maumau__wunsch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  max-width: 24rem;
  margin: 1.5rem auto;
}

/* --------------------------------------------- Spielraum: Code aus Bildern */
.raumcode {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin: 1.4rem 0;
  flex-wrap: wrap;
}
.raumcode span {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  font-size: 2.4rem;
}
.raumcode--eingabe span.leer { background: rgba(255, 255, 255, .5); color: #b7c6d4; }
.raumgitter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  max-width: 22rem;
  margin: 0 auto;
}