/* ========================================================================== baumheilkraft.com — Design-System «Organic Modern» 1 Tokens · 2 Reset/Basis · 3 Typografie · 4 Layout · 5 Komponenten 6 Header · 7 Footer · 8 Utilities ========================================================================== */ /* 1 ── Design-Tokens */ :root { /* Farben (Spec 3.1) */ --c-primary: #2D4A32; /* tiefes Waldgrün: Header, Buttons, Links */ --c-primary-dark: #223826; /* Hover/aktiv */ --c-secondary: #8FAE8B; /* Salbei: Akzente, Tags */ --c-secondary-soft: #DCE7DA; /* Salbei aufgehellt: Chips, Hover-Flächen */ --c-bg: #FDF9F6; /* warmes Creme — exakt der Logo-Hintergrund */ --c-surface: #EFE8DA; /* Sand: Karten, alternierende Sektionen */ --c-accent: #8B5E3C; /* Erde: Preise, Zitate — sparsam */ --c-text: #2B2B26; /* dunkles Graubraun */ --c-text-muted: #5C5C52; --c-border: #DDD5C4; --c-white: #FFFFFF; --c-error: #A23B3B; --c-success: #3E6B46; /* Typografie */ --font-display: "Fraunces", Georgia, serif; --font-body: "Source Sans 3", system-ui, sans-serif; --fs-300: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem); --fs-400: clamp(1rem, 0.95rem + 0.25vw, 1.13rem); /* Fliesstext */ --fs-500: clamp(1.13rem, 1.05rem + 0.4vw, 1.35rem); --fs-600: clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem); /* h3 */ --fs-700: clamp(1.65rem, 1.4rem + 1.25vw, 2.3rem); /* h2 */ --fs-800: clamp(2.1rem, 1.7rem + 2vw, 3.2rem); /* h1 */ --fs-900: clamp(2.5rem, 1.9rem + 3vw, 4.2rem); /* Hero */ --lh-tight: 1.15; --lh-body: 1.65; /* Raum & Form */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem; --radius-s: 8px; --radius-m: 16px; --radius-pill: 999px; --shadow-s: 0 1px 3px rgb(43 43 38 / 0.08), 0 4px 14px rgb(43 43 38 / 0.06); --shadow-m: 0 2px 6px rgb(43 43 38 / 0.10), 0 12px 32px rgb(43 43 38 / 0.10); --content-max: 72rem; /* ~1200px */ --content-narrow: 46rem; /* Lesetexte */ --transition: 200ms ease; } /* ── Breakpoints (Konvention) ────────────────────────────────────────────── Mobile-first: Basis-Styles gelten für Mobile; min-width-Queries bauen darauf auf. Reines CSS erlaubt keine Custom Properties in @media-Bedingungen — die Werte stehen daher literal in den Regeln, aber NUR diese zwei Punkte: 640px Mobile → Tablet : Karten-/Inhaltsraster werden mehrspaltig 1024px Tablet → Desktop : volle Navigation statt Burger, Raster 3–4-spaltig (Gegenstück max-width 1023.98px = 1024px − 0.02 schaltet den Burger ein) Beim Schreiben neuer @media-Regeln ausschliesslich 640px / 1024px verwenden. ────────────────────────────────────────────────────────────────────────── */ /* 2 ── Reset & Basis */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); font-size: var(--fs-400); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: var(--radius-s); } ::selection { background: var(--c-secondary); color: var(--c-white); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* 3 ── Typografie */ h1, h2, h3, .u-display { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); color: var(--c-primary); text-wrap: balance; } h1, .u-display { font-size: var(--fs-800); } h2 { font-size: var(--fs-700); } h3 { font-size: var(--fs-600); } h4 { font-size: var(--fs-500); } p, ul, ol { max-width: var(--content-narrow); } p + p { margin-top: var(--space-3); } a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--c-accent); } blockquote { font-family: var(--font-display); font-size: var(--fs-500); font-style: italic; color: var(--c-accent); border-left: 3px solid var(--c-secondary); padding-left: var(--space-4); margin-block: var(--space-4); } .u-lead { font-size: var(--fs-500); color: var(--c-text-muted); } .u-eyebrow { font-size: var(--fs-300); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); } /* 4 ── Layout */ .container { width: min(100% - 2.5rem, var(--content-max)); margin-inline: auto; } /* Lese-Sektionen behalten dieselbe linke Kante wie volle Sektionen; nur die Textbreite wird auf angenehme Lesebreite begrenzt (linksbündig, nicht zentriert). */ .container--narrow > * { max-width: var(--content-narrow); } .section { padding-block: var(--space-6); } .section--alt { background: var(--c-surface); } .grid { display: grid; gap: var(--space-4); } .grid--cards { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid--cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid--cards { grid-template-columns: repeat(3, 1fr); } .grid--cards-4 { grid-template-columns: repeat(4, 1fr); } } .section-divider { display: block; width: 100%; height: 56px; color: var(--c-surface); } .section-divider--flip { transform: scaleY(-1); } /* Zwei-Spalten-Raster (Text|Bild) — kollabiert auf Mobile, 2-spaltig ab 640px. Ergänzt für Startseite (Newsletter/Praxis); es gab keine generische 2-Spalten-Utility. */ .grid--two { grid-template-columns: 1fr; align-items: center; } @media (min-width: 640px) { .grid--two { grid-template-columns: 1fr 1fr; } } /* Karten-Raster als