/* Grundlegende Reset-Stile */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body-Grundstil */
body {
    font-family: Arial, sans-serif;
    background-color: #eaebf0; /* Hellgrauer Hintergrund */
}

/* Hauptcontainer, um Inhalte zu zentrieren */
.container {
    max-width: 1200px; /* Maximale Breite für große Bildschirme */
    margin: 0 auto; /* Zentrieren in der Mitte */
    padding: 0 0px; /* Innenabstand auf kleinen Bildschirmen */
}

/* Stil für die Überschrift und Navigation */
header {
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Standardmäßig untereinander */
    align-items: center; /* Zentrieren */
    background-color: #2a2d3c;
    color: white;
    padding: 20px;
}

header a {
    color: white; /* Links in Weiß */
    text-decoration: none; /* Keine Unterstreichung */
    position: relative; /* Position für Pseudo-Elemente */
}

header a::after {
    content: ''; /* Pseudo-Element für die Unterstreichung */
    display: block; /* Als Blockelement anzeigen */
    height: 1px; /* Höhe der Unterstreichung */
    background-color: white; /* Farbe der Unterstreichung */
    position: absolute; /* Absolute Positionierung */
    left: 0; /* Ausrichtung nach links */
    right: 0; /* Ausrichtung nach rechts */
    bottom: -1px; /* Abstand nach unten (anpassen wie gewünscht) */
    /*transition: width 0.9s;*/ /* Sanfter Übergang */
}

header a:hover {
    text-decoration: none; /* Unterstreichen bei Hover */
}

nav {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    margin-top: 10px; /* Abstand zum Header */
}

nav a {
    color: white;
    /*text-decoration: none;*/
    margin: 0 15px;
}

nav a:hover {
    text-decoration: none;
}

hr {
    border: none; /* Entfernt die Standard-Grenze */
    height: 2px; /* Höhe der Linie */
    background-color: #eaebf0; /* Farbe der Linie */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
    margin: 20px 0; /* Abstand über und unter der Linie */
}

.hr-container {
    background-color: #fff; /* Weißer Hintergrund für die Linie */
    padding: 5px 0; /* Innenabstand oben und unten */
}

/* Willkommensabschnitt */
.welcome {
    background-color: white;
    color: black;
    padding: 20px;
    text-align: center;
    padding: 20px 20px;
}

.welcome a {
    color: black; /* Links in Weiß */
    text-decoration: none; /* Keine Unterstreichung */
    position: relative; /* Position für Pseudo-Elemente */
}

.welcome a::after {
    content: ''; /* Pseudo-Element für die Unterstreichung */
    display: block; /* Als Blockelement anzeigen */
    height: 1px; /* Höhe der Unterstreichung */
    background-color: black; /* Farbe der Unterstreichung */
    position: absolute; /* Absolute Positionierung */
    left: 0; /* Ausrichtung nach links */
    right: 0; /* Ausrichtung nach rechts */
    bottom: -1px; /* Abstand nach unten (anpassen wie gewünscht) */
    /*transition: width 0.9s;*/ /* Sanfter Übergang */
}

.welcome a:hover {
    text-decoration: none; /* Unterstreichen bei Hover */
}

.content {
    background-color: white;
    color: black;
    padding: 20px;
    text-align: left;
    padding: 20px 20px;
}

.content ul {
    /*list-style: none; /* Standard Aufzählungszeichen entfernen */
    padding-left: 20px; /* Einrückung für die Liste */
}

.content p {
    padding: 5px 0; /* Vertikaler Abstand zwischen den Listenelementen */
}

.content a {
    color: black; /* Links in Weiß */
    text-decoration: none; /* Keine Unterstreichung */
    position: relative; /* Position für Pseudo-Elemente */
}

.content a::after {
    content: ''; /* Pseudo-Element für die Unterstreichung */
    display: block; /* Als Blockelement anzeigen */
    height: 1px; /* Höhe der Unterstreichung */
    background-color: black; /* Farbe der Unterstreichung */
    position: absolute; /* Absolute Positionierung */
    left: 0; /* Ausrichtung nach links */
    right: 0; /* Ausrichtung nach rechts */
    bottom: -1px; /* Abstand nach unten (anpassen wie gewünscht) */
    /*transition: width 0.9s;*/ /* Sanfter Übergang */
}

.content a:hover {
    text-decoration: none; /* Unterstreichen bei Hover */
}

/* Abschnitt für die Post-Liste */
.post-list {
    padding: 20px;
    background-color: white;
    color: black;
}

.post-list ul {
    /*list-style: none; /* Standard Aufzählungszeichen entfernen */
    padding-left: 20px; /* Einrückung für die Liste */
}

.post-list li {
    padding: 5px 0; /* Vertikaler Abstand zwischen den Listenelementen */
    /*border-bottom: 1px solid #ccc; /* Optional: Trennlinie zwischen den Listenelementen */
}

.post-list a {
    color: black; /* Links in Weiß */
    text-decoration: none; /* Keine Unterstreichung */
    position: relative; /* Position für Pseudo-Elemente */
}

.post-list a::after {
    content: ''; /* Pseudo-Element für die Unterstreichung */
    display: block; /* Als Blockelement anzeigen */
    height: 1px; /* Höhe der Unterstreichung */
    background-color: black; /* Farbe der Unterstreichung */
    position: absolute; /* Absolute Positionierung */
    left: 0; /* Ausrichtung nach links */
    right: 0; /* Ausrichtung nach rechts */
    bottom: -1px; /* Abstand nach unten (anpassen wie gewünscht) */
    /*transition: width 0.9s;*/ /* Sanfter Übergang */
}

.post-list a:hover {
    text-decoration: none; /* Unterstreichen bei Hover */
}

/* Footer */
footer {
    background-color: #2a2d3c;
    color: white;
    text-align: center;
    padding: 10px;
    display: flex; /* Flexbox für den Footer aktivieren */
    justify-content: space-between; /* Abstand zwischen den Elementen */
    flex-wrap: wrap; /* Elemente sollen umschlagen auf kleinen Bildschirmen */
}

footer .footer-left, footer .footer-right {
    margin:10px 0; /* Abstand zwischen den Footer-Elementen */
}

footer a {
    color: white; /* Links in Weiß */
    text-decoration: none; /* Keine Unterstreichung */
    position: relative; /* Position für Pseudo-Elemente */
}

footer a:hover {
    text-decoration: none; /* Unterstreichen bei Hover */
}
    
footer a::after {
    content: ''; /* Pseudo-Element für die Unterstreichung */
    display: block; /* Als Blockelement anzeigen */
    height: 1px; /* Höhe der Unterstreichung */
    background-color: white; /* Farbe der Unterstreichung */
    position: absolute; /* Absolute Positionierung */
    left: 0; /* Ausrichtung nach links */
    right: 0; /* Ausrichtung nach rechts */
    bottom: -1px; /* Abstand nach unten (anpassen wie gewünscht) */
    /*transition: width 0.9s;*/ /* Sanfter Übergang */
}

/* Responsives Styling */
@media (min-width: 769px) {
    header {
        flex-direction: row; /* Nebeneinander für größere Bildschirme */
        justify-content: space-between; /* Abstand zwischen Überschrift und Navigation */
    }

    nav {
        margin-top: 0; /* Verhindert zusätzlichen Abstand */
    }
}

@media (max-width: 768px) {
    nav {
        flex-direction: row; /* Navigation horizontal unter h1 */
        flex-wrap: wrap; /* Für mehr Flexibilität bei der Darstellung */
    }

    nav a {
        margin: 10px; /* Abstand zwischen den Links */
    }
}

@media (max-width: 768px) {
    footer {
        flex-direction: column; /* Elemente untereinander anordnen auf kleinen Bildschirmen */
        align-items: center; /* Zentrieren auf kleinen Bildschirmen */
    }
}