/* =====================================================
   STEINESHOP24 - user.css
   Wird per layout_head.html NACH main.min.css geladen.
   Ersetzt die bisherige StyleEdit-CSS vollstaendig.
   ===================================================== */


/* ==========================================================
   A. EHEMALIGE STYLEEDIT-CSS (HanseDaten 2025, bereinigt)
   ========================================================== */

/* Globalen Main-Font definieren */
:root {
    --main-font-family: Lato;
    --main-button-font-weight: 500;
    --main-button-bg-color: #DA9406;
    --main-button-fg-color: #FFFFFF;
    --main-button-text-transform: uppercase;
    --main-button-letter-spacing: 1px;
}


/* --- Allgemeine Anpassungen --- */

img {
    border-radius: 10px;
}

img.img-responsive.center-block {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

span.single-checkbox {
    border-radius: 20%;
}


/* ShopVote-Widget anpassen */
#sv-rbadge-box {
    margin-bottom: 100px;
}


/* --- Header anpassen --- */

#header {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Suchleisten-Button optimieren */
#header .navbar-search [type="submit"] {
    padding-bottom: 0px;
    padding-top: 4px;
}

/* Mega-Menü anpassen */
@media (min-width: 768px) {
    .navbar-collapse .navbar-categories ul.navbar-nav > li.dropdown-more > ul.dropdown-menu > li .enter-category.show-more {
        display: none !important;
    }
}

/* Mobiles Menü fixieren */
#meco-overlay-menu-toggle {
    position: absolute;
}

#header .inside .navbar-brand {
    padding: 5px;
}

@media (min-width: 768px) {
    #header .inside .navbar-brand {
        padding: 0;
        top: -20px;
        position: relative;
    }
    .navbar-brand img, .navbar-brand svg {
        max-height: none;
        max-width: none;
        height: 87%;
    }
}

@media (min-width: 1600px) {
    #header .inside .navbar-brand {
        top: -30px;
    }
    .navbar-brand img, .navbar-brand svg {
        height: 130%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #header #topbar-container .navbar-nav {
        display: flex;
        width: auto;
    }
    #header #topbar-container .navbar-nav > li {
        width: auto;
    }
    #topbar-container .navbar-topbar .navbar-nav > li > a {
        font-size: 12px;
    }
}

#cart-container.navbar-cart > ul > li > a.dropdown-toggle {
    height: 84px;
    padding: 25px 70px 25px 15px;
}

#cart-container.navbar-cart > ul > li > a.dropdown-toggle .cart {
    color: #777777;
    margin-top: 0px;
}

#cart-container.navbar-cart > ul > li > a.dropdown-toggle .gx-cart-basket {
    height: 32px;
    width: 32px;
}

span.products {
    color: #b65d00;
}

@media (min-width: 768px) {
    .container {
        padding-right: 0px;
        padding-left: 0px;
    }
}

.gx-content-zone-col {
    padding-right: 0px;
    padding-left: 0px;
}

.shopping-cart-shipping-payment-text {
    color: #b65d00;
    font-size: 16px;
}

/* Hinweis auf Infinite Scroll verstecken */
.pagination-info a {
    visibility: hidden;
}


/* --- Unterkategorien anpassen --- */

/* Mousehover-Effekt fuer Kategorie- und Unterkategorie-Kacheln, inkl. Startseite */
#texti9itn9yd4 span {
    background: #da9406;
    border-radius: 10px;
    display: block;
}

#texti9itn9yd4 img:hover {
    opacity: 0.5;
    transition: all 500ms ease;
}

.subcategories-listing span.cat-image-container {
    background: #da9406;
    border-radius: 10px;
}

.subcategories-listing img.img-responsive.cat-image:hover {
    opacity: 0.5;
    transition: all 500ms ease;
}


/* --- Footer anpassen --- */

/* Footer Schriftart kraeftiger machen */
#footer {
    font-weight: 400;
}

/* Footer-Padding optimieren */
#footer .inside {
    padding-bottom: 30px;
    padding-top: 0px;
}


/* --- Artikellisten anpassen --- */

.subcategories-listing-container .subcategories-listing .subcategory-item .cat-image {
    max-height: 217.5px;
}

.subcategories-listing-container .subcategories-listing .subcategory-item .cat-image-container {
    border: none;
    height: auto;
}

@media (min-width: 768px) {
    .subcategories-listing-container .subcategories-listing .subcategory-item .cat-image-container {
        height: auto;
    }
}

.productlist-viewmode-grid .product-container {
    border-right: none;
}

.productlist-viewmode-grid .product-container .product-tile .title-description,
.productlist-swiper .product-container .product-tile .title-description,
.product-container.flyover .product-tile .title-description {
    height: 61px;
}

.productlist-viewmode-grid .product-container .product-tile .price-tax .price .current-price-container:before,
.productlist-swiper .product-container .product-tile .price-tax .price .current-price-container:before,
.product-container.flyover .product-tile .price-tax .price .current-price-container:before {
    height: 0px;
}

span.current-price-container {
    color: #b65d00;
}

.current-price-container {
    color: #b65d00;
}

/* Pro-Einheit anpassen - gilt auch fuer Preisbox auf Artikelseite */
.pro-quantity-unit {
    font-size: 16px;
    font-weight: normal;
    color: #777;
}

/* Pro-Einheit anpassen in Preisbox auf Artikelseite */
div.pro-quantity-unit {
    display: block;
    text-align: right;
}


/* --- Filter anpassen --- */

/* Filtereinstellungen in Box darstellen */
.filter-selection-container {
    border-radius: 10px;
    background-color: #F5F5F5;
    padding: 10px;
}

/* Filter-Sidebar in der Mobilversion ausblenden */
@media only screen and (max-width: 768px) {
    .product-listing-sidebar {
        display: none;
    }
}

/* Text neben Filter-Icon platzieren */
.productlisting-filter-container .fa-filter::after {
    content: ' Artikel filtern';
    margin-left: 8px;
    font-family: var(--main-font-family);
    font-weight: var(--main-button-font-weight);
    text-transform: var(--main-button-text-transform);
    letter-spacing: var(--main-button-letter-spacing);
}

/* Filter-Button auf volle Breite setzen */
.productlisting-filter-container .btn {
    display: block;
    color: var(--main-button-fg-color);
    background-color: var(--main-button-bg-color);
    border-color: var(--main-button-bg-color) !important;
    margin-bottom: 40px;
}

/* Filter-Optionen kompakter gestalten */
#filterbox-container form fieldset:first-of-type {
    margin-top: 10px;
    margin-bottom: 0px;
    padding-top: 10px;
}

#filterbox-container .form-horizontal label.control-label.option-heading {
    padding: 0px;
    margin-bottom: 15px;
}

#filterbox-container .form-group {
    margin-top: 20px;
}

#filterbox-container > form > div.filter-box-form-wrapper > div:nth-child(3) > fieldset {
    border-top: none;
}

/* Abstand der Filter-Ueberschrift zum Inhalt in der Mobil-Box verringern */
.box-filter.mfp-ready div.modal-body {
    padding-top: 0px;
}

/* Obere Border der ersten Checkbox im ersten Fieldset auf 0 */
div.filter-box-form-wrapper > div:nth-child(3) > fieldset {
    margin-top: 0px;
    border-top: 0;
}


/* --- Product-List anpassen --- */

/* VPE-Preis verstecken */
.productlist .current-price-container span.gm_products_vpe.products-vpe {
    display: none;
}

.productlist .current-price-container > br {
    display: none;
}

.product-container.flyover .current-price-container span.gm_products_vpe.products-vpe {
    display: none;
}

.product-container.flyover .current-price-container > br {
    display: none;
}


/* --- Preisbox anpassen --- */

/* VPE-Preis groesser darstellen */
.product-info .product-info-details .price-container .current-price-container .gm_products_vpe,
.product-info .product-info-details .price-container .current-price-container .products-vpe {
    font-size: 16px;
}

/* Galeriebilder unterhalb des Artikelbilds anpassen */
.product-info-stage.col-xs-12.col-md-8 {
    height: auto;
    margin-bottom: 0px;
}

.product-info .product-info-image {
    margin-bottom: 10px !important;
}

@media (min-width: 992px) {
    .product-info .product-info-stage {
        padding-left: 15px;
    }
    .product-info .product-info-details {
        padding-top: 0px;
        margin-bottom: 0px;
    }
    .hidden-xs.hidden-sm.product-model.model-number {
        padding-top: 0px;
    }
}

.product-info-thumbnails-mobile {
    padding: 0px;
}

@media (min-width: 768px) {
    .product-info-thumbnails-mobile {
        max-width: 1020px;
    }
    .product-info .product-info-content-wrapper {
        margin-top: 10px;
    }
}

.swiper-wrapper {
    height: auto !important;
}

.product-info-thumbnails-mobile .swiper-slide-inside .align-vertical,
.product-info-layer-thumbnails .swiper-slide-inside .align-vertical,
.product-info-thumbnails-mobile #product_thumbnail_swiper_mobile .swiper-slide-inside .align-vertical,
.product-info-layer-thumbnails #product_thumbnail_swiper_mobile .swiper-slide-inside .align-vertical {
    height: auto;
    padding-bottom: 0px;
    vertical-align: top;
}

.product-info-thumbnails-mobile .swiper-slide {
    height: 97px;
}

@media (min-width: 768px) {
    .product-info-thumbnails-mobile .swiper-slide {
        height: 130px;
    }
}

.product-info-thumbnails-mobile,
.product-info-thumbnails-mobile #product_thumbnail_swiper_mobile,
.product-info-layer-thumbnails,
.product-info-layer-thumbnails #product_thumbnail_swiper_mobile {
    height: auto;
}

.product-info-image .product-info-image-inside .swiper-slide .swiper-slide-inside {
    text-align: left;
}

.product-info-thumbnails-mobile .swiper-slide {
    border-radius: 10px;
}

/* Swiper-Buttons links und rechts anpassen */
@media (min-width: 992px) {
    .js-product_thumbnail_swiper-button-prev.swiper-button-prev {
        margin-left: -40px;
    }
    .js-product_thumbnail_swiper-button-next.swiper-button-next {
        margin-right: -40px;
    }
}

/* Eigenen Disclaimer unter Bildern anpassen */
.product-gallery-disclaimer {
    font-size: 0.85em;
    color: #777;
    margin-top: 10px;
    margin-bottom: 15px;
    display: inline-block;
}


/* --- Jetzt-zahlen-mit-PayPal-Bereich anpassen --- */

/* Text und Button auf volle Breite */
.price-container #paypal-newbutton {
    max-width: none;
    width: 100%;
}

span#paypal-ecsbutton {
    border-radius: 10px;
}


/* ==========================================================
   B. WEBSITE-OPTIMIERUNGEN 2026-02-22
   ========================================================== */


/* --- B1. Safari Megamenu Fix ---
   Problem: Dropdown-Menues werden in Safari vom Slider ueberdeckt,
   weil #categories keinen Stacking Context bildet.
   ------------------------------------------------------------ */

#categories {
    position: relative;
    z-index: 100;
}


/* --- B2. Telefon-Overlay Redesign ---
   Vorher: Altes PNG-Bild in grauem Kreis (Gambio-Tuning Slider).
   Nachher: Moderner FAB-Button im Brand-Orange,
   expandiert bei Hover und zeigt die Telefonnummer.
   Position: Oben rechts, fixiert.

   HINWEIS: Falls "right: 20px" nicht greift (weil main.min.css
   einen left-Wert mit !important setzt), stattdessen die
   auskommentierte calc()-Variante verwenden.
   ------------------------------------------------------------ */

#calll {
    position: fixed !important;
    top: 20px !important;
    bottom: auto !important;
    /* Variante A: Standard (testen ob es greift) */
    right: 20px !important;
    left: auto !important;
    /* Variante B: Falls Variante A nicht funktioniert, diese 3 Zeilen
       einkommentieren und Variante A auskommentieren:
    left: calc(100vw - 285px) !important;
    right: auto !important;
    width: 265px !important;
    */
    width: auto !important;
    height: auto !important;
    z-index: 99999;
}

#calll .calll {
    display: flex;
    justify-content: flex-end;
}

#calll .calll a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #B65D00;
    border-radius: 28px;
    box-shadow: 0 4px 14px rgba(182, 93, 0, 0.4);
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease;
    position: relative;
}

#calll .calll a:hover {
    width: 265px;
    padding-left: 16px;
    justify-content: flex-start;
    box-shadow: 0 6px 24px rgba(182, 93, 0, 0.5);
}

#calll .calll a img {
    display: none !important;
}

/* Telefon-Icon (SVG) */
#calll .calll a::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Telefonnummer (erscheint bei Hover) */
#calll .calll a::after {
    content: '06227 789 33 99 11';
    color: white;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                margin 0.35s ease;
}

#calll .calll a:hover::after {
    max-width: 200px;
    opacity: 1;
    margin-left: 12px;
    margin-right: 20px;
}

/* Mobil: Kein Hover-Expand, nur Icon-Button */
@media (max-width: 767px) {
    #calll {
        top: 12px !important;
        /* Variante B mobil:
        left: calc(100vw - 62px) !important;
        width: 50px !important;
        */
    }
    #calll .calll a {
        width: 50px;
        height: 50px;
    }
    #calll .calll a::before {
        margin-left: 0;
        width: 22px;
        height: 22px;
    }
    #calll .calll a:hover {
        width: 50px;
    }
    #calll .calll a:hover::after {
        max-width: 0;
        opacity: 0;
        margin: 0;
    }
}


/* --- B3. Footer Zahlungsarten-Leiste ---
   Neue Leiste mit SVG-Icons oberhalb der Footer-Spalten.
   ------------------------------------------------------------ */

/* Whitespace zwischen Versandpauschale-Banner und Zahlungsarten entfernen */
#footer .footer-header,
#footer .footer-header > div {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#footer .payment-icons-bar {
    margin-top: -10px;
    position: relative;
    z-index: 1;
}

.payment-icons-bar {
    background: #f5f5f3;
    border-top: 1px solid #e0dfdb;
    border-bottom: 1px solid #e0dfdb;
    padding: 14px 0;
    text-align: center;
}

.payment-icons-bar .payment-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.payment-icons-bar .payment-label {
    font-size: 13px;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-right: 10px;
}

.payment-icons-bar .payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.payment-icons-bar .payment-icon svg {
    display: block;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.payment-icons-bar .payment-icon:hover svg {
    opacity: 1;
}

/* Alte Zahlungsarten-Bilder im Footer ausblenden
   (die PNGs in footer-col-3 / Content-Element 4321006) */
#footer .footer-col-3 .panel-body img[src*="sepa"],
#footer .footer-col-3 .panel-body img[src*="sofort"],
#footer .footer-col-3 .panel-body img[src*="paypal"],
#footer .footer-col-3 .panel-body img[src*="spedition"] {
    display: none;
}


/* --- B4. Versandarten-Kacheln im Footer ---
   Ersetzen die alten Zahlungs-PNGs in Spalte 3.
   ------------------------------------------------------------ */

.shipping-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.shipping-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f7f5;
    border: 1px solid #e8e7e3;
    border-radius: 6px;
    transition: border-color 0.2s ease;
}

.shipping-tile:hover {
    border-color: #B65D00;
}

.shipping-tile .shipping-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipping-tile .shipping-icon svg {
    width: 24px;
    height: 24px;
}

.shipping-tile .shipping-info {
    display: flex;
    flex-direction: column;
}

.shipping-tile .shipping-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

.shipping-tile .shipping-detail {
    font-size: 11px;
    color: #888;
    line-height: 1.3;
    margin-top: 1px;
}


/* --- B5. Footer Trust-Bar ---
   Vertrauenssignale zwischen Zahlungsarten und Footer-Spalten.
   ------------------------------------------------------------ */

.footer-trust-bar {
    background: #f5f5f3;
    border-bottom: 1px solid #e0dfdb;
    padding: 10px 0;
    text-align: center;
}

.footer-trust-bar .trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-trust-bar .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.footer-trust-bar .trust-item svg {
    flex-shrink: 0;
}

.footer-trust-bar .trust-sep {
    color: #bbb;
    font-size: 18px;
    line-height: 1;
}


/* --- B6. Mobile Optimierungen ---
   Kompaktere Darstellung auf Smartphones.
   ------------------------------------------------------------ */

@media (max-width: 767px) {
    /* Versandpauschale-Banner: Schrift etwas verkleinern */
    #footer .footer-header {
        padding-top: 8px !important;
    }
    #footer .footer-header span,
    #footer .footer-header div {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /* Zahlungsarten kompakter */
    #footer .payment-icons-bar {
        padding: 10px 0;
        margin-top: -5px;
    }
    .payment-icons-bar .payment-inner {
        gap: 6px;
        padding: 0 12px;
    }
    .payment-icons-bar .payment-label {
        width: 100%;
        margin-bottom: 2px;
        margin-right: 0;
        font-size: 10px;
        letter-spacing: 1px;
    }
    .payment-icons-bar .payment-icon svg {
        width: 64px;
        height: 40px;
    }

    /* Trust-Bar kompakter */
    .footer-trust-bar {
        padding: 10px 0;
    }
    .footer-trust-bar .trust-inner {
        gap: 4px 18px;
    }
    .footer-trust-bar .trust-item {
        font-size: 12px;
    }
    .footer-trust-bar .trust-item svg {
        width: 14px;
        height: 14px;
    }
    .footer-trust-bar .trust-sep {
        display: none;
    }
}