/* ═══════════════════════════════════════════════════════════════════════
   Wijnen Vroman — prijslijst in A4, klaar om als PDF te bewaren
   Alle maten in millimeter, zodat scherm en papier hetzelfde zijn.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Cinzel'; src:url('/assets/fonts/Cinzel-Regular.ttf') format('truetype');
             font-weight:400; font-display:block; }
@font-face { font-family:'Cinzel'; src:url('/assets/fonts/Cinzel-SemiBold.ttf') format('truetype');
             font-weight:600; font-display:block; }
@font-face { font-family:'Cinzel'; src:url('/assets/fonts/Cinzel-Bold.ttf') format('truetype');
             font-weight:700; font-display:block; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/CormorantGaramond-Regular.ttf') format('truetype');
             font-weight:400; font-display:block; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/CormorantGaramond-Medium.ttf') format('truetype');
             font-weight:500; font-display:block; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/CormorantGaramond-Bold.ttf') format('truetype');
             font-weight:700; font-display:block; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/CormorantGaramond-Italic.ttf') format('truetype');
             font-weight:400; font-style:italic; font-display:block; }

:root{
  --wijn:#6B1220; --wijn-diep:#4A0B15; --goud:#B08D57;
  --room:#F5EFE0; --inkt:#221E19; --inkt-zacht:#6B6156; --lijn:#D9CDB4;
  --display:'Cinzel', Georgia, serif;
  --tekst:'Cormorant', Georgia, serif;
  --ui:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* paginaraster */
  --marge-zij:16mm;
  --marge-boven:18mm;
  --marge-onder:16mm;
  --kolom-kloof:12mm;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#8A8377; color:var(--inkt);
  font-family:var(--tekst); -webkit-font-smoothing:antialiased;
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}

/* ───────────────────────────── schermwerkbalk ──────────────────────────── */
.werkbalk{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 20px; background:#241A1C; color:#EDE2D0;
  font-family:var(--ui); font-size:12.5px;
}
.werkbalk__merk{ font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:11px; color:#C9A876; }
.werkbalk__veld{ display:flex; align-items:center; gap:8px; }
.werkbalk__veld span{ color:#B5A692; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.werkbalk__veld input{
  background:#33262A; border:1px solid #4B3A3E; color:#EDE2D0; border-radius:3px;
  padding:5px 9px; font:inherit; width:150px;
}
.werkbalk__vink{ display:flex; align-items:center; gap:7px; cursor:pointer; }
.werkbalk__vink input{ accent-color:#B08D57; }
.werkbalk__vul{ flex:1; }
.werkbalk__telling{ color:#B5A692; }
.werkbalk__knop{
  background:var(--wijn); color:#FDF7EC; border:none; border-radius:3px; cursor:pointer;
  padding:9px 20px; font:inherit; letter-spacing:.1em; text-transform:uppercase; font-size:11px;
}
.werkbalk__knop:hover{ background:#83202F; }
.werkbalk__terug{ color:#B5A692; text-decoration:none; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.werkbalk__terug:hover{ color:#EDE2D0; }

.uitleg{
  background:#EFE7D6; color:#4A4038; padding:11px 20px; font-family:var(--ui); font-size:12.5px;
  border-bottom:1px solid #D9CDB4;
}
.uitleg strong{ color:var(--wijn); }
.uitleg em{ font-style:normal; font-weight:600; }

#meten{ position:absolute; left:-10000px; top:0; visibility:hidden; }

/* ──────────────────────────────── het blad ─────────────────────────────── */
main{ padding:26px 0 40px; display:flex; flex-direction:column; align-items:center; gap:22px; }

.blad{
  position:relative; width:210mm; height:297mm; background:var(--room);
  overflow:hidden; box-shadow:0 6px 26px rgba(0,0,0,.32);
}
.blad__binnen{
  position:absolute; inset:var(--marge-boven) var(--marge-zij) var(--marge-onder);
  display:flex; flex-direction:column;
}

/* paginavoet */
.blad__voet{
  position:absolute; left:var(--marge-zij); right:var(--marge-zij); bottom:9mm;
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--ui); font-size:6.5pt; letter-spacing:.2em; text-transform:uppercase;
  color:var(--goud);
}
.blad__voet span:last-child{ color:var(--inkt-zacht); }

/* ─────────────────────────────── omslagblad ────────────────────────────── */
.blad--omslag{ padding:5mm; }
.omslag__beeld{
  height:52%; background-size:cover; background-position:center;
}
.omslag__onder{
  height:calc(48% - 0mm); display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding-top:16mm;
}
.omslag__logo{ width:104mm; height:auto; }
.omslag__datum{
  margin-top:auto; padding-bottom:10mm; font-family:var(--ui); font-size:8pt;
  letter-spacing:.24em; text-transform:uppercase; color:var(--goud);
}

/* ──────────────────────────────── voorwoord ────────────────────────────── */
.voorwoord{ text-align:center; align-items:center; justify-content:flex-start; padding-top:22mm; }
.voorwoord__logo{ width:78mm; height:auto; margin:0 auto 10mm; }
.voorwoord__streep{ width:64mm; height:1px; background:var(--goud); margin:0 auto 9mm; }
.voorwoord__titel{
  font-family:var(--display); font-weight:400; font-size:19pt; color:var(--wijn);
  letter-spacing:.05em; margin:0 0 8mm;
}
.voorwoord__tekst{ max-width:132mm; margin:0 auto; text-align:justify; font-size:11.5pt; line-height:1.6; }
.voorwoord__tekst p{ margin:0 0 5mm; }
.voorwoord__levering{ text-align:center !important; font-weight:500; margin-top:7mm !important; }
.voorwoord__slot{
  margin-top:9mm; font-style:italic; font-size:11.5pt; color:var(--inkt);
}
.voorwoord__naam{
  margin-top:7mm; font-family:var(--ui); font-size:10.5pt; font-weight:700; letter-spacing:.02em;
}

/* ──────────────────────────── afdelingsblad ────────────────────────────── */
.blad--afdeling{ padding:5mm; }
.afdeling__beeld{ height:52%; background-size:cover; background-position:center; }
.afdeling__onder{ height:48%; padding-top:14mm; text-align:center; }
.afdeling__titel{
  font-family:var(--display); font-weight:700; font-size:34pt; letter-spacing:.09em;
  text-transform:uppercase; margin:0; color:var(--inkt);
}
.afdeling__leus{
  font-style:italic; font-size:11.5pt; color:var(--wijn); margin:4mm 0 0;
}

/* ──────────────────────────────── lijstblad ────────────────────────────── */
.lijst__kop{
  font-family:var(--ui); font-size:12pt; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--wijn); margin:0 0 2mm;
}
.lijst__streep{ height:.8px; background:var(--goud); margin-bottom:6mm; }
.kolommen{
  display:flex; gap:var(--kolom-kloof); flex:1; min-height:0;
}
.kolom{ flex:1 1 0; min-width:0; }

.groep{ margin-bottom:6mm; }
.groep:last-child{ margin-bottom:0; }
.groep__naam{
  font-family:var(--ui); font-size:8.5pt; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wijn); margin:0 0 1.4mm;
}
.groep__streep{ width:22mm; height:.8px; background:var(--goud); margin-bottom:2.4mm; }

.regel{
  display:flex; align-items:baseline; gap:1.5mm; padding:1.05mm 0;
  border-bottom:.5px dotted var(--lijn);
}
.regel__naam{ font-size:10pt; line-height:1.28; color:var(--inkt); }
.regel__naam em{ font-style:normal; color:var(--inkt-zacht); }
.regel__stip{ flex:1; min-width:3mm; }
.regel__prijs{
  font-size:9.5pt; font-weight:700; color:var(--wijn); white-space:nowrap;
}
.regel__prijs--aanvraag{ font-weight:400; font-style:italic; font-size:8.5pt; color:var(--inkt-zacht); }

.voetnoot{
  margin-top:6mm; padding-top:4mm; border-top:.8px solid var(--goud);
  font-style:italic; font-size:9pt; line-height:1.45; color:var(--inkt-zacht); text-align:center;
}

/* ─────────────────────────────── contactblad ───────────────────────────── */
.blad--contact{ background:var(--wijn-diep); color:#EFE1CA; }
.contact{ text-align:center; align-items:center; justify-content:center; }
.contact__logo{ width:88mm; height:auto; margin:0 auto 12mm; }
.contact__streep{ width:66mm; height:.8px; background:rgba(216,188,138,.5); margin:0 auto 9mm; }
.contact__namen{ font-size:13pt; line-height:2.1; margin:0 0 9mm; }
.contact__kop{
  font-family:var(--ui); font-size:8pt; letter-spacing:.22em; text-transform:uppercase;
  color:#C9A876; margin:0 0 4mm;
}
.contact__gegevens{ font-size:13pt; line-height:1.9; margin:0; }
.contact__btw{ font-family:var(--ui); font-size:8.5pt; color:#B2977A; margin:5mm 0 0; letter-spacing:.06em; }
.contact__klein{
  position:absolute; left:22mm; right:22mm; bottom:20mm;
  font-style:italic; font-size:9.5pt; color:#CBB69B; text-align:center;
}
.contact__klein::before{
  content:''; display:block; width:56mm; height:.8px; background:rgba(216,188,138,.4);
  margin:0 auto 5mm;
}

/* ──────────────────────────────── afdrukken ────────────────────────────── */
@page{ size:A4; margin:0; }

@media print{
  body{ background:#fff; }
  .werkbalk, .uitleg, #meten{ display:none !important; }
  main{ padding:0; gap:0; display:block; }
  .blad{ box-shadow:none; break-after:page; page-break-after:always; margin:0; }
  .blad:last-child{ break-after:auto; page-break-after:auto; }
}