/*
=======================================================================
===
SCHALL / FRANCKE - ABSOLUTE 18PX UNIFORMITY (style.css)
=======================================================================
=== */
 
:root { color-scheme: dark; 
}
 
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2');
}
body, html, header, main, div, p, span, h1, h2, h3, summary, details, a {
    color: #EBEBEB !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}
 
 html {
    scroll-behavior: smooth;
    background-color: #0C0C0C !important;
}
 
/* Scrollbar der Hauptseite sperren, wenn eine Lightbox geöffnet ist */
html:has(.lightbox-pure-css:target) {
    overflow: hidden !important;
    overflow: hidden !important;
    scrollbar-gutter: stable; /* Hält den Platzhalter der Scrollbar frei, verhindert das Springen */
}
 
html:has(.lightbox-pure-css:target) #back-to-top {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
}
body { 
    background-color: #0C0C0C;
}
 
header {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 80px;
    background-color: transparent !important;
    z-index: 1000;
    pointer-events: none !important;
}
 
.logo a, 
nav a,
header a { 
    text-decoration: none;
    letter-spacing: 2px;
    pointer-events: auto !important;
}
 
nav a { 
    margin-left: 30px;
    letter-spacing: 1px;
}
 
.hero {
    width: 100%; 
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}
 
.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #0C0C0C;
}
 
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    /* Wir entfernen die Transition hier, um Konflikte zu vermeiden */
}
 
/* Wenn ein Slide die Klasse "fade" hat, bekommt er die Animation */
.hero-slide.fade {
    transition: opacity 2s ease-in-out !important;
}
 
.hero-slide.active {
    opacity: 1 !important;
    z-index: 2 !important;
}
 
.hero-slide.last-active {
    opacity: 0 !important;
    z-index: 1 !important;
}
/* =======================================================================
   1. GLOBALE BASIS-STRUKTUR
   ======================================================================= */
.werkverzeichnis { 
    width: 100%;
    /* HIER: Den Stopper auf die logische Breite deines MacBooks setzen */
    max-width: 1512px !important; 
    margin: 0 auto !important; 
    box-sizing: border-box !important;
}
 
.work-summary,
.work-content {
    display: grid !important;
    gap: 30px !important;
    box-sizing: border-box !important;
    position: relative !important;
}
 
.work-content img:not(.lightbox-standalone-img),
.desktop-only-gallery img:not(.lightbox-standalone-img), 
.mobile-only-gallery img:not(.lightbox-standalone-img),
.cover-desktop-img:not(.lightbox-standalone-img) {
    cursor: pointer !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.no-break {
        white-space: nowrap;
        display: inline-block;
    }
 
/* =======================================================================
   2. REINE ABSATZ-STEUERUNG
   ======================================================================= */
.work-text p, 
.work-text div {
    margin-top: 0 !important;
    margin-bottom: 20px !important; 
    padding-left: 0 !important;
    padding-right: 0 !important;
}
 
.work-text p:last-child, 
.work-text div:last-child {
    margin-bottom: 0 !important;
}
 
/* =======================================================================
   3. STRIKTES DESKTOP-LAYOUT (Ab 1025px) - KEINE ÜBERLAPPUNG MEHR
   ======================================================================= */
@media (min-width: 1025px) {
    .werkverzeichnis {
        padding: 170px 120px 60px 120px !important;
    }
 
    .work-summary{
        display: grid !important;
        grid-template-columns: 0.4fr 1.9fr 1.5fr 1.4fr 0.8fr !important;
    }
 
    .work-summary {
        padding: 18px 0px !important;
        align-items: baseline !important;
        border-bottom: none !important;
        cursor: pointer !important;
    }  
     
        
        /* Die 5. Spalte im Grid rechtsbündig ausrichten */
    .work-summary > div:nth-child(5) {
        text-align: right !important;
        justify-self: end !important;
        width: 100% !important;
    }
 
    .work-content {
        padding: 40px 0px 80px 0px !important;
        align-items: flex-start !important;
        background: transparent !important;
    display: grid !important;
    grid-template-columns: 0.4fr 1.9fr 1.5fr 1.4fr 0.8fr !important; /* Zum Beispiel ein 12-Spalten-Layout */
    gap: 30px !important;
    }
    
    .work-content.no-images .work-text {
        grid-column: 2 / span 4 !important;
    }
    
    /* Wenn keine Bilder da sind: Den (leeren) Galerieraum ausblenden */
    .work-content.no-images .desktop-only-gallery {
        display: none !important;
    }
    
 
    .work-text { 
       grid-column: 2 / span 1 !important; /* Text nimmt die ersten 6 Spalten */
        grid-row: 1 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    
 
    .desktop-only-gallery,
    .cover-desktop-img,
    .work-content > img,
    .work-content > div:not(.work-text) { 
        display: block !important;
        visibility: visible !important;
        grid-column: 3 / span 3 !important; /* Bilder nehmen die restlichen 6 Spalten */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 5 !important;
        position: relative !important;
    }
 
    .mobile-only-gallery { 
        display: none !important;
        visibility: hidden !important;
    }
}
 
/* LIGHTBOX BASE STYLES */
.lightbox-pure-css { 
    display: none !important; 
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(12, 12, 12, 0.98) !important;
    z-index: 999999 !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}
 
.lightbox-pure-css:target {
    display: flex !important;
}
 
/* Lightbox anzeigen, wenn sie das Ziel ist */
body.js-loaded .lightbox-pure-css:target {
    display: flex !important;
}
 
.lightbox-close-overlay { 
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: zoom-out !important;
    z-index: 1 !important; /* Ganz unten, damit es nicht die Klicks auf die Pfeile blockt */
}
 
.lightbox-standalone-img { 
    max-width: 95vw !important;
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    pointer-events: none !important; /* WICHTIG: Klick geht durch das Bild hindurch */
    z-index: 1005 !important;

    
}
 
/* Der Trigger deckt nun nicht mehr alles ab, sondern nur noch den Bildbereich */
.lightbox-image-trigger {
    position: relative !important; /* Kein absolute mehr, damit er sich nicht über den Rand legt */
    z-index: 2 !important; /* Über dem Overlay */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Wir begrenzen ihn auf die Größe des Bildes */
    max-width: 95vw !important;
    max-height: 95vh !important;
}
 
.close-lightbox { 
    position: absolute !important;
    top: 16px !important;
    right: 40px !important;
    z-index: 10 !important; /* Ganz oben */
    text-transform: lowercase;
    text-decoration: none;
    user-select: none;
    font-size: 32px !important;
    line-height: 1;
    color: #EBEBEB !important;
}
 
.nav-lightbox {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1010 !important;
    text-decoration: none !important;
    font-size: 40px !important;
    color: #EBEBEB !important;
    padding: 20px !important;
}
 
.prev-img { left: 40px !important; }
.next-img { right: 40px !important; }
 
[id^="lightbox-"]:target .nav-lightbox {
    display: block !important;
}
 
.lightbox-mob-nav-bar {
    display: none !important;
}
 
/* INFO-SEKTION */
.info-header-line { 
    padding-left: 140px !important;
    margin-bottom: 40px !important;
}
 
 
/* Weiter unten in der INFO-SEKTION */
.info-grid { 
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    /* HIER AUCH: Die Begrenzung anpassen */
    max-width: 1512px !important; 
    margin: 0 auto !important;
    padding-left: 140px !important;
    padding-right: 40px !important;
    align-items: flex-start !important;
}
 
.info-left p { 
    max-width: 500px !important;
}
.info-right h3 { 
    letter-spacing: 2px !important;
    margin-bottom: 24px !important;
}
.info-right p { 
    margin-bottom: 24px !important;
}
.info-right a { 
    text-decoration: none !important;
    border-bottom: 1px solid rgba(235, 235, 235, 0.3) !important;
    padding-bottom: 2px !important;
}
.copyright-line { 
    margin-top: 60px !important;
    display: block !important;
}
 
/* =======================================================================
   === 4. RADIKALE MOBIL- & TABLET-OPTIMIERUNG (Bis 1024px)
   ======================================================================= */
@media (max-width: 1024px) {
    header { 
        padding: 20px 15px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        flex-wrap: nowrap !important;
    }
    .logo { 
        max-width: 55% !important;
    }
    .logo a { 
        font-size: 18px !important;
        display: block !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    nav { 
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    nav a { 
        font-size: 18px !important;
        margin-left: 20px !important;
        display: inline-block !important;
    }
    .werkverzeichnis { 
        padding: 120px 0px 40px 0px !important;
        width: 100% !important;
        overflow-x: hidden !important; 
    }
    .work-summary { 
        display: block !important;
        position: relative !important;
        padding: 14px 15px 14px 25px !important;
        overflow-anchor: none !important;
        border-bottom: none !important;
        cursor: pointer
    }
    .work-summary div:nth-child(1) { 
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: auto !important;
        margin: 0 0 4px 0 !important;
        display: block !important;
    }
    .work-summary div:not(:nth-child(1)) { 
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 4px 0 !important;
        text-align: left !important;
    }
    .desktop-only-gallery { 
        display: none !important;
    }
.work-content { 
        display: flex !important;
        flex-direction: column !important; 
        padding: 10px 0px 30px 0px !important;
    }
 
    /* Slider zuerst */
    .mobile-only-gallery { 
        order: 1 !important; 
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important; /* Etwas Abstand zum Text */
    }
 
    /* Text danach */
    .work-text { 
        order: 2 !important; 
        padding: 0px 15px 20px 25px !important;
    }
 
    /* Slider-Container Styling bleibt wie gehabt */
    .lightbox-mob-slider {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: auto !important;
    }
 
    .lightbox-mob-slider::-webkit-scrollbar {
        display: none !important;
    }
 
    .lightbox-mob-slide {
        flex: 0 0 100% !important;
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        overflow: hidden !important;
    }
 
    .lightbox-mob-slide img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;        
        display: block !important;
        object-fit: cover !important;    
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;  
    }
/* Mobile Slider Navigation - Fixes */
.mobile-slider-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    margin-top: 10px !important;
}
 
.mobile-slider-nav button {
    background: none !important;
    border: none !important;
    color: #EBEBEB !important;
    font-size: 44px !important; /* Deine Vorgabe */
    cursor: pointer !important;
    padding: 0 15px !important;
    font-family: 'Cormorant Garamond', serif !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
}
 
 
}
 
 
 
/*
=======================================================================
=== UNIVERSELLER "NACH OBEN"-PFEIL
=======================================================================
=== */
#back-to-top, .back-to-top-btn {
    display: inline-block !important;
    position: fixed !important;
    bottom: 40px !important;
    right: 40px !important;
    width: 50px !important;
    height: 50px !important;
    background: transparent !important;
    border: none !important;           
    z-index: 999999 !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 44px !important;
    font-weight: 400 !important;
    line-height: 44px !important;
    transform: rotate(-90deg) !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
 
/* 1. Allgemeiner Zustand: Komplett deckend auf Desktop (Standard) */
#back-to-top.visible, .back-to-top-btn.visible { 
    visibility: visible !important;
    opacity: 1 !important; 
}
 
/* 2. Nur auf dem Handy: 80% Transparenz */
@media (max-width: 1024px) {
    #back-to-top, .back-to-top-btn, #back-to-top.visible, .back-to-top-btn.visible { 
        bottom: 25px !important;
        right: 25px !important;
        font-size: 44px !important;
        opacity: 0.8 !important; /* Hier wirkt es nur mobil */
    }
}
 
 
/* =======================================================================
   === 5. ANTI-FLASH-LOGIK (Ultimative Version gegen Decoder-Weiß)
   ======================================================================= */
 
/* 1. Grundgesamtheit auf tiefschwarz setzen */
html, main, .werkverzeichnis, .hero-slider, .hero-slide, .lightbox-mob-slide {
    background-color: #0C0C0C !important;
}
 
/* 2. Echte <img> Tags (Desktop Cover, Lightbox & Mobile Slider) */
/* Wir sprechen die Klassen jetzt DIREKT auf dem img-Tag an */
.cover-desktop-img,
.lightbox-standalone-img,
.work-image-click {
    opacity: 0;
}
 
/* Sichtbar machen, sobald das JS das 'is-loaded' Signal gibt */
.cover-desktop-img.is-loaded,
.lightbox-standalone-img.is-loaded,
.work-image-click.is-loaded {
    opacity: 1 !important;
    transition: opacity 0.2s ease-out !important;
}
 
/* 3. Hero-Slider (CSS-Hintergrundbilder) Absicherung */
/* Falls ein Slide aktiv geschaltet wird, aber das Bild im Hintergrund 
   noch nicht fertig decodiert ist: Zwingend auf opacity 0 halten! */
.hero-slide.active:not(.is-loaded) {
    opacity: 0 !important;
}
 
/* Erst wenn er aktiv UND fertig geladen ist, darf er weich einfaden (Nur vor dem Loop!) */
.hero-slide.active.is-loaded:not(.fade) {
    opacity: 1 !important;
    z-index: 2 !important;
    transition: opacity 0.2s ease-out !important;
}
 
/* =======================================================================
   NEU: CACHE-BLITZ-SCHUTZ (Deaktiviert Transition bei Instant-Load)
   ======================================================================= */
.hero-slide.active.is-loaded.instant-load:not(.fade),
.cover-desktop-img.instant-load,
.lightbox-standalone-img.instant-load,
.work-image-click.instant-load {
    transition: none !important;
}