/* Erzeugt Platz unter dem fixierten Header */
body {
    padding-top: 60px; /* Passen Sie den Wert an die tatsächliche Höhe Ihres Headers an */
    padding-bottom: 50px; /* Passen Sie den Wert an die tatsächliche Höhe Ihres Footers an */
}

/* Die folgenden Klassen sorgen dafür, dass Header und Footer oben/unten fixiert sind */
.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Stellt sicher, dass es über dem Inhalt liegt */
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Stellt sicher, dass es über dem Inhalt liegt */
}
#loadingOverlay {
    /* WICHTIG: Stellt sicher, dass es standardmäßig versteckt ist */
    display: none;

    /* Die restlichen Stile */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    /* Verwenden Sie flex/grid, um den Inhalt zu zentrieren, aber erst wenn 'display: flex' gesetzt wird */
    justify-content: center;
    align-items: center;
    color: white;
}

/* Container für den weißen Kreis (aus dem vorherigen Schritt) */
.logo-circle {
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Das Chamäleon-Bild im Kreis (aus dem vorherigen Schritt) */
.logo-img {
    max-height: 32px;
    max-width: 32px;
    display: block;
}

.gradient-text {
    /* WICHTIG: Fallback-Farbe, falls der Browser den Gradienten nicht unterstützt */
    color: #eacaa9;

    /* 1. Definiere den Farbverlauf (Gradient) als Hintergrund */
    background: linear-gradient(to right, #eacaa9, #235354);

    /* 2. Schneide den Hintergrund auf die Form des Textes zu */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. Mache den Text selbst transparent, damit der Hintergrund sichtbar wird */
    -webkit-text-fill-color: transparent;

    /* Optional: Für Firefox und andere (kann bei Textfüllung variieren) */
    /* text-fill-color: transparent; */
}

/* Optional: Stellen Sie sicher, dass der Text im Navbar nicht zu klein ist */
.navbar-brand .gradient-text {
    font-size: 1.25rem; /* Standard Navbar Brand Größe */
}