@charset "UTF-8"; /* ========================================================================== SCHAMLOS — Complianz-Consent-Banner im Marken-Design ========================================================================== NOCH NICHT EINGEBUNDEN. Diese Datei ist der Nachfolger von cookie-banner.css und wird erst beim Umstieg von Real Cookie Banner auf Complianz aktiviert (siehe MIGRATION-RCB-COMPLIANZ.md). Solange RCB der aktive Banner ist, bleibt cookie-banner.css eingebunden — die beiden Dateien sprechen unterschiedliche Selektoren an und stören sich nicht. --------------------------------------------------------------------------- WARUM DIESE DATEI SO VIEL KÜRZER IST ALS IHR VORGÄNGER --------------------------------------------------------------------------- cookie-banner.css brauchte 102 !important, weil Real Cookie Banner sein CSS zur Laufzeit erzeugt, jede Regel zusätzlich mit der pageRequestUuid4 des Containers als Vorfahre ausgibt (Spezifität 1-1-0) und auf einem Dutzend Elementen all:unset setzt. Complianz macht nichts davon. Nachgemessen am erzeugten Live-Stylesheet wp-content/uploads/complianz/css/banner-1-optin.css: - 0x all:unset - höchste Spezifität am Banner: 0-6-0, typisch 0-2-0 bis 0-3-0 - einziger ID-Selektor: #cmplz-manage-consent (feste ID, kein UUID) — betrifft nur den schwebenden Wiederöffnen-Reiter, der hier gar nicht vorkommt - die 18 !important im Plugin-Stylesheet stehen ausnahmslos in @media (max-height:400px) und @media (max-width:425px) Deshalb steht in dieser Datei KEIN EINZIGES !important. Wenn beim Nachjustieren eines nötig scheint, ist das ein Hinweis auf den falschen Selektor — bitte nachmessen statt verhärten. --------------------------------------------------------------------------- WARUM ÜBERALL "body" DAVORSTEHT --------------------------------------------------------------------------- Rein wegen der Ladereihenfolge, nicht zur Einschränkung. Complianz hängt sein Stylesheet auf wp_enqueue_scripts mit Priorität PHP_INT_MAX-50 ein, also NACH dieser Datei (im Live-HTML nachgemessen). Bei gleicher Spezifität gewänne damit immer das Plugin. "body" ist ein Typselektor und hebt jede Regel um genau 0-0-1 an. Das schlägt die Plugin-Regel auf jeder Verschachtelungstiefe, ohne dass man pro Regel abzählen müsste, wie viele Klassen das Plugin gerade benutzt — und es liest sich besser als ein verdoppelter Klassenname. --------------------------------------------------------------------------- ACHTUNG: DIE MEDIA-BLÖCKE DES PLUGINS --------------------------------------------------------------------------- Ein Media-Block erhöht die Spezifität NICHT. Die Quetsch-Layouts des Plugins in @media (max-height:400px) stehen auf 0-1-0 und würden von jeder Regel hier (0-1-1) geschlagen — auch außerhalb dieses Viewports gedachte. Alles, was dort gezielt anders sein muss, wird deshalb unten in Abschnitt 8 im gleichen Media-Block gespiegelt. Wer hier oben etwas ergänzt, das im Quetsch-Layout stören würde, muss es dort nachziehen. --------------------------------------------------------------------------- WAS HIER BEWUSST NICHT STEHT --------------------------------------------------------------------------- Farben, Radien und die Grundschriftgröße kommen aus dem Complianz-Customizer und sind am 17.08.2026 auf die Mockup-Werte gesetzt worden (Spalten colorpalette_* der Tabelle cmplz_cookiebanners). Sie landen als CSS-Variablen im erzeugten Stylesheet: --cmplz_banner_background_color #26132A Aubergine, Boxfläche --cmplz_banner_border_color #F3ECDC Creme, Rahmen --cmplz_banner_border_width 3px --cmplz_banner_border_radius 18px --cmplz_text_color #D9C9CE Fließtext --cmplz_hyperlink_color #9CF0EC Links --cmplz_text_font_size 14px --cmplz_button_accept_* #E8557A / #E8557A / #3A0E1C --cmplz_button_deny_* #26132A / #57D9D4 / #9CF0EC --cmplz_button_settings_* #26132A / #26132A / #B8A8AE --cmplz_slider_* #E8557A / #5A4048 / #F3ECDC --cmplz_button_border_radius 10px Eine Ausnahme, die man kennen muss, bevor man an diesen Werten dreht: --cmplz_button_accept_* färbt den Akzeptieren-Button NICHT mehr. Der liest seit der Angleichung an "Ablehnen" die Deny-Werte (Abschnitt 4). Die Accept-Palette speist nur noch den Scrollbalken des Textkörpers und "Auswahl speichern". Das ist Absicht: was im Customizer steht, überlebt ein Plugin-Update ohne Nacharbeit. Diese Datei kümmert sich nur um das, was der Customizer NICHT kann. Die --sed-cb-* Variablen unten sind deshalb auch keine Doppelung der Palette, sondern nur die Handvoll Werte, die im Customizer kein Feld haben und hier mehrfach gebraucht werden. ========================================================================== */ :root{ /* Kein Customizer-Feld: die Überschrift ist im Mockup heller als der Fließtext, teilt sich im Plugin aber --cmplz_text_color mit ihm. */ --sed-cb-headline:#F9E9D9; /* Kein Customizer-Feld: gedämpfte Stufe für Fußzeile und Schließen-X. */ --sed-cb-quiet:#B8A8AE; /* Kein Customizer-Feld: Akzentschrift für "Immer aktiv" und Fokusring. */ --sed-cb-accent-ink:#9CF0EC; /* Aus der Rahmenfarbe abgeleitete Flächen für die zweite Ebene. */ --sed-cb-tile:rgba(243,236,220,0.05); --sed-cb-hairline:rgba(243,236,220,0.18); /* Innenabstand der Box. Das Plugin steht auf 15px 20px; das Mockup verlangt 1.75rem. Die Trennlinien ziehen ihre negativen Außenabstände aus demselben Wert, siehe Abschnitt 2. */ --sed-cb-pad:1.75rem; } /* -------------------------------------------------------------------------- 1) Die Box -------------------------------------------------------------------------- Fläche, Rahmen, Radius und Breite kommen aus den Variablen und stehen deshalb hier nicht. Offen bleiben: Schriftart, Grundfarbe, Innenabstand, die Kippung und das overflow für das Etikett. Zur Schriftart: das Plugin setzt auf .cmplz-cookiebanner gar keine, sie käme also aus dem Theme. Buttons und Formularelemente erben font-family nicht von selbst — die bekommen in Abschnitt 4 ihr eigenes font-family:inherit. Zur Grundfarbe: das Plugin setzt color auf .cmplz-title, .cmplz-message und .cmplz-close einzeln, aber NICHT auf der Box. Der Aufklapp-Schalter der Kategorien steht auf color:inherit und erbt damit bis zum durch — auf dunklem Grund also potenziell dunkel. Deshalb hier eine Grundfarbe setzen; alles ohne eigene Farbe erbt sie. -------------------------------------------------------------------------- */ body .cmplz-cookiebanner{ padding:var(--sed-cb-pad); color:var(--cmplz_text_color); font-family:'Plus Jakarta Sans', sans-serif; /* Das Etikett in Abschnitt 1b sitzt bewusst über der Oberkante. Das Plugin setzt hier overflow-y:auto, was es abschneiden würde. Gefahrlos, weil eine Ebene tiefer gescrollt wird: .cmplz-body bringt sein eigenes overflow-y:auto samt max-height:55vh mit. Für den einzigen Fall, in dem die Box selbst scrollen müsste — sehr flache Viewports — stellt Abschnitt 8 das Clipping des Plugins wieder her. */ overflow:visible; } /* Die leichte Drehung ist Teil der Markensprache ("ungefähr"-Look, vgl. die gekippten Karten auf der Startseite). NUR ab 769px: unterhalb davon macht das Plugin aus der Box einen randlosen Streifen über die volle Breite am unteren Bildschirmrand (width:100%, bottom:0). Eine Drehung würde dort an beiden unteren Ecken einen keilförmigen Spalt aufreißen. Auf dem Desktop steht die Box dagegen frei mit 10px Abstand nach rechts und unten — bei 532px Breite hebt -0.6deg die Ecken um rund 5,5px, das passt in den Abstand. transform steht beim Plugin auf "initial" (aus dem Positions-Baustein bottom-right), also 0-1-0 — die 0-1-1 hier gewinnt. */ @media (min-width:769px){ body .cmplz-cookiebanner{ transform:rotate(-0.6deg); } } /* 1b) Etikett "Nur das Nötigste, versprochen". Complianz bietet dafür kein Element und keinen Textbaustein an, es entsteht deshalb als ::before auf der Box. Rein dekorativ (nicht selektierbar, für Screenreader unsichtbar); inhaltlich Relevantes gehört weiterhin in die Banner-Texte im wp-admin. Anders als bei Real Cookie Banner braucht das hier keinen Spezifitäts- Trick: Pseudo-Elemente treffen die Plugin-Selektoren ohnehin nicht. Rotation -2.4deg statt der im Mockup notierten -3deg: das Etikett sitzt IN der bereits um -0.6deg gedrehten Box und erbt deren Drehung, die beiden Winkel addieren sich. Unterhalb 769px entfällt die Boxdrehung, dort sind es entsprechend -3deg — siehe Abschnitt 7. */ body .cmplz-cookiebanner::before{ content:"Nur das Nötigste, versprochen"; position:absolute; top:-11px; left:18px; z-index:2; padding:4px 10px; background:var(--cmplz_banner_border_color); color:var(--cmplz_banner_background_color); border-radius:0; font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:700; line-height:1.2; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; transform:rotate(-2.4deg); transform-origin:left center; } /* -------------------------------------------------------------------------- 2) Kopfbereich, Trennlinien, Textkörper -------------------------------------------------------------------------- */ /* Die Überschrift ist im Mockup heller und größer als der Fließtext. Größe: --cmplz_title_font_size steht fest auf 15px und ist im Customizer NICHT einstellbar — die Variable fehlt in get_css_settings(). Deshalb hier. */ body .cmplz-cookiebanner .cmplz-title{ color:var(--sed-cb-headline); font-size:19px; font-weight:500; line-height:1.35; } /* Schließen-X. Das Plugin gibt ihm --cmplz_text_color, also dieselbe Farbe wie den Fließtext — als Bedienelement soll es zurücktreten und erst beim Überfahren hervortreten. Das Icon ist ein Inline-SVG mit fill="currentColor", color genügt also. */ body .cmplz-cookiebanner .cmplz-close{ color:var(--sed-cb-quiet); } body .cmplz-cookiebanner .cmplz-close:hover{ color:var(--sed-cb-headline); } /* Trennlinien über den Buttons und unter der Kopfzeile. Das Plugin gibt .cmplz-divider AUSSCHLIESSLICH negative Außenabstände (-20px links/rechts) und keine Höhe und keine Farbe — die Linien sind im Standard also unsichtbar. Beides kommt deshalb hier. Die -20px passen zum Plugin-Innenabstand von 20px. Weil Abschnitt 1 auf 1.75rem umstellt, müssen die Außenabstände mitgehen, sonst enden die Linien 8px vor dem Rahmen. */ body .cmplz-cookiebanner .cmplz-divider{ height:1px; margin-left:calc(var(--sed-cb-pad) * -1); margin-right:calc(var(--sed-cb-pad) * -1); background:var(--sed-cb-hairline); } /* Fließtext. Farbe und Größe kommen aus den Variablen; die Zeilenhöhe des Plugins ist Schriftgröße x 1.5, das Mockup verlangt 1.6. */ body .cmplz-cookiebanner .cmplz-message{ line-height:1.6; } /* Links im Fließtext (z. B. "Datenschutzerklärung"). Farbe kommt aus --cmplz_hyperlink_color; das Plugin lässt sie aber ohne Unterstreichung stehen, wodurch sie sich auf dem dunklen Grund nur über den Farbton vom Text abheben. */ body .cmplz-cookiebanner .cmplz-message a{ text-decoration:underline; } /* Zwei Dinge auf einmal, weil sie zusammenhängen: die Box bekommt ihre Breite, der Textkörper gibt seine ab. Das Plugin rechnet die Breite von Textkörper und Kategorienliste als var(--cmplz_banner_width) - 42px aus (20px Innenabstand je Seite plus 1px Rahmen je Seite). Diese Rechnung kennt unsere Werte nicht: der Rahmen steht auf 3px und der Innenabstand auf 1.75rem = 28px, das Chrome der Box ist also 2x28 + 2x3 = 62px statt 42px. Die Plugin-Breite von 484px ist damit 20px zu groß für die 464px, die bei 526px Boxbreite innen frei sind — sichtbar als abgeschnittener rechter Rand, weil .cmplz-body auf overflow-x:hidden steht. Deshalb width:auto. ACHTUNG, hier lag der Fehler bis zum 17.08.2026: es genügt NICHT, die Plugin-Rechnung auf 62px nachzuziehen. Der Textkörper darf gar keine feste Breite haben, denn die Box hat selbst keine — sie steht position:fixed an right/bottom und schrumpft auf ihren Inhalt. Ihre Breite ergab sich also aus dem Textkörper, und mit width:auto wuchs der auf Max-Content: die Box war 1270px breit statt 526px. Die Breite gehört deshalb an die Box, nicht an den Textkörper. Wegen box-sizing:border-box (setzt das Plugin) sind das direkt die 526px aus dem Customizer, ohne jede Abzugsrechnung — der Innenabstand steckt schon drin. Der Textkörper füllt danach, was übrig ist. Warum nicht doch eine feste Breite am Textkörper mit korrigierten 62px: das trifft im Ruhezustand zwar auch 526px, hält aber nicht. Sobald der Textkörper scrollt — "Einstellungen ansehen" geöffnet und eine Kategorie-Beschreibung aufgeklappt, 599px Inhalt bei max-height:55vh — legt sein 5px-Scrollbalken die intrinsische Breite fest und schiebt die Box auf 531px. Sie spränge also mitten in der Bedienung breiter. Mit der Breite an der Box nimmt sich der Scrollbalken den Platz von innen und nichts bewegt sich. Beide Varianten am 17.08.2026 im gerenderten DOM gegeneinander gemessen. Nur ab 769px: unterhalb davon macht das Plugin aus der Box einen Streifen über die volle Breite (width:100%, siehe Abschnitt 1). Eine feste Breite hier würde das kaputtmachen. Zum Nachmessen bitte offsetWidth nehmen, nicht getBoundingClientRect(): die Box ist um -0.6deg gedreht, deren achsenparallele Hülle meldet deshalb rund 531px statt der 526px Layoutbreite. */ @media (min-width:769px){ body .cmplz-cookiebanner{ width:var(--cmplz_banner_width); } body .cmplz-cookiebanner .cmplz-message, body .cmplz-cookiebanner .cmplz-categories{ width:auto; } } /* -------------------------------------------------------------------------- 3) Zweite Ebene: Kategorien, Beschreibungen, Schieberegler -------------------------------------------------------------------------- Sichtbar erst nach einem Klick auf "Einstellungen anpassen" (categories/view-preferences.css blendet .cmplz-categories bis dahin aus). Ein eigenes Mockup gibt es für diese Ebene nicht — die Werte hier führen die Formensprache der ersten Ebene fort. Wenn ein Mockup nachkommt, gehört es hierhin. -------------------------------------------------------------------------- */ /* Die Kategorie-Kacheln. Das Plugin gibt ihnen rgba(239,239,239,0.5), also ein helles Grau — auf der dunklen Box der auffälligste Fehler im Standard-Look. Es ist zugleich die einzige Farbe im ganzen erzeugten Stylesheet, die weder aus einer Variablen kommt noch im Customizer einstellbar ist. */ body .cmplz-cookiebanner .cmplz-categories .cmplz-category{ background-color:var(--sed-cb-tile); border:1px solid var(--sed-cb-hairline); border-radius:12px; } /* Kategorie-Überschrift ("Marketing", "Statistiken"). Größe und Gewicht setzt das Plugin bereits passend (14px/500), nur die Farbe folgt --cmplz_text_color und soll wie die Hauptüberschrift heller sein. */ body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title{ color:var(--sed-cb-headline); } /* "Immer aktiv" neben der Kategorie Essenziell. --cmplz_category_header_always_active_color ist in get_css_settings() fest auf den Schlüsselwortwert "green" verdrahtet und im Customizer nicht erreichbar. Auf dem Aubergine-Grund ist das ein kaum lesbares Dunkelgrün. */ body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active{ color:var(--sed-cb-accent-ink); } /* Kategorie-Beschreibung. Farbe und Größe kommen aus den Variablen (--cmplz_text_color, --cmplz_category_body_font_size = 14px), nur die Zeilenhöhe fehlt dem Plugin hier ganz. */ body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description{ line-height:1.6; } /* Fokusring des Schiebereglers. Das Plugin setzt dafür ein hart kodiertes #245fcc — ein Blau, das weder zur Palette passt noch auf dem dunklen Grund ausreichend Kontrast hat. Die Regel bleibt bewusst erhalten und wird nur umgefärbt: sie ist die einzige sichtbare Fokusanzeige des Schalters (die Checkbox selbst ist ausgeblendet). */ body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before{ box-shadow:0 0 0 2px var(--sed-cb-accent-ink); } /* -------------------------------------------------------------------------- 4) Buttons -------------------------------------------------------------------------- Flächen-, Rahmen- und Schriftfarben kommen aus den drei Button-Paletten im Customizer und stehen deshalb im Regelfall nicht hier. Offen bleiben: Anordnung, Innenabstand, Schriftschnitt — und drei Fälle, in denen die Paletten den gewünschten Zusammenhang nicht abbilden können, weil sie nichts aneinander binden: zwei Buttons sollen gleich aussehen, teilen sich aber keine Palette (Akzeptieren/Ablehnen), oder sie sollen unterschiedlich aussehen, teilen sich aber eine (Auswahl speichern gegenüber Einstellungen anpassen). -------------------------------------------------------------------------- */ /* Untereinander statt nebeneinander, wie im Mockup. Das Plugin stapelt von sich aus erst ab 768px abwärts. */ body .cmplz-cookiebanner .cmplz-buttons{ flex-direction:column; gap:10px; } /* font-family muss ausdrücklich vererbt werden: