
/* ==========================================================
   SpielNesto – Zentrale CSS-Datei
   ==========================================================
   Lädt die globalen Variablen und die Basis-Styles
   sowie die Styles für Header und Footer.
   ========================================================== */


/* ----------------------------------------------------------
   Globale Variablen
---------------------------------------------------------- */
@import "variables.css";


/* ----------------------------------------------------------
   Basis-Styles
---------------------------------------------------------- */
@import "base/base.css";


/* ----------------------------------------------------------
   Header und Footer
---------------------------------------------------------- */
@import "header/header.css";
@import "footer/footer.css";


/* ----------------------------------------------------------
   Globale Modal-Fenster
---------------------------------------------------------- */
.modal {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.5);

    z-index: var(--z-modal);
}


/* ----------------------------------------------------------
   Modal – Sichtbarkeit
---------------------------------------------------------- */
.modal.hidden {
    display: none;
}


/* ----------------------------------------------------------
   Modal – Inhalt
---------------------------------------------------------- */
.modal-content {
    background: var(--background-color);

    padding: 20px;
    border-radius: 10px;

    max-width: 400px;
    width: 90%;

    text-align: center;
}


/* ----------------------------------------------------------
   Globales Nachrichtenfenster
---------------------------------------------------------- */
#globalModal {
    display: flex;
}

#globalModal.hidden {
    display: none;
}
