#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}button:focus-visible{outline:solid 2px var(--color-accent);outline-offset:2px}.lesson-chrome{position:fixed;top:20px;left:0;right:0;width:100%;max-width:1280px;margin:0 auto;padding:0 20px;box-sizing:border-box;display:flex;align-items:center;gap:10px;z-index:1}.lesson-chrome:before{content:"";position:fixed;top:0;left:0;right:0;height:84px;background:linear-gradient(to bottom,var(--color-chrome) 0%,var(--color-chrome) 62%,var(--color-chrome-transparent) 100%);pointer-events:none;z-index:-1}button.lesson-abort{flex:0 0 44px;box-sizing:border-box;width:44px;height:44px;padding:0;margin:0;border:none;border-radius:15px;background:transparent;color:var(--color-text-muted);font-size:1.75rem;font-weight:400;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}button.lesson-abort:hover,button.lesson-abort:active{color:var(--color-abort-hover);background:transparent}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em var(--color-logo-glow))}.logo.react:hover{filter:drop-shadow(0 0 2em var(--color-logo-glow-react))}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:var(--color-text-subtle)}.ergebnis-streak{margin:1rem 0 0;font-size:1.5rem;line-height:1.2;letter-spacing:.05em}.ergebnis-actions{position:absolute;left:0;right:0;bottom:20px;width:100%;max-width:1280px;margin:0 auto;padding:0 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}button.nochmal,button.zum-start{width:100%;text-transform:uppercase;cursor:pointer}button.nochmal{height:80px;font-size:1.5rem;color:var(--color-on-strong);background-color:var(--color-correct-button);border-top:solid 0px var(--color-correct-text);border-right:solid 0px var(--color-correct-text);border-left:solid 0px var(--color-correct-text);border-bottom:solid 5px var(--color-correct-text)}button.zum-start{height:64px;font-size:1.25rem;color:var(--color-text);background:var(--color-surface);border-top:solid 2px var(--color-border);border-right:solid 2px var(--color-border);border-left:solid 2px var(--color-border);border-bottom:solid 5px var(--color-border)}button.choice{margin-bottom:20px;background:var(--color-surface);color:var(--color-text);border-top:solid 2px var(--color-border);border-right:solid 2px var(--color-border);border-left:solid 2px var(--color-border);border-bottom:solid 5px var(--color-border);width:100%}.FreitextAnswer__form{display:flex;flex-direction:column;gap:12px;margin-bottom:1.5rem}.FreitextAnswer__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.FreitextAnswer__input{box-sizing:border-box;width:100%;padding:.85rem 1rem;font-size:1.25rem;font-family:inherit;color:var(--color-text);background:var(--color-surface);border-top:solid 2px var(--color-border);border-right:solid 2px var(--color-border);border-left:solid 2px var(--color-border);border-bottom:solid 5px var(--color-border);border-radius:15px;outline:none}.FreitextAnswer__input:focus-visible{border-color:var(--color-accent);border-bottom-color:var(--color-accent-hover)}.FreitextAnswer__submit{width:100%;min-height:64px;background-color:var(--color-correct-button);border-top:solid 0px var(--color-correct-text);border-right:solid 0px var(--color-correct-text);border-left:solid 0px var(--color-correct-text);border-bottom:solid 5px var(--color-correct-text);text-transform:uppercase;font-size:1.25rem;color:var(--color-on-strong);cursor:pointer}.FreitextAnswer__submit:disabled{background-color:var(--color-cta-disabled-bg);border-top:solid 0px var(--color-cta-disabled-bg);border-right:solid 0px var(--color-cta-disabled-bg);border-left:solid 0px var(--color-cta-disabled-bg);border-bottom:solid 5px var(--color-cta-disabled-bg);color:var(--color-cta-disabled-text);cursor:not-allowed}.testBox{position:absolute;bottom:0;width:100%;left:0;transition:all .3s;display:table-cell;vertical-align:middle;padding:2rem 0}.testBox p{padding:0;margin:0;font-weight:700}.incorrect button,.correct button{text-transform:uppercase;color:var(--color-on-strong)}.correct{color:var(--color-correct-text);background-color:var(--color-correct-bg)}.correct button{background-color:var(--color-correct-button);border-top:solid 0px var(--color-correct-text);border-right:solid 0px var(--color-correct-text);border-left:solid 0px var(--color-correct-text);border-bottom:solid 5px var(--color-correct-text)}.incorrect{color:var(--color-incorrect-text);background-color:var(--color-incorrect-bg)}.incorrect button{background-color:var(--color-incorrect-button);border-top:solid 0px var(--color-incorrect-text);border-right:solid 0px var(--color-incorrect-text);border-left:solid 0px var(--color-incorrect-text);border-bottom:solid 5px var(--color-incorrect-text)}.Progress{position:relative;flex:1;min-width:0;background:var(--color-border);height:30px;border-radius:15px;overflow:hidden}.Progress .inner{height:30px;line-height:30px;position:absolute;background:var(--color-accent);border-top-right-radius:15px;border-bottom-right-radius:15px;transition:all .3s;white-space:noWrap;overflow:hidden;color:transparent}button.theme-toggle{flex:0 0 44px;box-sizing:border-box;width:44px;height:44px;padding:0;margin:0 0 0 auto;border:none;border-radius:15px;background:transparent;color:var(--color-text-muted);line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}button.theme-toggle:hover,button.theme-toggle:active{color:var(--color-abort-hover);background:transparent}.theme-toggle-chrome{position:fixed;top:20px;left:0;right:0;width:100%;max-width:1280px;margin:0 auto;padding:0 20px;box-sizing:border-box;display:flex;justify-content:flex-end;z-index:1;pointer-events:none}.theme-toggle-chrome:before{content:"";position:fixed;top:0;left:0;right:0;height:84px;background:linear-gradient(to bottom,var(--color-chrome) 0%,var(--color-chrome) 62%,var(--color-chrome-transparent) 100%);pointer-events:none;z-index:-1}.theme-toggle-chrome button.theme-toggle{pointer-events:auto}.StartScreen{max-width:480px;margin:0 auto;padding-top:2rem}.StartScreen h1{margin-bottom:.5rem}.StartScreen .practice-streak{margin:0 0 .75rem;min-height:2.1rem;font-size:1.75rem;line-height:1.2;letter-spacing:.05em}.StartScreen .intro{color:var(--color-text-secondary);margin-bottom:2rem}.StartScreen .language-list{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-direction:column;gap:12px}.StartScreen .language-option{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:1rem 1.25rem;background:var(--color-surface);color:var(--color-text);border-top:solid 2px var(--color-border);border-right:solid 2px var(--color-border);border-left:solid 2px var(--color-border);border-bottom:solid 5px var(--color-border);cursor:pointer}.StartScreen .language-option .label{font-size:1.25rem;font-weight:700}.StartScreen .language-option .native{font-size:.95rem;color:var(--color-text-muted)}.StartScreen .language-option.active{border-color:var(--color-correct-text);border-bottom-color:var(--color-correct-text);background-color:var(--color-correct-bg)}.StartScreen .language-option.active .native{color:var(--color-correct-text)}.StartScreen .start-lesson{background-color:var(--color-correct-button);border-top:solid 0px var(--color-correct-text);border-right:solid 0px var(--color-correct-text);border-left:solid 0px var(--color-correct-text);border-bottom:solid 5px var(--color-correct-text);width:100%;height:80px;text-transform:uppercase;font-size:1.5rem;color:var(--color-on-strong);cursor:pointer}.StartScreen .start-lesson:disabled{background-color:var(--color-cta-disabled-bg);border-top:solid 0px var(--color-cta-disabled-bg);border-right:solid 0px var(--color-cta-disabled-bg);border-left:solid 0px var(--color-cta-disabled-bg);border-bottom:solid 5px var(--color-cta-disabled-bg);color:var(--color-cta-disabled-text);cursor:not-allowed}.StartScreen .show-overview{display:block;width:fit-content;max-width:100%;margin:1.25rem auto 0;padding:.75rem .5rem;min-height:44px;box-sizing:border-box;font-size:1rem;font-weight:400;line-height:1.25;color:var(--color-accent);background:transparent;border:none;text-transform:none;text-decoration:underline;cursor:pointer}.StartScreen .show-overview:hover:not(:disabled){color:var(--color-accent-hover);text-decoration:underline}.StartScreen .show-overview:focus-visible{outline:solid 2px var(--color-accent);outline-offset:2px;border-radius:2px}.StartScreen .show-overview:disabled{color:var(--color-text-muted);text-decoration:none;cursor:not-allowed}.UebersichtPage{max-width:480px;margin:0 auto;padding-top:3.5rem;padding-bottom:2rem;text-align:left}.UebersichtPage h1{margin:0 0 1.5rem;text-align:center}.UebersichtPage .leer{color:var(--color-text-muted);margin:.5rem 0 0}.UebersichtPage .sprache{margin-bottom:2rem}.UebersichtPage .sprache h2{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:1.25rem;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:solid 2px var(--color-border)}.UebersichtPage .sprache .anzahl{font-size:.9rem;font-weight:400;color:var(--color-text-muted);white-space:nowrap}.UebersichtPage .fach{margin-bottom:1.25rem}.UebersichtPage .fach h3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:1rem;margin:0 0 .5rem}.UebersichtPage .fach .fach-hinweis{font-size:.85rem;font-weight:400;color:var(--color-text-muted);white-space:nowrap}.UebersichtPage .vokabeln{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.UebersichtPage .vokabeln li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:.6rem .75rem;background:var(--color-surface);border:solid 2px var(--color-border);border-bottom-width:4px}.UebersichtPage .vokabeln .wort{font-weight:700;overflow-wrap:anywhere}.UebersichtPage .vokabeln .uebersetzung{grid-column:1;font-size:.9rem;color:var(--color-text-secondary);overflow-wrap:anywhere}.UebersichtPage .vokabeln .fehler{grid-column:2;grid-row:1/span 2;align-self:center;font-size:.85rem;color:var(--color-incorrect-text-strong);white-space:nowrap}.VokabelListePage{max-width:480px;margin:0 auto;padding-top:3.5rem;padding-bottom:2rem;text-align:left}.VokabelListePage h1{margin:0 0 1.5rem;text-align:center}.VokabelListePage .leer{color:var(--color-text-muted);margin:.5rem 0 0}.VokabelListePage .sprache{margin-bottom:2rem}.VokabelListePage .sprache h2{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:1.25rem;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:solid 2px var(--color-border)}.VokabelListePage .sprache .anzahl{font-size:.9rem;font-weight:400;color:var(--color-text-muted);white-space:nowrap}.VokabelListePage .vokabeln{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.VokabelListePage .vokabeln li{display:grid;grid-template-columns:1fr;gap:2px;padding:.6rem .75rem;background:var(--color-surface);border:solid 2px var(--color-border);border-bottom-width:4px}.VokabelListePage .vokabeln .wort{font-weight:700;overflow-wrap:anywhere}.VokabelListePage .vokabeln .uebersetzung{font-size:.9rem;color:var(--color-text-secondary);overflow-wrap:anywhere}:root{color-scheme:light;--color-bg: #ffffff;--color-bg-subtle: #eeeeee;--color-surface: #ffffff;--color-text: #000000;--color-text-muted: #666666;--color-text-secondary: #555555;--color-text-subtle: #888888;--color-border: #e5e5e5;--color-accent: #3c4dff;--color-accent-hover: #2a36b0;--color-accent-link: #646cff;--color-accent-link-hover: #535bf2;--color-correct-bg: #d6ffb8;--color-correct-text: #58a700;--color-correct-button: #58cc02;--color-incorrect-bg: #ffdfe0;--color-incorrect-text: #eb2a2b;--color-incorrect-text-strong: #d32627;--color-incorrect-button: #ff4b4c;--color-on-strong: #ffffff;--color-cta-disabled-bg: var(--color-border);--color-cta-disabled-text: var(--color-text-muted);--color-button-bg: #f9f9f9;--color-abort-hover: #333333;--color-chrome: #ffffff;--color-chrome-transparent: rgba(255, 255, 255, 0);--color-logo-glow: #646cffaa;--color-logo-glow-react: #61dafbaa;--dark-bg: #121212;--dark-bg-subtle: #1a1a1a;--dark-surface: #1e1e1e;--dark-text: #f2f2f2;--dark-text-muted: #a8a8a8;--dark-text-secondary: #b8b8b8;--dark-text-subtle: #9a9a9a;--dark-border: #3d3d3d;--dark-accent: #7b88ff;--dark-accent-hover: #9aa3ff;--dark-accent-link: #8b94ff;--dark-accent-link-hover: #a8afff;--dark-correct-bg: #1e3a1a;--dark-correct-text: #8fd45a;--dark-correct-button: #4a9e12;--dark-incorrect-bg: #3a1c1d;--dark-incorrect-text: #f08080;--dark-incorrect-text-strong: #f08888;--dark-incorrect-button: #c43c3d;--dark-on-strong: #ffffff;--dark-cta-disabled-bg: var(--dark-border);--dark-cta-disabled-text: var(--dark-text-muted);--dark-button-bg: #2a2a2a;--dark-abort-hover: #e0e0e0;--dark-chrome: var(--dark-bg);--dark-chrome-transparent: rgba(18, 18, 18, 0);--dark-logo-glow: #7b88ffaa;--dark-logo-glow-react: #61dafb99}:root[data-theme=dark]{color-scheme:dark;--color-bg: var(--dark-bg);--color-bg-subtle: var(--dark-bg-subtle);--color-surface: var(--dark-surface);--color-text: var(--dark-text);--color-text-muted: var(--dark-text-muted);--color-text-secondary: var(--dark-text-secondary);--color-text-subtle: var(--dark-text-subtle);--color-border: var(--dark-border);--color-accent: var(--dark-accent);--color-accent-hover: var(--dark-accent-hover);--color-accent-link: var(--dark-accent-link);--color-accent-link-hover: var(--dark-accent-link-hover);--color-correct-bg: var(--dark-correct-bg);--color-correct-text: var(--dark-correct-text);--color-correct-button: var(--dark-correct-button);--color-incorrect-bg: var(--dark-incorrect-bg);--color-incorrect-text: var(--dark-incorrect-text);--color-incorrect-text-strong: var(--dark-incorrect-text-strong);--color-incorrect-button: var(--dark-incorrect-button);--color-on-strong: var(--dark-on-strong);--color-cta-disabled-bg: var(--dark-cta-disabled-bg);--color-cta-disabled-text: var(--dark-cta-disabled-text);--color-button-bg: var(--dark-button-bg);--color-abort-hover: var(--dark-abort-hover);--color-chrome: var(--dark-chrome);--color-chrome-transparent: var(--dark-chrome-transparent);--color-logo-glow: var(--dark-logo-glow);--color-logo-glow-react: var(--dark-logo-glow-react)}@media (prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark;--color-bg: var(--dark-bg);--color-bg-subtle: var(--dark-bg-subtle);--color-surface: var(--dark-surface);--color-text: var(--dark-text);--color-text-muted: var(--dark-text-muted);--color-text-secondary: var(--dark-text-secondary);--color-text-subtle: var(--dark-text-subtle);--color-border: var(--dark-border);--color-accent: var(--dark-accent);--color-accent-hover: var(--dark-accent-hover);--color-accent-link: var(--dark-accent-link);--color-accent-link-hover: var(--dark-accent-link-hover);--color-correct-bg: var(--dark-correct-bg);--color-correct-text: var(--dark-correct-text);--color-correct-button: var(--dark-correct-button);--color-incorrect-bg: var(--dark-incorrect-bg);--color-incorrect-text: var(--dark-incorrect-text);--color-incorrect-text-strong: var(--dark-incorrect-text-strong);--color-incorrect-button: var(--dark-incorrect-button);--color-on-strong: var(--dark-on-strong);--color-cta-disabled-bg: var(--dark-cta-disabled-bg);--color-cta-disabled-text: var(--dark-cta-disabled-text);--color-button-bg: var(--dark-button-bg);--color-abort-hover: var(--dark-abort-hover);--color-chrome: var(--dark-chrome);--color-chrome-transparent: var(--dark-chrome-transparent);--color-logo-glow: var(--dark-logo-glow);--color-logo-glow-react: var(--dark-logo-glow-react)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--color-text);background:var(--color-bg);background:linear-gradient(to bottom,var(--color-bg),var(--color-bg-subtle));font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-accent-link);text-decoration:inherit}a:hover{color:var(--color-accent-link-hover)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:2.2em;line-height:1.1;margin-bottom:2.5rem}button{border-radius:15px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-button-bg);color:var(--color-text);cursor:pointer;transition:border-color .25s;outline:none}