/* ============================================================ GRÄF Sanitär- und Heizungstechnik — Design Tokens Farben aus dem Logo: Blau (primär), Rot + Gelb (Akzente) Stil: kräftig & markant, große Typo, technisch-vertrauenswürdig ============================================================ */ /* Poppins wird lokal geladen — siehe styles/fonts.css (DSGVO: kein Google-CDN) */ :root { /* ---- Marke: Blau (primär) ---- */ --blue-900: #1c2150; --blue-800: #262c63; --blue-700: #3e437f; /* Logo-Blau dunkel */ --blue-600: #494c9b; /* Logo-Blau hell */ --blue-500: #5b5fc0; --blue-300: #a9abdb; --blue-100: #e7e8f6; --blue-50: #f3f4fb; /* ---- Akzent: Rot ---- */ --red-700: #9c1c24; /* Logo-Rot dunkel */ --red-600: #e41d21; /* Logo-Rot */ --red-500: #f23a3e; --red-100: #fde3e3; /* ---- Akzent: Gelb/Gold ---- */ --gold-800: #715216; --gold-700: #946e19; --gold-500: #fcc027; /* Logo-Gelb */ --gold-300: #ffd76a; --gold-100: #fff3d4; /* ---- Neutrale (leicht blaustichig, technisch-clean) ---- */ --ink: #16182b; /* fast-schwarz, blaustichig */ --ink-soft: #3a3d52; --muted: #6b6f86; --line: #e3e4ee; --line-soft: #eef0f6; --surface: #ffffff; --surface-2: #f5f6fb; /* heller Bandhintergrund */ --surface-3: #eceef6; --cream: #fbfbfe; /* ---- Semantisch ---- */ --primary: var(--blue-700); --primary-strong: var(--blue-900); --accent: var(--red-600); --accent-2: var(--gold-500); --on-primary: #ffffff; /* ---- Typografie ---- */ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Poppins', system-ui, sans-serif; --fs-eyebrow: 0.78rem; --fs-body: 1.0625rem; --fs-lead: 1.3125rem; /* fluide Display-Größen (--hscale wird per Tweak gesetzt) */ --hscale: 1; --fs-h3: clamp(1.3rem, 1.0rem + 1.2vw, 1.75rem); --fs-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); --fs-h1: calc(clamp(2.6rem, 1.2rem + 5.2vw, 5.25rem) * var(--hscale)); --fs-display: calc(clamp(3.2rem, 1.0rem + 8vw, 7.5rem) * var(--hscale)); /* ---- Radius ---- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* ---- Schatten (blaustichig, weich) ---- */ --sh-xs: 0 1px 2px rgba(22,24,43,.06); --sh-sm: 0 2px 8px rgba(22,24,43,.07); --sh-md: 0 10px 30px rgba(22,24,43,.10); --sh-lg: 0 26px 60px rgba(22,24,43,.16); --sh-blue: 0 18px 44px rgba(62,67,127,.28); /* ---- Layout ---- */ --maxw: 1240px; --gutter: clamp(20px, 4vw, 56px); --nav-h: 78px; /* ---- Motion ---- */ --ease: cubic-bezier(.32,.72,.24,1); --ease-ui: cubic-bezier(.4,0,.2,1); } /* ============================================================ LOOK-VARIANTEN (per data-look am ) — umgeschaltet via Tweaks A = Blockstark (Default) · B = Editorial · C = Diagonal/Technik ============================================================ */ html[data-look="editorial"] { --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-sm: 4px; --r-pill: 4px; } html[data-look="diagonal"] { --primary: var(--blue-900); } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.62; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: var(--gold-300); color: var(--ink); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } /* ---- Utility ---- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); } .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--accent); border-radius: 2px; } .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); font-weight: 400; } .section { padding-block: clamp(56px, 8vw, 116px); } /* Markante diagonale Akzent-Linien (Logo-DNA) */ .slash-accent { display: inline-block; width: 56px; height: 14px; background: linear-gradient(110deg, var(--blue-600) 0 33%, transparent 33% 38%, var(--red-600) 38% 71%, transparent 71% 76%, var(--gold-500) 76% 100%); transform: skewX(-22deg); border-radius: 2px; } /* keyboard focus */ :focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: 3px; } /* Reveal-Animation */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(18px); } .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } }