/* ===========================================================================
 * home-hero.css — de homepage tussen de headerbalk en de footer
 * ---------------------------------------------------------------------------
 * Uit de handoff van Claude Design ("Splitify Home"). Het prototype zette elke
 * waarde als inline style op een React-element; hier staan ze als classes, en
 * elke kleur komt uit /designsysteem/splitify.css.
 *
 * DRIE KLEUREN UIT HET PROTOTYPE ZIJN VERVANGEN
 *   #8FB39D  de mono-tekst op de donkere hero. Gemeten op de heroachtergrond
 *            (--kv-accent-diep): 4,42:1 — onder de 4,5:1 die WCAG 2.1 SC 1.4.3
 *            voor gewone tekst eist, en dit is 10px. Vervangen door
 *            --kv-kopband-mat: 6,22:1 op datzelfde vlak.
 *   #F0EDE3  de bronband onder in het pandkaartje. Vervangen door --kv-chip;
 *            de tekst erop staat op --kv-inkt-zacht (5,20:1).
 *   #A34438  komt als --kv-label-g uit de tokens; ongewijzigd.
 *
 * De stad zelf tekent op een canvas en leest geen custom property; zijn palet
 * staat in homemodules/stad-palet.js met de reden erbij.
 * ======================================================================== */

/* ================================================================= balk ===
 * DE BOVENBALK, LICHT EN GECENTREERD — alleen op deze pagina
 *
 * De eigenaar wees /portefeuille aan als het voorbeeld: kalkwit vlak, en merk,
 * menu en de rest in dezelfde gecentreerde kolom als de romp eronder, in
 * plaats van tegen de schermranden geduwd.
 *
 * WAAROM EEN MODIFIER EN GEEN WIJZIGING VAN .app-header
 *   .app-header staat op 43 pagina's. Hem hier omkleuren zou al die pagina's
 *   meenemen, en dat is een besluit over de hele site en niet over de
 *   homepage. Dit bestand wordt alleen door index.html geladen, dus de
 *   modifier reikt precies zo ver als de vraag reikte. Wil je het site-breed,
 *   dan verhuizen deze regels naar .app-header in style.css.
 *
 * De maten komen uit /portefeuillemodules/portefeuille.css (.pf-balk), zodat
 * de twee balken werkelijk gelijk zijn en niet alleen op elkaar lijken.
 * ======================================================================== */
/* DE KOLOM
   Merk, menu, herotekst, de strook en de voetregel staan alle vijf in dezelfde
   gecentreerde kolom; alleen de VLAKKEN (de balk, de heroachtergrond, de
   strookband) lopen van rand tot rand. Eigenaar, 9 september 2026: "alles meer
   naar het midden qua content, kleuren en balken mogen breed blijven."
   Dezelfde maat als .pf-balk-binnen en .pf-app op /portefeuille. */
:root {
  /* Deze kolom stond hier als kaal getal (1200) toen de homepage de enige
     pagina was die hem aanhield. Sinds 10 september 2026 doet de hele site het
     -- --kv-romp-b is van 940 naar 1152 gegaan -- dus rekent hij vanaf het
     token. Twee getallen die hetzelfde horen te zijn lopen vroeg of laat uit
     elkaar; hier kan dat niet meer.
     LET OP: hero-stad.js draagt hem als KOLOM_B nog wel als getal, want een
     canvas leest geen custom property. Verander je het token, verander dat
     mee. */
  --home-kolom: calc(var(--kv-romp-b) + 2 * var(--kv-marge-scherm));
  /* Afstand van de schermrand tot de INHOUD in die kolom. */
  --home-kolom-buiten: max(0px, (100% - var(--home-kolom)) / 2);
  --home-kolom-marge: calc(var(--home-kolom-buiten) + var(--kv-marge-scherm));
  /* DE TEKENING WORDT NIET VERDER OPGEBLAZEN DAN 1920 PX BREED
     object-fit: cover vult de hero altijd, en op een breed venster betekent dat
     vergroten: gemeten 9 september 2026 op een venster van 3192 px stond de
     tekening op schaal 2,0 — twee keer zo groot als getekend, met de boven- en
     onderkant weggesneden. Dat is wat "uitgerekt" is. Met deze grens loopt de
     schaal niet verder op dan 1,2 en staat de tekening als een gecentreerde
     band in de hero; links en rechts blijft de heroachtergrond over, en dat is
     dezelfde groen. Onder 1920 px verandert er niets: min(100%, …). */
  --home-teken-max: 1920px;
  /* Hoe ver de tekening aan weerszijden uitdooft, als PERCENTAGE van het beeld
     en niet in pixels of vw. Dat is geen detail:
       - het beeld is 1600 eenheden breed en de uitgelichte woningen staan tot
         x = 1427, dus er is 173 eenheden (10,8%) speling aan de rechterkant.
         Een fade in vw liep daar overheen -- gemeten op 3192 px dekte een fade
         van 8vw (255px) de rechterderde van pand 1 af.
       - een percentage schaalt vanzelf mee met object-fit: cover, dus de fade
         bedekt op elke venstermaat exact hetzelfde stuk tekening.
     Negen procent houdt de woningen vrij en is breed genoeg om de rand weg te
     werken. Links blijft het daarbij. */
  --home-fade: 9%;
  /* RECHTS DOOFT VERDER UIT, en dat is geen symmetriekwestie.
     De tekst staat links en de tekening rechts, dus het beeld weegt naar rechts
     over. Eigenaar, 9 september 2026: "de pagina leunt iets teveel naar
     rechts." Een langere uitdoving haalt daar gewicht weg zonder de tekening te
     verplaatsen.
     RECHTS werkt anders, en niet met een percentage. Daar moet precies het
     stuk dat BUITEN de kolom valt wegzakken tot een schim, plus een staart die
     nog even doorloopt. Dat stuk is geen vast percentage van het beeld maar
     hangt van de venstermaat af: de tekening is min(100%, 1920) breed en de
     kolom 1200, dus de overhang is (breedte - 1200) / 2. Gemeten: 32px op een
     venster van 1280, 112px op 1440, 360px op 2869 en breder.
     --home-overhang rekent dat in de tekening zelf uit -- procenten in een
     gradient meten tegen de doos waar hij op staat, en dat is precies deze.
     De omlijning en de lijn naar het kaartje liggen in .home-hero__gloed, met
     z-index 4 bóven deze sluier, dus die blijven hoe dan ook scherp. */
  --home-overhang: max(0px, (100% - var(--home-kolom)) / 2);
  --home-fade-rechts: calc(var(--home-overhang) + 170px);
}

.app-header--licht {
  height: auto;
  min-height: var(--kv-balk-h);
  padding: 0;
  background: var(--kv-paneel);
  border-bottom: 1px solid var(--kv-rand);
  color: var(--kv-inkt);
  display: block;
}

.app-header--licht .app-header__binnen {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--kv-balk-h);
  /* Dezelfde plafondformule als .pf-balk-binnen: de rand van de balkinhoud
     valt samen met de rand van de kolom eronder. */
  max-width: var(--home-kolom);
  margin: 0 auto;
  padding: 0 var(--kv-marge-scherm);
}

/* Op het lichte vlak wordt de streep onder het woordmerk het accent; op de
   donkere kopband is dat --kv-kopband-zacht. Beide staan doorgemeten in het
   design system. */
.app-header--licht .app-header__title {
  color: var(--kv-inkt);
  border-bottom-color: var(--kv-accent);
}

/* HET WOORDMERK REKT ZICH EEN KEER UIT
 * /portefeuille laat SPLITIFY eeuwig ademen (.pf-merk, 7s per cyclus). Hier is
 * het eenmalig: bij het laden schuiven de letters uit elkaar tot de rustmaat
 * van het systeem (--spatie-merk, .24em) en daar blijven ze staan. Op een
 * voorpagina waar de tekening al beweegt is een merk dat blijft ademen een
 * tweede beweging die om aandacht vraagt.
 *
 * TWEE DINGEN DIE NIET VANZELF GOED GAAN, allebei overgenomen uit de kop van
 * .pf-merk in portefeuillemodules/portefeuille.css:
 *
 * 1. DE STREEP. letter-spacing zet ook ruimte ACHTER de laatste letter; zonder
 *    compensatie steekt de groene lijn daar overheen. De negatieve margin-right
 *    loopt precies mee, dus de lijn is in elke fase even breed als het woord.
 *
 * 2. DE BUUR. SPLITIFY heeft acht letters, dus zeven tussenruimtes die
 *    meegroeien: het merk wordt tijdens de animatie ruim 1,5em breder. De
 *    container ademt daarom een even grote padding IN terwijl het woord
 *    uitademt, zodat zijn buitenmaat constant blijft.
 *      content    = woord + 7s     (de achtste ruimte haalt de marge weg)
 *      eindmaat   = woord + 7 x .24em = woord + 1.68em
 *      padding(s) = 1.68em - 7s   ->  .02em: 1.54em    .24em: 0
 */
.app-header--licht .app-header__brand {
  animation: homeMerkRuimte 1.1s cubic-bezier(.22, .61, .36, 1) both;
}

.app-header--licht .app-header__title {
  white-space: nowrap;
  animation: homeMerkRek 1.1s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes homeMerkRek {
  from { letter-spacing: .02em; margin-right: -.02em; }
  to   { letter-spacing: var(--spatie-merk); margin-right: calc(-1 * var(--spatie-merk)); }
}

@keyframes homeMerkRuimte {
  from { padding-right: 1.54em; }
  to   { padding-right: 0; }
}

/* De systeemvoorkeur wint: geen uitrekking, meteen de rustmaat. */
@media (prefers-reduced-motion: reduce) {
  .app-header--licht .app-header__brand,
  .app-header--licht .app-header__title {
    animation: none;
  }
}

/* De vier ingangen staan rechts in de kolom, niet naast het merk. Het merk
   duwt ze daarheen met margin-left:auto; .app-header__actions (de hamburger)
   volgt er direct achter, dus die auto-marge staat NIET meer op de actions. */
.app-header--licht .nav-links {
  margin-left: auto;
  gap: 2px;
}

/* Inloggen is de enige actie van de vier en draagt daarom het accent. Op het
   accentvlak staat --kv-paneel: 5,26:1, ruim boven de 4,5:1 van SC 1.4.3. */
.app-header--licht .app-header__link--knop {
  background: var(--kv-accent);
  color: var(--kv-paneel);
  padding: 8px 14px;
  border-radius: var(--kv-radius);
  font-weight: 600;
  margin-left: 6px;
}

.app-header--licht .app-header__link--knop:hover {
  background: var(--kv-accent-diep);
  color: var(--kv-paneel);
}

.app-header--licht .app-header__link {
  color: var(--kv-inkt-mat);
}

.app-header--licht .app-header__link:hover {
  color: var(--kv-inkt);
  background: var(--kv-chip);
}

/* Boven de hamburgergrens draagt dit vakje niets zichtbaars, maar het telt wel
   mee voor de flex-gap van 14px — en dan eindigt de navigatie 14px voor de
   rechterrand van de kolom in plaats van erop. Gemeten op 3192: nav tot 2151,
   kolom tot 2165. */
@media (min-width: 769px) {
  .app-header--licht .app-header__actions {
    display: none;
  }
}

.app-header--licht .hamburger-btn {
  color: var(--kv-inkt-mat);
}

/* ================================================================= voet ===
 * De disclaimerregel loopt mee in dezelfde kolom als de balk en de romp. De
 * rest van de voet (het drieluik met links en het contactformulier) heeft zijn
 * eigen plafond van 1100px in style.css en blijft daar staan.
 * ======================================================================== */
.home-voetregel {
  max-width: var(--home-kolom);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--kv-marge-scherm);
  padding-right: var(--kv-marge-scherm);
}

/* De voet stond op een eigen plafond van 1100px in style.css. Op deze pagina
   volgt hij dezelfde kolom als de rest; style.css blijft voor de andere
   pagina's staan zoals hij stond.
   En het zijn hier nog TWEE kolommen, niet drie: "Bronnen" is eraf. Zonder
   deze regel houdt style.css `1fr 1fr 1.5fr` aan, en dan schuift alles naar
   links met een gat waar de derde kolom stond. De verhouding hieronder geeft
   de linkerkolom precies genoeg voor zijn langste regel ("Beleidsmonitor") en
   de rest aan het formulier. */
.app-footer .footer-grid {
  max-width: var(--home-kolom);
  padding: 0 var(--kv-marge-scherm);
  /* Er is nog EEN blok over: het contactformulier. Eerst ging "Bronnen" eraf,
     daarna de kolom "Splitify". style.css houdt `1fr 1fr 1.5fr` aan voor 43
     pagina's; zonder deze regel zou het formulier hier in het eerste vak van
     drie staan, links aangedrukt met twee lege vakken ernaast. */
  grid-template-columns: 1fr;
}

/* Een invoerveld van 1152px breed leest niet. De voet houdt daarom een eigen,
   smallere maat aan dan de rest van de kolom -- links uitgelijnd, want dat is
   ook waar de kop en de strook beginnen. */
.app-footer .footer-col--contact {
  max-width: 560px;
}

/* De hero loopt van rand tot rand. .app-main is elders max-width + padding;
   die twee moeten weg zolang de landingsfase in beeld staat, en terugkomen
   zodra de bezoeker een adres heeft gekozen. app.js zet de class per fase. */
.app-main--vol {
  max-width: none;
  padding: 0;
}

/* ------------------------------------------------------------------ hero -- */
/* De hero snijdt zelf NIETS af. Dat lijkt verkeerd om — de tekening moet toch
   binnen de rand blijven — maar het afsnijden hoort bij de twee lagen die
   overlopen (de tekening en de omlijning), niet bij de doos eromheen. Stond het
   op de hero, dan viel de suggestielijst van het adresveld erbuiten: gemeten
   9 september 2026 werd die op de onderrand van de hero afgekapt, na anderhalve
   suggestie. */
.home-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(560px, 56.25vw, 820px);
  background: var(--kv-accent-diep);
  display: flex;
  align-items: center;
}

/* De tekening en de omlijning MOETEN dezelfde doos hebben: home-hero.js rekent
   de slice-fit van het canvas na om het kaartje en de lijn te plaatsen, en die
   som gaat over deze doos. Lopen ze uiteen, dan wijst de lijn naast het huis. */
/* De tekening staat GECENTREERD in de hero en loopt aan beide kanten buiten de
   kolom door. Ze is er even aan de rechterkolomrand opgehangen, en dat was
   verkeerd: dan houdt het beeld daar op en dat leest als afhakken. Eigenaar,
   9 september 2026: "niet afhakken maar zoals links, wel zichtbaar maar heel
   lichtjes." Links werkt dat omdat de leessluier over dat stuk heen ligt; wat
   je daar ziet is een vaag stadsbeeld dat wegzakt, niet een rand. Rechts doet
   de uitdoving hieronder nu hetzelfde.
   Geen translateX(-50%): die gaf deze doos een eigen compositielaag, en op een
   oneven restbreedte tekende de browser de rand daarvan met antialiasing. Dat
   was het streepje dat aan weerszijden zichtbaar was; de uitdoving zit BINNEN
   die laag en kan haar eigen rand niet afdekken. */
.home-hero__stad,
.home-hero__gloed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: min(100%, var(--home-teken-max));
  margin-inline: auto;
  overflow: hidden;
}

/* De uitdoving aan BEIDE randen van het beeld.
   Begint op VOLLE dekking, niet op .96: bij .96 blijft er vier procent van de
   tekening over op de rand, en dat is precies het streepje dat je op een breed
   venster tegen de heroachtergrond ziet staan. rgb(46,70,61) is diezelfde
   achtergrond (--kv-accent-diep), dus op de rand is er niets meer te zien om
   overheen te lopen. */
/* z-index 1 is geen smaak maar noodzaak sinds de canvassen absoluut liggen:
   ::before staat VOOR de kinderen in de boom, dus zonder dit getal zou de
   linkerfade onder de tekening vallen en was de kop niet meer leesbaar. */
.home-hero__stad::before,
.home-hero__stad::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.home-hero__stad::before {
  background: linear-gradient(90deg,
    rgb(46, 70, 61) 0,
    rgba(46, 70, 61, .82) calc(var(--home-fade) * .28),
    rgba(46, 70, 61, .40) calc(var(--home-fade) * .6),
    rgba(46, 70, 61, 0) var(--home-fade));
}

/* De stops hangen aan de overhang, niet aan een percentage van het beeld:
   op de rand vol dekkend, op de KOLOMRAND nog 0,42 (daar is de tekening dus
   duidelijk lichter maar wel te zien) en 170px verder is de sluier op. */
.home-hero__stad::after {
  background: linear-gradient(270deg,
    rgb(46, 70, 61) 0,
    rgba(46, 70, 61, .88) calc(var(--home-overhang) * .35),
    rgba(46, 70, 61, .62) calc(var(--home-overhang) * .75),
    rgba(46, 70, 61, .42) var(--home-overhang),
    rgba(46, 70, 61, .16) calc(var(--home-overhang) + 90px),
    rgba(46, 70, 61, 0) calc(var(--home-overhang) + 170px));
}

/* TWEE canvassen, niet een. De stad wisselt elke zeven seconden van pand en
   deed dat met een harde knip: drawImage over het vorige beeld heen. Nu ligt
   het nieuwe beeld op het oude en komt het eroverheen op. Dat kan omdat de drie
   beelden al bewaard worden (zie tekenStad) -- er wordt niets extra getekend,
   alleen een opacity die de compositor doet.
   Ze liggen absoluut: twee blokken van 100% hoog zouden anders onder elkaar
   staan. */
.home-hero__stad canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  opacity: 0;
  transition: opacity var(--kv-duur-wissel) var(--kv-curve);
}

/* Met de houder ervoor: `.home-hero__stad canvas` hierboven is specifieker dan
   een losse klasse, en zonder deze afstammeling bleven beide vellen op nul. */
.home-hero__stad canvas.home-hero__doekvel--op {
  opacity: 1;
}

/* Twee lagen over de tekening. De eerste dooft haar uit; de tweede zet een
   randvignet zodat de tekening niet tegen de headerbalk en de strook aan botst.
   TWEE FADES, GEEN EEN. Links dooft de tekening ver uit zodat de kop erop
   leesbaar blijft. Rechts is de fade veel korter en dient een ander doel: de
   tekening loopt tot de schermrand door en zou daar hard afgesneden staan.
   Nu vervaagt ze in dezelfde groen als de heroachtergrond, zodat het beeld
   binnen de compositie blijft in plaats van uit het scherm te lopen. De
   rechterfade begint pas voorbij de rechterrand van de kolom, dus hij raakt
   het pandkaartje niet.
   Volgorde telt: de eerste background-laag ligt bovenop. */
.home-hero__doek {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(46, 70, 61, .96) 0%,
      rgba(46, 70, 61, .90) 34%,
      rgba(46, 70, 61, .55) 52%,
      rgba(46, 70, 61, .10) 68%,
      rgba(46, 70, 61, .06) 100%);
}

@media (max-width: 1100px) {
  .home-hero__doek {
    background:
      linear-gradient(90deg,
        rgba(46, 70, 61, .96) 0%,
        rgba(46, 70, 61, .90) 40%,
        rgba(46, 70, 61, .55) 62%,
        rgba(46, 70, 61, .10) 82%,
        rgba(46, 70, 61, .06) 100%);
  }
}

.home-hero__vignet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(46, 70, 61, .10) 0%,
    rgba(46, 70, 61, 0) 30%,
    rgba(46, 70, 61, 0) 70%,
    rgba(46, 70, 61, .55) 100%);
}

.home-hero__gloed {
  pointer-events: none;
  z-index: 4;
}

/* Gemeten 9 september 2026: `height="100%"` als ATTRIBUUT gaf 1798 px in plaats
   van de 820 px van de ouder — de svg viel terug op de beeldverhouding van zijn
   viewBox. Daarmee klopte de slice-fit niet meer met die van het canvas
   ernaast, en stond de omtrek een halve hero te laag: buiten beeld. In CSS
   resolveert de hoogte wel. */
.home-hero__gloed svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------- tekst --- */
/* Twee lagen: __tekst is de kolom (breed, gecentreerd), __tekstblok is de
   leesbreedte daarbinnen. Het prototype had alleen het tweede en duwde dat met
   7vw van de linkerrand — op een breed scherm begon de kop dan ver links van
   het merk in de balk. Gemeten op 1440: kop op 101px, merk op 219px. */
.home-hero__tekst {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--home-kolom);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 88px) var(--kv-marge-scherm) clamp(48px, 8vh, 96px);
}

.home-hero__tekstblok {
  max-width: min(720px, 100%);
}

.home-hero__kruimel {
  font-family: var(--kv-font-mono);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--kv-kopband-mat);
}

.home-hero__kop {
  margin: 22px 0 0;
  font-size: clamp(40px, 5vw, 78px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: .98;
  color: var(--kv-paneel);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(var(--kv-schim-kanalen), .35);
  border-bottom: none;
  padding-bottom: 0;
}

.home-hero__punt {
  color: var(--kv-kopband-zacht);
}

.home-hero__drieslag {
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--kv-kopband-zacht);
  margin-top: 26px;
}

.home-hero__uitleg {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--kv-kopband-zacht);
  margin: 14px 0 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* Het adresveld is de kern van de homepage en staat daarom vóór de knoppen.
   Het prototype had hem niet — daar begon alles bij de kaart. */
.home-hero__zoek {
  margin-top: 30px;
  max-width: 520px;
  position: relative;
  z-index: 6;
}

.home-hero__zoek .address-search__input {
  border-radius: var(--kv-radius);
  padding: 15px 20px 15px 52px;
  font-size: 16px;
}

.home-hero__zoek .autocomplete-dropdown {
  z-index: 60;
}

.home-hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.home-hero__knop {
  height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--kv-radius);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
}

.home-hero__knop--vol {
  background: var(--kv-paneel);
  color: var(--kv-inkt);
}

.home-hero__knop--vol:hover {
  background: var(--kv-tegel);
  color: var(--kv-inkt);
}

.home-hero__knop--rand {
  padding: 0 22px;
  border: 1px solid rgba(var(--kv-paneel-kanalen), .55);
  color: var(--kv-paneel);
  background: rgba(46, 70, 61, .35);
}

.home-hero__knop--rand:hover {
  background: rgba(46, 70, 61, .6);
  color: var(--kv-paneel);
}

.home-hero__cijfers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 30px;
  font-family: var(--kv-font-mono);
  font-size: 10px;
  letter-spacing: .10em;
  color: var(--kv-kopband-mat);
}

/* --------------------------------------------------------------- kaartje -- */
.home-hero__kaartje {
  position: absolute;
  z-index: 3;
  border-radius: var(--kv-radius);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(var(--kv-schim-kanalen), .32);
}

.home-kaartje__kop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px 12px;
  background: var(--kv-kopband);
}

.home-kaartje__adres {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--kv-paneel);
  line-height: 1.15;
  text-wrap: balance;
}

.home-hero__kaartje--smal .home-kaartje__adres {
  font-size: 14.5px;
}

.home-kaartje__plaats {
  font-size: 12px;
  font-weight: 500;
  color: var(--kv-kopband-mat);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-kaartje__status {
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  background: rgba(var(--kv-paneel-kanalen), .15);
  color: var(--kv-kopband-zacht);
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
}

.home-kaartje__romp {
  display: flex;
  flex-direction: column;
  padding: 2px 15px 4px;
  background: var(--kv-paneel);
}

.home-kaartje__regel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--kv-tegel-lijn);
}

.home-kaartje__regel:last-child {
  border-bottom: 0;
}

.home-kaartje__regel--label {
  align-items: center;
  padding: 7px 0;
}

.home-kaartje__naam {
  font-size: 12.5px;
  color: var(--kv-inkt-zacht);
}

.home-kaartje__waarde {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--kv-inkt);
}

.home-kaartje__waarde--kans {
  color: var(--kv-accent-diep);
}

.home-kaartje__energielabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

/* Energielabel: datakleuren uit de tokens. De tekstkleur per vlak is in het
   design system doorgemeten — A/B/F/G wit, C/D/E inkt. */
.home-kaartje__energielabel--a { background: var(--kv-label-a); color: var(--kv-wit); }
.home-kaartje__energielabel--b { background: var(--kv-label-b); color: var(--kv-wit); }
.home-kaartje__energielabel--c { background: var(--kv-label-c); color: var(--kv-inkt); }
.home-kaartje__energielabel--d { background: var(--kv-label-d); color: var(--kv-inkt); }
.home-kaartje__energielabel--e { background: var(--kv-label-e); color: var(--kv-inkt); }
.home-kaartje__energielabel--f { background: var(--kv-label-f); color: var(--kv-wit); }
.home-kaartje__energielabel--g { background: var(--kv-label-g); color: var(--kv-wit); }

.home-kaartje__bron {
  padding: 7px 15px 9px;
  background: var(--kv-chip);
  border-top: 1px solid var(--kv-tegel-lijn);
  font-family: var(--kv-font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--kv-inkt-zacht);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------- bediening -- */
.home-hero__bediening {
  position: absolute;
  right: var(--home-kolom-marge);
  bottom: 22px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-hero__stippen {
  display: flex;
  gap: 6px;
}

/* 8px is te klein om aan te wijzen; het klikvlak eromheen is 44x44 (SC 2.5.8). */
.home-hero__stip {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-hero__stip::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(var(--kv-paneel-kanalen), .5);
  transition: width .28s cubic-bezier(.22, .61, .36, 1);
}

.home-hero__stip[aria-current="true"]::before {
  width: 22px;
  background: var(--kv-paneel);
}

/* SC 2.2.2: de carrousel start vanzelf, dus er moet een stopknop zijn. Hij
   staat waar het prototype de geluidsschakelaar had. */
.home-hero__pauze {
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 4px;
  background: rgba(var(--kv-paneel-kanalen), .88);
  font-family: var(--kv-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--kv-inkt-mat);
  cursor: pointer;
}

/* Twee streepjes = pauze; een driehoek = hervat. Beide getekend met randen,
   zodat er geen icoonbestand bij hoeft. */
.home-hero__pauzeteken {
  width: 8px;
  height: 9px;
  border-left: 3px solid var(--kv-inkt-mat);
  border-right: 3px solid var(--kv-inkt-mat);
}

.home-hero__pauze--stil .home-hero__pauzeteken {
  width: 0;
  height: 0;
  border-left: 8px solid var(--kv-inkt-mat);
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.home-hero__plaats {
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 4px;
  background: rgba(var(--kv-paneel-kanalen), .88);
  font-family: var(--kv-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--kv-inkt-mat);
}

.home-hero__plaatsstip {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--kv-accent);
}

/* --------------------------------------------------------------- strook --- */
/* De band loopt van rand tot rand en draagt de PANEELkleur; het raster
   daarbinnen draagt de randkleur en laat die alleen zien in de 1px-voegen
   tussen de vakken. Stond de randkleur op de band, dan lag er buiten de kolom
   een dikke gekleurde strook. */
.home-strook {
  background: var(--kv-paneel);
  border-top: 1px solid var(--kv-rand);
  border-bottom: 1px solid var(--kv-rand);
}

.home-strook__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--kv-rand);
  max-width: var(--home-kolom);
  margin: 0 auto;
}

.home-strook__vak {
  background: var(--kv-paneel);
  padding: 26px var(--kv-marge-scherm) 28px;
}

.home-strook__nr {
  font-family: var(--kv-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--kv-accent);
}

.home-strook__kop {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 12px;
  color: var(--kv-inkt);
}

.home-strook__tekst {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kv-inkt-zacht);
  margin-top: 6px;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ beweging --- */
@keyframes homeKaartOp {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes homeTeken {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

@keyframes homeGloed {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

@keyframes homeStip {
  0% { r: 5; opacity: 1; }
  100% { r: 24; opacity: 0; }
}

/* Een element dat binnenkomt bij het laden. 100% zet transform op `none` en
   niet op translateY(0): een element met een transform is een containing block
   voor alles wat erin absoluut of vast gepositioneerd staat, en in
   .home-hero__zoek zit het uitklaplijstje van de adreszoeker. Met `both` blijft
   de eindstand staan, dus die eindstand moet leeg zijn. */
@keyframes homeOp {
  from { opacity: 0; transform: translateY(var(--kv-verschuif-intro)); }
  to   { opacity: 1; transform: none; }
}

/* De trage lichtbaan over de tekening. Verplaatst ALLEEN een transform, zodat
   de compositor hem draait en er niets opnieuw getekend wordt -- de tekening
   zelf kost 3.579 gebouwen en mag geen frame per seconde kosten.
   Hij loopt heen en terug over 24 s; dat is traag genoeg om niet om aandacht
   te vragen en snel genoeg om het beeld te laten leven. */
@keyframes homeAdem {
  from { transform: translate3d(-18%, -6%, 0); }
  to   { transform: translate3d(18%, 6%, 0); }
}

/* De tekst komt gefaseerd binnen: kruimel, kop, drieslag, uitleg, zoekveld,
   knoppen, cijfers. Zeven stappen van 70 ms is een halve seconde in totaal, en
   het kaartje begint pas op 2,05 s -- die twee bijten elkaar dus niet. */
.home-hero__tekstblok > * {
  animation: homeOp var(--kv-duur-intro) var(--kv-curve) both;
}
.home-hero__tekstblok > :nth-child(2) { animation-delay: calc(var(--kv-trap-intro) * 1); }
.home-hero__tekstblok > :nth-child(3) { animation-delay: calc(var(--kv-trap-intro) * 2); }
.home-hero__tekstblok > :nth-child(4) { animation-delay: calc(var(--kv-trap-intro) * 3); }
.home-hero__tekstblok > :nth-child(5) { animation-delay: calc(var(--kv-trap-intro) * 4); }
.home-hero__tekstblok > :nth-child(6) { animation-delay: calc(var(--kv-trap-intro) * 5); }
.home-hero__tekstblok > :nth-child(7) { animation-delay: calc(var(--kv-trap-intro) * 6); }

/* De lichtbaan ligt op de tekening en ONDER het doek, zodat hij links -- waar
   de kop staat -- vanzelf weggefilterd wordt en alleen rechts over de stad
   loopt. De blob is ruim groter dan het vlak; anders zou zijn rand in beeld
   komen aan het einde van de baan. */
.home-hero__adem {
  position: absolute;
  inset: 0;
  /* Dezelfde doos als .home-hero__stad, niet het hele scherm: op een venster
     breder dan 1920 px staat er groen naast de tekening, en een lichtvlek daar
     leest als een vlek in plaats van als zon op de stad. */
  width: min(100%, var(--home-teken-max));
  margin-inline: auto;
  overflow: hidden;
  pointer-events: none;
}

.home-hero__adem::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(232, 240, 226, .15) 0%,
    rgba(232, 240, 226, .07) 45%,
    rgba(232, 240, 226, 0) 100%);
  animation: homeAdem var(--kv-duur-adem) ease-in-out infinite alternate;
  will-change: transform;
}

/* Een blok dat pas binnenkomt als de bezoeker erbij is. home-hero.js zet beide
   classes; zie onthullen() daar voor waarom de wachtstand uit JS komt en niet
   uit de HTML. --home-trap is de plaats in de rij, gezet per kind. */
.home-onthul {
  opacity: 0;
  transform: translateY(var(--kv-verschuif-intro));
}

.home-onthul--in {
  animation: homeOp var(--kv-duur-intro) var(--kv-curve) both;
  animation-delay: calc(var(--kv-trap-intro) * var(--home-trap, 0));
}

/* De regels van het kaartje komen na het kaartje zelf binnen, een voor een.
   2,30 s is het kaartje (2,05 s) plus een kwart seconde: het vlak staat er dan
   net, en het bewijs valt erin. Vijf regels van 70 ms eindigen op 3,20 s, ruim
   binnen de zeven seconden tot de volgende wissel. */
.home-hero__kaartje--op .home-kaartje__regel {
  animation: homeOp var(--kv-duur-intro) var(--kv-curve) both;
}
.home-hero__kaartje--op .home-kaartje__regel:nth-child(1) { animation-delay: 2.30s; }
.home-hero__kaartje--op .home-kaartje__regel:nth-child(2) { animation-delay: calc(2.30s + var(--kv-trap-intro) * 1); }
.home-hero__kaartje--op .home-kaartje__regel:nth-child(3) { animation-delay: calc(2.30s + var(--kv-trap-intro) * 2); }
.home-hero__kaartje--op .home-kaartje__regel:nth-child(4) { animation-delay: calc(2.30s + var(--kv-trap-intro) * 3); }
.home-hero__kaartje--op .home-kaartje__regel:nth-child(5) { animation-delay: calc(2.30s + var(--kv-trap-intro) * 4); }

.home-hero__kaartje--op {
  animation: homeKaartOp .55s 2.05s cubic-bezier(.22, .61, .36, 1) both;
}

.home-gloed__vlak {
  animation: homeGloed 3.2s ease-in-out infinite;
}

.home-gloed__lijn,
.home-gloed__omtrek {
  stroke-dashoffset: 1;
}

.home-gloed__omtrek {
  animation: homeTeken 1.3s cubic-bezier(.22, .61, .36, 1) forwards;
}

.home-gloed__lijn {
  animation: homeTeken 1s 1.15s cubic-bezier(.22, .61, .36, 1) forwards;
}

.home-gloed__puls {
  animation: homeStip 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__kaartje--op,
  .home-hero__tekstblok > *,
  .home-hero__kaartje--op .home-kaartje__regel,
  .home-onthul--in,
  .home-hero__adem::before,
  .home-gloed__vlak,
  .home-gloed__omtrek,
  .home-gloed__lijn,
  .home-gloed__puls {
    animation: none;
  }
  /* Zonder overvloeiing moet het nieuwe beeld er meteen staan; een transition
     van .9 s op opacity is ook beweging. */
  .home-hero__stad canvas {
    transition: none;
  }
  /* onthullen() slaat de wachtstand over bij reduced motion, maar als hij er
     langs een andere weg toch op staat mag hij niets verbergen. */
  .home-onthul {
    opacity: 1;
    transform: none;
  }
  /* Zonder de tekenanimatie moet de lijn er meteen staan, anders is hij weg. */
  .home-gloed__omtrek,
  .home-gloed__lijn {
    stroke-dashoffset: 0;
  }
}

/* -------------------------------------------------------------- smaller --- */
/* 1100 px is geen ronde smaak maar een meting (9 september 2026). Het kaartje
   is minimaal 256 px breed en moet rechts van de tekstkolom staan. Onder deze
   breedte komt het daar niet meer langs: op 1000 px eindigt de tekstkolom op
   790 px en zou het kaartje op 729 px beginnen. Dus onder 1100 px staan het
   kaartje, de omlijning en de bediening uit; de tekening blijft.
   home-hero.js kent dezelfde grens in magLopen() — die twee horen gelijk. */
@media (max-width: 1100px) {
  .home-hero {
    height: clamp(520px, 92vh, 700px);
  }

  .home-hero__kaartje,
  .home-hero__gloed,
  .home-hero__bediening {
    display: none;
  }
}

@media (max-width: 760px) {
  .home-hero__zoek {
    max-width: none;
  }
}