/* ========================================================================= Gestaltungswerte — LernPuls Einzige Stelle, an der Farben, Schriftgroessen, Abstaende und Radien definiert werden. Kommt in einer Komponente ein roher Wert vor, ist das ein Versehen. Stand 02.08.2026: Diese Datei traegt jetzt die Werte der ALTEN Seite. Solmaz hat den Umzug ausdruecklich als 1:1-Uebernahme des sichtbaren Erscheinungsbildes beauftragt - Schrift, Farben, Abstaende, Groessen- verhaeltnisse. Was hier steht, ist am Original gemessen, nicht entworfen: referenz/original-desktop.png und referenz/abschnitt-*.png. Zwei Sorten Abweichung sind bewusst und stehen unten jeweils am Wert: (1) Kontrast. Weisse Schrift auf dem Marken-Orange kommt auf 2,9:1 und reisst WCAG AA. Auf orangen Flaechen steht deshalb die dunkle Tinte. (2) Messfehler des Entwurfs A, die NICHT uebernommen wurden - etwa der zu enge Zeilenabstand der Ueberschriften (A: 1,12; Original: 1,34). Farbherkunft (gemessen, nicht geschaetzt): Orange #FF6816 Logo und Schaltflaechenfarbe der alten Seite Orange #FFA030 oberes Ende des Schaltflaechen-Verlaufs Koralle #EC9070 Hero-Schrift der alten Seite Creme #F0ECE8 Seitenhintergrund der alten Seite Tinte #2F2B29 Fliesstextfarbe der alten Seite Gruen #1B9E4B Preisbetraege ========================================================================= */ :root { /* Flaechen ------------------------------------------------------------ */ --farbe-grund: #F0ECE8; /* Seitenhintergrund, warmes Creme */ --farbe-karte: #FFFFFF; /* Karten, Formularfelder */ /* Als ABSCHNITTSflaeche kennt die alte Seite nur Creme und Weiss - der blaugraue dritte Ton war eine Zutat des Neubaus. Dieser Wert bleibt als KARTEN-Grau: die Preiskarten liegen mit exakt 235,235,235 auf dem Creme (gemessen in referenz/abschnitt-06.png), ebenso die Flaeche hinter einem fehlenden Portraet. */ --farbe-ruhig: #EBEBEB; --farbe-tief: #2F2B29; /* Fusszeile */ /* Schrift ------------------------------------------------------------- */ --farbe-text: #2F2B29; --farbe-text-leise: #5F5854; /* 6,3:1 auf Creme */ --farbe-text-hell: #FFFFFF; /* auf dunklen Flaechen */ --farbe-text-hell-leise: #C9C0BB; /* Marke --------------------------------------------------------------- Das Orange traegt nur als FLAECHE. Als Schrift auf Creme ist es zu hell, dafuer gibt es --farbe-marke-tief. Und der Punkt, an dem die alte Seite durchfaellt: weisse Schrift auf #FF6816 kommt auf 2,9:1 und reisst damit WCAG AA (4,5:1) deutlich. Auf der Schaltflaeche steht deshalb die dunkle Tinte - 4,83:1. Das ist die eine Abweichung vom 1:1, die nicht verhandelbar ist. */ --farbe-marke: #FF6816; --farbe-marke-hell: #FFA734; /* Mitte des Knopf-Verlaufs */ --farbe-marke-gelb: #FFDA4E; /* oberes Ende des Knopf-Verlaufs */ /* Der Verlauf IST das Erkennungszeichen der alten Schaltflaeche. Drei Stopps, an referenz/abschnitt-06.png abgegriffen: oben 255,218,78 - Mitte 255,167,52 - unten 255,116,28. Entwurf A hatte nur zwei Stopps und begann erst beim mittleren Ton. */ --verlauf-marke: linear-gradient(180deg, var(--farbe-marke-gelb) 0%, var(--farbe-marke-hell) 52%, var(--farbe-marke) 100%); --farbe-marke-tief: #B83C00; /* 4,85:1 auf Creme - Schrift und Links */ /* Beim Ueberfahren wird die Flaeche HELLER. Der fruehere dunklere Ton #E85400 brachte die Tinte darauf auf 3,80:1 - also genau dann unter die Grenze, wenn jemand die Beschriftung liest. */ --farbe-marke-satt: #FF7A2E; /* 5,39:1 mit der Tinte */ --farbe-marke-hauch: #FDEDE4; /* Flaeche hinter Symbolen */ --farbe-marke-rand: #F6CDB4; --farbe-auf-marke: #2F2B29; /* Schrift auf der Markenflaeche, 4,83:1 */ /* Koralle: die Hero-Schrift der alten Seite. Sie steht ausschliesslich auf dem abgedunkelten Hero-Foto, nie auf Creme - dort kaeme sie auf 1,9:1. */ --farbe-koralle: #EC9070; /* Der Schleier ueber dem Hero-Foto. Original #4C575F; auf #363E43 abgedunkelt, weil die Koralle sonst auf 3,1:1 kommt und die Unterzeile als Fliesstext die 4,5:1-Grenze reisst. Jetzt 4,56:1, optisch kaum zu unterscheiden. */ --farbe-schleier: 54, 62, 67; /* als RGB-Tripel, fuer die Verlaufsstopps */ /* Feste Rollen -------------------------------------------------------- */ /* Preisbetraege. Im Original #3CAF3C - das kommt auf der grauen Preiskarte auf 2,39:1 und reisst selbst die 3:1 fuer grosse Schrift. Dieser Ton hat dieselbe Lage im Farbkreis, aber 3,48:1 auf der Karte. Gehoert wie der Knopf zu den Kontrastabweichungen, die Solmaz vorgelegt werden. */ --farbe-gruen: #1B8F44; --farbe-nein: #FF0E00; /* das rote Minus im Vergleich, gemessen */ --farbe-stern: #F5A623; /* bewusst markenunabhaengig */ --farbe-linie: #E2DCD6; /* Zwei Arten, wie das Original einen Abschnittstitel hervorhebt: ein blassrosa Markerbalken HINTER dem Wort, oder ein korallfarbener Schwung darunter. Beide gemessen (249,211,198 bzw. 240,145,112). */ --farbe-marker: #F9D3C6; --farbe-plakette: #FF7800; /* die Nummernfelder der Zeitleiste */ --farbe-zeitlinie: #DDD8D4; --farbe-auflage: rgba(47, 43, 41, 0.82); /* Grossansicht hinter dem Bild */ --schatten-auf-bild: 0 4px 24px rgba(47, 43, 41, 0.4); --farbe-linie-hell: rgba(255, 255, 255, 0.14); /* WhatsApp-Gruen ist eine fremde Marke und darf nicht veraendert werden. Die Schrift darauf ist dunkelgruen statt weiss: Weiss kaeme auf 1,8:1. */ --farbe-whatsapp: #25D366; --farbe-auf-whatsapp: #04310F; /* Schriftarten -------------------------------------------------------- */ --schrift-titel: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --schrift-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Schriftgroessen — sechs Stufen, fluid ------------------------------- Obere Enden am Original gemessen: Hero 60px, Abschnittstitel 44px, Kartentitel 22px, Vorspann 18px. */ --gr-riesig: clamp(2.25rem, 4.6vw, 3.75rem); /* Hero, 60px */ --gr-gross: clamp(1.75rem, 3.2vw, 2.75rem); /* Abschnittstitel, 44px */ --gr-mittel: clamp(1.125rem, 1.6vw, 1.375rem); /* Kartentitel, 22px */ --gr-lead: clamp(1rem, 1.2vw, 1.125rem); /* Vorspann, 18px */ --gr-text: 1rem; --gr-klein: 0.875rem; /* Beschriftungen, Fussnoten */ --fett-normal: 400; --fett-halb: 500; --fett-krftg: 600; --fett-stark: 700; /* Am Original nachgemessen: Grundlinienabstand 80,5px bei 60px Schrift. Entwurf A stand auf 1,12 und zog damit alle Ueberschriften zusammen - das ist einer der Punkte, die beim Umzug ausdruecklich NICHT mitkommen. */ --zeile-titel: 1.34; --zeile-text: 1.65; --sperr-eng: -0.02em; --sperr-weit: 0.1em; /* Abstaende — sieben Stufen, alle Vielfache von 4 --------------------- */ --ab-1: 0.5rem; /* 8 */ --ab-2: 1rem; /* 16 */ --ab-3: 1.5rem; /* 24 */ --ab-4: 2rem; /* 32 */ --ab-5: 3rem; /* 48 */ --ab-6: 5rem; /* 80 */ --ab-7: 7rem; /* 112 */ /* Radien -------------------------------------------------------------- Das Budget lag bei zwei Radien. Die alte Seite verwendet nachweislich fuenf - die Faecher-Kacheln sind mit ~47px fast Halbrund, die Fragenkarten mit 12px kaum gerundet. Ein einziger Wert dazwischen traefe keinen der beiden. Gemessen, nicht gewaehlt. */ --radius-knopf: 10px; /* Schaltflaechen */ --radius-klein: 12px; /* Fragenkarten, Portraetrahmen, Bewertungskarte */ --radius: 16px; /* Karten, Video */ --radius-gross: 22px; /* Band, Probestunden-Kachel */ --radius-kachel: 47px; /* die neun Faecher-Kacheln */ --radius-voll: 9999px; /* Schatten ------------------------------------------------------------ */ --schatten-ruhe: 0 1px 2px rgba(47, 43, 41, 0.05), 0 4px 16px rgba(47, 43, 41, 0.05); --schatten-hoch: 0 2px 6px rgba(47, 43, 41, 0.07), 0 16px 40px rgba(47, 43, 41, 0.1); --schatten-marke: 0 8px 22px rgba(255, 104, 22, 0.35); /* Bewegung ------------------------------------------------------------ */ --kurve: cubic-bezier(0.2, 0.8, 0.2, 1); --dauer-kurz: 160ms; --dauer: 260ms; --dauer-lang: 520ms; /* Raster -------------------------------------------------------------- Die Inhaltsspalte des Originals ist 1250px breit und sitzt bei 1440px Fensterbreite zwischen x=95 und x=1345. Weil .huelle die Randluft INNEN traegt, muss die Hoechstbreite den Rand zweimal mitrechnen - sonst kaeme die Spalte auf 1250 minus Rand heraus. Entwurf A stand auf 1280px und lag damit 66px zu schmal, mit 32px Rechtsversatz. */ --breite-max: calc(1250px + 2 * var(--rand)); --breite-text: 64ch; --rand: clamp(1.25rem, 4vw, 2.5rem); --kopf-hoehe: 84px; /* Ebenen -------------------------------------------------------------- */ --ebene-kopf: 200; --ebene-dialog: 400; } @media (prefers-reduced-motion: reduce) { :root { --dauer-kurz: 0ms; --dauer: 0ms; --dauer-lang: 0ms; } }