footer {
    background-color: #333; /* Dunkelgrauer Hintergrund für den Footer */
    color: var(--text-color); /* Weiße Textfarbe */
    display: flex; /* Aktiviert Flexbox für eine flexible Layout-Gestaltung */
    justify-content: center; /* Zentriert Inhalte horizontal */
    align-items: center; /* Zentriert Inhalte vertikal */
    padding: 1rem 0; /* Setzt den vertikalen Innenabstand auf 1rem oben und unten */
    position: relative; /* Position relativ zum normalen Fluss */
    width: 100%; /* Breite auf 100% des Elternelements */
}

footer a {
    padding: 0px; /* Kein Innenabstand für Links */
    color: var(--text-color); /* Weiße Textfarbe für Links */
    text-decoration: none; /* Keine Unterstreichung bei Links */
    user-select: none;
}

.footer-content {
    display: flex; /* Nutzt Flexbox für die Anordnung der Inhalte */
    justify-content: center; /* Zentriert die Inhalte horizontal */
    width: 100%; /* Breite auf 100% des Elternelements */
}

.footer-content p {
    margin-right: 20px; /* Rechter Abstand für <p>-Elemente, außer dem letzten */
}

.footer-content p:last-child {
    margin-right: 0; /* Kein rechter Abstand für das letzte <p>-Element */
}

@media only screen and (max-width: 768px) {
    /* Regeln für Bildschirme kleiner als 768px Breite */

    footer {
        padding: 1rem 0; /* Beibehaltung des vertikalen Innenabstands */
        flex-direction: column; /* Stapelt die Inhalte vertikal */
    }

    footer a {
        margin-bottom: 5px; /* Fügt einen unteren Abstand zu jedem Link hinzu */
    }

    .footer-content {
        flex-direction: row; /* Richtet die Inhalte horizontal aus */
    }

    .footer-content p {
        margin: 10px; /* Setzt einen gleichmäßigen Abstand um jedes <p>-Element */
    }
}

@media only screen and (max-width: 388px) {
    /* Regeln für Bildschirme kleiner als 768px Breite */

    footer {
        padding: 1rem 0; /* Beibehaltung des vertikalen Innenabstands */
        flex-direction: column; /* Stapelt die Inhalte vertikal */
    }

    footer a {
        margin-bottom: 5px; /* Fügt einen unteren Abstand zu jedem Link hinzu */
    }

    .footer-content {
        flex-direction: column; /* Richtet die Inhalte horizontal aus */
        text-align: center;
    }

    .footer-content p {
        margin: 10px; /* Setzt einen gleichmäßigen Abstand um jedes <p>-Element */
    }
}