: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}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:8px;-webkit-overflow-scrolling:touch}

/* 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}
}