/* ==========================================================================
   Complianz Cookie-Banner im Theme-Look

   Wird nur geladen, wenn das Complianz-Plugin aktiv ist (siehe functions.php).
   Alle Farben kommen aus den Design-Tokens in style.css (Custom Properties
   auf :root bzw. html[data-mode="light"]). Dadurch wechselt der Banner beim
   Dark/Light-Toggle automatisch mit, ohne eigenes JS.

   !important ist hier bewusst gesetzt: Complianz liefert ein eigenes,
   generiertes Stylesheet mit hoher Spezifität, dessen Ladereihenfolge
   nicht garantiert ist.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Complianz-eigene Variablen auf Theme-Tokens mappen. Complianz definiert
   sie auf :root; die Deklaration direkt auf dem Banner-Container gewinnt
   für alle Banner-Elemente unabhängig von der Ladereihenfolge. Deckt auch
   Pseudo-Elemente ab (z.B. den Toggle-Track über label::before), die per
   Selektor schwer zu treffen sind.
   -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-manage-consent {
  --cmplz_banner_background_color: var(--bg-raise);
  --cmplz_banner_border_color: var(--line);
  --cmplz_text_color: var(--ink-soft);
  --cmplz_hyperlink_color: var(--accent);
  --cmplz_button_accept_background_color: var(--accent);
  --cmplz_button_accept_border_color: var(--accent);
  --cmplz_button_accept_text_color: #ffffff;
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: var(--line-strong);
  --cmplz_button_deny_text_color: var(--ink);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--line-strong);
  --cmplz_button_settings_text_color: var(--ink);
  --cmplz_button_border_radius: 99px 99px 99px 99px;
  --cmplz_banner_border_radius: var(--radius) var(--radius) var(--radius) var(--radius);
  --cmplz_category_header_always_active_color: var(--accent);
  --cmplz_slider_active_color: var(--accent);
  --cmplz_slider_inactive_color: var(--ink-faint);
  --cmplz_slider_bullet_color: #ffffff;
}

/* --------------------------------------------------------------------------
   1. Banner-Container: Surface wie Theme-Cards (--bg-raise), feine Linie,
   Card-Radius, Theme-Schatten
   -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  background: var(--bg-raise) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  font-family: var(--font-sans) !important;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Trennlinien im Banner */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
  border-color: var(--line) !important;
  background: var(--line) !important;
}

/* --------------------------------------------------------------------------
   2. Kopf & Text

   Kopf in ALLEN Breakpoints ohne das Plugin-Header-Grid (Logo | Titel | X):
   Im Grid ist der Titel nur innerhalb seiner Zelle zentriert und exakt
   mittig nur, solange beide Randspalten gleich breit sind. Stattdessen:
   Grid auflösen, X-Button absolut oben rechts (klaut nie Breite), Titel
   als Block über die volle Kartenbreite mit text-align: center und
   symmetrischem Padding (hält den Text vom X frei). Die leere Logo-Spalte
   entfällt; ein in Complianz konfiguriertes Banner-Logo würde damit
   bewusst ausgeblendet.
   -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
  display: block !important;
  position: relative !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-logo {
  display: none !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 1.75rem !important;
  margin: 0 !important;
  text-align: center !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  color: var(--ink) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-close {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Titel vertikal ausbalancieren (Desktop/Tablet, analog zum Mobile-Fix in
   Abschnitt 9): Glyphen-gemessen war oben 28.6px (nur Container-Padding),
   unten zum Bodytext 31.2px (row-gap + Trennlinie + Zeilen-Leading).
   margin-top verschiebt Titel und X gemeinsam: oben = unten = 31.2px.
   X-Offset -3px: top: 50% zentriert das X auf die VOLL-Ink-Mitte der
   Titelzeile inkl. Unterlaengen ('g'). Die optische Mitte ist aber das
   Band zwischen Versalhoehe und Baseline und liegt hoeher; live per
   Screenshot-Pixelanalyse abgelesen sass das X 2-4px unter diesem Band.
   Mobile (<=767px) hat eigene Werte in Abschnitt 9 und bleibt
   unberuehrt. */
@media (min-width: 768px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
    margin-top: calc(0.325 * var(--space-1)) !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-close {
    top: calc(50% - 3px) !important;
  }
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
  color: var(--ink-soft) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Fliesstext zentriert, passend zu Titel und Buttons */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
  text-align: center !important;
}

/* Complianz gibt Message und Kategorien ab 768px eine FIXE Breite
   (--cmplz_banner_width minus 42px = 484px). Sobald der Banner breiter ist
   (die Button-Zeile drückt ihn auf ~570px), sitzen beide linksbündig mit
   ungleichem Rand (links 21px, rechts 65px). Stattdessen die volle
   Grid-Spur nutzen wie Buttons und Links-Zeile: gleicher Rand beidseitig. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
  width: auto !important;
  max-width: 100% !important;
}

/* Ohne die fixe Message-Breite braucht der Banner auf Desktop selbst eine
   explizite Breite: er ist position: fixed ohne width, seine Breite kam
   bisher vom Inhalt (shrink-to-fit), und ein unumbrochener Fliesstext
   würde ihn sonst auf volle Viewport-Breite ziehen. 36rem entspricht der
   bisherigen Optik (~570px, die Button-Zeile passt in eine Reihe).
   Tablet (768-1024px) und Mobile setzen ihre Breite in Abschnitt 9/10. */
@media (min-width: 1025px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    width: 36rem !important;
    max-width: calc(100vw - 2 * var(--space-1)) !important;
  }
}

/* Schliessen-Kreuz */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
  color: var(--ink-faint) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover {
  color: var(--ink) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg path {
  fill: currentColor !important;
}

/* --------------------------------------------------------------------------
   3. Buttons: identisch zu den Theme-Buttons (Pill-Form, Space Grotesk).
   Akzeptieren = Primär (Orange-Verlauf + Glow, weisser Text),
   Ablehnen / Einstellungen = Ghost-Stil (transparent, feine Kontur)
   -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 0.7rem 1.5rem !important;
  border: 0 !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  transition: filter 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: var(--glow) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  filter: brightness(1.08);
  box-shadow: var(--glow-strong) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--line-strong) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
}

/* --------------------------------------------------------------------------
   4. Voreinstellungen-Panel (Kategorien): abgesetzte Fläche wie --bg-soft,
   kleiner Radius wie Theme-Cards
   -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-s) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-header {
  color: var(--ink) !important;
}

/* Pfeil-Icon zum Aufklappen der Kategorie: Font-Awesome-SVG mit
   fill: currentColor, also die Textfarbe des Buttons setzen */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-faint) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle:focus-visible {
  color: var(--ink) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-icon svg path {
  fill: currentColor !important;
}

/* "Immer aktiv"-Hinweis bei funktionalen Cookies */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active {
  color: var(--accent) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Toggle-Switches: aus = neutrales Grau, an = Orange-Verlauf des Themes,
   Knopf bleibt weiss. Complianz baut den aktiven Track über label::before
   (background-color aus --cmplz_slider_active_color, oben gemappt); der
   Verlauf kommt zusätzlich als background-image obendrauf.
   -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-consent-checkbox:checked + .cmplz-label::before {
  background-image: var(--accent-grad) !important;
}

/* Fokus-Ring in Theme-Farbe statt Browser-Blau, mit Lücke zum Track,
   damit er auch auf dem orangen aktiven Zustand sichtbar bleibt */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-consent-checkbox:focus + .cmplz-label::before {
  box-shadow: 0 0 0 2px var(--bg-raise), 0 0 0 4px var(--accent) !important;
}

/* --------------------------------------------------------------------------
   6. Links (Datenschutzerklärung, Impressum): Akzentfarbe des Themes.
   --accent statt --accent-2, weil --accent in beiden Modi WCAG AA auf den
   Banner-Flächen erfüllt (--accent-2 wäre im Light Mode zu hell).
   -------------------------------------------------------------------------- */
/* Links-Zeile zentriert; Complianz rendert die Links als flex-<ul> */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul {
  justify-content: center !important;
  text-align: center !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link:hover {
  color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   7. "Zustimmung verwalten"-Tab (unten links, nach erteiltem Consent)
   -------------------------------------------------------------------------- */
#cmplz-manage-consent .cmplz-manage-consent {
  background: var(--bg-raise) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-bottom: 0 !important;
  border-radius: var(--radius-s) var(--radius-s) 0 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow) !important;
}

#cmplz-manage-consent .cmplz-manage-consent:hover {
  color: var(--accent) !important;
}

/* --------------------------------------------------------------------------
   8. "Cookie-Einstellungen"-Button in der Footer-Bottom-Bar: muss ein
   <button> sein (Complianz bindet den Klick nur auf
   button.cmplz-manage-consent), sieht aber aus wie die Rechtslinks daneben.
   -------------------------------------------------------------------------- */
.site-footer__legal .smd-cookie-settings {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.site-footer__legal .smd-cookie-settings:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   9. Mobile (bis 767px): kompaktere Typo und Abstände, damit der Banner auf
   einem iPhone höchstens rund die halbe Viewport-Höhe einnimmt. Der Banner
   ist ein CSS-Grid; der Abstand zwischen Kopf, Text, Buttons und Links
   kommt aus dem row-gap. Desktop bleibt unverändert.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Container: weniger Innenabstand, kleiner Abstand zum Screen-Rand.
     --cmplz_banner_margin steuert die Position (bottom/left/right).
     Vertikaler Rhythmus: oben 12px bis zum Titel-Text, unten 10px
     Padding plus ~2px Zeilen-Leading der Links = gemessen 12px auf
     beiden Seiten (mit --space-1 oben klebte der Titel an der Kante). */
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    --cmplz_banner_margin: var(--space-1);
    padding: calc(1.5 * var(--space-1)) var(--space-2) calc(1.25 * var(--space-1)) !important;
    row-gap: 0.4rem !important;
  }

  /* Trennlinien kompensieren das Container-Padding mit negativem Margin;
     ans reduzierte Padding angleichen, sonst ragen sie über den Rand */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
    margin-left: calc(-1 * var(--space-2)) !important;
    margin-right: calc(-1 * var(--space-2)) !important;
  }

  /* Kopf-Struktur (Grid aufgelöst, X absolut) kommt aus Abschnitt 2 und
     gilt in allen Breakpoints; hier nur die kompaktere Titel-Typo.
     Das display: block hebt zusätzlich das display: none auf, mit dem
     Complianz den Titel unter 425px komplett ausblendet. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block !important;
    font-size: 1.125rem !important;
    line-height: 1.2 !important;
  }

  /* Titel vertikal ausbalancieren: Über dem Titel liegt nur das
     Container-Padding (sichtbare Glyphen-Lücke 16.6px), unter ihm
     row-gap, Trennlinie und das Zeilen-Leading des Bodytexts (22px).
     Das margin-top verschiebt den ganzen Header inkl. absolut
     positioniertem X, der Abstand zum Bodytext bleibt unveraendert:
     gemessen oben = unten = 22px. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
    margin-top: calc(0.7 * var(--space-1)) !important;
  }

  /* Das X sitzt sonst 1px ueber der Titel-Glyphen-Mitte (Zeilenbox-
     Mitte != Glyphen-Mitte, "Zustimmung verwalten" hat Unterlaengen) */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-close {
    top: calc(50% + 1px) !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  /* margin: 0 statt nur margin-bottom: Complianz setzt unter 425px ein
     margin-right: 5px (Scrollbar-Reserve), das die Message asymmetrisch
     macht (links 17px, rechts 22px) */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
    margin: 0 !important;
  }

  /* Buttons: Zielhöhe 44-48px, etwas engerer Abstand */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    gap: var(--space-1) !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
    font-size: 0.9375rem !important;
    padding: 0.5rem 1.25rem !important;
    min-height: 44px !important;
  }

  /* Datenschutz/Impressum: kompakter */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
}

/* --------------------------------------------------------------------------
   10. Tablet (768px bis 1024px, iPad Portrait/Landscape): Complianz schaltet
   bei max-width: 768px auf volle Breite mit gestapelten Buttons; damit
   bekäme genau iPad Portrait (768px) den Banner über die ganze
   Screen-Breite. Hier stattdessen: kompakte Karte, unten zentriert,
   Buttons nebeneinander (Akzeptieren und Ablehnen gleich breit).
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Explizite Breite statt width: auto: bei left: 50% rechnet der Browser
     die automatische Breite nur gegen den halben Viewport (shrink-to-fit
     gegen den verbleibenden Platz), die Karte würde zu schmal */
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    width: min(34rem, calc(100vw - 2 * var(--space-2))) !important;
    min-width: 0 !important;
    max-width: none !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--space-1) !important;
    transform: translateX(-50%) !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--space-1) !important;
  }

  /* Akzeptieren und Ablehnen gleichwertig gross (gleiche flex-Basis);
     der längere Voreinstellungen-Button nimmt sich, was er braucht,
     und bricht bei Platzmangel in die zweite Zeile um */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny {
    flex: 1 1 0 !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
    flex: 1 1 auto !important;
  }
}

/* --------------------------------------------------------------------------
   11. Schmale Screens (bis 480px): Banner darf den Viewport nicht
   dominieren. Kategorienliste scrollt intern, Buttons stapeln in voller
   Breite.

   grid-template-rows: Complianz setzt minmax(0, 1fr) auf die ERSTE
   Grid-Reihe, also den Header. Sobald der Banner am max-height-Deckel
   anschlaegt (aufgeklappte Voreinstellungen auf dem iPhone), kollabiert
   die Header-Reihe auf 0px und der Titel malt per Overflow ueber den
   Bodytext. Stattdessen: Header und Trennlinie behalten ihre Hoehe
   (auto), die Body-Reihe flext (minmax(0, 1fr)) und scrollt intern
   (overflow-y: auto kommt vom Plugin) - der Titel bleibt oberhalb des
   scrollenden Inhalts. Solange der Inhalt unter dem Deckel bleibt
   (eingeklappter Zustand), aendert sich nichts an der Darstellung.
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    max-height: 85dvh;
    overflow-y: auto !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  /* Die 55vh-Deckelung des Plugins rausnehmen: die Hoehe kommt jetzt
     aus der flexenden Grid-Reihe, sonst wuerde doppelt begrenzt */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
    max-height: none !important;
    min-height: 0 !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* --------------------------------------------------------------------------
   12. Cookie-Tabelle in der Cookie-Richtlinie (Shortcode [cmplz-cookies],
   Container #cmplz-cookies-overview).

   Complianz liefert dafuer ein Hell-Design: der aufklappbare Dienst-Block
   bekommt rgba(239,239,239,.25), die Kopfzeile .5, die Cookie-Tabelle selbst
   Weiss. Auf der dunklen Seite steht darauf die helle Theme-Schrift, das
   Ergebnis ist ein milchiger Kasten mit praktisch unlesbaren Zeilen
   (nachgemessen 16.09.2026). Hier bekommt die Tabelle die Theme-Flaechen;
   die Schriftfarben stimmen bereits aus style.css und bleiben unberuehrt.
   -------------------------------------------------------------------------- */
#cmplz-cookies-overview .cmplz-dropdown {
  background: var(--bg-raise) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  margin-bottom: var(--space-1);
}

#cmplz-cookies-overview .cmplz-service-header {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Die Tabelle erbt die Flaeche des Blocks, statt eine eigene weisse
   aufzuspannen. Gilt auch fuer die Zeilen-Container darin. */
#cmplz-cookies-overview .cookies-per-purpose,
#cmplz-cookies-overview .cookies-per-purpose > * {
  background: transparent !important;
}

/* Kopfzeile der Tabelle dezent abgesetzt, damit Name/Gueltig bis/Funktion
   als Spaltentitel lesbar bleiben. */
#cmplz-cookies-overview .name-header,
#cmplz-cookies-overview .retention-header,
#cmplz-cookies-overview .function-header {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ink-faint) !important;
}

#cmplz-cookies-overview .purpose {
  color: var(--ink-faint) !important;
}

/* Zeilentrenner in der Theme-Linienfarbe statt im hellen Grau. */
#cmplz-cookies-overview .cookies-per-purpose > div {
  border-bottom: 1px solid var(--line) !important;
}