/**
 * Klaro TC-EDV Overrides
 * Muss NACH klaro.min.css geladen werden.
 * Farben aus tailwind.config: TC-Navy #191E36, TC-Red #E2062A.
 *
 * Hinweis: klaroConfig laeuft mit theme: ['dark', 'bottom', 'wide'].
 * Die Basis klaro.min.css liefert fuer 'dark' dunkles Layout, wir
 * ueberschreiben hier auf TC-Navy und TC-Red. !important sichert die
 * Cascade gegen interne klaro-Theme-Selektoren ab.
 */

.klaro,
.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal,
.klaro .context-notice {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-family: 'Inter', sans-serif;
}

/* Consent Notice (Bottom-Banner) — zentrierte Karte, nicht ganze Breite */
.klaro .cookie-notice {
  background: #191E36 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(226, 6, 42, 0.4) !important;
  border-top: 3px solid #E2062A !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
  padding: 1.5rem !important;
  border-radius: 10px !important;
  max-width: 760px !important;
  width: calc(100% - 2rem) !important;
  left: 50% !important;
  right: auto !important;
  bottom: 1.25rem !important;
  transform: translateX(-50%) !important;
}

.klaro .cookie-notice .cn-body {
  margin: 0 !important;
  padding: 0 !important;
  color: #FFFFFF !important;
}

.klaro .cookie-notice .cn-body *,
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body span,
.klaro .cookie-notice .cn-body .description {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
}

.klaro .cookie-notice .cn-body h1,
.klaro .cookie-notice .cn-body h2,
.klaro .cookie-notice .cn-body .title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin: 0 0 0.5rem !important;
}

.klaro .cookie-notice .cn-body a,
.klaro .cookie-modal .cm-modal a {
  color: #FF6B85 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.klaro .cookie-notice .cn-body a:hover,
.klaro .cookie-modal .cm-modal a:hover {
  color: #FFFFFF !important;
}

/* Buttons — Grundform. .cn-ok ist in Klaro 0.7 der Container um die Buttons */
.klaro .cookie-notice .cn-ok,
.klaro .cookie-notice .cn-buttons,
.klaro .cookie-modal .cm-footer-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 0.75rem !important;
  background: transparent !important;
  padding: 0 !important;
}

.klaro button.cm-btn,
.klaro .cn-ok button,
.klaro .cookie-notice button,
.klaro .cookie-modal .cm-btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Primaer-Button "Alle akzeptieren" — nur BUTTONS, nicht der .cn-ok-Container */
.klaro .cookie-notice button.cm-btn-success,
.klaro .cookie-notice button.cm-btn-accept,
.klaro .cookie-notice button.cm-btn-accept-all,
.klaro .cookie-modal button.cm-btn-success,
.klaro .cookie-modal button.cm-btn-accept,
.klaro .cookie-modal button.cm-btn-accept-all {
  background: #E2062A !important;
  color: #FFFFFF !important;
  border-color: #E2062A !important;
}

.klaro .cookie-notice button.cm-btn-success:hover,
.klaro .cookie-notice button.cm-btn-accept:hover,
.klaro .cookie-notice button.cm-btn-accept-all:hover,
.klaro .cookie-modal button.cm-btn-success:hover,
.klaro .cookie-modal button.cm-btn-accept:hover,
.klaro .cookie-modal button.cm-btn-accept-all:hover {
  background: #B00520 !important;
  border-color: #B00520 !important;
  color: #FFFFFF !important;
}

/* Sekundaer-Button "Ablehnen" */
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-decline,
.klaro button.cm-btn-danger,
.klaro button.cm-btn-decline {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-decline:hover,
.klaro button.cm-btn-danger:hover,
.klaro button.cm-btn-decline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #FFFFFF !important;
}

/* Info-/Learn-more-Link "Auswahl anpassen" — als Text-Link, ohne Rahmen */
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice a.cn-learn-more,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-learn-more,
.klaro .cookie-notice button.cm-btn-info,
.klaro .cookie-notice button.cm-btn-learn-more {
  background: transparent !important;
  color: #FF6B85 !important;
  border: none !important;
  padding: 0.625rem 0.5rem !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 500 !important;
}

.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-notice a.cn-learn-more:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-learn-more:hover,
.klaro .cookie-notice button.cm-btn-info:hover,
.klaro .cookie-notice button.cm-btn-learn-more:hover {
  color: #FFFFFF !important;
  background: transparent !important;
  border: none !important;
}

/* Modal (nach Klick auf "Auswahl anpassen") */
.klaro .cookie-modal .cm-bg {
  background: rgba(25, 30, 54, 0.75) !important;
}

.klaro .cookie-modal .cm-modal {
  background: #FFFFFF !important;
  color: #191E36 !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2,
.klaro .cookie-modal .cm-modal .title {
  color: #191E36 !important;
  font-weight: 700 !important;
}

/* Body-Text + Service-Beschreibungen: dunkles Navy statt hellgrau */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-body p,
.klaro .cookie-modal .cm-body span,
.klaro .cookie-modal .cm-body li,
.klaro .cookie-modal .cm-purpose p,
.klaro .cookie-modal .cm-purpose span,
.klaro .cookie-modal .cm-service p,
.klaro .cookie-modal .cm-service span,
.klaro .cookie-modal .purpose-description,
.klaro .cookie-modal .cm-purpose-description {
  color: #2D3748 !important;
}

/* Service- und Purpose-Titel (Marketing & Werbung, Google Ads usw.) */
.klaro .cookie-modal .cm-list-title,
.klaro .cookie-modal .cm-service-title,
.klaro .cookie-modal .cm-purpose .cm-list-title,
.klaro .cookie-modal .cm-services .cm-list-title,
.klaro .cookie-modal .cm-list-label .cm-list-title {
  color: #191E36 !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

/* "Zweck: ..." Beschreibung unter Services */
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-service .cm-list-description {
  color: #4A5568 !important;
  font-size: 0.8125rem !important;
}

/* "↑ 1 Dienst" Toggle-Link */
.klaro .cookie-modal .cm-purpose-show-all,
.klaro .cookie-modal button.cm-purpose-show-all {
  color: #E2062A !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 500 !important;
}

/* Sekundaer-Button "Auswahl speichern" — dezenter als primaeres Rot */
.klaro .cookie-modal button.cm-btn-accept,
.klaro .cookie-modal button.cm-btn-success:not(.cm-btn-accept-all) {
  background: #FFFFFF !important;
  color: #191E36 !important;
  border: 1px solid #191E36 !important;
}

.klaro .cookie-modal button.cm-btn-accept:hover,
.klaro .cookie-modal button.cm-btn-success:not(.cm-btn-accept-all):hover {
  background: #191E36 !important;
  color: #FFFFFF !important;
  border-color: #191E36 !important;
}

/* Primaer-Button "Alle akzeptieren" bleibt TC-Rot (Override zum obigen not()-Selektor) */
.klaro .cookie-modal button.cm-btn-accept-all,
.klaro .cookie-modal button.cm-btn-accept.cm-btn-accept-all {
  background: #E2062A !important;
  color: #FFFFFF !important;
  border: 1px solid #E2062A !important;
}

.klaro .cookie-modal button.cm-btn-accept-all:hover {
  background: #B00520 !important;
  border-color: #B00520 !important;
}

/* Links im Modal (Datenschutzerklaerung etc.) */
.klaro .cookie-modal .cm-modal a,
.klaro .cookie-modal .cm-body a,
.klaro .cookie-modal .cm-header a {
  color: #E2062A !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.klaro .cookie-modal .cm-modal a:hover {
  color: #B00520 !important;
}

/* Toggle-Switches */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background: #E2062A !important;
}

.klaro .cm-list-label .slider {
  background: #CBD5E0 !important;
}

.klaro .cm-list-label .slider::before {
  background: #FFFFFF !important;
}

/* Service-Zeilen im Modal */
.klaro .cookie-modal .cm-services .cm-service,
.klaro .cookie-modal .cm-purposes .cm-purpose {
  border-bottom: 1px solid #E2E8F0 !important;
}

/* Footer-Link zum Wieder-oeffnen */
.klaro a.cn-learn-more-link {
  color: #E2062A !important;
}

/* Layout: Titel + Text links, Buttons rechts im Banner */
.klaro .cookie-notice.cn-bottom {
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Mobile */
@media (max-width: 640px) {
  .klaro .cookie-notice {
    padding: 1rem !important;
  }

  .klaro .cookie-notice .cn-buttons {
    flex-direction: column !important;
  }

  .klaro .cn-ok,
  .klaro button.cm-btn {
    width: 100% !important;
  }
}