:root{--bg:#f4f6fb;--ink:#192038;--muted:#778298;--line:#e6eaf1;--navy:#171d34;--orange:#f69e41;--violet:#6558e9;--good:#14956c;--bad:#cc5360;--paper:#fff;--shadow:0 9px 33px rgba(24,29,50,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font:15px/1.48 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b1a9f8;outline-offset:2px}.hidden{display:none!important}.top{background:var(--navy);color:white;padding:14px max(18px,calc((100vw - 940px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:11px}.brand img{width:46px;height:46px;border-radius:14px}.brand strong{display:block;line-height:1.1;font-size:25px;font-weight:850;letter-spacing:-1px}.brand strong span{color:var(--orange)}.brand small{font-size:9px;letter-spacing:1.35px;color:#b9bcd4}.top-indicator{font-size:12px;color:#dce5f5;border-radius:999px;background:#2b344e;padding:8px 11px}
.wrap{max-width:940px;margin:auto;padding:15px 17px 80px}.nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:4px 0 20px}.nav button{border:0;border-radius:13px;background:#fff;padding:12px 5px;color:#647087;font-size:14px;font-weight:700;white-space:nowrap}.nav button.active{background:var(--navy);color:#fff}.nav button span{margin-left:2px}.page-title{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px}.page-title h1{margin:0;font-size:31px;line-height:1.2;letter-spacing:-1px}.eyebrow{color:var(--violet);font-size:11px;font-weight:850;letter-spacing:1.7px}.profile-chip{border-radius:999px;background:#ebe9ff;color:#5746bb;padding:7px 12px;font-size:12px;font-weight:800}
.welcome{background:#171d34;color:white;min-height:163px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px;border-radius:24px;overflow:hidden;margin-bottom:23px}.welcome h1{font-size:clamp(27px,5vw,43px);letter-spacing:-1.2px;line-height:1.17;margin:6px 0}.welcome em{font-style:normal;color:var(--orange)}.welcome .eyebrow{color:#bac1d4}.hero-symbol{font-size:79px;transform:rotate(-13deg);filter:drop-shadow(0 9px 12px #0003)}h2{font-size:18px;letter-spacing:-.35px;margin:0 0 15px}.section-heading{margin:0 0 10px}.profiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.profile{background:#fff;border:2px solid transparent;border-radius:19px;box-shadow:var(--shadow);padding:15px;display:flex;gap:12px;align-items:center;text-align:left;min-width:0}.profile.active{border-color:#766aff;background:#fdfcff}.avatar{display:flex;align-items:center;justify-content:center;color:#fff;border-radius:16px;font-size:24px;font-weight:900;min-width:53px;height:53px}.avatar-one{background:#6b60e9}.avatar-two{background:#ec9b4f}.profile-copy{min-width:0}.profile strong{font-size:19px;display:block}.profile small{color:var(--muted)}.arrow{margin-left:auto;color:#9fa9bc;font-size:23px}.home-panel,.panel{margin-top:16px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.home-panel h2{margin:4px 0 0}.chip{display:inline-flex;gap:5px;align-items:center;background:#fff0dd;color:#97591c;font-weight:800;padding:9px 13px;border-radius:100px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:20px 0}.metrics>div{padding:16px 8px;background:#f5f6fc;border-radius:13px;text-align:center}.metrics strong{font-size:29px;line-height:1.1;display:block;font-variant-numeric:tabular-nums}.metrics span{font-size:11px;color:var(--muted)}.subtle{font-size:12px;text-align:center;color:var(--muted);margin-top:21px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.btn{border:0;padding:11px 15px;border-radius:12px;min-height:44px;font-weight:750}.btn.primary{background:var(--violet);color:white}.btn.primary:hover{background:#5443cf}.btn.soft{background:#eeedfe;color:#5449b9}.btn.light{background:#f3f5f9;color:#313c56}.btn.danger{background:#fff0f1;color:#ae4453}.btn.small{font-size:12px;min-height:35px;padding:7px 11px}.btn.full{width:100%;margin-top:13px}.btn span{margin-left:11px}.panel h2{margin:0 0 12px}.field{margin-bottom:15px;min-width:0}label{display:block;font-size:12px;font-weight:750;margin-bottom:5px;color:#49536c}input:not([type=checkbox]):not([type=file]),select,textarea{width:100%;border:1px solid #dce1ec;background:#fbfcfe;color:var(--ink);border-radius:12px;padding:13px 12px;min-height:45px}textarea{resize:vertical;min-height:85px}input[type=file]{max-width:100%;font-size:12px}input[type=checkbox]{accent-color:var(--violet)}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.small{font-size:12px;color:var(--muted);margin:8px 0}.tiny{font-size:12px;font-weight:650;color:var(--muted)}.warning-text{margin-top:16px}.control-row{margin:14px 0 7px}.checkline{display:flex;gap:6px;align-items:center;margin:0;cursor:pointer}.mode{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mode button{background:#f4f5fa;color:#66718a;border:1px solid transparent;padding:11px 4px;border-radius:11px;font-size:12px;font-weight:750}.mode button.active{border-color:#cbc6fc;background:#f0efff;color:#5542bb}.quiz-panel{min-height:180px}.empty-state{padding:37px 16px;text-align:center;color:var(--muted)}
.quiz-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:650;gap:15px}.meter{height:8px;background:#eceff8;border-radius:999px;margin-top:13px;overflow:hidden}.meter>div{height:100%;background:var(--orange);border-radius:inherit;transition:width .2s}.prompt-label{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:850;letter-spacing:1.2px;text-align:center;margin-top:20px}.question{font-size:clamp(29px,6vw,43px);font-weight:850;letter-spacing:-1px;text-align:center;margin:18px 0 24px;overflow-wrap:anywhere}.answer-area{max-width:530px;margin:auto}.answer-area input{font-size:18px}.quiz-actions{justify-content:center;margin-top:17px}.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mc-option{border:2px solid #e7e9f3;padding:18px 11px;border-radius:13px;min-height:71px;background:#f9faff;color:var(--ink);font-weight:750;overflow-wrap:anywhere}.mc-option.selected-correct{border-color:#44ba95;background:#e7f9f2}.mc-option.selected-wrong{border-color:#e07a8d;background:#fff1f4}.mc-option:disabled{opacity:1}.feedback{padding:12px 13px;border-radius:13px;margin-top:13px;font-size:14px}.feedback.correct{background:#e3f8ef;color:#146746}.feedback.wrong{background:#fff0ef;color:#9b3f4a}.solution{font-weight:750}.flash-answer{border-radius:16px;background:#f4f1ff;padding:19px;text-align:center;font-size:23px;font-weight:800;overflow-wrap:anywhere}.session-end{text-align:center;padding:15px 4px}.session-end .big{font-size:35px;font-weight:850;color:var(--violet)}.session-end h2{font-size:23px;margin:12px 0}.speak{border:none;border-radius:100px;background:#f1eefc;padding:9px 14px;color:#5648ab;font-weight:750}
.pair{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:10px 0}.pair .del{margin-top:20px}.bottom-actions{justify-content:space-between;margin-top:14px}.deck{display:flex;gap:14px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 0}.deck:last-child{border-bottom:0}.deck strong{display:block;font-size:15px}.deck p{margin:4px 0;color:var(--muted);font-size:12px}.history-item{border-top:1px solid var(--line);padding:15px 0}.history-item:first-of-type{border-top:0}.history-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:9px;align-items:center}.history-item summary::-webkit-details-marker{display:none}.history-item h3{font-size:15px;margin:0 0 3px}.history-item .sub{font-size:12px;color:var(--muted)}.history-item .stats{font-size:12px;font-weight:800;white-space:nowrap}.right-color{color:var(--good)}.wrong-color{color:var(--bad)}.log{border-bottom:1px solid #f0f1f6;padding:10px 0;font-size:12px}.log .answer-log{color:var(--muted);overflow-wrap:anywhere}.log:last-child{border:0}.toast{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:50;background:#27314b;color:#fff;padding:12px 16px;border-radius:13px;max-width:92vw;box-shadow:0 12px 35px #141c3433;font-size:13px}footer{text-align:center;font-size:10px;letter-spacing:1.3px;color:#9fa7b7;margin:30px 0}
@media(max-width:550px){.top{padding:12px 16px}.wrap{padding:12px 11px 90px}.nav button{font-size:19px;padding:7px 2px;display:flex;flex-direction:column;align-items:center;gap:0}.nav button span{font-size:10px;margin:0}.welcome{padding:19px;min-height:132px}.hero-symbol{font-size:54px}.welcome h1{font-size:27px}.profiles{grid-template-columns:1fr;gap:9px}.panel,.home-panel{padding:15px;border-radius:17px}.two-cols{grid-template-columns:1fr}.mc-grid{grid-template-columns:1fr}.pair{grid-template-columns:1fr 1fr auto}.pair input{font-size:12px;padding:10px 7px!important}.metrics>div{padding:12px 3px}.metrics strong{font-size:24px}.metrics span{font-size:10px}.profile{padding:11px}.quiz-panel{padding:14px}.deck{align-items:flex-start;flex-direction:column}.brand small{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.meter>div{transition:none}}


/* LevelUp neon refresh 2026-10-22 — presentation only.
   Keep the existing JavaScript, local storage keys, profile mapping,
   learning data, and deck migration behavior unchanged. */
:root{
  --bg:#0e151b;
  --ink:#edf6f2;
  --muted:#a1b3b4;
  --line:#324047;
  --navy:#0b1218;
  --orange:#bcff4e;
  --violet:#b1fc51;
  --good:#74e6ae;
  --bad:#ff8b98;
  --paper:#19242c;
  --shadow:0 12px 32px rgba(0,0,0,.17);
  color-scheme:dark;
}
html{background:var(--bg)}
body{background:radial-gradient(ellipse 95% 46% at 92% -5%,rgba(40,147,93,.09),transparent 75%),var(--bg);color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #bcff4e;outline-offset:3px}
.top{background:#0b131a;border-bottom:1px solid #2b4038}
.brand img{border:1px solid #3e5d42;border-radius:13px}
.brand strong span{color:#adf94a}
.brand small{color:#a9c2ad;letter-spacing:2px}
.top-indicator{color:#bbd8c4;background:#1d342a;border:1px solid #315b41}
.nav button{color:#b3c2be;background:#1b272e;border:1px solid #304049}
.nav button.active{color:#101b14;background:#b3fc56;border-color:#b3fc56;box-shadow:0 2px 14px rgba(166,244,70,.12)}
.page-title h1,.question{color:#eef6f1}
.eyebrow{color:#b0f475}
.profile-chip{background:#263b2f;color:#ceff9b;border:1px solid #385d40}
.welcome{background:radial-gradient(circle at 88% 48%,rgba(42,152,97,.29),transparent 54%),linear-gradient(115deg,#09161b,#132b27 75%,#092018);border:1px solid #355943;box-shadow:0 8px 35px rgba(0,0,0,.13)}
.welcome h1{color:#f6fcf9}
.welcome em{color:#bbff54}
.welcome .eyebrow{color:#9bbda9}
.hero-symbol{display:flex;align-items:center;justify-content:center;flex:none;transform:none;filter:none}
.hero-symbol img{width:132px;height:132px;max-width:30vw;border-radius:27px;box-shadow:0 0 36px rgba(141,255,51,.18);border:1px solid #3b6a4b;object-fit:cover}
.profile,.home-panel,.panel{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow)}
.profile{border:1px solid #324149}
.profile:hover{border-color:#5b9864}
.profile.active{border:1px solid #9df74a;background:#21342a;box-shadow:0 0 0 1px #92ee49 inset,0 8px 27px #07170c55}
.avatar-one{background:linear-gradient(140deg,#1d7145,#a4e943);color:#062118}
.avatar-two{background:linear-gradient(140deg,#276b69,#63dcc0);color:#042020}
.profile strong{color:var(--ink)}
.profile small{color:var(--muted)}
.arrow{color:#9bcbb0}
.chip{background:#29402c;color:#d2ffa6;border:1px solid #446840}
.metrics>div{background:#223038;border:1px solid #324249}
.metrics strong{color:#effaf3}
.btn.primary{background:#baff58;color:#152019}
.btn.primary:hover{background:#d0ff8c}
.btn.soft{background:#2b4436;color:#caff98}
.btn.soft:hover{background:#34533e}
.btn.light{background:#28333b;color:#e0eee8}
.btn.danger{background:#49262f;color:#ffb1bd}
label{color:#c8dbd2}
input:not([type=checkbox]):not([type=file]),select,textarea{background:#101c23;color:#f0f8f1;border:1px solid #455860}
input::placeholder,textarea::placeholder{color:#899c9f;opacity:1}
input[type=checkbox]{accent-color:#aafb4f}
.mode button{background:#273239;color:#bacbc6;border:1px solid #36474f}
.mode button.active{background:#294531;color:#d7ffb5;border-color:#86d75b}
.quiz-panel,.home-panel{color:var(--ink)}
.meter{background:#2c3c3e}
.meter>div{background:linear-gradient(90deg,#38ca89,#baff51)}
.mc-option{background:#22313a;color:#f1fbf7;border:2px solid #3c5054}
.mc-option:hover:not(:disabled){border-color:#74c77a}
.mc-option.selected-correct{background:#214738;border-color:#67cf8f;color:#e3ffe9}
.mc-option.selected-wrong{background:#492c36;border-color:#f293a1;color:#fff2f4}
.feedback.correct{background:#204633;color:#aff8c9}
.feedback.wrong{background:#4b2934;color:#ffc0cb}
.flash-answer{background:#283b35;color:#cfffac}
.session-end .big{color:#baff63}
.speak{background:#2a4635;color:#d1ffaa}
.history-item .sub,.deck p,.small,.tiny,.subtle{color:var(--muted)}
.log{border-color:#33444a}
.right-color{color:#92f1b9}
.wrong-color{color:#ff9aa8}
.toast{background:#243b30;border:1px solid #547c59;color:#edfbe9}
footer{color:#829b91}
@media(max-width:550px){
  .welcome{min-height:128px;padding:17px}
  .hero-symbol img{width:85px;height:85px;max-width:23vw;border-radius:20px}
  .welcome h1{font-size:clamp(24px,6vw,29px)}
  .profile{padding:13px}
}

/* Probeprüfung */
.nav{grid-template-columns:repeat(6,minmax(0,1fr))}
.exam-decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.exam-deck{display:flex;gap:11px;align-items:center;margin:0;padding:13px 12px;border-radius:13px;border:1px solid #3c4c50;background:#202e35;cursor:pointer;min-width:0}
.exam-deck input{flex:none;width:19px;height:19px}
.exam-deck span{min-width:0}
.exam-deck strong{display:block;color:var(--ink);font-size:14px;overflow-wrap:anywhere}
.exam-deck small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.exam-deck:has(input:checked){border-color:#aafa59;background:#253c30}
.mini-link{border:0;background:none;color:#baff58;font-size:12px;font-weight:800;padding:8px}
.exam-count-row{padding-top:15px}.exam-count-row .field{width:135px;margin:0}
.exam-count-row .tiny{flex:1;text-align:right}
.exam-hint{text-align:center;margin-top:20px}
.exam-corrections{margin-top:20px;text-align:left}
.exam-correction{display:flex;gap:12px;padding:12px 1px;border-top:1px solid var(--line);align-items:flex-start}
.exam-correction>span{font-size:19px;font-weight:900;min-width:23px}
.exam-correction strong{font-size:14px;color:var(--ink);display:block}
.exam-correction small{display:block;color:var(--muted);font-size:12px;margin-top:3px;overflow-wrap:anywhere}
.exam-correction small.right-color{color:var(--good)}
@media(max-width:550px){.nav{gap:4px}.nav button{font-size:16px;padding:8px 1px}.nav button span{font-size:9px}.exam-decks{grid-template-columns:1fr}}

/* Lernhilfen bei Schriftantworten */
.spelling-note{margin:.55rem 0 0;opacity:.78;}

/* Schreiben Light und direkte Fehlerwiederholung, v8 */
.mode{grid-template-columns:repeat(4,minmax(0,1fr))}
.mode button{font-size:11px;white-space:normal;line-height:1.25;padding:12px 5px;min-height:50px}
.writing-hint{border:1px solid #52775b;background:linear-gradient(120deg,#193229,#263e31);border-radius:16px;padding:14px;margin:0 0 17px;text-align:center}
.writing-hint > span{display:block;color:#b7e69c;font-weight:800;font-size:11px;letter-spacing:.9px;text-transform:uppercase}
.writing-hint strong{display:block;color:#e4ffdc;font-size:clamp(26px,6vw,39px);letter-spacing:.15em;word-break:break-word;margin:7px 0 2px;font-weight:850}
.review-errors{margin:14px 0 4px}
.history-item .logs{padding-bottom:8px}
@media(max-width:550px){.mode{grid-template-columns:repeat(2,minmax(0,1fr))}.mode button{font-size:12px}}

/* Direkt sichtbare Verlaufs-Wiederholung (v10) */
.history-card{border-top:1px solid var(--line);padding:9px 0 15px}
.history-card:first-child{border-top:0}
.history-card .history-item{border:0;padding:8px 0 4px}
.history-inline-actions{margin:5px 0 2px}
.history-inline-actions .review-errors{display:block;width:100%;margin:0;text-align:center;min-height:46px}
.review-banner{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 12px;margin:0 0 15px;border:1px solid var(--line);border-radius:13px;background:var(--panel,#1d2b2b)}
.review-banner strong{font-size:14px}
.review-banner span{font-size:12px;color:var(--muted)}
.review-banner .mini-link{margin-left:auto}
.quiz-panel{scroll-margin-top:18px}

/* v11: Loesung ansehen ist neutral, nicht falsch. */
.feedback.shown{background:#26343b;color:#d6e4e9;border:1px solid #52646d}
.writing-hint strong{letter-spacing:.09em;line-height:1.6;overflow-wrap:anywhere}
.quiz-panel{scroll-margin-top:14px}

/* v12: schlanke Vierer-Navigation, Brain Level Up als Startseite */
.nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.nav button{white-space:normal;min-height:56px;display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap;line-height:1.2}
.nav button span{display:inline-block;margin:0}
.header-tools{display:flex;gap:9px;align-items:center}
.header-tools select{appearance:auto;width:auto;min-height:37px;max-width:120px;border:1px solid #536857;border-radius:11px;background:#22382b;color:#d8ffbf;padding:7px 9px;font-weight:800;font-size:13px;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.today-pill{display:inline-flex;align-items:center;gap:4px;border:1px solid #496b40;background:#233929;color:#c9ff93;border-radius:100px;padding:9px 12px;font-size:12px;font-weight:800;white-space:nowrap}
.mode-title{font-size:15px;margin-bottom:14px!important;color:#d5e8d7}
.mode{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:9px}
.mode button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:82px;font-size:13px;padding:13px 9px;border-radius:14px}
.mode .mode-icon{font-size:23px;line-height:1}
.mode .mode-icon{display:block;width:33px;height:33px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;flex:none}
.mode .mode-label{display:block;font-size:11px;line-height:1.25;font-weight:750;text-align:center;overflow-wrap:anywhere}
@media(max-width:550px){.top{gap:8px}.header-tools{gap:6px}.header-tools select{max-width:110px;padding:7px 5px;font-size:12px}.top-indicator{display:none}.nav{gap:5px}.nav button{min-height:61px;padding:9px 3px;font-size:17px;flex-direction:column;gap:2px}.nav button span{font-size:10px;line-height:1.2;text-align:center;max-width:100%;overflow-wrap:break-word}.page-title{align-items:center;gap:10px}.page-title h1{font-size:clamp(23px,6vw,30px)}.today-pill{padding:8px 9px}.mode button{min-height:78px;font-size:12px}}


/* v15: native Eingabefelder innerhalb der Wortluecken statt separatem Textfeld */
.writing-hint .light-inline{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;row-gap:9px;max-width:100%;overflow-x:auto;padding:10px 2px 7px;margin-top:7px}
.writing-hint .light-word{display:inline-flex;align-items:baseline;white-space:nowrap;max-width:100%;flex:none;gap:0}
.writing-hint .light-fixed{font-size:clamp(22px,5.1vw,34px);line-height:1.65;font-weight:850;letter-spacing:0;color:#e4ffdc}
.writing-hint .light-fixed{text-transform:none}
.writing-hint .light-gap{width:.42em;font-size:29px;flex:none}
#lightPreview input.light-slot{display:inline-block;box-sizing:content-box;flex:none;width:calc(var(--slots) * 1.0ch + 9px);min-width:29px;max-width:none;height:45px;min-height:45px;margin:0 1px;padding:0 2px;border:0;border-bottom:3px solid #b5fc67;border-radius:3px 3px 0 0;background:rgba(5,16,16,.36);color:#e9ffdf;text-align:center;font-size:clamp(22px,5.1vw,34px);font-weight:850;line-height:1.2;letter-spacing:0;outline:none;box-shadow:none;font-family:inherit}
#lightPreview input.light-slot:focus{border-bottom-color:#f6ffbf;background:rgba(167,255,95,.15);box-shadow:0 2px 0 rgba(246,255,191,.4)}
#lightPreview input.light-slot::placeholder{color:#a7cda6;opacity:.85;font-size:clamp(19px,4.7vw,30px);letter-spacing:-.12em}
#lightPreview input.light-slot:disabled{opacity:1;-webkit-text-fill-color:#e9ffdf}
@media(max-width:390px){.writing-hint .light-inline{justify-content:flex-start}.writing-hint{padding:10px!important}#lightPreview input.light-slot{font-size:22px}.writing-hint .light-fixed{font-size:22px}}

/* Ein Serie-Bonus soll im Ergebnis sichtbar bleiben, bis weitergeklickt wird. */
.streak-bonus{margin-top:10px;padding:13px 14px;border:1px solid #a4e955;border-radius:12px;background:#2a4430;color:#d9ffae;font-weight:800;text-align:center}

/* v17: ruhige Hauptnavigation, Tagesverlauf, Pruefungsplaner, Datenschutz */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.nav{gap:9px;margin-bottom:21px}
.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:73px;border-radius:16px;font-size:13px;letter-spacing:0;border:1px solid #314048;transition:background .15s,border-color .15s}
.nav .nav-icon{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav button span{display:block;margin:0;font-size:12px;font-weight:750}
.nav button.active{box-shadow:0 5px 22px rgba(176,251,96,.11)}
.page-title{margin:7px 1px 15px}.page-title .eyebrow{letter-spacing:1.5px}
.mode button{transition:transform .15s,border-color .15s}.mode button:active{transform:scale(.985)}
.hint-output{min-height:0;color:#c5f6a7;font-weight:700}
.hint-output:empty{display:none}
.compact-details{margin-top:18px}
.compact-details>summary{cursor:pointer;font-weight:800;font-size:15px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.compact-details>summary:after{content:'⌄';font-size:20px;color:#b9d89c}
.compact-details[open]>summary{margin-bottom:13px}
.compact-details[open]>summary:after{content:'⌃'}
.compact-details>summary::-webkit-details-marker{display:none}
input[readonly]{opacity:.75}
.school-exam{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.school-exam:last-child{border-bottom:0}.school-exam strong{display:block;color:var(--ink)}.school-exam span{display:block;font-size:12px;color:var(--muted)}
.history-day{border:1px solid #384d46;border-radius:15px;background:#1a2a29;margin:13px 0;overflow:hidden}
.history-day>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px}
.history-day>summary::-webkit-details-marker{display:none}
.history-day>summary strong{display:block;font-size:16px;color:#f1ffef}.history-day>summary span{font-size:12px;color:var(--muted)}
.history-day>summary .day-totals{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;font-size:12px;font-weight:800;white-space:nowrap}
.history-day>summary .day-totals .right-color{color:#a1efaa}.history-day>summary .day-totals .wrong-color{color:#ffa7af}
.history-day>summary .day-totals span{color:#d8efcf}
.history-day[open]>summary{border-bottom:1px solid var(--line)}
.history-day-body{padding:0 13px 7px}
.history-card:first-child{border-top:0}
.privacy-link{padding:7px 13px;border:0;background:transparent;color:#adbdba;font-size:12px;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
.privacy-dialog{width:min(92vw,530px);max-height:85vh;overflow:auto;background:#1c2b2b;border:1px solid #526958;border-radius:19px;color:#eaf5ed;padding:23px;box-shadow:0 17px 70px #0007}
.privacy-dialog::backdrop{background:#061011c9}
.privacy-dialog p{font-size:14px;color:#c6d7d1;line-height:1.55}.privacy-dialog a{color:#c5ff82;text-decoration:underline}
.privacy-dialog h2{margin:0;font-size:19px}.privacy-close{background:#344744;border:0;border-radius:10px;color:#fff;width:34px;height:34px}
@media(max-width:550px){.nav{gap:6px}.nav button{min-height:72px;padding:9px 2px;gap:5px}.nav button .nav-icon{width:21px;height:21px}.nav button span{font-size:10px;line-height:1.2}.history-day>summary{padding:13px 11px}.history-day>summary .day-totals{gap:5px;flex-direction:column;align-items:flex-end}.school-exam{align-items:flex-start}}

/* v20: Lernmodus waehlen und erst danach die Einstellungen oeffnen */
#modeSetup #backModes{display:inline-block;margin:0 0 15px;padding:5px 0;text-align:left}
#modeSetup #modeSetupTitle{font-size:20px;margin-bottom:19px!important;color:var(--ink)}
#modeSetup .control-row{margin-top:17px}
.selected-deck-details{margin-top:9px;padding:11px 13px;border:1px solid #394e47;border-radius:11px;background:#172623;overflow-wrap:anywhere;word-break:break-word}
.selected-deck-details:empty{display:none}
.selected-deck-title{color:#eaffdf;font-size:13px;font-weight:750;line-height:1.45}
.selected-deck-meta{color:#b8c8bf;font-size:12px;line-height:1.5;margin-top:3px}

/* v24: kompaktes Dashboard auf der ersten Lernseite */
.learning-overview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.overview-card{padding:15px 16px;background:#1a2b29;border:1px solid #365447;border-radius:16px;min-width:0}
.overview-card h2{margin:0 0 11px;font-size:14px;letter-spacing:0;color:#d7f6d8}
.overview-card p{margin:5px 0;color:#bed0c6;font-size:12px}
.upcoming-exam{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #31473e}
.upcoming-exam:last-child{border-bottom:0}
.upcoming-exam strong{display:block;font-size:13px;color:#f1f9ee;overflow-wrap:anywhere}
.upcoming-exam small{display:block;color:#b4c7bd;font-size:11px}
.upcoming-exam button{flex:none}
.exam-days{font-weight:800;color:#bfff81;font-size:11px}
.mission-meter{height:9px;border-radius:999px;background:#2b443d;overflow:hidden;margin:11px 0 6px}
.mission-meter>div{height:100%;border-radius:999px;background:linear-gradient(90deg,#49cf83,#b7fc62);transition:width .2s}
.mission-total{font-size:13px;font-weight:800;color:#dfffc1}
.mission-done{color:#bffc8f;font-size:12px;font-weight:800}
@media(max-width:620px){.learning-overview{grid-template-columns:1fr;gap:9px}.overview-card{padding:12px 14px}.overview-card h2{margin-bottom:5px}}

/* v25: verständlicher Import, editierbare Listen und terminierte Challenges */
.import-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.import-choice{min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;background:#213239;border:1px solid #425850;border-radius:14px;color:#f1f9ed;padding:15px}
.import-choice:hover,.import-choice.active{border-color:#baff58;background:#293f34}
.import-choice strong{font-size:15px}.import-choice small{font-size:12px;line-height:1.45;color:#b4cbbc}
.import-choice-icon{font-size:25px}.import-method-panel{border-radius:13px;background:#14242a;border:1px solid #3a5048;padding:13px;margin-top:13px}
.import-advanced,.mission-defaults{margin-top:16px;border-top:1px solid #3b514b;padding-top:12px}
.import-advanced summary,.mission-defaults summary{cursor:pointer;font-weight:700;color:#d0eccf;font-size:13px}
.import-advanced[open] summary,.mission-defaults[open] summary{margin-bottom:12px}
.import-edit-notice{border:1px solid #54774f;background:#253b2f;color:#cfffad;padding:11px 15px;border-radius:12px;font-size:13px}
.empty-list-help{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#d0e0d3;font-size:13px}
.mission-editor-heading{font-size:15px;margin:4px 0 14px;color:#dcffd1}
.mission-upcoming{border-top:1px solid #3e544c;margin-top:15px;padding-top:12px}
.mission-upcoming>strong{font-size:13px;color:#d1ffc1}
.mission-day{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 7px;border:0;border-bottom:1px solid #32483d;background:none;color:#e4f7e5;text-align:left;font-size:12px}
.mission-day:hover{color:#baff58}
@media(max-width:520px){.import-choices{grid-template-columns:1fr}.mission-day{align-items:flex-start;flex-direction:column;gap:3px}}

/* v26: In einem Lernmodus ersetzt der Moduswechsler die Pruefungs-/Challenge-Karten. */
.mode-picker{margin-top:0;margin-bottom:16px}
.mode-picker.is-switch{padding:13px;border-color:#41604a;background:#162923}
.learn-switch-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;margin-bottom:11px;font-size:12px;font-weight:750;color:#bcd3c5}
.learn-switch-head strong{border:1px solid #6a9953;border-radius:999px;background:#294333;color:#d8ffb2;font-size:12px;padding:6px 10px}
.mode-picker.is-switch .mode{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0}
.mode-picker.is-switch .mode button{min-width:0;min-height:76px;padding:9px 3px;gap:4px;background:#21352e;border-color:#3b5849}
.mode-picker.is-switch .mode .mode-icon{width:27px;height:27px}
.mode-picker.is-switch .mode button.active{background:#b3fc56;border-color:#b3fc56;color:#132018;box-shadow:0 2px 15px #8cdb4c30}
.mode-picker.is-switch .mode button.active:after{content:'AKTIV';font-size:9px;font-weight:900;letter-spacing:.7px;color:#254524}
.mode-picker.is-switch .mode button:not(.active):hover{border-color:#89b96d}
@media(max-width:420px){.mode-picker.is-switch{padding:10px}.mode-picker.is-switch .mode{gap:5px}.mode-picker.is-switch .mode button{min-height:73px;padding:8px 2px}.mode-picker.is-switch .mode .mode-label{font-size:10px}}

/* v27: ein kleiner, ehrlich benannter Lernfortschritt auf der Uebersicht. */
.overview-progress{grid-column:1 / -1;padding:14px 16px}
.progress-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.overview-progress .progress-heading h2{margin:0}
.progress-heading>span{color:#c8ff98;font-size:13px;font-weight:900;white-space:nowrap}
.learn-coverage-meter{height:10px;background:#31473d;border-radius:999px;margin:12px 0 11px;overflow:hidden}
.learn-coverage-meter>div{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#4ed492,#baff59);transition:width .25s}
.progress-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.progress-figures>span{display:block;color:#afc5ba;font-size:11px;text-align:center;background:#20342c;border:1px solid #335043;border-radius:10px;padding:8px 4px}
.progress-figures strong{display:block;color:#f0ffe9;font-size:17px;font-weight:850;font-variant-numeric:tabular-nums}
.overview-progress .progress-note{margin:10px 0 0;color:#bfd9be;font-size:11px;text-align:center}
@media(max-width:420px){.overview-progress{padding:12px}.progress-figures{gap:5px}.progress-figures>span{font-size:10px;padding:8px 2px}.progress-figures strong{font-size:15px}}

/* v28: sichtbare Uebungsrichtung im ersten Trainingsschritt. */
.training-direction{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#1b332a;border:1px solid #487350;border-radius:13px;padding:10px 13px;margin-top:17px}
.training-direction>div{min-width:0}
.training-direction span{display:block;color:#aac9b2;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.training-direction strong{display:block;color:#e4ffd5;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.training-direction button{flex:none}
.training-direction+.question{margin-top:16px}
@media(max-width:420px){.training-direction{padding:10px;gap:9px}.training-direction strong{font-size:14px}.training-direction button{font-size:11px}}

/* v29: verbleibende einzusetzende Buchstaben im Schreiben-Light-Modus. */
.light-letter-counter{display:flex;align-items:center;justify-content:center;gap:9px;margin:12px auto 1px;padding:8px 12px;width:max-content;max-width:100%;border:1px solid #6a9953;background:#253d2d;border-radius:12px;color:#d7ffc6}
.light-letter-counter strong{font-size:28px;font-weight:900;line-height:1;color:#baff58;font-variant-numeric:tabular-nums}
.light-letter-counter span{font-size:12px;line-height:1.3;font-weight:700;text-transform:none;letter-spacing:0;color:#dcf7d5}
@media(max-width:390px){.light-letter-counter{padding:7px 9px;gap:7px}.light-letter-counter strong{font-size:25px}.light-letter-counter span{font-size:11px}}

/* v30: Schreibweise und Gross-/Kleinschreibung gehoeren zur richtigen Antwort. */
.case-reminder{margin-top:10px;padding:11px 13px;background:#453823;color:#ffe9ad;border:1px solid #9c7840;border-radius:12px;font-size:13px;font-weight:800}
.exam-correction .case-review{color:#ffe09e;font-weight:800}

/* v32: Vier Hauptkacheln; Dashboard und Lernmodi sind eigene Seiten. */
.dashboard-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 22px}
.dashboard-actions .btn{flex:1}
.history-back{margin:0 0 14px}
@media(max-width:430px){.dashboard-actions{gap:7px}.dashboard-actions .btn{padding:11px 8px;font-size:12px}}

/* v33: Leere Listenbereiche wie in Level Learn links an der Inhaltskante. */
#examDeckList > .empty-state,#deckList > .empty-state{padding:8px 0 16px;text-align:left;justify-self:stretch;min-width:0}
#examDeckList > .empty-state{grid-column:1/-1}
#examDeckList > .empty-state .btn,#deckList > .empty-state .btn{display:inline-flex;align-items:center;justify-content:center;margin-top:12px}
#examArea > .empty-state{text-align:left;padding:15px 0}

/* v34: Mehrfachauswahl, Wort-Memory, Archiv und Lernlisten-Ausdruck. */
#learnDeckList{margin:9px 0 0}
#learnDeckList .exam-deck{min-height:64px}
#learnDeckList>.empty-state{grid-column:1/-1;text-align:left;padding:8px 0}
.mode-picker:not(.is-switch) .mode{grid-template-columns:repeat(3,minmax(0,1fr))}
.mode-picker.is-switch .mode{grid-template-columns:repeat(6,minmax(0,1fr))}
.mode-picker.is-switch .mode button{padding:9px 2px}
.mode-picker.is-switch .mode .mode-icon{width:25px;height:25px}
.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:17px 0}
.smart-intro{margin:7px 0 17px;padding:13px;border-radius:13px;background:#233d31;border:1px solid #577a54;color:#e0f7d8;font-size:13px;line-height:1.5}
.smart-step{display:flex;align-items:center;gap:7px;margin:16px 0 0;color:#baff58;font-size:12px;font-weight:800}
.smart-step strong{padding:4px 9px;border-radius:999px;background:#294c32;border:1px solid #5d9250}
.smart-step span{color:#aacfb1;font-size:11px;font-weight:600}
.smart-summary{background:#213d2e;border:1px solid #628e55;padding:13px;border-radius:12px;color:#ddffbb;font-weight:800}
.smart-summary small{color:#bed8be;font-weight:500}
.smart-progress-note{margin:12px 0 0;padding:10px 12px;border-radius:11px;background:#223b2f;border:1px solid #476f4a;color:#cef6b6;font-size:12px;font-weight:700}
@media(max-width:550px){.mode-picker.is-switch .mode{grid-template-columns:repeat(3,minmax(0,1fr))}}
.memory-card{display:flex;justify-content:center;align-items:center;min-height:92px;padding:13px 7px;border-radius:14px;border:1px solid #4b7156;background:#203a32;color:#baff58;font-size:17px;font-weight:800;overflow-wrap:anywhere;cursor:pointer;transition:background .16s,border-color .16s}
.memory-card.open{background:#294539;border-color:#befb69;color:#f0fdee}
.memory-card.matched{background:#2d5b3f;border-color:#9fee6b;color:#eaffd6;cursor:default}
.memory-card:disabled{opacity:.88}
.memory-status{text-align:center}
.light-reveal{margin:11px auto;padding:11px 14px;border-radius:11px;border:1px solid #8ac26a;background:#23452f;color:#ddffce;text-align:center;font-size:13px;font-weight:750}
.light-reveal strong{display:block;margin-top:8px;font-size:21px;letter-spacing:1px;white-space:pre-wrap;overflow-wrap:anywhere}
.light-reveal-letter{color:#baff58;text-decoration:underline;text-underline-offset:4px}
.archive-suggestion{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:13px 15px;margin-bottom:15px;background:#22392e;border:1px solid #618557;border-radius:13px}
.archive-suggestion strong{font-size:13px;color:#eaffd8}
.archive-suggestion p{font-size:12px;color:#b9d6bf;margin:5px 0 0}
.archive-suggestion .row{gap:7px}
#archiveDeckList .deck{margin:10px 0 0}
.print-only{display:none}
@media(max-width:420px){.memory-grid{gap:7px}.memory-card{min-height:76px;padding:8px 4px;font-size:13px}.mode-picker.is-switch .mode{gap:4px}.mode-picker.is-switch .mode button{min-height:69px}.mode-picker.is-switch .mode .mode-icon{width:23px;height:23px}.mode-picker.is-switch .mode .mode-label{font-size:9px}}
/* V40: drei kompakte Stufen, alle Kacheln im LevelUp-Dark-Design. */
.mode-picker .mode,.mode-picker:not(.is-switch) .mode,.mode-picker.is-switch .mode{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
.level-tier{min-width:0}
.level-tier h3{display:flex;align-items:center;gap:9px;margin:0 0 5px;color:#d9e7df;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px}
.level-tier h3 span{font-size:10px;font-weight:800;letter-spacing:.4px;color:#9fc782;background:#253b2e;border:1px solid #416345;border-radius:5px;padding:2px 5px}
.tier-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mode-picker .mode .tier-tiles button{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:8px;min-width:0;min-height:54px;padding:9px 10px;background:#26343b;border:1px solid #3a4d50;color:#e3eee9;font-size:12px;border-radius:12px}
.mode-picker .mode .tier-tiles button:hover{background:#2b3d42;border-color:#688c66}
.mode-picker .mode .tier-tiles button.active{background:#284432;border-color:#baff58;color:#d7ffad}
.mode-picker.is-switch .mode .tier-tiles button.active::after{display:none}
.mode-picker .mode .tier-tiles .mode-icon,.mode-picker.is-switch .mode .tier-tiles .mode-icon{height:24px;width:24px;flex:none}
.mode-picker .mode .tier-tiles .mode-label{font-size:12px;text-align:left;line-height:1.2}
@media(max-width:550px){.mode-picker .mode,.mode-picker.is-switch .mode{gap:8px}.tier-tiles{gap:7px}.mode-picker .mode .tier-tiles button{min-height:48px;padding:7px 6px;gap:6px}.mode-picker .mode .tier-tiles .mode-icon{width:21px;height:21px}.mode-picker .mode .tier-tiles .mode-label{font-size:11px}}
@media(max-width:370px){.tier-tiles{gap:5px}.mode-picker .mode .tier-tiles .mode-label{font-size:10px}.mode-picker .mode .tier-tiles button{gap:4px}}
.header-tools{display:flex;align-items:center;gap:9px}.cloud-entrance{border:1px solid #4e7052;background:#253a30;color:#d3ffb2;border-radius:11px;height:41px;width:41px;font-size:22px;line-height:1}
.cloud-dialog{width:min(95vw,580px);max-height:min(90vh,880px);overflow-y:auto}.cloud-dialog h3{margin:0 0 11px;color:#edf9ec;font-size:15px}.cloud-dialog .cloud-section{border-top:1px solid #3c5050;margin-top:20px;padding-top:18px}.cloud-dialog .cloud-section:first-child{border-top:0}
.cloud-dialog .cloud-section .two-cols{gap:10px}.cloud-dialog .cloud-section .field{margin-bottom:9px}.cloud-dialog #cloudLinked{margin:9px 0 0}
.cloud-statusbar{display:flex;flex-wrap:wrap;gap:9px;justify-content:space-between;align-items:center;background:#25382d;border:1px solid #4d754a;border-radius:12px;padding:9px 12px;color:#d8ffcb;font-size:12px;font-weight:750}
.cloud-big-code{font-size:clamp(19px,5vw,24px);font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:1.6px;overflow-wrap:anywhere;color:#baff58;text-align:center;margin:12px 0}
.cloud-invite{background:#203529;padding:12px;border:1px solid #4d754a;border-radius:13px;margin-top:11px}.cloud-invite small{font-size:11px;color:#abcab1}
.cloud-device{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid #344a4a;padding:11px 0;font-size:12px;color:#d8e6dc}.cloud-device:last-child{border-bottom:0}.cloud-device>span{min-width:0;overflow-wrap:anywhere}
.cloud-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:11px}.cloud-summary-tile{border-radius:12px;padding:11px;background:#25333a;border:1px solid #3d4d51}.cloud-summary-tile strong{display:block;font-size:14px;color:#e4f7dd}.cloud-summary-tile small{display:block;font-size:11px;color:#b6ccc3;margin-top:4px}
@media(max-width:450px){.cloud-dialog .two-cols{grid-template-columns:1fr}.cloud-summary{grid-template-columns:1fr}.cloud-dialog{padding:14px}.cloud-device{align-items:flex-start}.cloud-device button{flex:none}}
@media print{
  /* Ohne Browser-Seitenrand druckt Chrome in der Regel keine URL/Kopfzeile. */
  @page{size:A4;margin:0}
  body{background:white!important;color:#111!important;font:11pt/1.4 Arial,Helvetica,sans-serif}
  body>*:not(#printArea){display:none!important}
  #printArea{display:block!important;color:#111;background:white;padding:12mm}
  .print-heading{margin:0 0 20px;border-bottom:2px solid #333;padding-bottom:9px}
  .print-heading h1{font-size:22pt;margin:0 0 3px}
  .print-heading p,.print-deck p{color:#444;font-size:10pt;margin:5px 0 12px}
  .print-deck{break-before:page;page-break-before:always}
  .print-deck:first-of-type{break-before:auto;page-break-before:auto}
  .print-deck h2{font-size:17pt;margin:0 0 4px}
  .print-deck table{width:100%;border-collapse:collapse;table-layout:fixed}
  .print-deck th,.print-deck td{border:1px solid #999;padding:7px 9px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
  .print-deck th{background:#eee!important;color:#111!important}
  .print-deck tr{break-inside:avoid;page-break-inside:avoid}
}