/* ==========================================================================
Refrivo Design-System – Grundwerte (Tokens)
--------------------------------------------------------------------------
Einbinden auf jeder Seite (vor seitenspezifischem CSS):
Hell/Dunkel: (setzt der Header, Standard = Systemeinstellung)
Bereich: (Standard = refrivo)
Alle Variablen beginnen mit --rf-, alle Bausteine mit .rf- → keine Kollision mit altem CSS.
========================================================================== */
/* ── Schriften (lokal, SIL Open Font License – siehe /lizenzen) ─────────────── */
@font-face {
font-family: "Inter";
src: url("/assets/fonts/inter-variabel.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("/assets/fonts/plus-jakarta-sans-variabel.ttf") format("truetype");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* Space Mono: nur noch für ältere, nicht umgestellte Seiten (Zahlen/Labels) */
@font-face {
font-family: "Space Mono";
src: url("/assets/fonts/SpaceMono-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("/assets/fonts/SpaceMono-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
/* ── Schrift ─────────────────────────────────────────────────────────────── */
--rf-schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--rf-schrift-titel: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
--rf-schrift-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
/* Größen (fließend zwischen Handy und Desktop) */
--rf-text-xs: 0.75rem;
--rf-text-sm: 0.875rem;
--rf-text-md: 1rem;
--rf-text-lg: 1.125rem;
--rf-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
--rf-titel-sm: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
--rf-titel-md: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
--rf-titel-lg: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
--rf-titel-xl: clamp(2.75rem, 1.8rem + 4.6vw, 5rem);
--rf-zeile-eng: 1.15;
--rf-zeile-titel: 1.2;
--rf-zeile-text: 1.6;
/* ── Abstände (4er-Raster) ───────────────────────────────────────────────── */
--rf-abstand-1: 4px; --rf-abstand-2: 8px; --rf-abstand-3: 12px; --rf-abstand-4: 16px;
--rf-abstand-5: 20px; --rf-abstand-6: 24px; --rf-abstand-8: 32px; --rf-abstand-10: 40px;
--rf-abstand-12: 48px; --rf-abstand-16: 64px; --rf-abstand-20: 80px; --rf-abstand-24: 96px;
--rf-sektion: clamp(56px, 4rem + 4vw, 120px); /* vertikaler Abstand zwischen Seitenabschnitten */
--rf-breite: 1200px; /* max. Inhaltsbreite */
--rf-breite-text: 720px; /* max. Breite für Fließtext */
--rf-seitenrand: clamp(16px, 4vw, 32px); /* seitlicher Rand */
/* ── Formen ──────────────────────────────────────────────────────────────── */
--rf-radius-sm: 8px;
--rf-radius-md: 12px;
--rf-radius-lg: 18px;
--rf-radius-xl: 26px;
--rf-radius-rund: 999px;
/* ── Bewegung ────────────────────────────────────────────────────────────── */
--rf-dauer-kurz: 120ms;
--rf-dauer: 200ms;
--rf-dauer-lang: 360ms;
--rf-kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
/* ── Zustandsfarben (in allen Bereichen gleich) ──────────────────────────── */
--rf-erfolg: #15803d; --rf-erfolg-weich: #dcfce7;
--rf-warnung: #b45309; --rf-warnung-weich: #fef3c7;
--rf-fehler: #c2410c; --rf-fehler-weich: #ffedd5;
--rf-gefahr: #b91c1c; --rf-gefahr-weich: #fee2e2;
--rf-info: #1d4ed8; --rf-info-weich: #dbeafe;
/* ── Neutrale Flächen – HELL ─────────────────────────────────────────────── */
--rf-neutral-hg: #f6f7f5;
--rf-neutral-flaeche: #ffffff;
--rf-neutral-flaeche-2: #f0f2ef;
--rf-neutral-rand: #e2e6e1;
--rf-neutral-rand-stark: #cdd3cc;
--rf-neutral-text: #111a15;
--rf-neutral-text-2: #46534c;
--rf-neutral-text-3: #6f7c75;
--rf-schatten-farbe: 20 30 25;
--rf-farbschema: light;
/* ── Bereich: REFRIVO (Standard) ─────────────────────────────────────────── */
--rf-akzent: #1a8a56; /* Knöpfe, Links – AA-Kontrast auf Weiß */
--rf-akzent-stark: #146f45; /* Hover/aktiv */
--rf-akzent-hell: #2ea46f; /* Markengrün für Flächen/Grafik */
--rf-akzent-weich: #e3f4ea; /* zarte Hinterlegung */
--rf-akzent-auf: #ffffff; /* Text auf Akzentfläche */
--rf-akzent-verlauf: linear-gradient(135deg, #8fdc9f 0%, #2ea46f 55%, #1a8a56 100%);
--rf-tint: 0%; /* wie stark die neutralen Flächen eingefärbt werden */
}
/* ── Neutrale Flächen – DUNKEL ────────────────────────────────────────────── */
[data-theme="dark"] {
--rf-neutral-hg: #0a0e0c;
--rf-neutral-flaeche: #111714;
--rf-neutral-flaeche-2: #18201c;
--rf-neutral-rand: #232d28;
--rf-neutral-rand-stark: #33403a;
--rf-neutral-text: #ecf2ee;
--rf-neutral-text-2: #a6b3ac;
--rf-neutral-text-3: #74827b;
--rf-schatten-farbe: 0 0 0;
--rf-farbschema: dark;
--rf-erfolg: #4ade80; --rf-erfolg-weich: rgba(74, 222, 128, 0.12);
--rf-warnung: #fbbf24; --rf-warnung-weich: rgba(251, 191, 36, 0.12);
--rf-fehler: #fb923c; --rf-fehler-weich: rgba(251, 146, 60, 0.12);
--rf-gefahr: #f87171; --rf-gefahr-weich: rgba(248, 113, 113, 0.12);
--rf-info: #60a5fa; --rf-info-weich: rgba(96, 165, 250, 0.12);
--rf-akzent: #3fbf82;
--rf-akzent-stark: #62d39b;
--rf-akzent-hell: #2ea46f;
--rf-akzent-weich: rgba(63, 191, 130, 0.12);
--rf-akzent-auf: #04140c;
--rf-tint: 3%;
}
/* ── Bereich: FITNESS – Blau (Fitness-Logo) ───────────────────────────────── */
[data-bereich="fitness"] {
--rf-akzent: #1f5fdc;
--rf-akzent-stark: #184bb0;
--rf-akzent-hell: #3b82f6;
--rf-akzent-weich: #e3ecfd;
--rf-akzent-auf: #ffffff;
--rf-akzent-verlauf: linear-gradient(135deg, #0b1e46 0%, #1f5fdc 60%, #4d8dff 100%);
}
[data-theme="dark"][data-bereich="fitness"] {
--rf-neutral-hg: #070b14;
--rf-neutral-flaeche: #0d1424;
--rf-neutral-flaeche-2: #131c30;
--rf-neutral-rand: #1d2942;
--rf-neutral-rand-stark: #2b3a5a;
--rf-akzent: #4d8dff;
--rf-akzent-stark: #79a9ff;
--rf-akzent-hell: #3b82f6;
--rf-akzent-weich: rgba(77, 141, 255, 0.14);
--rf-akzent-auf: #050b18;
}
/* ── Bereich: KI (R.A.I.) – Cyan mit Verlauf zu Grün (R.A.I.-Logo) ────────── */
[data-bereich="ki"] {
--rf-akzent: #0b7f9e;
--rf-akzent-stark: #08667f;
--rf-akzent-hell: #22b8d9;
--rf-akzent-weich: #ddf4f9;
--rf-akzent-auf: #ffffff;
--rf-akzent-verlauf: linear-gradient(135deg, #8fd3ff 0%, #4fd1e6 45%, #34c38f 100%);
}
[data-theme="dark"][data-bereich="ki"] {
--rf-neutral-hg: #061013;
--rf-neutral-flaeche: #0c181c;
--rf-neutral-flaeche-2: #122227;
--rf-neutral-rand: #1b3138;
--rf-neutral-rand-stark: #284650;
--rf-akzent: #4fd1e6;
--rf-akzent-stark: #7fe0ef;
--rf-akzent-hell: #22b8d9;
--rf-akzent-weich: rgba(79, 209, 230, 0.13);
--rf-akzent-auf: #03161b;
}
/* ── Bereich: BUSINESS – Anthrazit mit Bernstein ──────────────────────────── */
[data-bereich="business"] {
--rf-akzent: #1f2329; /* Hauptknöpfe in Anthrazit */
--rf-akzent-stark: #0f1216;
--rf-akzent-hell: #c98a1b; /* Bernstein für Hervorhebungen */
--rf-akzent-weich: #f7efdf;
--rf-akzent-auf: #ffffff;
--rf-akzent-verlauf: linear-gradient(135deg, #2b3038 0%, #1f2329 55%, #c98a1b 140%);
--rf-neutral-hg: #f6f6f4;
}
[data-theme="dark"][data-bereich="business"] {
--rf-neutral-hg: #0c0d0f;
--rf-neutral-flaeche: #141619;
--rf-neutral-flaeche-2: #1b1e22;
--rf-neutral-rand: #272b31;
--rf-neutral-rand-stark: #363c44;
--rf-akzent: #e2b04a;
--rf-akzent-stark: #f0c56e;
--rf-akzent-hell: #e2b04a;
--rf-akzent-weich: rgba(226, 176, 74, 0.12);
--rf-akzent-auf: #1a1306;
}
/* ── Bereich: LEGAL – ruhiges Schiefergrau ────────────────────────────────── */
[data-bereich="legal"] {
--rf-akzent: #3f4c5c;
--rf-akzent-stark: #2c3744;
--rf-akzent-hell: #64748b;
--rf-akzent-weich: #eceff3;
--rf-akzent-auf: #ffffff;
--rf-akzent-verlauf: linear-gradient(135deg, #94a3b8 0%, #475569 100%);
}
[data-theme="dark"][data-bereich="legal"] {
--rf-akzent: #a8b5c6;
--rf-akzent-stark: #c6d0dc;
--rf-akzent-hell: #94a3b8;
--rf-akzent-weich: rgba(168, 181, 198, 0.12);
--rf-akzent-auf: #0b0f14;
}
/* ── Abgeleitete Werte (für alle Bereiche) ────────────────────────────────── */
:root, [data-theme], [data-bereich] {
--rf-hg: color-mix(in oklab, var(--rf-neutral-hg), var(--rf-akzent) var(--rf-tint));
--rf-flaeche: var(--rf-neutral-flaeche);
--rf-flaeche-2: var(--rf-neutral-flaeche-2);
--rf-rand: var(--rf-neutral-rand);
--rf-rand-stark: var(--rf-neutral-rand-stark);
--rf-text: var(--rf-neutral-text);
--rf-text-2: var(--rf-neutral-text-2);
--rf-text-3: var(--rf-neutral-text-3);
--rf-fokus: 0 0 0 3px color-mix(in oklab, var(--rf-akzent) 35%, transparent);
--rf-schatten-sm: 0 1px 2px rgb(var(--rf-schatten-farbe) / 0.06), 0 1px 1px rgb(var(--rf-schatten-farbe) / 0.04);
--rf-schatten-md: 0 4px 12px rgb(var(--rf-schatten-farbe) / 0.08), 0 1px 3px rgb(var(--rf-schatten-farbe) / 0.06);
--rf-schatten-lg: 0 18px 40px -12px rgb(var(--rf-schatten-farbe) / 0.22), 0 4px 10px rgb(var(--rf-schatten-farbe) / 0.06);
color-scheme: var(--rf-farbschema);
}
@media (prefers-reduced-motion: reduce) {
:root { --rf-dauer-kurz: 0ms; --rf-dauer: 0ms; --rf-dauer-lang: 0ms; }
}