/* Gemeinsames Aussehen der Niruko-Apps */
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(../fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2")}
:root{--wald:#0E2F2E;--wald-2:#164443;--wald-3:#1E5654;--tuerkis:#27C4B5;--tuerkis-d:#0F7F76;--bernstein:#F5A524;--moos:#8CC152;--nebel:#EDF7F3;--rot:#E5484D;--kopf:"Fredoka",system-ui,sans-serif;--fliess:"Nunito",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{background:var(--wald);color:#fff;font:800 1.05rem/1.4 var(--fliess)}
.app{height:100dvh;width:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .8rem}
.top h1{font:600 clamp(1rem,4.6vw,1.35rem) var(--kopf);margin:0;white-space:nowrap;text-align:center}
.knopf-k{background:var(--wald-2);color:#fff;border:2px solid var(--tuerkis);border-radius:999px;padding:.4rem 1rem;font:600 1rem var(--kopf);text-decoration:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:.3rem}
.knopf-k:active{background:var(--tuerkis);color:var(--wald)}
.sterne{font:700 1.05rem var(--kopf);background:var(--wald-2);border-radius:999px;padding:.35rem .9rem;min-height:44px;display:inline-flex;align-items:center;gap:.3rem}
.inhalt{overflow:auto;padding:.8rem;background:var(--wald-2);border-radius:28px 28px 0 0;color:var(--wald);background:var(--nebel)}
.mitte{max-width:720px;margin:0 auto}
.inhalt h2{font:600 clamp(1.4rem,5vw,2rem) var(--kopf);color:var(--wald);margin:.2rem 0 .6rem}
.inhalt p{margin:.2rem 0 .8rem;color:#33504e}
.knopf{font:600 1.2rem var(--kopf);border:0;border-radius:999px;padding:.8rem 1.6rem;background:var(--bernstein);color:var(--wald);box-shadow:0 5px 0 #B87408;cursor:pointer;min-height:56px}
.knopf:active{transform:translateY(3px);box-shadow:0 2px 0 #B87408}
.knopf.zweit{background:#fff;box-shadow:0 5px 0 #B9D3CB;color:var(--wald)}
.knopf.gross{font-size:1.4rem;padding:1rem 2rem}
.reihe{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;align-items:center}
.karten{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:.6rem}
.karte{background:#fff;border:3px solid #CFE3DC;border-radius:24px;padding:1.1rem;display:flex;flex-direction:column;gap:.5rem;text-align:left;font:inherit;color:var(--wald);cursor:pointer}
.karte:active,.karte:focus-visible{border-color:var(--tuerkis)}
.karte .sym{font-size:2.4rem;line-height:1}
.karte h3{font:600 1.35rem var(--kopf);margin:0}
.karte p{margin:0;font-weight:400;color:#4B6563;font-size:1rem}
.stufen{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 .8rem}
.stufe{border:3px solid #CFE3DC;background:#fff;border-radius:999px;padding:.35rem .9rem;font:600 1.05rem var(--kopf);color:var(--wald);cursor:pointer;min-height:48px}
.stufe[aria-pressed="true"]{border-color:var(--tuerkis);background:#D0F1EC}
.frage{font:600 clamp(1.6rem,6vw,2.4rem) var(--kopf);text-align:center;color:var(--wald);margin:.6rem 0 1rem;line-height:1.25}
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.7rem;max-width:560px;margin:0 auto}
.wahl button{font:600 clamp(1.4rem,5.5vw,2rem) var(--kopf);background:#fff;border:3px solid #CFE3DC;border-radius:20px;padding:.8rem;color:var(--wald);cursor:pointer;min-height:68px}
.wahl button:active{background:#D0F1EC}
.wahl button.richtig{background:#DDF3C9;border-color:var(--moos)}
.wahl button.falsch{background:#FFE3E0;border-color:var(--rot)}
.punkte{display:flex;gap:.35rem;justify-content:center;margin:.3rem 0 .6rem;flex-wrap:wrap}
.punkte i{width:14px;height:14px;border-radius:50%;background:#CFE3DC;display:block}
.punkte i.ok{background:var(--moos)}
.punkte i.jetzt{background:var(--bernstein);transform:scale(1.25)}
.meldung{min-height:2.4em;text-align:center;font:600 1.2rem var(--kopf);color:var(--tuerkis-d);margin:.8rem 0}
.gross-sym{font-size:clamp(3rem,16vw,6rem);text-align:center;line-height:1.1}
.fertig{text-align:center;padding:1rem 0}
.fertig .sterne-gross{font-size:clamp(2.4rem,12vw,4rem)}
:focus-visible{outline:3px solid var(--bernstein);outline-offset:3px}
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);background:#fff;color:var(--wald);padding:.7rem 1.3rem;border-radius:999px;font:600 1.05rem var(--kopf);box-shadow:0 6px 0 #0006;z-index:20}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.hinweis-klein{font:400 .95rem var(--fliess);color:#4B6563}
.karten.kompakt{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.karten.kompakt .karte{padding:.9rem}
.karten.kompakt .karte .sym{font-size:2rem}
.karten.kompakt .karte h3{font-size:1.15rem}