@media (min-width: 601px) {
  .recipe-text {
    display: contents; /* wirkt wie „ent-wrapped“ */
  }
}

/* Mobile: Wrapper wird zum fixen/scrollbaren Bereich */
@media (max-width: 600px) {
  :root {
    --heroH: 420px;
  } /* Höhe deines fixen Bildbereichs */
  .recipe,
  .recipe-media,
  [data-scroll-container] {
    transform: none !important;
    will-change: auto !important;
    margin-top: -1rem;
  }

  .recipe-text {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--heroH);
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: rgba(255, 248, 222, 1);
    width: 70%;
    margin: 2% auto;
    padding: 16px 8%;
    z-index: 1;
  }
}
@media (max-width: 800px) {
  .fab-menu {
    opacity: 1 !important;
  }

  .nav {
    opacity: 0;
  }
}

@media (max-width: 400px) {
  :root {
    --heroH: 300px;
  } /* Höhe deines fixen Bildbereichs */
  .recipe,
  .recipe-media,
  [data-scroll-container] {
    transform: none !important;
    will-change: auto !important;
    margin-top: -1rem;
  }
}

@media (max-width: 240px) {
  :root {
    --heroH: 450px;
  } /* Höhe deines fixen Bildbereichs */
  .recipe,
  .recipe-media,
  [data-scroll-container] {
    transform: none !important;
    will-change: auto !important;

  }
}