/* ========================================================================== tokens.css — Die Variablen-Ebene Fabio Venier DF Immobilienbetreuung Hier stehen Werte, sonst nichts. Keine Selektoren ausser :root, keine Eigenschaften an Elementen. Wer eine Farbe, einen Abstand oder eine Schriftgroesse aendern will, aendert sie hier und nirgends sonst. Regel fuer alle weiteren Dateien: Es wird kein Zahlenwert direkt geschrieben, wenn es dafuer ein Token gibt. ========================================================================== */ :root { /* ====================================================================== 1. FARBE ---------------------------------------------------------------------- Sechs benannte Werte, abgeleitet aus dem Logo. Mehr gibt es nicht. HERKUNFT: Diese Werte sind aus der Logodatei AUSGEMESSEN (assets/logo/original/logo-breit.png), nicht geschaetzt. Die haeufigsten Farbwerte je Bildbereich: #013f95 Schriftzug "FABIO", Gebaeude, Haus-Symbol #55a52c Schriftzug "VENIER", Blatt #6a6b6b Schriftzug "IMMOBILIENBETREUUNG" #0566bf Wassertropfen, helle Verlaufsanteile #84b129 helle Blattspitzen Das Logo traegt ZWEI Markenfarben: ein Blau und ein Gruen. Beide haben hier eine Aufgabe — das Blau fuehrt (Immobilie, Reinigung), das Gruen begleitet (Garten, Saison). Das Grau ist Sekundaertext. Wird das Logo je getauscht: nur dieser Block wird angefasst. Jede Farbe im Projekt laeuft ueber diese Variablen. ====================================================================== */ --tiefe: #1b2430; /* dunkles Blaugrau, aus dem Blau abgedunkelt */ --papier: #f5f7f8; /* kuehles Off-White, der Grund des Logos */ --akzent: #0a55a5; /* BLAU des Logos — Hauptfarbe */ --signal: #55a52c; /* GRUEN des Logos — Garten, Saison, Zweitrolle */ --linie: #d6dce1; /* Haarlinien, aus dem Blaugrau aufgehellt */ --text-2: #5c6873; /* Sekundaertext, kuehles Grau */ /* Auf dunklem Grund ist das Markenblau zu dunkel — es verschwindet. Dafuer gibt es diesen aufgehellten Wert. Er wird AUSSCHLIESSLICH innerhalb von .band-tief verwendet, nirgends sonst. */ --akzent-hell: #6aa9e8; /* Gruen auf hellem Grund traegt als FLAECHE, aber nicht als Text: #55a52c auf #f5f7f8 erreicht nur 2,8:1 und faellt damit durch die Kontrastpruefung. Fuer gruenen Text gibt es deshalb diesen abgedunkelten Wert (4,9:1). */ --signal-text: #3d7a1e; /* Abgeleitete Zustaende. Werden aus den sechs Werten gebildet und muessen beim Ersetzen der Palette nicht angefasst werden. */ --papier-tief: color-mix(in srgb, var(--papier) 92%, var(--tiefe)); --linie-zart: color-mix(in srgb, var(--linie) 55%, var(--papier)); --akzent-tief: color-mix(in srgb, var(--akzent) 82%, var(--tiefe)); --akzent-hauch: color-mix(in srgb, var(--akzent) 12%, var(--papier)); --auf-tiefe: var(--papier); --auf-tiefe-2: color-mix(in srgb, var(--papier) 68%, var(--tiefe)); --linie-auf-tiefe: color-mix(in srgb, var(--papier) 22%, var(--tiefe)); /* Fehlerzustand in Formularen. Bewusst NICHT Teil der sechs Markenwerte: Das ist eine funktionale Farbe, keine gestalterische. Sie wird ausschliesslich in Formularen verwendet und traegt die Aussage nie allein — jede Fehlermeldung steht zusaetzlich als Text da und wird per aria-live angesagt. */ --fehler: #8f2f22; --fehler-hauch: color-mix(in srgb, var(--fehler) 8%, var(--papier)); /* Fokus. Muss auf hellem und auf dunklem Grund sichtbar sein, deshalb ein eigener Wert und keine Wiederverwendung von --akzent. */ --fokus: var(--akzent); --fokus-kontur: 2px; --fokus-abstand: 3px; /* ====================================================================== 2. SCHRIFT ---------------------------------------------------------------------- Eine Familie: Inter, variabel (Gewicht 100-900). Die Rollen Display, Fliesstext und Label werden ueber Gewicht, Groesse und Laufweite unterschieden, nicht ueber die Schriftart. ====================================================================== */ /* Zwei Google-Schriften, beide LOKAL eingebettet: Manrope — Ueberschriften und Zahlen (Gewicht 200-800) Inter — Fliesstext und Labels (Gewicht 100-900) Auf Wunsch des Kunden eine schlichte Google-Schrift. Sie wird LOKAL eingebettet (assets/fonts). Es geht kein Aufruf an Google — sonst waere eine Einwilligung noetig. Optik von Google Fonts, ohne die Verbindung dorthin. Die drei Namen bleiben bestehen, weil die drei ROLLEN bestehen bleiben: Display, Fliesstext, Label. Unterschieden werden sie jetzt ueber Gewicht, Groesse und Laufweite statt ueber verschiedene Schriftfamilien. Das ist ruhiger und genau das, was "schlicht" bedeutet. */ --schrift-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --schrift-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --schrift-label: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Inter hat keine Breitenachse. Die Werte bleiben als Variablen erhalten, damit an den Verwendungsstellen nichts umgebaut werden muss, stehen aber auf normal. */ --breite-display: normal; --breite-eng: normal; /* --- Maßstab --------------------------------------------------------- Grundwert 16px, Verhaeltnis 1.32. Bewusst kein 1.25, kein 1.5 und kein goldener Schnitt — die gaengigen Verhaeltnisse erzeugen den Baukasten-Rhythmus, den dieses Projekt vermeiden soll. --gr-14 ist ein bewusster Halbschritt fuer dichte Bedienelemente. */ --gr-12: 0.75rem; /* 12px — Labels, Marginalien */ --gr-14: 0.875rem; /* 14px — Halbschritt, dichte Bedienung */ --gr-16: 1rem; /* 16px — Grundwert Fliesstext */ --gr-20: 1.25rem; /* 20px — H4, Vorspann */ --gr-26: 1.625rem; /* 26px — H3, Leistungsname im Akkordeon */ --gr-34: 2.125rem; /* 34px — Sheet-Titel */ --gr-44: 2.75rem; /* 44px — H2 */ --gr-58: 3.625rem; /* 58px — H1 auf Unterseiten */ --gr-76: 4.75rem; /* 76px — Reserve */ /* Fliessende Groessen fuer die grossen Auftritte. */ --gr-hero: clamp(2.5rem, 5.4vw, 4.25rem); /* 40 → 68 px */ --gr-seiten-h1: clamp(2rem, 4vw, 3.25rem); /* 32 → 52 px */ --gr-abschnitt: clamp(1.5rem, 2.7vw, 2.375rem); /* 24 → 38 px */ /* --- Zeilen und Laufweite ------------------------------------------- */ --zeile-display: 0.98; --zeile-eng: 1.15; --zeile-text: 1.65; --zeile-dicht: 1.4; /* Inter braucht bei grossen Graden deutlich negative Laufweite, sonst wirken Ueberschriften auseinandergefallen. */ --lauf-display: -0.03em; --lauf-normal: 0; /* Deutlich enger als zuvor. Weit gesperrte Versalien sehen schnell nach Schablone aus. */ --lauf-label: 0.055em; /* --- Gewichte -------------------------------------------------------- */ --fett-display: 700; --fett-h: 600; --fett-text: 400; --fett-betont: 500; --fett-label: 500; /* Satzbreite. Ueber rund 70 Zeichen je Zeile findet das Auge beim Zeilenwechsel den Anfang der naechsten Zeile nicht mehr sicher. 62ch ergibt in Inter gemessen etwa 70 Zeichen. */ --satzbreite: 58ch; /* ergibt gemessen rund 73 Zeichen je Zeile */ --satzbreite-eng: 54ch; /* ====================================================================== 3. RAUM ---------------------------------------------------------------------- Progression etwa im Verhaeltnis 1.6 statt der ueblichen Verdopplung eines 8-Punkt-Rasters. Das erzeugt einen unregelmaessigeren, ruhigeren Rhythmus und verhindert das sichtbare Standardraster. ====================================================================== */ --raum-1: 0.375rem; /* 6px */ --raum-2: 0.75rem; /* 12px */ --raum-3: 1.25rem; /* 20px */ --raum-4: 2rem; /* 32px */ --raum-5: 3.25rem; /* 52px */ --raum-6: 5.25rem; /* 84px */ --raum-7: 8.5rem; /* 136px */ --raum-8: 13.75rem; /* 220px */ /* Abstand zwischen Abschnitten. Deutlich enger gefasst als zuvor. Grosszuegiger Weissraum ist gut, aber ab einem gewissen Punkt sieht ein Abschnitt nicht mehr ruhig aus, sondern leer — als haette der Inhalt nicht geladen. Genau das war der Eindruck in der ersten Fassung. */ --abschnitt-y: clamp(2.5rem, 6vw, var(--raum-7)); /* ====================================================================== 4. RASTER UND LAYOUT ---------------------------------------------------------------------- Zwoelf Spalten. Das Raster ist hier kein Hilfsmittel, sondern Gestaltungselement: die Vertikalen werden sichtbar gezeichnet. ====================================================================== */ --spalten: 12; --rahmen: 90rem; /* 1440px */ --rand: clamp(var(--raum-3), 4.5vw, var(--raum-6)); --steg: clamp(var(--raum-2), 1.8vw, var(--raum-4)); --linie-staerke: 1px; --radius: 2px; /* Mehr gibt es nicht. Keine weichen Ecken. */ --strich-icon: 1.5px; /* Einheitliche Strichstaerke aller Icons. */ /* ====================================================================== 5. BEWEGUNG ---------------------------------------------------------------------- Die Kurven sind bewusst benannt statt inline geschrieben, damit das Zeitgefuehl der ganzen Seite an einer Stelle liegt. Bei prefers-reduced-motion werden die Dauern auf 0 gesetzt (siehe unten), zusaetzlich werden die GSAP-Animationen gar nicht erst erzeugt. Doppelt abgesichert. ====================================================================== */ --dauer-kurz: 140ms; --dauer-mittel: 320ms; --dauer-lang: 680ms; --kurve-aus: cubic-bezier(0.16, 1, 0.30, 1); /* schnell an, weich aus */ --kurve-ein-aus: cubic-bezier(0.65, 0, 0.35, 1); --kurve-linie: cubic-bezier(0.22, 0.61, 0.36, 1); /* fuer Strichaufbau */ /* ====================================================================== 6. EBENEN ====================================================================== */ --z-raster: 0; --z-inhalt: 1; --z-kopf: 50; --z-anrufen: 60; /* fester Anruf-Button am Handy */ --z-menue: 70; } /* ========================================================================== Reduzierte Bewegung Die Dauern werden auf einen Wert gesetzt, der als "keine Animation" wahrgenommen wird, aber Zustandswechsel nicht abrupt springen laesst. Wichtig: Sichtbarkeit wird hier NICHT angefasst. Der Grundzustand aller Elemente in base.css ist bereits der Endzustand — deshalb kann nichts auf opacity: 0 stehen bleiben. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dauer-kurz: 1ms; --dauer-mittel: 1ms; --dauer-lang: 1ms; } } /* ========================================================================== 7. HANDY — angehobene Kleinschrift -------------------------------------------------------------------------- 12 Pixel funktionieren am Bildschirm mit Sitzabstand. In der Hand, bei wechselndem Licht und mit Fettfinger auf dem Glas nicht mehr. Betroffen sind Formularbeschriftungen, Bueroezeiten und Hinweiszeilen — also genau die Stellen, an denen Genauigkeit zaehlt. Angehoben wird nur die Schriftgroesse, kein Abstand. Der Rhythmus der Seite verschiebt sich dadurch nicht. ========================================================================== */ @media (max-width: 47.99rem) { :root { --gr-12: 0.8125rem; } /* 13px statt 12px */ }