/*
 * Complianz banner in the template's consent card (fc.css .consent): card bottom left, the template's tokens
 * (light/dark follow automatically), "Nur notwendige" + "Alle akzeptieren" side by side, "Einstellungen anpassen"
 * as a text link, the cookie-policy link inside the message. Complianz loads its own CSS later at runtime,
 * so every rule starts at #cmplz-cookiebanner-container to win on specificity.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  --cmplz_banner_background_color: var(--surface);
  --cmplz_text_color: var(--text-2);
  --cmplz_hyperlink_color: var(--link);
  --cmplz_text_font_size: var(--fs-sm);
  --cmplz_link_font_size: var(--fs-sm);
  --cmplz_category_body_font_size: var(--fs-sm);
  --cmplz_category_header_always_active_color: var(--muted);
  --cmplz_slider_active_color: var(--text);
  --cmplz_banner_width: min(calc(100vw - 2rem), 30rem);
  left: var(--s-4); right: auto; top: auto; bottom: var(--s-4); transform: none; margin: 0;
  width: min(calc(100% - 2rem), 30rem); max-width: none; max-height: calc(100vh - 2rem);
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  background: var(--surface); color: var(--text); font-family: var(--font-body); line-height: var(--lh-body);
  grid-gap: 0; z-index: 120;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-information,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-manage-options { display: none; }

/* heading + text */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { display: block; margin: 0 0 var(--s-2); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  display: block; justify-self: start; margin: 0; text-align: left; color: var(--text);
  font: 600 1.3rem/var(--lh-tight) var(--font-display); letter-spacing: -.02em; font-variation-settings: "opsz" 32;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { min-width: 0; max-height: none; overflow: visible; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { margin: 0 0 var(--s-4); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body); text-align: left; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a { color: var(--link); text-decoration: underline; text-underline-offset: .18em; }

/* preferences (the template's .consent__prefs) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories { margin: 0 0 var(--s-4); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category { background: none; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-category-header { padding: var(--s-2) 0; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title { color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description { padding: 0 0 var(--s-2); color: var(--text-2); font-size: var(--fs-xs); }
#cmplz-cookiebanner-container .cmplz-cookiebanner input.cmplz-consent-checkbox { accent-color: var(--text); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle { color: var(--text-2); }
/* the whole row opens the description (Complianz only reacts to its arrow button): the button's hit area covers the row,
   the checkbox stays above it and still only switches the category */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-header { position: relative; cursor: pointer; min-height: 44px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle::after { content: ""; position: absolute; inset: 0; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox { position: relative; z-index: 1; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle svg { transition: transform var(--dur) var(--ease); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* buttons: the template's .btn--sm (primary / ghost) and a text link */
/* a wrapping row like the template's .cluster (Complianz switches to a column on phones) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--s-3); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  flex: 1 1 auto; width: auto; height: auto; min-width: 0; min-height: 40px; margin: 0; padding: .5rem 1rem;
  border: 1.5px solid var(--text); border-radius: var(--r-pill); background: var(--text); color: var(--bg);
  font: 600 var(--fs-sm)/1.1 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { filter: brightness(1.08); text-decoration: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:active { transform: translateY(1px); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences { order: 1; background: transparent; color: var(--text); border-color: var(--line-strong); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences:hover { border-color: var(--text); filter: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-accept { order: 2; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences {
  order: 3; flex: 0 0 100%; justify-content: flex-start; min-height: 0; padding: 0; /* the template's .text-link */
  border: 0; border-radius: 0; background: none; color: var(--text); font-weight: 400; line-height: var(--lh-body); text-align: left;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .25em;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences:hover { filter: none; color: var(--accent-ink); }
/* phones: a full-width sheet from the bottom edge, like the date picker and the contact dialogs (and Complianz on the live site) */
@media (max-width: 40rem) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    --cmplz_banner_width: 100%;
    left: 0; right: 0; bottom: 0; width: 100%; max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-5) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -10px 40px rgb(20 17 14 / .18);
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { animation: cmplz-up .32s var(--ease); }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 44px; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences { min-height: 0; padding: var(--s-1) 0; }
}
/* very small phones: one button per row, "Alle akzeptieren" first */
@media (max-width: 22.5rem) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex-basis: 100%; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-accept { order: 0; }
}
@keyframes cmplz-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { transition: none; } #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { animation: none; } }
@media print { #cmplz-cookiebanner-container { display: none !important; } }
