/* ============================================================
 * Klaro Cookie-Banner — Novella Branding Overrides
 * ------------------------------------------------
 * Lädt NACH klaro.css.
 *
 * BANNER (Notice):
 *   - Floating Card unten zentriert, 16-24px Abstand zu allen Rändern
 *   - max-width: 1024px, gerundet rundherum (12px)
 *   - Buttons (links → rechts):
 *       Einstellungen anpassen  = SECONDARY (Ghost, no border)
 *       Alle ablehnen           = OUTLINE (border)
 *       Alle akzeptieren        = PRIMARY (sage + weißer Text)
 *
 * MODAL:
 *   - Cream-Card, 16px Radius, max-width 720px
 *   - Cleaner Toggle-Switches (kleiner, runder, ohne Shadow-Wölkchen)
 *   - X close: schwarz, Hover icon→sage + BG→light-green (200ms)
 *   - Buttons: Outline (decline) / Secondary (save) / Primary (accept all)
 *
 * Brand-Tokens (matching .nv-btn-* aus webflow CSS):
 *   Primary:    bg #9DBC76 (sage), color white, hover bg #B5CD92
 *   Outline:    transparent, color #112D1D, border #CFD0CC, hover bg #F0F3E7
 *   Secondary:  transparent, color #112D1D, no border, hover bg #F0F3E7
 * ============================================================ */

/* ============================================================
 * 0) Theme-Tokens
 * ============================================================ */
.klaro {
  --font-family: 'Onest', 'Onest Placeholder', system-ui, -apple-system, sans-serif;
  --title-font-family: 'Onest', 'Onest Placeholder', system-ui, sans-serif;
  --border-radius: 12px;
  --font-size: 14px;
  --border-width: 1px;
  --border-style: solid;
}

#klaro,
#klaro * {
  box-sizing: border-box;
}

/* ============================================================
 * 1) NOTICE — Floating Card am unteren Rand
 * ============================================================ */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  /* Card-Positionierung: schwebt mit Abstand */
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%);
  width: calc(100% - 40px) !important;
  max-width: 1024px !important;

  /* Card-Look */
  background-color: #FFFDF7 !important;
  color: #112D1D !important;
  border: 1px solid rgba(17, 45, 29, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 48px rgba(17, 45, 29, 0.16), 0 2px 6px rgba(17, 45, 29, 0.08) !important;
  padding: 0 !important;
  z-index: 9999;
  outline: none !important;
}

/* Focus-Ring der Card auf sage statt browser-default */
.klaro .cookie-notice:not(.cookie-modal-notice):focus-visible {
  outline: 2px solid #9DBC76 !important;
  outline-offset: 4px !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice):focus:not(:focus-visible) {
  outline: none !important;
}

.klaro .cookie-modal .cm-modal:focus,
.klaro .cookie-modal .cm-modal .hide:focus {
  outline: none !important;
}

.klaro .cookie-modal .cm-modal:focus-visible,
.klaro .cookie-modal .cm-modal .hide:focus-visible {
  outline: 2px solid #9DBC76 !important;
  outline-offset: 2px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 22px 26px !important;
  margin: 0 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body strong {
  color: #112D1D !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-title,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body strong:first-child {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #112D1D !important;
  display: block;
  letter-spacing: -0.01em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a:not(.cm-btn):not(.cn-learn-more):not(.cm-link) {
  color: #9DBC76 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 500;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a:not(.cm-btn):not(.cn-learn-more):not(.cm-link):hover {
  color: #7A9858 !important;
}

/* Action-Row: links Einstellungen, rechts Decline + Accept */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 0 !important;
}

/* ============================================================
 * 2) BUTTONS — Primary / Outline / Secondary (Ghost)
 * ============================================================ */
.klaro .cm-btn,
.klaro button.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  font-family: 'Onest', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0;
  box-shadow: none !important;
  min-height: 0;
}

/* PRIMARY = Accept All (sage + white text) */
.klaro .cm-btn-success,
.klaro .cm-btn-success-var,
.klaro .cm-btn-accept-all,
.klaro button.cm-btn-success,
.klaro button.cm-btn-success-var,
.klaro button.cm-btn-accept-all {
  background-color: #9DBC76 !important;
  color: #FFFFFF !important;
  border-color: #9DBC76 !important;
}

.klaro .cm-btn-success:hover,
.klaro .cm-btn-success-var:hover,
.klaro .cm-btn-accept-all:hover {
  background-color: #B5CD92 !important;
  border-color: #B5CD92 !important;
  color: #FFFFFF !important;
}

/* OUTLINE = Decline (mit Border) */
.klaro .cm-btn-decline,
.klaro .cm-btn-danger,
.klaro .cn-decline,
.klaro button.cm-btn-decline,
.klaro button.cm-btn-danger {
  background-color: transparent !important;
  color: #112D1D !important;
  border-color: #CFD0CC !important;
}

.klaro .cm-btn-decline:hover,
.klaro .cm-btn-danger:hover,
.klaro .cn-decline:hover {
  background-color: rgba(157, 188, 118, 0.14) !important;
  border-color: #9DBC76 !important;
  color: #112D1D !important;
}

/* SECONDARY = Settings / Save (Ghost — no border, hover light-green) */
.klaro .cm-btn-info,
.klaro .cn-learn-more,
.klaro button.cm-btn-info,
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice a.cn-learn-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  font-family: 'Onest', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  color: #112D1D !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease !important;
  flex-grow: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
}

.klaro .cm-btn-info:hover,
.klaro .cn-learn-more:hover,
.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-notice a.cn-learn-more:hover,
.klaro button.cm-btn-info:hover {
  /* Matches Style-Guide .nv-btn-outline:hover / .nv-btn-ghost:hover */
  background-color: #F0F3E7 !important;
  color: #112D1D !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

/* Falls "Auswahl speichern" als .cm-btn-accept (statt success) markiert ist */
.klaro .cm-btn-accept:not(.cm-btn-success):not(.cm-btn-accept-all),
.klaro button.cm-btn-accept:not(.cm-btn-success):not(.cm-btn-accept-all) {
  background-color: transparent !important;
  color: #112D1D !important;
  border-color: transparent !important;
}

.klaro .cm-btn-accept:not(.cm-btn-success):not(.cm-btn-accept-all):hover {
  background-color: #F0F3E7 !important;
}

/* Close-X */
.klaro .cm-btn-close,
.klaro button.cm-btn-close {
  background-color: transparent !important;
  color: #112D1D !important;
  border-color: transparent !important;
}

/* ============================================================
 * 3) MODAL — Cream Card
 * ============================================================ */
.klaro .cookie-modal .cm-bg {
  background: rgba(17, 45, 29, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: #FFFDF7 !important;
  color: #1A1F1B !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(17, 45, 29, 0.32) !important;
  border: 1px solid rgba(17, 45, 29, 0.08);
  max-width: 720px !important;
}

.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal h3,
.klaro .cookie-modal ul,
.klaro .cookie-modal li {
  color: #1A1F1B !important;
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2 {
  color: #112D1D !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.klaro .cookie-modal h1 {
  font-size: 24px !important;
}

.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom-color: rgba(17, 45, 29, 0.08) !important;
  padding: 28px 32px 18px !important;
}

.klaro .cookie-modal .cm-modal .cm-body {
  padding: 18px 32px 24px !important;
}

.klaro .cookie-modal .cm-modal .cm-footer {
  border-top-color: rgba(17, 45, 29, 0.08) !important;
  background: transparent !important;
  padding: 20px 32px !important;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* ------------------------------------------------------------
 * Modal-Footer — Style-Swap + Reorder
 *
 * Im großen Modal verwenden wir das Primary-Action-Pattern:
 *   LINKS:  "Alle ablehnen"     → Ghost (no border, hover light-green)
 *   MITTE:  "Auswahl speichern" → Outline (border)
 *   RECHTS: "Alle akzeptieren"  → Primary (sage)
 *
 * Im Banner bleibt alles wie es ist (Decline = Outline, Settings = Ghost).
 * Spezifität (5+ Klassen) schlägt die globalen .cm-btn-* Regeln oben.
 * ------------------------------------------------------------ */

/* "Alle ablehnen" → ganz links + Ghost-Style */
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cn-decline,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-decline,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-danger {
  margin-right: auto !important;
  background-color: transparent !important;
  color: #112D1D !important;
  border-color: transparent !important;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cn-decline:hover,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-decline:hover,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-danger:hover {
  background-color: #F0F3E7 !important;
  color: #112D1D !important;
  border-color: transparent !important;
}

/* "Auswahl speichern" → Outline-Style (Border) */
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept:not(.cm-btn-accept-all),
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-info {
  background-color: transparent !important;
  color: #112D1D !important;
  border-color: #CFD0CC !important;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept:not(.cm-btn-accept-all):hover,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-info:hover {
  background-color: rgba(157, 188, 118, 0.14) !important;
  border-color: #9DBC76 !important;
  color: #112D1D !important;
}

.klaro .cookie-modal a:not(.cm-btn) {
  color: #9DBC76 !important;
  text-decoration: underline;
}

.klaro .cookie-modal a:not(.cm-btn):hover {
  color: #7A9858 !important;
}

/* ============================================================
 * 4) X CLOSE-BUTTON — schwarz, Hover sage + light-green BG
 * ============================================================ */
.klaro .cookie-modal .cm-modal .hide {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 200ms ease !important;
}

.klaro .cookie-modal .cm-modal .hide svg {
  width: 20px;
  height: 20px;
  stroke: #112D1D !important;
  transition: stroke 200ms ease !important;
}

.klaro .cookie-modal .cm-modal .hide:hover {
  background-color: #F0F3E7 !important;
}

.klaro .cookie-modal .cm-modal .hide:hover svg {
  stroke: #9DBC76 !important;
}

/* ============================================================
 * 5) PURPOSE / SERVICE CARDS
 * ============================================================ */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service {
  background: rgba(157, 188, 118, 0.05);
  border: 1px solid rgba(17, 45, 29, 0.08);
  border-radius: 12px;
  padding: 14px 16px 14px 76px !important;
  margin-bottom: 10px;
}

/* "Alle Services deaktivieren" Toggle-All-Element ausblenden.
   Klaro labelt das als "deaktivieren", aber das Toggle ist tatsächlich
   ein "Master-Toggle" (ON wenn alle Services ON sind) → widersprüchlich.
   User haben Footer-Buttons "Alle ablehnen" / "Alle akzeptieren" für
   denselben Zweck → das Toggle ist redundant + verwirrend. */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all {
  display: none !important;
}

.klaro .cookie-modal .cm-modal .cm-body li.cm-purpose .purposes,
.klaro .cookie-modal .cm-modal .cm-body li.cm-service .purposes {
  color: #6B7570 !important;
  font-size: 12px !important;
}

.klaro .cookie-modal .cm-modal .cm-body li.cm-purpose span.cm-list-title,
.klaro .cookie-modal .cm-modal .cm-body li.cm-service span.cm-list-title {
  color: #112D1D !important;
  font-weight: 600;
  font-size: 15px;
}

.klaro .cookie-modal .cm-modal .cm-body .cm-list-description {
  color: #4A5550 !important;
  font-size: 13px;
  line-height: 1.5;
  padding-top: 6px !important;
}

.klaro .cookie-modal .cm-modal .cm-body li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body li.cm-purpose span.cm-opt-out {
  color: #7A9858 !important;
  font-weight: 500;
}

/* ============================================================
 * 6) TOGGLE SWITCH — Cleaner & Smaller (Novella-Stil)
 * ============================================================ */

/* Container: reduzierte Klaro-Defaults überschreiben.
   top: <fixed> statt 50% — sonst rutscht der Toggle runter wenn die Card
   expandiert (z.B. nach Klick auf "1 Dienst" werden Services aufgeklappt
   → Card wird höher → 50% Center verschiebt sich). Mit fixem top bleibt
   der Toggle oben verankert, aligned mit dem Titel. */
.klaro .cookie-modal .cm-switch,
.klaro .cookie-notice .cm-switch,
.klaro .context-notice .cm-switch {
  width: 38px !important;
  height: 22px !important;
  position: absolute;
  left: 18px !important;
  top: 16px !important;
  transform: none !important;
}

.klaro .cookie-modal .cm-list-label .cm-switch {
  left: 18px !important;
}

/* Hidden checkbox - dimensions matching new switch */
.klaro .cookie-modal .cm-list-input,
.klaro .cookie-notice .cm-list-input,
.klaro .context-notice .cm-list-input {
  width: 38px !important;
  height: 22px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  margin: 0;
  cursor: pointer;
}

/* Slider (Track) */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider {
  position: absolute;
  inset: 0;
  width: 38px !important;
  height: 22px !important;
  background-color: #CFD0CC !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: background-color 200ms ease !important;
  box-shadow: none !important;
  display: block;
}

/* Thumb */
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before {
  content: "";
  position: absolute;
  top: 3px !important;
  left: 3px !important;
  bottom: auto !important;
  width: 16px !important;
  height: 16px !important;
  background-color: #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 2px rgba(17, 45, 29, 0.18) !important;
  transition: transform 200ms ease, background-color 200ms ease !important;
}

/* Checked state */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #9DBC76 !important;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before {
  transform: translateX(16px) !important;
}

/* Required: grayed-out sage */
.klaro .cm-list-input.required + .cm-list-label .slider,
.klaro .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: #B5CD92 !important;
  opacity: 0.7;
  cursor: not-allowed;
}

/* Half-checked (parent purpose where some services on/off) */
.klaro .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background-color: #9DBC76 !important;
  opacity: 0.6;
}

.klaro .cm-list-input.half-checked:checked + .cm-list-label .slider::before {
  transform: translateX(8px) !important;
}

/* Focus ring */
.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 2px solid #9DBC76;
  outline-offset: 2px;
}

/* Remove Klaro default ghost shadow on focus */
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: none !important;
}

/* Powered-by — hide */
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
  display: none !important;
}

/* ============================================================
 * 7) RESPONSIVE
 * ============================================================ */
@media (max-width: 767px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    width: calc(100% - 24px) !important;
    bottom: 12px !important;
    border-radius: 12px !important;
  }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 18px 18px !important;
  }
  .klaro .cookie-notice .cn-ok {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
  .klaro .cookie-notice .cn-buttons {
    flex-direction: column;
    width: 100%;
  }
  /* Buttons volle Breite — !important + hohe Spezifität nötig,
     weil klaro.css default eine @media (max-width: 384px) Regel hat:
     .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn
     { width: calc(50% - 0.5em); }  — die sonst gewinnt. */
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn,
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn,
  .klaro .cookie-notice .cn-buttons .cm-btn,
  .klaro .cookie-notice .cn-learn-more {
    width: 100% !important;
    justify-content: center !important;
  }
  .klaro .cookie-modal .cm-modal .cm-header,
  .klaro .cookie-modal .cm-modal .cm-body,
  .klaro .cookie-modal .cm-modal .cm-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .klaro .cookie-modal .cm-modal .cm-footer-buttons {
    flex-direction: column !important;
    width: 100%;
  }
  .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
    width: 100% !important;
    justify-content: center;
  }
}

/* ============================================================
 * 8) YouTube Consent Overlay (Embed-Blocker)
 * ============================================================ */
.video-embed-container {
  position: relative;
}

.video-consent-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 45, 29, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: inherit;
  z-index: 2;
  padding: 24px;
}

.video-consent-card {
  background: #FFFDF7;
  color: #1A1F1B;
  border-radius: 16px;
  padding: 28px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(17, 45, 29, 0.08);
}

.video-consent-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(157, 188, 118, 0.18);
  color: #5A7A3F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.video-consent-title {
  font-size: 20px;
  font-weight: 700;
  color: #112D1D;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.video-consent-text {
  font-size: 14px;
  line-height: 1.55;
  color: #4A5550;
  margin: 0 0 20px;
}

.video-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.video-consent-actions .nv-btn {
  flex: 1 1 auto;
  min-width: 140px;
  justify-content: center;
}

@media (max-width: 479px) {
  .video-consent-card { padding: 22px 18px; }
  .video-consent-title { font-size: 18px; }
  .video-consent-actions { flex-direction: column; }
  .video-consent-actions .nv-btn { width: 100%; }
}

/* ============================================================
 * 9) Datenschutz-Inline-Link (Kirbytag (cookies:))
 * ============================================================ */
.legal-rich-text a.legal-cookie-link {
  color: #5A7A3F;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
}

.legal-rich-text a.legal-cookie-link:hover {
  color: #112D1D;
}