/* ── HIGHLIGHT SLIDESHOW ─────────────────────────────────────── */
.slideshow-section {
    padding:    3rem 0 2rem;
    position:   relative;
    overflow:   hidden;
}

.slideshow-track {
    position:        relative;
    width:           100%;
    height:          520px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    touch-action:    pan-y;
    user-select:     none;
}

/* ── Individual slide ── */
.slide {
    position:       absolute;
    width:          calc(100% - 16rem);
    max-width:      1100px;
    height:         100%;
    border-radius:  28px;
    overflow:       hidden;
    transition:     transform 0.85s cubic-bezier(0.52, 0.16, 0.24, 1), opacity 0.85s cubic-bezier(0.52, 0.16, 0.24, 1);
    will-change:    transform, opacity;
    cursor:         pointer;
}

.slide-active {
    transform:      translateX(0) scale(1);
    opacity:        1;
    z-index:        3;
    filter:         none;
    pointer-events: auto;
}

.slide-prev {
    transform:      translateX(calc(-100% - 2rem)) scale(0.92);
    opacity:        0.5;
    z-index:        2;
    filter:         none;
    pointer-events: none;
}

.slide-next {
    transform:      translateX(calc(100% + 2rem)) scale(0.92);
    opacity:        0.5;
    z-index:        2;
    filter:         none;
    pointer-events: none;
}

.slide-far {
    transform:      translateX(200%) scale(0.85);
    opacity:        0;
    z-index:        1;
    pointer-events: none;
}

.slide-card {
    width:           100%;
    height:          100%;
    display:         flex;
    background:      var(--slide-bg, #F5F5F7);
    border-radius:   28px;
    overflow:        hidden;
}

.slide-image {
    width:           50%;
    display:         flex;
    align-items:     stretch;
    justify-content: center;
    padding:         0;
    flex-shrink:     0;
    overflow:        hidden;
}

.slide-image img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: right center;
}

.slide-info {
    width:           50%;
    flex-shrink:     0;
    padding:         3rem 3.5rem 2.5rem 1rem;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
    position:        relative;
}

.slide-marke {
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--blue);
    margin-bottom:  0.6rem;
}

.slide-name {
    font-size:      2.8rem;
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    1.08;
    color:          var(--ink);
    margin-bottom:  1rem;
}

.slide-desc {
    font-size:     0.95rem;
    color:         var(--ink-soft);
    line-height:   1.7;
    margin-bottom: 1.75rem;
    max-width:     460px;
}

.slide-noten {
    display:                 flex;
    flex-direction:          column;
    gap:                     0.5rem;
    margin-bottom:           1.75rem;
    padding:                 0.85rem 1.1rem;
    background:              rgba(255,255,255,0.55);
    backdrop-filter:         blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius:           14px;
    border:                  1px solid rgba(255,255,255,0.7);
    max-width:               400px;
}

.slide-note {
    display:     flex;
    align-items: baseline;
    gap:         0.75rem;
}

.note-label {
    font-size:      0.58rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--ink-soft);
    min-width:      5.5rem;
    flex-shrink:    0;
}

.note-value {
    font-size:   0.85rem;
    color:       var(--ink);
    font-weight: 400;
}

.slide-btn { align-self: flex-start; }

/* Slide buy controls */
.slide-preis {
    position:    absolute;
    bottom:      7rem;
    left:        1rem;
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--ink);
    white-space: nowrap;
}
.slide-buy {
    position: absolute;
    bottom:   2.5rem;
    left:     1rem;
    right:    3.5rem;
}
.slide-buy .merge-wrap    { width: 100%; min-width: 0; }
.slide-buy .merge-pills   { gap: 0.4rem; }
.slide-buy .merge-popup   { bottom: calc(100% + 6px); top: auto; }
.slide-card .slide-info   { overflow: visible; }

/* Controls: Play + Dots */
.slideshow-controls {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    padding-top:     1.75rem;
}

.slideshow-play {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          none;
    background:      #E8E8ED;
    color:           var(--ink);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.25s, transform 0.25s;
    flex-shrink:     0;
}
.slideshow-play:hover   { background: #DDDDE2; transform: scale(1.06); }
.slideshow-play:active  { transform: scale(0.96); }
.slideshow-play .hidden { display: none; }

.slideshow-dots {
    display:       flex;
    align-items:   center;
    gap:           16px;
    background:    #E8E8ED;
    height:        36px;
    padding:       0 26px;
    border-radius: 18px;
    position:      relative;
}

.slide-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    border:        none;
    background:    var(--ink);
    opacity:       0.25;
    cursor:        pointer;
    transition:    opacity 0.35s;
    padding:       0;
    position:      relative;
    z-index:       1;
}

.dots-indicator {
    position:       absolute;
    height:         6px;
    width:          18px;
    background:     rgba(0,0,0,0.15);
    border-radius:  3px;
    top:            50%;
    margin-top:     -3px;
    left:           0;
    transition:     transform 0.5s cubic-bezier(0.52, 0.16, 0.24, 1);
    pointer-events: none;
    z-index:        2;
    overflow:       hidden;
}

.dots-indicator-fill {
    position:       absolute;
    inset:          0;
    background:     var(--ink);
    border-radius:  3px;
    transform:      scaleX(0);
    transform-origin: left center;
}

.dots-indicator-fill.filling {
    transform:      scaleX(1);
    transition:     transform 7s linear;
}

/* Responsive slideshow */
@media (max-width: 1124px) {
    .slideshow-section { padding: 2rem 0 1.5rem; }
    .slideshow-track   { height: auto; min-height: 480px; }
    .slide             { width: calc(100% - 10rem); border-radius: 22px; }
    .slide-prev        { transform: translateX(calc(-100% - 0.75rem)) scale(0.92); }
    .slide-next        { transform: translateX(calc(100% + 0.75rem)) scale(0.92); }

    .slide-card {
        position:      relative;
        border-radius: 22px;
        min-height:    480px;
        display:       grid;
        grid-template-columns: 1fr;
        grid-template-rows:    1fr;
    }

    .slide-image {
        position:    absolute;
        inset:       0;
        width:       100%;
        height:      100%;
        padding:     0;
        z-index:     0;
    }
    .slide-image img {
        width:      100%;
        height:     100%;
        object-fit: cover;
    }

    .slide-info {
        position:              relative;
        z-index:               1;
        width:                 100%;
        padding:               1.5rem;
        display:               grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    auto 1fr auto;
        gap:                   0;
        background:            linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.45) 100%);
        color:                 #fff;
    }

    /* Top left: Name */
    .slide-marke {
        grid-column: 1;
        grid-row:    1;
        color:       rgba(255,255,255,0.8);
        align-self:  start;
    }
    .slide-name {
        grid-column: 1;
        grid-row:    2;
        font-size:   1.6rem;
        color:       #fff;
        align-self:  start;
    }

    /* Top right: Description */
    .slide-desc {
        grid-column:   2;
        grid-row:      1 / 3;
        font-size:     0.78rem;
        color:         rgba(255,255,255,0.85);
        align-self:    start;
        text-align:    right;
        margin-bottom: 0;
        padding-left:  1rem;
    }

    /* Bottom left: Noten */
    .slide-noten {
        grid-column:  1;
        grid-row:     3;
        align-self:   end;
        background:   rgba(255,255,255,0.12);
        border:       1px solid rgba(255,255,255,0.15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        margin-bottom: 0;
        max-width:     none;
    }
    .note-label { color: rgba(255,255,255,0.6); min-width: 4.5rem; }
    .note-value { color: #fff; }

    /* Bottom right: Kaufen */
    .slide-preis {
        display: none;
    }
    .slide-buy {
        position:     static;
        grid-column:  2;
        grid-row:     3;
        align-self:   end;
        justify-self: end;
    }

    .slideshow-play    { width: 36px; height: 36px; }
    .slideshow-dots    { padding: 10px 14px; gap: 10px; }
}

@media (max-width: 480px) {
    .slideshow-section { padding: 1.5rem 0 1rem; }
    .slideshow-track   { min-height: 380px; }
    .slide             { width: calc(100% - 2rem); border-radius: 18px; }
    .slide-prev        { transform: translateX(calc(-100% - 0.5rem)) scale(0.94); }
    .slide-next        { transform: translateX(calc(100% + 0.5rem)) scale(0.94); }
    .slide-card        { border-radius: 18px; min-height: 380px; }
    .slide-info        { padding: 1rem; gap: 0; }
    .slide-name        { font-size: 1.2rem; }
    .slide-marke       { font-size: 0.6rem; margin-bottom: 0.3rem; }
    .slide-desc        { font-size: 0.7rem; line-height: 1.5; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .slide-noten       { padding: 0.6rem 0.8rem; border-radius: 10px; margin-bottom: 0; }
    .note-label        { font-size: 0.5rem; min-width: 3.5rem; }
    .note-value        { font-size: 0.7rem; }
    .slide-buy         { right: 1rem; left: 1rem; bottom: 1.5rem; }
    .slideshow-controls { padding-top: 1rem; gap: 0.5rem; }
    .slideshow-play    { width: 32px; height: 32px; }
    .slideshow-dots    { height: 32px; padding: 0 14px; gap: 8px; border-radius: 16px; }
}