/* ============================================================
   BRAND-OVERRIDE-V2 (?v=13) — stephanlange.info-Branding fuers digideals24-System.
   Dark-Mode: pures Charcoal #0a0a0a + warmes Gold #c9a84c als Akzent
   (statt Bootstrap-Default-Blau / Slate-Navy).

   Wichtig zur Specifity:
   Auf der Deal-Seite stehen >500 Zeilen Inline-<style>-Slate-Navy AFTER
   diesem Stylesheet. Damit unsere Regeln gewinnen, qualifizieren wir kritische
   Selektoren mit "html.theme-dark body" (Specifity 0,2,1 statt 0,1,1).
   Das beat alle inline Slate/Navy-Regeln mit gleicher Klassen-Specifity.
============================================================ */

html.theme-dark {
    --sl-bg: #0a0a0a;
    --sl-bg-card: #141414;
    --sl-bg-elev: rgba(255, 255, 255, 0.04);
    --sl-fg: #f5f5f0;
    --sl-fg-muted: rgba(245, 245, 240, 0.62);
    --sl-gold: #c9a84c;
    --sl-gold-light: #e5c666;
    --sl-gold-dark: #a8862e;
    --sl-border: rgba(201, 168, 76, 0.20);
    --sl-border-strong: rgba(201, 168, 76, 0.40);
}

/* === Body / Basis === */
html.theme-dark body {
    background-color: var(--sl-bg) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark a { color: var(--sl-gold-light) !important; }
html.theme-dark a:hover { color: var(--sl-gold) !important; }
html.theme-dark hr { border-color: var(--sl-border) !important; }

/* Globale Selektion: KEIN schwarzes Auswahl-Rechteck mehr,
   stattdessen dezent gold getoenter Glow. */
html.theme-dark ::selection {
    background: rgba(201, 168, 76, 0.30) !important;
    color: var(--sl-fg) !important;
    text-shadow: none !important;
}
html.theme-dark ::-moz-selection {
    background: rgba(201, 168, 76, 0.30) !important;
    color: var(--sl-fg) !important;
}

/* === Karten / Sektionen / Modals === */
html.theme-dark body .countdown-container,
html.theme-dark body .bonus-section,
html.theme-dark body .bonus-card,
html.theme-dark body .bonus-card .card-header,
html.theme-dark body .bonus-card .card-footer,
html.theme-dark body .card,
html.theme-dark body .card-header,
html.theme-dark body .card-body,
html.theme-dark body .card-footer,
html.theme-dark body .modal-content,
html.theme-dark body .availability-indicator,
html.theme-dark body .panel,
html.theme-dark body .panel-body,
html.theme-dark body .content-wrapper,
html.theme-dark body .table-container,
html.theme-dark body .accordion-item,
html.theme-dark body .accordion-button,
html.theme-dark body .offcanvas,
html.theme-dark body .popover,
html.theme-dark body .toast,
html.theme-dark body .step-item,
html.theme-dark body .contact-info,
html.theme-dark body .deal-info,
html.theme-dark body .bonus-info,
html.theme-dark body .how-it-works-section {
    background-color: var(--sl-bg-card) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .modal-header { background-color: var(--sl-bg-card) !important; border-color: var(--sl-border) !important; }
html.theme-dark body .modal-footer { background-color: rgba(0, 0, 0, 0.35) !important; border-color: var(--sl-border) !important; }
html.theme-dark body .bonus-card .card-footer { background-color: rgba(0, 0, 0, 0.35) !important; }

/* === Webinar-Box (Innenflaechen) – muss Slate-Navy aus inline-CSS schlagen === */
html.theme-dark body .webinar-card,
html.theme-dark body .webinar-card .card-body {
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-fg) !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .webinar-card .card-header {
    background: linear-gradient(90deg, var(--sl-gold-dark) 0%, var(--sl-gold) 100%) !important;
    color: #0a0a0a !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .webinar-card .card-header i { color: #0a0a0a !important; }
html.theme-dark body .webinar-meta .meta-label { color: var(--sl-fg-muted) !important; }
html.theme-dark body .webinar-meta .meta-value { color: var(--sl-fg) !important; }
html.theme-dark body .webinar-pre-box {
    background-color: var(--sl-bg-card) !important;
    background: var(--sl-bg-card) !important;
    color: var(--sl-fg) !important;
    border: 1px solid var(--sl-border) !important;
}
html.theme-dark body .webinar-question { color: var(--sl-fg) !important; }
html.theme-dark body .webinar-countdown-row,
html.theme-dark body .countdown-row {
    background-color: var(--sl-bg-card) !important;
    background: var(--sl-bg-card) !important;
    border: 1px solid var(--sl-border) !important;
}
html.theme-dark body .webinar-countdown-row .countdown-label { color: var(--sl-fg) !important; }
html.theme-dark body .webinar-countdown-row .countdown-label i { color: var(--sl-gold) !important; }
html.theme-dark body .webinar-countdown { color: var(--sl-gold) !important; }

/* === Short/Deal-Description === */
html.theme-dark body .short-description,
html.theme-dark body .deal-description {
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-fg) !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .deal-title {
    color: var(--sl-fg) !important;
    border-bottom-color: var(--sl-border) !important;
}
html.theme-dark body .time-number {
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-gold) !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .step-number {
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-gold) !important;
    border-color: var(--sl-border-strong) !important;
}

/* === Affiliate-Disclaimer === */
html.theme-dark body .affiliate-disclaimer-content {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-fg) !important;
}

/* === Navbar / Footer === */
html.theme-dark body .navbar,
html.theme-dark header,
html.theme-dark body footer,
html.theme-dark body .footer {
    background-color: var(--sl-bg-card) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .navbar .nav-link,
html.theme-dark body .navbar-brand,
html.theme-dark body .text-body,
html.theme-dark body .text-dark { color: var(--sl-fg) !important; }
html.theme-dark body .text-muted,
html.theme-dark body .text-secondary { color: var(--sl-fg-muted) !important; }
html.theme-dark body .border,
html.theme-dark body .border-top,
html.theme-dark body .border-bottom,
html.theme-dark body .border-start,
html.theme-dark body .border-end { border-color: var(--sl-border) !important; }
html.theme-dark body .navbar-toggler { border-color: var(--sl-border) !important; }
html.theme-dark body .bg-light { background-color: var(--sl-bg-card) !important; color: var(--sl-fg) !important; }
html.theme-dark body .bg-white { background-color: var(--sl-bg-card) !important; color: var(--sl-fg) !important; }
html.theme-dark body .bg-dark { background-color: var(--sl-bg) !important; }

/* === Sticky-Action-Bar === */
html.theme-dark body .sticky-action-bar {
    background-color: rgba(10, 10, 10, 0.94) !important;
    border-top: 1px solid var(--sl-border) !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.45) !important;
}

/* ============================================================
   BUTTONS – sauber, eindeutig, KEIN schwarzes Rechteck hinter Text
   - Gold-Gradient #c9a84c -> #e5c666
   - Dunkler Text #1a1a1a (auf Gold besser lesbar als weiss)
   - Border 1px gold, rounded 12px, subtiler Schatten
   - Hover: leicht heller + scale(1.02)
   - KEIN text-shadow, KEIN -webkit-text-fill-color, KEIN background-clip
   - ::selection in Buttons transparent (verhindert "schwarze Box pro Wort"
     beim versehentlichen Selektieren / mobilen Long-Press)
   - :focus-visible -> goldener Ring (kein schwarzer Outline)
============================================================ */

html.theme-dark body .btn-primary,
html.theme-dark body .btn-success,
html.theme-dark body .buy-button,
html.theme-dark body .btn-deal,
html.theme-dark body .sticky-action-btn,
html.theme-dark body .sl-author-cta,
html.theme-dark body a.btn-primary,
html.theme-dark body a.btn-success {
    background: linear-gradient(135deg, var(--sl-gold) 0%, var(--sl-gold-light) 100%) !important;
    background-color: var(--sl-gold) !important;
    border: 1px solid var(--sl-gold) !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    text-shadow: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(201, 168, 76, 0.28) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
    animation: none !important;
}
html.theme-dark body .btn-primary:hover,
html.theme-dark body .btn-success:hover,
html.theme-dark body .buy-button:hover,
html.theme-dark body .btn-deal:hover,
html.theme-dark body .sticky-action-btn:hover,
html.theme-dark body .sl-author-cta:hover {
    filter: brightness(1.08) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.42) !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
}
html.theme-dark body .btn-primary:focus-visible,
html.theme-dark body .btn-success:focus-visible,
html.theme-dark body .buy-button:focus-visible,
html.theme-dark body .btn-deal:focus-visible,
html.theme-dark body .sticky-action-btn:focus-visible,
html.theme-dark body .sl-author-cta:focus-visible {
    outline: 2px solid var(--sl-gold-light) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.30) !important;
}
html.theme-dark body .btn-primary:focus,
html.theme-dark body .btn-success:focus,
html.theme-dark body .buy-button:focus,
html.theme-dark body .btn-deal:focus,
html.theme-dark body .sticky-action-btn:focus,
html.theme-dark body .sl-author-cta:focus { outline: none !important; }

/* Button-interne Children (icon, span, deal-cta-text):
   transparent halten, kein eigener BG, keine Selektions-Box. */
html.theme-dark body .btn-primary *,
html.theme-dark body .btn-success *,
html.theme-dark body .buy-button *,
html.theme-dark body .btn-deal *,
html.theme-dark body .sticky-action-btn *,
html.theme-dark body .sl-author-cta * {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
html.theme-dark body .btn-primary ::selection,
html.theme-dark body .btn-success ::selection,
html.theme-dark body .buy-button ::selection,
html.theme-dark body .btn-deal ::selection,
html.theme-dark body .sticky-action-btn ::selection,
html.theme-dark body .sl-author-cta ::selection {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #1a1a1a !important;
    text-shadow: none !important;
}

html.theme-dark body .btn-info {
    background-color: var(--sl-gold) !important;
    border-color: var(--sl-gold) !important;
    color: #0a0a0a !important;
}
html.theme-dark body .btn-outline-primary,
html.theme-dark body .btn-outline-success,
html.theme-dark body .btn-outline-info {
    background-color: transparent !important;
    border: 1px solid var(--sl-gold) !important;
    color: var(--sl-gold-light) !important;
}
html.theme-dark body .btn-outline-primary:hover,
html.theme-dark body .btn-outline-success:hover,
html.theme-dark body .btn-outline-info:hover {
    background-color: var(--sl-gold) !important;
    color: #0a0a0a !important;
}
html.theme-dark body .btn-outline-secondary,
html.theme-dark body .btn-outline-light {
    background-color: transparent !important;
    color: var(--sl-fg) !important;
    border-color: var(--sl-border-strong) !important;
}
html.theme-dark body .btn-outline-secondary:hover,
html.theme-dark body .btn-outline-light:hover {
    background-color: rgba(201, 168, 76, 0.10) !important;
    border-color: var(--sl-gold) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .btn-secondary {
    background-color: var(--sl-bg-elev) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .btn-light {
    background-color: var(--sl-bg-card) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-fg) !important;
}

/* === Bootstrap-Utility-Klassen (bg-/text-) === */
html.theme-dark body .bg-primary { background-color: var(--sl-gold) !important; color: #0a0a0a !important; }
html.theme-dark body .bg-info { background-color: var(--sl-gold) !important; color: #0a0a0a !important; }
html.theme-dark body .bg-success { background-color: var(--sl-gold) !important; color: #0a0a0a !important; }
html.theme-dark body .text-primary { color: var(--sl-gold) !important; }
html.theme-dark body .text-info { color: var(--sl-gold-light) !important; }
html.theme-dark body .text-success { color: var(--sl-gold-light) !important; }
html.theme-dark body .text-white { color: var(--sl-fg) !important; }

/* === Akzent-Texte / Preise / Countdowns === */
html.theme-dark body .price { color: var(--sl-gold) !important; }
html.theme-dark body .countdown-value { color: var(--sl-gold) !important; }

/* === Badges === */
html.theme-dark body .badge.bg-primary,
html.theme-dark body .badge.bg-info,
html.theme-dark body .badge.bg-success,
html.theme-dark body .badge-primary,
html.theme-dark body .badge-info,
html.theme-dark body .badge-success {
    background-color: var(--sl-gold) !important;
    color: #0a0a0a !important;
}
html.theme-dark body .badge.bg-secondary,
html.theme-dark body .badge-secondary {
    background-color: var(--sl-bg-elev) !important;
    color: var(--sl-fg) !important;
    border: 1px solid var(--sl-border) !important;
}

/* === Alerts === */
html.theme-dark body .alert-primary,
html.theme-dark body .alert-info {
    background-color: rgba(201, 168, 76, 0.10) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .alert-success {
    background-color: rgba(201, 168, 76, 0.10) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-gold-light) !important;
}
html.theme-dark body .alert-warning {
    background-color: rgba(229, 198, 102, 0.10) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-gold-light) !important;
}
html.theme-dark body .alert-danger {
    background-color: rgba(220, 53, 69, 0.12) !important;
    border-color: rgba(220, 53, 69, 0.30) !important;
    color: #f5b7be !important;
}
html.theme-dark body .alert-light {
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-fg) !important;
}

/* === Forms === */
html.theme-dark body .form-control,
html.theme-dark body .form-select,
html.theme-dark body textarea,
html.theme-dark body input[type="text"],
html.theme-dark body input[type="email"],
html.theme-dark body input[type="password"],
html.theme-dark body input[type="number"],
html.theme-dark body input[type="search"],
html.theme-dark body input[type="url"],
html.theme-dark body input[type="tel"],
html.theme-dark body input[type="date"],
html.theme-dark body select {
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-fg) !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .form-control:focus,
html.theme-dark body .form-select:focus,
html.theme-dark body textarea:focus,
html.theme-dark body input:focus,
html.theme-dark body select:focus {
    border-color: var(--sl-gold) !important;
    box-shadow: 0 0 0 0.2rem rgba(201, 168, 76, 0.20) !important;
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .form-control::placeholder,
html.theme-dark body textarea::placeholder,
html.theme-dark body input::placeholder { color: var(--sl-fg-muted) !important; }
html.theme-dark body .form-label,
html.theme-dark body label { color: var(--sl-fg) !important; }
html.theme-dark body .input-group-text {
    background-color: var(--sl-bg-elev) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .form-check-input:checked {
    background-color: var(--sl-gold) !important;
    border-color: var(--sl-gold) !important;
}

/* === Tabellen === */
html.theme-dark body .table {
    color: var(--sl-fg) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--sl-fg);
    --bs-table-border-color: var(--sl-border);
}
html.theme-dark body .table th,
html.theme-dark body .table td { border-color: var(--sl-border) !important; }
html.theme-dark body .table-light,
html.theme-dark body .table > thead {
    --bs-table-bg: var(--sl-bg-card);
    --bs-table-color: var(--sl-fg);
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .table-hover > tbody > tr:hover > * {
    background-color: rgba(201, 168, 76, 0.08) !important;
    color: var(--sl-fg) !important;
}

/* === List-Group / Dropdown === */
html.theme-dark body .list-group-item {
    background-color: var(--sl-bg-card) !important;
    color: var(--sl-fg) !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .list-group-item.active {
    background-color: var(--sl-gold) !important;
    color: #0a0a0a !important;
    border-color: var(--sl-gold) !important;
}
html.theme-dark body .dropdown-menu {
    background-color: var(--sl-bg-card) !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .dropdown-item { color: var(--sl-fg) !important; }
html.theme-dark body .dropdown-item:hover,
html.theme-dark body .dropdown-item:focus {
    background-color: rgba(201, 168, 76, 0.10) !important;
    color: var(--sl-gold-light) !important;
}
html.theme-dark body .dropdown-divider { border-top-color: var(--sl-border) !important; }

/* === Nav-Pills / Tabs === */
html.theme-dark body .nav-pills .nav-link.active,
html.theme-dark body .nav-pills .show > .nav-link {
    background-color: var(--sl-gold) !important;
    color: #0a0a0a !important;
}
html.theme-dark body .nav-pills .nav-link { color: var(--sl-fg) !important; }
html.theme-dark body .nav-tabs { border-bottom-color: var(--sl-border) !important; }
html.theme-dark body .nav-tabs .nav-link {
    color: var(--sl-fg) !important;
    border-color: transparent !important;
}
html.theme-dark body .nav-tabs .nav-link.active {
    background-color: var(--sl-bg-card) !important;
    border-color: var(--sl-border) var(--sl-border) var(--sl-bg-card) !important;
    color: var(--sl-gold) !important;
}

/* === Progress / Pagination / Breadcrumb === */
html.theme-dark body .progress { background-color: var(--sl-bg-elev) !important; }
html.theme-dark body .progress-bar { background-color: var(--sl-gold) !important; }
html.theme-dark body .pagination .page-link {
    background-color: var(--sl-bg-card) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-fg) !important;
}
html.theme-dark body .pagination .page-item.active .page-link {
    background-color: var(--sl-gold) !important;
    border-color: var(--sl-gold) !important;
    color: #0a0a0a !important;
}
html.theme-dark body .breadcrumb { background-color: transparent !important; }
html.theme-dark body .breadcrumb-item.active { color: var(--sl-fg-muted) !important; }
html.theme-dark body .breadcrumb-item a { color: var(--sl-gold-light) !important; }
html.theme-dark body .breadcrumb-item + .breadcrumb-item::before { color: var(--sl-fg-muted) !important; }

/* === Slate/Navy/Bootstrap-Blue Inline-Hex-Overrides (Notnagel) === */
html.theme-dark body [style*="#0f172a"]:not(.btn):not(.sticky-action-btn):not(.sl-author-cta),
html.theme-dark body [style*="#0b1220"]:not(.btn):not(.sticky-action-btn):not(.sl-author-cta),
html.theme-dark body [style*="#1e293b"]:not(.btn):not(.sticky-action-btn):not(.sl-author-cta),
html.theme-dark body [style*="#007bff"]:not(.btn-primary):not(.sticky-action-btn) {
    background-color: var(--sl-bg-card) !important;
}

/* Inline background-color: #007bff auf .sticky-action-btn (Startseite-Btn)
   muss Gold gewinnen – Gradient + Gold-BG via brand-override beat dort. */
html.theme-dark body a.sticky-action-btn[style*="#007bff"] {
    background: linear-gradient(135deg, var(--sl-gold) 0%, var(--sl-gold-light) 100%) !important;
    background-color: var(--sl-gold) !important;
}

/* === Verfuegbarkeits-Indicator === */
html.theme-dark body .availability-indicator {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--sl-fg) !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .availability-indicator::before { box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.22) !important; }

/* === Code / Pre === */
html.theme-dark body code,
html.theme-dark body pre {
    background-color: var(--sl-bg-elev) !important;
    color: var(--sl-fg) !important;
    border-color: var(--sl-border) !important;
}

/* === Close-Button (Modals) === */
html.theme-dark body .btn-close { filter: invert(1) brightness(1.5); }

/* === Redirect-Anim-Overlay === */
html.theme-dark body .redirect-anim-card {
    background: var(--sl-bg-card) !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .redirect-anim-title { color: var(--sl-fg) !important; }
html.theme-dark body .redirect-anim-text { color: var(--sl-fg-muted) !important; }
html.theme-dark body .redirect-anim-icon {
    background: rgba(201, 168, 76, 0.10) !important;
    border-color: var(--sl-border-strong) !important;
    color: var(--sl-gold-light) !important;
}
html.theme-dark body .redirect-queue-number {
    color: var(--sl-gold) !important;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
}
html.theme-dark body .redirect-manual a { color: var(--sl-gold-light) !important; }

/* === Bonus-Bilder Container === */
html.theme-dark body .bonus-image-container,
html.theme-dark body .bonus-image {
    background: transparent !important;
    border-color: var(--sl-border) !important;
}
html.theme-dark body .bonus-image-placeholder {
    background-color: rgba(201, 168, 76, 0.06) !important;
}
html.theme-dark body .bonus-image-placeholder i {
    color: var(--sl-gold-light) !important;
    opacity: 0.55;
}
html.theme-dark body .deal-image-wrapper,
html.theme-dark body .deal-image {
    background-color: transparent !important;
    border-color: var(--sl-border) !important;
}