/* ============================================================
   BundesEnergiePartner — Cookie-/Consent-Banner
   § 25 TDDDG + DSGVO. Gleichwertige Buttons, granular, widerrufbar.
   ============================================================ */

#bep-consent { position: relative; z-index: 2147483000; }

/* Wichtig: das hidden-Attribut MUSS Vorrang vor display:grid/flex haben,
   sonst liegt das Modal als unsichtbares Vollbild-Overlay über der Seite
   und fängt alle Klicks ab. */
.consent-banner[hidden], .consent-modal[hidden] { display: none !important; }

/* ---------- Banner (Ebene 1) ---------- */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  transform: translateX(-50%);
  width: min(720px, calc(100% - 2rem));
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  z-index: 2147483001;
}

.consent-banner__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-navy-900);
  margin: 0 0 var(--space-2);
}

.consent-banner__text {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

.consent-banner__text a { color: var(--color-steel-dark); text-decoration: underline; }

/* Button-Reihe: Akzeptieren und Ablehnen sind GLEICHWERTIG (gleiche Größe). */
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.consent-btn {
  flex: 1 1 auto;
  min-width: 150px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* „Alle akzeptieren“ und „Alle ablehnen“ haben dieselbe Größe & Gewichtung. */
.consent-btn--accept {
  background: var(--color-gold);
  color: var(--color-navy-900);
  border-color: var(--color-gold);
}
.consent-btn--accept:hover { background: var(--color-gold-dark); border-color: var(--color-gold-dark); }

.consent-btn--reject {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}
.consent-btn--reject:hover { background: var(--color-navy-900); border-color: var(--color-navy-900); }

/* „Einstellungen“ ist bewusst untergeordnet (Text-Link), keine Dark-Pattern-Falle. */
.consent-btn--settings {
  flex: 0 0 auto;
  min-width: 0;
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  text-decoration: underline;
  padding: 0.85rem 0.5rem;
}
.consent-btn--settings:hover { color: var(--color-navy-900); }

.consent-btn:focus-visible { outline: 3px solid var(--color-steel); outline-offset: 2px; }

/* ---------- Detail-Dialog (Ebene 2) ---------- */
.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483002;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 18, 38, 0.55);
  overflow-y: auto;
}

.consent-modal__panel {
  width: min(640px, 100%);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.3rem, 3vw, 2rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.consent-modal__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: var(--color-navy-900);
  margin: 0 0 var(--space-3);
}

.consent-modal__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin: 0 0 var(--space-6);
}
.consent-modal__intro a { color: var(--color-steel-dark); text-decoration: underline; }

.consent-cat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-soft);
}
.consent-cat__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-navy-900);
  font-size: var(--text-base);
}
.consent-cat__desc {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin: 0;
}

/* Switch */
.consent-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.consent-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent-switch__track {
  position: absolute; inset: 0; border-radius: var(--radius-full);
  background: var(--color-border); transition: background var(--t-fast); cursor: pointer;
}
.consent-switch__track::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast);
}
.consent-switch input:checked + .consent-switch__track { background: var(--color-gold); }
.consent-switch input:checked + .consent-switch__track::before { transform: translateX(20px); }
.consent-switch input:disabled + .consent-switch__track { background: var(--color-gold-light); cursor: not-allowed; opacity: 0.8; }
.consent-switch input:focus-visible + .consent-switch__track { outline: 3px solid var(--color-steel); outline-offset: 2px; }

.consent-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.consent-modal__actions .consent-btn { flex: 1 1 160px; }

@media (max-width: 560px) {
  .consent-actions { flex-direction: column; align-items: stretch; }
  .consent-btn, .consent-btn--settings { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-btn, .consent-switch__track, .consent-switch__track::before { transition: none; }
}