/* Femme Kliniek: gedeeld stylesheet voor de kennisbank en de artspagina.
   Variabelen, letters en componenten zijn overgenomen uit index.html. */
:root{
  --grond:#F6F2F3; --vlak:#EDE3E6; --vlak2:#E4D6DC; --lijn:#D8C6CE;
  --pruim:#4B2740; --pruim-diep:#36192E; --mauve:#B98FA3; --mauve-tekst:#8A6478;
  --inkt:#2A2226; --inkt-zacht:#5E5158; --wit:#FFFFFF;
  --f-kop:'Fraunces',Georgia,'Times New Roman',serif;
  --f-tekst:'Figtree','Helvetica Neue',Helvetica,Arial,sans-serif;
  --maat:min(1120px,92vw);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --grond:#211A1F; --vlak:#2C232A; --vlak2:#372C34; --lijn:#4A3B45;
  --pruim:#D9B9CB; --pruim-diep:#E8D2DE; --mauve:#9C7A8C; --mauve-tekst:#C7A6B8;
  --inkt:#F1E9EC; --inkt-zacht:#C4B6BD; --wit:#2C232A;
}}
:root[data-theme="dark"]{
  --grond:#211A1F; --vlak:#2C232A; --vlak2:#372C34; --lijn:#4A3B45;
  --pruim:#D9B9CB; --pruim-diep:#E8D2DE; --mauve:#9C7A8C; --mauve-tekst:#C7A6B8;
  --inkt:#F1E9EC; --inkt-zacht:#C4B6BD; --wit:#2C232A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grond);color:var(--inkt);font-family:var(--f-tekst);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-kop);font-weight:400;line-height:1.15;margin:0;text-wrap:balance;color:var(--pruim)}
h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:300;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:300}
h3{font-size:1.2rem;font-weight:500}
p{margin:0}
a{color:inherit}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve-tekst);font-weight:600}
.wrap{width:var(--maat);margin:0 auto}
.lead{font-size:1.15rem;color:var(--inkt-zacht);max-width:36em}
.klein{font-size:.9rem;color:var(--inkt-zacht)}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.5em;border-radius:999px;font-weight:600;text-decoration:none;border:1.5px solid transparent;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.knop:focus-visible{outline:3px solid var(--mauve);outline-offset:3px}
.knop.vol{background:var(--pruim);color:var(--grond)}
.knop.vol:hover{background:var(--pruim-diep);transform:translateY(-1px);box-shadow:0 6px 16px -10px var(--pruim)}
.knop.lijn{border-color:var(--pruim);color:var(--pruim)}
.knop.lijn:hover{background:var(--vlak);transform:translateY(-1px)}

/* navigatie */
header.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--grond) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:74px}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--pruim)}
.logo svg{width:34px;height:34px}
.logo .naam{font-family:var(--f-kop);font-style:italic;font-weight:300;font-size:1.7rem;line-height:1}
.logo .sub{font-size:.62rem;letter-spacing:.32em;font-weight:600;color:var(--mauve-tekst);display:block;margin-top:2px}
.nav ul{list-style:none;display:flex;gap:1.35rem;margin:0;padding:0}
.nav ul a{text-decoration:none;font-size:.95rem;color:var(--inkt-zacht);transition:color .2s}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--pruim)}
.nav ul a[aria-current="page"]{font-weight:600}
.nav ul a,.nav .knop{white-space:nowrap}
@media (max-width:1100px){.nav>nav ul{display:none}}
/* uitklapmenu voor telefoon en tablet */
.mobielmenu{display:none;position:relative}
.mobielmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;padding:.7em 1.1em;border:1.5px solid var(--pruim);border-radius:999px;font-weight:600;font-size:.95rem;color:var(--pruim);user-select:none}
.mobielmenu summary::-webkit-details-marker{display:none}
.mobielmenu summary:focus-visible{outline:3px solid var(--mauve);outline-offset:3px}
.mobielmenu .streepjes{width:16px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}
.mobielmenu .streepjes::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transform:translateY(-50%)}
.mobielmenu[open] summary{background:var(--pruim);color:#fff}
.mobielmenu .paneel{position:fixed;left:0;right:0;top:74px;background:var(--grond);border-bottom:1px solid var(--lijn);box-shadow:0 24px 40px -30px var(--pruim);padding:.6rem 0 1.4rem;max-height:calc(100vh - 74px);overflow:auto}
.mobielmenu .paneel ul{list-style:none;margin:0 auto;padding:0 1.25rem;max-width:1120px;display:block}
.mobielmenu .paneel li{border-bottom:1px solid var(--lijn)}
.mobielmenu .paneel li a{display:block;padding:1rem .2rem;text-decoration:none;font-size:1.05rem;color:var(--inkt);white-space:normal}
.mobielmenu .paneel li a[aria-current="page"]{color:var(--pruim);font-weight:600}
.mobielmenu .paneel .knop{margin:1.2rem 1.25rem 0;display:none}
.nav .rechts{display:flex;align-items:center;gap:.7rem}
@media (max-width:1100px){.mobielmenu{display:block}}
@media (max-width:560px){.nav .rechts>.knop{display:none}.mobielmenu .paneel .knop{display:inline-flex}}


/* kruimelpad */
.kruimel{padding:1.4rem 0 0;font-size:.88rem;color:var(--inkt-zacht)}
.kruimel ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.kruimel li+li::before{content:"/";margin-right:.45rem;color:var(--mauve)}
.kruimel a{text-decoration:none}
.kruimel a:hover{color:var(--pruim);text-decoration:underline}

/* paginakop */
.paginakop{padding:2.6rem 0 2.8rem;display:grid;gap:1rem;max-width:44em}
.paginakop .lead{margin-top:.3rem}

/* lopende tekst van een artikel */
.artikel{max-width:40em;padding-bottom:4.5rem;display:grid;gap:2.6rem}
.deel{display:grid;gap:.9rem}
.deel a{color:var(--pruim);text-underline-offset:.18em}
.deel a:hover{color:var(--pruim-diep)}
.deel ul{margin:0;padding-left:1.15em;color:var(--inkt-zacht)}
.deel li+li{margin-top:.35em}
.deel li::marker{color:var(--mauve)}
.feiten{margin-top:.3rem}
.feit{display:grid;gap:.25rem;padding:1.1rem 0;border-top:1px solid var(--lijn)}
.feit:last-child{border-bottom:1px solid var(--lijn)}
.feit b{font-weight:600;color:var(--pruim)}
.feit span{color:var(--inkt-zacht);font-size:.97rem}
.noot{font-size:.93rem;color:var(--inkt-zacht);padding:1rem 1.2rem;border-left:2px solid var(--mauve);background:var(--vlak)}
.citaat{font-family:var(--f-kop);font-style:italic;font-weight:300;font-size:1.45rem;line-height:1.35;color:var(--pruim);border-left:2px solid var(--mauve);padding:.2rem 0 .2rem 1.2rem;margin:.6rem 0;max-width:30em}
.prijs{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:2rem;display:grid;gap:1.2rem}
.prijs .bedrag{font-family:var(--f-kop);font-size:2.4rem;font-weight:300;color:var(--pruim);line-height:1}
.prijs ul{margin:0;padding-left:1.1em;color:var(--inkt-zacht)}

/* veelgestelde vragen */
.faq details{border-top:1px solid var(--lijn)}
.faq details:last-child{border-bottom:1px solid var(--lijn)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-weight:600;color:var(--pruim);display:flex;justify-content:space-between;gap:1rem;transition:color .2s}
.faq summary:hover{color:var(--pruim-diep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-kop);font-size:1.5rem;font-weight:300;line-height:1;color:var(--mauve-tekst)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--mauve);outline-offset:2px}
.faq details p{padding:0 0 1.2rem;color:var(--inkt-zacht);max-width:38em}

/* artspagina */
.arts{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start;padding-bottom:4.5rem}
.arts img.portret{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;border-radius:14px;border:1px solid var(--lijn);background:var(--vlak2)}
.arts .artikel{padding-bottom:0}
.verwacht{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem}
.verwacht li{display:flex;gap:.8rem;align-items:flex-start;color:var(--inkt-zacht)}
.verwacht li::before{content:"";flex:none;width:8px;height:8px;margin-top:.6em;border-radius:50%;background:var(--mauve)}
.verwacht b{color:var(--pruim);font-weight:600}
@media (max-width:860px){.arts{grid-template-columns:1fr}.arts img.portret{max-width:320px}}

/* kaarten */
.band{background:var(--vlak);padding:4.5rem 0}
.band.licht{background:none;padding-top:0}
.band .kop{display:grid;gap:.6rem;margin-bottom:1.8rem;max-width:40em}
.kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.kaarten li{display:grid;min-width:0}
@media (max-width:900px){.kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kaarten{grid-template-columns:minmax(0,1fr)}}
.kaart{display:grid;gap:.7rem;grid-template-rows:auto 1fr auto;min-width:0;background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:1.6rem;text-decoration:none;color:inherit;transition:border-color .3s,transform .3s,box-shadow .3s}
.kaart:hover{border-color:var(--mauve);transform:translateY(-2px);box-shadow:0 14px 28px -22px var(--pruim)}
.kaart:focus-visible{outline:3px solid var(--mauve);outline-offset:3px}
.kaart{padding:1.8rem}
.kaart h2,.kaart h3{font-size:1.3rem;font-weight:400;line-height:1.25;letter-spacing:0;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.kaart p{color:var(--inkt-zacht);font-size:.97rem;line-height:1.6}
.kaart .meer{margin-top:.5rem;padding-top:.9rem;border-top:1px solid var(--lijn);font-size:.9rem;font-weight:600;color:var(--pruim);display:flex;justify-content:space-between;align-items:center}
.kaart .meer::after{content:"";width:.5rem;height:.5rem;border-top:1.5px solid var(--mauve);border-right:1.5px solid var(--mauve);transform:rotate(45deg);transition:transform .3s}
.kaart:hover .meer::after{transform:translateX(3px) rotate(45deg)}
/* brede kaart met portret, over de volle breedte */
.kaarten li.breed{grid-column:1/-1}
.kaart.breed{grid-template-rows:none;grid-template-columns:auto minmax(0,1fr);column-gap:1.6rem;align-items:center;background:var(--grond)}
.kaart.breed img{width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid var(--lijn)}
.kaart.breed .tekst{display:grid;gap:.5rem;min-width:0}
.kaart.breed .meer{border-top:0;padding-top:0;justify-content:flex-start;gap:.7rem}
@media (max-width:560px){.kaart.breed{grid-template-columns:minmax(0,1fr);justify-items:start}}

/* rustige verwijzing naar het consult */
.consult{background:var(--grond);border:1px solid var(--lijn);border-radius:16px;padding:2rem;display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;margin-bottom:2.8rem}
.consult svg{width:54px;height:54px}
.consult .inhoud{display:grid;gap:.7rem;justify-items:start}
.consult p{color:var(--inkt-zacht);max-width:36em}
.consult .knop{margin-top:.4rem}
@media (max-width:520px){.consult{grid-template-columns:1fr;padding:1.5rem}}

footer{border-top:1px solid var(--lijn);padding:2.5rem 0 3rem;font-size:.88rem;color:var(--inkt-zacht)}
footer .rij{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--pruim)}
footer .merk{color:var(--pruim);font-family:var(--f-kop);font-style:italic;font-weight:300;font-size:1.3rem}
footer .merk-sub{letter-spacing:.3em;font-size:.65rem;font-weight:600;color:var(--mauve-tekst)}

/* Rustige beweging. Alles hieronder werkt alleen als het script de klasse "js"
   op <html> heeft gezet. Zonder JavaScript blijft dus alles zichtbaar. */
.js .vloei,.js .vloei-kinderen>*{transition:opacity .6s ease,transform .6s ease}
.js .vloei:not(.is-zichtbaar),.js .vloei-kinderen>*:not(.is-zichtbaar){opacity:0;transform:translateY(10px)}
.js .teken{stroke-dasharray:1 2;stroke-dashoffset:1.01;animation:teken 1.5s cubic-bezier(.4,0,.2,1) .15s forwards}
.js .teken.tweede{animation-delay:.45s}
.js .teken-stip{opacity:0;animation:stip .6s ease 1.5s forwards}
@keyframes teken{to{stroke-dashoffset:0}}
@keyframes stip{to{opacity:var(--o,1)}}
@media (prefers-reduced-motion:reduce){
  .vloei,.vloei-kinderen>*{opacity:1!important;transform:none!important;transition:none!important}
  .teken{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .teken-stip{animation:none!important;opacity:var(--o,1)!important}
  .knop,.kaart{transition:none!important}
  .knop:hover,.kaart:hover{transform:none!important}
}
@media print{
  .vloei,.vloei-kinderen>*{opacity:1!important;transform:none!important}
  header.top{position:static}
}