/* ============================================================
   LUXVIS - Intro / Statement
   Gleiche Designsprache wie #lv-services und #lv-slider.
   ============================================================ */
#lv-intro{
  --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 - identisch zu #lv-services */
  width:auto; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  /* Sehr dezente Bande, damit der Abschnitt sich vom Rest absetzt */
  background:linear-gradient(180deg, rgba(212,175,55,.045) 0%, rgba(212,175,55,0) 38%);
}
#lv-intro *{ box-sizing:border-box; }
#lv-intro::before,
#lv-intro::after{
  content:''; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.35) 20%, rgba(212,175,55,.35) 80%, transparent);
}
#lv-intro::before{ top:0; }
#lv-intro::after { bottom:0; opacity:.5; }

/* ---------- Raster: schmale Headline-Spalte, breite Textspalte ---------- */
#lv-intro .lv-i-inner{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,72px);
}
@media (max-width:900px){
  #lv-intro .lv-i-inner{ grid-template-columns:1fr; gap:clamp(24px,4vh,38px); }
}

/* ---------- Kopf ---------- */
#lv-intro .lv-i-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-intro .lv-i-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);
  hyphens:auto;
}
#lv-intro .lv-i-title span,
#lv-intro .lv-i-claim 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;
}

/* ---------- Fliesstext ----------
   Bewusst NICHT in Versalien: der Originalblock war komplett uppercase,
   das kostet bei diesem Textvolumen spuerbar Lesbarkeit. Versalien
   bleiben Kicker, Headline und Schlusszeile vorbehalten. */
#lv-intro .lv-i-text{
  margin:0; font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.78; color:var(--s-grey);
}
#lv-intro .lv-i-text + .lv-i-text{ margin-top:14px; }
#lv-intro .lv-i-text strong{ color:var(--s-white); font-weight:600; }

/* ---------- Technik-Chips ---------- */
#lv-intro .lv-i-chips{
  display:flex; flex-wrap:wrap; gap:9px;
  margin:clamp(22px,2.6vw,32px) 0 0; padding:0; list-style:none;
}
#lv-intro .lv-i-chips li{
  --cut:7px;
  padding:9px 15px;
  font:600 10.5px/1 var(--lvt-schrift-titel); letter-spacing:.18em;
  text-transform:uppercase; color:var(--s-gold); white-space:nowrap;
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px 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:background .35s ease, color .35s ease, box-shadow .35s ease, transform .45s var(--lvt-weich);
}
@media (hover: hover){
  #lv-intro .lv-i-chips li:hover{
    color:var(--lvt-schwarz); background:var(--s-gold);
    box-shadow:inset 0 0 0 1px var(--s-gold);
    transform:translateY(-3px);
  }
}

/* ---------- CTA ---------- */
#lv-intro .lv-i-cta{
  --cut:9px;
  display:inline-flex; align-items:center; gap:13px;
  margin-top:clamp(24px,2.8vw,34px); padding:15px 26px;
  font:600 10.5px/1 var(--lvt-schrift-titel); letter-spacing:.2em;
  text-transform:uppercase; color:var(--s-gold); text-decoration:none;
  background:rgba(6,6,6,.35);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.55);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:background .4s ease, color .35s ease, box-shadow .35s ease, transform .45s var(--lvt-weich);
}
#lv-intro .lv-i-cta i{
  position:relative; display:block; width:20px; height:1.4px; background:currentColor; flex:none;
  transition:width .45s var(--lvt-weich);
}
#lv-intro .lv-i-cta i::after{
  content:''; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1.4px solid currentColor; border-right:1.4px solid currentColor;
  transform:rotate(45deg);
}
#lv-intro .lv-i-cta:hover,
#lv-intro .lv-i-cta:focus-visible{
  color:var(--lvt-schwarz); background:var(--s-gold);
  box-shadow:inset 0 0 0 1px var(--s-gold);
  transform:translateY(-4px);
}
#lv-intro .lv-i-cta:hover i,
#lv-intro .lv-i-cta:focus-visible i{ width:34px; }
#lv-intro .lv-i-cta:focus{ outline:none; }
#lv-intro .lv-i-cta:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:4px; }

/* ---------- Trennlinie mit Raute ---------- */
#lv-intro .lv-i-rule{
  position:relative; height:1px; border:0;
  margin:clamp(42px,6vh,74px) 0 clamp(28px,4vh,46px);
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.5), transparent);
}
#lv-intro .lv-i-rule::after{
  content:''; position:absolute; left:50%; top:50%;
  width:7px; height:7px; background:var(--s-gold);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* ---------- Schlusszeile ---------- */
#lv-intro .lv-i-claim{
  margin:0; text-align:center;
  font-family:var(--lvt-schrift-titel); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.25rem,2.9vw,2.35rem); line-height:1.16; letter-spacing:-.01em;
  color:var(--s-white);
  text-wrap:balance;
}
#lv-intro .lv-i-sub{
  margin:16px 0 0; text-align:center;
  font:600 10.5px/1.7 var(--lvt-schrift-titel); letter-spacing:.24em;
  text-transform:uppercase; color:var(--s-gold);
}

/* ---------- Einblendung beim Scrollen ---------- */
#lv-intro .lv-i-lead,
#lv-intro .lv-i-body,
#lv-intro .lv-i-rule,
#lv-intro .lv-i-claim,
#lv-intro .lv-i-sub{
  opacity:0; transform:translateY(30px);
  transition:opacity .7s ease, transform .8s var(--lvt-weich);
}
#lv-intro.is-in .lv-i-lead,
#lv-intro.is-in .lv-i-body,
#lv-intro.is-in .lv-i-rule,
#lv-intro.is-in .lv-i-claim,
#lv-intro.is-in .lv-i-sub{ opacity:1; transform:none; }
#lv-intro.is-in .lv-i-lead { transition-delay:0.00s; }
#lv-intro.is-in .lv-i-body { transition-delay:0.10s; }
#lv-intro.is-in .lv-i-rule { transition-delay:0.22s; }
#lv-intro.is-in .lv-i-claim{ transition-delay:0.30s; }
#lv-intro.is-in .lv-i-sub  { transition-delay:0.38s; }

/* ---------- Helle Variante ----------
   Falls der Abschnitt auf hellem Hintergrund stehen soll:
   class="lv-intro lv-intro--light" am <section> ergaenzen. */
#lv-intro.lv-intro--light{
  --s-white:#141414; --s-grey:#5b5347;
  background:linear-gradient(180deg, rgba(212,175,55,.10) 0%, rgba(212,175,55,0) 38%);
}
#lv-intro.lv-intro--light .lv-i-chips li{ background:rgba(0,0,0,.03); }
#lv-intro.lv-intro--light .lv-i-cta{ background:rgba(255,255,255,.5); }
#lv-intro.lv-intro--light .lv-i-title span,
#lv-intro.lv-intro--light .lv-i-claim span{
  background-image:linear-gradient(110deg,#8a6a1c 0%,#c8a233 26%,#8a6a1c 52%,#c8a233 74%,#8a6a1c 100%);
}

/* ---------- Mobil ---------- */
@media (max-width:600px){
  #lv-intro .lv-i-chips li{ font-size:10px; padding:8px 12px; letter-spacing:.14em; }
  #lv-intro .lv-i-cta{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  #lv-intro .lv-i-lead,
  #lv-intro .lv-i-body,
  #lv-intro .lv-i-rule,
  #lv-intro .lv-i-claim,
  #lv-intro .lv-i-sub{
    transition-duration:.01s !important; transition-delay:0s !important;
  }
}