/* Desktop SUBPAGES (Examples first; Process, Pricing, About, Contact follow). v1 DRAFT 2026-10-02, owner eye pending. Authorities: Cuberto desktop = page mechanics / proportion / spacing (research/desktop-sub/examples/cuberto-projects.md), the approved desktop homepage = Gmax visual system (assets/desktop-v2.css: --u, --dw, cards, intro rows, FAQ, outro, footer). Everything here is desktop only (>= 941px); the single <= 940px rule keeps the desktop blocks off the phone. */ @media (max-width:940px){.dsub,.dsub-h1-d,.d-outro,.dfoot{display:none}.dsub-only{display:none!important}} @media (min-width:941px){ /* the old subpage blocks give way to the desktop structure (the phone keeps them) */ .dsub-old{display:none!important} .dsub{display:block} .dsub-w{width:var(--dw);margin:0 auto} /* header = homepage behaviour: visible at the top, bar + hairline once scrolled (mg.css hides it until .scrolled) */ .nav{transform:none} /* ── Hero (Cuberto EntrylistSection @1440: section padding-top 20rem, H1 9rem / 100 % / 500 / -.01em centred, text 2.4rem / 120 % / .02em at +3.2rem) ── */ h1.dsub-h1{position:static;display:block;width:var(--dw);height:auto;margin:0 auto;padding:calc(13*var(--u)) 0 0;overflow:visible;clip:auto;white-space:normal;border:0; font-family:'InterHeroVar',Inter,sans-serif;font-size:calc(9*var(--u));line-height:1;font-weight:570;letter-spacing:-.01em;text-align:center;color:var(--ink);text-wrap:balance} .dsub-h1-d{display:inline} .dsub-h1-p{display:none} .dsub-sub{font-size:calc(2.4*var(--u));line-height:1.2;letter-spacing:.02em;font-weight:400;margin:calc(3.2*var(--u)) auto 0;max-width:calc(84*var(--u));text-align:center;color:var(--ink)} html.dsub-pending .dsub-h1-d,html.dsub-pending .dsub-sub{opacity:0} /* ── Filter tabs (Cuberto .filters / .filter: margin 7rem 0 12rem, inline-block, padding .6rem 2.5rem, 2.4rem / 120 % / .02em, active = 1px underline inset 2rem, scaleX 0 -> 1 1 s cubic-bezier(.16,1,.3,1); hover = label roll .8 s, copy .9 -> 1 .4 s) ── */ .dsub-filters{text-align:center;white-space:nowrap;margin:calc(7*var(--u)) 0 calc(12*var(--u))} .dsub-filter{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;margin:0;font:inherit;color:var(--ink);cursor:pointer; display:inline-block;vertical-align:middle;position:relative;padding:calc(.6*var(--u)) calc(2.5*var(--u));font-size:calc(2.4*var(--u));line-height:1.2;letter-spacing:.02em;font-weight:400} .dsub-filter::after{content:"";border-top:1px solid;position:absolute;bottom:0;left:calc(2*var(--u));right:calc(2*var(--u));transform:scaleX(0);transition:transform 1s cubic-bezier(.16,1,.3,1)} .dsub-filter[aria-pressed="true"]::after{transform:scaleX(1)} .dsub-ft{display:block;position:relative;overflow:hidden} .dsub-ft span{display:block;position:relative;transition:transform .8s cubic-bezier(.16,1,.3,1)} .dsub-ft span::after{content:attr(data-text);display:block;position:absolute;top:100%;left:0;right:0;transform:scale(.9);transition:transform .4s} .dsub-filter:hover .dsub-ft span::after,.dsub-filter:focus-visible .dsub-ft span::after{transform:scale(1)} @media (pointer:fine){.dsub-filter:hover .dsub-ft span{transform:translateY(-100%)}} .dsub-filter:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){.dsub-filter::after,.dsub-ft span,.dsub-ft span::after{transition:none}} /* ── Grid (Cuberto .items.-cards: 2 x 50rem columns, space-between in the 998 container = the homepage .dwork grid; row gap 10rem; second column +16.1rem; caption 2rem / 120 % at +3.2rem, "Name description") ── */ .dsub-grid.dwork{margin-top:0} .dsub-grid .dwork-col.-offset{padding-top:calc(16.1*var(--u))} /* Max 2026-10-02: template cards share one level: a two-up row with the grid's column geometry, no stagger */ .dsub-tplrow{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(10.9*var(--u));margin-top:calc(10*var(--u))} .dsub-tplrow.-solo{margin-top:0} .dsub .pjcard.dwk{color:var(--ink)} .dsub-cap{margin:calc(3.2*var(--u)) 0 0;font-size:calc(2*var(--u));line-height:1.2;color:var(--ink)} .dsub-cap b{font-weight:600;margin-right:.35em} .dsub-cap .dwk-cap{display:inline;margin:0;max-width:none;font-size:inherit;line-height:inherit;opacity:1;color:inherit} .dsub-tpl .dwk-media{background:#fff} .dsub .dwk-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);pointer-events:none} /* light posters and stills need an edge on the white page */ .dsub-tpl .dwk-media img{object-position:13% 50%} /* wide hero stills in a square card: keep the name + headline side */ .dsub-work{padding-bottom:calc(12*var(--u))} /* ── Magic Fingers case = the homepage proof component (.mfp3-*) + an intro row (hairline, label | statement) for the quote ── */ .dsub-mf{padding:calc(12*var(--u)) 0 calc(15*var(--u));scroll-margin-top:84px} .dsub-mfp{display:grid;grid-template-columns:minmax(0,1fr) calc(50*var(--u));column-gap:calc(10.9*var(--u));align-items:start} .dsub-mf .mfp3-h{text-wrap:balance;margin-bottom:calc(6*var(--u))} /* heading spans the grid: two lines at most */ .dsub-mfp .mfp3-setup{margin-top:0;font-size:calc(2*var(--u));max-width:calc(46*var(--u))} .dsub-row{display:grid;grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr);align-items:start;border-top:1px solid #000;padding-top:calc(4.2*var(--u))} .dsub-quote{margin:calc(12*var(--u)) 0 0} .dsub-quote figcaption{grid-column:1;grid-row:1;font-size:calc(1.6*var(--u));line-height:1.3;margin:.35em 0 0;padding-right:calc(4*var(--u));color:var(--ink)} .dsub-quote blockquote{grid-column:2;margin:0;font-size:calc(3.4*var(--u));line-height:1.2;letter-spacing:-.01em;font-weight:400;color:var(--ink);text-wrap:balance} /* ── "Was eine Website zusätzlich leisten kann": intro row, then two capability blocks in the content column ── */ .dsub-more{padding:0 0 calc(3*var(--u))} .dsub-more .dwho-label{padding-right:calc(4*var(--u))} .dsub-blk + .dsub-blk{margin-top:calc(10*var(--u));padding-top:calc(4.2*var(--u));border-top:1px solid rgba(0,0,0,.14)} .dsub-blk h3{font-size:calc(4.2*var(--u));line-height:1.1;font-weight:400;letter-spacing:0;margin:0;color:var(--ink)} .dsub-blk .seo-text{font-size:calc(2*var(--u));line-height:1.45;margin:calc(2.4*var(--u)) 0 0;color:var(--muted);max-width:calc(69*var(--u));text-align:left} .dsub-claims{list-style:none;margin:calc(4.8*var(--u)) 0 0;padding:0;border-top:1px solid rgba(0,0,0,.12)} .dsub-claims 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,.12);font-size:calc(2*var(--u));line-height:1.35;color:var(--ink)} .dsub-claims .ck{font-size:calc(1.6*var(--u));opacity:.45} .dsub-coin{margin-top:calc(4.8*var(--u));border-radius:calc(2*var(--u));overflow:hidden;aspect-ratio:16/9;background:#0f1420} .dsub-coin video{width:100%;height:100%;object-fit:cover;display:block} /* FAQ = the homepage FAQ: styled entirely by assets/desktop-v2.css (#faq rules), nothing page-specific. */ } /* Examples page closing art (2026-10-02, owner: a different artwork for this section on this page). Same section system as the homepage block (height, type, glow pulse, drifting light, depth drift: all from assets/desktop-v2.css), only the motif differs. The art layers are CSS backgrounds on .ox elements, so ONE class on the section picks the motif: "d-outro -ex -ex-a" card grid, "-ex-b" the page being drawn, "-ex-c" fanned window cards. Generator: research/desktop-sub/examples/outro-art/gen_outro_ex.py. */ @media (min-width:941px){ .d-outro.-ex .ox{position:absolute;inset:0;display:block;background-repeat:no-repeat;background-size:cover;background-position:50% 0} .d-outro.-ex-a .ox-base{background-image:url(outro/outro-ex-a.webp?v=1);background-image:image-set(url(outro/outro-ex-a.webp?v=1) 1x,url(outro/outro-ex-a@2x.webp?v=1) 2x)} .d-outro.-ex-a .og0{background-image:url(outro/outro-ex-a-glow0.webp?v=1)}.d-outro.-ex-a .og1{background-image:url(outro/outro-ex-a-glow1.webp?v=1)}.d-outro.-ex-a .og2{background-image:url(outro/outro-ex-a-glow2.webp?v=1)}.d-outro.-ex-a .og3{background-image:url(outro/outro-ex-a-glow3.webp?v=1)} .d-outro.-ex-b .ox-base{background-image:url(outro/outro-ex-b.webp?v=2);background-image:image-set(url(outro/outro-ex-b.webp?v=2) 1x,url(outro/outro-ex-b@2x.webp?v=2) 2x)} .d-outro.-ex-b .og0{background-image:url(outro/outro-ex-b-glow0.webp?v=2)}.d-outro.-ex-b .og1{background-image:url(outro/outro-ex-b-glow1.webp?v=2)}.d-outro.-ex-b .og2{background-image:url(outro/outro-ex-b-glow2.webp?v=2)}.d-outro.-ex-b .og3{background-image:url(outro/outro-ex-b-glow3.webp?v=2)} .d-outro.-ex-c .ox-base{background-image:url(outro/outro-ex-c.webp?v=1);background-image:image-set(url(outro/outro-ex-c.webp?v=1) 1x,url(outro/outro-ex-c@2x.webp?v=1) 2x)} .d-outro.-ex-c .og0{background-image:url(outro/outro-ex-c-glow0.webp?v=1)}.d-outro.-ex-c .og1{background-image:url(outro/outro-ex-c-glow1.webp?v=1)}.d-outro.-ex-c .og2{background-image:url(outro/outro-ex-c-glow2.webp?v=1)}.d-outro.-ex-c .og3{background-image:url(outro/outro-ex-c-glow3.webp?v=1)} } /* ════ Process page (prozess.html), desktop v2 2026-10-02 (owner memo: the page answers HOW GMAX WORKS), owner eye pending. Scope: main.dprz. Desktop only; the phone keeps its own blocks (.dsub-old) untouched. Mechanics = Cuberto desktop @1440 (research/desktop-sub/process/cuberto-services.md, cuberto-v2-steps.md): page title 9rem / 100 % / -.01em centred, wide media = .Container 12rem side padding (84.3vw), 16:9, radius 2rem, +10rem; section heads 8rem / 100 % / 500 / -.02em on the 998 container, sections 15rem apart, hairline rows label | text. System = the approved desktop homepage (--u, --dw, label 1.6u, statement 2.56u / 1.3, body 2u / 1.4 / .02em, radius 2u, FAQ, closing section, footer). ════ */ @media (min-width:941px){ .dprz{--pw:min(84.3vw,1400px)} /* ── Hero: short page title (= the Examples page H1: 9u, never larger), 13u top padding, one sub line, trailer +10u ── */ .dprz-hero{padding:calc(13*var(--u)) 0 0} .dprz-h1{width:var(--dw);margin:0 auto;padding:0;font-family:'InterHeroVar',Inter,sans-serif;font-size:calc(9*var(--u));line-height:1;font-weight:570;letter-spacing:-.01em;text-align:center;color:var(--ink);text-wrap:balance} .dprz-sub{font-size:calc(2.4*var(--u));line-height:1.2;letter-spacing:.02em;font-weight:400;margin:calc(3.2*var(--u)) auto 0;max-width:var(--dw);text-wrap:balance;text-align:center;color:var(--ink)} html.dsub-pending .dprz-h1,html.dsub-pending .dprz-sub{opacity:0} /* ── Media blocks: lazy loops (assets/desktop-sub.js .dsub-vid: poster first, plays only in view, reduced motion = poster). The block's own surface is the placeholder until a poster exists. ── */ .dprz-wide,.dprz-step-md{position:relative;overflow:hidden;border-radius:calc(2*var(--u));background:#EEEEEE;transform:translateZ(0)} .dprz-wide{width:var(--pw);margin:calc(10*var(--u)) auto 0;aspect-ratio:16/9} .dprz-step-md{aspect-ratio:4/3} .dprz-wide video,.dprz-step-md video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* ── Section rhythm + heads ── */ .dprz-steps,.dprz-measure,.dprz-phil,.dprz-channels{padding:calc(15*var(--u)) 0 0} .dprz-h2{width:var(--dw);margin:0 auto;padding:0;font-size:calc(8*var(--u));line-height:1;font-weight:500;letter-spacing:-.02em;text-align:left;color:var(--ink);text-wrap:balance} .dprz-lead{box-sizing:border-box;width:var(--dw);margin:calc(5.4*var(--u)) auto 0;padding:0 max(0px,calc(var(--dw) - 99.5*var(--u))) 0 calc(30.5*var(--u));font-size:calc(2.56*var(--u));line-height:1.3;font-weight:400;letter-spacing:0;color:var(--ink)} /* ── Three steps ── */ .dprz-step h3,.dprz-step p,.dprz-hinge h3,.dprz-hinge p{margin:0;color:inherit} .dprz-step{color:var(--ink)} .dprz-step-n{display:block;font-variant-numeric:tabular-nums} /* commitment hinge (v3): the one dark block of the page, full-bleed inside the page gutter (--pw), Cuberto's dark fill radius (8u), heading at the section-heading scale on two lines, paragraph at intro size, and a two-state line visual (Vorschau outline, one line, Auftrag filled) in the closing art's indigo line-and-glow language. Draw-in once on entry (assets/desktop-sub.js adds .is-in; html.dprz-armed only without reduced motion), static otherwise. */ .dprz-hinge{--pzg:#AEB6FF;background:#07070C;color:#fff;border-radius:calc(8*var(--u));padding:calc(12*var(--u)) calc(8*var(--u)) calc(11*var(--u));text-align:center; width:var(--pw);margin-left:calc((var(--dw) - var(--pw)) / 2);box-sizing:border-box;position:relative;overflow:hidden} .dprz-hinge::before{content:"";position:absolute;left:50%;top:38%;width:70%;height:90%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(126,138,214,.2),rgba(126,138,214,0));pointer-events:none} .dprz-hinge > *{position:relative} .dprz-hinge h3{font-size:calc(8*var(--u));line-height:1;font-weight:500;letter-spacing:-.02em;margin:0 auto} html[lang="en"] .dprz-hinge h3,html[lang="nl"] .dprz-hinge h3{font-size:calc(6.6*var(--u))} .dprz-hinge > p{font-size:calc(2.56*var(--u));line-height:1.3;max-width:calc(69*var(--u));margin:calc(4.2*var(--u)) auto 0;opacity:.82} .dprz-hinge-art{position:relative;width:calc(80*var(--u));margin:calc(8*var(--u)) auto 0;padding-bottom:calc(4.4*var(--u))} .dprz-hinge-art svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 calc(.9*var(--u)) rgba(126,138,214,.55))} .dprz-hinge-art .hg-s{fill:none;stroke:var(--pzg);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.7} .dprz-hinge-art .hg-solid{stroke-width:2;opacity:1} .dprz-hinge-art .hg-link{opacity:.9} .dprz-hinge-art .hg-d{fill:var(--pzg);opacity:.6} .dprz-hinge-art .hg-dot{fill:#fff} .dprz-hinge-art .hg-blocks rect{fill:#fff;opacity:.9} .dprz-hinge-art p{position:absolute;margin:0;color:#fff;white-space:nowrap;transform:translateX(-50%)} .dprz-hinge-l{bottom:0;font-size:calc(2*var(--u));line-height:1.1;letter-spacing:.02em} .dprz-hinge-l.-a{left:19.44%;opacity:.7} .dprz-hinge-l.-b{left:80.56%;font-weight:500} .dprz-hinge-tag{left:19.44%;top:calc(8.4*var(--u));font-size:calc(1.6*var(--u));line-height:1;padding:calc(.7*var(--u)) calc(1.4*var(--u));border:1px solid var(--pzg);border-radius:99px;color:var(--pzg)!important} html.dprz-armed .dprz-hinge-art .hg-s,html.dprz-armed .dprz-hinge-art .hg-fill,html.dprz-armed .dprz-hinge-art .hg-blocks,html.dprz-armed .dprz-hinge-art .hg-dot,html.dprz-armed .dprz-hinge-art .hg-d,html.dprz-armed .dprz-hinge-art p{transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1),opacity 1s ease} html.dprz-armed .dprz-hinge-art .hg-link,html.dprz-armed .dprz-hinge-art .hg-dot{transition-delay:1s} html.dprz-armed .dprz-hinge-art .hg-solid,html.dprz-armed .dprz-hinge-art .hg-b .hg-d,html.dprz-armed .dprz-hinge-l.-b{transition-delay:2s} html.dprz-armed .dprz-hinge-art .hg-fill,html.dprz-armed .dprz-hinge-art .hg-blocks{transition-delay:2.9s} html.dprz-armed .dprz-hinge-tag{transition-delay:.7s} html.dprz-armed .dprz-hinge:not(.is-in) .hg-s{stroke-dashoffset:1} html.dprz-armed .dprz-hinge:not(.is-in) .hg-fill,html.dprz-armed .dprz-hinge:not(.is-in) .hg-blocks,html.dprz-armed .dprz-hinge:not(.is-in) .hg-dot,html.dprz-armed .dprz-hinge:not(.is-in) .hg-d,html.dprz-armed .dprz-hinge:not(.is-in) .dprz-hinge-art p{opacity:0} /* layout = numbered full-width panels (Cuberto /about/ OverviewSection + PreviewSection: hairline, label | text, then the media across the container). Picked by the visual critic from three candidates (research/desktop-sub/process/v2-steps-candidates.png); its corrections: the number at statement size on the heading's baseline, the media closer to its text (6u) than to the next hairline (15u), a lower hinge with a larger line. */ .dprz-steplist{width:var(--dw);margin:calc(12*var(--u)) auto 0} .dprz-step{border-top:1px solid #000;padding-top:calc(4.2*var(--u))} .dprz-step-tx{display:grid;grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr);align-items:baseline} .dprz-step-n{grid-column:1;grid-row:1;font-size:calc(4.2*var(--u));line-height:1.1;opacity:.38} .dprz-step h3{grid-column:2;grid-row:1;font-size:calc(4.2*var(--u));line-height:1.1;font-weight:400;letter-spacing:0} .dprz-step p{grid-column:2;grid-row:2;font-size:calc(2.56*var(--u));line-height:1.3;letter-spacing:0;max-width:calc(69*var(--u));margin-top:calc(2.4*var(--u))} .dprz-step-md{margin-top:calc(6*var(--u))} .dprz-steplist > * + *{margin-top:calc(15*var(--u))} /* ── Measuring bridge: heading, paragraph in the text column, the six-word sequence as one typographic row between hairlines ── */ .dprz-seq{width:var(--dw);margin:calc(10*var(--u)) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:pzs;color:var(--ink)} .dprz-seq span{counter-increment:pzs;position:relative;display:block;padding:calc(3.2*var(--u)) calc(2*var(--u)) calc(6*var(--u)) 0;border-top:1px solid rgba(0,0,0,.16);font-size:calc(5*var(--u));line-height:1.05;font-weight:500;letter-spacing:-.02em} .dprz-seq span::before{content:"0" counter(pzs);display:block;font-size:calc(1.6*var(--u));line-height:1.1;font-weight:400;letter-spacing:0;opacity:.5;margin-bottom:calc(2.4*var(--u));font-variant-numeric:tabular-nums} /* 03 to 06 = the measuring loop: one progress line over their hairlines (end of row one, then the whole second row) */ .dprz-seq span:nth-child(n+3)::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:#000;transform-origin:0 50%} html.dprz-armed .dprz-seq span{transition:opacity 1s ease,transform 2s cubic-bezier(.16,1,.3,1)} /* the Selected Work card entrance: y -> 0 2 s expo, opacity 1 s, staggered */ html.dprz-armed .dprz-seq span::after{transition:transform 1.1s cubic-bezier(.16,1,.3,1)} html.dprz-armed .dprz-seq span:nth-child(2){transition-delay:.14s} html.dprz-armed .dprz-seq span:nth-child(3){transition-delay:.28s}html.dprz-armed .dprz-seq span:nth-child(3)::after{transition-delay:.9s} html.dprz-armed .dprz-seq span:nth-child(4){transition-delay:.42s}html.dprz-armed .dprz-seq span:nth-child(4)::after{transition-delay:1.5s} html.dprz-armed .dprz-seq span:nth-child(5){transition-delay:.56s}html.dprz-armed .dprz-seq span:nth-child(5)::after{transition-delay:2.1s} html.dprz-armed .dprz-seq span:nth-child(6){transition-delay:.7s}html.dprz-armed .dprz-seq span:nth-child(6)::after{transition-delay:2.7s} html.dprz-armed .dprz-seq:not(.is-in) span{opacity:0;transform:translateY(calc(5*var(--u)))} html.dprz-armed .dprz-seq:not(.is-in) span::after{transform:scaleX(0)} /* ── Traffic philosophy: heading, paragraph, wide media, two examples side by side (the Examples grid columns), closing line ── */ .dprz-phil .dprz-wide{width:var(--dw)} /* v3: same edges as the step media and the text around it (the hero trailer keeps the wide Cuberto preview container) */ .dprz-ab{width:var(--dw);margin:calc(10*var(--u)) auto 0;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(10.9*var(--u))} .dprz-ab-i{border-top:1px solid #000;padding-top:calc(4.2*var(--u))} .dprz-ab-i h3{margin:0;font-size:calc(3.2*var(--u));line-height:1.15;font-weight:400;letter-spacing:0;color:var(--ink)} .dprz-ab-i p{margin:calc(2.4*var(--u)) 0 0;font-size:calc(2*var(--u));line-height:1.4;letter-spacing:.02em;color:var(--ink)} .dprz-close{width:var(--dw);margin:calc(12*var(--u)) auto 0;text-align:center;font-size:calc(3.2*var(--u));line-height:1.25;font-weight:400;color:var(--ink);text-wrap:balance} /* ── Four channels: hairline rows (Cuberto SummarySection on the Gmax label grid): label 30.5u | text, 10u to the next hairline ── */ .dprz-rows{width:var(--dw);margin:calc(12*var(--u)) auto 0} .dprz-row{display:grid;grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr);align-items:start;border-top:1px solid #000;padding:calc(4.2*var(--u)) 0 calc(10*var(--u))} .dprz-row:last-child{padding-bottom:0} .dprz-row h3{font-size:calc(2.2*var(--u));line-height:1.15;font-weight:400;letter-spacing:0;margin:0;padding-right:calc(2*var(--u));color:var(--ink);hyphens:auto} /* row motif (v3): a small line-art loop in the closing art's language (thin indigo lines, glow, near-black tile), 14u square under the label; runs only while the row is in view (.is-in from assets/desktop-sub.js), static under reduced motion */ .dprz-mo{--pzg:#AEB6FF;display:block;width:calc(14*var(--u));height:calc(14*var(--u));margin-top:calc(3.2*var(--u));border-radius:calc(2*var(--u));background:#07070C;fill:none;stroke:var(--pzg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .dprz-mo .mo-dim{opacity:.38} .dprz-mo .mo-hot,.dprz-mo .mo-core{filter:drop-shadow(0 0 3px rgba(150,160,255,.95))} .dprz-mo .mo-hot rect,.dprz-mo .mo-core,.dprz-mo .mo-dt{fill:var(--pzg);stroke:none} .dprz-mo *{animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.6,0,.2,1);animation-play-state:paused;transform-box:fill-box;transform-origin:50% 50%} .dprz-row.is-in .dprz-mo *{animation-play-state:running} .dprz-mo.-seo .mo-hot{animation-name:pzSeoUp}.dprz-mo.-seo .mo-r1,.dprz-mo.-seo .mo-r2,.dprz-mo.-seo .mo-r3{animation-name:pzSeoDn} @keyframes pzSeoUp{0%,18%{transform:translateY(0)}45%,82%{transform:translateY(-54px)}100%{transform:translateY(0)}} @keyframes pzSeoDn{0%,18%{transform:translateY(0)}45%,82%{transform:translateY(18px)}100%{transform:translateY(0)}} .dprz-mo.-ads .mo-ping{animation-name:pzPing;animation-duration:3s;animation-timing-function:ease-out} .dprz-mo.-ads .mo-bar{transform-origin:50% 100%}.dprz-mo.-ads .mo-bar.-b1,.dprz-mo.-ads .mo-bar.-b2{opacity:.55} .dprz-mo.-ads .mo-bar.-b3{animation-name:pzBar} @keyframes pzPing{0%{transform:scale(.3);opacity:.9}80%,100%{transform:scale(1.25);opacity:0}} @keyframes pzBar{0%,12%{transform:scaleY(.35)}55%,85%{transform:scaleY(1)}100%{transform:scaleY(.35)}} .dprz-mo.-soc .mo-f{fill:#07070C;animation-name:pzFrame}.dprz-mo.-soc .-f2{animation-delay:-4s}.dprz-mo.-soc .-f1{animation-delay:-2s} @keyframes pzFrame{0%,24%{stroke-opacity:1;filter:drop-shadow(0 0 3px rgba(150,160,255,.95));transform:translateY(-3px)}34%,90%{stroke-opacity:.38;filter:none;transform:translateY(0)}100%{stroke-opacity:1;filter:drop-shadow(0 0 3px rgba(150,160,255,.95));transform:translateY(-3px)}} .dprz-mo.-mail .mo-dt{animation-name:pzDot;animation-duration:3s}.dprz-mo.-mail .-d2{animation-delay:.5s}.dprz-mo.-mail .-d3{animation-delay:1s} @keyframes pzDot{0%,10%{opacity:.25}25%,55%{opacity:1}80%,100%{opacity:.25}} @media (prefers-reduced-motion:reduce){.dprz-mo *{animation:none!important}} .dprz-row p{font-size:calc(2*var(--u));line-height:1.4;font-weight:400;letter-spacing:.02em;max-width:calc(69*var(--u));margin:0;color:var(--ink)} /* the smaller body size: at 2.56u the first row ran 11 lines at 1440 */ .dprz-row p + p{margin-top:1em} /* ── FAQ = the homepage FAQ (assets/desktop-v2.css #faq rules, which also hide the "Noch eine Frage?" line as on the homepage and the Examples page). Page-specific: no rising slab (light on light). ── */ .dprz #faq.flow::before{display:none} } /* Process page closing art (2026-10-02, owner: a new artwork for this section on this page, theme "the right path for a business"). Same section system as the homepage block (height, type, glow pulse, drifting light, depth drift: all from assets/desktop-v2.css), only the motif differs. The art layers are CSS backgrounds on .ox elements, so ONE class on the section picks the motif. Default = route through stages: "d-outro -pz" (same as "d-outro -pz -pz-b"). "d-outro -pz -pz-a" = branching paths, "d-outro -pz -pz-c" = dial with one lit sector. The glow layers peak in the order og3, og2, og1, og0 (homepage delays), so the light travels along the route to the goal. Paths are relative to assets/ (paste at the end of assets/desktop-sub.css). Markup: research/desktop-sub/process/outro-art/markup.html. Generator: research/desktop-sub/process/outro-art/gen_outro_pz.py (build.sh). */ @media (min-width:941px){ .d-outro.-pz .ox{position:absolute;inset:0;display:block;background-repeat:no-repeat;background-size:cover;background-position:50% 0} .d-outro.-pz .ox-base{background-image:url(outro/outro-pz-b.webp?v=1);background-image:image-set(url(outro/outro-pz-b.webp?v=1) 1x,url(outro/outro-pz-b@2x.webp?v=1) 2x)} .d-outro.-pz .og0{background-image:url(outro/outro-pz-b-glow0.webp?v=1)}.d-outro.-pz .og1{background-image:url(outro/outro-pz-b-glow1.webp?v=1)}.d-outro.-pz .og2{background-image:url(outro/outro-pz-b-glow2.webp?v=1)}.d-outro.-pz .og3{background-image:url(outro/outro-pz-b-glow3.webp?v=1)} .d-outro.-pz.-pz-a .ox-base{background-image:url(outro/outro-pz-a.webp?v=1);background-image:image-set(url(outro/outro-pz-a.webp?v=1) 1x,url(outro/outro-pz-a@2x.webp?v=1) 2x)} .d-outro.-pz.-pz-a .og0{background-image:url(outro/outro-pz-a-glow0.webp?v=1)}.d-outro.-pz.-pz-a .og1{background-image:url(outro/outro-pz-a-glow1.webp?v=1)}.d-outro.-pz.-pz-a .og2{background-image:url(outro/outro-pz-a-glow2.webp?v=1)}.d-outro.-pz.-pz-a .og3{background-image:url(outro/outro-pz-a-glow3.webp?v=1)} .d-outro.-pz.-pz-c .ox-base{background-image:url(outro/outro-pz-c.webp?v=1);background-image:image-set(url(outro/outro-pz-c.webp?v=1) 1x,url(outro/outro-pz-c@2x.webp?v=1) 2x)} .d-outro.-pz.-pz-c .og0{background-image:url(outro/outro-pz-c-glow0.webp?v=1)}.d-outro.-pz.-pz-c .og1{background-image:url(outro/outro-pz-c-glow1.webp?v=1)}.d-outro.-pz.-pz-c .og2{background-image:url(outro/outro-pz-c-glow2.webp?v=1)}.d-outro.-pz.-pz-c .og3{background-image:url(outro/outro-pz-c-glow3.webp?v=1)} } /* ════ Pricing page (preise.html), desktop v2 2026-10-02 (owner: "Pricing shows what we offer"), owner eye pending. Scope: main.dpri. Desktop only; the phone keeps its own blocks (.dsub-old) untouched. Shared with the Process page (same classes, rules above): .dprz-h1 / .dprz-sub (hero 9u, 13u top), .dprz-h2 (8u), .dprz-lead (text column at 30.5u), .dprz-ab (two columns under hairlines), .dsub-vid (in-view loops). v2 (judge report research/judge-report-2026-10-02-pricing-v1.md): ONE left edge for the whole page. This page is media-led, so every block (headings, rows, media, dark fill content, FAQ) sits on the wide container --pw (Cuberto .Container, 12u gutter = 84.3vw); text keeps the Gmax measure (max 69u). Mechanics = Cuberto desktop @1440 (research/desktop-sub/process/ cuberto-services.md, cuberto-v2-steps.md): media radius 2u, sections 15u apart, hairline rows label | text, dark fill = .SummarySection.-inverse.-fill (full width, radius 8u, padding 15u / 12u). Prices: the homepage count-up (assets/desktop-sub.js). Source of this block: research/desktop-sub/pricing/dpri.css. ════ */ @media (min-width:941px){ .dpri{--pw:min(84.3vw,1400px);--pzg:#AEB6FF} .dpri-hero{padding:calc(13*var(--u)) 0 0} .dpri-offers p,.dpri-care-top p,.dpri-care-row p,.dpri-xs p,.dpri-trows p,.dpri-row p,.dpri .dsub h3,.dpri .dsub ul{margin:0;padding:0} /* one edge: section headings, intro paragraphs and the FAQ move to the wide container */ .dpri .dprz-h2{width:var(--pw)} .dpri .dprz-lead{width:var(--pw);padding:0 max(0px,calc(var(--pw) - 99.5*var(--u))) 0 calc(30.5*var(--u))} .dpri #faq > .wrap{width:var(--pw)!important} /* ── Media blocks ── */ .dpri-md{position:relative;overflow:hidden;border-radius:calc(2*var(--u));background:#EEEEEE;transform:translateZ(0)} .dpri-md.-r43{aspect-ratio:4/3} .dpri-md.-r1610{aspect-ratio:16/10} .dpri-md.-dark{background:#15151D} .dpri-md video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* light matte: the loop sits inset on a light panel (same 16:10 inside), so stacked rows do not repeat one frame */ .dpri-md.-matte video{inset:6%;width:88%;height:88%;border-radius:calc(1.4*var(--u))} /* price figures stay hidden until their count-up starts (they are on the first screen: without this the final figure flashes, drops to 0 and counts). Failsafe: shown after 2.5 s even if the script never runs; reduced motion: always shown. */ @media (prefers-reduced-motion:no-preference){ html.js main.dpri [data-count]:not(.is-run){opacity:0;animation:dpriShow 0s linear 2.5s forwards} @keyframes dpriShow{to{opacity:1}} } html.dpri-armed .dpri-md{transition:opacity 1s ease,transform 2s cubic-bezier(.16,1,.3,1)} /* the Selected Work card entrance */ html.dpri-armed .dpri-md:not(.is-in){opacity:0;transform:translateY(calc(7*var(--u)))} /* ── Type shared by the offers and the care block ── */ .dpri .dpri-kick{font-size:calc(1.6*var(--u));line-height:1.2;font-weight:400;letter-spacing:0;color:inherit} .dpri .dpri-fig{font-family:'InterHeroVar',Inter,sans-serif;font-size:calc(12.6*var(--u));line-height:.92;font-weight:570;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;color:inherit;margin-top:calc(1.6*var(--u))} .dpri .dpri-claim{font-size:calc(2.56*var(--u));line-height:1.3;font-weight:400;letter-spacing:0;color:inherit;margin-top:calc(3.2*var(--u));text-wrap:pretty} .dpri .dsub .dpri-incl{list-style:none;margin-top:calc(3.2*var(--u));border-top:1px solid rgba(0,0,0,.14)} .dpri-incl li{position:relative;padding:calc(1.4*var(--u)) 0 calc(1.4*var(--u)) calc(4.4*var(--u));border-bottom:1px solid rgba(0,0,0,.14);font-size:calc(2*var(--u));line-height:1.35;letter-spacing:.02em;color:inherit} .dpri-incl li::before{content:"";position:absolute;left:calc(.4*var(--u));top:calc(1.4*var(--u) + .38em);width:.62em;height:.32em;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)} .dpri-act{display:flex;align-items:center;gap:calc(3.6*var(--u));margin-top:calc(4*var(--u))} /* button = the homepage closing-section button mechanics (.d-outro-btn: scaleX spring, rising fill, label roll), inverted for the light ground */ .d-outro-btn.dpri-btn{background:#000;color:#fff} .d-outro-btn.dpri-btn .ob-ripple span{background:#fff} .d-outro-btn.dpri-btn .ob-title > .phs-pill{text-shadow:0 1.3em 0 #000} .d-outro-btn.dpri-btn:focus-visible{outline-color:#000} .dpri-eg,.dpri-more a{font-size:calc(2*var(--u));line-height:1.2;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.18em;transition:background-size .5s cubic-bezier(.16,1,.3,1)} @media (hover:hover) and (pointer:fine){.dpri-eg:hover,.dpri-more a:hover{background-size:0 1px;background-position:100% 100%}} /* ── Two offers: two panels side by side (picked by the visual critic over alternating rows, research/desktop-sub/pricing/ v1-offers-candidates.png). v2 order per panel: label, price, description, then the 4:3 media, then list and buttons, so both prices are on the first screen (research/desktop-sub/pricing/v2-fold.png). Rows are shared across the panels (subgrid); the order is set here, the markup keeps media first. ── */ .dpri-offers{width:var(--pw);margin:calc(8*var(--u)) auto 0;color:var(--ink);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);column-gap:calc(6*var(--u));align-items:start} .dpri-offer{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-items:start} .dpri-offer-tx{display:contents} .dpri-offer .dpri-kick{order:1} .dpri-offer .dpri-fig{order:2} .dpri-offer .dpri-claim{order:3} .dpri-offer .dpri-md{order:4;margin-top:calc(4.2*var(--u))} .dpri-offer .dpri-incl{order:5} .dpri-offer .dpri-act{order:6} .dpri .dsub .dpri-offer .dpri-incl{margin-top:calc(4.2*var(--u))} /* ── Publishing without a subscription: hairline intro row (label | text) ── */ .dpri-pub,.dpri-extras,.dpri-traffic{padding:calc(15*var(--u)) 0 0} .dpri-row{width:var(--pw);margin:0 auto;display:grid;grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr);align-items:start;border-top:1px solid #000;padding-top:calc(4.2*var(--u));color:var(--ink)} .dpri .dpri-row-l{margin:0;padding:0 calc(4*var(--u)) 0 0;font-size:calc(2.2*var(--u));line-height:1.15;font-weight:400;letter-spacing:0;color:inherit;text-align:left} .dpri-row-tx p{font-size:calc(2*var(--u));line-height:1.4;letter-spacing:.02em;max-width:calc(69*var(--u));color:inherit} .dpri-row-tx p:first-child{font-size:calc(2.56*var(--u));line-height:1.3;letter-spacing:0} .dpri .dpri-row-tx p + p{margin-top:1.2em} /* ── Monthly care: the dark fill (Cuberto: full width, radius 8u, padding 15u / 12u). v2: heading, intro and price in the left column, the framed 4:3 media (58 % of the container, about 700 px at 1440) beside them. ── */ .dpri-care{position:relative;overflow:hidden;margin-top:calc(15*var(--u));padding:calc(15*var(--u)) 0 calc(12*var(--u));background:#07070C;color:#fff;border-radius:calc(8*var(--u))} .dpri-care::before{content:"";position:absolute;right:-10%;top:0;width:70%;height:55%;background:radial-gradient(closest-side,rgba(126,138,214,.2),rgba(126,138,214,0));pointer-events:none} .dpri-care > *{position:relative} .dpri-care-top{width:var(--pw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 58%;column-gap:calc(6*var(--u));align-items:center} .dpri .dpri-care .dprz-h2{width:auto;color:#fff} .dpri .dpri-care-lead{font-size:calc(2.56*var(--u));line-height:1.3;letter-spacing:0;color:rgba(255,255,255,.82);margin-top:calc(4.2*var(--u))} .dpri .dpri-care .dpri-kick{color:var(--pzg);margin-top:calc(8*var(--u))} .dpri-figrow{display:flex;align-items:baseline;gap:calc(1.8*var(--u))} .dpri .dpri-per{font-size:calc(2.4*var(--u));line-height:1.2;color:rgba(255,255,255,.86)} .dpri-care .dpri-md{border-radius:calc(2.4*var(--u))} .dpri-care .dpri-md::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);pointer-events:none} .dpri-care-row{width:var(--pw);margin:calc(10*var(--u)) auto 0;display:grid;grid-template-columns:calc(30.5*var(--u)) minmax(0,1fr);align-items:start;border-top:1px solid rgba(255,255,255,.3);padding-top:calc(4.2*var(--u))} .dpri-own{padding-right:calc(4*var(--u))} .dpri-own h3{font-size:calc(2.2*var(--u));line-height:1.15;font-weight:400;letter-spacing:0;color:#fff} .dpri .dpri-own p{font-size:calc(2*var(--u));line-height:1.4;letter-spacing:.02em;color:rgba(255,255,255,.78);margin-top:calc(1.6*var(--u))} .dpri .dsub.dpri-care .dpri-incl{margin-top:0;border-top:0} .dpri-care .dpri-incl li{border-bottom-color:rgba(255,255,255,.16);font-size:calc(2.2*var(--u))} .dpri-care .dpri-incl li:first-child{padding-top:0} .dpri-care .dpri-incl li:first-child::before{top:.38em} .dpri-care .dpri-incl li::before{border-color:var(--pzg)} .dpri .dpri-note{font-size:calc(1.6*var(--u));line-height:1.45;letter-spacing:.02em;color:rgba(255,255,255,.66);max-width:calc(69*var(--u));margin-top:calc(3.2*var(--u))} .dpri-care .dprz-ab{width:var(--pw)} .dpri-care .dprz-ab-i{border-top-color:rgba(255,255,255,.3)} .dpri-care .dprz-ab-i h3{color:#fff} .dpri .dpri-care .dprz-ab-i p{color:rgba(255,255,255,.8);margin-top:1em;max-width:calc(60*var(--u))} /* the Process body size (2u / 1.4 / .02em) */ .dpri .dpri-care .dprz-ab-i h3 + p{margin-top:calc(2.4*var(--u))} /* ── Extras: 1 + 2. The first item is a wide row (media 60 % | text), the other two share a row with the media on top. Every 16:10 block is at least about 360 px tall at 1440, so the interface inside the loops reads. ── */ .dpri-xs{width:var(--pw);margin:calc(12*var(--u)) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(6*var(--u));row-gap:calc(10*var(--u));align-items:start;color:var(--ink)} .dpri .dsub .dpri-x h3{font-size:calc(3.2*var(--u));line-height:1.15;font-weight:400;letter-spacing:0;color:inherit;margin-top:calc(3.2*var(--u))} .dpri .dpri-x p{font-size:calc(2*var(--u));line-height:1.4;letter-spacing:.02em;color:inherit;margin-top:calc(1.6*var(--u));max-width:calc(60*var(--u))} .dpri-x.-feat{grid-column:1 / -1;display:grid;grid-template-columns:60% minmax(0,1fr);grid-template-rows:1fr auto 1fr;column-gap:calc(6*var(--u))} .dpri-x.-feat .dpri-md{grid-column:1;grid-row:1 / -1} .dpri .dsub .dpri-x.-feat h3{grid-column:2;grid-row:1;align-self:end;margin-top:0;font-size:calc(4.2*var(--u));line-height:1.1} .dpri .dpri-x.-feat p{grid-column:2;grid-row:2;margin-top:calc(2.4*var(--u))} /* ── Traffic: four numbered rows, large 16:10 media alternating left / right (Cuberto SplitshowSection rhythm); every second loop sits on a light matte, the text of those rows hangs from the top instead of the middle. ── */ .dpri-trows{width:var(--pw);margin:calc(12*var(--u)) auto 0;color:var(--ink)} .dpri-trow{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);column-gap:calc(8*var(--u));align-items:center} .dpri-trow + .dpri-trow{margin-top:calc(12*var(--u))} .dpri-trow:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);align-items:start} .dpri-trow:nth-child(even) .dpri-md{order:2} .dpri-trow:nth-child(even) .dpri-trow-tx{padding-top:calc(3*var(--u))} .dpri .dpri-n{font-size:calc(1.6*var(--u));line-height:1.1;letter-spacing:0;opacity:.5;font-variant-numeric:tabular-nums} .dpri-trow h3{font-size:calc(4.2*var(--u));line-height:1.1;font-weight:400;letter-spacing:0;color:inherit;text-wrap:balance;margin-top:calc(2*var(--u))!important} .dpri .dpri-trow-tx > h3 ~ p{font-size:calc(2*var(--u));line-height:1.4;letter-spacing:.02em;color:inherit;margin-top:calc(2.4*var(--u))} .dpri .dpri-trow-tx > h3 ~ p.dpri-more{margin-top:calc(3.2*var(--u));letter-spacing:0} /* ── FAQ = the homepage FAQ (assets/desktop-v2.css #faq rules). Page-specific: no rising slab (light on light). ── */ .dpri #faq.flow::before{display:none} } /* Pricing page closing art (2026-10-02, owner: an own artwork for the closing section of preise.html, theme "a clear offer, see it before you pay"). Same section system as the homepage block (height, type, glow pulse, drifting light, depth drift: all from assets/desktop-v2.css), only the motif differs. The art layers are CSS backgrounds on .ox elements, so ONE class on the section picks the motif. Default = two offer cards: "d-outro -pr" (same as "d-outro -pr -pr-a"). "d-outro -pr -pr-b" = the cover lifting, "d-outro -pr -pr-c" = the deck of pages. The glow layers peak in the order og3, og2, og1, og0 (homepage delays), so the light travels to the lit part. Paths are relative to assets/ (paste at the end of assets/desktop-sub.css). Markup: research/desktop-sub/pricing/outro-art/markup.html. Generator: research/desktop-sub/pricing/outro-art/gen_outro_pr.py (build.sh). */ @media (min-width:941px){ .d-outro.-pr .ox{position:absolute;inset:0;display:block;background-repeat:no-repeat;background-size:cover;background-position:50% 0} .d-outro.-pr .ox-base{background-image:url(outro/outro-pr-a.webp?v=2);background-image:image-set(url(outro/outro-pr-a.webp?v=2) 1x,url(outro/outro-pr-a@2x.webp?v=2) 2x)} .d-outro.-pr .og0{background-image:url(outro/outro-pr-a-glow0.webp?v=2)}.d-outro.-pr .og1{background-image:url(outro/outro-pr-a-glow1.webp?v=2)}.d-outro.-pr .og2{background-image:url(outro/outro-pr-a-glow2.webp?v=2)}.d-outro.-pr .og3{background-image:url(outro/outro-pr-a-glow3.webp?v=2)} .d-outro.-pr.-pr-b .ox-base{background-image:url(outro/outro-pr-b.webp?v=1);background-image:image-set(url(outro/outro-pr-b.webp?v=1) 1x,url(outro/outro-pr-b@2x.webp?v=1) 2x)} .d-outro.-pr.-pr-b .og0{background-image:url(outro/outro-pr-b-glow0.webp?v=1)}.d-outro.-pr.-pr-b .og1{background-image:url(outro/outro-pr-b-glow1.webp?v=1)}.d-outro.-pr.-pr-b .og2{background-image:url(outro/outro-pr-b-glow2.webp?v=1)}.d-outro.-pr.-pr-b .og3{background-image:url(outro/outro-pr-b-glow3.webp?v=1)} .d-outro.-pr.-pr-c .ox-base{background-image:url(outro/outro-pr-c.webp?v=1);background-image:image-set(url(outro/outro-pr-c.webp?v=1) 1x,url(outro/outro-pr-c@2x.webp?v=1) 2x)} .d-outro.-pr.-pr-c .og0{background-image:url(outro/outro-pr-c-glow0.webp?v=1)}.d-outro.-pr.-pr-c .og1{background-image:url(outro/outro-pr-c-glow1.webp?v=1)}.d-outro.-pr.-pr-c .og2{background-image:url(outro/outro-pr-c-glow2.webp?v=1)}.d-outro.-pr.-pr-c .og3{background-image:url(outro/outro-pr-c-glow3.webp?v=1)} } /* ════ About page (ueber-uns.html), desktop v2 2026-10-02 (v2 = judge corrections, research/judge-report-2026-10-02-about-v1.md), owner eye pending. Scope: main.dabt. Desktop only; the phone keeps its own blocks (.dsub-old) untouched. Shared with the Process / Pricing pages (same classes, rules above): .dprz-h1 / .dprz-sub (hero 9u, 13u top), .dprz-wide (wide media 84.3vw, 16:9, radius 2u), .dprz-h2 (8u), .dprz-lead (paragraph in the text column at 30.5u), .dsub-vid (in-view loops), .dwk / .dsub-cap (project cards, hover, viewer), .dpill (outline pill), the count-up and the media entrance of the Pricing page. Mechanics = Cuberto /about/ desktop @1440 (research/desktop-sub/about/cuberto-about.md): figures = value over a small label, dark fill radius 8u with padding 15u / 12u, heading + 12u, rows = hairline, 4.5u, icon | label | text, 10u to the next hairline, the [data-plx] media drift is built but not used in v2 (the loops are composed to their frame edges). ONE left edge (v2): the page is media-led like the Pricing page, so every block (headings, paragraphs, figures, rows, media, cards) sits on the wide container --pw (Cuberto .Container, 12u gutter = 84.3vw); text keeps the Gmax measure (max 69u). Deviations (Gmax system over Cuberto type): labels in sentence case at Gmax sizes instead of 1.28u / 1.6u caps; figures at 9u in the hero face in three equal columns instead of 6.4u in the text column; the figures count up (Pricing mechanic) instead of fading in; benefit labels are a readable 30.5u column instead of right-aligned 1.28u caps; sections 15u apart (Gmax subpages) instead of 12u / 14u; hero media 6.5u under the intro; media drift +-4 % at scale 1.08 instead of +-10 % at 1.05; the four projects are one row of equal cards instead of the staggered pair (judge: the stagger repeats the homepage). Source of this block: research/desktop-sub/about/dabt.css. ════ */ @media (min-width:941px){ .dabt{--pw:min(84.3vw,1400px);--pzg:#AEB6FF} .dabt-hero{padding:calc(13*var(--u)) 0 0} .dabt .dabt-hero .dprz-wide{margin-top:calc(6.5*var(--u))} .dabt-figs p,.dabt-brow p,.dabt-step p,.dabt-vg p,.dabt .dsub h3,.dabt .dsub ul{margin:0;padding:0} .dabt .big{font-weight:600} /* one edge: section headings and intro paragraphs on the wide container */ .dabt .dprz-h2{width:var(--pw)} .dabt .dprz-lead{width:var(--pw);padding:0 max(0px,calc(var(--pw) - 99.5*var(--u))) 0 calc(30.5*var(--u))} /* ── Media blocks (4:3). Entrance = the Selected Work card entrance (html.dpri-armed + .is-in from assets/desktop-sub.js). [data-plx] = scroll drift of the video inside (--plx set by the script). ── */ .dabt-md{position:relative;overflow:hidden;border-radius:calc(2*var(--u));background:#EEEEEE;transform:translateZ(0)} .dabt-md.-r43{aspect-ratio:4/3} .dabt-md video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} html.dabt-armed .dabt [data-plx] video{transform:translate3d(0,var(--plx,0px),0) scale(1.08);will-change:transform} html.dpri-armed .dabt-md{transition:opacity 1s ease,transform 2s cubic-bezier(.16,1,.3,1)} html.dpri-armed .dabt-md:not(.is-in){opacity:0;transform:translateY(calc(7*var(--u)))} /* ── "Ein kleines Studio": heading, paragraph, figures ── */ .dabt-studio{padding:calc(12*var(--u)) 0 0} /* ── Figures row: three equal columns across the container, hairline above, hairlines between; value over label ── */ .dabt-figs{width:var(--pw);margin:calc(10*var(--u)) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #000;color:var(--ink)} .dabt-fig{padding:calc(4.2*var(--u)) 0 calc(1*var(--u))} .dabt-fig + .dabt-fig{border-left:1px solid rgba(0,0,0,.16);padding-left:calc(4*var(--u))} .dabt .dabt-fig-n{font-family:'InterHeroVar',Inter,sans-serif;font-size:calc(9*var(--u));line-height:1;font-weight:570;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;color:inherit} .dabt .dabt-fig-l{font-size:calc(2*var(--u));line-height:1.2;font-weight:400;letter-spacing:.02em;margin-top:calc(2*var(--u));color:inherit} @media (prefers-reduced-motion:no-preference){ html.js main.dabt [data-count]:not(.is-run){opacity:0;animation:dpriShow 0s linear 2.5s forwards} } /* ── "Das bedeutet die Zusammenarbeit": the dark fill, four rows icon | label 30.5u | text ── */ .dabt-ben{position:relative;overflow:hidden;margin-top:calc(15*var(--u));padding:calc(15*var(--u)) 0 calc(12*var(--u));background:#07070C;color:#fff;border-radius:calc(8*var(--u))} .dabt-ben::before{content:"";position:absolute;right:-10%;top:0;width:70%;height:45%;background:radial-gradient(closest-side,rgba(126,138,214,.2),rgba(126,138,214,0));pointer-events:none} .dabt-ben > *{position:relative} .dabt .dabt-ben .dprz-h2{color:#fff} .dabt-brows{width:var(--pw);margin:calc(12*var(--u)) auto 0} .dabt-brow{display:grid;grid-template-columns:calc(12*var(--u)) calc(30.5*var(--u)) minmax(0,1fr);align-items:start;border-top:1px solid rgba(255,255,255,.3);padding:calc(4.5*var(--u)) 0 calc(10*var(--u))} .dabt-brow:last-child{padding-bottom:0} .dabt .dabt-brow h3{padding-right:calc(4*var(--u));font-size:calc(3.2*var(--u));line-height:1.15;font-weight:400;letter-spacing:0;color:#fff;text-wrap:balance} .dabt-brow p{max-width:calc(69*var(--u));font-size:calc(2.56*var(--u));line-height:1.3;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.88)} /* row icons: line art in the closing art's language (thin indigo lines, glow), 8u; each is one short readable loop (a dot travelling and its target answering, tiles lighting in turn, a line drawing in, a hand sweeping) that runs only while the row is in view */ .dabt-ic{display:block;width:calc(8*var(--u));height:calc(8*var(--u));margin-top:calc(-.6*var(--u));overflow:visible;fill:none;stroke:var(--pzg);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .dabt-ic .ic-dim{opacity:.72} .dabt-ic .ic-hot{fill:#fff;stroke:none;filter:drop-shadow(0 0 4px rgba(150,160,255,1))} .dabt-ic .ic-line,.dabt-ic .ic-arc,.dabt-ic .ic-hand{stroke:#fff;filter:drop-shadow(0 0 4px rgba(150,160,255,1))} .dabt-ic *{animation-duration:3.6s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.6,0,.2,1);animation-play-state:paused;transform-box:fill-box;transform-origin:50% 50%} .dabt-brow.is-in .dabt-ic *{animation-play-state:running} .dabt-ic.-contact .ic-run{animation-name:abRun} .dabt-ic.-contact .ic-ping{stroke:#fff;opacity:0;animation-name:abPing} .dabt-ic.-contact .ic-ping.-b{animation-delay:-1.8s} @keyframes abRun{0%,6%{transform:translateX(0)}44%,56%{transform:translateX(24px)}94%,100%{transform:translateX(0)}} @keyframes abPing{0%,40%{opacity:0;transform:scale(1)}46%{opacity:.9;transform:scale(1)}72%,100%{opacity:0;transform:scale(1.5)}} .dabt-ic.-lang .ic-t{opacity:.34;animation-name:abTile;animation-duration:4.8s;animation-timing-function:ease} .dabt-ic.-lang .-t2{animation-delay:-3.6s}.dabt-ic.-lang .-t3{animation-delay:-2.4s}.dabt-ic.-lang .-t4{animation-delay:-1.2s} @keyframes abTile{0%,22%{opacity:1;stroke:#fff;filter:drop-shadow(0 0 4px rgba(150,160,255,1));transform:scale(1.06)}32%,92%{opacity:.34;stroke:var(--pzg);filter:none;transform:scale(1)}100%{opacity:1;stroke:#fff;filter:drop-shadow(0 0 4px rgba(150,160,255,1));transform:scale(1.06)}} .dabt-ic.-web .ic-line{stroke-dasharray:1;stroke-dashoffset:0;animation-name:abDraw} .dabt-ic.-web .ic-end{animation-name:abEnd} @keyframes abDraw{0%{stroke-dashoffset:1;opacity:1}42%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} @keyframes abEnd{0%,36%{opacity:0;transform:scale(.3)}46%{opacity:1;transform:scale(1.5)}56%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}} .dabt-ic.-time .ic-hand{transform-box:view-box;transform-origin:40px 40px;animation-name:abTurn;animation-timing-function:linear} .dabt-ic.-time .ic-arc{stroke-dasharray:1;animation-name:abArc;animation-timing-function:linear} @keyframes abTurn{to{transform:rotate(360deg)}} @keyframes abArc{0%{stroke-dashoffset:1}25%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} @media (prefers-reduced-motion:reduce){.dabt-ic *{animation:none!important}.dabt-ic.-lang .-t1{opacity:1;stroke:#fff}} /* ── Section rhythm after the dark fill ── */ .dabt-origin,.dabt-values,.dabt-work{padding:calc(15*var(--u)) 0 0} /* ── "So entstand GMAX": the 4:3 media (left, on the shared edge) stays centred in the viewport while the four steps pass ── */ .dabt-og,.dabt-vg{--mw:calc((var(--pw) - 8*var(--u))*.565);width:var(--pw);margin:calc(12*var(--u)) auto 0;display:grid;column-gap:calc(8*var(--u));align-items:start;color:var(--ink)} .dabt-og{grid-template-columns:var(--mw) minmax(0,1fr)} .dabt-og-md,.dabt-vg-md{position:sticky;top:max(calc(11*var(--u)),calc(50vh - var(--mw)*.375))} .dabt-step{border-top:1px solid #000;padding:calc(4.2*var(--u)) 0 calc(10*var(--u))} .dabt-step:last-child{padding-bottom:0} .dabt-step-n{display:block;font-family:'InterHeroVar',Inter,sans-serif;font-size:calc(9*var(--u));line-height:1;font-weight:570;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .dabt .dabt-step h3{margin-top:calc(3.2*var(--u));font-size:calc(3.4*var(--u));line-height:1.15;font-weight:400;letter-spacing:0;color:inherit;text-wrap:balance} .dabt-step p{margin-top:calc(2.4*var(--u));font-size:calc(2.56*var(--u));line-height:1.3;font-weight:400;letter-spacing:0;color:inherit} html.dabt-armed .dabt-step-n{transition:opacity .6s ease} html.dabt-armed .dabt-step:not(.is-on) .dabt-step-n{opacity:.55} /* ── "Wofür GMAX steht": text column (two paragraphs, then the people behind GMAX) beside the sticky studio media (right) ── */ .dabt-vg{grid-template-columns:minmax(0,1fr) var(--mw)} .dabt-vg-p p{font-size:calc(2.56*var(--u));line-height:1.3;font-weight:400;letter-spacing:0;color:inherit} .dabt .dabt-vg-p p + p{margin-top:1em} .dabt-people-tx{margin-top:calc(8*var(--u));border-top:1px solid #000;padding-top:calc(4.2*var(--u))} .dabt .dabt-kick{font-size:calc(1.6*var(--u));line-height:1.2;font-weight:400;letter-spacing:0;color:inherit} .dabt-people-tx .dabt-lead{margin-top:calc(2.4*var(--u));font-size:calc(2.56*var(--u));line-height:1.3;font-weight:400;letter-spacing:0;color:inherit} .dabt .dsub .dabt-names{list-style:none;margin-top:calc(4.2*var(--u));border-top:1px solid rgba(0,0,0,.14)} .dabt-names li{padding:calc(1.8*var(--u)) 0;border-bottom:1px solid rgba(0,0,0,.14);font-size:calc(3.4*var(--u));line-height:1.15;font-weight:400;letter-spacing:0;color:inherit} /* ── "Was bisher entstanden ist": one row of four equal cards (the approved cards: loops, hover, viewer), tops aligned ── */ .dabt-work{padding-bottom:calc(15*var(--u))} .dabt-w{width:var(--pw);margin:calc(12*var(--u)) auto 0} .dabt-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(3*var(--u));align-items:start} .dabt .dsub-cap{margin-top:calc(2.4*var(--u));font-size:calc(2*var(--u));line-height:1.25} .dabt .dsub-cap b{display:block;margin:0} .dabt .dsub-cap .pn{display:block;opacity:.55} .dabt .dsub-cap .dwk-cap{display:block;margin-top:calc(1.2*var(--u));line-height:1.4;letter-spacing:.02em;text-wrap:pretty} .dabt-all{margin-top:calc(8*var(--u))} .dabt-all .dpill{color:#000} .dabt-all .dpill-b{border-color:#000} .dabt-all .dpill-r span{background:#000} .dabt-all .dpill-l{margin:0;text-shadow:0 1.25em 0 #fff} .dabt-all .dpill:focus-visible{outline-color:#000} } /* About page closing art (2026-10-02, owner: an own artwork for the closing section of ueber-uns.html, theme "two parties meeting, a direct line", headline "Lernen wir uns kennen"). Same section system as the homepage block (height, type, glow pulse, drifting light, depth drift: all from assets/desktop-v2.css), only the motif differs. The art layers are CSS backgrounds on .ox elements, so ONE class on the section picks the motif. Default = two points and one direct arc: "d-outro -ab" (same as "d-outro -ab -ab-b"). "d-outro -ab -ab-a" = two messages and one joining line, "d-outro -ab -ab-c" = two rings meeting. The glow layers peak in the order og3, og2, og1, og0 (homepage delays), so the light travels to the lit part. Paths are relative to assets/ (paste at the end of assets/desktop-sub.css). Markup: research/desktop-sub/about/outro-art/markup.html. Generator: research/desktop-sub/about/outro-art/gen_outro_ab.py (build.sh). */ @media (min-width:941px){ .d-outro.-ab .ox{position:absolute;inset:0;display:block;background-repeat:no-repeat;background-size:cover;background-position:50% 0} .d-outro.-ab .ox-base{background-image:url(outro/outro-ab-b.webp?v=1);background-image:image-set(url(outro/outro-ab-b.webp?v=1) 1x,url(outro/outro-ab-b@2x.webp?v=1) 2x)} .d-outro.-ab .og0{background-image:url(outro/outro-ab-b-glow0.webp?v=1)}.d-outro.-ab .og1{background-image:url(outro/outro-ab-b-glow1.webp?v=1)}.d-outro.-ab .og2{background-image:url(outro/outro-ab-b-glow2.webp?v=1)}.d-outro.-ab .og3{background-image:url(outro/outro-ab-b-glow3.webp?v=1)} .d-outro.-ab.-ab-a .ox-base{background-image:url(outro/outro-ab-a.webp?v=1);background-image:image-set(url(outro/outro-ab-a.webp?v=1) 1x,url(outro/outro-ab-a@2x.webp?v=1) 2x)} .d-outro.-ab.-ab-a .og0{background-image:url(outro/outro-ab-a-glow0.webp?v=1)}.d-outro.-ab.-ab-a .og1{background-image:url(outro/outro-ab-a-glow1.webp?v=1)}.d-outro.-ab.-ab-a .og2{background-image:url(outro/outro-ab-a-glow2.webp?v=1)}.d-outro.-ab.-ab-a .og3{background-image:url(outro/outro-ab-a-glow3.webp?v=1)} .d-outro.-ab.-ab-b .ox-base{background-image:url(outro/outro-ab-b.webp?v=1);background-image:image-set(url(outro/outro-ab-b.webp?v=1) 1x,url(outro/outro-ab-b@2x.webp?v=1) 2x)} .d-outro.-ab.-ab-b .og0{background-image:url(outro/outro-ab-b-glow0.webp?v=1)}.d-outro.-ab.-ab-b .og1{background-image:url(outro/outro-ab-b-glow1.webp?v=1)}.d-outro.-ab.-ab-b .og2{background-image:url(outro/outro-ab-b-glow2.webp?v=1)}.d-outro.-ab.-ab-b .og3{background-image:url(outro/outro-ab-b-glow3.webp?v=1)} .d-outro.-ab.-ab-c .ox-base{background-image:url(outro/outro-ab-c.webp?v=1);background-image:image-set(url(outro/outro-ab-c.webp?v=1) 1x,url(outro/outro-ab-c@2x.webp?v=1) 2x)} .d-outro.-ab.-ab-c .og0{background-image:url(outro/outro-ab-c-glow0.webp?v=1)}.d-outro.-ab.-ab-c .og1{background-image:url(outro/outro-ab-c-glow1.webp?v=1)}.d-outro.-ab.-ab-c .og2{background-image:url(outro/outro-ab-c-glow2.webp?v=1)}.d-outro.-ab.-ab-c .og3{background-image:url(outro/outro-ab-c-glow3.webp?v=1)} } /* ════ Contact page (kontakt.html), desktop v3 2026-10-03 (REMAKE after the owner's verdict on v2: "doesn't work and isn't cuberto style"), owner eye pending. Scope: main.dkon. Desktop only; the phone keeps its own blocks (.dsub-old) and the SHARED form markup looks exactly as before (every rule below sits under min-width:941px). = Cuberto /contacts/ desktop @1440 (research/desktop-sub/contact/cuberto-contacts.md): H1 9u centred at 20u from the top; the form 15u under the H1, ONE column on the container edge (Cuberto: x = the 12u gutter, max-width 95u), everything inside left-aligned; group label 3.2u + 4u; chip toggles = CheckboxInput (1px pill, 3.2u, padding 1.4u 2u, gaps 3u / 2u; hover = label roll; selected = dome fill .5 s + white label + scaleX 1.02 spring); fields = UnderlineInput (placeholder-as-label 3.2u at .7, .3 on focus; the 300 % masked line .3 / .6 hover / focus wave .8 s then solid); send = outline CtaButton (3.2u 5.6u, 2.4u; hover = dome fill + label roll to the white copy + scaleX 1.02 spring; it never translates); groups 8u apart; note 6u under the button; 24u to the footer. ROBUSTNESS (v3): no entrance, nothing in the form is ever hidden or covered; decoration spans are pointer-events:none, so a click anywhere on a pill lands on the button. Deviations: our hint line sits small and centred under the H1 (inside Cuberto's 15u); no required asterisks / error lines (the composer has no required fields); no attachment field; the note is .6 ink (Cuberto .3) for contrast; the direct channels below the form are ours (Cuberto has none): small label + three text links with Cuberto's "Add attachment" underline. Source of this block: research/desktop-sub/contact/dkon.css. ════ */ @media (min-width:941px){ .dkon{--pw:min(84.3vw,1400px)} .dkon-hero{padding:calc(20*var(--u)) 0 0} .dkon .dkon-hint{width:var(--dw);margin:calc(3.2*var(--u)) auto 0;font-size:calc(2*var(--u));line-height:1.4;letter-spacing:.02em;font-weight:400;text-align:center;text-wrap:balance;color:rgba(23,23,27,.72)} .dkon-hint svg{display:inline-block;width:1em;height:1em;margin-right:.45em;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* ── the form: one column on the container edge ── */ .dkon .kx-formsec{padding:calc(9*var(--u)) 0 0} .dkon .kx-formsec > .wrap{width:var(--pw);max-width:none;margin:0 auto;padding:0} .dkon .kx-formwrap{max-width:calc(95*var(--u));margin:0} html.js .dkon .kx-formwrap.up{opacity:1;transform:none} /* the phone's whole-form reveal never hides the desktop form */ .dkon .kx-form{gap:calc(8*var(--u))} .dkon .kx-glabel{margin:0 0 calc(4*var(--u));font-size:calc(3.2*var(--u));line-height:1.1;font-weight:400;letter-spacing:0;color:#000} .dkon .kx-glabel .opt{font-size:.6em;color:rgba(23,23,27,.5);font-weight:400;letter-spacing:.01em} /* chip toggles (Cuberto CheckboxInput); markup added by assets/desktop-sub.js (.dkon-ct label + copy, .dkon-cb border, .dkon-cr dome fill), all pointer-events:none; textContent stays the label, so the composer reads the same text */ .dkon .kx-chips{gap:calc(3*var(--u)) calc(2*var(--u))} .dkon .kx-chip{position:relative;display:inline-block;min-height:0;margin:0;padding:calc(1.4*var(--u)) calc(2*var(--u));border:0;border-radius:9999px;background:transparent;color:#000; font:inherit;font-size:calc(3.2*var(--u));line-height:1.18;font-weight:400;letter-spacing:0;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transform:translateZ(0);transition:transform .3s} .dkon .kx-chip:hover,.dkon .kx-chip:active{background:transparent;border:0;transform:translateZ(0)} .dkon .kx-chip[aria-pressed="true"]{background:transparent;color:#000;transform:scaleX(1.02);transition:transform .5s cubic-bezier(.34,5.56,.64,1)} .dkon .kx-chip:focus-visible,.dkon .kx-send:focus-visible{outline:2px solid #000;outline-offset:4px} .dkon-cb{position:absolute;inset:0;z-index:3;border:1px solid #000;border-radius:inherit;pointer-events:none} .dkon-cr{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0)} .dkon-cr > span{display:block;width:100%;height:100%;background:#000;border-radius:50% 50% 0 0;transform:translateY(100%);transition:transform .5s cubic-bezier(.4,0,0,1),border-radius .5s cubic-bezier(.4,0,0,1)} .dkon .kx-chip[aria-pressed="true"] .dkon-cr > span{transform:translateY(0);border-radius:0;transition-duration:.5s,.9s} .dkon-ct{position:relative;z-index:2;display:block;overflow:hidden;padding-right:.16em;pointer-events:none} .dkon-ct > span{display:block;transition:transform .8s cubic-bezier(.16,1,.3,1),color .4s} .dkon-ct > span::after{content:attr(data-text);display:block;position:absolute;top:110%;left:0} .dkon .kx-chip[aria-pressed="true"] .dkon-ct > span{color:#fff;transform:translateY(-110%) translateZ(0)} @media (hover:hover) and (pointer:fine){ .dkon .kx-chip:hover .dkon-ct > span{transform:translateY(-110%) translateZ(0)} } /* fields (Cuberto UnderlineInput): each field its own group (8u apart); the bound