/* ============================================================ ARTprotect — Design-Tokens (Drei-Ebenen-Modell) Aus Tailwind-Config + Brand-Guidelines „Farbschema 2" abgeleitet. Stand: 2026-07-20 (Akzent- + Kategorie-Farben ergänzt) Ebene 1 PRIMITIVE → reine Werte, wertneutral benannt Ebene 2 SEMANTIC → Bedeutung/Rolle (hier änderst du "was ist primär") Ebene 3 COMPONENT → pro Bauteil (Button, Card, Nav, Footer …) Regel: höhere Ebenen zeigen immer auf die darunter — nie auf feste Werte. ============================================================ FARB-EINSATZ (aus den Brand-Guidelines): - Heller Modus ist Standard — freundlich, einladend, „Fröhlichkeit". - Rot (#960018) bleibt die Leitfarbe (Logo, CTAs, Headlines). - Die drei Akzente Salbei / Gold / Altrosa: SPARSAM, nie alle drei gleichzeitig. - Goldgelb NIE auf Weiß (unleserlich) — nur auf Dunkel oder als heller Tint-Grund. - Primär-Dunkel (#6B0011) nur für Kontrast/Hover, nie als große Fläche. - Farbe kommt v. a. über helle TINT-Flächen (…-tint) rein, nicht über Vollton. ============================================================ */ :root { /* ---------- Ebene 1 · PRIMITIVE ------------------------- */ /* Rot (Marke) */ --p-red-600: #960018; /* Dunkelrot — Primär */ --p-red-800: #6b0011; /* Dunkel-Rot — Kontrast/Hover (Brand-korrigiert) */ --p-red-050: #fdf0f2; /* heller Rot-Tint */ /* Akzente (Marke) */ --p-sage-500: #79aea3; /* Salbei-Türkis — Sekundär */ --p-sage-050: #eef5f3; /* heller Salbei-Tint */ --p-gold-500: #ffbe0b; /* Goldgelb — Tertiär (nicht auf Weiß) */ --p-gold-050: #fff4cc; /* heller Gold-Tint */ --p-rose-400: #dc9596; /* Altrosa — Tertiär */ --p-rose-050: #fbeef0; /* heller Altrosa-Tint */ /* Neutrale */ --p-ink-900: #1a1a1a; /* Haupttext */ --p-ink-700: #4a4a4a; /* Sekundärtext */ --p-ink-500: #767676; /* gedämpft (≥4,5:1, aus UI-Check angehoben) */ --p-ink-200: #e8e8e8; /* Trennlinien/Borders */ --p-offwhite: #f9f7f5; /* warmes Off-White (Brand-Standardfläche) */ --p-ink-050: #f8f9fa; /* kühles Off (nur wo bewusst kühl gewünscht) */ --p-cream: #fdf9f5; /* warmes Off-White (Alt) */ --p-white: #ffffff; --p-font-heading: 'Montserrat', 'Helvetica Neue', sans-serif; --p-font-body: '"Source Serif 4"', Georgia, serif; --p-space-wrap: 1360px; --p-radius-pill: 9999px; --p-radius-lg: 0.75rem; --p-radius-xl: 1rem; /* ---------- Ebene 2 · SEMANTIC ------------------------- */ --color-primary: var(--p-red-600); /* CTAs, Akzente, aktive Links */ --color-primary-hover: var(--p-red-800); --color-primary-tint: var(--p-red-050); /* Akzente — sparsam einsetzen, nie alle drei zusammen */ --color-secondary: var(--p-sage-500); /* Salbei: Subheadings, Tags, ruhige Akzente */ --color-secondary-tint: var(--p-sage-050); /* Salbei-Fläche (Sektionen, Badges) */ --color-accent-warm: var(--p-rose-400); /* Altrosa: weiche Warm-Akzente, Captions */ --color-accent-warm-tint: var(--p-rose-050); --color-accent-highlight: var(--p-gold-500); /* Gold: Highlights/Zitate — NUR auf Dunkel */ --color-accent-highlight-tint: var(--p-gold-050); /* Gold-Fläche für helle Highlight-Boxen */ --color-text: var(--p-ink-900); --color-text-muted: var(--p-ink-700); --color-text-subtle: var(--p-ink-500); --color-border: var(--p-ink-200); --color-surface: var(--p-white); /* Standard-Hintergrund */ --color-surface-alt: var(--p-offwhite); /* warme abgesetzte Sektionen (Brand) */ --color-surface-cool: var(--p-ink-050); /* falls bewusst kühl gewünscht */ --color-rating: var(--p-gold-500); /* Sterne = Goldgelb (Marke) */ --font-heading: var(--p-font-heading); --font-body: var(--p-font-body); --layout-max: var(--p-space-wrap); /* ---------- Ebene 3 · COMPONENT ------------------------ */ /* Button (primär) */ --btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-hover); --btn-primary-text: var(--color-surface); --btn-radius: var(--p-radius-pill); /* Card */ --card-bg: var(--color-surface); --card-border: var(--color-border); --card-accent: var(--color-primary); --card-radius: var(--p-radius-lg); /* Navigation */ --nav-bg: var(--color-surface); --nav-border: var(--color-border); --nav-link: var(--color-text-muted); --nav-link-hover: var(--color-primary); /* Footer */ --footer-bg: var(--color-text); --footer-text: rgba(255, 255, 255, 0.6); --footer-heading: var(--color-surface); /* Badge / Eyebrow — rot (Standard) */ --badge-bg: var(--color-primary-tint); --badge-text: var(--color-primary); /* Tag — Salbei (sekundär, für ruhige Kategorien/Chips) */ --tag-bg: var(--color-secondary-tint); --tag-text: #2f5b52; /* dunkles Salbei für Kontrast auf Tint */ /* Highlight-Box (Zitat/Fun Fact) — Gold nur auf dunklem Grund */ --highlight-bg: var(--color-text); /* dunkle Box */ --highlight-accent: var(--color-accent-highlight); /* Warm-Akzent-Fläche (Altrosa) — z. B. sanfte Sektion, Captions */ --accent-warm-bg: var(--color-accent-warm-tint); --accent-warm-text: #8a3f42; /* dunkles Altrosa für Kontrast auf Tint */ /* ---------- Kategorie-Farben (farblicher Faden je Angebot) ---------- Mieten = Rot · Kaufen = Gelb · Leasen = Türkis Je Kategorie: base (Fläche/Akzent, echte Farbe) · tint (helle Fläche) · ink (Text auf Weiß/Tint) · on (Text AUF der Grundfarbe, z. B. Button-Label). Buttons: bg = base, Schrift = on (Gold/Türkis dunkel, Rot weiß). */ --cat-miete-base: var(--p-red-600); --cat-miete-tint: var(--p-red-050); --cat-miete-ink: #960018; --cat-miete-on: #ffffff; --cat-kaufen-base: var(--p-gold-500); --cat-kaufen-tint: var(--p-gold-050); --cat-kaufen-ink: #1a1a1a; --cat-kaufen-on: #1a1a1a; /* echtes Gold als Fläche, dunkle Schrift — kein muddy Amber */ --cat-leasen-base: var(--p-sage-500); --cat-leasen-tint: var(--p-sage-050); --cat-leasen-ink: #2f5b52; --cat-leasen-on: #1a1a1a; } /* Kategorie-Kontext: Klasse auf Seite/Sektion setzen — Komponenten lesen dann generisch --category / --category-tint / --category-ink. Beispiel: oder
*/ .cat-miete { --category: var(--cat-miete-base); --category-tint: var(--cat-miete-tint); --category-ink: var(--cat-miete-ink); --category-on: var(--cat-miete-on); } .cat-kaufen { --category: var(--cat-kaufen-base); --category-tint: var(--cat-kaufen-tint); --category-ink: var(--cat-kaufen-ink); --category-on: var(--cat-kaufen-on); } .cat-leasen { --category: var(--cat-leasen-base); --category-tint: var(--cat-leasen-tint); --category-ink: var(--cat-leasen-ink); --category-on: var(--cat-leasen-on); } /* ============================================================ Farbe fröhlich einsetzen — Praxis ------------------------------------------------------------ - Sektionen abwechselnd auf `--color-surface` (weiß) und einem hellen Tint (`--color-secondary-tint` Salbei / `--accent-warm-bg` Altrosa) — das bringt Wärme, ohne die Marke zu überladen. - Kategorie-Chips / Tags: `--tag-bg` + `--tag-text` (Salbei). - Zitate / Fun Facts: dunkle Box `--highlight-bg` mit Gold-Akzent `--highlight-accent` (Gold NIE auf Weiß). - Rot bleibt die Leitfarbe für CTAs & Headlines; Akzente ergänzen, nie alle drei gleichzeitig auf einer Seite. Tailwind-Anbindung (bestehende ap-Klassen zeigen auf die Variablen): colors: { ap: { red:'var(--color-primary)', dark:'var(--color-primary-hover)', text:'var(--color-text)', mid:'var(--color-text-muted)', line:'var(--color-border)', off:'var(--color-surface-alt)', sage:'var(--color-secondary)', gold:'var(--color-accent-highlight)', rose:'var(--color-accent-warm)', }} ============================================================ */