/* Klaro – Loui Theme Override (Frosted Glass) */

/* ── Override Klaro's internal CSS variables ───────────────── */
/* These are used as fallbacks throughout klaro.min.css        */
.klaro {
  --dark1:  #faf9f7;   /* notice/modal background (was #333)    */
  --dark2:  #e2ddd8;   /* borders, disabled (was #5c5c5c)        */
  --dark3:  #7c7873;   /* muted text (was #7c7c7c)               */
  --light1: #2c2926;   /* primary text (was #fafafa)             */
  --light2: #d4cfc9;   /* border (was #c8c8c8)                   */
  --light3: #ede9e4;   /* hover bg (was #e6e6e6)                 */
  --white1: #faf9f7;   /* notice background (was white)          */
  --white2: #f3f0ec;   /* alt background (was #f2f2f2)           */
  --white3: #e8e4df;   /* (was #e6e6e6)                          */
  --green1: #1a0a2e;   /* primary button (was #1a936f)           */
  --green2: #2d1250;   /* primary hover (was #24cc9a)            */
  --blue1:  #1a0a2e;   /* info button (was #2581c4)              */
}

/* ── cookie-modal-notice (Klaro's default notice variant) ──── */
.klaro .cookie-modal-notice {
  background: rgba(250, 249, 247, 0.88) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(210, 205, 198, 0.7) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 32px rgba(26, 10, 46, 0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
  color: #2c2926 !important;
  font-family: 'Public Sans', system-ui, sans-serif !important;
  max-width: 48rem !important;
  width: calc(100% - 2rem) !important;
  padding: 1.25rem 1.5rem !important;
}

.klaro .cookie-modal-notice p,
.klaro .cookie-modal-notice h1,
.klaro .cookie-modal-notice h2,
.klaro .cookie-modal-notice li {
  color: #5a5652 !important;
}

.klaro .cookie-modal-notice a {
  color: #1a0a2e !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.klaro .cookie-modal-notice .cn-ok {
  background: transparent !important;
  border: none !important;
  margin-top: 1rem !important;
}

/* ── Cookie Notice (bottom banner) ─────────────────────────── */
.klaro .cookie-notice {
  position: fixed !important;
  bottom: 1.5rem !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 2rem) !important;
  max-width: 52rem !important;
  background: rgba(250, 249, 247, 0.82) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(210, 205, 198, 0.7) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 32px rgba(26, 10, 46, 0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 1.25rem 1.5rem !important;
  font-family: 'Public Sans', system-ui, sans-serif !important;
  color: #2c2926 !important;
  z-index: 9999 !important;
}

.klaro .cookie-notice .cn-body {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.klaro .cookie-notice .cn-body > p {
  flex: 1 1 22rem !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  color: #5a5652 !important;
}

.klaro .cookie-notice p a,
.klaro .cookie-notice .cn-body p a {
  color: #1a0a2e !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* ── Modal overlay ──────────────────────────────────────────── */
.klaro .cookie-modal {
  z-index: 10000 !important;
}

.klaro .cookie-modal .cm-bg {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* ── Modal box ──────────────────────────────────────────────── */
.klaro .cookie-modal .cm-modal.cm-klaro {
  background: rgba(250, 249, 247, 0.9) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(210, 205, 198, 0.7) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 32px rgba(26, 10, 46, 0.12), 0 2px 8px rgba(0,0,0,0.08) !important;
  color: #2c2926 !important;
  font-family: 'Public Sans', system-ui, sans-serif !important;
  max-width: 32rem !important;
}

.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom: 1px solid rgba(210, 205, 198, 0.7) !important;
  padding: 1.25rem 1.5rem 1rem !important;
  background: transparent !important;
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
  font-family: 'Lora Variable', Georgia, serif !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #2c2926 !important;
}

.klaro .cookie-modal .cm-modal .cm-header .cm-btn-close {
  color: #7c7873 !important;
  background: transparent !important;
  border: none !important;
}
.klaro .cookie-modal .cm-modal .cm-header .cm-btn-close:hover {
  color: #2c2926 !important;
}

.klaro .cookie-modal .cm-modal .cm-body {
  padding: 1rem 1.5rem !important;
}

.klaro .cookie-modal .cm-modal .cm-body p,
.klaro .cookie-modal .cm-modal .cm-body li {
  color: #5a5652 !important;
  font-size: 0.875rem !important;
}

.klaro .cookie-modal .cm-modal .cm-footer {
  border-top: 1px solid rgba(210, 205, 198, 0.7) !important;
  padding: 1rem 1.5rem 1.5rem !important;
  background: transparent !important;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

/* ── Service / purpose list ─────────────────────────────────── */
.klaro .cookie-modal .cm-switch-container {
  border-bottom-color: rgba(210, 205, 198, 0.6) !important;
  padding: 0.625rem 0 !important;
}

.klaro .cookie-modal .cm-list-title {
  color: #2c2926 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.klaro .cookie-modal .cm-list-description {
  color: #7c7873 !important;
  font-size: 0.8rem !important;
}

/* ── Buttons (all contexts) ─────────────────────────────────── */
.klaro .cm-btn {
  font-family: 'Public Sans', system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  cursor: pointer !important;
  transition: opacity 0.15s, background 0.15s !important;
  border: 1px solid transparent !important;
  line-height: 1.4 !important;
}

/* .cn-ok is a container div — must be transparent */
.klaro .cn-ok {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}
.klaro .cn-ok:hover {
  background: transparent !important;
}

/* Buttons row (Ablehnen + OK) */
.klaro .cn-ok .cn-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}

/* Einstellungen link below */
.klaro .cn-ok .cn-learn-more {
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

/* Strip all margins from buttons and links inside cn-ok */
.klaro .cn-ok .cm-btn,
.klaro .cn-ok .cm-link {
  margin: 0 !important;
}

/* Accept all / primary — only actual buttons */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var {
  background-color: #1a0a2e !important;
  color: #f8f5ff !important;
  border-color: #1a0a2e !important;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-success:focus,
.klaro .cm-btn.cm-btn-success-var:hover,
.klaro .cm-btn.cm-btn-success-var:focus {
  background-color: #2d1250 !important;
  border-color: #2d1250 !important;
  color: #f8f5ff !important;
}

/* Decline — only actual buttons */
.klaro .cm-btn.cm-btn-danger {
  background-color: transparent !important;
  color: #2c2926 !important;
  border-color: rgba(210, 205, 198, 0.9) !important;
}
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-danger:focus {
  background-color: rgba(232, 228, 223, 0.7) !important;
  color: #2c2926 !important;
}

/* Info / save selection */
.klaro .cm-btn.cm-btn-info {
  background-color: transparent !important;
  color: #1a0a2e !important;
  border-color: #1a0a2e !important;
}
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cm-btn.cm-btn-info:focus {
  background-color: #1a0a2e !important;
  border-color: #1a0a2e !important;
  color: #f8f5ff !important;
  outline: none !important;
}

/* Learn more / settings link */
.klaro .cn-learn-more,
.klaro .cm-link {
  color: #1a0a2e !important;
  background: none !important;
  border: none !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  font-family: 'Public Sans', system-ui, sans-serif !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  padding: 0.5rem 0.25rem !important;
}
.klaro .cn-learn-more:hover,
.klaro .cm-link:hover {
  opacity: 0.65 !important;
}

/* ── Toggle switch ──────────────────────────────────────────── */
.klaro .slider {
  background-color: #d4cfc9 !important;
}
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: #1a0a2e !important;
}
.klaro .slider:before {
  background-color: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
}

/* ── Powered-by ─────────────────────────────────────────────── */
.klaro .cm-powered-by {
  display: none !important;
}