/* Homepagina claartje.app: alleen de keuze tussen de twee apps, in één scherm (besluit Yamiko 30 okt 2026).
   Nachtlucht van de VCA-site; de Theorie-tegel in de lila stickerstijl van die app. */
:root { --nacht:#0a1326; --ink:#f3f6fc; --muted:#a8b5d1; --oranje:#f76925; --gloed:#ff8a4d; --inkt:#16131f; --lila:#c8b8ff; --lime:#d6f25a; --zacht:cubic-bezier(.2,.8,.2,1); }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body.keuze { min-height:100dvh; color:var(--ink); font-family:Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight:700; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:radial-gradient(800px 560px at 25% 70%, rgba(247,105,37,.16), transparent 62%), radial-gradient(760px 560px at 78% 70%, rgba(200,184,255,.16), transparent 62%), linear-gradient(180deg,#0a1326,#0c1730 55%,#0a1326); background-color:var(--nacht); }
a { color:inherit; }
:focus-visible { outline:3px solid #ffc21a; outline-offset:4px; border-radius:10px; }
#nx-sterren { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.9; }
.kz { position:relative; z-index:1; min-height:100dvh; max-width:1100px; margin:0 auto; padding:0 32px; display:flex; flex-direction:column; }

@keyframes kz-op { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes kz-zweef { 50% { transform:translateY(-10px); } }
@keyframes kz-adem { 50% { opacity:.65; transform:scale(1.08); } }
@keyframes kz-wolk { from { opacity:0; transform:translateX(-50%) translateY(10px) scale(.9); } to { opacity:1; transform:translateX(-50%); } }
@keyframes kz-rij { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-3px) rotate(-.6deg); } }

.kz-kop { padding:24px 0 0; animation:kz-op .7s var(--zacht) both; }
.kz-merk { font-weight:1000; font-size:30px; letter-spacing:-0.03em; text-decoration:none; }
.kz-merk i { font-style:normal; color:var(--oranje); }

.kz-midden { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0 20px; }
.kz-claartje { position:relative; width:200px; height:200px; padding-top:44px; animation:kz-op .9s .1s var(--zacht) both; }
.kz-gloed { position:absolute; inset:10px -30px -10px; border-radius:50%; background:radial-gradient(50% 50% at 50% 55%, rgba(247,105,37,.45), transparent 70%); filter:blur(8px); animation:kz-adem 6s ease-in-out infinite; }
.kz-mascotte { position:relative; width:150px; margin:0 auto; }
.kz-mascotte svg { display:block; width:100%; height:auto; overflow:visible; animation:kz-zweef 5.5s ease-in-out infinite; filter:drop-shadow(0 22px 22px rgba(0,0,0,.35)); }
.kz-wolk { position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:2; white-space:nowrap; background:#fff; color:#142538; font-weight:900; font-size:17px; padding:11px 18px; border-radius:20px; box-shadow:0 18px 36px -16px rgba(0,0,0,.7); animation:kz-wolk .7s .7s var(--zacht) both; }
.kz-wolk::after { content:""; position:absolute; left:50%; bottom:-7px; width:15px; height:15px; background:#fff; border-radius:3px; transform:translateX(-50%) rotate(45deg); }
.kz-titel { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.kz-keus { display:grid; grid-template-columns:1fr 1fr; gap:24px; width:100%; margin-top:26px; }
.kz-tegel { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:30px 30px 28px; border-radius:30px; text-decoration:none; overflow:hidden; min-height:300px; transition:transform .45s var(--zacht), box-shadow .45s var(--zacht), border-color .3s; animation:kz-op .9s var(--zacht) both; }
.kz-tegel.vca { animation-delay:.3s; } .kz-tegel.th { animation-delay:.42s; }
.kz-beeld { display:flex; align-items:center; height:120px; }
.kz-tekst { display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.kz-tekst b { font-size:clamp(26px,3vw,34px); font-weight:1000; letter-spacing:-0.035em; line-height:1.05; }
.kz-tekst small { font-size:15.5px; font-weight:800; }
.kz-tekst em { font-style:normal; display:inline-flex; align-items:center; gap:10px; margin-top:14px; align-self:flex-start; padding:13px 20px; border-radius:15px; font-weight:1000; font-size:16px; }
.kz-tekst em i { font-style:normal; transition:transform .35s var(--zacht); }
.kz-tegel:hover { transform:translateY(-6px); }
.kz-tegel:hover em i { transform:translateX(5px); }
.kz-tegel:active { transform:translateY(-2px); }

/* VCA: nachtstijl, oranje accent */
.kz-tegel.vca { background:linear-gradient(160deg, rgba(30,48,88,.96), rgba(14,25,50,.96)); border:1px solid #2f4677; box-shadow:0 40px 90px -50px rgba(0,0,0,.95); }
.kz-tegel.vca::before { content:""; position:absolute; right:-110px; top:-110px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(247,105,37,.38), transparent 68%); pointer-events:none; transition:transform .6s var(--zacht); }
.kz-tegel.vca:hover { border-color:#f76925; box-shadow:0 50px 100px -45px rgba(247,105,37,.55); }
.kz-tegel.vca:hover::before { transform:scale(1.15); }
.kz-tegel.vca img { width:110px; height:110px; border-radius:28px; box-shadow:0 18px 36px -14px rgba(0,0,0,.7); transition:transform .45s var(--zacht); }
.kz-tegel.vca:hover img { transform:rotate(-4deg) scale(1.04); }
.kz-tegel.vca small { color:var(--muted); }
.kz-tegel.vca em { color:#fff; background:linear-gradient(180deg,#ff7a33,#f25f18); box-shadow:0 5px 0 0 #b84605, 0 16px 34px -12px rgba(247,105,37,.7); }

/* Theorie: lila stickerstijl */
.kz-tegel.th { background:var(--lila); color:var(--inkt); border:3px solid var(--inkt); box-shadow:9px 9px 0 #05070f; background-image:radial-gradient(rgba(22,19,31,.09) 1.2px, transparent 1.3px); background-size:18px 18px; }
.kz-tegel.th:hover { box-shadow:13px 15px 0 #05070f; }
.kz-tegel.th .kz-beeld svg { display:block; width:230px; height:auto; overflow:visible; animation:kz-rij 1s ease-in-out infinite; transition:transform .45s var(--zacht); }
.kz-tegel.th:hover .kz-beeld svg { transform:translateX(10px); }
.kz-tegel.th small { color:#3d3554; }
.kz-tegel.th em { color:var(--inkt); background:var(--lime); border:3px solid var(--inkt); box-shadow:4px 4px 0 var(--inkt); }
.kz-tegel.th:focus-visible { outline-color:#fff; }

.kz-voet { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; padding:14px 0 calc(20px + env(safe-area-inset-bottom)); font-size:13px; color:#7f8db0; animation:kz-op .7s .6s var(--zacht) both; }
.kz-voet a { text-decoration:none; } .kz-voet a:hover { color:var(--ink); }

/* Lage desktopschermen: alles kleiner zodat het in één scherm past */
@media (min-width:721px) and (max-height:760px) {
  .kz-claartje { width:170px; height:160px; padding-top:40px; } .kz-mascotte { width:118px; }
  .kz-tegel { min-height:250px; padding:24px; } .kz-beeld { height:96px; } .kz-tegel.vca img { width:90px; height:90px; border-radius:22px; } .kz-tegel.th .kz-beeld svg { width:190px; }
}

/* Telefoon: tegels onder elkaar, beeld links en tekst rechts */
@media (max-width:720px) {
  .kz { padding:0 16px; }
  .kz-kop { padding-top:16px; }
  .kz-merk { font-size:25px; }
  .kz-midden { padding:4px 0 10px; }
  .kz-lang { display:none; }
  .kz-tekst em { white-space:nowrap; }
  .kz-claartje { width:180px; height:150px; padding-top:40px; }
  .kz-mascotte { width:104px; }
  .kz-wolk { font-size:14.5px; padding:9px 14px; }
  .kz-keus { grid-template-columns:1fr; gap:16px; margin-top:16px; }
  .kz-tegel { flex-direction:row; align-items:center; gap:14px; min-height:0; padding:18px 16px; border-radius:24px; }
  .kz-tegel.th { box-shadow:6px 6px 0 #05070f; }
  .kz-tegel.th:hover { box-shadow:8px 9px 0 #05070f; }
  .kz-beeld { height:auto; flex:0 0 96px; justify-content:center; }
  .kz-tegel.vca img { width:80px; height:80px; border-radius:20px; }
  .kz-tegel.th .kz-beeld svg { width:112px; margin-left:-8px; }
  .kz-tekst { margin:0; gap:3px; min-width:0; }
  .kz-tekst b { font-size:21px; }
  .kz-tekst small { font-size:13px; line-height:1.35; }
  .kz-tekst em { margin-top:10px; padding:9px 14px; font-size:14px; border-radius:12px; }
  .kz-tegel.vca em { box-shadow:0 4px 0 0 #b84605; }
  .kz-tegel.th em { border-width:2.5px; box-shadow:3px 3px 0 var(--inkt); }
}
@media (max-width:720px) and (max-height:680px) {
  .kz-claartje { height:124px; padding-top:36px; } .kz-mascotte { width:82px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}