/* ===================================================================================================================== fairzeit design system: the single stylesheet for every page (landing, legal pages, 404, /styleguide). No build step. Tokens are derived 1:1 from the app prototype v2; the marketing scale extends them upward. Handoff notes, class reference and markup snippets: DESIGN-SYSTEM.md. Living reference: /styleguide. Contents 1 Tokens 7 Forms (fields, consent, platform cards, status, waitlist hooks) 2 Base 8 Site chrome (announcement bar, header + menu, footer) 3 Layout primitives 9 Prose pages (legal, 404) 4 Typography 10 Mockup kit (fz-m-*: German recreations of the app, illustration only) 5 Components 11 Motion and reduced motion 6 Data display (stats, table, FAQ, pricing) 12 Styleguide-only helpers (sg-*) Naming: fz-block, fz-block__element, fz-block--modifier, is-state. Mockup-kit classes use fz-m-* and only ever appear inside .fz-mock. Breakpoints (min-width, mobile first): 480, 720, 960, 1200. ===================================================================================================================== */ /* ------------------------------------------------------------------------------------------------ 1 Tokens */ :root { /* Ink: text and solid UI. --ink-5 and --ink-6 never carry real text (3.62:1 and 2.16:1 on white). */ --ink: #18181a; --ink-2: #3a3a3d; --ink-3: #52525a; --ink-4: #6b6b70; --ink-5: #86868c; --ink-6: #b0b0b4; /* Surfaces, light to dark. --desk is the grey the app window sits on. */ --white: #fff; --paper-1: #fcfcfb; --paper-2: #fafaf9; --paper-3: #f7f7f6; --paper-4: #f6f6f5; --paper-5: #f4f4f3; --paper-6: #f2f2f0; --paper-7: #f0f0ee; --paper-8: #efefed; --paper-9: #e8e8e6; --desk: #e6e6e4; /* Lines (hairlines, borders, dashed outlines), light to dark. */ --line-1: #ececea; --line-2: #e8e8e6; --line-3: #e2e2e0; --line-4: #dededc; --line-5: #dcdcda; --line-6: #d6d6d4; --line-7: #cfcfcd; --line-8: #c6c6c4; /* Semantic aliases: use these in page markup. */ --text: var(--ink); --text-2: var(--ink-3); /* secondary text, 7.7:1 on white */ --text-3: var(--ink-4); /* the lightest text grey: 5.3:1 on white, 4.64:1 on --paper-7; NOT on --desk */ --bg: var(--white); --bg-subtle: var(--paper-2); --bg-muted: var(--paper-4); --line: var(--line-1); --line-faint: var(--paper-7); --line-strong: var(--line-4); --line-control: var(--ink-5); /* form-control outlines: 3.62:1, meets WCAG 1.4.11 */ /* State colours. Green = recording, confirmed, private, "on this Mac". Never decoration. */ --green: oklch(0.56 0.12 160); --green-ink: oklch(0.42 0.1 160); --green-bg: oklch(0.97 0.02 160); --green-line: oklch(0.89 0.045 160); --amber: oklch(0.7 0.14 80); --amber-ink: oklch(0.45 0.12 70); --amber-ink-2: oklch(0.38 0.1 70); --amber-bg: oklch(0.97 0.035 85); --amber-line: oklch(0.9 0.05 85); --red: oklch(0.58 0.19 25); --red-strong: oklch(0.55 0.19 25); --red-ink: oklch(0.5 0.17 25); --red-bg: oklch(0.97 0.02 25); --red-line: oklch(0.89 0.05 25); /* Project hues: oklch(L C h). Per-use lightness/chroma live on .fz-hue-* (section 5). */ --hue-1: 265; --hue-2: 165; --hue-3: 50; --hue-4: 330; --hue-5: 210; --hue-6: 20; --hue-7: 110; /* Type */ --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, Menlo, monospace; --fs-micro: 0.6875rem; /* 11px: app labels, badges */ --fs-caption: 0.75rem; /* 12px: eyebrows, form labels */ --fs-small: 0.8125rem; /* 13px: meta, table cells, the app's base size */ --fs-ui: 0.875rem; /* 14px: buttons, nav, compact body */ --fs-body: 1rem; /* 16px */ --fs-body-lg: 1.0625rem; /* 17px: long-form prose */ --fs-title: 1.25rem; /* 20px: card titles */ --fs-lead: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem); /* 17 → 20 */ --fs-h3: clamp(1.375rem, 1.15rem + 0.85vw, 1.75rem); /* 22 → 28 */ --fs-h2: clamp(2rem, 1.25rem + 2.75vw, 3.5rem); /* 32 → 56 */ --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem); /* 40 → 84 */ --fs-stat: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); /* 36 → 56 */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; /* Helvetica Neue has no 600: this renders its Bold, exactly like the app */ --fw-heavy: 700; --lh-display: 1.04; --lh-h2: 1.08; --lh-h3: 1.2; --lh-title: 1.3; --lh-ui: 1.45; --lh-body: 1.55; --lh-prose: 1.7; --track-display: -0.035em; --track-h2: -0.03em; --track-h3: -0.02em; --track-title: -0.012em; --track-label: 0.05em; /* Space: 4px grid */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --section-y: clamp(4rem, 2.6rem + 6vw, 7.5rem); /* 64 → 120 */ --gutter: clamp(1rem, 0.1rem + 3.3vw, 2.5rem); /* 16 → 40 */ --grid-gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); /* 16 → 24 */ /* Radius: the app's range (4–16px), nothing rounder except pills and dots. */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-win: 11px; --r-pill: 999px; /* Shadow */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.14); --shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -14px rgba(0, 0, 0, 0.14); --shadow-window: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 20px 50px rgba(0, 0, 0, 0.14); --shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 18px 50px rgba(0, 0, 0, 0.2); --shadow-modal: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 30px 80px rgba(0, 0, 0, 0.18); --shadow-toast: 0 10px 30px rgba(0, 0, 0, 0.25); --ring-select: 0 0 0 2px var(--ink), 0 6px 16px rgba(0, 0, 0, 0.08); /* Layout */ --w-page: 75rem; /* 1200 */ --w-wide: 82.5rem; /* 1320: hero mockup */ --w-text: 42.5rem; /* 680: prose measure */ --w-narrow: 35rem; /* 560 */ --header-h: 56px; /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 120ms; --dur: 150ms; --dur-slow: 260ms; /* Focus */ --focus: var(--ink); } @media (min-width: 960px) { :root { --header-h: 64px; } } /* ------------------------------------------------------------------------------------------------ 2 Base */ *, *::before, *::after { box-sizing: border-box; } /* Anchor offset: the only place that clears the sticky header. Never add scroll-margin-top for the header on targets; sections only pull back their own top padding (see .fz-section), so a heading lands about 20px below the header. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); hanging-punctuation: first; } body { margin: 0; min-width: 320px; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; overflow-x: clip; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; } h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); text-wrap: balance; overflow-wrap: break-word; } p, li, dd { text-wrap: pretty; } :where(ul[class], ol[class]) { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; } table { border-collapse: collapse; } b, strong { font-weight: var(--fw-bold); } small { font-size: var(--fs-small); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } hr { height: 1px; margin: 0; border: 0; background: var(--line); } abbr[title] { text-decoration: none; } a { color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--ink-6); text-underline-offset: 3px; transition: color var(--dur) ease, text-decoration-color var(--dur) ease; } a:hover { color: var(--ink-3); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } ::selection { background: rgba(24, 24, 26, 0.14); } /* Screen-reader only. clip-path keeps it from widening the page inside overflow wrappers. */ .fz-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link: off-screen until focused. */ .fz-skip { position: absolute; top: 8px; left: 8px; z-index: 200; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-md); background: var(--ink); color: var(--white); font-size: var(--fs-ui); font-weight: var(--fw-medium); text-decoration: none; transform: translateY(-160%); transition: transform var(--dur) var(--ease); } .fz-skip:focus, .fz-skip:focus-visible { transform: none; color: var(--white); outline-color: var(--ink); } /* ------------------------------------------------------------------------------------------------ 3 Layout */ .fz-container { width: 100%; max-width: calc(var(--w-page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .fz-container--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); } .fz-container--text { max-width: calc(var(--w-text) + 2 * var(--gutter)); } .fz-container--narrow { max-width: calc(var(--w-narrow) + 2 * var(--gutter)); } /* Sections: white by default; --alt alternates with the app's header grey and hairlines. Anchors (#preise): html's scroll-padding-top clears the header once; the negative scroll-margin pulls back only the section's own top padding, so the link shows the eyebrow and heading instead of 64–120px of empty space. */ .fz-section { --section-top: var(--section-y); position: relative; padding-block: var(--section-top) var(--section-y); scroll-margin-top: calc(-1 * var(--section-top)); } .fz-section--alt { background: var(--paper-2); border-block: 1px solid var(--line); } .fz-section--alt + .fz-section--alt { border-top: 0; } .fz-section--tight { --section-top: calc(var(--section-y) * 0.6); padding-bottom: calc(var(--section-y) * 0.6); } .fz-section--flush-top { --section-top: 0px; } .fz-section--flush-bottom { padding-bottom: 0; } /* Section header: eyebrow, title, lead. */ .fz-sh { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); max-width: 47.5rem; margin-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); } .fz-sh--center { align-items: center; margin-inline: auto; text-align: center; } .fz-sh--flush { margin-bottom: 0; } .fz-sh .fz-lead { max-width: 40rem; } /* Title block on the left, controls (e.g. the billing toggle) on the right; stacks on small screens. */ .fz-sh-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-6) var(--sp-10); margin-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); } .fz-sh-row > .fz-sh { margin-bottom: 0; } /* Grids: one column on phones, then 2 / 3 / 4. Tracks are minmax(0, 1fr), so long words never widen a column. */ .fz-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); } .fz-grid--gap-lg { gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); } @media (min-width: 720px) { .fz-grid--2, .fz-grid--3, .fz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Wide item: two columns as soon as the grid has two, so a 520–560px mockup inside stays above 0.6 zoom. */ :is(.fz-grid--2, .fz-grid--3, .fz-grid--4) > .fz-span-2 { grid-column: span 2; } } @media (min-width: 960px) { .fz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Three-column grids show two columns from 720 to 959px; a last card that would sit alone takes the whole row. This counts children, not cells: with .fz-span-2 items, order them so the lone item is the last one. */ @media (min-width: 720px) and (max-width: 959px) { .fz-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Tiles: a stage on top, text below. Each tile spans two rows of its grid and shares them (subgrid), so stages and texts line up across a row even when the texts differ in length. Without subgrid, tiles simply stack. */ .fz-tiles > * { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sp-6); } .fz-tiles > * > :last-child { align-self: start; } /* Split: text beside media. Stacks below 960px, text first. */ .fz-split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(2rem, 1rem + 4vw, 4.5rem); } @media (min-width: 960px) { .fz-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .fz-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fz-split--reverse > :first-child { order: 2; } .fz-split--top { align-items: start; } } /* Flow helpers (avoid inline margins). */ .fz-stack { display: flex; flex-direction: column; gap: var(--stack, var(--sp-4)); } .fz-stack--xs { --stack: var(--sp-2); } .fz-stack--sm { --stack: var(--sp-3); } .fz-stack--lg { --stack: var(--sp-6); } .fz-stack--xl { --stack: var(--sp-10); } .fz-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--sp-3)); } .fz-cluster--sm { --cluster: var(--sp-2); } .fz-cluster--lg { --cluster: var(--sp-6); } .fz-center { text-align: center; } /* Hero */ .fz-hero { padding-top: clamp(3rem, 1.6rem + 6vw, 6.5rem); padding-bottom: var(--section-y); } .fz-hero__text { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); max-width: 56rem; margin-inline: auto; text-align: center; } .fz-hero__text .fz-lead { max-width: 38rem; } .fz-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); } .fz-hero__note { font-size: var(--fs-small); color: var(--text-3); } .fz-hero__media { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); } /* Stage: the app's desk grey behind a mockup, like the prototype's backdrop. */ .fz-stage { padding: clamp(0.75rem, 0.2rem + 2.4vw, 2.5rem); border-radius: var(--r-2xl); background: var(--desk); } .fz-stage--soft { background: var(--paper-7); } /* Fills the rest of its tile, so the stages in a row of .fz-tiles line up; the mockup sits in the middle. */ .fz-stage--fill { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; } /* .fz-overlap (a second mockup over the bottom edge of the first) lives with the mockup frame in section 10. */ /* ------------------------------------------------------------------------------------------------ 4 Typography */ .fz-display, .fz-h2, .fz-h3, .fz-title { color: var(--text); font-weight: var(--fw-bold); text-wrap: balance; } .fz-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); } .fz-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); } .fz-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); } .fz-title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--track-title); } .fz-title--sm { font-size: var(--fs-body-lg); } /* Long German compounds: hyphenate headings on narrow screens only (needs lang="de" on ). */ @media (max-width: 719px) { .fz-display, .fz-h2, .fz-h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } } .fz-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; } .fz-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); } .fz-small { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--text-2); } .fz-caption { font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--text-3); } .fz-muted { color: var(--text-2); } .fz-faint { color: var(--text-3); } .fz-strong { color: var(--text); font-weight: var(--fw-bold); } /* Eyebrow: the app's small uppercase section label ("BESTÄTIGT"), one step larger for the site. */ .fz-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.35em; font-size: var(--fs-caption); line-height: 1.4; font-weight: var(--fw-bold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); } /* "· LOKAL": the green state suffix, as in the app's "ACTIVITY · LOCAL". */ .fz-eyebrow__state { color: var(--green-ink); } .fz-eyebrow__soft { font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; } .fz-num { font-variant-numeric: tabular-nums; } .fz-mono { font-family: var(--font-mono); font-size: 0.92em; } /* ------------------------------------------------------------------------------------------------ 5 Components */ /* Logo: two bottom-aligned bars (ink 4×16, green 4×10, 2px gap, 1px radius) + lowercase wordmark. */ .fz-logo { --bar: 4px; --tall: 16px; --short: 10px; --gap: 2px; display: inline-flex; align-items: center; gap: calc(var(--bar) * 2); color: var(--ink); font-size: 15px; font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1; text-decoration: none; white-space: nowrap; } .fz-logo:hover { color: var(--ink); } .fz-logo__mark { position: relative; flex: none; width: calc(var(--bar) * 2 + var(--gap)); height: var(--tall); } .fz-logo__mark::before, .fz-logo__mark::after { content: ""; position: absolute; bottom: 0; width: var(--bar); border-radius: calc(var(--bar) / 4); } .fz-logo__mark::before { left: 0; height: var(--tall); background: var(--ink); } .fz-logo__mark::after { right: 0; height: var(--short); background: var(--green); } .fz-logo--lg { --bar: 5px; --tall: 20px; --short: 12.5px; --gap: 2.5px; font-size: 19px; } .fz-logo--xl { --bar: 8px; --tall: 32px; --short: 20px; --gap: 4px; font-size: 30px; } .fz-logo--inverse, .fz-logo--inverse:hover { color: var(--white); } .fz-logo--inverse .fz-logo__mark::before { background: var(--white); } .fz-logo--mark-only .fz-logo__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Project hues. Put one on an element; children read the --p-* colours. Values are the prototype's exact oklch lightness/chroma per use (data script: dot 0.6/0.13, confirmed fill 0.95/0.035, line 0.86/0.06, ink 0.38/0.11, suggestion fill 0.985/0.012, dashed line 0.7/0.11, ink 0.42/0.12, selected row 0.96/0.03, week suggestion 0.97/0.02). */ .fz-hue, .fz-hue-1, .fz-hue-2, .fz-hue-3, .fz-hue-4, .fz-hue-5, .fz-hue-6, .fz-hue-7 { --p-dot: oklch(0.6 0.13 var(--h)); --p-fill: oklch(0.95 0.035 var(--h)); --p-line: oklch(0.86 0.06 var(--h)); --p-ink: oklch(0.38 0.11 var(--h)); --p-manual-line: oklch(0.72 0.1 var(--h)); --p-sugg-fill: oklch(0.985 0.012 var(--h)); --p-sugg-line: oklch(0.7 0.11 var(--h)); --p-sugg-ink: oklch(0.42 0.12 var(--h)); --p-select: oklch(0.96 0.03 var(--h)); --p-week-sugg: oklch(0.97 0.02 var(--h)); } .fz-hue { --h: 265; } .fz-hue-1 { --h: var(--hue-1); } .fz-hue-2 { --h: var(--hue-2); } .fz-hue-3 { --h: var(--hue-3); } .fz-hue-4 { --h: var(--hue-4); } .fz-hue-5 { --h: var(--hue-5); } .fz-hue-6 { --h: var(--hue-6); } .fz-hue-7 { --h: var(--hue-7); } /* Dot: project colour (inside a hue), or a state colour. */ .fz-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--p-dot, var(--ink-6)); vertical-align: middle; } .fz-dot--sm { width: 6px; height: 6px; } .fz-dot--lg { width: 10px; height: 10px; } .fz-dot--green { background: var(--green); } .fz-dot--ink { background: var(--ink); } .fz-dot--red { background: var(--red); } .fz-dot--amber { background: var(--amber); } .fz-dot--off { background: var(--ink-6); } .fz-dot--sugg { background: var(--white); box-shadow: inset 0 0 0 2px var(--p-dot, var(--ink-5)); } .fz-dot--square { border-radius: 3px; } /* "No project yet" (the review list's "Kein Vorschlag"), and the chosen colour in a row of project dots. */ .fz-dot--dashed { background: var(--white); border: 1.5px dashed var(--ink-5); } .fz-dot.is-selected { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--p-dot, var(--ink)); } /* Buttons. Primary = solid ink (the app's "Accept"), secondary = white with hairline, ghost = text. */ .fz-btn, .fz-submit { --btn-h: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--btn-h); padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--r-md); font-size: var(--fs-ui); font-weight: var(--fw-medium); line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease; } .fz-btn--primary, .fz-submit { background: var(--ink); border-color: var(--ink); color: var(--white); } .fz-btn--primary:hover, .fz-btn--primary.is-hover, .fz-submit:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--white); } .fz-btn--primary:active, .fz-btn--primary.is-active, .fz-submit:active { background: var(--ink-3); border-color: var(--ink-3); } .fz-btn--secondary { background: var(--white); border-color: var(--line-4); color: var(--ink); } .fz-btn--secondary:hover, .fz-btn--secondary.is-hover { background: var(--paper-4); border-color: var(--line-7); color: var(--ink); } .fz-btn--secondary:active, .fz-btn--secondary.is-active { background: var(--paper-8); } .fz-btn--ghost { background: transparent; color: var(--ink-3); } .fz-btn--ghost:hover, .fz-btn--ghost.is-hover { background: var(--paper-8); color: var(--ink); } .fz-btn--ghost:active, .fz-btn--ghost.is-active { background: var(--paper-9); } .fz-btn:focus-visible, .fz-btn.is-focus, .fz-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .fz-btn:disabled, .fz-btn[aria-disabled="true"], .fz-submit:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .fz-submit:disabled { cursor: progress; } .fz-btn--sm { --btn-h: 32px; padding: 0 var(--sp-3); border-radius: 7px; font-size: var(--fs-small); } .fz-btn--lg, .fz-submit { --btn-h: 48px; padding: 0 22px; border-radius: var(--r-lg); font-size: var(--fs-body); } .fz-btn--block { display: flex; width: 100%; } .fz-btn svg { width: 16px; height: 16px; flex: none; } /* Keyboard hint inside a button ("Übernehmen ↵"). Decorative on the website: mark it aria-hidden. */ .fz-btn__kbd { font-weight: var(--fw-regular); color: var(--ink-4); } .fz-btn--primary .fz-btn__kbd, .fz-submit .fz-btn__kbd { color: rgba(255, 255, 255, 0.66); } /* Keycap for running text: "Drücke ↵". */ .fz-key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 0.4em; border: 1px solid var(--line-3); border-bottom-color: var(--line-7); border-radius: 5px; background: var(--white); font-family: var(--font-sans); font-size: 0.8em; font-weight: var(--fw-bold); line-height: 1; color: var(--ink); vertical-align: 0.1em; } /* Shortcut legend ("↵ übernehmen ⌫ verwerfen"), as in the app's footer bar. */ .fz-shortcuts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-small); color: var(--text-3); } .fz-shortcuts b { margin-right: 0.3em; color: var(--ink); font-weight: var(--fw-bold); } /* Badges: small, non-interactive labels. */ .fz-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--white); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .fz-badge--muted, .fz-badge--outline, .fz-badge--green, .fz-badge--plain, .fz-badge--amber { height: auto; min-height: 18px; padding: 2px 6px; border-radius: var(--r-xs); font-size: var(--fs-micro); letter-spacing: 0.03em; text-transform: uppercase; } .fz-badge--muted { background: var(--paper-6); color: var(--ink-3); } .fz-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--p-ink, var(--ink)); } .fz-badge--green { background: var(--green-bg); color: var(--green-ink); } .fz-badge--plain { background: var(--paper-7); color: var(--ink-2); } .fz-badge--amber { background: var(--amber-bg); color: var(--amber-ink-2); } .fz-badge--lg { min-height: 24px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-caption); letter-spacing: 0; text-transform: none; } /* Tag: the app's outlined "Heute" next to the date. */ .fz-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--line-3); border-radius: 5px; background: var(--white); font-size: var(--fs-caption); line-height: 1; color: var(--ink-3); white-space: nowrap; } /* Pill: the suggestion chip "Vorschlag · 96 %". Takes the project colour from a surrounding .fz-hue-*. */ .fz-pill { display: inline-flex; align-items: center; gap: 0.35em; flex: none; height: 20px; padding: 0 6px; border: 1px solid var(--p-line, var(--line-3)); border-radius: 5px; background: var(--white); color: var(--p-sugg-ink, var(--ink-3)); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .fz-pill--lg { height: 26px; padding: 0 9px; border-radius: var(--r-sm); font-size: var(--fs-small); } .fz-pill--neutral { border-color: var(--line-3); color: var(--ink-3); } .fz-pill--muted { border-color: transparent; background: var(--paper-5); color: var(--ink-3); } /* Status: green "on this Mac" pill (the app's recording pill), and an inline variant. */ .fz-status { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 12px 4px 10px; border: 1px solid var(--green-line); border-radius: var(--r-pill); background: var(--green-bg); color: var(--green-ink); font-size: var(--fs-small); line-height: 1.2; } .fz-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .fz-status b { font-weight: var(--fw-bold); } .fz-status--off { border-color: var(--line-3); background: var(--paper-5); color: var(--ink-3); } .fz-status--off::before { background: var(--ink-6); } .fz-status--inline { min-height: 0; padding: 0; border: 0; background: none; gap: 6px; font-size: var(--fs-caption); font-weight: var(--fw-medium); } .fz-status--inline::before { width: 6px; height: 6px; } /* As a link (the hero's recording pill points to the privacy section). */ a.fz-status { text-decoration: none; transition: border-color var(--dur) ease; } a.fz-status:hover { color: var(--green-ink); border-color: var(--green); } /* Chips: rounded, optionally with a project dot. Interactive chips use aria-pressed. */ .fz-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-3); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-regular); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--dur) ease, border-color var(--dur) ease; } button.fz-chip:hover, a.fz-chip:hover, .fz-chip.is-hover { background: var(--paper-2); border-color: var(--line-7); color: var(--ink); } .fz-chip[aria-pressed="true"], .fz-chip.is-selected { border-color: var(--ink); background: var(--paper-2); font-weight: var(--fw-bold); } .fz-chip--dashed { border-style: dashed; border-color: var(--line-7); color: var(--ink-3); } .fz-chip--ink { border-color: var(--ink); background: var(--ink); color: var(--white); } .fz-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -6px; border-radius: 50%; background: var(--paper-7); color: var(--ink-3); font-size: 9px; line-height: 1; } /* Cards and panels. */ .fz-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); } .fz-card--raised { box-shadow: var(--shadow-card); } .fz-card--flush { padding: 0; overflow: hidden; } .fz-card--lg { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-2xl); } a.fz-card { color: inherit; text-decoration: none; transition: background-color var(--dur) ease, border-color var(--dur) ease; } a.fz-card:hover { background: var(--paper-1); border-color: var(--line-4); color: inherit; } .fz-panel { display: flex; flex-direction: column; gap: var(--sp-3); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper-2); } .fz-panel--green { border-color: var(--green-line); background: var(--green-bg); } .fz-panel--ink { border-color: var(--ink); background: var(--ink); color: var(--white); --focus: var(--white); } .fz-panel--ink .fz-lead, .fz-panel--ink .fz-text { color: rgba(255, 255, 255, 0.72); } /* Note: the app's small inline notice boxes (amber warning, neutral info, green success). */ .fz-note { padding: 9px 12px; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-ui); } .fz-note--amber { background: var(--amber-bg); color: var(--amber-ink-2); } .fz-note--green { background: var(--green-bg); color: var(--green-ink); } .fz-note--red { background: var(--red-bg); color: var(--red-ink); } /* Banner: full-width notice row ("Tag eins." in the app). */ .fz-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); background: var(--paper-2); font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--ink-3); } .fz-banner b { color: var(--ink); } .fz-banner--amber { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber-ink-2); } .fz-banner--amber b { color: inherit; } /* Feature list with check marks. */ .fz-checks { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .fz-checks > li { position: relative; padding-left: 26px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--text-2); } .fz-checks > li::before { content: ""; position: absolute; left: 0; top: calc((1em * 1.45 - 16px) / 2); width: 16px; height: 16px; background: var(--check, var(--ink)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.25 8.5l3 3 6.5-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.25 8.5l3 3 6.5-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .fz-checks > li > b, .fz-checks > li > strong { color: var(--text); } .fz-checks--green { --check: var(--green); } .fz-checks--lg > li { font-size: var(--fs-body); } .fz-checks--tight { gap: var(--sp-2); } /* One wrapping, centred row (the hero's trust line). */ .fz-checks--row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); } /* Planned, not available yet: a hollow ring instead of the check, so nothing planned reads as included. Always pair it with visible wording:
  • Geplant …
    • */ .fz-checks > li.is-planned::before { left: 3px; top: calc((1em * 1.45 - 10px) / 2); width: 10px; height: 10px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--ink-5); -webkit-mask: none; mask: none; } /* A badge inside a list item must not make its line taller than the others. */ .fz-checks > li > .fz-badge { margin-block: -3px; vertical-align: 1px; } /* Dot list: the inspector's "WARUM DIESES PROJEKT" bullets (4px grey dots). */ .fz-bullets { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .fz-bullets > li { position: relative; padding-left: 14px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--text-2); } .fz-bullets > li::before { content: ""; position: absolute; left: 0; top: calc(0.725em - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--ink-5); } /* Steps: the onboarding's numbered promises (22px tile with the number). */ .fz-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); margin: 0; padding: 0; list-style: none; counter-reset: fz-step; } @media (min-width: 960px) { .fz-steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } } .fz-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; counter-increment: fz-step; } .fz-step::before { content: counter(fz-step); grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: var(--paper-6); font-size: var(--fs-small); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--ink); } .fz-step__title { font-size: var(--fs-body-lg); line-height: var(--lh-title); font-weight: var(--fw-bold); letter-spacing: var(--track-title); } .fz-step__text { font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--text-2); } /* Marker: the data-boundary shapes (circle = stays local, square = leaves). */ .fz-marker { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); } .fz-marker--local { border-radius: 50%; background: var(--green); } .fz-marker--e2e { background: var(--ink); } .fz-marker--plain { background: var(--ink-6); } .fz-marker--never { border-radius: 2px; background: var(--red); } /* Data boundary columns. Real, readable content (site size); .fz-boundary--app is the app-size version for mockups. */ .fz-boundary { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .fz-boundary__col { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper-2); } .fz-boundary__col--local { border-color: var(--green-line); background: var(--green-bg); } .fz-boundary__head { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: var(--fs-body); line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: -0.005em; } .fz-boundary__head .fz-marker { margin-top: calc((1.3em - 10px) / 2); } .fz-boundary__items { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .fz-boundary__items > li { padding: 7px 10px; border: 1px solid var(--paper-8); border-radius: var(--r-sm); background: var(--white); font-size: var(--fs-ui); line-height: 1.35; } .fz-boundary__note { margin-top: auto; font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--ink-3); } @media (min-width: 720px) { .fz-boundary { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Heads, item lists and notes line up across columns. */ .fz-boundary__col { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; } } @media (min-width: 1200px) { .fz-boundary { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fz-boundary--app { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .fz-boundary--app .fz-boundary__col { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 12px; padding: 16px; } .fz-boundary--app .fz-boundary__head { font-size: 13.5px; gap: 8px; } .fz-boundary--app .fz-boundary__items > li { padding: 6px 9px; border-color: var(--paper-8); font-size: 12.5px; line-height: 1.2; } .fz-boundary--app .fz-boundary__note { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); } /* Segmented toggle (billing monthly / annual). Buttons carry aria-pressed. */ .fz-seg { display: inline-flex; max-width: 100%; gap: 2px; padding: 3px; border-radius: 10px; background: var(--paper-7); } .fz-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font-size: var(--fs-ui); font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap; transition: background-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease; } .fz-seg__btn:hover, .fz-seg__btn.is-hover { color: var(--ink); background: rgba(255, 255, 255, 0.55); } .fz-seg__btn[aria-pressed="true"], .fz-seg__btn.is-selected { background: var(--white); color: var(--ink); font-weight: var(--fw-bold); box-shadow: var(--shadow-seg), 0 0 0 1px rgba(0, 0, 0, 0.04); } .fz-seg__btn:focus-visible { outline-offset: 0; } .fz-seg__hint { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--green-ink); } .fz-seg--sm .fz-seg__btn { min-height: 26px; padding: 0 10px; font-size: var(--fs-caption); } .fz-seg--sm { padding: 2px; border-radius: var(--r-md); } .fz-seg--block { display: flex; } .fz-seg--block .fz-seg__btn { flex: 1; } /* Vertical tab list ("Wechsel von"): the app's sidebar nav. Horizontal scroll row below 720px. */ .fz-vtabs { display: flex; gap: 2px; max-width: 100%; min-width: 0; margin: 0; padding: 2px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .fz-vtabs::-webkit-scrollbar { display: none; } .fz-vtab { display: flex; align-items: center; gap: 10px; flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); font-size: var(--fs-ui); font-weight: var(--fw-regular); text-align: left; white-space: nowrap; scroll-snap-align: start; transition: background-color var(--dur) ease; } .fz-vtab::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--line-8); transition: background-color var(--dur) ease; } .fz-vtab:hover, .fz-vtab.is-hover { background: var(--paper-8); } .fz-vtab[aria-pressed="true"], .fz-vtab.is-selected { background: var(--paper-9); font-weight: var(--fw-bold); } .fz-vtab[aria-pressed="true"]::before, .fz-vtab.is-selected::before { background: var(--ink); } .fz-vtab:focus-visible { outline-offset: -2px; } .fz-vtab__meta { margin-left: auto; padding-left: 12px; font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--ink-4); } @media (min-width: 720px) { .fz-vtabs { flex-direction: column; overflow: visible; } .fz-vtab { width: 100%; } } /* Meter: a 4px track with a fill (budgets, the calculator's price bar). Width comes from JS or style="width:…"; __fill--full is the 100% reference bar. */ .fz-meter { position: relative; height: 4px; border-radius: 2px; background: var(--paper-7); overflow: hidden; } .fz-meter--lg { height: 8px; border-radius: 4px; } .fz-meter__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--p-dot, var(--ink)); transition: width var(--dur-slow) var(--ease); } .fz-meter__fill--full { width: 100%; } .fz-meter__fill--green { background: var(--green); } /* Range slider. Optional filled track: set --fill (e.g. "35%") from JS. */ .fz-range { --fill: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; } .fz-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--fill), var(--line-3) var(--fill)); } .fz-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-3); } .fz-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); } .fz-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.22); transition: box-shadow var(--dur) ease; } .fz-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.22); } .fz-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.26); } .fz-range:focus-visible { outline: none; } .fz-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus); } .fz-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus); } /* Slider row: label left, live value right, range below. */ .fz-slider { display: flex; flex-direction: column; gap: 2px; } .fz-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); } .fz-slider__label { font-size: var(--fs-ui); color: var(--text-2); } .fz-slider__value { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .fz-slider__scale { display: flex; justify-content: space-between; margin-top: -8px; font-size: var(--fs-caption); color: var(--text-3); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------------------------------ 6 Data display */ /* Stat: label above a tabular number. Numbers are medium weight, words are bold, as in the app. */ .fz-stats { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); } .fz-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fz-stat__label { font-size: var(--fs-caption); line-height: 1.3; color: var(--text-3); } .fz-stat__value { font-size: 1.375rem; line-height: 1.1; font-weight: var(--fw-medium); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .fz-stat__unit { margin-left: 0.4em; font-size: var(--fs-ui); font-weight: var(--fw-regular); letter-spacing: 0; color: var(--text-2); white-space: normal; } .fz-stat--lg .fz-stat__value { font-size: var(--fs-stat); line-height: 1.02; letter-spacing: -0.03em; } .fz-stat--xl .fz-stat__value { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.035em; } .fz-stat--lg .fz-stat__label, .fz-stat--xl .fz-stat__label { font-size: var(--fs-ui); } .fz-stat--green .fz-stat__value { color: var(--green-ink); } /* Table: the app's list tables (uppercase head row, hairline rows, tabular numbers). */ .fz-table-wrap { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local, linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.1), transparent) left center / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), transparent) right center / 10px 100% no-repeat scroll, var(--white); } .fz-table-wrap:focus-visible { outline-offset: 2px; } .fz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--text-2); font-variant-numeric: tabular-nums; } .fz-table th, .fz-table td { padding: 12px 16px; border-top: 1px solid var(--line-faint); text-align: left; vertical-align: top; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } .fz-table thead th, .fz-table thead td { padding-block: 11px; border-top: 0; background: var(--paper-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); vertical-align: bottom; } .fz-table tbody th { font-weight: var(--fw-medium); color: var(--text); } .fz-table .fz-table__num { text-align: right; white-space: nowrap; } .fz-table .fz-table__strong { font-weight: var(--fw-medium); color: var(--text); } .fz-table tbody tr:hover > * { background-color: var(--paper-1); } /* Comparison variant: competitor names in normal case, our column marked like the app's selection. Words never break mid-word here (hyphens: manual); a line may only break after a real hyphen ("Standard-Plan"). Our column is wider: its longest word ("14-Tage-Audit", medium weight) needs about 145px with padding and mark. */ .fz-table--compare { table-layout: fixed; } .fz-table--compare :is(th, td) { -webkit-hyphens: manual; hyphens: manual; } .fz-table--compare thead th { font-size: var(--fs-small); letter-spacing: 0; text-transform: none; color: var(--text); } .fz-table--compare thead :is(th, td):first-child { width: 20%; } .fz-table--compare thead .is-us { width: 15%; } .fz-table--compare tbody th { font-size: var(--fs-small); line-height: 1.4; } .fz-table--compare .is-us { background: var(--paper-3); color: var(--text); } .fz-table--compare thead .is-us { box-shadow: inset 0 2px 0 var(--ink); background: var(--paper-6); } .fz-table--compare tbody tr:hover > .is-us { background: var(--paper-5); } .fz-table__group > * { padding-top: 22px; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); } .fz-table tbody .fz-table__group > th { color: var(--ink-4); font-weight: var(--fw-bold); } .fz-table tbody .fz-table__group:hover > * { background-color: transparent; } .fz-table tbody .fz-table__group:hover > .is-us { background: var(--paper-3); } /* Below 1200px the comparison keeps readable cells and scrolls sideways inside its wrap, with sticky row headers. Seven columns need about 62rem: 132px row heads, 152px for ours, at least 140px for each of the others. */ @media (max-width: 1199px) { .fz-table--compare tbody th[scope="row"], .fz-table--compare thead :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: inset -1px 0 0 var(--line); } .fz-table--compare thead :is(th, td):first-child { background: var(--paper-2); } .fz-table--compare { min-width: 62rem; } .fz-table--compare thead :is(th, td):first-child { width: 132px; } .fz-table--compare thead .is-us { width: 152px; } } /* Yes / partly / no marks. Shape carries the meaning, not colour. Give icon-only cells .fz-sr-only text. */ .fz-val { display: flex; align-items: flex-start; gap: 8px; } .fz-val::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; } .fz-val--yes::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-5' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } .fz-val--part::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); background: linear-gradient(90deg, var(--ink-3) 50%, transparent 50%); } .fz-val--no::before { background: var(--paper-7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' fill='none' stroke='%236b6b70' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; } .fz-val__text { min-width: 0; } .is-us .fz-val__text { font-weight: var(--fw-medium); color: var(--text); } .fz-legend-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-small); color: var(--text-2); } /* FAQ accordion: native
    , no JS. */ .fz-faq { border-bottom: 1px solid var(--line); } .fz-faq__item { border-top: 1px solid var(--line); } .fz-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: 20px 0; list-style: none; font-size: var(--fs-body-lg); line-height: 1.4; font-weight: var(--fw-medium); color: var(--text); cursor: pointer; border-radius: var(--r-sm); } .fz-faq__q::-webkit-details-marker { display: none; } .fz-faq__q::after { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: var(--ink-4); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur-slow) var(--ease), background-color var(--dur) ease; } .fz-faq__q:hover::after { background: var(--ink); } .fz-faq__item[open] > .fz-faq__q::after { transform: rotate(180deg); background: var(--ink); } .fz-faq__q:focus-visible { outline-offset: 4px; } .fz-faq__a { padding: 0 2.5rem 22px 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); } .fz-faq__a > * + * { margin-top: var(--sp-3); } /* Pricing cards. The featured card is marked the way the app marks a selection: a 1.5px ink outline. */ .fz-prices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); align-items: stretch; } @media (min-width: 960px) { .fz-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 720px) and (max-width: 959px) { .fz-prices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fz-price { position: relative; display: flex; flex-direction: column; gap: var(--sp-5); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--white); } .fz-price--featured { border-color: var(--ink); box-shadow: 0 0 0 0.5px var(--ink), var(--shadow-card); } .fz-price__flag { position: absolute; top: -11px; left: clamp(1.5rem, 1.2rem + 1vw, 2rem); } .fz-price__head { display: flex; flex-direction: column; gap: 2px; } .fz-price__name { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--track-title); } .fz-price__for { font-size: var(--fs-ui); color: var(--text-3); } .fz-price__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: clamp(2.5rem, 2.2rem + 1vw, 3rem); } .fz-price__value { font-size: clamp(2.5rem, 2.2rem + 1vw, 3rem); line-height: 1; font-weight: var(--fw-medium); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .fz-price__value--word { font-size: clamp(2rem, 1.8rem + 0.8vw, 2.5rem); } .fz-price__per { font-size: var(--fs-ui); color: var(--text-2); } .fz-price__note { min-height: 2.9em; margin-top: calc(-1 * var(--sp-3)); font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--text-3); } .fz-price .fz-checks { padding-top: var(--sp-5); border-top: 1px solid var(--line); } .fz-price-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--text-3); text-align: center; } /* ------------------------------------------------------------------------------------------------ 7 Forms */ .fz-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 16px; align-content: start; } @media (min-width: 600px) { .fz-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fz-field--wide { grid-column: 1 / -1; } /* Labels follow the app ("BESCHREIBUNG · AUF DER RECHNUNG"); the optional suffix is lighter, not paler. */ .fz-label, .fz-legend { display: block; margin: 0; padding: 0; font-size: var(--fs-caption); line-height: 1.4; font-weight: var(--fw-bold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-4); } .fz-optional { font-weight: var(--fw-regular); letter-spacing: 0.02em; color: var(--ink-4); } .fz-optional::before { content: "· "; } .fz-help { font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--text-3); } .fz-input, .fz-select, .fz-textarea, .fz-field :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line-control); border-radius: var(--r-md); background-color: var(--white); color: var(--ink); font-size: var(--fs-body); /* 16px: no zoom-on-focus in iOS Safari */ line-height: 1.3; transition: border-color var(--dur) ease, box-shadow var(--dur) ease; } .fz-textarea, .fz-field textarea { min-height: 96px; padding-block: 11px; line-height: var(--lh-ui); resize: vertical; } .fz-input::placeholder, .fz-textarea::placeholder, .fz-field :is(input, textarea)::placeholder { color: var(--ink-4); opacity: 1; } .fz-input:hover, .fz-select:hover, .fz-textarea:hover, .fz-field :is(input, select, textarea):hover { border-color: var(--ink-4); } .fz-input:focus, .fz-select:focus, .fz-textarea:focus, .fz-input.is-focus, .fz-field :is(input, select, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .fz-input:user-invalid, .fz-field :is(input, select, textarea):user-invalid, .fz-input.is-invalid, .fz-field [aria-invalid="true"] { border-color: var(--red-ink); box-shadow: 0 0 0 1px var(--red-ink); } .fz-input:disabled, .fz-select:disabled, .fz-field :is(input, select, textarea):disabled { border-color: var(--line-3); background-color: var(--paper-4); color: var(--ink-4); cursor: not-allowed; } .fz-select, .fz-field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.25l3.5 3.5 3.5-3.5' fill='none' stroke='%2352525a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; cursor: pointer; } /* Checkbox rows and the consent checkbox (hook: label.fz-consent > input + span). */ .fz-check, .fz-consent { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-ui); line-height: 1.5; color: var(--text-2); cursor: pointer; } .fz-check input, .fz-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; } .fz-consent a { color: var(--ink); } /* Platform radio cards (the onboarding's choice cards). The native radio stays focusable and is restyled. */ .fz-platforms { min-width: 0; margin: 0; padding: 0; border: 0; } .fz-platforms .fz-legend { margin-bottom: 10px; } .fz-platforms__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } @media (min-width: 720px) { .fz-platforms__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } } .fz-platform { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line-3); border-radius: var(--r-xl); background: var(--white); cursor: pointer; transition: border-color var(--dur) ease, background-color var(--dur) ease; } .fz-platform:hover { border-color: var(--line-7); } .fz-platform:has(input:checked), .fz-platform.is-selected { border-color: var(--ink); } .fz-platform:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .fz-platform input, .fz-radio { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; width: 16px; height: 16px; margin: 2px 0 0; border: 1.5px solid var(--line-control); border-radius: 50%; background: var(--white); cursor: pointer; } .fz-platform input::before, .fz-radio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform var(--dur) var(--ease); } .fz-platform input:checked, .fz-radio:checked { border-color: var(--ink); } .fz-platform input:checked::before, .fz-radio:checked::before { transform: scale(1); } .fz-platform input:focus-visible { outline: none; } .fz-platform__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fz-platform__name { font-size: var(--fs-body); line-height: 1.25; font-weight: var(--fw-bold); color: var(--text); } .fz-platform__meta { font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--text-2); } @media (forced-colors: active) { .fz-platform input, .fz-radio { appearance: auto; } } /* Submit row and status. The status is a live region: visually hidden while empty, never display:none. */ .fz-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .fz-submit-row > .fz-form-status { flex: 1 1 220px; } .fz-form-status { margin: 0; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--text-2); } .fz-form-status:empty { position: absolute; width: 1px; height: 1px; min-width: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fz-form-status[data-tone="error"] { display: flex; gap: 8px; padding: 9px 12px; border-radius: var(--r-md); background: var(--red-bg); color: var(--red-ink); } .fz-form-status[data-tone="error"]::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--red-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5v4.25' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; } .fz-form-status[data-tone="success"] { color: var(--green-ink); } @media (max-width: 599px) { .fz-submit { width: 100%; } } /* Waitlist hooks (app.js): form.fz-waitlist gets .is-done; .fz-signup-done is un-hidden and focused. */ .fz-waitlist { display: flex; flex-direction: column; gap: var(--sp-6); margin: 0; } .fz-waitlist.is-done .fz-hide-on-done { display: none; } .cf-turnstile { min-width: 0; } .cf-turnstile:empty { display: none; } .fz-signup-done { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--sp-6); text-align: center; } .fz-signup-done[hidden] { display: none; } .fz-signup-done:focus { outline: none; } .fz-signup-done::before { content: ""; width: 48px; height: 48px; margin-bottom: var(--sp-2); border-radius: 50%; background: var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M16 24.5l5.5 5.5L32.5 18' fill='none' stroke='%23005d39' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 48px no-repeat; box-shadow: inset 0 0 0 1px var(--green-line); } .fz-signup-done h3, .fz-signup-done .fz-title { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); } .fz-signup-done p { max-width: 28rem; color: var(--text-2); } /* Signup card: intro column + fields column (stacks below 960px). */ .fz-signup { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--white); overflow: hidden; box-shadow: var(--shadow-card); } .fz-signup__intro { display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-bottom: 1px solid var(--line); background: var(--paper-2); } .fz-signup__fields { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); } @media (min-width: 960px) { .fz-signup { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .fz-signup__intro { border-bottom: 0; border-right: 1px solid var(--line); } .fz-signup > .fz-signup-done { grid-column: 1 / -1; } } /* ------------------------------------------------------------------------------------------------ 8 Site chrome */ /* Announcement bar: calm, like the app's "Tag eins." banner. */ .fz-announce { border-bottom: 1px solid var(--line); background: var(--paper-2); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); } .fz-announce__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; min-height: 40px; padding-block: 8px; text-align: center; } .fz-announce__label { font-weight: var(--fw-bold); color: var(--ink); } .fz-announce__link { font-weight: var(--fw-medium); color: var(--ink); white-space: nowrap; } .fz-announce--ink { border-color: var(--ink); background: var(--ink); color: rgba(255, 255, 255, 0.72); --focus: var(--white); } .fz-announce--ink .fz-announce__label, .fz-announce--ink .fz-announce__link { color: var(--white); } .fz-announce--ink .fz-announce__link { text-decoration-color: rgba(255, 255, 255, 0.5); } /* Header: sticky, translucent white. Inline nav from 960px; below that a
    menu (no JS). */ .fz-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); } .fz-header__inner { display: flex; align-items: center; gap: var(--sp-3); height: var(--header-h); } .fz-header .fz-logo { margin-right: auto; } .fz-header__end { display: flex; align-items: center; gap: var(--sp-2); } .fz-nav { display: none; } .fz-nav a, .fz-menu__panel a { display: inline-flex; align-items: center; color: var(--ink-3); font-size: var(--fs-ui); font-weight: var(--fw-medium); text-decoration: none; transition: background-color var(--dur) ease, color var(--dur) ease; } .fz-nav a { height: 34px; padding: 0 10px; border-radius: 7px; } .fz-nav a:hover, .fz-nav a[aria-current] { background: var(--paper-8); color: var(--ink); } @media (min-width: 960px) { .fz-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; } .fz-header .fz-logo { margin-right: var(--sp-4); } .fz-menu { display: none; } } .fz-menu { position: static; } .fz-menu__button { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--line-4); border-radius: 7px; background: var(--white); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-medium); list-style: none; cursor: pointer; user-select: none; } .fz-menu__button::-webkit-details-marker { display: none; } .fz-menu__button:hover { background: var(--paper-4); } .fz-menu__icon { position: relative; flex: none; width: 14px; height: 10px; } /* Below 400px the button shows only the icon; "Menü" stays its accessible name. */ @media (max-width: 399px) { .fz-menu__button { width: 32px; padding: 0; justify-content: center; } .fz-menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .fz-menu__icon::before, .fz-menu__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--dur-slow) var(--ease), top var(--dur-slow) var(--ease); } .fz-menu__icon::before { top: 1.5px; } .fz-menu__icon::after { top: 7px; } .fz-menu[open] .fz-menu__icon::before { top: 4.25px; transform: rotate(45deg); } .fz-menu[open] .fz-menu__icon::after { top: 4.25px; transform: rotate(-45deg); } .fz-menu__panel { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 8px var(--gutter) 16px; border-bottom: 1px solid var(--line); background: var(--white); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.18); } .fz-menu__panel a { min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--line-faint); font-size: var(--fs-body); color: var(--ink); } .fz-menu__panel a:last-child { border-bottom: 0; } .fz-menu__panel a:hover { color: var(--ink-3); } /* Footer */ .fz-footer { padding-block: clamp(3rem, 2rem + 4vw, 4.5rem) var(--sp-8); border-top: 1px solid var(--line); background: var(--paper-2); font-size: var(--fs-ui); color: var(--text-2); } .fz-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } @media (min-width: 480px) { .fz-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fz-footer__brand { grid-column: 1 / -1; } } @media (min-width: 960px) { .fz-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-10); } .fz-footer__brand { grid-column: auto; } } .fz-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); } .fz-footer__brand p { max-width: 20rem; line-height: var(--lh-body); } .fz-footer__title { margin-bottom: var(--sp-3); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-4); } .fz-footer__links { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .fz-footer a:not(.fz-logo) { color: var(--ink-3); text-decoration: none; } .fz-footer a:not(.fz-logo):hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-6); } .fz-footer a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-6); } .fz-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-6); margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: var(--sp-6); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-3); } /* ------------------------------------------------------------------------------------------------ 9 Prose pages */ .fz-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } .fz-main { flex: 1 0 auto; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(4.5rem, 3rem + 5vw, 7.5rem); } .fz-page-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); } .fz-page-head .fz-meta { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-3); } .fz-prose { max-width: var(--w-text); margin-inline: auto; font-size: var(--fs-body-lg); line-height: var(--lh-prose); color: var(--text-2); } .fz-prose a { font-weight: var(--fw-medium); overflow-wrap: anywhere; } .fz-prose :is(h1, h2, h3, h4) { color: var(--text); } .fz-prose h2 { font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); line-height: 1.2; letter-spacing: var(--track-h3); } .fz-prose h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; } .fz-prose :is(p, ul, ol, address, dl, table) + * { margin-top: var(--sp-4); } .fz-prose * + :is(h2) { margin-top: var(--sp-12); } .fz-prose * + :is(h3) { margin-top: var(--sp-8); } .fz-prose :is(h2, h3) + * { margin-top: var(--sp-3); } .fz-prose address { font-style: normal; } .fz-prose ul:not([class]), .fz-prose ol:not([class]) { padding-left: 1.25em; } .fz-prose ul:not([class]) li + li, .fz-prose ol:not([class]) li + li { margin-top: var(--sp-2); } .fz-prose li::marker { color: var(--ink-5); } .fz-prose strong { color: var(--text); } /* Page title inside the page head: the h2 size, so legal pages stay calm. */ .fz-page-head h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); } .fz-prose h2 .fz-num { margin-right: 0.3em; color: var(--text-3); } /* Bulleted / numbered list outside prose (prose styles plain