/* ============================================================================
   FleurenFlow website.
   Statisch, geen build, geen extern verzoek, geen library. Licht en donker
   allebei ontworpen.

   Beweging (2 september 2026): alle animatie is CSS. De reveals hangen aan een
   IntersectionObserver (werkt overal); waar de browser scroll-gestuurde CSS
   ondersteunt wordt dat er als extra bovenop gezet via @supports. Er wordt
   uitsluitend transform/opacity/filter geanimeerd, nooit width/height/top/left.
   prefers-reduced-motion zet alles in de eindstand.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}

/* animeerbare eigen eigenschappen: nodig om gradients te kunnen bewegen */
@property --gloed-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --gloed-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --draai   { syntax: "<angle>";      inherits: false; initial-value: 0deg; }

:root {
  color-scheme: light;
  --inkt: #14181F;
  --roest: #D9541F;
  --roest-tekst: #B23F12;
  --roest-knop: #C0450F;
  --roest-diep: #8E3009;
  --roest-zacht: #FBEDE5;
  --papier: #FAF9F7;

  --vlak: #F1EFEA;
  --opp: #FFFFFF;
  --opp-2: #FAF9F7;
  --tekst: #14181F;
  --tekst-2: #565B64;
  --tekst-3: #83888F;
  --lijn: rgba(20, 24, 31, .12);
  --lijn-2: rgba(20, 24, 31, .22);
  --op-inkt: #F3F2EF;
  --op-inkt-2: #A9AAAD;
  --op-inkt-lijn: rgba(255, 255, 255, .14);
  --tekst-op-roest: #FFFFFF;

  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-xl: 22px; --r-vol: 999px;
  --breed: 1180px;

  /* één curve voor alles: scherp weg, zacht uit. Nooit linear, nooit ease. */
  --veer: cubic-bezier(.16, 1, .3, 1);

  /* Het tempo van de openingsanimatie. 1 = zoals hij nu is (ruim 2,5 seconde
     tot de site er staat). Zet hem op .6 en alles gaat evenredig sneller;
     op 0 komt hij niet eens in beeld. Dit is de enige knop die je nodig hebt. */
  --intro-tempo: 1;
  --veer-kort: cubic-bezier(.22, 1, .36, 1);

  --grein: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  --grein-sterkte: .04;

  /* Hoe hard de blokjes van het sorteerraster in de kop staan (assets/hero-raster.js).
     In de donkere stand moeten ze sterker, anders vallen ze weg tegen het vlak. */
  --raster-rust: .2;
  --raster-accent: .5;

  --schaduw-zacht:
    0 1px 2px color-mix(in srgb, var(--inkt) 6%, transparent),
    0 10px 26px -18px color-mix(in srgb, var(--inkt) 30%, transparent);
  --schaduw-diep:
    0 1px 2px color-mix(in srgb, var(--inkt) 7%, transparent),
    0 24px 54px -26px color-mix(in srgb, var(--inkt) 40%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-thema="licht"])) { color-scheme: dark;
    --roest: #E8672C; --roest-tekst: #F2793F; --roest-knop: #E8672C;
    --roest-diep: #FF8A52; --roest-zacht: #2A1710;
    --vlak: #0D1015; --opp: #171B22; --opp-2: #1C2129;
    --tekst: #F2F3F5; --tekst-2: #A8AEB8; --tekst-3: #767C86;
    --lijn: rgba(255, 255, 255, .12); --lijn-2: rgba(255, 255, 255, .22);
    --inkt: #05070A;
    --tekst-op-roest: #14181F;
    --grein-sterkte: .025;
    --raster-rust: .34; --raster-accent: .72;
    --schaduw-zacht: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -18px rgba(0,0,0,.8);
    --schaduw-diep: 0 1px 2px rgba(0,0,0,.55), 0 24px 54px -26px rgba(0,0,0,.9);
  }
}
:root[data-thema="donker"] { color-scheme: dark;
  --roest: #E8672C; --roest-tekst: #F2793F; --roest-knop: #E8672C;
  --roest-diep: #FF8A52; --roest-zacht: #2A1710;
  --vlak: #0D1015; --opp: #171B22; --opp-2: #1C2129;
  --tekst: #F2F3F5; --tekst-2: #A8AEB8; --tekst-3: #767C86;
  --lijn: rgba(255, 255, 255, .12); --lijn-2: rgba(255, 255, 255, .22);
  --inkt: #05070A;
  --tekst-op-roest: #14181F;
  --grein-sterkte: .025;
  --raster-rust: .34; --raster-accent: .72;
  --schaduw-zacht: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -18px rgba(0,0,0,.8);
  --schaduw-diep: 0 1px 2px rgba(0,0,0,.55), 0 24px 54px -26px rgba(0,0,0,.9);
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--vlak);
  color: var(--tekst);
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; line-height: 1.62; font-weight: 400; font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background-image: var(--grein); opacity: var(--grein-sterkte); mix-blend-mode: multiply;
}
:root[data-thema="donker"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-thema="licht"])) body::before { mix-blend-mode: screen; }
}

img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--roest); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--roest); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 28px; }

/* de kopbalk blijft bovenaan staan, dus een sprong naar een sectie moet daar
   net onder landen en niet erachter */
main[id], section[id], div[id] { scroll-margin-top: 74px; }

/* ---------- typografische bouwstenen ---------- */
h1, h2, h3 { font-weight: 700; font-stretch: 114%; letter-spacing: -.035em; line-height: 1.05; }
h2 { font-size: clamp(29px, 3.6vw, 44px); text-wrap: balance; }
h3 { font-size: clamp(17px, 1.6vw, 19px); letter-spacing: -.02em; line-height: 1.25; }
p { text-wrap: pretty; }
.groot { font-size: clamp(16.5px, 1.45vw, 19px); line-height: 1.55; color: var(--tekst-2); }
.num { font-variant-numeric: tabular-nums; font-stretch: 90%; }

/* het kleine bovenschrift dat geen hoofdstuk is (hero, contact) */
.label {
  font-size: 11px; font-weight: 600; font-stretch: 86%; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tekst-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.label::before { content: ""; width: 22px; height: 2px; background: var(--roest); flex: none; }

/* ---------- hoofdstuktitel: nadrukkelijk groter dan het oude minilabel ------
   Thijs' punt: "de persoonlijke assistent" stond in 11px boven een kop van
   44px. Nu een echt hoofdstukopschrift met nummer, op ~19-24px.            */
.hoofdstuk {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--lijn);
}
.hoofdstuk__nr {
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; font-stretch: 70%;
  letter-spacing: -.03em; line-height: 1; color: var(--roest);
  font-variant-numeric: tabular-nums;
}
.hoofdstuk__naam {
  font-size: clamp(18px, 1.9vw, 24px); font-weight: 700; font-stretch: 92%;
  letter-spacing: .01em; line-height: 1.1; color: var(--tekst);
}
.zone--inkt .hoofdstuk { border-color: var(--op-inkt-lijn); }
.zone--inkt .hoofdstuk__naam { color: var(--op-inkt); }

/* De overgang van een licht vlak naar de donkere sectie eronder. Hier stond
   een liniaal met streepjes: die trok een harde streep dwars door de pagina.
   Nu zakt het papier over een band naar de inkt toe, zodat de kop en de
   sectie erna in elkaar overlopen. In de donkere stand liggen die twee
   kleuren zo dicht bij elkaar dat je de band niet ziet, en dat klopt: daar is
   er ook geen rand om te verzachten. */
.overgang {
  height: clamp(54px, 6vw, 82px);
  background: linear-gradient(to bottom,
    var(--vlak) 0%,
    color-mix(in oklab, var(--vlak) 94%, var(--inkt)) 34%,
    color-mix(in oklab, var(--vlak) 78%, var(--inkt)) 58%,
    color-mix(in oklab, var(--vlak) 44%, var(--inkt)) 80%,
    color-mix(in oklab, var(--vlak) 12%, var(--inkt)) 93%,
    var(--inkt) 100%);
}

/* ---------- knoppen ---------- */
.knop {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font: inherit; font-size: 14.5px; font-weight: 650; font-stretch: 98%;
  padding: 12px 21px; border-radius: var(--r-vol); cursor: pointer;
  border: 1.5px solid transparent; text-decoration: none;
  transition: background .25s var(--veer), border-color .25s var(--veer),
              color .25s var(--veer), transform .25s var(--veer),
              box-shadow .25s var(--veer);
}
/* manipulation: haalt de halve seconde wachten op een dubbeltik weg */
.knop { touch-action: manipulation; }
.knop svg { flex: none; transition: transform .3s var(--veer); }
.knop:hover svg { transform: translateX(3px); }
.knop:active { transform: translateY(1px) scale(.985); }
.knop--primair {
  background: var(--roest-knop); color: var(--tekst-op-roest);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--roest-diep) 30%, transparent);
}
.knop--primair:hover {
  background: var(--roest-diep); transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--roest) 65%, transparent);
}
/* een veeg licht die één keer over de knop loopt bij hover */
.knop--primair::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  translate: -110% 0; transition: translate .65s var(--veer);
}
.knop--primair:hover::after { translate: 110% 0; }
.knop--rand { border-color: var(--lijn-2); color: var(--tekst); }
.knop--rand:hover { border-color: var(--tekst); background: var(--opp); transform: translateY(-2px); }
.knoprij { display: flex; gap: 10px; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 34px); }

/* ---------- springplank voor de tab-toets ----------
   Onzichtbaar tot hij focus krijgt: dan springt hij in beeld en slaat het
   hele menu over. */
.sla-over {
  position: absolute; left: 12px; top: -60px; z-index: 400;
  background: var(--opp); color: var(--tekst);
  border: 1px solid var(--lijn-2); border-radius: var(--r-vol);
  padding: 9px 18px; font-size: 14px; text-decoration: none;
  transition: top .2s var(--veer);
}
.sla-over:focus-visible { top: 12px; }

/* ---------- kopbalk ---------- */
.kopbalk {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--vlak) 84%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--lijn);
  transition: box-shadow .3s var(--veer), background .3s var(--veer);
}
.kopbalk.gezakt { box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--inkt) 60%, transparent); }
.kopbalk__in { display: flex; align-items: center; gap: 20px; padding: 14px 28px; }
.kopbalk__logo { height: 24px; width: auto; display: block; }
.kopbalk nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.kopbalk nav a {
  font-size: 14.5px; font-weight: 500; color: var(--tekst-2); text-decoration: none;
  position: relative; padding-bottom: 2px;
}
.kopbalk nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--roest); scale: 0 1; transform-origin: left;
  transition: scale .3s var(--veer);
}
.kopbalk nav a:hover { color: var(--tekst); }
.kopbalk nav a:hover::after { scale: 1 1; }
.thema-knop, .beweging-knop {
  background: none; border: 1px solid var(--lijn); border-radius: var(--r-vol);
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  color: var(--tekst-2); flex: none; touch-action: manipulation;
  transition: color .2s var(--veer), border-color .2s var(--veer), rotate .5s var(--veer);
}
.thema-knop:hover, .beweging-knop:hover { color: var(--tekst); border-color: var(--lijn-2); }
.thema-knop:hover { rotate: 25deg; }
/* staat de beweging uit, dan mag je dat aan de knop zien */
.beweging-knop[aria-pressed="true"] { color: var(--roest-tekst); border-color: var(--roest); }

/* inloggen: een actie, dus een gevuld knopje in plaats van een menu-link.
   inline-flex met een vaste regelhoogte, anders hangt de tekst aan de
   bovenkant van het pilletje in plaats van er middenin. */
.kopbalk nav a.kopbalk__inlog {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-vol);
  padding: 0 17px; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em;
  background: var(--roest-knop); color: var(--tekst-op-roest);
  text-decoration: none; flex: none; white-space: nowrap;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--roest-diep) 30%, transparent);
  transition: background .2s var(--veer), transform .2s var(--veer);
}
.kopbalk nav a.kopbalk__inlog:hover { background: var(--roest-diep); color: var(--tekst-op-roest); transform: translateY(-1px); }
/* de meelopende onderstreping van de menu-links hoort hier niet bij */
.kopbalk nav a.kopbalk__inlog::after { display: none; }

/* ---------- de rustige stroom over de hele pagina --------------------------
   Een laag óver de secties, niet erachter: elke sectie heeft zijn eigen
   dekkende vlak, dus eronder zou je hem nergens zien. Op deze dekking (de
   banen staan in het script op 10 procent roest) doet hij niets af aan de
   leesbaarheid, en roest is de enige kleur die het op het lichte én het
   donkere vlak volhoudt. Hij komt pas op zodra je de kop voorbij bent, want
   daar beweegt al iets. */
.achtergrond {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 30; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--veer);
}
.achtergrond.aan { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .achtergrond { display: none; } }

/* de leesbalk: hoever je op de pagina bent */
.voortgang {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 55;
  background: var(--roest); transform-origin: 0 50%; scale: 0 1;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .voortgang {
      animation: leesbalk linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes leesbalk { from { scale: 0 1; } to { scale: 1 1; } }

/* ============================================================================
   1. de kop van de pagina
   ========================================================================== */
/* de bovenrand zit nu in .laag-tekst, want het netwerk moet tot onder de
   kopbalk doorlopen */
.hero { position: relative; padding: 0 0 clamp(38px, 5vw, 58px); overflow: clip; }

.hero__tekst { display: grid; gap: 20px; }
.hero h1 {
  font-size: clamp(34px, 5vw, 62px); line-height: 1.02; max-width: 17ch;
  font-stretch: 108%; letter-spacing: -.04em;
}
.hero h1 .accent { color: var(--roest-tekst); }
.hero__sub { max-width: 52ch; font-size: clamp(16px, 1.4vw, 18px); color: var(--tekst-2); line-height: 1.55; }
.hero__sub a { color: var(--roest-tekst); text-decoration-color: color-mix(in srgb, var(--roest) 45%, transparent); }
.hero__sub a:hover { text-decoration-color: currentColor; }
.hero__knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* --- het sorteerraster in de kop --------------------------------------------
   In de kop staat een canvas over de volle breedte: een paar honderd blokjes
   die eerst kriskras liggen en met een golf van links naar rechts in een strak
   raster schuiven. Het tekenwerk zit in assets/hero-raster.js en haalt zijn
   kleuren en dekkingen uit de variabelen bovenaan dit bestand, dus licht en
   donker volgen vanzelf. Hier staat alleen de bak eromheen.

   .vast    de laag met het canvas, de sluier en de tekst erover
   .doek    het canvas zelf, vult die laag helemaal
   .sluier  dempt de banen achter de tekst, valt naar de randen weg
   ------------------------------------------------------------------------- */
.vast {
  position: relative; z-index: 1;
  min-height: clamp(560px, 74dvh, 740px);
  display: grid; align-items: center;
  overflow: clip; isolation: isolate;
}
/* het canvas is aanklikbaar: dan speelt de animatie opnieuw af */
.doek { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* twee lagen over elkaar: een enkel verloop wordt vlekkerig */
.sluier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      var(--vlak) 0%,
      color-mix(in oklab, var(--vlak) 90%, transparent) 24%,
      color-mix(in oklab, var(--vlak) 40%, transparent) 46%,
      transparent 64%),
    radial-gradient(120% 90% at 2% 50%,
      color-mix(in oklab, var(--vlak) 74%, transparent) 0%,
      transparent 60%);
}

/* de tekst ligt over het netwerk, met onderaan ruimte voor het gespreksvenster */
.laag-tekst {
  position: relative; z-index: 2;
  /* de tekstlaag vangt geen klikken meer, alleen het tekstblok zelf. Zo kun je
     op het netwerk klikken op de plekken waar deze laag er wel over ligt maar
     niets staat. */
  pointer-events: none;
  padding-block: clamp(40px, 5.5vh, 68px) clamp(252px, 29vh, 300px);
}
.laag-tekst .hero__tekst { max-width: 40rem; pointer-events: auto; }
/* ---------- de kop van de definitieve pagina -------------------------------
   De tekst staat in het midden en het sorteerraster loopt over de volle
   breedte door (assets/hero-raster.js). De blokjes liggen eerst kriskras en
   schuiven met een golf van links naar rechts in het gelid; als alles staat
   ademt het raster alleen nog. Het begint pas als de logo-opening weg is,
   anders komen er twee dingen tegelijk voorbij.                             */
.hero--midden .vast { min-height: clamp(540px, 74dvh, 740px); }
.hero--midden .laag-tekst { padding-block: clamp(48px, 7vh, 88px); }
.hero--midden .laag-tekst .hero__tekst {
  max-width: 48rem; margin-inline: auto;
  text-align: center; justify-items: center; gap: 18px;
}
.hero--midden h1 { font-size: clamp(38px, 5.4vw, 66px); text-wrap: balance; }
/* de tweede regel: kleiner dan de kop, groter dan de alinea */
.hero__regel {
  font-size: clamp(18px, 2.2vw, 26px); font-weight: 650; font-stretch: 104%;
  letter-spacing: -.03em; line-height: 1.25; color: var(--tekst-2);
  text-wrap: balance;
}
.hero__regel .accent { color: var(--roest-tekst); }
.hero--midden .hero__sub { max-width: 52ch; text-wrap: pretty; }
.hero--midden .hero__knoppen { justify-content: center; }

/* De sluier is een ovaal achter het tekstblok. Hij dempt het raster daar tot
   het nog net schemert, en valt naar de randen helemaal weg, zodat je aan de
   buitenkant onverstoord ziet hoe de blokjes in het gelid schuiven. Sterker
   maken kost de animatie, zwakker maken kost de leesbaarheid van de tekst: 84
   procent in de kern is de grens waar allebei nog klopt (nagemeten 7 sep 2026,
   licht en donker). De tweede laag dempt alleen de bovenrand, anders lopen de
   blokjes tegen de kopbalk aan. */
.hero--midden .sluier {
  background:
    radial-gradient(31% 41% at 50% 50%,
      color-mix(in oklab, var(--vlak) 88%, transparent) 0%,
      color-mix(in oklab, var(--vlak) 84%, transparent) 52%,
      color-mix(in oklab, var(--vlak) 28%, transparent) 82%,
      transparent 100%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--vlak) 62%, transparent) 0%,
      transparent 15%, transparent 85%,
      color-mix(in oklab, var(--vlak) 62%, transparent) 100%);
}

/* zonder JavaScript wordt er niets getekend, dus dan geen lege bak van 700
   pixels: het canvas gaat weg, de laag krimpt naar de tekst en het
   gespreksvenster schuift gewoon onder de knoppen */
html:not(.js) .vast { min-height: 0; }
html:not(.js) .doek { display: none; }
html:not(.js) .laag-tekst { padding-block: clamp(46px, 6.5vh, 78px) 0; }

/* Op een smal scherm staat alles onder elkaar: eerst de tekst, dan een band
   met het netwerk, dan het gespreksvenster. Het venster staat dan gewoon in de
   flow en niet meer onderaan de laag vastgeprikt, anders valt het op een
   telefoon onder de onderrand van het scherm. De sluier kan weg, want de tekst
   ligt niet meer over het netwerk. */
@media (max-width: 900px) {
  /* Op een smal scherm staat alles onder elkaar: eerst de tekst, daaronder een
     band met de stroom. De sluier kan weg, want de tekst ligt er niet meer
     over, en zo blijft de metafoor ook op een telefoon te zien. */
  .vast, .hero--midden .vast {
    display: flex; flex-direction: column; align-items: stretch; min-height: 0;
  }
  .laag-tekst, .hero--midden .laag-tekst { order: 1; padding-block: 36px 0; }
  .laag-tekst .hero__tekst,
  .hero--midden .laag-tekst .hero__tekst { max-width: none; pointer-events: auto; }
  .doek {
    order: 2; position: relative; inset: auto;
    height: clamp(240px, 32dvh, 320px); margin-top: 18px;
  }
  .sluier { display: none; }
}

/* Verplichte bediening: beweging die naast tekst doorloopt moet stil te
   zetten zijn, en omdat er nu op elke hoogte van de pagina iets beweegt staat
   die knop in de kopbalk. Zonder JavaScript wordt er niets getekend en bij
   "minder beweging" staat alles al stil, dus dan is hij weg. */
html:not(.js) .beweging-knop { display: none; }
@media (prefers-reduced-motion: reduce) { .beweging-knop { display: none; } }

/* ---------- binnenkomst bij het laden en bij het scrollen ------------------
   Alles hieronder hangt aan .js, die in de <head> gezet wordt. Zonder JS staat
   er dus niets op opacity:0 en is de hele pagina gewoon zichtbaar.         */
.js .op { opacity: 0; translate: 0 16px; }
.js .op.aan { animation: opkomen .78s var(--veer) forwards; }
.op-1 { animation-delay: .05s } .op-2 { animation-delay: .13s }
.op-3 { animation-delay: .21s } .op-4 { animation-delay: .29s }
.op-5 { animation-delay: .37s } .op-6 { animation-delay: .45s }
@keyframes opkomen { to { opacity: 1; translate: 0 0; } }

/* per blok een andere binnenkomst, zodat de pagina niet één trucje herhaalt */
.js .op--links  { translate: -26px 0; }
.js .op--rechts { translate: 26px 0; }
.js .op--schaal { translate: 0 0; scale: .96; }
.js .op--links.aan, .js .op--rechts.aan { animation-name: opkomen-zij; }
.js .op--schaal.aan { animation-name: opkomen-schaal; }
@keyframes opkomen-zij { to { opacity: 1; translate: 0 0; } }
@keyframes opkomen-schaal { to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .op, .js .op--links, .js .op--rechts, .js .op--schaal {
    opacity: 1 !important; translate: none !important; scale: 1 !important; animation: none !important;
  }
  .voortgang { display: none; }
}

/* ---------- kleurzones ---------- */
.zone { padding: clamp(48px, 5.8vw, 84px) 0; position: relative; }
.zone--inkt { background: var(--inkt); color: var(--op-inkt); }
.zone--inkt h2, .zone--inkt h3 { color: var(--op-inkt); }
.zone--inkt .label { color: var(--op-inkt-2); }
.zone--inkt .groot { color: var(--op-inkt-2); }
.zone--papier { background: var(--opp); }
.zone__kop { display: grid; gap: 12px; margin-bottom: clamp(28px, 3.2vw, 40px); }
.zone__kop h2 { max-width: 22ch; text-wrap: balance; }
.zone__kop .groot { max-width: 58ch; }

/* ---------- gloed die de muis volgt (kaarten) ------------------------------
   Tien regels JS zetten --gloed-x/--gloed-y; de rest is CSS.               */
.gloed { position: relative; isolation: isolate; }
.gloed::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(190px circle at var(--gloed-x) var(--gloed-y),
              color-mix(in srgb, var(--roest) 16%, transparent), transparent 62%);
  opacity: 0; transition: opacity .35s var(--veer);
}
.gloed:hover::before { opacity: 1; }
@media (hover: none) { .gloed::before { display: none; } }

/* ============================================================================
   2. herken je deze problemen
   ========================================================================== */
.probleem__lijst {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--op-inkt-lijn); border-radius: var(--r-l); overflow: hidden;
}
.probleem__item {
  background: var(--inkt); padding: 26px 24px 28px; position: relative;
  transition: background .35s var(--veer);
}
.probleem__item:hover { background: color-mix(in srgb, var(--inkt) 88%, var(--roest)); }
.probleem__item h3 { font-size: 17.5px; margin-bottom: 7px; }
.probleem__item p { color: var(--op-inkt-2); font-size: 14.5px; }
.probleem__item .nr {
  font-size: 11px; font-weight: 700; font-stretch: 86%; letter-spacing: .16em;
  color: var(--roest); display: block; margin-bottom: 13px;
}
.probleem__slot {
  margin-top: 32px; font-size: clamp(17px, 1.7vw, 22px); font-weight: 650; font-stretch: 104%;
  letter-spacing: -.02em; line-height: 1.35; max-width: 44ch;
  border-left: 3px solid var(--roest); padding-left: 18px;
}

/* ============================================================================
   3. wat we bouwen
   ========================================================================== */
.producten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--lijn); border: 1px solid var(--lijn);
  border-radius: var(--r-l); overflow: hidden;
}
.product {
  background: var(--vlak); padding: 28px 26px 30px;
  display: grid; gap: 9px; align-content: start;
  transition: background .35s var(--veer);
}
.product:hover { background: var(--opp); }
.product--nu { background: var(--roest-zacht); }
.product--nu:hover { background: color-mix(in srgb, var(--roest-zacht) 82%, var(--opp)); }
.product__merk {
  width: 36px; height: 36px; border-radius: var(--r-m); display: grid; place-items: center;
  background: var(--opp); border: 1px solid var(--lijn); color: var(--roest-tekst);
  margin-bottom: 5px;
  transition: transform .4s var(--veer), border-color .4s var(--veer);
}
.product:hover .product__merk { transform: translateY(-3px) rotate(-5deg); border-color: var(--roest); }
.product--nu .product__merk { background: var(--opp); border-color: transparent; }
.product h3 { font-size: 19.5px; }
.product p { font-size: 14.5px; color: var(--tekst-2); }
.product__link {
  margin-top: 4px; font-size: 14px; font-weight: 650; color: var(--roest-tekst);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
.product__link svg { transition: transform .3s var(--veer); }
.product__link:hover { text-decoration: underline; }
.product__link:hover svg { transform: translateX(3px); }

/* het maatwerk-blok onder de vier producten */
/* Geen stippelkader eromheen meer: dat las als een knipvlak. Er staat nu
   één rechte lijn boven, en alles eronder staat gecentreerd. */
.maatwerk {
  margin-top: clamp(32px, 3.6vw, 46px);
  border-top: 1px solid var(--lijn-2);
  padding: clamp(26px, 3vw, 38px) 0 0;
  display: grid; gap: 10px; justify-items: center; text-align: center;
}
.maatwerk h3 { font-size: clamp(19px, 2vw, 23px); max-width: 44ch; text-wrap: balance; }
.maatwerk p { font-size: 15px; color: var(--tekst-2); max-width: 62ch; }
.maatwerk__rij { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 6px; }
.maatwerk__rij span {
  font-size: 13px; color: var(--tekst-2); border: 1px solid var(--lijn);
  background: var(--opp); border-radius: var(--r-vol); padding: 4px 12px;
  transition: border-color .3s var(--veer), color .3s var(--veer), transform .3s var(--veer);
}
.maatwerk__rij span:hover { border-color: var(--roest); color: var(--tekst); transform: translateY(-2px); }

.terzijde {
  margin: 22px auto 0; font-size: 14px; color: var(--tekst-3);
  max-width: 62ch; line-height: 1.5; text-align: center;
}

/* ============================================================================
   4. de persoonlijke assistent
   ========================================================================== */
.subkop { display: grid; gap: 8px; margin: clamp(40px, 4.4vw, 60px) 0 20px; }
.subkop:first-of-type { margin-top: 0; }
.subkop h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.03em; text-wrap: balance; }
.subkop p { font-size: 15px; color: var(--tekst-2); max-width: 64ch; }

.koppel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.koppel__kaart {
  background: var(--opp); border: 1px solid var(--lijn); border-radius: var(--r-m);
  padding: 16px 18px 18px; display: grid; gap: 4px; align-content: start;
  transition: transform .4s var(--veer), border-color .4s var(--veer), box-shadow .4s var(--veer);
}
.koppel__kaart:hover {
  transform: translateY(-4px); border-color: color-mix(in srgb, var(--roest) 45%, var(--lijn));
  box-shadow: var(--schaduw-zacht);
}
.koppel__kaart svg { color: var(--roest-tekst); margin-bottom: 4px; transition: transform .4s var(--veer); }
.koppel__kaart:hover svg { transform: scale(1.12) rotate(-4deg); }
.koppel__kaart b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.koppel__kaart span { font-size: 13.5px; color: var(--tekst-2); line-height: 1.45; }
.koppel__noot { margin-top: 14px; font-size: 14px; color: var(--tekst-3); max-width: 66ch; }

/* "en dit maakt hij ook gewoon voor je": de dingen die hij maakt en die niet
   in een koppeling passen. Vast op drie kolommen: met auto-fit werden het er
   vijf en bleef er onderin een gat van één lege cel staan. */
.kan-ook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--r-l); overflow: hidden; }
.kan-ook__item {
  background: var(--opp); padding: 18px 18px 20px; display: grid; gap: 5px; align-content: start;
  transition: background .35s var(--veer);
}
.kan-ook__item:hover { background: var(--vlak); }
/* over de volle breedte: geldt voor alles in het raster, en zo blijven er
   geen lege hokjes in de laatste rij over */
.kan-ook__item--breed {
  grid-column: 1 / -1; justify-items: center; text-align: center;
  padding: clamp(22px, 2.6vw, 30px) 18px;
}
.kan-ook__item--breed b { font-size: clamp(16px, 1.7vw, 19px); }
.kan-ook__item--breed span { max-width: 58ch; font-size: 14px; text-wrap: balance; }
.kan-ook__item svg { color: var(--roest-tekst); }
.kan-ook__item b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.kan-ook__item span { font-size: 13.5px; color: var(--tekst-2); line-height: 1.45; }
.kan-ook__slot {
  margin-top: 18px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 650; font-stretch: 104%;
  letter-spacing: -.02em; line-height: 1.35; max-width: 48ch;
  border-left: 3px solid var(--roest); padding-left: 18px;
}

/* De telefoon staat los in het midden, niet meer als sticky kolom naast een
   tijdlijn. De klasse .verhaal__vast blijft de haak waar site.js de binnenkomst
   aan hangt; zodra die .aan erop zet, komen de regels een voor een. Dat gaat
   met CSS en niet met een script, want er hoeft niets geteld te worden. */
.verhaal__vast.telefoon-los { max-width: 430px; margin: clamp(30px, 4vw, 46px) auto 0; }
.telefoon-los .bericht__noot { margin-inline: auto; text-align: center; max-width: 42ch; }

.js .telefoon-los .bericht__regel { opacity: 0; translate: 0 8px; filter: blur(3px); }
.js .telefoon-los.aan .bericht__regel { animation: regel-in .55s var(--veer) forwards; }
.js .telefoon-los.aan .bericht__regel:nth-of-type(2) { animation-delay: .24s; }
.js .telefoon-los.aan .bericht__regel:nth-of-type(3) { animation-delay: .48s; }
.js .telefoon-los.aan .bericht__regel:nth-of-type(4) { animation-delay: .72s; }
.js .telefoon-los.aan .bericht__regel:nth-of-type(5) { animation-delay: .96s; }
.js .telefoon-los.aan .bericht__regel:nth-of-type(6) { animation-delay: 1.20s; }
.js .telefoon-los.aan .bericht__regel:nth-of-type(7) { animation-delay: 1.44s; }
.js .telefoon-los.aan .bericht__regel:nth-of-type(8) { animation-delay: 1.68s; }
.js .telefoon-los.aan .bericht__regel:nth-of-type(9) { animation-delay: 1.92s; }
@keyframes regel-in { to { opacity: 1; translate: 0 0; filter: blur(0); } }

.js .telefoon-los .bericht__antwoord { opacity: 0; translate: 0 8px; }
.js .telefoon-los.aan .bericht__antwoord { animation: regel-in .55s var(--veer) 2.24s forwards; }

@media (prefers-reduced-motion: reduce) {
  .js .telefoon-los .bericht__regel,
  .js .telefoon-los .bericht__antwoord {
    opacity: 1 !important; translate: none !important; filter: none !important; animation: none !important;
  }
}

/* de telefoon met het berichtje */
.telefoon {
  border: 1px solid var(--lijn); border-radius: 26px; background: var(--opp);
  padding: 12px; box-shadow: var(--schaduw-diep);
}
/* het schermpje is altijd licht, dus de tekst erin houdt zijn eigen kleur:
   staat de telefoon op een donkere sectie, dan zou hij anders de lichte
   tekstkleur van die sectie erven en onleesbaar worden */
.telefoon__scherm {
  border-radius: 16px; background: var(--vlak); color: var(--tekst);
  padding: 16px 16px 18px;
}
.bericht__kop {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 13px; margin-bottom: 4px; border-bottom: 1px solid var(--lijn);
}
.bericht__bol {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--roest-knop); color: var(--tekst-op-roest);
  font-size: 12px; font-weight: 700; font-stretch: 88%;
}
.bericht__wie { font-size: 13.5px; font-weight: 650; }
.bericht__tijd { margin-left: auto; font-size: 12px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }

.bericht__regel {
  font-size: 14.5px; line-height: 1.5; margin-top: 11px;
  transition: opacity .5s var(--veer), translate .5s var(--veer), filter .5s var(--veer);
}
.js .bericht__regel { opacity: 0; translate: 0 8px; filter: blur(3px); }
.js .bericht__regel.aan { opacity: 1; translate: 0 0; filter: blur(0); }
.bericht__regel .num { font-weight: 650; color: var(--roest-tekst); }
.bericht__vraag { font-weight: 650; color: var(--tekst); }
.bericht__antwoord {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
  transition: opacity .5s var(--veer) .15s, translate .5s var(--veer) .15s;
}
.js .bericht__antwoord { opacity: 0; translate: 0 8px; }
.js .bericht__antwoord.aan { opacity: 1; translate: 0 0; }
.bericht__antwoord span {
  border: 1px solid var(--lijn-2); border-radius: var(--r-vol);
  padding: 6px 15px; font-size: 13.5px; color: var(--tekst-2);
}
.bericht__antwoord span:first-child { border-color: var(--roest); color: var(--roest-tekst); font-weight: 650; }


.bericht__noot { margin-top: 15px; font-size: 14px; color: var(--tekst-3); max-width: 46ch; }
.zone--inkt .bericht__noot { color: var(--op-inkt-2); }

.uitsmijter {
  margin-top: clamp(30px, 3.4vw, 44px); font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 650; font-stretch: 104%;
  letter-spacing: -.02em; line-height: 1.35; max-width: 48ch;
  border-left: 3px solid var(--roest); padding-left: 18px;
}

/* waar hij bij mag / wat hij niet doet */
.grens {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px); margin-top: clamp(30px, 3.5vw, 46px);
}
.grens h3 { font-size: 17.5px; }
.grens ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.grens li { display: flex; gap: 11px; font-size: 14.5px; color: var(--tekst-2); align-items: flex-start; }
.grens li svg { flex: none; margin-top: 4px; }
.grens--ja li svg { color: var(--roest-tekst); }
.grens--nee li svg { color: var(--tekst-3); }

/* ============================================================================
   5. margeanalyse
   ========================================================================== */
.marge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--r-l); overflow: hidden; }
.marge__vraag {
  background: var(--opp); padding: 22px 22px 24px; display: grid; gap: 7px; align-content: start;
  transition: background .35s var(--veer);
}
.marge__vraag:hover { background: var(--vlak); }
.marge__vraag .nr {
  font-size: 11px; font-weight: 700; font-stretch: 86%; letter-spacing: .16em;
  color: var(--roest-tekst); margin-bottom: 2px;
}
.marge__vraag b { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.marge__vraag span { font-size: 14px; color: var(--tekst-2); line-height: 1.5; }

/* ============================================================================
   7. contact
   ========================================================================== */
.contact { text-align: center; display: grid; gap: 20px; justify-items: center; }
.contact .hoofdstuk { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.contact h2 { max-width: 20ch; }
.contact .groot { max-width: 50ch; }
.contact__mail { font-size: clamp(15px, 1.4vw, 17px); font-weight: 600; color: var(--tekst-2); text-decoration: none; }
.contact__mail:hover { color: var(--tekst); text-decoration: underline; }

/* het losse blokje: mail de assistent zelf */
.proef {
  margin-top: clamp(30px, 3.4vw, 44px); text-align: left;
  border: 1px solid var(--lijn); border-radius: var(--r-l); background: var(--opp);
  padding: 24px 26px 26px; max-width: 640px; width: 100%;
  display: grid; gap: 9px; box-shadow: var(--schaduw-zacht);
}
.proef__kop { display: flex; align-items: center; gap: 11px; }
.proef__bol {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--roest-knop); color: var(--tekst-op-roest); font-size: 13px; font-weight: 700; font-stretch: 88%;
  position: relative;
}
.proef__bol::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--roest); opacity: .45;
  animation: kloppen 3s var(--veer) infinite;
}
@media (prefers-reduced-motion: reduce) { .proef__bol::after { animation: none; } }
.proef__kop b { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.proef p { font-size: 14.5px; color: var(--tekst-2); max-width: 60ch; }
.proef__adres {
  font-size: 15px; font-weight: 650; color: var(--roest-tekst); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
}
.proef__adres:hover { text-decoration: underline; }

/* ---------- voet ---------- */
.voet { padding: 36px 0 46px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--tekst-2); }
.voet__in { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.voet__logo { height: 19px; width: auto; opacity: .75; }
.voet__rechts { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.voet__rechts a { text-decoration: none; }
.voet__rechts a:hover { text-decoration: underline; }
.voet__gegevens {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lijn);
  display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 13px; color: var(--tekst-3);
}
.voet__gegevens b { font-weight: 600; color: var(--tekst-2); }

/* ---------- logo dat meekleurt met de stand ---------- */
.logo-img { content: url("logo/fleurenflow-lockup.svg"); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-thema="licht"])) .logo-img { content: url("logo/fleurenflow-lockup-wit.svg"); }
}
:root[data-thema="donker"] .logo-img { content: url("logo/fleurenflow-lockup-wit.svg"); }
:root[data-thema="licht"] .logo-img { content: url("logo/fleurenflow-lockup.svg"); }

/* ---------- kleiner scherm ---------- */
@media (max-width: 1040px) {
  .hero--midden .hero__sub { max-width: 62ch; }
}
@media (max-width: 980px) {
  .probleem__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kan-ook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wrap { padding: 0 18px; }
  .kopbalk__in { padding: 12px 18px; gap: 12px; }
  .kopbalk nav { gap: 16px; }
  .kopbalk nav a.verberg-klein { display: none; }
  /* menu-items nooit over twee regels: dan duwen ze het logo weg */
  .kopbalk nav a { white-space: nowrap; }
  .probleem__lijst { grid-template-columns: minmax(0, 1fr); }
  .producten { grid-template-columns: minmax(0, 1fr); }
  .grens { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hoofdstuk { gap: 11px; }
}
@media (max-width: 700px) {
  /* op een smal scherm komen blokken van onderen in beeld, niet van opzij:
     die 26px zijwaarts gaf tijdens de animatie een duwtje voorbij de rand. */
  .js .op--links, .js .op--rechts { translate: 0 16px; }
  .js .op--links.aan, .js .op--rechts.aan { animation-name: opkomen; }
}
@media (max-width: 460px) {
  /* naast het logo, inloggen en de twee knopjes is geen plek meer voor de
     menu-links: die staan allemaal ook gewoon in de pagina */
  .kopbalk nav a[href^="#"] { display: none; }
  .kopbalk nav { gap: 10px; }
  .kopbalk nav a.kopbalk__inlog { padding: 0 13px; min-height: 32px; }
}
@media (max-width: 560px) {
  /* het merkteken maakt het logo breder dan het woordmerk alleen was;
     op een telefoon een maatje kleiner, anders duwt het het menu weg */
  .kopbalk__logo { height: 20px; }
  body { font-size: 16px; }
  .hero__knoppen .knop, .knoprij .knop { width: 100%; justify-content: center; }
  .koppel { grid-template-columns: minmax(0, 1fr); }
  .kan-ook { grid-template-columns: minmax(0, 1fr); }
  .marge { grid-template-columns: minmax(0, 1fr); }
  .telefoon-los { max-width: none; }
}

/* ============================================================================
   .fout-404 : overrides die alleen op 404.html gelden (<body class="fout-404">)
   ----------------------------------------------------------------------------
   404.html hergebruikt deze sitestijl, maar zet twee soorten tekst op een licht
   vlak (de gewone .zone, achtergrond --vlak = #F1EFEA in de lichte stand) waar
   de kleur voor een gedempte rol bedoeld is. Beide haalden in de lichte stand
   geen 4,5:1 (WCAG AA, normale tekst). Opgelost met bestaande tokens, geen nieuwe
   kleur. Contrast licht / donker (achtergrond --vlak in beide standen):

   1. Het label bovenaan (.label) en de voetregel (.voet) gebruiken --tekst-3
      (#83888F licht). Op --vlak in de lichte stand: 3,1:1. Nu --tekst-2
      (#565B64)  ->  5,9:1 licht / 8,5:1 donker.
   2. De maillink onderaan (.contact__mail) staat op deze pagina buiten een
      inktvlak. In deze CSS krijgt .contact__mail al --tekst-2 (5,9:1 / 8,5:1),
      dus AA-proof, maar op 404.html zetten we hem bewust op --roest-tekst
      (#B23F12 licht): 5,1:1 licht / 6,9:1 donker, hover --roest-diep 7,1:1 / 8,2:1.
      Zo is de "meld een gebroken link"-mail duidelijk een link.

   De kleurtokens zijn ongewijzigd gebleven bij de animatieronde van 2 september
   2026 (26 van de 26 :root-waarden gelijk), dus deze cijfers gelden nog steeds.
   ========================================================================== */
.fout-404 .contact__mail { color: var(--roest-tekst); }
.fout-404 .contact__mail:hover { color: var(--roest-diep); }
.fout-404 .label { color: var(--tekst-2); }
.fout-404 .voet { color: var(--tekst-2); }


/* ==========================================================================
   DE OPENING
   Het logo tekent zichzelf groot in beeld, schuift daarna naar zijn plek in de
   kopbalk, en dan staat de site er.

   Belangrijk: de pagina zelf wordt gewoon meteen getekend en staat er compleet
   achter. De opening is een deken eroverheen, geen vervanging. Zou ik de
   pagina verstoppen (met opacity 0 of display none), dan telt Google de
   grootste tekst pas mee op het moment dat de deken weg is, en dat kost je
   punten op laadsnelheid. Nu telt hij gewoon vanaf het eerste tekenwerk.
   Losse SVG-vormen tellen zelf niet mee, dus de deken kost niets.

   Hij komt alleen in beeld als de <head> .intro-aan heeft gezet. Die keuze
   valt vóór het eerste tekenwerk, dus je ziet nooit een flits van het
   verkeerde. Wie hem al gezien heeft, via een ankerlink binnenkomt, beweging
   heeft uitgezet of op een geknepen verbinding zit, krijgt hem niet.

   Gaat het JS stuk of laadt het niet, dan haalt de laatste regel hieronder de
   deken alsnog weg. Je blijft dus nooit naar een logo zitten kijken.
   ========================================================================== */
.intro { display: none; }

.intro-aan .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 300;
  background: var(--vlak);
  transition: background-color .55s var(--veer);
  /* noodrem: weg na de animatie, ook als het JS nooit aankomt */
  animation: intro-noodrem .7s var(--veer) calc(3000ms * var(--intro-tempo)) both;
}
.intro--vertrekt { background: transparent !important; pointer-events: none; }
@keyframes intro-noodrem { to { opacity: 0; visibility: hidden; } }

.intro__logo { width: min(64vw, 660px); height: auto; display: block; }

.intro__hint {
  position: absolute; left: 0; right: 0; bottom: 38px;
  text-align: center; font-size: 13px; color: var(--tekst-3);
  opacity: 0;
  animation: intro-hint .6s var(--veer) calc(1400ms * var(--intro-tempo)) both;
}
.intro--vertrekt .intro__hint { opacity: 0; transition: opacity .2s linear; animation: none; }
@keyframes intro-hint { to { opacity: 1; } }

/* De twee streepjes zijn hier lijnen met ronde uiteinden in plaats van
   afgeronde balken. Exact dezelfde vorm, maar zo kan de lijn zichzelf
   intekenen met de ronde kop voorop. */
.intro__mrk {
  fill: none; stroke-width: 144; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.intro__mrk--roest { stroke: var(--roest); }
.intro__mrk--inkt  { stroke: var(--tekst); }
.intro__wm--inkt   { fill: var(--tekst); }
.intro__wm--roest  { fill: var(--roest); }
.intro__wm { clip-path: inset(-2% 104% -2% -2%); }

.intro-aan .intro__streep-1 { animation: intro-teken calc(850ms * var(--intro-tempo)) var(--veer) 0ms both; }
.intro-aan .intro__streep-2 { animation: intro-teken calc(780ms * var(--intro-tempo)) var(--veer) calc(320ms * var(--intro-tempo)) both; }
.intro-aan .intro__wm       { animation: intro-veeg  calc(1050ms * var(--intro-tempo)) var(--veer) calc(720ms * var(--intro-tempo)) both; }

@keyframes intro-teken { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes intro-veeg  { from { clip-path: inset(-2% 104% -2% -2%); } to { clip-path: inset(-2% -2% -2% -2%); } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}

/* ============================================================================
   inloggen.html: het echte inlogscherm
   Eén kaart in het midden van een leeg vlak, zodat er verder niets afleidt.
   ========================================================================== */
.inlog__zone { display: grid; place-items: center; min-height: 72vh; }
.inlog__wrap { display: grid; justify-items: center; }

.inlog {
  width: 100%; max-width: 420px; display: grid; gap: 10px;
  border: 1px solid var(--lijn); border-radius: var(--r-l);
  background: var(--opp); box-shadow: var(--schaduw-zacht);
  padding: clamp(26px, 3.4vw, 34px);
}
.inlog h1 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.03em; }
.inlog__sub { font-size: 15px; color: var(--tekst-2); margin-bottom: 8px; }

.veld { display: grid; gap: 6px; }
.veld label {
  font-size: 13px; font-weight: 620; letter-spacing: -.01em; color: var(--tekst-2);
}
.veld input {
  font: inherit; font-size: 15px; color: var(--tekst);
  background: var(--vlak); border: 1px solid var(--lijn-2);
  border-radius: var(--r-m); padding: 11px 13px; width: 100%;
  transition: border-color .2s var(--veer), box-shadow .2s var(--veer);
}
.veld input::placeholder { color: var(--tekst-3); }
.veld input:hover { border-color: var(--tekst-3); }
.veld input:focus {
  outline: none; border-color: var(--roest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roest) 22%, transparent);
}

.inlog__knop { justify-content: center; width: 100%; margin-top: 8px; }

.inlog__melding {
  font-size: 14px; line-height: 1.5; color: var(--tekst);
  border-left: 3px solid var(--roest); padding: 2px 0 2px 12px;
}
.inlog__hulp { font-size: 13.5px; color: var(--tekst-3); line-height: 1.5; }
.inlog__hulp a { color: var(--roest-tekst); text-decoration: underline; }

.inlog__onder { justify-content: center; }