/* =========================================================
   Mobile & Tablet — eigenes Layout, keine bloße Skalierung
   ========================================================= */

@media (max-width: 1100px) {
  /* Hero: drei Spalten werden zu zwei – Aktionen rücken unter den Schriftzug. */
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__cta { grid-column: 1; }
  .hero__meta { grid-row: 1 / span 2; grid-column: 2; }

  .kitchen__title { grid-column: 1 / 10; }
  .kitchen__note { grid-column: 1 / 9; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 4.5rem; }

  .nav-desktop { display: none; }
  .burger { display: block; }
  .header-actions .btn { display: none; }

  .sticky-cta { display: flex; }
  .site-footer { padding-bottom: 5.5rem; }

  /* Header: Ortszeile und mittige Navigation entfallen, Logo bleibt links. */
  .site-header { grid-template-columns: 1fr auto; }
  .brand__sub { display: none; }

  /* Hero: aus drei Spalten wird ein Stapel – Foto, Schriftzug, Fakten. */
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero__title { font-size: clamp(2.6rem, 14vw, 4.5rem); }
  .hero__photo .fig__frame { max-height: 40svh; aspect-ratio: 4 / 3; }
  .hero__cta .btn { width: 100%; }
  .rating { justify-content: flex-start; }

  .about__inner { grid-template-columns: 1fr; }
  .about__text { max-width: none; }

  .kitchen__head { grid-template-columns: 1fr; }
  .kitchen__title, .kitchen__note { grid-column: 1; }
  .shot:nth-child(even) { margin-top: 0; }

  .menu__tabs { top: 3.9rem; }
  .menu-tab { padding: 0.5rem 0.9rem; }
  .menu-item { padding: 1.1rem 0; gap: 1rem; }

  .social__handle { -webkit-text-stroke-width: 1.5px; }

  .visit__map { aspect-ratio: 4 / 3; }
  .visit__actions .btn { flex: 1 1 45%; justify-content: center; }

  .footer__wordmark { font-size: clamp(3rem, 22vw, 8rem); }
}

@media (max-width: 520px) {
  .menu-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .menu-item__price { font-size: var(--step-2); }
  .footer__bottom { flex-direction: column; }
  .band__claim { font-size: clamp(2.6rem, 15vw, 4rem); }
}

@media (min-width: 1800px) {
  :root { --gutter: clamp(4rem, 6vw, 7rem); }
}

@media print {
  .site-header, .sticky-cta, .mobile-menu, .progress, .grain { display: none !important; }
  .kitchen, .visit, .site-footer, .band { background: #fff; color: #000; }
}