/* Final CTA - neue Fassung: Licht, Tiefe, Bewegung. Nur Kobalt + Weiss + der
   orange Akzent aus dem Logo. Alle Bewegungen ueber transform/opacity und
   bei "weniger Bewegung" aus. */
.final--neu{position:relative;isolation:isolate;padding:clamp(90px,11vw,170px) 0 clamp(80px,10vw,150px);
  background:radial-gradient(120% 90% at 85% 40%,#4F6CFF 0%,#3A5BFF 38%,#2440E0 75%,#1A2BB8 100%)}
.final__licht{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.final__licht i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;animation:fLicht 18s ease-in-out infinite alternate}
.final__licht i:nth-child(1){width:48vw;height:48vw;left:-12vw;top:-18vw;background:#7B93FF}
.final__licht i:nth-child(2){width:36vw;height:36vw;right:-6vw;bottom:-14vw;background:#FF6A3D;opacity:.28;animation-duration:22s}
.final__licht i:nth-child(3){width:30vw;height:30vw;left:38vw;top:10%;background:#9EE6FF;opacity:.22;animation-duration:26s}
@keyframes fLicht{to{transform:translate3d(6vw,4vw,0) scale(1.15)}}
.final__raster{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 80% at 70% 50%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 70% 50%,#000,transparent 75%)}
.final__band{position:absolute;left:0;right:0;bottom:22px;display:flex;white-space:nowrap;z-index:-1;pointer-events:none;
  font:800 clamp(2.4rem,7vw,6rem)/1 "Bricolage",sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22)}
.final__band span{animation:fBand 40s linear infinite;padding-right:.3em}
@keyframes fBand{to{transform:translateX(-100%)}}

.final--neu .wrap{position:relative}
.final__kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:8px 14px;border-radius:999px;
  font-size:.86rem;font-weight:700;letter-spacing:.02em;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.final__kicker .pulse{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6)}
.final--neu .display--dark{color:#fff;text-shadow:0 10px 40px rgba(10,20,90,.35)}
.final__mark{position:relative;display:inline-block;white-space:nowrap}
.final__mark svg{position:absolute;left:-2%;right:-2%;bottom:-.08em;width:104%;height:.32em;overflow:visible}
.final__mark path{fill:none;stroke:#FF6A3D;stroke-width:5;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.1,1) .9s}
.final--neu.ist-sichtbar .final__mark path{stroke-dashoffset:0}
.final--neu .final__sub{color:rgba(255,255,255,.88);font-weight:600}
.final--neu .final__sub b{color:#fff;font-weight:800}

.final__los{position:relative;overflow:hidden;box-shadow:0 18px 40px -16px rgba(5,8,40,.8)}
.final__los::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:fGlanz 4.5s ease-in-out 2s infinite}
@keyframes fGlanz{0%,70%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(220%) skewX(-20deg)}}
.final__los span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.1,1)}
.final__los:hover span{transform:translateX(5px)}
.final--neu .btn--line{color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.final--neu .btn--line:hover{background:#fff;color:var(--lime)}

.final__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none;color:rgba(255,255,255,.9);font-size:.95rem;font-weight:600}
.final__trust li{display:flex;align-items:center;gap:8px}
.final__trust li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A5BFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}

.final__buehne{grid-column:2;grid-row:1/6;position:relative;display:grid;place-items:center;min-height:min(42vw,420px);
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .4s cubic-bezier(.2,.7,.1,1)}
.final--neu .logo3d{--s:min(30vw,250px);grid-column:auto;grid-row:auto;filter:drop-shadow(0 40px 50px rgba(6,10,60,.6))}
.final__ring{position:absolute;width:min(40vw,380px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 60px rgba(160,180,255,.35) inset;animation:fRing 9s linear infinite}
.final__ring::before{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:#FF6A3D;box-shadow:0 0 18px #FF6A3D}
.final__ring--2{width:min(30vw,290px);border-style:dashed;border-color:rgba(255,255,255,.22);animation-duration:14s;animation-direction:reverse}
.final__ring--2::before{background:#fff;box-shadow:0 0 14px #fff;width:7px;height:7px}
@keyframes fRing{to{transform:rotate(360deg)}}
.final__chip{position:absolute;padding:10px 14px;border-radius:14px;font-size:.84rem;font-weight:700;color:#0B0C0F;white-space:nowrap;
  background:rgba(255,255,255,.92);box-shadow:0 14px 30px -12px rgba(5,10,60,.6);animation:fSchweben 6s ease-in-out infinite}
.final__chip--1{top:8%;left:-4%}
.final__chip--2{bottom:14%;left:-10%;animation-delay:-2s}
.final__chip--3{top:22%;right:-8%;animation-delay:-4s}
@keyframes fSchweben{50%{transform:translateY(-10px)}}

.final--neu .wrap>*:not(.final__buehne){grid-column:1}
@media (max-width:900px){
  .final__buehne{grid-column:1;grid-row:auto;order:-1;min-height:280px;margin-bottom:10px}
  .final--neu .logo3d{--s:min(46vw,190px)}
  .final__ring{width:min(70vw,290px)}.final__ring--2{width:min(54vw,220px)}
  .final__chip{font-size:.76rem;padding:8px 11px}
  .final__chip--1{left:0}.final__chip--2{left:2%}.final__chip--3{right:0}
  .final__band{bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .final__licht i,.final__band span,.final__los::after,.final__ring,.final__chip{animation:none}
  .final__mark path{transition:none;stroke-dashoffset:0}
  .final__buehne{transform:none}
}

/* --- Motion-System von KasselWeb: schraeges Laufband, Haken nacheinander --- */
.final__band{bottom:auto;top:auto;position:relative;margin-top:clamp(50px,6vw,80px);transform:rotate(-2.2deg);z-index:0;
  background:#0B0C0F;padding:14px 0;color:#fff;-webkit-text-stroke:0;font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:.06em;
  box-shadow:0 20px 40px -20px rgba(5,8,40,.8)}
.final__band span{animation-duration:26s}
.final--neu{padding-bottom:clamp(40px,5vw,70px)}
.final__trust li::before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.final--neu.ist-sichtbar .final__trust li::before{transform:scale(1)}
.final--neu.ist-sichtbar .final__trust li:nth-child(1)::before{transition-delay:1.3s}
.final--neu.ist-sichtbar .final__trust li:nth-child(2)::before{transition-delay:1.62s}
.final--neu.ist-sichtbar .final__trust li:nth-child(3)::before{transition-delay:1.94s}
.final__chip{opacity:0;translate:0 14px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.1,1)}
.final--neu.ist-sichtbar .final__chip{opacity:1;translate:0 0}
.final--neu.ist-sichtbar .final__chip--1{transition-delay:.9s}.final--neu.ist-sichtbar .final__chip--3{transition-delay:1.15s}.final--neu.ist-sichtbar .final__chip--2{transition-delay:1.4s}
@media (prefers-reduced-motion:reduce){.final__trust li::before{transform:none;transition:none}.final__chip{opacity:1;translate:none;transition:none}}
.final--neu .wrap>.final__buehne{grid-column:2;grid-row:1/6}
@media (max-width:900px){.final--neu .wrap>.final__buehne{grid-column:1;grid-row:auto}}
.final__kicker{justify-self:start}
@media (max-width:900px){.final__buehne{min-height:240px}}
