/* -------------------------------------------------- */ /* Fonts + tokens */ /* -------------------------------------------------- */ /* Mazzard H Black — the display face (h1/h2/h3, stat numbers, buttons, eyebrows, everything that reads var(--font-display) below), replacing Archivo Black. Registered under its own family name rather than folded into 'Mazzard H' as weight 900: 'Mazzard H' already has a 400 (Regular) for the body face below, and every var(--font-display) consumer in the codebase renders at the browser's default weight (400) without setting its own font-weight — same as Archivo Black's own @font-face used to, which is exactly why it worked without every caller specifying one. Two families each with their own font stated as weight 400 keeps that "just works, no font-weight needed anywhere" contract intact for both roles rather than requiring every existing var(--font-display) rule in the codebase to start carrying an explicit font-weight: 900. */ @font-face { font-family: 'Mazzard H Black'; src: url('../fonts/mazzardh-bold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* Mazzard H — the site-wide body/UI face, replacing the system-ui stack style.css used to fall back to. Five of the family's ~18 weights are converted: the three the site's CSS asks for by weight (400/600/700 — grep the codebase for font-weight before adding a fourth) plus Light (300) and Light Italic, added on request even though nothing in the CSS specifically calls for 300 yet. Everything else — the remaining weights, and italics for anything other than Light — stays unconverted; the two spots that use font-style: italic today (.admin-hint, a referenz pull-quote) fall back to a synthesized oblique of Regular, which is fine for two rarely-seen lines of text. The rest of the source OTFs sit in mazzard-font-family-final.zip, not in this repo, if another weight turns out to be needed later. Licensed Personal Use Only (Befonts) — used here commercially anyway at the site owner's explicit instruction; a commercial licence should be sorted before this ships to production. */ @font-face { font-family: 'Mazzard H'; src: url('../fonts/mazzardh-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Mazzard H'; src: url('../fonts/mazzardh-lightitalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Mazzard H'; src: url('../fonts/mazzardh-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Mazzard H'; src: url('../fonts/mazzardh-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Mazzard H'; src: url('../fonts/mazzardh-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Brand gradient: Pink → Blau, per brand spec. -34deg runs the gradient from bottom-left (pink) to top-right (blue); every two-colour brand gradient in the site shares this angle via --gradient-angle. */ --color-gradient-start: #e9446a; --color-gradient-end: #3e3c90; --gradient-angle: -34deg; --color-ink: #111111; --color-body: #4a4a4a; --color-bg-alt: #F2F2F255; --color-border: #e2e2e2; /* -------------------------------------------------- */ /* Corner radii */ /* -------------------------------------------------- */ /* --radius is the outer radius: anything that reads as a surface in the page — cards, panels, sections, the modal, standalone images. Anything narrower than 48px is capped by the browser at half its own size, so small tiles and buttons come out as pills from the same value. Nested boxes follow the concentric rule, inner = outer − gap, so two sets of corners never fight: a child sitting 2rem inside a 24px corner would need 24 − 32, i.e. a square corner, which reads hard against how round the rest of the site is. --radius-nested is the floor we stop at. In practice every panel here pads by 2rem or more, so the floor is what applies; where a container pads by less than that — the Referenz logo tile at 0.75rem — the exact figure is written out with a calc so the arithmetic stays visible. --radius-child is how that reaches the children. Every rounded surface re-declares it, and everything that sits inside one (inputs, images, hover fills, icon tiles, chips) rounds to var(--radius-child) rather than to --radius, with no extra selector per component. Controls are the exception, and they opt out deliberately: buttons, the submit, pagination links, tags and the menu toggle take --radius-nested at every depth. --radius on a box that short resolves to half its height, which is a pill — so following the cascade would have made the same button a stadium in open page space and a 12px rectangle inside a card. One shape everywhere is the point, and the icon tiles follow them for the same reason. The only round things left are round for structural reasons: the Vorgehen markers, which have the timeline rail running through their centre, and the modal close button. */ --radius: 24px; --radius-nested: 12px; --radius-child: var(--radius); /* -------------------------------------------------- */ /* Type scale */ /* -------------------------------------------------- */ /* Six steps, and every size in the theme is one of them. There used to be nineteen, most of them within a few hundredths of a neighbour (0.7/0.72/0.75/0.78/0.8, 0.85/0.9/0.95) — differences too small to read as intent and too many to keep straight. --text-2xs and --text-xs are the uppercase micro labels (eyebrows, meta rows, dt labels); --text-sm is small copy, buttons and form labels; --text-md is body; --text-lg is h3 and lead-ins; --text-stat is the one display size that is a number rather than a heading. */ --text-2xs: 0.75rem; --text-xs: 0.8rem; --text-sm: 0.95rem; --text-md: 1.1rem; --text-lg: 1.25rem; --text-stat: 2.6rem; /* Headings scale with the viewport; kept here so the three are read as one ramp rather than found one file at a time. --text-h2-prose is the in-article h2, a step below the section headings so a post's own structure doesn't compete with the page's. Bumped a step larger across the board on feedback that the page read too quiet at the old sizes — both the clamp floor (mobile) and ceiling (desktop) moved up, not just the ceiling, so the increase holds at every width rather than only showing up once the viewport is wide. */ --text-h1: 5rem; --text-h2: 4rem; --text-h2-prose: 4rem; /* The bold lead line under a section heading (.section__subheading in 05-sections.css). Part of the heading ramp rather than one of the six steps above, because what it has to do is sit *between* two of them: it used to set only font-weight and colour, so it inherited body's 18px and came out the same size as the paragraph beneath it — bold body text rather than a tier of its own, with nothing at all between a 64px h2 and 18px copy. */ --text-subheading: 1.6rem; /* -------------------------------------------------- */ /* Spacing */ /* -------------------------------------------------- */ /* Spacing is written as plain rem values rather than tokens — it reads better next to the layout it belongs to — but only off this scale: 0.25 · 0.5 · 0.75 · 1 · 1.25 · 1.5 · 2 · 2.5 · 3 · 4 · 5 · 7 · 8.5 · 10rem. A quarter-rem grid to 1.5rem, half-rem steps above it. Anything else (the 0.3/0.35/0.65/0.9/1.1/1.75/2.25/3.5 scattered through the theme before) is a one-off that nothing else can line up with. 8.5 was added on top of the original 0.25–7 run for the "too tight, make it airier" pass — every value of 0.75rem or bigger across the theme moved up one rung on this same scale (0.25/0.5 were left alone: those are icon gaps and tight inline pairings, not page rhythm, and loosening them would have looked like a mistake rather than more air). 7, previously the ceiling, is what .section's own vertical padding used; 8.5 is what it reads now. Type-relative padding on pills and buttons stays in em so it tracks the font size: 0.4em 1em for labels, 0.9em 1.8em for buttons. */ /* -------------------------------------------------- */ /* Depth and motion */ /* -------------------------------------------------- */ /* One card shadow and one hover shadow, in place of the eight recipes that had grown up per component. All of them shared the same shape — a wide, heavily negative-spread drop, cast down and to the left rather than straight down — and differed only in figures nobody could have told apart side by side. Alpha is set for the gradient bands, where a card has the least contrast to work with; on white it reads as a soft lift rather than a hard edge. --shadow-float is for what genuinely leaves the page: the modal, and the Vertrauen image that is styled as a print rather than a card. */ --shadow-card: -14px 20px 42px -26px rgba(163, 163, 163, 0.35); --shadow-card-hover: -18px 30px 55px -25px rgba(0, 0, 0, 0.45); --shadow-float: 0 30px 60px -25px rgba(0, 0, 0, 0.4); /* Hover: surfaces lift twice as far as controls, and everything animates on the same curve. Before this, cards lifted -2, -3 or -4px over three different durations depending on which file they were written in. */ --hover-lift: -4px; --hover-lift-control: -2px; --transition: 0.2s ease; /* Not --color-border (#e2e2e2, solid) — that one's still used as-is for plain dividers (the header's nav-divider, standort section rules). Cards/surfaces want something barely there, closer to a shadow than a drawn line, so this is its own rgba at a fraction of the opacity. */ --border-hairline: 1px solid rgba(148, 140, 140, 0.05); --font-display: 'Mazzard H Black', Arial, sans-serif; /* Body/UI face — style.css's body rule reads this. system-ui stays as the fallback stack it always was, for the swap-in gap before Mazzard H loads and for the rare visitor whose browser doesn't fetch it at all. */ --font-body: 'Mazzard H', system-ui, -apple-system, sans-serif; --max-width: 1200px; /* Wave dividers. Every full-bleed photo area (hero + the photo sections) meets a white one, so the boundary is softened by laying a white wave over the photo's edge instead of cutting straight across. All shapes stretch to the section width via preserveAspectRatio='none'; --wave-height is halved on mobile in 23-mobile.css. Sections opt in from 05-sections.css, the hero from 04-hero.css. Each shape is two layers in one SVG: a translucent white wave running ahead of the solid one, so the edge reads as water overlapping itself rather than as a single cut line. Both layers live in the same graphic on purpose — everything downstream (the drift, the pulse and its white backing strip) treats a wave as one background layer, and a second CSS layer would have to be restated in all of them. Each layer is one single sweep across the whole width, not a run of crests: it leaves its edge, dips once, and eases back. The shapes used to carry three to six crests each, which read as too much movement for what is only meant to be a softened boundary — every section edge was swinging up and down several times on its way across. One long stroke keeps the softness and drops the busyness. The asymmetry is where the character now sits. The trough is pushed well off centre, so one side is a short lean-in and the other a long lazy run out — a swish rather than a symmetric bump. The two layers put their troughs on opposite sides of centre, so the gap between them opens and closes across the width instead of tracking the front curve at a fixed offset. Because there is only one of them, the sweep can be deep without turning busy: the solid curve travels ~56 of the 110 and the translucent one trails behind it, bottoming out around 100. Spread over a full section width that is still a gentle gradient — the depth reads as a stroke with some weight to it, not as a steep edge. There are three shapes so the same curve doesn't repeat down a page: A leans in from the right and runs out to the left, B is the mirror of that reading, C is the shallowest and closest to centred. Each is drawn twice — once with the white above the curve for a top edge, once mirrored for a bottom edge. Every path starts and ends at the same y, with a horizontal tangent there, so the shape can be tiled edge to edge without a visible seam or kink — which is what lets the hero wave drift sideways. The shapes live in assets/images/*.svg, not inline as data-URIs — plain files, hand-editable directly (any text editor, or Illustrator/Figma/ Inkscape). Two pairs: the hero sits directly on white page background, so its wave stays plain white (--wave-top/--wave-bottom). The photo sections and footer sit on the brand gradient (--section-blend below), so their wave is tinted to match (--wave-top-section/ --wave-bottom-section — same shape, filled with the same --color-gradient-start/-end used everywhere else on the site). The footer is the one exception — see its own comment in 20-footer.css for why it uses the plain white pair instead. The file each of the four points at (wave-top.svg/wave-bottom.svg/ wave-top-section.svg/wave-bottom-section.svg) doesn't match the variable's own name — top/bottom got swapped by hand after the fact because the un-swapped pairing read backwards once it was on the page, and re-pointing the variables here was less churn than renaming every file and re-checking every reference to them. Always go through the --wave-top/--wave-bottom family below rather than a literal url("../images/wave-...svg") — that stays correct no matter which file is behind it. --wave-bottom-section-mirrored is a fifth file, not a pair member: the horizontal mirror of whatever --wave-bottom-section currently points at, baked in because the mask-image layers in 05-sections.css (the background clipped to the wave outline, instead of the wave painted on top of a flat rectangle) can't carry the scaleX(-1) that .section::after applies at its own usage site. If you swap which file --wave-bottom-section points to, regenerate this file to match (mirror every path's x to 1512 − x) or the clipped and painted bottom edges stop agreeing. --wave-top-a/-b/-c used to be three distinct curves so a page scrolling past several waves didn't see the same one repeat; with only one shape design to work from, they're aliases of the section (gradient) pair. 05-sections.css still reads one of the three per section, so the aliases have to stay defined even though they're identical to each other. After editing a wave SVG, hard-refresh the site — a plain url() reference carries no cache-busting query string, so a browser that already cached the old file won't notice the change on a normal refresh. */ --wave-height: 110px; --wave-bottom: url("../images/wave-top.svg"); --wave-top: url("../images/wave-bottom.svg"); --wave-bottom-section: url("../images/wave-top-section.svg"); --wave-top-section: url("../images/wave-bottom-section.svg"); --wave-bottom-section-mirrored: url("../images/wave-bottom-section-mirrored.svg"); --wave-top-a: var(--wave-top-section); --wave-top-b: var(--wave-top-section); --wave-top-c: var(--wave-top-section); --wave-bottom-a: var(--wave-bottom-section); --wave-bottom-b: var(--wave-bottom-section); --wave-bottom-c: var(--wave-bottom-section); /* Banner backgrounds. The full-bleed sections behind the cards are painted with a soft blend rather than a photo: a linear base in the two brand colours with a few off-centre radial blooms layered over it, which reads as an organic wash instead of a flat sweep. The bloom colours are tints of --color-gradient-start / -end; they need literal rgba() values because each has to fade to fully transparent. Three variants, assigned alongside the wave shapes in 05-sections.css. */ --blend-a: radial-gradient(115% 85% at 12% 18%, rgba(236, 96, 128, 0.95) 0%, rgba(236, 96, 128, 0) 58%), radial-gradient(95% 80% at 88% 12%, rgba(101, 99, 166, 0.9) 0%, rgba(101, 99, 166, 0) 60%), radial-gradient(85% 75% at 65% 95%, rgba(233, 68, 106, 0.8) 0%, rgba(233, 68, 106, 0) 55%), linear-gradient(var(--gradient-angle), var(--color-gradient-start), var(--color-gradient-end)); --blend-b: radial-gradient(100% 80% at 85% 25%, rgba(236, 96, 128, 0.9) 0%, rgba(236, 96, 128, 0) 58%), radial-gradient(110% 90% at 10% 70%, rgba(53, 51, 122, 0.95) 0%, rgba(53, 51, 122, 0) 62%), radial-gradient(80% 70% at 45% 5%, rgba(101, 99, 166, 0.8) 0%, rgba(101, 99, 166, 0) 55%), linear-gradient(var(--gradient-angle), var(--color-gradient-start), var(--color-gradient-end)); --blend-c: radial-gradient(90% 90% at 50% 10%, rgba(236, 96, 128, 0.9) 0%, rgba(236, 96, 128, 0) 55%), radial-gradient(120% 85% at 90% 80%, rgba(62, 60, 144, 0.95) 0%, rgba(62, 60, 144, 0) 60%), radial-gradient(95% 75% at 8% 40%, rgba(213, 69, 126, 0.85) 0%, rgba(213, 69, 126, 0) 58%), linear-gradient(var(--gradient-angle), #5d4189 0%, var(--color-gradient-start) 55%, var(--color-gradient-end) 100%); --section-blend: var(--blend-a); } body { color: var(--color-body); font-size: 18px; } /* Wrapping an in to offer a WebP source (letsdoo_logo_mark() in inc/template-helpers.php) would otherwise put a new box between the img and its parent — and .site-branding .site-logo is inline-flex, so the picture, not the img, would become the flex item. display:contents drops the wrapper out of the box tree entirely, leaving every existing `.something img` rule laying out exactly as it did before. Scoped to the class the helper sets rather than every on the page: WebP-serving plugins wrap uploaded images in too, and some of them position a lazy-load placeholder inside that wrapper — which needs the wrapper to still generate a box. */ .logo-mark { display: contents; } h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); /* Nudged from 1.1 now that --text-h1/h2 read a step bigger — tight enough to still read as a display face, loose enough that the bigger sizes don't start crowding a multi-line heading. */ line-height: 1.18; margin: 0 0 0.6em; } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-lg); } p { margin: 0 0 1em; } a { color: inherit; } /* ::selection only supports a flat background-color, not background-image — no browser lets a gradient show through selected text — so this uses the gradient's start colour rather than the gradient itself. */ ::selection { background-color: var(--color-gradient-end); color: #fff; } /* 56px icon tile — was three byte-identical rules (.leistung-card__icon, .leistung-bento-card__icon, .warum-letsdoo-punkt__icon) restated per section. Unified into one shared class since a change to one always meant the same change to all three anyway. */ .icon-tile { width: 56px; height: 56px; /* Every tile on the site sits inside a card, so it rounds to the nested radius. The one exception overrides it where it lives: the Leistungen badge in 07-leistungen.css, which straddles the card's outer corner instead of sitting inside its padding. */ border-radius: var(--radius-child); display: flex; align-items: center; justify-content: center; background: #3d3c9083; color: #fff; margin-bottom: 1.5rem; } .admin-hint { color: #999; font-style: italic; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }