/* Hintergrund für die Über Mich Seite - wird vom Blog-Layout übernommen */
body.about-background {
    background-image: url('/media/images/about/OSISuperboardTextur.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Hauptcontainer für den Über Mich Bereich - ähnlich wie Blog-Layout */
.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 */
}

/* Navigation für Über Mich Seite - basierend auf Blog-Navigation */
.tab-navigation {
    position: sticky; /* Navigation bleibt beim Scrollen sichtbar */
    width: 20%; /* Breite der Navigation */
    padding: 10px;
    background: rgba(0, 0, 0, 0.8); /* Leichter transparenter Hintergrund */
    border-radius: 8px; /* Abrundung der Ecken */
    box-shadow: 0 0 10px rgba(32, 32, 32, 0.1); /* Schatteneffekt */
    margin-left: 0; /* Direkte Ausrichtung am linken Rand */
    margin: 3% 0; /* Abstand oben und unten */
}

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

.tab-navigation li {
    margin: 5px 0; /* Abstand zwischen Links */
}

.tab-navigation a {
    font-size: 1.66em; /* Vergrößert die Schriftgröße */
    text-decoration: none;
    color: #FFF;
}

.tab-navigation a:hover {
    text-decoration: underline; /* Unterstreichung bei Hover */
}

/* Über Mich Inhalt - angelehnt an Blog-Inhalt */
.content {
    flex-grow: 1; /* Inhalt nimmt verbleibenden Platz ein */
    width: 100%; /* Breite des Inhalts */
    padding: 32px;
    background: rgba(0, 0, 0, 0.8); /* Leichter transparenter Hintergrund */
    border-radius: 8px; /* Abrundung der Ecken */
    box-shadow: 0 0 10px rgba(64, 64, 64, 1); /* Schatteneffekt */
    margin-left: 0; /* Direkte Ausrichtung am linken Rand */
}

/* Über Mich Textstile */
.content .about-post {
    font-size: 1.66em; /* Schriftgröße für Text */
    line-height: 1.8; /* Zeilenhöhe für bessere Lesbarkeit */
    color: #FFF;
}

.content .about-post h2 {
    font-size: 24px; /* Schriftgröße der Überschrift */
    margin-bottom: 10px;
}

.content .about-post p {
    margin-bottom: 15px; /* Abstand nach unten */
}

.content .about-post figure {
    text-align: center; /* Zentriert das Bild */
    margin: 20px 0; /* Abstand oben und unten */
}

.content .about-post img {
    max-width: 100%; /* Bild passt sich der Breite an */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    border-radius: 4px; /* Leichte Abrundung der Bildränder */
}

.content .about-post figcaption {
    font-size: 14px; /* Kleinere Schriftgröße */
    color: #666; /* Dezente Farbe */
    margin-top: 5px; /* Abstand oberhalb der Unterschrift */
}