/** * Bricks Consent — nur essenzielle Styles. * * Das eigentliche Banner-/Popup-Design wird vollständig im Bricks Builder * gebaut. Diese Datei liefert nur minimale, optionale Hilfen: * - einen Floating-Button-Style (Opt-in über die Klasse .bconsent-floating) * - eine Sichtbarkeits-Hilfsklasse am , an die der Admin sein * Banner per CSS koppeln kann, falls die Bricks-Popup-API nicht greift. * * @package BricksConsent */ /* Optionaler Floating-Widerrufs-Button. Auf ein Bricks-Element mit data-bconsent-open-banner anwendbar, indem dort zusätzlich die Klasse .bconsent-floating gesetzt wird. */ .bconsent-floating { position: fixed; left: 1rem; bottom: 1rem; z-index: 99990; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: #1e1e1e; color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; } .bconsent-floating:hover, .bconsent-floating:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); outline: none; } /* Fallback-Sichtbarkeitssteuerung: Wenn die Bricks-Popup-API nicht verfügbar ist, kann ein im Markup vorhandenes Banner über diese Klasse ein-/ausgeblendet werden. */ .bconsent-banner-fallback { display: none; } html.bconsent-banner-visible .bconsent-banner-fallback { display: block; } /* Hinweis: Gemäß EDPB 3/2022 dürfen „Ablehnen" und „Akzeptieren" visuell NICHT unterschiedlich gewichtet werden. Etwaige Button-Styles bitte im Bricks Builder bewusst gleichwertig gestalten. */ /* --------------------------------------------------------------------------- Kategorie-Toggles als Checkbox darstellen. Wirkt auf JEDES Element mit data-bconsent-toggle (nativer Bricks-Button, Div, Text …). Den Zustand setzt bconsent.js über aria-checked / .bconsent-toggle-on. Alles über currentColor → passt sich der Textfarbe an und ist in Bricks frei überschreibbar. --------------------------------------------------------------------------- */ [data-bconsent-toggle] { display: inline-flex; align-items: center; gap: 0.55em; cursor: pointer; user-select: none; } [data-bconsent-toggle]::before { content: ""; flex: 0 0 auto; box-sizing: border-box; width: 1.15em; height: 1.15em; display: inline-flex; align-items: center; justify-content: center; border: 2px solid currentColor; border-radius: var(--radius-s); font-size: 0.85em; font-weight: 700; line-height: 1; transition: background-color 0.12s ease, border-color 0.12s ease; } /* Aktiv: Häkchen anzeigen (✓ in currentColor, Box bleibt umrandet). */ [data-bconsent-toggle][aria-checked="true"]::before, [data-bconsent-toggle].bconsent-toggle-on::before { content: "\2713"; } [data-bconsent-toggle]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; } /* Essenziell ist immer an und nicht abwählbar. */ [data-bconsent-toggle="essential"] { cursor: default; opacity: 0.45; } /* --------------------------------------------------------------------------- Toggle-Chrome-Reset (saubere Checkbox-Zeilen). Ist der Toggle ein nativer Bricks-Button, so entkleiden wir ihn vom Button-CHROME — Hintergrund, Rahmen, Schatten, Radius, Hover-Farbe — sodass nur noch die Checkbox-Zeile bleibt: ::before-Kästchen + Label. Damit muss der Admin die Bricks-Buttons nicht mehr manuell entkleiden. Bewusst NUR Chrome: Padding, Breite, Font und Ausrichtung bleiben bei Bricks bzw. beim Admin (das native Button-Padding sorgt für die saubere Einrückung der Kästchen unter dem Fließtext — würden wir es entfernen, ragten die Boxen links aus dem Textblock heraus). Selektor deckt alle Bricks-Button-Renderings ab: Bricks gibt das Button- Element je nach Kontext als //