/* ============================================================ Ing. Lechner Manfred — Colors & Type Sourced from the 2011 "Lechner Bau GmbH" logo and the 2022 "Ing. Lechner Manfred Ingenieurbüro" wordmark. ============================================================ */ /* Webfonts — substitutions (flagged in README): Helvetica Neue Condensed Bold / Akzidenz-Grotesk are the closest match to the original printed wordmarks. We use Barlow Condensed + Inter from Google Fonts until brand-supplied font files arrive. */ /* Self-hosted fonts (no requests to Google). Source: Google Fonts, SIL Open Font License. */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-ext-0.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-1.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-ext-2.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-3.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-ext-4.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-5.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-ext-6.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-7.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-ext-8.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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-9.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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-latin-ext-10.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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-latin-11.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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-latin-ext-10.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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-latin-11.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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-latin-ext-10.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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-latin-11.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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/inter-latin-ext-10.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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/inter-latin-11.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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-ext-12.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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-13.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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-ext-12.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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-13.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; } :root { /* ── Brand colors ───────────────────────────────────────── */ /* The signature red sampled from the 2011 letterhead block. */ --lb-red-700: #8E1F2F; /* deep, on dark photos */ --lb-red-600: #A82A3A; /* primary brand red */ --lb-red-500: #BF3346; /* hover / lighter accents */ --lb-red-100: #F4E3E6; /* tint background */ /* The black block behind the "LB" mark. */ --lb-ink-900: #111111; /* near-black, headings on light */ --lb-ink-800: #1E1E1E; /* surface dark */ --lb-ink-700: #2A2A2A; /* Warm-paper neutrals — printed-blueprint feel. */ --lb-paper-50: #FAFAF7; /* page background */ --lb-paper-100: #F2F1EC; /* surface / card */ --lb-paper-200: #E5E3DC; /* dividers */ --lb-paper-300: #C9C7BF; /* muted borders */ --lb-paper-400: #9A988F; /* low-contrast text */ --lb-paper-500: #6E6C66; /* secondary text */ --lb-paper-700: #3A3A36; /* body text */ /* Concrete grey from the original letterhead margins. */ --lb-concrete-300: #D9D9D9; --lb-concrete-400: #BFBFBF; --lb-concrete-500: #A6A6A6; /* Functional / semantic — engineering signal palette. */ --lb-signal-yellow: #F2C200; /* hi-vis accent (rare) */ --lb-signal-green: #2F8F4A; /* KlimaHaus / certified */ --lb-signal-amber: #D9821A; /* Steuerbonus / fiscal accent */ --lb-signal-blue: #1F4E79; /* blueprint / technical */ /* ── Semantic surfaces ──────────────────────────────────── */ --bg: var(--lb-paper-50); --bg-elev: #FFFFFF; --bg-inverse: var(--lb-ink-900); --surface: var(--lb-paper-100); --surface-2: var(--lb-paper-200); --border: var(--lb-paper-200); --border-strong:var(--lb-paper-300); --divider: var(--lb-paper-200); /* ── Semantic text ──────────────────────────────────────── */ --fg-1: var(--lb-ink-900); --fg-2: var(--lb-paper-700); --fg-3: var(--lb-paper-500); --fg-mute: var(--lb-paper-400); --fg-inverse: var(--lb-paper-50); --fg-accent: var(--lb-red-600); --link: var(--lb-red-600); --link-hover: var(--lb-red-700); /* ── Type families ──────────────────────────────────────── */ --font-display: "Barlow Condensed", "Helvetica Neue Condensed", "Oswald", "Arial Narrow", sans-serif; --font-body: "Inter", "Helvetica Neue", "Helvetica", Arial, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; /* ── Type scale (modular 1.25, anchored at 16px) ────────── */ --fs-display: clamp(56px, 8vw, 128px); --fs-hero: clamp(40px, 5.5vw, 80px); --fs-h1: clamp(34px, 3.6vw, 52px); --fs-h2: clamp(28px, 2.6vw, 38px); --fs-h3: 22px; --fs-h4: 18px; --fs-eyebrow: 13px; --fs-body: 16px; --fs-body-lg: 18px; --fs-small: 14px; --fs-micro: 12px; --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.55; --lh-loose: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-widest: 0.18em; /* eyebrow uppercase */ /* ── Spacing scale (4-pt grid) ──────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ── Radii ──────────────────────────────────────────────── */ --radius-0: 0; /* default — engineering / squared */ --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; /* maximum; we don't pill anything */ /* ── Borders ────────────────────────────────────────────── */ --border-w: 1px; --border-w-strong: 2px; --border-w-block: 6px; /* the "block of red" accent rule */ /* ── Shadows (sparse; engineering = flat) ───────────────── */ --shadow-sm: 0 1px 2px rgba(17,17,17,0.06); --shadow-md: 0 6px 18px -10px rgba(17,17,17,0.18); --shadow-lg: 0 24px 48px -20px rgba(17,17,17,0.22); /* ── Motion ─────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 600ms; --dur-reveal: 900ms; /* ── Layout ─────────────────────────────────────────────── */ --container: 1280px; --container-text: 720px; --gutter: clamp(20px, 4vw, 64px); } /* ============================================================ Semantic element styles ============================================================ */ html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; } body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-normal); } /* Display / headings — condensed sans, tight tracking, ALL CAPS variant available via .h-caps. Mirrors the wordmark on the 2011 letterhead. */ h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-family: var(--font-display); color: var(--fg-1); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); font-weight: 700; margin: 0; text-wrap: balance; } h1, .h1 { font-size: var(--fs-h1); font-weight: 800; } h2, .h2 { font-size: var(--fs-h2); font-weight: 700; } h3, .h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0; } h4, .h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; text-transform: uppercase; letter-spacing: var(--tracking-wide); } .display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; } .hero { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 800; line-height: 1.0; letter-spacing: -0.015em; } .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-accent); display: inline-flex; align-items: center; gap: var(--sp-2); } .eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; display: inline-block; } p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); max-width: 65ch; text-wrap: pretty; } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); } .small { font-size: var(--fs-small); color: var(--fg-3); } .micro { font-size: var(--fs-micro); color: var(--fg-mute); letter-spacing: var(--tracking-wide); text-transform: uppercase; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--link-hover); } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.94em; background: var(--surface); padding: 1px 6px; border-radius: var(--radius-1); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; } ::selection { background: var(--lb-red-600); color: #fff; }