/* ============================================================
   LUXVIS - Leistungen
   ============================================================ */
#lv-services{
  --s-gold:#d4af37; --s-gold-l:#f0d879; --s-white:#f5f0e8; --s-grey:#ab9c98;
  position:relative; font-family:var(--lvt-schrift-text); color:var(--s-grey);
  padding:clamp(60px,9vh,110px) clamp(16px,2.6vw,48px);
  /* Ausbruch aus der Inhaltsbreite des Themes: negative Seitenraender
     spannen den Abschnitt auf die volle Fensterbreite auf. */
  width:auto; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
#lv-services *{ box-sizing:border-box; }

/* ---------- Kopfzeile ---------- */
#lv-services .lv-s-head{ margin:0 0 clamp(30px,5vh,54px); }
#lv-services .lv-s-kicker{
  display:block; margin-bottom:14px;
  font:600 11px/1 var(--lvt-schrift-titel); letter-spacing:.28em;
  text-transform:uppercase; color:var(--s-gold);
}
#lv-services .lv-s-title{
  margin:0; font-family:var(--lvt-schrift-titel); font-weight:600;
  font-size:clamp(1.7rem,4.4vw,3.1rem); line-height:1.04; letter-spacing:-.015em;
  text-transform:uppercase; color:var(--s-white);
}
#lv-services .lv-s-title span{
  background-image:linear-gradient(110deg,var(--lvt-gold-tief) 0%,var(--lvt-gold-licht) 26%,var(--lvt-gold-mittel) 52%,var(--lvt-gold-weiss) 74%,var(--lvt-gold-tief) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Raster ---------- */
#lv-services .lv-s-grid{
  display:grid; gap:clamp(14px,1.2vw,24px);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
#lv-services .lv-s-card{
  opacity:0; transform:translateY(30px);
  transition:opacity .7s ease, transform .8s var(--lvt-weich);
}
#lv-services.is-in .lv-s-card{ opacity:1; transform:none; }
#lv-services.is-in .lv-s-card:nth-child(1){ transition-delay:0.00s; }
#lv-services.is-in .lv-s-card:nth-child(2){ transition-delay:0.09s; }
#lv-services.is-in .lv-s-card:nth-child(3){ transition-delay:0.18s; }
#lv-services.is-in .lv-s-card:nth-child(4){ transition-delay:0.27s; }
#lv-services.is-in .lv-s-card:nth-child(5){ transition-delay:0.36s; }

/* Nicht angesteuerte Karten treten zurueck */
@media (hover: hover){
  #lv-services.is-in .lv-s-grid:hover .lv-s-card{ opacity:.55; }
  #lv-services.is-in .lv-s-grid:hover .lv-s-card:hover{ opacity:1; }
}

/* ---------- Karte: abgeschraegter Goldrahmen ----------
   Zwei Ebenen mit derselben Beschnittform, einen Pixel versetzt.
   Ergibt eine haarfeine Kante entlang der Schraege - ein normaler
   border kann das nicht, der ignoriert clip-path. */
#lv-services .lv-s-link{
  --cut:16px;
  display:block; height:100%; text-decoration:none; padding:1px;
  background:linear-gradient(150deg, rgba(212,175,55,.55), rgba(212,175,55,.12) 45%, rgba(212,175,55,.42));
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:transform .45s var(--lvt-weich), background .45s ease, filter .45s ease;
}
#lv-services .lv-s-link:hover,
#lv-services .lv-s-link:focus-visible{
  transform:translateY(-7px);
  background:linear-gradient(150deg, rgba(212,175,55,1), rgba(240,216,121,.5) 45%, rgba(212,175,55,.9));
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.55));
}
#lv-services .lv-s-link:focus{ outline:none; }

#lv-services .lv-s-frame{
  display:flex; flex-direction:column; height:100%;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,.07) 0px, rgba(212,175,55,.07) 1px, transparent 1px, transparent 14px),
    linear-gradient(180deg, var(--lvt-karte-hell) 0%, var(--lvt-karte) 60%, var(--lvt-karte-tief) 100%);
}

/* ---------- Bild ---------- */
#lv-services .lv-s-media{
  position:relative; display:block; overflow:hidden; aspect-ratio:16 / 10;
}
#lv-services .lv-s-media img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.45) brightness(.72) contrast(1.06);
  transform:scale(1.01);
  transition:filter .6s ease, transform .9s var(--lvt-weich);
}
#lv-services .lv-s-link:hover .lv-s-media img,
#lv-services .lv-s-link:focus-visible .lv-s-media img{
  filter:grayscale(0) brightness(1) contrast(1);
  transform:scale(1.07);
}
/* Verlauf nach unten, damit der Text sauber ansetzt */
#lv-services .lv-s-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 45%, rgba(6,6,6,.92) 100%);
}
/* Lichtreflex laeuft beim Darueberfahren schraeg durchs Bild */
#lv-services .lv-s-sheen{
  position:absolute; top:-30%; left:0; width:45%; height:160%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,246,220,.30), transparent);
  transform:translateX(-190%) skewX(-18deg);
  transition:transform .95s var(--lvt-weich);
}
#lv-services .lv-s-link:hover .lv-s-sheen,
#lv-services .lv-s-link:focus-visible .lv-s-sheen{ transform:translateX(330%) skewX(-18deg); }

#lv-services .lv-s-num{
  position:absolute; top:14px; left:16px; z-index:2;
  font:600 11px/1 var(--lvt-schrift-titel); letter-spacing:.2em; color:var(--s-gold);
  padding:6px 9px; background:rgba(6,6,6,.72);
  clip-path:polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition:color .35s ease, background .35s ease;
}
#lv-services .lv-s-link:hover .lv-s-num{ color:var(--lvt-schwarz); background:var(--s-gold); }

/* ---------- Text ---------- */
#lv-services .lv-s-body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(18px,1.6vw,26px) clamp(18px,1.6vw,24px) clamp(20px,2vw,28px);
}
#lv-services .lv-s-name{
  display:block; margin-bottom:12px;
  font-family:var(--lvt-schrift-titel); font-weight:600; text-transform:uppercase;
  font-size:clamp(1rem,1.25vw,1.22rem); line-height:1.16; letter-spacing:-.005em;
  color:var(--s-white);
  background-image:linear-gradient(100deg,var(--lvt-gold-tief) 0%,var(--lvt-gold-licht) 22%,var(--lvt-gold-mittel) 46%,var(--lvt-gold-weiss) 68%,var(--lvt-gold-tief) 100%);
  background-size:230% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  transition:background-position .85s ease, color .35s ease;
}
#lv-services .lv-s-link:hover .lv-s-name,
#lv-services .lv-s-link:focus-visible .lv-s-name{ color:transparent; background-position:0 0; }

#lv-services .lv-s-text{
  display:block; flex:1; font-size:13.5px; line-height:1.68; color:var(--s-grey);
}
#lv-services .lv-s-text strong{ color:var(--s-white); font-weight:600; }

#lv-services .lv-s-more{
  display:inline-flex; align-items:center; gap:11px; margin-top:20px;
  font:600 10.5px/1 var(--lvt-schrift-titel); letter-spacing:.2em; text-transform:uppercase;
  color:var(--s-gold);
}
#lv-services .lv-s-more i{
  position:relative; display:block; width:18px; height:1.4px; background:var(--s-gold); flex:none;
  transition:width .45s var(--lvt-weich);
}
#lv-services .lv-s-more i::after{
  content:''; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1.4px solid var(--s-gold); border-right:1.4px solid var(--s-gold); transform:rotate(45deg);
}
#lv-services .lv-s-link:hover .lv-s-more i,
#lv-services .lv-s-link:focus-visible .lv-s-more i{ width:34px; }

/* Tastaturfokus sichtbar machen */
#lv-services .lv-s-link:focus-visible .lv-s-frame{ outline:1px dashed rgba(212,175,55,.75); outline-offset:-5px; }

/* Ab 1400px bewusst fuenf Karten nebeneinander, sonst bricht auto-fit
   auf sehr breiten Schirmen in eine sechste Spalte um. */
@media (min-width:1400px){
  #lv-services .lv-s-grid{ grid-template-columns:repeat(5, 1fr); }
}

/* ---------- Mobil ---------- */
@media (max-width:600px){
  #lv-services .lv-s-link{ --cut:12px; }
  #lv-services .lv-s-media{ aspect-ratio:16 / 9; }
  #lv-services .lv-s-text{ font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  #lv-services .lv-s-card{ transition-duration:.01s !important; transition-delay:0s !important; }
  #lv-services .lv-s-sheen{ display:none; }
}