/* =========================================================================
   Einwilligungsbanner.

   Milchglas über dem Inhalt: halbdurchsichtige Fläche plus backdrop-filter.
   Wo der Filter fehlt, greift eine kräftigere Füllung als Rückfall, damit
   der Text in jedem Fall lesbar bleibt.
   ========================================================================= */

.cv-eb{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:flex-end; justify-content:center;
  padding:20px;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
}
.cv-eb[hidden]{ display:none; }

.cv-eb-schleier{
  position:absolute; inset:0;
  background:rgba(21,12,44,.34);
  animation:cv-eb-ein .28s ease forwards;
}

.cv-eb-karte{
  position:relative;
  width:100%; max-width:560px;
  padding:30px 30px 24px;
  border-radius:26px;
  /* Rückfall zuerst, danach die durchsichtige Fassung */
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 60px rgba(21,12,44,.22);
  animation:cv-eb-auf .34s cubic-bezier(.2,.9,.25,1) forwards;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .cv-eb-karte{
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(26px) saturate(170%);
    backdrop-filter:blur(26px) saturate(170%);
  }
  .cv-eb-schleier{
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
}

@keyframes cv-eb-ein{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cv-eb-auf{
  from{ opacity:0; transform:translateY(22px) scale(.985); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .cv-eb-karte, .cv-eb-schleier{ animation:none; }
}

/* ------------------------------------------------------------- Kopfbereich */

.cv-eb-marke{
  display:inline-block;
  font-size:11px; font-weight:800; letter-spacing:.09em;
  color:#4E9BD4;
}
.cv-eb-titel{
  margin:10px 0 0;
  font-family:'Sora', system-ui, sans-serif;
  font-size:23px; font-weight:800; color:#150C2C; line-height:1.25;
  text-wrap:balance;
}
.cv-eb-text{
  margin:12px 0 0;
  font-size:14px; line-height:1.65; color:#3B3550;
}

/* ---------------------------------------------------------------- Gruppen */

.cv-eb-gruppen{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }

.cv-eb-gruppe{
  background:rgba(255,255,255,.55);
  border-radius:16px;
  padding:15px 17px;
}
@supports (backdrop-filter: blur(1px)){
  .cv-eb-gruppe{ background:rgba(255,255,255,.42); }
}

.cv-eb-gruppe-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.cv-eb-gruppe-titel{
  font-size:14px; font-weight:800; color:#150C2C;
}
.cv-eb-fest{
  font-size:11px; font-weight:700; color:#6B6483;
  background:rgba(21,12,44,.07);
  padding:4px 10px; border-radius:999px;
  white-space:nowrap;
}
.cv-eb-gruppe-text{
  margin:7px 0 0;
  font-size:13px; line-height:1.6; color:#5C5570;
}

/* Schalter. Der Haken bleibt bedienbar, liegt aber unsichtbar darüber. */
.cv-eb-schalter{ position:relative; flex-shrink:0; width:46px; height:26px; cursor:pointer; }
.cv-eb-schalter input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer; z-index:2;
}
.cv-eb-bahn{
  position:absolute; inset:0;
  background:rgba(21,12,44,.18);
  border-radius:999px;
  transition:background .2s ease;
}
.cv-eb-bahn::after{
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:999px; background:#fff;
  transition:transform .2s cubic-bezier(.2,.9,.25,1);
}
.cv-eb-schalter input:checked + .cv-eb-bahn{ background:#4E9BD4; }
.cv-eb-schalter input:checked + .cv-eb-bahn::after{ transform:translateX(20px); }
.cv-eb-schalter input:focus-visible + .cv-eb-bahn{ outline:2px solid #150C2C; outline-offset:2px; }

/* ---------------------------------------------------------------- Knöpfe */

.cv-eb-knoepfe{
  margin-top:22px;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;
}
.cv-eb-knopf{
  height:50px; padding:0 14px;
  border:none; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; text-wrap:balance; line-height:1.2;
  transition:background .16s ease;
}

.cv-eb-knopf:focus-visible{ outline:2px solid #150C2C; outline-offset:2px; }

/* Ablehnen und Zustimmen sind gleich groß und gleich prominent. */
.cv-eb-ablehnen{ background:rgba(21,12,44,.08); color:#150C2C; }
.cv-eb-ablehnen:hover{ background:rgba(21,12,44,.13); }
.cv-eb-auswahl{ background:rgba(21,12,44,.08); color:#150C2C; }
.cv-eb-auswahl:hover{ background:rgba(21,12,44,.13); }
.cv-eb-zustimmen{ background:#150C2C; color:#fff; }
.cv-eb-zustimmen:hover{ background:#241847; }

/* --------------------------------------------------------------- Fußzeile */

.cv-eb-fuss{
  margin-top:16px;
  display:flex; gap:18px; justify-content:center;
}
.cv-eb-fuss a{
  font-size:12px; font-weight:600; color:#6B6483; text-decoration:none;
}
.cv-eb-fuss a:hover{ color:#150C2C; }

/* Punkt in der Rechtszeile der Fußzeile */
.cv-eb-widerruf-link{
  color:#8B84A3; font-size:12px; font-weight:700; cursor:pointer;
}
.cv-eb-widerruf-link:hover{ color:#fff; }

/* ---------------------------------------------------------------- Schmal */

@media (max-width:620px){
  .cv-eb{ padding:12px; }
  .cv-eb-karte{ padding:24px 20px 20px; border-radius:22px; }
  .cv-eb-titel{ font-size:20px; }
  .cv-eb-knoepfe{ grid-template-columns:1fr; }
  .cv-eb-zustimmen{ order:-1; }
}