/* ============================================================ ASSESI — DESIGN TOKENS (Kit, konsolidiert) Single Source of Truth für assesi.eu UND assesi-label.eu Farbquelle: Farben_Fonts.docx (CI-/Logo-verbindlich) Schrift: Noto Sans (Display) + Instrument Sans (Fließtext) Aufbau: gemeinsamer :root-Kern + zwei Charakter-Themes (.theme-assesi institutionell / .theme-label wärmer). Die Theme-Klasse wird per functions.php domain-abhängig am gesetzt; sie funktioniert aber auf jedem Container. ============================================================ */ :root{ /* ---- CI-Kernfarben (verbindlich) ---- */ --ci-gold:#F5C503; --ci-navy:#020044; --ci-blue:#3055A0; --ci-lime:#B4CD00; --ci-white:#FFFFFF; /* ---- Flächen (Navy-getönte Neutralwerte) ---- */ --surface-page:#FFFFFF; --surface-soft:#F7F7F5; --surface-mute:#EFEFF2; --surface-invert:var(--ci-navy); /* ---- Text (CI: nur Navy/Weiß/Blau) ---- */ --text-strong:var(--ci-navy); --text-body:var(--ci-navy); --text-soft:rgba(2,0,68,.62); /* --text-faint stand bei .45 und ergab 3,24:1 — unter AA (4,5) fuer normalen Text. Im Abzug ueber alle 59 Seiten war das der haeufigste Kontrastbefund: Traegerzeile, Blog-Meta, Logoplatz, Downloadzeile. .58 ergibt im schlechtesten Fall 4,84:1, gerechnet gegen alle vier Flaechen (Weiss, soft, mute, panel). Das Minimum waere .56 mit 4,52 gewesen; die zwei Hundertstel mehr sind Luft, keine Willkuer. WAS DAMIT AUFFAELLT: --text-soft steht bei .62. Zwischen .58 und .62 liegt kaum noch ein sichtbarer Unterschied — die dritte Textstufe traegt sich ueber Deckkraft nicht mehr. Das ist kein Versehen dieser Aenderung, sondern war vorher schon so: Eine dritte Stufe UNTER --text-soft kann auf hellem Grund kein AA erreichen. Wo eine Abstufung noetig ist, kommt sie ueber Groesse, Gewicht und Versalabstand — nicht ueber blassere Schrift. */ --text-faint:rgba(2,0,68,.58); --text-on-dark:var(--ci-white); --text-link:var(--ci-blue); /* ---- Linien / Rahmen ---- */ --border:rgba(2,0,68,.12); --border-strong:rgba(2,0,68,.22); --border-on-dark:rgba(255,255,255,.16); /* ---- Typografie ---- */ --font-display:'Noto Sans',system-ui,sans-serif; --font-body:'Instrument Sans',system-ui,sans-serif; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:1.0625rem; --fs-md:1.1875rem; --fs-lg:1.375rem; --fs-xl:clamp(1.5rem,1.10rem + 1.4vw,1.75rem); --fs-2xl:clamp(1.875rem,1.40rem + 2.0vw,2.375rem); --fs-3xl:clamp(2.25rem,1.60rem + 2.8vw,3rem); --fs-display:clamp(2.5rem,1.70rem + 3.6vw,3.875rem); --lh-tight:1.08; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.7; --lh-loose:1.85; --ls-tight:-.03em; --ls-snug:-.015em; --ls-normal:0; --ls-wide:.08em; --ls-caps:.12em; /* ---- Abstände ---- */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-11:6rem; --space-12:8rem; /* Sektionsabstand. Er wirkt DOPPELT: unten an der einen Sektion, oben an der naechsten. Bei den frueheren 6rem standen zwischen zwei Sektionen 192px — auf einer textlastigen Seite wie /konsultation reisst das den Zusammenhang auseinander. 4.5rem ergeben 144px; das trennt weiterhin deutlich, ohne dass die Seite in Einzelteile zerfaellt. */ --section-y:clamp(3rem,5.5vw,4.5rem); --section-x:clamp(1.25rem,5vw,3.5rem); /* ---- Radien: das System sind drei Rollen — Karte/Button/Chip — je Theme gesetzt (siehe --r-card/--r-btn/--r-chip weiter unten). Keine separate Stufen-Skala nötig. ---- */ /* ---- Elevation (Navy-getönt) ---- */ --shadow-xs:0 1px 2px rgba(2,0,68,.06); --shadow-sm:0 2px 8px rgba(2,0,68,.06); --shadow-md:0 8px 24px rgba(2,0,68,.10); --shadow-lg:0 18px 48px rgba(2,0,68,.14); /* ---- Bewegung ---- */ --dur-fast:.18s; --dur-base:.32s; --dur-slow:.6s; --ease-out:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.65,0,.35,1); /* ---- Hero-Hintergrundbild ------------------------------------------ Liegt in der WordPress-Mediathek, nicht im Theme: Es ist ein lizenziertes Stockfoto des Kunden. Ein anderes Bild wird hier eingetragen — die Adresse aus der Mediathek (Datei anklicken, Feld „Datei-URL"). GEHOERT ZUSAMMEN mit --hero-schleier. Der Schleier ist keine Deko: Der Hero setzt navyfarbenen Text, das Bild bringt aber dunkle Stellen mit (unscharfe Solarmodule). Ohne Schleier haengt die Lesbarkeit daran, welcher Bildpunkt gerade hinter dem Wort liegt. Nachgerechnet gegen den SCHLECHTESTEN Fall, ein schwarzer Bildpunkt: .70 → --text-soft 4,33:1 — faellt unter AA .75 → --text-soft 4,61:1 — reicht knapp .78 → --text-soft 4,78:1 — der gesetzte Wert, mit Luft Navy liegt dort bei 11,4:1. Wer den Wert senkt, senkt ihn unter AA. --hero-bildlage haelt den Schmetterling im Bild, wenn der Ausschnitt schmaler wird; die Solarmodule wandern dabei nach links aus dem Bild. */ --hero-bild:url("https://assesi-label.eu/wp-content/uploads/2026/08/shutterstock_2037886091-scaled.jpg"); --hero-bildlage:68% 42%; --hero-schleier:.78; /* Grund unter dem Bild. Sichtbar, solange das Bild laedt — und in der Vorschau, die die Mediathek nicht erreicht. */ --hero-grund:var(--ci-white); /* ---- Fokus / A11y ---- */ --focus-ring:var(--ci-blue); --shadow-focus:0 0 0 3px rgba(48,85,160,.45); /* ---- Semantische Defaults (von Themes überschrieben) ---- */ --nav-bg:var(--ci-navy); --nav-fg:var(--ci-white); --accent:var(--ci-blue); --accent-2:var(--ci-lime); --eyebrow:var(--ci-blue); --cta-bg:var(--ci-gold); --cta-fg:var(--ci-navy); --r-card:12px; --r-btn:12px; --r-chip:8px; /* Eingabefelder folgen bewusst NICHT --r-chip. Bei .theme-label ist das die Pillenform (100px) — richtig fuer Sprungmarken und Etiketten, falsch fuer ein Textfeld: Ein mehrzeiliges Feld wird damit zur Linse, und der Text kollidiert mit der Rundung. Der Feldradius ist deshalb in beiden Marken derselbe. */ --r-field:12px; /* Lesebreite fuer laengeren Fliesstext. Bewusst in rem, nicht in ch: `ch` misst die Breite der Null, und Instrument Sans hat eine breite. 72ch ergaben im Browser 815px — rund 95 Zeichen je Zeile statt der gemeinten 72. 38rem sind bei 17px Schrift rund 70. */ --lesebreite:38rem; /* Breite des Sektionskopfs. Dort steht eine Ueberschrift, die groesser setzt als der Fliesstext und deshalb mehr Raum vertraegt. Vorher stand hier `60ch` — dieselbe Falle wie oben: im Browser gemessen 679px, also rund 95 Zeichen Fliesstext. Der Vorspann darunter laeuft weiterhin auf --lesebreite, damit sich nur die Ueberschrift breiter setzen darf. 48rem statt 42rem seit 0.39.0: Bei 42rem brachen Ueberschriften wie „Unterlagen zum Herunterladen" frueh um — Kundenbefund vom 07.08.2026. */ --kopfbreite:48rem; --card-border:1px solid var(--border); --card-shadow:none; --panel-bg:var(--ci-white); } /* ============================================================ THEME: assesi.eu — institutionell (validiert) ============================================================ */ .theme-assesi{ /* Akzent, der als Schrift auf hellem Grund zulaessig ist. In beiden Marken EU-Blau: --accent-2 ist bei .theme-assesi Gold und faellt als Textfarbe unter AA (siehe Kontrastregel unten). */ --accent-ink:var(--ci-blue); --nav-bg:var(--ci-navy); --nav-fg:var(--ci-white); --accent:var(--ci-blue); --accent-2:var(--ci-gold); --eyebrow:var(--ci-blue); --cta-bg:var(--ci-gold); --cta-fg:var(--ci-navy); /* Karten näher an warm (runder, weicher Schatten), aber dezenter als .theme-label — Differenzierung bleibt über Akzentfarbe/Nav/Radius-Maß. */ --r-card:16px; --r-btn:12px; --r-chip:8px; --card-border:1px solid rgba(2,0,68,.06); --card-shadow:0 10px 28px rgba(2,0,68,.08); --panel-bg:var(--ci-white); } /* ============================================================ THEME: assesi-label.eu — wärmer (validiert) ============================================================ */ .theme-label{ /* Akzent, der als Schrift auf hellem Grund zulaessig ist. In beiden Marken EU-Blau: --accent-2 ist bei .theme-assesi Gold und faellt als Textfarbe unter AA (siehe Kontrastregel unten). */ --accent-ink:var(--ci-blue); --nav-bg:var(--ci-white); --nav-fg:var(--ci-navy); --accent:var(--ci-lime); --accent-2:var(--ci-blue); --eyebrow:var(--ci-navy); --cta-bg:var(--ci-lime); --cta-fg:var(--ci-navy); --r-card:22px; --r-btn:100px; --r-chip:100px; --card-border:1px solid rgba(2,0,68,.05); --card-shadow:0 14px 34px rgba(2,0,68,.10); --panel-bg:#FCFDF8; } /* Hinweis: Lime/Gold sind Flächen-/Akzentfarben, NICHT Textfarbe auf Weiß (Kontrast < AA). Fließ-/Sekundärtext bleibt Navy. */