:root{
  --bg:#eef2f6;
  --panel:#ffffff;
  --panel-2:#f7f9fb;
  --text:#17212d;
  --muted:#697789;
  --border:#d8e0e8;
  --navy:#10263a;
  --navy-2:#183a57;
  --red:#c91d1d;
  --red-2:#9f1515;
  --blue:#3f7fb9;
  --orange:#cb792c;
  --green:#3b8b63;
  --purple:#755aa7;
  --yellow:#b68a25;
  --pink:#a64f79;
  --gray:#778491;
  --shadow:0 12px 34px rgba(16,38,58,.09);
  --shadow-soft:0 5px 18px rgba(16,38,58,.06);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:13px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  line-height:1.55;
}
button,input,select{font:inherit}
a{color:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{
  background:linear-gradient(180deg,var(--navy),#091823);
  color:#fff;
  padding:26px 18px;
  position:sticky;top:0;height:100vh;
  overflow:auto;
}
.brand{padding:0 8px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand .kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#9fb1c1}
.brand .title{font-weight:800;font-size:1.34rem;line-height:1.18;margin-top:7px}
.brand .sub{font-size:.86rem;color:#aebdca;margin-top:5px}
.nav-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:#7790a6;margin:24px 10px 9px}
.nav-btn{
  width:100%;border:0;background:transparent;color:#dbe5ed;
  border-radius:12px;padding:11px 12px;display:flex;gap:11px;align-items:center;
  cursor:pointer;text-align:left;margin:3px 0;transition:.15s ease;
}
.nav-btn:hover,.nav-btn.active{background:rgba(255,255,255,.1);color:#fff}
.nav-dot{width:10px;height:10px;border-radius:50%;background:#fff;flex:0 0 auto}
.sidebar-tools{display:grid;gap:8px;margin-top:24px}
.sidebar-action{
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:#fff;
  border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left
}
.sidebar-action:hover{background:rgba(255,255,255,.1)}
.offline-note{
  margin-top:24px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);
  color:#b9c8d5;border-radius:14px;padding:12px;font-size:.8rem
}
.main{padding:30px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.topbar h1,.topbar h2{margin:0;line-height:1.12}
.topbar h1{font-size:1.9rem}
.topbar p{margin:5px 0 0;color:var(--muted)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:12px;padding:10px 13px;cursor:pointer;box-shadow:var(--shadow-soft);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.hero{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;border-radius:var(--radius-xl);padding:25px 26px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-bottom:20px;
}
.hero h2{margin:0;font-size:1.45rem}
.hero p{margin:8px 0 0;color:#c5d2de;max-width:820px}
.hero-badge{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);
  border-radius:999px;padding:9px 13px;font-weight:700;white-space:nowrap}
.toolbar{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px;display:grid;grid-template-columns:minmax(230px,1fr) 190px 190px;
  gap:10px;box-shadow:var(--shadow-soft);margin-bottom:20px
}
.toolbar input,.toolbar select{
  width:100%;border:1px solid var(--border);background:#fff;color:var(--text);
  border-radius:11px;padding:11px 12px;outline:none
}
.toolbar input:focus,.toolbar select:focus{border-color:#89a5bf;box-shadow:0 0 0 3px rgba(63,127,185,.1)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:15px;padding:15px}
.stat-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stat-value{font-size:1.55rem;font-weight:850;margin-top:4px}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:26px 0 12px}
.section-title h3{margin:0;font-size:1.2rem}.section-title span{font-size:.88rem;color:var(--muted)}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.category-card{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:17px;
  min-height:125px;cursor:pointer;transition:.16s ease
}
.category-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.category-bar{height:5px;border-radius:999px;margin-bottom:14px}
.category-card strong{display:block}.category-card small{display:block;color:var(--muted);margin-top:5px}
.lesson-list{display:grid;gap:12px}
.lesson-card{
  background:var(--panel);border:1px solid var(--border);border-radius:17px;padding:16px;
  display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:center;box-shadow:var(--shadow-soft)
}
.lesson-code{
  min-height:74px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.12rem;font-weight:850;padding:8px
}
.lesson-card h4{margin:0 0 4px;font-size:1.06rem}.lesson-card p{margin:0;color:var(--muted);font-size:.92rem}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.tag{background:#edf2f6;border:1px solid #e0e7ed;color:#415064;border-radius:999px;padding:4px 8px;font-size:.76rem}
.empty{background:var(--panel);border:1px dashed var(--border);border-radius:16px;padding:26px;text-align:center;color:var(--muted)}
/* Detail */
.detail-page{max-width:1220px;margin:0 auto}
.detail-hero{
  border-radius:var(--radius-xl);overflow:hidden;display:grid;grid-template-columns:175px 1fr;
  background:var(--panel);box-shadow:var(--shadow);margin-bottom:16px
}
.detail-code{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:2.5rem;min-height:150px}
.detail-head{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;padding:27px 30px;display:flex;flex-direction:column;justify-content:center}
.detail-head .eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;color:#aebdcc;margin-bottom:6px}
.detail-head h1{margin:0;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05}
.detail-head p{margin:9px 0 0;color:#cbd6df}
.meta-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.meta-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px 14px}
.meta-card span{display:block;color:var(--muted);font-size:.73rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.meta-card strong{font-size:.98rem}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px;align-items:start}
.stack{display:grid;gap:18px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.panel-head{background:var(--panel-2);border-bottom:1px solid var(--border);padding:14px 18px;font-weight:800;display:flex;align-items:center;gap:9px}
.panel-body{padding:18px}
.dispatch{margin-top:15px;border:1px solid #efc8c8;border-left:5px solid var(--red);background:#fff5f5;border-radius:12px;padding:14px}
.dispatch .mini{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--red-2);font-weight:850}
.dispatch .big{font-size:1.35rem;font-weight:900;margin:2px 0}
.check-list,.plain-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.check-list li{padding-left:25px;position:relative}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.fwdv-card{border:1px solid var(--border);border-radius:12px;padding:13px 14px;background:#fff}
.fwdv-card + .fwdv-card{margin-top:10px}.fwdv-card strong{display:block;color:var(--navy);margin-bottom:4px}.fwdv-card span{color:var(--muted);font-size:.93rem}
.prep-item{display:flex;gap:11px;align-items:flex-start;cursor:pointer;margin:10px 0}
.prep-item input{width:20px;height:20px;margin-top:2px;accent-color:var(--red);cursor:pointer;flex:0 0 auto}
.timeline{display:grid}.timeline-step{display:grid;grid-template-columns:52px 1fr;gap:13px;position:relative;padding-bottom:17px}
.timeline-step:last-child{padding-bottom:0}.timeline-step:after{content:"";position:absolute;left:25px;top:49px;bottom:0;width:2px;background:#dfe5eb}
.timeline-step:last-child:after{display:none}
.step-num{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}
.step-title{font-weight:850;margin-top:2px}.step-text{color:var(--muted);margin-top:2px}
.callout{border-radius:13px;padding:13px 14px;border:1px solid;margin-bottom:10px}
.callout.info{background:#eaf2f9;border-color:#cad9e6}.callout.warn{background:#fff7df;border-color:#ecd8a1}.callout.danger{background:#fff1f1;border-color:#efc7c7}
details{border:1px solid var(--border);border-radius:12px;background:var(--panel);overflow:hidden}
details+details{margin-top:8px}summary{cursor:pointer;padding:12px 14px;font-weight:800;background:var(--panel-2)}details .inside{padding:12px 14px;color:var(--muted)}
/* Modes */
body.dark{
  --bg:#0d151d;--panel:#15212b;--panel-2:#192732;--text:#edf4fa;--muted:#9dabb8;--border:#2b3b49;--shadow:0 12px 34px rgba(0,0,0,.24);--shadow-soft:0 5px 18px rgba(0,0,0,.18)
}
body.dark .toolbar input,body.dark .toolbar select,body.dark .fwdv-card{background:#101a22;color:#edf4fa}
body.dark .tag{background:#21303c;border-color:#2e414f;color:#d0dbe4}
body.einsatz{--bg:#07090b;--panel:#101317;--panel-2:#15191e;--text:#fff;--muted:#b7bec6;--border:#2c3238;--shadow:none;--shadow-soft:none}
body.einsatz .sidebar{background:#06080a}
body.einsatz .detail-head,body.einsatz .hero{background:#0b0e11}
body.einsatz .lesson-code,body.einsatz .detail-code,.einsatz .step-num{box-shadow:0 0 0 2px rgba(255,255,255,.08)}
body.einsatz .toolbar input,body.einsatz .toolbar select,body.einsatz .fwdv-card{background:#0c1014;color:#fff}
@media(max-width:1050px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.main{padding:18px}.category-grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.meta-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.toolbar{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.category-grid{grid-template-columns:1fr}.lesson-card{grid-template-columns:72px 1fr}.lesson-card .btn{grid-column:1/-1;justify-content:center}.detail-hero{grid-template-columns:1fr}.detail-code{min-height:88px;font-size:2rem}.meta-grid{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start;flex-direction:column}.hero{grid-template-columns:1fr}}
@media print{.sidebar,.top-actions,.sidebar-tools,.offline-note{display:none!important}.app-shell{display:block}.main{padding:0}.panel,.detail-hero,.meta-card{box-shadow:none}.panel{break-inside:avoid}.btn{display:none!important}}


/* ===== Verbesserte Lesbarkeit im Dunkel- und Einsatzmodus ===== */
body.dark .panel-head,
body.einsatz .panel-head{
  color:var(--text);
}

body.dark .fwdv-card,
body.einsatz .fwdv-card{
  background:#101a22;
  border-color:#2d4050;
}

body.dark .fwdv-card strong,
body.einsatz .fwdv-card strong{
  color:#8fc6f0;
}

body.dark .fwdv-card span,
body.einsatz .fwdv-card span{
  color:#d4dde5;
}

body.dark .dispatch,
body.einsatz .dispatch{
  background:#2a1518;
  border-color:#6d2c32;
  border-left-color:#e04a4a;
  color:#f6f7f8;
}

body.dark .dispatch .mini,
body.einsatz .dispatch .mini{
  color:#ff9a9a;
}

body.dark .dispatch .big,
body.einsatz .dispatch .big{
  color:#ffffff;
}

body.dark .callout.info,
body.einsatz .callout.info{
  background:#152838;
  border-color:#36556d;
  color:#edf5fb;
}

body.dark .callout.warn,
body.einsatz .callout.warn{
  background:#302711;
  border-color:#6f5b25;
  color:#fff4cf;
}

body.dark .callout.danger,
body.einsatz .callout.danger{
  background:#321719;
  border-color:#6e3337;
  color:#ffe3e3;
}

body.dark details,
body.einsatz details{
  background:#101a22;
  border-color:#2d4050;
}

body.dark summary,
body.einsatz summary{
  background:#172631;
  color:#eef4fa;
}

body.dark details .inside,
body.einsatz details .inside{
  color:#d2dbe3;
}

body.dark .step-text,
body.einsatz .step-text{
  color:#c3ced7;
}

body.dark .meta-card strong,
body.einsatz .meta-card strong{
  color:#ffffff;
}