/* ================================================================== KredPal — Token (v342, 29.09.2026) Einzige Quelle fuer Farben, Schrift, Abstaende, Rundungen, Schatten, Bewegung und Ebenen. Geladen von allen Seiten der Webseite (vor kredpal.css) und vom Partnerbereich. Aus kredpal.css herausgeloest, Werte und Reihenfolge unveraendert. Bereichs-Abweichungen stehen im jeweiligen Bereich, klar benannt. ================================================================== */ :root{ /* Mockup-Skala (v164). Diese Werte gehoeren ausschliesslich den simulierten Handy-/App-Screens (qp-, qa-, qe-, qk-, bf-, bk-screen, bento-offer-*): Text, der nach App aussehen soll, nicht Lesetext. Bewusst getrennt von den Lesetext-Rollen weiter unten. Offener Punkt: 8.5–10px liegen unter jeder Lesbarkeitsgrenze — vertretbar nur, solange dort keine Information steht, die es ausschliesslich hier gibt. */ --mock-8-5: 8.5px; --mock-9-5: 9.5px; --mock-10: 10px; --mock-10-5: 10.5px; --mock-11: 11px; --mock-11-5: 11.5px; --mock-12: 12px; --mock-12-5: 12.5px; --mock-13: 13px; --mock-13-5: 13.5px; --mock-14: 14px; --mock-14-5: 14.5px; --mock-15: 15px; --mock-15-5: 15.5px; --mock-16: 16px; --mock-17: 17px; --mock-19: 19px; --mock-20: 20px; --mock-22: 22px; --mock-24: 24px; --mock-28: 28px; /* Ueberschriften-Skala mit clamp() — Phase 2 der Konsolidierung. --heading-hero ist responsiv: der Wert selbst aendert sich je Breakpoint (siehe die zwei @media-Bloecke direkt darunter), .hero-claim referenziert nur EINMAL var(--heading-hero) und muss dafuer in den Breakpoint-Regeln nicht mehr wiederholt werden. Alle anderen Werte sind wie bei den festen Groessen 1:1 uebernommen, noch nicht konsolidiert. */ --heading-hero: clamp(34px,4.75vw,68px); --heading-h2: clamp(28px,3vw,40px); --heading-h3: clamp(19px,1.6vw,22px); /* Mobile 17px, siehe @media nach :root (v159) */ /* Absichtlich (noch) nicht vereinheitlicht: gleicher Wertebereich 24–34px, aber unterschiedliche Wachstumsrate (2.3 vs. 3vw) fuer eine h3 und eine h2. Offene Frage an den Auftraggeber, ob das Absicht ist. */ --heading-stapel-h3: clamp(24px,2.3vw,34px); --heading-section-h2: clamp(24px,3vw,34px); --price-alt: clamp(30px,2.9vw,44px); --price-neu: clamp(72px,8.4vw,132px); --price-neu-suffix: clamp(14px,1.15vw,17px); --stat-zahl: clamp(120px,14vw,236px); --stat-zahl-suffix-scale: .30em; /* relativ zum Elternwert --stat-zahl, kein eigenstaendiger Wert */ /* Rollen-Skala fuer Lesetext, v157 (Schritt 1 von Option B). Jede Rolle traegt ihr Responsiv-Verhalten selbst: caption/xs/small/ button/body/input sind konstant, lead schrumpft auf Mobile um 1px, heading-hero-sub ist dreistufig (siehe @media direkt nach :root). Die Zahlen-Tokens darueber (--mock-N) sind die getrennte Mockup-Skala. */ --text-caption: 12px; /* Eyebrows, Meta, Fussnoten — Untergrenze */ --text-xs: 13px; /* kompakter Nebentext in dichten Kacheln, Chat */ --text-small: 14px; /* Kleintext, Navigation, Hinweise */ --text-button: 15px; /* alle Buttons, konstant auch auf Touch */ --text-body: 16px; /* Fliesstext */ --text-lead: 17px; /* Einleitungs-/Lead-Text, Mobile 16px */ --text-input: 16px; /* Eingabefelder: unter 16px zoomt iOS Safari hinein */ --heading-hero-sub: 20px; --navy-dunkel:#1A2F43; --karte-grund:#1F3046; /* Mittelton des Bento-Kartenverlaufs; Flaechenfarbe der geoeffneten Box unter 640px */ /* dunkelstes Markenblau, aus der gelieferten Logodatei (logo-kred); Titel in den Handyscreens */ /* Startfarbe des Scroll-Balkens, JS faerbt beim Scrollen um */ /* Dunkler Section-Grund, genutzt von „KredPal auf einen Blick" und der Konfigurator-Section (v101). */ /* Grund der Section „So funktioniert KredPal für Sie und Ihre Kunden." — auch vom Footer genutzt, damit beide identisch sind. */ --bento-grund:radial-gradient(95% 75% at 16% -12%, rgba(96,141,196,.22) 0%, rgba(96,141,196,0) 62%), radial-gradient(70% 60% at 97% 6%, rgba(205,146,0,.12) 0%, rgba(205,146,0,0) 62%), #182536; --verlauf-navy:linear-gradient(165deg,#0E1824 0%,#182536 30%,#1F2E42 52%,#182536 74%,#0E1824 100%); /* Licht von links oben, das auf allen vier Kartenflaechen identisch liegt (v227). Stand vorher viermal ausgeschrieben im Bauteil. Wird VOR den Verlauf gelegt, die Reihenfolge im background-Kurzschreiben bestimmt, was oben liegt. */ --verlauf-licht:radial-gradient(115% 125% at 0% 0%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 58%); /* Kartenverlaeufe (v226). Vier Flaechen teilen dasselbe Muster: 152 Grad, drei Stopps bei 0/46/100 Prozent, hell nach dunkel. Vorher stand jeder Verlauf ausgeschrieben im Bauteil, die Mittelstopps teilweise als Token, die Aussenstopps roh — halb aufgeraeumt. Jetzt liegt der ganze Verlauf als eine Entscheidung an einer Stelle. */ --verlauf-dunkel:linear-gradient(152deg, #1F2E42 0%, #182536 46%, #0E1824 100%); --verlauf-blau:linear-gradient(152deg, #426695 0%, var(--accent-500) 46%, #304D71 100%); --verlauf-gold:linear-gradient(152deg, #DB9C00 0%, var(--gold-500) 46%, #B78200 100%); --verlauf-karte:linear-gradient(152deg, #253954 0%, var(--karte-grund) 46%, #162233 100%); /* Bewegung (v238). EINE Kurve fuer alle Zustandswechsel; vorher waren es sieben, davon 50x der Browser-Standard 'ease', der am Anfang beschleunigt und damit gegen die Ease-Out-Regel verstoesst. Ausnahmen, die bleiben und richtig sind: - linear fuer gleichmaessige Bewegung (Laufband, Fortschrittsbalken) - die Federkurve der Chat-Blase, siehe .chat-bubble Dauern in vier Stufen. 'sofort' liegt unter der alten 200-ms-Grenze: Druck-Rueckmeldung und springende Balken sollen sich unmittelbar anfuehlen. Die Bento-Detailansichten behalten ihre eigenen Dauern — dort sind die Unterschiede Choreografie, kein Wildwuchs. */ --kurve:cubic-bezier(.22,.61,.36,1); --dauer-sofort:120ms; /* Hover-Farbe, Druck, Balken */ --dauer-kurz:200ms; /* kleine Zustandswechsel */ --dauer:300ms; /* Blenden, Menue, Karten — der Normalfall */ --dauer-lang:450ms; /* grosse Flaechen, Modal */ /* Stapelebenen (v239). Fuenf globale Ebenen mit den bisherigen Zahlen; nichts wurde umsortiert. Werte 0 bis 3 innerhalb von Karten (Foto, Verlauf, Bildunterschrift) bleiben roh: das sind lokale Stapel, die nur untereinander konkurrieren. Wer ein neues Element einfuegt, waehlt eine Ebene statt eine Zahl zu raten. Reihenfolge (v240): Chat liegt UNTER der Kopfleiste, damit das offene Burger-Menue nie von der Chat-Blase verdeckt wird. Entscheidung des Auftraggebers. Der Chat bleibt ueber der Detailansicht. */ --ebene-detail:5; /* geoeffnete Bento-Detailansicht, aktive Karte */ --ebene-detail-visual:6; /* klebendes Visual in der Detailansicht */ --ebene-detail-zu:7; /* Schliessknopf, liegt ueber dem Visual */ --ebene-chat-teaser:39; /* Chat-Teaser, unter der Blase */ --ebene-chat:40; /* Chat-Blase und Panel, unter der Kopfleiste (v240) */ --ebene-kopf:50; /* klebende Kopfleiste */ --ebene-modal:1000; /* Bento-Karte als Vollbild-Modal unter 640px */ /* Layout (v243). Eine Inhaltsbreite fuer Kopfleiste, Sections, Hero-Text und Rechtstexte — vorher viermal 1120px ausgeschrieben. */ --breite-inhalt:1120px; /* Rundungen (v244). Sechs Rollen mit den bisherigen Werten — nichts gerundet, nichts vereinheitlicht, damit kein Pixel wandert. Die Mockup-Screens (calc(n*var(--u))) haben ihr eigenes System und bleiben draussen. Kandidaten fuer eine spaetere Vereinheitlichung stehen im Stand-Dokument (30px, 22px, 16px, 9px, 6px). */ --radius-kreis:50%; /* runde Knoepfe, Schrittnummern, Knoten */ --radius-karte:14px; /* Bento-Karten, Angebotskarte */ --radius-kachel:12px; /* kleine Kacheln, Banklogo-Kacheln */ --radius-flaeche:20px; /* grosse Flaechen: Rechner, Branchenkachel, Vergleich */ --radius-pille:23px; /* Accordion-Pillen, Laufzeit, Farbwaehler */ --radius-voll:9999px; /* Buttons als Pill, unabhaengig von der Hoehe */ /* Schatten (v245). Drei wiederkehrende Rollen mit den bisherigen Werten. Einzelstuecke (Bento-Karte mit Innenlicht, Fokusring, Banklogo) bleiben an ihrem Bauteil. */ --schatten-karte:0 20px 44px -28px rgba(16,24,40,.22); /* helle Karte auf hellem Grund */ --schatten-schweben:0 30px 60px -20px rgba(16,24,40,.3); /* fixe Elemente: Chat-Panel, Teaser */ --schatten-geraet:0 30px 56px -26px rgba(0,0,0,.75), 0 6px 16px -10px rgba(0,0,0,.45); /* Handy-/Angebotsscreens auf dunkel */ /* Zeilenabstaende (v246). Vorher 20 verschiedene Werte, gewachsen statt entschieden (1.6 neben 1.7, 1.12 neben 1.14 neben 1.15). Zehn Rollen, bewusst grosszuegig: die dominanten Werte bleiben exakt, nur sechs Einzelstellen verschieben sich um hoechstens 0.05 — unter einem Pixel bei Fliesstext, unter drei bei der Hero-Zeile. Mockup-Screens, technische Werte (0, normal, inherit) und die enge Kennzahl .86 bleiben roh. */ --zeile-hero:1.1; /* Hero-Claim, groesste Zeile (war 1.06/1.1) */ --zeile-titel:1.12; /* Section-Ueberschriften h2 */ --zeile-ueberschrift:1.15; /* h3 in Karten (war 1.14/1.15) */ --zeile-kompakt:1.2; /* Buttons, Bildunterschriften, Raten (war 1.2/1.25) */ --zeile-normal:1.3; /* kleine Ueberschriften, Pillen (war 1.3/1.35) */ --zeile-text-eng:1.45; /* Untertitel, dichte Absaetze (war 1.4/1.45) */ --zeile-text-mittel:1.5; /* Thementexte, Tabellen, Teaser */ --zeile-text:1.6; /* Fliesstext auf der Startseite */ --zeile-lesen:1.7; /* lange Rechtstexte, Listen */ --zeile-zahl:1; /* Preise, Kennzahlen (war 1/1.05) */ /* Abstaende — grobe Rollen (v247). Nur Werte ab 24px; die kleinen Gaps und Innenabstaende (<24px) bleiben roh, dort ist der Nutzen eines Tokens am geringsten. Angelegt wurden nur Stellen, die den Rollenwert heute EXAKT tragen. Bewusst abweichende Werte (Bento-Section 88px, FAQ-Fuss 110px) stehen weiter roh am Bauteil, siehe Stand-Dokument. --abstand-rand und --abstand-section werden unter 640px kleiner gesetzt, siehe @media nach :root. */ --abstand-rand:32px; /* seitlicher Seitenrand */ --abstand-section:80px; /* Section oben/unten */ --abstand-section-gross:96px; /* betonte Sections, Abstand zwischen Sections */ --abstand-kopf:44px; /* Section-Ueberschrift -> Inhalt */ --abstand-block:32px; /* Abstand zwischen Bloecken, CTA nach Inhalt */ --abstand-block-gross:64px; /* grosser Blockabstand */ --abstand-karte:28px; /* Innenabstand kompakter Karten */ --abstand-karte-gross:40px; /* Innenabstand grosser Flaechen */ --abstand-spalten:48px; /* Luecke zwischen Layoutspalten */ --abstand-gitter:24px; /* Luecke in Kartenrastern */ /* === Markenfarben kredpal.de (Variante A, 2026-09-08) === Original-Werte des Entwurfs stehen als Kommentar dahinter. */ --navy-900:#2F4A6C; /* war #16265E */ /* --navy-800 und --navy-700 entfernt (v222): Nach dem Rebrand vom 2026-09-08 waren sie wertgleich mit --accent-500 und --accent-400, die Grenze zwischen beiden Namensraeumen war Historie, keine Absicht. Zwei gleiche Werte unter zwei Namen laden dazu ein, einen davon zu aendern und den anderen zu vergessen. Alte Entwurfswerte zur Doku: --navy-800 war #1E3170, --navy-700 war #2A46A0. */ /* Gold der Marke, 2026-09-08 heller und satter gezogen. Alle Werte sind eine Reihe in OKLCH bei Farbton 80 Grad — gleiche Familie, nur andere Helligkeitsstufen. Ausgangspunkt war #B2833C von kredpal.de. */ --gold-500:#CD9200; /* Flächen, Icons, Striche */ --gold-400:#E4AB3B; /* hellere Stufe, Hover */ --gold-050:#FFEECF; /* heller Untergrund für Icon-Flächen */ --gold-text:#916100; /* Gold als Schriftfarbe. Muss dunkel bleiben: 4,6:1 auf der Grundfläche, 5,4:1 auf Weiß. */ /* Fläche aller Gold-Buttons — ein Ton für die ganze Seite. Weiße Schrift erreicht darauf 2,7:1, WCAG AA verlangt 4,5:1. Wer AA braucht: dunkle Schrift auf der Goldfläche kommt auf 8,3:1. */ --gold-cta:#CD9200; --gold-cta-hero:#CD9200; /* --gold-cta:#B2833C; Markenwert der Live-Seite, nur 3,4:1 */ --live-accent-500:#CD9200; --live-accent-400:#E4AB3B; /* Blau = Primärfarbe der Marke. Trägt Überschriften und Sekundär-Buttons. */ --accent-500:#3B5C87; /* war #4B84FA */ --accent-600:#2F4A6C; /* war #2F5FD1 */ --accent-400:#4A6D99; /* war #7FA8FF */ /* Textrollen auf dunklem Grund (v224). Bisher hatte jede dunkle Section ihren eigenen Grauton. Diese zwei Rollen fassen das zusammen: -stark fuer Links und betonten Text, der Grundton fuer Nebentext. Die Werte sind die bereits auf der Seite verwendeten, nicht neu erfunden. */ --auf-dunkel:#AFBECE; /* Nebentext, 8,2:1 auf dem Bento-Grund */ --auf-dunkel-stark:#D5DFEA; /* Links und betonter Text, 11,5:1 */ --paper:#EEECEF; /* war #F7FAFF — Markenfläche */ --ink:#000000; /* war #101828 */ --ink-muted:#666666; /* war #5B6472 */ --line:#D9D9D9; /* war #E2E8F0 */ --card:#FFFFFF; /* v292: warmer Cremeton als Buehne hinter einem Dokument oder einer Vorschau auf dem Bildschirm (Finanzierungsseite, Beispielseite). Aus der Vorlage vom 25.09.2026 gemessen, nicht aus Gold/Navy abgeleitet. Nie im PDF (dort weiss, damit der Ausdruck nicht grau wirkt) und nie als Grund fuer weissen Text (1,1:1). Ink 18,7:1, Ink-Muted 5,1:1, Gold-Text 4,8:1. Bisher nur als lokale Kopie in partnerbereich.html (dort "NEU v291"); diese Kopie faellt mit der Anbindung an kredpal.css weg (Checkpoint, offener Punkt 6). */ --creme-050:#F5F1ED; --mono:'Roboto','Roboto-Ersatz',Arial,sans-serif; --disp:'Roboto','Roboto-Ersatz',Arial,sans-serif; --body:'Roboto','Roboto-Ersatz',Arial,sans-serif; } @media (max-width:900px){ :root{ --heading-hero: clamp(32px,5.2vw,44px); --heading-hero-sub: clamp(16px,2.1vw,18px); } } @media (max-width:640px){ :root{ --heading-hero: clamp(28px,8vw,34px); --heading-hero-sub: 16px; --text-lead: 16px; --heading-h3: 17px; } } @media (max-width:640px){ :root{ --abstand-rand:20px; --abstand-section:52px; } } /* Nur im Partnerbereich genutzt (vorher dort lokal definiert) */ :root{ /* Gruppen auf weissem Grund im eingeloggten Bereich (F93, = KPI-Karten des Live-Dashboards) */ --flaeche-kuehl:#F0F4F8; /* Kennzahlen der Startseite */ --kennzahl:clamp(30px,2.8vw,40px); /* v420: Abstandsskala fuer den Partnerbereich (Schlussrunde Mobil, Schritt 2b); 24, 28, 32 nutzen die vorhandenen Token */ --abstand-xs:4px; --abstand-s:8px; --abstand-sm:12px; --abstand-m:16px; --abstand-ml:20px; /* v419: Wortmarke des Partnerbereichs (Kopf und Dialog) */ --wortmarke:22px; --wortmarke-klein:18px; /* Ein Schatten fuer alle Flaechen im eingeloggten Bereich (Entscheidung 29.09.2026): Kartenschatten plus ein Hauch Rundum-Schatten, damit auf weissem Grund auch die Oberkante sichtbar ist */ --schatten-flaeche:0 0 0 1px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06),var(--schatten-karte); /* Farben des Handwerker-Designs in der Vorschau; Startwerte, zur Laufzeit ueberschrieben */ --marke:var(--accent-600); --marke-hell:var(--paper); /* Notizen im grauen Wireframe (nie im Design-Prototyp) */ --notiz:#fff5c2; --notiz-rand:#e2cf6b; /* Statusfarben der Finanzierungen (Dashboard-Spezifikation v7, 3.5 Badges, 3.8 aktive Filter), Werte unveraendert uebernommen. KONTRAST: Badge "Zurueckgezogen" 2,4:1 und "Abgelehnt" 4,4:1; aktive Filter Genehmigt 2,2:1, Abgeschlossen 3,3:1, Abgelehnt 3,8:1, Zurueckgezogen 2,5:1; inaktiv 4,4:1 - unter 4,5:1, offen (F130). Nicht in der Spezifikation (Annahme): "Angelegt" wie "In Pruefung"; "Finanzierung gestartet" in KredPal-Blau (v365: Badge Blaugrau/Navy, Filter --accent-400); aktiver Filter "Unbekannt" im Rot der Badge-Schrift. */ --status-neutral-grund:#f9fafb; --status-neutral-text:#4b5563; --status-neutral-rand:#e5e7eb; --status-aktiv-grund:#fffbeb; --status-aktiv-text:#b45309; --status-aktiv-rand:#fde68a; --status-erfolg-grund:#f0fdf4; --status-erfolg-text:#15803d; --status-erfolg-rand:#bbf7d0; --status-fehler-grund:#fef2f2; --status-fehler-text:#dc2626; --status-fehler-rand:#fecaca; --status-ende-grund:#f9fafb; --status-ende-text:#9ca3af; --status-ende-rand:#f3f4f6; /* v365: "Finanzierung gestartet" in den KredPal-Blautoenen statt des fremden Blaus (Entscheidung 29.09.2026) */ --status-start-grund:var(--flaeche-kuehl); --status-start-text:var(--accent-600); --status-start-rand:color-mix(in srgb,var(--accent-400) 30%,var(--card)); --filter-alle:var(--accent-600); --filter-pruefung:#6b7280; --filter-genehmigt:#f59e0b; --filter-gestartet:var(--accent-400); --filter-abgeschlossen:#16a34a; --filter-abgelehnt:#ef4444; --filter-zurueckgezogen:#9ca3af; --filter-unbekannt:#dc2626; --filter-inaktiv-grund:#f3f4f6; --filter-inaktiv-text:#6b7280; }