:root{
  --bg:#F4F6F8;
  --panel:#FFFFFF;
  --ink:#101820;
  --ink-dim:#5A6572;
  --ink-faint:#8D96A1;
  --line:#DEE3E8;
  --line-strong:#C7CFD6;
  --blue:#0B3C74;
  --blue-deep:#082A54;
  --blue-bg:#E7EEF6;
  --silver:#C9CDD3;
  --amber:#B87A12;
  --amber-bg:#FBF0DC;
  --green:#22753F;
  --green-bg:#E4F2E8;
  --red:#B32B23;
  --red-bg:#FBE6E4;
  --sans:'Fira Sans', sans-serif;
  --disp:'Oswald', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5;}

.battenburg{height:14px; display:flex;}
.battenburg span{flex:1;}
.battenburg span:nth-child(odd){background:var(--blue);}
.battenburg span:nth-child(even){background:var(--silver);}

.app{display:flex; min-height:calc(100vh - 14px);}
.sidebar{width:220px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line); padding:22px 14px; display:flex; flex-direction:column;}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.brand-mark{width:34px; height:34px; background:var(--blue); border-radius:4px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--disp); font-size:14px; font-weight:600; flex-shrink:0;}
.brand-text{font-family:var(--disp); font-size:15px; font-weight:600; letter-spacing:.3px; color:var(--blue-deep); text-transform:uppercase;}
.brand-sub{font-size:10.5px; color:var(--ink-faint); font-family:var(--mono);}

nav{display:flex; flex-direction:column; gap:3px;}
.nav-item{display:flex; align-items:center; padding:10px 12px; border-radius:5px; font-family:var(--disp); font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:var(--ink-dim); cursor:pointer; border:none; background:none; text-align:left; width:100%;}
.nav-item:hover{background:var(--blue-bg); color:var(--blue-deep);}
.nav-item.active{background:var(--blue); color:#fff;}
.nav-item .n{margin-left:auto; font-family:var(--mono); font-size:10.5px; text-transform:none; letter-spacing:0; opacity:.75;}
.side-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-dim);}
.side-foot strong{color:var(--ink); display:block;}
.side-foot button{margin-top:10px; font-family:var(--sans); font-size:12px; background:none; border:1px solid var(--line-strong); border-radius:5px; padding:5px 10px; color:var(--ink-dim); cursor:pointer;}

main{flex:1; min-width:0; padding:30px 40px; max-width:980px;}
.view{display:none;}
.view.active{display:block;}

.view-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px;}
.view-head h1{font-family:var(--disp); font-size:23px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin:0; color:var(--blue-deep);}
.view-head .sub{font-family:var(--mono); font-size:12px; color:var(--ink-faint); font-weight:400; text-transform:none; letter-spacing:0;}
.view-head .meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px;}
.stat{background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--blue); padding:14px 16px; border-radius:6px;}
.stat .l{font-size:11.5px; color:var(--ink-dim); margin-bottom:6px;}
.stat .v{font-family:var(--disp); font-size:25px; font-weight:600; color:var(--blue-deep);}
.stat .v .unit{font-family:var(--sans); font-size:12px; color:var(--ink-faint); margin-left:2px;}

h2.sec{font-family:var(--disp); font-size:13.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-dim); margin:0 0 10px; display:flex; align-items:center; justify-content:space-between;}
main .block{margin-bottom:30px;}

.list{background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.row{display:flex; align-items:center; gap:16px; padding:13px 16px; border-bottom:1px solid var(--line); cursor:default;}
.row:last-child{border-bottom:none;}
.row:hover{background:#F7F9FB;}
.row.clickable{cursor:pointer;}
.badgeno{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); width:54px; flex-shrink:0;}
.row .name{font-weight:600; width:150px; flex-shrink:0;}
.row .rank{color:var(--ink-dim); font-size:12.5px; width:100px; flex-shrink:0; font-family:var(--mono);}
.row .desc{flex:1; color:var(--ink-dim); font-size:12.5px;}
.row .rest{flex:1; display:flex; align-items:center; gap:16px;}
.empty{padding:22px 16px; color:var(--ink-faint); font-size:13px; text-align:center;}

.tag{font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; white-space:nowrap;}
.tag.amber{background:var(--amber-bg); color:var(--amber);}
.tag.green{background:var(--green-bg); color:var(--green);}
.tag.red{background:var(--red-bg); color:var(--red);}
.tag.neutral{background:#EEF1F4; color:var(--ink-dim);}

.bar{width:110px; height:5px; background:#E7EAEE; border-radius:3px; overflow:hidden; flex-shrink:0;}
.bar-fill{height:100%; background:var(--blue);}

/* Ausbildung */
.module-row{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--panel);}
.module-row:last-child{border-bottom:none;}
.module-name{flex:1; font-size:13.5px; font-weight:500;}
.module-sub{font-size:11.5px; color:var(--ink-faint); margin-top:2px; font-weight:400;}

/* Formulare / Karten */
.card{border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:20px 22px;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.card-head h3{font-family:var(--disp); font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:.2px; color:var(--blue-deep); margin:0;}
.card-head .case{font-family:var(--mono); font-size:11px; color:var(--ink-faint);}

.field{margin-bottom:12px;}
.field label{display:block; font-size:12.5px; color:var(--ink-dim); margin-bottom:5px;}
.field input, .field select, .field textarea{
  width:100%; background:#F7F9FB; border:1px solid var(--line); color:var(--ink);
  font-family:var(--sans); font-size:13px; border-radius:5px; padding:9px 10px;
}
.field textarea{min-height:56px; resize:vertical;}

.grade-row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.grade-row label{width:130px; font-size:12.5px; color:var(--ink-dim); flex-shrink:0;}
.grade-scale{display:flex; gap:4px;}
.grade-pip{width:28px; height:28px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--ink-dim); border-radius:5px; cursor:pointer; background:none;}
.grade-pip.selected{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600;}

.btn{font-family:var(--disp); font-size:12.5px; letter-spacing:.3px; text-transform:uppercase; font-weight:500; padding:9px 16px; border-radius:5px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer;}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600;}
.btn.danger{border-color:var(--red); color:var(--red);}
.actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}

.note{margin-top:20px; padding:12px 16px; border:1px dashed var(--line-strong); font-size:12px; color:var(--ink-dim); border-radius:6px; background:var(--blue-bg);}
.error-msg{color:var(--red); font-size:12.5px; margin-top:8px;}