/* ===================================================================
   SD24 – PRODUKTDETAILSEITE (PDP)  –  MINIFY / Deferred CSS
   PageType: 1
   ----------------------------------------------------------------
   Below-the-fold & interaktionsabhängige Styles.
   Kritische Inline-Styles → inline/productdetailseite/produktdetailseite.css
   ----------------------------------------------------------------
   Sections:
     1  Mengen-Gruppe (Styling)
     2  Artikelzursetzen / MatrixLabel
     3  Stock & Lieferstatus
     4  Shop-Vorteile
     5  Tabs & Produktbeschreibung
     6  Galerie-Thumbnails & Dots
     7  Mobiler Sticky-Warenkorb
     8  Matrix-Kopie-Wrapper
     9  Modal / Popup
    10  Konfigurator
    11  Loading-Spinner & Keyframes
    12  Variationsmatrix (Tabelle)
    13  Utilities / PayPal / Sonstiges
    14  Responsive Below-Fold
    15  varSpinner Overlay
   =================================================================== */


/* ─── 1. MENGEN-GRUPPE (Styling) ─────────────────────────────────── */

[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .buy-wrapper #add-to-cart #quantity-grp > .btn-group .btn:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .buy-wrapper #add-to-cart #quantity-grp > .btn-group .btn:first-child {
    border-top-left-radius: var(--sd-radius-base);
    border-bottom-left-radius: var(--sd-radius-base);
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .buy-wrapper #add-to-cart #quantity-grp > .btn-group .btn.btn-blank {
    padding: 0;
    width: 80%;
    justify-content: center;
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .buy-wrapper #add-to-cart #quantity-grp > .btn-group #quantity { padding: 0.25rem; }

@media (min-width: 992px) and (max-width: 1199.98px) {
    [data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .buy-wrapper #add-to-cart #quantity-grp { height: 50px; margin-bottom: 0.5rem; }
}
@media (max-width: 767.98px) {
    [data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .buy-wrapper #add-to-cart #quantity-grp { height: 50px; margin-bottom: 0.5rem; }
}

/* Qty +/- Buttons */
.btn.btn-blank.qty-sub { border-radius: var(--sd-radius-base) 0 0 var(--sd-radius-base) !important; }

@media (max-width: 768px)  { .btn.btn-blank.qty-add { border-radius: 0 var(--sd-radius-base) var(--sd-radius-base) 0 !important; } }
@media (min-width: 769px)  { .btn.btn-blank.qty-add { border-radius: 0 !important; } }

@media (max-width: 1199px) {
    div#quantity-grp { width: 100%; }
    .btn.btn-blank.qty-add { border-radius: 0 var(--sd-radius-base) var(--sd-radius-base) 0 !important; }
    [data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .buy-wrapper #add-to-cart #quantity-grp > .btn-group .btn.btn-blank {
        padding: 0;
        width: 50% !important;
        justify-content: center;
    }
    div#bc-Mobil { position: absolute; z-index: 2; }
}


/* ─── 2. ARTIKELZURSETZEN / MATRIX LABEL ─────────────────────────── */

[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .artikelzursetzen {
    margin-bottom: 0.5rem;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 1rem;
}

[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .artikelzursetzen .kvaterurl,
[data-page="1"] #buy_form #product-offer .product-info #matrixLabel,
[data-page="1"] #buy_form #product-offer .product-info .artikelzursetzen .angebot {
    background: #f0f0f0 !important;
    color: var(--sd-text) !important;
    padding: .875rem 1rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    border-radius: var(--sd-radius-base) !important;
    margin-top: 0;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid var(--sd-border-subtle) !important;
    font-size: .75rem !important;
    height: 45px !important;
}

.angebot:hover, .kvaterurl:hover, #matrixLabel:hover {
    transition: none !important;
    border: 1px solid var(--sd-primary) !important;
}
label.angebot:hover   { box-shadow: var(--sd-shadow-hover); }
[data-page="1"] #matrixLabel:hover { box-shadow: var(--sd-shadow-hover); }

[data-page="1"] .kvaterurl svg, [data-page="1"] #matrixLabel svg { padding-right: 5px; }

.angebotanfordern { display: flex; align-items: center; gap: 5px; }
.matrissammel path { fill: var(--sd-text) !important; }

/* Matrix-Modal */
[data-page="1"] #buy_form #product-offer .product-info > .wr-info #matrix-item .modal-dialog .modal-content { max-width: 85rem; }
[data-page="1"] #buy_form #product-offer .product-info > .wr-info #matrix-item .modal-dialog .modal-content .modal-body .btn.btn-primary {
    width: 30%;
    justify-content: center;
    margin-top: 0.25rem;
    float: right;
}
@media (max-width: 767.98px) {
    [data-page="1"] #buy_form #product-offer .product-info > .wr-info #matrix-item .modal-dialog .modal-content .modal-body .btn.btn-primary { width: 60%; }
}

/* SVGs in Buttons */
.btn.btn-primary svg, .btn.active svg, .btn-social svg { fill: var(--sd-text) !important; }


/* ─── 3. STOCK & LIEFERSTATUS ───────────────────────────────────── */

[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential {
    padding-bottom: 1rem;
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .delivery-status {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 700;
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .delivery-status .status-2 {
    color: var(--sd-text);
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .delivery-status .alert-info.estimated-delivery {
    background: #FFF;
    color: var(--sd-text);
    padding: 0;
    font-size: 1rem;
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .delivery-status .alert-info.estimated-delivery .deliverytooltiptext {
    background: #FFF;
    color: var(--sd-text);
    padding: 0;
    font-size: .825rem;
    margin-left: 30px;
}

[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .blanklist {
    line-height: 1.5;
    margin-top: 1rem;
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .blanklist > .nav-it > strong,
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .blanklist > .nav-it > a,
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .blanklist > .nav-it > span { font-size: 1rem; }

@media (min-width: 768px) and (max-width: 991.98px) {
    [data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .blanklist > .nav-it > strong,
    [data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .blanklist > .nav-it > a,
    [data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .info-essential .blanklist > .nav-it > span { font-size: 0.875rem; }
}

.delivery-status.small { border-radius: var(--sd-radius-base) !important; padding-top: 10px; }

span.status.status-2.icon-wt { display: flex; align-content: center; gap: 5px; }

.deliverytooltip { position: relative; display: inline-block; }
.deliverytooltip span { vertical-align: middle; }
.deliverytooltip .deliverytooltiptext {
    visibility: hidden;
    background-color: var(--sd-text);
    color: var(--sd-text-inverse);
    text-align: center;
    border-radius: var(--sd-radius-base);
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
    font-size: 0.8rem;
}
.deliverytooltip .deliverytooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--sd-text) transparent;
}
.deliverytooltip:hover .deliverytooltiptext { visibility: visible; }

.delivery-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--sd-radius-pill);
    cursor: help;
}
.delivery-info-icon svg { fill: var(--sd-text); }

.stock-flex { display: flex; flex-direction: column; margin-bottom: 15px; }
.status i.fa.fa-truck { margin-right: 5px; }

.alert-hotstock {
    background: none !important;
    color: var(--sd-primary);
    padding: .45rem 1rem !important;
    font-size: 0.85rem;
    border-radius: var(--sd-radius-base);
    border: none !important;
}


/* ─── 4. SHOP-VORTEILE ──────────────────────────────────────────── */

.pd-vorteile {
    border: 1px solid var(--hr-li) !important;
    padding: 15px;
    border-radius: var(--sd-radius-base);
}

.shopvorteile {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-weight: normal;
}
.shopvorteile i  { margin-right: 0 !important; color: green; display: flex; align-items: center; }
.vorteile-flex   { display: flex; align-items: center; gap: 5px; }

.shopvorteile-modern { border-top: 1px solid var(--sd-border-faint); margin: 20px 0; }

.vorteil-item          { display: flex; align-items: center; padding: 8px 0; cursor: default; }
.vorteil-item.sub-item { padding-top: 0; margin-top: -6px; }
.vorteil-item-progressbar { padding: 5px 0 15px; }
.vorteil-item:hover    { background-color: #fcfcfc; }

.vorteil-icon    { margin-right: 15px; min-width: 24px; display: flex; justify-content: center; font-size: 18px; }
.vorteil-content { display: flex; flex-direction: column; }

.vorteil-text         { font-size: 14px; font-weight: 700; color: var(--sd-text); line-height: 1.2; }
.vorteil-text.small   { font-size: 12px; font-weight: 600; color: var(--sd-text); }
.vorteil-subtext      { font-size: 12px; color: #666; font-weight: 400; margin-top: 2px; }

.vorteil-row-delivery { justify-content: space-between; gap: 10px; }
.vorteil-left  { display: flex; align-items: center; gap: 15px; min-width: 0; }
.vorteil-right { display: flex; align-items: center; margin-left: auto; }

/* Shipping-Progress */
[data-page="1"] .shipping-cost-progress-bar__outercontainer {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--sd-border-faint);
    border-radius: var(--sd-radius-base);
    margin-top: 10px;
    background: rgba(0,0,0,.05);
}
[data-page="1"] .shipping-cost-progress-bar__container {
    background-color: #FFF;
    margin: 10px 30px;
    position: relative;
    border-radius: var(--sd-radius-base);
}
[data-page="1"] .shipping-cost-progress-bar {
    height: 12px;
    background-color: var(--sd-primary);
    border-radius: var(--sd-radius-base);
}
[data-page="1"] .shipping-cost-progress-bar__heading  { text-align: center; }
[data-page="1"] .shipping-cost-progress-bar__bottom   { text-align: center; font-size: 12px; }
[data-page="1"] .shipping-cost-progress-bar__label    { position: absolute; top: 52%; transform: translateY(-50%); font-size: 12px; }
[data-page="1"] .shipping-cost-progress-bar__label.left  { left: -30px; }
[data-page="1"] .shipping-cost-progress-bar__label.right { right: -40px; }
[data-page="1"] .shipping-cost-progress-bar__fehlbetrag    { color: var(--sd-primary); font-weight: 700; }
[data-page="1"] .shipping-cost-progress-bar__gratisversand { color: green; font-weight: 700; font-size: 20px; vertical-align: middle; }
[data-page="1"] .gratisgreen { background-color: green; }


/* ─── 5. TABS & PRODUKTBESCHREIBUNG ─────────────────────────────── */

#article-tabs .tab-pane {
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    transition: none !important;
}

[data-page="1"] #tab-wp,
[data-page="1"] #tab-wp {
    text-align: left;
    width: 100%;
}
[data-page="1"] #tab-wp .panel-body,
[data-page="1"] #tab-wp .panel-body {
    text-align: left;
}
[data-page="1"] #tab-wp .tab-ct,
[data-page="1"] #tab-wp .tab-ct {
    text-align: left;
    max-width: 100%;
}
[data-page="1"] #tab-wp .panel-heading,
[data-page="1"] #tab-wp .panel-heading {
    text-align: left;
}
[data-page="1"] #tab-wp .desc,
[data-page="1"] #tab-wp .desc {
    text-align: left;
}
[data-page="1"] #tab-wp .product-attributes,
[data-page="1"] #tab-wp .product-attributes {
    text-align: left;
}
[data-page="1"] #article-tabs,
[data-page="1"] #article-tabs {
    text-align: left;
    width: 100%;
}
[data-page="1"] #tab-wp .tab-content,
[data-page="1"] #tab-wp .tab-content {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

[data-page="1"] #tab-wp #article-tabs .tab-ct > .panel-heading {
    padding: 1.5rem 0;
    border-top: 1px solid var(--sd-border-faint);
    border-bottom: none;
}
[data-page="1"] #tab-wp #article-tabs .tab-ct > .panel-heading .panel-title.h3 { font-size: 1.25rem; }

[data-page="1"] #tab-wp #tab-merkmal .product-attributes {
    border: none;
    border-radius: var(--sd-radius-base);
}

@media (min-width: 992px) {
    [data-page="1"] #tab-wp #tab-merkmal .product-attributes { margin-bottom: 2rem; }
}
@media (min-width: 500px) and (max-width: 991.98px) {
    [data-page="1"] #tab-wp #tab-merkmal .product-attributes { margin-top: 2rem; }
}
@media (max-width: 499.98px) {
    [data-page="1"] #tab-wp #tab-merkmal .product-attributes { margin-top: 2rem; }
}

[data-page="1"] .tab-ct.show > .panel-body { margin-top: 0; }

/* Nav-Tabs – flacher Underline-Stil */
[data-page="1"] #tab-wp .nav-tabs {
    border-bottom: 1px solid var(--sd-border-faint);
    gap: 0;
    margin-bottom: 1.5rem;
    overflow-y: hidden;
}
[data-page="1"] #tab-wp .nav-tabs .nav-link,
[data-page="1"] .nav-tabs > li > a {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: #606060;
    font-weight: normal;
    padding: 10px 16px;
    margin-bottom: -1px;
    margin-right: 0;
    margin-top: 0;
}
[data-page="1"] #tab-wp .nav-tabs .nav-link.active,
[data-page="1"] #tab-wp .nav-tabs .nav-link:hover,
[data-page="1"] .nav-tabs > li.active > a,
[data-page="1"] .nav-tabs > li.active > a:hover,
[data-page="1"] .nav-tabs > li.active > a:focus {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--sd-primary) !important;
    color: #333 !important;
    font-weight: bold;
    cursor: default;
}
[data-page="1"] #tab-wp .nav-tabs .nav-link:hover:not(.active) {
    color: #333 !important;
    font-weight: normal;
}
[data-page="1"] div.tabbable ul.nav.nav-tabs { display: block; }
[data-page="1"] .nav-tabs > li { float: left; display: block; }

[data-page="1"] .kk-popup-modal-body { scrollbar-width: thin; }

/* Produktattribute */
.product-attributes.blanklist.p-att li { padding: 0.3rem; }
.p-att li:nth-child(2n) { background: #fff; }

@media screen and (max-width: 767px) { [data-page="1"] .p-att .first { width: 10rem; min-width: 10rem; } }
@media screen and (max-width: 699px) { [data-page="1"] .p-att li { flex-wrap: nowrap; } }

[data-page="1"] .firstSlider h3 {
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    [data-page="1"] .firstSlider h3 { font-size: 1rem; }
}

[data-page="1"] .nosto_element {
    border-top: 1px solid var(--sd-border-faint);
    border-bottom: none;
    padding: 1.5rem 0;
}

/* Tab-Navigation: horizontaler Slider – kein Umbruch, kein Scrollbalken sichtbar */
[data-page="1"] #tab-wp .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
}
[data-page="1"] #tab-wp .nav-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
[data-page="1"] #tab-wp .nav-tabs .nav-item { flex-shrink: 0; }

/* Akkordeon-Toggle ausblenden – Navigation läuft immer über Tabs */
[data-page="1"] #tab-wp #article-tabs .tab-ct > .panel-heading { display: none !important; }

/* Bootstrap Collapse fügt dynamisch .collapse zur Tab-Pane hinzu – das würde aktive
   Panes verstecken (.collapse:not(.show)). Dieses Override stellt sicher dass die
   aktive Pane immer sichtbar ist. */
[data-page="1"] #tab-wp #article-tabs .tab-pane.active { display: block !important; }


/* ─── 6. GALERIE-THUMBNAILS & DOTS ──────────────────────────────── */

@media (min-width: 768px) {
    #gallery-thumbs.two-cols {
        display: flex !important;
    }
}

#gallery-thumbs .img-w.active .img-ct,
#gallery-thumbs .img-w:hover .img-ct { border: 2px solid var(--sd-text); box-shadow: none; border-radius: var(--sd-radius-base); }
#gallery-thumbs .img-ct              { border: 1px solid var(--sd-border-subtle); box-shadow: none; border-radius: var(--sd-radius-base); }

input#rew556764 {
    display: none;
}

/* Mobile Dots */
[data-page="1"]:not(.lightbox-shown) #gallery-thumbs.mobil_gallery-thumbs {
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: .5rem;
    order: unset !important;
    width: 100%;
    padding: 0;
    float: none;
}
[data-page="1"] #gallery-thumbs.mobil_gallery-thumbs .img-w { width: 8px; height: 8px; margin: 3px; border-radius: var(--sd-radius-pill); overflow: hidden; }
[data-page="1"] #gallery-thumbs.mobil_gallery-thumbs .img-w .img-ct { background: #b5b5b5; box-shadow: none; width: 100%; height: 100%; border-radius: var(--sd-radius-pill); border: none !important; }
[data-page="1"] #gallery-thumbs.mobil_gallery-thumbs .img-w .img-ct img { display: none; }
[data-page="1"] #gallery-thumbs.mobil_gallery-thumbs .img-w.active .img-ct { background: var(--sd-text); }

#dotsMobil {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0.5rem 0;
    list-style: none;
    gap: 4px;
}
#dotsMobil > li { display: inline-flex; }
#dotsMobil > li.active svg { fill: var(--sd-text); opacity: .75; }
#dotsMobil > li svg        { fill: var(--sd-text); opacity: .25; }

[data-page="1"] .product-gallery span.overlay-img.ribbon { display: none; }

/* Bild-Overlay */
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .price_wrapper .nav-it .img-ct.icon.icon-xl {
    width: 60px;
    height: 40px;
    margin-right: 0;
}


/* ─── 7. MOBILER STICKY-WARENKORB ───────────────────────────────── */

[data-page="1"] #warenkorbBtnKopieWrapper {
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1200;
    width: 100%;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    padding: 0.6rem 1rem;
}
@media (min-width: 992px) { [data-page="1"] #warenkorbBtnKopieWrapper { display: none; } }

/* Sticky-Button Einblend-Animation */
#warenkorbBtnKopieWrapper.warenkorbBtnKpWrapper {
    display: block !important;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    will-change: opacity, transform;
}
#warenkorbBtnKopieWrapper.warenkorbBtnKpWrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper { display: flex; flex-flow: column; }
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp {
    max-height: 52px;
    height: 52px;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 10px;
}
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp .bildWrapper > img { width: 57%; max-width: 100%; }
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp .grWrapper {
    flex: 6 6;
    padding: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp .grWrapper p { font-size: 1.1rem; margin: 0; text-align: center; }

[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp #warenkorbBtnKopie {
    flex: 50% !important;
    padding: 0.5rem 0.25rem;
    border-radius: var(--sd-radius-pill);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp #warenkorbBtnKopie .text { letter-spacing: 0.3px; }

@media (max-width: 380px) {
    [data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp #warenkorbBtnKopie .text { font-size: 14px; }
}

[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp #warenkorbBtnKopie.withSize { font-size: 1.25rem; }
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp #warenkorbBtnKopie.withSize .text { display: none; }
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp.wrkWithoutVariation-btn #warenkorbBtnKopie {
    padding: 0.85rem 0.25rem;
    border-radius: var(--sd-radius-pill) !important;
    justify-content: center;
}

[data-page="1"] .flexwkcopy {
    display: flex;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: var(--sd-radius-pill);
    flex: 50%;
    background: #f8f8f8;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp .bildWrapper {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem;
    border-top-left-radius: var(--sd-radius-pill);
    border-bottom-left-radius: var(--sd-radius-pill);
    border-right: 1px solid rgba(0,0,0,0.08);
}

[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp .flexwkcopy:not(:has(#sizeAnchor)) .bildWrapper {
    flex: 0 0 100%;
    border-radius: var(--sd-radius-pill);
    border-right: none;
}
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .wrkWrp .flexwkcopy:not(:has(#sizeAnchor)) .bildWrapper > img {
    width: 25%;
    max-width: 40px;
}

[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .pyp-btn {
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--sd-border-faint);
    border-radius: var(--sd-radius-base);
    text-align: center;
    font-size: 0.87rem;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: end;
}
[data-page="1"] #warenkorbBtnKopieWrapper .spotDealInfoWrapper .pyp-btn > span { margin-right: 8px; }


/* ─── 8. MATRIX-KOPIE-WRAPPER ───────────────────────────────────── */

[data-page="1"] #matrixKopieWrapper {
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1200;
    width: 100%;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    padding: 0.75rem 1rem;
}
@media (min-width: 992px) { [data-page="1"] #matrixKopieWrapper { display: none; } }
[data-page="1"] #matrixKopieWrapper #matrixBtnKopie { width: 100%; justify-content: center; }


/* ─── 9. MODAL / POPUP ──────────────────────────────────────────── */

li.overlay-bg.sd-modal-overlay {
    position: fixed;
    inset: 0;
    display: block;
    z-index: 1040;
    background: rgba(0,0,0,.55);
    list-style: none;
    margin: 0;
    padding: 0;
}
.kk-popup-modal.show { z-index: 1050; }
.kk-popup-modal--custom-width {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.7) !important;
    margin: 0;
}
.kk-popup-modal-header.no-close-btn button[data-dismiss="modal"] { font-size: 0 !important; pointer-events: all; }
.kk-popup-content { padding: 10px; }
button.kk-popup-modal-close.close {
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}
.form-check { display: flex; gap: 5px; }

/* Modal-Stack fix */
[data-page="1"].modal-open .product-info {
    z-index: 11;
    top: 150px !important;
}


/* ─── 10. KONFIGURATOR ───────────────────────────────────────────── */

[data-page="1"] #config-popup #cfg-container {
    padding: 1rem;
    border-radius: .5rem;
    background: var(--sd-bg-light);
    box-shadow: 0 0 0 .3rem var(--sd-bg-light);
}
[data-page="1"] #config-popup #cfg-container .cfg-group .panel-body .group-items > .list-group { flex-flow: row wrap; }

[data-page="1"] #product-configuration-sidebar .table.table-striped tbody tr:nth-of-type(odd) { background-color: var(--sd-bg-light); }
[data-page="1"] #product-configuration-sidebar tr#inhaltFooterNewsummary { border-bottom: none; }
[data-page="1"] #product-configuration-sidebar #inhaltFooterNewsummary > td { border-bottom: 1px solid var(--sd-border-faint); }
[data-page="1"] #product-configuration-sidebar .inputText { width: fit-content; font-weight: 600; }

[data-page="1"] #product-configurator .freifeldVarWrp .var-it .var-head { font-size: 0.875rem; font-weight: 400; }
[data-page="1"] #product-configurator .cfg-group.panel .cfg-group-info.sticky-top { z-index: 11; top: -2rem; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items { margin-bottom: 1rem; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items .list-group { margin-left: -0.5rem; margin-right: -0.5rem; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items .list-group-item { background: transparent; border: none; padding: 0.5rem; }
[data-page="1"] #product-configurator .cfg-group.panel.farbe .group-items .list-group-item { padding: 0; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items .var-it.gebFFkp { display: none; padding: 0 .5rem; margin: 4px auto; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items .var-it.gebFFkp .inpFFkp::placeholder { font-size: 0.775rem; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items .list-group-item .block.cfg-ct { background: white; }
[data-page="1"] #product-configurator .cfg-group.panel.farbe .group-items .list-group-item .block.cfg-ct .img-ct { width: 75%; margin: 0 auto; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items .list-group-item .block.cfg-ct .caption .block.text { font-size: 0.875rem; min-height: 45px; }

@media (max-width: 767.98px) {
    [data-page="1"] #product-configurator .cfg-group.panel .group-items .list-group-item .block.cfg-ct .caption .block.text { font-size: 0.72rem; }
}

[data-page="1"] #product-configurator .cfg-group.panel .group-items .list-group-item .block.cfg-ct .caption .dropdown.desc-dd { position: absolute; top: 1px; right: 0; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items .list-group-item .block.cfg-ct .caption .dropdown.desc-dd.show .dropdown-menu.big.show { z-index: 15; }
[data-page="1"] #product-configurator .cfg-group.panel .group-items .list-group-item .block.cfg-ct .caption .block.gebFF {
    color: #636262;
    font-size: 0.875rem;
    padding: 0.5rem;
    border: 1px solid var(--sd-primary);
    border-radius: var(--sd-radius-base);
}

/* Konfigurator-Spinner */
#product-configuration-sidebar > .panel { position: relative; }
#product-configuration-sidebar #varSpinnerKonf {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 10px; height: 10px;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    z-index: 9999;
    opacity: 1 !important;
    pointer-events: none;
}
#product-configuration-sidebar #varSpinnerKonf.active  { display: flex; }
#product-configuration-sidebar #varSpinnerKonf.notActive { display: none; }

#product-configuration-sidebar .swatches.is-loading {
    filter: blur(2px) !important;
    opacity: 0.65 !important;
    transition: filter .12s ease, opacity .12s ease;
    will-change: filter;
}


/* ─── 11. LOADING-SPINNER & KEYFRAMES ────────────────────────────── */

#varSpinner {
    position: absolute;
    left: 50%;
    transform: translateY(50px);
    z-index: 12;
    display: none !important;
}
#varSpinner::before {
    content: "";
    position: absolute;
    inset: -20px;
    background: rgba(255,255,255,.5);
    border-radius: var(--sd-radius-pill);
    z-index: -1;
}
@media (max-width: 768px) {
    #varSpinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999; }
}

#product-configuration-sidebar #varSpinnerKonf svg,
#varSpinner svg {
    animation: sd-loading-rotate 2s linear infinite;
    height: 42px;
    width: 42px;
}
#product-configuration-sidebar #varSpinnerKonf .path,
#varSpinner .path {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--sd-primary);
    stroke-linecap: round;
    animation: sd-loading-dash 1.5s ease-in-out infinite;
}

@keyframes sd-loading-rotate {
    to { transform: rotate(1turn); }
}

@keyframes sd-loading-dash {
    0%  { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40px; }
    to  { stroke-dasharray: 90, 150; stroke-dashoffset: -120px; }
}


/* ─── 12. VARIATIONSMATRIX (Tabelle) ─────────────────────────────── */

table.variation-matrix thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}
table.variation-matrix thead th, table.variation-matrix tbody td {
    flex: 1 auto;
}
table.variation-matrix tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 55vh;
}
table.variation-matrix thead tr, table.variation-matrix tbody tr {
    display: flex;
}
table.variation-matrix tbody tr td, table.variation-matrix thead tr th {
    width: 100px;
    word-wrap: break-word;
}
table.variation-matrix thead tr th:first-child, table.variation-matrix tbody tr td:first-child {
    width: 150px !important;
}

.mtrx .status       { font-size: 0.65rem; }
.mtrx .add          { font-size: 0.65rem; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0.3rem; border-bottom-left-radius: 0.3rem; justify-content: space-around; padding: 0 0.4rem; }
.mtrx .input-group  { flex-direction: column; justify-content: space-evenly; margin: 7px auto 5px auto; max-width: 100px; }
.mtrx .delivery-status { margin: auto; text-align: center; }
.mtrx .delivery-status .icon-wt { margin: auto !important; }
.mtrx .img-ct       { min-width: 60px; }
.mtrx .not-available { font-size: 11px; margin: auto; }
.mtrx .variation-matrix td, .mtrx .variation-matrix th { border: none !important; }
.mtrx .form-control { width: 100%; }
.mtrx .forminline   { display: flex; justify-content: space-evenly; }

table.variation-matrix input.form-control {
    padding: 0.2rem 0.5rem;
    border-top-right-radius: 0.3rem !important;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0;
}

.farbvariante { font-size: 0.7rem; display: block; white-space: nowrap; overflow: hidden; }
td.vcenter        { text-align: center; }
td.not-available  { text-align: center; vertical-align: middle; }

.modal-dialog .modal-body > :only-child { margin: 0; }
.mt-xs { margin-top: 1rem; }

div#matrix-item.modal.fade.mod-frm.show div.modal-dialog div.modal-content div.modal-body {
    max-height: none;
}

@media screen and (max-width: 767px) {
    div.table-responsive.w100.mtrx { max-height: 65vh !important; }
    .variation-matrix { margin-top: 0 !important; }
}


/* ─── 13. UTILITIES / PAYPAL / SONSTIGES ─────────────────────────── */

/* PayPal-Buttons */
@media screen and (min-width: 992px) {
    [data-page="1"] .ppc-standalone-buttons:first-of-type { padding-right: 0.3rem !important; }
    [data-page="1"] .ppc-standalone-buttons:last-of-type  { padding-left: 0.3rem !important; }
}
@media screen and (min-width: 768px) {
    [data-page="1"] #paypal-button-productDetails-container { width: 100% !important; }
}
@media screen and (min-width: 768px) and (max-width: 991.87px) {
    [data-page="1"] .ppc-standalone-buttons:first-of-type { padding-right: 8px !important; max-width: 50%; }
    [data-page="1"] .ppc-standalone-buttons:last-of-type  { padding-left: 8px !important; max-width: 50%; }
}
@media screen and (max-width: 767px) {
    #productDetails-ppc-paypal-standalone-button,
    #productDetails-ppc-paylater-standalone-button { max-width: 50%; }
}
@media screen and (max-width: 991.87px) {
    [data-page="1"] #paypal-button-productDetails-container { width: 100% !important; }
    [data-page="1"] .ppc-standalone-buttons:first-of-type { padding-right: 4px !important; }
    [data-page="1"] .ppc-standalone-buttons:last-of-type  { padding-left: 4px !important; }
    .inside.m0.w100 .ppc-standalone-buttons:first-of-type,
    .inside.m0.w100 .ppc-standalone-buttons:last-of-type  { padding-right: 0 !important; padding-left: 0 !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    [data-page="1"] #paypal-button-productDetails-container { width: 100% !important; }
}
@media (min-width: 992px) {
    [data-page="1"] #productDetails-ppc-paypal-standalone-button { padding-right: 0.5rem; }
    [data-page="1"] #productDetails-ppc-paylater-standalone-button { padding-left: 0.5rem; }
}
[data-page="1"] #ppc-productDetails-instalment-banner { margin-bottom: 0.5rem !important; }

/* Formular */
.kk-contact-forms-drop .kkcf-label-required { display: none; }

/* Hot-Stock Hinweis */
table td, table th { border: 1px solid #dee2e6; }
table.variation-matrix span.footnote-reference { display: none; }

[data-page="2"] #result-wrapper #p-l .p-w .basket-variations .var-it.farbe .imgswatches-farbe {
    display: flex !important;
    justify-content: center !important;
}

.filter-item.active a { color: var(--sd-primary) !important; }

.variation-matrix span.status.status-2.icon-wt { color: green; }


/* ─── 14. RESPONSIVE BELOW-FOLD ─────────────────────────────────── */

@media (max-width: 767.98px) {
    /* Shop-Vorteile: kompakter */
    .pd-vorteile { padding: 10px; }
    .vorteil-text { font-size: 13px; }
    .vorteil-subtext { font-size: 11px; }

    /* Tabs: volle Breite, linksbündig */
    [data-page="1"] #tab-wp,
    [data-page="1"] #tab-wp {
        padding: 0 10px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    [data-page="1"] #tab-wp .panel-heading,
    [data-page="1"] #tab-wp .panel-heading { padding: 1rem 0; }
    [data-page="1"] #tab-wp .panel-title.h3,
    [data-page="1"] #tab-wp .panel-title.h3 { font-size: 1rem; }

    /* Produkt-Attribute */
    [data-page="1"] .product-attributes.blanklist.p-att li {
        font-size: 0.85rem;
        padding: 0.25rem;
    }

    /* Nosto / Cross-Sell Slider */
    [data-page="1"] .firstSlider h3 { font-size: 1.1rem; }

    /* Shipping Progress: kompakter */
    [data-page="1"] .shipping-cost-progress-bar__outercontainer { padding: 24px; }
    [data-page="1"] .shipping-cost-progress-bar__container { margin: 8px 20px; }
}

/* Kleines Handy */
@media (max-width: 499.98px) {
    .shopvorteile-modern { margin: 12px 0; }
    .pd-vorteile { padding: 8px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Shop-Vorteile */
    .vorteil-text { font-size: 13px; }
    .vorteil-subtext { font-size: 11px; }
    .vorteil-icon { margin-right: 10px; min-width: 20px; font-size: 16px; }

    /* Tabs */
    [data-page="1"] #tab-wp,
    [data-page="1"] #tab-wp { padding: 0; width: 100% !important; }
    [data-page="1"] #tab-wp .panel-title.h3,
    [data-page="1"] #tab-wp .panel-title.h3 { font-size: 1.1rem; }
}


/* ─── 15. VARSPINNER OVERLAY ─────────────────────────────────────── */

[data-page="1"] .swatches.disBlockimgswatchesimgswatches-farbe #varSpinner {
    display: none;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background: rgba(238,238,238,.4);
    pointer-events: all;
}
[data-page="1"] .swatches.disBlockimgswatchesimgswatches-farbe #varSpinner.active,
[data-page="1"] .swatches.disBlockimgswatchesimgswatches-farbe #varSpinner.is-active {
    display: flex;
}
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .variations #varSpinner svg {
    -webkit-animation: loading-rotate 2s linear infinite;
    animation: loading-rotate 2s linear infinite;
    height: 42px;
    width: 42px;
}a
[data-page="1"] #buy_form #product-offer .product-info > .wr-info .product-offer .variations #varSpinner .path {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--sd-primary);
    stroke-linecap: round;
    -webkit-animation: loading-dash 1.5s ease-in-out infinite;
    animation: loading-dash 1.5s ease-in-out infinite;
}
@keyframes loading-rotate {
    to { transform: rotate(1turn); }
}
@keyframes loading-dash {
    0%  { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40px; }
    to  { stroke-dasharray: 90, 150; stroke-dashoffset: -120px; }
}