/*
 * Native dark theme for the NET.THINKS site — FIRST PASS.
 *
 * Toggled by the nt-ai accessibility widget via html[data-nt-theme="dark"]
 * (replaces the earlier CSS-invert dark mode). Site-specific: the brand orange
 * (#ff4e00) is kept as the accent; primary surfaces are darkened and text is
 * lightened. Sections that carry their own background image (hero/slider) are
 * left untouched.
 *
 * This covers the main structural surfaces. Individual sections/components with
 * bespoke light backgrounds may still need per-case tuning — adjust here.
 */
html[data-nt-theme="dark"] {
    --nt-bg: #14161b;
    --nt-surface: #1d2027;
    --nt-elev: #252932;
    --nt-text: #e7e8ec;
    --nt-muted: #aab0ba;
    --nt-border: #333a45;
    --nt-link: #6fa8ff;
    --nt-link-hover: #9cc4ff;
    color-scheme: dark;
    background: var(--nt-bg);
}

html[data-nt-theme="dark"] body {
    background: var(--nt-bg) !important;
    color: var(--nt-text);
}

/* ── Surfaces: common light containers → dark ─────────────────────────── */
html[data-nt-theme="dark"] .bg-white,
html[data-nt-theme="dark"] .bg-light,
html[data-nt-theme="dark"] .bg-body,
/* Site-specific light surfaces (theme uses #f7f7f7). The .services SECTION is
   darkened too; only the cards (.services .item, white with dark text) keep their
   own look — excluded in the text/heading rules below. */
html[data-nt-theme="dark"] .bg-color,
html[data-nt-theme="dark"] .clients,
html[data-nt-theme="dark"] .team .info,
html[data-nt-theme="dark"] .sidebar .sidebar-widget .widget-inner,
html[data-nt-theme="dark"] .accordion-box .block.active-block,
html[data-nt-theme="dark"] .accordion-box .block .acc-btn.active,
html[data-nt-theme="dark"] main,
html[data-nt-theme="dark"] .card,
html[data-nt-theme="dark"] .list-group-item,
html[data-nt-theme="dark"] .dropdown-menu,
html[data-nt-theme="dark"] .modal-content,
html[data-nt-theme="dark"] .offcanvas,
html[data-nt-theme="dark"] .accordion-item,
html[data-nt-theme="dark"] .accordion-button,
html[data-nt-theme="dark"] .navbar.bg-white,
html[data-nt-theme="dark"] .navbar.bg-light,
html[data-nt-theme="dark"] .navbar-light {
    background-color: var(--nt-surface) !important;
    color: var(--nt-text);
}
/* A plain section with no background image inherits the dark canvas. */
html[data-nt-theme="dark"] section:not([style*="background-image"]):not([class*="bg-"]) {
    background-color: transparent;
}

/* ── Text ─────────────────────────────────────────────────────────────── */
/* Force dark/black text to light. !important + inline-element coverage so it also
   wins over deep theme rules and inline style="color:#..." on the text. The
   hero/header (image slider), the footer and the widget keep their own colours;
   buttons/badges are excluded so their labels stay intact. */
html[data-nt-theme="dark"] :is(p, li, dd, dt, blockquote, figcaption, td, th, label, span, strong, em, b, i, small, h1, h2, h3, h4, h5, h6):not(header *):not(.header *):not(.banner-header *):not(.main-footer *):not(.services .item *):not(.promo *):not(.nt-a11y-widget *):not(.btn):not([class*="btn"]):not(.badge):not([class*="badge"]) {
    color: var(--nt-text) !important;
}
html[data-nt-theme="dark"] :is(.text-muted, .text-secondary, small, .form-text):not(header *):not(.header *):not(.banner-header *):not(.main-footer *):not(.nt-a11y-widget *) {
    color: var(--nt-muted) !important;
}
/* Text utilities that force dark colours on a now-dark surface. */
html[data-nt-theme="dark"] :is(.text-dark, .text-black, .text-body):not(header *):not(.header *):not(.banner-header *):not(.nt-a11y-widget *) {
    color: var(--nt-text) !important;
}
/* Headings in the content: simple #maincontent-scoped rule (no fragile :not()
   chains — #maincontent already excludes hero/nav/footer). Crucially sets
   -webkit-text-fill-color/-stroke-color too: the theme's .section-title uses an
   outlined-text effect (transparent fill / text-stroke) that plain `color`
   cannot override, which is why the headings stayed dark. */
html[data-nt-theme="dark"] #maincontent :is(h1, h2, h3, h4, h5, h6, .section-title, .section-title span):not(.services .item *):not(.promo *) {
    color: var(--nt-text) !important;
    -webkit-text-fill-color: var(--nt-text) !important;
    -webkit-text-stroke-color: var(--nt-text) !important;
}

/* ── Links ────────────────────────────────────────────────────────────── */
/* Footer links (.main-footer, already a dark section) keep their own colour;
   the hero and the widget are excluded too. */
html[data-nt-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.main-footer *):not(header *):not(.header *):not(.banner-header *):not(.nt-a11y-widget *) {
    color: var(--nt-link);
}
html[data-nt-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.main-footer *):not(header *):not(.header *):not(.banner-header *):not(.nt-a11y-widget *):hover {
    color: var(--nt-link-hover);
}
html[data-nt-theme="dark"] .nav-link:not(header *):not(.header *):not(.banner-header *) { color: var(--nt-text); }
/* Untermenü-Einträge (Leistungen-Dropdown): hell statt Link-Blau; der Hover
   behält die orange Markenfarbe des Themes. */
html[data-nt-theme="dark"] .dropdown-menu .dropdown-item { color: var(--nt-text); }

/* ── Borders / dividers ───────────────────────────────────────────────── */
html[data-nt-theme="dark"] hr,
html[data-nt-theme="dark"] .border,
html[data-nt-theme="dark"] .border-top,
html[data-nt-theme="dark"] .border-bottom,
html[data-nt-theme="dark"] .card,
html[data-nt-theme="dark"] .list-group-item,
html[data-nt-theme="dark"] .dropdown-menu,
html[data-nt-theme="dark"] .table,
html[data-nt-theme="dark"] .table td,
html[data-nt-theme="dark"] .table th {
    border-color: var(--nt-border) !important;
}

/* ── Form controls ────────────────────────────────────────────────────── */
html[data-nt-theme="dark"] .form-control,
html[data-nt-theme="dark"] .form-select,
html[data-nt-theme="dark"] input:not([type="submit"]):not([type="button"]),
html[data-nt-theme="dark"] textarea,
html[data-nt-theme="dark"] select {
    background-color: var(--nt-elev);
    color: var(--nt-text);
    border-color: var(--nt-border);
}
html[data-nt-theme="dark"] .form-control::placeholder,
html[data-nt-theme="dark"] textarea::placeholder { color: #8b909a; }

/* ── Kontaktformular (.form-container) ────────────────────────────────────
   Das Theme definiert die --nt-form-*-Variablen lokal AUF .form-container
   (nicht auf :root), daher hier ebenfalls auf .form-container überschreiben —
   sonst bleiben Labels (#203040) und Rahmen im Dark-Mode dunkel. Zusätzlich
   sind Karten-Hintergrund (weißer Verlauf) und die Einwilligungs-Box (#fff)
   fest verdrahtet und werden explizit abgedunkelt. */
html[data-nt-theme="dark"] .form-container {
    --nt-form-bg: #1d2027;
    --nt-form-border: #3a3b42;
    --nt-form-text: #e7e8ec;
    --nt-form-focus: #6fa8ff;
    background: var(--nt-surface) !important;
    border-color: var(--nt-border) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
}
html[data-nt-theme="dark"] .form-container :is(.form-control, .form-select, textarea, select, input:not([type="submit"]):not([type="button"])),
html[data-nt-theme="dark"] .form-container :is(.form-control, .form-select, textarea, select):focus {
    background-color: var(--nt-elev) !important;
    color: var(--nt-text) !important;
    border-color: var(--nt-border) !important;
}
html[data-nt-theme="dark"] .form-container .form-check {
    background: var(--nt-elev) !important;
    border-color: var(--nt-border) !important;
}
html[data-nt-theme="dark"] .form-container :is(.form-label, .form-check-label) {
    color: var(--nt-text) !important;
}

/* ── Buttons: keep the brand orange; darken neutral/light variants ──────── */
html[data-nt-theme="dark"] .btn-light,
html[data-nt-theme="dark"] .btn-white,
html[data-nt-theme="dark"] .btn-outline-dark,
html[data-nt-theme="dark"] .btn-secondary {
    background-color: var(--nt-elev);
    color: var(--nt-text);
    border-color: var(--nt-border);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
html[data-nt-theme="dark"] .table { color: var(--nt-text); }
html[data-nt-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--nt-text);
}

/* Slightly dim content images so they don't glare on the dark canvas. The hero
   slider and the widget are excluded. */
html[data-nt-theme="dark"] img:not(.nt-a11y-widget img):not(header *):not(.header *):not(.banner-header *) { filter: brightness(0.92); }

/* ── Site-specific components in dark mode ────────────────────────────── */

/* Sticky header (.nav-scroll) is white by default → make it dark. The logo swap
   is handled in custom.js (light logo kept in dark mode); here only the bar
   background and the nav links change. */
html[data-nt-theme="dark"] .nav-scroll {
    background: var(--nt-surface) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}
html[data-nt-theme="dark"] .nav-scroll .navbar-nav .nav-link,
html[data-nt-theme="dark"] .nav-scroll .navbar-nav .active > .nav-link {
    color: var(--nt-text) !important;
}

/* FAQ: the answer panel (.active-block) is #f7f7f7 → dark surface (handled in the
   surfaces block); the orange question button (.acc-btn) keeps its colour. Make
   sure the answer text is light. */
html[data-nt-theme="dark"] .accordion-box .block.active-block,
html[data-nt-theme="dark"] .accordion-box .block .acc-content,
html[data-nt-theme="dark"] .accordion-box .block .content {
    background-color: var(--nt-surface) !important;
}
/* Die eigentliche Antwortfläche ist .content (background:#f7f7f7; color:#888),
   NICHT das transparente .acc-content. */
html[data-nt-theme="dark"] .accordion-box .block .acc-content,
html[data-nt-theme="dark"] .accordion-box .block .acc-content *,
html[data-nt-theme="dark"] .accordion-box .block .content,
html[data-nt-theme="dark"] .accordion-box .block .content * {
    color: var(--nt-text) !important;
}

/* Featured Boxes (ContentBlock): die Karten sind im Theme fest background:#FFF
   und stehen nicht in der Surfaces-Liste → im Dark-Mode weiß & unleserlich.
   Karte abdunkeln, Text aufhellen; der orange Icon-Kreis (.icon-featured /
   .featured-box-primary) bleibt als Markenakzent unverändert. */
html[data-nt-theme="dark"] .featured-box,
html[data-nt-theme="dark"] .featured-box .box-content,
html[data-nt-theme="dark"] .featured-boxes-flat .featured-box .box-content {
    background: var(--nt-surface) !important;
    border-color: var(--nt-border) !important;
}
html[data-nt-theme="dark"] .featured-box :is(h1, h2, h3, h4, h5, h6, p, span, li, a):not(.icon-featured):not(.icon-featured *) {
    color: var(--nt-text) !important;
    -webkit-text-fill-color: var(--nt-text) !important;
}

/* Pricing-Tabelle (ContentBlock „Offer"): der Karten-Body ist .price .item
   (background:#fff), Überschriften/Features sind fest dunkel (#1b1b1b/#888).
   Karte abdunkeln, Texte aufhellen; der Preis (.value p) bleibt orange, ebenso
   der orange Rahmen des „Anfragen"-Buttons — nur dessen Label wird hell. */
html[data-nt-theme="dark"] .price .item {
    background: var(--nt-surface) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}
html[data-nt-theme="dark"] .price .item .type:after {
    background: var(--nt-surface) !important;
    border-color: var(--nt-border) !important;
}
html[data-nt-theme="dark"] .price .item :is(.type h5, .value .title, .feat li) {
    color: var(--nt-text) !important;
}
html[data-nt-theme="dark"] .price .item .btn-curve {
    color: var(--nt-text) !important;
}

/* „Clients"-Sektion (Logo-Leiste): fest #f7f7f7 → dunkel. */
html[data-nt-theme="dark"] .clients {
    background: var(--nt-surface) !important;
}

/* Service section & Promo box keep their original design (orange / light) — they
   are excluded from the surface and text rules above, so nothing to add here.
   This comment documents the intent. */

/* Seiten-Preloader / Überblend-Effekt: im Dark-Mode dunkel statt weiß, damit
   der Seitenwechsel nicht kurz weiß aufblitzt. Das Attribut wird zusätzlich früh
   (vor dem ersten Paint) per Inline-Script im Set gesetzt, siehe nt-ai. */
html[data-nt-theme="dark"] #preloader,
html[data-nt-theme="dark"] .preloader-bg,
html[data-nt-theme="dark"] .preloader {
    background-color: var(--nt-bg) !important;
}