/* Neue Bereiche „Was wir verbessern“ und „So läuft die Zusammenarbeit ab“.
   Gleiche Welt wie der Film-Einstieg: Anthrazit, Geist, Weiß, Farbe nur aus Fotos. */
.nb-fix,.nb-flow{--nb-ink:#f4f5f3;--nb-mute:#aeb9bf;--nb-dim:#7f8c92;--nb-line:#394146;--nb-out:cubic-bezier(.16,1,.3,1);--nb-io:cubic-bezier(.7,0,.2,1);background:#111517;color:var(--nb-ink)}

/* ───────────── 1 · Was wir verbessern ───────────── */
.nb-fix{padding:112px 0 96px;overflow:hidden}
.nb-fix-head{margin-bottom:46px}
.nb-fix-head h2{font-size:clamp(46px,5.8vw,92px);line-height:.97;letter-spacing:-.045em;margin-top:20px}
.nb-fix-head h2 span{color:var(--nb-dim)}
.nb-panels{width:min(1320px,calc(100% - 96px));margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nb-panel{position:relative;margin:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nb-media{position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate;background:#1a2124;container-type:inline-size}
.nb-photo,.nb-pixel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.nb-hold{position:absolute;left:0;right:0;top:0;height:auto;aspect-ratio:4/5;z-index:6;border:0;padding:0;background:transparent;cursor:default;touch-action:pan-x pan-y;-webkit-touch-callout:none}
.nb-hold:focus-visible{outline:2px solid #fff;outline-offset:4px}
.nb-panel figcaption{display:grid;gap:6px;padding:18px 2px 0}
.nb-tag{font-size:12px;letter-spacing:.11em;color:var(--nb-mute);text-transform:uppercase;white-space:nowrap}
.nb-swap{display:grid;overflow:hidden;font-size:clamp(30px,2.8vw,42px);line-height:1.08;letter-spacing:-.04em;padding-bottom:.06em}
.nb-swap>*{grid-area:1/1;font-style:normal;font-weight:500;transition:transform .35s var(--nb-out),opacity .25s}
.nb-swap em{color:var(--nb-dim)}
.nb-swap b{transform:translateY(105%);opacity:0}
.nb-panel.is-after .nb-swap em{transform:translateY(-105%);opacity:0;transition:transform .7s var(--nb-io) .35s,opacity .4s ease .5s}
.nb-panel.is-after .nb-swap b{transform:none;opacity:1;transition:transform .8s var(--nb-io) .4s,opacity .3s ease .45s}
.nb-panel .nb-photo{will-change:clip-path}

/* Gemeinsame Ebenen: altes Layout unten, neues oben. */
.nb-old,.nb-new{position:absolute;inset:0;pointer-events:none}
.nb-old{z-index:0;transition:opacity .35s}
.nb-photo{z-index:1}
.nb-pixel{z-index:2;image-rendering:pixelated}
.nb-new{z-index:3;opacity:0;transition:opacity .3s}
.nb-panel.is-after .nb-new{opacity:1;transition:opacity .8s var(--nb-out) .55s}
.nb-new-nav{position:absolute;left:6%;right:6%;top:5.5%;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:4.6cqw;letter-spacing:-.04em}
.nb-new-nav b{font-weight:600}
.nb-new-nav i{width:6.5cqw;height:2.4cqw;border-block:1.5px solid currentColor}

/* 01 Design: Das kleine Foto öffnet sich zum ganzen Bild. */
.nb-old-design{background:#e9e4cf;color:#2d2a7a;font-family:'Times New Roman',Times,serif;text-align:center}
.nb-old-design>*{position:absolute;transition:transform .4s,opacity .3s}
.nb-old-logo{left:0;right:0;top:5%;font-size:6.3cqw;color:#7b1d3c;letter-spacing:.05em}
.nb-old-links{left:5%;right:5%;top:15%;padding:1.8cqw 0;background:#a9a6c8;font-size:3.2cqw;color:#1c1a8a}
.nb-old-title{left:6%;right:6%;top:25.5%;font-size:5.4cqw;line-height:1.15;color:#a3171f}
.nb-old-text{left:54%;right:6%;top:46%;font-size:3.6cqw;line-height:1.3;text-align:left;color:#3d3a33}
.nb-old-counter{left:28%;right:28%;bottom:13.5%;padding:1.2cqw;background:#111;color:#4f4;font:3.2cqw/1 'Courier New',monospace}
.nb-old-ie{left:0;right:0;bottom:4.5%;font-size:2.8cqw;color:#6f6a5a;font-style:italic}
.nb-panel-design .nb-photo,.nb-panel-design .nb-pixel{clip-path:inset(44% 50% 20% 7%);transition:clip-path .45s var(--nb-out),filter .45s,opacity .3s}
.nb-panel-design .nb-photo{filter:saturate(.45) sepia(.35) contrast(.92);object-position:50% 30%}
.nb-panel-design .nb-pixel{object-position:50% 30%}
.nb-panel-design.is-after .nb-photo{clip-path:inset(0);filter:none;transition:clip-path 1.25s var(--nb-io) .15s,filter 1.2s ease .3s}
.nb-panel-design.is-after .nb-pixel{clip-path:inset(0);opacity:0;transition:clip-path 1.25s var(--nb-io) .15s,opacity .5s ease .55s}
.nb-panel-design.is-after .nb-old{opacity:0;transition:opacity .3s ease .85s}
.nb-panel-design.is-after .nb-old>*{opacity:0;transition:transform .9s var(--nb-out),opacity .45s ease}
.nb-panel-design.is-after .nb-old-logo{transform:translate(-12%,-140%) rotate(-7deg)}
.nb-panel-design.is-after .nb-old-links{transform:translate(18%,-160%) rotate(5deg);transition-delay:.05s}
.nb-panel-design.is-after .nb-old-title{transform:translate(-22%,-60%) rotate(-4deg);transition-delay:.08s}
.nb-panel-design.is-after .nb-old-text{transform:translate(40%,10%) rotate(8deg);transition-delay:.12s}
.nb-panel-design.is-after .nb-old-counter{transform:translate(-30%,160%) rotate(-10deg);transition-delay:.16s}
.nb-panel-design.is-after .nb-old-ie{transform:translate(20%,200%);transition-delay:.18s}
.nb-panel-design .nb-new{background:linear-gradient(180deg,#11151766,transparent 26%,transparent 50%,#111517d9)}
.nb-panel-design .nb-new strong{position:absolute;left:6%;right:6%;bottom:6%;font-size:10.5cqw;font-weight:500;line-height:1;letter-spacing:-.045em}

/* 02 Handy: Winzige Desktop-Seite wird zur Daumen-Bedienung. */
.nb-old-mobile{background:#e7e5df;overflow:hidden}
.nb-tiny-page{position:absolute;left:7%;right:7%;top:9%;bottom:30%;padding:4%;background:#fbfaf7;border:1px solid #c9c6bd;color:#3a3d6b;font-family:Arial,sans-serif;transition:transform .4s,opacity .3s}
.nb-tiny-page>b{display:block;font-size:3.3cqw;letter-spacing:.06em;color:#6a2238}
.nb-tiny-nav{display:flex;flex-wrap:wrap;gap:.6cqw 1.6cqw;margin:2.2cqw 0 3cqw;font-size:1.9cqw;color:#2440b8}
.nb-tiny-cols{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:2.6cqw;height:36%}
.nb-tiny-cols i{background:#d9d7cf}
.nb-tiny-cols i:first-child{background:transparent}
.nb-tiny-lines{display:grid;gap:1.4cqw;margin-top:4cqw}
.nb-tiny-lines i{height:1.2cqw;background:#d4d3cc}
.nb-tiny-lines i:nth-child(2n){width:82%}
.nb-tiny-lines i:last-child{width:46%}
.nb-thumb{position:absolute;left:44%;top:30%;width:19cqw;height:19cqw;border-radius:50%;background:radial-gradient(circle at 40% 38%,#ffffff70,#cfc3b480 60%);border:1px solid #ffffffa0;box-shadow:0 8px 24px #0003;animation:nb-thumb 2.6s ease-in-out infinite;transition:opacity .3s}
.nb-zoom{position:absolute;left:0;right:0;bottom:11%;text-align:center;font-size:3.6cqw;color:#62656a;letter-spacing:.02em}
.nb-panel-mobile .nb-photo{clip-path:inset(28.5% 63.5% 51% 11.5%);object-position:42% 22%;transition:clip-path .45s var(--nb-out)}
.nb-panel-mobile.is-after .nb-photo{clip-path:inset(0 0 39% 0);transition:clip-path 1.15s var(--nb-io) .1s}
.nb-panel-mobile.is-after .nb-old{opacity:0;transition:opacity .4s ease .7s}
.nb-panel-mobile.is-after .nb-tiny-page{transform:scale(1.7);opacity:0;transition:transform 1s var(--nb-io),opacity .6s ease .2s}
.nb-panel-mobile.is-after .nb-thumb{opacity:0;animation:none}
.nb-new-mobile{background:linear-gradient(180deg,#11151770,transparent 22%)}
.nb-new-sheet{position:absolute;left:0;right:0;bottom:0;height:39%;padding:6% 6% 6.5%;background:#15191b;display:flex;flex-direction:column;justify-content:space-between;transform:translateY(30%);transition:transform .3s}
.nb-panel-mobile.is-after .nb-new-sheet{transform:none;transition:transform .9s var(--nb-out) .55s}
.nb-new-sheet strong{font-size:8.4cqw;font-weight:500;line-height:1.02;letter-spacing:-.04em}
.nb-new-buttons{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.nb-new-buttons em{font-style:normal;display:grid;place-items:center;height:12.5cqw;border-radius:99px;background:#f4f5f3;color:#15191b;font-size:4.2cqw;font-weight:550;letter-spacing:-.02em}
.nb-new-buttons em+em{background:transparent;color:#f4f5f3;border:1px solid #f4f5f380}

/* 03 Ladezeit: zäher Aufbau gegen sofortige Schärfe. */
.nb-old-speed{z-index:4;transition:opacity .2s}
.nb-panel-speed .nb-media{background:#1b2225}
.nb-panel-speed .nb-photo{filter:blur(16px) saturate(.5) brightness(.8);transform:scale(1.12);clip-path:inset(0 0 58% 0);transition:filter .3s,transform .3s,clip-path .3s}
.nb-panel-speed.is-after .nb-photo{filter:none;transform:none;clip-path:inset(0);transition:filter .45s ease .15s,transform .6s var(--nb-out) .15s,clip-path .25s ease .1s}
.nb-load-bar{position:absolute;left:0;right:0;top:0;height:3px;background:#ffffff1a}
.nb-load-bar i{display:block;height:100%;width:0;background:#f4f5f3}
.nb-panel-speed:not(.is-after) .nb-load-bar i{animation:nb-crawl 6s cubic-bezier(.1,.7,.2,1) forwards}
.nb-panel-speed.is-after .nb-load-bar i{width:100%;transition:width .18s ease}
.nb-panel-speed.is-after .nb-old{opacity:0;transition:opacity .25s ease .25s}
.nb-spinner{position:absolute;left:calc(50% - 6cqw);top:calc(64% - 6cqw);width:12cqw;height:12cqw;border-radius:50%;border:2px solid #ffffff2e;border-top-color:#f4f5f3;animation:spin 1s linear infinite}
.nb-load-text{position:absolute;left:0;right:0;top:calc(64% + 10cqw);text-align:center;font-size:3.7cqw;color:var(--nb-mute)}
.nb-new-speed{background:linear-gradient(180deg,#11151766,transparent 26%,transparent 50%,#111517d9)}
.nb-new-speed strong{position:absolute;left:6%;right:6%;bottom:6%;font-size:10.5cqw;font-weight:500;line-height:1;letter-spacing:-.045em}
.nb-panel-speed.is-after .nb-photo{filter:brightness(1.3) contrast(1.04) saturate(1.05)}
.nb-ready{position:absolute;left:6%;top:15%;display:inline-flex;align-items:center;gap:2.6cqw;padding:2.6cqw 4cqw;border-radius:99px;background:#f4f5f3;color:#15191b;font-size:4cqw;font-weight:550;letter-spacing:-.02em;transform:translateY(40%);opacity:0;transition:transform .3s,opacity .3s}
.nb-ready i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#2f9e68;box-shadow:0 0 0 0 #2f9e6880;animation:nb-ping 1.8s ease-out infinite}
.nb-panel-speed.is-after .nb-ready{transform:none;opacity:1;transition:transform .6s var(--nb-out) .35s,opacity .4s ease .35s}


/* ───────────── 2 · So läuft die Zusammenarbeit ab ───────────── */
.nb-flow{--odo:clamp(150px,18vw,272px);--step:0}
.nb-flow-pin{padding:96px 0}
.nb-flow-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:6%;align-items:center}
.nb-flow-copy .eyebrow{color:var(--nb-mute)}
.nb-odo{display:none}
.nb-steps{list-style:none;margin:36px 0 0;padding:0;counter-reset:nb-step;display:grid;gap:28px}
.nb-steps li{counter-increment:nb-step;display:grid;gap:8px}
.nb-steps li:before{content:'0' counter(nb-step);font-size:11px;letter-spacing:.11em;color:var(--nb-mute)}
.nb-steps b{font-size:clamp(30px,3.2vw,48px);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.nb-steps span{font-size:15px;line-height:1.5;color:var(--nb-mute)}
.nb-progress{display:none}
.nb-stage{position:relative;height:min(74svh,680px);min-height:440px;overflow:hidden;container-type:size;--dw:min(44cqw,50cqh);--off:calc(var(--dw) * .55);--fw:min(62cqw,56cqh);background:none}
.nb-scene-talk{position:absolute;inset:0;margin:0;z-index:3;clip-path:inset(0);transition:clip-path .9s var(--nb-io)}
.nb-scene-talk img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1);transition:transform 1.4s var(--nb-out)}
.nb-scene-talk figcaption{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border-radius:99px;background:#111517c7;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12px;color:#e7ece9}
.nb-live-dot{width:7px;height:7px;border-radius:50%;background:#2f9e68;animation:nb-ping 1.8s ease-out infinite}
.nb-stage:not([data-scene="0"]) .nb-scene-talk{clip-path:inset(0 0 100% 0)}
.nb-stage:not([data-scene="0"]) .nb-scene-talk img{transform:scale(1.08) translateY(-4%)}

.nb-drafts{position:absolute;inset:0;z-index:1}
.nb-draft{position:absolute;top:calc(48cqh - var(--dw) * 2 / 3);left:calc(50cqw - var(--dw) / 2);width:var(--dw);height:calc(var(--dw) * 4 / 3);overflow:hidden;container-type:inline-size;box-shadow:0 30px 60px #0007;opacity:0;transform:translateY(16%) scale(.9);transition:transform 1s var(--nb-out),opacity .7s ease,filter .7s ease,left 1s var(--nb-io),top 1s var(--nb-io),width 1s var(--nb-io),height 1s var(--nb-io)}
.nb-draft-a{left:calc(50cqw - var(--dw) / 2 - var(--off));z-index:1}.nb-draft-b{z-index:3}.nb-draft-c{left:calc(50cqw - var(--dw) / 2 + var(--off));z-index:2}
.nb-draft img{max-width:none}
.nb-d-nav{position:absolute;left:7%;right:7%;top:5.5%;z-index:2;display:flex;align-items:center;gap:4cqw;font-size:5cqw;letter-spacing:-.03em}
.nb-d-nav b{margin-right:auto;font-weight:600}
.nb-d-nav i{width:8cqw;height:1.2cqw;background:currentColor;opacity:.55}
.nb-d-label{position:absolute;right:5%;bottom:4.5%;z-index:3;padding:1.8cqw 3.4cqw;border-radius:99px;background:#111517cc;color:#f4f5f3;font-size:3.6cqw;letter-spacing:.02em}
.nb-draft-a{background:#f2eee6;color:#2a2925}
.nb-d-body{position:absolute;inset:18% 0 0;display:grid;grid-template-columns:1fr 1fr}
.nb-d-body strong{align-self:center;padding:0 0 0 7%;font-size:8.4cqw;font-weight:500;line-height:1.02;letter-spacing:-.045em}
.nb-d-body img{width:100%;height:100%;object-fit:cover;object-position:52% 30%}
.nb-draft-b{background:#0f1314;color:#fff}
.nb-draft-b>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88}
.nb-draft-b:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0006,transparent 30%,transparent 45%,#000c)}
.nb-draft-b>strong{position:absolute;left:7%;bottom:21%;z-index:2;font-size:11.5cqw;font-weight:500;line-height:.98;letter-spacing:-.045em}
.nb-d-btn{position:absolute;left:7%;bottom:8%;z-index:2;padding:2.6cqw 4.4cqw;border-radius:99px;background:#fff;color:#111;font-size:3.6cqw;font-weight:550}
.nb-d-heart{position:absolute;left:6%;top:16%;z-index:4;display:inline-flex;align-items:center;gap:2cqw;padding:2.2cqw 3.8cqw 2.2cqw 3cqw;border-radius:99px;background:#fff;color:#111517;font-size:4cqw;font-weight:550;transform:scale(0);transform-origin:left center;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.nb-d-heart svg{width:4.6cqw;height:4.6cqw;fill:#d0587a}
.nb-draft-c{background:#e7e1d5;color:#2b2824}
.nb-draft-c>img{position:absolute;left:0;top:0;width:100%;height:60%;object-fit:cover;object-position:40% 25%}
.nb-draft-c .nb-d-nav{color:#fff}
.nb-draft-c>strong{position:absolute;left:7%;top:66%;font-size:10cqw;font-weight:500;line-height:1;letter-spacing:-.045em}

.nb-stage[data-scene="1"] .nb-draft,.nb-stage[data-scene="2"] .nb-draft,.nb-stage[data-scene="3"] .nb-draft-b{opacity:1}
.nb-stage[data-scene="1"] .nb-draft-a{transform:rotate(-5deg) translateY(3%)}
.nb-stage[data-scene="1"] .nb-draft-b{transform:translateY(-2%);transition-delay:.1s}
.nb-stage[data-scene="1"] .nb-draft-c{transform:rotate(5deg) translateY(3%);transition-delay:.2s}
.nb-stage[data-scene="2"] .nb-draft-a{transform:translateX(-14%) rotate(-7deg) scale(.86);filter:grayscale(.7) brightness(.45);opacity:.85}
.nb-stage[data-scene="2"] .nb-draft-c{transform:translateX(14%) rotate(7deg) scale(.86);filter:grayscale(.7) brightness(.45);opacity:.85}
.nb-stage[data-scene="2"] .nb-draft-b{transform:scale(1.1);box-shadow:0 0 0 2px #f4f5f3,0 40px 80px #000a}
.nb-stage[data-scene="2"] .nb-d-heart,.nb-stage[data-scene="3"] .nb-d-heart{transform:scale(1);transition-delay:.35s}
.nb-stage[data-scene="3"] .nb-draft-a{transform:translateX(-80%) rotate(-12deg);opacity:0}
.nb-stage[data-scene="3"] .nb-draft-c{transform:translateX(80%) rotate(12deg);opacity:0}
.nb-stage[data-scene="3"] .nb-draft-b{left:calc(50cqw - var(--fw) / 2);top:calc(45cqh - var(--fw) * 2 / 3);width:var(--fw);height:calc(var(--fw) * 4 / 3);transform:none}

.nb-approve{position:absolute;left:0;right:0;bottom:5.5%;z-index:5;display:flex;justify-content:center;pointer-events:none}
.nb-approve-btn{position:relative;display:grid;place-items:center;min-width:190px;height:54px;padding:0 26px;border-radius:99px;background:#f4f5f3;color:#111517;font-size:15px;font-weight:550;letter-spacing:-.02em;box-shadow:0 18px 40px #0009;opacity:0;transform:translateY(30px) scale(.9)}
.nb-approve-btn>span{grid-area:1/1;display:inline-flex;align-items:center;gap:9px}
.nb-approve-done{opacity:0}
.nb-approve-done svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:110;stroke-dashoffset:110}
.nb-approve-btn:after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid #f4f5f3;opacity:0}
.nb-stage[data-scene="3"] .nb-approve-btn{animation:nb-approve 1.5s var(--nb-out) .55s both}
.nb-stage[data-scene="3"] .nb-approve-idle{animation:nb-out .2s ease 1.35s both}
.nb-stage[data-scene="3"] .nb-approve-done{animation:nb-in .3s ease 1.4s both}
.nb-stage[data-scene="3"] .nb-approve-done svg{animation:nb-draw .5s var(--nb-out) 1.45s both}
.nb-stage[data-scene="3"] .nb-approve-btn:after{animation:nb-ring 1s ease-out 1.4s both}

/* Scroll-Szene: nur mit JavaScript, genügend Höhe und ohne reduzierte Bewegung. */
.nb-flow.is-live .nb-flow-track{height:290svh}
.nb-flow.is-live .nb-flow-pin{position:sticky;top:0;height:100svh;padding:0;display:flex;align-items:center;overflow:hidden}
.nb-flow.is-live .nb-flow-grid{width:min(1320px,calc(100% - 96px))}
.nb-flow.is-live .nb-flow-count{display:grid;grid-template-columns:auto;margin-top:26px}
.nb-flow.is-live .nb-odo{display:block;height:var(--odo);overflow:hidden;font-size:var(--odo);line-height:1;font-weight:400;letter-spacing:-.08em;margin-left:-.06em}
.nb-odo-reel{transform:translateY(calc(var(--step) * var(--odo) * -1));transition:transform 1.05s cubic-bezier(.75,0,.15,1.12)}
.nb-odo-reel>span{display:flex;align-items:center;height:var(--odo)}
.nb-odo svg{width:.74em;height:.74em;fill:none;stroke:var(--nb-ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;margin-left:.06em}
.nb-flow.is-live .nb-steps{display:grid;margin-top:22px;gap:0}
.nb-flow.is-live .nb-steps li{grid-area:1/1;opacity:0;transform:translateY(22px);transition:opacity .35s ease,transform .5s var(--nb-out)}
.nb-flow.is-live .nb-steps li:before{display:none}
.nb-flow.is-live .nb-steps li.is-past{transform:translateY(-22px)}
.nb-flow.is-live .nb-steps li.is-active{opacity:1;transform:none;transition:opacity .6s ease .25s,transform .8s var(--nb-out) .25s}
.nb-flow.is-live .nb-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:40px;max-width:420px}
.nb-progress i{height:2px;background:var(--nb-line);overflow:hidden;position:relative}
.nb-progress i:after{content:'';position:absolute;inset:0;background:var(--nb-ink);transform:scaleX(var(--fill,0));transform-origin:left}

/* Danach: Übergabe in einem ruhigen Bild. */
.nb-handover{padding:24px 0 100px}
.nb-handover-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7%;align-items:center;padding-top:64px;border-top:1px solid var(--nb-line)}
.nb-handover-photo{margin:0;aspect-ratio:1;max-height:540px;overflow:hidden;clip-path:inset(10% 14% 10% 14%);transition:clip-path 1.4s var(--nb-io)}
.nb-handover-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.18);transition:transform 1.8s var(--nb-out)}
.nb-handover-copy .eyebrow{color:var(--nb-mute)}
.nb-handover-copy h3{display:grid;margin:20px 0 34px;font-size:clamp(36px,4.3vw,66px);line-height:1.02;letter-spacing:-.045em}
.nb-handover-copy h3 span{display:block;opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform 1s var(--nb-out)}
.nb-handover-copy h3 span:first-child{color:var(--nb-dim)}
.nb-care{list-style:none;margin:0 0 38px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.nb-care li{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 13px;border:1px solid var(--nb-line);border-radius:99px;font-size:13px;color:#dfe5e2;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .6s var(--nb-out)}
.nb-care li:before{content:'';width:9px;height:5px;margin-top:-3px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.nb-cta{display:inline-flex;align-items:center;gap:22px;padding:16px 22px;border-radius:99px;background:#f4f5f3;color:#111517;font-size:14px;font-weight:550;transition:transform .25s var(--nb-out),background .2s}
.nb-cta:hover{transform:translateY(-2px);background:#fff}
.nb-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
.nb-handover.is-in .nb-handover-photo{clip-path:inset(0)}
.nb-handover.is-in .nb-handover-photo img{transform:scale(1)}
.nb-handover.is-in h3 span{opacity:1;transform:none}
.nb-handover.is-in h3 span+span{transition-delay:.25s}
.nb-handover.is-in .nb-care li{opacity:1;transform:none}
.nb-care li:nth-child(1){transition-delay:.5s}.nb-care li:nth-child(2){transition-delay:.6s}.nb-care li:nth-child(3){transition-delay:.7s}.nb-care li:nth-child(4){transition-delay:.8s}

/* Ohne JavaScript bleibt alles im Endzustand sichtbar. */
html:not(.js) .nb-panel .nb-new{opacity:1}
html:not(.js) .nb-panel .nb-old,html:not(.js) .nb-pixel{display:none}
html:not(.js) .nb-panel .nb-photo{clip-path:none;filter:none;transform:none}
html:not(.js) .nb-swap b,html:not(.js) .nb-panel figcaption>s{opacity:1;transform:none}html:not(.js) .nb-swap em{opacity:0}
html:not(.js) .nb-care li,html:not(.js) .nb-handover-copy h3 span{opacity:1;transform:none}
html:not(.js) .nb-handover-photo{clip-path:none}
html:not(.js) .nb-handover-photo img{transform:none}

@keyframes nb-thumb{0%,100%{transform:translate(0,0)}25%{transform:translate(-55%,-62%)}50%{transform:translate(18%,-38%)}75%{transform:translate(-30%,30%)}}
@keyframes nb-crawl{0%{width:0}35%{width:22%}70%{width:31%}100%{width:38%}}
@keyframes nb-ping{0%{box-shadow:0 0 0 0 #2f9e6899}80%,100%{box-shadow:0 0 0 7px #2f9e6800}}
@keyframes nb-breathe{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes nb-approve{0%{opacity:0;transform:translateY(30px) scale(.9)}35%{opacity:1;transform:none}52%{transform:scale(.93)}62%,100%{opacity:1;transform:none}}
@keyframes nb-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes nb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nb-draw{to{stroke-dashoffset:0}}
@keyframes nb-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.7)}}

@media(max-width:1000px){
  .nb-panels{width:calc(100% - 48px);gap:10px}
  .nb-flow{--odo:clamp(120px,17vw,170px)}
  .nb-stage{height:min(64svh,600px);--dw:min(58cqw,50cqh);--off:calc(var(--dw) * .36);--fw:min(84cqw,58cqh)}
  .nb-flow.is-live .nb-flow-grid{width:calc(100% - 48px)}
}
@media(max-width:650px){
  .nb-fix{padding:64px 0 60px}
  .nb-fix-head{margin-bottom:28px}
  .nb-fix-head h2{font-size:clamp(38px,11vw,50px);margin-top:14px}
  .nb-panels{width:auto;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .nb-panels::-webkit-scrollbar{display:none}
  .nb-panel{flex:0 0 86%;scroll-snap-align:center}
  .nb-panel figcaption{padding-top:16px;row-gap:8px}
  .nb-swap{font-size:32px}
      .nb-flow{--odo:min(112px,24vw)}
  .nb-flow-pin{padding:60px 0}
  .nb-flow-grid{grid-template-columns:1fr;gap:30px}
  .nb-stage{height:auto;min-height:0;aspect-ratio:4/5}
  .nb-flow.is-live .nb-flow-grid{width:calc(100% - 40px);height:100%;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:18px;padding-block:18px}
  .nb-flow.is-live .nb-flow-count{grid-template-columns:auto 1fr;align-items:center;gap:16px;margin-top:14px}
  .nb-flow.is-live .nb-steps{margin-top:0}
  .nb-flow.is-live .nb-steps b{font-size:29px}
  .nb-flow.is-live .nb-steps span{font-size:13px;line-height:1.4}
  .nb-flow.is-live .nb-progress{margin-top:14px;max-width:none}
  .nb-flow.is-live .nb-stage{flex:1 1 auto;aspect-ratio:auto;height:auto;min-height:300px;max-height:540px}
  .nb-stage{--dw:min(56cqw,52cqh);--off:calc(var(--dw) * .38);--fw:min(80cqw,58cqh)}
  .nb-approve-btn{min-width:170px;height:50px;font-size:14px}
  .nb-scene-talk figcaption{left:14px;bottom:14px;font-size:11px}

  .nb-handover{padding:10px 0 64px}
  .nb-handover-grid{grid-template-columns:1fr;gap:30px;padding-top:44px}
  .nb-handover-photo{aspect-ratio:4/3.6}
  .nb-handover-copy h3{font-size:36px;margin:14px 0 24px}
  .nb-care{margin-bottom:28px}
  .nb-cta{width:100%;justify-content:space-between;padding:17px 22px}
}
@media(min-width:651px) and (max-height:620px){.nb-flow.is-live .nb-flow-track{height:auto}.nb-flow.is-live .nb-flow-pin{position:relative;height:auto;padding:80px 0}}
@media(prefers-reduced-motion:reduce){
  .nb-panel .nb-old,.nb-pixel,.nb-thumb,.nb-spinner{animation:none!important}
  .nb-live-dot,.nb-ready i,  .nb-handover-photo{clip-path:none}.nb-handover-photo img{transform:none}
}