@font-face{font-family:Sansation;src:url(fonts/sansation-light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Sansation;src:url(fonts/sansation-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Sansation;src:url(fonts/sansation-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Sansation;src:url(fonts/sansation-bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --blue:#2a4b9b;--blue-d:#1b3270;--navy:#0f1b3d;--navy-2:#16264f;
  --green:#8ab439;--gelb:#e0a81a;--gelb-d:#b9850c;
  --ink:#2b2f36;--muted:#5d6470;--grau:#e2e5e8;--grau-2:#f2f4f6;--line:#cdd2d8;--white:#fff;
  --r:14px;--shadow:0 18px 50px -20px rgba(15,27,61,.35);
  --maxw:1240px;--gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{color-scheme:light}body{margin:0;font-family:Sansation,Lato,"Segoe UI",sans-serif;color:var(--ink);background:var(--white);font-size:17px;line-height:1.65;text-align:left}
img{max-width:100%;display:block;height:auto}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blue-d)}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:700;color:var(--navy)}
h1{font-size:clamp(2.2rem,5.2vw,4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem)}
p{margin:0 0 1em}
.cr{color:var(--gelb);white-space:nowrap}
.light .cr,p .cr,li .cr{color:var(--gelb-d)}
.dark .cr,.dark p .cr,.dark li .cr{color:var(--gelb)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:1rem}
.dark .eyebrow{color:var(--green)}
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--muted);max-width:760px}
.dark .lead{color:#c3cbe0}

/* ---------- header */
.topbar{background:var(--navy);color:#cfd6ea;font-size:.8rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:34px;flex-wrap:wrap}
.topbar strong{color:#fff;font-weight:700}
.topbar .tri{letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;color:#9fb0d8}
.topbar .tri b{color:var(--green);font-weight:700}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.site.scrolled{border-color:var(--line);box-shadow:0 8px 30px -18px rgba(15,27,61,.4)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blue)}
.brand svg{width:44px;height:44px;flex:none}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand .bn{font-size:36px;font-weight:700;letter-spacing:.01em;line-height:1;white-space:nowrap}
.brand .bn .sig{display:inline-block;height:.698em;width:auto;vertical-align:baseline;margin-right:.22em}
.brand .bn sup{font-size:.4em;vertical-align:.95em;margin-left:1px;font-weight:400}
.brand{margin-right:18px}
.brand .bs{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:5px}
nav.main{display:flex;align-items:center;gap:4px}
nav.main a{text-decoration:none;color:var(--ink);font-size:.9rem;padding:8px 9px;white-space:nowrap;border-radius:8px;transition:background .2s,color .2s}
nav.main a:hover{background:var(--grau-2);color:var(--blue)}
nav.main a.on{color:var(--blue);font-weight:700}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff;text-decoration:none;padding:13px 22px;border-radius:999px;font-weight:700;font-size:.95rem;border:2px solid var(--blue);transition:transform .25s,background .25s,box-shadow .25s}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(42,75,155,.7)}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.ghost:hover{background:var(--blue);color:#fff}
.dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.dark .btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn.green{background:var(--green);border-color:var(--green);color:var(--navy)}
.btn.green:hover{background:#9cc649;border-color:#9cc649;color:var(--navy)}
.btn svg{width:16px;height:16px}
nav.main .btn{padding:9px 16px;margin-left:8px;font-size:.88rem;color:#fff}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.burger span{display:block;height:2px;background:var(--navy);margin:6px 0;transition:transform .3s,opacity .3s}
@media (max-width:1240px){
  .burger{display:block}
  nav.main{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px var(--gut) 24px;gap:2px;border-bottom:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(0,0,0,.3);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.3s}
  nav.main.open{transform:none;opacity:1;pointer-events:auto}
  nav.main a{padding:12px 6px;font-size:1rem;border-bottom:1px solid var(--grau-2);border-radius:0}
  nav.main .btn{margin:12px 0 0;justify-content:center;border-radius:999px}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media (max-width:640px){.topbar .tri{display:none}.brand .bn{font-size:28px}}

/* ---------- sections */
section{padding:clamp(70px,10vw,130px) 0;position:relative}
.light{background:var(--grau-2)}
.grey{background:var(--grau)}
.dark{background:var(--navy);color:#dfe4f2}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark a{color:#b9c8f0}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--r);padding:28px;box-shadow:0 1px 0 var(--line),0 20px 40px -32px rgba(15,27,61,.5);transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 30px 50px -30px rgba(15,27,61,.55)}
.dark .card{background:var(--navy-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.card h3{margin-bottom:.4em}
.card .num{font-size:.8rem;letter-spacing:.2em;color:var(--green);font-weight:700}
.figure{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.figure img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:.85rem;color:var(--muted);padding:12px 4px 0}
.dark figcaption{color:#9fb0d8}
.rule{height:1px;background:var(--line);margin:40px 0}
ul.check{list-style:none;padding:0;margin:0 0 1.2em}
ul.check li{position:relative;padding-left:30px;margin-bottom:.6em}
ul.check li:before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--green);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/></svg>");}
ul.check li:after{content:"";position:absolute;left:5px;top:calc(.45em + 4px);width:6px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.note{border-left:4px solid var(--gelb);background:#fff8e6;padding:18px 22px;border-radius:0 10px 10px 0;margin:1.5em 0;color:#4a3a10}
.dark .note{background:rgba(224,168,26,.1);color:#f3e2b5}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--grau);color:var(--navy);font-weight:700}
.h-stat{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;color:var(--blue);line-height:1}
.dark .h-stat{color:var(--gelb)}

/* ---------- hero */
.hero{min-height:min(92vh,880px);display:flex;align-items:center;color:#fff;overflow:hidden;padding:120px 0 90px;background:var(--navy)}
.hero .bg{position:absolute;inset:-6% 0 0 0;background-size:cover;background-position:center;opacity:.42;transform:scale(1.08);will-change:transform}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,27,61,.96) 0%,rgba(15,27,61,.8) 45%,rgba(15,27,61,.25) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:#fff;max-width:900px}
.hero .lead{color:#d5dcef;max-width:640px;margin-bottom:2rem}
.hero .motto{display:inline-flex;align-items:center;gap:12px;font-size:.85rem;letter-spacing:.26em;text-transform:uppercase;color:var(--green);margin-bottom:22px;font-weight:700}
.hero .motto:before{content:"";width:40px;height:2px;background:var(--green)}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .float{position:absolute;right:max(var(--gut),calc((100vw - var(--maxw))/2));bottom:70px;width:min(36vw,470px);z-index:2;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));border-radius:18px;overflow:hidden}
@media (max-width:1100px){.hero .float{display:none}}
.subhero{padding:120px 0 80px;min-height:auto}
.subhero h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.scrollhint{position:absolute;left:50%;bottom:24px;z-index:3;width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;transform:translateX(-50%)}
.scrollhint:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:sh 1.8s infinite}
@keyframes sh{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- reaction animation */
.reaction{background:linear-gradient(180deg,#0f1b3d,#13224b);border-radius:22px;padding:clamp(20px,3vw,40px);box-shadow:var(--shadow);color:#dfe4f2}
.reaction svg{width:100%;height:auto;display:block}
.reaction .legend{display:flex;flex-wrap:wrap;gap:18px;font-size:.82rem;color:#b5c0de;margin-top:14px}
.reaction .legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.rx-particle{opacity:0}
.reaction.play .rx-ca{animation:ca 6s ease-in-out infinite}
.reaction.play .rx-o{animation:ox 6s ease-in-out infinite}
.reaction.play .rx-h{animation:hh 6s ease-in-out infinite}
.reaction.play .rx-out{animation:out 6s ease-in-out infinite}
.reaction.play .rx-heat{animation:heat 2.4s ease-in-out infinite}
@keyframes ca{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}45%{opacity:1;transform:translate(0,92px)}55%,100%{opacity:0;transform:translate(0,92px)}}
@keyframes ox{0%,8%{opacity:0;transform:translate(0,0)}22%{opacity:1}50%{opacity:1;transform:translate(150px,64px)}58%,100%{opacity:0;transform:translate(150px,64px)}}
@keyframes hh{0%,14%{opacity:0;transform:translate(0,0)}28%{opacity:1}52%{opacity:1;transform:translate(-150px,64px)}60%,100%{opacity:0;transform:translate(-150px,64px)}}
@keyframes out{0%,52%{opacity:0;transform:translate(0,0) scale(.6)}62%{opacity:1;transform:translate(0,0) scale(1)}92%{opacity:1;transform:translate(0,-150px) scale(1)}100%{opacity:0;transform:translate(0,-170px) scale(1)}}
@keyframes heat{0%,100%{opacity:.35}50%{opacity:.9}}

/* ---------- steps / timeline */
.steps{counter-reset:s;display:grid;gap:22px}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}
.step .n{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:1.4rem;font-weight:700;box-shadow:0 10px 24px -10px rgba(42,75,155,.8)}
.dark .step .n{background:var(--green);color:var(--navy)}
.step h3{margin:.3em 0 .3em}

/* ---------- gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.gallery a{display:block;border-radius:12px;overflow:hidden;position:relative;background:#000}
.gallery a img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s}
.gallery a:hover img{transform:scale(1.06);opacity:.9}
.gallery .s3{grid-column:span 3}.gallery .s4{grid-column:span 4}.gallery .s5{grid-column:span 5}.gallery .s6{grid-column:span 6}.gallery .s7{grid-column:span 7}.gallery .s8{grid-column:span 8}.gallery .s12{grid-column:span 12}
.gallery .h1x{aspect-ratio:4/3}.gallery .h2x{aspect-ratio:3/4}.gallery .wide{aspect-ratio:16/9}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery>*{grid-column:span 1!important}.gallery .s12,.gallery .s8,.gallery .s7{grid-column:span 2!important}}

/* ---------- lightbox */
.lb{position:fixed;inset:0;background:rgba(8,14,32,.94);z-index:100;display:none;align-items:center;justify-content:center;padding:4vh 4vw;cursor:zoom-out}
.lb.open{display:flex;animation:fade .3s}
.lb img{max-height:92vh;max-width:92vw;width:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb button{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.l{transform:translateX(-40px)}.rv.r{transform:translateX(40px)}.rv.z{transform:scale(.94)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ---------- product tiles */
.prod{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 24px 50px -36px rgba(15,27,61,.6);transition:transform .4s,box-shadow .4s}
.prod:hover{transform:translateY(-6px);box-shadow:0 1px 0 var(--line),0 40px 60px -36px rgba(15,27,61,.6)}
.prod .pi{height:clamp(210px,21vw,270px);background:#f7f8fa;display:flex;align-items:center;justify-content:center;padding:18px}
.prod .pi img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;transition:transform .6s}
.prod:hover .pi img{transform:scale(1.05)}
.prod .pt{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod .pt h3{font-size:1.15rem;margin:0}
.prod .pt p{font-size:.95rem;color:var(--muted);margin:0}
.prod .pt a{margin-top:auto;font-weight:700;text-decoration:none;font-size:.92rem}

/* ---------- faq */
details.faq{background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 0 var(--line);overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;padding:22px 60px 22px 24px;font-weight:700;color:var(--navy);position:relative;font-size:1.05rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"";position:absolute;right:26px;top:50%;width:12px;height:12px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
details.faq[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
details.faq .a{padding:0 24px 22px;color:var(--ink)}

/* ---------- docs */
.doc{display:flex;gap:18px;align-items:center;background:#fff;border-radius:14px;padding:18px 20px;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 var(--line);transition:transform .25s,box-shadow .25s}
.doc:hover{transform:translateX(4px);box-shadow:0 1px 0 var(--line),0 14px 30px -20px rgba(15,27,61,.5);color:var(--ink)}
.doc .ic{width:48px;height:56px;flex:none;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;position:relative}
.doc .ic:after{content:"";position:absolute;top:0;right:0;border-width:0 12px 12px 0;border-style:solid;border-color:#fff #fff rgba(255,255,255,.35) rgba(255,255,255,.35)}
.doc .ic.sdb{background:var(--gelb-d)}
.doc b{display:block;color:var(--navy)}
.doc small{color:var(--muted)}
.lang{font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--blue);background:var(--grau-2);border-radius:6px;padding:3px 7px;margin-left:auto;flex:none}

/* ---------- cta band / crosslinks */
.band{background:linear-gradient(120deg,var(--blue),#1d3a82);color:#fff;border-radius:24px;padding:clamp(30px,5vw,60px);display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;overflow:hidden;position:relative}
.band h2{color:#fff}
.band p{color:#d5def5}
.band .ring{position:absolute;right:-80px;top:-80px;width:340px;opacity:.12}
@media (max-width:820px){.band{grid-template-columns:1fr}}
.xlink{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:18px;text-decoration:none;color:#fff;min-height:220px;position:relative;overflow:hidden;background:var(--navy-2);transition:transform .4s}
.xlink:hover{transform:translateY(-6px);color:#fff}
.xlink .bgi{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;transition:opacity .4s,transform 1s}
.xlink:hover .bgi{opacity:.4;transform:scale(1.06)}
.xlink>*{position:relative}
.xlink b{font-size:1.35rem}
.xlink span.u{margin-top:auto;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:700}

/* ---------- footer */
footer.site{background:#0a1430;color:#aeb8d4;padding:70px 0 0;font-size:.92rem}
footer.site a{color:#dfe5f5;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
@media (max-width:900px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{color:#fff;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px}
footer.site .slogan{font-size:1.3rem;color:#fff;font-weight:700;margin:16px 0 4px}
footer.site .fields{margin-top:60px;background:var(--blue);color:rgba(255,255,255,.75);font-size:.78rem;letter-spacing:.06em}
footer.site .fields .wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;padding-top:12px;padding-bottom:12px}
footer.site .fields b{color:#fff;border-bottom:2px solid var(--green);padding-bottom:2px}
footer.site .legal{padding:18px 0;font-size:.8rem;color:#7d89aa}
footer.site .legal .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .reaction .rx-particle{opacity:1}
}

.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}.hero .btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.reaction.big{max-width:1000px;margin:50px auto 0}

.video{border-radius:18px;overflow:hidden;background:#000;box-shadow:var(--shadow);max-width:100%}
.video video{width:100%;height:auto;display:block;aspect-ratio:16/9}
.topbar .langs{display:flex;gap:2px;margin-left:auto;margin-right:18px}
.topbar .langs a{color:#9fb0d8;text-decoration:none;font-size:.72rem;letter-spacing:.08em;padding:3px 6px;border-radius:5px}
.topbar .langs a:hover{color:#fff;background:rgba(255,255,255,.08)}
.topbar .langs a.on{color:#fff;font-weight:700;background:rgba(255,255,255,.12)}
@media (max-width:640px){.topbar .langs{margin-right:0}}
.btn .rg{font-size:.72em;font-weight:400;letter-spacing:.06em;opacity:.85}