/* Wache Weiblichkeit – Klaro-Anpassung an die WW-Palette.
   Laedt NACH klaro.min.css (die Grundgestalt kommt von dort, hier stehen nur
   die Abweichungen). Die vielen !important sind Klaros eigene Handschrift:
   klaro.min.css setzt Farben und Masse selbst mit hoher Spezifitaet, ohne
   Variablen, die man von aussen umbiegen koennte. */

.klaro {
  font-family: var(--ww-font-base, sans-serif);
  font-size: .95rem;
}

.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal {
  border-radius: var(--ww-radius, .5rem);
}

/* Der Hinweis unten: nicht ueber die ganze Breite, gleiche Kante wie der
   Inhalt der Seite. */
#klaro-cookie-notice,
.klaro .cookie-notice:not(.cookie-modal-notice) {
  left: 1.25rem !important;
  right: auto !important;
  bottom: 1.25rem !important;
  box-shadow: 0 12px 30px rgba(42, 28, 33, .25);
}

@media (min-width: 992px) {
  #klaro-cookie-notice,
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    width: 420px !important;
    max-width: 42% !important;
  }
}

.klaro .cn-title,
.klaro .cm-header h1,
.klaro .cm-header .title {
  font-family: var(--ww-font-display, Georgia, serif);
  color: var(--ww-red, #e20020) !important;
}

/* Keine Goldlinie im Dialog: die globale Regel h1::after haengt sie an jede
   Ueberschrift der Seite -- hier waere sie Zierrat in einem Bedienfenster.
   Ueberall sonst bleibt sie (wie beim Akkordeon geloest). */
.klaro .cm-header h1::after,
.klaro .cm-header h1::before {
  content: none;
}

/* Schalter und Links: Rot ist die Handlungsfarbe der Seite. */
.klaro .cm-btn,
.klaro .cn-ok .cm-btn,
.klaro .cm-btn-accept,
.klaro .cm-btn-accept-all,
.klaro .cn-buttons .cm-btn {
  background: var(--ww-red, #e20020) !important;
  border: 2px solid var(--ww-red, #e20020) !important;
  color: #fff !important;
  border-radius: var(--ww-btn-radius, .25rem) !important;
  font-weight: 600;
  padding: .5rem 1.1rem !important;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.klaro .cm-btn:hover,
.klaro .cm-btn-accept:hover,
.klaro .cm-btn-accept-all:hover,
.klaro .cn-buttons .cm-btn:hover {
  background: var(--ww-red-dark-soft, #c6001c) !important;
  border-color: var(--ww-red-dark-soft, #c6001c) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(226, 0, 32, .22);
}

/* Ablehnen und "nur Notwendiges": ruhiger, damit die Wahl nicht gelenkt
   wirkt -- gleiche Groesse, gleiche Form, nur ohne Fuellfarbe. */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline,
.klaro .cm-btn-danger,
.klaro .cm-btn.cm-btn-info {
  background: transparent !important;
  border-color: var(--ww-plum, #454545) !important;
  color: var(--ww-plum, #454545) !important;
}

.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-info:hover {
  background: var(--ww-plum, #454545) !important;
  color: #fff !important;
  box-shadow: none;
}

.klaro .cm-link,
.klaro .cn-learn-more,
.klaro a:not(.cm-btn) {
  color: var(--ww-red, #e20020) !important;
}

/* Kippschalter: aus grau, an rot. Klaro haengt an den Schalter immer die
   Klasse "active" -- der Zustand steckt allein in :checked der Checkbox. */
.klaro .cm-list-label .slider,
.klaro .cm-list-label .slider.round {
  background-color: #c9c4c4 !important;
}

.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input.required + .cm-list-label .slider {
  background-color: var(--ww-red, #e20020) !important;
}

.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 2px solid var(--ww-plum, #454545);
  outline-offset: 2px;
}

.klaro .cm-list-title,
.klaro .cm-list-description,
.klaro .cm-services .cm-caret,
.klaro .cookie-modal .cm-body {
  color: var(--ww-ink, #231f20);
}

.klaro .cm-powered-by {
  display: none;
}

/* Kontextuelle Einwilligung -- der Platzhalter, der statt eines fremden
   Einbettungs-Inhalts steht (TidyCal). Er soll aussehen wie eine
   WW-Inhaltskarte, nicht wie ein Fremdkoerper. */
.klaro .context-notice {
  background: var(--ww-sand, #f2ece5) !important;
  border: 1px solid var(--ww-sand-deep, #e6dccf) !important;
  border-radius: var(--ww-radius, .5rem) !important;
  color: var(--ww-ink, #231f20) !important;
  padding: 2rem 1.5rem !important;
  text-align: center;
}

.klaro .context-notice .cn-ok {
  justify-content: center;
}