/* Flynn's Dierenspeciaalzaak — header + hero.
   Maten gemeten uit ontwerp/flynns-blok-01-header-hero-desktop-2880.png (÷ 2 = CSS-pixels op 1440).
   Bovenregel, omlijnde knop en kenmerkenrij komen niet in blok 01 voor; die maten zijn gemeten
   in ontwerp/Mockup Flynns Dierenspeciaalzaak.png (1024 px breed, × 1,406). Zie ontwerp/meetverslag.md. */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/caveat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Schaal: maten uit de mock-up × 80 %, want ChatGPT-mock-ups zijn opgeschaald (± 1024 → 2880 px).
     Alle maten uit de mock-up staan hieronder als calc(N px * var(--schaal)); hier op één plek aan te passen.
     Niet geschaald: breekpunten (apparaatbreedtes), 1 px-lijnen en maten die aan de viewport hangen (100vw).
     Container-query-drempels kunnen geen variabele gebruiken: die staan als vaste waarde × 0,8 (zie daar). */
  --schaal: 0.8;
  /* Kleuren gemeten in blok 01 */
  --groen: #415a45;          /* header, gevulde knop, iconen */
  --groen-donker: #2f4435;   /* koppen, tekst op lichte knop */
  --creme: #f7f4ee;          /* achtergrond, lichte knop */
  --tekst: #59645d;          /* lopende tekst */
  --wit: #ffffff;
  --warm: #eae1d6;           /* blok 05: warm vlak */
  --warm-schaduw: #eee9e1;   /* blok 05: verschoven schaduw onder het vlak */

  --kop-schrift: "EB Garamond", Georgia, serif;
  --hand-schrift: "Caveat", "Segoe Print", cursive;   /* handgeschreven accent (wijziging 5); voorstel, ter keuze */
  --tekst-schrift: "Inter", system-ui, sans-serif;

  /* Eén marge: 96 px op 1440 (logo/titel links 96, knop rechts eindigt op 1342,5) */
  --marge: calc(clamp(20px, 6.667vw, 96px) * var(--schaal));
  --inhoud-max: calc(1248px * var(--schaal));      /* 1440 − 2 × 96 */
  --kop-hoogte: calc(96px * var(--schaal));        /* groene balk 0–193 op 2880 */

  /* Ondergrenzen (keuze Claudia): vaste px, niet geschaald. --min-tekst op alle schermen, de rest t/m 768 */
  --min-tekst: 16px;   /* lopende tekst */
  --min-klein: 12px;   /* bovenregel, labels, footer */
  --min-raak: 44px;    /* aanraakhoogte knoppen en menu-items */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-hoogte) + calc(16px * var(--schaal))); }
body { margin: 0; background: var(--creme); color: var(--tekst); font: 400 calc(16px * var(--schaal))/1.5 var(--tekst-schrift); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
:focus { outline: none; }
:focus-visible { outline: calc(2px * var(--schaal)) solid var(--groen-donker); outline-offset: calc(3px * var(--schaal)); border-radius: calc(4px * var(--schaal)); }
.kop :focus-visible { outline-color: var(--wit); }
.kop .nav__sub :focus-visible, .kop .knop--licht:focus-visible { outline-color: var(--groen-donker); }

.skiplink { position: absolute; left: calc(16px * var(--schaal)); top: calc(-100px * var(--schaal)); z-index: 100; background: var(--wit); color: var(--groen-donker); padding: calc(8px * var(--schaal)) calc(14px * var(--schaal)); border-radius: calc(6px * var(--schaal)); }
.skiplink:focus { top: calc(12px * var(--schaal)); }

.wrap { max-width: calc(var(--inhoud-max) + 2 * var(--marge)); margin: 0 auto; padding-inline: var(--marge); }

/* ---------- Knoppen (pil, hoogte 54,5 gemeten) ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(54.5px * var(--schaal)); border-radius: calc(999px * var(--schaal)); text-decoration: none; white-space: nowrap;
  font: 500 calc(16px * var(--schaal))/1.2 var(--tekst-schrift);
  transition: background-color .15s, color .15s, border-color .15s;
}
.knop__pijl { flex: none; width: calc(12.5px * var(--schaal)); height: calc(12.5px * var(--schaal)); }
/* "Bekijk assortiment": tekst begint 18 px na de rand, pijl 6 px na de tekst, 19 px tot de rand */
.knop--gevuld { background: var(--groen); color: var(--wit); padding: 0 calc(19px * var(--schaal)) 0 calc(18px * var(--schaal)); gap: calc(6px * var(--schaal)); }
.knop--gevuld:hover { background: var(--groen-donker); }
.knop--omlijnd { color: var(--groen-donker); border: calc(1.5px * var(--schaal)) solid var(--groen-donker); padding: 0 calc(26px * var(--schaal)); }
.knop--omlijnd:hover { background: var(--groen-donker); color: var(--wit); }
/* Headerknop: 15 px medium, 38,5 px links, 24 px tot pijl, 19 px rechts */
.knop--licht { background: var(--creme); color: var(--groen-donker); font-size: calc(15px * var(--schaal)); padding: 0 calc(19px * var(--schaal)) 0 calc(38.5px * var(--schaal)); gap: calc(24px * var(--schaal)); }
.knop--licht:hover { background: var(--wit); }

/* ---------- Header ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: var(--groen); color: var(--wit); }
.kop__binnen {
  max-width: calc(var(--inhoud-max) + 2 * var(--marge)); margin: 0 auto; padding-inline: var(--marge);
  min-height: var(--kop-hoogte); display: flex; align-items: center; gap: calc(24px * var(--schaal));
}
.kop__logo { display: block; flex: none; text-decoration: none; }
/* Logo: hoogte 78 (18–174 op 2880); breedte volgt de verhouding van logo_flynns.png (1083 × 948).
   Het bestand is zwart op wit (niet transparant): invert maakt het wit op zwart, screen laat het zwart wegvallen tegen het groen. */
.kop { isolation: isolate; }
/* Het bestand heeft witruimte rond de tekening (inktvak 142–909 × 92–876 van 1083 × 948). Het beeld wordt zo geschaald dat
   de tekening zelf 78 px hoog is (76,3 px breed; ontwerp 75,5 × 78) en de witruimte valt weg met negatieve marges.
   Inkt begint in het ontwerp 4 px vóór de marge (x 184 op 2880). */
.logo { display: block; --logo-inkt: calc(78px * var(--schaal)); }
.logo img {
  height: calc(var(--logo-inkt) * 1.2090); width: auto; max-width: none;
  margin: calc(var(--logo-inkt) * -0.1179) calc(var(--logo-inkt) * -0.2218) calc(var(--logo-inkt) * -0.0923) calc(var(--logo-inkt) * -0.1808 - calc(4px * var(--schaal)));
  filter: invert(1); mix-blend-mode: screen;
}

.kop__menu { display: flex; align-items: center; margin-left: auto; gap: calc(clamp(24px, 12.78vw, 184px) * var(--schaal)); }
/* Slotje naar /beheer: rechts naast "Route & openingstijden", in de marge, zodat menu en knop niet verschuiven.
   Aanraakvlak 44 × 44, icoon 18 px, zelfde kleur als de menutekst. Onder 1100: in de bovenste rij rechts naast de menuknop. */
.kop__binnen { position: relative; }
.kop__slot { position: absolute; top: 50%; right: calc(var(--marge) - 52px); transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; color: var(--wit); border-radius: 6px; opacity: .85; }
.kop__slot:hover { opacity: 1; }
.kop__slot svg { width: 18px; height: 18px; }

.nav__lijst { display: flex; align-items: center; gap: calc(56px * var(--schaal)); }
.nav__item { position: relative; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: calc(7.5px * var(--schaal));
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--wit); font: 400 calc(15px * var(--schaal))/1.2 var(--tekst-schrift); text-decoration: none;
}
/* Onderstreping "Home": 2,5 px dik, 15,5 px onder de basislijn, 2,5 px links en 6 px rechts buiten de tekst */
.nav__link.is-actief::after {
  content: ""; position: absolute; left: calc(-2.5px * var(--schaal)); right: calc(-6px * var(--schaal)); bottom: calc(-18px * var(--schaal)); height: calc(2.5px * var(--schaal)); background: var(--wit); border-radius: calc(2px * var(--schaal));
}
.nav__link:hover { text-decoration: underline; text-underline-offset: calc(6px * var(--schaal)); }
.nav__link.is-actief:hover { text-decoration: none; }
.nav__chevron { width: calc(10px * var(--schaal)); height: calc(6px * var(--schaal)); transition: transform .15s; }
.nav__open[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__sub {
  position: absolute; left: calc(-20px * var(--schaal)); top: calc(100% + calc(39px * var(--schaal))); min-width: calc(240px * var(--schaal));
  background: var(--creme); color: var(--groen-donker); border-radius: 0 0 calc(12px * var(--schaal)) calc(12px * var(--schaal)); padding: calc(10px * var(--schaal)) 0;
  box-shadow: 0 calc(12px * var(--schaal)) calc(32px * var(--schaal)) rgba(47, 68, 53, .18);
  display: none;
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-39px * var(--schaal)); height: calc(39px * var(--schaal)); }
.nav__open[aria-expanded="true"] + .nav__sub { display: block; }
.nav__sub a { display: block; padding: calc(10px * var(--schaal)) calc(20px * var(--schaal)); font: 400 calc(15px * var(--schaal))/1.3 var(--tekst-schrift); text-decoration: none; }
.nav__sub a:hover { background: rgba(65, 90, 69, .08); text-decoration: underline; text-underline-offset: calc(4px * var(--schaal)); }

.kop__menuknop { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--creme);
  --links: max(var(--marge), calc((100vw - var(--inhoud-max)) / 2));   /* linkerrand tekstkolom */
}
/* Kop van de hond en alle vijf dieren altijd heel in beeld (regel Claudia, 14-10-2026). Gemeten in de foto (2880 × 1620):
   bovenkant kop hond 15,5 %, onderkant pootjes 80 %, staart kat 23,5 %, konijn rechts 96 %. Bijsnijden alleen onder (tapijt)
   en opzij. De header is dicht groen, dus de foto begint pas onder de header (wat erachter valt, is niet te zien). */
.hero__beeld img {
  /* Fotovlak = hero hoog, rechts uitgelijnd, nooit breder dan 2,5 : 1 (zichtbaar dan 71 % van de fotohoogte, nodig 64,5 %).
     object-position 42 %: midden van de dierenband (47,75 %) op het midden van de hero. object-fit: cover: nooit vervormen.
     Links loopt de foto zacht uit onder het crème. */
  position: absolute; right: 0; left: auto; top: 0;
  height: 100%; width: auto; aspect-ratio: 2.5; max-width: 100%;
  object-fit: cover; object-position: 100% 42%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%);
}
/* Crème verloop gemeten op 1440: dekking 0,98 tot 590 px, lineair naar 0 bij 830 px.
   Gekoppeld aan de linkerrand van de tekstkolom (96 px op 1440), zodat de tekst op elke breedte op crème staat. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(247,244,238,.98) 0, rgba(247,244,238,.98) calc(var(--links) + calc(494px * var(--schaal))), rgba(247,244,238,0) calc(var(--links) + calc(734px * var(--schaal))));
}
.hero__binnen {
  position: relative; z-index: 2;
  max-width: calc(var(--inhoud-max) + 2 * var(--marge)); margin: 0 auto; padding: calc(64px * var(--schaal)) var(--marge);
  min-height: calc(600px * var(--schaal)); display: flex; align-items: center;   /* hero 193–1392 op 2880 = 599,5 */
}
.hero__tekst { width: 100%; max-width: calc(600px * var(--schaal)); container: hero-tekst / inline-size; }

.hero__bovenregel {
  margin: 0 0 calc(21px * var(--schaal)); color: var(--groen-donker);
  font: 500 calc(13px * var(--schaal))/1.2 var(--tekst-schrift); letter-spacing: .12em; text-transform: uppercase;
}
/* Titel: kapitaalhoogte 43,5 px → EB Garamond 600 op 64 px. Regelafstand 1,05: regels raken elkaar niet (wijziging 2). */
.hero__titel {
  margin: 0; color: var(--groen-donker);
  font: 600 calc(64px * var(--schaal))/1.05 var(--kop-schrift); letter-spacing: -0.005em;
  overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance;
}
/* Subtekst en kenmerken blijven binnen 504 px (eindigen vóór 600 op 1440), zodat het contrast op het verloop ≥ 4,5 blijft */
.hero__subtekst { margin: calc(20px * var(--schaal)) 0 0; max-width: calc(504px * var(--schaal)); font: 400 calc(18px * var(--schaal))/1.5 var(--tekst-schrift); color: var(--tekst); }

.hero__knoppen { display: flex; flex-wrap: wrap; gap: calc(16px * var(--schaal)); margin-top: calc(36.5px * var(--schaal)); }

/* Kenmerken: nooit 2 + 1. Past de rij (504 px), dan alle drie naast elkaar zonder terugloop; anders alle drie onder elkaar.
   Naast elkaar verdeeld over 504 px: met Inter is de tussenruimte dan de gemeten 38 px; rendert een lettertype breder,
   dan krimpt de tussenruimte (minimaal 20 px) in plaats van dat er een item naar de volgende regel springt. */
.hero__kenmerken { display: flex; flex-direction: column; gap: calc(14px * var(--schaal)); margin-top: calc(48px * var(--schaal)); }
.kenmerk { display: flex; align-items: center; gap: calc(15px * var(--schaal)); color: var(--tekst); }
.kenmerk__icoon { flex: none; width: calc(32px * var(--schaal)); height: calc(32px * var(--schaal)); color: var(--groen); }
.kenmerk__tekst { font: 400 calc(15px * var(--schaal))/calc(20px * var(--schaal)) var(--tekst-schrift); }
.kenmerk__regel { display: inline; white-space: normal; }
@container hero-tekst (min-width: 403.2px)   /* 504 × schaal 0,8 */ {
  .hero__kenmerken { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 0 calc(20px * var(--schaal)); width: calc(504px * var(--schaal)); }
  .kenmerk { flex: none; }
  .kenmerk__tekst { font-size: calc(14px * var(--schaal)); line-height: calc(17px * var(--schaal)); }
  .kenmerk__regel { display: block; white-space: nowrap; }  /* regelval zoals in de sfeer-mock-up */
}

/* ---------- Actueel bij Flynn's ----------
   Gemeten uit ontwerp/flynns-blok-05-actueel-bij-flynns-desktop-2880.png (÷ 2); zie ontwerp/meetverslag.md.
   Tekst links (plaats van de kop + uitleg), foto rechts (488 px breed, zoals het berichtkaartje; 40 px van boven).
   Binnenruimte links en rechts gelijk (36 px, gemeten links); tekst verticaal gecentreerd naast de foto (keuzes Claudia).
   Foto altijd 4:3, bijgesneden met object-fit: cover.
   Toestanden: --beide, --tekst (brede balk), --foto (alleen foto, gecentreerd). Geen bericht = geen sectie. */
.actueel { padding-block: calc(clamp(32px, 3.611vw, 52px) * var(--schaal)); }
.actueel__vlak {
  background: var(--warm); border-radius: calc(16px * var(--schaal)); box-shadow: calc(6px * var(--schaal)) calc(6px * var(--schaal)) 0 var(--warm-schaduw);
  padding: calc(40px * var(--schaal)) calc(36px * var(--schaal));   /* links gemeten (tekst 36 px binnen het vlak); rechts gelijk gemaakt (keuze Claudia) */
}
/* Tekst verticaal gecentreerd naast de foto (keuze Claudia) */
.actueel--beide .actueel__vlak { display: grid; grid-template-columns: minmax(0, 1fr) calc(488px * var(--schaal)); column-gap: calc(48px * var(--schaal)); align-items: center; }
.actueel__tekst { max-width: calc(580px * var(--schaal)); }
.actueel__kop { margin: calc(-4px * var(--schaal)) 0 0; padding-top: 0; color: var(--groen-donker); font: 600 calc(39px * var(--schaal))/1.1 var(--kop-schrift); letter-spacing: -0.005em; text-wrap: balance; }
.actueel__titel { margin: 0; padding-top: calc(34px * var(--schaal)); color: var(--groen-donker); font: 600 calc(20px * var(--schaal))/1.25 var(--tekst-schrift); overflow-wrap: break-word; }
.actueel__bericht { margin: 0; padding-top: calc(10.5px * var(--schaal)); font-size: calc(18px * var(--schaal)); line-height: calc(25.5px * var(--schaal)); overflow-wrap: break-word; }
.actueel__kop + .actueel__bericht { padding-top: calc(34px * var(--schaal)); }
.actueel__foto { display: block; }
.actueel__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(12px * var(--schaal)); }
/* Alleen foto: geen warm vlak, de foto zelf krijgt de afronding en schaduw van het vlak */
.actueel--foto .actueel__vlak { background: none; box-shadow: none; padding: 0; display: flex; justify-content: center; }
.actueel--foto .actueel__foto { width: min(calc(488px * var(--schaal)), 100%); }
.actueel--foto .actueel__foto img { border-radius: calc(16px * var(--schaal)); box-shadow: calc(6px * var(--schaal)) calc(6px * var(--schaal)) 0 var(--warm-schaduw); }

.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: calc(-1px * var(--schaal)); padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Waarom Flynn's? (blok 03) ----------
   Gemeten uit ontwerp/flynns-blok-03-waarom-flynns-desktop-2880.png (÷ 2); zie ontwerp/meetverslag.md.
   Kop EB Garamond 39 gecentreerd; drie kolommen van 416 (inhoud / 3), cirkel 60 px #eae1d6 op 8 px in de kolom,
   tekst 24 px na de cirkel; scheidingslijn 1 px #ddd5ca, 14 px vóór kolom 2 en 3, 116 px hoog. */
.waarom { padding: calc(53px * var(--schaal)) 0 calc(73px * var(--schaal)); }
.waarom__kop { margin: 0; text-align: center; color: var(--groen-donker); font: 600 calc(39px * var(--schaal))/1.1 var(--kop-schrift); letter-spacing: -0.005em; text-wrap: balance; }
.waarom__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 65px; margin-top: calc(44px * var(--schaal)); }   /* 32 px tekst ↔ lijn (1 px) ↔ 32 px tekst (keuze Claudia, vast) */
.waarom__punt { position: relative; display: grid; grid-template-columns: calc(60px * var(--schaal)) minmax(0, 1fr); column-gap: calc(24px * var(--schaal)); align-items: start; align-content: start; min-height: calc(116px * var(--schaal)); padding-left: calc(8px * var(--schaal)); }
.waarom__punt + .waarom__punt::before { content: ""; position: absolute; left: -33px; top: 0; bottom: 0; width: 1px; background: #ddd5ca; }
.waarom__icoon { display: grid; place-items: center; width: calc(60px * var(--schaal)); height: calc(60px * var(--schaal)); margin-top: calc(2px * var(--schaal)); border-radius: 50%; background: var(--warm); color: var(--groen-donker); }
.waarom__icoon svg { width: calc(36px * var(--schaal)); height: calc(36px * var(--schaal)); }
.waarom__titel { margin: 0; padding-top: calc(3.5px * var(--schaal)); color: var(--groen-donker); font: 600 18px/1.3 var(--tekst-schrift); }   /* 18 px vast, duidelijk groter dan de tekst (16 px) eronder (keuze Claudia) */
.waarom__uitleg { margin: calc(11px * var(--schaal)) 0 0; font-size: calc(18px * var(--schaal)); line-height: calc(23.5px * var(--schaal)); }
/* Tekst breekt vrij af binnen de kolom (keuze Claudia); de regels uit de mock-up staan als losse spans, zonder vaste regelval */
.waarom__regel { display: inline; }

/* ---------- Even voorstellen (blok 06 + wijziging 5) ----------
   Gemeten uit ontwerp/flynns-blok-06-even-voorstellen-desktop-2880.png (÷ 2): blok 430 hoog, foto vanaf x 660 tot de rand
   (= tekstlijn + 564), foto = flynns-over-ons-hond-kat (cover, horizontaal 67 %, gevonden door beeldvergelijking).
   Label 13 px #59645d, kop EB Garamond 40,5, tekst 18/25,5. Handgeschreven accent en pootjes/blaadje: eigen toevoeging
   volgens wijziging 5, in de stijl van de sfeer-mock-up. */
.voorstellen { --links: max(var(--marge), calc((100vw - var(--inhoud-max)) / 2)); }
.voorstellen__binnen { position: relative; display: grid; grid-template-columns: calc(var(--links) + calc(564px * var(--schaal))) minmax(0, 1fr); min-height: calc(430px * var(--schaal)); }
.voorstellen__tekst { align-self: center; padding: calc(56px * var(--schaal)) calc(48px * var(--schaal)) calc(56px * var(--schaal)) var(--links); }   /* tekst verticaal gecentreerd: de knop uit het ontwerp vervalt */
.voorstellen__label { margin: 0; color: var(--tekst); font: 500 calc(13px * var(--schaal))/calc(16px * var(--schaal)) var(--tekst-schrift); letter-spacing: .01em; text-transform: uppercase; }
.voorstellen__kop { margin: calc(9px * var(--schaal)) 0 0; color: var(--groen-donker); font: 600 calc(40.5px * var(--schaal))/1.1 var(--kop-schrift); letter-spacing: -0.005em; text-wrap: balance; }
.voorstellen__alinea { margin: calc(34.5px * var(--schaal)) 0 0; max-width: calc(516px * var(--schaal)); font-size: calc(18px * var(--schaal)); line-height: calc(25.5px * var(--schaal)); }
.voorstellen__knop { margin-top: calc(50px * var(--schaal)); }   /* tekst → knop: basislijn 488 → knop 600 op 2880 */
.voorstellen__poot, .voorstellen__blad { position: absolute; color: #c9b8a3; pointer-events: none; }
.voorstellen__poot { left: calc(var(--links) + calc(452px * var(--schaal))); top: calc(60px * var(--schaal)); width: calc(34px * var(--schaal)); height: calc(34px * var(--schaal)); transform: rotate(14deg); }
.voorstellen__blad { left: calc(var(--links) + calc(470px * var(--schaal))); bottom: calc(34px * var(--schaal)); width: calc(52px * var(--schaal)); height: calc(78px * var(--schaal)); }
.voorstellen__foto { position: relative; margin: 0; min-height: 100%; overflow: hidden; }
/* Ontwerp: 67 %. Op 100 % (141 px naar links op 1440) zodat rechtsboven een lichte, lege plek overblijft voor het accent (wijziging 5). */
.voorstellen__foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% 30%; }   /* nooit vervormen: bijsnijden; koppen hond en kat (bovenste helft) blijven in beeld */
.voorstellen__accent {
  position: absolute; z-index: 1; isolation: isolate; top: calc(30px * var(--schaal)); right: calc(40px * var(--schaal)); display: flex; flex-direction: column; align-items: center;
  color: var(--groen-donker); font: 400 calc(26px * var(--schaal))/1 var(--hand-schrift); transform: rotate(-7deg); text-align: center;
}
.voorstellen__accent span { display: block; white-space: nowrap; }
/* Zachte crème gloed achter het accent: tekstcontrast ≥ 4,5 op elke plek van de foto, zonder hard vlak */
.voorstellen__accent::before {
  content: ""; position: absolute; inset: calc(-22px * var(--schaal)) calc(-30px * var(--schaal)); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 244, 238, .9) 0, rgba(247, 244, 238, .9) 78%, rgba(247, 244, 238, 0) 100%);
}
.voorstellen__hartje { margin-top: calc(6px * var(--schaal)); width: calc(18px * var(--schaal)); height: calc(16px * var(--schaal)); color: #a77d5f; }

/* ---------- Footer (blok 07 + wijziging 6) ----------
   Gemeten uit ontwerp/flynns-blok-07-footer-desktop-2880.png (÷ 2): 360 hoog, kolommen op 96 / 390,5 / 640,5 / 980,5 / 1260,5,
   koppen 15/600 wit, tekst 15/400 #f3f0e8, tijden en onderregel #d9e0d9, lijn #718272 op 296, logo (tekening) 91,5 hoog. */
.voet { --voet-tekst: #f3f0e8; --voet-zacht: #d9e0d9; background: var(--groen); color: var(--voet-tekst); padding: calc(71.5px * var(--schaal)) 0 calc(26px * var(--schaal)); isolation: isolate; }
.voet a { color: inherit; text-decoration: none; }
.voet a:hover { text-decoration: underline; text-underline-offset: calc(3px * var(--schaal)); }
.voet :focus-visible { outline-color: var(--wit); }
.voet__raster { display: grid; grid-template-columns: minmax(0, 294.5fr) minmax(0, 250fr) minmax(0, 340fr) minmax(0, 280fr) minmax(0, 83.5fr); }
.voet__merk { margin-top: calc(-7.5px * var(--schaal)); padding-right: calc(24px * var(--schaal)); }
.voet .logo { --logo-inkt: calc(91.5px * var(--schaal)); }
.voet .logo img { margin-left: calc(var(--logo-inkt) * -0.1808); }   /* zonder de −4 px correctie van de header: tekening op x 96 */
/* Breekt af als "Natuurlijke voeding en / verzorging voor je huisdier." (keuze Claudia 15-10-2026): max. 220 × schaal = 176 px,
   gemeten: tweede regel 171 px, "…en verzorging" 214 px. Op 1440 ≥ 48 px tot de kolom "Snel naar". */
.voet__tagline { margin: calc(21.5px * var(--schaal)) 0 0; max-width: calc(220px * var(--schaal)); text-wrap: balance; font-size: calc(16.5px * var(--schaal)); line-height: calc(23px * var(--schaal)); }
.voet__kop { margin: 0; color: var(--wit); font: 600 calc(15px * var(--schaal))/calc(20px * var(--schaal)) var(--tekst-schrift); }
.voet__lijst { margin: calc(19.5px * var(--schaal)) 0 0; padding: 0; list-style: none; font: 400 calc(15px * var(--schaal))/calc(20px * var(--schaal)) var(--tekst-schrift); }
.voet__lijst--links li + li { margin-top: calc(14px * var(--schaal)); }
/* Facebook met klein lijnicoon in dezelfde stijl als de iconen op de site (lijn 1,5, ronde hoeken) */
.voet__sociaal { display: inline-flex; align-items: center; gap: calc(8px * var(--schaal)); }
.voet__icoon { flex: none; width: calc(18px * var(--schaal)); height: calc(18px * var(--schaal)); }
.voet__contact { display: flex; flex-direction: column; gap: calc(10px * var(--schaal)); font-style: normal; align-items: flex-start; }
.voet__email { font-size: calc(14px * var(--schaal)); }
.voet__tijden { margin: calc(19.5px * var(--schaal)) 0 0; }
.voet__tijden div + div { margin-top: calc(7.5px * var(--schaal)); }
.voet__tijden dt { font: 400 calc(15px * var(--schaal))/calc(20px * var(--schaal)) var(--tekst-schrift); }
.voet__tijden dd { margin: calc(1.5px * var(--schaal)) 0 0; color: var(--voet-zacht); font: 400 calc(13px * var(--schaal))/calc(18px * var(--schaal)) var(--tekst-schrift); }
/* Afwijkende openingstijden (uitzonderingen uit het beheer); geen ontwerp, zelfde opmaak als het weekrooster eronder */
.voet__tijden-kop { margin: calc(16px * var(--schaal)) 0 0; color: var(--wit); font: 600 calc(13px * var(--schaal))/1.35 var(--tekst-schrift); }
.voet__tijden--afwijkend { margin-top: calc(8px * var(--schaal)); }
a.voet__email { color: inherit; }
/* Lang e-mailadres: breekt na de @ (<wbr>), en in een heel smalle kolom waar nodig */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(8px * var(--schaal)) calc(24px * var(--schaal)); margin-top: calc(45px * var(--schaal)); padding-top: calc(20.5px * var(--schaal)); border-top: 1px solid #718272;
  color: var(--voet-zacht); font: 400 calc(12.5px * var(--schaal))/calc(16px * var(--schaal)) var(--tekst-schrift); }
.voet__onder p { margin: 0; }

/* ---------- Blok 02 "Ontdek ons assortiment" en blok 04 "Uitgelichte producten" ----------
   Gemeten in flynns-blok-02 / -04 (2880; ÷ 2 = 1440, × schaal). Vier kaarten van 300 px met 16 px tussenruimte (= inhoudsbreedte 1248).
   Tegel (kaart): wit, hoek 12, rand 1 px #e5ded4 rond het witte deel, verschoven schaduw 5/5 px (warm-schaduw). Foto loopt tot de rand.
   Blok 02: foto 601 × 442 (2880), balk 60,5 px; blok 04: foto 601 × 412, tekstdeel 108,5 px.
   Keuze Claudia (14-10-2026): namen 16 px / 600 (gemeten 16 en 17 × 0,8), label en "Meer informatie" minimaal 12 px
   (gemeten 11 en 14 × 0,8 = 8,8 en 11,2); lijnicoon vóór de naam (wijziging 4). */
.rij { padding: calc(48.5px * var(--schaal)) 0 calc(48px * var(--schaal)); }   /* kop-inkt 52,5 onder de bovenkant, tegels op 122 */
.rij--uitgelicht { padding: calc(44.6px * var(--schaal)) 0 calc(39px * var(--schaal)); }   /* kop-inkt 48,5, tegels op 116 */
.rij__kop { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: calc(8px * var(--schaal)) calc(24px * var(--schaal)); }
.rij__titel { margin: 0; color: var(--groen-donker); font: 600 calc(39px * var(--schaal))/1.1 var(--kop-schrift); letter-spacing: -0.005em; text-wrap: balance; }
.rij__link { display: inline-flex; align-items: center; gap: calc(11.5px * var(--schaal)); color: var(--groen-donker); font: 500 calc(15px * var(--schaal))/1.3 var(--tekst-schrift); text-decoration: none; }
.rij__link:hover { text-decoration: underline; text-underline-offset: calc(4px * var(--schaal)); }
.rij__link .tegel__pijl { width: calc(10.5px * var(--schaal)); height: calc(10.5px * var(--schaal)); }
.rij__lijst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16px * var(--schaal)); margin: calc(30.6px * var(--schaal)) 0 0; padding: 0; list-style: none; }
.rij--uitgelicht .rij__lijst { margin-top: calc(28px * var(--schaal)); }
.rij__lijst > li { display: flex; }

.tegel { display: flex; flex-direction: column; width: 100%; overflow: hidden; background: var(--wit); border-radius: calc(12px * var(--schaal));
  box-shadow: calc(5px * var(--schaal)) calc(5px * var(--schaal)) 0 var(--warm-schaduw); color: var(--groen-donker); text-decoration: none; }
.tegel:focus-visible { border-radius: calc(12px * var(--schaal)); }
.tegel__foto img { display: block; width: 100%; height: auto; aspect-ratio: 601 / 442; object-fit: cover; }
.tegel--product .tegel__foto img { aspect-ratio: 601 / 412; }
.tegel__foto--heel img { object-fit: contain; padding: calc(16px * var(--schaal)); }
.tegel__leeg { display: grid; place-items: center; aspect-ratio: 601 / 442; background: var(--warm); }
.tegel__balk, .tegel__tekst { flex: 1; border: 1px solid #e5ded4; border-top: 0; border-radius: 0 0 calc(12px * var(--schaal)) calc(12px * var(--schaal)); }
/* Icoon 18 px en tussenruimte 6 px: zo past "Natuurlijke verzorging" (16 px, 170 px breed) op één regel in een tegel van 236–240 px */
.tegel__balk { display: flex; align-items: center; gap: 6px; min-height: calc(60.5px * var(--schaal)); padding: calc(10px * var(--schaal)) calc(12.5px * var(--schaal)) calc(10px * var(--schaal)) calc(19.5px * var(--schaal)); }
.tegel__icoon { flex: none; width: 18px; height: 18px; color: var(--groen); }
.tegel__naam { flex: 1; min-width: 0; font: 600 16px/1.3 var(--tekst-schrift); }
.tegel__pijl { flex: none; width: calc(14.5px * var(--schaal)); height: calc(14.5px * var(--schaal)); }
.tegel__tekst { display: flex; flex-direction: column; padding: calc(19px * var(--schaal)) calc(14px * var(--schaal)) calc(16px * var(--schaal)) calc(19.5px * var(--schaal)); }
.tegel__label { color: var(--tekst); font: 500 max(var(--min-klein), calc(11px * var(--schaal)))/1.3 var(--tekst-schrift); letter-spacing: 0.04em; text-transform: uppercase; }
.tegel__product { margin-top: calc(10px * var(--schaal)); font: 600 16px/1.3 var(--tekst-schrift); }
.tegel__meer { display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--schaal)); margin-top: auto; padding-top: calc(8px * var(--schaal)); font: 500 max(var(--min-klein), calc(14px * var(--schaal)))/1.3 var(--tekst-schrift); }
.tegel:hover .tegel__naam, .tegel:hover .tegel__product { text-decoration: underline; text-underline-offset: calc(4px * var(--schaal)); text-decoration-thickness: 1px; }

@media (max-width: 1100px) {
  .rij__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Overzicht /assortiment: tegels in de stijl van blok 02, met de eerste zin van de intro. Drie per rij (≈ 320 px), 2 vanaf 1100, 1 onder 480. */
.overzicht { padding-bottom: calc(73px * var(--schaal)); }
.rij__lijst.overzicht__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24px * var(--schaal)); margin: 0; }
.tegel__tekst--overzicht { padding: calc(16px * var(--schaal)) calc(14px * var(--schaal)) calc(20px * var(--schaal)) calc(19.5px * var(--schaal)); }
.tegel__regel { display: flex; align-items: center; gap: 6px; }
.tegel__zin { margin-top: calc(8px * var(--schaal)); color: var(--tekst); font: 400 var(--min-tekst)/1.5 var(--tekst-schrift); }
.tegel--overzicht:hover .tegel__naam { text-decoration: underline; text-underline-offset: calc(4px * var(--schaal)); text-decoration-thickness: 1px; }

/* Smaller dan 480 (telefoon): blok 02 en 04 twee tegels per rij, even hoog per rij (keuze Claudia).
   Het overzicht /assortiment (met een zin per tegel) één per rij. */
@media (min-width: 1101px) {
  .tegel--categorie .tegel__naam { white-space: nowrap; }   /* vaste namen van blok 02; passen op elke breedte vanaf 1101 (gemeten) */
}
@media (max-width: 479px) {
  .rij__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rij__lijst.overzicht__lijst { grid-template-columns: minmax(0, 1fr); }
}
/* Smalle tegels (twee per rij tot 559 px): icoon boven de naam, pijl rechts ernaast */
@media (max-width: 559px) {
  .tegel--categorie:not(.tegel--overzicht) .tegel__balk { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: calc(8px * var(--schaal)); padding-block: calc(12px * var(--schaal)); }
  .tegel--categorie:not(.tegel--overzicht) .tegel__naam { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1100px) {
  .rij__lijst.overzicht__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .rij__lijst.overzicht__lijst { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .rij__titel { font-size: calc(clamp(30px, 8.2vw, 39px) * var(--schaal)); }
  .rij__lijst { gap: calc(12px * var(--schaal)); }
  .tegel__balk { padding-left: calc(14px * var(--schaal)); padding-right: calc(10px * var(--schaal)); }
  .tegel__tekst { padding-left: calc(14px * var(--schaal)); padding-right: calc(10px * var(--schaal)); }
}
@media (max-width: 768px) {
  .rij__link { min-height: var(--min-raak); font-size: max(var(--min-klein), calc(15px * var(--schaal))); }
}

/* ---------- Productpagina (/assortiment/<slug>) ----------
   Geen mock-up: opgebouwd uit bestaande onderdelen. Kop = hero-bovenregel en hero-titel; kaartjes = kaart uit blok 04
   (gemeten op 2880 ÷ 2: breedte 298,5, foto 597 : 412, afronding 12, binnenruimte 20, schaduw 6 px --warm-schaduw);
   afsluitend vlak = vlak van Actueel (blok 05). Naam van een soort 18 px vet boven tekst van 16 px (zelfde regel als Waarom). */
.pagina-kop { padding: calc(64px * var(--schaal)) 0 calc(44px * var(--schaal)); }
.pagina-kop__bovenregel { margin: 0 0 calc(21px * var(--schaal)); color: var(--groen-donker); font: 500 calc(13px * var(--schaal))/1.2 var(--tekst-schrift); letter-spacing: .12em; text-transform: uppercase; }
.pagina-kop__titel { margin: 0; color: var(--groen-donker); font: 600 calc(64px * var(--schaal))/1.05 var(--kop-schrift); letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: break-word; }
/* Breedte: ca. 72 tekens per regel (36,25em = 580 px bij 16 px), links op de lijn van de kaarten; keuze Claudia 15-10-2026 */
.pagina-kop__intro { margin: calc(20px * var(--schaal)) 0 0; max-width: 36.25em; font-size: max(var(--min-tekst), calc(18px * var(--schaal))); line-height: 1.5; }

.soorten { padding-bottom: calc(73px * var(--schaal)); }
.soorten__lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: calc(24px * var(--schaal)); margin: 0; padding: 0; list-style: none; }
.soort { display: flex; flex-direction: column; overflow: hidden; background: var(--wit); border-radius: calc(12px * var(--schaal)); box-shadow: calc(6px * var(--schaal)) calc(6px * var(--schaal)) 0 var(--warm-schaduw); }
.soort__foto img { width: 100%; height: auto; aspect-ratio: 597 / 412; object-fit: cover; }
/* Vrijstaand product (packshot): helemaal zichtbaar binnen hetzelfde beeldvlak, met witruimte rondom; nooit vervormd */
.soort__foto--heel img { object-fit: contain; padding: calc(16px * var(--schaal)); }
/* Placeholder zonder foto: zelfde beeldvlak (597 : 412), warm vlak met het blaadje in een crème cirkel */
.soort__leeg { display: grid; place-items: center; aspect-ratio: 597 / 412; background: var(--warm); }
.soort__icoon { display: grid; place-items: center; width: calc(60px * var(--schaal)); height: calc(60px * var(--schaal)); border-radius: 50%; background: var(--creme); color: var(--groen-donker); }
.soort__icoon svg { width: calc(36px * var(--schaal)); height: calc(36px * var(--schaal)); }
.soort__tekst { padding: calc(20px * var(--schaal)) calc(20px * var(--schaal)) calc(24px * var(--schaal)); }
.soort__naam { margin: 0; color: var(--groen-donker); font: 600 18px/1.3 var(--tekst-schrift); }
.soort__uitleg { margin: calc(8px * var(--schaal)) 0 0; font-size: var(--min-tekst); line-height: 1.5; }
.soorten__pdf { margin: calc(44px * var(--schaal)) 0 0; }
/* Tekst uit het beheer (deel 2): alleen vet en links (src/opmaak.js) */
.opmaak strong { font-weight: 600; color: var(--groen-donker); }
.opmaak a { color: var(--groen-donker); text-decoration: underline; text-underline-offset: calc(3px * var(--schaal)); text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.opmaak a:hover { text-decoration-thickness: 2px; }
/* Ankers ("Bekijk op de website" in het beheer, links uit Uitgelicht) niet onder de vaste header */
.soort, .soorten__pdf, .rij, .actueel, .rij__lijst > li { scroll-margin-top: calc(96px * var(--schaal) + 16px); }
.soorten__pdf .knop { gap: calc(10px * var(--schaal)); white-space: normal; text-align: left; }

.advies { padding-bottom: calc(73px * var(--schaal)); }
.advies__vlak {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: calc(48px * var(--schaal)); row-gap: calc(28px * var(--schaal)); align-items: start;
  background: var(--warm); border-radius: calc(16px * var(--schaal)); box-shadow: calc(6px * var(--schaal)) calc(6px * var(--schaal)) 0 var(--warm-schaduw);
  padding: calc(40px * var(--schaal)) calc(36px * var(--schaal));
}
.advies__kop { margin: calc(-4px * var(--schaal)) 0 0; color: var(--groen-donker); font: 600 calc(39px * var(--schaal))/1.1 var(--kop-schrift); letter-spacing: -0.005em; text-wrap: balance; }
.advies__gegevens { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: calc(16px * var(--schaal)) calc(48px * var(--schaal)); font-style: normal; }
.advies__label { margin: 0; color: var(--groen-donker); font: 600 calc(15px * var(--schaal))/1.3 var(--tekst-schrift); }
.advies__groep p { margin: calc(8px * var(--schaal)) 0 0; font-size: var(--min-tekst); line-height: 1.5; }
.advies__groep a { color: inherit; }
.advies__groep a:hover { text-decoration-thickness: 2px; }
/* ---------- Over ons en Contact (geen mock-up; zelfde onderdelen als de productpagina's) ---------- */
.overons { padding: calc(64px * var(--schaal)) 0 calc(73px * var(--schaal)); }
.overons__raster { display: grid; grid-template-columns: minmax(0, 1fr) calc(488px * var(--schaal)); column-gap: calc(48px * var(--schaal)); row-gap: calc(32px * var(--schaal)); align-items: start; }   /* titel op dezelfde hoogte als op de andere pagina's */
.overons__alinea { margin: calc(20px * var(--schaal)) 0 0; max-width: calc(580px * var(--schaal)); font-size: max(var(--min-tekst), calc(18px * var(--schaal))); line-height: 1.5; }
.overons__foto img { width: 100%; height: auto; border-radius: calc(16px * var(--schaal)); box-shadow: calc(6px * var(--schaal)) calc(6px * var(--schaal)) 0 var(--warm-schaduw); }
.advies__gegevens--twee { grid-template-columns: repeat(2, minmax(0, max-content)); }
.advies__knop { grid-column: 1 / -1; margin: calc(8px * var(--schaal)) 0 0; }
.tijden { margin: calc(8px * var(--schaal)) 0 0; font-size: var(--min-tekst); line-height: 1.5; }
.tijden div + div { margin-top: calc(6px * var(--schaal)); }
.tijden dt { color: var(--groen-donker); }
.tijden dd { margin: 0; }
.tijden-kop { margin: calc(16px * var(--schaal)) 0 0; color: var(--groen-donker); font: 600 max(var(--min-klein), calc(13px * var(--schaal)))/1.35 var(--tekst-schrift); }
.tijden__reden { font-weight: 400; }
.contact { padding-bottom: calc(73px * var(--schaal)); }
.contact__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: calc(48px * var(--schaal)); row-gap: calc(32px * var(--schaal)); align-items: start; }
.contact__gegevens { grid-template-columns: minmax(0, 1fr); row-gap: calc(24px * var(--schaal)); font-style: normal; }
.kaart { position: relative; z-index: 0; isolation: isolate; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(16px * var(--schaal)); background: var(--warm); box-shadow: calc(6px * var(--schaal)) calc(6px * var(--schaal)) 0 var(--warm-schaduw); }
.kaart__zonder { margin: 0; padding: calc(20px * var(--schaal)); text-align: center; }
.kaart a { color: var(--groen-donker); }
/* Statische kaart (eigen afbeelding, geen tegels van buiten): vult het 4:3-vlak; bronvermelding eronder */
.kaart__link { display: block; width: 100%; height: 100%; }
.kaart__beeld, .kaart__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kaart__bron { margin: calc(8px * var(--schaal)) 0 0; font-size: max(var(--min-klein, 12px), calc(13px * var(--schaal))); color: var(--tekst-zacht, inherit); }
.contact__route { margin: calc(28px * var(--schaal)) 0 0; }
/* Gratis bezorging (Contact): vlak van het adviesblok, busje in de lijnstijl van de hero-kenmerken */
.bezorging__icoon { display: block; width: calc(32px * var(--schaal)); height: calc(32px * var(--schaal)); margin: 0 0 calc(14px * var(--schaal)); color: var(--groen); }
.bezorging__tekst { margin: calc(16px * var(--schaal)) 0 0; font-size: var(--min-tekst); line-height: 1.5; }
/* Pakketpunt (Contact): zelfde vlak en icoonstijl als bezorging; diensten als lijstje met een klein vierkantje in de lijnkleur */
.pakketpunt__lijst { margin: 0; padding: 0; list-style: none; }
.pakketpunt__lijst li { position: relative; padding-left: calc(20px * var(--schaal)); font-size: var(--min-tekst); line-height: 1.5; }
.pakketpunt__lijst li + li { margin-top: calc(6px * var(--schaal)); }
.pakketpunt__lijst li::before { content: ""; position: absolute; left: 0; top: .6em; width: calc(8px * var(--schaal)); height: calc(8px * var(--schaal)); border: 1.5px solid var(--groen); border-radius: 2px; }
.voet__dienst { white-space: nowrap; }   /* dienstnaam nooit afbreken ("Vinted Go-punt") */
.voet__pakket { margin-top: 12px; color: var(--voet-zacht); font: 400 max(var(--min-klein), calc(13px * var(--schaal)))/1.4 var(--tekst-schrift); }

@media (max-width: 1100px) {
  .pagina-kop { padding-top: calc(40px * var(--schaal)); }
  .pagina-kop__titel { font-size: calc(clamp(36px, 10.4vw, 48px) * var(--schaal)); line-height: 1.08; }
  .advies__vlak { grid-template-columns: minmax(0, 1fr); }
  .overons { padding-top: calc(40px * var(--schaal)); }
  .contact__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .advies__vlak { padding: calc(28px * var(--schaal)) calc(clamp(20px, 5.6vw, 36px) * var(--schaal)) calc(30px * var(--schaal)); }
  .advies__kop { font-size: calc(clamp(30px, 8.2vw, 39px) * var(--schaal)); }
  .advies__gegevens { grid-template-columns: minmax(0, 1fr); }
  .overons__raster { grid-template-columns: minmax(0, 1fr); }
  .soorten__pdf .knop { padding-block: calc(10px * var(--schaal)); line-height: 1.3; }
}

/* ---------- 1101–1439: foto naar rechts, smallere vervaging ----------
   Bij deze breedtes valt bij de opbouw van 1440 de kat en cavia weg in het verloop.
   Subtekst en kenmerken eindigen op tekstkolom + 504 px; daar stopt het dekkende crème (contrast ≥ 4,5).
   Het verloop loopt over 48 px naar 0. De foto wordt zo geplaatst dat 42 % van de fotobreedte
   (net links van de kop van de kat; kat 44–57 %, cavia 51–65 %, hond 52–83 %) precies op het einde van het verloop valt,
   en is minstens zo breed dat hij tot de rechterrand reikt. Verticaal: midden van de dierenband (47,75 % van de fotohoogte)
   op het midden van de hero, zodat de kop van de hond nooit wegvalt (fotobreedte hier ≤ 1340 px: zichtbaar ≥ 65,7 %, nodig 64,5 %). */
@media (min-width: 1101px) and (max-width: 1439px) {
  .hero { --verloop-eind: calc(var(--links) + calc(552px * var(--schaal))); }
  .hero::before {
    background: linear-gradient(90deg, rgba(247,244,238,.98) 0, rgba(247,244,238,.98) calc(var(--links) + calc(504px * var(--schaal))), rgba(247,244,238,0) var(--verloop-eind));
  }
}
/* 1440–1609: verloop van 1440 (tot tekstkolom + 734 px), foto op dezelfde manier geplaatst. Met de vaste 2,5 : 1-foto
   (rechts uitgelijnd) zou de kop van de kat hier in het verloop vallen; vanaf 1610 komen beide opbouwen op hetzelfde uit. */
@media (min-width: 1440px) and (max-width: 1609px) {
  .hero { --verloop-eind: calc(var(--links) + calc(734px * var(--schaal))); }
}
@media (min-width: 1101px) and (max-width: 1609px) {
  .hero { --foto-b: max(1100px, calc((100vw - var(--verloop-eind)) / 0.58)); }
  .hero__beeld img {
    right: auto; aspect-ratio: auto; max-width: none; -webkit-mask-image: none; mask-image: none;
    top: 50%; bottom: auto; transform: translateY(-47.75%); left: calc(var(--verloop-eind) - 0.42 * var(--foto-b));
    width: var(--foto-b); height: auto; min-height: 0;
  }
}

/* ---------- Smaller dan 1100: menuknop met uitklapmenu ---------- */
@media (max-width: 1099px) {
  :root { --kop-hoogte: calc(72px * var(--schaal)); }
  .logo { --logo-inkt: calc(56px * var(--schaal)); }
  .kop__binnen { flex-wrap: wrap; row-gap: 0; align-content: flex-start; }
  /* Bovenste rij altijd even hoog als de balk: logo verspringt niet als het menu opengaat */
  .kop__logo { display: flex; align-items: center; min-height: var(--kop-hoogte); }
  .kop__menuknop {
    display: inline-flex; align-items: center; gap: calc(10px * var(--schaal)); margin-left: auto;
    min-height: calc(44px * var(--schaal)); padding: 0 calc(4px * var(--schaal)); background: none; border: 0; color: var(--wit); cursor: pointer;
    font: 500 calc(15px * var(--schaal))/1 var(--tekst-schrift);
  }
  .kop__menuknop-lijnen, .kop__menuknop-lijnen::before, .kop__menuknop-lijnen::after {
    display: block; width: calc(22px * var(--schaal)); height: calc(2px * var(--schaal)); background: currentColor; border-radius: calc(2px * var(--schaal)); position: relative; transition: transform .15s, background-color .15s;
  }
  .kop__menuknop-lijnen::before, .kop__menuknop-lijnen::after { content: ""; position: absolute; left: 0; }
  .kop__menuknop-lijnen::before { top: calc(-7px * var(--schaal)); }
  .kop__menuknop-lijnen::after { top: calc(7px * var(--schaal)); }
  .kop__menuknop[aria-expanded="true"] .kop__menuknop-lijnen { background: transparent; }
  .kop__menuknop[aria-expanded="true"] .kop__menuknop-lijnen::before { transform: translateY(calc(7px * var(--schaal))) rotate(45deg); }
  .kop__menuknop[aria-expanded="true"] .kop__menuknop-lijnen::after { transform: translateY(calc(-7px * var(--schaal))) rotate(-45deg); }

  .kop__menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: calc(20px * var(--schaal)); margin: 0; padding: calc(8px * var(--schaal)) 0 calc(24px * var(--schaal)); }
  .kop__menuknop[aria-expanded="true"] + .kop__menu { display: flex; }
  .nav__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-top: 1px solid rgba(255,255,255,.18); }
  .nav__link { display: flex; width: 100%; justify-content: space-between; padding: calc(14px * var(--schaal)) 0; font-size: calc(17px * var(--schaal)); }
  .nav__link.is-actief::after { display: none; }
  .nav__link.is-actief { font-weight: 500; }
  .nav__sub { position: static; box-shadow: none; background: transparent; color: var(--wit); padding: 0 0 calc(8px * var(--schaal)); min-width: 0; border-radius: 0; }
  .nav__sub::before { display: none; }
  .nav__sub a { padding: calc(10px * var(--schaal)) calc(16px * var(--schaal)); font-size: calc(16px * var(--schaal)); }
  .nav__sub a:hover { background: rgba(255,255,255,.08); }
  .kop__knop { align-self: flex-start; }
  .kop__menuknop { order: 1; }
  .kop__slot { order: 2; position: static; transform: none; flex: none; margin-left: calc(4px * var(--schaal)); margin-right: -10px; }   /* -10 px: icoon (niet het aanraakvlak) eindigt op de marge */
  .kop__menu { order: 3; }
}

/* ---------- 1100 en smaller: tekst boven, hele foto eronder (keuze Claudia) ---------- */
@media (max-width: 1100px) {
  .hero::before { display: none; }
  .hero__binnen { width: 100%; min-height: 0; padding: calc(40px * var(--schaal)) var(--marge) calc(32px * var(--schaal)); display: block; }
  .hero__beeld img { position: static; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; max-width: 100%; -webkit-mask-image: none; mask-image: none; object-position: 72% 60%; }
  .hero { display: flex; flex-direction: column; }
  .hero__beeld { order: 2; }
  .hero__titel { font-size: calc(clamp(36px, 10.4vw, 48px) * var(--schaal)); line-height: 1.08; }
  .hero__subtekst { font-size: calc(17px * var(--schaal)); margin-top: calc(16px * var(--schaal)); }
  .hero__knoppen { margin-top: calc(28px * var(--schaal)); }
  .hero__kenmerken { margin-top: calc(32px * var(--schaal)); }
  /* Actueel: onder elkaar, tekst eerst; foto max. 488 (gemeten breedte) */
  .actueel__vlak { padding: calc(40px * var(--schaal)) calc(36px * var(--schaal)); }
  .actueel--beide .actueel__vlak { grid-template-columns: minmax(0, 1fr); row-gap: calc(32px * var(--schaal)); }
  .actueel--beide .actueel__foto { max-width: calc(488px * var(--schaal)); }
  /* Waarom: drie kolommen, icoon boven de tekst (geen telefoonontwerp; afgeleid) */
  .waarom__punt { grid-template-columns: minmax(0, 1fr); row-gap: calc(16px * var(--schaal)); padding-left: 0; }
  .waarom__titel { padding-top: 0; }
  /* Even voorstellen: tekst boven, foto eronder (zelfde opbouw als de hero op deze breedtes) */
  .voorstellen__binnen { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .voorstellen__tekst { padding: calc(48px * var(--schaal)) var(--marge) calc(40px * var(--schaal)); }
  .voorstellen__foto { aspect-ratio: 16 / 9; }
  .voorstellen__blad { display: none; }
  .voorstellen__poot { left: auto; right: var(--marge); top: calc(40px * var(--schaal)); }
  .voorstellen__accent { top: calc(22px * var(--schaal)); right: calc(28px * var(--schaal)); font-size: calc(24px * var(--schaal)); }
  /* Footer: merk over de volle breedte, daaronder drie kolommen */
  .voet { padding-top: calc(56px * var(--schaal)); }
  .voet__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(24px * var(--schaal)); row-gap: calc(36px * var(--schaal)); }
  .voet__merk { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 767px) {
  .voet { padding-top: calc(44px * var(--schaal)); }
  .voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(20px * var(--schaal)); row-gap: calc(32px * var(--schaal)); }
  .voet__lijst, .voet__tijden { margin-top: calc(12px * var(--schaal)); }
  .voet__onder { margin-top: calc(36px * var(--schaal)); flex-direction: column; }
  .voorstellen__tekst { padding: calc(40px * var(--schaal)) var(--marge) calc(32px * var(--schaal)); }
  .voorstellen__kop { font-size: calc(clamp(30px, 8.2vw, 40.5px) * var(--schaal)); }
  .voorstellen__alinea { margin-top: calc(24px * var(--schaal)); font-size: calc(17px * var(--schaal)); }
  .voorstellen__foto { aspect-ratio: 4 / 3; }
  .voorstellen__poot { top: calc(34px * var(--schaal)); width: calc(28px * var(--schaal)); height: calc(28px * var(--schaal)); }
  .voorstellen__accent { top: calc(10px * var(--schaal)); right: calc(12px * var(--schaal)); font-size: calc(19px * var(--schaal)); }
  .voorstellen__hartje { margin-top: calc(3px * var(--schaal)); width: calc(14px * var(--schaal)); height: calc(13px * var(--schaal)); }
  /* Waarom: onder elkaar, icoon links, liggende scheidingslijnen */
  .waarom { padding: calc(40px * var(--schaal)) 0 calc(48px * var(--schaal)); }
  .waarom__kop { font-size: calc(clamp(30px, 8.2vw, 39px) * var(--schaal)); }
  .waarom__lijst { grid-template-columns: minmax(0, 1fr); margin-top: calc(28px * var(--schaal)); }
  .waarom__punt { grid-template-columns: calc(60px * var(--schaal)) minmax(0, 1fr); column-gap: calc(20px * var(--schaal)); min-height: 0; padding: calc(20px * var(--schaal)) 0; }
  .waarom__punt:first-child { padding-top: 0; }
  .waarom__punt:last-child { padding-bottom: 0; }
  .waarom__punt + .waarom__punt::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .waarom__icoon { margin-top: 0; }
  .actueel__vlak { padding: calc(28px * var(--schaal)) calc(clamp(20px, 5.6vw, 36px) * var(--schaal)) calc(30px * var(--schaal)); }
  .actueel__kop { font-size: calc(clamp(30px, 8.2vw, 39px) * var(--schaal)); }
  .hero__beeld img { aspect-ratio: 4 / 3; }
}

/* ---------- Lopende tekst ≥ 16 px op alle schermen (keuze Claudia, ter keuze naast de 80 %-versie) ----------
   Alleen lopende tekst; titels, witruimte en de rest blijven op 80 %. Regelafstand als verhouding uit de meting (25,5/18 en 23,5/18). */
body { font-size: max(var(--min-tekst), calc(16px * var(--schaal))); }
.hero__subtekst { font-size: max(var(--min-tekst), calc(18px * var(--schaal))); }
.actueel__bericht, .voorstellen__alinea { font-size: max(var(--min-tekst), calc(18px * var(--schaal))); line-height: 1.4167; }
.waarom__uitleg { font-size: max(var(--min-tekst), calc(18px * var(--schaal))); line-height: 1.3056; }

/* ---------- Telefoon-ondergrens (t/m 768, keuze Claudia) ----------
   De schaal van 80 % maakt tekst op de telefoon te klein. max() laat alleen grotere waarden door:
   lopende tekst ≥ 16 px, kleine teksten ≥ 12 px, knoppen en menu-items ≥ 44 px aanraakhoogte.
   Titels schalen mee zoals hierboven (niet kleiner dan nu). */
@media (max-width: 768px) {
  body { font-size: max(var(--min-tekst), calc(16px * var(--schaal))); }
  /* Lopende tekst */
  .hero__subtekst, .actueel__bericht, .voorstellen__alinea, .waarom__uitleg { font-size: var(--min-tekst); line-height: 1.5; }
  .actueel__titel { font-size: var(--min-tekst); line-height: 1.35; }
  /* Kleine teksten */
  .hero__bovenregel, .voorstellen__label, .kenmerk__tekst, .voet__kop, .voet__lijst, .voet__email, .voet__tijden dt, .voet__tijden dd, .voet__tijden-kop, .voet__onder { font-size: var(--min-klein); line-height: 1.35; }
  .voet__tagline { font-size: max(var(--min-klein), calc(16.5px * var(--schaal))); line-height: 1.45; }
  /* Aanraakhoogte: knoppen, menuknop, menu-items en de links in de footer */
  .knop { min-height: var(--min-raak); font-size: var(--min-tekst); }
  .kop__menuknop { min-height: max(var(--min-raak), var(--kop-hoogte)); font-size: var(--min-tekst); }
  .nav__link { min-height: var(--min-raak); align-items: center; padding-block: 0; font-size: var(--min-tekst); }
  .nav__sub a { display: flex; align-items: center; min-height: var(--min-raak); padding-block: 0; font-size: var(--min-tekst); }
  .voet__lijst--links li + li { margin-top: 0; }
  .voet__lijst--links a, .voet__lijst--links span, .voet__contact a, .voet__onder a { display: inline-flex; align-items: center; min-height: var(--min-raak); }
  .voet__contact { gap: 0; }
  .pagina-kop__bovenregel, .advies__label { font-size: var(--min-klein); }
  .advies__groep a { display: inline-flex; align-items: center; min-height: var(--min-raak); }
  .voet__onder { align-items: baseline; }   /* rij (768): basislijnen gelijk; kolom (< 768): links uitgelijnd */
  .voet__lijst, .voet__tijden { margin-top: calc(4px * var(--schaal)); }
  /* Links zijn 44 px hoog; de lijst schuift de helft van de extra hoogte omhoog, zodat de eerste regel gelijk staat met de buurkolom */
  .voet__lijst--links { margin-top: calc(4px * var(--schaal) - (var(--min-raak) - 1.35em) / 2); }
}

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

/* Powered by VIBE Agency (vibe_standaard BLAUWDRUK C11): letters in de kleur van de footer, punt altijd oranje.
   Op een oranje footer: --kleur-vibe-punt-kader: #000 (zwart kader om de punt). */
.vibe-powered { margin: 0; }
.vibe-powered a { display: inline-flex; align-items: center; gap: .3em; color: inherit; text-decoration: none; white-space: nowrap; }
.vibe-powered a:hover { text-decoration: underline; }
.vibe-powered__woordmerk { display: inline-block; height: 1.1em; width: auto; }
.vibe-powered__woordmerk .vibe-punt-kader { fill: var(--kleur-vibe-punt-kader, transparent); }

/* Privacyverklaring (/privacy, KLANTBEL.md §4): leesbreedte zoals de introtekst, koppen in de stijl van de site */
.privacy__tekst { max-width: 40em; }
.privacy__tekst h2 { margin: calc(32px * var(--schaal)) 0 calc(8px * var(--schaal)); color: var(--groen-donker); font: 600 calc(24px * var(--schaal))/1.2 var(--kop-schrift); }
.privacy__tekst p { margin: 0 0 calc(12px * var(--schaal)); }
.privacy__datum { margin-top: calc(32px * var(--schaal)); }
/* Footer: KvK en btw (alleen als ingevuld) en de link naar de privacyverklaring */
.voet__bedrijf { display: flex; flex-wrap: wrap; gap: 0 calc(16px * var(--schaal)); margin: 0; }