/* Karma Mobility — nachtlaag k1: de avondrit (thema-nacht) + rijdende streep (alle thema's) */
:root{ --k-nacht:#0A130E; --k-diep:#0F2318; --k-vlak:#13251B; --k-rand:rgba(233,240,233,.12);
  --k-creme:#EDF3ED; --k-dim:#AFC2B4; --k-lamp:#FFE9C4; --k-amber:#F2E7CE; --k-groen:#4CAF6E;
  --k-mono:'IBM Plex Mono',monospace; --k-ease:cubic-bezier(.22,1,.36,1) }

/* ── Rijdende wegstreep (progress, alle pagina's) ── */
#k-strip{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9997; pointer-events:none }
#k-strip i{ display:block; height:100%; width:calc(var(--kp,0)*1%);
  background:repeating-linear-gradient(90deg, var(--k-amber) 0 26px, transparent 26px 44px);
  animation:k-rijden 1.1s linear infinite; transition:width .15s linear }
body.thema-dag #k-strip i{ background:repeating-linear-gradient(90deg, #2E6B3E 0 26px, transparent 26px 44px); opacity:.75 }
@keyframes k-rijden{ to{ background-position:-44px 0 } }

/* ── Preloader: koplampen gaan aan ── */
#k-intro{ position:fixed; inset:0; z-index:10000; background:#060B08; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:34px; transition:opacity .55s ease, visibility .55s;
  animation:k-failsafe .1s linear 2.7s forwards }
.k-lampen{ display:flex; gap:64px }
.k-lampen span{ width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle, var(--k-lamp) 0%, rgba(255,233,196,.35) 38%, transparent 70%);
  filter:blur(2px); opacity:0; transform:scale(.4); animation:k-lamp .9s var(--k-ease) .15s forwards }
.k-lampen span:last-child{ animation-delay:.28s }
@keyframes k-lamp{ to{ opacity:1; transform:scale(1) } }
.k-intro-merk{ font-family:'Outfit',sans-serif; font-weight:600; letter-spacing:.42em; text-indent:.42em;
  font-size:15px; color:var(--k-creme); opacity:0; animation:k-op .7s ease .75s forwards }
.k-intro-merk em{ font-style:normal; color:var(--k-amber) }
@keyframes k-op{ to{ opacity:1 } }
.k-intro-weg{ width:min(340px,70vw); height:3px; overflow:hidden; opacity:0; animation:k-op .5s ease 1s forwards }
.k-intro-weg i{ display:block; height:100%;
  background:repeating-linear-gradient(90deg, var(--k-amber) 0 22px, transparent 22px 38px);
  animation:k-rijden .8s linear infinite }
#k-intro.k-klaar{ opacity:0; visibility:hidden }
#k-intro.k-weg{ display:none; animation:none }
@keyframes k-failsafe{ to{ opacity:0; visibility:hidden; pointer-events:none } }

/* ── Nachtbasis ── */
body.thema-nacht{ background:var(--k-nacht); color:var(--k-creme) }
body.thema-nacht main a{ color:var(--k-amber) }
body.thema-nacht h1, body.thema-nacht h2, body.thema-nacht h3{ color:var(--k-creme) }
body.thema-nacht h1 em, body.thema-nacht h2 em{ color:var(--k-amber); font-style:italic }
body.thema-nacht ::selection{ background:var(--k-amber); color:var(--k-nacht) }
body.thema-nacht nav, body.thema-nacht .nav-desk{ }
body.thema-nacht header nav a, body.thema-nacht .nav-logo{ color:var(--k-creme) }
body.thema-nacht footer{ background:#07100B; color:var(--k-dim) }
body.thema-nacht table th{ background:var(--k-diep); color:var(--k-creme) }
body.thema-nacht table td{ border-color:var(--k-rand); color:var(--k-dim) }

/* Lantaarnkegel op secties */
.k-kegel{ position:relative }
.k-kegel::before{ content:""; position:absolute; top:0; left:50%; width:min(760px,90vw); height:340px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse 55% 100% at 50% 0%, rgba(255,233,196,.10), transparent 70%) }
.k-paal{ position:relative; padding-left:26px }
.k-paal::before{ content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:1px; background:var(--k-rand);
  transform:scaleY(0); transform-origin:top; transition:transform .9s var(--k-ease) }
.k-paal::after{ content:""; position:absolute; left:-4px; top:.35em; width:9px; height:9px; border-radius:50%;
  background:var(--k-lamp); box-shadow:0 0 18px 4px rgba(255,233,196,.5); opacity:0; transition:opacity .6s ease .5s }
.k-in .k-paal::before, .k-paal.k-in::before{ transform:scaleY(1) }
.k-in .k-paal::after, .k-paal.k-in::after{ opacity:1 }

/* Reveals */
.k-rev{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--k-ease), transform .9s var(--k-ease) }
.k-rev.k-in{ opacity:1; transform:none }

/* Kaarten met licht dat de hand volgt */
.k-kaart{ position:relative; background:var(--k-vlak); border:1px solid var(--k-rand); border-radius:16px;
  overflow:hidden; transition:transform .5s var(--k-ease), border-color .5s }
.k-kaart::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,20%), rgba(255,233,196,.10), transparent 60%) }
.k-kaart:hover{ transform:translateY(-4px); border-color:rgba(76,175,110,.45) }
.k-kaart:hover::before{ opacity:1 }

/* Kentekenplaat-tag */
.k-plaat{ display:inline-flex; align-items:center; gap:8px; font-family:var(--k-mono); font-size:11px;
  letter-spacing:.12em; color:var(--k-lamp); border:1px solid rgba(76,175,110,.5); border-radius:5px;
  padding:4px 10px; background:rgba(76,175,110,.07); text-transform:uppercase }
.k-plaat b{ color:var(--k-amber); font-weight:500 }

/* Odometer-cijfers */
.k-odo{ font-family:var(--k-mono); font-variant-numeric:tabular-nums; color:var(--k-lamp) }

/* Knop met streep-sweep */
.k-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden;
  background:var(--k-amber); color:#1B1409; font-weight:700; font-size:.92rem; padding:.85rem 1.6rem;
  border-radius:100px; text-decoration:none; transition:transform .35s var(--k-ease), box-shadow .35s }
.k-btn::after{ content:""; position:absolute; top:50%; left:-30%; width:26px; height:2px; transform:translateY(-50%);
  background:#1B1409; opacity:0; transition:left .5s var(--k-ease), opacity .3s }
.k-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(76,175,110,.55) }
.k-btn:hover::after{ left:108%; opacity:.6 }
.k-btn.k-stil{ background:transparent; color:var(--k-creme); border:1px solid var(--k-rand) }
.k-btn.k-stil:hover{ border-color:var(--k-amber); box-shadow:none }

/* Keyless-puls */
.k-puls{ position:relative; width:52px; height:52px; border-radius:14px; border:1px solid var(--k-rand);
  display:flex; align-items:center; justify-content:center; color:var(--k-amber); flex:0 0 auto }
.k-puls::after{ content:""; position:absolute; inset:-1px; border-radius:14px; border:1px solid var(--k-amber);
  animation:k-puls 2.6s ease-out infinite }
@keyframes k-puls{ 0%{ opacity:.8; transform:scale(1) } 70%,100%{ opacity:0; transform:scale(1.45) } }

/* Footer-status */
.k-status{ display:flex; align-items:center; gap:10px; font-family:var(--k-mono); font-size:11px;
  letter-spacing:.14em; color:var(--k-dim); text-transform:uppercase; margin:0 0 18px }
.k-status [data-klok]{ color:var(--k-lamp) }
.k-dot{ width:6px; height:6px; border-radius:50%; background:var(--k-groen); flex:0 0 auto;
  box-shadow:0 0 10px 2px rgba(76,175,110,.55); animation:k-adem 3s ease-in-out infinite }
@keyframes k-adem{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
body.thema-dag .k-status{ color:#5a6a5f } body.thema-dag .k-status [data-klok]{ color:#0F2318 }

/* Vloeiende paginawissels */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:k-vt-uit .28s ease both }
::view-transition-new(root){ animation:k-vt-in .45s var(--k-ease) both }
@keyframes k-vt-uit{ to{ opacity:0 } }
@keyframes k-vt-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* Home-specifiek */
.kh-hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; padding:7rem 5vw 4rem }
.kh-hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; filter:saturate(.7) }
.kh-hero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,8,.5), rgba(10,19,14,.94) 72%),
             radial-gradient(60% 45% at 22% 8%, rgba(255,233,196,.14), transparent 65%) }
.kh-hero-in{ position:relative; z-index:2; max-width:1180px; margin:0 auto; width:100% }
.kh-tag{ font-family:var(--k-mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--k-amber); margin-bottom:1.4rem }
.kh-hero h1{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:300; font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1.04; letter-spacing:-.015em; max-width:14ch; margin-bottom:1.3rem }
.kh-usp{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; color:var(--k-dim); font-size:.95rem; margin:0 0 2rem }
.kh-usp span{ display:inline-flex; align-items:center; gap:.5rem }
.kh-usp b{ color:var(--k-lamp); font-weight:600 }
.kh-acts{ display:flex; gap:14px; flex-wrap:wrap }
.kh-vloot{ padding:2.5rem 5vw 5rem; max-width:1240px; margin:0 auto }
.kh-vloot-kop{ display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem }
.kh-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px }
.kh-bus{ display:flex; flex-direction:column }
.kh-bus-img{ aspect-ratio:16/10; background:#0C1710; overflow:hidden }
.kh-bus-img img{ width:100%; height:100%; object-fit:cover; opacity:.92; transition:transform .8s var(--k-ease) }
.k-kaart:hover .kh-bus-img img{ transform:scale(1.04) }
.kh-bus-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:9px; flex:1 }
.kh-bus-specs{ color:var(--k-dim); font-size:.82rem; line-height:1.5 }
.kh-bus-prijs{ margin-top:auto; display:flex; align-items:baseline; gap:.45rem }
.kh-bus-prijs .k-odo{ font-size:1.5rem }
.kh-bus-prijs small{ color:var(--k-dim); font-size:.78rem }
.kh-bus .k-btn{ margin:0 18px 18px; font-size:.82rem; padding:.7rem 1rem }
.kh-sectie{ padding:5.5rem 5vw; max-width:1180px; margin:0 auto }
.kh-stap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; margin-top:2.2rem }
.kh-stap article{ display:flex; gap:16px; align-items:flex-start }
.kh-stap h3{ font-size:1.05rem; margin:0 0 .4rem; font-family:'Outfit',sans-serif; font-weight:600 }
.kh-stap p{ color:var(--k-dim); font-size:.92rem; line-height:1.7; margin:0 }
.kh-nr{ font-family:var(--k-mono); color:var(--k-amber); font-size:.85rem; padding-top:.2rem }
.kh-review{ background:var(--k-vlak); border:1px solid var(--k-rand); border-radius:14px; padding:20px 22px }
.kh-review p{ color:var(--k-creme); font-size:.95rem; line-height:1.65; margin:0 0 .7rem; font-style:italic }
.kh-review span{ font-family:var(--k-mono); font-size:.72rem; letter-spacing:.18em; color:var(--k-dim); text-transform:uppercase }
.kh-cijfers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:2rem }
.kh-cijfer{ border:1px solid var(--k-rand); border-radius:12px; padding:18px; text-align:center }
.kh-cijfer .k-odo{ font-size:1.7rem; display:block }
.kh-cijfer small{ color:var(--k-dim); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase }
@media (max-width:720px){ .kh-hero{ min-height:74vh; padding-top:6rem } }

/* Rust voor wie daarom vraagt */
@media (prefers-reduced-motion: reduce){
  #k-intro{ display:none }
  #k-strip i, .k-dot, .k-puls::after, .k-intro-weg i{ animation:none }
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
  .k-rev{ opacity:1; transform:none; transition:none }
  .k-paal::before{ transform:scaleY(1) } .k-paal::after{ opacity:1 }
}

/* ── k2: engines met inline-licht worden nachtvlakken ── */
body.thema-nacht [style*="background:#fff"], body.thema-nacht [style*="background: #fff"],
body.thema-nacht [style*="background:#ffffff"]{ background:transparent !important }
body.thema-nacht [style*="#F4F7F4"], body.thema-nacht [style*="#F7F8F5"],
body.thema-nacht [style*="#EDF6EF"], body.thema-nacht [style*="#eef3ef"],
body.thema-nacht [style*="#F2F5F0"]{ background:var(--k-vlak) !important }
body.thema-nacht [style*="color:#0F2318"], body.thema-nacht [style*="color: #0F2318"],
body.thema-nacht [style*="color:#1F4A2C"]{ color:var(--k-creme) !important }
body.thema-nacht [style*="color:#4a5a50"], body.thema-nacht [style*="color:#6a7a70"],
body.thema-nacht [style*="color:#8a978e"], body.thema-nacht [style*="color:#334155"],
body.thema-nacht [style*="color:#475569"]{ color:var(--k-dim) !important }
body.thema-nacht [style*="#E2EAE3"]{ border-color:var(--k-rand) !important }
body.thema-nacht main table{ background:transparent }
body.thema-nacht main table td{ border-bottom:1px solid var(--k-rand) }
body.thema-nacht main table th{ background:var(--k-diep) !important; color:var(--k-creme) !important }

/* ── k2: routelijn [plaats] → Hoofddorp ── */
.k-route{ padding:1.6rem 5vw 0; max-width:1100px; margin:0 auto }
.k-route-in{ display:flex; align-items:center; gap:18px; background:var(--k-vlak); border:1px solid var(--k-rand);
  border-radius:14px; padding:18px 22px; flex-wrap:wrap }
.k-route svg{ flex:1 1 260px; min-width:220px; height:34px; display:block }
.k-route .k-baan{ stroke:var(--k-rand); stroke-width:2 }
.k-route .k-rit{ stroke:var(--k-amber); stroke-width:2; stroke-dasharray:9 8;
  stroke-dashoffset:600; transition:stroke-dashoffset 2.2s var(--k-ease) .2s }
.k-route.k-in .k-rit{ stroke-dashoffset:0; animation:k-rijden 1.4s linear 2.4s infinite }
.k-route .k-stip{ fill:var(--k-lamp) } .k-route .k-stip-eind{ fill:var(--k-amber) }
.k-route-lbl{ font-family:var(--k-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; fill:var(--k-dim) }
.k-route-feit{ display:flex; gap:1.4rem; align-items:baseline; white-space:nowrap }
.k-route-feit b{ font-family:var(--k-mono); color:var(--k-lamp); font-size:1.25rem; font-weight:500 }
.k-route-feit small{ color:var(--k-dim); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-left:.35rem }
body.thema-dag .k-route-in{ background:#F4F7F4; border-color:#E2EAE3 }
body.thema-dag .k-route .k-rit{ stroke:#2E6B3E }
body.thema-dag .k-route .k-stip, body.thema-dag .k-route .k-stip-eind{ fill:#2E6B3E }
body.thema-dag .k-route-feit b{ color:#0F2318 }

/* ── k2: vergelijkingstabel-accenten ── */
body.thema-nacht .k-wij{ color:var(--k-lamp); font-weight:600 }
.k-bron{ font-size:.78rem; color:var(--k-dim); font-family:var(--k-mono); letter-spacing:.04em }

/* ── k3-fix: navigatie op nachtpagina's ── */
body.thema-nacht nav#navbar, body.thema-nacht nav#navbar.nav-solid,
body.thema-nacht nav#navbar.scrolled{ background:rgba(9,16,12,.92) !important;
  backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--k-rand) }
body.thema-nacht nav#navbar .nav-links a{ color:var(--k-creme) !important }
body.thema-nacht nav#navbar .nav-links a:hover,
body.thema-nacht nav#navbar .nav-links a.active{ color:var(--k-amber) !important }
body.thema-nacht nav#navbar .nav-cta{ background:var(--k-amber) !important; color:#1B1409 !important; border-color:var(--k-amber) !important }
body.thema-nacht nav#navbar .nav-logo *{ color:var(--k-creme) !important }
body.thema-nacht nav#navbar .nav-toggle span{ background:var(--k-creme) !important }

/* route-strook: nette basislaag ook vóór de reveal */
.k-route-in{ min-height:70px }
.k-route svg text{ font-family:var(--k-mono) }

/* ── k4: merkgroen voor alle actie-elementen ── */
.k-btn{ background:#2E6B3E; color:#fff }
.k-btn:hover{ background:#4CAF6E; color:#fff; box-shadow:0 10px 30px rgba(76,175,110,.35) }
.k-btn::after{ background:rgba(255,255,255,.55) }
.k-btn.k-stil{ background:transparent; color:var(--k-creme); border:1px solid var(--k-rand) }
.k-btn.k-stil:hover{ background:rgba(76,175,110,.12); color:#fff; box-shadow:none }
body.thema-nacht nav#navbar .nav-cta{ background:#2E6B3E !important; color:#fff !important; border-color:#2E6B3E !important }
body.thema-nacht nav#navbar .nav-cta:hover{ background:#4CAF6E !important }
body.thema-nacht nav#navbar .nav-links a:hover,
body.thema-nacht nav#navbar .nav-links a.active{ color:#9FD9AE !important }
body.thema-nacht main a:not(.k-btn){ color:#9FD9AE }
body.thema-nacht main a:not(.k-btn):hover{ color:#fff }
body.thema-nacht ::selection{ background:#2E6B3E; color:#fff }
.k-route .k-stip-eind, body.thema-nacht .k-stip-eind{ fill:#4CAF6E }
.kh-tag, .kh-nr{ color:#9FD9AE }

/* ── k5: vrije ruimte voor de chatballon ── */
footer .footer-bottom{ padding-right:118px }
@media (max-width:700px){ footer .footer-bottom{ padding-right:0; padding-bottom:96px } }

/* ── k6: logo compact + nooit over het menu, mobiel menu op nacht ── */
body.thema-nacht nav#navbar{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem }
body.thema-nacht nav#navbar .nav-logo{ background:transparent !important; border:none !important;
  box-shadow:none !important; backdrop-filter:none !important; padding:0 !important;
  position:static !important; flex:0 0 auto }
body.thema-nacht nav#navbar .nav-logo svg{ width:150px; height:36px; display:block }
body.thema-nacht nav#navbar .logo-name{ fill:var(--k-creme) !important }
body.thema-nacht nav#navbar .logo-sub{ fill:#9FD9AE !important }
body.thema-nacht nav#navbar .logo-line{ stroke:rgba(242,231,206,.25) !important }
@media (min-width:901px){
  body.thema-nacht nav#navbar .nav-links{ margin-left:auto; flex-wrap:nowrap }
}
body.thema-nacht nav#navbar .nav-toggle span,
body.thema-nacht nav#navbar.menu-open .nav-toggle span,
body.thema-nacht nav#navbar .nav-toggle.active span{ background:var(--k-creme) !important }
body.thema-nacht nav#navbar.menu-open{ background:rgba(9,16,12,.97) !important; box-shadow:0 1px 0 var(--k-rand) }
body.thema-nacht nav#navbar.menu-open .logo-name{ fill:var(--k-creme) !important }
body.thema-nacht nav#navbar.menu-open .logo-sub{ fill:#9FD9AE !important }
body.thema-nacht nav#navbar.menu-open .logo-line{ stroke:rgba(242,231,206,.25) !important }
body.thema-nacht #navbar #navLinks{ background:#0C1710 !important }
body.thema-nacht #navbar #navLinks li{ border-color:var(--k-rand) !important }
body.thema-nacht #navbar #navLinks a{ color:var(--k-creme) !important; background:transparent !important }
body.thema-nacht #navbar #navLinks a:hover,
body.thema-nacht #navbar #navLinks a.active{ color:#9FD9AE !important; background:rgba(76,175,110,.08) !important }
body.thema-nacht #navbar #navLinks a.nav-classic{ color:var(--k-amber) !important; background:transparent !important }
body.thema-nacht #navbar #navLinks a.nav-cta{ background:#2E6B3E !important; color:#fff !important }

/* ── k7: hamburger vanaf 1100px (was 768) zodat de balk nooit overloopt ── */
@media (max-width:1100px){
  nav#navbar .nav-links{ display:none }
  nav#navbar .nav-toggle{ display:flex }
}
@media (min-width:1101px){
  nav#navbar .nav-toggle{ display:none }
}