/* ============================================================
   KÖRPERLOTSEN – Klaro Cookie Banner Override (Liquid)
   Pill-Buttons, weiche Schatten, abgerundet, Manrope.
   Selektoren basieren auf Klaro v0.7.
   ============================================================ */

/* --- Banner-Wrapper (Notice) --- */
.klaro .cookie-notice {
  background-color: var(--color-petrol) !important;
  color: var(--color-offwhite) !important;
  border: 1px solid color-mix(in oklab, var(--color-offwhite) 10%, transparent) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-signature) !important;
  font-family: var(--font-sans) !important;
  padding: var(--space-6) var(--space-8) !important;
  margin: var(--space-4) !important;
  max-width: 1180px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: var(--space-4) !important;
}

/* --- Banner-Text --- */
.klaro .cookie-notice .cn-body {
  font-family: var(--font-sans) !important;
}

.klaro .cookie-notice .notice-title,
.klaro .cookie-notice .cn-title {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-offwhite) !important;
  margin-bottom: var(--space-2) !important;
}

.klaro .cookie-notice .notice-description {
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  color: color-mix(in oklab, var(--color-offwhite) 78%, transparent) !important;
  line-height: 1.55 !important;
}

/* --- Banner-Buttons (Wrapper) --- */
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  gap: var(--space-2) !important;
  flex-wrap: wrap !important;
  margin-top: var(--space-4) !important;
}

/* --- Alle Buttons: Pill-Base --- */
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast) !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
}

/* --- "Alle akzeptieren" = Primary (Mint) --- */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success {
  background-color: var(--color-mint) !important;
  color: var(--color-offwhite) !important;
  border-color: var(--color-mint) !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover {
  background-color: color-mix(
    in oklab,
    var(--color-mint) 88%,
    white
  ) !important;
  transform: translateY(-1px) !important;
}

/* --- "Ablehnen" / "Auswahl" = Outline (Off-white) --- */
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-accept-selected {
  background-color: transparent !important;
  color: var(--color-offwhite) !important;
  border-color: color-mix(
    in oklab,
    var(--color-offwhite) 30%,
    transparent
  ) !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-selected:hover {
  background-color: color-mix(
    in oklab,
    var(--color-offwhite) 12%,
    transparent
  ) !important;
  border-color: var(--color-offwhite) !important;
  transform: translateY(-1px) !important;
}

/* --- "Mehr erfahren" Link --- */
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice a {
  color: var(--color-offwhite) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: color-mix(
    in oklab,
    var(--color-offwhite) 40%,
    transparent
  ) !important;
}

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

/* --- Modal --- */
.klaro .cookie-modal {
  font-family: var(--font-sans) !important;
}

.klaro .cookie-modal .cm-modal {
  background-color: var(--color-offwhite) !important;
  color: var(--color-petrol) !important;
  border-radius: var(--radius) !important;
  border: 1px solid color-mix(in oklab, var(--color-petrol) 10%, transparent) !important;
  box-shadow: var(--shadow-signature) !important;
}

.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom: 1px solid
    color-mix(in oklab, var(--color-petrol) 14%, transparent) !important;
  background-color: transparent !important;
  padding: var(--space-6) var(--space-8) !important;
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h2 {
  font-family: var(--font-sans) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--color-petrol) !important;
}

.klaro .cookie-modal .cm-modal .cm-body {
  padding: var(--space-6) var(--space-8) !important;
}

.klaro .cookie-modal .cm-modal .cm-footer {
  border-top: 1px solid
    color-mix(in oklab, var(--color-petrol) 14%, transparent) !important;
  padding: var(--space-6) var(--space-8) !important;
  background-color: transparent !important;
}

/* Modal-Buttons in light surface — passe Farben an */
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-accept-selected {
  color: var(--color-petrol) !important;
  border-color: color-mix(
    in oklab,
    var(--color-petrol) 30%,
    transparent
  ) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-selected:hover {
  background-color: color-mix(
    in oklab,
    var(--color-petrol) 8%,
    transparent
  ) !important;
  border-color: var(--color-petrol) !important;
}

/* --- Toggle/Switch --- */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--color-mint) !important;
}

.klaro .cookie-modal .cm-list-input + .cm-list-label .slider {
  border-radius: 999px !important;
}

.klaro .cookie-modal .cm-list-input + .cm-list-label .slider:before {
  border-radius: 999px !important;
}

/* --- Service-Titel im Modal --- */
.klaro .cookie-modal .cm-service .cm-service-title {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--color-petrol) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

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

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