/* ========================================================================= Fahrschule Jungheinrich – Designsystem Grundlage: FeedLoop Design System FeedLoop ist scroll-optimiert und inhaltsorientiert: kompakte Abstände, hohe Inhaltsdichte, Lesbarkeit beim schnellen Durchscrollen. Für einen One-Pager, den man in einem Zug durchgeht, passt das. Regeln aus dem System, die hier gelten: · Karten einheitlich – gleiches Innenmass, gleicher Radius · keine schweren Schatten auf Karten, Trennung kommt über Rahmen · Beruehrflaechen mindestens 44px Aufbau: Ebene 1 Primitives – rohe Werte, nie direkt im Markup Ebene 2 Semantik – das, womit Komponenten arbeiten ========================================================================= */ :root { /* --------------------------------------------------------------------- 1 · PRIMITIVES – Farbe Die Systemfarben sind die Ankerpunkte, die Skalen darum herum sind abgeleitet, damit Zustaende wie Hover und Flaechen sauber abgestuft werden koennen. --------------------------------------------------------------------- */ /* Marke: das Weinrot aus dem Logo der Fahrschule (#7E2B33). Derselbe Ton liegt als Strichzeichnung auf der Flanke des Fahrzeugs. Die Skala ist darum herum gebaut; die 700er Stufe ist der Originalton und traegt Schaltflaechen und Links. */ --brand-50: #fbf4f5; --brand-100: #f6e8e9; --brand-200: #ecced1; --brand-300: #dba9af; --brand-400: #c47d86; --brand-500: #a85560; --brand-600: #8e3a45; --brand-700: #7e2b33; /* Originalton aus dem Logo */ --brand-800: #6a2530; --brand-900: #58212a; --brand-950: #330f15; /* Secondary #6B7280 – Metadaten, Nebeninformationen */ --gray-0: #ffffff; /* Surface */ --gray-50: #faf9f9; /* Background */ --gray-100: #f4f2f2; --gray-200: #e7e4e4; --gray-300: #d3cfcf; --gray-400: #9d9797; --gray-500: #6f6a6a; /* Nebeninformationen */ --gray-600: #524e4e; --gray-700: #3d3a3a; --gray-800: #272424; --gray-900: #141212; --gray-950: #0b0909; /* Systemzustaende */ --success-500: #15803d; --warning-500: #b45309; --error-500: #7f1d1d; /* dunkler als die Marke, sonst nicht unterscheidbar */ --info-500: #1d4ed8; /* --------------------------------------------------------------------- 2 · PRIMITIVES – Typografie Kompakte Zeilenabstaende, wie sie ein Feed braucht: eng genug fuer Dichte, weit genug zum Lesen. --------------------------------------------------------------------- */ --font-display: "Outfit", system-ui, -apple-system, sans-serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace; /* Gegenüber der HTML-Vorlage eine Spur größer, damit die Texte auch auf Distanz gut lesbar bleiben (Kundenwunsch). */ --text-xs: 0.8125rem; --leading-xs: 1.4; --text-sm: 0.9375rem; --leading-sm: 1.45; --text-base: 1.0625rem; --leading-base: 1.55; --text-lg: 1.1875rem; --leading-lg: 1.5; --text-xl: 1.3125rem; --leading-xl: 1.45; --text-2xl: 1.5625rem; --leading-2xl: 1.33; --text-3xl: 1.9375rem; --leading-3xl: 1.25; --text-4xl: 2.3125rem; --leading-4xl: 1.18; --text-5xl: 3.0625rem; --leading-5xl: 1.1; --display-sm: clamp(1.625rem, 1.1vw + 1.35rem, 2rem); --display-md: clamp(1.875rem, 1.9vw + 1.45rem, 2.625rem); --display-lg: clamp(2.25rem, 3.2vw + 1.5rem, 3.625rem); --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.018em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-widest: 0.08em; /* --------------------------------------------------------------------- 3 · PRIMITIVES – Abstand Bewusst knapper als üblich. FeedLoop setzt auf Dichte, damit beim Scrollen mehr Inhalt in den Blick kommt. --------------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-section: clamp(2.75rem, 5vw, 4.5rem); /* --------------------------------------------------------------------- 4 · PRIMITIVES – Radius, Schatten, Beruehrflaeche --------------------------------------------------------------------- */ --radius-sign: 4px; /* Kuerzel, Marken */ --radius-input: 8px; /* Schaltflaechen, Felder */ --radius-card: 12px; /* alle Karten, einheitlich */ --radius-panel: 12px; /* auch grosse Flaechen, damit nichts ausschert */ --radius-full: 9999px; /* Flach halten. Karten trennen sich ueber ihren Rahmen, nicht ueber Tiefe. */ --shadow-xs: 0 1px 2px 0 rgb(3 7 18 / 0.04); --shadow-sm: 0 1px 2px 0 rgb(3 7 18 / 0.05); --shadow-md: 0 2px 4px -1px rgb(3 7 18 / 0.06); --shadow-lg: 0 6px 12px -4px rgb(3 7 18 / 0.08); --border-width: 1px; /* Mindestmass fuer alles, was angetippt wird */ --tap-target: 44px; /* --------------------------------------------------------------------- 5 · PRIMITIVES – Bewegung --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --duration-slower: 560ms; /* --------------------------------------------------------------------- 6 · PRIMITIVES – Layout --------------------------------------------------------------------- */ --container-sm: 38rem; --container-md: 46rem; --container-lg: 60rem; --container-xl: 72rem; --gutter: clamp(1rem, 3.5vw, 2rem); --header-height: 5.75rem; /* Buehne: Hoehe und Himmelfarbe. Der Kopfbereich endet in genau diesem Ton, dadurch gibt es zwischen Text und Szene keine Kante. */ --scene-height: clamp(300px, 34vw, 460px); --car-width: clamp(300px, 40vw, 560px); --sky: #a8c6d8; --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-overlay: 50; /* ===================================================================== 7 · SEMANTISCHE TOKENS ===================================================================== */ --bg-page: var(--gray-50); /* Feed-Hintergrund */ --bg-surface: var(--gray-0); /* Karten */ --bg-subtle: var(--gray-50); --bg-muted: var(--gray-100); --bg-inverse: var(--gray-900); --bg-brand: var(--brand-700); --bg-brand-subtle: var(--brand-50); --bg-accent: var(--brand-700); --bg-accent-subtle: var(--brand-50); --fg-default: var(--gray-900); --fg-muted: var(--gray-500); /* Metadaten */ --fg-subtle: var(--gray-400); --fg-brand: var(--brand-700); --fg-accent: var(--brand-800); --fg-on-brand: var(--gray-0); --fg-on-accent: var(--gray-0); --fg-on-inverse: var(--gray-300); --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400); --border-brand: var(--brand-200); --ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--brand-500); } /* Dunkler Abschnitt als Klasse, nicht global. */ .theme-dark { --bg-page: var(--gray-900); --bg-surface: var(--gray-800); --bg-subtle: var(--gray-800); --bg-muted: var(--gray-700); --bg-brand-subtle: var(--brand-950); --bg-accent-subtle: var(--brand-950); --fg-default: var(--gray-0); --fg-muted: var(--gray-400); --fg-subtle: var(--gray-500); --fg-brand: var(--brand-300); --fg-accent: var(--brand-300); --border-subtle: rgb(255 255 255 / 0.10); --border-default: rgb(255 255 255 / 0.16); --border-strong: rgb(255 255 255 / 0.26); --ring: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--brand-400); }