*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#0a2f59;background:#f4f7fb}.layout{display:flex;min-height:100vh}.sidebar{width:240px;background:#0c3a67;color:#fff;padding:16px 10px;display:flex;flex-direction:column}.brand{font-size:22px;font-weight:700;padding:2px 8px 26px}.brand span{background:white;color:#0c3a67;border-radius:4px;padding:4px 6px;font-size:14px}.sidebar nav a{display:block;color:white;text-decoration:none;padding:12px 12px;border-radius:8px;margin:3px 0}.sidebar nav a.active,.sidebar nav a:hover{background:#294f77}.main{flex:1}.topbar{height:64px;background:white;border-bottom:1px solid #dfe6ee;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#111}.badge{background:#eaf1f8;border-radius:12px;padding:4px 10px;font-size:12px}.userbox{text-align:right}.userbox small{color:#67798e}.content{padding:28px 5%}h1{font-size:34px;margin:0 0 6px}.lead{color:#6e7f92;margin-top:0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:22px 0}.card,.panel{background:white;border:1px solid #e1e7ee;border-radius:13px;box-shadow:0 8px 24px rgba(28,56,84,.05)}.card{padding:22px}.card span,.card small{display:block;color:#65788e}.card strong{display:block;font-size:38px;margin:8px 0}.grid2{display:grid;grid-template-columns:1.1fr 1.1fr;gap:18px}.panel{padding:20px;margin:18px 0}.panel h2{font-size:20px;margin-top:0;color:#111}.statusrow{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #e6ecf2;color:#111}.ok{background:#e7f7ec;color:#0a7b35;padding:4px 9px;border-radius:12px;font-size:12px}.done{color:#0a7b35}.flash{padding:12px 14px;border-radius:9px;margin-bottom:16px}.flash.success{background:#eaf8ee;color:#176b37}.flash.error{background:#fdeaea;color:#a32727}.panel.warning{background:#fff7df;border-color:#f0d68b;color:#624d08}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.formgrid.cols3{grid-template-columns:repeat(3,1fr)}.formgrid.cols2{grid-template-columns:repeat(2,1fr)}label{display:flex;flex-direction:column;gap:7px;font-weight:700;color:#111}input,select{padding:11px;border:1px solid #bcc9d6;border-radius:7px;background:white;font:inherit}.formactions{display:flex;align-items:end}.formactions button,button,.btn{background:#0f4a80;color:#fff;border:0;border-radius:7px;padding:11px 18px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}button.small{padding:7px 10px;font-size:12px}.btn.secondary{background:#244f78}.inline{display:flex;gap:8px;align-items:center}table{width:100%;border-collapse:collapse;color:#111}th,td{text-align:left;padding:12px;border-bottom:1px solid #e4eaf0;vertical-align:top}th{font-size:13px;color:#526579;background:#f8fafc}.status{display:inline-block;padding:4px 8px;border-radius:12px;font-size:12px}.status.active{background:#e8f7ec;color:#15713c}.status.inactive{background:#eef1f4;color:#596879}.status.archived{background:#f9e9e9;color:#8d3333}.login-body{min-height:100vh;background:#f3f6fa;display:flex;align-items:center;justify-content:center;border-top:52px solid #123f6c}.login-card{width:460px;background:white;border-radius:12px;padding:34px;box-shadow:0 16px 40px rgba(0,0,0,.1)}.login-card h1{margin-bottom:18px}.login-card form{display:flex;flex-direction:column;gap:16px}.login-card button{align-self:flex-start}.titlebar{display:flex;justify-content:space-between}.panel small{font-weight:normal;color:#6b7b8d}@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.grid2,.formgrid.cols3{grid-template-columns:1fr}.sidebar{width:200px}}@media(max-width:700px){.layout{display:block}.sidebar{width:100%}.cards,.formgrid,.formgrid.cols2{grid-template-columns:1fr}.content{padding:18px}table{font-size:13px}}

.sidebar nav{flex:0 0 auto}.sidebar-bottom{margin-top:auto;padding-top:24px}.logout-link{display:block;color:#fff;text-decoration:none;padding:12px 12px;border-radius:8px;background:#153f66;border:1px solid rgba(255,255,255,.14)}.logout-link:hover{background:#294f77}

/* Hotfix v0.3.3: Logout dauerhaft sichtbar */
.sidebar{
    min-height:100vh;
    height:100vh;
    position:sticky;
    top:0;
    box-sizing:border-box;
}
.sidebar-bottom{
    margin-top:auto !important;
    padding-top:24px;
    padding-bottom:8px;
}
.logout-link{
    display:block;
    width:100%;
    box-sizing:border-box;
}

/* v0.3.5 Mitarbeiter bearbeiten */
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn.small{padding:7px 10px;font-size:12px}
.edit-panel{border-left:4px solid #0f4a80}

/* v0.3.7 lesbare Audit-Historie */
.history-table td{vertical-align:top}
.history-change{margin:0 0 4px 0}
.history-arrow{font-weight:700;padding:0 5px}
.history-reason{margin-top:4px}
.muted{opacity:.65}

/* v0.3.8 Niederlassungen bearbeiten */
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.edit-panel{border-left:4px solid #0f4a80}

/* v0.4.0 Benutzer & Rechte / Logout */
.user-meta{display:flex;gap:12px;align-items:center;justify-content:flex-end}
.top-logout{font-size:12px;color:#0f4a80;text-decoration:none;font-weight:700;border-left:1px solid #d8e0e8;padding-left:12px}
.top-logout:hover{text-decoration:underline}
.scope-box{margin:16px 0;padding:14px;border:1px solid #dce5ed;border-radius:9px;background:#f8fafc;color:#111}
.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.checkline{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:normal}
.checkline input{width:auto}
@media(max-width:900px){.scope-grid{grid-template-columns:1fr}.user-meta{gap:6px}}

/* v0.4.2 Mitarbeiter-Suche, A-Z, Filter und Pagination */
.employee-filter{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:12px;
    align-items:end;
    margin:16px 0 14px;
}
.employee-filter .search-wide{min-width:260px}
.filter-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap;grid-column:1/-1}
.alphabet{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin:10px 0 16px;
}
.alphabet a,.pagination a{
    display:inline-flex;
    min-width:32px;
    height:32px;
    align-items:center;
    justify-content:center;
    padding:0 9px;
    border:1px solid #ccd8e3;
    border-radius:6px;
    background:#fff;
    color:#0f4a80;
    text-decoration:none;
    font-weight:700;
    font-size:13px;
}
.alphabet a.active,.pagination a.active{
    background:#0f4a80;
    border-color:#0f4a80;
    color:#fff;
}
.pagination{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
    padding-top:18px;
}
.table-wrap{overflow-x:auto}
.employee-overview-head{display:flex;justify-content:space-between;align-items:flex-start}
@media(max-width:1100px){
    .employee-filter{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
    .employee-filter{grid-template-columns:1fr}
    .filter-actions{grid-column:auto}
}

/* v0.4.3 Benutzerübersicht */
.readonly-scope{background:#f3f6f9}


/* v0.5.0 Schulungsverwaltung */
.info-panel{
    border-left:4px solid #0f4a80;
    background:#f5f9fc;
}
.span2{grid-column:1/-1}
textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid #cbd5df;
    border-radius:6px;
    padding:10px;
    font:inherit;
    resize:vertical;
    background:#fff;
}
.training-note{
    margin-top:8px;
    font-size:13px;
    color:#5c6c7b;
}
@media(max-width:700px){
    .span2{grid-column:auto}
}


/* v0.5.2 Kapitel- und Inhaltseditor */
.chapter-card{
    border:1px solid #d6e0e8;
    border-radius:10px;
    padding:16px;
    margin:16px 0;
    background:#fff;
}
.chapter-card.is-archived,
.content-block.is-archived{
    opacity:.58;
    background:#f3f5f7;
}
.chapter-head,
.content-block-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}
.chapter-head h3{margin:0 0 5px}
.chapter-head p{margin:0;color:#637487}
.content-block{
    border-top:1px solid #e4ebf1;
    padding:14px 0;
    margin-top:12px;
}
.content-block:first-of-type{border-top:0}
.training-text{
    margin-top:12px;
    line-height:1.55;
    white-space:normal;
}
.training-media{
    margin-top:12px;
}
.training-media img{
    max-width:100%;
    max-height:650px;
    border-radius:8px;
    border:1px solid #d9e2ea;
}
.training-media video{
    width:min(100%,900px);
    max-height:650px;
    background:#111;
    border-radius:8px;
}
.training-block-form input[type="file"]{
    background:#fff;
    padding:10px;
    border:1px solid #cbd5df;
    border-radius:6px;
}
.block-field[hidden]{display:none!important}
@media(max-width:800px){
    .chapter-head,.content-block-head{flex-direction:column}
}

/* v0.6.0 Wissenstest-Editor */
.answer-editor{display:grid;gap:10px;margin:12px 0 18px}
.answer-row{display:grid;grid-template-columns:105px 1fr;gap:10px;align-items:center}
.correct-box{display:flex!important;align-items:center;gap:7px;font-weight:600}
.correct-box input{width:auto!important}
.question-card{border:1px solid #d6e0e8;border-radius:10px;padding:16px;margin:14px 0;background:#fff}
.question-card.is-archived{opacity:.58;background:#f3f5f7}
.question-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.answer-list{margin:14px 0 8px 22px;padding:0}
.answer-list li{padding:4px 7px;border-radius:5px}
.answer-list .correct-answer{background:#edf8ef}
.question-explanation{margin-top:12px;padding:10px 12px;background:#f4f7fa;border-left:3px solid #1b5b91;border-radius:4px}
@media(max-width:800px){.answer-row{grid-template-columns:1fr}.question-head{flex-direction:column}}

/* v0.7.0 – Lernbereich und Wissenstest */
.learning-card { margin-bottom: 18px; }
.progressbar { height: 12px; background: #e8edf2; border-radius: 999px; overflow: hidden; margin: 12px 0; }
.progressbar span { display: block; height: 100%; background: #1677b8; }
.status-pill { display: inline-block; padding: 5px 10px; border-radius: 999px; background: #e9f2f9; font-size: 13px; font-weight: 700; white-space: nowrap; }
.status-pill.alert { background: #fde8e8; }
.learner-block { border: 1px solid #dfe6ec; border-radius: 10px; padding: 16px; margin: 14px 0; }
.learner-block.done-block { background: #f7fbf8; }
.answer-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #dfe6ec; border-radius: 8px; padding: 12px; margin: 9px 0; cursor: pointer; }
.answer-option input { margin-top: 3px; width: auto; }
.result-pass { border-left: 5px solid #2b8a3e; }
.result-fail { border-left: 5px solid #c92a2a; }
.score-big { font-size: 38px; font-weight: 800; margin: 8px 0; }
.question-result { margin-bottom: 12px; }
.escalation-panel { margin-top: 20px; }

/* v0.8.0 – Mitarbeiterprofil, Schulungsstatus und klickbare Mitarbeiter */
.employee-row{transition:background .15s ease}
.employee-row:hover{background:#f1f6fb}
.employee-name-link{display:block;color:inherit;text-decoration:none;padding:4px 0}
.employee-name-link:hover b{color:#0b4a7f;text-decoration:underline}
.employee-status-cards{grid-template-columns:repeat(4,minmax(150px,1fr))}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.employee-training-table td{vertical-align:top}
.history-row{opacity:.68;background:#f7f8fa}
.result-label{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:700;font-size:13px}
.result-label.pass{background:#e7f6eb;color:#216b32}
.result-label.fail{background:#fdeaea;color:#a61e1e}
.muted-note{color:#617285;background:#f6f8fa;border-radius:8px;padding:10px 12px}
@media(max-width:900px){
  .employee-status-cards{grid-template-columns:repeat(2,minmax(140px,1fr))}
  .profile-actions{justify-content:flex-start}
}

/* v0.8.1 – Testzugänge / Mehrfach-Niederlassungen */
.test-access-panel{
  border:2px solid #1f7a4d;
  background:#f3fbf7;
}
.test-access-panel h2{margin-top:0}
.credential-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:14px 0;
}
.credential-grid input[readonly]{
  font-family:Consolas,Monaco,monospace;
  font-weight:700;
  letter-spacing:.03em;
  background:#fff;
  cursor:text;
}
.test-password-form{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #dfe5eb;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.scope-box .lead{margin:6px 0 10px;font-size:.94rem}
@media (max-width:760px){
  .credential-grid{grid-template-columns:1fr}
}