/* ============================================================================ DEUTSCHE TIEFGARAGENREINIGUNG (DTRG) — Design-System (Design-Tokens) B2B · Hausverwaltungen / WEG / Facility- & Property-Management · bundesweit ---------------------------------------------------------------------------- Marken-Gefühl: industriell · kraftvoll-sachlich · beweisbar sauber · seriös Marken-Anker (aus echten Fotos + Vorgabe): · Beton-Grau #3A3E42 — Werkstoff der Branche (Stahlbeton/Stellplatz) · Asphalt #17191C — dunkle Tiefgaragen-Tiefe (Hero-Bühne, Footer) · Hi-Vis-Orange #EA5B0C — PPE / Sicherheits-Signal → CTA & Akzent · Clean-Teal #2E8C9E — der "Nachher/sauber"-Zustand (echo Firmen-Blau- Spirale + Tennant-Maschinen-Türkis) · Weiß / Clean-Concrete — der überwiegend HELLE, "saubere" Seitengrund Leitmotiv: Hi-Vis-„Warnstreifen" (Diagonal-Hatch) + Squeegee/Abzieher-Kante für den Vorher/Nachher-„Reinigungs-Wisch". REGELN (Second-Brain): - Keine hardcodierten Farb-/Spacing-/Font-Werte im Builder — nur var(). - Merksatz 17: Text auf Akzentflächen NIE hart #fff → --on-orange (DUNKEL, Safety-Sign-Look) · --on-teal · --on-deep. - Merksatz 18: alle calc()/clamp()/min()/max() haben Leerzeichen um + / −. - Merksatz 20: Fonts self-hosten (WOFF2 lokal, @font-face) — NIE googleapis. - Keine globale h1/h2/h3-Farbe im Builder (Hero-Text separat erzwingen). - Keine relativen url() in Custom-Properties (löst gegen Stylesheet auf). ============================================================================ */ /* --------------------------------------------------------------------------- 0 · SELF-HOSTED FONTS (Merksatz 20 — DSGVO, kein CDN/@import von Google) Der Builder legt die WOFF2 unter site/assets/fonts/ ab (latin + latin-ext, damit ä/ö/ü/ß korrekt). Bezug: google-webfonts-helper. Nur die hier gelisteten Schnitte einbinden — kein zusätzliches Gewicht nachladen. Headline: Oswald 400 / 500 / 600 / 700 (condensed, industriell) Body/UI : Barlow 400 / 500 / 600 / 700 (technisch, DE-Umlaut/ß ✓) Pfad-Konvention (relativ zur finalen CSS, deshalb NICHT als Token): url("../fonts/oswald-500-latin.woff2") usw. Beispiel-Face (der Builder ergänzt alle Schnitte + latin-ext analog): @font-face{ font-family:"Oswald"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/oswald-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2013-2014,U+2212; } @font-face{ font-family:"Barlow"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/barlow-400-latin.woff2") format("woff2"); } --------------------------------------------------------------------------- */ :root { /* --------------------------------------------------------------------------- 1 · MARKENFARBEN --------------------------------------------------------------------------- */ /* BETON / ASPHALT / STAHL — die neutrale Industrie-Skala (dunkel → hell) */ --asphalt-950: #0F1113; /* tiefste Tiefe (Hero-Vignette, deepest overlay) */ --asphalt-900: #17191C; /* ASPHALT-Anker — Hero-Bühne, Footer, Kontrastblock */ --asphalt-800: #202327; /* dunkle Karten auf tiefem Grund */ --concrete-700: #2C2F34; /* Fließtext-dunkel, dunkle Sektionsfläche */ --concrete-600: #3A3E42; /* BETON-GRAU-Anker — dunkle Karten / Squeegee-Bar */ --concrete-500: #4C5157; /* Stahl-Mittelton */ --concrete-400: #6A6F76; /* gedämpfter Text auf hell (Meta) */ --concrete-300: #8A9098; /* Stahl-Grau — Hairlines dunkel, Icons */ --concrete-200: #B4BAC0; /* helle Stahllinie */ --concrete-150: #D0D5D9; /* Border warm-neutral auf hell */ --concrete-100: #E4E7EA; /* helle abgesetzte Sektion / Karten-BG */ --concrete-075: #EDEFF1; /* zarter Grau-Hauch */ --concrete-050: #F4F6F7; /* HAUPT-Seitengrund (clean concrete white) */ --paper-000: #FFFFFF; /* reines Weiß — Karten, „sauber"-Flächen */ /* HI-VIS-ORANGE — Sicherheits-/PPE-Signal → Primär-Akzent, CTA, „Wisch-Griff" */ --orange-800: #A83D06; --orange-700: #C64A08; /* CTA-Hover / gepresst */ --orange-600: #EA5B0C; /* HI-VIS-Anker — Primär-CTA-Fläche (on=--on-orange) */ --orange-500: #F26D1F; /* helleres Signal / Hover-Glint */ --orange-300: #F7A968; /* weiche Orange-Tönung */ --orange-100: #FBE7D6; /* Chip-/Badge-BG orange, sehr hell */ /* CLEAN-TEAL — der „Nachher/sauber"-Zustand (echo Logo-Blauspirale + Tennant) */ --teal-900: #103C46; /* tiefes Teal — Text-Akzent auf hell */ --teal-800: #16505C; --teal-700: #1F6675; /* TEAL-CTA-Fläche (heller Text, --on-teal) AA ✓ */ --teal-600: #257A8C; --teal-500: #2E8C9E; /* CLEAN-TEAL-Anker — Akzentlinien, „sauber"-Glow */ --teal-400: #56A9B8; /* aktive Nav-Unterstriche, Icons */ --teal-300: #8FC7D1; /* weiche Teal-Fläche / Glas-Tönung */ --teal-100: #DCEEF1; /* „Clean-Wash" Sektions-BG (der saubere Zustand) */ --teal-050: #EFF7F9; /* zartester Teal-Hauch */ /* FUNKTIONALE STATUS-FARBEN (sparsam) */ --alert-600: #C6361B; /* Hochwasser/Notfall-Rot — NUR Notfall-Kontext */ --alert-100: #F8DED8; /* Notfall-Tint */ --ok-600: #2E7D52; /* Erfolgs-/Freigabe-Grün (Formular success) */ /* INK (Text auf hell) — kühles fast-Schwarz mit Asphalt-Unterton, kein #000 */ --ink-900: #17191C; /* stärkste Headlines / Text auf hell */ --ink-700: #2C2F34; /* Standard-Fließtext */ --ink-500: #565C63; /* Sekundärtext, Captions */ --ink-400: #7A8087; /* dezente Meta, Platzhalter */ --ink-line: #D8DCDF; /* neutrale Hairline auf hell */ /* --------------------------------------------------------------------------- 2 · SEMANTISCHE ZUWEISUNGEN (der Builder nutzt NUR diese) --------------------------------------------------------------------------- */ --bg-page: var(--concrete-050); /* Haupt-Hintergrund (hell, „sauber") */ --bg-alt: var(--paper-000); /* alternierende helle Sektion */ --bg-muted: var(--concrete-100); /* leicht abgesetzte Grau-Sektion */ --bg-clean-wash: var(--teal-100); /* Teal-Wash-Sektion (Nachher/Werterhalt)*/ --bg-deep: var(--asphalt-900); /* dunkle Bühne (Hero, Footer, CTA-Band) */ --bg-deep-2: var(--concrete-600); /* dunkle Karten auf tiefem Grund */ --bg-card: var(--paper-000); /* Standard-Karte */ --bg-card-dark: var(--asphalt-800); /* Karte auf dunkler Bühne */ --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-meta: var(--ink-400); --text-on-deep: #EDEFF1; /* Text auf --bg-deep */ --text-on-deep-muted: #A7ADB4; /* gedämpfter Text auf Asphalt */ --brand-primary: var(--orange-600); /* Hi-Vis — CTA, Aktiv, Signal */ --brand-clean: var(--teal-500); /* „sauber/nachher" — Akzent, Hairlines */ --brand-clean-cta: var(--teal-700); /* teal Sekundär-CTA-Fläche (on=white) */ --brand-steel: var(--concrete-300); /* Text-auf-Akzent (Merksatz 17 — NIE hart #fff hardcoden) */ --on-orange: #17191C; /* DUNKLER Ink auf Hi-Vis (Safety-Sign, */ /* Kontrast ~6:1 AA ✓) — Warnschild-Look */ --on-teal: #FFFFFF; /* heller Text NUR auf teal-700+ (AA ✓) */ --on-deep: #EDEFF1; /* Text auf Asphalt-Bühne */ --on-alert: #FFFFFF; /* Text auf Notfall-Rot */ /* Links / Fokus / State */ --link: var(--teal-700); --link-hover: var(--orange-600); --focus-ring: var(--orange-600); /* deutlich sichtbarer Fokus */ --focus-ring-deep: var(--teal-400); /* Fokus auf dunkler Bühne */ --sh-focus: 0 0 0 3px rgba(234, 91, 12, 0.40); --sh-focus-deep: 0 0 0 3px rgba(86, 169, 184, 0.55); /* --------------------------------------------------------------------------- 3 · LEITMOTIV-GRADIENTEN & TEXTUREN (industriell — als BG nutzbar) Keine url() hier (Merksatz css-custom-property-url) — nur CSS-Gradients. --------------------------------------------------------------------------- */ /* Hi-Vis-„Warnstreifen" (Baustellen-Hatch) — Sektions-Trenner / Notfall / Griff. SPARSAM einsetzen: schmale Hairline (4–8px) oder Squeegee-Griff, nie Fläche. */ --hazard-stripes: repeating-linear-gradient(-45deg, var(--orange-600) 0, var(--orange-600) 11px, var(--asphalt-900) 11px, var(--asphalt-900) 22px); /* Dezente Warnstreifen (Orange auf Beton, für helle Sektionskante) */ --hazard-stripes-soft: repeating-linear-gradient(-45deg, var(--orange-600) 0, var(--orange-600) 10px, var(--concrete-150) 10px, var(--concrete-150) 20px); /* Hero-Lese-Scrim: Asphalt von unten/links, damit Overlay-Text über dem realen Foto AA-sicher bleibt (nie opacity-gegatet — Merksatz 8). */ --hero-scrim: linear-gradient(180deg, rgba(15,17,19,0.20) 0%, rgba(15,17,19,0.00) 32%, rgba(15,17,19,0.55) 78%, rgba(15,17,19,0.86) 100%); --hero-scrim-side: linear-gradient(90deg, rgba(15,17,19,0.78) 0%, rgba(15,17,19,0.30) 46%, rgba(15,17,19,0.00) 72%); /* „Nass-glanz"-Highlight (Nachher-Kante / Clean-Reflex auf versiegeltem Boden) */ --wet-sheen: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.00) 40%, rgba(174,220,228,0.30) 47%, rgba(255,255,255,0.10) 53%, transparent 64%); /* --------------------------------------------------------------------------- 4 · TYPOGRAFIE (Oswald condensed / Barlow — im Ledger neu) --------------------------------------------------------------------------- */ --font-display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif; --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif; --fw-body: 400; --fw-medium: 500; /* Labels, Eyebrows, betonter Body */ --fw-semibold: 600; /* Buttons, Sub-Headings, Preise/Metriken */ --fw-bold: 700; /* Zahlen-Metriken, seltene starke Betonung */ --fw-head: 600; /* Oswald Standard-Headline */ --fw-head-strong: 700; /* Oswald Hero-H1 / Metrik-Zahlen */ /* Fluid Type Scale — Oswald ist condensed → große Displaygrößen erlaubt. ACHTUNG: alle +/− mit Leerzeichen (Merksatz 18). */ --fs-display: clamp(2.9rem, 1.85rem + 5vw, 6.5rem); /* Hero-H1 */ --fs-h1: clamp(2.3rem, 1.7rem + 3vw, 4rem); /* Seiten-H1 */ --fs-h2: clamp(1.85rem, 1.4rem + 2.2vw, 3rem); /* Sektions-Headline */ --fs-h3: clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem); /* Karten-Titel */ --fs-h4: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem); /* Sub-Titel */ --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); /* Intro-Lead */ --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* Fließtext */ --fs-small: clamp(0.85rem, 0.82rem + 0.12vw, 0.94rem); /* Meta / Captions */ --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.14vw, 0.82rem); /* Eyebrow (Caps) */ --fs-metric: clamp(2.6rem, 1.7rem + 3.6vw, 4.6rem); /* Count-up-Zahlen */ --lh-tight: 1.03; /* Hero / große Oswald-Headlines */ --lh-snug: 1.12; /* H2/H3 */ --lh-normal: 1.6; /* Fließtext */ --lh-relaxed: 1.72; /* längere Absätze / Fachtext */ --ls-hero: 0.005em; /* Oswald-Caps minimal geöffnet */ --ls-head: 0.01em; --ls-normal: 0em; --ls-eyebrow: 0.24em; /* Eyebrow gesperrt (Caps) */ --ls-caps: 0.09em; /* Button-/Label-Caps */ --ls-num: 0.01em; /* tabellarische Metrik-Zahlen */ /* --------------------------------------------------------------------------- 5 · SPACING-SCALE (8px-Basis, fluid für Sektionsränder) --------------------------------------------------------------------------- */ --sp-3xs: 0.25rem; /* 4px */ --sp-2xs: 0.5rem; /* 8px */ --sp-xs: 0.75rem; /* 12px */ --sp-sm: 1rem; /* 16px */ --sp-md: 1.5rem; /* 24px */ --sp-lg: 2rem; /* 32px */ --sp-xl: 3rem; /* 48px */ --sp-2xl: 4rem; /* 64px */ --sp-3xl: 6rem; /* 96px */ --sp-4xl: 8rem; /* 128px */ /* fluide Sektions-Polsterung (Leerzeichen um + Pflicht) */ --section-py: clamp(4rem, 2.6rem + 5.6vw, 8.5rem); --section-py-tight: clamp(2.75rem, 2rem + 3.2vw, 4.75rem); --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem); /* seitl. Rand */ --stack: clamp(1rem, 0.85rem + 0.7vw, 1.6rem); /* Vertikalabstand */ /* --------------------------------------------------------------------------- 6 · CONTAINER / LAYOUT Wide-Stufe gegen "leer auf 3440" (Merksatz 1): Content gebunden, Effekt-/Slider-Bühne darf breiter, Header an Content-max koppeln. --------------------------------------------------------------------------- */ --content-max: 1240px; /* Standard-Lesebreite */ --content-narrow: 760px; /* Fachtext-Spalte (Werterhalt/FAQ) */ --content-wide: 1440px; /* Leistungs-Grids / breite Sektionen */ --stage-max: 1720px; /* Vorher/Nachher-Slider-Bühne (gedeckelt!) */ /* --------------------------------------------------------------------------- 7 · RADIUS (industriell = knapp/technisch, keine verspielten Rundungen) --------------------------------------------------------------------------- */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px; /* Chips / Status-Badges / kleine Pills */ /* --------------------------------------------------------------------------- 8 · SCHATTEN (kühl-getönt / hart-technisch, „schweres Gerät" — nicht warm) --------------------------------------------------------------------------- */ --sh-xs: 0 1px 2px rgba(15, 17, 19, 0.10); --sh-sm: 0 2px 6px rgba(15, 17, 19, 0.10), 0 1px 2px rgba(15, 17, 19, 0.08); --sh-md: 0 8px 22px rgba(15, 17, 19, 0.14), 0 2px 6px rgba(15, 17, 19, 0.10); --sh-lg: 0 18px 44px rgba(15, 17, 19, 0.20), 0 6px 14px rgba(15, 17, 19, 0.12); --sh-xl: 0 30px 70px rgba(15, 17, 19, 0.30), 0 10px 22px rgba(15, 17, 19, 0.16); --sh-card-hover: 0 22px 54px rgba(15, 17, 19, 0.24), 0 8px 16px rgba(15, 17, 19, 0.14); /* Squeegee-/Wisch-Kante: harter Schlagschatten der Abzieher-Bar über Vorher */ --sh-wipe: 6px 0 24px rgba(15, 17, 19, 0.42); /* --------------------------------------------------------------------------- 9 · HAIRLINES / BORDERS --------------------------------------------------------------------------- */ --border-hair: 1px solid var(--ink-line); --border-steel: 1px solid var(--concrete-200); --border-strong: 2px solid var(--concrete-600); --border-teal: 1px solid var(--teal-300); --border-orange: 2px solid var(--orange-600); --border-deep: 1px solid rgba(255, 255, 255, 0.14); /* --------------------------------------------------------------------------- 10 · EASING (kraftvoll-sachlich: firm/mechanisch, KEIN verspieltes Overshoot) --------------------------------------------------------------------------- */ --ease-out-firm: cubic-bezier(0.16, 0.84, 0.28, 1); /* Standard-Reveal */ --ease-in-out-firm: cubic-bezier(0.65, 0.05, 0.28, 1); --ease-wipe: cubic-bezier(0.42, 0.00, 0.20, 1); /* Squeegee-Abzug */ --ease-settle: cubic-bezier(0.22, 1, 0.36, 1); /* Count-up-Settle */ --dur-fast: 160ms; --dur-base: 300ms; --dur-slow: 520ms; --dur-reveal: 680ms; --dur-wipe: 900ms; /* Auto-Demo des Reinigungs-Wischs */ /* --------------------------------------------------------------------------- 11 · Z-INDEX-SKALA --------------------------------------------------------------------------- */ --z-base: 0; --z-wipe: 5; /* Nachher-Layer + Squeegee-Griff */ --z-raise: 10; --z-sticky: 50; /* mobile Sticky-Hotline-Bar */ --z-header: 100; --z-overlay: 200; --z-modal: 300; /* Referenz-Lightbox */ /* --------------------------------------------------------------------------- 12 · EFFEKT-VARIABLEN (vom Builder/JS beschrieben) --------------------------------------------------------------------------- */ --header-h: 74px; /* per JS mit realer Höhe (inkl. scrolled) überschrieben */ --wipe-pos: 50%; /* Reinigungs-Wisch: 0%=nur Vorher · 100%=nur Nachher */ --parallax-bg: 0.12; /* Hero: Deckenrohre/Beton (langsam) */ --parallax-mid: 0.28; /* Hero: Maschine/Mitteltiefe */ --parallax-fg: 0.45; /* Hero: vorderer Bodenglanz */ --grain-opacity: 0.045; /* feTurbulence-Grain gegen KI-Glätte (nur KI-Hero) */ } /* =========================================================================== DUNKLE BÜHNE — Token-Overrides für [data-surface="deep"] (Hero, Footer, CTA-Band, Hochwasser-Notfall). Damit der Builder auf Asphalt nie hart #fff/#000 schreibt und Kontraste in Dark stimmen. =========================================================================== */ [data-surface="deep"] { --text-strong: #F4F6F7; --text-body: #D3D7DB; --text-muted: var(--text-on-deep-muted); --bg-card: var(--asphalt-800); --link: var(--teal-400); --link-hover: var(--orange-500); --focus-ring: var(--teal-400); --sh-focus: var(--sh-focus-deep); --border-hair: 1px solid rgba(255, 255, 255, 0.14); --ink-line: rgba(255, 255, 255, 0.14); --border-steel:1px solid rgba(255, 255, 255, 0.18); } /* =========================================================================== NOTFALL-KONTEXT — Hochwasser-Seite: Rot wird funktional dominanter (Ton dreht auf Dringlichkeit; sparsam, nur hier). =========================================================================== */ [data-context="notfall"] { --brand-primary: var(--alert-600); /* Hotline-CTA = Notfall-Rot */ --on-orange: #FFFFFF; /* falls Orange-CTA hier genutzt */ --focus-ring: var(--alert-600); } /* =========================================================================== REDUCED MOTION — globale Effekt-Dämpfung (Builder erweitert pro Effekt). Der Reinigungs-Wisch bleibt bedienbar (Drag), nur Auto-Scrub/Parallax aus. =========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --dur-wipe: 1ms; --parallax-bg: 0; --parallax-mid: 0; --parallax-fg: 0; } }