/* ============================================================ PJM + Partner - Tokens, versionsunabhaengig ------------------------------------------------------------ Namenskonvention zwingend nach WordPress-Preset-Schema, damit dieses CSS spaeter unveraendert in style.css eines Block-Themes weiterlaeuft und der :root-Block ersatzlos entfaellt. Leitfaden Abschnitt 1.3. Diese Datei enthaelt NUR, was beide Versionen teilen. Alles, was A von B unterscheidet, steht in theme-a.css / theme-b.css. ============================================================ */ /* ---- Schrift, lokal. Keine externe Ressource zur Laufzeit ---- Roboto in zwei Breiten. Es ist EINE Schriftfamilie, nicht zwei: Bick Law - Martins erklaerter Favorit - macht es genauso, und glauber.de laeuft ebenfalls auf Roboto Condensed (440 Elemente). Damit erfuellt die Wahl gleichzeitig die Wunsch-Referenz und schafft Vertrautheit auf Glauber-Seite, ohne ein Glauber-Element zu uebernehmen. Zum Vergleich: auf pjm-partner.de laufen heute SECHS Familien gleichzeitig. Das ist Dirks Kritikpunkt, gemessen. Lokal eingebunden, also ohne Uebermittlung an Google. Begruendung und Lizenz: fonts/LIZENZ.md */ @font-face { font-family: "PJM Sans"; src: url("../fonts/roboto-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "PJM Sans Condensed"; src: url("../fonts/roboto-condensed-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---- Titelschrift, zweite Fassung. Operator-Entscheid 2026-07-30 ---- Befund war eindeutig: "Warum das so billig aussieht, die Seite. Das liegt an der Schriftart." Roboto ist die Werkseinstellung von Android und liest sich auch so. Die Begruendung von 2026-07-28 (Bick Law, glauber.de) war richtig und das Ergebnis trotzdem unbefriedigend. Jost ist eine geometrische Grotesk in der Tradition der Futura, Open Font License. Sie ist der naechste Verwandte der Wortmarke im Logo: versal, sehr leicht, weit gesperrt. Titel in Jost nehmen die Bildsprache des Logos auf, statt daneben zu stehen - der Schriftwechsel loest damit zwei Dinge auf einmal. Serifen bleiben ausgeschlossen (Operator-Entscheid 2026-07-30, das Anforderungsregister gilt unveraendert). Der Fliesstext bleibt Roboto: das Billo-Gefuehl entsteht an den Titeln, nicht im Absatz, und Roboto ist als Lesetype handwerklich gut. Greift nur bei [data-schrift="jost"]. Ohne das Attribut aendert sich nichts. Lizenz und Herkunft: fonts/LIZENZ.md */ @font-face { font-family: "PJM Display"; src: url("../fonts/jost-variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---------- Farbe ---------- Marineblau: PJMs heutige Textfarbe #00305B, praktisch identisch mit Glaubers einziger Markenfarbe #003366. Der gemeinsame Nenner. Akzent: aus den Zierlinien des Logos ausgelesen - seit dem 2026-09-10 orange (#FAAD2E), davor gold (#AC9268). */ --wp--preset--color--ink: #00305B; --wp--preset--color--ink-deep: #071F4E; --wp--preset--color--muted: #42556E; --wp--preset--color--base: #FFFFFF; --wp--preset--color--surface: #F7F9FB; --wp--preset--color--surface-warm: #FAF8F4; /* Die drei zur Wahl stehenden Akzent-Toene, als feste Werte. NEUES LOGO am 2026-09-10: Die Kanzlei hat die beiden Zierlinien links und rechts von RECHTSANWAELTE auf Orange umgestellt (Wunsch aus Martins Mail vom selben Tag). Die neue Datei ist nachgemessen wie die alte - der Kern der Linien traegt #FAAD2E, ueber 2500 Pixel ohne Verlauf, kein ICC-Profil in der Datei. Der Browser zeigt also genau diesen Wert. Bis dahin stand hier #AC9268, das gedaempfte Gold der alten Datei. Der Token heisst weiter accent-logo, weil seine Aufgabe dieselbe ist: den Ton tragen, den das BILD vorgibt und den keine CSS-Regel aendern kann. Zur Abweichung von #FFC42F: Alexander hat diesen Wert als PJM-Farbcode genannt, die Datei liefert #FAAD2E. Der Unterschied sitzt im Gruenkanal (173 statt 196) und ist zu gross fuer eine Rundung - vermutlich eine Farbraum-Umrechnung beim Export. Aufgeloest wird das nicht durch Mitteln, sondern durch Zustaendigkeit: Was unmittelbar am Logo klebt, folgt der Datei (dieser Token). Was frei im Haus steht, folgt dem Markenwert (accent-orange, siehe naechste Zeile). */ --wp--preset--color--accent-logo: #FAAD2E; --wp--preset--color--accent-orange: #FFC42F; --wp--preset--color--accent-gelb: #FFC430; /* Die Textfassung des Logo-Golds, festgeschrieben am 2026-09-02. Warum es diesen zweiten Gold-Token braucht: --accent-logo ist ein Linien-Ton. Auf Weiß misst er 2,97:1 und trägt damit eine Haarlinie, aber keine Schrift - die Hausregel für lesbaren Text sind 4,5:1. Der abgedunkelte Ton #836A3A erreicht 5,14:1 (beides am 2026-09-02 nachgerechnet) und ist derselbe Wert, den --accent-text bisher als Voreinstellung trug. Der Unterschied zu --accent-text ist die Unabhängigkeit vom Schalter: --accent-text dreht mit [data-accent] auf die Textfassung des jeweiligen Akzents mit (heute Orange, also #96610A). Wo etwas ausdrücklich das Gold DES LOGOS tragen soll und nicht den gerade eingestellten Akzent, ist dieser Token der richtige - er steht fest, wie das Logo feststeht. */ --wp--preset--color--accent-logo-text: #836A3A; /* Akzent, Voreinstellung: Logo-Gold. Umschaltbar ueber [data-accent] am -Element, siehe unten. */ --wp--preset--color--accent: var(--wp--preset--color--accent-logo); --wp--preset--color--accent-text: var(--wp--preset--color--accent-logo-text); --wp--preset--color--accent-wash: rgba(172, 146, 104, 0.10); /* ---------- Linien ---------- Eine einzige Linienstaerke im ganzen System. Antwort auf K5: "gelbe Trennbalken zu dick und zu kurz". */ --wp--custom--rule--width: 1px; --wp--custom--rule--soft: 1px solid rgba(0, 48, 91, 0.12); --wp--custom--rule--strong: 1px solid rgba(0, 48, 91, 0.22); --wp--custom--rule--accent: 1px solid var(--wp--preset--color--accent); /* ---------- Abstaende ---------- */ --wp--preset--spacing--20: 0.5rem; --wp--preset--spacing--30: 0.875rem; --wp--preset--spacing--40: 1.5rem; --wp--preset--spacing--50: 2.5rem; --wp--preset--spacing--60: 4rem; --wp--preset--spacing--70: 6rem; --wp--preset--spacing--80: 8.5rem; /* Abstand zwischen Menuepunkt und aufgeklapptem Feld. Steht als Token, weil dieselbe Zahl zweimal gebraucht wird: einmal fuer den sichtbaren Abstand, einmal fuer die unsichtbare Bruecke, die den Zeiger nicht abreissen laesst. */ --wp--custom--nav--gap: 0.6rem; /* Ein Hundertstel der tatsaechlichen Fensterhoehe. Das Skript setzt den Wert und haelt ihn beim Groessenwechsel nach. Warum nicht einfach svh: die Einheit bezieht sich auf den aeussersten Viewport, nicht auf den Rahmen, in dem die Seite wirklich steht. Gemessen im Vorschaufenster: 100svh = 1283px bei einer echten Fensterhoehe von 979px. Alles, was daran haengt - Hero-Hoehe, Klebestrecke, Scroll-Fortschritt - rechnet dann mit zwei verschiedenen Massen und laeuft auseinander. Der Rueckfall auf 1svh gilt nur, solange kein Skript laeuft. */ --wp--custom--vh: 1svh; /* Breite des Logos im Hero, bevor es in den Kopf faehrt. Die Obergrenze ist an der Satzbreite gemessen und nicht gewaehlt: bei mehr als 34rem laeuft die Wortmarke in Fassung F ueber den hellen Teil der Zeichnung hinaus und steht mit dem linken Ende auf dem dunklen Geruest. */ --wp--custom--logo--breite: clamp(15rem, 38vw, 34rem); /* ---------- Raster ---------- Die Kopfhoehe ist ein Token, seit der Kopf ueberall klebt und damit im Fluss steht: ein bildschirmhoher Hero muss sie abziehen, sonst ist die Seite um genau diesen Betrag zu hoch und es entsteht ein Rest, den niemand sehen will. Zwei Orte, ein Wert - sonst driften sie auseinander. */ --wp--custom--kopf--hoehe: 5rem; --wp--custom--layout--content: 46rem; --wp--custom--layout--wide: 78rem; --wp--custom--layout--gutter: clamp(1.25rem, 4vw, 3rem); --wp--custom--layout--columns: 12; /* ---------- Schrift, Familie ---------- Fliesstext: Roboto. Titel: Jost (Operator-Entscheid 2026-07-30). Der Name "condensed" bleibt stehen, weil daran rund dreissig Regeln quer durch layout.css und unterseiten.css haengen. Er bezeichnet ab jetzt die ROLLE "grosse Ueberschrift", nicht mehr die Breite - Jost ist normal breit. Umbenennen waere eine Suchen-und-Ersetzen-Aktion ohne Gegenwert und eine Fehlerquelle kurz vor der Vorlage im Partnerkreis. */ --wp--preset--font-family--sans: "PJM Sans", "Helvetica Neue", Arial, sans-serif; --wp--preset--font-family--condensed: "PJM Display", "PJM Sans", "Helvetica Neue", Arial, sans-serif; /* Zweite Titel-Rolle: kleine Auszeichnungen und Kachel-Titel. Sie liefen bisher auf dem Fliesstext mit und blieben deshalb beim ersten Wurf zurueck. Eigenes Token, damit die Roboto-Fassung sie unveraendert auf Roboto zurueckstellen kann. */ --wp--preset--font-family--titel: "PJM Display", "PJM Sans", "Helvetica Neue", Arial, sans-serif; /* ---------- Schrift, Fliesstext. In beiden Versionen gleich ---------- */ --wp--preset--font-size--xs: 0.8125rem; --wp--preset--font-size--sm: 0.9375rem; --wp--preset--font-size--md: 1.0625rem; --wp--custom--line-height--body: 1.62; --wp--custom--line-height--tight: 1.18; --wp--custom--weight--body: 400; /* ---------- Bewegung ---------- Version A nutzt nur Zustandswechsel. Version B setzt --wp--custom--motion--reveal auf einen Wert > 0. */ --wp--custom--transition--state: 180ms cubic-bezier(0.2, 0.6, 0.2, 1); --wp--custom--transition--slow: 620ms cubic-bezier(0.16, 0.7, 0.2, 1); --wp--custom--motion--reveal: 0px; --wp--custom--motion--parallax: 0; /* ---------- Radien. Bewusst nahe null: Rahmen und Rundungen wurden im Rundschreiben ausdruecklich kritisiert (K7). ---------- */ --wp--custom--radius--none: 0; --wp--custom--radius--hair: 2px; /* ---------- Bildbehandlung ---------- Ein durchgehender Farblook ueber alle Bilder. Ausdruecklich gewuenscht (Register 10.2) und Abgrenzungsmerkmal. Umsetzung: leichte Entsaettigung plus Marineblau-Schleier. */ --wp--custom--image--filter: saturate(0.72) contrast(1.04) brightness(1.02); --wp--custom--image--veil: linear-gradient( to bottom, rgba(0, 48, 91, 0.14), rgba(0, 48, 91, 0.06) 45%, rgba(7, 31, 78, 0.20) ); } /* ============================================================ Stellschraube Akzentfarbe. Drei Toene, umschaltbar ohne Markup-Aenderung. ============================================================ */ /* Der Wash am 2026-09-10 auf den neuen Akzent nachgezogen (255, 196, 47 statt 244, 158, 0). Die Textfassung #96610A bleibt, wo sie steht: Sie ist kein aufgehellter Akzent, sondern der abgedunkelte Wert, der auf Weiss 4,5:1 erreicht. Der neue Akzent selbst kommt auf 1,6:1 - er traegt Zierde, niemals Schrift. */ :root[data-accent="orange"] { --wp--preset--color--accent: var(--wp--preset--color--accent-orange); --wp--preset--color--accent-text: #96610A; --wp--preset--color--accent-wash: rgba(255, 196, 47, 0.12); } :root[data-accent="gelb"] { --wp--preset--color--accent: var(--wp--preset--color--accent-gelb); --wp--preset--color--accent-text: #8A6300; --wp--preset--color--accent-wash: rgba(255, 196, 48, 0.14); } /* ============================================================ Stellschraube Ueberschriften. Loest die Typo-Haltung vom Versions-Schalter, damit beide Stellschrauben unabhaengig voneinander erfahrbar sind. Ohne Attribut gilt der Default der jeweiligen Version. ============================================================ */ :root[data-headings="ruhig"] { --wp--custom--case--display: none; --wp--custom--tracking--display: -0.01em; --wp--custom--weight--display: 500; --wp--preset--font-size--display: clamp(1.75rem, 1.35rem + 1.5vw, 2.25rem); --wp--preset--font-size--xxl: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); } :root[data-headings="gross"] { --wp--custom--case--display: uppercase; --wp--custom--tracking--display: 0.13em; --wp--custom--weight--display: 250; --wp--preset--font-size--display: clamp(2.25rem, 1.3rem + 3.6vw, 3.5rem); --wp--preset--font-size--xxl: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem); } /* ============================================================ Stellschraube Titelschrift. ------------------------------------------------------------ Zwei Fassungen nebeneinander, nichts wird ersetzt: Standard ist Jost (Operator-Entscheid 2026-07-30), der alte Stand liegt vollstaendig unter [data-schrift="roboto"]. Warum "html:root" und nicht nur ":root": theme-a.css und theme-b.css laden NACH dieser Datei und setzen dieselben Variablen bei gleicher Spezifitaet - die spaetere Regel gewinnt. Das zusaetzliche html hebt die Spezifitaet um einen Typselektor an und macht die Schraube damit unabhaengig von der Ladereihenfolge. (Dieselbe Falle liegt bei der Stellschraube Ueberschriften darueber; sie ist dort noch offen und wird bewusst nicht in diesem Schritt angefasst.) Alle Ueberschriften der Seite haengen an genau EINER Variablen, --wp--preset--font-family--condensed. Der Eingriff ist deshalb eine Zeile plus Feinjustierung, kein Umbau. ============================================================ */ /* Die Rueckfahrkarte: der Stand vom 2026-07-28, vollstaendig. Nichts wurde geloescht, die alte Fassung ist einen Klick weit entfernt und laesst sich nebeneinander vergleichen. */ html:root[data-schrift="roboto"] { --wp--preset--font-family--condensed: "PJM Sans Condensed", "PJM Sans", "Helvetica Neue", Arial, sans-serif; --wp--preset--font-family--titel: "PJM Sans", "Helvetica Neue", Arial, sans-serif; } /* Version A, gemischte Schreibung. Roboto Condensed lief hier auf 500. Jost traegt bei gleicher Strichstaerke optisch schwerer, weil die Formen geometrisch und offen sind; 350 ergibt dieselbe Masse bei deutlich mehr Ruhe. Die Laufweite geht von -0.01em auf +0.005em: das ist das "ganz zart auseinander" aus dem Befund, nicht mehr. */ html:root:not([data-schrift="roboto"])[data-version="a"], html:root:not([data-schrift="roboto"])[data-headings="ruhig"] { --wp--custom--weight--display: 350; --wp--custom--weight--heading: 400; --wp--custom--tracking--display: 0.005em; } /* Version B, versale Schreibung. Hier steht die Schrift der Wortmarke am naechsten: sehr leicht, weit gesperrt. Gegenrechnung: Jost ist eine normal breite Grotesk, Roboto Condensed eine schmale. Versalien laufen dadurch spuerbar breiter, und deutsche Ueberschriften sind lang. Die Anfangsgroesse geht deshalb zurueck, damit auf 375 px nichts ueber den Rand laeuft - nachgemessen, nicht geschaetzt. */ html:root:not([data-schrift="roboto"])[data-version="b"], html:root:not([data-schrift="roboto"])[data-headings="gross"] { --wp--custom--weight--display: 300; --wp--custom--weight--heading: 400; --wp--custom--tracking--display: 0.155em; --wp--preset--font-size--display: clamp(1.875rem, 1.15rem + 2.9vw, 3rem); --wp--preset--font-size--xxl: clamp(1.4375rem, 1.1rem + 1.5vw, 2.125rem); }