/* ============================================================
   LICHTMALER_MUC — PHASE 2: PREMIUM GALLERIES
   Additive stylesheet. Loaded together with /assets/css/site.css
   on every /fine-art, /architecture, /street page.
   ============================================================ */

:root{
  --g-bg:#050505;
  --g-gold:#C7A15B;
  --g-white:#F4F1EA;
  --g-anthracite:#2A2A2A;
  --g-line:rgba(199,161,91,.28);
}

.g-body{ background:var(--g-bg); font-family:'Inter','Helvetica Neue',Arial,sans-serif; }
.g-body h1,.g-body h2,.g-body h3,.g-body .g-serif{ font-family:'Cinzel','Cormorant Garamond',Georgia,serif; }

/* ---------- shared gallery topbar ---------- */
.g-topbar{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; justify-content:space-between; align-items:center; padding:30px 4vw; }
.g-back{ border:0; background:transparent; color:var(--g-gold); letter-spacing:.22em; text-transform:uppercase; font-size:11px; cursor:pointer; display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; transition:.3s; }
.g-back:hover{ transform:translateX(-4px); color:var(--g-white); }

/* ---------- category hero (gallery index) ---------- */
.g-hero{ min-height:56vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18vh 6vw 8vh; position:relative; overflow:hidden; }
.g-hero:before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%), var(--g-bg); z-index:-1; }
.g-kicker{ font-size:11px; letter-spacing:.5em; text-transform:uppercase; color:var(--accent); margin-bottom:1.4em; }
.g-hero h1{ font-weight:400; font-size:clamp(40px,7vw,96px); letter-spacing:.14em; color:var(--g-white); margin:0 0 .5em; text-transform:uppercase; }
.g-hero p{ max-width:620px; color:#c8c2b6; line-height:1.9; font-size:15px; }

/* ---------- editorial works list: no grid of thumbnails, large works only ---------- */
.works-list{
  max-width:1500px; margin:0 auto; padding:4vh 5vw 14vh;
  display:grid; grid-template-columns:1fr 1fr; gap:10vh 4vw;
}
.works-list.only-two{ max-width:1200px; }
.work-card{
  position:relative; text-decoration:none; color:inherit;
  display:block;
}
.work-card:nth-child(odd){ margin-top:0; }
.work-card:nth-child(even){ margin-top:8vh; }
.work-frame{
  position:relative; overflow:hidden; background:#0a0a0a;
  aspect-ratio:4/5;
  cursor:zoom-in;
}
.work-frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) brightness(.82) contrast(1.04);
  transform:scale(1.02);
  transition:transform 1.4s cubic-bezier(.16,.8,.24,1), filter 1.4s ease, opacity 1s ease;
  opacity:0;
}
.work-frame img.loaded{ opacity:1; }
.work-frame:after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
}
.work-card:hover .work-frame img{ transform:scale(1.07); filter:grayscale(0) brightness(.92) contrast(1.05); }
.work-glow{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }
.work-card:hover .work-glow{ opacity:1; }
.work-caption{ display:flex; justify-content:space-between; align-items:baseline; margin-top:22px; padding:0 2px; }
.work-caption h2{ font-weight:400; font-size:clamp(17px,1.7vw,24px); letter-spacing:.08em; color:var(--g-white); margin:0; }
.work-caption span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); opacity:.85; }

@media (max-width:900px){
  .works-list{ grid-template-columns:1fr; gap:9vh; padding:4vh 6vw 12vh; }
  .work-card:nth-child(even){ margin-top:0; }
}

/* ---------- lightbox: navigation disappears, only the work remains ---------- */
.g-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(3,3,3,.98);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s;
}
.g-lightbox.open{ opacity:1; visibility:visible; }
.g-lightbox img{
  max-width:88vw; max-height:84vh; object-fit:contain;
  opacity:0; transform:scale(.97);
  transition:opacity .6s ease .1s, transform .6s ease .1s;
  box-shadow:0 40px 140px rgba(0,0,0,.7);
}
.g-lightbox.open img{ opacity:1; transform:scale(1); }
.g-lightbox-cap{ position:absolute; bottom:6vh; left:0; right:0; text-align:center; color:var(--g-white); letter-spacing:.18em; font-size:12px; text-transform:uppercase; opacity:.75; }
.g-lightbox-close{ position:absolute; top:30px; right:4vw; background:none; border:0; color:var(--g-gold); font-size:32px; cursor:pointer; line-height:1; }
.g-lightbox-hint{ position:absolute; bottom:2.4vh; left:0; right:0; text-align:center; color:#8f887a; font-size:10px; letter-spacing:.28em; text-transform:uppercase; }
body.lightbox-open .g-topbar{ opacity:0; pointer-events:none; transition:opacity .35s ease; }

/* ============================================================
   WERK-SEITE (single work page)
   ============================================================ */
.werk-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#020202; }
.werk-hero-img{ position:absolute; inset:0; }
.werk-hero-img img{ width:100%; height:110%; object-fit:cover; filter:brightness(.62) contrast(1.06) saturate(.92); will-change:transform; }
.werk-hero:after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.35) 100%); }
.werk-hero-content{ position:relative; z-index:2; padding:0 6vw 9vh; max-width:900px; }
.werk-kicker{ color:var(--accent); font-size:11px; letter-spacing:.5em; text-transform:uppercase; margin-bottom:1em; }
.werk-hero-content h1{ font-weight:400; font-size:clamp(38px,6vw,84px); letter-spacing:.08em; color:var(--g-white); margin:0 0 .3em; }
.werk-hero-content .werk-sub{ font-size:15px; letter-spacing:.1em; color:#cfc8ba; font-style:italic; font-family:'Cormorant Garamond',Georgia,serif; max-width:640px; line-height:1.6; }
.werk-scroll{ position:absolute; z-index:2; bottom:4vh; left:6vw; display:flex; align-items:center; gap:12px; color:#a79f8f; font-size:10px; letter-spacing:.3em; text-transform:uppercase; }
.werk-scroll:before{ content:""; width:26px; height:1px; background:var(--g-gold); }

.werk-body{ max-width:820px; margin:0 auto; padding:14vh 6vw 4vh; }
.werk-body h2{ font-weight:400; font-size:clamp(22px,2.6vw,32px); letter-spacing:.08em; color:var(--g-white); margin:0 0 .8em; }
.werk-story{ color:#c9c2b4; line-height:2; font-size:16px; }

.werk-info{
  max-width:820px; margin:7vh auto 0; padding:5vh 0; border-top:1px solid var(--g-line); border-bottom:1px solid var(--g-line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center;
}
.werk-info div span{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.7em; }
.werk-info div strong{ font-weight:400; font-size:16px; color:var(--g-white); letter-spacing:.03em; font-family:'Cormorant Garamond',Georgia,serif; }

/* ---------- Anfrage / inquiry ---------- */
.werk-inquiry{ max-width:640px; margin:9vh auto 0; padding:0 6vw 4vh; }
.werk-inquiry h2{ font-weight:400; font-size:clamp(22px,2.6vw,30px); color:var(--g-white); text-align:center; margin:0 0 1.4em; }
.g-field{ margin:16px 0; }
.g-field label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:#cfc8ba; margin-bottom:8px; }
.g-field input,.g-field select,.g-field textarea{
  width:100%; background:var(--g-anthracite); border:1px solid rgba(255,255,255,.12); color:var(--g-white);
  padding:14px 15px; font-family:'Inter',sans-serif; font-size:14px; outline:none; transition:.25s;
}
.g-field input:focus,.g-field select:focus,.g-field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.g-field textarea{ min-height:110px; resize:vertical; }
.g-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.g-special{ display:none; border-top:1px solid var(--g-line); margin-top:8px; padding-top:6px; }
.g-special.show{ display:block; animation:gFade .4s ease; }
@keyframes gFade{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }
.g-submit{ width:100%; margin-top:8px; background:transparent; border:1px solid var(--accent); color:var(--g-white); padding:16px; letter-spacing:.2em; text-transform:uppercase; font-size:12px; cursor:pointer; transition:.3s; }
.g-submit:hover{ background:color-mix(in srgb, var(--accent) 16%, transparent); box-shadow:0 0 28px color-mix(in srgb, var(--accent) 30%, transparent); }
.g-form-msg{ display:none; margin-top:16px; color:var(--accent); line-height:1.7; font-size:14px; text-align:center; }
.g-form-msg.show{ display:block; }

/* ---------- werk footer nav ---------- */
.werk-footnav{
  border-top:1px solid var(--g-line); margin-top:12vh; padding:6vh 6vw 8vh;
  display:flex; flex-wrap:wrap; justify-content:center; gap:2.5em;
  text-align:center;
}
.werk-footnav a{ text-decoration:none; color:#c9c2b4; font-size:12px; letter-spacing:.2em; text-transform:uppercase; transition:.3s; }
.werk-footnav a:hover{ color:var(--accent); }
.werk-footnav a.primary{ color:var(--accent); }

@media (max-width:900px){
  .werk-info{ grid-template-columns:1fr; gap:26px; }
  .g-row2{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .work-frame img, .g-lightbox img, .werk-hero-img img{ transition:none !important; }
}