/* Self-hosted fonts - no third-party requests. Subsets: latin, latin-ext (covers German). Source: Google Fonts (Newsreader, IBM Plex Mono), SIL Open Font License. */ /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-normal-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-normal-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-normal-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-normal-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/Newsreader-italic-300-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/Newsreader-italic-300-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/Newsreader-normal-300-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/Newsreader-normal-300-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Design tokens and shared components โ€” single source of truth for the whole site. Values come from the design handoff (docs/DESIGN.md); change them there and here together. */ :root { --paper: #faf9f6; --ink: #1b1813; --body: #33302a; --mid: #4c473f; --mid2: #5a554c; --link-muted: #6f6a61; --muted: #8a857c; --hairline: rgba(27, 24, 19, .16); --shadow: 0 24px 48px -34px rgba(27, 24, 19, .4); --shadow-hero: 0 28px 56px -36px rgba(27, 24, 19, .45); --serif: 'Newsreader', Georgia, serif; --mono: 'IBM Plex Mono', monospace; --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* One accent per project. Scope on a section (landing) or on (detail pages); a theme class on a nested element overrides its ancestor. */ .t-emerald { --accent: #0e7a5f; --accent-hover: #0a5d47; --tint: rgba(14, 122, 95, .05); } .t-amber { --accent: #9a6b1a; --accent-hover: #7c5512; --tint: rgba(154, 107, 26, .05); } .t-violet { --accent: #6458b8; --accent-hover: #50459c; --tint: rgba(100, 88, 184, .05); --tint-soft: rgba(100, 88, 184, .03); } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; } h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; } /* layout */ .wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); } .rule-top { border-top: 1px solid var(--hairline); } .anchor { scroll-margin-top: 24px; } /* vertical rhythm */ .pad-seg { padding-top: clamp(48px, 8vh, 88px); padding-bottom: clamp(48px, 8vh, 88px); } .pad-block { padding-top: clamp(44px, 7vh, 80px); padding-bottom: clamp(44px, 7vh, 80px); } .pad-q { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px); } /* header */ .site-header { padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; } .wordmark { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .site-nav { display: flex; gap: 22px; font-family: var(--mono); font-size: 12px; } .nav-link { color: var(--link-muted); text-decoration: none; } .nav-link:hover { color: var(--accent); } .back-link { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--link-muted); text-decoration: none; } .back-link:hover { color: var(--ink); } .page-label { font-family: var(--mono); font-size: 12px; color: var(--muted); } /* type */ .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .tagline { margin: 16px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 22px); color: var(--mid); line-height: 1.4; } .lede { margin: 0 0 28px; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--body); } .cap { font-family: var(--mono); font-size: 11px; color: var(--muted); } /* landing hero */ .hero { padding-top: clamp(36px, 6vh, 72px); padding-bottom: clamp(36px, 6vh, 64px); } .hero-title { font-size: clamp(46px, 8.5vw, 108px); line-height: .98; letter-spacing: -.03em; text-wrap: pretty; } .hero-sub { margin-top: clamp(20px, 4vh, 32px); border-top: 1px solid var(--hairline); padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; } .hero-sub p { margin: 0; max-width: 52ch; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; color: var(--mid); } /* contents list */ .toc { margin-top: clamp(32px, 5vh, 56px); } .toc-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 18px 6px; border-top: 1px solid var(--hairline); text-decoration: none; color: var(--ink); } .toc-row:last-child { border-bottom: 1px solid var(--hairline); } .toc-row:hover { background: var(--tint); } .toc-left { display: flex; align-items: baseline; gap: 18px; } .toc-idx { font-family: var(--mono); font-size: 12px; color: var(--accent); } .toc-title { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); } .toc-tag { font-family: var(--mono); font-size: 12px; color: var(--muted); } /* landing segment template โ€” copy one segment + one detail page to add a project */ .seg-grid { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); } .seg-meta { flex: 1 1 220px; min-width: 220px; } .seg-body { flex: 3 1 480px; min-width: min(480px, 100%); } .bar { width: 36px; height: 3px; background: var(--accent); } .seg-meta .kicker { margin-top: 14px; display: block; } .seg-title { margin-top: 10px; font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.02em; } .seg-title a { color: inherit; text-decoration: none; } .seg-title a:hover { color: var(--accent); } /* stats */ .stats-col { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; } .stats-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); } .stat-num { font-family: var(--serif); font-size: 32px; } .stats-row .stat-num { font-size: 36px; } /* mono link stacks */ .links-col { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; } .links-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 24px; } .mlink { font-family: var(--mono); font-size: 13px; text-decoration: none; } .mlink--ink { color: var(--ink); } .mlink--ink:hover { color: var(--accent); } .mlink--accent { color: var(--accent); } .mlink--accent:hover { text-decoration: underline; } .mlink--muted { color: var(--link-muted); } .mlink--muted:hover { text-decoration: underline; } /* screenshots */ .shots { display: flex; flex-wrap: wrap; gap: 20px; } .shots--top { align-items: flex-start; } .shot-link { display: block; } .shot { width: 100%; display: block; border: 1px solid var(--hairline); border-radius: 6px; box-shadow: var(--shadow); background: #fff; } .shot--hero { box-shadow: var(--shadow-hero); } .shot--phone { border-radius: 14px; } .shot-cap { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); } /* landing feature grid */ .grid-features { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 28px; } .grid-features--narrow { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .cell { border-top: 1px solid var(--hairline); padding-top: 12px; } .cell-h { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .cell-idx { font-family: var(--mono); font-size: 11px; color: var(--accent); } .cell-idx + .cell-h { margin-top: 4px; letter-spacing: .06em; } .cell p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--mid2); } /* CTA pill */ .cta { display: inline-block; padding: 14px 28px; background: var(--accent); color: var(--paper); border-radius: 999px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-decoration: none; } .cta:hover { background: var(--accent-hover); } /* practice landing blocks */ .plink { display: block; color: inherit; text-decoration: none; } .plink:hover { background: var(--tint-soft); } .pblock { border-top: 1px solid var(--hairline); padding-top: 14px; } .pblock-h { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } /* cards */ .card { border: 1px solid var(--hairline); border-radius: 6px; } .card--gate { border-color: #6458b8; background: rgba(100, 88, 184, .05); } .step-tag { font-family: var(--mono); font-size: 10px; color: var(--muted); } .step-tag--gate { color: #6458b8; } .card-title { margin-top: 8px; font-family: var(--serif); font-size: 19px; } .card-text { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mid2); } /* detail pages */ .hero-detail { padding-top: clamp(36px, 7vh, 80px); padding-bottom: clamp(36px, 6vh, 64px); } .detail-title { margin-top: 18px; font-size: clamp(48px, 8vw, 100px); line-height: 1; letter-spacing: -.02em; } .detail-tagline { margin: 20px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); color: var(--mid); } .detail-lede { margin: 22px 0 0; max-width: 56ch; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65; color: var(--body); } .sec-title { margin-top: 12px; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.02em; text-wrap: pretty; } .sec-lede { margin: 16px 0 0; max-width: 58ch; font-size: 16px; line-height: 1.65; color: var(--body); } /* detail mini feature cells */ .mini { border-top: 1px solid var(--hairline); padding-top: 10px; } .mini-h { font-family: var(--mono); font-size: 12px; } .mini p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mid2); } /* wattlas question sections */ .q-idx { font-family: var(--mono); font-size: 12px; color: var(--accent); } .q-title { margin-top: 8px; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.01em; } .q-question { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--mid); } .q-desc { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--mid2); } /* stockscore architecture flow */ .flow { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--mono); font-size: 12px; } .pill { border: 1px solid var(--hairline); border-radius: 6px; padding: 10px 14px; } .pill--accent { border-color: var(--accent); color: var(--accent); } .flow-arrow { color: var(--muted); } /* footer */ .site-footer { padding-top: 36px; padding-bottom: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: baseline; } .foot-note { font-family: var(--mono); font-size: 12px; color: var(--muted); } .foot-links { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--mono); font-size: 12px; } .flink { color: var(--link-muted); text-decoration: none; } .flink--accent-h:hover { color: var(--accent); } .flink--ink-h:hover { color: var(--ink); } .flink--live { color: var(--accent); } .flink--live:hover { text-decoration: underline; } /* legal pages (Impressum, Datenschutz) */ .legal { max-width: 74ch; padding-top: clamp(20px, 4vh, 40px); } .legal h1 { font-size: clamp(36px, 5vw, 60px); letter-spacing: -.02em; } .legal h2 { margin-top: 44px; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.01em; } .legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--body); } .legal ul { padding-left: 20px; } .legal li { margin-top: 4px; } .legal a { color: var(--ink); } .legal a:hover { color: var(--link-muted); } .legal dl { margin: 12px 0 0; } .legal dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 16px; } .legal dd { margin: 4px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); } .updated { font-family: var(--mono); font-size: 12px; color: var(--muted); } /* consent banner โ€” rendered by consent.js only when analytics is possible. Accept and Decline are equal-prominence (same size/shape) per ยง 25 TDDDG. */ .consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 1px solid var(--hairline); box-shadow: 0 -8px 24px -18px rgba(27, 24, 19, .4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px clamp(20px, 5vw, 48px); } .consent-text { margin: 0; max-width: 64ch; font-size: 13.5px; line-height: 1.55; color: var(--body); } .consent-text a { color: var(--ink); } .consent-actions { display: flex; gap: 12px; flex-shrink: 0; } .consent-btn { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 10px 22px; border-radius: 999px; cursor: pointer; border: 1px solid var(--ink); } .consent-accept { background: var(--ink); color: var(--paper); } .consent-accept:hover { background: #000; } .consent-decline { background: transparent; color: var(--ink); } .consent-decline:hover { background: rgba(27, 24, 19, .06); } .consent-reopen { font-family: var(--mono); font-size: 12px; color: var(--link-muted); background: none; border: none; padding: 0; cursor: pointer; } .consent-reopen:hover { color: var(--ink); }