/**
 * Klaro consent manager — brand styling overrides.
 * Loaded AFTER klaro.css so our brand tokens win.
 * Klaro is open-source (BSD-3-Clause), no Pro version needed for styling.
 */

/* --- Color palette: match brand navy + accent blue --- */
.klaro {
  --link-color: var(--accent, #0369a1);

  /* Toggle switch active = accent blue (not Klaro green) */
  --green1: var(--accent, #0369a1);
  --green2: #4d7cff;
  --green3: #6b94ff;

  /* Buttons */
  --blue1: var(--accent, #0369a1);
  --blue2: #4d7cff;

  /* Dark text = navy (for text, not modal bg — that's overridden below) */
  --dark1: var(--primary, #0f172a);
  --dark2: var(--secondary, #334155);
  --dark3: #64748b;

  /* Light surfaces */
  --light1: var(--bg, #f8fafc);
  --light2: #e2e8f0;
  --light3: #cbd5e1;

  /* White shades */
  --white2: #f1f5f9;
  --white3: #e2e8f0;

  /* Fonts: inherit from site */
  --font-family: inherit;
  --title-font-family: inherit;
  --font-size: 15px;

  /* Rounded pill buttons to match site */
  --border-radius: 8px;
}

/* --- Consent notice (bottom banner) --- */
.klaro .cookie-notice {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.12);
  max-width: 520px;
}

.klaro .cookie-notice .cn-body {
  padding: 20px 24px;
}

.klaro .cookie-notice .cn-body > p {
  color: #ffffff;
  line-height: 1.6;
  font-size: 14px;
  margin-bottom: 12px;
}

/* "Auswahl treffen" link — white on navy */
.klaro .cookie-notice .cn-learn-more {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
}

.klaro .cookie-notice .cn-learn-more:hover {
  text-decoration: underline;
}

/* Buttons in notice */
.klaro .cookie-notice .cm-btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 8px 20px;
  font-size: 14px;
  transition: opacity 0.15s ease;
}

.klaro .cookie-notice .cm-btn-success {
  background: var(--accent, #0369a1);
  color: #fff;
}

.klaro .cookie-notice .cm-btn-success:hover {
  opacity: 0.9;
}

.klaro .cookie-notice .cm-btn-danger {
  background: transparent;
  color: var(--dark3, #64748b);
  border: 1px solid var(--light2, #e2e8f0);
}

.klaro .cookie-notice .cm-btn-danger:hover {
  background: var(--light1, #f8fafc);
}

/* --- Consent modal (full dialog) --- */
/* Override Klaro's dark modal with white card to match site design */
.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: #ffffff;
  border-radius: 20px;
}

.klaro .cookie-modal .cm-modal {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
  max-width: 600px;
}

.klaro .cookie-modal .cm-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--light2, #e2e8f0);
}

.klaro .cookie-modal .cm-header .title {
  font-size: 20px !important;
  font-weight: 700;
  color: var(--primary, #0f172a);
  margin-bottom: 8px;
}

.klaro .cookie-modal .cm-header p {
  color: var(--dark2, #334155);
  line-height: 1.6;
  font-size: 14px;
}

.klaro .cookie-modal .cm-body {
  padding: 16px 24px;
}

/* Purpose entries */
.klaro .cookie-modal .cm-purpose .cm-list-title {
  font-weight: 600;
  color: var(--primary, #0f172a);
  font-size: 15px;
}

.klaro .cookie-modal .cm-purpose .cm-list-label .cm-switch .slider {
  background: var(--light2, #e2e8f0);
}

.klaro .cookie-modal .cm-purpose .cm-list-input:checked + .cm-list-label .slider {
  background: var(--accent, #0369a1);
}

/* Service entries (nested) */
.klaro .cookie-modal .cm-service .cm-list-title {
  font-weight: 500;
  color: var(--dark2, #334155);
  font-size: 14px;
}

/* Expandable service list caret */
.klaro .cookie-modal .cm-services .cm-caret a {
  color: var(--accent, #0369a1);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}

/* Footer */
.klaro .cookie-modal .cm-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--light2, #e2e8f0);
}

.klaro .cookie-modal .cm-footer .cm-btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 10px 24px;
  font-size: 14px;
  transition: opacity 0.15s ease;
}

.klaro .cookie-modal .cm-footer .cm-btn-success {
  background: var(--accent, #0369a1);
  color: #fff;
}

.klaro .cookie-modal .cm-footer .cm-btn-success:hover {
  opacity: 0.9;
}

.klaro .cookie-modal .cm-footer .cm-btn-danger {
  background: transparent;
  color: var(--dark3, #64748b);
  border: 1px solid var(--light2, #e2e8f0);
}

.klaro .cookie-modal .cm-footer .cm-btn-danger:hover {
  background: var(--light1, #f8fafc);
}

/* "Realisiert mit Klaro!" — subtle */
.klaro .cookie-modal .cm-powered-by a {
  color: var(--light3, #cbd5e1);
  font-size: 11px;
}

/* Close button */
.klaro .cookie-modal .cm-header .hide {
  border-radius: 999px;
  padding: 4px 8px;
}

/* Close button SVG stroke — dark on white modal */
.klaro .cookie-modal .cm-header .hide svg {
  stroke: var(--dark2, #334155);
}