/* ========================================================================== Marktplatz Deutschland - Design-Tokens Werte aus den Computed Styles der Referenzseite erhoben (2026-08-24). Siehe mpd-analyse/02-style-spezifikation.md ========================================================================== */ :root { /* ---------- Marke ---------- */ --brand-teal: #00818b; --brand-teal-dark: #006168; --brand-navy: #1e4890; --brand-cyan: #0aa1c3; --brand-cyan-dark: #08819c; --brand-yellow: #f9e03a; /* ---------- Zielgruppen-Theme ---------- Standard = Verwaltung. [data-theme="company"] schaltet auf navy/cyan um. */ --theme-primary: var(--brand-teal); --theme-secondary: var(--brand-teal-dark); /* "in oklab" ist nicht kosmetisch: Die Referenz interpoliert ihre Schaltflaechenverlaeufe in diesem Farbraum, und der Verlauf sieht dort anders aus als in sRGB - die Mitte wird nicht ausgegraut. Am deutlichsten bei navy nach cyan auf der Unternehmensseite. */ --theme-gradient: linear-gradient(to right in oklab, var(--theme-primary), var(--theme-secondary)); /* ---------- Neutrale ---------- */ --color-fg: #0a0a0a; --color-fg-strong: #314158; --color-fg-body: #45556c; /* Gegenueber der Referenz (#62748e, rund 4,4:1 auf Weiss) leicht abgedunkelt. WCAG 1.4.3 verlangt 4,5:1 fuer Fliesstext; der Urhebervermerk im Fuss lag knapp darunter. #5a6b82 erreicht rund 5,0:1 bei praktisch gleicher Wirkung. */ --color-fg-subtle: #5a6b82; --color-bg: #ffffff; --color-surface: #ececf0; --color-border-light:#e2e8f0; --color-border: rgba(0, 0, 0, .1); /* ---------- Typografie ---------- */ --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.875rem; /* 30 */ --fs-4xl: 2.25rem; /* 36 */ --fs-5xl: 3rem; /* 48 */ --fs-6xl: 3.75rem; /* 60 */ --fs-7xl: 4.5rem; /* 72 */ --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* Überschriftengrößen in Stufen, nicht fließend. Fließende Werte waren zunächst naheliegend, treffen die Referenz aber nicht: Sie schaltet an ihren Breakpoints um. Bei 768px lieferte die clamp-Formel 43,8px statt der gemessenen 48px - genug, damit "Über den Marktplatz Deutschland" einzeilig durchlief, statt wie im Original umzubrechen. Die Stufen stehen weiter unten in Media-Queries. */ --h1-home: 2.5rem; /* 40 mobil, 60 ab 1024 */ --h1-target: 3rem; /* 48 mobil, 72 ab 1024 */ --h2: 2.25rem; /* 36 mobil, 48 ab 768, 60 ab 1024 */ /* Die Referenz kennt ZWEI H3-Rollen, nicht eine: Karten und Listenueberschriften 30/36, Feature-Rows 36/40. Vorher lief beides ueber ein Token, wodurch die Karten auf Desktop 36px statt 30px bekamen. */ --h3: 1.5rem; /* 24 mobil, 30 ab 768, Karten und Listen */ --h3-feature: 1.5rem; /* 24 mobil, 36 ab 1024, Feature-Rows */ /* ---------- Abstände, 8er-Raster ---------- */ --sp-1: 0.5rem; /* 8 */ --sp-2: 0.75rem; /* 12 */ --sp-3: 1rem; /* 16 */ --sp-4: 1.5rem; /* 24 */ --sp-5: 2rem; /* 32 */ --sp-6: 2.5rem; /* 40 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 5rem; /* 80 */ --sp-10: 7.5rem; /* 120 */ --sp-11: 8rem; /* 128 */ /* ---------- Radien ---------- */ --r-sm: 14px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 30px; --r-3xl: 48px; --r-section: 64px; --r-pill: 9999px; /* ---------- Schatten ---------- */ --shadow-card: 0 8px 32px rgba(0, 0, 0, .04); --shadow-glass: 0 8px 32px rgba(0, 0, 0, .06); --shadow-hover: 0 20px 60px rgba(0, 129, 139, .15); --shadow-lift: 0 25px 50px -12px rgba(0, 0, 0, .25); /* ---------- Layout ---------- 1280 nutzbare Breite PLUS die beidseitige Polsterung von je 24. In der Referenz ist die Ueberschrift eines Abschnitts 1280 breit; mit --container: 1280px blieben davon nach Abzug der Polsterung nur 1232, und alles sass 24px zu weit innen. Dieser Wert gilt fuer die Inhaltsabschnitte. Kopfbereich, Government-Bar und Fusszeile haben eigene Breiten - siehe main.css. */ --container: 1328px; --measure: 768px; /* ---------- Fokus ---------- Bewusst NICHT das neutrale Grau der Referenz (~2,6:1 auf Weiß). brand-teal erreicht ~4,6:1 und erfüllt damit WCAG 1.4.11. */ --ring: var(--brand-teal); } /* ACHTUNG - hier steckte ein Fehler, der lange unbemerkt blieb: --theme-gradient MUSS in jedem Themeblock neu gesetzt werden. Es genuegt NICHT, nur --theme-primary und --theme-secondary zu aendern. Grund: Eigenschaftswerte werden beim Berechnen substituiert, nicht beim Benutzen. --theme-gradient wird also schon auf :root zu "linear-gradient(90deg, #00818b, #006168)" ausgerechnet und vererbt diesen fertigen Wert weiter. Spaetere Aenderungen an --theme-primary erreichen ihn nicht mehr. Folge des Fehlers: Auf der Unternehmensseite war --theme-primary korrekt navy, saemtliche Verlaeufe - Schaltflaechen, Ueberschriften, aktiver Navigationseintrag - blieben aber teal. Die Themeumschaltung wirkte nur dort, wo die beiden Einzelfarben direkt benutzt werden. */ [data-theme="company"] { --theme-primary: var(--brand-navy); --theme-secondary: var(--brand-cyan); --theme-gradient: linear-gradient(to right in oklab, var(--brand-navy), var(--brand-cyan)); /* Muss ebenfalls mitwandern: Sonst erscheint der Fokusring auf der Unternehmensseite in Teal, waehrend alles andere navy/cyan ist. */ --ring: var(--brand-navy); } /* ========================================================================== Überschriftenstufen ========================================================================== Die Referenz schaltet an ihren Breakpoints um, statt stufenlos zu skalieren. Gemessen: H2 36 / 48 / 60 bei 390 / 768 / 1440. Eine clamp-Formel traf den mittleren Wert um gut 4px daneben - genug, damit Überschriften einzeilig durchliefen statt umzubrechen. */ @media (min-width: 768px) { :root { --h2: 3rem; /* 48 */ --h3: 1.875rem; /* 30 */ } } @media (min-width: 1024px) { :root { --h1-home: 3.75rem; /* 60 */ --h1-target: 4.5rem; /* 72 */ --h2: 3.75rem; /* 60 */ --h3-feature: 2.25rem; /* 36 */ } } /* Hier stand zunächst eine zweite Stufe (--container: 1536px ab 1536). Das war zu grob: Die Referenz nutzt DREI verschiedene Breiten, und nur der Kopfbereich wächst mit. Gemessene linke Kanten bei 1536: Kopfbereich 24 → volle Breite Hero-Überschrift 63 → Raster auf 1400 begrenzt Abschnittsüberschrift 123 → 1280 Handbuchkarte, Fuß 187 → 1152 --container bleibt deshalb bei 1280; Kopf- und Fußbereich bekommen ihre eigenen Werte in main.css. */ /* ========================================================================== Fira Sans wird in fonts.css eingebunden - dort als Base64 eingebettet, weil TYPO3 den Upload von .woff2 im Backend ablehnt. Ladereihenfolge: fonts.css -> tokens.css -> main.css ========================================================================== */