/* ============================================================
   Dark Theme – Dunkel
   GitHub-inspiriert, hoher Kontrast, alle Variablen
   ============================================================ */
:root {
  /* Hintergründe – abgestuft für Tiefe */
  --bg:            #0f1013;
  --bg-surface:    #17181c;
  --bg-elevated:   #1f2025;
  --bg-hover:      #282a30;

  /* Rahmen */
  --border:        #2a2c33;
  --border-soft:   #1e2025;

  /* Texte – DSGVO-konformer Kontrast (WCAG AA) */
  --text:          #eef0f3;
  --text-muted:    #a3a7b3;
  --text-faint:    #6b6f7b;

  /* Akzent – Indigo/Violett */
  --accent:        #7c6ff0;
  --accent-soft:   #a599ff;
  --accent-glow:   rgba(124,111,240,.16);

  /* Status-Farben – heller für Dark-Hintergrund */
  --green:         #3fb950;
  --green-soft:    #56d364;
  --orange:        #d29922;
  --red:           #f85149;
  --red-soft:      #ff7b72;

  /* Layout */
  --radius:        10px;
  --radius-lg:     14px;
  --shadow:        0 1px 3px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:     0 8px 24px rgba(0,0,0,.5);
  --sidebar-width: 210px;
}

/* Body */
body { background:var(--bg); color:var(--text) }

/* Topbar */
.topbar { background:var(--bg-surface); border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(0,0,0,.3) }
.topbar-brand-name { color:var(--text) }
.topbar-brand-ver  { color:var(--text-faint) }
.topbar-user       { background:var(--bg-elevated); border-color:var(--border); color:var(--text-muted) }
.topbar-icon-btn   { color:var(--text-muted) }
.topbar-icon-btn:hover { background:var(--bg-hover); color:var(--text) }
.lang-btn          { border-color:var(--border); color:var(--text-muted) }
.topbar-logout     { color:var(--text-faint) }
.topbar-logout:hover { color:var(--red-soft); background:rgba(248,81,73,.1) }
.hamburger         { background:var(--bg-elevated); border-color:var(--border) }
.hamburger span    { background:var(--text-muted) }

/* Sidebar */
.sidebar           { background:var(--bg-surface); border-right:1px solid var(--border) }
.sidebar a         { color:var(--text-muted) }
.sidebar a:hover   { background:var(--bg-hover); color:var(--text) }
.sidebar a.active  { background:var(--accent-glow); color:var(--accent) }
.sidebar-sep       { border-color:var(--border) }
.sidebar-usercard  { background:var(--bg-elevated); border-color:var(--border) }
.sidebar-icon      { color:var(--text-faint) }
.sidebar a.active .sidebar-icon { color:var(--accent) }
.notif-badge       { background:var(--accent); color:#0d1117 }

/* Karten */
.card              { background:var(--bg-surface); border-color:var(--border); box-shadow:var(--shadow) }
.card-title        { color:var(--text-faint) }

/* Formulare */
.form-group label  { color:var(--text-muted) }
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--bg-elevated); border-color:var(--border); color:var(--text)
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--accent); outline:none
}
.form-group input::placeholder { color:var(--text-faint) }

/* Buttons */
.btn-outline       { background:var(--bg-elevated); border-color:var(--border); color:var(--text-muted) }
.btn-outline:hover { background:var(--bg-hover); color:var(--text); border-color:var(--accent) }

/* Alerts – angepasst für Dark-Mode Lesbarkeit */
.alert-error   { background:rgba(248,81,73,.12);  border-color:rgba(248,81,73,.3);  color:#ff9492 }
.alert-success { background:rgba(63,185,80,.12);  border-color:rgba(63,185,80,.3);  color:#7ee787 }
.alert-info    { background:rgba(88,166,255,.12); border-color:rgba(88,166,255,.3); color:#79b8ff }
.alert-warning { background:rgba(210,153,34,.12); border-color:rgba(210,153,34,.3); color:#e3b341 }

/* Tabellen */
.table th      { background:var(--bg-elevated); color:var(--text-faint); border-color:var(--border) }
.table td      { border-color:var(--border-soft); color:var(--text-muted) }
.table tr:hover td { background:var(--bg-hover) }

/* Footer */
.portal-footer { background:var(--bg-surface); border-color:var(--border); color:var(--text-faint) }

/* Dropdown */
#lang-dd       { background:var(--bg-surface); border-color:var(--border); color:var(--text) }
select option  { background:var(--bg-elevated); color:var(--text) }

/* Badges */
.badge         { background:var(--bg-elevated); color:var(--text-muted); border:1px solid var(--border) }

/* Code */
code           { background:var(--bg-elevated); border:1px solid var(--border); color:var(--accent-soft) }

/* Scrollbar (Webkit) */
::-webkit-scrollbar       { width:6px; height:6px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--text-faint) }