@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)}
  /* 2026-10-09 (Max, laptop fit): on windows under 900 px tall the unit and the media width also follow the height, so the
     layout approved at 1440x900 keeps its proportions on 13-inch laptops (1440x815, 1366x768, 1280x720). 900+ tall: unchanged. */
  @media (max-height:899px){:root{--u:clamp(7px,min(.625vw,calc(1.45vh - 4px)),12px);--dw:min(69.3vw,1128px,calc(160vh - 442px))}}

  /* ── 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 .25s,transform 1.2s cubic-bezier(.16,1,.3,1)}   /* Max 2026-10-07: hover rewards immediately (was .4s after .2s) */
  .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}
  /* ── Hero film (Max 2026-10-07): the finished GMAX hero video in Cuberto's media band (research/desktop-v3/hero-mechanic.md 1d):
     the full container width (1214 px of 1440 = the wrap's content box; 1360 max above 1600), aspect 16:9, radius 2rem
     (18 px @1440, 20 px from 1600), no browser chrome; opened by the same inset + scale reveal as before. The H1 follows
     Cuberto's ratio to the media: 9rem = 5.625vw, 90 px max (H1 = 6.7 % of the media width, as on cuberto.com). ── */
  .hero .stage{max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .hero > .wrap{gap:0!important}   /* the flex gap added 15 px to the measured 90 px paragraph -> media air; the stage margin alone is Cuberto's 10rem */
  .hero .trust{display:none!important}   /* Max 2026-10-07: the three check chips under the film removed (Cuberto's hero ends with the media) */
  .hero .browser.reel{display:none!important}
  .hero-film{display:block;position:relative;width:100%;aspect-ratio:16/9;border-radius:min(1.25vw,20px);overflow:hidden;background:#000;transform:translateZ(0)}
  .hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;will-change:transform;transform:translateY(var(--film-y,0%)) scale(1.05)}   /* Cuberto PreviewSection.magicParallax: media scale 1.05, y -10 % -> 10 % scrubbed over the box's pass (research/desktop-v2/from-phone/cuberto-js/...XzcFPccV.js) */
  .hero h1{font-size:min(5.056vw,81px)!important}   /* Max 2026-10-07 'same dimensions as Cuberto': the long line's ink = Cuberto's 774 px @1440 (53.75 vw) and 860 px from 1600 (our caps run 10.63 x font-size, Cuberto's lowercase 9.56 x), so equal font-size (81 px) read wider; width is matched instead */

  /* ── 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))}
}

/* ── 2026-10-06: "Wie wir Partnerschaften aufbauen" (replaces Target client + pile; Max REBUILD, then convergence pass:
   no imagery, one consequence line, resolution + arrow into Magic Fingers). Cuberto Overview/About: hairline, hanging label
   column 30.5u, statement right. Grey = connective words, black = the values and the result. ── */
.dpart{display:none}
@media (min-width:941px){
  #evidence-chapter .dpart{display:grid;grid-template-columns:calc(30.5*var(--u)) 1fr;width:var(--dw);margin:calc(15*var(--u)) auto 0;border-top:1px solid #000;padding:calc(4.5*var(--u)) 0 0}
  .dpart .dpart-lab{font-size:calc(1.5*var(--u));line-height:1.3;font-weight:500;letter-spacing:0;margin:0;max-width:22ch;color:#000}
  .dpart .dpart-s{font-size:min(calc(5.1*var(--u)),50px);line-height:1.14;letter-spacing:-.02em;font-weight:400;margin:0;color:#8A8A93;text-wrap:pretty}
  .dpart .dpart-s b,.dpart .dpart-c b{font-weight:400;color:#0B0B0F}
  .dpart .dpart-s sup{display:inline;font-size:calc(1.5*var(--u))!important;line-height:0;vertical-align:.95em;margin:0 calc(.7*var(--u)) 0 0;color:#000!important;font-weight:500;letter-spacing:.02em}
  .dpart .dpart-s b{white-space:normal}
  .dpart .dpart-c{font-size:min(calc(2.6*var(--u)),26px);line-height:1.35;letter-spacing:-.01em;color:#8A8A93;margin:calc(3.6*var(--u)) 0 0;max-width:38ch;text-wrap:pretty}
  .dpart .dpart-end{display:flex;align-items:center;justify-content:space-between;gap:calc(3*var(--u));margin-top:calc(5.4*var(--u));padding:calc(2.6*var(--u)) 0 calc(1.2*var(--u));border-top:1px solid #D9D9DE}
  .dpart .dpart-res{font-size:min(calc(5.1*var(--u)),50px);line-height:1.1;letter-spacing:-.02em;font-weight:400;margin:0;color:#0B0B0F}
  .dpart .dpart-next{flex:none;display:inline-flex;align-items:center;justify-content:center;width:calc(7.2*var(--u));height:calc(7.2*var(--u));border-radius:50%;background:#000;color:#fff;text-decoration:none;overflow:visible;transition:transform .5s cubic-bezier(.4,0,0,1)}
  .dpart .dpart-next i{font-style:normal;font-size:calc(2.4*var(--u));line-height:1;transition:transform .5s cubic-bezier(.4,0,0,1)}
  .dpart .dpart-next:hover{transform:translateY(calc(.8*var(--u)))}
  .dpart .dpart-next:hover i{transform:translateY(calc(.2*var(--u)))}
}

/* ── 2026-10-06 (Max convergence): homepage Process = ONE motion piece (.dhp) replaces the three stage cards (.saw) on desktop;
   homepage Pricing = two products side by side, each shown by its own loop (.dhpr). Cuberto Summary rhythm (15u/12u). ── */
.dhp,.dhpr,.dhpr-terms{display:none}
@media (min-width:941px){
  #ablauf .saw{display:none!important}
  #ablauf .dhp{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);column-gap:calc(7*var(--u));align-items:start;width:var(--dw);margin:calc(9*var(--u)) auto 0}
  .dhp-media{border-radius:calc(2*var(--u));overflow:hidden;aspect-ratio:1200/750;background:#141a16}
  .dhp-media video{width:100%;height:100%;object-fit:cover;display:block}
  .dhp-steps{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
  .dhp-steps .dhp-row{display:grid;grid-template-columns:calc(4.6*var(--u)) 1fr;padding:calc(2.6*var(--u)) 0;border-bottom:1px solid rgba(255,255,255,.18);opacity:.38;cursor:pointer;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
  .dhp-steps .dhp-row.on{opacity:1}
  .dhp-n{font-size:calc(1.5*var(--u));color:rgba(255,255,255,.7);padding-top:calc(.6*var(--u))}
  .dhp-steps h3{font-size:calc(3*var(--u))!important;line-height:1.1!important;font-weight:500!important;letter-spacing:-.01em!important;color:#fff;margin:0}
  .dhp-steps p{font-size:calc(1.7*var(--u));line-height:1.45;color:rgba(255,255,255,.72);margin:calc(.9*var(--u)) 0 0}
  .dhp-cta{display:inline-flex;align-items:center;gap:calc(1.4*var(--u));margin-top:calc(4.2*var(--u));color:#fff;text-decoration:none}
  .dhp-go{margin:0;font-size:calc(1.8*var(--u));font-weight:500}
  .dhp-cta i{display:inline-flex;align-items:center;justify-content:center;width:calc(5.4*var(--u));height:calc(5.4*var(--u));border-radius:50%;background:#fff;color:#000;font-style:normal;font-size:calc(2*var(--u));transition:transform .5s cubic-bezier(.4,0,0,1)}
  .dhp-cta:hover i{transform:translateX(calc(.8*var(--u)))}
  #preise .dhpr{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(5.4*var(--u));margin-top:calc(9*var(--u))}
  .dhpr-media{border-radius:calc(2*var(--u));overflow:hidden;aspect-ratio:900/700;background:#21170f}
  .dhpr-media video{width:100%;height:100%;object-fit:cover;display:block}
  .dhpr-head{display:flex;align-items:baseline;justify-content:space-between;gap:calc(2*var(--u));margin-top:calc(3*var(--u));padding-top:calc(2.4*var(--u));border-top:1px solid #000}
  .dhpr-name{min-height:2.2em;font-size:calc(3.4*var(--u))!important;line-height:1.1!important;font-weight:500!important;letter-spacing:-.01em!important;margin:0}
  .dhpr .pr-amt{font-size:calc(4.4*var(--u));line-height:1;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
  .dhpr .pr-cur-sm{font-size:.6em}
  .dhpr-line{font-size:calc(1.9*var(--u));line-height:1.45;color:#5B5B63;margin:calc(1.4*var(--u)) 0 0;max-width:40ch}
  .dhpr .pr-eg{display:inline-block;margin-top:calc(1.8*var(--u))}
  #preise .dhpr-terms{display:flex;align-items:center;justify-content:space-between;gap:calc(4*var(--u));margin-top:calc(6*var(--u));padding:calc(3*var(--u)) 0;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12)}
  #preise .dhpr-terms .pr-reversal{margin:0;font-size:calc(2.2*var(--u));line-height:1.35;font-weight:500;max-width:46ch}
  #preise .dhpr-terms .pr-cta{flex:none;margin:0}
}

/* ── 2026-10-07 (Max refinement): Process = text column LEFT, motion RIGHT filling a 5:4 media area that matches the
   column height; the "preview comes first" band is removed on desktop. Pricing = one ROW per product (copy + price left,
   compact loop right), the loops secondary to the prices. ── */
@media (min-width:941px){
  #ablauf .dhp{grid-template-columns:minmax(0,1fr) minmax(0,1.42fr);align-items:stretch}
  #ablauf .dhp-side{order:1;display:flex;flex-direction:column;justify-content:space-between}
  #ablauf .dhp-media{order:2;aspect-ratio:5/4;background:#101312}
  #ablauf .band{display:none!important}
  #preise .dhpr{display:block;margin-top:calc(7*var(--u))}
  .dhpr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34%);column-gap:calc(6*var(--u));align-items:center;padding:calc(3.6*var(--u)) 0;border-top:1px solid rgba(0,0,0,.14)}
  .dhpr-row .dhpr-media{aspect-ratio:3/2;border-radius:calc(1.6*var(--u))}
  .dhpr-row .dhpr-head{margin:0;padding:0;border:0;display:flex;align-items:baseline;justify-content:space-between;gap:calc(3*var(--u));max-width:calc(62*var(--u))}
  .dhpr-row .dhpr-name{min-height:0!important;font-size:calc(3.8*var(--u))!important}
  .dhpr-row .pr-amt{font-size:calc(5.6*var(--u))}
  .dhpr-row .dhpr-line{margin-top:calc(1.6*var(--u))}
  #preise .dhpr-terms{margin-top:0}
  .dhpr-row:first-child{border-top:0;padding-top:0}
}

/* ── 2026-10-07 (Max final refinement): partnership explanation in ONE treatment; Process media spans exactly from the
   line above the first stage to the line below the last (grid row shared with the stage list, CTA in its own row). ── */
@media (min-width:941px){
  .dpart .dpart-c{color:#5B5B63}
  .dpart .dpart-c b{color:inherit;font-weight:inherit}
  #ablauf .dhp{grid-template-rows:auto auto;align-items:start;row-gap:0}
  #ablauf .dhp-side{display:contents}
  #ablauf .dhp-steps{grid-column:1;grid-row:1}
  #ablauf .dhp-cta{grid-column:1;grid-row:2;justify-self:start}
  #ablauf .dhp-media{grid-column:2;grid-row:1;align-self:stretch;aspect-ratio:auto;height:auto;min-height:0}
  #ablauf .dhp-media{position:relative}
  #ablauf .dhp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}

@media (min-width:1700px){ #ablauf .dhp{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)} #ablauf .dhp-steps .dhp-row{padding:calc(1.9*var(--u)) 0} #ablauf .dhp-steps p{font-size:calc(1.45*var(--u))} }   /* keeps the media ~1.45:1 when --dw caps and --u grows */

/* ── 2026-10-07 (Max final refinement): Pricing composed around the two products. Cuberto Summary rows: index column,
   product + line + link, the price as the loudest element of the row, the loop as a framed secondary visual; black hairline
   opens the list, light hairlines between rows, terms row closes it. ── */
@media (min-width:941px){
  #preise .dhpr{margin-top:calc(9*var(--u));border-top:1px solid #000}
  #preise .dhpr-row{display:grid;grid-template-columns:calc(7*var(--u)) minmax(0,1fr) auto minmax(0,38%);column-gap:calc(4.4*var(--u));align-items:center;padding:calc(4.8*var(--u)) 0;border-top:1px solid rgba(0,0,0,.12)}
  #preise .dhpr-row:first-child{border-top:0;padding-top:calc(4.8*var(--u))}
  .dhpr-idx{align-self:start;font-size:calc(1.5*var(--u));color:#8A8A93;padding-top:calc(1.2*var(--u))}
  #preise .dhpr-row .dhpr-name{font-size:calc(4.2*var(--u))!important;line-height:1.05!important;letter-spacing:-.02em!important;margin:0;min-height:0!important}
  #preise .dhpr-row .dhpr-line{font-size:calc(1.8*var(--u));line-height:1.45;color:#5B5B63;margin:calc(1.6*var(--u)) 0 0;max-width:34ch}
  #preise .dhpr-row .pr-eg{display:inline-block;margin-top:calc(2*var(--u))}
  #preise .dhpr-price{align-self:center;font-size:calc(7.6*var(--u))!important;line-height:1;font-weight:400;letter-spacing:-.04em;white-space:nowrap;color:#0B0B0F}
  #preise .dhpr-price .pr-cur-sm{font-size:.45em;letter-spacing:0;vertical-align:.9em;margin-left:.08em}
  #preise .dhpr-row .dhpr-media{aspect-ratio:3/2;border-radius:calc(1.8*var(--u));overflow:hidden;background:#111;box-shadow:0 calc(2*var(--u)) calc(5*var(--u)) rgba(10,12,20,.10)}
  #preise .dhpr-row .dhpr-media video{width:100%;height:100%;object-fit:cover;display:block}
  #preise .dhpr-terms{margin-top:0;border-top:1px solid #000;padding:calc(3.6*var(--u)) 0}
}

@media (min-width:941px){
  #preise .pr-ledger{border-top:0!important;padding-top:0!important;margin-top:0!important}
  #preise .dhpr-row{grid-template-columns:calc(5*var(--u)) minmax(0,1fr) minmax(0,40%)}
  #preise .dhpr-price{display:block;font-size:calc(8.4*var(--u))!important}
  #preise .dhpr-row .dhpr-name{font-size:calc(2.8*var(--u))!important;margin-top:calc(2*var(--u));letter-spacing:-.01em!important}
  #preise .dhpr-row .dhpr-line{max-width:40ch}
}

/* ── 2026-10-07 (Max structure pass): "Wie wir bauen" = three ideas visible at once, each a link; replaces the 5-card
   scroll stack on desktop (the stack stays in the markup, hidden). Phone untouched. ── */
.dhow{display:none}
@media (min-width:941px){
  .dstack{display:none!important}
  .dhow{display:block;margin-top:calc(9*var(--u))}
  .dhow-h{font-size:calc(5.6*var(--u));line-height:1.05;font-weight:500;letter-spacing:-.02em;margin:0;max-width:20ch;color:var(--ink,#0B0B0F)}
  .dhow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(2.4*var(--u));margin-top:calc(6*var(--u))}
  .dhow-c{position:relative;display:block;border-radius:calc(2*var(--u));background:#000;color:#fff;text-decoration:none;overflow:hidden;padding:0 0 calc(3.2*var(--u));transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .dhow-art{display:block;aspect-ratio:718/447;overflow:hidden}
  .dhow-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1)}
  .dhow-n{display:block;margin:calc(2.4*var(--u)) calc(3*var(--u)) 0;font-size:calc(1.4*var(--u));color:rgba(255,255,255,.55)}
  .dhow-c h3{margin:calc(.8*var(--u)) calc(3*var(--u)) 0;font-size:calc(3*var(--u))!important;line-height:1.1!important;font-weight:500!important;letter-spacing:-.01em!important;color:#fff}
  .dhow-c p{margin:calc(1.4*var(--u)) calc(3*var(--u)) 0;font-size:calc(1.6*var(--u));line-height:1.5;color:rgba(255,255,255,.68);max-width:36ch}
  .dhow-go{position:absolute;right:calc(2.4*var(--u));top:calc(2.4*var(--u));width:calc(4.8*var(--u));height:calc(4.8*var(--u));border-radius:50%;background:#fff;color:#000;font-style:normal;font-size:calc(1.8*var(--u));display:flex;align-items:center;justify-content:center;transform:scale(.85);transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .dhow-c:hover .dhow-art img{transform:scale(1.05)}
  .dhow-c:hover .dhow-go{transform:scale(1)}
}

/* ── 2026-10-07 (Max structure pass): desktop pacing. Rhythm, not one value: section tops 15u > 11u, bottoms 12u > 8u,
   heading-to-content 12u > 8u, internal transitions (partnership > MF, work > concepts) about a third shorter. Headings and
   media keep their own sizes. ── */
@media (min-width:941px){
  #studio{padding-top:calc(11*var(--u))!important}
  .dhow{margin-top:calc(7*var(--u))!important}
  .dhow-grid{margin-top:calc(4.8*var(--u))!important}
  #evidence-chapter .dpart{margin-top:calc(10*var(--u))!important}
  #evidence-chapter .mfcase{padding:calc(8*var(--u)) 0 calc(10*var(--u))!important}
  #beispiele{padding:calc(11*var(--u)) 0 calc(8*var(--u))!important}
  #beispiele .proj-cta{margin-top:calc(7*var(--u))!important}
  .dwork{margin-top:calc(8*var(--u))!important}
  #beispiele .dcon-head{margin-top:calc(10*var(--u))!important}
  #ablauf.sec{padding-top:calc(11*var(--u))!important;padding-bottom:calc(9*var(--u))!important}
  #ablauf .dhp{margin-top:calc(6.5*var(--u))!important}
  #preise.sec{padding-top:calc(11*var(--u))!important;padding-bottom:calc(6*var(--u))!important}
  #preise .dhpr{margin-top:calc(6.5*var(--u))!important}
  #faq.sec{padding:calc(11*var(--u)) 0 calc(8*var(--u))!important}
  #faq .faq-list{margin-top:calc(8*var(--u))!important}
  #faq details.faq-q summary{padding:calc(3.2*var(--u)) 0!important}
}

/* ── 2026-10-07 (Max final polish): "Wie wir bauen" = the phone .svc accordion at desktop proportions (overrides the 3-up grid). ── */
@media (min-width:941px){
  .dhow-grid{display:none!important}
  .dhow-t{font-size:calc(6.8*var(--u));line-height:1;font-weight:500;letter-spacing:-.02em;margin:0;color:var(--ink,#0B0B0F)}
  .dhow .dhow-h{font-size:calc(3*var(--u));line-height:1.22;font-weight:400;letter-spacing:-.01em;max-width:30ch;margin:calc(2.4*var(--u)) 0 0;color:#2A2A30}
  .dhow-list{margin-top:calc(4.8*var(--u));display:flex;flex-direction:column;gap:calc(1.2*var(--u))}
  .dhow-c{position:relative;border-radius:calc(2.2*var(--u));background:#EEEEEE;color:#0B0B0F;overflow:hidden;padding:0;transition:background .45s ease,color .45s ease;transform:none!important}
  .dhow-c.open{background:#000;color:#fff}
  .dhow-head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:calc(7*var(--u)) 1fr auto;align-items:center;width:100%;padding:calc(3*var(--u)) calc(3.6*var(--u));cursor:pointer}
  .dhow-head:focus-visible{outline:2px solid currentColor;outline-offset:-6px;border-radius:calc(2.2*var(--u))}
  .dhow-n{font-size:calc(1.5*var(--u));opacity:.45;margin:0;color:inherit}
  .dhow-c h3{margin:0;font-size:calc(3.6*var(--u))!important;line-height:1.1!important;font-weight:400!important;letter-spacing:-.01em!important;color:inherit}
  .dhow-pm{position:relative;width:calc(4.4*var(--u));height:calc(4.4*var(--u));border-radius:50%;border:1px solid currentColor;opacity:.5;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s}
  .dhow-pm::before,.dhow-pm::after{content:"";position:absolute;left:50%;top:50%;width:38%;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
  .dhow-pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .dhow-c.open .dhow-pm::after{transform:translate(-50%,-50%) rotate(0)}
  .dhow-c:not(.open):hover .dhow-pm{opacity:1}
  .dhow-acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
  .dhow-c.open .dhow-acc{grid-template-rows:1fr}
  .dhow-in{overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);column-gap:calc(4*var(--u))}
  .dhow-tx{padding:0 0 calc(3.6*var(--u)) calc(10.6*var(--u))}
  .dhow-tx p{margin:0;font-size:calc(2*var(--u));line-height:1.45;color:rgba(255,255,255,.8);max-width:40ch}
  .dhow-more{display:inline-flex;align-items:center;gap:calc(1.4*var(--u));margin-top:calc(3*var(--u));color:#fff;text-decoration:none}
  .dhow-more .dhow-go{margin:0;font-size:calc(1.7*var(--u));color:#fff;position:static;width:auto;height:auto;background:none;transform:none}
  .dhow-more i{display:inline-flex;align-items:center;justify-content:center;width:calc(4.6*var(--u));height:calc(4.6*var(--u));border-radius:50%;background:#fff;color:#000;font-style:normal;font-size:calc(1.8*var(--u))}
  .dhow-c .dhow-art{display:block;align-self:end;aspect-ratio:718/447;margin-top:calc(-3*var(--u))}
  .dhow-c .dhow-art img{width:100%;height:100%;object-fit:cover;display:block}
}

/* ── 2026-10-07 (Max final polish): last compression pass + one section-heading scale (8u/72px > 7.1u/64px at 1440). ── */
@media (min-width:941px){
  #evidence-chapter .mfcase{padding-bottom:calc(6*var(--u))!important}
  #beispiele{padding-top:calc(9*var(--u))!important;padding-bottom:calc(5*var(--u))!important}
  #ablauf.sec{padding-top:calc(9*var(--u))!important}
  #faq.sec{padding-bottom:calc(4*var(--u))!important}
  .d-outro{height:calc(58*var(--u))!important}
  #beispiele .proj-head h2,#ablauf .ab-head h2,#preise > .wrap > h2,#faq h2,#beispiele .dcon-head h2,.d-outro h2,.dhow-t{font-size:calc(7.1*var(--u))!important}
}

/* ── 2026-10-07 (Max final polish 2): "Wie wir bauen" title = the "Wer wir sind" label exactly; FAQ + pre-footer titles use
   the page's existing secondary heading size (Magic Fingers H2, 5.6u); FAQ and pre-footer a little tighter. ── */
@media (min-width:941px){
  .dhow-t{font-size:calc(1.6*var(--u))!important;line-height:1.1!important;font-weight:400!important;letter-spacing:0!important;margin:.35em 0 0!important}
  .dhow .dhow-h{margin-top:calc(2*var(--u))!important}
  #faq h2,.d-outro h2{font-size:calc(5.6*var(--u))!important}
  #faq.sec{padding-top:calc(9*var(--u))!important}
  #faq .faq-list{margin-top:calc(6*var(--u))!important}
  .d-outro{height:calc(50*var(--u))!important}
}

/* ── 2026-10-07 (Max): HERO-ONLY display type for "Webdesign und Online-Marketing": Archivo Expanded 700 (wdth 125), the wide
   flat-topped geometric caps of the GMAX wordmark. Chosen over Bricolage 800 and Anybody 800 wdth 140 by visual-critic
   (research/desktop-hero/hero_{base,a,b,c}.png). Font-size untouched (locked by the hero-film session). Rest of the site keeps Inter. ── */
@font-face{font-family:'GmxHero';src:url('fonts/hero/archivo.woff2') format('woff2');font-weight:700;font-stretch:125%;font-display:swap}
@media (min-width:941px){
  .hero h1{font-family:'GmxHero','InterHeroVar',sans-serif!important;font-weight:700!important;font-stretch:125%;letter-spacing:-.025em!important;line-height:.95!important}
}

/* ── 2026-10-07 (Max rhythm pass): "View our projects" sits right under the Concepts; the two largest remaining
   section gaps (Process > Pricing 183px, Pricing > FAQ 156px at 1440) brought to the page's ~130px rhythm. ── */
@media (min-width:941px){
  #beispiele .proj-cta{margin-top:calc(3.6*var(--u))!important}
  #beispiele .dcon-head{margin-top:calc(8.5*var(--u))!important}
  #preise.sec{padding-top:calc(6*var(--u))!important}
  #faq.sec{padding-top:calc(6.5*var(--u))!important}
}

/* ── 2026-10-07 (Max concepts convergence): the COMPLETE hero film is visible on load with a small gap below it.
   The top padding and the title-to-film margin also scale with viewport height, and the film box (16:9) is capped
   by the height that is left: width <= (100vh - stage top - gap) x 16/9. On tall screens nothing changes (Cuberto's
   box); on 900-1080 px tall viewports the box shrinks just enough. Title, subline, film and its animation untouched. ── */
@media (min-width:941px){
  .hero{--hP:max(100px,min(12.5vw,200px,15vh));--hF:min(5.056vw,81px);--hS:min(1.5vw,24px);--hM:max(32px,min(6.25vw,100px,6vh));--hG:max(20px,min(3.2vh,36px));
    padding-top:var(--hP)!important}
  .hero .stage{margin-top:var(--hM)!important;
    width:min(100%,calc((100vh - var(--hP) - 1.9 * var(--hF) - 2.4 * var(--hS) - min(2vw,32px) - var(--hM) - var(--hG)) * 16 / 9))!important}
}

/* ── 2026-10-07 (Max concepts convergence): "View our concepts" sits in the free space of the LEFT column under
   Renovation and ends on the same lower boundary as Permanent Makeup; the old centred CTA row is gone on desktop
   (phone keeps its own). ── */
@media (min-width:941px){
  #beispiele > .wrap > .proj-cta,#beispiele .proj-cta{display:none!important}
  #beispiele .dwork-col{position:relative}
  #beispiele .dwork-col .dcon-cta{position:absolute;left:50%;bottom:var(--cta-b,0px);transform:translateX(-50%);margin:0;white-space:nowrap}   /* centred under Renovation, in the middle of the gap above the lower boundary (Max final cleanup) */
}
.dcon-cta{display:none}
@media (min-width:941px){#beispiele .dwork-col .dcon-cta{display:block}}

/* ── 2026-10-07 (Max final cleanup): How We Build artwork composed for the DESKTOP card. The art (black ground, made for the
   phone card) becomes a full-height layer of the open card, anchored right behind the copy, instead of a 46 % phone slot;
   the open card gets a little more height so the art has room. Structure, copy and accordion unchanged. ── */
@media (min-width:941px){
  .dhow-c .dhow-head,.dhow-c .dhow-tx{position:relative;z-index:1}
  .dhow-c .dhow-in{grid-template-columns:minmax(0,1fr)!important}
  .dhow-c.open .dhow-in{min-height:calc(27*var(--u))}
  .dhow-c .dhow-tx{max-width:46%}
  .dhow-c .dhow-art{position:absolute!important;top:0;right:0;bottom:0;height:100%;width:auto!important;aspect-ratio:718/447;margin:0!important;z-index:0;opacity:0;transition:opacity .5s ease .1s;pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
  .dhow-c.open .dhow-art{opacity:1}
  .dhow-c .dhow-art img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
}

/* ── 2026-10-07 (Max final content + funnel pass): hero micro-adjustment. Title a little smaller, subline 1px smaller,
   title/subline a touch higher, more air under the film; the film box keeps fitting the first viewport (same formula,
   new values). Font, film, subline copy unchanged. ── */
@media (min-width:941px){
  .hero{--hP:max(92px,min(11vw,176px,13vh));--hF:min(4.75vw,76px);--hS:calc(min(1.5vw,24px) - 1px);--hG:max(32px,min(5.2vh,60px))}
  .hero h1{font-size:var(--hF)!important}
  .hero .sub{font-size:var(--hS)!important;margin-top:min(1.7vw,28px)!important}
  .hero .stage{width:min(100%,calc((100vh - var(--hP) - 1.9 * var(--hF) - 2.4 * var(--hS) - min(1.7vw,28px) - var(--hM) - var(--hG)) * 16 / 9))!important}
}

/* ── 2026-10-07 (Max final content + funnel pass): pricing > "Request a preview" > a short request dialog (plan preselected). ── */
.pvq{display:none}
@media (min-width:941px){
  .dhpr-acts{display:flex;align-items:center;gap:calc(2.4*var(--u));margin-top:calc(2.4*var(--u))}
  .dhpr-acts .pr-eg{margin:0!important}
  .dhpr-req{all:unset;box-sizing:border-box;cursor:pointer;background:#0B0B0F;color:#fff;font-size:calc(1.5*var(--u));line-height:1;padding:calc(1.4*var(--u)) calc(2.2*var(--u));border-radius:999px;transition:background .3s,transform .3s}
  .dhpr-req:hover{background:#2a2a30;transform:translateY(-1px)}
  .dhpr-req:focus-visible{outline:2px solid #0B0B0F;outline-offset:3px}
  .pvq[open]{display:block}
  .pvq{position:fixed;inset:0;margin:auto;height:fit-content;width:min(640px,92vw);max-height:92vh;padding:0;border:0;border-radius:calc(2.2*var(--u));background:#fff;color:#0B0B0F;box-shadow:0 40px 120px rgba(0,0,0,.35);overflow:auto}
  .pvq::backdrop{background:rgba(11,11,15,.55);backdrop-filter:blur(4px)}
  .pvq-f,.pvq-ok{position:relative;padding:calc(4.4*var(--u)) calc(4.4*var(--u)) calc(3.6*var(--u))}
  .pvq-x{all:unset;position:absolute;right:calc(2.2*var(--u));top:calc(2.2*var(--u));width:40px;height:40px;border-radius:50%;cursor:pointer;background:#F1F1F1}
  .pvq-x span::before,.pvq-x span::after{content:"";position:absolute;left:12px;top:19px;width:16px;height:1.5px;background:#0B0B0F;transform:rotate(45deg)}
  .pvq-x span::after{transform:rotate(-45deg)}
  .pvq-x:focus-visible{outline:2px solid #0B0B0F;outline-offset:2px}
  .pvq-t{margin:0;font-size:calc(3.6*var(--u))!important;line-height:1.05!important;font-weight:500!important;letter-spacing:-.02em!important}
  .pvq-s{margin:calc(1.2*var(--u)) 0 0;color:#55555C;font-size:calc(1.7*var(--u));line-height:1.4}
  .pvq-plans{display:grid;grid-template-columns:1fr 1fr;gap:calc(1*var(--u));margin-top:calc(3*var(--u))}
  .pvq-plan{position:relative;display:flex;flex-direction:column;gap:4px;padding:calc(1.8*var(--u)) calc(2*var(--u));border-radius:calc(1.4*var(--u));border:1.5px solid #E2E2E2;cursor:pointer;transition:border-color .25s,background .25s}
  .pvq-plan input{position:absolute;opacity:0;pointer-events:none}
  .pvq-pn{font-size:calc(1.7*var(--u));font-weight:500;cursor:pointer}.pvq-pp{font-size:calc(1.5*var(--u));color:#6b6b72}
  .pvq-plan:has(input:checked){border-color:#0B0B0F;background:#0B0B0F;color:#fff}.pvq-plan:has(input:checked) .pvq-pp{color:#cfcfd4}
  .pvq-plan:has(input:focus-visible){outline:2px solid #0B0B0F;outline-offset:3px}
  .pvq-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(1.4*var(--u)) calc(1.2*var(--u));margin-top:calc(2.6*var(--u))}
  .pvq-fl{display:flex;flex-direction:column;gap:6px;font-size:calc(1.35*var(--u));color:#55555C}
  .pvq-full{grid-column:1 / -1}
  .pvq-fl input,.pvq-fl textarea{font:inherit;font-size:calc(1.7*var(--u));color:#0B0B0F;padding:calc(1.2*var(--u)) calc(1.4*var(--u));border:1.5px solid #E2E2E2;border-radius:calc(1*var(--u));background:#fff;resize:vertical}
  .pvq-fl input:focus,.pvq-fl textarea:focus{outline:none;border-color:#0B0B0F}
  .pvq-err{min-height:1.4em;margin:calc(1.2*var(--u)) 0 0;color:#C8102E;font-size:calc(1.45*var(--u))}
  .pvq-go{all:unset;box-sizing:border-box;display:block;width:100%;text-align:center;cursor:pointer;margin-top:calc(.8*var(--u));padding:calc(1.9*var(--u));border-radius:999px;background:#0B0B0F;color:#fff;font-size:calc(1.7*var(--u));font-weight:500;transition:background .3s}
  .pvq-go:hover{background:#2a2a30}.pvq-go:focus-visible{outline:2px solid #0B0B0F;outline-offset:3px}
  .pvq-fine{margin:calc(1.4*var(--u)) 0 0;text-align:center;color:#8a8a90;font-size:calc(1.35*var(--u))}
  .pvq-ok{text-align:center}
  .pvq-tick{display:block;width:64px;height:64px;margin:0 auto calc(2.4*var(--u));border-radius:50%;background:#0B0B0F;position:relative;animation:pvqPop .5s cubic-bezier(.34,1.56,.64,1)}
  .pvq-tick::after{content:"";position:absolute;left:23px;top:16px;width:14px;height:26px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
  @keyframes pvqPop{from{transform:scale(.4);opacity:0}}
  .pvq-altw{margin:0}
  .pvq-alt{display:inline-block;margin-top:calc(2*var(--u));color:#0B0B0F;font-size:calc(1.5*var(--u));text-decoration:underline;text-underline-offset:4px}
  .pvq-ok .pvq-go{margin-top:calc(2.4*var(--u))}
}

/* ── 2026-10-07 (Max final convergence): Selected Work + Concepts titles sit in the open top of the staggered (offset) column
   instead of their own row; the phone keeps its .proj-head. Card sizes and stagger unchanged. ── */
.dwk-head{display:none}
@media (min-width:941px){
  #beispiele .proj-head{display:none!important}
  #beispiele .dwork-col.-offset:has(.dwk-head){padding-top:0!important}
  #beispiele .dwk-head{display:block;min-height:calc(11*var(--u));margin-bottom:calc(-6*var(--u))}   /* card = head + 4u (column gap 10u - 6u), never less than the 15u stagger */
  #beispiele .dwork-col.-offset:has(.dwk-head){container-type:inline-size}
  #beispiele .dwk-head h2{margin:0;font-size:min(calc(7.1*var(--u)),14.5cqi);white-space:nowrap;line-height:1;font-weight:500;letter-spacing:-.02em}
  #beispiele .dwk-head .sec-lead{margin:calc(1.6*var(--u)) 0 0;font-size:calc(1.8*var(--u));text-align:left;max-width:none}
  #beispiele .dwork.dwork--two{margin-top:0!important}
  #beispiele .dwork.dwork--two + .dwork.dwork--two,#beispiele .dwork.dwork--two ~ .dwork.dwork--two{margin-top:calc(13*var(--u))!important}
}

/* ── 2026-10-07 (Max final convergence): pricing = ONE red "Request a preview" under the options (the brand red, used here
   only; white text 4.55:1); per-row buttons removed; example links open the real example sites in an overlay; compact form. ── */
.exv{display:none}
@media (min-width:941px){
  /* the site's .pill-liquid mechanic in the brand red: rest = white, red outline + text; hover = the red liquid fill rises, text white */
  #preise .pr-cta.pr-cta--main{background:#fff!important;border:1.5px solid var(--brand,#ED0019)!important;color:var(--brand,#ED0019)!important}
  #preise .pr-cta.pr-cta--main .pl-fill{background:var(--brand,#ED0019)!important}
  #preise .pr-cta.pr-cta--main:hover,#preise .pr-cta.pr-cta--main:focus-visible{color:#fff!important;border-color:var(--brand,#ED0019)!important}
  #preise .pr-cta.pr-cta--main:focus-visible{outline:2px solid #0B0B0F;outline-offset:3px}
  #preise .pr-eg{cursor:pointer}
  .exv[open]{display:flex;flex-direction:column}
  .exv{position:fixed;inset:0;margin:auto;width:min(1240px,94vw);height:min(900px,90vh);padding:0;border:0;border-radius:calc(1.6*var(--u));overflow:hidden;background:#F3F3F3;box-shadow:0 40px 120px rgba(0,0,0,.4)}
  .exv::backdrop{background:rgba(11,11,15,.6);backdrop-filter:blur(4px)}
  .exv-bar{flex:none;height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#ECECEC;border-bottom:1px solid #DCDCDC}
  .exv-bar i{width:11px;height:11px;border-radius:50%;background:#D2D2D2}
  .exv-url{margin-left:18px;height:26px;min-width:280px;border-radius:7px;background:#fff;font-size:13px;line-height:26px;color:#55555C;padding:0 12px}
  .exv-x{all:unset;margin-left:auto;position:relative;width:32px;height:32px;border-radius:50%;cursor:pointer;background:#fff}
  .exv-x span::before,.exv-x span::after{content:"";position:absolute;left:9px;top:15px;width:14px;height:1.5px;background:#0B0B0F;transform:rotate(45deg)}
  .exv-x span::after{transform:rotate(-45deg)}
  .exv-x:focus-visible{outline:2px solid #0B0B0F;outline-offset:2px}
  .exv-view{position:relative;flex:1;overflow:hidden}
  .exv-view iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
  .pvq{width:min(520px,92vw)!important}
  .pvq-f,.pvq-ok{padding:calc(3.6*var(--u)) calc(3.6*var(--u)) calc(3*var(--u))!important}
  .pvq-plans{margin-top:calc(2.4*var(--u))!important}
  .pvq-grid{grid-template-columns:1fr!important;margin-top:calc(2*var(--u))!important}
  .pvq-err{min-height:1.2em!important}
}

.pvq-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
@media (min-width:941px){.pvq-go:disabled{opacity:.6;cursor:wait}}

/* 2026-10-07 (Max): Photography concept card = Renovation's 3:4 footprint; the square loop sits whole in the middle, a
   blurred enlarged copy of the same loop fills above/below (no crop of the approved video, no distortion). */
@media (min-width:941px){
  .dwk-fit{background:#1F5C5A}
  .dwk-fit > img:not(.dwk-bg),.dwk-fit > video:not(.dwk-bgv){object-fit:contain!important;z-index:2}
  .dwk-fit > .dwk-bg,.dwk-fit > .dwk-bgv{z-index:1;object-fit:cover!important;filter:blur(26px) saturate(1.1) brightness(.85);transform:scale(1.25)!important}
  .dwk-fit > video:not(.dwk-bgv){z-index:3}
}
/* 2026-10-09 (Max, laptop fit): hero title follows the window height too on short laptop windows (900+ tall unchanged) */
@media (min-width:941px) and (max-height:999px){
  .hero{--hF:min(4.75vw,76px,calc(11.6vh - 42px))}   /* the title is never wider than the hero film on laptop heights */
}
/* 2026-10-09: the Selected work / Concepts column titles never overflow their column ("Ausgewaehlte Arbeiten" ran 180 px past it) */
@media (min-width:941px){.dwk-head h2{white-space:normal!important;text-wrap:balance}}