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

body { /*alles andere*/
    font-family: "Helvetica Neue", Arial, sans-serif;
    background-color: #ffffff;
    color: #111111;
}  


/* --- LOGO / STARTSEITEN LINK --- */
header h1 a.logo-link {
    text-decoration: none; 
    color: inherit; 
    cursor: pointer;
    
    /* Überschreibt die "dünnen" Header-Link-Eigenschaften: */
    font-size: 32px; /* Setzt die Größe wieder auf die einer normalen h1 */
    font-weight: bold; /* Macht die Schrift wieder schön dick */
    letter-spacing: normal; /* Entfernt den weiten Buchstabenabstand */
    text-transform: none; /* Verhindert erzwungene Großbuchstaben */
    margin-left: 0; /* Entfernt den seitlichen Abstand */
    
    /* Macht die Zeilenabstände zwischen Eden, Tyler und Hempel wieder schön eng: */
    line-height: 1.1; 
}
header { /*NAME*/
    font-size: 20px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header a {
    text-decoration: none;
    color: #111;
    margin-left: 20px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gallery {
    /* column-count und column-gap NTFERNT */
    width: 100%;
}

.item {
    width: 33.333%; 
    margin-bottom: 0;
    position: relative; 
    overflow: hidden

}

/* --- ISOTOPE GRID SIZER --- */
.grid-sizer {
    width: 33.333%; 
}

@media (max-width: 900px) {
    .grid-sizer { width: 50%; }
}

@media (max-width: 600px) {
    .grid-sizer { width: 100%; }
}

/* --- ANPASSUNGEN FÜR KLEINERE BILDSCHIRME (Handys, kleine Tablets) --- */
@media (max-width: 900px) {
    
    /* 1. Das Masonry-Raster am Handy auf 2 Spalten stellen */
    .item, .grid-sizer { 
        width: 50%; 
    } 

    /* --- 2. HANDY-LIGHTBOX OPTIMIERUNG --- */
    
    .lightbox-wrapper {
        /* Ändert die Anordnung von nebeneinander (Desktop) auf untereinander (Handy) */
        flex-direction: column; 
        
        /* Zentriert die Elemente (Bild und Textbox) horizontal innerhalb des Kastens */
        align-items: center; 
        
        /* Füllt fast die gesamte Handy-Breite aus */
        width: 90%; 
        max-width: 400px; /* Begrenzt die Breite auf Handys, damit es nicht zu groß wird */
        
        /* Sorgt dafür, dass der Kasten immer horizontal und vertikal auf dem Bildschirm zentriert ist */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        /* Ein bisschen Innenabstand für den Textbox-Abstand */
        padding: 20px;
        box-shadow: 0px 5px 20px rgba(0,0,0,0.5); /* Ein weicher Schatten für mehr Tiefe */
    }

    .lightbox-wrapper img,
    .lightbox-video {
        /* Bild/Video füllt die Breite des weißen Kastens aus */
        width: 100%; 
        max-width: 100%;
        
        /* Begrenzt die Höhe am Handy stark, damit die Textbox noch Platz hat */
        max-height: 50vh; /* Maximal 50% der Bildschirmhöhe */
        object-fit: contain; /* Format wird nicht verzerrt */
    }

    /* Der Text-Bereich unter dem Bild */
    .lightbox-info {
        /* WICHTIG: Textbox wird schmal (100% Breite des Kastens) und lang */
        width: 100%; 
        margin-left: 0; /* PC-Abstand entfernen */
        margin-top: 15px; /* Abstand zum Bild oben */
        
        /* Erlaubt der Textbox, lang zu werden, aber zwingt sie zum Scrollen, falls der Text zu lang ist */
        max-height: 25vh; /* Maximal 25% der Bildschirmhöhe für Text */
        overflow-y: auto; /* Vertikaler Scrollbalken innerhalb der Textbox */
        
        text-align: center; /* Zentriert den Text innerhalb der schmalen Box */
    }
}

/* --- WEITERE KLEINE ANPASSUNG FÜR GANZ KLEINE HANDYS --- */
@media (max-width: 600px) {
    /* Masonry-Raster auf eine Spalte */
    .item, .grid-sizer { 
        width: 100%; 
    } 
    
    /* Die Handy-Lightbox kann auf ganz kleinen Bildschirmen noch breiter werden */
    .lightbox-wrapper {
        width: 95%;
    }
}
@media (max-width: 600px) {
    .item { 
        width: 100%; 
    } 
}

.item img, 
.item video {
    width: 100%;
    height: auto; /* Höhe passt sich automatisch dem originalen Ratio an! */
    display: block; 
    transition: transform 0.5s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.10); 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.overlay span {
    display: none; 
}

/* Hover-Effekte: Bild zoomt minimal, Overlay wird sichtbar */
.item:hover img,
.item:hover video {
    transform: scale(1.02); 
}

.item:hover .overlay {
    opacity: 1;
}

/*menü*/
.filter-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0 0 40px 0;
    margin-top:30px;
    gap: 30px;
}

.filter-menu button {
    background: none;
    border: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    color: #999; /* Inaktive Filter sind grau */
    transition: color 0.3s ease;
}

/* Hover-Effekt und aktiver Zustand */
.filter-menu button:hover,
.filter-menu button.active {
    color: #111; /* Aktiver Filter wird schwarz */
}

/* Diese Klasse wird von JavaScript hinzugefügt, um Projekte auszublenden */
.item.hide {
    display: none;
}

/*Navigation & Seiten-Logik */
.main-nav button {
    background: none; border: none; font-size: 1.2rem;
    margin-left: 30px; cursor: pointer; color: #999;
    text-transform: uppercase; transition: color 0.3s;
}
.main-nav button:hover, .main-nav button.active {
    color: #111; 
}

.page-section { 
    display: none; 
    animation: fadeIn 0.4s ease; 
}
.page-section.active { 
    display: block; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.text-content { 
    max-width: 600px; margin: 80px auto; padding: 20px; line-height: 1.6; 
}

.overlay span {
    display: none; 
}

/* --- LIGHTBOX --- */
.lightbox {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);  
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

/* DAS IST DER NEUE GEMEINSAME WEISSE KASTEN */
.lightbox-wrapper {
    display: flex;
    flex-direction: row; 
    align-items: flex-start; 
    background-color: #ffffff; 
    border: 2px solid #111; /* <-- Das macht den sichtbaren Kasten! */
    padding: 30px; 
    max-width: 95%;
    position: relative;
    box-shadow: 0px 10px 40px rgba(0,0,0,0.2); 
}

/* Das große Bild ODER Video im Kasten */
.lightbox-wrapper img,
.lightbox-wrapper video {
    max-width: 60vw; 
    max-height: 80vh;
    object-fit: contain;
}


/* Das große Bild (jetzt ohne eigenen Schatten, liegt flach im weißen Kasten) */
.lightbox-wrapper img {
    max-width: 60vw; 
    max-height: 80vh;
    object-fit: contain;
}

/* Der Text-Bereich rechts in der lightbox */
.lightbox-info {
    width: 350px; 
    margin-left: 40px; /* Abstand zwischen Bild und Text */
    max-height: 80vh;
    overflow-y: auto; 
}

.lightbox-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: #111;
}

/* Das X zum Schließen */
.lightbox-close {
    position: absolute;
    top: -40px; 
    right: 0;
    font-size: 2rem;
    cursor: pointer;
    color: #ffffff; 
    font-weight: bold;
}

/* Anpassung für Handys: Bild und Text wieder untereinander im Kasten */
@media (max-width: 900px) {
    .lightbox-wrapper {
        flex-direction: column;
        padding: 10px;
    }
    .lightbox-info {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        max-height: 10vh;
    }
    .lightbox-wrapper img {
        max-width: 85vw;
        max-height: 50vh;
    }
}

/* --- KATEGORIE BANNER --- */
.category-banner {
    display: none; /* Standardmäßig versteckt */
    width: 100%;
    text-align: center;
    padding: 20px 40px 40px 40px;
    margin-bottom: 20px;
    background-color: #ffffff; /* Passt sich deinem Hintergrund an */
    color: #111;
}

.category-banner h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.category-banner p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* --- UNTERGRUPPEN BANNER --- */
.item.text-banner {
    width: 100%; /* Durchbricht das Grid und nimmt die volle Breite ein */
    padding: 50px 10px 10px 10px; /* Abstand nach oben zur vorherigen Gruppe */
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc; /* Schlichte Trennlinie für Fotografie etc. */
    pointer-events: none; /* Keine Klicks für die Lightbox zulassen */
}

/* Kein Hover-Zoom auf den Text-Bannern */
.item.text-banner:hover {
    transform: none; 
}

.item.text-banner h2 {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
}

/* --- HANDY LAYOUT: SCROLLBARE NAVIGATION (SWIPE-MENÜ) --- */
@media (max-width: 900px) {
    
    /* 1. Header umbauen: Name oben, Navigation in voller Breite darunter */
    header {
        flex-direction: column;
        align-items: flex-start; /* Setzt den Namen nach links */
        gap: 20px; /* Abstand zwischen Name und Menüleiste */
        padding-bottom: 0; 
    }

    /* 2. Hauptmenü (Portfolio, Über mich...) scrollbar machen */
    .main-nav {
        display: flex;
        flex-direction: row; /* Buttons nebeneinander */
        width: 100%; /* Volle Bildschirmbreite nutzen */
        overflow-x: auto; /* Aktiviert das horizontale Scrollen */
        white-space: nowrap; /* Verhindert, dass Wörter in eine neue Zeile rutschen */
        gap: 20px; /* Abstand zwischen den Wörtern */
        padding-bottom: 10px; /* Etwas Luft nach unten */
        
        /* Versteckt den unschönen Scrollbalken für einen cleanen App-Look */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE und Edge */
    }
    .main-nav::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .main-nav button {
        margin-left: 0; /* Überschreibt den PC-Abstand */
        flex-shrink: 0; /* Verhindert, dass die Buttons bei Platzmangel gequetscht werden */
    }

    /* 3. Filter-Menü (Illustrator, Fotografie...) ebenfalls scrollbar machen */
    .filter-menu {
        justify-content: flex-start; /* Links starten (am PC ist es zentriert) */
        width: 100%;
        overflow-x: auto; /* Aktiviert das Scrollen */
        gap: 20px;
        padding-bottom: 15px;
        
        /* Versteckt den Scrollbalken */
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    .filter-menu::-webkit-scrollbar {
        display: none;
    }

    .filter-menu button {
        flex-shrink: 0; /* Verhindert Quetschen */
    }
}