<!-- Keuken van Mares · bedrijfs- en feestcatering, Utrecht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kvm">
<div class="kvm__top"><div class="kvm__in kvm__top-in">
  <p class="kvm__top-txt">Bestel tot 48 uur vooraf, voor lunch op kantoor tot 15:00 de dag ervoor.</p>
  <p class="kvm__top-txt kvm__top-r"><a href="mailto:offerte@voorbeeld.nl">offerte@voorbeeld.nl</a><a href="#">030 123 4567</a></p>
</div></div>

<div class="kvm__head" role="banner"><div class="kvm__in kvm__head-in">
  <a href="#" class="kvm__logo" aria-label="Keuken van Mares, naar home">Keuken van Mares</a>
  <nav class="kvm__nav" aria-label="Hoofdmenu">
    <a href="#kvm-kantoor">Bedrijfslunch</a><a href="#kvm-menu">Borrel</a><a href="#kvm-feest">Feesten</a><a href="#kvm-menu">Menu samenstellen</a><a href="#kvm-keuken">Keuken</a><a href="#kvm-contact">Contact</a>
  </nav>
  <a href="#kvm-menu" class="kvm__btn kvm__btn--head">Stel je menu samen</a>
  <button class="kvm__menu-knop" type="button" aria-expanded="false" aria-controls="kvm-menu-nav" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="kvm__menu-nav" id="kvm-menu-nav" hidden>
  <a href="#kvm-kantoor">Bedrijfslunch</a><a href="#kvm-menu">Borrel</a><a href="#kvm-feest">Feesten</a><a href="#kvm-menu">Menu samenstellen</a><a href="#kvm-keuken">Keuken</a><a href="#kvm-contact">Contact</a><a href="#kvm-menu" class="kvm__btn">Stel je menu samen</a>
</div>
</div>

<div class="kvm__hero">
  <div class="kvm__hero-foto"><img src="https://neddev.com/lab-media/site-catering-14.webp" alt="Lang buffet met geroosterde groente, salades en zuurdesembrood in een kantoorkantine" width="1408" height="768"></div>
  <div class="kvm__hero-txt">
    <h1 class="kvm__h1">Koken voor tien tot vierhonderd gasten</h1>
    <p class="kvm__lead">Lunch op kantoor, een borrel na de vergadering of een bruiloft in de boomgaard. We koken in onze keuken aan de Cartesiusweg met groente van boeren rond Utrecht, en we brengen het zelf.</p>
    <div class="kvm__acties"><a href="#kvm-menu" class="kvm__btn">Stel je menu samen</a><a href="#kvm-contact" class="kvm__link">Of bel Mares</a></div>
    <p class="kvm__klein">Vanaf 14,50 euro per persoon. Gemiddeld 9,1 uit 286 beoordelingen.</p>
  </div>
</div>

<div class="kvm__twee"><div class="kvm__in kvm__twee-in">
  <figure class="kvm__twee-a" id="kvm-kantoor"><img src="https://neddev.com/lab-media/site-catering-15.webp" alt="Collega's pakken broodjes en salades van een vergadertafel" width="900" height="491" loading="lazy">
    <figcaption><h2 class="kvm__h3">Op kantoor</h2>Van een vaste lunch voor 30 collega's elke dinsdag tot een broodjeslunch voor een heidag. Op tijd geleverd in herbruikbare kratten, die we de volgende ochtend weer ophalen. Bestellen kan via een vaste link per kantoor.</figcaption></figure>
  <figure class="kvm__twee-b" id="kvm-feest"><img src="https://neddev.com/lab-media/site-catering-4.webp" alt="Lange gedekte tafels voor een bruiloft in een boomgaard" width="900" height="491" loading="lazy">
    <figcaption><h2 class="kvm__h3">Op je feest</h2>Bruiloft, jubileum of tuinfeest: we koken ter plekke, met eigen koks en bediening. Geen zaal? We kennen twaalf locaties tussen Houten en Maarssen, van een kas tot een kerk. Je proeft het menu vooraf met z'n tweeën aan onze keukentafel.</figcaption></figure>
</div></div>

<div class="kvm__menu" id="kvm-menu">
  <div class="kvm__menu-foto" aria-hidden="true">
    <img class="kvm__mf is-aan" data-g="lunch" src="https://neddev.com/lab-media/site-catering-2.webp" alt="" width="900" height="491" loading="lazy">
    <img class="kvm__mf" data-g="borrel" src="https://neddev.com/lab-media/site-catering-3.webp" alt="" width="900" height="491" loading="lazy">
    <img class="kvm__mf" data-g="walking" src="https://neddev.com/lab-media/site-catering-8.webp" alt="" width="900" height="491" loading="lazy">
    <img class="kvm__mf" data-g="buffet" src="https://neddev.com/lab-media/site-catering-9.webp" alt="" width="900" height="491" loading="lazy">
  </div>
  <div class="kvm__menu-txt">
    <h2 class="kvm__h2">Stel je menu samen</h2>
    <form class="kvm__bouw" novalidate>
      <fieldset class="kvm__keus"><legend>Gelegenheid</legend>
        <label><input type="radio" name="g" value="lunch" data-pp="14.5" checked><span>Lunch</span></label>
        <label><input type="radio" name="g" value="borrel" data-pp="17.5"><span>Borrel</span></label>
        <label><input type="radio" name="g" value="walking" data-pp="39.5"><span>Walking dinner</span></label>
        <label><input type="radio" name="g" value="buffet" data-pp="32.5"><span>Buffet</span></label>
      </fieldset>
      <p class="kvm__wat">Zuurdesem van bakkerij Blom, Utrechtse kaas, gerookte forel, eiersalade met bieslook, soep van de dag en handfruit.</p>
      <label class="kvm__gasten">Aantal gasten <output class="kvm__n">40</output><input type="range" name="n" min="10" max="400" step="5" value="40"></label>
      <fieldset class="kvm__extra"><legend>Erbij</legend>
        <label><input type="checkbox" name="vega"><span>Alles vegetarisch, zelfde prijs</span></label>
        <label><input type="checkbox" name="dessert" data-pp="4.5"><span>Dessert, 4,50 per persoon</span></label>
        <label><input type="checkbox" name="servies" data-pp="2.1"><span>Servies en glaswerk, 2,10 per persoon</span></label>
        <label><input type="checkbox" name="bediening"><span>Bediening, 42 euro per medewerker per uur</span></label>
      </fieldset>
      <div class="kvm__som" aria-live="polite">
        <p class="kvm__totaal">€ 580</p>
        <p class="kvm__uitleg">40 gasten, lunch à 14,50. Inclusief 9% btw, bezorging binnen Utrecht gratis.</p>
      </div>
      <a href="#kvm-contact" class="kvm__btn kvm__naar">Vraag deze offerte aan</a>
    </form>
  </div>
</div>

<div class="kvm__keuken" id="kvm-keuken"><div class="kvm__in kvm__keuken-in">
  <div class="kvm__keuken-txt">
    <h2 class="kvm__h2">Mares en haar keuken</h2>
    <p class="kvm__p">Mares Veenstra kookte acht jaar in restaurants in Utrecht en Gent. In 2015 begon ze met lunches voor drie kantoren op het Werkspoorkwartier. Nu werken er veertien mensen in de keuken en op de bus, en koken we elke werkdag zo'n zeshonderd lunches.</p>
    <p class="kvm__p">Groente komt van Tuinderij De Kromme Rijn en zorgboerderij Rhijnauwen, vlees van een slager in IJsselstein. Wat de boer die week heeft, bepaalt de salade. Brood bakt Blom aan de Twijnstraat, de kaas komt uit Montfoort.</p>
    <p class="kvm__p">We rijden met twee elektrische bussen en leveren in herbruikbare kratten en schalen. Wegwerpbakjes gebruiken we alleen als je erom vraagt, en dan van karton.</p>
    <blockquote class="kvm__quote">„Een buffet is pas goed als de laatste gast hetzelfde bord krijgt als de eerste.”<cite>Mares Veenstra</cite></blockquote>
  </div>
  <div class="kvm__keuken-beeld">
    <img class="kvm__kb-a" src="https://neddev.com/lab-media/site-catering-6.webp" alt="Mares Veenstra proeft een saus in de keuken" width="900" height="491" loading="lazy">
    <img class="kvm__kb-b" src="https://neddev.com/lab-media/site-catering-13.webp" alt="Kisten prei, wortel, boerenkool en pompoen van de tuinderij" width="900" height="491" loading="lazy">
    <img class="kvm__kb-c" src="https://neddev.com/lab-media/site-catering-5.webp" alt="Een kok richt borden op in de keuken" width="900" height="491" loading="lazy">
  </div>
</div></div>

<div class="kvm__werk"><div class="kvm__in">
  <h2 class="kvm__h2">Onlangs gekookt</h2>
  <div class="kvm__werk-rij">
    <figure class="kvm__w1"><img src="https://neddev.com/lab-media/site-catering-16.webp" alt="Kok grilt groente en spiesen op een tuinfeest" width="900" height="491" loading="lazy"><figcaption><time datetime="2026-09-27">27 september</time> Tuinfeest in Zeist, 80 gasten. Twee koks aan de grill, salades van de tuinderij.
      <blockquote>„Mares belde de dag ervoor nog om het weer te bespreken. Om tien uur stond er een tent.”<cite>Fleur Mulder, Zeist</cite></blockquote></figcaption></figure>
    <figure class="kvm__w2"><img src="https://neddev.com/lab-media/site-catering-10.webp" alt="Desserttafel met chocolademousse en appelcrumble" width="900" height="491" loading="lazy"><figcaption><time datetime="2026-09-19">19 september</time> Advocatenkantoor op de Maliebaan, 60 jaar, 140 gasten. Walking dinner in vijf gangen.
      <blockquote>„Niemand stond in een rij. Na afloop vroegen drie klanten wie de catering deed.”<cite>Noor Bakker, office manager</cite></blockquote></figcaption></figure>
    <figure class="kvm__w3"><img src="https://neddev.com/lab-media/site-catering-7c.webp" alt="Medewerkers dragen kratten met lunch een kantoor binnen" width="900" height="420" loading="lazy"><figcaption><time datetime="2026-10-06">6 oktober</time> Vaste lunch voor een softwarebedrijf in Leidsche Rijn, elke maandag en donderdag, 45 collega's.
      <blockquote>„We zaten twee jaar bij een andere cateraar op de dinsdaglunch. Hier wisselt de soep echt elke week.”<cite>Pieter van Leeuwen, Leidsche Rijn</cite></blockquote></figcaption></figure>
  </div>
  <p class="kvm__score">Gemiddeld 9,1 uit 286 beoordelingen van opdrachtgevers.</p>
</div></div>

<div class="kvm__contact" id="kvm-contact"><div class="kvm__in kvm__contact-in">
  <div>
    <h2 class="kvm__h2">Offerte aanvragen</h2>
    <p class="kvm__p">Binnen één werkdag heb je een voorstel met menu, prijs en planning. Bellen mag ook: 030 123 4567, werkdagen van 8:00 tot 17:00.</p>
    <form class="kvm__form" novalidate>
      <label class="kvm__veld">Je keuze<input type="text" name="keuze" readonly value="Lunch, 40 gasten"></label>
      <div class="kvm__rij">
        <label class="kvm__veld">Datum<input type="date" name="datum" required></label>
        <label class="kvm__veld">Plaats<input type="text" name="plaats" placeholder="Utrecht"></label>
      </div>
      <div class="kvm__rij">
        <label class="kvm__veld">Naam<input type="text" name="naam" autocomplete="name" required></label>
        <label class="kvm__veld">E-mail<input type="email" name="mail" autocomplete="email" required></label>
      </div>
      <button type="submit" class="kvm__btn">Verstuur aanvraag</button>
      <p class="kvm__fout" role="alert" hidden>Vul een datum, je naam en een geldig e-mailadres in.</p>
    </form>
    <p class="kvm__klaar" role="status" hidden></p>
  </div>
  <div class="kvm__faq">
    <details><summary>Hoeveel gasten minimaal?</summary><p>Tien voor lunch en borrel, dertig voor buffet en walking dinner. Kleiner kan op vrijdag, vraag het gerust.</p></details>
    <details><summary>Houden jullie rekening met allergieën?</summary><p>Ja. Elk gerecht heeft een kaartje met de veertien allergenen. Glutenvrij en halal koken we apart, met eigen bakken.</p></details>
    <details><summary>Tot wanneer kan ik het aantal gasten wijzigen?</summary><p>Tot drie werkdagen vooraf zonder kosten. Daarna rekenen we maximaal tien procent minder dan opgegeven.</p></details>
    <details><summary>Kunnen jullie ook drank verzorgen?</summary><p>Ja. Koffie, thee, sappen van Fruitteelt Van der Wind en een wijnselectie van een slijter in Wijk bij Duurstede. Bier van de tap kan vanaf 50 gasten.</p></details>
    <details><summary>Wat gebeurt er met wat over is?</summary><p>Je mag het houden, verpakt en gelabeld. Wat we terugnemen, gaat naar de Voedselbank Utrecht.</p></details>
  </div>
</div></div>

<div class="kvm__voet" role="contentinfo"><div class="kvm__in">
  <div class="kvm__voet-kol">
    <div><p class="kvm__voet-logo">Keuken van Mares</p><p>Cartesiusweg 92<br>3534 BD Utrecht<br><a href="#">030 123 4567</a><br><a href="mailto:offerte@voorbeeld.nl">offerte@voorbeeld.nl</a></p></div>
    <div><p class="kvm__voet-kop">Op kantoor</p><a href="#kvm-kantoor">Vaste lunch</a><a href="#kvm-menu">Broodjeslunch</a><a href="#kvm-menu">Borrel</a><a href="#">Vergaderlunch</a></div>
    <div><p class="kvm__voet-kop">Feesten</p><a href="#kvm-feest">Bruiloft</a><a href="#kvm-menu">Walking dinner</a><a href="#kvm-menu">Buffet</a><a href="#">Locaties</a></div>
    <div><p class="kvm__voet-kop">Mares</p><a href="#kvm-keuken">Keuken</a><a href="#">Telers</a><a href="#">Werken bij</a><a href="#kvm-contact">Contact</a></div>
  </div>
  <p class="kvm__voet-regel">Keuken van Mares B.V. · KvK 61234578 · btw NL854123698B01 · Cartesiusweg 92, Utrecht · Werkt volgens de Hygiënecode voor de horeca · Lid Koninklijke Horeca Nederland · <a href="#">Privacy</a> · <a href="#">Leveringsvoorwaarden</a></p>
</div></div>
</div>
</div>

/* Keuken van Mares · bedrijfs- en feestcatering, Utrecht · NedDev · eigen werk. */
/* fonts (Fontshare): satoshi@400,700 */
.kvm{--bg:#C9D8C5;--opp:#DEE8DB;--tekst:#121A12;--gedempt:#3D4C3C;--lijn:#AFC2AA;--accent:#1C2F7A;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:44px;--fs6:72px;--sectie:clamp(64px,8vw,112px);--gat:clamp(20px,2.5vw,36px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Satoshi',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.kvm *{box-sizing:border-box}
.kvm [hidden]{display:none!important}
.kvm a{color:inherit}
.kvm img{display:block;max-width:100%;height:auto}
.kvm figure{margin:0}
.kvm__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.kvm__top{background:var(--accent);color:#fff}
.kvm__top-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:4px;padding-bottom:4px}
.kvm__top-txt{margin:0;font-size:var(--fs1)}
.kvm__top-r{display:flex;gap:22px}
.kvm__top-r a{white-space:nowrap;text-decoration:none;font-weight:700;display:inline-block;padding:4px 0}
.kvm__head{position:sticky;top:0;z-index:20}
.kvm__head-in{display:flex;align-items:center;gap:32px;height:74px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.kvm__logo{font-weight:700;font-size:var(--fs3);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.kvm__nav{display:flex;gap:24px;margin-left:auto}
.kvm__nav a{text-decoration:none;color:var(--gedempt);transition:color .18s}
.kvm__nav a:hover{color:var(--accent)}
.kvm__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-weight:700;font-size:var(--fs2);padding:14px 22px;border-radius:var(--r);border:0;cursor:pointer;font-family:inherit;transition:background-color .18s}
.kvm__btn:hover{background:#121A12}
.kvm__btn--head{padding:10px 18px}
.kvm__menu-knop{display:none;width:44px;height:44px;background:none;border:1px solid var(--tekst);border-radius:var(--r);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto}
.kvm__menu-knop span{display:block;width:18px;height:2px;background:var(--tekst)}
.kvm__menu-nav{background:var(--bg);border-bottom:1px solid var(--lijn);padding:8px var(--zij) 20px}
.kvm__menu-nav a{display:block;padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}
.kvm__menu-nav .kvm__btn{display:block;text-align:center;margin-top:16px;border-bottom:0}
.kvm__hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:600px}
.kvm__hero-foto{position:relative;overflow:hidden}
.kvm .kvm__hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kvm__hero-txt{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(var(--zij),4vw,64px)}
.kvm__h1{font-size:var(--fs6);font-weight:700;line-height:1;letter-spacing:-.04em;margin:0 0 24px;max-width:8em}
.kvm__lead{font-size:var(--fs3);color:var(--gedempt);margin:0 0 32px;max-width:30em;line-height:1.45}
.kvm__acties{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.kvm__link{font-weight:700;text-underline-offset:5px;padding:10px 0}
.kvm__link:hover{color:var(--accent)}
.kvm__klein{font-size:var(--fs1);color:var(--gedempt);margin:32px 0 0}
.kvm__h2{font-size:var(--fs5);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0 0 20px}
.kvm__h3{font-size:var(--fs4);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0 0 8px;color:var(--tekst)}
.kvm__p{color:var(--gedempt);margin:0 0 18px;max-width:var(--lees)}
.kvm__twee{padding:var(--sectie) 0}
.kvm__twee-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,96px);align-items:start}
.kvm__twee img{width:100%;object-fit:cover;border-radius:var(--r)}
.kvm__twee-a img{aspect-ratio:16/10}
.kvm__twee-b{margin-top:clamp(48px,12vw,200px)}
.kvm__twee-b img{aspect-ratio:4/5}
.kvm figcaption{color:var(--gedempt);margin-top:16px;max-width:34em}
.kvm__menu{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--opp)}
.kvm__menu-foto{position:relative;min-height:640px;overflow:hidden}
.kvm .kvm__mf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.kvm__mf.is-aan{opacity:1}
.kvm__menu-txt{padding:var(--sectie) clamp(var(--zij),4vw,64px)}
.kvm__bouw{display:grid;gap:22px;max-width:620px}
.kvm__keus,.kvm__extra{border:0;margin:0;padding:0}
.kvm__keus legend,.kvm__extra legend{font-size:var(--fs1);color:var(--gedempt);padding:0;margin-bottom:8px}
.kvm__keus{display:flex;flex-wrap:wrap;gap:8px}
.kvm__keus label{position:relative}
.kvm__keus input{position:absolute;opacity:0;width:1px;height:1px}
.kvm__keus span{display:block;padding:11px 18px;border:1px solid var(--tekst);border-radius:var(--r);cursor:pointer;font-weight:700;transition:background-color .18s,color .18s}
.kvm__keus input:checked+span{background:var(--tekst);color:var(--opp)}
.kvm__keus input:focus-visible+span,.kvm__extra input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.kvm__wat{margin:0;font-size:var(--fs3);line-height:1.45;min-height:3em}
.kvm__gasten{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:baseline;font-size:var(--fs1);color:var(--gedempt)}
.kvm__n{font-size:var(--fs4);font-weight:700;color:var(--tekst)}
.kvm__gasten input{grid-column:1/-1;width:100%;accent-color:var(--accent);height:28px}
.kvm__extra{display:grid;gap:4px}
.kvm__extra label{display:flex;gap:12px;align-items:center;padding:8px 0;cursor:pointer;border-bottom:1px solid var(--lijn)}
.kvm__extra input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.kvm__som{border-top:2px solid var(--tekst);padding-top:16px}
.kvm__totaal{font-size:var(--fs6);font-weight:700;line-height:1;letter-spacing:-.04em;margin:0 0 8px;color:var(--accent)}
.kvm__uitleg{margin:0;color:var(--gedempt);max-width:34em}
.kvm__naar{justify-self:start}
.kvm__keuken{padding:var(--sectie) 0}
.kvm__keuken-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,96px);align-items:center}
.kvm__keuken-beeld{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--gat)}
.kvm__keuken-beeld img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.kvm__kb-a{grid-row:span 2;aspect-ratio:3/4}
.kvm__kb-b,.kvm__kb-c{aspect-ratio:4/3}
.kvm blockquote{margin:0}
.kvm cite{display:block;font-style:normal;font-size:var(--fs1);color:var(--gedempt);margin-top:10px}
.kvm__quote{font-size:var(--fs3);font-weight:700;line-height:1.35;margin-top:28px!important;max-width:24em}
.kvm__werk{background:var(--accent);color:#fff;padding:var(--sectie) 0}
.kvm__werk figcaption{color:#d4d9ef}
.kvm__werk blockquote{margin-top:14px;font-size:var(--fs3);line-height:1.35;color:#fff;font-weight:700}
.kvm__werk cite{color:#c9cfe6;font-weight:400}
.kvm__score{margin:40px 0 0;color:#d4d9ef;border-top:1px solid #4a5a9a;padding-top:16px}
.kvm__werk-rij{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:var(--gat);align-items:start}
.kvm__werk-rij img{width:100%;object-fit:cover;border-radius:var(--r)}
.kvm__w1 img{aspect-ratio:4/5}
.kvm__w2 img{aspect-ratio:1/1}
.kvm__w3 img{aspect-ratio:4/3}
.kvm__werk time{display:block;color:#fff;font-weight:700}
.kvm__contact{padding:var(--sectie) 0}
.kvm__contact-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,96px)}
.kvm__form{display:grid;gap:16px;max-width:640px}
.kvm__rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kvm__veld{display:grid;gap:6px;font-size:var(--fs1);color:var(--gedempt)}
.kvm__veld input{font:inherit;font-size:var(--fs2);color:var(--tekst);background:var(--opp);border:1px solid var(--gedempt);border-radius:var(--r);padding:12px 14px;min-height:48px;width:100%}
.kvm__veld input[readonly]{background:transparent;font-weight:700;border-style:dashed}
.kvm__veld input:focus{outline:2px solid var(--accent);outline-offset:1px}
.kvm__form .kvm__btn{justify-self:start;margin-top:6px}
.kvm__fout{color:#8a1c1c;margin:0;font-weight:700}
.kvm__klaar{font-size:var(--fs4);font-weight:700;line-height:1.25;margin:20px 0 0;max-width:20em}
.kvm__faq{align-self:start;margin-top:8px}
.kvm__faq details{border-bottom:1px solid var(--lijn)}
.kvm__faq details:first-child{border-top:1px solid var(--lijn)}
.kvm__faq summary{cursor:pointer;padding:16px 36px 16px 0;font-weight:700;font-size:var(--fs3);list-style:none;position:relative}
.kvm__faq summary::-webkit-details-marker{display:none}
.kvm__faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:var(--fs4);line-height:1;color:var(--accent)}
.kvm__faq details[open] summary::after{content:"\2212"}
.kvm__faq p{margin:0 0 18px;color:var(--gedempt)}
.kvm__voet{border-top:1px solid var(--lijn);background:var(--opp);padding:56px 0 32px;color:var(--gedempt)}
.kvm__voet-kol{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.kvm__voet-kol a{display:block;text-decoration:none;padding:3px 0;transition:color .18s}
.kvm__voet-kol a:hover{color:var(--accent)}
.kvm__voet-kol p{margin:0}
.kvm__voet-logo{font-weight:700;font-size:var(--fs3);color:var(--tekst);margin-bottom:12px!important}
.kvm__voet-kop{color:var(--tekst);font-weight:700;margin-bottom:8px!important}
.kvm__voet-regel{font-size:var(--fs1);border-top:1px solid var(--lijn);padding-top:20px;margin:0}
@container (max-width:980px){
  .kvm__nav,.kvm__btn--head{display:none}
  .kvm__menu-knop{display:flex}
  .kvm__top-txt:first-child{display:none}
  .kvm__hero,.kvm__twee-in,.kvm__menu,.kvm__keuken-in{grid-template-columns:minmax(0,1fr)}
  .kvm__hero{min-height:0}
  .kvm__hero-foto{aspect-ratio:4/3}
  .kvm__hero-txt{padding-top:32px;padding-bottom:48px}
  .kvm__h1{font-size:44px}
  .kvm__h2{font-size:var(--fs4)}
  .kvm__twee-b{margin-top:0}
  .kvm__twee-b img{aspect-ratio:16/10}
  .kvm__menu-foto{min-height:0;aspect-ratio:16/10}
  .kvm__werk-rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kvm__w3{grid-column:1/-1}
    .kvm__voet-kol{grid-template-columns:1fr 1fr}
}
@container (max-width:560px){
  .kvm__h1{font-size:38px}
  .kvm__rij{grid-template-columns:1fr}
  .kvm__werk-rij{grid-template-columns:minmax(0,1fr)}
  .kvm__w1 img,.kvm__w2 img{aspect-ratio:4/3}
  .kvm__totaal{font-size:var(--fs5)}
  .kvm__top-in{justify-content:flex-start}
  .kvm__top-r a:first-child{display:none}
}
@media (prefers-reduced-motion:reduce){.kvm *{transition:none!important}}

// Keuken van Mares · bedrijfs- en feestcatering, Utrecht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.kvm');if(!s)return;
var knop=s.querySelector('.kvm__menu-knop'),menu=s.querySelector('.kvm__menu-nav');
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');}});
var b=s.querySelector('.kvm__bouw'),nOut=s.querySelector('.kvm__n'),tot=s.querySelector('.kvm__totaal'),uit=s.querySelector('.kvm__uitleg'),wat=s.querySelector('.kvm__wat'),keuze=s.querySelector('.kvm__form input[name=keuze]');
var namen={lunch:'lunch',borrel:'borrel',walking:'walking dinner',buffet:'buffet'};
var tekst={lunch:'Zuurdesem van bakkerij Blom, Utrechtse kaas, gerookte forel, eiersalade met bieslook, soep van de dag en handfruit.',
 borrel:'Zes hapjes per persoon: kroketjes van de slager, bietentartaar, makreel op roggebrood, kaas uit Montfoort en twee warme hapjes.',
 walking:'Vijf kleine gangen, rondgebracht of aan de keukentafel: pompoen met linzen en geitenkaas, schol, stoof van IJsselsteins rund.',
 buffet:'Langzaam gegaarde rosbief, geroosterde wortel en pastinaak, drie salades van het seizoen, brood en jus. Kok aan het buffet.'};
var fotos=s.querySelectorAll('.kvm__mf');
function euro(x){return '€ '+x.toFixed(x%1?2:0).replace('.',',').replace(/\B(?=(\d{3})+(?!\d))/g,'.');}
function reken(){var g=b.querySelector('input[name=g]:checked'),n=+b.n.value,pp=+g.dataset.pp,extra=0,delen=[];
  nOut.textContent=n;wat.textContent=tekst[g.value];
  fotos.forEach(function(f){f.classList.toggle('is-aan',f.dataset.g===g.value);});
  if(b.dessert.checked){extra+=4.5;delen.push('dessert');}
  if(b.servies.checked){extra+=2.1;delen.push('servies');}
  var totaal=n*(pp+extra),txt=n+' gasten, '+namen[g.value]+' à '+euro(pp).replace('€ ','')+(delen.length?' met '+delen.join(' en '):'')+(b.vega.checked?', alles vegetarisch':'')+'.';
  if(b.bediening.checked){var m=Math.max(1,Math.ceil(n/25)),u=g.value==='lunch'?2:4;totaal+=m*u*42;txt+=' '+m+(m===1?' medewerker':' medewerkers')+' bediening, '+u+' uur.';}
  if(g.value!=='lunch'&&g.value!=='borrel'&&n<30){txt+=' Let op: buffet en walking dinner vanaf 30 gasten.';}
  tot.textContent=euro(totaal);uit.textContent=txt+' Inclusief btw, bezorging binnen Utrecht gratis.';
  keuze.value=namen[g.value].charAt(0).toUpperCase()+namen[g.value].slice(1)+', '+n+' gasten'+(delen.length?', met '+delen.join(' en '):'')+(b.bediening.checked?', met bediening':'')+', '+euro(totaal);}
b.addEventListener('input',reken);b.addEventListener('change',reken);reken();
var f=s.querySelector('.kvm__form'),fout=s.querySelector('.kvm__fout'),klaar=s.querySelector('.kvm__klaar');
f.addEventListener('submit',function(e){e.preventDefault();var ok=f.datum.value&&f.naam.value.trim()&&/^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i.test(f.mail.value.trim());if(!ok){fout.hidden=false;return;}fout.hidden=true;f.hidden=true;klaar.hidden=false;
  klaar.textContent='Dank je, '+f.naam.value.trim().split(' ')[0]+'. Mares stuurt morgen voor 12:00 een voorstel naar '+f.mail.value.trim()+'.';});
}
init(document.querySelector('.jouw-container'));