<section class="popup-day popup-recipe">

  <!-- TITEL -->
  <div class="popup-header">
    <h2><!-- TITEL HIER --></h2>

    <!-- TOOLS: Schriftart & Schriftgröße -->
    <div class="popup-tools">
      <button id="btn-font-toggle" aria-label="Schriftart umschalten">Aa ↔ &#x1D49C;</button>
      <button id="btn-font-up" aria-label="Schrift vergrößern">A+</button>
      <button id="btn-font-down" aria-label="Schrift verkleinern">A−</button>
    </div>
  </div>

  <!-- ZWEI-SPALTEN-LAYOUT -->
  <div class="popup-body">

    <!-- =====================================
         LINKE SPALTE – STORYTEXT
         ===================================== -->
    <div class="story">
      <!-- DEIN STORYTEXT -->
    </div>

    <!-- =====================================
         RECHTE SPALTE – REZEPT
         ===================================== -->
    <div class="addon popup-recipe-content">

      <!-- Rezeptname -->
      <h3 class="recipe-title"><!-- Rezeptname --></h3>

      <!-- RESPONSIVES BILD -->
      <picture class="recipe-image-wrapper">

        <!-- AVIF -->
        <source
          type="image/avif"
          srcset="
            /2025/assets/images/480/avif/REZEPT.avif 480w,
            /2025/assets/images/720/avif/REZEPT.avif 720w,
            /2025/assets/images/1024/avif/REZEPT.avif 1024w,
            /2025/assets/images/1366/avif/REZEPT.avif 1366w,
            /2025/assets/images/1600/avif/REZEPT.avif 1600w,
            /2025/assets/images/1920/avif/REZEPT.avif 1920w,
            /2025/assets/images/2560/avif/REZEPT.avif 2560w,
            /2025/assets/images/3840/avif/REZEPT.avif 3840w
          "
        >

        <!-- WEBP -->
        <source
          type="image/webp"
          srcset="
            /2025/assets/images/480/webp/REZEPT.webp 480w,
            /2025/assets/images/720/webp/REZEPT.webp 720w,
            /2025/assets/images/1024/webp/REZEPT.webp 1024w,
            /2025/assets/images/1366/webp/REZEPT.webp 1366w,
            /2025/assets/images/1600/webp/REZEPT.webp 1600w,
            /2025/assets/images/1920/webp/REZEPT.webp 1920w,
            /2025/assets/images/2560/webp/REZEPT.webp 2560w,
            /2025/assets/images/3840/webp/REZEPT.webp 3840w
          "
        >

        <!-- JPEG -->
        <img
          src="/2025/assets/images/1024/jpeg/REZEPT.jpeg"
          srcset="
            /2025/assets/images/480/jpeg/REZEPT.jpeg 480w,
            /2025/assets/images/720/jpeg/REZEPT.jpeg 720w,
            /2025/assets/images/1024/jpeg/REZEPT.jpeg 1024w,
            /2025/assets/images/1366/jpeg/REZEPT.jpeg 1366w,
            /2025/assets/images/1600/jpeg/REZEPT.jpeg 1600w,
            /2025/assets/images/1920/jpeg/REZEPT.jpeg 1920w,
            /2025/assets/images/2560/jpeg/REZEPT.jpeg 2560w,
            /2025/assets/images/3840/jpeg/REZEPT.jpeg 3840w
          "
          alt="Rezeptbild"
          class="recipe-image"
          decoding="async"
          loading="lazy"
        >
      </picture>

      <!-- Zutaten -->
      <h4>Zutaten</h4>
      <ul>
        <!-- Zutatenliste -->
      </ul>

      <!-- Zubereitung -->
      <h4>Zubereitung</h4>
      <p>
        <!-- Zubereitungstext -->
      </p>

    </div>
  </div>
</section>