:root{
  --drk-red:#e2001a; --drk-red-dark:#b3001500;
  --sidebar-bg:#1f2430; --sidebar-bg2:#171b24; --sidebar-fg:#c7cdd8;
  --bg:#f4f6f9; --card:#ffffff; --text:#1f2430; --muted:#6b7280;
  --border:#e3e7ee; --accent:#e2001a;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:250px;background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg2));color:var(--sidebar-fg);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0}
.sidebar-header{padding:1.3rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-header h1{font-size:1.15rem;margin:0;color:#fff}
.sidebar-header small{color:#8b93a3}
.sidebar-nav{flex:1;padding:.8rem 0;overflow-y:auto}
.sidebar-nav a{display:block;padding:.7rem 1.2rem;color:var(--sidebar-fg);border-left:3px solid transparent}
.sidebar-nav a:hover{background:rgba(255,255,255,.05);text-decoration:none}
.sidebar-nav a.active{background:rgba(226,0,26,.15);border-left-color:var(--drk-red);color:#fff}
.sidebar-footer{padding:1rem 1.2rem;border-top:1px solid rgba(255,255,255,.07);font-size:.85rem}
.sidebar-footer .user-info{margin-bottom:.5rem}
.sidebar-footer strong{color:#fff;display:block}
.sidebar-footer .role{color:#8b93a3;font-size:.75rem}
.sidebar-footer a{color:#c7cdd8}
.main{flex:1;margin-left:250px;padding:1.6rem 2rem;min-width:0;max-width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.topbar h2{margin:0;font-size:1.4rem}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1.3rem;margin-bottom:1.2rem;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1.3rem;text-decoration:none;color:var(--text);display:block;transition:.15s}
.stat-card:hover{border-color:var(--drk-red);box-shadow:0 4px 14px rgba(226,0,26,.1);text-decoration:none;transform:translateY(-2px)}
.stat-card .big{font-size:2rem;font-weight:700;color:var(--drk-red)}
.stat-card .label{color:var(--muted);font-size:.9rem}
.stat-card h3{margin:.2rem 0 .6rem}

/* Forms */
label{display:block;font-size:.85rem;color:var(--muted);margin:.5rem 0 .25rem}
input,select,textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--border);border-radius:7px;font-size:.95rem;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--drk-red)}
.btn{display:inline-block;padding:.55rem 1.1rem;border:none;border-radius:7px;font-size:.9rem;cursor:pointer;background:#e9ecf2;color:var(--text)}
.btn:hover{text-decoration:none;filter:brightness(.97)}
.btn-primary{background:var(--drk-red);color:#fff}
.btn-sm{padding:.35rem .7rem;font-size:.82rem}
.btn-danger{background:#dc3545;color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--border)}
.row{display:flex;gap:1rem;flex-wrap:wrap}
.row>div{flex:1 1 180px;min-width:150px}

/* Table */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{padding:.45rem .55rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
th{background:#fafbfc;color:var(--muted);font-weight:600;position:sticky;top:0}
tbody tr:hover{background:#fcf4f5}
tbody tr.data-row{cursor:pointer}
tbody tr.data-row:focus{outline:2px solid var(--primary,#b3123a);outline-offset:-2px}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:8px;-webkit-overflow-scrolling:touch}
/* Detail-Popup */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center;padding:1rem}
.modal-backdrop.show{display:flex}
.modal-box{background:#fff;border-radius:12px;max-width:640px;width:100%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;border-bottom:1px solid var(--border)}
.modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;line-height:1;color:var(--muted)}
.modal-close:hover{color:#000}
.modal-body{overflow:auto;padding:.4rem 1.2rem 1rem}
.record-table{width:100%;border-collapse:collapse;font-size:.9rem}
.record-table th,.record-table td{white-space:normal;max-width:none;vertical-align:top;padding:.5rem .6rem;border-bottom:1px solid var(--border)}
.record-table th{width:40%;text-align:left;color:var(--muted);font-weight:600;background:#fafbfc;position:static}
.record-table td{word-break:break-word}

/* Ergebnis-Kopf */
.result-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.result-tools{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.perpage-form{display:flex;align-items:center;gap:.4rem;margin:0}
.perpage-form select{width:auto;padding:.3rem .5rem}

/* Misc */
.flash{padding:.7rem 1rem;border-radius:7px;margin-bottom:1rem}
.flash.success{background:#e6f6ec;color:#1a7f3c;border:1px solid #b7e2c6}
.flash.error{background:#fdecec;color:#b3001c;border:1px solid #f5c2c2}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:20px;font-size:.75rem;background:#eef1f5;color:var(--muted)}
.badge.admin{background:#e2001a;color:#fff}
.badge.on{background:#e6f6ec;color:#1a7f3c}
.badge.off{background:#fdecec;color:#b3001c}
.muted{color:var(--muted)}
.pagination{display:flex;gap:.4rem;margin-top:1rem;align-items:center;flex-wrap:wrap}
.pagination a,.pagination span{padding:.35rem .7rem;border:1px solid var(--border);border-radius:6px}
.pagination .cur{background:var(--drk-red);color:#fff;border-color:var(--drk-red)}

/* Login */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f2430,#2b3446)}
.auth-card{background:#fff;border-radius:14px;padding:2.2rem;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-card h1{margin:0 0 .3rem;font-size:1.3rem}
.auth-card .sub{color:var(--muted);margin-bottom:1.4rem;font-size:.9rem}
.auth-card .btn-primary{width:100%;margin-top:1rem;padding:.7rem}
.auth-links{margin-top:1.2rem;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.divider{text-align:center;color:var(--muted);margin:1rem 0;font-size:.8rem;position:relative}
.brand-bar{height:4px;background:var(--drk-red);border-radius:4px 4px 0 0;margin:-2.2rem -2.2rem 1.5rem}
/* Burger (mobil) */
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--text);padding:.2rem .5rem}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}

/* Responsive Breakpoints */
@media(max-width:1100px){
  .main{padding:1.3rem 1.4rem}
}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;z-index:50;box-shadow:2px 0 20px rgba(0,0,0,.25)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:1rem}
  .menu-toggle{display:inline-block}
  .overlay.show{display:block}
  .topbar{gap:.6rem}
  .cards-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .main{padding:.8rem}
  .cards-grid{grid-template-columns:1fr}
  table{font-size:.8rem}
  th,td{padding:.4rem .45rem;max-width:160px}
  .topbar h2{font-size:1.15rem}
}

/* ---- Statistik ---- */
.minibar{display:block;height:5px;background:#eef1f5;border-radius:3px;margin-bottom:2px;overflow:hidden}
.minibar>span{display:block;height:100%;background:var(--drk-red);border-radius:3px}
.hbars{display:flex;align-items:flex-end;gap:3px;height:170px;padding-top:.5rem}
.hbar{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.hbar-fill{width:70%;background:var(--drk-red);border-radius:3px 3px 0 0;min-height:2px;transition:.2s}
.hbar:hover .hbar-fill{filter:brightness(1.1)}
.hbar-lbl{font-size:.65rem;color:var(--muted);margin-top:3px}
.wrow{display:flex;align-items:center;gap:.7rem;margin:.35rem 0}
.wrow-lbl{flex:0 0 32px;font-weight:600;font-size:.85rem}
.wrow-bar{flex:1 1 auto;height:16px;background:#eef1f5;border-radius:8px;overflow:hidden}
.wrow-bar>span{display:block;height:100%;background:var(--drk-red);border-radius:8px}
.wrow-val{flex:0 0 70px;text-align:right;font-size:.85rem;color:var(--muted)}
@media(max-width:600px){.hbars{height:130px}.hbar-lbl{font-size:.55rem}}

/* --- RADAR Login-Branding --- */
.auth-logo{display:flex;justify-content:center;margin-bottom:.6rem}
.auth-logo img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(226,0,26,.18))}
.auth-title{text-align:center;margin:.2rem 0 .1rem;font-size:1.8rem;font-weight:800;letter-spacing:.14em;color:var(--text)}
.auth-tag{text-align:center;margin:0 0 1rem;font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.auth-card .sub{text-align:center}
.auth-foot{margin-top:1.4rem;text-align:center;font-size:.72rem;color:var(--muted);border-top:1px solid var(--border);padding-top:.9rem}
