/* Scroll-down Indicator — sitzt unten im Hero-Bild und scrollt mit nach oben weg */

.frame-layout-maxhero,
.frame-layout-hero {
    position: relative;
}

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: clamp(60px, 9vh, 110px);
    transform: translateX(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.25s ease;
    animation: scroll-indicator-bounce 1.8s ease-in-out infinite;
}

.scroll-indicator:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.scroll-indicator:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.scroll-indicator__icon {
    width: 22px;
    height: 22px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

@keyframes scroll-indicator-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40%                     { transform: translateX(-50%) translateY(8px); }
    60%                     { transform: translateX(-50%) translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-indicator { animation: none; }
}

@media (max-width: 575px) {
    .scroll-indicator { width: 40px; height: 40px; }
    .scroll-indicator__icon { width: 18px; height: 18px; }
}