/* ══ Borlabs Cookie im BRACE-Look ═══════════════════════════════════════════
   Banner, Präferenz-Dialog, Widget und Content Blocker von Borlabs Cookie 3. Geladen von
   inc/borlabs.php, nur wenn Borlabs sein CSS lädt.

   Borlabs schreibt seine Admin-Einstellungen als Variablen auf :root. Hier
   stehen sie mit html:root, das gewinnt unabhängig von der Ladereihenfolge;
   die Admin-Werte bleiben unberührt und gelten nur noch, wo dieses Theme
   nicht läuft. Was Variablen nicht abdecken (Schrift, Rahmen der Buttons,
   Überschrift, Logo), steht darunter mit "body #Borlabs…": Borlabs setzt
   seine Regeln mit "#BorlabsCookieBox .x" und "all: unset" und lädt einen
   Teil davon erst per JS nach, also später als diese Datei.

   Zustimmen und Ablehnen sehen gleich aus (Carbon, gefüllt). Präferenzen
   und Speichern laufen als Outline-Button wie .btn-out in base.css.
   ══════════════════════════════════════════════════════════════════════════ */

html:root {
  --brlbs-ink: var(--ink, #282A2D);
  --brlbs-paper: var(--paper, #FBFBFA);
  --brlbs-sand: var(--sand, #EAE7E1);
  --brlbs-copper: var(--copper, #AD5F45);
  --brlbs-grey-60: var(--grey-60, #7E7F81);
  --brlbs-grey-20: var(--grey-20, #D4D4D5);

  /* Rahmen */
  --dialog-font-family: "articulat-cf", Helvetica, Arial, sans-serif;
  --dialog-font-size: 15px;
  --dialog-background-color: var(--brlbs-paper);
  --dialog-text-color: var(--brlbs-ink);
  --dialog-backdrop-background-color: var(--brlbs-ink);
  --dialog-backdrop-background-opacity: .6;
  --dialog-separator-color: var(--brlbs-grey-20);
  --dialog-footer-background-color: var(--brlbs-sand);
  --dialog-footer-text-color: var(--brlbs-ink);
  --dialog-border-radius-top-left: 0;
  --dialog-border-radius-top-right: 0;
  --dialog-border-radius-bottom-left: 0;
  --dialog-border-radius-bottom-right: 0;

  /* Links und Bedienelemente (Schließen, "Informationen anzeigen", Zurück) */
  --dialog-link-primary-color: var(--brlbs-ink);
  --dialog-link-primary-color-hover: var(--brlbs-copper);
  --dialog-link-secondary-color: var(--brlbs-ink);
  --dialog-link-secondary-color-hover: var(--brlbs-copper);
  --dialog-control-element-color: var(--brlbs-ink);
  --dialog-control-element-color-hover: var(--brlbs-copper);
  --dialog-card-control-element-color: var(--brlbs-ink);
  --dialog-card-control-element-color-hover: var(--brlbs-copper);
  --dialog-list-item-control-element-color: var(--brlbs-ink);
  --dialog-list-item-control-element-color-hover: var(--brlbs-copper);
  --dialog-list-item-control-element-separator-color: var(--brlbs-grey-20);

  /* Buttons: Zustimmen und Ablehnen gleich gewichtet */
  --dialog-button-accept-all-color: var(--brlbs-ink);
  --dialog-button-accept-all-color-hover: var(--brlbs-copper);
  --dialog-button-accept-all-text-color: #fff;
  --dialog-button-accept-all-text-color-hover: #fff;
  --dialog-button-accept-only-essential-color: var(--brlbs-ink);
  --dialog-button-accept-only-essential-color-hover: var(--brlbs-copper);
  --dialog-button-accept-only-essential-text-color: #fff;
  --dialog-button-accept-only-essential-text-color-hover: #fff;
  --dialog-button-preferences-color: transparent;
  --dialog-button-preferences-color-hover: var(--brlbs-ink);
  --dialog-button-preferences-text-color: var(--brlbs-ink);
  --dialog-button-preferences-text-color-hover: #fff;
  --dialog-button-save-consent-color: transparent;
  --dialog-button-save-consent-color-hover: var(--brlbs-ink);
  --dialog-button-save-consent-text-color: var(--brlbs-ink);
  --dialog-button-save-consent-text-color-hover: #fff;
  --dialog-button-selection-color: transparent;
  --dialog-button-selection-color-hover: var(--brlbs-ink);
  --dialog-button-selection-text-color: var(--brlbs-ink);
  --dialog-button-selection-text-color-hover: #fff;
  --dialog-button-close-color: var(--brlbs-ink);
  --dialog-button-close-color-hover: var(--brlbs-copper);
  --dialog-button-close-text-color: #fff;
  --dialog-button-close-text-color-hover: #fff;
  --dialog-button-border-radius-top-left: 0;
  --dialog-button-border-radius-top-right: 0;
  --dialog-button-border-radius-bottom-left: 0;
  --dialog-button-border-radius-bottom-right: 0;

  /* Checkboxen und Schalter: aktiv in Kupfer */
  --dialog-checkbox-background-color-active: var(--brlbs-copper);
  --dialog-checkbox-border-color-active: var(--brlbs-copper);
  --dialog-checkbox-background-color-inactive: #fff;
  --dialog-checkbox-border-color-inactive: var(--brlbs-grey-60);
  --dialog-checkbox-background-color-disabled: var(--brlbs-grey-20);
  --dialog-checkbox-border-color-disabled: var(--brlbs-grey-20);
  --dialog-checkbox-check-mark-color-active: #fff;
  --dialog-checkbox-check-mark-color-disabled: var(--brlbs-ink);
  --dialog-checkbox-border-radius-top-left: 0;
  --dialog-checkbox-border-radius-top-right: 0;
  --dialog-checkbox-border-radius-bottom-left: 0;
  --dialog-checkbox-border-radius-bottom-right: 0;
  --dialog-switch-button-background-color-active: var(--brlbs-copper);
  --dialog-switch-button-background-color-inactive: var(--brlbs-grey-20);
  --dialog-switch-button-color-active: #fff;
  --dialog-switch-button-color-inactive: var(--brlbs-ink);

  /* Reiter: aktiver Reiter mit Kupferlinie statt Fläche */
  --dialog-tab-bar-tab-background-color-active: transparent;
  --dialog-tab-bar-tab-background-color-inactive: transparent;
  --dialog-tab-bar-tab-text-color-active: var(--brlbs-ink);
  --dialog-tab-bar-tab-text-color-inactive: var(--brlbs-grey-60);
  --dialog-tab-bar-tab-border-color-top-active: var(--brlbs-copper);
  --dialog-tab-bar-tab-border-color-right-active: var(--brlbs-copper);
  --dialog-tab-bar-tab-border-color-bottom-active: var(--brlbs-copper);
  --dialog-tab-bar-tab-border-color-left-active: var(--brlbs-copper);
  --dialog-tab-bar-tab-border-color-top-inactive: var(--brlbs-grey-20);
  --dialog-tab-bar-tab-border-color-right-inactive: var(--brlbs-grey-20);
  --dialog-tab-bar-tab-border-color-bottom-inactive: var(--brlbs-grey-20);
  --dialog-tab-bar-tab-border-color-left-inactive: var(--brlbs-grey-20);

  /* Karten (Service-Gruppen, Provider), Listen, Tabellen */
  --dialog-card-background-color: var(--brlbs-sand);
  --dialog-card-text-color: var(--brlbs-ink);
  --dialog-card-separator-color: var(--brlbs-grey-20);
  --dialog-list-item-background-color-even: #fff;
  --dialog-list-item-background-color-odd: #fff;
  --dialog-list-item-text-color-even: var(--brlbs-ink);
  --dialog-list-item-text-color-odd: var(--brlbs-ink);
  --dialog-list-item-separator-color: var(--brlbs-grey-20);
  --dialog-table-row-background-color-even: #fff;
  --dialog-table-row-background-color-odd: #fff;
  --dialog-table-row-border-color: var(--brlbs-grey-20);
  --dialog-table-row-text-color-even: var(--brlbs-ink);
  --dialog-table-row-text-color-odd: var(--brlbs-ink);
  --dialog-search-bar-input-border-color-default: var(--brlbs-grey-20);
  --dialog-search-bar-input-border-color-focus: var(--brlbs-ink);
  --dialog-search-bar-input-text-color: var(--brlbs-ink);

  /* Widget (Fingerabdruck unten links) */
  --widget-color: var(--brlbs-ink);

  /* Content Blocker: Platzhalter über blockierten Einbettungen (Karten,
     Videos), dieselbe Sprache wie der Dialog */
  --content-blocker-font-family: "articulat-cf", Helvetica, Arial, sans-serif;
  --content-blocker-font-size: 15px;
  --content-blocker-background: rgba(251, 251, 250, .92);
  --content-blocker-background-color: var(--brlbs-paper);
  --content-blocker-text-color: var(--brlbs-ink);
  --content-blocker-separator-color: var(--brlbs-grey-20);
  --content-blocker-link-color: var(--brlbs-ink);
  --content-blocker-link-color-hover: var(--brlbs-copper);
  --content-blocker-button-color: var(--brlbs-ink);
  --content-blocker-button-color-hover: var(--brlbs-copper);
  --content-blocker-button-text-color: #fff;
  --content-blocker-button-text-color-hover: #fff;
  --content-blocker-border-radius-top-left: 0;
  --content-blocker-border-radius-top-right: 0;
  --content-blocker-border-radius-bottom-left: 0;
  --content-blocker-border-radius-bottom-right: 0;
  --content-blocker-button-border-radius-top-left: 0;
  --content-blocker-button-border-radius-top-right: 0;
  --content-blocker-button-border-radius-bottom-left: 0;
  --content-blocker-button-border-radius-bottom-right: 0;
}

/* ── Scroll-Sperre ─────────────────────────────────────────────────────────
   Solange der Dialog offen ist, setzt Borlabs inline overflow: hidden auf
   body. Weil base.css overflow-x auf html legt, wandert das nicht zum
   Viewport: body wird selbst zum Scroll-Container, und jedes position:
   sticky (Header, Assembly, Flow, Legal-Inhalt) klebt nicht mehr. Wer mitten
   auf der Seite neu lädt, sah hinter dem Backdrop leere Assembly-Spur. Die
   Sperre hielt die Seite ohnehin nicht fest (html scrollt), also fällt sie
   weg; das Overlay fängt Mausrad und Klicks weiter ab. */
body { overflow: visible !important; }

/* ── Schrift ─────────────────────────────────────────────────────────────── */

body #BorlabsCookieBox .brlbs-cmpnt-container,
body #BorlabsCookieWidget {
  font-family: var(--dialog-font-family);
  -webkit-font-smoothing: antialiased;
}

/* ── Kopf: kein Plugin-Logo, Überschrift links wie im Theme ───────────────
   Die Logo-Adresse in den Borlabs-Einstellungen zeigt auf das Borlabs-Logo
   und auf die Produktionsdomain; ausblenden ist robuster als umstellen. */

body #BorlabsCookieBox .brlbs-dialog-logo { display: none; }

body #BorlabsCookieBox .brlbs-cmpnt-dialog-box-header,
body #BorlabsCookieBox .brlbs-cmpnt-dialog-iab-tcf-header,
body #BorlabsCookieBox .brlbs-cmpnt-dialog-bar-header {
  justify-content: flex-start;
  padding-right: 32px; /* Platz für das Schließen-Kreuz */
}

body #BorlabsCookieBox .brlbs-cmpnt-dialog-entrance-headline,
body #BorlabsCookieBox .brlbs-cmpnt-dialog-details-header h2 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--brlbs-ink);
}

/* ── Fließtext und Links ─────────────────────────────────────────────────── */

body #BorlabsCookieBox .brlbs-cmpnt-dialog-entrance-description,
body #BorlabsCookieBox .brlbs-cmpnt-dialog-details-description {
  line-height: 1.55;
}

body #BorlabsCookieBox .brlbs-cmpnt-dialog-entrance-description a,
body #BorlabsCookieBox .brlbs-cmpnt-dialog-details a:not(.brlbs-cmpnt-btn):not(.brlbs-cmpnt-link) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body #BorlabsCookieBox .brlbs-cmpnt-dialog-footer .brlbs-cmpnt-link {
  font-weight: 500;
}

/* ── Buttons wie .btn-out: eckig, 1px Rahmen, fett, leicht gesperrt ─────── */

body #BorlabsCookieBox .brlbs-cmpnt-btn:not(.brlbs-cmpnt-link) {
  border: 1px solid var(--brlbs-ink);
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.3;
  transition: background-color .22s, color .22s, border-color .22s;
}

/* Gefüllte Buttons tauschen beim Hover die Rahmenfarbe mit. */
body #BorlabsCookieBox .brlbs-btn-accept-all:hover,
body #BorlabsCookieBox .brlbs-btn-accept-only-essential:hover {
  border-color: var(--brlbs-copper);
}

body #BorlabsCookieBox .brlbs-cmpnt-btn:focus-visible,
body #BorlabsCookieBox .brlbs-cmpnt-link:focus-visible,
body #BorlabsCookieBox .brlbs-cmpnt-close-button:focus-visible,
body #BorlabsCookieWidget .brlbs-cmpnt-widget:focus-visible {
  outline: 2px solid var(--brlbs-copper);
  outline-offset: 2px;
  box-shadow: none;
}

/* "Alle auswählen" / "Alle abwählen": kleine Outline-Buttons. Borlabs gibt
   ihnen zusätzlich .brlbs-cmpnt-link, deshalb fallen sie oben heraus. */
body #BorlabsCookieBox .brlbs-cmpnt-btn.brlbs-cmpnt-btn-selection {
  border: 1px solid var(--brlbs-ink);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  background-color: var(--dialog-button-selection-color);
  color: var(--dialog-button-selection-text-color);
  transition: background-color .22s, color .22s;
}

body #BorlabsCookieBox .brlbs-cmpnt-btn.brlbs-cmpnt-btn-selection:hover {
  background-color: var(--dialog-button-selection-color-hover);
  color: var(--dialog-button-selection-text-color-hover);
}

/* ── Reiter im Präferenz-Dialog ──────────────────────────────────────────── */

body #BorlabsCookieBox .brlbs-cmpnt-tab {
  font-weight: 700;
  letter-spacing: .3px;
}

/* ── Widget: Carbon-Zeichen auf heller Kachel ───────────────────────────────
   Das Widget liegt fest unten links, also abwechselnd über hellen und
   dunklen Sections (Hero-Film, Markenband). Ein Zeichen ohne Grund
   verschwände auf einer von beiden; die Linen-Kachel trägt es auf beiden. */

body #BorlabsCookieWidget .brlbs-cmpnt-widget svg {
  box-sizing: content-box;
  padding: 8px;
  background: var(--brlbs-paper);
  border: 1px solid var(--brlbs-grey-20);
  filter: none;
  transition: color .22s;
}

body #BorlabsCookieWidget .brlbs-cmpnt-widget:hover {
  opacity: 1;
}

body #BorlabsCookieWidget .brlbs-cmpnt-widget:hover svg {
  color: var(--brlbs-copper) !important; /* Borlabs setzt die Farbe inline */
}

@media (prefers-reduced-motion: reduce) {
  body #BorlabsCookieBox .brlbs-cmpnt-btn,
  body #BorlabsCookieWidget .brlbs-cmpnt-widget,
  body #BorlabsCookieWidget .brlbs-cmpnt-widget svg { transition: none; }
}