/* /assets/klaro/klaro-theme.css */


/* ===============================
   Grundlayout helles Modal
================================ */

.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-notice .cn-body {
  background: #ffffff !important;
  color: #222 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}


/* ===============================
   Alle Texte dunkel erzwingen
================================ */

.klaro,
.klaro * {
  color: inherit;
}

.klaro .cm-title,
.klaro .cm-header,
.klaro .cm-text,
.klaro .cm-description,
.klaro .cm-purpose,
.klaro .cm-services,
.klaro .cm-service,
.klaro .cm-list-title,
.klaro .cm-list-description,
.klaro .cm-service-title,
.klaro .cm-service-description,
.klaro .cm-subtitle,
.klaro .cm-info,
.klaro .cm-powered-by,
.klaro .cm-learnmore,
.klaro .cn-title,
.klaro .cn-text,
.klaro .cn-learnmore {
  color: #222 !important;
}

/* Kleine Zusatzinfos etwas dezenter */
.klaro .cm-subtitle,
.klaro .cm-info {
  color: #555 !important;
}


/* ===============================
   Buttons
================================ */

.klaro .cm-btn,
.klaro .cn-btn {
  border-radius: 6px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease;
}

/* Primärbutton: "Alles akzeptieren" */
.klaro .cm-btn.cm-btn-success,
.klaro .cn-btn.cn-btn-accept {
  background: #1e6bd6 !important;
  border-color: #1e6bd6 !important;
  color: #ffffff !important;
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cn-btn.cn-btn-accept:hover {
  background: #175bb7 !important;
  border-color: #175bb7 !important;
}

/* Sekundärbuttons */
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-info,
.klaro .cn-btn.cn-btn-decline,
.klaro .cn-btn.cn-btn-learnmore {
  background: #e6e6e6 !important;
  border-color: #e6e6e6 !important;
  color: #222 !important;
}

.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cn-btn.cn-btn-decline:hover,
.klaro .cn-btn.cn-btn-learnmore:hover {
  background: #d7d7d7 !important;
  border-color: #d7d7d7 !important;
}


/* ===============================
   Toggle-Bereich dezenter
================================ */

.klaro .cm-toggle-all,
.klaro .cm-toggle {
  filter: saturate(0.9);
}

.klaro .cm-toggle input:checked + .cm-slider {
  background-color: #1e6bd6 !important;
}


/* ===============================
   Trennlinien sauber hellgrau
================================ */

.klaro .cm-section,
.klaro .cm-list-item {
  border-color: #e5e5e5 !important;
}

.klaro .cm-powered-by {
  display: none !important;
}

/* ===============================
   ALLE TEXTE IM KLARO MODAL DUNKEL
================================ */

.klaro .cm-modal,
.klaro .cm-modal * {
  color: #222 !important;
}

/* Überschrift */
.klaro .cm-header .title span {
  color: #111 !important;
}

/* Beschreibung unter Titel */
.klaro .cm-header p span {
  color: #333 !important;
}

/* Purpose Titel (Statistik / Marketing) */
.klaro .cm-list-title {
  color: #222 !important;
  font-weight: 600;
}

/* Service Titel (Google Analytics etc.) */
.klaro .cm-service .cm-list-title {
  color: #222 !important;
  font-weight: 500;
}

/* Kleine Beschreibungen */
.klaro .cm-list-description,
.klaro .cm-service-description,
.klaro .cm-service-description p,
.klaro .cm-purpose > div {
  color: #444 !important;
}

/* "↓ 1 Dienst" */
.klaro .cm-caret a,
.klaro .cm-caret span {
  color: #444 !important;
}

/* Footer */
.klaro .cm-powered-by,
.klaro .cm-powered-by a {
  color: #666 !important;
}

/* ===============================
   Banner-Überschrift kompakter
================================ */

.klaro .cm-header .title {
  font-size: 20px !important;     /* kleiner als Default */
  letter-spacing: 0.2px !important; /* weniger Zeichenabstand */
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

/* Falls die Notice-Variante angezeigt wird */
.klaro .cn-title {
  font-size: 20px !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
}

.klaro .cm-header small {
  font-size: 13px;
  line-height: 1.4;
  display: block;
  color: #555;
}

/* Zusatztext im Modal (klein) */
.klaro .cm-extra-privacy {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #555 !important;
}

.klaro .cm-extra-privacy a {
  color: #1e6bd6 !important;
  text-decoration: underline;
  font-weight: 500;
}