/* De interactieve demo op /demo, bovenop stijl.css: dezelfde kleuren, letter en knoppen. Geen stijl in de HTML zelf; de
   CSP staat alleen deze bestanden toe. Eerst de telefoon, dan breder. */

/* Grieks en Cyrillisch voor de namen van de EU-talen, alleen geladen als die tekens op het scherm staan. */
@font-face {
  font-family: inter;
  src: url("/letters/inter-greek-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: inter;
  src: url("/letters/inter-cyrillic-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --fout: #c53030;
  --fout-vlak: #fdecec;
  --let-op: #8a5a12;
  --let-op-vlak: #fff4de;
  --info: #2f4a8a;
  --info-vlak: #eef1fa;
  --goed-vlak: #e7f4ee;
  --koraal-vlak: #ffe8e3;
  --rand: #cfcac0;
  --vlak: #f8f7f3;
}

.demo-pagina {
  background: var(--zand);
}

/* Een nieuw scherm begint meteen bovenaan, zonder eerst zichtbaar omhoog te schuiven. demo.js zet deze klasse. */
html.met-script {
  scroll-behavior: auto;
}

.demo-pagina [hidden] {
  display: none !important;
}

.demo-pagina :focus-visible {
  outline-color: var(--koraal-donker);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icoon {
  width: 1.25rem;
  height: 1.25rem;
}

.demo-pagina button,
.demo-pagina input,
.demo-pagina select,
.demo-pagina textarea {
  font: inherit;
}

.demo-pagina button {
  cursor: pointer;
}

/* ------------------------------------------------------------ de kop met de route */

.demo-kop {
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}

.demo-kop-rij {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

.demo-kop .merk svg {
  width: 2rem;
  height: 2rem;
}

.demo-kop .woordmerk {
  font-size: 1.3rem;
}

.demo-label {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--koraal-donker);
  color: var(--papier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-opnieuw {
  margin-left: auto;
}

/* Op een smalle telefoon past alleen "Opnieuw"; "beginnen" blijft voor de schermlezer. */
@media (max-width: 30rem) {
  .demo-opnieuw .niet-smal {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.demo-balk {
  padding: 0.5rem 1rem;
  background: var(--let-op-vlak);
  color: var(--let-op);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.route {
  overflow-x: auto;
  border-top: 1px solid var(--lijn);
  scrollbar-width: thin;
}

.route-lijst {
  display: flex;
  gap: 0.25rem;
  width: max-content;
  max-width: none;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

/* position: relative houdt de verborgen tekst voor de schermlezer binnen de route; anders maakt die de pagina op een
   telefoon breder dan het scherm. */
.route-stap a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  border-radius: 999px;
  color: var(--zacht);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.route-stap a:hover {
  background: var(--zand);
  color: var(--inkt);
}

.route-nr {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--zand);
  color: var(--inkt);
  font-size: 0.8125rem;
}

.route-nr .icoon {
  width: 1rem;
  height: 1rem;
}

.route-stap.gedaan .route-nr {
  background: var(--goed);
  color: var(--papier);
}

.route-stap.nu a {
  background: var(--inkt);
  color: var(--papier);
}

.route-stap.nu .route-nr {
  background: var(--papier);
  color: var(--inkt);
}

/* ------------------------------------------------------------ de opbouw van een scherm */

.demo-inhoud {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.demo-inhoud:focus {
  outline: none;
}

@media (min-width: 48rem) {
  .demo-inhoud {
    padding: 2.5rem 2rem 4rem;
  }
}

/* Elk raster met één kolom krijgt minmax(0, 1fr): zo kan een breed onderdeel, zoals de telefoon, de kolom niet breder
   maken dan het scherm. */
.scherm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.verteller {
  max-width: 46rem;
}

.verteller h1 {
  margin-top: 0.4rem;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--inkt);
  scroll-margin-top: 1rem;
}

.verteller h1:focus {
  outline: none;
}

.verteller .lead {
  margin-top: 0.6rem;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
}

.scherm-start .verteller h1 {
  font-size: clamp(2.4rem, 7vw, 3.75rem);
}

.demo-inhoud h2 {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.demo-inhoud h3 {
  font-size: 1.0625rem;
}

.demo-inhoud .noot {
  max-width: 46rem;
  margin-top: 0;
  font-size: 0.875rem;
  color: var(--zacht);
}

.demo-inhoud .noot a {
  color: var(--inkt);
  font-weight: 600;
}

.demo-knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.twee-delen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .twee-delen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
  }
}

.scherm-uitleg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-content: start;
}

.scherm-toestel {
  display: flex;
  justify-content: center;
}

/* Op een smal scherm staan de uitleg, de telefoon en de knoppen onder elkaar, in die volgorde. Op een breed scherm staat
   de telefoon rechts en de knoppen links onder de uitleg; de volgorde in de HTML blijft dezelfde. */
@media (min-width: 64rem) {
  .scherm-telefoon {
    grid-template-columns: minmax(0, 1fr) 22.5rem;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "uitleg toestel"
      "knoppen toestel";
    gap: 1.5rem 3rem;
    align-items: start;
  }

  .scherm-telefoon > .scherm-uitleg {
    grid-area: uitleg;
  }

  .scherm-telefoon > .scherm-toestel {
    grid-area: toestel;
  }

  .scherm-telefoon > .demo-knoppen {
    grid-area: knoppen;
  }
}

/* ------------------------------------------------------------ knoppen en labels */

.knop-hoofd {
  background: var(--inkt);
  color: var(--papier);
}

.knop-hoofd:hover {
  background: var(--inkt-donker);
}

.knop-accent {
  background: var(--koraal-donker);
  color: var(--papier);
}

.knop-accent:hover {
  background: #a93725;
}

.knop-klein {
  min-height: 2.5rem;
  padding: 0.45rem 0.9rem;
  border-color: var(--lijn);
  background: var(--papier);
  color: var(--inkt);
  font-size: 0.9375rem;
}

.knop-klein:hover {
  border-color: var(--inkt);
}

.knop-breed {
  width: 100%;
}

.knop[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.knop-tekst {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--inkt);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.knop-tekst .icoon {
  width: 1.1rem;
  height: 1.1rem;
}

.label-klein {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.label-demo {
  background: var(--let-op-vlak);
  color: var(--let-op);
}

.label-simulatie {
  justify-self: start;
  background: var(--info-vlak);
  color: var(--info);
}

.label-nieuw {
  background: var(--koraal-donker);
  color: var(--papier);
}

.status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.status-wacht {
  border: 1px solid var(--lijn);
  background: var(--zand);
  color: var(--zacht);
}

.status-bezig {
  background: var(--let-op-vlak);
  color: var(--let-op);
}

.status-actie {
  background: var(--koraal-vlak);
  color: #a3361f;
}

.status-klaar {
  background: var(--goed-vlak);
  color: var(--goed);
}

/* ------------------------------------------------------------ het venster van de werkgever */

.venster {
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: 1.25rem;
  background: var(--papier);
  box-shadow: 0 1px 2px rgba(29, 43, 95, 0.05), 0 16px 36px -18px rgba(29, 43, 95, 0.25);
}

.venster-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--lijn);
  background: #fbfaf7;
}

.venster-bedrijf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.bedrijfslogo {
  width: 2.5rem;
  height: 2.5rem;
}

.bedrijfslogo.klein {
  width: 1.75rem;
  height: 1.75rem;
}

.venster-naam {
  font-weight: 700;
  line-height: 1.2;
  color: var(--inkt);
}

.venster-sub {
  font-size: 0.875rem;
  color: var(--zacht);
}

.venster-wie {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--zacht);
}

.venster-inhoud {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem;
}

@media (min-width: 48rem) {
  .venster-inhoud {
    padding: 1.75rem;
  }
}

.venster-titelrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

/* ------------------------------------------------------------ het dashboard */

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

.tegel-telling {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--lijn);
  border-radius: 0.8rem;
}

.telling {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--inkt);
}

.tegel-telling p + p {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--zacht);
}

.mensen {
  display: grid;
  gap: 0.5rem;
}

.mens-rij {
  border: 1px solid var(--lijn);
  border-radius: 0.9rem;
  background: var(--papier);
}

.mens-rij.nieuw {
  border-color: var(--koraal);
  box-shadow: 0 0 0 3px var(--koraal-vlak);
}

.mens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0.9rem;
  background: transparent;
  color: inherit;
  text-align: left;
}

.mens:hover {
  background: var(--vlak);
}

.mens-wie {
  flex: 1 1 100%;
  min-width: 0;
}

.mens-naam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--inkt);
}

.mens-functie,
.mens-start,
.mens-taal {
  font-size: 0.875rem;
  color: var(--zacht);
}

.mens-functie {
  display: block;
}

.mens-pijl {
  margin-left: auto;
  color: var(--zacht);
}

.mens[aria-expanded="true"] .mens-pijl {
  transform: rotate(90deg);
}

@media (min-width: 48rem) {
  .mens {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 7.5rem 6.5rem 13.5rem 1.25rem;
  }

  .mens-wie {
    flex: none;
  }

  .mens .status {
    justify-self: start;
  }
}

.mens-detail {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--lijn);
}

.mens-acties {
  margin-top: 1rem;
}

.mens-detail .noot {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------ formulieren */

.formulier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}

.veld {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.veld > label,
.keuze-groep > legend,
.veld-vink > label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--inkt);
}

.demo-pagina input[type="text"],
.demo-pagina input[type="date"],
.demo-pagina input[type="number"],
.demo-pagina select,
.demo-pagina textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  background: var(--papier);
  color: var(--tekst);
}

.demo-pagina textarea {
  resize: vertical;
}

.demo-pagina input:focus,
.demo-pagina select:focus,
.demo-pagina textarea:focus {
  border-color: var(--inkt);
}

.demo-pagina input.vast {
  border-style: dashed;
  background: #f3f1ec;
  color: var(--zacht);
}

.demo-pagina [aria-invalid="true"] {
  border-color: var(--fout);
}

.veld-smal input {
  max-width: 8rem;
}

.veld-midden select {
  max-width: 18rem;
}

.veld-paar {
  display: grid;
  gap: 1rem;
}

@media (min-width: 36rem) {
  .veld-paar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

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

.veld-fout {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fout);
  font-size: 0.875rem;
  font-weight: 600;
}

.veld-fout .icoon {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

.keuze-groep {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.keuze-groep > legend {
  margin-bottom: 0.5rem;
  padding: 0;
}

.keuze-rij {
  flex-direction: row;
  flex-wrap: wrap;
}

.keuze-optie {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--lijn);
  border-radius: 0.6rem;
  background: var(--papier);
  cursor: pointer;
}

.keuze-optie:hover {
  border-color: var(--inkt);
}

.keuze-optie:has(input:checked) {
  border-color: var(--inkt);
  background: var(--info-vlak);
}

.keuze-optie input,
.veld-vink input,
.taal-optie input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: none;
  accent-color: var(--inkt);
}

.keuze-optie .eigen {
  color: var(--zacht);
  font-weight: 400;
}

.veld-vink {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.25rem 0.65rem;
}

.veld-vink input {
  margin-top: 0.2rem;
}

.veld-vink .hulp {
  grid-column: 2;
}

.formulier-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.talen-zin {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 46rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--lijn);
  border-radius: 0.8rem;
  background: var(--papier);
  color: var(--inkt);
  font-size: 0.9375rem;
}

.talen-zin .icoon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--koraal-donker);
}

/* ------------------------------------------------------------ de uitnodiging */

.chat {
  overflow: hidden;
  width: 100%;
  max-width: 28rem;
  border: 1px solid var(--lijn);
  border-radius: 1.25rem;
  background: var(--papier);
}

.chat-kop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #f3f1ec;
  color: var(--inkt);
  font-weight: 600;
}

.chat-kop .label-klein {
  margin-left: auto;
}

.chat-vlak {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1rem 1.5rem;
  background: #ebe7df;
}

.ballon {
  display: grid;
  gap: 0.5rem;
  max-width: 88%;
  padding: 0.6rem 0.75rem 0.45rem;
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: var(--papier);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.voorvertoning {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  border-radius: 0.6rem;
  background: #f6f4ef;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.voorvertoning .bedrijfslogo {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}

.voorvertoning-titel {
  font-weight: 700;
  color: var(--inkt);
}

.nep-link {
  color: var(--info);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.ballon-tijd {
  justify-self: end;
  font-size: 0.75rem;
  color: var(--zacht);
}

.chat figcaption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--lijn);
  font-size: 0.8125rem;
  color: var(--zacht);
}

.uitnodiging-acties {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.uitnodiging-acties .knop {
  justify-self: start;
}

.verstuurd {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--goed);
  font-weight: 600;
}

.verstuurd:focus {
  outline: none;
}

.overgang {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: var(--inkt);
  color: var(--papier);
}

.overgang-tekst {
  font-size: 1.125rem;
  font-weight: 600;
}

.overgang .knop-hoofd {
  background: var(--papier);
  color: var(--inkt);
}

.overgang .knop-hoofd:hover {
  background: var(--zand);
}

/* ------------------------------------------------------------ de telefoon */

.telefoon {
  position: relative;
  overflow: hidden;
  width: min(100%, 22.5rem);
  border: 10px solid #121a33;
  border-radius: 2.6rem;
  background: var(--papier);
  box-shadow: 0 24px 48px -24px rgba(18, 26, 51, 0.55);
}

.telefoon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 6.5rem;
  height: 1.35rem;
  border-radius: 0 0 0.9rem 0.9rem;
  background: #121a33;
  transform: translateX(-50%);
}

@media (max-width: 26rem) {
  .telefoon {
    border-width: 6px;
    border-radius: 2rem;
  }
}

/* Rechts is ruimte voor het lint met "Demo"; daarom staat de batterij wat verder naar links. */
.telefoon-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 4rem 0.35rem 1.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.telefoon-batterij {
  position: relative;
  width: 1.5rem;
  height: 0.75rem;
  border: 1.5px solid currentColor;
  border-radius: 0.2rem;
}

.telefoon-batterij::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 70%;
  height: calc(100% - 3px);
  border-radius: 0.1rem;
  background: currentColor;
}

.telefoon-scherm {
  display: flex;
  flex-direction: column;
  min-height: 36rem;
  padding: 0 1rem 1.5rem;
  font-size: 0.9375rem;
}

/* Het lint blijft in de hoek boven de kop van het scherm, zodat het de taalkeuze niet bedekt. */
.telefoon-lint {
  position: absolute;
  top: 0.4rem;
  right: -2.2rem;
  z-index: 2;
  padding: 0.2rem 2.6rem;
  background: var(--koraal-donker);
  color: var(--papier);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(35deg);
  pointer-events: none;
}

.intake-kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0 0.9rem;
  border-bottom: 1px solid var(--lijn);
}

.intake-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.intake-werkgever {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--inkt);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* De naam van de werkgever mag over twee regels; pas daarna wordt hij afgekapt. */
.intake-werkgever span {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.taal-kiezer {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  color: var(--zacht);
}

.taal-kiezer .icoon {
  width: 1.1rem;
  height: 1.1rem;
}

.demo-pagina .taal-kiezer select {
  width: auto;
  min-height: 2.25rem;
  padding: 0.25rem 0.4rem;
  border-radius: 0.4rem;
  font-size: 0.8125rem;
}

.intake-voortgang {
  display: grid;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--zacht);
}

.intake-voortgang progress {
  width: 100%;
  height: 0.375rem;
  border: 0;
  border-radius: 999px;
  background: #ece9e2;
  appearance: none;
}

.intake-voortgang progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #ece9e2;
}

.intake-voortgang progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--koraal-donker);
}

.intake-voortgang progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--koraal-donker);
}

.intake-inhoud {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  align-content: start;
}

.intake-inhoud h2 {
  font-size: 1.5rem;
}

.intake-inhoud h3 {
  font-size: 1rem;
}

.intake-uitleg {
  font-size: 0.875rem;
  color: var(--zacht);
}

.intake-formulier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}

.intake-knoppen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.taal-knoppen {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.taal-knoppen legend {
  margin-bottom: 0.4rem;
  padding: 0;
  color: var(--inkt);
  font-size: 0.875rem;
  font-weight: 600;
}

.taal-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.taal-optie {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--lijn);
  border-radius: 0.6rem;
  font-weight: 600;
  cursor: pointer;
}

.taal-optie:has(input:checked) {
  border-color: var(--inkt);
  background: var(--info-vlak);
}

.meer-talen {
  color: var(--zacht);
  font-size: 0.8125rem;
  text-align: center;
}

.intake-privacy {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--lijn);
  border-radius: 0.6rem;
  font-size: 0.875rem;
}

.intake-privacy summary {
  color: var(--inkt);
  font-weight: 600;
  cursor: pointer;
}

.intake-privacy p {
  margin-top: 0.5rem;
}

.intake-privacy .concept {
  font-style: italic;
  color: var(--zacht);
}

.pin {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  color: var(--inkt);
}

.pin span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.75rem;
  border: 1px solid var(--lijn);
  border-radius: 0.5rem;
  background: #f6f4ef;
}

.samenvatting {
  display: grid;
  gap: 0.15rem;
  font-size: 0.9375rem;
}

.samenvatting dt {
  color: var(--zacht);
  font-size: 0.8125rem;
}

.samenvatting dd {
  margin: 0 0 0.5rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.foto-vak {
  display: grid;
  gap: 0.5rem;
}

.foto-knop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 6.5rem;
  border: 2px dashed var(--rand);
  border-radius: 0.9rem;
  background: var(--vlak);
  color: var(--inkt);
  font-weight: 600;
}

.foto-knop:hover {
  border-color: var(--inkt);
}

.foto-knop .icoon {
  width: 1.75rem;
  height: 1.75rem;
}

.foto-onder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.foto-klaar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--goed);
  font-size: 0.875rem;
  font-weight: 600;
}

.idkaart {
  display: block;
  width: 100%;
  height: auto;
}

.intake-klaar,
.intake-wacht {
  justify-items: center;
  padding-top: 2.5rem;
  text-align: center;
}

.intake-wacht {
  color: var(--zacht);
}

.groot-vinkje,
.groot-icoon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}

.groot-vinkje {
  background: var(--goed);
  color: var(--papier);
}

.groot-icoon {
  background: var(--zand);
  color: var(--inkt);
}

.groot-vinkje .icoon,
.groot-icoon .icoon {
  width: 2rem;
  height: 2rem;
}

.bericht {
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem;
  border: 1px solid var(--lijn);
  border-radius: 0.9rem;
  background: #f6f4ef;
}

.bericht-titel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--inkt);
  font-weight: 700;
}

/* ------------------------------------------------------------ meldingen van de controles */

.melding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid;
  border-radius: 0.8rem;
}

.melding-icoon {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
}

.melding-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  font-weight: 700;
}

.melding-soort {
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  color: var(--papier);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.melding-tekst p + p {
  margin-top: 0.3rem;
}

.melding-bron {
  font-size: 0.8125rem;
  font-weight: 600;
}

.melding-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.melding-blokkade {
  border-color: #f3c2c2;
  background: var(--fout-vlak);
  color: #8f1f1f;
}

.melding-blokkade .melding-soort {
  background: var(--fout);
}

.melding-waarschuwing {
  border-color: #f2dcae;
  background: var(--let-op-vlak);
  color: #6d470e;
}

.melding-waarschuwing .melding-soort {
  background: var(--let-op);
}

.melding-signaal {
  border-color: #cdd6ee;
  background: var(--info-vlak);
  color: #23356b;
}

.melding-signaal .melding-soort {
  background: var(--info);
}

.melding-goed {
  border-color: #bfe0cf;
  background: var(--goed-vlak);
  color: #145c3c;
}

.melding-goed .melding-soort {
  background: var(--goed);
}

/* ------------------------------------------------------------ gegevens, kaartjes en het contract samenstellen */

.opstellen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .opstellen {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 2.5rem;
  }
}

.opstellen-rechts {
  display: grid;
  gap: 0.9rem;
  padding: 1.25rem;
  border: 1px solid var(--lijn);
  border-radius: 1rem;
  background: var(--vlak);
}

#controles-kop:focus {
  outline: none;
}

.meldingen {
  display: grid;
  gap: 0.65rem;
}

.controles-lijst summary {
  color: var(--inkt);
  font-weight: 600;
  cursor: pointer;
}

.controles-lijst .stand {
  margin-top: 0.75rem;
}

.gegevens {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem 1rem;
  font-size: 0.9375rem;
}

.gegevens dt {
  color: var(--zacht);
  font-size: 0.8125rem;
}

.gegevens dd {
  margin: 0 0 0.45rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (min-width: 30rem) {
  .gegevens {
    grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
    gap: 0.45rem 1rem;
  }

  .gegevens dt {
    font-size: 0.9375rem;
  }

  .gegevens dd {
    margin: 0;
  }
}

.kaartjes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 48rem) {
  .kaartjes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .kaartjes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kaartje {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--lijn);
  border-radius: 1rem;
  background: var(--papier);
}

.kaartje-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.kaartje .knop-tekst {
  justify-self: start;
}

.id-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.geheim {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
}

.geheim-waarde {
  font-variant-numeric: tabular-nums;
}

.geheim-noot {
  color: var(--zacht);
  font-size: 0.75rem;
  font-weight: 500;
}

/* ------------------------------------------------------------ het contract */

.contract-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.taal-schakelaar .keuze-optie {
  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
}

.legenda {
  color: var(--zacht);
  font-size: 0.875rem;
}

mark.ingevuld {
  padding: 0 0.15em;
  border-bottom: 2px solid var(--koraal);
  border-radius: 0.2em;
  background: #ffe3dc;
  color: inherit;
}

.vel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 64rem;
  padding: 1.25rem;
  border: 1px solid var(--lijn);
  border-radius: 0.5rem;
  background: var(--papier);
  box-shadow: 0 18px 40px -24px rgba(29, 43, 95, 0.35);
}

@media (min-width: 48rem) {
  .vel {
    padding: 2.5rem 3rem;
  }
}

.stempel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 2px dashed var(--fout);
  border-radius: 0.5rem;
  background: #fff7f7;
  color: #a12626;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.stempel .icoon {
  flex: none;
}

.vel-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 2.5rem;
}

@media (min-width: 56rem) {
  .tweetalig .vel-rij {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.tweetalig .vel-rij > div + div {
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  background: #fbfaf7;
}

@media (min-width: 56rem) {
  .tweetalig .vel-rij > div + div {
    padding: 0;
    background: none;
  }
}

.vel-taal {
  color: var(--zacht);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-inhoud .vel-titel {
  margin-top: 0.25rem;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.2;
}

.artikelen {
  display: grid;
  gap: 1.1rem;
}

.artikel h3 {
  font-size: 0.9375rem;
}

.artikel p {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
}

.teken-blok h3 {
  font-size: 0.9375rem;
}

.teken-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.teken-vak {
  padding-top: 0.4rem;
  border-top: 1px solid var(--tekst);
}

.teken-wie {
  color: var(--zacht);
  font-size: 0.8125rem;
}

.teken-gezet {
  color: var(--goed);
  font-size: 0.875rem;
  font-weight: 600;
}

.teken-open {
  color: var(--zacht);
  font-size: 0.875rem;
  font-style: italic;
}

/* ------------------------------------------------------------ dossier en overdracht */

.dossier-signaal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 0.8rem;
  background: var(--info-vlak);
  color: #23356b;
  font-weight: 600;
}

.dossier-signaal .icoon {
  flex: none;
}

.tijdlijn {
  display: grid;
  gap: 0.55rem;
  padding-left: 1rem;
  border-left: 2px solid var(--lijn);
}

.tijdlijn li {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.tijdlijn li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: calc(-1rem - 5px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--koraal);
}

.tijdlijn time {
  color: var(--zacht);
  font-variant-numeric: tabular-nums;
}

.overdracht-stappen li.gedaan .wat {
  color: var(--goed);
  font-weight: 600;
}

.overdracht-uitslag {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.overdracht-uitslag .knop {
  justify-self: start;
}

/* ------------------------------------------------------------ begin en denk mee */

.keuze-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 48rem) {
  .keuze-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.keuze-kaart,
.talen-blok {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--lijn);
  border-radius: 1.25rem;
  background: var(--papier);
}

.keuze-kaart .knop {
  justify-self: start;
  margin-top: 0.25rem;
}

.demo-inhoud .keuze-kaart h2 {
  font-size: 1.5rem;
}

.keuze-kaart p {
  color: var(--zacht);
}

.eu-talen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.eu-talen li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: #fbfaf7;
  color: var(--zacht);
  font-size: 0.875rem;
}

.eu-talen li.in-demo {
  border-color: var(--inkt);
  background: var(--inkt);
  color: var(--papier);
  font-weight: 600;
}

.start-noot {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 46rem;
  color: var(--zacht);
  font-size: 0.9375rem;
}

.start-noot .icoon {
  flex: none;
  margin-top: 0.2rem;
}

.venster-licht .venster-inhoud {
  padding: 1.5rem;
}

.proef-blok {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: var(--inkt);
  color: var(--papier);
}

.demo-inhoud .proef-blok h2 {
  color: var(--papier);
  font-size: 1.5rem;
}

.proef-blok .knop {
  justify-self: start;
}

.demo-inhoud .proef-blok .noot {
  color: var(--licht);
}

.mail-details summary {
  color: var(--inkt);
  font-weight: 600;
  cursor: pointer;
}

.mail-voorbeeld {
  overflow: auto;
  max-height: 16rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: #f6f4ef;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8125rem;
  white-space: pre-wrap;
}

.kopie-reserve {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------ melding onderin en de voet */

/* Links en rechts vast met een marge, en in het midden met margin auto: zo wordt hij op een telefoon niet smaller dan
   nodig en valt hij nooit buiten het scherm. */
.toast {
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  left: 1rem;
  z-index: 20;
  width: fit-content;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0.75rem 1.1rem;
  border-radius: 0.75rem;
  background: var(--tekst);
  color: var(--papier);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
}

.demo-pagina .voet {
  background: var(--papier);
}

.demo-pagina .voet-gegevens {
  padding-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .demo-pagina *,
  .demo-pagina *::before,
  .demo-pagina *::after {
    transition: none !important;
    animation: none !important;
  }
}