:root {
    --scroll-hint-duration: 920ms;
    --scroll-hint-height: 20vh;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    display: none;
}

.scroll-container {
    width: 100%;
}

/* alle Hintergrund-Bildteile */
.bg-section {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

/* Wrapper NUR für den letzten Abschnitt */
.bg-section-wrapper {
    position: relative;
    width: 100%;
}

/* COLLAGE */
.collage {
    position: absolute;
    bottom: 0; /* Collage am unteren Ende */
    left: 0;
    width: 100%;
    height: 22vw;
}

.piece {
    position: absolute;
    height: auto;
    filter: brightness(70%);
    cursor: pointer;
}

/* Beispiel-Positionen */
.p0 { width: 100vw; left: 0%; bottom: 0%; }
.p6 { width: 45.9vw; height: 78vw; right: 14.4%; bottom: 269%; } /*perfect*/
.p2 { width: 38vw; left: 0%; bottom: 325%; } /*perfect*/
.p7 { width: 32vw; left: 37.4%; bottom: 302.2%; }
.p3 { width: 32vw; height: 34vw; left: 0%; bottom: 204%; } /*perfect*/
.p4 { width: 29.25vw; height: 66.2vw; left: 28.8%; bottom: 106%; } /*perfect*/
.p5 { width: 48.3vw; height: 91.7vw; right: 0%; bottom: 89.6%; 
    will-change: transform, filter;
    backface-visibility: hidden;
    transform: translateZ(0);
    } /*perfect*/
.p1 { width: 100vw; height: 51.5vw; right: 0%; bottom: 0%; } /*perfect*/
.p8 { width: 59vw; height: 73.2vw; left: 0%; bottom: 41%; }

.p5:hover{
    filter: brightness(130%);
    transform: translateY(-12px) scale(1.02) rotate(0deg);
    cursor: pointer;
}


.p8:hover{
    filter: brightness(130%);
    transform: translateY(-12px) scale(1.02) rotate(0deg);
    cursor: pointer;
}

#cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    padding: 6px 10px;
    font-size: 18px;
    background: rgba(0,0,0,0.75);
    color: white;
    pointer-events: none;
    opacity: 0;
    z-index: 999999;
    white-space: nowrap;
    transform: translate(14px, 14px);
    transition: opacity 0.15s ease;
}

body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--scroll-hint-height);
    pointer-events: none;
    z-index: 6000;
    opacity: 0;
    transform: scaleY(0.96);
    transform-origin: bottom center;
    will-change: opacity, transform;
    background:
        linear-gradient(to top,
            rgba(255, 214, 10, 0.96) 0%,
            rgba(255, 214, 10, 0.72) 14%,
            rgba(255, 214, 10, 0.34) 42%,
            rgba(255, 214, 10, 0.14) 68%,
            rgba(255, 214, 10, 0.00) 100%),
        radial-gradient(160% 120% at 50% 100%,
            rgba(255, 214, 10, 0.64) 0%,
            rgba(255, 214, 10, 0.30) 28%,
            rgba(255, 214, 10, 0.10) 54%,
            rgba(255, 214, 10, 0.00) 78%);
    filter: blur(26px);
}

body.is-scroll-hint-flashing::after {
    animation: scrollHintDoubleFlash var(--scroll-hint-duration) ease-out forwards;
}

@keyframes scrollHintDoubleFlash {
    0% {
        opacity: 0;
        transform: scaleY(0.94);
    }
    12% {
        opacity: 1;
        transform: scaleY(1);
    }
    26% {
        opacity: 0.18;
        transform: scaleY(1.02);
    }
    42% {
        opacity: 1;
        transform: scaleY(1.01);
    }
    58% {
        opacity: 0.20;
        transform: scaleY(1.03);
    }
    100% {
        opacity: 0;
        transform: scaleY(1.05);
    }
}

#title-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5000;
    pointer-events: none; /* wichtig */
    opacity: 1;
    transition: opacity 0.4s ease;
}

#title-overlay img {
    width: 50vw;       /* responsive */
    max-width: 600px; /* Deckel nach oben */
    height: auto;
    pointer-events: auto;
    cursor: pointer;
}