/* ============================================================
   COMPLIANZ-BANNER im Theme-Look

   Complianz generiert sein Banner-CSS selbst nach
   wp-content/uploads/complianz/css/banner-1-optin.css und laedt es NACH
   den Theme-Stylesheets. Deshalb zwei Dinge:

   1. Die Variablen stehen auf `html:root`, nicht auf `:root`. Gleiche
      Spezifitaet wuerde bei spaeterer Quelle verlieren, `html:root` gewinnt
      unabhaengig von der Ladereihenfolge.
   2. Regeln, die ueber Farbe hinausgehen (Schrift, Ausrichtung, Verlauf auf
      dem Zustimmen-Knopf), stehen mit verdoppeltem Selektor.

   Damit ueberlebt der Look sowohl ein Plugin-Update als auch das
   Neuschreiben der Banner-CSS durch Complianz.

   Rechtlicher Rahmen: Zustimmen und Ablehnen sind gleich gross, gleich
   geformt und gleich leicht zu treffen. Nur die Farbe unterscheidet sie.
   Wer daraus einen kleinen grauen Ablehnen-Link macht, baut ein Dark
   Pattern und kassiert dafuer zu Recht Aerger.
   ============================================================ */

html:root {
  /* Flaeche */
  --cmplz_banner_background_color: var(--panel);
  --cmplz_banner_border_color: var(--line-2);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 12px 12px 12px 12px;
  --cmplz_banner_width: 470px;

  /* Text */
  --cmplz_text_color: var(--ink-2);
  --cmplz_hyperlink_color: var(--ink-3);
  --cmplz_title_font_size: 17px;
  --cmplz_text_font_size: 13.5px;
  --cmplz_link_font_size: 12.5px;
  --cmplz_category_body_font_size: 13px;
  --cmplz_category_header_title_font_size: 13.5px;
  --cmplz_category_header_active_font_size: 11.5px;
  --cmplz_category_header_always_active_color: var(--ink-3);

  /* Knoepfe: Radius wie .btn in Welt B */
  --cmplz_button_border_radius: 7px 7px 7px 7px;
  --cmplz_button_font_size: 14.5px;
  --cmplz_button_accept_background_color: transparent;
  --cmplz_button_accept_border_color: transparent;
  --cmplz_button_accept_text_color: #04121a;
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: var(--line-2);
  --cmplz_button_deny_text_color: var(--ink);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--line);
  --cmplz_button_settings_text_color: var(--ink-2);

  /* Schalter */
  --cmplz_slider_active_color: var(--g2);
  --cmplz_slider_inactive_color: rgba(255, 255, 255, .22);
  --cmplz_slider_bullet_color: #fff;
}

/* ---- Flaeche und Rahmen ------------------------------------------------ */
.cmplz-cookiebanner.cmplz-cookiebanner {
  padding: 22px 24px 20px;
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, .75),
    0 0 0 1px var(--line) inset;
}

/* ---- Kopf: Titel nach links, der zentrierte Satz wirkte wie ein Dialog
        aus einer fremden Seite ---------------------------------------- */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header {
  grid-template-columns: 1fr auto;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title {
  grid-column-start: 1;
  justify-self: start;
  font-family: var(--head-font, 'Space Grotesk', sans-serif);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close {
  grid-column-start: 2;
  color: var(--ink-3);
  transition: color .18s;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close:hover {
  color: var(--ink);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-logo { display: none; }

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-divider {
  border-color: var(--line);
  background: var(--line);
}

/* ---- Fliesstext -------------------------------------------------------- */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message {
  font-family: 'Manrope', system-ui, sans-serif;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---- Knoepfe ----------------------------------------------------------- */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-family: var(--head-font, 'Space Grotesk', sans-serif);
  font-weight: 600;
  letter-spacing: -.01em;
  min-height: 46px;
  transition: transform .18s cubic-bezier(.3, .7, .4, 1), box-shadow .25s, background-color .2s;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover {
  transform: translateY(-1px);
}

/* Zustimmen traegt den Marken-Verlauf, das ist die einzige Verlaufsflaeche
   im Sichtfeld, solange das Banner offen ist. */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
  background: var(--grad);
  box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--g2) 70%, transparent);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
  background-color: var(--panel-2);
  border-color: var(--line-2);
}

/* Der laengste Knopf ("Einstellungen ansehen") sprengt sonst die Reihe. */
@media (min-width: 769px) {
  .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    padding-inline: 6px;
    font-size: 14px;
  }
}

/* ---- Kategorien und Schalter ------------------------------------------- */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title {
  font-family: var(--head-font, 'Space Grotesk', sans-serif);
  color: var(--ink);
  letter-spacing: -.01em;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
  color: var(--ink-3);
  line-height: 1.5;
}

/* ---- Rechtstext-Links -------------------------------------------------- */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links .cmplz-link {
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  transition: color .18s;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
  color: var(--g2);
}

/* ---- Der kleine Reiter unten rechts, wenn schon entschieden wurde ------ */
#cmplz-manage-consent .cmplz-manage-consent.cmplz-manage-consent {
  font-family: var(--head-font, 'Space Grotesk', sans-serif);
  font-size: 12.5px;
  color: var(--ink-2);
  background-color: var(--panel);
  border-color: var(--line-2);
}

#cmplz-manage-consent .cmplz-manage-consent.cmplz-manage-consent:hover {
  color: var(--ink);
}

/* ---- Tastatur-Fokus: sichtbar, aber im Marken-Ton statt Browser-Default -- */
.cmplz-cookiebanner.cmplz-cookiebanner :focus-visible {
  outline: 2px solid var(--g2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Handy: Complianz blendet den Titel unter 425px aus, damit steht der
        Kasten ohne Kopf da und sieht aus wie eine Fehlermeldung. ---------- */
@media (max-width: 425px) {
  .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title {
    display: block;
    font-size: 16px;
  }
}