/*
 * ================================================================
 * Vermittco — Dark Mode CSS (vc-dark.css)
 * Überschreibt CSS-Variablen + spezifische Klassen
 * ================================================================
 */

/* ── CSS Variablen überschreiben (gilt für ALLE Seiten) ── */
[data-theme="dark"] {
  /* index.html Variablen */
  --white:  #1B2330 !important;
  --off:    #141417 !important;
  --bord:   #2c2c33 !important;
  --text:   #E8EDF5 !important;
  --tmid:   #A0AABA !important;
  --tmut:   #68788F !important;

  /* account.html / alle anderen Seiten */
  --navy:   #0a0a0c !important;
  --navy2:  #0d0d10 !important;
  --blue:   #2E5FB5 !important;
  --blueh:  #264F95 !important;
  --bluel:  #2E5FB5 !important;
  --card:   #1b1b20 !important;
  --grn:    #34D399 !important;
  --red:    #F87171 !important;
  --r:      10px;
}

/* ── Body & HTML ── */
html[data-theme="dark"],
[data-theme="dark"] body {
  background: #0f0f12 !important;
  color: #E8EDF5 !important;
  color-scheme: dark !important;
}

/* Light-Mode: html NICHT auf Weiß setzen — das Hero-Foto ist der (propagierte) Seiten-Hintergrund; ein html-Hintergrund würde das Foto durch die unteren Sektionen durchscheinen lassen. */
html[data-theme="light"] {
  color-scheme: light !important;
}

/* Überscrollen bleibt möglich (Gummiband) — der gezogene Bereich hat dieselbe dunkle Farbe wie die Seite (siehe html/body-Hintergrund + color-scheme oben), wirkt wie eine Erweiterung. */

/* ── ALLE weißen Hintergründe dunkel machen ── */
[data-theme="dark"] * {
  border-color: #28282e;
}

[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
  background: #17171c !important;
}

[data-theme="dark"] [style*="color:#0F1722"],
[data-theme="dark"] [style*="color: #0F1722"],
[data-theme="dark"] [style*="color:#100F18"],
[data-theme="dark"] [style*="color:#0f1722"] {
  color: #E8EDF5 !important;
}

[data-theme="dark"] [style*="color:#3D4A5C"],
[data-theme="dark"] [style*="color:#3C3B48"],
[data-theme="dark"] [style*="color:#6B7A90"],
[data-theme="dark"] [style*="color:#6E6D7A"] {
  color: #A0AABA !important;
}

/* ── Cards & Boxen ── */
[data-theme="dark"] .card,
[data-theme="dark"] .box,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .content-box,
[data-theme="dark"] .k-card,
[data-theme="dark"] .bereiche-card,
[data-theme="dark"] .zf-item,
[data-theme="dark"] .step-card,
[data-theme="dark"] .ip-card,
[data-theme="dark"] .list-card,
[data-theme="dark"] .review-card,
[data-theme="dark"] .faq-item {
  background: #17171c !important;
  border-color: #28282e !important;
  color: #E8EDF5 !important;
}

/* ── Alle Texte in Cards ── */
[data-theme="dark"] .card *,
[data-theme="dark"] .box *,
[data-theme="dark"] .k-card * {
  color: inherit;
}

/* ── Headings ── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .s-title,
[data-theme="dark"] .sh,
[data-theme="dark"] .bereiche-title,
[data-theme="dark"] .zf-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .sec-title {
  color: #E8EDF5 !important;
}

/* ── Paragraphen & Body Text ── */
[data-theme="dark"] p,
[data-theme="dark"] .s-sub,
[data-theme="dark"] .card-sub,
[data-theme="dark"] .page-sub,
[data-theme="dark"] .bereiche-desc,
[data-theme="dark"] .zf-desc,
[data-theme="dark"] .warum-text,
[data-theme="dark"] .step-desc,
[data-theme="dark"] .ip-desc {
  color: #A0AABA !important;
}

/* ── Navigation ── */
[data-theme="dark"] .nav {
  background: #0a0a0c !important;
  border-bottom: 1px solid #28282e !important;
}
/* 🚨 Über dem Hero durchsichtig — wie im Hellmodus. Oben auf einer Kategorie-
   oder Startseite soll das Bild bis unter die Kopfzeile laufen; die schwarze
   Leiste schnitt es ab (Betreiber-Bild). Sobald gescrollt wird, setzt die
   Seite selbst `.nav.sc` und die Leiste bekommt ihren Grund zurück. */
[data-theme="dark"] body:has(.hero) .nav:not(.sc) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* ── Inputs & Selects ── */
/* .vcsw ist ein Schalter, kein Eingabefeld — sonst uebermalt die !important-
   Regel unten seine Farben (er war dadurch schwarz statt dunkelblau). */
/* 🚨 Feldrand (07.08.): #28282e war auf den dunklen Flaechen praktisch
   unsichtbar — Betreiber: „im Hellmodus haben die Felder Raender, im
   Dunkelmodus nicht." Nachgemessen: hell Rand #E4E8EF auf #FFF = ~22 Stufen
   je Kanal, dunkel #28282e auf #17171C = ~17 Stufen, und weil zusaetzlich
   Feld und Flaeche kaum kontrastieren, sah man gar keine Kante. #3d3d48
   gibt ~40 Stufen — dieselbe Lesbarkeit wie hell. Bewusst HIER an der
   globalen Regel, damit es JEDES Feld trifft, egal welche Klasse oder
   welcher Behaelter (die Erstellformulare rendern je nach Kategorie
   unterschiedliche Feld-Bausteine). */
[data-theme="dark"] input:not([type="range"]):not(.vcsw),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .field-input,
[data-theme="dark"] .search-input {
  background: #151518 !important;
  border-color: #3d3d48 !important;
  color: #E8EDF5 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #68788F !important;
}

[data-theme="dark"] select option {
  background: #17171c !important;
  color: #E8EDF5 !important;
}

/* ── Erstellformulare: sichtbare Feldränder auch im Dunkelmodus ──────────
   BETREIBER-MELDUNG (07.08.): „Im Hellmodus haben die Auswahlfelder Ränder,
   im Dunkelmodus nicht." Nachgemessen im Immobilien-Formular:
     hell   Feld #F7F8FA auf Karte #FFFFFF, Rand #E4E8EF  → Kante sichtbar
     dunkel Feld #0F0F12 auf Karte #17171C, Rand #28282E  → Unterschied nur
            ~17 Stufen je Kanal, also praktisch unsichtbar.
   Der Rand war also DA, nur zu schwach. Hier bekommt er im Dunkelmodus
   genug Kontrast (≈40 Stufen gegen die Karte) — gilt für alle Kategorien,
   auch die weiteren, weil alle Erstellformulare in .vcwiz stecken.
   Schalter, Kontrollkästchen und Optionsfelder bleiben ausdrücklich außen
   vor: sie holen ihre Farbe aus accent-color bzw. eigenen Regeln. */
[data-theme="dark"] .vcwiz.vcwiz.vcwiz input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.vcsw),
[data-theme="dark"] .vcwiz.vcwiz.vcwiz select,
[data-theme="dark"] .vcwiz.vcwiz.vcwiz textarea,
[data-theme="dark"] [id$="AddBox"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.vcsw),
[data-theme="dark"] [id$="AddBox"] select,
[data-theme="dark"] [id$="AddBox"] textarea {
  border-color: #3d3d48 !important;
}
/* Beim Hineinklicken bleibt der bekannte blaue Fokusrahmen führend. */
[data-theme="dark"] .vcwiz.vcwiz.vcwiz input:focus,
[data-theme="dark"] .vcwiz.vcwiz.vcwiz select:focus,
[data-theme="dark"] .vcwiz.vcwiz.vcwiz textarea:focus,
[data-theme="dark"] [id$="AddBox"] input:focus,
[data-theme="dark"] [id$="AddBox"] select:focus,
[data-theme="dark"] [id$="AddBox"] textarea:focus {
  border-color: #5B9BF8 !important;
}

/* ── Buttons ── */
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .header-btn,
[data-theme="dark"] .card-cta,
[data-theme="dark"] .sec-sort,
[data-theme="dark"] .quick-link {
  background: #17171c !important;
  border-color: #28282e !important;
  color: #A0AABA !important;
}

[data-theme="dark"] .quick-link:hover {
  border-color: #4A7DE8 !important;
  color: #7BAFF8 !important;
  background: rgba(74,125,232,0.08) !important;
}

[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .header-btn:hover {
  border-color: #4A7DE8 !important;
  color: #E8EDF5 !important;
}

/* ── Sidebar (account.html) ── */
[data-theme="dark"] .acc-sidebar,
[data-theme="dark"] .acc-wrap > aside {
  background: #0a0a0c !important;
  border-color: #28282e !important;
}

[data-theme="dark"] .sidebar-item {
  color: #A0AABA !important;
}

[data-theme="dark"] .sidebar-item:hover {
  color: #E8EDF5 !important;
  background: rgba(74,125,232,0.12) !important;
}

/* Ausgewählt = nur Symbol- und Schriftfarbe, kein farbiger Block dahinter
   (Nutzerwunsch „kein farbigen Block, nur das Symbol soll farbig sein"). */
[data-theme="dark"] .sidebar-item.on {
  color: #7BAFF8 !important;
  background: none !important;
}

[data-theme="dark"] .sb-name {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .sb-email,
[data-theme="dark"] .sb-role,
[data-theme="dark"] .si-soon {
  color: #68788F !important;
}

[data-theme="dark"] .si-divider {
  background: #28282e !important;
}

/* ── Tables ── */
[data-theme="dark"] table {
  background: #17171c !important;
}

[data-theme="dark"] th {
  background: #151518 !important;
  color: #A0AABA !important;
  border-color: #28282e !important;
}

[data-theme="dark"] td {
  border-color: #28282e !important;
  color: #E8EDF5 !important;
}

/* ── Modals ── */
[data-theme="dark"] .modal-box,
[data-theme="dark"] .modal,
[data-theme="dark"] .confirm-box,
[data-theme="dark"] .userDetailModal > div {
  background: #17171c !important;
  color: #E8EDF5 !important;
}

[data-theme="dark"] .modal-head,
[data-theme="dark"] .confirm-ft {
  border-color: #28282e !important;
}

[data-theme="dark"] .modal-close {
  color: #A0AABA !important;
}

/* ── Confirm boxes ── */
[data-theme="dark"] .confirm-box {
  background: #17171c !important;
}

[data-theme="dark"] .confirm-title {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .confirm-sub,
[data-theme="dark"] .confirm-section-lbl {
  color: #A0AABA !important;
}

/* ── Listing cards ── */
[data-theme="dark"] .card-title {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .card-loc,
[data-theme="dark"] .card-company-name {
  color: #68788F !important;
}

[data-theme="dark"] .spec {
  color: #A0AABA !important;
}

[data-theme="dark"] .card-desc {
  color: #A0AABA !important;
}

[data-theme="dark"] .card-price {
  color: #E8EDF5 !important;
}

/* ── Detail Modal ── */
[data-theme="dark"] .ldm-info {
  background: #17171c !important;
}

[data-theme="dark"] .ldm-info-head {
  border-color: #28282e !important;
}

[data-theme="dark"] .ldm-title,
[data-theme="dark"] .ldm-price,
[data-theme="dark"] .ldm-spec-val {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .ldm-type-badge {
  background: rgba(74,125,232,0.15) !important;
  border-color: rgba(74,125,232,0.3) !important;
  color: #7BAFF8 !important;
}

[data-theme="dark"] .ldm-loc,
[data-theme="dark"] .ldm-desc,
[data-theme="dark"] .ldm-spec-label,
[data-theme="dark"] .ldm-desc-label {
  color: #A0AABA !important;
}

[data-theme="dark"] .ldm-spec-box {
  background: #151518 !important;
}

[data-theme="dark"] .ldm-cta {
  border-color: #28282e !important;
}

/* ── 2FA boxes ── */
/* Kein Kaesten mehr — nur farbige Schrift (Hausregel, siehe .msg oben).
   Die !important-Rueckstellung ist noetig, weil die frueheren Regeln hier
   selbst !important trugen und die neue Seitenregel sonst verlieren wuerde. */
[data-theme="dark"] .twofa-info-box {
  background: none !important;
  border: 0 !important;
  color: #9DC0FF !important;
}

[data-theme="dark"] .twofa-active-box {
  background: none !important;
  border: 0 !important;
  color: #6EE7B7 !important;
}

[data-theme="dark"] .twofa-warning-box {
  background: none !important;
  border: 0 !important;
  color: #FCD34D !important;
}

/* ── Secret code field ── */
[data-theme="dark"] .secret-code {
  background: #151518 !important;
  border-color: #28282e !important;
  color: #7BAFF8 !important;
}

/* ── Form labels ── */
[data-theme="dark"] label,
[data-theme="dark"] .field-label {
  color: #A0AABA !important;
}

/* ── Image upload ── */
[data-theme="dark"] .img-drop-zone {
  background: #151518 !important;
  border-color: #2A3E60 !important;
}

[data-theme="dark"] .img-drop-text {
  color: #A0AABA !important;
}

[data-theme="dark"] .img-drop-hint {
  color: #68788F !important;
}

[data-theme="dark"] .img-section-label {
  color: #A0AABA !important;
}

[data-theme="dark"] .img-thumb {
  background: #151518 !important;
  border-color: #28282e !important;
}

/* ── Index.html spezifische Elemente ── */
[data-theme="dark"] .bereiche-wrap,
[data-theme="dark"] .bereiche-section,
[data-theme="dark"] section {
  background: transparent !important;
}

[data-theme="dark"] .bereiche-icon-wrap {
  background: #28282e !important;
}

[data-theme="dark"] .warum-num {
  color: #4A7DE8 !important;
}

[data-theme="dark"] .strip {
  background: #0a0a0c !important;
  border-color: #28282e !important;
}

[data-theme="dark"] .strip-n {
  color: #4A7DE8 !important;
}

[data-theme="dark"] .strip-text {
  color: #A0AABA !important;
}

[data-theme="dark"] .faq-q {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .faq-a {
  color: #A0AABA !important;
}

[data-theme="dark"] .faq-item {
  border-color: #28282e !important;
}

[data-theme="dark"] .review-stars {
  color: #FBBF24 !important;
}

/* ── Footer ── */
[data-theme="dark"] .foot,
[data-theme="dark"] footer,
[data-theme="dark"] .f-logo,
[data-theme="dark"] .f-bottom {
  background: #0a0a0c !important;
  border-color: #28282e !important;
}

[data-theme="dark"] .foot *,
[data-theme="dark"] footer * {
  color: #68788F !important;
}

[data-theme="dark"] .foot a:hover,
[data-theme="dark"] footer a:hover {
  color: #E8EDF5 !important;
}

/* ── Dropdown ── */
[data-theme="dark"] .vc-dropdown {
  background: #17171c !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 0 0 1px #28282e !important;
}

[data-theme="dark"] .vc-drop-item {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .vc-drop-item:hover {
  background: #28282e !important;
}

[data-theme="dark"] .vc-drop-divider {
  background: #28282e !important;
}

[data-theme="dark"] .vc-drop-email {
  color: #68788F !important;
}

/* ── Admin Panel ── */
[data-theme="dark"] .admin-main {
  background: #0f0f12 !important;
}

[data-theme="dark"] .admin-header {
  background: #0a0a0c !important;
  border-color: #28282e !important;
}

[data-theme="dark"] .admin-header h1 {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .sidebar {
  background: #0f0f12 !important;
}

[data-theme="dark"] .panel {
  background: transparent !important;
}

[data-theme="dark"] .content-box {
  background: #17171c !important;
  border-color: #28282e !important;
}

[data-theme="dark"] .box-head-title {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .box-val {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .box-sub {
  color: #68788F !important;
}

[data-theme="dark"] .empty-cell {
  color: #68788F !important;
}

/* ── Action buttons (act-btn) ── */
[data-theme="dark"] .act-btn {
  background: #28282e !important;
  border-color: #2A3E60 !important;
  color: #A0AABA !important;
}
[data-theme="dark"] .act-approve {
  background: rgba(52,211,153,0.1) !important;
  border-color: rgba(52,211,153,0.25) !important;
  color: #34D399 !important;
}
[data-theme="dark"] .act-approve:hover {
  background: rgba(52,211,153,0.2) !important;
}
[data-theme="dark"] .act-reject {
  background: rgba(248,113,113,0.1) !important;
  border-color: rgba(248,113,113,0.25) !important;
  color: #F87171 !important;
}
[data-theme="dark"] .act-reject:hover {
  background: rgba(248,113,113,0.2) !important;
}
[data-theme="dark"] .act-list {
  background: rgba(74,125,232,0.1) !important;
  border-color: rgba(74,125,232,0.25) !important;
  color: #7BAFF8 !important;
}
[data-theme="dark"] .act-list:hover {
  background: rgba(74,125,232,0.2) !important;
}
[data-theme="dark"] .act-unlist {
  background: rgba(251,191,36,0.1) !important;
  border-color: rgba(251,191,36,0.2) !important;
  color: #FCD34D !important;
}
[data-theme="dark"] .act-perms {
  background: rgba(124,58,237,0.1) !important;
  border-color: rgba(124,58,237,0.25) !important;
  color: #A78BFA !important;
}
[data-theme="dark"] .act-perms:hover {
  background: rgba(124,58,237,0.2) !important;
}

/* ── Rollen-Karten (CEO, Admin, Editor, Betrachter) ── */
[data-theme="dark"] [style*="background:#faf5ff"],
[data-theme="dark"] [style*="background:#f5f3ff"] {
  background: rgba(124,58,237,0.1) !important;
  border-color: rgba(124,58,237,0.2) !important;
}
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background:#e0f2fe"],
[data-theme="dark"] [style*="background:#bae6fd"] {
  background: rgba(74,125,232,0.1) !important;
  border-color: rgba(74,125,232,0.25) !important;
}
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background:#dcfce7"] {
  background: rgba(52,211,153,0.08) !important;
  border-color: rgba(52,211,153,0.2) !important;
}
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background:#fee2e2"] {
  background: rgba(248,113,113,0.08) !important;
  border-color: rgba(248,113,113,0.2) !important;
}
[data-theme="dark"] [style*="background:#f7f8fa"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background:#f9fafb"] {
  background: #151518 !important;
}

/* ── Table row hover ── */
[data-theme="dark"] tr:hover td {
  background: rgba(74,125,232,0.06) !important;
}

/* ── Stat cards & content boxes ── */
[data-theme="dark"] .stat-card {
  background: #17171c !important;
  border-color: #28282e !important;
}

/* ── Inline-select dropdowns ── */
[data-theme="dark"] .inline-select {
  background: #17171c !important;
  border-color: #28282e !important;
  color: #E8EDF5 !important;
}

/* ── Role badges text ── */
[data-theme="dark"] [style*="color:#7c3aed"],
[data-theme="dark"] [style*="color:#6b21a8"] {
  color: #A78BFA !important;
}
[data-theme="dark"] [style*="color:#1447B0"],
[data-theme="dark"] [style*="color:#0369a1"],
[data-theme="dark"] [style*="color:#1d4ed8"] {
  color: #7BAFF8 !important;
}
[data-theme="dark"] [style*="color:#15803d"],
[data-theme="dark"] [style*="color:#16a34a"] {
  color: #34D399 !important;
}
[data-theme="dark"] [style*="color:#991b1b"],
[data-theme="dark"] [style*="color:#b91c1c"],
[data-theme="dark"] [style*="color:#dc2626"] {
  color: #F87171 !important;
}
[data-theme="dark"] [style*="color:#3D4A5C"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color:#6B7A90"] {
  color: #A0AABA !important;
}
[data-theme="dark"] [style*="color:#0F1722"],
[data-theme="dark"] [style*="color:#0f1722"],
[data-theme="dark"] [style*="color:#111827"] {
  color: #E8EDF5 !important;
}

/* ── Perm rows ── */
[data-theme="dark"] .perm-row:hover {
  background: #28282e !important;
}

/* ── Toasts ── */
[data-theme="dark"] .vc-toast,
[data-theme="dark"] .admin-toast {
  background: #28282e !important;
  color: #E8EDF5 !important;
}

/* ── Messages ── */
/* Nur farbige Schrift — kein Kästchen (Rahmen/Fläche bewusst entfernt) */
[data-theme="dark"] .msg-ok {
  background: none !important;
  color: #6EE7B7 !important;
  border: 0 !important;
}

[data-theme="dark"] .msg-err {
  background: none !important;
  color: #FCA5A5 !important;
  border: 0 !important;
}

/* ── Scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar {
  background: #151518;
  width: 6px;
  height: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #28282e;
  border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #2A3E60;
}

/* ── QR Code invertieren ── */
[data-theme="dark"] .qr-container img {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Skeleton loading ── */
[data-theme="dark"] .skeleton-card {
  background: #17171c !important;
}
[data-theme="dark"] .skeleton-img,
[data-theme="dark"] .skeleton-line {
  background: linear-gradient(90deg, #28282e 25%, #162035 50%, #28282e 75%) !important;
  background-size: 200% 100% !important;
}

/* ── Search bars auf dunklen Hintergründen ── */
[data-theme="dark"] .search-bar {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Sucheingabe transparent halten (kein schwarzer Balken im Such-Container) */
[data-theme="dark"] .search-bar input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
}
[data-theme="dark"] .search-bar input::placeholder {
  color: rgba(255,255,255,.4) !important;
}

/* ── webseiten.html spezifisch ── */
[data-theme="dark"] .form-section {
  background: #17171c !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .form-section:focus-within {
  border-color: #4A7DE8 !important;
  box-shadow: 0 0 0 3px rgba(74,125,232,0.1) !important;
}
[data-theme="dark"] .fs-head {
  border-color: #28282e !important;
}
[data-theme="dark"] .fs-title {
  color: #E8EDF5 !important;
}
[data-theme="dark"] .fs-sub {
  color: #68788F !important;
}
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
  background: #151518 !important;
  border-color: #28282e !important;
  color: #E8EDF5 !important;
}
[data-theme="dark"] .pill-label {
  background: #151518 !important;
  border-color: #28282e !important;
  color: #A0AABA !important;
}
[data-theme="dark"] .pill-input:checked + .pill-label {
  background: rgba(74,125,232,0.2) !important;
  border-color: #4A7DE8 !important;
  color: #7BAFF8 !important;
}
[data-theme="dark"] .hint-box {
  background: none !important;
  border: 0 !important;
}
[data-theme="dark"] .hint-box * {
  color: #A0AABA !important;
}
[data-theme="dark"] .result-box {
  background: #17171c !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .result-head {
  background: #151518 !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .result-text {
  background: #151518 !important;
  color: #E8EDF5 !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .tag {
  background: #28282e !important;
  color: #A0AABA !important;
}

/* ════════════════════════════════════════════════
   LOGIN & REGISTER (login.html / register.html)
   ════════════════════════════════════════════════ */

/* Rechte Formular-Seite (war weiß) */
[data-theme="dark"] .panel-right {
  background: #0f0f12 !important;
}

/* Headings & Texte */
[data-theme="dark"] .auth-heading {
  color: #E8EDF5 !important;
}
[data-theme="dark"] .auth-sub {
  color: #68788F !important;
}
[data-theme="dark"] .auth-label {
  color: #A0AABA !important;
}
[data-theme="dark"] .auth-back {
  color: #68788F !important;
}
[data-theme="dark"] .auth-back:hover {
  color: #E8EDF5 !important;
}
[data-theme="dark"] .auth-footer {
  color: #68788F !important;
}

/* Inputs */
[data-theme="dark"] .auth-input {
  background: #151518 !important;
  border-color: #28282e !important;
  color: #E8EDF5 !important;
}
[data-theme="dark"] .auth-input:focus {
  border-color: #4A7DE8 !important;
  box-shadow: 0 0 0 3px rgba(74,125,232,0.15) !important;
}
[data-theme="dark"] .auth-input::placeholder {
  color: #5A6B82 !important;
}
[data-theme="dark"] .input-icon {
  color: #5A6B82 !important;
}
[data-theme="dark"] .pw-toggle {
  color: #68788F !important;
}
[data-theme="dark"] .pw-hint {
  color: #68788F !important;
}
[data-theme="dark"] .pw-strength {
  background: #28282e !important;
}

/* OAuth Buttons - Google (war weiß) */
[data-theme="dark"] .oauth-btn-google {
  background: #17171c !important;
  color: #E8EDF5 !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .oauth-btn-google:hover {
  background: #28282e !important;
  border-color: #2A3E60 !important;
}
/* Apple bleibt schwarz, passt auch in dark mode */

/* Divider */
[data-theme="dark"] .auth-divider-line {
  background: #28282e !important;
}
[data-theme="dark"] .auth-divider-text {
  color: #5A6B82 !important;
}

/* Info / Error / Success Banner */
[data-theme="dark"] .auth-info {
  background: none !important;
  border: 0 !important;
  color: #7BAFF8 !important;
}
[data-theme="dark"] .auth-error {
  background: none !important;
  border: 0 !important;
  color: #FCA5A5 !important;
}
[data-theme="dark"] .auth-success {
  background: none !important;
  border: 0 !important;
  color: #6EE7B7 !important;
}

/* Account-Typ Auswahl (register) */
[data-theme="dark"] .actype-btn {
  background: #151518 !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .actype-btn:hover {
  background: #17171c !important;
  border-color: #2A3E60 !important;
}
[data-theme="dark"] .actype-btn.active {
  background: rgba(74,125,232,0.12) !important;
  border-color: #4A7DE8 !important;
  box-shadow: 0 0 0 3px rgba(74,125,232,0.1) !important;
}
[data-theme="dark"] .actype-btn-label {
  color: #A0AABA !important;
}
[data-theme="dark"] .actype-btn.active .actype-btn-label {
  color: #7BAFF8 !important;
}
[data-theme="dark"] .actype-btn-sub {
  color: #68788F !important;
}

/* Checkboxen */
[data-theme="dark"] .checkbox-text {
  color: #A0AABA !important;
}

/* Invalid input */
[data-theme="dark"] .auth-input.invalid {
  border-color: #F87171 !important;
  background: rgba(248,113,113,0.08) !important;
}

/* Terms-Modal (register) */
[data-theme="dark"] .modal-box {
  background: #17171c !important;
}
[data-theme="dark"] .modal-header {
  border-color: #28282e !important;
}
[data-theme="dark"] .modal-header h3 {
  color: #E8EDF5 !important;
}
[data-theme="dark"] .modal-close {
  color: #68788F !important;
}
[data-theme="dark"] .modal-close:hover {
  background: #28282e !important;
  color: #E8EDF5 !important;
}
[data-theme="dark"] .modal-body {
  color: #A0AABA !important;
}
[data-theme="dark"] .modal-body h4 {
  color: #E8EDF5 !important;
}

/* ════════════════════════════════════════════════
   NEUES BROWSE-LAYOUT (immobilien / elektrogeräte)
   ════════════════════════════════════════════════ */
/* Kopfbereich im Dark Mode: dunkles Standard-Dark (etwas heller als schwarz) */
[data-theme="dark"] .hero {
  background: linear-gradient(180deg,#16161a 0%,#121214 55%,#0f0f12 100%) !important;
  border-bottom: none !important;
}
[data-theme="dark"] .hero-bg { opacity: 1 !important; }
/* Kategorie-Hero-Bild im Dark Mode: NACHT-Bild + neutraler (nicht-blauer) Schleier, Bild bleibt sichtbar */
[data-theme="dark"] .hero::before {
  background:
    linear-gradient(180deg,rgba(10,13,19,.42) 0%,rgba(10,13,19,.58) 58%,rgba(10,13,19,.78) 100%),
    url('bilder/hero/hero-1519501025264--1600.jpg') center top/cover no-repeat !important;
}
/* Dark-Mode Logo (alle Seiten): „Vermitt" schwarz + Glow, „co" navy (Glow erbt via text-shadow) */
[data-theme="dark"] .nav-logo { color:#1a1d24 !important; text-shadow:0 0 11px rgba(255,255,255,.5),0 0 4px rgba(255,255,255,.38) !important; }
[data-theme="dark"] .nav-logo span { color:#16315c !important; }

/* Inserat-Sektion: umschließende Box im Dark Mode entfernen (Inhalt bleibt) */
[data-theme="dark"] .list-section {
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[data-theme="dark"] .list-section::before { display: none !important; }

/* „In Ihrer Nähe"-Karte */
[data-theme="dark"] .nearby {
  background: #17171c !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .nearby-txt strong { color: #E8EDF5 !important; }
[data-theme="dark"] .nearby-txt span   { color: #68788F !important; }
[data-theme="dark"] .nearby-btn {
  background: rgba(74,125,232,0.15) !important;
  border-color: rgba(74,125,232,0.35) !important;
  color: #7BAFF8 !important;
}

/* Such-/Filterleiste */
[data-theme="dark"] .searchbar {
  background: #17171c !important;
  border-color: #F6A609 !important;
}
[data-theme="dark"] .sb-field + .sb-field { border-left-color: #28282e !important; }
[data-theme="dark"] .sb-col label { color: #68788F !important; }
/* Felder transparent halten → keine schwarzen Balken im hellen Container */
[data-theme="dark"] .sb-col input,
[data-theme="dark"] .sb-col select {
  background: transparent !important;
  border: none !important;
  color: #E8EDF5 !important;
}
[data-theme="dark"] .sb-col input::placeholder { color: #68788F !important; }

/* Filter-Sidebar */
[data-theme="dark"] .filter-sidebar {
  background: #17171c !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .fs-head h3 { color: #E8EDF5 !important; }
[data-theme="dark"] .fs-group { border-top-color: #28282e !important; }
[data-theme="dark"] .fs-gtitle { color: #E8EDF5 !important; }
[data-theme="dark"] .fs-gtitle svg { color: #68788F !important; }
[data-theme="dark"] .fs-check { color: #A0AABA !important; }
[data-theme="dark"] .fs-count { color: #68788F !important; }
[data-theme="dark"] .fs-minmax select {
  background: #151518 !important;
  border-color: #28282e !important;
  color: #A0AABA !important;
}
[data-theme="dark"] .fs-reset {
  background: #151518 !important;
  border-color: #28282e !important;
  color: #A0AABA !important;
}
[data-theme="dark"] .fs-reset:hover { background: #28282e !important; color: #E8EDF5 !important; }

/* Toolbar */
[data-theme="dark"] .sec-count { color: #E8EDF5 !important; }
[data-theme="dark"] .toolbar-right .lbl { color: #68788F !important; }
[data-theme="dark"] .view-toggle {
  background: #17171c !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .view-toggle button {
  background: #17171c !important;
  color: #68788F !important;
}
[data-theme="dark"] .view-toggle button + button { border-left-color: #28282e !important; }
[data-theme="dark"] .view-toggle button.on {
  background: rgba(74,125,232,0.18) !important;
  color: #7BAFF8 !important;
}

/* Karten (neues Layout) */
[data-theme="dark"] .card-fav {
  background: rgba(17,30,48,0.85) !important;
  color: #A0AABA !important;
}
[data-theme="dark"] .card-cta {
  background: #17171c !important;
  border-color: #28282e !important;
  color: #7BAFF8 !important;
}
[data-theme="dark"] .card-cta:hover {
  background: #4A7DE8 !important;
  border-color: #4A7DE8 !important;
  color: #fff !important;
}
[data-theme="dark"] .card-price { color: #7BAFF8 !important; }

/* Mobile-Filterleiste (Sortieren / Filter / Karte) */
[data-theme="dark"] .mobile-filterbar {
  background: #0f0f12 !important;
  border-bottom-color: #28282e !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}
[data-theme="dark"] .mfb-btn { color: #E8EDF5 !important; }
[data-theme="dark"] .mfb-btn:active { background: rgba(255,255,255,0.06) !important; }

/* Mobile-Filter-Schublade: Kopf (war hell → dunkel) */
[data-theme="dark"] .fs-drawer-head {
  background: #17171c !important;
  border-bottom-color: #28282e !important;
}
[data-theme="dark"] .fs-drawer-head h3 { color: #E8EDF5 !important; }
[data-theme="dark"] .fs-drawer-close {
  background: #28282e !important;
  color: #E8EDF5 !important;
}

/* Mobile-Sortier-Schublade (Bottom-Sheet) */
[data-theme="dark"] .sort-sheet { background: #0F1B2D !important; }
[data-theme="dark"] .ss-head { border-bottom-color: #28282e !important; }
[data-theme="dark"] .ss-head h3 { color: #E8EDF5 !important; }
[data-theme="dark"] .ss-opt {
  color: #E8EDF5 !important;
  border-bottom-color: #28282e !important;
}
[data-theme="dark"] .ss-opt.sel { color: #7BAFF8 !important; }
[data-theme="dark"] .ss-opt .ss-tick { color: #7BAFF8 !important; }

/* ════════════════════════════════════════════════
   NEUE DETAILSEITE (helles 1:1-Layout)
   ════════════════════════════════════════════════ */
[data-theme="dark"] #listingDetailModal { background: #0f0f12 !important; }
[data-theme="dark"] .ldm-bottom { border-top-color: #28282e !important; }
[data-theme="dark"] .ldm-col-title { color: #E8EDF5 !important; }
[data-theme="dark"] .ldm-detail-row { border-bottom-color: #28282e !important; }
[data-theme="dark"] .ldm-detail-row .k { color: #68788F !important; }
[data-theme="dark"] .ldm-detail-row .v { color: #E8EDF5 !important; }
[data-theme="dark"] .ldm-desc,
[data-theme="dark"] .ldm-addr,
[data-theme="dark"] .ldm-feat,
[data-theme="dark"] .ldm-price-label,
[data-theme="dark"] .ldm-empty { color: #A0AABA !important; }
[data-theme="dark"] .ldm-loc-1 { color: #E8EDF5 !important; }
[data-theme="dark"] .ldm-loc-2 { color: #68788F !important; }
[data-theme="dark"] .ldm-spec-box { background: transparent !important; }
[data-theme="dark"] .ldm-spec-ico { color: #68788F !important; }
[data-theme="dark"] .ldm-badge-gray { color: #A0AABA !important; }
[data-theme="dark"] .ldm-map {
  background: #151518 !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .ldm-map-btn {
  background: #28282e !important;
  color: #E8EDF5 !important;
}
[data-theme="dark"] .ldm-map-btn:hover { background: #2A3E60 !important; }

/* Profil-Banner (Einstellungen) */
[data-theme="dark"] #profileBannerPreview { border-color: #28282e !important; }

/* ── Smooth transition (außer bei Bildern) ── */
*:not(img):not(video):not(svg):not(canvas) {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ── Kategorie-Navi: IMMER eine Reihe; bei vielen Kategorien horizontal
   scrollbar (Scrollleiste versteckt). Logo + rechte Seite bleiben fix. ── */
.nav{flex-wrap:nowrap}
.nav-links{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{white-space:nowrap;flex-shrink:0}
.nav-logo{flex-shrink:0}
.nav-right{flex-shrink:0}

/* ============================================================
   Dark-Mode Nachbesserungen (User-Feedback)
   ============================================================ */

/* Suchfelder transparent statt „schwarzer Balken" (Hero + Suchergebnis-Leiste) */
[data-theme="dark"] .sc-field input,
[data-theme="dark"] .sc-field select,
[data-theme="dark"] .fs-searchbar input{ background:transparent !important; color:#E8EDF5 !important; }

/* Kategorie-Suchbox: solider schwarzer Fond (statt durchscheinendes Hero-Bild) */
[data-theme="dark"] .searchbar,
[data-theme="dark"] .vc-su .searchbar,
[data-theme="dark"] .vc-su .sb-fields{ background:transparent !important; }

/* Startseite: Trennlinien zwischen Sektionen entfernen (Dark) */
[data-theme="dark"] .explore,
[data-theme="dark"] .cats-sec,
[data-theme="dark"] .how2,
[data-theme="dark"] .benefits{ border-top:none !important; }

/* ===== Einheitliche Navy-Knöpfe (wie „Anbieter werden") — alle Seiten, Dark-Mode ===== */
[data-theme="dark"] .nav-cta,
[data-theme="dark"] .sb-btn,
[data-theme="dark"] .fs-apply,
[data-theme="dark"] .grid.list-view .card-anfragen,
[data-theme="dark"] .btn-pri,
[data-theme="dark"] .ldm-cta-btn,
[data-theme="dark"] .eldm-sticky-cta,
[data-theme="dark"] .ldm-genius-btn.primary,
[data-theme="dark"] .ldm-reserve-btn,
[data-theme="dark"] .ldm-stage-btn.primary,
[data-theme="dark"] .ldm-price-ft button,
[data-theme="dark"] .vpd-cart,
[data-theme="dark"] .vpr-save,
[data-theme="dark"] .header-btn-pri,
[data-theme="dark"] .vcwiz-next,
[data-theme="dark"] .vcwiz-pubbtn,
[data-theme="dark"] .vcwiz-prevbtn,
[data-theme="dark"] .vcwiz-revprev,
[data-theme="dark"] .fzh-search-go,
[data-theme="dark"] .fzf-go,
[data-theme="dark"] .fzfm-apply,
[data-theme="dark"] .fzfm-headcount,
[data-theme="dark"] .rs-go,
[data-theme="dark"] .rs-search-go,
[data-theme="dark"] .fzfin-btn,
[data-theme="dark"] button[onclick*="_vcOpenPreview"]{ background:#16315c !important; border-color:#16315c !important; color:#fff !important; }
[data-theme="dark"] .nav-cta:hover,
[data-theme="dark"] .sb-btn:hover,
[data-theme="dark"] .fs-apply:hover,
[data-theme="dark"] .grid.list-view .card-anfragen:hover,
[data-theme="dark"] .btn-pri:hover,
[data-theme="dark"] .ldm-cta-btn:hover,
[data-theme="dark"] .eldm-sticky-cta:hover,
[data-theme="dark"] .ldm-genius-btn.primary:hover,
[data-theme="dark"] .ldm-reserve-btn:hover,
[data-theme="dark"] .ldm-stage-btn.primary:hover,
[data-theme="dark"] .vpd-cart:hover,
[data-theme="dark"] .vpr-save:hover,
[data-theme="dark"] .header-btn-pri:hover,
[data-theme="dark"] .vcwiz-next:hover,
[data-theme="dark"] .vcwiz-pubbtn:hover,
[data-theme="dark"] .fzh-search-go:hover,
[data-theme="dark"] .fzf-go:hover,
[data-theme="dark"] .fzfm-apply:hover,
[data-theme="dark"] .rs-go:hover,
[data-theme="dark"] .rs-search-go:hover{ background:#0f2647 !important; border-color:#0f2647 !important; }

/* ---- Konto: „Mein Abo"-Karte dunkel ---- */
[data-theme="dark"] #vcAboCard{ background:#0f0f12 !important; border:none !important; box-shadow:none !important; color:#E8EDF5; }
[data-theme="dark"] .vcaboc-title{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcaboc-badge.gold{ color:#E0B341 !important; }
[data-theme="dark"] .vcaboc-badge.act{ color:#34D399 !important; }
[data-theme="dark"] .vcaboc-badge.cl{ color:#F59E0B !important; }
[data-theme="dark"] .vcaboc-ico{ background:#242429 !important; color:#9FB6E6 !important; }
[data-theme="dark"] .vcaboc-nutz .t b{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcaboc-nutz .t span{ color:#A0AABA !important; }
[data-theme="dark"] .vcaboc-nutz .v{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcaboc-bar{ background:#242429 !important; }
[data-theme="dark"] .vcaboc-bar>span{ background:#4A7DE8 !important; }
[data-theme="dark"] .vcaboc-qt .ic{ background:#242429 !important; color:#9FB6E6 !important; }
[data-theme="dark"] .vcaboc-qt .lbl{ color:#A0AABA !important; }
[data-theme="dark"] .vcaboc-qt .num{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcaboc-qt .qb{ background:#242429 !important; }
[data-theme="dark"] .vcaboc-qt .qb>span{ background:#4A7DE8 !important; }
[data-theme="dark"] .vcaboc-stripe .st b{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcaboc-stripe .st span{ color:#A0AABA !important; }
[data-theme="dark"] .vcaboc-btns .prim{ background:#2E5FB5 !important; color:#fff !important; border-color:#2E5FB5 !important; }
[data-theme="dark"] .vcaboc-btns .prim:hover{ background:#264F95 !important; }
[data-theme="dark"] .vcaboc-btns .out{ background:#17171c !important; color:#E8EDF5 !important; border-color:#2c2c33 !important; }
[data-theme="dark"] .vcaboc-btns .out:hover{ background:#1f1f25 !important; }
[data-theme="dark"] .vcaboc-btns .danger{ background:#1b1b20 !important; color:#F87171 !important; border-color:rgba(248,113,113,.4) !important; }
[data-theme="dark"] .vcaboc-btns .danger:hover{ background:rgba(248,113,113,.10) !important; }

/* ---- Konto: Finanz-Dashboard (.vcfin-*) dunkel ---- */
[data-theme="dark"] .vcfin{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcfin-h{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcfin-sub{ color:#A0AABA !important; }
[data-theme="dark"] .vcfin-period{ display:none !important; }
[data-theme="dark"] .vcfin-kpi,
[data-theme="dark"] .vcfin-card,
[data-theme="dark"] .vcfin-txwrap,
[data-theme="dark"] .vcfin-empty{ background:#1b1b20 !important; border-color:#2c2c33 !important; }
[data-theme="dark"] .vcfin-empty{ color:#A0AABA !important; }
[data-theme="dark"] .vcfin-kpi .lbl{ color:#A0AABA !important; }
[data-theme="dark"] .vcfin-kpi .ic{ border-color:#2c2c33 !important; color:#9FB6E6 !important; }
[data-theme="dark"] .vcfin-kpi .val{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcfin-card .ct,
[data-theme="dark"] .vcfin-card .cbig{ color:#E8EDF5 !important; }
[data-theme="dark"] .vcfin-lg{ color:#A0AABA !important; }
[data-theme="dark"] .vcfin-tx th{ color:#A0AABA !important; border-bottom-color:#2c2c33 !important; }
[data-theme="dark"] .vcfin-tx td{ border-bottom-color:#242429 !important; }
[data-theme="dark"] .vcfin-tx .neg{ color:#E8EDF5 !important; }

/* ---- Konto: Inserat-Assistent — Kopfleiste + Speichern-Knopf dunkel ---- */
[data-theme="dark"] #vcwizFsBar{ background:#0f0f12 !important; border-bottom-color:#28282e !important; }
[data-theme="dark"] #vcwizFsBar .vcfs-logo,
[data-theme="dark"] #vcwizFsBar .vcfs-title{ color:#E8EDF5 !important; }
[data-theme="dark"] #vcwizFsBar .vcfs-logo span{ color:#7BAFF8 !important; }
[data-theme="dark"] #vcwizFsBar .vcfs-back{ color:#A0AABA !important; }
[data-theme="dark"] .vcwiz-save{ background:#17171c !important; border-color:#28282e !important; color:#E8EDF5 !important; }
[data-theme="dark"] .vcwiz-save:hover{ background:#1f1f25 !important; }
[data-theme="dark"] .vcwiz-save svg{ color:#9FB6E6 !important; }

/* ---- Konto: Theme-Auswahl „Hell" — Karte bleibt hell, Text/Icon dunkel & lesbar ---- */
[data-theme="dark"] #themeLight{ background:#fff !important; color:#0F1722 !important; }
[data-theme="dark"] #themeLight span{ color:#0F1722 !important; }
[data-theme="dark"] #themeLight svg{ stroke:#0F1722 !important; color:#0F1722 !important; }

/* ---- Admin: Filter-Pillen, Subtabs & Status-Badges dunkel ---- */
[data-theme="dark"] .sfpill{ background:#17171c !important; border-color:#28282e !important; color:#A0AABA !important; }
[data-theme="dark"] .sfpill.active{ background:var(--navy) !important; color:#fff !important; border-color:var(--navy) !important; }
[data-theme="dark"] .subtab{ background:#17171c !important; border-color:#28282e !important; color:#A0AABA !important; }
[data-theme="dark"] .subtab.active{ background:var(--navy) !important; color:#fff !important; border-color:var(--navy) !important; }
[data-theme="dark"] .status-badge{ color:#A0AABA !important; }
[data-theme="dark"] .badge-green{ background:rgba(52,211,153,.10) !important; color:#34D399 !important; border-color:rgba(52,211,153,.22) !important; }
[data-theme="dark"] .badge-blue{ background:rgba(74,125,232,.12) !important; color:#7BAFF8 !important; border-color:rgba(74,125,232,.25) !important; }
[data-theme="dark"] .badge-orange{ background:rgba(251,191,36,.10) !important; color:#FCD34D !important; border-color:rgba(251,191,36,.22) !important; }
[data-theme="dark"] .badge-red{ background:rgba(248,113,113,.10) !important; color:#F87171 !important; border-color:rgba(248,113,113,.22) !important; }
[data-theme="dark"] .badge-grey{ background:#151518 !important; color:#A0AABA !important; border-color:#28282e !important; }

/* ---- Weiße Lade-Overlays dunkel ---- */
[data-theme="dark"] .loading-screen{ background:#0f0f12 !important; }
[data-theme="dark"] .data-loader-box{ background:#17171c !important; border-color:#28282e !important; color:#E8EDF5 !important; }

/* Kontoart-Auswahl (Privatperson / Firmenkonto): hatte keine Dunkel-Regel und
   blieb dadurch grell weiß. Karten-Ton wie überall, Auswahl blau umrandet. */
[data-theme="dark"] .actype-opt {
  background: #1b1b20 !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .actype-opt:hover { border-color: #3a3a42 !important; }
/* 🚨 Betreiber-Vorgabe 21.08.2026: Der GEWAEHLTE Eintrag bekommt KEINEN
   eigenen Kasten mehr. Vorher stand hier ein blauer Rand plus blau getoente
   Flaeche — genau das sollte weg. Gewaehlt erkennt man jetzt an der BLAUEN
   SCHRIFT und am HAKEN im Kreis. Der Kasten bleibt bei beiden gleich ruhig. */
[data-theme="dark"] .actype-opt.sel {
  background: #1b1b20 !important;
  border-color: #28282e !important;
}
[data-theme="dark"] .actype-opt .actype-title { color: #e8edf5 !important; }
[data-theme="dark"] .actype-opt.sel .actype-title { color: #5B9BF8 !important; }
/* Der Kreis ist ein eigengebautes Radio (appearance:none). Ohne diese beiden
   Regeln greift die allgemeine Feld-Regel aus Zeile 151 und faerbt Rand und
   Flaeche wie ein Eingabefeld — der Haken waere dann kaum zu sehen. */
[data-theme="dark"] .actype-opt input[type="radio"] {
  background: #1b1b20 !important;
  border-color: #3a3a42 !important;
}
[data-theme="dark"] .actype-opt input[type="radio"]:checked {
  background: #1B56CC !important;
  border-color: #1B56CC !important;
}
[data-theme="dark"] .actype-opt .actype-sub   { color: #9aa3b2 !important; }

/* Weitere Stellen mit fest verdrahtetem Weiß, die im Dunkelmodus grell
   leuchteten. Jeweils Kartenton + helle Schrift, damit nichts unlesbar wird. */
[data-theme="dark"] .perm-item,
[data-theme="dark"] .pv-toggle,
[data-theme="dark"] .field-select,
[data-theme="dark"] .kf-img,
[data-theme="dark"] .amz-thumb {
  background-color: #1b1b20 !important;
  border-color: #28282e !important;
  color: #e8edf5 !important;
}
[data-theme="dark"] .vc-cfm,
[data-theme="dark"] .vc-cfm-no {
  background-color: #1b1b20 !important;
  border-color: #28282e !important;
  color: #e8edf5 !important;
}
[data-theme="dark"] .vcwiz-step-num { background-color: #17171c !important; border-color: #28282e !important; color: #e8edf5 !important; }

/* Grell weiße Tabellen-Flächen im Dunkelmodus (Nutzermeldung: Gruppen-
   Kopfzeilen „ABGELEHNT"/„ENTFERNTE" leuchteten weiß, beim Überfahren noch
   stärker). Die Farbe steht fest im style-Attribut, deshalb hier mit
   !important — bewusst NUR auf Tabellenzellen begrenzt, damit keine
   Karten-Flächen mitgefärbt werden. Schriftfarben kommen dort aus den
   Theme-Variablen und bleiben dadurch lesbar. */
[data-theme="dark"] .vcgrp-head td {
  background: #17171c !important;
  color: #d7dee8 !important;
}
[data-theme="dark"] .vcgrp-head:hover td { background: #1f1f26 !important; }
[data-theme="dark"] th[style*="#FAFBFC"],
[data-theme="dark"] td[style*="#FAFBFC"],
[data-theme="dark"] th[style*="#fafbfc"],
[data-theme="dark"] td[style*="#fafbfc"],
[data-theme="dark"] th[style*="#F7F8FA"],
[data-theme="dark"] td[style*="#F7F8FA"] {
  background-color: #17171c !important;
}
/* Zeilen-Überfahren in dunklen Tabellen: dezent, nie hell */
[data-theme="dark"] tbody tr:hover > td[style*="#FAFBFC"],
[data-theme="dark"] tbody tr:hover > td[style*="#fafbfc"] { background-color: #1f1f26 !important; }

/* Rollen-Abzeichen (Inhaber / Verkauf / Buchhaltung): helle Füllung + heller
   Rand leuchteten im Dunkelmodus grell und die Schrift war kaum lesbar.
   Jetzt ohne Fläche und Rand — nur noch die Rollenfarbe als Schrift. */
[data-theme="dark"] .role-badge { background: none !important; border: none !important; padding: .1rem 0 !important; }
[data-theme="dark"] .role-admin  { color: #c4b5fd !important; }
[data-theme="dark"] .role-editor { color: #7dd3fc !important; }
[data-theme="dark"] .role-viewer { color: #9aa3b2 !important; }

/* ── Eingabefelder INNERHALB gestalteter Feld-Rahmen ────────────────────────
   Die !important-Regel weiter oben faerbt JEDES input/select — auch die,
   deren Rahmen sie bewusst flaechenlos haelt (Suchleisten, Filterzeilen).
   Dadurch lag ein dunkler Balken IM Feld (Nutzermeldung „schwarze Balken
   in der Suchleiste"). Hier wird nur die Flaeche zurueckgenommen — Textfarbe
   und Platzhalter bleiben wie oben gesetzt.
   ⚠️ Klassen sind VERDOPPELT: die Regel oben hat (0,3,1); mit einfacher
   Klasse (0,2,1) verlieren wir trotz !important. */
[data-theme="dark"] .vc-scard-field.vc-scard-field input,
[data-theme="dark"] .vc-scard-field.vc-scard-field select,
[data-theme="dark"] .hf-col.hf-col input,
[data-theme="dark"] .hf-col.hf-col select,
[data-theme="dark"] .hsearch.hsearch input,
[data-theme="dark"] .hsearch.hsearch select,
[data-theme="dark"] .sb-col.sb-col input,
[data-theme="dark"] .sb-col.sb-col select,
[data-theme="dark"] .mmc-searchbox.mmc-searchbox input,
[data-theme="dark"] .mmc-searchbox.mmc-searchbox select,
[data-theme="dark"] .fzh-search.fzh-search input,
[data-theme="dark"] .fzh-search.fzh-search select,
[data-theme="dark"] .ldm-fin-input.ldm-fin-input input,
[data-theme="dark"] .ldm-fin-input.ldm-fin-input select,
[data-theme="dark"] .mde-scf.mde-scf input,
[data-theme="dark"] .mde-scf.mde-scf select,
[data-theme="dark"] .mde-search-row.mde-search-row input,
[data-theme="dark"] .mde-search-row.mde-search-row select,
[data-theme="dark"] .mde-f.mde-f input,
[data-theme="dark"] .mde-f.mde-f select,
[data-theme="dark"] .rs-search.rs-search input,
[data-theme="dark"] .rs-search.rs-search select,
[data-theme="dark"] .srp-free.srp-free input,
[data-theme="dark"] .srp-free.srp-free select,
[data-theme="dark"] .fs-searchbar.fs-searchbar input,
[data-theme="dark"] .fs-searchbar.fs-searchbar select,
[data-theme="dark"] .sc-field.sc-field input,
[data-theme="dark"] .sc-field.sc-field select,
[data-theme="dark"] .vc-rng.vc-rng input,
[data-theme="dark"] .vc-rng.vc-rng select,
[data-theme="dark"] .vcai-bar.vcai-bar input,
[data-theme="dark"] .vcai-bar.vcai-bar select,
[data-theme="dark"] .vcbs-dlg.vcbs-dlg input,
[data-theme="dark"] .vcbs-dlg.vcbs-dlg select,
[data-theme="dark"] .fzf-ort-in.fzf-ort-in input,
[data-theme="dark"] .fzf-ort-in.fzf-ort-in select,
[data-theme="dark"] .vcgip-cl.vcgip-cl input,
[data-theme="dark"] .vcgip-cl.vcgip-cl select,
[data-theme="dark"] .vchl-search.vchl-search input,
[data-theme="dark"] .vchl-search.vchl-search select,
[data-theme="dark"] .vcp-tbl.vcp-tbl input,
[data-theme="dark"] .vcp-tbl.vcp-tbl select,
[data-theme="dark"] .vcrev-search.vcrev-search input,
[data-theme="dark"] .vcrev-search.vcrev-search select,
[data-theme="dark"] .vcsk-bar.vcsk-bar input,
[data-theme="dark"] .vcsk-bar.vcsk-bar select,
[data-theme="dark"] .vcsd-tip.vcsd-tip input,
[data-theme="dark"] .vcsd-tip.vcsd-tip select,
[data-theme="dark"] .search.search input {
  background: transparent !important;
  box-shadow: none !important;
}