/* SeedHub B2B — Design Tokens (einzige Quelle) * * Diese Datei enthaelt AUSSCHLIESSLICH die :root-Custom-Properties und wird * in ZWEI Kontexten geladen: * 1. Frontend — als Abhaengigkeit von hgi-main (siehe functions.php) * 2. Block-Editor — via add_editor_style(), VOR hgi-blocks.css * * Warum getrennt: hgi-blocks.css nutzt 16 dieser Tokens, lag im Editor aber * ohne ihre Definition vor (nur hgi-blocks.css war als Editor-Style * registriert, die Tokens steckten in hgi.css). Folge im Editor: jedes * "color: var(--hgi-...)" war invalid-at-computed-value-time und wurde * verworfen — die Eigenschaft fiel auf den GEERBTEN Wert zurueck. Bei der * hellen Hero-Variante erbte die Ueberschrift dadurch das Weiss, das * WordPress ueber die automatische Klasse .is-dark-theme am Cover-Block * setzt: weisse Schrift auf hellem Grund, Kontrast 1.0, unlesbar. * Ausserdem fielen alle Ueberschriften auf Times zurueck, weil auch * --hgi-font-display leer war. * * hgi.css als Ganzes in den Editor zu laden waere der naheliegende, aber * falsche Weg: die Datei enthaelt die komplette Website-Chrome (Navigation, * Footer, Warenkorb, Quick-Order-Matrix) und wuerde den Editor-Canvas * verunstalten. Tokens getrennt halten loest es ohne Doppelpflege. */ :root { --hgi-primary: #3d1b04; /* Zwei Gruens, und das ist der Punkt. * * Der Entwurf v84 enthielt beide: die Logo-SVG traegt #71bf80, das * Overlay-Stylesheet setzt an allen Flaechen #a8d3a8 — deutlich heller und * blasser. Am 15.09. wurde erst das Logo-Gruen fuer alles genommen, dann * korrigiert: die Wortmarke behaelt ihr eigenes Gruen, Inhaltsflaechen * bekommen den helleren Ton. Genau dafuer waren die beiden Tokens von * Anfang an gedacht. * * --hgi-accent Flaechen, Pillen, Haken, Hover-Zustaende, Laufband * --accent-logo ausschliesslich die Wortmarke * * Kontrast nachgerechnet: Braun auf #a8d3a8 ergibt 9,25:1 und liegt damit * besser als auf dem Logo-Gruen (6,98:1) — der Wechsel verbessert die * Lesbarkeit auf den gruenen Karten. WEISS auf #a8d3a8 liegt bei 1,67:1; * auf dieser Flaeche darf weder weisser Text noch ein weisser Button * stehen. Alle 26 Regeln mit Akzent-Hintergrund sind daraufhin geprueft und * paaren ihn mit --hgi-ink bzw. --hgi-primary. */ --hgi-accent: #a8d3a8; --accent-logo: #71bf80; --hgi-accent-ink: #270e01; /* Aus dem Akzent gemischt statt separat gepflegt: so zieht der helle Flaechenton beim naechsten Farbwechsel automatisch mit, statt als vergessener Rest in der alten Farbwelt stehenzubleiben. */ --hgi-accent-bg: color-mix(in oklab, var(--hgi-accent) 30%, #fff); --hgi-bg: oklch(0.985 0.004 100); --hgi-bg-soft: oklch(0.96 0.005 100); --hgi-ink: oklch(0.20 0.05 51); /* Fliesstext (p, ul, ol …) traegt immer Astras Textfarbe (Dirk, 09.10.2026). Astra gibt sie als --ast-global-color-3 aus (Customizer › Global › Farben, derzeit #474e57) und faerbt damit selbst body. Vorher stand hier ein eigener Wert (oklch 0.38 0.045 51), ein warmes Braungrau neben Astras kuehlem Grau. Alle 39 Verwendungen von --hgi-ink-2 sind Textfarben und ziehen jetzt mit, wenn der Wert im Customizer wechselt. Fallback fuer Kontexte ohne Astra-Palette. */ --hgi-ink-2: var(--ast-global-color-3, #474e57); --hgi-ink-3: oklch(0.58 0.03 51); --hgi-ink-4: oklch(0.80 0.015 51); --hgi-line: oklch(0.90 0.01 51); --hgi-line-2: oklch(0.82 0.015 51); --hgi-danger: oklch(0.62 0.18 30); /* Bestands-Ampel, abgeleitet aus dem Logo-Gruen (Dirk, 24.09.2026). * * --accent-logo #71bf80 entspricht oklch(0.745 0.115 149). Die beiden * Warnstufen behalten seine Helligkeit und drehen nur den Farbton, damit * die drei als eine Familie lesbar bleiben statt wie drei geliehene * Signalfarben zu wirken. * * Beim Rot ist die Helligkeit bewusst niedriger und das Chroma hoeher: * Mit L 0.745 kaeme ein Lachston heraus, der neben dem Orange nicht mehr * als Warnung liest. Das ist die eine Abweichung von der reinen * Ableitung, und sie ist Absicht. * * Werte statisch statt ueber oklch(from …): Die relative Farbsyntax * koennen aeltere Browser nicht, und eine Ampel, die dort farblos bleibt, * waere schlechter als eine mit ausgeschriebenen Werten. */ --hgi-ampel-reichlich: oklch(0.745 0.115 149); --hgi-ampel-begrenzt: oklch(0.745 0.135 70); --hgi-ampel-knapp: oklch(0.62 0.175 28); --hgi-surface: #fff; /* Bildkante: seit 28.09.2026 dieselbe helle Linie wie Tabellen und Trenner (Jonas ueber Dirk). Damit traegt die ganze Seite EINEN Linienton statt zweier. VORHER war hier #131313 — exakt der Ton des schwarzen Dreiecks, das die JTL-Produktbilder unten links tragen (gemessen an drei Bildern). Begruendung damals (Dirk, 10.09.): Die Bilder laufen bis an die Kante schwarz aus, eine helle Haarlinie setzt sie sichtbar davon ab. Diese Beobachtung bleibt richtig — sie ist jetzt nur nicht mehr der Ausschlag gebende Punkt. Wer die dunkle Kante zurueckholen will, aendert diese eine Zeile; alle acht Fundstellen haengen daran. ALIAS statt zweitem Literal, wie --accent-logo seit 1.39.0: Beide Werte fallen jetzt zusammen und koennen als Alias nicht auseinanderlaufen. Der eigene Name bleibt, falls Bildkanten spaeter doch wieder einen eigenen Ton brauchen. */ --hgi-img-edge: var(--hgi-line); /* Dunkelbraun fuer dunkle Flaechen. --hgi-primary (#3d1b04, L~0.25) liest sich auf einer grossen Flaeche fast schwarz; dieser Ton ist derselbe Braun-Hue, nur hell genug, um als Braun erkennbar zu bleiben, und traegt weisse Schrift weiterhin mit ~10:1. Getrennter Token, damit die Marken-Primaerfarbe (Buttons) unberuehrt bleibt. Seit 1.81.0 tragen alle dunklen Leisten diesen Ton: Quick Order, PDP-Sticky und Fussleiste (T90). */ --hgi-brown-dark: #4a2a12; --hgi-font-display: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif; --hgi-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif; --hgi-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Eine Rundung fuer alles, wie die Produktbilder (Dirk, 09.10.2026). * Ausnahmen nur Pills (999px) und Kreise (50%). Die drei Namen bleiben, * damit die rund 70 Stellen, die sie nutzen, nicht umbenannt werden * muessen; sie tragen aber denselben Wert. Vorher 6/10/16px, gemessen * waren 12 verschiedene Rundungen zwischen 3 und 16px im Einsatz. */ --hgi-radius-sm: 6px; --hgi-radius: var(--hgi-radius-sm); --hgi-radius-lg: var(--hgi-radius-sm); --hgi-max: 1200px; /* Der Seitenrand als EIN Wert, in rem (Freigabe Dirk, 24.09.2026). * * Bis dahin standen drei Zahlen fuer dieselbe Sache: 28px als Untergrenze * der beiden Rinnen, 20px in Astras .ast-container (und damit an der * .entry-content, also an der ACHSE), 35px am Kopfbereich. Unterhalb von * 1264px, wo die 1200er-Spalte nicht mehr passt, wurde daraus ein * sichtbarer Versatz: die beiden alignwide-Bloecke standen auf 28, alles * uebrige auf 20 — 8px Unterschied an derselben Kante. * * Achtung bei der Umrechnung: Astra setzt html auf 93.75%, die rem-Basis * ist hier also 15px und nicht 16. 1.5rem sind 22,5px. */ --hgi-rand: 1.5rem; /* Der senkrechte Rhythmus, in drei Werten (Dirk, 24.09.2026). * * Vorher addierten sich drei Quellen: Astras Block-Polster (45px an jedem * Block), eigene Polster (24/32/48/52/56/64) und eigene Aussenabstaende * (48/64). Gemessen ergab das Abstaende zwischen 90px und 168px — ohne * erkennbares System, und am auffaelligsten dort, wo es am wenigsten * hingehoert: 90px zwischen der Ueberschrift "Topseller diesen Monat" und * ihrem eigenen Produktraster. * * --hgi-abschnitt der EINE Abstand zwischen zwei Abschnitten. Er kommt * vom folgenden Abschnitt als margin-block-start, nie * als Summe aus zwei Polstern. * --hgi-innen Innenpolster, nur fuer Abschnitte mit eigener Flaeche * (Grund, Rahmen, Karte). Wer keine Flaeche hat, * bekommt keins — sein Abstand steht schon oben. * --hgi-titel Kopfzeile zu Inhalt innerhalb eines Abschnitts. * * In rem, damit der Rhythmus mit Astras responsiver Schriftbasis * mitwandert (15px am Schreibtisch, 13,68px am Telefon) — 5rem sind * damit 75px oben und 68px am Telefon, ohne eigene Haltepunkte. * * 3rem statt 5rem (Dirk, 09.10.2026: "die Abstaende in der Desktop- * Version stimmen nicht mehr"). 5rem = 75px lagen deutlich ueber den * 32 bis 48px aus Jonas' Entwurf v85; 3rem = 45px am Schreibtisch. */ --hgi-abschnitt: 3rem; --hgi-innen: 3rem; --hgi-titel: 2rem; /* Zwei Rinnen, und das ist der Punkt. * * --hgi-gutter rechnet mit 100% und meint damit die BREITE DES ELTERN- * ELEMENTS. Das ist richtig fuer Abschnitte, deren Inhalt anschliessend * ueber "layout: constrained" auf --hgi-max zentriert wird; dort ist das * Polster nur der Mindestabstand zum Bildschirmrand. * * --hgi-gutter-vw rechnet mit 100vw, also mit dem FENSTER. Das braucht * jeder vollbreite Abschnitt, der seinen Inhalt selbst auf die Achse * setzt, statt ihn zentrieren zu lassen — etwa weil seine Linien oder * seine Flaeche ueber die ganze Breite laufen sollen. * * Der Unterschied ist am 21.09.2026 teuer geworden: Der Spec-Strip bekam * --hgi-gutter, sein Elternelement .entry-content ist aber selbst nur * 1200 px breit. (100% - 1200px) / 2 ergab damit 0, die Untergrenze von * 28 px griff, und der Abschnitt stand an jeder Fensterbreite exakt 28 px * neben der Achse. Wer hier "100%" schreibt, wo "100vw" gemeint ist, * bekommt einen Fehler, der wie ein Abstandsproblem aussieht. */ --hgi-gutter-vw: max(var(--hgi-rand), calc((100vw - var(--hgi-max)) / 2)); --hgi-nav-h: 56px; } /* Eine Definition der Inhaltsspalte — bis v1.37 gab es zwei. * * Normale und "alignwide"-Bloecke richten sich nach Astras Container, die * vollbreiten Abschnitte rechneten mit * "max(28px, calc((100vw - 1200px) / 2))". Beide Werte fielen unterschiedlich * aus; sichtbar wurde es daran, dass Ueberschrift und Produktraster der * Topseller rund 45px weiter innen standen als jeder andere Abschnitt. * * 100% statt 100vw ist der zweite Teil der Korrektur: 100vw zaehlt die * Scrollleiste mit und erzeugt auf Windows rund 15px waagerechten Ueberlauf. * 100% bezieht sich auf das Elternelement und hat das Problem nicht. */ :root { --hgi-gutter: max(var(--hgi-rand), calc((100% - var(--hgi-max)) / 2)); }