/* ========================================================================== tokens.css — Design-Tokens für objektpflegebremen.de -------------------------------------------------------------------------- WOFÜR: Einzige Quelle für Farben, Schrift, Abstände, Raster und Muster. Keine dieser Werte wird an anderer Stelle hartcodiert. ABHÄNGIG VON: assets/fonts/*.woff2 (lokal ausgelieferte Archivo-Variable) WIRD GEBRAUCHT VON: allen anderen CSS-Dateien — deshalb IMMER als erste Stylesheet-Datei einbinden, sonst greifen die Variablen nicht. BEIM ÄNDERN BEACHTEN: - Farben nur hier anpassen. Kontrastwerte stehen als Kommentar dahinter; wer einen Wert ändert, prüft den Kontrast neu (Ziel: WCAG AA, 4.5:1). - Schriftwechsel: neue Familie als @font-face ergänzen und in den drei --font-*-Rollen an erste Stelle setzen. Mehr ist nicht nötig. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Schrift — lokal ausgeliefert (kein Google-CDN, Datenschutz) Aktive Schrift ist Outfit (Variable Font, wght 100–900, von Google Fonts heruntergeladen und selbst gehostet — Auftraggeber-Entscheidung vom 02.09.2026). Outfit hat KEINE Laufweiten-Achse: die font-stretch-Angaben weiter unten (--width-*) werden von ihr ignoriert und wirken nur noch, falls der Archivo-Fallback lädt. Das Layout bricht dadurch nicht. Archivo bleibt als lokaler Fallback liegen (wght 400–700, wdth 62–125). -------------------------------------------------------------------------- */ @font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-latin-var.woff2") format("woff2"); font-weight: 100 900; /* Outfit hat keine wdth-Achse; die Deklaration deckt trotzdem den genutzten Bereich ab, damit der Browser fuer 78%/112% nicht den Archivo-Fallback nachlaedt (der Wert wird beim Rendern ignoriert). */ font-stretch: 62% 125%; font-style: normal; font-display: swap; /* Latin-Grundbereich: deckt deutsche Umlaute und ß ab */ 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; } @font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-latin-ext-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; /* Erweiterter Latin-Bereich: für Eigennamen mit Akzenten */ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 400 700; font-stretch: 62% 125%; font-style: normal; font-display: swap; /* Latin-Grundbereich: deckt deutsche Umlaute und ß ab */ 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; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-ext-var.woff2") format("woff2"); font-weight: 400 700; font-stretch: 62% 125%; font-style: normal; font-display: swap; /* Erweiterter Latin-Bereich: für Eigennamen mit Akzenten */ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------------------------ 2. Farben — Corporate Identity, verbindlich ------------------------------------------------------------------------ */ --green: #6DB657; /* Markengrün aus dem Logo. Flächen, Buttons, Icons. Kontrast auf Weiß nur 2.5:1 — NIE für Text. */ --green-dark: #589846; /* Hover- und Aktivzustand grüner Flächen */ --green-text: #3F7431; /* Abgedunkeltes Grün für grüne SCHRIFT auf Weiß. Kontrast 5.6:1 — AA für Fließtext. */ --green-soft: #E3EFDA; /* grün getönte Fläche für ganze Abschnitte */ --green-tint: #EAF2E3; /* hellere Tönung: Footer, Chips, Panelköpfe */ --green-light: #8FCB7C; /* aufgehelltes Grün für Flächen und Verläufe */ --ink: #241A15; /* Braunschwarz. NUR für Schrift und feine Linien, nicht als Hintergrundfläche */ --ink-80: #4A3D37; /* abgeschwächtes Braun für Sekundäres */ --ink-deep: #12100E; /* Hover des dunklen Knopfs im grünen Band (.cta) — die einzige Stelle, an der Ink als Fläche steht: Grün auf Grün ergibt keinen Knopf */ --white: #FFFFFF; /* reines Weiß, für Schrift auf Grün und als Basis von --surface */ --off-white: #F1F4EC; /* weiches Salbei-Off-White: der Seitengrund */ --grey: #6E7A69; /* CI-Grau, ins Grün gedreht */ --grey-strong: #5A6555; /* dunklere Ableitung für kleine Schrift (6.1:1) */ --grey-on-green: #223A19; /* Sekundärtext auf sattem Grün (5.1:1) */ --line: #E0E5D9; /* Rahmen auf weißen Flächen */ --line-green: #C6DDBA; /* Rahmen auf grün getönter Fläche */ /* ------------------------------------------------------------------------ Flächenhierarchie — drei Ebenen, mehr braucht die Seite nicht: 1. --bg weiches Off-White. Der Grund, auf dem alles liegt. 2. --surface reines Weiß. Alles, was Inhalt trägt: Karten, Panels, Header, Formularfelder, Tabellen. Dadurch heben sich diese Blöcke sichtbar ab, ohne dass es laut wird. 3. --green-soft grün getönte Fläche für ganze Abschnitte. Wer eine neue Karte baut, nimmt --surface plus --line plus --shadow-card. Nie --bg, sonst verschwindet der Block im Grund. ------------------------------------------------------------------------ */ --bg: var(--off-white); --surface: var(--white); --paper: var(--white); /* Altname, zeigt jetzt auf --surface */ --text: var(--ink); --text-muted: var(--grey-strong); --focus: #1B5E20; /* Fokusring, dunkelgrün, auf hell wie dunkel sichtbar */ --error: #B23B2E; /* Fehlerrahmen an Feldern und Auswahlgruppen (5.9:1 auf Weiß, reicht für Rahmen) */ --error-text: #8F2C21; /* Fehlertext auf Weiß (8.1:1) — Farbe ist nie das einzige Signal, es kommt immer Text dazu */ --error-soft: #FBEEEC; /* Fläche der Fehlermeldung unter Formularen */ --error-line: #E8C3BE; /* Rahmen dieser Fläche */ --snow-light: #7E97A3; /* Schneeflocken auf hellem Grund — kühles Grau, das sich vom Off-White gerade abhebt; auf dunklen Flächen fallen sie in --white */ /* ------------------------------------------------------------------------ 3. Schrift-Rollen --font-brand Überschriften und Auszeichnungen --font-body Fließtext (bewusst dieselbe Familie — der Charakter kommt aus Laufweite und Gewicht, nicht aus einem zweiten Font) --font-label schmale Versalien für Eyebrows, Tabellenköpfe, Meta-Zeilen ------------------------------------------------------------------------ */ --font-brand: "Outfit", "Archivo", system-ui, -apple-system, sans-serif; --font-body: "Outfit", "Archivo", system-ui, -apple-system, sans-serif; --font-label: "Outfit", "Archivo", system-ui, -apple-system, sans-serif; /* Laufweiten (wdth-Achse). Outfit hat keine — die Werte greifen nur im Archivo-Fallback und werden sonst ignoriert. */ --width-display: 112%; /* Überschriften laufen breit */ --width-text: 100%; --width-label: 78%; /* Labels laufen schmal — Wiedererkennungsdetail */ /* Größen. clamp() koppelt Mobil- und Desktopwert ohne Media Query. */ --fs-display: clamp(2.35rem, 1.4rem + 3.9vw, 4.5rem); --fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.85rem); --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --fs-h4: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); --fs-lead: clamp(1.125rem, 1.05rem + 0.45vw, 1.35rem); --fs-body: 1.0625rem; /* 17px — mobil nie unter 16px */ --fs-small: 0.9375rem; --fs-label: 0.75rem; --lh-display: 0.94; /* enge Zeilen bei großen Graden … */ --lh-heading: 1.06; --lh-body: 1.65; /* … weite Zeilen bei kleinen */ --ls-display: -0.025em; --ls-label: 0.15em; /* ------------------------------------------------------------------------ 4. Raster und Abstände Die Sektionsabstände sind bewusst ungleich: --section-tight für zusammengehörige Blöcke, --section als Normalfall, --section-wide vor einem Themenwechsel. Das ersetzt die überall gleiche Rhythmik. ------------------------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 3.5rem; --sp-9: 4.5rem; --sp-10: 6rem; --section-tight: clamp(2.5rem, 5vw, 4rem); --section: clamp(3.5rem, 7vw, 6rem); --section-wide: clamp(5rem, 10vw, 8.5rem); --container: 1220px; /* Standardbreite aller Inhalte */ --container-narrow: 760px; /* Lesebreite für Fließtext, ~70 Zeichen */ --gutter: clamp(1.25rem, 4vw, 3rem); --radius-sm: 8px; /* Eingabefelder, kleine Flächen */ --radius: 14px; /* Standard: Karten, Panels, Bilder */ --radius-lg: 22px; /* große Flächen, CTA-Band */ --radius-pill: 999px; /* Buttons und Chips */ --border: 1px solid var(--line); --shadow-sm: 0 1px 2px rgba(36, 26, 21, 0.05); --shadow-card: 0 1px 2px rgba(36, 26, 21, 0.04), 0 10px 24px -18px rgba(36, 26, 21, 0.22); --shadow-hover: 0 2px 4px rgba(36, 26, 21, 0.05), 0 18px 36px -20px rgba(36, 26, 21, 0.30); --shadow-md: 0 10px 30px -18px rgba(36, 26, 21, 0.30); --shadow-lg: 0 24px 60px -28px rgba(36, 26, 21, 0.35); /* ------------------------------------------------------------------------ 5. Bewegung — kurz und zurückhaltend ------------------------------------------------------------------------ */ --dur-fast: 140ms; --dur: 220ms; --dur-slow: 520ms; /* Einblendungen beim Scrollen */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); /* weich auslaufend */ --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); /* leichter Überschwung */ /* ------------------------------------------------------------------------ 6. z-index-Skala — feste Stufen statt beliebiger Zahlen ------------------------------------------------------------------------ */ --z-base: 1; --z-sticky: 10; /* Anruf-Leiste mobil */ --z-float: 20; /* WhatsApp-Button */ --z-header: 30; --z-overlay: 25; /* Mobilmenü — bewusst UNTER dem Header, damit der Schließen-Knopf im Header sichtbar bleibt */ --z-skip: 60; /* Sprungmarke, muss über allem liegen */ }