/* ============================================================
   WEB-2B Consent — Gestaltung

   Bewusst unauffaellig und ohne eigene Schrift: Das Banner uebernimmt
   Schriftart und Farben der Seite, soweit das Theme sie als Variablen
   bereitstellt, und faellt sonst auf neutrale Werte zurueck. So passt es
   sich in ein fremdes Projekt ein, ohne dass jemand CSS schreiben muss.

   Anpassen laesst sich alles ueber die Variablen unter .web2b-consent.
   ============================================================ */

.web2b-consent{
  --w2b-grund:#111214;
  --w2b-schrift:#f2f1ee;
  --w2b-leise:#b9b6b0;
  --w2b-linie:rgba(255,255,255,.16);
  --w2b-ja:#b19c83;
  --w2b-ja-schrift:#111214;
  --w2b-breite:min(560px, calc(100vw - 32px));

  position:fixed; z-index:99999;
  left:16px; right:16px; bottom:16px;
  display:flex; justify-content:flex-start;
  font-family:inherit;
}

.web2b-consent[hidden]{ display:none; }

.web2b-consent__box{
  width:var(--w2b-breite);
  max-height:calc(100vh - 32px); overflow-y:auto;
  background:var(--w2b-grund); color:var(--w2b-schrift);
  border:1px solid var(--w2b-linie);
  padding:22px clamp(18px, 3vw, 26px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  font-size:15px; line-height:1.55;
}

/* Fenster in der Mitte: dieselbe Box, nur zentriert und mit Abdunklung. */
.web2b-consent--mitte{
  inset:0; left:0; right:0; bottom:0;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
  padding:16px;
}

.web2b-consent__titel{
  margin:0 0 8px; padding:0;
  font-size:17px; line-height:1.3; font-weight:600; color:inherit;
}

.web2b-consent__text{ margin:0 0 14px; color:var(--w2b-leise); }

.web2b-consent__liste{
  margin:0 0 18px; padding:0 0 0 0; list-style:none;
  border-top:1px solid var(--w2b-linie);
}
.web2b-consent__liste li{
  padding:12px 0; border-bottom:1px solid var(--w2b-linie);
  display:grid; gap:2px;
}
.web2b-consent__meta{ font-size:13px; color:var(--w2b-leise); }
.web2b-consent__zweck{ font-size:13px; color:var(--w2b-leise); }

/* Beide Schaltflaechen gleich gross, gleiche Zeile, gleiche Schriftgroesse.
   Das ist keine Geschmacksfrage: Ablehnen muss so leicht erreichbar sein wie
   Annehmen, sonst ist die Einwilligung nicht freiwillig. */
.web2b-consent__knoepfe{ display:flex; gap:10px; flex-wrap:wrap; }
.web2b-consent__btn{
  flex:1 1 180px;
  min-height:46px; padding:12px 18px;
  font:inherit; font-size:14px; font-weight:600; letter-spacing:.04em;
  cursor:pointer; border:1px solid var(--w2b-linie); border-radius:0;
  background:transparent; color:var(--w2b-schrift);
  transition:background .2s, color .2s, border-color .2s;
}
.web2b-consent__btn:hover{ background:rgba(255,255,255,.08); }
.web2b-consent__btn--ja{
  background:var(--w2b-ja); color:var(--w2b-ja-schrift); border-color:var(--w2b-ja);
}
.web2b-consent__btn--ja:hover{ filter:brightness(1.08); background:var(--w2b-ja); }
.web2b-consent__btn:focus-visible,
.web2b-consent-link:focus-visible{ outline:2px solid var(--w2b-ja); outline-offset:2px; }

.web2b-consent__fuss{ margin:14px 0 0; font-size:13px; color:var(--w2b-leise); }
.web2b-consent__fuss a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* Der Widerrufs-Knopf im Fliesstext sieht aus wie ein Verweis, ist aber ein
   button — er loest eine Handlung aus und fuehrt nirgendwohin. */
.web2b-consent-link{
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

@media (max-width:480px){
  .web2b-consent{ left:8px; right:8px; bottom:8px; }
  .web2b-consent__box{ --w2b-breite:calc(100vw - 16px); padding:18px 16px; }
  .web2b-consent__btn{ flex:1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
  .web2b-consent__btn{ transition:none; }
}