/* Speisekarte (QR-Menü) – eigenständig, getrennt von style.css */
@font-face{font-family:"DINWeb";src:url("../fonts/DINWeb.woff") format("woff");font-style:normal;font-weight:normal;font-display:swap}
@font-face{font-family:"DINWeb-b";src:url("../fonts/DINWeb-Bold.woff") format("woff");font-style:normal;font-weight:bold;font-display:swap}

:root{
  --chi-brown:#5d5247;
  --chi-darkgreen: #003D48;
  --chi-green:#aaca39;
  --chi-line:var(--chi-darkgreen);
}
*{box-sizing:border-box}
/* visuell versteckt, aber fuer Screenreader lesbar */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
body.menu{
  margin:0;
  font-family:"DINWeb","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--chi-brown);
  background:#fff;
  line-height:1.4;
  font-size:1.15rem;
}
.menu__container {
    padding: 1.5rem;
}
.menu__header{
  position:relative;
  max-width:480px;
  margin:0 auto;
  min-height:120px;
  background:var(--chi-brown);
}
.menu__header-photo{
  display:block;
  width:100%;
  height:auto;
}
.menu__logo{
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 21%;
    max-width: 100px;
}
.menu__body{
  max-width:480px;
  margin:0 auto;
  padding:0 0 3rem;
}
.menu__category{margin-bottom:2rem}
.menu__category-title{
  font-family:"DINWeb-b","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:uppercase;
  text-align:center;
  color:var(--chi-brown);
  font-size:1.65rem;
  letter-spacing:.02em;
  margin:1.25rem 0 0;
}
.menu__category-title + .menu__item {
    padding-top: 0;
}
/* .menu__category:last-of-type > .menu__item:last-child {
    border-bottom: none;
} */
.menu__item{
  color: var(--chi-darkgreen);
  padding:.75rem 0.1rem 0;   /* Linie optisch mittig (leichter DINWeb-Metrik-Ausgleich) */
  border-bottom:1px dotted var(--chi-line);
}
.menu__item-name{
  font-family:"DINWeb-b","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.15rem;
  margin:0 0 .15rem;
}
.menu__item-body{
  display:flex;
  align-items:flex-end;   /* Preis unten, auf Hoehe der letzten Beschreibungszeile */
  gap:1rem;
}
.menu__item-desc{
  flex:1;                 /* Beschreibung nimmt den Platz, Preis rechts */
  margin: 0;
  font-size:1.1rem;
}
.menu__item-price{
  margin-left:auto;       /* immer rechts, auch ohne Beschreibung */
  white-space:nowrap;
}
.menu__tag{
  font-style:italic;
  color:var(--chi-green);
  /* margin-left:.35rem; */
  white-space:nowrap;
}
a.menu__tag{text-decoration:underline}

.close__link {
    display: inline-block;
    right: 10px;
    top: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, .6);
    border-radius: 50%;
    position: absolute;
}

.close__link:hover {
    background: rgba(255, 255, 255, .8);
}

.close__link--icon {
    width: 20px;
    height: 20px;
    display: block;
    animation: wiggle 3s infinite alternate;
}

.close__link--icon:hover {
    animation: none;
}

@keyframes animate-icon {
    0% {
        margin-top: 20px;
        margin-right: 20px
    }

    0% {
        margin-top: 10px;
        margin-right: 10px
    }
}

@keyframes wiggle {
    0% {
        transform: rotate(-2deg)
    }

    5% {
        transform: rotate(2deg)
    }

    10% {
        transform: rotate(-2deg)
    }

    15% {
        transform: rotate(2deg)
    }

    20% {
        transform: rotate(0)
    }
}