@charset "utf-8";

/* ==========================================================================
   Trichis huisstijl — overgenomen uit het NOAD-project
   (TC-26299, .../PROJECTEN/NOAD/HTML/css/style.css), losgemaakt van diens
   pt-gebaseerde maatsysteem. Hier gewoon gewone rem/px, want dit zijn kleine
   functionele pagina's (login + overzicht), geen magazine-lay-out.
   ========================================================================== */

@font-face{
  font-family:"SG Grotesk";
  src:url("../fonts/SGGrotesk-ExLight.woff2") format("woff2");
  font-weight:200;
  font-display:swap;
}
@font-face{
  font-family:"SG Grotesk";
  src:url("../fonts/SGGrotesk-Light.woff2") format("woff2");
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:"AG Book Stencil";
  src:url("../fonts/AGBook-Stencil.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}

:root{
  --cream:#f0ece1;
  --ink:#231f20;
  --ink-deep:#161817;
  --rust:#b84626;
  --yellow:#ffd401;
  --rule:rgba(22,24,23,.36);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"SG Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:200;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

.wrap{
  width:100%;
  max-width:640px;
  margin-inline:auto;
  padding-inline:24px;
}

/* --------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:var(--cream);
  border-bottom:1px solid var(--rule);
}
.site-header__inner{
  max-width:640px;
  margin-inline:auto;
  padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:block;line-height:0}
.logo img{width:96px;height:auto;display:block}

.uitloggen{
  font-size:14px;
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--ease);
}
.uitloggen:hover{background-size:100% 1px}

/* --------------------------------------------------------- eyebrow / koppen */
.eyebrow{
  display:block;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:2px;
}
h2{
  font-weight:300;
  font-size:22px;
  line-height:1.25;
  color:var(--ink);
  margin:0 0 10px;
}

/* --------------------------------------------------------- hairline */
.rule{height:1px;background:var(--rule);border:0;margin:36px 0}

/* --------------------------------------------------------- links naar bestanden */
.bestandslink{
  display:inline-block;
  margin-top:10px;
  text-decoration:none;
  color:var(--rust);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--ease);
}
.bestandslink:hover{background-size:100% 1px}

video{display:block;max-width:100%;background:#000;border-radius:2px}

/* --------------------------------------------------------- formuliervelden */
.form-veld{display:block;margin-top:18px}
.form-veld label{
  display:block;font-size:13px;color:var(--ink);margin-bottom:6px;
}
.form-veld input[type=text],
.form-veld input[type=number]{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--rule);
  background:#fff;
  font-family:inherit;font-size:15px;color:var(--ink);
}
.form-veld input:focus{outline:none;border-color:var(--rust)}

/* Variant met zwevend label — geen kader, alleen een onderlijn die naar
   roest verkleurt bij focus (zelfde interactietaal als .bestandslink/
   .uitloggen). Input staat vóór het label in de HTML: nodig voor de
   :placeholder-shown-truc (daarom placeholder=" " op elk veld). */
.form-veld--zwevend{position:relative;margin-top:30px}
.form-veld--zwevend input[type=text],
.form-veld--zwevend input[type=number]{
  width:100%;
  padding:10px 2px 9px;
  border:0;border-bottom:1px solid var(--rule);
  background:none;border-radius:0;
  font-family:inherit;font-size:16px;color:var(--ink);
  transition:border-color .2s var(--ease);
}
.form-veld--zwevend input:focus{outline:none;border-bottom-color:var(--rust)}
.form-veld--zwevend label{
  position:absolute;left:2px;top:10px;
  font-size:16px;color:var(--rule-grey,#a1a0a1);
  margin-bottom:0;
  pointer-events:none;
  transition:top .2s var(--ease),font-size .2s var(--ease),color .2s var(--ease),letter-spacing .2s var(--ease);
}
.form-veld--zwevend input:focus + label,
.form-veld--zwevend input:not(:placeholder-shown) + label{
  top:-14px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rule-grey,#a1a0a1);
}
.form-veld--zwevend input:focus + label{color:var(--rust)}

/* --------------------------------------------------------- knop (login) */
.knop{
  display:inline-block;
  padding:11px 22px;
  border:1px solid var(--rust);
  color:var(--rust);
  background:none;
  font-family:inherit;font-size:15px;font-weight:300;
  cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.knop:hover{background:var(--rust);color:var(--cream);transform:translateY(-1px)}
.knop:disabled{
  border-color:var(--rule);color:var(--rule-grey,#a1a0a1);cursor:not-allowed;
}
.knop:disabled:hover{background:none;color:var(--rule-grey,#a1a0a1);transform:none}

/* --------------------------------------------------------- responsive */
@media (max-width:600px){
  .wrap,.site-header__inner{padding-inline:18px}
  h2{font-size:20px}
}