/* --- GRUND-EINSTELLUNGEN --- */
* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    padding: 0;
    /* Klassische System-Serifenschrift (wie im Bild) */
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #333333;
    background-color: #ffffff;
}

/* --- LAYOUT --- */
.wrapper {
    display: flex;
    max-width: 1200px;
    margin: 0 auto; /* Zentriert die Seite auf großen Bildschirmen */
    min-height: 100vh;
}

/* --- LINKE SPALTE (Menü & Logo) --- */
.sidebar {
    width: 320px;
    flex-shrink: 0;
}

.logo {
    background-color: #333333; /* Falls das Logo transparent ist, gibt dies den dunklen Hintergrund */
    line-height: 0; /* Verhindert weiße Ränder unter dem Bild */
}

.logo img {
    width: 96%;
    height: auto;
    display: block;
    padding: 8px 15px;
}

/* --- MENÜ --- */
.main-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #555555; /* Dunkelgrauer Hintergrund */
}

.main-menu li {
    border-bottom: 1px solid #e0e0e0; /* Helle Trennlinien zwischen den Punkten */
}

.main-menu a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    text-align: right; /* Text nach rechts ausgerichtet */
    padding: 8px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.30rem;
    letter-spacing: 1px;
}

/* Hover-Effekt (wenn man mit der Maus drüberfährt) und aktiver Zustand */
.main-menu a:hover,
.main-menu a.active {
    background-color: #333333;
    color: #ffffff;
}

/* --- RECHTE SPALTE (Inhalt) --- */
.content {
    flex-grow: 1;
    padding: 40px 60px;
    background-color: #ffffff;

    /* Macht den Inhaltsbereich zu einer flexiblen Spalte */
    display: flex;
    flex-direction: column;
}

.content h1 {
    text-align: center;
    font-weight: normal;
    font-size: 2.45rem;
    margin-top: 0;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.content p {
    text-align: justify; /* Blocksatz wie im Bild */
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 1.50rem;
}

/* Kleine Anpassungen für den unteren Ausstellungs-Bereich */
.exhibition-info p {
    text-align: left; /* Fließtext hier besser linksbündig */
    font-size: 1.40rem;
    margin-bottom: 15px;
}

/* --- RESPONSIVES DESIGN FÜR SMARTPHONES --- */
@media (max-width: 800px) {
    .wrapper {
        flex-direction: column; /* Auf Handys: Menü oben, Text unten */
    }
    .sidebar {
        width: 100%;
    }
    .main-menu a {
        text-align: center; /* Menü auf dem Handy zentrieren */
    }
    .content {
        padding: 20px;
    }
    .content p {
        text-align: left; /* Blocksatz auf dem Handy ist oft schwer lesbar */
    }
}

/* --- FOOTER STYLING --- */
.site-footer {
    margin-top: 50px;           /* Abstand nach oben zum Ausstellungs-Text */
    padding-top: 20px;          /* Innenabstand über dem Text */
    border-top: 1px solid #ccc; /* Feine graue Trennlinie */
    font-size: 0.85rem;         /* Etwas kleinere Schriftgröße */
    color: #555555;             /* Dezent dunkles Grau */
    text-align: center;         /* Zentrierte Ausrichtung */
    margin-top: auto;           /* Schiebt den Footer automatisch an das Ende des verfügbaren Platzes */
}

.site-footer p {
    margin: 0;                  /* Entfernt Standard-Absatzabstände */
    text-align: center;         /* Überschreibt ggf. den Blocksatz aus dem main-Bereich */
}

/* --- YOUTUBE & CREDITS SECTION --- */
.video-section {
    margin: 40px 0;
}

/* 16:9 Responsive Video-Box */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Hält exakt das 16:9 Format */
    height: 0;
    background-color: #000000;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* DSGVO-Hinweisfeld über dem Video */
.video-consent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    background-color: #1a1a1a;
}

.video-consent p {
    margin: 5px 0;
    text-align: center;
}

.video-consent button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #555555;
    color: #ffffff;
    border: 1px solid #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
}

.video-consent button:hover {
    background-color: #333333;
}

/* Beschreibungstext unter dem Video */
.video-description {
    margin-top: 20px;
    margin-bottom: 25px;
}

/* Credits / Mitwirkende 2-Spalten Layout */
.video-credits {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.credit-col p {
    margin-bottom: 15px;
    line-height: 1.4;
}

.credit-col.left {
    text-align: left;
}

.credit-col.right {
    text-align: right;
}

/* Anpassung für Mobilgeräte */
@media (max-width: 600px) {
    html {
        font-size: 71%; /* Verkleinert ALLES proportional um 15% */
    }

    /* Text im Hinweis-Feld verkleinern */
    .video-consent p {
        font-size: 0.75rem;     /* Schrumpft die Schrift auf ca. 75% */
        line-height: 1.2;       /* Verringert den Zeilenabstand, um Höhe zu sparen */
        margin: 3px 0;          /* Verringert die Abstände zwischen den Zeilen */
    }

    /* Button im Hinweis-Feld anpassen */
    .video-consent button {
        font-size: 0.8rem;      /* Schrift im Button verkleinern */
        padding: 6px 12px;      /* Button-Innenabstand verkleinern */
        margin-top: 8px;        /* Abstand zum Text verringern */
    }

    .video-credits {
        flex-direction: column;
    }
    .credit-col.right {
        text-align: left; /* Auf Smartphones beide Spalten linksbündig */
    }
}



/* --- GALERIE: NEUES DESIGN --- */

/* Der Verlaufshintergrund nur für die Galerie-Seite (Weiß zu Hellgrau)
.gallery-bg {
    background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%);
    min-height: 100vh;
}
*/

/* Anpassung der Überschrift (damit der Umbruch wie im Bild gut aussieht) */
.gallery-bg h1 {
    line-height: 1.2;
    margin-bottom: 20px;
}

.gallery-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-main-image {
    margin-bottom: 30px;
    height: 500px; /* Feste Höhe, damit das Menü beim Blättern nicht nach oben/unten springt */
    display: flex;
    align-items: flex-end; /* Setzt die Skulpturen auf eine einheitliche "Bodenlinie" */
    justify-content: center;
}

.gallery-main-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    /* Ein leichter Schatten (optional), damit Objekte plastischer wirken */
    filter: drop-shadow(2px 5px 5px rgba(0,0,0,0.2)); 
}

/* Bildtitel unter den Skulpturen */
.gallery-caption {
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 40px;
    color: #333333;
}

/* Die neue Paginierungs-Leiste (Der weiße Kasten) */
.pagination-bar {
    display: inline-flex;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sehr dezenter Schatten */
}

/* Die einzelnen Knöpfe in der Leiste */
.pagination-bar button {
    background-color: transparent;
    border: none;
    border-right: 1px solid #cccccc; /* Die Trennlinien zwischen den Zahlen */
    padding: 10px 15px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: #555555;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

/* Der rechte Rand vom allerletzten Button ("»") soll keine Trennlinie haben */
.pagination-bar button:last-child {
    border-right: none;
}

/* Hover-Effekt (Maus drüber) */
.pagination-bar button:hover {
    background-color: #f0f0f0;
}

/* Die aktive Zahl (grauer Hintergrund, weiße Schrift) */
.pagination-bar button.active {
    background-color: #999999;
    color: #ffffff;
}

/* Anpassung für sehr kleine Handys (damit die Leiste bei 10 Knöpfen umbricht) */
@media (max-width: 600px) {
    .pagination-bar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .gallery-main-image {
        height: 300px; /* Auf Handys das Bild kleiner machen */
    }
}



/* --- VITA STYLING --- */
.vita-list {
    display: grid;
    /* Linke Spalte 120px breit, rechte Spalte nimmt den restlichen Platz (1fr) ein */
    grid-template-columns: 120px 1fr;
    gap: 20px 30px; /* 20px Abstand nach unten, 30px Abstand zwischen den Spalten */
    margin-top: 40px;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Die Jahreszahlen */
.vita-list dt {
    font-weight: bold;
    text-align: right; /* Jahreszahlen rechtsbündig an die Textspalte anlegen */
    color: #333333;
    font-size: 1.50rem;
}

/* Die Lebensstationen */
.vita-list dd {
    margin: 0; /* Entfernt den Standard-Einzug des Browsers */
    text-align: left;
    font-size: 1.50rem;
}

/* --- RESPONSIVES DESIGN FÜR DIE VITA (Smartphones) --- */
@media (max-width: 600px) {
    .vita-list {
        /* Auf Handys brechen wir das Raster in eine einzige Spalte um */
        grid-template-columns: 1fr;
        gap: 5px 0; /* Kaum noch Abstand zwischen Jahr und Text */
    }

    .vita-list dt {
        text-align: left; /* Jahreszahlen nun auch linksbündig */
        margin-top: 20px; /* Abstand zur vorherigen Station */
        border-bottom: 1px solid #eeeeee; /* Feine Trennlinie unter dem Jahr */
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    
    /* Der erste Eintrag braucht nach oben keinen extra Abstand */
    .vita-list dt:first-child {
        margin-top: 0;
    }
}