/* Inlogdienst – in de huisstijl van LeisureIQ. Volgt licht of donker van het apparaat. */
@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url("fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url("fonts/archivo-latin-wdth-normal.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;
}

:root{
  --grond:#071624;--vlak:#0D2236;--vlak2:#12304A;--lijn:#1F3D58;--tekst:#EAF2F6;--zacht:#9CB3C4;
  --groen:#72C1A5;--blauw:#00B1E9;--link:#5CC8F0;--verloop:linear-gradient(90deg,#72C1A5,#00B1E9);--op-verloop:#05121D;
  --rood:#FF8A8A;--rood-vlak:#3A1A22;--goed:#7FD8B4;--goed-vlak:#12382E;
  --schaduw:0 12px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --grond:#F3F7F8;--vlak:#FFFFFF;--vlak2:#E9F0F3;--lijn:#D3DEE4;--tekst:#05121D;--zacht:#526A7C;--link:#006C91;
    --rood:#B4232F;--rood-vlak:#FBE9EA;--goed:#0B6B4A;--goed-vlak:#DFF4EB;
    --schaduw:0 12px 40px rgba(5,18,29,.16);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;min-height:100vh;background:var(--grond);color:var(--tekst);font:400 1rem/1.5 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}
h1,h2{font-weight:650;line-height:1.2;margin:0}
h1{font-size:1.45rem;font-stretch:110%}
h2{font-size:1.05rem}
p{margin:0}
a{color:var(--link)}
.zacht{color:var(--zacht)}
.klein{font-size:.88rem}
.midden{text-align:center}
:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}

.logo img{height:30px;width:auto}
img.licht{display:none}
img.donker{display:block}
@media (prefers-color-scheme:light){img.licht{display:block}img.donker{display:none}}

/* ---------- één kaart in het midden: inloggen en de stappen daarna ---------- */
.midden-scherm{min-height:100vh;display:grid;place-items:center;padding:1.2rem}
.kaart{width:100%;max-width:420px;background:var(--vlak);border:1px solid var(--lijn);border-radius:16px;padding:1.8rem;box-shadow:var(--schaduw);display:grid;gap:.9rem}
.kaart h1{margin-top:.4rem}
.kaart.breed{max-width:460px}

.velden{display:grid;gap:.85rem}
.veld{display:grid;gap:.3rem;min-width:0}
.veld-naam{font-size:.86rem;font-weight:600;color:var(--zacht)}
.veld small{color:var(--zacht);font-size:.84rem}
input[type=text],input[type=password],input[type=email]{width:100%;min-height:44px;padding:.5rem .7rem;border:1px solid var(--lijn);border-radius:8px;background:var(--grond);color:var(--tekst);font:inherit}
input:focus{outline:2px solid var(--blauw);outline-offset:0;border-color:transparent}
input.code{font-size:1.5rem;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}

.knop{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:1px solid transparent;background:none;font:inherit;font-weight:600;text-decoration:none;color:var(--tekst);cursor:pointer}
.knop-vol{background:var(--verloop);color:var(--op-verloop)}
.knop-vol:hover{filter:brightness(1.08)}
.knop-rand{border-color:var(--lijn);background:var(--vlak)}
.knop-rand:hover{border-color:var(--blauw)}
.knop.breed{width:100%}
.knoppen{display:grid;gap:.6rem}
.link-knop{border:0;background:none;padding:0;font:inherit;color:var(--link);text-decoration:underline;cursor:pointer}

.melding{padding:.6rem .8rem;border-radius:8px;margin:0}
.melding.fout{color:var(--rood);background:var(--rood-vlak)}
.melding.goed{color:var(--goed);background:var(--goed-vlak)}

.voor{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border:1px solid var(--lijn);border-radius:10px;background:var(--vlak2);font-size:.9rem}
.voor strong{font-weight:650}

.qr{display:grid;place-items:center;padding:.8rem;background:#fff;border-radius:12px}
.qr svg{display:block;width:200px;height:200px}
.geheim{font:500 .95rem ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--vlak2);padding:.5rem .7rem;border-radius:8px;word-break:break-all;letter-spacing:.06em}
ol.stappen{margin:0;padding-left:1.2rem;display:grid;gap:.35rem}

/* ---------- de startpagina ---------- */
.balk{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1160px;margin:0 auto;padding:1.1rem 1.2rem}
.balk .wie{display:flex;align-items:center;gap:.9rem;font-size:.92rem;min-width:0}
.balk .wie span{color:var(--zacht);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inhoud{max-width:1160px;margin:0 auto;padding:1rem 1.2rem 3rem;display:grid;gap:1.6rem}
.inhoud h1{font-size:1.8rem;font-stretch:116%}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem;list-style:none;margin:0;padding:0}
.tegel{display:grid;gap:.7rem;align-content:space-between;min-height:116px;padding:1.2rem;border:1px solid var(--lijn);border-radius:14px;background:var(--vlak);color:var(--tekst);text-decoration:none;position:relative;overflow:hidden}
.tegel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--verloop);opacity:0;transition:opacity .15s}
.tegel:hover,.tegel:focus-visible{border-color:var(--blauw)}
.tegel:hover::before,.tegel:focus-visible::before{opacity:1}
.tegel .merk img{height:24px;width:auto;max-width:100%}
.tegel .merk-tekst{font-weight:650;font-size:1.15rem;font-stretch:112%}
.tegel .onder{display:grid;gap:.1rem}
.tegel .naam{font-weight:600}
.tegel .bij{color:var(--zacht);font-size:.88rem}
.leeg{padding:1.4rem;border:1px dashed var(--lijn);border-radius:14px;color:var(--zacht)}
.rij{display:flex;flex-wrap:wrap;gap:.6rem}
.voet{max-width:1160px;margin:0 auto;padding:0 1.2rem 2rem;color:var(--zacht);font-size:.84rem}
@media (max-width:520px){.kaart{padding:1.3rem}.inhoud h1{font-size:1.5rem}.balk .wie span{display:none}}
@media (prefers-reduced-motion:reduce){.tegel::before{transition:none}}