/* ============================================================
   Digitale Speisekarte – nur auf /speisekarte/ geladen.
   Hero + Chip-Leiste kommen aus style.css (WSH-SUBHERO).
   Seite wird von _tools/gen_speisekarte.py gebaut und von
   _tools/verify_menu.py gegen die PDF geprueft.
   ============================================================ */
.dmenu{max-width:1120px;margin:0 auto;padding:clamp(26px,3.4vw,46px) 18px clamp(30px,4vw,56px);
  --gold-hi:#F6D7A6;--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}
.dmenu__hinweis{margin:0 auto clamp(18px,2.4vw,30px);text-align:center;font-size:14px;color:var(--c-muted)}
.dmenu__hinweis a{color:var(--c-gold);text-decoration:underline;text-underline-offset:3px}

/* ---- Abschnitte ---- */
.m-sec{margin-top:clamp(34px,4vw,56px)}
.m-sec:first-of-type{margin-top:0}
.m-cat{display:flex;align-items:center;gap:14px;margin-bottom:clamp(8px,1vw,14px);
  font:700 clamp(14px,1.3vw,17px)/1.2 var(--f-cond);letter-spacing:.24em;text-transform:uppercase;color:var(--c-gold)}
.m-cat::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--c-gold-dim),transparent);transform-origin:left}
.m-gruppe > .m-cat{font:400 clamp(26px,2.8vw,38px)/1.15 var(--f-slab);letter-spacing:0;text-transform:none;color:var(--c-text)}
.m-sub{margin:clamp(20px,2.4vw,30px) 0 4px;font:600 13px/1.2 var(--f-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold-dim)}

/* ---- Zeilen ---- */
.m-row{padding:13px 0;border-bottom:1px solid rgba(217,160,91,.09)}
.m-top{display:flex;align-items:baseline;gap:8px}
.m-nm{flex:0 1 auto;font:600 15px/1.35 var(--f-body);color:var(--c-text);text-transform:uppercase;letter-spacing:.01em}
.m-star{flex:none;color:var(--c-gold);font-weight:700;margin-left:-4px}
.m-al{flex:none;font:600 11.5px/1 var(--f-cond);letter-spacing:.1em;color:var(--c-gold-dim);cursor:help}
/* Die gepunktete Linie steht auf JEDER Zeile – sie fuehrt das Auge zum Preis.
   ::before = die Punkte, ::after = der Goldfunke beim Einblenden */
.m-lead{position:relative;flex:1 1 18px;min-width:18px;height:1px}
.m-lead::before{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px dotted rgba(217,160,91,.42);transform-origin:left}
.m-lead::after{content:"";position:absolute;bottom:-2px;left:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:var(--gold-hi);opacity:0;box-shadow:0 0 6px 2px rgba(217,160,91,.9),0 0 18px 5px rgba(217,160,91,.35)}
.m-pr{flex:none;white-space:nowrap;font:700 15px/1.35 var(--f-cond);color:var(--c-gold);font-variant-numeric:tabular-nums}
.m-pr small{font:600 12.5px/1 var(--f-cond);letter-spacing:.06em;color:var(--c-muted);margin-right:4px}
.m-pr--ab{color:var(--c-gold-dim)}
.m-de{margin-top:4px;font-size:14px;line-height:1.5;color:var(--c-muted);max-width:60ch}
.m-lad{display:grid;gap:5px;margin-top:9px}
.m-lad div{display:flex;align-items:baseline;gap:8px}
.m-lad div:nth-child(2){--k:1} .m-lad div:nth-child(3){--k:2} .m-lad div:nth-child(4){--k:3}
.m-lad div:nth-child(5){--k:4} .m-lad div:nth-child(6){--k:5}
.m-lad span{flex:none;font:600 13.5px/1.3 var(--f-cond);letter-spacing:.08em;color:var(--c-muted)}
.m-lad i{flex:1;height:0;border-bottom:1px dotted rgba(217,160,91,.36);transform-origin:left}
.m-lad b{flex:none;font:700 14px/1.3 var(--f-cond);color:var(--c-gold);font-variant-numeric:tabular-nums}
.m-row--opt .m-nm{text-transform:none;font-weight:500;font-style:italic;color:var(--c-soft)}

/* ---- Kaesten: Hinweise, Spezial-Steaks, Smash, Herkunft ---- */
.m-note{margin-top:12px;font-size:14px;font-style:italic;color:var(--c-muted)}
.m-box{margin-top:clamp(16px,2vw,24px);padding:clamp(14px,1.8vw,22px) clamp(16px,2vw,26px);border:1px solid var(--c-line);
  border-radius:12px;background:linear-gradient(160deg,rgba(36,17,16,.75),rgba(27,12,11,.75))}
.m-box__t{font:700 13px/1.2 var(--f-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold)}
.m-box__u{margin-top:3px;font-size:14px;color:var(--c-muted)}
.m-box .m-row{padding:9px 0}
.m-box .m-row:last-child{border-bottom:0}
.m-herkunft{margin-top:clamp(18px,2.2vw,28px);text-align:center;padding:clamp(18px,2.4vw,30px) 16px;
  border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.m-herkunft b{display:block;font:400 clamp(20px,2.2vw,28px)/1.2 var(--f-slab);color:var(--c-text)}
.m-herkunft span{display:block;margin-top:6px;font-size:15px;color:var(--c-gold)}

/* ---- Allergen-Legende ---- */
.m-leg{margin-top:clamp(40px,5vw,64px);padding:clamp(16px,2vw,26px);border:1px solid var(--c-line);border-radius:12px;background:rgba(0,0,0,.22)}
.m-leg h2{margin-bottom:10px;font:700 14px/1.2 var(--f-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold)}
.m-leg__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 16px}
.m-leg__g p{font-size:14px;color:var(--c-muted)}
.m-leg__g b{display:inline-block;min-width:1.4em;font:700 14px var(--f-cond);color:var(--c-gold)}
.m-leg__w{margin-top:12px;font-size:13.5px;font-style:italic;color:var(--c-muted)}
.dmenu__pdf{margin-top:26px;text-align:center}

@media (min-width:640px){ .m-leg__g{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px){
  .m-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:60px}
  .m-nm{font-size:16.5px}
  .m-pr{font-size:16.5px}
  .m-de{font-size:14.5px}
  .m-drinks{columns:2;column-gap:60px}
  .m-drinks .m-sec{break-inside:avoid;margin-top:0;padding-top:clamp(26px,3vw,40px)}
  .m-drinks .m-list{display:block}
  .m-leg__g{grid-template-columns:repeat(5,minmax(0,1fr))}
  .m-row{position:relative}
}

/* ===================== Bewegung =====================
   .anim steht im HTML: Startzustand verdeckt. speisekarte.js setzt .js-ok
   und blendet Zeilen beim Scrollen ein (.in). Laeuft das Skript nicht,
   macht die Notfall-Animation nach 3,5 s alles sichtbar. */
@media (prefers-reduced-motion: no-preference){
  .dmenu.anim .m-cat,.dmenu.anim .m-row,.dmenu.anim .m-note,.dmenu.anim .m-box,.dmenu.anim .m-herkunft,
  .dmenu.anim .m-pr,.dmenu.anim .m-lad div,.dmenu.anim .m-lad b{opacity:0}
  .dmenu.anim .m-lead::before,.dmenu.anim .m-lad i,.dmenu.anim .m-cat::after{transform:scaleX(0)}
  .dmenu.anim:not(.js-ok) *,.dmenu.anim:not(.js-ok) .m-lead::before,
  .dmenu.anim:not(.js-ok) .m-cat::after{animation:dmNot 0s 3.5s forwards !important}

  .dmenu.anim .m-sec.in > .m-cat{animation:dmSperr 1.15s var(--ease-out) both}
  .dmenu.anim .m-sec.in > .m-cat::after{animation:dmZieh 1.25s var(--ease-io) .3s both}
  .dmenu.anim .m-row.in,.dmenu.anim .m-note.in,.dmenu.anim .m-box.in,.dmenu.anim .m-herkunft.in{animation:dmAuf 1s var(--ease-out) var(--d,0ms) both}
  .dmenu.anim .m-row.in .m-lead::before{animation:dmZieh .9s var(--ease-io) calc(var(--d,0ms) + .22s) both}
  .dmenu.anim .m-row.in .m-lead::after{animation:dmFunke .9s var(--ease-io) calc(var(--d,0ms) + .22s) both}
  .dmenu.anim .m-row.in .m-pr{animation:dmPreis .75s var(--ease-out) calc(var(--d,0ms) + .95s) both,
                                        dmGlimm 1.6s ease-out calc(var(--d,0ms) + .95s) both}
  .dmenu.anim .m-row.in .m-lad div{animation:dmLinie .8s var(--ease-out) calc(var(--d,0ms) + .4s + var(--k,0) * 110ms) both}
  .dmenu.anim .m-row.in .m-lad i{animation:dmZieh .75s var(--ease-io) calc(var(--d,0ms) + .55s + var(--k,0) * 110ms) both}
  .dmenu.anim .m-row.in .m-lad b{animation:dmPreis .6s var(--ease-out) calc(var(--d,0ms) + 1.1s + var(--k,0) * 110ms) both,
                                          dmGlimm 1.4s ease-out calc(var(--d,0ms) + 1.1s + var(--k,0) * 110ms) both}
  /* Beim Scrollen: nur sanftes Aufblenden wie auf der restlichen Website –
     Linie und Preis stehen sofort, kein Funke. (.sanft setzt speisekarte.js) */
  .dmenu.anim .m-sec.in.sanft > .m-cat{animation:dmSanft .75s cubic-bezier(.2,.7,.3,1) both}
  .dmenu.anim .m-sec.in.sanft > .m-cat::after{animation:none;transform:none}
  .dmenu.anim .in.sanft:not(.m-sec){animation:dmSanft .75s cubic-bezier(.2,.7,.3,1) var(--d,0ms) both}
  .dmenu.anim .m-row.in.sanft .m-pr,.dmenu.anim .m-row.in.sanft .m-lad div,
  .dmenu.anim .m-row.in.sanft .m-lad b{animation:none;opacity:1;transform:none}
  .dmenu.anim .m-row.in.sanft .m-lead::before,.dmenu.anim .m-row.in.sanft .m-lad i{animation:none;transform:none}
  .dmenu.anim .m-row.in.sanft .m-lead::after{animation:none;opacity:0}
  /* Desktop: Goldkante beim Ueberfahren */
  @media (min-width:900px){
    .m-row::before{content:"";position:absolute;left:-14px;top:14%;bottom:14%;width:2px;border-radius:2px;
      background:linear-gradient(var(--c-gold-dim),var(--c-gold));transform:scaleY(0);transform-origin:top;transition:transform .32s ease}
    .m-row:hover::before{transform:scaleY(1)}
    .m-row .m-pr{transition:color .25s ease}
    .m-row:hover .m-pr{color:#F3CE95}
  }
}
@keyframes dmSanft{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes dmNot{to{opacity:1;transform:none}}
@keyframes dmSperr{from{opacity:0;letter-spacing:.7em}to{opacity:1;letter-spacing:.24em}}
@keyframes dmZieh{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dmAuf{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes dmLinie{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes dmFunke{0%{left:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes dmPreis{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes dmGlimm{0%{text-shadow:0 0 0 rgba(246,215,166,0)}30%{text-shadow:0 0 14px rgba(246,215,166,.95)}
                   100%{text-shadow:0 0 0 rgba(246,215,166,0)}}