/*
 * Farben des Cookie-Hinweises. Jede Site passt ihn ueber Variablen an ihr
 * Design an, am besten in ihrer eigenen CSS-Datei:
 *
 *   :root {
 *     --cms-cookie-accent: #1d4ed8;        Hauptknopf und Link
 *     --cms-cookie-accent-hover: #1e40af;
 *     --cms-cookie-accent-text: #fff;      Schrift auf dem Hauptknopf
 *     --cms-cookie-radius: 0.5rem;         Rundung der Knoepfe
 *     --cms-cookie-bg: #fff;               Hintergrund des Hinweises
 *     --cms-cookie-fg: #171717;            Schrift
 *     --cms-cookie-muted: #404040;         Fliesstext
 *     --cms-cookie-border: #d4d4d4;        Rand der Nebenknoepfe
 *     --cms-cookie-font: inherit;
 *   }
 *
 * Jede Regel hat die Spezifitaet einer einzelnen Klasse (0,1,0): Die ID steht
 * in :where() und zaehlt nicht. Das reicht gegen Element-Regeln wie den
 * Tailwind-Preflight (button { background: transparent }), und eigene Regeln
 * einer Site fuer #cms-cookie-banner gewinnen trotzdem immer.
 */
:where(#cms-cookie-banner) {
  font-family: var(--cms-cookie-font, inherit);
}
:where(#cms-cookie-banner) .cms-cookie-panel {
  background: var(--cms-cookie-bg, #fff);
  color: var(--cms-cookie-fg, #171717);
}
:where(#cms-cookie-banner) .cms-cookie-text {
  color: var(--cms-cookie-muted, #404040);
}
:where(#cms-cookie-banner) .cms-cookie-link {
  color: var(--cms-cookie-accent, #047857);
}
:where(#cms-cookie-banner) .cms-cookie-link:hover {
  color: var(--cms-cookie-accent-hover, #065f46);
}
:where(#cms-cookie-banner) :is(.cms-cookie-accept, .cms-cookie-secondary) {
  border-radius: var(--cms-cookie-radius, 0.5rem);
  cursor: pointer;
}
:where(#cms-cookie-banner) .cms-cookie-accept {
  background: var(--cms-cookie-accent, #059669);
  border-color: var(--cms-cookie-accent, #059669);
  color: var(--cms-cookie-accent-text, #fff);
}
:where(#cms-cookie-banner) .cms-cookie-accept:hover {
  background: var(--cms-cookie-accent-hover, #047857);
  border-color: var(--cms-cookie-accent-hover, #047857);
}
:where(#cms-cookie-banner) .cms-cookie-secondary {
  background: transparent;
  border-color: var(--cms-cookie-border, #d4d4d4);
  color: var(--cms-cookie-muted, #404040);
}
:where(#cms-cookie-banner) .cms-cookie-secondary:hover {
  background: color-mix(in srgb, var(--cms-cookie-fg, #171717) 6%, transparent);
}