/* Module: base.css — :root CSS variables, body, typography, global resets, Bootstrap overrides */

/* Bug-Fix 2026-05-14: @import wurde entfernt — vorher blockierte er CSSOM-
   Building bis das Google-Fonts-CSS geladen war (zusätzlicher Round-Trip,
   verzögert FCP um ~150-300ms). Stattdessen lädt jetzt das Layout-Template
   (`_base_meta.html` oder analog) die Fonts via:
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?...&display=swap" media="print" onload="this.media='all'">
   Falls das im Template noch nicht da ist, sicherheitshalber Fallback hier
   per CSS-`@font-face` definieren (Outfit fallback auf system-ui via :root). */

/* Einheitliche Navbar-Höhe als CSS-Variable für Navbar und Subnav */
:root {
    --navbar-height: 100px;
    --search-btn-right-desktop: 5px;
    --search-btn-top-desktop: 4px;
    --search-btn-bottom-desktop: 4px;
    --search-btn-right-tablet: 4px;
    --search-btn-top-tablet: 4px;
    --search-btn-bottom-tablet: 4px;
    --search-btn-right-mobile: 15px;
    --search-btn-top-mobile: 4px;
    --search-btn-bottom-mobile: 4px;
}

@media (max-width: 768px) {
    :root {
        --navbar-height: 60px;
    }
}

@media (max-width: 576px) {
    :root {
        --navbar-height: 55px;
    }
}

/* Reset and Base Styles */
html,
body {
    scroll-behavior: auto !important;
    margin: 0;
    padding: 0;
    background-color: #f1f3f5;
    /* neutrales, kühles Hellgrau als globaler Hintergrund */
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* verhindert horizontales Ziehen/Scrollen */
    overscroll-behavior-x: none;
    /* verhindert horizontales Bounce/Scroll-Chaining */
}

body {
    padding-top: calc(var(--navbar-height, 100px) + 56px);
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

/* Bootstrap Primary Overrides (Blue to Turquoise) */
.btn-primary {
    background-color: #00A8CC !important;
    border-color: #00A8CC !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #008FB3 !important;
    border-color: #008FB3 !important;
}

.btn-outline-primary {
    color: #00A8CC !important;
    border-color: #00A8CC !important;
}

.btn-outline-primary:hover {
    background-color: #00A8CC !important;
    border-color: #00A8CC !important;
    color: #fff !important;
}

.text-primary {
    color: #00A8CC !important;
}

.bg-primary {
    background-color: #00A8CC !important;
}

.spinner-border.text-primary {
    color: #00A8CC !important;
}

.border-primary {
    border-color: #00A8CC !important;
}

/* Layout Containers */
.container-fluid {
    padding: 0 28px;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    background: transparent;
}

.container-fluid .row {
    /* margin-left: 0; */
    /* margin-right: 0; */
    background-color: transparent !important;
}

.main-content {
    flex: 1 0 auto;
    padding: 20px 0;
    margin-bottom: 20px;
    background-color: transparent;
}

/* Custom Bootstrap-like 2/10 Grid Breite ab md (>=768px) */
@media (min-width: 992px) {
    .col-md-2-5 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .col-md-9-5 {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .col-md-2-5 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-9-5 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* Responsive base container adjustments */
@media (max-width: 992px) {
    .container-fluid {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    /* CONTAINER MOBILE */
    .container-fluid {
        padding: 0 15px;
    }

    .main-content {
        padding: 15px 0;
    }

    body {
        padding-top: calc(var(--navbar-height, 60px) + 56px);
    }
}

@media (max-width: 576px) {
    /* CONTAINER SMARTPHONE */
    .container-fluid {
        padding: 0 10px;
    }

    /* Mobile: kein Padding/Margin oben am Content — Inhalt klebt direkt
       unter dem Subnav. Spart ~26px Vertical-Space auf Phones, sodass
       z.B. der Hero-Banner / die erste Produktreihe sofort sichtbar ist. */
    .main-content {
        padding: 0 0 10px;
    }
    .container-fluid.main-content {
        margin-top: 0 !important;
    }

    /* Bootstrap-Row-Gutter `gy-3` setzt automatisch padding-top: 16px auf
       jedem col-Kind. Auf Mobile killen, damit das erste col (Filter-
       Sidebar) keine Höhe einnimmt und das zweite col (Hero) direkt am
       Top sitzt. --bs-gutter-y: 0 deaktiviert sowohl row margin-top als
       auch col padding-top in einem Rutsch. */
    .container-fluid.main-content > .row {
        --bs-gutter-y: 0 !important;
    }
    /* Hero-Container und das Premium-Banner selbst dürfen auch keinen
       Eigen-Margin nach oben haben. */
    #heroRotationContainer,
    #heroRotationContainer .hero-banner-premium {
        margin-top: 0 !important;
    }

    body {
        /* +40px für Subnav-Höhe exakt, ohne extra Puffer (vorher +56px). */
        padding-top: calc(var(--navbar-height, 55px) + 40px);
    }
}

@media (max-width: 400px) {
    .container-fluid {
        padding: 0 8px;
    }
}

/* ── Dark Mode ─────────────────────────────────────────────────────────── */
html.dark-mode,
html.dark-mode body {
    background-color: #22252d !important;
    color: #e2e8f0 !important;
}

/* Navbar */
html.dark-mode .navbar {
    background-color: #1a1b22 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
html.dark-mode .search-input {
    background-color: #2d303a !important;
    color: #e2e8f0 !important;
    border-color: #3a3d4a !important;
}
html.dark-mode .search-input::placeholder {
    color: #6b7280 !important;
}
html.dark-mode .search-button {
    background-color: #2d303a !important;
    border-color: #3a3d4a !important;
    color: #e2e8f0 !important;
}
html.dark-mode .user-button {
    color: #e2e8f0 !important;
}
html.dark-mode .user-button:hover {
    background-color: #2d303a !important;
}

/* Subnav — .subnav-wrap ist der aeussere, volle-Breite Fixed-Balken (war #fff
   und blieb daher als weisser Streifen sichtbar; .subnav allein deckte nur die
   zentrierte Linkgruppe ab). */
html.dark-mode .subnav-wrap,
html.dark-mode .subnav,
html.dark-mode .subnav-inner {
    background-color: #1a1b22 !important;
    border-color: #2d3139 !important;
}
html.dark-mode .subnav-wrap {
    border-bottom-color: #2d3139 !important;
}
html.dark-mode .subnav a,
html.dark-mode .subnav-link {
    color: #b0b7c3 !important;
}
html.dark-mode .subnav a:hover,
html.dark-mode .subnav-link:hover,
html.dark-mode .subnav-link.active {
    color: #e2e8f0 !important;
}

/* Subnav-Quickbar (Hover-Dropdown unter der L1-Leiste mit L2/L3-Kategorien).
   Styles liegen inline in templates/_subnav.html (heller #fff-Panel) und waren
   nicht fuer Dark Mode gescoped -> poppte als grelles weisses Panel auf. Hier
   auf die Dropdown-Palette ziehen (Panel #2a2d36, Rand #3a3d4a, Text hell). */
html.dark-mode .subnav-quickbar {
    background: #2a2d36 !important;
    border-bottom-color: #3a3d4a !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
html.dark-mode .qb-card {
    color: #cbd2dc !important;
}
html.dark-mode .qb-card:hover {
    background: #2d303a !important;
    color: #00A8CC !important;
}
html.dark-mode .qb-image-area {
    background: #23262e !important;
    border-left-color: #3a3d4a !important;
    color: #8b939f !important;
}

/* Einstellungen-Seite Karten */
html.dark-mode .settings-card {
    background-color: #2a2d36 !important;
    border-color: #3a3d4a !important;
}
html.dark-mode .setting-label {
    color: #e2e8f0 !important;
}
html.dark-mode .setting-desc {
    color: #8b939f !important;
}
html.dark-mode .setting-row {
    border-bottom-color: #3a3d4a !important;
}
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: #e2e8f0 !important;
}
html.dark-mode .text-dark {
    color: #e2e8f0 !important;
}
html.dark-mode .text-body-secondary,
html.dark-mode .text-muted {
    color: #8b939f !important;
}

/* Formular-Elemente (Einstellungen) */
html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: #2d303a !important;
    color: #e2e8f0 !important;
    border-color: #3a3d4a !important;
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background-color: #2d303a !important;
    color: #e2e8f0 !important;
    border-color: #6c5ce7 !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.25) !important;
}

/* Modal */
html.dark-mode .modal-content {
    background-color: #2a2d36 !important;
    border-color: #3a3d4a !important;
    color: #e2e8f0 !important;
}
html.dark-mode .dropdown-menu {
    background-color: #2a2d36 !important;
    border-color: #3a3d4a !important;
}
html.dark-mode .dropdown-item {
    color: #e2e8f0 !important;
}
html.dark-mode .dropdown-item:hover {
    background-color: #2d303a !important;
}

/* Suchvorschläge */
html.dark-mode .search-suggestions {
    background: #2a2d36 !important;
    border-color: #3a3d4a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
html.dark-mode .suggestion-item:hover,
html.dark-mode .suggestion-item.active {
    background-color: #2d303a !important;
}
html.dark-mode .suggestion-text {
    color: #e2e8f0 !important;
}
html.dark-mode .suggestion-category {
    color: #8b939f !important;
}

/* Buttons (Einstellungen) */
html.dark-mode .btn-outline-secondary {
    color: #b0b7c3 !important;
    border-color: #3a3d4a !important;
}
html.dark-mode .btn-outline-secondary:hover {
    background-color: #2d303a !important;
    color: #e2e8f0 !important;
}
html.dark-mode .btn-outline-danger {
    color: #fc8181 !important;
    border-color: #fc8181 !important;
}
html.dark-mode .btn-outline-danger:hover {
    background-color: #fc8181 !important;
    color: #2a2d36 !important;
}

/* ── Dark Mode: Inhaltsflaechen (2026-05-28) ───────────────────────────────
   Vorher deckten die Dark-Regeln nur Navbar/Subnav/Settings ab — Produktkarten,
   Filter-Sidebar, Detailpanel, Footer, Breadcrumb, Pagination, Tabellen blieben
   weiss. Daher wirkte Dark Mode "nur halb". Diese Regeln ziehen den Modus auf
   alle Inhaltsflaechen durch. Palette: bg #22252d, Karte #2a2d36, Box #23262e,
   Text #e2e8f0, muted #9aa3b0, Rahmen #3a3d4a, Akzent #00A8CC.
   Alles strikt unter html.dark-mode gescoped -> kein Effekt im Hellmodus. */

/* Generische Bootstrap-Flaechen */
html.dark-mode .bg-white,
html.dark-mode .bg-light {
    background-color: #2a2d36 !important;
}
html.dark-mode .card {
    background-color: #2a2d36;
    color: #e2e8f0;
    border-color: #3a3d4a;
}
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-start,
html.dark-mode .border-end {
    border-color: #3a3d4a !important;
}
html.dark-mode hr {
    border-color: #3a3d4a;
    opacity: 1;
}

/* Produktkarten (Suche / Kategorie / Favoriten) — im Hellmodus #f1f3f5, auf
   der hellen Seite ein kaum sichtbarer Tile. Mit #2a2d36 hoben sie sich im
   Dark Mode deutlich vom Seiten-BG (#22252d) ab -> sichtbarer "Kachel"-Effekt
   in Listen- und 5er-Grid-Ansicht. Transparent = verschmilzt mit der Seite,
   kein sichtbarer Rahmen, exakt wie im Hellmodus. */
html.dark-mode .product-card {
    background: transparent !important;
    box-shadow: none !important;
}
/* Deal-/Slider-Karten (Homepage): wie im Hellmodus FLACH — kein abgesetzter
   "Kachel"-Hintergrund. Mit #2a2d36 hob sich die Karte deutlich vom Seiten-BG
   (#22252d) ab und wirkte als Karteikarte; im Hellmodus ist sie transparent
   (landing.css). transparent = verschmilzt mit der Seite, exakt wie hell.
   (Bildflaeche bleibt weiss via landing.css, Text hell via Block unten.) */
html.dark-mode .deal-card {
    background: transparent !important;
    box-shadow: none !important;
}
html.dark-mode .product-title,
html.dark-mode .deal-card .card-title,
html.dark-mode .deal-card-title {
    color: #e2e8f0 !important;
}
html.dark-mode .product-description {
    color: #9aa3b0 !important;
}
html.dark-mode .current-price,
html.dark-mode .price,
html.dark-mode .deal-price {
    color: #e2e8f0 !important;
}
/* Bild-Container hell lassen — Produktfotos brauchen hellen Hintergrund */
html.dark-mode .product-image-container,
html.dark-mode .deal-card-img-container {
    background: #f1f3f5 !important;
}

/* Smart-Filter-Chips */
html.dark-mode .chip,
html.dark-mode .sf-sidebar-chip,
html.dark-mode .smart-filter {
    background: #2d303a !important;
    color: #e2e8f0 !important;
    border-color: #3a3d4a !important;
}
html.dark-mode .chip.active,
html.dark-mode .sf-sidebar-chip.active {
    background: #00A8CC !important;
    color: #fff !important;
    border-color: #00A8CC !important;
}

/* Filter-Sidebar / Accordion */
html.dark-mode .filter-sidebar {
    background: transparent !important;
}
html.dark-mode .filter-sidebar .accordion-button {
    color: #e2e8f0 !important;
}
html.dark-mode .filter-sidebar .accordion-body {
    color: #cbd2dc !important;
}
html.dark-mode .filter-sidebar .accordion-item {
    border-color: #3a3d4a !important;
}
html.dark-mode .filter-sidebar .form-label,
html.dark-mode .filter-sidebar .form-check-label {
    color: #cbd2dc !important;
}

/* Produktdetailseite */
html.dark-mode .detail-card {
    background: #2a2d36 !important;
    color: #e2e8f0 !important;
}
html.dark-mode .key-facts,
html.dark-mode .shipping-box,
html.dark-mode .payment-box,
html.dark-mode .delivery-box {
    background: #23262e !important;
    border-color: #3a3d4a !important;
}
html.dark-mode .kf-row {
    border-bottom-color: #343843 !important;
}
html.dark-mode .kf-label {
    color: #9aa3b0 !important;
}
html.dark-mode .kf-value {
    color: #e2e8f0 !important;
}
html.dark-mode .pm-chip {
    background: #2d303a !important;
    border-color: #3a3d4a !important;
    color: #e2e8f0 !important;
}
html.dark-mode .seller {
    border-top-color: #3a3d4a !important;
}
html.dark-mode .spec-item,
html.dark-mode .spec-item-wide {
    border-color: #3a3d4a !important;
}
html.dark-mode .spec-label {
    color: #9aa3b0 !important;
}
html.dark-mode .spec-value {
    color: #e2e8f0 !important;
}
html.dark-mode .spec-item-wide .bg-light,
html.dark-mode .p-3.bg-light {
    background: #23262e !important;
}

/* Breadcrumb (full-width + inline) */
html.dark-mode .cat-breadcrumb li,
html.dark-mode .cat-breadcrumb li a,
html.dark-mode .breadcrumb-item,
html.dark-mode .breadcrumb-item a {
    color: #9aa3b0 !important;
}
html.dark-mode .cat-breadcrumb li.active,
html.dark-mode .breadcrumb-item.active {
    color: #e2e8f0 !important;
}

/* Pagination */
html.dark-mode .page-link {
    background: #2a2d36 !important;
    border-color: #3a3d4a !important;
    color: #e2e8f0 !important;
}
html.dark-mode .page-item.active .page-link {
    background: #00A8CC !important;
    border-color: #00A8CC !important;
    color: #fff !important;
}
html.dark-mode .page-item.disabled .page-link {
    background: #23262e !important;
    color: #6b7280 !important;
}

/* SEO-Text / verwandte Kategorien (/k/ + category) */
html.dark-mode .k-page-seo-text,
html.dark-mode .k-page-related {
    border-top-color: #3a3d4a !important;
}
html.dark-mode .k-page-seo-text p {
    color: #9aa3b0 !important;
}

/* Tabellen (Vergleich) */
html.dark-mode .table {
    color: #e2e8f0 !important;
}
html.dark-mode .table > :not(caption) > * > * {
    background-color: #2a2d36 !important;
    border-color: #3a3d4a !important;
    color: #e2e8f0 !important;
}

/* Statische Seiten (AGB/Datenschutz/Impressum/Ueber uns) — Fliesstext */
html.dark-mode .legal-content,
html.dark-mode .content-card,
html.dark-mode .page-content {
    background: #2a2d36 !important;
    color: #e2e8f0 !important;
}

/* Homepage / Landing — die Hauptflaeche war #f1f3f5 (hellgrau), daher wirkte
   die Homepage im Dark Mode komplett "weisslich". */
html.dark-mode .landing-page,
html.dark-mode .deals-section,
html.dark-mode .seasonal-hub-wrapper {
    background: #22252d !important;
}
/* Section-Titel der Homepage-Slider (inline color:#2c3e50 im JS) */
html.dark-mode .slider-block h2,
html.dark-mode .deals-section h2,
html.dark-mode .landing-page h2 {
    color: #e2e8f0 !important;
}
/* Marken-Chips */
html.dark-mode .brand-chip {
    background: #2d303a !important;
    color: #e2e8f0 !important;
    border-color: #3a3d4a !important;
}
/* Mega-Banner "Empfohlen fuer dich" (gw-megabanner, war #fff) */
html.dark-mode .gw-megabanner {
    background: #2a2d36 !important;
    border-top-color: #3a3d4a !important;
    border-bottom-color: #3a3d4a !important;
}
html.dark-mode .gw-megabanner-title,
html.dark-mode .gw-megabanner-price {
    color: #e2e8f0 !important;
}
/* Bild-Stage hell lassen — Produktfotos brauchen hellen Hintergrund */
html.dark-mode .gw-megabanner-stage {
    background: #f1f3f5 !important;
}
/* Auth-Seiten (login/register/forgot_password/reset_password) — die weisse
   .auth-card war im Dark Mode hell mit unlesbaren hellen Labels. */
html.dark-mode .auth-card {
    background: #2a2d36 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
html.dark-mode .auth-card label,
html.dark-mode .auth-card .form-label {
    color: #cbd2dc !important;
}
html.dark-mode .auth-legal,
html.dark-mode .auth-legal a {
    color: #8b939f !important;
}

/* Homepage Deal-/Slider-Karten: Titel + Preis haben inline dark colors
   (#2c3e50 / #212529 aus landing-page.js) -> mit !important auf hell ziehen.
   :not(.badge) schuetzt Rabatt-Badges (eigene Farbflaeche). */
html.dark-mode .deal-card .card-body,
html.dark-mode .slider-item .card-body,
html.dark-mode .deal-card .card-body div,
html.dark-mode .slider-item .card-body div,
html.dark-mode .deal-card .card-body span:not(.badge),
html.dark-mode .slider-item .card-body span:not(.badge) {
    color: #e2e8f0 !important;
}

/* ── Dark Mode: Hero-Banner (2026-05-28) ───────────────────────────────────
   Die Hero-Banner (Homepage-Karussell + jede Kategorieseite) hatten einen
   hellen Pastell-Verlauf. Im Dark Mode wirkte die Seite dadurch "weisslich",
   ausserdem faerbte das globale `html.dark-mode h1..h6`-Regel die .hero-title
   auf nahezu Weiss -> unsichtbar auf hellem Verlauf. Loesung: Hero-Flaeche
   abdunkeln + Text auf Hell. Produktfreisteller-PNGs sitzen transparent auf
   dem Verlauf und funktionieren auf dunklem Grund mit dem Drop-Shadow weiter. */

/* Standalone-Heroes (Kategorieseiten) */
html.dark-mode .hero-banner-premium {
    background: radial-gradient(circle at 70% 50%, #2b2f3a 0%, #23262e 60%, #1d1f26 100%) !important;
}
html.dark-mode .hero-title {
    color: #f1f5f9 !important;
}
html.dark-mode .hero-subtitle {
    color: #c0c7d1 !important;
}
/* Weisser Themen-Glow -> dezenter Akzent-Glow */
html.dark-mode .theme-white-layer {
    background: radial-gradient(circle at 72% 50%, rgba(0, 168, 204, 0.12) 0%, transparent 70%) !important;
}

/* Homepage-Karussell: id-gescopte Light-Regeln (#heroCarousel ...) brauchen
   eine id-gescopte Dark-Ueberschreibung, sonst gewinnen sie nach Spezifitaet. */
html.dark-mode #heroCarousel .hero-banner-premium {
    background: radial-gradient(circle at 70% 50%, #2b2f3a 0%, #23262e 60%, #1d1f26 100%) !important;
}
html.dark-mode #heroCarousel .hero-title {
    color: #f1f5f9 !important;
}
html.dark-mode #heroCarousel .hero-subtitle {
    color: #c0c7d1 !important;
}
/* Heller Lese-Wash links -> dunkler Wash (Text ist jetzt hell) */
html.dark-mode #heroCarousel .hero-banner-premium::after {
    background: linear-gradient(to right,
        rgba(29, 31, 38, 0.65) 0%,
        rgba(29, 31, 38, 0.30) 55%,
        transparent 100%) !important;
}
/* Cyber-Grid etwas zuruecknehmen, damit es auf Dunkel nicht flimmert */
html.dark-mode #heroCarousel .hero-banner-premium::before {
    opacity: 0.06 !important;
}
/* Karussell-CTA: schwarzer Button auf dunklem Hero -> Akzentfarbe */
html.dark-mode #heroCarousel .btn-hero-primary {
    background: #00A8CC !important;
}
html.dark-mode #heroCarousel .btn-hero-primary:hover {
    background: #00bfe6 !important;
}
html.dark-mode .btn-hero-primary {
    background: #00A8CC !important;
}
html.dark-mode .btn-hero-primary:hover {
    background: #00bfe6 !important;
}