@font-face {
  font-family: "Fredoka";
  src: url("/static/vendor/fonts/fredoka-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink: #3b2a5a;
  --pink: #ff6fae;
  --pink-hell: #ffe0ef;
  --lila: #9b7bff;
  --lila-hell: #ece4ff;
  --mint: #3ddc97;
  --sonne: #ffd966;
  --weiss: #fff;
  --schatten: 0 5px 0 var(--ink);
  --bs-body-font-family: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: transparent;
  --bs-primary: var(--pink);
  --bs-primary-rgb: 255, 111, 174;
  --bs-border-radius: 1rem;
  --bs-border-radius-lg: 1.5rem;
}

html { min-height: 100%; overscroll-behavior: none; }        /* kein Zurück-Wischen / Pull-to-Refresh aus Versehen */
button, .btn, label, summary { touch-action: manipulation; }       /* kein Doppeltipp-Zoom */
body {
  min-height: 100vh;
  font-size: 1.1rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, #fff8 0 3px, transparent 4px),
    radial-gradient(circle at 78% 62%, #fff8 0 3px, transparent 4px),
    radial-gradient(circle at 42% 88%, #fff8 0 2px, transparent 3px),
    linear-gradient(165deg, #ffe3f1 0%, #f0e5ff 48%, #d8efff 100%);
  background-size: 140px 140px, 190px 190px, 110px 110px, auto;
  background-attachment: fixed;
}
h1, h2, h3 { font-weight: 700; }

/* ---------- Kopfleiste ---------- */
.kopf {
  background: var(--weiss);
  border-bottom: 3px solid var(--ink);
  padding: .4rem 0;
  z-index: 1030;
}
.kopf-innen { display: flex; align-items: center; gap: .75rem; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
.marke { white-space: nowrap; font-weight: 700; font-size: 1.4rem; color: var(--pink); text-decoration: none; background: none; border: 0; padding: 0; }
.marke:hover { color: var(--pink); }
.kopf-avatar { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); overflow: hidden; background: var(--pink-hell); padding: 0; cursor: pointer; flex: none; }
.kopf-avatar svg { width: 100%; height: 100%; display: block; }
.stufe-box { flex: 1; min-width: 0; max-width: 420px; line-height: 1.15; }
.stufe-titel { font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stufe-box .progress { height: 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--lila-hell); }
.stufe-box .progress-bar { background: linear-gradient(90deg, var(--pink), var(--lila)); }
.abmelden-knopf { flex: none; white-space: nowrap; }
.marke + .abmelden-knopf { margin-left: auto; }
.stufe-box + .punkte-pille, .shop-kopf .punkte-pille {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--sonne); color: var(--ink); border: 3px solid var(--ink); border-radius: 2rem;
  padding: .12rem .9rem .12rem .2rem; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; line-height: 1;
}
/* Die Goldmünze (SVG aus templates/muenze.html): im Text so groß wie die Schrift, in der Pille groß; Gewinn: Münze glänzt und wackelt, Flug: Münze dreht sich */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.muenze { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; flex: none; }
.muenz-symbol { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; margin-right: -.15rem; }
.muenz-symbol .muenze { width: 100%; height: 100%; vertical-align: 0; filter: drop-shadow(0 1px 0 #3b2a5a55); }
.muenze-glanz .muenz-symbol .muenze { animation: muenze-wackeln .9s ease-in-out; }
.punkte-flug .muenze { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.punkte-flug:not(.abzug) .muenze { animation: muenze-drehen 1.4s linear; }
a.punkte-pille { text-decoration: none; cursor: pointer; transition: transform .12s; }
a.punkte-pille:hover { transform: translateY(-2px); }
a.punkte-pille:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.shop-tasche { font-size: 1.1rem; margin-left: -.1rem; opacity: .75; }
.punkte-pille.kaufbar .shop-tasche { opacity: 1; animation: puls 1.4s ease-in-out infinite; }
.punkte-zahl { font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.icon-knopf { background: var(--weiss); border: 3px solid var(--ink); border-radius: 50%; width: 42px; height: 42px; font-size: 1.1rem; padding: 0; flex: none; }
.icon-knopf[aria-pressed="false"] { opacity: .45; }

/* ---------- Karten und Knöpfe ---------- */
.karte {
  background: var(--weiss);
  border: 3px solid var(--ink);
  border-radius: 1.6rem;
  box-shadow: var(--schatten);
  padding: 1.25rem;
}
.btn-pop {
  --bs-btn-border-width: 3px;
  --bs-btn-border-color: var(--ink);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-active-color: var(--ink);
  border-radius: 2rem;
  font-weight: 600;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
  padding-left: 1.4rem; padding-right: 1.4rem;
}
.btn-pop:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-pink { --bs-btn-bg: var(--pink); --bs-btn-hover-bg: #ff86ba; --bs-btn-active-bg: #ff5aa3; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; text-shadow: 0 2px 0 #0003; }
.btn-mint { --bs-btn-bg: var(--mint); --bs-btn-hover-bg: #5ae6aa; --bs-btn-active-bg: #2fc785; }
.btn-sonne { --bs-btn-bg: var(--sonne); --bs-btn-hover-bg: #ffe082; --bs-btn-active-bg: #ffcf3f; }
.btn-weiss { --bs-btn-bg: var(--weiss); --bs-btn-hover-bg: var(--lila-hell); --bs-btn-active-bg: var(--lila-hell); }
.btn-pop:disabled { opacity: .55; }

/* ---------- Startseite ---------- */
.abschnitt { font-size: 1.3rem; margin: 1.8rem 0 .8rem; }
.karten-titel { font-size: 1.2rem; margin: 0 0 .5rem; }
.karten-titel small { font-size: .85rem; font-weight: 500; margin-left: .4rem; }

.mitte, .los-block { display: grid; gap: 1rem; }
/* Oben: das Zimmer der Eule als Panorama über die ganze Breite, darunter eine Zeile mit Profilbild, Gruß und dem großen „Los geht’s!“ */
.oben { display: grid; gap: .8rem; }
.start-zeile { display: grid; gap: .8rem 1.5rem; align-items: center; }
.profil-block { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.profil-rahmen { width: 74px; flex: none; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ink); background: var(--pink-hell); overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
.profil-rahmen svg { width: 100%; height: 100%; display: block; }
.profil-text { min-width: 0; }
.profil-stufe { font-weight: 600; font-size: .95rem; line-height: 1.2; }
@media (min-width: 768px) {
  .start-zeile { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .profil-rahmen { width: 128px; }
  .profil-stufe { font-size: 1.05rem; }
}

/* Gruß */
.gruss { font-size: 1.5rem; margin: 0; }
@media (min-width: 768px) { .gruss { font-size: 2rem; } }

/* „Los geht’s!“ und Schwierigkeit */
.los-knopf { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; color: var(--ink); background: linear-gradient(120deg, #ffe08a, #ffb84d); border: 3px solid var(--ink); border-radius: 2rem; box-shadow: 0 6px 0 var(--ink); padding: .9rem 1.4rem; transition: transform .12s, box-shadow .12s; }
.los-knopf:hover { transform: translateY(-2px); }
.los-knopf:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.los-knopf:disabled { opacity: .7; }
.los-emoji { font-size: 3rem; line-height: 1; display: inline-block; transition: transform .2s; }
.los-knopf:hover .los-emoji { transform: translate(4px, -4px) rotate(8deg); }
.los-titel { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.los-info { display: block; font-size: 1.05rem; font-weight: 500; }
.niveau-zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.niveau-knopf { flex: 1 1 0; min-width: 0; font: inherit; font-weight: 600; font-size: 1rem; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 2rem; box-shadow: 0 3px 0 var(--ink); padding: .2rem .5rem; white-space: nowrap; }
.niveau-knopf.aktiv { background: var(--ink); color: #fff; transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.niveau-info { flex: 1 1 100%; font-size: .9rem; font-weight: 500; }

/* Dein Tag: Tagesziel-Ring, Serie, Woche */
.tag-karte { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1.1rem; align-items: center; background: linear-gradient(135deg, #fff 0%, var(--lila-hell) 100%); }
.ring { position: relative; width: 96px; height: 96px; }
.ring svg { width: 100%; height: 100%; display: block; }
.ring circle { fill: none; stroke-width: 13; }
.ring-wert { stroke: var(--pink); stroke-linecap: round; animation: ring-fuellen 1s ease-out; }
.ring.erreicht .ring-wert { stroke: var(--mint); }
.ring-spur { stroke: #e0d4ff; }
.ring-mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring-mitte b { font-size: 1.9rem; }
.ring-mitte small { font-size: .75rem; }
.ring.erreicht .ring-mitte b { font-size: 2.4rem; color: #0b7a4b; }
.serie { font-size: 1.35rem; line-height: 1.2; }
.serie.leer { font-size: 1.15rem; font-weight: 600; }
.tag-text { font-size: 1rem; line-height: 1.25; }
.woche { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.woche-tag { display: flex; flex-direction: column; align-items: center; gap: .15rem; flex: 1; max-width: 62px; }
.woche-kreis { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: #fff; border: 3px dashed #c9b8f5; }
.woche-tag.geuebt .woche-kreis { background: var(--sonne); border: 3px solid var(--ink); }
.woche-tag.heute .woche-kreis { border-color: var(--pink); }
.woche-tag.heute.geuebt .woche-kreis { border-color: var(--ink); box-shadow: 0 0 0 3px var(--pink); }
.woche-name { font-size: .8rem; font-weight: 600; }
.woche-tag.heute .woche-name { color: #c2255c; }

/* Weitere Übungen */
.weitere { display: grid; gap: .7rem; }
.mini-karte { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 1.4rem; box-shadow: 0 4px 0 var(--ink); padding: .6rem .9rem; transition: transform .12s; }
.mini-karte:hover { transform: translateY(-2px) rotate(-.4deg); color: var(--ink); }
.mini-karte:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.mini-karte.eltern { background: var(--pink-hell); }
.mini-emoji { font-size: 2rem; line-height: 1; flex: none; }
.mini-text { min-width: 0; line-height: 1.2; }
.mini-text b { display: block; font-size: 1.1rem; }
.mini-text small { display: block; font-size: .9rem; color: #5b4a7a; }
a.mini-karte { text-decoration: none; }

/* Themen */
.themen-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.thema-karte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 108px; padding: .7rem .5rem; text-align: center; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 1.5rem; box-shadow: var(--schatten); transition: transform .12s; }
.thema-karte:hover { transform: translateY(-3px) rotate(-.8deg); }
.thema-karte:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.thema-emoji { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; background: var(--thema); border: 3px solid var(--ink); }
.thema-karte .titel { font-weight: 700; font-size: 1.1rem; line-height: 1.15; }
.themen-raster .thema-karte:last-child:nth-child(odd) { grid-column: span 2; }

/* Stufe, Medaillen, Wunsch */
.schaetze { display: grid; gap: 1rem; align-items: start; }
.fortschritt-gross { height: 18px; border: 3px solid var(--ink); border-radius: 12px; background: var(--lila-hell); margin-bottom: .25rem; }
.fortschritt-gross .progress-bar { background: linear-gradient(90deg, var(--pink), var(--lila)); }
.regal { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.regal-platz { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.regal-medaille { position: relative; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; line-height: 1; background: var(--thema); border: 3px solid var(--ink); }
.regal-platz.voll .regal-medaille { box-shadow: 0 0 0 4px var(--sonne), 0 0 0 7px var(--ink); }
.regal-platz.leer .regal-medaille { background: #ece8f5; border: 3px dashed #b9a6f5; filter: grayscale(1); }
.regal-schloss { position: absolute; right: -6px; bottom: -6px; font-size: 1rem; font-style: normal; }
.regal-zahl { font-size: .85rem; font-weight: 600; }
.regal-hinweis { min-height: 1.3rem; }
.ziel { display: flex; align-items: center; gap: .75rem; background: var(--lila-hell); border: 3px dashed var(--lila); border-radius: 1.2rem; padding: .5rem .75rem; }
.ziel .vorschau { width: 60px; height: 60px; flex: none; }
.ziel .progress { height: 12px; border: 2px solid var(--ink); background: #fff; border-radius: 8px; }
.ziel .progress-bar { background: var(--sonne); }
.ziel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.ziel-link { font-size: .9rem; font-weight: 600; color: #5b3fd0; }

@media (min-width: 768px) {
  .weitere { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .themen-raster { grid-template-columns: repeat(4, 1fr); }
  .themen-raster .thema-karte:last-child:nth-child(odd) { grid-column: auto; }
  .schaetze { grid-template-columns: 1.3fr 1fr; }
  .regal { grid-template-columns: repeat(6, 1fr); }
  .tag-karte { grid-template-columns: auto 1fr auto; }
  .woche { grid-column: auto; gap: .5rem; }
}
@media (min-width: 992px) {
  .profil-rahmen { width: 150px; }
  .mitte { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
  .mitte .abschnitt:first-child { margin-top: 0; }
  .tag-karte { grid-template-columns: auto 1fr; }
  .woche { grid-column: 1 / -1; }
  .los-titel { font-size: 2.6rem; }
}
@media (max-width: 575.98px) {
  .los-titel { font-size: 1.9rem; }
  .los-emoji { font-size: 2.5rem; }
  .niveau-knopf { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ring-wert { animation: none; }
  .thema-karte:hover, .mini-karte:hover, .los-knopf:hover, .los-knopf:hover .los-emoji { transform: none; }
}
@keyframes ring-fuellen { from { stroke-dashoffset: 251.3; } }

/* ---------- Anmeldung und Eltern ---------- */
.spieler-karte { background: #fff; border: 3px solid var(--ink); border-radius: 1.4rem; box-shadow: 0 4px 0 var(--ink); padding: .6rem; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .15rem; color: var(--ink); font-size: 1.2rem; transition: transform .12s; }
.spieler-karte:hover { transform: translateY(-3px) rotate(-.8deg); }
.spieler-bild { width: 100%; aspect-ratio: 1; border-radius: 1rem; overflow: hidden; background: var(--pink-hell); display: block; }
.spieler-bild svg { width: 100%; height: 100%; display: block; }
.pin, .einrichtung { max-width: 460px; margin-inline: auto; }
.einrichtung .form-control { font-family: inherit; font-size: 1.2rem; border: 3px solid var(--ink); border-radius: 1rem; }
.pin-punkte { display: flex; gap: .7rem; justify-content: center; margin: 1rem 0 .3rem; min-height: 30px; }
.pin-punkt { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; transition: background .12s; }
.pin-punkt.voll { background: var(--pink); }
.pin-meldung { min-height: 1.7rem; color: #d6336c; font-weight: 600; margin-bottom: .3rem; }
.pin-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; max-width: 300px; margin: .4rem auto 0; }
.pin-taste { aspect-ratio: 1.25; font-size: 1.9rem; font-weight: 700; border: 3px solid var(--ink); border-radius: 1.2rem; background: #fff; box-shadow: 0 4px 0 var(--ink); color: var(--ink); padding: 0; font-family: inherit; }
.pin-taste:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pin-sonder { background: var(--sonne); }
.pin-leer { visibility: hidden; }
.wackeln { animation: wackeln .4s; }
.admin-tabelle { --bs-table-bg: transparent; font-size: 1rem; }
.admin-tabelle th { white-space: nowrap; }
.stat-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.stat-kachel { background: var(--lila-hell); border: 3px solid var(--ink); border-radius: 1.1rem; padding: .5rem .7rem; text-align: center; line-height: 1.15; display: flex; flex-direction: column; justify-content: center; }
.stat-kachel b { font-size: 1.6rem; }
.stat-kachel small { font-size: .8rem; }
.fortschritt-zeile { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(120px, 1fr) minmax(220px, 1.6fr); gap: .3rem 1rem; align-items: center; padding: .35rem 0; border-bottom: 1px dashed #d0bfff; }
.fortschritt-name { font-weight: 600; }
.fortschritt-balken { height: 16px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; }
.fortschritt-balken > div { height: 100%; border-radius: 8px; transition: width .4s; }
.fortschritt-info { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.tage { display: flex; gap: 4px; align-items: flex-end; height: 110px; }
.tag-spalte { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.tag-balken { width: 100%; min-height: 3px; background: var(--pink); border: 2px solid var(--ink); border-radius: 6px 6px 0 0; }
.tag-spalte small { font-size: .7rem; }
@media (max-width: 767.98px) { .fortschritt-zeile { grid-template-columns: 1fr; } }
.admin-aktionen { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; min-width: 230px; }
.admin-erweitert > summary { cursor: pointer; list-style-position: inside; }
.admin-erweitert[open] { border-color: #d6336c; }
.teil-hinweis { margin-top: .6rem; background: #fff9db; border: 2px solid #fcc419; border-radius: .9rem; padding: .45rem .8rem; font-weight: 500; }
.fehlerliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.eingabe-hinweis { color: #d6336c; font-weight: 600; font-size: .95rem; margin-top: .35rem; }
.form-control.is-invalid, .teil .form-control.is-invalid { border-color: #d6336c; background-image: none; box-shadow: 0 0 0 .2rem #d6336c33; animation: wackeln .35s; }
.kind-karte { display: flex; gap: 1rem; align-items: center; width: 100%; text-align: left; background: #fff; border: 3px solid var(--ink); border-radius: 1.4rem; box-shadow: 0 4px 0 var(--ink); padding: .7rem; color: var(--ink); font-size: 1rem; transition: transform .12s; }
.kind-karte:hover { transform: translateY(-3px); }
.kind-bild { width: 96px; flex: none; border-radius: 1rem; overflow: hidden; background: var(--pink-hell); border: 2px solid var(--ink); display: block; }
.kind-bild svg { width: 100%; display: block; }
.kind-info { display: flex; flex-direction: column; gap: .15rem; line-height: 1.25; min-width: 0; }
.kind-name { font-size: 1.35rem; }
.kind-mini { display: inline-block; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); background: var(--pink-hell); flex: none; }
.kind-mini svg { width: 100%; height: 100%; display: block; }
.admin-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.admin-tab { background: #fff; border: 3px solid var(--ink); border-radius: 2rem; padding: .35rem 1.1rem; font-weight: 600; font-size: 1.05rem; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.admin-tab.aktiv { background: var(--pink); color: #fff; text-shadow: 0 2px 0 #0003; }
.admin-tab.gefahr.aktiv { background: #d6336c; }
.gefahr-karte { border-color: #d6336c; }
.auswahl-hilfe { background: #fff9db; border: 3px solid var(--ink); border-radius: 1.1rem; padding: .7rem 1rem; margin-bottom: 1rem; display: grid; gap: .3rem; }
.modal { --bs-modal-bg: #fff; --bs-modal-color: var(--ink); }          /* --bs-body-bg ist transparent, daher hier ausdrücklich weiß */
.modal-content.beispiel-inhalt { background: #fff; border: 3px solid var(--ink); border-radius: 1.5rem; box-shadow: var(--schatten); font-family: inherit; }
.beispiel-inhalt .modal-header, .beispiel-inhalt .modal-footer { border-color: #d0bfff; }
.beispiel-kind { background: var(--lila-hell); border: 3px solid var(--ink); border-radius: 1.2rem; padding: 1rem; }
.beispiel-kind .aufgabe-text { font-size: 1.35rem; }
.beispiel-schritt { margin-top: .6rem; }
.teil-vorschau { flex: 1 1 200px; }
.teil-vorschau .teil-frage { font-size: 1.1rem; margin-bottom: .3rem; }
.teil-vorschau .form-control { text-align: center; font-weight: 600; border: 3px solid var(--ink); border-radius: 1rem 0 0 1rem; font-family: inherit; background: #fff; }
.teil-vorschau .form-control:only-child { border-radius: 1rem; }
.teil-vorschau .input-group-text { background: var(--sonne); border: 3px solid var(--ink); border-left: 0; border-radius: 0 1rem 1rem 0; font-weight: 600; color: var(--ink); }
.beispiel-loesung { background: #e6fcf5; border: 3px dashed var(--mint); border-radius: 1.2rem; padding: .8rem 1rem; }
.beispiel-antwort { background: var(--sonne); border: 2px solid var(--ink); border-radius: 1rem; padding: 0 .6rem; margin-left: .4rem; font-weight: 700; }
.beispiel-weg { list-style: none; padding-left: 0; white-space: pre-wrap; }
.niveau-klein { font: inherit; cursor: pointer; background: #fff; border: 3px solid var(--ink); border-radius: 2rem; padding: .15rem .8rem; font-weight: 600; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.niveau-klein.aktiv { background: var(--lila-hell); border-color: var(--pink); }
.admin-zahl { width: 5.5rem; border: 3px solid var(--ink); border-radius: .8rem; font-family: inherit; }

/* ---------- Aufgabe ---------- */
.aufgabe { --thema: var(--pink); border-color: var(--ink); }
.aufgabe-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap; }
.thema-chip { background: var(--thema); color: #fff; border: 3px solid var(--ink); border-radius: 2rem; padding: .1rem .9rem; font-weight: 600; text-shadow: 0 2px 0 #0003; }
.blatt-nr { font-weight: 600; }
.grund-chip { background: #fff; border: 3px solid var(--ink); border-radius: 2rem; padding: .05rem .8rem; font-weight: 600; font-size: .95rem; }
.grund-problem { background: #ffe3e3; } .grund-neu { background: #d3f9d8; } .grund-wenig { background: #e7f5ff; } .grund-besser { background: #fff3bf; }
.grund-gut { background: #e6fcf5; } .grund-wiederholen { background: #f3d9fa; } .grund-sicher { background: #ffd8a8; }
.blatt-balken { height: 14px; border: 3px solid var(--ink); border-radius: 10px; background: var(--lila-hell); margin-bottom: 1rem; }
.blatt-balken .progress-bar { background: var(--mint); }
.aufgabe-text { font-size: 1.45rem; line-height: 1.4; font-weight: 500; margin-bottom: .75rem; }
.figur { text-align: center; margin: 0 0 1rem; }
.figur svg, .figur img { max-width: 340px; width: 100%; height: auto; }
.teil { background: var(--lila-hell); border: 3px solid transparent; border-radius: 1.2rem; padding: .8rem 1rem; margin-bottom: .75rem; transition: background .2s, border-color .2s; }
.schritt { margin-bottom: .75rem; }
.schritt > .teil, .schritt > .teil-zeile { margin-bottom: 0; }
.schritt:not([hidden]):not(.fertig) { animation: aufpoppen .35s cubic-bezier(.2, 1.4, .4, 1); }
.schritt.fertig .teil { padding: .35rem .8rem; opacity: .85; }
.schritt.fertig .teil-frage { font-size: 1rem; margin-bottom: .2rem; }
.schritt.fertig .form-control, .schritt.fertig .input-group-text { font-size: 1.1rem; }
.schritt-anzeige { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; min-height: 1.6rem; }
.schritt-text { font-weight: 600; }
.schritt-punkte { display: flex; gap: .35rem; }
.schritt-punkte i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.schritt-punkte i.fertig { background: var(--mint); }
.schritt-punkte i.aktuell { background: var(--sonne); }
.teil-zeile { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.teil-zeile .teil { flex: 1 1 210px; margin-bottom: 0; }
.teil.richtig { background: #d3f9e5; border-color: var(--mint); }
.teil.falsch { background: #ffe0e6; border-color: #ff6b81; animation: wackeln .4s; }
.teil.gezeigt { background: #fff3bf; border-color: var(--sonne); }
.teil-frage { font-size: 1.25rem; margin-bottom: .5rem; font-weight: 500; }
.teil-label { display: inline-block; background: var(--pink); color: #fff; border-radius: 2rem; padding: 0 .6rem; margin-right: .4rem; font-weight: 700; min-width: 2.2rem; text-align: center; border: 2px solid var(--ink); }
.teil-eingabe { display: flex; align-items: center; gap: .6rem; }
.teil-eingabe .input-group { max-width: 330px; }
.teil .form-control { font-size: 1.6rem; font-weight: 600; text-align: center; color: var(--ink); border: 3px solid var(--ink); border-radius: 1rem 0 0 1rem; font-family: inherit; }
.teil .form-control:only-child { border-radius: 1rem; }
.teil .form-control:focus { box-shadow: 0 0 0 .25rem #ff6fae55; border-color: var(--ink); }
.teil .input-group-text { font-size: 1.4rem; font-weight: 600; background: var(--sonne); border: 3px solid var(--ink); border-left: 0; border-radius: 0 1rem 1rem 0; color: var(--ink); }
.teil-icon { font-size: 2rem; min-width: 2.2rem; }
.teil-tipp { margin-top: .6rem; background: #fff; border: 2px dashed var(--lila); border-radius: .9rem; padding: .4rem .8rem; font-size: 1rem; }
.aktionen { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.meldung { margin-top: .75rem; font-size: 1.2rem; font-weight: 500; }
.erfolg { text-align: center; background: linear-gradient(135deg, #fff, var(--lila-hell)); border: 3px solid var(--ink); border-radius: 1.4rem; padding: 1rem; margin-top: 1rem; animation: aufpoppen .45s cubic-bezier(.2, 1.6, .4, 1); }
.erfolg .sterne { font-size: 2.6rem; letter-spacing: .15rem; }
.erfolg .stern-leer { filter: grayscale(1) opacity(.35); }
.erfolg h3 { margin: .2rem 0; }
.weg { margin-top: 1rem; background: #fff; border: 3px dashed var(--lila); border-radius: 1.2rem; padding: .8rem 1.1rem; }
.weg h4 { font-size: 1.15rem; margin-bottom: .4rem; }
.weg ul { list-style: none; padding: 0; margin: 0; font-size: 1.15rem; }
.weg li { padding: .1rem 0; white-space: pre-wrap; }

/* ---------- Avatar und Shop ---------- */
svg.avatar { display: block; }
.shop-kopf { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #fff, var(--lila-hell)); }
.shop-kopf .gross { width: 210px; max-width: 45%; flex: none; }
.shop-kopf .gross svg { width: 100%; border-radius: 1.4rem; border: 3px solid var(--ink); background: var(--pink-hell); }
.shop-kopf .form-control { font-family: inherit; font-weight: 600; font-size: 1.3rem; border: 3px solid var(--ink); border-radius: 1rem; max-width: 280px; }
.kategorien { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem .25rem 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.kategorien::-webkit-scrollbar { display: none; }
.kat-knopf { flex: none; background: #fff; border: 3px solid var(--ink); border-radius: 2rem; padding: .3rem .95rem; font-weight: 600; font-size: 1.05rem; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.kat-knopf.aktiv { background: var(--pink); color: #fff; text-shadow: 0 2px 0 #0003; }
.artikel { background: #fff; border: 3px solid var(--ink); border-radius: 1.3rem; box-shadow: 0 4px 0 var(--ink); padding: .6rem; text-align: center; height: 100%; display: flex; flex-direction: column; gap: .4rem; }
.artikel.an { background: #d3f9e5; }
.artikel .vorschau { width: 100%; aspect-ratio: 1; border-radius: 1rem; background: var(--pink-hell); border: 2px solid #ffc2dd; padding: 0; cursor: pointer; display: block; overflow: hidden; }
.artikel .vorschau svg, .artikel .vorschau img { width: 100%; height: 100%; object-fit: contain; display: block; }
.artikel.gesperrt .vorschau svg { filter: grayscale(1) blur(1.5px); opacity: .6; transition: filter .2s, opacity .2s; }   /* noch nicht bezahlbar: grau und leicht verschwommen, beim Draufzeigen scharf */
.artikel.gesperrt .vorschau:hover svg, .artikel.gesperrt .vorschau:focus-visible svg { filter: grayscale(1); opacity: .85; }
.artikel .name { font-weight: 600; line-height: 1.15; flex: 1; }
.artikel .btn { font-size: .95rem; padding: .25rem .5rem; }
.anprobe-balken { background: var(--sonne); border: 3px solid var(--ink); border-radius: 1rem; padding: .4rem .9rem; margin-top: .75rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- Desktop ---------- */
.container { max-width: 1140px; }
@media (min-width: 992px) {
  body { font-size: 1.15rem; }
  .karte { padding: 1.75rem; }
  .aufgabe-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: start; }
  .aufgabe-links { position: sticky; top: 100px; }
  .aufgabe-text { font-size: 1.7rem; }
  .figur svg { max-width: 420px; }
  .shop-kopf .gross { width: 260px; }
}

/* ---------- Effekte ---------- */
.konfetti { position: fixed; top: -40px; z-index: 20000; pointer-events: none; animation: fallen linear forwards; user-select: none; }
.punkte-flug { position: fixed; z-index: 20000; font-size: 2rem; font-weight: 700; color: #f08c00; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; pointer-events: none; animation: aufsteigen 1.4s ease-out forwards; }
.ueberlagerung { position: fixed; inset: 0; background: #3b2a5acc; z-index: 15000; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: einblenden .25s; }
.ueberlagerung .karte { max-width: 420px; text-align: center; animation: aufpoppen .5s cubic-bezier(.2, 1.6, .4, 1); }
.ueberlagerung svg.avatar { width: 180px; margin: 0 auto; border-radius: 1.4rem; border: 3px solid var(--ink); background: var(--pink-hell); }
.huepfen { animation: huepfen .6s; }
.punkte-flug.abzug { color: #e03131; animation: absinken 1.4s ease-in forwards; }          /* Abzug: rot und nach unten – Gewinn: orange und nach oben */
.punkte-pille.abzug-blitz { animation: abzugblitz .7s; }
@media (prefers-reduced-motion: reduce) { .punkte-flug { animation: none; } .punkte-flug:not(.abzug) .muenze, .muenze-glanz .muenz-symbol .muenze { animation: none; } }               /* sonst wäre die Anzeige sofort unsichtbar */

@keyframes muenze-wackeln { 15% { transform: rotate(-16deg) scale(1.18); filter: brightness(1.3); } 35% { transform: rotate(14deg) scale(1.18); } 55% { transform: rotate(-9deg) scale(1.1); filter: brightness(1.15); } 75% { transform: rotate(4deg); } }
@keyframes muenze-drehen { from { transform: perspective(120px) rotateY(0); } to { transform: perspective(120px) rotateY(900deg); } }
@keyframes puls { 50% { transform: scale(1.06); } }
@keyframes wackeln { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes aufpoppen { from { transform: scale(.6); opacity: 0; } }
@keyframes einblenden { from { opacity: 0; } }
@keyframes huepfen { 30% { transform: translateY(-14px) scale(1.08); } 60% { transform: translateY(0) scale(.96); } }
@keyframes fallen { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes aufsteigen { to { transform: translateY(-90px); opacity: 0; } }
@keyframes absinken { from { transform: translateY(-16px); } to { transform: translateY(56px); opacity: 0; } }
@keyframes abzugblitz { 15%, 55% { background: #e03131; color: #fff; transform: translateX(-5px); } 35%, 75% { background: #e03131; color: #fff; transform: translateX(5px); } }

@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .aufgabe-text { font-size: 1.3rem; }
  .karte { padding: 1rem; }
  .stufe-box { display: none; }
  .marke-text, .abmelden-text { display: none; }
  .marke { font-size: 1.8rem; }
  .kopf-innen { gap: .5rem; }
  .marke { margin-right: auto; }
  .stufe-box + .punkte-pille { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Schularbeit */
.sa-quelle { display: inline-block; font-size: .85rem; font-weight: 600; background: #fff9db; border: 2px solid #fcc419; border-radius: 2rem; padding: 0 .55rem; white-space: nowrap; color: var(--ink); }
.sa-erg summary { cursor: pointer; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sa-versuche li { padding: .3rem 0; border-bottom: 1px dashed #d0bfff; }
.sa-aufgabe .aufgabe-rechts .teil { margin-bottom: .6rem; }

/* Richtig/Falsch */
.jn-knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; }
.jn-knopf { font-size: 1.3rem; font-weight: 600; font-family: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 1rem; padding: .5rem 1.3rem; cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .1s, box-shadow .1s, background .15s; }
.jn-knopf:hover:not(:disabled) { background: var(--sonne); }
.jn-knopf:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.jn-knopf.aktiv { background: var(--sonne); transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.teil.richtig .jn-knopf.aktiv { background: #8ce99a; }
.jn-knopf:disabled:not(.aktiv) { opacity: .45; }

/* Kleine Bilder zur Auflockerung (mit versteckter Eule) */
.bilder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; }
.bild { width: 190px; max-width: 100%; }
.bild svg { width: 100%; height: auto; display: block; }
.bilder .figur { margin: 0; }

/* Skizzen (SVG-Teile per Klasse, keine Inline-Stile) */
/* skizze-start */
.skizze-flaeche { fill: #b8f2c8; stroke: #a0693d; stroke-width: 7; stroke-dasharray: 3 6; stroke-linecap: round; stroke-linejoin: round; }
.skizze-frage { fill: #ffd966; stroke: #3b2a5a; stroke-width: 3; }
.skizze-frage-text { font-size: 24px; font-weight: 700; fill: #3b2a5a; }
.skizze-text, .skizze-seite { font-weight: 600; fill: #3b2a5a; }
.skizze-seite { font-size: 16px; }
.skizze-mitte { font-weight: 600; fill: #2b8a3e; }
.g15 { font-size: 15px; } .g16 { font-size: 16px; } .g17 { font-size: 17px; } .g18 { font-size: 18px; } .g19 { font-size: 19px; } .g21 { font-size: 21px; }
/* skizze-ende */

/* Breiten und Höhen in Prozent als Klassen (kein Inline-Stil) */
.versteckt { display: none !important; }

/* Filter der Aufgabenauswahl (Eltern-Bereich) */
.filter-leiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; padding: .6rem; background: var(--lila-hell); border: 3px solid var(--ink); border-radius: 1.1rem; }
.filter-leiste .form-control, .filter-leiste .form-select { width: auto; flex: 1 1 11rem; border: 2px solid var(--ink); border-radius: .8rem; font-family: inherit; }
.filter-leiste .filter-suche { flex: 2 1 16rem; }
.filter-zaehler { font-size: .9rem; font-weight: 600; margin-left: auto; }
.filter-leer { padding: 1rem; text-align: center; font-weight: 600; }
.breite-0 { width: 0%; } .hoehe-0 { height: 0%; }
.breite-1 { width: 1%; } .hoehe-1 { height: 1%; }
.breite-2 { width: 2%; } .hoehe-2 { height: 2%; }
.breite-3 { width: 3%; } .hoehe-3 { height: 3%; }
.breite-4 { width: 4%; } .hoehe-4 { height: 4%; }
.breite-5 { width: 5%; } .hoehe-5 { height: 5%; }
.breite-6 { width: 6%; } .hoehe-6 { height: 6%; }
.breite-7 { width: 7%; } .hoehe-7 { height: 7%; }
.breite-8 { width: 8%; } .hoehe-8 { height: 8%; }
.breite-9 { width: 9%; } .hoehe-9 { height: 9%; }
.breite-10 { width: 10%; } .hoehe-10 { height: 10%; }
.breite-11 { width: 11%; } .hoehe-11 { height: 11%; }
.breite-12 { width: 12%; } .hoehe-12 { height: 12%; }
.breite-13 { width: 13%; } .hoehe-13 { height: 13%; }
.breite-14 { width: 14%; } .hoehe-14 { height: 14%; }
.breite-15 { width: 15%; } .hoehe-15 { height: 15%; }
.breite-16 { width: 16%; } .hoehe-16 { height: 16%; }
.breite-17 { width: 17%; } .hoehe-17 { height: 17%; }
.breite-18 { width: 18%; } .hoehe-18 { height: 18%; }
.breite-19 { width: 19%; } .hoehe-19 { height: 19%; }
.breite-20 { width: 20%; } .hoehe-20 { height: 20%; }
.breite-21 { width: 21%; } .hoehe-21 { height: 21%; }
.breite-22 { width: 22%; } .hoehe-22 { height: 22%; }
.breite-23 { width: 23%; } .hoehe-23 { height: 23%; }
.breite-24 { width: 24%; } .hoehe-24 { height: 24%; }
.breite-25 { width: 25%; } .hoehe-25 { height: 25%; }
.breite-26 { width: 26%; } .hoehe-26 { height: 26%; }
.breite-27 { width: 27%; } .hoehe-27 { height: 27%; }
.breite-28 { width: 28%; } .hoehe-28 { height: 28%; }
.breite-29 { width: 29%; } .hoehe-29 { height: 29%; }
.breite-30 { width: 30%; } .hoehe-30 { height: 30%; }
.breite-31 { width: 31%; } .hoehe-31 { height: 31%; }
.breite-32 { width: 32%; } .hoehe-32 { height: 32%; }
.breite-33 { width: 33%; } .hoehe-33 { height: 33%; }
.breite-34 { width: 34%; } .hoehe-34 { height: 34%; }
.breite-35 { width: 35%; } .hoehe-35 { height: 35%; }
.breite-36 { width: 36%; } .hoehe-36 { height: 36%; }
.breite-37 { width: 37%; } .hoehe-37 { height: 37%; }
.breite-38 { width: 38%; } .hoehe-38 { height: 38%; }
.breite-39 { width: 39%; } .hoehe-39 { height: 39%; }
.breite-40 { width: 40%; } .hoehe-40 { height: 40%; }
.breite-41 { width: 41%; } .hoehe-41 { height: 41%; }
.breite-42 { width: 42%; } .hoehe-42 { height: 42%; }
.breite-43 { width: 43%; } .hoehe-43 { height: 43%; }
.breite-44 { width: 44%; } .hoehe-44 { height: 44%; }
.breite-45 { width: 45%; } .hoehe-45 { height: 45%; }
.breite-46 { width: 46%; } .hoehe-46 { height: 46%; }
.breite-47 { width: 47%; } .hoehe-47 { height: 47%; }
.breite-48 { width: 48%; } .hoehe-48 { height: 48%; }
.breite-49 { width: 49%; } .hoehe-49 { height: 49%; }
.breite-50 { width: 50%; } .hoehe-50 { height: 50%; }
.breite-51 { width: 51%; } .hoehe-51 { height: 51%; }
.breite-52 { width: 52%; } .hoehe-52 { height: 52%; }
.breite-53 { width: 53%; } .hoehe-53 { height: 53%; }
.breite-54 { width: 54%; } .hoehe-54 { height: 54%; }
.breite-55 { width: 55%; } .hoehe-55 { height: 55%; }
.breite-56 { width: 56%; } .hoehe-56 { height: 56%; }
.breite-57 { width: 57%; } .hoehe-57 { height: 57%; }
.breite-58 { width: 58%; } .hoehe-58 { height: 58%; }
.breite-59 { width: 59%; } .hoehe-59 { height: 59%; }
.breite-60 { width: 60%; } .hoehe-60 { height: 60%; }
.breite-61 { width: 61%; } .hoehe-61 { height: 61%; }
.breite-62 { width: 62%; } .hoehe-62 { height: 62%; }
.breite-63 { width: 63%; } .hoehe-63 { height: 63%; }
.breite-64 { width: 64%; } .hoehe-64 { height: 64%; }
.breite-65 { width: 65%; } .hoehe-65 { height: 65%; }
.breite-66 { width: 66%; } .hoehe-66 { height: 66%; }
.breite-67 { width: 67%; } .hoehe-67 { height: 67%; }
.breite-68 { width: 68%; } .hoehe-68 { height: 68%; }
.breite-69 { width: 69%; } .hoehe-69 { height: 69%; }
.breite-70 { width: 70%; } .hoehe-70 { height: 70%; }
.breite-71 { width: 71%; } .hoehe-71 { height: 71%; }
.breite-72 { width: 72%; } .hoehe-72 { height: 72%; }
.breite-73 { width: 73%; } .hoehe-73 { height: 73%; }
.breite-74 { width: 74%; } .hoehe-74 { height: 74%; }
.breite-75 { width: 75%; } .hoehe-75 { height: 75%; }
.breite-76 { width: 76%; } .hoehe-76 { height: 76%; }
.breite-77 { width: 77%; } .hoehe-77 { height: 77%; }
.breite-78 { width: 78%; } .hoehe-78 { height: 78%; }
.breite-79 { width: 79%; } .hoehe-79 { height: 79%; }
.breite-80 { width: 80%; } .hoehe-80 { height: 80%; }
.breite-81 { width: 81%; } .hoehe-81 { height: 81%; }
.breite-82 { width: 82%; } .hoehe-82 { height: 82%; }
.breite-83 { width: 83%; } .hoehe-83 { height: 83%; }
.breite-84 { width: 84%; } .hoehe-84 { height: 84%; }
.breite-85 { width: 85%; } .hoehe-85 { height: 85%; }
.breite-86 { width: 86%; } .hoehe-86 { height: 86%; }
.breite-87 { width: 87%; } .hoehe-87 { height: 87%; }
.breite-88 { width: 88%; } .hoehe-88 { height: 88%; }
.breite-89 { width: 89%; } .hoehe-89 { height: 89%; }
.breite-90 { width: 90%; } .hoehe-90 { height: 90%; }
.breite-91 { width: 91%; } .hoehe-91 { height: 91%; }
.breite-92 { width: 92%; } .hoehe-92 { height: 92%; }
.breite-93 { width: 93%; } .hoehe-93 { height: 93%; }
.breite-94 { width: 94%; } .hoehe-94 { height: 94%; }
.breite-95 { width: 95%; } .hoehe-95 { height: 95%; }
.breite-96 { width: 96%; } .hoehe-96 { height: 96%; }
.breite-97 { width: 97%; } .hoehe-97 { height: 97%; }
.breite-98 { width: 98%; } .hoehe-98 { height: 98%; }
.breite-99 { width: 99%; } .hoehe-99 { height: 99%; }
.breite-100 { width: 100%; } .hoehe-100 { height: 100%; }

/* Konfetti und Effekte: Position, Größe, Dauer und Verzögerung als Klassen (kein Inline-Stil) */
.kp-0 { left: 1vw; }
.kp-1 { left: 6vw; }
.kp-2 { left: 11vw; }
.kp-3 { left: 16vw; }
.kp-4 { left: 21vw; }
.kp-5 { left: 26vw; }
.kp-6 { left: 31vw; }
.kp-7 { left: 36vw; }
.kp-8 { left: 41vw; }
.kp-9 { left: 46vw; }
.kp-10 { left: 51vw; }
.kp-11 { left: 56vw; }
.kp-12 { left: 61vw; }
.kp-13 { left: 66vw; }
.kp-14 { left: 71vw; }
.kp-15 { left: 76vw; }
.kp-16 { left: 81vw; }
.kp-17 { left: 86vw; }
.kp-18 { left: 91vw; }
.kp-19 { left: 96vw; }
.kg-0 { font-size: 18px; }
.kg-1 { font-size: 24px; }
.kg-2 { font-size: 30px; }
.kg-3 { font-size: 38px; }
.kd-0 { animation-duration: 2.0s; }
.kd-1 { animation-duration: 2.5s; }
.kd-2 { animation-duration: 3.0s; }
.kd-3 { animation-duration: 3.5s; }
.kd-4 { animation-duration: 4.0s; }
.kv-0 { animation-delay: 0.0s; }
.kv-1 { animation-delay: 0.1s; }
.kv-2 { animation-delay: 0.2s; }
.kv-3 { animation-delay: 0.30000000000000004s; }
.kv-4 { animation-delay: 0.4s; }
.kv-5 { animation-delay: 0.5s; }
.punkte-flug { top: 4.5rem; right: 1.2rem; }

/* Eltern-Bereich: Farben der Lernstand-Balken, Links als Knöpfe, Dialoge */
.farbe-neu { background: #ced4da; } .farbe-wenig { background: #adb5bd; } .farbe-problem { background: #ff6b81; }
.farbe-besser { background: #ffd43b; } .farbe-gut { background: #4dabf7; } .farbe-sicher { background: #3ddc97; }
a.spieler-karte, a.kind-karte, a.kat-knopf, a.admin-tab, a.niveau-klein, a.marke, a.kopf-avatar { text-decoration: none; }
a.kat-knopf, a.admin-tab, a.niveau-klein { display: inline-block; }
dialog.dialog-karte { border: 3px solid var(--ink); border-radius: 1.4rem; padding: 1.2rem; max-width: 460px; width: calc(100% - 2rem); box-shadow: 0 6px 0 var(--ink); color: var(--ink); background: #fff; }
dialog.dialog-karte::backdrop { background: #3b2a5acc; }
.ergebnis-liste { max-width: 380px; }

/* Verlauf (Eltern-Bereich) */
.verlauf-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.verlauf-ordnung { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.verlauf-tabelle .verlauf-tag th { background: var(--lila-hell); font-weight: 700; padding-top: .6rem; }
.verlauf-seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: .75rem; }

/* Beispiel-Fenster (Eltern-Bereich) */
dialog.dialog-gross { max-width: 780px; max-height: calc(100dvh - 2rem); overflow-y: auto; }
.beispiel-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.beispiel-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.beispiel-leiste .neu { margin-left: auto; }
.beispiel-fuss { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* Schularbeit-Übersicht (neu): Kopfzeile der Kind-Seiten im Eltern-Bereich, aufklappbare Schularbeiten, Ergebnis-Streifen, Problemaufgaben */
.kind-zeile { display: flex; flex-wrap: wrap; gap: .1rem .5rem; font-weight: 600; }
.kind-zeile span:not(:last-child)::after { content: "·"; margin-left: .5rem; font-weight: 400; }
.sau-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .6rem; }
.sau-mehr summary, .sau-liste summary { cursor: pointer; font-size: .9rem; color: var(--lila); font-weight: 600; width: fit-content; }
.sau-mehr { margin-bottom: .8rem; }
.sau-plan { background: var(--lila-hell); border: 3px solid var(--ink); border-radius: 1.1rem; padding: .6rem .9rem; margin-top: .8rem; }
.sau-plan > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; cursor: pointer; list-style: none; }
.sau-plan > summary::-webkit-details-marker { display: none; }
.sau-plan > summary::before { content: "▸"; font-size: 1.3rem; line-height: 1; color: var(--pink); }
.sau-plan[open] > summary::before { content: "▾"; }
.sau-name { font-weight: 700; font-size: 1.15rem; flex: 1 1 5rem; }
.sau-meta { flex: 1 1 100%; order: 3; font-size: .95rem; padding-left: 1.4rem; }
.sau-aendern { margin-left: auto; }
.sau-trend { font-weight: 600; white-space: nowrap; }
.sau-trend.hoch { color: #0b7a4b; }
.sau-trend.runter { color: #c2255c; }
.sau-inhalt { margin-top: .7rem; padding-top: .7rem; border-top: 2px dashed #b9a6f5; }
.sau-quellen { margin-bottom: .2rem; }
.sau-liste { margin-bottom: .4rem; }
.sau-liste ol { margin: .4rem 0 0; padding-left: 1.5rem; font-size: .95rem; }
.sau-liste li { padding: .1rem 0; }
.sau-titel { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.sau-titel small { font-size: .8rem; font-weight: 400; }
.sau-versuche { list-style: none; margin: 0; padding: 0; }
.sau-versuch { display: grid; grid-template-columns: 9.5rem 1fr auto auto; align-items: center; gap: .3rem .8rem; padding: .35rem 0; border-bottom: 1px dashed #d0bfff; }
.sau-wann { font-size: .95rem; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.sau-streifen { display: flex; flex-wrap: wrap; gap: 2px 3px; min-width: 0; }
.sau-feld { flex: 1 1 1rem; max-width: 1.7rem; min-width: 0; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .4rem; border: 2px solid; font-size: .8rem; font-weight: 700; line-height: 1; cursor: help; }
.sau-feld.ja { background: #d3f9e5; border-color: #2f9e6e; color: #0b7a4b; }
.sau-feld.nein { background: #ffdce8; border-color: #d6336c; color: #b0204f; }
.sau-feld.fehlt { background: #fff; border: 2px dashed #b9a6f5; color: #9a8bc4; }
.sau-ergebnis { white-space: nowrap; }
.sau-problem { margin: 0; padding-left: 1.3rem; }
.sau-problem li { padding: .15rem 0; }
.sau-falsch { color: #b0204f; font-weight: 600; }
.sau-ok { color: #0b7a4b; font-weight: 600; }
.sa-versuche .btn { flex-shrink: 0; }
.sau-fuss { display: flex; justify-content: flex-end; margin-top: 1rem; }
@media (max-width: 575.98px) {
  .sau-versuch { grid-template-columns: 1fr auto; }
  .sau-wann { grid-area: 1 / 1; }
  .sau-ergebnis { grid-area: 2 / 1; }
  .sau-ansehen { grid-area: 1 / 2 / 3 / 3; }
  .sau-streifen { grid-area: 3 / 1 / 4 / 3; }
}

/* Auswahl-Liste (neu): Aufgabenauswahl und Schularbeit-Editor – Blöcke nach Thema oder Buchseite, je Aufgabe eine Zeile */
.filter-leiste .form-select, .filter-leiste .form-control { min-width: 0; max-width: 100%; }
.ordnen-text { display: none; }
.auswahl-werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.auswahl-ordnen { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }
.auswahl-raster { display: grid; gap: .6rem; }
.auswahl-ansicht { display: grid; gap: .6rem; }
.auswahl-block { background: var(--lila-hell); border: 3px solid var(--ink); border-radius: 1.1rem; }
.auswahl-block > summary, .auswahl-zeile > summary { list-style: none; cursor: pointer; display: grid; align-items: center; column-gap: .5rem; }
.auswahl-block > summary::-webkit-details-marker, .auswahl-zeile > summary::-webkit-details-marker { display: none; }
.auswahl-block > summary::after, .auswahl-zeile > summary::after { content: "▾"; font-size: 1.1rem; line-height: 1; opacity: .75; }
.auswahl-block[open] > summary::after, .auswahl-zeile[open] > summary::after { content: "▴"; }
.auswahl-raster .form-check-input { width: 1.35rem; height: 1.35rem; margin: 0; border: 2px solid var(--ink); flex: none; cursor: pointer; }
/* Kopf eines Blocks: Häkchen | Titel | Chevron, darunter Info und Knopf (breit: alles in einer Zeile) */
.auswahl-block > summary { grid-template-columns: auto 1fr auto; row-gap: .15rem; padding: .6rem .8rem; }
.auswahl-block > summary::after { grid-column: 3; grid-row: 1; }
.block-box { grid-column: 1; grid-row: 1; }
.block-titel { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 1.1rem; min-width: 0; }
.block-info { grid-column: 2 / 4; grid-row: 2; font-size: .9rem; font-weight: 500; }
.block-knopf { grid-column: 2 / 4; grid-row: 3; justify-self: start; margin-top: .25rem; }
.auswahl-block > .auswahl-liste { display: grid; margin: 0 .5rem .5rem; background: #fff; border-radius: .8rem; border: 2px solid var(--ink); }
/* Zeile einer Aufgabe: Häkchen + Titel | Buchverweis | Lernstand-Punkt | Chevron (schmal: Buchverweis in der zweiten Zeile) */
.auswahl-zeile { border-bottom: 1px dashed #d0bfff; }
.auswahl-zeile:last-child { border-bottom: 0; }
.auswahl-zeile > summary { grid-template-columns: 1fr auto auto; row-gap: .1rem; padding: .45rem .6rem; }
.auswahl-zeile > summary:hover { background: #faf7ff; }
.auswahl-name { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 600; cursor: pointer; }
.auswahl-name > span { min-width: 0; overflow-wrap: anywhere; }
.auswahl-zeile .sa-quelle { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-left: 1.9rem; }
.stand-punkt { grid-column: 2; grid-row: 1; font-size: 1.1rem; line-height: 1; cursor: help; }
.auswahl-zeile > summary::after { grid-column: 3; grid-row: 1; }
.quelle-kurz { display: none; }
.ansicht-seite .quelle-voll { display: none; }
.ansicht-seite .quelle-kurz { display: inline; }
.auswahl-detail { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .1rem .6rem .6rem 2.5rem; }
.auswahl-detail small { opacity: .9; }
.auswahl-detail .beispiel-knopf { padding: .1rem .7rem; font-size: .85rem; box-shadow: 0 2px 0 var(--ink); }
.auswahl-hilfe-mehr { margin-top: .4rem; display: grid; gap: .3rem; }
.auswahl-hilfe-mehr > summary { cursor: pointer; font-weight: 600; }
.auswahl-legende { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
/* untere Leiste: bleibt beim Scrollen am unteren Rand sichtbar */
.auswahl-leiste { position: sticky; bottom: .5rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
                  margin-top: 1rem; padding: .6rem .8rem; background: #fff; border: 3px solid var(--ink); border-radius: 1.2rem; box-shadow: 0 4px 0 var(--ink); }
.auswahl-zaehler { font-weight: 700; }
.auswahl-leiste-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.auswahl-alle-spieler { display: flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer; }
/* Schularbeit-Editor: Zusammenfassung der Auswahl */
.sa-zusammenfassung { background: #fff9db; border: 3px solid var(--ink); border-radius: 1.1rem; padding: .6rem .9rem; margin-bottom: 1rem; }
.sa-zusammenfassung > summary { cursor: pointer; font-size: 1.1rem; }
.sa-eintraege { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem .9rem; }
.sa-eintrag { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem .5rem; min-width: 0; padding-bottom: .3rem; border-bottom: 1px dashed #fcc419; }
.sa-eintrag .sa-quelle { grid-column: 1; grid-row: 2; justify-self: start; }
.sa-eintrag-titel { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.sa-entfernen { grid-column: 2; grid-row: 1 / 3; flex: none; padding: 0 .5rem; font-size: .8rem; box-shadow: 0 2px 0 var(--ink); }
@media (min-width: 576px) {
  .ordnen-text { display: inline; }
  .auswahl-block > summary { grid-template-columns: auto auto 1fr auto auto; }
  .auswahl-block > summary::after { grid-column: 5; }
  .block-info { grid-column: 3; grid-row: 1; }
  .block-knopf { grid-column: 4; grid-row: 1; margin-top: 0; }
  .auswahl-zeile > summary { grid-template-columns: 1fr auto auto auto; }
  .auswahl-zeile .sa-quelle { grid-column: 2; grid-row: 1; margin-left: 0; }
  .stand-punkt { grid-column: 3; }
  .auswahl-zeile > summary::after { grid-column: 4; }
}
@media (min-width: 576px) {
  .sa-eintrag { grid-template-columns: 9.5rem 1fr auto; padding-bottom: 0; border-bottom: 0; }
  .sa-eintrag .sa-quelle { grid-column: 1; grid-row: 1; }
  .sa-eintrag-titel { grid-column: 2; font-weight: 500; }
  .sa-entfernen { grid-column: 3; grid-row: 1; }
}
@media (min-width: 992px) { .sa-eintraege { grid-template-columns: 1fr 1fr; } }

/* Zettel gutschreiben (Eltern-Bereich) */
.zettel-angaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem 1rem; margin-bottom: 1rem; }
.zettel-angaben label { display: grid; gap: .2rem; font-weight: 600; font-size: .9rem; }
.zettel-angaben .eingabe-hinweis { grid-column: 1 / -1; }
.zettel-bloecke { display: grid; gap: .6rem; }
.zettel-block > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .8rem; }
.zettel-block > summary::-webkit-details-marker { display: none; }
.zettel-block > summary::after { content: "▾"; opacity: .75; }
.zettel-block[open] > summary::after { content: "▴"; }
.zettel-block .block-titel { font-weight: 700; }
.zettel-block .block-zaehler { margin-left: auto; font-size: .85rem; font-weight: 600; }
.zettel-zeilen { display: grid; margin: 0 .5rem .5rem; background: #fff; border-radius: .8rem; border: 2px solid var(--ink); }
.zettel-zeile { display: grid; grid-template-columns: 1fr minmax(9.5rem, 12rem); align-items: center; gap: .3rem .8rem; padding: .4rem .7rem; border-bottom: 1px dashed #d0bfff; }
.zettel-zeile:last-child { border-bottom: 0; }
.zettel-name { font-weight: 600; min-width: 0; }
.zettel-name .sa-quelle { white-space: normal; }
.zettel-ergebnis { border: 2px solid var(--ink); border-radius: .8rem; font-family: inherit; padding: .2rem 1.6rem .2rem .6rem; }
.verlauf-notiz { opacity: .8; }
@media (max-width: 575.98px) { .zettel-zeile { grid-template-columns: 1fr; } }

/* Übungen der Eltern im Lernmodus */
.uebung-karte { background: linear-gradient(120deg, #15aabf, #4c6ef5); min-height: 0; display: flex; align-items: center; gap: .5rem; }
.uebung-karte .emoji { display: inline; font-size: 2.4rem; margin-right: .6rem; }
@media (min-width: 768px) { .uebung-karte .emoji { font-size: 3rem; } }
.grund-uebung { background: #d0ebff; }

/* Übung zusammenstellen (Reiter Lernfortschritt) */
.uebung-liste { display: grid; gap: .4rem; margin: .5rem 0 1rem; }
.uebung-eintrag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .5rem .8rem; background: #e3fafc; border: 2px solid var(--ink); border-radius: 1rem; }
.uebung-eintrag.uebung-fertig { background: #ebfbee; }
.uebung-werkzeug { display: grid; gap: .5rem; margin-bottom: .8rem; }
.uebung-themen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.uebung-thema.aktiv { background: var(--lila-hell); border-color: var(--pink); }
.fortschritt-name { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.fortschritt-name .uebung-box { width: 1.3rem; height: 1.3rem; margin: 0; flex: none; border: 2px solid var(--ink); }
.uebung-leiste { align-items: flex-end; }
.uebung-feld { display: grid; gap: .15rem; font-size: .8rem; font-weight: 600; }
.uebung-feld .form-control, .uebung-feld .form-select { border: 2px solid var(--ink); border-radius: .8rem; font-family: inherit; }
.uebung-feld #uebung-anzahl { width: 5rem; }

/* Preisschild im Knopf: weißer Chip, darauf ist der Stern gut zu sehen und klar, dass es etwas kostet */
.preis { display: inline-block; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 2rem; padding: 0 .6rem; margin-left: .45rem; font-weight: 700; font-size: .92em; line-height: 1.5; white-space: nowrap; }

/* QR-Code (Gerät verbinden), Geräteliste */
.qr-bild { width: 100%; max-width: 300px; height: auto; image-rendering: pixelated; border: 1px solid #ddd; border-radius: .5rem; }
.geraete-liste { list-style: none; padding: 0; margin: 0; }
.geraete-liste li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed #ddd; flex-wrap: wrap; }
.codes-liste { font-family: ui-monospace, monospace; font-size: 1.1rem; columns: 2; list-style: none; padding: 0; }