:root{--hintergrund:#f6f5ff;--flaeche:#fff;--text:#1e1b2e;--text-leise:#5e5a70;--text-hauptfarbe:#3a2dd9;--text-auf-hauptfarbe:#fff;--hauptfarbe:#5b4bff;--akzent:#ff4fa3;--hell:#e6e4ff;--rand:#d9d6fa;--gelb:#ffd84d;--richtig:#2fa84f;--richtig-hell:#ddf6e2;--falsch:#e5484d;--falsch-hell:#ffe3e3;--ecken-klein:10px;--ecken-mittel:18px;--ecken-rund:999px;--font-titel:"Fredoka", system-ui, sans-serif;--font-text:"Nunito", system-ui, sans-serif;--font-inter:"Inter", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--hintergrund);font-family:var(--font-text);color:var(--text)}.app{flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;display:flex;position:relative}.screen{flex-direction:column;flex:1;display:flex}.screen[hidden]{display:none}.kopfzeile{flex-shrink:0;align-items:center;gap:12px;height:60px;padding:8px 20px 12px;display:flex}.zurueck{font-family:var(--font-titel);color:var(--text);cursor:pointer;background:0 0;border:0;padding:0;font-size:18px;font-weight:600;line-height:1.25}.kopfzeile h1{font-family:var(--font-titel);margin:0;font-size:28px;font-weight:600;line-height:1.2}.inhalt{flex-direction:column;flex:1;align-items:center;gap:14px;min-height:0;padding:6px 20px 28px;display:flex}.zeile{justify-content:flex-end;width:100%;display:flex}.avatar-knopf{flex-direction:column;align-items:center;gap:4px;text-decoration:none;display:flex}.avatar-kreis{background:var(--hell);border:2px solid var(--hauptfarbe);border-radius:var(--ecken-rund);width:48px;height:48px;font-family:var(--font-inter);justify-content:center;align-items:center;font-size:24px;transition:transform .15s;display:flex}.avatar-knopf:hover .avatar-kreis{transform:scale(1.06)}.avatar-label{color:var(--text-hauptfarbe);font-size:12px;font-weight:600;line-height:1.35}.modus{gap:12px;display:flex}.frage{color:var(--text-leise);margin:0;font-size:15px;line-height:1.4}.genre-raster{grid-template-columns:repeat(2,150px);justify-content:center;gap:12px;display:grid}.kachel{background:var(--hell);border:1.5px solid var(--rand);border-radius:var(--ecken-mittel);width:150px;height:124px;color:var(--text);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0;transition:transform .15s,background-color .15s;display:flex}.kachel:hover{transform:translateY(-2px)}.kachel:active{transform:scale(.97)}.kachel[aria-checked=true]{background:var(--hauptfarbe);border:3px solid var(--akzent);color:var(--text-auf-hauptfarbe)}.kachel-emoji{font-family:var(--font-titel);font-size:42px;font-weight:600;line-height:1.2}.kachel-label{font-family:var(--font-inter);font-size:12px}.eingabefeld{flex-direction:column;gap:6px;width:100%;display:flex}.eingabefeld label{color:var(--text-leise);font-size:12px;font-weight:600;line-height:1.35}.eingabefeld input{background:var(--flaeche);border:1.5px solid var(--rand);border-radius:var(--ecken-klein);width:100%;font-family:var(--font-text);color:var(--text);outline:none;padding:14px 16px;font-size:15px;line-height:1.4;transition:border-color .15s}.eingabefeld input::placeholder{color:var(--text-leise)}.eingabefeld input:focus{border-color:var(--hauptfarbe)}.eingabefeld input[aria-invalid=true]{border-color:var(--akzent);animation:.3s wackeln}.fehler{color:#d6267a;min-height:16px;margin:0;font-size:12px;font-weight:600}@keyframes wackeln{25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}.abstand{flex:1}.inhalt-quiz{gap:10px;padding-top:18px}.badge-zeile{justify-content:space-between;width:100%;display:flex}.badge{background:var(--hell);border-radius:var(--ecken-rund);align-items:center;gap:6px;padding:7px 14px;font-size:15px;font-weight:800;line-height:1.4;display:flex}.badge-wert{color:var(--text-hauptfarbe)}.quiz-titel{width:100%;font-family:var(--font-titel);margin:0;font-size:28px;font-weight:600;line-height:1.2}.player{flex-direction:column;align-items:center;gap:12px;height:200px;display:flex}.play-kreis{background:var(--hauptfarbe);border-radius:var(--ecken-rund);width:104px;height:104px;font-family:var(--font-titel);color:var(--text-auf-hauptfarbe);cursor:pointer;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:40px;font-weight:600;line-height:1.2;transition:transform .15s;display:flex;box-shadow:0 8px 20px #5c4aff4d}.play-kreis:hover{transform:scale(1.04)}.play-kreis:active{transform:scale(.96)}.wellen{align-items:center;gap:5px;height:40px;display:flex}.wellen span{width:6px;height:var(--h);background:var(--akzent);opacity:.35;border-radius:3px;transition:opacity .2s}.player.spielt .wellen span{opacity:1;animation:.9s ease-in-out infinite alternate welle}.player.spielt .wellen span:nth-child(3n){animation-delay:-.3s}.player.spielt .wellen span:nth-child(3n+1){animation-delay:-.6s}@keyframes welle{0%{transform:scaleY(.4)}to{transform:scaleY(1)}}.player-text{color:var(--text-hauptfarbe);margin:0;font-size:15px;font-weight:800;line-height:1.4}.antworten{flex-direction:column;gap:10px;width:100%;display:flex}.antwort{background:var(--flaeche);border:1.5px solid var(--rand);border-radius:var(--ecken-mittel);width:100%;min-height:60px;color:var(--text);text-align:left;cursor:pointer;align-items:center;gap:12px;padding:12px 18px;transition:border-color .15s,transform .15s;display:flex}.antwort:hover:enabled{border-color:var(--hauptfarbe)}.antwort:active:enabled{transform:scale(.98)}.antwort:disabled{opacity:.5;cursor:not-allowed}.antwort-buchstabe{font-family:var(--font-titel);font-size:24px;font-weight:600;line-height:1.25}.antwort-text{font-family:var(--font-text);flex:1;font-size:15px;font-weight:800;line-height:1.4}.grosses-emoji{background:var(--richtig-hell);border-radius:var(--ecken-rund);width:140px;height:140px;font-family:var(--font-titel);justify-content:center;align-items:center;font-size:68px;line-height:1.2;display:flex}.ergebnis-titel{font-family:var(--font-titel);color:var(--richtig);margin:0;font-size:36px;font-weight:600;line-height:1.2}.ergebnis-untertitel{color:var(--text-leise);margin:0;font-size:15px;font-weight:800;line-height:1.4}#screen-ergebnis.falsch .grosses-emoji{background:var(--falsch-hell)}#screen-ergebnis.falsch .ergebnis-titel{color:var(--falsch)}.loesung{background:var(--richtig-hell);border:2px solid var(--richtig);border-radius:var(--ecken-mittel);align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 18px;display:flex}.loesung-icon{font-family:var(--font-titel);font-size:24px;line-height:1.25}.loesung-text{flex:1;font-size:15px;font-weight:800;line-height:1.4}.loesung-haken{font-family:var(--font-titel);color:var(--richtig);font-size:18px;font-weight:600}#screen-ergebnis .inhalt{gap:10px}#screen-ergebnis .grosses-emoji{width:112px;height:112px;font-size:54px}.punkte-karte{background:var(--hauptfarbe);border-radius:var(--ecken-mittel);text-align:center;flex-direction:column;align-items:center;gap:6px;width:100%;padding:16px 18px;display:flex;box-shadow:0 8px 20px #5c4aff4d}.punkte-karte p{margin:0}.punkte-runde{font-family:var(--font-titel);color:var(--text-auf-hauptfarbe);font-size:40px;font-weight:600;line-height:1.1}.punkte-text{color:var(--text-auf-hauptfarbe);font-size:15px;font-weight:800;line-height:1.4}.punkte-total{background:var(--akzent);border-radius:var(--ecken-rund);color:var(--text);padding:4px 14px;font-size:13px;font-weight:800;line-height:1.4}#screen-gewonnen .inhalt{gap:10px}#screen-gewonnen .grosses-emoji{background:var(--hell);flex-shrink:0;width:88px;height:88px;font-size:44px}#screen-gewonnen .gewonnen-titel{font-size:28px}.gewonnen-titel{font-family:var(--font-titel);text-align:center;color:var(--text);margin:0;font-size:32px;font-weight:600;line-height:1.2}.spieler-karte{background:var(--flaeche);border:1.5px solid var(--rand);border-radius:var(--ecken-mittel);align-items:center;gap:14px;width:100%;padding:14px 18px;display:flex}.spieler-avatar{background:var(--hell);border-radius:var(--ecken-rund);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:26px;display:flex}.spieler-info{flex-direction:column;min-width:0;display:flex}.spieler-name{overflow-wrap:anywhere;font-size:17px;font-weight:800;line-height:1.3}.spieler-punkte{color:var(--text-hauptfarbe);font-size:15px;font-weight:800;line-height:1.4}.runden-liste{background:var(--flaeche);border:1.5px solid var(--rand);border-radius:var(--ecken-mittel);width:100%;margin:0;padding:4px 14px;list-style:none}.runden-zeile{align-items:center;gap:10px;padding:7px 0;display:flex}.runden-zeile+.runden-zeile{border-top:1px solid var(--hell)}.runden-nummer{background:var(--hell);border-radius:var(--ecken-rund);width:24px;height:24px;color:var(--text-hauptfarbe);flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:flex}.runden-song{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.4;overflow:hidden}.runden-zeichen{font-family:var(--font-titel);font-size:16px;font-weight:600}.runden-zeile.richtig .runden-zeichen{color:var(--richtig)}.runden-zeile.falsch .runden-zeichen{color:var(--falsch)}.runden-punkte{text-align:right;min-width:30px;color:var(--text-hauptfarbe);font-size:14px;font-weight:800}.sparschwein-buehne{flex-shrink:0;width:220px;height:250px;position:relative}.sparschwein-buehne:before{content:"";background:var(--hell);border-radius:var(--ecken-rund);width:200px;height:200px;position:absolute;top:50px;left:10px}.schwein{transform-origin:50% 100%;display:block;position:absolute;bottom:20px;left:10px}.schwein.wackelt{animation:.25s ease-out schwein-wackeln}@keyframes schwein-wackeln{0%{transform:none}25%{transform:rotate(-6deg)scale(1.03)}60%{transform:rotate(5deg)}85%{transform:rotate(-2deg)}to{transform:none}}.muenzen-regen{height:113px;position:absolute;top:0;left:0;right:0;overflow:hidden}.muenze{background:var(--gelb);border-radius:var(--ecken-rund);border:3px solid #e0b400;width:30px;height:30px;margin-left:-15px;animation:.45s ease-in both muenze-fallen;position:absolute;top:0;left:50%;box-shadow:inset 0 0 0 3px #ffe892}@keyframes muenze-fallen{0%{opacity:0;transform:translateY(0)}15%{opacity:1}60%{transform:translateY(60px)scaleX(1)}to{transform:translateY(116px)scaleX(.3)}}.muenzen-text{flex-direction:column;align-items:center;gap:8px;width:100%;min-height:136px;display:flex}.muenzen-zaehler{font-family:var(--font-titel);text-align:center;color:var(--text-hauptfarbe);margin:0;font-size:32px;font-weight:600;line-height:1.2}.muenzen-stand{background:var(--gelb);border-radius:var(--ecken-rund);color:var(--text);margin:0;padding:6px 16px;font-size:15px;font-weight:800;line-height:1.4}.muenzen-stand[hidden]{visibility:hidden;display:block}.muenzen-zaehler.trostpreis{text-wrap:balance;font-family:var(--font-text);font-size:17px;font-weight:800;line-height:1.4}.muenzen-hinweis{text-align:center;color:var(--text-leise);margin:0;font-size:13px}.muenzen-hinweis:empty{display:none}@media (prefers-reduced-motion:reduce){.schwein.wackelt,.muenze{animation:none}}.button-dunkel{background:var(--text);border-radius:var(--ecken-rund);font-family:var(--font-text);color:#fff;cursor:pointer;border:0;padding:14px 28px;font-size:15px;font-weight:800;line-height:1.4;transition:transform .15s}.button-dunkel:hover{transform:translateY(-1px)}.button-dunkel:active{transform:scale(.97)}.button-haupt{background:var(--gelb);border-radius:var(--ecken-rund);font-family:var(--font-text);color:var(--text);cursor:pointer;border:0;padding:14px 28px;font-size:15px;font-weight:800;line-height:1.4;transition:transform .15s,filter .15s}.button-haupt:hover:enabled{filter:brightness(1.05);transform:translateY(-1px)}.button-haupt:active:enabled{transform:scale(.97)}.button-haupt:disabled{opacity:.4;cursor:not-allowed}:is(.kachel,.button-haupt,.button-dunkel,.avatar-knopf,.zurueck,.play-kreis,.antwort):focus-visible{outline:3px solid var(--hauptfarbe);outline-offset:3px}.toast{background:var(--text);color:#fff;border-radius:var(--ecken-klein);text-align:center;opacity:0;pointer-events:none;padding:12px 16px;font-size:14px;transition:opacity .2s,transform .2s;position:absolute;bottom:100px;left:20px;right:20px;transform:translateY(8px)}.toast.sichtbar{opacity:1;transform:none}