/* ========================================================================== oo-hero-scrim.css — WCAG 1.4.3 AA für die Hero-Bereiche (.fullheight-bnr) -------------------------------------------------------------------------- Problem: weiße Headline + weiße Subline liegen direkt auf dem Hero-Foto. Gemessen (pixelweise, Skript scripts/wcag-hero-contrast.mjs im Hub-Repo): schlechtester Punkt 1,00:1 … 2,8:1, bis zu 96 % der Textfläche unter 4,5:1. Lösung: ein Scrim in Markennavy #262B45 als ::after über dem Bild, unter dem Inhalt. KEIN Elementor-Overlay pro Seite (WPML-Drift), kein Eingriff in Inhalte oder Übersetzungen. Die Werte sind aus der Messung abgeleitet: Ziel 4,8:1 an JEDEM Pixel unter Headline UND Subline (Reserve auf 4,5:1). Deckkraft-Bedarf laut Messung (Navy, Ziel 4,8:1): Desktop >=1024px : max 54 % (Text liegt bei 5–50 % der Hero-Breite) Tablet 768px : max 63 % (Text läuft über 5–75 % der Breite) Mobil 390px : max 67 % (Text läuft über die volle Breite) WICHTIG: bewusst ::after, NICHT ::before. Elementor benutzt auf Containern selbst ::before für sein Background-Overlay (mit hoeherer Spezifitaet und opacity:var(--overlay-opacity)) — auf /gdpr-compliance/ und /de/gdpr/ ist das aktiv. ::after ist auf .e-con frei. Abgedeckte Bausteine: (a) .fullheight-bnr (9 Seiten), (b) der klassenlose Zwilling auf /de/cloud-office/ (Post 2906, Elementor-Container bf56f6e), (c) der Startseiten-Hero auf / und /de/ (Post 17/278, Container 3889fc3) — der traegt .fullheight-bnr nicht, hat aber dasselbe Muster (weisser Text links, Motiv rechts) und war gemessen rot (3,31:1 Desktop, 1,95:1 mobil). Ein Site-Scan ueber alle 91 Sitemap-URLs (Skript mit --hero auto) hat 29 Bildcontainer mit Text gefunden; nur diese sind betroffen. Rückbau: diese Datei löschen + den Enqueue-Block in functions.php entfernen. ========================================================================== */ /* -------------------------------------------------------------------------- 1) Basis — gilt bis 1023 px: der Text läuft über die ganze Breite, deshalb ein flächiges Scrim (ein horizontaler Verlauf brächte hier nichts). -------------------------------------------------------------------------- */ .fullheight-bnr, body.page-id-2906 .elementor-element-bf56f6e, body.page-id-17 .elementor-element-3889fc3, body.page-id-278 .elementor-element-3889fc3 { position: relative; } .fullheight-bnr::after, body.page-id-2906 .elementor-element-bf56f6e::after, body.page-id-17 .elementor-element-3889fc3::after, body.page-id-278 .elementor-element-3889fc3::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 1; /* unabhaengig von Elementors --overlay-opacity */ pointer-events: none; /* Buttons/Links im Hero bleiben klickbar */ background: rgba( 38, 43, 69, .62 ); } /* Inhalt über das Scrim heben. Der Hero hat genau EIN Kind (.e-con-inner, position:static) — das Umschalten auf relative ist hier gefahrlos. */ .fullheight-bnr > *, body.page-id-2906 .elementor-element-bf56f6e > *, body.page-id-17 .elementor-element-3889fc3 > *, body.page-id-278 .elementor-element-3889fc3 > * { position: relative; z-index: 1; } /* Seiten mit besonders hellem Motiv genau unter dem Text (ownCloud-online-remote-work.jpg: schlechtester Punkt 1,00:1 mobil). 21 = /remote-work/, 2900 = /de/home-office/ */ body.page-id-21 .fullheight-bnr::after, body.page-id-2900 .fullheight-bnr::after { background: rgba( 38, 43, 69, .72 ); } /* -------------------------------------------------------------------------- 2) Desktop ab 1024 px — der Text sitzt gemessen bei 5–50 % der Hero-Breite, das Motiv rechts. Deshalb ein Verlauf: volle Deckung bis 54 %, danach offen, ab 76 % komplett transparent. Die rechte Bildhälfte bleibt so unangetastet. -------------------------------------------------------------------------- */ @media ( min-width: 1024px ) { .fullheight-bnr::after, body.page-id-21 .fullheight-bnr::after, body.page-id-2900 .fullheight-bnr::after, body.page-id-2906 .elementor-element-bf56f6e::after, body.page-id-17 .elementor-element-3889fc3::after, body.page-id-278 .elementor-element-3889fc3::after { background: linear-gradient( 90deg, rgba( 38, 43, 69, .61 ) 0%, rgba( 38, 43, 69, .61 ) 54%, rgba( 38, 43, 69, 0 ) 76% ); } } /* -------------------------------------------------------------------------- 3) AUSNAHME GDPR-Seiten (45 = /gdpr-compliance/, 2954 = /de/gdpr/) Dort ist die Schrift DUNKEL (#464D6A) auf einem hellen Motiv. Ein Navy-Scrim würde den Kontrast VERSCHLECHTERN. Desktop ist dort bereits konform (5,8:1) — kein Scrim. Unter 1024 px rutscht der Text über einen dunkleren Bildausschnitt (2,17:1, bis 31 % der Fläche unter AA) — dort hellt ein weißes Scrim auf. Messung: 53 % zusaetzliches Weiss noetig (gemessen ueber dem bereits vorhandenen Elementor-Overlay 0,5 weiss), gesetzt 58 %. -------------------------------------------------------------------------- */ body.page-id-45 .fullheight-bnr::after, body.page-id-2954 .fullheight-bnr::after { background: rgba( 255, 255, 255, .58 ); } @media ( min-width: 1024px ) { body.page-id-45 .fullheight-bnr::after, body.page-id-2954 .fullheight-bnr::after { background: none; } } /* -------------------------------------------------------------------------- 4) Kein Scrim, wo das Hintergrundbild mobil ohnehin entfernt wird (style.css: .fullheight-bnr.mob-remove-bnr { background:none !important }). Aktuell von keiner Seite benutzt — Vorsorge, damit die Regel später nicht überrascht. -------------------------------------------------------------------------- */ @media ( max-width: 767px ) { .fullheight-bnr.mob-remove-bnr::after { background: none; } } /* -------------------------------------------------------------------------- 5) SEPARATER BEFUND, gleiche Messung: der Hero-CTA auf /collaboration/ (41) und /de/collaboration/ (2938) ist WEISS auf Mint #00E4BD = 1,64:1 — 100 % der Textfläche unter AA. Der identische Button auf /cloud-office/ trägt dort bereits Navy (8,48:1). Kein Scrim kann das beheben, der Button hat seine eigene Fläche. Hier wird nur die Textfarbe an die Schwester- seite angeglichen. Rückbau dieses Befunds allein: diesen Block löschen. -------------------------------------------------------------------------- */ body.page-id-41 .fullheight-bnr .elementor-button, body.page-id-41 .fullheight-bnr .elementor-button .elementor-button-text, body.page-id-2938 .fullheight-bnr .elementor-button, body.page-id-2938 .fullheight-bnr .elementor-button .elementor-button-text { color: #262B45; }