@import url("https://fonts.googleapis.com/css2?family=Birthstone+Bounce&display=swap");
/* Ursus digitaal visitekaartje v0.1.8. Herkenbare Ursusweb-header,
   zelfstandige applicatiestijlen. Gebaseerd op originele ursusweb.nl-bronnen. */

:root { --navy:#142d44; --green:#70dc15; --muted:#71808b; --paper:#f8f7f3;
  --line:#dce1e2; --shadow:0 8px 24px rgba(12,31,47,.09); }
* { box-sizing:border-box; }
html { min-width:320px; font-family:"Montserrat",Arial,sans-serif; background:var(--paper); color:var(--navy); }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% 0%,#fff 0,rgba(255,255,255,0) 42rem),var(--paper); }
button { font:inherit; } a { color:inherit; }
.page { width:min(1180px,calc(100% - 64px)); margin:0 auto; }
/* Alleen de visuele header is gemeenschappelijk. Geen gedeeld CSS-bestand of sessie. */
.brandbar { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:17px; min-width:0; text-decoration:none; }
.brand__bear { display:block; width:72px; height:72px; flex:0 0 auto; object-fit:contain; }
.brand__logo { display:block; width:220px; height:68px; object-fit:contain; object-position:left center; }
.welcome { flex:0 0 auto; text-align:right; }
.welcome p { margin:0; }
.welcome__motto { font-size:10px; font-weight:700; letter-spacing:.28em; }
.welcome__note { padding-top:5px; font-family:"Birthstone Bounce",cursive; font-size:27px; font-weight:400; line-height:1; }
.page main { max-width:510px; margin:0 auto; padding-bottom:30px; }
.hero { text-align:center; }
.portrait { display:block; width:min(51vw,245px); aspect-ratio:1; object-fit:cover; height:auto;
  border-radius:50%; margin:0 auto 2px; filter:drop-shadow(0 5px 10px rgba(25,34,42,.08)); }
.portrait--brand { padding:26px; background:white; border:1px solid var(--line); object-fit:contain; }
.profile-tag { margin:7px 0 3px; text-transform:uppercase; letter-spacing:.18em; color:#74838d; font-size:10px; font-weight:700; }
.hero h1 { margin:4px 0 2px; color:var(--navy); font:600 clamp(32px,3.5vw,43px)/1.12 "Montserrat",Arial,sans-serif; letter-spacing:-.045em; }
.role { margin:8px auto 3px; font-size:14px; line-height:1.43; }
.organizations { display:flex; justify-content:center; gap:10px; align-items:center;
  font-size:clamp(15px,1.8vw,19px); font-weight:700; margin:8px auto 19px; }
.organizations:before,.organizations:after { content:""; background:var(--green); width:30px; height:4px; flex:0 0 auto; }
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:10px; }
.contact-grid--single { grid-template-columns:1fr; }
.contact-panel { background:white; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:18px; padding:15px 12px; min-width:0; }
.contact-panel h2 { font:600 clamp(23px,2vw,29px)/1.15 "Oswald","Montserrat",Arial,sans-serif; margin:0; }
.green-underline { width:54px; height:4px; background:var(--green); margin:10px 0 14px; }
.contact-link { display:flex; align-items:center; gap:8px; padding:10px 9px; margin:8px 0;
  min-width:0; min-height:58px; border-radius:13px; border:1px solid #e8eaf0; color:var(--navy);
  text-decoration:none; overflow-wrap:anywhere; font-size:13px; line-height:1.3; }
.contact-link:hover { border-color:#a0cb81; }
.contact-link--text { background:#fafbfc; }
.contact-link__body { display:flex; flex-direction:column; flex:1; gap:3px; min-width:0; }
.contact-link__body small { color:var(--muted); font-size:10px; font-weight:600; }
.contact-link .icon { width:21px; height:21px; flex:0 0 auto; }
.contact-link .icon:last-child:not(:first-child) { width:15px; height:15px; }
.icon { display:inline-block; width:28px; height:28px; flex-shrink:0; }
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.action-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:12px 6px; min-height:110px; min-width:0; background:white; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); color:var(--navy); font-size:13px; font-weight:700;
  text-align:center; text-decoration:none; cursor:pointer; transition:border-color .15s ease,transform .15s ease; }
.action-tile .icon { width:34px; height:34px; }
.action-tile:hover { border-color:#8abd6a; transform:translateY(-1px); }
.social-strip { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:11px; margin:16px auto 20px; }
.social-tile { width:54px; height:54px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:15px; background:white; color:var(--navy);
  box-shadow:0 5px 13px rgba(12,31,47,.08); text-decoration:none; transition:transform .15s ease,border-color .15s ease; }
.social-tile .icon,.social-custom { width:27px; height:27px; object-fit:contain; }
.social-tile:hover { border-color:var(--green); transform:translateY(-1px); }
.social-monnett { display:block; width:29px; height:29px; background:currentColor;
  -webkit-mask:url('/assets/monnett-beeldmerk.png') center/contain no-repeat;
  mask:url('/assets/monnett-beeldmerk.png') center/contain no-repeat; }
:focus-visible { outline:3px solid #245c81; outline-offset:3px; }
.overlay { display:none; position:fixed; inset:0; z-index:30; background:rgba(11,27,45,.58); padding:18px;
  align-items:center; justify-content:center; }
.overlay[aria-hidden="false"] { display:flex; }
.dialog { position:relative; width:min(100%,465px); max-height:90vh; overflow-y:auto; padding:28px;
  background:#fff; border-radius:24px; box-shadow:0 18px 80px rgba(0,0,0,.22); }
.dialog h2 { font-size:25px; margin:0 36px 8px 0; }
.dialog p { color:var(--muted); line-height:1.5; margin:0 0 14px; }
.close { display:grid; place-items:center; position:absolute; right:16px; top:16px; width:38px; height:38px;
  border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer; }
.close .icon { width:19px; height:19px; }
.qr-dialog { text-align:center; } .qrcode { display:block; max-width:100%; height:auto; margin:10px auto 18px; image-rendering:pixelated; }
.modal-option { display:inline-flex; align-items:center; gap:10px; padding:13px 17px; border:1px solid var(--line);
  border-radius:13px; text-decoration:none; font-weight:600; }
.modal-option .icon { width:18px; height:18px; }
@media(max-width:700px) {
  .page { width:min(100% - 32px,560px); }
  .brandbar { min-height:76px; gap:12px; }
  .brand { gap:0; } .brand__bear { width:52px; height:52px; }
  .brand__logo { display:none; } .welcome__motto { display:none; }
  .welcome__note { font-size:clamp(19px,5vw,24px); white-space:nowrap; padding-top:0; }
  .portrait { width:min(54vw,230px); }
  .hero h1 { font-size:clamp(30px,8.2vw,40px); }
  .role { font-size:clamp(12px,3.35vw,14px); }
  .organizations { font-size:clamp(13px,3.65vw,17px); }
  .contact-link { font-size:12px; padding:9px 6px; gap:5px; }
  .contact-link .icon { width:20px; height:20px; }
  .social-strip { gap:9px; margin:14px auto 15px; }
  .social-tile { width:49px; height:49px; border-radius:14px; }
}
@media(max-width:370px) {
  .contact-grid { grid-template-columns:1fr; }
  .contact-link { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .action-tile,.social-tile { transition:none; } }

/* De ontvanger ziet alleen opslaan, nooit een nieuwe QR voor doorgeven. */
.action-grid--single { grid-template-columns:1fr; }

/* v0.2.1 – neutrale eindpagina bij ingetrokken of verlopen deeltoegang.
   Alleen lokale classes: geen invloed op de bestaande kaart of admin. */
.access-ended { width:min(100%,510px); margin:clamp(20px,6vh,65px) auto 55px;
  padding:clamp(27px,6vw,44px) clamp(21px,5vw,38px) 38px;
  text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:22px; box-shadow:var(--shadow); }
.access-ended__bear { display:block; width:92px; height:92px; object-fit:contain; margin:0 auto 15px; }
.access-ended__eyebrow { font-size:11px; color:#697b86; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em; margin:0 0 9px; }
.access-ended h1 { font:700 clamp(26px,5vw,34px)/1.16 "Montserrat",Arial,sans-serif;
  letter-spacing:-.038em; margin:0 auto 13px; max-width:390px; }
.access-ended__line { height:4px; width:62px; margin:0 auto 17px; background:var(--green); }
.access-ended__description { color:#546574; font-size:clamp(14px,3.4vw,16px);
  line-height:1.6; max-width:360px; margin:0 auto; }
@media(max-width:700px) {
  .access-ended { margin:28px auto 50px; }
  .access-ended__bear { width:79px; height:79px; }
}