/*
 * Dunkles Design – greift nur bei <html data-theme="dark"> (gesetzt im Head: gespeicherte Wahl, sonst Systemeinstellung).
 * Wird als letzte Datei geladen; das helle Design bleibt dadurch unverändert.
 * Kontraste: Text ≥ 4,5:1 auf den Flächen unten. Logo: img/speedbone-logo-dark.svg (Schriftzug, „bone“ #9ca5aa).
 */
html[data-theme="dark"],
html[data-theme="dark"] .sb-header,
html[data-theme="dark"] .sb-contact {
    color-scheme: dark;
    --sb-bg: #111518;          /* Seite */
    --sb-surface: #1a2024;     /* Karten, Kopfleiste, Formular */
    --sb-surface-2: #161b1e;   /* getönte Abschnitte */
    --sb-surface-3: #232a2f;   /* Felder, Hover, Hervorhebungen */
    --sb-border: rgba(255, 255, 255, 0.08);
    --sb-text: #c3cacd;        /* Fließtext (hell: #454b4f) */
    --sb-ink: #e8ecee;         /* Überschriften */
    --sb-muted: #9aa3a8;
    --sb-brand-dark: #8fd0ca;  /* Türkis als Text auf dunklem Grund */
    --sb-brand-soft: rgba(131, 192, 188, 0.13);
    --sb-line: rgba(255, 255, 255, 0.14);
    --sb-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* header.css und contact.css setzen ihre Farbvariablen auf eigenen Elementen – oben mit überschrieben */

/* Grundflächen und Text */
html[data-theme="dark"] body { background-color: var(--sb-bg); color: var(--sb-text); }

html[data-theme="dark"] .sb-section--tint,
html[data-theme="dark"] .sb-contact { background: var(--sb-surface-2); }
html[data-theme="dark"] .sb-prose,
html[data-theme="dark"] .sb-price__list,
html[data-theme="dark"] .sb-accordion li,
html[data-theme="dark"] .sb-legal,
html[data-theme="dark"] .sb-ptable td,
html[data-theme="dark"] .sb-included li { color: var(--sb-text); }
html[data-theme="dark"] .sb-legal a,
html[data-theme="dark"] .sb-prose a { color: var(--sb-brand-dark); }

/* Kopfleiste (Logo: eigene Dark-Version, Umschaltung in header.css) */
html[data-theme="dark"] .sb-header { background: rgba(17, 21, 24, 0.92); border-bottom-color: var(--sb-border); }
html[data-theme="dark"] .sb-header.is-scrolled { background: rgba(17, 21, 24, 0.97); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .sb-menu__link { color: var(--sb-ink); }
html[data-theme="dark"] .sb-menu__link.is-active,
html[data-theme="dark"] .sb-sub a.is-active { color: var(--sb-brand-dark); }
html[data-theme="dark"] .sb-menu__link:hover { background: var(--sb-surface-3); }
html[data-theme="dark"] .sb-sub { background: var(--sb-surface); border-color: var(--sb-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .sb-sub a { color: var(--sb-text); }
html[data-theme="dark"] .sb-sub a:hover { background: var(--sb-surface-3); color: var(--sb-ink); }
html[data-theme="dark"] .sb-lang { background: var(--sb-surface-3); }
html[data-theme="dark"] .sb-lang a { color: var(--sb-muted); }
html[data-theme="dark"] .sb-lang a.is-active { background: var(--sb-surface); color: var(--sb-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .sb-settings__btn:hover,
html[data-theme="dark"] .sb-settings.is-open .sb-settings__btn { background: var(--sb-surface-3); }
html[data-theme="dark"] .sb-settings__panel { background: var(--sb-surface); border-color: var(--sb-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .sb-themes button[aria-pressed="true"] { background: var(--sb-surface); color: var(--sb-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .sb-themes button:hover { color: var(--sb-ink); }
@media (max-width: 991px) {
    html[data-theme="dark"] .sb-settings__panel { background: transparent; box-shadow: none; }
}
html[data-theme="dark"] .sb-burger,
html[data-theme="dark"] .sb-burger::before,
html[data-theme="dark"] .sb-burger::after { background: var(--sb-ink); }
@media (max-width: 991px) {
    html[data-theme="dark"] .sb-header { background: var(--sb-bg); }
    html[data-theme="dark"] .sb-header__panel { background: var(--sb-bg); }
    html[data-theme="dark"] .sb-menu__item { border-bottom-color: var(--sb-border); }
}

/* Karten und Kästen */
html[data-theme="dark"] .sb-feature,
html[data-theme="dark"] .sb-box,
html[data-theme="dark"] .sb-stepcard,
html[data-theme="dark"] .sb-stat,
html[data-theme="dark"] .sb-price,
html[data-theme="dark"] .sb-rack,
html[data-theme="dark"] .sb-accordion details,
html[data-theme="dark"] .sb-checklist li,
html[data-theme="dark"] .sb-ptable-wrap,
html[data-theme="dark"] .sb-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow);
}
html[data-theme="dark"] .sb-feature:hover,
html[data-theme="dark"] .sb-rack:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .sb-chips span { background: var(--sb-surface); border-color: var(--sb-border); color: var(--sb-text); }
html[data-theme="dark"] .sb-u-bg-white { background: var(--sb-surface) !important; }
html[data-theme="dark"] .sb-price__amount,
html[data-theme="dark"] .sb-rack__facts { border-color: var(--sb-border); }
html[data-theme="dark"] .sb-split__media img { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }

/* Illustrationen mit weißem Hintergrund bleiben auf heller Fläche, leicht gedämpft */
html[data-theme="dark"] .sb-section--tint .sb-split__media--illustration { background: #e9eef0; box-shadow: var(--sb-shadow); }
html[data-theme="dark"] .sb-split__media--illustration img,
html[data-theme="dark"] .sb-stepcard img { filter: brightness(0.92); }

/* Kundenlogos: helle Kacheln, damit die Originallogos lesbar bleiben */
html[data-theme="dark"] .sb-logos__item { background: #eef2f3; border-color: transparent; }

/* Buttons */
html[data-theme="dark"] .sb-btn--ghost { color: var(--sb-ink) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
html[data-theme="dark"] .sb-btn--ghost:hover { background: var(--sb-surface-3); }

/* Startseite: Bild abdunkeln statt aufhellen */
html[data-theme="dark"] .sb-hero {
    background:
        linear-gradient(90deg, rgba(17,21,24,0.96) 0%, rgba(17,21,24,0.9) 38%, rgba(17,21,24,0.55) 62%, rgba(17,21,24,0.25) 100%),
        url('../img/brandenburger-tor-hero35.jpg') 70% 35% / cover no-repeat;
    border-bottom-color: var(--sb-border);
}
@media (max-width: 991px) {
    html[data-theme="dark"] .sb-hero {
        background:
            linear-gradient(180deg, rgba(17,21,24,0.94) 0%, rgba(17,21,24,0.88) 60%, rgba(17,21,24,0.75) 100%),
            url('../img/brandenburger-tor-hero35.jpg') 60% 30% / cover no-repeat;
    }
}
html[data-theme="dark"] .sb-hero__stats div { background: rgba(26, 32, 36, 0.85); border-color: var(--sb-border); }
html[data-theme="dark"] .sb-btn--on-image { background: rgba(26, 32, 36, 0.8); }

/* Racks */
html[data-theme="dark"] .sb-seg label { color: var(--sb-text); }
html[data-theme="dark"] .sb-seg label:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .sb-seg input:checked + label { background: var(--sb-surface-3); color: var(--sb-brand-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .sb-rack__meter { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .sb-rack__he { background: rgba(131, 192, 188, 0.16); }
html[data-theme="dark"] .sb-rack.is-unavailable { background: #15191c; border-color: var(--sb-border); box-shadow: none; }
html[data-theme="dark"] .sb-rack.is-unavailable h2,
html[data-theme="dark"] .sb-rack.is-unavailable h3,
html[data-theme="dark"] .sb-rack.is-unavailable .sb-rack__facts dd { color: #a9b2b6; }
html[data-theme="dark"] .sb-rack.is-unavailable .sb-rack__he,
html[data-theme="dark"] .sb-rack__na,
html[data-theme="dark"] .sb-rack.is-unavailable .sb-btn { background: #262d31; color: #b4bcc0 !important; }
html[data-theme="dark"] .sb-rack.is-unavailable .sb-rack__meter span { background: #4a5358; }
html[data-theme="dark"] .sb-rack.is-unavailable .sb-rack__facts dt i { color: #8a9398; }
html[data-theme="dark"] .sb-ptable th, html[data-theme="dark"] .sb-ptable td { border-bottom-color: var(--sb-border); }
html[data-theme="dark"] .sb-ptable thead th { background: rgba(131, 192, 188, 0.1); }
html[data-theme="dark"] .sb-ptable td.is-unavailable { color: var(--sb-muted); }
@media (max-width: 767px) {
    html[data-theme="dark"] .sb-ptable tbody tr { border-bottom-color: var(--sb-border); }
}

/* Kontaktformular */
html[data-theme="dark"] .sb-form input[type="text"],
html[data-theme="dark"] .sb-form input[type="email"],
html[data-theme="dark"] .sb-form input[type="tel"],
html[data-theme="dark"] .sb-form input[type="number"],
html[data-theme="dark"] .sb-form textarea,
html[data-theme="dark"] .sb-form select { background-color: #12171a; color: var(--sb-ink); border-color: var(--sb-line); }
html[data-theme="dark"] .sb-form select.sb-select { background-color: var(--sb-surface-3); border-color: transparent; }
html[data-theme="dark"] .sb-form input::placeholder,
html[data-theme="dark"] .sb-form textarea::placeholder { color: #7d878c; }
html[data-theme="dark"] .sb-field label,
html[data-theme="dark"] .sb-card__title { color: var(--sb-ink); }
html[data-theme="dark"] .sb-selection { border-color: var(--sb-line); }
html[data-theme="dark"] .sb-external { background: #2a2414; border-color: #6e5620; color: #eadfc4; }
html[data-theme="dark"] .sb-external h3 { color: #f4e9cd; }
html[data-theme="dark"] .sb-alert--error { background: #3a1d1a; border-color: #7a3229; color: #f6cfc9; }
html[data-theme="dark"] .sb-error { color: #ff9b8f; }
html[data-theme="dark"] .sb-portal .btn { background: var(--sb-surface); color: var(--sb-brand-dark); }
html[data-theme="dark"] .sb-portal .btn:hover { background: var(--sb-surface-3); color: var(--sb-ink); }

/* Fuß und „Nach oben“ */
html[data-theme="dark"] .footer { border-top: 1px solid var(--sb-border); }

/* Elemente, die auf hellem Grund bleiben bzw. Text-Farben aus pages.css */
html[data-theme="dark"] .sb-btn--light { background: #fff; color: #2a5f5b !important; }
html[data-theme="dark"] .sb-btn--light:hover { background: #e3eceb; color: #1f2d32 !important; }
html[data-theme="dark"] .sb-badge { background: var(--sb-ink); color: #1a2024; }
html[data-theme="dark"] .sb-checklist li { color: var(--sb-text); }