/* Uit het voorbeeld (styles.css), gezet door tools/wp-thema.py; hier niet bewerken. */
@font-face {
  font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/libre-baskerville-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/libre-baskerville-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/public-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/public-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Huisstijl: donker vlak, licht papier, één accentkleur. Dunne lijnen, rechte hoeken, lichte schreefletter, veel lucht.
   De kleuren hieronder zet nieuw.py uit drie kleuren van de klant (--ink, --paper, --gold); de rest is daarvan afgeleid.
   Register: tellum.nl (goedgekeurd 9 oktober 2026). */
:root {
  --ink: #16305A;
  --ink-2: #193564;
  --ink-3: #142C52;
  --paper: #F4F6F9;
  --white: #FAFBFC;
  --text: #193766;
  --text-soft: #546787;
  --text-muted: #73839D;
  --line: #D3DBE7;
  --gold: #2F6BC4;
  --gold-text: #2F6BC4;
  --gold-bright: #729DDD;
  --ivory: #EAEEF4;
  --mist: #BCC4D1;
  --mist-dim: #97A3B6;
  --ink-line: rgba(114, 157, 221, 0.24);
  --foil: linear-gradient(105deg, #5186D5 0%, #729DDD 24%, #9BB9E7 50%, #729DDD 76%, #5186D5 100%);
  --on-gold: #FFFFFF;          /* tekst op een effen accentvlak (stijl stoer) */
  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --wrap: 1280px;              /* 14-10-2026: 1160 was te smal (Schorz: "meer uitvullen links en rechts") */
  --gutter: clamp(22px, 5vw, 48px);
  --kop-woord: 12;             /* breedte in em van "appartementengebouw" in de kopletter; zie "Telefoon: grote koppen" */
  --h3: 1.3rem;                /* kaartkop; de stijl kan hem zetten, de kaart begrenst hem (zie "Lange woorden") */
  --knop-ls: 0.12em;           /* letterafstand in knoppen; krapper bij een lang woord, zie "Lange woorden" */
  --knop-letter: 0.72;         /* breedte in em van een hoofdletter in een knop zonder letterafstand (gemeten 0,69) */
  --knop-binnen: 90px;         /* binnenrand links en rechts plus pijl */
  --mail-teken: 0.56;          /* breedte in em per teken van een mailadres in de tekstletter (gemeten: 0,50 gemiddeld, 0,56 hoogst) */
  --knop-rand: calc(2 * var(--gutter));
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--text);
  min-height: 100vh; display: flex; flex-direction: column;   /* korte pagina (404): voettekst onderaan, geen lege band eronder */
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
body > main { flex: 1 0 auto; }
a { color: var(--gold-text); transition: color .35s var(--ease), border-color .35s var(--ease); }
::selection { background: var(--gold-bright); color: var(--ink); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { overflow-wrap: break-word; }   /* alleen een woord dat zelf niet past, breekt af */
/* Geen hyphens: auto in koppen: op 320 px gaf dat in beide browsers "Installa-tiebedrijf" en "sani-tair" in woorden die heel
   op de volgende regel pasten (20-10-2026). Lange samenstellingen passen door de kleinere kaartmarge hieronder. */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; text-wrap: balance; }
h3 { font-family: var(--serif); font-weight: 400; font-size: var(--h3); line-height: 1.3; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 30px; height: 30px; flex: none; color: var(--gold); stroke-width: 1.3; }

.eyebrow {
  display: flex; align-items: center;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-text);
}
.hero .eyebrow::before, .contact .eyebrow::before { content: ""; width: 44px; height: 1px; background: currentColor; margin-right: 18px; }

/* Secties */
main { counter-reset: sec; }
.section { padding-block: clamp(44px, 6vw, 72px); background: var(--paper); }
.section--white { background: var(--white); }
.section--navy { background: var(--ink); color: var(--mist); }
.section--navy h2, .section--navy h3 { color: var(--ivory); }
.section--navy .eyebrow { color: var(--gold-bright); }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-bottom: clamp(20px, 3vw, 32px); }
.section-head .eyebrow::before {
  counter-increment: sec; content: counter(sec, decimal-leading-zero);
  font-family: var(--serif); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.06em;
  padding-right: 16px; margin-right: 16px; border-right: 1px solid currentColor; line-height: 1;
}
.section-head h2 { font-size: clamp(2rem, 4.1vw, 3.25rem); line-height: 1.12; }
.section-head p:not(.eyebrow) { color: var(--text-soft); font-size: 1.15rem; max-width: 56ch; }
.section--navy .section-head p:not(.eyebrow) { color: var(--mist); }

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 30px; border: 1px solid transparent; border-radius: 0;
  font-size: 1rem; font-weight: 600; letter-spacing: var(--knop-ls); text-transform: uppercase; text-decoration: none;
  max-width: 100%; text-align: center; text-wrap: balance;   /* geen nowrap: zie "Lange knopteksten" hieronder */
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn--primary::after { content: "\2192"; margin-left: 14px; letter-spacing: 0; transition: transform .45s var(--ease); }
.btn--primary:hover::after { transform: translateX(6px); }
.nav .btn::after { content: none; }
.btn--primary {
  background: var(--foil) 0 0 / 240% 100% border-box; color: var(--ink); border-color: transparent;
  transition: background-position .9s var(--ease), background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn--primary:hover { background-position: 100% 0; }
.btn--ghost { color: var(--ivory); border-color: rgba(255, 255, 255, 0.34); }
.btn--ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
/* Lange knopteksten ("Bekijk het assortiment", "Naar de startpagina") pasten op 320-375 px niet en rekten de pagina op;
   eerst alleen in paginas.css, op 20-10-2026 een tweede keer op de 404 van de one-pager, daarom hier in de basis. Een derde
   keer dezelfde dag (voorbeeldcatalogus: een knoptekst van ruim 20 tekens in hoofdletters liep op 375 px buiten beeld):
   nowrap is helemaal weg; een knop breekt nu alleen als hij niet past, in twee gelijke regels. Eén woord dat niet past:
   zie "Lange woorden" hieronder. */
.hero > .wrap { min-width: 0; }
@media (max-width: 420px) { .btn { padding-inline: 22px; } :root { --knop-ls: 0.08em; --knop-binnen: 74px; } }

/* Kopbalk */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--ink); border-bottom: 1px solid var(--ink-line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
.logo {
  display: inline-flex; align-items: center; gap: 14px; color: var(--ivory); text-decoration: none;
  font-family: var(--serif); font-weight: 400; font-size: 1.85rem; letter-spacing: 0.02em;
}
.logo svg { width: 44px; height: 44px; flex: none; }
.logo img { height: 80px; width: auto; max-width: 320px; flex: none; }  /* klantlogo: minstens 72 px hoog; 14-10-2026 was 56 px nog te klein */
/* Een lange naam breekt af als de ruimte opraakt, in twee gelijke regels; menu en knop krimpen niet mee. Met nowrap duwde
   "Installatiebedrijf Hendriksen-Oosterhuis" de knop buiten beeld: 40 px scrollen op 1280, 31 px in de voettekst op 375 (20-10-2026). */
.logo--long { font-size: 1.4rem; min-width: 0; line-height: 1.15; text-wrap: balance; }
.site-header .nav { flex: none; }
@media (max-width: 600px) { .logo { font-size: 1.65rem; gap: 12px; } .logo--long { font-size: 1.2rem; } .logo svg { width: 38px; height: 38px; } .logo img { height: 54px; max-width: 220px; } }
/* Lange woorden. Een woord kan niet afbreken. Eén woord van 19-22 tekens ("Installatietechniek", "kennismakingsgesprek",
   "Schoonmaakmaatschappij") liep op 20-10-2026 buiten zijn vak: de kopbalk op 375 px (voorbeeldcatalogus), de knop op 320 px en
   de contactkaart op 320 px en in twee kolommen op 900-1024 px (eigen meting). basis.py geeft logo, knop en naam met een woord
   van 10 tekens of meer de klasse woord--w<lengte>. Naam en logo krijgen dan een letter waarin dat woord past:
   ruimte / (lengte x tekenbreedte), met tekenbreedte --kop-woord / 19 plus marge voor brede letters. Een knop houdt 16 px
   (les.py: knoptekst minstens 16 px); daar wordt alleen de letterafstand krapper, tot 0. Past het woord ook dan niet
   (hoofdletters: ruim 15 tekens op 320 px in de contactkaart), dan breekt het in de knop af en meldt de controle het:
   knoptekst korter maken. Ruimte: de kaart of de logonaam is een container (100cqi); daarbuiten het scherm min de marges
   (--knop-rand); bij een knop ook binnenrand en pijl (--knop-binnen). */
.logo-naam { min-width: 0; }
.logo--woord { display: flex; flex: 1 1 auto; min-width: 0; }
.logo--woord .logo-naam { flex: 1 1 auto; container-type: inline-size; }
.logo--woord .logo-naam > span {
  display: block; overflow-wrap: break-word;
  font-size: min(1em, calc(100cqi / (var(--woord) * (var(--kop-woord) / 19 + 0.04))));
}
.contact-card, .card, .aside-kaart { container-type: inline-size; --knop-rand: 0px; }
/* Kaartkop: niet breder dan een woord van 19 tekens (of zijn eigen lengte) in de kaart toelaat. In drie kolommen op 960 px
   brak "appartementengebouw" in de lichte stijl midden in het woord (20-10-2026, meetronde 960 px); 4 % marge voor een
   zwaardere h3 dan de kop waarop --kop-woord gemeten is. */
.card h3 { font-size: min(var(--h3), calc(100cqi / (var(--kop-deler) * 1.04))); }
.btn[class*="woord--w"] {
  letter-spacing: clamp(0em, calc((100cqi - var(--knop-rand) - var(--knop-binnen)) / var(--woord) - var(--knop-letter) * 1rem), var(--knop-ls));
  overflow-wrap: anywhere;
}
.contact-card .name[class*="woord--w"] { font-size: min(1.3rem, calc(100cqi / (var(--woord) * (var(--kop-woord) / 19 + 0.04)))); }
.info .card-naam[class*="woord--w"] { font-size: min(1.15rem, calc(100cqi / (var(--woord) * (var(--kop-woord) / 19 + 0.04)))); }
.contact-card .name, .info .card-naam { overflow-wrap: break-word; }   /* pas boven 30 tekens, als de letter niet verder krimpt */
.woord--w10 { --woord: 10; } .woord--w11 { --woord: 11; } .woord--w12 { --woord: 12; } .woord--w13 { --woord: 13; }
.woord--w14 { --woord: 14; } .woord--w15 { --woord: 15; } .woord--w16 { --woord: 16; } .woord--w17 { --woord: 17; }
.woord--w18 { --woord: 18; } .woord--w19 { --woord: 19; } .woord--w20 { --woord: 20; } .woord--w21 { --woord: 21; }
.woord--w22 { --woord: 22; } .woord--w23 { --woord: 23; } .woord--w24 { --woord: 24; } .woord--w25 { --woord: 25; }
.woord--w26 { --woord: 26; } .woord--w27 { --woord: 27; } .woord--w28 { --woord: 28; } .woord--w29 { --woord: 29; }
.woord--w30 { --woord: 30; } .woord--w31 { --woord: 31; } .woord--w32 { --woord: 32; } .woord--w33 { --woord: 33; }
.woord--w34 { --woord: 34; } .woord--w35 { --woord: 35; } .woord--w36 { --woord: 36; } .woord--w37 { --woord: 37; }
.woord--w38 { --woord: 38; } .woord--w39 { --woord: 39; } .woord--w40 { --woord: 40; }   /* w31-w40 alleen voor mailadressen */
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav a:not(.btn) {
  color: var(--mist); text-decoration: none; white-space: nowrap;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav a:not(.btn):hover { color: var(--ivory); }
.nav a:not(.btn) { position: relative; padding-block: 8px; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-bright);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { padding: 12px 20px; background: transparent; color: var(--gold-bright); border-color: var(--gold-bright); }
.nav .btn:hover { background: var(--gold-bright); color: var(--ink); }
@media (max-width: 1140px) { .nav a:not(.btn) { display: none; } }
@media (max-width: 600px) { .nav .btn { display: none; } .site-header .wrap { min-height: 68px; } }

/* Opening */
.hero {
  background: var(--ink); color: var(--mist); padding-block: clamp(72px, 9vw, 128px);
  display: grid; align-items: center; min-height: min(calc(100svh - 89px), 820px);
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(48px, 7vw, 104px); align-items: center; }
.hero .wrap--one { grid-template-columns: minmax(0, 1fr); }
.hero-copy { display: flex; flex-direction: column; gap: 34px; max-width: 42rem; }
.hero .eyebrow { color: var(--gold-bright); }
.hero h1 { color: var(--ivory); font-size: clamp(2.3rem, 4.6vw, 3.25rem); line-height: 1.1; }
.hero h1 em { font-style: normal; color: var(--gold-bright); }
.hero-lead { font-size: clamp(1.125rem, 1.7vw, 1.3rem); line-height: 1.6; max-width: 40ch; color: var(--mist); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.hero-figure { margin: 0; position: relative; }
.hero-figure img { display: block; width: 100%; height: auto; box-shadow: 0 60px 100px -48px rgba(0, 0, 0, 0.8), 0 22px 40px -22px rgba(0, 0, 0, 0.55); }
.hero-figure::before { content: ""; position: absolute; inset: -12px; border: 1px solid var(--ink-line); pointer-events: none; }
.hero-figure figcaption { font-size: 0.8125rem; color: var(--mist-dim); margin-top: 30px; max-width: 34ch; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hero h1 { font-size: min(clamp(1.9rem, 8.4vw, 2.4rem), calc((100vw - 2 * var(--gutter)) / var(--kop-deler))); } }

/* Rijen: een lijst met dunne lijnen, geen dozen */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.row-item { display: flex; align-items: flex-start; gap: 28px; padding: 34px 4px; border-bottom: 1px solid var(--line); }
.row-item p { color: var(--text); font-size: 1.2rem; line-height: 1.5; max-width: 60ch; }
.row-item .icon { margin-top: 1px; }

/* Kaarten: één raster met gedeelde lijnen */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* minmax(0, 1fr): met 1fr bepaalde het langste woord van een kaartkop de breedte, 18 px scrollen op 320 px (20-10-2026) */
@media (max-width: 760px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; gap: 14px; background: var(--paper); padding: 46px 34px 48px; position: relative; }
@media (max-width: 360px) { .card { padding-inline: 24px; } }   /* "binnenschilderwerk" brak op 320 px midden in het woord af */
.card .icon { margin-bottom: 10px; }
.card p { color: var(--text-soft); font-size: 1rem; }
.section--white .card { background: var(--white); }
.card--accent, .section--white .card--accent { background: var(--ink); }
.card--accent h3 { color: var(--ivory); }
.card--accent p { color: var(--mist); }
.card--accent .icon { color: var(--gold-bright); }
.card { transition: translate .7s var(--ease), box-shadow .7s var(--ease); }
@media (hover: hover) {
  .card::before {
    content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease);
  }
  .card:hover::before { transform: scaleX(1); }
  .card:hover { translate: 0 -5px; box-shadow: 0 30px 44px -30px rgba(11, 23, 34, 0.38); }
  .card--accent:hover { box-shadow: 0 30px 44px -26px rgba(0, 0, 0, 0.6); }
}

/* Twee kolommen: kop links, lijst rechts */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 96px); align-items: start; }
.split .section-head { margin-bottom: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { display: flex; gap: 18px; align-items: flex-start; font-size: 1.1rem; padding-block: 26px; border-bottom: 1px solid var(--line); }
.checks .icon { width: 24px; height: 24px; margin-top: 3px; }

/* Stappen */
ol.steps { list-style: none; margin: 0; padding: 0; }
.step-num { font-family: var(--serif); font-size: 3rem; font-weight: 400; color: var(--gold); line-height: 1; margin-bottom: 14px; }
.card--accent .step-num { color: var(--gold-bright); }

/* Citaat of aantekening */
.note { margin-top: 40px; padding: 6px 0 6px 26px; border-left: 1px solid var(--gold); font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; color: var(--text); max-width: 46ch; }

/* Foto's: rustig raster, beeld vult het vak */
.photos { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photos figure { margin: 0; background: var(--white); }
.photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photos figcaption { padding: 16px 20px 18px; font-size: 0.875rem; color: var(--text-muted); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .photos { grid-template-columns: minmax(0, 1fr); } }

/* Contact */
.contact { background: var(--ink); color: var(--mist); padding-block: clamp(88px, 12vw, 160px); }
/* De kaart minstens 25rem: op 861-1100 px was hij 290-370 px breed en brak een knoptekst als "Plan een kennismakingsgesprek"
   midden in het woord (20-10-2026). */
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(min(100%, 25rem), 0.8fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
@media (max-width: 860px) { .contact .wrap { grid-template-columns: 1fr; } }
.contact-copy { display: flex; flex-direction: column; gap: 24px; }
.contact-copy .eyebrow { color: var(--gold-bright); }
.contact h2 { color: var(--ivory); font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.1; }
.contact-lead { font-size: 1.15rem; max-width: 44ch; }
.contact-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--ink-line); padding: 44px 40px; }
.contact-card .logo { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--ink-line); }
.contact-card .name { color: var(--ivory); font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; }
.contact-card .addr { color: var(--mist); font-size: 1rem; line-height: 1.6; margin-bottom: 6px; }
.contact-card a:not(.btn) { color: var(--gold-bright); text-decoration: none; font-size: 1.0625rem; overflow-wrap: anywhere; }
.contact-card a:not(.btn):hover { color: var(--ivory); }
/* Mailadres: in een kaart op één regel, met een kleinere letter als het moet, tot 13 px; daaronder breekt het na de @
   (basis.py zet daar een <wbr>). Een adres van 28 tekens of meer brak op 320 px midden in het woord (21-10-2026, 523 keer in
   de voorbeeldcatalogus). */
.contact-card .mail[class*="woord--w"], .info .card .mail[class*="woord--w"] {
  font-size: max(0.8125rem, min(1.0625rem, calc(100cqi / (var(--woord) * var(--mail-teken)))));
}
.contact-card .btn { margin-top: 22px; white-space: normal; text-align: center; }
@media (max-width: 420px) { .contact-card { padding-inline: 24px; } .contact-card .btn { padding-inline: 16px; } }

/* Voettekst */
.site-footer { background: var(--ink-3); color: var(--mist-dim); font-size: 0.8125rem; padding-block: 34px; border-top: 1px solid var(--ink-line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--mist); text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-footer .legal { line-height: 1.8; }
.site-footer .logo, .site-footer .logo:hover { color: var(--ivory); }
.site-footer .logo { flex-basis: 100%; margin-bottom: 10px; }

/* Tekstpagina's */
.page { padding-block: clamp(64px, 9vw, 120px); }
.page .wrap { max-width: 780px; }
.page h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); line-height: 1.12; margin-bottom: 14px; }
.page h2 { font-size: 1.4rem; margin-top: 48px; margin-bottom: 12px; padding-top: 28px; border-top: 1px solid var(--line); }

/* Telefoon: grote koppen nooit groter dan een woord van 19 letters ("appartementengebouw", "huiswerkbegeleiding") toelaat.
   Met een vaste 32 px brak zo'n woord op 375 px midden in het woord af. --kop-woord is de breedte van dat woord in em in de
   kopletter van de stijl; een kop met korte woorden houdt zo bijna zijn eigen maat (20-10-2026). Een kop met een langer woord
   ("Wat u van Schoonmaakmaatschappij Wageningen kunt verwachten", 22 tekens) krijgt van basis.py woord--w<lengte> en
   rekent met die lengte (--kop-deler). Zo'n kop is ook op een breed scherm te groot voor een halve kolom ("Gereedschapsspecialist"
   in .split op 960 en 1280 px): de kop is dan zelf de container en zijn tekst (span.kop-maat) krimpt in zijn geheel tot dat
   woord in de breedte past, met 4 % marge. */
h1, h2, h3 { --kop-deler: calc(var(--kop-woord) * max(19, var(--woord, 19)) / 19); }
h1[class*="woord--w"], h2[class*="woord--w"], h3[class*="woord--w"] { container-type: inline-size; }
.kop-maat { display: block; font-size: min(1em, calc(100cqi / (var(--kop-deler) * 1.04))); }
@media (max-width: 600px) {
  .section-head h2, .contact h2 { font-size: min(2rem, calc((100vw - 2 * var(--gutter)) / var(--kop-deler))); }
  .page h1 { font-size: min(2.1rem, calc((100vw - 2 * var(--gutter)) / var(--kop-deler))); }
}
/* Kaartkoppen op 320-360 px: de kaart heeft daar 24 px marge aan elke kant */
@media (max-width: 360px) { h3 { font-size: min(var(--h3), calc((100vw - 2 * var(--gutter) - 48px) / var(--kop-deler))); } }
.page p, .page li { color: var(--text-soft); overflow-wrap: break-word; }   /* een heel lang mailadres liep buiten de tekst */
.page p + p { margin-top: 12px; }
.page ul { padding-left: 1.2em; margin: 10px 0 0; }
.page .meta { color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.page .btn { margin-top: 32px; }

/* Beweging: één betekenisvolle animatie bij het openen, verder alleen zacht opkomen bij het scrollen waar de browser dat kan.
   Niets vervaagt, verdwijnt of schuift over knoppen heen. */
@keyframes opkomst { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rijzen { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes lijn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draad { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: opkomst 1.1s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .14s; }
  .hero-copy > :nth-child(3) { animation-delay: .3s; }
  .hero-copy > :nth-child(4) { animation-delay: .46s; }
  .hero .eyebrow::before { transform-origin: left; animation: lijn 1.4s var(--ease) .3s both; }
  .hero-figure { animation: opkomst 1.3s var(--ease) .35s both; }
  @supports (animation-timeline: view()) {
    .section .section-head, .rows .row-item, .checks li, .section .grid, .photos, .note, .contact-copy, .contact-card {
      animation: rijzen cubic-bezier(.2, .7, .3, 1) both; animation-timeline: view(); animation-range: cover 0% cover 260px;
    }
    .section-head::before {
      content: ""; width: 1px; height: clamp(32px, 4vw, 48px); margin-bottom: 2px; background: var(--gold);
      transform-origin: top; animation: draad var(--ease) both; animation-timeline: view(); animation-range: cover 0 cover 360px;
    }
    .section--navy .section-head::before { background: var(--gold-bright); }
    .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold-bright);
      transform-origin: left; animation: lijn linear both; animation-timeline: scroll(root);
    }
  }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Hulpklassen */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--gold-bright); color: var(--ink); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }
.section-foot { margin-top: 30px; color: var(--text-soft); font-size: 1rem; max-width: 70ch; }
.nobr { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------------------------
   Sites met meerdere pagina's (winkel, bedrijf): menu op de telefoon, kruimelpad, paginakop, lopende tekst.
   Toegevoegd door nieuw.py --soort winkel|bedrijf (20-10-2026).
   --------------------------------------------------------------------------------------------- */
.site-header .nav { margin-left: auto; }
.nav a[aria-current="page"] { color: var(--ivory); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.menu { display: none; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 16px; border: 1px solid var(--ink-line); color: var(--ivory);
  font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::before {
  content: ""; width: 18px; height: 11px; border-block: 1px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}
.menu > summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.menu[open] > summary { border-color: var(--gold-bright); color: var(--gold-bright); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 1px solid var(--ink-line); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.6); }
.menu-panel .wrap { display: flex; flex-direction: column; padding-block: 6px 28px;
  align-items: stretch; justify-content: flex-start; gap: 0; min-height: 0; }   /* niet de regels van .site-header .wrap (gecentreerd) */
.menu-panel a:not(.btn) { color: var(--ivory); text-decoration: none; font-family: var(--serif); font-size: 1.25rem; padding-block: 15px; border-bottom: 1px solid var(--ink-line); }
.menu-panel a[aria-current="page"] { color: var(--gold-bright); }
.menu-panel .btn { margin-top: 24px; align-self: flex-start; white-space: normal; }
@media (max-width: 1140px) { .menu { display: block; } }
/* Dicht menu: paneel helemaal weg. Anders telde de knop erin mee voor de paginabreedte: 12 px scrollen op 768 px (20-10-2026). */
.menu:not([open]) > .menu-panel { display: none; }
/* Telefoon: in de kopbalk alleen logo en menuknop. De lege .nav (knop is daar verborgen) kostte een tussenruimte en een
   lange naam duwde de menuknop buiten beeld: 19 px horizontaal scrollen op 375 px (20-10-2026). */
@media (max-width: 600px) {
  .site-header .nav { display: none; }
  .site-header .wrap { gap: 14px; padding-block: 10px; }   /* een naam over drie regels raakte de rand */
  .site-header .logo { min-width: 0; white-space: normal; line-height: 1.15; }
  .menu > summary { padding: 10px 12px; gap: 10px; font-size: 0.875rem; letter-spacing: 0.1em; }
}
/* Smalle telefoons (320 px): menuknop alleen het pictogram (het woord blijft voor schermlezers) en een kleinere lange naam;
   "Uitvaartzorg Hoogeveense Vaart" liep over de menuknop heen (20-10-2026). */
@media (max-width: 360px) {
  .menu > summary { font-size: 0; gap: 0; padding: 12px; }
  .site-header .logo--long { font-size: 1.05rem; }
}

.btn--line { color: var(--text); border-color: var(--line); background: transparent; }
.btn--line:hover { border-color: var(--gold); color: var(--gold-text); }
.section-foot .btn { margin-top: 6px; }

/* Kruimelpad */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.875rem; color: var(--mist-dim); }
.crumbs a { color: var(--mist); text-decoration: none; }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs [aria-current] { color: var(--ivory); }
.crumbs--licht { color: var(--text-muted); margin-bottom: clamp(22px, 3vw, 34px); }
.crumbs--licht a { color: var(--text-soft); }
.crumbs--licht a:hover { color: var(--gold-text); }
.crumbs--licht [aria-current] { color: var(--text); }

/* Paginakop: het donkere vlak van de opening, maar compact */
.page-head { background: var(--ink); color: var(--mist); padding-block: clamp(34px, 5vw, 56px) clamp(40px, 6vw, 68px); }
.page-head .wrap { display: flex; flex-direction: column; gap: 16px; }
.page-head .crumbs { margin-bottom: 8px; }
.page-head .eyebrow { color: var(--gold-bright); }
.page-head h1 { color: var(--ivory); font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.12; max-width: 26ch; }
@media (max-width: 600px) { .page-head h1 { font-size: min(2rem, calc((100vw - 2 * var(--gutter)) / var(--kop-deler))); } }   /* zie --kop-woord in de basis */
.page-head .lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); max-width: 62ch; }

/* Lopende tekst (ook HTML van de klant) */
.prose { max-width: 68ch; color: var(--text-soft); font-size: 1.0625rem; }
.prose > * + * { margin-top: 14px; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; color: var(--text); }
.prose h3, .prose h4 { font-size: 1.2rem; color: var(--text); margin-top: 28px; }
.prose ul, .prose ol { padding-left: 1.2em; margin-bottom: 0; }
.prose li + li { margin-top: 6px; }
.prose strong, .prose b { color: var(--text); font-weight: 600; }

/* Kenmerkentabel */
.specs { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); font-size: 1rem; }
.specs th, .specs td { text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--line); }
.specs th { width: 42%; padding-right: 20px; font-weight: 500; color: var(--text-muted); }
.specs td { color: var(--text); overflow-wrap: anywhere; hyphens: none; }
/* In een smalle kaart of op de telefoon breekt een lange waarde op de lettergreep ("master rechts-geleerdheid" in een
   vacaturekaart op 320 px, 21-10-2026); basis.py zet de afbreekpunten, zie "Lange woorden in smalle kaarten" in winkel.css */
@container (max-width: 360px) { .specs td { hyphens: manual; } }
@media (max-width: 480px) { .specs td { hyphens: manual; } }
.specs--kort th { width: auto; }

/* Informatiekaarten (contactpagina) */
.info .card { gap: 10px; }
.info .card h2 { font-size: min(1.3rem, calc(100cqi / (var(--kop-deler) * 1.04))); line-height: 1.3; margin-bottom: 4px; }   /* zie "Kaartkop" in de basis */
.info .card p { color: var(--text-soft); }
.info .card-naam { color: var(--text); font-family: var(--serif); font-size: 1.15rem; }
.info .card a:not(.btn) { text-decoration: none; overflow-wrap: anywhere; }
.info .card .btn { margin-top: 12px; white-space: normal; text-align: center; }
@media (max-width: 420px) { .info .card .btn { padding-inline: 20px; } }   /* "Neem contact op" bleef op 375 px niet op één regel */
.info .card .specs { margin-top: 4px; }
.info > .card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.info > .card:last-child:nth-child(3n + 2) { grid-column: span 2; }
.grid--2.info > .card:last-child { grid-column: auto; }
@media (max-width: 760px) { .info > .card:last-child:nth-child(n) { grid-column: auto; } }
/* Drie infokaarten naast elkaar waren op 768-960 px 230-290 px breed: e-mailadressen braken en in een knop als "Vraag een
   vrijblijvende offerte aan" brak zelfs "offerte" (20-10-2026). Tot 1024 px twee kolommen, een oneven laatste kaart over de hele breedte. */
@media (min-width: 761px) and (max-width: 1024px) {
  .grid--3.info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3.info > .card:last-child:nth-child(n) { grid-column: auto; }
  .grid--3.info > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}   /* :nth-child(n): even zwaar als de regels hierboven, anders bleef de kaart op de telefoon over twee kolommen lopen */
@media (hover: hover) { .info .card:hover { translate: none; box-shadow: none; } }

/* Een kaart die als geheel een link is */
.card--link { color: inherit; text-decoration: none; }
.card--link h3 { color: var(--text); transition: color .35s var(--ease); }
.card--link:hover h3 { color: var(--gold-text); }
.card-meer { margin-top: auto; padding-top: 10px; color: var(--gold-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.card-meer::after { content: "\2192"; margin-left: 10px; letter-spacing: 0; }

/* Rasters met een wisselend aantal kaarten (diensten, projecten): de lijnen zitten aan de kaarten zelf in plaats van in de
   achtergrond van het raster, zodat een onvolledige laatste rij geen grijs vlak geeft (20-10-2026: vier projecten in drie
   kolommen). Categorieën en producten doen hetzelfde in winkel.css, dat na dit bestand komt. */
.grid { gap: 1px; padding: 1px; background: none; border: 0; }
.grid > * { outline: 1px solid var(--line); }   /* omlijning valt in de tussenruimte; een losse rand van het raster bleef boven een halve rij hangen */

/* ---------------------------------------------------------------------------------------------
   Winkel: voordelenbalk, categorieën, productraster, assortiment met categorieënlijst, productpagina.
   --------------------------------------------------------------------------------------------- */
:root { --foto-bg: #FFFFFF; }

.hero--winkel { min-height: 0; padding-block: clamp(56px, 7vw, 96px); }

.usp { background: var(--white); border-bottom: 1px solid var(--line); }
.usp .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.usp-item { display: flex; align-items: center; gap: 14px; padding: 22px 0; font-size: 1rem; color: var(--text); }
.usp-item + .usp-item { border-left: 1px solid var(--line); padding-left: clamp(18px, 3vw, 32px); }
.usp .icon { width: 24px; height: 24px; }
@media (max-width: 760px) {
  .usp .wrap { grid-template-columns: 1fr; }
  .usp-item { padding: 14px 0; }
  .usp-item + .usp-item { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* Categorieën en producten: één raster met gedeelde lijnen, zoals de kaarten. De lijnen zitten aan de kaarten, niet in de
   achtergrond van het raster: anders wordt een onvolledige laatste rij een gekleurd vlak (20-10-2026, 14 producten in 3 kolommen). */
.cats, .products { list-style: none; margin: 0; padding: 1px; display: grid; gap: 1px; }
.cats > li, .products > li { outline: 1px solid var(--line); }   /* valt in de tussenruimte: alleen echte kaarten krijgen een lijn */
.cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shop-lijst .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .products, .shop-lijst .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .products, .shop-lijst .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Het categorieënraster voegt zich naar het aantal (winkel.py, cat_kolommen): drie in drie kolommen, zes in drie, zeven in vier
   met de laatste kaart over twee. Op de telefoon (twee kolommen) loopt een oneven laatste kaart over de volle breedte. Een brede
   kaart houdt de hoogte van de rij, want zijn foto is twee keer zo breed (--cat-breed). Met vaste vier kolommen bleef rechts een
   leeg vak en op de telefoon één kaart los (21-10-2026, zeven voorbeelden in de catalogus). Uitgelicht is een veelvoud van vier
   en blijft tot de telefoon in vier kolommen; met minder dan vier producten zoveel kolommen als producten. */
@media (min-width: 961px) {
  .cats--k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats--k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cats--k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cats--k3 > li:last-child:nth-child(3n + 2), .cats--k4 > li:last-child:nth-child(4n + 3) { grid-column: span 2; --cat-breed: 8; }
}
@media (max-width: 960px) { .cats > li:last-child:nth-child(odd) { grid-column: 1 / -1; --cat-breed: 8; } }
.products--uitgelicht.products--k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.products--uitgelicht.products--k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 761px) { .products--uitgelicht.products--k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .products--uitgelicht.products--k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Verwante producten: drie in twee kolommen liet op de telefoon één kaart alleen op de tweede rij; daar alleen de eerste twee
   (21-10-2026, dutchmilitaria) */
@media (max-width: 760px) { .products--verwant.products--k3 > li:nth-child(3) { display: none; } }
.cats li, .products li { display: flex; }

.cat, .product { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--white); color: var(--text); text-decoration: none; }
.cat-foto, .product-foto { display: grid; place-items: center; background: var(--foto-bg); overflow: hidden; }
.cat-foto { aspect-ratio: var(--cat-breed, 4) / 3; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-foto { aspect-ratio: 1 / 1; padding: clamp(10px, 1.6vw, 22px); }
.product-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-foto .icon, .product-foto .icon { width: 40px; height: 40px; color: var(--line); }
.cat-naam { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; padding: 18px 22px 2px; }
.cat-aantal { color: var(--text-muted); font-size: 0.9rem; padding: 0 22px 20px; }
.product-tekst { display: flex; flex-direction: column; gap: 6px; padding: 16px clamp(14px, 1.6vw, 22px) 20px; border-top: 1px solid var(--line); flex: 1; }
.product-cat { color: var(--gold-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.product-naam { font-family: var(--serif); font-size: 1.06rem; line-height: 1.35; overflow-wrap: anywhere; }
.product-prijs { margin-top: auto; padding-top: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.product-prijs del, .pdp-prijs del { color: var(--text-muted); font-weight: 400; margin-right: 8px; }
.product-voorraad { color: var(--text-muted); font-size: 0.875rem; }
@media (max-width: 420px) { .product-cat { letter-spacing: 0.08em; } .product-naam { font-size: 1rem; } .cat-naam { font-size: 1.08rem; padding-inline: 16px; } .cat-aantal { padding-inline: 16px; } }
/* Lange woorden in smalle kaarten. In twee kolommen is de tekst in een kaart op de telefoon 99-136 px breed: "Rundergehakt,",
   "Seizoensboeket" en "Kinderboeken" braken midden in het woord en het label in hoofdletters ("WANDELSCHOENEN") liep buiten
   de kaart (21-10-2026, voorbeeldcatalogus, WebKit 320 px). basis.py zet in woorden van 10 letters of meer zachte
   afbreekstreepjes op de lettergrepen; die tellen alleen in een smalle kaart, zodat een woord in een brede kaart heel naar de
   volgende regel gaat. Het label staat op de telefoon (kaart tot 200 px) in gewone letters; op een tablet (drie kolommen,
   ca. 230 px) passen de hoofdletters nog. */
.products > li, .cats > li { container-type: inline-size; }
.product-naam, .cat-naam, .product-cat { hyphens: none; }
@container (max-width: 240px) { .product-naam, .cat-naam, .product-cat { hyphens: manual; } }
@container (max-width: 200px) { .product-cat { text-transform: none; letter-spacing: 0.02em; } }
.cat .cat-naam, .product .product-naam { transition: color .35s var(--ease); }
.cat:hover .cat-naam, .product:hover .product-naam { color: var(--gold-text); }
@media (hover: hover) {
  .cat::before, .product::before {
    content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px; z-index: 1; background: var(--gold);
    transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease);
  }
  .cat:hover::before, .product:hover::before { transform: scaleX(1); }
}

/* Assortiment: categorieënlijst naast het raster; op de telefoon erboven, als woorden die doorlopen */
.shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.shop-nav { position: sticky; top: 112px; }
.shop-nav h2 { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; }
.shop-nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.shop-nav a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 1rem; line-height: 1.4; }
.shop-nav a span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.shop-nav a:hover, .shop-nav a[aria-current="page"] { color: var(--gold-text); }
.shop-nav a[aria-current="page"] { font-weight: 600; }
.shop-telling { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 14px; }
@media (max-width: 900px) {
  .shop { grid-template-columns: 1fr; }
  .shop-nav { position: static; }
  .shop-nav ul { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .shop-nav a { border: 1px solid var(--line); padding: 8px 14px; gap: 10px; }
}

/* Productpagina */
.pdp-sectie { padding-top: clamp(24px, 3vw, 40px); }
.pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery-main { margin: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--foto-bg); border: 1px solid var(--line); padding: clamp(14px, 3vw, 36px); }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-leeg .icon { width: 56px; height: 56px; color: var(--line); }
.gallery-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.gallery-thumbs a { display: block; aspect-ratio: 1 / 1; background: var(--foto-bg); border: 1px solid var(--line); padding: 4px; }
.gallery-thumbs a[aria-current] { border-color: var(--gold); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp-info { display: flex; flex-direction: column; gap: 18px; }
.pdp-info h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; overflow-wrap: anywhere; }
.pdp-prijs { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2rem); color: var(--text); font-variant-numeric: tabular-nums; }
.pdp-prijs span { font-family: var(--sans); font-size: 0.875rem; color: var(--text-muted); margin-left: 12px; }
.pdp-voorraad { display: flex; align-items: center; gap: 10px; color: var(--text); }
.pdp-voorraad .icon { width: 22px; height: 22px; }
.pdp-voorraad--nee { color: var(--text-soft); }
.pdp-kort { font-size: 1.0625rem; }
.bestel label { display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 8px; }
.bestel-rij { display: flex; flex-wrap: wrap; gap: 10px; }
.bestel input {
  width: 92px; min-height: 60px; padding: 0 14px; border: 1px solid var(--line); border-radius: 0; background: var(--white);
  color: var(--text); font: inherit; font-size: 1.1rem; font-variant-numeric: tabular-nums;
}
.bestel input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
/* Basis auto: past de knoptekst niet naast het aantal, dan gaat de knop op een eigen regel over de hele breedte. Met 220 px
   brak "In winkelmand" in hoofdletters op 375 px over twee regels (20-10-2026, voorbeeldcatalogus). */
.bestel .btn { flex: 1 1 auto; cursor: pointer; font-family: inherit; }
.bestel-melding { margin-top: 12px; padding: 14px 16px; border-left: 2px solid var(--gold); background: var(--paper); color: var(--text); font-size: 1rem; }
.pdp-info > .btn { align-self: flex-start; white-space: normal; text-align: center; }
.pdp-usp { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pdp-usp li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--text-soft); }
.pdp-usp .icon { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------------------------------
   Opbouw (21-10-2026): de vormen die soorten/opbouw.py per site kiest voor kopbalk, sectiekoppen, feiten, diensten,
   werkwijze, contact, voettekst en (winkel) voordelen, categorieën, uitgelicht en over ons. Elke vorm gebruikt alleen de
   kleuren en lijnen van de basis, zodat ze onder alle vier stijlen en zes indelingen werkt; waar een vlak licht of donker
   kan zijn (contact, voet, de donkere band), nemen tekst en lijnen de kleur van dat vlak over (currentColor).
   Komt na de opmaak van de soort en vóór die van de stijl en de indeling.
   --------------------------------------------------------------------------------------------- */
:is(.f-kolommen, .f-band, .d-open, .s-tijdlijn, .s-band, .c-kolommen, .v-kolommen, .checks--rij).k1 { --k: 1; }
:is(.f-kolommen, .f-band, .d-open, .s-tijdlijn, .s-band, .c-kolommen, .v-kolommen, .checks--rij).k2 { --k: 2; }
:is(.f-kolommen, .f-band, .d-open, .s-tijdlijn, .s-band, .c-kolommen, .v-kolommen, .checks--rij).k3 { --k: 3; }
:is(.f-kolommen, .f-band, .d-open, .s-tijdlijn, .s-band, .c-kolommen, .v-kolommen, .checks--rij).k4 { --k: 4; }
.d-num { font-family: var(--serif); font-weight: 400; color: var(--gold-text); font-variant-numeric: tabular-nums; line-height: 1; }
.d-pijl { color: var(--gold-text); justify-self: end; transition: translate .45s var(--ease); }
a:hover > .d-pijl { translate: 6px 0; }
.d-meer {
  display: inline-block; margin-top: 12px; color: var(--gold-text); text-decoration: none;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.d-meer::after { content: "\2192"; margin-left: 10px; letter-spacing: 0; }
.d-meer:hover { color: var(--text); }

/* Kopbalk "info": smalle regel met plaats, openingstijd en mail boven de kopbalk (vanaf 761 px) */
.kop-info { background: var(--white); color: var(--text-soft); border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.kop-info .wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 28px; min-height: 40px; }
.kop-info span { display: inline-flex; align-items: center; gap: 8px; }
.kop-info .icon { width: 16px; height: 16px; color: var(--gold-text); }
.kop-info a { color: inherit; text-decoration: none; }
.kop-info a:hover { color: var(--gold-text); }
@media (max-width: 760px) { .kop-info { display: none; } }

/* Kopbalk "midden": naam in het midden, het menu eronder (vanaf 1141 px; daaronder de gewone balk met menuknop) */
@media (min-width: 1141px) {
  html:has(.site-header--midden) { scroll-padding-top: 150px; }
  .site-header--midden .wrap { flex-direction: column; justify-content: center; gap: 8px; min-height: 0; padding-top: 20px; }
  .site-header--midden .logo { flex: none; }
  .site-header--midden .logo--woord .logo-naam { flex: none; container-type: normal; }
  .site-header--midden .nav { align-self: stretch; justify-content: center; padding-block: 8px 10px; border-top: 1px solid var(--ink-line); }
}

/* Sectiekoppen. nummer: de basis (01 | BOVENREGEL). kaal: geen bovenregel, een lijn boven de kop. lijn: een korte lijn voor
   de bovenregel en een lijn onder de kop. midden: kop in het midden. zij: kop links naast de inhoud (vanaf 1000 px). */
.koppen-kaal .section-head > .eyebrow { display: none; }
.koppen-kaal .section-head { max-width: none; padding-top: 22px; border-top: 1px solid currentColor; }
.koppen-kaal .section-head > :is(h2, p) { max-width: 820px; }
.koppen-lijn .section-head .eyebrow::before {
  counter-increment: none; content: ""; width: 44px; height: 1px; background: currentColor;
  padding: 0; margin-right: 18px; border: 0;
}
.koppen-lijn .section-head { max-width: none; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.koppen-lijn .section--navy .section-head { border-bottom-color: var(--ink-line); }
.koppen-lijn .section-head > :is(h2, p) { max-width: 820px; }
.koppen-midden .opb .section-head, .koppen-midden .opb .section-foot { margin-inline: auto; align-items: center; text-align: center; }
.koppen-midden .opb .section-head p:not(.eyebrow) { margin-inline: auto; }
/* Kaarten en foto's (klasse breed) houden de volle breedte; in de smalle kolom naast de kop worden ze te krap. */
@media (min-width: 1000px) {
  .koppen-zij .opb:not(.breed) > .wrap:has(> .section-head) {
    display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); column-gap: clamp(40px, 6vw, 96px); align-items: start;
  }
  .koppen-zij .opb:not(.breed) > .wrap > .section-head { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 120px; margin-bottom: 0; }
  .koppen-zij .opb:not(.breed) > .wrap > :not(.section-head) { grid-column: 2; min-width: 0; }
  .koppen-zij .opb .section-head h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
}

/* Feiten. strook: drie korte regels direct onder de opening. kolommen: naast elkaar met het pictogram erboven.
   band: in de donkere band, als zinnen in de schreefletter. */
.f-strook { background: var(--white); border-bottom: 1px solid var(--line); }
.f-strook ul { list-style: none; margin-block: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.f-strook li { display: flex; align-items: center; gap: 14px; padding: 22px 0; font-size: 1rem; color: var(--text); }
.f-strook li + li { border-left: 1px solid var(--line); padding-left: clamp(18px, 3vw, 32px); }
.f-strook .icon { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .f-strook ul { grid-auto-flow: row; }
  .f-strook li { padding: 14px 0; }
  .f-strook li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}
.f-kolommen, .f-band { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 32px clamp(28px, 4vw, 56px); }
.f-kolommen li { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; border-top: 1px solid var(--line); }
.f-kolommen p { font-size: 1.15rem; line-height: 1.5; color: var(--text); }
.f-band li { padding-top: 24px; border-top: 1px solid var(--gold); }
.f-band p { font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.45; color: inherit; }
@media (max-width: 900px) { .f-kolommen, .f-band { grid-template-columns: minmax(0, 1fr); } }

/* Diensten. lijst: twee kolommen rijen met pictogram. index: genummerde rijen over de hele breedte met een pijl. zigzag: om
   en om een vlak (of foto) en de tekst. uitgelicht: de eerste dienst groot in een donker vlak, de rest als lijst ernaast.
   open: kolommen zonder kaders, alleen een lijn erboven. */
.d-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--line); }
.d-lijst li, .d-uit-rest li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.d-lijst h3, .d-uit-rest h3 { margin-bottom: 8px; }
.d-lijst p, .d-uit-rest p, .d-open p { color: var(--text-soft); font-size: 1rem; }
@media (max-width: 860px) { .d-lijst { grid-template-columns: minmax(0, 1fr); } }

.d-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.d-index li > :is(a, div) {
  display: grid; grid-template-columns: 3.5rem minmax(0, 0.9fr) minmax(0, 1.1fr) 2rem; column-gap: clamp(16px, 3vw, 48px);
  align-items: baseline; padding: clamp(24px, 3vw, 34px) 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none;
}
.d-index .d-num { font-size: 1.1rem; }
.d-index h3 { --h3: 1.5rem; transition: color .35s var(--ease); }
.d-index p { color: var(--text-soft); }
.d-index a:hover h3 { color: var(--gold-text); }
@media (max-width: 760px) {
  .d-index li > :is(a, div) { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; row-gap: 8px; }
  .d-index h3 { --h3: 1.3rem; }
  .d-index p { grid-column: 2; }
  .d-index .d-pijl { grid-column: 3; grid-row: 1; }
}

.d-zigzag { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.zz { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.zz:nth-child(even) > :first-child { order: 2; }
.zz-kop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; row-gap: 22px;
  padding: clamp(28px, 4vw, 44px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg, 0);
}
.section--white .zz-kop { background: var(--paper); }
.zz-kop .d-num { font-size: 2.4rem; color: var(--gold); }
.zz-kop h3 { grid-column: 1 / -1; --h3: clamp(1.35rem, 2vw, 1.7rem); }
.zz-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.zz-tekst p { color: var(--text-soft); font-size: 1.1rem; max-width: 56ch; }
.zz-tekst .btn { margin-top: 10px; }
.zz--foto .zz-tekst h3 { --h3: clamp(1.4rem, 2.2vw, 1.8rem); }
.zz-foto { margin: 0; }
.zz-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg, 0); }
@media (max-width: 760px) {
  .zz { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .zz:nth-child(even) > :first-child { order: 0; }
}

.d-uit { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.d-uit-hoofd { --h3: 1.7rem; padding: clamp(36px, 4vw, 52px); gap: 16px; }
.d-uit-hoofd p { font-size: 1.1rem; }
.d-uit-hoofd .btn { align-self: flex-start; margin-top: 18px; }
.d-uit-rest { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .d-uit { grid-template-columns: minmax(0, 1fr); } }

.d-open { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 48px clamp(28px, 3.5vw, 48px); }
.d-open li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.d-open .icon { margin-bottom: 6px; }
@media (max-width: 1100px) { .d-open.k4 { --k: 2; } }
@media (max-width: 960px) { .d-open.k3 { --k: 2; } }
@media (max-width: 600px) { .d-open { --k: 1 !important; } }

/* Werkwijze. tijdlijn: stappen naast elkaar op één lijn met een punt (op de telefoon onder elkaar). verticaal: onder elkaar
   met het nummer links en een lijn naar de volgende stap. band: in de donkere band, kolommen met lijnen ertussen. */
.s-tijdlijn, .s-verticaal, .s-band { list-style: none; margin: 0; padding: 0; }
.s-tijdlijn { position: relative; display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 44px); row-gap: 40px; }
.s-tijdlijn::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--line); }
.s-tijdlijn li { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 36px; }
.s-tijdlijn li::before { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.s-tijdlijn .step-num, .s-verticaal .step-num { margin: 0; }
.s-tijdlijn .step-num { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; color: var(--gold-text); }
.s-tijdlijn p, .s-verticaal p { color: var(--text-soft); }
@media (max-width: 960px) { .s-tijdlijn.k4 { --k: 2; } .s-tijdlijn.k4::before { display: none; } .s-tijdlijn.k4 li { border-top: 1px solid var(--line); } .s-tijdlijn.k4 li::before { top: -5px; } }
@media (max-width: 760px) {
  .s-tijdlijn { --k: 1 !important; padding-left: 30px; row-gap: 30px; }
  .s-tijdlijn::before { display: block !important; top: 6px; bottom: 6px; left: 4px; right: auto; width: 1px; height: auto; }
  .s-tijdlijn li { padding-top: 0; border-top: 0 !important; }
  .s-tijdlijn li::before { top: 6px !important; left: -30px; }
}
.s-verticaal { max-width: 860px; }
.s-verticaal li { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 24px; row-gap: 8px; padding-bottom: 40px; }
.s-verticaal li > .step-num { grid-row: span 2; font-size: 2.4rem; }
.s-verticaal li > :not(.step-num) { grid-column: 2; }
.s-verticaal li:not(:last-child)::after { content: ""; position: absolute; left: 1.2rem; top: 3.4rem; bottom: 12px; width: 1px; background: var(--line); }
.s-verticaal li:last-child { padding-bottom: 0; }
@media (max-width: 600px) { .s-verticaal li { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 16px; } .s-verticaal li > .step-num { font-size: 1.8rem; } .s-verticaal li:not(:last-child)::after { left: 0.9rem; top: 2.8rem; } }
.s-band { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); }
.s-band li { display: flex; flex-direction: column; gap: 12px; padding: 6px clamp(18px, 2.4vw, 32px); border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.s-band li:first-child { border-left: 0; padding-left: 0; }
.s-band .step-num { font-size: 2.6rem; color: var(--gold); margin: 0; }
@media (max-width: 1024px) {
  .s-band.k4 { --k: 2; row-gap: 28px; }
  .s-band.k4 li { border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
}
@media (max-width: 760px) {
  .s-band { --k: 1 !important; }
  .s-band li { border-left: 0; padding: 22px 0; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
  .s-band li:first-child { border-top: 0; padding-top: 0; }
}

/* Werkwijze en feiten naast elkaar in één sectie */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vw, 104px); align-items: start; }
.duo-deel { min-width: 0; }
@media (max-width: 960px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* Contact. band: alles in het midden, het mailadres groot. kolommen: de tekst boven, daaronder e-mail, waar en
   openingstijden naast elkaar. De kleuren komen van het contactvlak (donker of licht, stijl en indeling). */
.contact--band .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 30px; max-width: calc(880px + 2 * var(--gutter)); }
.contact--band .contact-copy { align-items: center; }
.contact--band .contact-lead { margin-inline: auto; }
.contact-mail { font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.75rem); line-height: 1.4; overflow-wrap: anywhere; }
.contact-mail a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold); }
.contact-mail a:hover { color: var(--gold); }
.contact-of { font-family: var(--sans); font-size: 1rem; padding-inline: 8px; }
.contact--kolommen .wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); }
.contact--kolommen .btn { justify-self: start; }
.indeling-etalage .contact--kolommen .btn { justify-self: center; }
.contact--kolommen .c-kolommen { justify-self: stretch; }
.c-kolommen { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent); text-align: left; }
.c-kolom { display: flex; flex-direction: column; gap: 10px; padding: 28px clamp(16px, 2.4vw, 32px) 4px 0; min-width: 0; }
.c-kolom + .c-kolom { border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent); padding-left: clamp(20px, 3vw, 36px); }
.c-kolom .icon { width: 24px; height: 24px; }
.c-kolom h3 { --h3: 1.15rem; color: inherit; }
.c-kolom a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; overflow-wrap: anywhere; }
.specs--kort { border-collapse: collapse; font-size: 0.95rem; }
.specs--kort th { text-align: left; font-weight: 500; padding: 2px 18px 2px 0; vertical-align: top; }
.specs--kort td { padding: 2px 0; }
/* In het contact volgt de tabel de kleur van het blok (donker of licht), niet die van de pagina. */
.contact .specs--kort :is(th, td) { color: inherit; border-bottom-color: color-mix(in srgb, currentColor 18%, transparent); }
.contact .specs--kort th { opacity: 0.75; }
.contact .specs--kort { border-top-color: color-mix(in srgb, currentColor 18%, transparent); }
/* In een smalle contactkolom de dag boven de tijd: naast elkaar braken beide over twee regels, en een lange tijd liep op de
   telefoon buiten beeld (21-10-2026). */
.c-kolom .specs--kort, .c-kolom .specs--kort :is(tbody, tr, th, td) { display: block; width: 100%; }
.c-kolom .specs--kort th { padding: 10px 0 0; border-bottom: 0; }
.c-kolom .specs--kort td { padding: 0 0 10px; }
@media (max-width: 860px) {
  .c-kolommen { grid-template-columns: minmax(0, 1fr); }
  .c-kolom, .c-kolom + .c-kolom { border-left: 0; padding: 24px 0 20px; }
  .c-kolom + .c-kolom { border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent); }
}
/* In de smalle kolom van de indeling kolom ook onder elkaar: drie kolommen van 220 px braken het mailadres af. */
.indeling-kolom .c-kolommen { grid-template-columns: minmax(0, 1fr); }
.indeling-kolom :is(.c-kolom, .c-kolom + .c-kolom) { border-left: 0; padding: 24px 0 20px; }
.indeling-kolom .c-kolom + .c-kolom { border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent); }

/* Voettekst. groot: kolommen met merk, menu, contact en openingstijden. midden: alles in het midden. */
.site-footer--groot { padding-block: clamp(56px, 7vw, 88px) 32px; font-size: 0.9375rem; }
.site-footer--groot .wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 36px clamp(32px, 5vw, 72px); }
.voet-kolom { display: flex; flex-direction: column; gap: 10px; flex: 1 1 11rem; min-width: 0; }
.voet-kolom :is(a, span) { overflow-wrap: anywhere; }
.voet-merk { flex: 2 1 18rem; max-width: 28rem; gap: 18px; }
.site-footer--groot .voet-merk .logo { flex-basis: auto; margin-bottom: 0; }
.voet-merk p { line-height: 1.6; }
.voet-kop { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 4px; }
.site-footer--groot .legal { flex-basis: 100%; padding-top: 24px; margin-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.site-footer--midden .wrap { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.site-footer--midden .logo { flex-basis: auto; margin-bottom: 4px; }
.site-footer--midden nav { justify-content: center; }

/* Winkel: voordelen, categorieën, uitgelicht en over ons */
.usp--onder { background: none; border-top: 1px solid var(--line); border-bottom: 0; }
.usp--onder .usp-item { padding-block: 30px; }
@media (max-width: 760px) { .usp--onder .usp-item { padding-block: 16px; } }
.v-kolommen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 28px clamp(28px, 4vw, 56px); }
.v-kolommen li { display: flex; flex-direction: column; gap: 16px; padding-top: 26px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; color: var(--text); }
@media (max-width: 760px) { .v-kolommen { grid-template-columns: minmax(0, 1fr); } .v-kolommen li { flex-direction: row; align-items: center; padding-top: 18px; font-size: 1.1rem; } }

.c-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--text); }
.c-lijst a { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.5rem; align-items: baseline; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.c-lijst .cat-naam { padding: 0; font-size: 1.3rem; transition: color .35s var(--ease); }
.c-lijst .cat-aantal { padding: 0; }
.c-lijst a:hover .cat-naam { color: var(--gold-text); }
@media (min-width: 1101px) { .c-lijst:has(> li:nth-child(7)):has(> li:nth-child(3n):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Een oneven aantal in twee kolommen laat een gat: dan één kolom (3, 5, 7 ...). */
:is(.d-lijst, .c-lijst, .p-lijst):not(:has(> li:nth-child(2n):last-child)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .c-lijst { grid-template-columns: minmax(0, 1fr); } }

.c-tegels { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.c-tegel-groot { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg, 0); overflow: hidden; color: var(--text); text-decoration: none; }
.c-tegel-groot .cat-foto { position: relative; aspect-ratio: auto; flex: 1 1 auto; min-height: 280px; }
.c-tegel-groot .cat-foto img { position: absolute; inset: 0; }
.c-tegel-groot .cat-tekst { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 26px; border-top: 1px solid var(--line); }
.c-tegel-groot .cat-naam { padding: 0; font-size: 1.45rem; }
.c-tegels-rest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.c-tegels-rest a { display: grid; grid-template-columns: 88px minmax(0, 1fr) 1.5rem; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.c-tegels-rest .cat-foto { aspect-ratio: 1 / 1; width: 88px; border-radius: var(--radius, 0); }
.c-tegels-rest .cat-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:is(.c-tegels-rest, .c-tegel-groot) :is(.cat-naam, .cat-aantal) { padding: 0; }
:is(.c-tegels-rest, .c-tegel-groot) a:hover .cat-naam, .c-tegel-groot:hover .cat-naam { color: var(--gold-text); }
@media (max-width: 860px) {
  .c-tegels { grid-template-columns: minmax(0, 1fr); }
  .c-tegel-groot .cat-foto { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 380px) { .c-tegels-rest a { grid-template-columns: 64px minmax(0, 1fr) 1.25rem; gap: 14px; } .c-tegels-rest .cat-foto { width: 64px; } }

.p-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--text); }
.p-lijst a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.p-lijst .product-foto { width: 76px; aspect-ratio: 1 / 1; padding: 6px; border-radius: var(--radius, 0); }
.p-lijst .product-tekst { padding: 0; border-top: 0; gap: 4px; min-width: 0; }
.p-lijst .product-naam { font-size: 1.1rem; transition: color .35s var(--ease); }
.p-lijst .product-prijs { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.p-lijst .product-prijs del { margin-right: 0; font-size: 0.875rem; }
.p-lijst a:hover .product-naam { color: var(--gold-text); }
/* Tekstkolom van tegels en prijslijst is smal (126-165 px): als container, zodat lange woorden in de naam op hun lettergrepen
   afbreken (winkel.css: hyphens manual onder 240 px) in plaats van buiten het vak te lopen (21-10-2026, techproducts: "Brandstofsysteem") */
.c-tegels-rest .cat-tekst, .p-lijst .product-tekst { container-type: inline-size; }
@media (max-width: 860px) { .p-lijst { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .p-lijst a { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; } .p-lijst .product-foto { width: 60px; } }

.over-midden { display: flex; flex-direction: column; align-items: center; text-align: center; }
.over-midden .section-head { align-items: center; margin-inline: auto; }
.over-midden .prose { margin-inline: auto; max-width: 62ch; }
.checks--rij { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 48px); width: 100%; margin-top: clamp(28px, 4vw, 44px); text-align: left; }
@media (max-width: 960px) { .checks--rij.k4 { --k: 2; } }
@media (max-width: 760px) { .checks--rij { grid-template-columns: minmax(0, 1fr); } }

/* Indeling kolom: alles in de smalle kolom, ook het tweetal en de kolommen */
.indeling-kolom .duo-sectie > .wrap { max-width: calc(var(--kolom, 760px) + 2 * var(--gutter)); }
.indeling-kolom .duo, .indeling-kolom :is(.d-lijst, .d-uit, .p-lijst, .c-lijst, .c-tegels, .split) { grid-template-columns: minmax(0, 1fr); }
/* Zigzag in de kolom: vak boven de tekst, anders is het vak 220 px en breken de dienstnamen af. */
.indeling-kolom .zz { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.indeling-kolom .zz:nth-child(even) > :first-child { order: 0; }
.indeling-kolom :is(.d-open, .s-tijdlijn, .s-band, .f-kolommen, .f-band, .v-kolommen, .checks--rij).k4 { --k: 2; }
.indeling-kolom .s-tijdlijn.k4::before { display: none; }
.indeling-kolom .s-tijdlijn.k4 li { border-top: 1px solid var(--line); }
.indeling-kolom .s-tijdlijn.k4 li::before { top: -5px; }
.indeling-kolom .s-band.k4 { row-gap: 28px; }
.indeling-kolom .s-band.k4 li { border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }

/* ---------------------------------------------------------------------------------------------
   Stijl licht (20-10-2026): lichte kopbalk en opening, één schreefloze letter (Inter), effen accentknoppen,
   losse kaarten met zachte hoeken. Geschikt voor dienstverleners, zorg, techniek en zakelijke winkels.
   Komt na de basisopmaak; de kleuren blijven uit nieuw.py komen.
   --------------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --serif: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --kop-woord: 11.5;   /* "appartementengebouw" in Inter 600: 11,25 em */
  --sans: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --radius: 6px;
  --radius-lg: 10px;
}
body { font-size: 1.03rem; }
h1, h2 { font-weight: 650; letter-spacing: -0.022em; }
h3 { font-weight: 600; letter-spacing: -0.01em; }
:root { --h3: 1.18rem; }
a:focus-visible, .btn:focus-visible { outline-color: var(--gold-text); }
.eyebrow { letter-spacing: 0.16em; }
.hero .eyebrow::before, .contact .eyebrow::before { content: none; }
.section-head .eyebrow::before { content: none; }

/* Knoppen: effen accent, gewone letters */
.btn { border-radius: var(--radius); text-transform: none; padding: 16px 26px; }
:root { --knop-ls: 0; }
.btn--primary { background: var(--gold-text); color: var(--white); }
.btn--primary:hover { background: var(--text); }
.btn--ghost { color: var(--text); border-color: var(--line); background: var(--white); }
.btn--ghost:hover { border-color: var(--gold-text); color: var(--gold-text); }
.btn--line { background: var(--white); }

/* Kopbalk */
.site-header { background: var(--white); border-bottom-color: var(--line); }
/* Alleen de kleur via .site-footer .logo: met de lettergrootte erbij woog die regel zwaarder dan .logo--long en de telefoonmaat,
   en stond een lange naam in de voettekst groter dan in de kopbalk (20-10-2026). */
.logo, .site-footer .logo, .site-footer .logo:hover { color: var(--text); }
.logo { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.logo--long { font-size: 1.25rem; }
@media (max-width: 600px) { .logo { font-size: 1.35rem; } .logo--long { font-size: 1.1rem; } }
.nav a:not(.btn) { color: var(--text-soft); font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--text); }
.nav a:not(.btn)::after { background: var(--gold-text); }
.nav .btn { background: var(--gold-text); color: var(--white); border-color: var(--gold-text); }
.nav .btn:hover { background: var(--text); border-color: var(--text); color: var(--white); }
.site-header::after { background: var(--gold-text); }

/* Opening */
.hero { background: var(--white); color: var(--text-soft); min-height: 0; padding-block: clamp(56px, 8vw, 112px); border-bottom: 1px solid var(--line); }
.hero .eyebrow { color: var(--gold-text); }
.hero h1 { color: var(--text); }
.hero h1 em { color: var(--gold-text); }
.hero-lead { color: var(--text-soft); }
.hero-figure::before { content: none; }
.hero-figure img { border-radius: var(--radius-lg); box-shadow: none; }
.hero-figure figcaption { color: var(--text-muted); margin-top: 16px; }

/* Secties en kaarten: losse kaarten met een dunne rand */
.section--navy { background: var(--white); color: var(--text-soft); border-block: 1px solid var(--line); }
.section--navy h2, .section--navy h3 { color: var(--text); }
.section--navy .eyebrow { color: var(--gold-text); }
.section--navy .section-head p:not(.eyebrow) { color: var(--text-soft); }
.section-head::before { background: var(--gold-text); }
.grid, .photos, .cats, .products { gap: 18px; padding: 0; background: none; border: 0; }
.grid > *, .cats > li, .products > li { outline: 0; }   /* de kaart zelf heeft hier de rand */
.card, .section--white .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.section--white .card { background: var(--paper); }
.card::before, .cat::before, .product::before { content: none; }
.card--accent, .section--white .card--accent { background: var(--white); border-color: var(--gold-text); }
.section--white .card--accent { background: var(--paper); }
.card--accent h3 { color: var(--text); }
.card--accent p { color: var(--text-soft); }
.card--accent .icon, .card--accent .step-num { color: var(--gold-text); }
.step-num { font-weight: 600; font-size: 2.4rem; color: var(--gold-text); }
.card--item { overflow: hidden; }
.photos figure { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cat, .product { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.section--white .cat, .section--white .product { background: var(--paper); }
.section--white .product-foto, .section--white .cat-foto { background: var(--white); }
.cat-naam, .product-naam { font-weight: 600; }
.detail-foto img, .gallery-main, .gallery-thumbs a, .aside-kaart, .bestel input, .bestel-melding { border-radius: var(--radius); }
.gallery-main, .aside-kaart { border-radius: var(--radius-lg); }
.gallery-main { background: var(--white); }
.shop-nav a { border-radius: var(--radius); }
@media (min-width: 901px) { .shop-nav a { border-radius: 0; } }

/* Contact en voettekst: licht, met een dunne lijn erboven */
.contact { background: var(--white); color: var(--text-soft); border-top: 1px solid var(--line); }
.contact-copy .eyebrow { color: var(--gold-text); }
.contact h2 { color: var(--text); }
.contact-card { background: var(--paper); border-color: var(--line); border-radius: var(--radius-lg); }
.contact-card .logo { border-bottom-color: var(--line); }
.contact-card .name { color: var(--text); font-weight: 600; }
.contact-card .addr { color: var(--text-soft); }
.contact-card a:not(.btn) { color: var(--gold-text); }
.contact-card a:not(.btn):hover { color: var(--text); }
.site-footer { background: var(--paper); color: var(--text-muted); border-top-color: var(--line); }
.site-footer a { color: var(--text-soft); }
.site-footer a:hover { color: var(--gold-text); }

/* Meerdere pagina's: lichte paginakop, kruimelpad en menu */
.page-head { background: var(--white); color: var(--text-soft); border-bottom: 1px solid var(--line); }
.page-head h1 { color: var(--text); }
.page-head .eyebrow { color: var(--gold-text); }
.page-head .crumbs { color: var(--text-muted); }
.page-head .crumbs a { color: var(--text-soft); }
.page-head .crumbs a:hover { color: var(--gold-text); }
.page-head .crumbs [aria-current] { color: var(--text); }
.menu > summary { color: var(--text); border-color: var(--line); border-radius: var(--radius); letter-spacing: 0; text-transform: none; font-weight: 600; }
.menu[open] > summary { color: var(--gold-text); border-color: var(--gold-text); }
.menu > summary:focus-visible { outline-color: var(--gold-text); }
.menu-panel { background: var(--white); border-bottom-color: var(--line); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.25); }
.menu-panel a:not(.btn) { color: var(--text); border-bottom-color: var(--line); font-weight: 500; }
.menu-panel a[aria-current="page"] { color: var(--gold-text); }

/* ---------------------------------------------------------------------------------------------
   Indeling paneel (21-10-2026), naar Small Business en Modern Business (Start Bootstrap, MIT): naast de openingstekst een
   lichte kaart met de feiten (bij een winkel de voordelen), met de openingsfoto bovenin als die er is; diensten als losse
   kaarten. De feiten staan dan niet nog eens in een eigen sectie (basis.py, paneel()).
   --------------------------------------------------------------------------------------------- */
.hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
/* De tekst is een container: de kop rekent met zijn eigen kolom (zie "Telefoon: grote koppen" in de basis) */
.hero-copy { container-type: inline-size; }
.hero h1 { font-size: min(clamp(2.3rem, 4.6vw, 3.25rem), calc(100cqi / (var(--kop-deler) * 1.04))); }
.hero-paneel {
  --paneel-rand: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 14px; overflow: hidden; padding: var(--paneel-rand);
  background: var(--white); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg, var(--radius, 0));
}
.hero-paneel > img {
  display: block; width: calc(100% + 2 * var(--paneel-rand)); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  margin: calc(-1 * var(--paneel-rand)) calc(-1 * var(--paneel-rand)) 10px;
}
.hero .hero-paneel .eyebrow { color: var(--gold-text); }
.hero-paneel ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hero-paneel li { display: flex; gap: 16px; align-items: flex-start; padding-block: 16px; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.hero-paneel li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-paneel .icon { width: 24px; height: 24px; margin-top: 1px; }
@media (prefers-reduced-motion: no-preference) { .hero-paneel { animation: opkomst 1.3s var(--ease) .35s both; } }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hero h1 { font-size: min(clamp(1.9rem, 8.4vw, 2.4rem), calc(100cqi / (var(--kop-deler) * 1.04))); } }

/* Rasters op elke pagina: losse kaarten met een eigen rand */
.grid { gap: clamp(16px, 2vw, 24px); padding: 0; background: none; border: 0; }
.grid > .card { outline: 0; border: 1px solid var(--line); border-radius: var(--radius-lg, var(--radius, 0)); overflow: hidden; }

/* Winkel: categorieën en producten als losse kaarten */
.cats, .products { gap: clamp(14px, 1.8vw, 22px); padding: 0; }
.cats > li, .products > li { outline: 0; border: 1px solid var(--line); border-radius: var(--radius-lg, var(--radius, 0)); overflow: hidden; }

/* Paginakop van de andere pagina's: een licht vlak met een lijn eronder, ook bij een stijl met een donkere kop */
.page-head { background: var(--paper); color: var(--text-soft); border-bottom: 1px solid var(--line); }
.page-head h1 { color: var(--text); }
.page-head .eyebrow { color: var(--gold-text); }
.page-head .crumbs { color: var(--text-muted); }
.page-head .crumbs a { color: var(--text-soft); }
.page-head .crumbs a:hover { color: var(--gold-text); }
.page-head .crumbs [aria-current] { color: var(--text); }
.page-head a:focus-visible { outline-color: var(--gold-text); }