/**
 * klaro-custom.css — Design-Anpassung von Klaro an die CI der Webinar-LP.
 * Lädt NACH klaro.css. Nutzt Klaros eigene CSS-Variablen wo möglich (robuster gegen
 * Updates der Bibliothek), ergänzt gezielt harte Overrides für Layout/Button-Gleichgewicht.
 */

/* ============================================================
   FARB-/FONT-VARIABLEN — auf die Seiten-CI gemappt
============================================================ */
.klaro {
  --dark1: #0F1F14;                     /* Haupt-Hintergrund (Balken + Modal) */
  --dark2: #16301F;                     /* Ränder, Footer-Trenner, Modal-Header */
  --dark3: rgba(255, 255, 255, 0.55);   /* gedämpfter Text */
  --light1: #ffffff;                    /* Haupttext auf dunklem Grund */
  --light2: rgba(221, 177, 78, 0.2);    /* dezente Trennlinien */
  --light3: rgba(255, 255, 255, 0.5);
  --green1: #DDB14E;                    /* Links, Akzent */
  --green2: #DDB14E;                    /* aktive Schalter */
  --green3: #E8C166;                    /* Fokus-Ring */
  --white2: rgba(255, 255, 255, 0.15);
  --white3: rgba(255, 255, 255, 0.3);
  --button-text-color: #0a1f18;
  --border-radius: 10px;
  --border-width: 1px;
  --border-style: solid;
  --font-family: 'Inter', sans-serif;
  --title-font-family: 'Poppins', sans-serif;
  --font-size: 14px;
}

/* ============================================================
   BANNER — dezenter Balken über die volle Breite, unten
   (Klaro zeigt ab 1024px sonst eine kleine Ecken-Box — das wollen wir nicht)
============================================================ */
@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35) !important;
  }
}
.klaro .cookie-notice:not(.cookie-modal-notice) {
  border-top: 1px solid rgba(221, 177, 78, 0.25);
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px 24px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  font-size: 14px;
  line-height: 1.55;
}

/* ============================================================
   BUTTONS — "Akzeptieren" und "Ablehnen" gleichwertig
   (gleiche Größe, gleiches Gewicht, gleiche Ebene — Pflicht)
============================================================ */
/* !important nötig: Klaro injiziert zur Laufzeit zusätzlich sein eigenes Default-CSS
   inline (nach unseren <link>-Stylesheets) — bei gleicher Selektor-Spezifität würde das
   sonst je nach Ladereihenfolge unsere Farben/Ränder wieder überschreiben. */
.klaro .cm-btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  min-height: 44px !important;
  line-height: 1.2 !important;
  transition: transform 0.15s ease, background 0.15s ease;
}
.klaro .cm-btn:hover { transform: translateY(-1px); }

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-danger {
  border: 2px solid #DDB14E !important;
}
.klaro .cm-btn.cm-btn-success {
  background-color: #DDB14E !important;
  color: #0a1f18 !important;
}
.klaro .cm-btn.cm-btn-success:hover { background-color: #e8c166 !important; }

.klaro .cm-btn.cm-btn-danger {
  background-color: transparent !important;
  color: #DDB14E !important;
}
.klaro .cm-btn.cm-btn-danger:hover { background-color: rgba(221, 177, 78, 0.1) !important; }

.klaro .cn-learn-more,
.klaro .cm-link {
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: underline;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.klaro .cn-learn-more:hover { color: #DDB14E !important; }

/* ============================================================
   EINSTELLUNGEN-MODAL — leicht helleres Panel, abgerundet
============================================================ */
.klaro .cookie-modal .cm-modal.cm-klaro {
  border: 1px solid rgba(221, 177, 78, 0.25) !important;
  border-radius: 16px !important;
  background-color: #16301F !important;
}
@media (min-width: 660px) {
  .klaro .cookie-modal .cm-modal.cm-klaro { border-radius: 16px !important; }
}
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
  border-color: rgba(221, 177, 78, 0.2) !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-success-var {
  background-color: #DDB14E !important;
  color: #0a1f18 !important;
}