/*
 * Brillen Voigt — Einwilligung. Hausfarben aus dem Theme (grund.css), mit eigenen
 * Ersatzwerten, damit die Oberfläche auch ohne Theme lesbar bleibt.
 * Ebenen: Kopf 90, Schublade 89, weißer Eintritt 200. Die Karte liegt mit 150 unter
 * dem Eintritt (erscheint, wenn er aufgeht), der Keks mit 80 unter der Schublade,
 * der Dialog über allem.
 */
.bvew-karte, .bvew-rund, .bvew-huelle{
  --ew-blau:var(--blau,#13376D);
  --ew-gold:var(--gold,#CBB082);
  --ew-text:var(--text,#1F2A38);
  --ew-leise:var(--text-leise,#6B7686);
  --ew-linie:var(--linie,rgba(31,42,56,.10));
  --ew-grund:var(--grund,#FBF7F0);
  --ew-weich:var(--weich,cubic-bezier(.22,.9,.3,1));
  font-family:inherit; color:var(--ew-text); box-sizing:border-box;
}
.bvew-karte *, .bvew-huelle *{ box-sizing:border-box }

/* ------------------------------------------------------------ Karte */
.bvew-karte{
  position:fixed; z-index:150;
  left:max(16px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom));
  width:min(400px, calc(100vw - 32px));
  padding:20px 20px 14px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.9); border-radius:22px;
  box-shadow:0 18px 50px rgba(19,55,109,.16), 0 3px 10px rgba(19,55,109,.06);
  opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--ew-weich), transform .4s var(--ew-weich);
}
.bvew-karte.bvew-da{ opacity:1; transform:none }
.bvew-karte-kopf, .bvew-dialog-kopf{ display:flex; align-items:center; gap:10px }
.bvew-karte h2, .bvew-dialog h2{
  margin:0; font-size:1.1rem; line-height:1.25; font-weight:800; color:var(--ew-blau); letter-spacing:0;
}
.bvew-karte > p{ margin:10px 0 14px; font-size:.9rem; line-height:1.5 }
.bvew-keks{ display:inline-flex; width:30px; height:30px; color:var(--ew-gold); flex:none }
.bvew-keks svg{ width:100%; height:100% }

/* ------------------------------------------------------------ Knöpfe */
/* Gleich groß, gleich gewichtet: Ablehnen ist nicht schwerer als Zustimmen. */
.bvew-knoepfe{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.bvew-knoepfe-drei{ grid-template-columns:repeat(3,1fr) }
.bvew-knopf{
  appearance:none; cursor:pointer; font:inherit; font-weight:700; font-size:.88rem;
  min-height:44px; padding:10px 14px; border-radius:999px;
  border:1.5px solid var(--ew-blau); background:var(--ew-blau); color:#fff;
  transition:transform .2s var(--ew-weich), background .2s, box-shadow .2s;
}
.bvew-knopf:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(19,55,109,.22) }
.bvew-knopf:focus-visible, .bvew-textknopf:focus-visible, .bvew-rund:focus-visible,
.bvew-zu:focus-visible, .bvew-schalter:focus-visible, .bvew-dienst summary:focus-visible{
  outline:3px solid var(--ew-gold); outline-offset:2px;
}
.bvew-textknopf{
  appearance:none; background:none; border:0; cursor:pointer; font:inherit; font-size:.86rem;
  font-weight:700; color:var(--ew-blau); text-decoration:underline; text-underline-offset:3px;
  padding:10px 0 2px; min-height:40px;
}
.bvew-links{ display:flex; gap:14px; margin:6px 0 0; font-size:.78rem }
.bvew-links a{ color:var(--ew-leise) }

/* ------------------------------------------------------------ Keks-Knopf */
.bvew-rund{
  position:fixed; z-index:80;
  left:max(16px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom));
  width:48px; height:48px; padding:11px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ew-gold);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(203,176,130,.45);
  box-shadow:0 8px 24px rgba(19,55,109,.14);
  opacity:0; transform:scale(.7);
  transition:opacity .35s var(--ew-weich), transform .35s var(--ew-weich), box-shadow .2s;
}
.bvew-rund.bvew-da{ opacity:1; transform:none }
.bvew-rund:hover{ transform:rotate(-12deg) scale(1.06); box-shadow:0 12px 30px rgba(19,55,109,.2) }
.bvew-rund svg{ width:100%; height:100%; display:block }
html.bvew-offen .bvew-rund{ opacity:0; pointer-events:none }

/* ------------------------------------------------------------ Dialog */
html.bvew-offen{ overflow:hidden }
.bvew-huelle{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(19,32,52,.38);
  opacity:0; transition:opacity .25s;
}
.bvew-huelle.bvew-da{ opacity:1 }
.bvew-dialog{
  width:min(640px,100%); max-height:min(88vh,860px); overflow:auto; overscroll-behavior:contain;
  background:var(--ew-grund); border-radius:26px; padding:22px 22px 16px;
  box-shadow:0 30px 80px rgba(10,25,50,.3);
  transform:translateY(12px) scale(.98); transition:transform .3s var(--ew-weich);
}
.bvew-huelle.bvew-da .bvew-dialog{ transform:none }
.bvew-dialog-kopf h2{ flex:1; font-size:1.25rem }
.bvew-zu{
  appearance:none; border:0; background:rgba(19,55,109,.07); color:var(--ew-blau);
  width:40px; height:40px; border-radius:50%; font-size:1.5rem; line-height:1; cursor:pointer;
}
.bvew-einleitung{ font-size:.9rem; line-height:1.55; color:var(--ew-leise); margin:10px 0 14px }

.bvew-kats{ display:grid; gap:10px; margin-bottom:16px }
.bvew-kat{ background:#fff; border:1px solid var(--ew-linie); border-radius:18px; padding:14px 16px }
.bvew-kat-kopf{ display:flex; align-items:center; gap:10px }
.bvew-kat-kopf label{ flex:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; cursor:pointer }
.bvew-kat-kopf strong{ font-size:1rem; color:var(--ew-blau) }
.bvew-zahl{ font-size:.78rem; color:var(--ew-leise) }
.bvew-immer{ font-size:.75rem; font-weight:700; color:var(--ew-leise); white-space:nowrap }
.bvew-kat > p{ margin:6px 0 4px; font-size:.86rem; line-height:1.5 }

/* Schalter: ein echtes Kontrollkästchen mit role="switch". */
.bvew-schalter{
  appearance:none; -webkit-appearance:none; flex:none; margin:0; cursor:pointer;
  width:48px; height:28px; border-radius:999px; position:relative;
  background:#cfd5de; transition:background .2s;
}
.bvew-schalter::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .2s var(--ew-weich);
}
.bvew-schalter:checked{ background:var(--ew-blau) }
.bvew-schalter:checked::after{ transform:translateX(20px) }
.bvew-schalter:disabled{ cursor:not-allowed; opacity:.55 }

.bvew-dienst{ border-top:1px solid var(--ew-linie); margin-top:8px; padding-top:8px }
.bvew-dienst summary{ cursor:pointer; font-size:.9rem; font-weight:700; padding:4px 0; min-height:32px; display:flex; align-items:center }
.bvew-dienst summary::marker{ color:var(--ew-gold) }
.bvew-dienst dl{ display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:6px 0 4px; font-size:.82rem; line-height:1.45 }
.bvew-dienst dt{ color:var(--ew-leise) }
.bvew-dienst dd{ margin:0; overflow-wrap:anywhere }
.bvew-dienst a{ color:var(--ew-blau) }
.bvew-nachweis{ font-size:.72rem; color:var(--ew-leise); margin:12px 0 0; overflow-wrap:anywhere }

/* ------------------------------------------------------------ Schmal */
@media (max-width:560px){
  .bvew-karte{ left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); width:auto; padding:16px 16px 10px }
  .bvew-knoepfe-drei{ grid-template-columns:1fr }
  .bvew-huelle{ align-items:flex-end; padding:0 }
  .bvew-dialog{ border-radius:24px 24px 0 0; max-height:92vh; padding:18px 16px max(14px, env(safe-area-inset-bottom)) }
  .bvew-dienst dl{ grid-template-columns:1fr; gap:0 }
  .bvew-dienst dd{ margin-bottom:6px }
  .bvew-rund{ width:44px; height:44px; padding:10px; left:12px; bottom:max(12px, env(safe-area-inset-bottom)) }
}

@media (prefers-reduced-motion:reduce){
  .bvew-karte, .bvew-rund, .bvew-huelle, .bvew-dialog, .bvew-schalter::after{ transition:none }
}

@media print{ .bvew-karte, .bvew-rund, .bvew-huelle{ display:none !important } }