/* ============================================================================ Widerrufsreiter im Seitendesign von mitglieder.mehr-demokratie.de ============================================================================ Diese Datei gilt AUSSCHLIESSLICH fuer diese eine Site. Sie wird ueber page.includeCSS in custom_mitglieder/Configuration/TypoScript/setup.typoscript eingebunden; das statische Template heisst "TS setup mitglieder.mehr-demokratie.de" und haengt an genau einem Wurzeltemplate. Die geteilte Extension EXT:matomocookieconsent bleibt unangetastet - ihre Fassung (v=) muss also NICHT hochgezaehlt werden, und die uebrigen ~22 Sites sehen den Reiter unveraendert. Dasselbe Muster benutzen custom_sprezu (blauer Reiter, inzwischen ausgeblendet) und custom_md (dunkler Reiter fuer die Landesverbaende). --------------------------------------------------------------------------- WARUM UEBERHAUPT - drei am 27.8.2026 an der Live-Seite gemessene Befunde --------------------------------------------------------------------------- Der Reiter aus dem geteilten Skript ist auf DIESER Site praktisch unsichtbar und halb kaputt. Gemessen mit headless Chrome an https://mitglieder.mehr-demokratie.de/, Banner vorher per echtem Klick auf "Nur notwendige" weggeklickt: 1. UNSICHTBAR. Der Reitergrund der geteilten Datei ist rgba(255,255,255,.2) mit backdrop-filter: blur(5px). Auf dem hellgrauen Seitengrund #f1f0ee ergibt das real #f3f3f2. Die weisse Schrift darauf traegt 1,11:1, die Reiterflaeche hebt sich mit 1,03:1 vom Seitengrund ab - beides an den gerenderten Pixeln nachgerechnet, nicht geschaetzt. ⚠️ Das ist derselbe Befund wie am 19.8.2026 auf den Landesverbands-Sites; dort war die Antwort #303030 in custom_md/css-content.css. Der Schleier der geteilten Datei traegt nur auf DUNKLEN Seiten. 2. KEIN SYMBOL. Das ::before der geteilten Datei verlangt font-family: "Font Awesome 6 Free" mit content "\f563" (cookie-bite). Diese Site laeuft auf dem alten Sitepackage EXT:kiss und laedt FontAwesome 4.7.0 - und FA 4.7 kennt ueberhaupt kein Keks-Zeichen. ⚠️⚠️ Belegt ueber die Familienliste aus document.fonts: das Dokument kennt genau zwei @font-face-Familien, "Open Sans" (10 Schnitte) und "FontAwesome". document.fonts.check() taugt dafuer NICHT - es liefert fuer jede erfundene Familie true. Positivkontrolle der Messung: "FontAwesome" steht in der Liste, wird also gefunden, wenn es da ist. 3. FALSCHE SCHRIFT. Die geteilte Datei setzt "Source Sans Pro"; auch die ist hier nicht geladen (s. o.), der Reiter fiel auf generisches sans-serif zurueck - als einziges Element der Seite. --------------------------------------------------------------------------- WAS STATTDESSEN - an echten Elementen der Seite abgelesen --------------------------------------------------------------------------- #03548a Hausblau der Kacheln (9 Elemente auf der Startseite) #004078 dunkleres Blau, ebenfalls im Bestand #f1f0ee Seitengrund Open Sans, eckige Ecken (border-radius: 0 site-weit), keine Schatten. Kontraste der neuen Fassung, an den gerenderten Pixeln gemessen: weisse Schrift auf #03548a = 7,96:1 · Reiterflaeche gegen Seitengrund = 6,99:1. (Vorher 1,11:1 bzw. 1,03:1.) ⚠️ Der weisse 1-px-Umriss bleibt und ist kein Zierrat: der Reiter traegt jetzt DENSELBEN Ton wie die Inhaltskacheln. Steht zufaellig eine blaue Kachel hinter ihm, ist er ohne diese Kante nicht mehr als eigenes Element zu erkennen. ⚠️ Jede Regel hier traegt ein fuehrendes `body`. Die geteilte Datei benutzt `.md-consent-reiter` (0-1-0), `body .md-consent-reiter` ist 0-1-1 und gewinnt damit unabhaengig von der Ladereihenfolge. Wer eine Regel ergaenzt und das `body` vergisst, baut einen stillen Ausfall. */ body .md-consent-reiter { background: #03548a; /* ⚠️ backdrop-filter muss ausdruecklich zurueckgenommen werden. Ohne diese zwei Zeilen bliebe der Weichzeichner der geteilten Datei stehen und verwaesche den Seiteninhalt hinter einer jetzt DECKENDEN Flaeche - ein Rechenaufwand ohne jede sichtbare Wirkung. Genauso geloest in custom_md/Resources/Public/Css/css-content.css. */ backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; outline: 1px solid #fff; border-radius: 0; font-family: "Open Sans", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; /* ⚠️ Die 1.875rem OBEN sind der Platz, auf dem das Symbol sitzt (::before, absolut bei top:9px). Wer sie kuerzt, legt das Symbol in das Wort "Cookies" - genau das ist am 19.8.2026 auf den Landesverbands-Sites passiert. Die uebrigen Werte sind etwas grosszuegiger als in der geteilten Datei (0.4rem/0.1rem): der Kasten misst dadurch 64,4 x 52,6 statt 59,5 x 45,6 - naeher an den 48 px, die als Mindestgroesse fuer Beruehrflaechen gelten, und in dieser Form vom Nutzer abgenommen. */ padding: 1.875rem 0.5rem 0.35rem 0.5rem; } /* Das Kekssymbol als MASKE statt als Icon-Font. ⚠️⚠️ Bewusst nicht ueber eine Schriftart geloest. Die MD-Sites laufen auf vier FontAwesome-Generationen gleichzeitig (hier 4.7.0, anderswo 5.10.2 bzw. 6.2.1 mit Subset); ein Codepunkt ist deshalb keine verlaessliche Zusage. Die Maske haengt an gar keiner Schrift und zeigt auf allen Staenden dieselbe Form. Die Datei ist die unveraenderte cookie-bite.svg aus FontAwesome Free 6.2.1 (liegt im Repo unter custom_md2022/Resources/Public/Fonts/), Lizenzkommentar inklusive - dieselbe Form, die die uebrigen MD-Sites ueber die Schrift ziehen. ⚠️ background-color: currentColor faerbt die Maske. Dadurch folgt das Symbol jeder Farbaenderung am Reiter (Hover, Aktiv) ohne eigene Regel. ⚠️ Der -webkit-Prefix ist noch noetig (Safari vor 15.4). */ body .md-consent-reiter::before { content: ""; position: absolute; top: 9px; width: 1.25rem; height: 1.25rem; background-color: currentColor; -webkit-mask: url("../Icons/cookie-bite.svg") center / contain no-repeat; mask: url("../Icons/cookie-bite.svg") center / contain no-repeat; } /* Hover und Aktiv. ⚠️⚠️ Hier steht die ID und nicht die Klasse, und das hat einen gemessenen Grund. Die geteilte Datei setzt .no-touchevents .md-consent-reiter:hover, .md-consent-reiter:active und das ist 0-3-0 - ein `body .md-consent-reiter:hover` (0-2-1) verliert dagegen. `body #md-consent-reiter` ist 1-1-1 und gewinnt sicher. ⚠️ Nebenbefund vom 27.8.2026: `.no-touchevents` trifft auf DIESER Site ohnehin nie. Das Modernizr 2.6.2 aus EXT:kiss schreibt `no-touch` an das , nicht `no-touchevents` - gemessen an der Klassenliste der Live-Seite. Der Reiter hatte hier also bisher gar keinen Hover-Zustand, nur :active. Auf diese Zufaelligkeit baue ich die Regel trotzdem nicht auf. */ body #md-consent-reiter:hover, body #md-consent-reiter:active { background: #004078; } /* ============================================================================ Die zwei Symbole IM DIALOG - gleiche Ursache, gleiche Loesung ============================================================================ Vom Nutzer am 27.8.2026 gemeldet ("fehlen die icons im cookie popup"), danach auf dev nachgemessen. Es ist derselbe Befund wie am Reiter: die geteilte Datei setzt an beiden Stellen "Font Awesome 6 Free", und diese Site hat die Schrift nicht. ⚠️⚠️ Beim Schliessknopf ist das kein Schoenheitsfehler. Die geteilte Datei blendet zusaetzlich das eigene der Bibliothek aus (`#cc-main .pm__close-btn > span { display:none }`), damit die Glyphe an dessen Stelle treten kann. Ohne die Schrift greift beides ins Leere und uebrig bleibt ein LEERES blaues 45x45-Feld - ein Knopf ohne jedes Zeichen, was er tut. Gemessen: Kasten 45x45 bei x 938 / y 86, `::before`-Inhalt gesetzt, aber keine Tinte. ⚠️ Der Knopf sitzt bei `top: -3.8125rem`, also OBERHALB des Dialogkastens. Wer den Dialog per Bildausschnitt an dessen Rechteck prueft, hat ihn nicht im Bild und haelt ihn faelschlich fuer in Ordnung - genau das ist mir hier passiert. ⚠️ Beide Regeln setzen NUR Inhalt, Groesse und Fuellung. Lage, `transform` und `transition` bleiben bei der geteilten Datei - der Pfeil dreht sich beim Aufklappen weiterhin um 90 Grad (`.is-expanded … ::before`), ohne dass das hier wiederholt werden muesste. ⚠️ `background-color: currentColor` uebernimmt die jeweils schon gesetzte Schriftfarbe: weiss auf dem blauen Schliessknopf, dunkles Blau am Gruppentitel. Kein Farbwert wird hier doppelt gepflegt. */ /* Schliesskreuz. Die geteilte Regel ist `#cc-main .pm__close-btn::before` (1-1-0); das fuehrende `body` macht daraus 1-1-1 und gewinnt. */ body #cc-main .pm__close-btn::before, body #cc-main .cm__close-btn::before { content: ""; display: block; width: 1.5rem; height: 1.5rem; background-color: currentColor; -webkit-mask: url("../Icons/xmark.svg") center / contain no-repeat; mask: url("../Icons/xmark.svg") center / contain no-repeat; } /* Aufklapp-Pfeil an den drei Gruppenbloecken. Geteilte Regel ist `#cc-main .pm__section--expandable .pm__section-title::before` (1-2-0), mit `body` also 1-2-1. ⚠️ `text-align: center` der geteilten Regel wirkt auf eine Maske nicht mehr; die Zentrierung macht jetzt `center` im mask-Kurzwert. Breite bleibt 1rem wie dort, damit die Einrueckung des Titels unveraendert bleibt. */ body #cc-main .pm__section--expandable .pm__section-title::before { content: ""; width: 1rem; height: 1rem; background-color: currentColor; -webkit-mask: url("../Icons/caret-right.svg") center / contain no-repeat; mask: url("../Icons/caret-right.svg") center / contain no-repeat; } /* ============================================================================ Das Dialogfenster selbst im Hausblau dieser Site ============================================================================ Entscheidung des Nutzers am 27.8.2026. Vorher trug der Dialog das MD-Blau #1271ee, das auf dieser Site sonst nirgends vorkommt. ⚠️ Geaendert wird NUR, was Marke traegt: Schrift und Blau. Die Grautoene der geteilten Datei (#cccccc Block, #ebebeb Hover/Fusszeile, #a0a0a0 AUS-Schalter) bleiben - und zwar aus einem gerechneten Grund, nicht aus Bequemlichkeit: die Blockstaffelung braucht Ruhe→Hover mindestens 1,30 UND Hover→Fenster mindestens 1,12. Ueber die Grautoene DIESER Site durchgerechnet erfuellt das KEIN Paar (#d6dbdb/#e6e6e6 = 1,12 · #d6dbdb/#f1f0ee = 1,23 · #e0e0e0/#f1f0ee = 1,16); nur #cccccc/#ebebeb der geteilten Datei traegt (1,35 / 1,19). Ein weisses Fenster laesst da kaum Spielraum. Grau ist ausserdem kein Markensignal - das ist das Blau. ⚠️⚠️ --cc-font-family stand auf "Source Sans Pro" - und die Schrift ist auf dieser Site GAR NICHT GELADEN, genauso wenig wie FontAwesome 6. Der ganze Dialog lief also im Ruecktfall-Sans statt in der Hausschrift. Das ist keine Geschmacksfrage, sondern derselbe Defekt wie bei den Symbolen. ⚠️ Hover geht hier nach DUNKEL (#004078), nicht nach hell. Die geteilte Datei folgt der MD-Hausregel "Knopf wird auf Hover heller" (#1271ee → #2e92ff). Diese Site hat dafuer keine Vorlage: am 27.8.2026 mit echten Mausereignissen nachgemessen, haben Anmelden-Knopf, Links und Kacheln hier UEBERHAUPT KEINEN Hover-Zustand (Positivkontrolle war der Reiter, der wechselte messbar). Also wurde der Ton genommen, den die Site wirklich fuehrt: #004078. Kontraste, gerechnet (WCAG 2.1), Sollwert 4,5 fuer Text und 3,0 fuer Flaechen: Fliesstext #202020 auf Weiss 16,29 · Link/Knopfgrund #03548a auf Weiss 7,96 · weisse Knopfschrift auf #03548a 7,96 · dieselbe auf Hover #004078 10,48 · Zweitrang #575756 auf Fusszeile 5,80 · Fliesstext auf Gruppenblock 11,65 · Schalter AN #03548a gegen Block 5,69. ⚠️ Zum Vergleich die MD-Fassung: Knopf 4,54 und Knopf-Hover nur 3,15 - die neue Fassung ist an jeder Stelle besser, nicht nur anders. ⚠️ Offen benannt und NICHT verbessert: der AUS-Schalter #a0a0a0 traegt gegen den Block nur 1,87. Das ist Bestand der geteilten Datei (dort 1,61 gegen Weiss) und wird von der STELLUNG des Knopfes getragen, nicht von der Farbe. Wer das angeht, aendert es fuer alle ~23 Sites. */ body #cc-main { --cc-font-family: "Open Sans", sans-serif; --cc-primary-color: #202020; --cc-secondary-color: #575756; --cc-link-color: #03548a; --cc-btn-primary-bg: #03548a; --cc-btn-primary-border-color: #03548a; --cc-btn-primary-hover-bg: #004078; --cc-btn-primary-hover-border-color: #004078; --cc-btn-secondary-color: #03548a; --cc-btn-secondary-border-color: #03548a; --cc-btn-secondary-hover-bg: #004078; --cc-btn-secondary-hover-border-color: #004078; --cc-toggle-on-bg: #03548a; } /* Drei Stellen faerbt die geteilte Datei FEST, nicht ueber eine Variable - die brauchen eigene Regeln, sonst bliebe an ihnen das MD-Blau stehen. Gefunden durch Auszaehlen aller #1271ee/#2e92ff ausserhalb der Variablen und der Kommentare (Z. 266, 343, 381 der geteilten Datei; Z. 643 ist der Reiter und steht schon weiter oben). */ body #cc-main .cc__link:hover { color: #004078; } body #cc-main .pm__close-btn, body #cc-main .cm__close-btn { background: #03548a; } /* ⚠️ Die Klasse steht ABSICHTLICH doppelt. Die geteilte Datei setzt `.no-touchevents #cc-main .pm__close-btn:hover` = 1-3-0; ein `body #cc-main .pm__close-btn:hover` (1-2-1) verliert dagegen. Mit der doppelten Klasse sind es 1-3-1 und die Regel gewinnt sicher. ⚠️ Ja, `.no-touchevents` trifft auf dieser Site nie (Modernizr 2.6.2 aus EXT:kiss schreibt `no-touch`). Auf diese Zufaelligkeit ist die Regel trotzdem nicht gebaut - dieselbe Ueberlegung wie beim Reiter weiter oben. */ body #cc-main .pm__close-btn.pm__close-btn:hover, body #cc-main .pm__close-btn.pm__close-btn:active, body #cc-main .cm__close-btn.cm__close-btn:hover, body #cc-main .cm__close-btn.cm__close-btn:active { background: #004078; }