/* Andika (SIL, Open Font License – fonts/OFL.txt): Schrift für Leseanfänger, mitgeliefert, damit jedes Gerät
   gleich aussieht und es offline geht. latin = Deutsch; latin-ext nur bei Bedarf (z. B. ş, ğ, ẞ in Namen). */
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/andika-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/andika-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/andika-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/andika-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #fdf6ec;
  --papier: #ffffff;
  --text: #4a3f35;
  --leise: #5e5348;   /* Hinweise: 7,5:1 auf Weiß (vorher #8a7d70 mit nur 4,0:1) */
  --rand: #eadfcf;
  --akzent: #f28c38;
  --gruen: #5cb85c;
  --rot: #e05d5d;
  --stern: #f5c518;
  --schatten: 0 4px 0 rgba(74, 63, 53, 0.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Andika", "Nunito", system-ui, sans-serif;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.screen {
  display: none;
  flex-direction: column;
  height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
}
.screen.active { display: flex; }

.topbar, .bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}
.topbar h1 { margin: 0; font-size: 2rem; }
.topbar h2 { margin: 0; font-size: 1.3rem; }

.icon-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 20px;
  background: var(--papier);
  box-shadow: var(--schatten);
  font-size: 2rem;
  display: grid;
  place-items: center;
  transition: transform 0.1s;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn.small { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 14px; opacity: 0.6; }

/* Langes Drücken für Elternbereich: Fortschrittsring */
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.ring circle {
  fill: none; stroke: var(--akzent); stroke-width: 3;
  stroke-dasharray: 101; stroke-dashoffset: 101;
}
.icon-btn.halten .ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2s linear; }

/* Raster */
.grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px;
  padding: 12px 0 24px;
  align-content: start;
}
.kachel {
  aspect-ratio: 1;
  border: none;
  border-radius: 22px;
  background: var(--papier);
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.1s;
}
.kachel:active { transform: scale(0.94); }
/* Alle Buchstaben in einer ruhigen Farbe: das Kind soll sich die Form merken, nicht "das lila ist d" */
.kachel .zeichen { font-size: 2.6rem; font-weight: 700; line-height: 1; color: #2f3b52; }
.kachel .zeichen-svg { height: 1.45em; width: auto; display: block; }
/* Das Bild ist für Kinder, die noch nicht lesen, der Anker – darum groß */
.kachel .mini { font-size: 2.1rem; line-height: 1; margin-top: 4px; }
/* Bilddateien so groß wie ein Emoji in derselben Schriftgröße */
.bild-datei { height: 1.15em; width: auto; vertical-align: -0.2em; }
.bild-datei.foto { width: 1.15em; object-fit: cover; border-radius: 0.18em; }

/* Montessori: aktuelle Gruppe groß (2 je Reihe), darunter die schon gelernten zum Wiederholen (3 je Reihe wie A–Z) */
.grid.montessori { grid-template-columns: repeat(6, 1fr); }
.kachel.jetzt { grid-column: span 3; }
.kachel.gelernt { grid-column: span 2; }
.kachel.jetzt .zeichen { font-size: 3.6rem; }
.kachel.jetzt .mini { font-size: 3rem; }
.kachel.gelernt { border-radius: 18px; }
.kachel.gelernt .zeichen { font-size: 2.2rem; }
.kachel.gelernt .mini { font-size: 1.7rem; }
.kachel.kommt-dazu { animation: aufploppen 0.6s ease-out backwards; }
.kachel.kommt-dazu:nth-child(2) { animation-delay: 0.15s; }
.kachel.kommt-dazu:nth-child(3) { animation-delay: 0.3s; }
.kachel.kommt-dazu:nth-child(4) { animation-delay: 0.45s; }
.raster-trenner { grid-column: 1 / -1; height: 2px; background: #e8dcc8; margin: 6px 20%; }
@media (orientation: landscape) {
  .grid.montessori { grid-template-columns: repeat(8, 1fr); }
  .kachel.jetzt { grid-column: span 2; }
  .kachel.gelernt { grid-column: span 1; }
}
/* Elternbereich: Sterne je Buchstabe */
.fortschritt-buchstaben { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.9rem; margin: 8px 0 12px; }
.fortschritt-buchstaben b { margin-right: 3px; }
.fortschritt-buchstaben .zu { opacity: 0.5; }
.karte h3.unter { margin-top: 16px; }
.jubel.mit-schloss::after {
  content: '✨'; position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); font-size: 4rem;
  animation: sticker-rein 3s ease forwards;
}


/* Nachspuren */
.bild-karte {
  flex: 1;
  max-width: 220px;
  height: 72px;
  border: none;
  border-radius: 22px;
  background: var(--papier);
  box-shadow: var(--schatten);
  font-size: 2.8rem;
  display: grid;
  place-items: center;
}
.bild-karte:active { transform: scale(0.96); }
.bild-karte.wackeln span { display: inline-block; animation: wackeln 0.6s ease; }

.tafel {
  position: relative;
  flex: 1;
  margin: 12px 0;
  border-radius: 28px;
  background: var(--papier);
  box-shadow: var(--schatten);
  overflow: hidden;
  min-height: 0;
}
.tafel canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#vorlage, #lichter { pointer-events: none; }

/* Startpunkt beim geführten Nachspuren: blauer, sanft pulsierender Punkt mit Strich-Nummer
   (Blau statt Grün: bleibt bei Rot-Grün-Schwäche deutlich von den orangen Pfeilen unterscheidbar) */
.startpunkt {
  position: absolute;
  border-radius: 50%;
  background: #1d5fbf;
  border: 3px solid #fff;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 0 rgba(29, 95, 191, 0.55);
  animation: startpuls 1.6s ease-out infinite;
  pointer-events: none;
  z-index: 2;
}
.startpunkt.hinweis-puls { animation: hinweis 0.5s ease 3, startpuls 1.6s ease-out 1.5s infinite; }
@keyframes startpuls {
  0% { box-shadow: 0 0 0 0 rgba(29, 95, 191, 0.5); }
  100% { box-shadow: 0 0 0 18px rgba(29, 95, 191, 0); }
}
@keyframes hinweis {
  50% { transform: scale(1.45); }
}

.sterne { position: absolute; inset: 0; pointer-events: none; }
.sterne span {
  position: absolute;
  font-size: 2rem;
  animation: fliegen 1.2s ease-out forwards;
}

.fortschritt { font-size: 1.8rem; letter-spacing: 4px; }

.jubel {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
.jubel span { font-size: 9rem; transform: scale(0.2); }
.jubel.zeigen { opacity: 1; }
.jubel.zeigen span { animation: aufpoppen 1.6s ease forwards; }

@keyframes wackeln {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg) scale(1.1); }
  75% { transform: rotate(12deg) scale(1.1); }
}
@keyframes fliegen {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(160deg); opacity: 0; }
}
@keyframes aufpoppen {
  0% { transform: scale(0.2); opacity: 0; }
  25% { transform: scale(1.15); opacity: 1; }
  40% { transform: scale(1); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Startseite: große Spiel-Kacheln, ohne Scrollen (2 Spalten hochkant, 4 im Querformat) */
.spiele-raster {
  flex: 1; display: grid; gap: 18px; padding: 10px 0 30px;
  grid-template-columns: repeat(2, min(170px, 40vw, 19vh)); grid-auto-rows: min(170px, 40vw, 19vh);
  justify-content: center; align-content: center;
}
@media (orientation: landscape) {
  .spiele-raster { grid-template-columns: repeat(4, min(180px, 20vw, 32vh)); grid-auto-rows: min(180px, 20vw, 32vh); }
}
.spiel-btn {
  border: none; border-radius: 32px; background: var(--papier); box-shadow: var(--schatten);
  font-size: clamp(2.6rem, 9vh, 5rem); display: grid; place-items: center; padding: 0;
}
.spiel-btn[hidden] { display: none; }
.spiel-btn:active { transform: scale(0.94); }

/* Memory */
.memory-karten {
  flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  align-content: center; width: 100%; max-width: 640px; margin: 0 auto; padding: 12px 0;
}
.memory-karte { aspect-ratio: 3 / 4; border: none; background: none; padding: 0; perspective: 600px; }
.memory-karte .innen { position: relative; width: 100%; height: 100%; transition: transform 0.45s; transform-style: preserve-3d; }
.memory-karte.offen .innen, .memory-karte.paar .innen { transform: rotateY(180deg); }
.memory-karte .vorne, .memory-karte .hinten {
  position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; box-shadow: var(--schatten);
  display: grid; place-items: center;
}
.memory-karte .hinten {
  background: repeating-linear-gradient(45deg, #1d5fbf 0 10px, #2a6fd0 10px 20px); color: #fff; font-size: 2rem;
}
.memory-karte .vorne { background: var(--papier); transform: rotateY(180deg); color: #4a3f35; }
.memory-karte .vorne .zeichen-svg { height: 70%; width: auto; }
.memory-karte.paar .vorne { box-shadow: 0 0 0 4px #f5c518; }
.memory-karte.paar .innen { animation: paar-huepfen 0.6s ease 0.45s; }
@keyframes paar-huepfen { 50% { transform: rotateY(180deg) scale(1.08); } }

/* Buchstaben-Jagd */
.jagd-inhalt { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.jagd-buchstabe {
  width: min(56vw, 260px); aspect-ratio: 1; border-radius: 32px; background: var(--papier); box-shadow: var(--schatten);
  display: grid; place-items: center; color: #1d5fbf; animation: lauschen 2.4s ease-in-out infinite;
}
.jagd-buchstabe .zeichen-svg { height: 80%; width: auto; }
.jagd-foto img { width: min(56vw, 260px); aspect-ratio: 1; object-fit: cover; border-radius: 28px; box-shadow: var(--schatten); display: block; }
.jagd-knoepfe { display: flex; gap: 18px; }
.gross-btn {
  width: 84px; height: 84px; border-radius: 50%; border: none; background: var(--papier); box-shadow: var(--schatten);
  font-size: 2.6rem; display: grid; place-items: center;
}
.gross-btn:active { transform: scale(0.92); }
.gross-btn.gruen { background: #e3f3e3; }
.gross-btn.aktiv { background: var(--rot); animation: pulsieren 1s infinite; }
.jagd-hinweis { color: var(--leise); font-size: 0.85rem; text-align: center; max-width: 320px; margin: 0; font-family: system-ui, sans-serif; }
.album-abschnitt { grid-column: 1 / -1; font-size: 1.6rem; margin: 6px 0 -2px; }
.album-funde { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.fund { width: 84px; height: 84px; border-radius: 18px !important; overflow: hidden; padding: 0; flex: 0 0 auto; }
.fund img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fund small { z-index: 1; }

/* Wörter legen */
.legen-inhalt { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.legen-bild {
  border: none; background: var(--papier); box-shadow: var(--schatten); border-radius: 28px;
  font-size: 4.5rem; width: 130px; height: 130px; display: grid; place-items: center;
}
.legen-bild .bild-datei { height: 1.1em; }
.legen-felder { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.legen-feld {
  width: 60px; height: 72px; border: none; border-bottom: 4px solid #c7b08a; background: transparent;
  display: grid; place-items: center; color: #1d5fbf; padding: 0;
}
.legen-feld.naechstes { border-bottom-color: #f28c38; animation: pulsieren 1.4s infinite; }
.legen-feld .zeichen-svg, .legen-stein .zeichen-svg { height: 58px; width: auto; }
.legen-feld.voll { animation: huepfen 0.5s ease; }
.legen-steine { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 420px; }
.legen-stein {
  width: 62px; height: 72px; border: none; border-radius: 14px; background: #fde9d6; box-shadow: var(--schatten);
  display: grid; place-items: center; color: #4a3f35; padding: 0;
}
.legen-stein:active { transform: scale(0.92); }
.legen-stein.weg { visibility: hidden; }
.legen-stein.falsch { animation: wackeln 0.5s ease; }

/* Sticker-Album */
.album-titel { font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.album-titel span { font-size: 1.2rem; color: var(--leise); }
.icon-btn.platzhalter { visibility: hidden; }
.album-raster {
  flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px; padding: 14px 0 24px; align-content: start;
}
.sticker {
  aspect-ratio: 1; border-radius: 50%; border: 3px dashed #d9c9b0; background: var(--bg);
  display: grid; place-items: center; font-size: 2.3rem; position: relative; color: #d9c9b0;
}
.sticker.hat { border: 3px solid #fff; background: var(--papier); box-shadow: 0 3px 0 rgba(74,63,53,0.15), 0 0 0 3px #f5c518; color: inherit; }
.sticker .bild-datei { height: 1.1em; }
.sticker small {
  position: absolute; bottom: -4px; right: -2px; font-size: 0.8rem; font-weight: 700; background: #1d5fbf; color: #fff;
  border-radius: 10px; padding: 0 6px; line-height: 1.4;
}
.sticker:not(.hat) small { background: #d9c9b0; }
.sticker-neu {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-size: 2.6rem; opacity: 0;
  background: #fff; border-radius: 24px; padding: 4px 16px; box-shadow: var(--schatten);
}
.jubel.mit-sticker .sticker-neu { animation: sticker-rein 2.4s ease forwards; }
@keyframes sticker-rein { 0% { opacity: 0; transform: translate(-50%, -30px) scale(0.5); } 20%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }

/* Fingerfarben */
.farbwahl {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 5;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px;
  background: var(--papier); border-radius: 28px; box-shadow: 0 6px 24px rgba(74,63,53,0.25); max-width: calc(100vw - 32px);
}
.farbe-tupfer {
  width: 52px; height: 52px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #d9c9b0;
  font-size: 1.6rem; display: grid; place-items: center;
}
.farbe-tupfer.gewaehlt { box-shadow: 0 0 0 4px #1d5fbf; }
.farbe-tupfer.regenbogen { background: conic-gradient(#e8463c, #f5c518, #4caf50, #3d8fd1, #9b59b6, #e8463c); }
.farbe-tupfer.glitzer { background: radial-gradient(circle at 30% 30%, #fff6c2, #e6a700 60%); }
.farbe-tupfer.bunt { background: conic-gradient(#f28c38 0 33%, #3d8fd1 0 66%, #4caf50 0); }

/* Mein Name */
.name-leiste { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; flex-wrap: wrap; }
.name-leiste span {
  min-width: 40px; padding: 2px 8px; border-radius: 12px; text-align: center;
  font-size: 1.9rem; font-weight: 700; color: #c7b08a; background: var(--papier); box-shadow: var(--schatten);
}
.name-leiste span.fertig { color: #fff; background: #1d5fbf; }
.name-leiste .zeichen-svg { height: 2.4rem; width: auto; display: block; }
.name-leiste span.aktuell { color: var(--text); outline: 3px solid #f28c38; }

/* Hör-Spiel */
.runden-punkte { display: flex; gap: 8px; }
.runden-punkte span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c7b08a; background: var(--papier); }
.runden-punkte span.voll { background: #f5c518; border-color: #b07800; }
.hoeren-ohr { text-align: center; font-size: 3.5rem; margin: 18px 0 6px; animation: lauschen 2.4s ease-in-out infinite; }
@keyframes lauschen { 50% { transform: scale(1.12) rotate(-6deg); } }
.hoeren-karten {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; align-content: center; padding-bottom: 16px;
  width: 100%; max-width: 720px; margin: 0 auto;
}
.hoer-karte {
  border: none; border-radius: 24px; background: var(--papier); box-shadow: var(--schatten);
  aspect-ratio: 3 / 4; font-size: clamp(2.6rem, 15vw, 6.5rem); white-space: nowrap;
  display: grid; place-items: center; transition: transform 0.15s, opacity 0.4s;
}
.hoer-karte .bild-datei { height: 1.1em; }
.hoer-karte:has(.bild-datei + .bild-datei), .hoer-karte.doppelt { font-size: clamp(2rem, 9vw, 4.5rem); }
.hoer-karte:active { transform: scale(0.95); }
.hoer-karte.richtig { animation: huepfen 0.7s ease; box-shadow: 0 0 0 6px #1d5fbf; }
.hoer-karte.falsch { animation: wackeln 0.6s ease; opacity: 0.35; }
@keyframes huepfen { 30% { transform: translateY(-24px) scale(1.08); } 60% { transform: translateY(0) scale(1); } }
.hoeren-jubel span, #hoeren-jubel span { font-size: 9rem; }

/* Wer spielt? */
.wer-kopf { justify-content: center; }
.wer-liste {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  align-content: center;
  padding: 16px 0;
}
.wer-kachel {
  border: none;
  border-radius: 32px;
  background: var(--papier);
  box-shadow: var(--schatten);
  padding: 24px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.1s;
}
.wer-kachel:active { transform: scale(0.95); }
.wer-bild { font-size: 5.5rem; line-height: 1; }
.wer-name { font-size: 1.5rem; font-weight: 700; }

/* Wer spielt gerade (oben links auf der Startseite) */
.kind-btn {
  width: 52px; height: 52px;
  border: none; border-radius: 16px;
  background: var(--papier); box-shadow: var(--schatten);
  font-size: 2rem; line-height: 1;
  display: grid; place-items: center;
}
.kind-btn:active { transform: scale(0.92); }

/* Elternbereich */
.eltern { font-family: system-ui, sans-serif; }
.eltern-inhalt { flex: 1; overflow-y: auto; padding: 16px 0 24px; display: flex; flex-direction: column; gap: 16px; }
.karte { background: var(--papier); border-radius: 16px; padding: 16px; box-shadow: var(--schatten); }
.karte h3 { margin: 0 0 10px; font-size: 1.05rem; }
.hinweis { margin: 0 0 12px; color: var(--leise); font-size: 0.92rem; line-height: 1.4; }
.umschalter { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 1rem; }
.umschalter input { width: 22px; height: 22px; accent-color: var(--akzent); }

.profile { display: flex; flex-direction: column; margin-bottom: 8px; }
.profil-zeile { border-bottom: 1px solid var(--rand); padding: 10px 0; }
.profil-zeile:last-child { border-bottom: none; }
.profil-zeile small { color: var(--leise); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.knopf-reihe [hidden] { display: none; }

.anpassen-zeile {
  display: grid;
  grid-template-columns: 32px 52px 1fr;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
}
.anpassen-zeile:last-child { border-bottom: none; }
.anpassen-zeile .z { font-size: 1.5rem; font-weight: 700; text-align: center; }
.anpassen-zeile .vorschau { font-size: 2.2rem; text-align: center; line-height: 1; }
.anpassen-zeile .w { font-size: 0.95rem; line-height: 1.35; }
.anpassen-zeile .w small { color: var(--leise); }
.anpassen-zeile .w b { color: #2e7d32; font-weight: 600; }
.anpassen-zeile .aktionen {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px 18px;
  flex-wrap: wrap;
}
/* Knöpfe einer Gruppe bleiben zusammen; umgebrochen wird nur zwischen "Bild" und "Stimme" */
.anpassen-zeile .gruppe { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.anpassen-zeile .gruppe-name { font-size: 0.8rem; color: var(--leise); margin-right: 2px; }
.anpassen-zeile .mini-btn { width: 40px; height: 40px; }

.eigene-woerter { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding-left: 42px; }
.eigenes-wort {
  display: grid; grid-template-columns: 40px 1fr auto auto auto auto; align-items: center; gap: 6px;
  background: var(--bg); border-radius: 12px; padding: 4px 6px;
}
.eigenes-wort .vorschau { font-size: 1.8rem; text-align: center; line-height: 1; }
.eigenes-wort .w { font-size: 0.92rem; line-height: 1.3; }
.eigenes-wort .w small { color: var(--leise); }
.eigenes-wort .w b { color: #2e7d32; font-weight: 600; }
.eigenes-wort .mini-btn { width: 36px; height: 36px; font-size: 1rem; }
.text-btn.klein { padding: 6px 10px; font-size: 0.88rem; align-self: flex-start; }

.lob-zeile {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rand);
}
.lob-zeile:last-child { border-bottom: none; }
.lob-zeile .w { font-size: 0.95rem; line-height: 1.35; }
.lob-zeile .w small { color: var(--leise); }
.lob-zeile .w b, .hinweis b { color: #2e7d32; font-weight: 600; }   /* Text-Grün: 5,1:1 auf Weiß (--gruen nur 2,5:1, bleibt für Flächen) */
.lob-zeile .mini-btn { width: 40px; height: 40px; }
.mini-btn {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--bg); font-size: 1.15rem;
}
.mini-btn:disabled { opacity: 0.3; }
.mini-btn.aktiv { background: var(--rot); border-color: var(--rot); animation: pulsieren 1s infinite; }
@keyframes pulsieren { 50% { opacity: 0.6; } }

.kinder-liste { display: flex; flex-direction: column; margin-bottom: 10px; }
.kind-zeile {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
  border: none; border-bottom: 1px solid var(--rand); background: none;
  padding: 10px 0; text-align: left;
}
.kind-zeile:last-child { border-bottom: none; }
.kind-zeile .kind-bild { font-size: 2.4rem; text-align: center; line-height: 1; }
.kind-zeile .w { font-size: 1rem; line-height: 1.35; }
.kind-zeile .w small { color: var(--leise); }
.kind-zeile .pfeil { font-size: 1.2rem; }

.tier-auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tier {
  aspect-ratio: 1; border: 2px solid var(--rand); border-radius: 14px;
  background: var(--bg); font-size: 1.7rem;
}
/* Spiele-Regal im Elternbereich */
.regal-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.regal-spiel {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; border: 2px solid #e3d8c6;
  background: var(--papier); font: inherit; font-size: 0.95rem; text-align: left; opacity: 0.55;
}
.regal-spiel span { font-size: 1.6rem; }
.regal-spiel.gewaehlt { border-color: var(--akzent); background: #fde9d6; opacity: 1; }
.tier.gewaehlt { border-color: var(--akzent); background: #fde9d6; }

.textfeld {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 10px 12px;
  border: 1px solid var(--rand); border-radius: 12px; background: var(--bg); color: var(--text);
}

.text-btn { border: 1px solid var(--rand); background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.text-btn.warnung { color: var(--rot); border-color: var(--rot); }

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
  .kachel .zeichen { font-size: 3.6rem; }
  .icon-btn { width: 80px; height: 80px; font-size: 2.6rem; }
  .bild-karte { height: 88px; font-size: 3.4rem; max-width: 300px; }
}

/* Silben-Trommel */
#silben { overscroll-behavior: none; }
.silben-inhalt { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding-bottom: 40px; }
#silben-bild { width: 170px; height: 170px; font-size: 6rem; }
.silben-reihen { display: flex; flex-direction: column; gap: 4px; min-height: 90px; justify-content: flex-end; }
.silben-boegen { display: flex; gap: min(10px, 1.5vw); justify-content: center; min-height: 42px; align-items: flex-end; min-width: 200px; }
/* bis zu 6 Bögen passen auch auf 360 px breite Handys */
.silben-bogen { width: min(72px, 13vw); height: 40px; color: #b8470b; transition: opacity 0.6s; }
.silben-bogen path { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.silben-bogen.app { color: #1d5fbf; }
.silben-bogen.neu { animation: aufploppen 0.25s ease-out; }
.silben-bogen.leuchtet path { stroke-width: 14; }
.silben-bogen.leuchtet { filter: drop-shadow(0 0 6px #f5c518); animation: huepfen 0.45s ease; }
/* Eigene Bögen bleiben sichtbar (nicht "ausgelöscht"), damit das Kind mit den blauen Bögen vergleichen kann */
.silben-bogen.blass { opacity: 0.3; }
.silben-trommel {
  position: relative; width: min(62vw, 260px); height: min(62vw, 260px); border-radius: 50%; border: 6px solid #c7b08a;
  background: var(--papier); box-shadow: var(--schatten); font-size: min(30vw, 130px);
  display: grid; place-items: center; padding: 0; opacity: 0.5; transition: opacity 0.3s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* unsichtbarer Trefferrand für Kinderfinger */
.silben-trommel::after { content: ''; position: absolute; inset: -20px; border-radius: 50%; }
.silben-trommel.wach { opacity: 1; }
/* Kind ist dran: sanft pulsieren bis zum ersten Schlag */
.silben-trommel.wartet { animation: trommelwarten 1.6s ease-in-out infinite; }
.silben-trommel.aufwachen { animation: huepfen 0.5s ease; }
.silben-trommel.schlag { animation: trommelschlag 0.15s ease; }
.silben-trommel.wackeln { animation: wackeln 0.6s ease; }
@keyframes trommelschlag { 50% { transform: scale(0.92); } }
@keyframes trommelwarten { 50% { transform: scale(1.05); box-shadow: 0 0 0 10px #fde9d6; } }
@keyframes aufploppen { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (min-width: 700px) and (orientation: landscape) {
  .silben-inhalt { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 30px 0; }
  #silben-bild { grid-column: 1; grid-row: 1; width: 220px; height: 220px; }
  .silben-reihen { grid-column: 1; grid-row: 2; }
  .silben-trommel { width: 320px; height: 320px; font-size: 160px; }
}

/* Spiel-Ende: großes Haus, kleineres Nochmal (kein automatisches Weiterspielen) */
.spiel-ende {
  position: fixed; left: 0; right: 0; bottom: max(40px, env(safe-area-inset-bottom)); z-index: 6;
  display: flex; justify-content: center; align-items: center; gap: 28px;
}
.spiel-ende[hidden] { display: none; }
.spiel-ende button { border: none; border-radius: 50%; background: var(--papier); box-shadow: var(--schatten); display: grid; place-items: center; }
.spiel-ende .ende-home { width: 110px; height: 110px; font-size: 3.4rem; }
.spiel-ende .ende-nochmal { width: 76px; height: 76px; font-size: 2.2rem; }

/* Zeig mir das mmm */
.zeigen-punkte { display: flex; gap: 14px; }
.zeigen-punkte .punkt-gruppe { display: flex; gap: 5px; }
.zeigen-punkte .punkt-gruppe span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #c7b08a; background: var(--papier); }
.zeigen-punkte .punkt-gruppe span.voll { background: #f5c518; border-color: #b07800; }
.zeigen-symbol { text-align: center; font-size: 3.2rem; margin: 14px 0 4px; display: block; }
.zeigen-symbol.huepft { animation: huepfen 0.6s ease; }
.zeigen-karten { flex: 1; display: grid; gap: 14px; align-content: center; justify-content: center; width: 100%; max-width: 720px; margin: 0 auto; }
.zeigen-karten.einzeln { grid-template-columns: min(260px, 64vw); }
.zeigen-karten.reihe { grid-template-columns: repeat(3, minmax(0, 200px)); }
.zeigen-karte {
  border: none; border-radius: 26px; background: var(--papier); box-shadow: var(--schatten); color: #2f3b52;
  aspect-ratio: 5 / 6; display: grid; place-items: center; padding: 6%; transition: opacity 0.4s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.zeigen-karte .zeichen-svg { width: 100%; height: 100%; }
.zeigen-karte.kommt { animation: aufploppen 0.4s ease-out; }
.zeigen-karte.pulsiert { animation: trommelwarten 1.6s ease-in-out infinite; }
.zeigen-karte.huepft { animation: huepfen 0.6s ease; }
.zeigen-karte.wackelt { animation: wackeln 0.6s ease; }
.zeigen-karte.blass { opacity: 0.45; }
.zeigen-karte.richtig { box-shadow: 0 0 0 6px #1d5fbf; }
.zeigen-ablage { display: flex; gap: 12px; justify-content: center; padding: 10px 0 max(40px, 8vh); }
.zeigen-ablage[hidden] { display: none; }
.zeigen-feld {
  width: 60px; height: 72px; border: none; border-bottom: 4px solid #c7b08a; background: transparent;
  display: grid; place-items: center; color: #2f3b52; padding: 0;
}
.zeigen-feld .zeichen-svg { height: 58px; width: auto; }
.zeigen-feld.voll { animation: huepfen 0.5s ease; }

/* Elternbereich: Stimme einsprechen */
.studio-reiter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.studio-reiter button { flex: 1; border: 2px solid #e3d8c6; border-radius: 14px; background: var(--papier); padding: 8px 6px; font: inherit; font-size: 0.95rem; }
.studio-reiter button.aktiv { border-color: var(--akzent); background: #fde9d6; }
.studio-balken { height: 8px; border-radius: 4px; background: #eadfcd; overflow: hidden; margin-bottom: 12px; }
.studio-balken span { display: block; height: 100%; width: 0; background: #1d5fbf; transition: width 0.3s; }
.studio-karte { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.studio-bild { font-size: 3.4rem; line-height: 1; min-height: 3.4rem; }
.studio-bild .bild-datei { height: 1em; }
.studio-text { font-size: 2.6rem; font-weight: 700; color: #2f3b52; }
.studio-text.eigen::after { content: ' ✓'; color: #1b7f3a; font-size: 1.6rem; }
.studio-mikro {
  width: 104px; height: 104px; border-radius: 50%; border: 4px solid #c7b08a; background: var(--papier);
  box-shadow: var(--schatten); font-size: 3rem; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.studio-mikro.aktiv { border-color: var(--rot); background: #fde2dc; animation: pulsieren 1s infinite; }
.studio-meldung { min-height: 2.6em; margin: 0; }
.studio-meldung.warnung { color: #b8470b; }
.studio-gut:not(:disabled) { border-color: #1d5fbf; color: #1d5fbf; font-weight: 700; }
.studio-nav { opacity: 0.8; }

/* Willkommen (erster Start, für Eltern) */
.willkommen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; max-width: 440px; margin: 0 auto; padding: 20px 8px; }
.willkommen h2 { margin: 0; font-size: 1.8rem; }
.willkommen p { margin: 0; line-height: 1.45; }
.willkommen-bild { font-size: 4.5rem; }
.willkommen-btn { width: 100%; max-width: 320px; padding: 16px; border-radius: 20px; border: 3px solid #e3d8c6;
  background: var(--papier); box-shadow: var(--schatten); font: inherit; font-size: 1.25rem; font-weight: 700; }
.willkommen-btn.haupt { border-color: var(--akzent); background: #fde9d6; }
.willkommen-btn:active { transform: scale(0.97); }

/* Wörterkiste */
.kiste-lektion { flex: 1; display: flex; flex-direction: column; }
.kiste-lektion[hidden], .kiste-erzaehlen[hidden], .kiste-wahl[hidden] { display: none; }
.kiste-karte { font-size: clamp(3rem, 18vw, 7rem); line-height: 1; }
.zeigen-karten.einzeln .kiste-karte { font-size: clamp(6rem, 36vw, 10rem); }
.kiste-daumen { align-self: center; width: 110px; height: 110px; border-radius: 50%; border: 4px solid #c7b08a; background: var(--papier);
  box-shadow: var(--schatten); font-size: 3.4rem; margin-bottom: max(40px, 6vh); animation: trommelwarten 1.6s ease-in-out infinite; }
.kiste-daumen[hidden] { display: none; }
.kiste-feld { font-size: 2.4rem; }
.kiste-erzaehlen { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 10px 4px 170px; overflow-y: auto; }
.kiste-erzaehl-bilder { display: flex; gap: 16px; }
.kiste-erzaehl-bilder button { border: none; background: var(--papier); border-radius: 22px; box-shadow: var(--schatten);
  font-size: clamp(3rem, 16vw, 5rem); padding: 8px 12px; line-height: 1.1; }
.kiste-fuer-eltern { background: var(--papier); border-radius: 20px; box-shadow: var(--schatten); padding: 14px 18px; max-width: 460px;
  color: #6b5d4f; font-size: 0.95rem; line-height: 1.45; }
.kiste-fuer-eltern p { margin: 0 0 6px; }
.kiste-fuer-eltern ul { margin: 0 0 8px; padding-left: 20px; }
/* Startseite mit vielen Spielen: 3 Spalten (hochkant) bzw. 5 (quer) */
.spiele-raster.viele { grid-template-columns: repeat(3, min(130px, 29vw, 17vh)); grid-auto-rows: min(130px, 29vw, 17vh); gap: 14px; }
.spiele-raster.viele .spiel-btn { border-radius: 26px; font-size: clamp(2.2rem, 7vh, 4rem); }
@media (orientation: landscape) {
  .spiele-raster.viele { grid-template-columns: repeat(6, min(150px, 15vw, 34vh)); grid-auto-rows: min(150px, 15vw, 34vh); }
}

/* Über die App & Datenschutz */
.info .karte p { margin: 0 0 10px; line-height: 1.5; font-size: 0.95rem; }
.info .karte a { color: #1d5fbf; }

/* Reim-Paare */
.reime-inhalt { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 30px; }
.reime-ziel { width: min(210px, 52vw); }
.reime-ziel .reim-karte { width: 100%; font-size: clamp(5rem, 28vw, 8rem); }
.reime-pfeil { font-size: 2rem; opacity: 0.7; }
.reime-karten { grid-template-columns: repeat(2, min(170px, 42vw)); flex: 0 0 auto; }

/* Erzählen aufnehmen (Wörterkiste) und Erzählungen im Album */
.kiste-mikro { width: 96px; height: 96px; border-radius: 50%; border: 4px solid #c7b08a; background: var(--papier);
  box-shadow: var(--schatten); font-size: 2.8rem; flex: 0 0 auto; }
.kiste-mikro.aktiv { border-color: var(--rot); background: #fde2dc; animation: pulsieren 1s infinite; }
.kiste-mikro.fertig::after { content: '✓'; position: relative; left: 4px; font-size: 1.2rem; color: #1b7f3a; }
.sticker.erzaehlung span { font-size: 1.25rem; letter-spacing: -2px; white-space: nowrap; }

/* Eigene Fotos in der Wörterkiste (statt Emoji) */
.kiste-foto { width: 82%; height: 82%; object-fit: cover; border-radius: 18px; display: block; }
.zeigen-feld .kiste-foto { width: 56px; height: 56px; border-radius: 10px; }
.kiste-erzaehl-bilder .kiste-foto { width: 1.1em; height: 1.1em; border-radius: 12px; }
.studio-bild .kiste-foto { width: 3.4rem; height: 3.4rem; margin: 0 auto; }
.sticker.erzaehlung .kiste-foto { display: inline-block; width: 1.2em; height: 1.2em; border-radius: 4px; vertical-align: middle; }
#studio-foto[hidden] { display: none; }

/* Zu zweit trommeln: zwei Trommeln; die zweite und ihre Bögen gestrichelt (Unterschied über das Muster, nicht die Farbe –
   Blau bleibt den Bögen der App vorbehalten) */
.silben-trommeln { display: flex; gap: 16px; justify-content: center; align-items: center; }
.silben-trommeln.zwei .silben-trommel { width: min(43vw, 220px); height: min(43vw, 220px); font-size: min(20vw, 100px); border-color: #b8470b; }
.silben-trommeln.zwei #silben-trommel-2 { border-style: dashed; }
.silben-trommel[hidden] { display: none; }
.silben-bogen.zweite path { stroke-dasharray: 9 9; }
#btn-silben-zwei.aktiv { box-shadow: 0 0 0 4px #b8470b; }
@media (min-width: 700px) and (orientation: landscape) {
  .silben-trommeln { grid-column: 2; grid-row: 1 / 3; }
  .silben-trommeln.zwei .silben-trommel { width: 240px; height: 240px; font-size: 120px; }
}

/* Pegel-Balken im Eltern-Studio */
.studio-pegel { width: 160px; height: 8px; border-radius: 4px; background: #eadfcd; overflow: hidden; }
.studio-pegel span { display: block; height: 100%; width: 0; background: #1d5fbf; transition: width 0.06s linear; }

#sicherung-erinnerung.warnung { color: #b8470b; font-weight: 700; }

/* Bis Kinder/Regal geladen sind keine Spiel-Kacheln zeigen (sonst springen sie, und ein Kind trifft das falsche Spiel) */
body.laedt #home .spiele-raster { visibility: hidden; }
/* Wörter legen: Hinweis nach zwei Fehlversuchen */
.legen-stein.hinweis { animation: trommelwarten 1.4s ease-in-out infinite; box-shadow: 0 0 0 4px #1d5fbf; }
.kiste-mikro[hidden] { display: none; }
.kiste-mikro.wackelt { animation: wackeln 0.6s ease; }
#btn-jagd-stimme.wackelt { animation: wackeln 0.6s ease; }

/* Album noch leer: ein Stift zum Nachspuren */
.album-leer { grid-column: 1 / -1; justify-self: center; width: 140px; height: 140px; border-radius: 50%; border: none;
  background: var(--papier); box-shadow: var(--schatten); font-size: 4rem; margin-top: 40px; animation: trommelwarten 1.8s ease-in-out infinite; }

/* Pause: ruhiges Bild, nur 🏠 */
.spiel-pause { position: fixed; inset: 0; z-index: 7; background: var(--bg, #fdf6ec); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 40px; }
.spiel-pause[hidden] { display: none; }
.spiel-pause .pause-bild { font-size: 8rem; animation: lauschen 4s ease-in-out infinite; }
.spiel-pause .ende-home { width: 110px; height: 110px; font-size: 3.4rem; border: none; border-radius: 50%; background: var(--papier); box-shadow: var(--schatten); }

/* Spiele im Regal: Name und kurze Erklärung für Eltern */
.regal-spiel { flex-wrap: wrap; align-items: flex-start; }
.regal-spiel b { font-weight: 600; }
.regal-spiel small { flex-basis: 100%; font-size: 0.78rem; color: #8a7d6e; line-height: 1.3; padding-left: 2px; }
.regal-spiel small em { font-style: normal; color: #b8470b; }
.regal-wahl { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* Elternbereich: lange Buchstabenliste eingeklappt */
.buchstaben-anpassen summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: #1d5fbf; }
.karte[hidden] { display: none; }

/* Eigene Kisten im Elternbereich (Meine Leute, Meine Kita) */
.eigene-kisten { margin: 12px 0; padding: 10px 12px; border-radius: 14px; background: #fff7e6; }
.eigene-kisten h3 { margin: 4px 0; }
.eigene-kiste h4 { margin: 12px 0 2px; }
.eigene-kiste h4 small { font-weight: normal; color: #555; margin-left: 6px; }
.eigene-kiste .eigene-woerter { padding-left: 0; }
.name-schalter { display: block; margin: -2px 0 6px 50px; font-size: 0.85rem; color: #555; }

/* Menschen: kleines Foto in den Listen */
.mensch-bild { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; align-items: center;
  justify-content: center; font-size: 1.4rem; background: #f3ead9; flex: none; margin-right: 8px; vertical-align: middle; }
.mensch-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Gast lobt: sein Foto kurz oben in der Mitte */
/* unter der Kopfleiste rechts: verdeckt weder Wortbild noch Fortschrittspunkte */
.sprecher { position: fixed; top: calc(max(14px, env(safe-area-inset-top)) + 84px); right: 16px; width: 80px; height: 80px; border-radius: 50%;
  overflow: hidden; z-index: 30; pointer-events: none; opacity: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); border: 4px solid #fff; }
.sprecher img { width: 100%; height: 100%; object-fit: cover; }
.sprecher.zeigen { animation: sprecher-zeigen 2.8s ease forwards; }
@keyframes sprecher-zeigen { 0% { opacity: 0; transform: scale(0.6); } 12%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sprecher.zeigen { animation-duration: 2.8s; animation-timing-function: steps(1); } }
.mensch-stand { background: #fff7e6; border-radius: 12px; padding: 8px 12px; line-height: 1.7; }
/* Mitmachen / Stimm-Paket */
.paket-kopf { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.mensch-bild.gross { width: 72px; height: 72px; font-size: 2.4rem; margin: 0; }
/* Mitmachen für Großeltern: größere, dunklere Schrift und große Knöpfe mit Abstand */
#mitmachen .hinweis, #paket .hinweis { font-size: 1.05rem; color: #5e5348; }
#mitmachen .lob-zeile, #paket .lob-zeile { gap: 14px; }
#mitmachen .mini-btn, #paket .mini-btn, #mitmachen .lob-zeile .mini-btn, #paket .lob-zeile .mini-btn { width: 60px; height: 60px; font-size: 1.6rem; }
#mitmachen .knopf-reihe { gap: 14px; align-items: center; }
.text-btn.gross { font-size: 1.2rem; padding: 14px 22px; }
.mitmachen-danke { border: 3px solid var(--gruen); }
.mitmachen-hoert { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  background: #fff; border-radius: 18px; padding: 16px 18px 22px; font-size: 1.4rem; font-weight: 700; color: #b3261e;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); overflow: hidden; }
.mitmachen-hoert small { font-size: 0.95rem; font-weight: normal; color: #5e5348; }
.mitmachen-hoert span { position: absolute; left: 0; bottom: 0; height: 8px; width: 100%; background: #b3261e; transform-origin: left; }
.mitmachen-hoert.laeuft span { animation: hoert-balken 5s linear forwards; }
@keyframes hoert-balken { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mitmachen-hoert[hidden] { display: none; }
.willkommen .absender { margin: -8px 0 0; font-size: 0.95rem; color: var(--leise); }