/* =====================================================================
   aiRFürste — public website
   Cockpit-grade visual language, shared with the RT Trainer.
   ===================================================================== */
:root{
  --bg:#0b0e13;
  --bg2:#0e1218;
  --panel:#161b23;
  --panel-2:#12161d;
  --panel-edge:#262d38;
  --bezel-hi:#3a4250;
  --line:#222a35;
  --accent:#e8b34b;          /* gold */
  --accent-2:#f0c068;
  --accent-deep:#8a6418;
  --lcd:#cfe3ef;             /* cool white display */
  --amber:#ffb451;          /* warm amber display */
  --green:#46d97c;
  --red:#e0524a;
  --text:#c8d2dd;
  --text-bright:#eef3f8;
  --text-dim:#8b96a3;        /* AA: 6.4:1 op de donkere achtergrond */
  --text-faint:#7d8896;      /* opgetrokken van #5d6772 (3.4:1) naar 5.4:1 — kleine tekst blijft leesbaar */
  --mono:"Consolas","Menlo","Courier New",monospace;
  --sans:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 620px at 78% -8%, #182230 0%, transparent 60%),
    radial-gradient(900px 560px at 6% 4%, #141b25 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* De merknaam wordt altijd geschreven als aiRFürste, ook in koppen en
   labels die verder in hoofdletters staan. */
.brandname{text-transform:none !important;font-variant:normal}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#10131a;padding:10px 16px;z-index:200;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);display:inline-block;margin-bottom:14px;
}
.eyebrow::before{content:"// "}
h1,h2,h3,h4{color:var(--text-bright);font-weight:300;letter-spacing:.04em;line-height:1.18}
h1{font-size:clamp(30px,4.6vw,50px);text-transform:uppercase;letter-spacing:.1em}
h1 b,h2 b{font-weight:700;color:var(--accent)}
h2{font-size:clamp(24px,3.2vw,34px);text-transform:uppercase;letter-spacing:.08em}
h3{font-size:20px;font-weight:600;letter-spacing:.05em;color:var(--text-bright)}
h4{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--text-bright)}
p{margin:0 0 16px}
strong{color:var(--text-bright)}

/* =====================================================================
   TOPBAR
   ===================================================================== */
.topbar{background:#080b0f;border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:10px;height:34px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--text-faint);text-transform:uppercase}
.topbar-id{color:var(--accent)}
.topbar-sep{color:#79838f}
.topbar-spacer{flex:1}
.topbar-link{color:var(--text-dim);text-transform:none;letter-spacing:.05em}
.topbar-link:hover{color:var(--accent)}
@media(max-width:640px){.topbar-loc,.topbar-in .topbar-sep:first-of-type{display:none}}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-head{position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg,#141922 0%,#0d1117 100%);
  border-bottom:1px solid var(--panel-edge);
  box-shadow:0 6px 24px rgba(0,0,0,.4)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.site-head .wrap{max-width:1380px}
.logo{display:flex;align-items:center;gap:12px;color:var(--accent)}
.logo-mark{display:flex;color:var(--accent)}
.logo-word{font-family:var(--sans);font-weight:300;font-size:25px;letter-spacing:.14em;color:var(--text-bright);text-transform:none}
.logo-word b{font-weight:700;color:var(--accent)}

.mainnav{display:flex;align-items:center;gap:16px}
.navlist{display:flex;align-items:center;gap:1px;list-style:none}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;padding:9px 8px;border-radius:6px;
  font-size:12.5px;letter-spacing:.01em;color:var(--text);text-transform:uppercase;white-space:nowrap;
  transition:color .15s,background .15s}
.nav-link:hover{color:var(--text-bright);background:rgba(255,255,255,.04)}
.nav-item.active>.nav-link{color:var(--accent)}
.nav-item.active>.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--accent);border-radius:2px}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7}
.subnav{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;list-style:none;
  background:linear-gradient(180deg,#171c24,#11151c);border:1px solid var(--panel-edge);border-radius:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:120}
.nav-item.has-sub:hover .subnav,.nav-item.has-sub.open .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{display:block;padding:9px 12px;border-radius:5px;font-size:13px;color:var(--text);letter-spacing:.03em}
.subnav a:hover{background:rgba(232,179,75,.1);color:var(--text-bright)}
.subnav a.active{color:var(--accent)}

.btn-gold,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:12px 20px;border-radius:6px;transition:transform .05s,box-shadow .15s,filter .15s;border:1px solid transparent}
.btn-gold{color:#10131a;background:linear-gradient(180deg,var(--accent-2),#d99c2e);border-color:var(--accent-deep);
  box-shadow:0 2px 0 #6e4f12,0 8px 20px rgba(232,179,75,.18)}
.btn-gold:hover{filter:brightness(1.06);color:#10131a}
.btn-gold:active{transform:translateY(2px);box-shadow:0 0 0 #6e4f12}
.btn-ghost{color:var(--text-bright);background:linear-gradient(180deg,#2b323d,#20262f);border-color:#161a22;
  box-shadow:0 2px 0 #11151c,0 8px 20px rgba(0,0,0,.3)}
.btn-ghost:hover{filter:brightness(1.12);color:#fff}
.btn-lg{padding:15px 28px;font-size:13.5px}

.nav-login{margin-left:4px;padding:8px 13px;font-size:10.5px;letter-spacing:.12em;line-height:1.3}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:40px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--panel-edge);border-radius:6px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1340px){
  .nav-toggle{display:flex}
  .mainnav{position:fixed;inset:0 0 0 auto;width:min(360px,86vw);flex-direction:column;align-items:stretch;gap:0;
    background:linear-gradient(180deg,#11151c,#0c0f14);border-left:1px solid var(--panel-edge);
    padding:84px 18px 28px;transform:translateX(105%);transition:transform .26s ease;overflow-y:auto;z-index:90;
    box-shadow:-20px 0 50px rgba(0,0,0,.5)}
  .mainnav.open{transform:translateX(0)}
  .navlist{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .nav-link{padding:13px 12px;font-size:14px;justify-content:space-between}
  .nav-item.active>.nav-link::after{display:none}
  .subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    background:rgba(0,0,0,.25);min-width:0;margin:2px 0 6px;padding:2px 0 2px 10px}
  .has-sub .subnav{display:none}
  .has-sub.open .subnav{display:block}
  .nav-login{margin:18px 0 0;width:100%}
}
.nav-scrim{position:fixed;inset:0;background:rgba(4,6,9,.6);opacity:0;visibility:hidden;transition:opacity .26s;z-index:80}
.nav-scrim.show{opacity:1;visibility:visible}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(160deg,#0d1219,#0a0d12)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video{width:100%;height:100%;object-fit:cover;opacity:.78;
  filter:brightness(1.08) contrast(1.04) saturate(1.06)}
.hero-fallback{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 420px at 70% 0%, rgba(232,179,75,.14), transparent 60%),
    linear-gradient(180deg,#16202c 0%,#0c1118 70%);
}
.hero-fallback::after{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 26px)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(1150px 560px at 50% 42%, rgba(8,11,16,.66) 0%, rgba(8,11,16,.40) 52%, rgba(8,11,16,0) 78%),
    linear-gradient(180deg,rgba(10,13,18,.26) 0%,rgba(10,13,18,.10) 30%,rgba(10,13,18,.52) 80%,var(--bg) 100%)}
.hero-in{position:relative;z-index:2;padding:118px 0 96px;text-align:center}
/* zachte schaduw onder de tekst: houdt de letters leesbaar op bewegend beeld
   zonder dat de video als geheel donkerder hoeft */
.hero-in .eyebrow,.hero-in h1,.hero-sub{text-shadow:0 2px 16px rgba(5,8,12,.85),0 1px 3px rgba(5,8,12,.6)}
.hero-in .eyebrow{color:var(--accent)}
.hero h1{margin:0 auto;max-width:14ch}
.hero-sub{margin:20px auto 0;max-width:640px;color:#d7dee6;font-size:18px;line-height:1.6}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-strip{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  border-top:1px solid rgba(255,255,255,.06);background:rgba(8,11,15,.5)}
.hero-strip .stat{flex:1;min-width:160px;padding:18px 22px;text-align:center;border-right:1px solid rgba(255,255,255,.06)}
.hero-strip .stat:last-child{border-right:none}
.hero-strip .num{font-family:var(--mono);font-size:24px;color:var(--lcd);letter-spacing:.04em}
.hero-strip .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--text);text-transform:uppercase;margin-top:4px;line-height:1.6}

/* page header (non-home) */
.page-head{position:relative;border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(160deg,#121821,#0c1016);overflow:hidden}
.page-head::before{content:"";position:absolute;right:-60px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,179,75,.1),transparent 65%)}
.page-head-in{position:relative;padding:30px 0 24px}
.page-head .eyebrow{margin-bottom:8px}
.page-head h1{font-size:clamp(20px,2.5vw,30px);letter-spacing:.06em}
.page-head .lead{font-size:15px;margin-top:10px}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--text-faint);text-transform:uppercase;margin-top:10px;line-height:1.7}
.crumbs a{color:var(--text-dim)}
.crumbs a:hover{color:var(--accent)}

/* =====================================================================
   SECTIONS / LAYOUT
   ===================================================================== */
.section{padding:70px 0}
.section.tight{padding:48px 0}
.section.alt{background:linear-gradient(180deg,#0c1016,#0a0d12);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:720px;margin-bottom:38px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.lead{font-size:18.5px;line-height:1.65;color:#d4dbe3}

/* prose */
.prose{max-width:780px}
.prose.wide{max-width:880px}
.prose p{margin:0 0 17px}
.prose h2{margin:38px 0 16px}
.prose h3{margin:30px 0 12px;color:var(--accent)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 9px}
.prose ul li::marker{color:var(--accent)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.callout{border-left:3px solid var(--accent);background:linear-gradient(180deg,rgba(232,179,75,.07),rgba(232,179,75,.02));
  padding:16px 20px;border-radius:0 8px 8px 0;margin:0 0 22px;color:#dbe2ea}
.callout strong{color:var(--accent)}

/* bilingual EN block */
.lang-en{position:relative;margin:8px 0 22px;padding:16px 18px 16px 20px;border-left:2px solid var(--line);
  background:rgba(255,255,255,.015);border-radius:0 6px 6px 0;color:var(--text-dim);font-size:14.5px;font-style:italic}
.lang-en::before{content:"EN";position:absolute;top:-9px;left:14px;font-family:var(--mono);font-style:normal;
  font-size:9px;letter-spacing:.2em;color:var(--text-faint);background:var(--bg);padding:0 6px;border:1px solid var(--line);border-radius:3px}
.lang-en p{margin:0 0 10px}
.lang-en p:last-child{margin:0}

/* =====================================================================
   CARDS
   ===================================================================== */
.grid{display:grid;gap:22px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

.card{position:relative;display:flex;flex-direction:column;
  background:linear-gradient(170deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--panel-edge);border-radius:var(--r);padding:26px 24px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent 70%);opacity:.0;transition:opacity .2s}
.card:hover{transform:translateY(-4px);border-color:#39414e;box-shadow:0 24px 54px rgba(0,0,0,.45)}
.card:hover::before{opacity:1}
.card .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim)}
.card h3{margin:10px 0 8px}
.card p{font-size:14.5px;color:var(--text-dim);margin:0 0 16px}
.card .hours{font-family:var(--mono);font-size:12px;color:var(--lcd);letter-spacing:.06em;margin-bottom:14px}
.card .card-link{margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.card .card-link .arr{transition:transform .18s;display:inline-block}
.card:hover .card-link .arr{transform:translateX(5px)}
.card.feature{border-color:rgba(232,179,75,.4)}
.card.feature::before{opacity:1}

/* spec list inside cards */
.speclist{list-style:none;margin:0 0 16px}
.speclist li{position:relative;padding:7px 0 7px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text)}
.speclist li:last-child{border-bottom:none}
.speclist li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border:1px solid var(--accent);transform:rotate(45deg)}

/* =====================================================================
   MEDIA with offline fallback
   ===================================================================== */
.media{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--panel-edge);
  background:linear-gradient(160deg,#172230,#0e141c);aspect-ratio:3/2}
.media.tall{aspect-ratio:3/4}
.media.wide{aspect-ratio:16/9}
.media.auto{aspect-ratio:auto}
.media::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background:
    radial-gradient(circle at 50% 42%, rgba(207,227,239,.12), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px)}
.media::after{content:attr(data-label);position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:18px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-faint)}
.media .media-img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.media.failed .media-img{display:none}
.media.contain .media-img{object-fit:contain;background:#0c1118}
figure.figured{margin:0}
figure.figured figcaption{margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase}

.media-row{display:grid;gap:18px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.split.rev .split-media{order:2}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:26px}.split.rev .split-media{order:0}}

/* =====================================================================
   PRICE / DATA ROWS
   ===================================================================== */
.pricelist{list-style:none;border:1px solid var(--panel-edge);border-radius:var(--r);overflow:hidden}
.pricelist li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border-bottom:1px solid var(--line)}
.pricelist li:last-child{border-bottom:none}
.pricelist .pl-name{font-size:15px;color:var(--text-bright)}
.pricelist .pl-name small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;margin-top:3px}
.pricelist .pl-price{font-family:var(--mono);font-size:20px;color:var(--amber);white-space:nowrap;letter-spacing:.02em}

.factbar{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 4px}
.fact{flex:1;min-width:150px;background:linear-gradient(170deg,var(--panel),var(--panel-2));
  border:1px solid var(--panel-edge);border-radius:8px;padding:16px 18px}
.fact .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.fact .v{font-size:16px;color:var(--text-bright);margin-top:6px}
.fact .v.amber{color:var(--amber);font-family:var(--mono)}

/* =====================================================================
   CTA BANNER
   ===================================================================== */
.cta{position:relative;border:1px solid var(--panel-edge);border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,#161d27,#0e131a);padding:46px 40px;text-align:center}
.cta::before{content:"";position:absolute;inset:0;opacity:.7;
  background:radial-gradient(600px 240px at 50% -30%, rgba(232,179,75,.16), transparent 60%)}
.cta>*{position:relative}
.cta h2{margin-bottom:12px}
.cta p{max-width:580px;margin:0 auto 26px;color:#d4dbe3}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.info-card{background:linear-gradient(170deg,var(--panel),var(--panel-2));border:1px solid var(--panel-edge);
  border-radius:var(--r);padding:28px 26px}
.info-card address{font-style:normal;line-height:1.95;font-size:15.5px;color:var(--text)}
.info-card .muted{color:var(--text-dim);font-size:13px}
.info-line{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.info-line:last-child{border-bottom:none}
.info-line .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);min-width:96px;padding-top:3px}
.info-line .v{font-size:15.5px;color:var(--text-bright)}

/* links page */
.linkgroup{margin-bottom:30px}
.linkgroup h3{color:var(--accent);margin-bottom:12px}
.linklist{list-style:none;display:grid;gap:10px}
.linklist a{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--panel-edge);border-radius:8px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));color:var(--text-bright);transition:border-color .15s,transform .15s}
.linklist a:hover{border-color:var(--accent);transform:translateX(3px)}
.linklist a .lk-host{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-left:auto}

/* =====================================================================
   GALLERY + LIGHTBOX
   ===================================================================== */
.gallery{columns:4 240px;column-gap:16px}
.gallery .g-item{break-inside:avoid;margin:0 0 16px;cursor:pointer;border-radius:8px;overflow:hidden;
  border:1px solid var(--panel-edge);background:linear-gradient(160deg,#172230,#0e141c);position:relative;display:block;width:100%;
  aspect-ratio:3/2}
.gallery .g-item .media-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s,filter .2s;position:relative;z-index:1}
.gallery .g-item::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(circle at 50% 42%, rgba(207,227,239,.12), transparent 55%),
  repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px)}
.gallery .g-item::after{content:attr(data-label);position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);text-align:center;padding:14px}
.gallery .g-item:hover .media-img{transform:scale(1.05)}
.gallery .g-item.failed .media-img{display:none}
.gallery-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.gallery-cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery-cats{grid-template-columns:1fr}}
.cat-card{position:relative;display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--panel-edge);
  aspect-ratio:4/3;background:linear-gradient(160deg,#172230,#0e141c)}
.cat-card .media-img{width:100%;height:100%;object-fit:cover;transition:transform .4s;position:relative;z-index:1}
.cat-card::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(circle at 50% 42%, rgba(207,227,239,.12), transparent 55%),
  repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px)}
.cat-card.failed .media-img{display:none}
.cat-card:hover .media-img{transform:scale(1.05)}
.cat-card .cat-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;
  background:linear-gradient(0deg,rgba(8,11,15,.92),transparent);color:var(--text-bright);
  font-size:16px;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between}
.cat-card .cat-label .n{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.14em}

.lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(5,7,10,.94);padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:84vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(20,25,32,.7);border:1px solid var(--panel-edge);
  color:var(--text-bright);font-family:var(--mono);cursor:pointer;border-radius:8px;width:50px;height:50px;font-size:20px;
  display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(232,179,75,.2);border-color:var(--accent)}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;color:var(--text-dim)}
@media(max-width:600px){.lb-prev,.lb-next{width:42px;height:42px;font-size:17px}.lb-prev{left:8px}.lb-next{right:8px}}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-foot{margin-top:10px;border-top:1px solid var(--panel-edge);
  background:linear-gradient(180deg,#0b0f14,#080b0f)}
.foot-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.4fr;gap:34px;padding:54px 26px 38px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.f-title{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.f-col ul{list-style:none}
.f-col li{margin:0 0 9px}
.f-col a{color:var(--text-dim);font-size:14px}
.f-col a:hover{color:var(--accent)}
.f-contact address{font-style:normal;line-height:1.85;color:var(--text);font-size:14px}
.f-contact .muted{color:var(--text-faint);font-size:12.5px}
.f-login{margin-top:16px}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-faint);flex-wrap:wrap}
.foot-bar a{color:var(--text-dim)}
.foot-bar a:hover{color:var(--accent)}

/* misc */
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.divider{height:1px;background:var(--line);margin:40px 0;border:none}
.note-soft{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-faint)}

/* =====================================================================
   FORMS  (contact + aanmelden)
   ===================================================================== */
.nav-cta{border:1px solid rgba(232,179,75,.55);border-radius:6px;color:var(--accent);padding:9px 15px}
.nav-cta:hover{background:rgba(232,179,75,.12);color:var(--accent-2)}
.nav-item.active>.nav-cta{color:var(--accent)}
.nav-item.active>.nav-cta::after{display:none}
@media(max-width:1340px){.nav-cta{justify-content:center;margin-top:8px;background:rgba(232,179,75,.08)}}

.form-wrap{background:linear-gradient(170deg,var(--panel),var(--panel-2));border:1px solid var(--panel-edge);border-radius:var(--r);padding:28px 26px}
.form{display:grid;gap:18px}
.form.hide{display:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:620px){.form-row,.form-row.three{grid-template-columns:1fr}}
.fieldset-title{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:8px 0 -2px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;font-family:var(--sans);font-size:15px;color:#eef3f8;background:#0c0f15;border:1px solid #2c3442;border-radius:5px;outline:none;transition:border-color .15s}
.field input::placeholder,.field textarea::placeholder{color:#56606c}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select:invalid{color:#56606c}
.field select option{background:#12161d;color:#eef3f8}
.field-note{font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.consent{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border:1px solid var(--panel-edge);border-radius:8px;background:rgba(0,0,0,.18)}
.consent input[type=checkbox]{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--accent);cursor:pointer}
.consent .decl{font-size:13px;line-height:1.62;color:var(--text-dim)}
.consent .decl strong{color:var(--text)}
.form-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:2px}
.form-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-faint)}

/* honingpot: verborgen veld tegen invulrobots. Nooit op display:none zetten —
   sommige robots slaan die juist over. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{
  display:none;margin-top:14px;border:1px solid rgba(224,82,74,.45);
  background:rgba(224,82,74,.08);border-radius:var(--r);padding:14px 16px;
  color:#f0a9a4;font-size:14px;line-height:1.6;
}
.form-error.show{display:block}
.form.is-sending{opacity:.6;pointer-events:none}
.form-success{display:none;border:1px solid rgba(70,217,124,.4);background:linear-gradient(180deg,rgba(70,217,124,.08),rgba(70,217,124,.02));border-radius:var(--r);padding:26px 26px}
.form-success.show{display:block}
.form-success h3{color:var(--green);margin-bottom:10px}
.form-success p{color:var(--text);margin:0 0 8px}
.form-success p:last-child{margin:0}


/* =====================================================================
   RT TRAINER TIJDELIJK VERBORGEN — aangezet op 28 augustus 2026
   ---------------------------------------------------------------------
   De trainer is nog niet af (sessiecodes, live test, Nederlandse
   consoles). Zolang dat loopt willen we bezoekers er niet in laten
   belanden. De pagina zelf blijft gewoon bereikbaar via het adres
   rt-trainer.html, dus Ruben en Menno kunnen er nog bij.

   WEER ZICHTBAAR MAKEN: verwijder dit hele blok en upload site.css
   opnieuw. Haal dan ook de regel <meta name="robots" content="noindex">
   uit rt-trainer.html.
   ===================================================================== */
.nav-login,       /* knop in de header */
.f-login,         /* knop in de footer */
.rt-login{        /* knop op de homepage */
  display:none !important;
}