/* 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. */
/* Het lint en de kaart staan boven de onderbalk zodra die er is (--cms-nav-height, gezet door _local_portal/js/theme.js,
   0 als er geen balk in beeld is): op 768 px lag het lint over de knop Home van de onderbalk, en bij de dorpen eronder
   (livecontrole M-8, v014.11.495). */
.pbm .pbm-lint{position:fixed;left:14px;bottom:calc(var(--cms-nav-height,0px) + 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}
/* De dorpsschil rendert de melding na de voet, ook als die uit staat. Laat de ingang daar
   meescrollen: een vast lint boven de onderbalk bedekt anders de agendaregels. */
@media (max-width:719px){
  body.dorps-app .pbm{padding:12px 16px;padding-bottom:calc(var(--cms-nav-height,72px) + 12px);text-align:center;background:var(--fr-voet)}
  body.dorps-app .pbm .pbm-lint{position:static;min-height:44px;max-width:100%;white-space:normal}
}
.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{box-sizing:border-box;position:fixed;right:16px;bottom:calc(var(--cms-nav-height,0px) + 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-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(var(--cms-nav-height,70px) + 14px);padding:6px 11px;font-size:12px}
  /* width:auto: met left én right staat de breedte vast; de breedte van hierboven (100vw) plus de binnenruimte
     schoof de kaart op 375 px 26 px buiten beeld, met het sluitkruisje half weg (lidtest 28 september 2026). */
  .pbm-kaart{left:12px;right:12px;width:auto;bottom:calc(var(--cms-nav-height,70px) + 14px);max-width:none}
}
/* Onderaan de voet ruimte ter hoogte van het lint, zodat de laatste regel en de laatste knop vrij blijven als je helemaal
   naar beneden scrolt (livecontrole M-8, v014.11.495): het lint lag over het begin van de copyrightregel, en op
   lodewijk.frl op 375 px over "Over dit CMS". Het lint is 26 tot 29 px hoog en staat 14 px boven de rand of de
   onderbalk; 40 px extra houdt de onderste regel daar ruim boven. Dit blad laadt alleen als de melding aanstaat. De
   dorpsschil zet het lint op een telefoon (tot 719 px) als strook onder de voet; daar is geen ruimte nodig. */
body:not(.dorps-app) footer.site-footer-v10,
.lh-voet{padding-bottom:40px}
@media (min-width:1025px){
  html body.dorps-app:has(.pbm) footer.site-footer-v10{padding-bottom:40px}
}
@media (min-width:720px) and (max-width:1024px){
  html body.dorps-app:has(.pbm) footer.site-footer-v10{padding-bottom:calc(var(--cms-nav-height,72px) + 52px)}
}