/* ============================================================================
Furnify3D — Cookiebot consent-dialog theme
----------------------------------------------------------------------------
Wird per auf den
Enscape-Landingpages geladen (enscape/index.html = Quelle → de/es generiert).
Grund für Seiten-CSS statt Cookiebot-Admin: der neue Usercentrics-Konfigurator
(Konfiguration ▸ Design) bietet KEIN Custom-CSS-Feld mehr. Der Dialog wird von
uc.js in unsere Seite injiziert, deshalb greift unser Seiten-CSS trotzdem.
Verifiziert gegen die Live-DOM (classic Cookiebot-Dialog, #CybotCookiebot*).
Brand-Tokens (aus enscape/index.html :root):
Primär #2051ad · Navy #133168 / #0d2045 · Muted #6b7280
Font 'Unfold Sans' (auf den Landingpages via @font-face geladen)
Radius 16px (Dialog) / 10px (Buttons)
Siehe docs/cookiebot/README.md für Einbau + Settings-Empfehlungen.
============================================================================ */
/* --- 1. Floating-Widget unten links ausblenden -----------------------------
Der "Cookie-Einstellungen ändern"-Zugang lebt im Footer neben den
Legal-Links (javascript:Cookiebot.renew()). Das Bubble ist damit redundant. */
#CookiebotWidget { display: none !important; }
/* --- 2. Typografie: gesamte Dialog-Familie auf Unfold Sans ------------------ */
#CybotCookiebotDialog,
#CybotCookiebotDialog * {
font-family: 'Unfold Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}
/* --- 3. Dialog-Container: kompakter, Radius, Schatten, Overlay -------------- */
#CybotCookiebotDialog {
max-width: 700px !important; /* vorher Cookiebot-Default 900px */
border-radius: 16px !important;
border: none !important;
box-shadow: 0 12px 48px rgba(13,32,69,0.18) !important;
overflow: hidden !important;
}
#CybotCookiebotDialogBodyUnderlay { background: rgba(6,16,35,0.55) !important; }
/* Innenabstände + Fließtext verkleinern. Kein Höhen-Cap auf dem Intro-Text →
der Text passt komplett hinein, kein Scrollbalken (Fenster wächst dafür).
Header etwas flacher. */
#CybotCookiebotDialogHeader { padding-top: 5px !important; padding-bottom: 5px !important; }
#CybotCookiebotDialogBodyContent { padding: 0.6rem 1.1rem !important; }
#CybotCookiebotDialogBodyContentText { font-size: 0.82rem !important; }
/* --- 3b. Tab-Zeile (Zustimmung/Details/Über Cookies): flach + Text mittig ----
Der 3px-Aktiv-Unterstrich schob den Text nach oben → auf allen Tabs einen
transparenten 3px-Rand + oben 3px mehr Padding, damit der Text vertikal
zentriert sitzt (Aktiv-Farbe kommt aus Abschnitt 5). */
#CybotCookiebotDialogNav { font-size: 0.85rem !important; }
.CybotCookiebotDialogNavItemLink {
border-bottom: 3px solid transparent !important;
padding-top: 6px !important;
padding-bottom: 3px !important;
}
/* --- 3c. Kategorie-Kästen + Toggles (Notwendig/Präferenzen/…) ----------------
Label + Toggle gleichmäßig über die Zeilenhöhe verteilt (s. u.). Toggle mit
echten Maßen statt scale() (das verzerrte die Regler): schmaler Track, Track-
Höhe = Knopf-Durchmesser → weißer Kreis sitzt bündig, füllt die Höhe. */
.CybotCookiebotDialogBodyLevelButtonDescription { font-size: 12.5px !important; }
/* Label + Toggle gleichmäßig über die Zeilenhöhe verteilen (space-evenly):
feste Mindesthöhe + Padding 0 gibt den Freiraum, der gleichmäßig oben/Mitte/
unten verteilt wird. Toggle-Container auf Reglerhöhe schrumpfen, sonst frisst
er den Platz. */
.CybotCookiebotDialogBodyLevelButtonWrapper {
justify-content: space-evenly !important;
padding: 0 15px !important;
min-height: 45px !important;
}
.CybotCookiebotDialogBodyLevelButtonWrapper > *:first-child {
margin: 0 !important;
line-height: 1.05 !important;
}
.CybotCookiebotDialogBodyLevelButtonWrapper > *:last-child {
height: 16px !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
}
/* Track: schmal + flach, Höhe = Knopf-Höhe (bündig). Größe GLOBAL (gilt auch für
die Toggles im Details-Tab → einheitlicher Look). */
.CybotCookiebotDialogBodyLevelButtonSlider {
width: 29px !important;
height: 16px !important;
border-radius: 8px !important;
}
/* Horizontale Zentrierung NUR im Zustimmungs-Tab (Kategorie-Wrapper). Der Track
ist position:absolute im 57px-SliderWrapper (bei left:0 säße er links) → left:50%
+ halbe negative Track-Breite zentriert ihn. Die Details-Tab-Toggles liegen NICHT
in diesem Wrapper und behalten so ihre native rechtsbündige Position. */
.CybotCookiebotDialogBodyLevelButtonWrapper .CybotCookiebotDialogBodyLevelButtonSlider {
left: 50% !important;
margin-left: -14.5px !important;
}
/* Knopf: füllt die Track-Höhe, links bündig (aus-Zustand) */
.CybotCookiebotDialogBodyLevelButtonSlider::before {
width: 16px !important;
height: 16px !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
transform: translateX(0) !important;
}
/* an-Zustand: Knopf an den rechten Rand (Track 29 − Knopf 16 = 13) */
input.CybotCookiebotDialogBodyLevelButton:checked + .CybotCookiebotDialogBodyLevelButtonSlider::before {
transform: translateX(13px) !important;
}
/* --- 3d. Tabs „Details" + „Über Cookies" an „Zustimmung" angleichen ----------
Ohne Angleichung springt das Fenster je Tab stark (Zustimmung ~420px, Details
~670px, Über Cookies ~630px). Die gemeinsame Scroll-Region wird gedeckelt →
alle Tabs haben ~dieselbe Fensterhöhe und scrollen intern bei Bedarf. Der
Über-Cookies-Fließtext bekommt denselben kompakten Font + engere Absätze. */
.CybotCookiebotScrollContainer { max-height: 300px !important; overflow-y: auto !important; }
/* Über-Cookies-Fließtext an Zustimmung angleichen: gleicher Kompakt-Font, und die
großen Absatzlücken verkleinern. Die Absätze sind mit
getrennt; auf
greift nur `display` (Höhe/line-height werden ignoriert) → den ZWEITEN
jedes
Paares ausblenden macht aus der Leerzeile eine normale Zeile. Text-Zeilenhöhe (24px)
bleibt damit identisch zu Zustimmung, nur der Absatzabstand schrumpft. */
#CybotCookiebotDialogDetailBodyContentTextAbout { font-size: 0.82rem !important; }
#CybotCookiebotDialogDetailBodyContentTextAbout br + br { display: none !important; }
/* Details-Kategorien: Titel + Beschreibung auf denselben Kompakt-Font wie Zustimmung. */
#CybotCookiebotDialogDetailBodyContent .CookieCard { font-size: 0.82rem !important; }
/* --- 4. Überschriften auf Navy --------------------------------------------- */
#CybotCookiebotDialogBodyContentTitle,
#CybotCookiebotDialogDetailBodyContentTextOverview h3,
.CybotCookiebotDialogDetailBodyContentCookieContainerTypeDetails {
color: #0d2045 !important;
}
/* --- 5. Tabs (Zustimmung / Details / Über Cookies) ------------------------- */
.CybotCookiebotDialogNavItemLink { color: #6b7280 !important; }
.CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
color: #2051ad !important;
border-bottom-color: #2051ad !important;
}
/* --- 6. Kategorie-Toggles: aktiv = Brand-Blau ------------------------------ */
.CybotCookiebotDialogBodyLevelButtonSlider { background-color: #cbd5e1 !important; }
input.CybotCookiebotDialogBodyLevelButton:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
background-color: #2051ad !important;
}
/* --- 7. Links im Dialog ---------------------------------------------------- */
#CybotCookiebotDialog a { color: #2051ad !important; }
/* --- 8. Buttons: gemeinsame Form ------------------------------------------- */
.CybotCookiebotDialogBodyButton {
border-radius: 10px !important;
font-weight: 600 !important;
padding: 0.5rem 1.15rem !important; /* kompakter (vorher 0.8rem 1.6rem) */
font-size: 0.85rem !important;
letter-spacing: .01em !important;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
/* Primär — „Alle zulassen" (Navy-Gradient wie .btn-primary der Landingpage) */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
background: linear-gradient(135deg,#2051ad 0%,#133168 100%) !important;
border: 1px solid #133168 !important;
color: #fff !important;
box-shadow: 0 4px 20px rgba(19,49,104,0.30) !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 30px rgba(19,49,104,0.40) !important;
}
/* Sekundär — „Ablehnen" / „Auswahl erlauben" / „Anpassen"
Bewusst GLEICH GROSS wie der Primär-Button (Outline, 2px, gut sichtbar) —
Ablehnen darf nicht schwerer zu klicken sein als Zustimmen (DSGVO-Fairness,
EDSA/DSK-Leitlinien; kein Dark-Pattern). Siehe README, Settings-Empfehlung B. */
#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyLevelButtonCustomize {
background: #ffffff !important;
border: 2px solid #2051ad !important;
color: #2051ad !important;
box-shadow: none !important;
}
#CybotCookiebotDialogBodyButtonDecline:hover,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
#CybotCookiebotDialogBodyLevelButtonCustomize:hover {
background: #e2e8f6 !important;
transform: translateY(-2px) !important;
}
/* ============================================================================
VARIANTE B — EVAG-Layout (Referenz: evag-erfurt.de), Furnify3D-Farben.
----------------------------------------------------------------------------
Baut auf Variante A auf (alle Basis-Stylings oben gelten weiter) und aendert
nur den ERSTEN Screen zum EVAG-Stil: KEINE Tabs, KEINE Kategorie-Toggles auf
dem ersten Screen, 3 GLEICH GROSSE Buttons in einer Reihe (Anpassen ·
Ablehnen · Annehmen); "Annehmen" als Gradient-Primaerbutton hervorgehoben,
die anderen beiden als Outline. "Anpassen" oeffnet den Einstellungen-
Screen (Kategorien mit Toggles, wie in A gestylt) — der Reject/Accept-Zugang
bleibt also granular erreichbar.
REINES CSS — KEINE Cookiebot-Admin-Aenderung noetig (A<->B = nur Datei-Tausch).
============================================================================ */
/* Tabs ausblenden (EVAG hat keine) */
#CybotCookiebotDialogNav { display: none !important; }
/* Kategorie-Toggle-Pane auf dem ersten Screen ausblenden (liegt hinter "Anpassen") */
#CybotCookiebotDialogBodyLevelButtonsSelectPane { display: none !important; }
/* Intro-Text ohne Hoehen-Cap: kein Scrollbalken auf dem ersten Screen */
#CybotCookiebotDialogBodyContentText { max-height: none !important; overflow: visible !important; }
/* Die drei EVAG-Buttons einblenden, "Auswahl erlauben" ausblenden */
#CybotCookiebotDialogBodyButtonDecline { display: inline-block !important; }
#CybotCookiebotDialogBodyLevelButtonCustomize { display: inline-block !important; }
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { display: none !important; }
/* Button-Reihe: alle gleich breit */
#CybotCookiebotDialogBodyButtonsWrapper { display: flex !important; gap: 10px !important; width: 100% !important; }
.CybotCookiebotDialogBodyButton {
flex: 1 1 0 !important; min-width: 0 !important;
border-radius: 4px !important; font-weight: 600 !important; font-size: 0.85rem !important;
padding: 0.7rem 0.4rem !important; box-shadow: none !important; margin: 0 !important;
letter-spacing: .01em !important;
}
/* Button-Farben (geaendert 2026-07-20, NG): "Annehmen" hervorgehoben.
Es gilt der A-Basis-Stil von oben: "Annehmen" = Navy-Gradient-Primaerbutton
mit Schatten (wie .btn-primary der Landingpage), "Anpassen"/"Ablehnen" =
weisse Outline-Buttons (2px Brand-Blau). Bewusst NUR farbliche Hierarchie:
alle drei bleiben GLEICH GROSS und auf derselben Ebene — Ablehnen darf nicht
schwerer erreichbar sein als Zustimmen (DSGVO-Fairness, EDSA/DSK; README §B).
Vorher waren alle drei flach navy gefuellt (EVAG-Look); dieser Override-Block
ist dafuer entfallen. Der Schatten des Primaerbuttons gewinnt gegen das
box-shadow:none der Klassen-Regel oben (ID-Spezifitaet). */
/* Reihenfolge wie EVAG: Anpassen (Einstellungen) · Ablehnen · Alle zulassen */
#CybotCookiebotDialogBodyLevelButtonCustomize { order: 1 !important; }
#CybotCookiebotDialogBodyButtonDecline { order: 2 !important; }
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { order: 3 !important; }
/* Header-Logos: Furnify-Logo (oben links) entfernen, Cookiebot-Logo (oben rechts)
auf 75% verkleinern. Hinweis: das linke Logo traegt in Cookiebot die id
...PoweredbyImage (dort liegt unser hochgeladenes Logo), das rechte
"Cookiebot by Usercentrics" ist das