/* Lettertypes: Jost (koppen) en Instrument Sans (lopende tekst), gewicht 400 en 500, zelf gehost.
   Dezelfde @font-face-regels als Google Fonts gaf bij het prototype, met de bestanden uit @fontsource-variable
   (dat zijn dezelfde bestanden als die van Google). Zo blijft de tekst exact gelijk aan het prototype. */

/* Instrument Sans, latin-ext */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url('/_astro/instrument-sans-latin-ext-wght-normal.B5bTHO_g.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
  src: url('/_astro/instrument-sans-latin-ext-wght-normal.B5bTHO_g.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans, latin */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url('/_astro/instrument-sans-latin-wght-normal.BbzFLZTg.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
  src: url('/_astro/instrument-sans-latin-wght-normal.BbzFLZTg.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost, cyrillic */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/_astro/jost-cyrillic-wght-normal.CjwCQKo9.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/_astro/jost-cyrillic-wght-normal.CjwCQKo9.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Jost, latin-ext */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/_astro/jost-latin-ext-wght-normal.BDUtSsKd.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/_astro/jost-latin-ext-wght-normal.BDUtSsKd.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost, latin */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/_astro/jost-latin-wght-normal.ObQm3Zd1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/_astro/jost-latin-wght-normal.ObQm3Zd1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lagen: een vaste hemel met vloeistof en een 3D-ruimte; het verhaal loopt in een kolom links, het beeld staat rechts (smal: beeld boven, tekst onder). */
:root {
  --fm-nacht: #0E0D25;
  --fm-wit: #F3F1F7;
  --fm-zacht: #CFC8DF;
  --fm-gedempt: #9D96B6;
  --fm-rand: rgba(243, 241, 247, 0.16);
  --fm-scherm: rgba(14, 13, 37, 0.72);
  --fm-glans: linear-gradient(100deg, #E8846F 0%, #F6C4D6 50%, #C9B4F5 100%);
  --fm-knop: linear-gradient(120deg, #E8846F 0%, #F2B8C6 55%, #C9B4F5 100%);
  --fm-knop-tekst: #120F26;
  --fm-stip-a: #EC6FA8;
  --fm-stip-b: #C9B4F5;
  --fm-display: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --fm-tekst: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fm-fx: 60vw; --fm-fy: 50vh; --fm-fr: 30vh;
  color-scheme: dark;
}
:root[data-palet="brons"] {
  --fm-nacht: #0D0D22;
  --fm-glans: linear-gradient(100deg, #D9B98A 0%, #F6E7CC 40%, #E3C495 66%, #F1DDB8 100%);
  --fm-knop: linear-gradient(120deg, #C9A673 0%, #F1E2C6 45%, #D7B27E 72%, #EBD3A8 100%);
  --fm-knop-tekst: #141414;
  --fm-stip-a: #B18D5D;
  --fm-stip-b: #EADBC0;
  --fm-scherm: rgba(13, 13, 34, 0.72);
}
:root[data-palet="zwart"] {
  --fm-nacht: #141414;
  --fm-zacht: #C6CBD0;
  --fm-gedempt: #9A9FA4;
  --fm-rand: rgba(242, 242, 242, 0.14);
  --fm-glans: linear-gradient(100deg, #A37E54 0%, #DAC8AC 30%, #B08B5C 52%, #CDB38E 75%, #9F7A50 100%);
  --fm-knop: linear-gradient(135deg, #A37E54 0%, #DAC8AC 30%, #B08B5C 52%, #CDB38E 75%, #9F7A50 100%);
  --fm-knop-tekst: #141414;
  --fm-stip-a: #9D794A;
  --fm-stip-b: #DFCFB5;
  --fm-scherm: rgba(20, 20, 20, 0.74);
}
html { background: var(--fm-nacht); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--fm-nacht);
  color: var(--fm-wit);
  font-family: var(--fm-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(236, 111, 168, 0.4); }

/* de lagen achter de tekst */
.fm-lagen { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fm-lagen canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; display: block; }
.fm-zonder-webgl .fm-lagen { background: linear-gradient(180deg, #0E0D25 0%, #1A2350 38%, #3B3062 72%, #5E375B 100%); }
#fm-woorden { height: 100%; }

/* kop */
.fm-kop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) max(16px, 4vw) 18px;
  background: linear-gradient(180deg, var(--fm-scherm) 0%, transparent 100%);
}
.fm-merk { display: flex; align-items: center; gap: 14px; color: var(--fm-wit); text-decoration: none; min-width: 0; }
.fm-merk svg { width: 30px; height: 28px; flex-shrink: 0; }
.fm-woordmerk { display: flex; flex-direction: column; line-height: 1.15; }
.fm-woordmerk b { font-family: var(--fm-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.32em; }
.fm-woordmerk span { font-size: 0.68rem; letter-spacing: 0.3em; color: var(--fm-gedempt); text-transform: uppercase; }
.fm-hoofdstukken { display: none; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fm-breed .fm-hoofdstukken { display: flex; }
.fm-hoofdstukken a {
  display: block; padding: 6px 12px; border-radius: 999px; color: var(--fm-gedempt); text-decoration: none;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; transition: color .3s, background-color .3s;
}
.fm-hoofdstukken a:hover { color: var(--fm-wit); }
.fm-hoofdstukken a[aria-current] { color: var(--fm-wit); background: rgba(243, 241, 247, 0.08); }
.fm-nu { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fm-gedempt); }
.fm-breed .fm-nu { display: none; }
.fm-paletten { display: flex; align-items: center; gap: 10px; }
.fm-paletten > span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fm-gedempt); }
.fm-paletknop {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--fm-rand); outline-offset: 3px; transition: transform .25s;
}
.fm-paletknop:hover { transform: scale(1.08); }
.fm-paletknop[aria-pressed="true"] { outline: 2px solid var(--fm-wit); }
.fm-paletknop[data-palet-knop="schemering"] { background: radial-gradient(circle at 35% 35%, #F6C4D6 0%, #EC6FA8 40%, #3B3062 100%); }
.fm-paletknop[data-palet-knop="brons"] { background: radial-gradient(circle at 35% 35%, #EADBC0 0%, #B18D5D 45%, #1A2350 100%); }
.fm-paletknop[data-palet-knop="zwart"] { background: radial-gradient(circle at 35% 35%, #DFCFB5 0%, #9D794A 45%, #141414 100%); }

/* het verhaal */
main { position: relative; z-index: 1; }
.fm-sectie { position: relative; min-height: 100vh; min-height: 100svh; padding-inline: max(16px, 5vw); box-sizing: border-box; }
.fm-sectie + .fm-sectie { min-height: 170vh; min-height: 170svh; }
#kennismaken { min-height: 120vh; min-height: 120svh; }
.fm-blok {
  position: sticky; display: flex; flex-direction: column; gap: 20px;
  max-width: 25rem; min-width: 0;
}
.fm-breed .fm-sectie { padding-left: 72px; }
.fm-breed .fm-sectie + .fm-sectie { padding-top: 28vh; padding-top: 28svh; }
.fm-breed .fm-blok { top: 28vh; top: 28svh; }
.fm-breed #aandacht .fm-blok { position: relative; top: 0; padding-top: 0; min-height: 100vh; min-height: 100svh; justify-content: center; }
:root:not(.fm-breed) .fm-sectie { padding-top: calc(var(--fm-fy) + var(--fm-fr) + 28px); }
:root:not(.fm-breed) .fm-blok {
  top: calc(var(--fm-fy) + var(--fm-fr) + 28px);
  max-width: 34rem; margin-inline: auto;
}
:root:not(.fm-breed) #aandacht .fm-blok { position: relative; top: 0; }
:root:not(.fm-breed) .fm-blok::before {
  content: ""; position: absolute; left: -16px; right: -16px; top: -36px; bottom: -64px; z-index: -1;
  background: linear-gradient(180deg, transparent 0%, var(--fm-scherm) 22%, var(--fm-scherm) 78%, transparent 100%);
}
:root:not(.fm-breed) #aandacht .fm-blok::before { display: none; }
.fm-label { font-family: var(--fm-display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fm-gedempt); margin: 0; }
h1, h2 { font-family: var(--fm-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.06; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 4.6vw, 4.4rem); }
h2 { font-size: clamp(2.1rem, 3.6vw, 3.5rem); }
.fm-glans { background-image: var(--fm-glans); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fm-glans.is-gesplitst, .is-gesplitst .fm-glans { background-image: none; -webkit-text-fill-color: currentColor; color: inherit; }
.is-gesplitst .fm-glans .fm-woord { background-image: var(--fm-glans); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fm-blok p { margin: 0; color: var(--fm-zacht); max-width: 34ch; }
.fm-hint { white-space: nowrap; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--fm-gedempt); display: flex; align-items: center; gap: 12px; }
.fm-hint::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.fm-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.fm-adres { font-size: 1rem; color: var(--fm-wit); user-select: all; overflow-wrap: anywhere; }
.fm-knop {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 500; font-size: 0.95rem;
  padding: 12px 22px; border-radius: 999px; background: var(--fm-knop); color: var(--fm-knop-tekst);
  transition: transform .25s, box-shadow .25s;
}
.fm-knop:hover { transform: translateY(-1px); box-shadow: 0 8px 28px -8px rgba(236, 111, 168, 0.55); }
.fm-melding { min-height: 1.4em; font-size: 0.85rem; color: var(--fm-gedempt); margin: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fm-wit); outline-offset: 3px; }
.fm-voet {
  position: relative; z-index: 1; background: linear-gradient(180deg, transparent 0%, var(--fm-scherm) 45%); padding: 40px max(16px, 5vw) calc(env(safe-area-inset-bottom, 0px) + 28px);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 0.78rem; color: var(--fm-gedempt);
}
.fm-breed .fm-voet { padding-left: 72px; }
.fm-voet p { margin: 0; max-width: 60ch; }
/* het podium: alle hoofdstukken op één plek; het scrollen bepaalt welk hoofdstuk je ziet */
:root.fm-podium .fm-sectie { padding-top: 0; }
:root.fm-podium .fm-blok,
:root.fm-podium #aandacht .fm-blok { position: fixed; z-index: 1; min-height: 0; padding-top: 0; justify-content: flex-start; will-change: opacity, transform; }
:root.fm-podium.fm-breed .fm-blok,
:root.fm-podium.fm-breed #aandacht .fm-blok { left: 72px; top: 26vh; top: 26svh; width: min(25rem, calc(var(--fm-fx) - var(--fm-fr) - 112px)); }
:root.fm-podium:not(.fm-breed) .fm-blok,
:root.fm-podium:not(.fm-breed) #aandacht .fm-blok { left: 16px; right: 16px; margin-inline: auto; top: calc(var(--fm-fy) + var(--fm-fr) + 28px); max-width: 34rem; }
:root.fm-podium:not(.fm-breed) #aandacht .fm-blok::before { display: block; }
@media (max-height: 720px) {
  :root:not(.fm-breed) h1 { font-size: 2rem; }
  :root:not(.fm-breed) h2 { font-size: 1.75rem; }
  :root:not(.fm-breed) .fm-blok { gap: 14px; }
  :root:not(.fm-breed) .fm-blok p { font-size: 0.95rem; line-height: 1.5; }
}
@media (max-width: 640px) {
  .fm-nu, .fm-paletten > span { display: none; }
  .fm-kop { gap: 12px; }
  .fm-woordmerk b { font-size: 0.86rem; letter-spacing: 0.24em; }
  .fm-paletten { gap: 8px; }
  .fm-paletknop { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-knop, .fm-paletknop, .fm-hoofdstukken a { transition: none; }
}
/* Het menu met de pagina's (Menu.astro), de kop waarin het staat, de hemel zonder WebGL, het brons van selectie en knop,
   de link in de voet en het scrolteken van de homepage.
   Dit bestand doet op elke pagina mee, na globaal.css. Wat alleen voor vervolgpagina's geldt, staat in vervolg.css.
   Het menu is één lijst: vanaf 900 pixels een rij in de kop, daaronder een knop met de lijst als paneel eronder.
   De toestand staat op de knop: aria-expanded. Zonder script blijft de knop verborgen en is de lijst altijd te zien. */
.fm-menuknop {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-width: 32px; min-height: 32px; margin: 0; padding: 5px 12px;
  appearance: none; border: 1px solid var(--fm-rand); border-radius: 999px; background: transparent; color: var(--fm-wit); cursor: pointer;
  font: inherit; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.fm-menuknop[hidden] { display: none; }
.fm-menuknop:hover, .fm-menuknop[aria-expanded="true"] { background: rgba(243, 241, 247, 0.08); }
.fm-menuteken { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* de lijst: een paneel onder de kop, rechts */
.fm-paginas {
  position: absolute; top: calc(100% - 10px); right: max(16px, 4vw);
  display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; min-width: 11rem;
  margin: 0; padding: 8px; list-style: none;
  background: var(--fm-nacht); border: 1px solid var(--fm-rand); border-radius: 18px;
}
.fm-menuknop:not([hidden])[aria-expanded="false"] + .fm-paginas { display: none; }
/* past het paneel niet in het venster (veel zoom op een laag scherm), dan schuift de lijst zelf.
   100% is de hoogte van de kop; onder het paneel blijven 16 pixels vrij. Alleen met script: de rij zonder script heeft te weinig ruimte voor de focusrand. */
.fm-menuknop:not([hidden]) + .fm-paginas {
  max-height: calc(100vh - 100% - 6px); max-height: calc(100dvh - 100% - 6px); overflow-y: auto; overscroll-behavior: contain;
}
.fm-paginas a {
  display: block; padding: 8px 14px; border-radius: 999px; color: var(--fm-gedempt); text-decoration: none;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.fm-paginas a:hover { color: var(--fm-wit); }
/* de pagina waar je bent: alleen witte letters, zonder rand of vlak (Ronald, 14 oktober 2026: "dat wordt heel lelijk").
   Een schermlezer hoort het via aria-current. */
.fm-paginas a[aria-current] { color: var(--fm-wit); }
/* Contact is een knop: dezelfde bronzen knop als "Kopieer e-mailadres" (fm-knop in globaal.css), in gewone letters.
   Op de pagina Contact zelf ziet de knop er hetzelfde uit. De selectors zijn zwaar genoeg voor de rij en voor het paneel. */
:root .fm-menu .fm-paginas a.fm-menu-knop {
  padding: 8px 18px; background: var(--fm-knop); color: var(--fm-knop-tekst); box-shadow: none;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; transition: transform .25s, box-shadow .25s;
}
/* bij aanwijzen precies hetzelfde als de knop "Neem contact op" op de homepage (fm-knop): iets omhoog, met een bronzen gloed
   eronder. De glans die eerst over de knop schoof, is weg (Ronald, 14 oktober 2026). */
:root .fm-menu .fm-paginas a.fm-menu-knop:hover { color: var(--fm-knop-tekst); transform: translateY(-1px); box-shadow: 0 8px 28px -8px rgba(177, 141, 93, 0.55); }
/* In het uitklapmenu (onder 900 pixels) is Contact een kleine knop, niet zo breed als het paneel (Ronald: "te lomp", 14 oktober 2026). */
:root .fm-menu .fm-menuknop:not([hidden]) + .fm-paginas a.fm-menu-knop { display: inline-block; margin: 8px 0 4px 6px; padding: 6px 16px; font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) {
  :root .fm-menu .fm-paginas a.fm-menu-knop { transition: none; }
  :root .fm-menu .fm-paginas a.fm-menu-knop:hover { transform: none; }
}

/* zonder script: de lijst staat als rij onder de kop */
.fm-menuknop[hidden] + .fm-paginas {
  left: 0; right: 0; top: calc(100% - 14px); flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 0 6px;
  min-width: 0; padding: 4px max(16px, 4vw); border-width: 0 0 1px; border-radius: 0;
}

/* smal: alleen het teken; het woord blijft de naam van de knop voor schermlezers */
@media (max-width: 699.98px) {
  .fm-menuknop { padding: 5px 6px; }
  .fm-menuwoord { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* vanaf 900 pixels: een rij in de kop, zonder knop. Daaronder staat de knop rechts in de kop.
   De grenzen staan ook in em: met een grotere standaardletter in de browser komt de rij later.
   Het script in Menu.astro sluit het menu op dezelfde grens; pas ze samen aan.
   De selectors zijn zwaar genoeg om ook vóór de regels hierboven te winnen (vervolg.css laadt eerder dan dit bestand). */
@media (min-width: 900px) and (min-width: 56.25em) {
  :root .fm-menu .fm-menuknop { display: none; }
  :root .fm-menu .fm-menuknop + .fm-paginas {
    position: static; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 6px;
    min-width: 0; max-height: none; padding: 0; overflow: visible; background: none; border: 0; border-radius: 0;
  }
  :root .fm-menu .fm-paginas a { padding: 6px 12px; }
  /* Contact staat in de rij op één lijn met de andere pagina's, en is niet hoger dan nodig (Ronald, 14 oktober 2026) */
  :root .fm-menu .fm-menuknop + .fm-paginas { align-items: center; }
  :root .fm-menu .fm-menuknop + .fm-paginas a.fm-menu-knop { padding: 6px 16px; }
}
@media not all and (min-width: 900px), not all and (min-width: 56.25em) {
  :root .fm-menu { margin-left: auto; }
}

/* ---- de kop, als het krap wordt ---- */
/* past de kop toch niet (grotere letter, heel smal scherm), dan wordt het woordmerk afgekapt en schuift het niet over de knoppen */
.fm-kop .fm-woordmerk { min-width: 0; overflow: hidden; white-space: nowrap; }
/* Het teken, het woordmerk en de menuknop hebben samen 282 pixels nodig (gemeten; tot 9 november 2026, met de kortere
   regel "Data & AI" onder het woordmerk, 255 pixels). Is het venster smaller, dan blijft alleen
   het teken staan; de koppeling houdt haar naam (aria-label). De grens staat ook in em: met een grotere
   standaardletter in de browser is het woordmerk breder en is het eerder krap. */
@media (max-width: 281.98px), (max-width: 17.6em) {
  .fm-kop .fm-woordmerk { display: none; }
}

/* ---- de regel onder het woordmerk ---- */
/* "Independent AI Security" (Ronald, 9 november 2026; tot dan "Data & AI") is ruim twee keer zo lang als de oude regel.
   Met kleinere letters en minder letterafstand is hij op een breed scherm even breed als FOREVERMORE (gemeten: allebei
   162 pixels). Op een telefoon is FOREVERMORE kleiner (globaal.css) en de regel iets breder; daar hoort de grens hierboven bij. */
.fm-kop .fm-woordmerk span { font-size: 0.6rem; letter-spacing: 0.15em; }

/* ---- de homepage zonder WebGL: de hemel in de kleuren van het palet ---- */
/* globaal.css geeft die hemel altijd de kleuren van Schemering. Dit zijn de luchtkleuren van de andere twee paletten
   (PALET in palet.js), met dezelfde stops. */
:root[data-palet="zwart"].fm-zonder-webgl .fm-lagen { background: linear-gradient(180deg, #121213 0%, #141415 38%, #161617 72%, #1B1917 100%); }
:root[data-palet="brons"].fm-zonder-webgl .fm-lagen { background: linear-gradient(180deg, #0D0D22 0%, #181F45 38%, #33304F 72%, #4E3B45 100%); }

/* ---- een subtiel randje om de bronzen knoppen ---- */
/* Een dunne, licht bronzen lijn net buiten de knop (Ronald, 14 oktober 2026). Bij focus neemt de witte focusrand uit
   globaal.css die plek in; de regel daarvoor staat hier ook, anders zou het randje de focusrand overschrijven. */
:root .fm-knop,
:root .fm-menu .fm-paginas a.fm-menu-knop { outline: 1px solid rgba(223, 207, 181, 0.45); outline-offset: 3px; }
:root .fm-knop:focus-visible,
:root .fm-menu .fm-paginas a.fm-menu-knop:focus-visible { outline: 2px solid var(--fm-wit); outline-offset: 3px; }

/* ---- de tekst van de hoofdstukken ---- */
/* Tot 9 november 2026 stond hier een regel die het label van hoofdstuk 2 ("2 / 4 · Connect the missing links") op één regel
   hield. De labels zijn nu kort (Verdediging, Overzicht, De wacht, Kennismaken) en passen overal. Komt er weer een lang
   label, haal die regel dan terug uit git. */
/* Op een lage telefoon (tot 720 pixels hoog) maakt globaal.css alle alinea's in het tekstblok groter (.fm-blok p), en de
   labels daarmee ook, want dat zijn ook alinea's. Dat was niet de bedoeling: een label blijft overal 0,78rem. */
:root:not(.fm-breed) #fm-verhaal .fm-blok p.fm-label { font-size: 0.78rem; }
/* Op een breed scherm is het tekstblok groter en loopt het verder naar het midden (Ronald, 14 oktober 2026). Het brein staat
   rechts (brandpunt.js), met het veld eromheen (afweer.js): dat is ongeveer 1,03 keer fr breed om fx. Het tekstblok loopt tot
   fr voor fx, met 36 pixels ertussen, en is hooguit 40rem breed; zo blijft er ruim 20 pixels tussen de tekst en het veld.
   Van 9 tot 12 november 2026 stond er een smaller schild, en liep het tekstblok door tot 0,6 keer fr voor fx, hooguit 56rem
   breed, met een grotere kop en tekst (Ronald: "de tekst mag op de pc meer ruimte in beslag nemen"). Op een telefoon blijft
   alles zoals het was. */
:root.fm-podium.fm-breed #fm-verhaal .fm-blok { width: min(40rem, calc(var(--fm-fx) - var(--fm-fr) - 108px)); max-width: none; }
/* de kop van hoofdstuk 1 en de tekst eronder (van 9 tot 12 november 2026, bij het schild, 5.8vw met hooguit 6.4rem, en
   1.35rem); de zin van hoofdstuk 1 blijft drie regels (38ch, dus gelijk bij elke lettergrootte) */
:root.fm-breed #fm-verhaal h1 { font-size: clamp(2.9rem, 5.2vw, 5.6rem); }
:root.fm-breed #fm-verhaal h2 { font-size: clamp(2.4rem, 4.2vw, 4.6rem); }
:root.fm-breed #fm-verhaal .fm-blok > p:not([class]) { font-size: 1.2rem; max-width: 38ch; }
:root.fm-breed #fm-verhaal .fm-blok p.fm-label { font-size: 0.85rem; }
:root.fm-breed #fm-verhaal .fm-blok p.fm-hint { font-size: 0.9rem; }
/* De knop "Neem contact op" onder de tekst van hoofdstuk 1 (Ronald, 14 oktober 2026): de bronzen knop, als link */
#fm-verhaal .fm-actie { margin: 0; }
#fm-verhaal .fm-actie a.fm-knop { display: inline-block; color: var(--fm-knop-tekst); text-decoration: none; }
/* De knop op het laatste scherm, met het gezicht van Ronald erin (Ronald, 5 november 2026: "hier moet mijn foto ook subtiel in
   opgenomen worden. Neem contact op met Ronald"): een kleine ronde foto links in de bronzen knop, zoals bij een contactpersoon.
   De knop houdt ongeveer zijn hoogte; de foto staat 5 pixels van de rand. */
/* Persoonlijker (Ronald, 9 november 2026: "dit mag wat persoonlijker. Foto iets groter"): de foto is 56 pixels, met een bronzen
   randje, en steekt links, boven en onder iets over de knop heen. Eerst was hij 36 pixels, binnen de knop. */
/* Op het laatste scherm een vlak met Ronald (Ronald, 12 november 2026: "Dit mag echt wel een heel vlak worden. De foto groter
   aanwezig. Veel persoonlijker en minder opgekropt"): een warme, iets lichtere ondergrond met een bronzen rand en een zachte
   bronzen gloed, zoals het uitklapmenu. Links een ronde foto van zijn gezicht met een bronzen randje, rechts zijn naam, een
   zin van hemzelf en de knop naar Contact, met Koffie ernaast. Van 5 tot 12 november 2026 stond hier een knop "Neem contact
   op met Ronald" met een kleine ronde foto (fm-knop-ronald). Op een telefoon is de foto kleiner en staan de knoppen onder de
   foto en de tekst, in het midden: het hoofdstuk moet binnen het beeld passen (het podium scrolt niet). */
#fm-verhaal .fm-ronald {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 26px;
  margin-top: 8px; padding: 24px 28px 24px 24px; border-radius: 24px; text-align: left;
  background: linear-gradient(155deg, rgba(52, 42, 32, 0.86) 0%, rgba(27, 24, 21, 0.9) 60%, rgba(22, 20, 18, 0.9) 100%);
  border: 1px solid rgba(218, 200, 172, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.16), 0 26px 70px -30px rgba(177, 141, 93, 0.55), 0 12px 32px -18px rgba(0, 0, 0, 0.7);
}
#fm-verhaal .fm-ronald-foto {
  display: block; width: clamp(104px, 10vw, 152px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px #DAC8AC, 0 0 0 7px rgba(218, 200, 172, 0.12), 0 12px 30px rgba(0, 0, 0, 0.55);
}
#fm-verhaal .fm-ronald-tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#fm-verhaal .fm-blok .fm-ronald p { margin: 0; max-width: none; }
#fm-verhaal .fm-blok .fm-ronald-naam { font-family: var(--fm-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; color: var(--fm-wit); }
#fm-verhaal .fm-blok .fm-ronald-zin { font-size: 1.05rem; line-height: 1.5; color: var(--fm-zacht); text-wrap: balance; }
#fm-verhaal .fm-blok .fm-ronald-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 12px; }
#fm-verhaal .fm-ronald-acties .fm-knop { display: inline-block; color: var(--fm-knop-tekst); text-decoration: none; }
#fm-verhaal .fm-ronald-koffie { color: #DAC8AC; font-weight: 500; font-size: 0.95rem; text-decoration: underline; text-decoration-color: rgba(218, 200, 172, 0.4); text-underline-offset: 4px; }
#fm-verhaal .fm-ronald-koffie:hover { color: var(--fm-wit); text-decoration-color: currentColor; }
:root:not(.fm-breed) #fm-verhaal .fm-ronald { gap: 14px 16px; padding: 16px 18px; border-radius: 20px; }
:root.fm-podium:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald p { margin-inline: 0; }
:root:not(.fm-breed) #fm-verhaal .fm-ronald-foto { width: 64px; box-shadow: 0 0 0 2px #DAC8AC, 0 8px 20px rgba(0, 0, 0, 0.5); }
:root:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-naam { font-size: 1.1rem; }
:root:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-zin { font-size: 0.98rem; }
:root:not(.fm-breed) #fm-verhaal .fm-ronald-tekst { display: contents; }
:root:not(.fm-breed) #fm-verhaal .fm-ronald { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "foto naam" "foto zin" "acties acties"; row-gap: 4px; }
:root:not(.fm-breed) #fm-verhaal .fm-ronald-foto { grid-area: foto; }
:root:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-naam { grid-area: naam; align-self: end; }
:root:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-zin { grid-area: zin; align-self: start; }
:root:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-acties { grid-area: acties; justify-content: center; gap: 10px 16px; margin-top: 12px; }
/* Hetzelfde vlak staat sinds 12 november 2026 ook op het eerste scherm, in plaats van de knop "Neem contact op" (Ronald: "ik
   wil dit eigenlijk al wel op de eerste pagina hebben staan, want dat maakt het persoonlijker"). Op een telefoon past het daar
   niet binnen het beeld; daar staat de knop "Neem contact op met Ronald" met een kleine ronde foto, zoals die van 5 tot
   12 november 2026 op het laatste scherm stond. Ook op een kleiner breed scherm (smaller dan 1400 of lager dan 880 pixels):
   daar komt het tekstblok met het vlak tot de vaste plek van het scrolteken, en dan springt dat naar het label bovenaan
   (gemeten op 1000 x 820, 1280 x 720, 1400 x 820 en 1536 x 864; het scrolteken rekent met het hele tekstblok). Zonder script
   (geen fm-breed) ook de knop. */
#fm-verhaal .fm-eerste-contact { display: flex; flex-direction: column; }
#fm-verhaal .fm-actie a.fm-knop-ronald { display: inline-flex; align-items: center; gap: 12px; padding: 6px 22px 6px 6px; }
#fm-verhaal .fm-knop-ronald img { display: block; flex: none; width: 40px; height: 40px; margin: 0; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.35); }
/* de foto staat nu helemaal binnen de knop (Ronald, 12 november 2026: "Dit ziet er raar uit op de telefoon"); eerst stak hij
   links, boven en onder over de knop heen */
#fm-verhaal .fm-ronald-eerst { display: none; margin-top: 4px; }
/* meer lucht op de pc (Ronald, 12 november 2026: "De elementen hierin vind ik allemaal heel mooi. Alleen het is iets te
   opgepropt. Het heeft meer spacing nodig."): meer ruimte tussen de kop, de tekst en het vlak, en in het vlak zelf. Op een
   telefoon blijft het zoals het was: daar moet het hoofdstuk binnen het beeld passen. */
:root.fm-breed #fm-verhaal #aandacht .fm-blok { gap: 32px; }
:root.fm-breed #fm-verhaal #kennismaken .fm-blok { gap: 48px; }
/* het vlak is driekwart zo hoog (Ronald, 12 november 2026: "kan je deze balk 3/4e van de hoogte maken"): een kleinere foto, de zin op
   één regel en minder ruimte boven en onder */
:root.fm-breed #fm-verhaal .fm-ronald { margin-top: 44px; padding: 22px 40px 22px 24px; gap: 18px 30px; }
:root.fm-breed #fm-verhaal .fm-ronald-foto { width: 112px; }
:root.fm-breed #fm-verhaal .fm-ronald-tekst { gap: 6px; }
/* de zin breekt gewoon af als hij niet op één regel past (de Engelse zin stak eerst uit het vlak: Ronald, 12 november 2026,
   "dit is niet goed"); de Nederlandse past op één regel */
:root.fm-breed #fm-verhaal .fm-blok .fm-ronald-acties { margin-top: 10px; }
@media (min-width: 1400px) and (min-height: 920px) {
  :root.fm-breed #fm-verhaal .fm-ronald-eerst { display: grid; }
  :root.fm-breed #fm-verhaal .fm-actie-smal { display: none; }
}
/* de korte tekst daarboven in twee even lange regels, zonder "mee." los op de tweede regel (een oudere browser slaat dat over) */
#kennismaken .fm-blok > p:not([class]) { text-wrap: balance; }
/* Op een telefoon staat de tekst van de hoofdstukken in het midden (Ronald, 14 oktober 2026). De woordovergangen en het
   scrolteken meten de woorden zelf, dus die volgen vanzelf. */
:root.fm-podium:not(.fm-breed) #fm-verhaal .fm-blok { text-align: center; }
:root.fm-podium:not(.fm-breed) #fm-verhaal .fm-blok p { margin-inline: auto; }
:root.fm-podium:not(.fm-breed) #fm-verhaal .fm-hint,
:root.fm-podium:not(.fm-breed) #fm-verhaal .fm-contact { justify-content: center; }

/* ---- brons in plaats van roze ---- */
/* globaal.css kleurt geselecteerde tekst en de gloed onder een knop in het roze van Schemering, in elk palet.
   In zwart is dat het brons van de ring (#B18D5D), even sterk. */
:root[data-palet="zwart"] ::selection { background: rgba(177, 141, 93, 0.4); }
:root[data-palet="zwart"] .fm-knop:hover { box-shadow: 0 8px 28px -8px rgba(177, 141, 93, 0.55); }

/* ---- de voet: de link naar de privacyverklaring ---- */
/* de kleur van de voettekst, met een streep eronder: zo is de link niet alleen aan de kleur te herkennen */
.fm-voet a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.fm-voet a:hover { color: var(--fm-wit); }

/* ---- het scrolteken van de homepage (Scrolteken.astro) ---- */
/* De vaste plek: onderaan in het midden van het beeld. fm-scrol-plek is een onzichtbaar vlak op die plek; daaraan meet
   het script of de tekst van het hoofdstuk er staat. Het script zet is-weg bij het laatste hoofdstuk, en zolang de
   tekst waar het teken achter staat aan het vervagen is. */
.fm-scrol, .fm-scrol-plek {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); margin-left: -22px;
  width: 44px; height: 56px;
}
.fm-scrol-plek { visibility: hidden; pointer-events: none; }
.fm-scrol {
  z-index: 2; display: flex; align-items: center; justify-content: center;
  color: var(--fm-wit); opacity: 1; transition: opacity .4s, visibility 0s;
  /* een dunne donkere rand en een bronzen gloed eromheen, zodat het teken naar voren komt (Ronald, 14 oktober 2026) */
  filter: drop-shadow(0 0 1px rgba(8, 6, 20, 0.9)) drop-shadow(0 0 7px rgba(223, 207, 181, 0.6));
}
.fm-scrol.is-weg { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility 0s .4s; }
/* Staat de tekst op de vaste plek, dan zet het script het teken achter een regel van die tekst (left en top in de stijl
   van het element). Het hangt dan aan de bovenkant van het beeld, net als de tekst, en de pijlpunten staan rechts in het vlak. */
.fm-scrol.is-bij-tekst { bottom: auto; margin-left: 0; justify-content: flex-end; }
.fm-scrol svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* met een muis: een muis waarvan het wieltje beweegt */
.fm-scrol-muis { width: 27px; height: 44px; }
.fm-scrol-wiel { animation: fm-scrol-wiel 1.8s ease-in-out infinite; }
/* op een aanraakscherm, en achter de tekst: twee pijlpunten die naar beneden wijzen */
.fm-scrol-pijl { display: none; width: 32px; height: 32px; animation: fm-scrol-pijl 1.8s ease-in-out infinite; }
.fm-scrol.is-bij-tekst .fm-scrol-muis { display: none; }
.fm-scrol.is-bij-tekst .fm-scrol-pijl { display: block; width: 22px; height: 22px; }
@media (hover: none), (pointer: coarse) {
  .fm-scrol-muis { display: none; }
  .fm-scrol-pijl { display: block; }
}
@keyframes fm-scrol-wiel {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  70%, 100% { transform: translateY(10px); opacity: 0; }
}
@keyframes fm-scrol-pijl {
  0%, 100% { transform: translateY(-3px); opacity: 0.8; }
  50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-scrol, .fm-scrol.is-weg { transition: none; }
  .fm-scrol-wiel, .fm-scrol-pijl { animation: none; }
}
/* na een klik op het scrolteken krijgt het hoofdstuk de focus; het is geen knop, dus zonder focusrand */
.fm-sectie[tabindex="-1"]:focus { outline: none; }

/* ---- het uitklapmenu onder Pakketten (Menu.astro; Ronald, 14 oktober 2026, toen onder Diensten) ----
   Naast "Pakketten" een knopje met een pijltje; het paneel hoort bij dat knopje (aria-expanded) en krijgt is-open op de li.
   Breed: een kaart onder de kop, over de breedte van de kop, met de pakketten naast elkaar, elk met een icoon van puntjes en
   een korte regel. De inleiding links ("Diensten", een zin en "Zo werken we") en de kaart voor Koffie rechts haalde Ronald op
   28 oktober 2026 weg. Smal (in het menupaneel): alleen de namen, onder Pakketten. Zonder script opent het brede paneel als je erover beweegt of er met Tab in komt. */
.fm-heeft-paneel { display: flex; align-items: center; }
.fm-paneelknop {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 24px; min-height: 24px;
  margin: 0 0 0 -8px; padding: 4px; appearance: none; border: 0; border-radius: 999px; background: none; color: var(--fm-gedempt); cursor: pointer;
}
.fm-paneelknop[hidden] { display: none; }
.fm-paneelknop:hover, .fm-paneelknop[aria-expanded="true"] { color: var(--fm-wit); }
.fm-paneelknop svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.fm-paneelknop[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Met script is "Pakketten" zelf de knop (Ronald, 28 oktober 2026: het gaat niet meer naar een eigen pagina): dezelfde letters
   als de andere pagina's in het menu, met het pijltje erachter. Wit als het paneel open is of als je op een pakket bent. */
:root .fm-menu .fm-paginas .fm-paneelknop-woord {
  gap: 6px; min-width: 0; min-height: 0; margin: 0; padding: 8px 12px 8px 14px; border-radius: 999px; color: var(--fm-gedempt);
  font: inherit; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
:root .fm-menu .fm-paginas .fm-paneelknop-woord:hover,
:root .fm-menu .fm-paginas .fm-paneelknop-woord[aria-expanded="true"],
:root .fm-menu .fm-paginas .fm-paneelknop-woord[aria-current] { color: var(--fm-wit); }
.fm-paneel { display: none; }
/* de links in het paneel zijn geen menulinks: geen hoofdletters, geen pil */
:root .fm-menu .fm-paginas .fm-paneel a { display: block; padding: 0; border-radius: 0; font-size: inherit; letter-spacing: 0; text-transform: none; white-space: normal; text-decoration: none; }
.fm-paneel-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; align-content: start; margin: 0; padding: 0; list-style: none; }
:root .fm-menu .fm-paginas .fm-paneel-lijst a {
  /* zonder icoon (Ronald, 12 november 2026: het menu zag er "heel AI achtig" uit door de icoontjes en de hoofdletters) */
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; align-items: start;
  padding: 0.75rem 0.85rem; border-radius: 14px; color: var(--fm-wit); transition: background-color .2s;
}
:root .fm-menu .fm-paginas .fm-paneel-lijst a:hover { background: rgba(243, 241, 247, 0.06); }
.fm-icoon { grid-row: span 2; width: 24px; height: 24px; margin-top: 2px; fill: #C9A673; }
.fm-paneel-naam { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.fm-paneel-groepkop { margin: 0 0 0.5rem; padding: 0 0.85rem; font-family: var(--fm-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: #DAC8AC; }
.fm-paneel-kort { font-size: 0.85rem; line-height: 1.35; color: var(--fm-zacht); }
@media (min-width: 900px) and (min-width: 56.25em) {
  /* in de rij: dezelfde ruimte als de links ernaast */
  :root .fm-menu .fm-paginas .fm-paneelknop-woord { padding: 6px 12px; }
  :root .fm-menu .fm-paneel {
    position: absolute; top: calc(100% + 4px); left: max(16px, 4vw); right: max(16px, 4vw); z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr); box-sizing: border-box; padding: 2rem;
    /* een iets lichtere, warme ondergrond, een duidelijker bronzen rand en een zachte bronzen gloed: op de zwarte hemel viel
       het paneel weg (Ronald, 28 oktober 2026; eerst rgba(17, 17, 17, 0.97) met een rand van 0.22) */
    border: 1px solid rgba(218, 200, 172, 0.38); border-radius: 24px;
    background: linear-gradient(180deg, rgba(42, 36, 29, 0.98), rgba(27, 24, 21, 0.98));
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.9), 0 18px 56px -26px rgba(177, 141, 93, 0.45);
    visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  /* een brug tussen de rij en het paneel, zodat het open blijft als je de muis ernaartoe beweegt */
  :root .fm-menu .fm-paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
  /* een dun lichtje langs de bovenrand, in licht brons */
  :root .fm-menu .fm-paneel::after {
    content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(218, 200, 172, 0), #DAC8AC 50%, rgba(218, 200, 172, 0));
  }
  /* twee kolommen, en vanaf 1200 pixels drie naast elkaar: er zijn nu zes diensten, Advies, Appcheck, Systeemcheck, AI
     Simulated Attacks, Awareness Program en AI Threat Detection (Ronald, 12 november 2026: "Zet er alleen de diensten in die we
     hebben besproken, de rest kan weg", met Advies vooraan en het Awareness Program erbij), dus twee rijen van drie, of drie
     rijen van twee. Komen er meer of minder, kijk dan of het nog mooi verdeelt (drie, drie en één staat scheef). */
  /* twee groepen naast elkaar (Ronald, 12 november 2026): Security voor AI en Security met AI, elk met een kleine kop en
     de diensten eronder */
  :root .fm-menu .fm-paneel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  :root .fm-menu .fm-paneel-lijst { grid-template-columns: minmax(0, 1fr); }
  :root .fm-menu .fm-heeft-paneel.is-open > .fm-paneel,
  :root:not(.fm-script) .fm-menu .fm-heeft-paneel:hover > .fm-paneel,
  :root:not(.fm-script) .fm-menu .fm-heeft-paneel:focus-within > .fm-paneel { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
}
@media not all and (min-width: 900px), not all and (min-width: 56.25em) {
  .fm-heeft-paneel { flex-wrap: wrap; }
  .fm-heeft-paneel > a { flex: 1 1 auto; }
  .fm-paneelknop { margin: 0 4px 0 0; min-width: 32px; min-height: 32px; }
  /* in het menupaneel: Pakketten over de hele regel, het pijltje rechts */
  :root .fm-menu .fm-paginas .fm-paneelknop-woord { flex: 1 1 auto; justify-content: space-between; margin: 0; min-height: 32px; padding: 8px 14px; }
  :root .fm-menu .fm-heeft-paneel.is-open > .fm-paneel { display: block; flex-basis: 100%; padding: 0 0 6px 10px; }
  .fm-paneel-kort, .fm-icoon { display: none; }
  .fm-paneel-groepkop { margin: 0.6rem 0 0.2rem; padding: 0 14px; font-size: 0.66rem; }
  .fm-paneel-lijst { display: block; }
  :root .fm-menu .fm-paginas .fm-paneel-lijst a { display: block; padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 400; color: var(--fm-zacht); }
  .fm-paneel-naam { font-size: inherit; font-weight: 400; }
}
@media (prefers-reduced-motion: reduce) {
  :root .fm-menu .fm-paneel, .fm-paneelknop svg { transition: none; }
}

/* ---- "Scroll verder" boven het scrolteken (Ronald, 14 oktober 2026) ----
   Alleen op de vaste plek; achter een regel tekst (op een telefoon) staan alleen de pijlpunten. De onzichtbare plek waaraan
   het script meet of de tekst er staat, is groot genoeg voor de woorden erbij. */
.fm-scrol-woord {
  position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--fm-wit);
}
.fm-scrol.is-bij-tekst .fm-scrol-woord { display: none; }
.fm-scrol-plek { width: 120px; height: 84px; margin-left: -60px; }

/* ---- "Lees meer" op scherm 2: een tweede knop, met alleen een rand (Ronald, 14 oktober 2026) ---- */
#fm-verhaal .fm-meer { margin: 0; }
#fm-verhaal .fm-meer a {
  display: inline-block; padding: 9px 18px; border: 1px solid rgba(218, 200, 172, 0.5); border-radius: 999px;
  color: #DAC8AC; font-weight: 500; font-size: 0.95rem; text-decoration: none; transition: background-color .2s, color .2s;
}
#fm-verhaal .fm-meer a:hover { background: rgba(177, 141, 93, 0.15); color: var(--fm-wit); }

/* ---- de bron onder de tekst van hoofdstuk 2 (Ronald, 12 november 2026: "Onderbouwen met bronnen"; hij koos een kleine regel
   onder de tekst; bij hoofdstuk 1 "hoeft nog geen bron", en "3 mag ook zonder bron"). Klein en rustig, vlak onder de tekst, met de naam van het rapport als link. Gedempt haalt in zwart
   ruim 5 op 1; de link is zacht. ---- */
#fm-verhaal .fm-blok p.fm-bron { margin: -10px 0 0; max-width: none; font-size: 0.78rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--fm-gedempt); }
#fm-verhaal .fm-bron a { color: var(--fm-zacht); text-decoration: underline; text-decoration-color: rgba(198, 203, 208, 0.35); text-underline-offset: 3px; }
#fm-verhaal .fm-bron a:hover { color: var(--fm-wit); text-decoration-color: currentColor; }

/* ---- het introscherm van de homepage (index.astro; Ronald, 14 oktober 2026) ----
   Het teken draait een derde slag in beeld en komt scherp, dan de naam; na 1,5 seconde vervaagt het scherm. Het script zet
   fm-intro op <html> en haalt het na 2,2 seconden weer weg. Zonder die klasse is er niets te zien. */
.fm-intro-scherm { display: none; }
:root.fm-intro .fm-intro-scherm {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  background: radial-gradient(circle at 50% 46%, #1E1B18 0%, #141414 55%, #101011 100%);
  animation: fm-intro-weg 0.6s ease-in 1.5s both;
}
.fm-intro-teken { width: clamp(88px, 13vw, 128px); height: auto; overflow: visible; margin-bottom: 0.6rem; animation: fm-intro-teken 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fm-intro-woord, .fm-intro-sub { display: block; text-align: center; }
.fm-intro-woord { padding-left: 0.32em; font-family: var(--fm-display); font-weight: 500; font-size: clamp(1rem, 2.2vw, 1.3rem); letter-spacing: 0.32em; color: var(--fm-wit); animation: fm-intro-woord 0.9s ease-out 0.35s both; }
.fm-intro-sub { padding-left: 0.18em; font-size: 0.72rem; letter-spacing: 0.18em; color: var(--fm-gedempt); animation: fm-intro-woord 0.9s ease-out 0.55s both; }
@keyframes fm-intro-teken {
  from { opacity: 0; transform: scale(0.8) rotate(-120deg); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0) drop-shadow(0 0 18px rgba(255, 225, 176, 0.6)); }
  to { opacity: 1; transform: none; filter: drop-shadow(0 0 10px rgba(177, 141, 93, 0.35)); }
}
@keyframes fm-intro-woord { from { opacity: 0; letter-spacing: 0.6em; } to { opacity: 1; } }
@keyframes fm-intro-weg { to { opacity: 0; visibility: hidden; } }

/* ---- de beloftes (Keurmerken.astro; Ronald, 20 oktober 2026 als keurmerken, sinds 9 november 2026 beloftes, sinds
   12 november 2026 twee: zonder de vaste prijs) ----
   Een rij: een icoon van puntjes in licht brons, met het woord ernaast en een klein woord eronder, en een dunne
   bronzen lijn tussen de beloftes. Op Aanpak, onder de knop (vervolg.css), en in de voet van de andere pagina's. Tot
   12 november 2026 stonden ze ook op het eerste scherm van de homepage (Ronald: "dit naar aanpak aub"); de regels voor
   #fm-verhaal hieronder doen daarom nu niets, maar staan er nog om ze terug te zetten. */
.fm-keurmerken { display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; margin: 0; padding: 0; list-style: none; }
.fm-keurmerk { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 18px; }
.fm-keurmerk:first-child { padding-left: 0; }
.fm-keurmerk:last-child { padding-right: 0; }
.fm-keurmerk + .fm-keurmerk::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px;
  background: linear-gradient(180deg, rgba(218, 200, 172, 0), rgba(218, 200, 172, 0.6), rgba(218, 200, 172, 0));
}
.fm-keurmerk-icoon { flex: none; width: 28px; height: 28px; fill: #DAC8AC; filter: drop-shadow(0 0 4px rgba(223, 207, 181, 0.4)); }
.fm-keurmerk-tekst { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.fm-keurmerk-kop { font-family: var(--fm-display); font-weight: 500; font-size: 0.88rem; line-height: 1.05; color: var(--fm-wit); }
.fm-keurmerk-sub { font-family: var(--fm-display); font-size: 0.68rem; line-height: 1; letter-spacing: 0.16em; color: #DAC8AC; }
/* Op de homepage staan ze op het eerste scherm, onder de knop (Ronald). Op een breed scherm wat verder eronder; op een
   telefoon is daar geen ruimte voor: het eerste scherm scrolt niet, dus alles moet binnen het beeld passen. Op een telefoon
   staat de tekst in het midden, de keurmerken ook. */
#fm-verhaal .fm-keurmerken { margin-top: 0; }
:root.fm-breed #fm-verhaal .fm-keurmerken { margin-top: 2.75rem; }
@media (min-height: 900px) {
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerken { margin-top: 1.25rem; }
}
:root.fm-podium:not(.fm-breed) #fm-verhaal .fm-keurmerken { justify-content: center; }
:root:not(.fm-breed) #fm-verhaal .fm-keurmerk { gap: 8px; padding: 0 12px; }
:root:not(.fm-breed) #fm-verhaal .fm-keurmerk:first-child { padding-left: 0; }
:root:not(.fm-breed) #fm-verhaal .fm-keurmerk:last-child { padding-right: 0; }
:root:not(.fm-breed) #fm-verhaal .fm-keurmerk-icoon { width: 24px; height: 24px; }
/* Op een telefoon (smaller dan 36rem) was de rij met iconen onder de knop te vol (Ronald, 20 oktober 2026: "te opgepropt").
   Daar staat één dunne regel in de stijl van het label boven de kop: ONAFHANKELIJK VAN BIG TECH · OPEN SOURCE (tot 12 november 2026 ook · VASTE PRIJS, tot 9 november 2026 AVG PROOF · EU HOSTING · EU AI ACT COMPLIANT), met wat
   ruimte erboven. De letters schalen mee met de breedte (min(0.62rem, 2.85vw)), zodat de regel ook op een smalle telefoon en
   met grotere letters in de browser op één regel blijft: anders liep hij over twee regels, met een los puntje vooraan. Het eerste scherm scrolt niet: onder 800 pixels hoog past dat niet ruim (gemeten: bij 360 x 780, 375 x 740
   en 360 x 640 komt de regel tegen of onder de rand), en staan ze alleen in de voet van de andere pagina's. */
@media not all and (min-width: 36rem) {
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerken { flex-wrap: nowrap; gap: 0; margin-top: 0.5rem; }
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerk,
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerk:first-child,
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerk:last-child { gap: 0; padding: 0; }
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerk + .fm-keurmerk::before {
    content: "·"; position: static; width: auto; margin: 0 0.6em; background: none; color: #DAC8AC; font-size: min(0.75rem, 3.4vw);
  }
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerk-icoon { display: none; }
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerk-tekst { flex-direction: row; align-items: baseline; gap: 0.4em; }
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerk-kop,
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerk-sub {
    font-family: var(--fm-display); font-weight: 500; font-size: min(0.62rem, 2.85vw); line-height: 1.2; letter-spacing: 0.14em; white-space: nowrap;
    text-transform: uppercase; color: var(--fm-gedempt);
  }
}
@media (max-height: 799px) {
  :root:not(.fm-breed) #fm-verhaal .fm-keurmerken { display: none; }
}
/* Zonder de brede indeling (telefoon, tablet) staat het scrolteken onderaan in het midden, en niet achter een regel tekst
   (Ronald, 28 oktober 2026: "die scrollbutton staat op een hele gekke plek", en hij koos "onderaan in het midden").
   Daarvoor is daar ruimte nodig: de keurmerken staan daar niet op de homepage (wel in de voet van de andere pagina's),
   en het teken is alleen de twee pijlpunten, zonder de woorden "Scroll verder", vlak boven de onderrand. Het vlak waaraan het
   script meet of de tekst er staat, is even klein: pas als de tekst er toch over valt (een heel lage telefoon), valt het
   script terug op de plek achter een regel tekst. */
:root:not(.fm-breed) #fm-verhaal .fm-keurmerken { display: none; }
:root:not(.fm-breed) .fm-scrol,
:root:not(.fm-breed) .fm-scrol-plek { bottom: calc(env(safe-area-inset-bottom, 0px) + 2px); width: 44px; height: 24px; margin-left: -22px; }
:root:not(.fm-breed) .fm-scrol-woord,
:root:not(.fm-breed) .fm-scrol-muis { display: none; }
:root:not(.fm-breed) .fm-scrol-pijl { display: block; width: 20px; height: 20px; }
/* In de voet op een telefoon liep de rij met iconen over twee regels, met een los streepje vooraan de tweede (Ronald,
   28 oktober 2026: "dit ziet er raar uit op de telefoon"). Daar staat dezelfde dunne regel als op de homepage, onder
   "Forevermore B.V. · Privacy". Met drie beloftes (van 9 tot 12 november 2026) was de regel langer: daarvoor zijn de letters
   kleiner (2,4vw) en staan ze dichter op elkaar (0,1em), zodat hij ook op 320 pixels op één regel past (gemeten). Met twee
   past hij ruim. */
@media not all and (min-width: 36rem) {
  .fm-voet .fm-keurmerken { flex-basis: 100%; flex-wrap: nowrap; gap: 0; }
  .fm-voet .fm-keurmerk,
  .fm-voet .fm-keurmerk:first-child,
  .fm-voet .fm-keurmerk:last-child { gap: 0; padding: 0; }
  .fm-voet .fm-keurmerk + .fm-keurmerk::before {
    content: "·"; position: static; width: auto; margin: 0 0.6em; background: none; color: #DAC8AC; font-size: min(0.75rem, 3.4vw);
  }
  .fm-voet .fm-keurmerk-icoon { display: none; }
  .fm-voet .fm-keurmerk-tekst { flex-direction: row; align-items: baseline; gap: 0.4em; }
  .fm-voet .fm-keurmerk-kop,
  .fm-voet .fm-keurmerk-sub {
    font-family: var(--fm-display); font-weight: 500; font-size: min(0.62rem, 2.4vw); line-height: 1.2; letter-spacing: 0.1em; white-space: nowrap;
    text-transform: uppercase; color: var(--fm-gedempt);
  }
}

/* ---- het donkere vlak achter de tekst, tussen telefoon en breed scherm (Ronald, 20 oktober 2026) ----
   Vanaf 36rem (en zolang het geen brede indeling is) is het tekstblok smaller dan het beeld. Het donkere vlak erachter
   (globaal.css, uit het prototype) kreeg daar harde zijkanten: een zwart tekstvak tegen de lichtere hemel. Hier loopt het
   vlak verder door en vervaagt het naar opzij. Op een telefoon loopt het tot de rand van het beeld en verandert er niets.
   Wat buiten het beeld valt, knipt de body af (overflow-x: clip). */
@media (min-width: 36rem) {
  :root:not(.fm-breed) .fm-blok::before {
    left: -24%; right: -24%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  }
}
/* Op een telefoon staat op het eerste scherm ook het vlak met Ronald, compact (Ronald, 12 november 2026: "Ik wil de foto, net
   zoals op de website, duidelijker in beeld hebben op de mobiele versie want dat maakt het persoonlijker"): een foto van 76
   pixels met zijn naam en de knop ernaast, zonder de zin, zodat het scherm blijft passen. De knop met de kleine foto staat
   alleen nog op een kleiner breed scherm. */
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-actie-smal { display: none; }
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst {
  display: grid; grid-template-areas: "foto naam" "foto acties"; gap: 6px 16px; margin: 0 auto; padding: 14px 20px 14px 14px; text-align: left;
}
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst .fm-ronald-foto { width: 76px; }
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-zin { display: none; }
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-acties { justify-content: flex-start; margin-top: 2px; align-self: start; }
/* de knop in dat compacte vlak iets kleiner (Ronald, 12 november 2026: "Iets minder groot de knop neem contact op") */
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst .fm-knop { padding: 5px 16px; font-size: 0.85rem; }
/* de naam en de knop breken niet af (Ronald, 12 november 2026: "Dit ziet er heel raar uit", op een smalle telefoon); op een
   smalle telefoon is de foto iets kleiner, zodat alles naast elkaar past */
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst .fm-knop { white-space: nowrap; }
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-naam { white-space: nowrap; font-size: 1.05rem; }
@media (max-width: 359px) {
  :root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst { gap: 6px 12px; padding: 12px 14px 12px 12px; }
  :root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst .fm-ronald-foto { width: 60px; }
  :root.fm-script:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-naam { font-size: 0.98rem; }
}

/* ---- de taalkeuze (Taalkeuze.astro; Ronald, 12 november 2026) ---- */
/* NL en EN naast het logo, in de kleine hoofdletters van het menu: de taal van de pagina in wit, de andere gedempt.
   Naast het logo: de vrije ruimte in de kop komt erachter (margin-right: auto), zodat het menu rechts blijft staan. */
.fm-taalkeuze { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--fm-gedempt); white-space: nowrap; }
:root .fm-kop .fm-taalkeuze a { display: inline-block; padding: 8px 5px; border-radius: 6px; color: var(--fm-gedempt); text-decoration: none; font-size: inherit; letter-spacing: inherit; text-transform: none; }
:root .fm-kop .fm-taalkeuze a:hover, :root .fm-kop .fm-taalkeuze a[aria-current] { color: var(--fm-wit); }
.fm-taalkeuze .fm-voorlezer { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fm-kop > .fm-taalkeuze { margin-right: auto; }
/* Op een smalle telefoon past de keuze niet naast het logo en de menuknop: daar staat ze onderaan in het menu. */
.fm-taal-in-menu { display: none; }
@media (max-width: 479.98px) {
  .fm-kop > .fm-taalkeuze { display: none; }
  .fm-taal-in-menu { display: block; margin-top: 4px; padding: 6px 9px 2px; border-top: 1px solid var(--fm-rand); }
}

/* ---- Ronald op het eerste scherm, rustiger (Ronald, 12 november 2026) ----
   "Alleen vind ik het blok met Ronald van Heerikhuize heel prominent aanwezig. Dat is goed maar het ziet er tegelijkertijd
   goedkoop uit." Het gevulde vlak met rand en gloed is weg: hij staat er nu open, als een handtekening. Een korte bronzen
   lijn erboven, de foto los in een dunne bronzen ring met een smalle rand lucht ertussen, en ernaast een klein label
   (Oprichter), zijn naam groter, de zin en de knop. Zo blijft hij groot in beeld, zonder de opsmuk van een vlak. Minder
   effecten tegelijk: één lijn, één ring, één knop. De regels voor het oude vlak staan hierboven nog (.fm-ronald); haal je dit
   blok weg, dan staat het vlak er weer. */
#fm-verhaal .fm-ronald-rol { display: none; }
:root.fm-breed #fm-verhaal .fm-ronald-eerst,
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst {
  position: relative; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
/* de foto: de ring is de rand van het plaatje zelf, met lucht ertussen (padding); zo blijft de hemel in de ring te zien */
:root #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-foto {
  box-sizing: border-box; padding: 5px; border: 1px solid rgba(218, 200, 172, 0.72); box-shadow: none;
}
#fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-rol {
  display: block; font-family: var(--fm-display); font-weight: 500; font-size: 0.7rem; line-height: 1.4; letter-spacing: 0.3em;
  text-transform: uppercase; color: #DAC8AC;
}
/* breed: de lijn linksboven, de foto links en de tekst ernaast */
:root.fm-breed #fm-verhaal .fm-ronald-eerst { margin-top: 40px; padding-top: 30px; gap: 0 30px; }
:root.fm-breed #fm-verhaal .fm-ronald-eerst::before {
  content: ""; position: absolute; left: 0; top: 0; width: 3.5rem; height: 2px;
  background: linear-gradient(90deg, #A37E54 0%, #DAC8AC 45%, #B08B5C 100%);
}
:root.fm-breed #fm-verhaal .fm-ronald-eerst .fm-ronald-foto { width: 128px; }
:root.fm-breed #fm-verhaal .fm-ronald-eerst .fm-ronald-tekst { gap: 4px; }
:root.fm-breed #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-naam { font-size: 1.6rem; line-height: 1.15; }
:root.fm-breed #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-zin { margin-top: 4px; }
:root.fm-breed #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-acties { margin-top: 14px; }
/* telefoon: de foto met het label, de naam en de knop ernaast, zonder de zin (het scherm moet blijven passen) */
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst { grid-template-areas: "foto rol" "foto naam" "foto acties"; gap: 2px 16px; }
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-rol { grid-area: rol; align-self: end; font-size: 0.62rem; }
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst .fm-ronald-foto { width: 88px; padding: 4px; }
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-naam { align-self: center; }
:root.fm-script:not(.fm-breed) #fm-verhaal .fm-blok .fm-ronald-eerst .fm-ronald-acties { margin-top: 4px; }
@media (max-width: 359px) {
  :root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst { gap: 2px 12px; padding: 0; }
  :root.fm-script:not(.fm-breed) #fm-verhaal .fm-ronald-eerst .fm-ronald-foto { width: 72px; }
}