<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Cover – Das Kaleidoskop der Schlummerwelten</title>
  <style>
    :root {
      --bleed:       {{ bleed }}in;
      --trim-w:      {{ trimW }}in;
      --trim-h:      {{ trimH }}in;
      --spine-w:     {{ spineWidth }}in;
      --total-w:     {{ totalWidth }}in;
      --total-h:     {{ totalHeight }}in;
      --safe:        {{ safe }}in;
      --spine-safe:  {{ spineSafe }}in;

      /* Derived positions (left edge of each zone) */
      --back-left:   0in;
      --spine-left:  calc(var(--bleed) + var(--trim-w));
      --front-left:  calc(var(--bleed) + var(--trim-w) + var(--spine-w));

      /* Design tokens — matches interior "Illuminated Nocturne" palette */
      --color-bg:     #080820;
      --color-mid:    #0f0f30;
      --color-gold:   #b89a4e;
      --color-gold2:  #e8c96a;
      --color-text:   #e8e4d8;
      --color-muted:  rgba(184,154,78,0.5);

      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body:    'Lora', Georgia, serif;
    }

    /* ── Fonts ─────────────────────────────────────────────── */
    @font-face {
      font-family: 'Cormorant Garamond';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/cormorant-garamond-400-normal.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      font-style: italic;
      font-weight: 300;
      src: url('../fonts/cormorant-garamond-300-italic.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      font-style: italic;
      font-weight: 400;
      src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      font-style: italic;
      font-weight: 600;
      src: url('../fonts/cormorant-garamond-600-italic.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Lora';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/lora-400-normal.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Lora';
      font-style: italic;
      font-weight: 400;
      src: url('../fonts/lora-400-italic.woff2') format('woff2');
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      font-family: var(--font-body);
      width:  var(--total-w);
      height: var(--total-h);
      background: var(--color-bg);
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      overflow: hidden;
    }

    /* ── Canvas ─────────────────────────────────────────────── */
    .canvas {
      position: relative;
      width:  var(--total-w);
      height: var(--total-h);
      background: var(--color-bg);
    }

    /* Star-field background (pure CSS, no images required) */
    .canvas::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 28% 42%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 44% 11%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 73%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 76% 29%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at  7% 66%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 51% 88%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 33% 77%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 93% 14%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 20% 5%,  rgba(200,168,75,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 68% 90%, rgba(200,168,75,0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 85% 38%, rgba(200,168,75,0.5) 0%, transparent 100%);
    }

    /* ── Zones ──────────────────────────────────────────────── */
    .zone {
      position: absolute;
      top: 0;
      height: var(--total-h);
    }

    .zone--back {
      left: var(--back-left);
      width: calc(var(--bleed) + var(--trim-w));
    }

    .zone--spine {
      left: var(--spine-left);
      width: var(--spine-w);
      background: var(--color-mid);
      border-left:  0.5px solid rgba(200,168,75,0.2);
      border-right: 0.5px solid rgba(200,168,75,0.2);
    }

    .zone--front {
      left: var(--front-left);
      width: calc(var(--trim-w) + var(--bleed));
    }

    /* ── Back cover content ─────────────────────────────────── */
    .back-content {
      position: absolute;
      /* safe zone: bleed + safe from left, safe from right, bleed+safe from top/bottom */
      top:    calc(var(--bleed) + var(--safe));
      left:   calc(var(--bleed) + var(--safe));
      right:  var(--safe);
      bottom: calc(var(--bleed) + var(--safe));
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .back-headline {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: 0.22in;
      color: var(--color-gold);
      letter-spacing: 0.03em;
      margin-bottom: 0.14in;
    }

    .back-synopsis {
      font-family: var(--font-body);
      font-size: 0.138in;
      line-height: 1.8;
      color: var(--color-text);
      flex: 1;
    }

    .back-synopsis p { margin-bottom: 0.1in; }

    .back-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .back-tagline {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: 0.118in;
      color: var(--color-muted);
      max-width: 60%;
      line-height: 1.6;
    }

    /* Barcode placeholder — KDP places the barcode here if left blank */
    /* White box reserved for KDP's automatic ISBN barcode placement */
    .barcode-placeholder {
      width: 1in;
      height: 0.6in;
      background: white;
    }

    /* Optional back cover artwork */
    .back-artwork {
      position: absolute;
      inset: 0;
      object-fit: cover;
      opacity: 0.35;
    }

    /* ── Spine content ──────────────────────────────────────── */
    .spine-content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .spine-text {
      transform: rotate(90deg);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 0.15in;
    }

    .spine-title {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: 0.13in;
      color: var(--color-gold);
      letter-spacing: 0.04em;
    }

    .spine-divider {
      font-family: var(--font-display);
      font-size: 0.1in;
      color: var(--color-muted);
    }

    .spine-author {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: 0.1in;
      color: rgba(232, 228, 216, 0.7);
      letter-spacing: 0.06em;
    }

    .spine-too-narrow {
      transform: rotate(90deg);
      font-size: 0.08in;
      color: rgba(255,80,80,0.8);
      white-space: nowrap;
      font-family: monospace;
    }

    /* ── Front cover content ────────────────────────────────── */
    .front-artwork {
      position: absolute;
      /* art fills from left trim edge (skip the right bleed) */
      top: 0; left: 0;
      width: var(--trim-w);
      height: var(--total-h);
      object-fit: cover;
    }

    .front-content {
      position: absolute;
      top:    calc(var(--bleed) + var(--safe));
      left:   var(--safe);
      right:  calc(var(--safe) + var(--bleed));
      bottom: calc(var(--bleed) + var(--safe));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 0.15in;
    }

    .front-ornament-top {
      font-size: 0.18in;
      color: var(--color-gold);
      letter-spacing: 0.3em;
    }

    .front-title {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: 0.54in;
      line-height: 1.18;
      color: var(--color-gold2);
      text-shadow: 0 0 0.18in rgba(184,154,78,0.45), 0 2px 10px rgba(0,0,0,0.9);
      letter-spacing: 0.01em;
    }

    .front-rule {
      width: 1.6in;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--color-gold), transparent);
    }

    .front-subtitle {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: 0.17in;
      letter-spacing: 0.1em;
      color: rgba(232, 228, 216, 0.75);
      text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    }

    /* Placeholder box shown when no front artwork is provided */
    .front-art-placeholder {
      position: absolute;
      top: var(--bleed);
      left: 0;
      width: var(--trim-w);
      height: var(--trim-h);
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(ellipse at 50% 40%, #1a1a4a 0%, #080820 70%);
    }

    .front-art-placeholder span {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 0.13in;
      color: rgba(184,154,78,0.4);
      border: 1px solid rgba(184,154,78,0.15);
      padding: 0.15in 0.35in;
      letter-spacing: 0.05em;
    }

    .front-author {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: 0.15in;
      letter-spacing: 0.12em;
      color: rgba(184,154,78,0.65);
      text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    }

    .front-ornament {
      font-family: var(--font-display);
      font-size: 0.16in;
      color: var(--color-muted);
    }

    /* ── Safe-zone & bleed guides overlay ───────────────────── */
    /*
     * These dashed lines are visual guides only — they mark the trim lines
     * and safe zones. Remove or comment out this section before final upload
     * if you prefer a clean proof. KDP will print nothing outside the trim.
     */
    .guides {
      display: none; /* design reference only — enable locally to check layout */
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    /* Outer bleed boundary = trim line */
    .guide--trim-top    { position: absolute; top: var(--bleed); left: 0; right: 0; border-top: 0.5px dashed rgba(255,80,80,0.5); }
    .guide--trim-bottom { position: absolute; bottom: var(--bleed); left: 0; right: 0; border-top: 0.5px dashed rgba(255,80,80,0.5); }
    .guide--trim-left   { position: absolute; left: var(--bleed); top: 0; bottom: 0; border-left: 0.5px dashed rgba(255,80,80,0.5); }
    .guide--trim-right  { position: absolute; right: var(--bleed); top: 0; bottom: 0; border-left: 0.5px dashed rgba(255,80,80,0.5); }

    /* Safe zone (bleed + safe from edge) */
    .guide--safe-top    { position: absolute; top: calc(var(--bleed) + var(--safe)); left: 0; right: 0; border-top: 0.5px dashed rgba(255,220,50,0.4); }
    .guide--safe-bottom { position: absolute; bottom: calc(var(--bleed) + var(--safe)); left: 0; right: 0; border-top: 0.5px dashed rgba(255,220,50,0.4); }
    .guide--safe-left   { position: absolute; left: calc(var(--bleed) + var(--safe)); top: 0; bottom: 0; border-left: 0.5px dashed rgba(255,220,50,0.4); }
    .guide--safe-right  { position: absolute; right: calc(var(--bleed) + var(--safe)); top: 0; bottom: 0; border-left: 0.5px dashed rgba(255,220,50,0.4); }

    /* Spine boundaries */
    .guide--spine-left  { position: absolute; left: var(--spine-left); top: 0; bottom: 0; border-left: 0.5px dashed rgba(100,200,255,0.5); }
    .guide--spine-right { position: absolute; left: calc(var(--front-left)); top: 0; bottom: 0; border-left: 0.5px dashed rgba(100,200,255,0.5); }

    /* Guide labels */
    .guide-label {
      position: absolute;
      font-family: monospace;
      font-size: 0.07in;
      background: rgba(0,0,0,0.6);
      padding: 1px 3px;
      border-radius: 2px;
      white-space: nowrap;
    }
    .guide-label--bleed { color: rgba(255,80,80,0.9); top: 2px; left: calc(var(--bleed) + 2px); }
    .guide-label--safe  { color: rgba(255,220,50,0.9); top: calc(var(--bleed) + var(--safe) + 2px); left: calc(var(--bleed) + var(--safe) + 2px); }
    .guide-label--spine { color: rgba(100,200,255,0.9); top: 2px; left: calc(var(--spine-left) + 2px); }
  </style>
</head>
<body>
<div class="canvas">

  {# ── Back cover ─────────────────────────────────────────── #}
  <div class="zone zone--back">

    {% if backImage %}
      <img class="back-artwork" src="{{ backImage }}" alt="Back cover artwork">
    {% endif %}

    <div class="back-content">
      <div>
        <p class="back-headline">Zwölf magische Reisen in die Welt der Träume</p>
        <div class="back-synopsis">
          <p>
            Jede Nacht beginnt eine neue Reise – und dieses Buch hat gleich zwölf davon.
            Ob gläserne Wälder, schlafende Riesen oder ein Teetassen-Boot auf einem
            Fluss aus Sternenlicht: Jede Geschichte führt sanft in eine neue Zauberwelt
            und begleitet dein Kind liebevoll in den Schlaf.
          </p>
          <p>
            Zwölf unabhängige Einschlafgeschichten · Traumhafte Aquarell-Illustrationen<br>
            Für Kinder von 3 bis 8 Jahren · Ideal zum Vorlesen
          </p>
        </div>
      </div>

      <div class="back-bottom">
        <p class="back-tagline">
          „Die schönsten Welten sind nur<br>mit geschlossenen Augen zu erreichen."
        </p>
        {# Empty white box — KDP places the ISBN barcode here automatically #}
        <div class="barcode-placeholder"></div>
      </div>
    </div>

  </div>{# end back #}

  {# ── Spine ──────────────────────────────────────────────── #}
  <div class="zone zone--spine">
    <div class="spine-content">
      {% if hasSpineText %}
        <div class="spine-text">
          <span class="spine-title">Das Kaleidoskop der Schlummerwelten</span>
          <span class="spine-divider">❧</span>
          {% if author %}<span class="spine-author">{{ author }}</span>{% endif %}
        </div>
      {% else %}
        <span class="spine-too-narrow">too narrow ({{ pageCount }}p &lt; 79)</span>
      {% endif %}
    </div>
  </div>{# end spine #}

  {# ── Front cover ─────────────────────────────────────────── #}
  <div class="zone zone--front">

    {% if frontImage %}
      <img class="front-artwork" src="{{ frontImage }}" alt="Front cover artwork">
    {% else %}
      <div class="front-art-placeholder">
        <span>Cover-Illustration<br>→ images/cover/front.png</span>
      </div>
    {% endif %}

    <div class="front-content">
      <p class="front-ornament">❧</p>
      <h1 class="front-title">Das Kaleidoskop<br>der Schlummerwelten</h1>
      <div class="front-rule"></div>
      <p class="front-subtitle">Zwölf magische Einschlafgeschichten</p>
      {% if author %}<p class="front-author">{{ author }}</p>{% endif %}
      <p class="front-ornament">· · ·</p>
    </div>

  </div>{# end front #}

  {# ── Guides overlay (trim lines, safe zones, spine) ──────── #}
  {# Remove this block before final upload to KDP              #}
  <div class="guides">
    <div class="guide--trim-top"></div>
    <div class="guide--trim-bottom"></div>
    <div class="guide--trim-left"></div>
    <div class="guide--trim-right"></div>
    <div class="guide--safe-top"></div>
    <div class="guide--safe-bottom"></div>
    <div class="guide--safe-left"></div>
    <div class="guide--safe-right"></div>
    <div class="guide--spine-left"></div>
    <div class="guide--spine-right"></div>

    <span class="guide-label guide-label--bleed">← Beschnitt (3,2 mm)</span>
    <span class="guide-label guide-label--safe">← Sicherheitsabstand (3,2 mm)</span>
    <span class="guide-label guide-label--spine">← Rücken ({{ spineWidth }} Zoll / {{ pageCount }} S.)</span>
  </div>

</div>{# end canvas #}
</body>
</html>
