<!-- Femke Roos Fotografie · portret- en bruiloftsfotograaf, Utrecht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="frf">
<div class="frf__top"><div class="frf__in frf__top-in">
  <p class="frf__top-txt">Trouwen in 2027? Tussen mei en september zijn nog zeven zaterdagen vrij. <a href="#frf-datum">Check je datum</a></p>
  <p class="frf__top-txt frf__top-r"><a href="#">030 123 4567</a><span>Twijnstraat 38, Utrecht</span></p>
</div></div>

<div class="frf__head" role="banner"><div class="frf__in frf__head-in">
  <a href="#" class="frf__logo" aria-label="Femke Roos Fotografie, naar home">Femke Roos</a>
  <nav class="frf__nav" aria-label="Hoofdmenu">
    <a href="#frf-werk">Werk</a><a href="#frf-dag">Bruiloften</a><a href="#frf-portret">Portretten</a><a href="#frf-prijs">Prijzen</a><a href="#frf-over">Over Femke</a><a href="#frf-datum">Contact</a>
  </nav>
  <a href="#frf-datum" class="frf__btn frf__btn--head">Check je datum</a>
  <button class="frf__menu-knop" type="button" aria-expanded="false" aria-controls="frf-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="frf__menu" id="frf-menu" hidden>
  <a href="#frf-werk">Werk</a><a href="#frf-dag">Bruiloften</a><a href="#frf-portret">Portretten</a><a href="#frf-prijs">Prijzen</a><a href="#frf-over">Over Femke</a><a href="#frf-datum">Contact</a>
  <a href="#frf-datum" class="frf__btn">Check of je datum vrij is</a>
</div>
</div>

<div class="frf__hero">
  <img class="frf__hero-img" src="https://neddev.com/lab-media/site-fotograaf-1.webp" alt="Mila en Joost lopen hand in hand over de werf van de Oudegracht in Utrecht" width="1408" height="768">
  <div class="frf__in frf__hero-txt">
    <h1 class="frf__h1">Jullie dag, zoals hij voelde</h1>
    <p class="frf__lead">Bruiloften, portretten en gezinnen in en rond Utrecht. Geen geposeerde rijtjes: ik loop mee en fotografeer wat er gebeurt.</p>
    <div class="frf__acties"><a href="#frf-datum" class="frf__btn">Check of je datum vrij is</a><a href="#frf-werk" class="frf__link">Bekijk recent werk</a></div>
  </div>
  <p class="frf__hero-bij">Mila en Joost aan de Oudegracht, mei 2026</p>
</div>

<div class="frf__werk" id="frf-werk"><div class="frf__in">
  <div class="frf__werk-kop">
    <h2 class="frf__h2">Recent werk</h2>
    <p class="frf__p">Een greep uit de laatste maanden. Kies wat je zoekt en klik op een foto om hem groot te bekijken.</p>
    <div class="frf__filter" role="group" aria-label="Filter op soort">
      <button type="button" aria-pressed="true" data-f="alles">Alles</button><button type="button" aria-pressed="false" data-f="bruiloft">Bruiloften</button><button type="button" aria-pressed="false" data-f="portret">Portretten</button><button type="button" aria-pressed="false" data-f="gezin">Gezinnen</button><button type="button" aria-pressed="false" data-f="bedrijf">Bedrijven</button>
    </div>
  </div>
  <ul class="frf__raster">
    <li class="frf__w frf__w--t" data-c="portret"><button type="button" class="frf__open" data-bij="Meubelmaker Wim in zijn werkplaats in Lombok, voor zijn nieuwe website"><img src="https://neddev.com/lab-media/site-fotograaf-5.webp" alt="Een meubelmaker met een plank in zijn houtwerkplaats" width="768" height="1376" loading="lazy"></button></li>
    <li class="frf__w frf__w--l" data-c="bruiloft"><button type="button" class="frf__open" data-bij="Confetti van gedroogde lavendel, boerderij De Kromme Rijn in Bunnik"><img src="https://neddev.com/lab-media/site-fotograaf-3.webp" alt="Gasten gooien confetti over een lachend bruidspaar bij een boerderij" width="900" height="491" loading="lazy"></button></li>
    <li class="frf__w frf__w--m" data-c="gezin"><button type="button" class="frf__open" data-bij="Familie Bakker in de duinen bij Wijk aan Zee, oktober"><img src="https://neddev.com/lab-media/site-fotograaf-6.webp" alt="Ouders en twee kinderen rennen door het helmgras in de duinen" width="900" height="491" loading="lazy"></button></li>
    
    <li class="frf__w frf__w--m" data-c="bruiloft"><button type="button" class="frf__open" data-bij="De ringen in de kapel van Landgoed Oostbroek"><img src="https://neddev.com/lab-media/site-fotograaf-2.webp" alt="Bruid en bruidegom wisselen ringen in een witte kapel" width="900" height="491" loading="lazy"></button></li>
    <li class="frf__w frf__w--s" data-c="bedrijf"><button type="button" class="frf__open" data-bij="Teamfoto's voor een ontwerpbureau in de Werkspoorkathedraal"><img src="https://neddev.com/lab-media/site-fotograaf-7.webp" alt="Drie collega's lachen samen aan een tafel in een licht kantoor" width="900" height="491" loading="lazy"></button></li>
    <li class="frf__w frf__w--m" data-c="gezin"><button type="button" class="frf__open" data-bij="Twaalf dagen oud, thuis in Wittevrouwen"><img src="https://neddev.com/lab-media/site-fotograaf-13.webp" alt="Jonge ouders met hun pasgeboren baby op de bank" width="900" height="491" loading="lazy"></button></li>
    <li class="frf__w frf__w--s" data-c="portret"><button type="button" class="frf__open" data-bij="Portret voor een theaterprogramma, buiten aan de Oudegracht"><img src="https://neddev.com/lab-media/site-fotograaf-15.webp" alt="Jonge man in spijkerjack op straat in Utrecht" width="900" height="491" loading="lazy"></button></li>
    <li class="frf__w frf__w--l" data-c="bruiloft"><button type="button" class="frf__open" data-bij="Op één fiets naar het stadhuis, Maarssen"><img src="https://neddev.com/lab-media/site-fotograaf-14.webp" alt="Bruidspaar op één fiets langs een rustige vaart" width="900" height="491" loading="lazy"></button></li>
  </ul>
  <p class="frf__leeg" hidden>Geen foto's in deze soort.</p>
</div></div>

<dialog class="frf__lb" aria-label="Foto groot bekijken">
  <img class="frf__lb-img" alt="">
  <p class="frf__lb-bij"></p>
  <div class="frf__lb-knoppen"><button type="button" class="frf__lb-vorige">Vorige</button><button type="button" class="frf__lb-volgende">Volgende</button><button type="button" class="frf__lb-dicht">Sluiten</button></div>
</dialog>

<div class="frf__dag" id="frf-dag">
  <div class="frf__in frf__dag-kop">
    <h2 class="frf__h2">Eén dag op Oostbroek</h2>
    <p class="frf__p">Mila en Joost trouwden op 17 mei op Landgoed Oostbroek in De Bilt. Zo ziet een hele dag eruit, van de jurk tot de laatste dans. Sleep of scroll opzij.</p>
  </div>
  <div class="frf__strook" tabindex="0" aria-label="Fotoreportage van één trouwdag, horizontaal scrollen">
    <figure><img src="https://neddev.com/lab-media/site-fotograaf-8.webp" alt="De zus van de bruid doet de knoopjes van de jurk dicht" width="900" height="491" loading="lazy"><figcaption>Kwart voor tien. Mila's zus doet de knoopjes, één voor één.</figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-fotograaf-14.webp" alt="Het bruidspaar op één fiets langs het water" width="900" height="491" loading="lazy"><figcaption>Op de fiets naar de kapel. Joost trapt, Mila houdt de bos vast.</figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-fotograaf-2.webp" alt="De ringen worden gewisseld in de kapel" width="900" height="491" loading="lazy"><figcaption>De ringen. Opa huilde het hardst.</figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-fotograaf-3.webp" alt="Confetti bij de boerderij" width="900" height="491" loading="lazy"><figcaption>Lavendel uit eigen tuin, gedroogd door Joosts moeder.</figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-fotograaf-9.webp" alt="Gasten lachen tijdens een speech aan de lange tafel" width="900" height="491" loading="lazy"><figcaption>De speech van de getuige duurde elf minuten. Niemand keek op zijn horloge.</figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-fotograaf-10.webp" alt="De eerste dans in de schuur, vrienden klappen" width="900" height="491" loading="lazy"><figcaption>De eerste dans, en daarna stond niemand meer stil.</figcaption></figure>
  </div>
  <div class="frf__in frf__strook-onder">
    <div class="frf__voortgang" aria-hidden="true"><span></span></div>
    <div class="frf__strook-knoppen"><button type="button" class="frf__sk" data-r="-1" aria-label="Vorige foto's">Terug</button><button type="button" class="frf__sk" data-r="1" aria-label="Volgende foto's">Verder</button></div>
  </div>
</div>

<div class="frf__over" id="frf-over"><div class="frf__in frf__over-in">
  <div class="frf__over-foto"><img src="https://neddev.com/lab-media/site-fotograaf-11.webp" alt="Femke fotografeert een bruidspaar op een brug in Utrecht" width="900" height="491" loading="lazy"></div>
  <div class="frf__over-txt">
    <h2 class="frf__h2">Je merkt me nauwelijks</h2>
    <p class="frf__p">Ik ben Femke. Voor ik fotograaf werd, was ik verpleegkundige op de kinderafdeling. Daar leerde ik hoe je in een kamer kunt zijn zonder in de weg te staan. Dat doe ik nog steeds.</p>
    <p class="frf__p">Een paar weken voor jullie bruiloft drinken we koffie en lopen we het draaiboek door. Wie moet er zeker op? Waar willen jullie even samen zijn? Daarna hoef je niet meer aan mij te denken. Ik werk zonder flitser tijdens de ceremonie en neem voor de groepsfoto tien minuten, geen uur.</p>
    <p class="frf__p">Binnen drie weken krijgen jullie een eerste selectie. Binnen zes weken staat de hele reportage in een online galerij, om te downloaden en te delen met familie.</p>
  </div>
</div></div>

<div class="frf__portret" id="frf-portret"><div class="frf__in frf__portret-in">
  <div class="frf__portret-txt">
    <h2 class="frf__h2">Portretten in de studio</h2>
    <p class="frf__p">Mijn studio zit in een oude touwslagerij aan de Twijnstraat, met een raam van vier meter hoog. Daglicht doet het meeste werk. Een sessie duurt een uur; de foto's kiezen we achteraf samen.</p>
    <p class="frf__p">Voor je website, een boekomslag of gewoon voor aan de muur. Teams en gezinnen komen hier ook, of ik kom naar jullie toe.</p>
    <a href="#frf-datum" class="frf__link">Plan een portretsessie</a>
  </div>
  <img class="frf__portret-a" src="https://neddev.com/lab-media/site-fotograaf-12.webp" alt="De lege studio met grijs achterdoek, een kruk en een groot fabrieksraam" width="900" height="491" loading="lazy">
  <img class="frf__portret-b" src="https://neddev.com/lab-media/site-fotograaf-4.webp" alt="Portret van een vrouw bij het raam in de studio" width="900" height="491" loading="lazy">
</div></div>

<div class="frf__prijs" id="frf-prijs"><div class="frf__in frf__prijs-in">
  <h2 class="frf__h2">Wat het kost</h2>
  <ul class="frf__lijst">
    <li><h3>Hele dag</h3><p>Tien uur, van aankleden tot de eerste dans. Ongeveer 600 foto's.</p><span>2.650 euro</span></li>
    <li><h3>Ceremonie en receptie</h3><p>Vier uur. Ongeveer 250 foto's, met groepsfoto.</p><span>1.450 euro</span></li>
    <li><h3>Klein trouwen</h3><p>Stadhuis en lunch, twee uur, doordeweeks.</p><span>795 euro</span></li>
    <li><h3>Portretsessie in de studio</h3><p>Een uur, tien bewerkte foto's naar keuze.</p><span>295 euro</span></li>
    <li><h3>Gezin op locatie</h3><p>Anderhalf uur buiten, vijftien bewerkte foto's.</p><span>345 euro</span></li>
  </ul>
  <p class="frf__klein">Prijzen inclusief btw en reiskosten tot 60 kilometer van Utrecht. Een album van 30 bij 30 centimeter kost vanaf 390 euro.</p>
</div></div>

<div class="frf__stem"><div class="frf__in frf__stem-in">
  <blockquote class="frf__q frf__q--groot"><p>We waren bang dat we de hele dag zouden poseren. Femke stond er gewoon, en de foto van onze opa's aan de bar is de mooiste die we hebben.</p><footer>Sanne en Daan, getrouwd in Amersfoort, juni 2026</footer></blockquote>
  <blockquote class="frf__q"><p>Ik had een portret nodig waar ik niet stijf op sta. Na tien minuten was ik vergeten dat er een camera was.</p><footer>Hanneke Vos, fysiotherapeut in Zeist</footer></blockquote>
</div></div>

<div class="frf__datum" id="frf-datum"><div class="frf__in frf__datum-in">
  <div class="frf__datum-txt">
    <h2 class="frf__h2">Is jullie datum nog vrij?</h2>
    <p class="frf__p">Vul de datum in en je ziet het meteen. Wil je hem vastleggen, dan houd ik hem vijf werkdagen vrij, zonder kosten.</p>
    <form class="frf__form" novalidate>
      <label>Datum<input type="date" name="datum" required></label>
      <label>Wat wil je laten fotograferen?<select name="soort"><option>Bruiloft</option><option>Klein trouwen</option><option>Portret</option><option>Gezin</option><option>Bedrijf</option></select></label>
      <label>Jullie namen<input type="text" name="naam" autocomplete="name" required></label>
      <label>E-mail<input type="email" name="mail" autocomplete="email" required></label>
      <button type="submit" class="frf__btn">Check en vraag aan</button>
      <p class="frf__uitslag" aria-live="polite"></p>
    </form>
    <p class="frf__klein">Liever bellen? <a href="#">030 123 4567</a>, maandag tot en met vrijdag van 9:00 tot 17:00. De studio is alleen open op afspraak.</p>
  </div>
  <div class="frf__faq">
    <h2 class="frf__h3">Vaak gevraagd</h2>
    <details><summary>Hoeveel foto's krijgen we?</summary><p>Bij een hele dag ongeveer 600, allemaal bewerkt. Ruwe bestanden lever ik niet.</p></details>
    <details><summary>Kom je ook buiten Utrecht?</summary><p>Door het hele land. Boven de 60 kilometer reken ik 0,35 euro per kilometer.</p></details>
    <details><summary>Hoe leggen we de datum vast?</summary><p>Met een getekende overeenkomst en een aanbetaling van 30 procent. De rest betaal je twee weken voor de bruiloft.</p></details>
    <details><summary>Wat als je ziek wordt?</summary><p>Ik werk samen met twee fotografen in Utrecht die dan invallen. In tien jaar was dat één keer nodig.</p></details>
  </div>
</div></div>

<div class="frf__voet" role="contentinfo"><div class="frf__in">
  <div class="frf__voet-kol">
    <div><p class="frf__voet-logo">Femke Roos</p><p>Twijnstraat 38<br>3511 ZL Utrecht<br><a href="#">030 123 4567</a><br><a href="mailto:femke@voorbeeld.nl">femke@voorbeeld.nl</a></p></div>
    <div><p class="frf__voet-kop">Fotografie</p><a href="#">Bruiloften</a><a href="#">Klein trouwen</a><a href="#">Portretten</a><a href="#">Gezinnen</a><a href="#">Bedrijven</a></div>
    <div><p class="frf__voet-kop">Femke</p><a href="#">Over mij</a><a href="#">Prijzen</a><a href="#">Journaal</a><a href="#">Cadeaubon</a></div>
  </div>
  <p class="frf__voet-regel">Femke Roos Fotografie · KvK 71234560 · btw NL001234567B01 · Lid van de Fotografenfederatie · <a href="#">Privacy</a> · <a href="#">Voorwaarden</a></p>
</div></div>
</div>
</div>

/* Femke Roos Fotografie · portret- en bruiloftsfotograaf, Utrecht · NedDev · eigen werk. */
/* fonts (Fontshare): recia@600 + supreme@400,500 */
.frf{--bg:#FFFFFF;--opp:#EEF3F3;--tekst:#0C1A1C;--gedempt:#46585A;--lijn:#D3DEDF;--accent:#0B6E75;--op-accent:#FFFFFF;--r:0;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(64px,8vw,120px);--gat:clamp(24px,3vw,48px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Supreme',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.6;-webkit-font-smoothing:antialiased}
.frf *{box-sizing:border-box}
.frf [hidden]{display:none!important}
.frf a{color:inherit}
.frf img{display:block;max-width:100%;height:auto}
.frf__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,64px)}
.frf__top{background:var(--opp)}
.frf__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.frf__top-txt{margin:0;font-size:var(--fs1);color:var(--gedempt)}
.frf__top-txt a{color:var(--tekst);text-underline-offset:3px}
.frf__top-r{display:flex;gap:20px;white-space:nowrap}
.frf__head{position:sticky;top:0;z-index:20}
.frf__head-in{display:flex;align-items:center;gap:36px;height:76px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.frf__logo{font-family:'Recia',serif;font-weight:600;font-size:var(--fs4);text-decoration:none;letter-spacing:-.01em}
.frf__nav{display:flex;gap:28px;margin-left:auto}
.frf__nav a{text-decoration:none;color:var(--gedempt);transition:color .18s}
.frf__nav a:hover{color:var(--accent)}
.frf__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-weight:500;font-size:var(--fs2);padding:14px 24px;border-radius:var(--r);border:0;cursor:pointer;font-family:inherit;transition:background-color .18s}
.frf__btn:hover{background:#085a60}
.frf__btn--head{padding:11px 18px}
.frf__menu-knop{display:none;width:44px;height:44px;background:none;border:1px solid var(--lijn);border-radius:var(--r);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto}
.frf__menu-knop span{display:block;width:18px;height:2px;background:var(--tekst)}
.frf__menu{background:var(--bg);border-bottom:1px solid var(--lijn);padding:8px var(--zij) 20px}
.frf__menu a{display:block;padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}
.frf__menu .frf__btn{text-align:center;margin-top:16px;border-bottom:0}
.frf__hero{position:relative;height:clamp(560px,80vh,780px);overflow:hidden;background:#0C1A1C;display:flex;align-items:flex-end}
.frf .frf__hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.frf__hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(6,16,17,.82),rgba(6,16,17,0));pointer-events:none}
.frf__hero-txt{position:relative;z-index:1;width:100%;padding-bottom:clamp(40px,6vw,80px);color:#fff}
.frf__h1{font-family:'Recia',serif;font-weight:600;font-size:var(--fs6);line-height:1;letter-spacing:-.025em;margin:0 0 22px;max-width:9em}
.frf__lead{font-size:var(--fs3);margin:0 0 30px;max-width:31em;color:#E6EFEF}
.frf__acties{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.frf__link{display:inline-block;padding:10px 0;font-weight:500;text-underline-offset:6px;transition:color .18s}
.frf__hero .frf__link{color:#fff}
.frf__link:hover{color:var(--accent)}
.frf__hero .frf__link:hover{color:#BFE3E4}
.frf__hero-bij{position:absolute;right:clamp(var(--zij),4vw,64px);bottom:clamp(40px,6vw,80px);z-index:1;margin:0;font-size:var(--fs1);color:#D6E3E3;max-width:16em;text-align:right}
.frf__h2{font-family:'Recia',serif;font-weight:600;font-size:var(--fs5);line-height:1.05;letter-spacing:-.02em;margin:0 0 20px}
.frf__h3{font-family:'Recia',serif;font-weight:600;font-size:var(--fs4);line-height:1.15;margin:0 0 14px}
.frf__p{color:var(--gedempt);margin:0 0 18px;max-width:var(--lees)}
.frf__klein{font-size:var(--fs1);color:var(--gedempt);margin:18px 0 0;max-width:var(--lees)}
.frf__werk{padding:var(--sectie) 0 calc(var(--sectie) * .6)}
.frf__werk-kop{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:8px var(--gat);align-items:end;margin-bottom:36px}
.frf__werk-kop .frf__h2{margin:0}
.frf__werk-kop .frf__p{margin:0}
.frf__filter{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:22px;border-bottom:1px solid var(--lijn)}
.frf__filter button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0;font:inherit;color:var(--gedempt);cursor:pointer;transition:color .18s,border-color .18s}
.frf__filter button:hover{color:var(--tekst)}
.frf__filter button[aria-pressed=true]{color:var(--tekst);border-bottom-color:var(--accent)}
.frf__raster{list-style:none;margin:0;padding:0;columns:3;column-gap:14px}
.frf__w{break-inside:avoid;margin:0 0 14px}
.frf .frf__w--t img{aspect-ratio:3/4;object-fit:cover;object-position:50% 60%}
.frf__open{display:block;width:100%;padding:0;border:0;background:var(--opp);cursor:zoom-in;overflow:hidden}
.frf .frf__open img{width:100%;height:auto;transition:opacity .18s}
.frf__open:hover img{opacity:.88}
.frf__open:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.frf__leeg{color:var(--gedempt)}
.frf__lb{border:0;padding:0;background:#0C1A1C;color:#fff;max-width:min(1100px,94vw);width:100%}
.frf__lb::backdrop{background:rgba(6,16,17,.86)}
.frf .frf__lb-img{width:100%;max-height:72vh;object-fit:contain;background:#0C1A1C}
.frf__lb-bij{margin:0;padding:14px 20px 0;color:#D6E3E3;font-size:var(--fs1)}
.frf__lb-knoppen{display:flex;gap:10px;padding:14px 20px 18px;justify-content:flex-end}
.frf__lb-knoppen button{background:none;border:1px solid #46585A;color:#fff;font:inherit;padding:10px 16px;cursor:pointer;border-radius:var(--r);transition:border-color .18s}
.frf__lb-knoppen button:hover{border-color:#fff}
.frf__dag{padding:calc(var(--sectie) * .6) 0 var(--sectie);background:var(--opp)}
.frf__dag-kop{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:var(--gat);align-items:end;margin-bottom:40px}
.frf__dag-kop .frf__h2,.frf__dag-kop .frf__p{margin:0}
.frf__strook{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(var(--zij),4vw,64px) 6px;scrollbar-width:none;cursor:grab;outline:0}
.frf__strook::-webkit-scrollbar{display:none}
.frf__strook.is-sleep{cursor:grabbing;scroll-snap-type:none}
.frf__strook:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.frf__strook figure{flex:0 0 auto;width:min(470px,78vw);margin:0;scroll-snap-align:start}
.frf .frf__strook img{width:100%;aspect-ratio:3/2;object-fit:cover;pointer-events:none;user-select:none}
.frf__strook figcaption{padding-top:14px;color:var(--gedempt);max-width:30em}
.frf__strook-onder{display:flex;align-items:center;gap:24px;margin-top:28px}
.frf__voortgang{flex:1;height:2px;background:var(--lijn);position:relative}
.frf__voortgang span{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--accent)}
.frf__strook-knoppen{display:flex;gap:10px}
.frf__sk{background:var(--bg);border:1px solid var(--lijn);font:inherit;padding:10px 18px;cursor:pointer;border-radius:var(--r);transition:border-color .18s}
.frf__sk:hover{border-color:var(--accent)}
.frf__over{padding:var(--sectie) 0}
.frf__over-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.frf .frf__over-foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
.frf__portret{padding:0 0 var(--sectie)}
.frf__portret-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--gat);align-items:end}
.frf__portret-txt{align-self:center}
.frf .frf__portret-a{width:100%;aspect-ratio:3/4;object-fit:cover}
.frf .frf__portret-b{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:70% 50%}
.frf__prijs{padding:var(--sectie) 0;border-top:1px solid var(--lijn)}
.frf__prijs-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 var(--gat)}
.frf__prijs-in .frf__klein{grid-column:2}
.frf__lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--tekst)}
.frf__lijst li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) minmax(110px,auto);gap:8px 24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--lijn)}
.frf__lijst h3{margin:0;font-family:'Recia',serif;font-weight:600;font-size:var(--fs3)}
.frf__lijst p{margin:0;color:var(--gedempt)}
.frf__lijst span{font-weight:500;text-align:right;white-space:nowrap}
.frf__stem{padding:0 0 var(--sectie)}
.frf__stem-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,6vw,110px);align-items:start}
.frf__q{margin:0}
.frf__q p{font-family:'Recia',serif;font-weight:600;font-size:var(--fs4);line-height:1.3;margin:0 0 16px}
.frf__q--groot p{font-size:clamp(28px,3.2vw,44px);line-height:1.18;letter-spacing:-.01em}
.frf__q:not(.frf__q--groot){padding-top:12px}
.frf__q footer{color:var(--gedempt);font-size:var(--fs1)}
.frf__datum{background:var(--accent);color:#fff;padding:var(--sectie) 0}
.frf__datum-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:start}
.frf__datum .frf__p,.frf__datum .frf__klein{color:#D9ECEC}
.frf__form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px;margin:28px 0 8px;max-width:760px}
.frf__form label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs1);color:#D9ECEC}
.frf__form input,.frf__form select{font:inherit;font-size:var(--fs2);color:var(--tekst);background:#fff;border:1px solid #fff;border-radius:var(--r);padding:12px 12px;min-height:48px}
.frf__form input:focus,.frf__form select:focus{outline:3px solid #9FD6D8;outline-offset:1px}
.frf__form input[aria-invalid=true]{outline:3px solid #FFD0C2}
.frf__form .frf__btn{background:#fff;color:var(--accent)!important;justify-self:start}
.frf__form .frf__btn:hover{background:#DFF0F0}
.frf__uitslag{grid-column:1/-1;margin:0;font-size:var(--fs3);min-height:1.6em}
.frf__faq{border-top:1px solid #4E9A9F;padding-top:24px}
.frf__faq details{border-bottom:1px solid #4E9A9F}
.frf__faq summary{cursor:pointer;padding:16px 28px 16px 0;list-style:none;position:relative;font-weight:500}
.frf__faq summary::-webkit-details-marker{display:none}
.frf__faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:var(--fs3)}
.frf__faq details[open] summary::after{content:"\2212"}
.frf__faq details p{margin:0 0 18px;color:#D9ECEC}
.frf__voet{padding:72px 0 32px;font-size:var(--fs1)}
.frf__voet-kol{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--gat);padding-bottom:40px;border-bottom:1px solid var(--lijn)}
.frf__voet-kol p{margin:0;color:var(--gedempt)}
.frf__voet-kol a{display:block;padding:5px 0;text-decoration:none;color:var(--gedempt);transition:color .18s}
.frf__voet-kol a:hover{color:var(--accent)}
.frf__voet-logo{font-family:'Recia',serif;font-weight:600;font-size:var(--fs4);color:var(--tekst)!important;margin-bottom:12px!important}
.frf__voet-kop{color:var(--tekst)!important;font-weight:500;margin-bottom:8px!important}
.frf__voet-regel{margin:24px 0 0;color:var(--gedempt)}
@container (max-width:1100px){.frf__nav{gap:20px}.frf__btn--head{display:none}}
@container (max-width:900px){
  .frf__nav{display:none}.frf__menu-knop{display:flex}
  .frf__top-txt:first-child{display:none}.frf__top-in{justify-content:flex-end}
  .frf__werk-kop,.frf__dag-kop,.frf__over-in,.frf__prijs-in,.frf__stem-in,.frf__datum-in{grid-template-columns:minmax(0,1fr)}
  .frf__prijs-in .frf__klein{grid-column:1}
  .frf__portret-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.frf__portret-txt{grid-column:1/-1}
  .frf__hero-bij{display:none}
}
@container (max-width:560px){
  .frf>*{--fs5:34px;--fs6:46px;--fs4:22px}
  .frf__top-r span{display:none}
  .frf__head-in{height:64px}
  .frf__hero{height:auto;min-height:560px;padding-top:120px}
  .frf__hero::after{height:100%;background:linear-gradient(to top,rgba(6,16,17,.88) 45%,rgba(6,16,17,.3))}
  .frf__form{grid-template-columns:minmax(0,1fr)}
  .frf__lijst li{grid-template-columns:minmax(0,1fr) auto}.frf__lijst p{grid-column:1/-1;grid-row:2}
  .frf__voet-kol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.frf__voet-kol>div:first-child{grid-column:1/-1}
  .frf__raster{columns:2;column-gap:10px}.frf__w{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.frf *{transition:none!important;scroll-behavior:auto!important}}

// Femke Roos Fotografie · portret- en bruiloftsfotograaf, Utrecht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.frf');if(!s)return;
var knop=s.querySelector('.frf__menu-knop'),menu=s.querySelector('.frf__menu');
knop.addEventListener('click',function(){var open=menu.hidden;menu.hidden=!open;knop.setAttribute('aria-expanded',String(open));knop.setAttribute('aria-label',open?'Menu sluiten':'Menu openen');});
menu.addEventListener('click',function(e){if(e.target.closest('a')){menu.hidden=true;knop.setAttribute('aria-expanded','false');knop.setAttribute('aria-label','Menu openen');}});
var werken=[].slice.call(s.querySelectorAll('.frf__w')),leeg=s.querySelector('.frf__leeg');
s.querySelectorAll('.frf__filter button').forEach(function(b){b.addEventListener('click',function(){var f=b.getAttribute('data-f');s.querySelectorAll('.frf__filter button').forEach(function(x){x.setAttribute('aria-pressed',String(x===b));});var n=0;werken.forEach(function(w){var aan=f==='alles'||w.getAttribute('data-c')===f;w.hidden=!aan;if(aan)n++;});leeg.hidden=n>0;});});
var lb=s.querySelector('.frf__lb'),lbImg=s.querySelector('.frf__lb-img'),lbBij=s.querySelector('.frf__lb-bij'),huidig=0;
function zichtbare(){return werken.filter(function(w){return !w.hidden;});}
function toon(i){var z=zichtbare();if(!z.length)return;huidig=(i+z.length)%z.length;var b=z[huidig].querySelector('.frf__open'),im=b.querySelector('img');lbImg.src=im.src;lbImg.alt=im.alt;lbBij.textContent=b.getAttribute('data-bij');}
werken.forEach(function(w){w.querySelector('.frf__open').addEventListener('click',function(){toon(zichtbare().indexOf(w));if(lb.showModal)lb.showModal();else lb.setAttribute('open','');});});
s.querySelector('.frf__lb-vorige').addEventListener('click',function(){toon(huidig-1);});
s.querySelector('.frf__lb-volgende').addEventListener('click',function(){toon(huidig+1);});
s.querySelector('.frf__lb-dicht').addEventListener('click',function(){lb.close?lb.close():lb.removeAttribute('open');});
lb.addEventListener('keydown',function(e){if(e.key==='ArrowRight')toon(huidig+1);if(e.key==='ArrowLeft')toon(huidig-1);});
lb.addEventListener('click',function(e){if(e.target===lb&&lb.close)lb.close();});
var st=s.querySelector('.frf__strook'),bal=s.querySelector('.frf__voortgang span');
function voortgang(){var max=st.scrollWidth-st.clientWidth;var d=st.clientWidth/st.scrollWidth;bal.style.width=(d*100)+'%';bal.style.left=(max>0?(st.scrollLeft/max)*(100-d*100):0)+'%';}
st.addEventListener('scroll',voortgang,{passive:true});voortgang();
var rustig=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
s.querySelectorAll('.frf__sk').forEach(function(b){b.addEventListener('click',function(){var fig=st.querySelector('figure');var stap=fig?fig.getBoundingClientRect().width+16:400;st.scrollBy({left:stap*(+b.getAttribute('data-r')),behavior:rustig?'auto':'smooth'});});});
var neer=false,x0=0,l0=0;
st.addEventListener('pointerdown',function(e){if(e.pointerType!=='mouse')return;neer=true;x0=e.clientX;l0=st.scrollLeft;st.classList.add('is-sleep');});
window.addEventListener('pointermove',function(e){if(!neer)return;st.scrollLeft=l0-(e.clientX-x0);});
window.addEventListener('pointerup',function(){if(!neer)return;neer=false;st.classList.remove('is-sleep');});
var vrij=['2027-05-08','2027-05-29','2027-06-26','2027-07-17','2027-08-07','2027-09-11','2027-09-25'];
var f=s.querySelector('.frf__form'),uit=s.querySelector('.frf__uitslag');
f.addEventListener('submit',function(e){e.preventDefault();var ok=true;['datum','naam','mail'].forEach(function(n){var v=f[n].value.trim();var goed=n==='mail'?/.+@.+\..+/.test(v):!!v;f[n].setAttribute('aria-invalid',String(!goed));if(!goed)ok=false;});
  if(!ok){uit.textContent='Vul de datum, jullie namen en een geldig e-mailadres in.';return;}
  var d=new Date(f.datum.value+'T12:00:00'),nu=new Date();
  if(d<nu){uit.textContent='Die datum ligt in het verleden. Kies een datum vanaf morgen.';return;}
  var lang=d.toLocaleDateString('nl-NL',{weekday:'long',day:'numeric',month:'long',year:'numeric'});
  var za=d.getDay()===6,zomer=d.getMonth()>=4&&d.getMonth()<=8&&d.getFullYear()===2027;
  if(za&&zomer&&vrij.indexOf(f.datum.value)<0){uit.textContent='Helaas, '+lang+' is al vergeven. In 2027 zijn nog vrij: 8 mei, 29 mei, 26 juni, 17 juli, 7 augustus, 11 en 25 september.';return;}
  uit.textContent='Goed nieuws, '+f.naam.value.trim()+': '+lang+' is vrij. Ik houd hem vijf werkdagen voor je vast en mail je vandaag nog op '+f.mail.value.trim()+'.';});
}
init(document.querySelector('.jouw-container'));