/**
 * ASCENSUS Corporate-Design-Override fuer Klaro
 * Nach klaro.css einbinden, damit diese Regeln die Standardfarben ueberschreiben.
 *
 * Klaro steuert seine Farben groesstenteils ueber CSS-Variablen im .klaro-Scope
 * -- deshalb setzen wir die Variablen direkt, statt jede einzelne Klasse
 * zu ueberschreiben.
 */

.klaro {
  --font-family: 'Inter', system-ui, sans-serif;
  --title-font-family: 'Inter', system-ui, sans-serif;

  /* Flaeche des Banners/Modals (Off-White statt Standard-Dunkelgrau) */
  --dark1: #F5F3EE;
  /* Textfarbe auf dieser Flaeche (Anthrazit statt Hellgrau) */
  --light1: #232323;

  /* Primaerfarbe: "Alle akzeptieren", Links, aktive Schalter */
  --green1: #556B4E;
  --green2: #44573f;
  --green3: #B59A5D;

  /* "Einstellungen"-Button (nur im Modal-Notice-Modus sichtbar) */
  --blue1: #B59A5D;

  /* Textfarbe auf farbigen Buttons */
  --button-text-color: #F5F3EE;

  /* Kantiger Look, passend zum restlichen Corporate Design (keine runden Ecken) */
  --border-radius: 0;
  --border-width: 1px;
  --border-style: solid;
}

/* Dunkles, zum CD passendes Overlay hinter dem zentrierten Fenster */
.klaro .cm-bg {
  background: rgba(35, 35, 35, .6) !important;
}

/* Fenster selbst: dezenter Rahmen statt Schatten-only, etwas mehr Luft */
.klaro .cookie-notice.cookie-modal-notice,
.klaro .cookie-modal .cm-modal.cm-klaro {
  border: 1px solid #556B4E;
  box-shadow: 0 20px 60px -20px rgba(35, 35, 35, .45);
  max-width: 460px;
}

/* Ueberschrift im Banner: Stil wie die h2 auf der restlichen Website */
.klaro .cookie-notice h2,
.klaro .cookie-modal .cm-modal h1 {
  color: #556B4E;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1.05rem;
}

/* ================================================================
   KLEINES BANNER (unten rechts, erster Kontakt)
   Reihenfolge: links Ablehnen (wie Link gestaltet) -- mittig Okay
   (prominent) -- rechts Einstellungen (wie bisher, als Link)
   ================================================================ */

/* cn-buttons hat keine eigene Optik mehr, seine Kinder (Ablehnen + Okay)
   werden direkte Flex-Kinder von .cn-ok -- dadurch koennen wir alle drei
   Elemente (Einstellungen-Link, Ablehnen, Okay) frei anordnen.
   !important noetig, da Klaros eigene Basis-Regeln hier hoeher
   spezifiziert sind (z. B. ".cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons"). */
.klaro .cookie-notice .cn-buttons {
  display: contents !important;
}
.klaro .cookie-notice .cn-ok {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 1em;
}

/* Reihenfolge: Ablehnen -- Einstellungen -- Okay (rechts, prominent).
   Okay wird per margin-left:auto an den rechten Rand gedrueckt -- das
   funktioniert unabhaengig davon, welche justify-content-Regel gewinnt. */
.klaro .cookie-notice .cn-decline {
  order: 1;
}
.klaro .cookie-notice .cn-learn-more {
  order: 2;
  flex: none;
}
.klaro .cookie-notice .cm-btn.cm-btn-success {
  order: 3;
  margin-left: auto !important;
}

/* "Okay" -- Hauptaktion, klar hervorgehoben */
.klaro .cookie-notice .cm-btn.cm-btn-success {
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85em 1.1em;
}

/* "Ablehnen" -- exakt wie der Einstellungen-Link: reiner Text, keine Box */
.klaro .cookie-notice .cn-decline.cm-btn-danger {
  background: transparent !important;
  border: none !important;
  color: #556B4E !important;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  padding: .4em 0;
  cursor: pointer;
}
.klaro .cookie-notice .cn-decline.cm-btn-danger:hover {
  text-decoration: underline;
}

/* ================================================================
   GROSSES FENSTER (Detail-Auswahl "Datenschutzeinstellungen")
   ================================================================ */

/* "Einstellungen"-Link im Fliesstext oben (falls sichtbar) */
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: transparent !important;
  color: #B59A5D !important;
  border: 1px solid rgba(181, 154, 93, .4);
}

/* Ablehnen im grossen Fenster bleibt ein dezenter Outline-Button */
.klaro .cookie-modal .cm-btn.cm-btn-decline {
  background-color: transparent !important;
  color: #556B4E !important;
  border: 1px solid rgba(85, 107, 78, .35);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Eine Reihe: Ablehnen links, Alle akzeptieren mittig, Auswahl akzeptieren rechts */
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: .6em;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-danger {
  order: 1;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept-all {
  order: 2;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept {
  order: 3;
  background-color: transparent !important;
  background-image: none !important;
  color: #556B4E !important;
  border: 1px solid rgba(85, 107, 78, .35);
  font-weight: 500;
}

/* Toggle-Schalter im Detail-Bereich */
.klaro .slider {
  background-color: #d8d3c7;
}