/* lightparc – Designvorschau „next“: reduziert, systemnahe Typografie, scrollgesteuerte Animationen.
   Gilt nur für Seiten mit <body class="nx">. */
.nx{
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ink:#0E1A2B;--ink2:#3A4A5F;--muted:#3A4A5F;--paper:#F5F5F7;--line:#E2E2E7;
  --amber:#F5A742;--amber-text:#9A5800;--blue:#254A7A;--coral:#E8742A;
  background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased
}
.nx h1,.nx h2,.nx h3,.nx .display,.nx .h2,.nx .h3,.nx .h4{font-family:var(--serif);letter-spacing:-.025em;font-weight:700}
.nx .hdr{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.nx main{overflow-x:clip}
.nx-wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}
.nx-eyebrow{display:block;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--amber-text);margin:0 0 14px}
.nx-h1{font-size:clamp(42px,6.2vw,84px);line-height:1.02;margin:0;letter-spacing:-.04em}
.nx-h2{font-size:clamp(36px,5.2vw,64px);line-height:1.05;margin:0;letter-spacing:-.035em}
.nx-lead{font-size:clamp(19px,1.6vw,24px);line-height:1.45;color:var(--ink2);margin:22px 0 0;max-width:34ch;font-weight:500;letter-spacing:-.01em}
.nx-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.nx-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;font:600 16px/1 var(--sans);text-decoration:none;transition:transform .2s,background .2s}
.nx-btn:hover{background:#000;transform:translateY(-1px)}
.nx-btn.amber{background:var(--amber);color:var(--ink)}
.nx-link{font:600 17px/1.3 var(--sans);color:var(--blue);text-decoration:none}
.nx-link:hover{text-decoration:underline;text-underline-offset:4px}
.nx-link::after{content:" ›"}
.nx-sec{padding:clamp(96px,12vw,160px) 0}
.nx-grey{background:var(--paper)}
.nx-dark{background:#000;color:#F5F5F7}
.nx-dark .nx-h2,.nx-dark h3{color:#F5F5F7}
.nx-dark .nx-lead,.nx-dark p{color:#A1A1A6}
.nx-dark .nx-eyebrow{color:var(--amber)}
.nx-center{text-align:center}.nx-center .nx-lead{margin-left:auto;margin-right:auto}.nx-center .nx-btns{justify-content:center}

/* 1 · Hero mit Logo-Segmenten, die beim Scrollen auseinandertreten */
.nx-hero{position:relative;height:240vh;background:var(--paper)}
.nx-hero .pin{position:sticky;top:0;height:100vh;display:grid;align-items:center;overflow:hidden;padding-top:70px;box-sizing:border-box}
.nx-hero .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.nx-hero .copy{position:relative;min-height:420px}
.nx-hero .msg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;transition:none}
.nx-hero .m1{opacity:calc(1 - var(--p1,0));transform:translateY(calc(var(--p1,0) * -40px))}
.nx-hero .m2{opacity:var(--p2,0);transform:translateY(calc((1 - var(--p2,0)) * 40px));pointer-events:none}
.nx-hero.is-late .m2{pointer-events:auto}.nx-hero.is-late .m1{pointer-events:none}
.nx-hero svg{width:100%;height:auto;max-height:76vh;overflow:visible}
.nx-hero .q{transition:none;transform-box:fill-box}
.nx-hero .qtl{transform:translate(calc(var(--sp,0) * -26px),calc(var(--sp,0) * -26px))}
.nx-hero .qbl{transform:translate(calc(var(--sp,0) * -26px),calc(var(--sp,0) * 26px))}
.nx-hero .qbr{transform:translate(calc(var(--sp,0) * 26px),calc(var(--sp,0) * 26px))}
.nx-hero .qtr{transform:translate(calc(var(--sp,0) * 26px),calc(var(--sp,0) * -26px));opacity:var(--sp,0)}
.nx-hero .rim{opacity:calc(1 - var(--sp,0))}
.nx-hero .disc{transform-origin:200px 200px;transform:scale(calc(.94 + var(--p,0) * .06))}
.nx-hero .lbl{font:600 15px var(--sans);fill:var(--ink);opacity:var(--lp,0);letter-spacing:-.01em}
.nx-hero .lbl.dim{fill:var(--amber-text)}
.nx-hero .scrollhint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:600 13px var(--sans);color:var(--ink2);opacity:calc(1 - var(--p,0) * 4);display:flex;flex-direction:column;align-items:center;gap:8px}
.nx-hero .scrollhint i{width:22px;height:34px;border:2px solid var(--ink2);border-radius:12px;position:relative}
.nx-hero .scrollhint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--ink2);animation:nxwheel 1.6s ease-in-out infinite}
@keyframes nxwheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(9px)}}

/* 2 · Logos */
.nx-logos{padding:56px 0 24px;background:#fff}
.nx-logos p{font-size:14px;color:var(--ink2);text-align:center;margin:0 0 22px}
.nx-logos .marquee{border:0;background:transparent;box-shadow:none}
.nx-logos .marquee img{filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.nx-logos .marquee a:hover img{filter:none;opacity:1}
.nx-logos .refs{text-align:center;font-size:15px;color:var(--ink2);margin:20px auto 0;max-width:62ch}

/* 3 · Statement: Wörter füllen sich beim Scrollen */
.nx-say{position:relative;height:220vh;background:#fff}
.nx-say .pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:70px;box-sizing:border-box}
.nx-say p{font:700 clamp(30px,4.2vw,56px)/1.18 var(--serif);letter-spacing:-.03em;margin:0;max-width:22ch}
.nx-say .w{color:#D2D2D7;transition:color .25s}
.nx-say .w.on{color:var(--ink)}
.nx-say .w.hl.on{color:var(--amber-text)}

/* 4 · Karten */
.nx-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px}
.nx-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 26px 28px;background:#fff;border-radius:24px;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 30px -18px rgba(14,26,43,.18);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.nx-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 1px 0 rgba(0,0,0,.04),0 28px 50px -24px rgba(14,26,43,.32)}
.nx-card::before{content:"";width:36px;height:4px;border-radius:4px;background:var(--amber)}
.nx-card .tag{font-size:13px;font-weight:600;color:var(--amber-text);letter-spacing:0;text-transform:none}
.nx-card h3{font-size:24px;line-height:1.15;margin:0}
.nx-card p{font-size:16px;line-height:1.5;color:var(--ink2);margin:0;flex:1}
.nx-card .go{font-weight:600;color:var(--blue)}
.nx-card .go::after{content:" ›"}
.nx-rise{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.nx-rise.in{opacity:1;transform:none}
.nx-rise:nth-child(2){transition-delay:.08s}.nx-rise:nth-child(3){transition-delay:.16s}.nx-rise:nth-child(4){transition-delay:.24s}

/* 5 · Messe: Kamerafahrt von der Skizze zum Stand */
.nx-fair{position:relative;height:300vh;background:#000}
.nx-fair .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:24px;overflow:hidden;padding-top:100px;box-sizing:border-box}
.nx-fair .stage{position:relative;width:min(1240px,calc(100% - 48px));margin:0 auto;aspect-ratio:2056/765;max-height:54vh;border-radius:28px;overflow:hidden;background:#111}
.nx-fair .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:var(--ox,0%) 50%;transform:scale(var(--s,2.4));filter:grayscale(var(--g,1)) contrast(1.05)}
.nx-fair .steps{display:flex;justify-content:center;gap:clamp(18px,4vw,56px);margin:0;padding:0;list-style:none}
.nx-fair .steps li{font:600 clamp(15px,1.4vw,19px) var(--sans);color:#6E6E73;transition:color .3s}
.nx-fair .steps li b{display:block;font-size:13px;color:#6E6E73;margin-bottom:4px;font-weight:600}
.nx-fair .steps li.on{color:#F5F5F7}.nx-fair .steps li.on b{color:var(--amber)}
.nx-fair .head{text-align:center}
.nx-fair .kinote{position:absolute;right:14px;bottom:12px;font-size:11px;color:rgba(255,255,255,.7)}

/* 6 · Leistungen als Kacheln */
.nx-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:56px}
.nx-tile{grid-column:span 2;position:relative;display:flex;flex-direction:column;gap:10px;padding:30px 30px;border-radius:28px;background:#fff;min-height:250px;overflow:hidden;text-decoration:none;color:var(--ink)}
.nx-tile.wide{grid-column:span 3}
.nx-tile .no{font:700 48px/1 var(--serif);letter-spacing:-.04em;color:var(--line)}
.nx-tile h3{font-size:30px;margin:0;line-height:1.1}
.nx-tile p{margin:0;color:var(--ink2);font-size:17px;line-height:1.5}
.nx-tile ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.nx-tile li{font-size:14px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--paper);color:var(--ink2)}
.nx-tile.you{background:transparent;border:2px dashed var(--amber)}
.nx-tile.you .no{color:var(--amber)}
.nx-tile .seg{position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;opacity:.95}

/* 7 · Einsteigen */
.nx-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.nx-three a{display:flex;flex-direction:column;gap:10px;padding:32px 28px;border-radius:24px;background:#1D1D1F;color:#F5F5F7;text-decoration:none;transition:background .3s,transform .3s}
.nx-three a:hover{background:#2C2C2E;transform:translateY(-4px)}
.nx-three h3{font-size:24px;margin:0;color:#F5F5F7}
.nx-three p{margin:0;font-size:16px;line-height:1.5;color:#A1A1A6;flex:1}
.nx-three span{font-weight:600;color:var(--amber)}
.nx-three span::after{content:" ›"}

@media (max-width:980px){
  .nx-hero .grid{grid-template-columns:1fr;gap:0}
  .nx-hero .copy{min-height:330px}
  .nx-hero svg{max-height:38vh}
  .nx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-bento{grid-template-columns:1fr}.nx-tile,.nx-tile.wide{grid-column:auto;min-height:0}
  .nx-three{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nx-cards{grid-template-columns:1fr}
  .nx-hero .pin{align-items:start;padding-top:96px}
  .nx-fair .stage{border-radius:18px;width:calc(100% - 24px);aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .nx-hero,.nx-say,.nx-fair{height:auto}
  .nx-hero .pin,.nx-say .pin,.nx-fair .pin{position:relative;height:auto;min-height:0;padding:120px 0}
  .nx-hero .m1{display:none}.nx-hero .m2{position:relative;opacity:1;transform:none;pointer-events:auto}
  .nx-say .w{color:var(--ink)}
  .nx-rise{opacity:1;transform:none;transition:none}
  .nx-hero .scrollhint{display:none}
}
/* ---------- Pausieren und animieren: jeder Block hält kurz an ---------- */
@media (min-width:981px){
  .nx-pinsec{position:relative;height:var(--h,190vh)}
  .nx-pinsec>.pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:72px;box-sizing:border-box;overflow:hidden}
  .nx-pinsec>.pin>.nx-wrap{width:min(1120px,calc(100% - 48px))}
}
@media (max-width:980px){.nx-pinsec>.pin{padding:96px 0}}
.nx-pinsec.nx-grey{background:var(--paper)}
.nx-in{--t:clamp(0,calc((var(--p,0) - var(--i,0) * .1) / .22),1);opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 46px))}
.nx-fly{--t:clamp(0,calc((var(--p,0) - .12 - var(--i,0) * .11) / .3),1);opacity:var(--t);transform:translate(calc((1 - var(--t)) * var(--dx,0px)),calc((1 - var(--t)) * var(--dy,110px))) rotate(calc((1 - var(--t)) * (var(--i,0) - 1.5) * 5deg)) scale(calc(.9 + var(--t) * .1))}
.nx-card.nx-fly:hover,.nx-tile.nx-fly:hover{transform:translateY(-6px)}
.nx-tile.you.nx-fly{border-color:rgba(245,167,66,var(--t))}
.nx-flip{--t:clamp(0,calc((var(--p,0) - .1 - var(--i,0) * .14) / .3),1);opacity:var(--t);transform:perspective(1000px) rotateX(calc((1 - var(--t)) * 70deg)) translateY(calc((1 - var(--t)) * 60px));transform-origin:50% 100%}
.nx-three a.nx-flip:hover{transform:translateY(-4px)}

/* Hero: helles Hintergrundbild, leicht eingeblendet */
.nx-hero .bg{position:absolute;inset:0;z-index:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.nx-hero .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.7) brightness(1.35);opacity:.09;transform:scale(calc(1.14 - var(--p,0) * .14))}
.nx-hero .pin>.nx-wrap{position:relative;z-index:1}
.nx-hero .bgnote{position:absolute;right:16px;bottom:12px;font-size:11px;color:rgba(14,26,43,.45);z-index:1}

/* Zähler bei den Referenzen */
.nx-logos{background:#fff}
.nx-count{display:flex;align-items:baseline;gap:28px;justify-content:center;flex-wrap:wrap;margin:0 auto 48px;max-width:900px;text-align:left}
.nx-count b{font:700 clamp(96px,14vw,190px)/.9 var(--serif);letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.nx-count span{font:600 clamp(20px,2vw,28px)/1.3 var(--serif);letter-spacing:-.02em;color:var(--ink2);max-width:22ch}

/* Transformation: Mensch und Maschine, erst getrennt, dann vereint */
.nx-trans{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:center}
.nx-merge{position:relative;margin:0 auto;width:min(340px,100%)}
.nx-merge .halves{position:relative;aspect-ratio:1122/1402}
.nx-merge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:24px}
.nx-merge{--m:clamp(0,calc((var(--p,0) - .12) / .5),1)}
.nx-merge .hl{clip-path:inset(0 50% 0 0 round 24px 0 0 24px);transform:translateX(calc((1 - var(--m)) * -22%)) rotate(calc((1 - var(--m)) * -4deg))}
.nx-merge .hr{clip-path:inset(0 0 0 50% round 0 24px 24px 0);transform:translateX(calc((1 - var(--m)) * 22%)) rotate(calc((1 - var(--m)) * 4deg));filter:grayscale(calc(1 - var(--m))) brightness(calc(1.1 - var(--m) * .1)) hue-rotate(calc((1 - var(--m)) * 160deg))}
.nx-merge .tag{position:absolute;top:-34px;font:600 14px var(--sans);color:var(--ink2);opacity:calc(1 - var(--m) * 1.2)}
.nx-merge .tl{left:calc((1 - var(--m)) * -30% + 4%)}
.nx-merge .tr{right:calc((1 - var(--m)) * -30% + 4%)}
.nx-merge figcaption{font-size:11px;color:var(--ink2);margin-top:12px;text-align:center}

/* Netzwerk: Verbindungen zeichnen sich */
.nx-netgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.nx-net{width:100%;height:auto;overflow:visible}
.nx-net text{font:600 15px var(--sans);fill:var(--ink2)}
.nx-net .h1t{font-size:14px;fill:var(--ink)}
.nx-net .ln path{stroke-dasharray:260;--t:clamp(0,calc((var(--p,0) - .15 - var(--i,0) * .06) / .25),1);stroke-dashoffset:calc((1 - var(--t)) * 260)}
.nx-net .nd{--t:clamp(0,calc((var(--p,0) - .3 - var(--i,0) * .06) / .2),1);opacity:var(--t);transform-box:fill-box;transform-origin:center;transform:scale(calc(.4 + var(--t) * .6))}
.nx-net .hub{--t:clamp(0,calc(var(--p,0) / .15),1);transform-box:fill-box;transform-origin:center;transform:scale(calc(.3 + var(--t) * .7));opacity:var(--t)}

@media (max-width:980px){
  .nx-trans,.nx-netgrid{grid-template-columns:1fr;gap:48px}
  .nx-count{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .nx-pinsec{height:auto!important}.nx-pinsec>.pin{position:relative;height:auto;padding:120px 0}
  .nx-in,.nx-fly,.nx-flip,.nx-net .nd,.nx-net .hub{opacity:1!important;transform:none!important}
  .nx-net .ln path{stroke-dashoffset:0}
  .nx-merge .hl,.nx-merge .hr{transform:none;filter:none}.nx-merge .tag{display:none}
}
@media (min-width:981px){.nx-pinsec .nx-bento,.nx-pinsec .nx-cards,.nx-pinsec .nx-three{margin-top:40px}.nx-pinsec .nx-h2{font-size:clamp(34px,4.4vw,56px)}}
@media (min-width:981px){.nx-pinsec[data-anim="bento"]>.pin,.nx-pinsec[data-anim="cards"]>.pin{align-items:flex-start;padding-top:110px}}