/*
 * Cookie-Banner (Plugin Complianz) im Design der Website.
 * Complianz erzeugt sein Stylesheet aus den Banner-Einstellungen im Backend (uploads/complianz/css/banner-*.css) und
 * setzt die Farben als CSS-Variablen auf :root. Hier werden diese Variablen mit höherer Spezifität überschrieben,
 * damit die Farben aus tokens.css gelten, auch wenn im Backend wieder Standardwerte stehen. Texte, Reihenfolge und
 * Schaltflächen stellt weiter das Plugin ein.
 */

body #cmplz-cookiebanner-container .cmplz-cookiebanner,
body #cmplz-manage-consent .cmplz-manage-consent {
    --cmplz_banner_background_color: var(--card);
    --cmplz_banner_border_color: var(--line);
    --cmplz_banner_border_width: 1px;
    --cmplz_banner_border_radius: var(--radius-panel);
    --cmplz_text_color: var(--white);
    --cmplz_hyperlink_color: var(--lime);
    --cmplz_button_accept_background_color: var(--lime);
    --cmplz_button_accept_border_color: var(--lime);
    --cmplz_button_accept_text_color: var(--ink);
    --cmplz_button_deny_background_color: var(--field);
    --cmplz_button_deny_border_color: var(--line);
    --cmplz_button_deny_text_color: var(--white);
    --cmplz_button_settings_background_color: var(--field);
    --cmplz_button_settings_border_color: var(--line);
    --cmplz_button_settings_text_color: var(--white);
    --cmplz_button_border_radius: var(--radius-pill);
    --cmplz_category_header_always_active_color: var(--lime);
    --cmplz_slider_active_color: var(--lime);
    --cmplz_slider_inactive_color: var(--line);
    --cmplz_slider_bullet_color: var(--white);
    --cmplz_text_font_size: 14px;
    --cmplz_link_font_size: 13px;
    --cmplz_category_body_font_size: 13px;
    --cmplz_category_header_title_font_size: 15px;
    --cmplz_category_header_active_font_size: 13px;
    --cmplz_title_font_size: 16px;
    --cmplz_button_font_size: 15px;
    font-family: var(--font-sans);
    color-scheme: dark;
}

body #cmplz-cookiebanner-container .cmplz-cookiebanner {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
    background-color: var(--divider);
    height: 1px;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
    color: var(--text-secondary);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
    background-color: var(--field);
    border-radius: var(--radius-sm);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
    color: var(--text-secondary);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
    color: var(--text-secondary);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible {
    color: var(--white);
}

/* Schaltflächen: Zustimmen in Limette wie die Haupt-Buttons der Website, die anderen als Umriss-Variante */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: filter 0.2s, border-color 0.2s;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
    background-color: var(--lime-hover);
    border-color: var(--lime-hover);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
    background-color: var(--hover);
    border-color: var(--text-secondary);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle:focus-visible,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

/* Schalter: aktiv in Limette, der Knopf bleibt weiß */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
    background-color: var(--lime);
}

/* Handy: das Banner liegt am unteren Rand, nur die oberen Ecken sind rund */
@media (max-width: 768px) {
    body #cmplz-cookiebanner-container .cmplz-cookiebanner {
        border-radius: var(--radius-panel) var(--radius-panel) 0 0;
        border-width: 1px 0 0;
    }
}