@charset "UTF-8";
/* Fotoband Startseite (GSAP-Scroll, überlappende Karten) */

.photo-band {
    /* optional: dezenter Hintergrund */
    /* background: #f7f7fb; */
}

.photo-track-wrap{
    position: relative;
    padding: 30px 0;
}

/* Desktop: überlappend, kein Scroll */
.photo-track{
    display:flex;
    align-items:center;
    overflow:visible;
}

.photo-card{
    position:relative;
    flex:0 0 auto;
    width:clamp(220px,22vw,360px);
    aspect-ratio:4/5;
    transform-origin:center;
    overflow:visible;

    /* Pixelbox Variablen befüllen */
    --fill: var(--black);          /* innenfläche */
    --shadow: var(--violett);      /* pixel-shadow-farbe */
}

.photo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    clip-path:var(--shape);
    position:relative;
    z-index:2;
}

.photo-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:#111;
    clip-path:var(--shape);
    z-index:1;
}

/* Überlappung (Desktop) */
.photo-card + .photo-card{
    margin-left: clamp(-70px, -6vw, -130px);
}

/* Rotation Klassen */
.r-n6{ transform: rotate(-6deg); }
.r-n4{ transform: rotate(-4deg); }
.r-n2{ transform: rotate(-2deg); }
.r-3 { transform: rotate(3deg); }
.r-5 { transform: rotate(5deg); }

/* kleine vertikale Versätze für “Depth” */
.o-1{ top: 18px;  z-index: 1; }
.o-2{ top: 0px;   z-index: 2; }
.o-3{ top: 26px;  z-index: 3; }
.o-4{ top: 6px;   z-index: 2; }
.o-5{ top: 22px;  z-index: 1; }

/* Hover: Karte nach vorne */
.photo-card:hover{
    transform: rotate(0deg) scale(1.05);
    z-index: 20;
    box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

/* Mobile/Tablet: horizontal scroll statt Überlappungs-chaos */
@media (max-width: 991.98px){
    .photo-track{
        overflow-x: auto;
        gap: 16px;
        padding: 0 8px 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .photo-card{
        width: min(75vw, 360px);
        scroll-snap-align: center;
    }
    .photo-card + .photo-card{
        margin-left: 0; /* keine negative Überlappung */
    }
    /* Versätze kleiner auf Mobile */
    .o-1,.o-2,.o-3,.o-4,.o-5{ top: 0; }
}