/* Bètamelding: lint linksonder + welkomstkaart rechtsonder, gedeeld over alle
   portalschillen (beheer: Content > Bètamelding). Vast, neutraal palet (leisteen
   met amber) dat op elk thema leesbaar is; de kaart is wit met donkere tekst.
   [hidden] wint hier altijd van de eigen display, anders kan de kaart niet dicht.
   Alles draagt twee klassen (.pbm-kaart .pbm-x, .pbm .pbm-lint): een thema dat koppen
   wit maakt (body.site-theme-x h2, specificiteit 0,1,2) mag de kaarttitel niet
   onleesbaar maken; dat gebeurde op het hogerheide-thema. */
.pbm .pbm-lint{position:fixed;left:14px;bottom:14px;z-index:1050;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#232f3e;color:#eef1f5;font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;border:1px solid rgba(255,255,255,.25);cursor:pointer}
.pbm .pbm-lint:hover{background:#31415a}
.pbm .pbm-lint:focus-visible{outline:3px solid #dcab48;outline-offset:2px}
.pbm .pbm-bol{width:8px;height:8px;border-radius:50%;background:#dcab48;box-shadow:0 0 6px #dcab48;animation:pbm-klop 2.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.pbm .pbm-bol{animation:none}}
.pbm-kaart{position:fixed;right:16px;bottom:16px;z-index:1050;width:calc(100vw - 32px);max-width:400px;background:#fff;color:#1b2430;border-radius:14px;border:1px solid #d6dde6;border-left:5px solid #dcab48;box-shadow:0 16px 44px rgba(15,23,42,.42);padding:20px 20px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;transition:opacity .35s ease,transform .35s ease}
/* Vloeiend weg na vijf seconden (beta.js). Een kaart die er ineens niet meer is leest als een
   storing; vervagen leest als "hij is klaar". Wie minder beweging wil ziet hem gewoon verdwijnen. */
.pbm-kaart[hidden]{display:none !important}
.pbm-kaart.is-weg{opacity:0;transform:translateY(10px)}
/* Bewust GEEN pointer-events:none tijdens het vervagen: wie op t=5,1s nog net op "Word lid" klikt
   hoort daar te komen en niet stil niets te krijgen. De kaart is pas weg als hij hidden is. */
@media (prefers-reduced-motion: reduce){.pbm-kaart{transition:none}.pbm-kaart.is-weg{transform:none}}
.pbm-kaart .pbm-sluit{position:absolute;top:8px;right:10px;border:0;background:none;font-size:20px;line-height:1;color:#5b6878;cursor:pointer;padding:2px 6px}
.pbm-kaart .pbm-sluit:hover{color:#1b2430}
.pbm-kaart .pbm-tag{display:inline-flex;align-items:center;gap:6px;background:#fdf3dd;color:#7a5a12;border:1px solid #dcab48;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:5px 11px;margin-bottom:10px}
.pbm-kaart .pbm-tag-bol{width:7px;height:7px;border-radius:50%;background:#dcab48;box-shadow:0 0 6px #dcab48;animation:pbm-klop 2.4s ease-in-out infinite}
@keyframes pbm-klop{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
@media (prefers-reduced-motion: reduce){.pbm-kaart .pbm-tag-bol{animation:none}}
.pbm-kaart .pbm-titel{margin:0 0 8px;font-size:19px;line-height:1.25;color:#1b2430;font-weight:800}
.pbm-kaart .pbm-tekst{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:#3c485a}
.pbm-kaart .pbm-rij{display:flex;gap:8px}
.pbm-kaart .pbm-knop{flex:1;text-align:center;border-radius:8px;padding:9px 12px;font:600 14px system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;border:0;cursor:pointer}
.pbm-kaart .pbm-knop-vol{background:#232f3e;color:#fff}
.pbm-kaart .pbm-knop-vol:hover{background:#31415a;color:#fff}
.pbm-kaart .pbm-knop-los{background:#eef1f5;color:#232f3e}
.pbm-kaart .pbm-knop-los:hover{background:#dde3ea}
.pbm-kaart .pbm-knop-rand{background:#fff;color:#232f3e;border:1px solid #c3ccd8}
.pbm-kaart .pbm-knop-rand:hover{background:#f3f6f9;color:#232f3e}
/* "Even niet" is geen hoofdkeuze; die staat als tekstregel onder de knoppen. */
.pbm-kaart .pbm-later{display:block;width:100%;margin-top:10px;border:0;background:none;padding:6px 0 0;font:500 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:#5b6878;cursor:pointer;text-align:center}
.pbm-kaart .pbm-later:hover{color:#1b2430;text-decoration:underline}
.pbm-kaart .pbm-later:focus-visible{outline:3px solid #3a5a7c;outline-offset:2px}
.pbm-kaart .pbm-knop:focus-visible,.pbm-kaart .pbm-sluit:focus-visible{outline:3px solid #3a5a7c;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .pbm-kaart{animation:pbmKaartIn .35s ease}
  @keyframes pbmKaartIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (max-width:767px){
  /* HET LINT STAAT ER OOK OP MOBIEL, en dat is sinds v014.11.309 geen detail meer. Hij stond hier
     op `display:none` ("te druk naast de tabbalk"), en dat kon zolang de kaart bleef staan tot je
     hem wegklikte. Nu verdwijnt de kaart na vijf seconden uit zichzelf, en dan is het lint de enige
     weg terug -- zonder lint was de melding op een telefoon na vijf seconden onherroepelijk weg,
     juist op het scherm waar de meeste bezoekers zitten. Hij staat boven de tabbalk, net als de
     kaart, en is smaller zodat hij niet de halve breedte inneemt. */
  .pbm .pbm-lint{bottom:calc(84px + env(safe-area-inset-bottom));padding:6px 11px;font-size:12px}
  .pbm-kaart{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:none}
}