/* ==========================================================================
Shared layer: cascade order, the token bridge, reset, typography.
Per-section CSS is enqueued by its own block, not from here.
========================================================================== */
/* Bridge: theme.json owns the values (so the editor UI offers the right
palette and sizes), and these aliases keep the section CSS extracted from
the static build working unchanged. One source, two names. */
:root {
--color-surface: var(--wp--preset--color--white);
--color-surface-dark: var(--wp--preset--color--dark-navy);
--color-surface-muted:var(--wp--preset--color--light-gray);
--color-surface-soft: var(--wp--preset--color--peach);
--color-text: var(--wp--preset--color--black);
--color-heading: var(--wp--preset--color--dark-navy);
--color-heading-alt: var(--wp--preset--color--heading-alt);
--color-on-dark: var(--wp--preset--color--white);
--color-accent: var(--wp--preset--color--purple);
--color-accent-deep: var(--wp--preset--color--indigo);
--color-brand-from: var(--wp--preset--color--brand-from);
--color-brand-to: var(--wp--preset--color--brand-to);
--gradient-brand: var(--wp--preset--gradient--brand);
--gradient-hero: var(--wp--preset--gradient--hero);
--text-xs: var(--wp--preset--font-size--xs);
--text-sm: var(--wp--preset--font-size--sm);
--text-md: var(--wp--preset--font-size--md);
--text-lg: var(--wp--preset--font-size--lg);
--text-xl: var(--wp--preset--font-size--xl);
--text-2xl: var(--wp--preset--font-size--xxl);
--text-3xl: var(--wp--preset--font-size--xxxl);
--text-4xl: var(--wp--preset--font-size--display);
--leading-h1: var(--wp--custom--leading--h1);
--leading-h2: var(--wp--custom--leading--h2);
--leading-h3: var(--wp--custom--leading--h3);
--leading-h4: var(--wp--custom--leading--h4);
--leading-lead: var(--wp--custom--leading--lead);
--leading-body: var(--wp--custom--leading--body);
--leading-footnote: var(--wp--custom--leading--footnote);
--leading-button: var(--wp--custom--leading--button);
--radius-xs: var(--wp--custom--radius--xs);
--radius-sm: var(--wp--custom--radius--sm);
--radius-md: var(--wp--custom--radius--md);
--radius-lg: var(--wp--custom--radius--lg);
--radius-xl: var(--wp--custom--radius--xl);
--radius-2xl: var(--wp--custom--radius--2xl);
--shadow-card: var(--wp--preset--shadow--card);
/* Above 1440 nothing scales: the design freezes and centres, backgrounds
still bleed. Same policy as the static build. */
--stage-w: min(100vw, var(--wp--custom--stage--width));
--stage-x: max(0px, (100vw - var(--wp--custom--stage--width)) / 2);
}
/* ==========================================================================
Typography. The nine Figma text styles, mapped to elements and utilities.
Headings are styled at element level so markup stays clean: sections do not
put a class on every h2. Utilities exist only for the paragraph variants,
which genuinely vary within a section.
Figma style -> here
H1 -> h1
H2 -> h2
H3 -> h3
H4 -> h4
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.
========================================================================== */
/* ---------------------------------------------------------------------- */
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);
}
/* 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:
Unser perfektionierter Ablauf für maximale
Effizienz & Leads
background-clip: text has no accessible-name effect, and the text stays
selectable and searchable. Falls back to the solid end colour where
background-clip is unsupported. */
.u-gradient-text {
background-image: var(--gradient-brand);
color: var(--color-brand-to);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.u-gradient-text {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
/* Testimonial quote body: Poppins 200 italic. */
.text-quote {
font-weight: var(--weight-extralight);
font-style: italic;
}
/* Reproduces a designer's manual line break (U+2028 in the Figma copy).
Visible at the desktop widths the design was drawn for, collapsed below,
where the original break would land in the wrong place. */
.u-br-lg {
display: none;
}
@media (width >= 1024px) {
.u-br-lg {
display: inline;
}
}
.visually-hidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ==========================================================================
Reset. Minimal and opinion-free: it removes browser defaults that fight the
design and nothing else. Anything that changes how the page LOOKS belongs in
typography.css or a section, not here.
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* Must be on the root element, not just body. Several sections bleed past
the right edge by design (the hero figure reaches x=1562, cards run off
the frame). Clipping only on body still lets the root grow, which raises
a horizontal scrollbar, which narrows the viewport by ~15px, which is
enough to wrap the 7-logo client row onto a second line and shift every
section below it by 116px. One missing declaration, a whole-page layout
shift.
`clip` rather than `hidden`: hidden would make this a scroll container
and break `position: sticky` in descendants. */
overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body {
margin: 0;
min-height: 100svh;
/* Sections are full-bleed and several contain shapes that overhang the
viewport horizontally. Clipping here is what keeps the 320px
no-horizontal-scroll rule true without every section defending itself. */
overflow-x: clip;
}
img,
picture,
svg,
video,
canvas {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
ul[class],
ol[class] {
list-style: none;
margin: 0;
padding: 0;
}
/* Sections own their vertical rhythm as padding. A stray margin here would
collapse against a neighbour and break order independence. */
section {
margin: 0;
}
/* The measured content column: 1164px wide, centred, from the Figma frames. */
.wrapper {
width: 100%;
max-width: var(--wrapper);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Core block layout resets.
WordPress emits its own unlayered rules for is-layout-flow / -flex and for
blockGap, which introduce margins the design does not have. They are
unlayered, so they outrank everything in @layer sections; neutralising them
has to happen here and has to be specific enough to win on its own terms. */
/* Not :where() — WordPress's own layout rules carry real specificity, and a
zero-specificity reset loses to them. */
.wp-block-heading { margin-block: 0; }
.wp-block-image { margin: 0; }
.wp-block-image figcaption { display: none; }
/* core/image wraps every image in a . The extracted CSS expects the
image itself to be the laid-out box, so the figure is removed from layout
and contributes nothing. Its class stays for the editor's benefit. */
.wp-block-image { display: contents; }
/* A pattern override can change content but never remove a block. The design
needs a few elements absent on some pages (the Agentur hero has no subline,
the interior CTAs drop a portrait), so an empty override stands for
"not on this page" and the element takes no space. */
.hero-page__subtitle:empty,
.hero-page__cta:empty,
.contact-cta__title:empty { display: none; }
img[src=""], img:not([src]) { display: none; }
/* core/button wraps its anchor in two divs; the extracted CSS styles the
anchor itself, so the wrappers contribute no box. */
.wp-block-buttons, .wp-block-button { display: contents; }
/* ==========================================================================
Core-block resets, deliberately UNLAYERED.
WordPress emits its block styles (and everything from theme.json) without a
cascade layer, and unlayered CSS beats layered CSS whatever the specificity.
So anything that has to override core cannot live in
padding: 0;
background: none;
border-radius: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
.wp-block-buttons, .wp-block-button, .wp-block-image { display: contents; }
/* Zero WordPress's block gap at the variable rather than with a blanket
margin reset. Its own rule reads this variable and carries specificity
0,1,0; a reset on `.is-layout-flow > *` would be 0,2,0 and would then beat
every section rule that legitimately sets a margin. */
:root { --wp--style--block-gap: 0px; }
.wp-block-heading { margin-block: 0; }