/* Shared presentation layer. Existing routes, forms and JavaScript stay in charge. */
:root {
  color-scheme: dark;
  --fn-bg: #080e20;
  --fn-panel: rgba(22, 32, 57, .78);
  --fn-line: rgba(174, 201, 255, .15);
  --fn-text: #eff4ff;
  --fn-muted: #a5b4cf;
  --fn-cyan: #71e2f2;
  --fn-purple: #b5a1ff;
}
body.fn-glass {
  background: radial-gradient(ellipse at 5% 5%, #192b50 0, transparent 43%), radial-gradient(ellipse at 95% 28%, #251c43 0, transparent 42%), var(--fn-bg);
  background-attachment: fixed;
  color: var(--fn-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  line-height: 1.65;
}
.fn-glass > .container { max-width: 1320px; padding-inline: 28px; }
.fn-glass a { color: #9ed9ff; text-underline-offset: 4px; }
.fn-glass a:hover { color: #c9faff; }
.fn-glass .site-brand { display:flex; align-items:center; justify-content:space-between; padding: 6px 0 22px; gap:16px; }
.fn-glass .site-brand .brand-title { display:flex; align-items:center; gap:13px; background:none; padding:0; text-align:left; font-size:26px; letter-spacing:-1px; }
.brand-title small { display:block; font-size:9px; letter-spacing:2.4px; font-weight:600; color:var(--fn-muted); margin-top:2px; }
.brand-accent { color:var(--fn-cyan); }
.brand-symbol { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; border:1px solid #7bd9ff55; color:#a7edff; background:linear-gradient(135deg,#5fdaf52b,#8862fa30); box-shadow:inset 0 1px #ffffff33,0 8px 24px #0003; }
.brand-community { font-size:12px; color:var(--fn-muted); display:flex; align-items:center; gap:9px; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#76e6cb; box-shadow:0 0 12px #76e6cb66; flex-shrink:0; }
.fn-glass .content-box, .fn-glass .card, .fn-glass .login-card, .fn-glass footer, .fn-glass .table-responsive {
  background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 55%),var(--fn-panel) !important;
  border:1px solid var(--fn-line);
  border-radius:22px !important;
  box-shadow:inset 0 1px 0 #ffffff0c,0 14px 36px #0000001f;
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  color:var(--fn-text);
}
.fn-glass .content-box { padding:26px; }
.fn-glass .navbar { background:rgba(16,25,47,.92) !important; border:1px solid var(--fn-line); border-radius:18px !important; padding:10px 6px; top:12px; z-index:1030; box-shadow:inset 0 1px #ffffff12,0 12px 30px #0003; backdrop-filter:blur(28px); }
.fn-glass .navbar-nav { z-index:auto; gap:8px; }
.fn-glass .navbar .nav-item.mx-3 { margin-inline:3px !important; }
.fn-glass .navbar .nav-link { font-size:14px; font-weight:600; color:#b9c6df; border:1px solid transparent; border-radius:11px; }
.fn-glass .navbar .nav-link i { margin-right:6px; }
.fn-glass .navbar .nav-link.active, .fn-glass .navbar .nav-link:hover { color:#c1f7ff; background:linear-gradient(135deg,#62d4f51c,#9582fa17); border-color:#87c6fc26; }
.fn-glass .dropdown-menu { background:#141e36f7; border:1px solid #a2bfe433; border-radius:15px; padding:8px; box-shadow:0 18px 45px #0007; }
.fn-glass .dropdown-item { color:#d2ddf1; padding:9px 14px; border-radius:8px; font-size:14px; }
.fn-glass .dropdown-item:hover, .fn-glass .dropdown-item:focus { background:#a4caff18; color:#fff; }
.fn-glass .facebook-banner { display:flex; align-items:center; gap:20px; padding:13px 20px; border-radius:14px !important; font-size:12px; color:var(--fn-muted); position:relative; z-index:0; }
.facebook-banner .d-flex { flex-shrink:0; margin-bottom:0 !important; }
.facebook-banner h2 { font-size:12px; font-weight:600; color:#dbe7fc; }
.fn-glass .fn-hero { position:relative; display:flex; align-items:center; min-height:285px; padding:38px 40px; overflow:hidden; background:radial-gradient(ellipse at 95% 40%,#6559a929,transparent 60%),linear-gradient(120deg,#203752b3,#151e35de) !important; }
.hero-copy { position:relative; z-index:1; max-width:760px; width:73%; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--fn-cyan); font-size:10px; font-weight:700; letter-spacing:2px; margin-bottom:15px; }
.fn-glass .fn-hero h1 { font-size:clamp(28px,3.1vw,43px); line-height:1.16; letter-spacing:-1.6px; font-weight:750; margin-bottom:18px !important; }
.fn-glass .text-gradient { background:linear-gradient(110deg,#f5f8ff 15%,#b9e9ff 65%,#c9b6ff); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.fn-hero p { font-size:14px; color:#b6c6df; line-height:1.85; }
.fn-hero p strong { color:#e3eeff; font-weight:600; }
.hero-signal { margin-left:auto; width:220px; flex-shrink:0; text-align:center; color:#7edcf5; }
.signal-orbit { display:grid; place-items:center; width:180px; height:180px; margin:0 auto 20px; border:1px solid #98d2ff25; border-radius:50%; background:radial-gradient(circle,#78c9ff22,transparent 65%); box-shadow:0 0 0 22px #99beff05,0 0 0 44px #99beff03; }
.signal-orbit i { display:grid; place-items:center; width:118px; height:118px; border:1px solid #a9d8ff40; border-radius:50%; font-size:46px; background:linear-gradient(135deg,#9ce1ff15,#bba3ff10); box-shadow:inset 0 1px #fff2,0 0 35px #63b7f518; }
.hero-signal > span { font-size:8px; letter-spacing:1.8px; color:#9cb8d7; }
.fn-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0 34px; }
.shortcut { display:flex; align-items:center; gap:15px; padding:20px; border:1px solid var(--fn-line); border-radius:18px; background:linear-gradient(130deg,#d4e7ff0c,#d4e7ff03); box-shadow:inset 0 1px #fff1; text-decoration:none; transition:background .2s,transform .2s; }
.shortcut:hover { transform:translateY(-3px); background:#a4caff12; }
.shortcut > i { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; background:#7aceee12; color:#80dfef; }
.shortcut:nth-child(2) > i { color:#baacff; background:#b3a3ff13; }
.shortcut:nth-child(3) > i { color:#82e6c4; background:#82e6c413; }
.shortcut strong { display:block; font-size:17px; color:#e9f1ff; line-height:1.4; }
.shortcut small { display:block; color:var(--fn-muted); font-size:11px; }
.shortcut-arrow { margin-left:auto; color:#93a9ca; }
.search-heading .eyebrow { margin-bottom:7px; }
.search-heading h2 { font-size:23px; font-weight:650; letter-spacing:-.6px; }
.search-heading h2 span { color:var(--fn-cyan); }
.fn-glass .search-container { margin:20px 0 14px; justify-content:flex-start; }
.fn-glass .search-box { max-width:none; }
.fn-glass .search-box input { border-radius:16px; padding:19px 52px 19px 22px; font-size:14px; box-shadow:inset 0 1px #ffffff0c,0 8px 30px #0002; }
.fn-glass .search-box i { right:23px; color:#87dbee; }
.fn-glass input:not([type=checkbox]):not([type=radio]), .fn-glass textarea, .fn-glass select { background-color:#0d172bd9 !important; border-color:#a8c3f32b !important; color:#edf4ff !important; }
.fn-glass input::placeholder, .fn-glass textarea::placeholder { color:#8d9fbf; opacity:1; }
.fn-glass input:focus, .fn-glass textarea:focus, .fn-glass select:focus { border-color:#7bdcea !important; box-shadow:0 0 0 4px #6cdbff16; }
.fn-glass :focus-visible { outline:2px solid #85e5f7; outline-offset:4px; }
.fn-glass #resultCount { background:none; padding:0 2px; font-size:12px; color:var(--fn-muted); margin-bottom:18px !important; }
.fn-glass .table { --bs-table-bg:transparent; --bs-table-color:#d0dcef; --bs-table-border-color:#a7c5f013; --bs-table-hover-bg:#97c6ff0a; --bs-table-hover-color:#f3f7ff; margin-bottom:0; font-size:13px; }
.fn-glass .table > :not(caption) > * > * { padding:14px 16px; border-left-width:0; border-right-width:0; vertical-align:middle; }
.fn-glass .table thead th { background:#c3daff05; color:#90a6c6; font-size:10px; letter-spacing:1px; text-transform:uppercase; font-weight:650; }
.fn-glass .table a { text-decoration:none; }
.fn-glass #frequentieTable td:first-child a { color:#8ce3f0; font-family:Consolas,monospace; font-weight:700; }
.fn-glass #frequentieTable td:nth-child(2) a { display:inline-block; background:#b5a1ff12; color:#c7baff; border:1px solid #b5a1ff25; padding:2px 8px; border-radius:6px; font-size:11px; }
.fn-glass .col-md-4 .content-box h2 { font-size:15px; font-weight:650; margin-bottom:17px; }
.fn-glass .col-md-4 .content-box ul, .fn-glass #mobileRightColumn .content-box ul { list-style:none; padding:0; }
.fn-glass .col-md-4 .content-box li, .fn-glass #mobileRightColumn .content-box li { padding:7px 0; border-bottom:1px solid #a7c5f00c; font-size:13px; }
.fn-glass .col-md-4 .content-box li a { text-decoration:none; }
.fn-glass .btn { border-radius:10px; font-weight:600; }
.fn-glass .btn-primary { background:linear-gradient(120deg,#347fbd,#6b5ac2); border:1px solid #a4caff40; box-shadow:inset 0 1px #fff2; }
.fn-glass .btn-primary:hover { filter:brightness(1.15); }
.fn-glass .btn-outline-light { color:#d1e4ff; border-color:#b4d5ff40; }
.fn-glass .badge { border-radius:7px; padding:6px 9px; }
.fn-glass .text-muted, .fn-glass .small-muted { color:var(--fn-muted) !important; }
.fn-glass .overlay-modal { z-index:1060; backdrop-filter:blur(7px); }
.fn-glass .overlay-content, .fn-glass .modal-content { background:#152039 !important; color:var(--fn-text); border:1px solid #bad5ff33; border-radius:20px !important; max-height:85vh; overflow:auto; }
.fn-glass footer { margin-top:40px; padding:30px 24px; color:#95a8c6; font-size:12px; }
.fn-glass footer .klein p a { color:#a6bad8; line-height:2.2; }
.fn-glass .huisregels-box-inner, .fn-glass .contact-overschrijving { background:#0c1629; color:#c7d5eb; border-radius:12px; }
@media (max-width:1199px) { .hero-copy { width:75%; } .hero-signal { width:170px; } .signal-orbit { width:140px; height:140px; } .facebook-banner { flex-wrap:wrap; gap:3px !important; } }
@media (max-width:991.98px) {
  .fn-glass .navbar .nav-link { padding:10px 13px; }
  .fn-glass .navbar .nav-link i { margin-right:0; }
  .fn-glass .navbar .dropdown-menu,
  #fn-nav-dropdown-root .dropdown-menu { max-width:calc(100vw - 16px); border-radius:14px; }
  .hero-signal { display:none; } .hero-copy { width:100%; }
  .fn-glass .fn-hero { padding:30px; min-height:0; }
  .shortcut { padding:16px 13px; gap:10px; } .shortcut strong { font-size:14px; } .shortcut-arrow { display:none; }
}
@media (max-width:767.98px) {
  .fn-glass > .container { padding:18px 16px !important; }
  .fn-glass .site-brand { padding:0 0 14px; } .brand-community { display:none; }
  .fn-glass .site-brand .brand-title { font-size:23px; } .brand-symbol { width:44px; height:44px; border-radius:13px; }
  .fn-glass .navbar { top:8px; } .fn-glass .content-box { padding:20px; }
  .fn-glass .facebook-banner { padding:12px 15px; font-size:11px; }
  .fn-glass .fn-hero { padding:25px 22px; } .fn-glass .fn-hero h1 { font-size:32px; }
  .fn-hero p { font-size:13px; } .eyebrow { font-size:9px; }
  .fn-shortcuts { grid-template-columns:1fr; gap:9px; margin:16px 0 27px; }
  .shortcut { padding:13px 16px; } .shortcut strong { font-size:15px; } .shortcut-arrow { display:block; }
  .search-heading h2 { font-size:22px; } .fn-glass .search-box input { padding-left:16px; font-size:12px; }
  .fn-glass .mobile-card { border-radius:16px !important; margin-bottom:12px !important; }
  .fn-glass .mobile-card .card-body { padding:20px; } .mobile-card p { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) { .fn-glass *, .fn-glass *::before, .fn-glass *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
@supports not (backdrop-filter:blur(1px)) { .fn-glass .content-box, .fn-glass .card, .fn-glass .navbar { background-color:#162139 !important; } }