{% for scene in story.scenes %}
{# ── Left page: full-bleed illustration ── #}
<div class="page page--image" data-story="{{ story.number }}" style="
  --color-primary: {{ story.palette.primary }};
  --color-secondary: {{ story.palette.secondary }};
  --color-text: {{ story.palette.text }};
  --color-bg: {{ story.palette.background }};
">
  {% if scene.imageExists %}
    <img
      class="scene-image"
      src="{{ scene.image }}"
      alt="{{ scene.alt }}"
    >
  {% else %}
    <div class="placeholder-image" style="background: {{ story.palette.primary }};">
      <div class="placeholder-label">
        <span class="placeholder-story">Geschichte {{ story.number }}</span>
        <span class="placeholder-scene">{{ scene.alt }}</span>
      </div>
    </div>
  {% endif %}
</div>

{# ── Right page: story text ── #}
<div class="page page--text" data-story="{{ story.number }}" style="
  --color-primary: {{ story.palette.primary }};
  --color-secondary: {{ story.palette.secondary }};
  --color-text: {{ story.palette.text }};
  --color-bg: {{ story.palette.background }};
">
  <div class="text-page-inner">
    {% if loop.first %}
      <h2 class="story-title">{{ story.title }}</h2>
    {% endif %}
    <div class="scene-text">{{ scene.html | safe }}</div>
    <div class="scene-ornament">✦</div>
  </div>
</div>
{% endfor %}