/* ==========================================================================
   Cocon · gedeeld stylesheet · VERSIE K (ronde 7, 4 november 2026)
   = styles-j.css + sectie 26 "Versie K": plattegrond uit de bron, halve cirkels over de volle
   breedte, bollen per vervoersmiddel, contactportret kleiner, "Dit zit erin" in de strook
   erboven. Zie feedback-261104.md.
   Versie J (ronde 6, 3 november 2026)
   = styles-i.css + sectie 25 "Versie J": opsomming, plan op de pagina, rasters in plaats van
   sliders (zalen, materialen). Zie feedback-copy-261103.md.
   Versie I (ronde 5, 20 oktober 2026)
   = styles-h.css (zonder de lichte tinten) + sectie 24 "Versie I": de vaste opbouw van
   Debora en Greet (19/10). Zwarte start, grijze en zwarte stroken, kleurstroken met een
   originele vorm, contactstrook onderaan. Kleurcombinaties strikt volgens het handboek
   (p.13 en 14). Zie feedback-team-261019.md.
   = styles-g.css (secties 1 tot 21, ongewijzigd) + sectie 22 "Versie H":
   rust. Eén kleur per pagina, licht vlak, geen zwarte vlakken, geen kaders,
   geen tekstband, plan in een pop-up. Zie feedback-team-261016.md.
   Kleuren: enkel de zes van het handboek.
   Breakpoints: standaard, max-width 991px, max-width 767px, max-width 479px.
   Extra, enkel voor beweging: prefers-reduced-motion.
   ==========================================================================
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.prod.website-files.com/6849ba2e06e7252bdecd6f25/6849bb08c19a5fa755cf67a4_Aileron-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.prod.website-files.com/6849ba2e06e7252bdecd6f25/6849bb08fb9a4fcc23596d05_Aileron-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.prod.website-files.com/6849ba2e06e7252bdecd6f25/6849bb07b08972dff6f24c1f_Aileron-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. Variabelen
   ========================================================================== */
:root {
  /* Kleur: het palet uit het huisstijlhandboek (p.12). Geen andere kleuren. */
  --color-blauw: #5951f8;             /* primair · RGB 89 81 248 · PMS 2726 C */
  --color-zwart: #1a1a12;             /* primair · RGB 26 26 18 · PMS Neutral Black C */
  --color-groen: #019176;             /* levendige tint · RGB 1 145 118 · PMS 334 C */
  --color-oranje: #e98319;            /* levendige tint · RGB 233 131 25 · PMS 138 C */
  --color-grijs: #dcdcdc;             /* balans · RGB 220 220 220 · PMS 427 C */
  --color-wit: #ffffff;               /* balans · enkel logo en tekst (p.14) */

  /* Kleur: betekenis (verwijzen naar het palet) */
  --color-werken: var(--color-blauw);
  --color-samenkomen: var(--color-oranje);
  --color-maken: var(--color-groen);       /* ronde 2: groen = het gebouw en het circulaire verhaal (geen 'maken' meer) */

  /* Kleur: functies (verwijzen naar het palet) */
  --color-text: var(--color-zwart);
  --color-text-inverse: var(--color-wit);
  --color-background: var(--color-grijs);
  --color-background-dark: var(--color-zwart);
  --color-border: var(--color-zwart);
  --color-focus: var(--color-blauw);
  --color-error: var(--color-zwart);

  /* Lettertype */
  --font-family-base: "Aileron", Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;         /* voorstel: knoppen, navigatie, formulierlabels */
  --font-weight-heading: 400;         /* G: titels in Regular (mock-ups handboek p.22, 26, 27). Variant B: 300 */
  --font-weight-bold: 700;

  /* Lettergrootte per niveau en breakpoint (G: enkel waarden uit de reeks
     14, 16, 18, 24, 28, 32, 40, 44, 56, 64, 88). Titel tegenover tekst:
     H2 = 3 x body, H3 = 1,5 x body, H2 = 2 x H3 (desktop). */
  --font-size-hero: 88px;
  --font-size-hero-tablet: 64px;
  --font-size-hero-mobile: 44px;
  --font-size-h1: 64px;
  --font-size-h1-tablet: 56px;
  --font-size-h1-mobile: 40px;
  --font-size-h2: 56px;
  --font-size-h2-tablet: 40px;
  --font-size-h2-mobile: 32px;
  --font-size-h3: 28px;
  --font-size-h3-tablet: 24px;
  --font-size-h3-mobile: 24px;
  --font-size-body: 18px;
  --font-size-body-tablet: 18px;
  --font-size-body-mobile: 16px;
  --font-size-small: 14px;
  --font-size-ui: 16px;               /* knoppen, navigatie, labels: alle breakpoints */

  /* Regelhoogte */
  --line-height-hero: 1.0;
  --line-height-h1: 1.05;
  --line-height-h2: 1.1;
  --line-height-h3: 1.2;
  --line-height-body: 1.55;
  --line-height-small: 1.45;

  /* Letterspatiëring */
  --letter-spacing-hero: -0.035em;
  --letter-spacing-h1: -0.03em;
  --letter-spacing-h2: -0.025em;
  --letter-spacing-h3: -0.01em;
  --letter-spacing-body: 0em;
  --letter-spacing-small: 0.01em;
  --letter-spacing-label: 0.06em;

  /* Spacing: de enige toegelaten afstanden (8 waarden) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Layout (geen spacing; benoemde uitzonderingen, zie design-system.md) */
  --container-max: 1280px;
  --container-narrow: 760px;
  --measure: 680px;                   /* maximale breedte van lopende tekst */
  --touch-target: 44px;
  --border-width: 1px;
  --focus-width: 3px;
  --radius-pill: 999px;
  --transition: 150ms ease;
  --radius-leaf: 999px 999px 999px var(--space-xs); /* C: knop bij hover, één hoek recht (rups) */
  --shape-offset: var(--space-xl);  /* C: verschuiving van de tweede cirkel achter een portret */
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text);
  background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-weight-heading);
}
h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); }
h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); }
h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
h4, h5, h6 { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-bold); }

p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--space-s); }

strong, b { font-weight: var(--font-weight-bold); }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--border-width);
  transition: text-decoration-thickness var(--transition);
}
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0; padding-left: var(--space-m); max-width: var(--measure); }
li + li { margin-top: var(--space-xs); }

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

/* Zichtbare focus voor alles wat je met het toetsenbord bereikt */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-width);
}

/* ==========================================================================
   3. Typografie (klassen, los van het HTML-niveau te gebruiken)
   ========================================================================== */
.heading-hero {
  font-size: var(--font-size-hero);
  line-height: var(--line-height-hero);
  letter-spacing: var(--letter-spacing-hero);
  font-weight: var(--font-weight-heading);
}
.heading-h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); font-weight: var(--font-weight-heading); }
.heading-h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); font-weight: var(--font-weight-heading); }
.heading-h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); font-weight: var(--font-weight-heading); }
.text-body { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.text-small { font-size: var(--font-size-small); line-height: var(--line-height-small); letter-spacing: var(--letter-spacing-small); }
.text-small.is-label { font-weight: var(--font-weight-regular); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }
.text-muted { color: var(--color-zwart); }
.text-accent { color: var(--color-blauw); }   /* enkel hero, H1, H2 (grote tekst), zie kleurregels */

/* ==========================================================================
   4. Layout: section > container > blokken
   ========================================================================== */
.section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  background-color: var(--color-grijs);
  color: var(--color-zwart);
}
.section.is-light { background-color: var(--color-grijs); }
.section.is-dark { background-color: var(--color-zwart); color: var(--color-wit); }
.section.is-blue { background-color: var(--color-blauw); color: var(--color-zwart); }
.section.is-orange { background-color: var(--color-oranje); color: var(--color-zwart); }
.section.is-green { background-color: var(--color-groen); color: var(--color-zwart); }
.section.is-dark .text-muted { color: var(--color-grijs); }
.section.is-dark .text-accent { color: var(--color-blauw); }
/* Focusrand: blauw haalt 3:1 op grijs, lichtgrijs en zwart; op blauw, groen en oranje wordt hij zwart */
.section.is-blue :focus-visible,
.section.is-green :focus-visible,
.section.is-orange :focus-visible,
.cta-block :focus-visible { outline-color: var(--color-zwart); }

.section.is-hero { padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }
.section.is-flush { padding-top: 0; padding-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.container.is-narrow { max-width: calc(var(--container-narrow) + 2 * var(--space-xl)); }

/* Sectiekop: titel + intro boven een raster of module */
.section-header { max-width: var(--measure); margin-bottom: var(--space-xl); }
.section-header.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header > * + * { margin-top: var(--space-s); }   /* titel naar intro */
.section-header.is-center p { margin-left: auto; margin-right: auto; }

/* Intro: lopende tekst met titel, smal */
.intro { max-width: var(--measure); }
.intro.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.intro > * + * { margin-top: var(--space-m); }            /* titel naar body */
.intro > .button-group { margin-top: var(--space-l); }     /* body naar CTA */

/* Hero: titel, korte tekst, knoppen, beeld */
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-xl);
  align-items: end;
}
.hero-content > * + * { margin-top: var(--space-m); }
.hero-content > .button-group { margin-top: var(--space-l); }

/* Split: tekst naast beeld */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);                                    /* tekst naar beeld */
  align-items: center;
}
.split.is-reversed .split-media { order: -1; }
.split-content > * + * { margin-top: var(--space-m); }
.split-media > * + * { margin-top: var(--space-m); }
.split-content > .button-group { margin-top: var(--space-l); }

/* Kaartenraster */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-m);
  row-gap: var(--space-xl);
}
.card-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Volle breedte beeld */
.media-full { width: 100%; }
.media-full .image { aspect-ratio: 16 / 9; }

/* ==========================================================================
   5. Beeld
   ========================================================================== */
.image { width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 2; }
.image.is-3x2 { aspect-ratio: 3 / 2; }
.image.is-4x5 { aspect-ratio: 4 / 5; }
.image.is-1x1 { aspect-ratio: 1 / 1; }
.image.is-16x9 { aspect-ratio: 16 / 9; }

/* Speelse crops (ongeveer 20% van het beeld), afgeleid van de cirkels in het logo */
.image.is-crop-arch { border-radius: var(--radius-pill) var(--radius-pill) 0 0; }
.image.is-crop-circle { aspect-ratio: 1 / 1; border-radius: 50%; }
.image.is-crop-pill { border-radius: var(--radius-pill); }

.image-caption { margin-top: var(--space-s); font-size: var(--font-size-small); line-height: var(--line-height-small); }

/* Placeholder voor ontbrekend beeld */
.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: var(--space-s);
  background-color: var(--color-grijs);
  color: var(--color-zwart);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  text-align: center;
  border: var(--border-width) dashed var(--color-zwart);
}
.image-placeholder.is-1x1 { aspect-ratio: 1 / 1; }
.image-placeholder.is-4x5 { aspect-ratio: 4 / 5; }
.image-placeholder.is-16x9 { aspect-ratio: 16 / 9; }

/* Cocon-vorm als merkelement (zie regels in design-system.md) */
.brand-shape { display: block; width: 100%; height: auto; }
.brand-shape.is-small { max-width: 160px; }
.brand-shape.is-medium { max-width: 320px; }

/* ==========================================================================
   6. Knoppen en links
   ========================================================================== */
.button-group { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-m);
  border: var(--border-width) solid var(--color-zwart);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.button-primary { background-color: var(--color-zwart); color: var(--color-wit); }
.button-primary:hover { background-color: transparent; color: var(--color-zwart); }
.button-primary:active { background-color: var(--color-grijs); color: var(--color-zwart); }

.button-secondary { background-color: transparent; color: var(--color-zwart); }
.button-secondary:hover { background-color: var(--color-zwart); color: var(--color-wit); }
.button-secondary:active { background-color: var(--color-grijs); color: var(--color-zwart); }

/* Op zwart: omgekeerd */
.button-primary.is-inverse { background-color: var(--color-grijs); color: var(--color-zwart); border-color: var(--color-grijs); }
.button-primary.is-inverse:hover { background-color: transparent; color: var(--color-wit); border-color: var(--color-wit); }
.button-primary.is-inverse:active { background-color: var(--color-wit); color: var(--color-zwart); }
.button-secondary.is-inverse { color: var(--color-wit); border-color: var(--color-wit); }
.button-secondary.is-inverse:hover { background-color: var(--color-grijs); color: var(--color-zwart); border-color: var(--color-grijs); }
.button-secondary.is-inverse:active { background-color: var(--color-wit); color: var(--color-zwart); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: var(--border-width);
}
.text-link:hover { text-decoration-thickness: 2px; }
.text-link:active { text-decoration: none; }
.text-link.is-arrow::after { content: "\2192"; margin-left: var(--space-xs); }

/* Label op een kaart: status of type */
.tag {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-zwart);
  color: var(--color-wit);
  border-radius: var(--radius-pill);
}
.tag.is-orange { background-color: var(--color-oranje); color: var(--color-zwart); }
.tag.is-outline { background-color: transparent; color: inherit; border: var(--border-width) solid currentColor; }

/* ==========================================================================
   7. Navigatie (variant A)
   Webflow: Navbar-element. w--current = actieve pagina, w--open = uitgeklapt.
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-zwart);
  color: var(--color-wit);
}
.navbar-container {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-s) var(--space-xl);
}
.navbar-brand { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.navbar-logo { width: 120px; height: auto; }
.nav-menu { display: flex; align-items: center; gap: var(--space-m); flex: 1; max-width: none; margin: 0; padding: 0; list-style: none; }
.nav-menu > li { margin: 0; }
.nav-link,
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  color: var(--color-wit);
  text-decoration: none;
  cursor: pointer;
}
.nav-link:hover,
.nav-dropdown-toggle:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.nav-link.w--current { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }
.nav-dropdown-toggle::after { content: "\25BE"; margin-left: var(--space-xs); font-size: var(--font-size-small); }

.nav-dropdown { position: relative; }
.nav-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-m));
  gap: var(--space-xl);
  padding: var(--space-m);
  background-color: var(--color-zwart);
  border: var(--border-width) solid var(--color-zwart);
}
.nav-dropdown:hover .nav-dropdown-list,
.nav-dropdown-list.w--open { display: flex; }
.nav-dropdown-column { display: flex; flex-direction: column; min-width: 200px; }
.nav-dropdown-label { color: var(--color-grijs); }
.nav-dropdown-note { max-width: 200px; color: var(--color-grijs); }
.nav-actions { display: flex; align-items: center; gap: var(--space-s); margin-left: auto; }
.nav-menu-button {
  display: none;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  background: none;
  border: var(--border-width) solid var(--color-wit);
  border-radius: var(--radius-pill);
  color: var(--color-wit);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  cursor: pointer;
}
.nav-menu-button.w--open { background-color: var(--color-grijs); color: var(--color-zwart); border-color: var(--color-grijs); }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.footer {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-l);
  background-color: var(--color-zwart);
  color: var(--color-wit);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.footer-column > * + * { margin-top: var(--space-s); }
.footer-heading { color: var(--color-grijs); }
.footer-text { font-size: var(--font-size-small); line-height: var(--line-height-small); }
.footer-links { display: flex; flex-wrap: wrap; column-gap: var(--space-m); max-width: none; margin: 0; padding: 0; list-style: none; }
.footer-links li { margin: 0; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: var(--border-width) solid var(--color-zwart);
  font-size: var(--font-size-small);
}
.footer-partners { display: flex; gap: var(--space-m); align-items: center; }

/* ==========================================================================
   9. CTA-blok
   ========================================================================== */
.cta-block {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-2xl);
  background-color: var(--color-oranje);
  color: var(--color-zwart);
}
.cta-block-content > * + * { margin-top: var(--space-s); }
.cta-block-content > .button-group { margin-top: var(--space-l); }
.cta-block.is-blue { background-color: var(--color-blauw); }   /* enkel titel en knop, geen lopende tekst */

/* ==========================================================================
   10. Contactblok Debora
   ========================================================================== */
.contact-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-l);
  align-items: start;
}
.contact-card-photo { aspect-ratio: 4 / 5; }
.contact-card-body > * + * { margin-top: var(--space-xs); }
.contact-card-links { display: flex; flex-wrap: wrap; column-gap: var(--space-m); }
.contact-card-body > .button-group { margin-top: var(--space-m); }
.contact-card-requests { margin-top: var(--space-m); padding-top: var(--space-m); border-top: var(--border-width) solid currentColor; }
.contact-card-requests > * + * { margin-top: var(--space-xs); }

/* ==========================================================================
   11. Kaarten
   ========================================================================== */
/* Ruimtekaart: kantoren, ateliers, zalen */
.room-card { display: flex; flex-direction: column; }
.room-card > .image,
.room-card > .image-placeholder { margin-bottom: var(--space-s); }
.room-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.room-card-title { margin-top: var(--space-xs); }
.room-card-text { margin-top: var(--space-xs); }
.room-card-price { margin-top: var(--space-s); font-weight: var(--font-weight-bold); }
.room-card-cta { margin-top: auto; padding-top: var(--space-s); }

/* Aanbodkaart: de ingangen Werken, Organiseren, Ontdekken (homepage, Jouw plek) */
.offer-card { display: flex; flex-direction: column; }
.offer-card > .image,
.offer-card > .image-placeholder { margin-bottom: var(--space-m); }
.offer-card-title { margin-top: var(--space-xs); }
.offer-card-text { margin-top: var(--space-s); }
.offer-card > .fact-list { margin-top: var(--space-m); }
.offer-card-cta { margin-top: auto; padding-top: var(--space-m); }

/* Feitenlijst: korte rijen label + feit (capaciteit, prijs, aanbod) */
.fact-list { max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; list-style: none; border-top: var(--border-width) solid currentColor; }
.fact-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-s);
  margin: 0;
  padding: var(--space-xs) 0;
  border-bottom: var(--border-width) solid currentColor;
  font-size: var(--font-size-ui);
  line-height: var(--line-height-small);
}
.fact-item + .fact-item { margin-top: 0; }
.fact-label { font-weight: var(--font-weight-bold); }
.fact-note { margin-top: var(--space-xs); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.card-grid + .fact-note { margin-top: var(--space-m); }

/* Gebruikerskaart: vaste gebruikers en ondernemers in de ateliers */
.user-card { display: flex; flex-direction: column; }
.user-card > .image,
.user-card > .image-placeholder { margin-bottom: var(--space-s); }
.user-card-logo { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--space-l); background-color: var(--color-grijs); }
.user-card-title { margin-top: var(--space-xs); }
.user-card-text { margin-top: var(--space-xs); }

/* Eventkaart (CMS): niet in gebruik sinds ronde 2 */
.event-card { display: flex; flex-direction: column; }
.event-card > .image,
.event-card > .image-placeholder { margin-bottom: var(--space-s); }
.event-card-date { font-weight: var(--font-weight-bold); }
.event-card-title { margin-top: var(--space-xs); }
.event-card-meta { margin-top: var(--space-xs); }
.event-card-cta { margin-top: auto; padding-top: var(--space-s); }

/* Testimonial */
.testimonial { max-width: var(--measure); margin: 0; }
.testimonial-quote { margin: 0; }
.testimonial-quote::before { content: "\201C"; }
.testimonial-quote::after { content: "\201D"; }
.testimonial-author { margin-top: var(--space-m); }

/* ==========================================================================
   12. FAQ-item (uitklapper)
   ========================================================================== */
.faq-list { max-width: var(--container-narrow); border-top: var(--border-width) solid currentColor; }
.faq-item { border-bottom: var(--border-width) solid currentColor; }
.faq-heading { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.faq-list + .text-link { margin-top: var(--space-m); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-m) 0;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  text-align: left;
  cursor: pointer;
}
.faq-question:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.faq-icon { flex: none; transition: transform var(--transition); }
.faq-icon::before { content: "+"; font-size: var(--font-size-h3); line-height: 1; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding-bottom: var(--space-m); }
.faq-item.is-open .faq-answer { display: block; }

/* ==========================================================================
   13. Formulieren
   ========================================================================== */
.form { max-width: var(--container-narrow); }
.form > * + * { margin-top: var(--space-m); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.form-field > * + * { margin-top: var(--space-xs); }
.form-label { display: block; font-size: var(--font-size-ui); font-weight: var(--font-weight-regular); }
.form-help { font-size: var(--font-size-small); color: var(--color-zwart); }
.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-s);
  background-color: var(--color-grijs);
  border: var(--border-width) solid var(--color-zwart);
  border-radius: 0;
  color: var(--color-zwart);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-body);
}
.form-textarea { min-height: 160px; resize: vertical; }
.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-width: 2px; padding: calc(var(--space-xs) - 1px) calc(var(--space-s) - 1px); }
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error { border-width: 2px; border-color: var(--color-zwart); background-color: var(--color-wit); }
.form-error {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-oranje);
  color: var(--color-zwart);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}
.form-fieldset { margin: 0; padding: 0; border: 0; }
.form-legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--font-size-ui); font-weight: var(--font-weight-regular); }
.form-option {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: var(--touch-target);
  font-size: var(--font-size-ui);
  cursor: pointer;
}
.form-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-zwart); }
.form-options { display: flex; flex-wrap: wrap; column-gap: var(--space-l); }
.form-expand { border-top: var(--border-width) solid currentColor; border-bottom: var(--border-width) solid currentColor; }
.form-expand > summary { list-style: none; }
.form-expand > summary::-webkit-details-marker { display: none; }
.form-expand[open] .faq-icon { transform: rotate(45deg); }
.form-expand-body { padding-bottom: var(--space-m); }
.form-expand-body > * + * { margin-top: var(--space-s); }
.form-expand + .form-expand { border-top: 0; margin-top: 0; }
.form-section-title { margin-top: var(--space-xl); }
.form-section-title + * { margin-top: var(--space-s); }
.form-option .text-muted { margin-left: var(--space-2xs); }
.form-success { padding: var(--space-m); background-color: var(--color-grijs); }

/* ==========================================================================
   14. Bereikbaarheid
   ========================================================================== */
.access {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-xl);
  align-items: start;
}
.access-list { max-width: none; margin: 0; padding: 0; list-style: none; border-top: var(--border-width) solid currentColor; }
.access-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-m);
  margin: 0;
  padding: var(--space-s) 0;
  border-bottom: var(--border-width) solid currentColor;
}
.access-mode { font-weight: var(--font-weight-bold); }
.access-map > .image-caption,
.access-map > .text-small { margin-top: var(--space-s); }   /* kaart naar legenda */
.access-list + .text-link { margin-top: var(--space-s); }

/* ==========================================================================
   15. Tijdlijn (geschiedenis)
   Jaartal en lijn links, tekst in het midden, foto buiten. Beeld wisselt
   met .is-reversed tussen buitenste en middelste kolom; de lijn loopt door.
   ========================================================================== */
.timeline { max-width: none; margin: 0; padding: 0; list-style: none; }
.timeline-item {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  grid-template-areas: "year content media";
  column-gap: var(--space-xl);
  margin: 0;
}
.timeline-item.is-reversed { grid-template-areas: "year media content"; }
.timeline-year {
  grid-area: year;
  position: relative;
  padding-right: var(--space-m);
  border-right: var(--border-width) solid currentColor;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  text-align: right;
}
.timeline-year::after {
  content: "";
  position: absolute;
  top: var(--space-xs);
  right: calc(-1 * var(--space-xs) - 0.5px);
  width: var(--space-s);
  height: var(--space-s);
  border-radius: 50%;
  background-color: var(--color-blauw);
}
.timeline-content { grid-area: content; padding-bottom: var(--space-3xl); }
.timeline-content > * + * { margin-top: var(--space-s); }
.timeline-media { grid-area: media; padding-bottom: var(--space-3xl); }
.timeline-media .image { aspect-ratio: 3 / 2; filter: grayscale(0); }

/* ==========================================================================
   16. Breakpoints
   ========================================================================== */
@media screen and (max-width: 991px) {
  .heading-hero { font-size: var(--font-size-hero-tablet); }
  .heading-h1, h1 { font-size: var(--font-size-h1-tablet); }
  .heading-h2, h2 { font-size: var(--font-size-h2-tablet); }
  .heading-h3, h3 { font-size: var(--font-size-h3-tablet); }
  body, .text-body { font-size: var(--font-size-body-tablet); }

  .section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .section.is-hero { padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
  .container { padding-left: var(--space-l); padding-right: var(--space-l); }
  .container.is-narrow { max-width: calc(var(--container-narrow) + 2 * var(--space-l)); }
  .section-header { margin-bottom: var(--space-l); }

  .hero-grid { grid-template-columns: 1fr; gap: var(--space-l); }
  .split { gap: var(--space-l); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-l); }
  .card-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .navbar-container { padding-left: var(--space-l); padding-right: var(--space-l); gap: var(--space-m); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); }
  .cta-block { grid-template-columns: 1fr; gap: var(--space-l); padding: var(--space-xl); }
  .access { grid-template-columns: 1fr; gap: var(--space-l); }
  .timeline-item { grid-template-columns: 120px 1fr 1fr; column-gap: var(--space-l); }
  .timeline-content, .timeline-media { padding-bottom: var(--space-2xl); }
}

@media screen and (max-width: 767px) {
  .heading-hero { font-size: var(--font-size-hero-mobile); }
  .heading-h1, h1 { font-size: var(--font-size-h1-mobile); }
  .heading-h2, h2 { font-size: var(--font-size-h2-mobile); }
  .heading-h3, h3 { font-size: var(--font-size-h3-mobile); }
  body, .text-body { font-size: var(--font-size-body-mobile); }

  .section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .section.is-hero { padding-top: var(--space-l); padding-bottom: var(--space-xl); }
  .container { padding-left: var(--space-s); padding-right: var(--space-s); }
  .container.is-narrow { max-width: calc(var(--container-narrow) + 2 * var(--space-s)); }
  .section-header { margin-bottom: var(--space-l); }
  .section-header > * + * { margin-top: var(--space-s); }
  .intro > * + *,
  .hero-content > * + *,
  .split-content > * + * { margin-top: var(--space-s); }
  .intro > .button-group,
  .hero-content > .button-group,
  .split-content > .button-group,
  .cta-block-content > .button-group { margin-top: var(--space-m); }

  .split { grid-template-columns: 1fr; gap: var(--space-m); }
  .split.is-reversed .split-media { order: 0; }
  .card-grid,
  .card-grid.is-2,
  .card-grid.is-4 { grid-template-columns: 1fr; column-gap: var(--space-s); row-gap: var(--space-l); }

  /* Navigatie: hamburger */
  .navbar-container { flex-wrap: wrap; padding-left: var(--space-s); padding-right: var(--space-s); gap: var(--space-xs); }
  .nav-menu-button { display: inline-flex; align-items: center; justify-content: center; }
  .nav-menu {
    display: none;
    order: 3;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-xs) 0 var(--space-m);
  }
  .nav-menu.w--open { display: flex; }
  .nav-menu > li { border-bottom: var(--border-width) solid var(--color-zwart); }
  .nav-link, .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
  .nav-dropdown-list {
    position: static;
    flex-direction: column;
    gap: var(--space-s);
    padding: 0 0 var(--space-s) var(--space-s);
    border: 0;
  }
  .nav-dropdown:hover .nav-dropdown-list { display: none; }
  .nav-dropdown-list.w--open { display: flex; }
  .nav-dropdown-note { display: none; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-block { padding: var(--space-l) var(--space-m); }
  .contact-card { grid-template-columns: 1fr; gap: var(--space-m); }
  .contact-card-photo { max-width: 200px; }
  .form-row { grid-template-columns: 1fr; }
  .form-section-title { margin-top: var(--space-l); }
  .access-item { grid-template-columns: 1fr; gap: var(--space-2xs); }

  .timeline-item,
  .timeline-item.is-reversed {
    grid-template-columns: 1fr;
    grid-template-areas: "year" "content" "media";
    padding-left: var(--space-m);
    border-left: var(--border-width) solid currentColor;
  }
  .timeline-year { border-right: 0; padding-right: 0; text-align: left; }
  .timeline-year::after { right: auto; left: calc(-1 * var(--space-m) - var(--space-xs) - 0.5px); }
  .timeline-content { padding-bottom: var(--space-s); margin-top: var(--space-xs); }
  .timeline-media { padding-bottom: var(--space-xl); }
}

@media screen and (max-width: 479px) {
  .button-group { flex-direction: column; align-items: stretch; }
  .button-group .text-link { justify-content: center; }
  .nav-actions .button-primary { padding-left: var(--space-s); padding-right: var(--space-s); }
  .navbar-logo { width: 96px; }
  .footer-partners { flex-wrap: wrap; }
}


/* ==========================================================================
   17. VERSIE D: warm en speels, enkel huisstijlkleuren (zie kleuren-huisstijl.md)
   Elke combinatie hieronder staat op p.13 van het handboek als toegelaten.
   Lopende tekst enkel op zwart (wit, grijs, oranje), grijs (zwart) of oranje (zwart).
   Blauw en groen dragen enkel grote tekst, knoppen, vormen en beeld.
   ========================================================================== */

/* Secties */
.section.is-light { border-top: var(--border-width) solid var(--color-zwart); }   /* grijs zoals de basis, gescheiden door een lijn */
.section.is-green :focus-visible,
.section.is-orange :focus-visible,
.section.is-blue :focus-visible { outline-color: var(--color-zwart); }

/* Tekstkleur in een merkkleur: enkel grote tekst (H3 en groter) op zwart */
.section.is-dark .text-blauw { color: var(--color-blauw); }
.section.is-dark .text-groen { color: var(--color-groen); }
.section.is-dark .text-oranje { color: var(--color-oranje); }

/* Navigatie: grijs met zwart, blauw logo (p.13: blauw en zwart op grijs) */
.navbar { background-color: var(--color-grijs); color: var(--color-zwart); border-bottom: var(--border-width) solid var(--color-zwart); }
.nav-link,
.nav-dropdown-toggle { color: var(--color-zwart); }
.nav-dropdown-list { background-color: var(--color-grijs); border-color: var(--color-zwart); }
.nav-dropdown-label,
.nav-dropdown-note { color: var(--color-zwart); }
.nav-menu-button { color: var(--color-zwart); border-color: var(--color-zwart); }
.nav-menu-button.w--open { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.nav-link.w--current { text-decoration-color: var(--color-oranje); text-decoration-thickness: 3px; }

/* Knoppen: hover oranje met een rechte hoek (de rups). Op oranje wordt de hover zwart. */
.button-primary,
.button-secondary { transition: background-color var(--transition), color var(--transition), border-color var(--transition), border-radius var(--transition); }
.button-primary:hover { background-color: var(--color-oranje); color: var(--color-zwart); border-color: var(--color-zwart); border-radius: var(--radius-leaf); }
.button-secondary:hover { background-color: var(--color-oranje); color: var(--color-zwart); border-color: var(--color-zwart); border-radius: var(--radius-leaf); }
.button-primary:active,
.button-secondary:active { background-color: var(--color-zwart); color: var(--color-wit); }
.button-primary.is-inverse:hover,
.button-secondary.is-inverse:hover { background-color: var(--color-oranje); color: var(--color-zwart); border-color: var(--color-oranje); border-radius: var(--radius-leaf); }
.button-primary.is-accent { background-color: var(--color-oranje); color: var(--color-zwart); border-color: var(--color-zwart); }
.button-primary.is-accent:hover { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.section.is-orange .button-primary:hover,
.section.is-orange .button-secondary:hover,
.cta-block .button-primary:hover,
.cta-block .button-secondary:hover { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); border-radius: var(--radius-leaf); }

/* Tekstlink: driehoek (bewegwijzering p.30), oranje onderlijn bij hover */
.text-link.is-arrow::after { content: "\25B8"; }
.text-link:hover { text-decoration-color: var(--color-oranje); text-decoration-thickness: 3px; }
.section.is-orange .text-link:hover { text-decoration-color: var(--color-zwart); }

/* Label met een stip in de kleur van de betekenis (stip = kleinste cocon-vorm) */
.text-small.is-label.has-dot { display: inline-flex; align-items: center; gap: var(--space-xs); }
.text-small.is-label.has-dot::before { content: ""; width: 0.9em; height: 0.9em; border-radius: 50%; background-color: currentColor; flex: none; }
.text-small.is-label.has-dot.is-werken::before { background-color: var(--color-werken); }
.text-small.is-label.has-dot.is-samenkomen::before { background-color: var(--color-samenkomen); }
.text-small.is-label.has-dot.is-maken::before { background-color: var(--color-maken); }

/* Markering in een titel: zwart op blauw, oranje of groen (p.13). Enkel grote tekst. */
.text-highlight {
  padding: 0 0.18em;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  color: var(--color-zwart);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.text-highlight.is-werken { background-color: var(--color-werken); }
.text-highlight.is-samenkomen { background-color: var(--color-samenkomen); }
.text-highlight.is-maken { background-color: var(--color-maken); }

/* Hero: foto in de cocon-vorm op een blauw vlak (affiches p.18, 24) */
.hero-grid { grid-template-columns: 8fr 4fr; }
.hero-media { position: relative; }
.hero-media.is-blauw { padding: var(--space-l); background-color: var(--color-blauw); }
.image.is-mask-cocon {
  aspect-ratio: 156.3 / 256.8;
  /* Masker = assets/brand/vorm4-staand.svg (vorm 4 rechtop), ingebed zodat het ook lokaal werkt. */
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTYuMyAyNTYuOCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU2LjMgMCkgcm90YXRlKDkwKSI+PHBhdGggZmlsbD0iIzFhMWExMiIgZD0iTTE3NS42LDBjLTE3LjYsMC0zMy45LDUuNC00Ny4yLDE0LjZDMTE1LjEsNS40LDk4LjgsMCw4MS4yLDBDMzYuNCwwLDAsMzUsMCw3OC4xYzAsNDMuMiwzNi40LDc4LjEsODEuMiw3OC4xCgkJYzE3LjYsMCwzMy45LTUuNCw0Ny4yLTE0LjVjMTMuMyw5LjEsMjkuNiwxNC41LDQ3LjIsMTQuNWM0NC45LDAsODEuMi0zNSw4MS4yLTc4LjFDMjU2LjgsMzUsMjIwLjQsMCwxNzUuNiwweiIvPjwvZz48L3N2Zz4=") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTYuMyAyNTYuOCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU2LjMgMCkgcm90YXRlKDkwKSI+PHBhdGggZmlsbD0iIzFhMWExMiIgZD0iTTE3NS42LDBjLTE3LjYsMC0zMy45LDUuNC00Ny4yLDE0LjZDMTE1LjEsNS40LDk4LjgsMCw4MS4yLDBDMzYuNCwwLDAsMzUsMCw3OC4xYzAsNDMuMiwzNi40LDc4LjEsODEuMiw3OC4xCgkJYzE3LjYsMCwzMy45LTUuNCw0Ny4yLTE0LjVjMTMuMyw5LjEsMjkuNiwxNC41LDQ3LjIsMTQuNWM0NC45LDAsODEuMi0zNSw4MS4yLTc4LjFDMjU2LjgsMzUsMjIwLjQsMCwxNzUuNiwweiIvPjwvZz48L3N2Zz4=") center / contain no-repeat;
}
.badge-round {
  position: absolute;
  left: calc(-1 * var(--space-l));
  bottom: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 9rem;
  padding: var(--space-s);
  border-radius: 50%;
  background-color: var(--color-zwart);    /* oranje tekst op zwart (p.13). Een zwarte vorm mag op blauw en op grijs. */
  color: var(--color-oranje);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-bold);
  text-align: center;
  transform: rotate(-8deg);
}

/* Aanbodkaart: de foto staat op een vlak in de kleur van de betekenis, de tekst op grijs */
.offer-card.is-werken > .image,
.offer-card.is-samenkomen > .image,
.offer-card.is-maken > .image { padding: var(--space-m); }
.offer-card.is-werken > .image { background-color: var(--color-werken); }
.offer-card.is-samenkomen > .image { background-color: var(--color-samenkomen); }
.offer-card.is-maken > .image { background-color: var(--color-maken); }

/* Losse foto op een vlak in de kleur van haar betekenis (ronde 2, homepage Organiseren) */
.image.is-panel { padding: var(--space-m); }
.image.is-panel.is-werken { background-color: var(--color-werken); }
.image.is-panel.is-samenkomen { background-color: var(--color-samenkomen); }
.image.is-panel.is-maken { background-color: var(--color-maken); }

/* Foto in een cirkel met een tweede cirkel in kleur erachter (vorm 4) */
.image.has-shape { margin-bottom: var(--shape-offset); }
.image.has-shape.is-werken { box-shadow: 0 var(--shape-offset) 0 0 var(--color-werken); }
.image.has-shape.is-samenkomen { box-shadow: 0 var(--shape-offset) 0 0 var(--color-samenkomen); }
.image.has-shape.is-maken { box-shadow: 0 var(--shape-offset) 0 0 var(--color-maken); }
.contact-card-photo.is-cocon {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 0 var(--shape-offset) 0 0 var(--color-zwart);   /* zwarte vorm op oranje (p.13) */
  margin-bottom: var(--shape-offset);
}
.contact-card-requests { border-top-color: var(--color-zwart); }

/* FAQ: plus in een oranje cirkel */
.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-l);
  height: var(--space-l);
  border-radius: 50%;
  background-color: var(--color-oranje);
  color: var(--color-zwart);
}
.faq-icon::before { font-size: var(--font-size-ui); font-weight: var(--font-weight-bold); }

/* Bereikbaarheid: stip in blauw */
.access-mode { display: inline-flex; align-items: baseline; gap: var(--space-xs); }
.access-mode::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background-color: var(--color-blauw); flex: none; }

/* Speelse crop: drie ronde hoeken, één recht */
.image.is-crop-leaf { border-radius: var(--radius-leaf); }

/* Placeholders, velden en vlakken: enkel grijs, zwart en oranje */
.image-placeholder { background-color: transparent; color: var(--color-zwart); border-color: var(--color-zwart); }
.form-input,
.form-select,
.form-textarea { background-color: transparent; border-color: var(--color-zwart); color: var(--color-zwart); }
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error { background-color: transparent; }
.section.is-dark .form-input,
.section.is-dark .form-select,
.section.is-dark .form-textarea,
.footer .form-input { background-color: var(--color-grijs); border-color: var(--color-grijs); color: var(--color-zwart); }
.form-success { background-color: var(--color-oranje); color: var(--color-zwart); }
.user-card-logo { background-color: transparent; border: var(--border-width) solid var(--color-zwart); }
.footer-heading { color: var(--color-wit); }   /* grijs op zwart staat niet in de lijst van het handboek (p.13) */
.footer-bottom { border-top-color: var(--color-grijs); }

@media screen and (max-width: 991px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 360px; }
  .offer-card.is-werken > .image,
  .offer-card.is-samenkomen > .image,
  .offer-card.is-maken > .image { padding: var(--space-s); }
}
@media screen and (max-width: 767px) {
  .nav-menu > li { border-bottom-color: var(--color-zwart); }
  .hero-media { max-width: 280px; margin-left: auto; margin-right: auto; }
  .hero-media.is-blauw { padding: var(--space-m); }
  .badge-round { width: 7rem; height: 7rem; left: calc(-1 * var(--space-s)); bottom: var(--space-m); }
}


/* ==========================================================================
   18. VERSIE E: kleur draagt de secties, beweging waar het iets toevoegt
   Kleur per aanbod (wegwijzer, zoals de signalisatieposters p.30):
     blauw = werken · oranje = organiseren en samenkomen · groen = het gebouw
     zwart en grijs = Cocon algemeen en praktisch
   Elke sectie: zwart of grijs + hoogstens één merkkleur als vol vlak.
   Interacties: zie interacties.md (nummers tussen haakjes).
   ========================================================================== */
:root {
  --transition-slow: 400ms ease;       /* E: kaarten, tabbladen, carrousel */
  --marquee-duration: 45s;             /* E: één volledige ronde van de tekstband */
  --slideshow-duration: 18s;           /* E: drie beelden van 6 seconden */
  --pin-size: 40px;                    /* E: punt op de plattegrond (≥ touch target met ring) */
}

/* Navigatie: vaste knop "Plan een afspraak met Debora" (interactie 6) */
.nav-cta-short { display: none; }
.nav-dropdown-label.has-dot { display: inline-flex; }

/* Feitenlabel met stip (hero op zwart) */
.fact-label.has-dot { display: inline-flex; align-items: center; gap: var(--space-xs); }
.fact-label.has-dot::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; flex: none; }
.fact-label.has-dot.is-werken::before { background-color: var(--color-werken); }
.fact-label.has-dot.is-samenkomen::before { background-color: var(--color-samenkomen); }
.fact-label.has-dot.is-maken::before { background-color: var(--color-maken); }

/* --------------------------------------------------------------------------
   18.1 Hero op zwart, met beweging in de cocon-vorm (interactie 1)
   Webflow: Background Video met dezelfde vorm. Tot de video er is: drie foto's
   die rustig in elkaar overvloeien.
   -------------------------------------------------------------------------- */
.section.is-hero.is-dark { border-bottom: 0; }
.hero-slideshow {
  position: relative;
  aspect-ratio: 156.3 / 256.8;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTYuMyAyNTYuOCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU2LjMgMCkgcm90YXRlKDkwKSI+PHBhdGggZmlsbD0iIzFhMWExMiIgZD0iTTE3NS42LDBjLTE3LjYsMC0zMy45LDUuNC00Ny4yLDE0LjZDMTE1LjEsNS40LDk4LjgsMCw4MS4yLDBDMzYuNCwwLDAsMzUsMCw3OC4xYzAsNDMuMiwzNi40LDc4LjEsODEuMiw3OC4xCgkJYzE3LjYsMCwzMy45LTUuNCw0Ny4yLTE0LjVjMTMuMyw5LjEsMjkuNiwxNC41LDQ3LjIsMTQuNWM0NC45LDAsODEuMi0zNSw4MS4yLTc4LjFDMjU2LjgsMzUsMjIwLjQsMCwxNzUuNiwweiIvPjwvZz48L3N2Zz4=") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTYuMyAyNTYuOCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU2LjMgMCkgcm90YXRlKDkwKSI+PHBhdGggZmlsbD0iIzFhMWExMiIgZD0iTTE3NS42LDBjLTE3LjYsMC0zMy45LDUuNC00Ny4yLDE0LjZDMTE1LjEsNS40LDk4LjgsMCw4MS4yLDBDMzYuNCwwLDAsMzUsMCw3OC4xYzAsNDMuMiwzNi40LDc4LjEsODEuMiw3OC4xCgkJYzE3LjYsMCwzMy45LTUuNCw0Ny4yLTE0LjVjMTMuMyw5LjEsMjkuNiwxNC41LDQ3LjIsMTQuNWM0NC45LDAsODEuMi0zNSw4MS4yLTc4LjFDMjU2LjgsMzUsMjIwLjQsMCwxNzUuNiwweiIvPjwvZz48L3N2Zz4=") center / contain no-repeat;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: hero-fade var(--slideshow-duration) ease-in-out infinite;
}
.hero-slide:nth-child(1) { animation-delay: -1s; }
.hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-slide:nth-child(3) { animation-delay: 11s; }
@keyframes hero-fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  33%  { opacity: 1; }
  39%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero-slideshow.is-paused .hero-slide { animation-play-state: paused; }
.media-note {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  max-width: 14rem;
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-zwart);
  color: var(--color-wit);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

/* Knop om beweging te pauzeren (WCAG 2.2.2): hero en tekstband */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-target);
  padding: var(--space-2xs) var(--space-s);
  background-color: var(--color-zwart);
  color: var(--color-wit);
  border: var(--border-width) solid var(--color-zwart);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}
.motion-toggle::before { content: "\275A\275A"; font-size: 0.7em; letter-spacing: -0.1em; }
.motion-toggle[aria-pressed="true"]::before { content: "\25B6"; letter-spacing: 0; }
.motion-toggle:hover { background-color: var(--color-oranje); color: var(--color-zwart); }
.hero-media > .motion-toggle { position: absolute; right: var(--space-s); bottom: var(--space-s); }

/* --------------------------------------------------------------------------
   18.2 Tekstband (interactie 2). Webflow: Interactions, Page load, loop:
   Move X van 0 naar -50% in 45 s, lineair. Twee identieke lijsten naast elkaar.
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
  background-color: var(--color-zwart);
  color: var(--color-wit);
  border-top: var(--border-width) solid var(--color-zwart);
  border-bottom: var(--border-width) solid var(--color-zwart);
}
.marquee.is-green { background-color: var(--color-groen); color: var(--color-zwart); }      /* zwart op groen: enkel grote tekst (4,4:1) */
.marquee.is-blue { background-color: var(--color-blauw); color: var(--color-zwart); }        /* zwart op blauw: enkel grote tekst (3,3:1) */
.marquee.is-orange { background-color: var(--color-oranje); color: var(--color-zwart); }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-list { display: flex; flex: none; max-width: none; margin: 0; padding: 0; list-style: none; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-right: var(--space-xl);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  white-space: nowrap;
}
.marquee-item + .marquee-item { margin-top: 0; }
/* Scheiding: twee overlappende cirkels, de kleinste vorm van de rups */
.marquee-item::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin-right: calc(var(--space-xl) * 0.5 + 0.3em);
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0.3em 0 0 0 currentColor;
}
.marquee > .motion-toggle { position: absolute; right: var(--space-s); top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   18.3 Organiseren op oranje, met testimonials als carrousel (interactie 5)
   Webflow: Slider-component, één slide per testimonial, geen autoplay.
   -------------------------------------------------------------------------- */
.section.is-orange .text-small.is-label { color: var(--color-zwart); }
.testimonial-slider {
  padding: var(--space-l);
  background-color: var(--color-zwart);     /* zwarte vorm op oranje (p.13) */
  color: var(--color-wit);
}
.testimonial-slider :focus-visible { outline-color: var(--color-oranje); }
.testimonial-slider-mask { display: grid; }
.testimonial-slide {
  grid-area: 1 / 1;
  max-width: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--space-s));
  transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
}
.testimonial-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.testimonial-slide .testimonial-author { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); color: var(--color-grijs); }
.slider-nav { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-m); }
.slider-dots { display: flex; }
.slider-arrow,
.slider-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-wit);
  cursor: pointer;
}
.slider-arrow { border: var(--border-width) solid var(--color-grijs); border-radius: 50%; transition: background-color var(--transition), color var(--transition), border-color var(--transition); }
.slider-arrow.is-prev::before { content: "\25C2"; }
.slider-arrow.is-next::before { content: "\25B8"; }
.slider-arrow:hover { background-color: var(--color-oranje); color: var(--color-zwart); border-color: var(--color-oranje); }
.slider-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: var(--border-width) solid var(--color-grijs); transition: background-color var(--transition), border-color var(--transition); }
.slider-dot.is-active::before { background-color: var(--color-oranje); border-color: var(--color-oranje); }

/* --------------------------------------------------------------------------
   18.4 Aanbodkaart als link, op een vol kleurvlak (interactie 3)
   Webflow: Link Block met hover-stijlen en transities op de kinderen.
   Aanraakscherm (991px en kleiner): de knop staat altijd gevuld, geen zoom.
   -------------------------------------------------------------------------- */
.offer-card.is-link { color: inherit; text-decoration: none; }
.offer-card-media {
  overflow: hidden;
  margin-bottom: var(--space-m);
  padding: var(--space-l);
  background-color: var(--color-zwart);
}
.offer-card.is-werken .offer-card-media { background-color: var(--color-werken); }
.offer-card.is-samenkomen .offer-card-media { background-color: var(--color-samenkomen); }
.offer-card.is-maken .offer-card-media { background-color: var(--color-maken); }
.offer-card-media .image { transition: transform var(--transition-slow); }
.offer-card-title { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.2em; transition: text-decoration-color var(--transition); }
.offer-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-m);
  border: var(--border-width) solid var(--color-zwart);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  transition: background-color var(--transition), color var(--transition), border-radius var(--transition);
}
.offer-card-arrow::after { content: "\25B8"; transition: transform var(--transition-slow); }
.offer-card.is-link:hover .offer-card-media .image { transform: translate(var(--space-s), calc(-1 * var(--space-s))) scale(1.04); }
.offer-card.is-link:hover .offer-card-title { text-decoration-color: currentColor; }
.offer-card.is-link:hover .offer-card-arrow { background-color: var(--color-zwart); color: var(--color-wit); border-radius: var(--radius-leaf); }
.offer-card.is-link:hover .offer-card-arrow::after { transform: translateX(var(--space-xs)); }
.offer-card.is-link:active .offer-card-media .image { transform: scale(0.98); }

/* --------------------------------------------------------------------------
   18.5 Wat vind je waar: plattegrond met tabbladen (interactie 4)
   Webflow: Tabs-component (tab-links + panes). De punten op de plattegrond
   krijgen hun actieve stijl via een Interaction "Mouse click" op elke tab-link.
   -------------------------------------------------------------------------- */
.siteplan {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-areas: "menu menu" "map content";
  column-gap: var(--space-xl);
  row-gap: var(--space-l);
}
.siteplan-menu { grid-area: menu; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.siteplan-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-m);
  background-color: transparent;
  border: var(--border-width) solid var(--color-grijs);
  border-radius: var(--radius-pill);
  color: var(--color-wit);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.siteplan-tab::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; flex: none; background-color: var(--color-grijs); }
.siteplan-tab.is-werken::before { background-color: var(--color-werken); }
.siteplan-tab.is-samenkomen::before { background-color: var(--color-samenkomen); }
.siteplan-tab.is-maken::before { background-color: var(--color-maken); }
.siteplan-tab:hover { border-color: var(--color-wit); text-decoration: underline; text-underline-offset: 0.25em; }
.siteplan-tab.w--current { background-color: var(--color-grijs); border-color: var(--color-grijs); color: var(--color-zwart); text-decoration: none; }
.siteplan-tab.is-neutral.w--current::before { background-color: var(--color-zwart); }

.siteplan-map {
  grid-area: map;
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--space-m);
  background-color: var(--color-grijs);
  color: var(--color-zwart);
  border: var(--border-width) dashed var(--color-zwart);
}
.siteplan-map-label { max-width: 22rem; font-size: var(--font-size-small); line-height: var(--line-height-small); }
.siteplan-pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pin-size);
  height: var(--pin-size);
  border-radius: 50%;
  background-color: var(--color-zwart);
  color: var(--color-zwart);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.siteplan-pin.is-werken { background-color: var(--color-werken); }
.siteplan-pin.is-samenkomen { background-color: var(--color-samenkomen); }
.siteplan-pin.is-maken { background-color: var(--color-maken); }
.siteplan-pin.is-neutral { background-color: var(--color-zwart); color: var(--color-wit); }
.siteplan-pin.is-kantoren { left: 24%; top: 28%; }
.siteplan-pin.is-ateliers { left: 46%; top: 22%; }
.siteplan-pin.is-zalen { left: 68%; top: 40%; }
.siteplan-pin.is-buiten { left: 44%; top: 56%; }
.siteplan-pin.is-parking { left: 84%; top: 74%; }
.siteplan-pin.w--current { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 0 4px var(--color-grijs), 0 0 0 6px var(--color-zwart); z-index: 1; }

.siteplan-content { grid-area: content; }
.siteplan-pane > * + * { margin-top: var(--space-s); }
.siteplan-pane > .image { margin-bottom: var(--space-m); }
.siteplan-pane[hidden] { display: none; }
.siteplan-pane.w--tab-active { animation: pane-in var(--transition-slow); }
@keyframes pane-in {
  from { opacity: 0; transform: translateY(var(--space-xs)); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18.6 Breakpoints (enkel de vier toegelaten)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
  .offer-card-media { padding: var(--space-m); }
  /* Aanraakscherm: geen hover nodig, de knop toont dat de kaart klikbaar is */
  .offer-card-arrow { background-color: var(--color-zwart); color: var(--color-wit); }
  .offer-card.is-link:hover .offer-card-media .image { transform: none; }
  .siteplan { column-gap: var(--space-l); }
}
@media screen and (max-width: 767px) {
  .siteplan { grid-template-columns: 1fr; grid-template-areas: "menu" "map" "content"; row-gap: var(--space-m); }
  .siteplan-menu { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--space-s)); margin-right: calc(-1 * var(--space-s)); padding-left: var(--space-s); padding-right: var(--space-s); padding-bottom: var(--space-2xs); }
  .siteplan-tab { flex: none; }
  .siteplan-map { padding: var(--space-s); }
  .testimonial-slider { padding: var(--space-m); }
  .marquee { padding-top: var(--space-s); padding-bottom: var(--space-s); }
  .marquee-item { font-size: var(--font-size-h2-mobile); padding-right: var(--space-l); }
  .marquee > .motion-toggle { display: none; }
  .hero-media { width: 100%; }   /* de beelden staan absoluut: de vorm heeft een breedte nodig */   /* op mobiel: tik op de band om te pauzeren (zie script-e.js) */
  .media-note { max-width: 10rem; }
}
@media screen and (max-width: 479px) {
  .siteplan-pin { --pin-size: 32px; }
  .nav-cta-extra { display: none; }
  .media-note { top: var(--space-xs); right: var(--space-xs); max-width: 9rem; }
}

/* --------------------------------------------------------------------------
   18.7 Minder beweging (prefers-reduced-motion): alles blijft bruikbaar,
   niets beweegt vanzelf. Webflow: per Interaction "Reduce motion" aan, en dit
   blok als custom code in de head (zie interacties.md).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:first-child { opacity: 1; }
  .marquee-track { width: auto; animation: none; }
  .marquee-list[aria-hidden="true"] { display: none; }
  .marquee-list { flex: 1; flex-wrap: wrap; row-gap: var(--space-xs); padding-left: var(--space-s); padding-right: var(--space-s); }
  .marquee-item { font-size: var(--font-size-h3); }
  .motion-toggle { display: none; }
  .offer-card-media .image,
  .offer-card-arrow::after,
  .testimonial-slide,
  .siteplan-pin { transition: none; }
  .offer-card.is-link:hover .offer-card-media .image,
  .offer-card.is-link:hover .offer-card-arrow::after { transform: none; }
  .siteplan-pane.w--tab-active { animation: none; }
}


/* ==========================================================================
   19. VERSIE F: feedback Greet
   Kleur per aanbod:  blauw = werken · groen = organiseren · zwart en grijs = het gebouw
   Oranje = enkel knoppen en wat je kan aanklikken als actie (zwarte tekst, 6,4:1)
   Vormen: de originele SVG's uit huisstijl/RGB VORMEN/svg, gekopieerd naar
   assets/brand/vormen/, als beeldmasker (mask-image). Niet nagetekend.
   ========================================================================== */
:root {
  --color-organiseren: var(--color-groen);
  --color-gebouw: var(--color-zwart);
  --color-cta: var(--color-oranje);
  --color-samenkomen: var(--color-groen);      /* oude naam uit D en E, verwijst nu naar organiseren */
  --color-maken: var(--color-zwart);           /* oude naam uit D en E, verwijst nu naar het gebouw */
  --mask-vorm4: url("/assets/brand/vormen/Cocon_vormen_RGB_Vorm4_zwart.svg");
  --ratio-vorm4: 256.8 / 156.3;                /* viewBox van Vorm4 */
  --header-logo-gap: var(--space-l);
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   19.1 Knoppen: één kleur voor alles wat klikbaar is
   Primair = vol oranje, zwarte tekst. Secundair = oranje rand. Nooit grijs.
   -------------------------------------------------------------------------- */
.button-primary,
.button-primary.is-accent,
.button-primary.is-inverse {
  background-color: var(--color-cta);
  color: var(--color-zwart);
  border: var(--border-width) solid var(--color-zwart);
}
.button-primary:hover,
.button-primary.is-accent:hover,
.button-primary.is-inverse:hover,
.section.is-orange .button-primary:hover,
.cta-block .button-primary:hover {
  background-color: var(--color-zwart);
  color: var(--color-wit);
  border-color: var(--color-zwart);
  border-radius: var(--radius-leaf);
}
.button-primary:active { background-color: var(--color-cta); color: var(--color-zwart); }
/* Op zwart: rand in oranje; bij hover wordt de knop een oranje omlijning */
.section.is-dark .button-primary,
.site-header .button-primary,
.footer .button-primary,
.plan-info-panel .button-primary { border-color: var(--color-cta); }
.section.is-dark .button-primary:hover,
.site-header .button-primary:hover,
.footer .button-primary:hover { background-color: transparent; color: var(--color-wit); border-color: var(--color-cta); }

.button-secondary,
.button-secondary.is-inverse {
  background-color: transparent;
  color: inherit;
  border: 2px solid var(--color-cta);
  padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px);
}
.button-secondary:hover,
.button-secondary.is-inverse:hover,
.section.is-orange .button-secondary:hover,
.cta-block .button-secondary:hover {
  background-color: var(--color-cta);
  color: var(--color-zwart);
  border-color: var(--color-cta);
  border-radius: var(--radius-leaf);
}
.button-secondary:active { background-color: var(--color-cta); color: var(--color-zwart); }

/* Tekstlink met pijl: de driehoek in oranje (vorm, geen tekst) */
.text-link.is-arrow::after { color: var(--color-cta); }
.section.is-blue .text-link.is-arrow::after,
.section.is-green .text-link.is-arrow::after { color: currentColor; }   /* geen oranje op blauw of groen (p.14) */

/* Kaartknop (aanbodkaart): secundaire stijl, op aanraakscherm vol oranje */
.offer-card-arrow { border: 2px solid var(--color-cta); padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); }
.offer-card.is-link:hover .offer-card-arrow { background-color: var(--color-cta); color: var(--color-zwart); }

/* --------------------------------------------------------------------------
   19.2 Kleur per aanbod (labels, stippen, markeringen, kaarten)
   -------------------------------------------------------------------------- */
.text-small.is-label.has-dot.is-organiseren::before,
.fact-label.has-dot.is-organiseren::before { background-color: var(--color-organiseren); }
.text-small.is-label.has-dot.is-gebouw::before,
.fact-label.has-dot.is-gebouw::before { background-color: var(--color-gebouw); box-shadow: inset 0 0 0 1px currentColor; }
.text-small.is-label.has-dot.is-gebruikers::before { background: repeating-linear-gradient(45deg, var(--color-zwart) 0 1px, var(--color-grijs) 1px 4px); box-shadow: inset 0 0 0 1px var(--color-zwart); }
.text-small.is-label.has-dot.is-vraag::before { background-color: transparent; border: 1px dashed currentColor; }
.plan-info-panel .text-small.is-label.has-dot.is-gebruikers::before { box-shadow: inset 0 0 0 1px var(--color-grijs); }
.text-highlight.is-organiseren { background-color: var(--color-organiseren); }
.offer-card.is-organiseren .offer-card-media { background-color: var(--color-organiseren); }
.offer-card.is-gebouw .offer-card-media { background-color: var(--color-grijs); }   /* het gebouw: grijs vlak op zwart */

/* --------------------------------------------------------------------------
   19.3 Header groot (component, enkel homepage): logo over de volle breedte
   Webflow: Section "site-header" met het logo (Image, 100% breed) en de Navbar eronder.
   -------------------------------------------------------------------------- */
.site-header { padding-top: var(--space-xl); background-color: var(--color-zwart); color: var(--color-wit); }
.site-header-brand { display: block; }
.site-header-logo { display: block; width: 100%; height: auto; }
.site-header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  margin-top: var(--header-logo-gap);
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
  border-top: var(--border-width) solid var(--color-grijs);
  border-bottom: var(--border-width) solid var(--color-grijs);
}
.site-header .nav-link,
.site-header .nav-dropdown-toggle { color: var(--color-wit); }
.site-header .nav-dropdown-list { background-color: var(--color-zwart); border-color: var(--color-grijs); z-index: 10; }
.site-header .nav-dropdown-label,
.site-header .nav-dropdown-note { color: var(--color-grijs); }
.site-header .nav-menu-button { color: var(--color-wit); border-color: var(--color-wit); }
.site-header .nav-menu-button.w--open { background-color: var(--color-cta); color: var(--color-zwart); border-color: var(--color-cta); }
.site-header + main .section.is-hero { padding-top: var(--space-2xl); }

/* --------------------------------------------------------------------------
   19.4 Navigatie compact (component). Op de andere pagina's: gewoon sticky.
   Op de homepage (is-scroll-reveal): verborgen tot de grote header uit beeld is.
   Webflow: Interaction "Scroll into view" / "Scroll out of view" op site-header.
   -------------------------------------------------------------------------- */
.navbar.is-scroll-reveal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--transition-slow), visibility var(--transition-slow);
}
.navbar.is-scroll-reveal.is-visible { transform: none; visibility: visible; }
.navbar .nav-dropdown-label.has-dot.is-gebouw::before { box-shadow: inset 0 0 0 1px var(--color-zwart); }

/* --------------------------------------------------------------------------
   19.5 Vormen als beeldmasker (originele Vorm4)
   Webflow: SVG als asset; mask-image via custom code (zie pagina-notities.md).
   -------------------------------------------------------------------------- */
.hero-grid { grid-template-columns: 7fr 5fr; align-items: center; }
.hero-media.is-blauw { padding: 0; background-color: transparent; }
.hero-slideshow.is-mask-vorm4,
.image.is-mask-vorm4 {
  aspect-ratio: var(--ratio-vorm4);
  -webkit-mask: var(--mask-vorm4) center / 100% 100% no-repeat;
  mask: var(--mask-vorm4) center / 100% 100% no-repeat;
}
.image.is-mask-vorm4 { width: 100%; height: auto; object-fit: cover; }
.hero-media .badge-round { left: auto; right: var(--space-l); bottom: calc(-1 * var(--space-l)); }
.hero-media > .motion-toggle { right: auto; left: 0; bottom: calc(-1 * var(--space-xl)); }
.hero-media .media-note { top: calc(-1 * var(--space-m)); right: 0; }

/* Tekstband: een gewone stip als scheiding (een vorm is geen opsommingsteken) */
.marquee-item::before { width: 0.3em; height: 0.3em; box-shadow: none; margin-right: var(--space-l); }

/* --------------------------------------------------------------------------
   19.6 Organiseren op groen: tekst op een grijs vlak
   -------------------------------------------------------------------------- */
.content-panel { padding: var(--space-l); background-color: var(--color-grijs); color: var(--color-zwart); }
.content-panel > * + * { margin-top: var(--space-m); }
.content-panel > .button-group { margin-top: var(--space-l); }
.section.is-green .testimonial-slider .tag.is-outline { color: var(--color-grijs); }

/* --------------------------------------------------------------------------
   19.7 Contactblok Debora (versie F): bezoek en aanvraag apart
   -------------------------------------------------------------------------- */
.contact-title { margin-bottom: var(--space-l); }
.contact-card.is-panel {
  grid-template-columns: 320px 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background-color: var(--color-grijs);
  color: var(--color-zwart);
}
.contact-card-photo.is-mask-vorm4 { object-position: 50% 22%; }
.contact-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); }
.contact-card-body > .contact-options { margin-top: var(--space-m); }
.contact-option { padding-top: var(--space-m); border-top: var(--border-width) solid var(--color-zwart); }
.contact-option > * + * { margin-top: var(--space-s); }
.contact-option > .button-group { margin-top: var(--space-m); }
.contact-option-title { font-size: var(--font-size-body); }

/* --------------------------------------------------------------------------
   19.8 Plan van Cocon (interactie 4, versie F)
   Webflow: Tabs (Gelijkvloers, Verdieping). Per pane het plan als SVG (Embed)
   en een info-vak; zie interacties.md voor de twee bouwwijzen.
   -------------------------------------------------------------------------- */
.plan-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.plan-menu { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-m); }
.plan-tab {
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-m);
  background-color: transparent;
  border: var(--border-width) solid var(--color-zwart);
  border-radius: var(--radius-pill);
  color: var(--color-zwart);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.plan-tab:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.plan-tab.w--current { background-color: var(--color-zwart); color: var(--color-wit); text-decoration: none; }
.plan-pane[hidden] { display: none; }
.plan-pane.w--tab-active { animation: pane-in var(--transition-slow); }
.plan-layout { display: grid; grid-template-columns: 9fr 3fr; gap: var(--space-l); align-items: start; }
.plan-canvas { overflow-x: auto; }
.plan-svg { display: block; width: 100%; height: auto; }

.plan-floor { fill: var(--color-grijs); }
.plan-wall { fill: none; stroke: var(--color-zwart); stroke-width: 6; stroke-linejoin: round; pointer-events: none; }
.plan-divider { stroke: var(--color-zwart); stroke-width: 2; pointer-events: none; }
.plan-hatch-bg { fill: var(--color-grijs); }
.plan-hatch { stroke: var(--color-zwart); stroke-width: 1.5; }
.plan-zone { cursor: pointer; outline: none; }
.plan-shape { stroke: var(--color-zwart); stroke-width: 2; transition: stroke var(--transition), stroke-width var(--transition); }
.plan-zone.is-werken .plan-shape { fill: var(--color-werken); }
.plan-zone.is-organiseren .plan-shape { fill: var(--color-organiseren); }
.plan-zone.is-onthaal .plan-shape { fill: var(--color-zwart); }
.plan-zone.is-vraag .plan-shape { fill: var(--color-grijs); stroke-dasharray: 8 6; }
.plan-label {
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  fill: var(--color-zwart);
  paint-order: stroke;
  stroke: var(--color-grijs);
  stroke-width: 5px;
  stroke-linejoin: round;
  pointer-events: none;
}
.plan-zone.is-onthaal .plan-label { fill: var(--color-wit); stroke: var(--color-zwart); }
.plan-label.is-small { font-size: 15px; }
/* Aanwijzen of kiezen: oranje rand = klikbaar */
.plan-zone:hover .plan-shape,
.plan-zone:focus-visible .plan-shape,
.plan-zone.is-active .plan-shape { stroke: var(--color-cta); stroke-width: 7; stroke-dasharray: none; }
.plan-zone:focus-visible .plan-label { text-decoration: underline; }

.plan-info-panel {
  min-height: 240px;
  padding: var(--space-l);
  background-color: var(--color-zwart);
  color: var(--color-wit);
}
.plan-info-panel :focus-visible { outline-color: var(--color-cta); }
.plan-info > * + * { margin-top: var(--space-s); }
.plan-info[hidden] { display: none; }
.plan-legend { display: flex; flex-wrap: wrap; column-gap: var(--space-l); row-gap: var(--space-xs); max-width: none; margin: var(--space-m) 0 0; padding: 0; list-style: none; }
.plan-legend-item { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: var(--font-size-small); line-height: var(--line-height-small); }
.plan-legend-item + .plan-legend-item { margin-top: 0; }
.plan-legend-item::before { content: ""; width: 1.4em; height: 1em; border: var(--border-width) solid var(--color-zwart); flex: none; }
.plan-legend-item.is-werken::before { background-color: var(--color-werken); }
.plan-legend-item.is-organiseren::before { background-color: var(--color-organiseren); }
.plan-legend-item.is-gebouw::before { background-color: var(--color-zwart); }
.plan-legend-item.is-gebruikers::before { background: repeating-linear-gradient(45deg, var(--color-zwart) 0 1.5px, var(--color-grijs) 1.5px 6px); }
.plan-legend-item.is-vraag::before { background-color: var(--color-grijs); border-style: dashed; }
.plan-hint { display: none; margin-top: var(--space-s); }

/* --------------------------------------------------------------------------
   19.9 Breakpoints (enkel de vier toegelaten)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .site-header { padding-top: var(--space-l); }
  .site-header-nav { gap: var(--space-m); }
  .offer-card-arrow { background-color: var(--color-cta); color: var(--color-zwart); border-color: var(--color-cta); }
  .contact-card.is-panel { grid-template-columns: 1fr; gap: var(--space-l); padding: var(--space-l); }
  .contact-card-photo.is-mask-vorm4 { max-width: 420px; }
  .plan-layout { grid-template-columns: 1fr; gap: var(--space-m); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 520px; }
}
@media screen and (max-width: 767px) {
  .site-header { padding-top: var(--space-m); }
  .site-header-nav { flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .site-header .nav-menu > li { border-bottom-color: var(--color-grijs); }
  .site-header .nav-dropdown-list { border: 0; }
  .site-header .nav-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .hero-media { max-width: none; width: 100%; margin-top: var(--space-l); }
  .hero-media .badge-round { right: 0; bottom: calc(-1 * var(--space-m)); }
  .hero-media > .motion-toggle { bottom: calc(-1 * var(--space-l)); }
  .hero-media .media-note { position: absolute; top: calc(-1 * var(--space-l)); max-width: 12rem; }
  .content-panel { padding: var(--space-m); }
  .contact-card.is-panel { padding: var(--space-m); }
  .contact-options { grid-template-columns: 1fr; }
  .plan-svg { width: 760px; max-width: none; }
  .plan-hint { display: block; }
  .plan-info-panel { min-height: 0; padding: var(--space-m); }
}
@media screen and (max-width: 479px) {
  .site-header .nav-actions .button-primary { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar.is-scroll-reveal { transition: none; }
  .plan-pane.w--tab-active { animation: none; }
  .plan-shape { transition: none; }
}


/* ==========================================================================
   20. VERSIE G: eerste scherm, titels, raster, plan, staand portret
   Zie uitlijning-g.md en design-system.md (secties 3 en 5).
   ========================================================================== */
:root {
  /* Raster: 12 kolommen (desktop), 8 (tablet), 4 (mobiel). Alles lijnt uit op deze kolommen. */
  --grid-columns: 12;
  --grid-gutter: var(--space-m);
  --container-margin: var(--space-xl);
  /* Eerste scherm */
  --header-logo-max: 26svh;            /* het logo wordt kleiner als het scherm laag is */
  --hero-fit: 8svh;                    /* de hero-titel past zich aan de schermhoogte aan */
  --mask-vorm4-staand: url("/assets/brand/vormen/Cocon_vormen_RGB_Vorm4_zwart_staand.svg");
  --ratio-vorm4-staand: 156.3 / 256.8; /* Vorm4, een kwartslag gedraaid */
}

/* --------------------------------------------------------------------------
   20.1 Raster: containers en lay-outs op 12 kolommen met één gutter
   Breedte van n kolommen = (100% - 11 gutters) / 12 * n + (n - 1) gutters
   -------------------------------------------------------------------------- */
.container,
.navbar-container { padding-left: var(--container-margin); padding-right: var(--container-margin); }
.container.is-narrow { max-width: calc(var(--container-narrow) + 2 * var(--container-margin)); }

.hero-grid,
.split,
.plan-layout,
.access,
.contact-card.is-panel {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}
/* Hero: tekst 7 kolommen, beeld en feiten in de kolommen 9 tot 12 */
.hero-grid { align-items: start; row-gap: 0; }   /* titel en beeld op dezelfde bovenlijn */
.hero-content { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.hero-media { grid-column: 9 / span 4; }
.hero-facts { grid-column: 9 / span 4; }
/* Split: tekst 5 kolommen, beeld 6, één lege kolom ertussen. Tekst en beeld op dezelfde bovenlijn. */
.split { align-items: start; row-gap: var(--space-xl); }
.split-content { grid-column: 1 / span 5; }
.split-media { grid-column: 7 / span 6; }
.split.is-reversed .split-media { grid-column: 1 / span 6; grid-row: 1; order: 0; }
.split.is-reversed .split-content { grid-column: 8 / span 5; grid-row: 1; }
.section.is-green .split-content { grid-column: 1 / span 6; }   /* tekst op een grijs vlak: één kolom breder */
.section.is-green .split-media { grid-column: 8 / span 5; }
/* Kaartenrasters en footer: de gutter van het raster */
.card-grid { column-gap: var(--grid-gutter); }
.footer-grid { column-gap: var(--grid-gutter); }
/* Footer onderaan: menu (kolom 1 tot 4) en juridische links (vanaf kolom 5), dan opdrachtgever en © */
.footer-bottom {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-m);
}
.footer-bottom > :nth-child(1) { grid-column: 1 / span 4; }
.footer-bottom > :nth-child(2) { grid-column: 5 / span 8; }
.footer-bottom > :nth-child(3) { grid-column: 1 / span 8; }
.footer-bottom > :nth-child(4) { grid-column: 9 / span 4; text-align: right; }
/* Pauzeknop van de tekstband: op de rechterrand van de container */
.marquee > .motion-toggle { right: max(var(--container-margin), calc((100% - var(--container-max)) / 2 + var(--container-margin))); }
/* Plan: 9 + 3 kolommen */
.plan-layout { align-items: start; row-gap: var(--space-m); }
.plan-canvas { grid-column: 1 / span 9; }
.plan-info-panel { grid-column: 10 / span 3; }
/* Bereikbaarheid: kaart 5 kolommen, lijst 6 (kolom 7 tot 12) */
.access { align-items: start; row-gap: var(--space-l); }
.access > :first-child { grid-column: 1 / span 5; }
.access > :last-child { grid-column: 7 / span 6; }
/* Sectiekop en FAQ: 7 en 8 kolommen breed */
.section-header { max-width: calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 6 * var(--grid-gutter)); }
.faq-list { max-width: calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); }
.form { max-width: calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); }   /* formulier: 8 kolommen, links op het raster */

/* --------------------------------------------------------------------------
   20.2 Eerste scherm: header groot + hero = precies de hoogte van het scherm
   Webflow: Div Block "first-screen", Height 100svh, Display Flex, Direction vertical.
   De hero (flex 1) vult de rest; het logo en de titel passen zich aan de hoogte aan.
   -------------------------------------------------------------------------- */
.first-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;                      /* terugval voor oudere browsers */
  height: 100svh;
  background-color: var(--color-zwart);
  color: var(--color-wit);
}
.first-screen > .site-header { flex: none; padding-top: var(--space-l); }
.site-header-logo {
  width: 100%;
  height: auto;
  max-height: var(--header-logo-max);
  object-fit: contain;
  object-position: left center;
}
.site-header-nav { margin-top: var(--space-m); padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.first-screen > .section.is-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding-top: var(--space-l);
  padding-bottom: var(--space-2xl);   /* ruimte voor de aanwijzing om te scrollen */
}
.first-screen > .section.is-hero > .container { height: 100%; display: flex; align-items: center; }
.first-screen .hero-grid { width: 100%; }
.first-screen .heading-hero { font-size: min(var(--font-size-hero), var(--hero-fit)); }
.hero-content > * + * { margin-top: var(--space-m); }
.hero-content > .button-group { margin-top: var(--space-l); }
.hero-media { position: relative; }
.hero-media .hero-slideshow { width: 100%; }
.hero-facts { margin-top: var(--space-m); align-self: start; }
.hero-facts .fact-item { grid-template-columns: 1fr; row-gap: var(--space-2xs); padding-top: var(--space-xs); padding-bottom: var(--space-xs); font-size: var(--font-size-small); line-height: var(--line-height-small); }
/* Hulpmiddelen bij het beeld blijven binnen het beeld */
.hero-media .badge-round { top: auto; right: 0; bottom: 0; left: auto; width: 7.5rem; height: 7.5rem; }
.hero-media > .motion-toggle { left: 0; right: auto; bottom: 0; }
.hero-media .media-note { top: 0; right: auto; left: 0; max-width: 11rem; font-size: var(--font-size-small); }

/* Aanwijzing om te scrollen: klein, onderaan in het midden, oranje driehoek (klikbaar) */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-xs);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-s);
  color: var(--color-grijs);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-regular);
  text-decoration: none;
}
.scroll-cue::after { content: "\25BE"; color: var(--color-cta); font-size: var(--font-size-h3); line-height: 1; transition: transform var(--transition-slow); }
.scroll-cue:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.scroll-cue:hover::after { transform: translateY(var(--space-2xs)); }
.marquee { scroll-margin-top: var(--space-3xl); }

/* --------------------------------------------------------------------------
   20.3 Titels: sterker (zie titels-g.html). Regular, groter, strakker gespatieerd.
   De kleur volgt het vlak: wit op zwart, zwart op grijs, blauw en groen.
   -------------------------------------------------------------------------- */
.text-highlight { font-weight: var(--font-weight-bold); padding: 0 0.14em; }
.marquee-item { font-size: var(--font-size-h2-tablet); font-weight: var(--font-weight-heading); }
.contact-option-title { font-size: var(--font-size-h3-mobile); line-height: var(--line-height-h3); font-weight: var(--font-weight-heading); letter-spacing: var(--letter-spacing-h3); }
.testimonial-quote { font-weight: var(--font-weight-light); }   /* een citaat is geen titel */
.section-header > .text-small.is-label + .heading-h2,
.split-content > .heading-h2 + * { margin-top: var(--space-m); }

/* --------------------------------------------------------------------------
   20.4 Contactblok Debora (component): staand portret in Vorm4, een kwartslag gedraaid
   Portret en tekst starten op dezelfde bovenlijn (de padding van het grijze vlak).
   -------------------------------------------------------------------------- */
.contact-card.is-panel {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--space-xl);
  row-gap: var(--space-l);
  align-items: start;
  padding: var(--space-xl);
  background-color: var(--color-grijs);
  color: var(--color-zwart);
}
.image.is-mask-vorm4-staand {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-vorm4-staand);
  object-fit: cover;
  object-position: 50% 0;
  -webkit-mask: var(--mask-vorm4-staand) center / 100% 100% no-repeat;
  mask: var(--mask-vorm4-staand) center / 100% 100% no-repeat;
}
.contact-card-body > :first-child { margin-top: 0; }
.contact-card-body .heading-h3 { margin-top: var(--space-xs); }

/* --------------------------------------------------------------------------
   20.5 Plan: één assenstelsel voor beide verdiepingen. Bij het wisselen van
   tabblad blijft het gebouw staan; enkel de indeling vervaagt rustig in.
   -------------------------------------------------------------------------- */
.plan-pane.w--tab-active { animation: none; }
.plan-pane.w--tab-active .plan-zones,
.plan-pane.w--tab-active .plan-info-panel { animation: plan-fade var(--transition-slow); }
@keyframes plan-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.plan-zone.is-gebruikers .plan-shape { stroke: var(--color-zwart); }

/* --------------------------------------------------------------------------
   20.6 Rasteroverlay (tijdelijk, enkel voor de controle; niet naar Webflow)
   Toets G of klasse "show-grid" op body.
   -------------------------------------------------------------------------- */
body.show-grid { position: relative; }
body.show-grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1000;
  width: 100%;
  max-width: var(--container-max);
  transform: translateX(-50%);
  padding: 0 var(--container-margin);
  background-image: repeating-linear-gradient(to right,
    var(--color-oranje) 0,
    var(--color-oranje) calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns)),
    transparent calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns)),
    transparent calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) + var(--grid-gutter)));
  background-origin: content-box;
  background-clip: content-box;
  opacity: 0.22;
  pointer-events: none;
}
body.show-grid .navbar.is-scroll-reveal { z-index: 1001; }

/* --------------------------------------------------------------------------
   20.7 Breakpoints (enkel de vier toegelaten)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  :root { --grid-columns: 8; --container-margin: var(--space-l); }
  .first-screen > .site-header { padding-top: var(--space-m); }
  .first-screen .heading-hero { font-size: min(var(--font-size-hero-tablet), var(--hero-fit)); }
  /* Hero onder elkaar: tekst, dan beeld dat de resterende hoogte vult */
  .first-screen .hero-grid { display: flex; flex-direction: column; align-items: stretch; height: 100%; }
  .first-screen > .section.is-hero > .container { align-items: stretch; }
  .hero-content { flex: none; }
  .hero-media { flex: 1 1 0; min-height: 0; max-width: none; width: 100%; margin-top: var(--space-l); display: flex; justify-content: flex-start; }
  .hero-media .hero-slideshow { width: auto; height: 100%; max-width: 100%; }
  .hero-facts { display: none; }       /* de prijzen staan ook in de secties eronder */
  .hero-media .badge-round { display: none; }
  .split-content,
  .split-media,
  .split.is-reversed .split-content,
  .split.is-reversed .split-media,
  .section.is-green .split-content,
  .section.is-green .split-media { grid-column: 1 / -1; grid-row: auto; }
  .plan-canvas,
  .plan-info-panel { grid-column: 1 / -1; }
  .access > :first-child { grid-column: 1 / span 4; }
  .access > :last-child { grid-column: 5 / span 4; }
  .footer-bottom > :nth-child(1),
  .footer-bottom > :nth-child(3) { grid-column: 1 / span 4; }
  .footer-bottom > :nth-child(2),
  .footer-bottom > :nth-child(4) { grid-column: 5 / span 4; }
  .section-header { max-width: var(--measure); }
  .faq-list,
  .form { max-width: none; }
  .contact-card.is-panel { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--space-l); padding: var(--space-l); }
  .contact-card-photo.is-mask-vorm4-staand { max-width: none; }
  .timeline-year { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .timeline-content,
  .timeline-item.is-reversed .timeline-content { grid-column: 3 / span 6; padding-left: var(--space-m); }
  .timeline-media,
  .timeline-item.is-reversed .timeline-media { grid-column: 3 / span 6; grid-row: 2; }
}
@media screen and (max-width: 767px) {
  :root { --grid-columns: 4; --grid-gutter: var(--space-s); --container-margin: var(--space-s); }
  .first-screen > .site-header { padding-top: var(--space-s); }
  .site-header-nav { margin-top: var(--space-s); }
  .first-screen .heading-hero { font-size: min(var(--font-size-hero-mobile), 6svh); }
  .first-screen > .section.is-hero { padding-top: var(--space-m); padding-bottom: var(--space-2xl); }
  .hero-content > * + * { margin-top: var(--space-s); }
  .hero-content > .button-group { margin-top: var(--space-m); }
  .hero-media { margin-top: var(--space-m); }
  .hero-media .media-note { display: none; }   /* placeholdernota: enkel op groter scherm */
  .access > :first-child,
  .access > :last-child,
  .footer-bottom > :nth-child(n) { grid-column: 1 / -1; }
  .footer-bottom > :nth-child(4) { text-align: left; }
  .contact-card.is-panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-m); }
}
@media screen and (max-width: 479px) {
  .first-screen .button-group { flex-direction: row; flex-wrap: nowrap; gap: var(--space-xs); }
  .first-screen .button-group > * { flex: 1 1 0; width: auto; padding-left: var(--space-s); padding-right: var(--space-s); }
  .first-screen.is-page .button-group { flex-direction: column; }   /* subpagina's: langere knopteksten onder elkaar */
  .first-screen.is-page .button-group > * { flex: none; width: 100%; }
}

/* ==========================================================================
   21. VERSIE G, UITROL: de andere pagina's
   Compacte navigatie + een eigen eerste scherm per pagina, ruimtekaarten als
   link, plan met de ruimtes van één aanbod, tijdlijn die rustig inschuift.
   ========================================================================== */
:root {
  --navbar-height: 77px;               /* compacte navigatie: 44 px knop + 2 x 16 px + 1 px lijn */
}

/* --------------------------------------------------------------------------
   21.1 Eerste scherm van een subpagina: navigatie + paginakop = 100svh
   Webflow: Div Block "first-screen is-page", Height calc(100svh - navbar-height).
   -------------------------------------------------------------------------- */
.navbar-container { min-height: calc(var(--navbar-height) - var(--border-width)); }
.first-screen.is-page { height: calc(100vh - var(--navbar-height)); height: calc(100svh - var(--navbar-height)); }
.first-screen.is-page > .section.is-hero { padding-top: var(--space-xl); }
.first-screen .heading-h1 { font-size: min(var(--font-size-h1), 7svh); }
.hero-grid.is-page .hero-content { grid-column: 1 / span 6; }
.hero-grid.is-page .hero-media,
.hero-grid.is-page .hero-facts { grid-column: 8 / span 5; }
.hero-media > .image { width: 100%; }
.hero-content > .hero-links { margin-top: var(--space-m); }
.hero-links { display: flex; flex-wrap: wrap; column-gap: var(--space-m); row-gap: var(--space-xs); max-width: none; margin: 0; padding: 0; list-style: none; }
.hero-links li { margin: 0; }

/* --------------------------------------------------------------------------
   21.2 Ruimtekaart als link (interactie 3, zoals de aanbodkaart op de homepage)
   Het beeld staat op een vlak in de kleur van het aanbod. Webflow: Link Block.
   -------------------------------------------------------------------------- */
.room-card.is-link { color: inherit; text-decoration: none; }
.room-card-media { overflow: hidden; margin-bottom: var(--space-s); padding: var(--space-m); background-color: var(--color-grijs); }
.room-card.is-werken .room-card-media { background-color: var(--color-werken); }
.room-card.is-organiseren .room-card-media { background-color: var(--color-organiseren); }
.room-card-media .image,
.room-card-media .image-placeholder { transition: transform var(--transition-slow); }
.room-card-title { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.2em; transition: text-decoration-color var(--transition); }
.room-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  align-self: flex-start;
  min-height: var(--touch-target);
  padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px);
  border: 2px solid var(--color-cta);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  transition: background-color var(--transition), color var(--transition), border-radius var(--transition);
}
.room-card-arrow::after { content: "\25B8"; transition: transform var(--transition-slow); }
.room-card.is-link:hover .room-card-media .image { transform: translate(var(--space-xs), calc(-1 * var(--space-xs))) scale(1.04); }
.room-card.is-link:hover .room-card-title { text-decoration-color: currentColor; }
.room-card.is-link:hover .room-card-arrow { background-color: var(--color-cta); color: var(--color-zwart); border-radius: var(--radius-leaf); }
.room-card.is-link:hover .room-card-arrow::after { transform: translateX(var(--space-xs)); }
.room-card.is-link:active .room-card-media .image { transform: scale(0.98); }
.section.is-dark .tag.is-outline { border-color: var(--color-grijs); color: var(--color-wit); }
.section.is-dark .tag { border-color: var(--color-grijs); }

/* --------------------------------------------------------------------------
   21.3 Plan met de ruimtes van één aanbod (combo-klasse is-focus-werken of
   is-focus-organiseren): die ruimtes in kleur, de rest grijs.
   -------------------------------------------------------------------------- */
.plan.is-focus-werken .plan-zone:not(.is-werken) .plan-shape,
.plan.is-focus-organiseren .plan-zone:not(.is-organiseren) .plan-shape { fill: var(--color-grijs); stroke-dasharray: none; }
.plan.is-focus-werken .plan-zone:not(.is-werken) .plan-label,
.plan.is-focus-organiseren .plan-zone:not(.is-organiseren) .plan-label { fill: var(--color-zwart); stroke: var(--color-grijs); }
.plan-legend-item.is-ander::before { background-color: var(--color-grijs); }

/* --------------------------------------------------------------------------
   21.4 Tijdlijn die rustig inschuift (Webflow: Interaction "Scroll into view",
   Move Y 32 px → 0 en Opacity 0 → 100 %, 600 ms). Zonder script blijft alles zichtbaar.
   -------------------------------------------------------------------------- */
.has-reveal .timeline-item { transition: opacity 600ms ease, transform 600ms ease; }
.has-reveal .timeline-item:not(.is-visible) { opacity: 0; transform: translateY(var(--space-l)); }
.timeline-media .image { aspect-ratio: 3 / 2; }
/* Tijdlijn op het raster: jaartal 2 kolommen, tekst 5, beeld 5 (desktop) */
.timeline-item { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--grid-gutter); }
.timeline-year { grid-column: 1 / span 2; grid-row: 1; margin-right: var(--space-m); }
.timeline-content { grid-column: 3 / span 5; grid-row: 1; padding-left: var(--space-m); }
.timeline-media { grid-column: 8 / span 5; grid-row: 1; }
.timeline-item.is-reversed .timeline-media { grid-column: 3 / span 5; }
.timeline-item.is-reversed .timeline-content { grid-column: 8 / span 5; padding-left: 0; }

/* --------------------------------------------------------------------------
   21.5 Kleine aanpassingen per vlak
   -------------------------------------------------------------------------- */
.access.is-neutraal .access-mode::before { background-color: currentColor; }   /* Contact: enkel zwart en grijs */
.section.is-dark .user-card-logo,
.section.is-dark .image-placeholder { border-color: var(--color-grijs); color: var(--color-wit); }
.section.is-dark .room-card-media .image-placeholder { color: var(--color-zwart); border-color: var(--color-zwart); }
.section.is-dark .faq-question,
.section.is-dark .faq-answer { color: var(--color-wit); }
.contact-title + .contact-card { margin-top: 0; }
.footer { border-top: var(--border-width) solid var(--color-grijs); }   /* scheiding als de sectie erboven ook zwart is */
.timeline-year::after { background-color: currentColor; }               /* Over Cocon: enkel zwart en grijs */
/* G: oranje enkel op wat je kan aanklikken. Statuslabels, badge en meldingen worden zwart en wit. */
.badge-round { color: var(--color-wit); }
.tag.is-orange { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.section.is-dark .tag.is-orange { border-color: var(--color-grijs); }
.form-error,
.form-success { background-color: var(--color-zwart); color: var(--color-wit); }
figure.room-card { margin: 0; }                                          /* geen standaardmarge van de browser */
.figure-grid .room-card figcaption { margin-top: 0; }

@media screen and (max-width: 991px) {
  .hero-grid.is-page .hero-content,
  .hero-grid.is-page .hero-media { grid-column: 1 / -1; }
  .hero-media > .image { width: auto; height: 100%; max-width: 100%; }
  .first-screen .heading-h1 { font-size: min(var(--font-size-h1-tablet), 7svh); }
  /* Aanraakscherm: de knop van de ruimtekaart staat gevuld, het beeld zoomt niet */
  .room-card-arrow { background-color: var(--color-cta); color: var(--color-zwart); }
  .room-card.is-link:hover .room-card-media .image { transform: none; }
}
@media screen and (max-width: 767px) {
  .first-screen.is-page > .section.is-hero { padding-top: var(--space-l); }
  .first-screen .heading-h1 { font-size: min(var(--font-size-h1-mobile), 6svh); }
  .room-card-media { padding: var(--space-s); }
  .timeline-item { grid-template-columns: minmax(0, 1fr); }
  .timeline-year,
  .timeline-content,
  .timeline-media,
  .timeline-item.is-reversed .timeline-content,
  .timeline-item.is-reversed .timeline-media { grid-column: 1 / -1; grid-row: auto; margin-right: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .has-reveal .timeline-item { transition: none; }
  .has-reveal .timeline-item:not(.is-visible) { opacity: 1; transform: none; }
  .room-card-media .image,
  .room-card-arrow::after { transition: none; }
  .room-card.is-link:hover .room-card-media .image,
  .room-card.is-link:hover .room-card-arrow::after { transform: none; }
  .plan-pane.w--tab-active .plan-zones,
  .plan-pane.w--tab-active .plan-info-panel { animation: none; }
  .scroll-cue::after { transition: none; }
}


/* ==========================================================================
   22. VERSIE H: rust (feedback team, 16 oktober 2026)
   Eén kleur per pagina: blauw (werken, homepage, Over Cocon, contact) of groen (organiseren).
   Achtergrond: een lichte tint van die kleur. Eén vol kleurvlak per pagina (is-vlak).
   Zwart enkel voor tekst, lijnen en knoppen. Oranje enkel voor knoppen en wat klikbaar is.
   ========================================================================== */
:root {
  /* I: geen lichte tinten meer. De "tint" van H is grijs (pop-up, plan); de pagina zelf is zwart en grijs. */
  --color-page: var(--color-blauw);
  --color-page-tint: var(--color-grijs);
}
body.is-page-groen { --color-page: var(--color-groen); }
body { background-color: var(--color-page-tint); }

/* --------------------------------------------------------------------------
   22.1 Secties: licht, zonder lijnen. Eén vol kleurvlak per pagina.
   -------------------------------------------------------------------------- */
.section,
.section.is-light { background-color: transparent; color: var(--color-zwart); border-top: 0; }
.section.is-vlak { background-color: var(--color-page); color: var(--color-zwart); }
.section.is-vlak :focus-visible { outline-color: var(--color-zwart); }
.section.is-vlak .text-link.is-arrow::after { color: currentColor; }   /* geen oranje op blauw of groen */

/* --------------------------------------------------------------------------
   22.2 Navigatie, footer: licht, zwarte tekst, één lijn
   -------------------------------------------------------------------------- */
.navbar { background-color: var(--color-page-tint); border-bottom: var(--border-width) solid var(--color-zwart); }
.nav-dropdown-list { background-color: var(--color-page-tint); border-color: var(--color-zwart); }
.footer { background-color: transparent; color: var(--color-zwart); border-top: var(--border-width) solid var(--color-zwart); }
.footer-heading { color: var(--color-zwart); }
.footer-bottom { border-top-color: var(--color-zwart); }
.footer .form-input { background-color: transparent; border-color: var(--color-zwart); color: var(--color-zwart); }
.footer .button-primary { border-color: var(--color-zwart); }
.footer .button-primary:hover { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.access-mode::before { background-color: var(--color-page); }

/* --------------------------------------------------------------------------
   22.3 Paginakop: tekst (6 kolommen) en beeld (6 kolommen) op dezelfde bovenlijn
   Webflow: Section "page-hero" > Container > Grid (12 kolommen).
   Homepage (is-home): vult het eerste scherm, met één beeld in Vorm4.
   -------------------------------------------------------------------------- */
.page-hero { padding-top: var(--space-2xl); }
.page-hero-grid,
.lead,
.band,
.contact-card.is-panel {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-xl);
  align-items: start;
}
.page-hero-content { grid-column: 1 / span 6; }
.page-hero-content > * + * { margin-top: var(--space-m); }
.page-hero-content > .button-group { margin-top: var(--space-l); }
.page-hero-content > .hero-links { margin-top: var(--space-m); }
.page-hero-media { grid-column: 7 / span 6; }
.page-hero-media > .image { width: 100%; }
.page-hero .heading-h1 { font-size: min(var(--font-size-h1), 8svh); }
.page-hero.is-home {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--navbar-height));
  min-height: calc(100svh - var(--navbar-height));
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.page-hero.is-home > .container { width: 100%; }
.page-hero.is-home .page-hero-grid { align-items: center; }
.page-hero.is-home .heading-hero { font-size: min(var(--font-size-hero), 9svh); }

/* Drie stappen bij de formulieren */
.steps { max-width: none; margin: var(--space-m) 0 0; padding: 0; list-style: none; border-top: var(--border-width) solid var(--color-zwart); }
.step { display: flex; gap: var(--space-s); margin: 0; padding: var(--space-xs) 0; border-bottom: var(--border-width) solid var(--color-zwart); font-size: var(--font-size-ui); line-height: var(--line-height-small); }
.step + .step { margin-top: 0; }
.step-number { font-weight: var(--font-weight-bold); }

/* --------------------------------------------------------------------------
   22.4 Titel en tekst naast elkaar (naar de oude Webflow-pagina): titel 5 kolommen,
   tekst 6 kolommen vanaf kolom 7, op dezelfde bovenlijn
   -------------------------------------------------------------------------- */
.lead-title { grid-column: 1 / span 5; }
.lead-text { grid-column: 7 / span 6; }
.lead-text > * + * { margin-top: var(--space-s); }
.lead-text .text-link { min-height: 0; }

/* --------------------------------------------------------------------------
   22.5 Het volle kleurvlak (band): enkel grote tekst en acties
   Titel H2, één zin op H3-grootte (zwart op blauw 3,3:1 en op groen 4,4:1: AA voor grote tekst).
   -------------------------------------------------------------------------- */
.band-content { grid-column: 1 / span 8; }
.band.has-media .band-content { grid-column: 1 / span 6; }
.band-media { grid-column: 7 / span 6; }
.band-line { margin-top: var(--space-m); font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
.band .button-group { margin-top: var(--space-l); column-gap: var(--space-l); }

/* --------------------------------------------------------------------------
   22.6 Kaarten: foto zonder kader, compacte info, één link. Alle kaarten gelijkwaardig.
   -------------------------------------------------------------------------- */
.room-card > .image { margin-bottom: var(--space-s); }
.room-card-meta { margin-top: 0; }
.room-card-title { margin-top: var(--space-xs); text-decoration: none; }
.room-card-price { margin-top: var(--space-xs); font-weight: var(--font-weight-light); }
.room-card-link { align-self: flex-start; margin-top: auto; padding-top: var(--space-s); }
.image.is-4x3 { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   22.7 Kaartenslider (zalen, materialen). Webflow: Slider met slides van ongeveer
   een derde breed, pijlen rechtsboven, geen autoplay, swipe aan.
   Zonder script: horizontaal scrollen met scroll-snap.
   -------------------------------------------------------------------------- */
.slider-head .section-header { margin-bottom: 0; }
.card-slider { margin-top: var(--space-l); }
.card-slider-nav { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-bottom: var(--space-m); }
.card-slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--grid-gutter)) / 3);
  column-gap: var(--grid-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.card-slider-track::-webkit-scrollbar { display: none; }
.slide-card { display: flex; flex-direction: column; scroll-snap-align: start; }
.slide-card > .image { margin-bottom: var(--space-s); }
.slide-card-title { margin-top: 0; }
.slide-card-meta { margin-top: var(--space-2xs); font-size: var(--font-size-ui); font-weight: var(--font-weight-bold); }
.slide-card-text { margin-top: var(--space-xs); }
.slide-card > .text-link { align-self: flex-start; margin-top: auto; padding-top: var(--space-s); }
.slider-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }
.slider-foot > p { margin: 0; }

/* Pijlen en stippen van alle sliders: zwart op licht, oranje bij hover (klikbaar) */
.slider-arrow { border-color: var(--color-zwart); color: var(--color-zwart); }
.slider-arrow:hover { background-color: var(--color-cta); color: var(--color-zwart); border-color: var(--color-cta); }
.slider-arrow:disabled { opacity: 0.35; cursor: default; }
.slider-arrow:disabled:hover { background-color: transparent; border-color: var(--color-zwart); }
.slider-dot::before { border-color: var(--color-zwart); }
.slider-dot.is-active::before { background-color: var(--color-zwart); border-color: var(--color-zwart); }

/* Testimonials op het volle kleurvlak: zwarte tekst, geen zwart vlak meer */
.testimonial-slider { padding: 0; background-color: transparent; color: var(--color-zwart); }
.testimonial-slider :focus-visible { outline-color: var(--color-zwart); }
.testimonial-slide .testimonial-author { color: var(--color-zwart); }
.section.is-vlak .testimonial-slider .tag.is-outline,
.testimonial-slider .tag.is-outline { color: var(--color-zwart); border-color: var(--color-zwart); }
.section.is-vlak .slider-arrow:hover { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }

/* --------------------------------------------------------------------------
   22.8 Contactblok Debora (component): staand portret op een vol vlak in de kleur van de pagina,
   tekst ernaast op het lichte vlak, op dezelfde bovenlijn
   -------------------------------------------------------------------------- */
.contact-card.is-panel { padding: 0; background-color: transparent; }
.contact-card-media { grid-column: 1 / span 5; padding: var(--space-xl); background-color: var(--color-page); }
.contact-card-media .contact-card-photo { width: 100%; max-width: none; margin: 0; box-shadow: none; }
.contact-card-body { grid-column: 7 / span 6; }
.contact-card-body > * + * { margin-top: var(--space-s); }
.contact-card-body > .heading-h2 { margin-top: var(--space-s); }
.contact-card-body > .contact-options { margin-top: var(--space-l); }
.contact-options { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-l); }
.contact-requests { max-width: none; margin: 0; padding: 0; list-style: none; }
.contact-requests li { margin: 0; }

/* --------------------------------------------------------------------------
   22.9 Pop-up met het plan van Cocon. Gaat niet open bij het laden.
   Webflow: Div Block "modal" (Display none, Position fixed), Interaction "Mouse click"
   op de link (tonen, Opacity 0 → 100 %, 200 ms) en op de sluitknop en de achtergrond (verbergen).
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-m);
}
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background-color: var(--color-zwart); opacity: 0.55; }
.modal-window {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  max-height: calc(100svh - 2 * var(--space-m));
  overflow: auto;
  padding: var(--space-l) var(--space-xl) var(--space-xl);
  background-color: var(--color-page-tint);
  color: var(--color-zwart);
  animation: modal-in 200ms ease;
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); }
.modal-intro { margin-top: var(--space-xs); margin-bottom: var(--space-m); }
.modal-close {
  min-height: var(--touch-target);
  padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px);
  background-color: transparent;
  border: 2px solid var(--color-cta);
  border-radius: var(--radius-pill);
  color: var(--color-zwart);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}
.modal-close:hover { background-color: var(--color-cta); }
body.has-modal { overflow: hidden; }

/* Plan in de pop-up: licht, zonder schaduw rond de labels. Een label is gewone zwarte tekst
   op een klein vlak in de lichte tint van de pagina. */
.plan-floor { fill: var(--color-page-tint); }
.plan-info-panel { min-height: 0; padding: 0 0 0 var(--space-m); background-color: transparent; color: var(--color-zwart); border-left: var(--border-width) solid var(--color-zwart); }
.plan-info-panel :focus-visible { outline-color: var(--color-zwart); }
.plan-label,
.plan.is-focus-werken .plan-zone:not(.is-werken) .plan-label,
.plan.is-focus-organiseren .plan-zone:not(.is-organiseren) .plan-label,
.plan-zone.is-onthaal .plan-label { fill: var(--color-zwart); stroke: none; paint-order: normal; font-size: 20px; font-weight: var(--font-weight-regular); }
.plan-label.is-small { font-size: 15px; }
.plan-label-plate { fill: var(--color-page-tint); }
.plan.is-focus-neutraal .plan-zone:not(.is-gebruikers) .plan-shape { fill: var(--color-grijs); }
.plan.is-focus-neutraal .plan-zone.is-vraag .plan-shape { stroke-dasharray: 8 6; }
.plan-legend-item.is-ander::before { background-color: var(--color-grijs); }
.plan-info .has-dot::before { display: none; }   /* geen tweede merkkleur in het info-vak */
.is-plan-link { min-height: var(--touch-target); }

/* --------------------------------------------------------------------------
   22.10 Landingspagina (index-landing.html, in Webflow /): één scherm, één licht vlak,
   het logo groot in het midden, de navigatie erboven. Enkel een korte fade-in.
   -------------------------------------------------------------------------- */
.landing { display: flex; flex-direction: column; height: 100vh; height: 100svh; }
.navbar.is-landing { position: static; flex: none; background-color: transparent; border-bottom: 0; }
.navbar.is-landing .nav-menu { flex: 1; }
.landing-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-margin) var(--space-2xl);
  text-align: center;
  animation: landing-in 900ms ease both;
}
@keyframes landing-in { from { opacity: 0; } to { opacity: 1; } }
.landing-logo { width: 100%; margin: 0; }
.landing-logo img { display: block; width: 100%; height: auto; max-height: 40svh; object-fit: contain; }
.landing-intro { max-width: 40rem; margin-top: var(--space-xl); font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
.landing-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }

/* --------------------------------------------------------------------------
   22.11 Breakpoints (enkel de vier toegelaten)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .page-hero-content,
  .page-hero-media,
  .lead-title,
  .lead-text,
  .band-content,
  .band.has-media .band-content,
  .band-media { grid-column: 1 / -1; }
  .page-hero.is-home { min-height: 0; }
  .page-hero .heading-h1 { font-size: var(--font-size-h1-tablet); }
  .page-hero.is-home .heading-hero { font-size: var(--font-size-hero-tablet); }
  .page-hero-grid,
  .lead,
  .band { row-gap: var(--space-l); }
  .contact-card-media { grid-column: 1 / span 4; padding: var(--space-l); }
  .contact-card-body { grid-column: 5 / span 4; }
  .card-slider-track { grid-auto-columns: calc((100% - var(--grid-gutter)) / 2); }
}
@media screen and (max-width: 767px) {
  .page-hero { padding-top: var(--space-l); }
  .page-hero .heading-h1 { font-size: var(--font-size-h1-mobile); }
  .page-hero.is-home .heading-hero { font-size: var(--font-size-hero-mobile); }
  .page-hero-grid,
  .lead,
  .band { row-gap: var(--space-m); }
  .band-line { font-size: var(--font-size-h3-mobile); }
  .contact-card.is-panel { row-gap: var(--space-l); }
  .contact-card-media,
  .contact-card-body { grid-column: 1 / -1; }
  .contact-card-media { padding: var(--space-m); }
  .contact-card-media .contact-card-photo { max-width: 260px; margin: 0 auto; }
  .card-slider-track { grid-auto-columns: 85%; }
  .modal { padding: 0; }
  .modal-window { max-height: 100svh; height: 100svh; padding: var(--space-m); }
  .plan-info-panel { padding: var(--space-s) 0 0; border-left: 0; border-top: var(--border-width) solid var(--color-zwart); }
  .landing-intro { font-size: var(--font-size-h3-mobile); margin-top: var(--space-l); }
  .landing-main { padding-bottom: var(--space-xl); }
}
@media screen and (max-width: 479px) {
  .landing-actions { flex-direction: column; gap: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-main,
  .modal-window { animation: none; }
  .card-slider-track { scroll-behavior: auto; }
}


/* ==========================================================================
   24. VERSIE I: vaste opbouw (feedback Debora en Greet, 19 oktober 2026)
   1. Zwarte start (navigatie en paginakop op zwart, hoofdfoto in Vorm4)
   2. Grijze en zwarte informatiestroken, afwisselend, rechthoekige foto's
   3. Gerichte kleurstroken (blauw, groen, oranje) met zwarte tekst en een originele vorm
   4. Contactstrook onderaan (oranje), portret rechtstreeks op het vlak
   Kleurcombinaties (handboek p.13): op zwart wit, blauw, groen, oranje · op blauw, groen,
   oranje enkel zwart · op grijs zwart, blauw, groen, oranje. Nooit wit op kleur, geen witte
   vlakken of vormen.
   ========================================================================== */
:root {
  --mask-vorm2: url("/assets/brand/vormen/Cocon_vormen_RGB_Vorm2_zwart.svg");
  --wolk-hoogte: var(--space-xl);      /* hoogte van de rij halve cirkels boven een kleurstrook */
}
body { background-color: var(--color-zwart); color: var(--color-wit); }

/* --------------------------------------------------------------------------
   24.1 Stroken: grijs (is-light), zwart (is-dark), kleur (is-strip)
   -------------------------------------------------------------------------- */
.section,
.section.is-light { background-color: var(--color-grijs); color: var(--color-zwart); border-top: 0; }
.section.is-dark { background-color: var(--color-zwart); color: var(--color-wit); }
.section.is-strip { position: relative; color: var(--color-zwart); }
.section.is-strip.is-blauw { background-color: var(--color-blauw); }
.section.is-strip.is-groen { background-color: var(--color-groen); }
.section.is-strip.is-oranje { background-color: var(--color-oranje); }
.section.is-strip :focus-visible { outline-color: var(--color-zwart); }
.section.is-light :focus-visible { outline-color: var(--color-zwart); }
.section.is-dark :focus-visible { outline-color: var(--color-wit); }

/* Wolkenmotief: de bovenste helft van de originele Vorm2 (vier cirkels), herhaald over de breedte.
   De halve cirkels liggen over de onderrand van de strook erboven.
   Webflow: een Div "strip-wolk" met dezelfde mask-image als custom property. */
.section.is-strip.has-wolk::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--wolk-hoogte) + 1px);
  height: var(--wolk-hoogte);
  background-color: inherit;
  -webkit-mask: var(--mask-vorm2) 0 0 / auto calc(2 * var(--wolk-hoogte)) repeat-x;
  mask: var(--mask-vorm2) 0 0 / auto calc(2 * var(--wolk-hoogte)) repeat-x;
  pointer-events: none;
}

/* Tekst op een kleurstrook: altijd zwart. Zwart op blauw (3,3:1) en groen (4,4:1) haalt AA enkel
   voor grote tekst: daarom staat de tekst op blauw en groen op H3-grootte (24 px) of 20 px vet. */
.strip { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-xl); align-items: start; }
.strip-content { grid-column: 1 / span 7; }
.strip-content > * + * { margin-top: var(--space-m); }
.strip-content > .button-group { margin-top: var(--space-l); column-gap: var(--space-l); }
.strip-media { grid-column: 8 / span 5; }
.strip-shape { grid-column: 9 / span 4; align-self: center; }
.strip-shape img { display: block; width: 100%; height: auto; }   /* originele vorm, eigen verhoudingen */
.strip-line { font-size: var(--font-size-h3); line-height: var(--line-height-h3); max-width: var(--measure); }
.section.is-strip .text-link { font-size: var(--font-size-h3-mobile); font-weight: var(--font-weight-bold); color: var(--color-zwart); }
.section.is-strip .text-link.is-arrow::after { color: currentColor; }
/* Knoppen op een kleurstrook: zwart met witte tekst, of een zwarte omlijning (handboek) */
.section.is-strip .button-primary { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.section.is-strip .button-primary:hover { background-color: transparent; color: var(--color-zwart); border-color: var(--color-zwart); border-radius: var(--radius-leaf); }
.section.is-strip .button-secondary { background-color: transparent; color: var(--color-zwart); border-color: var(--color-zwart); }
.section.is-strip .button-secondary:hover { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }

/* --------------------------------------------------------------------------
   24.2 Navigatie en footer: wit op zwart
   -------------------------------------------------------------------------- */
.navbar { background-color: var(--color-zwart); color: var(--color-wit); border-bottom: var(--border-width) solid var(--color-zwart); }
.nav-link,
.nav-dropdown-toggle { color: var(--color-wit); }
.nav-dropdown-list { background-color: var(--color-zwart); border-color: var(--color-grijs); }
.nav-menu-button { color: var(--color-wit); border-color: var(--color-wit); }
.nav-menu-button.w--open { background-color: var(--color-oranje); color: var(--color-zwart); border-color: var(--color-oranje); }
.nav-dropdown-column { min-width: 160px; }
.footer { background-color: var(--color-zwart); color: var(--color-wit); border-top: var(--border-width) solid var(--color-grijs); }
.footer-heading { color: var(--color-wit); }   /* grijs op zwart staat niet in de lijst van het handboek (p.13) */
.footer-bottom { border-top-color: var(--color-grijs); }
.footer .form-input { background-color: var(--color-grijs); border-color: var(--color-grijs); color: var(--color-zwart); }
.footer .button-primary { border-color: var(--color-oranje); }
.footer .button-primary:hover { background-color: transparent; color: var(--color-wit); border-color: var(--color-oranje); }

/* --------------------------------------------------------------------------
   24.3 Zwarte start: label in wit met een stip in de kleur van het aanbod
   (blauw op zwart 3,3:1 en groen op zwart 4,4:1 halen voor een klein label geen AA)
   -------------------------------------------------------------------------- */
.page-hero.is-dark .text-small.is-label { color: var(--color-wit); }
.text-small.is-label.has-dot.is-page::before { background-color: var(--color-page); }
.page-hero.is-home { min-height: calc(100vh - var(--navbar-height)); }

/* --------------------------------------------------------------------------
   24.4 Kaarten met ronde labels (pillen), zoals "Kies je atelier" in een eerdere versie.
   Zelfde kaart voor ateliers, kantoren en zalen. Geen titel als die de labels herhaalt.
   -------------------------------------------------------------------------- */
.room-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.room-card-meta li { margin: 0; }
.room-card > .room-card-meta + .room-card-text,
.slide-card > .room-card-meta + .slide-card-text { margin-top: var(--space-s); }
.slide-card > .room-card-meta { margin-bottom: var(--space-xs); }
.room-card-price { font-weight: var(--font-weight-bold); }
.section.is-light .tag.is-outline { border-color: var(--color-zwart); color: var(--color-zwart); }

/* Wie hier werkt / maakt (zwarte strook): rechthoekige foto's, logo's op een grijs vlak */
.section.is-dark .user-card-logo { background-color: var(--color-grijs); border: 0; padding: var(--space-l); object-fit: contain; aspect-ratio: 1 / 1; }
.section.is-dark .user-card .text-small.is-label { color: var(--color-wit); }   /* handboek: op zwart wit, blauw, groen of oranje */
.section.is-dark .image-placeholder { border-color: var(--color-grijs); color: var(--color-wit); }

/* --------------------------------------------------------------------------
   24.5 Testimonials op een kleurstrook: zwarte tekst, naam groot genoeg voor AA
   -------------------------------------------------------------------------- */
.section.is-strip .testimonial-slider { color: var(--color-zwart); }
.section.is-strip .testimonial-author { color: var(--color-zwart); font-size: var(--font-size-h3-mobile); line-height: var(--line-height-h3); }
.section.is-strip .testimonial-author strong { font-weight: var(--font-weight-bold); }
.section.is-strip .tag.is-outline { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.section.is-strip .slider-arrow { border-color: var(--color-zwart); color: var(--color-zwart); }
.section.is-strip .slider-arrow:hover { background-color: var(--color-zwart); color: var(--color-wit); }

/* --------------------------------------------------------------------------
   24.6 Contactstrook (component, onderaan elke pagina): oranje, portret in de ronde vorm
   rechtstreeks op het vlak, zonder grijze rechthoek. Oranje: zwarte tekst haalt 6,4:1.
   -------------------------------------------------------------------------- */
.section.is-strip.is-contact .contact-card-media { padding: 0; background-color: transparent; }
.section.is-strip.is-contact .contact-option { border-top-color: var(--color-zwart); }
.section.is-strip.is-contact .text-link { font-size: var(--font-size-ui); font-weight: var(--font-weight-regular); }   /* oranje: kleine zwarte tekst haalt 6,4:1 */

/* --------------------------------------------------------------------------
   24.7 Pop-up met het plan: grijs venster, labels op grijs
   -------------------------------------------------------------------------- */
.modal-window { background-color: var(--color-grijs); color: var(--color-zwart); }
.plan-floor,
.plan-label-plate { fill: var(--color-grijs); }

/* --------------------------------------------------------------------------
   24.8 Landingspagina: navigatie wit op zwart, daaronder één blauw vlak met zwart logo,
   zwarte intro (24 px: grote tekst, 3,3:1) en een zwarte knop met witte tekst
   -------------------------------------------------------------------------- */
body.is-landing { background-color: var(--color-blauw); }
/* Navigatie op de landingspagina: mee in het blauw, tekst in zwart (handboek: op blauw enkel zwart).
   De knop wordt zwart met witte tekst, zoals op een kleurstrook. */
.navbar.is-landing { background-color: var(--color-blauw); color: var(--color-zwart); border-bottom: 0; }
.navbar.is-landing .nav-link,
.navbar.is-landing .nav-dropdown-toggle { color: var(--color-zwart); }
.navbar.is-landing .nav-dropdown-list { background-color: var(--color-blauw); border-color: var(--color-zwart); }
.navbar.is-landing .nav-menu-button { color: var(--color-zwart); border-color: var(--color-zwart); }
.navbar.is-landing .nav-menu-button.w--open { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.navbar.is-landing .button-primary { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.navbar.is-landing .button-primary:hover { background-color: transparent; color: var(--color-zwart); border-color: var(--color-zwart); }
.navbar.is-landing :focus-visible { outline-color: var(--color-zwart); }
.landing-main { max-width: none; background-color: var(--color-blauw); color: var(--color-zwart); }
.landing-main .landing-logo { max-width: var(--container-max); }
.landing-main .landing-intro { max-width: 40rem; margin-left: auto; margin-right: auto; }
.landing-main .landing-logo { padding: 0 var(--container-margin); }
.landing-main .button-primary { background-color: var(--color-zwart); color: var(--color-wit); border-color: var(--color-zwart); }
.landing-main .button-primary:hover { background-color: transparent; color: var(--color-zwart); border-color: var(--color-zwart); }
.landing-main :focus-visible { outline-color: var(--color-zwart); }

/* --------------------------------------------------------------------------
   24.9 Breakpoints (enkel de vier toegelaten)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .strip-content,
  .strip-media,
  .strip-shape { grid-column: 1 / -1; }
  .strip-shape { max-width: 320px; }
}
@media screen and (max-width: 767px) {
  :root { --wolk-hoogte: var(--space-l); }
  .strip { row-gap: var(--space-l); }
  .strip-line,
  .landing-intro { font-size: var(--font-size-h3); }   /* blijft 24 px: grote tekst op blauw en groen */
  .strip-shape { max-width: 220px; }
}

/* ==========================================================================
   25. Versie J (ronde 6, 3 november 2026): copy van Arkasha, feedback van Debora
   Geen nieuwe kleuren of maten: enkel de variabelen van hierboven.
   ========================================================================== */

/* Opsomming "Dit zit erin" (Kantoren, Ateliers). Webflow: List met de klasse bullet-list. */
.bullet-list { margin: 0; padding-left: 1.2em; display: grid; row-gap: var(--space-xs); }
.bullet-list li { padding-left: var(--space-xs); }
.bullet-list li::marker { color: var(--color-cta); }        /* oranje bolletje op grijs: toegestaan (handboek p.13) */
.section-header + .bullet-list { margin-top: var(--space-m); }
.split-content .bullet-list { margin-top: var(--space-m); }

/* Het plan op de pagina (Organiseren, Circulair): zelfde component als in de pop-up, nu in een zwarte sectie. */
.section.is-plan .plan-intro { max-width: 40rem; margin: 0 0 var(--space-m); color: var(--color-wit); }
.section.is-plan .plan-legend-item,
.section.is-plan .plan-hint { color: var(--color-wit); }

/* Kaarten zonder labels of tekst (ateliers, materialen): de prijs of de titel volgt meteen op de foto. */
.room-card > .image + .room-card-title { margin-top: 0; }
.room-card > .image + .room-card-price { margin-top: 0; }

/* Zalen en materialen als raster (geen slider meer): de prijsregel onder het raster. */
.card-grid + .fact-note { margin-top: var(--space-l); }

/* Tekstlink op een eigen regel, met witruimte erboven (Circulair, "Modulair meegroeien"). */
.lead-text .lead-action { margin-top: var(--space-m); }

/* Gebruikerskaart met link naar de website (zodra de adressen er zijn). */
.user-card-title a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.section.is-plan .plan-info,
.section.is-plan .plan-info .is-label { color: var(--color-wit); }   /* uitleg naast het plan: wit op zwart (in de pop-up zwart op grijs) */
.section.is-plan .plan-tab { color: var(--color-wit); border-color: var(--color-wit); }
.section.is-plan .plan-tab.w--current { background-color: var(--color-grijs); color: var(--color-zwart); border-color: var(--color-grijs); }   /* actief tabblad: grijs vlak op zwart */

/* ==========================================================================
   26. Versie K (ronde 7, 4 november 2026): laatste iteratie, feedback van 4/11
   Geen nieuwe kleuren of maten: enkel de variabelen van hierboven.
   ========================================================================== */

/* 26.1 Rand met halve cirkels boven een kleurstrook (elke pagina): echte halve cirkels die de
   volle breedte vullen (K, 4/11: lager, 32 px; op mobiel 24 px). "round" past het aantal cirkels aan de breedte aan, zodat er aan de
   uiteinden geen afgebroken cirkel staat. Webflow: Div "strip-wolk", custom CSS met deze mask. */
.section.is-strip.has-wolk::before {
  -webkit-mask: radial-gradient(farthest-side at 50% 100%, #000 calc(100% - 0.5px), transparent 100%) 0 0 / calc(2 * var(--wolk-hoogte)) var(--wolk-hoogte) round no-repeat;
  mask: radial-gradient(farthest-side at 50% 100%, #000 calc(100% - 0.5px), transparent 100%) 0 0 / calc(2 * var(--wolk-hoogte)) var(--wolk-hoogte) round no-repeat;
}

/* 26.2 Bereikbaarheid (Home, Contact): een bol per vervoersmiddel.
   Fiets oranje, trein groen, auto blauw, levering zwart. Op zwart krijgt de zwarte bol een grijze rand. */
.access-item.is-fiets .access-mode::before { background-color: var(--color-oranje); }
.access-item.is-trein .access-mode::before { background-color: var(--color-groen); }
.access-item.is-auto .access-mode::before { background-color: var(--color-blauw); }
.access-item.is-levering .access-mode::before { background-color: var(--color-zwart); box-shadow: 0 0 0 1px var(--color-grijs); }

/* 26.3 Contactstrook: het portret 10 % kleiner, bovenaan gelijk met de tekst ernaast. */
.section.is-strip.is-contact .contact-card.is-panel { align-items: start; }
.section.is-strip.is-contact .contact-card-media .contact-card-photo { width: 90%; }

/* 26.4 "Dit zit erin" (Kantoren, Ateliers): in de strook van de kaarten, onder het raster. */
.card-grid + .included { margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: var(--border-width) solid var(--color-zwart); }
.included > .heading-h3 + .bullet-list { margin-top: var(--space-m); }
.included.split { align-items: start; }
.bullet-list.is-2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gutter); max-width: none; }
.image-credit { margin-top: var(--space-2xs); }
.user-card > .user-card-text + .image-credit { margin-top: var(--space-xs); }
.section.is-dark .image-credit { color: var(--color-wit); }

/* 26.5 Gebruikers (Kantoren): overal foto's, met dezelfde witruimte tussen foto en tekst. */
.user-card > .image.is-1x1 { object-fit: cover; }

/* 26.6 Formulier "meeting of event": de zalen in twee kolommen. */
.form-options.is-2-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xs); }

/* 26.7 Landingspagina: uitklapmenu zwart met blauwe tekst (handboek: blauw op zwart mag). */
.navbar.is-landing .nav-dropdown-list { background-color: var(--color-zwart); border-color: var(--color-zwart); }
.navbar.is-landing .nav-dropdown-list .nav-link { color: var(--color-blauw); }

/* 26.8 Plan van Cocon (versie K): tekening uit de bron-pdf, het plan over de volle breedte en de
   uitleg eronder. Ruimtes in kleur (werken blauw, organiseren groen, onthaal zwart), de rest grijs.
   Labels zonder vlak. Aanwijzen: oranje rand aan de binnenkant van de ruimte (clipPath per ruimte),
   dus nooit afgedekt door een muur of een buurruimte. */
.plan.is-k .plan-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
.plan.is-k .plan-canvas,
.plan.is-k .plan-info-panel { grid-column: 1 / -1; }
.plan.is-k .plan-info-panel { min-height: 0; padding: var(--space-m) 0 0; background-color: transparent; color: inherit; border-left: 0; border-top: var(--border-width) solid currentColor; }
.plan.is-k .plan-info { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); max-width: 40rem; }
.plan.is-k .plan-info > * + * { margin-top: 0; }
.plan.is-k .plan-info[hidden] { display: none; }
.plan.is-k .plan-floor { fill: var(--color-grijs); }
.plan.is-k .plan-room,
.plan.is-k .plan-shape { fill: var(--color-grijs); stroke: none; }
.plan.is-k .plan-zone.is-werken .plan-shape { fill: var(--color-blauw); }
.plan.is-k .plan-zone.is-organiseren .plan-shape { fill: var(--color-groen); }
.plan.is-k .plan-zone.is-onthaal .plan-shape { fill: var(--color-zwart); }
.plan.is-k.is-focus-werken .plan-zone:not(.is-werken) .plan-shape,
.plan.is-k.is-focus-organiseren .plan-zone:not(.is-organiseren) .plan-shape { fill: var(--color-grijs); }
.plan.is-k .plan-outline { fill: none; stroke: var(--color-oranje); stroke-width: 6; opacity: 0; transition: opacity var(--transition); pointer-events: none; }
.plan.is-k .plan-zone:hover .plan-outline,
.plan.is-k .plan-zone:focus-visible .plan-outline,
.plan.is-k .plan-zone.is-active .plan-outline { opacity: 1; }
.plan.is-k .plan-zone:hover .plan-shape,
.plan.is-k .plan-zone.is-active .plan-shape { stroke: none; stroke-width: 0; }
.plan.is-k .plan-walls { pointer-events: none; }
.plan.is-k .plan-wall-fill { fill: var(--color-zwart); }
.plan.is-k .plan-wall-line { fill: none; stroke: var(--color-zwart); stroke-linecap: square; }
.plan.is-k .plan-window { fill: var(--color-grijs); stroke: var(--color-zwart); stroke-width: 0.4; }
.plan.is-k .plan-labels { pointer-events: none; }
.plan.is-k .plan-label { fill: var(--color-zwart); stroke: none; font-size: 9.5px; font-weight: var(--font-weight-bold); letter-spacing: 0.02em; }
.plan.is-k .plan-label.is-small { font-size: 7px; font-weight: var(--font-weight-regular); letter-spacing: 0; }
.plan.is-k .plan-label-group.is-onthaal .plan-label { fill: var(--color-wit); }
.plan.is-k.is-focus-werken .plan-label-group.is-onthaal .plan-label,
.plan.is-k.is-focus-organiseren .plan-label-group.is-onthaal .plan-label { fill: var(--color-zwart); }
.plan.is-k .plan-legend-item::before { border-color: var(--color-grijs); }
.plan.is-k .plan-legend-item.is-ander::before { background-color: var(--color-grijs); }
.plan.is-k .plan-legend-item.is-onthaal::before { background-color: var(--color-zwart); }
.plan.is-k .plan-legend-item.is-werken::before { background-color: var(--color-blauw); }
.plan.is-k .plan-legend-item.is-organiseren::before { background-color: var(--color-groen); }
.modal-window .plan.is-k .plan-legend-item::before { border-color: var(--color-zwart); }

@media screen and (max-width: 991px) {
  .included.split { row-gap: var(--space-l); }
}
@media screen and (max-width: 767px) {
  .bullet-list.is-2-col,
  .form-options.is-2-col { grid-template-columns: minmax(0, 1fr); }
  .plan.is-k .plan-svg { min-width: 860px; }   /* het plan blijft leesbaar: opzij vegen */
  .section.is-strip.is-contact .contact-card-media .contact-card-photo { width: 90%; max-width: 380px; }
}

/* 26.9 Bijsturing 4/11 (tweede ronde): lagere halve cirkels, portret iets naar rechts,
   archieffoto bovenaan uitgesneden, bereikbaarheid op Contact grijs zoals op de homepage. */
:root { --wolk-hoogte: var(--space-l); }
.section.is-strip.is-contact .contact-card-media .contact-card-photo { margin-left: auto; margin-right: 0; }
.image.is-crop-top { object-position: 50% 0; }
.section.is-light.is-after-light { padding-top: 0; }
.section.is-light.is-after-light .section-header:first-child { max-width: none; padding-top: var(--space-2xl); border-top: var(--border-width) solid var(--color-zwart); }
.section.is-light.is-after-light .section-header:first-child > p { max-width: var(--measure); }
@media screen and (max-width: 767px) {
  :root { --wolk-hoogte: var(--space-m); }
  .section.is-strip.is-contact .contact-card-media .contact-card-photo { margin-left: 0; }
}

/* 26.10 Rand boven een kleurstrook (4/11, derde ronde, voorbeeld van Matthias): brede, lage bogen die
   in een punt samenkomen, geen halve cirkels. Elke boog is een stuk van een cirkel: 6 keer zo breed als hoog
   (straal iets meer dan 5 x de hoogte, zodat de punten net op de strook vallen). De maten staan in procenten van de tegel, zodat "round" de bogen mee uitrekt
   en de punten altijd op de onderrand blijven. Webflow: Div "strip-wolk", custom CSS met deze mask. */
.section.is-strip.has-wolk::before {
  -webkit-mask: radial-gradient(84% 504% at 50% 504%, #000 calc(100% - 1px), transparent 100%) 0 0 / calc(6 * var(--wolk-hoogte)) var(--wolk-hoogte) round no-repeat;
  mask: radial-gradient(84% 504% at 50% 504%, #000 calc(100% - 1px), transparent 100%) 0 0 / calc(6 * var(--wolk-hoogte)) var(--wolk-hoogte) round no-repeat;
}

/* 26.11 Cookiebanner (component, elke pagina): zwart vlak onderaan het scherm, witte tekst.
   Weigeren en accepteren zijn even groot (oranje). Webflow: Finsweet Cookie Consent (fs-cc) of CookieYes. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  background-color: var(--color-zwart); color: var(--color-wit);
  border-top: var(--border-width) solid var(--color-grijs);
  padding-block: var(--space-m);
}
.cookie-banner-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-m) var(--space-xl); align-items: end; }
.cookie-banner-text > * + * { margin-top: var(--space-xs); }
.cookie-banner-text p { max-width: var(--measure); margin-bottom: 0; }
.cookie-banner [hidden] { display: none !important; }
.cookie-banner .text-link { color: var(--color-wit); min-height: 0; font-size: inherit; }
.cookie-preferences { grid-column: 1; grid-row: 2; display: grid; gap: var(--space-s); }
.cookie-option { display: flex; gap: var(--space-s); align-items: flex-start; }
.cookie-option input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-oranje); }
.cookie-actions { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
.cookie-actions .button-primary, .cookie-actions .button-secondary { white-space: nowrap; }
.footer-cookie-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* 26.12 Privacyverklaring: zwarte start zonder foto, per onderdeel titel links en tekst rechts (de lead van K). */
.page-hero.is-text-only .page-hero-content { grid-column: 1 / span 8; }
.legal-block + .legal-block { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--border-width) solid var(--color-zwart); }
.legal-block { scroll-margin-top: var(--space-3xl); }
.legal-block .bullet-list li + li { margin-top: var(--space-2xs); }
@media screen and (max-width: 991px) {
  .cookie-banner-inner { grid-template-columns: minmax(0, 1fr); }
  .cookie-preferences, .cookie-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .page-hero.is-text-only .page-hero-content { grid-column: 1 / -1; }
}
@media screen and (max-width: 479px) {
  .cookie-actions .button-primary, .cookie-actions .button-secondary { flex: 1 1 40%; justify-content: center; padding-left: var(--space-s); padding-right: var(--space-s); }
}

/* Online versie: uitleg onder de verzendknop van een formulier. */
.form-note { margin-top: calc(-1 * var(--space-xs)); }