/* ========================================================================= TOKENS — die einzige Stelle, an der Farben, Abstände und Schriftgrößen festgelegt werden. Wer das Erscheinungsbild ändern will, ändert es hier und nirgends sonst. Im übrigen CSS steht nie ein Farbwert, immer nur var(--...). ========================================================================= */ :root { /* ----------------------------------------------------------------------- FARBEN — Ebene 2, semantisch Hier steht KEIN Farbwert und kein Kundenname. Jede Farbe kommt aus marke.css und bekommt hier einen Namen, der ihre Aufgabe beschreibt statt ihres Aussehens: --farbe-akzent, nicht --gelb. Der Unterschied ist nicht kosmetisch. Ein Bauteil, das `background: var(--gelb)` schreibt, ist bei einem Kunden mit blauer Hausfarbe falsch. Eines, das `background: var(--farbe-akzent)` schreibt, ist bei jedem Kunden richtig. Diese Datei ist deshalb in allen Projekten identisch. Wer sie für einen einzelnen Kunden ändert, hat die Ebene verwechselt. --------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- KONTRASTREGELN — verbindlich, nicht verhandelbar Alle Werte nach WCAG 2.1 durchgerechnet. Drei Kombinationen fallen durch und dürfen deshalb nirgends vorkommen: Text-invers auf Akzent 1,75 : 1 → auf dem Akzent steht IMMER --farbe-text-auf-akzent (10,78) Auszeichnung auf Hell 2,09 : 1 → Auszeichnung nur auf Dunkel Akzent als Fokusring auf Hell 1,75 : 1 → Fokus hell = dunkel, Fokus dunkel = Akzent Die Werte in Klammern gelten für Magards Palette. Bei einem anderen Kunden sind es andere Zahlen — die REGELN bleiben dieselben, und genau deshalb stehen sie hier und nicht in marke.css. Nachgerechnet für die Auszeichnungsebene: Auszeichnung auf --neutral-900 9,10 : 1 → auch für Fließtext Auszeichnung auf --neutral-800 6,49 : 1 → freigegeben Auszeichnung auf --neutral-000 2,09 : 1 → bleibt verboten Wer eine Marke austauscht, glaubt diesen Zahlen nicht, sondern lässt rechnen: `node tools/abnahme-pruefen.mjs`, Abschnitt 9, prüft die Paare unten; `_vorschau-fokus.html` prüft jede Textstelle, die auf der Seite tatsächlich vorkommt. Die zweite Prüfung ist die wichtigere — sie kennt auch die Kombinationen, an die beim Aufschreiben niemand gedacht hat. --------------------------------------------------------------------- */ --farbe-text: var(--neutral-800); --farbe-text-stark: var(--neutral-900); --farbe-text-leise: var(--farbe-text-leise-hell); --farbe-text-invers: var(--neutral-000); --farbe-grund: var(--neutral-000); --farbe-grund-wechsel: var(--neutral-050); --farbe-grund-dunkel: var(--neutral-900); --farbe-linie: var(--neutral-200); --farbe-fokus: var(--neutral-900); --farbe-fokus-dunkel: var(--marke-primaer); /* Der Primärakzent in seinen drei Rollen. --farbe-text-auf-akzent ist die Regel „auf Gelb steht immer Schwarz", als Token gegossen. Solange Bauteile dieses Token benutzen statt einer Farbe, kann die Regel nicht mehr vergessen werden. */ --farbe-akzent: var(--marke-primaer); --farbe-akzent-hover: var(--marke-primaer-dunkel); --farbe-akzent-text: var(--marke-primaer-text); --farbe-text-auf-akzent: var(--neutral-900); /* Auszeichnungsebene für dunkle Flächen. Der Primärakzent bleibt die Signalfarbe für alles, was man anklicken kann. Die Auszeichnung ist ausschließlich Schmuck: Kennzeichnungszeilen, Haarlinien, Rahmenkanten. Diese Trennung ist der Grund, warum die dunklen Abschnitte nach Meisterbetrieb aussehen und nicht nach Warnhinweis. */ --farbe-auszeichnung: var(--marke-akzent); /* Was auf dunklem Grund gebraucht wird und auf hellem nicht. --farbe-text-leise-invers ist NICHT --farbe-text-leise: Das Sekundärgrau ist für hellen Grund gemessen und erreicht auf Schwarz nur 3,5 : 1. Diese Verwechslung war einmal ein echter Fehler (Commit 95fe39a), deshalb hat sie jetzt einen eigenen Namen. */ --farbe-text-leise-invers: var(--neutral-200); /* Die helle Ausprägung unter eigenem Namen. Klingt überflüssig — --farbe-text-leise IST dieser Wert. Gebraucht wird er aber dort, wo ein Bauteil eine eigene helle Fläche in eine dunkle Sektion stellt und den Textkontext zurücksetzen muss (.kontaktweg). Ohne eigenen Namen stünde dort `--farbe-text-leise: var(--farbe-text-leise)` — ein Verweis auf sich selbst, der still nichts tut und den gedämpften Text auf der Kachel ungültig lässt. Gefunden hat das tokens-vergleichen.mjs beim Einziehen der Markenebene, nicht das Auge. */ --farbe-text-leise-hell: var(--neutral-600); --farbe-linie-invers: var(--neutral-000); --farbe-linie-stark: var(--neutral-800); --farbe-grund-dunkel-weich: var(--neutral-800); /* Formularrahmen. Eigener Wert, weil --farbe-linie mit --neutral-200 als Bedienelement-Rahmen unter 3 : 1 auf Weiß liegt — für Dekoration genug, für ein Eingabefeld nicht. */ --farbe-linie-formular: var(--neutral-500); /* Linien auf dunklem Grund. --farbe-linie ist dort zu hart und zerschneidet die Fläche, statt sie zu gliedern. color-mix() statt fester rgba-Werte, damit die Farbe genau einmal im Projekt steht. Kann ein Browser das nicht, entfällt die Linie — sie ist rein dekorativ, es geht keine Information verloren. */ --farbe-linie-gold: color-mix(in srgb, var(--marke-akzent) 42%, transparent); --farbe-linie-dunkel: color-mix(in srgb, var(--neutral-000) 14%, transparent); /* Putzstruktur für dunkle Flächen. Glattes Schwarz sieht nach Bildschirm aus. Eine feine Körnung darauf sieht nach Material aus — und für einen Stuckateurbetrieb ist das nicht bloß Dekor, sondern das eigene Gewerk. Erzeugt mit feTurbulence, eingebettet als data-URI. Das ist KEIN externer Request: Ein data-URI wird nicht über das Netz geholt, sondern steht vollständig in dieser Datei. Eine Bilddatei wäre ein zusätzlicher Abruf und müsste mitgepflegt werden; hier sind es rund 250 Zeichen, die nie kaputtgehen können. baseFrequency steuert die Körnung: höher = feiner. 0.9 liegt nah an Kalkputz. Darunter wird es zu Wolken, darüber zu Bildschirmrauschen. */ --textur-putz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E"); /* Schleier über dem Hero-Bild. Steht hier und nicht in komponenten.css, weil dort nie ein Farbwert stehen darf. Zwei Verläufe übereinander: der senkrechte sichert den Text unten ab, der waagerechte nimmt der rechten Bildhälfte etwas Unruhe, ohne das Motiv zuzudecken. Die Deckkraft unten ist bewusst hoch. Der Kontrast muss stimmen, bevor das Foto bekannt ist — ein helles Fassadenbild darf die Lesbarkeit nicht kippen. */ --hero-schleier: linear-gradient(to top, rgba(17, 17, 17, 0.94) 0%, rgba(17, 17, 17, 0.68) 42%, rgba(17, 17, 17, 0.34) 100%), linear-gradient(to right, rgba(17, 17, 17, 0.52) 0%, rgba(17, 17, 17, 0) 64%); /* ----------------------------------------------------------------------- TYPOGRAFIE Archivo für Überschriften, Inter für Fließtext. Beide selbst gehostet (SIL Open Font License, Lizenztexte liegen im Schriftenordner). Keine externen Requests — siehe LG München I, 3 O 17493/20. --------------------------------------------------------------------- */ --schrift-headline: "Archivo", "Segoe UI", Tahoma, sans-serif; --schrift-text: "Inter", "Segoe UI", Tahoma, sans-serif; /* Schriftgewichte. Seit die Schriften variabel sind, kostet ein Zwischengewicht nichts — vorher hätte jedes eine eigene Datei bedeutet. Genau deshalb stehen hier krumme Werte, die man mit festen Schnitten nie hätte: 680 statt 700 bei Überschriften. Bei 76 px wirkt 700 klotzig; die zwanzig Stufen weniger nimmt man einzeln nicht wahr, im Gesamteindruck aber sehr wohl. 780 im Hero. Dort ist die Fläche groß genug, dass mehr Gewicht Präsenz erzeugt statt Schwere. 640 bei den gesperrten Auszeichnungszeilen. Gesperrte Versalien wirken bei gleichem Gewicht immer fetter als Fließtext — das gleicht der niedrigere Wert aus. Fällt jemand auf die festen Schnitte zurück, rasten diese Werte auf die nächste verfügbare Stufe ein und die Abstufung geht verloren. */ --gewicht-text: 400; --gewicht-betont: 600; --gewicht-auszeichnung: 640; --gewicht-headline: 680; --gewicht-hero: 780; /* Fluide Größen. Der mittlere Wert skaliert mit der Viewportbreite, die äußeren begrenzen ihn nach unten und oben. */ --schrift-xs: 0.8125rem; /* 13px — Bildunterschriften */ --schrift-s: 0.9375rem; /* 15px — Chips, Meta */ --schrift-m: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17–19px Fließtext */ --schrift-l: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem); --schrift-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); --schrift-h3: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem); --schrift-h2: clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem); --schrift-h1: clamp(2rem, 1.5rem + 2.5vw, 3.375rem); /* Nur im Hero-h1 verwendet. Nach oben deutlicher aufgedreht als vorher (4rem), weil der Auftakt Präsenz braucht; der Startwert für schmale Displays bleibt fast unverändert. */ --schrift-hero: clamp(2.375rem, 1.65rem + 3.6vw, 4.75rem); --zeilenhoehe-eng: 1.15; /* große Überschriften */ --zeilenhoehe-mittel: 1.35; /* kleine Überschriften */ --zeilenhoehe-text: 1.65; /* Fließtext */ --sperrung-weit: 0.14em; /* für die gesperrten Versalienzeilen aus Vorlage 3 („ZUVERLÄSSIG. SAUBER.") */ --sperrung-eng: 0.04em; /* Versalien-Labels */ /* Maximale Zeilenlänge: 60–75 Zeichen sind gut lesbar. */ --textbreite: 68ch; /* ----------------------------------------------------------------------- ABSTÄNDE — eine Skala, keine krummen Zwischenwerte --------------------------------------------------------------------- */ --abstand-3xs: 0.25rem; --abstand-2xs: 0.5rem; --abstand-xs: 0.75rem; --abstand-s: 1rem; --abstand-m: 1.5rem; --abstand-l: 2rem; --abstand-xl: 3rem; --abstand-2xl: 4rem; --abstand-3xl: 6rem; /* Vertikaler Abstand einer Sektion — skaliert mit der Breite. Drei Stufen statt einer. Vorher war jede Sektion exakt gleich hoch; das liest sich wie ein Katalog, weil nichts hervortritt und nichts zurücktritt. Die Stufen geben der Seite einen Takt: enge Abschnitte binden zusammen, was zusammengehört, weite geben dem Wichtigen Luft. --sektion-abstand bleibt unverändert der Standardwert. Eine Seite ohne Modifikator-Klasse sieht deshalb genauso aus wie vorher. Der Abstand zwischen „eng" und „weit" ist bewusst groß: In der ersten Fassung lagen sie bei 56 und 130 px auseinander, was beim Ansehen kaum als Takt wahrnehmbar war. Jetzt trennt sie etwa der Faktor vier. */ --sektion-eng: clamp(1.5rem, 0.9rem + 1.8vw, 2.5rem); --sektion-abstand: clamp(3rem, 2rem + 4vw, 6rem); --sektion-weit: clamp(5rem, 2.5rem + 8.5vw, 10rem); /* Höhe der geschwungenen Trennlinie zwischen hellem und dunklem Bereich — das Erkennungsmerkmal aus Vorlage 3. */ --uebergang-hoehe: clamp(2rem, 1rem + 3.5vw, 4.5rem); /* Inhaltsbreite und Seitenrand. Der Rand ist mobil bewusst großzügig, damit Text nicht an der Displaykante klebt. */ --inhalt-breite: 1240px; --inhalt-schmal: 820px; --seitenrand: clamp(1.25rem, 0.75rem + 2.5vw, 3rem); /* ----------------------------------------------------------------------- RADIEN, RAHMEN, SCHATTEN Bewusst sparsam: Die Vorlagen arbeiten mit harten Kanten. Nur Bildkacheln und Buttons bekommen einen minimalen Radius. --------------------------------------------------------------------- */ --radius-0: 0; --radius-s: 2px; --radius-m: 4px; --radius-rund: 50%; --rahmen-staerke: 1px; --rahmen-stark: 3px; /* die gelben Akzentkanten */ /* ----------------------------------------------------------------------- HÖHENSKALA Eine einzige Leiter für alles, was über der Seite liegt. Vorher standen hier sieben einzeln erfundene Schattenwerte nebeneinander — genau das, was eine Gestaltung beliebig aussehen lässt: Jedes Element schwebt anders hoch, ohne dass ein System dahinter erkennbar wäre. Jede Stufe verdoppelt ungefähr Versatz und Unschärfe der weiten Lage: 4 → 10 → 24 → 48 px. Wer eine neue Stufe braucht, führt sie hier ein und setzt sie nicht im Bauteil zusammen. Immer zwei Lagen: eine schmale, dunklere direkt an der Kante für die Kontur, eine weite, weiche darunter für die Höhe. Eine einzelne Lage wirkt entweder gestempelt oder verwaschen. Obergrenze der Deckkraft: Der Fokusring ist 3 px schwarz und muss die deutlichste Kante am Element bleiben — ein Schatten darf ihn nicht überstrahlen. Bei Stufe 3 ist diese Grenze erreicht. --------------------------------------------------------------------- */ --hoehe-gedrueckt: 0 1px 2px rgba(17, 17, 17, 0.26); --hoehe-1: 0 1px 2px rgba(17, 17, 17, 0.09), 0 2px 4px rgba(17, 17, 17, 0.08); --hoehe-2: 0 2px 4px rgba(17, 17, 17, 0.16), 0 5px 10px rgba(17, 17, 17, 0.14); --hoehe-3: 0 4px 8px rgba(17, 17, 17, 0.20), 0 12px 24px rgba(17, 17, 17, 0.20); --hoehe-4: 0 8px 16px rgba(17, 17, 17, 0.22), 0 24px 48px rgba(17, 17, 17, 0.24); /* Die bisherigen Namen bleiben gültig und zeigen jetzt auf die Skala. So ändert sich nichts an den Stellen, die sie schon verwenden. */ --schatten-kachel: var(--hoehe-1); --schatten-hoch: var(--hoehe-3); /* Bedienelemente. Knöpfe liegen eine Stufe höher als Felder — ein Knopf ist zum Drücken da, ein Feld zum Hineinschreiben. */ --schatten-knopf: var(--hoehe-2); --schatten-knopf-hover: var(--hoehe-3); --schatten-knopf-aktiv: var(--hoehe-gedrueckt); --schatten-feld: var(--hoehe-1); --schatten-feld-fokus: var(--hoehe-2); --fokus-breite: 3px; --fokus-abstand: 2px; /* ----------------------------------------------------------------------- BEWEGUNG Kurz und unaufdringlich. Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt in basis.css alles auf 0 gesetzt. --------------------------------------------------------------------- */ --dauer-schnell: 120ms; --dauer-mittel: 200ms; --verlauf: cubic-bezier(0.2, 0, 0.2, 1); /* Einblenden beim Scrollen. Deutlich länger als ein Hover-Wechsel, weil eine Bewegung, die man bewusst wahrnimmt, sonst hektisch wirkt. Der Versatz ist bewusst klein: Der Abschnitt soll sich setzen, nicht hereinfliegen. */ --dauer-einblenden: 700ms; --versatz-einblenden: 1.75rem; /* ----------------------------------------------------------------------- EBENEN --------------------------------------------------------------------- */ --ebene-kopf: 100; --ebene-mobilnav: 200; --ebene-leiste: 150; /* feste Anrufleiste unten auf Mobil */ --ebene-lightbox: 300; }