/* Coffee Festival Europe — Kaffee-Lexikon.
   Search, category chips and an A–Z rail over one list of expandable entries.
   Filtering animates the entries out and back in rather than snapping, and the
   rail dims letters that have nothing left rather than removing them, so the
   page never jumps under the pointer while you type. */

.lex{padding-block:clamp(28px,5vh,64px) clamp(48px,8vh,110px)}

/* ---------- CONTROL BAR -------------------------------------------------- */
.lex__bar{position:sticky;top:calc(var(--nav-h) - 6px);z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.4vw,18px);
  margin-bottom:clamp(22px,3.4vh,44px);padding:clamp(12px,1.4vw,18px);
  border-radius:clamp(16px,1.6vw,24px);
  background:rgba(20,18,16,.86);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(244,238,228,.1)}

.lex__search{position:relative;display:flex;align-items:center;gap:.6rem;flex:1 1 15rem;
  min-width:0;padding:.6rem .85rem;border-radius:999px;
  background:rgba(244,238,228,.05);border:1px solid rgba(244,238,228,.12);
  transition:border-color .4s var(--e-out-cubic),background-color .4s var(--e-out-cubic)}
.lex__search:focus-within{border-color:rgba(226,85,30,.55);background:rgba(244,238,228,.08)}
.lex__search > svg{flex:none;width:18px;height:18px;color:var(--muted)}
.lex__search:focus-within > svg{color:var(--ember-lo)}
.lex__search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ivory);
  font:inherit;font-size:clamp(.88rem,1vw,.98rem)}
.lex__search input::placeholder{color:var(--muted)}
.lex__search input::-webkit-search-cancel-button{display:none}
.lex__clear{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  color:var(--muted);background:rgba(244,238,228,.08);cursor:pointer;border:0}
.lex__clear:hover{color:var(--ivory);background:rgba(244,238,228,.18)}
.lex__clear svg{width:11px;height:11px}

.lex__cats{display:flex;flex-wrap:wrap;gap:6px}
.lex__cat{padding:.5rem .85rem;border-radius:999px;cursor:pointer;
  font-family:var(--f-mono);font-size:clamp(.58rem,.66vw,.68rem);text-transform:uppercase;
  letter-spacing:.11em;line-height:1;color:rgba(244,238,228,.62);
  background:rgba(244,238,228,.05);border:1px solid transparent;
  transition:color .32s var(--e-out-cubic),background-color .32s var(--e-out-cubic),
             border-color .32s var(--e-out-cubic),transform .5s var(--e-out-expo)}
.lex__cat:hover{color:var(--ivory);background:rgba(244,238,228,.1);transform:translateY(-1px)}
.lex__cat.is-on{color:#fff;background:var(--ember);border-color:var(--ember);
  box-shadow:0 8px 20px rgba(226,85,30,.3)}
.lex__count{margin-left:auto;flex:none;color:var(--muted);letter-spacing:.12em}

/* ---------- LAYOUT ------------------------------------------------------- */
.lex__body{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,44px);align-items:start}
.lex__az{position:sticky;top:calc(var(--nav-h) + 92px);
  display:grid;gap:1px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em}
.lex__azb{display:grid;place-items:center;width:22px;height:20px;border-radius:6px;
  color:var(--muted-2);background:none;border:0;cursor:pointer;
  transition:color .3s var(--e-out-cubic),background-color .3s var(--e-out-cubic)}
.lex__azb:hover:not(:disabled){color:var(--ivory);background:rgba(244,238,228,.1)}
.lex__azb:disabled{opacity:.24;cursor:default}
.lex__azb.is-live{color:var(--ember)}

/* ---------- ENTRIES ------------------------------------------------------ */
.lex__list{display:grid;gap:8px}
.lex__letter{margin-top:clamp(14px,2vh,26px);padding-bottom:.4rem;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;color:var(--ember);
  border-bottom:1px solid rgba(244,238,228,.1);
  scroll-margin-top:calc(var(--nav-h) + 100px)}
.lex__letter:first-child{margin-top:0}

.lex__item{position:relative;overflow:hidden;border-radius:14px;
  border:1px solid rgba(244,238,228,.09);background:rgba(244,238,228,.028);
  transition:border-color .45s var(--e-out-cubic),background-color .45s var(--e-out-cubic)}
.lex__item:hover{border-color:rgba(226,85,30,.3);background:rgba(244,238,228,.05)}
.lex__item.is-open{border-color:rgba(226,85,30,.42);background:rgba(244,238,228,.055)}
.lex__head{width:100%;display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);
  padding:clamp(13px,1.5vw,19px) clamp(14px,1.7vw,22px);
  background:none;border:0;cursor:pointer;text-align:left;color:inherit}
.lex__t{flex:1;min-width:0;font-family:var(--f-display);font-weight:680;font-stretch:104%;
  font-size:clamp(.98rem,1.2vw,1.14rem);letter-spacing:-.015em;color:var(--ivory)}
.lex__tag{flex:none;font-family:var(--f-mono);font-size:.58rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ember-lo);padding:.3em .62em;border-radius:999px;
  background:rgba(226,85,30,.1);border:1px solid rgba(226,85,30,.22)}
.lex__plus{flex:none;position:relative;width:18px;height:18px;color:var(--muted)}
.lex__plus::before,.lex__plus::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;
  transition:transform .55s var(--e-out-expo),opacity .35s var(--e-out-cubic)}
.lex__plus::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.lex__plus::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.lex__item.is-open .lex__plus{color:var(--ember)}
.lex__item.is-open .lex__plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.lex__d{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--e-out-expo)}
.lex__item.is-open .lex__d{grid-template-rows:1fr}
.lex__dinner{overflow:hidden}
.lex__dinner p{margin:0;padding:0 clamp(14px,1.7vw,22px) clamp(15px,1.7vw,21px);
  max-width:76ch;font-size:clamp(.87rem,.98vw,.97rem);line-height:1.66;
  color:var(--bone);opacity:.84}

/* filter transition — the list fades and lifts rather than snapping */
.lex__item{opacity:0;transform:translateY(14px)}
.lex__item.is-in{opacity:1;transform:none;
  transition:opacity .5s var(--e-out-cubic),transform .7s var(--e-out-expo),
             border-color .45s var(--e-out-cubic),background-color .45s var(--e-out-cubic)}
.lex__letter{opacity:0;transform:translateY(10px)}
.lex__letter.is-in{opacity:1;transform:none;
  transition:opacity .45s var(--e-out-cubic),transform .6s var(--e-out-expo)}

.lex__empty{padding:clamp(24px,4vw,48px);text-align:center;border-radius:16px;
  border:1px dashed rgba(244,238,228,.18);background:rgba(244,238,228,.03);
  color:var(--bone);opacity:.82}

@media (max-width:700px){
  .lex__body{grid-template-columns:1fr}
  .lex__az{position:static;grid-auto-flow:column;grid-template-columns:none;
    overflow-x:auto;gap:2px;padding-bottom:.6rem;
    scrollbar-width:none}
  .lex__az::-webkit-scrollbar{display:none}
  .lex__count{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .lex__item,.lex__letter{opacity:1;transform:none;transition:none}
  .lex__d{transition:none}
}