#idPopupContainer {
        position: absolute;
        top: 10%;
        left: calc(50% - 20%);
        width: 40%;
        padding: 0.4em;
        background-color: var(--text-color);
        color: var(--secondary-text-color);
        font-family: 'Quicksand';
        border-radius: 8px;
        box-shadow: 4px 4px 4px #757575;
        z-index: 10;
    }
    .popup-head {
        margin: 0 0.4em;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .popup-headline {
        padding-top: 1em;
        color: var(--primary-color);
        font-weight: bold;
    }
    #idClose {
        width: 24px;
        height: 24px;
        margin: auto 0;
        text-align: center;
        background: transparent;
        color: var(--primary-color);
        font-weight: bold;
        border: 2px solid var(--secondary-text-color);
        border-radius: 12px;
        cursor: pointer;
        transition: all 150ms ease-in-out;
    }
    #idClose:hover {
        background: var(--primary-color);
        color: var(--secondary-text-color);
    }
    #idClose:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
    .popup-content {
        margin: auto 0.4em;
        padding: 0.8em 0;
        text-align: justify;
        hyphens: auto;
        border-radius: 8px;
    }
    .popup-content ul {
        margin: 0.4em 0 0.4em 1em;
    }
    .popup-content ul li {
        padding-left: 0.4em; 
        font-size: clamp(0.95rem, 1vw, 1.4rem);
        line-height: 1.8;
        list-style-type: disc;
    }
    .popup-content a {
        text-decoration: none;
        color: var(--primary-color);
        font-size: clamp(0.95rem, 1vw, 1.4rem);
        font-weight: bold;
        transition: all 150ms ease-in;
    }
    .popup-content a:hover {
        color: var(--accent-color);
    }
    .popup-content a:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
    
    /* Reduced Motion Support */
    @media (prefers-reduced-motion: reduce) {
        #idClose {
            transition: none;
        }
        .popup-content a {
            transition: none;
        }
    }
    @media (max-width: 1080px) {
        #idPopupContainer {
            left: calc(50% - 25%);
            width: 50%;
        }
    }
    @media (max-width: 799px) {
        #idPopupContainer {
            left: calc(50% - 35%);
            width: 70%;
        }
    }
    @media (max-width: 600px) {
        #idPopupContainer {
            left: calc(50% - 40%);
            width: 80%;
        }
    }