/**
 * klaro-custom.css - Design-Anpassung von Klaro an die CI der RDG Landingpage.
 * Laedt NACH klaro.css. Nutzt Klaros eigene CSS-Variablen wo moeglich, ergaenzt
 * gezielt Overrides fuer helles Layout und gleichwertige Buttons.
 */

/* ============================================================
   FARB- UND FONT-VARIABLEN, auf die Seiten-CI gemappt
   Klaro ist dunkel gedacht: "dark" = Hintergrund, "light" = Text.
   Wir drehen das auf ein helles Panel mit dunkler Schrift.
============================================================ */
.klaro {
  --dark1: #ffffff;                      /* Panel-Hintergrund */
  --dark2: #F7F5EF;                      /* Modal-Header, Trenner */
  --dark3: #5c675f;                      /* gedaempfter Text */
  --light1: #141a17;                     /* Haupttext */
  --light2: #e5e3db;                     /* Trennlinien */
  --light3: #5c675f;
  --green1: #567E52;                     /* Links, Akzent */
  --green2: #567E52;                     /* aktive Schalter */
  --green3: #41613D;                     /* Fokus-Ring */
  --white1: #ffffff;
  --white2: #e5e3db;
  --white3: #cfcbc0;
  --button-text-color: #ffffff;
  --border-radius: 12px;
  --border-width: 1px;
  --border-style: solid;
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --title-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-size: 14px;
}

/* ============================================================
   BANNER: IMMER am unteren Bildrand, volle Breite, auf ALLEN Geraeten.
   Klaro positioniert je nach Breite unterschiedlich (unten, Ecke, oben).
   Diese Regel gilt ohne Media Query und erzwingt "unten" ueberall.
============================================================ */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #141a17 !important;
  border-top: 1px solid #e5e3db !important;
  box-shadow: 0 -8px 30px rgba(15, 42, 34, 0.12) !important;
  z-index: 40 !important;
}
.klaro .cookie-notice .cn-body {
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px 20px !important;
}
.klaro .cookie-notice .cn-body p {
  color: #141a17 !important;
  font-size: 14.5px;
  line-height: 1.5;
}
.klaro .cookie-notice .cn-body a,
.klaro .cookie-modal a {
  color: #41613D !important;
  text-decoration: underline;
}

/* ============================================================
   BUTTONS: Akzeptieren und Ablehnen gleich gross und gleich sichtbar
============================================================ */
.klaro .cookie-notice .cn-buttons button,
.klaro .cookie-modal .cm-btn {
  font-family: var(--font-family) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 11px 18px !important;
  border-radius: 11px !important;
  min-height: 44px;
  cursor: pointer;
}
/* Akzeptieren: gruen, wie der Seiten-CTA */
.klaro .cm-btn.cm-btn-success,
.klaro .cookie-notice .cn-buttons .cm-btn-success {
  background: #567E52 !important;
  color: #ffffff !important;
  border: 1px solid #567E52 !important;
}
.klaro .cm-btn.cm-btn-success:hover {
  background: #41613D !important;
}
/* Ablehnen: gleich gross, weiss mit Rahmen. Nicht versteckt, nicht kleiner. */
.klaro .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cn-buttons .cm-btn-danger {
  background: #ffffff !important;
  color: #141a17 !important;
  border: 1px solid #cfcbc0 !important;
}
.klaro .cm-btn.cm-btn-danger:hover {
  background: #F7F5EF !important;
}
/* 2) Reihenfolge: Ablehnen links (neutral), Akzeptieren rechts (gruen).
   Beide gleich gross - nur Position und Farbe unterscheiden sich. Das ist der
   Standard, den die oesterreichische Datenschutzbehoerde akzeptiert. */
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap;
}
.klaro .cookie-notice .cn-buttons .cm-btn-danger  { order: 1; }
.klaro .cookie-notice .cn-buttons .cm-btn-success { order: 2; }
.klaro .cookie-notice .cn-buttons button {
  flex: 1 1 140px;
}

/* 3) Timing: Banner erst nach 2,5 s einblenden, wenn der Besucher schon liest.
   Klaro rendert sofort; wir halten ihn per CSS unsichtbar und blenden ihn
   weich ein. Bis dahin laeuft nichts, was Zustimmung braeuchte. */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  opacity: 0;
  transform: translateY(16px);
  animation: rdgBannerIn .45s ease-out 2.5s forwards;
}
@keyframes rdgBannerIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    animation-duration: .01s;
    animation-delay: 1.5s;
  }
}

/* Einstellungen-Link im Balken */
.klaro .cookie-notice .cn-learn-more {
  color: #41613D !important;
  font-weight: 600;
}

/* ============================================================
   MODAL (Einstellungen)
============================================================ */
.klaro .cookie-modal .cm-modal {
  background: #ffffff !important;
  color: #141a17 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(15, 42, 34, 0.25) !important;
}
.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-footer {
  background: #F7F5EF !important;
  border-color: #e5e3db !important;
}
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-body p,
.klaro .cookie-modal .cm-list-title,
.klaro .cookie-modal .cm-list-description {
  color: #141a17 !important;
}
.klaro .cookie-modal .cm-list-description {
  color: #5c675f !important;
}
/* Schalter. Klaro setzt beim Einschalten die Klasse "active" auf den Slider,
   die Checkbox ist kein Geschwister-Element. Deshalb beide Wege abdecken. */
.klaro .cm-switch .slider {
  background-color: #cfcbc0 !important;
}
.klaro .cm-switch .slider.active,
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: #567E52 !important;
}
.klaro .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 0 0 3px #DCE7D9 !important;
}
.klaro .cookie-modal .cm-modal .hide {
  color: #5c675f !important;
}