/* Modal Container */
.usernotice-modal {
    display: none; /* Modal standardmäßig verstecken */
    position: fixed; /* Fest positioniert */
    z-index: 1000; /* Über anderen Elementen angezeigt */
    left: 52.5%; /* Horizontale Zentrierung */
    top: 10%; /* Abstand von der oberen Seite */
    transform: translateX(-50%); /* Modal horizontal zentrieren */
    width: 90%; /* Breite für Mobilgeräte anpassen */
    max-width: 650px; /* Maximale Breite des Modals */
    max-height: 80%; /* Maximale Höhe des Modals */
    overflow-y: auto; /* Scrollen, wenn der Inhalt zu groß ist */
}

/* Modal Inhalt */
.usernotice-modal-content {
    background-color: #2196f3; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    padding: 20px; /* Innenabstand */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Schatteneffekt */
    margin: 0 auto; /* Zentrieren des Modalinhalts */
    width: 100%; /* 100% Breite des Containers */
    max-width: 650px; /* Maximale Breite */
}

/* Schließen-Button */
.usernotice-close {
    color: white; /* Farbe des Schließen-Buttons */
    float: right; /* Button nach rechts ausrichten */
    font-size: 28px; /* Größe des Schließen-Buttons */
    font-weight: bold; /* Gewicht des Schließen-Buttons */
    cursor: pointer; /* Zeiger-Style beim Hover */
}

.usernotice-close:hover {
    color: darkred; /* Farbe beim Hover über den Schließen-Button */
}

/* Modal Header */
.usernotice-modal-content h3 {
    font-size: 2rem; /* Entspricht der typischen Größe von <h2> */
    margin: 0 0 10px 0; /* Abstand nach unten */
    color: white; /* Schriftfarbe */
}

/* Responsive Design für kleinere Bildschirme */
@media (max-width: 600px) {
    .usernotice-modal {
        top: 15%; /* Etwas weiter unten auf Mobilgeräten */
        left: 50%;
        transform: translateX(-50%);
        width: 95%; /* Breitere Darstellung auf kleineren Bildschirmen */
    }

    .usernotice-modal-content {
        padding: 15px; /* Weniger Padding auf Mobilgeräten */
        max-width: 100%; /* Keine feste Breite auf Mobilgeräten */
    }

    .usernotice-close {
        font-size: 24px; /* Kleinere Schließen-Schaltfläche */
    }

        /* Dezenter Trennstrich */
    .usernotice-divider {
        border: none;
        border-top: 1px solid rgba(244, 244, 244, 0.98);
        margin: 10px 0;
        width: 100%;
    }
}