@font-face{font-family:'InterHeroVar';src:url('fonts/inter-var-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}   /* v5: variable Inter, desktop hero only (optical weight match, research/desktop-v5/weight) */
/* Desktop v2 (Max 2026-09-30, MB task T-2026-09-30-e10fc5). Desktop only (>=941px); the phone never sees these blocks.
   Geometry = Cuberto @1440, measured: research/mechanic-analysis-desktop.md (M1 stack, M2 why block, M3 closing band).
   --u = Cuberto's rem (9px @1440 = 0.625vw), so every measured value is written as N * --u and scales with the screen. */
.dwho,.dwhy,.dfit,.d-outro,.dfoot,.klb-video{display:none}
@media (min-width:941px){
  :root{--u:clamp(7px,.625vw,12px);--dw:min(69.3vw,1128px)}

  /* ── S2: "Für wen wir arbeiten" (Cuberto What we do + FeatureSection) ── */
  #studio{padding:calc(15*var(--u)) 0}
  #studio > .wrap{max-width:none;padding:0}
  .dwho{display:block;width:var(--dw);margin:0 auto}
  .dwho-intro{display:grid;grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr);align-items:start}
  .dwho-label,.dwhy-label{font-size:calc(1.6*var(--u));line-height:1.1;font-weight:400;letter-spacing:0;margin:.35em 0 0;color:var(--ink)}
  .dwho-para,.dwhy-para{font-size:calc(2.56*var(--u));line-height:1.3;font-weight:400;letter-spacing:0;max-width:calc(69*var(--u));margin:0;color:var(--ink);text-wrap:pretty}
  .dwho-para strong{font-weight:500}
  .dstack{list-style:none;margin:calc(12*var(--u)) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--u);counter-reset:none}
  .dstack-item{--p:0;position:relative;overflow:hidden;border-radius:calc(2*var(--u));padding:calc(6*var(--u));color:rgb(var(--tc,23,23,27))}
  .dstack-item.is-first{--p:1}
  .dstack-fill{position:absolute;inset:0;border-radius:inherit;background:rgb(var(--fc,238,238,238))}
  .dstack-art{position:absolute;right:0;bottom:0;top:0;width:52%;opacity:var(--p);pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48%);mask-image:linear-gradient(90deg,transparent 0,#000 48%)}
  .dstack-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.9) brightness(.82)}
  .dstack-head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:calc(1.6*var(--u))}
  .dstack-head h3{font-size:calc(4.2*var(--u));line-height:1.1;font-weight:400;letter-spacing:0;margin:0;color:inherit}
  .dstack-num{font-size:calc(2.6*var(--u));line-height:1.1;text-align:right;opacity:calc(.2 + .3*var(--p))}
  .dstack-acc{position:relative;height:calc(var(--acc-h,0px)*var(--p));overflow:hidden}
  .dstack-body{opacity:var(--p);display:flow-root}
  .dstack-body p{font-size:calc(2*var(--u));line-height:1.4;letter-spacing:.02em;max-width:calc(56*var(--u));margin:calc(3.2*var(--u)) 0 0;color:inherit}
  .dwho-close{text-align:center;font-size:calc(3.2*var(--u));line-height:1.25;font-weight:400;margin:calc(12*var(--u)) 0 0;color:var(--ink);text-wrap:balance}
  /* before JS measures: show every card open so nothing is hidden without JS */
  html:not(.dv2) .dstack-acc{height:auto}
  @media (prefers-reduced-motion:reduce){.dstack-item{--p:1}}

  /* ── S3: "Warum es passt" (Cuberto Why block: rule, label | paragraph, tiles 3 + 2) ── */
  #evidence-chapter .dwhy{display:block;width:var(--dw);margin:0 auto;padding:calc(15*var(--u)) 0 calc(10*var(--u));border-top:1px solid #000}
  .dwhy-intro{display:grid;grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr);align-items:start;padding-top:calc(4.2*var(--u))}
  #evidence-chapter .dwhy{border-top:0;position:relative}
  #evidence-chapter .dwhy::before{content:"";position:absolute;left:0;right:0;top:calc(15*var(--u));height:1px;background:#000}
  .dwhy-tiles{list-style:none;margin:calc(7.5*var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(1.6*var(--u))}
  .dwhy-tile{grid-column:span 2;min-height:calc(30*var(--u));border-radius:calc(2*var(--u));padding:calc(4*var(--u));display:flex;flex-direction:column;justify-content:flex-end;position:relative;color:var(--ink)}
  .dwhy-tile.-wide{grid-column:span 3}
  .dwhy-tile.-a{background:#F1F3FA}
  .dwhy-tile.-b{background:#F3F1EC}
  .dwhy-ic{position:absolute;top:calc(4*var(--u));left:calc(4*var(--u));width:calc(3.4*var(--u));height:calc(3.4*var(--u))}
  .dwhy-ic svg{width:100%;height:100%;display:block}
  .dwhy-n{margin:0;font-size:calc(8*var(--u));line-height:1;font-weight:400;letter-spacing:-.02em}
  .dwhy-cap{margin-bottom:0;font-size:calc(1.6*var(--u));line-height:1.1;margin-top:calc(1*var(--u));text-transform:uppercase;letter-spacing:.01em}
  .dwhy-st{font-size:calc(2.56*var(--u));line-height:1.3;margin:0;max-width:calc(36*var(--u))}

  /* ── MF case under the Why block: Cuberto tile language (cool grey panel, radius 2u, no shadow, same width) ── */
  #evidence-chapter .mfcase{background:#fff;padding:calc(1.6*var(--u)) 0 calc(15*var(--u))}
  #evidence-chapter .mfcase .wrap{width:var(--dw);max-width:none;margin:0 auto;background:#F1F3FA;border-radius:calc(2*var(--u));box-shadow:none;padding:calc(6*var(--u))}
  #evidence-chapter .mfc-label{text-transform:none;letter-spacing:0;font-size:calc(1.6*var(--u));color:var(--ink);font-weight:400}
  #evidence-chapter .mfc-h{font-size:calc(4.2*var(--u));font-weight:400;letter-spacing:0;line-height:1.1}
  #evidence-chapter .mfc-body{max-width:60ch}

  /* ── Closing band (Cuberto OutroSection) ── */
  .d-outro{display:block;background:#000;color:#fff;text-align:center;padding:calc(16*var(--u)) 0 calc(17*var(--u))}
  .d-outro h2{font-size:calc(8*var(--u));line-height:1.1;font-weight:400;letter-spacing:-.03em;max-width:calc(84*var(--u));margin:0 auto;color:#fff;text-wrap:balance}
  .d-outro p{font-size:calc(2.4*var(--u));line-height:1.4;max-width:calc(65*var(--u));margin:calc(3.2*var(--u)) auto 0;color:#fff}
  .d-outro-btn{display:inline-flex;align-items:center;height:calc(5.8*var(--u));padding:0 calc(2.8*var(--u));margin-top:calc(3.2*var(--u));border-radius:99999px;background:#fff;color:#000;font-size:calc(2*var(--u));font-weight:500;text-decoration:none;transition:transform .5s var(--ease,cubic-bezier(.16,1,.3,1))}
  .d-outro-btn .phs-pill{all:unset}
  .d-outro-btn:hover{transform:scale(1.04)}
  .d-outro-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}

  /* verifier 2026-09-30 fixes */
  #studio{padding-bottom:0}                                                     /* 270px dead gap S2 -> S3 rule; S3 top padding alone = Cuberto 15u */
  .dwhy-cap{min-height:4.4em}                                                   /* equal caption boxes -> the big numbers share one baseline like Cuberto */
  #evidence-chapter .mfcase .mfc-d-google img{height:auto;aspect-ratio:682/440;object-position:50% 50%}   /* narrower panel cropped the Google card text */
  #evidence-chapter .mfcase .mfc-d-book img{height:100%;min-height:0}

  /* ── v2 Phase 1 (OWNER-SPEC §6, §11, §15) ── */
  /* §6 Why grid: big values never wrap (the "14 Tage" icon/number stayed aligned only while it fit); statements share ONE
     3-line box pinned to the tile bottom, so both bottom-row texts start on the same line whatever their length. */
  /* tile inner width = (dw - 2 gaps)/3 - 2*4u padding; measured Inter em-widths (research/desktop-v2 note): "14 Tage" 3.52, "14 days" 3.44, "14 dagen" 4.14 */
  .dwhy-tiles{--ti:calc((var(--dw) - 3.2*var(--u)) / 3 - 8*var(--u))}
  .dwhy-n{white-space:nowrap;font-size:min(calc(8*var(--u)),calc(var(--ti) / 3.6))}
  html[lang="nl"] .dwhy-n{font-size:min(calc(8*var(--u)),calc(var(--ti) / 4.2))}
  .dwhy-st{min-height:calc(3 * 1.3em);display:flex;align-items:flex-start}
  .dwhy-tile.-wide{justify-content:flex-end}
  /* §11 pricing sub-headings: Cuberto caption treatment (14.4px @1440, weight 400, no tracking) instead of 11px/600/tracked caps */
  #preise .pr-kick{font-size:calc(1.6*var(--u));font-weight:400;letter-spacing:0;color:var(--ink);line-height:1.1}
  /* §15 one closing ask: the FAQ's own nudge + WhatsApp pill give way to the "Gespräch beginnen" band below (desktop only; phone keeps its FAQ) */
  #faq .faq-nudge,#faq .faq-cta{display:none}

  /* ── v2 Phase 1 structure ── */
  /* service card link = Cuberto MoreButton ("Explore" + round arrow), 2u text, 3.2u disc */
  .dstack-more{display:inline-flex;align-items:center;gap:calc(1.2*var(--u));margin-top:calc(2.4*var(--u));color:inherit;text-decoration:none;font-size:calc(1.8*var(--u));line-height:1}
  .dstack-more-t{margin:0!important;font-size:inherit!important;letter-spacing:0!important;max-width:none!important;display:inline}
  .dstack-more-ic{width:calc(2.8*var(--u));height:calc(2.8*var(--u));border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;transition:transform .6s cubic-bezier(.34,5.56,.64,1)}
  .dstack-more-ic svg{width:55%;height:55%}
  .dstack-more:hover .dstack-more-ic{transform:scale(1.12)}
  .dstack-more:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
  /* who we work well with: same label | paragraph row as "Wer wir sind", under a hairline (Cuberto Why rule) */
  #evidence-chapter .dfit{display:block;width:var(--dw);margin:0 auto;padding:calc(15*var(--u)) 0 0;position:relative}
  #evidence-chapter .dfit::before{content:"";position:absolute;left:0;right:0;top:calc(15*var(--u));height:1px;background:#000}
  #evidence-chapter .dfit .dwho-intro{padding-top:calc(4.2*var(--u))}
  #evidence-chapter .dwhy{padding-top:calc(9*var(--u))}
  #evidence-chapter .dwhy::before{display:none}
  /* MF proof: numbered evidence chain (hairline rows), no quote */
  .mfp-chain{list-style:none;margin:calc(3.2*var(--u)) 0 0;padding:0;border-top:1px solid rgba(0,0,0,.14)}
  .mfp-chain li{display:grid;grid-template-columns:calc(4.4*var(--u)) 1fr;align-items:baseline;padding:calc(1.5*var(--u)) 0;border-bottom:1px solid rgba(0,0,0,.14)}
  .mfp-n{font-size:calc(1.6*var(--u));opacity:.45}
  .mfp-chain p{margin:0;font-size:calc(2*var(--u));line-height:1.35;color:var(--ink)}
  .d-outro-alt{font-size:calc(1.8*var(--u))!important;opacity:.7;margin-top:calc(2.4*var(--u))!important}
  .d-outro-alt a{color:#fff}

  /* card art = Cuberto .item__bg @1440 (measured): fixed 600x374 box (66.7u x 41.6u) pinned bottom-right, lighten blend,
     opacity follows the open progress; the card clips the top as it grows. Replaces the v1 screenshot layer. */
  .dstack-art{top:auto!important;left:auto!important;right:0;bottom:0;width:calc(66.7*var(--u))!important;height:calc(41.6*var(--u));
    -webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:lighten}
  .dstack-art img{filter:none!important;object-fit:cover;object-position:center bottom}

  /* ── v2 Phase 4: Selected Work = Cuberto SummarySection @1440 (research/desktop-v2/cuberto-work-footer.json) ── */
  #beispiele{padding:calc(15*var(--u)) 0 calc(12*var(--u))}
  #beispiele > .wrap{max-width:none;padding:0;width:var(--dw);margin:0 auto}
  #beispiele .proj-head{text-align:left;max-width:none;margin:0}
  #beispiele .proj-head h2{font-size:calc(8*var(--u));line-height:1;font-weight:500;letter-spacing:-.02em;text-align:left;margin:0}
  #beispiele .proj-head .sec-lead{text-align:left;margin:calc(2.4*var(--u)) 0 0;max-width:none;font-size:calc(1.8*var(--u))}
  .dwork{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(10.9*var(--u));margin-top:calc(12*var(--u))}
  .dwork-col{display:flex;flex-direction:column;gap:calc(10*var(--u))}
  .dwork-col.-offset{padding-top:calc(15*var(--u))}
  .pjcard.dwk{display:block;color:#fff;text-decoration:none;translate:none!important}
  .pjcard.dwk:hover{translate:none!important}
  .dwk-media{position:relative;overflow:hidden;border-radius:calc(2*var(--u));background:#111;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
  .dwk.-tall .dwk-media{aspect-ratio:3/4}
  .dwk.-sq .dwk-media{aspect-ratio:1/1}
  .dwk-media img,.dwk-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
  .dwk-media video{opacity:0;transition:opacity .4s .2s,transform 1.2s cubic-bezier(.16,1,.3,1)}
  .dwk.is-play .dwk-media video{opacity:1}
  .dwk-cap{font-size:calc(2*var(--u));line-height:1.35;margin:calc(2.2*var(--u)) 0 0;max-width:calc(46*var(--u));color:inherit;opacity:.92}
  @media (hover:hover) and (pointer:fine){
    .dwk:hover .dwk-media{transform:scale(.98)}
    .dwk:hover .dwk-media img,.dwk:hover .dwk-media video{transform:scale(1.05)}
  }
  #beispiele .proj-cta{margin-top:calc(10*var(--u));text-align:center}

  /* ── v2 Phase 5: process cards 2+3 = captured loops (their own browser bar + status tag) ── */
  #ablauf .klb.-vid{padding:0;overflow:hidden;background:#0d0d0f}
  #ablauf .klb{height:auto!important;aspect-ratio:371/314}   /* one card shape at every width (was fixed 314px high -> 1.05..1.5:1) */
  #ablauf .klb.-vid .klb-video{display:block;width:100%;height:100%;object-fit:cover}
  #ablauf .klb.-vid > :not(.klb-video){display:none!important}   /* desktop shows the loop; the original mock stays for the phone */

  /* ── v2 Phase 6: desktop footer = Cuberto Footer @1440 (research/desktop-v2/cuberto-work-footer.json):
     black, padding 12u, content 1214px (x108), 47px outlined contact pills (pad 1.4u 2u, 2.4u text), 2x3 nav 2.4u,
     bottom bar 1.6u legal + 54px (6u) social circles. + the Blender 3D logo loop (Gmax adaptation). ── */
  footer:not(.dfoot){display:none!important}
  .dfoot{display:block;background:#000;color:#fff;padding:0}/* v3 R23: the shared footer.css padding (93.6/40) stacked on .dfoot-in 108/108 = 618px; Cuberto 473 */
  .dfoot-in{width:min(84.3vw,1400px);margin:0 auto;padding:calc(12*var(--u)) 0 calc(5*var(--u))}   /* v5 pass 3: bottom compressed (Max: empty space under copyright/socials) */
  .dfoot-logo{display:block;width:calc(56*var(--u));aspect-ratio:1500/420;margin:0 0 calc(7*var(--u)) calc(-2.2*var(--u))}
  .dfoot-logo video{width:100%;height:100%;display:block;object-fit:cover;mix-blend-mode:screen}
  .dfoot-row{display:flex;justify-content:space-between;align-items:flex-start}
  .dfoot-contact{display:flex;gap:calc(10.4*var(--u))}
  .dfc-meta{margin:calc(1.8*var(--u)) 0 0;font-size:calc(1.6*var(--u));line-height:1.4;color:rgba(255,255,255,.55);max-width:calc(30*var(--u))}
  .dpill{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:99999px;padding:calc(1.11*var(--u)) calc(2*var(--u));
    color:#fff;text-decoration:none;font-size:calc(2.4*var(--u));line-height:1;transition:transform .6s cubic-bezier(.34,5.56,.64,1)}
  .dpill-b{position:absolute;inset:0;border:1px solid rgba(255,255,255,.9);border-radius:inherit;pointer-events:none}
  .dpill-r{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
  .dpill-r span{position:absolute;inset:0;background:#fff;border-radius:50% 50% 0 0;transform:translateY(101%);
    transition:transform .5s cubic-bezier(.4,0,0,1),border-radius .5s cubic-bezier(.4,0,0,1)}
  .dpill-t{position:relative;overflow:hidden;height:1.25em}   /* 1.25em line box keeps g/p/q/y/j descenders; 2x1.11u padding -> 47px @1440 (Cuberto 47) */
  .dpill-l{margin:0!important;font-size:inherit!important;line-height:1.25!important;color:inherit;white-space:nowrap;
    text-shadow:0 1.25em 0 #000;transition:transform .8s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover) and (pointer:fine){
    .dpill:hover{transform:scaleX(1.02)}
    .dpill:hover .dpill-r span{transform:translateY(0);border-radius:0;transition-duration:.5s,.9s}
    .dpill:hover .dpill-l{transform:translateY(-1.25em)}
  }
  .dpill:focus-visible{outline:2px solid #fff;outline-offset:4px}
  .dfoot .dfoot-nav{display:grid;grid-template-columns:repeat(2,max-content);column-gap:calc(6.3*var(--u));row-gap:0;margin:0;justify-content:end;text-align:right}
  .dfoot .dfoot-nav a{color:#fff;font-size:calc(2.4*var(--u));font-weight:400;letter-spacing:0;padding:calc(1.2*var(--u)) 0;line-height:1.2;justify-self:end;text-decoration:none}
  .dfoot .dfoot-nav a:hover{opacity:1}   /* v6 pass 4: Cuberto text roll replaces the fade */
  .dfoot .dfoot-nav .froll{display:block;position:relative;overflow:hidden}
  .dfoot .dfoot-nav .froll span{display:block;position:relative;transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .dfoot .dfoot-nav .froll span::after{content:attr(data-text);display:block;position:absolute;top:100%;left:0;right:0;transform:scale(.7);transition:transform .4s}
  .dfoot .dfoot-nav a:hover .froll span::after,.dfoot .dfoot-nav a:focus-visible .froll span::after{transform:scale(1)}
  @media (pointer:fine){.dfoot .dfoot-nav a:hover .froll span,.dfoot .dfoot-nav a:focus-visible .froll span{transform:translateY(-100%)}}
  @media (prefers-reduced-motion:reduce){.dfoot .dfoot-nav .froll span,.dfoot .dfoot-nav .froll span::after{transition:none}}
  .dfoot-bar{display:flex;justify-content:space-between;align-items:center;margin-top:calc(8*var(--u))}
  .dfoot .dfoot-legal{display:flex;gap:calc(2.4*var(--u));font-size:calc(1.6*var(--u));align-items:center}
  .dfoot .dfoot-legal a{color:#fff;text-decoration:none}
  .dfoot .dfoot-legal span{color:rgba(255,255,255,.5)}
  .dfoot-social{display:flex;gap:calc(2.3*var(--u))}
  /* v6 pass 6 (Max: Cuberto's RoundButton hover, measured: research/desktop-v6/cuberto-footer-roundbutton.md): the disc
     (::before) and the icon compress to .95 through a spring curve that dips to ~.88 first (.6 s / .7 s), and ease back
     in .4 s on leave. Gmax keeps its own disc colours. */
  .dfoot-soc{width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:none;color:#fff;display:grid;place-items:center;position:relative}
  .dfoot-soc::before{content:"";position:absolute;inset:0;border-radius:50%;background:#1c1c1f;transition:transform .4s,background .3s}
  .dfoot-soc svg{position:relative;transition:transform .4s}
  .dfoot-soc:hover::before,.dfoot-soc:focus-visible::before{background:#2c2c31}
  @media (pointer:fine){
    .dfoot-soc:hover::before{transition:transform .6s cubic-bezier(.34,4.56,.64,1),background .3s;transform:scale(.95)}
    .dfoot-soc:hover svg{transition:transform .7s cubic-bezier(.34,4.56,.64,1);transform:scale(.95)}
  }
  @media (prefers-reduced-motion:reduce){.dfoot-soc::before,.dfoot-soc svg{transition:background .3s!important;transform:none!important}}
  .intouch{transition:opacity .4s ease,transform .4s ease}
  html.dfoot-vis .intouch{opacity:0;transform:scale(.6);pointer-events:none}
  .dfoot-soc svg{width:calc(2*var(--u));height:calc(2*var(--u));fill:#fff}

  /* ── v2 Phase 7 type fidelity: Cuberto section H2 = 72px @1440 (8u), weight 500, letter-spacing -1.44px (-.02em)
     (research/cuberto/m1440/manifest.json headings). Alignment of these sections kept as Max approved. ── */
  #ablauf h2,#preise > .wrap > h2,#faq h2{font-size:calc(8*var(--u))!important;font-weight:500!important;letter-spacing:-.02em!important;line-height:1.05!important}

  /* ── v3 narrative (LEDGER R4-R8) ── */
  #evidence-chapter .dfit .dlook{padding-top:calc(4.2*var(--u))}
  .dlook-h{font-size:calc(8*var(--u));line-height:1.05;font-weight:500;letter-spacing:-.02em;margin:0;color:var(--ink)}
  .dlook-traits{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(10.9*var(--u));margin-top:calc(7*var(--u))}
  .dlook-t{border-top:1px solid rgba(0,0,0,.14);padding-top:calc(2.8*var(--u))}
  .dlook-n{display:block;font-size:calc(1.6*var(--u));opacity:.45;margin-bottom:calc(2.4*var(--u))}
  .dlook-t h3{font-size:calc(3.2*var(--u));line-height:1.15;font-weight:400;letter-spacing:-.01em;margin:0 0 calc(1.6*var(--u));color:var(--ink)}
  .dlook-t p{font-size:calc(2*var(--u));line-height:1.45;margin:0;color:var(--muted);max-width:calc(46*var(--u))}
  #evidence-chapter .dwhy{padding:calc(12*var(--u)) 0 0}
  #evidence-chapter .dwhy .dwhy-intro{padding-top:0}
  #evidence-chapter .dwhy .dwhy-tiles{display:none}
  /* ── v4 R6: "Unsere Zielkunden" = small section label (same hierarchy as "Wer wir sind"), traits in the content column ── */
  #evidence-chapter .dfit .dlook.dwho-intro{padding-top:calc(4.2*var(--u))}
  .dlook.dwho-intro .dlook-traits{margin-top:0;column-gap:calc(6*var(--u))}
  .dlook.dwho-intro .dlook-t h3{font-size:calc(2.56*var(--u));line-height:1.25}
  /* ── v4 R9/R10 "Warum wir zusammen erfolgreich sind" = Cuberto testimonial pile as an equation (why-mechanic.md M2).
     Cuberto: .testimonials gap .8rem, margin 0 -10rem; .testimonial 40rem, padding 5rem, border 4px #fff, radius .8rem;
     rest child1 translateY(10rem) translate(28%) rotate(-9deg) / child2 translateY(-2rem) z0 / child3 translateY(10rem)
     translate(-24%) rotate(9deg); hover: none, transition 1s cubic-bezier(.25,1,.5,1), all cards together. ── */
  #evidence-chapter .dwhy.dtg{padding:calc(15*var(--u)) 0 calc(10*var(--u))}
  .dtg-h{font-size:calc(8*var(--u));line-height:1;font-weight:500;letter-spacing:-.02em;text-align:center;margin:0 0 calc(12*var(--u));color:var(--ink)}
  .dtg-pile{display:flex;justify-content:center;align-items:flex-start;gap:calc(.8*var(--u));margin:0 calc(-10*var(--u));padding-bottom:calc(10*var(--u));outline:none}
  .dtg-card{flex-shrink:0;width:calc(40*var(--u));padding:calc(5*var(--u));border:4px solid #fff;border-radius:calc(.8*var(--u));position:relative;z-index:1;overflow:hidden;box-sizing:border-box;
    background:#F1F3FA;color:var(--ink);transition:transform 1s cubic-bezier(.25,1,.5,1),translate 2s cubic-bezier(.19,1,.22,1),opacity 1s ease}
  .dtg-card.-a{transform:translateY(calc(10*var(--u))) translateX(28%) rotate(-9deg)}
  .dtg-card.-c{transform:translateY(calc(-2*var(--u)));z-index:0;background:#0d0d0f;color:#fff;transition-delay:0s,.1s,.1s}
  .dtg-card.-b{transform:translateY(calc(10*var(--u))) translateX(-24%) rotate(9deg);transition-delay:0s,.2s,.2s}
  .dtg-pile:hover .dtg-card,.dtg-pile:focus-within .dtg-card,.dtg-pile.-open .dtg-card{transform:none}
  .dtg-n{display:block;font-size:calc(1.6*var(--u));opacity:.45;margin-bottom:calc(3.2*var(--u))}
  .dtg-t{font-size:calc(2.56*var(--u));line-height:1.3;font-weight:400;margin:0 0 calc(1.2*var(--u))}
  .dtg-p{font-size:calc(2*var(--u));line-height:1.4;letter-spacing:-.01em;margin:0}
  .dtg-div{display:block;width:calc(6*var(--u));height:1px;background:currentColor;opacity:.2;margin:calc(2.4*var(--u)) 0}
  .dtg-by{font-size:calc(1.6*var(--u));margin:0;opacity:.7}
  .dtg-card.-c{padding:calc(4*var(--u)) calc(3*var(--u)) calc(5*var(--u))}
  .dtg-c{font-size:calc(2.2*var(--u));line-height:1.2;margin:0;white-space:nowrap;text-align:center}   /* one line inside the top band the tilted cards leave clear at rest */
  .dtg-cs{text-align:center;opacity:0;transition:opacity .6s ease .2s}   /* v4 judge: half-covered at rest read as a defect; shown once the cards straighten */
  .dtg-pile:hover .dtg-cs,.dtg-pile:focus-within .dtg-cs,.dtg-pile.-open .dtg-cs{opacity:.7}
  @media (prefers-reduced-motion:reduce){.dtg-cs{opacity:.7}}
  .dtg-cs{font-size:calc(2*var(--u));line-height:1.4;margin:calc(4*var(--u)) 0 0;opacity:.7}
  /* entrance (Cuberto card helper): opacity 1 s + y 70 -> 0 2 s expo.out, stagger .1, on the individual 'translate'
     property so it composes with the tilt in 'transform' */
  html.dtg-armed .dtg-card{translate:0 70px;opacity:0}
  html.dtg-armed .dtg.is-in .dtg-card{translate:0 0;opacity:1}
  @media (prefers-reduced-motion:reduce){.dtg-card{transition:none}html.dtg-armed .dtg-card{translate:none;opacity:1}}
  /* ── v5 narrative composition (Max: Target client + Why as ONE sequence; Why heading quieter) ──
     one grid shared with "Wer wir sind": label column 30.5u | content column; hairline rows (Cuberto Summary rows). */
  .dnar{width:var(--dw);margin:0 auto}
  .dnar-row{display:grid;grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr);column-gap:0;align-items:start}
  .dnar-head{padding-top:calc(4.2*var(--u))}
  .dnar-label{margin:.35em 0 0}
  .dnar .dlook-t{grid-template-columns:calc(30.5*var(--u)) calc(36*var(--u)) minmax(0,1fr);border-top:1px solid rgba(0,0,0,.14);padding:calc(3.6*var(--u)) 0 calc(4.5*var(--u));margin-top:0}
  .dnar .dlook-t:first-child{border-top:0;padding-top:calc(4.2*var(--u))}   /* the chapter line above is this row's top edge */
  .dnar .dlook-t > .dnar-label{grid-column:1;grid-row:1}
  .dnar .dnar-l{grid-column:2;padding-right:calc(4*var(--u))}
  .dnar .dlook-t h3{font-size:calc(2.56*var(--u));line-height:1.25;font-weight:400;margin:0;color:var(--ink)}
  .dnar .dlook-n{margin-bottom:calc(1.6*var(--u))}
  .dnar .dlook-t > p{grid-column:3;font-size:calc(2*var(--u));line-height:1.45;margin:calc(3.2*var(--u)) 0 0;color:var(--muted);max-width:calc(46*var(--u))}
  .dnar-head{grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr)}
  .dnar-head .dnar-label{grid-column:1}
  /* Why: same quiet label row on the same grid, a hairline continues the sequence, then the pile */
  #evidence-chapter .dwhy.dtg{padding:0 0 calc(10*var(--u));width:var(--dw);margin:0 auto}
  .dtg-headrow{border-top:1px solid rgba(0,0,0,.14);padding-top:calc(3.6*var(--u));margin-bottom:calc(10*var(--u))}
  .dtg-h.dnar-label{font-size:calc(1.6*var(--u))!important;line-height:1.1!important;font-weight:400!important;letter-spacing:0!important;text-align:left!important;margin:.35em 0 0!important}
  .dtg-eq{display:block;font-size:calc(1.6*var(--u));line-height:1;letter-spacing:.04em;opacity:.55;margin-bottom:calc(1*var(--u));text-align:center;font-variant-numeric:tabular-nums}
  .dtg-card.-c{padding-top:calc(3*var(--u))!important}
  /* MF proof: no box, media-led */
  #evidence-chapter .mfcase{background:#fff;padding:calc(12*var(--u)) 0 calc(15*var(--u))}
  #evidence-chapter .mfcase .wrap{background:none!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
  .mfp3{display:grid;grid-template-columns:minmax(0,1fr) calc(50*var(--u));column-gap:calc(10.9*var(--u));align-items:center}
  .mfp3-h{font-size:calc(5.6*var(--u));line-height:1.05;font-weight:500;letter-spacing:-.02em;margin:0;color:var(--ink)}
  .mfp3-setup{font-size:calc(2.2*var(--u));line-height:1.45;margin:calc(2.4*var(--u)) 0 0;color:var(--muted);max-width:calc(52*var(--u))}
  .mfp3-steps{list-style:none;padding:0;margin:calc(4.8*var(--u)) 0 0;border-top:1px solid rgba(0,0,0,.12)}
  .mfp3-steps li{display:grid;grid-template-columns:calc(4.4*var(--u)) 1fr;column-gap:0;align-items:baseline;padding:calc(1.5*var(--u)) 0;border-bottom:1px solid rgba(0,0,0,.12);opacity:.35;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
  .mfp3-steps li.on{opacity:1}
  .mfp3-steps .mfp-n{font-size:calc(1.6*var(--u))}
  .mfp3-steps p{margin:0;font-size:calc(2.4*var(--u));line-height:1.3;color:var(--ink)}
  .mfp3-steps small{grid-column:2;font-size:calc(1.5*var(--u));color:var(--muted);margin-top:calc(.4*var(--u))}
  .mfp3-media{border-radius:calc(2*var(--u));overflow:hidden;aspect-ratio:3/4;background:#111}
  .mfp3-media video{width:100%;height:100%;object-fit:cover;display:block}

  /* v3 R10 + R18 */
  #beispiele .dcon-head{margin-top:calc(15*var(--u))}
  #faq .sec-lead{display:none}

  /* v3 R9 + R17: ONE label treatment on the homepage = the Gmax/Cuberto section label (sentence case, 1.6u, weight 400,
     no tracking). Replaces the generic "startup label" (small, bold, tracked caps) on pricing flags/kicks + process tags. */
  #preise .pr-kick,#preise .addon-flag,#ablauf .ab-tag{font-size:calc(1.6*var(--u))!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;line-height:1.2}
  #preise .addon-flag{color:var(--muted)!important;background:none!important;border:0!important;padding:0!important}

  /* ── v3 R14-R16 Process. Stage states (both layouts): .is-active = in focus, .lit = completed check (existing tick art).
     VERTICAL mode (html.dproc-v): rail | text | large media per stage, one stage in focus at a time. ── */
  #ablauf .saw-mock{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  #ablauf .saw-t{transition:opacity .6s cubic-bezier(.16,1,.3,1)}
  html.dproc-on #ablauf .saw-mock{transition:opacity .6s ease,transform .9s cubic-bezier(.19,1,.22,1)}
  html.dproc-on #ablauf .saw-mock:not(.is-active){opacity:.3}
  html.dproc-on #ablauf .saw-t{transition:opacity .6s ease}
  html.dproc-on #ablauf .saw-t:not(.is-active){opacity:.3}
  /* v4 R25 marker states (restrained, Cuberto white-disc language; the gold --connector is gone on desktop):
     upcoming = thin ring + dim number · active = white disc + black number · completed = white ring + check;
     green stays only for a completed Launch (Gmax status system: green = live). */
  html.dproc-on #ablauf .saw-node{width:calc(6*var(--u));height:calc(6*var(--u));background:#0d0d0f;border:1px solid rgba(255,255,255,.22);box-shadow:none;transition:background .45s ease,border-color .45s ease}
  html.dproc-on #ablauf .saw-node .ab-n{color:rgba(255,255,255,.45);font-size:calc(1.8*var(--u));font-weight:500;background:none}
  html.dproc-on #ablauf .saw-node.is-active{background:#fff;border-color:#fff}
  html.dproc-on #ablauf .saw-node.is-active .ab-n{color:#0d0d0f;opacity:1}
  html.dproc-on #ablauf .saw-node.lit{background:#0d0d0f;border-color:rgba(255,255,255,.7);box-shadow:none}
  html.dproc-on #ablauf .saw-node .saw-check{width:calc(2.4*var(--u));height:calc(2.4*var(--u));stroke:#fff;stroke-width:2}
  html.dproc-on #ablauf .saw-node:last-of-type.lit{background:var(--status-live);border-color:var(--status-live)}
  html.dproc-v #ablauf .saw{display:grid;grid-template-columns:calc(9*var(--u)) calc(38*var(--u)) minmax(0,1fr);column-gap:calc(6*var(--u));row-gap:calc(12*var(--u));width:var(--dw);margin:0 auto;position:relative}
  html.dproc-v #ablauf .saw-mocks,html.dproc-v #ablauf .saw-rail,html.dproc-v #ablauf .saw-texts{display:contents}
  html.dproc-v #ablauf .saw-node{grid-column:1;align-self:center;position:relative;z-index:1;display:flex;justify-content:center}
  html.dproc-v #ablauf .saw-node:nth-of-type(1){grid-row:1} html.dproc-v #ablauf .saw-node:nth-of-type(2){grid-row:2} html.dproc-v #ablauf .saw-node:nth-of-type(3){grid-row:3}
  html.dproc-v #ablauf .saw-t{grid-column:2;align-self:center;text-align:left;margin:0}
  html.dproc-v #ablauf .saw-t:nth-child(1){grid-row:1} html.dproc-v #ablauf .saw-t:nth-child(2){grid-row:2} html.dproc-v #ablauf .saw-t:nth-child(3){grid-row:3}
  html.dproc-v #ablauf .saw-t h3{font-size:calc(4.2*var(--u));font-weight:400;letter-spacing:-.01em;margin:0 0 calc(1.6*var(--u))}
  html.dproc-v #ablauf .saw-t p{font-size:calc(2*var(--u));line-height:1.45;max-width:none}
  html.dproc-v #ablauf .saw-mock{grid-column:3;margin:0;width:100%}
  html.dproc-v #ablauf .saw-mock:nth-child(1){grid-row:1} html.dproc-v #ablauf .saw-mock:nth-child(2){grid-row:2} html.dproc-v #ablauf .saw-mock:nth-child(3){grid-row:3}
  html.dproc-v #ablauf .saw-mock .klb{width:100%}
  html.dproc-v #ablauf .saw-mock:not(.is-active){transform:scale(.94)}
  html.dproc-v #ablauf .saw-mock.is-active .klb{box-shadow:0 calc(4*var(--u)) calc(10*var(--u)) calc(-2*var(--u)) rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12)}
  html.dproc-v #ablauf .saw-t.is-active h3{color:#fff}
  html.dproc-v #ablauf .saw-spine{position:absolute;left:calc(4.5*var(--u));top:0;height:0;width:1px;transform:translateX(-50%);background:rgba(255,255,255,.16);overflow:visible;border-radius:0}   /* v4 R24: top/height set from the rendered markers (01 bottom -> 03 top) in desktop-v2.js */
  html.dproc-v #ablauf .saw-spine-fill{position:absolute;left:0;top:0;width:1px;height:0;transform:none!important;background:rgba(255,255,255,.75);transition:height .9s cubic-bezier(.19,1,.22,1)}
  /* R16 Preview fit: the capture fills its frame (was a fixed-height img inside a taller card) */
  #ablauf .klb.saw-c1{display:flex;flex-direction:column}
  #ablauf .klb.saw-c1 .saw-view{flex:1 1 auto;min-height:0;overflow:hidden;position:relative}
  #ablauf .klb.saw-c1 .saw-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

  /* v3 R20/R23 footer: the 3D logo sits centred INSIDE Cuberto's single footer row (contact | logo | nav), no separate
     logo band -> height back toward Cuberto's 473px; contact + socials near the true bottom. */
  .dfoot-in{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"contact logo nav" "bar bar bar";align-items:center}
  .dfoot-row{display:contents}
  .dfoot-contact{grid-area:contact;align-self:start;flex-direction:column;align-items:flex-start;gap:calc(1.6*var(--u))}/* v3: stacked so the centred logo column is not pushed right (judge: cOff 144px) */
  .dfoot .dfoot-loc{margin:0 auto 0 calc(2.4*var(--u));font-size:calc(1.6*var(--u));color:rgba(255,255,255,.5)}
  .dfoot .dfoot-nav{grid-area:nav;align-self:start}
  .dfoot-logo{grid-area:logo;width:calc(30*var(--u));margin:0 calc(4*var(--u))!important;align-self:center}
  .dfoot-bar{grid-area:bar}

  /* ── v3 R2 hero geometry (research/desktop-v3/hero-mechanic.md 3b; capitals = option C size) ── */
  .hero{min-height:0!important;padding-top:min(12.5vw,200px)!important;padding-bottom:0!important;display:block!important}
  .hero > .wrap{max-width:1600px!important;padding:0 min(7.5vw,120px)!important}
  .hero h1{font-family:'InterHeroVar',Inter,sans-serif!important;font-size:min(5vw,80px)!important;line-height:1!important;font-weight:570!important;/* v5: variable Inter 570 = Suisse 500 optical stem (0.172 capH), tracking 0 = Suisse letter width; long line 774 ink @1440 (research/desktop-v5/weight) */letter-spacing:0!important;text-align:center;margin:0 auto!important;max-width:90%!important;text-wrap:initial!important}
  .hero h1 .rl,.hero h1 .rl-i{display:block;overflow:visible}
  .hw{display:inline-block;overflow:clip;vertical-align:top;margin:-.2em}
  .hw-i{display:inline-block;padding:.2em}
  .hero .sub{font-size:min(1.5vw,24px)!important;line-height:1.2!important;letter-spacing:.02em;max-width:min(52.5vw,840px)!important;margin:min(2vw,32px) auto 0!important;text-align:center}
  .hero .stage{margin-top:min(6.25vw,100px)!important}

  /* ── v3 R19 closing section = Cuberto OutroSection (research/desktop-v3/outro-mechanic.md §3) ── */
  .d-outro{position:relative;overflow:hidden;background:#000;height:calc(69.2*var(--u));padding:0!important;display:grid;place-items:center;text-align:center}
  .d-outro-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .d-outro-art{position:absolute;inset:0;transform-origin:50% 0}
  .d-outro-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
  /* v4 R32 living art: each browser window glows on its own slow cycle (out of phase), a soft light drifts across,
     the whole art breathes very slightly in depth. Opacity/transform only; runs only while the section is on screen. */
  .d-outro .og{opacity:0;will-change:opacity;animation:ogPulse 9s ease-in-out infinite;animation-play-state:paused}
  .d-outro .og1{animation-delay:-2.2s}.d-outro .og2{animation-delay:-4.5s}.d-outro .og3{animation-delay:-6.7s}
  .d-outro .ol-light{position:absolute;top:-10%;left:0;width:55%;height:95%;background:radial-gradient(closest-side,rgba(126,138,214,.16),rgba(126,138,214,0));mix-blend-mode:screen;will-change:transform;animation:olDrift 22s ease-in-out infinite alternate;animation-play-state:paused}
  .d-outro .d-outro-art{will-change:transform;animation:olDepth 18s ease-in-out infinite alternate;animation-play-state:paused}
  .d-outro.is-in .og,.d-outro.is-in .ol-light,.d-outro.is-in .d-outro-art{animation-play-state:running}
  @keyframes ogPulse{0%,100%{opacity:0}40%,55%{opacity:.85}}
  @keyframes olDrift{from{transform:translateX(-25%)}to{transform:translateX(105%)}}
  @keyframes olDepth{from{transform:scale(1)}to{transform:scale(1.025)}}
  @media (prefers-reduced-motion:reduce){.d-outro .og,.d-outro .ol-light,.d-outro .d-outro-art{animation:none}.d-outro .og{opacity:.4}}
  .d-outro-in{position:relative;z-index:1}
  .d-outro h2{max-width:calc(65*var(--u))!important;line-height:1.1!important}
  .d-outro-sub{font-size:calc(2.4*var(--u))!important;line-height:1.4!important;max-width:calc(65*var(--u))!important;margin:calc(3.2*var(--u)) auto 0!important;color:#fff}
  .d-outro-cta{margin-top:calc(3.2*var(--u))}
  .d-outro-btn{position:relative;display:inline-flex;align-items:center;height:calc(5.8*var(--u));padding:0 calc(2.8*var(--u));margin:0;border-radius:99999px;background:#fff;color:#000;
    font-size:calc(2*var(--u));font-weight:500;line-height:1;text-decoration:none;overflow:hidden;transform:translateZ(0);transition:transform .3s}
  .d-outro-btn .phs-pill{all:unset}
  .ob-ripple{position:absolute;inset:1px;border-radius:inherit;overflow:hidden;z-index:1;pointer-events:none}
  .ob-ripple span{position:absolute;inset:0;background:#000;border-radius:50% 50% 0 0;transform:translateY(101%);transition:transform .5s cubic-bezier(.4,0,0,1),border-radius .5s cubic-bezier(.4,0,0,1)}
  .ob-title{position:relative;z-index:2;display:block;overflow:hidden;line-height:1.25;height:1.25em}
  .ob-title > span{display:block;text-shadow:0 1.3em 0 #fff;transition:transform .8s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover) and (pointer:fine){
    .d-outro-btn:hover{transform:scaleX(1.02);transition:transform .6s cubic-bezier(.34,5.56,.64,1)}
    .d-outro-btn:hover .ob-ripple span{transform:translateY(0);border-radius:0;transition-duration:.5s,.9s}
    .d-outro-btn:hover .ob-title > span{transform:translateY(-1.3em)}
  }
  .d-outro-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
  .d-outro-alt{font-size:calc(1.8*var(--u))!important;opacity:.7;margin-top:calc(2.4*var(--u))!important}
  /* ── v4 rhythm + CTA (measured: research/desktop-v4/cub-rhythm.md) ── */
  /* R34: the label roll never ran: '.d-outro-btn .phs-pill{all:unset}' (0,2,0) beat '.ob-title > span' (0,1,1) because the
     label span IS .phs-pill, so hover showed a blank black capsule. Higher specificity restores Cuberto's roll. */
  .d-outro-btn .ob-title > .phs-pill{display:block;text-shadow:0 1.3em 0 #fff;transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .d-outro-btn{transition:transform .3s,color .4s,background .4s}
  @media (hover:hover) and (pointer:fine){ .d-outro-btn:hover .ob-title > .phs-pill{transform:translateY(-1.3em)} }
  /* Cuberto outro: the centred block is H2 + sub + pill (147 px from both section edges); the side line hangs below it */
  .d-outro-cta{position:relative}
  .d-outro-alt{position:absolute;left:0;right:0;top:100%}
  /* R28 Process: section 15u / 12u, H2 -> lead 3.2u, header block -> first stage 12u (Cuberto .header margin 12rem) */
  #ablauf.sec{padding:calc(15*var(--u)) 0 calc(12*var(--u))!important}
  #ablauf .ab-head .sec-lead{margin-top:calc(3.2*var(--u))!important;margin-bottom:0!important}
  #ablauf .ab-head{margin-bottom:calc(12*var(--u))!important}
  #ablauf .ab-head h2,#faq h2{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;line-height:1!important}   /* Cuberto .header box: 72/72, no padding */
  #ablauf .ab-head h2 .ln,#faq h2 .ln{margin-bottom:-.16em}   /* the reveal mask's .16em descender padding is net-zero like Cuberto's mask (padding .2em / margin -.2em) */
  #ablauf .ab-flow,#ablauf .saw{margin-top:0!important}
  /* R31 FAQ: section 15u / 12u, H2 -> first divider 12u, rows 4u top/bottom (Cuberto FaqSection) */
  #faq.sec{padding:calc(15*var(--u)) 0 calc(12*var(--u))!important}
  #faq .faq-list{margin-top:calc(12*var(--u))!important}
  #faq details.faq-q summary{padding:calc(4*var(--u)) 0!important}
  /* ── v5 pass 3 process markers (Max: a large black check form behind/around the number when active; the previous
     stage inverts when the next one takes over; restrained, no new colours) ──
     upcoming = thin ring + dim number · ACTIVE = white disc, black number, a large check drawn in behind it (black, 16 %)
     · COMPLETED = inverted: dark disc, white ring, white check (green only for a completed Launch). */
  html.dproc-on #ablauf .saw-node{cursor:default;transition:background .5s cubic-bezier(.23,1,.32,1),border-color .5s cubic-bezier(.23,1,.32,1),transform .35s cubic-bezier(.23,1,.32,1)}
  html.dproc-on #ablauf .saw-node .ab-n{position:relative;z-index:2;transition:color .4s ease,opacity .3s ease}
  html.dproc-on #ablauf .saw-node .saw-check{z-index:1;opacity:0;transform:none;stroke-dasharray:24;stroke-dashoffset:24;
    transition:stroke-dashoffset .7s cubic-bezier(.23,1,.32,1) .12s,opacity .3s ease,width .5s cubic-bezier(.23,1,.32,1),height .5s cubic-bezier(.23,1,.32,1),stroke .4s ease}
  html.dproc-on #ablauf .saw-node.is-active .saw-check{opacity:1;width:calc(6.4*var(--u));height:calc(6.4*var(--u));stroke:rgba(13,13,15,.1);stroke-width:1.5;stroke-dashoffset:0}
  html.dproc-on #ablauf .saw-node.lit .saw-check{opacity:1;width:calc(2.4*var(--u));height:calc(2.4*var(--u));stroke:#fff;stroke-width:2;stroke-dashoffset:0}
  html.dproc-on #ablauf .saw-node.lit .ab-n{opacity:0}
  @media (prefers-reduced-motion:reduce){html.dproc-on #ablauf .saw-node,html.dproc-on #ablauf .saw-node .saw-check{transition:none}}
  /* ── v5 pass 3: ONE desktop section-heading system for Process / Pricing / FAQ (Max: left-aligned, consistent).
     Grid = the page grid already used by Selected Work and the Process stages: var(--dw) (998 @1440, Cuberto
     container), heading 72/72 500 -.02em on the grid's left edge, lead 3.2u below, content 12u below the header block. ── */
  #ablauf .ab-head,#preise > .wrap,#faq > .wrap{width:var(--dw)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
  #ablauf .ab-head,#ablauf .ab-head h2,#preise > .wrap > h2,#faq .d-faq-h,#ablauf .ab-head .sec-lead,#preise > .wrap > .sec-lead{text-align:left!important}
  #ablauf .ab-head .sec-lead,#preise > .wrap > .sec-lead{margin-left:0!important;margin-right:0!important;max-width:calc(56*var(--u))!important}
  #preise > .wrap > h2{margin:0!important;padding:0!important;line-height:1!important}
  #preise > .wrap > h2 .ln{margin-bottom:-.16em}
  #preise.sec{padding:calc(15*var(--u)) 0 calc(8*var(--u))!important}   /* v6 pass 3 (Max): Preise -> FAQ gap 27u -> 23u; same light ground on both sides made the standard rhythm read too open */
  #preise > .wrap > .sec-lead{margin-top:calc(3.2*var(--u))!important;margin-bottom:0!important}
  #preise .pr-ledger{margin-top:calc(12*var(--u))!important}
  /* R37 footer: bar margin 6.7u (Cuberto .bgrid) -> 472.8 px total @1440 */
  .dfoot-bar{margin-top:calc(6.7*var(--u))!important}

  /* v6 (Max, Class C): Target client + Why together = ONE system (research/desktop-v6/, visual-critic round 1 applied):
     label + one larger statement (the system head), then the pile directly; cards carry trait 01 / 02, result = 01 + 02. */
  #evidence-chapter .dfit.v6sys .v6-intro{padding-top:calc(4.2*var(--u))}
  #evidence-chapter .dfit.v6sys .dwho-para{font-size:calc(3.4*var(--u));line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
  #evidence-chapter .dwhy.dtg.v6sys-pile{padding:calc(10.5*var(--u)) 0 calc(7*var(--u))}
  .v6sys-pile .dtg-card.-a{transform:translateY(calc(10*var(--u))) translateX(27%) rotate(-9deg)}
  .v6sys-pile .dtg-card.-b{transform:translateY(calc(10*var(--u))) translateX(-25%) rotate(9deg)}
  .v6sys-pile .dtg-pile:hover .dtg-card,.v6sys-pile .dtg-pile:focus-within .dtg-card,.v6sys-pile .dtg-pile.-open .dtg-card{transform:none}
  .v6sys-pile .dtg-card.-c{padding-top:calc(3.4*var(--u))}
  .v6sys-pile .dtg-c{white-space:normal;max-width:calc(26*var(--u));margin:0 auto;text-wrap:balance;font-size:calc(2.2*var(--u));line-height:1.2}

  /* v6 pass 3 (Max: Preview must start ON THE HOMEPAGE, hold briefly, then scroll): the approved pan (sawPan, 30 s, same
     travel) runs only while the Preview stage is active, so it restarts at the top on every activation; inactive = homepage.
     Only the opening hold changed: 2.7 s -> 1.2 s. Reduced motion keeps the still homepage. */
  html.js.dproc-on #ablauf .saw-c1 .saw-shot{animation:none}
  html.js.dproc-on #ablauf .saw-mock.is-active .saw-c1 .saw-shot{animation:dprocPan 30s ease-in-out infinite}
  @keyframes dprocPan{0%,4%{object-position:50% 0%}45%,54%{object-position:50% 44%}100%{object-position:50% 0%}}
  @media (prefers-reduced-motion:reduce){html.js.dproc-on #ablauf .saw-mock.is-active .saw-c1 .saw-shot{animation:none}}

  /* v6 pass 4 (Max: bring the phone Feedback + Live cards back, he prefers them over the videos): the DOM cards fill the
     shared desktop card shape (bar on top, content takes the rest). */
  #ablauf .klb.saw-c2,#ablauf .klb.saw-c3{display:flex;flex-direction:column}
  #ablauf .klb.saw-c2 .saw-view{flex:1 1 auto;min-height:0;height:auto;overflow:hidden;position:relative}
  #ablauf .klb.saw-c3 .saw-dash{flex:1 1 auto;min-height:0;height:auto}

  /* v6 pass 4 (Max: the target-client intro should connect with the 3 cards below; candidate A of 3, chosen with the
     visual-critic, research/desktop-v6/fit/): label + statement sit on the pile's centre axis, 48px above the result card. */
  #evidence-chapter .dfit.v6sys .v6-intro{display:block;text-align:center;padding-top:calc(5.4*var(--u))}
  #evidence-chapter .dfit.v6sys .dwho-label{margin:0 0 calc(2.4*var(--u))}
  #evidence-chapter .dfit.v6sys .dwho-para{max-width:calc(92*var(--u));margin:0 auto}
  #evidence-chapter .dwhy.dtg.v6sys-pile{padding-top:calc(6.9*var(--u))}
  /* v6 pass 5 (Max: new third-person copy): the result line is longer, so the dark card is a little wider in text and its
     supporting sentence appears only once the cards straighten (it is half covered at rest). */
  .v6sys-pile .dtg-c{max-width:calc(31*var(--u))}
  .v6sys-pile .dtg-cs{opacity:0;font-size:calc(1.7*var(--u));line-height:1.4;margin:calc(2.4*var(--u)) auto 0;max-width:calc(30*var(--u));text-align:center;transition:opacity .5s ease .2s}
  .v6sys-pile .dtg-pile:hover .dtg-cs,.v6sys-pile .dtg-pile:focus-within .dtg-cs,.v6sys-pile .dtg-pile.-open .dtg-cs{opacity:.72}
  .v6sys-pile .dtg-pile{align-items:stretch}
  /* Live card at desktop size: metrics centred in the taller card instead of sitting at its bottom edge */
  #ablauf .klb.saw-c3 .saw-dash{grid-template-rows:auto auto;align-content:center;row-gap:calc(3.2*var(--u));padding:calc(3.4*var(--u))}
  #ablauf .klb.saw-c3 .saw-metric b{font-size:calc(4.2*var(--u))}
  #ablauf .klb.saw-c3 .saw-metric em{font-size:calc(1.3*var(--u));margin-top:calc(.9*var(--u));white-space:nowrap}
  #ablauf .klb.saw-c3 .saw-status{font-size:calc(1.5*var(--u))}
}