/* ==========================================================================
   Metzgerei Effert – Layouts für größere Bildschirme
   560 px · 760 px · 960 px · 1100 px · 1580 px
   Wird erst ab 560 px Breite geladen (media-Attribut in den HTML-Dateien),
   deshalb gehören hier nur Regeln für größere Bildschirme hinein.
   ========================================================================== */

/* ---------- ab 560 px ---------- */
@media (min-width: 560px) {
  .header-cta { display: inline-flex; }

  .hero-info { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-light); }
  .hero-info > div { grid-template-columns: none; gap: .35rem; align-content: start; padding: 1rem 1rem 1rem 0; border-bottom: 0; }
  .hero-info > div + div { padding-left: 1rem; border-left: 1px solid var(--line-light); }

  .product-grid {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.2rem; overflow: visible; margin-inline: 0; padding: 0;
  }

  .catalog-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide, .extra { grid-column: 1 / -1; }
  .extra-catering { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .extra-kita { grid-template-columns: 2fr 1fr; }
  .buffet-body .cols-2 { columns: 2; column-gap: 1.6rem; }
  .buffet-body .cols-2 li { break-inside: avoid; }

  .menu-day { grid-template-columns: 7.6rem minmax(0, 1fr); gap: 1.3rem; align-items: baseline; padding: 1.2rem 0; }
  .menu-date { display: grid; gap: .15rem; justify-items: start; }
  .menu-today { margin-top: .3rem; }
}

/* ---------- ab 760 px ---------- */
@media (min-width: 760px) {
  :root { --header-h: 80px; }

  .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-grid > div { padding: 2.2rem 1.4rem; border-top: 0; }
  .facts-grid > div:first-child { padding-left: 0; }
  .facts-grid > div + div { border-left: 1px solid var(--line); }

  .section-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 3rem; }
  .section-head .section-intro { justify-self: end; }

  .counter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; }

  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .awards { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 3rem; }
  .medals { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
  .medals li:nth-child(2) { border-top: 0; }

  .catalog-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-foot { grid-template-columns: 1fr auto; align-items: center; }

  .mosaic { height: clamp(380px, 46vw, 600px); }
  .buffet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conditions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.4rem; }

  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }

  .menu-legend-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }

  .map-frame { height: clamp(380px, 40vw, 500px); }
  .map-overlay {
    position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 2; max-width: 300px;
    border: 1px solid var(--line-light); border-radius: var(--radius); box-shadow: var(--shadow-l);
    background: rgba(32, 25, 21, .96);
  }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 1.6rem; }
}

/* ---------- ab 960 px ---------- */
@media (min-width: 960px) {
  /* Hero: Text links auf dunklem Grund, Foto rechts */
  .hero {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    grid-template-areas: "panel media";
    min-height: max(640px, 100svh);
  }
  .hero-media { grid-area: media; height: auto; min-height: 100%; }
  .hero-media::after {
    background:
      linear-gradient(90deg, var(--coal) 0%, rgba(23, 18, 16, 0) 22%),
      linear-gradient(180deg, rgba(23, 18, 16, .45) 0%, rgba(23, 18, 16, 0) 22%),
      linear-gradient(0deg, rgba(23, 18, 16, .55) 0%, rgba(23, 18, 16, 0) 30%);
  }
  .hero-img { position: absolute; inset: 0; object-position: 42% 30%; }
  .hero-caption { display: block; top: auto; bottom: 2.2rem; }
  .hero-panel {
    grid-area: panel;
    grid-template-rows: 1fr auto;
    padding: calc(var(--header-h) + 3rem) clamp(2rem, 4vw, 4rem) 2.4rem max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  }
  .hero-content { gap: 1.7rem; }
  .hero-seal { right: auto; left: 47%; top: auto; bottom: 11%; width: 148px; height: 148px; transform: translateX(-50%); }
  @media (prefers-reduced-motion: no-preference) {
    .hero-seal { animation-name: sealInCenter; }
  }

  .welcome-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .welcome-media { margin: 1.4rem 2rem 3rem 0; }
  .welcome-inset { right: -2rem; bottom: -3rem; width: 46%; }
  .badge-round { width: 124px; height: 124px; left: -1.6rem; top: -2rem; }
  .badge-big { font-size: 2.3rem; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.8rem; }

  .lunch-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
  .lunch-photo { aspect-ratio: 4 / 3.5; }

  /* Speiseplan: links Woche, Preise und PDF – rechts die fünf Tage */
  .menu {
    grid-template-columns: minmax(0, .74fr) minmax(0, 1.5fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head main" "info main" "info legend";
    column-gap: clamp(2.4rem, 5vw, 5rem);
  }
  .menu-main { margin-top: 0; }
  .menu-info { margin-top: 2.2rem; align-self: end; }
  .menu-legend { margin-top: 1.4rem; }
  .menu-day.is-today::before { left: -1.1rem; }

  .catering-top { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }

  .kitas-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }

  .contact-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

  .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; padding-left: 0; padding-top: 2.2rem; }
  .timeline::before { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; }
  .timeline li::before { left: 0; top: calc(-2.2rem - 0px); }

  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; grid-template-columns: none; align-items: start; }
  .site-footer { padding-bottom: 0; }

  .action-bar { display: none; }
}

@keyframes sealInCenter {
  from { opacity: 0; transform: translateX(-50%) scale(.6) rotate(-40deg); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* ---------- ab 1100 px ---------- */
@media (min-width: 1100px) {
  .main-nav { display: block; }
  .menu-toggle { display: none; }

  .counter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; }
  .counter-item { border-bottom: 0; padding-top: 2rem; padding-right: .5rem; }

  /* Leistungen: große Zeilen, Bildvorschau folgt der Maus */
  .service-row {
    grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto;
    grid-template-areas: "num title text arrow";
    column-gap: 2rem; padding: 2.1rem 0;
  }
  .service-num { display: block; grid-area: num; font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--gold-text); }
  .service-row .round-arrow { width: 52px; height: 52px; }
  .service-row:hover .service-title { transform: translateX(10px); }
  .services.has-peek .service-thumb { display: none; }
}

/* ---------- ab 1280 px ---------- */
@media (min-width: 1580px) {
  .header-phone { display: inline-flex; }
}