/* ===================================================================
   artwork-detail.css – Stile NUR fuer die Kunstwerk-Detailseiten
   (kunstwerke/*.html). Header/Footer/Fonts/Farben kommen aus styles.css.
   Aufgeraeumt: alte Header-/Detail-/Aehnliche-Werke-Stile entfernt.
   =================================================================== */

/* ===================================================================
   3. NAVIGATION & LIGHTBOX / ZOOM
   =================================================================== */

.artwork-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(140, 106, 46,0.12);
    gap: 20px;
}

.nav-artwork {
    color: var(--farbe-akzent);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
    max-width: 48%;
}

.nav-artwork:hover { color: var(--farbe-hover); }
.nav-artwork.next { text-align: right; margin-left: auto; }

/* Floating Nav-Pfeile */
.artwork-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(29,26,50,0.55);
    color: #fff;
    border: none;
    width: 48px;
    height: 80px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    border-radius: 4px;
    text-decoration: none;
}

.artwork-nav-arrow:hover {
    background: var(--farbe-hover);
    color: var(--farbe-dunkel);
}

.artwork-nav-arrow.prev { left: 0; border-radius: 0 4px 4px 0; }
.artwork-nav-arrow.next { right: 0; border-radius: 4px 0 0 4px; }

/* 4-Bilder-Grid */
.artwork-image-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 6px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.gallery-img-slot {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #e8dcc8;
    cursor: zoom-in;
}

.gallery-img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter .3s ease;
}

.gallery-img-slot:hover img {
    transform: scale(1.12);
}

/* Dezentes Abdunkeln, solange die Hover-Lupe aktiv ist (nur Desktop/Maus, siehe
   hover-lupe.ts) – Klasse wird ausschließlich in artwork-detail.ts gesetzt. Gleicher
   Effekt wie ".sr2-wand--verdunkelt" im Showroom (showroom2.css). */
.gallery-img-slot--verdunkelt img {
    filter: brightness(.85);
}

.gallery-slot-overlay {
    position: absolute;
    inset: 0;
    background: rgba(29,26,50,0.2);
    /* Kein Icon: Zoom-Cursor + Abdunkeln genügen als Klick-Signal */
    opacity: 0;
    transition: opacity 0.35s ease;
}

.gallery-img-slot:hover .gallery-slot-overlay {
    opacity: 1;
}

.gallery-img-slot.placeholder {
    cursor: default;
    background: #ede2cc;
}

/* Hover-Lupe übers Hauptbild (Pinselstruktur), gemeinsames Modul mit dem Showroom
   (siehe src/scripts/hover-lupe.ts) – Optik 1:1 von .sr2-lupe (showroom2.css) übernommen. */
.ed-detail-lupe {
    position: fixed;
    z-index: 5;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 3px solid rgba(248, 246, 242, .9);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(29, 26, 50, .15);
    background-repeat: no-repeat;
    background-size: 320%;
    opacity: 0;
    /* Deutlich sichtbares Wachsen von klein auf volle Größe beim Erscheinen (nicht nur
       ein leichtes Aufblenden) – ease-out-quint für einen knackigen, nicht wabbeligen Pop. */
    transform: scale(.3);
    pointer-events: none;
    transition: opacity .2s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ed-detail-lupe.ist {
    opacity: 1;
    transform: scale(1);
}

/* Auf Touch-Geräten/schmalen Screens bewusst aus (kein Hover, Layout liegt eng) */
@media (max-width: 700px), (hover: none) {
    .ed-detail-lupe { display: none; }
}

.placeholder-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(140, 106, 46,0.4);
    font-size: 11px;
    letter-spacing: 1px;
    text-align: center;
    padding: 10px;
    font-family: 'source', monospace;
}

.placeholder-inner .placeholder-icon {
    font-size: 30px;
    opacity: 0.35;
    display: block;
}

/* Lightbox – natives <dialog>-Element (Top-Layer, Fokus-Falle, Esc vom Browser) */
.artwork-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--farbe-lightbox);
    z-index: 9999;
}

/* Geschlossenes <dialog> ist per UA-Style display:none; offen zeigen wir es als Flex-Overlay. */
.artwork-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tönung liegt auf dem Dialog selbst; der native Backdrop bleibt transparent. */
.artwork-lightbox::backdrop {
    background: transparent;
}

/* Bühne für den Bildwechsel, siehe artwork-detail.ts (Klasse Slideshow). Technik aus
   codrops/SlideshowAnimations Demo 6 (MIT): alle Bilder liegen als Grid-Ebenen exakt
   übereinander gestapelt (grid-area 1/1/-1/-1), GSAP animiert xPercent (Verschieben)
   und scaleX (kurze Stauchung) auf der aus- und der einlaufenden Ebene gleichzeitig.
   "overflow:hidden" auf .slide schneidet die Verzerrung an den Rändern sauber ab. */
.artwork-lightbox-stage {
    position: relative;
    width: 82vw;
    height: 88vh;
    max-width: 82vw;
    max-height: 88vh;
}
.artwork-lightbox-stage .slides {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    place-items: center;
}
.artwork-lightbox-stage .slide {
    width: 100%;
    height: 100%;
    grid-area: 1 / 1 / -1 / -1;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    position: relative;
    display: grid;
    place-items: center;
    will-change: transform, opacity;
}
.artwork-lightbox-stage .slide--current { pointer-events: auto; opacity: 1; }
.artwork-lightbox-stage .slide__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    will-change: transform;
}

.artwork-lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    font-family: sans-serif;
    z-index: 1;
}

.artwork-lightbox-close:hover { opacity: 1; }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 26px;
    width: 52px;
    height: 80px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    border-radius: 4px;
    z-index: 1;
    font-family: sans-serif;
}

.lightbox-nav:hover { background: var(--farbe-hover); color: var(--farbe-dunkel); }
.lightbox-nav.lightbox-prev { left: 16px; }
.lightbox-nav.lightbox-next { right: 16px; }
.lightbox-nav:disabled { opacity: 0.2; cursor: default; }
.lightbox-nav:disabled:hover { background: rgba(255,255,255,0.12); color: #fff; }

.lightbox-counter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    letter-spacing: 2px;
    font-family: 'source', monospace;
    max-width: 90vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}


@media (max-width: 600px) {
    .artwork-nav-arrow {
        width: 36px;
        height: 60px;
        font-size: 20px;
    }
}


/* ===================================================================
   EDITORIAL-DESIGN – Detailseiten (Variante C)
   =================================================================== */

.ed-detail{max-width:1100px;margin:0 auto;padding:40px 40px 20px}
.ed-breadcrumb{font-family:'source',monospace;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 30px}
.ed-breadcrumb a{color:var(--farbe-akzent);text-decoration:none}
.ed-breadcrumb a:hover{color:var(--farbe-hover)}
.ed-detail-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}

/* Bildbereich: Hauptbild gross + Detailaufnahmen als Reihe */
.ed-detail-media .artwork-image-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-radius:0;overflow:visible;box-shadow:none}
.ed-detail-media .gallery-img-slot{aspect-ratio:1;background:var(--lqip,none) center/cover content-box no-repeat,var(--farbe-flaeche);padding:12px;border:1px solid rgba(29,26,50,.10);cursor:zoom-in;box-shadow:0 12px 26px -18px rgba(29,26,50,.5),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden;transition:box-shadow .3s ease}
.ed-detail-media .gallery-img-slot[data-index="0"]{grid-column:1 / -1;aspect-ratio:auto;padding:16px}
.ed-detail-media .gallery-img-slot img{box-shadow:0 0 0 1px rgba(29,26,50,.06),0 3px 10px -2px rgba(29,26,50,.2)}
.ed-detail-media .gallery-img-slot:hover{box-shadow:0 16px 30px -16px rgba(140, 106, 46,.55),inset 0 1px 0 rgba(255,255,255,.7)}
.ed-detail-media .gallery-img-slot[data-index="0"] img{height:auto;object-fit:fill}

/* Infospalte */
.ed-detail-info{padding-top:4px}
/* Farbe wie zuvor die entfernte "Monique Fischer"-Unterzeile (.ed-detail-sub) –
   der Name wiederholte sich auf jeder Werkseite, die Akzentfarbe bleibt am Titel. */
.ed-detail-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:var(--schrift-werk-titel);line-height:1.04;letter-spacing:.2px;color:var(--farbe-akzent);margin:0}
.ed-detail-desc{font-size:20px;line-height:1.8;color:var(--farbe-text);margin:24px 0 0}
.ed-specs{margin:30px 0 0;padding:0;border-top:1px solid rgba(29,26,50,.12)}
.ed-spec{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(29,26,50,.12)}
/* KEIN uppercase: Browser wandeln ß dabei in SS um („Maße" → „MASSE") */
.ed-spec dt{font-family:'source',monospace;font-size:13px;letter-spacing:1px;color:var(--farbe-akzent);margin:0}
.ed-spec dd{font-size:17px;color:var(--farbe-dunkel);margin:0;text-align:right}
.ed-detail-status{display:flex;align-items:center;gap:16px;margin:28px 0 22px}
.ed-btn{display:inline-block;font-family:'source',monospace;font-size:14px;letter-spacing:1px;text-transform:uppercase;background:var(--farbe-akzent);color:var(--farbe-hintergrund);padding:14px 26px;border-radius:4px;text-decoration:none;margin:0 10px 10px 0;transition:background .2s ease}
.ed-btn:hover{background:var(--farbe-hover);color:var(--farbe-dunkel)}
.ed-btn.secondary{background:transparent;color:var(--farbe-akzent);border:1px solid rgba(140, 106, 46,.4)}
.ed-btn.secondary:hover{background:rgba(110, 140, 90,.12);color:var(--farbe-hover);border-color:var(--farbe-hover)}

/* Vor/Zurueck-Navigation */
.ed-detail .artwork-navigation{display:flex;justify-content:space-between;gap:24px;margin:46px 0 0;padding:28px 0 0;border-top:1px solid rgba(29,26,50,.12)}
.ed-detail .nav-artwork{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:21px;color:var(--farbe-akzent);text-decoration:none;max-width:48%;transition:color .2s ease}
.ed-detail .nav-artwork:hover{color:var(--farbe-hover)}
.ed-detail .nav-artwork.next{text-align:right;margin-left:auto}

@media(max-width:768px){
    .ed-detail{padding:28px 22px}
    .ed-detail-layout{grid-template-columns:1fr;gap:32px}
    .ed-detail-title{font-size:34px}
}

/* ===================================================================
   NACHT-THEME – Overrides für die fest verdrahteten hellen Flächen/Ränder
   der Detailseite (die übrigen Farben kommen aus den --farbe-*-Variablen).
   =================================================================== */
html[data-theme="dark"] .gallery-img-slot { background: var(--farbe-flaeche); }
html[data-theme="dark"] .gallery-img-slot.placeholder { background: #1c2038; }
html[data-theme="dark"] .artwork-image-gallery { box-shadow: 0 8px 30px rgba(0,0,0,0.5); }

html[data-theme="dark"] .ed-detail-media .gallery-img-slot {
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 12px 26px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .ed-detail-media .gallery-img-slot img {
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 3px 10px -2px rgba(0,0,0,.55);
}
html[data-theme="dark"] .ed-specs { border-top-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .ed-spec { border-bottom-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .ed-detail .artwork-navigation { border-top-color: rgba(255,255,255,.12); }