:root {
  --primary:   #750f26;
  --secondary: #013246;
  --sidebar-w: 220px;
}
body { background:#f4f6f9; font-family:'Segoe UI',sans-serif; }
#app  { display:flex; min-height:100vh; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar { width:var(--sidebar-w); background:var(--secondary); color:#fff; min-height:100vh;
  display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:100; }
.sidebar-brand { background:#011f2d; padding:1rem .8rem .8rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand img { width:100%; max-width:180px; height:auto; display:block; margin:0 auto .35rem; }
.sidebar-brand small { display:block; font-size:.68rem; color:rgba(255,255,255,.5); letter-spacing:.05em; text-transform:uppercase; }
.sidebar nav { flex:1; padding:.5rem 0; }
.sidebar .nav-link { color:rgba(255,255,255,.72); padding:.6rem 1.1rem; display:flex; align-items:center; gap:.6rem;
  border-left:3px solid transparent; transition:all .15s; font-size:.88rem; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color:#fff; background:rgba(255,255,255,.07); border-left-color:var(--primary); }
.sidebar .nav-link i { font-size:1rem; width:1.1rem; }
.sidebar-footer { padding:.8rem 1rem; font-size:.72rem; opacity:.45; border-top:1px solid rgba(255,255,255,.09); }

/* ── Main ───────────────────────────────────────────────────── */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar { background:#fff; padding:.85rem 1.5rem; border-bottom:1px solid #e0e0e0; display:flex;
  align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar h1 { font-size:1.1rem; margin:0; font-weight:600; color:var(--secondary); }
.page-body { padding:1.5rem; }

/* ── Stats ──────────────────────────────────────────────────── */
.stat-card { background:#fff; border-radius:10px; padding:1.2rem 1.4rem; display:flex; align-items:center;
  gap:1rem; box-shadow:0 1px 4px rgba(0,0,0,.07); }
.stat-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.stat-icon.red    { background:rgba(117,15,38,.1);  color:var(--primary);   }
.stat-icon.blue   { background:rgba(1,50,70,.1);    color:var(--secondary); }
.stat-icon.green  { background:rgba(25,135,84,.1);  color:#198754; }
.stat-icon.orange { background:rgba(253,126,20,.1); color:#fd7e14; }
.stat-value { font-size:1.8rem; font-weight:700; line-height:1; }
.stat-label { font-size:.8rem; color:#666; margin-top:2px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary { background:var(--primary)!important; border-color:var(--primary)!important; }
.btn-primary:hover { filter:brightness(.9); }
.btn-outline-primary { color:var(--primary)!important; border-color:var(--primary)!important; }
.btn-outline-primary:hover { background:var(--primary)!important; color:#fff!important; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.07); overflow:hidden; }
.table-card .table { margin:0; }
.table-card .table th { background:#f8f9fa; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#555; }
.table-card .table td { vertical-align:middle; }
.search-bar { max-width:320px; }
.badge-day { background:var(--secondary); color:#fff; border-radius:6px; padding:2px 8px; font-size:.75rem; font-weight:600; }

/* ── Course detail ──────────────────────────────────────────── */
.detail-grid { display:flex; flex-direction:column; gap:.75rem; }
.detail-row  { display:flex; align-items:flex-start; gap:.75rem; }
.detail-row > i { color:var(--secondary); margin-top:2px; flex-shrink:0; font-size:1rem; }
.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.4rem; }
.status-dot.active   { background:#198754; }
.status-dot.inactive { background:#6c757d; }

/* ── Login ──────────────────────────────────────────────────── */
.login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#011f2d 0%,var(--secondary) 60%,#024060 100%); }
.login-card { background:#fff; border-radius:16px; padding:2.2rem 2rem 2rem; width:100%; max-width:370px;
  box-shadow:0 12px 40px rgba(0,0,0,.3); }
.login-logo { display:block; width:220px; height:auto; margin:0 auto 1.4rem; }
.login-divider { border:0; border-top:1px solid #e8e8e8; margin:1.2rem 0; }

/* ── Misc ───────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:#999; }
.empty-state i { font-size:3rem; display:block; margin-bottom:.7rem; }
textarea.template-box { font-family:monospace; font-size:.88rem; min-height:120px; }

/* ── Monthly Calendar ───────────────────────────────────────── */
.cal-header-row { display:grid; grid-template-columns:repeat(7,1fr); background:#f8f9fa; border-bottom:1px solid #dee2e6; }
.cal-header-cell { padding:.5rem; text-align:center; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--secondary); }
.cal-header-cell:nth-child(6),.cal-header-cell:nth-child(7) { color:#aaa; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-cell { min-height:100px; border-right:1px solid #dee2e6; border-bottom:1px solid #dee2e6; padding:.3rem .35rem; background:#fff; }
.cal-cell:nth-child(7n) { border-right:none; }
.cal-cell--empty   { background:#fafafa; }
.cal-cell--today   { background:#fdf5f7; }
.cal-cell--weekend { background:#f9f9fb; }
.cal-day-num { font-size:.78rem; font-weight:700; color:#555; margin-bottom:.2rem; }
.cal-cell--today .cal-day-num { background:var(--primary); color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.cal-badges { display:flex; flex-direction:column; gap:2px; }
.cal-badge { font-size:.68rem; padding:2px 5px; border-radius:4px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:filter .15s; }
.cal-badge:hover { filter:brightness(.92); }
.cal-badge--active    { background:rgba(1,50,70,.11); color:var(--secondary); border-left:3px solid var(--secondary); }
.cal-badge--cancelled { background:rgba(117,15,38,.07); color:#aaa; text-decoration:line-through; border-left:3px solid var(--primary); }

/* ── Time Grid Calendar ─────────────────────────────────────── */
.cal-tg-wrapper  { display:flex; flex-direction:column; }
.cal-tg-header   { display:flex; border-bottom:2px solid #dee2e6; background:#f8f9fa; }
.cal-tg-gutter-head { width:52px; flex-shrink:0; }
.cal-tg-dayheads { flex:1; display:grid; }
.cal-tg-dayhead  { padding:.5rem .3rem; text-align:center; font-size:.82rem; font-weight:600; color:var(--secondary);
  border-left:1px solid #dee2e6; }
.cal-tg-dayhead--today { background:rgba(117,15,38,.06); color:var(--primary); }
.cal-tg-scroll   { display:flex; overflow-y:auto; max-height:680px; padding-top:8px; }
.cal-tg-gutter   { width:52px; flex-shrink:0; padding-top:0; }
.cal-tg-slot     { height:40px; display:flex; align-items:flex-start; justify-content:flex-end;
  padding-right:6px; font-size:.68rem; color:#999; border-bottom:1px solid #f0f0f0; }
.cal-tg-slot--half { border-bottom:1px dashed #f0f0f0; }
.cal-tg-slot span { margin-top:-7px; }
.cal-tg-body     { flex:1; display:grid; position:relative; }
.cal-tg-col      { border-left:1px solid #eee; position:relative; overflow:visible; }
.cal-tg-line     { position:absolute; left:0; right:0; border-top:1px solid #eee; pointer-events:none; }
.cal-tg-line--half { border-top:1px dashed #f4f4f4; }
.cal-tg-event    { position:absolute; left:2px; right:2px; border-radius:5px; padding:3px 6px;
  cursor:pointer; overflow:hidden; font-size:.72rem; transition:filter .15s; z-index:1; }
.cal-tg-event:hover { filter:brightness(.93); z-index:2; }
.cal-tg-event--active    { background:rgba(1,50,70,.85); color:#fff; border-left:3px solid var(--secondary); }
.cal-tg-event--cancelled { background:rgba(117,15,38,.15); color:#888; text-decoration:line-through; border-left:3px solid var(--primary); }
.cal-tg-event-time    { font-weight:700; font-size:.7rem; }
.cal-tg-event-name    { font-weight:600; line-height:1.2; }
.cal-tg-event-teacher { font-size:.65rem; opacity:.8; }
.cal-tg-now { position:absolute; left:0; right:0; border-top:2px solid var(--primary); z-index:5; pointer-events:none; }
.cal-tg-now::before { content:''; position:absolute; left:-4px; top:-4px; width:8px; height:8px;
  border-radius:50%; background:var(--primary); }

@media (max-width:768px) { .sidebar { transform:translateX(-100%); } .main-content { margin-left:0; } }

/* Video-Link Anzeige */
.video-link-text {
  font-family: monospace;
  font-size: .82rem;
  color: var(--secondary);
  word-break: break-all;
}