/* 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:var(--t-label);text-transform:uppercase;
  letter-spacing:.1em;line-height:1;color:rgba(244,238,228,.72);
  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-fest);border-color:var(--ember-fest);
  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:var(--t-label);letter-spacing:.06em}
/* 22 x 20 waren fuer den Buchstaben zu eng und als Schaltflaeche zu klein. */
.lex__azb{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
  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)}
/* Gemessen bei 1680 Pixeln: 9,28 Pixel. Kein anderes Label dieses Auftritts
   liegt unter .72rem — dieses war der Ausreisser und genau das, was auf dem
   Bildschirmfoto nicht mehr zu lesen war. Es bekommt jetzt dieselbe Groesse
   wie jedes andere Kleinlabel, die Sperrung geht dafuer leicht zurueck,
   damit die Pille nicht breiter wird.                                     */
.lex__tag{flex:none;font-family:var(--f-mono);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.11em;color:var(--ember-lo);padding:.28em .58em;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-2)}
.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:14px;height:1.8px;transform:translate(-50%,-50%)}
.lex__plus::after{width:1.8px;height:14px;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}
}