/* =========================================================
   DRIVERS MALL – TOP ANGEBOTE SLIDER
   ========================================================= */

.dm-offers,
.dm-offers *{
    box-sizing:border-box;
}

.dm-offers{
    --dm-red:#b60000;
    --dm-red-dark:#820000;
    --dm-gold:#d5aa43;
    --dm-gold-light:#efd071;
    --dm-black:#141414;
    --dm-text:#1b1b1b;
    --dm-muted:#777;
    --dm-border:#e6e6e6;

    width:100%;
    position:relative;
    overflow:hidden;

    padding:76px 30px 84px;

    background:#fff;

    font-family:Inter,Arial,sans-serif;
}

.dm-offers__inner{
    width:100%;
    max-width:1380px;

    margin:0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.dm-offers__header{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:25px;

    margin-bottom:28px;
}

.dm-offers__eyebrow{
    display:flex;
    align-items:center;

    gap:9px;

    margin-bottom:9px;

    color:var(--dm-red);

    font-size:11px;
    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;
}

.dm-offers__eyebrow i{
    color:var(--dm-gold);
}

.dm-offers h2{
    margin:0;

    color:var(--dm-text);

    font-size:clamp(28px,3vw,38px);
    line-height:1.15;

    letter-spacing:-1px;

    font-weight:650;
}

.dm-offers__sub{
    margin:9px 0 0;

    color:var(--dm-muted);

    font-size:14px;
    line-height:1.6;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.dmta-header-actions{
    display:flex;
    align-items:center;

    gap:15px;
}

.dm-offers__all{
    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:10px 0;

    color:#333 !important;

    text-decoration:none !important;

    font-size:13px;

    font-weight:500;

    transition:.25s ease;
}

.dm-offers__all i{
    color:var(--dm-red);

    font-size:11px;
}

.dm-offers__all:hover{
    color:var(--dm-red) !important;

    gap:13px;
}


/* =========================================================
   SLIDER BUTTONS
   ========================================================= */

.dmta-slider-controls{
    display:flex;

    gap:6px;
}

.dmta-slider-controls button{
    width:38px;
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

    border:
        1px solid #e1e1e1;

    border-radius:8px;

    background:#fff;

    color:#222;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.dmta-slider-controls button:hover{
    transform:translateY(-1px);

    border-color:var(--dm-red);

    background:var(--dm-red);

    color:#fff;
}

.dmta-slider-controls button:disabled{
    opacity:.28;

    cursor:default;

    transform:none;

    border-color:#e1e1e1;

    background:#fff;

    color:#777;
}

.dmta-slider-controls.is-hidden{
    display:none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.dm-offers__layout{
    display:grid;

    grid-template-columns:
        minmax(0,3.15fr)
        minmax(290px,.85fr);

    gap:18px;

    align-items:stretch;
}


/* =========================================================
   SLIDER
   ========================================================= */

.dmta-slider,
.dmta-viewport{
    min-width:0;
}

.dmta-viewport{
    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -ms-overflow-style:none;

    touch-action:pan-x;
}

.dmta-viewport::-webkit-scrollbar{
    display:none;
}

.dm-product-grid{
    display:flex;

    gap:12px;

    width:max-content;
}

.dmta-slide{
    flex:
        0 0
        calc(
            (
                min(
                    calc(
                        (100vw - 390px),
                        1025px
                    )
                )
                - 48px
            )
            / 5
        );

    scroll-snap-align:start;
}


/* =========================================================
   PRODUKTKARTE
   ========================================================= */

.dm-offer-card{
    position:relative;

    min-width:0;
    min-height:350px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:
        1px solid
        var(--dm-border);

    border-radius:12px;

    background:#fff;

    color:inherit !important;

    text-decoration:none !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.dm-offer-card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(182,0,0,.22);

    box-shadow:
        0 16px 35px
        rgba(0,0,0,.07);
}


/* TOP BADGE */

.dm-offer-card__sale{
    position:absolute;

    z-index:5;

    top:11px;
    right:11px;

    padding:5px 8px;

    border-radius:5px;

    background:
        linear-gradient(
            180deg,
            #ce0000,
            #a00000
        );

    color:#fff;

    font-size:9px;
    font-weight:700;
}


/* =========================================================
   PRODUKTBILD
   ========================================================= */

.dm-offer-card__visual{
    position:relative;

    height:158px;

    flex:0 0 158px;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(213,170,67,.08),
            transparent 53%
        ),
        linear-gradient(
            180deg,
            #fafafa,
            #f4f4f4
        );

    border-bottom:
        1px solid #ededed;
}

.dm-offer-card__visual:before{
    content:"";

    position:absolute;

    width:100px;
    height:100px;

    border:
        1px dashed
        rgba(213,170,67,.28);

    border-radius:50%;
}

.dm-offer-card__image{
    position:relative;

    z-index:2;

    display:block;

    width:auto !important;
    height:auto !important;

    max-width:88% !important;
    max-height:136px !important;

    margin:0 !important;

    object-fit:contain;

    transition:
        transform .3s ease;
}

.dm-offer-card:hover
.dm-offer-card__image{
    transform:scale(1.05);
}

.dmta-placeholder-icon{
    position:relative;

    z-index:2;

    color:#292929;

    font-size:54px;
}


/* =========================================================
   PRODUKT CONTENT
   ========================================================= */

.dm-offer-card__content{
    flex:1;

    display:flex;
    flex-direction:column;

    min-width:0;

    padding:
        16px 15px 15px;
}

.dm-offer-card__brand{
    display:block;

    margin-bottom:7px;

    overflow:hidden;

    color:var(--dm-red);

    font-size:9px;

    font-weight:650;

    letter-spacing:.8px;

    text-transform:uppercase;

    white-space:nowrap;

    text-overflow:ellipsis;
}

.dm-offer-card__title{
    min-height:55px;

    margin:0;

    overflow:hidden;

    color:#222;

    font-size:13px;

    line-height:1.42;

    font-weight:600;

    display:-webkit-box;

    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.dm-offer-card__meta{
    margin-top:5px;

    overflow:hidden;

    color:#969696;

    font-size:9px;

    line-height:1.4;

    white-space:nowrap;

    text-overflow:ellipsis;
}

.dm-offer-card__price{
    margin-top:10px;

    color:var(--dm-red-dark);

    font-size:18px;

    line-height:1.2;

    font-weight:700;
}

.dm-offer-card__price del{
    margin-right:4px;

    color:#999;

    font-size:11px;

    font-weight:400;
}

.dm-offer-card__price ins{
    text-decoration:none;
}


/* =========================================================
   CARD BOTTOM
   ========================================================= */

.dm-offer-card__bottom{
    margin-top:auto;

    padding-top:15px;
}

.dm-offer-card__status{
    display:flex;

    align-items:center;

    gap:6px;

    color:#666;

    font-size:9px;
}

.dm-offer-card__status > i{
    color:#4fb66d;

    font-size:7px;
}

.dmta-delivery{
    color:#999;
}

.dm-offer-card__action{
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-top:11px;

    padding-top:11px;

    border-top:
        1px solid #ededed;
}

.dm-offer-card__action span{
    color:#272727;

    font-size:11px;

    font-weight:600;
}

.dm-offer-card__action i{
    width:28px;
    height:28px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:7px;

    background:
        rgba(182,0,0,.06);

    color:var(--dm-red);

    font-size:11px;
}


/* =========================================================
   TRUST BOX
   ========================================================= */

.dm-trust-box{
    position:relative;

    height:100%;

    overflow:hidden;

    padding:29px 27px;

    border:
        1px solid #e4e4e4;

    border-radius:13px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(213,170,67,.13),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #fbfbfb,
            #f5f5f5
        );
}

.dm-trust-box:before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:
        linear-gradient(
            180deg,
            var(--dm-red),
            var(--dm-red-dark),
            var(--dm-gold)
        );
}

.dm-trust-box__eyebrow{
    display:flex;

    align-items:center;

    gap:8px;

    color:var(--dm-red);

    font-size:10px;

    font-weight:600;

    letter-spacing:1.2px;

    text-transform:uppercase;
}

.dm-trust-box__eyebrow i{
    color:var(--dm-gold);
}

.dm-trust-box h3{
    margin:
        11px 0 0;

    color:#1d1d1d;

    font-size:21px;

    line-height:1.25;

    font-weight:650;
}

.dm-trust-box__text{
    margin:
        10px 0 0;

    color:#7d7d7d;

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   TRUST LIST
   ========================================================= */

.dm-trust-list{
    display:grid;

    gap:15px;

    margin-top:25px;
}

.dm-trust-item{
    display:flex;

    align-items:flex-start;

    gap:11px;
}

.dm-trust-item__icon{
    width:31px;
    height:31px;

    flex:0 0 31px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid #e2e2e2;

    border-radius:8px;

    background:#fff;

    color:var(--dm-red);

    font-size:12px;
}

.dm-trust-item strong{
    display:block;

    color:#292929;

    font-size:11px;

    line-height:1.3;

    font-weight:600;
}

.dm-trust-item span{
    display:block;

    margin-top:3px;

    color:#909090;

    font-size:9px;

    line-height:1.4;
}


/* =========================================================
   SEAL
   ========================================================= */

.dm-trust-seal{
    position:relative;

    width:118px;
    height:118px;

    margin:
        28px auto 0;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    border:
        2px solid #b88a24;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #fff7d6,
            #e6bf5a
        );

    color:#5f430b;

    box-shadow:
        inset 0 0 0 5px
        rgba(255,255,255,.42),
        0 9px 20px
        rgba(0,0,0,.10);
}

.dm-trust-seal:before{
    content:"";

    position:absolute;

    inset:7px;

    border:
        1px dashed
        rgba(101,70,10,.45);

    border-radius:50%;
}

.dm-trust-seal i{
    position:relative;

    z-index:2;

    margin-bottom:5px;

    color:#74500d;

    font-size:22px;
}

.dm-trust-seal strong{
    position:relative;

    z-index:2;

    color:#4c350a;

    font-size:10px;

    line-height:1.1;

    text-align:center;

    text-transform:uppercase;
}

.dm-trust-seal span{
    position:relative;

    z-index:2;

    margin-top:4px;

    font-size:8px;

    letter-spacing:1px;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.dm-offers__bottom{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    margin-top:22px;

    overflow:hidden;

    border:
        1px solid #e8e8e8;

    border-radius:11px;

    background:#fafafa;
}

.dm-offers-bottom__item{
    display:flex;

    align-items:center;

    gap:11px;

    padding:17px 19px;
}

.dm-offers-bottom__item +
.dm-offers-bottom__item{
    border-left:
        1px solid #e8e8e8;
}

.dm-offers-bottom__item i{
    color:var(--dm-red);

    font-size:16px;
}

.dm-offers-bottom__item strong{
    display:block;

    color:#303030;

    font-size:11px;

    font-weight:600;
}

.dm-offers-bottom__item span{
    display:block;

    margin-top:2px;

    color:#929292;

    font-size:9px;
}


/* =========================================================
   EMPTY
   ========================================================= */

.dmta-empty{
    padding:20px;

    border:
        1px dashed #d5aa43;

    background:#fffaf0;

    color:#555;

    text-align:center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1200px){

    .dm-offers__layout{
        grid-template-columns:1fr;
    }

    .dmta-slide{
        flex-basis:
            calc(
                (
                    100vw
                    - 88px
                )
                / 3
            );
    }

    .dm-trust-box{
        max-width:none;
    }

    .dm-trust-list{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:850px){

    .dm-offers{
        padding:
            60px 22px 65px;
    }

    .dm-offers__header{
        align-items:flex-start;

        flex-direction:column;
    }

    .dmta-header-actions{
        width:100%;

        justify-content:space-between;
    }

    .dmta-slide{
        flex-basis:
            calc(
                (
                    100vw
                    - 66px
                )
                / 2
            );
    }

    .dm-offers__bottom{
        grid-template-columns:
            repeat(2,1fr);
    }

    .dm-offers-bottom__item:nth-child(3){
        border-left:0;

        border-top:
            1px solid #e8e8e8;
    }

    .dm-offers-bottom__item:nth-child(4){
        border-top:
            1px solid #e8e8e8;
    }

}


@media(max-width:520px){

    .dm-offers{
        padding:
            48px 15px 52px;
    }

    .dm-offers h2{
        font-size:29px;
    }

    .dmta-slide{
        flex-basis:
            calc(
                (
                    100vw
                    - 39px
                )
                / 2
            );
    }

    .dm-offer-card{
        min-height:320px;
    }

    .dm-offer-card__visual{
        height:130px;

        flex-basis:130px;
    }

    .dm-offer-card__visual:before{
        width:80px;
        height:80px;
    }

    .dm-offer-card__image{
        max-height:108px !important;
    }

    .dmta-placeholder-icon{
        font-size:43px;
    }

    .dm-offer-card__content{
        padding:
            13px 11px;
    }

    .dm-offer-card__title{
        min-height:48px;

        font-size:11px;
    }

    .dm-offer-card__price{
        font-size:15px;
    }

    .dm-trust-list{
        grid-template-columns:1fr;
    }

    .dm-offers__bottom{
        grid-template-columns:1fr;
    }

    .dm-offers-bottom__item,
    .dm-offers-bottom__item:nth-child(3),
    .dm-offers-bottom__item:nth-child(4){
        border-left:0;

        border-top:
            1px solid #e8e8e8;
    }

    .dm-offers-bottom__item:first-child{
        border-top:0;
    }

}


@media(max-width:390px){

    .dmta-slide{
        flex-basis:
            calc(
                100vw - 30px
            );
    }

}


/* =========================================================
   TOP ANGEBOTE – TRUST BOX KOMPAKT
   ========================================================= */

/* Qualitätssiegel komplett entfernen */
.dmta-section .dm-trust-seal{
    display:none !important;
}


/* Vertrauensbox nicht mehr künstlich verlängern */
.dmta-section .dm-trust-box{
    height:auto !important;
    min-height:0 !important;

    align-self:start !important;

    padding:
        25px 24px !important;
}


/* Inhalte etwas kompakter, damit alles sauber hineinpasst */
.dmta-section .dm-trust-list{
    gap:12px !important;

    margin-top:20px !important;
}


.dmta-section .dm-trust-box__text{
    margin-top:8px !important;
}


.dmta-section .dm-trust-item span{
    line-height:1.35 !important;
}


/* =========================================================
   TOP ANGEBOTE – VOLLE PRODUKTBREITE
   ========================================================= */

/* rechte Vertrauensbox sicher ausblenden */
.dmta-section .dm-trust-box{
    display:none !important;
}


/* Layout nur noch eine Spalte */
.dmta-section .dm-offers__layout{
    display:block !important;
}


/* Slider volle Breite */
.dmta-section .dmta-slider,
.dmta-section .dmta-viewport{
    width:100% !important;
    max-width:none !important;
}


/* exakt 5 Produkte auf Desktop */
@media(min-width:1201px){

    .dmta-section .dmta-slide{
        flex:
            0 0
            calc(
                (100% - 48px) / 5
            ) !important;
    }

}


/* 3 auf Tablet */
@media(min-width:851px) and (max-width:1200px){

    .dmta-section .dmta-slide{
        flex:
            0 0
            calc(
                (100% - 24px) / 3
            ) !important;
    }

}


/* 2 auf kleineren Geräten */
@media(min-width:391px) and (max-width:850px){

    .dmta-section .dmta-slide{
        flex:
            0 0
            calc(
                (100% - 12px) / 2
            ) !important;
    }

}


/* 1 auf sehr kleinen Geräten */
@media(max-width:390px){

    .dmta-section .dmta-slide{
        flex:
            0 0
            100% !important;
    }

}


/* =========================================================
   TOP ANGEBOTE – EXAKT 5 SICHTBARE PRODUKTE
   ========================================================= */

.dmta-section .dmta-track{
    width:100% !important;
    min-width:100% !important;

    display:flex !important;
    gap:12px !important;
}


/* DESKTOP: exakt 5 */

@media(min-width:1201px){

    .dmta-section .dmta-slide{
        flex:
            0 0
            calc(
                (100% - 48px) / 5
            ) !important;

        width:
            calc(
                (100% - 48px) / 5
            ) !important;

        max-width:
            calc(
                (100% - 48px) / 5
            ) !important;
    }

}


/* TABLET: 3 */

@media(min-width:851px) and (max-width:1200px){

    .dmta-section .dmta-slide{
        flex:
            0 0
            calc(
                (100% - 24px) / 3
            ) !important;

        width:
            calc(
                (100% - 24px) / 3
            ) !important;
    }

}


/* MOBILE: 2 */

@media(min-width:391px) and (max-width:850px){

    .dmta-section .dmta-slide{
        flex:
            0 0
            calc(
                (100% - 12px) / 2
            ) !important;

        width:
            calc(
                (100% - 12px) / 2
            ) !important;
    }

}


/* KLEINES HANDY: 1 */

@media(max-width:390px){

    .dmta-section .dmta-slide{
        flex:0 0 100% !important;
        width:100% !important;
    }

}

