/* yourwinestock — de uitlegpagina en haar subpagina's delen deze stijl.
   Herschreven op 01-11 (16:30) na de strenge review: één typografische schaal van vijf stappen, één regelafstand voor
   tekst en één voor koppen, twee knopstijlen, één sectie-afstand, lijnen alleen onder de kop en boven de voet.
   17:40, "Warm contrast" (de briefing die Hanne koos): een warmdonkere opening met een ruim licht productbeeld, de rest in
   papier- en steentinten; Petrona voor de titels (niet zwaar), Plex Sans voor de tekst, Plex Mono spaarzaam; bordeaux voor
   acties op licht, gedempt goud op donker. Kleuren uit de briefing: #281E21 · #F7F4EF · #E7E3DD · #6B1F30 · #C9A063 · #302627.
   Schaal (laptop / gsm): 48/36 (h1, het bedrag) · 30/26 (h2) · 20/19 (h3, aanhaling) · 17 (alle lopende tekst) · 14 (bijschriften, labels). */
:root{
  --accent:#6e1230; --accent-licht:#8d2444; --gold:#806224; --goud-licht:#c9a063;
  --ground:#faf6f2; --papier:#f7f4ef; --ground-2:#e7e3dd; --ink:#302627; --ink-2:#6b5a56; --lijn:#e3d8cd;
  --kelder:#281e21; --kelder-lijn:#3d3034; --creme:#f4eee3; --kurk:#b3a79f;
  --breedte:1080px;
  --s1:48px; --s2:30px; --s3:20px; --s4:17px; --s5:14px;
  --sectie:96px; --kop-tekst:16px;
}
@media (max-width:600px){ :root{--s1:36px; --s2:26px; --s3:19px; --sectie:56px} }
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:var(--s4); line-height:1.6;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:Petrona,Georgia,serif; font-weight:500; line-height:1.2; margin:0}
h1{font-size:var(--s1); font-weight:400; line-height:1.12; max-width:22ch}
h2{font-size:var(--s2); max-width:24ch; margin-bottom:var(--kop-tekst)}
h3{font-size:var(--s3)}
p{margin:0 0 var(--kop-tekst)}
p:last-child{margin-bottom:0}
a{color:var(--accent)}
img{max-width:100%; height:auto}
.wrap{max-width:var(--breedte); margin:0 auto; padding:0 24px}
.klein{font-size:var(--s5); color:var(--ink-2)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.label{font-family:'IBM Plex Mono',monospace; font-size:var(--s5); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:0 0 12px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.verborgen{position:absolute; left:-9999px}

/* ---------------------------------------------------------------- knoppen: twee stijlen */
.knop{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none; border:0; cursor:pointer;
  padding:13px 24px; border-radius:2px; font:inherit; font-weight:500; line-height:1.2; transition:background .15s;
}
.knop:hover{background:var(--accent-licht)}
.knop:focus-visible,.stil:focus-visible,a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.stil{color:var(--accent); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.stil:hover{color:var(--accent-licht)}

/* ---------------------------------------------------------------- kop (licht, zoals de app) */
header{background:var(--ground); border-bottom:1px solid var(--lijn); position:sticky; top:0; z-index:10}
.kopbalk{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 24px; min-height:64px}
.merk{display:block; line-height:0}
.merk svg{height:44px; width:auto; display:block}
.kopbalk nav{display:flex; align-items:center; gap:22px; font-size:var(--s4)}
.kopbalk nav a{color:var(--ink); text-decoration:none; white-space:nowrap}
.kopbalk nav a:hover{color:var(--accent)}
.kopbalk nav a.knop{color:#fff; padding:10px 18px}
.kopbalk nav a.knop:hover{color:#fff}
.talen{display:flex; gap:2px; font-family:'IBM Plex Mono',monospace; font-size:var(--s5); letter-spacing:.08em}
.talen a{padding:4px 5px; color:var(--ink-2)}
.talen a[aria-current="true"]{color:var(--accent); font-weight:600}
.kopdemo .kort{display:none}
.menuknop{display:none; width:40px; height:40px; padding:0; color:var(--ink); background:transparent; border:1px solid var(--lijn); border-radius:2px; cursor:pointer; position:relative; flex:none}
.menuknop[aria-expanded="true"]{background:var(--ground-2)}
.menuknop .ico,.menuknop .ico::before,.menuknop .ico::after{position:absolute; left:11px; width:16px; height:2px; background:currentColor; border-radius:1px; transition:transform .15s}
.menuknop .ico{top:18px}
.menuknop .ico::before{content:''; left:0; top:-6px}
.menuknop .ico::after{content:''; left:0; top:6px}
.menuknop[aria-expanded="true"] .ico{background:transparent}
.menuknop[aria-expanded="true"] .ico::before{transform:translateY(6px) rotate(45deg)}
.menuknop[aria-expanded="true"] .ico::after{transform:translateY(-6px) rotate(-45deg)}
.menupaneel{display:grid; padding:4px 24px 12px; border-top:1px solid var(--lijn); background:var(--ground)}
.menupaneel a{color:var(--ink); text-decoration:none; padding:12px 0}
.menupaneel[hidden]{display:none}
@media (max-width:960px){
  .kopbalk nav a.verbergen-klein{display:none}
  .menuknop{display:inline-block}
}
@media (max-width:600px){
  .merk svg{height:38px}
  .kopbalk nav{gap:12px}
  .kopdemo .lang{display:none} .kopdemo .kort{display:inline}
}

/* ---------------------------------------------------------------- hero (warmdonker, met een ruim licht productbeeld) */
.hero.donker{background:var(--kelder); color:var(--creme); padding:56px 0 60px}
.heroraster{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:44px; align-items:center}
.aanhef{font-family:'IBM Plex Mono',monospace; font-size:var(--s5); letter-spacing:.08em; text-transform:uppercase; color:var(--goud-licht); margin-bottom:22px}
.hero h1{margin-bottom:22px; max-width:none}
.hero h1 .regel{display:block; text-wrap:balance}
.hero .lead{max-width:48ch; margin-bottom:28px; color:var(--creme)}
.hero .acties{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-bottom:22px}
.hero.donker .knop{background:var(--goud-licht); color:var(--kelder)}
.hero.donker .knop:hover{background:#d9b47a}
.hero.donker .stil{color:var(--creme)}
.hero.donker .stil:hover{color:var(--goud-licht)}
.hero.donker .klein{color:var(--kurk)}
.hero.donker .knop:focus-visible,.hero.donker .stil:focus-visible{outline-color:var(--goud-licht)}
.heropaneel{margin:0; background:var(--papier); border-radius:2px; padding:12px 12px 10px; max-width:460px; justify-self:end; width:100%}
.heropaneel figcaption{font-size:var(--s5); color:var(--ink-2); margin-top:10px}
.filmknop{display:block; position:relative; color:var(--ink); text-decoration:none}
.filmknop img{display:block; width:100%; height:auto; border-radius:2px}
.speel{position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:12px; background:var(--kelder); color:var(--creme);
  padding:8px 16px 8px 8px; border-radius:999px; font-size:var(--s5); line-height:1.3; box-shadow:0 2px 10px rgba(40,30,33,.25)}
.speelrond{width:34px; height:34px; border-radius:50%; background:var(--goud-licht); flex:none; position:relative}
.speelrond::after{content:""; position:absolute; left:13px; top:10px; border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent var(--kelder)}
.speeltekst b{font-weight:500}
.speeltekst span{color:var(--kurk); margin-left:4px}
.filmknop:hover .speel,.filmknop:focus-visible .speel{background:#3a2a2f}
.filmknop:focus-visible{outline:2px solid var(--goud-licht); outline-offset:4px}
.filmvenster{padding:0; border:0; background:transparent; max-width:min(92vw,460px); width:100%; overflow:visible}
.filmvenster::backdrop{background:rgba(40,30,33,.82)}
.filmvenster video{display:block; width:100%; height:auto; max-height:86vh; object-fit:contain; background:#000; border-radius:2px}
.filmsluit{position:absolute; top:-44px; right:0; width:40px; height:40px; border:0; border-radius:50%; background:var(--papier); color:var(--kelder);
  font-size:24px; line-height:1; cursor:pointer}
.filmsluit:focus-visible{outline:2px solid var(--goud-licht); outline-offset:2px}

/* CUCHARA meteen onder de opening (02-11) */
.bewijsband{background:var(--ground-2); border-bottom:1px solid var(--lijn)}
.bewijsband p{padding-top:16px; padding-bottom:16px; text-align:center; font-size:var(--s4); color:var(--ink-2); margin:0 auto}
.bewijsband b{font-family:Petrona,Georgia,serif; font-weight:500; font-size:var(--s3); color:var(--accent)}

/* ---------------------------------------------------------------- blokken */
/* ---------------------------------------------------------------- blokken */
section{padding:var(--sectie) 0 0}
section.tint{background:var(--ground-2); margin-top:var(--sectie); padding:var(--sectie) 0}
section.tint + section{padding-top:var(--sectie)}
section:last-of-type{padding-bottom:var(--sectie)}

/* Tijd voor het vak: € 149 gekoppeld aan minder administratie */
.prijsraster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:64px; align-items:center}
.bedrag{font-family:Petrona,Georgia,serif; font-weight:400; font-size:var(--s1); line-height:1.05; margin:8px 0 8px; white-space:nowrap}
.bedrag .per{font-family:'IBM Plex Sans',sans-serif; font-size:var(--s4); color:var(--ink-2); margin-left:8px; white-space:nowrap}
#prijs p{max-width:60ch}
.minder{list-style:none; margin:0 0 20px; padding:0; border-top:1px solid var(--lijn)}
.minder li{display:flex; gap:18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--lijn)}
.minder .mono{font-size:var(--s5); color:var(--gold); flex:none}

/* Werking: levering, verkoop, bijgewerkte kaart (steen) */
.werking{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
.werking .label{margin-bottom:10px}
.werking h3{font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:var(--s4); margin-bottom:8px}
.werking p{margin:0; font-size:var(--s5); color:var(--ink-2); max-width:36ch}

/* Persoonlijke opstart */
.opstartraster{display:flex; flex-wrap:wrap; gap:24px 56px; align-items:center; justify-content:space-between}
.opstartraster p{max-width:60ch; margin:0}
.opstartraster h2{margin-bottom:10px; max-width:30ch}

/* Waarom gemaakt */
.wieraster{display:grid; grid-template-columns:160px 1fr; gap:48px; align-items:center}
.wie-foto img{width:160px; height:auto; border-radius:2px; display:block}
.aanhaal{font-family:Petrona,Georgia,serif; font-style:italic; font-size:var(--s3); line-height:1.4; max-width:44ch}
#wie p{max-width:60ch}

/* Korte vragen */
.vragenkort details{border-top:1px solid var(--lijn)}
.vragenkort details:last-child{border-bottom:1px solid var(--lijn)}
.vragenkort summary{cursor:pointer; padding:14px 0; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:16px}
.vragenkort summary::-webkit-details-marker{display:none}
.vragenkort summary::after{content:"+"; color:var(--gold); font-family:'IBM Plex Mono',monospace; flex:none}
.vragenkort details[open] summary::after{content:"–"}
.vragenkort p{margin:0 0 16px; max-width:60ch; color:var(--ink-2)}

/* Plan een demo (steen) */
.formraster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:start}
form{display:grid; gap:16px}
label{display:block; font-size:var(--s5); font-weight:500; margin-bottom:6px}
input,textarea{
  width:100%; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--lijn); border-radius:2px;
  padding:12px 14px;
}
input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
textarea{min-height:120px; resize:vertical}
.veld-duo{display:grid; grid-template-columns:1fr 1fr; gap:16px}
form .knop{justify-self:start}
.demo{margin-top:48px; padding-top:32px; border-top:1px solid var(--lijn)}
.demo p{max-width:60ch}
.demoform{display:flex; flex-wrap:wrap; gap:12px; align-items:start; max-width:560px}
.demoform input{flex:1 1 240px; width:auto}
.demomelding{flex-basis:100%; margin:0; font-size:var(--s5); padding:10px 14px; border-radius:2px; border:1px solid var(--lijn); background:#fff}
.demomelding.goed{border-color:var(--gold)}
.demomelding.fout{border-color:var(--accent); color:var(--accent)}

/* ---------------------------------------------------------------- voet (warmdonker) */
footer{background:var(--kelder); color:var(--kurk); padding:36px 0; font-size:var(--s5); line-height:1.7}
.voetraster{display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:space-between; align-items:baseline}
footer b{color:var(--creme); font-weight:500}
footer .klein{color:var(--kurk)}
footer a{color:var(--creme)}
footer a:hover{color:var(--goud-licht)}

/* ---------------------------------------------------------------- de pagina Over */
.over{padding:var(--sectie) 0}
.over h1{margin-bottom:28px}
.maker{display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start}
.portret{margin:0; border-radius:2px; overflow:hidden; aspect-ratio:3/4; background:var(--ground-2)}
.portret img{width:100%; height:100%; object-fit:cover; display:block}
.maker p{max-width:60ch}
.citaat{font-family:Petrona,Georgia,serif; font-style:italic; font-size:var(--s3); line-height:1.4; max-width:44ch; margin-bottom:24px}
.ondertekening{font-family:Petrona,Georgia,serif; font-size:var(--s3); margin-top:22px}
.ondertekening span{display:block; font-family:'IBM Plex Sans',sans-serif; font-size:var(--s5); color:var(--ink-2)}
.over .feit{margin:32px 0 24px; max-width:60ch; border-top:1px solid var(--lijn); padding-top:22px}
.over .acties{display:flex; flex-wrap:wrap; gap:22px; align-items:center}

/* ---------------------------------------------------------------- smal scherm */
@media (max-width:860px){
  .heroraster{grid-template-columns:1fr; gap:40px}
  .heropaneel{max-width:560px; justify-self:start}
  .prijsraster{grid-template-columns:1fr; gap:32px}
  .werking{grid-template-columns:1fr; gap:28px}
  .wieraster{grid-template-columns:160px 1fr; gap:32px}
  .formraster{grid-template-columns:1fr; gap:32px}
  .maker{grid-template-columns:1fr}
  .portret{max-width:300px}
}
@media (max-width:600px){
  .hero.donker{padding:48px 0 48px}
  .heropaneel{padding:10px 10px 8px; max-width:none}
  .heropaneel figcaption{text-align:left}
  .bedrag .per{display:block; margin:6px 0 0}
  .wieraster{grid-template-columns:1fr; gap:24px}
  .wie-foto img{width:120px}
  .veld-duo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }