/* Theme Name: IZ 2025 Child Template: iz-2025 Description: Child-Theme fuer islamische-zeitung.de. Enthaelt nur Layout-/Styling-Anpassungen, die am aktuellen Theme-Markup haengen (Sidebar, Hero-Padding, Navigation etc.). Wird bei der geplanten Homepage-Ueberarbeitung neu aufgesetzt. Version: 1.0.1 Author: IZ Medien GmbH */ /* Versionsnummer am 2026-08-09 von 1.0.0 auf 1.0.1 angehoben. * Grund, gemessen am selben Tag: functions.php bindet diese Datei mit * wp_get_theme()->get( 'Version' ) ein, also mit einer festen Kennung - * anders als iz-tokens.css und iz-mein-konto.css, die filemtime() nutzen. * Fuer angemeldete Nutzer ist Autoptimize abgeschaltet; sie erhalten die * Datei direkt, mit cache-control: max-age=31536000 (ein Jahr). Ohne * geaenderte Kennung haetten sie die alte Fassung bis zu einem Jahr * weiterbenutzt. Dauerhafte Loesung ist filemtime() in functions.php - * dort wird derzeit von anderer Seite gearbeitet, deshalb als Nacharbeit * gemeldet statt hier eingebaut. */ /* Produktbild-Lupe (Zoom-Icon) ausblenden - Funktion ist per Filter in functions.php bereits deaktiviert, hier nur das (sonst funktionslose) Icon selbst entfernt. */ .woocommerce-product-gallery__trigger { display: none !important; } /* ========================================================================== * TUERKIS-ENTFERNUNG, 2026-08-09 (Entscheidung Christian). * Ersetzt die Sekundaerfarbe des Parent-Themes iz-2025 ueberall dort, wo * sie ausgeliefert wird. Das Parent-Theme selbst bleibt unberuehrt * (Gestaltungskatalog Abschnitt 9) - hier wird nur ueberschrieben. * Vollstaendige Fundstellenliste, Begruendung je Stelle und die gemessenen * Kontraste stehen in 5_IZ_Aenderungsprotokoll.md, Eintrag 2026-08-09. * Kommentare hier bewusst knapp: Autoptimize liefert sie mit aus. * * Spezifitaet: iz-2025/style.min.css wird VOR dieser Datei ausgeliefert * (Gruppe A, gleiche Spezifitaet reicht), iz-2025/woocommerce.min.css * DANACH (Gruppen B und C). Dort steht deshalb ein vorangestelltes * ":root " - es entspricht , jedes andere Element ist ein * Nachfahre davon, und es hebt die Spezifitaet um genau eine Klasse. * Kein !important. * Bewusst NICHT "body ": Klassen wie single-product, woocommerce-checkout * und woocommerce-account sitzen AM body, nicht darin - "body .single-product" * greift dort ins Leere. Am 2026-08-09 an der Preisfarbe der Produktseite * gemessen und korrigiert. * Reihenfolge gemessen ueber /kontakt/?ao_noptimize=1 am 2026-08-09. * * Bewusst NICHT hier behandelt, weil bereits geloest (Regel 1): * .comment-form .form-submit .submit -> inc/layout-fixes.php Z. 234 ff. * ul.step-nav.nav-wizard, ul.iz-step-progress -> css/iz-checkout.css Z. 54 ff. * * Farben ausschliesslich aus css/iz-tokens.css, kein Hex-Literal. * ========================================================================== */ /* --- Gruppe A: aus iz-2025/style.min.css --------------------------------- */ /* A1 Fokusrahmen der Eingabefelder. Barrierefreiheit (WCAG 1.4.11, 3:1): * vorher 2,47:1 gegen Weiss und 1,15:1 gegen den unfokussierten Rahmen - * also unter der Schwelle. Jetzt 9,29:1 bzw. 4,33:1. */ input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, select:focus, textarea:focus { border-color: var(--iz-rot); } /* A2 Angehakte Kontrollfelder = aktiver Zustand -> Markenrot * (Katalog Abschnitt 1). Gefuellte Flaeche gegen Weiss: 9,29:1 statt * 2,47:1. Nur border-color, damit Breite und Stil aus der Parent-Regel * erhalten bleiben. */ .wpcf7 input[type="radio"]:checked, .wpcf7 input[type="checkbox"]:checked, .acadp.acadp-post-form .checkbox input[type="checkbox"]:checked, .iz-newsletter .iz-newsletter__controls .iz-newsletter__form input[type="checkbox"]:checked { background-color: var(--iz-rot); border-color: var(--iz-rot); } /* A3 Preis in der Mitgliedschaftsauswahl. Hervorhebung bleibt, nur der * Farbton wechselt (Regel 16). 9,29:1 auf Weiss. */ .iz-mp-selection .woocommerce-Price-amount { color: var(--iz-rot); } /* A4 Suchbegriff in der Ueberschrift der Suchergebnisse - ein Marker, * Katalog Abschnitt 1 nennt Marker als Rot-Rolle. 9,29:1. */ .iz-main--searchresults .iz-heading--page span { color: var(--iz-rot); } /* A5 Sprunglink und Vorleser-Meldungen im Fokuszustand, Untergrund * #DDDDDD: vorher 1,82:1 - praktisch unlesbar. Jetzt 6,84:1. */ .o-acchide-alt:focus, .screen-reader-text:focus, .screen-reader-response:focus { color: var(--iz-rot); } /* A6 Kennzeichen "Neu" im Anzeigenmarkt. Weiss darauf: 9,29:1. */ .acadp .label-primary { background-color: var(--iz-rot); border-color: var(--iz-rot); } /* A7 Gedaempfte Angaben - hier waere Rot sachlich falsch. "text-muted" * heisst gedaempft, "wpp-views" sind Aufrufzahlen als Nebenangabe. * Beides auf den Token fuer gedaempften Text, 5,34:1 auf Weiss. */ .acadp .list-group .text-muted, .widget .wpp-list li .wpp-views, .wpp-list li .wpp-views { color: var(--iz-text-muted); } /* --- Gruppe B: Knoepfe (in beiden Parent-Dateien, deshalb ":root") -------- */ :root .iz-btn--secondary, :root .acadp-search button[type="submit"], :root .acadp.acadp-manage-listings .btn-success, :root .acadp ol.breadcrumb a, :root .search-form .search-submit, :root .comment-navigation .nav-previous a, :root .posts-navigation .nav-previous a, :root .post-navigation .nav-previous a, :root .comment-navigation .nav-next a, :root .posts-navigation .nav-next a, :root .post-navigation .nav-next a, :root .comment-list .comment-reply-link, :root .comment-list .comment-reply-login, :root .woocommerce-button.button.view, :root .membership-actions.order-actions .button.view, :root #payment #place_order, :root .woocommerce-EditAccountForm .clear + p button, :root .woocommerce-address-fields .woocommerce-address-fields__field-wrapper + p button, :root .woocommerce-form-login .form-row:nth-of-type(4) button, :root .woocommerce-form-coupon .form-row-last .button, :root .coupon button { color: var(--iz-weiss); background-color: var(--iz-rot); border-color: var(--iz-rot); } /* Hover, Fokus, Aktiv: der Parent nutzte hier einen zweiten, dunkleren * Ton derselben Familie. Ersatz ist der dafuer vorgesehene Token. * Weiss darauf: 11,84:1. */ :root .iz-btn--secondary:hover, :root .iz-btn--secondary:focus, :root .iz-btn--secondary:active, :root .acadp-search button[type="submit"]:hover, :root .acadp-search button[type="submit"]:focus, :root .acadp.acadp-manage-listings .btn-success:hover, :root .acadp.acadp-manage-listings .btn-success:focus, :root .acadp ol.breadcrumb a:hover, :root .acadp ol.breadcrumb a:focus, :root .search-form .search-submit:hover, :root .search-form .search-submit:focus, :root .comment-navigation .nav-previous a:hover, :root .posts-navigation .nav-previous a:hover, :root .post-navigation .nav-previous a:hover, :root .comment-navigation .nav-next a:hover, :root .posts-navigation .nav-next a:hover, :root .post-navigation .nav-next a:hover, :root .comment-list .comment-reply-link:hover, :root .comment-list .comment-reply-link:focus, :root .comment-list .comment-reply-login:hover, :root .woocommerce-button.button.view:hover, :root .woocommerce-button.button.view:focus, :root .membership-actions.order-actions .button.view:hover, :root #payment #place_order:hover, :root #payment #place_order:focus, :root .woocommerce-EditAccountForm .clear + p button:hover, :root .woocommerce-address-fields .woocommerce-address-fields__field-wrapper + p button:hover, :root .woocommerce-form-login .form-row:nth-of-type(4) button:hover, :root .woocommerce-form-coupon .form-row-last .button:hover, :root .coupon button:hover, :root .coupon button:focus { color: var(--iz-weiss); background-color: var(--iz-rot-hover); border-color: var(--iz-rot-hover); } /* Deaktiviert: der Parent nutzte einen aufgehellten Ton derselben * Familie, auf dem die weisse Beschriftung nur 1,61:1 erreichte. Ein * aufgehelltes Rot gibt es im Katalog nicht und wird nicht eigenmaechtig * eingefuehrt (Katalog Abschnitt 1). Gewaehlt ist der Token fuer * gedaempften Text - "deaktiviert" ist genau die Bedeutung, Weiss darauf * erreicht 5,34:1. Vorschlag fuer einen eigenen Token siehe Bericht. */ :root .iz-btn--secondary:disabled, :root .iz-btn--secondary[disabled], :root .acadp-search button[type="submit"]:disabled, :root .acadp.acadp-manage-listings .btn-success:disabled, :root .search-form .search-submit:disabled, :root .woocommerce-button.button.view:disabled, :root .membership-actions.order-actions .button.view:disabled, :root #payment #place_order:disabled, :root .woocommerce-EditAccountForm .clear + p button:disabled, :root .woocommerce-address-fields .woocommerce-address-fields__field-wrapper + p button:disabled, :root .woocommerce-form-login .form-row:nth-of-type(4) button:disabled, :root .woocommerce-form-coupon .form-row-last .button:disabled, :root .coupon button:disabled { color: var(--iz-weiss); background-color: var(--iz-text-muted); border-color: var(--iz-text-muted); } /* --- Gruppe C: uebrige Regeln aus iz-2025/woocommerce.min.css ------------- */ /* C1 Preise im Shop-Raster und auf der Produktseite. Wie A3: die * Hervorhebung bleibt, nur der Farbton wechselt. 9,29:1 auf Weiss. */ :root .woocommerce ul.products .product .woocommerce-loop-product__link .price .woocommerce-Price-amount, :root .single-product .product .summary .price .woocommerce-Price-amount { color: var(--iz-rot); } /* C2 Angehakte Kontrollfelder auf Kasse, Kundenkonto, Zahlungsauswahl. * Wie A2: aktiver Zustand -> Markenrot, 9,29:1 statt 2,47:1. */ :root .woocommerce-checkout .form-row.mailchimp-newsletter input[type="checkbox"]:checked, :root .woocommerce-checkout .form-row.create-account input[type="checkbox"]:checked, :root .woocommerce-checkout .form-row.checkbox-legal input[type="checkbox"]:checked, :root .woocommerce-checkout .form-row.checkbox-data-download input[type="checkbox"]:checked, :root .woocommerce-checkout .form-row.checkbox-direct-debit-checkbox input[type="checkbox"]:checked, :root .woocommerce-checkout .form-row.checkbox-parcel-delivery-checkbox input[type="checkbox"]:checked, :root .woocommerce-checkout .form-row.data-privacy input[type="checkbox"]:checked, :root .woocommerce-account .entry-content .woocommerce .woocommerce-form .form-row label input[type="checkbox"]:checked, :root .woocommerce-account .entry-content .woocommerce .woocommerce-form .form-row input[type="checkbox"]:checked, :root #payment .payment_methods li input[type="radio"]:checked, :root .woocommerce-SavedPaymentMethods li input[type="radio"]:checked, :root .form-row.woocommerce-SavedPaymentMethods-saveNew #wc-stripe-new-payment-method:checked { background-color: var(--iz-rot); border-color: var(--iz-rot); } /* C3 Hinweisleisten von WooCommerce - hier waere Rot sachlich falsch: * "woocommerce-message" ist die Erfolgsmeldung, "woocommerce-info" ein * neutraler Hinweis. Rot ist auf dieser Seite Marken- und Fehlerfarbe; * eine rote Erfolgsmeldung fuehrt in die Irre. Standardtextfarbe: * 16,31:1 statt 2,47:1 - der Text lag unter der 4,5:1-Schwelle. */ :root .woocommerce-message, :root .woocommerce-info { color: var(--iz-text); } /* C4 Passwortstaerke "stark" - hier waere Rot ein Fehler: die Nachbar- * stufe "schlecht" steht auf #B82738, Markenrot haette dagegen nur * 1,5:1 - "stark" und "schlecht" waeren nicht unterscheidbar. Deshalb * neutral; die Stufe wird zusaetzlich im Text benannt (Katalog * Abschnitt 6). Ein Gruen fuer Erfolg fehlt dem Katalog, Vorschlag im * Bericht vom 2026-08-09. */ :root .woocommerce-checkout .create-account .woocommerce-password-strength.strong { color: var(--iz-text); border-color: var(--iz-text); } /* C5 Kurzhinweis der Bezahlschranke in Artikelanrissen - Marker auf * abonnentenpflichtige Inhalte. 9,29:1. */ :root .entry-summary .iz-pw__short { color: var(--iz-rot); } /* ---- Ende Tuerkis-Entfernung 2026-08-09 ---- */ /* =========================================================================== * Barrierefreiheit: Kontraste unterhalb WCAG-Stufe AA (Todoliste W-11) * 2026-08-22 * * W-11 (1) Autorenzeile im Beitragswidget der Startseite. * Am 22.08. im Browser gemessen (getComputedStyle, 1440 px): * Farbe rgb(177,177,177) auf rgb(255,255,255) bei 18 px = Kontrast 2,14:1. * Verlangt sind 4,5:1. Die Regel steht im ELTERN-Theme * (iz-2025/style.css Zeile 1918, ".iz-spotlight .rpwwt-post-author"). * Sie wird hier UEBERSCHRIEBEN statt dort geaendert - ein Eingriff ins * Eltern-Theme ist nach Arbeitsregel 10a freigabepflichtig und waere hier * ueberdies beim naechsten Theme-Update verloren. * * --iz-text-muted (#77685f) auf Weiss ergibt 5,95:1. Es ist der einzige * Grauton des Gestaltungskatalogs; ein weiteres Grau wird bewusst nicht * eingefuehrt (iz-tokens.css Zeile 33). * * ":root" davor, damit die Regel dieselbe Spezifitaet-Reserve hat wie die * uebrigen Korrekturen in dieser Datei und nicht vom Eltern-Theme * ueberholt wird - ohne "!important", das hier nicht noetig ist. * =========================================================================== */ :root .iz-spotlight .rpwwt-post-author { color: var(--iz-text-muted); } /* =========================================================================== * K-18 - Tastatur-Fokusring. Freigabe Christians am 2026-08-30, im Wortlaut: * "definitiv ins child. ja". * * NEU GEFASST AM 2026-09-08 (A-0310). Die erste Fassung lag korrekt auf dem * Server und wurde ausgeliefert, hat aber nie gewirkt - gemessen als Befund * F-1 in Berichte/225_IZ_Kassenbefunde_Nachmessung_2026-09-08.md und am * 2026-09-08 am gerenderten Zustand bestaetigt (Tastaturfokus, echte * Tabulatortaste): das Feld hatte outline-style "none". * * URSACHE, gemessen und nicht geraten. Das Eltern-Theme setzt in * iz-2025/style.min.css: * input[type=text]:focus, ... 15 weitere Eingabetypen ..., select:focus, * textarea:focus { outline: none; border-color: #27B8A7 } * button:focus, input[type=submit]:focus, ... { outline: none } * Die Selektoren mit Typangabe tragen die Spezifitaet 0-2-1. Die erste * Fassung hier hiess "input:focus" und traegt nur 0-1-1 - sie wurde * ueberstimmt. Die uebrigen Teile (select, textarea, a, button, [tabindex]) * haben schon damals gegriffen; ausgefallen sind genau die Eingabefelder * mit type-Angabe. * * MITTEL: die genauere Regel, nicht !important (Gestaltungskatalog, * Abschnitt 9 - "kein Kontrast per Augenmass", Abschnitt 6 - "jedes * bedienbare Element braucht einen eigenen :focus-visible-Zustand"). * "input[type]:focus-visible" traegt dieselbe Spezifitaet 0-2-1 wie die * Eltern-Regel; das Child-Stylesheet wird nach dem Eltern-Theme geladen, * und bei gleicher Spezifitaet entscheidet die Reihenfolge. * * ABSICHTLICH NICHT HOEHER GEZOGEN: die engeren Regeln der Kaufstrecke * (css/kauf/01-feld.css, 03-position.css, 05-hinweise.css, 07-knoepfe.css) * setzen dort einen roten Ring und tragen ebenfalls 0-2-1 bei spaeterer * Ladung. Eine hoehere Spezifitaet hier wuerde sie aushebeln. Am * 2026-09-08 gegengeprueft: der rote Ring im Kaufformular bleibt. * * :focus-visible statt :focus - der Ring gehoert an die Tastaturbedienung, * nicht an den Mausklick. currentColor traegt die Schriftfarbe des Umfelds * und fuehrt keine neue Farbe ein; am 2026-09-08 gegen Markenrot gemessen: * mit currentColor liegen 4 von 183 bedienbaren Elementen der Startseite * unter 3:1, mit Markenrot 13 von 183 (Markenrot auf dem roten Masthead * ergibt 1,00:1). currentColor bleibt deshalb. * * Ruecknahme: diesen Block und den folgenden entfernen. * =========================================================================== */ input:focus-visible, input[type]:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* --------------------------------------------------------------------------- * Elemente mit eigener Flaeche: der Ring gehoert nach INNEN. * * ERGAENZT AM 2026-09-08 (A-0310), weil die Reparatur darueber den Ring auf * gefuellten Knoepfen zwar erzeugt, er dort aber unsichtbar bleibt: currentColor * ist auf einem gefuellten Knopf die helle Schriftfarbe, und bei * outline-offset 2px liegt der Ring ausserhalb auf hellem Grund. * * Am 2026-09-08 am gerenderten Zustand gemessen, Ring aussen gegen Ring innen: * Suchknopf im Kopfbereich 1,00:1 -> 9,29:1 * Lupensymbol im Masthead 2,26:1 -> 21,00:1 * Innen liegt der Ring auf der eigenen Flaeche des Elements, und dort hat * currentColor per Definition Kontrast - es ist die Farbe der Beschriftung. * WCAG 2.2, 1.4.11 verlangt 3:1 fuer Fokusanzeigen. * * Das Lupensymbol ist ein div mit tabindex und deshalb eigens genannt; es * ist kein Knopfelement, traegt aber eine eigene Flaeche. * --------------------------------------------------------------------------- */ button:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible, input[type="reset"]:focus-visible, .iz-search-icon:focus-visible { outline-offset: -3px; }