:root {
    /* Kundenfarben – bitte an Corporate Design anpassen */
    --farbe-kunde1: #c8a96e;          /* Primär (Gold) */
    --farbe-kunde2: #414143;          /* Sekundär (Dunkelgrau) */
    --farbe-kunde3: #938983;          /* Tertiär (Grau) */
    --farbe-kunde4: #2c2c2c;          /* Quartär (Fast-Schwarz) */

    --clr-primary-100: #ffffff;       /* Helle Grundfarbe (Weiß) */

    --info-pulse-color: 200, 169, 110; /* RGB-Werte für rgba() in der Pulse-Animation */
}

/* Ausblenden wenn nicht location="website" */
html:not([location="website"]) {
    #info-button,
    #info-overlay {
        display: none;
    }
}

html[location="website"] {

    /* Infobutton Sticky */
    #info-button {
        position: fixed;
        top: 50%;
        right: .75rem;
        transform: translateY(-50%);
        z-index: 1050;
        padding: .5rem;
        border-radius: 50%;
        transition: opacity .4s ease, visibility .4s;
    }

    #info-button button {
        width: 3rem;
        height: 3rem;
        background-color: var(--farbe-kunde3);
        color: var(--clr-primary-100);
        border: none;
        border-radius: 50%;
        font-size: 1.4rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: info-pulse 2s ease-out infinite;

        &:hover {
            transform: scale(1.1);
            border: none;
        }
    }

    #info-overlay {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        right: -400px;
        width: 320px;
        background-color: var(--clr-primary-100);
        box-shadow: -3px 0 10px hsla(0, 0%, 0%, .2);
        transition: right .4s ease-in-out;
        z-index: 1060;
        padding: 1.5rem;
        overflow-y: auto;
        max-height: 90vh;
        border-radius: 10px 0 0 10px;

        &.open {
            right: 0;
        }

        & #close-info {
            background: none;
            border: none;
            font-size: 1.3rem;
            position: absolute;
            top: 1rem;
            right: 1rem;
            cursor: pointer;
        }
    }

    /* Desktop: versteckt, sichtbar nach Scrollen (JS setzt .visible-desktop) */
    @media (min-width: 1200px) {
        #info-button {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        #info-button.visible-desktop {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
    }

    /* Mobil: versteckt, sichtbar nach Scrollen (JS setzt .visible-mobile) */
    @media (max-width: 1199px) {
        #info-button {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        #info-button.visible-mobile {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
    }

    /* Background Overlays – Basis */
    [class$="-overlay"] {
        position: relative;
        z-index: 1;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    }

    /* Overlay Farb-Varianten */
    .bg-dark-overlay::before      { background: color-mix(in srgb, black 50%, transparent); }
    .bg-primary-overlay::before   { background: color-mix(in srgb, var(--farbe-kunde1) 90%, transparent); }
    .bg-secondary-overlay::before { background: color-mix(in srgb, var(--farbe-kunde2) 90%, transparent); }
    .bg-third-overlay::before     { background: color-mix(in srgb, var(--farbe-kunde3) 90%, transparent); }
    .bg-fourth-overlay::before    { background: color-mix(in srgb, var(--farbe-kunde4) 90%, transparent); }

    .bgscroll {
        @media screen and (min-width: 900px) {
            background-attachment: fixed;
        }
    }
}

@keyframes info-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--info-pulse-color), .7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(var(--info-pulse-color), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--info-pulse-color), 0);
    }
}