/* Neue Seite: Alles unterhalb des Film-Einstiegs. Gleiche Welt: Anthrazit, Geist, Weiß, Farbe nur aus Fotos. */
:root{--ns-ink:#f4f5f3;--ns-mute:#aeb9bf;--ns-dim:#7f8c92;--ns-line:#2c3539;--ns-line-2:#3d484d;--ns-panel:#161c1f;--ns-out:cubic-bezier(.16,1,.3,1);--ns-io:cubic-bezier(.7,0,.2,1);interpolate-size:allow-keywords}
.ns-idea,.ns-compare,.ns-team,.ns-faq,.ns-contact,.ns-foot{background:#111517;color:var(--ns-ink)}
.ns-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:46px}
.ns-head h2{font-size:clamp(44px,5.6vw,88px);line-height:.97;letter-spacing:-.045em;margin-top:20px}
.ns-head .eyebrow,.ns-faq-side .eyebrow,.ns-contact-copy .eyebrow{color:var(--ns-mute)}
.ns-head-note{max-width:330px;font-size:15px;line-height:1.55;color:var(--ns-mute);padding-bottom:10px}
.js [data-ns-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1.2s var(--ns-out)}
.js [data-ns-reveal].is-in{opacity:1;transform:none}

/* Schwebende Leiste nach dem Film */
.ns-float{position:fixed;z-index:50;top:16px;left:50%;display:flex;align-items:center;gap:2px;padding:6px 6px 6px 16px;border:1px solid #ffffff1c;border-radius:99px;background:#111517d1;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);color:var(--ns-ink);font-size:13px;box-shadow:0 16px 40px #0006;transform:translate(-50%,-160%);visibility:hidden;transition:transform .7s var(--ns-out),visibility 0s .7s}
.ns-float.is-on{transform:translate(-50%,0);visibility:visible;transition:transform .7s var(--ns-out),visibility 0s}
.ns-float a{padding:10px 13px;border-radius:99px;color:var(--ns-mute);transition:color .2s,background .2s;white-space:nowrap}
.ns-float a:hover,.ns-float a.is-current{color:var(--ns-ink);background:#ffffff12}
.ns-float .ns-float-mark{display:grid;place-items:center;padding:6px 14px 6px 0;margin-right:4px;border-right:1px solid #ffffff1c;border-radius:0;color:var(--ns-ink);background:none!important}
.ns-float-mark svg{width:26px;height:22px;--logo-cutout:#111517}
.ns-float .ns-float-cta{margin-left:6px;padding:10px 16px;background:var(--ns-ink);color:#111517;font-weight:550}
.ns-float .ns-float-cta:hover{background:#fff;color:#111517}
.ns-float a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 1 · Idee: Satz, der beim Scrollen aufleuchtet */
.ns-idea{padding:140px 0 90px}
.ns-idea-text{max-width:1180px;font-size:clamp(34px,5vw,78px);line-height:1.08;letter-spacing:-.04em;font-weight:500;text-wrap:pretty}
.js .ns-idea-text .ns-w{opacity:.3;transition:opacity .45s ease}
.js .ns-idea-text .ns-w.is-lit{opacity:1}
.js .js .js .js 
/* Die übernommenen neuen Bereiche ohne doppelte Linien */
.ns-page .nb-fix{padding-top:40px;border-top:0}
.ns-page .nb-flow{border-top:0}

/* 2 · Vorher/Nachher: der Monitor der Original-Website, hier nur mit eigener Überschrift */
.ns-page .comparison-section{padding:100px 0 60px}
.ns-page .comparison-heading h2{font-size:clamp(44px,5.6vw,88px);line-height:.97;letter-spacing:-.045em}
.ns-page .comparison-heading .eyebrow{color:var(--ns-mute)}

/* 3 · Team: klein, warm, wie eine Familie */
.ns-team{padding:90px 0 80px}
.ns-team-wrap{width:min(940px,calc(100% - 96px))}
.ns-team-top{display:grid;justify-items:center;gap:12px;text-align:center;margin-bottom:38px}
.ns-team-top .eyebrow{color:var(--ns-mute)}
.ns-team-top h2{font-size:clamp(26px,2.6vw,38px);line-height:1.1;letter-spacing:-.04em;color:var(--ns-mute);font-weight:500}
.ns-family{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:clamp(12px,2.4vw,34px)}
.ns-family>li{flex:0 0 auto;min-width:0;display:flex;justify-content:center}
.ns-member,.ns-person-btn{margin:0;display:grid;justify-items:center;gap:5px;text-align:center}
.ns-person-btn{padding:0;border:0;background:none;color:inherit;cursor:pointer}
.ns-member img,.ns-person-btn img,.ns-member-empty>span{width:clamp(76px,9.4vw,108px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center 22%;background:#1b2225;margin-bottom:8px;transition:transform .5s var(--ns-out),box-shadow .4s}
.ns-member-empty>span{display:grid;place-items:center;border:1px solid var(--ns-line-2);font-size:24px;color:#93a2a9;letter-spacing:-.04em}
.ns-member:hover img,.ns-person-btn:hover img{transform:translateY(-4px) scale(1.04)}
.ns-person-btn img{box-shadow:0 0 0 2px #111517,0 0 0 3.5px #f4f5f3}
.ns-person-btn:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px}
.ns-family strong{font-size:15px;font-weight:500;letter-spacing:-.02em}
.js .ns-team-wrap[data-ns-reveal]{opacity:1;transform:none}
.js .ns-team-top,.js .ns-family>li,.js .js .ns-team-wrap.is-in .ns-team-top,.js .ns-team-wrap.is-in .ns-family>li,.js .ns-team-wrap.is-in .ns-family>li:nth-child(1){transition-delay:.1s}.ns-family>li:nth-child(2){transition-delay:.2s}.ns-family>li:nth-child(3){transition-delay:.3s}.ns-family>li:nth-child(4){transition-delay:.4s}.ns-family>li:nth-child(5){transition-delay:.5s}.ns-family>li:nth-child(6){transition-delay:.6s}

/* 4 · Fragen */
.ns-faq{padding:110px 0}
.ns-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:8%;align-items:start}
.ns-faq-side{position:sticky;top:110px}
.ns-faq-side h2{font-size:clamp(44px,5vw,80px);line-height:.97;letter-spacing:-.045em;margin:20px 0 26px}
.ns-faq-side p:last-child{font-size:14px;color:var(--ns-mute)}
.ns-faq-side a{color:var(--ns-ink);border-bottom:1px solid #ffffff55;padding-bottom:2px}
.ns-faq-list details{border-top:1px solid var(--ns-line-2)}
.ns-faq-list details:last-child{border-bottom:1px solid var(--ns-line-2)}
.ns-faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.03em;line-height:1.3;transition:color .25s,padding .35s var(--ns-out)}
.ns-faq-list summary::-webkit-details-marker{display:none}
.ns-faq-list summary:hover{color:#fff;padding-left:8px}
.ns-faq-list summary i{position:relative;flex:none;width:34px;height:34px;border:1px solid var(--ns-line-2);border-radius:50%;transition:transform .45s var(--ns-out),background .3s,border-color .3s}
.ns-faq-list summary i:before,.ns-faq-list summary i:after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor}
.ns-faq-list summary i:after{transform:rotate(90deg)}
.ns-faq-list details[open] summary i{transform:rotate(45deg);background:var(--ns-ink);border-color:var(--ns-ink);color:#111517}
.ns-faq-list summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ns-faq-list details p{max-width:640px;padding:0 60px 28px 0;font-size:15px;line-height:1.65;color:var(--ns-mute)}
.ns-faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ns-out),content-visibility .5s allow-discrete}
.ns-faq-list details[open]::details-content{block-size:auto}
.ns-faq-list details[open] p{animation:ns-fade .6s ease both}

/* 5 · Kontakt */
.ns-contact{position:relative;isolation:isolate;padding:130px 0 120px;overflow:hidden}
.ns-contact-photo{position:absolute;z-index:-1;left:0;top:0;bottom:0;width:58%}
.ns-contact-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.08);transition:transform 2.4s var(--ns-out)}
.ns-contact.is-in .ns-contact-photo img{transform:none}
.ns-contact-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#11151726 0%,#11151784 48%,#111517 100%),linear-gradient(180deg,#111517 0%,transparent 18%,transparent 62%,#111517e6 100%)}
.ns-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;align-items:end}
.ns-contact-copy h2{font-size:clamp(44px,5.4vw,86px);line-height:.97;letter-spacing:-.045em;margin:20px 0 44px}
.ns-person{display:flex;align-items:center;gap:16px}
.ns-person img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center 20%}
.ns-person strong{display:block;font-size:17px;font-weight:500;letter-spacing:-.02em}
.ns-person a{font-size:14px;color:#cfd8da;border-bottom:1px solid #ffffff44}
.ns-contact-promise{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--ns-mute)}
.ns-contact-promise i{width:7px;height:7px;border-radius:50%;background:#2f9e68;animation:nb-ping 1.8s ease-out infinite}
.ns-form{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
.ns-field{display:grid;gap:6px}
.ns-field-full{grid-column:1/-1}
.ns-field label{font-size:12px;color:var(--ns-mute)}
.ns-field label span{color:#7f8b91}
.ns-field input,.ns-field textarea{width:100%;padding:10px 0 12px;border:0;border-radius:0;background:linear-gradient(var(--ns-ink),var(--ns-ink)) left bottom/0 1px no-repeat,linear-gradient(var(--ns-line-2),var(--ns-line-2)) left bottom/100% 1px no-repeat;color:var(--ns-ink);font-size:17px;letter-spacing:-.01em;outline:0;resize:vertical;transition:background-size .5s var(--ns-out)}
.ns-field input:focus,.ns-field textarea:focus{background-size:100% 1px,100% 1px}
.ns-field input::placeholder,.ns-field textarea::placeholder{color:#66737a}
.ns-form-note{grid-column:1/-1;font-size:11px;line-height:1.5;color:#7f8b91}
.ns-form-note a{text-decoration:underline}
.ns-submit{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border:0;border-radius:99px;background:var(--ns-ink);color:#111517;font-size:15px;font-weight:550;transition:transform .3s var(--ns-out),background .2s}
.ns-submit:hover{background:#fff;transform:translateY(-2px)}
.ns-submit:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* 6 · Abschluss */
.ns-foot{padding:70px 0 34px;border-top:1px solid var(--ns-line);overflow:hidden}
.ns-mark{display:flex;justify-content:space-between;font-size:clamp(56px,15.6vw,250px);font-weight:500;line-height:.82;letter-spacing:-.075em;overflow:hidden;padding-bottom:.06em}
.ns-mark span{display:inline-block}
.ns-mark span:last-child{color:var(--ns-dim)}
.js .ns-mark span{transform:translateY(105%);transition:transform 1.1s var(--ns-out)}
.js .ns-foot.is-in .ns-mark span{transform:none}
.ns-mark span:nth-child(1){transition-delay:0.000s}.ns-mark span:nth-child(2){transition-delay:0.045s}.ns-mark span:nth-child(3){transition-delay:0.090s}.ns-mark span:nth-child(4){transition-delay:0.135s}.ns-mark span:nth-child(5){transition-delay:0.180s}.ns-mark span:nth-child(6){transition-delay:0.225s}.ns-mark span:nth-child(7){transition-delay:0.270s}.ns-mark span:nth-child(8){transition-delay:0.315s}.ns-mark span:nth-child(9){transition-delay:0.360s}.ns-mark span:nth-child(10){transition-delay:0.405s}.ns-mark span:nth-child(11){transition-delay:0.450s}.ns-mark span:nth-child(12){transition-delay:0.495s}
.ns-foot-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:38px;padding-top:24px;border-top:1px solid var(--ns-line);font-size:12px;color:var(--ns-mute)}
.ns-foot-row nav{display:flex;gap:26px}
.ns-foot-row a:hover{color:var(--ns-ink)}

@keyframes ns-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media(max-width:1000px){
  .ns-team-wrap{width:calc(100% - 48px)}
  .ns-compare-frame{width:calc(100% - 48px)}
  .ns-faq-grid{grid-template-columns:1fr;gap:30px}
  .ns-faq-side{position:static}
  .ns-contact-grid{grid-template-columns:1fr;gap:50px}
  .ns-contact-photo{width:100%;bottom:auto;height:520px}
  .ns-float a:not(.ns-float-mark):not(.ns-float-cta){display:none}
}
@media(max-width:650px){
  .ns-head{display:block;margin-bottom:28px}
  .ns-head h2{font-size:clamp(38px,11vw,50px);margin-top:14px}
  .ns-head-note{margin-top:16px;padding:0;font-size:14px}
  .ns-idea{padding:90px 0 70px}
  .ns-idea-text{font-size:clamp(32px,9.4vw,42px);line-height:1.1}
  .ns-compare{padding:64px 0 56px}
  .ns-compare-frame{width:calc(100% - 40px)}
  .ns-compare-stage{aspect-ratio:4/5}
  .ns-divider span{width:46px;height:46px;margin:-23px 0 0 -23px}
  .ns-label{bottom:12px;font-size:10px}.ns-label-old{left:12px}.ns-label-new{right:12px}
  .ns-team{padding:52px 0 48px}
  .ns-team-wrap{width:calc(100% - 40px)}
  .ns-team-top{margin-bottom:28px}
  .ns-team-top h2{font-size:26px}
  .ns-family{flex-wrap:wrap;justify-content:center;gap:22px 8px}
  .ns-family>li{flex:0 0 calc((100% - 16px) / 3)}
  .ns-member img,.ns-person-btn img,.ns-member-empty>span{width:84px}
          .ns-faq{padding:64px 0}
  .ns-faq-side h2{font-size:44px;margin:14px 0 16px}
  .ns-faq-list summary{padding:20px 0;font-size:17px;gap:16px}
  .ns-faq-list summary:hover{padding-left:0}
  .ns-faq-list summary i{width:30px;height:30px}
  .ns-faq-list details p{padding-right:0;font-size:14px}
  .ns-contact{padding:0 0 60px}
  .ns-contact-photo{position:relative;height:auto;aspect-ratio:16/11}
  .ns-contact-photo:after{background:linear-gradient(180deg,#11151740 0%,transparent 40%,#111517 100%)}
  .ns-contact-grid{margin-top:-40px;gap:36px}
  .ns-contact-copy h2{font-size:42px;margin:14px 0 28px}
  .ns-form{grid-template-columns:1fr;gap:22px}
  .ns-foot{padding:50px 0 30px}
  .ns-foot-row{flex-direction:column;align-items:flex-start;gap:14px;margin-top:26px}
  .ns-float{top:auto;bottom:14px;transform:translate(-50%,160%)}
  .ns-float.is-on{transform:translate(-50%,0)}
}
@media(prefers-reduced-motion:reduce){
  .js .ns-idea-text .ns-w{opacity:1}
  .js [data-ns-reveal],.js .ns-team-top,.js .ns-family>li,.js .ns-mark span{opacity:1;transform:none}
  .ns-contact-photo img{transform:none}
}