Bureau Kiel · architectenbureau, Rotterdam Nieuw

Homepage voor een klein architectenbureau: vaste zijnavigatie, filter- en sorteerbare projectindex met beeldvoorvertoning, uitgelichte projecten in een asymmetrisch raster, fasen als maatlijn, team, publicaties met datums en een stempelvak als footer.

Bekijk op volledig scherm ↗

Blad A-000 · Homepage · schaal 1:1Vacature: projectarchitect, 32 tot 40 uurNL / EN

Wij ontwerpen woningen, scholen en kleine publieke gebouwen in en rond Rotterdam. Liever een goed detail dan een groot gebaar.

Bureau Kiel is een architectenbureau van zes mensen, sinds 2014 gevestigd in een voormalig havenpakhuis aan de Lekhaven. We werken voor woningcorporaties, schoolbesturen, gemeenten en particulieren, van schetsontwerp tot oplevering.

Bekijk alle 14 projecten

Bakstenen woningblok in Rotterdam-Hillesluis met diepe vensters en donkere stalen kozijnen — **K-027** Woningblok Hillesluis, 42 sociale huurwoningen voor Woonstad, opgeleverd juni 2025. Metselwerk in wildverband, kozijnen in staal.

Projectindex

Alle projecten sinds de oprichting, het nieuwste bovenaan. Klik op een kolomkop om te sorteren.

Nr	Project	Plaats	Programma	Fase
K-041	Woonhuis Kralingen-WestVrijstaand woonhuis met werkruimte	Rotterdam	wonen	DO	2026	210
K-039	Brede school De EschBasisschool, kinderopvang, gymzaal	Rotterdam	onderwijs	Uitvoering	2026	2.860
K-038	Theehuis VroesenparkPaviljoen met terras en toiletten	Rotterdam	publiek	Uitvoering	2026	140
K-036	Westblaak 112Kantoor naar 38 huurwoningen	Rotterdam	transformatie	TO	2025	3.420
K-033	Bibliotheek AfrikaanderwijkSchoolgebouw uit 1931 naar bibliotheek	Rotterdam	transformatie	Opgeleverd	2025	1.180
K-031	Rijwoningen Kerkpad12 koopwoningen, collectief particulier opdrachtgeverschap	Poortugaal	wonen	Opgeleverd	2025	1.560
K-027	Woningblok Hillesluis42 sociale huurwoningen	Rotterdam	wonen	Opgeleverd	2025	4.150
K-024	Huis aan de SingelWoonhuis in geglazuurde steen	Schiedam	wonen	Opgeleverd	2024	186
K-022	Kinderdagverblijf DelfshavenOpvang voor 64 kinderen	Rotterdam	onderwijs	Opgeleverd	2023	640
K-019	Montessorischool, uitbreidingZes lokalen en een speellokaal	Vlaardingen	onderwijs	Opgeleverd	2023	920
K-017	Wijkcentrum PendrechtBuurthuis met keuken en zaal	Rotterdam	publiek	Opgeleverd	2022	780
K-014	Atelierwoning KatendrechtWonen boven een werkplaats	Rotterdam	wonen	Opgeleverd	2021	240
K-011	Clubhuis roeiverenigingBotenloods en kantine aan de Kralingse Plas	Rotterdam	publiek	Opgeleverd	2020	410
K-008	Pakhuis LekhavenEigen studio in een havenpakhuis	Rotterdam	transformatie	Opgeleverd	2019	520

Uitgelicht

Drie projecten uit het afgelopen jaar.

Bibliotheek in een voormalig schoolgebouw met betonnen balken en eikenhouten kasten

K-033 · Rotterdam-Zuid · 2025

Bibliotheek Afrikaanderwijk

Een schoolgebouw uit 1931 stond acht jaar leeg. We haalden de tussenwanden op de verdieping weg, lieten het betonskelet zien en gaven de leeszaal één lange tafel van 14 meter. De oude speelplaats is nu een tuin die 's avonds open blijft.

Opdrachtgever: Gemeente Rotterdam
Oppervlak: 1.180 m² bvo
Bouwkosten: € 2,9 mln excl. btw

Houten paviljoen met lariks gevelbekleding aan een vijver in een stadspark

K-038 · Blijdorp · in uitvoering

Theehuis Vroesenpark

Een laag paviljoen van lariks dat met zijn rug naar het pad staat en zich opent naar de vijver. Oplevering voorjaar 2027.

K-024 · Schiedam · 2024

Huis aan de Singel

Een smal woonhuis tussen twee negentiende-eeuwse buren. De gevel is van groen geglazuurde steen, die bij regen donkerder wordt en bij zon het licht van het water terugkaatst. De voordeur is van massief eiken, gemaakt door een meubelmaker uit Delft.

Opdrachtgever: Particulier
Oppervlak: 186 m² bvo

Gevel van groen geglazuurde baksteen met een eikenhouten voordeur

Werkwijze

We werken in de fasen van de DNR 2011. Per fase weet u vooraf wat u krijgt, wat het kost en welke beslissing u aan het eind neemt. Hieronder de doorlooptijden van een gemiddelde school.

6 wkSO
Schetsontwerp
Drie varianten op de kavel, met massa, daglicht en een eerste kostenraming.
U kiest één richting
8 wkVO
Voorlopig ontwerp
Plattegronden en gevels op 1:200, materialen, installatieconcept.
Basis voor omgevingsvergunning
10 wkDO
Definitief ontwerp
Alles op 1:100, constructie en installaties afgestemd, raming element-gewijs.
Vergunning aanvragen
12 wkTO
Technisch ontwerp
Details op 1:5, bestek en tekeningen voor de aanbesteding.
Aannemer selecteren
40 tot 60 wkUO
Uitvoering
Esthetische directie: elke week op de bouw, monsters keuren, details bewaken.
Oplevering en sleutel

Studio

Zes mensen aan twee lange tafels, met uitzicht op de kranen van de Waalhaven.

Femke OudshoornArchitect, oprichtersinds 2014
Joris KalkmanArchitect, oprichtersinds 2014
Nadia El IdrissiProjectarchitectsinds 2018
Bram VerhoevenBouwkundig ontwerpersinds 2020
Lieke TanOntwerpersinds 2023
Thijs MolenaarWerkplaats en maquettessinds 2024
Wij zoekenProjectarchitect, 32 tot 40 uurBekijk vacature

Publicaties en lezingen

Wat er over ons werk is geschreven, en waar we zelf hebben gesproken.

24.09.2026de ArchitectEen bibliotheek die naar de straat kijktArtikel
09.09.2026ArchitectenwebTheehuis Vroesenpark in aanbouwNieuws
02.07.2026AD Rotterdams DagbladOude school op Zuid krijgt tweede leven als biebKrant
14.05.2026Academie van BouwkunstFemke Oudshoorn: het detail als houdingLezing
21.03.2026Bouwen met StaalStalen kozijnen in een gemetselde gevel, HillesluisVakblad
30.11.2025Dag van de ArchitectuurRondleiding Woningblok Hillesluis voor buurtbewonersRondleiding

Een opdracht bespreken?

Het eerste gesprek is kosteloos, op locatie of bij ons aan de Lekhaven. Neem een kadasterkaart of een paar foto's mee; meer hoeft niet.

Woningbouw en particulierenFemke Oudshoorn010 123 4567

Onderwijs en publiekJoris Kalkman010 123 4568

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Bureau Kiel · architectenbureau, Rotterdam · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bk-site"><div class="bk-frame">
  <aside class="bk-side" role="banner">
    <div class="bk-side__in">
      <a class="bk-mark" href="#" aria-label="Bureau Kiel architecten, naar de homepage"><b>kiel</b><span>architecten</span></a>
      <button class="bk-tog" type="button" aria-expanded="false">Menu</button>
      <ul class="bk-nav">
        <li><a href="#bk-index"><i>01</i>Projecten</a></li>
        <li><a href="#bk-werk"><i>02</i>Werkwijze</a></li>
        <li><a href="#bk-studio"><i>03</i>Studio</a></li>
        <li><a href="#bk-pub"><i>04</i>Publicaties</a></li>
        <li><a href="#bk-contact"><i>05</i>Contact</a></li>
        <li><a href="#bk-studio"><i>06</i>Vacatures <em>1</em></a></li>
      </ul>
      <div class="bk-side__meta">
        <p>Lekhaven 14<br>3011 GB Rotterdam</p>
        <p><a href="#">010 123 4567</a><br><a href="#">studio@voorbeeld.nl</a></p>
        <dl class="bk-side__now"><div><dt>In ontwerp</dt><dd>7</dd></div><div><dt>In uitvoering</dt><dd>3</dd></div></dl>
      </div>
    </div>
  </aside>

  <div class="bk-main">
    <div class="bk-top"><span>Blad A-000 · Homepage · schaal 1:1</span><span class="bk-top__r"><a href="#bk-studio">Vacature: projectarchitect, 32 tot 40 uur</a><span class="bk-lang"><b>NL</b> / <a href="#">EN</a></span></span></div>

    <div class="bk-intro">
      <h1>Wij ontwerpen woningen, scholen en kleine publieke gebouwen in en rond Rotterdam. Liever een goed detail dan een groot gebaar.</h1>
      <div class="bk-intro__side">
        <p>Bureau Kiel is een architectenbureau van zes mensen, sinds 2014 gevestigd in een voormalig havenpakhuis aan de Lekhaven. We werken voor woningcorporaties, schoolbesturen, gemeenten en particulieren, van schetsontwerp tot oplevering.</p>
        <a class="bk-arrow" href="#bk-index">Bekijk alle 14 projecten</a>
      </div>
    </div>

    <figure class="bk-hero">
      <div class="bk-axes" aria-hidden="true"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span></div>
      <div class="bk-hero__img"><img src="https://neddev.com/lab-media/site-studio-1.webp" alt="Bakstenen woningblok in Rotterdam-Hillesluis met diepe vensters en donkere stalen kozijnen" loading="lazy"></div>
      <div class="bk-dim" aria-hidden="true"><span>38.400</span></div>
      <figcaption><b>K-027</b> Woningblok Hillesluis, 42 sociale huurwoningen voor Woonstad, opgeleverd juni 2025. Metselwerk in wildverband, kozijnen in staal.</figcaption>
    </figure>

    <div class="bk-sec" id="bk-index">
      <div class="bk-h"><span class="bk-h__nr">01</span><h2>Projectindex</h2><p>Alle projecten sinds de oprichting, het nieuwste bovenaan. Klik op een kolomkop om te sorteren.</p></div>
      <div class="bk-fil" role="tablist" aria-label="Filter op programma">
        <button type="button" class="is-on" data-f="alle">Alles <sup>14</sup></button>
        <button type="button" data-f="wonen">Wonen <sup>5</sup></button>
        <button type="button" data-f="onderwijs">Onderwijs <sup>3</sup></button>
        <button type="button" data-f="publiek">Publiek <sup>3</sup></button>
        <button type="button" data-f="transformatie">Transformatie <sup>3</sup></button>
      </div>
      <div class="bk-ix">
        <table>
          <thead><tr><th>Nr</th><th>Project</th><th class="bk-ix__pl">Plaats</th><th class="bk-ix__c">Programma</th><th class="bk-ix__f">Fase</th><th class="bk-ix__n"><button type="button" data-s="jaar" aria-sort="descending">Jaar</button></th><th class="bk-ix__n bk-ix__m"><button type="button" data-s="m2">m² bvo</button></th></tr></thead>
          <tbody>
          <tr data-cat="wonen" data-jaar="2026" data-m2="210"><td class="bk-ix__nr">K-041</td><td class="bk-ix__t"><a href="#">Woonhuis Kralingen-West</a><span>Vrijstaand woonhuis met werkruimte</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">wonen</td><td class="bk-ix__f"><span class="bk-st bk-st--on">DO</span></td><td class="bk-ix__n">2026</td><td class="bk-ix__n bk-ix__m">210</td></tr>
          <tr data-cat="onderwijs" data-jaar="2026" data-m2="2860"><td class="bk-ix__nr">K-039</td><td class="bk-ix__t"><a href="#">Brede school De Esch</a><span>Basisschool, kinderopvang, gymzaal</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">onderwijs</td><td class="bk-ix__f"><span class="bk-st bk-st--on">Uitvoering</span></td><td class="bk-ix__n">2026</td><td class="bk-ix__n bk-ix__m">2.860</td></tr>
          <tr data-cat="publiek" data-jaar="2026" data-m2="140" data-img="https://neddev.com/lab-media/site-studio-4.webp"><td class="bk-ix__nr">K-038</td><td class="bk-ix__t"><a href="#">Theehuis Vroesenpark</a><span>Paviljoen met terras en toiletten</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">publiek</td><td class="bk-ix__f"><span class="bk-st bk-st--on">Uitvoering</span></td><td class="bk-ix__n">2026</td><td class="bk-ix__n bk-ix__m">140</td></tr>
          <tr data-cat="transformatie" data-jaar="2025" data-m2="3420"><td class="bk-ix__nr">K-036</td><td class="bk-ix__t"><a href="#">Westblaak 112</a><span>Kantoor naar 38 huurwoningen</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">transformatie</td><td class="bk-ix__f"><span class="bk-st bk-st--on">TO</span></td><td class="bk-ix__n">2025</td><td class="bk-ix__n bk-ix__m">3.420</td></tr>
          <tr data-cat="transformatie" data-jaar="2025" data-m2="1180" data-img="https://neddev.com/lab-media/site-studio-3.webp"><td class="bk-ix__nr">K-033</td><td class="bk-ix__t"><a href="#">Bibliotheek Afrikaanderwijk</a><span>Schoolgebouw uit 1931 naar bibliotheek</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">transformatie</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2025</td><td class="bk-ix__n bk-ix__m">1.180</td></tr>
          <tr data-cat="wonen" data-jaar="2025" data-m2="1560"><td class="bk-ix__nr">K-031</td><td class="bk-ix__t"><a href="#">Rijwoningen Kerkpad</a><span>12 koopwoningen, collectief particulier opdrachtgeverschap</span></td><td class="bk-ix__pl">Poortugaal</td><td class="bk-ix__c">wonen</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2025</td><td class="bk-ix__n bk-ix__m">1.560</td></tr>
          <tr data-cat="wonen" data-jaar="2025" data-m2="4150" data-img="https://neddev.com/lab-media/site-studio-1.webp"><td class="bk-ix__nr">K-027</td><td class="bk-ix__t"><a href="#">Woningblok Hillesluis</a><span>42 sociale huurwoningen</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">wonen</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2025</td><td class="bk-ix__n bk-ix__m">4.150</td></tr>
          <tr data-cat="wonen" data-jaar="2024" data-m2="186" data-img="https://neddev.com/lab-media/site-studio-5.webp"><td class="bk-ix__nr">K-024</td><td class="bk-ix__t"><a href="#">Huis aan de Singel</a><span>Woonhuis in geglazuurde steen</span></td><td class="bk-ix__pl">Schiedam</td><td class="bk-ix__c">wonen</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2024</td><td class="bk-ix__n bk-ix__m">186</td></tr>
          <tr data-cat="onderwijs" data-jaar="2023" data-m2="640"><td class="bk-ix__nr">K-022</td><td class="bk-ix__t"><a href="#">Kinderdagverblijf Delfshaven</a><span>Opvang voor 64 kinderen</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">onderwijs</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2023</td><td class="bk-ix__n bk-ix__m">640</td></tr>
          <tr data-cat="onderwijs" data-jaar="2023" data-m2="920"><td class="bk-ix__nr">K-019</td><td class="bk-ix__t"><a href="#">Montessorischool, uitbreiding</a><span>Zes lokalen en een speellokaal</span></td><td class="bk-ix__pl">Vlaardingen</td><td class="bk-ix__c">onderwijs</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2023</td><td class="bk-ix__n bk-ix__m">920</td></tr>
          <tr data-cat="publiek" data-jaar="2022" data-m2="780"><td class="bk-ix__nr">K-017</td><td class="bk-ix__t"><a href="#">Wijkcentrum Pendrecht</a><span>Buurthuis met keuken en zaal</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">publiek</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2022</td><td class="bk-ix__n bk-ix__m">780</td></tr>
          <tr data-cat="wonen" data-jaar="2021" data-m2="240"><td class="bk-ix__nr">K-014</td><td class="bk-ix__t"><a href="#">Atelierwoning Katendrecht</a><span>Wonen boven een werkplaats</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">wonen</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2021</td><td class="bk-ix__n bk-ix__m">240</td></tr>
          <tr data-cat="publiek" data-jaar="2020" data-m2="410"><td class="bk-ix__nr">K-011</td><td class="bk-ix__t"><a href="#">Clubhuis roeivereniging</a><span>Botenloods en kantine aan de Kralingse Plas</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">publiek</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2020</td><td class="bk-ix__n bk-ix__m">410</td></tr>
          <tr data-cat="transformatie" data-jaar="2019" data-m2="520" data-img="https://neddev.com/lab-media/site-studio-2.webp"><td class="bk-ix__nr">K-008</td><td class="bk-ix__t"><a href="#">Pakhuis Lekhaven</a><span>Eigen studio in een havenpakhuis</span></td><td class="bk-ix__pl">Rotterdam</td><td class="bk-ix__c">transformatie</td><td class="bk-ix__f"><span class="bk-st">Opgeleverd</span></td><td class="bk-ix__n">2019</td><td class="bk-ix__n bk-ix__m">520</td></tr>
          </tbody>
        </table>
        <div class="bk-ix__pv" aria-hidden="true"><img alt=""></div>
      </div>
    </div>

    <div class="bk-sec bk-sec--feat">
      <div class="bk-h"><span class="bk-h__nr">02</span><h2>Uitgelicht</h2><p>Drie projecten uit het afgelopen jaar.</p></div>
      <div class="bk-feat">
        <article class="bk-f bk-f--a">
          <img src="https://neddev.com/lab-media/site-studio-3.webp" alt="Bibliotheek in een voormalig schoolgebouw met betonnen balken en eikenhouten kasten" loading="lazy">
          <div class="bk-f__t"><span class="bk-f__nr">K-033 · Rotterdam-Zuid · 2025</span><h3>Bibliotheek Afrikaanderwijk</h3>
            <p>Een schoolgebouw uit 1931 stond acht jaar leeg. We haalden de tussenwanden op de verdieping weg, lieten het betonskelet zien en gaven de leeszaal één lange tafel van 14 meter. De oude speelplaats is nu een tuin die 's avonds open blijft.</p>
            <dl><div><dt>Opdrachtgever</dt><dd>Gemeente Rotterdam</dd></div><div><dt>Oppervlak</dt><dd>1.180 m² bvo</dd></div><div><dt>Bouwkosten</dt><dd>€ 2,9 mln excl. btw</dd></div></dl>
          </div>
        </article>
        <article class="bk-f bk-f--b">
          <img src="https://neddev.com/lab-media/site-studio-4.webp" alt="Houten paviljoen met lariks gevelbekleding aan een vijver in een stadspark" loading="lazy">
          <div class="bk-f__t"><span class="bk-f__nr">K-038 · Blijdorp · in uitvoering</span><h3>Theehuis Vroesenpark</h3><p>Een laag paviljoen van lariks dat met zijn rug naar het pad staat en zich opent naar de vijver. Oplevering voorjaar 2027.</p></div>
        </article>
        <article class="bk-f bk-f--c">
          <div class="bk-f__t"><span class="bk-f__nr">K-024 · Schiedam · 2024</span><h3>Huis aan de Singel</h3><p>Een smal woonhuis tussen twee negentiende-eeuwse buren. De gevel is van groen geglazuurde steen, die bij regen donkerder wordt en bij zon het licht van het water terugkaatst. De voordeur is van massief eiken, gemaakt door een meubelmaker uit Delft.</p>
            <dl><div><dt>Opdrachtgever</dt><dd>Particulier</dd></div><div><dt>Oppervlak</dt><dd>186 m² bvo</dd></div></dl></div>
          <img src="https://neddev.com/lab-media/site-studio-5.webp" alt="Gevel van groen geglazuurde baksteen met een eikenhouten voordeur" loading="lazy">
        </article>
      </div>
    </div>

    <div class="bk-sec" id="bk-werk">
      <div class="bk-h"><span class="bk-h__nr">03</span><h2>Werkwijze</h2><p>We werken in de fasen van de DNR 2011. Per fase weet u vooraf wat u krijgt, wat het kost en welke beslissing u aan het eind neemt. Hieronder de doorlooptijden van een gemiddelde school.</p></div>
      <ol class="bk-ph">
        <li style="--w:6"><span class="bk-ph__d">6 wk</span><b>SO</b><h3>Schetsontwerp</h3><p>Drie varianten op de kavel, met massa, daglicht en een eerste kostenraming.</p><em>U kiest één richting</em></li>
        <li style="--w:8"><span class="bk-ph__d">8 wk</span><b>VO</b><h3>Voorlopig ontwerp</h3><p>Plattegronden en gevels op 1:200, materialen, installatieconcept.</p><em>Basis voor omgevingsvergunning</em></li>
        <li style="--w:10"><span class="bk-ph__d">10 wk</span><b>DO</b><h3>Definitief ontwerp</h3><p>Alles op 1:100, constructie en installaties afgestemd, raming element-gewijs.</p><em>Vergunning aanvragen</em></li>
        <li style="--w:12"><span class="bk-ph__d">12 wk</span><b>TO</b><h3>Technisch ontwerp</h3><p>Details op 1:5, bestek en tekeningen voor de aanbesteding.</p><em>Aannemer selecteren</em></li>
        <li style="--w:16" class="bk-ph__u"><span class="bk-ph__d">40 tot 60 wk</span><b>UO</b><h3>Uitvoering</h3><p>Esthetische directie: elke week op de bouw, monsters keuren, details bewaken.</p><em>Oplevering en sleutel</em></li>
      </ol>
    </div>

    <div class="bk-sec bk-sec--studio" id="bk-studio">
      <div class="bk-h"><span class="bk-h__nr">04</span><h2>Studio</h2><p>Zes mensen aan twee lange tafels, met uitzicht op de kranen van de Waalhaven.</p></div>
      <div class="bk-team">
        <figure><img src="https://neddev.com/lab-media/site-studio-2.webp" alt="Werktafel met maquettes van karton en hout in een studio aan de haven" loading="lazy"><figcaption>Maquettes voor de Brede school De Esch, schaal 1:200.</figcaption></figure>
        <ul class="bk-ppl">
          <li><b>Femke Oudshoorn</b><span>Architect, oprichter</span><span>sinds 2014</span></li>
          <li><b>Joris Kalkman</b><span>Architect, oprichter</span><span>sinds 2014</span></li>
          <li><b>Nadia El Idrissi</b><span>Projectarchitect</span><span>sinds 2018</span></li>
          <li><b>Bram Verhoeven</b><span>Bouwkundig ontwerper</span><span>sinds 2020</span></li>
          <li><b>Lieke Tan</b><span>Ontwerper</span><span>sinds 2023</span></li>
          <li><b>Thijs Molenaar</b><span>Werkplaats en maquettes</span><span>sinds 2024</span></li>
          <li class="bk-ppl__vac"><b>Wij zoeken</b><span>Projectarchitect, 32 tot 40 uur</span><a href="#">Bekijk vacature</a></li>
        </ul>
      </div>
    </div>

    <div class="bk-sec" id="bk-pub">
      <div class="bk-h"><span class="bk-h__nr">05</span><h2>Publicaties en lezingen</h2><p>Wat er over ons werk is geschreven, en waar we zelf hebben gesproken.</p></div>
      <ul class="bk-pub">
        <li><time datetime="2026-09-24">24.09.2026</time><span class="bk-pub__m">de Architect</span><a href="#">Een bibliotheek die naar de straat kijkt</a><span class="bk-pub__k">Artikel</span></li>
        <li><time datetime="2026-09-09">09.09.2026</time><span class="bk-pub__m">Architectenweb</span><a href="#">Theehuis Vroesenpark in aanbouw</a><span class="bk-pub__k">Nieuws</span></li>
        <li><time datetime="2026-07-02">02.07.2026</time><span class="bk-pub__m">AD Rotterdams Dagblad</span><a href="#">Oude school op Zuid krijgt tweede leven als bieb</a><span class="bk-pub__k">Krant</span></li>
        <li><time datetime="2026-05-14">14.05.2026</time><span class="bk-pub__m">Academie van Bouwkunst</span><a href="#">Femke Oudshoorn: het detail als houding</a><span class="bk-pub__k">Lezing</span></li>
        <li><time datetime="2026-03-21">21.03.2026</time><span class="bk-pub__m">Bouwen met Staal</span><a href="#">Stalen kozijnen in een gemetselde gevel, Hillesluis</a><span class="bk-pub__k">Vakblad</span></li>
        <li><time datetime="2025-11-30">30.11.2025</time><span class="bk-pub__m">Dag van de Architectuur</span><a href="#">Rondleiding Woningblok Hillesluis voor buurtbewoners</a><span class="bk-pub__k">Rondleiding</span></li>
      </ul>
    </div>

    <div class="bk-sec bk-cta" id="bk-contact">
      <h2>Een opdracht bespreken?</h2>
      <div class="bk-cta__g">
        <p>Het eerste gesprek is kosteloos, op locatie of bij ons aan de Lekhaven. Neem een kadasterkaart of een paar foto's mee; meer hoeft niet.</p>
        <div><span>Woningbouw en particulieren</span><b>Femke Oudshoorn</b><a href="#">010 123 4567</a></div>
        <div><span>Onderwijs en publiek</span><b>Joris Kalkman</b><a href="#">010 123 4568</a></div>
      </div>
    </div>

    <div class="bk-foot" role="contentinfo">
      <div class="bk-foot__nav"><a href="#bk-index">Projecten</a><a href="#bk-werk">Werkwijze</a><a href="#bk-studio">Studio</a><a href="#bk-pub">Publicaties</a><a href="#bk-contact">Contact</a><a href="#">Instagram</a><a href="#">LinkedIn</a><a href="#">Privacy</a></div>
      <div class="bk-stamp">
        <div class="bk-stamp__b"><span>Bureau</span><b>Bureau Kiel architecten bv</b></div>
        <div><span>Adres</span>Lekhaven 14, 3011 GB Rotterdam</div>
        <div><span>KvK</span>61234567</div>
        <div><span>BTW</span>NL853412345B01</div>
        <div><span>Register</span>Architectenregister 1.140612 · lid BNA</div>
        <div><span>Blad</span>A-000</div>
        <div><span>Datum</span>07.10.2026</div>
        <div><span>Schaal</span>1:1</div>
      </div>
    </div>
  </div>
</div></div>
</div>

/* Bureau Kiel · architectenbureau, Rotterdam · NedDev · eigen werk. */
/* fonts (Fontshare): supreme@300,400,500,700 + sentient@400,500 */
.bk-site{--pap:#ecebe6;--pap2:#f6f5f1;--ink:#1b1b19;--mute:#6b6a64;--line:#c9c6bc;--red:#b4432a;
  container-type:inline-size;background:var(--pap);color:var(--ink);font:400 15.5px/1.6 'Supreme',sans-serif;-webkit-font-smoothing:antialiased}
.bk-site *{box-sizing:border-box}
.bk-frame{display:grid;grid-template-columns:236px minmax(0,1fr)}
.bk-site a{color:inherit;text-decoration:none}
.bk-site img{display:block;max-width:100%}
.bk-site h1,.bk-site h2,.bk-site h3{margin:0;font-weight:400}
.bk-side{border-right:1px solid var(--ink);background:var(--pap)}
.bk-side__in{position:sticky;top:0;height:min(100vh,820px);display:flex;flex-direction:column;padding:28px 24px}
.bk-mark{display:block;margin-bottom:44px}
.bk-mark b{display:block;font:700 46px/.9 'Supreme',sans-serif;letter-spacing:-.04em}
.bk-mark span{display:block;font-size:13px;letter-spacing:.02em;margin-top:6px;color:var(--mute)}
.bk-tog{display:none}
.bk-nav{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.bk-nav a{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;transition:color .15s,padding .2s}
.bk-nav a:hover{color:var(--red);padding-left:4px}
.bk-nav i{font:400 11px 'Supreme',sans-serif;color:var(--mute);font-style:normal;font-variant-numeric:tabular-nums;width:16px}
.bk-nav em{font-style:normal;font-size:11px;background:var(--red);color:#fff;border-radius:9px;padding:0 6px;margin-left:auto}
.bk-side__meta{margin-top:auto;font-size:13px;color:var(--mute);line-height:1.55}
.bk-side__meta p{margin:0 0 12px}
.bk-side__meta a:hover{color:var(--red)}
.bk-side__now{display:grid;grid-template-columns:1fr 1fr;margin:8px 0 0;border-top:1px solid var(--ink)}
.bk-side__now div{padding-top:8px}
.bk-side__now dt{font-size:11px}
.bk-side__now dd{margin:0;font:500 26px/1.1 'Supreme',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}

.bk-main{min-width:0}
.bk-top{display:flex;justify-content:space-between;gap:20px;padding:10px 48px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.bk-top__r{display:flex;gap:24px}
.bk-top__r>a{color:var(--red)}
.bk-top__r>a:hover{text-decoration:underline}
.bk-lang b{color:var(--ink);font-weight:500}

.bk-intro{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:48px;padding:64px 48px 44px;align-items:end}
.bk-intro h1{font:400 40px/1.16 'Sentient',serif;letter-spacing:-.015em;max-width:24ch}
.bk-intro__side p{margin:0 0 18px;font-size:15px;color:#3d3c38}
.bk-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:3px}
.bk-arrow::after{content:"";width:22px;height:1px;background:currentColor;box-shadow:inset 0 0 0 1px currentColor;transition:width .2s}
.bk-arrow:hover{color:var(--red);border-color:var(--red)}
.bk-arrow:hover::after{width:34px}

.bk-hero{margin:0 48px;position:relative}
.bk-axes{display:flex;justify-content:space-between;padding:0 0 10px;position:relative}
.bk-axes span{width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:11.5px;position:relative;background:var(--pap)}
.bk-axes span::after{content:"";position:absolute;top:100%;left:50%;width:0;height:10px;border-left:1px dashed var(--ink)}
.bk-hero__img{position:relative}
.bk-hero__img img{width:100%;height:440px;object-fit:cover;filter:saturate(.82) contrast(1.02)}
.bk-dim{position:relative;height:24px;margin-top:8px;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.bk-dim::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--ink)}
.bk-dim span{position:absolute;left:50%;top:0;transform:translateX(-50%);background:var(--pap);padding:0 10px;font-size:12px;font-variant-numeric:tabular-nums;line-height:22px}
.bk-hero figcaption{font-size:13px;color:var(--mute);margin-top:8px;max-width:70ch}
.bk-hero figcaption b,.bk-f__nr{font-weight:500;color:var(--red);font-variant-numeric:tabular-nums}

.bk-sec{padding:84px 48px 0}
.bk-h{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:baseline;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:32px}
.bk-h__nr{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.bk-h h2{font:400 32px/1.1 'Sentient',serif;letter-spacing:-.01em}
.bk-h p{margin:0;font-size:14.5px;color:var(--mute);max-width:56ch}

.bk-fil{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.bk-fil button{font:400 14px 'Supreme',sans-serif;color:var(--ink);background:none;border:1px solid var(--line);border-radius:20px;padding:6px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.bk-fil button:hover{border-color:var(--ink)}
.bk-fil button.is-on{background:var(--ink);border-color:var(--ink);color:var(--pap)}
.bk-fil sup{font-size:10px;margin-left:2px;font-variant-numeric:tabular-nums}
.bk-ix{position:relative}
.bk-ix table{width:100%;border-collapse:collapse;font-size:14.5px}
.bk-ix th{text-align:left;font-weight:400;font-size:12px;color:var(--mute);padding:8px 12px 8px 0;border-bottom:1px solid var(--ink)}
.bk-ix th button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.bk-ix th button::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;border:4px solid transparent;border-top-color:var(--line);vertical-align:-1px}
.bk-ix th button[aria-sort=descending]::after{border-top-color:var(--ink)}
.bk-ix th button[aria-sort=ascending]::after{border-top-color:transparent;border-bottom-color:var(--ink);vertical-align:3px}
.bk-ix td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.bk-ix tbody tr{transition:background .12s}
.bk-ix tbody tr:hover{background:var(--pap2)}
.bk-ix tbody tr:hover .bk-ix__t a{color:var(--red)}
.bk-ix__nr{font-variant-numeric:tabular-nums;color:var(--mute);width:72px;white-space:nowrap}
.bk-ix__t a{font-weight:500;display:block}
.bk-ix__t span{display:block;font-size:13px;color:var(--mute)}
.bk-ix__c{text-transform:capitalize}
.bk-ix__n{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap;width:80px}
.bk-ix td.bk-ix__n:last-child,.bk-ix th:last-child{padding-right:0}
.bk-st{font-size:12.5px;white-space:nowrap}
.bk-st--on{color:var(--red)}
.bk-st--on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:1px}
.bk-ix tr.is-hid{display:none}
.bk-ix__pv{position:absolute;right:190px;top:0;width:260px;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;z-index:2}
.bk-ix__pv img{width:100%;height:180px;object-fit:cover;box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.bk-ix__pv.is-on{opacity:1;transform:none}

.bk-feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 28px}
.bk-f img{width:100%;object-fit:cover;filter:saturate(.82)}
.bk-f h3{font:400 26px/1.15 'Sentient',serif;margin:6px 0 10px}
.bk-f p{margin:0 0 16px;font-size:15px;color:#3d3c38}
.bk-f__nr{font-size:12.5px}
.bk-f dl{display:flex;flex-wrap:wrap;gap:0;margin:0;border-top:1px solid var(--line)}
.bk-f dl div{padding:8px 24px 0 0}
.bk-f dt{font-size:11.5px;color:var(--mute)}
.bk-f dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums}
.bk-f--a{grid-column:1/9}
.bk-f--a img{height:420px}
.bk-f--a .bk-f__t{display:grid;grid-template-columns:1fr 1.3fr;gap:8px 28px;padding-top:16px}
.bk-f--a .bk-f__nr,.bk-f--a h3{grid-column:1}
.bk-f--a p{grid-column:2;grid-row:1/3}
.bk-f--a dl{grid-column:1/-1}
.bk-f--b{grid-column:9/13;margin-top:80px}
.bk-f--b img{height:420px}
.bk-f--b .bk-f__t{padding-top:16px}
.bk-f--c{grid-column:3/13;display:grid;grid-template-columns:1fr 1.25fr;gap:28px;align-items:end}
.bk-f--c img{height:340px}
.bk-f a:hover{color:var(--red)}

.bk-ph{list-style:none;margin:0;padding:0;display:flex;border-left:1px solid var(--ink)}
.bk-ph li{flex:var(--w) 1 0;min-width:150px;position:relative;padding:44px 16px 0 12px;border-right:1px solid var(--ink);transition:background .15s}
.bk-ph li:hover{background:var(--pap2)}
.bk-ph li::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--ink)}
.bk-ph li::after{content:"";position:absolute;right:-4px;top:18px;width:8px;height:8px;border-top:1px solid var(--ink);transform:rotate(-45deg)}
.bk-ph__d{position:absolute;top:0;left:12px;font-size:12px;font-variant-numeric:tabular-nums;background:var(--pap);padding-right:6px}
.bk-ph__u::before{background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 15px)!important}
.bk-ph b{display:block;font:500 12px 'Supreme',sans-serif;color:var(--red);letter-spacing:.06em}
.bk-ph h3{font:400 20px/1.2 'Sentient',serif;margin:2px 0 8px}
.bk-ph p{margin:0 0 14px;font-size:13.5px;color:#3d3c38}
.bk-ph em{display:block;font-style:normal;font-size:12.5px;padding:8px 0 14px;border-top:1px solid var(--line)}

.bk-team{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}
.bk-team figure{margin:0}
.bk-team img{width:100%;height:400px;object-fit:cover;filter:saturate(.82)}
.bk-team figcaption{font-size:13px;color:var(--mute);margin-top:8px}
.bk-ppl{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.bk-ppl li{display:grid;grid-template-columns:1.2fr 1.3fr auto;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;align-items:baseline}
.bk-ppl b{font-weight:500}
.bk-ppl span{color:var(--mute)}
.bk-ppl span:last-child{font-size:12.5px;font-variant-numeric:tabular-nums}
.bk-ppl__vac b{color:var(--red)}
.bk-ppl__vac a{font-size:13px;border-bottom:1px solid currentColor}
.bk-ppl__vac a:hover{color:var(--red)}

.bk-pub{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.bk-pub li{display:grid;grid-template-columns:110px 200px minmax(0,1fr) 100px;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;font-size:15px}
.bk-pub time{font-variant-numeric:tabular-nums;color:var(--mute);font-size:13.5px}
.bk-pub__m{font-size:13.5px}
.bk-pub a{font-family:'Sentient',serif;font-size:18px;line-height:1.3}
.bk-pub a:hover{color:var(--red);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bk-pub__k{text-align:right;font-size:12px;color:var(--mute)}

.bk-cta{padding-bottom:84px}
.bk-cta h2{font:400 56px/1.05 'Sentient',serif;letter-spacing:-.02em;border-top:1px solid var(--ink);padding-top:28px;margin-bottom:28px}
.bk-cta__g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start}
.bk-cta__g p{margin:0;font-size:15.5px;color:#3d3c38;max-width:44ch}
.bk-cta__g div{border-left:1px solid var(--line);padding-left:20px;display:flex;flex-direction:column;gap:2px}
.bk-cta__g span{font-size:12px;color:var(--mute)}
.bk-cta__g b{font-weight:500;font-size:16px}
.bk-cta__g a{font:400 24px/1.2 'Sentient',serif;font-variant-numeric:tabular-nums;color:var(--red)}
.bk-cta__g a:hover{text-decoration:underline;text-underline-offset:4px}

.bk-foot{padding:0 48px 32px}
.bk-foot__nav{display:flex;flex-wrap:wrap;gap:6px 22px;padding:16px 0;border-top:1px solid var(--ink);font-size:14px}
.bk-foot__nav a:hover{color:var(--red)}
.bk-stamp{display:grid;grid-template-columns:2fr 2fr 1fr 1.3fr 2fr 1fr 1fr 1fr;border:1px solid var(--ink);font-size:12.5px;font-variant-numeric:tabular-nums}
.bk-stamp div{padding:8px 10px;border-right:1px solid var(--ink);line-height:1.35}
.bk-stamp div:last-child{border-right:0}
.bk-stamp span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.bk-stamp b{font-weight:500}

@container (max-width:1100px){
  .bk-frame{grid-template-columns:200px minmax(0,1fr)}
  .bk-intro{grid-template-columns:1fr;gap:20px}
  .bk-ix__c{display:none}
  .bk-ix__pv{display:none}
  .bk-stamp{grid-template-columns:repeat(4,1fr)}
  .bk-stamp div:nth-child(4n){border-right:0}
  .bk-stamp div:nth-child(-n+4){border-bottom:1px solid var(--ink)}
}
@container (max-width:760px){
  .bk-frame{grid-template-columns:1fr}
  .bk-side{border-right:0;border-bottom:1px solid var(--ink);position:sticky;top:0;z-index:5}
  .bk-side__in{position:static;height:auto;padding:14px 20px;display:grid;grid-template-columns:1fr auto;align-items:center}
  .bk-mark{margin:0;display:flex;align-items:baseline;gap:8px}
  .bk-mark b{font-size:30px}
  .bk-mark span{margin:0}
  .bk-tog{display:block;font:500 14px 'Supreme',sans-serif;background:none;border:1px solid var(--ink);border-radius:20px;padding:7px 16px;color:var(--ink);cursor:pointer}
  .bk-tog[aria-expanded=true]{background:var(--ink);color:var(--pap)}
  .bk-nav{display:none;grid-column:1/-1;margin-top:14px}
  .bk-nav.is-open{display:block}
  .bk-side__meta{display:none}
  .bk-top{padding:8px 20px;flex-direction:column;gap:2px}
  .bk-top>span:first-child{display:none}
  .bk-top__r{justify-content:space-between}
  .bk-intro{padding:36px 20px 28px}
  .bk-intro h1{font-size:28px}
  .bk-hero{margin:0 20px}
  .bk-hero__img img{height:260px}
  .bk-axes span{width:22px;height:22px;font-size:10px}
  .bk-sec{padding:56px 20px 0}
  .bk-h{grid-template-columns:1fr;gap:6px}
  .bk-h h2{font-size:27px}
  .bk-ix__pl,.bk-ix__f,.bk-ix__m{display:none}
  .bk-ix__nr{width:58px;font-size:12.5px}
  .bk-ix td{padding-right:8px}
  .bk-feat{display:flex;flex-direction:column;gap:40px}
  .bk-f--a .bk-f__t,.bk-f--c{display:block}
  .bk-f--a img,.bk-f--b img,.bk-f--c img{height:240px}
  .bk-f--b{margin-top:0}
  .bk-f--c img{margin-top:16px}
  .bk-ph{flex-direction:column;border-left:0}
  .bk-ph li{flex:none;min-width:0;border-right:0;border-left:1px solid var(--ink);padding:30px 0 0 16px}
  .bk-ph li::before{top:14px;left:0;right:auto;width:14px}
  .bk-ph li::after{display:none}
  .bk-ph__d{left:20px;top:4px}
  .bk-team{grid-template-columns:1fr;gap:24px}
  .bk-team img{height:240px}
  .bk-ppl li{grid-template-columns:1fr auto;gap:0 12px}
  .bk-ppl li>span:nth-child(2){grid-row:2;grid-column:1}
  .bk-ppl li>:last-child{grid-row:1/3;grid-column:2;align-self:center}
  .bk-pub li{grid-template-columns:auto 1fr;gap:2px 14px}
  .bk-pub a{grid-column:1/-1;font-size:17px}
  .bk-pub__k{display:none}
  .bk-cta{padding-bottom:56px}
  .bk-cta h2{font-size:34px}
  .bk-cta__g{grid-template-columns:1fr;gap:20px}
  .bk-foot{padding:0 20px 24px}
  .bk-stamp{grid-template-columns:1fr 1fr}
  .bk-stamp div{border-right:0!important;border-bottom:1px solid var(--ink)}
  .bk-stamp div:nth-child(odd){border-right:1px solid var(--ink)!important}
  .bk-stamp div:last-child{grid-column:1/-1;border-bottom:0;border-right:0!important}
  .bk-stamp__b{grid-column:1/-1;border-right:0!important}
}
@media (prefers-reduced-motion:reduce){.bk-ix__pv,.bk-nav a,.bk-arrow::after{transition:none}}

// Bureau Kiel · architectenbureau, Rotterdam · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s = root.querySelector('.bk-site'); if (!s) return;
var tog = s.querySelector('.bk-tog'), nav = s.querySelector('.bk-nav');
tog.addEventListener('click', function(){ var o = nav.classList.toggle('is-open'); tog.setAttribute('aria-expanded', String(o)); tog.textContent = o ? 'Sluiten' : 'Menu'; });
nav.addEventListener('click', function(e){ if (e.target.closest('a')) { nav.classList.remove('is-open'); tog.setAttribute('aria-expanded','false'); tog.textContent = 'Menu'; } });
var tbody = s.querySelector('.bk-ix tbody'), rows = Array.prototype.slice.call(tbody.rows);
s.querySelectorAll('.bk-fil button').forEach(function(b){
  b.addEventListener('click', function(){
    s.querySelectorAll('.bk-fil button').forEach(function(x){ x.classList.toggle('is-on', x === b); });
    rows.forEach(function(r){ r.classList.toggle('is-hid', b.dataset.f !== 'alle' && r.dataset.cat !== b.dataset.f); });
  });
});
s.querySelectorAll('.bk-ix th button').forEach(function(b){
  b.addEventListener('click', function(){
    var key = b.dataset.s, dir = b.getAttribute('aria-sort') === 'descending' ? 'ascending' : 'descending';
    s.querySelectorAll('.bk-ix th button').forEach(function(x){ x.removeAttribute('aria-sort'); });
    b.setAttribute('aria-sort', dir);
    rows.sort(function(a, c){ var d = (+a.dataset[key]) - (+c.dataset[key]); if (!d) d = a.cells[0].textContent < c.cells[0].textContent ? -1 : 1; return dir === 'ascending' ? d : -d; });
    rows.forEach(function(r){ tbody.appendChild(r); });
  });
});
var pv = s.querySelector('.bk-ix__pv'), pimg = pv.querySelector('img'), wrap = s.querySelector('.bk-ix');
rows.forEach(function(r){
  r.addEventListener('mouseenter', function(){
    if (!r.dataset.img) { pv.classList.remove('is-on'); return; }
    pimg.src = r.dataset.img;
    var top = r.offsetTop + r.offsetHeight / 2 - 90;
    pv.style.top = Math.max(0, Math.min(top, wrap.offsetHeight - 180)) + 'px';
    pv.classList.add('is-on');
  });
});
wrap.addEventListener('mouseleave', function(){ pv.classList.remove('is-on'); });
}
init(document.querySelector('.jouw-container'));

Meer uit complete websites

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →