/*
 * custom.css — Wiederladen Ruhrgebiet · NOVA/Bootstrap-4 Design-Overrides
 * Live-Design (Shopventures): Gold #a77b3f / Anthrazit #3b4b60 / Open Sans
 * Belegte Live-Töne: primary #a77b3f · dark #826031 · light #c99a5b · secondary #3b4b60 · copyright #1e2631
 * Laden: NACH wiederladen.css (template.xml <CSS Name="wiederladen.css">) — überschreibt NOVA-Defaults.
 * Stand: 2026-05-31 (shop-deploy 9, vollständige 8-Schritte-Live-Design-Übernahme)
 */

/* ======================================================
   0. OPEN SANS 700 — lokal (DSGVO; NOVA liefert nur 400/600)
   ====================================================== */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
         url('fonts/open-sans-700.woff2') format('woff2');
}

/* ======================================================
   1. ROOT-VARIABLEN — NOVA-Custom-Properties auf Marke umstellen
   (greift überall, wo NOVA var(--primary)/var(--secondary) nutzt)
   ====================================================== */
:root {
    --primary: #a77b3f;
    --primary-dark: #826031;
    --primary-light: #c99a5b;
    --secondary: #3b4b60;
    --secondary-dark: #1e2631;
    --success: #2ecc71;
    --warning: #f1c40f;
    --danger: #e74c3c;
    --info: #4aa3df;
}

/* ======================================================
   2. TYPOGRAFIE — Open Sans überall, Headings 700 (statt Montserrat)
   ====================================================== */
body,
input, button, select, textarea,
.form-control, .btn, .navbar, .dropdown-menu, .card, .list-group-item {
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
}
/* Überschriften: NOVA-Default ist Montserrat — auf Open Sans 700 umstellen */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.product-title, .producttitle, .titel, .page-header h1,
.card-title, .section-title, .box-title, legend {
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
}

/* ======================================================
   3. LINKS — Gold statt Blau
   ====================================================== */
a, a:visited { color: #826031; }
a:hover, a:focus { color: #6e4e28; text-decoration: underline; }

/* ======================================================
   4. PRIMÄRFARBE-Utilities
   ====================================================== */
.text-primary { color: #a77b3f !important; }
.bg-primary { background-color: #a77b3f !important; }
.border-primary { border-color: #a77b3f !important; }
.text-secondary { color: #3b4b60 !important; }
.bg-secondary { background-color: #3b4b60 !important; }

/* ======================================================
   5. BUTTONS — Gold CTA
   ====================================================== */
.btn-primary,
.btn-cta, .btn-cta-primary,
a.btn-primary, button.btn-primary {
    background-color: #a77b3f;
    border-color: #826031;
    color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-cta:hover, .btn-cta:focus, .btn-cta:active,
.btn-cta-primary:hover, .btn-cta-primary:focus, .btn-cta-primary:active,
.show > .btn-primary.dropdown-toggle {
    background-color: #826031;
    border-color: #6e4e28;
    color: #ffffff;
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: #c99a5b;
    border-color: #c99a5b;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(167, 123, 63, 0.4);
}
.btn-outline-primary {
    color: #a77b3f;
    border-color: #a77b3f;
}
.btn-outline-primary:hover {
    background-color: #a77b3f;
    border-color: #a77b3f;
    color: #fff;
}
.btn-secondary {
    background-color: #3b4b60;
    border-color: #32414f;
    color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #32414f;
    border-color: #1e2631;
}

/* In den Warenkorb / Kaufen */
.add-to-cart, .add-to-cart:hover,
#buy-form .btn-primary, #buy-form .btn-primary:hover,
.product-actions .btn-primary, .product-actions .btn-primary:hover {
    background-color: #a77b3f;
    border-color: #826031;
    color: #ffffff;
}

/* ======================================================
   6. BADGE / PILLS
   ====================================================== */
.badge-primary { background-color: #a77b3f; color: #ffffff; }
.badge-secondary { background-color: #3b4b60; color: #ffffff; }

/* ======================================================
   7. LIST-GROUP
   ====================================================== */
.list-group-item-action:hover, .list-group-item-action:focus {
    color: #826031;
    background-color: #faf5ee;
}
.list-group-item.active {
    background-color: #a77b3f;
    border-color: #a77b3f;
}

/* ======================================================
   8. PAGINATION
   ====================================================== */
.page-link { color: #a77b3f; }
.page-link:hover { color: #826031; background-color: #faf5ee; border-color: #a77b3f; }
.page-item.active .page-link { background-color: #a77b3f; border-color: #a77b3f; color: #ffffff; }

/* ======================================================
   9. HEADER + HAUPTNAVIGATION (echte NOVA-Selektoren)
   header.fixed-nav · nav.navbar · .container-fluid-xl
   ====================================================== */
header.fixed-nav, #header-wrapper, .header-wrapper {
    border-bottom: 1px solid #e8e0d4;
}
/* GOLD-LINIE unter der Hauptnavigation (Schritt 5) */
header.fixed-nav .navbar,
nav.navbar.navbar-expand-lg,
.navbar-main, #main-nav {
    border-bottom: 3px solid #a77b3f;
}
.navbar-nav .nav-link, .main-navigation .nav-link { color: #3b4b60; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus,
.main-navigation .nav-link:hover { color: #a77b3f; }
.navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-link.active {
    color: #a77b3f;
    border-bottom: 2px solid #a77b3f;
}
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
    color: #a77b3f;
    background-color: #faf5ee;
}

/* ======================================================
   10. FILTER-/KALIBER-CHIPS (aktiv = Gold)
   ====================================================== */
.filter-chip.active, .filter-chip:hover,
.kaliber-chip.active, .jtl-filter-item.active,
.facet-value.active, .filter-tag.active, .tag-chip.active {
    background-color: #a77b3f !important;
    border-color: #826031 !important;
    color: #ffffff !important;
}

/* ======================================================
   11. FOOTER — Anthrazit (echter <footer>-Selektor)
   ====================================================== */
footer, #footer, .footer-wrapper, .footer-main {
    background-color: #3b4b60;
    color: #e8e8e8;
}
footer a, #footer a, .footer-wrapper a, .footer-main a { color: #c99a5b; }
footer a:hover, #footer a:hover, .footer-wrapper a:hover {
    color: #ffffff;
    text-decoration: underline;
}
footer h2, footer h3, footer h4, footer h5,
.footer-main h5, .footer-wrapper h5, .footer-heading,
footer .footer-headline {
    color: #c99a5b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(199, 154, 91, 0.3);
    padding-bottom: 0.4rem;
    margin-bottom: 0.8rem;
}

/* Footer-Boden / Copyright — dunkel #1e2631 */
.copyright, .footer-bottom, .footer-copyright,
#copyright-bar, footer .bottom-bar {
    background-color: #1e2631;
    color: #9aacbb;
}
.copyright a, .footer-bottom a { color: #c99a5b; }
.copyright a:hover, .footer-bottom a:hover { color: #ffffff; }

/* ======================================================
   12. ZAHLART-/VERSAND-LEISTE im Footer (Gold) — Styling
   für das Markup aus wiederladen-ui.js / Footer-Box (Schritt 6/7)
   ====================================================== */
.wr-payment-bar {
    background-color: #a77b3f;
    padding: 0.9rem 1rem;
    text-align: center;
    color: #ffffff;
}
.wr-payment-bar .wr-pay-label,
.wr-payment-bar .wr-ship-label {
    font-weight: 700;
    color: #ffffff;
    margin-right: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
}
.wr-payment-bar .wr-logo {
    height: 30px;
    width: auto;
    margin: 0.2rem 0.25rem;
    vertical-align: middle;
}
.wr-payment-bar .wr-pay-group { display: inline-block; margin: 0.25rem 1rem; }
@media (max-width: 575px) {
    .wr-payment-bar .wr-logo { height: 22px; }
    .wr-payment-bar .wr-pay-label,
    .wr-payment-bar .wr-ship-label { display: block; margin-bottom: 0.3rem; }
}

/* ======================================================
   13. TRUST-BAR im Header (weiß, Gold-Icons) — Styling
   für das Markup aus wiederladen-ui.js (Schritt 4)
   ====================================================== */
.wr-trust-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #e8e0d4;
    font-size: 0.85rem;
    color: #3b4b60;
}
.wr-trust-bar .wr-trust-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 2rem;
    padding: 0.5rem 1rem;
}
.wr-trust-bar .wr-trust-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.wr-trust-bar .wr-trust-item svg,
.wr-trust-bar .wr-trust-item i { color: #a77b3f; flex: 0 0 auto; }
.wr-trust-bar a { color: #3b4b60; font-weight: 700; }
.wr-trust-bar a:hover { color: #a77b3f; text-decoration: none; }
@media (max-width: 575px) {
    .wr-trust-bar .wr-trust-item:not(:first-child) { display: none; }
}

/* ======================================================
   14. PRODUKT-KARTEN + PREISE
   ====================================================== */
.product-card .product-title a, .product-name a,
.productlisting-name a {
    color: #3b4b60;
}
.product-card .product-title a:hover, .product-name a:hover,
.productlisting-name a:hover { color: #a77b3f; }
.product-price, .productlisting-price, .price-current, .price .amount,
.preis, .product-price .price {
    color: #a77b3f;
    font-weight: 700;
}

/* ======================================================
   15. BREADCRUMB
   ====================================================== */
.breadcrumb-item.active { color: #a77b3f; }
.breadcrumb-item a { color: #3b4b60; }
.breadcrumb-item a:hover { color: #a77b3f; }

/* ======================================================
   16. FORM-FOCUS
   ====================================================== */
.form-control:focus, .custom-select:focus {
    border-color: #a77b3f;
    box-shadow: 0 0 0 0.2rem rgba(167, 123, 63, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #a77b3f;
    border-color: #a77b3f;
}

/* ======================================================
   17. TABS / NAV-PILLS
   ====================================================== */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #a77b3f;
    border-top: 3px solid #a77b3f;
}
.nav-tabs .nav-link:hover { color: #a77b3f; }
.nav-pills .nav-link.active { background-color: #a77b3f; color: #fff; }

/* ======================================================
   18. STATUS — Lager-Ampel / Hinweise (belegte Live-Status-Farben)
   ====================================================== */
.text-success, .stock-available, .verfuegbar { color: #1e7e45 !important; }
.text-warning, .stock-low { color: #d4a800 !important; }
.text-danger, .stock-out, .nicht-verfuegbar { color: #e74c3c !important; }
.text-info { color: #4aa3df !important; }
.alert-info {
    background-color: #faf5ee;
    border-color: #a77b3f;
    color: #6e4e28;
}
.alert-success { background-color: #eafaf1; border-color: #2ecc71; color: #1e7e45; }
.alert-warning { background-color: #fef9e7; border-color: #f1c40f; color: #8a6d0b; }
.alert-danger  { background-color: #fdedec; border-color: #e74c3c; color: #a82a1d; }

/* ======================================================
   19. RIBBONS / FLAGS (Neu = Gold, Auf Lager = Grün)
   ====================================================== */
.ribbon-3 .ribbon-inner, .badge-new { background-color: #a77b3f; color: #fff; }
.ribbon-8 .ribbon-inner { background-color: #2ecc71; color: #fff; }
.ribbon-7 .ribbon-inner { background-color: #e74c3c; color: #fff; }

/* ======================================================
   20. MOBILE HAMBURGER + BACK-TO-TOP + SCROLLBAR
   ====================================================== */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23a77b3f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler { border-color: rgba(167, 123, 63, 0.3); }
#back-to-top, .back-to-top, .scroll-top {
    background-color: #a77b3f;
    color: #ffffff;
}
#back-to-top:hover, .back-to-top:hover { background-color: #826031; }
::-webkit-scrollbar-thumb { background-color: #a77b3f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #826031; }

/* ======================================================
   21. ACCORDION / FAQ + SOCIAL + HERO-TEASER
   ====================================================== */
.accordion .card-header a, .collapse-trigger, .faq-question { color: #3b4b60; }
.accordion .card-header a:hover, .collapse-trigger:hover { color: #a77b3f; }
.social-links a, .footer-social a { color: #c99a5b; }
.social-links a:hover, .footer-social a:hover { color: #ffffff; }
.category-tile-title, .teaser-title, .hero-title { color: #a77b3f; }

/* ======================================================
   END custom.css
   ====================================================== */