/* Immerlootour — basis: variabelen, reset, typografie, formulieren, knoppen
   Onderdeel van de gesplitste opzet. Zie index.html voor de koppeling. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root{
  --asfalt:#23262B;--asfalt-2:#31353C;--krijt:#FAFAF8;--papier:#ECEDEA;--wit:#FFF;
  --geel:#F5C518;--merk:#29ABE2;--merk-dof:#7FD0F0;--rood:#C8102E;--groen:#00954F;--oranje:#D97706;--beton:#8B9099;
  --lijn:rgba(35,38,43,.12);
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);background:var(--papier);color:var(--asfalt);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;font-size:15px}
button{font-family:inherit}:focus-visible{outline:2px solid var(--geel);outline-offset:2px}
.app{max-width:430px;margin:0 auto;min-height:100vh;background:var(--papier);position:relative}
.scherm{display:none}.scherm.on{display:block}
.label{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--beton)}

/* ═══ auth ═══ */
.auth{min-height:100vh;background:var(--asfalt);color:var(--krijt);padding:52px 26px 36px;
  display:flex;flex-direction:column;max-width:430px;margin:0 auto}
.fiets{height:1.35em;width:auto;flex:none;vertical-align:-.18em;margin-right:.45em}
.logo-groot{margin-bottom:18px;color:var(--krijt)}
.logo-groot .fiets{height:62px;margin:0}
.merk{font-family:var(--display);font-weight:500;font-size:38px;letter-spacing:.09em;
  text-transform:uppercase;line-height:1;color:rgba(250,250,248,.82)}
.merk span{color:var(--merk);font-weight:700}
.merk-sub{font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--beton);margin-top:8px}
.streep{height:3px;background:var(--merk);width:64px;margin:24px 0 28px}
.auth-tabs{display:flex;margin-bottom:20px}
.auth-tabs button{flex:1;padding:11px 0;background:none;border:0;
  border-bottom:2px solid rgba(250,250,248,.2);color:rgba(250,250,248,.55);
  font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer}
.auth-tabs button[aria-selected="true"]{color:var(--krijt);border-bottom-color:var(--geel)}
.veldje{margin-bottom:13px}
.veldje label{display:block;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--beton);margin-bottom:5px}
.veldje input{width:100%;padding:13px 14px;font-family:var(--body);font-size:16px;
  background:var(--asfalt-2);border:1px solid rgba(250,250,248,.18);border-radius:3px;color:var(--krijt)}
.veldje input:focus{outline:none;border-color:var(--geel);background:#3A3F47}
.toonww{position:absolute;top:-2px;right:0;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--beton);padding:2px 2px}
.toonww:hover{color:var(--krijt)}
.naamrij{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.veldje small.hint{display:block;margin-top:5px;font-size:12px;color:var(--beton)}
.auth-uitleg{font-size:13.5px;line-height:1.6;color:var(--beton);margin-bottom:16px}
.tekstknop{display:block;width:100%;margin-top:12px;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:13.5px;color:var(--beton);text-decoration:underline;
  padding:6px}
.tekstknop:hover{color:var(--krijt)}
.fout{background:rgba(200,16,46,.16);border-left:3px solid var(--rood);padding:10px 13px;
  font-size:13.5px;margin-bottom:14px;color:#FFC9CF}
.testbox{margin-top:auto;padding-top:24px;border-top:1px solid rgba(250,250,248,.14);
  font-size:13px;color:var(--beton);line-height:1.65}
.testbox b{color:var(--krijt);font-weight:500}
.testbox code{font-family:var(--display);font-size:15px;font-weight:600;color:var(--geel)}

/* ═══ knoppen ═══ */
.knop{width:100%;padding:15px;border:0;border-radius:3px;cursor:pointer;
  font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;background:var(--geel);color:var(--asfalt)}
.knop.donker{background:var(--asfalt);color:var(--krijt)}
.knop.groen{background:var(--groen);color:var(--wit)}
.knop.rood{background:var(--rood);color:var(--wit)}
.knop.licht{background:var(--wit);color:#5A5F66;border:1px solid var(--lijn)}
.knop.merk{background:var(--merk);color:var(--wit)}
.knop:disabled{background:#D3D5D1;color:#9A9E99;cursor:not-allowed}
.mini{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--lijn);background:var(--papier);color:#5A5F66;
  padding:6px 11px;border-radius:2px;cursor:pointer;flex:none}
.mini[aria-pressed="true"]{background:var(--rood);border-color:var(--rood);color:var(--wit)}
.mini.betaald[aria-pressed="true"]{background:var(--groen);border-color:var(--groen)}