/* ─────────────────────────────────────────────────────────────
   klaro-theme.css — Main Design Branding für Klaro Consent Manager
   Wird NACH klaro.css geladen und überschreibt die Defaults.
   DUNKLES Navy-Theme — nahtlos im Seiten-Design (statt hellem Bone).
   ───────────────────────────────────────────────────────────── */

/* Typografie und Farbsystem ans Main-Design anpassen */
.klaro .cookie-modal,
.klaro .cookie-notice {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  color: #EAF2FF;
}

.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal {
  background: #0A122B !important;
  color: #EAF2FF !important;
  border: 1px solid rgba(126, 176, 255, 0.18) !important;
  box-shadow: 0 30px 80px -28px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(126, 176, 255, 0.04);
  border-radius: 16px;
}

.klaro .cookie-modal .cm-modal {
  max-width: 720px;
}

.klaro .cookie-notice {
  max-width: 480px;
  margin: 16px;
}

/* Headlines im Klaro-Modal */
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h2,
.klaro .cookie-notice .cn-body h2 {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  color: #FAFAF7 !important;
  letter-spacing: -0.015em;
  font-size: 24px !important;
}

/* Fließtext */
.klaro .cookie-modal .cm-modal .cm-body p,
.klaro .cookie-notice .cn-body p {
  color: #AEB9D4 !important;
  font-size: 14px !important;
  line-height: 1.6;
}

/* Links innerhalb des Banners */
.klaro a,
.klaro .cm-link {
  color: #7EB0FF !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(126, 176, 255, 0.35) !important;
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.klaro a:hover,
.klaro .cm-link:hover {
  color: #EAF2FF !important;
  border-bottom-color: #7EB0FF !important;
}

/* ─── Buttons ─── */
.klaro .cm-btn {
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em;
  border: 1px solid transparent !important;
  transition: transform 0.25s ease, background-color 0.2s ease,
              color 0.2s ease, border-color 0.2s ease;
}

.klaro .cm-btn:hover {
  transform: translateY(-1px);
}

/* Primary (Alle akzeptieren) — leuchtendes Blau, dunkler Text */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-accept {
  background-color: #4D8DFF !important;
  color: #061024 !important;
  border-color: #4D8DFF !important;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-success-var:hover,
.klaro .cm-btn.cm-btn-accept-all:hover,
.klaro .cm-btn.cm-btn-accept:hover {
  background-color: #7EB0FF !important;
  border-color: #7EB0FF !important;
}

/* Secondary (Auswahl / Mehr erfahren) */
.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-learn-more {
  background-color: transparent !important;
  color: #EAF2FF !important;
  border-color: rgba(126, 176, 255, 0.3) !important;
}
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cm-btn.cm-btn-learn-more:hover {
  background-color: rgba(77, 141, 255, 0.14) !important;
  color: #FFFFFF !important;
  border-color: #4D8DFF !important;
}

/* Decline / Danger */
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-decline {
  background-color: transparent !important;
  color: #8A97B8 !important;
  border-color: rgba(126, 176, 255, 0.16) !important;
}
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-decline:hover {
  color: #EAF2FF !important;
  border-color: rgba(126, 176, 255, 0.4) !important;
}

/* ─── Toggle Switches ─── */
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .slider.bg-success {
  background-color: #4D8DFF !important;
}
.klaro .slider {
  background-color: #2A3557;
}
.klaro .slider::before {
  background-color: #EAF2FF !important;
}
.klaro .cm-list-label .cm-switch-label,
.klaro .cm-list-title {
  color: #EAF2FF !important;
}

/* ─── Service-Karten im Modal ─── */
.klaro .cookie-modal .cm-modal .cm-services .cm-service,
.klaro .cookie-modal .cm-modal .cm-purposes .cm-purpose {
  background: rgba(126, 176, 255, 0.05) !important;
  border: 1px solid rgba(126, 176, 255, 0.14) !important;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 12px;
}

.klaro .cookie-modal .cm-modal .cm-services .cm-service h2,
.klaro .cookie-modal .cm-modal .cm-purposes .cm-purpose h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #EAF2FF !important;
  letter-spacing: -0.01em;
}

/* ─── Footer-Bereich (Powered by Klaro) ─── */
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by,
.klaro .cookie-notice .cn-body .cm-powered-by {
  font-size: 11px !important;
  color: #6B769A !important;
  letter-spacing: 0.05em;
}

/* ─── Notice-Banner positioning ─── */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  width: calc(100% - 40px);
}

@media (min-width: 720px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    max-width: 420px;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .klaro .cm-btn,
  .klaro a,
  .klaro .slider {
    transition: none !important;
  }
}