/* ═══ CONSENT-BANNER + MODAL ═══════════════════════════════════════
   DSGVO/TDDDG-konform: Gleichwertige Buttons, keine Dark Patterns,
   externe Skripte (Google Fonts) erst nach Opt-in.
   Eingebunden in allen Seiten: index.html, agb.html, impressum.html, datenschutz.html
   ──────────────────────────────────────────────────────────────── */

:root {
  --c-bg:        #0f1018;
  --c-bg-2:      #12131d;
  --c-border:    rgba(255,255,255,.08);
  --c-accent:    #ef2935;
  --c-accent-l:  #ff4757;
  --c-text:      #e8eaf0;
  --c-mid:       #9aa0b4;
  --c-dim:       #4a5168;
}

/* ── Bottom-Sheet Banner ───────────────────────────────────────── */
.consent-banner {
  position:fixed; left:1.25rem; right:1.25rem; bottom:1.25rem;
  z-index:99000;
  max-width:520px;
  background:rgba(15,16,24,.92);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--c-border);
  border-radius:18px;
  padding:1.4rem 1.5rem 1.25rem;
  box-shadow:0 24px 72px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(239,41,53,.06);
  color:var(--c-text);
  font-family:-apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  transform:translateY(140%); opacity:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.consent-banner.is-open { transform:translateY(0); opacity:1; }
.consent-banner__title {
  display:flex; align-items:center; gap:.55rem;
  font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-accent); margin-bottom:.65rem;
}
.consent-banner__title svg { width:14px; height:14px; }
.consent-banner__text {
  font-size:.86rem; line-height:1.6; color:var(--c-mid);
  margin-bottom:1.1rem;
}
.consent-banner__text a {
  color:var(--c-text); text-decoration:underline; text-underline-offset:3px;
  transition:color .2s;
}
.consent-banner__text a:hover { color:var(--c-accent); }
.consent-banner__actions {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem;
}
.consent-btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:.82rem; font-weight:600;
  padding:.7rem .9rem;
  border-radius:10px; cursor:pointer; border:1px solid transparent;
  background:transparent; color:var(--c-text);
  transition:background .18s, border-color .18s, color .18s, transform .12s;
  text-align:center; line-height:1.2;
}
.consent-btn:hover { transform:translateY(-1px); }
.consent-btn--ghost   { background:rgba(255,255,255,.04); border-color:var(--c-border); color:var(--c-mid); }
.consent-btn--ghost:hover { color:var(--c-text); background:rgba(255,255,255,.07); }
.consent-btn--outline { border-color:var(--c-border); color:var(--c-text); }
.consent-btn--outline:hover { border-color:rgba(255,255,255,.18); }
.consent-btn--solid   { background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.consent-btn--solid:hover { background:var(--c-accent-l); border-color:var(--c-accent-l); }

/* ── Modal (Granulare Einstellungen) ───────────────────────────── */
.consent-modal {
  position:fixed; inset:0; z-index:99500;
  display:flex; align-items:center; justify-content:center;
  padding:1.25rem;
  background:rgba(4,5,9,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.consent-modal.is-open { opacity:1; pointer-events:auto; }
.consent-modal__card {
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:20px;
  width:100%; max-width:560px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 32px 88px -20px rgba(0,0,0,.7);
  padding:1.75rem 1.75rem 1.5rem;
  color:var(--c-text);
  font-family:-apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  transform:scale(.96); transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.consent-modal.is-open .consent-modal__card { transform:scale(1); }
.consent-modal__head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; margin-bottom:.6rem;
}
.consent-modal__title {
  font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:#fff;
}
.consent-modal__close {
  background:none; border:none; color:var(--c-mid); cursor:pointer;
  width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s, color .18s;
}
.consent-modal__close:hover { background:rgba(255,255,255,.06); color:var(--c-text); }
.consent-modal__close svg { width:18px; height:18px; }
.consent-modal__intro {
  font-size:.86rem; color:var(--c-mid); line-height:1.65;
  margin-bottom:1.25rem;
}
.consent-modal__intro a { color:var(--c-text); text-decoration:underline; text-underline-offset:3px; }
.consent-modal__intro a:hover { color:var(--c-accent); }

/* ── Kategorie-Zeile ───────────────────────────────────────────── */
.consent-cat {
  background:var(--c-bg-2);
  border:1px solid var(--c-border);
  border-radius:12px;
  padding:1rem 1.1rem;
  margin-bottom:.7rem;
}
.consent-cat__row {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
}
.consent-cat__name {
  font-size:.95rem; font-weight:600; color:#fff;
}
.consent-cat__badge {
  font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-dim); margin-left:.5rem;
}
.consent-cat__desc {
  margin-top:.5rem;
  font-size:.82rem; line-height:1.6; color:var(--c-mid);
}
.consent-cat__desc strong { color:var(--c-text); font-weight:600; }

/* iOS-Style Toggle */
.consent-toggle {
  position:relative; width:44px; height:24px; flex-shrink:0;
  background:var(--c-dim); border-radius:999px;
  cursor:pointer; transition:background .25s;
}
.consent-toggle::after {
  content:''; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.consent-toggle.is-on { background:var(--c-accent); }
.consent-toggle.is-on::after { transform:translateX(20px); }
.consent-toggle.is-locked { opacity:.45; cursor:not-allowed; }
.consent-toggle input { position:absolute; opacity:0; pointer-events:none; }

/* ── Modal Actions ─────────────────────────────────────────────── */
.consent-modal__actions {
  display:flex; gap:.6rem; flex-wrap:wrap;
  margin-top:1.25rem;
}
.consent-modal__actions .consent-btn {
  flex:1 1 0; min-width:140px; padding:.8rem 1rem;
}

/* ── Mobile-Anpassung ──────────────────────────────────────────── */
@media (max-width:560px) {
  .consent-banner {
    left:.75rem; right:.75rem; bottom:.75rem;
    padding:1.2rem 1.15rem 1rem;
    border-radius:16px;
  }
  .consent-banner__actions { grid-template-columns:1fr; gap:.4rem; }
  .consent-banner__text { font-size:.82rem; }
  .consent-modal { padding:.75rem; }
  .consent-modal__card { padding:1.4rem 1.25rem 1.2rem; border-radius:16px; }
  .consent-modal__actions { flex-direction:column; }
  .consent-modal__actions .consent-btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner, .consent-modal, .consent-modal__card, .consent-btn, .consent-toggle, .consent-toggle::after {
    transition:none;
  }
}