/* ---- GENERALS ------ */
/* Den gesamten Bootstrap-Font überschreiben */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

.quicksand-<uniquifier> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* Optional: Überschriften etwas fetter und moderner */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    letter-spacing: -0.02em; /* Macht es noch moderner */
}
body {
    /* Sicherstellen, dass der Hintergrund die volle Höhe einnimmt */
    margin: 0;
    padding: 0;
    min-height: 100vh;

    /* Der diagonale Verlauf basierend auf deinem Bild */
    background: linear-gradient(
        45deg, 
        #7b2ff7 0%,    /* Das kräftige Lila unten links */
        #3e58e2 30%,   /* Übergang in ein tiefes Blau */
        #2196f3 60%,   /* Das dominante Blau in der Mitte */
        #00bcd4 85%,   /* Übergang zu Türkis */
        #00f2fe 100%   /* Das helle Türkis/Cyan oben rechts */
    );

    /* Hintergrund fixieren, damit er beim Scrollen nicht mitwandert */
    background-attachment: fixed;
    
    /* Deine neue Schriftart */
    font-family: 'Inter', sans-serif;
    color: white; /* Da der Hintergrund oben dunkel ist, brauchen wir helle Schrift */
}
/* ---- GENERALS ENDE ------ */



/* -------NAVBAR ------ */
    /* 2. Die Navbar direkt an den Rand zwingen */
    .navbar {
        position: fixed; /* Ändere sticky-top zu fixed, um sicherzugehen */
        top: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 1030; /* Damit sie über allem liegt */
    }

    /* WICHTIG: Den Leerraum im umschließenden Container entfernen */
    .navbar > .container-fluid {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Damit das Bootstrap-Container-System gut aussieht */
    .bg-body-tertiary {
        background-color: rgba(36, 35, 35, 0.8) !important; /
    }
      a.navbar-brand {
        color: #ffffff !important;
      }
      a.nav-link {
        color: #a5a5a5 !important;
      }
      a.nav-link.active {
        color: #ffffff !important;
      }
    /* 1. Die Basis-Links anpassen und den Übergang definieren */
    a.nav-link {
        color: #a5a5a5 !important;
        /* transition: Eigenschaft | Dauer | Zeitfunktion */
        transition: color 0.3s ease-in-out, transform 0.2s ease; 
        display: inline-block; /* Erforderlich für kleine Bewegungen wie transform */
    }

    /* 2. Der Hover-Effekt */
    a.nav-link:hover {
        color: #ffffff !important; /* Wird beim Drüberfahren weiß */
        /* Optional: Ein minimales Hochlupfen für mehr Dynamik */
        transform: translateY(-1px); 
    }

    /* 3. Den Marken-Namen ebenfalls sanft machen */
    a.navbar-brand {
        color: #ffffff !important;
        transition: opacity 0.3s ease;
    }


    /* Dein bestehender Hintergrund-Code */
    .bg-body-tertiary {
        background-color: rgba(36, 35, 35, 0.8) !important;
        backdrop-filter: blur(10px); /* Tipp: Füge das für den Glass-Effekt hinzu! */
    }
    .sticky-top {
        top: 0;
        z-index: 1020;
    }
    /* Ein wenig Abstand zum ersten Link */
    .navbar-brand {
        margin-bottom: 0;
        font-size: 1.5rem;
        padding-right: 1rem;
    }

        /* NOVBAR RESPONSE */

        /* Für Mobilgeräte: In der Mitte untereinander stapeln */
        @media (max-width: 991px) {
            .navbar-nav {
                text-align: center;
            }
            .navbar-brand {
                padding-right: 0;
                margin-bottom: 1rem;
                display: block;
            }
        }
        /* NOVBAR RESPONSE ENDE */
/* -------NAVBAR ------ */


/* ---- CONTENT ---- */
.container-content {
    background: rgba(255, 255, 255, 0.1); /* Leicht transparenter Hintergrund für Inhalte */
    backdrop-filter: blur(10px);          /* Schicker Milchglas-Effekt */
    border-radius: 15px;
    padding: 30px;
    margin-top: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}


/* 3. Den Wrapper für den Content anpassen */
.main-wrapper {
    /* Sicherstellen, dass der Content direkt nach der Navbar beginnt */
    padding-top: 80px; 
}


        /* LOG IN FORMULAR */
                /* Glassmorphism Card */
                .login-card {
                    background: rgba(255, 255, 255, 0.1); /* Sehr dezentes Weiß */
                    backdrop-filter: blur(15px);         /* Milchglas-Effekt */
                    -webkit-backdrop-filter: blur(15px);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    border-radius: 20px;
                    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
                }

                /* Styling der Eingabefelder */
                .custom-input {
                    background: rgba(255, 255, 255, 0.05) !important;
                    border: 1px solid rgba(255, 255, 255, 0.2) !important;
                    color: white !important;
                    border-radius: 10px;
                }

                .custom-input::placeholder {
                    color: rgba(255, 255, 255, 0.4);
                }

                .custom-input:focus {
                    background: rgba(255, 255, 255, 0.1) !important;
                    border-color: #00f2fe !important; /* Dein Türkis beim Anklicken */
                    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
                }

                /* Der Button im Farbverlauf-Stil */
                .btn-login {
                    background: linear-gradient(45deg, #7b2ff7, #2196f3);
                    border: none;
                    color: white;
                    font-weight: bold;
                    padding: 12px;
                    border-radius: 10px;
                    transition: transform 0.2s, box-shadow 0.2s;
                }

                .btn-login:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(123, 47, 247, 0.4);
                    color: white;
                }

        /* LOG IN FORMULAR ENDE */
/* ---- CONTENT ENDE ---- */

/*----------- FOOTER --------*/
.footer {
    font-size: 12px;
    padding-top: 30px;
}
/*----------- FOOTER --------*/