@charset "UTF-8";
/*
 * Estrel Tower — Media Carousel (Bilder + Videos)
 * Figma 682:838 (Bilder) + 682:884 (Videos)  on cream bg #FEF5EC
 *
 * Layout:
 *   Title left  GT Alpina italic 43/50 + Body Söhne 18/27  #14172D
 *   Carousel right (Swiper): slides 663×629 r=3
 *   Slides have:
 *     - image fill
 *     - badge pill (bottom-right)  Söhne 300 12px BG #FEF5EC
 *     - first/active slide overlay GT Alpina italic 39/38 with cream BG
 *   Arrows: 2 pill buttons 70×30 #FED3CD with chevrons (color #14172D)
 *   Pagination: 5 dots 9×9 #FED3CD (1 outline, 4 filled)
 */

.estrel-mc {
    container-type: inline-size;
    width: 100%;
    background: #FEF5EC;
    color: #14172D;
    overflow: hidden;
}

.estrel-mc__inner {
    --u: calc(100cqi / 1920);
    max-width: 1920px;
    margin: 0 auto;
    padding: calc(80 * var(--u)) 0 calc(60 * var(--u)) calc(164 * var(--u));
    position: relative;
}

.estrel-mc__head {
    max-width: calc(540 * var(--u));
    margin-bottom: calc(40 * var(--u));
}

.estrel-mc__title {
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(43 * var(--u));
    line-height: calc(50 * var(--u));
    color: #14172D;
    margin: 0 0 calc(20 * var(--u));
}

.estrel-mc__title-line { display: block; }

.estrel-mc__body {
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    color: #14172D;
}

.estrel-mc__body p { margin: 0 0 calc(8 * var(--u)); color: inherit; }

/* Swiper container — slides overflow right beyond viewport.
   Position relative so arrow buttons can be centered vertically against
   the slide row (swiper-wrapper inherits slide-height once initialised). */
.estrel-mc__swiper {
    width: 100%;
    overflow: visible;
    position: relative;
    padding-right: calc(164 * var(--u));
}

.estrel-mc__slide {
    width: calc(664 * var(--u));
    aspect-ratio: 664 / 629;
    flex: 0 0 calc(664 * var(--u));
    background: #d9d9d9;
    border-radius: calc(3 * var(--u));
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .25s ease;
}

.estrel-mc__slide:hover { transform: translateY(-2px); }

.estrel-mc__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.estrel-mc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.estrel-mc__badge {
    position: absolute;
    bottom: calc(20 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    background: #FEF5EC;
    color: #14172D;
    font-family: 'Söhne', sans-serif;
    font-weight: 300;
    font-size: calc(12 * var(--u));
    line-height: 1;
    padding: calc(6 * var(--u)) calc(14 * var(--u));
    border-radius: calc(20 * var(--u));
    z-index: 2;
    white-space: nowrap;
}

.estrel-mc__overlay-title {
    position: absolute;
    bottom: calc(80 * var(--u));
    left: calc(40 * var(--u));
    color: #14172D;
    font-size: calc(39 * var(--u));
    line-height: calc(46 * var(--u));
    z-index: 2;
    pointer-events: none;
}

/* Video play icon */
.estrel-mc__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    z-index: 2;
    pointer-events: none;
}

.estrel-mc__play svg { width: 100%; height: 100%; }

/* Nav buttons positioned relative to swiper, centered on slide row.
   Use margin-top instead of translateY for centering so we can scale on
   hover without the position recomputing (which caused the visible jump). */
.estrel-mc__btn {
    position: absolute;
    top: calc(629 * var(--u) / 2);
    margin-top: calc(-15 * var(--u));
    width: calc(70 * var(--u));
    height: calc(30 * var(--u));
    border-radius: calc(41.5 * var(--u));
    background: #FED3CD;
    color: #14172D;
    border: 0;
    cursor: pointer;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    transition: transform .15s ease, opacity .15s ease;
}

.estrel-mc__btn--prev {
    left: calc(35 * var(--u));
}

.estrel-mc__btn--next {
    right: calc(98 * var(--u));
}

.estrel-mc__btn:hover {
    transform: scale(1.05);
}

/* Prev arrow points naturally left (own SVG path); no rotation needed */

.estrel-mc__btn:hover { transform: scale(1.05); }
.estrel-mc__btn:disabled { opacity: .35; cursor: not-allowed; }

.estrel-mc__btn svg { width: calc(25 * var(--u)); height: calc(8 * var(--u)); }

/* Pagination dots — höhere Spezifität gegen swiper-bundle.css default
   .swiper-pagination { position: absolute; left: 0 } welches sonst die Dots
   an den Viewport-Rand reisst statt am Carousel-Start zu halten. */
.estrel-mc .estrel-mc__pagination.swiper-pagination {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: calc(40 * var(--u));
    display: flex;
    gap: calc(7 * var(--u));
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    width: auto;
    text-align: left;
}

.estrel-mc__pagination .swiper-pagination-bullet {
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    border-radius: 50%;
    background: #FED3CD;
    opacity: 1;
    transition: background .15s ease;
    cursor: pointer;
    margin: 0;
    display: inline-block;
}

.estrel-mc__pagination .swiper-pagination-bullet-active {
    background: transparent;
    border: 1px solid #FED3CD;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .estrel-mc__inner { padding: 64px 32px 56px; }
    .estrel-mc__head { max-width: none; margin-bottom: 32px; }
    .estrel-mc__title { font-size: 32px; line-height: 38px; }
    .estrel-mc__body { font-size: 17px; line-height: 26px; }
    .estrel-mc__swiper { padding-right: 32px; }
    .estrel-mc__slide { width: 60vw; flex-basis: 60vw; }
    .estrel-mc__nav { position: static; transform: none; margin-top: 28px; padding: 0 12px; }
    .estrel-mc__btn { width: 56px; height: 36px; }
    .estrel-mc__overlay-title { font-size: 28px; line-height: 32px; bottom: 60px; left: 24px; }
    .estrel-mc__badge { font-size: 11px; padding: 5px 12px; }
}

@media (max-width: 767px) {
    .estrel-mc__inner { padding: 48px 20px 40px; }
    .estrel-mc__title { font-size: 26px; line-height: 32px; }
    .estrel-mc__body { font-size: 16px; line-height: 24px; }
    .estrel-mc__swiper { padding-right: 20px; }
    .estrel-mc__slide { width: 84vw; flex-basis: 84vw; }
    .estrel-mc__overlay-title { font-size: 24px; line-height: 28px; }
    .estrel-mc__pagination { margin-top: 24px; gap: 6px; }
    .estrel-mc__pagination .swiper-pagination-bullet { width: 8px; height: 8px; }
}