/* ═══════════════════════════════════════════════════════════════════
   LouisArtsStudio — Consent Manager
   Eigenstaendig, ohne Abhaengigkeiten. Nutzt die Design-Tokens der
   Hauptseite (--bg/--cream/--red), faellt auf die --gal-* Tokens der
   Kundengalerie und zuletzt auf feste Werte zurueck.
   ═══════════════════════════════════════════════════════════════════ */

.las-consent{
  --c-bg:     var(--bg,      var(--gal-bg,      #0e0d0c));
  --c-fg:     var(--cream,   var(--gal-fg,      #ede4d2));
  --c-dim:    var(--cream-dim,  var(--gal-fg-dim,  rgba(237,228,210,.62)));
  --c-mute:   var(--cream-mute, var(--gal-fg-mute, rgba(237,228,210,.35)));
  --c-line:   var(--line,        var(--gal-line,   rgba(237,228,210,.10)));
  --c-line-s: var(--line-strong, var(--gal-line-s, rgba(237,228,210,.22)));
  --c-red:    var(--red,     var(--gal-red,     #8B1A1A));
  --c-red-hi: #a82020;
  --c-body:   var(--font-body, var(--gal-brand-font, 'Plus Jakarta Sans', system-ui, sans-serif));
  --c-disp:   var(--font-display, 'Bebas Neue', var(--c-body));

  position:fixed; z-index:1200;
  left:24px; right:24px; bottom:24px;
  max-width:560px;
  margin-inline:auto;
  font-family:var(--c-body);
  color:var(--c-fg);
  background:rgba(14,13,12,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:.5px solid var(--c-line-s);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:26px 26px 22px;
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
}
.las-consent[data-shown]{ opacity:1; transform:none; }
.las-consent[hidden]{ display:none !important; }

/* ── Kopf ──────────────────────────────────────────────────────── */
.las-consent h2{
  margin:0 0 12px;
  font-family:var(--c-disp);
  font-weight:400;
  font-size:19px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c-fg);
  line-height:1.2;
}
.las-consent p{
  margin:0 0 18px;
  font-size:13px;
  font-weight:300;
  line-height:1.65;
  color:var(--c-dim);
}
.las-consent a{ color:var(--c-fg); text-decoration:underline; text-underline-offset:3px; }
.las-consent a:hover{ color:var(--c-red-hi); }

/* ── Buttons: Ablehnen und Akzeptieren sind identisch ──────────── */
.las-consent__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}
.las-consent__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:48px;
  padding:15px 18px;
  background:var(--c-red); color:var(--c-fg);
  border:none; border-radius:0;
  font-family:var(--c-body); font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease;
}
.las-consent__btn:hover{ background:var(--c-red-hi); }
.las-consent__btn:focus-visible{ outline:2px solid var(--c-fg); outline-offset:3px; }

/* ── Fusszeile mit Links ───────────────────────────────────────── */
.las-consent__links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 14px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-mute);
}
.las-consent__links button,
.las-consent__links a{
  background:none; border:none; padding:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--c-mute); text-decoration:none;
  cursor:pointer;
  border-bottom:.5px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.las-consent__links button:hover,
.las-consent__links a:hover{ color:var(--c-fg); border-bottom-color:var(--c-line-s); }
.las-consent__links button:focus-visible,
.las-consent__links a:focus-visible{ outline:2px solid var(--c-fg); outline-offset:3px; }
.las-consent__sep{ color:var(--c-line-s); }

/* ── Einstellungen ─────────────────────────────────────────────── */
.las-consent__panel{ margin:0 0 18px; border-top:.5px solid var(--c-line); }
.las-consent__panel[hidden]{ display:none; }

.las-consent__cat{ border-bottom:.5px solid var(--c-line); padding:16px 0; }
.las-consent__cat-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.las-consent__cat-title{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c-fg); font-weight:500;
}
.las-consent__cat-desc{
  margin:8px 0 0; font-size:12px; font-weight:300; line-height:1.6;
  color:var(--c-dim);
}
.las-consent__svc{
  margin:10px 0 0; padding:10px 12px;
  background:rgba(237,228,210,.03);
  border-left:1.5px solid var(--c-line-s);
  font-size:11px; font-weight:300; line-height:1.6; color:var(--c-mute);
}
.las-consent__svc b{ display:block; color:var(--c-dim); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:10px; margin-bottom:4px; }

/* Schalter */
.las-consent__switch{ flex:0 0 auto; display:inline-flex; align-items:center; cursor:pointer; }
.las-consent__switch input{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.las-consent__track{
  display:block; width:42px; height:22px; border-radius:999px;
  background:rgba(237,228,210,.10);
  border:.5px solid var(--c-line-s);
  position:relative; transition:background .3s ease, border-color .3s ease;
}
.las-consent__track::after{
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--c-mute);
  transition:transform .3s ease, background .3s ease;
}
.las-consent__switch input:checked + .las-consent__track{ background:var(--c-red); border-color:var(--c-red); }
.las-consent__switch input:checked + .las-consent__track::after{ transform:translateX(20px); background:var(--c-fg); }
.las-consent__switch input:focus-visible + .las-consent__track{ outline:2px solid var(--c-fg); outline-offset:3px; }
.las-consent__switch input:disabled + .las-consent__track{ opacity:.55; cursor:not-allowed; }
.las-consent__switch input:disabled{ cursor:not-allowed; }

/* ── Klick-zum-Laden Platzhalter fuer externe Medien ───────────── */
.las-embed{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center;
  width:100%; aspect-ratio:16/9;
  padding:28px 22px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(139,26,26,.14), transparent 62%),
    var(--bg-2, var(--gal-bg, #161413));
  border:.5px solid var(--line, rgba(237,228,210,.10));
  color:var(--cream, #ede4d2);
  font-family:var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.las-embed__label{
  font-family:var(--font-display, 'Bebas Neue', sans-serif);
  font-size:15px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cream, #ede4d2);
}
.las-embed__text{
  max-width:42ch; margin:0;
  font-size:12px; font-weight:300; line-height:1.65;
  color:var(--cream-dim, rgba(237,228,210,.62));
}
.las-embed__text a{ color:var(--cream, #ede4d2); text-decoration:underline; text-underline-offset:3px; }
.las-embed__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:13px 28px;
  background:var(--red, #8B1A1A); color:var(--cream, #ede4d2);
  border:none; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  transition:background .3s ease;
}
.las-embed__btn:hover{ background:#a82020; }
.las-embed__btn:focus-visible{ outline:2px solid var(--cream, #ede4d2); outline-offset:3px; }
.las-embed__always{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-mute, rgba(237,228,210,.35));
  cursor:pointer;
}
.las-embed__always input{ accent-color:var(--red, #8B1A1A); width:14px; height:14px; cursor:pointer; }

/* ── Mobil ─────────────────────────────────────────────────────── */
@media (max-width:560px){
  .las-consent{ left:0; right:0; bottom:0; max-width:none; padding:22px 18px 18px; border-left:none; border-right:none; border-bottom:none; }
  .las-consent h2{ font-size:17px; }
  .las-consent__actions{ grid-template-columns:1fr; }
  .las-consent__links{ font-size:10px; }
  .las-embed{ aspect-ratio:auto; min-height:230px; }
}

@media (prefers-reduced-motion:reduce){
  .las-consent{ transition:none; opacity:1; transform:none; }
  .las-consent__btn, .las-consent__track, .las-consent__track::after{ transition:none; }
}