/*Amazon Werbung verstecken und Amazon-Paybutton Blink-Fix */
.amazonPayButton{min-width:200px !important;}
.amzpayments-footer-banner, .amzpayments-product-banner{display:none;}

@media (max-width: 767.98px) {
    .badge{font-size: .75rem !important;}
    .ratio>*{height: auto !important;}
    .ratio-homeSlider {--bs-aspect-ratio: 24%;}
    .btn, .btn-link{font-size: 0.75rem;}
}
@media (max-width: 994px) {
    .btn, .btn-link{font-size: 0.50rem;}
}
@media (max-width: 1200px) {
    #lnk-kategorien{
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom:20px;
        width:150px !important;
        display:none;
    }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .page-product .product__add-to-cart .product-actions__quantity {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .page-product .product__add-to-cart .product-actions__quantity .input-group {
        width: 100%;
    }

    .page-product .product__add-to-cart .product-actions__quantity .form-control {
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .page-product .product__add-to-cart .product-actions__button .btn {
        width: 100%;
    }
}

/* .badge:not(.bright){ }/*Bestellstatus-Badges */ 
.badge:not(.bright){
    color:#000000AA !important;
     background-color:#ced4da !important;
    font-weight: bold;
    border: 1px solid #000000dd;
    font-size: 16px;
/*    text-shadow: 0px 0px 1px #000, 0px 0px 2px #000;
    box-shadow: 0px 0px 3px 0px #00000088;
    transform: rotate(-35deg);
    position:absolute;*/
 } 
 /*.badge.online-only {
     left:-14px;
     top:54px;
     z-index: 10000;
     font-size: 13.5px;
 }
 .badge.new{
     top:0px;
     left:-12px;
     z-index: 10;
     font-size:22px;
 }
 .badge.pack{
     left:-18px;
     top:16px;
     z-index: 100;
 }
 .badge.on-sale{    
     top: 32px;
    left: -16px;
    z-index: 1000;
    font-size: 21px;}
 */
 .carousel-inner > ul.product-flags > li.badge{
/*     transform: translate(12px,15px) rotate(-35deg);*/
 }
 
 .ratio-homeSlider{
     min-height: auto;
 }
 .carousel .carousel-inner{
     height: auto !important;
 }

 .card{
 box-shadow: 0px 0px 4px 1px #00000044;}
 .card:hover{
 box-shadow: 0px 0px 4px 1px #c23e4c;}
 
/* .page-product .product__images .carousel,.page-product .product__images,.carousel-inner {     overflow:visible !important; }*/
 
 .btn, .btn-link{
    background-color:#ced4da !important;
    border:1px solid #b3b8be;
    color:#000000AA !important;
    font-weight: bold;
    font-size:0.75rem;
 }
 .btn:hover,.btn-link:hover,.btn:active,.btn-link:active{
     color:#000000 !important;
     background-color:#b3b8be !important;
     border:1px solid #b3b8be !important;
 }
 
 .btn i{color:inherit !important;}
/* .btn-with-icon{color:black;} */
.btn:disabled,.btn-link:disabled{
    color:#ddd !important;
    background-color:#888 !important;
    border-color:#444 !important;
}
.header-block__icon{
    color: #e1001a;
}
 .main-menu__tree>li>a{
     padding:0.5rem 0.5rem !important;
 }
 
 .thumbnails__container .thumbnail.active img{
     border: 2px solid #E1001A;
 }
 
.main-menu__tree__item{transition: all 0.5s;}
.main-menu__tree__item:hover{background-color:#f35668 !important;}
.category.current {background-color:#e1001aAA;}

/*.header a{color:#000000AA !important;}
.header a:hover{color:#000000 !important;}*/
.wrapper a{color:#000000AA !important;}
.wrapper a:hover{color:#000000 !important;}
.footer a{}
.footer a:hover{color:#E1001A !important;}
  
.category.main-menu__tree__item{
    background-color: #ced4da;
    border:1px solid #b3b8be;
    border-radius: 2px;
    display:none !important;
}
.category.main-menu__tree__item:hover{
    background-color: #b3b8be !important;
}

#lnk-kategorien{
    margin-left: 50px;
    margin-right: 50px;
    background-color: #ced4da;
    border:1px solid #b3b8be;
    border-radius: 2px;
}

#lnk-kategorien:hover{
    background-color: #b3b8be !important;
 }
#lnk-kategorien a{color: #000A !important;
    font-weight: bold;
    width:100%;
    min-width: 150px;
    text-align: center;
    font-size: 1.1em;
    padding: 5px 15px 5px 15px !important;
/*    font-style: italic;
    text-shadow: 0px 0px 4px #000, 0px 0px 1px #000;*/
}
#lnk-kategorien a::after {
  border-bottom: 0;
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    border-top: .3em solid;
    content: "";
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
}
.order-2 {
    order: 1 !important;
}

 

 /******************************************************
 * AYCR Button in Top-Navigation
 ******************************************************/

#lnk-all-you-can-read{
    background-image:url(https://www.hifitest.de/aycr-neu/img/AYCR-redesign-logo.png);
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
#lnk-all-you-can-read a{opacity: 0;}
 
 
 /******************************************************
 * GLOBAL BASIS
 ******************************************************/

/* Allgemeine Basis für den gesamten Shop */
body {
  /* Globale Schriftart, Textfarbe, Hintergrund */
  /* font-family: ...; */
  /* color: ...; */
  /* background-color: ...; */
}

/* Wrapper für Seiteninhalte zwischen Header und Footer */
#wrapper,
#content-wrapper,
#content {
  /* Maximalbreite, Zentrierung, Hintergrund */
  /* max-width: ...; */
  /* margin: 0 auto; */
  /* background-color: ...; */
}

/* Seiten-spezifische IDs am Body:
   #index, #category, #product, #cart, #checkout, #cms, #contact etc. */

body#index {
  /* Startseite */
}

body#category {
  /* Kategorieseiten */
}

body#product {
  /* Produktdetailseite */
}

body#cart {
  /* Warenkorbseite */
}

body#checkout {
  /* Checkout */
}

body#cms {
  /* CMS-Seiten (AGB, Über uns etc.) */
}

/******************************************************
 * TYPOGRAFIE & LINKS
 ******************************************************/

/* Grundschrift für alle Texte */
body, p, li {
  /* font-size: ...; */
  /* line-height: ...; */
}

/* Globale Links */
a {
  /* color: ...; */
  /* text-decoration: ...; */
}

a:hover,
a:focus {
  /* hover-/focus-Zustand */
  /* color: ...; */
  /* text-decoration: ...; */
}

/* Links im Header */
#header a {
  /* Farbe der Links in Navigation, Top-Bar etc. */
}

/* Aktiver/aktueller Link – allgemeine Klasse .current
   Wird u. a. für Menüs und Pagination benutzt */
.current > a,
a.current {
  /* Hervorhebung aktueller Punkt (Farbe, Hintergrund, Unterstreichung etc.) */
  /* color: ...; */
  /* background-color: ...; */
  /* font-weight: ...; */
}

/* Aktuelle Seite in der Pagination (oft .page-item.active, manchmal .current) */
.pagination .current,
.pagination .page-item.active > a {
  /* Darstellung der aktuell ausgewählten Seite */
}

/******************************************************
 * HEADER & NAVIGATION
 ******************************************************/

/* Gesamter Header */
#header {
  /* background-color: ...; */
  /* color: ...; */
}

/* Logo-Bereich */
#header .logo {
  /* padding / margin / Ausrichtung Logo */
}

/* obere Leiste (Login, Sprache, Währung) */
#header .header-nav {
  /* background-color: ...; */
}

/* Hauptnavigation Desktop (Top-Menü) */
#_desktop_top_menu,
#header .top-menu {
  /* Hintergrund, Abstand, Rahmen etc. */
}

/* Hauptnavigation: einzelne Einträge */
#header .top-menu > li > a {
  /* Farbe, Padding, Groß-/Kleinschreibung */
}

/* Hover auf Menüeinträgen */
#header .top-menu > li > a:hover {
  /* Farbe / BG bei Hover */
}

/* Aktiver Menüpunkt: Klasse .current
   Kombiniert mit Bereichsklasse, z. B. body#category, body#cms etc.
   – falls dein Theme so arbeitet. */
#header .top-menu > li.current > a,
#header .top-menu > li.current a {
  /* Hervorhebung des aktuellen Menüpunkts */
  /* color: ...; */
  /* background-color: ...; */
  /* border-bottom: ...; */
}

/* Mobile Navigation */
#_mobile_top_menu {
  /* Darstellung mobil (Offcanvas, Dropdown etc.) */
}

/******************************************************
 * BUTTONS (.btn, .btn-primary, .btn-secondary, .btn-link)
 ******************************************************/

/* Basis für alle Buttons */
.btn {
  /* border-radius: ...; */
  /* font-weight: ...; */
  /* text-transform: ...; */
  /* padding: ...; */
}

/* Primäre Buttons – wichtigste Aktion (z. B. „In den Warenkorb“) */
.btn-primary {
    min-width:155px;
  /* background-color: ...; */
  /* border-color: ...; */
  /* color: ...; */
}

.btn-primary:hover,
.btn-primary:focus {
  /* Hover-/Focus-Zustand des Hauptbuttons */
  /* background-color: ...; */
  /* border-color: ...; */
}

/* Sekundäre Buttons (alternative Aktionen) */
.btn-secondary {
  /* background-color: ...; */
  /* border-color: ...; */
  /* color: ...; */
}

/* „Link-Button“, häufig für „Mehr erfahren“ o. Ä. */
.btn-link {
  /* background: none; */
  /* border: none; */
  /* color: ...; */
  /* text-decoration: ...; */
}

/******************************************************
 * BADGES (.badge, Statuslabels, Produktflags)
 ******************************************************/

/* Generische Badges – kleine Label, z. B. für Status, Mengen etc. */
.badge {
  /* Hintergrund, Schriftfarbe, Padding, Border-Radius */
  /* background-color: ...; */
  /* color: ...; */
  /* border-radius: ...; */
  /* font-size: ...; */
  /* padding: ...; */
}

/* Badge-Varianten (wenn vorhanden) */
.badge-primary {
  /* primäre Badge-Farbe */
}

.badge-secondary {
  /* sekundäre Badge-Farbe */
}

.badge-success {
  /* z. B. grün: Erfolg / verfügbar */
}

.badge-danger {
  /* z. B. rot: Fehler / Ausverkauft */
}

.badge-warning {
  /* z. B. gelb: Warnung / Hinweis */
}

/* Produkt-Flags (Sale / Neu / Bestseller etc.) */
.product-flags .product-flag {
  /* Stil aller Produktflaggen */
}

.product-flag.new {
  /* Stil „Neu“-Badge */
}

.product-flag.on-sale,
.product-flag.discount {
  /* Stil „Sale“- / „Rabatt“-Badge */
}

/******************************************************
 * PRODUKTLISTEN (Kategorien, Suche, Startseite)
 ******************************************************/

/* Container für Produktlisten */
.products {
  /* Hintergrund, Abstände, Grid-Spacing etc. */
}

/* Grid-Ansicht */
.products.grid .product-miniature {
  /* Card-Styling einzelner Produktkacheln */
  /* border: ...; */
  /* border-radius: ...; */
  /* background-color: ...; */
  /* padding: ...; */
}

/* Produktbild */
.product-miniature .product-thumbnail {
  /* Ausrichtung, Rahmen, Hintergrund */
}

/* Produktname */
.product-miniature .product-title a {
  /* Schriftgröße, Gewicht, Farbe */
}

/* Preisblock */
.product-miniature .product-price-and-shipping {
  /* Layout für Preisbereich */
}

/* Aktueller Preis */
.product-miniature .price {
  /* Farbe, Größe, Gewicht */
}

/* Alter durchgestrichener Preis */
.product-miniature .regular-price {
  /* text-decoration: line-through; */
  /* color: ...; */
}

/* Product Flags in der Liste */
.product-miniature .product-flags {
  /* Positionierung z. B. oben links, z-index etc. */
}

/******************************************************
 * PRODUKTDETAILSEITE
 ******************************************************/

/* Gesamtcontainer Produktdetailseite */
body#product .product-container,
body#product .product-detail {
  /* Hintergrund, Rahmen, Spacing */
}

/* Bilderbereich */
body#product .images-container {
  /* Ausrichtung, max-width etc. */
}

/* Hauptbild */
body#product .product-cover {
  /* Rahmen, Schatten etc. */
}

/* Thumbnails */
body#product .js-qv-product-images {
  /* Darstellung der kleinen Vorschaubilder */
}

/* Preis auf Produktdetailseite */
body#product .product-prices,
body#product .product-price {
  /* Farbgebung, Größe etc. */
}

/* Varianten (Größe, Farbe etc.) */
body#product .product-variants {
  /* Layout der Auswahlfelder */
}

/* Varianten-Labels */
body#product .product-variants .control-label {
  /* Schrift, Abstände */
}

/* Menge + In-den-Warenkorb-Bereich */
body#product .product-actions {
  /* Rahmen, Hintergrund, Layout */
}

/******************************************************
 * FORMULARE & INPUTS
 ******************************************************/

/* Generische Inputs */
.form-control {
  /* border-color: ...; */
  /* background-color: ...; */
  /* color: ...; */
  /* border-radius: ...; */
}

/* Fokuszustand von Inputs */
.form-control:focus {
  /* border-color: ...; */
  /* box-shadow: ...; */
}

/* Formulargruppen */
.form-group {
  /* margin-bottom: ...; */
}

/* Labels */
label {
  /* Schriftgröße, Gewicht */
}

/* Checkboxen / Radio-Buttons */
.custom-checkbox .custom-control-label::before,
.custom-radio .custom-control-label::before {
  /* Rahmen, Größe, Hintergrund für Kontrollkästchen */
}

/******************************************************
 * MELDUNGEN, FEHLER, HINWEISE (.alert-*)
 ******************************************************/
.wishlist-list-item:hover,.wishlist-list-item-default:hover,.wishlist-list-item-title:hover,.wishlist-list-item-link:hover  {color:#e1001a !important;}
.wishlist-list-item p:hover,.wishlist-list-item-default p:hover,.wishlist-list-item-title p:hover,.wishlist-list-item-link p:hover  {color:#e1001a !important;}
.wishlist-list-item a:hover,.wishlist-list-item-default a:hover,.wishlist-list-item-title a:hover,.wishlist-list-item-link a:hover  {color:#e1001a !important;}
.wishlist-list-item li:hover,.wishlist-list-item-default li:hover,.wishlist-list-item-title li:hover,.wishlist-list-item-link li:hover  {color:#e1001a !important;}

.wishlist-list-item,.wishlist-list-item-default,.wishlist-list-item-title,.wishlist-list-item-link  {color:black !important;}
.wishlist-list-item p,.wishlist-list-item-default p,.wishlist-list-item-title p,.wishlist-list-item-link p  {color:black !important;}
.wishlist-list-item a,.wishlist-list-item-default a,.wishlist-list-item-title a,.wishlist-list-item-link a  {color:black !important;}
.wishlist-list-item li,.wishlist-list-item-default li,.wishlist-list-item-title li,.wishlist-list-item-link li  {color:black !important;}

.form-check, .form-check-input, .form-check-label{cursor:pointer;}

/* Checkout - Zahlungsarten sauber und responsiv ausrichten */
#checkout-payment-step .payment__option .form-check-label,
.page-order .payment__option .form-check-label {
    display: flex !important;
    align-items: flex-start;
    gap: 0.75rem;
}

#checkout-payment-step .payment__option .payment-option__content,
.page-order .payment__option .payment-option__content {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

#checkout-payment-step .payment__option .payment-option__content > *,
.page-order .payment__option .payment-option__content > * {
    position: static !important;
    transform: none !important;
    text-indent: 0 !important;
}

#checkout-payment-step .payment__option .ps_checkout-mark,
.page-order .payment__option .ps_checkout-mark {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    margin-inline-end: 0.25rem;
}

#checkout-payment-step .payment__option .payment-option__text,
.page-order .payment__option .payment-option__text {
    flex: 1 1 14rem;
    min-width: 0;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    #checkout-payment-step .payment__option .payment-option__text,
    .page-order .payment__option .payment-option__text {
        flex-basis: 10rem;
    }
}

.js-conditions-to-approve{background-color:#ff373712;border-radius: 5px;padding:5px;transition:all 0.1s;}
.js-conditions-to-approve:hover{background-color:#00500012;}
.payment__option{
transition:all 0.2s;}
.payment__option:hover{
    background-color:#00000008;
}
.alert {
    background-color: #e1001aAA;color:black;font-weight:bold;
  /* border-radius: ...; */
  /* padding: ...; */
}
.form-check-input:checked{
    background-color: #e1001aAA;
    border-color: #e1001aCC;
}
/* Erfolgsmeldungen */
.alert-success {
  /* Hintergrund, Rahmen, Schriftfarbe für Erfolg */
}

/* Fehlermeldungen */
.alert-danger {
  /* Hintergrund, Rahmen, Schriftfarbe für Fehler */
}

/* Warnungen */
.alert-warning {
  /* Hintergrund, Rahmen, Schriftfarbe für Warnung */
}

/* Info-Meldungen */
.alert-info {
  /* Hintergrund, Rahmen, Schriftfarbe für Info */
}

/******************************************************
 * WARENKORB & CHECKOUT
 ******************************************************/

/* Warenkorbcontainer */
body#cart .cart-container {
  /* Hintergrund, Rahmen, Padding */
}

/* Warenkorb-Produktliste */
body#cart .cart-overview,
body#cart .cart-items {
  /* Tabellen- / Listenstil */
}

/* Einzelne Warenkorbposition */
body#cart .cart-item {
  /* Rahmen, Abstand zwischen Positionen */
}

/* Zusammenfassung / Totals */
body#cart .cart-summary {
  /* Hintergrund, Rahmen, Padding etc. */
}

/* Checkout-Schritte */
body#checkout .checkout-step {
  /* Rahmen, Hintergrund, Abstände */
}

/* Aktueller Checkout-Schritt (analog .current) */
body#checkout .checkout-step.-current {
  /* Hervorhebung aktueller Schritt */
}

/******************************************************
 * FOOTER
 ******************************************************/

/* Gesamter Footerbereich */
#footer {
  /* background-color: ...; */

}
.cms-page-link{color:#ffffff;}
/* Footer-Container */
#footer .footer-container {

  /* max-width, margin, padding etc. */
}

/* Footer-Links */
#footer a {
    
  /* Farbe */
}

#footer a:hover {
  /* Hover-Farbe */
}

/* Footer-Blöcke (Kontakt, Kategorien, Infos etc.) */
#footer .block-contact,
#footer .block-links,
#footer .block-categories {
  /* Überschriften, Abstände etc. */
}

/******************************************************
 * BREADCRUMB, PAGINATION & SONSTIGES
 ******************************************************/

/* Breadcrumb-Navigation */
.breadcrumb {
  /* Hintergrund, Rahmen, Padding */
}

/* Pagination-Container */
.pagination {
  /* Zentrierung, Abstände */
}

/* Einzelne Seitenlinks in der Pagination */
.pagination li a,
.pagination .page-item a {
  /* Rahmen, Hintergrund, Farbe */
}

/* Aktuelle Seite in der Pagination
   (ergänzend zu .current siehe oben) */
.pagination .page-item.active > a,
.pagination .page-item.active > span,
.pagination .current {
  /* Hervorhebung aktueller Seite */
}

/* Modale Fenster (z. B. „Produkt zum Warenkorb hinzugefügt“) */
.modal {
  /* Hintergrund Overlay, z-index etc. */
}

/******************************************************
 * SPEZIFISCHE BEREICHE NACH BEDARF
 ******************************************************/

/* CMS-Seiten-Header */
body#cms .page-header {
  /* Überschrift-/Titelstil CMS-Seiten */
}

/* Kontaktformularseite */
body#contact .contact-form {
  /* Formular-Layout Kontakt */
}

/* Newsletter-Block (wenn vorhanden) */
.block_newsletter {
  /* Darstellung Newsletter-Box */
}

/******************************************************
 * DEBUG / HILFSKLASSEN (optional)
 ******************************************************/

/* Hilfsklasse, um temporär Bereiche sichtbar zu machen */
.debug-outline * {
  /* outline: 1px dashed red; */
}


/* ======================================================
   STARTSEITE: H1 unter dem Slider + SEO-Texte im Footerbereich
   ====================================================== */
.page-index .shop-home-layout {
    display: flex;
    flex-direction: column;
}

.page-index .shop-home-layout > #home-slider {
    order: 1;
}

.page-index .shop-home-heading {
    order: 2;
    padding: 1.5rem 0 1rem;
}

.page-index .shop-home-layout > :not(#home-slider):not(.shop-home-heading):not(.shop-home-seo) {
    order: 3;
}

.page-index .shop-home-seo {
    order: 4;
    padding: 2.75rem 0 3.25rem;
}

.page-index .shop-home-heading__inner {
    max-width: 980px;
}

.page-index .shop-home-heading__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a7a7a;
}

.page-index .shop-home-heading__title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.8rem, 2.6vw, 2.65rem);
    line-height: 1.12;
    font-weight: 700;
    color: #1f1f1f;
}

.page-index .shop-home-heading__lead,
.page-index .shop-home-seo__lead {
    margin: 0;
    max-width: 980px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #4f4f4f;
}

.page-index .shop-home-seo__intro {
    max-width: 1180px;
    margin-bottom: 1.75rem;
}

.page-index .shop-home-seo__title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    color: #1f1f1f;
}

.page-index .shop-home-seo__grid {
    align-items: stretch;
}

.page-index .shop-home-seo__card {
    padding: 1.5rem 1.5rem 1rem;
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 0.5rem;
}

.page-index .shop-home-seo__card-title {
    margin: 0 0 0.85rem;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 700;
    color: #1f1f1f;
}

.page-index .shop-home-seo__card p {
    margin: 0 0 1rem;
    line-height: 1.75;
    color: #4f4f4f;
}

.page-index .shop-home-seo__card p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .page-index .shop-home-heading {
        padding: 1.25rem 0 0.75rem;
    }

    .page-index .shop-home-seo {
        padding: 2rem 0 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .page-index .shop-home-heading__eyebrow {
        font-size: 0.82rem;
    }

    .page-index .shop-home-heading__lead,
    .page-index .shop-home-seo__lead,
    .page-index .shop-home-seo__card p {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .page-index .shop-home-seo__card {
        padding: 1.15rem 1rem 0.85rem;
    }
}