*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--navy:#072C50;--navy-light:#0a3f70;--navy-lighter:#0d4a82;--navy-90:rgba(7,44,80,.9);--navy-60:rgba(7,44,80,.6);--navy-40:rgba(7,44,80,.4);--navy-20:rgba(7,44,80,.2);--navy-08:rgba(7,44,80,.08);--navy-04:rgba(7,44,80,.04);--orange:#ef4236;--orange-hover:#d93a2f;--lemon:#FDF5A6;--lemon-light:rgba(253,245,166,.1);--accent-grad:linear-gradient(90deg,#ef4236,#FDF5A6);--accent-grad-hover:linear-gradient(90deg,#d93a2f,#e8e095);--light:#f7f8fa;--white:#fff;--border:rgba(7,44,80,.06);--copy-on-mesh:rgba(255,255,255,.8);--label-on-mesh:rgba(255,255,255,.55);--font:'Plus Jakarta Sans',-apple-system,sans-serif;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:100px}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--navy);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
#globalMesh{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
img{display:block;max-width:100%}
.container{max-width:1140px;margin:0 auto;padding:0 2rem}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 0;transition:all .4s}
nav.scrolled{background:rgba(255,255,255,1);backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--border)}
.nav-inner{max-width:1140px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;text-decoration:none;position:relative;height:40px}
.nav-logo img{height:40px;width:auto;transition:opacity .4s}
.nav-logo-light{opacity:1}
.nav-logo-dark{opacity:0;position:absolute;top:50%;left:0;transform:translateY(-50%)}
.nav-logo-single{opacity:1}
.nav-logo-text{font-weight:700;font-size:1.05rem;color:#fff;transition:color .4s}
nav.scrolled .nav-logo-light{opacity:0}
nav.scrolled .nav-logo-dark{opacity:1}
nav.scrolled .nav-logo-text{color:var(--navy)}
/* Icon-Logo: versteckt auf Desktop */
.nav-logo-icon{display:none;height:32px;width:auto;position:absolute;top:50%;left:0;transform:translateY(-50%);opacity:0}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;font-family:var(--font)}
.nav-links li{font-family:var(--font)}
.nav-links a{text-decoration:none;font-family:var(--font);font-size:.85rem;font-weight:500;color:rgba(255,255,255,.55);padding:.45rem .9rem;border-radius:var(--r-pill);transition:all .25s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
nav.scrolled .nav-links a{color:var(--navy);opacity:.5}
nav.scrolled .nav-links a:hover{opacity:.8;background:var(--navy-04)}
/* CTA-Button: vorletztes Menu-Item (das echte letzte), weil .nav-panel-logo am Ende steht.
   Fallback :last-child greift bei Seiten ohne nav-panel-logo (z.B. Legacy). */
.nav-links > li:nth-last-child(2) a,
.nav-links > li:not(.nav-panel-logo):last-child a{padding:.55rem 1.3rem;background:rgba(255,255,255,.08);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);color:#fff;font-weight:600;border-radius:var(--r-pill);position:relative;z-index:0;box-shadow:0 4px 16px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.1)}
.nav-links > li:nth-last-child(2) a::before,
.nav-links > li:not(.nav-panel-logo):last-child a::before{content:'';position:absolute;inset:0;border-radius:var(--r-pill);padding:2px;background:linear-gradient(90deg,#ef4236,#FDF5A6);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:-1;transition:all .4s ease}
.nav-links > li:nth-last-child(2) a:hover,
.nav-links > li:not(.nav-panel-logo):last-child a:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);box-shadow:0 8px 24px rgba(239,66,54,.2),inset 0 1px 0 rgba(255,255,255,.12)}
.nav-links > li:nth-last-child(2) a:hover::before,
.nav-links > li:not(.nav-panel-logo):last-child a:hover::before{padding:0;-webkit-mask:none;mask:none;opacity:.85}
nav.scrolled .nav-links > li:nth-last-child(2) a,
nav.scrolled .nav-links > li:not(.nav-panel-logo):last-child a{background:rgba(255,255,255,.08);color:var(--navy);opacity:1;box-shadow:0 4px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.1)}
nav.scrolled .nav-links > li:nth-last-child(2) a::before,
nav.scrolled .nav-links > li:not(.nav-panel-logo):last-child a::before{background:linear-gradient(90deg,#ef4236,#FDF5A6)}
nav.scrolled .nav-links > li:nth-last-child(2) a:hover,
nav.scrolled .nav-links > li:not(.nav-panel-logo):last-child a:hover{background:rgba(255,255,255,.14)}

/* HERO */
.hero{position:relative;display:flex;align-items:center}
.hero-inner{max-width:1140px;margin:0 auto;padding:14rem 2rem 10.8rem;position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:3.5rem;align-items:center}
.hero-overline{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.35);margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem}
.hero-overline::before{content:'';width:24px;height:1px;background:rgba(255,255,255,.25)}
.hero h1{font-size:clamp(2.3rem,4.2vw,3.2rem);font-weight:800;line-height:1.12;color:#fff;margin-bottom:1.25rem;letter-spacing:-.035em}
.hero h1 .ug{position:relative;display:inline}
.hero h1 .ug::after{content:'';position:absolute;bottom:.04em;left:0;right:0;height:3px;background:var(--accent-grad);border-radius:2px}
.hero-lead{font-size:1rem;line-height:1.75;color:rgba(255,255,255,.5);max-width:460px;margin-bottom:2rem}
.hero-actions{display:flex;align-items:center;gap:1.25rem}
.btn-p{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.7rem;background:rgba(255,255,255,.08);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);border:none;color:#fff;font-family:var(--font);font-size:.88rem;font-weight:600;border-radius:var(--r-pill);cursor:pointer;transition:all .4s ease;text-decoration:none;position:relative;z-index:0;box-shadow:0 4px 16px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.1)}
.btn-p::before{content:'';position:absolute;inset:0;border-radius:var(--r-pill);padding:2px;background:linear-gradient(90deg,#ef4236,#FDF5A6);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:-1;transition:all .4s ease}
.btn-p:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);box-shadow:0 8px 24px rgba(239,66,54,.2),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-p:hover::before{padding:0;-webkit-mask:none;mask:none;opacity:.85}
.btn-p svg{transition:transform .3s}
.btn-p:hover svg{transform:translateX(3px)}
.btn-o{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.7rem;background:0 0;color:#fff;font-family:var(--font);font-size:.88rem;font-weight:600;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);cursor:pointer;transition:all .3s;text-decoration:none}
.btn-o:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}

/* BUSINESS CARD (Hero) – nutzt .hr-glass.hr-glass--hoverable im HTML */
.bc{padding:2.5rem 1.75rem;text-align:left;max-width:300px}
.bc-top{display:flex;align-items:center;gap:1rem;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,.06)}
.bc-photo{width:64px;height:64px;border-radius:14px;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}
.bc-photo img{width:100%;height:100%;object-fit:cover}
.bc-name{font-size:1.1rem;font-weight:700;color:#fff}
.bc-role{font-size:.78rem;color:rgba(255,255,255,.4);font-weight:500;margin-top:.15rem}
.bc-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.bc-list li{display:flex;align-items:flex-start;gap:.65rem;font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.45;text-align:left}
.bc-list li strong{color:rgba(255,255,255,.8);font-weight:600}
.ci{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.15rem;width:16px;height:16px;background:none;border:none;border-radius:0}
.ci svg{width:14px;height:14px;stroke:url(#ciGrad);stroke:var(--orange)}

/* SECTIONS SHARED */
.sl{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--navy-40);margin-bottom:.75rem}
.st{font-size:clamp(1.8rem,2.8vw,2.3rem);font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:.6rem;letter-spacing:-.02em}
.ss{font-size:.95rem;color:var(--navy-60);max-width:460px;line-height:1.65}
.sh{margin-bottom:3rem}

/* ═══ SHARED: Glass Card (wiederverwendbar) ═══
   Wird genutzt von: .bc, .cta-form-card, .contact-form-card, .sec-sol--neg .sol-c
   Auf Mesh-/Dark-Hintergrund. Mit Top-Highlight Gradient-Strich. */
.hr-glass{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(32px) saturate(120%);
  -webkit-backdrop-filter:blur(32px) saturate(120%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);
}
.hr-glass::before{
  content:'';
  position:absolute;
  top:-1px;left:20%;right:20%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,66,54,.4),rgba(253,245,166,.4),transparent);
  pointer-events:none;
}
.hr-glass--hoverable{
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,box-shadow .3s;
}
.hr-glass--hoverable:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 14px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1);
}

/* PARTNERS MARQUEE */
.sec-partners{padding:2.5rem 0 1.5rem;overflow:hidden;background:var(--white);position:relative;z-index:1}
.partners-label{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--navy-20);text-align:center;margin-bottom:1.5rem}
.marquee-wrap{position:relative;width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;gap:4rem;width:max-content}
.partner-logo{height:42px;width:auto;opacity:.25;filter:brightness(0);transition:all .3s;flex-shrink:0;object-fit:contain}
.partner-logo:hover{opacity:.6}

/* PROBLEM */
.sec-prob{padding:3rem 0 4rem;background:var(--white);position:relative;z-index:1}
.prob-g{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.prob-t{font-size:clamp(1.8rem,2.8vw,2.3rem);font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:1rem;letter-spacing:-.02em}
.prob-p{font-size:.95rem;color:var(--navy-60);line-height:1.7;margin-bottom:2rem}
.pl{display:flex;flex-direction:column;gap:.75rem}
.pi{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;background:var(--light);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:8px 8px 20px rgba(163,177,198,.4),-8px -8px 20px rgba(255,255,255,.85);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.pi:hover{transform:translateY(-4px);box-shadow:14px 14px 30px rgba(163,177,198,.5),-12px -12px 28px rgba(255,255,255,.95)}
.pi-i{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,rgba(239,66,54,.08),rgba(253,245,166,.08));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pi-i svg{width:16px;height:16px;stroke:var(--orange)}
.pi span{font-size:.85rem;font-weight:500;color:rgba(7,44,80,.7)}

/* SOLUTION */
.sec-sol{padding:3rem 0 4rem;background:var(--white);position:relative;z-index:1}
@keyframes miniMesh{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.sec-sol .sh{text-align:center}
.sec-sol .ss{margin:0 auto}
.sol-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
/* Light-Variante: nur wenn Karte NICHT als .hr-glass markiert ist */
.sol-c:not(.hr-glass){text-align:center;padding:2.25rem 1.75rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:10px 10px 24px rgba(163,177,198,.45),-10px -10px 24px rgba(255,255,255,.9);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .3s}
.sol-c:not(.hr-glass):hover{transform:translateY(-4px);border-color:var(--navy-20);box-shadow:16px 16px 36px rgba(163,177,198,.55),-14px -14px 32px rgba(255,255,255,.95)}
/* Glass-Variante (Negativ): nur Layout, Glass-Properties kommen aus .hr-glass */
.sol-c.hr-glass{text-align:center;padding:2.25rem 1.75rem}
.sol-i{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.sol-i svg{width:32px;height:32px}
.sol-h{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.sol-p{font-size:.84rem;color:var(--navy-40);line-height:1.6}

/* SOLUTION NEGATIV – Karten haben .hr-glass.hr-glass--hoverable im HTML. Hier nur Section + Typo-Overrides. */
.sec-sol--neg{background:transparent;overflow:hidden;position:relative;z-index:1}
.sec-sol--neg .sl{color:var(--label-on-mesh)}
.sec-sol--neg .st{color:#fff}
.sec-sol--neg .ss{color:var(--copy-on-mesh)}
.sec-sol--neg .sol-i{background:transparent;animation:none}
.sec-sol--neg .sol-h{color:#fff}
.sec-sol--neg .sol-p{color:var(--copy-on-mesh)}

/* REVEAL ITEMS (Homepage – GSAP-gesteuert) */
body.js .sec-prob .reveal-item,
body.js .sec-sol .reveal-item,
body.js .sec-srv .reveal-item,
body.js .sec-about .reveal-item,
body.js .sec-proc .reveal-item,
body.js .sec-test .reveal-item{opacity:0;transform:translateY(30px)}
body.js .hero-overline,body.js .hero h1,body.js .hero-lead,body.js .hero-actions,body.js .bc{opacity:0}
body.js .sec-prob .sl,body.js .sec-prob .prob-t,body.js .sec-prob .prob-p,
body.js .sec-sol .sh .sl,body.js .sec-sol .sh .st,body.js .sec-sol .sh .ss,
body.js .sec-srv .sh .sl,body.js .sec-srv .sh .st,body.js .sec-srv .sh .ss,
body.js .sec-about .about-img-w,body.js .sec-about .about-txt > .sl,body.js .sec-about .about-txt > h2,body.js .sec-about .about-txt > p,
body.js .sec-proc .sh .sl,body.js .sec-proc .sh .st{opacity:0}
body.js .sec-test .sh .sl,body.js .sec-test .sh .st{opacity:0}

/* CTA-Form: Pre-Hide damit GSAP ohne FOUC reveal kann (nur wenn GSAP laeuft).
   Im no-gsap-Modus (Mobile) sollen die Elemente sofort sichtbar sein. */
body.js:not(.no-gsap-anim) .sec-cta-form .cta-copy > .sl,
body.js:not(.no-gsap-anim) .sec-cta-form .cta-copy > .st,
body.js:not(.no-gsap-anim) .sec-cta-form .cta-copy > .ss,
body.js:not(.no-gsap-anim) .sec-cta-form .cta-benefit,
body.js:not(.no-gsap-anim) .sec-cta-form .cta-process-title,
body.js:not(.no-gsap-anim) .sec-cta-form .cta-step,
body.js:not(.no-gsap-anim) .sec-cta-form .cta-form-card{opacity:0}

/* Wenn GSAP NICHT laeuft (Mobile, GSAP-Load-Fehler, etc.): Homepage-
   Sektionen via CSS-Fallback (no-gsap-anim body-Flag).
   Die eigentliche Choreografie steht weiter unten im Block
   'HOMEPAGE NO-GSAP FALLBACK'. Hier nur: Start-Opacity aufheben,
   damit der CSS-Fallback uebernehmen kann. */
body.no-gsap-anim.js .sec-prob .reveal-item,
body.no-gsap-anim.js .sec-sol .reveal-item,
body.no-gsap-anim.js .sec-srv .reveal-item,
body.no-gsap-anim.js .sec-about .reveal-item,
body.no-gsap-anim.js .sec-proc .reveal-item,
body.no-gsap-anim.js .sec-test .reveal-item,
body.no-gsap-anim.js .sec-prob .sl,
body.no-gsap-anim.js .sec-prob .prob-t,
body.no-gsap-anim.js .sec-prob .prob-p,
body.no-gsap-anim.js .sec-sol .sh .sl,
body.no-gsap-anim.js .sec-sol .sh .st,
body.no-gsap-anim.js .sec-sol .sh .ss,
body.no-gsap-anim.js .sec-srv .sh .sl,
body.no-gsap-anim.js .sec-srv .sh .st,
body.no-gsap-anim.js .sec-srv .sh .ss,
body.no-gsap-anim.js .sec-about .about-img-w,
body.no-gsap-anim.js .sec-about .about-txt > .sl,
body.no-gsap-anim.js .sec-about .about-txt > h2,
body.no-gsap-anim.js .sec-about .about-txt > p,
body.no-gsap-anim.js .sec-proc .sh .sl,
body.no-gsap-anim.js .sec-proc .sh .st,
body.no-gsap-anim.js .sec-test .sh .sl,
body.no-gsap-anim.js .sec-test .sh .st,
body.no-gsap-anim.js .sec-test .test-marquee-wrap{
  opacity:unset;
}

/* SERVICES */
.sec-srv{padding:3rem 0 4rem;background:transparent;border-top:none;border-bottom:none;position:relative}
.sec-srv .container{position:relative;z-index:1}
.sec-srv .sl{color:rgba(255,255,255,.35)}
.sec-srv .st{color:#fff}
.sec-srv .ss{color:rgba(255,255,255,.5)}
.srv-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.srv-c{display:block;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:2rem 1.75rem;cursor:pointer;position:relative;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.srv-c::before{content:'';position:absolute;inset:0;border-radius:var(--r-lg);padding:2px;background:conic-gradient(from var(--srv-angle,0deg),#ef4236,#FDF5A6,#ef4236);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.srv-c:hover{transform:translateY(-4px) scale(1.03);background:rgba(255,255,255,.06);border-color:transparent}
.srv-c:hover::before{opacity:1;animation:srv-border-spin 2s linear infinite}
@property --srv-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes srv-border-spin{to{--srv-angle:360deg}}
.srv-iw{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.srv-iw svg{width:28px;height:28px}
.srv-c h3{font-size:.98rem;font-weight:700;color:#fff;margin-bottom:.5rem;line-height:1.3}
.srv-c p{font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.6}
.srv-c .sa{position:absolute;top:1.75rem;right:1.75rem;opacity:0;transform:translate(-3px,3px);transition:all .3s;color:rgba(255,255,255,.2)}
.srv-c:hover .sa{opacity:1;transform:translate(0,0)}
.srv-c::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent-grad);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1);border-radius:0 0 var(--r-lg) var(--r-lg)}
.srv-c:hover::after{transform:scaleX(1)}
.srv-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.5);margin-top:1rem;transition:color .3s}
.srv-link svg{width:12px;height:12px;transition:transform .3s}
.srv-c:hover .srv-link{color:#fff}
.srv-c:hover .srv-link svg{transform:translateX(3px)}

/* SERVICES LIGHT (card-mesh v2) – weiße Sektion, Karten mit Video-Mesh */
.sec-srv--light{background:var(--white)}
.sec-srv--light .sl{color:var(--navy-40)}
.sec-srv--light .st{color:var(--navy)}
.sec-srv--light .ss{color:var(--navy-60)}
.sec-srv--light .srv-c{background:var(--navy);border:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative;isolation:isolate}
.sec-srv--light .srv-c .card-mesh{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;border-radius:var(--r-lg)}
.sec-srv--light .srv-c .srv-inner{position:relative;z-index:1}
.sec-srv--light .srv-c h3{color:#fff}
.sec-srv--light .srv-c p{color:rgba(255,255,255,.55)}
.sec-srv--light .srv-link{color:rgba(255,255,255,.5)}
.sec-srv--light .srv-c:hover .srv-link{color:#fff}
.sec-srv--light .srv-c:hover{transform:translateY(-4px) scale(1.03);border-color:transparent}

/* ABOUT */
.sec-about,.sec-ls-about{padding:5rem 0 5rem;background:var(--white);position:relative;z-index:1}
.about-g{display:grid;grid-template-columns:.42fr .58fr;gap:4rem;align-items:center}
.about-img-w{position:relative}
.about-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;position:relative}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-img::after{content:'';position:absolute;inset:0;border-radius:var(--r-lg);border:1px solid var(--border)}
.about-badge{position:absolute;bottom: -1.5rem;right: -2.5rem;width: 120px;height:auto;overflow:visible;box-shadow:none;border:none}
.about-badge img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(7,44,80,.2))}
.about-txt h2{font-size:clamp(1.8rem,2.8vw,2.3rem);font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:1rem;letter-spacing:-.02em}
.about-txt p{font-size:.92rem;color:var(--navy-60);line-height:1.75;margin-bottom:1rem}
.about-txt p:last-of-type{margin-bottom:1.75rem}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem}
.af{display:flex;align-items:flex-start;gap:.7rem;padding:.75rem 1rem;background:var(--light);border-radius:var(--r-md);border:1px solid var(--border);box-shadow:8px 8px 20px rgba(163,177,198,.4),-8px -8px 20px rgba(255,255,255,.85);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.af:hover{transform:translateY(-4px);box-shadow:14px 14px 30px rgba(163,177,198,.5),-12px -12px 28px rgba(255,255,255,.95)}
.af-i{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.af-i svg{width:22px;height:22px}
.af-t{font-size:.78rem;font-weight:600;color:var(--navy);line-height:1.4}
.af-t span{display:block;font-weight:400;color:var(--navy-40);margin-top:.1rem}

/* PROCESS */
.sec-proc{padding:3rem 0 4rem;background:var(--white);position:relative;z-index:1}
.proc-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
.proc-s{text-align:center;position:relative}
.proc-s:not(:last-child)::after{content:'';position:absolute;top:28px;right:-.75rem;width:1.5rem;height:1px;background:var(--navy-08)}
.proc-n{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#051d36,#0d4a82,#072C50);background-size:200% 200%;animation:miniMesh 8s ease infinite;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;margin-bottom:1.25rem}
.proc-s h4{font-size:.92rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.proc-s p{font-size:.78rem;color:var(--navy-40);line-height:1.5;max-width:200px;margin:0 auto}

/* PROCESS NEGATIV – transparent, Mesh von #globalMesh */
.sec-proc--neg{background:transparent;overflow:hidden;position:relative;z-index:1}
.sec-proc--neg .sl{color:var(--label-on-mesh)}
.sec-proc--neg .st{color:#fff}
.sec-proc--neg .ss{color:var(--copy-on-mesh)}
.sec-proc--neg .proc-s:not(:last-child)::after{background:rgba(255,255,255,.1)}
.sec-proc--neg .proc-n{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.14));animation:none}
.sec-proc--neg .proc-s h4{color:#fff}
.sec-proc--neg .proc-s p{color:var(--copy-on-mesh)}

/* TESTIMONIALS MARQUEE (v2.15.4: rAF-Drag, kein CSS-keyframes mehr) */
.sec-test{padding:6rem 0;background:var(--light);position:relative;z-index:1}
.test-marquee-wrap{position:relative;overflow:hidden;padding:32px 0 40px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.test-track{display:flex;gap:1.25rem;width:max-content;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform}
.test-track.is-dragging{cursor:grabbing}
.test-c{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;width:380px;flex-shrink:0;box-shadow:10px 10px 24px rgba(163,177,198,.45),-10px -10px 24px rgba(255,255,255,.9);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .3s}
.test-c:hover{transform:translateY(-4px);border-color:var(--navy-20);box-shadow:16px 16px 36px rgba(163,177,198,.55),-14px -14px 32px rgba(255,255,255,.95)}
.test-stars{display:flex;gap:.15rem;margin-bottom:1rem}
.test-stars svg{width:14px;height:14px;fill:var(--lemon);stroke:none}
.test-q{font-size:.88rem;color:var(--navy);line-height:1.7;margin-bottom:1.5rem}
.test-author{display:flex;align-items:center;gap:.75rem;padding-top:1rem;border-top:1px solid var(--border)}
.test-av{width:36px;height:36px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:700;flex-shrink:0;overflow:hidden}
.test-av--img{background:transparent}
.test-av--img img{width:100%;height:100%;object-fit:cover;display:block}
.test-name{font-size:.8rem;font-weight:700;color:var(--navy)}
.test-role{font-size:.7rem;color:var(--navy-40);margin-top:.1rem}

/* CTA (card-mesh v2) – weiße Sektion, Karte mit Video-Mesh */
.sec-cta{padding:6rem 0;position:relative;z-index:1;background:var(--white)}
.cta-c{background:var(--navy);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:4rem;position:relative;overflow:hidden;isolation:isolate;box-shadow:14px 14px 32px rgba(7,44,80,.28),-10px -10px 28px rgba(255,255,255,.9)}
.cta-c .card-mesh{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;border-radius:var(--r-lg)}
.cta-c .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.cta-c h2{font-size:clamp(1.7rem,2.5vw,2.1rem);font-weight:800;color:#fff;line-height:1.2;margin-bottom:.75rem;letter-spacing:-.02em}
.cta-c .ct{font-size:.92rem;color:rgba(255,255,255,.7);line-height:1.65;margin-bottom:1.75rem}
.cta-cl{display:flex;flex-direction:column;gap:.8rem}
.cta-cl .cta-ck{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:.7rem;font-size:.85rem;color:rgba(255,255,255,.9);line-height:1.45}
.ck-i{width:20px;height:20px;border-radius:6px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.05rem}
.ck-i svg{width:12px;height:12px}

/* CTA centered mode */
.cta-c--centered{max-width:720px;margin:0 auto;padding:4rem 3rem}
.cta-c--centered .cta-inner{grid-template-columns:1fr;text-align:center}
.cta-c--centered h2{margin:0 auto .75rem}
.cta-c--centered .ct{margin:0 auto 1.75rem;max-width:520px}
.cta-c--centered .btn-p{margin:0 auto 2rem}
.cta-c--centered .cta-cl{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.6rem 1.5rem}
.cta-c--centered .cta-ck{font-size:.82rem}

/* FOOTER */
footer{padding:4rem 0 2rem;background:transparent;border-top:none;position:relative;min-height:180px}
footer .container{position:relative;z-index:1}
.f-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;text-align:left}
.f-col h4{color:#fff;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.f-logo-link{display:inline-block;margin-bottom:.75rem}
.f-logo-img{height:40px;width:auto}
.f-logo{font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:.75rem;display:block}
.f-logo span{background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.f-addr{font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.7}
.f-addr a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.f-addr a:hover{color:#fff}
.f-nav{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.f-nav a{font-size:.82rem;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.f-nav a:hover{color:#fff}
.f-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:.72rem;color:rgba(255,255,255,.3);text-align:center}
.f-col-1/2{width:100%;}

@media(max-width:900px){
.hero-inner{grid-template-columns:1fr;gap:2.5rem}
.bc{max-width:300px}
.prob-g{grid-template-columns:1fr;gap:1rem}
.sol-g{grid-template-columns:1fr 1fr}
.srv-g{grid-template-columns:1fr 1fr}
.proc-g{grid-template-columns:1fr 1fr}
.proc-s:not(:last-child)::after{display:none}
.cta-c{padding:3rem 2rem}
.cta-c .cta-inner{grid-template-columns:1fr}
.about-g{grid-template-columns:1fr;gap:2.5rem}
.about-img-w{max-width:320px}
}




@media(max-width:600px){
.hero h1{font-size:2rem}
.hero-inner{justify-items:center;text-align:center}
.hero-overline{justify-content:center}
.hero-lead{margin-left:auto;margin-right:auto}
.hero-actions{flex-direction:column;align-items:center;gap:1rem}
.bc{margin-left:auto;margin-right:auto}
.srv-g{grid-template-columns:1fr 1fr; margin: 0 -1rem;}
.sol-g{grid-template-columns:1fr}
.proc-g{grid-template-columns:1fr}
.srv-c {padding: 1rem;}
.container {padding: 2rem 2rem;}
.about-img-w {max-width: 235px;}

/* Footer Mobile */
.f-inner{grid-template-columns:1fr 1fr;gap:1.5rem 2rem}
.f-col-info{grid-column:1 / -1;text-align:center;margin-bottom:.5rem}
.f-col-info .f-logo-link{margin:0 auto .75rem}
.f-col-nav{text-align:left}
.f-col-legal{text-align:right}
.f-col-legal .f-nav{align-items:flex-end}
.about-facts{grid-template-columns:1fr}
}

/* ═══ Pinned Sections ═══ */
.pin-spacer > .sec-prob,
.pin-spacer > .sec-sol,
.pin-spacer > .sec-srv,
.pin-spacer > .sec-about,
.pin-spacer > .sec-proc,
.pin-spacer > .sec-cta-form{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ═══ WordPress Block / GSAP Pin Compatibility ═══ */
.wp-site-blocks,
.entry-content,
.page-content,
.wp-block-post-content,
.is-layout-constrained,
.is-layout-flow{
  position:static!important;
  transform:none!important;
  will-change:auto!important;
  contain:none!important;
  overflow:visible!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
}

body .is-layout-constrained>:where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:none;margin-left:0;margin-right:0}
body .is-layout-constrained>.alignfull{max-width:none}
.wp-site-blocks>*,
.entry-content>*,
.page-content>*{
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

.pin-spacer{
  position:relative!important;
  z-index:1!important;
}
.pin-spacer>.sec-prob,
.pin-spacer>.sec-sol,
.pin-spacer>.sec-about,
.pin-spacer>.sec-proc,
.pin-spacer>.sec-cta-form{
  z-index:1;
}
.pin-spacer>.sec-srv{
  z-index:0;
}

/* ═══ WordPress Admin Bar Fix ═══ */
html.wp-toolbar{
  margin-top:0!important;
  padding-top:0!important;
}
body.admin-bar{
  padding-top:32px;
}
@media screen and (max-width:782px){
  body.admin-bar{
    padding-top:46px;
  }
}
body.admin-bar nav{
  top:32px;
}
@media screen and (max-width:782px){
  body.admin-bar nav{
    top:46px;
  }
}

/* VIDEO */
.sec-video{padding:5rem 0 4rem;background:var(--white);position:relative;z-index:1}
.sec-video .sh{text-align:center}
.sec-video .ss{margin:0 auto}
.video-card{max-width:960px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:12px 12px 32px rgba(163,177,198,.45),-10px -10px 28px rgba(255,255,255,.9)}
.video-container{position:relative;width:100%;padding-bottom:56.25%;background:var(--navy);overflow:hidden}
.video-container video,.video-container iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#051d36,#0d4a82,#072C50);background-size:200% 200%}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;z-index:2}
.play-btn:hover{background:rgba(255,255,255,.18);transform:translate(-50%,-50%) scale(1.06)}
.play-btn svg{width:28px;height:28px;margin-left:3px}
.video-badge{position:absolute;top:16px;left:16px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 12px;border-radius:var(--r-pill);z-index:2}
.video-duration{position:absolute;bottom:16px;right:16px;font-size:.75rem;font-weight:600;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 10px;border-radius:6px;font-variant-numeric:tabular-nums;z-index:2}
.video-info{padding:1.75rem 2rem}
.video-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--navy-40);margin-bottom:.75rem}
.video-title{font-size:clamp(1.15rem,2vw,1.35rem);font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:.5rem}
.video-desc{font-size:.88rem;color:var(--navy-60);line-height:1.65;max-width:540px}

/* VIDEO NEGATIV */
.sec-video--neg{background:var(--navy)}
.sec-video--neg .sl{color:rgba(255,255,255,.3)}
.sec-video--neg .st{color:#fff}
.sec-video--neg .ss{color:rgba(255,255,255,.45)}
.sec-video--neg .video-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.sec-video--neg .video-info{background:transparent}
.sec-video--neg .video-label{color:rgba(255,255,255,.3)}
.sec-video--neg .video-title{color:#fff}
.sec-video--neg .video-desc{color:rgba(255,255,255,.45)}

/* VIDEO MINIMAL */
.sec-video--minimal .video-card{background:transparent;border:none;border-radius:0}
.sec-video--minimal .video-container{border-radius:var(--r-lg)}
.sec-video--minimal .video-info{padding:1.25rem 0 0}




/* ═══════════════════════════════════════════════════════════
   LEISTUNGSSEITEN – ls-* Bloecke
═══════════════════════════════════════════════════════════ */

.sec-ls-prob .sl,
.sec-ls-sol .sl,
.sec-scope .sl,
.sec-ls-results .sl,
.sec-faq .sl{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--navy-40);margin-bottom:.75rem}

.hero-sub{padding:10rem 0 6rem;background:transparent;position:relative}
.hero-sub .container{position:relative;z-index:1}
.hero-sub h1.sl{color:rgba(255,255,255,.35)}
.hero-sub h2.hero-sub-headline{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.035em;margin-bottom:1.1rem;max-width:700px}
.hero-sub h2.hero-sub-headline .ug{position:relative;display:inline}
.hero-sub h2.hero-sub-headline .ug::after{content:'';position:absolute;bottom:.04em;left:0;right:0;height:3px;background:var(--accent-grad);border-radius:2px}
.hero-sub .hs-lead{font-size:1rem;line-height:1.75;color:rgba(255,255,255,.5);max-width:520px;margin-bottom:2rem}
.hero-sub .hs-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.hero-sub .hs-actions .btn-o{color:#fff;border-color:rgba(255,255,255,.2)}
.hero-sub .hs-actions .btn-o:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.hero-meta{display:flex;align-items:center;gap:2rem;margin-top:3rem;padding-top:2.25rem;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.hero-stat strong{display:block;font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.hero-stat span{font-size:.78rem;color:rgba(255,255,255,.35);font-weight:500}
.hero-sep{width:1px;height:36px;background:rgba(255,255,255,.1)}
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:rgba(255,255,255,.3);margin:1.5rem 0}
.breadcrumb a{color:rgba(255,255,255,.3);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:rgba(255,255,255,.6)}
.breadcrumb-sep{color:rgba(255,255,255,.15)}

.sec-ls-prob{padding:6rem 0;background:var(--white);position:relative;z-index:1}
.prob-ext-g{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.prob-pl{display:flex;flex-direction:column;gap:.75rem}
.pi-ext{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.15rem;background:var(--light);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:8px 8px 20px rgba(163,177,198,.4),-8px -8px 20px rgba(255,255,255,.85);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .3s}
.pi-ext:hover{transform:translateY(-4px);border-color:var(--navy-20);box-shadow:14px 14px 30px rgba(163,177,198,.5),-12px -12px 28px rgba(255,255,255,.95)}
.pi-i-ext{width:36px;height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pi-i-ext svg{width:24px;height:24px}
.pi-txt{display:flex;flex-direction:column;gap:.15rem}
.pi-txt strong{font-size:.88rem;font-weight:700;color:var(--navy)}
.pi-txt span{font-size:.82rem;color:var(--navy-40);line-height:1.55}
.cost-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:rgba(239,66,54,.06);border:1px solid rgba(239,66,54,.12);border-radius:var(--r-md);margin-top:1.25rem}
.cost-badge svg{stroke:var(--orange);flex-shrink:0}
.cost-badge span{font-size:.82rem;font-weight:600;color:var(--navy)}
.prob-media-g{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.prob-media-g.img-left{direction:rtl}.prob-media-g.img-left>*{direction:ltr}
.prob-media-wrap{border-radius:var(--r-lg);overflow:hidden;position:relative}
.prob-media-wrap img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.prob-vid-wrap{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--r-lg);overflow:hidden}
.prob-vid-wrap iframe,.prob-vid-wrap video{position:absolute;inset:0;width:100%;height:100%;border:none}

.sec-ls-sol{padding:6rem 0;background:var(--light);position:relative;z-index:1}
.ls-sol-intro{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:3rem}
.ls-sol-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.ls-sol-c{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem 1.75rem;box-shadow:10px 10px 24px rgba(163,177,198,.45),-10px -10px 24px rgba(255,255,255,.9);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .3s}
.ls-sol-c:hover{transform:translateY(-4px);border-color:var(--navy-20);box-shadow:16px 16px 36px rgba(163,177,198,.55),-14px -14px 32px rgba(255,255,255,.95)}
.ls-sol-i{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.ls-sol-i svg{width:32px;height:32px}
.ls-sol-h{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.ls-sol-p{font-size:.82rem;color:var(--navy-40);line-height:1.6}

.sec-scope{padding:6rem 0;background:var(--white);position:relative;z-index:1}
.scope-g{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:3rem}
.scope-item{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:10px 10px 24px rgba(163,177,198,.45),-10px -10px 24px rgba(255,255,255,.9);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .3s}
.scope-item:hover{transform:translateY(-4px);border-color:var(--navy-20);box-shadow:16px 16px 36px rgba(163,177,198,.55),-14px -14px 32px rgba(255,255,255,.95)}
.scope-icon{width:40px;height:40px;min-width:40px;display:flex;align-items:center;justify-content:center}
.scope-icon svg{width:24px;height:24px}
.scope-txt h4{font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:.3rem}
.scope-txt p{font-size:.8rem;color:var(--navy-40);line-height:1.6}
.scope-note{margin-top:2rem;padding:1.25rem 1.5rem;background:var(--light);border-radius:var(--r-md);display:flex;align-items:flex-start;gap:.75rem}
.scope-note svg{width:16px;height:16px;min-width:16px;stroke:var(--navy-40);fill:none;stroke-width:1.8;margin-top:.15rem}
.scope-note p{font-size:.82rem;color:var(--navy-60);line-height:1.65}

.sec-ls-results{padding:6rem 0;background:transparent;position:relative;z-index:1}
.sec-ls-results .container{position:relative;z-index:1}
.sec-ls-results .sl{color:rgba(255,255,255,.35)}
.sec-ls-results .st{color:#fff}
.sec-ls-results .ss{color:rgba(255,255,255,.5)}
.results-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
.result-c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:2rem 1.75rem;position:relative;box-shadow:12px 12px 28px rgba(0,0,0,.35),-8px -8px 22px rgba(20,75,130,.18);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.result-c::before{content:'';position:absolute;inset:0;border-radius:var(--r-lg);padding:2px;background:conic-gradient(from var(--result-angle,0deg),#ef4236,#FDF5A6,#ef4236);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.result-c:hover{background:rgba(255,255,255,.09);border-color:transparent;transform:translateY(-4px);box-shadow:18px 18px 40px rgba(0,0,0,.45),-12px -12px 30px rgba(20,75,130,.25)}
.result-c:hover::before{opacity:1;animation:result-border-spin 2s linear infinite}
@property --result-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes result-border-spin{to{--result-angle:360deg}}
.result-num{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:.4rem;background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.result-label{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.5;margin-bottom:1.25rem}
.result-context{font-size:.78rem;color:rgba(255,255,255,.25);border-top:1px solid rgba(255,255,255,.06);padding-top:.85rem;line-height:1.5}
.test-single{margin-top:3rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:2.5rem;position:relative}
.test-single::before{content:'\201c';position:absolute;top:1.5rem;right:2rem;font-size:5rem;font-weight:800;color:rgba(255,255,255,.05);line-height:1;pointer-events:none}
.test-single-quote{font-size:1rem;color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:1.5rem;max-width:720px;font-style:italic}
.test-single-author{display:flex;align-items:center;gap:.85rem}
.test-single-name{font-size:.85rem;font-weight:700;color:#fff}
.test-single-role{font-size:.75rem;color:rgba(255,255,255,.35);margin-top:.1rem}

.sec-faq{padding:6rem 0;background:var(--white);position:relative;z-index:1}
.faq-g{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:.5rem}
.faq-item{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:var(--navy-20)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font);font-size:.88rem;font-weight:600;color:var(--navy);transition:background .2s}
.faq-q:hover{background:var(--navy-04)}
.faq-q-icon{width:16px;height:16px;min-width:16px;flex-shrink:0;transition:transform .3s}
.faq-q-icon line{stroke:var(--navy-40);stroke-width:2}
.faq-item.open .faq-q-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
.faq-item.open .faq-a{max-height:500px}
.faq-a-inner{padding:0 1.25rem 1.25rem;font-size:.85rem;color:var(--navy-60);line-height:1.75}
.faq-cta-box{background:var(--navy);border-radius:var(--r-lg);padding:2.5rem;position:sticky;top:6rem}
.faq-cta-box h3{font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:.6rem}
.faq-cta-box p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.65;margin-bottom:1.5rem}
.faq-cta-list{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}
.faq-cta-list li{display:flex;align-items:flex-start;gap:.65rem;font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.5}
.faq-ck-i{width:20px;height:20px;min-width:20px;border-radius:6px;background:rgba(239,66,54,.15);border:1px solid rgba(239,66,54,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem}
.faq-ck-i svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none}

@media(max-width:900px){
  .prob-ext-g,.prob-media-g,.ls-sol-intro,.faq-g{grid-template-columns:1fr;gap:2.5rem}
  .ls-sol-g{grid-template-columns:1fr 1fr}
  .scope-g{grid-template-columns:1fr}
  .results-g{grid-template-columns:1fr 1fr}
  .prob-media-g.img-left{direction:ltr}
  .faq-cta-box{position:static}
  .sec-video{padding:3.5rem 0 3rem}
.video-card{border-radius:var(--r-md)}
.video-info{padding:1.25rem 1.5rem}
.play-btn{width:60px;height:60px}
.play-btn svg{width:24px;height:24px}
}

@media(max-width:600px){
  .hero-sub{padding:8rem 0 4rem}
  .hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;align-items:start}
  .hero-stat strong{font-size:1.15rem}
  .hero-stat span{font-size:.7rem}
  .hero-sep{display:none}
  .ls-sol-g,.results-g{grid-template-columns:1fr}
  .hero-inner {padding: 4rem 2rem 10.8rem;}
  .sec-video{padding:2.5rem 0 2rem}
.video-info{padding:1rem 1.25rem}
.video-title{font-size:1.05rem}
.play-btn{width:52px;height:52px}
.play-btn svg{width:20px;height:20px}
.video-badge{top:10px;left:10px;font-size:.6rem;padding:4px 10px}
.video-duration{bottom:10px;right:10px;font-size:.65rem}
}

/* ═══ SHARED: Dot-Overlay ═══ */
.dot-overlay{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}

/* REFERENZEN SLIDER – transparent, Mesh von #globalMesh */
.sec-ref{padding:7rem 0;position:relative;overflow:hidden;background:transparent;z-index:1}
.sec-ref .sl{color:var(--label-on-mesh)}
.sec-ref .ss{color:var(--copy-on-mesh)}
.ref-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;gap:2rem}
.ref-header .sh{margin-bottom:0}
.ref-nav{display:flex;gap:.5rem;flex-shrink:0}
.ref-nav button{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(8px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;color:#fff}
.ref-nav button:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)}
.ref-nav button:active{transform:scale(.95)}
.ref-nav button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.ref-track-wrap{overflow-x:clip;overflow-y:visible}
.ref-track{display:flex;gap:1.5rem;transition:transform .55s cubic-bezier(.16,1,.3,1);will-change:transform;padding:24px 0 28px}
.ref-card{border-radius:var(--r-lg);overflow:hidden;border:none;background:var(--navy);transition:all .35s cubic-bezier(.16,1,.3,1);cursor:pointer;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ref-card:hover{box-shadow:0 16px 48px rgba(0,0,0,.2);transform:translateY(-6px)}
.ref-card:hover .ref-img img{transform:scale(1.04)}
.ref-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.ref-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ref-badge{position:absolute;top:1rem;left:1rem;padding:.35rem .85rem;background:rgba(7,44,80,.8);backdrop-filter:blur(8px);border-radius:var(--r-pill);font-size:.7rem;font-weight:600;color:#fff;letter-spacing:.02em;border:1px solid rgba(255,255,255,.06)}
.ref-overlay{position:absolute;bottom:0;left:0;right:0;padding:2.5rem 1.25rem 1rem;background:linear-gradient(0deg,rgba(7,44,80,.92) 0%,transparent 100%)}
.ref-metrics{display:flex;gap:0}
.ref-metric{flex:1;text-align:center;position:relative}
.ref-metric+.ref-metric::before{content:'';position:absolute;left:0;top:10%;height:80%;width:1px;background:rgba(255,255,255,.1)}
.ref-metric strong{display:block;font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.ref-metric span{font-size:.68rem;color:rgba(255,255,255,.4);font-weight:500}
.ref-body{padding:1.5rem;background:var(--white);position:relative;margin-top:-1px;flex:1}
.ref-title{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.4rem;line-height:1.35}
.ref-desc{font-size:.82rem;color:var(--navy-40);line-height:1.6;margin-bottom:1rem}
.ref-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.ref-tag{padding:.3rem .7rem;background:var(--navy-04);border-radius:var(--r-pill);font-size:.7rem;font-weight:600;color:var(--navy-40)}
.ref-dots{display:flex;justify-content:center;gap:.4rem;margin-top:2rem}
.ref-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);border:none;cursor:pointer;transition:all .3s;padding:0}
.ref-dot.active{width:28px;border-radius:4px;background:var(--accent-grad)}

/* ═══ FAQ HOMEPAGE ═══ */
.sec-faq-hp{padding:6rem 0;background:var(--light);position:relative}
.faq-hp-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start}
.faq-hp-left{position:sticky;top:6rem}
.faq-count{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-pill);font-size:.72rem;font-weight:600;color:var(--navy-40);margin-bottom:1.25rem}
.faq-hp-left .st{margin-bottom:.85rem}
.faq-hp-left .ss{margin-bottom:2rem}
.faq-hp-list{display:flex;flex-direction:column;gap:.65rem}
.faq-hp-item{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--white);transition:border-color .25s,box-shadow .25s}
.faq-hp-item.open{border-color:var(--navy-20);box-shadow:0 4px 20px rgba(7,44,80,.04)}
.faq-hp-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.35rem;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font);font-size:.88rem;font-weight:600;color:var(--navy);transition:background .2s}
.faq-hp-q:hover{background:var(--navy-04)}
.faq-hp-num{font-size:.72rem;font-weight:700;color:var(--navy-20);margin-right:.6rem;font-variant-numeric:tabular-nums}
.faq-hp-icon{width:28px;height:28px;min-width:28px;border-radius:8px;background:var(--navy-04);display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
.faq-hp-item.open .faq-hp-icon{background:var(--navy);transform:rotate(45deg)}
.faq-hp-icon svg{width:14px;height:14px;stroke:var(--navy-40);fill:none;stroke-width:2;transition:stroke .3s}
.faq-hp-item.open .faq-hp-icon svg{stroke:#fff}
.faq-hp-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
.faq-hp-item.open .faq-hp-a{max-height:500px}
.faq-hp-a-inner{padding:0 1.35rem 1.35rem;font-size:.85rem;color:var(--navy-60);line-height:1.75;padding-left:calc(1.35rem + .72rem * 3 + .6rem)}

/* ═══ CTA + KONTAKTFORMULAR – transparent, Mesh von #globalMesh ═══ */
.sec-cta-form{padding:7rem 0;background:transparent;position:relative;overflow:hidden;z-index:1}
.sec-cta-form .sl{color:var(--label-on-mesh)}
.sec-cta-form .ss{color:var(--copy-on-mesh)}
.cta-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:start}
.cta-copy{padding-top:.5rem}
.cta-benefits{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem}
.cta-benefit{display:grid;grid-template-columns:24px 1fr;gap:.85rem;align-items:start}
.cta-benefit-ck{width:24px;height:24px;min-width:24px;border-radius:8px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem;position:relative}
.cta-benefit-ck::before{content:'';position:absolute;inset:0;border-radius:8px;padding:1.5px;background:var(--accent-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cta-benefit-text{font-size:.88rem;color:var(--copy-on-mesh);line-height:1.5;min-width:0}
.cta-benefit-text strong{color:#fff;font-weight:700;display:block;margin-bottom:.1rem}
.cta-process-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--label-on-mesh);margin-bottom:1.25rem}
.cta-steps{display:flex;flex-direction:column;position:relative}
.cta-step{display:flex;align-items:flex-start;gap:1rem;position:relative;padding-bottom:1.5rem}
.cta-step:last-child{padding-bottom:0}
.cta-step-dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);flex-shrink:0;margin-top:.3rem;position:relative;z-index:1}
.cta-step-dot::before{content:'';position:absolute;inset:-1.5px;border-radius:50%;padding:1.5px;background:var(--accent-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;display:none}
.cta-step:first-child .cta-step-dot{border-color:transparent;background:transparent;backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.cta-step:first-child .cta-step-dot::before{display:block}
.cta-step:not(:last-child)::before{content:'';position:absolute;left:6px;top:18px;bottom:0;width:2px;background:rgba(255,255,255,.06)}
.cta-step-text{font-size:.82rem;color:var(--copy-on-mesh);line-height:1.45}
.cta-step-text strong{color:#fff;font-weight:600}

.cta-form-card{padding:2.5rem 2rem}
.cta-form-title{font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:.3rem}
.cta-form-sub{font-size:.78rem;color:rgba(255,255,255,.35);margin-bottom:2rem}
.cta-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.cta-form-row.cta-form-full{grid-template-columns:1fr}
.cta-form-group{display:flex;flex-direction:column;gap:.4rem}
.cta-form-group label{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.02em}
.cta-form-group input,.cta-form-group textarea,.cta-form-group select{width:100%;padding:.85rem 1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);color:#fff;font-family:var(--font);font-size:.88rem;transition:all .25s;outline:none;resize:none}
.cta-form-group input::placeholder,.cta-form-group textarea::placeholder{color:rgba(255,255,255,.18)}
.cta-form-group input:focus,.cta-form-group textarea:focus,.cta-form-group select:focus{border-color:rgba(239,66,54,.4);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(239,66,54,.08)}
.cta-form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='rgba(255,255,255,.3)' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.cta-form-group select option{background:var(--navy);color:#fff}
.cta-form-group textarea{min-height:100px}
.cta-form-bottom{margin-top:1.5rem}
.cta-form-privacy{font-size:.7rem;color:rgba(255,255,255,.2);line-height:1.55;margin-top:.85rem}
.cta-form-privacy a{color:rgba(255,255,255,.35);text-decoration:underline;text-underline-offset:2px}

/* ===== Form Checkbox (Datenschutz + checkbox_single Feld-Typ) ===== */
.cta-form-checkbox{display:flex;align-items:flex-start;gap:.6rem;padding:.15rem 0}
.cta-form-checkbox input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px;margin:2px 0 0 0;border:1.5px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(255,255,255,.04);cursor:pointer;position:relative;transition:border-color .15s ease,background .15s ease;flex-shrink:0}
.cta-form-checkbox input[type="checkbox"]:hover{border-color:rgba(255,255,255,.5)}
.cta-form-checkbox input[type="checkbox"]:checked{background:var(--orange,#ef4236);border-color:var(--orange,#ef4236)}
.cta-form-checkbox input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cta-form-checkbox input[type="checkbox"]:focus-visible{outline:2px solid var(--orange,#ef4236);outline-offset:2px}
.cta-form-checkbox label{font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.55);cursor:pointer;user-select:none;margin:0;font-weight:400;letter-spacing:0;text-transform:none}
.cta-form-checkbox label a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:2px}
.cta-form-checkbox label a:hover{color:var(--orange,#ef4236)}

@media(max-width:900px){
  .faq-hp-layout,.cta-grid{grid-template-columns:1fr;gap:2.5rem}
  .faq-hp-left{position:static}
  .faq-hp-a-inner{padding-left:1.35rem}
}
@media(max-width:600px){
  .ref-header{flex-direction:column;align-items:flex-start}
  .cta-form-row{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE NAVIGATION – Push-Nav (v2.10.1)
   - Burger 3 Bars (gestaffelt), X-Animation gefixt
   - Push statt Overlay: #site-wrap verschiebt nach links
   - Panel 80vw von rechts, langsamere Animation (.5s)
   - Panel-Header: Logo links, X rechts (vertikal zentriert)
   - Icon-Logo auf Mobile scrolled
═══════════════════════════════════════════════════════════ */

/* #site-wrap: Wrapper fuer Push-Effekt */
#site-wrap{
  position:relative;
  transition:transform .5s cubic-bezier(.32,.72,.24,1);
  z-index:1;
  background:transparent;
}
body.nav-open #site-wrap{
  will-change:transform;
}
body.nav-open #site-wrap{
  transform:translateX(-80vw);
}

/* Hamburger-Button – default versteckt (Desktop) */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:auto;width:44px;height:44px;position:relative;z-index:1002;flex-direction:column;justify-content:center;align-items:center;gap:0}
.nav-toggle-bar{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .35s ease, opacity .35s ease, background .35s ease, width .35s ease}
.nav-toggle-bar:nth-child(1){width:24px;margin-bottom:5px}
.nav-toggle-bar:nth-child(2){width:16px;margin-bottom:5px}
.nav-toggle-bar:nth-child(3){width:20px}
nav.scrolled .nav-toggle-bar{background:var(--navy)}

/* X-State: alle Bars auf 24px, mittig gedreht */
body.nav-open .nav-toggle-bar{width:24px;background:#fff}
body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0;transform:scaleX(0)}
body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Backdrop – versteckt */
.nav-backdrop{display:none}

/* Top-Nav bei offenem Menue */
body.nav-open nav{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.nav-open .nav-logo{opacity:0;pointer-events:none;transition:opacity .25s ease}

/* Nav-Mesh: DEPRECATED (v2.12.5). Panel nutzt jetzt transparenten Background,
   #globalMesh scheint direkt durch. Regeln bleiben als No-Op falls das Element irgendwo zurückkehrt. */
#navMesh{display:none!important}

/* Panel-Logo – default versteckt */
.nav-panel-logo{display:none}

/* ── Mobile: Push-Panel ── */
@media(max-width:900px){
  .nav-toggle{display:flex}

  /* Icon-Logo auf Mobile: einblenden wenn scrolled */
  .nav-logo-icon{display:block}
  nav.scrolled .nav-logo-light{opacity:0}
  nav.scrolled .nav-logo-dark{opacity:0}
  nav.scrolled .nav-logo-icon{opacity:1}

  /* .nav-links: 80vw Panel von rechts. Transparent damit #globalMesh durchscheint. */
  .nav-links{
    position:fixed;
    top:0;right:0;
    width:80vw;
    height:100vh;
    height:100dvh;
    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:5rem 2rem 2rem;
    margin:0;
    list-style:none;
    transform:translateX(100%);
    transition:transform .5s cubic-bezier(.32,.72,.24,1);
    z-index:1001;
    box-shadow:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    font-family:var(--font);
  }
  body.nav-open .nav-links{transform:translateX(0)}

  /* Panel-Logo: im Flow nach letztem Item, zentriert, mit Abstand nach oben */
  .nav-panel-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:2.5rem auto 0;
    padding:0;
    list-style:none;
    position:static;
    width:auto;
    opacity:.85;
  }
  .nav-panel-logo-img{
    height:32px;
    width:auto;
    display:block;
  }

  /* navToggle im offenen Zustand: fixiert oben rechts im Panel */
  body.nav-open .nav-toggle{
    position:fixed;
    top:1rem;
    right:calc(1.5rem - .5rem);/* panel-padding minus button-padding */
    z-index:1003;
  }

  /* Links – reguläre Nav-Items (CTA + Panel-Logo ausgenommen) */
  .nav-links li:not(.nav-panel-logo){
    width:auto;
    list-style:none;
    text-align:center;
    font-family:var(--font);
  }
  .nav-links li:not(.nav-panel-logo):not(:nth-last-child(2)) a{
    display:inline-block;
    padding:1rem 1.5rem;
    font-size:1.25rem;
    color:#fff;
    text-decoration:none;
    text-shadow:0 1px 3px rgba(0,0,0,.4);
    font-weight:500;
    font-family:var(--font);
    border-radius:var(--r-md);
    min-height:44px;
    transition:background .2s ease;
  }
  .nav-links li:not(.nav-panel-logo):not(:nth-last-child(2)) a:hover{background:rgba(255,255,255,.08);color:#fff}

  /* CTA-Button im Panel – vorletztes Item, erbt Desktop btn-p, nur Größen-Override */
  .nav-links li:nth-last-child(2) a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:1.25rem;
    padding:1.1rem 3rem;
    font-size:1.1rem;
    font-family:var(--font);
    box-shadow:0 4px 20px rgba(239,66,54,.3);
  }

  nav.scrolled .nav-links li:not(.nav-panel-logo):not(:nth-last-child(2)) a{color:#fff;opacity:1}
  nav.scrolled .nav-links li:not(.nav-panel-logo):not(:nth-last-child(2)) a:hover{color:#fff;background:rgba(255,255,255,.08)}
  nav.scrolled .nav-links li:nth-last-child(2) a{color:#fff;opacity:1}
}

/* Body-Scroll-Lock */
body.nav-open{overflow:hidden;touch-action:none}

/* ═══ MULTI-STEP FORM ═══ */
/* Progress-Bar v2 (v2.12.4): nur aktueller Step sichtbar, Gradient-Fill-Balken darunter.
   Step-Texte stapeln sich per position:absolute, Wechsel via horizontalem Slide (analog .hr-form-step).
   --hr-progress-fill wird von lead-form.js gesetzt (z.B. 33.3% für Step 1/3). */
.hr-form-progress{position:relative;margin-bottom:1.75rem;padding-bottom:1.1rem;min-height:3rem;--hr-progress-fill:0%}

/* Ladebalken-Track (base) */
.hr-form-progress::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);border-radius:100px;pointer-events:none}
/* Ladebalken-Fill (Gradient) */
.hr-form-progress::before{content:'';position:absolute;left:0;bottom:0;height:3px;width:var(--hr-progress-fill,0%);background:var(--accent-grad);border-radius:100px;z-index:1;pointer-events:none;transition:width .5s cubic-bezier(.16,1,.3,1);box-shadow:0 0 12px rgba(239,66,54,.35)}

/* Steps stapeln – nur .active sichtbar */
.hr-form-progress-step{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:.65rem;opacity:0;pointer-events:none;transform:translateX(20px);transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.hr-form-progress-step.active{opacity:1;pointer-events:auto;transform:translateX(0);position:relative}

/* Dot (gleich wie vorher, Gradient-Border bei .active) */
.hr-form-progress-dot{width:28px;height:28px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0;position:relative}
.hr-form-progress-dot::before{content:'';position:absolute;inset:0;border-radius:50%;padding:1.5px;background:var(--accent-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Label */
.hr-form-progress-step span{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap}

/* Step visibility + transitions */
.hr-form-step{display:none;animation:hrStepIn .35s ease}
.hr-form-step.active{display:block}
.hr-form-step.slide-left{display:none}
.hr-form-step.slide-right{display:none}
@keyframes hrStepIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* Nav buttons */
.hr-form-nav{display:flex;gap:.75rem;margin-top:1.25rem}
.hr-form-back{flex-shrink:0}

/* Validation error */
.hr-field-error{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(239,66,54,.15)!important}
.hr-field-msg{font-size:.72rem;color:var(--orange);margin-top:.3rem;animation:hrStepIn .25s ease}

/* Form error message */
.hr-form-error{background:rgba(239,66,54,.12);border:1px solid rgba(239,66,54,.25);border-radius:var(--r-md);padding:.75rem 1rem;font-size:.82rem;color:rgba(255,255,255,.85);margin-bottom:.75rem;animation:hrStepIn .3s ease}

/* ═══ TYPOGRAFIE – Mobile (Block D) ═══ */

/* Headlines: nur Notfall-Umbruch, keine Silbentrennung */
.hero h1,.hero-sub h2,.st,.prob-t,.about-txt h2,.sol-h,.srv-c h3,.proc-s h4,.ls-sol-h,.ref-title,.video-title,.cta-c h2,.cta-form-title,.faq-q,.faq-hp-q{overflow-wrap:break-word;word-break:break-word}

/* Fliesstext: Silbentrennung auf Deutsch */
@media(max-width:900px){
  .prob-p,.ss,.sol-p,.srv-c p,.about-txt p,.proc-s p,.hero-lead,.hs-lead,.test-q,.faq-a-inner,.faq-hp-a-inner,.result-label,.result-context,.scope-txt p,.ls-sol-p,.pi span,.pi-txt span,.cta-benefit-text,.cta-step-text,.video-desc,.ref-desc,.bc-list li{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* ═══ LEGAL PAGE ═══ */
.sec-legal{position:relative;min-height:100vh}

/* Legal Page: Auto-Hyphens auf allen Textelementen (auch Desktop – lange Rechtsbegriffe) */
.legal-copy,
.legal-headline,
.legal-content p,
.legal-content li,
.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content td{
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

/* Grid: volle Viewport-Breite, 50/50 – ueberschreibt .container-Werte */
.legal-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:100vh;max-width:none;padding:0}

/* Nav auf Legal-Pages immer "scrolled" darstellen (weisser Background, dunkle Links) */
/* nav:has(.nav-inner) qualifiziert nur das Site-Nav, nicht beliebige <nav>-Elemente */
body:has(.sec-legal) nav:has(.nav-inner){background:rgba(255,255,255,1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--border)}
body:has(.sec-legal) nav:has(.nav-inner) .nav-logo-light{opacity:0}
body:has(.sec-legal) nav:has(.nav-inner) .nav-logo-dark{opacity:1}
body:has(.sec-legal) nav:has(.nav-inner) .nav-logo-text{color:var(--navy)}
body:has(.sec-legal) nav:has(.nav-inner) .nav-links a{color:var(--navy);opacity:.5}
body:has(.sec-legal) nav:has(.nav-inner) .nav-links a:hover{opacity:.8;background:var(--navy-04)}
body:has(.sec-legal) nav:has(.nav-inner) .nav-links li:last-child a{background:rgba(255,255,255,.08);color:var(--navy);opacity:1;box-shadow:0 4px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.1)}
body:has(.sec-legal) nav:has(.nav-inner) .nav-toggle-bar{background:var(--navy)}

/* Left: Fixed im Viewport (Desktop) */
.legal-left{
  position:fixed;
  top:80px;
  left:0;
  width:50vw;
  height:calc(100vh - 80px);
  background:transparent;
  overflow:hidden;
  z-index:1;
}
/* Dot-Overlay bleibt – feine Textur zur besseren Lesbarkeit */
.legal-left::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
  z-index:1;
}
.legal-left-inner{
  position:relative;
  z-index:2;
  height:100%;
  padding:4rem 3rem 4rem max((100vw - 1140px)/2 + 2rem, 2rem);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  max-width:calc(1140px/2);
  margin-left:0;
  overflow-y:auto;
}
.legal-left-inner::-webkit-scrollbar{width:0;display:none}
.legal-left-inner{scrollbar-width:none}

/* Text-Lesbarkeit auf puren Mesh: Copy-Ton, kein Shadow mehr (v2.12.6) */
.legal-left .sl{color:var(--label-on-mesh)}

.legal-headline{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.03em;margin-bottom:.75rem}
.legal-copy{font-size:.92rem;color:var(--copy-on-mesh);line-height:1.7;max-width:380px;margin-bottom:1.5rem}
.sec-legal .breadcrumb{margin-top:1rem;margin-bottom:0}
.legal-left .breadcrumb a,
.legal-left .breadcrumb span{color:var(--copy-on-mesh)}

/* Right: Normaler Scroll-Flow, nimmt die rechte Viewport-Haelfte */
.legal-right{
  grid-column:2;
  padding-top:calc(80px + 4rem);
  padding-bottom:6rem;
  padding-left:3rem;
  padding-right:max((100vw - 1140px)/2 + 2rem, 2rem);
  background:var(--light);
}
.legal-content{max-width:560px}

/* Richtext Styles innerhalb legal-content */
.legal-content h2{font-size:1.25rem;font-weight:800;color:var(--navy);margin:2.5rem 0 .75rem;letter-spacing:-.02em}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin:2rem 0 .5rem}
.legal-content h4{font-size:.92rem;font-weight:700;color:var(--navy);margin:1.5rem 0 .4rem}
.legal-content p{font-size:.88rem;color:var(--navy-60);line-height:1.75;margin-bottom:1rem}
.legal-content ul,.legal-content ol{font-size:.88rem;color:var(--navy-60);line-height:1.75;margin:0 0 1rem 1.25rem;padding:0}
.legal-content li{margin-bottom:.35rem}
.legal-content a{color:var(--orange);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.legal-content a:hover{color:var(--orange-hover)}
.legal-content strong{color:var(--navy);font-weight:600}
.legal-content hr{border:none;border-top:1px solid var(--border);margin:2rem 0}
.legal-content table{width:100%;border-collapse:collapse;font-size:.85rem;margin:1rem 0}
.legal-content th,.legal-content td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--border)}
.legal-content th{font-weight:600;color:var(--navy)}
.legal-content td{color:var(--navy-60)}

/* Mobile: Stack – linke Spalte unfixed, normaler Flow */
@media(max-width:900px){
  .sec-legal{min-height:auto;overflow:hidden;background:transparent}

  .legal-grid{grid-template-columns:1fr;min-height:auto;gap:0}

  /* Hero-Cell: static + Fullbleed via width:100vw-Trick – transparent, Mesh kommt von #globalMesh */
  .legal-left{
    position:relative;
    top:auto;left:auto;
    width:100vw;
    margin-left:calc(50% - 50vw);
    height:auto;
    z-index:0;
    background:transparent;
    overflow:hidden;
  }
  /* Dot-Overlay bleibt */
  .legal-left::before{inset:0}

  .legal-left-inner{
    /* Content-Padding: zieht den Inhalt wieder auf Container-Breite */
    padding:7rem 2rem 3rem;
    max-width:none;
    margin-left:0;
    display:block;
    height:auto;
    overflow:visible;
  }
  .legal-headline{font-size:clamp(1.75rem,6vw,2.2rem)}
  .legal-copy{max-width:none}

  /* Content-Cell: ebenfalls fullbleed, Light-Background */
  .legal-right{
    grid-column:1;
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:3rem 2rem 5rem;
    background:var(--light);
  }
  .legal-content{max-width:none}
}

/* ═══════════════════════════════════════════════════════════
   CONTACT FORM – Split-Layout (links weiß / rechts Mesh)
   Normal-Flow, nicht fixed. Schwester-Sektion zu cta-form.
═══════════════════════════════════════════════════════════ */
.sec-contact{padding:6rem 0 5rem;background:transparent;position:relative;z-index:1}

/* Grid: fullbleed, 50/50 */
.sec-contact .contact-grid{max-width:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}

/* Linke Spalte: weiß, solid. Innen auf Container-Breite zurückgezogen (max 1140/2). */
.contact-left{background:var(--white);padding:4rem 3rem 4rem max((100vw - 1140px)/2 + 2rem, 2rem);display:flex;flex-direction:column;justify-content:flex-start;border-radius:0 var(--r-lg) var(--r-lg) 0;overflow:hidden}
.contact-left-inner{max-width:calc(1140px/2);width:100%}
.contact-left .sl{color:var(--navy-40);margin-bottom:.75rem}
.contact-headline{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:-.03em;margin-bottom:.9rem}
.contact-copy{font-size:.95rem;color:var(--navy-60);line-height:1.7;max-width:440px;margin-bottom:2rem}

/* Optionales Bild */
.contact-img-w{border-radius:var(--r-lg);overflow:hidden;margin-bottom:2rem;max-width:440px}
.contact-img-w img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}

/* Ansprechpartner-Block */
.contact-person{background:var(--light);border:1px solid var(--border);border-radius:var(--r-md);padding:1.25rem 1.4rem;max-width:440px;box-shadow:10px 10px 24px rgba(163,177,198,.4),-10px -10px 24px rgba(255,255,255,.9);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.contact-person:hover{transform:translateY(-4px);box-shadow:16px 16px 36px rgba(163,177,198,.5),-14px -14px 32px rgba(255,255,255,.95)}
.contact-person-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--navy-40);margin-bottom:.55rem}
.contact-person-name{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.15rem}
.contact-person-email{display:inline-block;font-size:.88rem;font-weight:600;color:var(--orange);text-decoration:none;margin-bottom:.65rem;word-break:break-all}
.contact-person-email:hover{color:var(--orange-hover);text-decoration:underline;text-underline-offset:2px}
.contact-person-text{font-size:.85rem;color:var(--navy-60);line-height:1.6}

/* Rechte Spalte: transparent – Mesh scheint durch #globalMesh durch. Innen ebenfalls auf Container-Breite zurückgezogen. */
.contact-right{background:transparent;padding:4rem max((100vw - 1140px)/2 + 2rem, 2rem) 4rem 3rem;display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.contact-form-card{width:100%;padding:2.5rem 2rem}
.contact-form-title{font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:.3rem}
.contact-form-sub{font-size:.78rem;color:var(--copy-on-mesh);margin-bottom:1.5rem}

/* Error-Card wenn kein Formular gewählt */
.contact-form-error{text-align:center;padding:2rem 1rem;background:rgba(239,66,54,.08);border:1px solid rgba(239,66,54,.3);border-radius:var(--r-md)}
.contact-form-error .contact-form-title{color:#fff}

/* Form-Slot: HR-Leads-Shortcode rendert hier seine cta-form-*/hr-form-* Markup.
   Die Styles (Inputs, Labels, Buttons, Progress, Checkbox) kommen aus dem
   bestehenden cta-form CSS – das funktioniert, weil die Scope-Klassen identisch sind. */
.contact-form-slot{position:relative}

/* Mobile: stack. Oben weiß (Content), unten transparent (Mesh + Form). */
@media(max-width:900px){
  .sec-contact{padding:0;overflow:hidden}
  .sec-contact .contact-grid{grid-template-columns:1fr;gap:0}

  /* Linke Cell → oben, fullbleed weiß */
  .contact-left{
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:6rem 2rem 3rem;
    background:var(--white);
    border-radius:0;
  }
  .contact-left-inner{max-width:none}
  .contact-headline{font-size:clamp(1.75rem,6vw,2.2rem)}
  .contact-copy,.contact-img-w,.contact-person{max-width:none}

  /* Rechte Cell → unten, fullbleed transparent */
  .contact-right{
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:3rem 2rem 5rem;
    background:transparent;
  }
  .contact-form-card{max-width:none}
}

@media(max-width:600px){
  .contact-left{padding:5rem 1.5rem 2.5rem}
  .contact-right{padding:2.5rem 1.5rem 4rem}
  .contact-form-card{padding:2rem 1.25rem}
}

/* ═════════════════════════════════════════════════════════
   CSS-ANIMATIONEN (v2.12.10) – LEISTUNGSSEITEN + HOMEPAGE NO-GSAP FALLBACK
   IO setzt .is-in auf der Sektion, CSS macht die Choreografie.
   Jedes Item erbt --i (von JS gesetzt) fuer sektions-internen Stagger.
═════════════════════════════════════════════════════════ */

/* Shared Easing + Defaults */
.hero-sub,
.sec-ls-prob,
.sec-ls-sol,
.sec-scope,
.sec-ls-results,
.sec-faq,
.sec-ls-about,
body.no-gsap-anim .sec-prob,
body.no-gsap-anim .sec-sol,
body.no-gsap-anim .sec-srv,
body.no-gsap-anim .sec-about,
body.no-gsap-anim .sec-proc,
body.no-gsap-anim .sec-test{
  --ls-ease: cubic-bezier(.22,1,.36,1);
  --ls-ease-spring: cubic-bezier(.34,1.65,.5,1);
  --ls-ease-power: cubic-bezier(.16,1,.3,1);
  --ls-dur: 1s;
  --ls-stagger: .11s;
  --ls-base: 0s;
}

/* Basis-Transition fuer alle animierten Elemente */
.hero-sub .hero-sub-content > *,
.hero-sub .hero-sub-image,
.hero-sub .hero-stat,
.sec-ls-prob .reveal-item,
.sec-ls-prob .pi-ext,
.sec-ls-sol .reveal-item,
.sec-ls-sol .ls-sol-c,
.sec-scope .reveal-item,
.sec-scope .scope-item,
.sec-ls-results .reveal-item,
.sec-ls-results .result-c,
.sec-faq .reveal-item,
.sec-faq .faq-item,
.sec-faq .faq-cta-box,
.sec-ls-about .about-img-w.reveal-item,
.sec-ls-about .about-txt > .sl.reveal-item,
.sec-ls-about .about-txt > h2.reveal-item,
.sec-ls-about .about-txt > p.reveal-item,
.sec-ls-about .af.reveal-item,
body.no-gsap-anim .sec-prob .prob-t,
body.no-gsap-anim .sec-prob .sl,
body.no-gsap-anim .sec-prob .prob-p,
body.no-gsap-anim .sec-prob .reveal-item,
body.no-gsap-anim .sec-sol .sh > *,
body.no-gsap-anim .sec-sol .reveal-item,
body.no-gsap-anim .sec-srv .sh > *,
body.no-gsap-anim .sec-srv .reveal-item,
body.no-gsap-anim .sec-about .about-txt > *,
body.no-gsap-anim .sec-about .about-img-w,
body.no-gsap-anim .sec-about .reveal-item,
body.no-gsap-anim .sec-proc .sh > *,
body.no-gsap-anim .sec-proc .reveal-item,
body.no-gsap-anim .sec-test .sh .sl,
body.no-gsap-anim .sec-test .sh .st,
body.no-gsap-anim .sec-test .test-marquee-wrap{
  transition:
    opacity var(--ls-dur) var(--ls-ease),
    transform var(--ls-dur) var(--ls-ease),
    filter var(--ls-dur) var(--ls-ease);
  transition-delay: calc(var(--ls-base) + var(--i, 0) * var(--ls-stagger));
  will-change: opacity, transform;
}

/* ═══ HERO-SUB: kraftvolles Entrée beim Page Load ═══ */
.hero-sub{ --ls-base: .2s; --ls-stagger: .13s; --ls-dur: 1.1s; }
.hero-sub .hero-sub-content > *{
  opacity:0;
  transform:translateY(50px);
  filter:blur(10px);
}
.hero-sub .hero-sub-image{
  opacity:0;
  transform:translateX(80px) scale(.88);
  filter:blur(8px);
}
.hero-sub.is-in .hero-sub-content > *,
.hero-sub.is-in .hero-sub-image{
  opacity:1;
  transform:none;
  filter:blur(0);
}
/* Stats poppen deutlich, nachdem der Rest sitzt */
.hero-sub .hero-stat{
  opacity:0;
  transform:translateY(30px) scale(.6);
}
.hero-sub.is-in .hero-stat{
  opacity:1;
  transform:none;
  transition:
    opacity .7s var(--ls-ease),
    transform .8s var(--ls-ease-spring);
  transition-delay: calc(.85s + var(--i, 0) * .12s);
}

/* ═══ LS-PROBLEM: Text rauscht von links rein, Karten fliegen von rechts mit Stagger ═══ */
.sec-ls-prob{ --ls-stagger: .14s; --ls-dur: 1.1s; }
.sec-ls-prob .reveal-item{
  opacity:0;
  transform:translateX(-80px);
}
.sec-ls-prob .pi-ext{
  opacity:0;
  transform:translateX(70px) scale(.92);
}
.sec-ls-prob .prob-media-wrap{
  opacity:0;
  transform:translateX(100px) scale(.9);
  filter:blur(8px);
  transition:
    opacity 1.3s var(--ls-ease) .3s,
    transform 1.3s var(--ls-ease) .3s,
    filter 1.3s var(--ls-ease) .3s;
  will-change:opacity,transform;
}
.sec-ls-prob .prob-media-g.img-left .prob-media-wrap{
  transform:translateX(-100px) scale(.9);
}
.sec-ls-prob.is-in .reveal-item{
  opacity:1;
  transform:none;
}
.sec-ls-prob.is-in .pi-ext{
  opacity:1;
  transform:none;
  transition:
    opacity .85s var(--ls-ease),
    transform 1s var(--ls-ease-spring);
  transition-delay: calc(.4s + var(--i, 0) * .13s);
}
.sec-ls-prob.is-in .prob-media-wrap{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* ═══ LS-SOLUTION: Intro fade-up, Karten fliegen mit starkem Spring rein ═══ */
.sec-ls-sol{ --ls-stagger: .1s; }
.sec-ls-sol .reveal-item{
  opacity:0;
  transform:translateY(60px);
}
.sec-ls-sol .ls-sol-c{
  opacity:0;
  transform:translateY(80px) scale(.82) rotate(-2deg);
  transition:
    opacity .9s var(--ls-ease),
    transform 1.1s var(--ls-ease-spring),
    border-color .3s, box-shadow .3s;
  transition-delay: calc(.35s + var(--i, 0) * .15s);
  will-change: opacity, transform;
}
.sec-ls-sol .ls-sol-c:nth-child(even){
  transform:translateY(80px) scale(.82) rotate(2deg);
}
.sec-ls-sol.is-in .reveal-item,
.sec-ls-sol.is-in .ls-sol-c,
.sec-ls-sol.is-in .ls-sol-c:nth-child(even){
  opacity:1;
  transform:none;
}

/* ═══ LS-SCOPE: Grid mit Stagger, jedes Item poppt rein ═══ */
.sec-scope{ --ls-stagger: .08s; }
.sec-scope .reveal-item{
  opacity:0;
  transform:translateY(40px);
}
.sec-scope .scope-item{
  opacity:0;
  transform:translateY(50px) scale(.85);
  transition:
    opacity .75s var(--ls-ease),
    transform .9s var(--ls-ease-spring),
    border-color .3s, box-shadow .3s;
  transition-delay: calc(.25s + var(--i, 0) * .08s);
  will-change: opacity, transform;
}
.sec-scope .scope-note.reveal-item{
  transform:translateY(30px);
  transition-delay: calc(.25s + 10 * .08s);
}
.sec-scope.is-in .reveal-item,
.sec-scope.is-in .scope-item{
  opacity:1;
  transform:none;
}

/* ═══ LS-RESULTS: Headline fade-up, Zahlen kommen mit dickem Pop + Blur-off, Testimonial langsam majestätisch ═══ */
.sec-ls-results .reveal-item{
  opacity:0;
  transform:translateY(40px);
}
.sec-ls-results .result-c{
  opacity:0;
  transform:translateY(60px) scale(.6);
  filter:blur(6px);
  transition:
    opacity .9s var(--ls-ease),
    transform 1s var(--ls-ease-spring),
    filter .9s var(--ls-ease),
    background .3s, border-color .3s;
  transition-delay: calc(.4s + var(--i, 0) * .16s);
  will-change: opacity, transform;
}
.sec-ls-results .test-single.reveal-item{
  opacity:0;
  transform:translateY(40px) scale(.95);
  filter:blur(12px);
  transition:
    opacity 1.4s var(--ls-ease),
    transform 1.4s var(--ls-ease),
    filter 1.4s var(--ls-ease);
  transition-delay: 1s;
}
.sec-ls-results.is-in .reveal-item,
.sec-ls-results.is-in .result-c{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.sec-ls-results.is-in .test-single.reveal-item{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* ═══ LS-FAQ: Items kaskadieren kraftvoll, CTA-Box schwingt von rechts rein ═══ */
.sec-faq{ --ls-stagger: .07s; }
.sec-faq .reveal-item{
  opacity:0;
  transform:translateY(35px);
}
.sec-faq .faq-item{
  opacity:0;
  transform:translateX(-40px);
  transition:
    opacity .7s var(--ls-ease),
    transform .8s var(--ls-ease),
    border-color .2s, box-shadow .25s;
  transition-delay: calc(.25s + var(--i, 0) * .08s);
  will-change: opacity, transform;
}
.sec-faq .faq-cta-box.reveal-item{
  opacity:0;
  transform:translateX(80px) scale(.9);
  transition:
    opacity 1.1s var(--ls-ease) .4s,
    transform 1.2s var(--ls-ease-spring) .4s;
}
.sec-faq.is-in .reveal-item,
.sec-faq.is-in .faq-item{
  opacity:1;
  transform:none;
}
.sec-faq.is-in .faq-cta-box.reveal-item{
  opacity:1;
  transform:none;
}

/* ═══ LS-ABOUT: Bild segelt von links, Text von rechts, Facts poppen mit Stagger ═══ */
.sec-ls-about{ --ls-stagger: .1s; }
.sec-ls-about .about-img-w.reveal-item{
  opacity:0;
  transform:translateX(-90px) scale(.88);
  filter:blur(8px);
  transition:
    opacity 1.2s var(--ls-ease),
    transform 1.3s var(--ls-ease),
    filter 1.2s var(--ls-ease);
  transition-delay:.15s;
  will-change:opacity,transform;
}
.sec-ls-about .about-txt > .sl.reveal-item,
.sec-ls-about .about-txt > h2.reveal-item,
.sec-ls-about .about-txt > p.reveal-item{
  opacity:0;
  transform:translateX(60px);
}
.sec-ls-about .about-txt > .sl.reveal-item{ transition-delay:.3s; }
.sec-ls-about .about-txt > h2.reveal-item{ transition-delay:.45s; }
.sec-ls-about .about-txt > p.reveal-item:nth-of-type(1){ transition-delay:.6s; }
.sec-ls-about .about-txt > p.reveal-item:nth-of-type(2){ transition-delay:.75s; }
.sec-ls-about .af.reveal-item{
  opacity:0;
  transform:translateY(40px) scale(.75);
  transition:
    opacity .7s var(--ls-ease),
    transform .85s var(--ls-ease-spring),
    background .3s, border-color .3s;
  transition-delay: calc(.9s + var(--i, 0) * .1s);
  will-change: opacity, transform;
}
.sec-ls-about.is-in .about-img-w.reveal-item{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.sec-ls-about.is-in .about-txt > .sl.reveal-item,
.sec-ls-about.is-in .about-txt > h2.reveal-item,
.sec-ls-about.is-in .about-txt > p.reveal-item,
.sec-ls-about.is-in .af.reveal-item{
  opacity:1;
  transform:none;
}

/* ═════════════════════════════════════════════════════════
   HOMEPAGE NO-GSAP FALLBACK – Wenn GSAP nicht laeuft (Mobile, Fail)
   Jede Sektion hat eigenen Charakter, genau wie auf LS-Seiten.
═════════════════════════════════════════════════════════ */

/* sec-prob: Titel + Copy von links, Pain-Items (.pl > .pi oder .reveal-item) einzeln von rechts */
body.no-gsap-anim .sec-prob{ --ls-stagger: .11s; --ls-dur: 1s; }
body.no-gsap-anim .sec-prob .prob-t,
body.no-gsap-anim .sec-prob .sl,
body.no-gsap-anim .sec-prob .prob-p{
  opacity:0;
  transform:translateX(-60px);
}
body.no-gsap-anim .sec-prob .prob-t{ transition-delay:.2s; }
body.no-gsap-anim .sec-prob .sl{ transition-delay:.1s; }
body.no-gsap-anim .sec-prob .prob-p{ transition-delay:.35s; }
body.no-gsap-anim .sec-prob .reveal-item{
  opacity:0;
  transform:translateX(60px) scale(.92);
  transition:
    opacity .85s var(--ls-ease),
    transform 1s var(--ls-ease-spring);
  transition-delay: calc(.4s + var(--i, 0) * .11s);
}
body.no-gsap-anim .sec-prob.is-in .prob-t,
body.no-gsap-anim .sec-prob.is-in .sl,
body.no-gsap-anim .sec-prob.is-in .prob-p,
body.no-gsap-anim .sec-prob.is-in .reveal-item{
  opacity:1;
  transform:none;
}

/* sec-sol: Intro fade-up, Karten kommen gestaffelt mit Rotation + Scale */
body.no-gsap-anim .sec-sol{ --ls-stagger: .1s; }
body.no-gsap-anim .sec-sol .sh > *{
  opacity:0;
  transform:translateY(40px);
}
body.no-gsap-anim .sec-sol .reveal-item{
  opacity:0;
  transform:translateY(70px) scale(.82) rotate(-2deg);
  transition:
    opacity .9s var(--ls-ease),
    transform 1.1s var(--ls-ease-spring);
  transition-delay: calc(.35s + var(--i, 0) * .14s);
}
body.no-gsap-anim .sec-sol .reveal-item:nth-child(even){
  transform:translateY(70px) scale(.82) rotate(2deg);
}
body.no-gsap-anim .sec-sol.is-in .sh > *,
body.no-gsap-anim .sec-sol.is-in .reveal-item,
body.no-gsap-anim .sec-sol.is-in .reveal-item:nth-child(even){
  opacity:1;
  transform:none;
}

/* sec-srv: Headlines fade-up, Karten kommen mit starkem Scale-pop + Y */
body.no-gsap-anim .sec-srv{ --ls-stagger: .09s; }
body.no-gsap-anim .sec-srv .sh > *{
  opacity:0;
  transform:translateY(40px);
}
body.no-gsap-anim .sec-srv .reveal-item{
  opacity:0;
  transform:translateY(80px) scale(.78);
  filter:blur(4px);
  transition:
    opacity .9s var(--ls-ease),
    transform 1s var(--ls-ease-spring),
    filter .9s var(--ls-ease);
  transition-delay: calc(.35s + var(--i, 0) * .12s);
}
body.no-gsap-anim .sec-srv.is-in .sh > *,
body.no-gsap-anim .sec-srv.is-in .reveal-item{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* sec-about: Bild von links rein, Text-Block von rechts, Facts poppen mit Stagger */
body.no-gsap-anim .sec-about{ --ls-stagger: .1s; }
body.no-gsap-anim .sec-about .about-img-w{
  opacity:0;
  transform:translateX(-90px) scale(.88);
  filter:blur(8px);
  transition:
    opacity 1.2s var(--ls-ease),
    transform 1.3s var(--ls-ease),
    filter 1.2s var(--ls-ease);
  transition-delay:.15s;
}
body.no-gsap-anim .sec-about .about-txt > .sl,
body.no-gsap-anim .sec-about .about-txt > h2,
body.no-gsap-anim .sec-about .about-txt > p{
  opacity:0;
  transform:translateX(60px);
}
body.no-gsap-anim .sec-about .about-txt > .sl{ transition-delay:.3s; }
body.no-gsap-anim .sec-about .about-txt > h2{ transition-delay:.45s; }
body.no-gsap-anim .sec-about .about-txt > p:nth-of-type(1){ transition-delay:.6s; }
body.no-gsap-anim .sec-about .about-txt > p:nth-of-type(2){ transition-delay:.75s; }
body.no-gsap-anim .sec-about .reveal-item{
  opacity:0;
  transform:translateY(40px) scale(.75);
  transition:
    opacity .7s var(--ls-ease),
    transform .85s var(--ls-ease-spring);
  transition-delay: calc(.85s + var(--i, 0) * .1s);
}
body.no-gsap-anim .sec-about.is-in .about-img-w,
body.no-gsap-anim .sec-about.is-in .about-txt > .sl,
body.no-gsap-anim .sec-about.is-in .about-txt > h2,
body.no-gsap-anim .sec-about.is-in .about-txt > p,
body.no-gsap-anim .sec-about.is-in .reveal-item{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* sec-proc: Headlines fade-up, Steps kommen alternierend von links/rechts */
body.no-gsap-anim .sec-proc{ --ls-stagger: .12s; }
body.no-gsap-anim .sec-proc .sh > *{
  opacity:0;
  transform:translateY(40px);
}
body.no-gsap-anim .sec-proc .reveal-item{
  opacity:0;
  transform:translateX(-70px) scale(.85);
  transition:
    opacity .85s var(--ls-ease),
    transform 1s var(--ls-ease-spring);
  transition-delay: calc(.35s + var(--i, 0) * .13s);
}
body.no-gsap-anim .sec-proc .reveal-item:nth-child(even){
  transform:translateX(70px) scale(.85);
}
body.no-gsap-anim .sec-proc.is-in .sh > *,
body.no-gsap-anim .sec-proc.is-in .reveal-item,
body.no-gsap-anim .sec-proc.is-in .reveal-item:nth-child(even){
  opacity:1;
  transform:none;
}

/* sec-test: Label + Headline fade-up, Marquee-Wrap kommt mit scale von unten */
body.no-gsap-anim .sec-test .sh .sl,
body.no-gsap-anim .sec-test .sh .st{
  opacity:0;
  transform:translateY(30px);
}
body.no-gsap-anim .sec-test .sh .sl{ transition-delay:.15s; }
body.no-gsap-anim .sec-test .sh .st{ transition-delay:.3s; }
body.no-gsap-anim .sec-test .test-marquee-wrap{
  opacity:0;
  transform:translateY(50px) scale(.92);
  transition:
    opacity 1.1s var(--ls-ease),
    transform 1.2s var(--ls-ease-spring);
  transition-delay:.5s;
}
body.no-gsap-anim .sec-test.is-in .sh .sl,
body.no-gsap-anim .sec-test.is-in .sh .st,
body.no-gsap-anim .sec-test.is-in .test-marquee-wrap{
  opacity:1;
  transform:none;
}

/* ═══ Progressive Enhancement: Scroll-Driven Animations (View Timeline) ═══ */
@supports (animation-timeline: view()) {
  .sec-ls-sol.is-in .ls-sol-c,
  .sec-ls-results.is-in .result-c,
  .sec-scope.is-in .scope-item{
    animation: ls-scroll-float linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes ls-scroll-float {
    from { transform: translateY(40px); }
    to   { transform: translateY(0); }
  }
}

/* ═══ Reduced Motion: alles auf einfachen kurzen Fade ═══ */
@media (prefers-reduced-motion: reduce) {
  .hero-sub .hero-sub-content > *,
  .hero-sub .hero-sub-image,
  .hero-sub .hero-stat,
  .sec-ls-prob .reveal-item,
  .sec-ls-prob .pi-ext,
  .sec-ls-prob .prob-media-wrap,
  .sec-ls-sol .reveal-item,
  .sec-ls-sol .ls-sol-c,
  .sec-scope .reveal-item,
  .sec-scope .scope-item,
  .sec-ls-results .reveal-item,
  .sec-ls-results .result-c,
  .sec-ls-results .test-single.reveal-item,
  .sec-faq .reveal-item,
  .sec-faq .faq-item,
  .sec-faq .faq-cta-box.reveal-item,
  .sec-ls-about .about-img-w.reveal-item,
  .sec-ls-about .about-txt > .sl.reveal-item,
  .sec-ls-about .about-txt > h2.reveal-item,
  .sec-ls-about .about-txt > p.reveal-item,
  .sec-ls-about .af.reveal-item,
  body.no-gsap-anim .sec-prob .prob-t,
  body.no-gsap-anim .sec-prob .sl,
  body.no-gsap-anim .sec-prob .prob-p,
  body.no-gsap-anim .sec-prob .reveal-item,
  body.no-gsap-anim .sec-sol .sh > *,
  body.no-gsap-anim .sec-sol .reveal-item,
  body.no-gsap-anim .sec-srv .sh > *,
  body.no-gsap-anim .sec-srv .reveal-item,
  body.no-gsap-anim .sec-about .about-img-w,
  body.no-gsap-anim .sec-about .about-txt > *,
  body.no-gsap-anim .sec-about .reveal-item,
  body.no-gsap-anim .sec-proc .sh > *,
  body.no-gsap-anim .sec-proc .reveal-item,
  body.no-gsap-anim .sec-test .sh .sl,
  body.no-gsap-anim .sec-test .sh .st,
  body.no-gsap-anim .sec-test .test-marquee-wrap{
    transition-duration: .25s !important;
    transition-delay: 0s !important;
    transform: none !important;
    filter: none !important;
  }
  .sec-ls-sol.is-in .ls-sol-c,
  .sec-ls-results.is-in .result-c,
  .sec-scope.is-in .scope-item{
    animation: none !important;
  }
}

/* ═══ No-JS Fallback: Ohne .is-in immer sichtbar ═══ */
html.no-js .hero-sub .hero-sub-content > *,
html.no-js .hero-sub .hero-sub-image,
html.no-js .hero-sub .hero-stat,
html.no-js .sec-ls-prob .reveal-item,
html.no-js .sec-ls-prob .pi-ext,
html.no-js .sec-ls-prob .prob-media-wrap,
html.no-js .sec-ls-sol .reveal-item,
html.no-js .sec-ls-sol .ls-sol-c,
html.no-js .sec-scope .reveal-item,
html.no-js .sec-scope .scope-item,
html.no-js .sec-ls-results .reveal-item,
html.no-js .sec-ls-results .result-c,
html.no-js .sec-faq .reveal-item,
html.no-js .sec-faq .faq-item,
html.no-js .sec-faq .faq-cta-box.reveal-item,
html.no-js .sec-ls-about .about-img-w.reveal-item,
html.no-js .sec-ls-about .about-txt > .sl.reveal-item,
html.no-js .sec-ls-about .about-txt > h2.reveal-item,
html.no-js .sec-ls-about .about-txt > p.reveal-item,
html.no-js .sec-ls-about .af.reveal-item{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}