/* Standard-Hintergrundfarbe */
body {
    background-color: #f8f9fa; /* Helles Standard-Design */
}

/* Dark Mode für Systeme mit dunklem Farbschema */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #010b19; /* Dunkler Hintergrund */
        color: white; /* Textfarbe ändern, um Kontrast zu schaffen */
    }
    .navbar {
        background-color: #333; /* Dunklere Navbar für den Dark Mode */
    }
    .btn-primary {
        background-color: #0056b3;
    }
    .btn-info {
        background-color: #17a2b8;
    }
}

/* Flexbox für Button-Zentrierung */
.button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .btn {
        font-size: 18px;
        padding: 15px 30px;
    }
}

/* Buttons Styling */
.btn {
    margin: 10px;
    width: 200px;
}

/* Footer fixieren */
.footer {
    position: fixed; /* Fixiert den Footer am unteren Ende */
    bottom: 0; /* Setzt ihn an den unteren Rand */
    width: 100%; /* Volle Breite */
    background-color: #02193a; /* Dunkle Hintergrundfarbe */
    color: #fff; /* Helle Textfarbe */
    padding: 10px 0; /* Vertikaler Abstand */
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.3); /* Schatten für Tiefe */
    z-index: 1000; /* Sicherstellen, dass der Footer oben bleibt */
}

/* Dark Mode für Footer */
@media (prefers-color-scheme: dark) {
    .footer {
        background-color: #02193a; /* Dunklerer Farbton im Dunkelmodus */
    }
}