/* ──────────────────────────────────────────────────────────────────────── lautwandel.de v2 — Designsystem-Tokens + Reset + Typo-Basis Hell ist Default. prefers-color-scheme:dark schaltet automatisch um. Ein manueller Toggle setzt data-theme="light"|"dark" auf und überschreibt die Media-Query. ──────────────────────────────────────────────────────────────────────── */ :root { /* Papier-Hellmodus (M-Hybrid Hell) */ --paper: #faf7f0; --paper-2: #f3eee2; --paper-3: #e9e1cf; --ink: #1a1612; --ink-2: #3a342a; --ink-3: #5e554a; --ink-mute: #8a7e6e; --rule: #d8cdb4; --rule-soft: #e9dfc8; --hairline: #c9bb9d; --accent: #8b3a2e; /* Tinten-Rot, für Akzente */ --accent-2: #a85a3e; --link: #5e554a; --link-hover: #1a1612; --primary-bg: #1a1612; /* schwarze Aggregat-Box auf hellem Grund */ --primary-fg: #faf7f0; --primary-mute: #8a7e6e; /* Sigle-Akzente (zarter als die rohen Hex-Codes der DB) */ --c-ahd: #5b8a72; --c-mhd: #8b7d3c; --c-mnd: #6b8a52; --c-nhd: #8b5555; --c-pfeifer: #8b5577; --c-goethe: #7d5577; --c-meyers: #5577a0; --c-dialekt: #4b7755; --c-ae: #5b6b8a; --c-germ: #777777; --c-ie: #9b8a72; /* Type scale */ --display: "Fraunces", "Iowan Old Style", "Hoefler Text", Georgia, serif; --serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px; --fs-4xl: 64px; --fs-5xl: 88px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.55; --lh-loose: 1.75; --tracking-tight: -0.01em; --tracking-wide: 0.04em; --tracking-wider: 0.12em; /* Spacing */ --gap-2: 4px; --gap-3: 8px; --gap-4: 12px; --gap-5: 16px; --gap-6: 20px; --gap-7: 28px; --gap-8: 40px; --gap-9: 56px; --gap-10: 80px; /* Layout */ --max-w: 1280px; --col-w: 680px; /* lesefreundliche Textspalte */ /* Effects */ --shadow-sm: 0 1px 2px rgba(26,22,18,0.06); --shadow-md: 0 4px 16px rgba(26,22,18,0.08); --shadow-lg: 0 12px 40px rgba(26,22,18,0.14); --radius-sm: 2px; --radius: 4px; --radius-md: 8px; --radius-lg: 16px; --transition: 160ms cubic-bezier(.4,0,.2,1); } /* Dunkelmodus — automatisch via OS-Präferenz, aber nur wenn data-theme nicht explizit auf "light" gesetzt ist. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-theme="light"]), :root[data-theme=""] { --paper: #0e0c0a; --paper-2: #181512; --paper-3: #221d18; --ink: #f0e8d8; --ink-2: #d4c8b0; --ink-3: #a89c84; --ink-mute: #6e6557; --rule: #3a342a; --rule-soft: #2a2520; --hairline: #4a4338; --accent: #d97757; --accent-2: #f0a070; --link: #d4c8b0; --link-hover: #f0e8d8; --primary-bg: #0e0c0a; --primary-fg: #f0e8d8; --primary-mute: #a89c84; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.35); --shadow-lg: 0 12px 40px rgba(0,0,0,0.5); } } /* Manueller Override */ :root[data-theme="dark"] { --paper: #0e0c0a; --paper-2: #181512; --paper-3: #221d18; --ink: #f0e8d8; --ink-2: #d4c8b0; --ink-3: #a89c84; --ink-mute: #6e6557; --rule: #3a342a; --rule-soft: #2a2520; --hairline: #4a4338; --accent: #d97757; --accent-2: #f0a070; --link: #d4c8b0; --link-hover: #f0e8d8; --primary-bg: #0e0c0a; --primary-fg: #f0e8d8; --primary-mute: #a89c84; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.35); --shadow-lg: 0 12px 40px rgba(0,0,0,0.5); } /* ────────────────── Reset ────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol, table { margin: 0; padding: 0; } ul, ol { list-style: none; } img, picture, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } a { color: var(--link); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--link-hover); } table { border-collapse: collapse; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ────────────────── Body ────────────────── */ html, body { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: var(--fs-base); line-height: var(--lh-base); font-feature-settings: "kern", "liga", "calt", "onum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Disable smooth-scroll for :target tab nav (sonst nervt's beim Switchen) */ html { scroll-behavior: auto; } /* ────────────────── Typo-Basis ────────────────── */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .font-sans { font-family: var(--sans); } .font-mono { font-family: var(--mono); } .font-display { font-family: var(--display); } /* Reusable utility classes — vorsichtig, wenig */ .muted { color: var(--ink-mute); } .eyebrow { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ink-mute); } .rule { border: 0; border-top: 1px solid var(--rule); } .rule--soft { border: 0; border-top: 1px solid var(--rule-soft); } .hairline { border: 0; border-top: 1px solid var(--hairline); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }