/* thrpy — generated from tokens.json */
:root, [data-theme="light"] {
  --teal-50: #f0f9f7; /* T1. Lightest tint. Use through surface-subtle. */
  --teal-100: #e2f4ee; /* T1. Tint. Text on teal-900/950 only (5.31 / 7.02); on teal-800 it fails (3.96). */
  --teal-200: #c8e9e0; /* T1. Borders on tinted areas. */
  --teal-300: #abdecf; /* T1. Chip borders (decorative, the chip text carries meaning). */
  --teal-400: #8dd3bf; /* T1. Decoration only. */
  --teal-500: #74c8b0; /* T1. Decoration only. */
  --teal-600: #59bea1; /* T1. THE brand teal. Ink #171c26 on it 7.56; white on it only 2.26, so never under white text or white icons. */
  --teal-700: #3da589; /* T1. Solved: lightest teal holding 3:1 with white (3.03). White icons, checkmarks. Never text. */
  --teal-800: #2e846f; /* T1. Solved: lightest teal holding 4.5:1 with white (4.52). Buttons, links, prices, hero and brand sections, footer. */
  --teal-900: #256e5d; /* T1. White on it 6.06; 5.27 on the page. Hover, hero gradient end, links on the page. */
  --teal-950: #1e5a4c; /* T1. White on it 8.01. Pressed states. */
  --slate-50: #f8f8fa; /* T1. Table headers, quiet rows. */
  --slate-100: #eeeff2; /* T1. Page background. */
  --slate-200: #dfe2e7; /* T1. Dividers, card edges, disabled fills. */
  --slate-300: #c2c9d6; /* T1. Disabled borders. */
  --slate-400: #8995af; /* T1. Solved: lightest grey holding 3:1 on white (3.01). Input borders. */
  --slate-500: #5f6d8b; /* T1. Solved: lightest grey holding 4.5:1 on the page (4.51; 5.19 on white). Muted text. */
  --slate-600: #54607b; /* T1. Neutral icons, placeholders (6.29 on white). */
  --slate-700: #49546b; /* T1. Anchor of the slate ramp, from the site's headline grey. Secondary text (7.60 on white). */
  --slate-800: #313a4f; /* T1. Strong UI text. */
  --slate-900: #232a39; /* T1. Dark surfaces. */
  --slate-950: #171c26; /* T1. Ink (17.07 on white, 14.84 on the page). */
  --white: #ffffff; /* T1. Cards; text on teal-800 and darker. */
  --red-700: #b42318; /* T1. Errors (6.57 on white). */
  --gold-100: #fbf3d6; /* T1. Highlight badge fill; lightest gold in illustrations. */
  --gold-200: #f6e3a1; /* T1. Illustration fill only: paper, sticky notes, the lost-time slice. Never UI. */
  --gold-400: #ebcb6b; /* T1. Illustration fill only: folders, accents in problem scenes. Never UI (1.6 on white). */
  --gold-800: #5c4a00; /* T1. Highlight badge text (7.76 on gold-100). */
  --logo-green: #00b182; /* Asset ink of the logo mark (vector source) and the PNG feature icons. Lives only inside those files; never use it for UI. Fails as UI colour (2.76 on white), so meaningful marks in UI use icon-brand. */
  --illustration-green: #1ab98f; /* Asset ink of the THRPY wordmark (vector source) and the legacy line illustrations (ipad-, paper-, time-illus). Never text or controls (2.51 on white). */
  --icon-tint: #e5f7f2; /* Asset fill, sampled from the PNG feature icons' inner shapes. */
  --text-default: var(--slate-950); /* Headlines and body copy on surface-page, surface-card and surface-subtle. */
  --text-secondary: var(--slate-700); /* Leads, subtitles, card body on surface-page (6.61) and surface-card (7.60). */
  --text-muted: var(--slate-500); /* Meta, helper text, captions on surface-page (4.51) and surface-card (5.19). At the floor: no opacity on it. */
  --text-link: var(--teal-800); /* Links, brand text and prices on surface-card only (4.52). On surface-page use text-link-on-page. */
  --text-link-on-page: var(--teal-900); /* Nav and links on surface-page (5.27); every link hover. */
  --text-on-brand: var(--white); /* Text on action-primary and surface-brand (4.52), surface-brand-strong (6.06). Always full white. */
  --text-on-brand-muted: var(--white); /* Sublines on surface-brand (4.52) and surface-brand-strong (6.06). Full white: teal-100 fails on teal-800 (3.96), so set sublines apart by size and weight. */
  --surface-page: var(--slate-100); /* Page background. */
  --surface-card: var(--white); /* Cards, menus, dialogs, chips, the sticky bar. */
  --surface-subtle: var(--teal-50); /* Callouts, secondary hover. Text on it: text-default or teal-900 (5.65); never teal-800 (4.22). */
  --surface-brand: var(--teal-800); /* Hero, brand sections and footer. Solved: the lightest teal that carries white text at AA (4.52). */
  --surface-brand-strong: var(--teal-900); /* Hero gradient end (135°, from surface-brand). */
  --brand-decor: var(--teal-600); /* Illustrations, large fills, dots and shapes. Text on it only in text-default. */
  --action-primary: var(--teal-800); /* Primary button fill, recommended badge, secondary button border and label. */
  --action-primary-hover: var(--teal-900); /* Hover and pressed state of action-primary. */
  --action-disabled: var(--slate-200); /* Disabled button fill; label in text-muted. */
  --icon-brand: var(--teal-700); /* Icon tiles with a white icon, checkmarks on white. Non-text 3:1 (3.03). Never text. */
  --border-subtle: var(--slate-200); /* Dividers, card edges. Decorative only. */
  --border-chip: var(--teal-300); /* Chip outline on surface-card. */
  --border-input: var(--slate-400); /* Form fields and checkbox outlines on surface-card (3.01). */
  --focus-ring: var(--teal-800); /* 2px focus outline, 3px offset, on surface-page (3.93) and surface-card (4.52). */
  --focus-ring-on-brand: var(--white); /* Focus outline on surface-brand, surface-brand-strong and action-primary fills. */
  --status-error: var(--red-700); /* Error text and borders on surface-card. */
  --highlight-bg: var(--gold-100); /* Audience badges such as „Für Gründer:innen“. */
  --highlight-fg: var(--gold-800); /* Text on highlight-bg (7.76). */
  --elev-1: 0 1px 2px rgba(23, 28, 38, 0.06); /* Resting cards. */
  --elev-2: 0 8px 24px -8px rgba(23, 28, 38, 0.18); /* Hovered cards, menus. */
  --elev-3: 0 20px 48px -12px rgba(23, 28, 38, 0.28); /* Dialogs, consent banner. */
}
:root {
  --space-1: 4px; /* Icon-to-label nudges. */
  --space-2: 8px; /* Gap between chips; badge padding. */
  --space-3: 12px; /* List item gap, checklist rows. */
  --space-4: 16px; /* Mobile page gutter; card inner gaps. */
  --space-6: 24px; /* Card padding; button side padding; grid gap. */
  --space-8: 32px; /* Desktop gutter; gap between cards. */
  --space-12: 48px; /* Heading to content inside a section. */
  --space-16: 64px; /* Large blocks within a section. */
  --space-20: 80px; /* Section padding, mobile. */
  --space-28: 112px; /* Section padding, desktop. */
  --radius-sm: 8px; /* Inputs, menu items, small boxes. */
  --radius-lg: 16px; /* Cards, icon tiles, the consent banner. */
  --radius-full: 9999px; /* Every button and chip (pill). */
  --target-min: 44px; /* Minimum height and width of anything tappable. */
  --target-hero: 52px; /* Button height in the hero. */
  --icon-tile: 56px; /* The one icon tile size. */
  --icon-glyph: 28px; /* Icon inside a tile; 20px inline and in checklists. */
  --focus-width: 2px; /* Focus outline width. */
  --focus-offset: 3px; /* Focus outline offset. */
  --container: 1200px; /* Max content width. */
  --prose: 720px; /* Max width of legal pages, FAQ and long text. */
  --font-display: "Roboto Slab", Georgia, serif;
  --font-sans: Roboto, system-ui, -apple-system, sans-serif;
  --text-display: 700 56px/62px var(--font-display); /* Home hero h1 only. 40/46 below 768px. */
  --text-h1: 700 48px/56px var(--font-display); /* Subpage h1. 36/44 below 768px. */
  --text-h2: 700 36px/44px var(--font-display); /* Section titles. 30/38 below 768px. */
  --text-h3: 600 24px/32px var(--font-display); /* Card and feature titles. */
  --text-lead: 400 20px/30px var(--font-sans); /* Intro under h1/h2, in text-secondary. 18/28 below 768px. Max 60ch. */
  --text-body: 400 17px/27px var(--font-sans); /* Running text, FAQ answers. Max 70ch. */
  --text-button: 600 16px/24px var(--font-sans); /* Button labels, text links, nav. Needs a Roboto 600 file; until it ships, browsers fall back to 700. */
  --text-tag: 500 15px/20px var(--font-sans); /* Chips at 500, badges at 700. */
  --text-small: 400 14px/20px var(--font-sans); /* Meta, footnotes, legal lines. The floor for any text. */
}
.display {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 62px;
  font-weight: 700;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0;
}
.lead {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.tag {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/robotoslab-regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}