/* Elke regel die var(--x) gebruikt staat er TWEE keer: eerst met de kleur
   uitgeschreven, dan met de variabele. Dat is geen slordigheid en mag niet
   "opgeruimd" worden.

   Een browser die CSS-variabelen niet kent — Opera Mini is de belangrijkste,
   en die haalt de site wél op omdat hij de TLS op zijn eigen servers doet —
   ziet var(...) als onzin en gooit de HELE regel weg. Twee declaraties is de
   enige vorm die werkt: de oude browser neemt de eerste en negeert de tweede,
   de moderne browser overschrijft met de tweede.
   web/style_fallback_test.go rekent dit na. */

/* Lichte huisstijl, 5 augustus 2026. Witte kaarten op een koelgrijze pagina,
   antracieten tekst, één diep zakelijk blauw. De contrastsommen (WCAG-formule,
   web/a11y_test.go rekent ze na tegen --card én --bg):

     --ink  #17212b  16,29:1 op wit, 14,38:1 op --bg   (eis 4,5:1)
     --mut  #4f5d6b   6,75:1 op wit,  5,96:1 op --bg   (eis 4,5:1)
     --warn #a4262c   7,26:1 op wit,  6,41:1 op --bg   (eis 4,5:1)
     --ok   #1c6b3d   6,52:1 op wit,  5,76:1 op --bg   (eis 4,5:1)
     --edge #74818f   3,98:1 op wit,  3,51:1 op --bg   (eis 3:1, WCAG 1.4.11)
     wit op --acc #0a5c9e: 6,91:1                       (knoptekst)

   --line blijft de decoratieve scheidingslijn (kaartranden, rijen) en --edge
   de rand van alles wat je kunt bedienen; zie web/a11y_test.go. */
:root { color-scheme:light; --ink:#17212b; --mut:#4f5d6b; --line:#d9dfe6; --edge:#74818f; --bg:#eef1f5; --card:#ffffff; --acc:#0a5c9e; --acc-ink:#ffffff; --ok:#1c6b3d; --warn:#a4262c; }
* { box-sizing:border-box; margin:0; }
/* The hidden attribute must ALWAYS win: author display rules (.banner's
   flex, button's block) silently override the UA's [hidden]{display:none},
   which made the banner's dismiss ✕ a no-op and kept "hidden" fallback
   buttons visible. !important restores the attribute's contract. */
[hidden] { display:none !important; }
body { font-family:-apple-system,"Segoe UI",system-ui,sans-serif; background:#eef1f5; background:var(--bg); color:#17212b; color:var(--ink); line-height:1.55; }

/* --- Raamwerk: kolommen, kopbalk en voetbalk ------------------------------
   Publieke pagina's zijn opgebouwd uit banen over de volle breedte met een
   gecentreerde .wrap erin; het beheerscherm (body.app) houdt zijn vertrouwde
   smalle kolom van 28rem. */
.wrap { max-width:64rem; margin-inline:auto; padding-inline:1.25rem; }
.narrow { max-width:46rem; }
.page { padding-block:1.5rem 3rem; }
body.app .wrap { max-width:28rem; padding-inline:1rem; }
body.app main { max-width:28rem; margin:0 auto; padding:0 1rem 1rem; }

.site-head { background:#ffffff; background:var(--card); border-bottom:1px solid #d9dfe6; border-bottom:1px solid var(--line); }
.site-head .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.masthead { display:flex; align-items:center; gap:.6rem; min-width:0; }
.site-head h1 { font-size:1.125rem; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-logo { display:block; max-height:2.25rem; max-width:9rem; }
.head-tel { font-weight:650; font-size:.95rem; color:#17212b; color:var(--ink); text-decoration:none; white-space:nowrap; padding:.35rem .2rem; }

.site-foot { background:#17212b; color:#c3cdd7; padding-block:2.25rem; margin-top:3rem; }
body.app .site-foot { display:none; }
.site-foot a { color:#ffffff; }
.site-foot .foot-cols { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.25rem; }
.site-foot .addr { white-space:pre-line; }
.site-foot ul { list-style:none; padding:0; display:grid; gap:.35rem; }
.foot-note { margin-top:1.5rem; font-size:.85rem; color:#9aa7b4; }

/* --- Banen en secties van de voorpagina ----------------------------------- */
.band { padding-block:2.75rem; }
.band.alt { background:#ffffff; background:var(--card); border-block:1px solid #d9dfe6; border-block:1px solid var(--line); }
/* Sectiekoppen zijn échte koppen; de kleine grijze kapitaaltjes verderop zijn
   voor labels bóven een formulier, niet voor de inhoudsopgave van de site. */
.sec h2 { font-size:1.4rem; font-weight:750; text-transform:none; letter-spacing:-.015em; color:#17212b; color:var(--ink); margin:0 0 1.1rem; }

.hero-band { text-align:center; padding-block:3.25rem 3rem; }
.kicker { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:#0a5c9e; color:var(--acc); margin:0 0 .8rem; }
/* De hero-kop is een h2 en moet dus expliciet terug van het kleine grijze
   formulierlabel (de `label, h2`-regel verderop) naar een echte kop. */
.display { display:block; font-size:clamp(1.9rem,4.2vw,2.7rem); line-height:1.12; letter-spacing:-.02em; font-weight:800; text-transform:none; color:#17212b; color:var(--ink); max-width:44rem; margin:0 auto; }
.sub { font-size:1.06rem; color:#4f5d6b; color:var(--mut); max-width:40rem; margin:.9rem auto 1.5rem; }
.cta { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.cta .btn { flex:1 1 10rem; max-width:16rem; margin-top:0; }

.cards { display:grid; gap:1rem; grid-template-columns:1fr; }
.tile { background:#ffffff; background:var(--card); border:1px solid #d9dfe6; border:1px solid var(--line); border-radius:14px; padding:1.25rem; }
.band.alt .tile { border-color:#d9dfe6; border-color:var(--line); background:#ffffff; background:var(--card); }
.tile h3 { font-size:1.02rem; font-weight:700; margin:0 0 .3rem; }
.tile p { margin:0; color:#4f5d6b; color:var(--mut); }

/* Werkwijze: drie echte, genummerde stappen (kiezen, intake, inbouw). */
.how { list-style:none; counter-reset:stap; padding:0; display:grid; gap:1.1rem; }
.how li { counter-increment:stap; position:relative; padding:3rem 1.25rem 1.25rem; background:#ffffff; background:var(--card); border:1px solid #d9dfe6; border:1px solid var(--line); border-radius:14px; color:#4f5d6b; color:var(--mut); }
.how li::before { content:counter(stap); position:absolute; top:1.1rem; left:1.25rem; display:flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:999px; background:#0a5c9e; background:var(--acc); color:#ffffff; color:var(--acc-ink); font-weight:700; font-size:.95rem; }
.how-demo { display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; }
.how-demo .how { flex:1 1 18rem; margin:0; }
.demo-phone { flex:0 1 16rem; margin:0; padding:1rem; border:1px solid #d9dfe6; border:1px solid var(--line); border-radius:1.25rem; background:#ffffff; background:var(--card); }
.demo-head { font-weight:700; margin-bottom:.5rem; }
.demo-line { margin:0 0 .5rem; }
.demo-check { font-weight:700; }
.demo-cap { margin:0 0 .35rem; font-size:.85rem; color:#4f5d6b; color:var(--mut); }
.demo-times { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.75rem; }
.demo-chip { padding:.25rem .55rem; border:1px solid #d9dfe6; border:1px solid var(--line); border-radius:.5rem; font-size:.85rem; }
.demo-sel { border-color:#0a5c9e; border-color:var(--acc); font-weight:700; }
.demo-btn { display:inline-block; padding:.4rem .9rem; border-radius:.5rem; background:#0a5c9e; background:var(--acc); color:#ffffff; color:var(--acc-ink); font-weight:700; }
.demo-phone figcaption { margin-top:.75rem; }

.faq { max-width:46rem; }
.faq .qa { padding-block:1rem; border-top:1px solid #d9dfe6; border-top:1px solid var(--line); }
.faq .qa:first-of-type { border-top:0; padding-top:0; }
.faq p { margin:0; color:#4f5d6b; color:var(--mut); }
.faq details.qa summary { font-size:1rem; font-weight:700; cursor:pointer; color:#17212b; color:var(--ink); }
.faq details.qa[open] summary { margin-bottom:.25rem; }

.contact-grid { display:grid; gap:1.5rem; align-items:start; }
.contact-grid .addr { white-space:pre-line; }
.contact-grid .meta { margin-top:.35rem; }
.contact-acts { display:grid; gap:.6rem; max-width:20rem; }
.contact-acts .btn { margin-top:0; }

/* Vanaf tabletbreedte: diensten en werkwijze naast elkaar, contact in twee
   kolommen. De 64rem-wrap houdt regels leesbaar op brede desktops. */
@media (min-width:40rem) {
  .cards { grid-template-columns:1fr 1fr; }
  .how { grid-template-columns:repeat(3,1fr); }
  .contact-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:60rem) {
  .cards.grid-4 { grid-template-columns:repeat(4,1fr); }
  .cards.grid-3 { grid-template-columns:repeat(3,1fr); }
  .band { padding-block:3.5rem; }
}

/* --- Kaarten en formulieren (boekingsflow, beheer, tokenpagina's) --------- */
.card { background:#ffffff; background:var(--card); border:1px solid #d9dfe6; border:1px solid var(--line); border-radius:14px; padding:1.1rem; margin-bottom:.9rem; }
/* Instellingen-springmenu (dashboard-ronde Task 5): vier chips die naar de
   groepskoppen op dezelfde pagina springen. */
.jump { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.jump a { display:inline-block; padding:.35rem .8rem; border:1px solid #d9dfe6; border:1px solid var(--line); border-radius:99px; text-decoration:none; font-size:.9rem; }
label, h2 { display:block; font-size:.7rem; font-weight:650; color:#4f5d6b; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; margin:.75rem 0 .25rem; }
select,input,textarea { width:100%; font-size:1rem; padding:.7rem; border:1px solid #74818f; border:1px solid var(--edge); border-radius:10px; background:#ffffff; background:var(--card); color:#17212b; color:var(--ink); }
/* textarea does not inherit the body font by default; vertical-only resize
   keeps the notes field from widening the single-column layout. */
textarea { font-family:inherit; resize:vertical; }
.strip-cap { font-size:.85rem; color:#4f5d6b; color:var(--mut); margin:-.15rem 0 .4rem; }
.days { display:flex; gap:.4rem; overflow-x:auto; padding:.25rem 0; }
/* De dagstrip scrolt horizontaal; de standaard scrollbalk tekent op
   mobiel een grijze veeg direct onder de chips. Dun en stil volstaat:
   de half zichtbare volgende chip toont al dat er meer is. */
.days { scrollbar-width:thin; scrollbar-color:#d9dfe6 transparent; scrollbar-color:var(--line) transparent; }
.days::-webkit-scrollbar { height:4px; }
.days::-webkit-scrollbar-thumb { background:#d9dfe6; background:var(--line); border-radius:2px; }
.days::-webkit-scrollbar-track { background:transparent; }
.days a { position:relative; flex:0 0 3.2rem; text-align:center; border:1px solid #74818f; border:1px solid var(--edge); border-radius:10px; padding:.4rem 0; text-decoration:none; color:#17212b; color:var(--ink); background:#ffffff; background:var(--card); }
.days a.on { background:#0a5c9e; background:var(--acc); color:#ffffff; color:var(--acc-ink); border-color:#0a5c9e; border-color:var(--acc); }
.days a.off { color:#4f5d6b; color:var(--mut); }
.days .dn { display:block; font-size:.65rem; color:inherit; opacity:.7; }
/* On off days the muted color already carries the meaning — stacking the
   .dn opacity on top of it dropped the weekday name below AA contrast. */
.days a.off .dn { opacity:1; }
.chips { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.5rem; }
@media (min-width:40rem) { .chips { grid-template-columns:repeat(4,1fr); } }
/* Direct children only: a chip may nest a .visually-hidden state span for
   screen readers, and that span must never inherit chip geometry. */
.chips > a, .chips > button, .chips > span { display:block; width:100%; text-align:center; font-size:1rem; border:1px solid #74818f; border:1px solid var(--edge); border-radius:10px; padding:.7rem 0; margin:0; text-decoration:none; color:#17212b; color:var(--ink); font-weight:600; background:#ffffff; background:var(--card); cursor:pointer; }
.chips a.on { background:#0a5c9e; background:var(--acc); color:#ffffff; color:var(--acc-ink); border-color:#0a5c9e; border-color:var(--acc); }
.chips .gone { position:relative; color:#4f5d6b; color:var(--mut); border-style:dashed; font-weight:400; cursor:default; }
.chips .gone s { text-decoration:line-through; }
button,.btn { display:block; width:100%; text-align:center; font-size:1rem; font-weight:650; padding:.85rem; margin-top:1rem; border:0; border-radius:10px; background:#0a5c9e; background:var(--acc); color:#ffffff; color:var(--acc-ink); text-decoration:none; cursor:pointer; }
.btn.secondary { background:#ffffff; background:var(--card); color:#17212b; color:var(--ink); border:1px solid #74818f; border:1px solid var(--edge); }
.btn.danger { background:#ffffff; background:var(--card); color:#a4262c; color:var(--warn); border:1px solid #74818f; border:1px solid var(--edge); }
.btn.ghost { background:#ffffff; background:var(--card); color:#17212b; color:var(--ink); border:1px solid #74818f; border:1px solid var(--edge); }
.msg { padding:.5rem 0; }
.msg.warn { color:#a4262c; color:var(--warn); font-weight:600; }
.msg.ok { color:#1c6b3d; color:var(--ok); font-weight:600; }
.meta { color:#4f5d6b; color:var(--mut); font-size:.9rem; }
.tel { font-weight:700; color:#17212b; color:var(--ink); }
/* min-width/min-height:0 is de tegenhanger van de 24px-ondergrens onderaan dit
   bestand. Die geldt ook voor `button`, en booking.html heeft één knop die
   alleen voor een schermlezer bestaat — zonder deze nul zou die 24 bij 24
   opeisen. Klassespecificiteit (0,1,0) wint van `button` (0,0,1), dus dit
   overrulet ongeacht de volgorde. */
.visually-hidden { position:absolute; width:1px; height:1px; min-width:0; min-height:0; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.6rem 0; border-top:1px solid #d9dfe6; border-top:1px solid var(--line); }
.row:first-child { border-top:0; padding-top:0; }
.row-main { flex:1 1 auto; min-width:0; }
.row-main p { margin:0; }
/* Ook een naamlink in een rij is een vingerdoel: inline-block laat de
   min-height van de 24px-regel onderaan echt gelden. De kleine padding
   plus de negatieve marge houden de rijhoogte gelijk; .2rem blijft boven
   de 24px-vloer zonder in de metaregel eronder te bloeden (review-meting:
   .4rem overlapte die regel met ~6px). */
.row-main a, a.row-main { color:#17212b; color:var(--ink); display:inline-block; padding-block:.2rem; margin-block:-.2rem; }
a.row { color:inherit; text-decoration:none; }
/* De herstelbare rij (app_today.html, spec 2026-08-01) is een div met een
   losse row-main-link ernaast een form — een form mag niet in een <a>
   nesten. De link moet er wel uitzien als de rest van de rij. */
a.row-main { color:inherit; text-decoration:none; }
.row-actions { flex:0 0 auto; }
.row-actions form { margin:0; }
.btn-sm { display:inline-block; width:auto; font-size:.85rem; font-weight:600; padding:.5rem .9rem; margin:0; border:1px solid #74818f; border:1px solid var(--edge); border-radius:10px; background:#ffffff; background:var(--card); color:#17212b; color:var(--ink); cursor:pointer; }
.btn-sm.danger { color:#a4262c; color:var(--warn); }
.daynav { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.daynav a { color:#17212b; color:var(--ink); text-decoration:none; font-weight:600; padding:.35rem .5rem; text-align:center; }
.daypick { display:flex; gap:.5rem; align-items:center; }
.daypick input { width:auto; flex:1 1 auto; }
.daypick button { width:auto; margin-top:0; padding:.7rem 1rem; }
.msg.nudge { background:#fdf3d7; border:1px solid #d8c27a; border-radius:10px; padding:.6rem .8rem; }
/* Notifications banner: a non-interfering top bar the barber can keep
   working around or dismiss. Same warm tone as .msg.nudge. */
.banner { display:flex; align-items:center; gap:.6rem; background:#fdf3d7; border:1px solid #d8c27a; border-radius:10px; padding:.6rem .8rem; margin-bottom:.75rem; }
.banner-text { margin:0; font-size:.9rem; }
.banner-text:empty { display:none; }
.banner .btn-sm { flex:0 0 auto; }
.banner-close { flex:0 0 auto; width:40px; height:40px; margin-inline-start:auto; padding:0; font-size:1.4rem; line-height:1; border:0; border-radius:8px; background:transparent; color:#4f5d6b; color:var(--mut); cursor:pointer; }
.tag { display:inline-block; font-size:.7rem; font-weight:600; color:#4f5d6b; color:var(--mut); background:#eef1f5; background:var(--bg); border:1px solid #d9dfe6; border:1px solid var(--line); border-radius:6px; padding:.1rem .4rem; text-transform:none; }
.badge { display:inline-block; min-width:1.4rem; text-align:center; font-size:.8rem; font-weight:700; color:#ffffff; color:var(--acc-ink); background:#0a5c9e; background:var(--acc); border-radius:999px; padding:.15rem .5rem; }
label.radio { display:inline-block; text-transform:none; font-size:.9rem; font-weight:400; color:#17212b; color:var(--ink); margin:.5rem .75rem .5rem 0; }
label.radio input { width:auto; }
/* Settings notification toggles: same normal-case ink override as label.radio,
   but block — each checkbox+text pair is its own row. */
label.check { display:block; text-transform:none; font-size:.9rem; font-weight:400; color:#17212b; color:var(--ink); margin:.5rem 0; }
label.check input { width:auto; }
/* "Clear my details": a button that reads as an inline link, undoing the
   block/full-width button default above.
   display:inline-block en niet inline: op een niet-vervangen inline-element
   gooit de browser min-height weg, en dan zakt dit klikdoel terug naar de
   hoogte van zijn eigen regel (~17px). Zie de 24px-regel onderaan. */
.linklike { display:inline-block; width:auto; font-size:.9rem; font-weight:400; padding:0; margin:0; border:0; border-radius:0; background:none; color:#4f5d6b; color:var(--mut); text-decoration:underline; cursor:pointer; }
/* Losse tekstlinks die een vinger moeten vangen (export, boekingslink):
   zelfde inline-block-reden als .linklike hierboven. */
.tap { display:inline-block; padding-block:.4rem; }
.forget-form { margin:0; }
/* Barber-app hamburger: native details/summary — opens and closes with zero
   JS and is keyboard-operable out of the box. The summary is position:relative
   so its .visually-hidden label stays contained. */
.menu { position:relative; flex:0 0 auto; }
.menu summary { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; list-style:none; cursor:pointer; border:1px solid #74818f; border:1px solid var(--edge); border-radius:10px; background:#ffffff; background:var(--card); }
.menu summary::-webkit-details-marker { display:none; }
.menu .bars { position:relative; display:block; width:18px; height:2px; border-radius:1px; background:#17212b; background:var(--ink); }
.menu .bars::before, .menu .bars::after { content:""; position:absolute; left:0; width:18px; height:2px; border-radius:1px; background:#17212b; background:var(--ink); }
.menu .bars::before { top:-6px; }
.menu .bars::after { top:6px; }
/* inset-inline-end hangs the sheet from the icon's start-appropriate edge in
   both LTR and RTL — no [dir] override needed. */
.menu-sheet { position:absolute; top:calc(100% + .4rem); inset-inline-end:0; z-index:10; min-width:12rem; background:#ffffff; background:var(--card); border:1px solid #d9dfe6; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(15,23,42,.14); overflow:hidden; }
.menu-sheet a { display:block; padding:.7rem 1rem; color:#17212b; color:var(--ink); text-decoration:none; font-weight:600; }
.menu-sheet .logout-form { margin:0; border-top:1px solid #d9dfe6; border-top:1px solid var(--line); }
.menu-sheet .logout-form button { width:100%; text-align:start; font-size:1rem; font-weight:600; padding:.7rem 1rem; margin:0; border:0; border-radius:0; background:#ffffff; background:var(--card); color:#17212b; color:var(--ink); cursor:pointer; }
.qr-code { display:block; width:100%; max-width:22rem; height:auto; margin:.75rem auto; }
@media print {
  .menu { display:none; }
  .banner { display:none; } /* the notifications nudge never belongs on paper */
  [data-print] { display:none; } /* the print button must not print itself */
  .site-foot { display:none; }
  .qr-code { max-width:100%; }
  /* QR flyer: "Save as PDF" / print yields a clean one-page flyer — the shop
     name (base.html's header h1), the QR code, and the booking URL text,
     nothing else. */
  .qr-page h1, .qr-page h2, .qr-page .meta { display:none; }
}
/* Keyboard affordance: visible focus ring on the interactive grids and
   form controls. Touch/mouse users never see it (:focus-visible). */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid #17212b; outline:2px solid var(--ink); outline-offset:2px; }
/* WCAG 2.2, regel 2.5.8: wat je aantikt is minstens 24x24 CSS-pixels. De
   ondergrens staat hier één keer, expliciet, voor alles wat je kunt aantikken.
   Geen var() in deze regel, dus ook geen uitgeschreven dubbelganger nodig.
   web/a11y_tweede_test.go rekent hem na. */
.days a, .chips > a, .chips > button, .btn-sm, .daynav a, .menu-sheet a, .menu summary, .faq details.qa summary, .banner-close, button, .btn, select, input, textarea, .linklike, label.radio, label.check, .jump a, .row-main a, a.row-main, .tap { min-width:24px; min-height:24px; }
/* Arabic (dir=rtl): tracking-out connected letterforms breaks them apart —
   drop the uppercase-label letter-spacing there. */
[dir="rtl"] label, [dir="rtl"] h2 { letter-spacing:0; }

.card.note{white-space:pre-line}
.logo-preview{display:block;max-height:96px;max-width:100%;margin:.2rem 0 .6rem;background:#fff;border-radius:8px}
/* Agenda-abonnementslink (Instellingen): een lange token-URL mag de kaart
   niet oprekken op een telefoon — breken mag hier overal. */
.cal-url{display:block;word-break:break-all;font-size:.85rem;line-height:1.4}
/* Teruglink boven de privacyverklaring. */
.back{margin:0 0 .9rem}
.back a{color:#4f5d6b;color:var(--mut)}
/* Groeiregel onderaan de boekingspagina: "Wil je ook zo'n boekingspagina?" */
.own-shop{text-align:center;margin:1.25rem 0 0}

/* While book.js swaps in another day or time, the browser shows no loading
   indicator of its own — this is the stand-in. Deliberately faint and
   without motion. */
main[aria-busy="true"] { opacity: .55; }

/* De browser tekent invoervelden en vinkjes zelf; placeholder en vink-accent
   gaan mee in het palet. */
input::placeholder, textarea::placeholder { color:#4f5d6b; color:var(--mut); opacity:1; }
input[type="checkbox"], input[type="radio"] { accent-color:#0a5c9e; accent-color:var(--acc); }

fieldset.services { border:0; padding:0; margin:0; }
fieldset.services legend { display:block; font-size:.7rem; font-weight:650; color:#4f5d6b; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; margin:.75rem 0 .25rem; padding:0; }
.meta.duur { margin:.5rem 0 0; }
.cta-end { text-align:center; }
.cta-end .btn { margin-top:0; display:inline-block; width:auto; min-width:14rem; }

a.masthead { text-decoration:none; color:#17212b; color:var(--ink); }
.brand-name { font-size:1.125rem; font-weight:700; letter-spacing:-.01em; }
.mkt-nav { display:flex; gap:.15rem; flex:0 0 auto; }
.mkt-nav a { display:block; padding:.55rem .55rem; font-size:.92rem; font-weight:600; color:#17212b; color:var(--ink); text-decoration:none; border-radius:8px; white-space:nowrap; min-width:24px; min-height:24px; }
.mkt-nav a:hover { background:#eef1f5; background:var(--bg); }
/* Heel smal: het nummer staat ook in het contactblok en de footer. */
@media (max-width:30rem) { .site-head .head-tel { display:none; } }

/* Tekstblokken met alinea's uit de taaltabel (marketingpagina's). */
.prose { white-space:pre-line; margin:0; }

/* ---- Breedschermlaag beheerscherm (6 aug 2026) --------------------------
   Het beheerscherm is mobiel-eerst ontworpen (de 28rem bovenin); tot deze
   laag rendert een pc diezelfde smalle kolom in een lege vlakte. Onder 48em
   verandert hier niets. 48-62em (tablet): dezelfde ene kolom met meer
   lucht. Vanaf 62em (pc): de kaarten vloeien in twee kolommen; paginakop,
   meldingen en het springmenu blijven over de volle breedte, en een pagina
   met maar één kaart centreert op leesbreedte in plaats van links te
   plakken. Invoervelden blijven gecapt zodat een brede kaart geen
   metersbrede tekstvakken krijgt. */
@media (min-width:48em) {
  body.app .wrap, body.app main { max-width:40rem; }
}
@media (min-width:62em) {
  body.app .wrap, body.app main { max-width:66rem; }
  body.app main { display:grid; grid-template-columns:1fr 1fr; column-gap:1.5rem; align-items:start; }
  body.app main > h1, body.app main > .msg, body.app main > .banner, body.app main > .jump, body.app main > p, body.app main > h2[tabindex] { grid-column:1 / -1; }
  body.app main > section:only-of-type { grid-column:1 / -1; justify-self:center; width:100%; max-width:40rem; }
  body.app main .card input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), body.app main .card textarea, body.app main .card select { max-width:32rem; }
}

/* Klikbare adressen (contactblok en footer) en dienstkaart-titels. */
.contact-grid .addr a { color:#17212b; color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.site-foot .addr a { color:#c3cdd7; text-decoration:underline; text-underline-offset:2px; }
.tile h3 a { color:#17212b; color:var(--ink); text-decoration:none; }
.tile h3 a:hover { color:#0a5c9e; color:var(--acc); text-decoration:underline; }

/* Beweging alleen voor wie er niet om gevraagd heeft die uit te zetten; en
   nooit meer dan een lichte hover. */
@media (prefers-reduced-motion:no-preference) {
  a, button, .btn, .tile, .btn-sm { transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, filter .15s ease; }
  .tile:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(15,23,42,.08); }
  button:active, .btn:active { transform:translateY(1px); }
}
button:hover, .btn:hover { filter:brightness(.96); }