/* Buttons pill-style */
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn {
  border-radius: 999px !important;
  padding: 0.65rem 1.2rem !important;
  font-weight: 600 !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn-success {
  background: var(--accent) !important;
  color: #000 !important;
  border: none !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn-info {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Immer über Lightbox */
.klaro {
  z-index: 2147483647 !important;
}

/* Klaro Notice unten links */
.klaro .cookie-notice:not(.cookie-modal-notice){
  right: auto !important;
  left: 22px !important;
  bottom: 22px !important;
  top: auto !important;

  width: auto !important;          /* wichtig: nimmt Klaros width:100% raus */
  max-width: 420px !important;
}

/* Mobile: lieber volle Breite mit Rand */
@media (max-width: 520px){
  .klaro .cookie-notice:not(.cookie-modal-notice){
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    max-width: none !important;
  }
}

/* Desktop: Position über Klaro-Variablen */
@media (min-width: 1024px) {
  .klaro {
    --notice-left: 22px;
    --notice-right: auto;
    --notice-bottom: 22px;
    --notice-top: auto;
    --notice-max-width: 420px;
  }
}

/* Banner Glass Look */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: rgba(20, 20, 20, 0.55) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45) !important;
}

/* Text heller */
.klaro .cookie-notice:not(.cookie-modal-notice) p,
.klaro .cookie-notice:not(.cookie-modal-notice) span {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Notice Position unten links (Desktop) */
@media (min-width: 1024px) {
  .klaro {
    --notice-left: 22px;
    --notice-right: auto;
    --notice-bottom: 22px;
    --notice-top: auto;
    --notice-max-width: 420px;
  }
}

/* Gemeinsamer Glass-Card Look */
.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal {
  background: rgba(20, 20, 20, 0.55) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Overlay etwas weicher */
.klaro .cookie-modal {
  background: rgba(0, 0, 0, 0.55) !important;
}

/* Titles / Text */
.klaro .cm-title,
.klaro .cm-header,
.klaro .cm-modal h1,
.klaro .cm-modal h2,
.klaro .cm-modal h3 {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 700 !important;
}

.klaro .cm-description,
.klaro .cm-content,
.klaro .cm-text,
.klaro .cm-modal p,
.klaro .cm-modal span,
.klaro .cookie-notice p,
.klaro .cookie-notice span {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Links */
.klaro a {
  color: var(--accent) !important;
  text-decoration: none !important;
}
.klaro a:hover {
  text-decoration: underline !important;
}

/* Trennlinien / Borders im Modal */
.klaro .cm-list,
.klaro .cm-services,
.klaro .cm-switch-container,
.klaro .cm-purpose,
.klaro .cm-service {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Buttons: pill + premium */
.klaro .cm-btn {
  border-radius: 999px !important;
  padding: 0.65rem 1.2rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.2px !important;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease !important;
}

/* Accept */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept {
  background: var(--accent) !important;
  color: #000 !important;
  border: none !important;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Settings / Info */
.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-secondary {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cm-btn.cm-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* Decline */
.klaro .cm-btn.cm-btn-decline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.klaro .cm-btn.cm-btn-decline:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Close Button im Modal (falls vorhanden) */
.klaro .cm-btn-close,
.klaro .cm-close {
  filter: brightness(1.2);
}

/* Immer über Lightbox */
.klaro {
  z-index: 2147483647 !important;
}
/* =========================================================
   KLARO POSITION FIX — unten links
   ========================================================= */

/* Desktop */
@media (min-width: 1024px) {

  /* Wrapper bestimmt die Position, nicht die Karte! */
  .klaro .cookie-notice-wrapper {
    right: auto !important;
    left: 22px !important;
    bottom: 22px !important;
    top: auto !important;

    width: auto !important;
    max-width: 420px !important;

    display: flex !important;
    justify-content: flex-start !important;
  }

  /* Karte soll nicht wieder full width werden */
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Mobile: wieder normal */
@media (max-width: 1023px) {
  .klaro .cookie-notice-wrapper {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    max-width: none !important;
  }
}