/* ============================================================
   Unit4Security - design tokens
   ============================================================
   Same chunky, angular shape language throughout (hard corners via
   clip-path angle-cuts, offset "block" shadows, no border-radius
   anywhere) - the palette is what's being tried out across versions:
   deep navy blue now does the big background surfaces (hero, footer,
   the dark local band, the CTA banner), red is the general accent
   (buttons, checkmarks, chips, icons), and true yellow (--accent-
   yellow below) is reserved for the one or two spots that should
   really pop - not used broadly. The --blue/--yellow/--green variable
   *names* are kept as-is on purpose (renaming them would mean
   touching hundreds of usages across this file for zero visual
   benefit) - only their *values* changed, so every rule that
   referenced them updates automatically. */
:root {
  --ink: #1a1a1a;
  --ink-700: #2e2e2e;
  --ink-500: #5c5c5c;
  --ink-400: #7d7d7d;
  --ink-300: #bdbdbd;
  --ink-100: #ececec;
  --paper: #f4f4f4;
  --white: #ffffff;

  /* Brand/primary slot (was vivid blue) - now the actual Unit4Security
     red, everywhere buttons/links/icons live. Deep navy blue (the big
     background surfaces) is its own slot below, no longer tied to
     this one. */
  --blue: #e2001a;
  --blue-dark: #b70014;
  --blue-soft: #ffd9dc;
  --blue-deep: #0d1b2e;

  /* Accent slot (was vivid yellow) - now a neutral slate grey, used
     for the signature angled chips, underlines and small rotating
     icon-chip colours. (True yellow lives in --accent-yellow below,
     used only where something should really stand out.) */
  --yellow: #6b7280;
  --yellow-dark: #4b5563;
  --yellow-soft: #e5e7eb;

  /* Third rotating tint slot (was teal green) - now a lighter grey,
     so icon-chip/number rotations read as red + two greys instead of
     a colourful trio. */
  --green: #9ca3af;
  --green-dark: #71717a;
  --green-soft: #f1f2f4;

  /* Alerts/required-field states use this same red - intentional here,
     since red is now the brand colour too; error text and CTAs are
     distinguished by context (small inline text vs. buttons/icons),
     not by a different hue. */
  --red: #e2001a;
  --red-dark: #b70014;
  --red-soft: #ffe1e5;

  /* True yellow - used sparingly, only for the one or two moments per
     page that should visually jump out above the red accent (a
     "highlighter" effect), not as a general-purpose colour. */
  --accent-yellow: #ffd400;
  --accent-yellow-dark: #e0ad00;

  /* Genuine accent green - separate from the --green/--green-dark tokens
     above (those were repurposed to neutral greys during the monochrome
     pass and are used broadly for icon-chip rotation, so reusing them
     here wouldn't read as "green" at all). Used sparingly, same
     highlighter role as --accent-yellow, for the one callout that
     should pop (the configurator's "prijsindicatie" sticker). */
  --accent-green: #12a150;
  --accent-green-dark: #0c7d3d;

  /* Bubbly light-blue background base colour - used by the homepage's
     top band (body.body--home::before) and by .page-hero--blue on the
     other pages (VRKI, Over ons), so both read as one consistent
     design instead of two different top-of-page treatments. */
  --bubbly-bg: #eaf6ff;

  /* Homepage colour experiments have lived here across rounds (vivid
     multicolour, then a single blue accent, then a colour mesh) - this
     round drops colour tokens entirely. The site's existing --ink/
     --ink-700/--ink-500/--ink-400/--ink-300/--ink-100/--white/--paper
     scale already IS a black-to-white greyscale, so "blacks/whites/
     greys" below just reuses those directly rather than adding new
     tokens - see the monochrome makeover section further down. */

  /* Rounded corners site-wide now (was hard corners via clip-path cuts) -
     matches the homepage's rounded language across every page instead of
     just there. --cut/--cut-sm/--cut-lg (the old angled clip-path sizes)
     are kept defined since a few components still reference them
     directly rather than through border-radius, but the corner language
     itself is rounded now. */
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --cut: 16px;
  --cut-sm: 10px;
  --cut-lg: 28px;

  /* Soft, diffused elevation shadows site-wide now (was flat offset
     "block" shadows to match the old hard-corner language) - a rounded
     shape paired with a hard offset shadow would look like a mismatched
     leftover, so shadows moved to the same soft style as the homepage's
     when its corners rounded. */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.05), 0 22px 48px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.06), 0 34px 68px rgba(0, 0, 0, 0.10);
  --shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.10), 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.06), 0 42px 84px rgba(0, 0, 0, 0.10);
  /* Soft elevation for the sticky/floating header - replaces its old hard
     black border now that the header reads through shadow alone. */
  --shadow-header: 0 2px 6px rgba(26, 26, 26, 0.06), 0 14px 30px rgba(26, 26, 26, 0.14);

  /* Single family (Inter) for both display and body now, instead of a
     two-font pairing - one clean, highly legible UI typeface everywhere,
     and one font family loaded instead of two (fewer font files fetched). */
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --wrap-width: 1160px;
}

/* ============================================================
   HOMEPAGE: back to the monochrome "exclusive" design, bubbly light-
   blue background
   ============================================================
   Reverted the "Case File" round's fonts/colours back to the previous
   black/white/grey design - EXCEPT the small uppercase "stamp" tag
   treatment for .eyebrow (e.g. "Expertise die verder gaat"), which is
   kept on purpose (liked it, keeping the monospace font + rotation +
   sharp corners for that one element only). --font-mono is only used
   there. Everything else is back to Inter (inherited from :root).
   Radius/shadow tokens now live in :root above and apply site-wide, not
   just here, so there's no override needed in this block anymore.
   The bubbly light-blue background (--bubbly-bg, defined in :root above
   since .page-hero--blue on the other pages now reuses it too) replaces
   the flat grey from the exclusive round - see body.body--home::before
   further down for the actual band + bubble pattern. */
body.body--home {
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
/* Zorgt dat het hidden-attribuut altijd wint, ook als een specifieke class
   op hetzelfde element een eigen display-waarde zet. Zonder dit overschrijft
   auteur-CSS (bv. ".afspraak-form__grid { display: grid; }") stilletjes de
   browser-default "[hidden]{display:none}", en blijft een element dat via
   JS (el.hidden = true) verborgen zou moeten worden toch zichtbaar. */
[hidden] { display: none !important; }
html { -webkit-tap-highlight-color: transparent; scroll-behavior: auto; }
body {
  margin: 0;
  overscroll-behavior-y: none;
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--paper);
  line-height: 1.6;
}
/* Pages with a coloured top band (VRKI, Over ons, Contact, Hoe werkt het,
   Veelgestelde vragen) get a white page background beneath it now,
   matching the homepage, instead of the site's default light-grey
   --paper. Targets any page using .page-hero--blue rather than needing a
   body class on each template - :has() is already used elsewhere in this
   stylesheet (see .extra-card:has(...) further down). */
body:has(.page-hero--blue) { background: var(--white); }
/* Playful "bubbly" light-blue background - now a bounded band at the top
   of the page instead of covering the whole scroll, so it visually ends
   partway through the USP cards below (rather than extending indefinitely
   down the page) with a slightly diagonal bottom edge, echoing the
   diagonal already used on the other pages' .page-hero--blue band (see
   further down). A ::before pseudo-element rather than a background on
   body itself, since body's own background needs to stay a plain colour
   for everything below the cutoff. Pure CSS radial-gradients for the
   bubbles, no image request, no filter/blend-mode - cheap to paint. */
body.body--home {
  position: relative;
  background: var(--white);
  overflow-x: hidden; /* the diagonal-clipped band can't cause horizontal scroll */
}
body.body--home::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1180px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bubbly-bg);
  background-image:
    radial-gradient(circle 70px at 10% 15%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(circle 46px at 7% 11%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(circle 130px at 88% 8%, rgba(191, 227, 253, 0.75), transparent 100%),
    radial-gradient(circle 55px at 92% 26%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(circle 95px at 18% 68%, rgba(191, 227, 253, 0.65), transparent 100%),
    radial-gradient(circle 150px at 62% 88%, rgba(205, 234, 253, 0.6), transparent 100%),
    radial-gradient(circle 40px at 78% 62%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(circle 35px at 42% 38%, rgba(191, 227, 253, 0.55), transparent 100%),
    radial-gradient(circle 85px at 32% 92%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(circle 60px at 96% 55%, rgba(205, 234, 253, 0.6), transparent 100%);
}
/* Curvy divider instead of the earlier straight diagonal cut - an inline
   SVG wave (data URI, no extra request) as a second pseudo-element,
   overlapping the bottom ~150px of the band above. background-size lets
   it stretch full-width responsively (a clip-path curve wouldn't scale
   with the element's percentage width the same way). Bold amplitude on
   purpose ("stronger") so the seam reads as a deliberate shape landing
   roughly halfway through the USP card row, not a subtle transition. */
body.body--home::after {
  content: "";
  position: absolute;
  top: 1040px; left: 0; right: 0;
  height: 150px;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,140 480,0 720,55 C960,110 1200,10 1440,75 L1440,150 L0,150 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  /* Shorter hero + earlier-wrapping USP cards on smaller screens, so the
     band needs less height to still land "halfway through" them. */
  body.body--home::before { height: 950px; }
  body.body--home::after { top: 830px; }
}
h1 { letter-spacing: -0.01em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.45em;
  color: var(--ink);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); max-width: 34ch; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); max-width: 32ch; }
h3 { font-size: 1.14rem; text-transform: none; letter-spacing: 0; }
/* Reusable "thin" tail for part of a heading - drops just that span down
   to a much lighter weight so it reads as a quieter aside next to the
   bold statement around it, instead of shouting at the same volume as
   the rest of the heading. */
.thin { font-weight: 400; }
p { margin: 0 0 1em; color: var(--ink-500); font-size: 1.02rem; max-width: 62ch; }
/* The `ch` caps above scale with each element's OWN font-size, so on a
   large h1/h2 they barely constrain anything (34ch at a 4rem heading is
   nearly as wide as the whole page). From tablet width up, pin titles
   and body copy to a fixed, comfortable reading measure in real pixels
   instead - independent of font-size - so lines actually stay short.
   Left off on mobile, where the viewport itself is already narrow. */
@media (min-width: 641px) {
  h1 { max-width: 780px; }
  h2 { max-width: 620px; }
  h3 { max-width: 560px; }
  p { max-width: 640px; }
}
.wrap { max-width: var(--wrap-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; position: relative; }
.section--tight { padding: 56px 0; }
:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 3px; border-radius: 0; }

/* ---------- Buttons ----------
   Rounded pill + soft diffused shadow, site-wide (was a slanted
   parallelogram via a skewed ::before pseudo-element) - matches the
   rounded-corner language used everywhere else on the site now. Colour
   stays on the real .btn element itself; there's no separate shape
   pseudo-element anymore since there's no skew/clip-path left for it
   to carry. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 30px;
  position: relative;
  z-index: 0;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.04rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
/* Was a skewed-parallelogram pseudo-element with a hard offset shadow -
   rounded pill + soft diffused shadow now, site-wide, matching the
   corners/shadows everywhere else on the site. Colour stays on the
   real element itself now instead of this pseudo-element, since there's
   no shape/skew left for it to carry. */
.btn--primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-soft); }
/* Rechte variant zonder de speelse marketing-knop-stijl - voor plekken
   waar dat niet past (bv. de klant-facing offertepagina). Nu identiek
   aan de gewone knop qua vorm (er is geen skew meer om "recht" tegenover
   te zetten) - het bestaat nog zodat die pagina's hun eigen opmaak niet
   hoeven te wijzigen. */
.btn--straight { }
.btn--ghost { background: var(--white); color: var(--ink-700); box-shadow: var(--shadow-soft); }
.btn--ghost:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn--sm { padding: 11px 20px; font-size: 0.9rem; }
.btn--lg { padding: 20px 36px; font-size: 1.12rem; }
.btn--outline { background: var(--accent-yellow); color: var(--ink); box-shadow: var(--shadow-soft); }
.btn--outline:hover { background: var(--accent-yellow-dark); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn--block { display: flex; width: 100%; }

/* Homepage-only colour overrides (shape/rounding above now applies
   site-wide) - the "exclusive" monochrome look is still homepage-
   specific, everywhere else keeps the brand red/yellow above. */
.body--home .btn--primary {
  background: var(--ink);
  box-shadow: var(--shadow-btn);
}
.body--home .btn--primary:hover {
  background: #000000;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.body--home .btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-soft); }
.body--home .btn--ghost {
  background: var(--white);
  border: none;
  color: var(--ink-700);
  box-shadow: var(--shadow-soft);
}
.body--home .btn--ghost:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
/* The header's "Prijs berekenen" button stays the site's red brand
   colour on every page, including the homepage - the monochrome
   .body--home override above is for buttons inside the page content,
   not the persistent nav, so the header wouldn't otherwise be black on
   the homepage and red everywhere else. */
.body--home .site-header__nav .btn--primary,
.body--home .mobile-nav .btn--primary {
  background: var(--blue);
}
.body--home .site-header__nav .btn--primary:hover,
.body--home .mobile-nav .btn--primary:hover {
  background: var(--blue-dark);
}

/* ---------- USP-strip: smalle balk boven de header, alleen homepage ---------- */
.usp-strip { background: var(--ink); color: var(--white); }
.usp-strip__inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 28px;
  padding: 10px 24px;
  font-family: var(--font-display); letter-spacing: 0.01em; font-size: 0.86rem; font-weight: 600;
}
.usp-strip__item { display: flex; align-items: center; gap: 8px; }
.usp-strip__item svg { flex-shrink: 0; }
.usp-strip__euro { flex-shrink: 0; font-weight: 800; font-size: 1.05rem; line-height: 1; width: 18px; text-align: center; }
@media (max-width: 640px) {
  .usp-strip { display: none; }
}
/* On the homepage the header is fixed (not sticky, see below) so the
   strip can't just sit above it in normal flow the way it does on every
   other page - it's pinned to the very top instead, with the header's
   own fixed offset pushed down to clear it (see the min-width:641px
   block further down, matching the breakpoint where the strip is
   visible at all). */
.body--home .usp-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 41; }


/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 14px; z-index: 40; background: var(--white);
  width: calc(100% - 32px); max-width: var(--wrap-width); margin: 0 auto;
  /* Was a 3px hard border + the offset "block" shadow, which together read
     as a double outline once the header is sitting solid over content -
     border removed, shadow alone now carries the "floating bar" definition. */
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-header);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.hero-end-sentinel { height: 1px; }
/* On the homepage the header floats directly over the hero from the very
   start (fixed, not sticky - it never occupies its own layout space, so
   the hero's own content starts right underneath it) and stays fully
   blended in - no background, border, or shadow - until header.js marks
   it "is-stuck" once the hero has actually been scrolled past. Every
   other page keeps the header sticky and always visible, since there's
   no hero to blend into there. */
.body--home .site-header {
  position: fixed; top: 14px; left: 0; right: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
/* Above 640px the USP strip is visible and fixed above the header (see
   .body--home .usp-strip) - push the header's own fixed offset down by
   the strip's rendered height (~42px) so the two don't overlap. The
   hero's top padding gets the same bump, so the H1 still clears both. */
@media (min-width: 641px) {
  .body--home .site-header { top: 60px; }
  .body--home .hero { padding-top: 260px; }
}
.body--home .site-header:not(.is-stuck):not(.menu-open) {
  background: transparent; box-shadow: none;
}
/* Nav/hamburger/logo used to switch to their light (white) variants here,
   back when the hero behind the floating header was dark navy. Now that
   the hero is yellow, the default dark-ink styling already reads fine
   over it, so no override is needed for those - only the transparent
   header background above stays homepage-specific. */
.body--home .site-header:not(.is-stuck):not(.menu-open) .site-header__nav a:not(.btn):hover { color: var(--ink-500); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; }
.logo { display: flex; align-items: center; position: relative; }
.logo__img { height: 60px; width: auto; display: block; transition: height 0.28s ease; }
/* On the homepage the logo starts noticeably bigger than the header bar
   itself (it's allowed to overflow above/below, since nothing here
   clips it) - a deliberate "poking out" look - then shrinks down to a
   size that actually fits neatly once the header goes solid on scroll. */
.body--home .logo__img { height: 112px; }
.body--home .site-header.is-stuck .logo__img { height: 92px; }
/* Two logo files, not one recolored with CSS filters: the wordmark's
   white lettering vanishes on a light background, so the "dark" variant
   (same file, just the UNIT lettering recolored to ink) is used instead
   of a boxed backdrop. Both are tiny inline SVGs, so toggling which one
   is visible is instant - no flash, no JS image swap. The dark variant
   is now shown everywhere (hero background is yellow, not navy, so it
   stays readable even before the header goes solid). */
.logo__img--dark { display: block; }
.logo__img--light { display: none; }
.site-header__nav { display: flex; align-items: center; gap: 24px; }
.site-header__nav a:not(.btn) {
  position: relative;
  color: var(--ink-700); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.01em;
  padding-bottom: 4px; transition: color 0.15s ease;
}
.site-header__nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.site-header__nav a:not(.btn):hover::after { transform: scaleX(1); }
.site-header__nav a:not(.btn):hover { color: var(--blue); }
.site-header__nav-home { display: flex; align-items: center; gap: 6px; }
.site-header__nav-home span { display: inline; }
.mobile-nav__home { display: flex; align-items: center; gap: 8px; }

/* ---------- Hamburger-icoon + mobiel uitklap-menu ---------- */
.hamburger {
  display: none; /* alleen op mobiel, zie media query hieronder */
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: none; background: var(--ink-100);
  cursor: pointer; flex-shrink: 0; transition: background 0.15s ease;
}
.hamburger:hover { background: var(--ink-300); }
.hamburger__line {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink-700);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
/* Morpht naar een kruisje zodra het menu open is - subtiele, korte animatie. */
.hamburger.is-open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .site-header__inner { padding: 16px 15px 16px 12px; }
  .logo__img { height: 56px; }
  .body--home .logo__img { height: 98px; }
  .body--home .site-header.is-stuck .logo__img { height: 84px; }
  /* Volledige tekstlinks zouden hier overlappen/wrappen - de belangrijkste
     actie (Start de check) blijft, de rest staat ook in de footer. */
  .site-header__nav a:not(.btn) { display: none; }
  .site-header__nav { gap: 10px; }
  .hamburger { display: flex; }
}
@media (max-width: 420px) {
  .logo__img { height: 44px; }
  .body--home .logo__img { height: 72px; }
  .body--home .site-header.is-stuck .logo__img { height: 64px; }
  .site-header .btn--sm { padding: 9px 14px 9px 12px; font-size: 0.76rem; letter-spacing: 0; white-space: nowrap; }
  .hamburger { width: 36px; height: 36px; }
}

.mobile-nav {
  display: flex; flex-direction: column; gap: 2px; padding: 0 20px;
  max-height: 0; overflow: hidden; opacity: 0;
  background: var(--white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease;
}
.mobile-nav.is-open { max-height: 320px; opacity: 1; padding: 6px 20px 18px; }
.mobile-nav a {
  padding: 12px 6px; border-top: 1px solid var(--ink-100); color: var(--ink-500); font-weight: 600; font-size: 0.98rem;
}
.mobile-nav a:hover { color: var(--blue); }
@media (min-width: 1001px) {
  .mobile-nav { display: none; } /* desktop gebruikt de gewone tekstlinks in .site-header__nav */
}

/* ---------- Scroll-reveal (subtle fade-up on scroll into view) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay.is-visible { transition-delay: 0.12s; }
.hero {
  padding: 64px 0 110px;
  position: relative;
  overflow: hidden;
  /* Diagonal seam into the next section instead of a straight edge -
     the whole page reads as angled plates rather than stacked bars.
     No extra negative margin here: .usps already overlaps upward by
     40px on its own, which is exactly enough to meet this cut. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
  z-index: 1;
}
/* The header is fixed and floats over the hero on the homepage (see
   .body--home .site-header), so the hero needs its own top padding to
   push content clear of it instead of starting right underneath. */
/* padding-top bumped up from 175px - the eyebrow badge above the H1 used
   to provide its own breathing room (badge height + margin) before the
   header's clearance kicked in; now that it's gone, the hero itself needs
   to make up that space so the H1 doesn't sit too close to the header. */
.body--home .hero { padding-top: 190px; padding-bottom: 320px; }
/* Mobile: the header is much shorter here, so the same 190px used on
   desktop leaves an oversized gap above the H1 - trimmed down a bit. */
@media (max-width: 640px) {
  .body--home .hero { padding-top: 150px; }
}
.hero--soft {
  /* Transparent - the bubbly light-blue background on body (see above)
     shows straight through the hero. */
  background: none;
  position: relative;
}
/* Centered, stacked layout: heading + copy on top, configurator card
   directly beneath so it's visible without scrolling. */
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 44px; }

/* Hidden this round - the bubbly background on body now provides the
   ambient texture, so these flat washes would just double up on it. */
.hero__blob { display: none; }

/* Decorative floating photo circles - desktop only, purely visual. Scoped
   to .hero__configurator (not the whole hero) so they only ever appear
   behind the form card, never behind the heading/copy above it. */
.hero__bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bubble {
  position: absolute; overflow: hidden; border-radius: var(--radius-xl, 24px);
  /* Plain white border + soft shadow - calm and minimal, no colour glow. */
  box-shadow: var(--shadow-card, 0 10px 24px rgba(26, 26, 26, 0.18));
  border: 4px solid var(--white); animation: bubbleFloat 7s ease-in-out infinite;
}
.bubble img { width: 100%; height: 100%; object-fit: cover; }
.bubble--1 { top: -45px; left: -195px; width: 260px; height: 260px; animation-delay: 0s; transform: rotate(-4deg); }
.bubble--3 { bottom: -45px; right: -210px; width: 280px; height: 280px; animation-delay: 2.4s; animation-duration: 8s; transform: rotate(4deg); }
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-16px) rotate(-1deg); }
}
@media (max-width: 1400px) {
  .hero__bubbles { display: none; }
}
@media (min-width: 1401px) {
  /* Bubble--1 pokes up above the configurator card by design, but at this
     width it was reaching high enough to overlap the hero heading/lead
     text above it - give the card some extra clearance from that text. */
  .hero__configurator { margin-top: 50px; }
}
@media (max-width: 640px) {
  /* Bring back just one of the two bubble photos on mobile - was nearly
     invisible before (too small, too low opacity, barely peeking out from
     behind the card corner), so bigger, fully opaque, and offset further
     out so it's unmistakably there. Second pass: the sliver poking out was
     still only ~22px, easy to miss - now offset further and sized up so a
     clearly bigger piece of the photo is visible outside the card corner. */
  .hero__bubbles { display: block; }
  .bubble--3 { display: none; }
  .bubble--1 {
    top: -58px; left: -58px; width: 190px; height: 190px;
    opacity: 1; box-shadow: var(--shadow-card, 0 10px 24px rgba(26, 26, 26, 0.22)); animation: none;
  }
}

/* Same rounded "stamp" pill everywhere now (was a hard-cornered box with
   a 3px border on inner pages, out of step with the rounded/soft-shadow
   language the rest of the site moved to) - matches the homepage
   treatment below site-wide, so VRKI/Over ons/Contact/etc. no longer
   have a lone square element sitting above their headings. */
.eyebrow {
  display: inline-block; background: var(--ink); color: var(--white); font-weight: 700;
  font-size: 0.78rem; padding: 7px 16px; margin-bottom: 18px; letter-spacing: 0.05em;
  border: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); transform: rotate(-1.5deg);
}
/* Homepage keeps its own small flourish on top of the shared look above:
   monospace "case-file" font instead of the site-wide Inter, and a touch
   smaller/tighter. */
.body--home .eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.hi { color: var(--white); background: var(--red); padding: 0 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Homepage H1: heavier than the site-wide default so it reads as the
   biggest, boldest statement on the page, with the "scherpe prijzen"
   accent doing the opposite - a deliberately lighter weight so the two
   read as two different registers (shout vs. wink) instead of both
   shouting at the same volume. Uses the heaviest/lightest Inter cuts
   already loaded site-wide (900 / 600) - no extra font weight fetched. */
.body--home .hero h1 { font-weight: 900; color: var(--ink); }
/* Full monochrome: plain grey instead of colour, so the whole headline
   (h1 + accent) reads as pure black/white/grey - the accent's lighter
   font-weight is what separates it from the 900-weight headline. */
/* Same black as the rest of the headline now (was mid-grey) - the
   contrast with the 900-weight headline comes purely from weight now,
   pushed down to Inter's thinnest loaded cut (400) for as much contrast
   as possible without adding another font weight fetch. */
.body--home .hero h1 .hi {
  background: none;
  color: var(--ink);
  padding: 0;
  font-weight: 400;
}
.hero__lead { font-size: 0.98rem; max-width: 48ch; color: var(--ink-500); margin: 0 auto; line-height: 1.55; }
.hero__lead--problem { color: var(--ink-400); }
/* The hero is light again (see .hero--soft/bubbly body background above),
   so its heading/copy use the same dark-on-light defaults as the rest
   of the site. */
.hero h1 { color: var(--ink); font-size: clamp(2.15rem, 3.7vw, 2.9rem); max-width: 25ch; margin-left: auto; margin-right: auto; margin-bottom: 0.95em; overflow-wrap: break-word; }
@media (max-width: 480px) {
  /* The clamp() above bottoms out at a flat 2.6rem below ~900px, which
     doesn't shrink further for narrow phones - fine for short copy, but
     "Inbraakbeveiliging" is long enough to overflow the viewport at
     that size on phones under ~480px wide. Bumped up from 1.7rem - more
     presence, while still comfortably wrapping on narrow screens. */
  .hero h1 { font-size: 1.85rem; }
}
.hero .hero__lead { color: var(--ink-700); font-size: 1.08rem; max-width: 56ch; }
@media (max-width: 640px) {
  /* Op mobiel is er te weinig breedte om de bewuste regelbreuk hier nog
     natuurlijk te laten ogen - "Wij maken..." begon daardoor als een
     losse, wat vreemd geïsoleerde nieuwe regel. */
  .hero__lead-break { display: none; }
}
/* Mobile-only fallback for the usp-strip above the header (hidden on small
   screens) - shown only below the same breakpoint where the strip hides.
   hero__usps only ever appears inside the (now vivid blue) hero, so it
   gets light colors directly rather than a light-on-dark default. */
.hero__usps { display: flex; flex-direction: column; list-style: none; margin: 28px 0 0; padding: 0; align-items: center; gap: 18px; }
.hero__usps li { display: inline-flex; align-items: center; gap: 14px; font-size: 1.1rem; color: var(--white); font-weight: 700; }
.hero__usps-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm);
  color: var(--white); font-weight: 700; font-size: 0.82rem; flex-shrink: 0;
}
/* Now that the hero itself is red, a red-filled chip would vanish into
   it - so this one gets a white fill with a red check instead; the
   "blue" chip keeps the grey fill for the same reason blue would have
   vanished before. */
.hero__usps-chip--red { background: var(--white); color: var(--red); }
.hero__usps-chip--blue { background: var(--green); border: none; }
.hero__usps-chip--green { background: var(--green); }
.hero__trust { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.hero__trust img { height: 30px; width: auto; flex-shrink: 0; }
.hero__trust p { font-size: 0.8rem; margin: 0; max-width: 34ch; text-align: left; color: rgba(255, 255, 255, 0.75); }
.hero__text { max-width: 760px; }

/* Configurator card: right under the heading/copy, no scrolling required. */
.hero__configurator { position: relative; z-index: 3; width: 100%; max-width: 640px; }

.configurator {
  background: var(--white);
  color: var(--ink-700); /* reset text color here - without this, children without their own color (e.g. .extra-card, .result-card) would silently inherit an unwanted color */
  border-radius: var(--radius-xl);
  /* No colour border - the card's pop off the page comes from a soft,
     neutral elevation shadow instead, so it reads as "lifted" rather
     than "outlined" or "glowing". */
  border: none;
  padding: 40px;
  box-shadow: var(--shadow-pop);
  position: relative;
  z-index: 2; /* stack above .hero__bubbles (z-index: 1) within this same container */
  overflow: visible;
}
.configurator > * { position: relative; z-index: 1; }

/* Trust badge pinned to the bottom of the card - stays visible across every
   wizard step since it's a direct sibling of the .wizard-step elements. */
.configurator__trust {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ink-100);
}
.configurator__trust img { height: 44px; width: auto; flex-shrink: 0; }
.configurator__trust span { font-size: 1rem; font-weight: 700; color: var(--ink-700); text-align: left; }

/* Playful handwritten callout, outside the card, pointing at it with a
   curved arrow. Only shown where there's actual room beside the card. */
.configurator__callout {
  /* Iets verder naar links getrokken (was 100% + 6px) zodat de pijl-punt nu
     deels over de rand van de configurator-kaart heen valt i.p.v. er
     helemaal los van te staan. */
  position: absolute; top: -40px; left: calc(100% - 22px); z-index: 4;
  width: 240px; display: flex; flex-direction: row-reverse; align-items: flex-start;
  gap: 8px; text-align: left; transform: rotate(-3deg); pointer-events: none;
}
.configurator__callout-text {
  /* Accent-green sticker (was plain white/ink) so this callout pops as
     the one moment of colour near the hero, instead of blending in as
     just another white surface. */
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em;
  line-height: 1.25; color: var(--white); text-align: left;
  background: var(--accent-green); padding: 9px 13px; border: none;
  border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
}
.configurator__callout-arrow { color: var(--accent-green); flex-shrink: 0; margin-top: 10px; }
@media (max-width: 1300px) {
  .configurator__callout { display: none; }
}

/* Same message as .configurator__callout, but as a plain centered sticker
   above the card - shown only where the pointing-arrow version (which
   needs real room beside the card) is hidden. */
.configurator__callout-mobile {
  display: none;
  position: relative; z-index: 2; /* sit above .hero__bubbles (z-index: 1), which otherwise paints over this since it's absolutely positioned and this isn't */
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; font-size: 0.82rem; line-height: 1.3; color: var(--white);
  background: var(--accent-green); border: none; border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 9px 16px; text-align: center; max-width: 340px; margin: 0 auto 16px;
}
@media (max-width: 1300px) {
  .configurator__callout-mobile { display: block; }
}
.configurator__progress { height: 5px; background: var(--ink-100); border-radius: var(--radius-pill); margin-bottom: 28px; overflow: hidden; }
.configurator__progress-bar { height: 100%; width: 20%; background: var(--accent-green); transition: width 0.35s ease; }
.wizard-step__hint { color: var(--ink-400); margin-top: -6px; font-size: 0.92rem; }
.wizard-step__unknown-link {
  display: block; background: none; border: none; padding: 10px 0 0; margin: 0 0 4px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; color: var(--ink-500);
  text-decoration: underline; text-decoration-style: dotted; cursor: pointer;
  transition: color 0.12s ease, transform 0.1s ease;
}
.wizard-step__unknown-link:hover { color: var(--ink); }
.wizard-step__unknown-link:active { transform: scale(0.97); }
.wizard-step__unknown-link.is-selected { color: var(--ink); text-decoration-style: solid; }

@keyframes wizardPop {
  0% { opacity: 0; transform: translateY(6px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.wizard-step--pop { animation: wizardPop 0.28s ease; }

/* ---------- Large abstract icons ---------- */
.option-card__icon svg, .extra-card__icon svg { width: 40px; height: 40px; display: block; }
.option-card__icon, .extra-card__icon { color: var(--ink-400); flex-shrink: 0; transition: color 0.15s ease; }
.option-card.is-selected .option-card__icon { color: var(--ink); }
.extra-card:has(input[type="checkbox"]:checked) .extra-card__icon { color: var(--ink); }

.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
.card-grid--tight { grid-template-columns: repeat(3, 1fr); }
/* Risicoklasse-vraag: onder elkaar i.p.v. een grid - werkt beter voor 4
   korte, gelijkwaardige opties waar je bewust één voor één langs wilt. */
.card-grid--stacked { grid-template-columns: 1fr; gap: 10px; }
.option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-700);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
/* Hover/selected state now reads through a soft grey shadow ring
   instead of a coloured border - keeps the card's own edge neutral and
   lets elevation do the talking. */
.option-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ink-100), var(--shadow-soft); }
.option-card:active { transform: scale(0.96); transition-duration: 0.08s; }
.option-card.is-selected { background: var(--ink-100); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), var(--shadow-soft); animation: cardSelect 0.25s ease; }
.option-card--sm { font-size: 1rem; padding: 18px; white-space: nowrap; }
.option-card--sm .option-card__icon svg { width: 24px; height: 24px; }
/* Risicoklasse-knoppen: gecentreerde tekst (met of zonder icoon), i.p.v. de
   links uitgelijnde icoon+label-layout van pandtype-kaarten. */
.option-card--center { justify-content: center; text-align: center; }
.option-card__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Geen idee" staat nu als eerste, aparte kaart bovenaan (zie
   views/partials/configurator.ejs) - icoon boven de tekst i.p.v. ernaast,
   zodat 'm ook visueel als de uitzondering op de rij leest. */
.option-card--onbekend { flex-direction: column; gap: 6px; padding: 14px 16px; }
.option-card--onbekend .option-card__icon svg { width: 30px; height: 30px; color: var(--ink-400); }
.option-card--onbekend.is-selected .option-card__icon svg { color: var(--blue-dark); }
@keyframes cardSelect {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.slider-block, .stepper-block { margin-top: 28px; text-align: center; }
.slider-block input[type="range"] { width: 100%; accent-color: var(--blue); height: 6px; }
.slider-block__value, .stepper-block__value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--ink); margin-top: 16px; }
.stepper-block { display: flex; align-items: center; justify-content: center; gap: 22px; }
.stepper-btn {
  width: 52px; height: 52px; border-radius: 999px; border: 2px solid transparent; background: var(--white);
  font-size: 1.6rem; font-weight: 700; color: var(--ink); cursor: pointer; line-height: 1;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.stepper-btn:hover { transform: translateY(-2px) scale(1.05); background: var(--ink-100); box-shadow: 0 0 0 2px var(--ink-100), var(--shadow-card); }
.stepper-btn:active { transform: scale(0.88); background: var(--ink-100); transition-duration: 0.06s; }

.extras-grid { display: grid; gap: 12px; margin-top: 22px; }
.extra-card {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radius-md);
  border: 2px solid transparent; background: var(--paper); cursor: pointer; position: relative;
  transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.extra-card:hover { transform: translateY(-1px); }
.extra-card:active { transform: scale(0.985); transition-duration: 0.08s; }
.extra-card:has(input[type="checkbox"]:checked) { background: var(--ink-100); box-shadow: 0 0 0 2px var(--ink); }
.extra-card:has(input[type="checkbox"]:disabled) { cursor: default; opacity: 0.85; }
.extra-card__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.extra-card__title { font-weight: 700; font-size: 0.94rem; }
.extra-card__desc { font-size: 0.78rem; color: var(--ink-400); }
.extra-card__stepper { margin-left: 0; }
.extra-card .toggle-switch { margin-left: 0; }
.extra-card:has(input[type="checkbox"]:disabled) .qty-stepper__btn:disabled { opacity: 0.4; cursor: default; }

/* ---------- Toggle-switch (i.p.v. plain checkboxes) - modern, niet over-the-top:
   een pill-track met bewegende thumb, checkbox blijft functioneel/toetsenbord-
   bedienbaar maar visueel verborgen; de zichtbare track/thumb is een sibling
   die via de aangrenzende-sibling-selector de checked/disabled-status volgt. ---------- */
.toggle-switch { position: relative; display: inline-flex; align-items: center; width: 46px; height: 27px; flex-shrink: 0; margin-left: auto; cursor: pointer; transition: transform 0.1s ease; }
.toggle-switch:active { transform: scale(0.92); }
.toggle-switch input[type="checkbox"] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle-switch__track { position: absolute; inset: 0; border-radius: var(--radius-pill); border: 2px solid var(--ink); background: var(--ink-300); transition: background 0.2s ease; }
.toggle-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: var(--radius-pill);
  background: var(--white); border: 1.5px solid var(--ink); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-switch input:checked ~ .toggle-switch__track { background: var(--ink); }
.toggle-switch input:checked ~ .toggle-switch__track::after { transform: translateX(19px); }
.toggle-switch input:disabled ~ .toggle-switch__track { opacity: 0.55; }
.toggle-switch input:focus-visible ~ .toggle-switch__track { outline: 2px solid var(--blue-dark); outline-offset: 3px; }

.wizard-nav { display: flex; justify-content: space-between; margin-top: 30px; }
.wizard-nav--back-only { justify-content: flex-start; }
.wizard-nav--forward-only { justify-content: flex-end; margin-top: 16px; }

/* ---------- Result: minimal + light. Full breakdown lives in the emailed PDF. ---------- */
.wizard-step--result { text-align: center; }
.result-card {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.result-card__label { color: var(--ink-400); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.result-card h2#result-klasse-titel {
  margin-top: 6px; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-400); font-family: var(--font-body); display: inline-block;
  background: var(--paper); border-radius: var(--radius-pill); padding: 5px 14px;
}
.result-card__price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--blue); margin: 10px 0 0; }
.result-card__price-was { font-size: 1.1rem; color: var(--ink-400); text-decoration: line-through; margin: 8px 0 0; }
.result-card__deal-badge {
  display: inline-block; background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; font-size: 0.8rem;
  border-radius: var(--radius-pill); padding: 5px 14px; margin: 8px 0 0;
}
.result-card__jaarlijks { font-weight: 700; color: var(--ink-500); font-size: 0.95rem; margin-top: 2px; }

.result-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ink-100); }
.result-block__label { display: block; color: var(--ink-400); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.result-block--jaarlijks { text-align: left; }
.result-jaarlijks-list { list-style: none; padding: 0; margin: 6px 0 0; }
.result-jaarlijks-list li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.9rem; color: var(--ink-500); border-bottom: 1px solid var(--ink-100); }
.result-jaarlijks-list li:last-child { border-bottom: none; font-weight: 700; color: var(--ink); padding-top: 8px; }

.result-block--items { text-align: left; }
.result-items-list { list-style: none; padding: 0; margin: 6px 0 0; }
.result-items-list li { display: flex; gap: 8px; padding: 4px 0; font-size: 0.86rem; color: var(--ink-500); }
.result-items-list li span:first-child { font-weight: 700; color: var(--ink); min-width: 28px; }
.result-items-list li span:nth-child(2) { flex: 1; }
.result-card__note { color: var(--ink-500); font-size: 0.9rem; margin-top: 18px; }
/* Disclaimers voor "ruwe inschatting" (klasse 3/4) en "geen idee". */
.result-card__disclaimer {
  text-align: left; font-size: 0.85rem; color: var(--ink-500); background: var(--paper);
  border: 3px solid var(--ink); border-radius: var(--radius-md); padding: 12px 14px; margin-top: 16px;
}
.result-card__pdf-hint {
  display: inline-block; background: var(--yellow-soft); color: var(--ink); font-weight: 700; border: 2px solid var(--ink);
  font-size: 0.85rem; padding: 10px 16px; border-radius: var(--radius-md); margin-top: 14px;
}
/* Juridische/scope-toelichting: staat nu ingeklapt achter een kleine
   toggle i.p.v. altijd zichtbare, aandacht-vragende alinea's. */
.result-card__legal { margin-top: 18px; text-align: center; }
.result-card__legal-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: var(--ink-400); font-size: 0.8rem; font-weight: 700; padding: 6px 4px;
}
.result-card__legal-toggle:hover { color: var(--blue); }
.result-card__legal-body {
  color: var(--ink-400); font-size: 0.8rem; margin-top: 10px; max-width: 46ch;
  margin-left: auto; margin-right: auto; text-align: left; background: var(--paper);
  border-radius: var(--radius-md); padding: 14px 16px; border: 3px solid var(--ink);
}
.result-card__legal-body p { font-size: inherit; color: inherit; margin: 0 0 10px; }
.result-card__legal-body p:last-child { margin-bottom: 0; }
/* Nog gebruikt op de klant-facing offertepagina (offerte-klant.ejs), waar dit
   een andere, kortere toelichting toont dan de ingeklapte VRKI-tekst hierboven. */
.result-card__disclaimer { color: var(--ink-400); font-size: 0.8rem; margin-top: 18px; max-width: 46ch; margin-left: auto; margin-right: auto; }

/* "Niet van toepassing" option: visually distinct, full-width, secondary style */
.option-card--alt {
  width: 100%; justify-content: center; text-align: center; margin-top: 14px;
  border-style: dashed; background: transparent; color: var(--ink-400); font-size: 0.88rem;
}
.option-card--alt:hover { border-color: var(--ink-500); color: var(--ink-500); }
.option-card--alt.is-selected { border-style: solid; }

/* ---------- Tijdslot-kaarten: kies eerst een moment, pas dán een formulier ---------- */
.afspraak-gate { max-width: 560px; margin: 0 auto 22px; text-align: center; }
.afspraak-gate h3 { text-align: center; margin-bottom: 14px; }
.afspraak-gate__checkbox {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
  padding: 16px 20px; border: 3px solid var(--ink); border-radius: var(--radius-md);
  background: var(--paper); font-weight: 600; font-size: 0.95rem; color: var(--ink-700);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.afspraak-gate__checkbox:hover { border-color: var(--blue); }
.afspraak-gate__checkbox:active { transform: scale(0.99); }
.afspraak-gate__checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.afspraak-gate__box {
  flex-shrink: 0; width: 24px; height: 24px; border: 3px solid var(--ink); background: var(--white);
  display: flex; align-items: center; justify-content: center; transition: background 0.12s ease, border-color 0.12s ease;
}
.afspraak-gate__box::after {
  content: ""; width: 12px; height: 9px; opacity: 0; transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-left: 3px solid var(--white); border-bottom: 3px solid var(--white); transform-origin: center;
  rotate: -45deg;
}
.afspraak-gate__checkbox input:checked ~ .afspraak-gate__box { background: var(--blue); border-color: var(--blue); }
.afspraak-gate__checkbox input:checked ~ .afspraak-gate__box::after { opacity: 1; transform: scale(1) rotate(-45deg); }
.afspraak-gate__checkbox input:focus-visible ~ .afspraak-gate__box { box-shadow: 0 0 0 3px var(--blue-soft); }

.afspraak-form { margin: 0 auto; text-align: left; }
.afspraak-form__adres-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.afspraak-form__adres-hint { font-size: 0.78rem; color: var(--ink-400); margin: -6px 0 12px; }
.afspraak-form__adres-hint.is-error { color: var(--red-dark); }
/* Subtiele adres-preview: verschijnt i.p.v. bewerkbare straat/plaats-velden
   zodra de postcode-opzoeking lukt - houdt het formulier brief. Gewoon wit/
   transparant, geen kader - leest als een klein detail, geen extra invoerveld. */
.afspraak-form__adres-preview { font-size: 0.85rem; color: var(--ink-400); margin: -6px 0 12px; padding-left: 2px; }
.afspraak-form h3 { text-align: center; }
.afspraak-form__legend { text-align: center; font-size: 0.78rem; color: var(--ink-400); margin: -4px 0 14px; }
.afspraak-form__asterisk { color: var(--red); font-weight: 700; }
.afspraak-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.afspraak-form input, .afspraak-form textarea {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-sm); border: 3px solid var(--ink);
  font-family: var(--font-body); font-size: 0.95rem; background: var(--paper);
}
.afspraak-form input:focus, .afspraak-form textarea:focus { border-color: var(--blue); outline: none; }
.afspraak-form textarea { margin-bottom: 16px; resize: vertical; }
.afspraak-form button { width: 100%; }
.afspraak-form__status { text-align: center; color: var(--red-dark); font-size: 0.9rem; min-height: 1.2em; }
/* Verplichte velden: kleine rode asterisk rechtsboven in het veld i.p.v. een
   los label - past bij het placeholder-only ontwerp, blijft toch duidelijk. */
.field-required { position: relative; }
.field-required::after {
  content: "*"; position: absolute; top: 6px; right: 13px; color: var(--red); font-weight: 700;
  font-size: 0.95rem; pointer-events: none;
}

.afspraak-success { text-align: center; background: var(--green-soft); border: 3px solid var(--ink); padding: 30px; }
.afspraak-success h3 { color: var(--green-dark); }

/* Terug-knop onder de indicatie - zelfde patroon als de "← Terug"-knoppen
   in de andere stappen, i.p.v. een losse "opnieuw beginnen"-link. */
.link-terug { display: block; margin: 22px auto 0; width: fit-content; }

/* ---------- USPs (transparency / trust) ---------- */
/* Negative margin pulls this section up over the hero - increased so the
   hero's blue visibly extends down through about half the card height,
   instead of just a thin seam between the two sections. Hero's own
   bottom padding (see .hero) was increased to match, so there's enough
   blue behind this overlap for it to actually show. */
.usps { position: relative; z-index: 2; margin-top: -270px; }
.usps__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
/* Stretch (the grid default) would let each card's own height vary with
   its copy length, which also breaks the staggered stair-step offset
   below (a taller card 2 would visually swallow its own offset). Align
   to the top of each cell instead, combined with a fixed card height
   below, so all three cards are always the same size and the stagger
   reads as a clean staircase regardless of how much text each card has. */
@media (min-width: 981px) {
  .usps__inner { align-items: start; }
}
.usp-card {
  background: var(--white);
  border: none;
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: hidden;
  /* Plain neutral shadow, no colour tint - calm and minimal. */
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Fixed height + clamped copy only where the 3-column staircase actually
   applies - on mobile's single-column stack every card can just be as
   tall as its own text, no equalizing needed. */
@media (min-width: 981px) {
  .usp-card { height: 460px; }
  .usp-card p { -webkit-line-clamp: 5; }
}
.usp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.usp-card:hover .usp-card__image img { transform: scale(1.06); }

/* Image strip at the top of the card, edge-to-edge. */
.usp-card__image {
  height: 180px; overflow: hidden; position: relative; flex-shrink: 0;
}
.usp-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }

/* Plain white card, heading/copy in normal dark ink - a soft neutral
   shadow (see above) is the only depth cue, no colour anywhere. */
.usp-card h3 {
  margin: 22px 28px 0.5em; font-size: 1.4rem; line-height: 1.3;
  color: var(--ink);
}
/* Clamped to a fixed number of lines on desktop (see media query above) -
   with the card's own height fixed there too, this stops a long
   paragraph (card 1) from being the thing that forces every card to a
   different height; a short paragraph (card 2) just leaves a little
   empty space below it instead. */
.usp-card p {
  margin: 0 28px 28px; font-size: 1rem; color: var(--ink-500);
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
/* The staircase itself - each card sits a little lower than the one
   before it. Only above the breakpoint where they're actually a
   3-column row; stacked single-column on mobile/tablet shouldn't carry
   a growing top offset. */
@media (min-width: 981px) {
  .usp-card:nth-child(1) { margin-top: 0; }
  .usp-card:nth-child(2) { margin-top: 60px; }
  .usp-card:nth-child(3) { margin-top: 120px; }
}

/* ---------- Reviews (homepage) ---------- */
.testimonials__head { text-align: center; margin-bottom: 40px; }
.testimonials__head .eyebrow { display: inline-block; }
/* h2 has its own max-width cap (see base h1,h2,h3,h4 rules) with no auto
   margins by default, so without this it sits flush-left inside this
   centered wrapper instead of actually centering as a block. */
.testimonials__head h2 { margin-left: auto; margin-right: auto; }
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.testimonial-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-soft);
}
.testimonial-card__stars { color: var(--accent-yellow-dark); font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card__quote { font-size: 1.02rem; color: var(--ink-700); line-height: 1.55; margin-bottom: 18px; }
.testimonial-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.testimonial-card__name { font-weight: 700; color: var(--ink); }
.testimonial-card__source {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-400);
}
@media (max-width: 760px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ---------- Multi-stepper row (deuren/ramen/roldeuren) ---------- */
.stepper-row { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
/* Grid instead of flex space-between: a fixed-width second column means
   the +/- controls land in the same horizontal spot on every row
   regardless of label length ("Buitendeuren" vs "Ramen (begane
   grond)"), instead of each row's controls sitting wherever that row's
   own content happens to end. */
.stepper-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; text-align: left; width: 100%; }
.stepper-item__label { display: block; font-size: 1.05rem; color: var(--ink-700); font-weight: 700; margin-bottom: 0; text-align: left; }
.stepper-item .stepper-block { margin-top: 0; justify-self: end; }
.stepper-item .stepper-block__value { font-size: 1.9rem; margin-top: 0; }

/* ---------- Info bubble (click-to-reveal, works on mobile unlike title tooltips) ---------- */
.info-bubble {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 999px; background: var(--ink-400); color: var(--white); border: none; font-size: 0.72rem;
  font-weight: 700; font-style: italic; font-family: Georgia, serif; cursor: pointer; margin-left: 6px; vertical-align: middle;
  transition: background 0.15s ease, transform 0.1s ease;
}
.info-bubble:hover, .info-bubble.is-active { background: var(--ink); }
.info-bubble:active { transform: scale(0.85); }
.info-bubble__text {
  grid-column: 1 / -1; background: var(--paper); border: none; border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 0.82rem; color: var(--ink-700); margin: 4px 0 0;
}
.info-bubble__text a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.info-bubble__text a:hover { color: var(--ink-700); }
.local {
  /* Breedte: 48px smaller dan --wrap-width, zodat de zichtbare rand van dit
     donkere blok precies uitlijnt met de inhoud van de secties erboven/-onder
     (die zelf al 24px padding aan weerszijden hebben via .wrap) - hiervoor
     leek dit blok net iets breder dan de rest.
     Tint was near-black - now a deep navy so the dark band still reads
     as part of the blue brand instead of a neutral grey panel.
     Was corner-cut with clip-path - dropped, since clip-path cuts the
     border off along that diagonal instead of following it. Plain
     rectangle + a real box-shadow bevel instead (clip-path silently
     discards an element's own box-shadow). */
  background: linear-gradient(rgba(13, 27, 46, 0.78), rgba(13, 27, 46, 0.88)), url("/images/regio-gracht-avond.jpg");
  background-size: cover;
  background-position: center;
  color: var(--white);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-card);
  margin: 8px auto 40px;
  max-width: calc(var(--wrap-width) - 48px);
}
.local .wrap { padding-left: 48px; padding-right: 48px; }
.local h2 { color: var(--white); max-width: 22ch; }
.local__lead { max-width: 62ch; color: rgba(255,255,255,0.72); font-size: 1.02rem; }

/* ---------- Parent-company trust band (foto + twee keurmerken) ---------- */
.parent-band__inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
/* Text-left / image-right variant - same grid, mirrored column widths so
   the media column keeps its narrower proportion regardless of which
   side it's on. */
.parent-band__inner--reverse { grid-template-columns: 1.15fr 0.85fr; }
.parent-band__media { border-radius: var(--radius-xl); overflow: hidden; border: none; box-shadow: var(--shadow-card); }
.parent-band__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.parent-band__text { min-width: 0; }
.parent-band__subheading { font-size: 1.15rem; margin-top: 1.1em; margin-bottom: 0.5em; }
.parent-band__badges { display: flex; align-items: center; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.parent-band__cta { margin-top: 36px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* Now that "Zo werkt het" / "Waar moet je op letten" have moved off the
   homepage, this is the last thing before the footer - a full-width
   top divider makes that read as a deliberate close rather than an
   abrupt stop. */
.parent-band__cta--pagend { margin-top: 48px; padding-top: 36px; border-top: 2px solid var(--ink-100); }
.parent-band__badges img { height: 64px; width: auto; }
.parent-band__badges img.parent-band__badge--veb { height: 46px; }
@media (max-width: 900px) {
  .parent-band__inner { grid-template-columns: 1fr; }
  .parent-band__media img { aspect-ratio: 16/9; }
}

/* ---------- Red teaming teaser (homepage) ---------- */
.redteam-teaser { background: var(--red); color: var(--white); margin-top: 40px; }
.redteam-teaser__inner { max-width: 74ch; }
.redteam-teaser h2 { color: var(--white); font-size: 1.8rem; margin-bottom: 0.5em; }
.redteam-teaser p { color: rgba(255, 255, 255, 0.9); font-size: 1.02rem; }
.redteam-teaser .btn { margin-top: 8px; }
.eyebrow--onred { background: rgba(255,255,255,0.14); color: var(--white); border: 1px solid rgba(255,255,255,0.35); }

/* ---------- "Waar moet je op letten" - 4 kernpunten ---------- */
.section__lead { max-width: 62ch; font-size: 1.02rem; margin-bottom: 8px; }
.letten-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 32px 0 36px; }
.letten-card { background: var(--white); border-radius: var(--radius-md); padding: 26px 22px; border: none; box-shadow: var(--shadow-soft); }
.letten-card__num {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--radius-sm); background: var(--blue); color: var(--white); font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem; margin-bottom: 14px;
}
/* Rouleert blauw/geel/groen/blauw per kaart - speels i.p.v. vier identieke cirkels. */
.letten-grid .letten-card:nth-child(2) .letten-card__num { background: var(--yellow); color: var(--ink); }
.letten-grid .letten-card:nth-child(3) .letten-card__num { background: var(--green); }
.letten-grid .letten-card:nth-child(4) .letten-card__num { background: var(--red); }
.letten-card h3 { font-size: 1.12rem; }
.letten-card p { font-size: 0.96rem; margin-bottom: 0; }
@media (max-width: 980px) {
  .letten-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .letten-grid { grid-template-columns: 1fr; }
}

.eyebrow--dark { background: rgba(255,255,255,0.1); color: var(--white); border: 1px solid rgba(255,255,255,0.18); }

/* ---------- Red teaming (over-ons, full section) ---------- */
.redteam { background: var(--red); color: var(--white); }
.redteam h1, .redteam h2 { color: var(--white); }
.redteam h3 { color: var(--white); }
.redteam .letten-card { background: rgba(255,255,255,0.94); }
.redteam .letten-card h3 { color: var(--ink-700); }
.redteam .letten-card p { color: var(--ink-500); }
.redteam__benefits { max-width: 74ch; margin: 36px 0 30px; }
.redteam__benefits h3 { margin-bottom: 0.5em; }
.redteam__benefits p { color: rgba(255,255,255,0.9); }

/* ---------- Keurmerken uitgelegd (over-ons) ---------- */
.keurmerk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.keurmerk-card { display: flex; gap: 20px; align-items: flex-start; background: var(--white); border: none; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-soft); }
.keurmerk-card img { height: 56px; width: auto; flex-shrink: 0; }
.keurmerk-card h3 { font-size: 1.1rem; margin-bottom: 0.4em; }
.keurmerk-card p { font-size: 0.92rem; margin-bottom: 0; }
@media (max-width: 760px) {
  .keurmerk-grid { grid-template-columns: 1fr; }
  .keurmerk-card { flex-direction: column; }
}
.local-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0 36px; }
.local-card { background: rgba(255,255,255,0.08); border: 3px solid rgba(255,255,255,0.5); padding: 26px; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.local-card:hover { transform: translate(-3px, -3px); background: rgba(255,255,255,0.14); border-color: var(--yellow); box-shadow: -3px -3px 0 var(--white), 6px 6px 0 var(--ink); }
.local-card__icon { display: inline-block; margin-bottom: 12px; }
.local-card__icon svg { width: 34px; height: 34px; }
.local-grid .local-card:nth-child(1) .local-card__icon { color: var(--yellow); }
.local-grid .local-card:nth-child(2) .local-card__icon { color: var(--blue); }
.local-grid .local-card:nth-child(3) .local-card__icon { color: var(--green); }
.local-card h3 { color: var(--white); }
.local-card p { color: rgba(255,255,255,0.65); margin: 0; font-size: 0.9rem; }
.local .btn--ghost { background: var(--white); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.step-card { background: var(--white); border: none; border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-soft); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.step-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-card); }
.step-card__num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--blue); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 14px;
}
/* Rouleert blauw/geel/groen per stap - zelfde speelse patroon als de
   .letten-card__num-chips en de USP-chips in de hero. */
.step-card:nth-child(2) .step-card__num { background: var(--yellow); color: var(--ink); }
.step-card:nth-child(3) .step-card__num { background: var(--green); }

/* ---------- Products strip ---------- */
.products-strip__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.products-strip__inner img { border-radius: 0; border: 4px solid var(--ink); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-soft); }
.products-strip__inner img:nth-child(2) { transform: rotate(-1deg); }
.products-strip__inner img:nth-child(3) { transform: rotate(1deg); }

/* ---------- Footer ---------- */
.site-footer {
  /* Echoes the hero's deep navy background and diagonal edge, so the
     page still reads as bookended by matching hero/footer treatment -
     red stays reserved for the link-hover accent below. */
  background: linear-gradient(155deg, #2c4a6e 0%, #1b3350 45%, var(--blue-deep) 100%);
  color: var(--white);
  margin-top: 40px;
  clip-path: polygon(0 46px, 100% 0, 100% 100%, 0 100%);
  padding-top: 46px;
}
.site-footer__inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; padding: 56px 24px 32px; }
.site-footer__logo { height: 108px; width: auto; margin-bottom: 18px; display: inline-block; }
.site-footer__brand p { color: var(--white); }
.site-footer__col h4 { color: var(--white); margin-bottom: 16px; }
.site-footer__col p { margin: 0 0 10px; color: var(--white); }
.site-footer__col a { color: var(--white); }
.site-footer__col a:hover { color: var(--red); }
/* Nav + contact columns read to the right, distinct from the left-aligned brand column. */
.site-footer__col { text-align: right; }
/* Quality-mark logos, now sitting under the tagline in the brand column
   rather than in their own right-hand column. */
.site-footer__keurmerk { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-top: 18px; }
.site-footer__veb { height: 46px; width: auto; }
.site-footer__kb { height: 46px; width: auto; }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.3); padding: 18px 24px; font-size: 0.78rem; color: var(--white);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.site-footer__bottom p { color: var(--white); margin: 0; font-size: 0.78rem; }
/* Small, subdued legal links - deliberately understated compared to the
   main footer navigation above. */
.site-footer__legal { display: flex; gap: 18px; }
.site-footer__legal a { color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; text-decoration: underline; }
.site-footer__legal a:hover { color: var(--white); }

/* ---------- Legal ---------- */
.legal__inner { max-width: 720px; }

/* ---------- New pages: about, service area, contact ---------- */
.page-hero { padding-bottom: 24px; }
/* Contact page: the hero here is just a short one-line lead with no
   image/CTA under it, so the usual 24px + the next section's full
   100px top padding left an oversized gap before the form. Tightened
   to close to zero here specifically. */
.page-hero--compact { padding-bottom: 0; }
.page-hero h1 { font-size: clamp(1.8rem, 3.1vw, 2.4rem); }
.page-hero__lead { font-size: 1.05rem; max-width: 56ch; }

/* Top band on inner pages (VRKI, Over ons) - now echoes the homepage's
   bubbly light-blue background (same bubble pattern, same var(--bubbly-
   bg) base colour) instead of its own separate colour, so the two pages
   read as one consistent design. Pulled up with a negative margin
   (compensated by extra padding-top) so it starts at y=0 and runs behind
   the usp-strip and header rather than only starting below them - the
   header's own z-index (40) keeps it visually on top where the two
   overlap. Bottom edge uses the same diagonal clip as before. */
.page-hero--blue {
  background-color: var(--bubbly-bg);
  background-image:
    radial-gradient(circle 70px at 10% 15%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(circle 46px at 7% 11%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(circle 130px at 88% 8%, rgba(191, 227, 253, 0.75), transparent 100%),
    radial-gradient(circle 55px at 92% 26%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(circle 95px at 18% 68%, rgba(191, 227, 253, 0.65), transparent 100%),
    radial-gradient(circle 40px at 78% 62%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(circle 35px at 42% 38%, rgba(191, 227, 253, 0.55), transparent 100%);
  padding-bottom: 70px;
  position: relative;
  z-index: 1;
  margin-top: -98px;
  padding-top: 148px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
}
.page-hero--blue h1 { color: var(--ink); }
.page-hero--blue .page-hero__lead { color: var(--ink-700); }
.page-hero--blue .two-col__media { border-color: var(--ink); }
/* .page-hero--blue's own padding-bottom (70px) otherwise wins over
   .page-hero--compact's (0) since it's declared later - this combined
   selector has higher specificity so contact's compact hero (short
   one-line lead, no image/CTA under it) stays tight above the form. */
.page-hero--compact.page-hero--blue { padding-bottom: 24px; }
@media (min-width: 641px) {
  /* Above 640px the usp-strip is also visible above the header, so the
     band needs to reach further up to actually start at the true top. */
  .page-hero--blue { margin-top: -140px; padding-top: 190px; }
}

/* ---------- Werkgebied: provinciekaart ---------- */
.werkgebied-kaart-block { background: var(--white); border: 3px solid var(--ink); padding: 24px; box-shadow: var(--shadow-soft); display: flex; justify-content: center; }
.werkgebied-kaart { max-width: 420px; width: 100%; height: auto; }

/* ---------- Local-cards met foto (werkgebied) ---------- */
.local-card--photo { overflow: hidden; padding-top: 0; }
.local-card__photo { width: calc(100% + 52px); margin: 0 -26px 16px; height: 140px; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.local-card--light.local-card--photo { padding: 0 26px 26px; }
.werkgebied__banner { width: 100%; border: 4px solid var(--ink); box-shadow: var(--shadow-soft); margin-top: 32px; object-fit: cover; max-height: 220px; }

.two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.two-col--reverse { grid-template-columns: 0.9fr 1.1fr; }
.two-col__media img { border-radius: var(--radius-xl); border: none; box-shadow: var(--shadow-card); object-fit: cover; aspect-ratio: 4/3; width: 100%; }
/* Text-only two-col sections (no media column, e.g. VRKI's "In gewone
   taal" / "Waarom is dit relevant" pair) - on wide desktop screens the
   two text columns otherwise stretch paragraphs almost edge-to-edge
   against each other with no breathing room. Cap each column's own
   paragraph width, desktop only, so lines stay a comfortable reading
   length even inside a wide grid column. */
@media (min-width: 981px) {
  .two-col--text p { max-width: 46ch; }
}

.trust-strip { display: flex; align-items: center; gap: 18px; background: var(--white); border: none; border-radius: var(--radius-lg); padding: 22px 28px; box-shadow: var(--shadow-soft); }
.trust-strip img { height: 40px; width: auto; filter: invert(1); flex-shrink: 0; }
.trust-strip p { margin: 0; color: var(--ink-500); font-size: 0.92rem; }
/* Dual-badge variant (VEB + Keurmerk Beveiliging naast elkaar) - de tweede
   badge heeft al eigen kleur (blauw/wit), dus geen invert-filter daarop. */
.trust-strip--dual { flex-wrap: wrap; }
.trust-strip__badges { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.trust-strip__badges img { filter: none; height: 48px; }
.trust-strip__source { color: var(--ink-400); font-size: 0.85em; }

/* ---------- Drie pijlers (over-ons) ---------- */
.pijlers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pijler-card { background: var(--white); border-radius: var(--radius-md); padding: 28px 24px; border: 3px solid var(--ink); box-shadow: var(--shadow-soft); }
.pijler-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px;
  border-radius: var(--radius-sm); color: var(--white); margin-bottom: 16px;
}
.pijler-card__icon svg { width: 30px; height: 30px; }
.pijlers-grid .pijler-card:nth-child(1) .pijler-card__icon { background: var(--blue); }
.pijlers-grid .pijler-card:nth-child(2) .pijler-card__icon { background: var(--yellow); color: var(--ink); }
.pijlers-grid .pijler-card:nth-child(3) .pijler-card__icon { background: var(--green); }
.pijler-card h3 { font-size: 1.14rem; }
.pijler-card p { font-size: 0.96rem; margin-bottom: 0; }

.cta-band {
  background: #1b3350; border: none; border-radius: var(--radius-xl); margin: 8px auto 60px; max-width: var(--wrap-width); color: var(--white);
  box-shadow: var(--shadow-card);
}
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-left: 48px; padding-right: 48px; }
.cta-band h2 { color: var(--white); margin-bottom: 4px; }
.cta-band p { color: rgba(255,255,255,0.85); margin: 0; }
.cta-band .btn--primary { color: var(--white); }

.local-grid--light .local-card--light {
  background: var(--white); border: 3px solid var(--ink); box-shadow: var(--shadow-soft);
}
.local-card--light:hover { background: var(--white); box-shadow: var(--shadow-card); }
.local-card--light h3 { color: var(--ink); }
.local-card--light p { color: var(--ink-500); }
.local-card--light .local-card__icon { color: var(--blue); }
.werkgebied__note { margin-top: 12px; color: var(--ink-400); font-size: 0.92rem; }
.werkgebied__note a { color: var(--blue); font-weight: 700; }

.contact-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: start; }
/* Contact page now uses the same lifted white "card" language as the
   homepage's configurator (.configurator) - rounded corners, no border,
   soft elevation shadow - instead of sitting directly on the page. */
.contact-form-card {
  background: var(--white); border: none; border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-card);
}
.contact-form textarea { width: 100%; padding: 12px 16px; border-radius: var(--radius-sm); border: 3px solid var(--ink); background: var(--paper); font-family: var(--font-body); font-size: 0.95rem; margin-bottom: 12px; resize: vertical; }
.contact-form input { margin-bottom: 12px; }
/* Now that the form sits inside a white .contact-form-card, fields go
   back to the shared off-white "paper" tone (like every other form on
   the site) instead of white-on-white with no contrast against the card. */
.contact-form input, .contact-form textarea { background: var(--paper); }
.contact-info { background: var(--white); border: none; border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-soft); }
.contact-info a { color: var(--blue); font-weight: 700; }
@media (max-width: 640px) {
  .contact-form-card { padding: 28px 24px; }
}

/* ---------- FAQ accordion (native <details>, geen JS nodig) ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
/* Op over-ons.ejs staat de FAQ-lijst onder een gecentreerde kop
   (.testimonials__head) - de lijst zelf mist daar dan zonder dit een
   center-margin en hangt links, terwijl 'ie op de losse FAQ-pagina prima
   links kan blijven staan (vandaar scoped i.p.v. een globale wijziging). */
.over-ons-faq .faq-list { margin: 0 auto; }
.faq-item { background: var(--white); border: none; border-radius: var(--radius-md); padding: 4px 24px; box-shadow: var(--shadow-soft); transition: transform 0.1s ease, box-shadow 0.15s ease; }
.faq-item:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-card); }
.faq-item summary {
  cursor: pointer; padding: 18px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary:active { transform: scale(0.99); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  /* Same "+" glyph always, rotated 45deg when open instead of swapping
     to "-" - a glyph swap can't transition, a rotation can, so this is
     what actually makes the marker feel snappy instead of just flipping. */
  content: "+"; flex-shrink: 0; font-size: 1.4rem; font-weight: 400; color: var(--blue);
  display: inline-block; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 0 20px; overflow: hidden; transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item__body p:last-child { margin-bottom: 0; }
.faq-item__source { color: var(--ink-400); font-size: 0.88em; }
@keyframes faqOpen {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .steps-grid { grid-template-columns: 1fr; }
  .card-grid, .card-grid--tight { grid-template-columns: 1fr; }
  .afspraak-form__grid { grid-template-columns: 1fr; }
  .afspraak-form__adres-row { grid-template-columns: 1fr; }
  .tijdslot-grid { grid-template-columns: 1fr; }
  .products-strip__inner { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__keurmerk { justify-content: flex-start; }
  .site-footer__col { text-align: left; }
  .configurator { padding: 24px; }
  .local-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .two-col--reverse { grid-template-columns: 1fr; }
  .two-col__media { order: -1; }
  .pijlers-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .cta-band__inner { justify-content: flex-start; padding-left: 24px; padding-right: 24px; }
  .usps__inner { grid-template-columns: 1fr; }
  .stepper-row { flex-direction: column; align-items: center; }
  .local .wrap { padding-left: 28px; padding-right: 28px; }
}
/* Narrower phones specifically - the configurator card's own content
   (headings, hint text, and especially the back/next nav buttons)
   needs more room relative to the card's width than the 980px tablet
   breakpoint above accounts for. Without this, the arrow character in
   "Volgende →" could wrap onto its own line, and some headings/labels
   ran a touch too big for the available width. */
@media (max-width: 640px) {
  .configurator { padding: 22px 16px; }
  .configurator h2 { font-size: 1.42rem; }
  .wizard-step__hint { font-size: 0.85rem; }
  .wizard-nav { gap: 10px; }
  .wizard-nav .btn { padding: 13px 16px; font-size: 0.88rem; gap: 5px; }
  .option-card { padding: 13px; font-size: 0.88rem; gap: 10px; }
  .option-card--sm { font-size: 0.92rem; padding: 15px; }
  .option-card__icon svg { width: 32px; height: 32px; }
  .stepper-item__label { font-size: 0.96rem; }
  .configurator__trust span { font-size: 0.88rem; }
  .configurator__trust img { height: 36px; }
  .stepper-row { gap: 14px; }
  .stepper-item { gap: 10px; }
  .stepper-item__label { font-size: 0.92rem; }
  .stepper-item .stepper-block { gap: 12px; }
  .stepper-item .stepper-block__value { font-size: 1.5rem; min-width: 22px; }
  .stepper-item .stepper-btn { width: 40px; height: 40px; font-size: 1.25rem; }
  .result-card { padding: 22px 18px; }
  .result-jaarlijks-list li { font-size: 0.85rem; padding: 4px 0; }

  /* Extra-kaart met een aantal-stepper (Camera's) had op smalle schermen
     geen ruimte voor icoon + tekst + stepper + toggle allemaal op één rij -
     dat duwde de rand van de kaart uit beeld. Nu mag de stepper/toggle naar
     een tweede regel wrappen i.p.v. geforceerd op één regel te blijven. */
  .extra-card { flex-wrap: wrap; row-gap: 10px; }
  .extra-card__icon svg { width: 32px; height: 32px; }
  .extra-card__stepper { margin-left: auto; }

  /* Stepper zelf verticaal (+ boven, aantal in het midden, - onder) i.p.v.
     horizontaal - dat scheelt aanzienlijk breedte, precies waar het op
     smalle schermen om ging. */
  .extra-card__stepper {
    flex-direction: column; gap: 4px;
  }
  .extra-card__stepper .qty-stepper__btn:first-child { order: 3; }
  .extra-card__stepper .qty-stepper__value { order: 2; }
  .extra-card__stepper .qty-stepper__btn:last-child { order: 1; }
}

/* ============================================================ */
/* Beheerportaal + login + klant-facing offertepagina            */
/* ============================================================ */

.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--ink); padding: 24px;
}
.login-card {
  background: var(--white); border: 4px solid var(--ink); box-shadow: var(--shadow-strong);
  padding: 40px 36px; width: 100%; max-width: 380px; text-align: center;
}
.login-card__logo { height: 76px; margin-bottom: 20px; display: inline-block; }
.login-card__label { display: block; font-size: 0.85rem; color: var(--ink-400); font-weight: 600; margin-bottom: 24px; }
.login-form { text-align: left; display: flex; flex-direction: column; gap: 14px; }
/* Cloudflare Turnstile widget - added to every public-facing form
   (contact, offerte-code, login, the quote wizard's afspraak-form).
   Its own iframe already has sensible internal sizing; this just makes
   sure it doesn't crowd whatever sits above/below it in forms that
   don't already use a flex `gap`. */
.cf-turnstile { margin: 4px 0 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink-500); }
.field input {
  padding: 12px 14px; border-radius: var(--radius-sm); border: 3px solid var(--ink);
  font-family: var(--font-body); font-size: 1rem;
}
.field input:focus { border-color: var(--blue); outline: none; }
.form-error {
  background: var(--red-soft); color: var(--red-dark); padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600; margin-bottom: 4px; text-align: left;
}

.portal-body { background: var(--paper); font-family: var(--font-body); }
.portal-header { background: var(--ink); }
.portal-header__inner {
  max-width: 1440px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; position: relative;
}
/* Groter logo, verticaal gecentreerd in de header-rij (symmetrische
   negative margin top/bottom houdt de header zelf even hoog, maar laat het
   logo gelijkmatig aan boven- én onderkant net buiten de rij uitsteken). */
.portal-header__logo { height: 72px; margin: -16px 0; display: block; position: relative; z-index: 2; }
.portal-nav { display: flex; align-items: center; gap: 22px; }
.portal-nav a {
  color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.9rem; text-decoration: none;
  padding: 8px 16px; border-radius: var(--radius-pill); transition: background 0.15s ease, color 0.15s ease;
}
.portal-nav a:hover { color: var(--white); background: rgba(255,255,255,0.1); }
.portal-nav__user { color: rgba(255,255,255,0.55); font-size: 0.85rem; }

/* Volledige breedte gebruiken i.p.v. de smalle marketing-wrap-width. */
.portal-main { max-width: 1440px; margin: 0 auto; padding: 32px 32px 72px; }
.portal-main--voorstel { max-width: 1440px; }
.portal-loading { color: var(--ink-400); padding: 40px 0; text-align: center; }

/* "+ Nieuw voorstel"-knop en het bijbehorende (uitklapbare) formulier,
   bovenaan het dashboard - zie public/js/portal.js. */
.portal-nieuw-voorstel { margin-bottom: 24px; }
.portal-nieuw-voorstel__form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px;
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius-lg, 14px);
  padding: 20px; margin-top: 14px;
}
.portal-nieuw-voorstel__hint { grid-column: 1 / -1; font-size: 0.8rem; color: var(--ink-400); margin: 0; }
.portal-nieuw-voorstel__form button[type="submit"] { grid-column: 1 / -1; justify-self: start; }

.portal-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.portal-filter {
  padding: 10px 20px; border-radius: var(--radius-pill); border: 3px solid var(--ink);
  background: var(--white); color: var(--ink-500); font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.portal-filter:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.portal-filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }

.portal-voorstellen-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.portal-voorstel-card {
  position: relative; background: var(--white); border: 3px solid var(--ink); box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.portal-voorstel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.portal-voorstel-card__link {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; padding: 20px;
}
.portal-voorstel-card__delete {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: var(--ink-100); color: var(--ink-400); font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2;
  transition: background 0.15s ease, color 0.15s ease;
}
.portal-voorstel-card__delete:hover { background: var(--blue); color: var(--white); }

.voorstel-verwijder-btn { background: var(--white); color: var(--blue); border: 2px solid var(--blue); box-shadow: none; }
.voorstel-verwijder-btn:hover { background: var(--blue); color: var(--white); transform: none; }
.portal-voorstel-card__top { display: flex; justify-content: space-between; align-items: center; }
.portal-voorstel-card__id { font-size: 0.8rem; color: var(--ink-400); font-weight: 700; }
.portal-voorstel-card__naam { font-size: 1.05rem; }
.portal-voorstel-card__meta { font-size: 0.85rem; color: var(--ink-400); }
.portal-voorstel-card__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 0.9rem; }
.portal-voorstel-card__datum { font-size: 0.78rem; color: var(--ink-400); align-self: flex-end; }

.portal-status-badge {
  padding: 5px 14px; border-radius: var(--radius-pill); font-size: 0.76rem; font-weight: 700;
  background: var(--ink-100); color: var(--ink-500);
}
.portal-status-badge--nieuw { background: #e6edff; color: #2f5fd0; }
.portal-status-badge--in-behandeling { background: #fff1de; color: #b8631a; }
.portal-status-badge--verzonden { background: #e5f0ff; color: #1868c9; }
.portal-status-badge--geaccepteerd { background: #e3f7ea; color: #1f9d5c; }
.portal-status-badge--afgewezen { background: var(--red-soft); color: var(--red-dark); }

/* Aparte badge-kleuren voor de afspraakstatus (los van de voorstel-status) */
.afspraak-status-badge--aangevraagd { background: #fff1de; color: #b8631a; }
.afspraak-status-badge--bevestigd { background: #e3f7ea; color: #1f9d5c; }
.afspraak-status-badge--voorstel_gedaan { background: var(--blue-soft); color: var(--blue-dark); }

.voorstel-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 28px;
}
.voorstel-header h1 { font-size: 1.7rem; margin: 0 0 4px; }
.voorstel-header__meta { font-size: 0.9rem; color: var(--ink-400); }
.voorstel-status-select {
  padding: 12px 18px; border-radius: var(--radius-pill); border: 3px solid var(--ink);
  font-weight: 600; font-size: 0.9rem; background: var(--white); cursor: pointer;
}

.voorstel-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.voorstel-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.voorstel-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-soft); margin-bottom: 18px;
  min-width: 0; /* voorkomt dat brede inhoud (tabellen, dropdowns) de grid-kolom breder duwt dan zijn 1fr-aandeel */
}
.voorstel-card h2 { font-size: 1.05rem; margin: 0 0 16px; }
.voorstel-card .btn { margin-bottom: 12px; }
.voorstel-card .btn:last-child { margin-bottom: 0; }
.voorstel-side .voorstel-card { margin-bottom: 0; }

/* Portal-buttons: iets kleiner dan de rest van de site, verder identiek
   aan het (nu al overal rechte, zachte-schaduw) standaard-knop-uiterlijk
   - een aparte "recht" variant is hier niet meer nodig sinds de gewone
   knop zelf al recht is. */
.portal-body .btn { font-size: 0.88rem; padding: 12px 20px; letter-spacing: 0; }
.portal-body .btn--sm { padding: 9px 16px; font-size: 0.82rem; }
/* De grijze .btn--outline-variant (--yellow is intern een neutraal grijs,
   zie de tokens-toelichting boven in dit bestand) leest in het portaal
   te donker/zwaar - hier dus wit, net als .btn--ghost. */
.portal-body .btn--outline { color: var(--ink); background: var(--white); }
.portal-body .btn--outline:hover { background: var(--ink-100); }

/* ---------- Klanten/prospects (CRM) -------------------------------- */

.portal-klanten-title { font-size: 1.4rem; margin: 0; }
.portal-klanten-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.portal-klanten-top__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.portal-klanten-hint { font-size: 0.85rem; color: var(--ink-400); min-height: 1.2em; margin: 0 0 18px; }

.portal-klanten-import {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 520px;
}
.portal-klanten-import__hint { font-size: 0.78rem; color: var(--ink-400); margin: 0; line-height: 1.5; }

.portal-klanten-zoek { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0 18px; }
.portal-klanten-zoek input[type="search"] {
  flex: 1; min-width: 240px; max-width: 420px; padding: 10px 14px; border: 1px solid var(--ink-200);
  border-radius: 10px; font-size: 0.9rem; font-family: var(--font-body);
}
.portal-klanten-zoek input[type="search"]:focus { border-color: var(--blue); outline: none; }

.portal-klanten-tabel-wrap { background: var(--white); border: 1px solid var(--ink-100); border-radius: 12px; overflow: hidden; }
.portal-klanten-tabel { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.portal-klanten-tabel th, .portal-klanten-tabel td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--ink-100); }
.portal-klanten-tabel th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-400); background: var(--ink-50, #fafafa); }
.portal-klanten-tabel tbody tr:last-child td { border-bottom: none; }
.portal-klanten-rij { cursor: pointer; }
.portal-klanten-rij:hover { background: var(--ink-100); }
.portal-klanten-tabel--compact th, .portal-klanten-tabel--compact td { padding: 8px 10px; font-size: 0.82rem; }

.portal-klant-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.portal-klant-top h1 { display: inline-block; margin-right: 10px; }

.portal-klant-card {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: 12px; padding: 22px 24px; margin-bottom: 18px;
}
.portal-klant-card h2 { font-size: 1.05rem; margin: 0 0 14px; }
.portal-klant-card__hint { font-size: 0.8rem; color: var(--ink-400); margin: 0 0 12px; }
.portal-klant-subheading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-400); margin: 20px 0 10px; }
.portal-klant-card form .field { margin-bottom: 12px; }
.portal-klant-col { display: flex; flex-direction: column; }
.portal-klant-factuurvelden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

.portal-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; margin-bottom: 4px; cursor: pointer; }
.portal-checkbox input { width: auto; }

.portal-klant-voorstellen-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.portal-klant-voorstellen-lijst li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.portal-klant-voorstellen-lijst__bedrag { margin-left: auto; font-weight: 600; }

.portal-onderdeel-form { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.portal-onderdeel-form input[type="text"],
.portal-onderdeel-form input[type="date"],
.portal-onderdeel-form input[type="number"] {
  padding: 8px 10px; border: 1px solid var(--ink-200); border-radius: 8px; font-size: 0.85rem; font-family: var(--font-body);
}
.portal-onderdeel-form input[type="text"] { flex: 1; min-width: 160px; }
.portal-onderdeel-form input[type="number"] { width: 70px; }
.portal-onderdeel-verwijder {
  background: none; border: none; cursor: pointer; color: var(--ink-400); font-size: 1.1rem; line-height: 1; padding: 2px 6px;
}
.portal-onderdeel-verwijder:hover { color: var(--red-dark, #c0392b); }

.portal-slot-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.portal-slot-form .field { margin-bottom: 0; }
.portal-slot-form select, .portal-slot-form input[type="date"] {
  padding: 9px 12px; border: 1px solid var(--ink-200); border-radius: 8px; font-family: var(--font-body); font-size: 0.88rem;
}

@media (max-width: 900px) {
  .card-grid:has(.portal-klant-card) { grid-template-columns: 1fr; }
  .portal-klant-factuurvelden { grid-template-columns: 1fr; }
}

/* ---------- Installatieworkflow (te-installeren-lijst + winkellijst) --- */

.portal-installatie-stappen { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.portal-installatie-stap {
  padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--ink-100); color: var(--ink-400);
}
.portal-installatie-stap.is-active { background: var(--blue); color: var(--white); }
.portal-installatie-stap.is-done { background: #e3f7ea; color: #1f9d5c; }

.portal-installatie-tabel input[type="text"] {
  width: 100%; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; font-family: var(--font-body); font-size: 0.88rem;
}
.portal-installatie-tabel input[type="text"]:focus,
.portal-installatie-tabel input[type="number"]:focus { border-color: var(--blue); outline: none; background: var(--white); }
.portal-installatie-tabel input[type="number"] { border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; }
.portal-installatie-rij--uitgesloten { opacity: 0.45; }
.portal-installatie-rij--uitgesloten input[type="text"],
.portal-installatie-rij--uitgesloten input[type="number"] { text-decoration: line-through; }

.portal-winkellijst { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-winkellijst__item { padding: 10px 14px; border: 1px solid var(--ink-100); border-radius: 10px; display: flex; align-items: center; gap: 10px; }
.portal-winkellijst__item label { flex: 1; min-width: 0; }
.portal-winkellijst__item .portal-onderdeel-verwijder { flex-shrink: 0; }
.portal-winkellijst__item label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; }
.portal-winkellijst__item.is-afgevinkt { background: #e3f7ea; border-color: #b7e6c6; }
.portal-winkellijst__item.is-afgevinkt span { text-decoration: line-through; color: var(--ink-400); }

.portal-installatie-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; background: var(--blue); color: var(--white); text-decoration: none; margin-left: 12px;
}
.portal-installatie-link:hover { opacity: 0.9; }

/* ---------- "Offerte"-documentweergave, in de stijl van de werkinstructie-
   generator (tools.unit4security.nl): een strak "papieren" A4-achtige kaart
   met rechte hoeken, een rode driehoek in de linkerbovenhoek, een subtiel
   watermerk en rode sectiekopjes i.p.v. een kale tabel. Puur de layout is
   hergebruikt - niet de AI-generatiefunctionaliteit van die tool. ---------- */
.voorstel-doc {
  background: var(--white); border-radius: var(--radius-sm); position: relative; overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(23,24,26,0.18), 0 2px 8px rgba(23,24,26,0.05);
  padding: 52px 48px 44px; margin-bottom: 24px;
}
.voorstel-doc__watermark {
  position: absolute; top: 220px; right: -160px; white-space: nowrap; font-family: var(--font-display);
  font-size: 56px; font-weight: 700; color: var(--ink-100); letter-spacing: 0.08em;
  transform: rotate(90deg); transform-origin: center center; pointer-events: none; user-select: none; z-index: 0;
}
.voorstel-doc__logo { display: block; height: 100px; width: auto; position: relative; z-index: 1; }
/* Het reguliere Unit4security-wordmark leest voller/breder dan het huidige
   beeldmerk bij dezelfde hoogte - iets kleiner tonen houdt de briefhoofd-
   verhouding rustig (zie lib/settings.js "offerteLogo"). */
.voorstel-doc__logo--regulier { height: 68px; }
.voorstel-doc__pretitle { font-size: 0.86rem; color: var(--ink-400); font-weight: 600; margin-bottom: 14px; position: relative; z-index: 1; }

/* Briefhoofd bovenaan: logo linksboven, Unit4Security-bedrijfsgegevens
   rechtsboven (met wat padding t.o.v. de rand) - klassiek briefhoofd, zelfde
   indeling in portal-preview, klantpagina en PDF (zie public/js/portal-
   voorstel.js, views/offerte-klant.ejs, lib/offertePdf.js). Minder ruimte
   eronder dan voorheen (zie ook .voorstel-doc__pretitle hierboven) - de
   inhoud erna hoeft niet zo ver van het logo af te staan. */
.voorstel-doc__briefhoofd-top {
  position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 12px; padding: 4px 4px 0 0;
}
/* Zelfde tekstgrootte als .voorstel-doc__briefhoofd p hieronder ("van" en
   "aan" coherent) - alleen de -naam-koppen (zie verderop) mogen opvallen. */
/* Zelfde tekstgrootte-familie als .voorstel-doc__briefhoofd p hieronder
   ("van" en "aan" coherent qua kleur/font/grootte) - alleen de -naam-koppen
   (zie verderop) mogen daarnaast ook echt opvallen. */
.voorstel-doc__bedrijfsinfo { text-align: right; font-size: 0.98rem; color: var(--ink-500); line-height: 1.55; }
.voorstel-doc__bedrijfsinfo p { margin: 0 0 8px; }
.voorstel-doc__bedrijfsinfo p:last-child { margin-bottom: 0; }
.voorstel-doc__bedrijfsinfo-naam { font-weight: 700; color: var(--ink); font-size: 1.15rem; margin-bottom: 6px !important; }
@media (max-width: 640px) {
  .voorstel-doc__briefhoofd-top { flex-direction: column; }
  .voorstel-doc__bedrijfsinfo { text-align: left; }
}

/* Klantgegevens - los blok, één kolom (bedrijfsgegevens staan rechtsboven,
   zie hierboven). Geen apart "Klantgegevens"-labeltje meer (voegde geen
   informatie toe) - de naam hieronder is zelf duidelijk genoeg als kop. */
.voorstel-doc__briefhoofd {
  position: relative; z-index: 1;
  margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--ink-100);
}
.voorstel-doc__briefhoofd-naam { font-weight: 700; color: var(--ink); font-size: 1.55rem; margin-bottom: 6px; }
/* Zelfde grootte/kleur als .voorstel-doc__bedrijfsinfo hierboven - coherent
   tussen "van" en "aan". */
.voorstel-doc__briefhoofd p { margin: 0; font-size: 0.98rem; color: var(--ink-500); line-height: 1.55; }

.voorstel-doc__section { position: relative; z-index: 1; margin-bottom: 30px; }
.voorstel-doc__section h3 {
  color: var(--blue); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  margin: 0 0 16px;
}
.voorstel-doc__item {
  display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--ink-100);
}
.voorstel-doc__item:last-child { border-bottom: none; }
.voorstel-doc__item-text { flex: 1; min-width: 0; }
.voorstel-doc__item-label { font-weight: 400; color: var(--ink); }
.voorstel-doc__item-merkmodel { display: block; font-size: 0.78rem; color: var(--ink-400); font-weight: 600; margin-top: 1px; }
.voorstel-doc__item-price { text-align: right; font-weight: 400; color: var(--ink); white-space: nowrap; }
.voorstel-doc__item-price small { display: block; font-weight: 500; color: var(--ink-400); font-size: 0.76rem; }
.voorstel-doc__item--installatie { font-style: normal; }
.voorstel-doc__item--installatie .voorstel-doc__item-label,
.voorstel-doc__item--installatie .voorstel-doc__item-price { font-weight: 700; }
.voorstel-doc__item--subtotaal { border-top: 1px solid var(--ink-100); margin-top: 4px; padding-top: 10px; }
.voorstel-doc__item--subtotaal .voorstel-doc__item-label,
.voorstel-doc__item--subtotaal .voorstel-doc__item-price { font-weight: 700; color: var(--ink); }
.voorstel-doc__item--korting .voorstel-doc__item-label,
.voorstel-doc__item--korting .voorstel-doc__item-price { color: var(--blue); font-weight: 700; }
.voorstel-doc__jaarlijks-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ink-100); font-size: 0.92rem; }
.voorstel-doc__jaarlijks-item:last-child { border-bottom: none; font-weight: 700; }
.voorstel-doc__totalen { position: relative; z-index: 1; margin-top: 30px; padding-top: 22px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; }
.voorstel-doc__totalen-label { font-size: 0.88rem; color: var(--ink-400); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.voorstel-doc__totalen-bedrag { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.voorstel-doc__totalen-was { display: block; font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--ink-400); text-decoration: line-through; }
/* Btw-subregel en het echte eindtotaal (incl. btw) - los van het eerste
   "eenmalig excl. btw"-regeltje hierboven, zodat het altijd duidelijk is
   wélk bedrag inclusief btw is. */
.voorstel-doc__totalen--btw { margin-top: 8px; padding-top: 0; border-top: none; }
.voorstel-doc__totalen--btw .voorstel-doc__totalen-label { font-size: 0.8rem; text-transform: none; font-weight: 600; }
.voorstel-doc__totalen-bedrag--klein { font-size: 0.95rem; color: var(--ink-500); }
.voorstel-doc__totalen--eind { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--ink-100); }
.voorstel-doc__totalen--eind .voorstel-doc__totalen-label { color: var(--ink-700); font-size: 0.92rem; }
.voorstel-doc__totalen--eind .voorstel-doc__totalen-bedrag { font-size: 1.45rem; }
.voorstel-doc__footer-note { position: relative; z-index: 1; font-size: 0.78rem; color: var(--ink-400); margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ink-100); }

/* ---------- Bewerken: aparte, duidelijk gelabelde sectie onder de doc-preview ---------- */
.voorstel-edit-toggle {
  display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink-500);
  border: 3px solid var(--ink); border-radius: var(--radius-pill); padding: 10px 18px;
  font-weight: 700; font-size: 0.86rem; cursor: pointer; margin-bottom: 16px;
}
.voorstel-edit-toggle:hover { border-color: var(--ink); }

/* Aparte, duidelijk gescheiden koppen binnen de bewerk-sectie - "Eénmalige
   kosten" en "Jaarlijks terugkerende kosten" mogen nooit door elkaar lopen. */
.voorstel-section-heading {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-400); margin: 26px 0 12px;
}
.voorstel-card #bewerkDetails > .voorstel-section-heading:first-of-type,
#bewerkDetails .voorstel-section-heading:first-of-type { margin-top: 4px; }

/* Installatiekosten: één regel, automatisch berekend, met een klein
   invoerveld ernaast om het te overschrijven. */
.voorstel-installatie-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px; background: var(--paper); border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 600; color: var(--ink-700);
}
.voorstel-installatie-hint { display: block; font-size: 0.76rem; font-weight: 500; color: var(--ink-400); margin-top: 2px; }
.voorstel-installatie-controls { display: flex; align-items: center; gap: 10px; }
.voorstel-installatie-controls input {
  width: 130px; padding: 9px 12px; border-radius: var(--radius-md); border: 3px solid var(--ink);
  font-size: 0.88rem; text-align: right; background: var(--white);
}
.voorstel-installatie-controls input:focus { outline: none; border-color: var(--blue); }
.voorstel-installatie-reset {
  background: none; border: none; color: var(--blue); font-size: 0.78rem; font-weight: 700; text-decoration: underline;
  cursor: pointer; padding: 0; white-space: nowrap;
}

/* Tijdelijke actie (korting) - zelfde look als de installatiekosten-rij
   erboven, zie public/js/portal-voorstel.js. */
.voorstel-korting-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px; background: var(--paper); border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 600; color: var(--ink-700);
}
.voorstel-korting-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.voorstel-korting-controls label { font-size: 0.78rem; font-weight: 600; color: var(--ink-400); }
.voorstel-korting-controls select {
  padding: 8px 10px; border-radius: var(--radius-md); border: 3px solid var(--ink); font-size: 0.85rem;
  background: var(--white);
}

/* AT2/AT3-wisselknop bij "Jaarlijks terugkerende kosten" */
.voorstel-at-niveau-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.voorstel-at-niveau-row span { font-size: 0.82rem; color: var(--ink-400); }

/* Jaarlijks-tabel: zelfde look als de items-tabel, maar de cellen zelf zijn
   inline bewerkbaar (geen los "bewerken"-detailscherm nodig voor 2-3 regels). */
.voorstel-table--jaarlijks input {
  width: 100%; border: none; background: none; font-size: 0.9rem; font-family: inherit; color: var(--ink-700);
  padding: 4px 2px; border-radius: 4px;
}
.voorstel-table--jaarlijks input:focus { outline: none; background: var(--paper); }
.voorstel-table--jaarlijks .voorstel-jaarlijks-bedrag { width: 90px; text-align: right; }
.voorstel-jaarlijks-leeg { color: var(--ink-400); font-style: italic; font-size: 0.86rem; }

/* Winst-indicatie: uitsluitend intern - duidelijk gemarkeerd zodat niemand
   dit per ongeluk aanziet voor iets dat de klant ook ziet. */
.voorstel-card--winst { border: 2px dashed var(--ink-300); }
.voorstel-card__intern {
  display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink-400); background: var(--paper); border-radius: var(--radius-pill); padding: 3px 9px; margin-left: 8px;
  vertical-align: middle;
}
.voorstel-winst-grid { display: flex; flex-direction: column; gap: 6px; }
.voorstel-winst-grid div { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--ink-500); padding: 4px 0; }
.voorstel-winst-grid__totaal { border-top: 1px solid var(--ink-100); margin-top: 4px; padding-top: 10px !important; font-weight: 700; color: var(--ink); }
.voorstel-winst-grid__totaal strong { color: var(--blue); font-family: var(--font-display); font-size: 1.05rem; }
.voorstel-winst-note { font-size: 0.78rem; color: var(--ink-400); margin: 12px 0 0; }

.voorstel-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
/* Veiligheidsnet: mocht de tabel ondanks min-width:0 op .voorstel-card
   (hierboven) toch breder willen zijn dan de kaart (bv. bij lange
   AX Pro-modelnamen), dan scrollt de tabel intern i.p.v. dat de hele kaart
   breder wordt dan de kaarten ernaast. */
.voorstel-table-scroll { overflow-x: auto; }
.voorstel-table th { text-align: left; color: var(--ink-400); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 10px; border-bottom: 1px solid var(--ink-100); }
.voorstel-table td { padding: 12px 8px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }

/* Moderne aantal-stepper i.p.v. een kaal number-input */
.qty-stepper { display: inline-flex; align-items: center; gap: 10px; }
.qty-stepper__btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: none; background: var(--paper);
  color: var(--ink-500); font-size: 1.05rem; font-weight: 700; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.12s ease, transform 0.1s ease;
}
.qty-stepper__btn:hover { background: var(--ink-100); transform: translateY(-1px); }
.qty-stepper__btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.qty-stepper__value { min-width: 22px; text-align: center; font-weight: 700; font-family: var(--font-display); }

.voorstel-item-verwijder {
  background: none; border: none; color: var(--ink-400); font-size: 1.3rem; cursor: pointer; line-height: 1;
  width: 32px; height: 32px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.voorstel-item-verwijder:hover { color: var(--red); background: var(--red-soft); }
/* Grade 2/3-badge naast de itemnaam in de bewerktabel (zie public/js/
   portal-voorstel.js gradeBadgeHtml()) - bewust subtiel en zonder
   certified/niet-certified onderscheid: dat detail hoeft alleen te blijken
   bij het TOEVOEGEN van een item (zie de catalogus-kiezer, die "[G3]" vs
   "[G3-gecertificeerd]" als platte tekst in de optielabels toont). */
.grade-badge-subtle {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-300);
  margin-left: 4px; vertical-align: middle;
}

/* Omschrijving per regel - ziet er standaard uit als gewone tekst, wordt
   pas als invoerveld herkenbaar bij hover/focus (subtiele rand/achtergrond)
   - zie public/js/portal-voorstel.js itemRowHtml(). */
.voorstel-item-naam {
  display: block; width: 100%; border: 1px solid transparent; background: transparent; padding: 2px 4px;
  margin: -2px -4px 0; font: inherit; font-weight: 700; color: var(--ink); border-radius: 4px;
}
.voorstel-item-naam:hover { border-color: var(--ink-100); }
.voorstel-item-naam:focus { outline: none; border-color: var(--blue); background: var(--white); }

.voorstel-item-merkmodel { display: block; font-size: 0.76rem; color: var(--ink-400); font-weight: 600; margin-top: 2px; }
.voorstel-item-merkmodel--leeg { font-style: italic; color: var(--ink-300); font-weight: 500; }
.voorstel-item-categorie {
  display: block; margin-top: 6px; font-size: 0.74rem; color: var(--ink-500); border: 1px solid var(--ink-100);
  border-radius: 6px; padding: 3px 6px; background: var(--paper); max-width: 160px;
}

.voorstel-add-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.voorstel-add-row select, .voorstel-add-row input {
  padding: 11px 14px; border-radius: var(--radius-md); border: 3px solid var(--ink); font-size: 0.88rem;
  background: var(--paper);
}
.voorstel-add-row select:focus, .voorstel-add-row input:focus { outline: none; border-color: var(--blue); background: var(--white); }
.voorstel-add-row select { flex: 1; min-width: 0; max-width: 100%; }
.voorstel-add-row--custom input { flex: 1; min-width: 120px; }
.voorstel-custom-toggle { margin-top: 14px; font-size: 0.86rem; color: var(--ink-400); }
.voorstel-custom-toggle summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

/* "Opslaan/Klaar"-knop die het bewerk-/klantgegevens-paneel met een kleine
   animatie sluit i.p.v. abrupt dichtklappen (native <details> heeft geen
   ingebouwde overgang) - zie sluitDetailsMetAnimatie() in
   public/js/portal-voorstel.js. De knop zelf slaat niets op (dat gebeurt al
   per wijziging), 'm is puur "ik ben klaar, klap dicht". */
.voorstel-collapsible-content { transition: opacity 0.15s ease, transform 0.15s ease; }
.voorstel-collapsible-content.is-sluiten,
.voorstel-collapsible-content.is-openen { opacity: 0; transform: translateY(-6px); }
.voorstel-klaar-row { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--ink-300); display: flex; justify-content: flex-end; }

/* Merk-toggle (Ajax/AX Pro) bovenaan de bewerk-sectie - klein, duidelijk
   welk merk actief is, met een korte uitleg dat wisselen niet mengt. */
.voorstel-merk-toggle {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px dashed var(--ink-300);
  font-size: 0.86rem; font-weight: 600; color: var(--ink-500);
}
.voorstel-merk-toggle .btn--sm { padding: 7px 16px; font-size: 0.8rem; }
.voorstel-merk-toggle__hint { flex-basis: 100%; font-size: 0.76rem; font-weight: 500; color: var(--ink-400); }

/* Risicoklasse handmatig aanpassen (bv. na opname op locatie) - klein,
   inline veld direct onder de merk-toggle. */
.voorstel-risicoklasse-edit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px dashed var(--ink-300);
  font-size: 0.86rem; font-weight: 600; color: var(--ink-500);
}
.voorstel-risicoklasse-edit input {
  width: 90px; padding: 7px 10px; border: 1px solid var(--ink-100); border-radius: 6px; font-size: 0.86rem;
}
.voorstel-risicoklasse-edit__hint { flex-basis: 100%; font-size: 0.76rem; font-weight: 500; color: var(--ink-400); }

.voorstel-headers-edit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px dashed var(--ink-300);
  font-size: 0.86rem; font-weight: 600; color: var(--ink-500);
}
.voorstel-headers-edit__title { flex-basis: 100%; }
.voorstel-headers-edit__row { display: flex; align-items: center; gap: 8px; }
.voorstel-headers-edit__row label { font-weight: 500; color: var(--ink-400); }
.voorstel-headers-edit input {
  min-width: 220px; padding: 7px 10px; border: 1px solid var(--ink-100); border-radius: 6px; font-size: 0.86rem;
}
.voorstel-headers-edit__hint { flex-basis: 100%; font-size: 0.76rem; font-weight: 500; color: var(--ink-400); }

.voorstel-totalen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink-100); }
.voorstel-totalen div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.95rem; }

.voorstel-situatie { font-size: 0.88rem; color: var(--ink-500); margin: 0 0 8px; }

.voorstel-verzend-info { font-size: 0.86rem; color: var(--ink-500); margin-top: 16px; }
.voorstel-verzend-info--leeg { color: var(--ink-400); }
.voorstel-verzend-info code { background: var(--ink-100); padding: 3px 10px; border-radius: 8px; font-size: 0.85rem; word-break: break-all; }
.voorstel-code-hint { color: var(--ink-400); font-size: 0.78rem; display: block; margin-top: 2px; }

/* ---------- Ondertekend-kaart: signaal in de portal-zijbalk dat een klant
   al digitaal getekend heeft, met datum/naam/plaats en een directe link
   naar de bevroren, ondertekende PDF (zie server.js store.readSignedPdf) ---------- */
.voorstel-ondertekend-card { border: 2px solid #12a150; background: #f3fbf6; }
.voorstel-ondertekend-card h2 { display: flex; align-items: center; gap: 8px; color: #0c7a3c; }
.voorstel-ondertekend-card__vinkje { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #12a150; color: var(--white); font-size: 0.8rem; flex-shrink: 0; }
.voorstel-ondertekend-card__regel { font-size: 0.9rem; color: var(--ink-700); margin: 0 0 6px; }
.voorstel-ondertekend-card__regel strong { color: var(--ink); }
.voorstel-ondertekend-card__handtekening { max-width: 100%; height: 48px; object-fit: contain; object-position: left; margin: 8px 0 14px; display: block; border-bottom: 1px solid var(--ink-100); padding-bottom: 10px; }

/* ---------- Waarschuwing in het bewerk-paneel bij een al-ondertekend
   voorstel - wijzigingen hier raken nooit meer de bevroren, ondertekende
   PDF; los daarvan wordt bij elke opslagactie ook nog expliciet om
   bevestiging gevraagd (zie bevestigOndertekendWijziging() in
   public/js/portal-voorstel.js). ---------- */
.voorstel-ondertekend-waarschuwing { display: flex; gap: 10px; align-items: flex-start; background: #fff8e1; border: 1px solid var(--accent-yellow-dark); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: 0.86rem; color: var(--ink-700); }
.voorstel-ondertekend-waarschuwing__icoon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }

/* ---------- Afspraak-kaart: bevestigen of een ander moment voorstellen ---------- */
.afspraak-card__slot {
  background: var(--paper); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 14px;
  font-size: 0.92rem;
}
.afspraak-card__slot strong { display: block; color: var(--ink); margin-bottom: 2px; }
.afspraak-card__acties { display: flex; flex-direction: column; gap: 10px; }
.afspraak-voorstel-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.afspraak-voorstel-form input, .afspraak-voorstel-form textarea {
  padding: 10px 14px; border-radius: var(--radius-md); border: 3px solid var(--ink);
  background: var(--paper); font-family: var(--font-body); font-size: 0.88rem;
}
.afspraak-voorstel-form input:focus, .afspraak-voorstel-form textarea:focus { outline: none; border-color: var(--blue); background: var(--white); }
.afspraak-voorgesteld-info {
  background: var(--blue-soft); color: var(--blue-dark); border-radius: var(--radius-md); padding: 12px 14px;
  font-size: 0.86rem; margin-top: 10px;
}

@media (max-width: 800px) {
  .voorstel-grid { grid-template-columns: 1fr; }
  .voorstel-side { position: static; }
  .voorstel-doc { padding: 32px 22px 28px; }
  .voorstel-doc__watermark { display: none; }
}

/* ---------- Configurator popup (sitewide "Start de check" CTA) ---------- */
body.modal-open { overflow: hidden; }
.configurator-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.configurator-modal[hidden] {
  /* Zonder deze regel wint "display: flex" hierboven altijd van de
     standaard [hidden]-stijl van de browser (zelfde specificiteit, maar
     author-CSS gaat voor UA-CSS) - de popup bleef daardoor altijd zichtbaar,
     ongeacht het hidden-attribuut, en kon dus ook niet gesloten worden. */
  display: none;
}
.configurator-modal__backdrop {
  /* Deep, saturated navy blue instead of the previous yellow tint - high
     opacity so it reads as a solid thick backdrop, with just enough
     transparency for the page behind to subtly show through. */
  position: absolute; inset: 0; background: rgba(13, 27, 46, 0.88);
}
.configurator-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 640px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  border-radius: var(--radius-xl);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
.configurator-modal__panel::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.configurator-modal__panel .configurator { margin: 0; }
.configurator-modal__close {
  /* position: fixed (i.p.v. absolute t.o.v. het scrollende panel) - anders
     scrolt de knop mee omhoog zodra je in de wizard-stappen naar onder
     scrollt, en is 'm niet meer te vinden/bruikbaar (vooral op mobiel waar
     het paneel de volledige pagina inneemt). */
  position: fixed; top: 18px; right: 18px; z-index: 101;
  width: 40px; height: 40px; border-radius: var(--radius-pill); border: 2px solid var(--ink);
  background: var(--white); color: var(--ink-500);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.configurator-modal__close:hover { background: var(--ink-100); color: var(--ink); }
@media (max-width: 640px) {
  .configurator-modal { padding: 0; }
  .configurator-modal__panel { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .configurator-modal__panel .configurator { border-radius: 0; min-height: 100vh; }
  /* Extra ademruimte rond de sluitknop zelf op mobiel - groter tikgebied,
     ver genoeg van de randen af om altijd goed te kunnen raken. */
  .configurator-modal__close { top: 16px; right: 16px; width: 44px; height: 44px; }
  /* The close button is fixed at the top of the screen here (see above) -
     the wizard's own mobile padding (22px top, tuned for the inline hero
     card) isn't enough clearance inside the modal specifically, so the
     first step's heading/progress-bar started behind the button. */
  .configurator-modal__panel .configurator { padding-top: 92px; }
}

/* ---------- Cookiebanner (GDPR: statistiek + marketing zijn optioneel,
   niets wordt geladen/verstuurd voordat hier een keuze is gemaakt) - bewust
   klein en in de hoek, niet een balk over de volle breedte. ---------- */
.cookie-banner {
  position: fixed; left: 20px; bottom: 20px; z-index: 200; max-width: 360px;
  background: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-strong);
}
.cookie-banner__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cookie-banner__text { color: rgba(255,255,255,0.8); font-size: 0.8rem; line-height: 1.45; margin: 0; }
.cookie-banner__text a { color: var(--white); text-decoration: underline; }
.cookie-banner__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cookie-banner__link {
  background: none; border: none; color: rgba(255,255,255,0.6); font-size: 0.78rem; font-weight: 600;
  text-decoration: underline; cursor: pointer; padding: 4px 0; margin-right: auto;
}
.cookie-banner__link:hover { color: var(--white); }
.cookie-banner__prefs {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,0.06); border-radius: var(--radius-sm); padding: 10px 12px;
}
.cookie-banner__pref { display: flex; align-items: flex-start; gap: 8px; color: rgba(255,255,255,0.8); font-size: 0.78rem; cursor: pointer; }
.cookie-banner__pref input { margin-top: 2px; flex-shrink: 0; }
.cookie-banner__pref strong { color: var(--white); }
@media (max-width: 640px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---------- Portal: statistiekenpagina ---------- */
.stats-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.stats-header h1 { font-size: 1.6rem; margin: 0 0 4px; }
.stats-header__sub { font-size: 0.88rem; color: var(--ink-400); max-width: 52ch; margin: 0; }

.stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stats-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.stats-card__label { font-size: 0.8rem; color: var(--ink-400); font-weight: 600; }
.stats-card__value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.stats-card__sub { font-size: 0.78rem; color: var(--ink-400); }
@media (max-width: 980px) {
  .stats-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stats-cards { grid-template-columns: 1fr; }
}

.stats-funnel { display: flex; flex-direction: column; gap: 16px; }
.stats-funnel__step { display: flex; flex-direction: column; gap: 4px; }
.stats-funnel__bar-track { background: var(--ink-100); border-radius: var(--radius-pill); height: 14px; overflow: hidden; }
.stats-funnel__bar { background: var(--blue); height: 100%; border-radius: var(--radius-pill); transition: width 0.3s ease; }
.stats-funnel__meta { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--ink-500); }
.stats-funnel__meta strong { color: var(--ink); font-family: var(--font-display); }
.stats-funnel__drop { font-size: 0.76rem; color: var(--ink-400); }
.stats-funnel__note { font-size: 0.82rem; color: var(--ink-400); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-100); }

.stats-table th, .stats-table td { text-align: left; }

/* ---------- Portal: Deals-pagina ---------- */
.deal-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.deal-card__desc { font-size: 0.86rem; color: var(--ink-400); margin: 4px 0 0; max-width: 46ch; }
.deal-card__percentages { display: flex; gap: 8px; margin-top: 16px; }
.deal-card__pct { padding: 8px 16px; font-size: 0.84rem; }
.deal-card__status { font-size: 0.84rem; color: var(--ink-400); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ink-100); }
.deal-card__status.is-actief { color: var(--ink-700); }
.deal-card__status.is-actief strong { color: var(--blue); }

/* Logo-kiezer op /portal/instellingen (offerte-documenten alleen) - zie
   public/js/portal-instellingen.js. */
.logo-kiezer { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.logo-kiezer__optie {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 22px;
  border: 3px solid var(--ink-100); border-radius: var(--radius-md); cursor: pointer; background: var(--paper);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.logo-kiezer__optie:hover { border-color: var(--ink-300); }
.logo-kiezer__optie.is-actief { border-color: var(--blue); background: var(--white); }
.logo-kiezer__optie input { margin: 0; }
.logo-kiezer__preview { height: 44px; width: auto; max-width: 160px; object-fit: contain; }
.logo-kiezer__preview--donker { background: var(--ink); padding: 8px 12px; border-radius: var(--radius-sm); }
.logo-kiezer__optie span { font-size: 0.84rem; font-weight: 600; color: var(--ink-700); }

/* ---------- Homepage: tijdelijke actiebanner (zie lib/deals.js) ---------- */
.promo-ribbon {
  display: inline-flex; align-items: center; gap: 6px; background: var(--white); color: var(--ink);
  font-weight: 700; font-size: 0.92rem; padding: 9px 20px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft); margin-bottom: 6px;
}
.promo-ribbon strong { color: var(--ink); font-family: var(--font-display); }
@media (max-width: 640px) {
  .promo-ribbon { font-size: 0.82rem; padding: 8px 16px; text-align: center; }
}

/* ---------- Handtekening / goedkeuring op de klant-facing offertepagina ---------- */
.handtekening-card {
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); padding: 28px 26px; margin-top: 24px;
}
.handtekening-card h3 { font-size: 1.15rem; margin: 0 0 8px; }
.handtekening-card__lead { font-size: 0.92rem; color: var(--ink-500); margin: 0 0 18px; }
.handtekening-card__akkoord { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--ink-700); cursor: pointer; }
.handtekening-card__akkoord input { margin-top: 3px; flex-shrink: 0; }

.handtekening-pad-wrap { margin-top: 18px; position: relative; }
.handtekening-pad-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-500); margin-bottom: 6px; }
.handtekening-canvas {
  width: 100%; height: 180px; display: block; touch-action: none; cursor: crosshair;
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-md);
}
.handtekening-wis-btn {
  position: absolute; top: 32px; right: 10px; background: var(--white); border: 2px solid var(--ink-300);
  border-radius: var(--radius-pill); padding: 5px 14px; font-size: 0.78rem; font-weight: 700; color: var(--ink-500); cursor: pointer;
}
.handtekening-wis-btn:hover { border-color: var(--ink); color: var(--ink); }

.handtekening-card--klaar { background: #e3f7ea; border-color: #12a150; }
.handtekening-card--klaar h3 { color: #0c7a3c; }
.handtekening-card--klaar p { color: var(--ink-700); margin: 0; font-size: 0.92rem; }

/* ---------- VRKI-pagina: risicoklassen-overzicht ---------- */
.vrki-klassen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 32px 0 24px; }
.vrki-klasse-card {
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius-md);
  padding: 22px 20px; box-shadow: var(--shadow-soft); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vrki-klasse-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-card); }
.vrki-klasse-card__num {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  background: var(--blue); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  border-radius: var(--radius-pill); margin-bottom: 12px;
}
.vrki-klasse-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.vrki-klasse-card p { font-size: 0.86rem; color: var(--ink-500); margin: 0; }
.vrki-disclaimer { font-size: 0.84rem; color: var(--ink-400); max-width: 70ch; }
@media (max-width: 900px) {
  .vrki-klassen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .vrki-klassen-grid { grid-template-columns: 1fr; }
}

/* ---------- Klant-facing offertepagina: compacte, gecentreerde intro
   direct boven het voorstel-document (i.p.v. een volle page-hero) ---------- */
.offerte-intro { text-align: center; font-size: 0.98rem; color: var(--ink-500); max-width: 52ch; margin: 40px auto 24px; }

/* ---------- Portal: klantgegevens bewerken ---------- */
.voorstel-card--klant { margin-top: 20px; }
.voorstel-klant-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.voorstel-klant-grid .field input { border-width: 2px; padding: 10px 12px; font-size: 0.92rem; }
#klantOpslaanBtn { margin-top: 16px; }
@media (max-width: 640px) {
  .voorstel-klant-grid { grid-template-columns: 1fr; }
}

/* ---------- WhatsApp floating widget (sitewide, bottom-right) ----------
   Only rendered at all when a number is configured in the portal (see
   views/partials/footer.ejs) - opposite corner from the cookie banner
   (bottom-left) so the two never collide. Sits below the configurator
   modal's z-index (100/101) so the modal always wins if both are open. */
.whatsapp-widget {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-strong);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-widget:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.whatsapp-widget:active { transform: translateY(0) scale(0.98); }
@media (max-width: 640px) {
  .whatsapp-widget { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whatsapp-widget svg { width: 26px; height: 26px; }
}

/* ---------- Publieke inplan-pagina (/inplannen/:token) ------------------ */

.inplannen-main {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--paper); padding: 32px 16px;
}
.inplannen-card {
  background: var(--white); border-radius: 20px; box-shadow: var(--shadow-card);
  max-width: 480px; width: 100%; padding: 36px 32px; text-align: center;
}
.inplannen-card__logo { height: 64px; margin: -8px auto 18px; display: block; }
.inplannen-titel { font-size: 1.4rem; margin: 0 0 10px; }
.inplannen-hint { color: var(--ink-400); font-size: 0.88rem; margin: 0 0 18px; }
.inplannen-gekozen {
  font-size: 1.1rem; font-weight: 700; background: #e3f7ea; color: #0c7a3c;
  padding: 14px 18px; border-radius: 12px; margin: 20px 0;
}
.inplannen-gekozen span { font-weight: 600; font-size: 0.95rem; }
.inplannen-vink { width: 56px; height: 56px; border-radius: 50%; background: #12a150; color: #fff; font-size: 1.6rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.inplannen-slot.is-gekozen { border-color: #12a150; background: #e3f7ea; box-shadow: 0 0 0 1px #12a150; }
.inplannen-slot.is-gekozen strong::before { content: "\2713  "; color: #12a150; }
.inplannen-bevestig { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--paper); text-align: left; }
.inplannen-bevestig p { margin: 0 0 12px; font-size: 0.92rem; }
.inplannen-bevestig strong { text-transform: none; }
.inplannen-sloten { display: flex; flex-direction: column; gap: 10px; }
.inplannen-slot {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;
  border: 1px solid #d9dce1; border-radius: 12px; background: var(--white);
  cursor: pointer; font-family: var(--font-body); font-size: 0.92rem; text-align: left; gap: 12px; width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.inplannen-slot:hover { border-color: var(--blue); background: #f4f8ff; }
.inplannen-slot:disabled { opacity: 0.5; cursor: not-allowed; }
.inplannen-slot span { color: var(--ink-400); font-size: 0.85rem; }

/* ---------- Diensten (onderhoud/meldkamer/simkaart activatie) ---------- */

.portal-dienst-kaart {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--ink-100); border-radius: 10px; margin-bottom: 10px;
}
.portal-dienst-kaart--actief { background: #f7fdf9; border-color: #cdeedb; }
.portal-dienst-kaart p { margin: 4px 0 0; }

.portal-modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 20, 24, 0.55); padding: 20px;
}
.portal-modal-overlay[hidden] { display: none; }
.portal-modal {
  position: relative; background: var(--white); border-radius: 16px; padding: 28px 26px;
  max-width: 420px; width: 100%; box-shadow: var(--shadow-strong, 0 20px 60px rgba(0,0,0,0.25));
}
.portal-modal h2 { margin: 0 0 16px; font-size: 1.15rem; }
.portal-modal__sluiten {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--ink-100); color: var(--ink-500); font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.portal-modal__sluiten:hover { background: var(--ink-200); }

/* ---------- Nieuw dashboard (/portal/dashboard) ------------------------- */

.portal-dash-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 20px;
}
.portal-dash-kaart {
  position: relative; background: var(--white); border: 1px solid var(--ink-100); border-radius: 14px;
  padding: 18px 20px; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.portal-dash-kaart:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.portal-dash-kaart__naam { font-size: 1rem; }
.portal-dash-kaart__meta { font-size: 0.8rem; color: var(--ink-400); }
.portal-dash-kaart__stap { font-size: 0.78rem; color: var(--ink-400); margin-top: 2px; }

.portal-dash-actie-stip {
  position: absolute; top: 14px; right: 14px; width: 11px; height: 11px; border-radius: 50%;
  background: #e2001a; box-shadow: 0 0 0 3px rgba(226,0,26,0.15);
}

.portal-dash-bar { width: 100%; height: 8px; border-radius: 999px; background: var(--ink-100); overflow: hidden; margin-top: 6px; }
.portal-dash-bar__fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.portal-dash-bar--blauw { background: linear-gradient(90deg, #4f8ef7, #2f6fe0); }
.portal-dash-bar--groen { background: linear-gradient(90deg, #34c07a, #1f9d5c); }
.portal-dash-bar--grijs { background: var(--ink-200); }

.portal-dash-statuslabel {
  display: inline-block; width: fit-content; font-size: 0.78rem; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; margin-top: 4px;
}
.portal-dash-statuslabel--actief { background: #e3f7ea; color: #1f9d5c; }
.portal-dash-statuslabel--nog_niet_actief { background: var(--ink-100); color: var(--ink-400); }

.portal-dash-kaart__iconen { margin-top: 6px; font-size: 0.95rem; display: flex; gap: 6px; }
.portal-dash-icoon { opacity: 0.85; }

.portal-dash-actielijst { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.portal-dash-actielijst li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.88rem; }
.portal-dash-actielijst__klantlink { display: inline-block; margin-top: 6px; font-size: 0.85rem; font-weight: 600; }

.portal-modal--breed { max-width: 560px; }
.portal-nieuwe-klant-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
}
.portal-nieuwe-klant-form .field--wide { grid-column: 1 / -1; }
.portal-nieuwe-klant-form .afspraak-form__status,
.portal-nieuwe-klant-form button[type="submit"] { grid-column: 1 / -1; }
.portal-nieuwe-klant-form input, .portal-nieuwe-klant-form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ink-200); border-radius: 8px;
  font-family: var(--font-body); font-size: 0.9rem;
}

@media (max-width: 640px) {
  .portal-nieuwe-klant-form { grid-template-columns: 1fr; }
  .portal-dash-grid { grid-template-columns: 1fr; }
}

/* ---------- Visuele 2-weken-kalender (agenda: tijdsloten openen) -------- */

.portal-kalender-type { display: flex; gap: 8px; margin-bottom: 16px; }
.portal-kalender-type__btn {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--ink-200); background: var(--white);
  color: var(--ink-500); font-size: 0.86rem; font-weight: 600; cursor: pointer; font-family: var(--font-body);
}
.portal-kalender-type__btn.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }

.portal-kalender-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px;
}
.portal-kalender-nav__label { font-weight: 700; font-size: 0.95rem; min-width: 200px; text-align: center; }
.portal-kalender-nav .btn:disabled { opacity: 0.35; cursor: not-allowed; }

.portal-kalender-week {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
  overflow-x: auto;
}
.portal-kalender-week__header, .portal-kalender-rij {
  display: grid; grid-template-columns: 70px repeat(7, minmax(52px, 1fr)); gap: 6px; align-items: center;
}
.portal-kalender-week__header { margin-bottom: 8px; }
.portal-kalender-dagkop {
  display: flex; flex-direction: column; align-items: center; font-size: 0.72rem; color: var(--ink-400); gap: 2px;
}
.portal-kalender-dagkop strong { font-size: 0.82rem; color: var(--ink); }
.portal-kalender-dagkop--vandaag { color: var(--blue); }
.portal-kalender-dagkop--vandaag strong { color: var(--blue); }

.portal-kalender-rij { margin-bottom: 6px; }
.portal-kalender-rij__label { font-size: 0.74rem; color: var(--ink-400); font-weight: 600; }

.portal-kalender-cel {
  height: 40px; border-radius: 8px; border: 1.5px dashed var(--ink-200); background: var(--white);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.72rem;
  padding: 0; transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.portal-kalender-cel--leeg:hover { border-color: var(--blue); background: #f4f8ff; transform: scale(1.04); }
.portal-kalender-cel--verleden { border-style: solid; border-color: var(--ink-100); background: var(--ink-50, #fafafa); cursor: not-allowed; opacity: 0.5; }
.portal-kalender-cel--open {
  border-style: solid; border-color: #34c07a; background: #e3f7ea; color: #1f9d5c; font-weight: 700;
}
.portal-kalender-cel--open:hover { background: #d3f0de; }
.portal-kalender-cel--geboekt {
  border-style: solid; border-color: #2f6fe0; background: #eaf1ff; color: #2f6fe0; cursor: default;
  flex-direction: column; gap: 0; line-height: 1.1; padding: 2px;
}
.portal-kalender-cel__klant { font-size: 0.6rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.portal-kalender-cel__icoon { font-size: 0.9rem; }

.portal-handmatig-slot { margin: 10px 0 18px; }
.portal-handmatig-slot summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ink-500); margin-bottom: 10px; }
.portal-handmatig-slot .portal-slot-form { margin-top: 10px; }

.portal-agenda-tabel-titel { font-size: 1rem; margin: 28px 0 10px; color: var(--ink-500); }

@media (max-width: 700px) {
  .portal-kalender-week__header, .portal-kalender-rij { grid-template-columns: 54px repeat(7, minmax(40px, 1fr)); gap: 4px; }
  .portal-kalender-cel { height: 34px; }
  .portal-kalender-cel__klant { display: none; }
}

.inplannen-sluiten { font-weight: 700; color: var(--ink); margin: 6px 0 14px; }

/* Wachtwoord instellen / vergeten (v148) */
.login-card__tekst { font-size: 0.92rem; color: var(--ink-500, #5c5c63); margin: 0 0 16px; line-height: 1.5; }
.login-card__extra { text-align: center; margin: 16px 0 0; font-size: 0.88rem; }
.login-card__extra a { color: var(--ink-500, #5c5c63); }
.login-card .p-veld-hint { font-size: 0.8rem; color: var(--ink-400, #8a8a90); margin: 4px 0 0; }