/* ============================================================
   skamah/site.css — thema "Skamah" (Skamah Pedicure, Huis ter Heide)
   Laag bovenop theme/css/styles.css. Alles hangt aan
   body.theme-skamah, zodat het nergens anders kan lekken.
   Bron: marketingontwerp v27 (brochures/skamah-website/voorstellen).
   Contrast (uit het ontwerp): tekst #566e5d 4,6-5,3:1, taupe #7d6455
   op groen 4,6-4,9:1, knoptekst #5b4232 op #ecdccb 6,9:1.
   De homepage-secties dragen de class .sk; alleen daarbinnen gelden
   de ontwerpregels voor p, h1-h3 en sectie-opvulling.
   ============================================================ */

body.theme-skamah {
  --tekst: #566e5d;
  --kop: #6a8c73;
  --kop-klein: #566e5d;
  --groen: #566e5d;
  --knop: #b2d8b9;
  --knop-h: #a3cfac;
  --knop-tekst: #3a5644;
  --accent: #ecdccb;
  --accent-h: #e3cdb6;
  --accent-rand: #c4a68c;
  --accent-tekst: #5b4232;
  --groen-d: #3f5a47;
  --bg: #f7faf5;
  --band: #eaf2e7;
  --blad: #e3eedf;
  --rank: #a9c9b0;
  --rank2: #b6cf9a;
  --bes: #a9c9b0;
  --nerf: #4f6b57;
  --nerf-op: .22;
  --bladtekst: #7d6455;
  --voet: #e3eedf;
  --poot: #bea793;
  --balk: #ffffff;
  --balk-lijn: #e4e0d8;
  --kop-font: 'Lora', Georgia, serif;
  --tekst-font: 'Source Sans 3', system-ui, sans-serif;

  /* basisstijl (theme/css/styles.css) op dezelfde kleuren */
  --clr-bg:          #f7faf5;
  --clr-surface:     #ffffff;
  --clr-surface-2:   #eaf2e7;
  --clr-border:      #dfe9dc;
  --clr-border-med:  #b9d0bd;
  --clr-ink:         #3f5a47;
  --clr-ink-2:       #566e5d;
  --clr-ink-3:       #6f8574;
  --clr-teal:        #566e5d;
  --clr-teal-light:  #eaf2e7;
  --clr-teal-dark:   #3f5a47;
  --clr-teal-mid:    #a9c9b0;
  --clr-rose:        #9c6a50;
  --clr-rose-light:  #f6ece3;
  --clr-rose-dark:   #6b4733;
  --clr-gold:        #bea793;
  --clr-gold-light:  #f3ebe2;
  --font-display:    'Lora', Georgia, serif;
  --font-body:       'Source Sans 3', system-ui, sans-serif;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  color-scheme: light;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--tekst-font);
  font-size: 1.06rem;
  line-height: 1.55;
}
.theme-skamah h1, .theme-skamah h2, .theme-skamah h3, .theme-skamah h4 {
  font-family: var(--kop-font); color: var(--kop); font-weight: 600; text-wrap: balance;
}
.theme-skamah p { color: inherit; }
.theme-skamah a { color: var(--groen); }
.theme-skamah :focus-visible { outline: 3px solid var(--kop); outline-offset: 3px; }
.theme-skamah .site-main { overflow-x: clip; }

/* ── kopbalk ─────────────────────────────────────────────── */
.theme-skamah .site-header { background: var(--balk); backdrop-filter: none; border-bottom: 1px solid var(--balk-lijn); }
.theme-skamah .site-header__inner { height: auto; min-height: 86px; padding-block: 10px; gap: 16px; max-width: 1160px; }
.theme-skamah .site-header__logo { gap: 0; }
.theme-skamah .sk-logo { height: 66px; width: auto; display: block; }
.theme-skamah .site-header__logo .logo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-skamah .site-nav { gap: 4px 6px; flex-wrap: wrap; justify-content: flex-end; }
.theme-skamah .nav-link { color: var(--tekst); font-size: 16px; padding: 4px 8px; border-radius: 999px; }
.theme-skamah .nav-link:hover { background: var(--band); color: var(--groen-d); }
.theme-skamah .lang-toggle__btn--active { color: var(--groen-d); }
.theme-skamah .cart-icon { color: var(--tekst); }
.theme-skamah .cart-badge { background: var(--accent-rand); color: #fff; }
.theme-skamah .mobile-menu-toggle span { background: var(--tekst); }
.theme-skamah .mobile-nav { box-shadow: 0 10px 28px rgba(63,90,71,.16); }
.theme-skamah .mobile-nav a { color: var(--tekst); }
.theme-skamah .mobile-nav a:hover { background: var(--band); color: var(--groen-d); }
.theme-skamah .sk-kopknop { min-height: 42px; padding: 0 18px; font-size: 16px; }
@media (max-width: 1220px) {
  .theme-skamah .site-nav { display: none; }
  .theme-skamah .mobile-menu-toggle { display: flex; }
}
@media (max-width: 640px) {
  .theme-skamah .sk-logo { height: 52px; }
  .theme-skamah .site-header__inner { min-height: 70px; }
  .theme-skamah .sk-kopknop { display: none; }
}

/* ── knoppen (ook op de overige pagina's) ───────────────── */
.theme-skamah .knop, .theme-skamah .btn--primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--accent-rand); background: var(--accent); color: var(--accent-tekst); text-decoration: none;
  font: 600 17px var(--tekst-font); transition: background .2s;
}
.theme-skamah .knop:hover, .theme-skamah .btn--primary:hover { background: var(--accent-h); color: var(--accent-tekst); border-color: var(--accent-rand); transform: none; }
.theme-skamah .knop2, .theme-skamah .btn--ghost, .theme-skamah .btn--outline {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid #8fb39a; color: var(--knop-tekst); background: #ffffff80; text-decoration: none; font: 600 17px var(--tekst-font);
}
.theme-skamah .knop2:hover, .theme-skamah .btn--ghost:hover, .theme-skamah .btn--outline:hover { background: var(--blad); color: var(--knop-tekst); border-color: #8fb39a; transform: none; }
.theme-skamah .btn--sm { min-height: 36px; padding: 0 14px; font-size: 15px; }
.theme-skamah .belink { font-weight: 600; text-underline-offset: 4px; text-decoration: underline; }

/* ── overige pagina's ───────────────────────────────────── */
.theme-skamah .page-hero { background: linear-gradient(180deg, var(--band), var(--bg)); border-bottom: 0; }
.theme-skamah .page-hero__eyebrow { color: var(--groen); font-weight: 600; letter-spacing: .06em; font-size: 15px; }
.theme-skamah .page-hero__title { font-style: normal; color: var(--kop); }
.theme-skamah .page-hero__sub { color: var(--tekst); }
.theme-skamah .faq__vraag { background: #fffefb; border: 1px solid #dfe9dc; border-radius: 28px 6px 28px 6px; overflow: hidden; }
.theme-skamah .faq__vraag:nth-child(even) { border-radius: 6px 28px 6px 28px; }
.theme-skamah .faq__vraag summary { font-family: var(--kop-font); font-weight: 600; font-size: 18px; color: var(--kop-klein); padding: 16px 24px; }
.theme-skamah .faq__vraag[open] summary { border-bottom-color: #dfe9dc; background: var(--band); }
.theme-skamah .faq__antwoord { color: var(--tekst); padding: 14px 24px 6px; }
.theme-skamah .faq__tab[aria-selected="true"] { border-bottom-color: var(--knop); color: var(--groen-d); }

/* ── homepage: ontwerpregels binnen .sk ─────────────────── */
.theme-skamah .sk { position: relative; padding-block: 64px; font-size: 18px; line-height: 1.55; color: var(--tekst); }
.theme-skamah .sk p { margin: 0; }
.theme-skamah .sk :is(h1, h2, h3, h4) { line-height: 1.2; margin: 0; }
.theme-skamah .sk ul, .theme-skamah .sk ol { list-style: none; }
.theme-skamah .sk.band { background: var(--band); }
.theme-skamah .sk.wit { background: #ffffffa6; }
.theme-skamah .binnen { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.theme-skamah .sectiekop { max-width: 640px; margin-bottom: 34px; position: relative; z-index: 1; }
.theme-skamah .sectiekop h2 { font-size: clamp(28px, 3.4vw, 38px); }
.theme-skamah .sectiekop p { margin-top: 10px; font-size: 19px; }
.theme-skamah .kop-rij { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px; }
.theme-skamah .kop-rij .sectiekop { margin-bottom: 0; display: grid; gap: 10px; justify-items: start; }
.theme-skamah .kop-rij .sectiekop p { margin-top: 0; }
.theme-skamah h2.los { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 18px; }
.theme-skamah .sk-tekst { display: grid; gap: 12px; max-width: 46em; }

/* hero */
.theme-skamah .sk-hero { position: relative; padding-block: 56px 64px; background: linear-gradient(180deg, var(--band), var(--bg)); font-size: 18px; line-height: 1.55; }
.theme-skamah .sk-hero p { margin: 0; }
.theme-skamah .sk-hero .binnen { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.theme-skamah .sk-hero .binnen > div { min-width: 0; }
.theme-skamah .eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--groen); margin-bottom: 14px; }
.theme-skamah .eyebrow span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tekst); }
.theme-skamah .sk-hero h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.2; margin: 0; }
.theme-skamah .sk-hero h1 em { font-style: italic; font-weight: 500; }
.theme-skamah .lead { font-size: 20px; margin-top: 18px; max-width: 32em; }
.theme-skamah .acties { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 28px; }
.theme-skamah .keurmerk { font-size: 15px; color: var(--tekst); margin-top: 22px; }
.theme-skamah .fotoblad { width: 100%; aspect-ratio: 1.32; background: center / cover no-repeat;
  -webkit-mask: url("/theme/skamah/img/masker.svg") center / 100% 100% no-repeat; mask: url("/theme/skamah/img/masker.svg") center / 100% 100% no-repeat; }
.theme-skamah .fotoblad[data-vorm="ovaal"] { -webkit-mask: none; mask: none; border-radius: 50%; aspect-ratio: 1.3; }
.theme-skamah .fotoblad.breed { aspect-ratio: 1.6; }
.theme-skamah .fotoblad.breed[data-vorm="ovaal"] { aspect-ratio: 1.5; }
.theme-skamah .sk-hero .omrank { z-index: 2; }

/* ranken */
.theme-skamah .rank { position: absolute; pointer-events: none; z-index: 0; overflow: visible; }
.theme-skamah .rank .steel { fill: none; stroke: var(--rank); stroke-width: 3.2; stroke-linecap: round; }
.theme-skamah .rank .zij { fill: none; stroke: var(--rank); stroke-width: 2; stroke-linecap: round; }
.theme-skamah .rank .bes { fill: var(--bes); }
.theme-skamah .rank .blad { fill: var(--t1, var(--rank)); }
.theme-skamah .rank .blad.tint2 { fill: var(--t2, var(--rank2, var(--rank))); }
.theme-skamah .rank .blad.tint3 { fill: var(--t3, var(--t1, var(--rank))); }
@keyframes sk-groei { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes sk-ontluik { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .theme-skamah .groeit .steel, .theme-skamah .groeit .zij { stroke-dasharray: var(--len); animation: sk-groei 1.8s ease-out both; }
  .theme-skamah .groeit .blad, .theme-skamah .groeit .bes { animation: sk-ontluik .7s cubic-bezier(.3,1.4,.5,1) var(--wacht-groei, 0s) both; }
}
.theme-skamah .omrank { z-index: 0; }
.theme-skamah .omrank.groeit .steel { animation-duration: 2.8s; }
.theme-skamah .rank.wacht .steel, .theme-skamah .rank.wacht .zij { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.theme-skamah .rank.wacht .blad, .theme-skamah .rank.wacht .bes { transform: scale(0); animation: none !important; }

/* golven tussen de kleurbanen */
.theme-skamah .golf { display: block; width: 100%; height: 64px; margin: 0; position: relative; z-index: 1; }
@keyframes sk-dein { from { d: var(--d1); } to { d: var(--d2); } }
@media (prefers-reduced-motion: no-preference) { .theme-skamah .golf path { animation: sk-dein 9s ease-in-out infinite alternate; } }

/* plaatshouders voor foto's die er nog niet zijn */
.theme-skamah .ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border-radius: 12px; color: var(--kop-klein); font-size: 15px; font-weight: 600; background: repeating-linear-gradient(135deg, #eef4eb 0 12px, #e5eee2 12px 24px); }
.theme-skamah .ph.klein { width: 150px; height: 52px; padding: 6px; font-size: 13px; border-radius: 6px; flex: none; }
.theme-skamah .ph.portret { width: 100%; aspect-ratio: 1.32; -webkit-mask: url("/theme/skamah/img/masker.svg") center / 100% 100% no-repeat; mask: url("/theme/skamah/img/masker.svg") center / 100% 100% no-repeat; border-radius: 0; }

/* kaarten */
.theme-skamah .drie { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.theme-skamah .tipkaart { background: var(--blad); border-radius: 44px 6px 44px 6px; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.theme-skamah .tipkaart.om { border-radius: 6px 44px 6px 44px; }
.theme-skamah .tipkaart h3 { font-size: 21px; color: var(--kop-klein); }
.theme-skamah .tipkaart p { font-size: 17px; }

/* behandelingen: een klik op de naam opent een kader met omschrijving en duur */
.theme-skamah .beh-naam { all: unset; cursor: pointer; font: inherit; color: inherit; text-decoration: underline dotted 1.5px; text-underline-offset: 5px; text-decoration-color: #b9a493; }
.theme-skamah .beh-naam:hover, .theme-skamah .beh-naam[aria-expanded="true"] { text-decoration-style: solid; }
.theme-skamah .beh-naam:focus-visible { outline: 3px solid var(--kop); outline-offset: 4px; border-radius: 4px; }
.theme-skamah .beh-blad { position: absolute; z-index: 6; left: 0; top: 0; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; padding: 20px 24px 16px;
  background: var(--popblad, #fff); border: 1px solid var(--poprand, #cfdccf); border-radius: 6px; box-shadow: 0 10px 28px rgba(63,90,71,.16);
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; }
.theme-skamah .beh-blad.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .theme-skamah .beh-blad { transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s .15s; }
  .theme-skamah .beh-blad.open { transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s; }
}
.theme-skamah .beh-blad .titel { margin: 0 36px 8px 0; font-family: var(--kop-font); font-size: 19px; font-weight: 600; color: var(--kop-klein); }
.theme-skamah .beh-blad p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--poptekst, var(--tekst)); }
.theme-skamah .beh-blad p.duur { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--poprand, #dfe6df); font-weight: 600; }
.theme-skamah .beh-blad p.concept { margin-top: 6px; text-align: right; font-size: 13px; font-weight: 600; }
.theme-skamah .beh-blad .detail { display: none; position: absolute; pointer-events: none; }
.theme-skamah .sluitblad { all: unset; cursor: pointer; position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 4px; color: var(--kop-klein); font: 400 24px/1 var(--tekst-font); }
.theme-skamah .sluitblad:hover { background: rgba(63,90,71,.08); }
.theme-skamah .sluitblad:focus-visible { outline: 3px solid var(--kop); outline-offset: 2px; }
.theme-skamah .prijs { margin-top: auto !important; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.theme-skamah .prijs .voetje { height: 44px; width: auto; flex: none; }
.theme-skamah .prijs .voetje path { fill: var(--poot); }

/* memo */
.theme-skamah .memo-rij { display: flex; gap: 48px; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; }
.theme-skamah .memo-rij .sectiekop { flex: 1 1 300px; min-width: 0; display: grid; gap: 12px; justify-items: start; margin: 0; }
.theme-skamah .memo-rij .sectiekop p { margin-top: 0; }
.theme-skamah .memo { flex: 1 1 520px; min-width: 0; background: #fffefb; border: 1px solid #dfe9dc; border-top: 6px solid #dccbbd; border-radius: 4px 4px 28px 28px; padding: 28px 32px; display: grid; gap: 16px; }
.theme-skamah .memo-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.theme-skamah .memo-kop p { font-family: var(--kop-font); font-size: 22px; font-weight: 600; color: var(--kop-klein); }
.theme-skamah .memo-kop img { height: 52px; width: auto; }
.theme-skamah .memo dl, .theme-skamah .feiten { margin: 0; display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr); gap: 12px 20px; font-size: 17px; }
.theme-skamah .memo dt, .theme-skamah .feiten dt { font-weight: 600; color: var(--kop-klein); }
.theme-skamah .memo dd, .theme-skamah .feiten dd { margin: 0; }
.theme-skamah .feiten small { font-size: 15px; }
@media (max-width: 560px) {
  .theme-skamah .memo dl, .theme-skamah .feiten { grid-template-columns: 1fr; gap: 2px 0; }
  .theme-skamah .memo dd, .theme-skamah .feiten dd { margin-bottom: 10px; }
}

/* over mij */
.theme-skamah .michelle { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.theme-skamah .michelle > div { min-width: 0; display: grid; gap: 14px; justify-items: start; }
.theme-skamah .michelle h2 { font-size: clamp(28px, 3.4vw, 38px); }
.theme-skamah .michelle .duo { position: relative; width: 100%; padding-bottom: 14%; }
.theme-skamah .michelle .fotoblad.klein { position: absolute; right: -6%; bottom: 0; width: 52%; aspect-ratio: 1.3; border: 6px solid var(--band); box-shadow: 0 6px 18px rgba(63,90,71,.12); }
.theme-skamah .koetshuis { font-family: var(--kop-font); font-style: italic; font-size: 19px; }
@media (max-width: 760px) { .theme-skamah .michelle { grid-template-columns: 1fr; gap: 26px; } }
.theme-skamah .waarom { background: #fffefb; border-radius: 28px 6px 28px 6px; padding: 20px 24px; display: grid; gap: 8px; justify-items: start; }
.theme-skamah .waarom-kop { font-family: var(--kop-font); font-size: 21px; font-weight: 600; color: var(--kop-klein); display: flex; align-items: center; gap: 10px; }
.theme-skamah .waarom p { font-size: 17px; }
.theme-skamah .poot { fill: var(--poot); flex: none; }
.theme-skamah .waarom-kop .poot { width: 24px; height: 24px; }

/* voor wie */
.theme-skamah .voorwie { position: relative; z-index: 1; display: grid; gap: 18px; }
.theme-skamah .sk-volg .voorwie { margin-top: 0; }
.theme-skamah .voorwie-kop { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; }
.theme-skamah .voorwie-kop h3 { font-size: 24px; color: var(--kopgroen, #6a8c73); }
.theme-skamah .voorwie-kop p { font-size: 17px; }
.theme-skamah .vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.theme-skamah .vier .tipkaart { background: #ffffffb3; padding: 20px 22px; gap: 6px; border-radius: 32px 6px 32px 6px; }
.theme-skamah .vier .tipkaart.om { border-radius: 6px 32px 6px 32px; }
.theme-skamah .vier h4 { margin: 0; font-family: var(--kop-font); font-size: 18px; font-weight: 600; color: var(--kop-klein); line-height: 1.25; }
.theme-skamah .vier p { margin: 0; font-size: 15.5px; line-height: 1.42; }
@media (max-width: 1000px) { .theme-skamah .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .theme-skamah .vier { grid-template-columns: 1fr; } }
/* een band die direct op een band volgt, sluit zonder tussenruimte aan */
.theme-skamah .sk.band + .sk.band { padding-top: 0; }

/* winkel */
.theme-skamah .product { text-decoration: none; color: inherit; background: var(--blad); border-radius: 44px 6px 44px 6px; overflow: hidden; display: flex; flex-direction: column; }
.theme-skamah .product .ph, .theme-skamah .product .productfoto { height: 170px; border-radius: 0; }
.theme-skamah .product .productfoto { width: 100%; object-fit: cover; }
.theme-skamah .product-rij { padding: 16px 22px; display: flex; justify-content: space-between; gap: 12px; }
.theme-skamah .product-rij b { color: var(--kop-klein); }
.theme-skamah .sk-noot { margin-top: 18px !important; font-size: 16px; }

/* ervaringen */
.theme-skamah .sk.kort { padding-block: 56px 16px; }
.theme-skamah .leeg { border: 2px dashed #b9d0bd; border-radius: 28px 6px 28px 6px; padding: 26px 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.theme-skamah .leeg p { max-width: 38em; }
.theme-skamah .ervaring { margin: 0; }
.theme-skamah .ervaring blockquote { margin: 0; font-family: var(--kop-font); font-style: italic; font-size: 18px; }
.theme-skamah .ervaring figcaption { font-size: 15px; font-weight: 600; }

/* praktisch */
.theme-skamah .praktisch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.theme-skamah .praktisch figure { margin: 0; display: grid; gap: 8px; }
.theme-skamah .praktisch figcaption { font-size: 15px; }
@media (max-width: 860px) { .theme-skamah .praktisch { grid-template-columns: 1fr; } }
.theme-skamah #praktisch .feiten { max-width: 760px; }
.theme-skamah #praktisch .route { margin-top: 14px; }
.theme-skamah #overmij .binnen, .theme-skamah #praktisch .binnen { position: relative; z-index: 1; }

/* afspraak */
.theme-skamah .afspraak-rij { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; position: relative; z-index: 1; }
.theme-skamah .afspraak-rij > div:first-child { flex: 1 1 380px; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.theme-skamah .afspraak-rij h2 { font-size: clamp(28px, 3.4vw, 38px); }
.theme-skamah .spoor { display: flex; gap: 12px; align-items: center; }
.theme-skamah .spoor .poot { width: 24px; height: 24px; }
.theme-skamah .knoppen { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) { .theme-skamah .afspraak > .rank { transform: scale(.55); transform-origin: 0 100%; } }

/* voetstappen: zool met losse tenen, links en rechts om en om; de tekst staat in de voet.
   A = één doorlopend spoor, B = twee rijen, C = staande voeten (v25) */
.theme-skamah .voetstappen { margin: 0; padding: 0; }
.theme-skamah .voetstappen p { margin: 0; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) { list-style: none; margin: 0; padding: 0 0 10px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 1; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li { position: relative; isolation: isolate; aspect-ratio: 106/50; grid-row: 1; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(even) { grid-row: 2; margin-top: -4%; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(1) { grid-column: 1/3; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(3) { grid-column: 3/5; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(5) { grid-column: 5/7; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(2) { grid-column: 2/4; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(4) { grid-column: 4/6; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(6) { grid-column: 6/8; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) .afdruk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) .staand { display: none; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) .tekst { position: absolute; left: 17%; right: 25%; top: 22%; bottom: 38%; display: flex; flex-direction: column; justify-content: center; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(even) .tekst { top: 38%; bottom: 22%; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) b { font-family: var(--kop-font); font-size: 17px; font-weight: 600; color: var(--kop-klein); line-height: 1.15; margin-bottom: 2px; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) p { font-size: 14px; line-height: 1.3; }
.theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) .nr { position: absolute; left: 2%; top: 50%; transform: translate(0,-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--knop); color: var(--knop-tekst); font: 700 16px/34px var(--tekst-font); text-align: center; }
@keyframes sk-afdruk-in { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .theme-skamah .voetstappen.wacht li { opacity: 0; }
  .theme-skamah .voetstappen.loopt li { animation: sk-afdruk-in .5s ease-out var(--na) both; }
}
@media (max-width: 1100px) {
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) { grid-template-columns: repeat(2, minmax(0, 175px)); justify-content: center; column-gap: 16px; padding-bottom: 45%; }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li, .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(n) { grid-column: auto; grid-row: auto; margin: 0; aspect-ratio: 50/105; }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(even) { translate: 0 48%; }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) .liggend { display: none; }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) .staand { display: block; }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) .tekst, .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(even) .tekst { left: 12%; right: 16%; top: 44%; bottom: 26%; align-items: center; text-align: center; }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) li:nth-child(even) .tekst { left: 16%; right: 12%; }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) .nr { left: 50%; top: 17%; transform: translate(-50%,-50%); }
}
@media (max-width: 600px) {
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) { padding-bottom: calc(50% - 10px); }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) b { font-size: 16px; }
  .theme-skamah .voetstappen:is([data-stijl="rijen"],[data-stijl="spoor"]) p { font-size: 13.5px; }
}
.theme-skamah .voetstappen .zool { fill: color-mix(in srgb, var(--t1, var(--rank)) 38%, #fff); }
.theme-skamah .voetstappen .teen { fill: var(--t1, var(--rank)); }
.theme-skamah .voetstappen li:nth-child(even) .zool { fill: color-mix(in srgb, var(--t2, var(--rank2, var(--rank))) 38%, #fff); }
.theme-skamah .voetstappen li:nth-child(even) .teen { fill: var(--t2, var(--rank2, var(--rank))); }
.theme-skamah .voetstappen:not([data-stijl="v25"]) .afdruk.v25, .theme-skamah .voetstappen[data-stijl="v25"] .afdruk:not(.v25) { display: none; }
.theme-skamah .voetstappen[data-stijl="spoor"] { display: block; height: var(--h, 420px); padding: 0; }
.theme-skamah .voetstappen[data-stijl="spoor"] li, .theme-skamah .voetstappen[data-stijl="spoor"] li:nth-child(n) { position: absolute; left: 0; top: 0; margin: 0; translate: none; width: var(--L, 280px);
  transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -50%) rotate(var(--a, 0deg)); }
@media (max-width: 1100px) { .theme-skamah .voetstappen[data-stijl="spoor"] { padding: 0; } }
.theme-skamah .voetstappen[data-stijl="v25"] .tekst { display: flex; flex-direction: column; align-items: center; }
.theme-skamah .voetstappen[data-stijl="v25"] { list-style: none; margin: 0; padding: 0 0 70px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 18px; position: relative; z-index: 1; }
.theme-skamah .voetstappen[data-stijl="v25"] li { position: relative; isolation: isolate; aspect-ratio: .5; width: 100%; max-width: 200px; justify-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 54% 17% 0; }
.theme-skamah .voetstappen[data-stijl="v25"] li:nth-child(even) { translate: 0 70px; }
.theme-skamah .voetstappen[data-stijl="v25"] .afdruk.v25 { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.theme-skamah .voetstappen[data-stijl="v25"] li:nth-child(odd) .afdruk { transform: rotate(-5deg) scaleX(-1); }
.theme-skamah .voetstappen[data-stijl="v25"] li:nth-child(even) .afdruk { transform: rotate(5deg); }
.theme-skamah .voetstappen[data-stijl="v25"] b { font-family: var(--kop-font); font-size: 19px; font-weight: 600; color: var(--kop-klein); line-height: 1.2; margin-bottom: 4px; }
.theme-skamah .voetstappen[data-stijl="v25"] p { font-size: 15.5px; line-height: 1.38; }
.theme-skamah .voetstappen[data-stijl="v25"] .nr { position: absolute; left: 50%; bottom: calc(11% - 22px); transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--knop); color: var(--knop-tekst); font: 700 20px/44px var(--tekst-font); text-align: center; }
@media (max-width: 1100px) {
  .theme-skamah .voetstappen[data-stijl="v25"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-skamah .voetstappen[data-stijl="v25"] li:nth-child(even) { translate: none; }
  .theme-skamah .voetstappen[data-stijl="v25"] li:nth-child(3n+2) { translate: 0 70px; }
}
@media (max-width: 600px) {
  .theme-skamah .voetstappen[data-stijl="v25"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .theme-skamah .voetstappen[data-stijl="v25"] li:nth-child(n) { translate: none; }
  .theme-skamah .voetstappen[data-stijl="v25"] li:nth-child(even) { translate: 0 60px; }
}

/* voettekst */
.theme-skamah .sk-voet { overflow-x: clip; }
.theme-skamah .voet { background: var(--voet); font-size: 15px; color: var(--tekst); padding-block: 22px; position: relative; overflow: hidden; }
.theme-skamah .voet p { margin: 0; color: inherit; }
.theme-skamah .voet-rij { display: flex; gap: 28px 40px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding-block: 16px 64px; }
.theme-skamah .voet-naam { display: grid; gap: 4px; }
.theme-skamah .voet-naam b { font-family: var(--kop-font); font-size: 20px; color: var(--kop-klein); }
.theme-skamah .voet nav { display: grid; gap: 6px; }
.theme-skamah .voet nav a { color: var(--tekst); }
.theme-skamah .voet-klein { display: grid; gap: 6px; justify-items: start; }
.theme-skamah .voet-klein img { height: 52px; width: auto; }
.theme-skamah .voetpoot { position: absolute; right: 18px; bottom: 14px; width: 36px; height: 36px; }
.theme-skamah .wandel { position: absolute; left: 0; right: 70px; bottom: 10px; height: 44px; pointer-events: none; }
.theme-skamah .wandel .poot { position: absolute; width: 24px; height: 24px; opacity: .7; }
@keyframes sk-stap { 0% { opacity: 0; } 10% { opacity: .75; } 55% { opacity: .6; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .theme-skamah .wandel .poot { opacity: 0; }
  .theme-skamah .wandel.loopt .poot { animation: sk-stap 5s ease-out var(--na) both; }
}

@media (max-width: 760px) {
  .theme-skamah .sk-hero .rank { display: none; }
  .theme-skamah .sk-hero .omrank { display: block; }
  .theme-skamah .sk-hero .binnen { grid-template-columns: 1fr; gap: 30px; }
}

/* tekst op groene vlakken in taupe (#7d6455, 4,6-4,9:1); knoppen en stapcijfers houden hun eigen kleur */
.theme-skamah .sk.band, .theme-skamah .sk-hero, .theme-skamah .voet, .theme-skamah .tipkaart, .theme-skamah .product { --tekst: #7d6455; --kop: #7d6455; --kop-klein: #7d6455; --groen: #7d6455; color: var(--tekst); }
/* koppen Voor wie, Goed geregeld, Over mij en Afspraak groen (grote tekst, >=3:1); Zo gaat een behandeling taupe */
.theme-skamah #memo h2, .theme-skamah #overmij h2, .theme-skamah #afspraak h2 { color: var(--kopgroen, #6a8c73); }
.theme-skamah #stappen h2 { color: #7d6455; }

/* ── seizoenen (thema-instelling; body krijgt s-lente/s-zomer/s-herfst/s-winter) ── */
@keyframes sk-knopblad {
  0% { transform: scale(0,0) rotate(-38deg); filter: brightness(.82) saturate(1.4); }
  8% { transform: scale(.22,.12) rotate(-38deg); filter: brightness(.82) saturate(1.4); }
  42% { transform: scale(.36,.26) rotate(-32deg); filter: brightness(.88) saturate(1.25); }
  88% { transform: scale(1.05,1.02) rotate(3deg); filter: none; }
  100% { transform: scale(1,1) rotate(0); filter: none; }
}
.theme-skamah.s-lente .rank { --lduur: 3.4s; }
.theme-skamah.s-lente .omrank { --lduur: 4.4s; }
@media (prefers-reduced-motion: no-preference) {
  .theme-skamah.s-lente .groeit .steel { animation: sk-groei var(--lduur) cubic-bezier(.4,.1,.6,1) both; }
  .theme-skamah.s-lente .groeit .zij { animation: sk-groei .7s ease-out calc(var(--t,0) * var(--lduur)) both; }
  .theme-skamah.s-lente .groeit .blad { animation: sk-knopblad 2.4s cubic-bezier(.35,.1,.3,1) calc(var(--t,0) * var(--lduur) - .1s + var(--j,0s)) both; }
  .theme-skamah.s-lente .groeit .bes { animation: sk-ontluik .6s cubic-bezier(.3,1.4,.5,1) calc(var(--t,1) * var(--lduur) + .5s) both; }
}
.theme-skamah.s-lente { --band: #ecf4e6; --t1: #bcdcaa; --t2: #c8e2a4; --t3: #acd4b8; --rank: #a9c9b0; --bes: #a9c9b0; --popblad: #edf5e9; --poprand: #a9c9b0; --kopgroen: #5f8a5c; }
.theme-skamah.s-lente .bes.tint2 { fill: #efc3cb; }
.theme-skamah.s-zomer { --t1: #a9c9b0; --t2: #b6cf9a; --t3: #a9c9b0; --popblad: #f1f7ee; --poprand: #a9c9b0; }
.theme-skamah.s-herfst { --accent: #f0cdb8; --accent-h: #e8bea5; --accent-rand: #c98f72; --accent-tekst: #6b3d29; --band: #f3eee4; --t1: #dcc08a; --t2: #e2ad86; --t3: #cfa08e; --rank: #bcb293; --bes: #c99682; --tnerf: #6b5444;
  --popblad: #f6ecd8; --poprand: #d2b48c; --popnerf: #6b5444; --poptekst: #6b5444; --kopgroen: #73784a; }
.theme-skamah.s-winter { --band: #ecf0ee; --t1: #b9c7bf; --t2: #c8d3ce; --t3: #aebcb5; --rank: #aab7b0; --bes: #c3ccc8; --popblad: #f0f4f2; --poprand: #fff; --kopgroen: #5f7d70; }
.theme-skamah.s-winter .rank .blad.kaal { display: none; }
.theme-skamah.s-winter .beh-blad { filter: drop-shadow(0 0 1px #7f978b) drop-shadow(0 8px 16px rgba(63,90,71,.20)); }
.theme-skamah.s-winter .sluitblad { background: #d5e0db; }
.theme-skamah.s-herfst .sluitblad { color: #5a3f2f; }
.theme-skamah.s-lente .beh-blad .detail { display: block; left: 3%; top: 12%; width: 16px; height: 11px; background: #fbf8ee; border: 1px solid #cfc6ae; border-radius: 0 80% 0 80%; transform: rotate(-25deg); }
.theme-skamah.s-herfst .beh-blad .detail { display: block; right: -1%; top: 21%; width: 26px; height: 20px; background: linear-gradient(135deg, #e6cfa6, #f6ecd8 70%); border: 1.5px solid #d2b48c; border-radius: 0 100% 0 100%; transform: rotate(18deg); box-shadow: -2px 3px 4px rgba(107,84,68,.18); }
.theme-skamah.s-herfst .sk.band, .theme-skamah.s-herfst .sk-hero, .theme-skamah.s-herfst .voet, .theme-skamah.s-herfst .tipkaart, .theme-skamah.s-herfst .product { --tekst: #6b5444; --kop: #6b5444; --kop-klein: #6b5444; --groen: #6b5444; }
.theme-skamah.s-herfst #stappen h2 { color: #6b5444; }
.theme-skamah .dwarrel { position: fixed; left: 0; top: 0; width: var(--m, 16px); height: var(--m, 16px); pointer-events: none; z-index: 5; overflow: visible; }
.theme-skamah .dwarrel.vlok { filter: drop-shadow(0 1px 2px rgba(63,90,71,.25)); }
@media (prefers-reduced-motion: no-preference) {
  .theme-skamah .dwarrel { animation: sk-dwarrel var(--duur, 7s) ease-in-out both; }
  .theme-skamah .dwarrel.stijg { animation-name: sk-stijg; }
  .theme-skamah .dwarrel.vlok { animation-name: sk-sneeuw; animation-timing-function: linear; }
}
@keyframes sk-sneeuw {
  0% { transform: translate(var(--x), var(--y)) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  25% { transform: translate(calc(var(--x) + 16px), calc(var(--y) + 65px)) rotate(40deg); }
  50% { transform: translate(calc(var(--x) - 12px), calc(var(--y) + 130px)) rotate(85deg); opacity: .85; }
  75% { transform: translate(calc(var(--x) + 12px), calc(var(--y) + 195px)) rotate(125deg); opacity: .5; }
  100% { transform: translate(calc(var(--x) - 4px), calc(var(--y) + 260px)) rotate(165deg); opacity: 0; }
}
@keyframes sk-dwarrel {
  0% { transform: translate(var(--x), var(--y)) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  30% { transform: translate(calc(var(--x) + 26px), calc(var(--y) + 70px)) rotate(70deg); }
  55% { transform: translate(calc(var(--x) - 14px), calc(var(--y) + 140px)) rotate(-30deg); }
  80% { transform: translate(calc(var(--x) + 18px), calc(var(--y) + 205px)) rotate(110deg); opacity: 1; }
  100% { transform: translate(calc(var(--x) + 4px), calc(var(--y) + 250px)) rotate(60deg); opacity: 0; }
}
@keyframes sk-stijg {
  0% { transform: translate(var(--x), var(--y)); opacity: 0; }
  15% { opacity: .9; }
  50% { transform: translate(calc(var(--x) + 18px), calc(var(--y) - 50px)); }
  100% { transform: translate(calc(var(--x) - 6px), calc(var(--y) - 110px)); opacity: 0; }
}