@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(letters/newsreader-italic-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(letters/newsreader-italic-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(letters/newsreader-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(letters/newsreader-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(letters/newsreader-normal-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(letters/newsreader-normal-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(letters/newsreader-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(letters/newsreader-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(letters/newsreader-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(letters/newsreader-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(letters/jost-normal-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(letters/jost-normal-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(letters/jost-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(letters/jost-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(letters/jost-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(letters/jost-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ══════════════════════════════════════════════════════════════════
   STUDIO THE BLISS · Neusiedl am See
   Kleuren komen letterlijk uit hun eigen stijlblad (app-e8ad583f.css):
   --green #586f62 · --middle-green #758279 · --light-green #98aea2
   --beige #e4d8c4 · --corall #e4847a · --dark-corall #dc625d
   Motief: de verticale kannelering van hun eigen ontvangstwand.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── HET ANKER: hun logo en hun lambrisering ─────────────────────
     Groen blijft, maar het draagt de site niet meer. Het is de rand,
     de voet, de navigatie: het merkteken. Niet de grond.               */
  --groen:#586f62;
  --groen-band:#495c51;
  --groen-diep:#3d4c44;
  --groen-nacht:#2b352f;
  --groen-mid:#758279;
  --groen-licht:#98aea2;
  --groen-was:#e8ede9;

  /* ── DE STEM: gemeten in hun eigen Instagram (25-08-2026) ─────────
     Zes berichten uitgeteld: 76% van de verzadigde pixels is warm
     (oranje/terracotta/goud), 14% is hemelsblauw, 0,7% is groen.
     De kleuren die zij er zélf overheen zetten — de letters, de
     stickers, de wimperposter — zijn goud #ffe990, abrikoos #fbba8e
     en hemelsblauw #96befa. Daar komt onderstaande reeks vandaan.
     Terracotta #dc625d is bovendien de meest gebruikte accentkleur
     op hun eigen site (24 keer, uit onderzoek/brand.json).           */
  --goud:#d99b1c;
  --goud-helder:#f2c447;
  --goud-zacht:#f7dd93;
  --goud-was:#fcf2d8;
  --abrikoos:#ef9c6c;
  --abrikoos-was:#fce4d4;
  --terra:#dc625d;
  --terra-diep:#a5342a;
  --terra-nacht:#7b4126;
  --kaneel:#8b6541;
  --kaneel-was:#f4e7db;
  --hemel:#8eb6e8;
  --hemel-was:#e6eff9;
  --hemel-diep:#3f6187;

  --zand:#e4d8c4;
  --zand-warm:#dac0a9;
  --klei:#bf977e;
  --creme:#f9f3e8;
  --creme-band:#f4ead6;
  --goud-band:#fbeaca;
  --papier:#fefaf3;
  --wit:#ffffff;
  --inkt:#241f1b;
  --inkt-zacht:#6a5a4c;
  --lijn:rgba(36,31,27,.16);
  --lijn-licht:rgba(255,255,255,.22);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --rand:clamp(20px,5vw,64px);
  --nav-h:74px;
  --ronding:18px;
  --ronding-klein:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

/* ── ritme ─────────────────────────────────────────────────────── */
.wrap{width:min(1440px,100% - 2*var(--rand));margin-inline:auto}
.wrap-smal{width:min(940px,100% - 2*var(--rand));margin-inline:auto}
.band{padding:clamp(64px,9vw,132px) 0;position:relative}
/* Direct onder een schermvullende hero is de volle bandruimte te veel lucht:
   je komt uit een beeld en wilt meteen weten waar je bent. */
.hero + .band{padding-top:clamp(40px,5.4vw,80px)}
.band-krap{padding:clamp(44px,6vw,80px) 0}
.b-papier{background:var(--papier)}
.b-creme{background:var(--creme-band)}
.b-zand{background:var(--zand)}
/* was een bleek saliegroen: nu de zonnige kant van hun kanaal */
.b-was{background:var(--groen-was)}
.b-goud{background:var(--goud-band)}
.b-abrikoos{background:var(--abrikoos-was)}
.b-hemel{background:var(--hemel-was)}
.b-kaneel{background:var(--kaneel-was)}
.b-groen{background:var(--groen-band);color:var(--creme)}
.b-diep{background:var(--groen-diep);color:var(--creme)}
.b-nacht{background:var(--groen-nacht);color:var(--creme)}
.b-klei{background:var(--klei);color:var(--inkt)}
.b-terra{background:var(--terra-nacht);color:var(--creme)}
.b-groen a:not(.knop),.b-diep a:not(.knop),.b-nacht a:not(.knop),.b-klei a:not(.knop),.b-terra a:not(.knop){color:inherit}
.b-klei .knop:not(.knop-lijn),.b-terra .knop:not(.knop-lijn){background:var(--goud-helder);color:var(--terra-nacht);border-color:var(--goud-helder)}
.b-klei .knop:not(.knop-lijn):hover,.b-terra .knop:not(.knop-lijn):hover{background:var(--goud-zacht);border-color:var(--goud-zacht);color:var(--terra-nacht)}
.b-groen .zacht,.b-diep .zacht,.b-nacht .zacht,.b-terra .zacht{color:rgba(255,255,255,.88)}
.b-klei .zacht{color:rgba(31,38,34,.9)}
.zacht{color:var(--inkt-zacht)}

/* ── kannelering: het motief van hun ontvangstwand ─────────────── */
.kannel{
  height:64px;
  background:repeating-linear-gradient(90deg,
    rgba(189,68,54,.26) 0 1px, transparent 1px 9px);
}
.b-groen .kannel,.b-diep .kannel,.b-nacht .kannel,.b-terra .kannel{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 1px,transparent 1px 9px);
}
.kannel-dun{height:26px}

/* ── typografie ────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.08;margin:0;letter-spacing:-.012em}
.reus{font-size:clamp(2.9rem,7.4vw,6.4rem);line-height:1.02}
.groot{font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.06}
.mid{font-size:clamp(1.5rem,2.5vw,2.35rem);line-height:1.14}
.klein{font-size:clamp(1.18rem,1.7vw,1.5rem);line-height:1.22}
.cursief{font-style:italic;font-weight:300}
.opschrift{
  font-family:var(--sans);font-weight:400;font-size:.75rem;
  letter-spacing:.26em;text-transform:uppercase;line-height:1.6;
  color:var(--terra-diep);display:block;margin-bottom:1.1rem;
}
.b-groen .opschrift,.b-diep .opschrift,.b-nacht .opschrift,.b-terra .opschrift{color:var(--goud-zacht)}
.b-klei .opschrift{color:rgba(31,38,34,.86)}
.lood{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.66;max-width:62ch}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.kop-blok{max-width:66ch;margin-bottom:clamp(34px,4.5vw,60px)}
.kop-blok.mid-uit{margin-inline:auto;text-align:center}

/* ── knoppen ───────────────────────────────────────────────────── */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:.9em 1.9em;border:1px solid var(--terra-diep);
  background:var(--terra-diep);color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:400;font-size:.78rem;
  letter-spacing:.19em;text-transform:uppercase;cursor:pointer;
  border-radius:999px;transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.knop:hover{background:var(--terra-nacht);border-color:var(--terra-nacht);transform:translateY(-2px)}
.knop-lijn{background:transparent;color:var(--terra-nacht);border-color:var(--terra-nacht)}
.knop-lijn:hover{background:var(--terra-nacht);color:#fff}
.knop-terra{background:var(--terra-diep);border-color:var(--terra-diep);color:#fff}
.knop-terra:hover{background:#c4534e;border-color:#c4534e}
.b-groen .knop,.b-diep .knop,.b-nacht .knop{background:var(--goud-helder);color:var(--groen-nacht);border-color:var(--goud-helder)}
.b-groen .knop:hover,.b-diep .knop:hover,.b-nacht .knop:hover{background:var(--goud-zacht);border-color:var(--goud-zacht);color:var(--groen-nacht)}
.b-klei .knop-lijn{color:var(--inkt);border-color:rgba(31,38,34,.6)}
.b-terra .knop-lijn{color:var(--goud-zacht);border-color:var(--goud-zacht);background:transparent}
.b-terra .knop-lijn:hover{background:var(--goud-zacht);color:var(--terra-nacht);border-color:var(--goud-zacht)}
.b-klei .knop-lijn:hover{background:var(--inkt);color:var(--klei);border-color:var(--inkt)}
.b-groen .knop-lijn,.b-diep .knop-lijn,.b-nacht .knop-lijn{background:transparent;color:var(--creme);border-color:rgba(255,255,255,.55)}
.b-groen .knop-lijn:hover,.b-diep .knop-lijn:hover,.b-nacht .knop-lijn:hover{background:var(--creme);color:var(--groen-nacht);border-color:var(--creme)}
.knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ── navigatie ─────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .35s ease,box-shadow .35s ease,border-color .35s;
  border-bottom:1px solid transparent;
}
.nav-in{display:flex;align-items:center;gap:22px;width:min(1440px,100% - 2*var(--rand));margin-inline:auto}
.merk{display:flex;align-items:center;gap:.62rem;text-decoration:none;margin-right:auto;flex-shrink:0}
.merk .m-the{font-family:var(--serif);font-style:italic;font-size:1.42rem;line-height:1;color:var(--groen)}
.merk .m-bliss{font-family:var(--sans);font-weight:300;letter-spacing:.20em;font-size:1.14rem;line-height:1}
.merk .m-studio{font-family:var(--sans);font-weight:300;letter-spacing:.34em;font-size:.56rem;display:block;margin-top:3px;color:var(--inkt-zacht)}
.nav a.n-link{
  text-decoration:none;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:400;position:relative;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;
}
.nav a.n-link::after{content:'';position:absolute;left:0;right:100%;bottom:11px;height:1px;background:currentColor;transition:right .35s ease}
.nav a.n-link:hover::after,.nav a.n-link[aria-current="page"]::after{right:0}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.nav .knop{min-height:44px;padding:.62em 1.35em;font-size:.7rem}

/* boven de hero: licht op donker */
.nav-top{background:transparent}
.nav-top .merk .m-the{color:#fff}
.nav-top .merk .m-bliss,.nav-top .merk .m-studio,.nav-top a.n-link{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.nav-top .knop{background:rgba(255,255,255,.94);color:var(--groen-nacht);border-color:rgba(255,255,255,.94)}
.nav-top::before{content:'';position:absolute;inset:0 0 -110px 0;background:linear-gradient(to bottom,rgba(24,30,26,.40) 0%,rgba(24,30,26,.20) 46%,rgba(24,30,26,0) 100%);pointer-events:none;z-index:-1}
/* gescrold: vaste ondoorzichtige balk */
.nav-vast{background:var(--papier);box-shadow:0 1px 24px rgba(31,38,34,.09);border-bottom-color:var(--lijn)}
.nav-vast .merk .m-the{color:var(--groen)}
.nav-vast .merk .m-bliss,.nav-vast a.n-link{color:var(--inkt);text-shadow:none}
.nav-vast .merk .m-studio{color:var(--inkt-zacht);text-shadow:none}
.nav-vast .knop{background:var(--groen-band);color:var(--creme);border-color:var(--groen-band)}

.hamburger{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.hamburger span{display:block;width:24px;height:1.4px;background:currentColor;position:relative;transition:transform .3s,opacity .3s}
.hamburger span::before,.hamburger span::after{content:'';position:absolute;left:0;width:24px;height:1.4px;background:currentColor;transition:transform .3s,opacity .3s}
.hamburger span::before{top:-7px}.hamburger span::after{top:7px}
.menu-open .hamburger span{background:transparent}
.menu-open .hamburger span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .hamburger span::after{transform:translateY(-7px) rotate(-45deg)}

/* ── hero ──────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(94svh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-beeld{position:absolute;inset:0;z-index:-2}
.hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:center 42%;animation:trage-zoom 22s ease-out forwards}
@keyframes trage-zoom{from{transform:scale(1.075)}to{transform:scale(1)}}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(24,32,27,.86) 0%,rgba(24,32,27,.72) 26%,rgba(24,32,27,.34) 56%,rgba(24,32,27,.12) 82%,rgba(24,32,27,.06) 100%),
    linear-gradient(to top,rgba(24,32,27,.62) 0%,rgba(24,32,27,.10) 34%,rgba(24,32,27,0) 62%,rgba(24,32,27,.30) 100%)}
.hero-in{width:min(1440px,100% - 2*var(--rand));margin-inline:auto;padding:clamp(80px,10vw,140px) 0 clamp(38px,5vw,64px);color:#fff;position:relative}
.hero-in > *{max-width:min(760px,86%)}
.hero-in > .hero-strook{max-width:min(880px,100%)}
.hero h1{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero .lood{color:rgba(255,255,255,.96);text-shadow:0 1px 22px rgba(0,0,0,.55)}
.hero .knop:not(.knop-lijn){background:var(--creme);color:var(--groen-nacht);border-color:var(--creme)}
.hero .knop:not(.knop-lijn):hover{background:#fff;border-color:#fff}
.hero .knop-lijn{background:rgba(22,29,24,.42);border-color:rgba(255,255,255,.86);color:#fff;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hero .knop-lijn:hover{background:#fff;color:var(--groen-nacht);border-color:#fff}
.hero .opschrift{text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero-strook b{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero-lood{margin-top:1.2rem;max-width:30ch}

/* De vijf werelden als symbool in plaats van als opsomming in een zin.
   Dat scheelt dertig woorden in de hero en je ziet in één oogopslag
   waarvoor je hier terecht kunt. */
.hero-werelden{list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,1vw,12px);
  max-width:600px}
.hero-werelden a{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 6px;text-decoration:none;color:#fff;text-align:center;
  border:1px solid rgba(255,255,255,.28);border-radius:12px;
  background:rgba(255,255,255,.07);backdrop-filter:blur(2px);
  transition:background .3s,border-color .3s,transform .3s}
.hero-werelden a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.hero-werelden .sym{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.hero-werelden span{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.6);line-height:1.25;hyphens:auto}
@media (max-width:520px){
  .hero-werelden{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-werelden li:nth-child(4){grid-column:1}
}

/* De strook eronder: symbool plus waarde, geen kop erboven meer. */
.hero-strook{
  display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,38px);margin-top:clamp(24px,3vw,40px);
  padding-top:20px;border-top:1px solid rgba(255,255,255,.28);
}
.hero-strook div,.hero-strook div > a{display:flex;align-items:center;gap:9px;
  color:#fff;text-decoration:none}
.hero-strook .sym{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.hero-strook span{font-size:.86rem;color:rgba(255,255,255,.82);white-space:nowrap}
.hero-strook b{font-weight:400;color:#fff}
.hero-strook div > a{min-height:44px}
/* kleine hero voor subpaginas; die beelden zijn lichter, dus een zwaardere sluier */
.hero-sub{min-height:min(62svh,520px)}

/* ── de hero op een telefoon ────────────────────────────────────────
   Een liggend beeld in een staand kader liet vooral leegte zien: de
   inhoud hing halverwege en de bovenste driehonderd pixels waren kale
   achtergrond. Op een telefoon staat de hero nu bijna schermvullend, de
   inhoud tegen de onderrand, en de sluier loopt van onderen op zodat de
   foto bovenin nog echt foto is. De staande uitsnedes zitten in de
   <picture>; dit is de indeling eromheen.                            */
@media (max-width:700px){
  .hero{min-height:88svh}
  /* De onderpagina's hebben een KORTE herotekst (277 tot 349 px). In een bak
     van 700 px die zijn inhoud onderaan uitlijnt, bleef daarboven 245 tot 317
     px leeg staan — gemeten, niet geschat. De bak is nu net zo hoog als hij
     moet zijn. .hero.hero-sub omdat .hero verderop nog een min-height zet. */
  .hero.hero-sub{min-height:min(64svh,540px)}
  .hero-in{padding-top:clamp(64px,18vh,150px);padding-bottom:clamp(30px,5vh,52px)}
  .hero-sub .hero-in{padding-top:clamp(72px,11vh,116px)}
  /* Duitse samenstellingen zijn lang; op 390 px moet de kop kleiner staan,
     anders breekt "Sonnenstudio" met een koppelteken doormidden. */
  .reus{font-size:clamp(2.1rem,8.6vw,2.9rem);line-height:1.08;hyphens:auto}
  /* het beeld schuift traag mee omhoog; dat geeft de hero leven zonder
     dat er iets beweegt waar je op wilt tikken */
  .hero-beeld img{object-position:center 38%;animation:trage-zoom 26s ease-out forwards}
}
.hero-sub::after{background:
  linear-gradient(to right,rgba(24,32,27,.90) 0%,rgba(24,32,27,.80) 32%,rgba(24,32,27,.46) 62%,rgba(24,32,27,.18) 88%,rgba(24,32,27,.10) 100%),
  linear-gradient(to top,rgba(24,32,27,.62) 0%,rgba(24,32,27,.14) 36%,rgba(24,32,27,0) 64%,rgba(24,32,27,.30) 100%)}
.hero-sub .hero-in{padding-top:clamp(120px,13vw,180px)}

/* Op een telefoon loopt de herotekst over de volle breedte, dus tot in het
   lichte deel van de foto. De zijwaartse sluier is daar te dun: op enthaarung
   haalde de inleiding 3,3 : 1 tegen de huid rechts. Op smalle schermen dus
   dieper, en over de hele breedte. Dit blok moet NA .hero-sub::after staan,
   anders wint die weer op de onderpagina's. */
/* Het uitklapmenu begint AL bij 1140 px, niet pas bij 900.
   Reden, nagemeten: de volledige balk — zeven links plus de knop Termin
   buchen — heeft ~1130 px nodig. Tussen 921 en 1130 px stond hij dus wél
   uitgeklapt maar liep hij het scherm uit, en `body{overflow-x:hidden}`
   knipte de knop er stilletjes af. Precies op 1024 px (iPad liggend) en op
   een half scherm van een laptop was de belangrijkste knop van de site
   onzichtbaar. De rest van de telefoonopmaak — de balk onderaan, de
   rasters, de leesmaat — blijft op 900 px staan; dit gaat alléén over de
   navigatie. */
/* Sinds Über uns (01-10-2026) telt het menu acht punten: tussen 1281 en 1440 px compacter, daaronder de hamburger. */
@media (min-width:1281px) and (max-width:1440px){
  .nav-links{gap:clamp(10px,1.1vw,18px)}
  .nav a.n-link{letter-spacing:.12em}
}
@media (max-width:1280px){
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--papier);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--rand) 22px;
    border-bottom:1px solid var(--lijn);box-shadow:0 14px 30px rgba(31,38,34,.12);
    transform:translateY(-118%);transition:transform .38s cubic-bezier(.22,.61,.36,1);
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
  }
  .menu-open .nav-links{transform:none}
  .nav-links a.n-link{color:var(--inkt)!important;text-shadow:none!important;padding:.95em 0;border-bottom:1px solid var(--lijn);font-size:.8rem}
  .nav-links a.n-link::after{display:none}
  .nav-links .knop{margin-top:14px;background:var(--groen-band)!important;color:var(--creme)!important;border-color:var(--groen-band)!important}
  .hamburger{display:flex}
  .nav-top .hamburger{color:#fff}
  .nav-vast .hamburger,.menu-open .hamburger{color:var(--inkt)}
}

@media (max-width:900px){
  .hero::after{background:
    linear-gradient(to right,rgba(24,32,27,.86) 0%,rgba(24,32,27,.74) 40%,rgba(24,32,27,.56) 100%),
    linear-gradient(to top,rgba(24,32,27,.42) 0%,rgba(24,32,27,.24) 55%,rgba(24,32,27,0) 100%)}
  .hero-sub::after{background:
    linear-gradient(to right,rgba(24,32,27,.90) 0%,rgba(24,32,27,.78) 40%,rgba(24,32,27,.60) 100%),
    linear-gradient(to top,rgba(24,32,27,.44) 0%,rgba(24,32,27,.26) 55%,rgba(24,32,27,0) 100%)}
}

/* Op de telefoon loopt de tekst over de volle breedte, dus een sluier van
   links naar rechts helpt daar niets: hij maakt alleen de hele foto donker,
   ook de bovenste driehonderd pixels waar geen letter staat. Daar draagt
   een sluier van ONDER naar boven het contrast. Dit blok staat bewust na
   het 900px-blok hierboven, anders wint dat weer. */
@media (max-width:700px){
  /* Twee lagen. De bovenste is een smalle band langs de KOPRAND: daar staat
     het woordmerk, en sinds de sluier daaronder open is stond dat op wimpern
     op 4,19 en op koerper op 2,94 tegen de eis van 4,5 — gemeten op de echte
     pixels. De band is na 152 px weg, dus de foto blijft foto. De onderste
     laag draagt de herotekst zelf. */
  .hero::after,.hero-sub::after{background:
    linear-gradient(to bottom,
      rgba(24,32,27,.52) 0,
      rgba(24,32,27,.30) 70px,
      rgba(24,32,27,0) 152px),
    linear-gradient(to top,
      rgba(24,32,27,.93) 0%,
      rgba(24,32,27,.86) 26%,
      rgba(24,32,27,.52) 50%,
      rgba(24,32,27,.20) 72%,
      rgba(24,32,27,.10) 100%)}
}

/* Eén hero staat op een LICHTE foto: de close-up van het oog op wimpern is
   voorhoofd en haar, geen donkere studio. Gemeten met pixelcontrast.js —
   dat verbergt de tekst, fotografeert wat eronder ligt en meet tegen de
   echte pixels — haalde het bovenschrift daar 2,77 : 1 en de ondertitel in
   de kop 4,29 : 1. Een sluier die past bij een donkere foto past niet bij
   een lichte, dus krijgt deze hero een diepere. Het beeld is liggend en
   maar 690 px hoog, dus de uitsnede naar beneden schuiven kan niet: er
   ZIT geen donkerder stuk in het kader.                               */
@media (max-width:700px){
  .hero-diep::after{background:
    linear-gradient(to bottom,
      rgba(24,32,27,.52) 0,
      rgba(24,32,27,.30) 70px,
      rgba(24,32,27,0) 152px),
    linear-gradient(to top,
      rgba(24,32,27,.94) 0%,
      rgba(24,32,27,.88) 28%,
      rgba(24,32,27,.74) 52%,
      rgba(24,32,27,.58) 74%,
      rgba(24,32,27,.30) 100%)}
}

/* ── verschijnen (IntersectionObserver, met veiligheidsklep) ───── */
/* Alleen verborgen als JavaScript draait (de kop zet .js); zonder script staat alles er. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.js .rv.aan{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none}
  .hero-beeld img{animation:none}
  html{scroll-behavior:auto}
}

/* ── roosters ──────────────────────────────────────────────────── */
.rooster{display:grid;gap:clamp(18px,2.4vw,34px)}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,72px);align-items:center}
.duo-breed{grid-template-columns:1.15fr .85fr}
.duo-smal{grid-template-columns:.85fr 1.15fr}

/* ── beeld ─────────────────────────────────────────────────────── */
.fig{margin:0;position:relative;overflow:hidden;background:var(--groen-was);border-radius:var(--ronding)}
/* een boog: rond boven, recht onder — de vorm van hun spiegel en hun nis */
.fig-boog{border-radius:999px 999px 26px 26px}
.fig-boog-vol{border-radius:999px}
/* een zachte, iets onregelmatige vorm voor sfeerbeeld */
.fig-zacht{border-radius:58% 42% 47% 53% / 46% 44% 56% 54%}
.fig-rond{border-radius:50%}
.fig-r{border-radius:var(--ronding)}
/* een beeld dat bovenaan een kaart doorloopt: enkel boven rond */
.fig-kaartkop{border-radius:var(--ronding) var(--ronding) 0 0;
  margin:calc(-1*clamp(22px,2.5vw,32px)) calc(-1*clamp(22px,2.5vw,32px)) clamp(18px,2vw,24px)}
.wereld .fig{border-radius:inherit}

.wereld-tekst .pijl{width:100%;justify-content:flex-start}

.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.fig-4x5{aspect-ratio:4/5}
.fig-1x1{aspect-ratio:1/1}
.fig-3x2{aspect-ratio:3/2}
.fig-16x9{aspect-ratio:16/9}
.fig-2x3{aspect-ratio:2/3}
.fig figcaption{font-size:.78rem;letter-spacing:.06em;color:var(--inkt-zacht);padding-top:10px;line-height:1.5}
.b-groen .fig figcaption,.b-diep .fig figcaption,.b-nacht .fig figcaption{color:rgba(255,255,255,.72)}

/* ── wereldkaarten (de vijf diensten) ──────────────────────────── */
.wereld{position:relative;display:block;text-decoration:none;overflow:hidden;background:var(--groen-nacht);
  border-radius:999px 999px var(--ronding) var(--ronding)}
.wereld .fig{aspect-ratio:3/4}
.wereld img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1);filter:brightness(.78) saturate(1.16)}
.wereld:hover img,.wereld:focus-visible img{transform:scale(1.055)}
.wereld-tekst{position:absolute;inset:auto 0 0 0;padding:clamp(20px,2.4vw,30px);color:#fff;border-radius:inherit;
  padding-top:clamp(46px,7vw,86px);
  background:linear-gradient(to top,rgba(24,30,26,.94) 0%,rgba(24,30,26,.80) 42%,rgba(24,30,26,.54) 74%,rgba(24,30,26,0) 100%)}
.wereld-tekst h3{color:#fff;font-size:clamp(1.35rem,2vw,1.75rem)}
.wereld-tekst p{font-size:.9rem;color:rgba(255,255,255,.95);margin:.5rem 0 0;line-height:1.5}
.wereld-tekst .pijl{display:inline-flex;align-items:center;gap:.45em;margin-top:.9rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud-helder)}
.wereld::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}

/* ── kaart ─────────────────────────────────────────────────────── */
.kaart{background:var(--wit);border:0;border-radius:var(--ronding);padding:clamp(26px,3vw,38px);
  display:flex;flex-direction:column;height:100%;box-shadow:0 2px 4px rgba(36,31,27,.03),0 12px 34px rgba(36,31,27,.06)}
.kaart h3{font-size:1.3rem;margin-bottom:.55rem}
.kaart p{font-size:.94rem;line-height:1.62;color:var(--inkt-zacht)}
.kaart .kaart-voet{margin-top:auto;padding-top:1.1rem}
.kaart .kaart-voet{flex-wrap:wrap;row-gap:.5rem}
.kaart-voet .beh-prijs,.kaart-voet .beh-duur{white-space:nowrap}
/* Elke dienstenkaart, op elke pagina, dezelfde voet: prijs links, duur rechts,
   en een lijn erboven die de voet van de tekst scheidt. Stond eerder als
   inline-stijl op alleen de kosmetik-pagina — vandaar dat elke pagina er
   anders uitzag.                                                          */
.dienst-voet{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--lijn)}
.dienst-voet .knop,.dienst-voet .beh-boek{width:100%}
.dienst-knop{width:100%;margin-top:.9rem}
.b-groen .dienst-voet,.b-diep .dienst-voet,.b-nacht .dienst-voet{border-top-color:rgba(255,255,255,.16)}
.dienst-label{margin-bottom:.7rem}

/* ── het dienstenrooster, dat op een telefoon een draaier wordt ──────
   Op een breed scherm is dit gewoon een rooster: de baan is een grid, de
   pijlen en stippen staan uit en site.js raakt hem niet aan (die kijkt naar
   data-draaier-smal). Onder 720 px wordt het één kaart per keer, met veeg,
   pijlen en stippen — dezelfde draaier als bij de beoordelingen. Dat scheelt
   op kosmetik vier schermen scrollen.                                     */
.draaier.dienst-draaier{display:block;max-width:none;margin-top:clamp(24px,3vw,40px)}
.dienst-draaier .dr-venster{overflow:visible}
.dienst-draaier .dr-baan{display:grid;gap:clamp(18px,2.4vw,34px);transition:none}
.dd-r3 .dr-baan{grid-template-columns:repeat(3,1fr)}
.dd-r2 .dr-baan{grid-template-columns:repeat(2,1fr)}
.dienst-draaier .dr-blad{padding:0;min-width:0}
.dienst-draaier .dr-blad > .wereld,.dienst-draaier .dr-blad > .kaart{height:100%}
.dienst-draaier .dr-baan{touch-action:pan-y}
@media (max-width:720px){.dienst-draaier .dr-blad > .kaart,.dienst-draaier .dr-blad > .wereld{min-height:100%}}
.dienst-draaier .dr-pijl,.dienst-draaier .dr-stippen{display:none}

@media (max-width:1080px){
  .dd-r3 .dr-baan{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .draaier.dienst-draaier{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
    --dd-gat:clamp(12px,3vw,18px)}
  .dienst-draaier .dr-venster{overflow:hidden;grid-column:1/-1;grid-row:1}
  .dienst-draaier .dr-baan{display:flex;gap:var(--dd-gat);
    transition:transform .62s cubic-bezier(.22,.61,.36,1)}
  .dd-r3 .dr-baan,.dd-r2 .dr-baan{grid-template-columns:none}
  .dienst-blad{flex:0 0 100%}
  /* de draaier staat uit zodra het venster weer breed wordt */
  .dienst-draaier.dr-uit .dr-baan{transform:none!important}
  .dienst-draaier .dr-pijl{display:grid;position:absolute;bottom:0;z-index:2;width:44px;height:44px}
  .dienst-draaier .dr-vorig{left:0}
  .dienst-draaier .dr-volgend{right:0}
  .dienst-draaier .dr-stippen{display:flex;grid-row:2;padding-inline:52px;align-items:center;
    flex-wrap:wrap}
  .dienst-draaier.dr-enkel .dr-pijl,.dienst-draaier.dr-enkel .dr-stippen,
  .dienst-draaier.dr-uit .dr-pijl,.dienst-draaier.dr-uit .dr-stippen{display:none}
  .dienst-draaier .dr-stippen{flex-wrap:nowrap;justify-content:center}
}
.kaart.dienst h3{font-size:1.22rem}
.b-groen .kaart,.b-diep .kaart,.b-nacht .kaart{background:rgba(255,255,255,.07);border:0;box-shadow:none;color:var(--creme)}
.b-groen .kaart p,.b-diep .kaart p,.b-nacht .kaart p{color:rgba(255,255,255,.80)}

/* ── prijsregels ───────────────────────────────────────────────── */
.prijsgroep{margin-bottom:clamp(30px,4vw,52px)}
.prijsgroep > h3{font-size:1.15rem;letter-spacing:.02em;padding-bottom:.7rem;border-bottom:1px solid var(--groen);margin-bottom:.3rem}
.prijsgroep > .groep-sub{font-size:.88rem;color:var(--inkt-zacht);margin:.55rem 0 .2rem}
.b-groen .prijsgroep > h3,.b-diep .prijsgroep > h3{border-bottom-color:rgba(255,255,255,.4)}
.b-groen .prijsgroep > .groep-sub,.b-diep .prijsgroep > .groep-sub{color:rgba(255,255,255,.75)}
.prijsregel{display:flex;align-items:baseline;gap:.85rem;padding:.82rem 0;border-bottom:1px solid var(--lijn)}
/* Een prijsregel die je kunt aantikken. Blijft er hetzelfde uitzien — het
   is een prijslijst, geen rij knoppen — maar hij is wél een knop: volle
   breedte, links uitgelijnd, minstens 44 px hoog, en met het woord
   'buchen' dat op een muisapparaat verschijnt en op een aanraakscherm
   altijd staat (daar is geen hover om het mee te verklappen). */
button.prijsregel{width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--lijn);font:inherit;color:inherit;cursor:pointer;
  min-height:46px;border-radius:6px;transition:background .25s}
button.prijsregel:hover,button.prijsregel:focus-visible{background:rgba(73,92,81,.07)}
.b-groen button.prijsregel:hover,.b-diep button.prijsregel:hover,
.b-groen button.prijsregel:focus-visible,.b-diep button.prijsregel:focus-visible{background:rgba(255,255,255,.08)}
.pr-boek-t{flex:0 0 auto;order:9;margin-left:.55rem;display:inline-flex;align-items:center;
  color:var(--terra-diep);opacity:.4;transition:opacity .25s,transform .25s}
.pr-boek-t .sym{width:15px;height:15px;stroke-width:1.7}
button.prijsregel:hover .pr-boek-t,button.prijsregel:focus-visible .pr-boek-t{opacity:1;transform:translateX(2px)}
.b-groen .pr-boek-t,.b-diep .pr-boek-t,.b-nacht .pr-boek-t{color:var(--goud-helder)}
@media (hover:none) and (pointer:coarse){ .pr-boek-t{opacity:.6} }
.b-groen .prijsregel,.b-diep .prijsregel,.b-nacht .prijsregel{border-bottom-color:rgba(255,255,255,.17)}
.prijsregel .pr-naam{flex:1 1 auto;min-width:0}
.prijsregel .pr-naam b{font-weight:400;font-size:1rem;display:block}
.prijsregel .pr-naam small{display:block;font-size:.82rem;color:var(--inkt-zacht);line-height:1.5;margin-top:2px}
.b-groen .prijsregel .pr-naam small,.b-diep .prijsregel .pr-naam small{color:rgba(255,255,255,.72)}
.prijsregel .pr-stip{flex:1 1 auto;border-bottom:1px dotted var(--lijn);transform:translateY(-4px);min-width:16px}
.prijsregel .pr-prijs{flex:0 0 auto;font-family:var(--serif);font-size:1.16rem;white-space:nowrap}
.prijsregel .pr-duur{flex:0 0 auto;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);white-space:nowrap}
.b-groen .prijsregel .pr-duur,.b-diep .prijsregel .pr-duur{color:rgba(255,255,255,.7)}

/* ── doelkiezer (het handgebaar van de site) ───────────────────── */
.doelen{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,3.6vw,48px)}
.doel{
  /* --groen haalt op de zandband maar 3,86:1. --groen-band haalt 5,09:1
     en leest op elke bandkleur die wij gebruiken ruim boven de 4,5. */
  border:1px solid var(--groen-band);background:transparent;color:var(--groen-band);
  padding:.72em 1.25em;min-height:46px;border-radius:100px;cursor:pointer;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400;
  transition:background .3s,color .3s,transform .3s;
}
.doel:hover{transform:translateY(-2px)}
.doel[aria-pressed="true"]{background:var(--terra-diep);color:#fff;border-color:var(--terra-diep)}
.doel-uitleg{min-height:2.6em;font-style:italic;font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.42rem);color:var(--groen-band);margin-bottom:1.6rem;line-height:1.35}
.doel-teller{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:1.4rem;display:block}
/* De doelkaarten zijn gewone dienstenkaarten; het enige eigene is dat ze
   binnenkomen zodra je een behandelingsdoel kiest. */
.beh-kaart{animation:zacht-in .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes zacht-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.beh-kaart h4{font-size:1.16rem;line-height:1.2;margin-bottom:.5rem}
.beh-kaart .beh-tekst{font-size:.9rem;line-height:1.6;color:var(--inkt-zacht);margin-bottom:1.15rem}
.beh-kaart .beh-voet{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:.9rem;border-top:1px solid var(--lijn)}
.beh-kaart .beh-prijs{display:inline-flex;align-items:center;gap:.4em;font-family:var(--serif);font-size:1.35rem;line-height:1}
.beh-kaart .beh-duur{display:inline-flex;align-items:center;gap:.4em;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);line-height:1}
.beh-kaart .beh-prijs .sym{width:.95em;height:.95em;color:var(--terra-diep)}
.beh-kaart .beh-duur .sym{width:1.3em;height:1.3em}

/* prijs, duur en kaarttitel met hun symbool ernaast */
.kaart-voet .beh-prijs{display:inline-flex;align-items:center;gap:.45em;font-family:var(--serif);font-size:1.3rem;line-height:1}
.kaart-voet .beh-duur{display:inline-flex;align-items:center;gap:.45em;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);line-height:1}
.kaart-voet .beh-prijs .sym{width:1.05em;height:1.05em;color:var(--terra-diep)}
.kaart-voet .beh-duur .sym{width:1.25em;height:1.25em;color:var(--inkt-zacht)}
.kop-sym{display:flex;align-items:center;gap:.55em}
.kop-sym .sym{flex:0 0 auto;width:1.5rem;height:1.5rem;stroke-width:1.3;color:var(--terra-diep)}
.kaart-boog{border-radius:999px 999px var(--ronding) var(--ronding);padding-top:clamp(60px,7vw,96px)}
.p9-sym{display:block;margin-bottom:.7rem}
.p9-sym .sym{width:30px;height:30px;stroke-width:1.25;color:var(--goud-helder)}
.opschrift-sym{display:inline-flex;align-items:center;gap:.5em}
.opschrift-sym .sym{width:1.35em;height:1.35em;stroke-width:1.3;color:var(--terra-diep)}
.b-groen .kop-sym .sym,.b-diep .kop-sym .sym{color:var(--goud-helder)}
.beh-boek{margin-top:1rem;align-self:flex-start;background:none;border:0;cursor:pointer;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--groen);
  min-height:44px;display:inline-flex;align-items:center;padding:0}
.beh-boek span,.beh-boek::before{content:''}
.beh-boek{position:relative}
.beh-boek::after{content:'';position:absolute;left:0;right:0;bottom:12px;height:1px;background:currentColor}
.leeg-melding{padding:2rem 0;font-style:italic;font-family:var(--serif);font-size:1.2rem;color:var(--inkt-zacht)}

/* ── vergelijker haarverwijdering ──────────────────────────────── */
.verg{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,60px);align-items:start}
.zone-lijst{max-height:430px;overflow-y:auto;border:1px solid var(--lijn);background:var(--wit)}
.b-groen .zone-lijst,.b-diep .zone-lijst{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.zone-knop{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--lijn);
  padding:.82em 1.15em;min-height:46px;cursor:pointer;font-size:.94rem;transition:background .25s,padding-left .25s}
.b-groen .zone-knop,.b-diep .zone-knop{border-bottom-color:rgba(255,255,255,.15)}
.zone-knop:hover{background:var(--groen-was);padding-left:1.5em}
.b-groen .zone-knop:hover,.b-diep .zone-knop:hover{background:rgba(255,255,255,.1)}
.zone-knop[aria-pressed="true"]{background:var(--groen-band);color:var(--creme)}
.zone-kop{padding:.7em 1.15em;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--inkt-zacht);background:var(--creme);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:2}
.b-groen .zone-kop,.b-diep .zone-kop{background:var(--groen-nacht);color:rgba(255,255,255,.8);border-bottom-color:rgba(255,255,255,.18)}
.verg-uit{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.verg-vak{border:1px solid var(--lijn);background:var(--wit);padding:clamp(16px,1.8vw,24px);text-align:center;animation:zacht-in .45s both}
.b-groen .verg-vak,.b-diep .verg-vak{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.verg-vak .v-naam{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--inkt-zacht);display:block;margin-bottom:.7rem}
.b-groen .verg-vak .v-naam,.b-diep .verg-vak .v-naam{color:rgba(255,255,255,.75)}
.verg-vak .v-prijs{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;display:block}
.verg-vak .v-noot{font-size:.78rem;color:var(--inkt-zacht);margin-top:.6rem;line-height:1.45;display:block}
.b-groen .verg-vak .v-noot,.b-diep .verg-vak .v-noot{color:rgba(255,255,255,.72)}
.verg-vak.leeg .v-prijs{font-size:1.25rem;color:var(--inkt-zacht)}

/* ── afsprakenmodule: vier stappen, één vraag per scherm ─────────── */
/* De module is een LICHTE kaart die in een DONKERE band staat. Regels als
   `.b-groen .opschrift{color:goud-zacht}` en `.b-groen .knop{...}` zijn
   twee klassen zwaar en winnen dus van `.opschrift` en `.knop`; zonder de
   regels hieronder kleurt de band de binnenkant van de kaart mee en staat
   er bleek goud op bleek goud. Alles binnen .bk gedraagt zich als lichte
   grond, ongeacht in welke band de kaart hangt.                         */
.bk .opschrift{color:var(--terra-diep)}
.bk .zacht{color:var(--inkt-zacht)}
.bk .knop:not(.knop-lijn){background:var(--terra-diep);color:#fff;border-color:var(--terra-diep)}
.bk .knop:not(.knop-lijn):hover{background:var(--terra-nacht);border-color:var(--terra-nacht);color:#fff}
.bk .knop-lijn{background:transparent;color:var(--terra-nacht);border-color:var(--terra-nacht)}
.bk .knop-lijn:hover{background:var(--terra-nacht);color:#fff;border-color:var(--terra-nacht)}
.bk a:not(.knop){color:var(--terra-diep)}

.bk{background:var(--papier);color:var(--inkt);border:1px solid var(--lijn);border-radius:3px;
  box-shadow:0 24px 60px rgba(36,31,27,.13);overflow:hidden}

/* het pad bovenaan: waar sta ik, en wat komt er nog */
.bk-pad{display:flex;list-style:none;margin:0;padding:0;background:var(--goud-was);border-bottom:1px solid var(--lijn)}
.bk-stap{flex:1;display:flex;align-items:center;justify-content:center;gap:.55em;
  padding:.95em .4em;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--inkt-zacht);position:relative;min-height:52px}
.bk-stap + .bk-stap::before{content:'';position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--lijn)}
.bk-bol{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  border:1px solid currentColor;font-size:.7rem;letter-spacing:0}
.bk-stap.is-nu{color:var(--terra-diep);background:var(--wit);font-weight:400}
.bk-stap.is-nu .bk-bol{background:var(--terra-diep);border-color:var(--terra-diep);color:#fff}
.bk-stap.is-af{color:var(--groen-band);cursor:pointer}
.bk-stap.is-af .bk-bol{background:var(--groen-band);border-color:var(--groen-band);color:#fff}
.bk-stap.is-af:hover{background:rgba(73,92,81,.07)}
.bk-stap.is-straks{opacity:.5}
@media (max-width:640px){ .bk-naam{display:none} .bk-stap{padding:.9em .3em} }

.bk-vak{padding:clamp(22px,3.2vw,46px)}
.bk-kop h3{font-size:clamp(1.5rem,2.7vw,2.2rem);margin-bottom:.45rem}
.bk-sub{color:var(--inkt-zacht);font-size:.98rem;margin-bottom:clamp(20px,2.6vw,32px);max-width:60ch}
.bk-laad,.bk-leeg{color:var(--inkt-zacht);font-size:.94rem;padding:1.1em 0}

/* stap 1 — afdeling en behandeling */
.bk-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px,2.2vw,26px)}
.bk-tab{border:1px solid var(--lijn);background:var(--wit);border-radius:999px;cursor:pointer;
  padding:.62em 1.15em;min-height:44px;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  transition:background .25s,color .25s,border-color .25s}
.bk-tab:hover{border-color:var(--terra-diep);color:var(--terra-diep)}
.bk-tab[aria-selected="true"]{background:var(--terra-diep);border-color:var(--terra-diep);color:#fff}
.bk-lijst{display:grid;gap:9px;max-height:min(58vh,520px);overflow-y:auto;padding-right:4px}
.bk-kaart{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;width:100%;text-align:left;
  border:1px solid var(--lijn);background:var(--wit);border-radius:3px;cursor:pointer;
  padding:.95em 1.15em;min-height:60px;transition:border-color .2s,transform .2s,box-shadow .2s}
.bk-kaart:hover{border-color:var(--terra);transform:translateX(3px);box-shadow:0 6px 20px rgba(36,31,27,.09)}
.bk-k-n{font-size:.99rem;line-height:1.42}
.bk-k-m{text-align:right;flex-shrink:0;line-height:1.35}
.bk-k-m b{font-family:var(--serif);font-weight:300;font-size:1.2rem;display:block;color:var(--terra-nacht)}
.bk-k-m .bk-opaanvraag{font-family:var(--sans);font-size:.78rem;color:var(--inkt-zacht)}
.bk-k-d{display:block;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--inkt-zacht)}

/* wat er al gekozen is — altijd zichtbaar, altijd te wijzigen */
.bk-keuze{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:3px;
  margin-bottom:clamp(20px,2.6vw,30px);overflow:hidden}
.bk-regel{display:flex;align-items:center;gap:1rem;width:100%;text-align:left;border:0;cursor:pointer;
  background:var(--goud-was);padding:.85em 1.1em;min-height:52px}
.bk-regel:hover{background:var(--abrikoos-was)}
.bk-lbl{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--inkt-zacht);width:8.5em;flex-shrink:0}
.bk-w{flex:1;font-size:.95rem;line-height:1.4}
.bk-wijz{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--terra-diep);flex-shrink:0}

/* stap 2 — de week, en de uren per dagdeel */
.bk-week{display:flex;align-items:center;gap:8px}
.bk-pijl{border:1px solid var(--lijn);background:var(--wit);cursor:pointer;width:44px;height:44px;
  border-radius:3px;font-size:1.3rem;line-height:1;color:var(--terra-nacht);flex-shrink:0}
.bk-pijl:hover{border-color:var(--terra-diep);background:var(--abrikoos-was)}
.bk-dagen{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
@media (max-width:700px){ .bk-dagen{grid-template-columns:repeat(4,1fr)} }
.bk-dag{border:1px solid var(--lijn);background:var(--wit);border-radius:3px;cursor:pointer;
  padding:.6em .3em;min-height:84px;display:grid;align-content:center;gap:1px;transition:all .2s}
.bk-dag:hover:not(:disabled){border-color:var(--terra);transform:translateY(-2px)}
.bk-dag:disabled{opacity:.36;cursor:not-allowed}
.bk-dag.is-aan{background:var(--terra-diep);border-color:var(--terra-diep);color:#fff}
.bk-d-wd{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--inkt-zacht)}
.bk-d-nr{font-family:var(--serif);font-size:1.38rem;line-height:1.1}
.bk-d-mnd{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht)}
.bk-d-vrij{font-size:.6rem;letter-spacing:.06em;color:var(--groen-band);margin-top:2px}
.bk-dag.is-aan .bk-d-wd,.bk-dag.is-aan .bk-d-mnd,.bk-dag.is-aan .bk-d-vrij{color:rgba(255,255,255,.86)}
.bk-uren{margin-top:clamp(18px,2.4vw,26px);display:grid;gap:1.1rem}
.bk-dd-n{display:block;font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:.6rem}
.bk-tijden{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.bk-uur{border:1px solid var(--lijn);background:var(--wit);min-height:46px;border-radius:3px;cursor:pointer;
  font-size:.92rem;transition:all .18s}
.bk-uur:hover{border-color:var(--terra);transform:translateY(-2px)}
.bk-uur.is-aan{background:var(--terra-diep);border-color:var(--terra-diep);color:#fff}

/* stap 3 — gegevens */
.bk-velden{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){ .bk-velden{grid-template-columns:1fr} }
.bk-breed{grid-column:1/-1}
.bk-veld{display:block}
.bk-veld > span{display:block;font-size:.67rem;letter-spacing:.19em;text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:.42rem}
.bk-veld > span i{font-style:normal;letter-spacing:.06em;text-transform:none;opacity:.75}
.bk-veld input,.bk-veld textarea{width:100%;border:1px solid var(--lijn);background:var(--wit);
  border-radius:3px;padding:.78em .9em;min-height:50px;font-size:.98rem}
.bk-veld input:focus,.bk-veld textarea:focus{outline:2px solid var(--terra);outline-offset:1px;border-color:var(--terra)}
/* Toetsenbord: waar de aandacht staat moet zichtbaar zijn. Op de donkere
   banden zou terracotta wegvallen, daar wordt de rand creme. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--terra);outline-offset:3px;border-radius:4px}
.b-groen a:focus-visible,.b-groen button:focus-visible,
.b-diep a:focus-visible,.b-diep button:focus-visible,
.b-nacht a:focus-visible,.b-nacht button:focus-visible,
.b-terra a:focus-visible,.b-terra button:focus-visible,
.hero a:focus-visible,.hero button:focus-visible,
.voet a:focus-visible,.voet button:focus-visible{outline-color:var(--creme)}
.bk-veld textarea{min-height:96px;resize:vertical}

/* stap 4 — de bon, de aanbetaling, de kassa */
.bk-bon{border:1px solid var(--lijn);border-radius:3px;overflow:hidden;background:var(--wit)}
.bk-bon-r{display:flex;gap:1rem;padding:.85em 1.1em;border-bottom:1px solid var(--lijn);font-size:.96rem}
.bk-bon-r:last-child{border-bottom:0}
.bk-bon-r span{width:9em;flex-shrink:0;font-size:.67rem;letter-spacing:.19em;text-transform:uppercase;color:var(--inkt-zacht);padding-top:.28em}
.bk-bon-r b{font-weight:400;line-height:1.45}
.bk-betaal{margin-top:clamp(18px,2.4vw,26px);border:1px solid var(--lijn);border-radius:3px;
  background:var(--goud-was);padding:clamp(16px,2.2vw,24px)}
.bk-b-kop p{font-size:.94rem;line-height:1.6;color:var(--inkt);margin:0 0 1.1rem}
.bk-b-kop b{font-weight:400;color:var(--terra-nacht)}
.bk-kaart-form{display:grid;gap:12px;max-width:420px}
.bk-kaart-rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bk-testnoot{font-size:.82rem;line-height:1.6;color:var(--inkt-zacht);background:var(--wit);
  border-left:3px solid var(--goud);padding:.8em 1em;border-radius:2px;margin:.2rem 0 0}
.bk-testnoot b{color:var(--terra-nacht);font-weight:400}
.bk-gratis{background:var(--goud-was);border-left:3px solid var(--goud);padding:.9em 1.1em;
  font-size:.95rem;margin-top:1.2rem;border-radius:2px}

/* ── het terminbuch van het studio zelf (Phorest) ─────────────────
   Onze eigen deur ervoor, hun systeem erachter. Het venster laadt pas
   op vraag, zodat er geen cookies van een derde binnenkomen voor de
   bezoeker daar zelf om vraagt.                                     */
.pho{background:var(--papier);border-radius:var(--ronding);overflow:hidden;
  box-shadow:0 2px 4px rgba(36,31,27,.04),0 18px 44px rgba(36,31,27,.10)}
.pho-in{padding:clamp(26px,3.4vw,44px)}
.pho-kop{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;margin:0}
.pho-tekst{margin:.7rem 0 0;color:var(--inkt-zacht);font-size:1rem;line-height:1.6;max-width:52ch}
.pho-rust{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.pho-rust li{display:flex;align-items:flex-start;gap:.7em;font-size:.94rem;line-height:1.5}
.pho-rust .sym{flex:0 0 auto;width:1.25em;height:1.25em;margin-top:.15em;color:var(--terra-diep)}
.pho-knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.pho-klein{margin:1.3rem 0 0;font-size:.8rem;line-height:1.55;color:var(--inkt-zacht);max-width:60ch}
.pho-klein a{color:var(--terra-diep)}
.pho-host{white-space:nowrap}
.pho-hint{margin:0 0 1.1rem;padding:.8em 1em;border-radius:var(--ronding-klein);
  background:var(--goud-was);border-left:3px solid var(--goud);font-size:.92rem;line-height:1.5}
.pho-hint-let{background:var(--hemel-was);border-left-color:var(--hemel-diep)}
.pho-hint[hidden]{display:none}
.pho-balk{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85em clamp(16px,2vw,24px);background:var(--groen-band);color:#fff;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.pho-balk a{color:var(--goud-helder)}
.pho .pho-hint{margin:clamp(16px,2vw,24px) clamp(16px,2vw,24px) 0}
.pho-raam{display:block;width:100%;border:0;background:#fff;
  height:clamp(640px,80vh,940px)}
/* het paneel is licht, ook op een donkere band: anders lekt de
   bandkleur naar binnen en staat crème op crème (1,02 : 1) */
.pho, .pho p, .pho li, .pho h3, .pho span{color:var(--inkt)}
.pho .pho-tekst, .pho .pho-klein, .pho .pho-rust li{color:var(--inkt-zacht)}
.pho .pho-rust li span{color:var(--inkt-zacht)}
.pho .knop:not(.knop-lijn){background:var(--terra-diep);color:#fff;border-color:var(--terra-diep)}
.pho .knop-lijn{background:transparent;color:var(--terra-nacht);border-color:var(--terra-nacht)}
.pho .pho-balk,.pho .pho-balk span{color:#fff}
.pho .pho-balk a{color:var(--goud-helder)}
@media (max-width:700px){ .pho-raam{height:min(88vh,760px)} }

/* ── de kassa: links betalen, rechts een bon die blijft staan ────── */
.sym{width:1.15em;height:1.15em;flex-shrink:0;vertical-align:-.18em;fill:none;stroke:currentColor}
.sym-bron{position:absolute;width:0;height:0;overflow:hidden}
.kassa{display:grid;grid-template-columns:1fr 340px;gap:clamp(20px,2.6vw,34px);align-items:start}
@media (max-width:860px){ .kassa{grid-template-columns:1fr} }
.kassa-links{display:grid;gap:14px;min-width:0}
.kassa-blok{border:0;margin:0;padding:clamp(16px,2vw,22px);background:var(--wit);border-radius:var(--ronding);
  box-shadow:0 2px 4px rgba(36,31,27,.03),0 10px 28px rgba(36,31,27,.05)}
.kassa-legende{display:flex;align-items:center;gap:.6em;margin:0 0 .9rem;
  font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--inkt-zacht)}
.kassa-legende i{font-style:normal;display:grid;place-items:center;width:1.7em;height:1.7em;
  border-radius:50%;background:var(--kaneel-was);color:var(--terra-nacht);font-size:.72rem;letter-spacing:0}
.kassa-blok[hidden]{display:none}
.kassa-optie{display:flex;align-items:center;gap:.9rem;padding:.85em 1em;border:1px solid var(--lijn);
  border-radius:var(--ronding-klein);cursor:pointer;margin-bottom:8px;transition:border-color .2s,background .2s}
.kassa-optie:last-child{margin-bottom:0}
.kassa-optie:hover{border-color:var(--terra)}
.kassa-optie:has(input:checked){border-color:var(--terra-diep);background:var(--abrikoos-was)}
.kassa-optie input{accent-color:var(--terra-diep);width:18px;height:18px;flex-shrink:0}
.kassa-o-in{flex:1;line-height:1.4}
.kassa-o-in b{display:block;font-weight:400;font-size:.98rem}
.kassa-o-in small{color:var(--inkt-zacht);font-size:.82rem}
.kassa-kaarten{display:flex;gap:4px;flex-shrink:0}
.kassa-kaarten i{font-style:normal;font-size:.56rem;letter-spacing:.06em;border:1px solid var(--lijn);
  border-radius:3px;padding:.32em .42em;color:var(--inkt-zacht);background:var(--papier)}
.kassa-gegevens{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;font-size:.95rem}
.kassa-gegevens .bk-wijz{border:0;background:none;cursor:pointer;margin-left:auto}

.kassa-bon{background:var(--goud-was);border-radius:var(--ronding);padding:clamp(18px,2.2vw,26px);
  position:sticky;top:calc(var(--nav-h) + 14px)}
@media (max-width:860px){ .kassa-bon{position:static} }
.kassa-bon h4{font-size:1.15rem;margin-bottom:1rem}
.kassa-regel{display:flex;gap:1rem;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid rgba(36,31,27,.13)}
.kassa-r-n{font-size:.94rem;line-height:1.4}
.kassa-r-n small{display:block;color:var(--inkt-zacht);font-size:.8rem;margin-top:.25rem}
.kassa-r-p{font-family:var(--serif);font-size:1.1rem;white-space:nowrap}
.kassa-som{padding:.9rem 0;display:grid;gap:.42rem}
.kassa-som-r{display:flex;justify-content:space-between;font-size:.9rem}
.kassa-som-r.zacht span,.kassa-som-r.zacht b{color:var(--inkt-zacht)}
.kassa-som-r b{font-weight:400}
.kassa-totaal{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid rgba(36,31,27,.18);padding-top:.9rem;margin-bottom:1.1rem}
.kassa-totaal span{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--inkt-zacht)}
.kassa-totaal b{font-family:var(--serif);font-weight:300;font-size:1.7rem;color:var(--terra-nacht)}
.kassa-rust{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.kassa-rust li{display:flex;align-items:flex-start;gap:.6em;font-size:.83rem;line-height:1.45;color:var(--inkt-zacht)}
.kassa-rust .sym{color:var(--groen-band);margin-top:.15em}
.knop-groot{min-height:58px;padding:1em 2.4em;font-size:.82rem}

/* voet en afronding */
.bk-voet{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(20px,2.6vw,30px)}
.bk-voet-mid{justify-content:center}
.bk-terug{border:0;background:none;cursor:pointer;color:var(--inkt-zacht);min-height:44px;
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;padding:0 .2em}
.bk-terug:hover{color:var(--terra-diep)}
.bk-voet .knop{margin-left:auto}
.bk-voet-mid .knop{margin-left:0}
@media (max-width:520px){ .bk-voet .knop{margin-left:0;width:100%} }
.bk-fout{color:#a8322c;font-size:.92rem;margin:1rem 0 0;background:#fdecea;border-left:3px solid #a8322c;
  padding:.75em 1em;border-radius:2px}
.bk-klaar{text-align:center;max-width:560px;margin-inline:auto}
.bk-klaar .bk-bon{text-align:left;margin-top:1.6rem}
.bk-vink{width:62px;height:62px;border-radius:50%;background:var(--groen-band);color:#fff;
  display:grid;place-items:center;font-size:1.9rem;margin:0 auto 1.2rem}
.bk-klaar b{font-weight:400;color:var(--terra-nacht)}

/* ── vouwlijst (FAQ) ───────────────────────────────────────────── */
.vouw{border-bottom:1px solid var(--lijn)}
.b-groen .vouw,.b-diep .vouw{border-bottom-color:rgba(255,255,255,.18)}
.vouw summary{
  list-style:none;cursor:pointer;padding:1.15em 2.6em 1.15em 0;min-height:56px;position:relative;
  font-family:var(--serif);font-size:clamp(1.04rem,1.5vw,1.24rem);line-height:1.32;
}
.vouw summary::-webkit-details-marker{display:none}
.vouw summary::after{content:'';position:absolute;right:6px;top:calc(1.15em + .5em);width:12px;height:12px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);transition:transform .3s}
.vouw[open] summary::after{transform:rotate(-135deg)}
.vouw .vouw-in{padding:0 0 1.5em;max-width:74ch;font-size:.98rem;line-height:1.7;color:var(--inkt-zacht)}
.b-groen .vouw .vouw-in,.b-diep .vouw .vouw-in{color:rgba(255,255,255,.82)}
.vouw .vouw-in ul{margin:.6em 0;padding-left:1.15em}
.vouw .vouw-in li{margin-bottom:.35em}

/* ── instagram ─────────────────────────────────────────────────── */
/* ── instagram: echte berichtkaarten ────────────────────────────────
   Nagebouwd naar hoe een bericht er in de app uitziet: profielregel met
   de ring om de foto, vierkant beeld, de knoppenrij, het aantal likes,
   het bijschrift met de naam ervoor, en de datum. De cijfers zijn echt. */
.ig-draaier{max-width:100%;margin-top:clamp(8px,1.2vw,18px);--ig-gat:clamp(12px,1.4vw,20px)}
/* De kaartbreedte is niet vast maar berekend, zodat er ALTIJD een heel
   aantal berichten in het venster past. Met een vaste breedte hing er een
   halve kaart tegen de rand, en dat leest als een fout in plaats van als
   een carrousel. */
.ig-blad{flex:0 0 calc((100% - 2*var(--ig-gat))/3);min-width:0;padding:4px 0}
.dr-baan{gap:0}
.ig-draaier .dr-baan{gap:var(--ig-gat)}

.igp{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;height:100%}
.igp-kop{display:flex;align-items:center;gap:10px;padding:6px 12px}
.igp-wie{display:flex;align-items:center;gap:10px;min-width:0;flex:1;
  min-height:44px;text-decoration:none;color:inherit}
/* de ring van instagram: oranje naar roze naar paars */
.igp-ring{display:block;flex:0 0 auto;padding:2px;border-radius:50%;
  background:conic-gradient(from 210deg,#f9ce34,#ee2a7b,#6228d7,#f9ce34)}
.igp-ring img{display:block;width:32px;height:32px;border-radius:50%;
  border:2px solid var(--wit);object-fit:cover}
.igp-ring-groot img{width:52px;height:52px}
.igp-naam{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.igp-naam b{font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--inkt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.igp-naam small{font-size:.72rem;color:var(--inkt-zacht)}
.igp-meer{flex:0 0 auto;color:var(--inkt-zacht);line-height:0}
.igp-meer .sym{width:18px;height:18px;fill:currentColor;stroke:none}

.igp-beeld{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--groen-was)}
.igp-beeld img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.igp-beeld:hover img,.igp-beeld:focus-visible img{transform:scale(1.05)}
.igp-reel{position:absolute;top:10px;right:10px;line-height:0;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.igp-reel .sym{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}

.igp-knoppen{display:flex;align-items:center;gap:14px;padding:10px 12px 4px;color:var(--inkt)}
.igp-knoppen .sym{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.igp-knoppen span{line-height:0}
.igp-bewaar{margin-left:auto}

.igp-onder{padding:2px 12px 14px;display:flex;flex-direction:column;gap:5px}
.igp-likes{margin:0;font-family:var(--sans);font-size:.84rem;color:var(--inkt)}
.igp-likes b{font-weight:600}
.igp-tekst{margin:0;font-family:var(--sans);font-size:.84rem;line-height:1.45;
  color:var(--inkt);white-space:pre-line;overflow-wrap:anywhere}
.igp-tekst b{font-weight:600;margin-right:.35em}
/* Instagram knipt een lang bijschrift af; de volle tekst blijft wel staan. */
.igp-tekst.is-kort{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.igp-meerknop{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:.84rem;color:var(--inkt-zacht);min-height:44px;margin:-13px 0}
.igp-meerknop:hover{color:var(--inkt)}
.igp-reacties{font-family:var(--sans);font-size:.84rem;color:var(--inkt-zacht);
  display:inline-flex;align-items:center;min-height:44px;margin:-13px 0;width:fit-content}
.igp-datum{margin:.3rem 0 0;font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--inkt-zacht)}

/* Hoeveel berichten er naast elkaar staan. De draaier MEET dit zelf,
   dus hier hoeft alleen de kaartbreedte te kloppen. */
@media (max-width:1080px){ .ig-blad{flex-basis:calc((100% - var(--ig-gat))/2)} }
@media (max-width:720px){
  .ig-blad{flex-basis:100%}
  .igp-tekst.is-kort{-webkit-line-clamp:3}
}

/* de profielknop in de kop van de sectie */
.ig-profiel{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:8px 20px 8px 8px}
.ig-profiel:hover{border-color:var(--groen-band)}
.ig-profiel-tekst{display:flex;flex-direction:column;line-height:1.3}
.ig-profiel-tekst b{font-family:var(--sans);font-size:.9rem;font-weight:600}
.ig-profiel-tekst small{font-size:.76rem;color:var(--inkt-zacht)}
.ig-volg{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--groen-band);margin-top:3px}

.ig-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(22px,2.6vw,36px)}

/* ── partners ──────────────────────────────────────────────────── */
.partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,4vw,60px)}
.partners img{height:clamp(24px,2.4vw,34px);width:auto;opacity:.55;filter:grayscale(1);transition:opacity .3s,filter .3s}
.partners img:hover{opacity:1;filter:none}

/* De strook loopt vanzelf door: twee identieke rijen naast elkaar, de
   animatie schuift precies één rijbreedte op en begint opnieuw. Aan de
   randen loopt hij zacht uit, zodat een logo niet halverwege afgesneden
   lijkt maar wegvaagt. Hij staat stil zodra je hem aanwijst of erin
   tabt — anders loop je een logo achterna dat wegschuift.            */
.partners-loopt{flex-wrap:nowrap;justify-content:flex-start;gap:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%)}
.partners-loopt .partners-rij{display:flex;align-items:center;flex:0 0 auto;
  gap:clamp(24px,4vw,60px);padding-right:clamp(24px,4vw,60px);
  animation:logos-door 34s linear infinite}
.partners-loopt:hover .partners-rij,
.partners-loopt:focus-within .partners-rij{animation-play-state:paused}
@keyframes logos-door{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .partners-loopt .partners-rij{animation:none}
  .partners-loopt{flex-wrap:wrap;justify-content:center;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
}

/* ── claimstrook ───────────────────────────────────────────────── */
.claims{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.claim{background:var(--wit);border-radius:var(--ronding);padding:clamp(22px,2.4vw,30px);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 2px 4px rgba(36,31,27,.03),0 10px 26px rgba(36,31,27,.05)}
.b-groen .claim,.b-diep .claim{background:var(--groen-band);box-shadow:none}
.b-diep .claim{background:var(--groen-diep)}
.claim .sym{width:26px;height:26px;stroke-width:1.3;color:var(--terra-diep);margin-bottom:.85rem}
.b-groen .claim .sym,.b-diep .claim .sym{color:var(--goud-helder)}
.claim b{display:block;font-family:var(--serif);font-weight:300;font-size:1.08rem;line-height:1.25;margin-bottom:.3rem}
.claim span{font-size:.84rem;color:var(--inkt-zacht);line-height:1.5}
.b-groen .claim span,.b-diep .claim span{color:rgba(255,255,255,.78)}

/* ── geschenkkaarten ───────────────────────────────────────────── */
.bedragen{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.bedrag{border:1px solid currentColor;padding:.85em 1.5em;font-family:var(--serif);font-size:1.42rem;line-height:1;
  min-height:52px;display:inline-flex;align-items:center;border-radius:2px}

/* ── voet ──────────────────────────────────────────────────────── */
.voet{background:var(--groen-nacht);color:rgba(255,255,255,.88);padding:clamp(52px,6vw,86px) 0 0}
.voet a{color:inherit;text-decoration:none}
.voet a:hover{text-decoration:underline;text-underline-offset:3px}
.voet-rooster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(24px,3.4vw,52px)}
.voet h4{font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--zand);margin-bottom:1rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:.1rem;font-size:.94rem}
.voet li a{display:inline-flex;align-items:center;min-height:44px}
.voet .merk .m-the{color:var(--zand)}
.voet .merk .m-bliss{color:#fff}
.voet .merk .m-studio{color:rgba(255,255,255,.6)}
.voet-onder{margin-top:clamp(40px,5vw,64px);padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.62)}
.voet-bron{font-size:.76rem;line-height:1.6;color:rgba(255,255,255,.62);max-width:86ch;padding-bottom:26px}

/* ── mobiele onderbalk ─────────────────────────────────────────── */
.balk{
  position:fixed;inset:auto 0 0 0;z-index:70;display:none;
  background:var(--papier);border-top:1px solid var(--lijn);
  box-shadow:0 -2px 22px rgba(31,38,34,.10);
  padding:8px calc(var(--rand)/2) calc(8px + env(safe-area-inset-bottom));
  gap:8px;
}
.balk a{
  flex:1 1 0;min-height:50px;display:flex;align-items:center;justify-content:center;gap:.4em;
  text-decoration:none;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--groen);border-radius:2px;padding:.4em;text-align:center;line-height:1.2;
}
.balk a.vol{background:var(--groen);color:var(--creme)}
.balk a.leeg{color:var(--groen)}

/* ── responsief ────────────────────────────────────────────────── */
@media (max-width:1080px){
  .r4{grid-template-columns:repeat(2,1fr)}
  .voet-rooster{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  body{font-size:16px}
  .balk{display:flex}
  body{padding-bottom:70px}
  .r3,.r2{grid-template-columns:repeat(2,1fr)}
  .duo,.duo-breed,.duo-smal,.verg{grid-template-columns:1fr}
  /* Het beeld stond hier vóór de tekst. Bij een blok met twee beelden
     betekende dat duizend pixels scrollen voor het eerste woord. Op een
     telefoon lees je eerst waar het over gaat, dán zie je het beeld. */
  .duo .duo-beeld{order:2}
  .claims{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:min(90svh,700px)}
  .zone-lijst{max-height:300px}
}
@media (max-width:640px){
  :root{--rand:20px}
  /* De wereldkaarten stonden hier in TWEE kolommen met de tekst onder het
     beeld. Elke kolom werd daardoor even hoog als zijn eigen tekst, dus
     stond er een rij van ongelijke blokken — en de boog eromheen sloot
     alleen om het beeld. Ze staan nu één voor één in de draaier, in
     precies dezelfde vorm als op een groot scherm. */
  .wereld-tekst h3{font-size:clamp(1.15rem,5vw,1.4rem);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .r3,.r2,.r4{grid-template-columns:1fr}
  .verg-uit{grid-template-columns:1fr}
  .prijsregel{flex-wrap:wrap;gap:.3rem .7rem}
  .prijsregel .pr-naam{flex:1 1 100%}
  .prijsregel .pr-stip{display:none}
  .prijsregel .pr-duur{order:3}
  .prijsregel .pr-prijs{order:4;margin-left:auto}
  .hero-strook{gap:0 22px}
  .hero-strook div{flex:1 1 44%}
  .dagen{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
  .uren{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .voet-rooster{grid-template-columns:1fr}
  .claims{grid-template-columns:1fr}
}
@media (max-width:430px){
  .reus{font-size:clamp(2.35rem,10.4vw,3.1rem)}
  .groot{font-size:clamp(1.75rem,7.6vw,2.3rem)}
}

/* inline tekstlinks in lopende zinnen blijven inline; ze vallen onder de
   uitzondering voor links binnen een tekstblok. */
.boek-noot a,.voet-bron a{display:inline}
.hero-strook a{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}
/* de staande uitsnede van de hero op smalle schermen */
.hero-beeld picture{display:block;width:100%;height:100%}

/* ── uitklapbare prijslijst ─────────────────────────────────────── */
.uitklap{border:1px solid var(--lijn);background:var(--wit);margin-bottom:16px}
.b-creme .uitklap{background:var(--papier)}
.uitklap > summary{
  list-style:none;cursor:pointer;padding:1.15em clamp(16px,2vw,24px);min-height:56px;
  display:flex;align-items:center;gap:1rem;position:relative;
}
.uitklap > summary::-webkit-details-marker{display:none}
.uitklap > summary b{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.8vw,1.42rem);line-height:1.2}
.uitklap > summary .u-sub{margin-left:auto;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--inkt-zacht);white-space:nowrap;padding-right:26px}
.uitklap > summary::after{content:'';position:absolute;right:clamp(16px,2vw,24px);top:50%;width:11px;height:11px;
  border-right:1.4px solid var(--groen-band);border-bottom:1.4px solid var(--groen-band);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.uitklap[open] > summary::after{transform:translateY(-25%) rotate(-135deg)}
.uitklap[open] > summary{border-bottom:1px solid var(--lijn)}
.uitklap .u-in{padding:clamp(16px,2vw,26px) clamp(16px,2vw,24px) clamp(10px,1.4vw,18px)}
.uitklap .u-in > p.zacht{margin-bottom:1.4rem;font-size:.94rem}
.uitklap .prijsgroep:last-child{margin-bottom:0}
@media (max-width:640px){ .uitklap > summary .u-sub{display:none} }

/* ── stemmen: de echte beoordelingen ────────────────────────────────
   Twee nagekeken cijfers plus de ene volledige aanbeveling die zonder
   aanmelding leesbaar is. Meer hebben wij niet gevonden, dus meer staat
   er niet. Zie VERSLAG.md.                                            */
.stemmen{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);max-width:760px;margin:0 auto clamp(34px,4.5vw,56px);
}
.stem-cijfer{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.28rem;padding:clamp(20px,2.6vw,30px) clamp(14px,2vw,22px);
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--boog,18px);
  text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;
}
.stem-cijfer:hover,.stem-cijfer:focus-visible{transform:translateY(-3px);box-shadow:0 10px 30px rgba(36,31,27,.09)}
.sc-sterren{position:relative;display:inline-block;line-height:0;margin-bottom:.35rem}
.sc-sterren .sc-leeg,.sc-sterren .sc-vol{display:flex;gap:3px;line-height:0}
.sc-sterren .sc-vol{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap}
.sc-sterren .ster{width:18px;height:18px;flex:0 0 auto;display:block}
.sc-leeg .ster{fill:none;stroke:var(--zand-warm);stroke-width:1.4;stroke-linejoin:round}
.sc-vol .ster{fill:var(--goud);stroke:var(--goud);stroke-width:1.4;stroke-linejoin:round}
.sc-merk{display:block;color:var(--groen-band);margin-bottom:.35rem;line-height:0}
.sc-merk .sym{width:26px;height:26px;fill:none;stroke-width:1.4}
.sc-waarde{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,4.6vw,3rem);line-height:1;color:var(--inkt)}
.sc-onder{font-size:.9rem;color:var(--inkt-zacht);line-height:1.4}
.sc-bron{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--groen-band);margin-top:.45rem}
/* ── de draaier ─────────────────────────────────────────────────── */
.draaier{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(6px,1.4vw,18px);max-width:1000px;margin-inline:auto}
.dr-venster{overflow:hidden;transition:height .45s cubic-bezier(.22,.61,.36,1)}
.dr-baan{display:flex;margin:0;padding:0;list-style:none;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);will-change:transform}
.dr-blad{flex:0 0 100%;min-width:0;padding:.2rem clamp(4px,1.4vw,18px)}
.dr-pijl{
  width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--lijn);background:var(--wit);color:var(--groen-band);
  border-radius:50%;transition:background .3s,color .3s,transform .3s,border-color .3s;
}
.dr-pijl:hover{background:var(--groen-band);color:var(--creme);border-color:var(--groen-band);transform:scale(1.06)}
.dr-pijl .sym{width:19px;height:19px;fill:none;stroke-width:1.6}
.dr-stippen{grid-column:1/-1;display:flex;justify-content:center;gap:2px;margin-top:clamp(9px,1.5vw,17px)}
.dr-stip{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.dr-stip::after{content:'';width:8px;height:8px;border-radius:50%;
  background:transparent;border:1px solid var(--groen-band);opacity:.5;transition:background .3s,opacity .3s,transform .3s}
.dr-stip[aria-current="true"]::after{background:var(--groen-band);opacity:1;transform:scale(1.25)}
.dr-stip:hover::after{opacity:1}
/* de teller, voor draaiers met meer bladen dan er stippen naast twee pijlen
   passen. Zelfde hoogte als een stip, zodat de rij niet verspringt. */
.dr-teller{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--inkt-zacht)}
.dr-teller b{font-weight:400;color:var(--groen-band);margin-right:.2em}
/* Op een donkere band was de teller — en de stip — bijna onzichtbaar: beide
   staan in het groen van de lichte banden. */
.b-groen .dr-teller,.b-diep .dr-teller,.b-nacht .dr-teller{color:rgba(255,255,255,.86)}
.b-groen .dr-teller b,.b-diep .dr-teller b,.b-nacht .dr-teller b{color:var(--goud-helder)}
.b-groen .dr-stip::after,.b-diep .dr-stip::after,.b-nacht .dr-stip::after{border-color:rgba(255,255,255,.75)}
.b-groen .dr-stip[aria-current="true"]::after,.b-diep .dr-stip[aria-current="true"]::after,
.b-nacht .dr-stip[aria-current="true"]::after{background:var(--goud-helder);border-color:var(--goud-helder)}
.b-groen .dr-pijl,.b-diep .dr-pijl,.b-nacht .dr-pijl{background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.34);color:var(--creme)}
.b-groen .dr-pijl:hover,.b-diep .dr-pijl:hover,.b-nacht .dr-pijl:hover{background:var(--creme);color:var(--groen-nacht)}
.draaier.dr-enkel .dr-pijl,.draaier.dr-enkel .dr-stippen{display:none}
.draaier.dr-enkel{grid-template-columns:minmax(0,1fr)}
.stem-antwoord{
  margin:1.4rem auto 0;max-width:52ch;padding:.9rem 1.1rem;text-align:left;
  background:rgba(73,92,81,.07);border-left:2px solid var(--groen-band);
  font-size:.88rem;line-height:1.6;color:var(--inkt);border-radius:0 8px 8px 0;
}
.stem-antwoord .sa-kop{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--groen-nacht);margin-bottom:.35rem}
/* ── de beoordelingskaart ────────────────────────────────────────
   De beoordelingen stonden als één zwevende quote per scherm. Nu zijn het
   kaarten, precies zoals de instagram-berichten, en staan er op een breed
   scherm twee naast elkaar. De draaier meet dat zelf, dus hier hoeft
   alleen de breedte van een blad te kloppen.                          */
.stem-draaier{max-width:1060px;--st-gat:clamp(12px,1.4vw,20px)}
.stem-draaier .dr-baan{gap:var(--st-gat)}
.stem-blad{flex:0 0 calc((100% - var(--st-gat))/2);padding:.2rem 0}
@media (max-width:820px){
  /* Eén kaart per scherm: gelijke hoogtes hebben dan geen nut meer en
     lieten onder de korte beoordeling een leeg wit vlak staan. */
  .stem-blad{flex-basis:100%}
  .stem-draaier .dr-baan{align-items:flex-start}
  .stem-kaart{height:auto}
}

.stem-kaart{
  margin:0;height:100%;display:flex;flex-direction:column;
  background:var(--wit);border-radius:var(--ronding);
  padding:clamp(22px,2.6vw,32px);text-align:left;
  box-shadow:0 2px 4px rgba(36,31,27,.03),0 12px 34px rgba(36,31,27,.06);
}
.b-groen .stem-kaart,.b-diep .stem-kaart,.b-nacht .stem-kaart{
  background:rgba(255,255,255,.07);box-shadow:none}
.stk-kop{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.stk-bol{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--groen-band);color:var(--creme);
  font-family:var(--serif);font-size:1.15rem;line-height:1;
}
.stk-wie{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.stk-wie b{font-family:var(--sans);font-size:.94rem;font-weight:600}
.stk-wie small{font-size:.74rem;color:var(--inkt-zacht)}
.stk-merk{margin-left:auto;flex:0 0 auto}
.stk-merk .sym{width:20px;height:20px;color:var(--groen-band)}
.stem-kaart blockquote{
  margin:0;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.06rem,1.5vw,1.32rem);line-height:1.5;color:var(--groen-band);
}
/* Met achttien beoordelingen lopen de lengtes ver uiteen — van vijf woorden
   tot een half essay. Zonder rem houdt de rij de hoogte van de LANGSTE vast en
   staat er onder een korte beoordeling een leeg wit vlak van een halve meter.
   Zeven regels, daarna een beletselteken; de hele tekst staat één klik verderop
   bij Google of Facebook, en dat staat er ook. */
.stem-kaart blockquote{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;
  line-clamp:7;overflow:hidden;
}
.stem-kaart .stem-antwoord{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  line-clamp:4;overflow:hidden;
}
.stem-kaart .stem-antwoord{margin-inline:0;max-width:none}
.stem-kaart figcaption{
  margin-top:auto;padding-top:1.1rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);
}
.stem-kaart figcaption a{
  color:var(--groen-band);display:inline-flex;align-items:center;min-height:44px;margin:-13px 0;
}
/* twee eigen foto's naast elkaar, elk met de naam die op het bed staat */
.duo-beeld-rij{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px)}
@media (max-width:720px){.duo-beeld-rij{grid-template-columns:1fr}}

/* Bellen en mailen zijn op een telefoon de twee belangrijkste knoppen van de
   hele site. Ze stonden als kale tekstregels van 23 px hoog; dat is te klein
   om te raken. De negatieve marge houdt de regelafstand eromheen intact —
   het raakvlak groeit, de opmaak niet. */
a.raak{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px;
  text-decoration:none}
.kontakt-lijnen{line-height:1.5}

.stem-noot{
  max-width:74ch;margin:clamp(28px,3.4vw,44px) auto 0;text-align:center;
  font-size:.82rem;line-height:1.7;color:var(--inkt-zacht);
}
.stem-noot a{color:var(--groen-band)}
@media (max-width:900px){
  /* pijlen naast de tekst kosten op smalle schermen te veel breedte:
     ze schuiven onder de stippen. */
  .draaier{grid-template-columns:minmax(0,1fr)}
  .draaier .dr-venster{grid-column:1/-1;grid-row:1}
  .dr-stippen{grid-row:2;align-items:center}
  .dr-pijl{position:absolute;bottom:0;z-index:2;width:44px;height:44px}
  .dr-vorig{left:0}
  .dr-volgend{right:0}
  .dr-stippen{padding-inline:52px}
}
/* ── op een aanraakscherm: alleen vegen ─────────────────────────────
   Op een toestel waar je kunt vegen zijn de pijlen overbodig. `hover:none`
   en `pointer:coarse` samen betekenen: geen muis, wel een vinger. Op een
   smal VENSTER van een gewone computer blijven de pijlen dus wél staan —
   daar kun je niet vegen, en zonder pijl zou je vastzitten.

   Wat de pijlen deden — laten zien dat er meer is — doet nu de kaart zelf:
   de volgende steekt er een randje naast uit. Dat is de aanwijzing die je
   op een telefoon verwacht, en hij kost geen tikdoel.                    */
@media (hover:none) and (pointer:coarse){
  .dr-pijl{display:none!important}
  .dr-stippen{padding-inline:0}
  .draaier{grid-template-columns:minmax(0,1fr)}
  .draaier .dr-venster{grid-column:1/-1;grid-row:1}
}
@media (hover:none) and (pointer:coarse) and (max-width:820px){
  .stem-blad{flex-basis:88%}
}
@media (hover:none) and (pointer:coarse) and (max-width:720px){
  .dienst-draaier .dr-blad{flex-basis:88%}
  .ig-blad{flex-basis:88%}
}

@media (max-width:560px){
  /* op de telefoon blijven de kaarten gewoon gecentreerde kolommen; de
     rij-variant duwde de sterren scheef naast het cijfer. */
  .stemmen{grid-template-columns:1fr;gap:12px}
  .stem-cijfer{padding:22px 16px}
  .sc-waarde{font-size:2.4rem}
  .dr-blad{padding-inline:0}
}

/* ── Op een telefoon ────────────────────────────────────────────────
   Het labelschaaltje van 0,56 tot 0,80rem leest op een groot scherm als
   verfijning; op 390 px is het gewoon te klein. Hieronder ligt daarom een
   bodem: niets waar je op tikt komt onder 14 px, niets wat je moet lezen
   onder 13 px, en de decoratieve micro-labels onder 11 px. Het bureaublad
   houdt zijn fijne schaal — dit geldt alleen hier.                      */
@media (max-width:640px){

  /* waar je op tikt */
  .knop,.nav .knop,.balk a,.beh-boek,.doel,.bk-tab,.bk-wijz,.bk-terug,
  .nav-links a.n-link,.bk-k-d,.uitklap > summary .u-sub{
    font-size:.875rem;
  }
  /* de vaste balk onderaan is op een telefoon de belangrijkste knop van
     de site; die mag niet het kleinste lettertje van de pagina dragen. */
  .balk a{font-size:.9rem;letter-spacing:.1em}
  /* de stappenteller vertelt waar je bent in de trechter — geen sierlabel */
  .bk-stap{font-size:.78rem}

  /* wat je moet kunnen lezen */
  .fig figcaption,.stem-kaart figcaption,.prijsregel .pr-duur,
  .beh-kaart .beh-duur,.kaart-voet .beh-duur,.verg-vak .v-naam,
  .verg-vak .v-noot,.zone-kop,.voet-onder,.voet-bron,.bk-lbl,
  .bk-veld > span,.bk-bon-r span,.bk-dd-n,.sc-bron,.hero-strook b,
  .stem-antwoord .sa-kop,.kassa-legende,.kassa-totaal span,
  .kassa-r-n small,.bk-k-m .bk-opaanvraag,.doel-teller,.bk-bol{
    font-size:.82rem;
  }

  /* decoratief, maar niet onleesbaar */
  .opschrift,.voet h4,.merk .m-studio,
  .fig:has(img[src*="beeld/ai-"])::after,.bk-d-mnd,.bk-d-vrij,.bk-d-wd,
  .kassa-kaarten i,.kassa-legende i,.wereld-tekst .pijl{
    font-size:.75rem;
  }
}

/* De prijsgroepen op kosmetik zijn uitklappers. Op een breed scherm staan
   ze open en mag de kop niet als knop ogen; op een telefoon is hij dat wel. */
/* Rasterkinderen staan standaard op min-width:auto en weigeren dus te
   krimpen onder hun inhoud. Met een titel in schreefletter plus een
   niet-afbrekend "3 PREISE" duwde dat de kolom op 768 px 16 px te breed. */
.prijsvouwen > *{min-width:0}
.prijsvouw{max-width:100%}
.prijsvouw > summary{gap:.6rem}
.prijsvouw > summary b{min-width:0;hyphens:auto}
/* in twee kolommen is er geen ruimte voor het aantal ernaast */
@media (max-width:900px){ .prijsvouw > summary .u-sub{display:none} }
.prijsvouw[open] > summary{border-bottom:1px solid var(--lijn)}
.prijsvouw .u-in > .groep-sub{margin-bottom:1rem}
.prijsvouw > summary .u-sub{padding-right:30px}

/* De opsomming in een behandelkaart. Een <summary> is overal aanklikbaar,
   dus het is overal een échte uitklapper: pijltje zichtbaar, raakvlak 44 px.
   Alleen de begintoestand verschilt — open op een breed scherm, dicht op een
   telefoon (site.js). Een knop die op het bureaublad inert lijkt maar wél
   inklapt is erger dan geen knop. */
.kaartvouw{margin-top:1rem}
.kaartvouw > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:.5rem;min-height:44px;border-top:1px solid var(--lijn);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--inkt-zacht)}
.kaartvouw > summary::-webkit-details-marker{display:none}
.kaartvouw > summary:hover{color:var(--groen-band)}
.kaartvouw .kv-n{margin-left:auto;padding-right:.4rem;opacity:.65}
.kaartvouw > summary::after{content:'';width:9px;height:9px;flex:0 0 auto;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-25%) rotate(45deg);transition:transform .3s}
.kaartvouw[open] > summary::after{transform:translateY(0) rotate(-135deg)}
.kaartvouw ul{margin:.7rem 0 .3rem;padding-left:1.1em;font-size:.9rem;
  line-height:1.6;color:var(--inkt-zacht)}
@media (max-width:720px){ .kaartvouw > summary{font-size:.78rem} }


/* ══ beweging (28-09-2026) ═══════════════════════════════════════════
   Alles hieronder werkt alleen onder html.bw (gezet in de kop, niet bij
   "minder beweging"). assets/beweging.js stuurt het; zonder dat script
   staat de pagina er gewoon, zoals hierboven. */
.bw .rv{opacity:1;transform:none;transition:none}
.bw .hero-in{visibility:hidden}
.bw .hero-beeld img,.bw .hero-beeld video{animation:none}
.bw .hero-beeld{transform-origin:50% 60%;will-change:transform}

/* woorden in een venster: ruimte voor accenten boven en staarten onder */
.bw-w{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.12em .1em .16em 0;margin:-.12em -.1em -.16em 0}
.bw-i{display:inline-block;transform-origin:0 100%}

/* de wereldkaarten: GSAP zet de schaal bij het binnenkomen, daarna neemt
   de eigen "scale" het over, zodat hover en inline transform niet vechten */
.bw .wereld img{transition:filter .8s ease,scale 1.4s cubic-bezier(.2,.8,.2,1)}
.bw .wereld:hover img,.bw .wereld:focus-visible img{transform:none;scale:1.06;filter:brightness(.86) saturate(1.2)}
.wereld-tekst h3,.wereld-tekst p{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wereld:hover .wereld-tekst h3{transform:translateY(-4px)}
.wereld:hover .wereld-tekst p{transform:translateY(-2px)}
.wereld-tekst .pijl{transition:letter-spacing .7s cubic-bezier(.2,.8,.2,1)}
.wereld:hover .wereld-tekst .pijl{letter-spacing:.3em}

/* koepel: de donkere band komt als een boog omhoog en wordt vlak */
@property --kq{syntax:'<number>';inherits:false;initial-value:0}
.bw-koepel::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--koepel,0px);
  background:inherit;border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none;z-index:1;
  transform:scaleY(var(--kq,0));transform-origin:50% 100%;will-change:transform}
.voet.bw-koepel{position:relative}

/* voortgang onder de navigatie */
.bw-voortgang{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--goud-helder);
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* het lint met hun behandelingen */
.lint{display:flex;overflow:hidden;white-space:nowrap;background:var(--papier);
  padding:clamp(18px,2.6vw,40px) 0;border-block:1px solid var(--lijn);user-select:none}
.lint-baan{display:flex;flex:0 0 auto;align-items:center;gap:clamp(22px,3vw,52px);padding-right:clamp(22px,3vw,52px);will-change:transform}
.lint-baan span{font-family:var(--serif);font-weight:300;font-size:clamp(2.3rem,6.4vw,6rem);line-height:1.1;color:var(--groen);letter-spacing:-.01em}
.lint-baan span:nth-child(4n+3){font-style:italic;color:var(--terra)}
.lint-baan span.lint-open{color:transparent;-webkit-text-stroke:1px var(--groen);font-style:italic}
.lint-baan i{flex:0 0 auto;width:clamp(16px,1.6vw,26px);height:clamp(22px,2.2vw,36px);
  border:1.5px solid var(--goud);border-bottom:0;border-radius:999px 999px 0 0;opacity:.9}

/* de volger naast de muis */
.bw-volger{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .4s}
.bw-volger.aan{opacity:1}
.bw-volger.weg{opacity:0}
.bw-v-bol{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;
  background:var(--terra);opacity:.55;mix-blend-mode:multiply;
  transition:width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),left .5s cubic-bezier(.2,.8,.2,1),top .5s cubic-bezier(.2,.8,.2,1),background .4s,opacity .4s}
.bw-volger.klein .bw-v-bol{left:-22px;top:-22px;width:44px;height:44px;background:transparent;border:1px solid var(--terra);opacity:.7}
.bw-volger.groot .bw-v-bol{left:-48px;top:-48px;width:96px;height:96px;background:var(--goud-helder);opacity:.96;mix-blend-mode:normal}
.bw-v-tekst{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.6);opacity:0;
  font:500 .64rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--groen-nacht);white-space:nowrap;
  transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.bw-volger.groot .bw-v-tekst{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bw a.wereld{cursor:none}

/* hero-iconen: een kleine beweging bij aanwijzen */
@keyframes bw-tik{0%{transform:none}30%{transform:translateY(-3px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}100%{transform:none}}
.bw .hero-werelden a:hover .sym{animation:bw-tik .7s cubic-bezier(.2,.8,.2,1)}

/* de knop in de navigatie: af en toe een zachte glans */
.bw .nav .knop{position:relative;overflow:hidden}
.bw .nav .knop::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:bw-glans 7s ease-in-out 3s infinite}
@keyframes bw-glans{0%,80%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* van pagina naar pagina (Chrome, Edge, Safari 18.2+; anders gewoon laden) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hero-beeld{view-transition-name:hero-beeld}
  .nav{view-transition-name:nav}
  ::view-transition-group(hero-beeld){animation-duration:.8s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  ::view-transition-old(root){animation:.45s cubic-bezier(.4,0,.2,1) both bw-uit}
  ::view-transition-new(root){animation:.6s cubic-bezier(.2,.8,.2,1) .05s both bw-in}
  @keyframes bw-uit{to{opacity:0;transform:translateY(-14px)}}
  @keyframes bw-in{from{opacity:0;transform:translateY(18px)}}
}

@media (max-width:720px){
  .lint-baan span.lint-open{-webkit-text-stroke:.8px var(--groen)}
}

/* offen oder zu */
.offen{display:flex;align-items:center;gap:9px}
.offen[hidden]{display:none}
.offen-stip{position:relative;width:9px;height:9px;border-radius:50%;background:#b9b3aa;flex:0 0 auto}
.offen.is-open .offen-stip{background:#7fd49a}
.offen.is-open .offen-stip::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid #7fd49a;animation:offen-puls 2.4s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes offen-puls{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.hero-strook .offen span[data-offen-t]{font-size:.86rem;color:#fff;white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.offen-licht{margin:0 0 .8rem;font-size:.92rem}
.offen-licht.is-open .offen-stip{background:#3f9a5f}
.offen-licht.is-open .offen-stip::after{border-color:#3f9a5f}
@media (prefers-reduced-motion:reduce){.offen-stip::after{animation:none!important;display:none}}

/* de geschenkkarte als echte kaart: kantelen, omdraaien (28-09-2026) */
.kop-balans{text-wrap:balance}
.karte-buehne{display:flex;flex-direction:column;align-items:center;gap:18px;perspective:1600px}
.karte{all:unset;box-sizing:border-box;display:block;width:min(100%,560px);aspect-ratio:600/285;cursor:pointer;
  --rx:0deg;--ry:0deg;--gx:50%;--gy:30%;transform:rotate(-4deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.karte:focus-visible{outline:2px solid var(--terra-diep);outline-offset:8px;border-radius:16px}
.karte-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.karte.om .karte-in{transform:rotateX(var(--rx)) rotateY(calc(180deg + var(--ry)))}
.karte-vorn,.karte-hinten{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 2px 4px rgba(123,65,38,.12),0 22px 50px -18px rgba(123,65,38,.45)}
.karte-hinten{transform:rotateY(180deg)}
.karte-glanz{position:absolute;inset:0;border-radius:14px;pointer-events:none;backface-visibility:hidden;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.55),rgba(255,255,255,0) 46%);
  mix-blend-mode:soft-light;opacity:.8;transition:opacity .4s}
.karte.om .karte-glanz{opacity:0}
.karte:hover{transform:rotate(-1.5deg) translateY(-4px)}
.karte.om{transition-duration:.9s}
.karte.om .karte-in{transition:transform 1s cubic-bezier(.3,1.25,.4,1)}
.karte-in{transition:transform 1s cubic-bezier(.3,1.25,.4,1)}
/* dat de kaart draait, moet je zien zonder het te lezen (30-09-2026, Louis: "its not so clear that you have to tap
   to turn it around"): een draaiknop op de hoek die zacht klopt, een echte knop eronder, en één keer gluren */
.karte{position:relative}
/* statt-Preis bei den Elektroepilation-Paketen (01-10-2026) */
.pr-statt{display:block;font-size:.72em;opacity:.6;text-decoration-thickness:1px;font-weight:400;line-height:1.1}
.karte-hinweis{position:absolute;right:-16px;top:-16px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--terra-diep);color:#fff;box-shadow:0 8px 20px -6px rgba(123,65,38,.55);
  transform:translateZ(2px);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
/* op de gsm binnen de kaart: de kloppende ring groeit 18 px en liep anders het scherm uit */
@media (max-width:700px){.karte-hinweis{right:10px;top:-14px}}
.karte-hinweis::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--terra-diep);animation:karte-klop 2.4s ease-out infinite}
.karte:hover .karte-hinweis svg,.karte:focus-visible .karte-hinweis svg{transform:rotate(200deg)}
.karte-hinweis svg,.karte-dreh svg{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.karte-buehne.gedreht .karte-hinweis{opacity:0;transform:translateZ(2px) scale(.5)}
@keyframes karte-klop{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.7);opacity:0}}
.karte-dreh{display:inline-flex;align-items:center;gap:.55em;min-height:48px;padding:0 1.25em 0 1em;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.95rem;letter-spacing:.02em;color:var(--terra-nacht);background:rgba(255,255,255,.55);
  border:1px solid rgba(123,65,38,.3);transition:background .3s,border-color .3s}
.karte-dreh:hover{background:rgba(255,255,255,.85);border-color:var(--terra-nacht)}
.karte-dreh:hover svg{transform:rotate(-200deg)}
.karte-dreh:focus-visible{outline:2px solid var(--terra-diep);outline-offset:3px}
.karte-dreh-hinten{display:none}
.karte-buehne.om .karte-dreh-vorn{display:none}
.karte-buehne.om .karte-dreh-hinten{display:inline}
.karte-buehne.om .karte-dreh svg{transform:rotate(180deg)}
@keyframes karte-wink{0%{transform:rotateY(0)}38%,58%{transform:rotateX(3deg) rotateY(-58deg)}100%{transform:rotateY(0)}}
.karte.wink .karte-in{animation:karte-wink 1.7s cubic-bezier(.45,0,.2,1) 1}
@media (prefers-reduced-motion:reduce){.karte-hinweis::after{animation:none}.karte.wink .karte-in{animation:none}}
@media (prefers-reduced-motion:reduce){.karte,.karte-in{transition:none!important}}
.bw .karte{animation:karte-zweef 7s ease-in-out infinite}
.bw .karte:hover,.bw .karte:focus-visible{animation-play-state:paused}
@keyframes karte-zweef{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){.beh-kaart,[class*="beh-"]{animation:none!important}}
@media (prefers-reduced-motion:reduce){.verg-vak{animation:none!important}}
/* onder de bewegingsmotor doet GSAP het binnenkomen; een CSS-animatie zou zijn inline stijl overschrijven */
.bw .beh-kaart,.bw .verg-vak{animation:none}
/* kleine dingen (28-09-2026): licht over hun kannelering, instagram die meeleeft */
.kannel{position:relative;overflow:hidden}
.bw .kannel::after{content:'';position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(242,196,71,.34) 50%,transparent);
  transform:translateX(-110%);animation:kannel-licht 11s cubic-bezier(.45,0,.25,1) infinite}
@keyframes kannel-licht{0%,18%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
.igp-beeld img{transition:scale 1.2s cubic-bezier(.2,.8,.2,1)}
.igp-beeld:hover img{scale:1.05}
.prijsregel.pr-boek .pr-boek-t{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.prijsregel.pr-boek:hover .pr-boek-t{transform:translateX(5px)}

/* stille films boven hun eigen eerste beeld */
video[data-film]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
video[data-film].speelt{opacity:1}

/* de Aqua-Facial-story, in het formaat van hun Instagram */
.story-buehne{display:flex;justify-content:center}
.story{position:relative;margin:0;width:min(100%,360px);aspect-ratio:9/16;border-radius:30px;overflow:hidden;
  background:var(--groen-nacht);box-shadow:0 30px 70px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);rotate:2deg}
.story img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:720px){.story{width:min(78%,300px);rotate:0deg}}
/* de handtekening in de voet */
/* alleen het middenstuk van de film (de boog staat tussen 27 en 73 procent), zodat de boog
   bijna tegen de tekstkolom lijnt en er niets buiten de voet steekt */
.voet-signatur{position:relative;width:min(100%,320px);aspect-ratio:660/360;margin:0 0 1.2rem -20px;overflow:hidden}
.voet-signatur img,.voet-signatur video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (max-width:720px){.voet-signatur{margin-left:-12px;width:min(100%,260px)}}

/* juridische links in de voet, en de leesbladen (impressum, datenschutz, agb, blog) */
.voet-recht{display:flex;flex-wrap:wrap;gap:4px 18px}
.voet-recht a{color:rgba(255,255,255,.82);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.voet-recht a:hover{color:#fff;text-decoration:underline}
.blad-kop{padding:calc(var(--nav-h) + clamp(48px,6vw,96px)) 0 clamp(28px,3vw,48px);background:var(--creme-band)}
.blad-kop h1{font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1.04}
.blad-kop .lood{margin-top:1rem;max-width:60ch}
.lees{max-width:72ch}
.lees h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:2.4rem 0 .8rem}
.lees h3{font-size:1.2rem;margin:1.8rem 0 .5rem}
.lees p,.lees li{font-size:1.02rem;line-height:1.7}
.lees ul,.lees ol{padding-left:1.2rem;margin:.6rem 0 1rem}
.lees li{margin-bottom:.45rem}
.lees dl{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;gap:8px 24px;margin:0 0 1.6rem}
.lees dt{color:var(--inkt-zacht)}
.lees dd{margin:0}
.lees a{color:var(--terra-diep)}
@media (max-width:620px){.lees dl{grid-template-columns:1fr;gap:2px}.lees dd{margin-bottom:.7rem}}
.blog-rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(20px,2.6vw,36px)}
.blog-kaart{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.blog-kaart .fig{aspect-ratio:1/1}
.blog-kaart h2{font-size:clamp(1.3rem,1.9vw,1.6rem);margin-top:1rem}
.blog-kaart:hover h2{color:var(--terra-diep)}
.artikel-beeld{max-width:560px;aspect-ratio:1/1;margin:0 0 2rem}

/* nergens tekst onder 12 px (meter 28-09-2026: 9,9 px op de hero-knoppen, 11,2 px in de navigatie) */
.hero-werelden span{font-size:.75rem;letter-spacing:.03em}
.merk .m-studio{font-size:.75rem;letter-spacing:.2em}

/* Über uns: team (01-10-2026). Een kaart zonder tekst toont alleen naam en rol. */
.team-groot{margin-top:clamp(32px,4vw,56px)}
.mensen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(24px,3vw,40px)}
.mens{border-top:1px solid rgba(255,255,255,.22);padding-top:16px}
.mens .fig{margin-bottom:16px}
.mens-naam{font-family:var(--serif);font-size:clamp(1.3rem,1.6vw,1.6rem);line-height:1.2;margin:0}
.mens-rol{margin-top:6px;color:rgba(255,255,255,.72)}
.mens-tekst{margin-top:12px;color:rgba(255,255,255,.86);font-size:.98rem}

/* "Website von Deallos" in de copyrightregel: zelfde letter en gedempte kleur, nooit onder 13px.
   De link krijgt 44px tikvlak via padding met een even grote negatieve marge, zodat de regel
   zelf niet hoger wordt. Op de telefoon een eigen regel, zonder het scheidingspunt. */
.voet-credit{white-space:nowrap;font-size:max(13px,1em)}
.voet .voet-credit a{display:inline-block;padding:12px 0;margin:-12px 0;color:inherit;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.voet .voet-credit a:hover{color:#fff}
@media (max-width:640px){
  .voet-credit{display:block;margin-top:4px}
  .voet-credit-sep{display:none}
}
/* 12-10-2026: de vergelijking Laser/Rasierer had lange waarden met nowrap ("Laser: durchschnittlich 8 bis 12 Sitzungen")
   en duwde de pagina op 360 px 9 px breed. Hier mogen de twee waarden afbreken. */
.prijsregel.vergelijk .pr-duur,.prijsregel.vergelijk .pr-prijs{white-space:normal;flex:0 1 auto;text-align:right;min-width:0}
@media (max-width:420px){.prijsregel.vergelijk{flex-wrap:wrap}.prijsregel.vergelijk .pr-naam{flex:1 0 100%}.prijsregel.vergelijk .pr-stip{display:none}.prijsregel.vergelijk .pr-duur{text-align:left;flex:1 1 auto}}