/* Emergetik – Klaro Brand Overrides (lädt nach klaro.min.css) */
.klaro {
  font-family: var(--ek-font-base, 'Montserrat', sans-serif);
}

.klaro .cookie-notice,
.klaro .cookie-modal,
.klaro .cm-modal,
.klaro .cn-body {
  border-radius: var(--ek-radius, 0.35rem);
}

.klaro .cm-btn,
.klaro .cn-ok,
.klaro .cm-btn-accept,
.klaro .cm-btn-accept-all,
.klaro .cm-btn-decline,
.klaro .cm-btn-deny,
.klaro .cm-btn-info,
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  color: #fff !important;
}

.klaro .cm-btn,
.klaro .cn-ok,
.klaro .cm-btn-accept,
.klaro .cm-btn-accept-all {
  background: var(--ek-coral, #cc637b) !important;
  border-color: var(--ek-coral, #cc637b) !important;
}

.klaro .cm-btn:hover,
.klaro .cn-ok:hover,
.klaro .cm-btn-accept:hover,
.klaro .cm-btn-accept-all:hover {
  background: var(--ek-coral-dark, #a8485e) !important;
  border-color: var(--ek-coral-dark, #a8485e) !important;
  color: #fff !important;
}

.klaro .cm-btn-decline,
.klaro .cm-btn-deny {
  background: var(--ek-dark-nav, #2b3238) !important;
  border-color: var(--ek-dark-nav, #2b3238) !important;
}

.klaro .cm-btn-info {
  background: var(--ek-petrol, #14a0a5) !important;
  border-color: var(--ek-petrol, #14a0a5) !important;
}

.klaro .cm-link,
.klaro a:not(.cm-btn):not(.cn-link):not(.cn-btn) {
  color: var(--ek-petrol, #14a0a5) !important;
}

/* Erstabfrage (#klaro-cookie-notice): linksbündig, Desktop max. 50% */
#klaro-cookie-notice,
.klaro .cookie-notice:not(.cookie-modal-notice) {
  left: 20px !important;
  right: auto !important;
  --notice-left: 20px;
  --notice-right: auto;
}

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

#klaro-cookie-notice .cn-ok,
.klaro .cookie-notice .cn-ok {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-radius: var(--ek-radius, 0.35rem);
  padding: 0.35rem 0.35rem 0.2rem;
}

/* Notice-Actions wie kleine emButtons (btn-ek btn-ek-sm) */
#klaro-cookie-notice .cn-btn,
#klaro-cookie-notice .cn-link,
#klaro-cookie-notice .cm-btn,
#klaro-cookie-notice .cm-link,
#klaro-cookie-notice a.cn-learn-more {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background-color: var(--ek-coral, #cc637b) !important;
  border: 1px solid var(--ek-coral, #cc637b) !important;
  color: #fff !important;
  border-radius: var(--ek-radius, 0.35rem) !important;
  padding: 0.35rem 0.95rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: 0.2s ease !important;
  vertical-align: middle;
  width: auto !important;
  margin: 0.15rem 0.35rem 0.15rem 0 !important;
  box-sizing: border-box;
}

#klaro-cookie-notice .cn-btn:hover,
#klaro-cookie-notice .cn-link:hover,
#klaro-cookie-notice .cm-btn:hover,
#klaro-cookie-notice .cm-link:hover,
#klaro-cookie-notice a.cn-learn-more:hover {
  background-color: var(--ek-coral-dark, #a8485e) !important;
  border-color: var(--ek-coral-dark, #a8485e) !important;
  color: #fff !important;
}

/* Toggle: inaktiv grau, aktiv ek-petrol
 * Achtung: Klaro setzt class "slider round active" IMMER – der Zustand
 * kommt nur vom Checkbox :checked, nicht von .active.
 */
.klaro .cm-list-label .slider,
.klaro .cm-list-label .slider.round,
.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  background-color: #c5c8cc !important;
}

.klaro .cm-list-label .slider::before,
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  background-color: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-switch-container input:checked + .slider {
  background-color: var(--ek-petrol, #14a0a5) !important;
}

.klaro .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
  background-color: #fff !important;
}

.klaro .cm-header,
.klaro .cn-title {
  color: var(--ek-charcoal, #2b2b28);
}