* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Archivo Narrow', sans-serif;
    background-color: #fff;
    color: #000;
    padding-top: 60px;
    margin: 0;
    overflow-y: scroll;
    overflow-x: scroll;
    font-size: 16px;
    /* Basisschriftgröße in Pixel */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    height: 0;
    /* Add this line */
    padding: 30px 0;
    /* Adjust the padding to create the desired height */
    z-index: 10;
}

div {
    padding: 0px;
    border: 0px solid #aaa;
}

.content {
    padding-left: calc(2% + 80px);
    /* Adjust padding as needed */
    margin: 0 auto;
    /* Center the div horizontally */
    border: 0px solid #ff8800;
    box-sizing: border-box;
    /* Include padding and border in the width calculation */
    width: 75vw;
    /* Set initial width to 85% of the viewport width */
    overflow: visible;
    font-size: 16px;
}


h2 {
    font-size: 18px;
    font-weight: 100;
    padding: 8px 12px;
    font-style: italic;
    background-color: #d2d2d2;
    color: #fff;
    margin-bottom: 20px;
}


/* ###################### MENU ###################*/
.menu {
    position: fixed;
    top: 64px;
    left: 40px;
    font-weight: 700;
    font-size: 1.25em;
    /* Größer als die Basisschriftgröße */
    text-transform: uppercase;
    display: block;
}

.menu ul {
    list-style: none;
    padding: 0;
}

.menu li {
    display: block;
    /* Display menu items as block */
    margin-bottom: 0px;
    /* Add spacing between menu items */
}

.menu a {
    color: #777;
    /* Change menu link color */
    text-decoration: none;
}

.menu a.active {
    color: #000;
    /* Change menu link color */
    text-decoration: none;
}

a:hover {
    color: teal;
}


p {
    margin-bottom: 20px;
}

/* ###################### Gallery ###################*/

.series-container {
    border: 0px solid teal;
    margin-bottom: 20px;

    /* Add spacing between series */
}


.seriesline {
    border: none;
    border-top: 1px solid rgb(222, 222, 222);
    margin: 10px;
}


.image-item img {
    width: 100%;
    /* Die Breite jedes Bildes auf 100% des verfügbaren Platzes setzen */
    height: auto;
    /* Automatische Höhe beibehalten */
    object-fit: cover;
    max-height: 100%;
}


.image-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Added to make the images fill the width */
}


.image-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    /* Verwenden von auto-fit anstelle von auto-fill */
    gap: 2%;
    /* Abstand zwischen den Bildcontainern */
}



.image-item .description {
    margin-top: 10px;
    font-size: 0.75em;
    text-align: center;
    text-transform: uppercase;
    /* 
    font-style: italic; */
}

.image-item img {
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.image-item img:hover {
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.full-image:hover {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}


/* ###################### Textbox ###################*/
.textbox {
    display: flex;
    flex-wrap: wrap;
    /* Erlaubt das Umbruch der Elemente auf schmalen Bildschirmen */
    max-width: 800px;
    border: 0px solid teal;
    padding-bottom: 20px;
    padding-top: 4px;
}

.textbox .image-container {
    flex: 0 0 50%;
    /* Bildcontainer nimmt 50% der Breite der .textbox ein */
}

.textbox img {
    max-width: 100%;
    height: auto;
    flex: 0 0 50%;
    /* Bildcontainer nimmt 50% der Breite der .textbox ein */

}

.textbox .text {
    flex: 0 0 50%;
    /* Textcontainer nimmt 50% der Breite der .textbox ein */
    padding: 0px 0px 10px 10px;
}

.textbox .text p {
    margin: 0 0 20px 20px;
    /* Entfernt den Standardabstand der <p>-Elemente */
}



/* Hintergrund Overlay */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Dunkler Hintergrund */
    z-index: 20;
    /* Höherer z-index als Header */

    /* Hintergrund unscharf machen */
    backdrop-filter: blur(5px);
    /* Standard */
    -webkit-backdrop-filter: blur(5px);
    /* Für Safari */
}

/* Bild in voller Höhe */
.full-image {
    display: none;
    position: fixed;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    z-index: 30;
    /* Höherer z-index als Header und Overlay */
}

/* Bildbeschreibung */
.image-description {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 0;
    /* Align to the left edge of the screen */
    right: 0;
    /* Align to the right edge of the screen */
    margin: 0 auto;
    /* Center the content */
    text-align: center;
    /* Center the text inside */
    color: #fff;
    z-index: 30;
    width: auto;
    /* Allow the content to take up as much width as needed */
    max-width: 100%;
    /* Ensure it doesn't overflow beyond the screen */
    padding: 0 0px;
    /* Optional: add padding if the text needs some space from the edges */
}


/* CSS für die Navigationselemente */
.navigation {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 30;
}

.navigation span {
    cursor: pointer;
    color: white;
    font-size: 24px;
    margin: 0px;
    /* Abstand zwischen den Pfeilen */
    padding: 5px 10px;
    /* Mehr Padding für den Bereich um die Pfeile */
}

.close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: white;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 40;
    /* Ensure it appears above the lightbox content */
}

.close-btn:hover {
    color: #ccc;
    /* Lightens the color on hover */
}

/* Media query for mobile */
@media (max-width: 768px) {

    header {
        width: 100%;
        padding-top: 10px;
        /* Adjust for the fixed header */
        padding: 24px 0;
        /* Adjust the padding to create the desired height */


    }

    body {
        padding-top: 60px;
        font-size: 14px;
        /* Adjust for the fixed header */
    }

    h2 {
        width: 100%;
        font-size: 12pt;
        font-weight: 100;
        font-style: italic;
        margin-bottom: 10px;
        background-color: #d2d2d2;
        padding: 8px 10px;

    }



    .menu {
        display: flex;
        /* Verwende Flexbox für eine bessere Ausrichtung */
        justify-content: flex-start;
        /* Richte die Menüelemente links aus */
        align-items: center;
        /* Zentriere die Menüelemente vertikal */
        font-size: 13pt;
        /* Verkleinere die Schriftgröße für kleinere Bildschirme */
        width: 100%;
        /* Setze die Breite auf 100% des Elternelements */
        height: 60px;
        /* Reduziere die Höhe, falls notwendig */
        position: absolute;
        top: 0;
        /* Positioniere das Menü oben */
        left: 0;
        /* Beginne von links */
        right: 0;
        /* Dehne bis zum rechten Rand aus */
        padding: 0;
        /* Füge vertikales Padding hinzu */
        padding-left: 0px;
        /* Füge 20px linkes Padding hinzu für den gesamten Menücontainer */
        margin: auto;
    }

    .menu ul {
        width: 100%;
        /* Setze die Breite der ul auf 100% */
        padding: 0;
        /* Entferne Padding */
        margin: auto;
        /* Entferne Margin */
        text-align: center;
        /* Text linksbündig ausrichten */
    }

    .menu li {
        display: inline-block;
        /* Verwende inline-block für bessere Kontrolle */
        margin-right: 0px;
        /* Reduziere den rechten Rand */
        margin-bottom: 0;
        /* Stelle sicher, dass kein unterer Rand vorhanden ist */
    }

    .menu a {
        padding: 2px;
        /* Füge etwas Padding hinzu, um die Klickbarkeit zu verbessern */
        white-space: nowrap;
        /* Verhindere, dass die Texte umgebrochen werden */
    }

    .content {
        padding: 0px;
        width: 90vw;
        margin: auto;

    }

    .image-item img {
        max-width: calc(100%);

        height: auto;

    }

    .description {
        position: static;

        width: 80%;
        background-color: transparent;
    }

    .text-container {
        padding-top: 10px;
    }

    .textbox {
        flex-direction: column;
    }

    .textbox .image-container,
    .textbox .text {
        flex: 0 0 100%;
    }

    .textbox .text p {
        margin: 0 0 20px 0px;
    }

    .image-item,
    .image-list {
        display: initial;
        grid-template-columns: initial;
        gap: initial;
    }



}