/* Variablen-Overrides nur im Demon Mode */
[data-theme="dark"] {
  --bg: #121a22;
  --surface: #1a232c;
  --muted: #b2bac0;
  --text: #f0f4f8;
  --primary: #e23b3b; /* roter Akzent */
  --primary-600: #c92f2f;
  --card-border: rgba(255,255,255,0.08);
}

/* Grundfarben und Komponenten nur im Dark-Theme */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }

[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar .container,
[data-theme="dark"] .navbar .container-fluid,
[data-theme="dark"] .navbar-brand {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--card-border);
}

/* Container / Brand */
[data-theme="dark"] .navbar .container,
[data-theme="dark"] .navbar .container-fluid,
[data-theme="dark"] .navbar-brand {
  background: transparent !important;
  color: var(--text) !important;
}

/* Text in Navbar */
[data-theme="dark"] .navbar .nav-link,
[data-theme="dark"] .navbar .navbar-text,
[data-theme="dark"] .navbar .btn,
[data-theme="dark"] .navbar .text-dark { color: var(--muted) !important; }
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .nav-link:focus { color: var(--text) !important; }
[data-theme="dark"] .navbar .nav-link.active { color: var(--text) !important; font-weight: 600; }

/* Navbar Breite */
[data-theme="dark"] .navbar .container,
[data-theme="dark"] .navbar .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Buttons mit Höllenfeuer-Akzenten */
[data-theme="dark"] .btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; }
[data-theme="dark"] .btn-primary:hover { background: var(--primary-600) !important; border-color: var(--primary-600) !important; }
[data-theme="dark"] .btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; }
[data-theme="dark"] .btn-outline-primary:hover { color: #fff !important; background: var(--primary) !important; }

/* Links mit rotem Akzent */
[data-theme="dark"] a,
[data-theme="dark"] a:hover,
[data-theme="dark"] a:active { color: #ff6b6b; }

/* Allgemeine Flächen */
[data-theme="dark"] .container,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--card-border) !important;
}

/* Formulare */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
  background: #14212b !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: none !important;
}

/* Tabellen */
[data-theme="dark"] .table,
[data-theme="dark"] table th,
[data-theme="dark"] table td {
  color: var(--text) !important;
  background: transparent !important;
}

/* Code/Previews */
[data-theme="dark"] pre,
[data-theme="dark"] .bg-dark {
  background: #0c1721 !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Profile photo box */
[data-theme="dark"] .profile-photo-box {
  background: transparent;
  border: 1px solid var(--card-border);
  padding: .5rem;
}

/* Modal backdrop */
[data-theme="dark"] .modal-backdrop { background-color: rgba(0,0,0,0.5) !important; }

/* Muted */
[data-theme="dark"] small.text-muted,
[data-theme="dark"] .text-muted { color: var(--muted) !important; }

/* Chat */
[data-theme="dark"] .chat-area {
  background: #0f1b26 !important;
  color: var(--text) !important;
}
[data-theme="dark"] .chat-area small.text-muted,
[data-theme="dark"] .chat-area .text-muted { color: var(--muted) !important; }
[data-theme="dark"] .chat-area,
[data-theme="dark"] .chat-area > div {
  background: transparent !important;
  color: var(--text) !important;
}

/* Platzhalter */
[data-theme="dark"] .form-control::placeholder { color: rgba(240,244,248,0.55); }

/* Bilder */
[data-theme="dark"] img {
  background-color: transparent;
  filter: brightness(0.94) contrast(0.98);
  transition: filter .15s ease;
}
[data-theme="dark"] .profile-photo-box img,
[data-theme="dark"] .thumb-box img,
[data-theme="dark"] .modal-body img,
[data-theme="dark"] .gallery img,
[data-theme="dark"] .chat-area img {
  background-color: rgba(255,255,255,0.03);
  filter: brightness(0.94) contrast(0.98);
}

/* NSFW/Warn */
[data-theme="dark"] .nsfw-mask img,
[data-theme="dark"] .warn-mask img,
[data-theme="dark"] img.warn-blur {
  filter: blur(8px) brightness(0.78) contrast(0.92);
}
[data-theme="dark"] .warn-mask:active img,
[data-theme="dark"] .warn-mask img:not(.warn-blur) { filter: none; }

/* Preview */
[data-theme="dark"] .bb-preview {
  background: #0c1721 !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Footer */
[data-theme="dark"] .footer {
  background: transparent;
  border-top: 1px solid var(--card-border);
  color: var(--muted);
}

/* Spoiler */
[data-theme="dark"] .bb-spoiler {
  border: 1px solid rgba(255,255,255,0.05) !important;
  background: #101a21 !important;
  color: var(--text) !important;
}
[data-theme="dark"] .bb-spoiler summary {
  background: rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .bb-spoiler .bb-spoiler-body {
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .bb-spoiler[open] summary {
  background: rgba(255,255,255,0.05) !important;
}

/* Player */
[data-theme="dark"] .bb-player {
  border: 1px solid rgba(255,255,255,0.05) !important;
  background: #0c1721 !important;
  color: var(--text) !important;
}
[data-theme="dark"] .bb-player .bb-player-title { color: var(--text) !important; }
[data-theme="dark"] .bb-player audio,
[data-theme="dark"] .bb-player video { background: #000; }

/* Hero (Demon Mode) mit Feuer-Glow */
[data-theme="dark"] .hero-urh {
  background: radial-gradient(120% 140% at 50% 0%, #1a232c 0%, #0f1b26 55%, #0b131a 100%);
}
[data-theme="dark"] .hero-urh::after {
  height: 140px;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255,70,0,.30), rgba(255,70,0,0) 70%);
}