/* Zusätzliche Komponenten: Trainingsübersicht, Quiz, Anhang-Vorschau, Mail-Editor */
.header-actions{display:flex;gap:9px;align-items:center;margin-left:auto;flex:none}
.top-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;padding:9px 12px;border:1px solid var(--line);border-radius:22px;color:var(--ink);background:var(--card,#fff);font-weight:600;font-size:12px}
.top-btn:hover{background:var(--hover,#e9f0fa)}
.content-col{min-width:0}
.nav-divider{height:1px;background:var(--line);margin:16px 12px}
.nav-icon{width:18px;font-size:18px;text-align:center;flex-shrink:0}
.folder-extra{font-size:13px}
.folder-extra.active{background:var(--accentlite)}
.sidebar-note{color:var(--muted);font-size:11px;line-height:1.6;padding:9px 17px;max-width:225px}
.list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:24px}
.lesson-tag{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:11px;line-height:1.4;padding:5px 9px;border-radius:100px;color:var(--muted);background:var(--pill,#eef2f8);font-weight:600}
.lesson-badge{color:#164a8c;background:#e4efff;margin-bottom:11px}
.tag-correct{color:#176c48;background:#e0f5e8}
.tag-muted{color:var(--muted);background:var(--pill,#eef2f8)}
.list-attachment{font-size:12px}
.generic-logo{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:#eff3f8;color:#39537b;font-size:21px;font-weight:700;margin:0 0 23px}
.attachments{border-top:1px solid var(--line);margin-top:30px;padding-top:21px}
.attachments h3{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 12px}
.attachment-tile{width:100%;display:flex;align-items:center;gap:13px;text-align:left;background:var(--muted-surface,#f8fafd);border:1px solid var(--line);border-radius:10px;padding:14px;color:var(--ink)}
.attachment-tile:hover{border-color:#9abbea;background:var(--hover,#eff5fe)}
.attachment-symbol{display:grid;place-items:center;width:45px;height:45px;background:var(--card,#fff);border-radius:10px;font-size:24px;flex:none}
.attachment-meta{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}
.attachment-meta small{font-size:11px;color:var(--muted);font-weight:400}
.attachment-open{color:var(--accent);font-size:12px;margin-left:auto;white-space:nowrap;font-weight:700}
.lesson{border-top:1px solid var(--line);margin-top:26px;padding:24px 0 0}
.lesson h3{font-weight:600;margin:2px 0 17px;font-size:17px;line-height:1.45}
.answer-options{display:grid;gap:8px}
.answer-option{border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);border-radius:9px;padding:13px 15px;text-align:left;line-height:1.4;font-size:13px}
.answer-option:hover:not(:disabled){border-color:#7fa9e8;background:var(--hover,#f1f6ff)}
.answer-option:disabled{cursor:default;opacity:.8}
.answer-option.answer-right{border-color:#33a473;background:var(--correct-bg,#eafaf2);font-weight:600}
.answer-option.answer-wrong{border-color:#c67a74;background:var(--wrong-bg,#fff0ed)}
.quiz-hint{font-size:11px!important;color:var(--muted)!important;margin:12px 0 0!important}
.lesson-feedback{border-radius:9px;background:var(--correct-bg,#eafaf2);border:1px solid #a4d3bb;padding:14px 16px;margin-top:13px;color:var(--ink)}
.lesson-feedback.negative{background:var(--wrong-bg,#fff0ed);border-color:#e5bbb2}
.lesson-feedback strong{font-size:13px}
.lesson-feedback p{font-size:13px!important;line-height:1.55!important;color:var(--ink)!important;margin:8px 0 0!important}
.training-hub{padding:33px 39px 48px}
.hub-top{display:flex;align-items:center;justify-content:space-between;gap:22px}
.hub-top h1{font-size:clamp(25px,2.7vw,33px);font-weight:500;letter-spacing:-.8px;margin:13px 0 12px;line-height:1.2}
.hub-top p{color:var(--muted);line-height:1.65;margin:0 0 10px;max-width:640px}
.primary-action{border:none;border-radius:9px;background:var(--accent);color:white;font-size:13px;font-weight:700;padding:13px 17px;white-space:nowrap}
.primary-action:hover{filter:brightness(.92)}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:29px 0 19px}
.metric{background:var(--muted-surface,#f8fafd);border:1px solid var(--line);border-radius:13px;padding:19px 21px;display:flex;flex-direction:column;gap:10px}
.metric strong{font-size:27px;letter-spacing:-.8px;font-weight:600}
.metric span{font-size:12px;color:var(--muted)}
.progress-card{border:1px solid var(--line);border-radius:13px;padding:19px 21px}
.progress-label{display:flex;justify-content:space-between;gap:13px;align-items:center;font-size:13px}
.progress-label span{color:var(--muted);font-size:12px}
.progress-track{width:100%;height:9px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:17px}
.progress-track span{height:100%;background:#3484e6;display:block;border-radius:inherit;transition:width .2s}
.progress-card p{font-size:11px;color:var(--muted);margin:13px 0 0;line-height:1.6}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:29px 0 13px}
.section-heading h2{font-size:19px;font-weight:600;margin:0}
.section-heading span{font-size:12px;color:var(--muted)}
.case-list{border:1px solid var(--line);border-radius:13px;overflow:hidden}
.case{display:flex;width:100%;gap:13px;align-items:center;padding:15px 16px;border:0;border-bottom:1px solid var(--line);background:var(--card,#fff);color:var(--ink);text-align:left}
.case:last-child{border-bottom:0}
.case:hover{background:var(--hover,#eff5fe)}
.case-avatar{width:39px;height:39px;display:grid;place-items:center;flex:none;background:var(--accentlite);color:var(--accent);border-radius:50%;font-weight:700}
.case-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.case-content small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.case>.lesson-tag{margin-right:5px}
.privacy-note{color:var(--muted);font-size:11px;margin:18px 1px 0;line-height:1.6}
.draft-line{padding:16px 25px;border:0;border-bottom:1px solid var(--line);background:var(--card,#fff);width:100%;display:flex;gap:20px;text-align:left;color:var(--ink)}
.draft-line:hover{background:var(--hover,#eff5fe)}
.draft-line span{color:var(--muted)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 9px}
.modal-icon{font-size:29px}
.attachment-dialog{max-width:610px;text-align:left}
.attachment-dialog h2{margin:0 0 7px;font-size:24px}
.attachment-dialog .modal-sub{font-size:12px;color:var(--muted);margin:0 0 16px}
.attachment-preview{border:1px solid var(--line);background:var(--muted-surface,#f8fafd);padding:18px;border-radius:9px;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.attachment-choices{margin:18px 0}
.attachment-choices>p{color:var(--ink);font-size:13px}
.attachment-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.attachment-choices .lesson-feedback{margin-bottom:12px}
.editor-dialog{width:min(680px,calc(100vw - 24px));max-height:calc(100vh - 36px);overflow:auto;background:var(--card,#fff);padding:29px 32px 30px;border-radius:16px;box-shadow:0 15px 80px #0004}
.editor-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.editor-head .eyebrow{font-size:11px;color:var(--muted)}
.editor-head h2{margin:6px 0 0;font-weight:600;font-size:23px}
.editor-explainer{font-size:12px;color:var(--muted);line-height:1.6;margin:13px 0 23px}
.editor-explainer code{background:var(--muted-surface,#f8fafd);padding:2px 4px;border-radius:5px}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.editor-grid label,.editor-full{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted);font-weight:600}
.editor-grid input,.editor-grid select,.editor-full textarea,.editor-full input,.domain-field{border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);border-radius:8px;padding:12px;min-width:0;outline-offset:2px;width:100%}
.editor-grid input:focus,.editor-grid select:focus,.editor-full textarea:focus,.editor-full input:focus{border-color:#83afe4}
.domain-field{display:flex;gap:3px;align-items:center;overflow:hidden;padding:0 9px}
.domain-field input{padding:12px 4px;border:0;width:43%;flex:1;min-width:40px}
.domain-field span{white-space:nowrap;color:var(--muted);font-size:11px}
.editor-full{margin-top:16px}
.editor-full textarea{resize:vertical;min-height:110px}
.editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
@media(max-width:980px){.app-header{flex-wrap:wrap}.searchbox{max-width:none;flex:1;min-width:200px}.header-actions{margin-left:0}.top-btn span:not(#themeIcon):not(#themeText){display:none}}
@media(max-width:650px){.training-hub{padding:23px 17px}.hub-top{align-items:flex-start;flex-direction:column}.metric-grid{gap:7px}.metric{padding:14px 9px}.metric strong{font-size:23px}.metric span{font-size:10px}.editor-dialog{padding:22px 17px}.editor-grid{grid-template-columns:1fr}.attachment-dialog{padding:24px 18px}.attachment-buttons{grid-template-columns:1fr}.top-btn{padding:9px}.top-btn #themeText{display:none}.list-heading .lesson-tag{display:none}}
@media print{.header-actions,.sidebar,.lesson,.attachments,.training-banner{display:none!important}}
/* Mobile Ordnerleiste bleibt kompakt, auch mit Trainingsfunktionen. */
@media(max-width:860px){
  .sidebar{align-items:center;align-self:start;min-height:0}
  .sidebar .compose{align-self:center;min-height:42px;height:auto}
  .sidebar .nav-divider,.sidebar .sidebar-note{display:none}
  .sidebar .folder-extra{min-height:41px}
}