header{
    text-align: center;
}
.slogan {
  animation: fadeUp 1.2s ease-out forwards;
  opacity: 0;
}
:root{
    --rot: #c62828;
  --dunkelrot: #8b1e1e;
  --gold: #f2c36b;
  --stagger-duration: 0.6s;
  --stagger-gap: 0.08s;
  --accent: var(--rot);
  --accent-2: var(--dunkelrot);
  --accent-soft: rgba(198,40,40,0.06);
  --bg-cream: #fff6f5;
  --card-bg: #fffefc;
  --muted: #333333;
  --shadow: rgba(0,0,0,0.04);
}
body {
  background: linear-gradient(180deg, var(--bg-cream) 0%, #fff 60%);
  color: var(--muted);
  font-family: 'Noto Sans JP', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.stagger > * {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeUp var(--stagger-duration) ease-out forwards;
}
.stagger > *:nth-child(1){ animation-delay: calc(var(--stagger-gap) * 1); }
.stagger > *:nth-child(2){ animation-delay: calc(var(--stagger-gap) * 2); }
.stagger > *:nth-child(3){ animation-delay: calc(var(--stagger-gap) * 3); }
.stagger > *:nth-child(4){ animation-delay: calc(var(--stagger-gap) * 4); }
.stagger > *:nth-child(5){ animation-delay: calc(var(--stagger-gap) * 5); }
.stagger > *:nth-child(6){ animation-delay: calc(var(--stagger-gap) * 6); }
.stagger > *:nth-child(7){ animation-delay: calc(var(--stagger-gap) * 7); }
.stagger > *:nth-child(8){ animation-delay: calc(var(--stagger-gap) * 8); }
.stagger > *:nth-child(9){ animation-delay: calc(var(--stagger-gap) * 9); }
.stagger > *:nth-child(10){ animation-delay: calc(var(--stagger-gap) * 10); }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stagger > * { animation: none; opacity: 1; transform: none; }
  .slogan { animation: none; opacity: 1; }
}
.brand{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-radius:12px;
  background: rgba(198,40,40,0.03);
  box-shadow: 0 8px 22px rgba(0,0,0,0.04);
   background: radial-gradient(circle at 15% 20%, var(--accent-soft), transparent 30%), rgba(255,255,255,0.6);
  border: 1px solid rgba(198,40,40,0.04);
  box-shadow: 0 8px 22px var(--shadow);
}

.header-logo{
  width:180px;
  max-width:36%;
  height:auto;
  border-radius:12px;
  padding:6px;
  background:#fffefc;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  object-fit:cover;
  transition: transform .35s ease, box-shadow .35s ease;
}
.brand:hover .header-logo{
  transform: scale(1.03) rotate(-1.5deg);
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
}
.brand-text { text-align:left; }
.logo { margin:0; color:var(--accent, #c62828); font-weight:700; font-size:1.6rem; }
.slogan { margin:6px 0 0; color:#666; font-size:1rem; }

@media (max-width:700px) {
  .brand{ flex-direction:column; text-align:center; }
  .brand-text{ text-align:center; margin:0; }
  .header-logo{ width:140px; max-width:60%; }
  .logo{ font-size:1.3rem; }
}
#content > section,
#content > article,
#content > aside {
  background: #fffefc;
  border-radius: 12px;
  padding:14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  margin: 10px 0;
  border-left: 6px solid var(--accent-soft);
  text-align: center;
}
.main-grid {
  margin-top:10px;
  gap:18px;
}
@media (min-width:900px) {
  .main-grid {
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:18px;
  }
}
footer {
  text-align:center;
  color:#666;
  font-size:0.95rem;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,0.04);
}
nav ul { display:flex; gap:12px; justify-content:center; list-style:none; padding:0; margin:10px 0; }
nav li { list-style:none; }
nav a { color:#333; text-decoration:none; padding:6px 10px; border-radius:8px; transition:all .15s; }
nav a:hover { background: rgba(198,40,40,0.06); color:#c62828; }
nav a.active { background: rgba(198,40,40,0.12); color:#c62828; }
.stagger > * {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp var(--stagger-duration) ease-out forwards;
}
@keyframes fadeUp {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .stagger > * { animation: none; opacity: 1; transform: none; }
  .slogan { animation: none; opacity: 1; }
}
.slogan { text-decoration: none; }
.slogan a { text-decoration: none; color: inherit; }
header u,
header u * { text-decoration: none; }
.menu-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background .12s;
  margin-bottom: 8px;
}
.dish-name {
  flex: 0 0 40%; /* 40% der Breite */
  font-weight: 700;
  color: var(--rot, #c62828);
}
.dish-desc {
  flex: 1 1 auto;
  color: #555;
  font-size: 0.95rem;
  margin-top: 0;
  text-align: right;
}
@media (max-width:700px) {
  .menu-list li {
    flex-direction: column;
    align-items: flex-start;
  }
  .dish-name {
    flex: none;
  }
  .dish-desc {
    text-align: left;
    margin-top: 6px;
  }
}