/* ========================================================================== A&L SERVICE & TECHNOLOGY — TYPOGRAFIE typography.css Montserrat für Überschriften, Inter für Fließtext. Klare Hierarchien, ruhige Zeilen, hohe Lesbarkeit. Schriften werden im via Google Fonts (mit Preconnect) geladen; der /assets/fonts-Ordner ist für spätere Selbst-Hostung vorbereitet. ========================================================================== */ html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--c-text); font-feature-settings: "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* -------------------------------------------------------------------------- Überschriften — Montserrat -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: var(--font-head); color: var(--c-text-strong); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--ls-tight); margin: 0 0 0.6em; text-wrap: balance; } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2, .h2 { font-size: var(--fs-h2); } h3, .h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; } h4, .h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; } h5 { font-size: 1rem; font-weight: 600; letter-spacing: 0; } h6 { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; } .display { font-family: var(--font-head); font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.025em; color: var(--c-text-strong); margin: 0; text-wrap: balance; } /* -------------------------------------------------------------------------- Fließtext & Inline -------------------------------------------------------------------------- */ p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-gray-600); font-weight: 400; } .text-measure { max-width: 62ch; } .text-measure-sm{ max-width: 48ch; } strong, b { font-weight: 600; color: var(--c-text-strong); } em, i { font-style: italic; } small { font-size: var(--fs-small); } a { color: var(--c-accent-700); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--c-accent-600); } /* Textlinks im Fließtext dezent unterstreichen */ .prose a { color: var(--c-accent-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--c-accent-line); } .prose a:hover { text-decoration-color: var(--c-accent); } ul, ol { margin: 0 0 1.15em; padding-left: 1.25rem; } li { margin-bottom: 0.4em; } li::marker { color: var(--c-accent); } blockquote { margin: 0 0 1.5em; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 3px solid var(--c-accent); font-size: var(--fs-lead); line-height: 1.55; color: var(--c-text-strong); font-weight: 500; } blockquote cite { display: block; margin-top: 0.75rem; font-size: var(--fs-small); font-weight: 400; font-style: normal; color: var(--c-text-muted); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; background: var(--c-gray-100); padding: 0.1em 0.4em; border: 1px solid var(--c-border); } hr { border: 0; border-top: var(--rule); margin: var(--sp-7) 0; } /* -------------------------------------------------------------------------- Typo-Hilfsklassen -------------------------------------------------------------------------- */ /* Eyebrow / Kicker — kleine Versal-Zeile über Headlines */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-accent-700); margin-bottom: 1.1rem; } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--c-accent); display: inline-block; } .eyebrow--plain::before { display: none; } .eyebrow--invert { color: var(--c-accent); } .eyebrow--center { justify-content: center; } .text-strong { color: var(--c-text-strong); } .text-muted { color: var(--c-text-muted); } .text-accent { color: var(--c-accent-700); } .text-invert { color: var(--c-text-invert); } .text-upper { text-transform: uppercase; letter-spacing: var(--ls-wide); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .font-head { font-family: var(--font-head); } /* Selektion */ ::selection { background: var(--c-accent); color: #fff; }