/* KineMed Aartselaar: de balie, geen folder. Tokens uit de Beslissingen. Vaste klassen: app/docs/UI.md. */

:root {
  --papier: #FBFAF7;
  --inkt: #2B2B2B;
  --tekst-2: #5C5A56;
  --antraciet: #4A4A4A;
  --ijsblauw: #D6E4F5;
  --diepblauw: #2A5A8C;
  --rand: #7D7A74;
  --fout: #A3261C;
  --gelukt: #1F6B3D;
  --marge: 1.25rem;
  --tik: 2.75rem;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0 0 1rem; font-weight: 700; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); line-height: 1.2; }
h3 { font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem); line-height: 1.3; }
p, ul, ol, dl, table { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.25rem; }

a { color: var(--diepblauw); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--diepblauw); outline-offset: 2px; }
.kop :focus-visible, .balie :focus-visible, .voet :focus-visible { outline-color: var(--ijsblauw); }
main:focus { outline: none; }

.skiplink {
  position: absolute;
  left: 0.5rem;
  top: -6rem;
  z-index: 20;
  padding: 0.625rem 1rem;
  background: var(--papier);
  color: var(--inkt);
}
.skiplink:focus { top: 0.5rem; }

/* Elke uitklapper: 44 px en een zichtbaar teken voor dicht en open. Tweede content-regel: geen tekst voor schermlezers, die melden de toestand zelf. */
summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tik); font-weight: 700; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "\25B8"; content: "\25B8" / ""; flex: none; }
details[open] > summary::before { content: "\25BE"; content: "\25BE" / ""; }
.menu-gsm > summary::before, .menu-gsm[open] > summary::before { content: none; }

/* ---------- Kolommen ---------- */

.breed { max-width: 70rem; margin-inline: auto; padding-inline: var(--marge); }
.smal { max-width: 68ch; }
.hoofdvlak { max-width: 70rem; margin-inline: auto; padding: 2rem var(--marge) 3rem; }
.hoofdvlak > .breed { padding-inline: 0; }
.meldingen { max-width: 70rem; margin-inline: auto; }
.vol .meldingen { padding: 1rem var(--marge) 0; }

/* ---------- Demostrook, niet vast ---------- */

.demostrook { background: var(--ijsblauw); color: var(--inkt); font-size: 1rem; padding: 0.5rem var(--marge); min-height: 2.5rem; }
.demostrook p { margin: 0; max-width: 70rem; margin-inline: auto; }

/* ---------- Kop: de band op antraciet ---------- */

.kop { background: var(--antraciet); color: #fff; }
.kop-binnen {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 70rem;
  margin-inline: auto;
  padding: 0.5rem var(--marge);
  align-items: start;
}
.woordmerk {
  grid-area: 1 / 1;
  z-index: 1;
  justify-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 7.5rem;
  min-height: 3rem;
  color: var(--ijsblauw);
  text-decoration: none;
  line-height: 1.1;
}
.woordmerk strong { font-size: 1.375rem; letter-spacing: -0.01em; }
.woordmerk span { font-size: 1rem; }

.menu-gsm { grid-area: 1 / 1; }
.menu-gsm summary {
  display: flex;
  align-items: center;
  width: max-content;
  min-height: 3rem;
  min-width: var(--tik);
  margin-left: auto;
  padding-inline: 0.75rem;
  border: 2px solid var(--ijsblauw);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.menu-gsm summary::-webkit-details-marker { display: none; }
.menu-gsm nav { padding-block: 1rem 0.5rem; }
.menu-gsm .knop { margin-top: 0.5rem; background: var(--ijsblauw); color: var(--inkt); }
.menu-lijst { list-style: none; margin: 0; padding: 0; }
.menu-lijst li { margin: 0; }
.menu-lijst a {
  display: flex;
  align-items: center;
  min-height: var(--tik);
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.menu-lijst a[aria-current] { color: var(--ijsblauw); font-weight: 700; }
.menu-breed { display: none; }
.kop .kop-knop { display: none; background: var(--ijsblauw); color: var(--inkt); }

/* Tablet en liggende of sterk ingezoomde gsm: geen belbalk, dus de kopknop staat naast "Menu". Het menu valt over de pagina. */
@media (min-width: 48em), (max-height: 29.99em) {
  .kop-binnen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; position: relative; }
  .kop .kop-knop { display: inline-flex; margin-left: auto; }
  .menu-gsm summary { margin-left: 0; }
  .menu-gsm nav { position: absolute; inset-inline: 0; top: 100%; z-index: 5; padding: 1rem var(--marge); background: var(--antraciet); }
}

@media (min-width: 60em) {
  .kop-binnen { gap: 0.5rem 1.5rem; }
  .menu-gsm { display: none; }
  .menu-breed { display: block; margin-left: auto; }
  .menu-breed .menu-lijst { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .menu-breed a { font-size: 1rem; }
  .kop .kop-knop { margin-left: 0; }
}

/* Stille kop in de boeking en op de linkpagina's, band van het beheer: woordmerk, en enkel wat daar nodig is. */
.kop-stil .kop-binnen, .kop-beheer .kop-binnen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.kop-stil .kop-binnen { justify-content: space-between; }
.kop-bel { display: inline-flex; align-items: center; min-height: var(--tik); color: #fff; font-size: 1rem; }
.kop-woord { margin: 0; color: var(--ijsblauw); font-weight: 700; }
.kop-beheer .knop-link, .kop-beheer .hulp { margin: 0; color: #fff; }

/* ---------- De balie: home, zonder foto ---------- */

.balie { background: var(--antraciet); color: #fff; }
.balie > .breed { display: grid; gap: 2rem; padding-block: clamp(1.5rem, 5vw, 4.5rem); }
.balie h1 { max-width: 16ch; margin-bottom: 1rem; }
.balie-sub { max-width: 34ch; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); line-height: 1.35; color: var(--ijsblauw); }
.balie .knop { background: var(--ijsblauw); color: var(--inkt); }
.balie .knop-tweede { background: transparent; color: #fff; border-color: var(--ijsblauw); }
.balie .looplijn { height: 0.625rem; color: var(--ijsblauw); }
@media (min-width: 60em) { .balie > .breed { grid-template-columns: 7fr 5fr; align-items: end; } }

/* Het baliebord: wat een balie meteen weet. Op de balie op antraciet, op een dienstpagina op papier. */
.baliebord { margin: 0; padding-left: 1.25rem; border-left: 0.375rem solid var(--antraciet); font-variant-numeric: tabular-nums; }
.baliebord dt { font-size: 1rem; font-weight: 700; margin-top: 1rem; }
.baliebord dt:first-child { margin-top: 0; }
.baliebord dd { margin: 0; font-size: 1.25rem; line-height: 1.35; }
.baliebord .klein { display: block; font-size: 1rem; }
.balie .baliebord { border-left-color: var(--ijsblauw); }
.balie .baliebord dt { color: var(--ijsblauw); }
.balie .baliebord dd { font-size: 1.5rem; }
.balie .baliebord a { color: #fff; }

/* De looplijn: passen die langer worden, en de lijn loopt door tot de rand. Enig decor van de site. */
.looplijn {
  height: 0.375rem;
  color: var(--ijsblauw);
  background: linear-gradient(90deg, currentColor 0 6%, transparent 6% 7.5%, currentColor 7.5% 19%, transparent 19% 20.5%,
    currentColor 20.5% 42%, transparent 42% 43.5%, currentColor 43.5% 100%);
}

.knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }

/* ---------- Secties ---------- */

.sectie { padding-block: 2.5rem; }
.sectie + .sectie { border-top: 1px solid var(--rand); }
.vol .sectie { max-width: 70rem; margin-inline: auto; padding-inline: var(--marge); }
/* De home als register: de kop is het etiket, de inhoud is het grootst. */
@media (min-width: 60em) {
  .vol .sectie { display: grid; grid-template-columns: 3fr 9fr; column-gap: 2rem; }
  .vol .sectie > * { grid-column: 2; }
  .vol .sectie > h2 { grid-column: 1; grid-row: 1 / span 9; font-size: 1.375rem; }
}

.paginakop { margin-bottom: 2rem; }
.paginakop .inleiding { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); line-height: 1.35; max-width: 40ch; margin: 0; color: var(--tekst-2); }
.tekst { max-width: 68ch; }
.tekst > *:last-child { margin-bottom: 0; }
/* Een tekstsectie: de lijn loopt over de hele kolom, de tekst blijft leesbaar smal. */
.sectie.tekst { max-width: none; }
.sectie.tekst > * { max-width: 68ch; }

/* Dienstpagina's: vanaf een breed scherm staat het baliebord naast de tekst. */
.bord-zij { display: none; }
@media (min-width: 60em) {
  .met-bord { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 3rem; align-items: start; }
  .bord-zij { display: block; position: sticky; top: 1rem; margin-top: 2.5rem; }
}

/* Volle tekstregels voor de pijlers: geen kaarten */
.pijlers { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--inkt); }
.pijlers li { display: grid; gap: 0 1.5rem; margin: 0; padding-bottom: 1rem; border-bottom: 2px solid var(--rand); }
.pijlers li > a:first-child { display: block; padding-block: 1rem; min-height: var(--tik); }
.pijlers .knop-tweede { justify-self: start; }
.pijlers .regel-naam { display: block; font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.pijlers .regel-tekst { display: block; color: var(--tekst-2); }
@media (min-width: 48em) {
  .pijlers li { grid-template-columns: 1fr auto; align-items: center; padding-bottom: 0; }
}

/* De index van /diensten/ */
.index { margin-top: 2.5rem; }
.index:first-of-type { margin-top: 0; }
.index-regels { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--inkt); }
.index-regels li { margin: 0; border-bottom: 1px solid var(--rand); padding-block: 0.625rem; }
.index-regels a { display: inline-block; padding-block: 0.25rem; font-weight: 700; font-size: 1.25rem; line-height: 1.3; min-height: var(--tik); }
.index-regels span { display: block; color: var(--tekst-2); font-size: 1rem; }
@media (min-width: 48em) {
  .index-regels li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; align-items: baseline; }
  .index-regels span { font-size: 1.125rem; }
}

/* Genummerde stappen op de looplijn */
.looplijst { list-style: none; margin: 0; padding: 0; counter-reset: stap; display: grid; gap: 1.5rem; }
.looplijst li { counter-increment: stap; margin: 0; padding-top: 0.75rem; border-top: 0.375rem solid var(--antraciet); max-width: 68ch; }
.looplijst li::before { content: counter(stap); display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
@media (min-width: 48em) { .looplijst.drie { grid-template-columns: 1fr 1.25fr 1.5fr; } }

.kruimels ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 1rem; }
.kruimels li { margin: 0; }
.kruimels li + li::before { content: "/"; margin-inline: 0.5rem; color: var(--tekst-2); }
.kruimels a { display: inline-flex; align-items: center; min-height: var(--tik); }
.kruimels [aria-current] { display: inline-flex; align-items: center; min-height: var(--tik); color: var(--tekst-2); }

.te-bevestigen { font-size: 1rem; color: var(--tekst-2); border-left: 0.375rem solid var(--rand); padding-left: 0.75rem; max-width: 68ch; }

/* Team: geen foto's, een rooster als de lijst aan een balie */
.rooster { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--inkt); }
.rooster li { margin: 0; padding-block: 1.25rem; border-bottom: 1px solid var(--rand); }
.rooster h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); margin-bottom: 0.25rem; }
.rooster .titel { color: var(--tekst-2); margin-bottom: 0.25rem; }
.rooster p:last-child { margin-bottom: 0; max-width: 68ch; }
.namen { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); line-height: 1.35; max-width: 40ch; }

/* Beeldbriefing als contactblad: genummerde vlakken in plaats van overgenomen foto's */
.vlakken { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 2rem 1.5rem; counter-reset: vlak; }
.vlakken figure { margin: 0; counter-increment: vlak; }
.vlakken figure:first-child { grid-column: 1 / -1; }
.vlak {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  aspect-ratio: 3 / 2;
  padding: 1rem;
  background: var(--antraciet);
  color: var(--ijsblauw);
  font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
  border-bottom: 0.375rem solid var(--ijsblauw);
}
.vlak::before { content: counter(vlak, decimal-leading-zero); content: counter(vlak, decimal-leading-zero) / ""; font-size: 1rem; font-variant-numeric: tabular-nums; }
.vlakken figure:first-child .vlak { aspect-ratio: 3 / 1; min-height: 11rem; }
.vlakken figcaption { padding-top: 0.5rem; font-size: 1rem; color: var(--tekst-2); }

.tweekolom { display: grid; gap: 2.5rem; }
@media (min-width: 60em) { .tweekolom { grid-template-columns: 2fr 3fr; gap: 3rem; } }
.nap p { margin-bottom: 0.5rem; }
.nap .groot { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }

/* Veelgestelde vragen */
.vraag { padding-block: 1.25rem; border-bottom: 1px solid var(--rand); max-width: 68ch; }
.vraag h2 { font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem); line-height: 1.3; margin-bottom: 0.5rem; }
.vraag p:last-child { margin-bottom: 0; }

/* ---------- Uw volgende stap ---------- */

.volgende-stap { background: var(--ijsblauw); color: var(--inkt); }
.volgende-stap .looplijn { color: var(--antraciet); }
.volgende-stap-binnen { padding-block: 2.5rem; }
.volgende-stap p { max-width: 40ch; }
.volgende-stap .knop { margin-bottom: 1rem; }
.volgende-stap form { margin: 0; }
.volgende-stap p:last-child { margin-bottom: 0; }
.tekstlink { display: inline-flex; align-items: center; min-height: var(--tik); }

/* ---------- Voettekst ---------- */

.voet { background: var(--antraciet); color: #fff; padding-block: 2.5rem 1rem; font-size: 1rem; }
.voet a { color: #fff; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin: 0; }
.voet nav a { display: inline-flex; align-items: center; min-height: var(--tik); }
.voet p a { display: inline-block; padding-block: 0.625rem; }
.voet-binnen { display: grid; gap: 2rem; }
@media (min-width: 48em) { .voet-binnen { grid-template-columns: repeat(3, 1fr); } }
.voet-naam { color: var(--ijsblauw); font-weight: 700; margin-bottom: 0.5rem; }
.voet-klein { margin-top: 2rem; }
.voet-klein p { margin-bottom: 0.25rem; }
/* Stille voet in de boeking, op de linkpagina's en in het beheer: één regel. */
.voet-stil { padding-block: 1rem; }
.voet-stil p { margin: 0; }

/* ---------- Vaste belbalk: enkel op gsm, verdwijnt bij zoom of een lage schermhoogte ---------- */

.belbalk { display: none; }
@media (max-width: 47.99em) and (min-height: 30em) {
  html { scroll-padding-bottom: 5.5rem; }
  body:has(> .belbalk) { padding-bottom: 4.25rem; }
  .belbalk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    padding: 0.5rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    background: var(--papier);
    border-top: 2px solid var(--rand);
  }
  .belbalk a { justify-content: center; text-align: center; font-size: 1rem; padding-inline: 0.25rem; width: 100%; }
}

/* ---------- Vaste klassen uit UI.md ---------- */

.knop, .knop-tweede, .knop-gevaar, .bel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tik);
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.knop { background: var(--antraciet); color: #fff; }
.knop:hover { background: var(--inkt); }
.knop-tweede, .bel { background: var(--papier); color: var(--inkt); border-color: var(--inkt); }
.knop-tweede:hover, .bel:hover { background: var(--ijsblauw); }
/* Op antraciet is de knop ijsblauw: daar wordt hover een wit vlak met inkt, nooit inkt op inkt of wit op ijsblauw. */
.kop .knop:hover, .balie .knop:hover, .menu-gsm .knop:hover { background: #fff; color: var(--inkt); }
.balie .knop-tweede:hover { background: var(--ijsblauw); color: var(--inkt); }
.knop-gevaar { background: var(--papier); color: var(--fout); border-color: var(--fout); }
.knop-gevaar:hover { text-decoration: underline; }
.knop-link {
  min-height: var(--tik);
  padding: 0;
  background: none;
  border: 0;
  color: var(--diepblauw);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.veld { margin-bottom: 1.25rem; max-width: 68ch; }
.veld label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.veld input, .veld textarea, .veld select {
  display: block;
  width: 100%;
  min-height: var(--tik);
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--inkt);
  background: #fff;
  border: 2px solid var(--rand);
  border-radius: 4px;
}
.veld input[type="checkbox"], .veld input[type="radio"] { display: inline-block; width: 1.5rem; min-height: 1.5rem; }
.veld textarea { min-height: 10rem; resize: vertical; }
.veld [aria-invalid="true"] { border-color: var(--fout); }
.veld-fout { color: var(--fout); font-weight: 700; margin: 0.25rem 0 0; }
.hulp { color: var(--tekst-2); font-size: 1rem; margin: 0.25rem 0 0.5rem; }

.stappen { display: flex; gap: 0.25rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: 1rem; }
/* De stappenbalk maakt dezelfde langer wordende passen als de looplijn. */
.stap { flex: 1 1 auto; margin: 0; padding-top: 0.5rem; border-top: 0.375rem solid var(--rand); color: var(--tekst-2); }
.stap:nth-child(2) { flex-grow: 1.5; }
.stap:nth-child(3) { flex-grow: 2; }
.stap:nth-child(4) { flex-grow: 3; }
.stap-klaar { border-top-color: var(--antraciet); }
.stap-nu { border-top-color: var(--antraciet); color: var(--inkt); font-weight: 700; }

.momenten details { border-bottom: 1px solid var(--rand); }
.momenten summary { padding-block: 0.5rem; }
.uren { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; padding-block: 0.5rem 1rem; }
.uur {
  min-height: var(--tik);
  padding: 0.5rem 0.25rem;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--inkt);
  background: var(--papier);
  border: 2px solid var(--rand);
  border-radius: 4px;
  cursor: pointer;
}
.uur:hover { background: var(--ijsblauw); }
/* "Andere momenten" na een bezet moment: die kunnen op een andere dag vallen, dus de knop toont de hele datum. */
.uren-met-dag { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

.kaart { padding: 1.25rem; border: 2px solid var(--rand); border-radius: 4px; margin-bottom: 1rem; }
.kaart > *:last-child { margin-bottom: 0; }
.kaart h2 { font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem); line-height: 1.3; }
.kaart dt { font-weight: 700; margin-top: 0.5rem; }
.kaart dt:first-child { margin-top: 0; }
.kaart dd { margin: 0; }

/* Het afspraakkaartje op de bevestiging en de linkpagina: ijsblauw vlak, looplijn erboven, het moment het grootst. */
.afspraakkaart { margin-bottom: 1rem; background: var(--ijsblauw); color: var(--inkt); }
.afspraakkaart .looplijn { color: var(--antraciet); }
.afspraakkaart .kaart { margin: 0; border: 0; }
.afspraakkaart dd:first-of-type, .afspraakkaart p.kaart { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.2; }

.melding { padding: 0.75rem 1rem; margin-bottom: 1rem; border-left: 0.375rem solid var(--rand); background: #fff; }
.melding-gelukt { border-left-color: var(--gelukt); color: var(--gelukt); font-weight: 700; }
.melding-fout { border-left-color: var(--fout); color: var(--fout); font-weight: 700; }
.melding-info { border-left-color: var(--diepblauw); }
.melding a { color: inherit; }

.tabel-wrap { overflow-x: auto; margin-bottom: 1rem; }
.tabel-wrap table { margin: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 0.625rem 0.75rem 0.625rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rand); }
thead th { border-bottom: 2px solid var(--inkt); }
caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; }

.demo-opmerking { background: var(--ijsblauw); padding: 0.5rem 0.75rem; font-size: 1rem; border-radius: 4px; }

dialog { max-width: min(32rem, calc(100vw - 2rem)); border: 2px solid var(--rand); border-radius: 4px; padding: 1.5rem; color: var(--inkt); background: var(--papier); }
dialog::backdrop { background: rgb(43 43 43 / 0.6); }

/* ---------- Contactformulier ---------- */

.hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.fouten { padding: 0.75rem 1rem; margin-bottom: 1.25rem; border-left: 0.375rem solid var(--fout); background: #fff; }
.fouten p { color: var(--fout); font-weight: 700; margin-bottom: 0.25rem; }
.fouten ul { margin: 0; }

@media (min-width: 48em) {
  :root { --marge: 2rem; }
}