/* ========================================================================== UB Consulting — Paket 1 „Design angleichen" (2026-09-21) Eingebunden von inc/ub-design.php, NACH ub-a11y.css. Aufbau 1 Farben und Masse 2 Aufklappmenue „Ueber uns" im Markenstil (site-weit) 3 Aktiv-Strich nur bei Hover/Fokus/aktueller Seite (site-weit) 4 Obere Infozeile (site-weit) 5 Fixierte Kopfzeile beim Scrollen (site-weit) 6 Mobil-Kopfzeile und Mobilmenue (site-weit) 7 Inhaltsseiten — Titelzone 8 Inhaltsseiten — helle Inhaltskarte 9 Inhaltsseiten — Tabellen 10 Inhaltsseiten — Einwilligungs-Manager (Cookie-Seiten) 11 Inhaltsseiten — Leistungsseiten (portfolio-item) 12 Inhaltsseiten — 404, Suche, Archiv 13 Inhaltsseiten — CTA-Block 14 Sichtbarer Fokus auf dunkelblauem Grund 15 Sprungmarken-Abstand (fixierte Kopfzeile) 16 Schmale Ansichten Gemessene Kontraste (WCAG 2.1) stehen an der jeweiligen Regel. Sand #D4BFA3 wird NIE als Textfarbe auf hellem Grund verwendet (1,68:1) — nur auf Dunkelblau (9,07:1) und als Schaltflaechengrund mit dunkler Schrift. Die Mechanik des Aufklappmenues (ub-a11y.css/js: :focus-within, .ub-closed, aria-expanded, Esc) wird hier NICHT angetastet — es werden ausschliesslich Farben, Masse und Laufweiten gesetzt. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Farben und Masse -------------------------------------------------------------------------- */ :root { --ub-navy: #14203b; /* Marke Dunkelblau */ --ub-navy-2: #1b2a4a; /* leicht aufgehellt (Aufklappmenue, CTA) */ --ub-navy-3: #182842; /* Verlauf der Titelzone */ --ub-sand: #d4bfa3; /* Marke Sand */ --ub-offwhite: #faf8f5; /* Inhaltskarte */ --ub-card-text: #2e3647; /* Fliesstext in der Karte — 11,42:1 */ --ub-card-line: #8a7f6b; /* Tabellenlinien — 3,72:1 (>= 3:1) */ --ub-card-head: #efe9df; /* Tabellenkopf */ --ub-onnavy: #d9dee8; /* Fliesstext auf Dunkelblau — 11,98:1 */ --ub-hairline: rgba(255, 255, 255, 0.2); --ub-header-h: 130px; --ub-header-h-mobil: 70px; } /* ========================================================================== 2 · Aufklappmenue „Ueber uns" im Markenstil (site-weit) Vorher: 338 x 122 px, reinweiss, Text in Demo-Bronze #B29063 mit 0,6 em Laufweite. Nachher: kompakt, Dunkelblau leicht aufgehellt, Sand-Text, normale Laufweite. ========================================================================== */ .qodef-header-navigation ul li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul { width: 248px; padding: 12px 0; background-color: var(--ub-navy-2); border: 1px solid var(--ub-hairline); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34); } .qodef-header-navigation ul li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li { padding: 0 24px; } /* Schrift: 12 px statt 11 px, Laufweite 0,6 em -> 0,1 em, Sand auf #1B2A4A = 7,98:1. Die Regel muss spezifischer sein als die des Themes (0,2,4) und als die Kontrastregel aus ub-a11y.css (0,3,4) — hier (0,3,5). */ .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a, .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a .qodef-menu-item-text { color: var(--ub-sand); font-size: 12px; line-height: 1.5em; letter-spacing: 0.1em; } .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a { margin: 2px 0; padding: 9px 0; /* Das Theme schiebt den Text beim Ueberfahren von 0 auf 40 px ein — der Eintrag springt dabei. Abstand bleibt jetzt konstant. */ padding-left: 0; padding-right: 0; transition: color 0.2s ease-out, background-color 0.2s ease-out; } /* Der kleine Strich vor dem Untereintrag entfaellt — er war der Grund fuer den Sprung und traegt im kompakten Kasten nichts bei. */ .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a:before { display: none; } /* Hover/Fokus: Weiss auf #1B2A4A = 14,22:1 */ .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a:hover, .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a:focus, .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a:hover .qodef-menu-item-text, .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a:focus .qodef-menu-item-text, .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li.current-menu-item > a, .qodef-header-navigation > ul > li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li.current-menu-item > a .qodef-menu-item-text { color: #ffffff; padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 4px; } /* ========================================================================== 3 · Aktiv-Strich (site-weit) Der Strich des Themes sass 40 px LINKS ausserhalb des Menuepunkts und wirkte dadurch wie ein Trennzeichen. Er wird zu einer Unterstreichung in Sand direkt unter dem Text. Sichtbar nur bei Hover, bei Tastaturfokus und auf der tatsaechlich aufgerufenen Seite. Dass die beiden Anker-Menuepunkte nicht mehr als „aktuelle Seite" gelten, regelt inc/ub-design.php. ========================================================================== */ .qodef-header-navigation > ul > li > a:before { left: 0; right: auto; width: 100%; height: 1px; top: calc(50% + 14px); background-color: var(--ub-sand); } .qodef-header-navigation > ul > li > a:focus-visible:before { transform: scaleX(1); } /* Der Abstand zwischen den Menuepunkten bleibt bewusst beim Theme-Wert (33 px). Er zu aendern haette die Kopfzeile der Start- und Kontaktseiten optisch veraendert — das war ausdruecklich nicht gewuenscht. */ /* ========================================================================== 4 · Obere Infozeile (site-weit) Die doppelte E-Mail-Adresse rechts (Widget block-26) ist entfernt. Damit die rechte Spalte nicht als leerer Block Platz beansprucht, wird sie eingezogen, solange sie kein Widget enthaelt. ========================================================================== */ #qodef-page-header .qodef-header-widget-area-three:empty, #qodef-page-header .qodef-widget-holder.qodef--three:empty { display: none; } /* ========================================================================== 5 · Fixierte Kopfzeile beim Scrollen (site-weit) Farben und Schwelle stehen als Theme-Optionen in der Datenbank (qodef_sticky_header_background_color = #14203B, _border_color, _skin = light, _scroll_amount = 120). Hier nur die Feinheiten, die keine Option kennt. ========================================================================== */ /* Kein zusaetzlicher Schatten: die fixierte Leiste steht bis zur Schwelle bei top: -70px, ihre Unterkante liegt also genau auf y = 0. Ein Schatten haette dort eine 1 px hohe Linie ueber die gesamte Seitenbreite gemalt — auch auf Start- und Kontaktseite (im Pixelvergleich aufgefallen). Die Trennlinie kommt stattdessen aus der Theme-Option qodef_sticky_header_border_color. */ /* Die fixierte Leiste ueberdeckt sonst den Fokusring des ersten Menuepunkts. */ .qodef-header-sticky .qodef-header-sticky-inner { overflow: visible; } /* ========================================================================== 6 · Mobil-Kopfzeile und Mobilmenue (site-weit) Hintergrund, Logo und Bedienknopf kommen aus Theme-Optionen (qodef_standard_mobile_header_background_color = #14203B, qodef_mobile_logo_main = helles Logo, qodef_mobile_header_opener_color). Hier das, wofuer es keine Option gibt: das aufgeklappte Menue selbst. ========================================================================== */ #qodef-page-mobile-header { background-color: var(--ub-navy); } #qodef-page-mobile-header .qodef-mobile-header-navigation { background-color: var(--ub-navy); border-top: 1px solid var(--ub-hairline); } #qodef-page-mobile-header .qodef-mobile-header-navigation ul li > a, #qodef-page-mobile-header .qodef-mobile-header-navigation ul li > a .qodef-menu-item-text, #qodef-page-mobile-header .qodef-mobile-header-navigation ul li > h6, #qodef-page-mobile-header .qodef-mobile-header-navigation ul li span { color: #ffffff; /* Weiss auf #14203B — 16,16:1 */ } #qodef-page-mobile-header .qodef-mobile-header-navigation ul li > a:hover, #qodef-page-mobile-header .qodef-mobile-header-navigation ul li > a:hover .qodef-menu-item-text, #qodef-page-mobile-header .qodef-mobile-header-navigation ul li.current-menu-item > a, #qodef-page-mobile-header .qodef-mobile-header-navigation ul li.current-menu-item > a .qodef-menu-item-text { color: var(--ub-sand); /* Sand auf #14203B — 9,07:1 */ } /* Trennlinien zwischen den Eintraegen — sonst verschwimmt die Liste. */ #qodef-page-mobile-header .qodef-mobile-header-navigation > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } #qodef-page-mobile-header .qodef-mobile-header-navigation > ul > li:last-child { border-bottom: 0; } /* Untermenue leicht abgesetzt. */ #qodef-page-mobile-header .qodef-mobile-header-navigation ul ul { background-color: rgba(255, 255, 255, 0.05); } /* Die beiden Kontaktwege (E-Mail/Telefon aus Block B) und die Sprachwahl sollen erkennbar zum Menue gehoeren, aber nicht wie Seiten aussehen. */ #qodef-page-mobile-header .qodef-mobile-header-navigation .ub-mobile-contact > a { color: var(--ub-sand); } /* Der Bedienknopf: Pfad- und Linienfarbe des SVG. */ #qodef-page-mobile-header .qodef-mobile-header-opener svg path, #qodef-page-mobile-header .qodef-mobile-header-opener svg polyline, #qodef-page-mobile-header .qodef-mobile-header-opener svg rect { fill: #ffffff; } #qodef-page-mobile-header .qodef-mobile-header-opener svg line { stroke: #ffffff; } #qodef-page-mobile-header .qodef-mobile-header-opener:hover svg path, #qodef-page-mobile-header .qodef-mobile-header-opener:hover svg rect { fill: var(--ub-sand); } /* Die Sprachflaggen im Mobilmenue stehen jetzt auf Dunkelblau. */ #qodef-page-mobile-header .qodef-mobile-header-navigation .pll-parent-menu-item > a, #qodef-page-mobile-header .qodef-mobile-header-navigation .lang-item > a { color: #ffffff; } /* ========================================================================== 7 · Inhaltsseiten — Titelzone Der Seitengrund ist bereits dunkelblau (Filter in inc/ub-design.php, Wert zeichengleich zu den Kontaktseiten). Die Titelzone braucht deshalb keinen Vollbreiten-Trick mit 100vw — solche Regeln erzeugen auf Systemen mit sichtbarer Bildlaufleiste waagrechtes Scrollen. Bewusste Abweichung von den Kontaktseiten: hier steht KEIN Kiew-Foto in der Titelzone, sondern ein sehr ruhiger Verlauf. Begruendung im Protokoll — das Foto ist das Erkennungszeichen der beiden Einstiegsseiten (Start und Kontakt); auf zwanzig Textseiten haette es die Aufmerksamkeit dorthin gezogen, wo der Text steht, und je Seitenaufruf ein Bild mehr gekostet. ========================================================================== */ body.ub-content-page #qodef-page-outer { position: relative; background-color: var(--ub-navy); padding-bottom: 96px; } /* Nachbesserung M8 (Prüfbericht 2026-09-21): Hier lag bis dahin ein Pseudo-Element `#qodef-page-outer::before` mit einem sehr ruhigen Verlauf #182842 → #14203B über die obersten 480 px. Optisch war das kaum zu sehen (gemessener Farbabstand 4–7 von 255), es hatte aber eine unangenehme Nebenwirkung: axe-core konnte den Hintergrund aller Elemente darunter nicht mehr bestimmen und meldete sie als „incomplete" statt „pass" — auf der FAQ 197 Knoten. Die automatische Kontrastprüfung deckte diese Stellen also nicht mehr ab. Der Verlauf ist deshalb ersatzlos entfallen; der Seitengrund ist jetzt eine reine Hintergrundfarbe, die axe wieder ausrechnen kann. */ body.ub-content-page #qodef-page-inner { position: relative; z-index: 1; } /* Abstand nach oben: der Inhalt liegt wegen qodef_content_behind_header = yes unter der transparenten Kopfzeile (130 px, mobil 70 px). */ body.ub-content-page .ub-page-intro { padding-top: 190px; padding-bottom: 44px; } body.ub-content-page .ub-page-intro h1 { margin: 0; color: #ffffff; /* Weiss auf #14203B — 16,16:1 */ font-family: "Marcellus", serif; } /* Kurze Sandlinie als Abschluss der Titelzone — dasselbe Gestaltungsmittel wie der Sand-Button auf der Startseite. */ body.ub-content-page .ub-page-intro::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 26px; background-color: var(--ub-sand); } /* ========================================================================== 8 · Inhaltsseiten — helle Inhaltskarte Lange Texte (FAQ, Rechtstexte, Leistungstexte) stehen NICHT als weisse Schrift auf Dunkelblau, sondern auf Off-White #FAF8F5 — genau wie die Formularkarte der Kontaktseite. ========================================================================== */ body.ub-content-page .ub-page-card { display: block; margin: 0 0 8px; padding: 52px 56px 46px; background-color: var(--ub-offwhite); border: 1px solid #e7e0d6; color: var(--ub-card-text); /* #2E3647 auf #FAF8F5 — 11,42:1 */ } body.ub-content-page .ub-page-card, body.ub-content-page .ub-page-card p, body.ub-content-page .ub-page-card li, body.ub-content-page .ub-page-card td, body.ub-content-page .ub-page-card dd, body.ub-content-page .ub-page-card dt { color: var(--ub-card-text); } body.ub-content-page .ub-page-card h1, body.ub-content-page .ub-page-card h2, body.ub-content-page .ub-page-card h3, body.ub-content-page .ub-page-card h4, body.ub-content-page .ub-page-card h5, body.ub-content-page .ub-page-card h6, body.ub-content-page .ub-page-card strong, body.ub-content-page .ub-page-card b { color: var(--ub-navy); /* #14203B auf #FAF8F5 — 15,24:1 */ } body.ub-content-page .ub-page-card h2 { margin-top: 1.6em; } body.ub-content-page .ub-page-card > :first-child { margin-top: 0; } body.ub-content-page .ub-page-card > :last-child { margin-bottom: 0; } /* Links: Dunkelblau UND unterstrichen. Die Farbe allein traegt gegen den Fliesstext zu wenig (WCAG 1.4.1) — die Unterstreichung ist der Traeger. #14203B auf #FAF8F5 = 15,24:1. */ body.ub-content-page .ub-page-card a { color: var(--ub-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } body.ub-content-page .ub-page-card a:hover, body.ub-content-page .ub-page-card a:focus { color: #7a5a31; /* auf #FAF8F5 — 5,94:1 */ text-decoration-thickness: 2px; } body.ub-content-page .ub-page-card code { padding: 1px 5px; background-color: #efe9df; color: var(--ub-navy); /* 13,38:1 */ border-radius: 2px; font-size: 0.92em; } /* Aufzaehlungen bekommen wieder sichtbare Einzuege. */ body.ub-content-page .ub-page-card ul, body.ub-content-page .ub-page-card ol { margin: 0 0 1.2em; padding-left: 1.4em; } body.ub-content-page .ub-page-card li { margin-bottom: 0.4em; } /* ========================================================================== 9 · Inhaltsseiten — Tabellen (Cookie-Richtlinie, 3 je Sprache) Vorher ohne jede Linie. Linienfarbe #8A7F6B auf #FAF8F5 = 3,72:1 und auf dem Kopfzeilengrund #EFE9DF = 3,26:1 — beides ueber der 3:1-Anforderung fuer grafische Objekte (WCAG 1.4.11). ========================================================================== */ body.ub-content-page .ub-table-scroll { overflow-x: auto; margin: 0 0 1.6em; -webkit-overflow-scrolling: touch; } body.ub-content-page .ub-page-card table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; border: 1px solid var(--ub-card-line); font-size: 15px; line-height: 1.55em; } body.ub-content-page .ub-page-card th, body.ub-content-page .ub-page-card td { padding: 10px 12px; border: 1px solid var(--ub-card-line); text-align: left; vertical-align: top; } body.ub-content-page .ub-page-card thead th { background-color: var(--ub-card-head); color: var(--ub-navy); /* 13,38:1 */ font-weight: 600; } body.ub-content-page .ub-page-card tbody tr:nth-child(even) td { background-color: #f3efe8; } /* ========================================================================== 10 · Inhaltsseiten — eingebetteter Einwilligungs-Manager (Cookie-Seiten) Complianz rendert `#cmplz-manage-consent-container` in den Seiteninhalt. Er steht jetzt in der hellen Karte und bekommt dort einen eigenen Rahmen, damit er als Bedienbereich erkennbar ist. ========================================================================== */ body.ub-content-page #cmplz-manage-consent-container { margin: 1.6em 0 0; padding: 24px 24px 18px; background-color: #ffffff; border: 1px solid #ddd5c8; } body.ub-content-page #cmplz-manage-consent-container .cmplz-category-title, body.ub-content-page #cmplz-manage-consent-container h3, body.ub-content-page #cmplz-manage-consent-container label { color: var(--ub-navy); /* 16,16:1 auf Weiss */ } body.ub-content-page #cmplz-manage-consent-container .cmplz-description, body.ub-content-page #cmplz-manage-consent-container p { color: #3d4556; /* auf Weiss — 9,6:1 */ } body.ub-content-page #cmplz-manage-consent-container .cmplz-save-settings, body.ub-content-page #cmplz-manage-consent-container .cmplz-btn { color: var(--ub-navy); background-color: var(--ub-sand); /* Dunkelblau auf Sand — 9,07:1 */ border-color: transparent; } body.ub-content-page #cmplz-manage-consent-container-nojavascript { margin: 1.4em 0 0; padding: 14px 16px; background-color: #efe9df; border-left: 3px solid var(--ub-sand); color: var(--ub-navy); } /* ========================================================================== 11 · Inhaltsseiten — Leistungsseiten (portfolio-item) Aufbau des Themes: article > .qodef-e-inner > .qodef-media (leer) > .qodef-e-content > … > .qodef-col--9 h1.qodef-e-title .qodef-portfolio-content Die H1 ist dort bereits ein Geschwisterelement des Textes — es braucht also keinen Umbau im PHP, nur CSS. ========================================================================== */ /* Der Medienbereich ist auf allen 16 Leistungsseiten leer und wuerde als Leerraum zwischen Kopfzeile und Titel stehen. Sobald dort ein Bild steht, wird er wieder eingeblendet (:has wird von allen aktuellen Browsern unterstuetzt; ohne :has bleibt er ausgeblendet — heute richtig). */ body.ub-content-page--leistung .qodef-portfolio-single-item .qodef-media { display: none; } body.ub-content-page--leistung .qodef-portfolio-single-item .qodef-media:has(img) { display: block; } /* Nachbesserung M2 (Prüfbericht): Die Leistungsseiten standen auf einem anderen Raster als die Textseiten — die Inhaltsspalte begann 10 px weiter links und war 20 px breiter (Theme-Raster 1100 px gegen Elementor-Container 1080 px), außerdem saß der Titel 27 px tiefer. Beim Wechsel FAQ → Leistung sprang der Inhalt sichtbar. Der Versatz beträgt auf JEDER geprüften Breite genau 10 px je Seite (1440/1280/1024/820/390 gemessen), deshalb genügt ein fester Innenabstand von 10 px — keine Sonderregeln je Breite. */ body.ub-content-page--leistung .qodef-portfolio-single-item .qodef-grid-item.qodef-col--9 { width: 100%; max-width: 100%; flex: 0 0 100%; /* Das Theme-Raster gibt dem Element 15 px Innenabstand; 25 px ergeben gemessen exakt dieselbe linke Kante und dieselbe Breite wie der Elementor-Container der Textseiten (1440/1280: 180 px / 1080 px, 1024/820: 138 bzw. 36 px / 748 px, 390: 37 px / 315 px). */ padding-left: 25px; padding-right: 25px; } body.ub-content-page--leistung h1.qodef-e-title { margin: 0; /* 190 − 27: der Beitragscontainer beginnt 27 px tiefer als der Elementor-Container der Textseiten. */ padding-top: 163px; color: #ffffff; /* 16,16:1 */ font-family: "Marcellus", serif; } body.ub-content-page--leistung h1.qodef-e-title::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 26px; background-color: var(--ub-sand); } body.ub-content-page--leistung .qodef-portfolio-content { margin-top: 44px; padding: 52px 56px 46px; background-color: var(--ub-offwhite); border: 1px solid #e7e0d6; color: var(--ub-card-text); } body.ub-content-page--leistung .qodef-portfolio-content p, body.ub-content-page--leistung .qodef-portfolio-content li { color: var(--ub-card-text); /* 11,42:1 */ } body.ub-content-page--leistung .qodef-portfolio-content h2, body.ub-content-page--leistung .qodef-portfolio-content h3, body.ub-content-page--leistung .qodef-portfolio-content h4, body.ub-content-page--leistung .qodef-portfolio-content strong { color: var(--ub-navy); /* 15,24:1 */ } body.ub-content-page--leistung .qodef-portfolio-content > :first-child { margin-top: 0; } body.ub-content-page--leistung .qodef-portfolio-content > :last-child { margin-bottom: 0; } body.ub-content-page--leistung .qodef-portfolio-content a { color: var(--ub-navy); text-decoration: underline; text-underline-offset: 3px; } /* Bisher fehlte hier der Hover-/Fokuswert. Es gibt heute keine Links in den Leistungstexten — sobald einer gesetzt wird, hätte der Theme-Bronzewert gegriffen (auf Off-White zu hell). Jetzt derselbe Wert wie in der Textkarte: #7A5A31 auf #FAF8F5 = 5,94 : 1. (Prüfbericht M3) */ body.ub-content-page--leistung .qodef-portfolio-content a:hover, body.ub-content-page--leistung .qodef-portfolio-content a:focus { color: #7a5a31; text-decoration-thickness: 2px; } /* Blaettern zwischen den Leistungen — steht auf Dunkelblau. */ /* Nachbesserung M7 (Prüfbericht): Die Blätter-Navigation war 22 × 20 px groß und unterschritt damit die 24 × 24 px aus WCAG 2.2 (2.5.8). Sie bekommt jetzt eine Trefferfläche von 44 × 44 px; der Pfeil selbst bleibt gleich groß, es wächst nur die Fläche. Der zugängliche Name je Sprache („Vorherige/Nächste Leistung") kommt aus inc/ub-a11y.php. */ body.ub-content-page #qodef-single-portfolio-navigation { margin-top: 28px; } body.ub-content-page #qodef-single-portfolio-navigation .qodef-m-inner a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } body.ub-content-page #qodef-single-portfolio-navigation svg .qodef-m-arrow { stroke: #ffffff; } body.ub-content-page #qodef-single-portfolio-navigation svg .qodef-m-line { fill: var(--ub-sand); } body.ub-content-page #qodef-single-portfolio-navigation a:hover svg .qodef-m-arrow { stroke: var(--ub-sand); } /* ========================================================================== 12 · Inhaltsseiten — 404, Suche, Archiv Kurze Seiten brauchen keine Karte; der Text steht direkt auf Dunkelblau. ========================================================================== */ body.ub-content-page--kurz #qodef-404-page { padding-top: 210px; padding-bottom: 70px; text-align: center; } /* Das Theme setzt den Titel per ID-Selektor auf Dunkelblau — hier ebenfalls mit ID, sonst gewinnt die Theme-Regel. */ body.ub-content-page--kurz #qodef-404-page .qodef-404-title { color: #ffffff; /* 16,16:1 */ } body.ub-content-page--kurz #qodef-404-page .qodef-404-text { color: var(--ub-onnavy); /* #D9DEE8 — 11,98:1 */ margin-left: auto; /* das Theme begrenzt die Breite, zentriert aber nicht — sonst steht der Absatz links */ margin-right: auto; margin-bottom: 34px; } /* „404" in Bronze auf Dunkelblau — 5,43:1, ausreichend. */ body.ub-content-page--kurz #qodef-404-page .qodef-404-tagline { color: #b29063; } body.ub-content-page--kurz .qodef-404-button .qodef-button.qodef-layout--filled-one, body.ub-content-page--kurz .qodef-404-button .qodef-button { color: var(--ub-navy); background-color: var(--ub-sand); /* 9,07:1 */ border-color: transparent; } body.ub-content-page--kurz .qodef-404-button .qodef-button:hover, body.ub-content-page--kurz .qodef-404-button .qodef-button:focus { color: var(--ub-navy); background-color: #ffffff; border-color: #ffffff; } /* Suche und Archiv: Titel und Listen stehen auf Dunkelblau. */ body.ub-content-page--liste #qodef-page-content { padding-top: 190px; padding-bottom: 90px; } body.ub-content-page--liste h1, body.ub-content-page--liste h2, body.ub-content-page--liste h3, body.ub-content-page--liste .qodef-e-title a, body.ub-content-page--liste p { color: #ffffff; } body.ub-content-page--liste .qodef-e-excerpt, body.ub-content-page--liste .qodef-e-info { color: var(--ub-onnavy); } /* ========================================================================== 13 · Inhaltsseiten — CTA-Block am Seitenende Der Kasten ist dunkelblau und stuende jetzt unsichtbar auf dunkelblauem Grund. Er wird leicht aufgehellt und bekommt eine Sandkante. ========================================================================== */ body.ub-content-page .ub-cta { background-color: var(--ub-navy-2); border: 1px solid var(--ub-hairline); border-top: 3px solid var(--ub-sand); } body.ub-content-page .ub-cta-title, body.ub-content-page .ub-cta-text, body.ub-content-page .ub-cta-or, body.ub-content-page .ub-cta-or a { color: #ffffff; /* Weiss auf #1B2A4A — 14,22:1 */ } /* ========================================================================== 14 · Sichtbarer Fokus auf dunkelblauem Grund ub-blockb.css und ub-a11y.css setzen site-weit einen dunkelblauen Ring. Auf Dunkelblau waere er unsichtbar — dort wird NUR die Farbe getauscht, die :focus-visible-Regeln selbst bleiben unberuehrt. ========================================================================== */ /* Nachbesserung M3 (Prüfbericht): Hier standen zusätzlich Regeln für `#qodef-page-mobile-header`, `.qodef-header-sticky` und `.qodef-drop-down-second`. Sie waren WIRKUNGSLOS — ub-a11y.css enthielt für dieselben Bereiche eine Regel mit `body:not(.home)` und damit höherer Spezifität (1,2,1 gegen 1,2,0). Der Umriss blieb dunkelblau auf dunklem Grund (1,14 : 1); sichtbar war nur der cremefarbene Hof. Statt hier die Spezifität hochzuschrauben (zwei Quellen, die sich gegenseitig überbieten), ist die Ursache in ub-a11y.css behoben: die dort stehende Ausnahme „auf Unterseiten dunkler Ring" stammte aus der Zeit der WEISSEN Unterseiten-Kopfzeile und ist seit Paket 1 falsch. Sie wurde entfernt, die Aufklappmenü-Regel auf Weiß umgestellt. → Einzige Quelle für Fokusstile in Kopfzeile, Sticky, Mobil-Kopfzeile und Aufklappmenü ist jetzt ub-a11y.css. Hier bleiben nur die Bereiche, die es dort nicht gibt: der Seiteninhalt der Inhaltsseiten auf dunkelblauem Grund. */ body.ub-content-page .ub-page-intro a:focus-visible, body.ub-content-page h1.qodef-e-title a:focus-visible, body.ub-content-page #qodef-single-portfolio-navigation a:focus-visible, body.ub-content-page--kurz a:focus-visible, body.ub-content-page--liste a:focus-visible { outline-color: var(--ub-sand); /* Sand auf Navy — 9,07:1 */ } /* Innerhalb der hellen Karte bleibt der dunkelblaue Ring richtig. */ body.ub-content-page .ub-page-card a:focus-visible, body.ub-content-page .qodef-portfolio-content a:focus-visible { outline-color: var(--ub-navy); } /* ========================================================================== 15 · Sprungmarken-Abstand Die fixierte Kopfzeile greift jetzt schon ab 120 px Scrollweg. Ohne Abstand wuerde sie das Ziel eines /#-Links verdecken. ========================================================================== */ [id]:target { scroll-margin-top: 110px; } /* Alle zwoelf Anker-Ziele des Hauptmenues, in allen vier Sprachen. K1 (2026-09-22): sv und et fehlten hier — sie waren nur ueber `:target` abgedeckt und damit nicht, solange die Adresse die Marke noch nicht traegt. */ #wersindwir, #unserteam, #unsereexpertise, #whoarewe, #ourteam, #ourexpertise, #vemarvi, #vartteam, #varexpertis, #kesmeoleme, #meiemeeskond, #meiekompetentsus { scroll-margin-top: 110px; } @media only screen and (max-width: 1024px) { [id]:target, #wersindwir, #unserteam, #unsereexpertise, #whoarewe, #ourteam, #ourexpertise, #vemarvi, #vartteam, #varexpertis, #kesmeoleme, #meiemeeskond, #meiekompetentsus { scroll-margin-top: 86px; } } /* Das Sprungziel bekommt beim Ankommen den Tastaturfokus (js/ub-design.js). Der Fokusring gehoert dort nicht hin — er wuerde einen ganzen Seitenabschnitt umranden. Der sichtbare Fokus bleibt allen echten Bedienelementen vorbehalten; die Fokusposition selbst geht nicht verloren, die Tastatur laeuft ab hier weiter. */ #wersindwir:focus, #unserteam:focus, #unsereexpertise:focus, #whoarewe:focus, #ourteam:focus, #ourexpertise:focus, #vemarvi:focus, #vartteam:focus, #varexpertis:focus, #kesmeoleme:focus, #meiemeeskond:focus, #meiekompetentsus:focus { outline: none; } /* ========================================================================== 16 · Schmale Ansichten Ab 1024 px uebernimmt die Mobil-Kopfzeile (70 px); das Theme setzt #qodef-page-outer dann auf margin-top: -70px. ========================================================================== */ @media only screen and (max-width: 1024px) { body.ub-content-page #qodef-page-outer { padding-bottom: 72px; } body.ub-content-page #qodef-page-outer::before { height: 360px; } body.ub-content-page .ub-page-intro { padding-top: 122px; padding-bottom: 34px; } body.ub-content-page--leistung h1.qodef-e-title { padding-top: 95px; /* 122 − 27, siehe M2 */ } /* Gleicher Abstand Titel → Karte wie auf den Textseiten (dort: padding-bottom der Titelzone). */ body.ub-content-page--leistung .qodef-portfolio-content { margin-top: 34px; } body.ub-content-page .ub-page-card, body.ub-content-page--leistung .qodef-portfolio-content { padding: 40px 32px 34px; } body.ub-content-page--kurz #qodef-404-page { padding-top: 150px; padding-bottom: 90px; } body.ub-content-page--liste #qodef-page-content { padding-top: 122px; } } @media only screen and (max-width: 680px) { body.ub-content-page #qodef-page-outer { padding-bottom: 56px; } body.ub-content-page #qodef-page-outer::before { height: 300px; } body.ub-content-page .ub-page-intro { padding-top: 106px; padding-bottom: 28px; } body.ub-content-page--leistung h1.qodef-e-title { padding-top: 79px; /* 106 − 27, siehe M2 */ } body.ub-content-page--leistung .qodef-portfolio-content { margin-top: 28px; } body.ub-content-page .ub-page-card, body.ub-content-page--leistung .qodef-portfolio-content { padding: 28px 20px 24px; } body.ub-content-page .ub-page-card table { min-width: 560px; font-size: 14px; } /* Nachbesserung M5 (Prüfbericht): Die H1 blieb auf dem Handy bei 50 px. Der längste Leistungstitel („Navigering inom regelverk, juridik och efterlevnad") füllte damit 425 px und die Titelzone 62 % des ersten Bildschirms. `clamp()` bindet die Größe an die Fensterbreite und deckelt sie bei 34 px; der Desktop bleibt unberührt, weil die Regel nur unter 680 px gilt. `overflow-wrap` fängt überlange Einzelwörter ab (Estnisch/Schwedisch neigen zu Komposita); `hyphens: manual` bleibt — es wird NICHT automatisch getrennt, nur an vorhandenen weichen Trennstellen umgebrochen. */ body.ub-content-page .ub-page-intro h1, body.ub-content-page--leistung h1.qodef-e-title { font-size: clamp(28px, 8.6vw, 34px); line-height: 1.16em; overflow-wrap: break-word; hyphens: manual; } body.ub-content-page .ub-page-card h2 { font-size: 26px; line-height: 1.22em; overflow-wrap: break-word; } body.ub-content-page .ub-page-intro::after, body.ub-content-page--leistung h1.qodef-e-title::after { width: 48px; margin-top: 18px; } body.ub-content-page--kurz #qodef-404-page { padding-top: 128px; padding-bottom: 72px; } } /* ========================================================================== 17 · Druckausgabe (site-weit) ========================================================================== Nachbesserung M1 (Prüfbericht 2026-09-21). Vorher gab es auf der ganzen Website KEINE einzige `@media print`-Regel. Mit dem dunkelblauen Seitengrund war das eine echte Verschlechterung: Browser drucken Hintergrundfarben standardmäßig NICHT („Hintergrundgrafiken" ist im Druckdialog aus), die weisse H1 stand also auf weissem Papier. Betroffen waren genau die Seiten, die man ausdruckt oder als PDF ablegt — Impressum, Datenschutz, Cookie-Richtlinie. Grundsatz dieses Blocks: dunkle Schrift auf Weiss, volle Papierbreite, alles Bedienbare und alle Deko raus. Er gilt für die ganze Website, nicht nur für Inhaltsseiten — auch der Ausdruck der Kontaktseite wird dadurch brauchbar. ========================================================================== */ @media print { /* --- 1) Grundfarben zurücksetzen ------------------------------------ */ html, body, body.ub-content-page, body.ub-contact-page { background: #ffffff !important; color: #14203b !important; } body #qodef-page-wrapper, body #qodef-page-outer, body #qodef-page-inner, body #qodef-page-content { background: none !important; background-color: #ffffff !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: 100% !important; } /* Der Verlauf der Titelzone und das Foto der Kontaktseite. */ body #qodef-page-outer::before, body #qodef-page-outer::after { display: none !important; } /* --- 2) Bedienung und Deko ausblenden ------------------------------- */ #qodef-page-header, #qodef-page-mobile-header, .qodef-header-sticky, #qodef-top-area, #qodef-page-footer, #qodef-back-to-top, #qodef-side-area, #qodef-fullscreen-area, .skip-link, .ub-skip-nav, .ub-cta, #qodef-single-portfolio-navigation, .cmplz-cookiebanner, #cmplz-manage-consent, .cmplz-manage-consent, #cmplz-manage-consent-container, #cmplz-manage-consent-container-nojavascript, .qodef-mobile-header-navigation, .widget_polylang { display: none !important; } /* --- 3) Titelzone: dunkle Schrift, kein Abstand nach oben ------------ */ body.ub-content-page .ub-page-intro, body.ub-contact-page .ub-contact-intro { padding: 0 0 10pt !important; } body.ub-content-page .ub-page-intro h1, body.ub-content-page--leistung h1.qodef-e-title, body.ub-contact-page .ub-contact-intro h1, body.ub-content-page--kurz #qodef-404-page .qodef-404-title { color: #14203b !important; padding-top: 0 !important; margin: 0 0 6pt !important; font-size: 22pt !important; line-height: 1.2 !important; } body.ub-content-page .ub-page-intro::after, body.ub-content-page--leistung h1.qodef-e-title::after { display: none !important; } body.ub-contact-page .ub-contact-intro .ub-lead, body.ub-content-page--kurz #qodef-404-page .qodef-404-text { color: #14203b !important; } /* Die Zwischenüberschriften der Kontaktseite stehen am Bildschirm weiss auf Dunkelblau — auf Papier müssen sie dunkel werden. */ body.ub-contact-page .ub-contact-h2, body.ub-contact-page .ub-contact-h3, body.ub-contact-page .ub-contact-info .ub-contact-h2, body.ub-contact-page .ub-contact-info .ub-contact-h3 { color: #14203b !important; } /* --- 4) Inhaltskarte auf volle Papierbreite -------------------------- */ body.ub-content-page .ub-page-card, body.ub-content-page--leistung .qodef-portfolio-content, body.ub-contact-page .ub-form, body.ub-contact-page .ub-contact-info { background: none !important; background-color: #ffffff !important; border: 0 !important; padding: 0 !important; margin: 0 !important; width: auto !important; max-width: 100% !important; color: #14203b !important; } /* Das 1300-px-Raster passt nicht auf A4 — sonst wird rechts abgeschnitten. */ body .qodef-grid, body .qodef-grid-inner, body .qodef-grid-item, body .qodef-content-grid, body .elementor-element, body .e-con, body .e-con-inner, body .elementor-widget-container, body .ub-page-card, body .qodef-portfolio-single-item { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; float: none !important; } body.ub-content-page .ub-page-card, body.ub-content-page .ub-page-card p, body.ub-content-page .ub-page-card li, body.ub-content-page .ub-page-card td, body.ub-content-page--leistung .qodef-portfolio-content, body.ub-content-page--leistung .qodef-portfolio-content p, body.ub-content-page--leistung .qodef-portfolio-content li, body.ub-contact-page .ub-contact-info, body.ub-contact-page .ub-contact-info p, body.ub-contact-page .ub-contact-info li { color: #14203b !important; font-size: 10.5pt !important; line-height: 1.45 !important; } body.ub-content-page .ub-page-card h2, body.ub-content-page--leistung .qodef-portfolio-content h2 { font-size: 14pt !important; margin-top: 14pt !important; break-after: avoid; page-break-after: avoid; } body.ub-content-page .ub-page-card h3 { font-size: 12pt !important; break-after: avoid; page-break-after: avoid; } body.ub-content-page .ub-page-card a, body.ub-content-page--leistung .qodef-portfolio-content a, body.ub-contact-page .ub-contact-info a { color: #14203b !important; text-decoration: underline !important; } /* Fremde Ziele lassen sich auf Papier sonst nicht nachvollziehen. Interne Verweise und mailto/tel bleiben ohne Zusatz — dort steht die Adresse bereits im Text. */ body.ub-content-page .ub-page-card a[href^="http"]:not([href*="ub.consulting"])::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; } /* --- 5) Tabellen mit Linien, ohne Mindestbreite ---------------------- */ body.ub-content-page .ub-table-scroll { overflow: visible !important; } body.ub-content-page .ub-page-card table { min-width: 0 !important; width: 100% !important; font-size: 8.5pt !important; border-collapse: collapse !important; border: 1px solid #14203b !important; break-inside: auto; } body.ub-content-page .ub-page-card th, body.ub-content-page .ub-page-card td { border: 1px solid #14203b !important; padding: 3pt 4pt !important; color: #14203b !important; background: none !important; } body.ub-content-page .ub-page-card thead th { background-color: #ffffff !important; font-weight: 700 !important; } body.ub-content-page .ub-page-card thead { display: table-header-group; } body.ub-content-page .ub-page-card tr { break-inside: avoid; page-break-inside: avoid; } /* --- 6) Seitenrand und Umbrüche ------------------------------------- */ @page { margin: 16mm 14mm; } body.ub-content-page .ub-page-card img, body.ub-content-page--leistung .qodef-portfolio-content img { max-width: 100% !important; height: auto !important; } } /* ========================================================================== 18 · Korrekturpaket K2 — Kategorie-Etiketten der Leistungs-Kacheln ========================================================================== Die Etiketten unter den vier Leistungs-Kacheln der Startseite verwiesen auf Archive der Taxonomie `portfolio-category`. In DE/SV/ET antworteten diese Archive mit 404 (15 tote Links, Health-Check Teil 2, H-1). Die Verweise selbst sind in PHP entfernt (inc/ub-korrekturpaket.php, Filter `term_links-portfolio-category`) — sie stehen also nicht mehr im Quelltext. Uebrig bleibt der leere Rahmen des Plugin-Layouts; er wird hier entfernt, damit die Kacheln keinen Leerraum am Fuss behalten. Der Rahmen enthaelt in dieser Vorlage AUSSCHLIESSLICH die Kategorien (halstein-core/.../portfolio-list/variations/info-below/layouts/ info-below.php) — es geht also kein anderer Inhalt verloren. ========================================================================== */ .qodef-portfolio-list .qodef-e-bottom-holder { display: none; } /* ========================================================================== 19 · Korrekturpaket K7e — Sprachumschalter als Textkuerzel ========================================================================== Vorher: drei Flaggen zu je 16 x 11 px (WCAG 2.2, 2.5.8 verlangt 24 x 24 px; ausserdem stehen Flaggen fuer Laender, nicht fuer Sprachen). Nachher: EN · DE · SV · ET in Weiss auf Dunkelblau, in derselben Schrift, Groesse und Laufweite wie die Infozeile darueber. Die aktuelle Sprache steht in Sand und traegt `aria-current="true"` (von Polylang gesetzt); ihr barrierefreier Name ist der Sprachname in der Zielsprache (inc/ub-korrekturpaket.php). ========================================================================== */ .widget_polylang.qodef-header-widget-area-one ul { gap: 0; } .widget_polylang.qodef-header-widget-area-one .lang-item a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 24px; padding: 5px 7px; font-family: var(--qode-main-font, Montserrat), "Montserrat", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; text-decoration: none; color: #ffffff; /* 16,16 : 1 auf Navy */ transition: color 0.2s ease; } .widget_polylang.qodef-header-widget-area-one .lang-item a:hover { color: var(--ub-sand); } /* Trenner „·" — rein gestalterisch, kein Bedienelement. */ .widget_polylang.qodef-header-widget-area-one .lang-item + .lang-item::before { content: "\00B7"; color: rgba(255, 255, 255, 0.45); font-size: 12px; line-height: 1; align-self: center; } .widget_polylang.qodef-header-widget-area-one ul { align-items: center; } /* Aktuelle Sprache: sichtbar abgesetzt, aber weiterhin anklickbar. */ .widget_polylang.qodef-header-widget-area-one .current-lang > a, .widget_polylang.qodef-header-widget-area-one .lang-item a[aria-current] { color: var(--ub-sand); /* 9,07 : 1 auf Navy */ font-weight: 600; } /* Die 24-x-24-Hilfsflaeche aus ub-a11y.css wird nicht mehr gebraucht — der Verweis selbst ist jetzt gross genug. */ .widget_polylang.qodef-header-widget-area-one .lang-item a::after { content: none; } /* Mobilmenue: dieselbe Logik, aber mit ausgeschriebenen Sprachnamen — dort ist Platz, und der Name ist eindeutiger als ein Kuerzel. */ #qodef-page-mobile-header .qodef-mobile-header-navigation .lang-item > a[aria-current] .qodef-menu-item-text, #qodef-page-mobile-header .qodef-mobile-header-navigation .lang-item.current-lang > a .qodef-menu-item-text { color: var(--ub-sand); } /* ========================================================================== 20 · Korrekturpaket K4 — Layoutverschiebung durch das Einwilligungs-Banner ========================================================================== BEFUND (Health-Check Teil 2, H-3): CLS 0,17 auf jeder Seite, mobil. URSACHE, gemessen am 2026-09-22 (DevTools-Protokoll, 4x CPU-Drosselung, Netz „Langsames 4G", je 3 Laeufe): 100 % der Verschiebung stammen aus DIV.cmplz-cookiebanner. Complianz laesst das Banner mit #cmplz-cookiebanner-container .cmplz-cookiebanner { bottom: -50vh; animation: slideIn 1s forwards; } @keyframes slideIn { 100% { bottom: 0; } } einfahren (wp-content/uploads/complianz/css/banner-1-optin.css). `bottom` ist eine LAYOUT-Eigenschaft: der Browser rechnet in jedem Bild neu und zaehlt jede Zwischenstellung als Verschiebung. Gemessene Spur: y = 738 -> 735 -> 730 -> … ueber rund eine Sekunde. LOESUNG: dieselbe Bewegung, aber ueber `transform: translateY()`. Transform laeuft im Compositor, aendert kein Layout und zaehlt deshalb nicht in den CLS. Endlage, Groesse, Farben, Schrift, Schalter und die Einwilligungslogik bleiben unveraendert — Complianz' eigenes JavaScript wird nicht angefasst. Die Bewegung wird zugleich von 1 s auf 0,45 s verkuerzt, damit das Banner schneller bedienbar ist. Spezifitaet: `html #cmplz-… .cmplz-…` (0,1,1,1) schlaegt die Regel von Complianz (0,1,1,0) — ohne `!important`. Bei „Bewegung reduzieren" faellt die Animation ganz weg; das Banner steht dann sofort an seiner Endstelle. ========================================================================== */ @keyframes ub-cmplz-einblenden { from { transform: translateY(110%); } to { transform: translateY(0); } } html #cmplz-cookiebanner-container .cmplz-cookiebanner { /* Endlage wie bisher: slideIn endete bei bottom: 0 (animation-fill-mode forwards). Der Wert wird hier fest gesetzt, weil die Animation ihn nicht mehr liefert. */ bottom: 0; animation-name: ub-cmplz-einblenden; animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); animation-fill-mode: both; animation-delay: 0s; will-change: transform; } @media (prefers-reduced-motion: reduce) { html #cmplz-cookiebanner-container .cmplz-cookiebanner { animation: none; transform: none; } }