/* Logistikwerk Cockpit-Plattform — Design (LW-Marke, ohne externe Requests) */
:root{
  --navy:#002D47; --teal:#2BA5CA; --red:#C51B29; --red-h:#E53644;
  --bg:#F8F8F8; --text:#333; --grey:#555; --muted:#8a97a0; --line:#e3e8ec;
  --radius:8px; --br-btn:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Figtree','Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.55}
h1,h2,h3,h4{font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);line-height:1.15}
h1{font-size:1.9rem}h2{font-size:1.35rem;margin-bottom:12px}h3{font-size:1.05rem;margin-bottom:8px}
p{margin-bottom:10px}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* Header */
header.top{background:var(--navy);color:#fff;padding:14px 0;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,45,71,.25)}
header.top .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-family:'Anton','Arial Narrow',Impact,sans-serif;text-transform:uppercase;font-size:1.05rem;color:#fff;letter-spacing:.05em}
.brand b{color:var(--teal)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.85);padding:7px 12px;border-radius:var(--br-btn);font-weight:600;font-size:.92rem}
.nav a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.nav a.active{background:var(--teal);color:#fff}
.who{font-size:.8rem;color:rgba(255,255,255,.65)}
.brandlogo{height:26px;width:auto;vertical-align:middle;margin-right:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 14px}
.chip{background:#eef4f7;border:1px solid #cfe0e8;color:#17708c;border-radius:99px;padding:5px 12px;font-size:.82rem;cursor:pointer;font-family:inherit;line-height:1.2}
.chip:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.chip:before{content:"+ ";font-weight:800}

main{padding:34px 0 60px}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted)}

/* Cards & Grid */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 2px 12px rgba(0,45,71,.05);margin-bottom:18px}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid.c2,.grid.c3{grid-template-columns:1fr}}
.eyebrow{display:block;font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.muted{color:var(--muted);font-size:.9rem}
.small{font-size:.86rem}

/* Buttons */
.btn{display:inline-block;padding:10px 20px;border-radius:var(--br-btn);font-weight:700;font-size:.95rem;border:0;cursor:pointer;font-family:inherit;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-h)}
.btn-teal{background:var(--teal);color:#fff}.btn-teal:hover{filter:brightness(1.08)}
.btn-outline{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn-ghost{background:transparent;color:var(--teal);border:1px solid var(--teal)}
.btn-sm{padding:6px 12px;font-size:.83rem}
.btn-danger{background:#fff;color:var(--red);border:1px solid var(--red)}

/* Forms */
label{display:block;font-weight:700;font-size:.86rem;color:var(--navy);margin:12px 0 4px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=month],input[type=email],select,textarea{
  width:100%;padding:10px 12px;border:1px solid #c9d3da;border-radius:var(--br-btn);font-family:inherit;font-size:.95rem;background:#fff}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);border-color:var(--teal)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:18px 0;background:#fff}
legend{font-weight:800;color:var(--navy);padding:0 8px;font-size:.95rem}
.check{display:flex;align-items:flex-start;gap:8px;margin:6px 0;font-size:.93rem}
.check input{width:auto;margin-top:3px}
.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.row,.row2{grid-template-columns:1fr}}

/* Tables */
table{width:100%;border-collapse:collapse;background:#fff;font-size:.92rem}
th{background:var(--navy);color:#fff;text-align:left;padding:9px 12px;font-weight:700;font-size:.84rem}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:#f4f9fb}

/* Progress */
.progress{background:#e6ebee;border-radius:99px;height:12px;overflow:hidden;min-width:80px}
.progress i{display:block;height:100%;background:var(--teal);border-radius:99px}
.progress.big{height:18px}
.pnum{font-weight:800;color:var(--navy);font-size:.9rem}

/* Badges */
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.b-teal{background:rgba(43,165,202,.14);color:#17708c}
.b-green{background:rgba(30,123,52,.12);color:#1E7B34}
.b-grey{background:#eef1f3;color:#69767e}
.b-red{background:rgba(197,27,41,.1);color:var(--red)}
.b-navy{background:var(--navy);color:#fff}
.b-yellow{background:rgba(217,154,0,.15);color:#8a6d00}
.star{color:#d99a00;font-weight:900}

/* Etappen / Trend / Quiz */
.etappe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:26px 0 10px}
.etappe h2{margin:0}
.fokus{background:linear-gradient(120deg,var(--navy),#01476e);color:#fff;border-radius:var(--radius);padding:18px 22px;margin-bottom:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.fokus .fk{font-family:'Anton','Arial Narrow',Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);font-size:.85rem}
.fokus b{color:#fff}
.trend{display:flex;gap:6px;align-items:flex-end;height:64px;margin:10px 0 4px}
.trend .tb{flex:1;background:var(--teal);border-radius:3px 3px 0 0;min-height:3px;position:relative}
.trend .tb span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--grey);font-weight:700}
.trendlabels{display:flex;gap:6px}
.trendlabels i{flex:1;text-align:center;font-style:normal;font-size:.66rem;color:var(--muted)}
.kitem.locked{opacity:.55;background:#f3f5f6}
.kitem.locked:hover{border-color:var(--line);box-shadow:none}
.quizfrage{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:10px 0;background:#fff}
.quizfrage b{color:var(--navy)}

/* Kapitel-Liste */
.klist{display:flex;flex-direction:column;gap:10px}
.kitem{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}
.kitem:hover{border-color:var(--teal);box-shadow:0 4px 14px rgba(0,45,71,.08)}
.kitem .knr{font-family:'Anton','Arial Narrow',Impact,sans-serif;color:var(--teal);font-size:1.15rem;min-width:38px}
.kitem .kt{flex:1}
.kitem .kt b{color:var(--navy)}
.kitem.done{background:#f3faf5;border-color:#bfe3c8}
.kitem.done .knr{color:#1E7B34}

/* Kapitel-Detail */
.promptbox{background:#f2f8fa;border:1px solid #cfe6ee;border-left:4px solid var(--teal);border-radius:var(--radius);padding:14px 16px;margin:10px 0;font-size:.92rem;white-space:pre-wrap}
.promptbox .pt{font-weight:800;color:var(--navy);display:block;margin-bottom:6px;font-family:'Figtree',sans-serif;text-transform:none}
.checkliste li{margin:5px 0 5px 20px}
.aufgabe{background:#fff8f0;border:1px solid #f0ddc2;border-left:4px solid #d99a00;border-radius:var(--radius);padding:16px 18px;margin:16px 0}

/* Flash / Alerts */
.flash{padding:12px 16px;border-radius:var(--br-btn);margin-bottom:16px;font-weight:600;font-size:.93rem}
.flash.ok{background:#e8f6ec;color:#1E7B34;border:1px solid #bfe3c8}
.flash.err{background:#fdeaec;color:var(--red);border:1px solid #f2c2c7}
.flash.info{background:#eaf5f9;color:#17708c;border:1px solid #cfe6ee}
.pwbox{background:var(--navy);color:#fff;padding:16px 20px;border-radius:var(--radius);margin:14px 0}
.pwbox code{background:rgba(255,255,255,.15);padding:4px 10px;border-radius:4px;font-size:1.05rem;letter-spacing:.06em}

/* Login */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--navy) 0%,#01476e 100%);padding:20px}
.login-box{background:#fff;border-radius:12px;padding:38px;max-width:400px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-box .brand2{font-family:'Anton','Arial Narrow',Impact,sans-serif;text-transform:uppercase;color:var(--navy);font-size:1.3rem;margin-bottom:4px}
.login-box .brand2 span{color:var(--teal)}

/* Handbuch / Print */
.hb h1{font-size:1.7rem;margin-bottom:4px}
.hb .hsec{margin:26px 0}
.hb .hcover{background:var(--navy);color:#fff;border-radius:var(--radius);padding:34px;margin-bottom:26px}
.hb .hcover h1{color:#fff}
.hb .hcover .eyebrow{color:var(--teal)}
.hb .input-quote{background:#f7f9fa;border-left:3px solid var(--teal);padding:10px 14px;margin:8px 0;border-radius:0 var(--radius) var(--radius) 0;font-size:.92rem}
.hb .input-quote .m{color:var(--muted);font-size:.78rem;display:block;margin-top:4px}
.printbar{position:sticky;top:64px;z-index:10;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;margin-bottom:18px;display:flex;gap:12px;align-items:center}
@media print{
  header.top,.printbar,.crumb,.noprint{display:none!important}
  body{background:#fff;font-size:12px}
  main{padding:0}
  .card,.kitem{box-shadow:none;break-inside:avoid}
  .hb .hsec{break-inside:avoid-page}
  a{color:inherit}
}
footer.foot{border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:.8rem;background:#fff}