:root {
  color-scheme: dark;
  --accent: #e50914;
  --accent-hover: #f6121d;
  --bg: #141414;
  --bg-elevated: #1f1f1f;
  --text: #ffffff;
  --text-muted: #a3a3a3;
  --border: #333333;
}

* {
  box-sizing: border-box;
}

/* Muss vor allen anderen Regeln stehen: verhindert, dass spätere
   `display: ...`-Deklarationen (z.B. auf .result-overlay, #step-play)
   das [hidden]-Attribut aushebeln. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

#site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2rem;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.95), rgba(20, 20, 20, 0.75));
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--border);
}

#site-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-transform: uppercase;
  cursor: pointer;
}

#site-header p:not(.profile-badge) {
  display: none;
}

.profile-badge {
  /* appearance:none ist noetig, sonst kollidiert die native Button-Chrome
     des Browsers mit der Pill-Form (aehnliches Problem wie beim
     U-Boot-Schliessen-Button) und ergibt ein schiefes/unfertiges Oval. */
  appearance: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Zahnrad und Vollbild-Knopf: gleiche Hoehe wie das Profil-Badge, damit alle
   als ein Satz nebeneinander sitzen. appearance:none aus demselben Grund wie
   beim Badge. */
.admin-gear,
.vollbild-knopf {
  appearance: none;
  margin: 0;
  padding: 0;
  width: 2.45rem;
  height: 2.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.admin-gear:hover,
.vollbild-knopf:hover {
  background: #2a2a2a;
  border-color: var(--text-muted);
}

/* Welches der beiden Icons im Knopf sichtbar ist, haengt allein an
   aria-pressed - so gibt es keinen zweiten Zustand, der danebenlaufen kann. */
.vollbild-knopf svg {
  display: block;
}

.vollbild-knopf .vollbild-icon-aus,
.vollbild-knopf[aria-pressed="true"] .vollbild-icon-an {
  display: none;
}

.vollbild-knopf[aria-pressed="true"] .vollbild-icon-aus {
  display: block;
}

/* Vollbild ist an: der Knopf zeigt es zusaetzlich als gedrueckter Zustand,
   damit man ihn auch ohne sichtbare Browser-Leiste als Ausschalter erkennt. */
.vollbild-knopf[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.vollbild-knopf[aria-pressed="true"]:hover {
  background: var(--text-muted);
  border-color: var(--text-muted);
}

#profile-badge:hover {
  background: #2a2a2a;
  border-color: var(--text-muted);
}

.profile-badge::before {
  content: attr(data-initials);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--avatar-color, var(--accent));
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

.wizard-step {
  background: transparent;
  border: none;
  padding: 0;
}

.wizard-progress {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.netflix-title {
  margin: 0 0 1.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.netflix-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.netflix-title-row .netflix-title {
  margin-bottom: 0;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--text-muted);
}

input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea {
  padding: 0.65rem 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #333333;
  color: var(--text);
  font-size: 1rem;
  /* Ohne das uebernehmen manche Browser fuer type=search eine eigene,
     abweichend hohe Werkskontur statt der Box-Sizing-Regel oben - dann
     sitzt das Suchfeld nicht mehr buendig neben einem <select>. */
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem;
  resize: vertical;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.admin-json-help {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-json-help code {
  background: #333333;
  color: var(--text);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.85em;
}

.admin-json-help summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  margin-top: 0.5rem;
}

.admin-json-help details p {
  margin: 0.5rem 0 0;
}

.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
}

button {
  padding: 0.65rem 1.25rem;
  border-radius: 4px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

button:hover {
  background: var(--accent-hover);
}

.wizard-back,
.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.wizard-back:hover,
.btn-secondary:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.wizard-back {
  margin-top: 1.5rem;
}

.wizard-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

/* Google zuerst und als eigenstaendige Aktion (Markenrichtlinie: weisser
   Button, "G"-Logo in Originalfarben) - E-Mail/Passwort kommt erst danach,
   getrennt durch .login-divider. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid var(--border);
}

.btn-google:hover {
  background: #f2f2f2;
}

.btn-google-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 320px;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

#profile-status,
#taskset-status {
  color: var(--text-muted);
  min-height: 1.2em;
}

/* --- Profil-Auswahl ("Wer spielt?"), angelehnt an Netflix' Profilwahl --- */
.profile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.profile-tile {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 120px;
}

.profile-tile-avatar {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 12px;
  background: var(--avatar-color, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid transparent;
}

/* "Profile verwalten"-Modus: Stift-Badge zeigt an, dass ein Klick jetzt
   bearbeitet statt auswählt. */
.profile-grid.is-editing .profile-tile:not(.profile-tile-add) .profile-tile-avatar {
  border-color: var(--text-muted);
  opacity: 0.85;
}

.profile-grid.is-editing .profile-tile:not(.profile-tile-add) .profile-tile-avatar::after {
  content: "✎";
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.profile-tile:hover .profile-tile-avatar,
.profile-tile:focus-visible .profile-tile-avatar {
  transform: scale(1.06);
  border-color: var(--text);
}

.profile-tile-name {
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.profile-tile-add .profile-tile-avatar {
  background: transparent;
  border: 2px dashed var(--border);
  color: var(--text-muted);
}

.profile-tile-add:hover .profile-tile-avatar,
.profile-tile-add:focus-visible .profile-tile-avatar {
  border-color: var(--accent);
  color: var(--accent);
}

.profile-form {
  max-width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 0.5rem;
}

.profile-form-actions {
  display: flex;
  gap: 0.5rem;
}

.profile-form-actions button {
  flex: 1;
}

/* --- Aufgabenset-/Spielauswahl als Karten-Reihe --- */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.card-row button {
  all: unset;
  cursor: pointer;
  position: relative;
  width: 190px;
  height: 110px;
  border-radius: 6px;
  background: var(--card-gradient, linear-gradient(135deg, #333, #1a1a1a));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.card-row button:hover,
.card-row button:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.card-row button::before {
  content: attr(data-icon);
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-size: 1.6rem;
  opacity: 0.85;
}

.card-row button .card-label {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: white;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.card-row button .card-progress {
  position: absolute;
  top: 0.5rem;
  left: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  letter-spacing: 0.02em;
}

.card-row button .card-progress-percent {
  color: #ffd700;
}

/* --- Spielauswahl: Poster-Karussell (Coverflow-artig, wie ein Film-Slider) -
   das aktive (mittige) Poster ist gross/deckend, die Nachbarn kleiner/blasser.
   Groessen-Interpolation via Transform passiert in js/main.js
   (updatePosterScales) je nach Scroll-Position, das Scrollen selbst laeuft
   nativ per CSS scroll-snap (Touch-Wischen/Trackpad funktionieren dadurch
   ohne eigene Drag-Physik). --- */
.poster-carousel {
  position: relative;
  width: 100%;
  --poster-w: min(62vw, 260px);
}

.poster-track {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem calc(50% - var(--poster-w) / 2) 1.75rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.poster-track::-webkit-scrollbar { display: none; }

.poster-track button {
  all: unset;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  width: var(--poster-w);
  aspect-ratio: 380 / 220;
  border-radius: 10px;
  background: var(--card-gradient, linear-gradient(135deg, #333, #1a1a1a));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  scroll-snap-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  will-change: transform, opacity;
}

.poster-track button.is-active {
  box-shadow: 0 0 0 3px var(--accent), 0 12px 28px rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.poster-track button::before {
  content: attr(data-icon);
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-size: 1.6rem;
  opacity: 0.85;
}

.poster-track button .card-label {
  display: block;
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.poster-nav {
  all: unset;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.poster-nav:hover { background: rgba(0, 0, 0, 0.8); }
.poster-nav-prev { left: 0.25rem; }
.poster-nav-next { right: 0.25rem; }
.poster-nav[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.poster-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: -0.5rem 0 0.75rem;
}

.poster-dots button {
  all: unset;
  cursor: pointer;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.poster-dots button.is-active {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.35);
}

/* --- Verwaltung: Uebersichtsseite mit einem Knopf je Bereich --- */
.admin-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  max-width: 640px;
}

.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
  padding: 1rem;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.admin-menu-item:hover {
  /* Muss background erneut setzen: die globale "button:hover"-Regel weiter
     oben faerbt sonst die ganze Kachel accent-rot. */
  background: #2a2a2a;
  border-color: var(--text-muted);
}

.admin-menu-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.admin-menu-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.admin-menu-title {
  font-weight: 700;
}

.admin-menu-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Admin-Verwaltung: Aufgabensets/Aufgaben als einfache Listen --- */
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
  max-width: 640px;
}

.admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.admin-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 10rem;
}

.admin-row-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-row-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Konto-ID unter "Eigenes Konto": lang und ohne Leerzeichen - darf
   umbrechen, statt die Seite auf dem Handy zu verbreitern. */
.konto-id-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.konto-id {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
  user-select: all;
}

.admin-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Symbol-Buttons statt Textboxen -> feste, kompakte Größe, die auch auf
   schmalen Bildschirmen nicht umbricht oder überläuft. */
.admin-row-actions .admin-icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-subheading {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.1rem;
}

.admin-subheading:first-of-type {
  margin-top: 0.5rem;
}

.admin-category-cluster {
  margin-bottom: 1.25rem;
}

.admin-cluster-heading {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Kategorie-Cluster in "Fortschritt & Sichtbarkeit" sind <details>/<summary> -
   per Default eingeklappt, Klick auf die Ueberschrift klappt sie auf. */
details.admin-category-cluster > summary.admin-cluster-heading {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
}

/* display:flex ersetzt den nativen Dreiecks-Marker von <summary> - deshalb
   eigenes Chevron-Icon, das per [open] rotiert. */
details.admin-category-cluster > summary.admin-cluster-heading::-webkit-details-marker {
  display: none;
}

.admin-cluster-chevron {
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}

.admin-cluster-chevron::before {
  content: "▸";
}

details.admin-category-cluster[open] > summary.admin-cluster-heading .admin-cluster-chevron {
  transform: rotate(90deg);
}

details.admin-category-cluster[open] > summary.admin-cluster-heading {
  margin-bottom: 0.6rem;
}

details.admin-category-cluster .admin-list {
  margin: 0;
}

/* Ein-/Ausblenden-Buttons fuer die ganze Kategorie, im <summary> selbst -
   nur so bleiben sie auch bei eingeklappter Kategorie erreichbar. Etwas
   kleiner als die Zeilen-Buttons, damit die Ueberschrift nicht zu wuchtig
   wirkt; flex-shrink: 0 haelt sie neben langen Kategorienamen stabil. */
.admin-cluster-heading-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cluster-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: normal;
}

.admin-cluster-actions .admin-icon-btn {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-action-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Verwaltung: Lernbericht (api/stats.php) und Nutzung & Geraete
   (api/admin-stats.php) - teilen sich Diagramm, Tabellen und Kacheln --- */

/* Je Kind eine Karte; die gewaehlte ist hervorgehoben. */
.report-kids {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.report-kid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  text-align: left;
}

.report-kid:hover {
  border-color: var(--text-muted);
}

.report-kid.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.report-kid-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.report-kid-meta {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Kennzahlen als Kacheln - auf dem Handy zwei nebeneinander. */
.report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.report-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  min-width: 0;
}

.report-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.report-kpi-label {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.report-kpi-hint {
  color: var(--text-muted);
  font-size: 0.7rem;
}

@media (max-width: 480px) {
  .report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Trend und auffaellige Quoten in den Tabellen. */
.stats-table td.stats-up {
  color: #4ade80;
}

.stats-table td.stats-down {
  color: #f87171;
  font-weight: 700;
}

/* Breite Tabellen (Aufgaben, Spiele) scrollen auf dem Handy seitlich, statt
   die Seite zu verbreitern. */
.stats-table-box {
  overflow-x: auto;
}
.stats-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 1rem 0;
}

.stats-controls label {
  gap: 0.35rem;
  font-size: 0.85rem;
}

/* Ein Schalter mit Beschriftung - sieht aus wie die <label>-Felder daneben,
   damit "Kind", "Zeitraum" und "Gezählt werden" eine Reihe ergeben. */
.stats-control {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stats-control-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Umschalter als zusammenhaengende Leiste: die Knoepfe sind Ansichten
   desselben Bereichs, keine getrennten Aktionen. */
.stats-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.stats-toggle button {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 0;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
}

.stats-toggle button:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.stats-toggle button.is-active {
  background: var(--accent);
  color: #ffffff;
}

.stats-chart {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}

/* Werteachse und Tagesspur nebeneinander, oben buendig: die Achse muss auf
   derselben Hoehe beginnen wie die Zeichenflaeche der Saeulen. */
.stats-chart-body {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

/* Die Achse steht fest und scrollt NICHT mit - sie soll auch dann noch
   dastehen, wenn man sich durch 90 Tage geblaettert hat. Die Marken sitzen
   absolut auf ihrer Werthoehe, die Hoehe der Achse setzt js/main.js. */
.stats-chart-axis {
  position: relative;
  flex: none;
  width: 2.6rem;
}

.stats-axis-tick {
  position: absolute;
  right: 0;
  /* Die Zahl soll auf ihrer Linie sitzen, nicht darueber stehen. */
  transform: translateY(50%);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}

/* Nur die Tage scrollen: waechst mit ihrer Zahl nach rechts, statt die Balken
   bis zur Unkenntlichkeit zusammenzuquetschen. */
.stats-chart-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

/* Ohne min-height: die Spalten geben die Hoehe vor (Zeichenflaeche +
   Datumszeile). Waere die Spur hoeher als ihre Spalten, saessen die von oben
   gemessenen Gitterlinien nicht mehr auf den Saeulen. */
.stats-chart-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

/* Gitterlinie auf Hoehe eines Achsenwertes - spannt ueber alle Tage, auch die
   gerade nicht sichtbaren. */
.stats-chart-grid {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  border-top: 1px solid var(--border);
  opacity: 0.8;
  pointer-events: none;
}

/* Hebt die Saeulen ueber die Gitterlinien: absolut positionierte Geschwister
   liegen sonst obenauf und die Linie zoege einen Strich durch jeden Balken. */
.stats-bar {
  position: relative;
  z-index: 1;
}

.stats-chart-unit {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.stats-bar {
  display: flex;
  flex: 1 0 18px;
  flex-direction: column;
  min-width: 18px;
}

/* Die Zeichenflaeche der Saeule. Ihre Hoehe setzt js/main.js
   (STATS_CHART_HOEHE) - dieselbe Zahl rechnet dort die Saeulen aus, und zwei
   Stellen mit derselben Hoehe waeren eine zu viel. */
.stats-bar-area {
  display: flex;
  align-items: flex-end;
}

.stats-bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 2px;
  overflow: hidden;
  /* Auch ein Tag ohne Zahlen bekommt eine sichtbare Grundlinie, damit die
     Luecke als Luecke lesbar bleibt und nicht einfach fehlt. */
  min-height: 2px;
  background: #333333;
}

/* Feste Pixelhoehe aus js/main.js - flex: none haelt die Segmente davon ab,
   sich im Stapel noch zurechtschrumpfen zu lassen. */
.stats-bar-part {
  flex: none;
  min-height: 1px;
}

/* Nicht jeder Tag bekommt ein Datum (sonst klebten sie aneinander) - die
   Zeile muss trotzdem ueberall gleich hoch sein. Sonst ist eine Spalte ohne
   Beschriftung kuerzer, rutscht durch align-items: flex-end nach unten, und
   ihre Saeule steht neben den anderen auf einer anderen Nulllinie. */
.stats-bar-label {
  margin-top: 0.35rem;
  line-height: 1;
  min-height: 1em;
  color: var(--text-muted);
  font-size: 0.65rem;
  text-align: center;
  white-space: nowrap;
}

.stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.stats-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.stats-legend-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}

.stats-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.stats-table-box {
  flex: 1 1 320px;
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.stats-table-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.stats-table th,
.stats-table td {
  padding: 0.35rem 0.25rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Erste Spalte ist der Name - der darf umbrechen und bleibt linksbuendig. */
.stats-table th:first-child,
.stats-table td:first-child {
  text-align: left;
  white-space: normal;
}

.stats-table th {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.stats-table tfoot td {
  border-bottom: none;
  border-top: 1px solid var(--border);
  font-weight: 700;
}

/* Schritt 4: Spiel füllt den gesamten Browser aus, kein Karten-Look mehr. */
body.is-fullscreen-step #site-header {
  display: none;
}

body.is-fullscreen-step main {
  max-width: none;
  padding: 0;
}

#step-play.wizard-step-fullscreen {
  position: relative;
  /* 100vh zählt auf Mobilgeräten die Fläche hinter der (einklappbaren)
     Adressleiste mit, wodurch die Seite höher als sichtbar wird und
     gescrollt werden muss. 100dvh ist die tatsächlich sichtbare Höhe;
     100vh bleibt als Fallback für Browser ohne dvh-Unterstützung. */
  min-height: 100vh;
  min-height: 100dvh;
  border: none;
  border-radius: 0;
  padding: 1rem;
  padding-top: 0.75rem;
  background: #020617;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

/* Rueckmeldung auf Antwort-Knoepfen (shared/choice-feedback.js): nach einem
   Klick wird die richtige Antwort gruen und - falls daneben geklickt wurde -
   die angeklickte rot. Die uebrigen Knoepfe treten zurueck, damit die Reihe
   nicht als Farbsalat aus Spielfarbe + Gruen + Rot erscheint, sondern die
   beiden wichtigen Knoepfe klar herausstechen.

   Die Regeln stehen global, und die Klasse steht bewusst mehrfach im
   Selektor: die Stylesheets der Spiele werden erst beim Spielstart nachgeladen
   (loadGameAssets in js/main.js) und wuerden eine einfache Klasse schon durch
   die Reihenfolge schlagen. Ausserdem faerben manche Spiele ihre Knoepfe ueber
   :hover/:focus (z.B. ".renner-pit-opts button:hover") - ohne die zusaetzliche
   Klasse bliebe die richtige Antwort genau dann farblos, wenn der Mauszeiger
   zufaellig darauf steht. Deshalb sind :hover/:focus/:active hier ausdrueck-
   lich mit aufgefuehrt. */
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-correct,
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-correct:hover,
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-correct:focus,
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-correct:active {
  background: linear-gradient(175deg, #5ee68f 0%, #24c46a 55%, #15a34a 100%);
  color: #052e16;
  border-color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 2px rgba(94, 230, 143, 0.5),
    0 6px 16px -6px rgba(34, 197, 94, 0.85);
}

.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-wrong,
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-wrong:hover,
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-wrong:focus,
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-wrong:active {
  background: linear-gradient(175deg, #e05a5a 0%, #c62828 45%, #a51f1f 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 1px rgba(69, 10, 10, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 2px rgba(224, 90, 90, 0.45),
    0 6px 16px -6px rgba(198, 40, 40, 0.85);
}

/* Nicht gewaehlte Antworten treten waehrend der Aufloesung zurueck - und zwar
   in einen einheitlichen ruhigen Ton statt in eine ausgeblasste Spielfarbe:
   ein abgedunkeltes Gelb oder Tuerkis sieht neben Gruen und Rot schmutzig aus,
   und mit blosser Transparenz waeren die Antworten kaum noch zu lesen. So
   bleibt die Reihe lesbar und besteht aus genau drei Rollen: richtig, falsch,
   nicht gewaehlt. */
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-muted {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
}

/* Gesperrte Knoepfe blenden einige Spiele halbtransparent aus (opacity: .5).
   Waehrend der Aufloesung sind alle Knoepfe gesperrt - das wuerde die Reihe
   insgesamt ausbleichen, statt sie nur ruhiger zu machen. */
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-correct:disabled,
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-wrong:disabled,
.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-muted:disabled {
  opacity: 1;
  cursor: default;
}

.hausi-choice-reveal.hausi-choice-reveal:disabled {
  cursor: default;
}

/* Das Aufblitzen beim Neuaufbau der Knoepfe darf die Aufloesungsfarbe nicht
   ueberschreiben, falls sehr schnell geantwortet wurde. Stattdessen bekommen
   die beiden farbigen Knoepfe ihre eigene kurze Bewegung: die richtige Antwort
   "huepft" einmal, die falsche wackelt kurz. */
.hausi-choice-reveal.hausi-choice-reveal {
  animation: none;
  transition: opacity 0.18s ease, filter 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease;
}

.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-correct {
  animation: hausi-choice-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hausi-choice-reveal.hausi-choice-reveal.hausi-choice-wrong {
  animation: hausi-choice-shake 0.4s ease-in-out;
}

@keyframes hausi-choice-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes hausi-choice-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  88% { transform: translateX(2px); }
}

/* Wer Bewegung im System abgeschaltet hat, bekommt nur die Farbe. */
@media (prefers-reduced-motion: reduce) {
  .hausi-choice-reveal.hausi-choice-reveal.hausi-choice-correct,
  .hausi-choice-reveal.hausi-choice-reveal.hausi-choice-wrong {
    animation: none;
  }
}

#game-container {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.result-overlay {
  position: absolute;
  inset: 0;
  /* Muss ueber den fixed-position Konfetti-Kanonen einzelner Spiele liegen
     (Drehkarte/Renner/Rechenfestung nutzen z-index:30 fuer ihr Konfetti-
     Canvas) - sonst kann residuelles Konfetti (z.B. von einem Meilenstein
     kurz vor Rundenende) den gerade erschienenen Ergebnis-Screen optisch
     verdecken, obwohl er technisch korrekt darunter angezeigt wird. */
  z-index: 50;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-card {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  max-width: 90vw;
}

/* Kennzahlen einer Runde als Kachelreihe statt als ein Satz hintereinander.
   Ein Kind soll sein Ergebnis auf einen Blick erfassen: Symbol, Zahl,
   Beschriftung - und nicht erst einen Fliesstext lesen muessen. Welche
   Kacheln erscheinen, entscheidet das Spiel ueber resultStats (siehe
   shared/game-interface.md); zwei gibt es immer. */
.result-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/* Feste Breite statt min-width: Sonst wird jede Kachel so breit wie ihre
   laengste Beschriftung, und die Reihe bricht auf schmalen Schirmen schief um
   (3 + 2 + 1 statt 3 + 3). Deshalb sind die Beschriftungen kurz zu halten -
   siehe shared/game-interface.md. */
.result-stat {
  flex: 0 0 5.6rem;
  overflow: hidden;
  padding: 0.55rem 0.5rem;
  border-radius: 10px;
  background: #2a2a2a;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.result-stat-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.result-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.result-stat-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Trefferquote zusaetzlich als Balken: "12/15" ist eine Zahl, ein zu vier
   Fuenfteln gefuellter gruener Balken ist ein Gefuehl. Die Breite setzt
   js/main.js erst nach dem Einblenden, damit er sichtbar hochlaeuft. */
.result-accuracy {
  height: 8px;
  margin-top: 0.9rem;
  border-radius: 999px;
  background: #2a2a2a;
  overflow: hidden;
}

.result-accuracy-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.7s ease-out;
}

/* Serien-Meldung ("Tagesziel geschafft") bekommt eine eigene Zeile in Gold -
   sie gehoert nicht zum Rundenergebnis, sondern ist die Zugabe darueber. */
.result-streak {
  margin: 0.9rem 0 0;
  font-weight: 700;
  color: #ffd700;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.25rem;
}

/* Die beiden Knoepfe waren bisher beide im roten Akzent und damit optisch
   dieselbe Wahl. Jetzt trennt sie die Farbe: Gruen fuehrt weiter im selben
   Spiel (dieselbe Sprache wie eine richtige Antwort), Tuerkis fuehrt hinaus
   zur Auswahl (dieselbe Sprache wie eine Freischaltung). */
.result-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
}

.result-btn-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.result-btn-again {
  background: linear-gradient(175deg, #5ee68f 0%, #24c46a 55%, #15a34a 100%);
  color: #052e16;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.result-btn-again:hover {
  background: linear-gradient(175deg, #7cf0a8 0%, #2fd97d 55%, #18b856 100%);
}

.result-btn-other {
  background: linear-gradient(175deg, #8fe6e0 0%, #4ecdc4 55%, #2fa39c 100%);
  color: #04302e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.result-btn-other:hover {
  background: linear-gradient(175deg, #a6efea 0%, #5fdcd3 55%, #36b8b0 100%);
}

/* PIN-Abfrage fuer den Eltern-Bereich: schwebt ueber der ganzen Seite (anders
   als .result-overlay, das nur den Spielbereich abdeckt), da sie von jedem
   Schritt aus ueber das Zahnrad erreichbar sein muss. */
.pin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.pin-card {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  max-width: 90vw;
  width: 280px;
}

.pin-card input {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.pin-prompt-error {
  min-height: 1.2em;
  color: #f87171;
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

/* Vollbild-Feier beim Meistern eines Aufgabensets (Punkte-Schwelle erreicht,
   Set wird ausgeblendet). Liegt ueber allem anderen, inkl. dem laufenden
   Spiel und dessen eigenem Ergebnis-Overlay. */
.mastery-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  overflow: hidden;
}

.mastery-scene {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--text);
  padding: 2rem;
}

.mastery-title {
  margin: 0.75rem 0 0.25rem;
  font-size: 1.6rem;
  color: #ffd700;
}

.mastery-setname {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.mastery-subtitle {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
}

.mastery-trophy {
  font-size: 3rem;
}

.mastery-overlay.is-animating #mastery-scene-complete .mastery-trophy {
  animation: mastery-trophy-shine 1.6s ease-in-out 0.5s infinite;
}

@keyframes mastery-trophy-shine {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.9));
    transform: scale(1.08);
  }
}

/* Phase 2: Paket zum Antippen, das die neu freigeschalteten Sets zeigt. */
.mastery-gift-button,
.mastery-gift-button:hover,
.mastery-gift-button:active,
.mastery-gift-button:focus {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem;
  color: inherit;
}

.mastery-gift {
  display: inline-block;
  font-size: 5rem;
  line-height: 1;
  animation: mastery-gift-idle 1.2s ease-in-out infinite;
}

@keyframes mastery-gift-idle {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-8px) rotate(3deg);
  }
}

.mastery-gift-hint {
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: opacity 0.2s ease;
}

.mastery-gift-button.is-opened .mastery-gift {
  animation: mastery-gift-burst 0.5s ease forwards;
}

@keyframes mastery-gift-burst {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  60% {
    transform: scale(1.6) rotate(15deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.4) rotate(20deg);
    opacity: 0;
  }
}

.mastery-gift-button.is-opened .mastery-gift-hint {
  opacity: 0;
}

.mastery-reveal {
  animation: mastery-reveal-pop 0.5s ease;
}

@keyframes mastery-reveal-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.mastery-reveal-title {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffd700;
}

.mastery-unlock {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #4ecdc4;
}

.mastery-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(var(--rot, 360deg));
    opacity: 0.85;
  }
}

/* Konfetti, das beim Öffnen des Pakets aus dessen Mitte in alle Richtungen
   davonfliegt (statt wie die Phase-1-Feier von oben herabzuregnen). */
.confetti-burst-piece {
  top: 0;
  left: 0;
  animation-name: confetti-burst;
  animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1);
  animation-fill-mode: forwards;
  transform: translate(-50%, -50%);
}

@keyframes confetti-burst {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--rot, 360deg)) scale(0.5);
    opacity: 0;
  }
}

/* ---------- Serienleiste (Kontinuitaet) ----------
   Sitzt direkt unter dem Kopf und ist nur sichtbar, solange ein Kind-Profil
   gewaehlt ist. Zeigt drei Dinge gleichzeitig, weil alle drei im Voraus
   bekannt sein sollen: aktueller Stand, heutiger Fortschritt zum Pensum und
   wie viele Joker die Woche noch hergibt. */
.streak-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  max-width: 1200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.85rem;
}

.streak-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.streak-flame { font-size: 1.1rem; }
.streak-days b { font-size: 1.05rem; }

/* ---------- Perlenkette ----------
   Eine Perle je Serientag: kleine fuer die Sammeltage, grosse fuer die fuenf
   Belohnungstage.

   Erledigte Tage sind akzentfarben, offene gedaempft - so ist der Fortschritt
   auf einen Blick da. Damit die Kette dabei nicht als ein roter Balken
   verschmilzt (das tat sie bei 3px Abstand), sorgen 6px Luft und der klare
   Groessenunterschied fuer Rhythmus: kleine Punkte fuer Sammeltage, deutlich
   groessere Perlen mit dem Spielsymbol fuer die fuenf Belohnungstage. */
/* Der Hover-Zustand muss MIT aufgezaehlt werden: die generische Regel
   button:hover (0,1,1) schlaegt eine einzelne Klasse (0,1,0), sonst wird die
   Kette nach dem Antippen knallrot - auf Touchgeraeten klebt :hover danach
   sogar dauerhaft. Dieselbe Spezifitaets-Falle wie bei .rinf-root button. */
.streak-kette,
.streak-kette:hover,
.streak-kette:focus,
.streak-kette:active {
  appearance: none;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  /* Auf sehr schmalen Geraeten lieber schieben als umbrechen: eine
     umgebrochene Kette liest sich nicht mehr als Reihenfolge. */
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px 2px;
  border-radius: 999px;
}

.streak-kette::-webkit-scrollbar { display: none; }

.streak-kette:hover .streak-perle-gross,
.streak-kette:focus-visible .streak-perle-gross {
  transform: scale(1.08);
}

.streak-kette:focus-visible {
  outline: 2px solid var(--text-muted);
  outline-offset: 2px;
}

/* Sammeltag: klein und ruhig - dort passiert nichts, sie sind nur der Weg. */
.streak-perle {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(232, 228, 217, 0.13);
  transition: background 0.2s ease, transform 0.2s ease;
}

/* Geschafft = Akzent, auch bei den kleinen Sammeltagen. */
.streak-perle-voll {
  background: var(--accent);
}

/* Belohnungstag: deutlich groesser, mit Ring - eine Perle, die etwas wert ist. */
.streak-perle-gross {
  width: 24px;
  height: 24px;
  /* Traegt ein Emoji - klein genug, dass es nicht ueber den Ring hinauslaeuft. */
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: 2px solid rgba(232, 228, 217, 0.22);
}

/* Erreichte Belohnung: der einzige Ort, an dem der Akzent auftaucht. */
.streak-perle-gross.streak-perle-voll {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18);
}

/* Der Tag, an dem gerade gearbeitet wird. */
.streak-perle-dran {
  background: transparent;
  border: 2px solid var(--text);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* Ein kleiner Sammeltag hat sonst keinen Rahmen und wuerde durch den 2px-Rand
   auf 11px anwachsen - box-sizing haelt ihn auf seiner Groesse. */
.streak-perle-dran:not(.streak-perle-gross) {
  box-sizing: content-box;
  width: 7px;
  height: 7px;
  margin: -2px;
}

/* Serientage oberhalb der Planlaenge - die Kette faengt von vorn an. */
.streak-weiter {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 228, 217, 0.3);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .streak-perle { transition: none; }
  .streak-kette:hover .streak-perle-gross { transform: none; }
}

.streak-heute b { color: var(--text); }

/* Nimmt den verfuegbaren Rest ein, damit der Balken auf breiten Schirmen
   nicht auf Briefmarkengroesse zusammenfaellt. */
.streak-today {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 12rem;
  min-width: 10rem;
}

.streak-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.streak-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.streak-today-text {
  color: var(--text-muted);
  white-space: nowrap;
}

.streak-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  color: var(--text-muted);
}

/* Kurzer fester Hinweis, wenn der Tag geschafft ist - kein Zufallsinhalt,
   nur eine Bestaetigung. */
.streak-pulse {
  animation: streak-pulse 0.6s ease 3;
}

@keyframes streak-pulse {
  50% { border-color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-pulse { animation: none; }
  .streak-fill { transition: none; }
}

@media (max-width: 600px) {
  .streak-bar {
    border-radius: 0;
    border-left: none;
    border-right: none;
    font-size: 0.8rem;
  }
}

/* ---------- Bonus-Hinweis beim Spielstart ----------
   Liegt ueber dem Spielfeld statt daneben: die Serienleiste wird im Vollbild
   ausgeblendet (sie naehme auf Handybreite rund 90 px Spielflaeche weg), der
   Hinweis blendet sich nach ein paar Sekunden von selbst wieder aus. */
.bonus-toast {
  /* fixed statt absolute: die Spiele bauen unterschiedlich hoch, ein am
     Schritt verankerter Hinweis landet sonst je nach Spiel mitten im
     Leerraum darueber statt am Bildrand. */
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(92%, 26rem);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  /* Nie ein Tippen abfangen - darunter liegt das Spielfeld. */
  pointer-events: none;
  animation: bonus-toast-in 0.3s ease;
}

@keyframes bonus-toast-in {
  from { opacity: 0; transform: translate(-50%, -0.5rem); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bonus-toast { animation: none; }
}

/* ---------- Bonusplan (aufklappbar unter der Perlenkette) ----------
   Zeigt fuer jeden der 14 Serientage, welches Spiel den Bonus hat und was es
   dort gibt. Nimmt die volle Breite der Leiste ein, damit die drei Spalten
   Tag / Spiel / Belohnung auch auf dem Handy nebeneinander passen. */
.streak-plan {
  flex: 1 0 100%;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.streak-plan-kopf {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.streak-plan-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.streak-plan-zeile {
  display: grid;
  grid-template-columns: 1.6rem minmax(6rem, 1fr) minmax(7rem, 1.4fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.25rem 0.2rem;
  border-radius: 4px;
  color: var(--text-muted);
}

/* Schon geschaffte Tage treten zurueck, der heutige nach vorn. */
.streak-plan-fertig { opacity: 0.55; }

.streak-plan-heute {
  background: rgba(229, 9, 20, 0.14);
  color: var(--text);
  opacity: 1;
}

.streak-plan-tag {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.streak-plan-meilenstein {
  font-weight: 700;
  color: var(--accent);
}

.streak-plan-spiel { color: var(--text); }

.streak-plan-fuss {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  /* Auf sehr schmalen Geraeten rutscht die Belohnung unter den Spielnamen,
     statt beide auf Briefmarkenbreite zu quetschen. */
  .streak-plan-zeile {
    grid-template-columns: 1.6rem 1fr;
  }
  .streak-plan-was { grid-column: 2; }
}

/* Sammeltage treten zurueck: dort passiert nichts, sie sind nur der Weg zur
   naechsten Belohnung. */
.streak-plan-sammeltag .streak-plan-spiel,
.streak-plan-sammeltag .streak-plan-was {
  color: var(--text-muted);
  font-style: italic;
}

/* --- Abzeichen (Bronze/Silber/Gold, siehe api/achievements-lib.php) ---
   Eine Familie je Zeile: Symbol, was zu tun ist, Fortschrittsbalken zur
   naechsten Stufe und rechts die drei Medaillen. Erreichte Medaillen leuchten,
   offene bleiben als blasser Umriss stehen - so ist immer sichtbar, was noch
   kommt, ohne dass die Zeile zur Maengelliste wird. */
.achievement-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.achievement-summary {
  display: flex;
  gap: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.achievement-summary span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
}

.achievement-summary img {
  width: 1.5rem;
  height: 1.5rem;
}

.achievement-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ach-area-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ach-family {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

.ach-family + .ach-family {
  margin-top: 0.5rem;
}

.ach-family-emoji {
  font-size: 1.7rem;
  text-align: center;
}

.ach-family-title {
  margin: 0;
  font-weight: 700;
}

.ach-family-text {
  margin: 0.1rem 0 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ach-bar {
  height: 6px;
  border-radius: 999px;
  background: #333333;
  overflow: hidden;
}

.ach-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.ach-tiers {
  display: flex;
  gap: 0.35rem;
}

/* Offene Stufen zeigen als blasser Kreis die fehlende Schwelle, erreichte
   die Medaille selbst (assets/achievements/). */
.ach-tier {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #262626;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.ach-tier.is-earned {
  border-color: transparent;
  background: none;
  opacity: 1;
  /* Der Schlagschatten hebt die Muenze vom dunklen Grund ab - ohne ihn
     verschwimmt vor allem die bronzene Kante mit der Karte darunter. */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

.ach-tier img {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 560px) {
  .ach-family {
    grid-template-columns: 2.2rem 1fr;
  }
  .ach-tiers {
    grid-column: 2;
  }
}

/* Feier fuer ein frisch freigeschaltetes Abzeichen. */
.achievement-overlay {
  position: fixed;
  inset: 0;
  /* Ueber der Meister-Feier (z-index 300): laufen beide am selben
     Rundenende an, wartet diese hier, bis jene fertig ist - liegt sie dann
     obenauf, verdeckt nichts die andere. */
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  overflow: hidden;
}

.achievement-card {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 2.5rem;
  /* Eigene Karte statt freistehendem Text: das Overlay liegt ueber der
     Aufgaben-/Spielansicht, ohne Flaeche darunter laesen sich Titel und
     Kacheln dahinter ineinander. */
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  max-width: min(90vw, 26rem);
  animation: mastery-reveal-pop 0.5s ease;
}

.achievement-kicker {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.achievement-medal {
  display: block;
  width: 8rem;
  max-width: 45vw;
  height: auto;
  margin: 0.6rem auto 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  /* Kurzes Aufschwingen beim Erscheinen, danach steht sie still: die Feier
     dauert bis zum Antippen von "Weiter", eine Dauerschleife waere unruhig. */
  animation: achievement-medal-in 0.7s ease-out;
}

@keyframes achievement-medal-in {
  0% {
    transform: scale(0.5) rotate(-12deg);
    opacity: 0;
  }
  65% {
    transform: scale(1.12) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.achievement-emoji {
  font-size: 2rem;
  margin-top: 0.2rem;
}

.achievement-name {
  margin: 0.4rem 0 0.2rem;
  font-size: 1.5rem;
  color: #ffd700;
}

.achievement-desc {
  margin: 0 0 1.2rem;
  color: var(--text-muted);
}

/* --- Erste Schritte (Onboarding) nach dem ersten Login, Kind-Links ---
   Siehe #step-onboarding in index.html und "Erste Schritte" in js/main.js. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.netflix-title-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.profile-tile-sub {
  margin-top: -0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* .profile-tile setzt per "all: unset" alles zurueck, die globale
   button:hover-Regel ist aber spezifischer und faerbte die ganze Kachel rot. */
.profile-tile:hover {
  background: none;
}

.profile-tile-trial .profile-tile-avatar {
  background: var(--bg-elevated);
  border: 2px dashed var(--text-muted);
}

.onb-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 560px;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}

.onb {
  max-width: 640px;
}

.onb-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.onb-link {
  all: unset;
  cursor: pointer;
  color: var(--text-muted);
  text-decoration: underline;
  font-size: 0.9rem;
}

.onb-link:hover,
.onb-link:focus-visible {
  color: var(--text);
}

.onb-slides {
  min-height: 22rem;
  outline: none;
}

.onb-slide {
  animation: onb-einblenden 0.25s ease;
}

@keyframes onb-einblenden {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

.onb-slide p {
  line-height: 1.5;
}

.onb-emoji {
  font-size: 3rem;
  margin: 0.5rem 0 0.75rem;
}

.onb-klein {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.onb-demo,
.onb-mock-link {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.onb-demo-frage {
  margin-top: 0;
}

.onb-demo-antworten {
  display: flex;
  gap: 0.75rem;
}

.onb-demo-antworten button {
  min-width: 4rem;
  font-size: 1.2rem;
}

.onb-demo-antworten button.is-richtig {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.onb-demo-antworten button.is-falsch {
  border-color: var(--accent);
  color: var(--accent);
}

.onb-demo-feedback {
  min-height: 1.4em;
  margin-bottom: 0;
  color: var(--text-muted);
}

.onb-schritte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.onb-schritt {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.onb-schritt:hover,
.onb-schritt:focus-visible {
  border-color: var(--text-muted);
}

.onb-schritt-nr {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.onb-schritt-titel {
  font-weight: 700;
}

.onb-schritt-titel::after {
  content: " ▾";
  color: var(--text-muted);
}

.onb-schritt[aria-expanded="true"] .onb-schritt-titel::after {
  content: " ▴";
}

.onb-schritt-detail {
  grid-column: 2;
  display: none;
  color: var(--text-muted);
  line-height: 1.45;
}

.onb-schritt[aria-expanded="true"] .onb-schritt-detail {
  display: block;
}

.onb-mock-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.onb-mock-avatar,
.onb-kid-avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  background: var(--avatar-color, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.onb-mock-name {
  flex: 1;
  font-weight: 700;
}

.onb-frage {
  font-weight: 700;
  margin-top: 1.5rem;
}

.onb-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0.75rem;
}

.onb-cta button {
  flex: 1 1 14rem;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
}

.onb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* visibility statt hidden: die Leiste soll nicht springen, wenn "Zurueck"
   auf der ersten bzw. "Weiter" auf der letzten Folie wegfaellt. */
.onb-nav button:disabled,
.onb-nav button.is-unsichtbar {
  visibility: hidden;
}

.onb-dots {
  display: flex;
  gap: 0.5rem;
}

.onb-dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border-radius: 50%;
  background: var(--border);
}

/* Die globale button:hover-Regel wuerde die Punkte sonst rot faerben und sie
   mit dem aktiven Punkt verwechselbar machen. */
.onb-dot:hover {
  background: var(--text-muted);
}

.onb-dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}

.onb-kid-form {
  flex-direction: row;
  max-width: 480px;
}

.onb-kid-form input {
  flex: 1;
  min-width: 0;
}

.onb-kid-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.onb-kid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.onb-kid-info {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.onb-kid-name {
  font-weight: 700;
}

.onb-kid-actions {
  display: flex;
  gap: 0.5rem;
}

.kind-link-url {
  width: 100%;
  font-size: 0.8rem !important;
  padding: 0.4rem 0.6rem !important;
  color: var(--text-muted) !important;
}

.kind-link-status {
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.kind-link-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.profil-loeschen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.btn-danger {
  background: transparent;
  color: #f87171;
  border: 1px solid #7f1d1d;
}

.btn-danger:hover {
  background: #7f1d1d;
  color: #fff;
}

.kind-link-titel {
  margin: 0;
  font-weight: 700;
}

.kind-link-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.onb-details {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.onb-details summary {
  cursor: pointer;
  font-weight: 700;
}

.os-anleitung {
  margin-top: 0.75rem;
}

.os-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.os-tab {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
}

.os-tab:hover {
  background: var(--bg-elevated);
}

.os-tab.is-active {
  background: var(--accent);
  color: #fff;
}

.os-schritte {
  margin: 0.75rem 0 0;
  padding-left: 1.4rem;
  line-height: 1.6;
}

.os-symbol {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.25em;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
}

/* Kind-Modus (Einstieg per Kind-Link): kein Weg zurueck zur Profilauswahl. */
.is-kind-modus .wizard-back[data-back-to="step-profile"] {
  display: none;
}

.is-kind-modus .profile-badge {
  cursor: default;
}

.kind-homescreen {
  max-width: 560px;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
}

.kind-homescreen p {
  margin: 0 0 0.5rem;
}

.kind-homescreen-titel {
  font-weight: 800;
  font-size: 1.1rem;
}

.kind-homescreen > button {
  margin-top: 0.75rem;
}

@media (max-width: 480px) {
  /* Kopfzeile auf Handybreite: mit Vollbild, Zahnrad und "Abmelden" (plus
     ggf. Profil-Badge) lief sie sonst rechts aus dem Bild und machte die
     ganze Seite seitlich verschiebbar. */
  #site-header {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  #site-header h1 {
    font-size: 1.3rem;
  }

  .header-actions {
    gap: 0.35rem;
    min-width: 0;
  }

  #logout-button {
    padding: 0.5rem 0.7rem;
  }

  #step-profile .netflix-title-row {
    flex-wrap: wrap;
  }

  /* Ein langer Profilname soll kuerzen statt die Kopfzeile zu sprengen. */
  .profile-badge {
    min-width: 0;
    max-width: 7.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .onb-kid-actions {
    width: 100%;
  }

  .onb-kid-actions button {
    flex: 1;
  }

  .onb-slides {
    min-height: 26rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onb-slide {
    animation: none;
  }
}