/* La Ruffa — Standort-Speisekarte */
.lr-karte { width: 100%; }

/* --------------------------------------------------------------------------
   Kategorie-Filter: Pinselstrich-Chips.
   Mobil/Tablet: horizontaler Slider (scroll-snap), Desktop: umbrechende Reihe.
   -------------------------------------------------------------------------- */
.lr-karte-filter { margin: 0 0 64px; }
.lr-karte-filter-track {
  display: flex;
  gap: 12px 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 24px 14px;
  scroll-padding-inline: 24px;
}
.lr-karte-filter-track::-webkit-scrollbar { display: none; }

.lr-chip {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  scroll-snap-align: start;
  min-width: 150px;
  height: 52px;
  padding: 0 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  text-transform: lowercase;
  letter-spacing: .02em;
  color: #F1EDE4;
  white-space: nowrap;
}
.lr-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #E30B13;
  -webkit-mask: url('/wp-content/uploads/2026/08/pinselstrich-kompakt.svg') 0 0 / 100% 100% no-repeat;
  mask: url('/wp-content/uploads/2026/08/pinselstrich-kompakt.svg') 0 0 / 100% 100% no-repeat;
  transition: background-color .2s ease;
}
.lr-chip:hover::before,
.lr-chip.is-active::before { background-color: #601122; }

@media (min-width: 991px) {
  .lr-karte-filter-track { flex-wrap: wrap; overflow-x: visible; padding: 0; }
}

/* --------------------------------------------------------------------------
   Kategorie-Sektionen & Gericht-Zeilen (Design: 54px-Titel, Eyebrow rot,
   2 Spalten ab Desktop, Hairline-Zeilen)
   -------------------------------------------------------------------------- */
.lr-karte-kategorie { margin: 0 0 90px; padding: 0 20px; scroll-margin-top: 110px; transition: opacity .18s ease, transform .18s ease; }
.lr-karte-kategorie.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   Kategoriewechsel-Animation: alte Sektionen tauchen ab, neue steigen
   gestaffelt ein (Titel → Eyebrow → Gerichte nacheinander).
   -------------------------------------------------------------------------- */
.lr-karte-kategorie.is-leaving { opacity: 0; transform: translateY(14px); }

.lr-karte-kategorie.is-entering .lr-karte-titel {
  animation: lr-kat-rein .45s cubic-bezier(.22, 1, .36, 1) both;
}
.lr-karte-kategorie.is-entering .lr-karte-eyebrow {
  animation: lr-kat-rein .45s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 60ms;
}
.lr-karte-kategorie.is-entering .lr-gericht {
  animation: lr-gericht-rein .5s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(min(var(--i, 0), 14) * 30ms + 90ms);
}
@keyframes lr-kat-rein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lr-gericht-rein {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Aktiver Chip: kurzer Pinsel-Pop */
.lr-chip.is-active::before { animation: lr-chip-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes lr-chip-pop {
  0%   { transform: scale(.92) rotate(-1.5deg); }
  60%  { transform: scale(1.05) rotate(.8deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lr-karte-kategorie { transition: none; }
  .lr-karte-kategorie.is-entering .lr-karte-titel,
  .lr-karte-kategorie.is-entering .lr-karte-eyebrow,
  .lr-karte-kategorie.is-entering .lr-gericht,
  .lr-chip.is-active::before { animation: none; }
}

.lr-karte-titel {
  margin: 0;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  color: #22592A;
}
.lr-karte-eyebrow {
  margin: 6px 0 0;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  color: #E30B13;
}

.lr-karte-gerichte {
  margin-top: 30px;
  column-gap: 80px;
}

.lr-gericht {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px 0 22px;
  border-bottom: 1px solid rgba(34, 89, 42, .18);
  break-inside: avoid;
}
.lr-gericht-text { flex: 1; min-width: 0; }
.lr-gericht-name {
  margin: 0;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: #22592A;
}
.lr-gericht-allergene {
  font-size: 12px;
  color: rgba(34, 89, 42, .5);
  margin-left: 4px;
  white-space: nowrap;
}
.lr-gericht-zutaten {
  margin: 5px 0 0;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(34, 89, 42, .85);
}
.lr-gericht-preis {
  margin: 0;
  flex-shrink: 0;
  width: auto;
  min-width: 70px;
  text-align: right;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 20px;
  color: #22592A;
  white-space: nowrap;
}

@media (min-width: 991px) {
  .lr-karte-filter { margin-bottom: 80px; }
  .lr-karte-kategorie { padding: 0; }
  .lr-karte-titel { font-size: 54px; }
  .lr-karte-gerichte { columns: 2; }
  .lr-gericht { gap: 40px; }
  .lr-gericht-preis { min-width: 110px; }
}