/* appartementleegmakenvlaanderen.be
   Vijfde palet van de reeks: oker en leisteenblauw op warme neutralen.
   Geen kleur, maat of klassenaam wordt gedeeld met de vier zustersites.

   20 oktober 2026: opzet naar het voorbeeld van amaid.co, met een echte foto
   achter de kop, pilvormige knoppen en een straal van 16px.
   26 oktober 2026: de prijsaanvraag wordt een kaart die rechts over de kop
   begint en daarna meeschuift, het menu wordt op mobiel een lade van rechts,
   en onderaan zweeft een balk met bellen en de aanvraag. */

:root {
  --inkt: #2a2419;
  --inkt-zacht: #5e5546;
  --lijn: #e3ddd0;
  --vlak: #faf7f0;
  --vlak-diep: #f2ecdf;
  --accent: #6b4e16;
  --accent-donker: #4e3910;
  --goud: #f0c86a;
  --bel: #30506b;
  --bel-donker: #233c52;
  --wit: #fff;
  --breedte: 76rem;
  --kaart: 23rem;
  --radius: 16px;
  --radius-klein: 10px;
  --schaduw: 0 10px 30px rgba(42, 36, 25, .13);
  --schaduw-diep: 0 24px 48px rgba(42, 36, 25, .22);
  --kop: 4.5rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--inkt);
  background: var(--wit);
  overflow-x: hidden;
}

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--wit);
  padding: .6rem 1rem; z-index: 100;
}
.overslaan:focus { left: 0; }

a { color: var(--accent); }
a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 3px solid var(--bel); outline-offset: 2px;
}

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

h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1;
  margin: .5rem 0 .8rem; letter-spacing: -.02em; font-weight: 700;
}
h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.22; margin: 2.4rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: 1.06rem; margin: 1.4rem 0 .35rem; }
p { margin: 0 0 .9rem; }

.kopterm {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .25rem;
}

/* --- kopbalk --------------------------------------------------------- */

.kopbalk {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--lijn);
}
.kopbalk-binnen {
  max-width: var(--breedte); margin: 0 auto; padding: .65rem 1rem;
  min-height: var(--kop); display: flex; align-items: center; gap: 1.3rem;
  flex-wrap: nowrap;
}
.merkteken {
  display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto;
  text-decoration: none; color: var(--accent);
}
.vlag { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; }
.merknaam { font-size: 1.04rem; color: var(--inkt); white-space: nowrap; }
.merknaam strong { color: var(--accent); }

.hoofdmenu { margin-left: auto; }
.hoofdmenu ul {
  list-style: none; display: flex; align-items: center; gap: 1.3rem;
  margin: 0; padding: 0; white-space: nowrap;
}
.hoofdmenu ul a {
  color: var(--inkt); text-decoration: none; font-size: .97rem; font-weight: 550;
}
.hoofdmenu ul a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
.lade-titel, .lade-acties { display: none; }

.kopacties { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.menu-tel, .menu-aanvraag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: 999px; font-weight: 650; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
}
.menu-tel { background: var(--bel); color: var(--wit); }
.menu-tel:hover { background: var(--bel-donker); }
.menu-tel-kort { display: none; }
.menu-aanvraag { background: var(--accent); color: var(--wit); }
.menu-aanvraag:hover { background: var(--accent-donker); }
.hoorn { width: 1rem; height: 1rem; fill: currentColor; flex: 0 0 auto; }

.ladeknop {
  display: none; align-items: center; gap: .55rem; position: relative; z-index: 90;
  background: var(--vlak); color: var(--inkt); border: 1px solid var(--lijn);
  border-radius: 999px; padding: .5rem .9rem; font: inherit; font-weight: 650;
  font-size: .95rem; cursor: pointer;
}
.ladeknop-lijnen, .ladeknop-lijnen::after {
  display: block; width: 1.15rem; height: 2px; background: currentColor;
  border-radius: 2px; position: relative; transition: transform .2s ease;
}
.ladeknop-lijnen { margin-bottom: 5px; }
.ladeknop-lijnen::after { content: ""; position: absolute; left: 0; top: 7px; width: .75rem; }
body.lade-open .ladeknop { background: var(--goud); border-color: var(--goud); }
body.lade-open .ladeknop-lijnen { transform: translateY(3.5px) rotate(45deg); }
body.lade-open .ladeknop-lijnen::after { width: 1.15rem; top: 0; transform: rotate(-90deg); }

/* beoordeling */
.beoordeling {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; white-space: nowrap;
}
.sterrenrij { display: inline-flex; gap: 1px; }
.sterretje { width: .95rem; height: .95rem; fill: #e0a93b; }
.beoordeling-aantal { opacity: .78; }
.beoordeling-aantal::before { content: "\00b7"; margin: 0 .35rem 0 .15rem; }
.kopacties .beoordeling-aantal { display: none; }
@media (max-width: 82rem) { .kopacties .beoordeling { display: none; } }

/* de lade op smallere schermen */
@media (max-width: 69.99rem) {
  .ladeknop { display: inline-flex; }
  .kopacties { margin-left: auto; }
  .menu-aanvraag { display: none; }
  .hoofdmenu {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
    width: min(22rem, 88vw); margin: 0; padding: 5.2rem 1.4rem 2rem;
    background: var(--inkt); color: var(--wit); overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
    box-shadow: -20px 0 40px rgba(0, 0, 0, .25);
  }
  body.lade-open .hoofdmenu { transform: none; visibility: visible; transition: transform .25s ease; }
  .lade-titel {
    display: block; margin: 0 0 1rem; color: var(--goud);
    font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.1rem;
  }
  .hoofdmenu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hoofdmenu ul a {
    display: block; color: var(--wit); font-size: 1.15rem; padding: .85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
  }
  .hoofdmenu ul a:hover { color: var(--goud); }
  .lade-acties { display: grid; gap: .6rem; margin: 1.6rem 0 0; }
  .lade-scherm {
    position: fixed; inset: 0; z-index: 70; background: rgba(20, 16, 10, .55);
  }
}
@media (max-width: 30rem) {
  .kopbalk-binnen { gap: .6rem; padding-inline: .75rem; }
  .vlag { width: 1.9rem; height: 1.9rem; }
  .merknaam { font-size: .92rem; }
  .menu-tel-nummer { display: none; }
  .menu-tel-kort { display: inline; }
  .menu-tel { padding: .5rem .8rem; }
  .ladeknop-tekst { display: none; }
  .ladeknop { padding: .62rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hoofdmenu, body.lade-open .hoofdmenu { transition: none; }
}

/* --- raamwerk: kop, kaart en inhoud ---------------------------------- */

.raamwerk {
  max-width: var(--breedte); margin: 0 auto; padding: 1rem 1rem 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.lijf { min-width: 0; padding-bottom: 1rem; }

@media (min-width: 66rem) {
  .raamwerk {
    grid-template-columns: minmax(0, 1fr) var(--kaart);
    column-gap: 2.4rem; align-items: start; padding-top: 1.4rem;
  }
  .opening { grid-column: 1 / -1; grid-row: 1; }
  .raamwerk > .aanvraagkaart {
    grid-column: 2; grid-row: 1 / span 2; position: sticky;
    top: calc(var(--kop) + 1rem); margin: 2rem 1.6rem 0 0; z-index: 3;
  }
  .lijf { grid-column: 1; grid-row: 2; }
}
@media (min-width: 66rem) and (max-height: 48rem) {
  .raamwerk > .aanvraagkaart { position: relative; top: 0; }
}

.smalle-kolom { max-width: 50rem; margin: 0 auto; padding: 1.6rem 1rem 1rem; }

/* --- de kop met de foto ---------------------------------------------- */

.opening {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius); min-height: 32rem;
  display: flex; align-items: center;
}
.opening-beeld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.opening::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(28, 24, 16, .94) 0%,
    rgba(28, 24, 16, .84) 42%,
    rgba(28, 24, 16, .45) 70%,
    rgba(28, 24, 16, .2) 100%);
}
.opening-tekst { color: var(--wit); padding: 2rem 1.3rem 2.6rem; max-width: 40rem; }
@media (min-width: 46rem) { .opening-tekst { padding: 2.6rem 2.2rem 3rem; } }
@media (min-width: 66rem) {
  .opening { min-height: 36rem; }
  .opening-tekst { max-width: calc(100% - var(--kaart) - 1.6rem); padding-right: 2.6rem; }
  .opening-tekst > * { max-width: 36rem; }
}
@media (max-width: 45.99rem) {
  .opening { min-height: 0; }
  .opening .aanhef { font-size: 1rem; }
  .opening .pluspunten, .opening .toelichting { display: none; }
}
.opening h1 { color: var(--wit); }
.opening h1 em {
  display: block; font-style: italic; font-weight: 400;
  font-family: Georgia, "Times New Roman", serif; color: var(--goud);
}
.opening .aanhef { color: rgba(255, 255, 255, .93); font-size: 1.05rem; }
.staving {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
  font-size: .9rem; color: rgba(255, 255, 255, .85); margin: 0 0 .4rem;
}
.opening .toelichting { color: rgba(255, 255, 255, .75); }

.pluspunten { list-style: none; padding: 0; margin: 1rem 0; }
.pluspunten li { position: relative; padding-left: 1.75rem; margin: .45rem 0; }
.pluspunten li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .95rem; height: .95rem; border-radius: 4px; background: var(--accent);
}
.pluspunten li::after {
  content: ""; position: absolute; left: .33rem; top: calc(.42em + .15rem);
  width: .26rem; height: .5rem; border: solid var(--wit); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.opening .pluspunten li { font-weight: 600; }
.opening .pluspunten li::before { background: var(--goud); }
.opening .pluspunten li::after { border-color: var(--inkt); }

/* --- acties ---------------------------------------------------------- */

.acties { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 .4rem; }
.actie {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; font-weight: 650; font-size: 1rem; line-height: 1.2;
  cursor: pointer; font-family: inherit; transition: background-color .15s, transform .15s;
}
.actie:hover { transform: translateY(-1px); }
.actie-offerte { background: var(--accent); color: var(--wit); }
.actie-offerte:hover { background: var(--accent-donker); color: var(--wit); }
.actie-bel { background: var(--bel); color: var(--wit); }
.actie-bel:hover { background: var(--bel-donker); color: var(--wit); }
.opening .actie-offerte { background: var(--goud); color: var(--inkt); }
.opening .actie-offerte:hover { background: #e4b752; }
.opening .actie-bel, .actie-licht {
  background: transparent; color: var(--wit); border-color: rgba(255, 255, 255, .7);
}
.opening .actie-bel:hover, .actie-licht:hover { background: rgba(255, 255, 255, .12); }
.actie-vol { width: 100%; }
.actie-kaart { background: var(--accent); color: var(--wit); }
.toelichting { font-size: .88rem; color: var(--inkt-zacht); margin: .3rem 0 0; }
@media (prefers-reduced-motion: reduce) { .actie { transition: none; } .actie:hover { transform: none; } }

/* --- de aanvraagkaart ------------------------------------------------ */

.aanvraagkaart {
  position: relative; z-index: 3; margin: -1.6rem .6rem 0;
  background: var(--wit); border-radius: var(--radius); box-shadow: var(--schaduw-diep);
  padding: 1.3rem 1.3rem 1.1rem; scroll-margin-top: calc(var(--kop) + 1rem);
}
.kaart-kop {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 1.55rem; color: var(--accent); line-height: 1.15;
}
.kaart-sub { margin: .25rem 0 .9rem; font-size: .9rem; color: var(--inkt-zacht); line-height: 1.45; }
.soort-bevestiging {
  background: var(--vlak-diep); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: .5rem .7rem; font-size: .9rem; font-weight: 600; margin: 0 0 .8rem;
}
.aanvraag p { margin: 0 0 .6rem; }
.aanvraag .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
.aanvraag label { display: block; font-weight: 650; font-size: .85rem; margin-bottom: .18rem; }
.aanvraag input, .aanvraag select {
  width: 100%; padding: .58rem .7rem; font: inherit; font-size: 1rem; color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: var(--radius-klein); background: var(--vlak);
}
.aanvraag input:focus, .aanvraag select:focus {
  background: var(--wit); border-color: var(--accent); outline: 3px solid rgba(107, 78, 22, .18);
}
.aanvraag .verzenden { margin: .9rem 0 0; }
.kleinschrift { font-size: .78rem; color: var(--inkt-zacht); line-height: 1.45; margin: .55rem 0 0; }
.kaart-of {
  text-align: center; font-size: .84rem; color: var(--inkt-zacht); margin: .9rem 0 .45rem;
}
.kaart-bel { margin: 0; }
.verborgen { position: absolute !important; left: -9999px !important; }
@media (max-width: 22rem) { .aanvraag .paar { grid-template-columns: 1fr; } }

/* --- inhoud ---------------------------------------------------------- */

.lijf > section, .lijf > aside { margin: 2.6rem 0; }
.lijf > section:first-child { margin-top: 2rem; }
.lijf > section > h2:first-child { margin-top: 0; }
section p { max-width: 44em; }
.aanhef { max-width: 42em; }

.soortkeuze { border-top: 3px solid var(--accent); padding-top: 1.2rem; }
.soorten-lijst {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; gap: .7rem; grid-template-columns: 1fr;
}
@media (min-width: 36rem) { .soorten-lijst { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .soorten-lijst { grid-template-columns: repeat(3, 1fr); } }
.soorten-lijst li { margin: 0; }
.soort {
  display: block; height: 100%; text-decoration: none; color: var(--inkt);
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-klein);
  padding: .85rem 1rem; transition: background-color .15s, border-color .15s;
}
.soort strong { display: block; color: var(--accent); }
.soort strong::after { content: " \203a"; }
.soort span { display: block; font-size: .86rem; color: var(--inkt-zacht); line-height: 1.4; margin-top: .2rem; }
.soort:hover { background: var(--wit); border-color: var(--accent); }

.afstandblok, .soorten, .rekenwijze, .stappen {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.afstandblok h2, .soorten h2, .rekenwijze h2, .stappen h2 { margin-top: 0; }

.prijsrooster { overflow-x: auto; margin: 1rem 0 .5rem; }
.prijsrooster table { width: 100%; border-collapse: collapse; font-size: .97rem; background: var(--wit); }
.prijsrooster caption {
  caption-side: bottom; text-align: left; font-size: .82rem; color: var(--inkt-zacht);
  padding-top: .45rem; font-style: italic;
}
.prijsrooster th, .prijsrooster td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--lijn); }
.prijsrooster thead th {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.prijsrooster tbody th { font-weight: 600; }
.prijsrooster td { white-space: nowrap; }
.prijsrooster td:nth-child(2) {
  font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; color: var(--accent-donker);
}

.stappen ol { list-style: none; counter-reset: stap; margin: 0; padding: 0; }
.stappen li {
  counter-increment: stap; position: relative; margin: 0 0 1rem; padding-left: 3.1rem;
}
.stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: .1rem;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 1.7rem; line-height: 1; color: var(--accent);
  width: 2.3rem; text-align: center;
}
.stappen li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.15rem; top: 2.3rem; bottom: -.6rem;
  border-left: 1px dashed var(--accent); opacity: .45;
}
.stappen h3 { margin-top: .1rem; }
.stappen p { margin: 0; }

.redenen-rooster { display: grid; gap: 1.2rem; }
@media (min-width: 42rem) { .redenen-rooster { grid-template-columns: 1fr 1fr; } }
.redenen-rooster > div { border-left: 3px solid var(--goud); padding: .1rem 0 .1rem 1rem; }
.redenen-rooster h3 { margin-top: 0; }
.redenen-rooster p { margin: 0; font-size: .97rem; }

/* kaarten met een foto */
.vakken { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .vakken { grid-template-columns: 1fr 1fr; } }
@media (min-width: 58rem) { .vakken { grid-template-columns: repeat(3, 1fr); } }
.vakken.breed { grid-template-columns: 1fr; }
@media (min-width: 46rem) { .vakken.breed { grid-template-columns: 1fr 1fr; } }
.vakken li {
  border: 1px solid var(--lijn); border-radius: var(--radius); margin: 0;
  background: var(--wit); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.vakken li:hover { box-shadow: var(--schaduw); transform: translateY(-2px); }
.vak-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vak-tekst { padding: .95rem 1.1rem 1.15rem; }
.vakken h2, .vakken h3 { margin: 0 0 .35rem; font-size: 1.06rem; }
.vakken h2 a, .vakken h3 a { text-decoration: none; }
.vakken h2 a:hover, .vakken h3 a:hover { text-decoration: underline; }
.vakken p { margin: .25rem 0; font-size: .94rem; color: var(--inkt-zacht); }

.kolommenlijst { list-style: none; padding: 0; margin: .6rem 0; columns: 1; }
@media (min-width: 34rem) { .kolommenlijst { columns: 2; } }
@media (min-width: 52rem) { .kolommenlijst { columns: 3; } }
.kolommenlijst li { break-inside: avoid; margin-bottom: .3rem; }
.pcode { color: var(--inkt-zacht); font-size: .85rem; }

.openingsuren { list-style: none; padding: 0; margin: .4rem 0; }
.openingsuren li { display: flex; gap: .6rem; flex-wrap: wrap; }
.openingsuren strong { min-width: 11rem; }

.vragenlijst h2 { font-size: 1.18rem; margin: 1.7rem 0 .4rem; }
.vragenlijst h2:first-child { margin-top: 0; }

/* --- oproep ---------------------------------------------------------- */

.oproep {
  background: var(--inkt); color: var(--wit); border-radius: var(--radius);
  padding: 1.5rem 1.6rem; display: grid; gap: .6rem 1.4rem; align-items: center;
}
@media (min-width: 52rem) { .oproep { grid-template-columns: 1fr auto; } }
.oproep h2 {
  margin: 0 0 .35rem; color: var(--goud); font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 400;
}
.oproep p { color: rgba(255, 255, 255, .85); margin: 0; }
.oproep .acties { margin: 0; }
.oproep .actie-offerte { background: var(--goud); color: var(--inkt); }
.oproep .actie-offerte:hover { background: #e4b752; }

/* --- fotogalerij ----------------------------------------------------- */

.beeldraster { display: grid; gap: .9rem; margin-top: 1rem; }
@media (min-width: 36rem) { .beeldraster { grid-template-columns: 1fr 1fr; } }
.beeldraster figure {
  margin: 0; border-radius: var(--radius-klein); overflow: hidden;
  background: var(--vlak); border: 1px solid var(--lijn);
}
.beeldraster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.beeldraster figcaption {
  font-size: .84rem; color: var(--inkt-zacht); padding: .55rem .7rem .7rem; line-height: 1.45;
}
.kaartblok iframe { width: 100%; height: 22rem; border: 0; border-radius: var(--radius); }

/* --- voettekst ------------------------------------------------------- */

.voetbalk { background: var(--vlak); border-top: 1px solid var(--lijn); margin-top: 3rem; padding: 0 1rem 2.2rem; }
.voetbalk > * { max-width: var(--breedte); margin-left: auto; margin-right: auto; }
.voetbalk-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid var(--lijn);
}
.voetbalk-vraag {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 1.3rem; color: var(--accent);
}
.voetbalk-band .acties { margin: 0; }
.voetbalk-band .actie-licht { color: var(--bel); border-color: var(--bel); }
.voetbalk-band .actie-licht:hover { background: var(--wit); }
.voetbalk-kolommen { display: grid; gap: 1.4rem; padding-top: 1.4rem; }
@media (min-width: 52rem) { .voetbalk-kolommen { grid-template-columns: 1.4fr 1fr 1fr; } }
.voetbalk h2 { font-size: .95rem; margin: 0 0 .4rem; }
.voetinfo p { font-size: .92rem; color: var(--inkt-zacht); margin: 0; }
.voetmenu ul { list-style: none; padding: 0; margin: 0; }
.voet-hoofd li { margin: 0 0 .3rem; }
.voetmenu a { color: var(--inkt); text-decoration: none; }
.voetmenu a:hover { text-decoration: underline; }
.voetmenu.zijdelings { margin-top: 1.4rem; }
.voetmenu.zijdelings ul { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.voetmenu.zijdelings a { color: var(--inkt-zacht); font-size: .86rem; }
.copyright { margin-top: 1rem; font-size: .84rem; color: var(--inkt-zacht); }

/* --- de zwevende balk op mobiel -------------------------------------- */

.zweefbalk { display: none; }
@media (max-width: 47.99rem) {
  .zweefbalk {
    display: flex; position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
    bottom: calc(.8rem + env(safe-area-inset-bottom)); width: min(25rem, calc(100% - 1.5rem));
    background: var(--inkt); border-radius: 999px; padding: .35rem;
    box-shadow: var(--schaduw-diep); gap: .35rem;
  }
  .zweefbalk a {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border-radius: 999px; padding: .75rem .9rem; font-weight: 700; text-decoration: none;
    font-size: .98rem; white-space: nowrap;
  }
  .zweef-bel { color: var(--wit); flex: 0 0 auto; }
  .zweef-aanvraag { background: var(--goud); color: var(--inkt); flex: 1 1 auto; }
  body { padding-bottom: 5.2rem; }
}