/* ====================================================
   Speisekarte – Bildkarten-Layout
   ==================================================== */
.karte-main {
  background-color: var(--color-bg);
  padding: 2rem var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.karte-seite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  max-width: 860px;
}

.karte-img {
  width: 100%;
  height: auto;
  display: block;
  /* Verhindert Blur bei scharfen Kanten des Originals */
  image-rendering: auto;
  /* Dezenter Rahmen passend zum Designsystem */
  border: 3px solid var(--color-border);
  box-shadow: 0 4px 24px rgba(43, 18, 8, 0.18);
}

/* ====================================================
   Responsive
   ==================================================== */
@media (max-width: 480px) {
  .karte-main {
    padding: 1rem 0.5rem;
    gap: 1.5rem;
  }

  .karte-seite {
    gap: 1.5rem;
  }

  .karte-img {
    border-width: 2px;
    box-shadow: 0 2px 12px rgba(43, 18, 8, 0.15);
  }
}