/* Wijnkaart — Den Bonten Os
   Geen kleur, alleen zwart, wit en de grijzen ertussen. De rijkdom komt
   uit de typografie en de witruimte: Playfair Display voor de namen en de
   prijzen, Montserrat 300 voor alles wat bediening is, haarlijnen in
   plaats van kaders. Typografie en romptint komen van
   denbontenos.jitware.me.

   Mobiel-eerst: de basis is de telefoon, de bredere schermen staan
   onderaan in twee media queries. */
:root{
  --paper:#FFFFFF;
  --wash:#F7F6F4;                   /* zetting van de romp, geen tint */
  --ink:#1C1917;                    /* dezelfde romp als de website */
  --ink2:#3A3735;
  --muted:#8B8783;
  --faint:#B6B2AE;
  --line:#E4E1DD;
  --line2:#F0EEEB;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --tap:46px;                       /* kleinste knop die een duim betrouwbaar raakt */
  --rand:20px;                      /* de marge waar niets doorheen mag */
  --vloei:.22s cubic-bezier(.22,.61,.36,1);
}
/* 's Avonds aan tafel leest wit op donker prettiger. Enkel de tokens
   wisselen, zodat er nergens een kleur buiten dit blok kan ontstaan. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#121110; --wash:#1B1A18; --ink:#F5F3F0; --ink2:#D2CEC9;
    --muted:#918C87; --faint:#6B6763; --line:#302D2A; --line2:#232120;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink2);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:940px;margin:0 auto;padding:0 var(--rand)}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- kop ---------- */
.huis{
  font-family:var(--serif);font-weight:500;font-size:clamp(15px,4vw,17px);
  letter-spacing:.02em;color:var(--ink);margin:0;
}
.masthead{padding:34px 0 26px;border-bottom:1px solid var(--line)}
.masthead h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(38px,11vw,62px);
  line-height:1;margin:10px 0 0;letter-spacing:-.035em;color:var(--ink);
  text-wrap:balance;
}
.masthead h1 em{font-style:italic;color:var(--muted)}
.eyebrow{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:12px 0 0;
}
/* De cijfers als een fijne rij met haarlijnen ertussen. */
.facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 0;padding:0;color:var(--muted);font-size:12.5px}
.facts span{display:flex;align-items:baseline;gap:5px}
.facts b{
  color:var(--ink);font-family:var(--serif);font-weight:400;font-size:17px;
  font-variant-numeric:tabular-nums;
}

/* ---------- balk ---------- */
.bar{
  position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);transition:box-shadow var(--vloei);
}
.bar.klein{box-shadow:0 1px 14px rgba(0,0,0,.06)}
.bar-in{display:flex;gap:10px;align-items:center;padding:14px 0 6px;flex-wrap:wrap}

.search{position:relative;flex:1 1 100%;min-width:0}
.search input{
  width:100%;height:var(--tap);padding:0 var(--tap) 0 42px;
  background:var(--wash);border:1px solid transparent;border-radius:calc(var(--tap)/2);
  color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:16px;                                  /* 16px: anders zoomt iOS in */
  transition:background var(--vloei),border-color var(--vloei);
}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:0;background:var(--paper);border-color:var(--ink)}
.search svg{position:absolute;left:16px;top:15px;color:var(--muted);pointer-events:none}
.search .clear{
  position:absolute;right:2px;top:0;width:var(--tap);height:var(--tap);
  background:none;border:0;color:var(--muted);cursor:pointer;font-size:22px;line-height:1;
}
.search .clear:hover{color:var(--ink)}

/* Een label boven elke keuzelijst: dan hoef je niet te raden wat hij doet. */
.kiezers{display:flex;gap:10px;flex:1 1 100%;min-width:0}
.kies{flex:1 1 0;min-width:0;position:relative;display:block}
.kies > span{
  position:absolute;top:7px;left:15px;z-index:1;pointer-events:none;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.kies select{
  width:100%;height:58px;padding:18px 34px 0 14px;
  background:var(--wash);border:1px solid transparent;border-radius:12px;color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:14.5px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  text-overflow:ellipsis;transition:border-color var(--vloei);
}
.kies::after{
  content:'';position:absolute;right:16px;bottom:24px;width:7px;height:7px;
  border-right:1.2px solid var(--muted);border-bottom:1.2px solid var(--muted);
  transform:rotate(45deg);pointer-events:none;
}
.kies select:focus{outline:0;border-color:var(--ink)}

/* De chips schuiven zijwaarts in plaats van drie rijen hoog te worden. */
.chips{
  display:flex;gap:8px;padding:6px 0 14px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;color:var(--ink2);height:42px;padding:0 8px 0 18px;
  font-size:13.5px;font-family:var(--sans);font-weight:400;cursor:pointer;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  transition:background var(--vloei),color var(--vloei),border-color var(--vloei);
}
.chip b{
  font-weight:400;font-size:11.5px;color:var(--faint);
  background:var(--wash);border-radius:999px;padding:3px 9px;
  font-variant-numeric:tabular-nums;transition:inherit;
}
.chip:hover{border-color:var(--ink2)}
.chip[aria-pressed=true]{color:#FFFFFF;background:var(--ink);border-color:var(--ink)}
.chip[aria-pressed=true] b{color:var(--ink);background:#FFFFFF}

/* ---------- wat er nu aanstaat ---------- */
.actief{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:18px 0 0}
.actief-l{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-right:2px;
}
.pil{
  display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 8px 0 15px;
  background:var(--ink);border:0;border-radius:999px;color:#FFFFFF;
  font-family:var(--sans);font-weight:400;font-size:13px;cursor:pointer;
}
.pil i{
  font-style:normal;font-size:15px;line-height:1;opacity:.7;
  width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.16);transition:opacity var(--vloei);
}
.pil:hover i{opacity:1}
.alles{
  background:none;border:0;color:var(--muted);font-family:var(--sans);font-weight:400;
  font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  height:36px;padding:0 4px;
}
.alles:hover{color:var(--ink)}

/* ---------- inhoud ---------- */
.cols{display:block;padding-top:26px;padding-bottom:90px}
.toc{display:none}
.toc-mobile{display:block;margin:0 0 22px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.toc-mobile summary{
  cursor:pointer;min-height:54px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;font-size:14px;color:var(--ink2);list-style:none;
}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary i{
  width:8px;height:8px;border-right:1.2px solid var(--muted);border-bottom:1.2px solid var(--muted);
  transform:rotate(45deg);margin-top:-4px;transition:transform var(--vloei);
}
.toc-mobile[open] summary i{transform:rotate(-135deg);margin-top:2px}
.toc-mobile[open] summary{border-bottom:1px solid var(--line)}
.toc-mobile .toc{display:block;position:static;max-height:none;padding:10px 18px 18px}
.toc h2{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  margin:0 0 10px;font-weight:400;
}
.toc .cat{font-family:var(--serif);font-size:17px;font-weight:400;margin:20px 0 4px;color:var(--ink)}
.toc .cat:first-of-type{margin-top:6px}
.toc a{
  display:flex;justify-content:space-between;gap:12px;text-decoration:none;
  color:var(--ink2);font-size:13.5px;min-height:38px;align-items:center;
  transition:color var(--vloei);
}
.toc a:hover{color:var(--ink)}
.toc a .pg{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--faint)}

.count{color:var(--muted);font-size:13px;margin:0 0 16px;letter-spacing:.01em}
.count b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}

/* ---------- bladeren ---------- */
.pager{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.pager-onder{margin:24px 0 0}
.pager button{
  flex:1 1 0;min-height:var(--tap);background:var(--paper);
  border:1px solid var(--line);color:var(--ink);border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-weight:400;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:border-color var(--vloei),background var(--vloei),opacity var(--vloei);
}
.pager button em{font-style:normal}
.pager button:hover:not(:disabled){border-color:var(--ink);background:var(--wash)}
.pager button:disabled{opacity:.28;cursor:default}
.pager .now{
  flex:0 0 auto;text-align:center;font-variant-numeric:tabular-nums;
  color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:baseline;gap:6px;padding:0 4px;
}
.pager .now b{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:400;letter-spacing:0}
.pager .now i{font-style:normal}

/* ---------- de kaartpagina ---------- */
.sheet{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:30px 18px 40px;max-width:660px;margin:0 auto;position:relative;
}
.sheet .hd{text-align:center;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line2)}
.sheet .hd .c{
  font-family:var(--serif);font-size:clamp(24px,7vw,30px);font-weight:400;
  letter-spacing:-.03em;color:var(--ink);line-height:1.15;
}
.sheet .hd .r{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.sheet .hd .s{font-size:12.5px;color:var(--faint);margin-top:5px}
.sheet .pn{
  position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.2em;
}

/* Op de telefoon staat het jaartal boven de naam en de prijs rechts:
   twee kolommen in plaats van drie, dus lange namen breken minder af. */
.wine{
  display:grid;grid-template-columns:1fr auto;gap:3px 16px;
  padding:14px 10px;margin:0 -10px;border-bottom:1px solid var(--line2);
  cursor:pointer;position:relative;border-radius:8px;
  transition:background var(--vloei);
}
.wine:last-of-type{border-bottom:0}
.wine:hover{background:var(--wash)}
.wine:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.wine .yr{
  grid-column:1;font-size:10.5px;color:var(--faint);letter-spacing:.14em;
  font-variant-numeric:tabular-nums;text-transform:uppercase;
}
.wine .nm{
  grid-column:1;font-family:var(--serif);font-size:17.5px;line-height:1.3;
  font-weight:400;color:var(--ink);
}
.wine .nm .app{color:var(--ink2)}
.wine .nm .cuv{font-style:italic;color:var(--muted)}
.wine .gr{
  display:block;font-family:var(--sans);font-size:12px;color:var(--muted);
  margin-top:5px;font-weight:300;letter-spacing:.01em;
}
.wine .fmt{
  display:inline-block;font-family:var(--sans);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:3px;
  padding:2px 6px;margin-left:8px;color:var(--muted);vertical-align:2px;font-weight:400;
}
.wine .pr{
  grid-column:2;grid-row:1/3;align-self:center;color:var(--ink);
  font-family:var(--serif);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:400;white-space:nowrap;
}
.wine .pr::before{content:'\20AC\00A0';font-size:12px;color:var(--faint)}
.wine.uit{opacity:.55}
.wine .pr.uit{
  font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;
  padding:4px 8px;white-space:nowrap;
}
.wine .pr.uit::before{content:none}
.wine .pr.nop{color:var(--faint)}
.wine .pr.nop::before{content:none}

/* Openvouwen. Bewust NIET met een overgang op de hoogte: zowel de
   0fr/1fr-truc als een max-height liet het paneel dicht zolang de
   overgang niet liep, en dan is de inhoud onbereikbaar. Nu bepaalt
   display of het er staat, en doet de animatie er alleen nog iets
   bovenop. Loopt ze niet, dan zie je de tekst gewoon meteen. */
.detail{grid-column:1/-1;font-size:12px;color:var(--muted);display:none}
.wine.open .detail{display:block;padding-top:10px;animation:vouw .22s ease both}
@keyframes vouw{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.detail .pad{display:block;letter-spacing:.01em}
.detail .dl{display:block;margin-top:3px;color:var(--faint)}
.detail i{font-style:normal;padding:0 7px;color:var(--faint)}
.detail b{color:var(--ink2);font-weight:400}
.wine.open{background:var(--wash)}
/* In een andere volgorde staan de wijnen niet meer onder hun landkop,
   dus krijgt elke rij haar herkomst mee. */
.herk{
  grid-column:1;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:5px;
}
.sheet.lijst{padding-top:26px}

mark{background:var(--ink);color:#FFFFFF;border-radius:2px;padding:0 3px}

.empty{padding:64px 8px;text-align:center}
.empty .e1{font-family:var(--serif);font-size:25px;color:var(--ink);margin:0 0 8px;font-weight:400}
.empty .e2{color:var(--muted);font-size:14px;margin:0 0 24px}

/* terug naar boven */
.omhoog{
  position:fixed;right:var(--rand);bottom:var(--rand);z-index:50;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;font-size:17px;
  box-shadow:0 2px 16px rgba(0,0,0,.10);transition:background var(--vloei),color var(--vloei);
}
.omhoog:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- beheer ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 18px}
.panel h2{
  font-family:var(--serif);font-weight:400;font-size:23px;margin:0 0 6px;
  letter-spacing:-.02em;color:var(--ink);
}
.panel p.hint{color:var(--muted);font-size:14px;margin:0 0 18px;max-width:62ch}
.drop{
  border:1px dashed var(--line);border-radius:12px;padding:36px 18px;text-align:center;
  background:var(--wash);transition:border-color var(--vloei);
}
.drop.over{border-color:var(--ink)}
.drop b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;margin-bottom:6px;color:var(--ink)}
.drop span{color:var(--muted);font-size:13.5px}
.btn{
  background:var(--ink);border:1px solid var(--ink);color:#FFFFFF;min-height:var(--tap);
  padding:0 28px;border-radius:999px;font-family:var(--sans);font-weight:400;
  font-size:15px;cursor:pointer;transition:opacity var(--vloei);
}
.btn:hover{opacity:.86}
.btn.ghost{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink);opacity:1}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.row .btn{flex:1 1 auto}
.status{font-size:14px;color:var(--muted);margin:16px 0 0;min-height:20px;line-height:1.5}
.status.err{color:var(--ink)}
.status.err::before{content:'\2717\00A0\00A0'}
.status.ok{color:var(--ink)}
.status.ok::before{content:'\2713\00A0\00A0'}
.diff{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;margin-top:20px}
.diff div{background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:14px 10px;text-align:center}
.diff b{
  display:block;font-family:var(--serif);font-size:25px;font-weight:400;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.diff span{font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.changes{margin-top:18px;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.changes table{width:100%;border-collapse:collapse;font-size:13.5px}
.changes td{padding:10px 14px;border-bottom:1px solid var(--line2)}
.changes tr:last-child td{border-bottom:0}
.changes td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.changes .up,.changes .down{color:var(--ink)}
.changes .up::after{content:'\00A0\2191';color:var(--faint)}
.changes .down::after{content:'\00A0\2193';color:var(--faint)}

/* ---------- vanaf tablet ---------- */
@media (min-width:700px){
  :root{--rand:28px}
  .masthead{padding:52px 0 32px}
  .facts{gap:0}
  .facts span{padding:0 18px;border-left:1px solid var(--line)}
  .facts span:first-child{padding-left:0;border-left:0}
  .bar-in{flex-wrap:nowrap;padding:14px 0 8px}
  .search{flex:1 1 auto}
  .kiezers{flex:0 0 360px}
  .pager button{flex:0 0 auto;padding:0 22px}
  .pager .now{flex:1 1 auto}
  .wine{grid-template-columns:60px 1fr auto;gap:16px;align-items:baseline;padding:14px 12px}
  .wine .yr{grid-column:1;padding-top:4px}
  .wine .nm{grid-column:2}
  .wine .pr{grid-column:3;grid-row:auto;align-self:baseline}
  .wine .detail{grid-column:2/-1;align-self:start}
  .herk{grid-column:2}
  .sheet{padding:44px 40px 46px}
  .panel{padding:28px}
}
@media (min-width:1040px){
  .wrap{max-width:1160px}
  .cols{display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start}
  .toc{display:block;position:sticky;top:170px;max-height:calc(100vh - 200px);overflow:auto;padding-right:8px}
  .toc-mobile{display:none}
  .omhoog{right:32px;bottom:32px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media print{
  .bar,.toc,.toc-mobile,.count,.pager,.omhoog,.actief{display:none!important}
  body{background:#fff;color:#000}
  .wine{break-inside:avoid;border-bottom:1px solid #ddd;margin:0;padding:8px 0}
  .wine .detail{display:none}
  .sheet{border:0;padding:0;max-width:none}
}

/* navigatie op de beheerpagina's */
.beheer-nav{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.beheer-nav a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);
  border-radius:999px;background:var(--paper);color:var(--ink2);font-size:13px;font-weight:400;
  text-decoration:none;white-space:nowrap;transition:border-color var(--vloei),color var(--vloei);
}
.beheer-nav a:hover{border-color:var(--ink);color:var(--ink)}
.beheer-nav a.nu{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Ingebed op een andere website: index.html?embed=1 (&theme=dark voor de donkere site) */
html.embed .masthead{display:none}
html.embed .bar{position:static;box-shadow:none}
html.embed .omhoog{display:none !important}
html.embed .cols{padding-top:6px}
html.embed-dark{
  --paper:#151311; --wash:#1B1A18; --ink:#F5F3F0; --ink2:#D2CEC9;
  --muted:#918C87; --faint:#6B6763; --line:#302D2A; --line2:#232120;
}
html.embed-dark .chip[aria-pressed=true]{color:var(--paper)}
html.embed-dark .chip[aria-pressed=true] b{background:var(--paper);color:var(--ink)}
html.embed-dark .btn,html.embed-dark .pil{color:var(--paper)}
html.embed-dark mark{color:var(--paper)}
html.embed-dark .search input:focus{background:var(--wash)}

/* Ingebed op een witte pagina: index.html?embed=1&theme=light (blijft licht, ook bij een donker toestel) */
html.embed-light{
  color-scheme:light;
  --paper:#FFFFFF; --wash:#F7F6F4; --ink:#1C1917; --ink2:#3A3735;
  --muted:#8B8783; --faint:#B6B2AE; --line:#E4E1DD; --line2:#F0EEEB;
}