/* Jogi Beautywebsites: dezelfde opbouw als de bouw- en clubsite, met Melissa's vier beauty-ontwerpen als inspiratie (18 okt):
   licht blush en ivoor, oudroze accent, een hoog contrasterende schreefletter (Libre Bodoni) met een geschreven accentwoord
   (Parisienne, keuze Melissa 18 okt) in de opening, een rond stempel, oudroze rondjes in de werkwijze en een donkere slotband met foto.
   Oudroze knop met witte tekst: #a8585f haalt 4,97:1. Oudroze kleine tekst: #9a4f56 (4,85:1 op blush). */
@font-face { font-family: "Libre Bodoni"; src: url("/fonts/libre-bodoni.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "REM"; src: url("/fonts/rem.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Parisienne"; src: url("/fonts/parisienne.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --kop-letter: "Libre Bodoni", "Didot", Georgia, serif;
  --kop-gewicht: 400;
  --tekst-letter: "REM", system-ui, sans-serif;
  --schrift-letter: "Parisienne", "Brush Script MT", cursive;
  --achtergrond: #fcf8f5;
  --kop-achtergrond: rgba(252, 248, 245, .96);
  --kaart: #fff;
  --vlak: #f6e8e4;
  --blush: #f3e1dc;
  --inkt: #2b2124;
  --zacht: #6b5a5c;
  --accent-groot: #b86f75;
  --accent-tekst: #9a4f56;
  --accent-op-donker: #e7b3b0;
  --knop: #a8585f;
  --knop-hover: #8d454c;
  --knop-tekst: #fff;
  --donker: #2a1f22;
  --op-donker: #d9c9c8;
  --lijn: #ecdcd7;
  --lijn-sterk: #dcc3bd;
  --rond: 2px;
  --rond-groot: 14px;
  --opening-waas: none;
  --opening-waas-tablet: none;
  --opening-waas-telefoon: none;
}

body { font-size: 1.02rem; font-weight: 300; }
strong, b { font-weight: 500; }
h1, h2, h3 { letter-spacing: -.005em; }
h1 em, h2 em { font-style: normal; color: var(--accent-groot); }
.label { font-weight: 500; letter-spacing: .2em; font-size: .74rem; }
.knop { font-weight: 500; letter-spacing: .12em; font-size: .76rem; }
.knop-lijn { background: transparent; border-width: 1px; }
.merk-naam { font-size: 1.35rem; }
@media (max-width: 380px) { .kop .merk-naam { font-size: 1.15rem; } }
.menu a:not(.knop) { font-weight: 500; font-size: .74rem; }

/* Opening: tekst links op ivoor, rechts een boog met de diashow, het stempel en laptop en telefoon met een echte beautysite */
.opening-beauty { min-height: 0; background: radial-gradient(ellipse 60% 70% at 85% 30%, #f6e3de 0%, rgba(246, 227, 222, 0) 70%), linear-gradient(180deg, #fcf8f5, #f9efeb); overflow: hidden; }
.opening-beauty::before { display: none; }
.opening-beauty .opening-binnen { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.opening-beauty .opening-tekst { max-width: 37rem; }
.opening-beauty h1 { font-size: clamp(2.6rem, 4.9vw, 4.2rem); line-height: 1.05; margin-bottom: .5em; }
/* Het accentwoord geschreven, in oudroze, op een eigen regel (ontwerp 2: 'laat stralen') */
.opening-beauty h1 em { display: block; font-family: var(--schrift-letter); font-size: 1.45em; line-height: .9; color: var(--accent-groot); margin: .06em 0 0 -.04em; letter-spacing: 0; white-space: nowrap; }
.opening-beauty .intro { font-size: 1.06rem; color: var(--zacht); max-width: 31rem; }
.opening-prijs { display: block; margin-top: .55rem; font-weight: 500; color: var(--inkt); }
.opening-punten { list-style: none; margin: 1.5rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .88rem; color: var(--zacht); }
.opening-punten li { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.opening-punten .ico { width: 1.05em; height: 1.05em; color: var(--accent-tekst); }

.opening-beeld { position: relative; padding: 0 0 7% 12%; }
.boog { position: relative; isolation: isolate; aspect-ratio: 5 / 6; max-height: 36rem; margin-left: auto; border-radius: 999px 999px var(--rond-groot) var(--rond-groot); overflow: hidden; background: var(--blush); box-shadow: 0 40px 70px -50px rgba(84, 46, 46, .55); }
.boog::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .6); border-radius: inherit; pointer-events: none; z-index: 1; }
.opening-beauty .opening-dias { z-index: 0; }
.opening-beauty .opening-foto { object-position: 50% 40%; }
.stempel { position: absolute; top: 6%; left: 2%; width: clamp(6.5rem, 10vw, 8.4rem); height: auto; z-index: 3; filter: drop-shadow(0 14px 22px rgba(84, 46, 46, .25)); }
.stempel circle { fill: var(--knop); }
.stempel text { font: 500 9.2px var(--tekst-letter); fill: #fff; letter-spacing: .1em; }
.stempel use { fill: none; stroke: #fff; stroke-width: 1.4; }
/* De tekst rond het hartje draait langzaam rond (wens Melissa 18 okt); stil bij minder beweging */
.stempel-ring { transform-box: view-box; transform-origin: 60px 60px; animation: stempel-draai 24s linear infinite; }
@keyframes stempel-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stempel-ring { animation: none !important; } }
.opening-apparaten { position: absolute; left: 0; bottom: 0; width: 66%; padding: 0 9% 9% 0; z-index: 2; }
.opening-apparaten .laptop-scherm { box-shadow: 0 30px 60px -28px rgba(60, 30, 32, .6); }
.opening-apparaten .mobiel { width: 26%; }
@media (max-width: 1000px) and (min-width: 701px) {
  .opening-beauty .opening-binnen { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem; }
  .opening-apparaten { display: none; }
  .opening-beeld { padding: 0; }
  .stempel { left: -6%; top: auto; bottom: 6%; }
}
/* Telefoon: de boog met de diashow boven de tekst, alles op ivoor (geen witte tekst over een foto) */
@media (max-width: 700px) {
  .opening-beauty { display: block; min-height: 0; padding: 0; }
  .opening-beauty .opening-binnen { display: flex; flex-direction: column-reverse; gap: 1.6rem; padding: 1.4rem 16px 2.6rem; }
  .opening-beeld { padding: 0; width: min(100%, 22rem); margin: 0 auto; }
  .boog { aspect-ratio: 1 / 1; max-height: none; border-radius: 999px 999px var(--rond-groot) var(--rond-groot); }
  .opening-apparaten { display: none; }
  .stempel { width: 5.6rem; left: auto; right: -.4rem; top: auto; bottom: -1rem; }
  .opening-beauty .label { color: var(--accent-tekst); }
  .opening-beauty h1, .opening-beauty .intro { color: var(--inkt); }
  .opening-beauty h1 { font-size: clamp(2.1rem, 9.4vw, 2.6rem); }
  .opening-beauty h1 em { color: var(--accent-groot); }
  .opening-beauty .intro { color: var(--zacht); font-size: .98rem; }
  .opening-beauty .belofte { color: var(--zacht); margin-top: .8rem; font-size: .88rem; }
  .opening-beauty .belofte .ico { color: var(--accent-tekst); }
  .opening-beauty .knoppen { gap: .55rem; }
  .opening-beauty .knop { min-height: 2.6rem; padding: .55rem 1rem; font-size: .72rem; }
  .opening-beauty .knop-vol { background: var(--knop); color: #fff; }
  .opening-beauty .knop-vol:hover { background: var(--knop-hover); color: #fff; }
  .opening-beauty .knop-lijn { background: transparent; color: var(--inkt); border-color: var(--inkt); }
  .opening-beauty .knop-lijn:hover { background: var(--inkt); color: #fff; }
  .opening-punten { font-size: .8rem; gap: .4rem 1rem; margin-top: 1rem; padding-top: 1rem; }
}

/* Kenmerken: witte band met dunne oudroze lijniconen (ontwerp 1 en 3) */
.kenmerken { padding: 2.4rem 0; background: var(--kaart); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.kenmerken ul { list-style: none; max-width: 76rem; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); }
.kenmerken li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; padding: .2rem 1.2rem; }
.kenmerken li + li { border-left: 1px solid var(--lijn); }
.kenmerken .ico { width: 2rem; height: 2rem; stroke-width: 1.2; color: var(--accent-groot); transition: transform .35s; }
.kenmerken strong { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .2rem; }
.kenmerken span { font-size: .88rem; color: var(--zacht); line-height: 1.5; }
@media (max-width: 1000px) { .kenmerken ul { grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; } .kenmerken li:nth-child(3) { border-left: 0; } }
@media (max-width: 480px) { .kenmerken ul { grid-template-columns: 1fr; row-gap: 1.2rem; } .kenmerken li { flex-direction: row; text-align: left; border-left: 0 !important; padding: 0; gap: 1rem; } .kenmerken .ico { margin-top: .1rem; } }

/* Websites voor: als de behandelkaart van een salon. Twee kolommen, naam in Bodoni, dunne lijntjes ertussen (in plaats van acht losse kaartjes) */
.speciaal { background: var(--achtergrond); }
.speciaal h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.vakken { list-style: none; width: min(64rem, 100% - 32px); margin: 2.6rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 5rem); border-top: 1px solid var(--lijn-sterk); }
.vak { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.4rem 0 1.35rem; border-bottom: 1px solid var(--lijn); }
.vak-icoon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--lijn-sterk); color: var(--accent-tekst); margin-top: .1rem; transition: background-color .3s, color .3s, border-color .3s; }
.vak-icoon .ico { width: 1.25rem; height: 1.25rem; stroke-width: 1.3; }
.vak strong { display: block; font: 400 1.3rem/1.25 var(--kop-letter); margin-bottom: .25rem; }
.vak > div > span { display: block; font-size: .92rem; line-height: 1.55; color: var(--zacht); text-wrap: pretty; }
@media (max-width: 700px) { .vakken { grid-template-columns: 1fr; } .vak { padding: 1.1rem 0; } .vak strong { font-size: 1.2rem; } }

/* Wat erin zit: blush vlak, laptop rechts, vinkjes in oudroze rondjes */
.wat { background: var(--vlak); }
.wat .vinkjes .ico { background: var(--knop); color: #fff; border-radius: 50%; padding: .22rem; width: 1.35em; height: 1.35em; stroke-width: 2.4; margin-top: .12rem; }
.wat .apparaten .laptop-scherm { box-shadow: 0 30px 60px -30px rgba(60, 30, 32, .55); }

/* Probeer het zelf: de behandelkiezer van demo Stilbloei (145) */
.kiezer { background: var(--achtergrond); }
.kiezer-binnen { max-width: 76rem; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 2.2rem clamp(2rem, 4vw, 3.5rem); align-items: start; }
.kiezer-intro { grid-column: 1 / -1; max-width: 46rem; }
.kiezer-intro p:last-child { color: var(--zacht); margin: 0; }
.kiezer-vak { display: grid; gap: 1.9rem; }
.kz-groep { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .65rem; }
.kz-groep legend { font: 400 1.25rem/1.3 var(--kop-letter); color: var(--inkt); margin-bottom: .9rem; padding: 0; }
.kz-wensen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kz-tijden { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 30rem; }
.kz-keuze, .kz-tijd { position: relative; cursor: pointer; }
.kz-keuze input, .kz-tijd input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kz-keuze span { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .9rem; align-items: center; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--lijn-sterk); border-radius: 12px; background: var(--kaart); transition: border-color .3s, background-color .3s, box-shadow .3s, transform .3s; }
.kz-keuze .ico { grid-row: 1 / span 2; width: 2.2rem; height: 2.2rem; stroke-width: 1.2; color: var(--accent-groot); transition: transform .4s; }
.kz-keuze b { font-weight: 500; font-size: .98rem; line-height: 1.35; }
.kz-keuze small { grid-column: 2; font-size: .84rem; line-height: 1.45; color: var(--zacht); }
.kz-keuze:hover span { border-color: var(--accent-groot); }
.kz-keuze:hover .ico { transform: rotate(-8deg) scale(1.06); }
.kz-keuze input:checked + span { border-color: var(--knop); background: #fbefec; box-shadow: inset 0 0 0 1px var(--knop); }
.kz-tijd span { display: flex; justify-content: center; align-items: center; gap: .5rem; height: 100%; padding: .7rem .8rem; border: 1px solid var(--lijn-sterk); border-radius: 999px; background: var(--kaart); font-size: .92rem; transition: border-color .3s, background-color .3s, color .3s; }
.kz-tijd .ico { width: 1.15rem; height: 1.15rem; color: var(--accent-groot); }
.kz-tijd:hover span { border-color: var(--accent-groot); }
.kz-tijd input:checked + span { background: var(--knop); border-color: var(--knop); color: #fff; }
.kz-tijd input:checked + span .ico { color: #fff; }
.kz-keuze input:focus-visible + span, .kz-tijd input:focus-visible + span { outline: 3px solid var(--accent-groot); outline-offset: 3px; }
.advies { position: sticky; top: 6.5rem; overflow: hidden; background: var(--donker); color: #fff; border-radius: 22px; padding: 2.2rem 2.1rem 2rem; box-shadow: 0 40px 70px -46px rgba(60, 30, 32, .85); }
.advies::before { content: ""; position: absolute; right: -70px; top: -70px; width: 210px; height: 210px; border-radius: 50%; border: 1px solid rgba(231, 179, 176, .3); pointer-events: none; }
.advies-label { font-weight: 500; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-op-donker); margin-bottom: .7rem; }
.advies-naam { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.2; margin-bottom: .7rem; }
.advies-tekst { color: #efe4e2; font-size: .95rem; }
.advies-stappen { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.advies-stappen li { font-size: .8rem; line-height: 1.3; padding: .42rem .8rem; border: 1px solid rgba(231, 179, 176, .5); border-radius: 999px; }
.advies-feiten { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2.4rem; margin: 0 0 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.advies-feiten dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--op-donker); margin-bottom: .25rem; }
.advies-feiten dd { margin: 0; font: 400 1.35rem/1.2 var(--kop-letter); white-space: nowrap; }
.advies-feiten .advies-prijs { font-size: 1.9rem; color: var(--accent-op-donker); font-variant-numeric: tabular-nums; }
.advies-tip { font-size: .88rem; line-height: 1.6; color: #efe4e2; padding: .9rem 1rem; background: rgba(255, 255, 255, .07); border-radius: 10px; margin: 0; }
.advies.nieuw .advies-prijs { animation: tik .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tik { 0% { transform: scale(.94); opacity: .4; } 100% { transform: none; opacity: 1; } }
.kiezer-voet { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--zacht); }
.kiezer-voet a { color: var(--accent-tekst); text-underline-offset: 3px; }
@media (max-width: 900px) { .kiezer-binnen { grid-template-columns: 1fr; } .advies { position: relative; top: auto; max-width: 40rem; } }
@media (max-width: 520px) {
  .kz-wensen { grid-template-columns: 1fr; }
  .kz-keuze span { padding: .85rem .9rem; column-gap: .75rem; }
  .kz-tijd span { padding: .65rem .4rem; font-size: .9rem; }
  .kz-tijd .ico { display: none; }
  .advies { padding: 1.7rem 1.35rem 1.5rem; border-radius: 18px; }
  .advies-feiten { gap: 1.6rem; }
}
@media (max-width: 340px) { .advies-feiten { grid-template-columns: 1fr; gap: .8rem; } }

/* Er kan nog veel meer */
.kan-ook-blok { max-width: 76rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: 0 16px; }
.kan-kop { font: 400 1.6rem/1.2 var(--kop-letter); margin: 0; }
.kan-ook { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.kan-ook a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; height: 100%; padding: .95rem 1rem; border: 1px solid var(--lijn); border-radius: var(--rond-groot); background: var(--kaart); text-decoration: none; transition: border-color .25s, transform .25s, box-shadow .25s; }
.kan-ook a:hover { border-color: var(--accent-groot); }
.kan-ook .ico { width: 1.7rem; height: 1.7rem; stroke-width: 1.3; color: var(--accent-groot); transition: transform .3s; }
.kan-ook strong { display: block; font-size: .95rem; white-space: nowrap; }
.kan-ook small { display: block; font-size: .84rem; color: var(--zacht); line-height: 1.4; margin-top: .1rem; }
.kan-ook .kan-pijl { width: 1rem; height: 1rem; color: var(--accent-tekst); }
.kan-ook a:hover .kan-pijl { transform: translateX(3px); }
@media (max-width: 1000px) { .kan-ook { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kan-ook { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .kan-ook a { grid-template-columns: auto 1fr; gap: .75rem; padding: .9rem .85rem; } .kan-ook .kan-pijl { display: none; } .kan-ook strong { font-size: .9rem; } }

/* Werkwijze: oudroze rondjes met een dunne lijn ertussen (ontwerp 1 en 4) */
.werkwijze { background: var(--vlak); }
.stappen li::before { background: var(--knop); border-color: var(--knop); color: #fff; font-size: 1.35rem; }
.stappen li:hover::before { background: var(--donker); border-color: var(--donker); color: #fff; }
.stappen { --stappen-lijn: var(--lijn-sterk); }
.stappen h3 { font-size: 1.3rem; }
@media (min-width: 901px) {
  .stappen li:not(:last-child)::after { content: ""; position: absolute; top: 1.6rem; left: calc(50% + 2rem); width: calc(100% - 4rem + 1.6rem); border-top: 1px dashed var(--lijn-sterk); }
}

/* Net zo mooi op elke telefoon */
.op-telefoon { background: var(--achtergrond); }

/* Voorbeeldsites: kaarten met een lange schermafbeelding die bij aanwijzen of aanraken rustig naar beneden scrolt */
.voorbeelden { background: var(--vlak); }
.voorbeelden .kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-groot); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.voorbeelden .kaart:hover { border-color: var(--lijn-sterk); }
.voorbeelden .kaart-beeld { background: none; padding: 0; border-radius: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.voorbeelden .kaart-voet { display: none; }
.voorbeelden .kaart-tekst { padding: 1.1rem 1.2rem 1.2rem; }
.voorbeelden .kaart-beeld .scroll-beeld { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 0; transition: object-position 7s ease-in-out; }
.voorbeelden .kaart:hover .kaart-beeld .scroll-beeld, .voorbeelden .kaart:focus-visible .kaart-beeld .scroll-beeld, .voorbeelden .kaart:active .kaart-beeld .scroll-beeld { object-position: 50% 100%; transform: none; }

/* Prijzen en over mij */
.prijzen { background: var(--achtergrond); }
.prijskaart { box-shadow: 0 30px 60px -45px rgba(84, 46, 46, .4); }
.prijs-helft + .prijs-helft { border-left: 1px solid var(--lijn); padding-left: 3rem; margin-left: -1.5rem; }
@media (max-width: 760px) { .prijs-helft + .prijs-helft { border-left: 0; padding-left: 0; margin-left: 0; padding-top: 1.8rem; border-top: 1px solid var(--lijn); } }
.over-mij { background: var(--vlak); }
.over-mij-foto img { border-radius: 999px 999px var(--rond-groot) var(--rond-groot); }
@media (max-width: 760px) { .over-mij-foto img { border-radius: var(--rond-groot); } }
.vragen { background: var(--achtergrond); }

/* Slot: donkere band met een foto van de behandeltafel links (ontwerp 1; foto gekozen door Melissa 18 okt) */
.slot { position: relative; isolation: isolate; padding: 0; background: var(--donker); color: #fff; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.slot-foto { width: 100%; height: 100%; min-height: 24rem; object-fit: cover; object-position: 50% 50%; }
.slot-binnen { padding: clamp(3rem, 6vw, 5rem) clamp(16px, 5vw, 4.5rem); max-width: 40rem; }
.slot .label { color: var(--accent-op-donker); }
.slot h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.7rem); margin-bottom: .5rem; }
.slot h2 em { color: var(--accent-op-donker); }
.slot p { color: var(--op-donker); }
.slot .knoppen { margin: 1.5rem 0 1.2rem; }
.slot .knop-vol { background: var(--accent-op-donker); color: var(--inkt); }
.slot .knop-vol:hover { background: #f3cbc8; color: var(--inkt); }
.slot .knop-lijn { color: #fff; border-color: rgba(255, 255, 255, .7); }
.slot .knop-lijn:hover { background: #fff; color: var(--inkt); }
.slot-noot { font-size: .88rem; margin: 0; }
.slot-noot a { color: #fff; text-underline-offset: 3px; }
@media (max-width: 800px) {
  .slot { grid-template-columns: 1fr; }
  .slot-foto { min-height: 0; aspect-ratio: 16 / 9; }
  .slot-binnen { padding: 2.6rem 16px 3.4rem; }
  .slot .knop { flex: 1 1 100%; }
}

/* Voet */
.voet { background: #221a1c; }

/* Smalste telefoons: knoptekst en label op één regel */
@media (max-width: 360px) {
  .knop, .opening-beauty .knop { letter-spacing: .05em; padding-left: .8rem; padding-right: .8rem; }
  .label { letter-spacing: .12em; }
}