/* ===== SCROLLBAR AUSBLENDEN (global) ===== */
* {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge */
}
*::-webkit-scrollbar {
  display: none;                /* Chrome / Safari / Opera */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-dark:    #0d1117;
  --bg-card:    #161b22;
  --bg-input:   #21262d;
  --border:     #30363d;
  --accent:     #e63946;
  --text:       #e6edf3;
  --text-muted: #8b949e;
  --success:    #3fb950;
  --warn:       #d29922;
  --info:       #388bfd;
}

body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg-dark); color:var(--text); height:100vh; overflow:hidden; }

.admin-wrapper { display:flex; height:100vh; }

/* SIDEBAR */
.admin-sidebar { width:230px; background:var(--bg-card); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.admin-logo { display:flex; align-items:center; gap:12px; padding:20px 16px; border-bottom:1px solid var(--border); font-size:18px; }
.admin-logo span { font-size:28px; }
.admin-logo div  { font-weight:700; font-size:14px; line-height:1.3; }
.admin-logo small { color:var(--accent); font-size:11px; }
.admin-nav { flex:1; padding:10px 10px 18px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#30363d transparent; }
.admin-nav-btn { background:transparent; border:none; color:var(--text-muted); padding:10px 12px; border-radius:8px; text-align:left; font-size:13px; cursor:pointer; transition:all 0.2s; font-weight:500; }
.admin-nav-btn:hover { background:var(--bg-input); color:var(--text); }
.admin-nav-btn.active { background:rgba(230,57,70,0.12); color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); font-weight:600; }
.admin-nav-btn:disabled { opacity:0.3; cursor:not-allowed; }
.admin-sidebar-footer { padding:16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.admin-back-btn { color:var(--text-muted); text-decoration:none; font-size:13px; transition:color 0.2s; }
.admin-back-btn:hover { color:var(--accent); }

/* MAIN */
.admin-main { flex:1; overflow-y:auto; padding:28px; }
.admin-banner { padding:12px 20px; border-radius:10px; margin-bottom:20px; font-size:14px; font-weight:600; }
.admin-section { display:none; }
.admin-section.active { display:block; }
.admin-section h1 { font-size:24px; font-weight:700; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); }

/* STATS */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px 16px; text-align:center; transition:border-color 0.2s; }
.stat-card:hover { border-color:var(--accent); }
.stat-card-icon  { font-size:28px; margin-bottom:8px; }
.stat-card-value { font-size:26px; font-weight:700; }
.stat-card-label { font-size:12px; color:var(--text-muted); margin-top:4px; }
.stat-card-sub { font-size:10px; color:var(--text-muted); opacity:.7; margin-top:3px; line-height:1.3; }

/* CARDS */
.admin-cards-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:16px; }
.admin-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:16px; }
.admin-card h3 { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:16px; }

/* HEALTH-TILES (System-Status) */
.health-tile {
  background:var(--bg-input);
  border:1px solid var(--border);
  border-left:4px solid var(--border);
  border-radius:10px;
  padding:11px 13px;
  font-size:12px;
  line-height:1.5;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, transform 0.1s;
  position:relative;
}
.health-tile:hover { background:rgba(255,255,255,0.03); transform:translateY(-1px); }
.health-tile.ok      { border-left-color:#22c55e; }
.health-tile.warn    { border-left-color:#eab308; }
.health-tile.error   { border-left-color:#ef4444; }
.health-tile.muted   { border-left-color:#6b7280; opacity:0.7; }
.health-tile .label  { font-weight:700; font-size:13px; margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.health-tile .value  { color:var(--text); font-size:12px; }
.health-tile .sub    { color:var(--text-muted); font-size:10px; margin-top:3px; }
.health-tile .badge  { position:absolute; top:8px; right:10px; font-size:14px; }
.health-tile.expandable::after {
  content:'▼';
  position:absolute; bottom:6px; right:9px;
  font-size:9px; opacity:0.4;
}
.health-tile.expandable:hover::after { opacity:0.8; }

/* FORM */
.admin-form label { display:block; font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.admin-input { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--text); font-size:13px; outline:none; font-family:inherit; transition:border-color 0.2s; resize:vertical; }
.admin-input:focus { border-color:var(--accent); }

/* BUTTONS */
.admin-btn { padding:9px 16px; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:opacity 0.2s,transform 0.1s; width:100%; margin-top:8px; }
.admin-btn:hover  { opacity:0.85; }
.admin-btn:active { transform:scale(0.98); }
.admin-btn.success { background:var(--success); color:#000; }
.admin-btn.danger  { background:var(--accent);  color:#fff; }
.admin-btn.warn    { background:var(--warn);    color:#000; }
.admin-btn.info    { background:var(--info);    color:#fff; }
.admin-btn-sm { padding:3px 9px; border:none; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; transition:opacity 0.2s; white-space:nowrap; }
.admin-btn-sm.danger  { background:rgba(230,57,70,0.15);  color:var(--accent);  border:1px solid var(--accent); }
.admin-btn-sm.warn    { background:rgba(210,153,34,0.15); color:var(--warn);    border:1px solid var(--warn); }
.admin-btn-sm.success { background:rgba(63,185,80,0.15);  color:var(--success); border:1px solid var(--success); }
.admin-btn-sm.info    { background:rgba(56,139,253,0.15); color:var(--info);    border:1px solid var(--info); }
.admin-btn-sm:hover { opacity:0.8; }

/* TABLE */
.admin-table { width:100%; border-collapse:collapse; font-size:12px; }
.admin-table th { padding:8px 10px; text-align:left; font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--border); white-space:nowrap; }
.admin-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:hover td { background:rgba(255,255,255,0.02); }

/* BADGES */
.badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; }
.badge-banned  { background:rgba(230,57,70,0.2);  color:var(--accent); }
.badge-muted   { background:rgba(210,153,34,0.2); color:var(--warn); }
.badge-normal  { background:rgba(63,185,80,0.2);  color:var(--success); }

/* ===== TEAM-ROLLEN BADGES ===== */
.role-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.role-spieler    { background:rgba(139,148,158,0.2);  color:#8b949e;  border:1px solid #8b949e; }
.role-supporter  { background:rgba(56,139,253,0.2);   color:#388bfd;  border:1px solid #388bfd; }
.role-moderator  { background:rgba(210,153,34,0.2);   color:#d29922;  border:1px solid #d29922; }
.role-admin      { background:rgba(230,57,70,0.2);    color:#e63946;  border:1px solid #e63946; }
.role-superadmin { background:rgba(167,139,250,0.2);  color:#a78bfa;  border:1px solid #a78bfa; }
.role-inhaber    { background:rgba(250,204,21,0.18);  color:#facc15;  border:1px solid #facc15; }

.role-badge-large { font-size:13px; padding:4px 14px; border-radius:20px; font-weight:700; margin-bottom:4px; text-align:center; }

/* STATUS */
.admin-status-box { padding:10px 14px; border-radius:8px; font-size:13px; border:1px solid var(--border); background:var(--bg-input); color:var(--text-muted); }
.search-row { display:flex; gap:8px; margin-bottom:4px; }
.search-row .admin-input { flex:1; margin-top:0; }
.search-row .admin-btn { width:auto; margin-top:0; white-space:nowrap; }
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick-actions .admin-btn { margin-top:0; }

/* RESTART */
.restart-countdown { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(210,153,34,0.1); border:1px solid var(--warn); border-radius:8px; margin-top:12px; font-size:13px; color:var(--warn); }
.restart-countdown strong { font-size:20px; font-variant-numeric:tabular-nums; }

/* ANNOUNCE */
.announce-item { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:8px; margin-bottom:8px; border:1px solid var(--border); font-size:13px; }
.announce-item.info    { background:rgba(56,139,253,0.08);  border-color:var(--info); }
.announce-item.warn    { background:rgba(210,153,34,0.08);  border-color:var(--warn); }
.announce-item.danger  { background:rgba(230,57,70,0.08);   border-color:var(--accent); }
.announce-item.success { background:rgba(63,185,80,0.08);   border-color:var(--success); }

/* SERVER LOG LEVELS */
.log-info     { color:var(--info); }
.log-warn     { color:var(--warn); }
.log-error    { color:var(--accent); }
.log-critical { color:#ff0000; font-weight:700; }

/* ROLE STATS */
.role-stat-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.role-stat-row:last-child { border-bottom:none; }

/* PLAYER DETAIL */
.player-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.player-stat-box  { background:var(--bg-input); border-radius:8px; padding:10px; font-size:12px; text-align:center; }
.player-stat-box .val { font-size:18px; font-weight:700; color:var(--text); }
.player-stat-box .lbl { color:var(--text-muted); margin-top:2px; }

/* INGAME STYLES (für game.html) */
/* 2026-05-29 (Bug 3 — Mobile-Fix): white-space:normal statt nowrap, sonst werden
   lange Texte horizontal überlaufen lassen und der X-Button verschwindet. */
.ingame-announcement { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:8000; padding:12px 24px; border-radius:10px; font-size:14px; font-weight:600; box-shadow:0 4px 20px rgba(0,0,0,0.5); display:block; max-width:600px; white-space:normal; animation:slideDown 0.3s ease; }
@keyframes slideDown { from{transform:translateX(-50%) translateY(-20px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
.ingame-announcement.info    { background:#161b22; border:1px solid var(--info);    color:var(--info); }
.ingame-announcement.warn    { background:#161b22; border:1px solid var(--warn);    color:var(--warn); }
.ingame-announcement.danger  { background:#161b22; border:1px solid var(--accent);  color:var(--accent); }
.ingame-announcement.success { background:#161b22; border:1px solid var(--success); color:var(--success); }
.ingame-restart-banner { position:fixed; bottom:44px; left:50%; transform:translateX(-50%); z-index:8000; background:#161b22; border:1px solid var(--warn); color:var(--warn); padding:10px 24px; border-radius:10px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:12px; box-shadow:0 4px 20px rgba(0,0,0,0.5); }
.ingame-maintenance-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:9998; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; text-align:center; }
.ingame-maintenance-overlay h2 { font-size:28px; color:var(--warn); }
.ingame-maintenance-overlay p  { color:var(--text-muted); font-size:15px; max-width:400px; }

/* ROLE BADGES in Chat / Profile */
.chat-role-badge { font-size:10px; padding:1px 6px; border-radius:10px; font-weight:700; vertical-align:middle; margin-right:4px; }

/* ===== CHAT ROLE BADGES (Pill mit Icon + Label) ===== */
/* Used by formatChatUsername() in game.js and floatingChat.js */
.chat-role-pill {
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:9px;
  font-weight:700;
  padding:1px 6px;
  border-radius:5px;
  text-transform:uppercase;
  letter-spacing:0.4px;
  vertical-align:middle;
  white-space:nowrap;
}
.chat-role-pill.role-supporter   { background:rgba(56,139,253,0.18);  color:#388bfd;  border:1px solid rgba(56,139,253,0.5); }
.chat-role-pill.role-moderator   { background:rgba(210,153,34,0.18);  color:#d29922;  border:1px solid rgba(210,153,34,0.5); }
.chat-role-pill.role-admin       { background:rgba(230,57,70,0.18);   color:#e63946;  border:1px solid rgba(230,57,70,0.5); }
.chat-role-pill.role-superadmin  { background:rgba(167,139,250,0.18); color:#a78bfa;  border:1px solid rgba(167,139,250,0.5); }
.chat-role-pill.role-inhaber     { background:rgba(250,204,21,0.18);  color:#facc15;  border:1px solid rgba(250,204,21,0.5); }

/* Username-Farben — färbt den Spielernamen passend zur Rolle ein */
.chat-username.is-supporter   { color:#388bfd; font-weight:700; }
.chat-username.is-moderator   { color:#d29922; font-weight:700; }
.chat-username.is-admin       { color:#e63946; font-weight:700; }
.chat-username.is-superadmin  { color:#a78bfa; font-weight:800; text-shadow:0 0 6px rgba(167,139,250,0.4); }
.chat-username.is-inhaber     { color:#facc15; font-weight:800; text-shadow:0 0 6px rgba(250,204,21,0.4); }
/* Founder Elite hat eigene Goldfarbe — überschreibt Team-Farbe wenn beides vorliegt */
.chat-username.is-founder-elite { color:#d29922 !important; font-weight:800; }
/* ════════════════════════════════════════════════════════════════════
   📈 INSIGHTS DASHBOARD (Phase 4)
   ════════════════════════════════════════════════════════════════════ */
.insights-tab-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.insights-tab-btn:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
.insights-tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.insights-tab-content {
  animation: fadeInInsights 0.2s ease;
}
@keyframes fadeInInsights {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Heatmap-Tile */
.heatmap-cell {
  display: inline-block;
  width: 28px;
  height: 22px;
  border-radius: 3px;
  text-align: center;
  font-size: 10px;
  line-height: 22px;
  color: rgba(255,255,255,0.6);
  cursor: help;
  transition: transform 0.1s;
}
.heatmap-cell:hover { transform: scale(1.18); z-index: 10; position: relative; }

/* Activity-Feed-Item */
.activity-feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  animation: slideInActivity 0.25s ease;
}
@keyframes slideInActivity {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.activity-feed-item:hover { background: rgba(255,255,255,0.02); }
.activity-feed-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}

/* Top-Player-Card */
.top-player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 6px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.top-player-row:last-child { border-bottom: none; }
.top-player-row:nth-child(1) { background: linear-gradient(90deg, rgba(255,215,0,0.12), transparent); }
.top-player-row:nth-child(2) { background: linear-gradient(90deg, rgba(192,192,192,0.10), transparent); }
.top-player-row:nth-child(3) { background: linear-gradient(90deg, rgba(205,127,50,0.10), transparent); }
.top-player-rank {
  width: 22px; text-align: center; font-weight: 700;
  color: var(--text-muted); font-size: 11px;
}

/* Section-Header */
.admin-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}

/* Bar-Chart (Wachstum) */
.growth-bar-wrap {
  position: relative; height: 200px;
  display: flex; align-items: flex-end; gap: 2px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.growth-bar {
  flex: 1; min-width: 4px;
  background: linear-gradient(180deg, var(--info), rgba(56,139,253,0.4));
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s;
  cursor: help;
}
.growth-bar:hover { opacity: 0.7; }

/* Server-Logs */
.server-log-line {
  font-family: monospace; font-size: 11px;
  padding: 3px 8px; border-bottom: 1px solid rgba(255,255,255,0.03);
  white-space: pre-wrap; word-break: break-all;
}
.server-log-line.error    { color: #ef4444; background: rgba(239,68,68,0.04); }
.server-log-line.warn     { color: #eab308; background: rgba(234,179,8,0.04); }
.server-log-line.info     { color: #388bfd; }
.server-log-line.success  { color: #22c55e; }

/* Mass-Mail-Form */
.massmail-target-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
}
.massmail-target-card:hover { background: rgba(255,255,255,0.03); }
.massmail-target-card.selected {
  border-color: var(--accent);
  background: rgba(230,57,70,0.08);
}


/* ════════════════════════════════════════════════════════════════════
   🎫 TICKETS MEGA-AUSBAU (Phase 4)
   ════════════════════════════════════════════════════════════════════ */
tr.ticket-selected {
  background: rgba(56,139,253,0.08) !important;
}
tr.ticket-selected:hover td {
  background: rgba(56,139,253,0.12) !important;
}

.sla-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.sla-bar > .fill {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  transition: width 0.3s, background 0.3s;
}
.sla-bar.ok    > .fill { background: #22c55e; }
.sla-bar.warn  > .fill { background: #eab308; }
.sla-bar.breach > .fill { background: #ef4444; }

@media (max-width: 1024px) {
  .admin-sidebar { width: 200px; }
  .admin-main    { padding: 20px 16px; }
  .stats-grid    { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .admin-cards-row { grid-template-columns: 1fr 1fr; }
  .admin-table th, .admin-table td { padding: 6px 8px; }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767px) {

  /* Sidebar als Top-Bar */
  body { overflow: auto; }

  .admin-wrapper {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .admin-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
  }

  /* Logo kompakter */
  .admin-logo {
    padding: 12px 16px;
    font-size: 15px;
  }
  .admin-logo span { font-size: 22px; }
  .admin-logo div  { font-size: 13px; }

  .admin-nav {
    max-height: 38vh;
    padding: 8px;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .admin-nav-group-head { position: static; }

  .admin-nav-btn {
    padding: 9px 12px;
    font-size: 12px;
  }

  /* Footer verstecken auf Mobile */
  .admin-sidebar-footer { display: none; }

  /* Main */
  .admin-main {
    padding: 16px 12px;
    overflow-y: auto;
    flex: 1;
  }

  .admin-section h1 { font-size: 18px; margin-bottom: 14px; }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }
  .stat-card { padding: 14px 10px; }
  .stat-card-icon  { font-size: 22px; margin-bottom: 6px; }
  .stat-card-value { font-size: 20px; }
  .stat-card-label { font-size: 11px; }

  /* Cards */
  .admin-card { padding: 14px 12px; margin-bottom: 12px; }
  .admin-cards-row { grid-template-columns: 1fr; gap: 12px; }

  /* IP-Ban Formular */
  .admin-card div[style*="grid-template-columns:1fr 1fr auto auto"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tabellen — horizontal scrollbar */
  .admin-card[style*="overflow-x:auto"],
  .admin-card[style*="overflow-x: auto"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table { min-width: 600px; }
  .admin-table th, .admin-table td { padding: 6px 8px; font-size: 11px; }

  /* Player stat grid 3 Spalten auf Mobile */
  .player-stat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .player-stat-box .val { font-size: 15px; }

  /* Quick Actions */
  .quick-actions { grid-template-columns: 1fr; }

  /* Buttons */
  .admin-btn { padding: 10px 14px; font-size: 13px; }
  .search-row { flex-wrap: wrap; }
  .search-row .admin-btn { width: auto; }

  /* Player Modal */
  div[id="playerModal"] > div {
    margin: 8px !important;
    padding: 16px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 12px !important;
  }
}

/* ── Small Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .player-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-nav-btn { padding: 7px 10px; font-size: 11px; }
  .admin-table { min-width: 500px; }
}

/* ── Seitenleiste: Kategorien ─────────────────────────────── */
.admin-nav::-webkit-scrollbar { width:9px; }
.admin-nav::-webkit-scrollbar-track { background:transparent; }
.admin-nav::-webkit-scrollbar-thumb { background:#30363d; border-radius:9px; border:2px solid var(--bg-card); }
.admin-nav::-webkit-scrollbar-thumb:hover { background:#484f58; }

.admin-nav-group { --ton:#58a6ff; --ton-weich:rgba(88,166,255,0.14); margin-bottom:2px; }
.admin-nav-group[data-group="betreuung"] { --ton:#a78bfa; --ton-weich:rgba(167,139,250,0.14); }
.admin-nav-group[data-group="spieler"]   { --ton:#3fb950; --ton-weich:rgba(63,185,80,0.14); }
.admin-nav-group[data-group="inhalte"]   { --ton:#d29922; --ton-weich:rgba(210,153,34,0.14); }
.admin-nav-group[data-group="system"]    { --ton:#39c5cf; --ton-weich:rgba(57,197,207,0.14); }

.admin-nav-group-head {
  position:sticky; top:-10px; z-index:2;
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 8px 8px; margin:0; border:0; border-radius:7px;
  background-color:var(--bg-card, #161b22); color:var(--text-muted); cursor:pointer;
  font-family:inherit; font-size:10px; font-weight:700; line-height:1;
  letter-spacing:0.075em; text-transform:uppercase; text-align:left;
  transition:color 0.15s, background-color 0.15s;
}
.admin-nav-group-head::before {
  content:""; flex-shrink:0; width:3px; height:12px; border-radius:2px;
  background-color:var(--ton); opacity:0.9;
}
.admin-nav-group-head:hover { color:var(--text); background-color:var(--bg-input, #21262d); }
.admin-nav-group-head:focus-visible { outline:2px solid var(--ton); outline-offset:-2px; }
.admin-nav-gruppentitel { flex:1; }
.admin-nav-gruppenzahl {
  font-size:9.5px; font-weight:700; letter-spacing:0; padding:2px 6px;
  border-radius:20px; background-color:var(--ton-weich); color:var(--ton);
  font-variant-numeric:tabular-nums;
}
.admin-nav-gruppenzahl:empty { display:none; }
.admin-nav-chevron { font-size:9px; opacity:0.55; transition:transform 0.18s ease; }
.admin-nav-group.zu .admin-nav-chevron { transform:rotate(-90deg); }

.admin-nav-group-body {
  margin:0 0 0 11px; padding-left:9px;
  border-left:1px solid var(--border);
  transition:border-color 0.18s ease;
}
.admin-nav-group.zu .admin-nav-group-body { border-left-color:transparent; }
.admin-nav-group:hover .admin-nav-group-body { border-left-color:var(--ton); }

.admin-nav-group-inner {
  display:flex; flex-direction:column; gap:2px; padding:2px 0 6px;
  max-height:900px; overflow:hidden;
  transition:max-height 0.22s ease, opacity 0.16s ease, padding 0.22s ease;
}
.admin-nav-group.zu .admin-nav-group-inner {
  max-height:0; opacity:0; padding-top:0; padding-bottom:0;
}

.admin-nav-group .admin-nav-btn { padding:8px 10px; font-size:12.5px; border-radius:7px; }
.admin-nav-group .admin-nav-btn.active {
  background-color:var(--ton-weich); color:var(--text);
  box-shadow:inset 2px 0 0 var(--ton); font-weight:600;
}

@media (prefers-reduced-motion: reduce) {
  .admin-nav-chevron, .admin-nav-group-inner, .admin-nav-group-body { transition:none; }
}
