/* * DJG Glas- und Gebaeudereinigung — Projekt-Tokens. * Ueberschreiben Tabons Default-Tokens zur LAUFZEIT (kein Rebuild; Tailwind v4 * @theme im Parent erzeugt Utilities + Variablen, hier nur die WERTE). Wird NACH * dem Parent-CSS eingebunden (Abhaengigkeit 'tabon' in functions.php). * * MARKE (Logo-Gruen), AA-sicher gemappt — "Mapping A" (Entscheidung 2026-08-01): * - --color-brand = #008035 (Gruen 600): Marken-Flaeche mit weissem Text * (AA 5.07:1) UND Borders/Fokus/Tints. Zugleich Accent-Seed fuers Theme-Design. * - --color-brand-text = #006B2C (Gruen 700): Text-/Link-Rolle auf Hell * (dunkler, AA-staerker als die Flaeche). * - dunkle Sektion = #0E1A14; heller Text darauf = #EEF3F6. * * BEWUSST NICHT gesetzt (Begruendung im cc-handoff): * - Logo-Gruen #00953E (Logo-500) NICHT als Token: es besteht AA gegen Weiss * NICHT (3.96:1) und wuerde als --color-brand die Theme-Design-AA-Warnung * ausloesen (Colors::effectiveColor leitet die Warnung aus --color-brand ab). * Es lebt ausschliesslich IM Logo-Bild (Logo nie umfaerben, Projektregel). * - Blau-Akzent #0072AB: Tabon kennt nur EINEN Akzent — kein globales Token * (punktuell im Seitenbau, falls gebraucht). * - --color-surface-muted bleibt neutral (Parent-Default) — keine flaechige * Gruen-Toenung aller gedaempften Sektionen. * * TYPOGRAFIE (Schritt 14): Die Hero-Ueberschrift folgt dem Prototyp — dort * h1 { font-size: clamp(1.9rem, 4.2vw, 3.2rem) }. Als clamp und NICHT als * fester Wert, weil ein Einzelwert den responsiven Schritt des Tokens auf EINE * Groesse kollabiert: 3.2rem waeren dann auch auf dem Telefon 51,2 px — die * Ueberschrift allein belegte auf der Startseite 384 von 609 px Buehne * (gemessen). Mit clamp: Desktop 51,2 px wie der Prototyp, mobil 30,4 px wie * bisher. Der Wert steht hier und nicht im Theme-Design-Panel, weil er zur * MARKE gehoert, nicht zur Redaktion (das Panel koennte es seit Schritt 14 * ebenfalls — es nimmt jetzt clamp an). * * FORM (Schritt 14): Der Prototyp zeigt Pillen-Buttons (border-radius 999px) * gegen Tabons 8 px. Gesetzt wird AUSSCHLIESSLICH der button-spezifische * Token — er wird an genau zwei Stellen verbraucht (.tbn-btn und der optisch * als Button gebaute .tbn-ankernav__link--cta). Der globale --radius-lg bleibt * unangetastet: an ihm haengen 33 Stellen (Karten, Bilder, Galerie, Hero- * Buehne, Formularkasten). Runde Karten und runde Bilder will das Projekt * NICHT — nur runde Buttons. * * NAVIGATION (Schritt 16): Die Hauptnavigation brach um — bei 16px/700 ohne * horizontales Padding passten die acht Punkte nicht mehr neben das Logo: * „Glas- Gebaeudereinigung" und „PV-Anlagenreinigung" liefen auf zwei * Textzeilen, der Kopfbereich war 149 px hoch. Der Prototyp setzt 0.83rem/600. * Gemessen mit genau diesen zwei Werten: Kopfbereich 149 -> 81 px, * mehrzeilige Punkte 2 -> 0, Summe der Linkbreiten 984 -> 817 px. * Padding, Radius und Link-Abstand der Navigation sind NICHT setzbar * (hartkodiert im Parent) — als Rueckfluss gemeldet, hier nicht nachgebaut. * * STATEMENT-AKZENT (Schritt 20): Der Entwurf hebt „20 Jahre" in der dunklen * Statement-Bahn farbig hervor (dort #7be3c0, ein heller Ton seines TUERKISEN * Markenwerts). Ohne Token faellt die Engine auf dem dunklen Grund bewusst auf * currentColor zurueck — die Hervorhebung waere unsichtbar (gemessen: Kontrast * 15.97 zum Grund, also identisch mit dem Fliesstext). Gesetzt wird die * Entsprechung in DJGs GRUEN, nicht das Tuerkis des Prototyps: die Marke ist * gruen, das Tuerkis gehoert dem Entwurfs-Layout. Eigene AA-Pruefung, wie die * Engine-Notiz sie verlangt — Messung im cc-handoff. */ :root { --color-brand: #008035; --color-brand-foreground: #ffffff; --color-brand-text: #006B2C; --color-surface-dark: #0E1A14; --color-on-surface-dark: #EEF3F6; /* TYPOGRAFIE (Schritt 23, K2 — die b-Liste des Registers vollstaendig). Werte = der verkaufte Entwurf; alle Ueberschriften laufen 800 (Archivo-800 seit K1 gebaut und gebuendelt). */ --tbn-tp-hero-headline-size: clamp(2rem, 4.4vw, 3.125rem); /* g1: 50px Desktop (PM-Entscheid; Entwurf 54,4) · mobil unveraendert 32px */ --tbn-tp-hero-headline-weight: 800; --tbn-tp-hero-headline-tracking: -0.015em; /* b4 */ --tbn-tp-section-headline-size: clamp(1.5rem, 2.8vw, 2.2rem); /* b1+b2: 35,2px / mobil 24px */ --tbn-tp-section-headline-weight: 800; --tbn-tp-section-headline-tracking: -0.015em; --tbn-tp-card-headline-size: 1.12rem; /* b7: 17,92px (Groessen-Achse aus E2) */ --tbn-tp-card-headline-weight: 800; --tbn-tp-card-headline-tracking: -0.015em; --tbn-tp-content-h2-tracking: -0.015em; /* b4 auch fuer Rich-Text-Zwischentitel */ --tbn-tp-content-h3-tracking: -0.015em; --tbn-tp-intro-size: 1.12rem; /* b6: Lead/Intro 17,92px */ /* b5: Sekundaer-Fliesstext. AA gemessen: 5,51:1 auf Weiss, 5,02:1 auf muted. Auf DUNKLEN/MARKEN-Flaechen faellt der Wert auf currentColor zurueck (unten) — ein harter Sekundaerton waere dort 2,6:1. */ --tbn-tp-body-color: #5B6B76; /* Die Karten-Teaser liefern die Daempfung ueber die Farbe selbst — die zusaetzliche Engine-Opacity (0.75) wuerde #5B6B76 auf 3,27:1 druecken. */ --tbn-card-text-opacity: 1; /* Dachzeile (Typo-Rolle aus E1): 12,48px / 800 / 0.16em / Markenfarbe. */ --tbn-tp-eyebrow-size: 0.875rem; /* f5: 14px — PM-Entscheid, bewusst groesser als der Entwurf (12,48px) */ --tbn-tp-eyebrow-weight: 800; --tbn-tp-eyebrow-tracking: 0.14em; /* f5: PM-Entscheid */ --tbn-tp-eyebrow-color: var(--color-brand); /* b8: Karten/Medien/Formularkasten runden 14px wie der Entwurf. Buttons bleiben Pillen (eigener Token unten), --radius-lg traegt den Rest. */ --radius-lg: 0.875rem; /* d4: Inhaltsbreite 1160px und Section-Abstand 4.5rem — beide ueber BESTEHENDE Tokens erreichbar, kein Rueckfluss noetig. */ --tbn-content-width: 72.5rem; --tbn-space-md: 4.5rem; /* Trust-Zeile: Sterne im Entwurfs-Gelb, Haken im hellen Gruen (E7) — dasselbe Gruen wie der Statement-Akzent, AA auf dunkel dort belegt (9,92:1). */ --tbn-stern-farbe: #ffce4d; --tbn-haken-farbe: #6DD68F; --tbn-btn-radius: 9999px; /* h1 (Schritt 26): Nav + Telefon einen Zacken groesser als der Entwurf — Daniels Entscheid an der Kopf-Gegenueberstellung (0.86 → 0.95rem = 15,2px). Gewichte unveraendert (Nav 700, Telefon-Default 800 aus der Engine). */ --tbn-tp-nav-link-size: 0.95rem; --nav-font-weight: 700; /* f3: Entwurfswert */ --tbn-header-tel-size: 0.95rem; --tbn-statement-akzent: #6DD68F; /* g8 (Schritt 25): Footer-Logo verkleinert — Daniels Urteil am Logo-Testbild: das farbige Original bleibt, laeuft aber 250px statt Spaltenbreite. */ --tbn-footer-logo-breite: 250px; --tbn-footer-logo-abstand: 20px; /* h4 (Schritt 26): CTA-Band-Buttons groesser — die Band-eigene Stufe der Engine (kein globaler Button-Eingriff). */ --tbn-cta-band-btn-padding: 0.8rem 1.6rem; --tbn-cta-band-btn-size: 1.05rem; /* h7 (Schritt 26): Mobil-Stapel der Split-Buehne — 30px zwischen Anfrage-Button und Bild darunter (Engine-Default waere 24px). */ --tbn-hero-stack-gap: 30px; } /* h4 (Schritt 26) + i12 (Schritt 27, Daniels Urteil): Der WhatsApp-Button im CTA-Band laeuft in WhatsApp-Gruen (#25D366) mit DUNKLER Schrift + Glyphe — das Weiss aus h4 fiel durch (gemessen 1,98:1); das Ink-Dunkel der Site (#0E1A14, die dunkle Flaeche aus d2) liegt auf dem Gruen bei ~9:1. Die Glyphe erbt currentColor (g10) und laeuft automatisch mit dunkel. Selektor ueber das wa.me-Ziel: semantisch stabil, kein Engine-Sonderfeld. Kein Hover-Ruecksprung: die Engine-Hover ändern nur die Deckkraft, nie die Farbe — am Render gemessen. */ .tbn-cta-band a.tbn-btn[href^="https://wa.me"] { background-color: #25D366; border-color: transparent; color: #0E1A14; } /* Sekundaer-Fliesstext gilt NUR auf hellen Flaechen: auf dunkel/Marke loest currentColor zur On-Farbe der Flaeche auf (Surface-Logik) — ein harter #5B6B76 waere dort unleserlich (2,6:1 auf #0E1A14, gemessen). */ :is(.tbn-bg-dark, .tbn-bg-brand, .tbn-bg-black) { --tbn-tp-body-color: currentColor; }