/* ========================================================================== responzai.eu - Redesign Design-System - @font-face + :root-Tokens: global (rein additiv, ueberschreibt nichts). - Komponenten: rz-Praefix -> keine Kollision mit bestehendem globalem CSS. - Typografie/Flaeche: auf body.home-redesign gescoped (Startseite zuerst). Reihenfolge im : design-system.css NACH styles.css laden. ========================================================================== */ /* --- Schriften lokal (Datenschutz: kein Google-CDN) ----------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/newsreader-400.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/newsreader-500.woff2") format("woff2"); } /* --- Tokens --------------------------------------------------------------- */ :root { --rz-bg: #FBFAF7; --rz-surface: #FFFFFF; --rz-surface-alt: #F4F2EC; --rz-ink: #16202B; --rz-text: #3A4452; --rz-text-muted: #5E6772; --rz-text-faint: #828A93; --rz-primary: #1C3D5A; --rz-primary-dark: #142C42; --rz-primary-soft: #EDF1F5; --rz-success: #2E6B52; --rz-success-soft: #E9F1EC; --rz-success-line: #CFE3D6; --rz-line: #ECEAE3; --rz-line-strong: #E2DFD7; --rz-font-display: "Newsreader", Georgia, "Times New Roman", serif; --rz-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rz-h1: clamp(2rem, 1.4rem + 2.6vw, 2.875rem); --rz-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); --rz-h3: 1.25rem; --rz-body: 1.0625rem; --rz-sm: 0.875rem; --rz-xs: 0.8125rem; --rz-sp-1: 0.25rem; --rz-sp-2: 0.5rem; --rz-sp-3: 0.75rem; --rz-sp-4: 1rem; --rz-sp-5: 1.5rem; --rz-sp-6: 2rem; --rz-sp-7: 3rem; --rz-sp-8: 4rem; --rz-sp-9: 6rem; --rz-radius-md: 8px; --rz-radius-lg: 12px; --rz-radius-pill: 999px; --rz-shadow-card: 0 1px 3px rgba(22,32,43,.06), 0 1px 2px rgba(22,32,43,.04); --rz-container: 1120px; --rz-container-narrow: 720px; --rz-focus: 0 0 0 3px rgba(28,61,90,.35); --rz-transition: 150ms ease; } /* --- Icons (global, harmlos: eigener Klassenname) ------------------------- */ .rz-icon { display: inline-block; width: 1.25rem; height: 1.25rem; color: var(--rz-primary); flex-shrink: 0; vertical-align: middle; } .rz-icon--sm { width: 1rem; height: 1rem; } .rz-icon--lg { width: 1.75rem; height: 1.75rem; } .rz-icon--success { color: var(--rz-success); } .rz-icon--muted { color: var(--rz-text-muted); } /* ========================================================================== Ab hier: nur Startseite (body.home-redesign) ========================================================================== */ body.home-redesign { background: var(--rz-bg); } .home-redesign #main { color: var(--rz-text); font-family: var(--rz-font-body); font-size: var(--rz-body); line-height: 1.65; } /* Typografie nur im Hauptinhalt der Startseite */ .home-redesign #main h1, .home-redesign #main h2, .home-redesign #main h3 { font-family: var(--rz-font-display); color: var(--rz-ink); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; } .home-redesign #main h1 { font-size: var(--rz-h1); } .home-redesign #main h2 { font-size: var(--rz-h2); line-height: 1.3; } .home-redesign #main h3 { font-size: var(--rz-h3); } .home-redesign #main p { color: var(--rz-text); } /* --- Layout-Helfer -------------------------------------------------------- */ .rz-container { width: 100%; max-width: var(--rz-container); margin-inline: auto; padding-inline: var(--rz-sp-5); } .rz-container--narrow { max-width: var(--rz-container-narrow); } .rz-section { padding-block: var(--rz-sp-8); } .rz-section--alt { background: var(--rz-surface-alt); } .rz-lead { font-size: 1.1875rem; color: var(--rz-text-muted); max-width: 62ch; margin: 0 0 var(--rz-sp-5); } /* --- Buttons -------------------------------------------------------------- */ .rz-btn { display: inline-flex; align-items: center; gap: var(--rz-sp-2); font-family: var(--rz-font-body); font-size: var(--rz-body); font-weight: 500; line-height: 1; padding: 0.7em 1.2em; border-radius: var(--rz-radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--rz-transition), border-color var(--rz-transition), color var(--rz-transition); } .rz-btn--primary { background: var(--rz-primary); color: #fff; } .rz-btn--primary:hover { background: var(--rz-primary-dark); color: #fff; } .rz-btn--secondary { background: var(--rz-surface); color: var(--rz-primary); border-color: var(--rz-line-strong); } .rz-btn--secondary:hover { background: var(--rz-primary-soft); } .rz-btn .rz-icon { width: 1.1em; height: 1.1em; color: currentColor; } /* --- Badges --------------------------------------------------------------- */ .rz-badge { display: inline-flex; align-items: center; gap: var(--rz-sp-2); font-size: var(--rz-xs); font-weight: 500; padding: 0.3em 0.8em; border-radius: var(--rz-radius-pill); border: 1px solid var(--rz-line); color: var(--rz-text-muted); background: var(--rz-surface); } .rz-badge--evidence { color: var(--rz-success); background: var(--rz-success-soft); border-color: var(--rz-success-line); } .rz-badge--evidence .rz-icon { color: var(--rz-success); } /* --- Karten --------------------------------------------------------------- */ .rz-card { background: var(--rz-surface); border: 1px solid var(--rz-line); border-radius: var(--rz-radius-lg); padding: var(--rz-sp-5); box-shadow: var(--rz-shadow-card); display: flex; flex-direction: column; } .rz-card__icon { margin-bottom: var(--rz-sp-3); } .rz-card__title { font-family: var(--rz-font-display); font-size: var(--rz-h3); color: var(--rz-ink); margin: 0 0 var(--rz-sp-2); display: flex; align-items: center; gap: var(--rz-sp-2); flex-wrap: wrap; } .rz-card__text { color: var(--rz-text-muted); margin: 0 0 var(--rz-sp-4); } .rz-card__cta { margin-top: auto; display: flex; gap: var(--rz-sp-2); flex-wrap: wrap; padding-top: var(--rz-sp-3); } .rz-grid { display: grid; gap: var(--rz-sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* --- Hero ----------------------------------------------------------------- */ .rz-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--rz-sp-7); align-items: center; padding-block: var(--rz-sp-8) var(--rz-sp-7); } .rz-hero__eyebrow { margin-bottom: var(--rz-sp-4); } .rz-hero__title { font-size: var(--rz-h1); margin: 0 0 var(--rz-sp-4); max-width: 20ch; } .rz-hero__lead { font-size: 1.1875rem; color: var(--rz-text-muted); margin: 0 0 var(--rz-sp-5); max-width: 56ch; } .rz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rz-sp-3); margin-bottom: var(--rz-sp-5); } .rz-points { display: flex; flex-direction: column; gap: var(--rz-sp-2); padding: 0; margin: 0; } .rz-points li { display: flex; align-items: center; gap: var(--rz-sp-2); list-style: none; font-size: var(--rz-sm); color: var(--rz-text); } .rz-hero__note { margin: var(--rz-sp-4) 0 0; font-size: var(--rz-xs); color: var(--rz-text-faint); } @media (max-width: 860px) { .rz-hero { grid-template-columns: 1fr; gap: var(--rz-sp-6); padding-block: var(--rz-sp-7) var(--rz-sp-5); } .rz-hero__media { order: 2; } } /* --- Nachweis-Karte (Signatur) ------------------------------------------- */ .rz-evidence { background: var(--rz-surface); border: 1px solid var(--rz-line); border-radius: var(--rz-radius-lg); padding: var(--rz-sp-5); box-shadow: var(--rz-shadow-card); } .rz-evidence__head { display: flex; align-items: center; gap: var(--rz-sp-3); margin-bottom: var(--rz-sp-4); padding-bottom: var(--rz-sp-3); border-bottom: 1px solid var(--rz-line); } .rz-evidence__title { font-size: var(--rz-sm); font-weight: 500; color: var(--rz-ink); } .rz-evidence__sub { font-size: var(--rz-xs); color: var(--rz-text-faint); margin-top: 2px; } .rz-evidence__list { padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--rz-sp-3); } .rz-evidence__row { display: flex; align-items: flex-start; gap: var(--rz-sp-2); font-size: var(--rz-sm); color: var(--rz-text); list-style: none; } .rz-evidence__foot { border-top: 1px solid var(--rz-line); margin-top: var(--rz-sp-4); padding-top: var(--rz-sp-3); font-size: var(--rz-xs); color: var(--rz-text-faint); display: flex; align-items: center; gap: var(--rz-sp-2); } /* --- Sektionskopf --------------------------------------------------------- */ .rz-section__head { margin-bottom: var(--rz-sp-6); max-width: 62ch; } .rz-section__head .rz-lead { margin-bottom: 0; } /* --- Fokus (Startseite, falls global nicht greift) ----------------------- */ .home-redesign a:focus-visible, .rz-btn:focus-visible { outline: none; box-shadow: var(--rz-focus); border-radius: var(--rz-radius-md); } @media (prefers-reduced-motion: reduce) { .home-redesign *, .home-redesign *::before, .home-redesign *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } }