/* Mondraute – Werbeseite. Gestaltung wie die App: „Zauberbuch bei Kerzenlicht“, Brombeernacht, Messing, Cinzel/IM Fell/Lora. */
@font-face { font-family: "Cinzel"; src: url("/schrift/cinzel_semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/schrift/imfell_italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/schrift/lora_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/schrift/lora_italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/schrift/lora_semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --papier: #170D12; --blatt: #22141C; --tinte: #F0E4D8; --blass: #CDBFB3; --rubrik: #E08A9C;
  --messing: #B99A68; --linie: #4A3540; --knopf: #8E2440; --schein: rgba(120, 52, 72, .55);
  --titel: "Cinzel", "Times New Roman", serif; --zier: "IM Fell English", Georgia, serif; --text: "Lora", Georgia, serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --papier: #EFE6E2; --blatt: #F7F0EC; --tinte: #2B1720; --blass: #5A4650; --rubrik: #8E2440;
    --messing: #9A7B47; --linie: #CDB8B0; --knopf: #8E2440; --schein: rgba(255, 255, 255, .6); color-scheme: light; }
}
* { box-sizing: border-box; }
html { background: var(--papier); }
body { margin: 0; color: var(--tinte); font: 19px/1.6 var(--text); background:
  radial-gradient(ellipse 80% 45% at 50% 0, var(--schein), transparent 70%), var(--papier); }
.buch { max-width: 960px; margin: 0 auto; padding-inline: 18px; padding-block: 28px 56px; }
.rahmen { border: 1.5px solid var(--messing); outline: 1px solid color-mix(in srgb, var(--messing) 45%, transparent);
  outline-offset: -8px; padding: clamp(22px, 5vw, 48px); position: relative; }
.rahmen::before, .rahmen::after { content: "✦\FE0E"; position: absolute; color: var(--messing); font-size: 18px; }
.rahmen::before { top: -12px; left: calc(50% - 8px); background: var(--papier); padding: 0 6px; }
.rahmen::after { bottom: -12px; left: calc(50% - 8px); background: var(--papier); padding: 0 6px; }
header.kopf { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
header.kopf img { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
h1 { font: 600 clamp(34px, 7vw, 56px)/1.05 var(--titel); letter-spacing: .04em; margin: 0; }
.unter { font: italic clamp(20px, 3.4vw, 26px)/1.3 var(--zier); color: var(--blass); margin: 6px 0 0; }
.trenner { display: flex; align-items: center; gap: 12px; color: var(--messing); margin: 34px 0 18px; }
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--messing), transparent); }
h2 { font: 600 15px/1.2 var(--titel); letter-spacing: .14em; text-transform: uppercase; color: var(--rubrik); margin: 0; white-space: nowrap; }
p { margin: 0 0 14px; max-width: 64ch; }
.zitat { font: italic 22px/1.45 var(--zier); color: var(--blass); }
.bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 8px 0 4px; }
.bilder figure { margin: 0; display: grid; gap: 6px; min-width: 0; }
.bilder img { width: 100%; height: auto; aspect-ratio: 9 / 20; object-fit: cover; object-position: top; border: 1px solid var(--linie); border-radius: 14px; }
.bilder figcaption { font-size: 15px; color: var(--blass); }
ul.liste { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; max-width: 64ch; }
ul.liste li { display: grid; grid-template-columns: 22px 1fr; }
ul.liste li::before { content: "✦\FE0E"; color: var(--messing); font-size: 14px; padding-top: 3px; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 36px; }
.knopf { display: inline-block; font: 600 15px/1 var(--titel); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: #F0E4D8; background: var(--knopf); padding: 16px 22px; border: 1px solid var(--messing); }
.bald { font: italic 18px var(--zier); color: var(--blass); margin-top: 10px; }
footer { margin-top: 28px; font-size: 15px; color: var(--blass); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
footer a, a { color: var(--tinte); text-underline-offset: 3px; }
@media (max-width: 520px) { header.kopf { grid-template-columns: 1fr; text-align: center; } header.kopf img { margin: 0 auto; } }