/* ============================================================================
   base_overtake – Klassen, die meine Bausteine nutzen, aber in FREMDEM xcode-LESS
   (Bootstrap5 / xs_defaults_less_styles / xs_shop_less_*) definiert sind. Hier selbst
   + im Design gefaerbt definiert und SITE-WEIT geladen (Frame), damit meine Seiten
   nicht still von fremdem LESS abhaengen und alles im Design-Look erscheint.
   Design: BG #131313 · Rot #bf0f1e (Hover #a00d19) · Weiss · Source Sans Pro.
   Umgefaerbt: Theme-Accent war #77B6EA (hellblau) / Bootstrap-Primary #0d6efd (blau).
   ============================================================================ */
/* ------------------------------------------------------------------ */
/* A) Buttons & Utilities (genutzt in shop_tile: btn btn-primary w-100 / no-border) */
/* ------------------------------------------------------------------ */
/* .btn-primary: Design-Rot statt Hellblau/Blau. Bootstrap5 rendert ueber CSS-Variablen,
   daher Variablen UND explizite Fallbacks (falls Bootstrap-.btn nicht geladen ist). */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #bf0f1e;
  --bs-btn-border-color: #bf0f1e;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #a00d19;
  --bs-btn-hover-border-color: #a00d19;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #a00d19;
  --bs-btn-active-border-color: #a00d19;
  --bs-btn-disabled-bg: #bf0f1e;
  --bs-btn-disabled-border-color: #bf0f1e;
  color: #ffffff;
  background-color: #bf0f1e;
  border-color: #bf0f1e;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: #ffffff;
  background-color: #a00d19;
  border-color: #a00d19;
}
/* Utilities (von bootstrap / shop_kacheln uebernommen) */
.w-100 {
  width: 100% !important;
}
.no-border {
  border: 0 !important;
}
/* ------------------------------------------------------------------ */
/* B) Mini-Warenkorb (Flappy) – Dark-Theme statt weissem Bootstrap/Shop-Look.        */
/*    Fremd-Klassen aus xs_shop_less_shop_warenkorb_flappy / _warenkorb, hier         */
/*    ueberschrieben auf BG #131313 / Weiss / Rot. Scope = Flappy-Container.          */
/* ------------------------------------------------------------------ */
.xs-shop-mini-cart,
.xs-shop-mini-cart-offer {
  /* Shop-CSS-Variablen im Flappy aufs Design umbiegen -> alles Var-basierte (u.a. der
       Mengen-Counter: bg var(--background-color), border/color var(--color)) wird automatisch dunkel. */
  --background-color: #131313;
  --color: #ffffff;
  --primary-color: #bf0f1e;
  --accent-color: #bf0f1e;
  background-color: #131313 !important;
  color: #ffffff;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  box-shadow: -18px 0 60px rgba(0, 0, 0, 0.55);
}
/* Alle Texte im Flappy hell, Trennlinien dezent weiss (border-color wirkt nur wo Border) */
.xs-shop-mini-cart,
.xs-shop-mini-cart *,
.xs-shop-mini-cart-offer,
.xs-shop-mini-cart-offer * {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.14);
}
/* Header / Footer Trennlinien + dunkler Grund */
.xs-shop-mini-cart-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background-color: #131313 !important;
}
.xs-shop-mini-cart-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  background-color: #131313 !important;
}
/* Anzahl-Badge im Header -> rot */
.xs-shop-mini-cart-anzahl {
  background-color: #bf0f1e !important;
  color: #ffffff !important;
}
/* Schliessen-Icon */
.xs-shop-mini-cart-close {
  color: #ffffff !important;
  opacity: 0.85;
}
.xs-shop-mini-cart-close:hover {
  color: #bf0f1e !important;
  opacity: 1;
}
/* Produkt-Zeilen: Trenner dezent, Bilder mit dezentem Rahmen */
.xs-shop-flappy-product,
.xs-shop-warenkorb-product {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
/* Mengen-Counter (Plus/Minus + Input): dunkel/transparent statt weiss.
   Die white-version/Var-Defaults ueberschreiben; Plus/Minus (color:inherit) -> weiss, Hover rot. */
.xs-shop-mini-cart .xs-shop-product-counter,
.xs-shop-mini-cart-offer .xs-shop-product-counter,
.xs-shop-mini-cart .xs-shop-counter-container,
.xs-shop-mini-cart-offer .xs-shop-counter-container,
.xs-shop-mini-cart .xs-shop-product-counter-text-wrapper,
.xs-shop-mini-cart-offer .xs-shop-product-counter-text-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.xs-shop-mini-cart .xs-shop-product-counter-plus,
.xs-shop-mini-cart .xs-shop-product-counter-minus,
.xs-shop-mini-cart-offer .xs-shop-product-counter-plus,
.xs-shop-mini-cart-offer .xs-shop-product-counter-minus {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  opacity: 1;
}
.xs-shop-mini-cart .xs-shop-product-counter-plus:hover,
.xs-shop-mini-cart .xs-shop-product-counter-minus:hover,
.xs-shop-mini-cart-offer .xs-shop-product-counter-plus:hover,
.xs-shop-mini-cart-offer .xs-shop-product-counter-minus:hover {
  color: #bf0f1e !important;
}
.xs-shop-product-counter-input {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
/* Loeschen-Button dezent, Hover rot */
.xs-shop-warenkorb-delete-btn {
  color: rgba(255, 255, 255, 0.6) !important;
}
.xs-shop-warenkorb-delete-btn:hover {
  color: #bf0f1e !important;
}
/* Zur-Kasse-Button im Flappy -> Design-Rot */
.xs-shop-button-flappy-kassa,
.xs-shop-button-back {
  background-color: #bf0f1e !important;
  border-color: #bf0f1e !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}
.xs-shop-button-flappy-kassa:hover,
.xs-shop-button-back:hover {
  background-color: #a00d19 !important;
  border-color: #a00d19 !important;
  color: #ffffff !important;
}
/* Summen-Zeilen weiss */
.xs-shop-mini-cart-versand,
.xs-shop-mini-cart-zwischensumme,
.xs-shop-mini-cart-discount {
  color: #ffffff !important;
}
/* Add-to-Cart-Feedback / Zusatzflaechen: helles Grau -> dunkle Design-Flaeche */
.free-shipping-wrapper {
  background-color: #1c1c1c !important;
}
.xs-shop-add-to-cart-holder.no-border {
  border: 0 !important;
}
/* Fortschrittsbalken (Gratisversand) -> rot */
.progress-bar {
  background-color: #bf0f1e !important;
}
.progress {
  background-color: rgba(255, 255, 255, 0.12) !important;
}
/* SimpleBar-Scroll-Maske war weiss -> auf dunklen Grund */
.xs-shop-mini-cart-content:before,
.xs-shop-mini-cart-content:after,
.xs-shop-mini-cart .simplebar-mask:before,
.xs-shop-mini-cart .simplebar-mask:after {
  background-color: #131313 !important;
}
.xs-shop-mini-cart .simplebar-scrollbar:before {
  background-color: rgba(255, 255, 255, 0.35) !important;
}
/* ------------------------------------------------------------------ */
/* C) Warenkorb (body.shop) + Checkout (body.checkout) -> Dark-Mode.                 */
/*    Basis = weisser Body + geerbter/dunkler Text + transparente Boxen. Nur echte   */
/*    Shop-/Checkout-Seiten (meine Design-Seiten sind body.xfigma-re, nicht body.shop). */
/* ------------------------------------------------------------------ */
body.shop,
body.checkout {
  background-color: #131313 !important;
  --background-color: #131313;
  --color: #ffffff;
  --primary-color: #bf0f1e;
  --accent-color: #bf0f1e;
}
body.shop main,
body.checkout main {
  background-color: #131313;
  color: #ffffff;
}
/* weisse Haupt-Content-Box -> dunkel */
body.shop .xs-shop-action-page-wrapper,
body.checkout .xs-shop-action-page-wrapper {
  background-color: #131313 !important;
  color: #ffffff;
}
/* geerbter Text im Content -> hell (bewusst gesetzte Farben bleiben dank hoeherer Specificity) */
body.shop main *,
body.checkout main * {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
}
body.shop main a:hover,
body.checkout main a:hover {
  color: #bf0f1e;
}
/* Formularfelder dunkel + heller Text */
body.shop main input,
body.shop main select,
body.shop main textarea,
body.shop main .form-control,
body.checkout main input,
body.checkout main select,
body.checkout main textarea,
body.checkout main .form-control {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
body.shop main ::placeholder,
body.checkout main ::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
/* native Optionsliste bleibt systemhell -> dunkler Text lesbar */
body.shop main select option,
body.checkout main select option {
  color: #131313;
  background: #ffffff;
}
body.shop main input[type="checkbox"],
body.shop main input[type="radio"],
body.checkout main input[type="checkbox"],
body.checkout main input[type="radio"] {
  accent-color: #bf0f1e;
}
/* Ausnahmen: hell bleibende Marken-Flaechen (Google-Login, Payment-Logo-Chips brauchen hellen Grund) */
body.shop .xs-shop-external-login-btn,
body.shop .xs-shop-external-login-btn *,
body.checkout .xs-shop-external-login-btn,
body.checkout .xs-shop-external-login-btn * {
  color: #3c4043;
}
body.shop .side-window-section .logos .img-wrapper,
body.checkout .side-window-section .logos .img-wrapper {
  background-color: #ffffff !important;
}
/* ------------------------------------------------------------------ */
/* D) Cart-/Checkout-Feinschliff (aus gerendertem Warenkorb).                        */
/* ------------------------------------------------------------------ */
/* Mengen-Counter im Cart/Checkout (Variablen-Fallback + Plus/Minus-Hover rot) */
body.shop .xs-shop-product-counter,
body.checkout .xs-shop-product-counter {
  --background-color: transparent;
  --color: #ffffff;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
body.shop .xs-shop-product-counter-plus:hover,
body.shop .xs-shop-product-counter-minus:hover,
body.checkout .xs-shop-product-counter-plus:hover,
body.checkout .xs-shop-product-counter-minus:hover {
  color: #bf0f1e !important;
}
/* Custom-Radios/Checkboxen (.fakebox) dunkel, aktiv rot */
body.shop main .fakebox,
body.checkout main .fakebox {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
body.shop main input:checked + .fakebox,
body.checkout main input:checked + .fakebox {
  background-color: #bf0f1e !important;
  border-color: #bf0f1e !important;
}
/* Loyalty-/Punkte-Box: helles Grau -> dunkle Design-Flaeche */
body.shop .xs-loyalty-points-possible-wrapper,
body.checkout .xs-loyalty-points-possible-wrapper {
  background-color: #1c1c1c !important;
  color: #ffffff !important;
}
/* "zurueck zum Shop" = Sekundaer-Button (Outline) -> hebt sich vom roten "zur Kassa" ab */
.xs-shop-button-back {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}
.xs-shop-button-back:hover {
  background-color: #bf0f1e !important;
  border-color: #bf0f1e !important;
  color: #ffffff !important;
}
/* SimpleBar-Scrollmaske im Cart/Checkout (Sicherheit, falls weiss) */
body.shop .simplebar-mask:before,
body.shop .simplebar-mask:after,
body.checkout .simplebar-mask:before,
body.checkout .simplebar-mask:after {
  background-color: #131313 !important;
}
body.shop .simplebar-scrollbar:before,
body.checkout .simplebar-scrollbar:before {
  background-color: rgba(255, 255, 255, 0.35) !important;
}
/*# sourceMappingURL=/xassets/uncompressed/source_map/185.css.css.map */