/* =========================================
   Layout.css
========================================= */


/* =========================================
   Panorama-Header
========================================= */

.panorama-header {
    position: relative;
    width: 100%;

    height: 25vh;
    min-height: 120px;
    max-height: 380px;

    background-image: url("https://wittenberge-entdecken.de/wp-content/uploads/2026/05/panorama-wittenberge-landesgartenschau-LAGA-2027.jpg-scaled.webp");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left center;

    animation: panMove 1000s linear infinite alternate;

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

/* Text in der Mitte */
.panorama-title {
    margin-top: 0.5rem; /* feinjustieren */

    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2vw, 3rem);
    text-align: center;
    color: #5e7f63;

    text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}


/* Bindestrich */
.header-minus {
    color: #8d8d8d;
}

/* .de */
.header-domain {
    color: #8d8d8d;

    font-size: 0.58em;

    letter-spacing: 0.03em;

    opacity: 0.9;
}












/* Bewegung */
@keyframes panMove {
    0% {
        background-position: left center;
    }
    100% {
        background-position: right center;
    }
}

/* Hover pausiert */
.panorama-header:hover {
    animation-play-state: paused;
}



/* Scroll-To-Top Button */

#scrollTopBtn {
    position: fixed;
    right: 22px;
    bottom: 22px;

    width: 54px;
    height: 54px;

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

    background: rgba(20, 20, 20, 0.88);
    border: 2px solid #d94a38;
    border-radius: 50%;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease,
        background 0.25s ease;

    z-index: 9999;

    backdrop-filter: blur(4px);
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTopBtn:hover {
    background: rgba(40, 40, 40, 0.95);
}

#scrollTopBtn svg {
    width: 24px;
    height: 24px;
    fill: #d94a38;
}