/* ==========================================================================
   Klaro in den Projektfarben.

   Klaro liefert seine Farben durchgängig als var(--name, fallback) aus, wir
   müssen sie also nur auf .klaro definieren. Wird nach assets/vendor/klaro/
   klaro.css eingebunden.

   Bewusste Entscheidung bei den Buttons: „Alle ablehnen" ist optisch genauso
   kräftig wie „Alle akzeptieren". Ein grauer, kleiner Ablehnen-Button macht
   die Einwilligung angreifbar.
   ========================================================================== */

.klaro {
  /* Schrift */
  --font-family:       var(--font-sans);
  --title-font-family: var(--font-sans);
  --font-size:         15px;

  /* Rahmen */
  --border-radius: 14px;
  --border-width:  1px;
  --border-style:  solid;

  /* Dunkle Flächen und Text (Hinweis und Modal stehen auf Ink) */
  --dark1: #10202E;
  --dark2: #1B3448;
  --dark3: #7E93A6;

  /* Helle Töne auf dunklem Grund */
  --light1: #FFFFFF;
  --light2: rgba(255, 255, 255, .22);
  --light3: #A9B7C4;

  --white2: #F6F4F0;
  --white3: #EFEBE4;

  /* Primäraktion — Petrol statt Klaro-Grün */
  --green1: #14657F;
  --green2: #1E88A8;
  --green3: rgba(30, 136, 168, .45);

  --blue1: #0D4759;
  --blue2: #FFB020;          /* Links auf dunklem Grund: Amber liest sich gut */

  --button-text-color: #FFFFFF;
  --box-shadow-color:  rgba(16, 32, 46, .28);

  /* Position des Hinweises */
  --notice-position: fixed;
  --notice-bottom:   20px;
  --notice-left:     20px;
  --notice-right:    auto;
  --notice-top:      auto;
  --notice-max-width: 420px;
}

/* --- Hinweis-Box ----------------------------------------------------------- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 12px 40px rgba(16, 32, 46, .30);
  border: 1px solid rgba(255, 255, 255, .12);
}
.klaro .cookie-notice .cn-body {
  padding-top: 0;
}
.klaro .cookie-notice .cn-body p {
  line-height: 1.5;
}
.klaro .cookie-notice .cn-body .cn-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

/* --- Buttons ---------------------------------------------------------------
   Die Selektoren spiegeln bewusst die Spezifität aus klaro.css
   (.klaro .cookie-notice .cm-btn.cm-btn-…). Diese Datei wird danach
   eingebunden, bei gleicher Spezifität gewinnt sie also.

   Die tatsächlichen Klassen sind: Annehmen = .cm-btn-success,
   Ablehnen = .cm-btn-danger (zusätzlich .cn-decline im Hinweis).
   -------------------------------------------------------------------------- */
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  border-radius: var(--r-pill, 999px);
  padding: 11px 22px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  opacity: 1;
  transition: background-color 180ms ease, color 180ms ease;
}

/* Annehmen — Amber mit Ink-Text (Kontrast rund 10:1) */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: var(--c-cta, #FFB020);
  color: var(--c-ink, #10202E);
}
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  background-color: var(--c-cta-hover, #F0A00C);
  color: var(--c-ink, #10202E);
}

/* Ablehnen — gleiche Größe, gleiche Fülle, nur andere Farbe.
   Ein blasser oder kleinerer Ablehnen-Button macht die Einwilligung
   angreifbar, deshalb hier bewusst ebenfalls ein Vollflächen-Button. */
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .context-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cn-decline {
  background-color: #FFFFFF;
  color: var(--c-ink, #10202E);
}
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .context-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover {
  background-color: var(--c-surface-soft-2, #EFEBE4);
  color: var(--c-ink, #10202E);
}

/* Auswahl speichern (im Modal) — Petrol */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: var(--c-brand, #14657F);
  color: #FFFFFF;
}
.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .context-notice .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover {
  background-color: var(--c-brand-light, #1E88A8);
}

/* „Einzeln auswählen" — Textlink, klar erkennbar */
.klaro .cookie-notice .cm-link.cn-learn-more {
  color: var(--c-cta, #FFB020);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Modal ------------------------------------------------------------------ */
.klaro .cookie-modal .cm-modal.cm-klaro {
  border-radius: var(--r-lg, 16px);
}
.klaro .cookie-modal .cm-header h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.klaro .cookie-modal .cm-body ul li.cm-service .cm-list-title,
.klaro .cookie-modal .cm-body ul li.cm-purpose .cm-list-title {
  font-weight: 700;
}
.klaro .cookie-modal .cm-body ul li .cm-list-description {
  line-height: 1.5;
}

/* Schalter in Markenfarbe */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--c-brand-light, #1E88A8);
}
.klaro .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: var(--c-brand, #14657F);
  opacity: .65;
}

/* --- Links ------------------------------------------------------------------- */
.klaro .cookie-notice a,
.klaro .cookie-modal a {
  color: var(--c-cta, #FFB020);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Schmale Bildschirme ------------------------------------------------------ */
@media (max-width: 560px) {
  .klaro {
    --notice-left:  10px;
    --notice-right: 10px;
    --notice-bottom: 10px;
    --notice-max-width: none;
  }
  .klaro .cookie-notice .cn-body .cn-ok { gap: 8px; }
  .klaro .cookie-modal .cm-btn,
  .klaro .cookie-notice .cm-btn { flex: 1 1 auto; }
}

/* --- Auslöser im Seitenfuß ------------------------------------------------------
   Muss genauso auffindbar sein wie die übrigen Rechtslinks daneben — sonst
   ist der Widerruf faktisch schlechter erreichbar als die Zustimmung.
   Deshalb dieselbe Farbe und Größe wie .site-footer a.
   -------------------------------------------------------------------------- */
.consent-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.consent-link:hover { text-decoration: underline; }

.site-footer .consent-link {
  color: rgba(255, 255, 255, .86);
}

/* In Fließtext (z. B. Datenschutzerklärung) als Link erkennbar machen. */
.legal-page .consent-link {
  color: var(--c-link, #0B6BD3);
  text-decoration: underline;
  text-underline-offset: 3px;
}