<!-- Studio Mareen · huidverbetering en beauty, Rotterdam · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="smk">
<div class="smk__top"><div class="smk__in smk__top-in">
  <p class="smk__top-txt smk__vandaag">Vandaag geopend van 9:00 tot 18:00</p>
  <p class="smk__top-txt smk__top-r"><a href="#">010 123 4567</a><span>Oudedijk 112, Rotterdam-Kralingen</span></p>
</div></div>

<div class="smk__head" role="banner"><div class="smk__in smk__head-in">
  <a href="#" class="smk__logo" aria-label="Studio Mareen, naar home">Studio Mareen</a>
  <nav class="smk__nav" aria-label="Hoofdmenu">
    <a href="#smk-behandelingen">Behandelingen</a><a href="#smk-eerste">Eerste afspraak</a><a href="#smk-team">Team</a><a href="#smk-salon">De salon</a><a href="#smk-cadeau">Cadeaubon</a><a href="#smk-contact">Contact</a>
  </nav>
  <a href="#smk-boek" class="smk__btn smk__btn--head">Afspraak maken</a>
  <button class="smk__menu-knop" type="button" aria-expanded="false" aria-controls="smk-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="smk__menu" id="smk-menu" hidden>
  <a href="#smk-behandelingen">Behandelingen</a><a href="#smk-eerste">Eerste afspraak</a><a href="#smk-team">Team</a><a href="#smk-salon">De salon</a><a href="#smk-cadeau">Cadeaubon</a><a href="#smk-contact">Contact</a>
  <a href="#smk-boek" class="smk__btn">Afspraak maken</a>
</div>
</div>

<div class="smk__hero"><div class="smk__in smk__hero-in">
  <div class="smk__hero-txt">
    <h1 class="smk__h1">Rustige huid, eerlijk advies</h1>
    <p class="smk__lead">Huidverbetering en schoonheidsbehandelingen in Kralingen. We beginnen met kijken en vragen; pas daarna kiezen we wat je huid nodig heeft.</p>
    <img class="smk__hero-foto" src="https://neddev.com/lab-media/site-schoonheidssalon-3.webp" alt="Serum wordt met een pipet op de wang van een klant aangebracht" width="900" height="491">
  </div>
  <div class="smk__boek" id="smk-boek">
    <h2 class="smk__boek-kop">Kies een vrije plek</h2>
    <div class="smk__beh" role="radiogroup" aria-label="Behandeling">
      <button type="button" role="radio" aria-checked="true" data-duur="30" data-naam="Huidanalyse"><span>Huidanalyse</span><span class="smk__beh-info">30 min, 45 euro</span></button>
      <button type="button" role="radio" aria-checked="false" data-duur="60" data-naam="Gezichtsbehandeling"><span>Gezichtsbehandeling</span><span class="smk__beh-info">60 min, 79 euro</span></button>
      <button type="button" role="radio" aria-checked="false" data-duur="45" data-naam="Chemische peeling"><span>Chemische peeling</span><span class="smk__beh-info">45 min, 95 euro</span></button>
      <button type="button" role="radio" aria-checked="false" data-duur="75" data-naam="Microneedling"><span>Microneedling</span><span class="smk__beh-info">75 min, 165 euro</span></button>
      <button type="button" role="radio" aria-checked="false" data-duur="30" data-naam="Wenkbrauwen"><span>Wenkbrauwen</span><span class="smk__beh-info">30 min, 29 euro</span></button>
    </div>
    <div class="smk__dagen" role="radiogroup" aria-label="Dag"></div>
    <div class="smk__tijden" role="radiogroup" aria-label="Tijd"></div>
    <form class="smk__gegevens" novalidate hidden>
      <label>Naam<input type="text" name="naam" autocomplete="name" required></label>
      <label>Telefoon<input type="tel" name="tel" autocomplete="tel" required></label>
    </form>
    <button type="button" class="smk__btn smk__boek-knop">Boek</button>
    <p class="smk__boek-uit" aria-live="polite"></p>
  </div>
</div></div>

<div class="smk__beh-lijst" id="smk-behandelingen"><div class="smk__in">
  <div class="smk__kop2">
    <h2 class="smk__h2">Behandelingen</h2>
    <p class="smk__p">Elke behandeling begint met vijf minuten kijken. Past iets niet bij je huid, dan zeggen we dat, ook als het minder oplevert.</p>
  </div>
  <ul class="smk__rijen">
    <li><img src="https://neddev.com/lab-media/site-schoonheidssalon-2.webp" alt="Huidanalyse onder een verlichte loeplamp" width="900" height="491" loading="lazy"><div><h3>Huidanalyse</h3><p>Met loeplamp en een vragenlijst brengen we je huid in kaart. Je gaat naar huis met een plan op papier, ook als je daarna niets bij ons boekt.</p></div><p class="smk__rij-prijs">30 min<br>45 euro</p></li>
    <li><img src="https://neddev.com/lab-media/site-schoonheidssalon-14.webp" alt="Reiniging van het gezicht met zachte wattenschijfjes" width="900" height="491" loading="lazy"><div><h3>Gezichtsbehandeling</h3><p>Reinigen, dieptereiniging, masker en massage, afgestemd op wat de analyse liet zien.</p></div><p class="smk__rij-prijs">60 min<br>79 euro</p></li>
    <li><img src="https://neddev.com/lab-media/site-schoonheidssalon-11.webp" alt="Een peeling wordt met een platte kwast aangebracht" width="900" height="491" loading="lazy"><div><h3>Chemische peeling</h3><p>Fruitzuur of melkzuur in oplopende sterkte, tegen pigmentvlekken, acne en een doffe huid. Meestal als kuur van vier.</p></div><p class="smk__rij-prijs">45 min<br>95 euro, kuur 340 euro</p></li>
    <li><img src="https://neddev.com/lab-media/site-schoonheidssalon-4.webp" alt="Microneedlingpen en flesjes op een behandelblad" width="900" height="491" loading="lazy"><div><h3>Microneedling</h3><p>Een pen met fijne naaldjes maakt kleine kanaaltjes in de huid. Dat zet herstel in gang en helpt bij littekens en grove poriën. Niet bij actieve acne.</p></div><p class="smk__rij-prijs">75 min<br>165 euro</p></li>
    <li><img src="https://neddev.com/lab-media/site-schoonheidssalon-5.webp" alt="Wenkbrauwen worden met een pincet in vorm gebracht" width="900" height="491" loading="lazy"><div><h3>Wenkbrauwen en wimpers</h3><p>Epileren of harsen, verven en liften. Ook als losse afspraak in de lunchpauze.</p></div><p class="smk__rij-prijs">30 min<br>vanaf 29 euro</p></li>
  </ul>
</div></div>

<div class="smk__eerste" id="smk-eerste"><div class="smk__in smk__eerste-in">
  <img class="smk__eerste-a" src="https://neddev.com/lab-media/site-schoonheidssalon-1.webp" alt="Een klant krijgt een gezichtsbehandeling in een lichte behandelkamer" width="1408" height="768" loading="lazy">
  <div class="smk__eerste-txt">
    <h2 class="smk__h2">Eerst kijken, dan behandelen</h2>
    <p class="smk__p">Je eerste afspraak is altijd een huidanalyse. We vragen wat je gebruikt, wat je eet, hoe je slaapt en wat je al geprobeerd hebt. Daarna kijken we onder de lamp.</p>
    <p class="smk__p">Je krijgt een advies mee met hooguit drie producten. Vaak is het minder: de helft van onze klanten gebruikt na de analyse minder dan ervoor. Boek je daarna een kuur, dan trekken we de 45 euro ervan af.</p>
  </div>
  <img class="smk__eerste-b" src="https://neddev.com/lab-media/site-schoonheidssalon-12.webp" alt="Een vrouw in een witte badjas drinkt thee na haar behandeling" width="900" height="491" loading="lazy">
</div></div>

<div class="smk__team" id="smk-team"><div class="smk__in smk__team-in">
  <h2 class="smk__h2">Wie je behandelt</h2>
  <figure class="smk__mens smk__mens--a"><img src="https://neddev.com/lab-media/site-schoonheidssalon-9.webp" alt="Mareen Kok in de behandelkamer" width="768" height="1376" loading="lazy"><figcaption><strong>Mareen Kok</strong> Eigenaar en schoonheidsspecialist sinds 2009. Gespecialiseerd in acne, rosacea en pigment. Werkt dinsdag tot en met vrijdag.</figcaption></figure>
  <figure class="smk__mens smk__mens--b"><img src="https://neddev.com/lab-media/site-schoonheidssalon-10b.webp" alt="Noor Bakker lacht in de salon" width="768" height="1376" loading="lazy"><figcaption><strong>Noor Bakker</strong> Schoonheidsspecialist. Doet wenkbrauwen, wimpers en de gezichtsbehandelingen op donderdagavond en zaterdag.</figcaption></figure>
</div></div>

<div class="smk__salon" id="smk-salon"><div class="smk__in smk__salon-in">
  <div class="smk__salon-txt">
    <h2 class="smk__h2">Aan de Oudedijk</h2>
    <p class="smk__p">Een benedenhuis uit 1905 met hoge ramen. Twee behandelkamers, een kleine wachtruimte en een plank met de producten die we zelf gebruiken. Tram 21 stopt voor de deur; parkeren kan in de straat.</p>
    <p class="smk__p">De ingang is drempelvrij en het toilet zit op de begane grond. Na je behandeling is de Kralingse Plas vijf minuten lopen.</p>
  </div>
  <img class="smk__s1" src="https://neddev.com/lab-media/site-schoonheidssalon-6.webp" alt="De ontvangstruimte met lichtblauwe muur, houten balie en planten" width="900" height="491" loading="lazy">
  <img class="smk__s2" src="https://neddev.com/lab-media/site-schoonheidssalon-7.webp" alt="Het bakstenen hoekpand aan de Oudedijk met fietsen voor de deur" width="900" height="491" loading="lazy">
  <img class="smk__s3" src="https://neddev.com/lab-media/site-schoonheidssalon-8.webp" alt="Flesjes en potjes op een houten plank tegen een blauwe muur" width="900" height="491" loading="lazy">
  <img class="smk__s4" src="https://neddev.com/lab-media/site-schoonheidssalon-13.webp" alt="De Kralingse Plas in de herfst met een molen in de verte" width="900" height="491" loading="lazy">
</div></div>

<div class="smk__stem"><div class="smk__in smk__stem-in">
  <blockquote class="smk__q"><p>Ik had al jaren rode plekken op mijn wangen. Mareen nam de tijd, liet me met twee producten stoppen, en na drie behandelingen is het rustig.</p><footer>Fatima El Idrissi, Rotterdam-Crooswijk</footer></blockquote>
  <blockquote class="smk__q smk__q--klein"><p>Ze raadde me microneedling af en een peeling aan. Scheelde geld, en het werkt.</p><footer>Joyce van Dam, Capelle aan den IJssel</footer></blockquote>
</div></div>

<div class="smk__cadeau" id="smk-cadeau"><div class="smk__in smk__cadeau-in">
  <h2 class="smk__h2">Cadeaubon</h2>
  <p class="smk__p">Vanaf 25 euro, digitaal per mail of op papier in de salon. Een jaar geldig, voor elke behandeling en voor producten.</p>
  <a href="#" class="smk__btn smk__btn--licht">Bestel een cadeaubon</a>
</div></div>

<div class="smk__contact" id="smk-contact"><div class="smk__in smk__contact-in">
  <div>
    <h2 class="smk__h2">Langskomen</h2>
    <p class="smk__p">Oudedijk 112, 3061 AN Rotterdam. Bel <a href="#">010 123 4567</a> of mail <a href="mailto:hallo@voorbeeld.nl">hallo@voorbeeld.nl</a>. We bellen dezelfde dag terug.</p>
    <ul class="smk__uren" aria-label="Openingstijden">
      <li data-dag="1"><span>Maandag</span><span>Gesloten</span></li>
      <li data-dag="2"><span>Dinsdag</span><span>9:00 tot 18:00</span></li>
      <li data-dag="3"><span>Woensdag</span><span>9:00 tot 18:00</span></li>
      <li data-dag="4"><span>Donderdag</span><span>9:00 tot 21:00</span></li>
      <li data-dag="5"><span>Vrijdag</span><span>9:00 tot 18:00</span></li>
      <li data-dag="6"><span>Zaterdag</span><span>9:00 tot 16:00</span></li>
      <li data-dag="0"><span>Zondag</span><span>Gesloten</span></li>
    </ul>
  </div>
  <div class="smk__faq">
    <h2 class="smk__h3">Goed om te weten</h2>
    <details><summary>Moet ik iets voorbereiden?</summary><p>Kom zonder make-up als het kan. Gebruik je retinol of zuren, stop daar drie dagen voor een peeling mee.</p></details>
    <details><summary>Wat als ik moet afzeggen?</summary><p>Kosteloos tot 24 uur van tevoren. Later rekenen we de helft van de behandeling.</p></details>
    <details><summary>Wordt het vergoed?</summary><p>Niet uit de basisverzekering. Sommige aanvullende pakketten vergoeden acnebehandeling; je krijgt van ons een nota met behandelcode.</p></details>
    <details><summary>Behandelen jullie ook mannen?</summary><p>Ja. Ongeveer een op de vijf klanten is man.</p></details>
  </div>
</div></div>

<div class="smk__voet" role="contentinfo"><div class="smk__in">
  <div class="smk__voet-kol">
    <div><p class="smk__voet-logo">Studio Mareen</p><p>Oudedijk 112<br>3061 AN Rotterdam<br><a href="#">010 123 4567</a><br><a href="mailto:hallo@voorbeeld.nl">hallo@voorbeeld.nl</a></p></div>
    <div><p class="smk__voet-kop">Behandelingen</p><a href="#">Huidanalyse</a><a href="#">Gezicht</a><a href="#">Peelings</a><a href="#">Microneedling</a><a href="#">Wenkbrauwen</a></div>
    <div><p class="smk__voet-kop">Salon</p><a href="#">Team</a><a href="#">Prijzen</a><a href="#">Cadeaubon</a><a href="#">Werken bij</a></div>
  </div>
  <p class="smk__voet-regel">Studio Mareen · KvK 68123459 · btw NL003456789B01 · Lid ANBOS · Erkend leerbedrijf SBB · <a href="#">Privacy</a> · <a href="#">Annuleringsvoorwaarden</a></p>
</div></div>
</div>
</div>

/* Studio Mareen · huidverbetering en beauty, Rotterdam · NedDev · eigen werk. */
/* fonts (Fontshare): general-sans@400,600 */
.smk{--bg:#CFE3F5;--opp:#E6F0FA;--tekst:#0B1B2B;--gedempt:#33506A;--lijn:#B3CBE2;--accent:#B0101C;--op-accent:#FFFFFF;--r:8px;--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:'General Sans',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.6;-webkit-font-smoothing:antialiased}
.smk *{box-sizing:border-box}
.smk [hidden]{display:none!important}
.smk a{color:inherit}
.smk img{display:block;max-width:100%;height:auto}
.smk__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,64px)}
.smk__top{background:var(--opp);color:var(--gedempt)}
.smk__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.smk__top-txt{margin:0;font-size:var(--fs1)}
.smk__top-r{display:flex;gap:20px;white-space:nowrap}
.smk__top-r a{text-underline-offset:3px}
.smk__head{position:sticky;top:0;z-index:20}
.smk__head-in{display:flex;align-items:center;gap:36px;height:76px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.smk__logo{font-weight:600;font-size:var(--fs4);text-decoration:none;letter-spacing:-.03em}
.smk__nav{display:flex;gap:26px;margin-left:auto}
.smk__nav a{text-decoration:none;color:var(--gedempt);transition:color .18s}
.smk__nav a:hover{color:var(--accent)}
.smk__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-weight:600;font-size:var(--fs2);padding:14px 24px;border-radius:var(--r);border:0;cursor:pointer;font-family:inherit;transition:background-color .18s}
.smk__btn:hover{background:#8E0C16}
.smk__btn--head{padding:11px 18px}
.smk__menu-knop{display:none;width:44px;height:44px;background:none;border:1px solid var(--gedempt);border-radius:var(--r);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto}
.smk__menu-knop span{display:block;width:18px;height:2px;background:var(--tekst)}
.smk__menu{background:var(--bg);border-bottom:1px solid var(--lijn);padding:8px var(--zij) 20px}
.smk__menu a{display:block;padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}
.smk__menu .smk__btn{text-align:center;margin-top:16px;border-bottom:0}
.smk__hero{padding:48px 0 var(--sectie)}
.smk__hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.smk__h1{font-weight:600;font-size:var(--fs6);line-height:1;letter-spacing:-.035em;margin:0 0 22px;max-width:9em}
.smk__lead{font-size:var(--fs3);color:var(--gedempt);margin:0 0 32px;max-width:30em}
.smk .smk__hero-foto{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:60% 40%;border-radius:var(--r)}
.smk__boek{background:var(--opp);border-radius:var(--r);padding:28px;position:sticky;top:96px}
.smk__boek-kop{font-weight:600;font-size:var(--fs4);letter-spacing:-.02em;margin:0 0 18px}
.smk__beh{display:flex;flex-direction:column;border-top:1px solid var(--lijn)}
.smk__beh [role=radio]{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;background:none;border:0;border-bottom:1px solid var(--lijn);padding:12px 4px 12px 0;font:inherit;color:var(--tekst);cursor:pointer;text-align:left;transition:color .18s}
.smk__beh [role=radio]:hover{color:var(--accent)}
.smk__beh [role=radio][aria-checked=true]{color:var(--accent);font-weight:600}
.smk__beh-info{color:var(--gedempt);font-weight:400;white-space:nowrap;font-size:var(--fs1);padding-top:2px}
.smk__dagen{display:flex;gap:6px;margin:20px 0 12px;overflow-x:auto;scrollbar-width:none}
.smk__dagen::-webkit-scrollbar{display:none}
.smk__dagen [role=radio]{flex:1 0 64px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:8px 6px;font:inherit;font-size:var(--fs1);line-height:1.3;color:var(--tekst);cursor:pointer;transition:border-color .18s}
.smk__dagen [role=radio] b{display:block;font-weight:600;font-size:var(--fs2)}
.smk__dagen [role=radio][aria-checked=true]{border-color:var(--tekst);background:var(--tekst);color:#fff}
.smk__tijden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:44px}
.smk__tijden [role=radio]{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:10px 0;font:inherit;color:var(--tekst);cursor:pointer;transition:border-color .18s}
.smk__tijden [role=radio]:hover,.smk__dagen [role=radio]:hover{border-color:var(--tekst)}
.smk__tijden [role=radio][aria-checked=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.smk__tijden-leeg{grid-column:1/-1;margin:0;color:var(--gedempt);font-size:var(--fs1)}
.smk__gegevens{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:16px}
.smk__gegevens label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs1);color:var(--gedempt)}
.smk__gegevens input{font:inherit;border:1px solid var(--lijn);border-radius:var(--r);padding:10px;min-height:44px;background:#fff;color:var(--tekst)}
.smk__gegevens input:focus,.smk [role=radio]:focus-visible{outline:3px solid #6FA3D3;outline-offset:1px}
.smk__gegevens input[aria-invalid=true]{border-color:var(--accent)}
.smk__boek-knop{width:100%;margin-top:16px}
.smk__boek-uit{margin:12px 0 0;font-size:var(--fs1);color:var(--gedempt);min-height:1.4em}
.smk__h2{font-weight:600;font-size:var(--fs5);line-height:1.05;letter-spacing:-.03em;margin:0 0 18px}
.smk__h3{font-weight:600;font-size:var(--fs4);letter-spacing:-.02em;margin:0 0 14px}
.smk__p{color:var(--gedempt);margin:0 0 16px;max-width:var(--lees)}
.smk__beh-lijst{background:var(--opp);padding:var(--sectie) 0}
.smk__kop2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gat);align-items:end;margin-bottom:28px}
.smk__kop2 .smk__h2,.smk__kop2 .smk__p{margin:0}
.smk__rijen{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.smk__rijen li{display:grid;grid-template-columns:280px minmax(0,1fr) 180px;gap:var(--gat);align-items:center;padding:16px 0;border-bottom:1px solid var(--lijn)}
.smk .smk__rijen img{width:280px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.smk__rijen h3{font-weight:600;font-size:var(--fs4);letter-spacing:-.02em;margin:0 0 6px}
.smk__rijen li p{margin:0;color:var(--gedempt);max-width:44em}
.smk__rijen .smk__rij-prijs{color:var(--tekst);text-align:right}
.smk__eerste{padding:var(--sectie) 0}
.smk__eerste-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:var(--gat);align-items:center}
.smk .smk__eerste-a{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.smk .smk__eerste-b{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);align-self:end}
.smk__team{padding:0 0 var(--sectie)}
.smk__team-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);gap:var(--gat);align-items:start}
.smk__team-in .smk__h2{align-self:start}
.smk__mens{margin:0}
.smk .smk__mens img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);margin-bottom:14px}
.smk__mens--b{margin-top:96px}
.smk .smk__mens--b img{aspect-ratio:1/1;object-position:50% 25%}
.smk__mens figcaption{color:var(--gedempt);max-width:30em}
.smk__mens strong{display:block;color:var(--tekst);font-weight:600;font-size:var(--fs3)}
.smk__salon{padding:0 0 var(--sectie)}
.smk__salon-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;gap:14px}
.smk__salon-txt{grid-column:1/5;grid-row:1/3;align-self:center;padding-right:24px}
.smk .smk__s1{grid-column:5/10;grid-row:1;width:100%;height:100%;min-height:300px;object-fit:cover;border-radius:var(--r)}
.smk .smk__s2{grid-column:10/13;grid-row:1;width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.smk .smk__s3{grid-column:5/8;grid-row:2;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.smk .smk__s4{grid-column:8/13;grid-row:2;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:var(--r)}
.smk__stem{padding:var(--sectie) 0 calc(var(--sectie) * .5)}
.smk__stem-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,6vw,110px);align-items:end}
.smk__q{margin:0}
.smk__q p{font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1.22;letter-spacing:-.02em;margin:0 0 14px}
.smk__q--klein p{font-size:var(--fs3);line-height:1.4}
.smk__q footer{color:var(--gedempt);font-size:var(--fs1)}
.smk__cadeau{padding:0 0 var(--sectie)}
.smk__cadeau-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 40px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding-top:32px;padding-bottom:32px}
.smk__cadeau-in .smk__h2{font-size:var(--fs4);margin:0}
.smk__cadeau-in .smk__p{margin:0;flex:1 1 320px}
.smk__btn--licht{background:transparent;color:var(--accent)!important;border:1px solid var(--accent)}
.smk__btn--licht:hover{background:var(--accent);color:#fff!important}
.smk__contact{padding:0 0 var(--sectie)}
.smk__contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,110px)}
.smk__uren{list-style:none;margin:20px 0 0;padding:0;max-width:440px}
.smk__uren li{display:flex;justify-content:space-between;padding:9px 10px;border-bottom:1px solid var(--lijn)}
.smk__uren li.is-vandaag{background:var(--opp);border-radius:var(--r);font-weight:600;border-bottom-color:transparent}
.smk__uren li.is-vandaag span:first-child::after{content:", vandaag";font-weight:400;color:var(--accent)}
.smk__faq details{border-bottom:1px solid var(--lijn)}
.smk__faq summary{cursor:pointer;padding:15px 28px 15px 0;list-style:none;position:relative;font-weight:600}
.smk__faq summary::-webkit-details-marker{display:none}
.smk__faq summary::after{content:"+";position:absolute;right:0;top:13px;font-size:var(--fs3);color:var(--accent)}
.smk__faq details[open] summary::after{content:"\2212"}
.smk__faq details p{margin:0 0 16px;color:var(--gedempt)}
.smk__voet{background:var(--opp);padding:64px 0 32px;font-size:var(--fs1)}
.smk__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)}
.smk__voet-kol p{margin:0;color:var(--gedempt)}
.smk__voet-kol a{display:block;padding:5px 0;text-decoration:none;color:var(--gedempt);transition:color .18s}
.smk__voet-kol a:hover{color:var(--accent)}
.smk__voet-logo{font-weight:600;font-size:var(--fs3);color:var(--tekst)!important;margin-bottom:12px!important}
.smk__voet-kop{color:var(--tekst)!important;font-weight:600;margin-bottom:8px!important}
.smk__voet-regel{margin:24px 0 0;color:var(--gedempt)}
@container (max-width:1150px){.smk__nav{gap:18px}.smk__btn--head{display:none}}
@container (max-width:900px){
  .smk__nav{display:none}.smk__menu-knop{display:flex}
  .smk__top-r span{display:none}
  .smk__hero-in,.smk__kop2,.smk__stem-in,.smk__contact-in{grid-template-columns:minmax(0,1fr)}
  .smk__boek{position:static}
  .smk__hero-in{gap:20px}.smk__hero-txt{display:contents}.smk .smk__hero-foto{order:2}.smk__lead{margin-bottom:0}
  .smk__rijen li{grid-template-columns:140px minmax(0,1fr)}.smk .smk__rijen img{width:140px}.smk__rijen .smk__rij-prijs{grid-column:2;text-align:left}
  .smk__eerste-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.smk__eerste-txt{grid-column:1/-1;order:-1}
  .smk__team-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.smk__team-in .smk__h2{grid-column:1/-1}.smk__mens--b{margin-top:48px}
  .smk__salon-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.smk__salon-txt{grid-column:1/-1;grid-row:auto;padding:0}
  .smk .smk__s1,.smk .smk__s2,.smk .smk__s3,.smk .smk__s4{grid-column:auto;grid-row:auto;min-height:0;aspect-ratio:1/1;height:auto}
}
@container (max-width:560px){
  .smk>*{--fs5:32px;--fs6:44px;--fs4:22px}
  .smk__top-in{flex-direction:column;gap:2px}
  .smk__head-in{height:64px}
  .smk__hero{padding-top:32px}
  .smk__boek{padding:20px 16px}
  .smk__rijen li{grid-template-columns:minmax(0,1fr)}.smk .smk__rijen img{width:100%}.smk__rijen .smk__rij-prijs{grid-column:auto}
  .smk__team-in{grid-template-columns:minmax(0,1fr)}.smk__mens--b{margin-top:8px}.smk .smk__mens img,.smk .smk__mens--b img{aspect-ratio:4/3;object-position:50% 25%}
  .smk__gegevens{grid-template-columns:minmax(0,1fr)}
  .smk__voet-kol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.smk__voet-kol>div:first-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.smk *{transition:none!important}}

// Studio Mareen · huidverbetering en beauty, Rotterdam · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.smk');if(!s)return;
var knop=s.querySelector('.smk__menu-knop'),menu=s.querySelector('.smk__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 UREN={2:[9,18],3:[9,18],4:[9,21],5:[9,18],6:[9,16]};
var nu=new Date(),vd=nu.getDay(),vt=s.querySelector('.smk__vandaag');
s.querySelectorAll('.smk__uren li').forEach(function(li){if(+li.getAttribute('data-dag')===vd)li.classList.add('is-vandaag');});
vt.textContent=UREN[vd]?'Vandaag geopend van '+UREN[vd][0]+':00 tot '+UREN[vd][1]+':00':'Vandaag gesloten, morgen weer open. Online boeken kan altijd.';
var dagenEl=s.querySelector('.smk__dagen'),tijdenEl=s.querySelector('.smk__tijden'),knopB=s.querySelector('.smk__boek-knop'),uit=s.querySelector('.smk__boek-uit'),form=s.querySelector('.smk__gegevens');
var beh=s.querySelector('.smk__beh [aria-checked=true]'),dag=null,tijd=null,stap=0;
var dagen=[],d=new Date();d.setHours(12,0,0,0);
while(dagen.length<6){d.setDate(d.getDate()+1);if(UREN[d.getDay()])dagen.push(new Date(d));}
function radio(g,k){g.querySelectorAll('[role=radio]').forEach(function(b){b.setAttribute('aria-checked',String(b===k));});}
function lang(x){return x.toLocaleDateString('nl-NL',{weekday:'long',day:'numeric',month:'long'});}
function pad(m){return Math.floor(m/60)+':'+('0'+m%60).slice(-2);}
function slots(x){var u=UREN[x.getDay()],duur=+beh.getAttribute('data-duur'),uit=[],seed=x.getDate()*13+duur;
  for(var m=u[0]*60;m+duur<=u[1]*60;m+=30){seed=(seed*37+11)%97;if(seed%5<2&&uit.length<8)uit.push(pad(m));}return uit;}
function vulTijden(){tijdenEl.innerHTML='';tijd=null;var l=slots(dag);
  if(!l.length){var p=document.createElement('p');p.className='smk__tijden-leeg';p.textContent='Deze dag is vol. Kies een andere dag.';tijdenEl.appendChild(p);}
  l.forEach(function(t,i){var b=document.createElement('button');b.type='button';b.setAttribute('role','radio');b.textContent=t;b.setAttribute('aria-checked',String(i===0));if(i===0)tijd=t;b.addEventListener('click',function(){tijd=t;radio(tijdenEl,b);label();});tijdenEl.appendChild(b);});label();}
function label(){var kort=dag.toLocaleDateString('nl-NL',{weekday:'short',day:'numeric',month:'short'});knopB.disabled=!tijd;knopB.textContent=tijd?(stap?'Bevestig ':'Boek ')+beh.getAttribute('data-naam').toLowerCase()+', '+kort+' om '+tijd:'Kies een dag met vrije tijden';}
dagen.forEach(function(x,i){var b=document.createElement('button');b.type='button';b.setAttribute('role','radio');b.setAttribute('aria-checked',String(i===0));var w=x.toLocaleDateString('nl-NL',{weekday:'short'});b.innerHTML=w.charAt(0).toUpperCase()+w.slice(1)+'<b>'+x.getDate()+'</b>'+x.toLocaleDateString('nl-NL',{month:'short'});b.addEventListener('click',function(){dag=x;radio(dagenEl,b);vulTijden();});dagenEl.appendChild(b);});
dag=dagen[0];
s.querySelectorAll('.smk__beh [role=radio]').forEach(function(b){b.addEventListener('click',function(){beh=b;radio(b.parentNode,b);vulTijden();});});
vulTijden();
knopB.addEventListener('click',function(){if(!tijd)return;
  if(!stap){stap=1;form.hidden=false;label();uit.textContent='Nog je naam en telefoonnummer, dan staat hij vast.';form.naam.focus();return;}
  var okN=!!form.naam.value.trim(),okT=form.tel.value.replace(/\D/g,'').length>=10;form.naam.setAttribute('aria-invalid',String(!okN));form.tel.setAttribute('aria-invalid',String(!okT));
  if(!okN||!okT){uit.textContent='Vul je naam en een telefoonnummer van tien cijfers in.';return;}
  form.hidden=true;knopB.hidden=true;[dagenEl,tijdenEl,s.querySelector('.smk__beh')].forEach(function(x){x.hidden=true;});
  uit.textContent='';var p=document.createElement('p');p.className='smk__p';p.style.color='var(--tekst)';p.style.fontSize='var(--fs3)';p.textContent='Tot '+lang(dag)+' om '+tijd+', '+form.naam.value.trim().split(' ')[0]+'. '+beh.getAttribute('data-naam')+' bij Studio Mareen, Oudedijk 112. Je krijgt de dag ervoor een sms.';uit.parentNode.insertBefore(p,uit);});
}
init(document.querySelector('.jouw-container'));