:root{
  --bg:#f5f7fb;
  --card:rgba(255,255,255,.82);
  --text:#172033;
  --muted:#667085;
  --accent:#b42318;
  --accent-soft:#fff1ef;
  --line:rgba(23,32,51,.09);
  --shadow:0 18px 50px rgba(23,32,51,.10);
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0
}
body{
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%,rgba(180,35,24,.08),transparent 28%),
    linear-gradient(180deg,#fff 0%,var(--bg) 100%);
  line-height:1.5;
}
.menu-page{
  max-width:1180px;
  margin:auto;
  padding:30px 20px 70px}
.menu-hero{
  min-height:310px;
  border-radius:30px;
  padding:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#241b1a,#5a211b);
  color:#fff;
  box-shadow:var(--shadow);
}
.menu-hero:after{
  content:"";
  position:absolute;
  width:360px;height:360px;
  border-radius:50%;
  right:-90px;top:-120px;
  background:rgba(255,255,255,.08);
}
.hero-copy{
  position:relative;
  z-index:1;
  max-width:650px}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  opacity:.78;
  margin-bottom:12px;
}
.menu-hero h1{
  font-family:Georgia,serif;
  font-size:clamp(2.7rem,6vw,5.2rem);
  line-height:.95;
  margin-bottom:16px;
}
.menu-hero p{font-size:1.05rem;
  opacity:.88;
  max-width:560px}
.hero-badge{
  position:relative;z-index:1;
  width:150px;
  height:150px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;
  text-align:center;
  font-weight:700;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.hero-badge span{
  display:block;
  font-size:.75rem;
  font-weight:400;
  opacity:.75
}
.category{
  margin-top:58px;
  grid-column: 1 / -1;

}
.category-head{margin-bottom:22px}
.category-head .small{
  color:var(--accent);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
}
.category h2{
  font-family:Georgia,serif;
  font-size:2.35rem;
  margin-top:5px;
}
.category-head p{
  color:var(--muted);
  margin-top:5px
}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.menu-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  box-shadow:0 10px 30px rgba(23,32,51,.055);
  backdrop-filter:blur(12px);
  transition:transform .2s ease,box-shadow .2s ease;
}
.menu-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.item-top{display:flex;align-items:flex-start;gap:14px}
.item-number{
  min-width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:800;
}
.menu-card h3{
  font-family:Georgia,serif;
  font-size:1.5rem;
  line-height:1.05;
}
.menu-card p{color:var(--muted);margin-top:8px}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}
.tag{
  font-size:.72rem;
  padding:5px 9px;
  border-radius:999px;
  background:#f1f3f6;
  color:#596273;
}
.footer-note{
  text-align:center;color:var(--muted);
  margin-top:60px;font-size:.9rem;
}
@media(max-width:760px){
  .menu-page{padding:15px 12px 45px}
  .menu-hero{padding:32px 25px;min-height:330px;border-radius:24px}
  .hero-badge{display:none}
  .menu-grid{grid-template-columns:1fr}
  .category{margin-top:42px}
  .category h2{font-size:2rem}
}

.menu-photo{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:18px;
  display:block;
}

/* ========================================
   SÜSSSPEISEN – 3 KARTEN IN EINER REIHE
   ======================================== */

.dessert-category{
  display:block;
}

.dessert-category .category-head{
  width:100%;
}

.dessert-category 
.menu-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  width:100%;
}

@media (max-width:760px){
  .dessert-category .menu-grid{
    grid-template-columns:1fr;
  }
}





.menu-card.photo-card{padding:14px 14px 22px}
.menu-card.photo-card .item-top{padding:0 10px}
@media(max-width:760px){.menu-photo{height:210px}}

@media (max-width: 760px) {

    .menu-toggle {
      position: fixed;
        right: 40px;
        z-index: 9999;
    }

}

/* ========================================
   ENTDECKEN – KLICKANIMATION
   ======================================== */

.menu-card{
    position:relative;
    overflow:hidden;
}

.menu-card::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    background:rgba(180,35,24,.12);
    left:50%;
    top:65%;
    transform:translate(-50%,-50%) scale(0);
    pointer-events:none;
}

.menu-card.discover-active::after{
    animation:discoverWave .7s ease-out;
}

.menu-card.discover-active{
    animation:discoverFade .55s ease;
}

@keyframes discoverWave{
    0%{
        transform:translate(-50%,-50%) scale(0);
        opacity:.7;
    }

    100%{
        transform:translate(-50%,-50%) scale(25);
        opacity:0;
    }
}

@keyframes discoverFade{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }

    100%{
        transform:translateY(0);
    }
}