/* Ember wijnkaart. Stijl volgt de nieuwe website: donker houtskool-bruin, wit, Ashcroft, hoofdletters met wat spatiëring. */
@font-face{font-family:"Ashcroft";src:url("fonts/Ashcroft-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg:#140901; --bg-2:#361505; --bg-3:#1f0f04;
  --ink:#ffffff; --ink-80:rgba(255,255,255,.8); --ink-60:rgba(255,255,255,.6); --ink-35:rgba(255,255,255,.35);
  --line:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.5);
  --ok:#9fd2a9; --warn:#f0b36e; --crit:#ff9a8a;
  --font:"Ashcroft","Marcellus",Georgia,serif;
  --track:.035em;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font);padding:env(safe-area-inset-top,0px) 20px env(safe-area-inset-bottom,0px);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding-block:0 80px}

/* kop */
.top{position:sticky;top:env(safe-area-inset-top,0px);box-shadow:0 -60px 0 var(--bg);z-index:10;background:var(--bg);display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:16px;border-bottom:1px solid var(--line)}
.logo{display:block;width:132px;aspect-ratio:1301/198;background:var(--ink);-webkit-mask:url("img/ember-logo.png") left center/contain no-repeat;mask:url("img/ember-logo.png") left center/contain no-repeat;flex:none}
.top nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-left:auto}
.navlink{text-transform:uppercase;font-size:.95rem;color:var(--ink-80);text-decoration:none;padding:10px 0}
.navlink:hover,.navlink[aria-current]{color:var(--ink)}

/* knoppen zoals "Book your table ■" */
.btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 20px;border:1px solid var(--line-strong);background:rgba(20,9,1,.15);color:var(--ink);font:400 .95rem var(--font);text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0}
.btn::after{content:"";width:4px;height:4px;background:currentColor;align-self:flex-end;margin-bottom:15px}
.btn:hover{background:var(--bg-2)}
.btn.vol{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.klein{min-height:40px;padding:0 14px;font-size:.85rem}
.btn.klein::after{margin-bottom:13px}
.tekstlink{display:inline-flex;gap:6px;align-items:baseline;text-transform:uppercase;font-size:.95rem;text-decoration:none;border:0;background:none;color:var(--ink);padding:12px 0;cursor:pointer;font-family:var(--font)}
.tekstlink span{border-bottom:1px solid var(--ink-60);padding-bottom:3px}
.tekstlink::after{content:"";width:4px;height:4px;background:currentColor}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* typografie */
h1,.h1{font:400 clamp(2.2rem,6vw,4.6rem)/1 var(--font);text-transform:uppercase;letter-spacing:var(--track);margin:0;text-wrap:balance}
.kicker{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-60);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.muted{color:var(--ink-60)}
.klein{font-size:.85rem}

/* wijnstalen */
.sw{display:inline-block;width:10px;height:10px;flex:none;border:1px solid var(--ink-35)}
.sw-rood{background:#8c1b30}.sw-wit{background:#eadc98}.sw-rose{background:#eba5a8}.sw-bub{background:#f6eed3}.sw-zoet{background:#c88a2a}.sw-alc{background:#a8c4b2}

/* gast: keuzestappen */
.stap{padding-top:48px}
.stap h1{margin-bottom:34px}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.tegel{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:150px;padding:22px;background:var(--bg);border:1px solid var(--line-strong);color:var(--ink);text-decoration:none;transition:background .15s}
.tegel:hover,.tegel:active{background:var(--bg-2)}
.tegel .naam{font-size:1.6rem;line-height:1.05;text-transform:uppercase;letter-spacing:var(--track);display:flex;align-items:center;gap:12px}
.tegel .aantal{color:var(--ink-60);font-size:.9rem;display:flex;justify-content:space-between;align-items:center}
.tegel .aantal::after{content:"→";color:var(--ink-80)}
.tegel.alle{background:var(--bg-3)}
.terug{display:inline-block;color:var(--ink-60);text-decoration:none;text-transform:uppercase;font-size:.85rem;padding:10px 0;margin-bottom:12px}
.onder{margin-top:26px}

/* gast: lijst */
.balk{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-top:28px}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuze{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);text-decoration:none;text-transform:uppercase;font-size:.85rem;color:var(--ink)}
.keuze.wis::after{content:"✕";font-size:.7rem;color:var(--ink-60)}
.keuze.zacht{border-color:var(--line);color:var(--ink-60)}
.zoek{display:flex;gap:8px;flex:1 1 380px;max-width:560px}
input,select,textarea{font:400 1rem var(--font);color:var(--ink);background:var(--bg-3);border:1px solid var(--line);border-radius:0;padding:10px 12px;min-height:44px;width:100%}
input:focus,select:focus{border-color:var(--line-strong);outline:none}
.zoek input{flex:1;min-width:0}.zoek select{width:auto}
.teller{color:var(--ink-60);font-size:.85rem;margin:18px 0 0}
.sectie{font:400 clamp(1.8rem,4vw,2.8rem)/1 var(--font);text-transform:uppercase;letter-spacing:var(--track);margin:56px 0 0;display:flex;align-items:center;gap:14px}
.sectie .sw{width:12px;height:12px}
.land{font-size:1.25rem;text-transform:uppercase;letter-spacing:var(--track);margin:36px 0 0;padding-bottom:10px;border-bottom:1px solid var(--line-strong)}
.regio{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-60);margin:22px 0 0}
.wijn{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.wijn .l{min-width:0}
.wijn h3{margin:0;font:400 1.1rem/1.3 var(--font)}
.wijn h3 .v{color:var(--ink-60)}
.wijn p{margin:3px 0 0;color:var(--ink-60);font-size:.9rem}
.prijs{white-space:nowrap;font-size:1.15rem;font-variant-numeric:tabular-nums}
.leeg{padding:48px 0;color:var(--ink-60)}

/* beheer */
.paneel{margin-top:28px;border:1px solid var(--line);padding:20px;background:var(--bg-3)}
.paneel h2{font:400 1.3rem var(--font);text-transform:uppercase;letter-spacing:var(--track);margin:0 0 14px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.form label{display:grid;gap:5px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-60);min-width:0}
.form .breed{grid-column:1/-1}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}
.filters input{flex:1 1 240px;width:auto}.filters select{width:auto;flex:0 1 200px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tabelwrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:900px;font-size:.95rem}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-60);font-weight:400;background:var(--bg-3)}
tr:target td{background:var(--bg-2)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td input{width:90px;text-align:right;min-height:40px;padding:6px 8px}
td select{width:auto;min-height:40px;padding:6px 8px}
.voorraad{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.voorraad form{margin:0}
.voorraad button{width:42px;height:42px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:400 1.3rem var(--font);cursor:pointer}
.voorraad button:active{background:var(--bg-2)}
.voorraad input.aantal{width:56px;text-align:center;font-size:1.05rem;padding:6px}
.pil{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border:1px solid currentColor;margin-top:5px;white-space:nowrap}
.p-ok{color:var(--ok)}.p-warn{color:var(--warn)}.p-crit{color:var(--crit)}.p-onb{color:var(--ink-35)}
.vink{width:24px;height:24px;accent-color:#fff;min-height:0}
.melding{margin-top:18px;padding:12px 16px;border:1px solid var(--line-strong)}
.melding.fout{border-color:var(--crit);color:var(--crit)}
.login{max-width:380px;margin:12vh auto 0;display:grid;gap:14px}
.login h1{font-size:2.2rem}
details summary{cursor:pointer;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;padding:6px 0}
.log{font-size:.85rem;color:var(--ink-80)}
.log li{padding:4px 0;border-bottom:1px solid var(--line)}

@media (max-width:600px){
  body{padding-inline:16px}
  .logo{width:104px}
  .top nav{gap:14px}
  .tegels{grid-template-columns:1fr 1fr}
  .tegel{min-height:120px;padding:16px}
  .tegel .naam{font-size:1.15rem}
  .zoek{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.tegel{transition:none}}

/* marktprijs */
.markt{margin-top:6px}
.markt summary{font-size:.78rem;color:var(--ink-60);display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none}
.markt summary::-webkit-details-marker{display:none}
.markt summary::before{content:"+";width:1em;color:var(--ink-35)}
.markt[open] summary::before{content:"−"}
.markt .pil{margin-top:0}
.marktpaneel{margin-top:8px;padding:12px;border:1px solid var(--line);background:var(--bg);display:grid;gap:10px;max-width:520px;white-space:normal}
.marktform{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.marktform label{display:grid;gap:4px;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-60)}
.marktform input{width:120px;text-align:right}
.marktpaneel p{margin:0;color:var(--ink-80)}
.marktknoppen{display:flex;gap:8px;flex-wrap:wrap}
.marktknoppen form{margin:0}
.wijncel{min-width:300px}
.factor-let{color:var(--warn)}

/* beheer: volle breedte van het scherm */
body.beheer .wrap{max-width:none}
body.beheer table{min-width:1100px}
.rijform{display:flex;gap:8px;align-items:center;margin:0}
td .rijform input{width:200px;text-align:left}
table.gebruikers{min-width:640px}
.btn.gevaar{border-color:var(--crit);color:var(--crit)}
.btn.gevaar:hover{background:rgba(255,154,138,.12)}