@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;600;700&family=Inter:wght@400;500;600&display=swap');

.lv-viz{
  --vz-gold:#d4af37;
  --vz-gold-l:#f0d879;
  --vz-cream:#f5f0e8;
  --vz-grey:#c9bfbb;
  --vz-grad:linear-gradient(120deg,#7a5e18 0%,#f5e6a8 22%,#b38728 48%,#fcf6ba 72%,#7a5e18 100%);
  position:relative;
  width:auto; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:clamp(34px,5vw,72px) clamp(14px,4vw,48px);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--vz-grey);
  isolation:isolate;
}

/* ---------- Buehne: Rahmen + durchscheinender Hintergrund ---------- */
.lv-viz .lv-vz-stage{
  --cut:28px;
  display:block; max-width:1120px; margin:0 auto; padding:1px; border:0;
  background:linear-gradient(150deg,rgba(212,175,55,.72),rgba(212,175,55,.22) 45%,rgba(212,175,55,.58));
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.lv-viz .lv-vz-frame{
  --cut:28px;
  position:relative; overflow:hidden;
  padding:clamp(38px,6vw,84px) clamp(22px,5vw,76px);
  background:
    repeating-linear-gradient(45deg,rgba(212,175,55,.09) 0px,rgba(212,175,55,.09) 1px,transparent 1px,transparent 14px),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.20) 62%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(12,12,12,.70) 0%, rgba(6,6,6,.80) 100%);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.lv-viz .lv-vz-frame::before{
  content:''; position:absolute; top:-30%; left:0; width:34%; height:160%; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,246,220,.16),transparent);
  transform:translateX(-190%) skewX(-18deg);
  pointer-events:none;
}
.lv-viz.is-in .lv-vz-frame::before{
  animation:lvVzShine 1.5s var(--lvt-weich) .35s both;
}
@keyframes lvVzShine{
  from{ transform:translateX(-190%) skewX(-18deg); }
  to  { transform:translateX(330%) skewX(-18deg); }
}
.lv-viz .lv-vz-inner{ position:relative; z-index:3; max-width:820px; margin:0 auto; text-align:center; }

/* ---------- Lesbarkeit ueber bewegtem Video ----------
   Normale Schrift bekommt einen weichen Schlagschatten.
   Verlaufstext (background-clip:text) darf KEINEN text-shadow bekommen -
   der Schatten waere hinter der transparenten Schrift als Fleck sichtbar.
   Dort stattdessen filter:drop-shadow, das folgt der Buchstabenform. */
.lv-viz .lv-vz-kicker,
.lv-viz .lv-vz-title,
.lv-viz .lv-vz-lead,
.lv-viz .lv-vz-item p{ text-shadow:0 1px 6px rgba(0,0,0,.72), 0 0 22px rgba(0,0,0,.45); }
.lv-viz .lv-vz-title span,
.lv-viz .lv-vz-label{
  text-shadow:none;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.75));
}

/* ---------- Einblendung ---------- */
.lv-viz .lv-vz-anim{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .8s var(--lvt-weich);
}
.lv-viz.is-in .lv-vz-anim{ opacity:1; transform:none; }
.lv-viz.is-in .lv-vz-a2{ transition-delay:.10s; }
.lv-viz.is-in .lv-vz-a3{ transition-delay:.20s; }
.lv-viz.is-in .lv-vz-a4{ transition-delay:.30s; }

/* ---------- Kopfzeile ---------- */
.lv-viz .lv-vz-kicker{
  display:inline-block; font-family:var(--lvt-schrift-titel); font-weight:600;
  font-size:11px; line-height:1; letter-spacing:.28em; text-transform:uppercase;
  color:var(--vz-gold); margin:0 0 18px;
}
.lv-viz .lv-vz-kicker::before{ content:'\25C6'; font-size:8px; margin-right:.9em; opacity:.65; vertical-align:1px; }
.lv-viz .lv-vz-title{
  font-family:var(--lvt-schrift-titel); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.55rem,4vw,2.75rem); line-height:1.05; letter-spacing:-.015em;
  color:var(--vz-cream); margin:0;
}
.lv-viz .lv-vz-title span{
  background-image:var(--vz-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lv-viz .lv-vz-rule{
  height:1px; border:0; max-width:420px;
  margin:clamp(26px,4vw,40px) auto;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.6),transparent);
}
.lv-viz .lv-vz-lead{
  margin:0; font-size:clamp(.98rem,1.6vw,1.1rem); line-height:1.8; color:var(--vz-cream);
}

/* ---------- Punkte ---------- */
.lv-viz .lv-vz-items{ margin:clamp(28px,4vw,44px) 0 0; }
.lv-viz .lv-vz-item + .lv-vz-item{ margin-top:clamp(22px,3vw,32px); }
.lv-viz .lv-vz-label{
  display:block; font-family:var(--lvt-schrift-titel); font-weight:600;
  font-size:clamp(.86rem,1.6vw,1rem); letter-spacing:.16em; text-transform:uppercase;
  background-image:var(--vz-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0 0 12px;
}
.lv-viz .lv-vz-label::after{
  content:''; display:block; width:34px; height:1px; margin:12px auto 0;
  background:linear-gradient(90deg,rgba(212,175,55,0),var(--vz-gold),rgba(212,175,55,0));
}
.lv-viz .lv-vz-item p{ margin:0; font-size:.97rem; line-height:1.78; }
.lv-viz .lv-vz-item p strong{ color:var(--vz-cream); font-weight:600; }

/* ---------- Umbrueche ---------- */
@media (max-width:860px){
  .lv-viz .lv-vz-stage,
  .lv-viz .lv-vz-frame{ --cut:16px; }
  .lv-viz .lv-vz-frame::before{ display:none; }
}
@media (max-width:560px){
  .lv-viz{ padding-left:12px; padding-right:12px; }
}

@media (prefers-reduced-motion:reduce){
  .lv-viz .lv-vz-anim{ opacity:1; transform:none; transition:none; }
  .lv-viz .lv-vz-frame::before{ display:none; }
  .lv-viz *{ transition-duration:.001s !important; animation:none !important; }
}