.klaro {
  --font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-size: 14px;
  --green1: #7e1a17;   /* Akzent-/Erfolgsfarbe (Marken-Rot, "Das ist ok" / "Alle akzeptieren") */
  --green2: #9b2b26;   /* Hover-Variante davon */
  --blue1: #6c7178;
  --blue2: #c9645c;
  --dark1: #363b42;    /* DAS graue Grundfarbe für Banner + Modal-Hintergrund */
  --dark2: #4b5058;    /* Grauer "Ablehnen"-Button */
  --dark3: #aeb2b8;
  --light1: #f5f4f2;
  --light2: #626870;
  --light3: #aeb2b8;
  --white2: #4b5058;
  --white3: #5a5f68;
  --border-radius: 8px; /* nur für Modal (Popup), Banner wird unten auf 0 gezwungen */
}

/* Modal (das Popup mit "Datenschutzeinstellungen") bekommt abgerundete Ecken */
.klaro .cookie-notice, .klaro .cookie-modal .cm-modal {
  border-radius: 8px;
}
.klaro .cm-btn {
  border-radius: 8px;
  font-weight: 600;
}

/* ALLE Links innerhalb von Klaro (auch "Datenschutzerklärung", "Einstellungen") in Weiß */
.klaro a,
.klaro .cm-link,
.klaro .cn-learn-more a,
.klaro .cookie-modal a,
.klaro .context-notice a,
.klaro .cookie-notice a {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: underline;
}
.klaro a:hover,
.klaro .cm-link:hover {
  color: #ffffff !important;
  opacity: .85;
}
.klaro a:visited {
  color: #ffffff !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .context-notice .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close {
  color: #f5f4f2;
}

/* "Realisiert mit Klaro!" im Modal-Footer ebenfalls weiß */
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by,
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  color: #ffffff;
}

/* Der Banner unten: volle Breite, KEINE Rundungen, kein schwebendes Kärtchen */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  max-width: none !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .25) !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  margin: 0;              /* Text bleibt links bündig, keine Zentrierung auf breiten Screens */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.4rem 2rem;   /* an eigenen --gutter-Wert angepasst */
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  margin-top: 0;
}