/* Klaro brand overrides — Editorial Luxury Light Theme.
 * Bone/cream background, near-black text, deep emerald CTA, generous rounding.
 * Loads AFTER klaro.min.css and overrides the default tokens.
 */

/* === Klaro CSS Custom Properties (v0.7) === */
.klaro {
  --light1: #ffffff; /* Banner background — clean white */
  --light2: #fbf9f4; /* Modal/card background */
  --light3: #f7f4ed; /* Elevated surface */
  --dark1: #1a1a1a; /* Primary text */
  --dark2: #4a4641; /* Secondary text */
  --dark3: #7a746c; /* Tertiary text */
  --green1: #1f4d3f; /* Primary (accept) button — emerald */
  --green2: #143a2d; /* Primary button hover */
  --green3: #1f4d3f;
  --red1: rgba(31, 77, 63, 0.06);
  --red2: rgba(31, 77, 63, 0.1);
  --red3: #4a4641;
  --blue1: #1f4d3f;
  --blue2: #143a2d;
  --blue3: #1f4d3f;
  --button-text-color: #ffffff;
  --title-color: #1a1a1a;
  --text-color: #4a4641;
  --border-radius: 14px;
  --font-family:
    "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-size: 14.5px;
  --title-font-size: 16px;
}

/* === Notice (bottom bar) — editorial card === */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #ffffff !important;
  border: 1px solid #e5e0d2 !important;
  border-radius: 18px !important;
  box-shadow:
    0 20px 50px rgba(48, 38, 22, 0.1),
    0 2px 8px rgba(48, 38, 22, 0.05);
  font-family:
    "Inter Variable",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  max-width: 760px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  bottom: 24px !important;
  padding: 22px 26px;
}

.klaro .cookie-notice .cn-body {
  margin: 0;
}

.klaro .cookie-notice .cn-body p {
  color: #4a4641 !important;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.klaro .cookie-notice .cn-body h2,
.klaro .cookie-notice .cn-body strong {
  color: #1a1a1a !important;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

.klaro .cookie-notice .cn-body a,
.klaro .cookie-notice .cn-learn-more {
  color: #1f4d3f !important;
  text-decoration: none;
  border-bottom: 1px solid #a8895c;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.klaro .cookie-notice .cn-body a:hover,
.klaro .cookie-notice .cn-learn-more:hover {
  color: #143a2d !important;
  border-bottom-color: #1f4d3f;
}

/* === Buttons === */
.klaro .cm-btn,
.klaro .cookie-notice .cn-buttons button {
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 20px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  letter-spacing: 0.005em;
  min-height: 44px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    transform 0.15s;
}

/* Primary — "Alle akzeptieren" — deep emerald */
.klaro .cm-btn-success,
.klaro .cookie-notice .cn-ok .cm-btn-accept-all,
.klaro .cookie-notice .cn-ok .cm-btn-success {
  background: #1f4d3f !important;
  color: #ffffff !important;
  border-color: #1f4d3f !important;
}
.klaro .cm-btn-success:hover,
.klaro .cookie-notice .cn-ok .cm-btn-accept-all:hover,
.klaro .cookie-notice .cn-ok .cm-btn-success:hover {
  background: #143a2d !important;
  border-color: #143a2d !important;
  transform: translateY(-1px);
}

/* Secondary — "Ablehnen" — ghost outline */
.klaro .cm-btn-danger,
.klaro .cm-btn-decline,
.klaro .cookie-notice .cn-decline {
  background: transparent !important;
  color: #1a1a1a !important;
  border-color: #cfc8b7 !important;
}
.klaro .cm-btn-danger:hover,
.klaro .cm-btn-decline:hover,
.klaro .cookie-notice .cn-decline:hover {
  background: #fbf9f4 !important;
  color: #1f4d3f !important;
  border-color: #1f4d3f !important;
}

/* Tertiary — "Einstellungen anpassen" link */
.klaro .cm-btn-info,
.klaro .cookie-notice .cn-learn-more {
  background: transparent !important;
  color: #1f4d3f !important;
  border-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.klaro .cookie-notice .cn-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* === Modal (full settings) === */
.klaro .cookie-modal .cm-modal {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-radius: 18px !important;
  border: 1px solid #e5e0d2;
  box-shadow: 0 40px 100px rgba(48, 38, 22, 0.18);
  font-family:
    "Inter Variable",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2 {
  color: #1a1a1a !important;
  font-family: "Playfair Display Variable", "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.klaro .cookie-modal .cm-header p,
.klaro .cookie-modal .cm-body p,
.klaro .cookie-modal .cm-purposes p {
  color: #4a4641 !important;
}

.klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal .cm-service {
  background: #fbf9f4 !important;
  border: 1px solid #e5e0d2 !important;
  border-radius: 10px !important;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.klaro .cookie-modal .cm-purpose .cm-list-title,
.klaro .cookie-modal .cm-service .cm-list-title {
  color: #1a1a1a !important;
  font-weight: 600;
}

.klaro .cookie-modal .cm-purpose .cm-list-description,
.klaro .cookie-modal .cm-service .cm-list-description {
  color: #7a746c !important;
}

.klaro .cookie-modal .cm-footer {
  border-top: 1px solid #e5e0d2 !important;
  background: transparent !important;
}

.klaro .cookie-modal .cm-footer-buttons .cm-btn {
  margin-left: 8px;
}

.klaro .cookie-modal .cm-powered-by {
  color: #7a746c !important;
  font-size: 12px;
}
.klaro .cookie-modal .cm-powered-by a {
  color: #7a746c !important;
}

/* === Toggle Switches === */
.klaro .cm-list-input + .cm-list-label .slider {
  background: #cfc8b7 !important;
}
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background: #1f4d3f !important;
}
.klaro .cm-list-input + .cm-list-label .slider::before {
  background: #ffffff !important;
}

/* === Mobile === */
@media (max-width: 640px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    transform: none;
    max-width: none;
    padding: 18px 20px;
    border-radius: 16px !important;
  }
  .klaro .cookie-notice .cn-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .klaro .cookie-notice .cn-buttons button {
    width: 100%;
  }
}