/* Cellarnova — opmaak van de publieke webpagina's (17 sept 2026). Huisstijl gelijk aan de app en de PDF's.
   Geen lettertypes of scripts van buitenaf. De pagina's worden gemaakt door bouw-website.py. */
:root{
  --wine:#64081b; --wine2:#7e1230; --gold:#b8862b; --gold2:#d8b46a; --cream:#f4efe6; --ink:#2b2622; --muted:#6b6560;
  --paper:#fff; --line:#e6dfd3;
  --serif:Georgia,"Times New Roman",serif; --sans:Helvetica,Arial,sans-serif;
  --breed:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.site{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6}
.site a{color:var(--wine)}
.site img{max-width:100%;height:auto}

/* ---------- hoofding: altijd bovenaan zichtbaar, met de knop naar de app ---------- */
.kop{position:sticky;top:0;z-index:10;background:rgba(244,239,230,.96);backdrop-filter:saturate(1.2) blur(6px);-webkit-backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.kop .balk{max-width:var(--breed);margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 16px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--wine)!important;margin-right:auto}
.merk img{border-radius:9px;display:block}
.merk span{font-family:var(--serif);font-size:1.35rem;letter-spacing:.03em}
.talen{display:flex;gap:2px;font-size:.78rem;letter-spacing:.08em}
.talen a{text-decoration:none;color:var(--muted)!important;padding:6px 6px;border-radius:6px}
.talen a[aria-current]{color:var(--wine)!important;font-weight:bold;background:rgba(100,8,27,.07)}
.kop .menu{max-width:var(--breed);margin:0 auto;display:flex;gap:4px;padding:0 10px 8px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.kop .menu::-webkit-scrollbar{display:none}
.menu a{text-decoration:none;color:var(--ink)!important;padding:6px 10px;border-radius:99px;font-size:.92rem}
.menu a[aria-current]{background:var(--wine);color:#fff!important}

.knop{display:inline-block;text-decoration:none;font-family:var(--sans);font-weight:bold;font-size:.95rem;padding:10px 18px;border-radius:99px;white-space:nowrap;line-height:1.2}
.knop.app{background:var(--wine);color:#fff!important;box-shadow:0 4px 14px rgba(100,8,27,.25)}
.knop.app:hover{background:var(--wine2)}
.kop .knop.app{padding:9px 14px;font-size:.88rem}

main{max-width:var(--breed);margin:0 auto;padding:0 16px 24px}
.slot{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:34px 0 10px}

/* ---------- teksten ---------- */
article h1,article h2{font-family:var(--serif);font-weight:normal;color:var(--wine);line-height:1.15}
article h2{font-size:clamp(1.6rem,4.5vw,2.3rem);margin:0 0 18px}
article h3{font-family:var(--serif);font-weight:normal;color:var(--wine);font-size:1.3rem;margin:26px 0 8px}
article p{margin:0 0 14px}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.intro{color:var(--muted);font-size:1.05rem}
.tip{background:var(--paper);border-left:3px solid var(--gold);padding:10px 14px;border-radius:0 10px 10px 0;font-size:.95rem}
.b{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid currentColor;vertical-align:1px;white-space:nowrap}
.b-now{color:#a8412a} .b-soon{color:#b8862b} .b-hold{color:#3f6b4a}
.b-vul-oranje{color:#fff;background:#e07b1a;border-color:#e07b1a;font-weight:600}
.b-vul-rood{color:#fff;background:#a8412a;border-color:#a8412a;font-weight:600}

/* gebruiksaanwijzing en voorwaarden: rustige leeskolom */
.gids article,.voorwaarden article{max-width:760px;margin:28px auto 0;background:var(--paper);border-radius:18px;padding:28px clamp(18px,5vw,48px) 30px;box-shadow:0 8px 30px rgba(43,38,34,.06)}
.gids article>h2:first-child,.voorwaarden article>h2:first-child{margin-top:4px}
.gids article li,.voorwaarden article li{margin:4px 0}

/* ---------- promo en prijzen ---------- */
.held{position:relative;margin:0 -16px;padding:clamp(70px,14vw,150px) 24px clamp(50px,9vw,100px);color:#fff;overflow:hidden;
  background:linear-gradient(100deg,rgba(40,4,12,.88) 0%,rgba(63,5,18,.62) 45%,rgba(0,0,0,.15) 100%),url(/img/kelder.jpg) center/cover no-repeat}
.held h1{color:#fff;font-size:clamp(2.2rem,7vw,4rem);margin:0 0 18px;max-width:14em}
.held p{max-width:34em;color:#f1e4d0;font-size:1.08rem;margin:0}
.held a{color:var(--gold2)!important}
.held.klein{padding:clamp(40px,8vw,80px) 24px clamp(34px,6vw,60px);display:flex;flex-direction:column;justify-content:center;min-height:220px}
.held.klein h1{font-size:clamp(2rem,6vw,3.2rem);margin-bottom:8px}
.held .sfeer{position:absolute;right:clamp(16px,6vw,80px);top:50%;transform:translateY(-50%) rotate(2deg);width:clamp(90px,16vw,170px);border-radius:14px;border:3px solid rgba(216,180,106,.6);box-shadow:0 18px 40px rgba(0,0,0,.45)}
@media (max-width:640px){ .held .sfeer{display:none} }
@media (min-width:1112px){ .held{margin:18px 0 0;border-radius:22px} }

.blok{padding:clamp(34px,6vw,64px) 0;border-bottom:1px solid var(--line)}
.blok:last-of-type{border-bottom:0}
.blok.donker{background:var(--wine);color:#fff;margin:0 -16px;padding-left:max(16px,calc((100vw - var(--breed))/2 + 16px));padding-right:16px;border:0}
@media (min-width:1112px){ .blok.donker{margin:0 calc((var(--breed) - 100vw)/2);padding-left:calc((100vw - var(--breed))/2 + 16px);padding-right:calc((100vw - var(--breed))/2 + 16px)} }
.donker h2{color:#fff} .donker .eyebrow{color:var(--gold2)} .donker .slogan{color:var(--gold2)} .donker .klein{color:#e9d9c4}
.donker a{color:var(--gold2)!important}
.donker .card{background:rgba(255,255,255,.07);box-shadow:none;border:1px solid rgba(216,180,106,.35)}
.donker .card h3{color:var(--gold2)} .donker .card p{color:#f3ebdf}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,44px);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){ .grid3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cols,.grid3{grid-template-columns:1fr} }
.card{background:var(--paper);border-radius:16px;padding:20px 22px;box-shadow:0 8px 30px rgba(43,38,34,.07);margin-bottom:16px}
.grid3 .card,.cols>.card{margin-bottom:0}
.grid3 .card.breed{grid-column:1/-1}
.card h3{margin:0 0 8px}
.card p{margin:0 0 8px;font-size:.98rem}
.card p:last-child{margin-bottom:0}
.num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--wine);color:#fff;font-family:var(--serif);font-size:1.2rem;align-items:center;justify-content:center;margin-bottom:8px}
.quote{font-family:var(--serif);font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.35;color:var(--wine);font-style:italic}
.slogan{font-family:var(--serif);font-style:italic;color:var(--wine);font-size:1.15rem;margin-top:-6px}
.nadruk{font-family:var(--serif);color:var(--wine);font-size:1rem}
.klein{font-size:.88rem;color:var(--muted)}
.kleinschrift{font-size:.8rem;color:var(--muted);margin-top:26px;text-align:center}
.check{list-style:none;padding:0;margin:0}
.check li{position:relative;padding-left:28px;margin-bottom:12px}
.check li:before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--gold)}
.price{font-family:var(--serif);font-size:3rem;color:var(--wine);line-height:1}
.price small{font-family:var(--sans);font-size:.95rem;color:var(--muted)}
.pill{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:99px;padding:5px 14px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin:0 6px 8px 0}

.metfoto{display:grid;grid-template-columns:1fr 260px;gap:clamp(20px,5vw,60px);align-items:center}
.telefoon{width:100%;border-radius:32px;border:8px solid #1c1a18;box-shadow:0 30px 60px rgba(0,0,0,.3)}
@media (max-width:720px){ .metfoto{grid-template-columns:1fr} .telefoon{max-width:230px;margin:6px auto 0;display:block} }

.blok.start{display:grid;grid-template-columns:170px 1fr;gap:clamp(20px,5vw,48px);align-items:center}
.blok.start .sfeer{grid-row:1/6;width:100%;height:auto;align-self:center;border-radius:16px;box-shadow:0 14px 34px rgba(43,38,34,.2)}
.blok.start>*:not(.sfeer){grid-column:2}
@media (max-width:640px){ .blok.start{grid-template-columns:1fr} .blok.start .sfeer{display:none} .blok.start>*:not(.sfeer){grid-column:1} }
.blok.start .gratis{color:var(--wine);font-size:1.15rem;margin:0}

/* prijstabel */
.actie{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:linear-gradient(100deg,#e0a43a 0%,#c98a22 60%,#b8862b 100%);color:#2b1a05;border-radius:14px;padding:14px 20px;margin:6px 0 22px;box-shadow:0 6px 18px rgba(184,134,43,.35);font-family:var(--serif);font-size:1.08rem;line-height:1.35}
.actie .label{font-family:var(--sans);font-size:.7rem;font-weight:bold;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:var(--wine);border-radius:99px;padding:6px 12px;white-space:nowrap}
.prijzen table{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(43,38,34,.07);margin:0 0 18px}
.prijzen th{background:var(--wine);color:#fff;font-weight:normal;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:12px 10px;text-align:left;vertical-align:bottom;line-height:1.3}
.prijzen td{padding:14px 10px;border-top:1px solid var(--line);vertical-align:top}
.prijzen td.m{font-family:var(--serif);font-size:1.25rem;color:var(--wine)}
.prijzen td.p{font-family:var(--serif);font-size:1.35rem;color:var(--wine);white-space:nowrap}
.prijzen .sub{display:block;font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-top:3px}
.prijzen small.ex{display:block;font-family:var(--sans);font-size:.75rem;color:var(--muted)}
.prijzen tr.hi td{background:#fbf6ec}
@media (max-width:640px){
  .prijzen table,.prijzen tbody,.prijzen tr,.prijzen td{display:block;width:100%}
  .prijzen tr:first-child{display:none}
  .prijzen tr{padding:6px 0;border-top:2px solid var(--line)}
  .prijzen td{border:0;padding:6px 16px;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .prijzen td.m{text-align:left;display:block;padding-top:12px}
  .prijzen td small.ex{display:inline;margin-left:8px}
  .prijzen td.p{font-size:1.2rem}
  .prijzen td:not(.m):before{content:attr(data-kop);font-size:.78rem;color:var(--muted);text-align:left;text-transform:uppercase;letter-spacing:.05em}
}

/* ---------- voettekst ---------- */
.voet{background:#2b2622;color:#e9e2d6;padding:30px 16px 40px;text-align:center;font-size:.9rem}
.voet a{color:var(--gold2)!important}
.voet .menu,.voet .talen{justify-content:center;display:flex;flex-wrap:wrap;gap:4px;margin:0 auto 12px;max-width:var(--breed)}
.voet .menu a{color:#e9e2d6!important}
.voet .menu a[aria-current]{background:rgba(216,180,106,.2);color:#fff!important}
.voet .talen a{color:#bdb3a4!important}
.voet .talen a[aria-current]{color:var(--gold2)!important;background:transparent}
.voet p{margin:8px auto;max-width:44em}
.voet .klein{color:#a39888}

/* ---------- gsm ---------- */
@media (max-width:640px){
  body.site{font-size:16px}
  .merk span{font-size:1.15rem}
  .kop .balk{gap:8px;padding:8px 12px}
  .kop .talen{display:none}
  .kop .knop.app{padding:8px 12px;font-size:.82rem}
}

/* ---------- afdrukken en PDF ---------- */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.site{background:#fff;font-size:10.5pt;line-height:1.5}
  .kop,.slot,.voet .menu,.voet .talen,.prijzen .voet{display:none!important}
  main{max-width:none;padding:0}
  .held{margin:0 0 6mm;border-radius:4mm;padding:18mm 10mm 14mm}
  .held.klein{min-height:0}
  .held h1{font-size:26pt}
  .blok{padding:7mm 0;break-inside:auto}
  .blok.donker{margin:0;padding:8mm 8mm;border-radius:4mm}
  .card,.actie,table,tr,.check li,.metfoto{break-inside:avoid}
  h2,h3{break-after:avoid}
  .metfoto{grid-template-columns:1fr 45mm}
  .gids article,.voorwaarden article{box-shadow:none;padding:0;max-width:none;margin:0}
  .voet{background:none;color:var(--muted);padding:6mm 0 0;font-size:8.5pt}
  .voet a{color:var(--wine)!important}
  .voet .klein{color:var(--muted)}
  a[href^="http"]:not(.knop){text-decoration:none}
}

/* QR-code onderaan elke pagina, naar de promopagina */
.qr{display:flex;align-items:center;justify-content:center;gap:18px;max-width:560px;margin:10px auto 34px;padding:16px 20px;background:var(--paper);border-radius:16px;box-shadow:0 8px 30px rgba(43,38,34,.07);text-decoration:none!important;color:var(--ink,#2b2622)!important}
.qr svg{width:110px;height:110px;flex:none;border-radius:6px}
.qr span{font-size:1.05rem;line-height:1.4;font-weight:600}
.qr:hover span{text-decoration:underline}
@media (max-width:480px){ .qr{flex-direction:column;text-align:center} }
@media print{ .qr{box-shadow:none;border:1px solid #ddd;margin:6mm auto 0;page-break-inside:avoid} .qr svg{width:28mm;height:28mm} }