:root{--gruen: #2f9e5b;--gruen-dunkel: #237a46;--gruen-hell: #e7f5ec;--gruen-sehr-hell: #f3faf5;--gelb: #ffc93c;--blau: #1f6fd0;--koralle: #e5533c;--koralle-hell: #fdecea;--richtig-hell: #e4f6ea;--text: #22313b;--text-leise: #5a6b74;--linie: #dde7e1;--hintergrund: #f3faf5;--karte: #ffffff;--radius: 16px;--radius-gross: 24px;--schatten: 0 6px 20px rgba(30, 70, 45, .08);--schatten-stark: 0 10px 30px rgba(30, 70, 45, .14);--schrift: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--schrift);color:var(--text);background:var(--hintergrund);line-height:1.5;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.app{min-height:100%;display:flex;flex-direction:column}.kopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 20px;background:var(--karte);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:10}.kopf-titel-knopf{display:inline-flex;align-items:center;gap:10px;border:none;background:transparent;padding:4px 6px;border-radius:12px}.kopf-logo{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--gruen);color:#fff;font-weight:800;font-size:18px;letter-spacing:-1px}.kopf-titel{font-weight:800;font-size:19px;color:var(--text)}.kopf-nav{display:flex;gap:6px;margin-left:auto}.nav-knopf{border:none;background:transparent;color:var(--text-leise);font-weight:700;font-size:15px;padding:8px 14px;border-radius:999px;transition:background .15s,color .15s}.nav-knopf:hover{background:var(--gruen-hell);color:var(--gruen-dunkel)}.nav-knopf.aktiv{background:var(--gruen);color:#fff}.kopf-rechts{display:flex;align-items:center;gap:10px}.kopf-nutzer{font-weight:700;font-size:14px;color:var(--text-leise);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-knopf{border:1px solid var(--linie);background:#fff;color:var(--text-leise);font-weight:700;font-size:14px;padding:7px 12px;border-radius:999px}.hub-knopf:hover{border-color:var(--gruen);color:var(--gruen-dunkel)}.testmodus-banner{background:var(--gelb);color:#5a4500;font-weight:700;font-size:13px;text-align:center;padding:6px 12px}.inhalt{flex:1;width:100%;max-width:900px;margin:0 auto;padding:24px 20px 40px}.fuss{text-align:center;color:var(--text-leise);font-size:13px;padding:16px;border-top:1px solid var(--linie);background:var(--karte)}.zentriert-seite{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--hintergrund)}.lade-box{text-align:center;color:var(--text-leise);font-weight:700}.lade-ring{width:46px;height:46px;margin:0 auto 16px;border:5px solid var(--gruen-hell);border-top-color:var(--gruen);border-radius:50%;animation:dreh .9s linear infinite}@keyframes dreh{to{transform:rotate(360deg)}}.hinweis-karte{background:var(--karte);border-radius:var(--radius-gross);box-shadow:var(--schatten);padding:32px;max-width:460px;text-align:center}.hinweis-emoji{font-size:48px}.fehler-detail{margin-top:12px;font-size:13px;color:var(--text-leise);background:var(--gruen-sehr-hell);border-radius:10px;padding:10px;word-break:break-word}.ansicht-kopf{text-align:center;margin-bottom:18px}.ansicht-kopf h1{margin:0 0 6px;font-size:28px;font-weight:800;color:var(--gruen-dunkel)}.ansicht-unter{margin:0 auto;max-width:560px;color:var(--text-leise)}.ansicht-fuss{margin-top:24px;text-align:center}.fortschritt{margin:0 0 20px}.fortschritt-bahn{height:14px;background:var(--gruen-hell);border-radius:999px;overflow:hidden}.fortschritt-fuellung{height:100%;background:linear-gradient(90deg,var(--gruen),var(--gruen-dunkel));border-radius:999px;transition:width .35s ease}.fortschritt-text{margin-top:6px;font-size:13px;font-weight:700;color:var(--text-leise);text-align:center}.alphabet-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px;margin-top:8px}.alphabet-kachel{position:relative;border:2px solid var(--linie);background:var(--karte);border-radius:var(--radius);padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .12s,border-color .12s,box-shadow .12s}.alphabet-kachel:hover{transform:translateY(-2px);border-color:var(--gruen);box-shadow:var(--schatten)}.alphabet-kachel.gesehen{border-color:var(--gruen);background:var(--gruen-sehr-hell)}.kachel-buchstaben{font-size:26px;font-weight:800;color:var(--text)}.kachel-translit{font-size:12px;font-weight:700;color:var(--text-leise)}.kachel-haken{position:absolute;top:6px;right:8px;color:var(--gruen);font-weight:800;font-size:14px}.lernkarte{background:var(--karte);border-radius:var(--radius-gross);box-shadow:var(--schatten);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.lernkarte.sonderfall{border:2px dashed var(--blau)}.lernkarte-links,.lernkarte-rechts{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.buchstabe-gross{display:flex;align-items:baseline;gap:12px;line-height:1}.bg-gross{font-size:96px;font-weight:800;color:var(--gruen-dunkel)}.bg-klein{font-size:64px;font-weight:800;color:var(--gruen)}.translit{font-size:20px;font-weight:800;color:var(--text);background:var(--gruen-hell);padding:4px 16px;border-radius:999px}.aussprache{color:var(--text);font-size:17px;max-width:320px}.aussprache-label{font-weight:800;color:var(--gruen-dunkel)}.beispiel-bild{width:180px;height:180px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--schatten)}.beispiel-emoji{width:180px;height:180px;display:grid;place-items:center;font-size:104px;background:var(--gruen-sehr-hell);border-radius:var(--radius)}.wort-zeile{display:flex;flex-direction:column;gap:2px}.beispiel-wort{font-size:30px;font-weight:800;color:var(--text)}.hervorhebung{color:var(--blau)}.wort-bedeutung{font-size:16px;font-weight:700;color:var(--text-leise)}.erklaerung{display:flex;gap:8px;align-items:flex-start;text-align:left;background:var(--gruen-sehr-hell);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--text);max-width:340px}.erklaerung-symbol{font-size:18px}.audio-knopf{display:inline-flex;align-items:center;gap:8px;border:none;background:var(--gruen);color:#fff;font-weight:800;font-size:15px;padding:10px 18px;border-radius:999px;box-shadow:var(--schatten);transition:transform .12s,background .12s}.audio-knopf:hover{background:var(--gruen-dunkel);transform:translateY(-1px)}.audio-knopf.gross{font-size:17px;padding:12px 24px}.audio-symbol{font-size:18px}.karten-steuerung{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}.steuer-knopf{border:2px solid var(--linie);background:#fff;color:var(--text);font-weight:800;font-size:16px;padding:12px 22px;border-radius:999px;transition:transform .12s,border-color .12s,background .12s}.steuer-knopf:hover:not(:disabled){transform:translateY(-1px);border-color:var(--gruen)}.steuer-knopf:disabled{opacity:.45;cursor:default}.steuer-knopf.leicht{color:var(--text-leise);font-weight:700}.steuer-knopf.haupt,.haupt-knopf{border:none;background:var(--gruen);color:#fff;font-weight:800;font-size:16px;padding:12px 24px;border-radius:999px;box-shadow:var(--schatten);transition:transform .12s,background .12s}.steuer-knopf.haupt:hover,.haupt-knopf:hover{background:var(--gruen-dunkel);transform:translateY(-1px)}.quiz-frage{background:var(--karte);border-radius:var(--radius-gross);box-shadow:var(--schatten);padding:28px;text-align:center}.quiz-aufgabe{margin-bottom:22px}.quiz-anweisung{font-size:18px;font-weight:700;margin:0 0 12px}.quiz-buchstabe{font-size:84px;font-weight:800;color:var(--gruen-dunkel);line-height:1}.quiz-hinweis-klein{font-size:13px;color:var(--text-leise);margin-top:4px}.quiz-optionen{display:grid;grid-template-columns:1fr 1fr;gap:14px}.quiz-optionen.bilder{grid-template-columns:repeat(2,1fr)}.quiz-option{position:relative;border:2px solid var(--linie);background:#fff;border-radius:var(--radius);padding:16px;font-size:17px;font-weight:700;color:var(--text);min-height:64px;display:grid;place-items:center;transition:transform .1s,border-color .1s,background .1s}.quiz-option:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gruen)}.quiz-option:disabled{cursor:default}.quiz-option.richtig{border-color:var(--gruen);background:var(--richtig-hell)}.quiz-option.falsch{border-color:var(--koralle);background:var(--koralle-hell)}.quiz-option.inaktiv{opacity:.5}.option-buchstabe{font-size:34px;font-weight:800}.option-laut{font-size:16px}.quiz-optionen.bilder .beispiel-emoji,.quiz-optionen.bilder .beispiel-bild{width:96px;height:96px;font-size:56px}.option-haken,.option-kreuz{position:absolute;top:8px;right:10px;font-size:20px;font-weight:800}.option-haken{color:var(--gruen)}.option-kreuz{color:var(--koralle)}.quiz-feedback{margin-top:18px;border-radius:var(--radius);padding:18px;text-align:center;animation:auftauchen .25s ease}@keyframes auftauchen{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.quiz-feedback.richtig{background:var(--richtig-hell);border:2px solid var(--gruen)}.quiz-feedback.falsch{background:var(--koralle-hell);border:2px solid var(--koralle)}.feedback-text{font-size:20px;font-weight:800;margin-bottom:6px}.quiz-feedback.richtig .feedback-text{color:var(--gruen-dunkel)}.quiz-feedback.falsch .feedback-text{color:var(--koralle)}.feedback-loesung{color:var(--text);margin-bottom:14px}.quiz-abschluss{background:var(--karte);border-radius:var(--radius-gross);box-shadow:var(--schatten);padding:36px 28px;text-align:center}.abschluss-emoji{font-size:64px}.quiz-abschluss h1{margin:8px 0;color:var(--gruen-dunkel);font-size:26px}.abschluss-punkte{font-size:18px}.verpasste-box{margin:18px auto;max-width:480px;background:var(--gruen-sehr-hell);border-radius:var(--radius);padding:16px}.verpasste-liste{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}.verpasst-chip{background:#fff;border:2px solid var(--blau);color:var(--blau);font-weight:800;padding:4px 12px;border-radius:999px}.abschluss-knoepfe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}@media (max-width: 640px){.kopf{padding:10px 14px}.kopf-nav{order:3;width:100%;margin-left:0;justify-content:center}.inhalt{padding:18px 14px 32px}.lernkarte{grid-template-columns:1fr;gap:20px;padding:22px}.bg-gross{font-size:76px}.bg-klein{font-size:52px}.beispiel-bild,.beispiel-emoji{width:150px;height:150px}.beispiel-emoji{font-size:88px}.quiz-buchstabe{font-size:68px}.ansicht-kopf h1{font-size:24px}}