/* Studio Kers: voorbeeldontwerp nagelstudio. Twee lettertypes: Bricolage Grotesque (koppen) en DM Sans (tekst). */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{--room:#fbf6ee;--wit:#fff;--kers:#8f1a2d;--kers-donker:#6f1222;--boter:#f5e17d;--inkt:#1f1416;--zacht:#5d4f51;--lijn:#e7dccb;--kop:"Bricolage Grotesque",system-ui,sans-serif;--tekst:"DM Sans",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--room);color:var(--inkt);font:400 17px/1.6 var(--tekst)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--inkt);outline-offset:3px;border-radius:6px}
.donker :focus-visible{outline-color:var(--boter)}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.naar-inhoud{position:absolute;left:-999px;top:8px;background:var(--inkt);color:var(--room);padding:10px 16px;border-radius:999px;z-index:50}
.naar-inhoud:focus{left:12px}

/* Koppen */
h1,h2,h3{font-family:var(--kop);font-weight:800;letter-spacing:-.04em;line-height:1;text-wrap:balance}
h1{font-size:clamp(2.6rem,7.4vw,5.5rem);line-height:.95}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.03em}
mark{background:var(--boter);color:inherit;border-radius:.2em;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.label{display:inline-block;border:1.5px solid currentColor;border-radius:999px;padding:5px 13px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.intro{font-size:1.15rem;max-width:34em;color:var(--zacht)}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--kers);color:var(--room);font:700 1rem var(--tekst);text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.knop:hover{background:var(--kers-donker);transform:translateY(-1px)}
.knop.klein{min-height:44px;padding:0 20px;font-size:.94rem}
.knop.licht{background:var(--room);color:var(--inkt)}
.knop.licht:hover{background:var(--wit)}
.knop.donker-knop{background:var(--inkt)}
.tekstlink{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.tekstlink:hover{color:var(--kers)}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}

/* Header */
.kop{position:sticky;top:0;z-index:20;background:rgba(251,246,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.kop.gescrold{border-color:var(--lijn)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.logo{font:800 1.6rem/1 var(--kop);letter-spacing:-.04em;text-decoration:none;white-space:nowrap}
.logo b{color:var(--kers)}
.menu{display:flex;align-items:center;gap:4px}
.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;font-weight:500;font-size:.96rem;text-decoration:none}
.menu a:hover{background:#f1e7d6}
.menu a[aria-current="page"]{background:var(--inkt);color:var(--room)}
.kop .knop{flex:none}
.menuknop{display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--inkt);background:none;color:var(--inkt);font:700 .94rem var(--tekst);cursor:pointer}
.menuknop i{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}

/* Secties */
section{padding:clamp(56px,8vw,104px) 0}
.sectiekop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,48px)}
.sectiekop p{max-width:28em;color:var(--zacht)}
.paginakop{padding:clamp(40px,6vw,80px) 0 clamp(28px,4vw,48px)}
.paginakop h1{font-size:clamp(2.6rem,6.4vw,4.6rem);margin:18px 0 20px}
.foto{border-radius:28px;overflow:hidden;background:#eadfce}

/* Home: openingsbeeld */
.held{padding:clamp(24px,4vw,48px) 0 clamp(56px,7vw,88px)}
.held .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.held h1{margin:20px 0 22px}
.held .intro{color:var(--inkt)}
.sterren{margin-top:28px;font-weight:500;font-size:.96rem}
.sterren b{color:var(--kers);letter-spacing:2px;margin-right:8px}
.held-beeld{position:relative}
.held-beeld .foto{aspect-ratio:4/5;border-radius:36px}
.held-beeld .rond{position:absolute;right:-14px;top:32px;width:clamp(84px,11vw,124px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--room)}
.prijsje{position:absolute;left:-22px;bottom:40px;background:var(--boter);border-radius:22px;padding:14px 20px;font-size:.88rem;font-weight:500;line-height:1.25;box-shadow:0 10px 30px rgba(31,20,22,.14)}
.prijsje b{display:block;font:800 1.9rem/1 var(--kop);letter-spacing:-.03em;margin-top:4px}

/* Kaarten */
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kaart{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:230px;padding:26px;border-radius:28px;background:var(--wit);text-decoration:none;transition:transform .2s}
a.kaart:hover{transform:translateY(-4px)}
.kaart.rood{background:var(--kers);color:var(--room)}
.kaart.geel{background:var(--boter)}
.kaart p{margin-top:8px;font-size:.96rem;max-width:20em}
.kaart .onder{display:flex;justify-content:space-between;align-items:flex-end;font-size:.9rem}
.kaart .onder b{font:800 2.1rem/1 var(--kop);letter-spacing:-.03em}

/* Drie punten */
.punten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 32px;padding:28px 0;border-block:1.5px solid var(--inkt)}
.punten li{display:flex;gap:14px;align-items:flex-start}
.punten b{display:block;font:700 1.15rem/1.2 var(--kop);letter-spacing:-.02em}
.punten span{color:var(--zacht);font-size:.95rem}
.punten i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--boter);font:800 1rem var(--kop);font-style:normal}

/* Fotoraster op home */
.rij-fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rij-fotos .foto{aspect-ratio:3/4;border-radius:24px}

/* Tekst naast beeld */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.duo .foto{aspect-ratio:4/5}
.duo.breed .foto{aspect-ratio:5/4}
.duo.om .foto{order:2}
.duo h2{margin:16px 0 18px}
.duo p+p{margin-top:14px}
.feiten{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.feiten li{background:var(--wit);border-radius:999px;padding:8px 16px;font-size:.92rem;font-weight:500}
.feiten li b{font-weight:700}
.blokken>*+*{margin-top:clamp(56px,7vw,96px)}

/* Reviews */
.vlak{background:var(--wit)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vlak .kaart:not(.rood):not(.geel),.vlak .stappen li{background:var(--room)}
.review{background:var(--room);border-radius:28px;padding:26px}
.review .st{color:var(--kers);letter-spacing:2px}
.review blockquote{margin:12px 0 18px;font-size:1.05rem}
.review cite{font-style:normal;font-weight:700;font-size:.94rem}
.review cite span{display:block;font-weight:400;color:var(--zacht)}

/* Stappen */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:stap}
.stappen li{counter-increment:stap;background:var(--wit);border-radius:28px;padding:26px}
.stappen li::before{content:counter(stap);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--kers);color:var(--room);font:800 1.2rem var(--kop);margin-bottom:18px}
.stappen p{margin-top:8px;color:var(--zacht)}

/* Vragen */
.vragen{max-width:780px}
.vragen details{border-bottom:1.5px solid var(--inkt)}
.vragen summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:12px 0;font:700 1.15rem/1.3 var(--kop);letter-spacing:-.02em;cursor:pointer;list-style:none}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--boter);font-size:1.3rem}
.vragen details[open] summary::after{content:"\2212"}
.vragen details p{padding:0 0 22px;max-width:38em;color:var(--zacht)}

/* Oproep onderaan */
.oproep{background:var(--boter);border-radius:36px;padding:clamp(32px,6vw,72px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.oproep h2{max-width:11em}
.oproep p{margin-top:12px;max-width:26em}

/* Inspiratie */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--inkt);background:none;color:var(--inkt);font:700 .94rem var(--tekst);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--inkt);color:var(--room)}
.galerij{columns:3;column-gap:16px}
.galerij figure{position:relative;break-inside:avoid;margin-bottom:16px;border-radius:24px;overflow:hidden;background:#eadfce}
.galerij figure[hidden]{display:none}
.galerij img{height:auto}
.galerij figcaption{position:absolute;left:12px;bottom:12px;background:var(--room);border-radius:999px;padding:5px 13px;font-size:.84rem;font-weight:700}

/* Prijslijst */
.prijzen{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
.prijsgroep{background:var(--wit);border-radius:28px;padding:28px}
.prijsgroep.rood{background:var(--kers);color:var(--room)}
.prijsgroep>p{margin-top:6px;font-size:.95rem;opacity:.8}
.prijsgroep ul{margin-top:18px}
.prijsgroep li{display:grid;grid-template-columns:1fr auto;gap:2px 20px;padding:14px 0;border-top:1px solid rgba(31,20,22,.14)}
.prijsgroep.rood li{border-color:rgba(251,246,238,.28)}
.prijsgroep li b{font-weight:700}
.prijsgroep li strong{font:800 1.3rem/1.2 var(--kop);letter-spacing:-.02em;white-space:nowrap}
.prijsgroep li span{grid-column:1/-1;font-size:.9rem;opacity:.75}
.opmerkingen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.opmerkingen li{border:1.5px solid var(--inkt);border-radius:24px;padding:20px 22px;font-size:.95rem}
.opmerkingen b{display:block;font:700 1.1rem var(--kop);letter-spacing:-.02em;margin-bottom:4px}

/* Contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.formulier{background:var(--wit);border-radius:28px;padding:clamp(22px,3vw,36px)}
.formulier h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:6px}
.veld{margin-top:18px}
.veld label{display:block;font-weight:700;font-size:.94rem;margin-bottom:6px}
.veld input,.veld select,.veld textarea{width:100%;min-height:52px;padding:12px 16px;border-radius:16px;border:1.5px solid #bfb3a3;background:var(--room);color:var(--inkt);font:400 1rem var(--tekst)}
.veld textarea{min-height:120px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:3px solid var(--inkt);outline-offset:2px;border-color:var(--inkt)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.formulier .knop{margin-top:24px;width:100%}
.melding{margin-top:16px;padding:14px 18px;border-radius:16px;background:var(--boter);font-weight:500}
.gegevens{display:grid;gap:18px}
.gegevens>div{border-radius:28px;padding:28px;background:var(--kers);color:var(--room)}
.gegevens>div+div{background:var(--boter);color:var(--inkt)}
.gegevens h2{font-size:1.7rem;margin-bottom:14px}
.gegevens dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px}
.gegevens dt{font-weight:700}
.gegevens dd{text-align:right}
.gegevens p+p{margin-top:10px}

/* Footer */
.voet{background:var(--inkt);color:var(--room);padding:56px 0 28px;margin-top:clamp(56px,8vw,104px)}
.voet .wrap>div{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.voet .logo{font-size:2rem}
.voet .logo b{color:var(--boter)}
.voet h2{font:700 1rem var(--tekst);letter-spacing:0;margin-bottom:12px;color:var(--boter)}
.voet li{padding:3px 0}
.voet a{text-decoration:none}
.voet a:hover{text-decoration:underline}
.voet .klein{margin-top:40px;padding-top:20px;border-top:1px solid rgba(251,246,238,.2);font-size:.86rem;opacity:.75}
.boekbalk{display:none}

/* Smaller schermen */
@media (max-width:1020px){
  .menuknop{display:inline-flex}
  .kop .knop{display:none}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:12px 20px 20px;background:var(--room);border-bottom:1px solid var(--lijn);box-shadow:0 20px 30px rgba(31,20,22,.08)}
  .menu.open{display:flex}
  .menu a{min-height:50px;font-size:1.1rem;padding:0 16px}
  .boekbalk{display:block;position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,246,238,.94);backdrop-filter:blur(10px);border-top:1px solid var(--lijn)}
  .boekbalk .knop{width:100%}
  body.met-boekbalk{padding-bottom:74px}
}
@media (max-width:860px){
  .held .wrap,.duo,.contact{grid-template-columns:1fr}
  .duo.om .foto{order:0}
  .held-beeld{max-width:520px}
  .held-beeld .rond{right:10px}
  .prijsje{left:12px;bottom:20px}
  .kaarten,.reviews,.stappen,.punten,.opmerkingen,.prijzen{grid-template-columns:1fr}
  .kaart{min-height:0}
  .rij-fotos{grid-template-columns:repeat(2,1fr)}
  .galerij{columns:2}
  .voet .wrap>div{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .twee{grid-template-columns:1fr}
  .galerij{column-gap:10px}
  .galerij figure{margin-bottom:10px;border-radius:18px}
  .voet .wrap>div{grid-template-columns:1fr}
  .gegevens dd{text-align:left}
  .gegevens dl{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}