/* Speiseplan: ruhige, gut lesbare Menüführung; nach style.css einbinden. */

/* Helles Papier, zurückhaltende Linien und eine sparsame Kräuternote. */
:root {
  --menu-paper: #fbfaf7;
  --menu-rule: #e5e1da;
  --menu-copy: #4d5052;
  --menu-herb: #54734b;
  --menu-wine: #94191e;
}

.menu {
  background: var(--menu-paper);
  color: var(--menu-copy);
  padding-block: clamp(48px, 6vw, 82px) !important;
}

.menu-grid {
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.8fr) !important;
  gap: clamp(32px, 5vw, 68px) !important;
}

.menu-side,
.menu .panel {
  min-width: 0;
}

.menu .panel:focus-visible {
  outline: 2px solid var(--menu-wine);
  outline-offset: 4px;
}

.side-head h2 {
  margin: 0;
  color: #35383a;
  font-size: 32px;
}

.arrows {
  gap: 8px;
}

.arrows button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--menu-rule);
  border-radius: 50%;
  color: var(--menu-copy);
  font-size: 26px;
}

.arrows button:hover,
.arrows button:focus-visible {
  border-color: #d8b6b8;
  color: var(--menu-wine);
}

.range,
#plan-pdf,
.tax {
  color: #686b6c;
}

.menu-herb {
  width: 78px;
  height: auto;
  margin-top: 32px;
  opacity: 0.78;
}

/* The active weekday reads as a clear, quiet selection. */
.days {
  gap: 8px;
  padding: 0 0 8px;
  border-color: var(--menu-rule);
}

.day {
  min-height: 54px;
  border-radius: 4px;
  color: #626668;
}

.day:hover {
  background: #f5efec;
}

.day[aria-selected="true"] {
  background: #f6ece9;
  color: var(--menu-wine);
  border-color: #d8b6b8;
  box-shadow: inset 0 -3px 0 var(--menu-wine);
  font-weight: 650;
}

.day[aria-selected="true"] .badge {
  color: var(--menu-wine);
}

.day:focus-visible,
.arrows button:focus-visible,
#plan-pdf:focus-visible,
.legend summary:focus-visible {
  outline: 2px solid var(--menu-wine);
  outline-offset: 3px;
}

/* Title, leaf and codes flow together; the price owns the right column. */
.dish {
  display: block !important;
  min-height: 48px;
  padding: 10px 0 !important;
  border-color: var(--menu-rule);
}

.dish-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}

.dish-copy {
  grid-column: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.dish-line .dish-title {
  display: inline;
  margin: 0;
  color: #343739;
  font-size: inherit !important;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.dish-line .price {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 0;
  color: #3d4142;
  font-size: 18px !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dish-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px 12px !important;
  width: auto;
  min-height: 0;
  margin: 4px 0 0 !important;
  color: #777a7a;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.dish-meta .tag {
  line-height: inherit;
}

.dish-copy .diet-indicator {
  color: var(--menu-herb);
}

/* Keep the parenthetical group together; each code retains its own tooltip. */
.dish-copy .allergens {
  display: inline;
  color: var(--menu-wine);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
}

.dish-meta .dish-description {
  order: 3;
  flex-basis: 100%;
}

.menu-hint {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.menu-hint-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0 3px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.menu-hint-trigger:hover {
  background: #f0e6e1;
}

.menu-hint-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.dish-copy .allergens abbr,
.dish-copy .allergens abbr:hover,
.dish-copy .allergens abbr:focus {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.diet-indicator svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.diet-indicator .leaf-vein {
  fill: none;
  stroke: var(--menu-paper);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: var(--tip-left, 0);
  z-index: 20;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 13px 15px;
  border-radius: 12px;
  background: #414348;
  box-shadow: 0 6px 18px #3032361a;
  color: #fff;
  font: 400 13px/1.5 var(--sans);
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  visibility: hidden;
  pointer-events: none;
}

.menu-hint.is-tip-open > .menu-tooltip {
  display: flex;
  align-items: center;
  gap: 12px;
  visibility: visible;
  pointer-events: auto;
}

.menu-tooltip__mark {width:25px;height:32px;flex:none;object-fit:contain}
.menu-tooltip__text {min-width:0;flex:1;text-wrap:balance;hyphens:none}
.menu-hint-trigger abbr{cursor:inherit!important}
.menu-tooltip::after {content:"";position:absolute;left:var(--tip-arrow,24px);bottom:-5px;width:10px;height:10px;background:#414348;transform:translateX(-50%) rotate(45deg);border-radius:0 0 2px 0}
.menu-tooltip::before {content:"";position:absolute;inset:100% 0 auto;height:12px}
.menu-hint.is-tip-below>.menu-tooltip {top:calc(100% + 10px);bottom:auto}
.menu-hint.is-tip-below>.menu-tooltip::after {top:-5px;bottom:auto}
.menu-hint.is-tip-below>.menu-tooltip::before {inset:auto 0 100%}

.dish-meta:empty {
  display: none !important;
}

/* Standing favorites append directly to the day's dishes, without a second section title. */
.panel .sub-head {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: none !important;
}

.panel .sub-head + .dish-list .dish:first-child {
  border-top: 1px solid var(--menu-rule);
}

.standing {
  border-color: var(--menu-rule);
}

.standing h3 {
  color: #343739;
}

.standing li {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 13px 0;
  border-color: var(--menu-rule);
  color: #343739;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.35;
}

.standing li .price {
  color: #3d4142;
  font-size: 17px;
}

.standing .allergens {
  grid-column: 1 / -1;
  color: #777a7a;
  font-family: var(--sans);
  font-size: 12.5px;
}

/* Order action stays once per day; dish rows remain informational. */
.dish-order {
  display: none !important;
}

.plan-cta {
  margin: 22px 0 0;
}

.plan-cta .more {
  color: #45494a;
  border-color: #9da39b;
}

.plan-cta .more:hover {
  background: #45494a;
  border-color: #45494a;
  color: #fff;
}

.legend {
  border-top: 1px solid var(--menu-rule);
  padding-top: 18px;
}

.legend summary {
  color: #45494a;
}

.tax {
  font-size: 12px;
}

@media (max-width: 980px) {
  .menu-grid {
    display: flex;
    flex-direction: column;
    gap: 28px !important;
  }

  .menu-side {
    display: block;
    position: static;
    width: 100%;
  }

  .menu-grid > div:last-child {
    width: 100%;
    margin-top: 0;
  }

  #plan-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 18px;
    margin-top: 14px;
  }

  #plan-meta[hidden] {
    display: none;
  }

  #plan-meta .range {
    margin: 0;
  }

  .menu-herb {
    display: none;
  }

  .standing {
    margin-top: 30px;
  }
}

@media (max-width: 760px) {
  .menu {
    padding-block: 38px 52px !important;
  }

  .menu-grid {
    gap: 23px !important;
  }

  .side-head h2 {
    font-size: 28px;
  }

  .arrows button {
    width: 40px;
    height: 40px;
  }

  .days {
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .day {
    flex: 1 0 54px;
    min-height: 66px;
    padding: 9px 4px;
  }

  .day .day-name {
    font-size: 12px;
  }

  .day .day-date {
    font-size: 10px;
  }

  .day .badge {
    font-size: 8px;
    letter-spacing: 0;
  }

  .dish-line {
    gap: 8px;
  }

  .dish-copy {
    font-size: 17px;
  }

  /* Mobile: codes below the dish; keep the price in the existing top column. */
  .dish-copy .allergens {
    display: block;
    margin-top: 3px;
    white-space: normal;
  }

  .dish-line .price {
    font-size: 17px !important;
  }

  .dish-meta {
    gap: 2px 9px !important;
    margin-top: 3px !important;
  }

  .standing {
    margin-top: 26px;
    padding-top: 20px;
  }

  .standing li {
    font-size: 17px;
  }
}

@media (max-width: 420px) {
  .menu .wrap {
    width: min(100% - 32px, var(--wrap, 1180px));
  }

  .days {
    gap: 3px;
  }

  .day {
    flex-basis: 49px;
    padding-inline: 2px;
  }

  .day .day-name {
    font-size: 11px;
  }

  .day .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* A real closed day gets a hanging sign. One swing, then a quiet reading state. */
.panel .empty.closed-state{display:flex;justify-content:center;align-items:center;min-height:190px;padding:48px 20px 26px;background:none}
.closed-sign{position:relative;display:flex;align-items:center;justify-content:center;gap:15px;width:226px;max-width:100%;padding:21px 18px;background:#dededb;border:2px solid #555650;border-radius:9px;color:#33363a;transform-origin:50% -30px}
.closed-sign::before{content:"";position:absolute;width:48px;height:48px;left:calc(50% - 24px);top:-27px;border-top:2px solid #555650;border-left:2px solid #555650;transform:rotate(45deg);z-index:-1}
.closed-sign b{font:500 26px/1.2 var(--serif);letter-spacing:0}
.closed-sign__mark{display:block;width:27px;height:28px;flex:none}
@media(prefers-reduced-motion:no-preference){.closed-sign{animation:closed-sign-arrive 1350ms ease-out both}}
@keyframes closed-sign-arrive{0%{opacity:0;transform:rotate(-10deg) translateY(-5px)}25%{opacity:1;transform:rotate(6deg)}52%{transform:rotate(-3deg)}76%{transform:rotate(1deg)}100%{opacity:1;transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.closed-sign{animation:none}}

/* Replayed only on a fresh pointer entry; no continuous swinging. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){.closed-state:hover .closed-sign{animation:closed-sign-hover 1700ms ease-out both}}
@keyframes closed-sign-hover{0%,100%{transform:rotate(0)}18%{transform:rotate(8deg)}40%{transform:rotate(-5deg)}64%{transform:rotate(2.5deg)}84%{transform:rotate(-1deg)}}