/* ============================================================= Therapiebär · Design Tokens Type + Color + Spacing + Shadow + Radii ============================================================= */ /* ---- Fonts (Google Fonts) ---- Headlines: Hanken Grotesk 600/700 · Body & UI: Inter 400/500/600/700. Only the weights actually used are loaded — see fonts.css (local). */ :root { /* ========================================================= COLOR — Foundations ========================================================= */ /* Page surfaces */ --bg: #ffffff; --bg-pale: #f5f8fd; /* warmer page background */ --bg-tint: #f4f7fe; /* card / panel tint (blue) */ --bg-tint-2: #eef3fc; /* deeper bottom gradient */ /* Primary blue — Kassensitz pathway & patient default UI */ --blue: #2563eb; --blue-deep: #1d4fd3; --blue-50: #eef4ff; --blue-100: #dbe6ff; --blue-200: #c5d6ff; /* Cream / orange — Privatpraxis & Kostenerstattung pathway */ --cream: #fbf4e6; --cream-2: #f6ecd5; --cream-line: #ecdfc8; --cream-line-soft: #f1e6d2; --orange: #e07a2b; --orange-deep: #b95f17; --orange-50: #fdf2e6; --orange-100: #fae3cc; /* Text */ --navy: #0f1b3d; /* primary text */ --navy-soft: #3a466b; /* secondary text */ --navy-mute: #6a7494; /* tertiary / meta */ /* Lines */ --line: #e5ebf5; --line-soft: #eef2f9; /* Status */ --green: #1e8a5a; --amber: #b76b1a; /* ========================================================= RADII ========================================================= */ --radius-xl: 28px; /* outer hero / section cards */ --radius-lg: 20px; /* inner panels */ --radius-md: 14px; /* buttons, inputs, small cards */ --radius-sm: 10px; /* tags, chips */ --radius-pill: 999px; /* pills */ /* ========================================================= SHADOWS — soft layered, never harsh ========================================================= */ --shadow-card: 0 1px 2px rgba(15, 27, 61, 0.04), 0 24px 60px -30px rgba(15, 27, 61, 0.18); --shadow-soft: 0 1px 2px rgba(15, 27, 61, 0.04), 0 8px 22px -14px rgba(15, 27, 61, 0.12); --shadow-inner: 0 1px 2px rgba(15, 27, 61, 0.04), 0 4px 16px -8px rgba(15, 27, 61, 0.10); --shadow-btn-blue: 0 1px 2px rgba(29, 79, 211, 0.30), 0 12px 24px -10px rgba(29, 79, 211, 0.50); --shadow-btn-orange: 0 1px 2px rgba(185, 95, 23, 0.30), 0 12px 24px -10px rgba(185, 95, 23, 0.40); /* ========================================================= SPACING — 4px base ========================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 80px; --space-11: 112px; /* ========================================================= TYPOGRAPHY — foundations ========================================================= */ --font-headline: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* Sizes */ --fs-hero: 80px; /* hero h1 desktop */ --fs-display: 56px; /* section h2 */ --fs-headline: 38px; /* block / card title */ --fs-title: 28px; /* sub-card title */ --fs-subtitle: 20px; --fs-lead: 18px; --fs-body: 16px; --fs-body-sm: 14.5px; --fs-meta: 13px; --fs-eyebrow: 12px; --lh-tight: 1.05; /* @kind font */ --lh-snug: 1.15; /* @kind font */ --lh-normal: 1.4; /* @kind font */ --lh-relaxed: 1.6; /* @kind font */ --tracking-tight: -0.02em; --tracking-display: -0.018em; --tracking-snug: -0.01em; --tracking-eyebrow: 0.14em; /* Layout */ --content-max: 1180px; --content-wide: 1280px; --page-pad: 40px; } /* ============================================================= SEMANTIC TYPE — utility classes ============================================================= */ html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--navy); background: var(--bg-pale); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .h-hero, h1.h-hero { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--navy); margin: 0; text-wrap: balance; } .h-display, h2.h-display { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-display); line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--navy); margin: 0; text-wrap: balance; } .h-headline, h3.h-headline { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-headline); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); color: var(--navy); margin: 0; } .h-title, h4.h-title { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--navy); margin: 0; } .h-subtitle { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-subtitle); line-height: 1.3; letter-spacing: var(--tracking-snug); color: var(--navy); } .t-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--navy-soft); text-wrap: pretty; } .t-body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--navy-soft); } .t-body-sm { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--navy-mute); } .t-meta { font-size: var(--fs-meta); font-weight: 500; color: var(--navy-mute); } .t-eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue); } /* Emphasis: color shift + half-step weight bump, never raw bold */ .em-blue { color: var(--blue-deep); font-weight: 600; } .em-orange { color: var(--orange-deep); font-weight: 600; }