/* L'Unica Kapsalon, Genk. Zelf gehoste fonts, palet uit het logo.
   Lettertype: Literata voor koppen (gekozen 20/9/26), Archivo voor tekst.
   Kleur: 95 procent van het logo is blush en creme, 4 procent goud, 0,6 procent zwart.
   Vorm: gesplitste paginakop in de blush van het logo, donkere band enkel voor
   de galerij en de actiekaart, en geen enkel verzadigd vlak buiten het haar. */

/* Literata: door Google besteld voor lezen op scherm (Play Books). Laag contrast
   en een grote x-hoogte, dus geen haarlijnen die op een telefoon wegvallen. Hier
   stond tot 20/9/26 een Didone, die als schermletter te dun bleek (oordeel
   Danilo). De opsz-as blijft in het bestand: de browser past de vorm zelf aan
   de lettergrootte aan. De cursief is geschrapt, die werd nergens gebruikt en
   woog 62 KB. */
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* vaste merkkleuren, gemeten uit het logobestand */
  --goud:#a9762f;          /* de ring in het logo */
  --goud-licht:#c9974a;
  --goud-diep:#8a5f24;
  --inkt:#1f1613;          /* de schrijfletter in het logo */
  --blush:#f7e7e1;
  --creme:#fdf6f4;         /* 95 procent van het logo is deze familie */
  --wit:#fffdfb;

  --display:'Literata',Georgia,serif;
  --tekst:'Archivo',-apple-system,'Segoe UI',system-ui,sans-serif;
  --wrap:1240px;
  --smal:760px;
  --sec:4.25rem;
}

:root{
  --pagina-bg:var(--creme);
  --pagina-tekst:var(--inkt);
  --wissel-bg:var(--blush);
  --wissel-tekst:var(--inkt);
  --band-bg:var(--inkt);
  --band-tekst:var(--wit);
  --grijs:#54433c;
  --grijs-band:#a2908a;
  --accent:var(--goud-diep);      /* goud voor tekst, 5,25 op 1 */
  --accent-vlak:var(--goud-diep); /* knopvlak met witte tekst, 5,53 op 1 */
  --accent-vlak-tekst:var(--wit);
  --lijn:rgba(31,22,19,.16);
  --lijn-zacht:rgba(31,22,19,.09);
}

/* Reset: zonder deze regel staan knoppen en velden in de systeemletter (les leadlab 9/9/26) */
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--pagina-bg);color:var(--pagina-tekst);
  font-family:var(--tekst);font-size:18px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;padding-bottom:54px;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.smal{max-width:var(--smal)}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.1rem}
/* De koppen hebben margin 0, dus zonder deze regel plakte de tekst eronder
   tegen de kop aan (gezien 24/9/26 op elke pagina). Staat na p, anders zet de
   margin van p hem terug op 0. */
h1 + *,h2 + *{margin-top:1rem}
.lead{font-size:1.1rem;color:var(--inkt);max-width:60ch}
.eyebrow{font-family:var(--tekst);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 1.1rem}

/* beeld: enkel de galerij en de actiekaart krijgen een warme waas, al de rest toont de foto zoals ze is */
.beeld{position:relative;overflow:hidden;background:var(--band-bg)}
.beeld img{width:100%;height:100%;object-fit:cover}
.spiegel .beeld::after,.actiekaart .beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(169,118,47,.14),rgba(31,22,19,.22));mix-blend-mode:multiply}

/* ---------- kop ---------- */
.kop{border-bottom:1px solid var(--lijn);background:var(--pagina-bg)}
.balk{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:92px;padding-block:1rem}
.merk{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.merk img{width:52px;height:52px;border-radius:50%}
.merk b{font-family:var(--display);font-weight:500;font-size:1.22rem;letter-spacing:.22em;text-transform:uppercase;display:block;line-height:1}
.merk small{font-family:var(--tekst);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);display:block;margin-top:.4rem;font-weight:600}
.menu{display:flex;gap:1.7rem;font-size:.98rem;font-weight:500}
.menu a{text-decoration:none;opacity:.82;padding-bottom:3px;border-bottom:1px solid transparent}
.menu a:hover{opacity:1;color:var(--accent)}
.menu a[aria-current]{opacity:1;color:var(--accent);border-bottom-color:var(--accent)}
.nav-knop{display:none;align-items:center;gap:.6rem;background:none;border:0;padding:.6rem 0;cursor:pointer;color:var(--pagina-tekst)}
.nav-knop-streep{position:relative;display:block;width:26px;height:1px;background:currentColor}
.nav-knop-streep::before,.nav-knop-streep::after{content:"";position:absolute;left:0;width:26px;height:1px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-knop-streep::before{top:-7px}
.nav-knop-streep::after{top:7px}
.nav-knop-tekst{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.nav-knop[aria-expanded="true"] .nav-knop-streep{background:transparent}
.nav-knop[aria-expanded="true"] .nav-knop-streep::before{transform:translateY(7px) rotate(45deg)}
.nav-knop[aria-expanded="true"] .nav-knop-streep::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- knoppen ---------- */
/* Enkel de kleuren animeren, nooit maat of padding: dan kan een knop bij het laden
   niet zichtbaar groeien (zie de paginakop hieronder). */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:0;font-size:1rem;font-weight:600;text-decoration:none;border:1px solid var(--accent-vlak);font-family:var(--tekst);transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.knop-vol{background:var(--accent-vlak);color:var(--accent-vlak-tekst)}
.knop-vol:hover{background:var(--pagina-tekst);border-color:var(--pagina-tekst);color:var(--pagina-bg)}
.knop-leeg{background:transparent;color:var(--pagina-tekst);border-color:var(--lijn)}
.knop-leeg:hover{border-color:var(--accent);color:var(--accent)}
.knoppen{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem}

/* ---------- secties ---------- */
section{padding:var(--sec) 0}
.sec-kop{max-width:56ch;margin-bottom:2rem}

.licht{background:var(--wissel-bg);color:var(--wissel-tekst)}
.licht .lead{color:var(--wissel-tekst)}
.licht .knop-leeg{color:var(--wissel-tekst);border-color:var(--lijn)}
.licht .knop-vol{background:var(--inkt);color:var(--goud-licht);border-color:var(--inkt)}
.licht .knop-vol:hover{background:var(--accent-vlak);border-color:var(--accent-vlak);color:var(--accent-vlak-tekst)}

/* donkere band, in beide paletten echt donker */
.donkerder{background:var(--band-bg);color:var(--band-tekst)}
.donkerder .lead{color:var(--grijs-band)}
.donkerder .eyebrow,.donkerder .groep h2,.donkerder .groep h3,.donkerder .dienst .vanaf,.donkerder .spiegel span{color:var(--goud-licht)}
.donkerder .knop-vol{background:var(--goud-licht);color:var(--inkt);border-color:var(--goud-licht)}
.donkerder .knop-vol:hover{background:var(--wit);border-color:var(--wit);color:var(--inkt)}
.donkerder .knop-leeg{color:var(--wit);border-color:rgba(255,253,251,.28)}
.donkerder .knop-leeg:hover{border-color:var(--goud-licht);color:var(--goud-licht)}
.donkerder .regel,.donkerder .uur,.donkerder .lijst li{border-bottom-color:rgba(255,253,251,.1)}
.donkerder .lijst li{color:var(--grijs-band)}
.donkerder .lijst li b{color:var(--wit)}
.donkerder .lijst li::before{background:var(--goud-licht)}
.donkerder .uren,.donkerder .feiten{border-top-color:rgba(201,151,74,.3)}
.donkerder .groep h2,.donkerder .groep h3{border-bottom-color:rgba(201,151,74,.3)}

/* kruimel, standaard op een lichte achtergrond; de donkere paginakop zet eigen kleuren */
.kruimel{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);margin:0 0 1rem}
/* Onderlijnd sinds 2/11/26: een link die enkel aan zijn kleur te herkennen is, telt Lighthouse als link-in-text-block */
.kruimel a{text-decoration:underline;text-underline-offset:.2em;color:var(--accent)}

/* Tekstkop zonder foto: prijzen, contact, cadeaubon en privacybeleid */
.paginatitel{padding:clamp(3.5rem,7vw,6rem) 0 0}
.paginatitel .sec-kop{margin-bottom:0}
.paginatitel + section{padding-top:clamp(2.75rem,5vw,4.5rem)}
.tekstpagina h2:not(:first-child){margin-top:2.6rem}

/* ---------- drie diensten, tekst met haarlijnen ---------- */
.diensten{display:grid;grid-template-columns:1fr}
/* Flex in een kolom, zodat de vanaf-prijs onderaan uitlijnt, ook als de ene tekst langer is */
.dienst{display:flex;flex-direction:column;text-decoration:none;padding:2rem 0;border-top:1px solid var(--lijn)}
.dienst h3{margin-bottom:.6rem;font-size:1.55rem}
.diensten--beeld .dienst .beeld,
.diensten--beeld .dienst .fotoplek{margin-bottom:1.3rem}
.dienst p{color:var(--grijs);font-size:.98rem;margin:0 0 1rem;max-width:40ch}
.dienst .vanaf{font-family:var(--display);color:var(--accent);font-size:1.1rem;display:block;margin-top:auto}
.dienst:hover h3{color:var(--accent)}
.dienst:last-child{border-bottom:1px solid var(--lijn)}

/* ---------- spiegelwand ---------- */
.spiegelwand{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lijn)}
.spiegel{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;text-decoration:none;color:var(--wit)}
.spiegel .beeld,.spiegel .fotoplek{position:absolute;inset:0}
.spiegel .fotoplek{background:var(--inkt);justify-content:flex-start;padding:1.3rem 1.1rem 4.5rem}
.spiegel .op{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.3rem 1.1rem;background:linear-gradient(to top,rgba(20,16,15,.9),transparent)}
.spiegel h3{font-size:1.1rem;margin-bottom:.2rem}
.spiegel span{font-family:var(--display);color:var(--goud-licht);font-size:1rem}
/* De galerij loopt tot de rand: geen lege donkere band eronder */
.sec-galerij{padding-bottom:0}

/* ---------- prijstabel ---------- */
.prijzen{display:grid;grid-template-columns:1fr;gap:2.6rem 4.5rem}
/* Groepskop: h2 op /prijzen/ en /contact/ (na een h1, kopvolgorde 21/10/26), h3 op de andere pagina's. Zelfde opmaak. */
.groep h2,.groep h3{color:var(--accent);font-family:var(--tekst);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;padding-bottom:.7rem;border-bottom:1px solid var(--lijn);margin-bottom:.6rem}
.groep h2 + *{margin-top:0}
.groep .sub{font-size:.85rem;color:var(--grijs);margin:.5rem 0 .2rem}
.regel{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:.62rem 0;font-size:1rem;border-bottom:1px solid var(--lijn-zacht)}
.regel b{font-family:var(--display);font-weight:500;font-size:1.1rem;white-space:nowrap}
/* Regel met een link of gewone tekst rechts, zoals op de contactpagina */
.regel--tekst b{font-family:var(--tekst);font-size:1rem}
.regel a{text-decoration:none;color:var(--accent)}
.regel a:hover{text-decoration:underline}
.groep + .groep{margin-top:2.6rem}
.beeld + .groep,.fotoplek + .groep{margin-top:2.4rem}
.groep + .uren{border-top:0}
/* De volledige prijslijst in kolommen: zo sluit elke groep aan op de vorige en
   blijft er geen gat naast een korte groep (Brushing naast Snitten). */
.prijzen--lijst{display:block;columns:2 22rem;column-gap:4.5rem}
.prijzen--lijst .groep{break-inside:avoid;margin:0 0 2.6rem}
.prijzen .groep + .groep{margin-top:0}

/* ---------- twee kolommen ---------- */
.duo{display:grid;grid-template-columns:1fr;gap:2.8rem;align-items:start}
.duo.midden{align-items:center}
/* Valt een foto weg (live, zolang ze niet aangeleverd is), dan neemt de tekst de rij */
.duo > :only-child{grid-column:1 / -1}

/* ---------- lijst ---------- */
.lijst{list-style:none;padding:0;margin:0 0 1.5rem}
h2 + .lijst{margin-top:1.2rem}
.lijst:last-child{margin-bottom:0}
.lijst li{padding:.55rem 0 .55rem 1.6rem;position:relative;border-bottom:1px solid var(--lijn-zacht);color:var(--grijs)}
.lijst li::before{content:"";position:absolute;left:0;top:1.25rem;width:8px;height:1px;background:var(--accent)}
.lijst li b{color:var(--pagina-tekst);font-weight:600}
.licht .lijst li b{color:var(--wissel-tekst)}

/* ---------- feitenblok ---------- */
.feiten{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;border-top:1px solid var(--lijn);padding-top:1.6rem;margin-top:1.8rem}
.feiten:first-child{margin-top:0}
.feiten div b{font-family:var(--display);font-size:1.7rem;color:var(--accent);display:block;line-height:1.1}
.feiten div span{display:block;font-size:.88rem;line-height:1.5;color:var(--grijs)}

/* ---------- uren ---------- */
.uren{border-top:1px solid var(--lijn)}
.uur{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--lijn-zacht);font-size:1rem}
.uur b{font-family:var(--display);font-weight:500;font-variant-numeric:tabular-nums}
.uur.dicht span,.uur.dicht b{color:var(--grijs);font-weight:400}

/* ---------- voet ---------- */
.voet{border-top:1px solid var(--lijn);padding:4rem 0 1.6rem;font-size:.93rem}
.voet-grid{display:grid;grid-template-columns:1fr;gap:2.3rem}
.voet h2{font-family:var(--tekst);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem;font-weight:600;line-height:inherit;text-wrap:inherit}
.voet a{text-decoration:none;color:var(--grijs)}
.voet a:hover{color:var(--accent)}
.voet p{margin:0 0 .35rem;color:var(--grijs)}
/* Instagram en Facebook onder het logo, enkel het icoon, klikvlak 44 pixels */
.voet-social{display:flex;gap:.25rem;margin:.6rem 0 0 -.6rem}
.voet-social a{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem}
.voet-social svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.voet-klein{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--lijn);font-size:.78rem;color:var(--grijs);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- vaste balk op gsm ---------- */
.gsm-balk{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;background:var(--accent-vlak)}
.gsm-balk a{padding:1rem;text-align:center;color:var(--accent-vlak-tekst);text-decoration:none;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.gsm-balk a+a{background:var(--inkt);color:var(--goud-licht)}

/* ---------- fotoplekken, alleen in de werkversie ----------
   Genummerd zodat Carmela per nummer kan aanleveren. De lijst staat in includes/fotolijst.php. */
.fotoplek{
  display:flex;flex-direction:column;justify-content:center;gap:.55rem;
  padding:1.6rem 1.4rem;border:1px dashed var(--accent);background:transparent;
  color:var(--grijs);text-align:left;
}
.fotoplek-nr{font-family:var(--tekst);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.fotoplek-wat{font-size:.92rem;line-height:1.55;max-width:38ch}
.fotoplek-vorm{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.donkerder .fotoplek,.kopbeeld-foto .fotoplek,.actiekaart .fotoplek{border-color:var(--goud-licht);color:var(--grijs-band)}
.donkerder .fotoplek-nr,.kopbeeld-foto .fotoplek-nr,.actiekaart .fotoplek-nr{color:var(--goud-licht)}

.beeld .foto-nr{
  position:absolute;top:.6rem;left:.6rem;z-index:3;
  font-family:var(--tekst);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:.3rem .55rem;background:rgba(20,16,15,.72);color:var(--goud-licht);
}
.beeld .foto-nr--tijdelijk{background:var(--goud-licht);color:var(--inkt)}

/* ---------- ontbrekende tekst, alleen in de werkversie ----------
   Alles wat Carmela nog moet aanleveren staat zo gemarkeerd. Niets hiervan is
   verzonnen tekst die er echt uitziet. Komt uit gat() in includes/werkversie.php
   en verdwijnt live vanzelf. */
.tevragen{border:1px dashed var(--accent);padding:1.1rem 1.2rem;margin:1.2rem 0;font-size:.95rem;color:var(--grijs);max-width:52ch}
.tevragen b{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem;font-weight:600}
.donkerder .tevragen{border-color:var(--goud-licht);color:var(--grijs-band)}
.donkerder .tevragen b{color:var(--goud-licht)}

/* Tablet. Tot 24/9/26 bleef alles tot 920px in één kolom, waardoor een staande
   foto op 820px bijna een meter hoog werd en het blok Behandelingen vier
   schermen lang. Vanaf 700px staan de blokken daarom al naast elkaar. */
@media (min-width:700px){
  .diensten{grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,3vw,3.5rem)}
  .diensten .dienst{border-bottom:1px solid var(--lijn)}
  .spiegelwand{grid-template-columns:repeat(4,1fr)}
  .prijzen{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}
  .duo.breed-links{grid-template-columns:1.25fr .75fr}
  .voet-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:699px){
  /* Knoppen die onder elkaar vallen, vullen de breedte: geen twee ongelijke blokjes */
  .knoppen .knop{flex:1 1 auto}
  /* Een foto in één kolom nooit hoger dan het scherm */
  .duo .beeld,.duo .fotoplek,.diensten--beeld .beeld,.diensten--beeld .fotoplek{max-height:32rem}
}
@media (min-width:920px){
  :root{--sec:5.5rem}
  body{padding-bottom:0}
  .voet-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .gsm-balk{display:none}
}
@media (max-width:919px){
  .balk .knop{display:none}   /* de vaste balk onderaan doet het bellen op gsm */
}
/* Het volledige menu past pas vanaf 1080px naast het logo en de belknop. Tot
   24/9/26 stond het er vanaf 920px, en tussen 920 en ongeveer 1060px schoof het
   logo over Knippen en brak "Over mij" en het telefoonnummer over twee regels. */
@media (max-width:1079px){
  .nav-knop{display:flex}
  .balk .knop{margin-left:auto}  /* het menu staat hier los van de balk, dus de knop schuift naar rechts */
  /* Menu als overlay. Zonder deze regels had de site op gsm helemaal geen
     navigatie: het menu stond op display:none zonder vervanging.
     De overlay begint onder de header, zodat het logo en de sluitknop zichtbaar
     blijven. Een z-index op .kop helpt daar niet: het menu staat IN de header,
     en een ouder kan nooit boven zijn eigen kind komen. Daarom een vaste
     header-hoogte in --kop-h, die de overlay overneemt. */
  .kop{--kop-h:77px}
  .balk{height:calc(var(--kop-h) - 1px);min-height:0;padding-block:0}
  .merk img{width:44px;height:44px}
  .menu{position:fixed;top:var(--kop-h);left:0;right:0;bottom:0;z-index:70;display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:2rem 1.5rem 6rem;background:var(--inkt);overflow-y:auto}
  .menu.is-open{display:flex}
  .menu a{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,7vw,2.3rem);line-height:1.25;letter-spacing:0;text-transform:none;opacity:1;color:var(--wit);padding:.5rem 0;border-bottom:0;width:100%}
  .menu a+a{border-top:1px solid rgba(255,253,251,.14)}
  .menu a[aria-current]{color:var(--goud-licht);border-bottom-color:transparent}
  .menu a:hover{color:var(--goud-licht)}
  body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
}

/* ---------- gesplitste paginakop (20/9/26) ----------
   Links een tekstpaneel in blush (licht sinds 12/10/26, daarvoor zwart), rechts de foto. Het paneel
   lijnt links uit met .wrap zodat de h1 op dezelfde lijn staat als de koppen
   eronder. De foto krijgt geen donker verloop meer: er staat geen tekst overheen,
   dus de haarkleur blijft zoals ze is. Onder 920px stapelt het paneel boven de foto.
   Sinds 2/11/26 (Danilo: op desktop te ver uitvergroot en afgekapt) is de foto een
   staand kader van 4 op 5 dat rechts stopt op de lijn van .wrap, in plaats van de
   helft van het scherm tot aan de rand. Alle kopfoto's zijn staand (3:4) of
   vierkant: op 1920px liet het oude kader van 953 op 570 minder dan de helft zien.
   De derde kolom is de rechtermarge van .wrap. */
.kopbeeld{--kop-h:min(58svh,520px);display:grid;grid-template-columns:minmax(0,1fr) calc(var(--kop-h) * .8) max(1.5rem,calc((100% - var(--wrap))/2 + 1.5rem));background:var(--blush);color:var(--inkt)}
.kopbeeld--hoog{--kop-h:min(66svh,600px)}
.kopbeeld-tekst{display:flex;align-items:center;min-height:var(--kop-h);padding-block:clamp(3rem,6vw,5rem);padding-inline:max(1.5rem,calc((100vw - var(--wrap))/2 + 1.5rem)) clamp(2rem,4vw,4rem)}
/* Live zonder aangeleverde kopfoto: het tekstpaneel neemt de volle breedte */
.kopbeeld--zonder-foto{grid-template-columns:1fr}
.kopbeeld--zonder-foto .kopbeeld-tekst{min-height:0}
/* De kop is 10 procent van de tekstkolom. Tot 24/9/26 via een container-query
   (10cqi), maar binnen een container startte Chrome de knoppen bij het laden als
   blauwe standaardlink. Daarom nu dezelfde maat in vw uitgerekend: vanaf 920px is
   de kolom 46vw min 24px, eronder 100vw min 56px. Met gewone vw viel de kop tussen
   920 en 1150px over drie regels. */
.kopbeeld-in{width:100%}
.kopbeeld-foto{position:relative;overflow:hidden;background:var(--blush)}
.kopbeeld-foto .beeld,.kopbeeld-foto .fotoplek{position:absolute;inset:0}
.kopbeeld-in h1{color:var(--inkt);max-width:22ch;font-size:clamp(2rem,4.6vw - .15rem,3.4rem)}
.kopbeeld-in .lead{color:var(--inkt);margin-top:1.3rem;max-width:42ch}
.kopbeeld-in .kruimel{color:var(--grijs);margin-bottom:1rem}
.kopbeeld-in .kruimel a{color:var(--accent)}
.kopbeeld-in .knop-vol{background:var(--goud-diep);color:var(--wit);border-color:var(--goud-diep)}
.kopbeeld-in .knop-vol:hover{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.kopbeeld-in .knop-leeg{color:var(--inkt);border-color:var(--inkt)}
.kopbeeld-in .knop-leeg:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- actiekaart boven de voet ----------
   Eén kaart met een sfeerbeeld erin en een warm verloop erover, naar het model van
   isomosi.be. Staat op elke pagina net boven de voet. */
.actieband{padding:var(--sec) 0;background:var(--pagina-bg)}
/* Na een sectie in dezelfde crèmekleur telde de witruimte dubbel: 128px onderaan
   de sectie plus 128px bovenaan de band, samen 256px leeg boven de kaart. */
section:not(.licht):not(.donkerder) + .actieband{padding-top:0}
.actiekaart{position:relative;isolation:isolate;overflow:hidden;background:var(--inkt);color:var(--wit);min-height:20rem;display:grid;gap:1.8rem;align-content:center;padding:2.4rem 1.6rem}
.actiekaart .beeld,.actiekaart .fotoplek{position:absolute;inset:0;z-index:-1}
.actiekaart .beeld::after{background:linear-gradient(100deg,rgba(31,22,19,.94) 0%,rgba(31,22,19,.84) 46%,rgba(169,118,47,.58) 100%);mix-blend-mode:normal}
.actiekaart .fotoplek{background:var(--inkt)}
.actiekaart h2{color:var(--wit);max-width:20ch}
.actiekaart .lead{color:#d9ccc4;margin-top:.9rem;max-width:46ch}
.actiekaart .knoppen{margin-top:0}
.actiekaart .knop-vol{background:var(--goud-licht);color:var(--inkt);border-color:var(--goud-licht)}
.actiekaart .knop-vol:hover{background:var(--wit);border-color:var(--wit)}
.actiekaart .knop-leeg{color:var(--wit);border-color:rgba(255,253,251,.34)}
.actiekaart .knop-leeg:hover{border-color:var(--goud-licht);color:var(--goud-licht)}
.actie-feiten{list-style:none;margin:0;padding:1.4rem 0 0;border-top:1px solid rgba(201,151,74,.4);display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;font-size:.86rem;color:#d9ccc4}
.actie-feiten li{display:flex;align-items:center;gap:.5rem}
.actie-feiten li::before{content:"";width:7px;height:7px;border:1.5px solid var(--goud-licht);border-radius:50%;flex:none}
.actie-feiten a{color:#d9ccc4;text-decoration:none}
.actie-feiten a:hover{color:var(--goud-licht)}

@media (min-width:920px){
  .actiekaart{padding:4.2rem 4rem;min-height:23rem}
  .actiekaart .knoppen{display:flex}
}
@media (max-width:919px){
  .kopbeeld{grid-template-columns:1fr}
  .kopbeeld-tekst,.kopbeeld--hoog .kopbeeld-tekst{min-height:0;padding-block:clamp(2.6rem,9vw,3.6rem)}
  .kopbeeld-foto{aspect-ratio:4 / 3}
  .kopbeeld-in h1{max-width:none;font-size:clamp(2rem,10vw - .35rem,3.5rem)}
  .kopbeeld-in .lead{max-width:none}
}
/* Een venster hoger dan 2000px bestaat op geen toestel, wel in een headless render.
   Zonder deze regel rekt svh het tekstpaneel daar uit. */
@media (min-height:2000px){
  .kopbeeld,.kopbeeld--hoog{--kop-h:520px}
}

/* Skip-link: onzichtbaar tot hij focus krijgt met de tab-toets */
.overslaan{position:absolute;left:-9999px;top:0;z-index:100;padding:.9rem 1.3rem;background:var(--inkt);color:var(--wit);text-decoration:none;font-size:.85rem;font-weight:600}
.overslaan:focus{left:0}

/* ---------- icoon in de knoppen (12/10/26) ----------
   Telefoon bij bellen, het WhatsApp-logo bij WhatsApp, pijl bij al de rest. Het icoon
   hangt aan het adres van de link, dus een nieuwe knop krijgt het vanzelf. Het
   beweegt enkel met een muis: op een aanraakscherm blijft een hover hangen. */
.knop[href^="tel:"]::before,.knop[href*="wa.me"]::before,.knop:not([href^="tel:"]):not([href*="wa.me"])::after{
  content:"";width:1.05rem;height:1.05rem;flex:none;background:currentColor;
  -webkit-mask:var(--icoon) center/contain no-repeat;mask:var(--icoon) center/contain no-repeat;
  transition:transform .22s ease;
}
.knop[href^="tel:"]{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.knop[href*="wa.me"]{--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E")}
.knop:not([href^="tel:"]):not([href*="wa.me"]){--icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
@keyframes knop-bel{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(13deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(6deg)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .knop[href^="tel:"]:hover::before{animation:knop-bel .55s ease}
  .knop[href*="wa.me"]:hover::before{transform:translateY(-2px) rotate(-10deg)}
  .knop:not([href^="tel:"]):not([href*="wa.me"]):hover::after{transform:translateX(5px)}
}