/* ==========================================================================
   Play Bootstrap - PRO DARK MODE OVERRIDE (Warmes Studio-Grau)
   ========================================================================== */

/* 1. Die neuen, deutlich helleren Grautöne */
:root[data-theme="dark"] {
  --body-color: #c8c8c8;
  --heading-color: #ffffff;
  --primary-color: #FF6B00;

  --dark-bg: #292929;         /* Seiten-Hintergrund (deutlich dunkler als vorher) */
  --dark-card: #232323;       /* Boxen und Karten */
  --border-color: rgba(255, 255, 255, 0.12);
}

/* =======================================
   2. Globale Umfärbungen
   ======================================= */
[data-theme="dark"] body {
  background-color: var(--dark-bg) !important;
  color: var(--body-color) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, 
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .ud-section-title h2, [data-theme="dark"] .ud-wip-title,
[data-theme="dark"] .text-dark {
  color: var(--heading-color) !important;
  /* Dezente Leuchtkraft für bessere Lesbarkeit auf dunklen Hintergründen */
  text-shadow: 0 0 30px rgba(255,255,255,0.08);
}

[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] .lead {
  color: var(--body-color) !important;
}

/* =======================================
   3. NAVBAR
   ======================================= */

/* Nicht-sticky Header: im Light Mode weißer Hintergrund → im Dark Mode dunkel */
[data-theme="dark"] .ud-header {
  background-color: rgba(22, 22, 26, 0.97) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .sticky {
  background-color: rgba(22, 22, 26, 0.97) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .sticky::before {
  background-color: rgba(22, 22, 26, 0.97) !important;
}

/* Alle Desktop-Nav-Links im Dark Mode: weiß (beide Zustände) */
[data-theme="dark"] .desktop-nav-link,
[data-theme="dark"] .ud-header.sticky .desktop-nav-link {
  color: #ffffff !important;
}
[data-theme="dark"] .desktop-nav-link i,
[data-theme="dark"] .ud-header.sticky .desktop-nav-link i {
  color: #ffffff !important;
}

/* Sticky Dark Mode: Nav-Links weiß */
[data-theme="dark"] .sticky .navbar-nav .nav-item > a {
  color: #ffffff !important; 
}

[data-theme="dark"] .sticky .navbar-nav .nav-item > a:hover, 
[data-theme="dark"] .sticky .navbar-nav .nav-item > a.active {
  color: var(--primary-color) !important;
}

[data-theme="dark"] .sticky .navbar-toggler .toggler-icon {
  background-color: #ffffff !important;
}

[data-theme="dark"] .dropdown-menu-dark,
[data-theme="dark"] .navbar-nav .nav-item .ud-submenu,
[data-theme="dark"] .notification-dropdown,
[data-theme="dark"] .user-dropdown {
  background-color: var(--dark-card) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .navbar-nav .nav-item .ud-submenu .ud-submenu-link,
[data-theme="dark"] .dropdown-menu-dark .dropdown-item {
  color: var(--heading-color) !important;
}

[data-theme="dark"] .navbar-nav .nav-item .ud-submenu .ud-submenu-link:hover,
[data-theme="dark"] .dropdown-menu-dark .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--primary-color) !important;
}
/* =======================================
   4. TEXTUREN (Dunkle, tiefe Schichten)
   ======================================= */
[data-theme="dark"] .texture-1, [data-theme="dark"] .auth-section {
  background: 
    radial-gradient(circle at 50% 50%, rgba(255, 107, 0, 0.04) 0%, transparent 70%), 
    linear-gradient(29deg, rgba(0,0,0,0.5) 57.81%, transparent 0),
    linear-gradient(62deg, #1a1a22 0%, #111116 100%) !important;
}

[data-theme="dark"] .texture-2 {
  background: 
    radial-gradient(circle at 50% 50%, rgba(255, 107, 0, 0.04) 0%, transparent 70%),
    linear-gradient(335deg, rgba(0,0,0,0.4) 65.63%, transparent 0),
    linear-gradient(195deg, #111116 0%, #1a1a22 100%) !important;
}

[data-theme="dark"] .texture-3 {
  background: 
    radial-gradient(circle at 50% 50%, rgba(255, 107, 0, 0.04) 0%, transparent 70%),
    linear-gradient(343deg, rgba(0,0,0,0.3) 61.95%, transparent 0),
    linear-gradient(70deg, #111116 0%, #1a1a22 100%) !important;
}

[data-theme="dark"] .texture-4 {
  background: 
    radial-gradient(circle at 50% 50%, rgba(255, 107, 0, 0.04) 0%, transparent 70%),
    linear-gradient(246deg, #1a1a22 0%, #111116 100%) !important;
}

/* Sektionen ohne Textur */
[data-theme="dark"] .ud-about, [data-theme="dark"] .ud-services, 
[data-theme="dark"] .ud-faq, [data-theme="dark"] .ud-contact, 
[data-theme="dark"] .ud-page-wrapper, [data-theme="dark"] .ud-shop-section, 
[data-theme="dark"] .ud-shop-products, [data-theme="dark"] .ud-cart-section, 
[data-theme="dark"] .ud-wip-section, [data-theme="dark"] .ud-legal-content, 
[data-theme="dark"] .dark-section, [data-theme="dark"] .ud-shop-filters,
[data-theme="dark"] .ud-pricing, [data-theme="dark"] .ud-team {
  background: var(--dark-bg) !important;
}

/* Kompakter Shop-Seitenkopf (Breadcrumb + H1) – im Light-Mode hellgrau,
   daher im Dark-Mode explizit auf dunklen Hintergrund setzen. */
[data-theme="dark"] .ud-shop-pagehead {
  background: var(--dark-bg) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* =======================================
   5. Karten, Container & Boxen
   ======================================= */
[data-theme="dark"] .ud-about-wrapper, [data-theme="dark"] .ud-single-faq, 
[data-theme="dark"] .ud-single-testimonial, [data-theme="dark"] .ud-contact-form-wrapper, 
[data-theme="dark"] .ud-shop-search-wrapper, [data-theme="dark"] .ud-shop-product-card,
[data-theme="dark"] .ud-cart-items, [data-theme="dark"] .ud-cart-summary, 
[data-theme="dark"] .ud-anfrage-form-wrapper, [data-theme="dark"] .ud-wip-feature-card, 
[data-theme="dark"] .auth-card, [data-theme="dark"] .filter-panel, 
[data-theme="dark"] .ud-training-section, [data-theme="dark"] .ud-cart-message,
[data-theme="dark"] .privacy-content-wrapper {
  background-color: var(--dark-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .ud-single-faq .ud-faq-btn {
  color: var(--heading-color) !important;
}

/* =======================================
   6. Glassmorphismus
   ======================================= */
[data-theme="dark"] .glass.card, 
[data-theme="dark"] .about-link-card, 
[data-theme="dark"] .floating-glass-box {
  background: rgba(255, 255, 255, 0.07) !important;  /* Karte hebt sich ab vom Body */
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .glass.card:hover, 
[data-theme="dark"] .about-link-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 15px 40px rgba(255, 107, 0, 0.18) !important;
}

/* Orange Icon-Kreise (inline style rgba(255,127,0,0.1)) – im Dark Mode sichtbar machen */
[data-theme="dark"] .rounded-circle[style] {
  background: rgba(255, 127, 0, 0.28) !important;
}

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

/* =======================================
   7. Formulare & Inputs
   ======================================= */
[data-theme="dark"] .form-control, 
[data-theme="dark"] input, 
[data-theme="dark"] textarea, 
[data-theme="dark"] select, 
[data-theme="dark"] .form-control-auth {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--heading-color) !important;
}

[data-theme="dark"] .form-control:focus, 
[data-theme="dark"] input:focus, 
[data-theme="dark"] textarea:focus, 
[data-theme="dark"] select:focus {
  border-color: var(--primary-color) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] ::placeholder {
  color: #999999 !important;
}

/* =======================================
   8. Shop, Buttons & Sonstiges
   ======================================= */
[data-theme="dark"] .ud-shop-product-card .ud-product-title,
[data-theme="dark"] .ud-shop-product-card .ud-product-footer .ud-product-price .price-value,
[data-theme="dark"] .ud-cart-item-name, 
[data-theme="dark"] .ud-cart-item-subtotal, 
[data-theme="dark"] .ud-cart-summary h3,
[data-theme="dark"] .ud-cart-summary-row.total .value,
[data-theme="dark"] .text-link-more {
  color: var(--heading-color) !important;
}

[data-theme="dark"] hr, 
[data-theme="dark"] .ud-timeline-line {
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
}

/* Partner-Logos: weiße Karte im Dark Mode damit Originalfarben sichtbar bleiben */
[data-theme="dark"] .partner-logo-box {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .partner-logo-box:hover {
  box-shadow: 0 8px 28px rgba(255, 127, 0, 0.25) !important;
}
/* Kein Farbfilter mehr – Logos in Originalfarben zeigen */
[data-theme="dark"] .partner-img {
  filter: none !important;
}

/* Hersteller-Logos: Die Box bleibt im Dark Mode hell (wie im Light Mode),
   damit die farbigen/dunklen Hersteller-Logos gut erkennbar sind.
   Die Ueberschrift bleibt dazu passend dunkel. */
[data-theme="dark"] #software_hersteller {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] #software_hersteller h2 {
  color: #1a1a2e !important;
}

[data-theme="dark"] .theme-toggle-edge {
  background-color: #FF6B00;
  color: #ffffff;
  border-left: 1px solid rgba(255,255,255,0.15);
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .theme-toggle-edge:hover {
  background-color: #ff8124;
  color: #ffffff;
}

[data-theme="dark"] .ud-footer {
  background: #0d0d11 !important;
}

[data-theme="dark"] .ud-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .sticky .cart-icon-btn,
[data-theme="dark"] .sticky .notification-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .sticky .cart-icon-btn:hover,
[data-theme="dark"] .sticky .notification-btn:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .sticky .navbar-auth .user-menu-toggle {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
/*
=====================================================
    MEGA MENU STYLES (DARK MODE)
=====================================================
*/

/* Überschreibt den Hintergrund für alle Zustände (sticky/nicht-sticky) */
[data-theme="dark"] .has-megamenu .dropdown-menu { 
    background-color: rgba(58, 58, 60, 0.95) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
    border-top: none !important; 
}

[data-theme="dark"] .ud-header.sticky .has-megamenu .dropdown-menu {
  background-color: var(--dark-card) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
  border-top: none !important;
}
[data-theme="dark"] .ud-header.sticky .megamenu-nav-item a {
  color: var(--body-color) !important;
}
[data-theme="dark"] .ud-header.sticky .megamenu-nav-item a i {
  color: var(--body-color) !important;
}
[data-theme="dark"] .ud-header.sticky .megamenu-content h4,
[data-theme="dark"] .ud-header.sticky .megamenu-content h5,
[data-theme="dark"] .ud-header.sticky .megamenu-content p {
  color: var(--heading-color) !important;
}
[data-theme="dark"] .ud-header.sticky .megamenu-content > a i {
  color: var(--body-color) !important;
}


/* Überschreibt die Link-Farben für alle Zustände */
[data-theme="dark"] .megamenu-nav-item a { 
    color: var(--body-color, #d4d4d8) !important; 
}
[data-theme="dark"] .megamenu-nav-item a i { 
    color: #999 !important; 
}

/* Überschreibt die Text- und Überschriftenfarben für alle Zustände */
[data-theme="dark"] .megamenu-content h5,
[data-theme="dark"] .megamenu-content h4,
[data-theme="dark"] .megamenu-content h3 { 
    color: var(--heading-color, #ffffff) !important; 
}
[data-theme="dark"] .megamenu-content p {
    color: var(--body-color, #d4d4d8) !important;
}

/* Sorgt dafür, dass aktive und gehoverte Links IMMER orange sind */
[data-theme="dark"] .megamenu-nav-item a:hover, 
[data-theme="dark"] .megamenu-nav-item a.active { 
    color: #FF6B00 !important; 
    background-color: rgba(255, 107, 0, 0.1) !important; 
}
[data-theme="dark"] .megamenu-nav-item a:hover i, 
[data-theme="dark"] .megamenu-nav-item a.active i {
    color: #FF6B00 !important;
}

/* ==========================================================================
   ERWEITERUNGEN – Neue Komponenten (3-Step-Formular, Topbar, Hero-Strip)
   ========================================================================== */

/* ── Topbar ── */
[data-theme="dark"] .top-bar {
  background: #1a1a1a !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .top-bar a,
[data-theme="dark"] .top-bar .hover-orange {
  color: #c9c9c9 !important;
}
[data-theme="dark"] .top-bar a:hover {
  color: #FF8533 !important;
}

/* ── Logo-Umschaltung per CSS ──
   Standard (heller Modus, ohne data-theme-Attribut): farbige Variante zeigen,
   weiße Variante ausblenden. Nur im Dark Mode wird umgeschaltet. So werden die
   Logos auch dann korrekt einzeln angezeigt, wenn im hellen Modus kein
   data-theme="light" gesetzt ist. */
.logo-dark  { display: none !important; }
.logo-light { display: inline-block !important; }
[data-theme="dark"]  .logo-light { display: none !important; }
[data-theme="dark"]  .logo-dark  { display: inline-block !important; }

/* ── Theme-Toggle-Button ── */
.theme-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .2s, background .2s;
  color: inherit;
}
.theme-toggle-btn:hover {
  background: rgba(255,127,0,.12);
  color: #FF7F00;
}
[data-theme="dark"] .sticky .theme-toggle-btn {
  color: #ffffff;
}

/* ── Pill-Toggle-Schalter ── */
.theme-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .95rem;
  color: #ffffff;
  transition: background .2s;
  line-height: 1;
}
.theme-toggle-pill:hover {
  background: rgba(255,255,255,.12);
}
/* Im sticky (weißen) Header: Ikonfarbe anpassen */
.sticky .theme-toggle-pill {
  color: #374151;
}
.sticky .theme-toggle-pill:hover {
  background: rgba(0,0,0,.07);
}

/* Track (der Hintergrund des Schiebers) */
.theme-pill-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255,255,255,.3);
  border: 1.5px solid rgba(255,255,255,.5);
  transition: background .3s, border-color .3s;
  flex-shrink: 0;
}
.sticky .theme-pill-track {
  background: #d1d5db;
  border-color: #9ca3af;
}

/* Thumb (der weiße Kreis) */
.theme-pill-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.sticky .theme-pill-thumb {
  background: #6b7280;
}

/* Icons */
.theme-icon-sun  { transition: opacity .2s; }
.theme-icon-moon { transition: opacity .2s; }

/* ── LIGHT MODE: Sonne aktiv, Thumb links ── */
/* Light Mode: Header ist immer weiß (auch nicht-sticky) →
   Toggle dunkel einfärben, sonst weiß auf weiß = unsichtbar */
[data-theme="light"] .theme-toggle-pill {
  color: #374151;
}
[data-theme="light"] .theme-pill-track {
  background: #e5e7eb;
  border-color: #d1d5db;
}
[data-theme="light"] .theme-pill-thumb {
  transform: translateX(0);
  background: #6b7280;
}
[data-theme="light"] .theme-icon-sun  { opacity: 1; }
[data-theme="light"] .theme-icon-moon { opacity: .45; }

/* ── DARK MODE: Mond aktiv, Thumb rechts ── */
[data-theme="dark"] .theme-pill-track {
  background: #FF7F00;
  border-color: #FF7F00;
}
[data-theme="dark"] .theme-pill-thumb {
  transform: translateX(18px);
  background: #ffffff;
}
[data-theme="dark"] .theme-icon-sun  { opacity: .45; }
[data-theme="dark"] .theme-icon-moon { opacity: 1; color: #FFD166; }

/* Im sticky Dark-Header */
[data-theme="dark"] .sticky .theme-toggle-pill {
  color: #e5e5e5;
}
[data-theme="dark"] .sticky .theme-toggle-pill:hover {
  background: rgba(255,255,255,.1);
}

/* ── Mode-Label neben dem Pill ── */
.theme-mode-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.9;
  min-width: 58px;
  text-align: center;
}
/* Light: Header ist weiß → "HELL" in Dunkelgrau (sonst weiß auf weiß) */
[data-theme="light"] .theme-mode-label {
  color: #6b7280;
}
/* Im sticky weißen Header: dunkelgrau */
[data-theme="light"] .sticky .theme-mode-label {
  color: #6b7280;
}
/* Dark: zeige "DARK" in Orange – signalisiert aktiven Dark Mode */
[data-theme="dark"] .theme-mode-label {
  color: #FF8533;
}
[data-theme="dark"] .sticky .theme-mode-label {
  color: #FF8533;
}

/* ── Contact Info Strip (3 Kacheln über dem Formular) ── */
[data-theme="dark"] .contact-info-strip .glass.card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .contact-info-strip .glass.card i {
  color: #FF8533 !important;
}

/* ── 3-Step-Formular Wrapper ── */
[data-theme="dark"] #contact .glass.card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ── Topic Cards ── */
[data-theme="dark"] .topic-card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #d1d1d1 !important;
}
[data-theme="dark"] .topic-card i {
  color: #999 !important;
}
[data-theme="dark"] .topic-card:hover,
[data-theme="dark"] .topic-card.selected {
  background: rgba(255,127,0,.12) !important;
  border-color: #FF7F00 !important;
  color: #FF8533 !important;
  box-shadow: 0 0 0 3px rgba(255,127,0,.22) !important;
}
[data-theme="dark"] .topic-card:hover i,
[data-theme="dark"] .topic-card.selected i {
  color: #FF8533 !important;
}

/* ── Multistep-Dots ── */
[data-theme="dark"] .multistep-dot {
  background: #3a3a3a !important;
  color: #9ca3af !important;
}
[data-theme="dark"] .multistep-dot.active {
  background: #FF7F00 !important;
  color: #fff !important;
}
[data-theme="dark"] .multistep-dot.done {
  background: #16a34a !important;
  color: #fff !important;
}
[data-theme="dark"] .multistep-line {
  background: #3a3a3a !important;
}
[data-theme="dark"] .multistep-line.done {
  background: #16a34a !important;
}

/* ── Step-Label ── */
[data-theme="dark"] #stepLabel {
  color: #9ca3af !important;
}

/* ── Formular-Felder im Kontaktformular ── */
[data-theme="dark"] #contactForm .form-control,
[data-theme="dark"] #contactForm textarea {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #e5e5e5 !important;
}
[data-theme="dark"] #contactForm .form-control:focus,
[data-theme="dark"] #contactForm textarea:focus {
  border-color: #FF7F00 !important;
  background: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] #contactForm label {
  color: #d1d1d1 !important;
}
[data-theme="dark"] #contactForm .form-check-label {
  color: #b0b0b0 !important;
}

/* ── Back/Next-Button (Outline-Orange) ── */
[data-theme="dark"] .custom-btn-outline {
  border-color: #FF8533 !important;
  color: #FF8533 !important;
}
[data-theme="dark"] .custom-btn-outline:hover {
  background: #FF7F00 !important;
  color: #fff !important;
}

/* ── FAQ-Akkordeon im Dark Mode ── */
[data-theme="dark"] .accordion-item {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .accordion-button {
  background: rgba(255,255,255,0.06) !important;
  color: #e5e5e5 !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: rgba(255,127,0,.12) !important;
  color: #FF8533 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.5);
}
[data-theme="dark"] .accordion-body {
  background: rgba(255,255,255,0.02) !important;
  color: #b0b0b0 !important;
}

/* ── Ken-Burns Hero (Kontaktseite) ── */
[data-theme="dark"] .ken-burns-bg {
  filter: brightness(0.7);
}

/* ── Hero Dark Glass (schon dunkel – nur Glasskarte anpassen) ── */
[data-theme="dark"] .hero-dark-glass {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ── Dekorative Shapes: NUR subtil abblenden, KEINE ganze Section ── */
[data-theme="dark"] .ud-hero-shape {
  opacity: 0.4 !important;
}
/* shape-1/2/3: Bootstrap-Team-Shapes, nicht ausblenden */

/* ── Modal (Kontakt-Erfolg/Fehler) ── */
[data-theme="dark"] .modal-content {
  background: #1e1e1e !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #e5e5e5 !important;
}
[data-theme="dark"] .modal-body {
  color: #b0b0b0 !important;
}

/* ── Back-to-top ── */
[data-theme="dark"] .back-to-top {
  background: #FF7F00 !important;
}

/* ── Dropdown-Menus (Light Mode fixed weißer Hintergrund) ── */
[data-theme="dark"] .dropdown-menu-light {
  background: rgba(38,38,42,0.97) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .dropdown-menu-light .dropdown-item,
[data-theme="dark"] .dropdown-menu-light button {
  color: #d1d1d1 !important;
}
[data-theme="dark"] .dropdown-menu-light .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu-light button:hover {
  background: rgba(255,127,0,.1) !important;
  color: #FF8533 !important;
}

/* Mega-Menue: im Dark Mode denselben Hover wie Ueber uns/Kontakt (leichtes Orange). */
[data-theme="dark"] .mega2-link:hover {
  background: rgba(255, 127, 0, 0.1) !important;
  color: #FF8533 !important;
}

/* Ueber uns / Kontakt: im Dark Mode Hovertext ebenfalls orange (statt weiss).
   Ueberschreibt die generische Regel ".dropdown-menu a:hover strong". */
[data-theme="dark"] .hover-bg-light:hover,
[data-theme="dark"] .dropdown-menu a.hover-bg-light:hover strong,
[data-theme="dark"] .hover-bg-light:hover strong {
  color: #FF8533 !important;
}

/* ── Mobile Overlay Menü ── */
[data-theme="dark"] .custom-mobile-overlay {
  background: #1a1a1a !important;
}
[data-theme="dark"] .mobile-nav-link,
[data-theme="dark"] .mobile-overlay-body .mobile-nav-link {
  color: #d1d1d1 !important;
}
[data-theme="dark"] .mobile-menu-divider {
  border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .mobile-overlay-header {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .mobile-close-btn {
  color: #d1d1d1 !important;
}
[data-theme="dark"] .accordion-button.collapsed {
  background: transparent !important;
  color: #d1d1d1 !important;
}

/* ── Sticky Header Dark Mode: dunkles Glas (bereits oben definiert) ── */

/* ── Selected Topic Badge ── */
[data-theme="dark"] #selectedTopicBadge {
  color: #FF8533 !important;
}

/* ── User-Dropdown ── */
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .utility-dropdown-link {
  color: #d1d1d1 !important;
}
[data-theme="dark"] .utility-dropdown-link:hover {
  background: rgba(255,127,0,.08) !important;
  color: #FF8533 !important;
}

/* ==========================================================================
   UMFASSENDE TEXT- UND KARTEN-FIXES (alle unlesbaren Kacheln)
   ========================================================================== */

/* Bootstrap text-Hilfklassen */
[data-theme="dark"] .text-dark  { color: #e5e5e5 !important; }
[data-theme="dark"] .text-muted { color: #9ca3af !important; }
[data-theme="dark"] .text-body  { color: #d1d1d1 !important; }
[data-theme="dark"] .text-black { color: #e5e5e5 !important; }

/* Sektions-Hintergründe die in Light weiß/hellgrau sind → im Dark dunkel */
[data-theme="dark"] .texture-silver-light,
[data-theme="dark"] .texture-white,
[data-theme="dark"] .services-scroll-section,
[data-theme="dark"] section.py-5:not(.ud-hero):not(.ud-footer):not([class*="texture-1"]):not([class*="texture-2"]):not([class*="texture-3"]):not([class*="texture-4"]) {
  background: var(--dark-bg) !important;
  opacity: 1 !important;   /* Kein opacity-Bug von außen */
}
[data-theme="dark"] .scroll-section-blob {
  background: var(--primary-color) !important;
  opacity: 1 !important;   /* Kein opacity-Bug von außen */
}
/* Kontakt-Info-Kacheln: alle Texte und Icons hell */
[data-theme="dark"] #contact,
[data-theme="dark"] .contact-info-strip {
  background: var(--dark-bg) !important;
}
[data-theme="dark"] #contact h1, [data-theme="dark"] #contact h2,
[data-theme="dark"] #contact h3, [data-theme="dark"] #contact h4,
[data-theme="dark"] #contact h5, [data-theme="dark"] #contact h6 {
  color: #ffffff !important;
}
[data-theme="dark"] #contact p, [data-theme="dark"] #contact small,
[data-theme="dark"] #contact label { color: #c8c8c8 !important; }
[data-theme="dark"] #contact a     { color: #9ca3af !important; }
[data-theme="dark"] #contact a:hover { color: #FF8533 !important; }
[data-theme="dark"] #contact i[style*="color:#FF7F00"],
[data-theme="dark"] #contact i[style*="color: #FF7F00"] {
  color: #FF8533 !important;  /* Icons in Kontakt-Strip bleiben orange */
  text-shadow: 0 0 20px rgba(255,127,0,0.4);  /* Dezenter Glüh-Effekt */
}

/* Bootstrap card */
[data-theme="dark"] .card {
  background-color: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #d1d1d1 !important;
}
[data-theme="dark"] .card-body  { color: #d1d1d1 !important; }
[data-theme="dark"] .card-title { color: #ffffff !important; }
[data-theme="dark"] .card-text  { color: #9ca3af !important; }

/* Alle Links innerhalb von Karten */
[data-theme="dark"] .glass.card a:not(.btn):not(.custom-btn),
[data-theme="dark"] .card a:not(.btn):not(.custom-btn) {
  color: #e5e5e5 !important;
}

/* Glasskarten – Text immer hell */
[data-theme="dark"] .glass.card h1,
[data-theme="dark"] .glass.card h2,
[data-theme="dark"] .glass.card h3,
[data-theme="dark"] .glass.card h4,
[data-theme="dark"] .glass.card h5,
[data-theme="dark"] .glass.card h6 {
  color: #ffffff !important;
}
[data-theme="dark"] .glass.card p,
[data-theme="dark"] .glass.card small,
[data-theme="dark"] .glass.card span:not(.badge):not(.ud-popular-tag) {
  color: #d1d1d1 !important;
}
/* Ausnahme: Badge-Text in Orange-Span bleibt weiß */
[data-theme="dark"] .glass.card .ud-section-title span,
[data-theme="dark"] .glass.card .hero-badge {
  color: #ffffff !important;
}

/* Kontakt-Info-Kacheln: Icons und Texte */
[data-theme="dark"] .contact-info-strip h5,
[data-theme="dark"] .contact-info-strip p,
[data-theme="dark"] .contact-info-strip a {
  color: #d1d1d1 !important;
}
[data-theme="dark"] .contact-info-strip a:hover {
  color: #FF8533 !important;
}

/* Station-Items (Timeline / About-Seite) */
[data-theme="dark"] .station-item {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .station-item h4,
[data-theme="dark"] .station-item h5,
[data-theme="dark"] .station-item p,
[data-theme="dark"] .station-item span {
  color: #d1d1d1 !important;
}

/* Ud-Section-Title (Sektionsüberschriften) */
[data-theme="dark"] .ud-section-title h2 { color: #ffffff !important; }
[data-theme="dark"] .ud-section-title p   { color: #9ca3af !important; }

/* Feature-Karten (Landing & Consulting) */
[data-theme="dark"] .ud-single-feature {
  color: #d1d1d1 !important;
}
[data-theme="dark"] .ud-single-feature .ud-feature-title { color: #ffffff !important; }
[data-theme="dark"] .ud-single-feature .ud-feature-desc  { color: #9ca3af !important; }
[data-theme="dark"] .ud-single-feature .ud-feature-link  { color: #FF8533 !important; }

/* Pricing-Karten */
[data-theme="dark"] .ud-single-pricing {
  background: var(--dark-card) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] .ud-single-pricing .ud-pricing-header h3,
[data-theme="dark"] .ud-single-pricing .ud-pricing-header h4,
[data-theme="dark"] .ud-single-pricing .ud-pricing-body li { color: #d1d1d1 !important; }

/* Blog-Karten */
[data-theme="dark"] .ud-single-blog { background: var(--dark-card) !important; }
[data-theme="dark"] .ud-single-blog .ud-blog-title a,
[data-theme="dark"] .ud-single-blog .ud-blog-desc { color: #d1d1d1 !important; }

/* Karriere-Seite: Job-Suchfeld + "Keine offenen Stellen"-Box (feste helle Inline-Farben aufheben) */
[data-theme="dark"] #jobSearchInput {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e5e5e5 !important;
}
[data-theme="dark"] #jobSearchInput::placeholder {
  color: #9ca3af !important;
}
[data-theme="dark"] .career-no-jobs {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .career-no-jobs h3 {
  color: #ffffff !important;
}
[data-theme="dark"] .career-no-jobs p {
  color: #d1d1d1 !important;
}
[data-theme="dark"] .career-no-jobs a {
  color: #FF8533 !important;
}

/* Team-Karten */
[data-theme="dark"] .ud-single-team .ud-team-info h5,
[data-theme="dark"] .ud-single-team .ud-team-info h6 { color: #e5e5e5 !important; }

/* Shop Hero Stat-Karten */
[data-theme="dark"] .hero-stat-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .hero-stat-card .value  { color: #ffffff !important; }
[data-theme="dark"] .hero-stat-card .label   { color: #9ca3af !important; }

/* About-Link-Karten */
[data-theme="dark"] .about-link-card h4,
[data-theme="dark"] .about-link-card h5,
[data-theme="dark"] .about-link-card p { color: #d1d1d1 !important; }
[data-theme="dark"] .about-link-card:hover h4,
[data-theme="dark"] .about-link-card:hover h5 { color: #FF8533 !important; }

/* Kleine Info-Boxen (z.B. split-content) */
[data-theme="dark"] .split-content h4,
[data-theme="dark"] .split-content h5,
[data-theme="dark"] .split-content p { color: #d1d1d1 !important; }

/* Consulting-Seite Zählwerte / Statistiken */
[data-theme="dark"] .stat-number,
[data-theme="dark"] .counter-value,
[data-theme="dark"] [id^="counter"] { color: #ffffff !important; }
[data-theme="dark"] .stat-label { color: #9ca3af !important; }

/* Formular-Checkbox-Label und Datenschutz-Link */
[data-theme="dark"] .form-check-label a { color: #FF8533 !important; }

/* Sticky Header: Track im Dark Mode auch im eingefrorenen Zustand orange */
[data-theme="dark"] .sticky .theme-pill-track {
  background: #FF7F00 !important;
  border-color: #FF7F00 !important;
}
[data-theme="dark"] .sticky .theme-pill-thumb {
  transform: translateX(18px) !important;
  background: #ffffff !important;
}

/* Überschreibt die Pfeil-Farbe für alle Zustände */
[data-theme="dark"] .megamenu-content > a i {
  color: #6c757d !important;
}
[data-theme="dark"] .megamenu-content > a:hover i {
  color: #FF6B00 !important;
}

/* Mobiles Menü im Dark Mode */
@media (max-width: 991.98px) {
  [data-theme="dark"] .navbar-collapse .has-megamenu .dropdown-item {
    color: var(--body-color, #d4d4d8) !important;
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.15));
  }
  [data-theme="dark"] .navbar-collapse .has-megamenu .dropdown-item:hover {
    color: #FF6B00 !important;
  }
}

/* ==========================================================================
   SCROLL-SERVICE-KACHELN (Asset/Lizenz/Cloud/Trainings auf Landing-Page)
   .geom-text-box → dunkler Glas-Hintergrund (einheitlich mit .glass.card),
   Überschriften weiß, Text hellgrau
   ========================================================================== */
[data-theme="dark"] .geom-text-box {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .geom-text-box:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 15px 40px rgba(255, 107, 0, 0.18) !important;
}
[data-theme="dark"] .geom-text-box h1,
[data-theme="dark"] .geom-text-box h2,
[data-theme="dark"] .geom-text-box h3,
[data-theme="dark"] .geom-text-box h4,
[data-theme="dark"] .geom-text-box h5,
[data-theme="dark"] .geom-text-box h6 {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
[data-theme="dark"] .geom-text-box p,
[data-theme="dark"] .geom-text-box .lead {
  color: #d1d1d1 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .geom-text-box .text-dark  { color: #ffffff !important; }
[data-theme="dark"] .geom-text-box .text-muted { color: #c0c0c0 !important; }

/* Euro-VOIP glass.card: Logo + Überschrift + Text */
[data-theme="dark"] .glass.card h3.text-dark,
[data-theme="dark"] .glass.card h4.text-dark,
[data-theme="dark"] .glass.card .display-5.text-dark {
  color: #ffffff !important;
}
[data-theme="dark"] .glass.card p.text-muted,
[data-theme="dark"] .glass.card .lead.text-muted {
  color: #c0c0c0 !important;
}


/* ==========================================================================
   SCROLL-TRACKER (Startseite, klebende Bereichsnavigation)
   ========================================================================== */

/* Hintergrund der klebenden Leiste: kein Glassmorphismus, keine Box */
[data-theme="dark"] .sticky-header-container {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  border: none !important;
  box-shadow: none !important;
}

/* Inaktive Tracker-Items: bereits #9ca3af → passt */
[data-theme="dark"] .tracker-item {
  color: #9ca3af !important;
}

/* Aktives Tracker-Item: war #111111 (schwarz) → weiß */
[data-theme="dark"] .tracker-item.active {
  color: #ffffff !important;
}

/* Trennlinie zwischen Logo und Items */
[data-theme="dark"] .tracker-logo {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Tracker-Logo: nutzt im Dark Mode die -white.svg-Variante (oranges "sey") via .logo-light/.logo-dark – kein Filter */

/* ==========================================================================
   LOGO-FIXES IM DARK MODE
   Dunkle SVG-Logos → per CSS-Filter zu Weiß invertieren
   ========================================================================== */

/* Mega-Menu Brand-Logos: nutzen im Dark Mode die -white.svg-Varianten (oranges "sey" + weißer Text)
   via .logo-light/.logo-dark Switch – kein Filter mehr (sonst würde auch "sey" weiß). */

/* Mega-Menu Link-Text weiß (strong.text-dark innerhalb von .mega-menu-link) */
[data-theme="dark"] .mega-menu-link strong,
[data-theme="dark"] .mega-menu-link strong.text-dark,
[data-theme="dark"] .dropdown-menu .mega-menu-link {
  color: #e5e5e5 !important;
}
[data-theme="dark"] .mega-menu-link:hover strong {
  color: #FF8533 !important;
}

/* Mega-Menü Spalten-Hintergründe im Dark Mode dunkel halten
   (sonst heller Text/weiße Logos auf hellem brand-column/bg-white → unlesbar) */
[data-theme="dark"] .full-width-megamenu .brand-column,
[data-theme="dark"] .full-width-megamenu .brand-column.bg-white {
  background-color: transparent !important;
}
/* Der 3-Spalten-Hellverlauf liegt auf .row und schien im Dark Mode durch die
   transparenten Spalten hindurch – hier auf die dunkle Kartenfarbe setzen. */
[data-theme="dark"] .ud-header .full-width-megamenu .row {
  background: var(--dark-card) !important;
}
[data-theme="dark"] .full-width-megamenu .brand-column-alt {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .full-width-megamenu .brand-column:not(:last-child) {
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}

/* About/Über-uns Dropdown: Texte hell */
[data-theme="dark"] .dropdown-menu .dropdown-item strong.text-dark,
[data-theme="dark"] .dropdown-menu .dropdown-item .fw-normal.text-dark {
  color: #e5e5e5 !important;
}
[data-theme="dark"] .dropdown-menu .dropdown-item:hover strong {
  color: #FF8533 !important;
}

/* Haupt-Header-Logo: logo-light → logo-dark Switch (seyit-logo → seyit-consulting-white) */
/* (bereits per .logo-light/.logo-dark Klassen geregelt – s.o.) */

/* Footer: Hauptlogo nutzt jetzt seyit-logo-white.svg (weiß mit orangem "sey") – kein Filter nötig */

/* Mobile Overlay: Header-Logo und Brand-Logos (auf dunklem Hintergrund → weiß) */
/* Mobile Logos: Light/Dark-Switch statt Weiß-Filter (oranges "sey" bleibt erhalten) */
.mobile-logo-dark { display: none; }
[data-theme="dark"] .mobile-logo-light { display: none !important; }
[data-theme="dark"] .mobile-logo-dark { display: block !important; }

/*
========================================
    MOBILES MENÜ - AKKORDEON (DARK MODE)
========================================
*/
@media (max-width: 991.98px) {
  [data-theme="dark"] .mobile-accordion-wrapper {
    background-color: transparent;
  }

  [data-theme="dark"] .mobile-accordion-link {
    color: var(--body-color, #d4d4d8);
    border-bottom-color: rgba(255, 255, 255, 0.05);
    background-color: transparent;
  }

  [data-theme="dark"] .mobile-accordion-link:hover,
  [data-theme="dark"] .mobile-accordion-link:active {
    color: #FF6B00;
    background-color: transparent;
  }
}

/* ============================================================
   FIX: Dark-Mode Icons & Kachel-Lesbarkeit
   ============================================================ */

/* Punkt 2: Dunkle SVG-Icons (stroke #111111) im Dark Mode sichtbar machen
   (Asset-Management- und weitere Leistungs-Icons auf den Service-Seiten) */
[data-theme="dark"] svg path[stroke="#111111"] {
    stroke: #e5e5e5 !important;
}

/* Punkte 3–8: Kachel-Textlesbarkeit – Service-Listen & Überschriften hell */
[data-theme="dark"] .ud-service-list li {
    color: #d1d1d1 !important;
}
[data-theme="dark"] .ud-service-list li strong {
    color: #ffffff !important;
}
[data-theme="dark"] .ud-service-list li:hover {
    color: #ffffff !important;
}
[data-theme="dark"] .clean-heading {
    color: var(--heading-color) !important;
}
/*
=====================================================
    9. HEADER / DESKTOP-NAVBAR (aktuelle Struktur)
=====================================================
*/

/* Der Header hat immer einen soliden Hintergrund (nicht transparent) */
[data-theme="dark"] .ud-header {
  background-color: var(--dark-card) !important;
  border-bottom-color: var(--border-color) !important;
}

/* Desktop-Navigationslinks (Home, Kontakt, Dropdown-Trigger) */
[data-theme="dark"] .desktop-nav-link,
[data-theme="dark"] .desktop-nav-link-plain {
  color: var(--heading-color) !important;
}
[data-theme="dark"] .desktop-nav-link i {
  color: var(--body-color) !important;
}
[data-theme="dark"] .desktop-nav-link:hover,
[data-theme="dark"] .desktop-nav-link.active,
[data-theme="dark"] .desktop-nav-link[aria-expanded="true"],
[data-theme="dark"] .desktop-nav-link:hover i,
[data-theme="dark"] .desktop-nav-link.active i,
[data-theme="dark"] .desktop-nav-link[aria-expanded="true"] i {
  color: var(--primary-color) !important;
}

/* Mega-Menü: weiße Flächen abdunkeln */
[data-theme="dark"] .ud-header .full-width-megamenu,
[data-theme="dark"] .ud-header .custom-dropdown .dropdown-menu:not(.full-width-megamenu) {
  background-color: var(--dark-card) !important;
}
[data-theme="dark"] .brand-column-alt {
  background-color: rgba(0, 0, 0, 0.15) !important;
}
[data-theme="dark"] .brand-column:not(:last-child) {
  border-right-color: var(--border-color) !important;
}
[data-theme="dark"] .mega-menu-link strong {
  color: var(--heading-color) !important;
}

/* Utility-Dropdown-Links (Konto-Menü, Sprachumschalter, Mobile-Icons) */
[data-theme="dark"] .utility-dropdown-link,
[data-theme="dark"] .header-icon-link,
[data-theme="dark"] a.text-dark,
[data-theme="dark"] button.text-dark {
  color: var(--heading-color) !important;
}
[data-theme="dark"] .dropdown-menu-light .bg-light,
[data-theme="dark"] .dropdown-item.bg-light {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Portal-Pill, Trennstrich & Sprachumschalter (inline <style> in base.html) */
[data-theme="dark"] .nav-divider {
  background-color: var(--border-color) !important;
}
[data-theme="dark"] .portal-btn {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--heading-color) !important;
}
[data-theme="dark"] .combined-portal-pill {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .combined-portal-pill .pill-segment {
  color: var(--heading-color) !important;
}
[data-theme="dark"] .combined-portal-pill .pill-divider {
  background-color: var(--border-color) !important;
}
[data-theme="dark"] .mobile-menu-btn,
[data-theme="dark"] .mobile-close-btn {
  color: var(--heading-color) !important;
}

/*
=====================================================
    10. MOBILE-OVERLAY-MENÜ (Vollbild)
=====================================================
*/
[data-theme="dark"] .custom-mobile-overlay {
  background-color: var(--dark-bg) !important;
}
[data-theme="dark"] .mobile-overlay-header {
  border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .mobile-nav-link,
[data-theme="dark"] .mobile-sub-link,
[data-theme="dark"] .mobile-accordion-item .accordion-button {
  color: var(--heading-color) !important;
}
[data-theme="dark"] .mobile-nav-link:hover,
[data-theme="dark"] .mobile-sub-link:hover,
[data-theme="dark"] .mobile-accordion-item .accordion-button:not(.collapsed) {
  color: var(--primary-color) !important;
}
[data-theme="dark"] .mobile-menu-divider,
[data-theme="dark"] .mobile-inner-divider,
[data-theme="dark"] .mobile-accordion-item {
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .mobile-accordion-item {
  background-color: var(--dark-bg) !important;
}
[data-theme="dark"] .mobile-accordion-item .accordion-button:not(.collapsed) {
  color: var(--primary-color) !important;
}
[data-theme="dark"] .mobile-accordion-item .accordion-button::after {
  filter: invert(1) brightness(2);
}

/*
=====================================================
    11. MODALS (Logout, Session-Timeout, Cookie-Consent)
=====================================================
*/
[data-theme="dark"] .logout-modal-content,
[data-theme="dark"] .session-timeout-content,
[data-theme="dark"] .cookie-modal-content {
  background-color: var(--dark-card) !important;
  color: var(--body-color) !important;
}
[data-theme="dark"] .logout-modal-header p,
[data-theme="dark"] .session-timeout-header p {
  color: var(--body-color) !important;
}
[data-theme="dark"] .logout-modal-actions .btn-outline {
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .cookie-modal-header {
  border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .cookie-modal-header h3,
[data-theme="dark"] .cookie-type-name {
  color: var(--heading-color) !important;
}
[data-theme="dark"] .cookie-modal-body > p,
[data-theme="dark"] .cookie-type-desc {
  color: var(--body-color) !important;
}
[data-theme="dark"] .cookie-type {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .cookie-modal-links a {
  color: var(--body-color) !important;
}

/*
=====================================================
    12. SHOP-WARTUNGSBANNER
=====================================================
*/
[data-theme="dark"] .shop-maintenance-banner {
  background: rgba(217, 119, 6, 0.18);
  border-bottom-color: rgba(217, 119, 6, 0.4);
  color: #fcd34d;
}
[data-theme="dark"] .shop-maintenance-banner__icon,
[data-theme="dark"] .shop-maintenance-banner__link {
  color: #fbbf24;
}
[data-theme="dark"] .shop-maintenance-banner__link:hover {
  color: #fde68a;
}

/*
=====================================================
    13. KUNDENDASHBOARD (Kundenportal)
=====================================================
*/

/* Die Grunddesign-Tokens des Dashboards auf die Studio-Grau-Palette umlegen.
   Da alle Dashboard-Komponenten ausschließlich über diese Variablen
   eingefärbt sind, reicht diese Umdefinition für die gesamte Kundenportal-Oberfläche. */
:root[data-theme="dark"] {
  --d-bg: var(--dark-bg);
  --d-surface: var(--dark-card);
  --d-border: var(--border-color);
  --d-text: var(--body-color);
  --d-text-secondary: #b8b8b8;
  --d-text-muted: #999999;
  --d-heading: var(--heading-color);
  --d-accent: var(--primary-color);
  --d-accent-soft: rgba(255, 107, 0, 0.16);
  --d-accent-hover: #ff8534;
  --d-success: #10b981;
  --d-info: #3b82f6;
  --d-warning: #f59e0b;
  --d-danger: #ef4444;
  --d-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --d-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Hart kodierte helle Flächen, die nicht über die Variablen laufen */
[data-theme="dark"] .d-form-input,
[data-theme="dark"] .form-control-soft,
[data-theme="dark"] .profile-form .form-control-auth,
[data-theme="dark"] .d-sidebar,
[data-theme="dark"] .ob-panel {
  background-color: rgba(0, 0, 0, 0.18) !important;
  color: var(--d-heading) !important;
}
[data-theme="dark"] .d-sidebar,
[data-theme="dark"] .ob-panel {
  background-color: var(--d-surface) !important;
}
[data-theme="dark"] .form-control-soft::placeholder,
[data-theme="dark"] .d-form-input::placeholder {
  color: var(--d-text-muted) !important;
}
[data-theme="dark"] .d-table tbody tr:hover td,
[data-theme="dark"] .soft-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .logo-preview,
[data-theme="dark"] .logo-placeholder,
[data-theme="dark"] .form-readonly,
[data-theme="dark"] .profile-email-readonly,
[data-theme="dark"] .ob-progress-track {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-color: var(--d-border) !important;
}

/* Übersichtsseite des Kundendashboards (accounts/dashboard/index.html):
   Die Quick-Access-Kacheln und einige Trennlinien/Metatexte sind dort
   fest verdrahtet (#f8f9fa, #f0f2f5, #8392ab, #c4c9d4) statt über die
   --d-* Variablen eingefärbt. */
[data-theme="dark"] .qa-item {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .qa-item:hover {
  background-color: rgba(255, 255, 255, 0.09) !important;
}
[data-theme="dark"] .qa-label-sub,
[data-theme="dark"] .sub-row-meta,
[data-theme="dark"] .app-item-sub {
  color: var(--d-text-muted) !important;
}
[data-theme="dark"] .qa-chevron {
  color: var(--d-text-secondary) !important;
}
[data-theme="dark"] .panel-card-header,
[data-theme="dark"] .sub-row,
[data-theme="dark"] .app-item {
  border-color: var(--d-border) !important;
}

/* Badges & Status-Pillen: transparente Einfärbung statt Pastell-Flächen */
[data-theme="dark"] .d-badge-orange, [data-theme="dark"] .status-pending { background: rgba(245, 158, 11, 0.18) !important; color: #fbbf24 !important; }
[data-theme="dark"] .d-badge-green, [data-theme="dark"] .status-confirmed, [data-theme="dark"] .status-completed { background: rgba(16, 185, 129, 0.18) !important; color: #34d399 !important; }
[data-theme="dark"] .d-badge-blue, [data-theme="dark"] .status-reviewing, [data-theme="dark"] .status-processing { background: rgba(59, 130, 246, 0.18) !important; color: #60a5fa !important; }
[data-theme="dark"] .d-badge-gray { background: rgba(255, 255, 255, 0.1) !important; color: var(--d-text-secondary) !important; }
[data-theme="dark"] .d-badge-red, [data-theme="dark"] .status-cancelled { background: rgba(239, 68, 68, 0.18) !important; color: #f87171 !important; }
[data-theme="dark"] .d-badge-purple { background: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; }
[data-theme="dark"] .d-badge-yellow, [data-theme="dark"] .status-quoted { background: rgba(224, 231, 255, 0.15) !important; color: #a5b4fc !important; }

/* Alerts */
[data-theme="dark"] .d-alert.success, [data-theme="dark"] .soft-alert.success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
[data-theme="dark"] .d-alert.error, [data-theme="dark"] .soft-alert.error {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Sonstiges (Kontaktkarten, Fokus-Sichtbarkeit, native Formularelemente) */
[data-theme="dark"] .contact-card-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible {
  outline-color: var(--primary-color) !important;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  html, .theme-toggle-edge {
    transition: none !important;
  }
}

/*
=====================================================
    14. GENERISCHE HELLE FLÄCHEN (site-weit per Live-Scan gefunden)
=====================================================
*/

/* Bootstrap-Utility-Klassen, die an vielen Stellen im Quellcode direkt
   im Template verwendet werden (z.B. Tab-Leisten, Sektionen). Da diese
   Utility-Klassen absichtlich "immer weiß" bedeuten, müssen sie im
   Dark Mode pauschal umgefärbt werden. */
[data-theme="dark"] .bg-white {
  background-color: var(--dark-card) !important;
}
[data-theme="dark"] .bg-light {
  background-color: var(--dark-bg) !important;
}

/* Alternierende Sektionshintergründe (section.py-5, Timeline-Bereich der
   Unternehmenshistorie, geometrische Textboxen im Startseiten-Slider) */
[data-theme="dark"] section.py-5,
[data-theme="dark"] .timeline-sticky-container,
[data-theme="dark"] .image-box {
  background-color: var(--dark-bg) !important;
}
[data-theme="dark"] .image-box.contain img {
  background-color: var(--dark-card) !important;
}
[data-theme="dark"] .text-box {
  background-color: var(--dark-card) !important;
}
[data-theme="dark"] .text-box .date {
  color: var(--body-color) !important;
}
[data-theme="dark"] .geom-text-box {
  background: rgba(20, 20, 20, 0.55) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .texture-silver-light,
[data-theme="dark"] .texture-silver,
[data-theme="dark"] .texture-white {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 107, 0, 0.05) 0%, transparent 70%),
    linear-gradient(62deg, #585858 0%, #686868 100%) !important;
}

/*
=====================================================
    15. KONTAKTSEITE (modernisiertes Layout)
=====================================================
*/
[data-theme="dark"] .ud-trust-badge {
  background-color: var(--dark-card) !important;
  border-color: var(--border-color) !important;
  color: var(--heading-color) !important;
}
[data-theme="dark"] .ud-contact-info-wrapper .ud-single-info {
  background-color: var(--dark-card) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .ud-quick-btn.outline {
  background-color: var(--dark-card) !important;
  border-color: var(--border-color) !important;
  color: var(--heading-color) !important;
}
[data-theme="dark"] .ud-quick-btn.outline:hover {
  color: var(--primary-color) !important;
}
[data-theme="dark"] .ud-contact-form-wrapper .ud-form-group input,
[data-theme="dark"] .ud-contact-form-wrapper .ud-form-group textarea {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-color: var(--border-color) !important;
  color: var(--heading-color) !important;
}
[data-theme="dark"] .ud-contact-form-wrapper .ud-form-group input:focus,
[data-theme="dark"] .ud-contact-form-wrapper .ud-form-group textarea:focus {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .maps-choice-content {
  background-color: var(--dark-card) !important;
}
[data-theme="dark"] .maps-choice-close {
  color: var(--body-color) !important;
}
[data-theme="dark"] .scroll-tracker-menu {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/*
=====================================================
    16. SHOP-SEITE: FILTER-SIDEBAR & "KEINE ERGEBNISSE"
=====================================================
*/
[data-theme="dark"] .ud-shop-sidebar,
[data-theme="dark"] .ud-no-results,
[data-theme="dark"] .ud-multiselect-toggle,
[data-theme="dark"] .ud-multiselect-dropdown {
  background-color: var(--dark-card) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .ud-sidebar-section {
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .ud-sidebar-title,
[data-theme="dark"] .ud-multiselect-toggle,
[data-theme="dark"] .ud-no-results h3 {
  color: var(--heading-color) !important;
}
[data-theme="dark"] .ud-no-results p {
  color: var(--body-color) !important;
}
[data-theme="dark"] .ud-category-link {
  color: var(--body-color) !important;
}
[data-theme="dark"] .ud-category-count {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--body-color) !important;
}

/*
=====================================================
    17. KUNDENDASHBOARD: BESTELLUNGEN, LIZENZEN, UNTERNEHMEN
    (direct_orders.html, licenses.html, join_company.html --
    eigene <style>-Blöcke mit fest hell verdrahteten Farben)
=====================================================
*/
[data-theme="dark"] .table-card,
[data-theme="dark"] .stat-chip,
[data-theme="dark"] .btn-refresh {
  background-color: var(--d-surface) !important;
  color: var(--d-heading) !important;
  border-color: var(--d-border) !important;
}
[data-theme="dark"] .table-card-header,
[data-theme="dark"] .order-table th,
[data-theme="dark"] .lic-table th,
[data-theme="dark"] .filter-bar {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border-color: var(--d-border) !important;
  color: var(--d-text-secondary) !important;
}
[data-theme="dark"] .table-card-header h2,
[data-theme="dark"] .stat-chip .chip-value {
  color: var(--d-heading) !important;
}
[data-theme="dark"] .stat-chip .chip-label {
  color: var(--d-text-secondary) !important;
}
[data-theme="dark"] .order-table td,
[data-theme="dark"] .lic-table td {
  border-color: var(--d-border) !important;
}
[data-theme="dark"] .order-table tr:hover td,
[data-theme="dark"] .lic-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .filter-bar select,
[data-theme="dark"] .filter-bar input[type="number"] {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-color: var(--d-border) !important;
  color: var(--d-heading) !important;
}
[data-theme="dark"] .filter-bar .btn-clear {
  color: var(--d-text-secondary) !important;
  border-color: var(--d-border) !important;
}
[data-theme="dark"] .btn-refresh:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Unternehmen beitreten: Info-Box ist per Inline-Style (style="...") hell
   verdrahtet -- benötigt !important, um Inline-Styles zu überschreiben. */
[data-theme="dark"] .invite-info-box {
  background-color: rgba(59, 130, 246, 0.14) !important;
  border-left-color: #3b82f6 !important;
}
[data-theme="dark"] .invite-info-box h4,
[data-theme="dark"] .invite-info-box li {
  color: #93c5fd !important;
}

[data-theme="dark"] .sticky-container{
  background-color: var(--body-color)s !important;
}

/* ==========================================================================
   MEGA-MENÜ v2 (Dark Mode)
   ========================================================================== */
[data-theme="dark"] .ud-header .mega2 {
  background-color: var(--dark-card) !important;
}
[data-theme="dark"] .mega2-nav {
  background: rgba(255, 255, 255, 0.03);
  border-right-color: var(--border-color);
}
[data-theme="dark"] .mega2-cat-label {
  color: var(--heading-color);
}
[data-theme="dark"] .mega2-cat:hover,
[data-theme="dark"] .mega2-cat.active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .mega2-sub {
  border-right-color: var(--border-color);
}
[data-theme="dark"] .mega2-link {
  color: var(--heading-color);
}
[data-theme="dark"] .mega2-link:hover {
  color: #ffffff;
}
[data-theme="dark"] .mega2-feature-body {
  background: #0f1117;
}