/*
 * Klaro in den Farben dieser Seite.
 *
 * Klaro schreibt jede Farbe als `var(--name, ruecklauf)`. Es genuegt also, die
 * Variablen zu setzen; keine einzige Regel wird ueberschrieben. Das ist der
 * Unterschied zwischen Anpassen und Uebermalen: nach einem Klaro-Update gilt
 * die neue Gestaltung weiter, und nur die Farben bleiben unsere.
 *
 * Die Namen sind Klaros eigene und heissen deshalb green und blue, obwohl
 * hinter ihnen die Grundfarbe der Seite steht. Umbenennen ginge nicht, ohne
 * genau die Regeln anzufassen, die hier unangetastet bleiben sollen.
 */

.klaro {
  /*
   * Klaros Grundgestaltung ist bereits dunkel: `dark` sind bei ihm die
   * Flaechen, `light` die Schrift darauf. Die Namen also nicht als Helligkeit
   * lesen, sondern als Rolle.
   */
  --dark1: var(--surface);          /* Flaeche des Fensters */
  --dark2: var(--surface-2);        /* Flaeche der Schaltflaechen, Trennlinien */
  --dark3: var(--text-muted);       /* Beschreibungstext in der Liste */
  --light1: var(--text);            /* Schrift auf dem Fenster */
  --light2: var(--surface-2);       /* zweite Flaeche */
  --light3: var(--text-muted);      /* gedaempfte Schrift */
  --white2: var(--border);          /* Schalter aus */
  --white3: var(--surface);         /* Schalterknopf */

  /* Zustimmung: die Grundfarbe der Seite */
  --green1: var(--accent);
  --green2: var(--accent);
  --green3: var(--accent-line);

  /* Verweise */
  --blue1: var(--accent);
  --blue2: var(--accent);

  --button-text-color: var(--accent-contrast);
  --box-shadow-color: var(--accent-line);

  /* Kanten und Schrift wie im Rest der Seite */
  --border-radius: 12px;
  --border-width: 1px;
  --border-style: solid;
  --font-family: var(--font-sans);
  --title-font-family: var(--font-sans);
  --font-size: 0.9375rem;

  /* Der Hinweis sitzt unten, mittig, und nicht in einer Ecke: er gehoert zur
     Seite und nicht als Sprechblase daneben. */
  --notice-max-width: 460px;
  --notice-bottom: 16px;
  --notice-right: 16px;
  --notice-left: auto;
}

/*
 * Was die Variablen nicht abdecken.
 *
 * Klaro setzt an diesen Stellen feste Werte, und zwei davon sind uns wichtig
 * genug, um sie doch anzufassen.
 */

/* Beide Schaltflaechen gleich schwer. Das war der Hauptvorwurf an die alte
   Einrichtung: Ablehnen war dort ganz ausgeblendet. Eine Wahl, bei der ein Weg
   schwerer zu finden ist als der andere, ist keine. */
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.875rem;
}

.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-decline {
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
  border-color: var(--text-muted);
}

/* Der Hinweis liegt ueber der Seite und braucht deshalb eine sichtbare Kante,
   sonst schwimmt er auf dunklem Grund. */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  border: 1px solid var(--border);
}

/*
 * Die Vermerke "(immer an)" und "(laeuft ohne Nachfrage)" hinter einem Titel.
 *
 * Klaro faerbt sie mit --dark2, und dieselbe Variable faerbt auch die Flaeche
 * der Schaltflaechen. In Klaros hellem Grundton ist beides dasselbe Grau und
 * funktioniert; hier ist das eine eine Flaeche und das andere Schrift, und der
 * Vermerk verschwand im Hintergrund. Eine der beiden Verwendungen muss also
 * ausgenommen werden, und das ist diese.
 */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out {
  color: var(--text-faint);
  padding-left: 0.45em;
}

/* Die Fusszeile von Klaro verweist auf das eigene Projekt. Das ist in Ordnung
   und bleibt, nur unaufdringlich. */
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-notice .cm-powered-by {
  font-size: 0.6875rem;
  opacity: 0.55;
}

@media (max-width: 560px) {
  .klaro {
    --notice-max-width: none;
    --notice-left: 12px;
    --notice-right: 12px;
    --notice-bottom: 12px;
  }

  .klaro .cookie-notice .cm-btn {
    width: 100%;
    margin: 4px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .klaro .cookie-notice,
  .klaro .cookie-modal {
    animation: none !important;
    transition: none !important;
  }
}