/* DiWo 2026 =====================================================
 *
 * COVERFLOW CAROUSEL – Desktop Overlap + Mobile 1+Peek 
 * Struktur:                                           
 * <section id="section-claim">                         
 *   <div data-layout="content">                        
 *     <section class="carousel" id="cf"> ... 
 *
 * DiWo 2026 ===================================================== */


/* DiWo 2026 ----------------------------------------------------- 
 *
 *  SECTION + CONTENT (Position-Referenz)
 *
 * DiWo 2026 ----------------------------------------------------- */

#section-claim {
    padding: 40px 0;
    position: relative;
}

/* Content-Container als Offset-Parent für absolute UI (Pfeile/Dots) */
#section-claim [data-layout="content"] {
    position: relative;
}

/* Carousel-Breite sicher auf Contentbreite begrenzen */
#section-claim [data-layout="content"] .carousel {
    max-width: 1220px;
    margin-inline: auto;
}


/* DiWo 2026 ----------------------------------------------------- */
/* DESIGN TOKENS (Default = Desktop)                    */
/* DiWo 2026 ----------------------------------------------------- */

:root {
    /* Karten */
    --cf-card-width: 330px;
    --cf-card-img-height: 420px;
    --cf-card-label-height: 0px;

    /* Overlap: 1/3 sichtbar -> 2/3 überlappt */
    --cf-peek: calc(var(--cf-card-width) / 3);

    /* Radius / Border / Schatten */
    --cf-radius: 4px;
    --cf-border: rgba(0, 0, 0, .08);
    --cf-shadow-front: 0 14px 28px rgba(0, 0, 0, .18);
    --cf-shadow-back: 0 8px 16px rgba(0, 0, 0, .10);

    /* Animation */
    --cf-transition: 500ms cubic-bezier(.2, .9, .2, 1);

    /* Navigation */
    --cf-nav-size: 44px;
    --cf-nav-inset: 10px;
}


/* DiWo 2026 ----------------------------------------------------- */
/* CAROUSEL LAYOUT                                     */
/* DiWo 2026 ----------------------------------------------------- */

.carousel {
    position: relative;
    width: 100%;

    /* Höhe Desktop (Bildhöhe + etwas Luft für Dots) */
    height: 520px;

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

    /* Desktop: Overlap darf sichtbar sein */
    overflow: visible;

    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.carousel .viewport {
    position: relative;
    width: 100%;

    /* Viewport-Höhe kann kleiner als Carousel-Höhe sein */
    height: 360px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel .track {
    position: absolute;
    inset: 0;
}


/* DiWo 2026 ----------------------------------------------------- */
/* CARD BASE                                           */
/* DiWo 2026 ----------------------------------------------------- */

.carousel .card {
    position: absolute;
    top: 50%;
    left: 50%;

    width: var(--cf-card-width);
    height: calc(var(--cf-card-img-height) + var(--cf-card-label-height));

    /* Basiszentrierung */
    transform: translate(-50%, -50%);

    background: #fff;
    border-radius: var(--cf-radius);
    border: 1px solid var(--cf-border);
    overflow: hidden;

    box-shadow: var(--cf-shadow-back);

    /* WICHTIG: keine Transparenz -> kein „Durchschimmern“ */
    opacity: 1;

    transition:
        transform var(--cf-transition),
        box-shadow var(--cf-transition),
        filter var(--cf-transition);

    will-change: transform, filter;
}

/* Bildbereich */
.carousel .card .img {
    width: 100%;
    height: var(--cf-card-img-height);
    background-size: cover;
    background-position: center;
}

/* Labelbereich (bei dir 0px; bleibt aber sauber drin) */
.carousel .card .label {
    height: var(--cf-card-label-height);
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px;
    text-align: center;

    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #666;

    border-top: 1px solid rgba(0, 0, 0, .06);
}


/* DiWo 2026 ----------------------------------------------------- */
/* DESKTOP COVERFLOW – 7 oder 9 sichtbar via JS         */
/* CSS enthält Stufen bis ±4 (für 9 sichtbar)           */
/* DiWo 2026 ----------------------------------------------------- */

/* Mitte */
.carousel .card[data-pos="0"] {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: var(--cf-shadow-front);
    filter: none;
    z-index: 100;
}

/* ±1 */
.carousel .card[data-pos="1"] {
    transform: translate(-50%, -50%) translateX(var(--cf-peek)) scale(.95);
    /*filter: brightness(.94) saturate(.9);*/
    z-index: 80;
}

.carousel .card[data-pos="-1"] {
    transform: translate(-50%, -50%) translateX(calc(-1 * var(--cf-peek))) scale(.95);
    /*filter: brightness(.94) saturate(.9);*/
    z-index: 80;
}

/* ±2 */
.carousel .card[data-pos="2"] {
    transform: translate(-50%, -50%) translateX(calc(2 * var(--cf-peek))) scale(.88);
    /*filter: brightness(.90) saturate(.85);*/
    z-index: 60;
}

.carousel .card[data-pos="-2"] {
    transform: translate(-50%, -50%) translateX(calc(-2 * var(--cf-peek))) scale(.88);
    /*filter: brightness(.90) saturate(.85);*/
    z-index: 60;
}

/* ±3 (für 7 sichtbar) */
.carousel .card[data-pos="3"] {
    transform: translate(-50%, -50%) translateX(calc(3 * var(--cf-peek))) scale(.82);
    /*filter: brightness(.86) saturate(.8);*/
    z-index: 50;
}

.carousel .card[data-pos="-3"] {
    transform: translate(-50%, -50%) translateX(calc(-3 * var(--cf-peek))) scale(.82);
    /*filter: brightness(.86) saturate(.8);*/
    z-index: 50;
}

/* ±4 (für 9 sichtbar) */
.carousel .card[data-pos="4"] {
    transform: translate(-50%, -50%) translateX(calc(4 * var(--cf-peek))) scale(.76);
    /*filter: brightness(.82) saturate(.75);*/
    z-index: 40;
}

.carousel .card[data-pos="-4"] {
    transform: translate(-50%, -50%) translateX(calc(-4 * var(--cf-peek))) scale(.76);
    /*filter: brightness(.82) saturate(.75);*/
    z-index: 40;
}

/* Hidden */
.carousel .card[data-hidden="true"] {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.8);
    z-index: 0;
}


/* DiWo 2026 ----------------------------------------------------- 
 *
 *  NAVIGATION (PFEILE) – Desktop/Tablet sichtbar                   
 *
 * DiWo 2026 ----------------------------------------------------- */

.carousel .nav {
    /*position: absolute;*/
    top: 50%;
    transform: translateY(-50%);

    width: var(--cf-nav-size);
    height: var(--cf-nav-size);

    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .9);

    display: grid;
    place-items: center;

    cursor: pointer;
    z-index: 200;

    transition: box-shadow 200ms ease, transform 200ms ease, background 200ms ease;
}

/* Pfeile innerhalb Content */
#section-claim [data-layout="content"] .carousel .nav.prev {
    left: var(--cf-nav-inset);
}

#section-claim [data-layout="content"] .carousel .nav.next {
    right: var(--cf-nav-inset);
}

.carousel .nav:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}

.carousel .nav:active {
    transform: translateY(-50%) scale(.98);
}

.carousel .nav svg {
    width: 18px;
    height: 18px;
    opacity: .75;
}


/* DiWo 2026 ----------------------------------------------------- */
/* DOTS                                                */
/* DiWo 2026 ----------------------------------------------------- */

.carousel .dots {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: 10px;

    z-index: 220;
}

.carousel .dot {
    width: 8px;
    height: 10px;
    border-radius: 0;
    background: rgba(0, 0, 0, .2);
    border: 0;
    padding: 0;

    cursor: pointer;
    transition: transform 200ms ease, background 200ms ease;
}

.carousel .dot[aria-current="true"] {
    background: rgba(0, 0, 0, .6);
    transform: scale(1.2);
}


/* DiWo 2026 ----------------------------------------------------- */
/* RESPONSIVE – Tablet                                 */
/* (Optik anpassen, Pfeile noch ok)                     */
/* DiWo 2026 ----------------------------------------------------- */

@media (max-width: 900px) {
    :root {
        --cf-card-width: 260px;
        --cf-card-img-height: 320px;
        --cf-card-label-height: 0px;
    }

    .carousel {
        height: 420px;
    }
}


/* DiWo 2026 ----------------------------------------------------- */
/* RESPONSIVE – Mobile (1 Karte + Peek links/rechts)    */
/* Pfeile aus, kein Drift, nur pos 0/±1 sichtbar        */
/* DiWo 2026 ----------------------------------------------------- */

@media (max-width: 768px) {
    :root {
        /* Mobile Kartenformat */
        --cf-card-width: 280px;
        --cf-card-img-height: 360px;
        --cf-card-label-height: 0px;
    }

    /* Pfeile aus (Wischen) */
    #section-claim [data-layout="content"] .carousel .nav {
        display: none;
    }

    /* Drift verhindern */
    #section-claim [data-layout="content"] .carousel {
        overflow: hidden;
    }

    /* Track stabil zentrieren */
    #section-claim [data-layout="content"] .carousel .track {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    /* Höhe passend zum Mobile-Bild */
    .carousel {
        height: 520px;
    }

    /* Mobile Layout – Mitte */
    .carousel .card[data-pos="0"] {
        transform: translate(-50%, -50%) scale(1);
        filter: none;
        z-index: 100;
    }

    /* Mobile Layout – Peek links/rechts
     DiWo 2026: 0.55 = sichtbarer „Ansatz“; kleiner -> mehr Peek, größer -> weniger Peek */
    .carousel .card[data-pos="1"] {
        transform: translate(-50%, -50%) translateX(calc(var(--cf-card-width) * 0.55)) scale(.92);
        filter: brightness(.94) saturate(.9);
        z-index: 80;
    }

    .carousel .card[data-pos="-1"] {
        transform: translate(-50%, -50%) translateX(calc(-1 * var(--cf-card-width) * 0.55)) scale(.92);
        filter: brightness(.94) saturate(.9);
        z-index: 80;
    }

    /* Alle weiteren Ebenen auf Mobile ausblenden
    .carousel .card[data-pos="2"],
    .carousel .card[data-pos="-2"], */
    .carousel .card[data-pos="3"],
    .carousel .card[data-pos="-3"],
    .carousel .card[data-pos="4"],
    .carousel .card[data-pos="-4"] {
        display: none;
    }
}


/* DiWo 2026 ----------------------------------------------------- */
/* EXTRA KLEIN (sehr kleine Phones)                     */
/* DiWo 2026 ----------------------------------------------------- */

@media (max-width: 480px) {
    :root {
        --cf-card-width: 260px;
        --cf-card-img-height: 340px;
    }

    .carousel {
        height: 500px;
    }
}

/* DiWo 2026 ===================================================== */
/* DiWo 2026: MOBILE FIX – Pfeile aus + Dots umbrechen sauber      */
/* DiWo 2026: (für Integration in Seiten mit globalem styles.css)  */
/* DiWo 2026 ===================================================== */

@media (max-width: 768px) {

    /* DiWo 2026: Prev/Next auf Mobile immer aus (gewinnt gegen globale Button-Regeln) */
    html body #section-carousel [data-layout="content"] #cf.carousel .nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* DiWo 2026: Dots in die Breite des Containers zwingen */
    html body #section-carousel [data-layout="content"] #cf.carousel .dots {
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: 100% !important;
        max-width: min(420px, 100%) !important;

        padding-inline: 12px !important;
        box-sizing: border-box !important;

        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;

        column-gap: 8px !important;
        row-gap: 8px !important;

        /* DiWo 2026: falls globales CSS absolute/relative ändert */
        position: absolute !important;
        bottom: 10px !important;
    }

    /* DiWo 2026: Dots kompakter auf Mobile */
    html body #section-carousel [data-layout="content"] #cf.carousel .dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 999px !important;
        transform: none !important;
    }

    /* DiWo 2026: aktiver Dot etwas größer */
    html body #section-carousel [data-layout="content"] #cf.carousel .dot[aria-current="true"] {
        transform: scale(1.35) !important;
    }

    /* DiWo 2026: verhindert horizontalen “Drift/Scroll” durch Overlap */
    html,
    body {
        overflow-x: hidden;
    }
}