headline -> .text-lead (Focustext, 34px)
medium -> p (default body, 17px regular)
light -> .text-light (17px, weight 300)
button -> .text-button (17px, weight 500)
fussnote -> .text-footnote (10px)
FIDELITY FIRST. Values reproduce Figma exactly, including line heights that
look wrong (H3 at 0.92, H4 at 2.55, body at 1.12). Do not "improve" them
here. If a value should change, it changes in Figma first.
========================================================================== */
@layer base {
/* @font-face declarations live in base/fonts.css. */
/* ---------------------------------------------------------------------- */
html {
font-family: var(--font-sans);
font-size: 100%; /* never override the user's root size */
-webkit-text-size-adjust: 100%;
}
body {
font-size: var(--text-sm);
font-weight: var(--weight-regular);
line-height: var(--leading-body);
color: var(--color-text);
background-color: var(--color-surface);
}
/* German compounds overflow narrow viewports. Applied only below the
desktop range so 1440 rendering stays identical to Figma. */
@media (width < 1024px) {
body {
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
}
:lang(de) {
hyphenate-limit-chars: 8 4 4;
}
}
/* No text-wrap: balance or pretty anywhere.
The Figma copy contains U+2028 line separators, meaning the designer set
line breaks by hand. Those are reproduced as
and
browser rebalancing would fight them. */
h1, h2, h3, h4 {
font-weight: var(--weight-regular);
color: var(--color-heading);
letter-spacing: var(--tracking-tight);
margin-block: 0;
}
h1 {
font-size: var(--text-4xl);
line-height: var(--leading-h1);
}
h2 {
font-size: var(--text-3xl);
line-height: var(--leading-h2);
}
h3 {
font-size: var(--text-lg);
line-height: var(--leading-h3);
}
h4 {
font-size: var(--text-md);
line-height: var(--leading-h4);
}
p {
margin-block: 0;
/* No max-width. Figma sets explicit text-box widths per node and those
are reproduced in the section CSS. */
}
/* TBD: the design file does not define a distinct link colour. Measure the
actual link styling during extraction and replace this. Inheriting for
now so nothing invented leaks into the build. */
a {
color: inherit;
text-underline-offset: 0.2em;
transition: color var(--duration-fast) var(--ease-out);
}
:focus-visible {
outline: 2px solid var(--color-accent-deep);
outline-offset: 3px;
}
ul, ol {
margin-block: 0;
padding-inline-start: 1.25em;
}
strong, b {
font-weight: var(--weight-medium);
}
}
@layer utilities {
/* Figma "
headline" / Focustext, 34 / 36 */ .text-lead { font-size: var(--text-xl); font-weight: var(--weight-regular); line-height: var(--leading-lead); } /* Figma "
light", 17 / 19 weight 300 */ .text-light { font-weight: var(--weight-light); } /* Figma "
button", 17px weight 500 */ .text-button { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-button); letter-spacing: var(--tracking-normal); } /* Figma "
fussnote", 10 / 19 weight 300 */ .text-footnote { font-size: var(--text-xs); font-weight: var(--weight-light); line-height: var(--leading-footnote); } /* The signature brand treatment: gradient-filled text. Used 34 times on Startseite, on partial headline phrases, stat numbers, and role labels. Wrap only the coloured RUN, never the whole heading, because the design gradients a phrase inside a longer line:
button style (which reports 100) — measured on this node. */ line-height: calc(24 / 17); color: var(--color-on-dark); text-decoration: none; } /* Not in the design: links have no hover state anywhere in the file. An underline is the least invented thing available. */ .site-header__contact:hover, .site-header__contact:focus-visible { text-decoration: underline; } .site-header__toggle { display: flex; flex-direction: column; justify-content: space-between; flex: none; inline-size: 56px; block-size: 36px; /* 88 → 124, the three bars */ margin-block-start: 4px; /* row top 84 → first bar 88 */ /* Stays above the drawer scrim so it can double as the close control. */ position: relative; z-index: 2; /* Bar geometry in the open state, read by the bars below. */ --bar-shift: 0px; --bar-turn: 0deg; --bar-mid: 1; } .site-header__toggle[aria-expanded="true"] { --bar-shift: 15.5px; --bar-turn: 45deg; --bar-mid: 0; } .site-header__bar { block-size: 5px; border-radius: var(--radius-xs); background-color: var(--color-on-dark); transition: translate var(--duration-base) var(--ease-out), rotate var(--duration-base) var(--ease-out), scale var(--duration-base) var(--ease-out); } /* Closed: three bars. Open: an X. The middle bar collapses with scale, not opacity, because a section stylesheet never contains opacity:0. */ .site-header__bar:first-child { translate: 0 var(--bar-shift); rotate: var(--bar-turn); } .site-header__bar:nth-child(2) { scale: var(--bar-mid) 1; } .site-header__bar:last-child { translate: 0 calc(-1 * var(--bar-shift)); rotate: calc(-1 * var(--bar-turn)); } /* Indigo on this gradient is close to invisible, so the focus ring is white here. Structural accessibility, not a design change. */ .site-header__contact:focus-visible, .site-header__toggle:focus-visible, .site-header__nav-link:focus-visible { outline-color: var(--color-on-dark); } /* ------------------------------------------------------------------ Drawer. INVENTED — the Figma file contains a hamburger at every width and no open state anywhere. Kept to tokens the design already uses: dark-navy surface, white text, the shared duration and easing. ------------------------------------------------------------------ */ .site-header__drawer { position: fixed; inset: 0; z-index: 1; /* Closed state without opacity:0 — visibility also takes the panel out of the tab order and the accessibility tree while it is shut. Opening flips visibility immediately (0s, no delay) so the first link is focusable in the same tick; closing holds it until the slide is done. */ visibility: hidden; background-color: transparent; --drawer-x: 100%; transition: visibility 0s linear var(--duration-base), background-color var(--duration-base) var(--ease-out); } .site-header__drawer[data-open="true"] { visibility: visible; background-color: rgb(0 0 0 / 0.5); --drawer-x: 0%; transition: visibility 0s linear 0s, background-color var(--duration-base) var(--ease-out); } .site-header__panel { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(420px, 100%); padding: 144px 40px 40px; /* clears the hamburger at 1440 */ overflow-y: auto; background-color: var(--color-surface-dark); translate: var(--drawer-x) 0; transition: translate var(--duration-base) var(--ease-out); } .site-header__nav-list { display: grid; gap: 24px; } .site-header__nav-link { font-size: var(--text-lg); line-height: var(--leading-body); color: var(--color-on-dark); text-decoration: none; } .site-header__nav-link:hover, .site-header__nav-link:focus-visible { text-decoration: underline; } /* ------------------------------------------------------------------ Below 1440 there is no design. Decisions taken here: 1360px is where the drawn row stops fitting: 143+69 of inset plus the 796px trust row, the 211px contact box, the 56px bars and two 39px gaps need ~1141px of content width. Under that the header becomes two rows — contact and menu button on top, trust marks underneath — which is the only arrangement that still clears the hero's own top padding (214px down to 160px below 1024). The trust row never wraps: it stays a single line and scrolls horizontally instead. Wrapping it to two lines makes the header ~186px tall, which would collide with the hero heading on small screens. ------------------------------------------------------------------ */ @media (width < 1360px) { .site-header { padding-block: 24px 0; } .site-header__inner { flex-wrap: wrap; align-items: center; row-gap: 12px; column-gap: 20px; } .site-header__trust { order: 1; /* onto its own line, under the top row */ flex: 1 0 100%; display: flex; flex-wrap: nowrap; gap: 32px; overflow-x: auto; overscroll-behavior-inline: contain; } .site-header__trust-item { display: flex; flex: none; align-items: center; gap: 12px; } .site-header__contact { inline-size: auto; margin-block-start: 0; } .site-header__toggle { margin-block-start: 0; } .site-header__panel { padding-block-start: 96px; } } } /* sections/hero/section.css */ /* ========================================================================== Section: hero Figma band y 0..767 in a 1440 frame. Measured anchors, all reproduced exactly at 1440: content inset x = 146 h1 y = 214, w = 532, 72/76, white, "mehr Umsatz" gradient stat values y = 493, 34/36, gradient stat labels y = 545, 17/19, white stat left edges x = 147, 264, 400, 534 CTA pill x = 146, y = 633, 238 x 37, radius 55, gradient @ 70% figure x = 690, y = -82, 872 x 889 ========================================================================== */ @layer sections { .hero { position: relative; isolation: isolate; background-image: var(--gradient-hero); color: var(--color-on-dark); /* The header overlays this section, so the top padding has to clear it. 84px trust bar + its own height, then the h1 lands at y=214. */ /* Derived, not guessed: 214 top puts the h1 at its Figma y. The bottom value is whatever makes the section total exactly 767. */ padding-block: 214px 97px; /* 146/1440 = 10.139vw. Resolves to exactly 146px at 1440. */ padding-inline: calc(var(--stage-x) + clamp(1.25rem, 10.139vw, 146px)) calc(var(--stage-x) + clamp(1.25rem, 10.139vw, 146px)); min-height: 767px; } .hero__inner { position: relative; z-index: 1; max-width: 532px; } .hero__title { /* Figma H1: 72/76. The line break after "für" is the designer's, the break before it comes from the 532px measure. */ font-size: var(--text-4xl); line-height: var(--leading-h1); color: var(--color-on-dark); margin: 0; } .hero__stats { display: grid; /* Left edges at 147, 264, 400, 534 give columns of 117, 136, 134, auto. Not a regular grid; reproduced as measured. */ grid-template-columns: 117px 136px 134px auto; /* h1 occupies 214..442 (3 lines x 76). Values start at 493, so 51. */ margin-block: 51px 0; /* The design's own 1px inconsistency: the h1 sits at x=146, the stat column at x=147. Reproduced rather than tidied. */ margin-inline-start: 1px; } .hero__stat { display: flex; flex-direction: column; /* value at 493, label at 545: a 52px step, of which 36 is the value's own line box. */ gap: 16px; } .hero__stat-value { font-size: var(--text-xl); line-height: var(--leading-lead); } .hero__stat-label { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-on-dark); } .hero__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 238px; block-size: 37px; margin-block-start: 50px; /* stats occupy 493..583, pill starts 633 */ border-radius: var(--radius-2xl); color: var(--color-on-dark); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-button); text-decoration: none; isolation: isolate; } /* The gradient sits at 70% opacity in Figma, the label does not. Applying opacity to the element itself would fade the text too, so the fill lives on a pseudo-element. */ .hero__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--gradient-brand); opacity: 0.7; transition: opacity var(--duration-fast) var(--ease-out); } .hero__cta:hover::before, .hero__cta:focus-visible::before { opacity: 1; } .hero__figure { position: absolute; /* 690/1440, -82/767, 872/1440 — kept proportional so the composition holds as the hero narrows. */ inset-block-start: -10.69%; /* Freezes at the drawn 690 x 4/3, then rides the centred stage. Raw % is what made this grow to 1550px at 2560 and spill 731px out of the hero. */ inset-inline-start: calc(var(--stage-x) + 690px); inline-size: 872.0003px; aspect-ratio: 872 / 889; overflow: hidden; pointer-events: none; z-index: 0; } .hero__figure img { position: absolute; /* The source is larger than its frame in Figma and offset left. */ inset-block-start: 0; inset-inline-start: -27.18%; inline-size: 127.18%; block-size: 124.69%; max-inline-size: none; object-fit: cover; } /* ------------------------------------------------------------------ Below the width the design was drawn at, no comp exists. Decisions made here, logged in CONVENTIONS section 5: - the stat grid drops to two columns, then one - the figure stops being an overlay and becomes a block, because absolute positioning over the text is unreadable when narrow ------------------------------------------------------------------ */ @media (width < 1024px) { .hero { padding-block: 160px 64px; min-height: 0; } .hero__inner { max-width: none; } .hero__figure { position: static; inline-size: 100%; margin-block-start: 48px; } .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .hero__cta { margin-block-start: 48px; } } @media (width < 480px) { .hero__stats { grid-template-columns: minmax(0, 1fr); } .hero__cta { inline-size: 100%; max-inline-size: 238px; } } } /* sections/client-logos/section.css */ /* ========================================================================== Section: client-logos Figma band y 767..1000 in a 1440 frame, 233px tall. Measured anchors, all reproduced exactly at 1440. Positions verified against .figma/client-logos.png by pixel projection, not read off the JSON alone: band y 767 .. 1000 -> padding-block 52 / 41 intro line box x 146, y 819, 17 / 19 -> ink measured x 146..708, baseline at y 834 intro colour #1b1d36 (--color-heading-alt) trailing arrow Poppins 900, gradient -> renders flat #9546ff, see the note on the span logo row "Frame 1" x 123, y 875, 1193 x 84 -> ink measured y 888..944 logo boxes 112 x 84, 68px apart -> 68 is figma spacing/xl logo box centres 179, 359, 539, 719, 899, 1079, 1259 Two things in the source are reproduced rather than corrected: 1. Two different left edges. The copy starts at x=146 (the hero's inset), the logo row at x=123. Reproduced as a section inset of 123 plus a start offset of 23 on the copy. 2. The caritas box is 113px wide where the other six are 112, which pushes the last three boxes right by 1px (Figma centres measured at 719.5, 900, 1080, 1260 against a uniform row's 719, 899, 1079, 1259). That reads as a nudge artefact rather than intent, and the ink inside the seven source PNGs is already off-centre by up to 1.5px, so the row is built from seven uniform 112px boxes. Reported, not encoded. ========================================================================== */ @layer sections { .client-logos { /* No background on purpose. This is the page's own white, so painting it here changes nothing visually — but it DOES occlude the previous section's decorative overhang. Each of these sections is isolated, so it paints atomically over whatever came before it, and a 3D shape that is drawn bleeding across the boundary gets a hard horizontal cut instead. Confirmed against the Figma render: the hero's disc overhangs 40px onto the white below it, and the process ring overhangs 103px. Both were being sliced off. See CONVENTIONS section 3. */ /* Band 767..1000. Copy line box opens at 819, logo row closes at 959. */ padding-block: 52px 41px; /* 123/1440 = 8.542vw. Resolves to exactly 123px at 1440. */ padding-inline: calc(var(--stage-x) + clamp(1.25rem, 8.542vw, 123px)) calc(var(--stage-x) + clamp(1.25rem, 8.542vw, 123px)); } .client-logos__intro { /* The one line of copy doubles as the section heading, so the element-level h2 (56/56) is dropped back to the drawn "
medium", 17/19 regular. No max-inline-size: the Figma text box is 568px but the line inside it measures 562px, so the box never wraps. Capping it would buy nothing at 1440 and would risk a wrap if the fallback arrow glyph is wider than Poppins'. */ margin: 0; /* Figma puts the copy 23px inside the logo row's left edge, 146 against 123. Kept proportional so the indent shrinks with the section inset instead of eating the measure on a phone. 23/1440 = 1.597vw. */ margin-inline-start: clamp(0px, 1.597vw, 23px); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-body); color: var(--color-heading-alt); } .client-logos__arrow { font-weight: var(--weight-black); /* Figma paints ONE gradient across the whole 568px text node, so this glyph sits in its last 3% and renders flat purple (sampled #9546ff in the reference, i.e. --color-brand-to). .u-gradient-text scopes the paint to the span's own box, which across a 17px glyph would run cyan to purple and read visibly wrong. Stretching the paint box back to the text measure and anchoring it right reproduces what Figma drew, while keeping the shared utility as the single source of the gradient itself. .u-gradient-text lives in @layer utilities and therefore still wins on background-image, background-clip and color: only the paint box is overridden here. */ background-size: 568px 100%; background-position: 100% 50%; background-repeat: no-repeat; } .client-logos__row { display: flex; flex-wrap: wrap; align-items: center; /* Figma "Frame 1": seven boxes, 68px apart. Sizing this from vw is a trap. `vw` resolves against the viewport INCLUDING the scrollbar, but the row only gets the content width. On a 1440 window with a classic 15px scrollbar the boxes and gaps compute to 1192 inside a 1179 track, the seventh logo wraps, the section grows from 233 to 349, and every section below it shifts down 116px. So: fixed boxes, and let `space-between` derive the gap from whatever width actually exists. At the drawn 1440 that yields 68.3px, matching spacing/xl; narrower, the gaps close before anything wraps. */ justify-content: space-between; column-gap: 1.5rem; row-gap: 2rem; /* Copy line box ends at 838, row opens at 875. */ margin-block-start: 37px; } /* Once the row genuinely cannot hold all seven, wrapping takes over and space-between would strand the last line's items across the full width. Left-align them so they park under column one. */ @media (width < 60rem) { .client-logos__row { justify-content: flex-start; column-gap: clamp(1.5rem, 4.722vw, var(--space-xl)); } } /* Below the desktop range the wordmarks may shrink, but not past 96px: three of them carry ~5px microtype ("MAX HOLZBAU", "FORMTEILE", "VISION GUIDED ROBOTICS") that stops reading below that. */ @media (width < 60rem) { .client-logos__logo { inline-size: 96px; } } .client-logos__item { /* Never shrink: a squashed wordmark is worse than a wrapped row. */ flex: 0 0 auto; } .client-logos__logo { /* 112 x 84 in Figma. The sources are 400 x 300, the same 4:3, so nothing is cropped and contain and cover are identical here. Fixed rather than vw: see the scrollbar note on .client-logos__row. The shrink-and-floor behaviour moves to the media query above, so the drawn desktop size can never depend on whether a scrollbar is present. */ inline-size: 112px; block-size: auto; aspect-ratio: 4 / 3; object-fit: contain; } /* ------------------------------------------------------------------ Below 1440 there is no comp. Decisions made here, for the log: 1. The row WRAPS, it does not scroll horizontally. Client logos are a trust signal, so all seven have to be countable without an interaction; a scroller hides the tail behind a gesture that is invisible on a trackpad and needs a tabindex plus a visible affordance to stay keyboard-operable. Wrapping also keeps CONVENTIONS section 5's "no horizontal scroll at 320" true without an inner scroll container that has to be defended. 2. Above 60rem the boxes are a fixed 112px and `space-between` derives the gap from the real content width, so all seven hold one line regardless of scrollbar width. Below 60rem the boxes shrink toward their 96px floor and the row wraps: 6+1, 5+2, 4+3, 3+3+1, and finally 2+2+2+1 at 320px, with no overflow. 3. Wrapped rows stay LEFT aligned, as drawn. Centring them was tried and rejected: it strands the seventh logo in the middle of an otherwise empty line, where left alignment parks it under the first column and the whole thing reads as an ordinary grid. That also means this section needs no layout breakpoint at all. ------------------------------------------------------------------ */ } /* sections/process/section.css */ /* ========================================================================== Section: process Figma band y 1000..1870 in a 1440 frame. Measured anchors, all reproduced exactly at 1440: content inset x = 125 left, 77 right (the design is asymmetric) h2 y = 1046, 56/56, #1b1d36, manual break after "Ablauf", "Effizienz & Leads" on the brand gradient intro y = 1193, 17/19 weight 300, black, one line card grid y = 1264, four 290px columns at x = 125/441/757/1073, gap 26, total 1238 card 290 x 524, radius 20, shadow 0 4px 4px rgb(0 0 0 / .25) card overlay 180deg: transparent 0%, rgb(35 35 72 / .9) 50%, .9 100% app icon y = 1513, 54 x 54, radius 10 card title y = 1591, 17/19 weight 400, white card text y = 1641, 17/19 weight 300, white, 215px measure ornament x = -242, y = 1426, frame 657 x 547, image at 120.14% Vertical rhythm: 1046 - 1000 = 46 top, 1870 - 1788 = 82 bottom. ========================================================================== */ @layer sections { .process { position: relative; isolation: isolate; /* Stated, not inherited from the page: the section has to look the same wherever it is ordered. */ /* No background on purpose. This is the page's own white, so painting it here changes nothing visually — but it DOES occlude the previous section's decorative overhang. Each of these sections is isolated, so it paints atomically over whatever came before it, and a 3D shape that is drawn bleeding across the boundary gets a hard horizontal cut instead. Confirmed against the Figma render: the hero's disc overhangs 40px onto the white below it, and the process ring overhangs 103px. Both were being sliced off. See CONVENTIONS section 3. */ padding-block: 46px 82px; /* 125/1440 = 8.681vw, 77/1440 = 5.347vw. Both resolve to the Figma pixel at 1440. The design's own inset is asymmetric because the 1238px card grid was placed from the left; reproduced rather than centred. */ padding-inline: calc(var(--stage-x) + clamp(1.25rem, 8.681vw, 125px)) calc(var(--stage-x) + clamp(1.25rem, 5.347vw, 77px)); } .process__title { /* h2 element style supplies 56/56. Colour is the raw #1b1d36 the design uses here, not dark-navy. */ max-inline-size: 881px; /* Figma text box */ color: var(--color-heading-alt); } .process__intro { /* h2 box ends at 1158, intro sits at 1193. */ margin-block-start: 35px; max-inline-size: 765px; /* Figma text box, one line at 1440 */ font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-text); } .process__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; /* 441 - (125 + 290) */ /* intro box ends at 1212, cards start at 1264. */ margin-block-start: 52px; } .process__card { position: relative; isolation: isolate; min-block-size: 524px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--color-on-dark); /* Clips the oversized backdrop photo to the rounded frame. */ overflow: hidden; } /* The dark scrim over the photo. Figma draws it as its own rectangle per card with the same gradient, so it is a pseudo-element here. */ .process__card::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( 180deg, rgb(0 0 0 / 0) 0%, rgb(35 35 72 / 0.9) 50%, rgb(35 35 72 / 0.9) 100% ); pointer-events: none; } /* Figma scales each backdrop into the card with its own crop transform, and several of them are non-uniform (the source is stretched). Reproduced as measured, per card, via the custom properties below. Deliberately no object-fit: `fill` is what Figma renders. */ .process__photo { position: absolute; inset-block-start: var(--photo-y); inset-inline-start: var(--photo-x); inline-size: var(--photo-w); block-size: var(--photo-h); max-inline-size: none; } /* Crop per card, plus the card's own text inset. These belong to the photo and the text as they were placed in Figma; a replacement image from the CMS will need its own values or a fallback to cover. The insets are NOT uniform in the design: the text column starts 25px from the card edge on the first card, 33px on the second and 24px on the last two, and the body copy of the first card is indented 2px further than its own title while the second card's body sits 6px lower than everyone else's. That is misalignment, not intent: reproduced under the fidelity rule and reported, not corrected. */ .process__card[data-photo="strategy"] { --photo-x: 0.12%; --photo-y: -6.87%; --photo-w: 193.1%; --photo-h: 106.87%; --inset: 25px; /* icon + title at x = 150 */ --text-indent: 2px; /* body at x = 152 */ } .process__card[data-photo="design"] { --photo-x: -69.35%; --photo-y: -17.39%; --photo-w: 211.87%; --photo-h: 117.26%; --inset: 33px; /* icon + title + body at x = 474 */ --text-drop: 6px; /* body at y = 1647, not 1641 */ } .process__card[data-photo="infrastructure"] { --photo-x: 0.11%; --photo-y: -0.03%; --photo-w: 204.83%; --photo-h: 113.36%; } .process__card[data-photo="build"] { --photo-x: -42.75%; --photo-y: -30.54%; --photo-w: 235.7%; --photo-h: 130.45%; } .process__card-inner { position: relative; z-index: 1; /* above the photo and the scrim */ /* Icon top sits 249px below the card top (1513 - 1264). The left inset is per card, see the blocks above; 24px is what three of the four use. The bottom padding is a gutter for longer CMS copy only: at 1440 with the drawn copy the card is 515px tall and min-block-size takes it to the 524 in the design. */ padding-block: 249px 24px; padding-inline: var(--inset, 24px) 24px; } .process__icon { inline-size: 54px; block-size: 54px; border-radius: var(--radius-sm); object-fit: cover; } .process__card-title { /* Icon ends at 1567, title at 1591. */ margin-block-start: 24px; max-inline-size: 215px; /* Figma text box: it sets the line breaks */ font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-body); color: var(--color-on-dark); } .process__card-text { /* Two-line title ends at 1629, body at 1641. --text-drop and --text-indent carry the second and first card's own offsets. */ margin-block-start: calc(12px + var(--text-drop, 0px)); margin-inline-start: var(--text-indent, 0px); max-inline-size: 215px; font-size: var(--text-sm); line-height: var(--leading-body); } .process__ornament { position: absolute; z-index: -1; /* behind the cards, above the background */ /* Figma x = -242, y = 1426, i.e. 426 below the top of the band. It bleeds past the bottom of the section on purpose: the next section declares it as bleeding in and does not draw it. Horizontal overflow is contained by body { overflow-x: clip } in base/reset.css. */ inset-block-start: 426px; inset-inline-start: -242px; inline-size: 657px; block-size: 547px; overflow: hidden; pointer-events: none; } .process__ornament img { /* Square source in a shorter frame: the bottom of the ring is cropped. */ inline-size: 100%; block-size: 120.14%; max-inline-size: none; } /* ------------------------------------------------------------------ Below 1440 there is no comp. Decisions made here: - four columns hold to 1200, then two, then one at 640. Four 290px cards cannot narrow much further before the 17px copy shreds. - the 215px text measure is a Figma text box, not a design intent for wider cards, so it is dropped once the cards stop being 290 wide. - the ornament is hidden below 768: stacked cards sit exactly where it is drawn and it reads as an artefact rather than as decoration. ------------------------------------------------------------------ */ @media (width < 1200px) { .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process__card { /* The per-card inset jitter is reproduced only at the width it was drawn at. Once the cards are not 290px wide it reads as a bug, so the four cards align. */ --inset: 24px; --text-indent: 0px; --text-drop: 0px; } .process__card-title, .process__card-text { max-inline-size: none; } } @media (width < 768px) { .process__ornament { display: none; } } @media (width < 640px) { .process__steps { grid-template-columns: minmax(0, 1fr); } .process__card-inner { /* The photo band keeps its proportion of a shorter card. */ padding-block-start: 200px; } .process__card { min-block-size: 0; } } } /* sections/benefits/section.css */ /* ========================================================================== Section: benefits Figma band y 1870..2800 in a 1440 frame (930 tall). Measured anchors, all reproduced exactly at 1440: h2 text box x = 116, y = 2053, w = 762, 56/56, #1b1d36 gradient run "staunen lassen", gradient spans the WHOLE 762px box checklist cards x = 122, w = 579, h = 110, y = 2294 / 2430 / 2566 check badge 37 x 37 at x = 137, radius 30, brand gradient item title x = 184, 17/19 regular body x = 184, w = 486, 17/19 light quote card x = 773, y = 1941, 667 x 574, radius 15 on the LEFT only quote text w = 498, centred, y = 2088, 34/36 white gradient rule x = 994, y = 2228, 225 x 3 attribution x = 994, y = 2267, w = 254, 17/19 light white rating card x = 1155, y = 2392, 285 x 208, radius 15 on the LEFT only "5,00" box x = 1237, y = 2419, w = 121, 34/36, gradient text stars 5 x 28px from x = 1218, pitch 33 (= 28 + 5), y = 2476 rating label box x = 1203, y = 2526, w = 190, 17/19, gradient text shape (image 55) x = 689, y = 2097, 725.428 x 747.695, inner frame 523.278 x 573.553 rotated 26.75deg Two things worth knowing before editing: 1. The quote card and the rating card run off the right edge of the frame. That is why both carry left-only radii in Figma. The section therefore has NO right padding and both cards are anchored to the section's right edge, so the bleed survives viewports wider than 1440. 2. The h2 gradient is painted on the h2, not on the run. In Figma the gradient is mapped across the full 762px text box, so "staunen" (line 2, x 470..710) is violet while "lassen" (line 3, x 116..296) is cyan. Putting .u-gradient-text on the run instead would map the gradient across the run's own two fragments and invert those colours. ========================================================================== */ @layer sections { .benefits { position: relative; isolation: isolate; /* No background on purpose. This is the page's own white, so painting it here changes nothing visually — but it DOES occlude the previous section's decorative overhang. Each of these sections is isolated, so it paints atomically over whatever came before it, and a 3D shape that is drawn bleeding across the boundary gets a hard horizontal cut instead. Confirmed against the Figma render: the hero's disc overhangs 40px onto the white below it, and the process ring overhangs 103px. Both were being sliced off. See CONVENTIONS section 3. */ /* Band 1870..2800. h2 line box at 2053 => 183 above it; the last checklist card ends at 2676 => 124 below it. Held fixed down to the breakpoint because the absolutely positioned rating card is measured from the section's top edge. */ padding-block: 183px 124px; /* 116/1440 = 8.056vw. Right side is 0: the cards bleed off the edge. */ padding-inline: calc(var(--stage-x) + clamp(1.25rem, 8.056vw, 116px)) calc(var(--stage-x) + 0px); } .benefits__inner { display: grid; /* Left column is fluid, the quote card keeps the drawn 667px and stays flush to the right edge. 701 -> 773 is the measured 72px gap. */ grid-template-columns: minmax(0, 1fr) 667px; /* Explicit rows, because the quote card spans both of them and `-1` only resolves against the explicit grid. */ grid-template-rows: auto auto; column-gap: 72px; /* h2 ends at 2221, first card starts at 2294. */ row-gap: 73px; } /* ---------------------------------------------------------------- heading */ .benefits__title { grid-column: 1 / -1; grid-row: 1; /* The drawn text box, and the box the gradient is mapped across. It does NOT reliably produce the drawn line breaks on its own: "Mitbewerber staunen lassen" measures 747px in the browser against a 762px box, so it stays on one line where Figma wrapped it, costing the section a whole 56px line and shifting every section below it up by that much. 15px of metric slack is far too little to depend on, so the break before "lassen" is set explicitly in the markup. */ inline-size: 762px; max-inline-size: 100%; color: var(--color-heading-alt); background-image: var(--gradient-brand); } /* Fallback for browsers without background-clip: text — the run keeps the gradient's end colour rather than disappearing. */ .benefits__title-run { color: var(--color-brand-to); } @supports (background-clip: text) or (-webkit-background-clip: text) { .benefits__title { -webkit-background-clip: text; background-clip: text; } /* Transparent glyphs reveal the h2's own gradient, positioned across the whole heading. The solid runs paint over it. */ .benefits__title-run { color: transparent; } } /* -------------------------------------------------------------- checklist */ .benefits__list { grid-column: 1; grid-row: 2; display: grid; /* 2294 -> 2430 is a 136 pitch on 110-tall cards. */ gap: 26px; inline-size: 579px; max-inline-size: 100%; /* The cards sit at x=122, the h2 text box at x=116. Reproduced, not averaged away. */ margin-inline-start: 6px; } .benefits__item { display: flex; /* Badge ends at 174, text starts at 184. */ gap: 10px; /* Badge top 13 below the card top, left 15 in; text column is 486 wide, which puts the right padding at 31. Bottom 20 completes the 110. */ padding: 13px 31px 20px 15px; min-block-size: 110px; border-radius: var(--radius-md); background-color: var(--color-glass-light); box-shadow: var(--shadow-card); } .benefits__check { flex: none; display: grid; place-items: center; inline-size: 37px; block-size: 37px; /* Figma says radius/xl on a 37px square; the browser clamps it to a circle, which is what the design renders. */ border-radius: var(--radius-xl); background-image: var(--gradient-brand); color: var(--color-on-dark); } .benefits__item-body { /* Badge starts 13 below the card top, the title line box 24. */ padding-block-start: 11px; } .benefits__item-title { color: var(--color-heading); /* Title node is 28 tall on a 19px line box; the body follows at +28. */ margin-block-end: 9px; } .benefits__item-text { color: var(--color-heading); } /* ------------------------------------------------------------- quote card */ .benefits__quote { grid-column: 2; grid-row: 1 / -1; align-self: start; /* The card starts at 1941, 112 above the h2's line box at 2053. */ margin: -112px 0 0; padding-block-start: 147px; min-block-size: 574px; /* Left-only radii: the card runs off the right edge of the frame. */ border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); color: var(--color-on-dark); /* The fill is a mesh/image fill. Figma's codegen exports no colour for it at all, so it arrived as a bare div. This is the real fill, exported from the node at 2x (667 x 574 -> 1334 x 1148). It replaces four hand-fitted gradient layers that got to ~5.6% RMSE against the render. That was the ceiling: a mesh gradient has no faithful CSS expression, so the remaining error was structural rather than a matter of better-fitted stops. background-color is the paint-time fallback before the image decodes, sampled from the card's top-left. */ background-color: #1c1e36; background-image: url("img/quote-card-fill.png"); /* Pinned to the drawn 667 x 574, anchored top-left, NOT `cover`. The card is a min-height box that grows with its content, and `cover` rescales the whole mesh whenever it does, sliding the warm corner off-position. At the drawn size the fill lands exactly and simply stops if the card grows; the background-color underneath carries the overflow. */ background-size: cover; background-position: left top; background-repeat: no-repeat; } .benefits__quote-text { /* 498 wide, centred in the 667 card: 84.5 either side (Figma 85 / 84). */ inline-size: 498px; max-inline-size: 100%; margin: 0 auto; text-align: center; } /* The 225 x 3 gradient rule under the quote. Decorative, so it is a pseudo-element rather than an empty span. Centring it inside the 498 text column lands it at x=994, exactly as drawn. */ .benefits__quote-text::after { content: ""; display: block; inline-size: 225px; max-inline-size: 100%; block-size: 3px; /* Quote text ends at 2196, rule at 2228. */ margin: 32px auto 0; background-image: var(--gradient-brand); } .benefits__quote-author { /* Left-aligned in a 254 box that starts at the rule's left edge (x=994). It reads as centred but is not, so it is reproduced as drawn. */ inline-size: 254px; max-inline-size: 100%; /* Rule ends at 2231, attribution line box at 2267. */ margin: 36px 0 0 calc((100% - 225px) / 2); } /* ------------------------------------------------------------ rating card */ .benefits__rating { position: absolute; z-index: 1; /* above the 3D shape, which it covers */ /* 2392 - 1870 = 522 from the section's top edge; flush right, like the quote card it overlaps. */ inset-block-start: 522px; inset-inline-end: 0; inline-size: 285px; /* Score line box at 27, label ends at 172, card is 208. */ padding-block: 27px 36px; border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); background-color: var(--color-surface); box-shadow: var(--shadow-card); text-align: center; } .benefits__rating-score { /* The drawn text box. The gradient is mapped across it, not across the glyphs, so the width matters. */ inline-size: 121px; margin-inline: auto; } .benefits__rating-stars { display: flex; justify-content: center; /* 1218 -> 1251 is a 33 pitch on 28px stars. */ gap: 5px; /* Score line box ends at 2455, stars at 2476. */ margin-block-start: 21px; } .benefits__rating-label { inline-size: 190px; /* Stars end at 2504, label line box at 2526. */ margin: 22px auto 0; } /* ------------------------------------------------------------- 3D shape */ .benefits__shape { position: absolute; /* 1440 - (689 + 725.428) = 25.572. Anchored right so it keeps its place against the quote card on viewports wider than the frame. */ inset-block-start: 227px; inset-inline-end: 25.572px; inline-size: 725.428px; aspect-ratio: 725.428 / 747.695; pointer-events: none; } /* The rotated frame: Figma rotates a 523.278 x 573.553 box by 26.75deg inside the bounding box above, and the image overhangs it. */ .benefits__shape-frame { position: absolute; inset-block-start: 11.645%; inset-inline-start: 13.934%; inline-size: 72.134%; block-size: 76.71%; overflow: hidden; transform: rotate(26.75deg); } .benefits__shape-frame img { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 129.3%; block-size: 117.96%; max-inline-size: none; } /* ------------------------------------------------------------------ Below 1280 there is no comp. Decisions made here, logged in the handover notes: - the two columns stack. 116 + 430 + 72 + 667 = 1285 is the narrowest width at which the checklist still has a readable measure next to the fixed 667px card, so that is the breakpoint. - the quote card keeps its right bleed and its left-only radii, loses its negative top margin and its 574 minimum height (nothing overlaps its lower half any more, so the empty space has no purpose). - the rating card stops overlapping and follows the quote, still flush right so the bleed reads as deliberate. - the 3D shape is dropped: it is decorative and its whole placement is a function of the 1440 composition. ------------------------------------------------------------------ */ @media (width < 1280px) { .benefits { padding-block: clamp(4rem, 12.708vw, 183px) clamp(3rem, 8.611vw, 124px); } .benefits__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 48px; } .benefits__list { grid-row: auto; /* The 6px offset against the h2 is a quirk of the drawn frame. Dropped here, where it would only push the cards past the right edge. */ margin-inline-start: 0; } .benefits__quote { grid-column: 1; grid-row: auto; margin-block-start: 0; padding-block: clamp(3rem, 10vw, 147px) clamp(3rem, 10vw, 147px); min-block-size: 0; } .benefits__rating { position: static; inline-size: 285px; max-inline-size: 100%; margin: 24px 0 0 auto; } .benefits__shape { display: none; } } @media (width < 640px) { .benefits__item { /* The drawn 31px right inset is dead space once the card is this narrow, so it falls back to a symmetric one. */ padding-inline: 15px; } .benefits__quote-author { /* The 254px box positioned off the rule's left edge stops making sense once the card is narrower than the drawn one. */ inline-size: auto; margin-inline: 0; text-align: center; } } } /* sections/projects/section.css */ /* ========================================================================== Section: projects (Referenzen) Figma band y 2800..4020 in a 1440 frame. Measured anchors, all reproduced exactly at 1440: h2 x = 136, y = 2879, 56/56, #1b1d36, "Websites" gradient card rects 580 x 367, radius 15, shadow 0 4px 4px rgb(0 0 0/.25) MAX Holzbau x = 122, y = 3068.85 fill white @ 20% neovum x = 754, y = 3068.71 fill white @ 20% Richter Formteile x = 125, y = 3558.71 fill white @ 90% PulsMedia x = 754, y = 3556.71 fill: mesh gradient, see below mockups (overhang the card top, never clipped) mh-usercase x = 143, y = 2963, 541.07 x 399.99, rotated 0.43deg neovum-usercase x = 791.1,y = 2949.5, 542.66 x 401.35 formteile-case x = 147, y = 3461, 540 x 399 pulsmedia-case x = 777, y = 3461, 540 x 399 company names x = card + 33, y = card + 273, 26/24, #17203f (#ffffff on the dark card) descriptors x = card + 33, y = card + 306.15, 17/19, brand gradient column pitch 632 (580 + 52 gap), row pitch 489.85 (367 + 122.85) section insets 122 left, 106 right, 79 above the h2, 94 below row 2 Two coordinates in the file are off a regular grid by a hair — the Richter card sits 3px right of the MAX card above it, and the PulsMedia card 2px above the Richter card while its text stays on the same baseline as Richter's. Both are reproduced (see the per-card blocks) and reported. ========================================================================== */ @layer sections { .projects { /* h2 line box at 79, last card rect ends 94 above the band edge. */ padding-block: 79px 94px; /* Left inset is the card grid's 122; the h2 sits 14px further in and carries that itself. 122/1440 = 8.4722vw, 106/1440 = 7.3611vw. */ padding-inline: calc(var(--stage-x) + clamp(1.25rem, 8.4722vw, 122px)) calc(var(--stage-x) + clamp(1.25rem, 7.3611vw, 106px)); } .projects__title { /* Figma h2 style, 56/56. Colour is #1b1d36, the near-duplicate of dark-navy that this design uses for headings on light ground. */ color: var(--color-heading-alt); /* The h2 text node is 881 wide and starts 14px right of the card grid. */ max-inline-size: 881px; margin-inline-start: clamp(10.5px, 0.9722vw, 14px); } /* Figma anchors a text gradient to the whole TEXT NODE, not to the coloured run, so "Websites" shows the 52%..82% slice of the brand gradient and starts periwinkle (#7387ff), not cyan. Measured off the reference render. Both values are in em so the slice stays identical as the type scales: 881px and the advance of "Küzlich gebaute " at the 56px desktop size. */ .projects__accent { background-size: 15.732em 100%; background-position-x: -8.237em; } .projects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 580px)); /* 52/1440 = 3.6111vw. */ column-gap: clamp(1.25rem, 3.6111vw, 52px); /* Row 2 sits 122.85 below row 1, and the h2 ends 133.85 above row 1. Both are floors, not fixed values: the mockups overhang the card top by 17.9% of the card width, so as the cards narrow the gaps must stay ahead of that overhang. 21vw does exactly that below 1440 and is clamped away at 1440, where the measured numbers win. */ row-gap: clamp(6rem, 21vw, 122.85px); margin-block-start: clamp(4rem, 21vw, 133.85px); } .projects__card { position: relative; /* 273 / 49 / 41.85 / 33 of 580. The padding box IS the 498px text column the design draws, so the name and the descriptor need no geometry of their own — and the card grows instead of overflowing when the descriptor wraps below 1440. At 1440 the card is 367 tall to the pixel: 273 + 24 + 9.15 + 19 + 41.85. */ padding: 47.069% 8.448% 7.216% 5.690%; border-radius: var(--radius-md); box-shadow: var(--shadow-card); /* Cards 1 and 2 are white at 20%, card 3 at 90%, over the white page. Reproduced as measured: the glass is what lets the neighbouring sections' 3D shapes tint the corners they pass behind. */ background-color: var(--color-glass-light); /* Mockup placement, as a share of the card width — the Figma frame is proportional, so the composition survives the card narrowing. Default = card 1. */ --media-x: 3.879%; /* 22.50px */ --media-y: -17.899%; /* -103.82px */ --media-w: 93.287%; /* 541.07px */ --media-rotate: 0deg; } .projects__media { position: absolute; inset-block-start: 0; inset-inline-start: var(--media-x); /* The vertical offset is a percentage MARGIN, not an inset: percentage margins resolve against the containing block's width in both axes, so the overhang stays locked to the card's width rather than its content-driven height. */ margin-block-start: var(--media-y); inline-size: var(--media-w); /* The mockups carry their own transparent margin and the card must not clip them: they deliberately overhang its top edge. */ block-size: auto; rotate: var(--media-rotate); } /* .projects__name is an