/* ==========================================================================
   Borlabs Cookie 3 im ViPo-Design

   Borlabs steuert den Dialog über eigene CSS-Variablen auf :root. Die werden
   hier überschrieben — das ist stabiler als einzelne Regeln zu überbieten.
   Darunter stehen nur noch die Anpassungen, für die es keine Variable gibt.
   ========================================================================== */

:root {
  /* Grundlage */
  --dialog-font-family: var(--f-sans);
  --dialog-font-size: 14.5px;
  --dialog-text-color: var(--c-body);
  --dialog-background-color: var(--c-bg);
  --dialog-backdrop-background-color: #17181A;
  --dialog-backdrop-background-opacity: 0.55;
  --dialog-border-radius-top-left: var(--radius);
  --dialog-border-radius-top-right: var(--radius);
  --dialog-border-radius-bottom-left: var(--radius);
  --dialog-border-radius-bottom-right: var(--radius);
  --dialog-footer-text-color: var(--c-muted-2);

  /* Schaltflächen: alle gleich. Keine Zustimmung wird hervorgehoben. */
  --dialog-button-border-radius-top-left: var(--radius);
  --dialog-button-border-radius-top-right: var(--radius);
  --dialog-button-border-radius-bottom-left: var(--radius);
  --dialog-button-border-radius-bottom-right: var(--radius);
  --dialog-button-accept-all-color: var(--c-bg);
  --dialog-button-accept-all-color-hover: var(--c-bg);
  --dialog-button-accept-all-text-color: var(--c-ink);
  --dialog-button-accept-all-text-color-hover: var(--c-ink);
  --dialog-button-accept-only-essential-color: var(--c-bg);
  --dialog-button-accept-only-essential-color-hover: var(--c-bg);
  --dialog-button-accept-only-essential-text-color: var(--c-ink);
  --dialog-button-accept-only-essential-text-color-hover: var(--c-ink);
  --dialog-button-preferences-color: var(--c-bg);
  --dialog-button-preferences-color-hover: var(--c-bg);
  --dialog-button-preferences-text-color: var(--c-ink);
  --dialog-button-preferences-text-color-hover: var(--c-ink);
  --dialog-button-save-consent-color: var(--c-bg);
  --dialog-button-save-consent-color-hover: var(--c-bg);
  --dialog-button-save-consent-text-color: var(--c-ink);
  --dialog-button-save-consent-text-color-hover: var(--c-ink);
  --dialog-button-selection-text-color: var(--c-muted);
  --dialog-button-selection-text-color-hover: var(--c-red-link);
  --dialog-button-close-text-color: var(--c-muted);
  --dialog-button-close-text-color-hover: var(--c-ink);

  /* Reiter: Textzeile mit rotem Strich, keine Fläche, kein Kasten */
  --dialog-tab-bar-tab-background-color-active: transparent;
  --dialog-tab-bar-tab-background-color-inactive: transparent;
  --dialog-tab-bar-tab-text-color-active: var(--c-ink);
  --dialog-tab-bar-tab-text-color-inactive: var(--c-muted);
  --dialog-tab-bar-tab-border-color-bottom-active: var(--c-red);
  --dialog-tab-bar-tab-border-color-bottom-inactive: var(--c-line);
  --dialog-tab-bar-tab-border-color-top-active: transparent;
  --dialog-tab-bar-tab-border-color-top-inactive: transparent;
  --dialog-tab-bar-tab-border-color-left-active: transparent;
  --dialog-tab-bar-tab-border-color-left-inactive: transparent;
  --dialog-tab-bar-tab-border-color-right-active: transparent;
  --dialog-tab-bar-tab-border-color-right-inactive: transparent;
  --dialog-tab-bar-tab-border-radius-top-left-active: 0px;
  --dialog-tab-bar-tab-border-radius-top-right-active: 0px;
  --dialog-tab-bar-tab-border-radius-top-left-inactive: 0px;
  --dialog-tab-bar-tab-border-radius-top-right-inactive: 0px;

  /* Karten: weiss mit feiner Linie statt grauer Fläche */
  --dialog-card-background-color: var(--c-bg);
  --dialog-card-text-color: var(--c-ink);
  --dialog-card-separator-color: var(--c-line);
  --dialog-card-control-element-color: var(--c-ink);
  --dialog-card-control-element-color-hover: var(--c-red-link);
  --dialog-card-border-radius-top-left: var(--radius);
  --dialog-card-border-radius-top-right: var(--radius);
  --dialog-card-border-radius-bottom-left: var(--radius);
  --dialog-card-border-radius-bottom-right: var(--radius);

  /* Listen und Tabellen */
  --dialog-list-item-background-color-even: var(--c-bg);
  --dialog-list-item-background-color-odd: var(--c-bg);
  --dialog-list-item-text-color-even: var(--c-ink);
  --dialog-list-item-text-color-odd: var(--c-ink);
  --dialog-list-item-separator-color: var(--c-line);
  --dialog-list-item-control-element-color: var(--c-ink);
  --dialog-list-item-control-element-color-hover: var(--c-red-link);
  --dialog-list-item-control-element-separator-color: var(--c-line);
  --dialog-table-row-background-color-even: var(--c-bg);
  --dialog-table-row-background-color-odd: var(--c-bg);
  --dialog-table-row-border-color: var(--c-line);
  --dialog-table-row-text-color-even: var(--c-ink);
  --dialog-table-row-text-color-odd: var(--c-ink);

  /* Kästchen und Schalter */
  --dialog-checkbox-border-color-inactive: var(--c-line-2);
  --dialog-checkbox-border-color-active: var(--c-red);
  --dialog-checkbox-border-color-disabled: var(--c-line);
  --dialog-switch-button-background-color-active: var(--c-red);
  --dialog-switch-button-background-color-inactive: var(--c-line);
  --dialog-switch-button-color-active: #ffffff;
  --dialog-switch-button-color-inactive: var(--c-ink);

  /* Suchfeld */
  --dialog-search-bar-input-background-color: var(--c-bg);
  --dialog-search-bar-input-border-color-default: var(--c-line-2);
  --dialog-search-bar-input-border-color-focus: var(--c-ink);
  --dialog-search-bar-input-text-color: var(--c-ink);
  --dialog-search-bar-input-border-radius-top-left: var(--radius);
  --dialog-search-bar-input-border-radius-top-right: var(--radius);
  --dialog-search-bar-input-border-radius-bottom-left: var(--radius);
  --dialog-search-bar-input-border-radius-bottom-right: var(--radius);
}


/* ── Was keine Variable abdeckt ───────────────────────────────────────── */

/* Rahmen um alle Schaltflächen. Borlabs kennt dafür keine Variable, nur
   Füllung und Textfarbe. Alle Schaltflächen sehen gleich aus. */
#BorlabsCookieBox .brlbs-cmpnt-btn,
.brlbs-cmpnt-container .brlbs-cmpnt-btn {
  background: var(--c-bg) !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line-2) !important;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14.5px;
  padding: 13px 20px;
}

#BorlabsCookieBox .brlbs-cmpnt-btn:hover,
.brlbs-cmpnt-container .brlbs-cmpnt-btn:hover {
  background: var(--c-bg) !important;
  color: var(--c-ink) !important;
  border-color: var(--c-ink) !important;
}

/* Alle abwählen bleibt ein Link */
#BorlabsCookieBox .brlbs-cmpnt-btn-selection,
.brlbs-cmpnt-container .brlbs-cmpnt-btn-selection {
  border: 0; padding: 0; font-weight: 500; font-size: 13.5px;
}

/* Borlabs-Logo aus. Ein eigenes Logo lässt sich im Plugin hinterlegen. */
#BorlabsCookieBox .brlbs-dialog-logo,
.brlbs-cmpnt-container .brlbs-dialog-logo,
#BorlabsCookieBox .cookie-logo,
.brlbs-cmpnt-container .cookie-logo {
  display: none;
}

/* Titel in der Überschriftenschrift, linksbündig */
#BorlabsCookieBox .brlbs-cmpnt-dialog-entrance-headline,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-entrance-headline,
#BorlabsCookieBox h2.brlbs-cmpnt-h2,
.brlbs-cmpnt-container h2.brlbs-cmpnt-h2 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.2;
  color: var(--c-ink);
  text-align: left;
}

#BorlabsCookieBox .brlbs-cmpnt-dialog-box-header,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-header,
#BorlabsCookieBox .brlbs-cmpnt-dialog-details-header,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-details-header {
  justify-content: flex-start; text-align: left; gap: 8px 20px;
}

#BorlabsCookieBox .brlbs-cmpnt-dialog-details-header > div,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-details-header > div {
  flex: 0 1 auto; width: auto; max-width: none; text-align: left; justify-content: flex-start;
}

/* Fliesstext einheitlich. Borlabs setzt ihn aus mehreren Komponenten
   zusammen, die sonst in drei Grössen und zwei Grautönen erscheinen. */
#BorlabsCookieBox .brlbs-cmpnt-dialog-box-description,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-description,
#BorlabsCookieBox .brlbs-cmpnt-dialog-box-description p,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-description p,
#BorlabsCookieBox .brlbs-cmpnt-dialog-box-description span,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-description span,
#BorlabsCookieBox .brlbs-cmpnt-dialog-details-description,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-details-description,
#BorlabsCookieBox .brlbs-cmpnt-dialog-details-description p,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-details-description p,
#BorlabsCookieBox .brlbs-cmpnt-text-description,
.brlbs-cmpnt-container .brlbs-cmpnt-text-description,
#BorlabsCookieBox .brlbs-cmpnt-text-technology,
.brlbs-cmpnt-container .brlbs-cmpnt-text-technology,
#BorlabsCookieBox .brlbs-cmpnt-text-revoke,
.brlbs-cmpnt-container .brlbs-cmpnt-text-revoke,
#BorlabsCookieBox .brlbs-cmpnt-text-no-obligation,
.brlbs-cmpnt-container .brlbs-cmpnt-text-no-obligation,
#BorlabsCookieBox .brlbs-cmpnt-text-personal-data,
.brlbs-cmpnt-container .brlbs-cmpnt-text-personal-data,
#BorlabsCookieBox .brlbs-cmpnt-text-individual-settings,
.brlbs-cmpnt-container .brlbs-cmpnt-text-individual-settings,
#BorlabsCookieBox .brlbs-cmpnt-text-more-information,
.brlbs-cmpnt-container .brlbs-cmpnt-text-more-information,
#BorlabsCookieBox .brlbs-cmpnt-text-confirm-age,
.brlbs-cmpnt-container .brlbs-cmpnt-text-confirm-age,
#BorlabsCookieBox .brlbs-cmpnt-non-eu-data-transfer,
.brlbs-cmpnt-container .brlbs-cmpnt-non-eu-data-transfer {
  font-size: 14.5px; line-height: 1.65; color: var(--c-muted);
}

#BorlabsCookieBox .brlbs-cmpnt-dialog-box-description > * + *,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-description > * + * {
  margin-top: 12px;
}

/* Links */
#BorlabsCookieBox .brlbs-cmpnt-link,
.brlbs-cmpnt-container .brlbs-cmpnt-link,
#BorlabsCookieBox .brlbs-cmpnt-privacy-link,
.brlbs-cmpnt-container .brlbs-cmpnt-privacy-link,
#BorlabsCookieBox .brlbs-cmpnt-imprint-link,
.brlbs-cmpnt-container .brlbs-cmpnt-imprint-link,
#BorlabsCookieBox .brlbs-cmpnt-preferences-link,
.brlbs-cmpnt-container .brlbs-cmpnt-preferences-link {
  color: var(--c-muted); border-bottom: 1px solid var(--c-line-2); text-decoration: none;
}

#BorlabsCookieBox .brlbs-cmpnt-link:hover,
.brlbs-cmpnt-container .brlbs-cmpnt-link:hover,
#BorlabsCookieBox .brlbs-cmpnt-privacy-link:hover,
.brlbs-cmpnt-container .brlbs-cmpnt-privacy-link:hover,
#BorlabsCookieBox .brlbs-cmpnt-imprint-link:hover,
.brlbs-cmpnt-container .brlbs-cmpnt-imprint-link:hover,
#BorlabsCookieBox .brlbs-cmpnt-preferences-link:hover,
.brlbs-cmpnt-container .brlbs-cmpnt-preferences-link:hover {
  color: var(--c-red-link); border-bottom-color: var(--c-red);
}

/* Auswahlzeile im Einstiegsdialog */
#BorlabsCookieBox .brlbs-cmpnt-dialog-box .brlbs-cmpnt-consent-list,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box .brlbs-cmpnt-consent-list {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  gap: 20px;
  padding: 14px 0;
  margin: 20px 0;
}

#BorlabsCookieBox .brlbs-cmpnt-consent-list-item-dot,
.brlbs-cmpnt-container .brlbs-cmpnt-consent-list-item-dot {
  background: var(--c-red);
}

/* Fusszeile */
#BorlabsCookieBox .brlbs-cmpnt-dialog-footer,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-footer {
  justify-content: flex-start;
  gap: 16px;
  border-top: 1px solid var(--c-line);
  margin-top: 22px;
  padding-top: 14px;
  font-size: 12.5px;
}

/* Reiter: Textzeile mit Abstand, nicht auf gleiche Breite gedehnt */
#BorlabsCookieBox .brlbs-cmpnt-tab,
.brlbs-cmpnt-container .brlbs-cmpnt-tab {
  flex: 0 0 auto;
  padding: 10px 0;
  margin-right: 28px;
  font-family: var(--f-sans);
  font-size: 14.5px;
  text-align: left;
}

#BorlabsCookieBox .brlbs-cmpnt-tab:last-child,
.brlbs-cmpnt-container .brlbs-cmpnt-tab:last-child {
  margin-right: 0;
}

#BorlabsCookieBox .brlbs-cmpnt-tab-bar,
.brlbs-cmpnt-container .brlbs-cmpnt-tab-bar {
  flex-wrap: wrap; border-bottom: 1px solid var(--c-line); margin-bottom: 20px;
}

/* Karten: Rahmen statt Fläche, Aufklapp-Link darf umbrechen */
#BorlabsCookieBox .brlbs-cmpnt-card,
.brlbs-cmpnt-container .brlbs-cmpnt-card,
#BorlabsCookieBox .brlbs-cmpnt-card fieldset,
.brlbs-cmpnt-container .brlbs-cmpnt-card fieldset {
  border: 1px solid var(--c-line); box-shadow: none;
}

#BorlabsCookieBox .brlbs-cmpnt-card + .brlbs-cmpnt-card,
.brlbs-cmpnt-container .brlbs-cmpnt-card + .brlbs-cmpnt-card {
  margin-top: 12px;
}

#BorlabsCookieBox .brlbs-cmpnt-card .brlbs-cmpnt-accordion-toggle,
.brlbs-cmpnt-container .brlbs-cmpnt-card .brlbs-cmpnt-accordion-toggle {
  white-space: normal; text-align: right; font-size: 13.5px; font-weight: 500;
}

#BorlabsCookieBox .brlbs-cmpnt-card-group-form-control,
.brlbs-cmpnt-container .brlbs-cmpnt-card-group-form-control {
  min-width: 0;
}

#BorlabsCookieBox .brlbs-cmpnt-card-expanded-section,
.brlbs-cmpnt-container .brlbs-cmpnt-card-expanded-section,
#BorlabsCookieBox .brlbs-cmpnt-accordion-expanded-section,
.brlbs-cmpnt-container .brlbs-cmpnt-accordion-expanded-section {
  border-top: 1px solid var(--c-line); margin-top: 14px; padding-top: 14px;
}

/* Tastaturfokus wie auf der Website */
#BorlabsCookieBox :focus-visible,
.brlbs-cmpnt-container :focus-visible {
  outline: 2px solid var(--c-red); outline-offset: 3px;
}

#BorlabsCookieBox .brlbs-cmpnt-tab:focus-visible,
.brlbs-cmpnt-container .brlbs-cmpnt-tab:focus-visible {
  outline-offset: -2px;
}

/* ── Handy ────────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  #BorlabsCookieBox .brlbs-cmpnt-tab,
  .brlbs-cmpnt-container .brlbs-cmpnt-tab { margin-right: 18px; font-size: 14px; }
  #BorlabsCookieBox .brlbs-cmpnt-btn,
  .brlbs-cmpnt-container .brlbs-cmpnt-btn { width: 100%; }
}