/* ---- gedeelde menubalk (src/site_nav.py) ---- */
  :root { --gold:#bb9a3b; --gold-2:#cdb05a; --logo-ink:#111; --logo-gold:#bb9a3b; }
  .site-nav { position:fixed; left:0; right:0; top:0; z-index:40; padding:22px 16px 0; pointer-events:none; transition:padding .45s cubic-bezier(.2,.8,.2,1); }
  .site-nav.scrolled { padding-top:10px; }
  .site-nav .pill { pointer-events:auto; max-width:1624px; margin:0 auto; height:80px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 12px 0 26px; border:0; border-radius:999px;
    background:rgba(255,255,255,.82); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3); box-shadow:0 1px 2px rgba(14,14,17,.04), 0 8px 30px rgba(14,14,17,.06), inset 0 0 0 1px rgba(14,14,17,.06);
    transition:height .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; font-family:"Geist", system-ui, sans-serif; }
  .site-nav.scrolled .pill { height:62px; box-shadow:0 2px 4px rgba(14,14,17,.05), 0 12px 36px rgba(14,14,17,.10), inset 0 0 0 1px rgba(14,14,17,.06); }
  .site-nav .brand { display:flex; align-items:center; }
  .site-nav .brand svg { height:42px; width:auto; display:block; transition:height .45s cubic-bezier(.2,.8,.2,1); }
  .site-nav.scrolled .brand svg { height:32px; }
  .site-nav .links { position:relative; display:flex; gap:4px; font-size:15px; }
  .site-nav .links a { position:relative; z-index:1; text-decoration:none; color:#3a3a3a; padding:8px 14px; border-radius:999px; transition:color .3s ease; }
  .site-nav .links a.on { color:#141414; }
  .site-nav .ind { position:absolute; z-index:0; top:0; left:0; height:100%; width:0; border-radius:999px; background:rgba(14,14,17,.06); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
  .site-nav .cta { display:inline-block; background:#141414; color:#fff; text-decoration:none; font-weight:600; font-size:15px; border-radius:999px; padding:12px 20px; }
  .site-nav .cta span { margin-left:4px; }
  /* ---- liquid glass (Jonathan 26 sep: "Geef 'plan een gesprek' en de header de liquid glass van apple look") ----
     doorschijnend glas met vervaging, lichtrand bovenin en glans; donker glas op donkere achtergrond, licht op licht */
  .site-nav .pill { position:relative; isolation:isolate;
    background:linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.40)) !important;
    backdrop-filter:blur(26px) saturate(1.9) brightness(1.04); -webkit-backdrop-filter:blur(26px) saturate(1.9) brightness(1.04);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.05), 0 12px 34px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06) !important;
    transition:height .45s cubic-bezier(.2,.8,.2,1), background .5s ease, box-shadow .5s ease; }
  .site-nav .pill::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
    background:radial-gradient(120% 160% at 18% -40%, rgba(255,255,255,.60), rgba(255,255,255,0) 46%), radial-gradient(80% 120% at 92% 140%, rgba(255,255,255,.28), rgba(255,255,255,0) 50%); }
  .site-nav.on-dark .pill { background:linear-gradient(180deg, rgba(44,41,36,.52), rgba(16,15,13,.42)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.25), 0 12px 34px rgba(0,0,0,.30) !important; }
  .site-nav.on-dark .pill::before { background:radial-gradient(120% 160% at 18% -40%, rgba(255,255,255,.16), rgba(255,255,255,0) 46%); }
  .site-nav.on-dark { --logo-ink:#f1ece2; }
  .site-nav.on-dark .links a { color:#d9d3c6; } .site-nav.on-dark .links a.on { color:#fff; }
  .site-nav.on-dark .ind { background:rgba(255,255,255,.12); }

  .btn:not(.ghost):where(:not(.fbbtn, .fbpanel .btn)), .nb, .site-nav .cta {
    border:0 !important; border-radius:999px !important; padding:13px 24px !important; color:#fff !important;
    background:radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(rgba(22,21,19,.86), rgba(22,21,19,.86)) !important;
    backdrop-filter:blur(14px) saturate(1.8); -webkit-backdrop-filter:blur(14px) saturate(1.8);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.18), 0 6px 20px rgba(0,0,0,.14) !important;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease; }
  .site-nav .cta { padding:12px 20px !important; }
  @media (max-width:520px) { .nb { padding:10px 16px !important; } }
  /* goud glas op donkere achtergrond */
  body.st-donker .btn:not(.ghost):where(:not(.fbbtn, .fbpanel .btn)), body.st-donker .nb:not(.prev), body.st-donker .site-nav .cta, .site-nav.on-dark .cta,
  .ta .btn:not(.ghost), .cta-band .btn:not(.ghost), body.st-overgang :is(.hero3, .pa-hero, .ta-hero, .oo-hero) .btn:not(.ghost) {
    color:#1b1407 !important;
    background:radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), linear-gradient(rgba(205,176,90,.88), rgba(205,176,90,.88)) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.30), 0 8px 24px rgba(0,0,0,.28) !important; }
  /* helder glas voor de tweede knop in de demo */
  .nb.prev { color:var(--ink, #141414) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.08) !important; }
  body.st-donker .nb.prev { color:#f1ece2 !important;
    background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.25) !important; }
  .nb:disabled { opacity:.45; }
  .btn:not(.ghost):where(:not(.fbbtn, .fbpanel .btn)):hover, .nb:not(:disabled):hover, .site-nav .cta:hover { transform:translateY(-1px) scale(1.02); filter:brightness(1.04); }
  .btn:not(.ghost):where(:not(.fbbtn, .fbpanel .btn)):active, .nb:not(:disabled):active, .site-nav .cta:active { transform:scale(.98); filter:brightness(.97); }
  @media (prefers-reduced-transparency: reduce) { .site-nav .pill { background:rgba(255,255,255,.96) !important; } .site-nav.on-dark .pill { background:rgba(20,19,17,.96) !important; } }

  /* ---- rustig binnenkomen (Jonathan 26 sep: bij navigeren "knallen" iframe en foto's te hard in beeld) ----
     tussen pagina's: de balk blijft staan, de inhoud vloeit over; beelden en iframes komen zacht op zodra ze in beeld en geladen zijn */
  @view-transition { navigation: auto; }
  .site-nav { view-transition-name: site-nav; }
  ::view-transition-group(site-nav) { animation-duration: 0s; }
  /* 1 okt: de oude pagina blijft staan en de nieuwe komt eroverheen; eerst vervaagden beide en zakte het
     beeld tussendoor naar donker (overgangsmeting: een donkere flits bij elke paginawissel) */
  ::view-transition-old(root) { animation:none; }
  ::view-transition-new(root) { animation: sn-in .45s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes sn-in { from { opacity:0; } }
  .fi { opacity:0; transform:translate3d(0,16px,0); }
  .fi.in { opacity:1; transform:none; transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
    .fi { opacity:1; transform:none; }
  }
  /* pagina 1,4 keer breder (Jonathan 26 sep: "De gehele pagina mag 1.4X breder") */
  .w { max-width:1624px; }
  /* kop iets kleiner zodat het logo meer naar voren komt ("Procesverbetering mag iets kleiner, want ons logo verdwijnt teveel") */
  .hero3 h1 { font-size:clamp(36px, 5vw, 66px) !important; }
  .oo-hero h1 { font-size:clamp(36px, 5vw, 66px) !important; }
  /* ruimte onder de vaste balk op de subpagina's */
  .pa-hero, .ta-hero, .oo-hero { padding-top:176px; }
  body[data-page="ticket-agent"] .stepper { top:84px; }
  @media (max-width:860px) { .pa-hero, .ta-hero, .oo-hero { padding-top:124px; } }
  @media (max-width:860px) { .site-nav .links { display:none; } .site-nav .pill { height:64px; padding-left:20px; } .site-nav .brand svg { height:32px; } }
  /* telefoon: knop op één regel (1 oktober 2026: "Neem contact op" brak over twee regels op 390 px) */
  .site-nav .cta { white-space:nowrap; }
  @media (max-width:480px) { .site-nav .pill { gap:10px; padding:0 8px 0 16px; } .site-nav .brand svg, .site-nav.scrolled .brand svg { height:26px; } .site-nav .cta { font-size:14px; padding:10px 14px !important; } }
  @media (max-width:360px) { .site-nav .brand svg, .site-nav.scrolled .brand svg { height:22px; } .site-nav .cta { padding:9px 12px !important; } .site-nav .cta span { display:none; } }
  /* ---- mobiel menu (keuze Jonathan 1 oktober 2026: "Menuknop rechts in de balk die een paneel opent") ----
     onder 861 px vallen de links weg; de knop naast "Neem contact op" opent ze als paneel onder de balk */
  .site-nav .menu-btn, .site-nav .menu { display:none; }
  @media (max-width:860px) {
    .site-nav .cta { margin-left:auto; }
    .site-nav .menu-btn { position:relative; display:block; flex:none; width:44px; height:44px; margin-left:-8px; padding:0; border:0; border-radius:999px; cursor:pointer;
      color:#141414; background:rgba(14,14,17,.06); -webkit-tap-highlight-color:transparent; }
    .site-nav.on-dark .menu-btn { color:#f1ece2; background:rgba(255,255,255,.10); }
    .site-nav .menu-btn i { position:absolute; left:13px; width:18px; height:1.5px; border-radius:2px; background:currentColor; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
    .site-nav .menu-btn i:first-child { top:18px; } .site-nav .menu-btn i:last-child { top:24px; }
    .site-nav.menu-open .menu-btn i:first-child { transform:translateY(3px) rotate(45deg); }
    .site-nav.menu-open .menu-btn i:last-child { transform:translateY(-3px) rotate(-45deg); }
    .site-nav .menu { display:block; pointer-events:none; visibility:hidden; opacity:0; transform:translateY(-6px); transform-origin:top right;
      width:min(100%, 380px); margin:8px 0 0 auto; padding:8px; border-radius:26px; font-family:"Geist", system-ui, sans-serif;
      background:#faf9f6;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.16);
      transition:opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
    .site-nav.on-dark .menu { background:#161512; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.40); }
    .site-nav.menu-open .menu { pointer-events:auto; visibility:visible; opacity:1; transform:none; transition:opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
    .site-nav .menu a { display:block; padding:14px 18px; border-radius:18px; font-size:18px; color:#141414; text-decoration:none; }
    .site-nav.on-dark .menu a { color:#f1ece2; }
    .site-nav .menu a[aria-current] { background:rgba(14,14,17,.06); }
    .site-nav.on-dark .menu a[aria-current] { background:rgba(255,255,255,.10); }
  }
  @media (max-width:480px) { .site-nav .menu-btn { width:40px; height:40px; margin-left:-4px; } .site-nav .menu-btn i { left:11px; } .site-nav .menu-btn i:first-child { top:16px; } .site-nav .menu-btn i:last-child { top:22px; } }
  @media (prefers-reduced-motion: reduce) { .site-nav .menu, .site-nav .menu-btn i { transition:none !important; } }