/* ============================================================ DESIGN TOKENS — lisa-begleitet.de Version 1.0 ============================================================ Struktur: 1. Google Fonts Import 2. Custom Properties (Design Tokens) — Farben — Typografie — Abstände — Radii & Schatten 3. Base Reset & Defaults 4. Typografie-Klassen 5. Farb-Utility-Klassen 6. Button-Komponenten ============================================================ */ /* ------------------------------------------------------------ 1. GOOGLE FONTS ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dosis:wght@300;400;500;600;700&family=Playfair+Display:ital@1&display=swap'); /* ------------------------------------------------------------ 2. DESIGN TOKENS ------------------------------------------------------------ */ :root { /* ---------------------------------------------------------- FARBEN ---------------------------------------------------------- */ /* Hintergründe */ --color-bg: #f0dde6; /* Primär · Blush Rosa · fix */ --color-bg-light: #fdf8fa; /* Hell · Fast-Weiß mit Rosa-Unterton */ /* Hauptfarben */ --color-cta: #7a4370; /* CTA · Beere-Violett */ --color-text: #3d2d3a; /* Text · Pflaume-Charcoal */ --color-accent: #b0a0b8; /* Akzent · Staubiges Lavendel */ /* Neutral */ --color-white: #ffffff; /* Transparenzen (für Schatten, Overlays) */ --color-cta-10: rgba(122, 67, 112, 0.10); --color-cta-20: rgba(122, 67, 112, 0.20); --color-cta-30: rgba(122, 67, 112, 0.30); --color-text-10: rgba(61, 45, 58, 0.10); --color-text-25: rgba(61, 45, 58, 0.25); --color-text-50: rgba(61, 45, 58, 0.50); /* ---------------------------------------------------------- TYPOGRAFIE ---------------------------------------------------------- */ /* Familien */ --font-headline: 'Abril Fatface', serif; --font-body: 'Dosis', sans-serif; --font-script: 'Playfair Display', serif; /* nur sparsam! */ /* Gewichte */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Größen — fluid mit clamp() */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 22px; --text-xl: 26px; --text-h3: clamp(20px, 3vw, 26px); --text-h2: clamp(28px, 4vw, 40px); --text-h1: clamp(40px, 7vw, 80px); --text-hero: clamp(48px, 9vw, 96px); /* Zeilenhöhen */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.7; --leading-loose: 1.9; /* Buchstabenabstand */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-caps: 0.18em; /* für Uppercase-Labels */ /* ---------------------------------------------------------- ABSTÄNDE Skala: 4px-Basis · konsequent gestuft ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* xs — kleiner Text, enge Elemente */ --space-5: 20px; /* sm — Heading → Subheading */ --space-6: 24px; /* md — Textblock → CTA */ --space-7: 28px; --space-8: 32px; /* lg — CTA → nächster Block */ --space-9: 36px; --space-10: 40px; /* xl — Section Top */ --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; /* 2xl — Sektion zu Sektion Desktop */ --space-24: 96px; --space-32: 128px; /* Semantische Abstands-Aliases */ --gap-inline: var(--space-4); /* zwischen Inline-Elementen */ --gap-element: var(--space-5); /* heading → subheading */ --gap-text-cta: var(--space-6); /* textblock → button */ --gap-cta-next: var(--space-8); /* button → nächste Sektion */ --gap-section-top: var(--space-10); /* section padding-top (mobil) */ --gap-section: var(--space-20); /* sektion zu sektion (desktop) */ --gap-page: var(--space-32); /* seitenränder horizontal */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Pills & Circles */ /* ---------------------------------------------------------- SCHATTEN ---------------------------------------------------------- */ --shadow-xs: 0 1px 4px var(--color-text-10); --shadow-sm: 0 2px 12px var(--color-text-10); --shadow-md: 0 4px 16px var(--color-text-10); --shadow-lg: 0 8px 32px var(--color-text-10); --shadow-cta: 0 4px 14px var(--color-cta-30); /* für CTA-Buttons */ /* ---------------------------------------------------------- ÜBERGÄNGE ---------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ------------------------------------------------------------ 3. BASE RESET & DEFAULTS ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-weight-regular); line-height: var(--leading-relaxed); color: var(--color-text); background: var(--color-bg-light); } img, video { max-width: 100%; display: block; } a { color: var(--color-cta); text-decoration: none; transition: opacity var(--transition-fast); } a:hover { opacity: 0.8; } /* ------------------------------------------------------------ 4. TYPOGRAFIE-KLASSEN ------------------------------------------------------------ */ /* Headlines */ .t-hero { font-family: var(--font-headline); font-size: var(--text-hero); line-height: var(--leading-tight); color: var(--color-text); letter-spacing: var(--tracking-tight); } .t-h1 { font-family: var(--font-headline); font-size: var(--text-h1); line-height: var(--leading-tight); color: var(--color-text); } .t-h2 { font-family: var(--font-headline); font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--color-text); } .t-h3 { font-family: var(--font-body); font-size: var(--text-h3); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); color: var(--color-text); } /* Body */ .t-body-lg { font-size: var(--text-md); line-height: var(--leading-loose); } .t-body { font-size: var(--text-base); line-height: var(--leading-relaxed); } .t-body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); } /* Script / Zitat — sparsam einsetzen! max. 1–2× pro Seite */ .t-script { font-family: var(--font-script); font-style: italic; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-cta); } /* Labels & Badges */ .t-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); } .t-label--cta { color: var(--color-cta); } /* ------------------------------------------------------------ 5. FARB-UTILITY-KLASSEN ------------------------------------------------------------ */ .bg-primary { background-color: var(--color-bg); } .bg-light { background-color: var(--color-bg-light); } .bg-cta { background-color: var(--color-cta); } .bg-white { background-color: var(--color-white); } .text-primary { color: var(--color-text); } .text-cta { color: var(--color-cta); } .text-accent { color: var(--color-accent); } .text-white { color: var(--color-white); } .text-muted { color: var(--color-text-50); } .border-cta { border-color: var(--color-cta); } .border-accent { border-color: var(--color-accent); } .border-primary { border-color: var(--color-bg); } /* ------------------------------------------------------------ 6. BUTTON-KOMPONENTEN ------------------------------------------------------------ */ /* Basis */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--text-base); letter-spacing: var(--tracking-wide); border-radius: var(--radius-sm); padding: 14px 28px; border: none; cursor: pointer; text-decoration: none; transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .btn:hover { opacity: 0.88; transform: translateY(-1px); } .btn:active { opacity: 1; transform: translateY(0); } /* Primär — Hauptaktion, maximale Sichtbarkeit */ .btn--primary { background: var(--color-cta); color: var(--color-white); box-shadow: var(--shadow-cta); } /* Sekundär — alternative Aktion */ .btn--secondary { background: transparent; color: var(--color-cta); border: 2px solid var(--color-cta); padding: 12px 26px; /* kompensiert Border */ } /* Ghost — tertiäre Aktion, subtil */ .btn--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-text-25); padding: 13px 27px; } /* Größen */ .btn--sm { font-size: var(--text-sm); padding: 10px 20px; } .btn--lg { font-size: var(--text-md); padding: 18px 36px; } /* Pill-Variante */ .btn--pill { border-radius: var(--radius-full); }