/* ============================================================ PRÜFMAGAZIN — DESIGN-TOKENS (Fundament) Zentrale, verbindliche Werte. Neue Templates nutzen NUR diese Variablen — keine Einzelwerte mehr. Lädt vor pm.css. Umschaltpunkt Desktop/Mobil: max-width:900px. Stand 08/2026 — Änderungen dieser Fassung: - Schriftgrößen in rem statt px (skalieren mit der Browser-Grundschrift des Nutzers, WCAG 1.4.4). ACHTUNG: Astra setzt unter 921px html{font-size:91.2%} — mobil fällt dadurch alles um 8,8% kleiner aus. Ist so gewollt und in den Minimalwerten unten eingerechnet. - --schwach von #98A0AC auf #6E7788: alter Wert hatte auf Weiß nur 2,6:1 Kontrast und verfehlte WCAG AA (4,5:1). - Überschriften eine Stufe kleiner, H1 zusätzlich als eigene Textseiten-Variante (siehe Seitentypen unten). - Neu: H4, Zeilenhöhen, Zeilenlänge (--measure). - Radius als zwei Stufen statt eines toten Tokens. Alle clamp() lesen sich: clamp(Handy, Rechnung, Desktop). Der Wechsel läuft linear zwischen 400px und 1400px Breite. ============================================================ */ /* ============================================================ SCHRIFT — lokal, eine Variable-Font-Datei Inter als WOFF2 Variable, nur Latin. Eine Datei deckt alle Schnitte von 400 bis 700 ab (~30 kB) und ersetzt die vier Einzeldateien vom Google-CDN. Kein fremder Server, keine IP-Uebertragung, ein Request statt fuenf. font-display:swap zeigt sofort die Systemschrift und tauscht nach — nie unsichtbarer Text. Datei liegt in astra-child/assets/fonts/ ============================================================ */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:400 700; /* Variable-Bereich, nicht ein Schnitt */ font-display:swap; src:url("fonts/inter-latin-variable.woff2") format("woff2-variations"), url("fonts/inter-latin-variable.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } :root{ /* Farben */ --blau:#1B263B; --blau-2:#415A77; --akzent:#B8863B; --akzent-hell:#D0A05C; --grau:#667182; /* Fließtext grau — 4,9:1 auf Weiß */ --schwach:#6E7788; /* Kleintext grau — 4,5:1 auf Weiß */ --linie:#E0E1DD; --flaeche:#F7F7F5; --gruen:#2F7A54; /* Status "geprueft" — 4,6:1 auf Weiss. Wurde in pm-projekt.css achtmal genutzt, war hier aber nie definiert: der Punkt neben dem Status blieb unsichtbar. */ --hell:#C3C8D0; /* NUR Linien/Flächen, nie Text */ /* Bereichsfarben — die drei Bewertungsbereiche tragen dieselben Farben wie auf /testprozess. Standen bisher als Hexwerte im Projekt-CSS. */ --ber-1:#2C4A6E; /* Produktspezifische Eigenschaften */ --ber-2:#3E6B54; /* Nutzung & Sicherheit */ --ber-3:#B8863B; /* Meinung & Service */ /* Zwei Werte, die bisher nur in pm.css standen */ --fehler:#C0392B; /* Feldrahmen bei fehlerhafter Eingabe */ --akzent-flaeche:#FDF9F3; /* sehr helle Goldfläche, Zitatblöcke */ /* Schriftfamilie — stand bisher in pm.css und ging beim Entrümpeln dort verloren. Gehört als Token hierher. */ --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; /* Abstände — strukturell (Desktop) */ --sp-sec:96px; --sp-lead:48px; --sp-col:64px; --sp-block:32px; --sp-card:24px; --sp-foot:40px; /* Abstände — typografisch (Desktop wie Mobil) */ --tp-kicker:12px; --tp-head:16px; --tp-para:12px; --tp-title:8px; --tp-abs:20px; /* Abstand zwischen Absaetzen im Fliesstext. --tp-para (12px) ist der Abstand unter einem Lead; bei Zeilenhoehe 1.84 lesen sich 12px zwischen Absaetzen als kein Abstand. */ --sp-mod:32px; /* Abstand zwischen den Bausteinen einer Sektion, wenn sie mobil untereinander stehen. */ /* Schriftgrößen — Klartext: Handy → Desktop */ --fs-h1:clamp(2rem, 1.5rem + 2vw, 3.25rem); /* 32 → 52 */ --fs-h1-text:clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem); /* 28 → 40 */ --fs-h2:clamp(1.5rem, 1.3rem + 0.8vw, 2rem); /* 24 → 32 */ --fs-h3:clamp(1.125rem, 0.975rem + 0.6vw, 1.5rem); /* 18 → 24 */ --fs-h4:1.125rem; /* 18 */ --fs-lead:1.0625rem; /* 17 */ --fs-body:1rem; /* 16 */ --fs-small:0.9rem; /* 14,4 */ --fs-kicker:0.75rem; /* 12 */ --fs-cat:0.75rem; /* 12 */ --fs-more:0.8125rem; /* 13 */ /* Zeilenhöhen */ --lh-head:1.15; /* Überschriften */ --lh-body:1.6; /* Fließtext */ --lh-lead:1.7; /* Lead */ /* Zeilenlänge — 66 Zeichen ist das Leseoptimum */ --measure:66ch; --measure-lead:56ch; /* Radien */ --radius-s:10px; /* Chips, Felder, kleine Kacheln */ --radius-l:14px; /* Karten, Panels, Bühnen */ --radius:var(--radius-s); /* Altbestand, nicht mehr neu verwenden */ /* Animation */ --rv-y:28px; --rv-t:.5s; --rv-stagger:.09s; --ease:cubic-bezier(.2,.75,.3,1); /* Hover und Zustandswechsel — verbindlich fuer ALLE Seiten. Material- und Apple-Richtwerte liegen bei 200-300 ms fuer kleine Bewegungen; darunter wirkt es abgehackt. Zwei Stufen: --t-hover fuer Farbe, Rand, kleine Versaetze --t-panel fuer Aufklappen, Reiterwechsel, groessere Wege --ease-out startet schnell und laeuft weich aus (Standard fuer Bewegungen, die auf eine Nutzeraktion antworten). */ --t-hover:.34s; --t-panel:.42s; --ease-out:cubic-bezier(.22,.61,.36,1); --shadow:0 16px 44px rgba(27,38,59,.06); } @media(max-width:900px){ :root{ --sp-sec:64px; --sp-lead:32px; --sp-col:40px; --sp-block:24px; --sp-card:16px; --sp-foot:32px; --rv-y:18px; --rv-t:.4s; --rv-stagger:.05s; } } /* ============================================================ SEITENTYPEN Ein Wort im HTML entscheidet über den Auftritt der Seite. Es werden nur Variablen umgehängt — keine Sonderregeln, keine Ausnahmen im Seiten-CSS. Landingpage (Standard):
Textseite:
============================================================ */ .pm-text-page{ --fs-h1:var(--fs-h1-text); /* 28 → 40 statt 32 → 52 */ --hero-min:auto; /* Kopf so hoch wie sein Inhalt: Verzeichnis- und Werkzeugseiten haben keine Buehne zu fuellen, eine feste Mindesthoehe erzeugt dort nur ein Loch */ --fs-h2:clamp(1.375rem, 1.225rem + 0.6vw, 1.75rem); /* 22 → 28 */ --sp-sec:72px; /* ruhigerer Rhythmus */ --sp-lead:32px; } @media(max-width:900px){ .pm-text-page{ --sp-sec:52px; --sp-lead:24px; } }