/* Stellt sicher, dass der Hauptbereich die volle Höhe des Viewports einnimmt */
main {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Stellt sicher, dass der Hauptbereich mindestens die Höhe des Viewports einnimmt */
    padding-bottom: 100px; /* Platz für den Footer schaffen */
}

/* In der mobilen Ansicht (max-width: 576px) */
@media (max-width: 576px) {
    main {
        min-height: calc(100vh - 80px);  /* 80px Platz für die fixierte Navbar */
        padding-bottom: 120px;  /* Sicherstellen, dass der Footer genug Platz hat */
    }
}

/* Sicherstellen, dass keine horizontale Scrollleiste erscheint */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Abstand nach dem Inhalt in der mobilen Ansicht */
main > p {
    margin-bottom: 50px; /* Entfernt unnötigen Abstand */
}