/* 1. Schriftart einbinden (@font-face) */
@font-face {
    font-family: 'Classic Grotesque Book';
    src: url('fonts/ClassicGrotesqueStd-Book.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}



/* Globale Stile und Typografie */
body {
    margin: 0;
    font-family: 'Classic Grotesque Book', 'Arial', sans-serif;
    color: #000;
    background-color: #fff;
}


a {
    text-decoration: none;
    color: inherit;
    padding: 0 10px;
    letter-spacing: 0.1em;
    /* NEU: Smooth Transition für Opacity */
    transition: opacity 0.3s ease-in-out; 
}

a:hover {
    opacity: 0.4;
}

p {
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 10px;
}

.title-spacing{
    font-size: 12px;
}

.title-spacing-caps{
    font-size: 12px;
    letter-spacing: 0.1em!important;
}

.photo-credit{
    margin-top:10px;
    margin-bottom: 20px;
    font-size: 10px;
}

h3 {
font-weight: 100;
}

/* ----------------------------------------------------- */
/* HEADER/NAVIGATIONSLEISTE (ALLGEMEINE REGELN) */
/* ----------------------------------------------------- */

#main-header {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    z-index: 100;
    font-size: 12px;
    letter-spacing: 0.1em;
    background-color: transparent; 
    z-index: 99999!important;
transition: opacity 1s ease-in-out, padding 0.3s, font-size 0.3s, background-color 0s, mix-blend-mode 0s;
    /* WICHTIG: Opacity Transition (z.B. 1 Sekunde) muss zu den vorhandenen Transitions hinzugefügt werden */
}

/* 2. Startzustand: Unsichtbar */
.header-fade-in-start {
    opacity: 0;
}

/*
 * WICHTIG: Höhere Spezifität, um mix-blend-mode sicher zu überschreiben
 * Dieses Block stellt den Header auf weißen Hintergrund, schwarze Schrift und normale Schriftstärke.
 */
 #main-header#main-header.header-cv {
    /* 1. Inversion und Blend-Mode deaktivieren */
    background-color: #fff !important; /* WICHTIG: !important für Hintergrund */
    mix-blend-mode: normal !important; /* WICHTIG: !important für Blend-Mode */
    color: #000 !important; /* WICHTIG: !important für Textfarbe */
}

/* 2. Text und Burger-Linien explizit auf Schwarz setzen */
#main-header.header-cv .header-left span,
#main-header.header-cv .header-right a {
    color: #000 !important;
    font-weight: 300 !important; /* Fixiert die dünne Schriftstärke */
}

#main-header.header-cv .burger-line {
    background-color: #000 !important;
}

/* NEU: Basis-Stil für Burger-Button */
.burger-menu-btn {
    display: none; 
    flex-direction: column; 
    justify-content: space-between; /* Abstand zwischen den Linien */
    width: 30px; 
    height: 8px; /* Höhe für zwei Linien und Abstand */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    z-index: 101; 
}

.burger-line {
    display: block;
    width: 100%;
    height: 1px; /* Dicke der Linie */
    background-color: #000; /* Linienfarbe */
    transition: all 0.3s ease-in-out; /* Smooth Animation */
    transform-origin: center; /* KORRIGIERT: Drehung von der Mitte */
}

/* Zustand VOR dem Scrollen (über Hero-Bild) */
#main-header.header-default {
    color: #fff; 
    mix-blend-mode: difference; 
    transition: padding 0.3s, font-size 0.3s, background-color 0s;
}

/* Linienfarbe im Default-Zustand */
#main-header.header-default .burger-line {
    background-color: #fff;
}


/* Zustand NACH dem Scrollen (über Content-Bereich) */
#main-header.header-scrolled {
    background-color: #fff; 
    color: #000; 
    mix-blend-mode: normal; 
    transition: padding 0.3s, font-size 0.3s, background-color 0.3s;
}

/* Linienfarbe im Scrolled-Zustand */
#main-header.header-scrolled .burger-line {
    background-color: #000;
}


/* ----------------------------------------------------- */
/* WORKS LINKS (EIN-/AUSBLENDEN) */
/* ----------------------------------------------------- */


/* Transition für WORKS Links, damit smooth animiert wird */
#works-link, #works-right {
    transition: opacity 0.3s ease-in-out, visibility 0.3s linear;
}

/* Standardmäßig verstecken wir das WORKS-Element links */
.header-default #works-link {
    opacity: 0; 
    visibility: hidden;
}

/* Beim Scrollen verstecken wir das WORKS-ELEMENT rechts (Sanftes Ausblenden) */
.header-scrolled #works-right {
    opacity: 0;           
    visibility: hidden;   
}

/* Beim Scrollen zeigen wir das WORKS-Element links (Sanftes Einblenden) */
.header-scrolled #works-link {
    display: inline-block;
    opacity: 1; 
    visibility: visible;
    padding: 0 10px 0 0;
}

/* Punkt und Text für WORKS links über CSS */
.header-scrolled #works-link:before {
    content: "•";
    margin: 0 7px;
}

.header-scrolled #works-link::after {
    content: "WORKS"; 
}

/* Standard-Padding für letzten Link rechts */
.header-right a:last-child {
    padding-right: 0;
}

/* ----------------------------------------------------- */
/* SEKTIONEN UND INHALT */
/* ----------------------------------------------------- */

/* Hero-Bereich mit Hintergrundbild */
#hero-section {
    height: 100vh; 
    background-image: url('/works/background.jpg'); 
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    
    /* NEU: Animation Startzustand (skaliert und unsichtbar) */
    transform: scale(1.04); 
    opacity: 0; /* START: Unsichtbar */
    
    /* NEU: Definiere die Transition für transform UND opacity */
    transition: transform 3s ease-in-out, opacity 1.5s ease-in-out; 
    
    /* WICHTIG: Erzeugt einen neuen Stack-Kontext für die Animation */
    will-change: transform, opacity; 
}

/* Zielzustand (normale Größe und sichtbar) */
#hero-section.zoom-out-finished {
    transform: scale(1.0);
    opacity: 1; /* ENDE: Vollständig sichtbar (100%) */
}

/* Content-Bereich mit dem Kunstwerk */
#content-section {
    padding: 100px 0 20px 0; /* Oben 100px, Rechts 0, UNTEN 20px, Links 0 */
    min-height: 100vh;
}

/* Allgemeine Regel für das Bild, damit es innerhalb des Containers skaliert */
.artwork-image-wrapper {
    position: relative;
}

/* Video Play-Button Overlay */
.video-link {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 0 !important;
    transition: none !important;
}

/* Überschreibt den globalen a:hover Effekt für Video-Links */
.video-link:hover {
    opacity: 1 !important;
}

.video-link img {
    display: block;
    width: 100%;
    height: auto;
}

.video-link .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 100;
    opacity: 1 !important;
}

.video-link .play-overlay::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #fff;
    margin-left: 5px;
}

.video-link:hover .play-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
}

.artwork-image-wrapper img {
    max-width: 100%;
    max-height: 85vh;
    height: auto;
    display: block;
    
    /* NEU: Verhindert "Ploppen" während des Ladens */
    opacity: 0;
    transition: opacity 0.3s ease; /* ease ist performanter */
    
    /* NEU: GPU-Beschleunigung für Bild-Animationen */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* NEU: Bild wird sichtbar, sobald Container sichtbar ist */
.artwork-container.visible .artwork-image-wrapper img {
    opacity: 1;
    position: relative;
    z-index: 1;
}

.artwork-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 300px auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    
    /* NEU: Performance-Optimierung - Isoliert Rendering für bessere Scroll-Performance */
    contain: paint;
    
    /* NEU: Startzustand für Fade-In-Animation */
    opacity: 0;
    transform: translate3d(0, 20px, 0); /* transform3d für GPU-Beschleunigung */
    
    /* NEU: Smooth Transition für Fade-In-Effekt (nur GPU-beschleunigte Eigenschaften) */
    transition: opacity 0.8s ease, transform 0.8s ease; /* ease ist performanter als ease-out */
    
    /* NEU: GPU-Beschleunigung nur während Animation (wird per JS entfernt) */
    will-change: transform, opacity;
}

/* NEU: Zielzustand wenn Container sichtbar wird */
.artwork-container.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0); /* transform3d für GPU-Beschleunigung */
    will-change: auto; /* Entfernt will-change nach Animation für bessere Performance */
}

/* Artwork Image Wrapper - passt sich der Bildbreite an */
.artwork-image-wrapper {
    position: relative;
    width: auto;
    max-width: 100%;
    display: inline-flex;
    justify-content: center;
}

/* Artwork Caption unter dem Bild */
.artwork-caption {
    text-align: center;
    margin-top: 20px;
    width: 100%;
}

/* Artwork Title */
.artwork-title {
    font-size: 13px;
    font-weight: 100;
    margin: 0 0 10px 0;
}

/* MORE Button */
.more-btn {
    background: none;
    border: none;
    font-family: 'Classic Grotesque Book', 'Arial', sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 5px 10px;
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.more-btn:hover {
    opacity: 1;
}

.more-btn.hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Artwork Overlay - passt sich der Bildbreite an */
.artwork-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.65);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 10;
    pointer-events: none;
    container-type: inline-size;
}

.artwork-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Overlay visible state - smooth fade in */
.artwork-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: all;
}

/* Close Button - Kreis mit weißem Hintergrund und schwarzem X */
.overlay-close-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff00;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-family: 'Classic Grotesque Book', 'Arial', sans-serif;
    font-size: 8px;
    color: #000;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.overlay-close-btn:hover {
    opacity: 0.6;
}

/* Overlay Info Content - einzeilig, bei Bedarf max. zweizeilig */
.overlay-info-content {
    font-size: 10px;
    line-height: 1.6;
    font-weight: 200;
    text-align: center;
    display: block;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay-info-content p {
    margin: 0;
    padding: 0;
    font-size: 10px;
    display: inline;
    white-space: nowrap;
}

/* Bei schmalen Containern (Hochkant-Bilder) umbrechen */
@container (max-width: 600px) {
    .overlay-info-content {
        white-space: normal;
        overflow: visible;
    }
    
    .overlay-info-content p {
        display: block;
        white-space: normal;
    }
    
    .overlay-info-content p + p::before {
        display: none;
    }
}

/* Separator between paragraphs */
.overlay-info-content p + p::before {
    content: '';
    display: inline-block;
    width: 10px;
}

.overlay-info-content .photo-credit {
    margin: 0;
}

.publication-item .link-name {
    letter-spacing: 0.1em;
}
.publication-item .cv-year {
    letter-spacing: 0.1em;
}

/* Das Div, das die Bilder für das Overlay enthält, verstecken */
.overlay-data {
    display: none;
}

/* ----------------------------------------------------- */
/* OVERLAY / LIGHTBOX STYLES */
/* ----------------------------------------------------- */


#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fcfcfc;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
    
    /* NEU: Initialer Zustand (sichtbar und normal positioniert) */
    opacity: 1; 
    transform: translateY(0);
    
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* KORRIGIERT: Der 'hidden'-Zustand wird nur zum Ausblenden verwendet */
#lightbox.hidden {
    opacity: 80;
    transform: translateY(100vh); /* Schiebt das gesamte Overlay nach unten */
    /* WICHTIG: display: none muss später per JS entfernt werden! */
    transition: opacity 0.5s cubic-bezier(0.94, 0.45, 0.46, 0.25), 
                transform 0.5s cubic-bezier(0.94, 0.45, 0.46, 0.25);
}

/* Overlay Header (NavBar) - WIE VORHER (UNVERÄNDERT) */
#overlay-header {
    width: 100%;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #000;
    position: absolute; 
    top: 0;
}

#overlay-header .header-left span {
    padding: 0 10px;
}

/* CLOSE-Button NEU positioniert: 10px unter Header, zentriert */
#close-overlay {
    position: absolute; /* Absolut innerhalb von #lightbox */
    top: 60px; /* 10px Abstand von oben + ca. 50px für Header-Höhe */
    left: 50%;
    transform: translateX(-50%); /* Horizontal zentrieren */
    font-size: 12px;
    letter-spacing: 0.1em;
    cursor: pointer;
    z-index: 210; /* Über dem main-image-wrapper */
    transition: opacity 0.3s ease-in-out; 
}

#close-overlay:hover {
    opacity: 0.4;
}


#overlay-content {
    position: relative; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    width: 100%;
    /* NEU: Nur noch 60px für Header (da Close-Button bei 60px sitzt) */
    padding-top: 60px;
    padding-bottom: 50px; /* Platz für Thumbnails */
    
    /* NEU: Die verfügbare Höhe abzüglich des Gesamt-Padding */
    height: 100vh; 
    box-sizing: border-box; 
    /* ... andere Stile ... */
}

/* Previous/Next Buttons - 10px vom Rand */
#prev-btn, #next-btn {
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.1em;
    padding: 0; 
    user-select: none;
    transition: opacity 0.3s ease-in-out;
    position: absolute; 
    top: 50%;
    transform: translateY(-50%); 
    z-index: 10000;
}

#prev-btn {
    left: 10px; /* 10px vom linken Rand */
}

#next-btn {
    right: 10px; /* 10px vom rechten Rand */
}

#prev-btn:hover, #next-btn:hover {
    opacity: 0.4;
}

/* Hauptbild im Overlay */
#main-image-wrapper {
    max-width: 100%; 
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Margin für den Platz der Prev/Next-Buttons */
    margin: 0 40px; 
}

/* Hauptbild im Overlay */
#main-overlay-image {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;

    /* NEU: Startzustand für die Animation */
    opacity: 0;
    transform: translateY(250px); /* 20px nach unten versetzt starten */
    
    /* NEU: Transition definieren */
    transition: opacity 1s ease-out 0.1s, transform ease-out 0.8s;
    /* 0.5s Dauer, 0.1s Verzögerung */
}
/* NEU: Zielzustand (wenn Lightbox sichtbar und 'hidden' entfernt ist) */
#lightbox:not(.hidden) #main-overlay-image {
    opacity: 1; /* Vollständig sichtbar */
    transform: translateY(0); /* An der finalen Position */
}

/* Thumbnail-Galerie */
#thumbnail-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    gap: 10px;
}

.thumbnail {
    height: 50px;      
    width: auto;       
    object-fit: contain; 
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, border 0.2s;
}

.thumbnail.active {
    opacity: 1;
}


/* ===================================================== */
/* C.V. / EXHIBITIONS SPEZIFISCHE STILE (AKTUALISIERT) */
/* ===================================================== */

/* Container für die gesamte CV-Seite, zentriert und mit maximaler Breite */
#cv-container {

margin-left:10px;
margin-right:10px;
    max-width: 800px; /* Maximale Breite wie auf dem Screenshot */
}

/* Überschriften für die Kategorien (EDUCATION, SOLO SHOWS, etc.) */
/* PASSEN DEN STIL AN "STEPHANIE STEIN" AN */
.cv-category-title {
    font-size: 12px; /* Gleiche Größe wie STEPHANIE STEIN */
    letter-spacing: 0.1em;
    text-transform: uppercase; /* Alles in Großbuchstaben */
    margin-top: 40px; /* Vergrößerter Abstand zur vorherigen Sektion */
    margin-bottom: 10px; /* Abstand zur Liste */
    font-weight: 300;
}

/* Allgemeine Liste Sektion */
.cv-list-section {
    margin-bottom: 20px;
}
.cv-list-education {
    margin-left: -80px;
}

/* Layout für das einzelne Listenelement (Jahr links, Details rechts) */
.cv-list-item {
    display: flex; /* Flexbox für horizontale Anordnung */
    justify-content: space-between; /* Jahr ganz links, Details ganz rechts */
    margin-bottom: 5px; /* Abstand zwischen den Einträgen */
    font-size: 12px;
}

/* Style für die Jahreszahl */
.cv-year {
    /* Stellt sicher, dass das Jahr fest ausgerichtet ist */
    width: 60px; /* Feste Breite für das Jahr */
    flex-shrink: 0; /* Verhindert, dass die Jahreszahl kleiner wird */
    letter-spacing: normal;
}

/* Style für die Ausstellungsdetails */
.cv-details {
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
    text-align: left; /* Text linksbündig */
    padding-left: 20px; /* Abstand zur Jahreszahl */
    /* Zeilenhöhe wie im Screenshot, um die Zeilen kompakter zu machen */
    line-height: 1.4; 
    font-size: 12px;
}

/* Hervorhebung des Titels (z.B. ACAPULCO & ACAPULCO) */
.cv-details strong {
    font-weight: 200; /* Setzt auf die 'Book'-Schriftstärke für Hervorhebung */
}

/* Standort-Details (z.B. Vienna, AT) für leichtere Trennung */
.cv-location {
    font-style: italic;
    color: #000; /* Farbe beibehalten, nur kursiv */
    font-weight: 200;
}

.link-name{
        flex-grow: 1; /* Nimmt den restlichen Platz ein */
    text-align: left; /* Text linksbündig */
    padding-left: 20px; /* Abstand zur Jahreszahl */
    /* Zeilenhöhe wie im Screenshot, um die Zeilen kompakter zu machen */
    line-height: 1.4; 
    font-size: 12px;
    letter-spacing: normal;
}






/* ----------------------------------------------------- */
/* PUBLICATION GALLERY SPEZIFISCHE STILE (AKTUALISIERT & KORRIGIERT) */
/* ----------------------------------------------------- */

/* Wrapper für die gesamte Sektion, um die Überschrift zu platzieren */
.publication-gallery-wrapper {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 40px; 

    box-sizing: border-box;
}

/* Anpassung der Kategorie-Überschrift innerhalb des neuen Wrappers */
.publication-gallery-wrapper .cv-category-title {
    /* Setzt die Überschrift auf dieselbe Position wie die Elemente im zentrierten cv-container */
    max-width: 800px; /* Behält die Textausrichtung des CV-Abschnitts bei */
    margin-left: auto;
    margin-right: auto;
    /* Zusätzliches Padding innerhalb des Titels entfernen, da der Wrapper es bereits hat */
    padding-left: 0; 
    padding-right: 0;
    box-sizing: border-box;
}

.publication-gallery {
width: calc(100vw - 20px);
    
    /* Zentriert den Inhalt nur im Sinne der horizontalen Platzierung (nicht der Breitenbegrenzung) */
    margin: 20px 0 0 0; /* Oben 20px, ansonsten kein Margin */
    
    /* Standard: 3 Spalten für große Bildschirme */
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px 10px; /* Row-gap 40px, Column-gap 10px (Desktop) */
}

/* Einheitliche Struktur für alle publication-items */
.publication-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: 0;
}

/* Stellt sicher, dass a-Tags als publication-item korrekt im Grid angezeigt werden */
a.publication-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.publication-item img {
    width: 100%; /* Bild füllt seine Spalte */
    height: auto;
    display: block;
}

/* Versteckt overlay-data vollständig ohne Layout-Einfluss */
.publication-item .overlay-data {
    display: none;
}

/* Einheitlicher Abstand für cv-list-item innerhalb von publication-items */
.publication-item .cv-list-item {
    margin-top: 10px;
    margin-bottom: 0;
}

/* ----------------------------------------------------- */
/* CV/EXHIBITIONS/TEXTS LISTS */
/* ----------------------------------------------------- */
.cv-list-section {
    padding: 10px 0;
}

/* KORREKTUR: Setzt den Abstand zwischen den Listenelementen (unabhängig davon, ob sie verlinkt sind oder nicht) */
/* Der Abstand von 5px wird NUR auf Elemente angewendet, denen ein anderes Listenelement oder Link vorausgeht */
.cv-list-item + .cv-list-item, 
.cv-list-link + .cv-list-link,
.cv-list-item + .cv-list-link,
.cv-list-link + .cv-list-item
{
    /* DIESE REGEL IST ZU KOMPLIZIERT. Wir verwenden eine einfachere, allgemeine Regel. */
}

/* NEUE STRUKTUR: Der Abstand wird auf das innere Element (.cv-list-item) gesetzt, aber wir verwenden eine Klasse, um ihn zu steuern. */

.cv-list-item {
    display: flex; /* Flexbox für horizontale Anordnung */
    justify-content: space-between;
    /* margin-bottom: 5px; WIRD HIER ENTFERNT */
    font-size: 12px;
    width: 100%;
}

/* Fügt den Abstand nur am Ende des Wrappers/Listenelements ein */
.cv-list-item, .cv-list-link {
    margin-bottom: 5px; /* Jetzt wird der Abstand nur einmal gesetzt */
}

/* Löscht den doppelten Abstand, falls .cv-list-item in .cv-list-link ist */
/* Dieser Selektor trifft die DIVs in texts-publications.html */
.cv-list-link .cv-list-item {
    margin-bottom: 0 !important; /* WICHTIG: Überschreibt den 5px Margin des DIVs */
}

/* Weitere Anpassungen für das Link-Wrapper-Element */
.cv-list-link {
    display: block; 
    padding: 0; 
}

/* --- CUSTOM SCROLLBAR --- */

/* 1. Basis-Breite des Scrollbalken-Bereichs */
::-webkit-scrollbar {
    width: 2px; /* Startbreite */
}

/* 2. Der Hintergrund (Track) */
::-webkit-scrollbar-track {
    background: transparent; 
}

/* 3. Der bewegliche Teil (Thumb) */
::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 0 !important; 
    border: none; /* Entfernt jeglichen Abstand zum Rand */
}

/* 4. Animation der Breite beim Scrollen (via JS Klasse) */
/* Wir nutzen hier die Breite des gesamten Scrollbar-Elements */
body.is-scrolling::-webkit-scrollbar {
    width: 4px;
}

/* Firefox Support (Eingeschränkt auf eckiges Design) */
* {
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
}

/* Wenn gescrollt wird, verbreitere den Balken */
body.is-scrolling::-webkit-scrollbar {
    width: 4px;
}





/* Hover-Effekt für Desktop (Bildschirme breiter als 900px) */
@media (min-width: 901px) {
    /* Wenn ein publication-item gehovert wird, werden ALLE Items blasser */
    .publication-gallery:has(.publication-item:hover) .publication-item {
        opacity: 0.4;
        transition: opacity 0.3s ease;
    }

    /* Das spezifisch gehoverte Item behält volle Sichtbarkeit */
    .publication-gallery .publication-item:hover,
    .publication-gallery a.publication-item:hover {
        opacity: 1 !important;
    }
}

/* Optional: Sicherstellen, dass der Übergang auch beim Verlassen weich ist */
.publication-item {
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
}





@media (max-width: 900px) {
    
/* Header (etwas mehr Padding für kleinere Bildschirme) */
#main-header {
    padding: 10px 10px;
    flex-wrap: nowrap; 
    width: 100vw;
}

/* Burger-Button anzeigen und sicherstellen, dass er über dem Overlay liegt */
.burger-menu-btn {
    display: flex; 
    /* WICHTIG: Setzt den Burger-Button über das mobile Navigations-Overlay (z-index: 90) */
    z-index: 100; 
}

/* *** KORREKTUREN FÜR NAV-OPEN ZUSTAND AUF MOBILE *** */

/* WENN DAS MENÜ GEÖFFNET IST: Textfarbe auf Schwarz, Blend-Mode auf Normal */
#main-header.nav-open {
    mix-blend-mode: normal !important; 
    color: #000 !important; 
    
    /* NEU: WICHTIG! Beim Übergang ZUM Zustand 'nav-open' (Menü öffnet sich) */
    /* Lassen wir die Transition für Hintergrund und Blend-Mode nur 0s dauern, 
       damit der Wechsel sofort auf Weiß/Normal geschieht, bevor das Overlay erscheint. */
    transition: padding 0.3s, font-size 0.3s, background-color 0s, mix-blend-mode 0s; 
}

/* WICHTIG: Überschreibe die 0.3s Transition beim ZURÜCKSPRINGEN auf den Default-Zustand */
/* Die Standard-Header-Klassen müssen so geändert werden, dass sie beim Schließen keine Blend-Mode-Transition ausführen. */

/* WICHTIG: Der header-left-Text muss auch auf Schwarz gesetzt werden */
#main-header.nav-open .header-left span {
    color: #000 !important;
}

/* Zustand 'nav-open' für das Burger-Icon */
#main-header.nav-open .burger-line {
    background-color: #000 !important; /* WICHTIG: Muss immer Schwarz sein, da das Menü weiß ist */
}
/* *** ENDE KORREKTUREN *** */


/* X-Animation: Verschieben und Drehen für das Kreuz */
#main-header.nav-open .burger-line.top-line {
    /* KORRIGIERT: Verschiebung um +3.5px nach unten und Drehung */
    transform: translateY(3.5px) rotate(45deg); 
}

#main-header.nav-open .burger-line.bottom-line {
    /* KORRIGIERT: Verschiebung um -3.5px nach oben und Drehung */
    transform: translateY(-3.5px) rotate(-45deg); 
}


#nav-links-container {
    /* display: none; WIRD ENTFERNT ODER GEÄNDERT */
    display: flex; /* Hält es immer als Flexbox */
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%; 
    height: 100%;
    background-color: #fff; 
    gap: 10px;
    padding-top: 0; 
    margin-top: 0; 
    justify-content: center; 
    align-items: center; 
    box-sizing: border-box;
    z-index: -1; 
    
    /* ZU ANIMIERENDE EIGENSCHAFTEN */
    opacity: 0;
    visibility: hidden; /* Für Klick-Verhalten im geschlossenen Zustand */
    pointer-events: none; /* Menü ist nicht klickbar, wenn geschlossen */
    transition: opacity 0.4s ease-in-out, visibility 0.4s linear; 
}

#nav-links-container a {
    padding: 0;
    
    /* STARTZUSTAND DER LINKS: unsichtbar und leicht nach unten versetzt */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Smooth-Übergang für die Animation */
}

/* Zustand: Menü ist geöffnet (Klasse wird per JS auf #main-header gesetzt) */
#main-header.nav-open #nav-links-container {
    /* display: flex; bleibt */
    opacity: 1;
    visibility: visible;
    pointer-events: all; /* Menü ist klickbar */
}

/* Zielzustand der Links: sichtbar und an ihrer finalen Position */
#main-header.nav-open #nav-links-container a {
    opacity: 1;
    transform: translateY(0);
}

/* Gestaffelte Verzögerung */
#main-header.nav-open #nav-links-container a:nth-child(1) {
    transition-delay: 0.1s;
}

#main-header.nav-open #nav-links-container a:nth-child(2) {
    transition-delay: 0.2s;
}

#main-header.nav-open #nav-links-container a:nth-child(3) {
    transition-delay: 0.3s;
}

#main-header.nav-open #nav-links-container a:nth-child(4) {
    transition-delay: 0.4s;
}

/* Artwork Container wechselt zu einer gestapelten Ansicht */
.artwork-container {
    padding: 0 10px; 
    margin-bottom: 100px; 
}

/* Artwork Image Wrapper - behält Desktop-Einstellungen bei */
.artwork-image-wrapper {
    /* Keine Überschreibung nötig - erbt von Desktop */
}

.artwork-image-wrapper img {
    width: 100%;
    max-width: 100%;
}

/* Caption (Title + MORE) bleibt unter dem Bild */
.artwork-caption {
    order: 2;
    margin-top: 12px;
}

/* Overlay Anpassungen für Mobile */
.artwork-overlay {
    padding: 10px;
}

.artwork-overlay .overlay-info-content {
    font-size: 9px;
    white-space: normal;
    text-align: center;
}

.artwork-overlay .overlay-info-content p {
    white-space: normal;
}

.overlay-close-btn {
    right: 10px;
    width: 20px;
    height: 20px;
    font-size: 7px;
}
    
    /* Overlay Anpassungen für Mobilgeräte */
    #overlay-header {
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        padding: 10px;
    }
    
    #overlay-header .header-right {
        margin-top: 0;
        flex-grow: 0;
    }

    /* CLOSE-Button für Mobile */
    #close-overlay {
        top: 60px; 
    }

    #overlay-content {
        flex-direction: row; 
        padding: 60px 10px 10px 10px; 
    }

    /* Prev/Next Buttons bleiben absolut positioniert, aber mit 10px Rand */
    #prev-btn, #next-btn {
        padding: 0; 
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    #prev-btn {
        left: 10px; 
    }

    #next-btn {
        right: 10px; 
    }
    
    #main-image-wrapper {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0 40px;
    }

    /* CLOSE-Button für Mobile */
#close-overlay {
    /* WICHTIG: Positionierung von TOP auf BOTTOM geändert */
    top: auto; 
    bottom: 40px; /* 10px vom unteren Rand */
    left: 50%;
    transform: translateX(-50%); 
}

/* Overlay Content muss kleiner sein, um Platz für die Steuerelemente unten zu lassen */
#overlay-content {
    /* Höhe reduziert, um unten Platz für die Steuerelemente zu schaffen (~40px) */
    height: calc(100vh - 100px); 
    padding: 60px 10px 40px 10px; /* Padding unten muss genug Platz lassen */
}

/* Previous/Next Buttons */
#prev-btn, #next-btn {
    padding: 0; 
    position: absolute;
    /* WICHTIG: Positionierung von TOP auf BOTTOM geändert */
    top: auto; 
    bottom: 40px; /* 10px vom unteren Rand */
    transform: none; /* Keine vertikale Zentrierung mehr nötig */
}

#prev-btn {
    left: 10px; /* Links 10px */
}

#next-btn {
    right: 10px; /* Rechts 10px */
}

/* Auf kleinen Bildschirmen - Jahr und Text nebeneinander mit korrekter Ausrichtung */
.cv-list-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.cv-year {
    width: 50px;
    min-width: 50px;
    flex-shrink: 0;
    margin-right: 10px;
    margin-bottom: 0;
    font-weight: 300;
}

.link-name {
    flex: 1;
    padding-left: 0;
    margin-bottom: 0;
}

.cv-details {
    padding-left: 0;
}

#cv-container {
    padding-top: 0px;
}

.cv-list-education {
    margin-left: 0;
}

.cv-list-education .cv-year {
    display: none;
}

.cv-list-education .cv-details {
    margin-left: 0;
}

.publication-gallery {
        grid-template-columns: 1fr; /* Nur eine Spalte */
        gap: 20px; /* Einheitlicher Abstand für Mobile */
    }
/* Hauptbild im Overlay */
#main-overlay-image {
max-width: calc(100vw - 20px)!important;
min-width: calc(100vw - 20px)!important;
}
    
}