/* ===== Tokens ===== */
:root{
  --bg:#f6f7fb; --bg-elev:#ffffff; --bg-sunken:#eceef5;
  --fg:#1a1d29; --fg-muted:#5c6178; --fg-faint:#8b90a6;
  --line:#dfe2ee; --line-strong:#c8cddd;
  --accent:#4f46e5; --accent-fg:#ffffff; --accent-soft:#eceafe;
  --ok:#0f9960; --ok-soft:#e3f5ec;
  --warn:#c17d0b; --warn-soft:#fdf3e0;
  --bad:#d33a3a; --bad-soft:#fdeaea;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,24,40,.06), 0 8px 24px rgba(20,24,40,.06);
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1117; --bg-elev:#171a23; --bg-sunken:#12141c;
    --fg:#e9ebf2; --fg-muted:#a2a8bd; --fg-faint:#71778e;
    --line:#272b38; --line-strong:#39405260;
    --accent:#7c74ff; --accent-fg:#ffffff; --accent-soft:#241f4d;
    --ok:#3ddc9a; --ok-soft:#122c22;
    --warn:#f0b429; --warn-soft:#2e2413;
    --bad:#ff6b6b; --bad-soft:#33191b;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
/* muss vor allen display-Regeln stehen: sonst überstimmt z. B. .fc-side{display:flex}
   das hidden-Attribut und die Lösung bliebe sichtbar */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.01em}
h1{font-size:1.7rem}
h2{font-size:1rem; letter-spacing:.02em; text-transform:uppercase; color:var(--fg-muted); font-weight:600}
p{margin:0}
em{font-style:normal; color:var(--fg); background:var(--accent-soft); padding:1px 6px; border-radius:6px; font-weight:500}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; background:var(--bg-sunken); padding:2px 5px; border-radius:5px}
kbd{
  font-family:var(--font); font-size:.7rem; font-weight:600; color:var(--fg-muted);
  background:var(--bg-sunken); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; padding:1px 5px; white-space:nowrap;
}
.muted{color:var(--fg-muted); font-weight:400}
.hint{color:var(--fg-muted); font-size:.83rem; line-height:1.55}
.big-emoji{font-size:3rem; margin-bottom:8px}

/* ===== Layout ===== */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
.sidebar{
  background:var(--bg-elev); border-right:1px solid var(--line);
  padding:18px 14px; display:flex; flex-direction:column; gap:16px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; gap:11px; align-items:center; padding:0 6px}
.brand-mark{font-size:1.6rem}
.brand strong{display:block; font-size:1rem}
.brand small{color:var(--fg-muted); font-size:.75rem}

.nav{display:flex; flex-direction:column; gap:2px}
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border:0; border-radius:var(--radius-sm);
  background:transparent; color:var(--fg-muted); font:inherit; font-weight:500;
  cursor:pointer; text-align:left; transition:background .12s, color .12s;
}
.nav-item span{font-size:1rem; width:20px}
.nav-item kbd{margin-left:auto; opacity:.55}
.nav-item:hover{background:var(--bg-sunken); color:var(--fg)}
.nav-item.active{background:var(--accent); color:var(--accent-fg)}
.nav-item.active kbd{background:rgba(255,255,255,.16); border-color:transparent; color:var(--accent-fg)}

.deck-picker{padding:0 6px}
.deck-picker label{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-faint); margin-bottom:6px; font-weight:600}
.deck-picker select + label{margin-top:12px}
.sidebar-foot{margin-top:auto; padding:0 6px}

.main{padding:34px 40px 60px; max-width:960px}
.view-head{margin-bottom:24px}
.view-head .sub{color:var(--fg-muted); margin-top:6px}

/* ===== Panels ===== */
.panel{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin-bottom:18px; box-shadow:var(--shadow);
}
.panel > h2{margin-bottom:14px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.panel-head h2{margin:0}
.badge{
  display:inline-block; background:var(--bg-sunken); color:var(--fg-muted);
  border-radius:20px; padding:1px 9px; font-size:.75rem; font-weight:600;
}
.danger-zone{border-color:var(--line)}

/* ===== Controls ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 15px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--bg-elev); color:var(--fg); font:inherit; font-weight:550;
  cursor:pointer; transition:transform .08s, background .12s, border-color .12s;
}
.btn:hover{background:var(--bg-sunken)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.success{background:var(--ok-soft); border-color:transparent; color:var(--ok)}
.btn.danger{background:var(--bad-soft); border-color:transparent; color:var(--bad)}
.btn.ghost{background:transparent; border-color:var(--line)}
.btn.big{padding:13px 26px; font-size:1rem}
.btn.icon-btn{padding:6px 12px; font-size:.85rem}
.btn kbd{margin-left:2px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.file-btn{position:relative; overflow:hidden}

input[type=text], input[type=search], textarea, select{
  width:100%; padding:9px 12px; font:inherit; color:var(--fg);
  background:var(--bg-sunken); border:1px solid var(--line);
  border-radius:var(--radius-sm); outline:none;
}
input:focus, textarea:focus, select:focus{border-color:var(--accent); background:var(--bg-elev)}
textarea{resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; line-height:1.7}
select{cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-faint) 50%),linear-gradient(135deg,var(--fg-faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:32px}
input[type=range]{padding:0; background:transparent; border:0; accent-color:var(--accent)}
.search{max-width:230px}

.add-form{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end}
.add-form label:nth-child(4){grid-column:span 2}
.add-form button{grid-column:span 2; justify-self:start}
label > span{display:block; font-size:.8rem; font-weight:600; color:var(--fg-muted); margin-bottom:6px}
label > span small{font-weight:400; color:var(--fg-faint)}
.row-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px}
.settings-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.settings-grid .check{display:flex; align-items:center; gap:9px; font-size:.9rem}
.settings-grid .check input{width:auto; accent-color:var(--accent); width:16px; height:16px}
.settings-grid .check span{margin:0; font-weight:450; color:var(--fg)}
output{color:var(--accent); font-weight:600}

/* ===== Dashboard ===== */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:18px}
.stat{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.stat b{display:block; font-size:1.9rem; font-weight:680; letter-spacing:-.02em; line-height:1.15}
.stat span{font-size:.8rem; color:var(--fg-muted)}
.stat.accent b{color:var(--accent)}
.stat.ok b{color:var(--ok)}

.card-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px}
.big-action{
  display:flex; gap:14px; align-items:center; text-align:left; cursor:pointer;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; font:inherit; color:var(--fg); box-shadow:var(--shadow);
  transition:border-color .14s, transform .08s;
}
.big-action:hover{border-color:var(--accent); transform:translateY(-1px)}
.ba-icon{font-size:1.8rem}
.ba-text strong{display:block; font-size:1rem}
.ba-text small{color:var(--fg-muted)}

.box-chart{display:flex; gap:10px; align-items:flex-end; height:120px; padding-top:8px}
.box-bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%}
.box-bar .bar{width:100%; background:var(--accent); border-radius:6px 6px 3px 3px; min-height:3px; transition:height .3s}
.box-bar .bar.b1{background:var(--bad)} .box-bar .bar.b2{background:var(--warn)}
.box-bar .bar.b3{background:var(--accent)} .box-bar .bar.b4{background:#3b9dd8} .box-bar .bar.b5{background:var(--ok)}
.box-bar em{background:none; padding:0; font-size:.75rem; color:var(--fg-muted); font-weight:600}
.box-bar small{font-size:.7rem; color:var(--fg-faint)}

/* ===== Hinweisband ===== */
.notice{
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  padding:14px 18px; border-radius:var(--radius);
  background:var(--warn-soft); border:1px solid var(--line);
}
.notice .nt-icon{font-size:1.4rem}
.notice strong{display:block; font-size:.92rem}
.notice small{color:var(--fg-muted)}
.notice .btn{margin-left:auto; flex:0 0 auto}

/* ===== Erste Schritte ===== */
.first-steps h2{margin-bottom:4px}
.fs-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:16px}
.fs-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  padding:16px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-sunken); font:inherit; color:var(--fg); cursor:pointer;
  transition:border-color .14s, transform .08s;
}
.fs-card:hover{border-color:var(--accent); transform:translateY(-1px)}
.fs-card .fs-icon{font-size:1.5rem}
.fs-card strong{font-size:.95rem}
.fs-card small{color:var(--fg-muted)}

/* ===== Erfassen: aufklappbar mit Reitern ===== */
.add-panel > summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  margin:-20px; padding:20px;
}
.add-panel > summary::-webkit-details-marker{display:none}
.add-panel > summary h2{margin:0}
.add-panel > summary .chev{margin-left:auto; color:var(--fg-faint); transition:transform .15s}
.add-panel[open] > summary{margin-bottom:6px}
.add-panel[open] > summary .chev{transform:rotate(90deg)}
.tabs{display:flex; gap:6px; margin:14px 0 16px; border-bottom:1px solid var(--line)}
.tab{
  padding:8px 14px; border:0; border-bottom:2px solid transparent; background:transparent;
  font:inherit; font-weight:550; color:var(--fg-muted); cursor:pointer; border-radius:6px 6px 0 0;
}
.tab:hover{color:var(--fg); background:var(--bg-sunken)}
.tab.active{color:var(--accent); border-bottom-color:var(--accent)}
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:36px 20px; border:2px dashed var(--line-strong); border-radius:var(--radius);
  background:var(--bg-sunken); cursor:pointer; transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over{border-color:var(--accent); background:var(--accent-soft)}
.dropzone .dz-icon{font-size:1.8rem}
.dropzone small{color:var(--fg-muted)}
body.dragging::after{
  content:"Datei loslassen zum Importieren"; position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; font-size:1.2rem; font-weight:650; color:var(--accent);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border:3px dashed var(--accent); pointer-events:none;
}

/* ===== Punkte ===== */
.score-panel .panel-head{margin-bottom:10px}
.score-big{font-size:2.4rem; font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--accent)}
.score-big small{font-size:.95rem; font-weight:500; color:var(--fg-muted); letter-spacing:0}
.score-bar{height:7px; background:var(--bg-sunken); border-radius:99px; overflow:hidden; margin:10px 0 8px}
.score-fill{height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .35s}
.score-legend{display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin-top:14px; font-size:.84rem}
.score-legend b{color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap}
.score-legend span{color:var(--fg-muted)}
.score-legend .aktiv b{color:var(--ok)}

/* ===== Tabelle ===== */
.table-wrap{overflow-x:auto; margin:0 -20px; padding:0 20px}
.vtable{width:100%; border-collapse:collapse; font-size:.9rem}
.vtable th{
  text-align:left; padding:8px 10px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--fg-faint); border-bottom:1px solid var(--line); font-weight:600;
}
.vtable td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.vtable tr:last-child td{border-bottom:0}
.vtable tbody tr:hover{background:var(--bg-sunken)}
.vtable td:first-child{font-weight:550}
.box-pill{display:inline-block; min-width:22px; text-align:center; border-radius:6px; padding:1px 6px; font-size:.75rem; font-weight:600; background:var(--bg-sunken); color:var(--fg-muted)}
.box-pill.b4,.box-pill.b5{background:var(--ok-soft); color:var(--ok)}
.box-pill.b1{background:var(--bad-soft); color:var(--bad)}
.mini-actions{display:flex; gap:4px; justify-content:flex-end}
.mini{border:0; background:transparent; cursor:pointer; padding:4px 6px; border-radius:6px; font-size:.9rem; opacity:.6}
.mini:hover{background:var(--bg-sunken); opacity:1}
.empty{text-align:center; padding:50px 20px; color:var(--fg-muted); background:var(--bg-elev); border:1px dashed var(--line-strong); border-radius:var(--radius)}
.empty .btn{margin-top:14px}

/* ===== Übungsleiste ===== */
.practice-bar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:16px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
}
.pb-group{display:flex; align-items:center; gap:9px}
.pb-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-faint); font-weight:600}
.seg{display:flex; background:var(--bg-sunken); border-radius:var(--radius-sm); padding:2px}
.seg button{
  padding:5px 11px; border:0; background:transparent; border-radius:7px;
  font:inherit; font-size:.83rem; font-weight:550; color:var(--fg-muted); cursor:pointer;
}
.seg button:hover{color:var(--fg)}
.seg button.active{background:var(--accent); color:var(--accent-fg)}
.pb-toggle{display:flex; align-items:center; gap:7px; font-size:.85rem; cursor:pointer}
.pb-toggle input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer}
.pb-toggle span{color:var(--fg-muted)}
.pb-toggle input:checked + span{color:var(--fg); font-weight:550}
.train-foot{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.undo-btn{padding:5px 12px; font-size:.83rem}

/* ===== Training ===== */
.progress{height:5px; background:var(--bg-sunken); border-radius:99px; overflow:hidden; margin-bottom:7px}
.progress-bar{height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .3s}
.progress-label{font-size:.78rem; color:var(--fg-muted); margin-bottom:18px}

.flashcard{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:36px 30px; text-align:center; min-height:230px;
  display:flex; flex-direction:column; justify-content:center; gap:20px;
}
.fc-side{display:flex; flex-direction:column; align-items:center; gap:12px}
.fc-back{border-top:1px solid var(--line); padding-top:22px}
.fc-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--fg-faint); font-weight:600}
.fc-word{font-size:2.1rem; font-weight:650; letter-spacing:-.02em; line-height:1.2}
.fc-example{color:var(--fg-muted); font-style:italic; font-size:.95rem}
.fc-ipa{font-family:ui-monospace,Menlo,monospace; font-size:1rem; color:var(--fg-muted); letter-spacing:.02em}
.fc-ipa::before{content:"["} .fc-ipa::after{content:"]"}
.ipa-cell{font-family:ui-monospace,Menlo,monospace; font-size:.8rem; color:var(--fg-muted)}
.fc-cloze{font-size:1.25rem; line-height:1.6; color:var(--fg)}
.fc-cloze .gap{display:inline-block; min-width:80px; border-bottom:2px solid var(--accent);
  margin:0 4px; vertical-align:baseline}
.train-actions{display:flex; justify-content:center; gap:12px; margin:22px 0 10px; flex-wrap:wrap}
.grade-actions{display:flex; gap:12px}
#trainMeta{text-align:center}

.answer-box{display:flex; gap:10px; margin:18px auto 0; max-width:520px}
.answer-box input{flex:1; padding:12px 16px; font-size:1rem; text-align:center}
.answer-result{text-align:center; margin-top:14px; display:flex; flex-direction:column; align-items:center; gap:6px}
.ar-verdict{font-size:1.05rem; font-weight:650}
.ar-verdict.ok{color:var(--ok)} .ar-verdict.near{color:var(--warn)} .ar-verdict.bad{color:var(--bad)}
.ar-solution{color:var(--fg-muted)}
.ar-solution b{color:var(--fg)}
.ar-actions{display:flex; gap:10px; margin-top:6px}

/* ===== Aussprache ===== */
.pron-card{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:34px 30px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:18px;
}
.pron-controls{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; justify-content:center}
.pron-live{display:flex; align-items:center; gap:10px; color:var(--accent); font-weight:550; font-size:.9rem}
.pulse{width:11px; height:11px; border-radius:50%; background:var(--bad); animation:pulse 1.1s infinite}
@keyframes pulse{0%{transform:scale(.85); opacity:1} 70%{transform:scale(1.5); opacity:.25} 100%{transform:scale(.85); opacity:1}}

.pron-result{
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; margin-bottom:18px; box-shadow:var(--shadow);
}
.score-ring{
  --score:0; --ring:var(--accent);
  width:118px; height:118px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:baseline; justify-content:center; gap:1px;
  background:conic-gradient(var(--ring) calc(var(--score)*1%), var(--bg-sunken) 0);
  position:relative;
}
.score-ring::before{content:""; position:absolute; inset:9px; border-radius:50%; background:var(--bg-elev)}
.score-value{position:relative; font-size:2.1rem; font-weight:700; letter-spacing:-.03em; align-self:center}
.score-unit{position:relative; font-size:.9rem; color:var(--fg-muted); align-self:center; margin-top:10px}
.score-detail{flex:1; min-width:230px; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.score-verdict{font-size:1.15rem; font-weight:650}
.score-heard strong{font-family:ui-monospace,Menlo,monospace}
.diff{font-size:1.15rem; letter-spacing:.02em; font-family:ui-monospace,Menlo,monospace}
.diff .ok{color:var(--ok)} .diff .bad{color:var(--bad); text-decoration:underline wavy var(--bad); text-underline-offset:4px}
.pron-board{display:flex; flex-direction:column; gap:7px}
.pb-row{display:flex; align-items:center; gap:12px; font-size:.88rem}
.pb-row .pb-word{flex:0 0 34%; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pb-track{flex:1; height:7px; background:var(--bg-sunken); border-radius:99px; overflow:hidden}
.pb-fill{height:100%; border-radius:99px; background:var(--ok)}
.pb-fill.mid{background:var(--warn)} .pb-fill.low{background:var(--bad)}
.pb-val{width:44px; text-align:right; color:var(--fg-muted); font-variant-numeric:tabular-nums}

/* ===== Vergleichsmodus (ohne Spracherkennung) ===== */
.compare{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:18px; box-shadow:var(--shadow);
}
.compare-head{margin-bottom:16px}
.compare-head h2{margin-bottom:4px}
.compare-tracks{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px}
.track{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:14px; background:var(--bg-sunken); border-radius:var(--radius-sm);
}
.t-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-faint); font-weight:600}
.compare-actions{display:flex; gap:10px; flex-wrap:wrap}
.compare.recording .track:nth-child(2){outline:2px solid var(--bad); outline-offset:-2px}
.self-rate{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.self-rate > span{font-weight:600; font-size:.9rem}
.self-mark{font-size:.8rem; font-weight:600}
.self-mark.gut{color:var(--ok)} .self-mark.fast{color:var(--warn)} .self-mark.nochmal{color:var(--bad)}

/* ===== Browser-Diagnose ===== */
.diag{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; align-items:baseline; font-size:.9rem}
.diag .d-state{font-weight:700; white-space:nowrap}
.diag .d-yes{color:var(--ok)} .diag .d-no{color:var(--bad)} .diag .d-meh{color:var(--warn)}
.diag .d-label small{display:block; color:var(--fg-muted); font-size:.8rem; font-weight:400}
.diag-help{
  margin-top:16px; padding:16px; border-radius:var(--radius-sm);
  background:var(--warn-soft); border:1px solid var(--line); font-size:.9rem; line-height:1.65;
}
.diag-help h3{font-size:.95rem; margin-bottom:8px}
.diag-help ol{margin:8px 0 0; padding-left:20px}
.diag-help li{margin-bottom:5px}
.diag-help code{background:var(--bg-elev); user-select:all}

/* ===== Decks / Hilfe ===== */
.deck-list{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.deck-row{display:flex; align-items:center; gap:12px; padding:11px 13px; background:var(--bg-sunken); border-radius:var(--radius-sm)}
.deck-row.active{outline:2px solid var(--accent); outline-offset:-2px}
.deck-row b{font-weight:600}
.deck-row .flag{font-size:1.1rem}
.deck-row .spacer{margin-left:auto; color:var(--fg-muted); font-size:.82rem}
.deck-form{display:grid; grid-template-columns:1fr 180px auto; gap:10px}

.cmd-table{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; align-items:baseline}
.cmd-row{display:contents}
/* Tasten einer Zeile bilden eine Einheit — sonst sprengen zwei Tasten das Raster */
.cmd-row .keys{display:flex; align-items:baseline; gap:4px; white-space:nowrap}
.cmd-row .phrases{display:flex; flex-wrap:wrap; gap:5px}
.cmd-row .phrases em{font-size:.83rem}
.cmd-row > span{color:var(--fg-muted); font-size:.9rem}
.cmd-group{grid-column:span 2; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-faint); font-weight:600; margin-top:10px}

/* ===== Bedienleiste (Mikrofon + Befehlszeile) ===== */
.mic-dock{
  display:flex; flex-direction:column; gap:8px;
  padding:10px; margin-bottom:10px;
  background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--radius);
}
.mic-row{display:flex; align-items:center; gap:10px; min-width:0}
.mic-btn{
  position:relative; width:38px; height:38px; flex:0 0 auto; border-radius:50%;
  border:0; background:var(--bg-elev); cursor:pointer; font-size:1rem;
  display:grid; place-items:center; transition:background .15s;
}
.mic-btn:hover{background:var(--line)}
.mic-ring{position:absolute; inset:0; border-radius:50%; pointer-events:none}
.mic-dock.on .mic-btn{background:var(--bad)}
.mic-dock.on .mic-ring{box-shadow:0 0 0 0 rgba(211,58,58,.5); animation:ring 1.6s infinite}
.mic-dock.pron .mic-btn{background:var(--accent)}
.mic-dock.pron .mic-ring{box-shadow:0 0 0 0 rgba(79,70,229,.5); animation:ring 1.6s infinite}
@keyframes ring{to{box-shadow:0 0 0 14px rgba(211,58,58,0)}}
.mic-info{display:flex; flex-direction:column; min-width:0; flex:1}
.mic-state{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-faint); font-weight:600}
.mic-transcript{font-size:.85rem; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mic-dock.on .mic-state{color:var(--bad)}
.mic-dock.pron .mic-state{color:var(--accent)}
.cmd-input{
  width:100%; padding:7px 12px; font-size:.85rem; border-radius:var(--radius-sm);
  background:var(--bg-elev); border:1px solid var(--line);
}
.cmd-input:focus{border-color:var(--accent)}
/* Ohne Spracherkennung ist die Tastatur der Hauptweg */
.mic-dock.no-speech .mic-row{display:none}

/* ===== Vorschlagsformular ===== */
.vs-arten{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.vs-art{display:flex; align-items:center; gap:8px; padding:9px 14px; cursor:pointer;
  background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--radius-sm)}
.vs-art:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.vs-art input{accent-color:var(--accent); width:15px; height:15px}
.vs-art span{font-size:.9rem; margin:0}
#vorschlagForm label{display:block; margin-bottom:16px}
.vs-fehlerfelder{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:820px){ .vs-fehlerfelder{grid-template-columns:1fr} }

/* ===== Impressum ===== */
.imp-link{
  display:block; margin-top:14px; padding:0; border:0; background:none;
  font:inherit; font-size:.78rem; color:var(--fg-faint); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.imp-link:hover{color:var(--fg-muted)}
.seitenfuss{
  margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
}
.foot-links{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot-links .imp-link{margin-top:0; font-size:.82rem}
.imp-innerlink{color:var(--accent)}
.dse-table{display:grid; grid-template-columns:auto 1fr; gap:12px 18px; align-items:baseline}
.dse-row{display:contents}
.dse-row b{font-size:.88rem; white-space:nowrap}
.dse-row span{color:var(--fg-muted); font-size:.9rem; line-height:1.65}
.dse-row.dse-warn b{color:var(--warn)}
.imp-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.imp-name{font-weight:650; margin-bottom:4px}
.imp-addr{font-style:normal; color:var(--fg-muted); line-height:1.7}
.imp-mail{font-family:ui-monospace,Menlo,monospace}
.imp-text{color:var(--fg-muted); line-height:1.7; margin-bottom:12px; max-width:68ch}
.imp-text:last-child{margin-bottom:0}
.imp-text strong{color:var(--fg)}
.imp-warn{
  padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--warn-soft); border:1px solid var(--line);
}
#view-impressum a{color:var(--accent)}
@media (max-width:820px){ .imp-grid{grid-template-columns:1fr} }

/* ===== Toasts ===== */
.toast-wrap{position:fixed; top:18px; right:18px; display:flex; flex-direction:column; gap:9px; z-index:80}
.toast{
  background:var(--bg-elev); border:1px solid var(--line-strong); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:11px 16px; box-shadow:var(--shadow);
  font-size:.9rem; max-width:330px; animation:slide .22s ease-out;
}
.toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)} .toast.warn{border-left-color:var(--warn)}
.toast b{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-faint); margin-bottom:2px}
@keyframes slide{from{opacity:0; transform:translateX(20px)}}

/* ===== Responsive ===== */
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px; padding:12px}
  .brand small{display:none}
  .nav{flex-direction:row; flex-wrap:wrap; flex:1}
  .nav-item kbd{display:none}
  .nav-item span{width:auto}
  .deck-picker{flex:1 1 180px}
  .sidebar-foot{display:none}
  .main{padding:22px 16px 40px}
  .add-form, .card-row, .deck-form{grid-template-columns:1fr}
  .add-form label:nth-child(3), .add-form button{grid-column:span 1}
  .fc-word{font-size:1.65rem}
}