2026-05-03 17:29:10 +02:00
|
|
|
|
<!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));
|
|
|
|
|
|
|
2026-05-03 18:44:19 +02:00
|
|
|
|
/* Design tokens — matches interior "Illuminated Nocturne" palette */
|
2026-05-03 17:29:10 +02:00
|
|
|
|
--color-bg: #080820;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
--color-mid: #0f0f30;
|
|
|
|
|
|
--color-gold: #b89a4e;
|
|
|
|
|
|
--color-gold2: #e8c96a;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
--color-text: #e8e4d8;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
--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');
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
|
|
|
|
|
|
|
|
html, body {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-body);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-04 17:47:13 +02:00
|
|
|
|
.back-ornament-top {
|
|
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
|
font-size: 0.16in;
|
|
|
|
|
|
color: var(--color-gold);
|
|
|
|
|
|
letter-spacing: 0.3em;
|
|
|
|
|
|
margin-bottom: 0.12in;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-03 17:29:10 +02:00
|
|
|
|
.back-headline {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-display);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
font-style: italic;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-weight: 300;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
font-size: 0.22in;
|
|
|
|
|
|
color: var(--color-gold);
|
2026-05-03 18:44:19 +02:00
|
|
|
|
letter-spacing: 0.03em;
|
2026-05-04 17:47:13 +02:00
|
|
|
|
margin-bottom: 0.12in;
|
|
|
|
|
|
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Decorative rule — mirrors .front-rule */
|
|
|
|
|
|
.back-rule {
|
|
|
|
|
|
width: 1.2in;
|
|
|
|
|
|
height: 1px;
|
|
|
|
|
|
background: linear-gradient(to right, transparent, var(--color-gold), transparent);
|
2026-05-03 18:44:19 +02:00
|
|
|
|
margin-bottom: 0.14in;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.back-synopsis {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-body);
|
|
|
|
|
|
font-size: 0.138in;
|
|
|
|
|
|
line-height: 1.8;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
flex: 1;
|
2026-05-04 17:47:13 +02:00
|
|
|
|
text-shadow: 0 1px 4px rgba(0,0,0,0.9);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.back-synopsis p { margin-bottom: 0.1in; }
|
|
|
|
|
|
|
2026-05-04 17:47:13 +02:00
|
|
|
|
.back-ornament-bottom {
|
|
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
|
font-size: 0.12in;
|
|
|
|
|
|
color: var(--color-muted);
|
|
|
|
|
|
letter-spacing: 0.25em;
|
|
|
|
|
|
margin-bottom: 0.1in;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-03 17:29:10 +02:00
|
|
|
|
.back-bottom {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.back-tagline {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-display);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
font-style: italic;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-weight: 300;
|
|
|
|
|
|
font-size: 0.118in;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
color: var(--color-muted);
|
|
|
|
|
|
max-width: 60%;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
line-height: 1.6;
|
2026-05-04 17:47:13 +02:00
|
|
|
|
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Barcode placeholder — KDP places the barcode here if left blank */
|
2026-05-03 17:34:24 +02:00
|
|
|
|
/* White box reserved for KDP's automatic ISBN barcode placement */
|
2026-05-03 17:29:10 +02:00
|
|
|
|
.barcode-placeholder {
|
|
|
|
|
|
width: 1in;
|
|
|
|
|
|
height: 0.6in;
|
|
|
|
|
|
background: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Optional back cover artwork */
|
|
|
|
|
|
.back-artwork {
|
|
|
|
|
|
position: absolute;
|
2026-05-03 20:13:48 +02:00
|
|
|
|
top: 0; left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
opacity: 0.35;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-04 17:47:13 +02:00
|
|
|
|
/* Gradient vignette — mirrors front-overlay for depth and legibility */
|
|
|
|
|
|
.back-overlay {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0; left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background:
|
|
|
|
|
|
radial-gradient(ellipse 90% 90% at 50% 50%,
|
|
|
|
|
|
transparent 30%,
|
|
|
|
|
|
rgba(6, 6, 24, 0.55) 100%),
|
|
|
|
|
|
linear-gradient(to bottom,
|
|
|
|
|
|
rgba(6, 6, 24, 0.40) 0%,
|
|
|
|
|
|
rgba(6, 6, 24, 0.15) 35%,
|
|
|
|
|
|
rgba(6, 6, 24, 0.15) 65%,
|
|
|
|
|
|
rgba(6, 6, 24, 0.50) 100%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-03 17:29:10 +02:00
|
|
|
|
/* ── 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 {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-display);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
font-style: italic;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-weight: 300;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
font-size: 0.13in;
|
|
|
|
|
|
color: var(--color-gold);
|
|
|
|
|
|
letter-spacing: 0.04em;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.spine-divider {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-display);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
font-size: 0.1in;
|
|
|
|
|
|
color: var(--color-muted);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.spine-author {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
|
font-style: italic;
|
|
|
|
|
|
font-weight: 300;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
font-size: 0.1in;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
color: rgba(232, 228, 216, 0.7);
|
|
|
|
|
|
letter-spacing: 0.06em;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
top: 0; left: 0;
|
2026-05-03 21:08:19 +02:00
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-03 20:03:21 +02:00
|
|
|
|
/* Gradient vignette over front artwork — ensures text legibility */
|
|
|
|
|
|
.front-overlay {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0; left: 0;
|
2026-05-03 21:10:40 +02:00
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
2026-05-03 20:03:21 +02:00
|
|
|
|
background:
|
|
|
|
|
|
/* deep vignette around all edges */
|
|
|
|
|
|
radial-gradient(ellipse 90% 90% at 50% 50%,
|
|
|
|
|
|
transparent 30%,
|
|
|
|
|
|
rgba(6, 6, 24, 0.55) 100%),
|
|
|
|
|
|
/* uniform dark tint to lift text off the image */
|
|
|
|
|
|
linear-gradient(to bottom,
|
|
|
|
|
|
rgba(6, 6, 24, 0.35) 0%,
|
|
|
|
|
|
rgba(6, 6, 24, 0.20) 40%,
|
|
|
|
|
|
rgba(6, 6, 24, 0.20) 60%,
|
|
|
|
|
|
rgba(6, 6, 24, 0.40) 100%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-03 17:29:10 +02:00
|
|
|
|
.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 {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-display);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
font-style: italic;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-weight: 300;
|
|
|
|
|
|
font-size: 0.54in;
|
|
|
|
|
|
line-height: 1.18;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
color: var(--color-gold2);
|
2026-05-03 20:03:21 +02:00
|
|
|
|
text-shadow:
|
|
|
|
|
|
0 0 0.22in rgba(184,154,78,0.6),
|
|
|
|
|
|
0 2px 8px rgba(0,0,0,1),
|
|
|
|
|
|
0 4px 24px rgba(0,0,0,0.9);
|
2026-05-03 18:44:19 +02:00
|
|
|
|
letter-spacing: 0.01em;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.front-rule {
|
|
|
|
|
|
width: 1.6in;
|
|
|
|
|
|
height: 1px;
|
|
|
|
|
|
background: linear-gradient(to right, transparent, var(--color-gold), transparent);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.front-subtitle {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
|
font-style: italic;
|
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
|
font-size: 0.17in;
|
|
|
|
|
|
letter-spacing: 0.1em;
|
2026-05-03 20:03:21 +02:00
|
|
|
|
color: rgba(232, 228, 216, 0.92);
|
|
|
|
|
|
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 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;
|
2026-05-03 18:44:19 +02:00
|
|
|
|
background: radial-gradient(ellipse at 50% 40%, #1a1a4a 0%, #080820 70%);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.front-art-placeholder span {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
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;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.front-author {
|
2026-05-03 18:44:19 +02:00
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
|
font-style: italic;
|
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
|
font-size: 0.15in;
|
|
|
|
|
|
letter-spacing: 0.12em;
|
2026-05-03 20:03:21 +02:00
|
|
|
|
color: rgba(184,154,78,0.85);
|
|
|
|
|
|
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
|
2026-05-03 17:29:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-03 18:44:19 +02:00
|
|
|
|
.front-ornament {
|
|
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
|
font-size: 0.16in;
|
2026-05-03 17:29:10 +02:00
|
|
|
|
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 {
|
2026-05-03 17:34:24 +02:00
|
|
|
|
display: none; /* design reference only — enable locally to check layout */
|
2026-05-03 17:29:10 +02:00
|
|
|
|
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 %}
|
2026-05-04 17:47:13 +02:00
|
|
|
|
<div class="back-overlay"></div>
|
2026-05-03 17:29:10 +02:00
|
|
|
|
|
|
|
|
|
|
<div class="back-content">
|
|
|
|
|
|
<div>
|
2026-05-04 17:47:13 +02:00
|
|
|
|
<p class="back-ornament-top">❧</p>
|
2026-05-03 17:29:10 +02:00
|
|
|
|
<p class="back-headline">Zwölf magische Reisen in die Welt der Träume</p>
|
2026-05-04 17:47:13 +02:00
|
|
|
|
<div class="back-rule"></div>
|
2026-05-03 17:29:10 +02:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2026-05-04 17:47:13 +02:00
|
|
|
|
<div>
|
|
|
|
|
|
<p class="back-ornament-bottom">· · ·</p>
|
|
|
|
|
|
<div class="back-bottom">
|
|
|
|
|
|
<p class="back-tagline">
|
2026-05-04 17:52:29 +02:00
|
|
|
|
„Die schönsten Welten sind nur<br>mit geschlossenen Augen zu erreichen.“
|
2026-05-04 17:47:13 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
{# Empty white box — KDP places the ISBN barcode here automatically #}
|
|
|
|
|
|
<div class="barcode-placeholder"></div>
|
|
|
|
|
|
</div>
|
2026-05-03 17:29:10 +02:00
|
|
|
|
</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>
|
2026-05-03 18:44:19 +02:00
|
|
|
|
<span class="spine-divider">❧</span>
|
|
|
|
|
|
{% if author %}<span class="spine-author">{{ author }}</span>{% endif %}
|
2026-05-03 17:29:10 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
{% else %}
|
|
|
|
|
|
<span class="spine-too-narrow">too narrow ({{ pageCount }}p < 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">
|
2026-05-03 20:03:21 +02:00
|
|
|
|
<div class="front-overlay"></div>
|
2026-05-03 17:29:10 +02:00
|
|
|
|
{% else %}
|
|
|
|
|
|
<div class="front-art-placeholder">
|
|
|
|
|
|
<span>Cover-Illustration<br>→ images/cover/front.png</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
|
|
<div class="front-content">
|
2026-05-03 18:44:19 +02:00
|
|
|
|
<p class="front-ornament">❧</p>
|
2026-05-03 17:29:10 +02:00
|
|
|
|
<h1 class="front-title">Das Kaleidoskop<br>der Schlummerwelten</h1>
|
2026-05-03 18:44:19 +02:00
|
|
|
|
<div class="front-rule"></div>
|
2026-05-03 17:29:10 +02:00
|
|
|
|
<p class="front-subtitle">Zwölf magische Einschlafgeschichten</p>
|
2026-05-03 18:44:19 +02:00
|
|
|
|
{% if author %}<p class="front-author">{{ author }}</p>{% endif %}
|
|
|
|
|
|
<p class="front-ornament">· · ·</p>
|
2026-05-03 17:29:10 +02:00
|
|
|
|
</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>
|
