/* ViVortis-parkeerpagina. Huisstijl en maatvoering gelijk aan login.vivortis.com. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/outfit-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/outfit-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/outfit-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"ViVortis Punt";font-weight:100 900;font-style:normal;font-display:block;src:url(fonts/vivortis-punt.woff2) format("woff2");unicode-range:U+002E}

:root{
  --navy-950:#0a0a3c;--navy-700:#000080;--oranje:#ff7518;--oranje-600:#e5650f;
  --achtergrond:#f9fafb;--kaart:#ffffff;--tekst:#1d2939;--titel:#0a0a3c;
  --grijs-600:#475467;--grijs-500:#667085;--lavendel:#c9cbe6;--rand:#e4e7ec;
  --schaduw:0 1px 2px rgba(10,10,60,.06),0 34px 80px -28px rgba(10,10,60,.38);
  --focus:var(--navy-700);
  color-scheme:light dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--achtergrond);color:var(--tekst);
  font:400 16px/1.5 "Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.punt{color:var(--oranje);font-family:"ViVortis Punt","Outfit",sans-serif;font-synthesis:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* Kop: navy vlak met oranje cirkel, zoals login.vivortis.com */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-950);color:#fff;padding:20px 20px 112px;--focus:var(--oranje)}
.cirkel{position:absolute;z-index:-1;top:-13rem;right:-9rem;width:18rem;height:18rem;border-radius:50%;background:var(--oranje)}
.kop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1184px;min-height:46px;margin:0 auto}
/* Taalwisselaar: pil zoals op login.vivortis.com, met donkere ondergrond zodat hij ook op de oranje cirkel leesbaar is */
.taal{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(10,10,60,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.taal a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:36px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.85);transition:color .15s ease,background-color .15s ease}
.taal a:hover{color:#fff;background:rgba(255,255,255,.08)}
.taal a[aria-current]{background:#fff;color:var(--navy-950)}
.taal a:focus-visible{outline-offset:2px;border-radius:999px}
.logo{display:inline-flex;padding:4px 0;border-radius:6px}
.logo img{height:24px;width:auto}
.intro{position:relative;max-width:820px;margin:clamp(44px,7vh,96px) auto 0;text-align:center}
.intro h1{margin:0 auto;max-width:15ch;font-size:34px;line-height:1.06;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.intro p{margin:18px auto 0;max-width:34rem;font-size:16px;line-height:1.625;color:var(--lavendel);text-wrap:pretty}

/* Kaart: valt over de kop heen */
.hoofd{position:relative;display:flex;justify-content:center;margin-top:-60px;padding:0 16px}
.kaart{width:100%;max-width:460px;overflow:hidden;border-radius:24px;background:var(--kaart);box-shadow:var(--schaduw)}
.kaart-in{padding:26px 24px 28px}
.status{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;line-height:1.5;color:var(--grijs-600)}
.status svg{flex:none;color:var(--oranje)}
.domein{margin:10px 0 0;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--titel);overflow-wrap:anywhere}

/* Verkoop: vraag + hoofdknop, knopstijl gelijk aan login.vivortis.com */
.verkoop{margin-top:22px;padding-top:22px;border-top:1px solid var(--rand)}
.verkoop p{margin:0;font-size:15px;line-height:1.6;color:var(--grijs-600);text-wrap:pretty}
.knop{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-top:18px;padding:0 24px;border-radius:999px;background:var(--navy-700);color:#fff;font-size:16px;font-weight:600;text-decoration:none;box-shadow:0 10px 26px -12px rgba(0,0,128,.7);transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.knop svg{flex:none;transition:transform .2s ease}
.knop:hover{background:#00006c;box-shadow:0 14px 30px -12px rgba(0,0,128,.8)}
.knop:hover svg{transform:translateX(3px)}
.knop:active{transform:translateY(1px)}
.knop:focus-visible{outline-color:var(--oranje);border-radius:999px}

/* Voettekst */
.voet{margin-top:auto;padding:44px 16px 28px;text-align:center;font-size:14px;line-height:1.6;color:var(--grijs-500)}
.voet p{margin:0}
.voet a{color:var(--grijs-600);text-decoration:underline;text-decoration-color:rgba(71,84,103,.35);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease,text-decoration-color .15s ease}
.voet a:hover{color:var(--titel);text-decoration-color:var(--oranje)}
.sep{display:inline-block;margin:0 .55em;color:#98a2b3}

/* Rustige binnenkomst */
@keyframes op{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cirkel{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.intro{animation:op .55s cubic-bezier(.2,.7,.2,1) both}
.kaart{animation:op .6s cubic-bezier(.2,.7,.2,1) .08s both}
.cirkel{animation:cirkel .9s cubic-bezier(.2,.7,.2,1) both}

@media (min-width:640px){
  .hero{padding:28px 32px 144px}
  .cirkel{top:-16rem;right:-13rem;width:26rem;height:26rem}
  .logo img{height:32px}
  .intro{margin-top:clamp(56px,9vh,128px)}
  .intro h1{max-width:10.5em;font-size:48px}
  .intro p{margin-top:20px;font-size:18px}
  .hoofd{margin-top:-72px;padding:0 32px}
  .kaart-in{padding:34px 40px 40px}
  .verkoop{margin-top:26px;padding-top:26px}
  .knop{min-height:54px}
  .domein{font-size:30px}
}
@media (min-width:1024px){
  .hero{padding:28px 48px 156px}
  .intro h1{font-size:56px;letter-spacing:-.025em}
  .intro p{font-size:19px}
  .hoofd{margin-top:-76px}
}
@media (min-width:1280px){
  .cirkel{top:-15rem;right:-10rem;width:35rem;height:35rem}
}

@media (prefers-color-scheme:dark){
  :root{--achtergrond:#07071f;--kaart:#101828;--tekst:#e4e7ec;--titel:#ffffff;--grijs-600:#98a2b3;--grijs-500:#98a2b3;--rand:rgba(255,255,255,.1);--focus:var(--oranje);
    --schaduw:0 0 0 1px rgba(255,255,255,.08),0 34px 80px -28px rgba(0,0,0,.7)}
  .knop{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 26px -12px rgba(0,0,0,.8)}
  .voet a{color:#d0d5dd;text-decoration-color:rgba(208,213,221,.35)}
  .voet a:hover{color:#fff}
  .sep{color:#667085}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (forced-colors:active){
  .cirkel{display:none}
  .kaart{border:1px solid CanvasText}
}