/* Huisstijl "The Standard" (zie BRAND.md).
   Laadvolgorde in de stand "standaard": site-standaard.css, stijl-nieuw-standaard.css, dit bestand.
   Alle kleuren, letters en maten komen uit de tokens hieronder. Gebruik geen losse kleuren. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/montserrat-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --color-navy: #0B2740;
  --color-black: #0A0A0A;
  --color-white: #FFFFFF;
  --color-blue-grey: #6B7C93;
  --color-light-grey: #E9EDF2;
  /* Accent, door de opdrachtgever toegevoegd (optie A, 4 oktober 2026). Zie BRAND.md.
     Sky: lijnen, iconen en accenten; op navy ook tekst (6,2:1). Nooit tekst op wit (2,5:1).
     Mist: zachte achtergrond om iets uit te lichten; navy tekst erop (12,3:1). */
  --color-sky: #7FA9D1;
  --color-mist: #DCE8F4;

  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-light-grey);
  --color-bg-inverse: var(--color-navy);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-blue-grey);
  --color-text-inverse: var(--color-white);
  --color-border: var(--color-light-grey);
  --color-accent: var(--color-navy);

  /* Alleen voor meldingen in formulieren en het portaal (uitzondering, zie BRAND.md). */
  --color-status-fout: #B42318;
  --color-status-goed: #116B3A;

  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-eyebrow: .24em;
  --tracking-kopje: .15em;
  --tracking-woordmerk: .32em;
  --radius: 2px;
  --lijn: 1px solid var(--color-light-grey);
  --duur-fade: .6s;
}

/* De oude tokens wijzen naar het palet. */
.stijl-standaard {
  --color-primary: var(--color-navy);
  --color-accent-dark: var(--color-navy);
  --color-light-blue: var(--color-light-grey);
  --ns-navy: var(--color-navy);
  --ns-blauw: var(--color-navy);
  --ns-blauw-tekst: var(--color-navy);
  --ns-licht: var(--color-light-grey);
  --ns-lichtblauw: var(--color-light-grey);
  --ns-rand: var(--color-light-grey);
  --ns-tekst: var(--color-black);
  --ns-gedempt: var(--color-navy);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ─── Typografie ─────────────────────────────────────────────────────────── */
.stijl-standaard, .stijl-standaard button, .stijl-standaard input,
.stijl-standaard select, .stijl-standaard textarea { font-family: var(--font-sans); }

.stijl-standaard p, .stijl-standaard li { line-height: 1.65; }

.stijl-standaard h1, .stijl-standaard h2 {
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-black);
}
.stijl-standaard h1 strong, .stijl-standaard h2 strong { font-weight: 500; }
.stijl-standaard h3, .stijl-standaard h4 { font-weight: 600; color: var(--color-black); letter-spacing: 0; }
.stijl-standaard .bg-primary h1, .stijl-standaard .bg-primary h2,
.stijl-standaard .bg-primary h3, .stijl-standaard .std-inverse h1,
.stijl-standaard .std-inverse h2, .stijl-standaard .std-inverse h3 { color: var(--color-white); }

/* Sectielabel (eyebrow) */
.stijl-standaard .kicker, .stijl-standaard .ns-hero-kicker, .std-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-navy);
}
.std-inverse .std-eyebrow, .std-inverse .kicker { color: var(--color-light-grey); }

/* Klein kopje bij een feature */
.std-kopje {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-kopje);
  text-transform: uppercase;
  color: var(--color-navy);
}

/* Geen accentstreepje meer onder koppen: rust. */
.stijl-standaard .heading-rule::after { display: none; }

/* ─── Basisonderdelen ────────────────────────────────────────────────────── */
.stijl-standaard [class*="shadow"] { box-shadow: none !important; }
.stijl-standaard .rounded, .stijl-standaard .rounded-md, .stijl-standaard .rounded-lg,
.stijl-standaard .rounded-xl, .stijl-standaard .rounded-2xl,
.stijl-standaard input, .stijl-standaard select, .stijl-standaard textarea { border-radius: var(--radius); }
.stijl-standaard .rounded-full { border-radius: 9999px; }

.stijl-standaard a { text-underline-offset: .2em; }
.stijl-standaard :focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.stijl-standaard .bg-primary :focus-visible, .std-inverse :focus-visible { outline-color: var(--color-white); }

/* Knoppen: rechthoekig, Medium, zinsnaamval (één stijl voor de hele site). */
.std-knop, .stijl-standaard .ns-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.5rem;
  background: var(--color-navy); color: var(--color-white) !important;
  border: 1px solid var(--color-navy); border-radius: var(--radius);
  font: 500 1rem/1.2 var(--font-sans); letter-spacing: .01em;
  text-decoration: none !important; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.std-knop:hover, .stijl-standaard .ns-knop:hover { background: var(--color-black); border-color: var(--color-black); }
.std-knop-rand, .stijl-standaard .ns-knop-licht {
  background: transparent; color: var(--color-navy) !important; border-color: var(--color-navy);
}
.std-knop-rand:hover, .stijl-standaard .ns-knop-licht:hover { background: var(--color-light-grey); border-color: var(--color-navy); }
.std-inverse .std-knop { background: var(--color-white); color: var(--color-navy) !important; border-color: var(--color-white); }
.std-inverse .std-knop:hover { background: var(--color-light-grey); }
.std-inverse .std-knop-rand { background: transparent; color: var(--color-white) !important; border-color: var(--color-white); }
.std-inverse .std-knop-rand:hover { background: rgba(255,255,255,.08); }

/* Vlakken */
.std-sectie { padding-block: clamp(4rem, 8vw, 7.5rem); }
.std-subtiel { background: var(--color-bg-subtle); }
.std-inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.std-lijn-boven { border-top: var(--lijn); }
.std-lijn-links { border-left: var(--lijn); }

/* Iconen: dunne lijn */
.std-icoon { width: 1.5rem; height: 1.5rem; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Woordmerk in tekst */
.std-woordmerk { font-weight: 500; letter-spacing: var(--tracking-woordmerk); text-transform: uppercase; }

/* Rustige fade bij het in beeld komen (zie site.js). Zonder JavaScript of met
   "minder beweging" staat alles direct zichtbaar. */
.js .std-fade { opacity: 0; transform: translateY(8px); transition: opacity var(--duur-fade) ease-out, transform var(--duur-fade) ease-out; }
.js .std-fade.is-zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .std-fade { opacity: 1; transform: none; transition: none; }
}

/* ─── Homepage (app/components/homepageStandaard.php) ────────────────────── */
.hs-wrap { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 40rem) { .hs-wrap { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .hs-wrap { padding-inline: 2rem; } }

.hs-sectie { padding-block: clamp(4rem, 8vw, 7rem); }
.hs-h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 300; line-height: 1.18; margin: .9rem 0 0; max-width: 24ch; color: var(--color-black); }
.std-inverse .hs-h2 { color: var(--color-white); }
.hs-intro { font-size: 1.125rem; line-height: 1.65; color: var(--color-navy); max-width: 44rem; margin-top: 1.25rem; }
.std-inverse .hs-intro { color: var(--color-light-grey); }
.hs-onder { margin-top: 2.5rem; }

.hs-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem; font-weight: 500; color: var(--color-navy); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.hs-link:hover { color: var(--color-black); }
.hs-link-pijl { width: 1rem; height: 1rem; transition: transform .2s; }
.hs-link:hover .hs-link-pijl, a:hover > .hs-meer .hs-link-pijl, .hs-taak:hover .hs-link-pijl { transform: translateX(3px); }
.hs-links { display: flex; flex-wrap: wrap; gap: 0 2rem; }

/* Kop: de bestaande heroGebouw, rustiger gemaakt */
.stijl-standaard .hg { background: var(--color-white); border-bottom: 0; }
.stijl-standaard .hg h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; }
.stijl-standaard .hg-kicker { font-size: .75rem; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-navy); }
.stijl-standaard .hg-intro { color: var(--color-navy); }
.stijl-standaard .hg-feiten svg { color: var(--color-navy); }
.stijl-standaard .hf-foto img { filter: grayscale(1) contrast(1.05); }
.stijl-standaard .hf-zoek { border-top: 2px solid var(--color-navy); }

/* Kernwaarden */
.hs-waarden-sectie { border-top: var(--lijn); }
.hs-waarden { display: grid; list-style: none; margin: 0; padding: 0; }
.hs-waarden li { display: flex; gap: 1.1rem; padding: 2rem 0; border-bottom: var(--lijn); color: var(--color-navy); }
.hs-waarden li:last-child { border-bottom: 0; }
.hs-waarden .std-icoon { width: 2rem; height: 2rem; margin-top: .1rem; color: var(--color-black); }
.hs-waarden p { margin: 0; }
.hs-waarden p + p { margin-top: .4rem; font-size: .95rem; line-height: 1.6; }
@media (min-width: 48rem) {
  .hs-waarden { grid-template-columns: repeat(3, 1fr); }
  .hs-waarden li { padding: 2.5rem 2rem; border-bottom: 0; border-left: var(--lijn); }
  .hs-waarden li:first-child { border-left: 0; padding-left: 0; }
}

/* Toptaken */
.hs-taken { display: grid; }
.hs-taak { display: block; text-align: left; padding: 1.6rem 0; border-bottom: 1px solid rgba(233,237,242,.18); color: var(--color-white); text-decoration: none; background: none; cursor: pointer; font: inherit; }
.hs-taak strong { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: 1.05rem; }
.hs-taak span { display: block; margin-top: .35rem; color: var(--color-light-grey); font-size: .925rem; line-height: 1.55; }
.hs-taak:hover strong { text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 48rem) { .hs-taken { grid-template-columns: repeat(2, 1fr); } .hs-taak { padding: 1.8rem 1.75rem; border-left: 1px solid rgba(233,237,242,.18); } }
@media (min-width: 64rem) { .hs-taken { grid-template-columns: repeat(4, 1fr); } .hs-taak { border-bottom: 0; } .hs-taak:first-child { border-left: 0; padding-left: 0; } }

/* Het gebouw */
.hs-meet { display: grid; gap: 3rem; margin-top: 3rem; align-items: start; }
@media (min-width: 64rem) { .hs-meet { grid-template-columns: 1.1fr 1fr; gap: 4.5rem; } .hs-meet-beeld { position: sticky; top: 7rem; } }
.hs-gebouw { width: 100%; height: auto; display: block; overflow: visible; }
.hs-gebouw .hs-lijn, .hs-gebouw .hs-vlak, .hs-gebouw .hs-reserve, .hs-gebouw .hs-put { fill: none; stroke: var(--color-navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hs-gebouw .hs-dun { stroke-width: 1.1; }
.hs-gebouw .hs-vloer { stroke: var(--color-blue-grey); stroke-width: 1; }
.hs-gebouw .hs-maaiveld { stroke: var(--color-black); }
.hs-gebouw .hs-kelder { fill: var(--color-light-grey); stroke: var(--color-blue-grey); stroke-width: 1; stroke-dasharray: 4 4; }
.hs-gebouw .hs-raam { fill: none; stroke: var(--color-blue-grey); stroke-width: .9; }
.hs-gebouw .hs-vlak { fill: var(--color-light-grey); }
.hs-gebouw .hs-wit { fill: var(--color-white); }
.hs-gebouw .hs-put { fill: var(--color-white); stroke-width: 1.2; }
.hs-gebouw .hs-punt { fill: var(--color-navy); }
.hs-gebouw .hs-vezel { stroke-width: 2.25; }
.hs-gebouw .hs-meetlat { stroke: var(--color-blue-grey); stroke-dasharray: 2 5; stroke-width: 1; }
.hs-gebouw .hs-reserve { stroke: var(--color-blue-grey); stroke-dasharray: 5 5; stroke-width: 1.25; }
.hs-gebouw .hs-stroom { fill: none; stroke: var(--color-white); stroke-width: 1.2; stroke-dasharray: 3 21; opacity: 0; }
.hs-gebouw .hs-g { transition: opacity .45s ease; }
.hs-gebouw.heeft-keuze .hs-g { opacity: .16; }
.hs-gebouw.heeft-keuze .hs-g.is-actief { opacity: 1; }
.hs-gebouw.heeft-keuze .hs-g.is-actief .hs-lijn, .hs-gebouw.heeft-keuze .hs-g.is-actief .hs-vlak { stroke-width: 2.25; }
.hs-hotspot { cursor: pointer; outline: none; }
.hs-hotspot circle { fill: var(--color-white); stroke: var(--color-navy); stroke-width: 1.5; transition: fill .25s; }
.hs-hotspot text { font: 600 13px var(--font-sans); fill: var(--color-navy); pointer-events: none; transition: fill .25s; }
.hs-hotspot:hover circle, .hs-hotspot.is-actief circle, .hs-hotspot:focus-visible circle { fill: var(--color-navy); }
.hs-hotspot:hover text, .hs-hotspot.is-actief text, .hs-hotspot:focus-visible text { fill: var(--color-white); }
.hs-hotspot:focus-visible circle { stroke: var(--color-black); stroke-width: 3; }

/* Optekenen bij in beeld komen, daarna een rustige stroom door de glasvezel */
.js .hs-gebouw .hs-lijn { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1), stroke-width .3s; }
.js .hs-gebouw.is-zichtbaar .hs-lijn { stroke-dashoffset: 0; }
.js .hs-gebouw .hs-raam, .js .hs-gebouw .hs-vlak, .js .hs-gebouw .hs-reserve, .js .hs-gebouw .hs-put, .js .hs-gebouw .hs-punt, .js .hs-gebouw .hs-kelder, .js .hs-gebouw .hs-hotspot { opacity: 0; transition: opacity .8s ease 1s; }
.js .hs-gebouw.is-zichtbaar .hs-raam, .js .hs-gebouw.is-zichtbaar .hs-vlak, .js .hs-gebouw.is-zichtbaar .hs-reserve, .js .hs-gebouw.is-zichtbaar .hs-put, .js .hs-gebouw.is-zichtbaar .hs-punt, .js .hs-gebouw.is-zichtbaar .hs-kelder, .js .hs-gebouw.is-zichtbaar .hs-hotspot { opacity: 1; }
.js .hs-gebouw.is-zichtbaar .hs-hotspot { transition-delay: 1.6s; }
@keyframes hs-stroom { to { stroke-dashoffset: -96; } }
.js .hs-gebouw.is-zichtbaar .hs-stroom { opacity: .9; transition: opacity .8s ease 2s; animation: hs-stroom 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .js .hs-gebouw .hs-lijn { stroke-dasharray: none; transition: none; }
  .js .hs-gebouw * { transition: none !important; animation: none !important; }
}

/* De lijst met gebieden */
.hs-gebieden { list-style: none; margin: 0; padding: 0; border-top: var(--lijn); }
.hs-gebied { display: grid; grid-template-columns: 2rem 1fr 1.5rem; gap: 1rem; width: 100%; text-align: left; padding: 1.25rem .75rem 1.25rem 0; border: 0; border-bottom: var(--lijn); background: none; font: inherit; color: inherit; cursor: pointer; transition: background-color .25s; }
.hs-gebied:hover, .hs-gebied.is-actief { background: var(--color-light-grey); }
.hs-gebied-nr { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-left: .25rem; border: 1px solid var(--color-navy); border-radius: 50%; font-size: .8rem; font-weight: 600; color: var(--color-navy); transition: background-color .25s, color .25s; }
.hs-gebied.is-actief .hs-gebied-nr { background: var(--color-navy); color: var(--color-white); }
.hs-gebied-uitleg { display: block; margin-top: .35rem; font-size: .95rem; line-height: 1.6; color: var(--color-navy); }
.hs-gebied-icoon { color: var(--color-blue-grey); margin-top: .1rem; }

/* De staffel */
.hs-js-tip { display: none; }
.js .hs-js-tip { display: inline; }
.hs-staffel { display: grid; gap: 2.5rem; margin-top: 3rem; align-items: start; }
@media (min-width: 64rem) { .hs-staffel { grid-template-columns: 1.15fr 1fr; gap: 4.5rem; } }
.hs-staffel-balken { display: grid; gap: .5rem; background: var(--color-white); padding: 1.5rem; border: var(--lijn); }
@media (min-width: 40rem) { .hs-staffel-balken { padding: 2rem 2.25rem; } }
.hs-balk { position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 2.9rem; padding: 0 3.6rem 0 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.hs-balk-vlak { display: flex; align-items: center; gap: .9rem; flex: none; width: var(--lengte); min-width: 5.5rem; height: 2.9rem; padding: 0 1.75rem 0 1rem; background: var(--color-navy); color: var(--color-white); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); transition: width .9s cubic-bezier(.4,0,.2,1); }
.hs-balk-vlak b { font-weight: 700; font-size: .95rem; letter-spacing: .04em; }
.hs-balk-vlak span, .hs-balk-naam { font-size: .7rem; font-weight: 600; letter-spacing: var(--tracking-kopje); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-balk-naam { color: var(--color-navy); }
.hs-balk-wijzer { position: absolute; right: 0; top: 0; bottom: 0; width: 3.1rem; display: grid; place-items: center; padding-left: .6rem; background: var(--color-black); color: var(--color-white); font-size: .75rem; font-weight: 700; clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); opacity: 0; transition: opacity .3s; }
.hs-balk.is-actief .hs-balk-wijzer { opacity: 1; }
.hs-balk:hover .hs-balk-vlak { background: var(--color-black); }
.hs-balk:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 3px; }
.js .std-fade:not(.is-zichtbaar) .hs-balk-vlak { width: 5.5rem; }
.hs-staffel-detail { min-height: 18rem; }
.hs-niveau { padding-block: 1.75rem; border-top: var(--lijn); }
.hs-niveau:first-child { border-top: 0; padding-top: 0; }
.js .hs-niveau { display: none; border-top: 0; padding-top: 0; }
.js .hs-niveau.is-actief { display: block; animation: hs-fade .45s ease-out; }
@keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } }
.hs-niveau-code { font-size: clamp(3.5rem, 7vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--color-black); margin: 0 0 .9rem; }
.hs-niveau-punten { margin-top: .5rem; color: var(--color-navy); font-size: .95rem; }
.hs-niveau-kern { margin-top: 1.5rem; font-size: 1.2rem; font-weight: 500; color: var(--color-black); line-height: 1.45; }
.hs-niveau-uitleg { margin-top: .75rem; color: var(--color-navy); }
@media (prefers-reduced-motion: reduce) { .hs-balk-vlak { transition: none; } .js .hs-niveau.is-actief { animation: none; } }

/* Kolommen met dunne scheidingslijnen (voor wie, services) */
.hs-kolommen { display: grid; margin-top: 3rem; border-top: var(--lijn); }
.hs-kolom { display: flex; flex-direction: column; padding: 2.25rem 0; border-bottom: var(--lijn); color: inherit; text-decoration: none; }
.hs-kolom > .std-icoon { width: 2rem; height: 2rem; color: var(--color-black); margin-bottom: 1.5rem; }
.hs-kolom h3 { margin: .75rem 0 0; font-size: 1.3rem; font-weight: 400; line-height: 1.35; }
.hs-kolom p { margin: .75rem 0 0; color: var(--color-navy); font-size: .975rem; }
.hs-meer { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.5rem; font-weight: 500; color: var(--color-navy); }
.hs-kolom:hover h3 { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.hs-nr { font-size: .8rem; font-weight: 600; letter-spacing: var(--tracking-kopje); color: var(--color-blue-grey); }
@media (min-width: 48rem) {
  .hs-kolommen { grid-template-columns: repeat(3, 1fr); border-bottom: 0; }
  .hs-kolom { padding: 2.5rem 2rem; border-bottom: 0; border-left: var(--lijn); }
  .hs-kolom:first-child { border-left: 0; padding-left: 0; }
}

/* Type vastgoed */
.hs-panden { display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 40rem) { .hs-panden { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .hs-panden { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.hs-pand { display: block; color: inherit; text-decoration: none; }
.hs-pand-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-light-grey); }
.hs-pand-foto img { filter: grayscale(1) contrast(1.05); transition: transform .8s ease; }
.hs-pand:hover .hs-pand-foto img { transform: scale(1.03); }
.hs-pand h3 { margin: 1.1rem 0 0; font-size: 1.1rem; font-weight: 500; }
.hs-pand p { margin: .4rem 0 0; color: var(--color-navy); font-size: .95rem; }

/* Hoe het werkt */
.hs-stappen { display: grid; gap: 0; margin: 3rem 0 0; padding: 0; list-style: none; counter-reset: stap; }
.hs-stappen li { padding: 2rem 0; border-top: 1px solid var(--color-navy); }
.hs-stappen h3 { margin: .75rem 0 0; font-size: 1.2rem; font-weight: 500; }
.hs-stappen p { margin: .6rem 0 0; color: var(--color-navy); font-size: .975rem; }
@media (min-width: 48rem) { .hs-stappen { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }
@media (min-width: 64rem) { .hs-stappen { grid-template-columns: repeat(4, 1fr); } }

/* Partner worden */
.hs-partner-grid { display: grid; gap: 3rem; }
@media (min-width: 64rem) { .hs-partner-grid { grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: center; } }
.hs-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hs-noot { margin-top: 1rem; font-size: .9rem; color: var(--color-light-grey); }
.hs-punten { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(233,237,242,.2); }
.hs-punten li { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(233,237,242,.2); color: var(--color-light-grey); line-height: 1.6; }
.hs-punten strong { color: var(--color-white); font-weight: 600; }
.hs-punten .std-icoon { color: var(--color-white); margin-top: .1rem; }
.hs-punten a { color: var(--color-white) !important; }

/* Organisatie */
.hs-twee { display: grid; gap: 3rem; margin-top: 1rem; }
@media (min-width: 64rem) { .hs-twee { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.hs-leden { list-style: none; margin: 0; padding: 0; border-top: var(--lijn); }
.hs-leden li { display: flex; flex-direction: column; padding: 1rem 0; border-bottom: var(--lijn); }
.hs-leden strong { font-weight: 500; }
.hs-leden span { color: var(--color-navy); font-size: .925rem; }
@media (max-width: 39.99rem) {
  /* Smal scherm: in de balk alleen de code, de naam staat in de uitleg eronder. */
  .hs-balk-vlak span { display: none; }
}

/* ─── Aanmeldformulier partners (app/components/partnerAanmelding.php) ──── */
.pa-anker { scroll-margin-top: 7rem; }
.pa-intro { margin: 0 0 2rem; color: var(--color-navy); max-width: 40rem; }
.pa-raster { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .pa-raster { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .pa-breed { grid-column: 1 / -1; } }
.pa-veld label { display: block; margin-bottom: .45rem; font-size: .875rem; font-weight: 500; color: var(--color-black); }
.pa-optioneel { font-weight: 400; color: var(--color-navy); }
.pa-hint { margin: -.2rem 0 .5rem; font-size: .85rem; color: var(--color-navy); }
.pa-veld input, .pa-veld textarea { width: 100%; padding: .8rem .95rem; border: 1px solid var(--color-blue-grey); border-radius: var(--radius); background: var(--color-white); font: 400 1rem/1.4 var(--font-sans); color: var(--color-black); }
.pa-veld textarea { resize: vertical; min-height: 7rem; }
.pa-veld input:focus, .pa-veld textarea:focus { outline: 2px solid var(--color-navy); outline-offset: 0; border-color: var(--color-navy); }
.pa-privacy { margin: 1.5rem 0; font-size: .875rem; color: var(--color-navy); }
.pa-privacy a { color: var(--color-navy) !important; text-decoration: underline; }
.pa-fout { margin-top: 1rem; color: var(--color-status-fout); font-size: .9rem; }
.pa-fout span { display: block; margin-top: .25rem; font-size: .8rem; }
.pa-succes { padding: 2.5rem; border: 1px solid var(--color-navy); background: var(--color-white); }
.pa-succes .std-icoon { width: 2.25rem; height: 2.25rem; color: var(--color-navy); }
.pa-succes-kop { margin: 1rem 0 .4rem; font-size: 1.35rem; font-weight: 400; color: var(--color-black); }
.pa-succes p:last-child { color: var(--color-navy); }

/* ─── Logo (app/lib/logo.php) ────────────────────────────────────────────── */
/* Vrije ruimte rond het logo: minimaal de hoogte van de "I" uit het woordmerk (--logo-vrij). */
.std-logo { --logo-maat: 3rem; --logo-vrij: calc(var(--logo-maat) * .3); display: inline-flex; align-items: center; gap: calc(var(--logo-maat) * .3); color: var(--color-black); line-height: 1; text-decoration: none; }
.std-logo-donker { color: var(--color-white); }
.std-logo-symbool { width: var(--logo-maat); height: var(--logo-maat); flex: none; display: block; }
.std-logo-tekst { display: flex; flex-direction: column; gap: calc(var(--logo-maat) * .12); }
.std-logo-woord { font-family: var(--font-sans); font-weight: 600; font-size: calc(var(--logo-maat) * .4); letter-spacing: var(--tracking-woordmerk); margin-right: calc(-1 * var(--tracking-woordmerk)); white-space: nowrap; }
.std-logo-tagline { font-family: var(--font-sans); font-weight: 500; font-size: calc(var(--logo-maat) * .165); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.std-logo-gestapeld { flex-direction: column; text-align: center; }
.std-logo-gestapeld .std-logo-tekst { align-items: center; }
.std-logo-kop { --logo-maat: 3.1rem; }
.std-logo-voet { --logo-maat: 3.5rem; }
@media (max-width: 26rem) { .std-logo-kop .std-logo-tagline { display: none; } }

/* Kop: menu op één regel; de tagline van het logo alleen als er ruimte is. */
.stijl-standaard header nav [data-dropdown-knop], .stijl-standaard header [data-aanvraag-open] { white-space: nowrap; }
.stijl-standaard header nav [data-dropdown-knop] { padding-inline: .6rem; }
@media (max-width: 89.99rem) { .stijl-standaard header .std-logo-tagline { display: none; } }
@media (max-width: 40rem) {
  .stijl-standaard header .std-logo { --logo-maat: 32px !important; --tracking-woordmerk: .2em; }
}

/* ─── Lijntekeningen (app/lib/visuals.php) ───────────────────────────────── */
.std-visual { display: block; width: 100%; height: auto; background: var(--color-light-grey); }
.std-visual .v-lijn { fill: none; stroke: var(--color-navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.std-visual .v-dun { stroke-width: 1; }
.std-visual .v-grijs { stroke: var(--color-blue-grey); }
.std-visual .v-grond { stroke: var(--color-black); }
.std-visual .v-vezel { stroke-width: 2.25; }
.std-visual .v-stippel { stroke-dasharray: 3 6; }
.std-visual .v-vlak { fill: var(--color-light-grey); stroke: var(--color-navy); stroke-width: 1.5; }
.std-visual .v-wit { fill: var(--color-white); }
.std-visual .v-stip { fill: var(--color-navy); }
.std-visual .v-balk { fill: var(--color-navy); }
.std-visual .v-wijzer { fill: var(--color-black); }
.std-visual .v-stroom { fill: none; stroke: var(--color-white); stroke-width: 1.2; stroke-dasharray: 3 21; opacity: 0; }
.js .std-visual .v-lijn:not(.v-stippel) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1); }
.js .std-visual.is-zichtbaar .v-lijn:not(.v-stippel) { stroke-dashoffset: 0; }
.js .std-visual .v-vlak, .js .std-visual .v-stip, .js .std-visual .v-balk, .js .std-visual .v-stippel { opacity: 0; transition: opacity .8s ease 1s; }
.js .std-visual.is-zichtbaar .v-vlak, .js .std-visual.is-zichtbaar .v-stip, .js .std-visual.is-zichtbaar .v-balk, .js .std-visual.is-zichtbaar .v-stippel { opacity: 1; }
.js .std-visual.is-zichtbaar .v-stroom { opacity: .9; transition: opacity .8s ease 2s; animation: hs-stroom 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .js .std-visual .v-lijn { stroke-dasharray: none; transition: none; }
  .js .std-visual * { transition: none !important; animation: none !important; }
  .std-visual .v-stippel { stroke-dasharray: 3 6 !important; }
}

/* Visual in plaats van een foto */
.stijl-standaard .hf-foto { background: var(--color-light-grey); }
.stijl-standaard .hf-foto .std-visual { height: 100%; }
.stijl-standaard .ns-hero-foto .std-visual { position: absolute; inset: 0; height: 100%; }
.hs-pand-foto .std-visual { position: absolute; inset: 0; height: 100%; }
/* Homepagekop: de tekening in het bovenste deel, het zoekvak valt over het onderste deel. */
.stijl-standaard .hf-foto .std-visual { height: 74%; }
@media (max-width: 63.99rem) { .stijl-standaard .hf-foto .std-visual { height: 100%; } }
/* Op een lichtgrijs vlak krijgt een tekening een witte ondergrond. */
.std-subtiel .std-visual { background: var(--color-white); }

/* ─── Accent: IT Sky en IT Mist (optie A) ────────────────────────────────── */
.stijl-standaard ::selection { background: var(--color-mist); color: var(--color-navy); }

/* 1. De infrastructuur licht op: glasvezel in Sky, datastroom in navy */
.hs-gebouw .hs-vezel, .std-visual .v-vezel { stroke: var(--color-sky); }
.hs-gebouw .hs-stroom, .std-visual .v-stroom { stroke: var(--color-navy); }
.hs-hotspot:hover circle { stroke: var(--color-sky); }
.hs-gebouw.heeft-keuze .hs-g.is-actief .hs-vezel { stroke: var(--color-sky); }

/* 2. De staffel: gekozen niveau op Mist met een blauwe wijzer */
.hs-balk { transition: background-color .3s; }
.hs-balk.is-actief { background: var(--color-mist); }
.hs-balk-wijzer { background: var(--color-sky); color: var(--color-navy); }

/* 3. Navy vlakken: labels, vinkjes en iconen in Sky */
.std-inverse .std-eyebrow, .std-inverse .kicker { color: var(--color-sky); }
.hs-punten .std-icoon, .hs-taak .hs-link-pijl { color: var(--color-sky); }
.stijl-standaard footer h3 { color: var(--color-sky); }

/* 4. Aanwijzen en kiezen: Mist in plaats van grijs */
.hs-gebied:hover, .hs-gebied.is-actief { background: var(--color-mist); }
.stijl-standaard [data-dropdown-menu] a:hover { background: var(--color-mist); color: var(--color-navy); }
.stijl-standaard [data-dropdown-menu] { border-top-color: var(--color-sky) !important; }

/* 5. Uitgelichte blokken: Mist-vlak met een dunne Sky-lijn links */
.stijl-standaard .std-callout { background: var(--color-mist) !important; border-left: 3px solid var(--color-sky) !important; }
.stijl-standaard .std-callout h3 { color: var(--color-navy); }
.stijl-standaard .std-callout p { color: var(--color-navy); }
.std-visual .v-wijzer { fill: var(--color-sky); }
/* Lijntekening die een vak vult (in plaats van een stockfoto, zie img_fill()). */
.std-visual-vul { position: absolute; inset: 0; display: block; }
.std-visual-vul .std-visual { width: 100%; height: 100%; }

/* Contrast (WCAG AA): kleine grijze tekst wordt navy. Blue Grey op wit haalt 4,3:1 en is
   alleen voor lijnen, iconen en tekst vanaf 18px (zie BRAND.md). */
.stijl-standaard .text-gray-400, .stijl-standaard .text-gray-500, .stijl-standaard .text-gray-600,
.stijl-standaard .text-slate-400, .stijl-standaard .text-slate-500 { color: var(--color-navy); }
.hs-nr { color: var(--color-navy); }

/* Homepage: Voor wie in vijf groepen */
.hs-wie { display: grid; gap: 0; margin-top: 3rem; border-top: var(--lijn); }
.hs-wie-groep { padding: 2rem 0; border-bottom: var(--lijn); }
.hs-wie-groep ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.hs-wie-groep a { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; color: var(--color-black); text-decoration: none; font-weight: 500; line-height: 1.35; }
.hs-wie-groep a .std-icoon { width: 1.35rem; height: 1.35rem; color: var(--color-navy); }
.hs-wie-groep a .hs-link-pijl { margin-left: auto; width: 1rem; height: 1rem; opacity: 0; transition: opacity .2s, transform .2s; }
.hs-wie-groep a:hover { color: var(--color-navy); }
.hs-wie-groep a:hover span { text-decoration: underline; text-underline-offset: .2em; }
.hs-wie-groep a:hover .hs-link-pijl { opacity: 1; transform: translateX(3px); }
@media (min-width: 40rem) { .hs-wie { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }
@media (min-width: 64rem) {
  .hs-wie { grid-template-columns: repeat(5, 1fr); column-gap: 0; border-bottom: var(--lijn); }
  .hs-wie-groep { padding: 2rem 1.5rem; border-bottom: 0; border-left: var(--lijn); }
  .hs-wie-groep:first-child { border-left: 0; padding-left: 0; }
}

/* Overzichtspagina Voor wie: groepslabels */
.stijl-standaard .vw-groep .kicker { margin-bottom: 1.25rem; }

/* ─── Het verhaal: film (app/components/filmStandaard.php) ───────────────── */
.hs-film-sectie { padding-bottom: clamp(3rem, 6vw, 5rem); }
.fs { margin-top: 2.5rem; }
.fs-buhne { display: grid; background: var(--color-light-grey); border: var(--lijn); }
.fs-scene { display: grid; gap: 1.5rem; align-items: center; padding: 2rem 1.5rem; }
@media (min-width: 64rem) { .fs-scene { grid-template-columns: 5fr 7fr; gap: 3rem; padding: 3.5rem 3.5rem; min-height: 27rem; } }
.fs-kop { margin: .9rem 0 0; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; line-height: 1.2; color: var(--color-black); }
.fs-onder { margin: 1rem 0 0; font-size: 1.05rem; color: var(--color-navy); line-height: 1.6; }
.fs-beeld .fs-art { width: 100%; height: auto; max-height: 22rem; background: transparent; }
.fs-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.fs-rij li { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.5rem 1.25rem; background: var(--color-white); border: var(--lijn); }
.fs-rij .std-icoon { width: 2.25rem; height: 2.25rem; color: var(--color-navy); }
.fs-tegels li > span:last-child { font-weight: 500; font-size: 1.05rem; color: var(--color-black); }
.fs-gebouwen { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .fs-gebouwen { grid-template-columns: repeat(4, 1fr); } }
.fs-gebouwen li { padding: 0; gap: 0; }
.fs-gebouwen .std-visual { background: var(--color-white); }
.fs-gebouwen li > span { padding: .75rem 1rem; font-weight: 500; font-size: .95rem; }
.fs-partner { width: 100%; max-width: 26rem; height: auto; display: block; margin-inline: auto; }
.fs-vraag { font: 300 190px var(--font-sans); fill: var(--color-sky); }
.fs-sky { fill: var(--color-sky); }
.fs-slot { grid-template-columns: 1fr !important; text-align: center; }
.fs-slot-binnen { display: flex; flex-direction: column; align-items: center; }
.fs-slot .fs-kop { margin-top: 1.5rem; }
.fs-slot .hs-knoppen { justify-content: center; }

/* Bediening */
.fs-bediening { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.fs-knop { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border: 1px solid var(--color-navy); border-radius: var(--radius); background: var(--color-white); color: var(--color-navy); cursor: pointer; }
.fs-knop:hover { background: var(--color-mist); }
.fs-knop .std-icoon { width: 1.15rem; height: 1.15rem; }
.fs-speel { background: var(--color-navy); color: var(--color-white); }
.fs-speel:hover { background: var(--color-black); }
.fs-speel .fs-i-af { fill: currentColor; stroke: none; }
.fs-speel .fs-i-pauze { display: none; }
.fs.is-spelend .fs-speel .fs-i-pauze { display: block; }
.fs.is-spelend .fs-speel .fs-i-af { display: none; }
.fs-stappen { display: flex; flex: 1; gap: 4px; list-style: none; margin: 0 .5rem; padding: 0; }
.fs-stappen li { flex: 1; }
.fs-stap { display: block; width: 100%; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.fs-stap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--color-light-grey); }
.fs-vul { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 0; background: var(--color-navy); }
.fs-stap.is-klaar .fs-vul { width: 100%; }
.fs-stap.is-actief .fs-vul { width: 100%; background: var(--color-sky); }
.fs.is-spelend .fs-stap.is-actief .fs-vul, .fs.is-gepauzeerd .fs-stap.is-actief .fs-vul { animation: fs-vul var(--duur) linear forwards; }
.fs.is-gepauzeerd .fs-stap.is-actief .fs-vul { animation-play-state: paused; }
@keyframes fs-vul { from { width: 0; } to { width: 100%; } }
.fs-stap:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.fs-teller { min-width: 4.5rem; text-align: right; font-size: .85rem; font-weight: 600; letter-spacing: .08em; color: var(--color-navy); font-variant-numeric: tabular-nums; }
@media (max-width: 39.99rem) { .fs-stappen { margin: 0 .25rem; gap: 2px; } .fs-teller { display: none; } }

/* Met JavaScript: één scène tegelijk, rustige overgang */
.js .fs-scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.js .fs-scene.is-actief { opacity: 1; visibility: visible; transition: opacity .7s ease .15s, visibility 0s; }
.js .fs-scene .fs-tekst > * { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.js .fs-scene.is-actief .fs-tekst > * { opacity: 1; transform: none; }
.js .fs-scene.is-actief .fs-tekst > :nth-child(2) { transition-delay: .35s; }
.js .fs-scene.is-actief .fs-tekst > :nth-child(3) { transition-delay: .9s; }
.js .fs-rij li { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.js .fs-scene.is-actief .fs-rij li { opacity: 1; transform: none; transition-delay: calc(.6s + var(--i) * .35s); }
.js .fs-groei { transform: scaleY(0); transform-origin: 50% 330px; transform-box: view-box; transition: transform .9s cubic-bezier(.4,0,.2,1); }
.js .fs-scene.is-actief .fs-groei { transform: scaleY(1); transition-delay: calc(.4s + var(--i) * .22s); }
.js .fs-vraag { opacity: 0; transition: opacity .8s ease 1.2s; }
.js .fs-scene.is-actief .fs-vraag { opacity: 1; }
.js .fs-knoop { transition: opacity .6s ease 1.6s !important; }
@media (prefers-reduced-motion: reduce) {
  .js .fs-scene, .js .fs-scene * { transition: none !important; animation: none !important; }
  .js .fs-scene .fs-tekst > *, .js .fs-rij li { opacity: 1; transform: none; }
  .js .fs-groei { transform: none; }
}
/* Film op tablet en mobiel: inhoud verticaal gecentreerd, compactere tekeningen,
   tegels onder elkaar op smalle schermen. */
@media (max-width: 63.99rem) {
  .fs-scene { align-content: center; }
  .fs-beeld .fs-art { max-height: 15rem; }
}
@media (max-width: 39.99rem) {
  .fs-scene { padding: 1.5rem 1.25rem; gap: 1.25rem; }
  .fs-rij:not(.fs-gebouwen) { grid-template-columns: 1fr; gap: .5rem; }
  .fs-rij:not(.fs-gebouwen) li { flex-direction: row; align-items: center; gap: .9rem; padding: .85rem 1rem; }
  .fs-rij .std-icoon { width: 1.6rem; height: 1.6rem; }
  .fs-tegels .hs-nr { min-width: 1.5rem; }
  .fs-beeld .fs-art { max-height: 12rem; }
}

/* ─── Partners op de kaart (app/components/partnerKaart.php) ─────────────── */
.pk { display: grid; gap: 2.5rem; margin-top: 3rem; align-items: center; }
@media (min-width: 64rem) { .pk { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.pk-beeld { background: var(--color-light-grey); border: var(--lijn); padding: 1.5rem; }
.pk-kaart { display: block; width: 100%; height: auto; max-height: 34rem; margin-inline: auto; }
.pk-provincies path { fill: var(--color-white); stroke: var(--color-blue-grey); stroke-width: 1; stroke-linejoin: round; }
.pk-pin circle:last-child { fill: var(--color-navy); stroke: var(--color-white); stroke-width: 2.5; transition: fill .25s; }
.pk-pin .pk-halo { fill: var(--color-sky); opacity: 0; transition: opacity .25s; }
.pk-pin:hover circle:last-child, .pk-pin.is-actief circle:last-child, .pk-pin:focus-visible circle:last-child { fill: var(--color-black); }
.pk-pin:hover .pk-halo, .pk-pin.is-actief .pk-halo, .pk-pin:focus-visible .pk-halo { opacity: .45; }
.pk-pin { outline: none; }
.pk-lijst { list-style: none; margin: 0; padding: 0; border-top: var(--lijn); }
.pk-lijst a { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; padding: 1rem .75rem 1rem 0; border-bottom: var(--lijn); color: var(--color-black); text-decoration: none; transition: background-color .25s; }
.pk-lijst a:hover, .pk-lijst a.is-actief { background: var(--color-mist); }
.pk-naam { font-weight: 500; padding-left: .25rem; }
.pk-plaats { grid-column: 1; padding-left: .25rem; font-size: .9rem; color: var(--color-navy); }
.pk-lijst .hs-link-pijl { grid-column: 2; grid-row: 1 / span 2; }
.js .pk-pin { opacity: 0; transition: opacity .5s ease calc(var(--i) * .12s); }
.js .is-zichtbaar .pk-pin { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .pk-pin { opacity: 1; transition: none; } }

/* ─── Uitleg per dienst (app/components/serviceFilm.php) ─────────────────── */
.stijl-standaard #uitleg { scroll-margin-top: 6rem; }
.stijl-standaard #aanvragen { scroll-margin-top: 6rem; }
.fs-rij-veel { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 64rem) { .fs-rij-veel li { padding: 1.1rem 1rem; } }
.sf-ontvang { display: grid; grid-template-columns: 2fr 3fr; gap: 1.5rem; align-items: center; }
.sf-ontvang img { width: 100%; height: auto; }
.sf-slot-icoon { width: 3rem; height: 3rem; color: var(--color-navy); }
.sf-deel { fill: var(--color-sky); opacity: .55; }
.sf-risico { fill: var(--color-mist); stroke: var(--color-sky); stroke-width: 1.5; }
.fs-vraag.sf-klein { font-size: 26px; font-weight: 600; }
.js .sf-zoek { transform: translate(250px, 170px); transition: transform 4.5s cubic-bezier(.4,0,.2,1) .4s; }
.js .fs-scene.is-actief .sf-zoek { transform: translate(370px, 280px); }
.sf-zoek { transform: translate(370px, 280px); }
.js .sf-punt { opacity: 0; transition: opacity .5s ease calc(.5s + var(--i) * .55s) !important; }
.js .fs-scene.is-actief .sf-punt { opacity: 1; }
.js .sf-groei-b, .js .sf-groei-c { opacity: 0; transition: opacity .8s ease 1.4s; }
.js .sf-groei-c { transition-delay: 2.2s; }
.js .fs-scene.is-actief .sf-groei-b, .js .fs-scene.is-actief .sf-groei-c { opacity: 1; }
.js .sf-deel { opacity: 0; transition: opacity .8s ease 1.2s; }
.js .fs-scene.is-actief .sf-deel { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .js .sf-zoek, .js .sf-punt, .js .sf-groei-b, .js .sf-groei-c, .js .sf-deel { transition: none !important; } }
@media (max-width: 39.99rem) { .sf-ontvang { grid-template-columns: 1fr 2fr; } }
/* Homepage: diensten met twee links (pagina en uitleg-film) */
.hs-dienst h3 a { color: inherit; text-decoration: none; }
.hs-dienst h3 a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.hs-dienst-links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: auto; padding-top: 1.5rem; }
.hs-dienst-links .hs-meer { padding-top: 0; text-decoration: none; }
.hs-dienst-links .hs-meer:hover { text-decoration: underline; text-underline-offset: .2em; }
.hs-speel-icoon { width: 1.15rem; height: 1.15rem; }
.hs-speel-icoon path { fill: currentColor; stroke: none; }
.hs-kolom.hs-dienst:hover h3 { text-decoration: none; }
/* Meer dan drie tegels: rijen van drie, de laatste rij gecentreerd */
.fs-rij-veel { display: flex; flex-wrap: wrap; justify-content: center; }
.fs-rij-veel li { flex: 0 0 calc((100% - 2rem) / 3); }
@media (max-width: 39.99rem) { .fs-rij-veel li { flex-basis: 100%; } }
.sf-ontvang .fs-art { max-height: 18rem; }

/* Leesbaarheid op donkere vlakken: koppen met text-white blijven wit, grijze tekst wordt
   lichtgrijs (contrast 13:1). Alleen echte navy vlakken, niet de lichte tinten zoals bg-primary/[0.03]. */
.stijl-standaard :is(h1, h2, h3, h4).text-white,
.stijl-standaard .text-white :is(h1, h2, h3, h4),
.stijl-standaard :is(.bg-primary, .bg-primary-light, .bg-primary-dark, .std-inverse) :is(h1, h2, h3, h4) { color: var(--color-white); }
.stijl-standaard :is(.bg-primary, .bg-primary-light, .bg-primary-dark, .std-inverse) :is(.text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600) { color: var(--color-light-grey); }

/* ─── Zwevende knoppen en panelen (app/components/zwevendePanelen.php) ───── */
.zp-knop { position: fixed; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.2rem; border: 1px solid var(--color-navy); border-radius: 999px; background: var(--color-navy); color: var(--color-white); font: 500 .95rem/1 var(--font-sans); cursor: pointer; box-shadow: 0 6px 20px rgba(11, 39, 64, .18); transition: background-color .2s; }
.zp-knop .std-icoon { width: 1.25rem; height: 1.25rem; }
.zp-knop:hover, .zp-knop[aria-expanded="true"] { background: var(--color-black); border-color: var(--color-black); }
.zp-links { left: 1.25rem; background: var(--color-white); color: var(--color-navy); }
.zp-links:hover, .zp-links[aria-expanded="true"] { background: var(--color-mist); color: var(--color-navy); border-color: var(--color-navy); }
.zp-rechts { right: 1.25rem; }
.zp-knop:focus-visible { outline: 2px solid var(--color-sky); outline-offset: 3px; }

.zp-hint { position: fixed; right: 1.25rem; bottom: 4.9rem; z-index: 40; display: flex; align-items: center; gap: .25rem; max-width: 17rem; padding: .35rem .35rem .35rem .9rem; background: var(--color-white); border: 1px solid var(--color-light-grey); border-left: 3px solid var(--color-sky); box-shadow: 0 6px 20px rgba(11, 39, 64, .12); animation: zp-in .5s ease-out; }
.zp-hint-tekst { border: 0; background: none; padding: .3rem 0; font: 500 .9rem/1.4 var(--font-sans); color: var(--color-navy); text-align: left; cursor: pointer; }

.zp-paneel { position: fixed; bottom: 5.25rem; z-index: 45; width: min(24rem, calc(100vw - 2rem)); max-height: calc(100vh - 7rem); overflow-y: auto; background: var(--color-white); border: 1px solid var(--color-light-grey); border-top: 3px solid var(--color-navy); box-shadow: 0 12px 32px rgba(11, 39, 64, .16); animation: zp-in .35s ease-out; }
.zp-paneel-links { left: 1.25rem; }
.zp-paneel-rechts { right: 1.25rem; }
@keyframes zp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zp-stap { padding: 1.25rem 1.25rem 1.5rem; }
.zp-kop { display: flex; align-items: flex-start; gap: .5rem; }
.zp-titel { flex: 1; margin: .35rem 0 0; font-size: 1.15rem; font-weight: 400; line-height: 1.35; color: var(--color-black); }
.zp-icoonknop { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border: 0; background: none; color: var(--color-navy); cursor: pointer; border-radius: var(--radius); }
.zp-icoonknop:hover { background: var(--color-mist); }
.zp-icoonknop .std-icoon { width: 1.15rem; height: 1.15rem; }
.zp-intro { margin: .6rem 0 1.1rem; font-size: .95rem; color: var(--color-navy); }
.zp-keuzes { list-style: none; margin: 0; padding: 0; border-top: var(--lijn); }
.zp-keuze { display: grid; grid-template-columns: 1.5rem 1fr 1rem; gap: .9rem; align-items: center; width: 100%; padding: 1rem .25rem; border: 0; border-bottom: var(--lijn); background: none; font: inherit; text-align: left; cursor: pointer; transition: background-color .2s; }
.zp-keuze:hover { background: var(--color-mist); }
.zp-keuze > .std-icoon { color: var(--color-navy); }
.zp-keuze strong { display: block; font-weight: 600; color: var(--color-black); }
.zp-keuze span span { display: block; margin-top: .15rem; font-size: .875rem; color: var(--color-navy); }
.zp-formulier { margin-top: 1rem; }
.zp-formulier form { display: grid; gap: .85rem; }
.zp-formulier .pa-veld input, .zp-formulier .pa-veld textarea { padding: .65rem .8rem; font-size: .95rem; }
.zp-formulier .pa-veld label { font-size: .85rem; margin-bottom: .3rem; }
.zp-formulier .pa-privacy { margin: .25rem 0 0; font-size: .8rem; }
.zp-verstuur { width: 100%; }
.zp-bedankt { padding: 1.25rem 0 .5rem; }
.zp-bedankt .std-icoon { width: 2rem; height: 2rem; color: var(--color-navy); }
.zp-bedankt-kop { margin: .75rem 0 .25rem; font-size: 1.15rem; color: var(--color-black); }
.zp-bedankt p:last-child { color: var(--color-navy); }
.zp-mail { margin: 1rem 0 0; padding-top: 1rem; border-top: var(--lijn); font-size: .875rem; color: var(--color-navy); }
.zp-mail a { color: var(--color-navy); }

/* Telefoon: ronde knoppen zonder tekst; het paneel opent als vlak vanaf de onderkant. */
@media (max-width: 39.99rem) {
  .zp-knop { bottom: 1rem; width: 3.25rem; height: 3.25rem; padding: 0; justify-content: center; }
  .zp-knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zp-links { left: 1rem; } .zp-rechts { right: 1rem; }
  .zp-hint { right: 1rem; bottom: 4.75rem; max-width: calc(100vw - 2rem); }
  .zp-paneel { left: 0; right: 0; bottom: 0; width: 100%; max-height: 88vh; border-left: 0; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .zp-paneel, .zp-hint { animation: none; } }
@media print { .zp { display: none !important; } }

/* ─── Storytelling en conversie (app/components/conversie.php) ──────────── */
.cv-sectie [hidden], .cv-mobiel[hidden] { display: none !important; }
@keyframes cv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cv-teken { to { stroke-dashoffset: 0; } }

/* Het gebouw dat meegroeit */
.cv-gebouw { display: block; width: 100%; height: auto; }
.cv-lijn { fill: none; stroke: var(--color-navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cv-dun { stroke-width: 1; }
.cv-grijs { stroke: var(--color-blue-grey); }
.cv-grond { stroke: var(--color-black); }
.cv-vezel { stroke: var(--color-sky); stroke-width: 2.5; }
.cv-kabel { stroke-width: 1.25; }
.cv-stippel { stroke: var(--color-sky); stroke-width: 1.25; stroke-dasharray: 2 5; }
.cv-vlak { fill: var(--color-mist); stroke: var(--color-navy); stroke-width: 1.25; }
.cv-stip { fill: var(--color-navy); }
.cv-wifi .cv-lijn { stroke: var(--color-sky); stroke-width: 2; }
.cv-wifi .cv-stip-lijn { stroke-width: 4; }
.cv-puls { fill: none; stroke: var(--color-sky); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .cv-laag { opacity: 0; transition: opacity .6s ease; }
.js .cv-laag .cv-lijn:not(.cv-stippel) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1); }
.js .cv-laag.is-aan { opacity: 1; }
.js .cv-laag.is-aan .cv-lijn { stroke-dashoffset: 0; }
.js .cv-laag.is-aan .cv-puls { animation: cv-puls 2.8s ease-out infinite; }
@keyframes cv-puls { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }

.cv-groei { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 64rem) { .cv-groei { grid-template-columns: 1.2fr 1fr; gap: 4.5rem; align-items: center; } }
.cv-groei-beeld { background: var(--color-white); border: var(--lijn); padding: 1.5rem; }
.cv-noot { margin: .75rem 0 0; font-size: .8125rem; color: var(--color-blue-grey); }
.cv-schuif { display: block; width: 100%; margin-top: 1rem; height: 2rem; accent-color: var(--color-navy); cursor: pointer; }
.cv-schuif-codes { display: flex; justify-content: space-between; margin-top: .25rem; font-size: .75rem; font-weight: 600; color: var(--color-navy); }
.cv-niveau { margin-top: 1.75rem; min-height: 8.5rem; }
.cv-niveau-code { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 300; color: var(--color-black); }
.cv-niveau-code span { margin-left: .4rem; font-size: .8125rem; font-weight: 600; letter-spacing: var(--tracking-kopje); color: var(--color-navy); }
.cv-niveau p:not(.cv-niveau-code) { color: var(--color-navy); line-height: 1.6; }
.cv-lagen { list-style: none; margin: 1.75rem 0 0; padding: 0; border-top: var(--lijn); }
.cv-lagen li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: var(--lijn); color: var(--color-blue-grey); transition: color .4s; }
.cv-lagen-vink { width: 1.1rem; height: 1.1rem; opacity: .25; transition: opacity .4s; }
.cv-lagen li.is-aan { color: var(--color-black); }
.cv-lagen li.is-aan .cv-lagen-vink { opacity: 1; color: var(--color-navy); }
.hs-staffel-gebouw { margin-top: 1rem; padding: 1rem; background: var(--color-white); border: var(--lijn); }
/* Gebouw over de volle breedte onder balken en uitleg, met daarnaast "wat zit erin" (onder elkaar op een smal scherm) */
.hs-staffel-gebouw { grid-column: 1 / -1; display: grid; gap: 1.25rem; align-items: center; margin-top: 0 !important; padding: 1.5rem; }
@media (min-width: 48rem) { .hs-staffel-gebouw { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; padding: 2rem 2.5rem; } }
.hs-staffel-gebouw .cv-gebouw { max-height: 20rem; margin-inline: auto; }
@media (min-width: 48rem) { .hs-gebouw-tekst .cv-lagen { columns: 2; column-gap: 1.5rem; } .hs-gebouw-tekst .cv-lagen li { break-inside: avoid; } }
.hs-gebouw-tekst .std-kopje { margin: 0 0 .4rem; }
.hs-gebouw-zin { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--color-navy); }
.hs-gebouw-tekst .cv-lagen { margin-top: .9rem; }
.hs-gebouw-tekst .cv-lagen li { padding: .3rem 0; font-size: .8125rem; }
.hs-gebouw-tekst .cv-lagen-vink { width: .95rem; height: .95rem; }

/* Tijdlijn */
.cv-tijdlijn { position: relative; max-width: 48rem; margin: 3rem 0 0; padding: 0; list-style: none; --voortgang: 0; }
.cv-tijdlijn::before, .cv-tijdlijn::after { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 1.5rem; bottom: 4.25rem; width: 2px; }
.cv-tijdlijn::before { background: var(--color-light-grey); }
.cv-tijdlijn::after { background: var(--color-sky); transform-origin: top; transform: scaleY(var(--voortgang)); }
.cv-tl-stap { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; padding-bottom: 2.75rem; }
.cv-tl-punt { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-white); border: 1px solid var(--color-light-grey); color: var(--color-blue-grey); transition: border-color .5s, color .5s, background-color .5s; }
.cv-tl-punt .std-icoon { width: 1.3rem; height: 1.3rem; }
.cv-tl-stap.is-bereikt .cv-tl-punt { border-color: var(--color-navy); color: var(--color-navy); }
.cv-tl-slot.is-bereikt .cv-tl-punt { background: var(--color-navy); color: var(--color-white); }
.cv-tl-stap > div { padding-top: .6rem; }
.js .cv-tl-stap > div { opacity: .35; transform: translateY(6px); transition: opacity .6s, transform .6s; }
.js .cv-tl-stap.is-bereikt > div { opacity: 1; transform: none; }
.cv-tl-zin { margin: .4rem 0 .35rem; font-size: 1.35rem; font-weight: 300; line-height: 1.35; color: var(--color-black); }
.cv-tl-stap p:not(.std-kopje):not(.cv-tl-zin) { color: var(--color-navy); }

/* De glasvezellijn langs de homepage (alleen op brede schermen, daar is ruimte naast de inhoud) */
.cv-draad-vak { position: relative; --voortgang: 0; }
.cv-draad { display: none; }
@media (min-width: 90rem) {
  .cv-draad { display: block; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc((100% - 80rem) / 2 - 2.5rem); width: 2px; pointer-events: none; }
  .cv-draad::before { content: ""; position: absolute; inset: 0; background: var(--color-light-grey); opacity: .7; }
  .cv-draad-lijn { position: absolute; inset: 0; background: var(--color-sky); transform-origin: top; transform: scaleY(var(--voortgang)); }
  .cv-draad-eind { position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--color-light-grey); transition: background-color .4s, box-shadow .4s; }
  .cv-draad-vak.is-klaar .cv-draad-eind { background: var(--color-sky); box-shadow: 0 0 0 6px rgba(127, 169, 209, .25); }
}

/* Snelscan */
.cv-scan { margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--color-white); border: 1px solid var(--color-light-grey); border-top: 3px solid var(--color-navy); }
.std-subtiel .cv-scan { border-color: var(--color-white); border-top-color: var(--color-navy); }
.cv-scan-vragen { display: none; }
.cv-scan.is-bezig .cv-scan-vragen { display: block; }
.cv-voortgang { height: 2px; margin-bottom: 1.75rem; background: var(--color-light-grey); }
.cv-voortgang span { display: block; width: 0; height: 100%; background: var(--color-navy); transition: width .4s ease; }
.cv-vraag { min-width: 0; margin: 0; padding: 0; border: 0; animation: cv-in .35s ease-out; }
.cv-vraag legend { margin-bottom: 1.25rem; padding: 0; }
.cv-teller { display: block; margin-bottom: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-blue-grey); }
.cv-vraag-tekst { display: block; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 300; line-height: 1.3; color: var(--color-black); }
.cv-opties { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cv-opties { grid-template-columns: 1fr 1fr; } }
.cv-optie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.5rem; padding: .85rem 1.1rem; background: var(--color-white); border: 1px solid var(--color-light-grey); border-radius: var(--radius); font: 500 1rem/1.35 var(--font-sans); color: var(--color-navy); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.cv-optie:hover, .cv-optie:focus-visible { background: var(--color-mist); border-color: var(--color-navy); }
.cv-optie .std-icoon { width: 1.1rem; height: 1.1rem; }
.cv-terug { margin-top: 1.25rem; padding: .25rem 0; background: none; border: 0; font: 500 .9rem var(--font-sans); color: var(--color-navy); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cv-uitkomst { display: grid; gap: 2.5rem; outline: none; animation: cv-in .45s ease-out; }
@media (min-width: 64rem) { .cv-uitkomst { grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; } }
.cv-uitkomst-kop { margin: .75rem 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; line-height: 1.25; color: var(--color-black); }
.cv-uitkomst-kop strong { display: block; font-weight: 500; color: var(--color-navy); }
.cv-uitkomst-tekst > p { color: var(--color-navy); line-height: 1.6; }
.cv-onzeker { padding: .75rem 1rem; background: var(--color-mist); border-left: 3px solid var(--color-sky); }
.cv-disclaimer { margin-top: 1.25rem; font-size: .8125rem; color: var(--color-blue-grey) !important; }
.cv-scan-staffel { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cv-scan-staffel li { display: flex; align-items: center; width: var(--lengte); height: 2.25rem; padding-left: .85rem; background: var(--color-light-grey); font-size: .875rem; font-weight: 600; color: var(--color-navy); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); transform-origin: left; transition: background-color .4s, color .4s; }
.js .cv-scan-staffel li { transform: scaleX(0); transition: transform .7s cubic-bezier(.4, 0, .2, 1), background-color .4s, color .4s; }
.js .cv-scan-staffel.is-getoond li { transform: none; }
.cv-scan-staffel li:nth-child(2) { transition-delay: .06s; } .cv-scan-staffel li:nth-child(3) { transition-delay: .12s; }
.cv-scan-staffel li:nth-child(4) { transition-delay: .18s; } .cv-scan-staffel li:nth-child(5) { transition-delay: .24s; } .cv-scan-staffel li:nth-child(6) { transition-delay: .3s; }
.cv-scan-staffel li.is-actief { background: var(--color-navy); color: var(--color-white); }

/* Het certificaat in beeld */
.cv-cert-grid { display: grid; gap: 3rem; margin-top: 2.5rem; }
@media (min-width: 64rem) { .cv-cert-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } }
.cv-cert-punten { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-white); }
.std-subtiel .cv-cert-punten { border-top-color: rgba(11, 39, 64, .12); }
.cv-cert-punten li { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid rgba(11, 39, 64, .12); color: var(--color-black); }
.cv-cert-punten .std-icoon { color: var(--color-navy); }
.cv-cert-beeld { display: flex; justify-content: center; }
.cv-cert { display: flex; flex-direction: column; gap: .6rem; width: min(100%, 22rem); aspect-ratio: 1 / 1.32; padding: 1.75rem 1.6rem; background: var(--color-white); border: 1px solid var(--color-light-grey); border-top: 4px solid var(--color-navy); }
.cv-cert-kop .std-logo { --logo-maat: 30px; }
.cv-cert-titel { margin: 1.25rem 0 0; font-size: 1.5rem; font-weight: 300; color: var(--color-black); }
.cv-cert-sub { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: var(--tracking-kopje); text-transform: uppercase; color: var(--color-blue-grey); }
.cv-cert-label { margin: 1.1rem 0 .75rem; }
.cv-cert-label span { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 2.4rem 0 1rem; background: var(--color-navy); color: var(--color-white); font-size: 1.15rem; font-weight: 600; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); transform-origin: left; }
.cv-cert-regel { display: block; width: var(--b); height: 6px; background: var(--color-light-grey); transform-origin: left; }
.cv-cert-voet { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.cv-cert-code { position: relative; width: 3.25rem; height: 3.25rem; border: 1px solid var(--color-navy); }
.cv-cert-code::before, .cv-cert-code::after { content: ""; position: absolute; width: .9rem; height: .9rem; background: var(--color-navy); }
.cv-cert-code::before { top: .35rem; left: .35rem; } .cv-cert-code::after { right: .35rem; bottom: .35rem; }
.cv-cert-zegel { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--color-navy); border-radius: 50%; color: var(--color-navy); }
.js .cv-cert { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.js .cv-cert-label span, .js .cv-cert-regel { transform: scaleX(0); transition: transform .8s cubic-bezier(.4, 0, .2, 1) .5s; }
.js .cv-cert-regel:nth-of-type(2) { transition-delay: .65s; } .js .cv-cert-regel:nth-of-type(3) { transition-delay: .8s; }
.js .cv-cert-zegel { opacity: 0; transform: scale(1.15); transition: opacity .5s ease 1.3s, transform .5s ease 1.3s; }
.is-zichtbaar .cv-cert, .is-zichtbaar .cv-cert-label span, .is-zichtbaar .cv-cert-regel, .is-zichtbaar .cv-cert-zegel { opacity: 1; transform: none; }

/* Vaste aanvraagknop op een telefoon, tussen de twee ronde zwevende knoppen */
.cv-mobiel { display: none; }
@media (max-width: 39.99rem) {
  .cv-mobiel:not([hidden]) { position: fixed; z-index: 39; bottom: 1rem; left: 5rem; right: 5rem; display: flex; align-items: center; justify-content: center; height: 3.25rem; padding: 0 1rem; background: var(--color-navy); border: 1px solid var(--color-navy); border-radius: 999px; color: var(--color-white); font: 500 .95rem/1 var(--font-sans); cursor: pointer; animation: zp-in .35s ease-out; }
}
@media print { .cv-mobiel, .cv-draad { display: none !important; } }

/* Na een aanvraag: "Wat gebeurt er nu?" */
.cv-succes { margin-bottom: 1.25rem; }
.cv-succes-vink { display: block; width: 3rem; height: 3rem; margin-bottom: 1rem; }
.cv-succes-vink circle, .cv-succes-vink path { fill: none; stroke: var(--color-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cv-teken .9s ease-out forwards; }
.cv-succes-vink path { animation-delay: .5s; }
.cv-succes-stappen { display: grid; gap: .6rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.cv-succes-stappen li { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; color: var(--color-navy); animation: cv-in .5s ease-out both; }
.cv-succes-stappen li:nth-child(2) { animation-delay: .15s; } .cv-succes-stappen li:nth-child(3) { animation-delay: .3s; }
.cv-succes-stappen span { display: grid; flex: none; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--color-navy); border-radius: 50%; font-size: .8rem; font-weight: 600; }

/* Gecertificeerde gebouwen op de partnerkaart */
.pk-gebouw rect { fill: var(--color-sky); stroke: var(--color-navy); stroke-width: 1.5; transition: fill .25s; }
.pk-gebouw:hover rect, .pk-gebouw:focus-visible rect { fill: var(--color-navy); }
.pk-gebouw { outline: none; }
.js .pk-gebouw { opacity: 0; transition: opacity .6s ease calc(1s + var(--i) * .25s); }
.js .is-zichtbaar .pk-gebouw { opacity: 1; }
.pk-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--color-navy); }
.pk-teken-partner, .pk-teken-gebouw { display: inline-block; margin-right: .55rem; vertical-align: -1px; }
.pk-teken-partner { width: 12px; height: 12px; border: 2px solid var(--color-white); border-radius: 50%; background: var(--color-navy); outline: 1px solid var(--color-navy); }
.pk-teken-gebouw { width: 10px; height: 10px; background: var(--color-sky); border: 1px solid var(--color-navy); transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .js .cv-laag, .js .cv-laag .cv-lijn, .js .cv-tl-stap > div, .js .cv-scan-staffel li, .js .cv-cert, .js .cv-cert *, .js .pk-gebouw,
  .cv-vraag, .cv-uitkomst, .cv-succes-stappen li, .cv-mobiel { transition: none !important; animation: none !important; }
  .cv-succes-vink circle, .cv-succes-vink path { animation: none; stroke-dashoffset: 0; }
  .js .cv-laag.is-aan .cv-puls { animation: none; }
}

/* Controle ?stil=1 (standaard.js): alles direct in de eindstand, zonder overgangen. */
.is-stil *, .is-stil *::before, .is-stil *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }

/* Snelscan, beginstand: knop met een grijze staffel als voorproefje */
.cv-scan-start { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 48rem) { .cv-scan-start { grid-template-columns: auto minmax(0, 22rem); justify-content: space-between; } }
.js .cv-scan-voorproef li { transform: none; }
.cv-scan-voorproef li { opacity: .7; }

/* ─── Telefoon: leesbaar en goed te raken (mobiele scan, 4 oktober 2026) ──
   Raakvlakken minimaal 40 pixels hoog, tekst minimaal 12 pixels. */
@media (max-width: 39.99rem) {
  /* Bovenbalk: iets hoger, zodat de taalknop met een vinger te raken is */
  .stijl-standaard header > .bg-primary > div { height: 2.5rem; }
  .stijl-standaard [data-taalkeuze-knop] { min-height: 2.5rem; padding-inline: .6rem; margin-right: -.6rem; font-size: .8125rem; }
  .stijl-standaard [data-taalkeuze-menu] a { padding-block: .8rem; }
  /* Kop: aanvraagknop en menuknop */
  .stijl-standaard header [data-aanvraag-open] { min-height: 2.5rem; padding-inline: .9rem; font-size: .8125rem; }
  .stijl-standaard [data-mobiel-knop] { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; }
  .stijl-standaard [data-mobiel-menu] a, .stijl-standaard [data-mobiel-menu] button { padding-block: .7rem; }
  /* Kruimelpad en links met een pijl */
  .stijl-standaard nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .hs-link { padding-block: .45rem; }
  .stijl-standaard [data-bio-knop] { min-height: 2.5rem; padding-right: .5rem; }
  /* Footer: elke link een eigen raakvlak, zonder extra witruimte ertussen */
  .stijl-standaard footer li a, .stijl-standaard footer a[href^="mailto:"], .stijl-standaard footer a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .stijl-standaard footer ul.space-y-2 > :not(:first-child) { margin-top: 0; }
  .stijl-standaard footer a:has(> svg:only-child) { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; }
  /* Kleine tekst minimaal 12 pixels */
  .stijl-standaard .text-\[9px\], .stijl-standaard .text-\[10px\], .stijl-standaard .text-\[11px\] { font-size: 12px !important; line-height: 1.35; }
  .hs-balk-naam { font-size: .75rem; }
}
/* Film: onderdelen mogen smaller worden dan hun inhoud, zodat niets buiten een smal scherm valt */
.fs-buhne, .fs-buhne > *, .fs-scene > * { min-width: 0; }
.fs-kop { overflow-wrap: break-word; }
@media (max-width: 39.99rem) {
  /* Losse tekstlinks buiten een alinea (zoals "Terug naar partners"): groot genoeg om te raken */
  .stijl-standaard main a.inline-flex:not(.std-knop), .stijl-standaard main a.text-accent:not(p a):not(li a):not(.block) { min-height: 2.5rem; align-items: center; }
  .stijl-standaard main a.text-accent:not(p a):not(li a):not(.block):not(.inline-flex) { display: inline-flex; }
}
/* Vangnet: niets in de inhoud maakt de pagina breder dan het scherm (clip laat de vaste kop werken). */
.stijl-standaard main { overflow-x: clip; }
@media (max-width: 39.99rem) {
  /* Film: de stapjes zijn op een telefoon alleen een voortgangsbalk; bladeren gaat met vorige en volgende */
  .fs-stappen { pointer-events: none; }
}
/* Heel smalle telefoons (tot 352 pixels): kop en voet passen nog op één regel */
@media (max-width: 22rem) {
  .stijl-standaard header .std-logo { --logo-maat: 30px !important; }
  .stijl-standaard header [data-aanvraag-open] { max-width: 8rem; padding: .3rem .55rem; font-size: .75rem; line-height: 1.15; white-space: normal; text-align: center; }
  .stijl-standaard header .max-w-7xl { padding-inline: .75rem; }
  .stijl-standaard footer .flex.items-center { flex-wrap: wrap; }
  .stijl-standaard header .flex.items-center.justify-between.h-16 { gap: .5rem; }
}
@media (max-width: 39.99rem) {
  /* Tabellen die breder zijn dan het scherm: zelf horizontaal te schuiven, in plaats van afgeknipt */
  .stijl-standaard main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Film: lange woorden (zoals "Gewerbeimmobilien") passen in de lijst met gebouwtypes */
  .fs-rij { gap: .5rem; }
  .fs-rij li { min-width: 0; padding: 1rem .6rem; gap: .6rem; overflow-wrap: anywhere; hyphens: auto; font-size: .875rem; }
  /* Interactief gebouw: grotere rondjes om met een vinger te raken */
  .hs-hotspot circle { r: 18px; }
  .hs-hotspot text { font-size: 14px; }
  /* Links onder de diensten op de homepage */
  .hs-dienst-links .hs-meer { min-height: 2.5rem; }
  .hs-dienst h3 a { display: inline-block; padding-block: .45rem; }
}

/* Nieuwskaartjes met een donkere sluier: de tekening als lichte structuur, tekst goed leesbaar */
.stijl-standaard a.bg-primary > .std-visual-vul { opacity: .22; }
.stijl-standaard a.bg-primary > .std-visual-vul + .absolute { background: var(--color-navy); opacity: .55; }
.stijl-standaard a.bg-primary :is(.text-white\/40, .text-white\/50, .text-white\/60, .text-white\/70) { color: rgba(255, 255, 255, .85); }
@media (max-width: 39.99rem) {
  /* Kruimelpad op één regel, zelf opzij te schuiven */
  .stijl-standaard nav[aria-label="Breadcrumb"] ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .stijl-standaard nav[aria-label="Breadcrumb"] ol::-webkit-scrollbar { display: none; }
  .stijl-standaard nav[aria-label="Breadcrumb"] li { flex: none; }
}

/* Begrippenlijst (app/components/begrippenlijst.php) */
.bl-alfabet { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 2.5rem; }
.bl-alfabet a, .bl-alfabet span { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .45rem; border: 1px solid #E9EDF2; font-weight: 600; font-size: .95rem; text-decoration: none; }
.bl-alfabet a { color: #0B2740; background: #fff; transition: background-color .2s, border-color .2s; }
.bl-alfabet a:hover, .bl-alfabet a:focus-visible { background: #DCE8F4; border-color: #0B2740; }
.bl-alfabet span { color: #B6C0CC; }
.bl-letter { scroll-margin-top: 8rem; margin-bottom: 2.5rem; }
.bl-kop { margin: 0 0 .25rem; padding-bottom: .5rem; border-bottom: 1px solid #E9EDF2; font-size: 2rem; font-weight: 300; line-height: 1.2; color: #0A0A0A; }
.bl-lijst { margin: 0; }
.bl-term { scroll-margin-top: 8rem; padding: 1.1rem 0; border-bottom: 1px solid #E9EDF2; transition: background-color .4s; }
.bl-term:target { background: #DCE8F4; padding-inline: .9rem; }
.bl-term dt { font-size: 1.1rem; font-weight: 600; color: #0A0A0A; }
.bl-term dd { margin: .35rem 0 0; color: #0B2740; line-height: 1.65; }
.bl-term dd p { margin: 0; }
.bl-meer { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.5rem; font-weight: 500; color: #0B2740; text-decoration: underline; text-underline-offset: .2em; }

/* Partnerbanner (app/components/partnerBanner.php): subtiel, in de kleuren van de site */
.pb-sectie { padding: 2.5rem 0 3rem; }
.pb-wrap { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .pb-wrap { padding: 0 1.5rem; } }
.pb { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.25rem; background: #F3F7FB; border: 1px solid #DCE8F4; border-left: 3px solid #7FA9D1; }
.pb-logo { flex: none; width: 48px; height: 48px; border-radius: 2px; object-fit: cover; }
.pb-tekst { flex: 1; min-width: 0; }
.pb-tekst p { margin: 0; color: #0B2740; font-size: .95rem; line-height: 1.55; }
.pb-tekst .pb-label { margin-bottom: .2rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6B7C93; }
.pb-label span { color: #0B2740; letter-spacing: .08em; }
.pb-link { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .55rem .95rem; border: 1px solid #0B2740; border-radius: 2px; background: #fff; color: #0B2740 !important; font-size: .9rem; font-weight: 500; text-decoration: none !important; white-space: nowrap; transition: background-color .2s; }
.pb-link:hover, .pb-link:focus-visible { background: #DCE8F4; }
.pb-pijl { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 39.99rem) {
  .pb { flex-wrap: wrap; align-items: flex-start; gap: .9rem; }
  .pb-logo { width: 40px; height: 40px; }
  .pb-tekst { flex: 1 1 0; }
  .pb-link { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}

/* Logo zonder tagline: woordmerk optisch in het midden naast het symbool (hoofdletters hebben geen onderstok) */
.std-logo-alleen-woord { justify-content: center; }
.std-logo-alleen-woord .std-logo-woord { line-height: 1; padding-top: .1em; }
/* Bovenbalk in de kop: tekst iets dikker, zelfde grootte */
.stijl-standaard header > .bg-primary { font-weight: 500; }
/* Staffel op de homepage: minder ruimte tussen de bovenste rij en het brede vak met het gebouw */
@media (min-width: 64rem) { .hs-staffel { row-gap: 2rem; } }
/* Voor wie op de homepage: een strak raster. Vijf even brede kolommen, kopjes even hoog en
   de doelgroepen op rechte rijen, ook als een naam over twee regels loopt (subgrid). */
@media (min-width: 64rem) {
  .hs-wie { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto repeat(6, auto); }
  .hs-wie-groep { display: grid; grid-row: span 7; grid-template-rows: subgrid; align-content: start; }
  .hs-wie-groep > .std-kopje { grid-row: 1; margin: 0 0 1rem; align-self: start; }
  .hs-wie-groep ul { grid-row: 2 / span 6; display: grid; grid-template-rows: subgrid; margin: 0; }
  .hs-wie-groep li { min-width: 0; }
  .hs-wie-groep a { height: 100%; align-items: flex-start; }
  .hs-wie-groep a .std-icoon { margin-top: .05rem; }
}
@media (min-width: 64rem) {
  /* Het pijltje bij aanwijzen valt in de witruimte van de kolom, zodat namen niet onnodig afbreken */
  .hs-wie-groep a { position: relative; }
  .hs-wie-groep a .hs-link-pijl { position: absolute; right: -1.15rem; top: .8rem; margin: 0; }
  .hs-wie-groep { padding-inline: 1.35rem; }
}
/* Film, scène "Elk gebouw": vier even brede tegels, even grote tekeningen en de namen op één lijn */
.fs-gebouwen { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (min-width: 40rem) { .fs-gebouwen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-gebouwen li { align-items: stretch; min-width: 0; }
.fs-gebouwen li > .std-visual { width: 100%; height: auto; aspect-ratio: 8 / 5; }
.fs-gebouwen li > span { padding: .75rem .8rem; font-size: .9rem; overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 40rem) {
  .fs-gebouwen { gap: .75rem; }
  .fs-gebouwen li > span { padding: .7rem .6rem; font-size: .85rem; }
}
@media (min-width: 40rem) {
  .fs-gebouwen li > span { font-size: .8rem; hyphens: manual; }
  :lang(de) .fs-gebouwen li > span { hyphens: auto; }
}
/* Taalmenu in de donkere bovenbalk: het menu zelf is wit, dus donkere, goed leesbare tekst */
.stijl-standaard [data-taalkeuze-menu] { border-radius: var(--radius); border-color: var(--color-light-grey); box-shadow: 0 8px 24px rgba(11, 39, 64, .12) !important; }
.stijl-standaard [data-taalkeuze-menu] a { color: var(--color-navy) !important; font-weight: 500; background: var(--color-white); }
.stijl-standaard [data-taalkeuze-menu] a:hover, .stijl-standaard [data-taalkeuze-menu] a:focus-visible { background: var(--color-mist); color: var(--color-black) !important; }
.stijl-standaard [data-taalkeuze-menu] a.bg-light-blue { background: var(--color-mist); font-weight: 600; }
.stijl-standaard [data-taalkeuze-menu] a { white-space: nowrap; }
/* Film: tegels met een icoon (zoals Onafhankelijk, Betrouwbaar, Toekomstbestendig) even breed */
@media (min-width: 40rem) {
  .fs-rij:not(.fs-rij-veel):not(.fs-gebouwen) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-rij:not(.fs-gebouwen) li { min-width: 0; padding-inline: 1rem; }
  .fs-rij:not(.fs-gebouwen) li .std-kopje { letter-spacing: .08em; font-size: .75rem; }
}
/* Film op de telefoon: namen van gebouwtypes heel laten (Duits mag afbreken) */
@media (max-width: 39.99rem) {
  .fs-gebouwen li > span { font-size: .8rem; hyphens: manual; overflow-wrap: normal; }
  :lang(de) .fs-gebouwen li > span { hyphens: auto; overflow-wrap: anywhere; }
}