/* ============================================================
   consent.css — DSGVO/TDDDG-Consent-Manager für sachmangelrecht.de
   Eigenbau, v2-Designsprache. Gleichwertige Buttons (kein Dark Pattern).
   ============================================================ */
:root{
  --c-accent:#4d7cfe; --c-accent-h:#3b6df0; --c-ink:#0f172a; --c-muted:#475569;
  --c-border:#e2e8f0; --c-bg:#ffffff; --c-soft:#f1f5f9;
}

/* --- Banner (erste Ebene): nicht-blockierende Box unten --------- */
.sm-consent{
  position:fixed; z-index:2147483646; left:1rem; right:1rem; bottom:1rem;
  max-width:560px; margin:0 auto; background:var(--c-bg); color:var(--c-ink);
  border:1px solid var(--c-border); border-radius:1rem;
  box-shadow:0 20px 50px -12px rgba(15,23,42,.35);
  padding:1.5rem; font-family:"Inter",-apple-system,sans-serif; font-size:.95rem; line-height:1.6;
}
.sm-consent[hidden]{ display:none; }
.sm-consent h2{ font-size:1.1rem; font-weight:800; margin:0 0 .5rem; display:flex; align-items:center; gap:.55rem; }
.sm-consent h2 i{ color:var(--c-accent); }
.sm-consent p{ margin:0 0 1rem; color:var(--c-muted); }
.sm-consent a{ color:var(--c-accent); text-decoration:underline; }
.sm-consent .sm-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.sm-consent .sm-actions .sm-btn-wide{ grid-column:1 / -1; }

/* --- Buttons: gleichwertig (gleiche Größe/Gewicht) ------------- */
.sm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:.6rem; font-weight:700; font-size:.93rem;
  cursor:pointer; border:1.5px solid transparent; text-align:center; width:100%;
  transition:all .15s ease; font-family:inherit;
}
.sm-btn-primary{ background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.sm-btn-primary:hover{ background:var(--c-accent-h); border-color:var(--c-accent-h); }
.sm-btn-secondary{ background:var(--c-ink); color:#fff; border-color:var(--c-ink); }
.sm-btn-secondary:hover{ background:#1e293b; }
.sm-btn-ghost{ background:#fff; color:var(--c-ink); border-color:var(--c-border); }
.sm-btn-ghost:hover{ background:var(--c-soft); }

/* --- Modal (Einstellungen) ------------------------------------ */
.sm-modal{ position:fixed; inset:0; z-index:2147483647; display:flex; align-items:center; justify-content:center; padding:1rem; }
.sm-modal[hidden]{ display:none; }
.sm-modal-overlay{ position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
.sm-modal-box{
  position:relative; background:var(--c-bg); color:var(--c-ink); width:100%; max-width:640px;
  max-height:88vh; overflow-y:auto; border-radius:1rem; box-shadow:0 25px 60px -15px rgba(15,23,42,.5);
  font-family:"Inter",sans-serif;
}
.sm-modal-head{ padding:1.5rem 1.5rem 1rem; border-bottom:1px solid var(--c-border); position:sticky; top:0; background:var(--c-bg); }
.sm-modal-head h2{ font-size:1.25rem; font-weight:800; margin:0; display:flex; align-items:center; gap:.55rem; }
.sm-modal-head h2 i{ color:var(--c-accent); }
.sm-modal-head p{ margin:.5rem 0 0; color:var(--c-muted); font-size:.9rem; line-height:1.6; }
.sm-modal-body{ padding:1.25rem 1.5rem; }
.sm-modal-foot{ padding:1rem 1.5rem 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.sm-modal-foot .sm-btn-wide{ grid-column:1 / -1; }

/* --- Kategorie-Zeilen ----------------------------------------- */
.sm-cat{ border:1px solid var(--c-border); border-radius:.75rem; padding:1rem 1.15rem; margin-bottom:.85rem; }
.sm-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.sm-cat-head strong{ font-size:1rem; color:var(--c-ink); }
.sm-cat p{ margin:.55rem 0 0; color:var(--c-muted); font-size:.86rem; line-height:1.6; }
.sm-cat .sm-legal{ display:block; margin-top:.4rem; font-size:.78rem; color:#94a3b8; }

/* Toggle-Switch */
.sm-switch{ position:relative; width:46px; height:26px; flex-shrink:0; }
.sm-switch input{ opacity:0; width:0; height:0; position:absolute; }
.sm-slider{ position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:.2s; cursor:pointer; }
.sm-slider::before{ content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.sm-switch input:checked + .sm-slider{ background:var(--c-accent); }
.sm-switch input:checked + .sm-slider::before{ transform:translateX(20px); }
.sm-switch input:disabled + .sm-slider{ background:var(--c-accent); opacity:.55; cursor:not-allowed; }

/* --- Mobil ---------------------------------------------------- */
@media (max-width:560px){
  .sm-consent{ left:.5rem; right:.5rem; bottom:.5rem; padding:1.25rem; }
  .sm-consent .sm-actions{ grid-template-columns:1fr; }
  .sm-modal-foot{ grid-template-columns:1fr; }
}
/* Footer-Trigger-Link */
.sm-consent-trigger{ cursor:pointer; }