/* Grund-Styles für die gesamte Seite */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #000; 
    color: #fff;
    line-height: 1.6;
}

/* Header-Bereich (schwarz) */
.header {
    background-color: #000;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between; 
}

.logo {
    height: 40px;
    width: auto;
    max-width: 150px; 
}

/* Hauptinhaltsbereich */
main {
    overflow: hidden; /* Beibehalten für Layout-Stabilität */
}

/* Link-Container für das Bild */
.triptychon-link {
    display: block; 
    line-height: 0;
    position: relative; 
    cursor: zoom-in; 
}

/* STYLES FÜR DAS BILD-ELEMENT im Hauptbereich */
.full-width-image {
    width: 100%;       
    height: auto;      
    display: block;    
}

/* ========================================================= */
/* FOOTER-BEREICH STYLES */
/* ========================================================= */

.footer {
    background-color: #000;
    color: #fff;
    padding: 40px 20px 0; 
    text-align: left; 
    clear: both; 
}

/* DOM EDITION ÜBERSCHRIFT STYLES */
.edition-title {
    font-size: 1.4em; 
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 30px; /* Abstand zur ersten Kategorie */
}

/* KORRIGIERTER PLATZHALTER, um die Texte auf gleiche Höhe zu bringen */
.edition-spacer {
    /* Feste Höhe basierend auf der 1.4em-Schriftgröße und dem Zeilenabstand */
    height: 24px; 
    margin-bottom: 30px; 
}

.footer-content {
    display: flex; 
    gap: 40px; 
    max-width: 1200px; 
    margin: 0 auto 30px; 
    padding: 0 20px;
}

.lang-de, .lang-en {
    flex: 1; 
    min-width: 300px; 
}

.lang-en {
    color: #aaaaaa; 
}

/* Allgemeine Footer-Styles */
.footer a {
    color: inherit; 
    text-decoration: none; 
}

.footer a:hover {
    text-decoration: underline;
}

.footer ul {
    list-style: none; 
    padding-left: 0;
    margin-top: -10px; 
}

.footer p {
    margin-bottom: 20px;
}

/* Copyright-Bereich */
.footer-copyright {
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 15px;
    font-size: 0.75em; 
    color: #666; 
    padding: 10px 0;
    border-top: 1px solid #333; 
    border-bottom: 1px solid #333; 
    max-width: 1200px;
    margin: 0 auto;
}

.copyright-link {
    color: #aaaaaa !important; 
    border: 1px solid #666;
    padding: 3px 8px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.copyright-link:hover {
    background-color: #111;
    color: #fff !important;
    text-decoration: none;
}

/* Impressum-Bereich */
.footer-legal {
    text-align: center;
    padding: 10px 20px 20px; 
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.65em; 
    color: #444; 
}

.legal-link {
    color: #666 !important;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

.legal-text {
    margin: 0;
    line-height: 1.4;
}

/* ========================================================= */
/* LIGHTBOX STYLES */
/* ========================================================= */

.lightbox-overlay {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.9); 
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    position: relative;
    margin: auto;
    text-align: center;
    padding: 40px; 
}

.lightbox-content img {
    width: auto; 
    height: auto;
    max-width: none; 
    max-height: none;
    display: block;
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* Schließen-Button */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001; 
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
}

/* Optionale Zoom-Animation */
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* ========================================================= */
/* Media Queries für mobile Ansichten */
/* ========================================================= */

@media (max-width: 768px) {
    .header {
        height: 50px;
        padding: 0 10px;
    }

    .logo {
        height: 30px;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        padding: 0 10px;
    }
    
    .footer {
        padding: 20px 0 0;
    }
    
    .footer-copyright {
        flex-direction: column;
        gap: 5px;
        padding: 10px 0;
    }
    
    .footer-legal {
        font-size: 0.6em;
        padding: 10px 10px 20px;
    }
    
    /* Spacer auf Mobilgeräten deaktivieren */
    .edition-spacer {
        display: none;
    }
}