/* Venus Schoonheidssalon — conceptontwerp
   ---------------------------------------------------------------------------
   Haar eigen identiteit is het uitgangspunt: het logo, het blush-roze (#E8B4B8)
   en het goud (#DFBA7E) van haar huidige site, en Playfair Display dat ze al
   gebruikt. Dat blijft, want ze moet zich erin herkennen.

   Wat er anders is: de opbouw. Haar huidige site zet alles in smalle kaartjes van
   ongelijke hoogte met veel lege ruimte, de huidproblemen zitten in een carrousel
   die halve kaartjes afsnijdt, en er staat nergens een prijs. Hier krijgt elk
   onderdeel de ruimte die het nodig heeft, staan de prijzen er wél, en is haar
   sterkste bezit (elf echte foto's van huidklachten) een net raster in plaats van
   een kapotte slider.

   De vier kleurstellingen hieronder houden allemaal haar roze vast; alleen de
   drager eronder verschilt. Zo blijft het haar salon, met een andere jas aan. */

:root{
  /* Zoals nu: haar eigen kleuren van venusschoonheidssalon.nl */
  --blush:#E8B4B8;          /* haar knopkleur */
  --goud:#DFBA7E;           /* haar accentkleur */
  --papier:#F9F6F4;         /* haar lichte vlakken */
  --inkt:#020202;           /* haar donkere vlakken */
  --diep:#1A1618;           /* donkere sectie */
  --zacht:#FFFFFF;
  --lijn:#E7DCD6;
  --tekst:#2A2224;
  --stil:#6E5F61;
  --blush-diep:#C98A90;     /* voor tekst op licht, met genoeg contrast */
}
html[data-thema="bos"]{
  /* Botanisch groen. Past bij Dr. Baumann: 100% natuurlijk, plantaardig. */
  --papier:#F4F1EA; --inkt:#1F2E27; --diep:#16221D; --lijn:#DCD9CD;
  --tekst:#1F2A25; --stil:#5C6A62; --goud:#C7A76A;
}
html[data-thema="aubergine"]{
  /* Aubergine. Klinischer, luxer; haar roze wordt er scherper van. */
  --papier:#F7F2F4; --inkt:#2E1B28; --diep:#241320; --lijn:#E4D6DD;
  --tekst:#2A1C25; --stil:#6B5560; --goud:#D8B48C;
}
html[data-thema="zand"]{
  /* Zand en inkt. Rustig, warm, veel wit; het roze is de enige kleur. */
  --papier:#EFE7DC; --inkt:#26211C; --diep:#1C1814; --lijn:#DCD0C0;
  --tekst:#241E19; --stil:#6A5D50; --goud:#B99161;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--zacht);color:var(--tekst);
  font-family:"Manrope",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blush-diep);outline-offset:3px}
.binnen{width:100%;max-width:78rem;margin:0 auto;padding:0 clamp(1.15rem,4vw,3.25rem)}
.overslaan{position:absolute;left:-9999px}
.overslaan:focus{position:static;display:inline-block;padding:.6rem 1rem;background:var(--inkt);color:#fff}

h1,h2,h3,.merknaam{font-family:"Playfair Display",Georgia,serif;font-weight:500;line-height:1.1}
h1{font-size:clamp(2.1rem,1.3rem + 3.6vw,4.25rem);margin:0 0 1rem;letter-spacing:-.01em}
h2{font-size:clamp(1.65rem,1.2rem + 1.9vw,2.7rem);margin:0 0 .7rem;letter-spacing:-.005em}
h3{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);margin:0 0 .4rem}
.kop-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blush-diep);
  font-weight:700;margin:0 0 .55rem}
.lood{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--stil);max-width:56ch;margin:0}

/* ---- kop ---- */
.balk{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--lijn)}
.balk .binnen{display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem);min-height:4.5rem}
.balk img{width:clamp(7.5rem,14vw,10rem)}
.hoofdmenu{margin-left:auto}
.hoofdmenu ul{display:flex;flex-wrap:wrap;gap:.3rem clamp(.9rem,2vw,1.7rem);list-style:none;margin:0;padding:0;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.hoofdmenu a{text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.hoofdmenu a:hover{border-bottom-color:var(--blush)}
.hoofdmenu [aria-current="page"]{border-bottom-color:var(--inkt)}
.belknop{display:inline-flex;align-items:center;gap:.45rem;background:var(--inkt);color:#fff;
  text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.04em;
  padding:.7rem 1.15rem;border-radius:999px;white-space:nowrap}
.belknop:hover{background:var(--diep)}

/* ---- hero ---- */
.hero{position:relative;color:#fff;isolation:isolate;
  min-height:clamp(26rem,62vh,40rem);display:flex;align-items:flex-end;
  padding:clamp(3rem,10vw,6rem) 0 clamp(2.4rem,6vw,4rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--inkt) center/cover no-repeat}
.hero.met-foto::before{background-image:linear-gradient(to right,rgba(10,8,9,.82),rgba(10,8,9,.38)),
  url("https://venusschoonheidssalon.nl/wp-content/uploads/sites/151/2025/10/2023-05-31.jpg")}
.hero h1{max-width:24ch}
.hero p{max-width:44ch;color:rgba(255,255,255,.88);font-size:clamp(1.05rem,1rem + .4vw,1.25rem)}
.hero-acties{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.knop{display:inline-block;text-decoration:none;font-weight:700;letter-spacing:.02em;
  padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;font-size:.95rem}
.knop-vol{background:var(--blush);color:#231A1C;border-color:var(--blush)}
.knop-vol:hover{background:#fff;border-color:#fff}
.knop-lijn{border-color:rgba(255,255,255,.6);color:#fff}
.knop-lijn:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.knop-donker{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.knop-donker:hover{background:var(--diep)}

/* ---- vertrouwensstrook ---- */
.strook{background:var(--inkt);color:#fff;padding:1.1rem 0}
.strook ul{display:flex;flex-wrap:wrap;gap:.7rem clamp(1.2rem,3vw,2.8rem);list-style:none;margin:0;padding:0;
  align-items:center;justify-content:center;font-size:.85rem}
.strook li{display:flex;align-items:center;gap:.45rem}
.sterren{color:var(--goud);letter-spacing:.1em}
.strook b{font-weight:700}

/* ---- secties ---- */
section{padding:clamp(3.2rem,8vw,6rem) 0}
.op-papier{background:var(--papier)}
.op-diep{background:var(--diep);color:#fff}
.op-diep .lood,.op-diep p{color:rgba(255,255,255,.82)}
.op-diep .kop-label{color:var(--blush)}
.sectiekop{max-width:60rem;margin:0 0 clamp(1.8rem,4vw,3rem)}

/* huidproblemen: haar eigen foto's, in een net raster in plaats van een carrousel */
.raster{display:grid;gap:clamp(.8rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr))}
/* Bij een handvol foto's laat auto-fill ze klein en links staan, omdat er kolommen
   overblijven die niemand vult. Een vaste driedeling geeft ze de ruimte die ze horen te
   krijgen; dat viel op bij de drie salonfoto's, die eruitzagen als miniaturen. */
.raster-drie{grid-template-columns:1fr}
@media (min-width:40rem){ .raster-drie{grid-template-columns:repeat(3,1fr)} }
.raster-drie img{aspect-ratio:3/4}
@media (min-width:40rem){ .raster-drie img{aspect-ratio:4/5} }
.klacht{position:relative;overflow:hidden;border-radius:4px;background:var(--inkt);isolation:isolate}
.klacht img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s ease}
.klacht:hover img{transform:scale(1.04)}
.klacht figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .8rem;
  background:linear-gradient(to top,rgba(6,4,5,.88),rgba(6,4,5,0));color:#fff;
  font-weight:700;font-size:.95rem;letter-spacing:.01em}

/* behandelingen met prijs: het onderdeel dat op haar site ontbreekt */
.behandelingen{display:grid;gap:clamp(.9rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.behandeling{background:var(--zacht);border:1px solid var(--lijn);border-radius:4px;
  padding:clamp(1.2rem,3vw,1.8rem);display:flex;flex-direction:column;gap:.55rem}
.op-papier .behandeling{background:#fff}
.behandeling h3{margin:0}
.behandeling p{margin:0;color:var(--stil);font-size:.95rem;flex:1}
.prijsregel{display:flex;align-items:baseline;gap:.6rem;padding-top:.7rem;border-top:1px solid var(--lijn);
  margin-top:.3rem}
.vanaf{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stil)}
.bedrag{font-family:"Playfair Display",Georgia,serif;font-size:1.4rem;font-weight:600;
  font-variant-numeric:tabular-nums;margin-left:auto}
.duurtje{font-size:.75rem;color:var(--stil)}

/* over Somaya */
.tweeluik{display:grid;gap:clamp(1.6rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){ .tweeluik{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)} }
/* Haar portret is een liggende foto (1149 bij 768). Op 5/7 croppen sneed er te veel af;
   4/5 met het zwaartepunt iets boven het midden houdt haar gezicht heel. */
.portret{border-radius:4px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(20,10,14,.6)}
.portret img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 28%}
@media (min-width:56rem){ .portret img{aspect-ratio:5/6} }
.citaatje{border-left:3px solid var(--blush);padding-left:1.1rem;font-style:italic;color:var(--stil);margin:1.4rem 0 0}

/* reviews */
.reviews{display:grid;gap:clamp(.9rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.review{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:4px;padding:clamp(1.2rem,3vw,1.7rem)}
.review .sterren{display:block;margin-bottom:.6rem}
.review h3{font-size:1.05rem;margin:0 0 .5rem;color:#fff}
.review p{font-size:.94rem;margin:0 0 .9rem}
.review cite{font-style:normal;font-weight:700;font-size:.85rem;color:var(--blush)}

/* praktisch */
.praktisch{display:grid;gap:clamp(1.4rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.uren{list-style:none;margin:0;padding:0}
.uren li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;
  border-bottom:1px solid var(--lijn);font-variant-numeric:tabular-nums}
.uren li:last-child{border-bottom:0}
.uren .dag{font-weight:600}
dl.gegevens{margin:0}
dl.gegevens dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stil);margin-bottom:.15rem}
dl.gegevens dd{margin:0 0 1rem;font-weight:600}
dl.gegevens a{text-decoration:none;border-bottom:1px solid var(--blush)}

/* ---- tarievenkaart ---- */
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:4px;
  padding:clamp(1.3rem,3.5vw,2.6rem);box-shadow:0 24px 50px -44px rgba(20,10,14,.5)}
.groep{margin:0 0 2.6rem}
.groep:last-child{margin-bottom:0}
.groep > h3{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blush-diep);
  margin:0 0 .25rem;font-weight:700}
.groep .toelichting{margin:0 0 1.05rem;font-size:.92rem;color:var(--stil);max-width:60ch}
.regels{list-style:none;margin:0;padding:0}
.regels li{display:flex;align-items:baseline;gap:.55rem;padding:.52rem 0;border-bottom:1px solid var(--lijn)}
.regels li:last-child{border-bottom:0}
.wat{font-weight:600}
.duur{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stil);
  border:1px solid var(--lijn);border-radius:2px;padding:.1rem .4rem;white-space:nowrap}
.punten{flex:1 1 1.5rem;min-width:.9rem;border-bottom:1px dotted var(--lijn);transform:translateY(-.28em)}
.prijs{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.waxkolommen{columns:2;column-gap:clamp(1.6rem,4vw,3.5rem)}
.waxkolommen li{break-inside:avoid}

/* ---- kleurkiezer ---- */
.kleurkiezer{position:fixed;right:clamp(.8rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.6rem);z-index:60;
  background:rgba(255,255,255,.96);border:1px solid var(--lijn);border-radius:999px;
  box-shadow:0 14px 34px -18px rgba(20,10,14,.45);padding:.5rem .7rem;
  display:flex;align-items:center;gap:.5rem}
.kleurkiezer .titel{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stil);font-weight:700;white-space:nowrap}
.kleurkiezer .knoppen{display:flex;gap:.35rem}
.staal{width:1.85rem;height:1.85rem;border-radius:50%;border:2px solid #fff;cursor:pointer;padding:0;
  box-shadow:0 0 0 1px var(--lijn);position:relative}
.staal[aria-pressed="true"]{box-shadow:0 0 0 2px var(--inkt)}
.staal span{position:absolute;left:-9999px}
.staal-nu{background:linear-gradient(135deg,#E8B4B8 50%,#F9F6F4 50%)}
.staal-bos{background:linear-gradient(135deg,#E8B4B8 50%,#1F2E27 50%)}
.staal-aubergine{background:linear-gradient(135deg,#E8B4B8 50%,#2E1B28 50%)}
.staal-zand{background:linear-gradient(135deg,#E8B4B8 50%,#EFE7DC 50%)}

/* ---- voet ---- */
.voet{background:var(--inkt);color:#fff;padding:clamp(2.4rem,6vw,4rem) 0 1.6rem}
.voet a{color:#fff}
.voetraster{display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.voet h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);margin:0 0 .5rem}
.voet dl.gegevens dt{color:var(--goud)}
.voet dl.gegevens a{border-bottom-color:var(--blush)}
.voet .uren li{border-bottom-color:rgba(255,255,255,.16)}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:.3rem 0 0;padding:0}
.badges li{border:1px solid rgba(255,255,255,.28);border-radius:2px;padding:.3rem .65rem;
  font-size:.78rem;letter-spacing:.06em}
.conceptnoot{margin:clamp(1.8rem,4vw,2.6rem) 0 0;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.18);font-size:.8rem;color:rgba(255,255,255,.62)}
.conceptnoot a{border-bottom:1px solid rgba(255,255,255,.4);text-decoration:none}

@media (max-width:56rem){
  .balk .binnen{flex-wrap:wrap;min-height:0;padding-top:.7rem;padding-bottom:.7rem}
  .hoofdmenu{order:3;width:100%;margin-left:0;border-top:1px solid var(--lijn);padding-top:.55rem}
  .hoofdmenu ul{gap:.2rem 1.1rem;font-size:.74rem}
  .belknop{margin-left:auto}
  .waxkolommen{columns:1}
  /* naam en prijs op één regel, de duur eronder: laten omslaan liet de prijs los hangen */
  .regels li{display:grid;grid-template-columns:1fr auto;column-gap:.9rem;row-gap:.12rem;align-items:baseline}
  .wat{grid-column:1;grid-row:1}
  .prijs{grid-column:2;grid-row:1}
  .duur{grid-column:1;grid-row:2;justify-self:start}
  .punten{display:none}
  .kleurkiezer{left:.7rem;right:.7rem;bottom:.7rem;justify-content:center;border-radius:12px}
  .kleurkiezer .titel{display:none}
  .staal{width:2.3rem;height:2.3rem}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}