/* IZ Design-Tokens - Farben, Schriftgroessen, Abstaende, Radien. * * Verbindliche Quelle: IZ-Kompass/10_IZ_Gestaltungskatalog.md, normativ seit * 2026-08-07. Abschnitt 1 ("Farben - die einzige gueltige Palette"), * Abschnitt 2 (Groessenskala), Abschnitt 3 (Abstaende), Abschnitt 4 (Radien) * und Abschnitt 8b.3 (Flaechenton). * * Zweck: Die Palette steht ab jetzt an genau einer Stelle statt als Hex-Literal * in 20 Dateien. Genau dieser Mechanismus hatte drei verschiedene Markenrots * entstehen lassen; vereinheitlicht auf --iz-rot am 2026-08-07. * * Diese Datei ist rein additiv: Sie definiert nur Variablen und setzt keine * einzige Eigenschaft auf einem Element. Sie veraendert die Darstellung nicht. * * Regel fuer neue Arbeit (Katalog Abschnitt 8, Schritt 2): * kein Hex-Literal in neuem CSS - ausschliesslich var(--iz-...). * * Eingebunden per wp_enqueue_style( 'iz-tokens', ... ) in functions.php, * Prioritaet 1, damit die Variablen vor allen anderen Stylesheets stehen. */ :root { /* --- Marke --- * --iz-rot: Masthead und Header als Flaeche. Sonst ausschliesslich * Akzent (Marker, aktive Zustaende, Fokusringe, Links, Rubrikzeilen, * feine Linien). Grossflaechig rote Bloecke ausserhalb von Masthead * und Header sind laut Katalog nicht zulaessig. */ --iz-rot: #8b1a1a; /* Ausschliesslich Hover-/Aktiv-Zustand von --iz-rot. */ --iz-rot-hover: #6e1414; /* --- Text --- * Kein weiteres Grau. Wo --iz-text-muted auf hellem Beige unter 4,5:1 * faellt, wird nicht aufgehellt, sondern --iz-text verwendet. */ --iz-text: #241f1c; --iz-text-muted: #77685f; /* --- Linien und Flaechen --- * Rahmen immer 1px in einer dieser beiden Farben. */ --iz-border: #e7ddd0; --iz-border-soft: #f0e8dc; /* Immer sechsstellig, nie #fff. */ --iz-weiss: #ffffff; /* --- Schriftgroessen (Katalog Abschnitt 2) --- * Ausschliesslich rem, Basis 18px (am 2026-08-09 gemessen und im * Gestaltungskatalog berichtigt - die fruehere Angabe "16px" war * angenommen, nicht erhoben). 1rem = 18px. Die Skala ist abschliessend: * Zwischenwerte werden nicht eingefuehrt. Wer eine neunte Stufe * braucht, hat laut Katalog meist ein Layout- und kein * Typografieproblem. */ --fs-xs: 0.75rem; /* Bildunterschriften, Fussnoten */ --fs-sm: 0.875rem; /* Hilfstexte, Labels, Tabellen */ --fs-base: 1rem; /* Fliesstext */ --fs-md: 1.125rem; /* hervorgehobener Fliesstext, Anrisstexte */ --fs-lg: 1.375rem; /* H3 */ --fs-xl: 1.75rem; /* H2 */ --fs-2xl: 2.25rem; /* H1 */ --fs-3xl: 3rem; /* Hero-H1 */ /* --- Abstaende (Katalog Abschnitt 3) --- * Eine einzige Skala, Vielfache von 4px. Die Luecken in der * Nummerierung sind gewollt und entsprechen dem Katalog. * Abstaende zwischen Geschwisterelementen gehoeren laut Katalog in * gap von Flex-/Grid-Layouts, nicht in Einzelmargins - die * kollabieren oder verdoppeln sich unbemerkt. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; /* --- Radien (Katalog Abschnitt 4) --- * Keine anderen Werte. 6px, 8px, 10px, 12px und 999px sind laut * Katalog zu vereinheitlichen. */ --r-standard: 4px; /* Karten, Kaesten, Eingabefelder */ --r-klein: 3px; /* Badges, Chips */ --r-rund: 50%; /* Avatare, Punkte */ /* --- Flaechenton (Katalog Abschnitt 8b.3) --- * Der meistgenutzte helle Flaechenton der Seite (10 Vorkommen in den * Aboseiten- und Shop-Bloecken). Er stand bislang in keiner * Palettentabelle - der Katalog vermerkt das ausdruecklich als Luecke * und schlaegt genau diesen Namen vor. */ --iz-flaeche: #f7f3ed; /* --- Kategorie-Abzeichen des Kalenders (Katalog Abschnitt 1a) --- * Aufgenommen am 2026-08-16 mit Block 06 des Kalender-Bauplans, der die * sechs Kategorien als Abzeichen mit Text UND Symbol UND Farbe vorsieht * (WCAG 1.4.1: Bedeutung nie ueber Farbe allein). Die Werte stammen aus * IZ-Kompass/3_Architekturplan_Kalender.md, Abschnitt "Gestaltung", und * sind am 2026-08-16 nach der WCAG-2.1-Formel NACHGERECHNET, nicht * uebernommen. Sie gelten ausschliesslich fuer diese Abzeichen. * * Text auf eigener Flaeche (Anforderung 4,5:1): * Feiertag 7,76 - Ramadan 6,95 - Hadsch 7,86 * Fastentag 7,97 - Nacht 8,96 - Gedenktag 7,48 * Rahmen gegen Weiss (Anforderung 3:1 fuer Nicht-Text): * 3,15 - 3,01 - 3,18 - 3,23 - 3,04 - 3,07 * Die Flaechentoene liegen absichtlich nur bei 1,16-1,20:1 gegen Weiss: * Sie sind Toenung, kein Signal. Die Kante uebernimmt der Rahmen. * * "Feiertag" nutzt bewusst das vorhandene --iz-rot statt einer siebten * Markenfarbe. */ --iz-kat-feiertag-text: #8b1a1a; --iz-kat-feiertag-flaeche: #f7e7e7; --iz-kat-feiertag-rand: #bf8181; --iz-kat-ramadan-text: #6b4a10; --iz-kat-ramadan-flaeche: #f6eeda; --iz-kat-ramadan-rand: #a69270; --iz-kat-hadsch-text: #1f5138; --iz-kat-hadsch-flaeche: #e6f0ea; --iz-kat-hadsch-rand: #799788; --iz-kat-fastentag-text: #1f4a70; --iz-kat-fastentag-flaeche: #e8eff6; --iz-kat-fastentag-rand: #7992a9; --iz-kat-nacht-text: #463370; --iz-kat-nacht-flaeche: #eceaf4; --iz-kat-nacht-rand: #998fb0; --iz-kat-gedenktag-text: #544942; --iz-kat-gedenktag-flaeche: #f1ede8; --iz-kat-gedenktag-rand: #98928e; /* --- Darqawi-Gruen, die Farbe des Bereichs "Nikah" (Katalog Abschnitt 1) --- * Entschieden von Abdelkabir am 2026-09-06, im Wortlaut: "gruen. * dunkelgruen". Vorgelegt war die Wahl zwischen Markenrot und diesem * Gruen fuer die Kontakt- und Hochzeitsanzeigen; die Frage stand seit * dem 2026-08-20 offen (Todo A-30). * * DIE GRENZE IST TEIL DER ZUSAGE - ohne sie waere das genau die * Farbdrift, gegen die der Gestaltungskatalog geschrieben ist: * Das Gruen gilt AUSSCHLIESSLICH im Bereich "Nikah". * Nicht auf der Startseite, nicht im Shop, nicht in der Kasse, * nicht im Kundenkonto. Ausserhalb bleibt --iz-rot unveraendert. * Wer es anderswo verwenden will, braucht eine neue Freigabe. * Massgeblich: IZ-Kompass/10_IZ_Gestaltungskatalog.md, Abschnitt 1. * * Diese Datei DEFINIERT den Wert nur; benutzt wird er ueber ZWEI * Ladewege, und beide sind eng: * 1. css/iz-anzeigen.css - laedt auf den Anzeigenmarkt-Ansichten * ueber iz_ist_anzeigenmarkt_ansicht(). * 2. die vier Dateien unter css/nikah/ (block-03-pakete, * block-04-zusagen, block-05-weg, block-06-faq) - sie laden ueber * is_page_template( 'template-nikah-pakete.php' ), also nur auf * der einen Produktseite. * Die Grenze haelt also an ZWEI Ladewegen, nicht an einem - und * weiterhin am Ladeweg, nicht bloss an der Absicht. * * ⚠️ UEBERHOLT, bleibt zum Beleg des damaligen Standes stehen: * Hier stand "benutzt wird er allein in css/iz-anzeigen.css, und die * laedt ausschliesslich auf den Anzeigenmarkt-Ansichten". Das war * richtig, als der Satz geschrieben wurde, und ist es seit dem Bau der * Bloecke N-03a bis N-07 am 2026-09-07 nicht mehr: gemessen 13 * Verwendungen in vier weiteren Dateien. Berichtigt am 2026-09-07 * (A-0174) nach Befund F-3 der Gegenpruefung 211. * 🔴 WARUM DAS HIER STEHT UND NICHT NUR IM BERICHT: Wer beim naechsten * Eingriff prueft, ob die Farbgrenze noch haelt, prueft nach dem alten * Satz EINE Datei und uebersieht vier. * * 🔴 DER WERT IST AM 2026-09-07 DUNKLER GESETZT WORDEN. * Abdelkabir im Wortlaut: "das gruen muss um einiges dunkler". * 🏠 Die Heimat dieser Entscheidung ist * IZ-Kompass/10_IZ_Gestaltungskatalog.md, Abschnitt "Darqawi-Gruen" - * hier steht nur der Wert. * * ⚠️ UEBERHOLT, bleibt zum Beleg des damaligen Standes stehen: * Bis zum 2026-09-07 lautete der Wert #186b47, gemessen mit 6,50:1 auf * Weiss, 6,50:1 fuer Weiss darauf und 5,88:1 auf dem Flaechenton. * * GEMESSENER KONTRAST des heute geltenden Werts (nachgerechnet am * 2026-09-07 nach WCAG 2.1, nicht aus einem Bericht abgeschrieben): * #0d3d28 auf #ffffff 12,24:1 * #ffffff auf #0d3d28 12,24:1 (Kontrast ist symmetrisch) * #0d3d28 auf --iz-flaeche #f7f3ed 11,08:1 * Alle drei liegen weit ueber 4,5:1 und tragen damit auch Fliesstext. * Der Ton ist also nicht nur dunkler, er ist auch lesbarer als vorher. * * DIESER TOKEN IST DIE EINE STELLE, an der der Ton steht - am * 2026-09-07 im ganzen Theme- und Plugin-Verzeichnis nachgesucht: Der * alte Wert kam als WERT genau einmal vor, hier. Alle uebrigen Treffer * waren Kommentare, die den Kontrast dokumentieren. Grenze der Suche: * wp-content/themes und wp-content/plugins sowie die Optionstabelle. * * Ein zweiter, dunklerer Gruenton fuer Hover-Zustaende ist bewusst * NICHT angelegt: Abdelkabir hat eine Farbe entschieden, nicht zwei. * Der Hover-Zustand tauscht deshalb Vorder- und Hintergrund, statt * einen unfreigegebenen Ton einzufuehren. */ --iz-nikah-gruen: #0d3d28; }