/* Hintergrund für den Blog */
body.blog-background {
    background: url('/media/images/blog/Blog_01__Background.png') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    position: relative; /* Für das Overlay erforderlich */
}

/* Hauptcontainer für Blog-Bereich */
.main-container {
    display: flex; /* Flexbox für Layout */
    justify-content: flex-start; /* Inhalte nach links ausrichten */
    align-items: flex-start; /* Oben links ausrichten */
    width: 99.5%; /* Nutzt die gesamte Breite */
    margin: 3% 0; /* Abstand oben und unten */
    padding-left: 0; /* Kein zusätzlicher Abstand links */
    gap: 20px; /* Abstand zwischen Navigation und Inhalt */
}

/* Blog-Navigation */
.tab-navigation {
    font-family: 'Orbitron', sans-serif; /* Gleiche Schriftart wie im Blog-Inhaltsfenster */
    font-size: 1.2em; /* Einheitliche Schriftgröße */
    color: #FFF; /* Schriftfarbe */
    position: sticky; /* Navigation bleibt beim Scrollen sichtbar */
    width: 25%; /* Breitere Navigation für bessere Lesbarkeit */
    padding: 20px; /* Mehr Abstand innen */
    background: rgba(0, 0, 0, 0.85); /* Gleicher Hintergrund wie Blog-Inhalt */
    border-radius: 8px; /* Einheitliche Abrundung der Ecken */
    box-shadow: 0 0 10px rgba(64, 64, 64, 1); /* Gleicher Schatteneffekt */
    margin: 3% 0; /* Gleichmäßiger Abstand oben und unten */
}

/* Navigationselemente */
.tab-navigation ul {
    list-style: none; /* Entfernt Aufzählungszeichen */
    padding: 0;
    margin: 0;
}

.tab-navigation li {
    margin: 15px 0; /* Größerer Abstand zwischen Links */
}

.tab-navigation a {
    font-size: 1.2em; /* Einheitliche Schriftgröße */
    text-decoration: none; /* Entfernt Unterstreichung */
    color: #FFF; /* Weißer Titelstandard */
    transition: color 0.3s ease, transform 0.3s ease; /* Glatte Übergänge */
}

.tab-navigation a:hover {
    text-decoration: underline; /* Unterstreichung bei Hover */
    color: #FFF; /* Beibehaltung von Weiß beim Hover */
    transform: scale(1.05); /* Leichtes Vergrößern bei Hover */
}

.tab-navigation a span.blog-number {
    font-weight: bold; /* Blognummer fett darstellen */
    color: #00b4d8; /* Blognummer bleibt Blau */
}

.tab-navigation a span.blog-title {
    margin-left: 10px; /* Abstand zwischen Nummer und Titel */
    color: #FFF; /* Titel in Weiß */
    font-weight: normal; /* Titel bleibt normal */
}

/* Blog-Inhalt */
.content {
    font-family: 'Orbitron', sans-serif; /* Einheitliche Schriftart */
    flex-grow: 1; /* Inhalt nimmt verbleibenden Platz ein */
    width: 100%; /* Breite des Blog-Inhalts */
    padding: 32px;
    background: rgba(0, 0, 0, 0.85); /* Leichter, dunkler Hintergrund */
    border-radius: 8px; /* Abrundung der Ecken */
    box-shadow: 0 0 10px rgba(64, 64, 64, 1); /* Schatteneffekt */
    font-size: 1.2em; /* Einheitliche Schriftgröße wie die Blog-Links */
    color: #FFF; /* Gleiche Schriftfarbe wie die Blog-Links */
    line-height: 1.8; /* Zeilenhöhe für bessere Lesbarkeit */
}

/* Blogpost-Überschriften */
.content .blog-post h1, 
.content .blog-post h2 {
    font-family: 'Orbitron', sans-serif; /* Einheitliche Schriftart */
    font-weight: bold; /* Überschriften fett */
    color: #00b4d8; /* Hebt die Überschrift hervor */
    margin-bottom: 20px; /* Abstand nach unten */
    line-height: 1.5; /* Kompaktere Zeilenhöhe */
}

/* Absatztexte */
.content .blog-post p {
    margin-bottom: 15px; /* Abstand nach unten */
    font-size: 1.2em; /* Einheitliche Schriftgröße */
    color: #FFF; /* Gleiche Schriftfarbe */
    font-weight: normal; /* Normale Gewichtung für den Text */
}

/* Bilder und Beschriftungen */
.content .blog-post img {
    max-width: 100%; /* Bild passt sich der Breite an */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    border-radius: 8px; /* Gleiche Abrundung wie der Inhalt */
    margin: 20px 0; /* Abstand zu umliegendem Text */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); /* Leichter Schatten um das Bild */
}

.content .blog-post figcaption {
    font-size: 0.9em; /* Kleinere Schriftgröße für Bildunterschriften */
    color: #CCC; /* Dezente Schriftfarbe */
    margin-top: 5px; /* Abstand über der Beschriftung */
    text-align: center; /* Zentriert */
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px; /* Abstand zwischen Buttons */
}

.pagination button {
    padding: 10px 20px;
    background-color: #0077b6;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pagination button:hover {
    background-color: #00b4d8;
    transform: scale(1.1); /* Leichter Zoom-Effekt */
}

.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed; /* Zeigt an, dass der Button deaktiviert ist */
}