/* Klaro Cookie-Banner - Zwergenparty Custom Styling */
/* Option 2: Subtil mit hellgrauem Hintergrund */

/* ========================================
   NOTICE (Stufe 1 - einfaches Banner)
   ======================================== */

/* Notice-Box - Hellgrau, gut lesbar */
.klaro .cookie-notice {
  background-color: #D1D5DB !important;
  border: 1px solid #9CA3AF !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
  padding: 1.5rem !important;
  border-radius: 0.5rem !important;
}

/* Notice Text - Dunkelgrau, gut lesbar */
.klaro .cookie-notice p,
.klaro .cn-body p {
  color: #1F2937 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin-bottom: 1rem !important;
}

/* Notice Links */
.klaro .cookie-notice a {
  color: #DC2626 !important;
  text-decoration: underline !important;
}

/* Button-Container - Flexbox für Reihenfolge */
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* Notice Buttons - untereinander, volle Breite */
.klaro .cookie-notice button,
.klaro .cookie-notice a.cn-learn-more,
.klaro .cn-buttons button {
  display: block !important;
  width: 100% !important;
  border-radius: 0.375rem !important;
  padding: 0.625rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  margin: 0.5rem 0 !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* "Alle akzeptieren" Button - ROT (Option 2 - Test) */
.klaro .cookie-notice button.cm-btn-success,
button.cm-btn.cm-btn-success {
  background-color: #DC2626 !important;
  border: 2px solid #DC2626 !important;
  color: white !important;
  order: 1 !important;
}

.klaro .cookie-notice button.cm-btn-success:hover,
button.cm-btn.cm-btn-success:hover {
  background-color: #B91C1C !important;
  border-color: #B91C1C !important;
}

/* "Alle ablehnen" Button - GRAU OUTLINE */
.klaro .cookie-notice button.cm-btn-danger,
.klaro .cookie-notice button.cn-decline,
button.cm-btn.cm-btn-danger.cn-decline {
  background-color: transparent !important;
  border: 2px solid #6B7280 !important;
  color: #1F2937 !important;
  order: 2 !important;
}

.klaro .cookie-notice button.cm-btn-danger:hover,
button.cm-btn.cm-btn-danger:hover {
  background-color: #F3F4F6 !important;
  border-color: #1F2937 !important;
}

/* "Anpassen" Link - GRAU OUTLINE */
.klaro .cookie-notice a.cn-learn-more,
a.cm-link.cn-learn-more {
  background-color: transparent !important;
  border: 2px solid #6B7280 !important;
  color: #1F2937 !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 0.375rem !important;
  font-weight: 600 !important;
  order: 3 !important;
}

.klaro .cookie-notice a.cn-learn-more:hover,
a.cm-link.cn-learn-more:hover {
  background-color: #F3F4F6 !important;
  border-color: #1F2937 !important;
}

/* ========================================
   MODAL (Stufe 2 - Details)
   ======================================== */

/* Modal-Hintergrund (Overlay) */
.klaro .cm-bg {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Modal-Box selbst - Deutlich dunkles Grau */
.klaro .cm-modal {
  background-color: #D1D5DB !important;
  border: 1px solid #9CA3AF !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Überschrift/Titel */
.klaro .title,
.klaro .cm-header h1 {
  color: #1F2937 !important;
  font-weight: 700 !important;
}

/* Text in normalem Grau */
.klaro .cm-header p,
.klaro .cm-body p,
.klaro .cm-footer p,
.klaro p {
  color: #1F2937 !important;
}

/* Links in Rot */
.klaro a {
  color: #DC2626 !important;
}

.klaro a:hover {
  color: #B91C1C !important;
  text-decoration: underline !important;
}

/* Button-Container */
.klaro .cm-footer,
.klaro .cm-btn-group {
  border-top: 1px solid #E5E7EB !important;
  padding-top: 1rem !important;
}

/* Alle Buttons - Basis */
.klaro button,
.klaro .cm-btn {
  border-radius: 0.375rem !important;
  padding: 0.625rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

/* Primary Button: "Ausgewählte akzeptieren" - ROT (Option 2 - Test) */
.klaro button.cm-btn.cm-btn-success,
.klaro .cm-btn-success {
  background-color: #DC2626 !important;
  border: 2px solid #DC2626 !important;
  color: white !important;
}

.klaro button.cm-btn.cm-btn-success:hover,
.klaro .cm-btn-success:hover {
  background-color: #B91C1C !important;
  border-color: #B91C1C !important;
}

/* "Alle ablehnen" Button in Grau Outline */
.klaro button.cm-btn.cm-btn-danger,
.klaro .cm-btn-danger {
  background-color: transparent !important;
  border: 2px solid #6B7280 !important;
  color: #1F2937 !important;
}

.klaro button.cm-btn.cm-btn-danger:hover,
.klaro .cm-btn-danger:hover {
  background-color: #F3F4F6 !important;
  border-color: #1F2937 !important;
}

/* Toggle-Switch - Rot statt Grün */
.klaro .slider {
  background-color: #E5E7EB !important;
}

.klaro input:checked + label .slider,
.klaro .slider.active {
  background-color: #DC2626 !important;
}

/* "Essential" Toggle (disabled) - Grau statt Grün */
.klaro input:disabled + label .slider,
.klaro input[disabled] + label .slider,
.klaro .cm-list-input.required + label .slider {
  background-color: #9CA3AF !important;
  opacity: 0.7 !important;
}

/* Service-Namen */
.klaro .cm-list-label,
.klaro .cm-app-label {
  color: #1F2937 !important;
  font-weight: 600 !important;
}

/* Service-Beschreibungen */
.klaro .cm-list-description,
.klaro .cm-app-description {
  color: #6B7280 !important;
  font-size: 0.875rem !important;
}

/* "Powered by" ausblenden */
.klaro .cn-powered-by,
.klaro .cm-powered-by {
  display: none !important;
}

/* Service-Details Link */
.klaro .cm-list-description a,
.klaro .cm-app-title button {
  color: #DC2626 !important;
  text-decoration: none !important;
}

.klaro .cm-list-description a:hover {
  text-decoration: underline !important;
}