/* =============================================================================
   Damas Ecke — Speisekarte (speisekarte.html)
   Baut auf style.css auf (Tokens, Header, Footer, Buttons, Eyebrow).
   Dunkle Seite wie in der Referenz: Nachtblau, warmer Goldschimmer, Karten auf Navy.
   ========================================================================== */

.page-menu{background:var(--night); color:var(--cream)}
.page-menu .gold{color:var(--gold-soft)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- Kopf ------------------------------------------------------------ */
.mhero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:calc(var(--header-h) + clamp(56px,9vw,110px)) 0 clamp(40px,5vw,64px);
  background:
    radial-gradient(60% 55% at 62% 40%,rgba(176,122,52,.22),transparent 70%),
    radial-gradient(40% 40% at 20% 80%,rgba(22,36,63,.9),transparent 70%),
    linear-gradient(180deg,var(--ink-deep) 0%,var(--night) 100%);
}
.mhero__mono{position:absolute; right:-6%; top:-10%; width:min(52vw,520px); height:auto; aspect-ratio:65/68; color:var(--cream); opacity:.045; z-index:-1; pointer-events:none}
.mhero__content{position:relative}
.mhero__title{font-size:clamp(2.6rem,6vw,4.6rem); margin-bottom:1rem}
.mhero__lead{max-width:56ch; color:var(--muted-light); font-size:1.05rem; margin-bottom:1.8rem}

/* Suche: Pille wie die Buttons der Referenz */
.msearch{
  position:relative; display:flex; align-items:center; max-width:520px;
  background:rgba(247,241,228,.06); border:1px solid rgba(199,169,120,.45); border-radius:var(--r-pill);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.msearch:focus-within{border-color:var(--gold-soft); background:rgba(247,241,228,.09)}
.msearch__icon{width:22px; height:22px; margin-left:20px; color:var(--gold-soft); flex:none}
.msearch input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:var(--cream);
  font:inherit; font-size:1.02rem; padding:16px 14px; height:56px;
}
.msearch input::placeholder{color:rgba(247,241,228,.5)}
.msearch input::-webkit-search-cancel-button{display:none}
.msearch__clear{
  flex:none; width:44px; height:44px; margin-right:6px; border:0; border-radius:50%; background:none;
  color:var(--cream); font-size:1.5rem; line-height:1; cursor:pointer;
}
.msearch__clear:hover{background:rgba(247,241,228,.1)}
.msearch__hint{min-height:1.4em; margin-top:12px; font-size:.86rem; color:var(--gold-soft)}

/* ---------- Kategorie-Chips (klebend unter dem Header) ----------------------- */
.chips{
  position:sticky; top:var(--header-h); z-index:60;
  background:rgba(10,19,32,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid rgba(var(--gold-rgb),.18); border-bottom:1px solid rgba(var(--gold-rgb),.18);
}
.page-menu .site-header.is-scrolled{height:var(--header-h)}
.chips .wrap{padding-inline:0}
.chips__list{
  display:flex; gap:8px; padding:12px var(--gutter); overflow-x:auto;
  /* kein scroll-snap: die Snap-Animation der Leiste würde in Chrome den Seiten-Scroll abbrechen */
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.chips__list::-webkit-scrollbar{display:none}
.chips__list li{flex:none}
.chips__list a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:var(--r-pill);
  border:1px solid rgba(199,169,120,.35); color:var(--cream); font-size:.86rem; font-weight:500; letter-spacing:.02em;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.chips__list a:hover{border-color:var(--gold-soft)}
.chips__list a.is-active{background:var(--gold-soft); border-color:var(--gold-soft); color:var(--ink-deep)}

/* ---------- Kategorie-Abschnitte -------------------------------------------- */
.mcat{padding:clamp(40px,5vw,64px) 0 clamp(16px,2vw,24px); scroll-margin-top:calc(var(--header-h) + 66px)}
.mcat[hidden]{display:none}
.mcat__head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid rgba(var(--gold-rgb),.25)}
.mcat__title{display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap; font-size:clamp(1.7rem,3vw,2.3rem); color:var(--cream)}
.mcat__ar{font-size:max(.62em,1.05rem); color:var(--gold-soft); letter-spacing:0}
.mcat__tag{margin-top:2px; font-size:.92rem; color:var(--muted-light)}
.mcat__count{flex:none; font-size:.9rem; color:var(--gold-soft)}

.mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}

/* ---------- Gericht-Karte ---------------------------------------------------- */
.mcard{
  position:relative; display:grid; grid-template-rows:auto 1fr auto; gap:0;
  background:linear-gradient(180deg,rgba(22,36,63,.85),rgba(15,26,46,.95)); border:1px solid rgba(var(--gold-rgb),.2); border-radius:var(--r-md);
  overflow:hidden; transition:transform var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
}
.mcard:hover{transform:translateY(-3px); border-color:rgba(var(--gold-rgb),.55)}
.mcard[hidden]{display:none}
.mcard__media{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(60% 60% at 50% 55%,rgba(176,122,52,.18),transparent 72%),var(--ink-deep);
}
.mcard__media picture{display:contents}   /* <picture> soll das Raster nicht beeinflussen */
.mcard__media img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease)}
/* Freigestellte Gerichte schweben auf dem Navy-Teller, wie in den Referenzkarten */
.mcard__media--cut img{width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.mcard:hover .mcard__media img{transform:scale(1.04)}
.mcard__media--none{background:radial-gradient(50% 50% at 50% 50%,rgba(176,122,52,.14),transparent 72%),var(--ink-deep)}
.mcard__media--none::after{content:''; position:absolute; inset:14px; border:1px solid rgba(var(--gold-rgb),.16); border-radius:6px}
.mcard__icon{width:26%; height:26%; color:var(--gold-soft); opacity:.55}
.mcard__media--none .mcard__mono{width:38%; height:auto; aspect-ratio:1; object-fit:contain; opacity:.9; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.mcard:hover .mcard__media--none .mcard__mono{transform:none}
.mcard__body{padding:18px 20px 6px}
.mcard__title{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:1.35rem; color:var(--cream); margin-bottom:.35rem}
.mcard__desc{font-size:.92rem; line-height:1.55; color:var(--muted-light)}
.mcard__price{
  padding:12px 20px 18px; font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:var(--gold-soft);
  display:flex; align-items:center; gap:12px;
}
.mcard__price::before{content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(199,169,120,.35),transparent); order:-1}

/* Badges */
.badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; padding:5px 9px; border-radius:var(--r-pill);
  font-family:var(--font-sans); font-size:.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; line-height:1;
}
.badge--v{border:1px solid rgba(139,168,120,.7); color:#A9C99A}
.badge--neu{background:var(--gold-soft); color:var(--ink-deep)}
.badge--tipp{border:1px solid rgba(199,169,120,.7); color:var(--gold-soft)}

/* Leer-Zustand der Suche */
.mempty{padding:clamp(48px,8vw,96px) 0; text-align:center; color:var(--muted-light)}
.mempty__title{font-family:var(--font-display); font-size:1.8rem; color:var(--cream); margin-bottom:.4rem}

/* ---------- Abschluss --------------------------------------------------------- */
.mfoot{padding:clamp(56px,8vw,96px) 0 clamp(64px,9vw,120px); margin-top:clamp(24px,4vw,48px); border-top:1px solid rgba(var(--gold-rgb),.18)}
.mfoot__grid{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start}
.mfoot__list{display:flex; flex-wrap:wrap; gap:14px 28px; margin-bottom:18px}
.mfoot__list li{display:flex; align-items:center; gap:10px; font-size:.95rem}
.mfoot__note{max-width:52ch; font-size:.92rem; color:var(--muted-light)}
.mfoot__cta{background:var(--ink); border:1px solid rgba(var(--gold-rgb),.3); border-radius:var(--r-md); padding:clamp(24px,4vw,40px)}
.mfoot__title{font-size:2rem; color:var(--cream); margin-bottom:.4rem}
.mfoot__cta p{color:var(--muted-light); margin-bottom:1.4rem}

/* ---------- Sprachumschalter im Kopf der Karte (Deutsch ⇄ Arabisch) ------------------------------- */
.mlang{display:inline-flex; align-items:center; gap:.5em; margin-bottom:1.4rem; padding:6px 16px; border:1px solid rgba(199,169,120,.45); border-radius:var(--r-pill); font-size:.9rem; color:var(--cream); transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.mlang:hover{background:rgba(247,241,228,.08); border-color:var(--gold-soft)}

/* ---------- Breakpoints ------------------------------------------------------ */
@media (max-width:1100px){
  .mgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .mhero{padding-top:calc(var(--header-h) + 40px)}
  .mhero__lead{font-size:.98rem}
  .msearch input{height:52px}
  .mcat__head{align-items:flex-start; flex-direction:column; gap:4px}
  /* Kompakte Zeilenkarte: Bild links, Text rechts, Preis unter dem Titel */
  .mgrid{grid-template-columns:1fr; gap:10px}
  .mcard{grid-template-columns:104px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:start; padding:12px}
  .mcard:hover{transform:none}
  .mcard__media{grid-row:1/3; width:104px; aspect-ratio:1; border-radius:8px}
  .mcard__media--cut img{width:90%; height:90%}
  .mcard__icon{width:40%; height:40%}
  .mcard__media--none .mcard__mono{width:52%}
  .mcard__body{padding:2px 0 0; grid-column:2}
  .mcard__title{font-size:1.18rem; margin-bottom:.2rem}
  .mcard__desc{font-size:.86rem; line-height:1.45}
  .mcard__price{grid-column:2; padding:8px 0 0; font-size:1.15rem}
  .mcard__price::before{display:none}
  .mfoot__grid{grid-template-columns:1fr; gap:32px}
  .mfoot__cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mcard,.mcard__media img{transition:none}
}