html, body {
    height: 100%;
}

/* Willkommensnachricht */
h1 {
    margin-top: -22px;
    margin-bottom: 30px;
    font-size: 30px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: Text deutlicher machen */
}

@media (max-width: 768px) {
    h1 {
        font-size: 24px; /* Anpassung der Schriftgröße für kleinere Bildschirme */
    }
}

/* Styling der Card-Boxen */
.card-body {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Setzt die Hintergrundfarbe der Kartenboxen auf transparent */
    color: white;
    border-radius: 10px; /* Runde Ecken für eine bessere Optik */
}

.card {
    background-color: transparent !important;
    border: none;
    box-shadow: none;
}

/* Form-Container */
.form-container {
    background-color: transparent;
}

.btn_transparent {
	 background-color: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-focus-ring-color: transparent !important;
}

/* Styling der Linie (hr) */
hr {
    border: none;
    height: 1px;
    background-color: #555; /* Linie mit dunklerer Farbe für Kontrast */
    margin: 20px 0; /* Abstand über und unter dem <hr> */
}

/* Styling der Online-Benutzer-Anzeige */
.online-users {
    color: white;
    font-size: 16px;
    margin-top: 10px;
}

/* Abstand für den gesamten Container */
.container {
    margin-top: 20px; /* Abstand zum oberen Rand des Containers */
    margin-bottom: 20px; /* Abstand zum unteren Rand des Containers */
}

/* Globale Einstellungen */
html {
    overflow-y: auto; /* Immer vertikales Scrollen anzeigen, um Layout-Verschiebungen zu vermeiden */
}