kaleidoskop/templates/story-spread.html

{% 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 }};">
  {% 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 }}">
  <div class="text-page-inner">
    {% if loop.first %}
      <span class="story-number">Geschichte {% if story.number < 10 %}0{{ story.number }}{% else %}{{ story.number }}{% endif %}</span>
      <h2 class="story-title">{{ story.title }}</h2>
    {% endif %}
    <div class="scene-text">{{ scene.html | safe }}</div>
    <div class="scene-ornament">❧</div>
  </div>
</div>
{% endfor %}