/* Leukzwembad: alle opmaak. Tokens bovenaan; geen kleur of maat hard in de onderdelen.
   Regels van Raf: niets onder 16 px, cijfers stevig en in de tekstletter, WCAG AA, mobiel eerst. */

@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(../lettertypes/rubik-latin-wght-normal.woff2) format('woff2');
}

:root {
  --gelcoat: #F2F5F4;
  --wit: #FFFFFF;
  --ijs: #E3F3FB;
  --tekenwater: #BFE3F5;
  --water: #0A76B8;
  --water-donker: #075C91;
  --diep: #0B2B3C;
  --diep-2: #123A4F;
  --arduin: #55636B;
  --lijn: #D5DEE2;
  --zon: #FFC93C;

  --letter: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-basis: 1.0625rem;      /* 17 px */
  --t-klein: 1rem;           /* 16 px, de ondergrens */
  --t-groot: 1.25rem;
  --t-h3: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --t-h2: clamp(1.65rem, 1.25rem + 2vw, 2.6rem);
  --t-h1: clamp(1.95rem, 1.3rem + 3.4vw, 3.75rem);

  --r-klein: 8px;
  --r: 14px;
  --r-groot: 22px;
  --rand: clamp(1.125rem, 4vw, 2.5rem);
  --breed: 1200px;
  --blok: clamp(3.25rem, 8vw, 6.5rem);
  --kop-h: 56px;
  --schaduw: 0 1px 2px rgba(11, 43, 60, .08), 0 8px 24px rgba(11, 43, 60, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 16px); }
body {
  margin: 0; background: var(--gelcoat); color: var(--diep);
  font-family: var(--letter); font-size: var(--t-basis); line-height: 1.55; font-weight: 400;
  font-variant-numeric: lining-nums;
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -.028em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.012em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--water); text-underline-offset: .18em; }
a:hover { color: var(--water-donker); }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; border-radius: 4px; }
.donker :focus-visible, .tekenvlak :focus-visible { outline-color: var(--zon); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cijfer, .prijs, time { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.binnen { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; }
.blok { padding-block: var(--blok); }
.blok-wit { background: var(--wit); }
.blok-ijs { background: var(--ijs); }
.inleiding { max-width: 62ch; margin-top: .9rem; color: var(--arduin); font-size: var(--t-groot); line-height: 1.5; }
.stapel > * + * { margin-top: 1rem; }
.overslaan { position: absolute; left: -999px; top: 8px; background: var(--zon); color: var(--diep); padding: .7rem 1rem; z-index: 100; border-radius: var(--r-klein); font-weight: 600; }
.overslaan:focus { left: 8px; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px; border: 2px solid var(--water);
  background: var(--water); color: #fff; font-weight: 600; font-size: var(--t-basis); line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.knop:hover { background: var(--water-donker); border-color: var(--water-donker); color: #fff; }
.knop:active { transform: translateY(1px); }
.knop.tweede { background: transparent; color: var(--water-donker); }
.knop.tweede:hover { background: var(--ijs); color: var(--water-donker); }
.knop.zon { background: var(--zon); border-color: var(--zon); color: var(--diep); }
.knop.zon:hover { background: #FFD766; border-color: #FFD766; color: var(--diep); }
.donker .knop.tweede, .tekenvlak .knop.tweede { color: #fff; border-color: rgba(255, 255, 255, .7); }
.donker .knop.tweede:hover, .tekenvlak .knop.tweede:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.knop svg { width: 20px; height: 20px; flex: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(242, 245, 244, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lijn); }
.kop-binnen { display: flex; align-items: center; gap: 1rem; min-height: var(--kop-h); }
.merk { display: inline-flex; align-items: center; gap: .6rem; color: var(--diep); text-decoration: none; font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; margin-right: auto; }
.merk svg { width: 22px; height: 34px; flex: none; }
.merk:hover { color: var(--diep); }
.kop-nav { display: none; }
.kop-nav a { color: var(--diep); text-decoration: none; font-weight: 500; white-space: nowrap; padding: .5rem .1rem; border-bottom: 3px solid transparent; }
.kop-nav a:hover { border-bottom-color: var(--lijn); }
.kop-nav a[aria-current="page"] { border-bottom-color: var(--zon); }
.kop-bel { display: none; }
.menuknop { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .9rem; border-radius: 999px; border: 2px solid var(--diep); background: transparent; font-weight: 600; cursor: pointer; }
.menuknop svg { width: 20px; height: 20px; }
.menu-paneel { display: none; border-top: 1px solid var(--lijn); background: var(--gelcoat); padding: .5rem var(--rand) 1.25rem; max-height: calc(100dvh - var(--kop-h)); overflow: auto; }
.menu-paneel.open { display: block; }
.menu-paneel a { display: flex; align-items: center; min-height: 52px; color: var(--diep); text-decoration: none; font-weight: 500; font-size: var(--t-groot); border-bottom: 1px solid var(--lijn); }
.menu-paneel a[aria-current="page"] { font-weight: 700; box-shadow: inset 4px 0 0 var(--zon); padding-left: .8rem; }
.menu-paneel .knop { margin-top: 1rem; width: 100%; }
@media (min-width: 1100px) {
  :root { --kop-h: 72px; }
  .kop-nav { display: flex; gap: clamp(.9rem, 1.6vw, 1.6rem); margin-right: .5rem; }
  .kop-bel { display: inline-flex; }
  .menuknop, .menu-paneel, .menu-paneel.open { display: none; }
}

/* Status: nu open */
.status { display: inline-flex; align-items: baseline; gap: .55rem; font-weight: 500; }
.status::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%; background: var(--arduin); flex: none; transform: translateY(.02rem); }
.status[data-open="ja"]::before { background: var(--zon); box-shadow: 0 0 0 4px rgba(255, 201, 60, .3); }

/* Foto's */
.foto { position: relative; overflow: hidden; background: var(--ijs); border-radius: var(--r); }
.foto picture { display: block; width: 100%; height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto.hoek-0 { border-radius: 0; }

/* Eerste scherm */
.held { background: var(--gelcoat); }
.held-foto { border-radius: 0; height: clamp(180px, 41svh, 380px); }
.held-tekst { padding: 1.35rem var(--rand) 2rem; }
.held-tekst h1 { max-width: 15ch; }
.held-regel { margin-top: .8rem; max-width: 46ch; font-size: var(--t-basis); color: var(--arduin); }
.held-regel.lang { display: none; }
.held-tekst .knoppen { margin-top: 1.15rem; }
.held-tekst .knoppen .knop { flex: 1 1 100%; }
.held-vandaag { margin-top: 1rem; }
@media (max-height: 600px) { .held-foto { height: clamp(180px, 34svh, 260px); } }
@media (min-width: 560px) { .held-tekst .knoppen .knop { flex: 0 1 auto; } }
@media (min-width: 900px) {
  .held { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); align-items: stretch; }
  .held-tekst h1 { font-size: clamp(2.4rem, 1rem + 2.9vw, 3.4rem); max-width: 17ch; }
  .held-foto { order: 2; height: auto; min-height: min(78vh, 700px); border-radius: 0 0 0 var(--r-groot); }
  .held-foto picture { position: absolute; inset: 0; }
  .held-tekst { order: 1; align-self: center; padding: 3rem clamp(1.5rem, 3.5vw, 3.5rem) 3.5rem max(var(--rand), calc((100vw - var(--breed)) / 2)); }
  .held-regel { font-size: var(--t-groot); margin-top: 1.1rem; }
  .held-regel.kort { display: none; }
  .held-regel.lang { display: block; }
  .held-tekst .knoppen { margin-top: 1.6rem; }
}

/* Het tekenvlak: de rij van 20 baden op schaal. Eén vakje is één meter. */
.tekenvlak {
  --m: 20px;
  background-color: var(--diep);
  background-image:
    linear-gradient(rgba(191, 227, 245, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 227, 245, .07) 1px, transparent 1px);
  background-size: var(--m) var(--m);
  color: #fff;
}
.tekenvlak h2, .tekenvlak h3 { font-weight: 560; }
.tekenvlak p, .tekenvlak li, .tekenvlak label, .tekenvlak td, .tekenvlak th { font-weight: 430; }
.tekenvlak .inleiding { color: #CFE3EE; }
.tekenvlak a { color: #9BD8FA; }
@media (min-width: 700px) { .tekenvlak { --m: 22px; } }
@media (min-width: 1280px) { .tekenvlak { --m: 24px; } }

.tuinmaat { margin-top: 1.75rem; display: grid; gap: .9rem; }
.tuinmaat fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1rem; }
.tuinmaat legend { padding: 0; margin-bottom: .6rem; font-weight: 560; font-size: var(--t-groot); }
.veld { display: grid; gap: .3rem; }
.veld span { font-size: var(--t-klein); }
.veld input, .veld select, .veld textarea {
  min-height: 48px; padding: .55rem .8rem; border-radius: var(--r-klein); border: 2px solid var(--lijn); background: var(--wit); color: var(--diep); width: 100%;
}
.tuinmaat .veld input { width: 7.5rem; font-weight: 600; }
.tuinmaat .wis { min-height: 48px; background: none; border: 0; color: #9BD8FA; text-decoration: underline; cursor: pointer; padding: 0 .3rem; }
.tuinmaat-uitkomst { min-height: 1.6em; font-weight: 500; }

.rij-kader { position: relative; margin-top: 1.5rem; margin-inline: calc(-1 * var(--rand)); }
.rij {
  position: relative; display: flex; align-items: flex-end; gap: calc(var(--m) * .9);
  overflow-x: auto; padding: 1.25rem var(--rand) 1rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #5C8296 transparent;
}
.rij > * { scroll-snap-align: center; flex: none; }
.bad {
  position: relative; display: grid; justify-items: center; gap: .55rem; padding: .5rem .35rem .45rem; min-width: 76px;
  background: none; border: 0; border-radius: var(--r-klein); color: #fff; cursor: pointer; text-align: center;
}
.bad svg { overflow: visible; }
.bad .vorm { fill: var(--tekenwater); stroke: #fff; stroke-width: 6; transition: fill .15s; }
.bad .trede { fill: none; stroke: #6FB6DC; stroke-width: 5; }
.bad-naam { font-weight: 560; font-size: var(--t-klein); line-height: 1.15; padding: .12rem .5rem; border-radius: 999px; }
.bad-maat { font-size: var(--t-klein); line-height: 1.15; color: #CFE3EE; font-variant-numeric: tabular-nums; }
.bad:hover .vorm { fill: #DDF1FB; }
.bad[aria-pressed="true"] .vorm { fill: var(--zon); stroke: var(--zon); }
.bad[aria-pressed="true"] .trede { stroke: #B98600; }
.bad[aria-pressed="true"] .bad-naam { background: var(--zon); color: var(--diep); font-weight: 650; }
.bad.past-niet { opacity: .34; }
.bad.past-niet[aria-pressed="true"] { opacity: 1; }
.maatman { display: grid; justify-items: center; gap: .55rem; padding: .5rem .2rem .45rem; color: #CFE3EE; font-size: var(--t-klein); line-height: 1.15; text-align: center; }
.maatman svg { fill: #6FB6DC; }
.rij-knoppen { display: flex; gap: .6rem; justify-content: flex-end; padding: 0 var(--rand); }
.rij-knoppen button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.rij-knoppen button:hover { background: rgba(255, 255, 255, .12); }
.rij-knoppen svg { width: 22px; height: 22px; }
.rij-uitleg { margin-top: .4rem; color: #CFE3EE; font-size: var(--t-klein); }
@media (min-width: 1000px) {
  .rij-kader { margin-inline: 0; }
  .rij { flex-wrap: wrap; overflow: visible; padding-inline: 0; row-gap: 1.6rem; }
  .rij-knoppen { display: none; }
}

/* Het blad van één model */
.blad { margin-top: 2rem; background: var(--wit); color: var(--diep); border-radius: var(--r-groot); padding: clamp(1.15rem, 3.5vw, 2.5rem); display: grid; gap: 1.75rem; }
.blad p, .blad li, .blad td, .blad th, .blad label { font-weight: 400; }
.blad a { color: var(--water); }
.blad h3 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem); font-weight: 600; }
.blad-kop, .blad-tekening, .blad-info { min-width: 0; }
.blad-leeg { margin-top: 2rem; padding: 1.25rem 1.4rem; border: 2px dashed rgba(255, 255, 255, .45); border-radius: var(--r); color: #CFE3EE; max-width: 48ch; }
.blad-maten { margin-top: .5rem; color: var(--arduin); }
.blad-tekening { display: grid; gap: 1rem; align-content: start; }
.plan { background: var(--ijs); border-radius: var(--r); padding: 1rem; }
.plan svg { width: 100%; height: auto; }
.plan .vorm { fill: var(--tekenwater); stroke: var(--water); stroke-width: 5; }
.plan .trede { fill: none; stroke: var(--water); stroke-width: 3.5; opacity: .75; }
.plan .maatlijn { stroke: var(--diep); stroke-width: 3; fill: none; }
.plan text { font-family: var(--letter); font-weight: 600; fill: var(--diep); }
.plan .mens { fill: var(--arduin); }
.blad-foto { aspect-ratio: 4 / 3; }
.foto.tekening { background: var(--wit); border: 1px solid var(--lijn); }
.foto.tekening img { object-fit: contain; height: auto; }
.prijstabel { margin-top: 0; }
.prijstabel th, .prijstabel td { padding: .7rem 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: baseline; font-weight: 400; }
.prijstabel td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1rem; }
.prijstabel tr.samen th, .prijstabel tr.samen td { border-bottom: 0; font-size: var(--t-groot); font-weight: 650; padding-top: .9rem; }
.voetnoot { margin-top: .6rem; color: var(--arduin); font-size: var(--t-klein); }
.compleet { margin-top: 1.25rem; background: var(--zon); color: var(--diep); border-radius: var(--r); padding: 1rem 1.2rem; }
.compleet strong { display: block; font-size: var(--t-groot); font-weight: 650; }
.compleet .prijs { font-size: 1.9rem; letter-spacing: -.02em; line-height: 1.15; display: block; margin-top: .15rem; }
.compleet p { margin-top: .35rem; }
.uitklap { margin-top: 1.1rem; border-top: 1px solid var(--lijn); }
.uitklap summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary::after { content: ''; width: .6rem; height: .6rem; border-right: 2.5px solid var(--water); border-bottom: 2.5px solid var(--water); transform: rotate(45deg) translateY(-3px); flex: none; margin-right: .4rem; }
.uitklap[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.uitklap + .uitklap { margin-top: 0; }
.uitklap:last-of-type { border-bottom: 1px solid var(--lijn); }
.uitklap > :not(summary) { padding-bottom: 1.1rem; }
.lijstje { list-style: none; display: grid; gap: .45rem; }
.lijstje li { padding-left: 1.5rem; position: relative; }
.lijstje li::before { content: ''; position: absolute; left: .1rem; top: .55em; width: .65rem; height: .38rem; border-left: 2.5px solid var(--water); border-bottom: 2.5px solid var(--water); transform: rotate(-45deg); }
.kleuren { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem .7rem; }
.kleuren li { display: grid; gap: .35rem; font-size: var(--t-klein); line-height: 1.25; }
.kleuren .foto { aspect-ratio: 3 / 2; border-radius: var(--r-klein); border: 1px solid var(--lijn); }
.blad .knoppen { margin-top: 1.5rem; }
@media (min-width: 900px) {
  .blad { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 2.75rem; row-gap: 1.5rem; grid-template-rows: auto 1fr; }
  .blad-tekening { grid-column: 1; grid-row: 1 / span 2; }
  .blad-kop, .blad-info { grid-column: 2; }
}

/* Offerte: stap voor stap op zijn plaats, opent een ingevulde mail */
.offerte { margin-top: 1.5rem; padding: 1.25rem; background: var(--ijs); border-radius: var(--r); display: grid; gap: 1.1rem; }
.offerte h4 { font-size: var(--t-groot); }
.offerte fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .2rem; }
.offerte legend { font-weight: 600; padding: 0; margin-bottom: .35rem; }
.vink { display: flex; align-items: center; gap: .7rem; min-height: 44px; cursor: pointer; }
.vink input { width: 22px; height: 22px; accent-color: var(--water); flex: none; }
.offerte .rooster { display: grid; gap: .9rem; }
.offerte .fout { color: #A1260D; font-weight: 500; }
@media (min-width: 620px) { .offerte .rooster { grid-template-columns: 1fr 1fr; } }

/* Vier stappen in foto's */
.stappen { list-style: none; counter-reset: stap; display: grid; gap: 1.75rem; margin-top: 2.25rem; }
.stappen li { counter-increment: stap; display: grid; gap: .85rem; align-content: start; }
.stappen .foto { aspect-ratio: 4 / 3; }
.stappen h3 { display: flex; gap: .65rem; align-items: baseline; }
.stappen h3::before { content: counter(stap); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--diep); color: #fff; font-size: 1rem; font-weight: 600; flex: none; transform: translateY(-.1rem); letter-spacing: 0; }
.stappen p { color: var(--arduin); }
@media (min-width: 640px) { .stappen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .stappen { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .stappen li:nth-child(even) { margin-top: 2.5rem; } }

/* Bewijs: 900 baden, Google */
.bewijs { display: grid; gap: 2rem; }
.bewijs-getal { font-size: clamp(4rem, 2.5rem + 11vw, 9.5rem); font-weight: 650; letter-spacing: -.05em; line-height: .9; color: var(--water); font-variant-numeric: lining-nums; }
.bewijs-tekst { font-size: var(--t-h3); font-weight: 500; max-width: 22ch; line-height: 1.25; letter-spacing: -.012em; margin-top: .6rem; }
.google-kaart { display: flex; gap: 1rem; align-items: center; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1rem 1.2rem; text-decoration: none; color: var(--diep); max-width: 26rem; box-shadow: var(--schaduw); }
.google-kaart:hover { color: var(--diep); border-color: var(--water); }
.google-kaart svg.g { width: 40px; height: 40px; flex: none; }
.google-kaart .score { font-size: 1.9rem; font-weight: 650; line-height: 1; }
.sterren { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: .4rem; }
.sterren svg { width: 20px; height: 20px; fill: #F5A800; }
.fotoband { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.fotoband .foto { aspect-ratio: 1; }
@media (min-width: 760px) { .fotoband { grid-template-columns: repeat(3, 1fr); gap: .9rem; } .fotoband .foto { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .bewijs { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; } }

/* Het verhaal van de eigenaar */
.verhaal { display: grid; gap: 2rem; align-items: center; }
.verhaal blockquote { margin: 0; font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2rem); line-height: 1.3; font-weight: 500; letter-spacing: -.015em; max-width: 24ch; }
.verhaal .bij { margin-top: 1.2rem; color: var(--arduin); max-width: 48ch; }
.verhaal .foto { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .verhaal { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Kaartjes die naar een pagina leiden */
.wegen { display: grid; gap: 1rem; margin-top: 2rem; }
.weg { display: grid; grid-template-rows: auto 1fr; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--diep); }
.weg:hover { color: var(--diep); border-color: var(--water); }
.weg .foto { aspect-ratio: 16 / 10; border-radius: 0; }
.weg-tekst { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .35rem; align-content: start; }
.weg-tekst p { color: var(--arduin); }
.weg-tekst .meer { color: var(--water); font-weight: 600; margin-top: .4rem; text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 720px) { .wegen { grid-template-columns: repeat(3, 1fr); } .wegen.twee { grid-template-columns: repeat(2, 1fr); } }

/* Bezoek: uren, adres, route */
.bezoek { display: grid; gap: 2.25rem; }
.uren th, .uren td { padding: .6rem .7rem; text-align: left; font-weight: 400; border-bottom: 1px solid var(--lijn); }
.uren td { font-variant-numeric: tabular-nums; font-weight: 500; }
.uren tr.vandaag th, .uren tr.vandaag td { background: var(--zon); color: var(--diep); font-weight: 650; border-bottom-color: var(--zon); }
.uren tr.vandaag th:first-child { border-radius: var(--r-klein) 0 0 var(--r-klein); }
.uren tr.vandaag td:last-child { border-radius: 0 var(--r-klein) var(--r-klein) 0; }
.adres { font-style: normal; font-size: var(--t-groot); line-height: 1.45; }
.route { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.bezoek .foto { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .bezoek { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }

/* Gewone tekstpagina's en onderdelen voor de andere pagina's */
.paginakop { padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.paginakop h1 { max-width: 18ch; }
.tekst { max-width: 68ch; }
.tekst > * + * { margin-top: 1rem; }
.tekst h2 { margin-top: 2.75rem; font-size: var(--t-h3); }
.tekst ul, .tekst ol { padding-left: 1.3rem; display: grid; gap: .35rem; }
.tweekolom { display: grid; gap: 2rem; align-items: center; }
.tweekolom .foto { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .tweekolom { grid-template-columns: 1fr 1fr; gap: 4rem; } .tweekolom.om > :first-child { order: 2; } }
.galerij { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.galerij .foto { aspect-ratio: 4 / 3; }
.galerij .foto.hoog { aspect-ratio: 3 / 4; grid-row: span 2; height: 100%; }
@media (min-width: 760px) { .galerij { grid-template-columns: repeat(3, 1fr); gap: .9rem; } }
.tabel-kader { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--wit); }
.tabel th, .tabel td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: baseline; font-weight: 400; }
.tabel thead th { font-weight: 600; background: var(--ijs); white-space: nowrap; }
.tabel tbody tr:last-child th, .tabel tbody tr:last-child td { border-bottom: 0; }
.tabel td.prijs, .tabel th.prijs { text-align: right; }
.tabel tbody th { font-weight: 600; }
.zoek { display: grid; gap: .4rem; max-width: 30rem; }
.zoek input { min-height: 52px; padding: .6rem 1rem; border-radius: 999px; border: 2px solid var(--diep); background: var(--wit); width: 100%; }
.keuze { display: flex; flex-wrap: wrap; gap: .5rem; }
.keuze button { min-height: 44px; padding: .4rem 1rem; border-radius: 999px; border: 2px solid var(--diep); background: transparent; font-weight: 500; cursor: pointer; }
.keuze button[aria-pressed="true"] { background: var(--zon); border-color: var(--zon); font-weight: 650; }
.melding { background: var(--ijs); border-radius: var(--r); padding: 1rem 1.2rem; }

/* Voet */
.voet { background: var(--diep); color: #fff; padding-block: 3rem 2rem; }
.voet p, .voet li, .voet a, .voet td, .voet th { font-weight: 430; }
.voet a { color: #fff; }
.voet-rooster { display: grid; gap: 2rem; }
.voet h2 { font-size: var(--t-groot); font-weight: 560; margin-bottom: .7rem; letter-spacing: -.01em; }
.voet ul { list-style: none; display: grid; gap: .1rem; }
.voet li a { display: inline-flex; min-height: 40px; align-items: center; }
.voet .uren-kort { display: grid; gap: .3rem; font-variant-numeric: tabular-nums; }
.voet-onder { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .22); display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; color: #CFE3EE; }
.voet-onder a { color: #CFE3EE; }
@media (min-width: 800px) { .voet-rooster { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

/* Onderbalk op de gsm: schuift pas in na het eerste scherm */
.onderbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: .6rem; padding: .5rem var(--rand) calc(.5rem + env(safe-area-inset-bottom)); background: rgba(242, 245, 244, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--lijn); transform: translateY(110%); transition: transform .25s ease; }
.onderbalk.zichtbaar { transform: none; }
.onderbalk .knop { flex: 1; min-height: 44px; padding-block: .45rem; }
body.met-onderbalk { padding-bottom: 64px; }
@media (min-width: 900px) { .onderbalk { display: none; } body.met-onderbalk { padding-bottom: 0; } }

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

/* Toegevoegd voor de andere pagina's */
.paginakop .tweekolom { align-items: center; }
.paginakop .inleiding { margin-top: 1rem; }
.paginakop .knoppen { margin-top: 1.5rem; }
.paginakop .status { margin-top: 1.25rem; }
.sectiekop { max-width: 62ch; }
.sectiekop + * { margin-top: 2rem; }
.blok-volgende .knoppen { margin-top: 1.5rem; }
.duo { display: grid; gap: 2rem; align-items: start; }
.duo h3 { margin-bottom: .9rem; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.duo + .duo, .fotodrie + .duo, .duo + .melding, .fotodrie + .melding { margin-top: 2.5rem; }
.melding p + p { margin-top: .5rem; }
.genummerd { padding-left: 1.4rem; display: grid; gap: .55rem; }
.genummerd li::marker { font-weight: 600; color: var(--water-donker); }
.tekst-arduin { color: var(--arduin); }

/* Drie foto's: groot links, twee rechts */
.fotodrie { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.fotodrie .foto { aspect-ratio: 4 / 3; }
.fotodrie .foto:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 760px) {
  .fotodrie { grid-template-columns: 2fr 1fr; gap: .9rem; }
  .fotodrie .foto:first-child { grid-column: 1; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
  .fotodrie .foto:first-child picture { position: absolute; inset: 0; }
}

/* Zo werkt het: de stappen van put tot zwemmen */
.werkstappen { list-style: none; counter-reset: werkstap; margin-top: 2rem; border-top: 1px solid var(--lijn); }
.werkstappen > li { counter-increment: werkstap; display: grid; gap: 1.25rem; padding-block: 2rem; border-bottom: 1px solid var(--lijn); }
.werkstappen h3 { display: flex; gap: .7rem; align-items: baseline; }
.werkstappen h3::before { content: counter(werkstap); display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--diep); color: #fff; font-size: 1.05rem; font-weight: 600; flex: none; transform: translateY(-.1rem); letter-spacing: 0; }
.werkstap-tekst { display: grid; gap: .8rem; align-content: start; max-width: 62ch; min-width: 0; }
.werkstap-fotos { display: grid; gap: .6rem; min-width: 0; }
.werkstap-fotos .foto { aspect-ratio: 4 / 3; }
.werkstap-fotos.twee { grid-template-columns: 1fr 1fr; }
.wie { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .2rem .75rem; border-radius: var(--r-klein); font-weight: 600; background: var(--ijs); color: var(--diep); }
.wie::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--water); flex: none; }
.wie.wij { background: var(--diep); color: #fff; }
.wie.wij::before { background: var(--tekenwater); }
@media (min-width: 900px) {
  .werkstappen > li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 3rem; row-gap: 1.5rem; align-items: start; padding-block: 2.5rem; }
  .werkstappen > li > h3 { grid-row: 1 / span 2; }
  .werkstappen > li > :not(h3) { grid-column: 2; }
}
.wiedoetwat { display: grid; gap: 1.25rem; margin-top: 2rem; }
.wiedoetwat > div { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.25rem 1.35rem 1.4rem; }
.wiedoetwat > div.wij { border: 2px solid var(--diep); }
.wiedoetwat h3 { margin-bottom: 1rem; }
@media (min-width: 900px) { .wiedoetwat { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* Tabellen met een naam en een omschrijving */
.pnaam { font-weight: 600; }
.pinhoud { font-weight: 400; color: var(--arduin); white-space: nowrap; }
.ptekst { display: block; margin-top: .2rem; font-weight: 400; color: var(--arduin); }
.tabel td.prijs { white-space: nowrap; font-weight: 600; }
.tabel td.aanvraag { font-weight: 400; color: var(--arduin); white-space: normal; min-width: 6.5rem; }
.tabel th[scope="row"] { min-width: 0; overflow-wrap: anywhere; }
.tabel.smal td { text-align: right; white-space: nowrap; }
.tabel.smal thead th:last-child { text-align: right; }
@media (max-width: 420px) { .tabel th, .tabel td { padding: .7rem .75rem; } }
.modelgroep + .modelgroep { margin-top: 2rem; }
.modelgroep h3 { font-size: var(--t-groot); margin-bottom: .8rem; }
.uitklap summary h3 { font-size: var(--t-groot); line-height: 1.25; }
.uitklap summary .aantal { font-weight: 400; color: var(--arduin); }
.uitklap .tabel-kader { margin-bottom: .4rem; }

/* Zwemshop */
.shopzoek { display: grid; gap: 1.1rem; margin-top: 2rem; }
.zoek span { font-weight: 600; }
.teller { color: var(--arduin); font-weight: 500; }
.prijsgroepen { margin-top: 1.5rem; display: grid; gap: 2.25rem; }
.prijsgroep h3 { font-size: var(--t-groot); margin-bottom: .8rem; }
.prijsgroep[hidden] { display: none; }
.hulp summary { min-height: 60px; }
.hulp-binnen { display: grid; gap: 1.5rem; }
.hulp-producten { background: var(--ijs); border-radius: var(--r); padding: 1rem 1.15rem 1.15rem; align-self: start; }
.hulp-producten h4 { font-size: var(--t-basis); margin-bottom: .6rem; }
.productjes { list-style: none; display: grid; }
.productjes li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid rgba(11, 43, 60, .12); }
.productjes li:last-child { border-bottom: 0; }
@media (min-width: 900px) { .hulp-binnen { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; } }

/* Realisaties: grote foto's, om de vijf een brede */
.galerij.groot { grid-template-columns: 1fr; gap: .75rem; }
.galerij.groot .foto { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .galerij.groot { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .galerij.groot .foto.breed { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
}

/* Toonzaal */
.paginakop .foto.vierkant { aspect-ratio: 1; }
@media (min-width: 900px) { .paginakop .foto.vierkant { aspect-ratio: 5 / 4; } }.prijsregel { margin-top: 1.1rem; font-weight: 600; }
.foto.foto-wit { background: var(--wit); border: 1px solid var(--lijn); }
.foto.foto-wit img { object-fit: contain; }
/* Oplossingen na de testronde van 12/11/2026 (zie verslag) */
/* 1. In het witte modelblad en het offerteformulier stond de tweede knop (Bel, Sluit) wit op wit: .tekenvlak .knop.tweede gold ook daar */
.tekenvlak .blad .knop.tweede { color: var(--water-donker); border-color: var(--water); }
.tekenvlak .blad .knop.tweede:hover { background: var(--ijs); color: var(--water-donker); }
.tekenvlak .blad :focus-visible { outline-color: var(--water); }
/* 2. Links in lopende tekst: klikvlak minstens 24 px hoog (huisregel), zonder dat de regel verspringt */
main p a:not(.knop), main li a:not(.knop), main td a, main th a, main address a { padding-block: .22em; }
/* 3. Links op ijsblauw halen 4,5:1 alleen in de donkere waterkleur */
.blok-ijs a:not(.knop), .melding a, .hulp-producten a { color: var(--water-donker); }
/* 4. Onderbalk op 320 px: "Kies uw bad" brak over twee regels (balk 76 px hoog) */
@media (max-width: 360px) { .onderbalk .knop { padding-inline: .8rem; } }
/* 5. Startpagina op 320 x 568: hoofdknop viel 4 px onder het scherm; foto naar de ondergrens van 180 px */
@media (max-height: 600px) and (max-width: 360px) { .held-foto { height: 180px; } }
/* 6. Tabellen in een rasterkolom mogen de kolom niet breder duwen */
.duo > *, .prijsgroepen > *, .werkstap-tekst, .hulp-binnen > * { min-width: 0; }
.tabel.smal td { white-space: normal; }
.pinhoud { white-space: normal; }.tabel.smal thead th { white-space: normal; }
.tabel .maten { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
@media (max-width: 400px) { .tabel .maten { white-space: normal; } }

/* Ronde 2 (12/11/2026, na de beoordeling met frisse ogen) */
.menu-paneel a.knop { color: #fff; justify-content: center; border-bottom: 2px solid var(--water); font-size: var(--t-basis); }
.kop-belknop { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--diep); color: var(--diep); flex: none; }
.kop-belknop:hover { color: var(--diep); background: var(--ijs); }
.kop-belknop svg { width: 20px; height: 20px; }
@media (min-width: 1100px) { .kop-belknop { display: none; } .merk { padding-right: 1.5rem; } }

/* Eerste scherm op de gsm: twee knoppen naast elkaar, zodat "nu open" boven de vouw staat */
.held-tekst .knoppen .knop { flex: 1 1 0; padding-inline: .6rem; white-space: nowrap; }
.knop .lang { display: none; }
@media (min-width: 560px) {
  .held-tekst .knoppen .knop { flex: 0 1 auto; padding-inline: 1.35rem; }
  .knop .kort { display: none; }
  .knop .lang { display: inline; }
}

/* De aanbieding als strook in de "nu"-kleur */
.strook-nu { background: var(--zon); color: var(--diep); }
.strook-nu .binnen { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; align-items: baseline; justify-content: space-between; padding-block: .85rem; }
.strook-nu strong { font-weight: 650; }
.strook-nu .prijs { font-weight: 700; }
main .strook-nu p a, .strook-nu a { color: var(--diep); font-weight: 600; white-space: nowrap; padding-block: .4rem; }

/* De rij: op de gsm een raster met alle 20 baden op een scherm, vanaf 700 px een rij op de grondlijn */
.tekenvlak { --m: 12px; }
@media (min-width: 480px) { .tekenvlak { --m: 15px; } }
@media (min-width: 700px) { .tekenvlak { --m: 20px; } }
@media (min-width: 1000px) { .tekenvlak { --m: 22px; } }
@media (min-width: 1280px) { .tekenvlak { --m: 24px; } }
.rij {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); align-items: end; justify-items: center;
  gap: 1.2rem 0; overflow: visible; padding: 1.25rem 0 .5rem; margin-top: 1rem; scroll-snap-type: none;
}
.bad { min-width: 0; width: 100%; padding: .4rem 0; gap: .4rem; }
.bad svg { margin-bottom: .15rem; }
.bad-naam { padding: .12rem .3rem; letter-spacing: -.01em; }
.bad-prijs { font-size: var(--t-klein); line-height: 1.15; font-weight: 560; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.bad.past-krap .vorm { stroke-dasharray: 26 16; }
.maatman { display: none; }
@media (min-width: 700px) {
  .rij { display: flex; flex-wrap: wrap; gap: 1.6rem calc(var(--m) * .9); }
  .bad { min-width: 78px; width: auto; padding: .5rem .35rem .45rem; }
  .bad-naam { padding: .12rem .5rem; }
  .maatman { display: grid; }
}
.maatman svg { fill: #8CCBEC; }

/* Het blad: titel, tekening, prijs, de rest, en pas dan de tuinfoto */
.blad { gap: 1.4rem; }
.blad-plan, .blad-prijs, .blad-rest, .blad-figuur { min-width: 0; }
.blad-figuur { margin: 0; }
.plan p { margin-top: .7rem; }
.plan strong { font-weight: 600; }
.plan .raster { stroke: rgba(10, 118, 184, .17); stroke-width: 2; fill: none; }
.plan .plek { fill: rgba(255, 201, 60, .22); stroke: var(--diep); stroke-width: 4; stroke-dasharray: 20 13; }
.plan .mens { fill: var(--diep); opacity: .55; }
.blad-rest .uitklap:first-child { margin-top: 0; }
@media (min-width: 900px) {
  .blad { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; grid-template-areas: "plan kop" "plan prijs" "foto rest"; column-gap: 2.75rem; row-gap: 1.4rem; }
  .blad-kop { grid-area: kop; }
  .blad-plan { grid-area: plan; align-self: start; }
  .blad-prijs { grid-area: prijs; }
  .blad-rest { grid-area: rest; }
  .blad-figuur { grid-area: foto; align-self: start; }
}
.vangnet { display: grid; gap: .8rem; border-top: 1px solid var(--lijn); padding-top: 1rem; }
.vangnet[hidden] { display: none; }
.veld textarea { min-height: 11rem; font-size: var(--t-klein); line-height: 1.4; }

/* De modeltabel past op de gsm: de vierde kolom komt erbij vanaf 520 px */
.modeltabel th, .modeltabel td { white-space: nowrap; }
@media (max-width: 519px) {
  .modeltabel th, .modeltabel td { padding: .65rem .5rem; }
  .modeltabel th:nth-child(4), .modeltabel td:nth-child(4) { display: none; }
}

/* De vier stappen op een lijn */
@media (min-width: 1060px) { .stappen li:nth-child(even) { margin-top: 0; } }

/* Sterren met een deel */
.sterren svg.deel { fill: url(#ster-deel); }

/* Links als lijst in plaats van drie gelijke kaartjes */
.linklijst { list-style: none; margin-top: 1.4rem; border-top: 1px solid var(--lijn); }
main .linklijst li a { display: grid; gap: .15rem; padding: 1rem 0; border-bottom: 1px solid var(--lijn); text-decoration: none; color: var(--diep); }
.linklijst strong { font-size: var(--t-h3); font-weight: 600; color: var(--water-donker); text-decoration: underline; text-underline-offset: .18em; letter-spacing: -.012em; }
.linklijst span { color: var(--arduin); }

/* Ronde 3 (12/11/2026, avond): bewijs in het eerste scherm, reviews, kleurkeuze, één prijsopbouw, blad zonder gat */

/* Eerste scherm: 900 baden en de score op Google, onder de knoppen en de status */
.held-bewijs { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; color: var(--arduin); max-width: 46ch; }
.held-bewijs strong { color: var(--diep); }
main .held-bewijs a { display: inline-flex; align-items: center; gap: .35rem; color: var(--arduin); }
.held-bewijs .ster svg { width: 18px; height: 18px; fill: #F5A800; }
@media (min-width: 900px) { .held-bewijs { margin-top: 1.25rem; padding-top: 1.1rem; max-width: none; } }

/* Reviews: één letterlijk citaat groot, daaronder drie kaartjes met wat vaak terugkomt */
.reviews { margin-top: clamp(3rem, 7vw, 5.5rem); }
.review-citaat { margin: 1.75rem 0 0; display: flex; gap: 1rem; align-items: flex-start; }
.review-citaat > svg.g { width: 36px; height: 36px; flex: none; margin-top: .35rem; }
.review-citaat blockquote { margin: 0; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); line-height: 1.2; font-weight: 500; letter-spacing: -.018em; text-wrap: balance; }
.review-citaat figcaption { margin-top: .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; color: var(--arduin); }
.review-citaat figcaption strong { color: var(--diep); font-weight: 600; }
.review-citaat .sterren, .review-kop .sterren { margin-left: 0; }
.review-themas { list-style: none; display: grid; gap: 1rem; margin-top: 2rem; }
.review-themas li { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.2rem 1.3rem 1.35rem; display: grid; gap: .55rem; align-content: start; }
.review-kop { display: flex; align-items: center; gap: .65rem; margin-bottom: .2rem; }
.review-kop svg.g { width: 26px; height: 26px; flex: none; }
.review-themas h3 { font-size: var(--t-groot); line-height: 1.2; }
.review-wie { color: var(--arduin); font-size: var(--t-klein); }
.review-voet { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.25rem; }
@media (min-width: 860px) { .review-themas { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .review-citaat > svg.g { width: 44px; height: 44px; } }

/* Bezoek: de regel voor wie van over de grens komt */
.grens { background: var(--ijs); border-radius: var(--r); padding: .9rem 1.1rem; max-width: 46ch; }
.grens strong { font-weight: 600; }

/* De rij op de gsm: vier baden naast elkaar, zodat de prijzen elkaar niet raken */
.rij { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
@media (max-width: 479px) {
  .rij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bad-prijs { letter-spacing: -.035em; }
}

/* Water met diepte: licht bij de trap, donkerder naar het eind */
.bad .vorm { fill: url(#lzw-water); stroke-width: 7; }
.bad:hover .vorm { fill: #E4F4FD; }
.bad[aria-pressed="true"] .vorm { fill: url(#lzw-zon); stroke: var(--zon); }
.bad .trede { stroke: #5FA9D2; }
.plan .buitenlijn .vorm { fill: none; stroke: var(--water-donker); stroke-width: 24; }
.plan .buitenlijn .trede { display: none; }
.plan .kuip .vorm { fill: url(#lzw-water); stroke: var(--kuip, #fff); stroke-width: 15; transition: stroke .2s; }
.plan .kuip .trede { stroke: var(--water); stroke-width: 3.5; opacity: .6; }

/* Kleur van de kuip: hun eigen kleurstalen als knoppen */
.blad-kleur { border: 0; margin: 0; padding: 0; min-width: 0; }
.blad-kleur legend { padding: 0; font-weight: 600; margin-bottom: .6rem; }
.kleurknoppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem .6rem; }
.kleurknop { display: grid; gap: .35rem; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: var(--t-klein); line-height: 1.2; color: var(--diep); min-height: 44px; }
.kleurknop .foto { display: block; aspect-ratio: 5 / 3; border-radius: var(--r-klein); border: 1px solid var(--lijn); }
.kleurknop > span:last-child { justify-self: start; padding: .1rem .45rem; margin-left: -.45rem; border-radius: 999px; }
.kleurknop:hover .foto { border-color: var(--water); }
.kleurknop[aria-pressed="true"] .foto { outline: 3px solid var(--zon); outline-offset: 2px; border-color: var(--diep); }
.kleurknop[aria-pressed="true"] > span:last-child { background: var(--zon); font-weight: 650; margin-left: 0; }
.kleur-uitkomst { min-height: 1.55em; }
.kleur-uitkomst strong { color: var(--diep); font-weight: 600; }
@media (min-width: 560px) and (max-width: 899px) { .kleurknoppen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Eén prijsopbouw met één totaal; de aanbieding is het totaal in de "nu"-kleur */
.prijstabel th span { display: block; font-size: var(--t-klein); font-weight: 400; color: var(--arduin); }
.prijstabel td.woord { font-weight: 500; }
.prijstabel tr.samen.nu th, .prijstabel tr.samen.nu td { background: var(--zon); padding: .85rem 1rem; font-size: var(--t-groot); }
.prijstabel tr.samen.nu th { border-radius: var(--r) 0 0 var(--r); }
.prijstabel tr.samen.nu td { border-radius: 0 var(--r) var(--r) 0; font-size: 1.7rem; letter-spacing: -.02em; vertical-align: middle; }
.prijstabel tr.samen.nu th span { color: var(--diep); }
.prijstabel tr:has(+ tr.samen.nu) th, .prijstabel tr:has(+ tr.samen.nu) td { border-bottom: 0; padding-bottom: 1rem; }
.vergelijk { margin-top: 1rem; background: var(--ijs); border-radius: var(--r); padding: .85rem 1.1rem; }
.tekenvlak .blad .vergelijk a { color: var(--water-donker); font-weight: 600; }

/* Het blad: op de gsm naam, tekening, kleur, prijs, de rest, tuinfoto. Op de laptop twee kolommen zonder gat. */
.blad-links, .blad-rechts { display: contents; }
.blad-kop { order: 1; } .blad-plan { order: 2; } .blad-kleur { order: 3; } .blad-prijs { order: 4; } .blad-rest { order: 5; } .blad-figuur { order: 6; }
@media (min-width: 900px) {
  .blad { grid-template-areas: none; grid-template-rows: none; align-items: start; }
  .blad-links, .blad-rechts { display: grid; gap: 1.5rem; min-width: 0; align-content: start; }
  .blad-kop, .blad-plan, .blad-kleur, .blad-prijs, .blad-rest, .blad-figuur { grid-area: auto; order: 0; }
}

/* Kop op 320 px: merk, belknop en menuknop liepen samen 34 px buiten het scherm */
@media (max-width: 360px) {
  .kop-binnen { gap: .5rem; }
  .merk { font-size: 1.1rem; gap: .45rem; }
  .menuknop { padding-inline: .75rem; }
  .menuknop svg { display: none; }
}

/* Na de testronde van ronde 3 */
/* 1. Tekstlinks in de donkere waterkleur: de gewone haalde op de paginagrond #F2F5F4 maar 4,46:1 */
a { color: var(--water-donker); }
a:hover { color: var(--diep); }
.knop:hover { color: #fff; }
.knop.tweede:hover { color: var(--water-donker); }
.tekenvlak a:not(.knop) { color: #9BD8FA; }
.tekenvlak .blad a:not(.knop) { color: var(--water-donker); }
.voet a, .voet a:hover { color: #fff; }
.voet-onder a, .voet-onder a:hover { color: #CFE3EE; }
.merk, .merk:hover, .kop-nav a, .kop-nav a:hover, .menu-paneel a:not(.knop), .menu-paneel a:not(.knop):hover { color: var(--diep); }
/* 2. Aankruisvakjes 24 px (waren 22) */
.vink input { width: 24px; height: 24px; }
/* 3. "Naar de inhoud" schuift van boven in beeld in plaats van links buiten het scherm te staan */
.overslaan { left: 8px; transform: translateY(-300%); }
.overslaan:focus { transform: none; }
/* 4. Modeltabel op 320 px: liep 32 px buiten het scherm */
@media (max-width: 360px) {
  .modeltabel th, .modeltabel td { padding: .6rem .3rem; }
  .modeltabel thead th { white-space: normal; }
  .modeltabel th:first-child, .modeltabel td:first-child { padding-left: .6rem; }
  .modeltabel th:last-child, .modeltabel td:last-child { padding-right: .6rem; }
}