/* ===== Gastrovino showcase v3 — projectstijl bovenop basis.css =====
   Merk: marsala #855c54 / #71413d, crème #fbf0da / #f6ddac (van gastrovino.nl)
   Fonts v3: Anton (display caps) + Newsreader italic (em-accenten en citaten)
   + Space Grotesk (body/UI) — bewust drie rollen, geen uniform blaadje.
   v3: loader die met wijn vult, wijnglas-cursor die schenkt bij klik,
   statische kloppende hero, Wijnwijzer (wijn-spijs) als lead magnet. */
:root{
  --accent:#855c54;
  --accent-d:#71413d;
  --accent-l:#9a6a60;
  --wijn:#8c2a3c;
  --wijn-d:#571726;
  --inkt:#221a17;
  --inkt-2:#2c211d;
  --tint:#fbf0da;
  --tint-2:#f6ddac;
  --wit:#fdfaf5;
  --grijs:#7d7168;
  --lijn:rgba(34,26,23,.12);
  --f-display:"Anton","Arial Narrow",sans-serif;
  --f-serif:"Newsreader",Georgia,serif;
  --f-body:"Space Grotesk",system-ui,sans-serif;
}
h1,h2,h3{font-weight:400;letter-spacing:.005em;line-height:1.04;text-transform:uppercase}
h1 em,h2 em,h3 em,.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
html:not(.js) .laad{display:none}
.slot{color:var(--wit)}
.slot .lead{color:rgba(253,250,245,.88)}
.slot .oog{color:rgba(253,250,245,.8)}
.slot .oog::before{background:var(--tint-2)}
.slot h2 em{color:var(--tint-2)}
.oog{font-weight:700;letter-spacing:.22em}
.oog--wit{color:rgba(253,250,245,.75)}
.oog--wit::before{background:var(--tint-2)}
.oog--goud{color:rgba(253,250,245,.85)}
.oog--goud::before{background:var(--tint-2)}
.band span{font-family:var(--f-display);font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:rgba(34,26,23,.3)}
.knop{font-weight:700;letter-spacing:.02em}
.knop--accent{background:var(--tint-2);color:var(--inkt);box-shadow:0 1px 0 #fff8 inset,0 4px 0 #d9b877,0 10px 18px -6px rgba(0,0,0,.35),0 22px 40px -18px rgba(0,0,0,.35)}
.knop--accent:hover{background:#f9e6bd}
.slot .knop--lijn{background:rgba(253,250,245,.5)}

/* koppen: goud op donker, marsala-verloop op licht */
h1 em,.op-inkt h2 em,.quizblok h2 em,.slot h2 em{color:var(--tint-2)}
.op-tint h2 em,.blok:not(.op-inkt):not(.quizblok):not(.slot) h2 em{
  background:linear-gradient(100deg,var(--wijn-d),var(--accent) 55%,#b8763f);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== LAADSCHERM: het échte embleem vult met wijn ===== */
.laad{display:grid;place-items:center;align-content:center;background:#180f0e}
.laad__logo{position:relative;width:min(230px,56vw);aspect-ratio:300/210}
.laad__contour{position:absolute;inset:0;width:100%;height:100%;opacity:.18}
.laad__vul{position:absolute;inset:0;overflow:hidden}
.laad__vul i{position:absolute;inset:0;background:linear-gradient(0deg,#4a0f18,#7a1f2b 55%,#a02d40);
  -webkit-mask:url(assets/logo.png) center/contain no-repeat;mask:url(assets/logo.png) center/contain no-repeat;
  transform:translateY(101%);animation:vullogo 1.5s .18s cubic-bezier(.32,.72,.28,1) forwards}
@keyframes vullogo{to{transform:none}}
.laad__sub{margin:1.2rem 0 0;font:700 .82rem/1 var(--f-body);letter-spacing:.34em;text-transform:uppercase;color:rgba(251,240,218,.55)}

/* ===== WIJNGLAS-CURSOR: volgt de muis, schenkt bij klik (alleen fijne pointers) =====
   De module staat in schenk.js; hier alleen de vormgeving. */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;will-change:transform;opacity:0;transition:opacity .25s}
.cursor.aan{opacity:1}
.cursor svg{display:block;width:36px;height:auto;filter:drop-shadow(0 2px 3px rgba(20,12,10,.5));transition:transform .3s var(--ease)}
.cursor.actief svg{transform:scale(1.22) rotate(8deg)}
.cursor.schenkt svg{animation:schenk .72s var(--ease)}
/* het glas kiept naar RECHTS, dus loopt de straal aan de rechterkant omlaag —
   kantelrichting en schenkzijde moeten altijd samenkloppen */
@keyframes schenk{
  0%{transform:rotate(0)}
  28%{transform:rotate(52deg)}
  62%{transform:rotate(52deg)}
  100%{transform:rotate(0)}
}
.cursor__straal{opacity:0}
.cursor.schenkt .cursor__straal{animation:straal .72s linear}
@keyframes straal{
  0%,24%{opacity:0;stroke-dashoffset:46}
  30%{opacity:1}
  55%{stroke-dashoffset:0;opacity:1}
  62%{opacity:1;stroke-dashoffset:0}
  72%,100%{opacity:0;stroke-dashoffset:0}
}
.cursor__druppel{opacity:0}
.cursor.weg{opacity:0!important}
html.cursor-aan .quiz,html.cursor-aan .quiz *,html.cursor-aan input,html.cursor-aan textarea,html.cursor-aan select{cursor:auto}
.cursor.schenkt .cursor__druppel{animation:druppel .72s ease-in}
@keyframes druppel{
  0%,56%{opacity:0;transform:translateY(0)}
  62%{opacity:1}
  92%{opacity:1;transform:translateY(14px)}
  100%{opacity:0;transform:translateY(16px)}
}
@media (hover:hover) and (pointer:fine){
  html.cursor-aan,html.cursor-aan a,html.cursor-aan button,html.cursor-aan input,html.cursor-aan label,html.cursor-aan summary{cursor:none}
}

/* ===== HERO: soepele schenkloop, 100svh, één kloppende statische kop ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--inkt) url(assets/poster.jpg) center/cover no-repeat;overflow:hidden}
.hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html:not(.js) .hero__film{display:none}
.hero__sluier{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(34,26,23,.5) 0%,transparent 26%),
  linear-gradient(90deg,rgba(26,12,10,.62) 0%,rgba(26,12,10,.28) 45%,rgba(26,12,10,0) 68%),
  linear-gradient(0deg,rgba(34,26,23,.92) 0%,rgba(34,26,23,.35) 42%,rgba(34,26,23,.25) 100%),
  radial-gradient(120% 90% at 18% 88%,rgba(34,26,23,.55),transparent 60%)}
.hero h1 em{text-shadow:0 2px 26px rgba(20,10,8,.6)}
.hero__kop{position:relative;z-index:2;color:var(--wit);padding:clamp(6rem,14vh,9rem) 0 clamp(4rem,9vh,7rem)}
.hero__kop .lead{color:rgba(253,250,245,.85);max-width:46ch}
.hero__kop .knoprij{margin-top:1.8rem}
.hero__kop .knop--lijn{background:rgba(253,250,245,.1);color:var(--wit);box-shadow:0 0 0 1.5px rgba(253,250,245,.75) inset,0 4px 0 rgba(253,250,245,.22);backdrop-filter:blur(6px)}
.hero__micro{margin:1rem 0 0;font:700 .8rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(253,250,245,.65)}

/* kopbalk leesbaar boven de donkere hero vóór de .vast-staat */
.kopbalk:not(.vast) .nav a,.kopbalk:not(.vast) .kopbalk__tel{color:var(--wit);text-shadow:0 1px 12px rgba(34,26,23,.45)}

/* ===== REVIEWS: donker blok met echte Google reviews ===== */
.reviews .oog{color:rgba(253,250,245,.6)}
.reviews .oog::before{background:var(--tint-2)}
.reviews__noot{margin:-.5rem 0 1.6rem;color:rgba(253,250,245,.5);font-size:.88rem}
.reviews__score{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem)}
.reviews__score>b{font:400 clamp(4rem,8vw,6.5rem)/0.9 var(--f-display);color:var(--tint-2)}
.reviews__score .sterren{display:block;margin-bottom:.4rem}
.reviews__meta{display:block;color:rgba(253,250,245,.7);font-size:1rem;max-width:44ch}
.reviews__meta b{color:var(--wit)}
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.review{margin:0;background:var(--inkt-2);border:1px solid rgba(246,221,172,.28);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 24px 48px -28px rgba(0,0,0,.55)}
.review blockquote{margin:0;font:italic 400 1.25rem/1.4 var(--f-serif);color:rgba(253,250,245,.92)}
.review figcaption{margin-top:auto;font:600 .9rem/1.4 var(--f-body);color:var(--tint-2)}
.review figcaption span{display:block;font-weight:500;color:rgba(253,250,245,.5);font-size:.78rem}
.reviews__link{display:inline-block;margin-top:1.8rem;color:var(--tint-2);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(246,221,172,.4);padding-bottom:.15rem;transition:border-color .25s}
.reviews__link:hover{border-color:var(--tint-2)}

/* ===== WIJNWIJZER: het conversiemiddelpunt, in marsala ===== */
.quizblok{background:linear-gradient(160deg,var(--wijn-d),var(--accent-d) 45%,var(--accent) 80%);color:var(--wit);overflow:hidden}
.quizblok .lead{color:rgba(253,250,245,.85)}
.quizblok .zegel{opacity:.14}
.quiz{margin-top:clamp(2.2rem,4vw,3.2rem);background:var(--wit);color:var(--inkt);border-radius:var(--r);padding:clamp(1.6rem,3.5vw,3rem);box-shadow:0 40px 80px -40px rgba(20,12,10,.55);position:relative}
.quiz__voortgang{display:flex;gap:.5rem;margin-bottom:1.4rem}
.quiz__voortgang i{flex:1;max-width:64px;height:6px;border-radius:6px;background:rgba(34,26,23,.22);transition:background .3s}
.quiz__voortgang i.aan{background:var(--wijn)}
.quiz__vraag{font:400 clamp(1.5rem,2.8vw,2.4rem)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 1.4rem}
.quiz__antwoorden{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.quiz__antwoord{display:flex;align-items:center;gap:1rem;text-align:left;padding:1.05rem 1.2rem;border-radius:var(--r-s);border:1.5px solid var(--lijn);background:var(--wit);cursor:pointer;font:600 1.02rem/1.3 var(--f-body);color:var(--inkt);transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}
.quiz__antwoord:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--tint-2);box-shadow:0 14px 26px -16px rgba(87,23,38,.45)}
.quiz__antwoord .abc{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--tint-2);font:700 .85rem/1 var(--f-body);color:var(--inkt);transition:background .25s,color .25s}
.quiz__antwoord:hover .abc{background:var(--wijn);color:var(--wit)}

/* uitslag: de persoonlijke wijnkaart */
.quiz__uitslag{text-align:center;padding:clamp(.5rem,2vw,1.5rem) 0}
.quiz__uitslag .oog{justify-content:center}
.quiz__uitslag .oog::before{background:var(--wijn)}
.quiz__kaartkop{font:400 clamp(1.7rem,3.4vw,2.8rem)/1.05 var(--f-display);text-transform:uppercase;color:var(--wijn-d);margin:.4rem 0 .3rem}
.quiz__kaartkop em{color:var(--accent)}
.quiz__context{margin:0 auto 1.6rem;max-width:52ch;color:#3b3633;font-size:1.02rem;line-height:1.5}
.wijnkaart{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:1.4rem 0 .6rem;text-align:left}
.fles{background:linear-gradient(165deg,#fff,var(--tint) 130%);border:1.5px solid rgba(133,92,84,.28);border-radius:var(--r-s);padding:1.2rem 1.2rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;box-shadow:0 18px 34px -24px rgba(87,23,38,.5);transition:transform .3s var(--ease),box-shadow .3s}
.fles:hover{transform:translateY(-4px);box-shadow:0 26px 44px -26px rgba(87,23,38,.55)}
.fles__icoon{width:22px;height:auto;color:var(--wijn)}
.fles b{font:400 1.25rem/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.01em;color:var(--inkt)}
.fles .streek{font:italic 400 1rem/1.3 var(--f-serif);color:var(--accent-d)}
.fles p{margin:.2rem 0 0;font-size:.92rem;line-height:1.45;color:#3b3633}
.fles .prijs{margin-top:auto;padding-top:.6rem;font:700 .82rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--wijn)}
.quiz__noot{margin:.8rem auto 0;max-width:52ch;color:var(--grijs);font-size:.85rem}
.quiz .knop--lijn{box-shadow:0 0 0 1.5px var(--inkt) inset}
.quiz__deel{margin-top:1rem}
.quiz__stijl{display:inline-block;font:700 .8rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;background:var(--tint-2);color:var(--inkt);border-radius:999px;padding:.55rem 1rem;margin-bottom:1.2rem}
.quiz__uitslag .knoprij{justify-content:center;margin-top:1.6rem}
.quiz__opnieuw{display:inline-block;margin-top:1.2rem;background:none;border:0;cursor:pointer;color:var(--grijs);font:600 .9rem/1 var(--f-body);text-decoration:underline;text-underline-offset:3px}
.quiz__opnieuw:hover{color:var(--wijn-d)}
.quiz__terug{display:inline-block;margin-top:1.1rem;background:none;border:0;cursor:pointer;color:var(--grijs);font:600 .9rem/1 var(--f-body);text-decoration:underline;text-underline-offset:3px}
.quiz__terug:hover{color:var(--wijn-d)}
.quiz__mail{display:inline-block;margin-top:1rem;color:var(--accent-d);font:600 .9rem/1 var(--f-body);text-decoration:underline;text-underline-offset:3px}
.quiz__mail:hover{color:var(--wijn-d)}
.quiz__val p{max-width:52ch;color:#3b3633}

/* ===== kaarten iets zachter voor marsala ===== */
.kaart{background:var(--inkt-2)}
.kaart::before{background:linear-gradient(0deg,rgba(18,17,16,.88),rgba(18,17,16,.28) 58%,rgba(18,17,16,.05))}
.kaart__tekst b{font-weight:400;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.kaart__tekst i{color:var(--tint-2)}

/* ===== citaat in merktoon ===== */
.citaat{border-left-color:var(--tint-2)}
.op-inkt .citaat small{color:rgba(253,250,245,.55)}

/* ===== stappen met eigen dynamiek + zegel-watermerk ===== */
#amici{position:relative;overflow:hidden}
.zegel{position:absolute;right:-6rem;top:50%;width:min(34rem,60vw);opacity:.12;transform:translateY(-50%) rotate(-8deg);pointer-events:none}
.stap{border-top-color:var(--accent);transition:transform .35s var(--ease)}
.stap .nr{color:var(--accent);transition:transform .35s var(--ease)}
.stap b{transition:color .2s}
.stap:hover{transform:translateY(-4px)}
.stap:hover .nr{transform:translateX(4px)}
.stap:hover b{color:var(--wijn)}

/* ===== winkelzoeker ===== */
.zoek{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem}
.zoek input{flex:1 1 320px;font:500 1.15rem/1 var(--f-body);padding:1.1rem 1.4rem;border-radius:999px;border:1.5px solid var(--lijn);background:var(--wit);color:var(--inkt);outline:none;transition:border-color .25s,box-shadow .25s}
.zoek input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(133,92,84,.15)}
.zoek__telling{margin:0;font-weight:700;color:var(--accent-d);font-size:.85rem;border:1.5px solid rgba(133,92,84,.4);border-radius:999px;padding:.55rem 1.1rem;white-space:nowrap}
.winkellijst{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.winkellijst a{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.2rem;border-radius:var(--r-s);background:var(--wit);border:1px solid var(--lijn);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.winkellijst a:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 30px -18px rgba(34,26,23,.45)}
.winkellijst b{font:italic 400 1.15rem/1.25 var(--f-serif);letter-spacing:0;text-transform:none}
.winkellijst span{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs)}
.winkellijst i{font-style:normal;font-size:.78rem;font-weight:700;color:var(--wijn);margin-top:.3rem}
.winkellijst .leeg{grid-column:1/-1;padding:2rem;text-align:center;color:var(--grijs)}
.winkellijst .leeg a{color:var(--accent);font-weight:700}

/* ===== teaser naar de Wijnwijzer-pagina ===== */
.teaser{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem;padding:0;margin:1.5rem 0 1.7rem}
.teaser li{display:flex;align-items:center;gap:.6rem;padding:.5rem 1.15rem .5rem .55rem;border-radius:999px;border:1.5px solid rgba(253,250,245,.35);background:rgba(24,15,14,.25)}
.teaser b{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--tint-2);color:#221a17;font:400 1.02rem/1 var(--f-display)}
.teaser span{font:600 .95rem/1 var(--f-body);color:var(--wit)}
.teaser__mini{margin:1.1rem 0 0;font:600 .85rem/1.4 var(--f-body);color:rgba(253,250,245,.65)}

/* ===== wijnwijzer.html: de lead magnet als eigen, afleidingsvrije pagina ===== */
.wijzerpagina{min-height:100svh;display:flex;align-items:center}
.wijzerpagina .wrap{width:100%}
.wijzer__belofte{margin:0 0 1.4rem;font:600 .9rem/1.4 var(--f-body);letter-spacing:.06em;color:rgba(253,250,245,.75)}
.wijzer__terug{margin:1.6rem 0 0}
.wijzer__terug a{font:600 .9rem/1 var(--f-body);color:rgba(253,250,245,.7);text-decoration:underline;text-underline-offset:3px}
.wijzer__terug a:hover{color:var(--wit)}

/* ===== plakker weg waar hij in de weg zit ===== */
.plakker.verborgen{transform:translate(-50%,160%)!important}

/* ===== no-JS: mobiele navigatie als gewone linkrij, hamburger weg ===== */
html:not(.js) .menuknop{display:none!important}
html:not(.js) .nav{display:flex;flex-wrap:wrap;gap:.9rem;margin-left:auto}
html:not(.js) .nav a{font-size:.82rem;padding:.3rem 0}

/* ===== responsive ===== */
@media (max-width:1100px){
  .winkellijst{grid-template-columns:1fr 1fr}
  .reviews__grid{grid-template-columns:1fr}
  .wijnkaart{grid-template-columns:1fr}
}
@media (max-width:760px){
  .winkellijst{grid-template-columns:1fr}
  .hero__kop .lead{max-width:38ch}
  .oog{font-size:.68rem;letter-spacing:.14em;white-space:nowrap}
  .zegel{right:-9rem;opacity:.1}
  .quiz{padding:1.3rem}
  .quiz__antwoorden{grid-template-columns:1fr}
  .reviews__score>b{font-size:3.6rem}
}
@media (prefers-reduced-motion:reduce){
  .laad__vul i{animation:none;transform:none}
  .cursor{display:none}
}