/**
 * Klaro – Premium-Branding (Greige / Waldgrün), WCAG-orientiert
 * Root: #klaro.klaro (elementID + Klasse)
 */

#klaro.klaro {
  --klaro-bg: #f4f1eb;
  --klaro-text: #1e1812;
  --klaro-muted: #3d362e;
  --klaro-accent: #3d5247;
  --klaro-accent-hover: #354840;
  --klaro-on-accent: #faf8f3;
  --klaro-border: rgba(61, 82, 71, 0.35);
  --klaro-focus: #c9a96e;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--klaro-text);
}

#klaro.klaro .cookie-notice,
#klaro.klaro .cookie-modal-notice {
  background: var(--klaro-bg) !important;
  color: var(--klaro-text) !important;
  border-top: 1px solid var(--klaro-border) !important;
  box-shadow: 0 -8px 32px rgba(30, 24, 18, 0.12) !important;
}

@media (max-width: 639px) {
  #klaro.klaro .cookie-notice .cn-body {
    padding: 1rem 1rem 1.125rem !important;
  }

  #klaro.klaro .cookie-notice h2 {
    font-size: 1.05rem !important;
    margin-bottom: 0.35rem !important;
  }

  #klaro.klaro .cookie-notice .cn-ok {
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
  }

  #klaro.klaro .cookie-notice .cn-buttons {
    width: 100%;
    justify-content: stretch !important;
    gap: 0.5rem !important;
  }

  #klaro.klaro .cookie-notice .cn-buttons .cm-btn {
    flex: 1 1 auto !important;
    min-height: 48px !important;
  }
}

#klaro.klaro .cookie-notice h2 {
  color: var(--klaro-text) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#klaro.klaro .cookie-notice p,
#klaro.klaro .cookie-notice .cn-changes {
  color: var(--klaro-muted) !important;
  font-size: 0.9375rem !important;
}

#klaro.klaro .cookie-notice a,
#klaro.klaro .cookie-notice .cn-learn-more {
  color: #2a4a3a !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 500 !important;
}

#klaro.klaro .cookie-notice a:hover,
#klaro.klaro .cookie-notice .cn-learn-more:hover {
  color: var(--klaro-accent) !important;
}

#klaro.klaro .cookie-notice .cm-btn.cm-btn-success,
#klaro.klaro .cookie-modal .cm-btn.cm-btn-success,
#klaro.klaro .cookie-notice .cm-btn.cm-btn-success-var,
#klaro.klaro .cookie-modal .cm-btn.cm-btn-success-var {
  background-color: var(--klaro-accent) !important;
  border: 1px solid var(--klaro-accent) !important;
  color: var(--klaro-on-accent) !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  min-height: 48px !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

#klaro.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
#klaro.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
#klaro.klaro .cookie-notice .cm-btn.cm-btn-success-var:hover,
#klaro.klaro .cookie-modal .cm-btn.cm-btn-success-var:hover {
  background-color: var(--klaro-accent-hover) !important;
  border-color: var(--klaro-accent-hover) !important;
  color: #ffffff !important;
}

#klaro.klaro .cookie-notice .cm-btn.cm-btn-danger,
#klaro.klaro .cookie-modal .cm-btn.cm-btn-danger {
  background-color: transparent !important;
  border: 1px solid var(--klaro-border) !important;
  color: var(--klaro-text) !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  min-height: 48px !important;
}

#klaro.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
#klaro.klaro .cookie-modal .cm-btn.cm-btn-danger:hover {
  border-color: var(--klaro-accent) !important;
  color: var(--klaro-accent) !important;
}

#klaro.klaro .cookie-notice .cm-btn.cm-btn-info,
#klaro.klaro .cookie-modal .cm-btn.cm-btn-info {
  background-color: rgba(235, 230, 220, 0.95) !important;
  border: 1px solid var(--klaro-border) !important;
  color: var(--klaro-text) !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  min-height: 48px !important;
}

#klaro.klaro .cookie-notice .cm-btn.cm-btn-info:hover,
#klaro.klaro .cookie-modal .cm-btn.cm-btn-info:hover {
  border-color: var(--klaro-accent) !important;
  background-color: #ebe6dc !important;
}

/* Modaler Detail-Screen */
#klaro.klaro .cm-modal.cm-klaro {
  background: var(--klaro-bg) !important;
  color: var(--klaro-text) !important;
  border: 1px solid var(--klaro-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 24px 60px rgba(30, 24, 18, 0.18) !important;
}

#klaro.klaro .cm-modal .title {
  color: var(--klaro-text) !important;
}

#klaro.klaro .cm-modal .cm-header p,
#klaro.klaro .cm-modal .cm-body {
  color: var(--klaro-muted) !important;
}

#klaro.klaro .cm-modal a {
  color: #2a4a3a !important;
  font-weight: 500 !important;
}

/* Fokus sichtbar (Tastatur / Bedienhilfen) */
#klaro.klaro .cm-btn:focus,
#klaro.klaro .cm-btn:focus-visible,
#klaro.klaro a:focus-visible,
#klaro.klaro .hide:focus-visible {
  outline: 3px solid var(--klaro-focus) !important;
  outline-offset: 2px !important;
}

#klaro.klaro .cm-list-label:focus-visible {
  outline: 3px solid var(--klaro-focus) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  #klaro.klaro .cm-btn,
  #klaro.klaro a {
    transition: none !important;
  }
}