/* =====================================================================
   LaserVersum – Werk-Galerie (Leder-Kollektion, Praxisbeispiele, Lightbox)
   Eigenständige Ergänzung zu site.css – alle Klassen beginnen mit "lv-".
   ===================================================================== */

:root{
  --lv-accent: #c9a867;
  --lv-accent-soft: rgba(201,168,103,.18);
  --lv-radius: 18px;
  --lv-border: rgba(255,255,255,.09);
  --lv-shadow: 0 18px 50px -18px rgba(0,0,0,.65);
  --lv-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Bento-Galerie (Startseite) ---------- */
.lv-bento{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:clamp(150px, 17vw, 235px);
  grid-auto-flow:dense;
  gap:clamp(12px, 1.6vw, 20px);
  margin-top:clamp(34px, 5vw, 56px);
}
.lv-tile{
  position:relative;
  grid-row:span 2;
  display:block;
  width:100%; height:100%;
  padding:0; margin:0; border:0;
  border-radius:var(--lv-radius);
  overflow:hidden;
  background:#161412;
  cursor:zoom-in;
  isolation:isolate;
  box-shadow:var(--lv-shadow);
  outline:1px solid var(--lv-border);
  outline-offset:-1px;
  text-align:left;
  font:inherit;
  color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.lv-tile--wide{ grid-column:span 2; }
.lv-tile picture, .lv-tile img{
  display:block; width:100%; height:100%;
}
.lv-tile img{
  object-fit:cover;
  transform:scale(1.001);
  transition:transform .9s var(--lv-ease), filter .6s var(--lv-ease);
}
.lv-tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(10,8,6,.82) 100%);
  z-index:1;
  pointer-events:none;
  transition:opacity .5s var(--lv-ease);
}
.lv-tile-cap{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:clamp(14px, 1.8vw, 22px);
  display:flex; flex-direction:column; gap:4px;
  transform:translateY(4px);
  transition:transform .5s var(--lv-ease);
}
.lv-tile-tag{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lv-accent);
  font-weight:600;
}
.lv-tile-title{
  font-family:"Fraunces", Georgia, serif;
  font-weight:400;
  font-size:clamp(1rem, 1.35vw, 1.28rem);
  line-height:1.2;
  color:#fff;
}
.lv-tile-zoom{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(15,13,11,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  opacity:0; transform:scale(.85);
  transition:opacity .4s var(--lv-ease), transform .4s var(--lv-ease);
}
.lv-tile-zoom svg{ width:16px; height:16px; stroke:#fff; }

@media (hover:hover){
  .lv-tile:hover img{ transform:scale(1.06); }
  .lv-tile:hover .lv-tile-cap{ transform:translateY(0); }
  .lv-tile:hover .lv-tile-zoom{ opacity:1; transform:scale(1); }
}
.lv-tile:focus-visible{
  outline:2px solid var(--lv-accent);
  outline-offset:3px;
}

@media (max-width: 900px){
  .lv-bento{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-auto-rows:clamp(130px, 34vw, 230px);
  }
}
@media (max-width: 420px){
  .lv-tile-cap{ padding:12px; }
  .lv-tile-tag{ font-size:.6rem; letter-spacing:.12em; }
  .lv-tile-title{ font-size:.95rem; }
}

/* ---------- Praxis-Karten (Leistungen) ---------- */
.lv-cases{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px, 1.8vw, 24px);
  margin-top:clamp(34px, 5vw, 56px);
}
.lv-case{
  display:flex; flex-direction:column;
  border-radius:var(--lv-radius);
  overflow:hidden;
  background:rgba(255,255,255,.03);
  outline:1px solid var(--lv-border);
  outline-offset:-1px;
  box-shadow:var(--lv-shadow);
}
.lv-case .lv-tile{
  grid-row:auto;
  aspect-ratio:4 / 5;
  height:auto;
  border-radius:0;
  box-shadow:none;
  outline:0;
}
.lv-case .lv-tile::after,
.lv-case .lv-tile-cap{ display:none; }
.lv-case-body{ padding:18px 20px 22px; }
.lv-case-body .lv-tile-tag{ display:block; margin-bottom:8px; }
.lv-case-body h3{
  font-family:"Fraunces", Georgia, serif;
  font-weight:400;
  font-size:1.2rem;
  line-height:1.25;
  margin:0 0 8px;
}
.lv-case-body p{
  margin:0;
  font-size:.92rem;
  line-height:1.6;
  opacity:.72;
}
@media (max-width: 1000px){
  .lv-cases{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .lv-cases{ grid-template-columns:1fr; }
  .lv-case .lv-tile{ aspect-ratio:4 / 4.2; }
}

/* ---------- Detail-Streifen (Vorteile) ---------- */
.lv-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 1.6vw, 20px);
  margin-top:clamp(34px, 5vw, 56px);
}
.lv-strip .lv-tile{ grid-row:auto; aspect-ratio:3 / 4.4; height:auto; }
@media (max-width: 700px){
  .lv-strip{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:72%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    scrollbar-width:none;
    margin-left:-4px; margin-right:-4px; padding-left:4px; padding-right:4px;
  }
  .lv-strip::-webkit-scrollbar{ display:none; }
  .lv-strip .lv-tile{ scroll-snap-align:center; }
}

/* ---------- Lightbox ---------- */
.lv-lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 48px);
  background:rgba(8,7,6,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--lv-ease), visibility 0s linear .35s;
}
.lv-lightbox.is-open{
  opacity:1; visibility:visible;
  transition:opacity .35s var(--lv-ease), visibility 0s;
}
.lv-lb-figure{
  margin:0;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  max-width:100%; max-height:100%;
}
.lv-lb-img{
  display:block;
  max-width:min(92vw, 1000px);
  max-height:calc(100vh - 170px);
  max-height:calc(100dvh - 170px);
  width:auto; height:auto;
  border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  transform:scale(.97);
  transition:transform .45s var(--lv-ease), opacity .25s ease;
}
.lv-lightbox.is-open .lv-lb-img{ transform:scale(1); }
.lv-lb-img.is-switching{ opacity:0; }
.lv-lb-cap{
  text-align:center; color:#fff;
  display:flex; flex-direction:column; gap:4px;
}
.lv-lb-cap .lv-tile-title{ font-size:1.15rem; }
.lv-lb-count{ font-size:.75rem; letter-spacing:.14em; opacity:.55; }
.lv-lb-btn{
  position:absolute;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff; cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.lv-lb-btn:hover{ background:var(--lv-accent-soft); border-color:var(--lv-accent); }
.lv-lb-btn:focus-visible{ outline:2px solid var(--lv-accent); outline-offset:2px; }
.lv-lb-btn svg{ width:20px; height:20px; }
.lv-lb-close{ top:max(16px, env(safe-area-inset-top)); right:16px; }
.lv-lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lv-lb-next{ right:16px; top:50%; transform:translateY(-50%); }
@media (max-width: 700px){
  .lv-lb-prev, .lv-lb-next{ top:auto; bottom:max(18px, env(safe-area-inset-bottom)); transform:none; }
  .lv-lb-prev{ left:calc(50% - 60px); }
  .lv-lb-next{ right:calc(50% - 60px); }
  .lv-lb-img{ max-height:calc(100dvh - 210px); }
}
html.lv-lb-lock, html.lv-lb-lock body{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .lv-tile img, .lv-tile-cap, .lv-tile-zoom, .lv-lb-img, .lv-lightbox{ transition:none !important; }
}