<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Das Kaleidoskop der Schlummerwelten</title>
  <link rel="stylesheet" href="../styles/print.css">
  <link rel="stylesheet" href="../styles/layout.css">
  <link rel="stylesheet" href="../styles/typography.css">
</head>
<body>

  {# ── Copyright / imprint page ── #}
  <div class="page page--imprint">
    <div class="imprint-content">
      <p>{{ frontMatter.title or 'Das Kaleidoskop der Schlummerwelten' }}</p>
      <p>{% if frontMatter.author %}{{ frontMatter.author }}{% endif %}{% if frontMatter.year %}, {{ frontMatter.year }}{% endif %}</p>
      <p>Erste Ausgabe · Alle Rechte vorbehalten.</p>
    </div>
  </div>

  {# ── Table of contents ── #}
  <div class="page page--toc">
    <h2 class="toc-title">Die zwölf Schlummerwelten</h2>
    <ol class="toc-list">
      {% for story in stories %}
        <li>{{ story.title }}</li>
      {% endfor %}
    </ol>
  </div>

  {# ── Stories ── #}
  {% for story in stories %}
    {% include "story-spread.html" %}
  {% endfor %}

  {# ── Finale page ── #}
  <div class="page page--finale">
    {% if finale.image %}
      <img class="finale-image" src="{{ finale.image }}" alt="Das Kaleidoskop – alle zwölf Welten">
    {% else %}
      <div class="placeholder-image" style="background: #0d0d2b; width:100%; height:100%;">
        <div class="placeholder-label">
          <span class="placeholder-scene">Finale-Illustration (alle 12 Welten)</span>
        </div>
      </div>
    {% endif %}
    <div class="finale-overlay">
      <h2>Das Kaleidoskop</h2>
      <p>Alle zwölf Welten auf einen Blick</p>
    </div>
  </div>

</body>
</html>
