/*
 * Klaro! Theme-Anpassung – quellcoder
 * - Alle Klaro-Screens 680px breit (Desktop), eckige Container, 3px an den Buttons.
 * - Buttons: Schrift "Roboto Slap local" (wie Headings), mehr Padding.
 * - NUR "Alle akzeptieren" orange; Links weiß + underline; Beschreibungstext weiß.
 * Wichtig: Klaro nutzt fuer cm-header/body/footer (0,4,0)-Selektoren
 * (.klaro .cookie-modal .cm-modal .cm-*) – hier gleich spezifisch kontern.
 */
.klaro {
  --font-family: "Roboto local", system-ui, -apple-system, sans-serif;
  --title-font-family: "Roboto Slap local", Georgia, serif;
  --font-size: 14px;
  --border-radius: 3px;

  --dark1: #131C32;
  --dark2: #1E2E54;
  --dark3: #2C3C66;

  --light1: #ffffff;
  --light2: rgba(255,255,255,.55);
  --light3: rgba(255,255,255,.55);

  --green1: #FD961F;  /* NUR: Akzeptieren-Button + aktiver Kippschalter */
  --green2: #ffa645;
  --green3: #131C32;

  --blue1: #2C3C66;
  --blue2: #38507f;

  --button-text-color: #ffffff;
  --box-shadow-color: rgba(0,0,0,.5);
  --white2: #10182b;   /* Kippschalter AUS: Spur */
  --white3: #ffffff;    /* Kippschalter: Knopf */
}

/* ---- Container: 680px, eckig, Rahmen, Schatten ---- */
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-modal-notice,
.klaro .cookie-notice:not(.cookie-modal-notice) {
  max-width: 680px;
  width: calc(100% - 40px);
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

/* ---- Zentriertes Notice-Modal (noticeAsModal) ---- */
.klaro .cookie-modal-notice { padding: 36px 44px 34px; }
.klaro .cookie-modal-notice .cn-body { padding: 0; }
.klaro .cookie-modal-notice .cn-body > p:first-child::before {
  content: "Wir respektieren Ihre Privatsph\00e4re";
  display: block;
  font-family: "Roboto Slap local", Georgia, serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 16px;
}
.klaro .cookie-modal-notice .cn-body > p:first-child { line-height: 1.6; }
.klaro .cookie-modal-notice .cn-ok {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.klaro .cookie-modal-notice .cn-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Einstellungen-Modal: Padding (Klaro-Selektoren mit (0,4,0) kontern) ---- */
.klaro .cookie-modal .cm-modal .cm-header { padding: 34px 40px 18px; padding-right: 40px; }
.klaro .cookie-modal .cm-modal .cm-body   { padding: 24px 40px; }
.klaro .cookie-modal .cm-modal .cm-footer { padding: 22px 40px 30px; }
.klaro .cookie-modal .cm-modal .cm-header .hide { top: 26px; right: 24px; }
.klaro .cookie-modal .cm-modal .cm-purposes .cm-purpose { padding-top: 18px; padding-bottom: 18px; }

/* ---- Buttons: Roboto Slap, mehr Padding, 3px ---- */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-modal-notice .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .context-notice .cm-btn {
  font-family: "Roboto Slap local", Georgia, serif;
  font-weight: 400;
  padding: 14px 28px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.2;
}
.klaro .cookie-modal .cm-footer .cm-footer-buttons { gap: 12px; }

/* NUR "Alle akzeptieren" – Orange, dunkle Schrift */
.klaro .cm-btn.cm-btn-success:not(.cm-btn-accept):not(.cm-btn-info),
.klaro .cm-btn.cm-btn-accept-all {
  background-color: #FD961F;
  color: #131C32;
  font-weight: 500;
}
.klaro .cm-btn.cm-btn-success:not(.cm-btn-accept):not(.cm-btn-info):hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
  background-color: #ffa645;
  color: #131C32;
}

/* "Auswahl speichern" (cm-btn-accept ohne -all) – weiß auf dunklem Blau */
.klaro .cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
  background-color: #1E2E54;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.4);
}
.klaro .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover {
  background-color: #2C3C66;
  color: #ffffff;
}

/* "Einstellungen"-Button (cm-btn-info / lern-more) */
.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-lern-more {
  background-color: #1E2E54;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.4);
}
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cm-btn.cm-btn-lern-more:hover {
  background-color: #2C3C66;
  color: #ffffff;
}

/* "Alle ablehnen" – transparent mit Rahmen */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-danger {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.4);
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover {
  background-color: rgba(255,255,255,.08);
  color: #ffffff;
}

/* ---- Links: immer weiß + unterstrichen, nie orange ---- */
.klaro .cookie-modal a,
.klaro .cookie-modal-notice a,
.klaro .cookie-notice a,
.klaro .context-notice a,
.klaro .cm-link,
.klaro a.cm-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.klaro .cookie-modal a:hover,
.klaro .cookie-modal-notice a:hover,
.klaro .cookie-notice a:hover,
.klaro .context-notice a:hover,
.klaro .cm-link:hover,
.klaro a.cm-link:hover {
  color: #ffffff;
  text-decoration: underline;
}
.klaro .cm-caret,
.klaro .cm-caret a { color: #ffffff; }

/* ---- Beschreibungstexte: weiß statt blau ---- */
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-description,
.klaro .context-notice .cm-list-description {
  color: rgba(255,255,255,.88);
}
.klaro .cookie-modal .purposes,
.klaro .cookie-notice .purposes,
.klaro .cookie-modal li.cm-purpose .purposes {
  color: rgba(255,255,255,.55);
}

/* ---- Kippschalter: Knopf hebt sich klar ab ---- */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  border: 1px solid rgba(255,255,255,.4);
}
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  border-color: #FD961F;
}
.klaro .cm-list-input:checked + .cm-list-label .slider::before {
  background-color: #131C32 !important;
}

/* Titel */
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header .title {
  font-family: "Roboto Slap local", Georgia, serif;
  font-weight: 700;
}