/*
 * Custom CSS für Klaro!
 * Passt das Design an das "red thread"-Branding an.
 * Dieses CSS muss NACH der originalen klaro.css eingebunden werden.
 */

:root {
  /*
   * Hauptfarben überschreiben
   */
  --dark1: #f0f0f0;    /* Heller Hintergrund für das Banner */
  --light1: #333333;   /* Dunkler Text für gute Lesbarkeit */
  
  /* Akzentfarben für Buttons und Links */
  --green1: #d9534f;   /* Hauptfarbe: Ein warmes Rot, passend zum Logo */
  --green2: #d9534f;   /* Zweitrangige Akzentfarbe */
  --blue1: #337ab7;    /* Alternativer Blau-Ton für neutrale Links */
  
  /* Farben für den Schieberegler (Slider) */
  --white2: #cccccc;   /* Hintergrund des ausgeschalteten Sliders */
  --white3: #ffffff;   /* Farbe des Slider-Knopfs */

  /*
   * Design-Elemente überschreiben
   */
  --border-radius: 8px; /* Stärkere Abrundung für das Banner und die Buttons */
  --border-style: none; /* Keine Ränder */
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.1); /* Sanfterer Schatten */

  /*
   * Schriftarten
   */
  --font-family: 'Helvetica Neue', 'Arial', sans-serif;
  --title-font-family: 'Helvetica Neue', 'Arial', sans-serif;
}

/*
 * Anpassungen für den Modal-Hintergrund (halbtransparent)
 */
.klaro .cookie-modal .cm-bg {
  background: rgba(240, 240, 240, 0.8);
}

/*
 * Anpassung des Banners für mobile Geräte
 */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  /* Sicherstellen, dass das Banner auf Mobilgeräten gut aussieht */
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 1rem;
}

/*
 * Anpassungen für Buttons
 */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
  /* Abstand zwischen den Buttons auf Mobilgeräten */
  margin-right: 0.5em;
  margin-top: 0.5em;
}

.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  /* Button-Farben anpassen */
  background-color: var(--dark1);
  color: var(--light1);
  border: 1px solid #ccc;
  font-weight: 600;
  box-shadow: none; /* Standard-Schatten entfernen */
}

/* Erfolgs-Button (z. B. "Das ist ok") */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var {
  background-color: var(--green1) !important;
  color: #ffffff;
  border-color: var(--green1) !important;
}

/* Schließen-Button (z. B. "Ich lehne ab") */
.klaro .cm-btn.cm-btn-close {
  background-color: transparent !important;
  color: var(--light1) !important;
  border-color: #ccc !important;
}

/*
 * Link-Farbe anpassen
 */
.klaro a {
  color: var(--green1);
}