/* =========================================================================== Design-Token — meinautoverkauf.com Abgeleitet aus der Referenzseite morecars-academy.de (ausgelesen 17.08.2026). Erläuterung und Begründung der Werte: docs/design.md Regel: Farben, Schriftgrößen, Abstände, Radien und Schatten stehen ausschließlich hier. In base.css und components.css nur var(--…). =========================================================================== */ :root { /* Eine einzige, helle Darstellung — wie die Referenzseite. Kein Umschalter, keine Anpassung an die Systemeinstellung. `color-scheme: light` ist dabei Pflicht und nicht Beiwerk: ohne die Angabe färben Browser bei dunkler Systemeinstellung Eingabefelder, Auswahllisten und Rollbalken selbständig dunkel ein — mitten in einer hellen Seite. */ color-scheme: light; /* --- Grundflächen ------------------------------------------------------- Der Seitengrund ist nicht weiß, sondern ein sehr helles Blaugrau; Karten sitzen in Weiß darauf. Dieser Zwei-Ebenen-Aufbau trägt das ganze Layout. */ --c-bg: #f8fafc; --c-surface: #ffffff; --c-surface-alt: #eef1f5; --c-surface-invers: #2d3741; /* dunkle Abschnitte, Fuß */ --c-surface-invers-alt: #3b4753; /* abgesetzte Flächen auf dunklem Grund, etwa Badges. Deckend, damit der Kontrast berechenbar bleibt. */ /* --- Text --- */ --c-text: #1e293b; --c-text-strong: #2d3741; /* Überschriften */ --c-text-muted: #4b5563; --c-text-subtle: #6b7280; /* Bildunterschriften, Metazeilen. Nicht heller — das Grau der Vorlage (#9ca3af) erreicht auf dem Seitengrund nur 2,4:1 und ist für 13-px-Text unzulässig. */ --c-text-invers: #ffffff; --c-text-invers-muted: #c8ced6; /* deckend, nicht durchscheinend — sonst ist der Kontrast nicht mehr berechenbar */ /* --- Linien ------------------------------------------------------------- border trennt Flächen: Karten, Abschnitte, Tabellen border-strong Umrandung von Bedienelementen: Eingabefelder, Auswahlfelder, Schalter, umrandete Knöpfe. WCAG 1.4.11 verlangt dort 3:1 gegen die Nachbarfläche — das helle `--c-border` erreicht auf Weiß nur 1,2:1 und darf dafür nicht verwendet werden. */ --c-border: #e2e8f0; --c-border-strong: #64748b; --c-border-subtle: #f1f5f9; --c-border-invers: #8a95a3; /* Umrandung auf dunklem Grund. #64748b erreicht dort nur 2,5:1 und verfehlt die 3:1 aus 1.4.11. */ /* --- Akzent: Orange der Marke ------------------------------------------- accent Flächen ohne Text darauf, Icons, große Überschriftenwörter (ab 24 px fett — dort reichen 3:1) accent-strong Alles mit Text: Knöpfe mit weißer Schrift, Links, kleine Auszeichnungen. Nötig, weil das reine Markenorange auf Weiß nur 3,4:1 erreicht und damit unter 4,5:1 liegt. accent-soft 10-Prozent-Tönung für Badges und Hinterlegungen accent-ink kleiner Text auf accent-soft. Nötig, weil accent-strong auf der getönten Fläche nur 4,0:1 erreicht und damit unter 4,5:1 fällt — auf Weiß reicht es, auf der Tönung nicht. */ --c-accent: #e6641e; --c-accent-strong: #c2500f; --c-accent-hover: #a8430c; --c-accent-ink: #a8430c; --c-accent-soft: rgb(230 100 30 / 0.10); --c-accent-contrast: #ffffff; /* --- Zweitfarbe: Petrol, sparsam für Ruhepunkte und Hinweise --- */ --c-second: #3e9baf; --c-second-strong: #2c7688; --c-second-soft: rgb(62 155 175 / 0.10); /* --- Signalfarben, getrennt vom Akzent --- */ --c-success: #1f7a52; --c-warning: #9a5a0b; --c-danger: #b3261e; /* --- Schrift ------------------------------------------------------------ Die Referenzseite nutzt die Systemschrift, keine Webfont. Das wird übernommen: nichts zu laden, nichts zu lizenzieren, kein Textsprung. */ --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --f-display: var(--f-body); --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- Größenleiter, keine Zwischenwerte --- */ --fs-xs: 0.8125rem; /* 13 px Label, Metazeile */ --fs-sm: 0.875rem; /* 14 px Hilfetext, Fuß */ --fs-base: 1rem; /* 16 px Fließtext */ --fs-lg: 1.125rem; /* 18 px Vorspann */ --fs-xl: 1.375rem; /* 22 px h3 */ --fs-2xl: 1.75rem; /* 28 px h2 klein */ --fs-3xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem); /* h2 */ --fs-4xl: clamp(2rem, 1.1rem + 4vw, 3rem); /* h1 */ --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* h1 und h2, wie in der Referenz */ --lh-tight: 1.05; /* h1 */ --lh-head: 1.2; /* h2, h3 */ --lh-body: 1.65; --ls-tight: -0.025em; /* nur h1, entspricht -1,2 px bei 48 px */ /* --- Abstände, 4-px-Raster --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; /* Abstand zwischen Abschnitten */ /* --- Radien --- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 9999px; /* alle Knöpfe und Badges */ /* --- Schatten, sparsam --- */ --sh-sm: 0 1px 2px rgb(0 0 0 / 0.05); --sh-md: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); --sh-lg: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* nur das Bild im Kopfbereich */ /* --- Breiten --- */ /* Die Seite nutzt die volle Breite. Begrenzt wird nur zweierlei: der Rand, damit nichts am Bildschirmrand klebt, und der Lesetext, weil Zeilen über etwa 90 Zeichen beim Zurückspringen den Anschluss verlieren. */ --w-rand: clamp(1.25rem, 4vw, 5rem); /* Seitenrand, wächst mit dem Fenster */ --w-content: 120rem; /* 1920 px — greift erst auf sehr breiten Schirmen */ --w-wide: var(--w-content); --w-prose: 45rem; /* 720 px, nur für Fließtext: Beiträge und Rechtstexte */ /* --- Bewegung --- */ /* --- Zeichen ------------------------------------------------------------- Der Haken als Maske, nicht als Schriftzeichen: ein ✓ sieht je nach System anders aus und fehlt auf manchen ganz. Als Maske trägt er die Farbe des Elements und bleibt bei jeder Größe scharf. */ --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E"); --t-fast: 150ms; --t-base: 250ms; --t-slow: 400ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Bewusst keine Regel für `prefers-color-scheme: dark`. Die Seite hat eine Darstellung. Wer eine dunkle nachrüstet, muss jeden Wert dieser Datei doppeln und alle Kontraste erneut messen — das ist eine Entscheidung, kein Zusatz. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }