:root{
  --bg:#FAF9F7;
  --surface:#FFFFFF;
  --ink:#1E2A29;
  --ink-soft:#5C6D6B;
  --teal-950:#062725;
  --teal-800:#0E403D;
  --teal-600:#166F67;
  --teal-400:#3FA79A;
  --teal-100:#E4F1EE;
  --line:#EAE6DF;
  --amber:#B96A2A;
  --grad-side: linear-gradient(200deg, var(--teal-950) 0%, var(--teal-600) 120%);
  --grad-btn: linear-gradient(120deg, var(--teal-800), var(--teal-400));
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans', sans-serif;}
h1,h2,h3{font-family:'Manrope', sans-serif;}
a{color:inherit;}

.app{display:grid; grid-template-columns:260px 1fr; min-height:100vh;}

.side{background:var(--grad-side); color:#EAF6F3; padding:36px 26px; display:flex; flex-direction:column; gap:40px;}
.brand{font-family:'Manrope'; font-weight:800; font-size:1.2rem; letter-spacing:-.02em; text-decoration:none;}
.brand-edu{color:#fff;}
.brand-libri{color:var(--teal-400);}
.brand small{display:block; font-weight:500; font-size:.72rem; color:rgba(234,246,243,.6); letter-spacing:.04em; margin-top:2px;}
nav{display:flex; flex-direction:column; gap:2px;}
nav a{color:rgba(234,246,243,.7); text-decoration:none; padding:11px 14px; border-radius:12px; font-size:.9rem; font-weight:600;}
nav a.active{background:rgba(255,255,255,.12); color:#fff;}
.side-card{margin-top:auto; background:rgba(255,255,255,.08); border-radius:14px; padding:16px; font-size:.8rem; line-height:1.5;}
.side-card b{display:block; color:#fff; font-size:.86rem; margin-bottom:2px;}

main{padding:44px 52px;}
.topline{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; flex-wrap:wrap; gap:16px;}
.topline h1{margin:0 0 4px; font-size:1.7rem; letter-spacing:-.01em;}
.topline p{margin:0; color:var(--ink-soft); font-size:.95rem;}

.btn{border:none; cursor:pointer; font-family:'IBM Plex Sans'; font-weight:600; font-size:.87rem; padding:12px 22px; border-radius:12px;}
.btn-primary{background:var(--grad-btn); color:#fff; box-shadow:0 10px 24px -10px rgba(6,39,37,.55);}
.btn-ghost{background:var(--surface); border:1px solid var(--line); color:var(--teal-800);}
.btn-sm{padding:8px 14px; font-size:.82rem; border-radius:9px;}

.flash{background:var(--teal-100); color:var(--teal-800); padding:12px 18px; border-radius:10px; font-size:.88rem; margin-bottom:20px;}
.flash-error{background:#F7E4D2; color:var(--amber);}

.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; margin-bottom:38px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 24px; transition:border-color .15s; position:relative;}
.card:hover{border-color:var(--teal-400);}
.card.selected{border-color:var(--teal-600); box-shadow:0 0 0 3px var(--teal-100);}
.card-link{text-decoration:none; color:inherit; display:block;}
.card h3{margin:0 0 2px; font-size:1.05rem;}
.card .sub{color:var(--ink-soft); font-size:.83rem; margin-bottom:16px;}
.card.empty{border-style:dashed; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:.9rem;}
.card-delete{position:absolute; top:16px; right:16px;}

.timeline{position:relative; height:8px; background:var(--line); border-radius:99px; margin:10px 0 8px;}
.timeline .fill{position:absolute; top:0; left:0; height:100%; border-radius:99px; background:var(--grad-btn);}
.timeline .fill.spaet{background:linear-gradient(120deg,#B96A2A,#E0A467);}
.timeline .today{position:absolute; top:-4px; width:2px; height:16px; background:var(--teal-950);}
.tl-labels{display:flex; justify-content:space-between; font-size:.74rem; color:var(--ink-soft);}
.tl-labels b{color:var(--ink);}
.tl-labels b.warn{color:var(--amber);}

.detail{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px 34px; margin-bottom:24px;}
.detail-head{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px;}
.detail-head h2{margin:0 0 4px; font-size:1.35rem;}
.detail-head p{margin:0; color:var(--ink-soft); font-size:.9rem;}

.period-set{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.period-set input{font-family:'IBM Plex Sans'; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:.85rem; color:var(--ink);}
.period-set span{color:var(--ink-soft); font-size:.85rem;}
.gruppe-zuteilung{display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap;}
.gruppe-zuteilung .gruppe-name{font-weight:700; color:var(--ink);}
.gruppe-zuteilung .sub-line{font-size:.85rem; color:var(--ink-soft);}

.section-label{font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); font-weight:700; margin:26px 0 12px; display:flex; justify-content:space-between; align-items:center;}

table{width:100%; border-collapse:collapse; font-size:.9rem;}
th{text-align:left; color:var(--ink-soft); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; border-bottom:1px solid var(--line);}
th.th-action{text-align:right;}
th.th-action .link-btn{text-transform:none; letter-spacing:normal; font-size:.8rem;}
td{padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.who{display:flex; align-items:center; gap:10px;}
.who .sub-line{font-size:.78rem; color:var(--ink-soft); font-weight:400; margin-top:2px;}
.cover-thumb{width:38px; height:54px; object-fit:cover; border-radius:4px; box-shadow:0 2px 6px rgba(6,39,37,.25); display:block;}
.kurs-row td{border-bottom:1px solid var(--line); padding-top:0;}
.kurs-liste{display:flex; flex-direction:column; gap:4px; padding:2px 0 10px;}
.kurs-eintrag{display:flex; gap:18px; font-size:.8rem; color:var(--ink-soft);}
.kurs-eintrag .kurs-name{min-width:160px; color:var(--ink); font-weight:600;}
.avatar{width:32px;height:32px;border-radius:10px; background:var(--teal-100); color:var(--teal-800); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.76rem; flex-shrink:0;}
.status-pill{font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:8px; white-space:nowrap;}
.status-pill.frei{background:#EFEEEA; color:#7A8482;}
.status-pill.ausgeliehen{background:var(--teal-100); color:var(--teal-800);}
.status-pill.ueberfaellig{background:#F7E4D2; color:var(--amber);}
.status-pill.zurueckgegeben{background:#EFEEEA; color:#7A8482;}
.link-btn{background:none; border:none; color:var(--teal-600); font-weight:700; font-size:.83rem; cursor:pointer; padding:0; font-family:'IBM Plex Sans';}
.verlauf-table, .verlauf-table th, .verlauf-table td{font-size:.78rem;}
.verlauf-table td, .verlauf-table th{padding:9px 12px;}
.verlauf-kachel{margin-top:24px;}
.link-btn.muted{color:var(--ink-soft); font-weight:600;}
.row-actions{display:flex; align-items:center; gap:12px;}
.row-actions .primary-action{margin-right:auto;}
.icon-actions{display:flex; gap:4px;}
.icon-btn{
  background:none; border:none; cursor:pointer; padding:6px; border-radius:8px;
  color:var(--ink-soft); display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn svg{width:17px; height:17px; display:block;}
.icon-btn:hover{background:var(--teal-100); color:var(--teal-800);}
.icon-btn.danger:hover{background:#F7E4D2; color:var(--amber);}

.table-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:10px;}
.sort-toggles{display:flex; gap:6px; flex-wrap:wrap;}
.sort-toggle{
  display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); border-radius:9px;
  padding:7px 12px; font-size:.8rem; font-weight:600; color:var(--ink-soft); cursor:pointer; font-family:'IBM Plex Sans';
}
.sort-toggle svg{width:15px; height:15px;}
.sort-toggle.desc svg{transform:scaleY(-1);}
.sort-toggle:hover{border-color:var(--teal-400); color:var(--teal-800);}
.sort-toggle.active-sort{border-color:var(--teal-600); color:var(--teal-800); background:var(--teal-100);}
.status-filters{display:flex; gap:6px;}
.filter-toggle{
  background:none; border:1px solid var(--line); border-radius:9px; padding:7px 12px; cursor:pointer;
  color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; font-family:'IBM Plex Sans';
}
.filter-toggle svg{width:16px; height:16px;}
.filter-toggle:hover{border-color:var(--teal-400);}
.filter-toggle.active{background:var(--grad-btn); border-color:transparent; color:#fff;}

.empty-state{padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:.92rem;}

/* Inline-Formulare */
.inline-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.inline-form input, .inline-form select{
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:.85rem; font-family:'IBM Plex Sans'; color:var(--ink);
}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; margin-bottom:12px;}
.form-grid label{font-size:.76rem; color:var(--ink-soft); display:block; margin-bottom:4px;}
.form-grid input, .form-grid select{width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:.85rem; font-family:'IBM Plex Sans';}

/* Modal */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(6,39,37,.35); z-index:50;
  align-items:center; justify-content:center; padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{background:#fff; border-radius:18px; padding:28px 30px; width:100%; max-width:420px; box-shadow:0 30px 60px -20px rgba(6,39,37,.4);}
.modal.modal-wide{max-width:640px;}
.form-grid-2col{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:12px;}
@media (max-width: 560px){
  .form-grid-2col{grid-template-columns:1fr;}
}
.modal h3{margin:0 0 4px;}
.modal p{margin:0 0 18px; color:var(--ink-soft); font-size:.88rem;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

/* Serverseitiger Kalender */
.kalender{
  border:1px solid var(--line); border-radius:14px; padding:14px 16px 8px; background:#FCFBF9;
}
.kal-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.kal-nav{
  background:none; border:1px solid var(--line); border-radius:8px; width:30px; height:30px;
  font-size:1rem; cursor:pointer; color:var(--teal-800); line-height:1;
}
.kal-heute-btn{
  background:none; border:none; color:var(--teal-600); font-weight:700; font-size:.8rem; cursor:pointer; font-family:'IBM Plex Sans';
}
.kal-month{display:none;}
.kal-month.active{display:block;}
.kal-month-label{font-family:'Manrope'; font-weight:700; font-size:.92rem; text-align:center; margin:4px 0 10px; color:var(--teal-800);}
.kal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;}
.kal-weekday{font-size:.7rem; color:var(--ink-soft); text-align:center; font-weight:600; padding-bottom:4px;}
.kal-day{
  aspect-ratio:1; border:none; background:none; border-radius:8px; font-size:.82rem; font-family:'IBM Plex Sans';
  color:var(--ink); cursor:pointer;
}
.kal-day:hover{background:var(--teal-100);}
.kal-day.empty{cursor:default; background:none;}
.kal-day.today{box-shadow:inset 0 0 0 1.5px var(--teal-600); font-weight:600;}
.kal-day.selected{background:var(--grad-btn); color:#fff; font-weight:700;}
.kal-label{font-size:.8rem; color:var(--ink-soft); padding:10px 2px 2px; text-align:center;}

@media (max-width: 880px){
  .app{grid-template-columns:1fr;}
  .side{flex-direction:row; align-items:center; gap:18px; padding:18px 20px;}
  nav{flex-direction:row; overflow-x:auto;}
  .side-card{display:none;}
  main{padding:20px;}
  .detail{padding:20px;}
  table, thead, tbody, th, td, tr{display:block;}
  thead{display:none;}
  tr{border-bottom:1px solid var(--line); padding:12px 0;}
  td{border:none; padding:4px 0;}
  .detail-head{flex-direction:column; align-items:flex-start;}
}