/* Klaro – Serilab Theme Override (Control Surface, Dark, Flat) */

/* ── Override Klaro's internal CSS variables ───────────────── */
/* These are used as fallbacks throughout klaro.min.css        */
.klaro {
  --dark1:  hsl(215 15% 15%);  /* notice/modal background (was #333)    */
  --dark2:  hsl(215 15% 22%);  /* borders, disabled (was #5c5c5c)        */
  --dark3:  hsl(215 9% 63%);   /* muted text (was #7c7c7c)               */
  --light1: hsl(215 6% 96%);   /* primary text (was #fafafa)             */
  --light2: hsl(215 15% 22%);  /* border (was #c8c8c8)                   */
  --light3: hsl(215 15% 20%);  /* hover bg (was #e6e6e6)                 */
  --white1: hsl(215 15% 15%);  /* notice background (was white)          */
  --white2: hsl(215 15% 12%);  /* alt background (was #f2f2f2)           */
  --white3: hsl(215 15% 22%);  /* (was #e6e6e6)                          */
  --green1: #4f46e5;           /* primary button (was #1a936f)           */
  --green2: #6366f1;           /* primary hover (was #24cc9a)            */
  --blue1:  #4f46e5;           /* info button (was #2581c4)              */
}

/* ── cookie-modal-notice (Klaro's default notice variant) ──── */
.klaro .cookie-modal-notice {
  background: hsl(215 15% 15%) !important;
  border: 1px solid hsl(215 15% 22%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: hsl(215 6% 96%) !important;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !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: hsl(215 9% 63%) !important;
}

.klaro .cookie-modal-notice a {
  color: #6366f1 !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: hsl(215 15% 15%) !important;
  border: 1px solid hsl(215 15% 22%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.25rem 1.5rem !important;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
  color: hsl(215 6% 96%) !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.8125rem !important;
  line-height: 1.6 !important;
  color: hsl(215 9% 63%) !important;
}

.klaro .cookie-notice p a,
.klaro .cookie-notice .cn-body p a {
  color: #6366f1 !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.55) !important;
}

/* ── Modal box ──────────────────────────────────────────────── */
.klaro .cookie-modal .cm-modal.cm-klaro {
  background: hsl(215 15% 15%) !important;
  border: 1px solid hsl(215 15% 22%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: hsl(215 6% 96%) !important;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
  max-width: 32rem !important;
}

.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom: 1px solid hsl(215 15% 22%) !important;
  padding: 1.25rem 1.5rem 1rem !important;
  background: transparent !important;
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: hsl(215 6% 96%) !important;
}

.klaro .cookie-modal .cm-modal .cm-header .cm-btn-close {
  color: hsl(215 9% 63%) !important;
  background: transparent !important;
  border: none !important;
}
.klaro .cookie-modal .cm-modal .cm-header .cm-btn-close:hover {
  color: hsl(215 6% 96%) !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: hsl(215 9% 63%) !important;
  font-size: 0.8125rem !important;
}

.klaro .cookie-modal .cm-modal .cm-footer {
  border-top: 1px solid hsl(215 15% 22%) !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: hsl(215 15% 22%) !important;
  padding: 0.625rem 0 !important;
}

.klaro .cookie-modal .cm-list-title {
  color: hsl(215 6% 96%) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

.klaro .cookie-modal .cm-list-description {
  color: hsl(215 7% 38%) !important;
  font-size: 0.75rem !important;
}

/* ── Buttons (all contexts) ─────────────────────────────────── */
.klaro .cm-btn {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 0 !important;
  padding: 0.5rem 1rem !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 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: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !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: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
}

/* Decline — only actual buttons */
.klaro .cm-btn.cm-btn-danger {
  background-color: transparent !important;
  color: hsl(215 6% 96%) !important;
  border-color: hsl(215 15% 30%) !important;
}
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-danger:focus {
  background-color: hsl(215 15% 20%) !important;
  color: hsl(215 6% 96%) !important;
}

/* Info / save selection */
.klaro .cm-btn.cm-btn-info {
  background-color: transparent !important;
  color: #6366f1 !important;
  border-color: #4f46e5 !important;
}
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cm-btn.cm-btn-info:focus {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  outline: none !important;
}

/* Learn more / settings link */
.klaro .cn-learn-more,
.klaro .cm-link {
  color: #6366f1 !important;
  background: none !important;
  border: none !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !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: hsl(215 15% 30%) !important;
  border-radius: 0 !important;
}
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: #4f46e5 !important;
}
.klaro .slider:before {
  background-color: hsl(215 6% 96%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

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