/* Grundlegende Stile für die Seite */
body {
    margin: 0; /* Entfernt Standardmargen */
    font-family: Arial, sans-serif; /* Setzt die Schriftart */
}

/* Stile für den Footer */
.footer {
    /*background-color: #f1f1f1;  Hintergrundfarbe des Footers */
    background-color: #ffffff; /* Hintergrundfarbe des Footers */
    padding: 20px 0; /* Innenabstand oben und unten */
    font-family: Helvetica, Arial, sans-serif; /* Schriftart für den Footer */
}

.footer-container {
    display: flex; /* Flexbox für gleichmäßige Verteilung der Spalten */
    justify-content: space-between; /* Verteilte Spalten */
    max-width: 1200px; /* Maximale Breite des Containers */
    margin: 0 auto; /* Zentriert den Container */
    padding: 0 20px; /* Abstand links und rechts steuern */
}

.footer-column {
    flex: 1; /* Jede Spalte nimmt gleich viel Platz ein */
    text-align: left; /* Zentriert den Text in jeder Spalte */
    padding: 0 10px; /* Abstand innerhalb der Spalte */
}

.footer-column h3 {
    font-size: 20px; /* Schriftgröße der Überschrift */
    margin-bottom: 10px; /* Abstand nach unten zur Trennung von Links */
    color: #000; /* Farbe der Überschrift */
}

.footer-column a {
    display: block;
    text-align: left; /* Links ausrichten */
    color: #000; /* Standardfarbe der Links */
    text-decoration: none; 
    margin: 5px 0; 
    transition: color 0.3s; 
}

.footer-column a:hover {
    color: #ff0000; /* Rot beim Hovern */
}
.footer-column a:active,
.footer-column a:focus {
    color: #ff0000; /* Rot beim Klicken */
}

.footer-column a:visited {
    color: #000; /* Besuchte Links bleiben schwarz */
}

/* Spezifischer Selektor, um :hover zu priorisieren */
.footer-column a:visited:hover {
    color: #ff0000; /* Rot beim Hovern auch bei besuchten Links */
}

.footer-column a:first-of-type {
    margin-top: 20px; /* Größerer Abstand nur für den ersten Link */
}
 
/* Neue Zeile im Footer */
.footer-extra {
    display: flex; /* Flexbox für die Anordnung der Links */
    justify-content: space-between; /* Platz zwischen den beiden Bereichen */
    align-items: center; /* Vertikal zentrieren */
    margin-top: 20px; /* Abstand zu den anderen Spalten */
    padding: 0 20px; /* Abstand links und rechts */
}

.left-links a,
.right-links a {
    color: #808080; /* Graue Farbe für die Links */
    text-decoration: none; /* Keine Unterstreichung */
    margin-right: 10px; /* Abstand zwischen den Links auf der linken Seite */
    transition: color 0.3s; /* Weicher Übergang bei Hover */
}

.left-links {
    display: flex; /* Links nebeneinander anordnen */
    flex-wrap: wrap; /* Falls nötig, Zeilenumbruch */
}

.right-links {
    display: flex; /* Links nebeneinander anordnen */
    margin-left: auto; /* Schiebt das gesamte Element nach rechts */
    justify-content: flex-end; /* Rechtsbündige Anordnung */
    width: 100%; /* Breite für die Anordnung */
}

.right-links a {
    margin-left: 10px; /* Abstand zwischen den Buchstaben */
}

.left-links a,
.right-links a {
    color: #808080; /* Graue Farbe für die Links */
    text-decoration: none; /* Keine Unterstreichung */
    transition: color 0.3s; /* Weicher Übergang bei Hover */
}

.left-links a:hover,
.right-links a:hover {
    color: #000; /* Schwarz bei Hover */
}


/* Medienabfrage für kleinere Bildschirme */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Spalten untereinander anordnen */
        align-items: center; /* Zentriert die Spalten */
    }

    .footer-column {
        margin-bottom: 20px; /* Abstand zwischen den Spalten */
    }
}