/* ==========================================================================
   FREERUN ACHTERHOEK — LEDENPORTAAL

   Donkere uitvoering, zoals gekozen op 22 september: zwart is de grond, wit
   de inkt. Het portaal kiest bewust één wereld en blijft dus donker, ook bij
   iemand die zijn scherm op licht heeft staan. Daarom staat elke kleur hier
   expliciet en is er geen tweede themablok.

   ZELFSTANDIG
   Deze stylesheet leunt niet op freerun-achterhoek-stijl. Het ledenplatform
   moet werken op een kale WordPress met het standaardthema, en dat doet het
   alleen als alles wat het nodig heeft hier staat.

   OPZET VAN DE KLASSEN
   Alles begint met fal- en volgt de vorm blok__element--variant. Zo kun je
   in de HTML van portaal.php meteen zien welke regel erbij hoort.
   ========================================================================== */

.fal-portaal {
  --fal-grond: #0b0b0a;
  --fal-kaart: #161615;
  --fal-inkt: #f4f4f1;
  --fal-zacht: #9b9b95;
  --fal-rand: #f4f4f1;
  --fal-lijn: #35352f;
  --fal-vlak: #1e1e1c;
  --fal-groen: #5fb887;
  --fal-roest: #e08a63;
  --fal-kop: "Staatliches", "Haettenschweiler", "Arial Narrow", sans-serif;
  --fal-tekst: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  box-sizing: border-box;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 0 3rem;
  background: var(--fal-grond);
  color: var(--fal-inkt);
  font-family: var(--fal-tekst);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.fal-portaal *,
.fal-portaal *::before,
.fal-portaal *::after {
  box-sizing: border-box;
}

/* Het thema zet soms een witte achtergrond om de inhoud heen. Die duwen we
   weg, anders staat er een wit vlak om een donker portaal. */
.fal-portaal {
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   Balk bovenaan
   -------------------------------------------------------------------------- */

.fal-balk {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem max(16px, 4%);
  background: var(--fal-inkt);
  color: var(--fal-grond);
}

.fal-balk__naam {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fal-kop);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fal-schild {
  width: 24px;
  height: 27px;
  flex: none;
  background: var(--fal-grond);
  clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
}

.fal-kinderen {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.fal-portaal .fal-kind {
  padding: 0.35rem 0.7rem;
  border: 1px solid #8f8f88;
  color: #4a4a45;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.fal-portaal .fal-kind.is-actief {
  background: var(--fal-grond);
  border-color: var(--fal-grond);
  color: var(--fal-inkt);
}

.fal-portaal .fal-uit {
  margin-left: auto;
  color: #4a4a45;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.fal-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0 max(16px, 4%);
  background: var(--fal-kaart);
  border-bottom: 2px solid var(--fal-rand);
}

.fal-portaal .fal-tab {
  padding: 0.9rem 0.7rem;
  border-bottom: 3px solid transparent;
  color: var(--fal-zacht);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fal-portaal .fal-tab.is-actief {
  color: var(--fal-inkt);
  border-bottom-color: var(--fal-inkt);
}

/* --------------------------------------------------------------------------
   Inhoud
   -------------------------------------------------------------------------- */

.fal-inhoud {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1.25rem, 4vw, 2rem) max(16px, 4%) 0;
}

.fal-portaal .fal-titel {
  margin: 0;
  font-family: var(--fal-kop);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fal-inkt);
}

.fal-portaal .fal-lead {
  margin: 0.3rem 0 0;
  color: var(--fal-zacht);
  font-size: 0.9375rem;
}

.fal-portaal .fal-oog {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fal-zacht);
}

.fal-portaal .fal-terug a {
  color: var(--fal-zacht);
  font-size: 0.8125rem;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Cijfers bovenaan het overzicht
   -------------------------------------------------------------------------- */

.fal-cijfers {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.fal-cijfer {
  border: 2px solid var(--fal-rand);
  background: var(--fal-kaart);
  padding: 1rem;
}

.fal-cijfer__getal {
  font-family: var(--fal-kop);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.fal-cijfer__bij {
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fal-zacht);
}

/* --------------------------------------------------------------------------
   Kaarten
   -------------------------------------------------------------------------- */

.fal-kaart {
  border: 2px solid var(--fal-rand);
  background: var(--fal-kaart);
}

.fal-kaart__kop {
  position: relative;
  padding: 0.85rem 1rem;
  background: var(--fal-inkt);
  color: var(--fal-grond);
  overflow: hidden;
}

/* De wig van 45 graden, net als op de website. */
.fal-kaart__kop::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34px;
  height: 34px;
  background: var(--fal-kaart);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.fal-kaart__kop h3 {
  margin: 0;
  font-family: var(--fal-kop);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fal-grond);
}

.fal-kaart__lijf {
  padding: 1rem;
}

.fal-kaart--leeg .fal-kaart__lijf h3 {
  margin: 0 0 0.4rem;
  font-family: var(--fal-kop);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fal-kaart--leeg p {
  margin: 0;
  color: var(--fal-zacht);
}

/* --------------------------------------------------------------------------
   Regels: een les, een training, een naam
   -------------------------------------------------------------------------- */

.fal-regel {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--fal-lijn);
}

.fal-regel:last-child {
  border-bottom: 0;
}

.fal-datum {
  width: 3.1rem;
  flex: none;
  text-align: center;
  padding-right: 0.6rem;
  border-right: 1px solid var(--fal-lijn);
}

.fal-dag {
  display: block;
  font-family: var(--fal-kop);
  font-size: 1.3rem;
  line-height: 1;
}

.fal-maand {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fal-zacht);
}

.fal-wat {
  flex: 1 1 11rem;
  min-width: 0;
}

.fal-wat__titel {
  font-weight: 700;
  font-size: 0.9375rem;
}

.fal-wat__meta {
  font-size: 0.8125rem;
  color: var(--fal-zacht);
}

.fal-actie {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Merkjes en knoppen
   -------------------------------------------------------------------------- */

.fal-merk {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border: 1px solid currentColor;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fal-zacht);
}

.fal-merk--aan { color: var(--fal-groen); }
.fal-merk--af  { color: var(--fal-roest); }
.fal-merk--uit { color: var(--fal-zacht); }

.fal-portaal .fal-knop {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--fal-inkt);
  border-radius: 0;
  background: var(--fal-inkt);
  color: var(--fal-grond);
  font-family: var(--fal-tekst);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}

.fal-portaal .fal-knop--uit {
  background: transparent;
  color: var(--fal-inkt);
}

.fal-portaal .fal-knop:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fal-grond);
}

.fal-portaal .fal-knop:focus-visible {
  outline: 3px solid var(--fal-groen);
  outline-offset: 2px;
}

.fal-portaal .fal-knop[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Tabel
   -------------------------------------------------------------------------- */

.fal-tabelwrap {
  overflow-x: auto;
}

.fal-portaal .fal-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  color: var(--fal-inkt);
}

.fal-portaal .fal-tabel th {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--fal-lijn);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fal-zacht);
}

.fal-portaal .fal-tabel td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--fal-lijn);
  font-variant-numeric: tabular-nums;
}

.fal-portaal .fal-tabel tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Velden en toestemming
   -------------------------------------------------------------------------- */

.fal-veld {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--fal-lijn);
  font-size: 0.9375rem;
}

.fal-veld:last-child {
  border-bottom: 0;
}

.fal-veld span:first-child {
  color: var(--fal-zacht);
  flex: none;
}

.fal-veld span:last-child {
  text-align: right;
}

.fal-toestemming {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--fal-lijn);
}

.fal-toestemming:last-child {
  border-bottom: 0;
}

.fal-toestemming__tekst {
  flex: 1 1 14rem;
  min-width: 0;
}

.fal-toestemming__tekst strong {
  display: block;
  font-size: 0.9375rem;
}

.fal-toestemming__tekst span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--fal-zacht);
}

.fal-toestemming__knop {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Hint, melding, leeg
   -------------------------------------------------------------------------- */

.fal-portaal .fal-hint {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--fal-inkt);
  background: var(--fal-vlak);
  font-size: 0.8125rem;
  color: var(--fal-zacht);
}

.fal-melding {
  margin: 0 max(16px, 4%);
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--fal-groen);
  background: var(--fal-vlak);
  color: var(--fal-inkt);
  font-size: 0.875rem;
}

.fal-melding.is-fout {
  border-color: var(--fal-roest);
}

.fal-portaal .fal-leeg {
  padding: 1rem;
  margin: 0;
  color: var(--fal-zacht);
}

.fal-portaal .fal-klein {
  font-size: 0.8125rem;
  color: var(--fal-zacht);
}

.fal-portaal .fal-klein a {
  color: var(--fal-inkt);
}

/* --------------------------------------------------------------------------
   Inlogscherm
   -------------------------------------------------------------------------- */

.fal-portaal--inlog {
  padding-top: clamp(1.5rem, 5vw, 3rem);
}

.fal-inlog {
  max-width: 24rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 2px solid var(--fal-rand);
  background: var(--fal-kaart);
}

.fal-inlog .login-username,
.fal-inlog .login-password {
  margin-bottom: 0.75rem;
}

.fal-inlog label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fal-zacht);
}

.fal-inlog input[type="text"],
.fal-inlog input[type="password"] {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--fal-lijn);
  border-radius: 0;
  background: var(--fal-vlak);
  color: var(--fal-inkt);
  font-family: var(--fal-tekst);
  font-size: 0.9375rem;
}

.fal-inlog input[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--fal-inkt);
  border-radius: 0;
  background: var(--fal-inkt);
  color: var(--fal-grond);
  font-family: var(--fal-tekst);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.fal-inlog .login-remember label {
  display: inline;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fal-zacht);
}

/* --------------------------------------------------------------------------
   Opdrachten, briefing en verslagen (sinds 1.3.0)

   Dezelfde bouwstenen als de rest van het portaal: kaarten met een witte
   kop, velden als regels, knoppen zonder ronde hoeken. Nieuw zijn alleen de
   formulieren, want tot nu toe ging alles in het portaal met één knop.
   -------------------------------------------------------------------------- */

/* De losse pagina achter de link uit de mail: geen thema eromheen. */
body.fal-los {
  margin: 0;
  background: #0b0b0a;
}

.fal-portaal--los {
  min-height: 100vh;
}

/* Binnen de inhoud heeft de melding de zijmarge al van de inhoud zelf. */
.fal-inhoud .fal-melding {
  margin: 0;
}

.fal-portaal .fal-veld a,
.fal-portaal .fal-hint a {
  color: var(--fal-inkt);
}

.fal-portaal .fal-label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fal-zacht);
}

.fal-portaal .fal-label span {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.fal-kaart__lijf > .fal-label:first-child,
.fal-formulier > .fal-label:first-of-type {
  margin-top: 0;
}

.fal-portaal .fal-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fal-portaal .fal-lijst li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.1rem;
  border-bottom: 1px solid var(--fal-lijn);
  font-size: 0.9375rem;
}

.fal-portaal .fal-lijst li:last-child {
  border-bottom: 0;
}

/* Een klein vierkantje met de schuine hoek van de huisstijl. */
.fal-portaal .fal-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8rem;
  width: 7px;
  height: 7px;
  background: var(--fal-inkt);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 45% 100%, 0 100%);
}

.fal-formulier {
  margin: 0;
}

.fal-formulier + .fal-formulier {
  margin-top: 1.1rem;
}

.fal-formulier--nee {
  padding-top: 1rem;
  border-top: 1px solid var(--fal-lijn);
}

.fal-portaal .fal-invoer {
  display: block;
  width: 100%;
  margin-bottom: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--fal-lijn);
  border-radius: 0;
  background: var(--fal-vlak);
  color: var(--fal-inkt);
  font-family: var(--fal-tekst);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.fal-portaal .fal-invoer::placeholder {
  color: #6f6f69;
}

.fal-portaal .fal-invoer:focus {
  outline: 3px solid var(--fal-groen);
  outline-offset: 0;
  border-color: var(--fal-inkt);
}

.fal-portaal .fal-invoer--kort {
  width: 7rem;
}

.fal-portaal textarea.fal-invoer {
  resize: vertical;
  min-height: 5rem;
}

/* Hoe ging het: drie knoppen die samen één keuze zijn. */
.fal-portaal .fal-keuzes {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.fal-portaal .fal-keuzes legend {
  padding: 0;
  margin-top: 0;
}

.fal-keuzes__rij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.fal-portaal .fal-keuze {
  position: relative;
  display: block;
  cursor: pointer;
}

.fal-portaal .fal-keuze input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.fal-portaal .fal-keuze span {
  display: block;
  padding: 0.7rem 0.5rem;
  border: 2px solid var(--fal-lijn);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fal-zacht);
}

.fal-portaal .fal-keuze:hover span {
  border-color: var(--fal-zacht);
  color: var(--fal-inkt);
}

.fal-portaal .fal-keuze input:checked + span {
  border-color: var(--fal-inkt);
  background: var(--fal-inkt);
  color: var(--fal-grond);
}

.fal-portaal .fal-keuze input[value="lastig"]:checked + span {
  border-color: var(--fal-roest);
  background: var(--fal-roest);
}

.fal-portaal .fal-keuze input:focus-visible + span {
  outline: 3px solid var(--fal-groen);
  outline-offset: 2px;
}

.fal-portaal .fal-vink {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1rem 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.fal-portaal .fal-vink input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--fal-roest);
}

.fal-portaal .fal-knop--groot {
  margin-top: 0.9rem;
  padding: 0.8rem 1.3rem;
  font-size: 0.75rem;
}

.fal-formulier--nee .fal-knop {
  margin-top: 0.6rem;
}

.fal-portaal .fal-status {
  margin: 0 0 0.3rem;
  font-weight: 700;
}

.fal-portaal .fal-status--goed {
  color: var(--fal-groen);
}

/* --------------------------------------------------------------------------
   Aanmelden voor een proefles onder het inlogvak (sinds 1.3.3)
   -------------------------------------------------------------------------- */

.fal-inlog--breed {
  max-width: 34rem;
}

.fal-inlog--tweede {
  margin-top: 1.25rem;
}

.fal-inlog .fal-titel + .fal-lead {
  margin-bottom: 1rem;
}

.fal-inlog .fal-melding {
  margin: 0 0 1rem;
}

/* Het inlogvak zet elk label in kleine hoofdletters. Het vinkje is een zin,
   geen veldnaam: die hoort gewoon leesbaar te zijn. */
.fal-inlog label.fal-vink {
  display: flex;
  margin: 1rem 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fal-inkt);
}

.fal-portaal .fal-knop--breed {
  display: flex;
  width: 100%;
  justify-content: center;
}

.fal-portaal select.fal-invoer {
  min-height: 46px;
}

/* Het lokveld voor spamrobots: voor mensen onzichtbaar. */
.fal-portaal .fal-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header, footer en de inlogpagina als voorpagina (sinds 1.4.0)

   De header en footer staan buiten .fal-portaal, dus ze krijgen hun eigen
   kleuren. Dezelfde waarden als het portaal: één donkere wereld.
   -------------------------------------------------------------------------- */

body.fal-site {
  margin: 0;
  background: #0b0b0a;
}

.fal-site-kop,
.fal-site-voet,
.fal-site-skip {
  box-sizing: border-box;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fal-site-kop *,
.fal-site-voet * {
  box-sizing: border-box;
}

.fal-site-skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.fal-site-skip:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: #f4f4f1;
  color: #0b0b0a;
  font-weight: 700;
}

.fal-site-kop {
  background: #0b0b0a;
  border-bottom: 1px solid #35352f;
}

.fal-site-kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 62rem;
  min-height: 72px;
  margin: 0 auto;
  padding: 0.75rem max(16px, 4%);
}

.fal-site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: #f4f4f1;
  text-decoration: none;
}

.fal-site-schild {
  flex: none;
  width: 26px;
  height: auto;
  color: #f4f4f1;
}

.fal-site-logo__naam {
  font-family: "Staatliches", Impact, "Arial Narrow", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fal-site-logo__mijn {
  padding: 0.2rem 0.4rem;
  background: #f4f4f1;
  color: #0b0b0a;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fal-site-logo:focus-visible,
.fal-site-kop a:focus-visible,
.fal-site-voet a:focus-visible {
  outline: 3px solid #5fb887;
  outline-offset: 3px;
}

.fal-site-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.fal-site-nav__link {
  color: #9b9b95;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.fal-site-nav__link:hover {
  color: #f4f4f1;
}

.fal-site-nav__wie {
  max-width: 9rem;
  overflow: hidden;
  color: #f4f4f1;
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fal-site-knop {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  border: 2px solid #f4f4f1;
  color: #f4f4f1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fal-site-knop:hover {
  background: #f4f4f1;
  color: #0b0b0a;
}

.fal-site-main {
  display: block;
  min-height: 55vh;
}

/* De footer. De wig van 45 graden rechtsboven, zoals op de website. */
.fal-site-voet {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: #0b0b0a;
  border-top: 2px solid #f4f4f1;
  color: #9b9b95;
  font-size: 0.875rem;
  line-height: 1.55;
}

.fal-site-voet::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(48px, 8vw, 96px);
  height: clamp(48px, 8vw, 96px);
  background: #35352f;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.fal-site-voet__binnen {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.5rem max(16px, 4%) 1.75rem;
}

.fal-site-schild--groot {
  width: 34px;
}

.fal-site-voet__slogan {
  margin: 0.75rem 0 0.35rem;
  font-family: "Staatliches", Impact, "Arial Narrow", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4f4f1;
}

.fal-site-voet__zin {
  max-width: 32ch;
  margin: 0;
}

.fal-site-voet__kop {
  margin: 0 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4f4f1;
}

.fal-site-voet ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fal-site-voet a {
  color: #9b9b95;
  text-decoration: none;
}

.fal-site-voet a:hover {
  color: #f4f4f1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fal-site-voet__onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem max(16px, 4%) 1.5rem;
  border-top: 1px solid #35352f;
  font-size: 0.75rem;
}

.fal-site-voet__onder p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
}

/* De inlogpagina: een kop, en daaronder inloggen en een proefles naast
   elkaar. Op een telefoon onder elkaar, inloggen eerst. */
.fal-inlog-kop {
  margin: 0 0 1.5rem;
  padding: 0 max(16px, 4%);
}

.fal-portaal .fal-titel--groot {
  font-size: clamp(2.2rem, 7vw, 3.6rem);
}

.fal-inlog-raster {
  display: grid;
  gap: 1.25rem;
  padding: 0 max(16px, 4%);
}

@media (min-width: 820px) {
  .fal-inlog-raster {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }
}

.fal-inlog-raster .fal-inlog {
  max-width: none;
  margin: 0;
}

.fal-inlog-raster .fal-inlog--tweede {
  margin-top: 0;
}

/* Header op een telefoon: logo en de ene knop die je nodig hebt. De links
   naar de website en de shop staan dan in de footer. */
@media (max-width: 640px) {
  .fal-site-nav__link,
  .fal-site-nav__wie {
    display: none;
  }

  .fal-site-kop__binnen {
    min-height: 64px;
  }
}

.fal-site-knop__kort {
  display: none;
}

.fal-site-logo__naam {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .fal-site-knop__lang {
    display: none;
  }

  .fal-site-knop__kort {
    display: inline;
  }

  .fal-site-logo__mijn {
    display: none;
  }

  .fal-site-logo__naam {
    font-size: 1.1rem;
  }

  .fal-site-knop {
    padding: 0.4rem 0.7rem;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 350px) {
  .fal-site-logo__naam {
    font-size: 0.95rem;
  }

  .fal-site-schild {
    width: 22px;
  }

  .fal-site-kop__binnen {
    gap: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   Kleine schermen
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .fal-actie {
    margin-left: 0;
    width: 100%;
  }

  .fal-toestemming__knop {
    margin-left: 0;
    width: 100%;
  }

  .fal-veld {
    flex-direction: column;
    gap: 0.15rem;
  }

  .fal-veld span:last-child {
    text-align: left;
  }

  .fal-portaal .fal-knop--groot {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fal-portaal * {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Opzeggen (sinds 1.5.0)
   -------------------------------------------------------------------------- */

/* De regel "... is opgezegd" boven de inhoud, op elke tab. */
.fal-portaal .fal-melding--vast {
  margin-top: 1rem;
  border-color: var(--fal-roest);
}

/* Een datumveld hoeft niet de hele breedte. */
.fal-portaal .fal-invoer--datum {
  max-width: 16rem;
}

@media (max-width: 480px) {
  .fal-portaal .fal-invoer--datum {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Verslagen voor trainers (sinds 1.6.0)
   -------------------------------------------------------------------------- */

/* Vorige maand, de maand zelf, volgende maand. */
.fal-portaal .fal-maandkeus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--fal-rand);
  background: var(--fal-kaart);
}

.fal-portaal .fal-maandkeus strong {
  font-family: var(--fal-kop);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.fal-portaal .fal-maandkeus a {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fal-inkt);
  text-decoration: none;
}

.fal-portaal .fal-maandkeus a:last-child {
  text-align: right;
}

.fal-portaal .fal-maandkeus a:hover,
.fal-portaal .fal-maandkeus a:focus-visible {
  text-decoration: underline;
}

.fal-portaal .fal-cijfers + .fal-mv-kaart,
.fal-portaal .fal-mv-kaart + .fal-mv-kaart {
  margin-top: 1rem;
}

/* Het verslag klapt open onder de regel, over de volle breedte. */
.fal-portaal .fal-mv-verslag {
  flex: 1 1 100%;
  margin: 0;
}

.fal-portaal .fal-mv-verslag summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fal-zacht);
  text-decoration: underline;
  list-style: none;
}

.fal-portaal .fal-mv-verslag summary::-webkit-details-marker {
  display: none;
}

.fal-portaal .fal-mv-verslag[open] summary {
  color: var(--fal-inkt);
}

.fal-portaal .fal-mv-verslag__lijf {
  margin-top: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--fal-inkt);
  background: var(--fal-vlak);
}

.fal-portaal .fal-mv-verslag__lijf .fal-label {
  margin-top: 0.75rem;
}

.fal-portaal .fal-mv-tekst {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.fal-portaal .fal-mv-verslag__lijf .fal-klein {
  margin: 0.75rem 0 0;
}

/* --------------------------------------------------------------------------
   Tekstlinks (sinds 1.6.2)

   Links zonder eigen klasse (een telefoonnummer in een zin) namen de roze
   linkkleur van het thema over. :where() houdt de regel licht: knoppen,
   tabbladen en andere links met een klasse houden hun eigen kleur.
   -------------------------------------------------------------------------- */

.fal-portaal :where(a:not([class])) {
  color: var(--fal-inkt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fal-portaal :where(a:not([class])):hover,
.fal-portaal :where(a:not([class])):focus-visible {
  color: var(--fal-zacht);
}

/* --------------------------------------------------------------------------
   Proefles of lid worden (sinds 1.7.0)
   -------------------------------------------------------------------------- */

.fal-portaal .fal-pf-tweede {
  margin-top: 0.6rem;
}

/* De keuze: twee tegels, de gekozen is wit met de wig van 45 graden. */
.fal-portaal .fal-pf-keuze {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}

.fal-portaal .fal-pf-keuze a {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 2px solid var(--fal-rand);
  background: var(--fal-kaart);
  color: var(--fal-inkt);
  text-decoration: none;
  overflow: hidden;
}

.fal-portaal .fal-pf-keuze b {
  font-family: var(--fal-kop);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
}

.fal-portaal .fal-pf-keuze span {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fal-zacht);
}

.fal-portaal .fal-pf-keuze a:hover {
  background: var(--fal-vlak);
}

.fal-portaal .fal-pf-keuze a.is-actief {
  background: var(--fal-inkt);
  color: var(--fal-grond);
}

.fal-portaal .fal-pf-keuze a.is-actief span {
  color: #4a4a45;
}

.fal-portaal .fal-pf-keuze a.is-actief::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: var(--fal-grond);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.fal-portaal .fal-pf-keuze a:focus-visible {
  outline: 3px solid var(--fal-groen);
  outline-offset: 2px;
}

/* Tussenkoppen in het inschrijfformulier. */
.fal-portaal .fal-pf-kop {
  margin: 1.5rem 0 0.25rem;
  padding-top: 1rem;
  border-top: 2px solid var(--fal-rand);
  font-family: var(--fal-kop);
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fal-inkt);
}

.fal-portaal .fal-ins > .fal-pf-kop:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fal-portaal .fal-ins .fal-klein {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--fal-zacht);
}

.fal-portaal .fal-ins-noot {
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.9rem;
  background: var(--fal-vlak);
  border: 1px solid var(--fal-lijn);
  font-size: 0.875rem;
  line-height: 1.5;
}

.fal-portaal .fal-ins-noot[hidden],
.fal-portaal .fal-ins-betalen[hidden] {
  display: none;
}

.fal-portaal .fal-ins .fal-vink span {
  font-weight: 400;
  line-height: 1.5;
}

.fal-portaal .fal-ins .fal-vink a {
  color: var(--fal-inkt);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 359px) {
  .fal-portaal .fal-pf-keuze {
    grid-template-columns: 1fr;
  }
}