/* ==========================================================================
   consent.css — Einwilligungsbanner
   Farben und Radien wie im uebrigen slube-Design (#074154, #5dc3e6, 15px).
   Alles unter #slube-consent gescoped, damit nichts durchschlaegt.
   ========================================================================== */

#slube-consent[hidden] {
  display: none;
}

/* Kein abdunkelnder Hintergrund: der Container ist durchsichtig und laesst
   Klicks durch, nur die Karte selbst faengt sie ab. Sonst entstuende ueber
   die halbe Seite ein dunkles Band. */
#slube-consent {
  position: fixed;
  z-index: 10000;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

#slube-consent .consent-box {
  pointer-events: auto;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 6px 30px rgba(7, 65, 84, 0.18);
  padding: 26px 26px 22px;
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

#slube-consent .consent-title {
  color: #074154;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}

#slube-consent .consent-text {
  color: #5a7884;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 18px;
}

#slube-consent .consent-text a {
  color: #074154;
  text-decoration: underline;
}

/* ---------- Schaltflaechen ---------- */
#slube-consent .consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#slube-consent button {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 13px 26px;
  border: 2px solid #074154;
  transition: background 0.15s ease, color 0.15s ease;
}

/* "Alle akzeptieren" und "Nur notwendige" sind bewusst gleich gross und
   gleich prominent — eine hervorgehobene Zustimmung waere keine freie
   Einwilligung. */
#slube-consent .consent-btn--primary,
#slube-consent .consent-btn--secondary {
  flex: 1 1 200px;
  font-weight: 600;
}

#slube-consent .consent-btn--primary {
  background: #074154;
  color: #fff;
}

#slube-consent .consent-btn--secondary {
  background: #fff;
  color: #074154;
}

#slube-consent .consent-btn--primary:hover,
#slube-consent .consent-btn--secondary:hover {
  background: #5dc3e6;
  border-color: #5dc3e6;
  color: #074154;
}

#slube-consent .consent-btn--link {
  flex: 1 1 100%;
  background: none;
  border: none;
  padding: 10px 0 0;
  color: #5a7884;
  font-size: 14px;
  text-decoration: underline;
}

#slube-consent .consent-btn--link:hover {
  color: #074154;
}

#slube-consent button:focus-visible {
  outline: 3px solid #5dc3e6;
  outline-offset: 2px;
}

/* ---------- Einstellungen ---------- */
#slube-consent-details[hidden] {
  display: none;
}

#slube-consent-details {
  margin: 20px 0 4px;
  border-top: 1px solid #e6eef1;
  padding-top: 8px;
}

#slube-consent .consent-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #e6eef1;
}

#slube-consent .consent-option input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: #074154;
}

#slube-consent .consent-option-title {
  display: block;
  color: #074154;
  font-weight: 600;
  font-size: 15px;
}

#slube-consent .consent-option-desc {
  display: block;
  color: #5a7884;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 3px;
}

#slube-consent .consent-save {
  margin-top: 16px;
}

@media (max-width: 560px) {
  #slube-consent {
    padding: 0;
  }
  #slube-consent .consent-box {
    border-radius: 15px 15px 0 0;
    padding: 22px 18px;
    max-height: 88vh;
  }
  #slube-consent .consent-btn--primary,
  #slube-consent .consent-btn--secondary {
    flex: 1 1 100%;
  }
}