/* somondzorg.nl - merkkleuren uit het logo: teal #54A8C0, grijs #58595B.
   Tekstkleuren zijn de donkere varianten, zodat alles WCAG AA (>= 4.5:1) haalt. */

:root {
  --teal: #54a8c0;          /* merkkleur, alleen voor vlakken en accenten */
  --teal-tekst: #175e75;    /* 7.26:1 op wit */
  --teal-knop: #1f6b82;     /* 6.03:1 met witte tekst */
  --teal-licht: #eef7fa;
  --teal-rand: #cfe6ee;
  /* Magenta accent van de oude site. Letterlijk overgenomen uit de gearchiveerde CSS:
     #footer-callout-wrap{background-color:#b93a74;color:#ffffff}
     Haalt met witte tekst 5.36:1, dus WCAG AA zonder dat we hem hoeven bij te stellen. */
  --magenta: #b93a74;
  --magenta-donker: #9e3062;  /* voor hover, 6.88:1 */
  --inkt: #2b2b2b;          /* 14.2:1 op wit */
  --grijs: #58595b;         /* 7.0:1 op wit */
  --lijn: #e2e6e8;
  --wit: #ffffff;
  --papier: #f7fafb;
  --waarschuwing: #8a4b00;
  --waarschuwing-vlak: #fff6e8;
  --straal: 10px;
  --breedte: 1080px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--inkt);
  background: var(--wit);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Browsers zetten <address> standaard cursief. Adresgegevens horen rechtop. */
address { font-style: normal; }

a { color: var(--teal-tekst); }
a:hover { text-decoration: none; }

/* Links die middenin een zin naar een andere pagina wijzen, in het magenta van de
   oude site. Daarmee verschillen ze zichtbaar van het teal van de navigatie en de
   knoppen, en ziet een lezer meteen dat er dieper op wordt ingegaan. --magenta-donker
   haalt 6.88:1 op wit en blijft ook op --papier en --teal-licht boven 4.5:1. */
.tekstlink {
  color: var(--magenta-donker);
  text-decoration-color: var(--magenta);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.tekstlink:hover { color: var(--magenta); }

:focus-visible {
  outline: 3px solid var(--teal-knop);
  outline-offset: 2px;
  border-radius: 3px;
}

.omhulsel { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 20px; }

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--wit); color: var(--teal-tekst);
  padding: 12px 18px; z-index: 100;
}
.overslaan:focus { left: 8px; top: 8px; }

/* ---------- Kop ---------- */

.kop { border-bottom: 1px solid var(--lijn); background: var(--wit); }
.kop-balk {
  background: var(--teal-licht);
  border-bottom: 1px solid var(--teal-rand);
  font-size: .92rem;
}
.kop-balk .omhulsel {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  align-items: center; justify-content: flex-end;
  min-height: 40px; color: var(--grijs);
}
.kop-balk a { color: var(--teal-tekst); text-decoration: none; font-weight: 600; }
.kop-balk a:hover { text-decoration: underline; }

.kop-rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 14px;
}
.merk { display: inline-flex; line-height: 0; }
.merk img, .merk picture { width: 210px; height: auto; display: block; }

.menuknop {
  display: none; align-items: center; gap: 9px;
  font: inherit; font-weight: 600; color: var(--inkt);
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--straal); padding: 9px 14px; cursor: pointer;
}
.streepjes, .streepjes::before, .streepjes::after {
  display: block; width: 20px; height: 2px; background: var(--inkt);
  border-radius: 2px; content: '';
}
.streepjes { position: relative; }
.streepjes::before { position: absolute; top: -6px; }
.streepjes::after { position: absolute; top: 6px; }

nav ul { list-style: none; margin: 0; padding: 0; }
#hoofdmenu > ul { display: flex; flex-wrap: wrap; gap: 4px; }
#hoofdmenu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--inkt); text-decoration: none; font-weight: 600; font-size: .97rem;
}
#hoofdmenu a:hover { background: var(--teal-licht); color: var(--teal-tekst); }
#hoofdmenu a.actief { color: var(--teal-tekst); background: var(--teal-licht); }

/* Behandelingen-submenu. Parent is een button: die pagina bestaat niet. */
.heeft-sub { position: relative; }
.heeft-sub > button {
  display: flex; align-items: center; gap: 7px;
  font: inherit; font-weight: 600; font-size: .97rem; color: var(--inkt);
  background: none; border: 0; border-radius: 8px;
  padding: 9px 12px; cursor: pointer;
}
.heeft-sub > button:hover { background: var(--teal-licht); color: var(--teal-tekst); }
.heeft-sub > button.actief { color: var(--teal-tekst); background: var(--teal-licht); }
.chevron {
  width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
}
.submenu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  min-width: 250px; padding: 6px; margin: 0;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--straal); box-shadow: 0 6px 22px rgba(23, 94, 117, .13);
  display: none;
}
/* Alleen .open opent het submenu. Eerder deden :hover en :focus-within dat ook,
   maar die weten niets van aria-expanded; daardoor meldde een schermlezer "dicht"
   terwijl het menu openstond, en sloot een tweede Enter niets. Nu zet JavaScript
   .open en aria-expanded altijd samen, voor muis, toetsenbord en focus. */
.heeft-sub.open > .submenu { display: block; }
.heeft-sub.open > button .chevron { transform: rotate(225deg) translate(-2px, -2px); }
.submenu a { white-space: nowrap; }

/* ---------- Kruimels ---------- */

.kruimels { border-bottom: 1px solid var(--lijn); background: var(--papier); font-size: .9rem; }
.kruimels ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 auto; padding: 10px 20px; max-width: var(--breedte); color: var(--grijs);
}
.kruimels li + li::before { content: '\203A'; margin-right: 6px; color: var(--grijs); }
.kruimels a { color: var(--teal-tekst); display: inline-block; padding: 5px 0; }

/* ---------- Vlakken ---------- */

.vlak { padding: clamp(38px, 6vw, 64px) 0; }
.vlak-papier { background: var(--papier); border-block: 1px solid var(--lijn); }
.vlak-teal { background: var(--teal-licht); border-block: 1px solid var(--teal-rand); }

/* De callout-band onderaan, in het magenta van de oude site. */
.vlak-callout { background: var(--magenta); color: var(--wit); }
.vlak-callout h2 { color: var(--wit); }
/* #fbf1f5 en niet lichter getint: op dit magenta haalt dat 4.85:1. Een roziger
   tint als #f6e3ec zakt naar 4.37:1 en valt daarmee onder de AA-grens. */
.vlak-callout p { color: #fbf1f5; }
.vlak-callout .knop-vol {
  background: var(--wit); color: var(--magenta); border-color: var(--wit);
}
.vlak-callout .knop-vol:hover { background: #fbf1f5; color: var(--magenta-donker); }
.vlak-callout .knop-rand {
  background: transparent; color: var(--wit); border-color: rgba(255, 255, 255, .85);
}
.vlak-callout .knop-rand:hover { border-color: var(--wit); background: rgba(255, 255, 255, .1); }
.vlak-callout :focus-visible { outline-color: var(--wit); }
.smal { max-width: 66ch; }

.held { padding: clamp(44px, 7vw, 78px) 0; background: var(--teal-licht); border-bottom: 1px solid var(--teal-rand); }
.held p.leid { font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); color: var(--grijs); max-width: 60ch; }
/* Het motto in magenta, zodat de accentkleur van de oude site ook bovenaan de
   pagina terugkomt en niet alleen in de callout onderaan. #9e3062 op wit is
   6.88:1. */
.held .motto {
  display: inline-block; margin: 0 0 14px; padding: 5px 13px;
  background: var(--wit); border: 1px solid #e8bed2; border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--magenta-donker);
}

/* ---------- Knoppen ---------- */

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.knop {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--straal);
  /* Een <button> erft het lettertype niet van de pagina; zonder dit valt hij terug
     op de browserstandaard, 13 px Arial. Viel niet op zolang .knop alleen op
     <a>-elementen stond. */
  font: inherit;
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
}
.knop-vol { background: var(--teal-knop); color: var(--wit); }
.knop-vol:hover { background: var(--teal-tekst); }
/* De rand van een bedieningselement moet 3:1 halen; --teal-rand haalde maar 1.3:1. */
.knop-rand { background: var(--wit); color: var(--teal-tekst); border-color: var(--teal-knop); }
.knop-rand:hover { border-color: var(--teal-knop); }
.knop svg { width: 18px; height: 18px; flex: none; }

/* ---------- Roosters en kaarten ---------- */

.rooster { display: grid; gap: 18px; }
.rooster-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rooster-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.kaart {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--straal); padding: 24px;
  display: flex; flex-direction: column;
}
a.kaart { text-decoration: none; color: inherit; }
a.kaart:hover { border-color: var(--teal); box-shadow: 0 2px 14px rgba(23,94,117,.09); }
.kaart h3 { color: var(--teal-tekst); }
.kaart p { color: var(--grijs); font-size: .97rem; }
.kaart .pijl {
  margin-top: auto; padding-top: 14px; font-weight: 700; color: var(--teal-tekst);
  display: inline-flex; align-items: center; gap: 8px;
}
.pijl svg { width: 18px; height: 18px; flex: none; }

.icoon {
  display: block; width: 42px; height: 42px; margin-bottom: 14px;
  color: var(--teal-tekst); flex: none;
}
.icoon svg { width: 100%; height: 100%; display: block; }

/* ---------- Punten ---------- */

.punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.punten li { display: flex; gap: 11px; align-items: flex-start; }
.punten svg { width: 21px; height: 21px; flex: none; margin-top: 2px; color: var(--teal-tekst); }

/* ---------- Gegevens ---------- */

.gegevens { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.gegevens li { display: flex; gap: 12px; align-items: flex-start; }
.gegevens svg { width: 21px; height: 21px; flex: none; margin-top: 3px; color: var(--teal-tekst); }
.gegevens a { font-weight: 600; }

/* ---------- Formulier ---------- */

.formulier { display: grid; gap: 16px; max-width: 34rem; }
.veld { display: grid; gap: 6px; }
.veld label { font-weight: 600; font-size: .95rem; }
.veld input, .veld textarea {
  font: inherit; color: var(--inkt); background: var(--wit);
  border: 1px solid #b9c2c6; border-radius: 8px; padding: 11px 13px; width: 100%;
}
.veld textarea { min-height: 130px; resize: vertical; }
.veld input:focus, .veld textarea:focus { border-color: var(--teal-knop); }
.verplicht { color: var(--grijs); font-weight: 400; }

/* ---------- Contentgaten (alleen in concept) ---------- */

.gat {
  display: block; margin: 20px 0; padding: 16px 18px;
  background: var(--waarschuwing-vlak); border: 1px dashed #d8a05a;
  border-radius: var(--straal); color: var(--waarschuwing); font-size: .95rem;
}
.gat span { display: block; margin-top: 5px; color: var(--grijs); }
.gat-inline { color: var(--waarschuwing); }

/* ---------- Voet ---------- */

.voet { background: #20323a; color: #dbe6ea; margin-top: 0; }
/* De standaard focusring (#1f6b82) haalt op deze donkere grond maar 2.21:1.
   De linkkleur zelf haalt 9.15:1 en is hier dus de juiste ringkleur. */
.voet :focus-visible { outline-color: #b8dce8; }
.voet a { color: #b8dce8; }
.voet h2 { font-size: 1rem; color: var(--wit); margin-bottom: .7em; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .96rem; }
.voet-rooster {
  display: grid; gap: 30px; padding-top: 44px; padding-bottom: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.voet-naam { font-weight: 700; color: var(--wit); font-size: 1.05rem; margin-bottom: .4em; }
.voet-regel { color: #b3c4cb; font-size: .95rem; }
.voet address { font-style: normal; color: #dbe6ea; }
/* .voet ul zet display:grid; dit moet specifieker zijn om naast elkaar te komen. */
.voet ul.voet-social { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.voet-social a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.voet-social a:hover { text-decoration: underline; }
.voet-social svg { width: 20px; height: 20px; flex: none; }
.voet-onder { border-top: 1px solid #33474f; padding: 16px 20px; font-size: .89rem; color: #a7bcc3; }
.voet-onder p { margin: 0; }

/* ---------- Mobiel ---------- */

@media (max-width: 860px) {
  .menuknop { display: inline-flex; }
  #hoofdmenu { display: none; width: 100%; }
  #hoofdmenu.open { display: block; }
  .kop-rij { flex-wrap: wrap; }
  #hoofdmenu > ul { flex-direction: column; gap: 2px; padding-bottom: 12px; }
  #hoofdmenu a { padding: 11px 12px; }
  .kop-balk .omhulsel { justify-content: flex-start; }
  /* Raakdoelen van 18px halen de ondergrens van 24px niet. */
  .kop-balk a { display: inline-block; padding: 5px 0; }
  .voet ul { gap: 12px; }
  .voet ul a { display: inline-block; padding: 6px 0; }
  .voet-social a { padding: 6px 0; }

  /* Op mobiel klapt het submenu in de flow open, niet als zwevend paneel. */
  .heeft-sub { position: static; }
  .heeft-sub > button { width: 100%; justify-content: space-between; padding: 11px 12px; }
  .submenu {
    position: static; min-width: 0; box-shadow: none; border: 0;
    padding: 0 0 0 14px; border-left: 2px solid var(--teal-rand);
    margin: 2px 0 6px 12px; border-radius: 0;
  }
  /* Hier stond ook :focus-within. Dat hield het submenu open zolang de knop focus
     had, dus een tweede tik sloot het nooit en aria-expanded liep uit de pas met wat
     je zag. Alleen .open opent, net als op desktop. */
  .heeft-sub:hover > .submenu { display: none; }
  .heeft-sub.open > .submenu { display: block; }
}

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

/* ---------- Beeld, hersteld uit de backup van 02-12-2020 ---------- */

img { max-width: 100%; height: auto; display: block; }

.beeldband { line-height: 0; background: var(--teal-licht); }
.beeldband picture { display: block; }
.beeldband img.breed {
  width: 100%; height: auto; aspect-ratio: 24 / 7;
  object-fit: cover; object-position: center 40%;
}
/* Op smalle schermen een minder extreme uitsnede, anders blijft er een streepje over. */
@media (max-width: 860px) {
  .beeldband img.breed { aspect-ratio: 16 / 9; }
}

.rooster-portret { align-items: center; }
.portret img {
  width: 100%; max-width: 340px; border-radius: var(--straal);
  box-shadow: 0 4px 22px rgba(23, 94, 117, .14);
}
.rooster-portret .portret { display: flex; justify-content: flex-start; }

.rooster-keurmerk { align-items: start; }
.keurmerk img { width: 200px; }

.rooster-kaart img.kaart {
  width: 100%; border: 1px solid var(--lijn); border-radius: var(--straal);
}

/* ---------- Openingstijden ---------- */

.tijden { border-collapse: collapse; width: 100%; max-width: 30rem; font-size: .97rem; }
.tijden th, .tijden td { text-align: left; padding: 11px 4px; border-bottom: 1px solid var(--lijn); }
.tijden th { font-weight: 700; width: 7.5rem; }
.tijden td { color: var(--grijs); }
.tijden tr:last-child th, .tijden tr:last-child td { border-bottom: 0; }

.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Opsomming binnen lopende tekst: een kolom, niet het brede USP-rooster. */
.punten-een { grid-template-columns: 1fr; margin: 1.2em 0; }

@media (max-width: 860px) {
  .rooster-portret .portret { justify-content: center; }
  .portret img { max-width: 280px; }
}

/* ---------- Lopende tekst met zijkolom ---------- */

.met-zijkolom {
  display: grid; gap: clamp(28px, 4vw, 54px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .met-zijkolom { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .zijkolom { position: sticky; top: 24px; }
}

.lopende-tekst { max-width: 68ch; }
.lopende-tekst h2 { margin-top: 1.6em; }
.lopende-tekst h3 { margin-top: 1.5em; font-size: 1.22rem; color: var(--teal-tekst); }
.lopende-tekst > :first-child { margin-top: 0; }

.zijkolom { display: grid; gap: 16px; }
/* Magenta markeert op deze site consequent de uitnodiging om contact op te nemen:
   de callout onderaan elke pagina, de melding bij binnenkomst en deze kaart in de
   zijkolom. De kaart ernaast met andere behandelingen blijft teal, want dat is
   navigatie en geen oproep. */
.kaart-contact { border-top: 4px solid var(--magenta); }
.kaart-contact h2, .kaart-nav h2 { font-size: 1.1rem; }
.kaart-contact p { font-size: .95rem; }
.zij-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.zij-knoppen .knop { padding: 11px 16px; font-size: .95rem; }
.kaart-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kaart-nav a {
  display: block; padding: 9px 10px; margin-left: -10px; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-size: .96rem;
}
.kaart-nav a:hover { background: var(--teal-licht); }

/* De USP-lijst stond te dicht op de alinea erboven. */
.vlak .smal + .punten { margin-top: 1.8em; }

/* ---------- Hero met beeld ernaast ---------- */

.held-split { padding: 0; overflow: hidden; }
.held-rooster {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
.held-tekst { padding: clamp(36px, 6vw, 72px) 0; }
.held-beeld { line-height: 0; }
/* De bronbeelden zijn 2.5:1 tot 6.4:1 breed. In een hoog vak sneed dat de helft van de
   foto weg; met 16:9 blijft ruim 70 procent van de breedte staan en blijft het onderwerp
   herkenbaar. Vandaar liever een breder, lager vak dan een vak dat de tekst volgt. */
.held-beeld img.vullend {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center 45%;
}
/* Onder de tweekolomsgrens besloeg het beeld bijna de halve viewport, waardoor de
   eerste inhoud onder de vouw viel. */
@media (max-width: 899px) {
  .held-beeld img.vullend { max-height: 46vh; }
}

@media (min-width: 900px) {
  .held-rooster {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.25fr);
    gap: clamp(28px, 3.5vw, 52px); align-items: center;
  }
  .held-tekst { padding: clamp(52px, 6vw, 86px) 0; }
  /* Het beeld loopt door tot de rechterrand van het scherm, niet tot de omhulsel-grens. */
  .held-beeld {
    margin-right: calc((100vw - min(100vw, var(--breedte))) / -2 - 20px);
  }
  .held-beeld img.vullend { aspect-ratio: 16 / 9; }
}
@media (max-width: 899px) {
  .held-beeld { margin-inline: -20px; }
}

/* ---------- Uitsnijpunt per beeld ----------
   Deze stonden als style="object-position:…" in de HTML, maar de CSP zet
   style-src op 'self' en blokkeert daarmee inline style-attributen. Als class
   werken ze wel, en de CSP hoeft niet verzwakt te worden. */

/* Specificiteit telt: .held-beeld img.vullend is 0-2-1, een kale .punt-* maar 0-1-0.
   Daarom hier even specifiek, anders wint de basisregel en doet de class niets. */
.held-beeld img.punt-left-42   { object-position: left 42%; }
.held-beeld img.punt-left-38   { object-position: left 38%; }
.held-beeld img.punt-center-45 { object-position: center 45%; }
.held-beeld img.punt-center-42 { object-position: center 42%; }
.held-beeld img.punt-center-68 { object-position: center 68%; }

/* De kaart op /contact/ draagt nu width en height, dus de ruimte is al
   gereserveerd; deze regel houdt hem responsief. */
.rooster-kaart img.kaart { height: auto; }

/* --- Melding bij binnenkomst -------------------------------------------------
   Een <dialog>; de backdrop en het opsluiten van de focus doet de browser zelf.
   Hier staat alleen de vormgeving. De magenta bovenrand is hetzelfde accent als
   de callout, zodat de melding bij de site hoort en niet als banner aanvoelt. */
.melding {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  /* 54 px boven: het kruisje beslaat 6 t/m 50 px, dus de kop begint eronder. Bij
     46 px overlapte de kop-box hem nog 4 px. Dat zie je niet zolang de kop
     gecentreerd en kort is, maar wel zodra hij op een smal scherm de volle
     breedte vult. */
  padding: 54px 28px 28px;
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--magenta);
  border-radius: var(--straal);
  background: var(--wit);
  color: var(--inkt);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.melding::backdrop { background: rgba(26, 38, 44, .55); }
/* Het venster krijgt bij openen zelf de focus, zodat er geen focuskader om het
   kruisje staat bij iemand die met de muis binnenkomt. Het kader op de knoppen
   blijft gewoon werken voor wie met het toetsenbord navigeert. */
.melding:focus { outline: none; }
/* Alles op een as: kop, tekst en knoppen gecentreerd. Bij een korte melding met
   twee knoppen over de volle breedte leest links uitlijnen rommelig, omdat de
   knoplabels dan als enige midden staan. */
.melding { text-align: center; }
/* balance verdeelt de regels gelijkmatig in plaats van de laatste als restje te
   laten overblijven. Browsers die het niet kennen negeren het en breken gewoon. */
.melding h2 { font-size: 1.3rem; margin-bottom: .55em; color: var(--teal-tekst);
              text-wrap: balance; }
.melding p { font-size: .97rem; margin-bottom: 0; max-width: 36ch;
             margin-inline: auto; text-wrap: balance; }
/* Onder elkaar, niet naast elkaar: naast elkaar werd elke knop 196 px en brak
   "Afspraak maken per e-mail" over drie regels. Zo blijft elk label op een regel
   en is het raakvlak over de volle breedte. */
.melding-knoppen { display: grid; margin-top: 22px; }
.melding-knoppen .knop { justify-content: center; text-align: center; }

/* Sluiten gebeurt met het kruisje, niet met een tweede knop naast de eerste:
   twee knoppen naast elkaar lieten de bezoeker twijfelen welke de afspraak was.
   44 px blijft het raakvlak, ook al is het kruisje zelf 20 px. */
.melding-sluit {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 2px solid transparent; border-radius: 50%;
  color: var(--grijs); cursor: pointer;
}
.melding-sluit:hover { background: var(--papier); color: var(--inkt); }