.training-oben{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;display:grid}@media (width<=760px){.training-oben{grid-template-columns:minmax(0,1fr)}}.training-status{grid-template-columns:auto auto;align-items:center;gap:8px 20px;padding:18px 22px;display:grid}.ring{--anteil:0;background:radial-gradient(closest-side, var(--hintergrund) 78%, transparent 80% 100%), conic-gradient(var(--gruen) calc(var(--anteil) * 360deg), var(--flaeche-hover) 0);border-radius:50%;align-content:center;place-items:center;width:92px;height:92px;transition:background .6s;display:grid}.ring span{font:700 1.2rem var(--schrift-titel)}.ring small{color:var(--text-leise);font-size:.75rem}.training-status dl{gap:4px;margin:0;display:grid}.training-status dl div{justify-content:space-between;gap:18px;display:flex}.training-status dt{color:var(--text-leise);font-size:.88rem}.training-status dd{font:700 1rem var(--schrift-titel);margin:0}.level-balken{background:var(--flaeche-hover);border-radius:999px;grid-column:1/-1;height:6px;overflow:hidden}.level-balken span{background:linear-gradient(90deg, var(--akzent-stark), var(--cyan));height:100%;transition:width .6s;display:block}.training-steuerung{gap:12px;margin-bottom:16px;display:grid}.training-modi,.training-themen{flex-wrap:wrap;gap:8px;display:flex}.modus-knopf,.thema-chip{border:1px solid var(--rand-hell);background:var(--flaeche);color:var(--text-mittel);font:600 .9rem var(--schrift-text);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;display:inline-flex}.modus-knopf[aria-pressed=true],.thema-chip[aria-pressed=true]{background:var(--akzent-verlauf);color:#fff;border-color:#0000}.thema-chip small{opacity:.8;font-weight:500}.thema-chip.gemeistert small{color:var(--gelb);opacity:1}.training-karte{min-height:300px;padding:clamp(20px,4vw,36px);animation:.3s both einblenden-seite}.training-laden{color:var(--text-leise)}.training-kopf h2{margin:10px 0 16px;font-size:clamp(1.3rem,2.4vw,1.6rem)}.training-code{border-radius:var(--radius-klein);border:1px solid var(--rand);background:var(--flaeche-code);color:var(--code-standard);margin:0 0 16px;padding:16px 20px;font-size:.95rem;line-height:1.6;overflow-x:auto}.training-antwort{border-radius:var(--radius-klein);border:1px solid var(--rand-hell);background:var(--flaeche);width:100%;color:var(--text);font:1rem var(--schrift-code);font-variant-ligatures:none;font-feature-settings:"calt" 0, "liga" 0, "dlig" 0;resize:vertical;padding:12px 16px}.training-antwort:focus-visible{outline:2px solid var(--cyan)}.training-knoepfe{flex-wrap:wrap;gap:10px;margin-top:14px;display:flex}.training-rueckmeldung{margin-top:14px}.training-rueckmeldung.ok>strong{color:var(--gruen);font-size:1.1rem}.training-rueckmeldung.nein>strong{color:var(--gelb)}.training-rueckmeldung.fast>strong{color:var(--cyan-text)}.training-rueckmeldung.fast p{color:var(--text-mittel);margin:6px 0 0}.training-rueckmeldung.ok{animation:.6s feiern-text}@keyframes feiern-text{30%{transform:scale(1.03)}}.training-optionen{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;display:grid}.training-option{border-radius:var(--radius-klein);border:1px solid var(--rand-hell);background:var(--flaeche);color:var(--text);font:600 .95rem var(--schrift-code);font-variant-ligatures:none;font-feature-settings:"calt" 0, "liga" 0, "dlig" 0;cursor:pointer;padding:12px 16px}.training-option:hover:not(:disabled){background:var(--flaeche-hover)}.training-option.richtig{border-color:var(--gruen);background:color-mix(in srgb, var(--gruen) 18%, transparent)}.training-option.falsch{border-color:var(--rot);background:color-mix(in srgb, var(--rot) 14%, transparent)}.training-entdecken,.training-tipp{margin-top:14px}.training-entdecken summary,.training-tipp summary{cursor:pointer;color:var(--akzent);font-weight:600}.training-ziel p{color:var(--text-mittel);margin:0 0 8px}.training-fuss{color:var(--text-leise);margin-top:14px;font-size:.88rem}.puzzle-liste{gap:6px;margin:0 0 12px;padding:0;list-style:none;display:grid}.puzzle-zeile{border:1px solid var(--rand-hell);background:var(--flaeche-code);border-radius:10px;align-items:center;gap:8px;padding:6px 8px 6px 14px;animation:.2s both einblenden-seite;display:flex}.puzzle-zeile.ausgewaehlt{border-color:var(--cyan);box-shadow:0 0 0 2px color-mix(in srgb, var(--cyan) 40%, transparent)}.puzzle-zeile code{white-space:pre;cursor:pointer;color:var(--code-standard);flex:1;font-size:.95rem;overflow-x:auto}.puzzle-knoepfe{gap:4px;display:flex}.puzzle-pfeil{border:1px solid var(--rand);background:var(--flaeche-hover);width:34px;height:34px;color:var(--text);cursor:pointer;border-radius:8px;font-size:1rem}.puzzle-pfeil:disabled{opacity:.3;cursor:default}.luecke-feld{font:inherit;color:var(--code-standard);background:color-mix(in srgb, var(--akzent,#7c3aed) 18%, transparent);border:1px dashed var(--akzent,#7c3aed);border-radius:6px;min-width:3ch;margin:0 .1em;padding:0 .3em}.luecke-feld:focus-visible{outline:2px solid var(--cyan,#22d3ee);outline-offset:1px}
