/* ═══════════════════════════════════════════════════════════════════════════
   »Solange er lebt« — Leseansicht
   Eigenständiges Stylesheet. Entstanden als Kopie des Chroniken-Stylesheets
   (/var/dev/projects/chroniken/static/style.css, Stand 15.08.2026) und seither unabhängig.

   ⚠ WARUM EIGENSTÄNDIG: Vorher luden die Leseseiten ihr CSS direkt aus dem
   Verzeichnis der Chroniken-App. Jede Änderung dort hätte ungefragt auch
   dieses Buch verändert — und jede Anpassung hier musste als Override im
   Generator gebaut werden, um die anderen Bücher nicht zu treffen.
   Jetzt gehört diese Datei allein zu diesem Buch: Änderungen hier haben
   keine Fernwirkung, und Anpassungen stehen an ihrer richtigen Stelle.
   ⚠ Der Preis: Eine Designänderung, die ALLE Bücher betreffen soll, muss
   in jeder Buchdatei einzeln gemacht werden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die singende Tür — aufgehellter Pergament-Ton (wie malte.wintner.ch) */
:root {
  --bg:        #f2e7cf;   /* Pergament */
  --bg-soft:   #ece0c2;
  --panel:     #fbf5e5;
  --border:    rgba(120, 95, 50, 0.22);
  --fg:        #33281a;   /* tiefe Sepia-Tinte */
  --muted:     #6d5c40;
  --accent:    #b6892c;   /* gealtertes Gold (auf Hell lesbar) */
  --accent-2:  #6f5cc4;   /* Violett */
  --glow:      rgba(111, 92, 196, 0.22);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1100px 560px at 15% -8%, rgba(201,162,75,0.16), transparent 60%),
    radial-gradient(900px 480px at 92% 4%, rgba(111,92,196,0.10), transparent 58%),
    radial-gradient(1000px 560px at 50% 110%, rgba(156,94,125,0.10), transparent 60%),
    linear-gradient(180deg, #f5ecd6 0%, #f0e4c8 46%, #f4ead4 100%);
  color: var(--fg);
  font: 17px/1.7 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #8a6a1e; }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
  background: rgba(246, 238, 217, 0.78);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--fg);
  font-size: .95rem;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand em { color: var(--accent); font-style: normal; }
.brand-sigil { filter: drop-shadow(0 0 6px var(--glow)); }
.site-nav { display: flex; gap: clamp(.8rem, 3vw, 1.8rem); }
.site-nav a {
  color: var(--muted);
  font-variant: small-caps;
  letter-spacing: .06em;
  font-size: 1.05rem;
}
.site-nav a:hover { color: var(--accent); }

/* ---------- Layout ---------- */
.content {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem) 4rem;
}

.section-title, .page-title {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: .01em;
}
.page-title { margin-bottom: .3rem; }
.page-intro { color: var(--muted); margin-top: 0; font-style: italic; }

/* Band-Trenner in der Kapitelübersicht (Band 1 / Band 2 / …) */
.band-heading {
  margin: 3rem 0 .2rem;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.band-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}
.chapter-list + .band-heading { margin-top: 3.4rem; }

/* ---------- Hero / Startseite ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
  margin-bottom: 3.5rem;
}
.hero-art img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 26px 60px -30px rgba(74,55,20,0.5), 0 0 0 1px rgba(255,255,255,0.3) inset;
}
.hero-text h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.15;
  padding-bottom: 0.12em;   /* Raum für Unterlängen (z. B. „g") — bei background-clip:text sonst abgeschnitten */
  margin: 0 0 0.85rem;
  background: linear-gradient(160deg, #3a2b12, #9a6f1e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { font-size: 1.15rem; color: var(--fg); }
.hero-text p { color: var(--fg); }
.hero-text strong { color: #5a3f6e; }

.btn {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .7rem 1.6rem;
  border: 1px solid rgba(182,137,44,.7);
  border-radius: 999px;
  color: #3a2708;
  background: linear-gradient(135deg, #e3c478, #c9a24b);
  font-variant: small-caps;
  letter-spacing: .08em;
  transition: all .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  color: #3a2708;
  background: linear-gradient(135deg, #e9cd86, #d0aa54);
  box-shadow: 0 14px 26px -12px rgba(74,55,20,0.5);
}

/* ---------- Karten-Raster (Startseite) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.4rem;
  margin-top: 1.5rem;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--fg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-2);
  box-shadow: 0 16px 40px -20px var(--glow);
}
.card-cover { position: relative; aspect-ratio: 4 / 3; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; }
.card-order {
  position: absolute;
  top: .6rem; left: .6rem;
  background: rgba(251,245,229,.9);
  border: 1px solid var(--accent);
  color: #8a6a1e;
  font-size: .8rem;
  padding: .15rem .55rem;
  border-radius: 6px;
  letter-spacing: .1em;
  backdrop-filter: blur(2px);
}
.card-body { padding: .9rem 1rem 1.1rem; }
.card-body h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.card-sub { margin: 0; color: var(--muted); font-size: .95rem; font-style: italic; }
.more { margin-top: 1.6rem; }
.latest { margin-top: 2rem; }

/* ---------- Kapitelliste ---------- */
.chapter-list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2rem; }
.chapter-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.4rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--fg);
  transition: border-color .2s ease, transform .2s ease;
}
.chapter-row:hover { border-color: var(--accent-2); transform: translateX(4px); }
.chapter-row-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chapter-row-text { padding: 1.1rem 1.2rem 1.1rem 0; }
.chapter-num {
  color: var(--accent);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chapter-row-text h2 { margin: .3rem 0 .4rem; font-size: 1.4rem; }
.chapter-sub { color: var(--muted); font-style: italic; margin: .2rem 0; }
.chapter-summary { color: var(--muted); margin: .5rem 0 0; }

/* ---------- Kapitel-Detail ---------- */
.chapter-header {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  border: 1px solid var(--border);
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(to top, rgba(40,28,12,.92) 8%, rgba(40,28,12,.32) 66%, rgba(40,28,12,.05) 100%), var(--cover);
  background-size: cover;
  background-position: center;
}
.chapter-header-inner { padding: clamp(1.5rem, 4vw, 2.5rem); }
.chapter-header h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .4rem 0 .3rem; line-height: 1.1; color: #f7efdd; }
.chapter-header .chapter-num { color: #e9c877; }
.chapter-header .chapter-sub { color: #e6dcc4; }

.prose { max-width: 70ch; margin: 0 auto; }
.prose p { margin: 1.1em 0; }
.prose h2, .prose h3 { margin-top: 2em; color: #2c2113; }
.prose blockquote {
  position: relative;
  margin: 1.7em 0 .6em;
  padding: .18em 1.2em .18em 1.45em;
  color: #743050;         /* Heidekraut/Weinrot — warm, romantisch, kontraststark zum Gold */
  font-style: italic;
  font-size: 1.08em;      /* Dialog etwas größer als der Erzähltext */
  line-height: 1.7;
}
/* Goldstrich, etwas länger als der Text, mit kleinen Rauten-Verzierungen an den Enden */
.prose blockquote::before {
  content: "";
  position: absolute;
  left: 0; top: 1px; bottom: 1px;
  width: 2px; border-radius: 3px;
  background: linear-gradient(180deg, #dcb75f, #b6892c);
}
.prose blockquote::after {
  content: "";
  position: absolute;
  left: 1px; transform: translateX(-50%);
  top: -5px; bottom: -5px; width: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0L8 4L4 8L0 4Z' fill='%23b6892c'/%3E%3C/svg%3E") top center / 9px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0L8 4L4 8L0 4Z' fill='%23b6892c'/%3E%3C/svg%3E") bottom center / 9px 9px no-repeat;
}
/* Dialog: aufeinanderfolgende Äusserungen mit etwas Luft, aber als Wortwechsel erkennbar. */
.prose blockquote + blockquote { margin-top: .75em; }

/* Erzähl-Einschub innerhalb eines Dialogs (»…, sagte er, …«): keine wörtliche Rede,
   daher normale Sepia-Tinte statt Dialogfarbe und aufrecht statt kursiv. */
.prose blockquote .rede-tag { font-style: normal; color: #3c2f1e; font-size: calc(1em / 1.08); }  /* Erzählgrösse, nicht Dialoggrösse (macht den 1.08em-Dialog-Aufschlag rückgängig) */

/* Der Wanderer bricht die Regeln der Welt (Variante 6 — „Die Worte erzeugen Raum"):
   seine Sätze lösen sich aus der goldenen Einrahmung, stehen frei und schaffen Raum
   um sich. Gleiche Schriftfamilie, gleiche Grundfarbe wie die übrigen Dialoge. */
.prose blockquote.wanderer {
  margin: 2.7em auto;      /* deutlich mehr Luft ober- und unterhalb */
  padding: 0;
  max-width: 52ch;
  text-align: center;      /* leichte Zentrierung — löst sich von der linken Kante */
  font-size: 1.12em;       /* minimal grösser als normale Dialoge (1.08em) */
  line-height: 1.9;        /* etwas mehr Zeilenhöhe */
}
/* Keine goldene Linie, keine Sigille */
.prose blockquote.wanderer::before,
.prose blockquote.wanderer::after { content: none; }
/* Aufeinanderfolgende Wanderer-Sätze etwas näher, aber weiterhin luftig */
.prose blockquote.wanderer + blockquote.wanderer { margin-top: 1.4em; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); margin: 1.5em 0; }
/* Szenentrenner: feine, an den Enden ausblendende Linie mit goldener Raute in der Mitte */
.prose hr {
  border: 0;
  height: 8px;
  width: 44%;
  margin: 3em auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0L8 4L4 8L0 4Z' fill='%23b6892c'/%3E%3C/svg%3E") center / 7px 7px no-repeat,
    linear-gradient(90deg,
      transparent 0%, rgba(90,70,35,.55) 22%, rgba(90,70,35,.55) 45%,
      transparent 45%, transparent 55%,
      rgba(90,70,35,.55) 55%, rgba(90,70,35,.55) 78%, transparent 100%)
      center / 100% 1px no-repeat;
}
.prose em { color: #5a48a8; }

/* Kapiteltext als helles Blatt — wie die Leseprobe auf malte.wintner.ch */
.chapter-sheet {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding: clamp(1.7rem, 4vw, 3.2rem) clamp(1.4rem, 5vw, 3.4rem);
  border: 1px solid var(--border);
  border-radius: 22px;
  /* Märchenhafte Deko: vier filigrane Gold-Eckvignetten (rundes L + Endcurls + Raute,
     greift das Rauten-Motiv der Dialogstriche/Szenentrenner auf). Reines Background-SVG:
     kein Extra-DOM, kein Request, kein Layout-Shift. Auf Mobile ausgeblendet (s. u.). */
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g fill='none' stroke='%23b6892c' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'><path d='M12 36 L12 18 Q12 12 18 12 L36 12'/><path d='M12 36 q-4 3 -8 1.5'/><path d='M36 12 q3 -4 1.5 -8'/></g><path d='M18 18 l3.4 3.4 -3.4 3.4 -3.4 -3.4 z' fill='%23b6892c' fill-opacity='.55'/></svg>") left 16px top 16px / 56px 56px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g transform='rotate(90 30 30)'><g fill='none' stroke='%23b6892c' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'><path d='M12 36 L12 18 Q12 12 18 12 L36 12'/><path d='M12 36 q-4 3 -8 1.5'/><path d='M36 12 q3 -4 1.5 -8'/></g><path d='M18 18 l3.4 3.4 -3.4 3.4 -3.4 -3.4 z' fill='%23b6892c' fill-opacity='.55'/></g></svg>") right 16px top 16px / 56px 56px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g transform='rotate(270 30 30)'><g fill='none' stroke='%23b6892c' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'><path d='M12 36 L12 18 Q12 12 18 12 L36 12'/><path d='M12 36 q-4 3 -8 1.5'/><path d='M36 12 q3 -4 1.5 -8'/></g><path d='M18 18 l3.4 3.4 -3.4 3.4 -3.4 -3.4 z' fill='%23b6892c' fill-opacity='.55'/></g></svg>") left 16px bottom 16px / 56px 56px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g transform='rotate(180 30 30)'><g fill='none' stroke='%23b6892c' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'><path d='M12 36 L12 18 Q12 12 18 12 L36 12'/><path d='M12 36 q-4 3 -8 1.5'/><path d='M36 12 q3 -4 1.5 -8'/></g><path d='M18 18 l3.4 3.4 -3.4 3.4 -3.4 -3.4 z' fill='%23b6892c' fill-opacity='.55'/></g></svg>") right 16px bottom 16px / 56px 56px no-repeat,
    linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,250,238,.32)),
    var(--panel);
  /* Schatten wie bisher + feine Gold-Haarlinie rund ums Blatt */
  box-shadow: 0 24px 54px -30px rgba(74, 55, 20, .5), inset 0 0 0 1px rgba(182, 137, 44, .30);
}
.chapter-sheet .prose {
  max-width: none;
  margin: 0;
  font-size: 1.15em;      /* ruhige, grössere Leseschrift wie in der Leseprobe */
  line-height: 1.85;
  color: #3c2f1e;         /* warme Sepia-Tinte */
}
/* Goldene Initiale am ersten Absatz des Kapitels (nur direkte Absätze, nicht Dialog-Blockquotes) */
.chapter-sheet .prose > p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: .8;
  padding: .02em .14em 0 0;
  color: var(--accent);
  font-weight: 700;
}

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 3rem 0 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.chapter-nav a {
  display: flex;
  flex-direction: column;
  max-width: 45%;
  color: var(--fg);
}
.chapter-nav-next { text-align: right; margin-left: auto; }
.chapter-nav span { color: var(--muted); font-size: .85rem; }
.chapter-nav strong { color: var(--accent); font-weight: 500; }
.back-link { text-align: center; color: var(--muted); }

/* ---------- Artefakte ---------- */
.artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}
.artifact {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.artifact:hover { border-color: var(--accent); transform: translateY(-3px); }
.artifact-img { aspect-ratio: 1 / 1; background: var(--bg-soft); }
.artifact-img img { width: 100%; height: 100%; object-fit: cover; }
.artifact figcaption { padding: 1rem 1.1rem 1.2rem; }
.artifact figcaption h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.artifact-origin { color: var(--accent); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.artifact figcaption p { color: var(--muted); margin: .5rem 0 0; font-size: .95rem; }

/* ---------- Diverses ---------- */
.empty { color: var(--muted); font-style: italic; text-align: center; padding: 3rem 1rem; }
.notfound { text-align: center; padding: 4rem 1rem; }
.notfound h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }

/* ---------- Status-Badge ---------- */
.status-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  padding: .12em .6em;
  font-size: .62em;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: rgba(125, 107, 214, 0.12);
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  white-space: nowrap;
}
.card-body .status-badge { margin: 0 0 .4rem; }

/* ---------- Admin / Export ---------- */
.admin { max-width: 640px; }
.export-form {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin: 2rem 0 1.5rem;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.export-form label {
  width: 100%;
  color: var(--accent);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.export-form input {
  flex: 1 1 220px;
  padding: .7rem .9rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-size: 1rem;
}
.export-form input:focus { outline: none; border-color: var(--accent-2); }
.export-form .btn { margin-top: 0; }
.admin-hint { color: var(--muted); font-size: .95rem; }
.admin-hint code { background: var(--code-bg, #232323); padding: .1em .4em; border-radius: 4px; color: #e3c478; }
.admin-hint ul { padding-left: 1.2rem; }
.admin-hint li { margin: .35rem 0; }

/* ---------- Authoring / Admin ---------- */
.admin-nav .nav-logout { color: var(--muted); }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-login { max-width: 460px; }
.form-error { color: #e08f8f; background: rgba(224,143,143,.08); border: 1px solid #e08f8f;
  border-radius: 8px; padding: .6rem .9rem; }

.btn-small { padding: .35rem .9rem; font-size: .9rem; margin-top: .8rem; }
.btn-ghost { border-color: var(--border); color: var(--muted); background: rgba(255,250,238,.5); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,250,238,.8); box-shadow: none; transform: none; }

.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.admin-card { display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; color: var(--fg); transition: border-color .2s, transform .2s; }
.admin-card:hover { border-color: var(--accent-2); transform: translateY(-3px); }
.admin-card-num { font-size: 1.9rem; color: var(--accent); }
.admin-card-label { color: var(--muted); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.admin-actions .btn { margin-top: 0; }

.admin-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.admin-table th, .admin-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--border);
  vertical-align: top; }
.admin-table th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.admin-table td.actions, .admin-table th.actions { white-space: nowrap; }
.admin-table .actions a, .admin-table .actions form { display: inline-block; margin-right: .8rem; }
.admin-table .muted { color: var(--muted); font-size: .9rem; }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.thumb-lg { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.link-danger { background: none; border: 0; color: #e08f8f; cursor: pointer; font: inherit; padding: 0; }
.link-danger:hover { text-decoration: underline; }
/* Aktions-Buttons in Tabellen wie Links darstellen (Kopieren/Fassung wählen). */
.admin-table .actions button:not(.link-danger) { background: none; border: 0; color: var(--accent-2);
  cursor: pointer; font: inherit; padding: 0; }
.admin-table .actions button:not(.link-danger):hover { text-decoration: underline; }
.version-group { margin-top: 2rem; }
.version-group .admin-table { margin-top: .4rem; }
.vg-title { font-size: 1.05rem; margin: 0; padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
.vg-title .muted { font-weight: 400; }
.status-ok { color: #3f8a55; }
.status-warn { color: #9a7b1e; }

.admin-form { max-width: 920px; margin-top: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.field > span { color: var(--accent); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .field { flex: 1 1 160px; }
.field-row .field.grow { flex: 3 1 280px; }
.admin-form input[type=text], .admin-form input:not([type]), .admin-form input[type=password],
.admin-form input[type=file], .admin-form select, .admin-form textarea {
  width: 100%; padding: .6rem .8rem; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; color: var(--fg); font: inherit; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: none; border-color: var(--accent-2); }
.form-actions { display: flex; gap: .8rem; margin-top: 1rem; }
.form-actions .btn { margin-top: 0; }

.editor-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem;
  line-height: 1.5; resize: vertical; min-height: 320px; }
.editor.code { white-space: pre; }
.preview-pane { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem 1.2rem; overflow-y: auto; max-height: 560px; }
.preview-pane > :first-child { margin-top: 0; }

.canon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.canon-item { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem; }
.canon-item h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.canon-item ul { margin: 0 0 .5rem; padding-left: 1.1rem; color: var(--muted); }

.canon-cat { margin-top: 2rem; }
.canon-cat .admin-head h2 { margin: 0; }
.canon-sep { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0 1.5rem; }

/* Kanon-Filterleiste (Suche + Status/Kapitel/Tag) */
.canon-filter { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.2rem 0; }
.canon-filter input[type="search"] { flex: 1 1 14rem; min-width: 10rem; }
.canon-filter input[type="search"], .canon-filter select {
  padding: .45rem .6rem; background: var(--bg); color: inherit;
  border: 1px solid var(--border); border-radius: 6px; font: inherit;
}
.link-ghost { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }
.link-ghost:hover { color: var(--accent); text-decoration: underline; }

/* Kanon-Status visuell unterscheiden */
.canon-status {
  display: inline-block; padding: .12em .7em; border-radius: 999px;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid currentColor; white-space: nowrap;
}
.canon-status--kanon    { color: #3f8a55; }   /* fest im Kanon — grün */
.canon-status--idee     { color: #3a6ea0; }   /* Idee — blau */
.canon-status--offen    { color: #9a7b1e; }   /* offen — gelb */
.canon-status--verworfen{ color: #a85a5a; }   /* verworfen — rot, gedimmt */

@media (max-width: 760px) {
  .editor-split { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 2.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
}
.site-footer .rune { display: block; font-size: 1.5rem; color: var(--accent); margin-bottom: .4rem; }
.site-footer p { margin: 0; font-style: italic; }
.site-footer .legal { font-style: normal; font-size: .8rem; margin-top: .7rem; opacity: .85; }
.site-footer .legal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-footer .legal a:hover { border-bottom-color: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .chapter-row { grid-template-columns: 1fr; }
  .chapter-row-cover { aspect-ratio: 16 / 7; }
  .chapter-row-text { padding: 0 1.2rem 1.2rem; }
  .site-header { flex-direction: column; gap: .7rem; }
  /* Eckvignetten auf schmalen Screens weglassen (dort zu gedrängt); Haarlinie bleibt */
  .chapter-sheet {
    background:
      linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,250,238,.32)),
      var(--panel);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ── Leseansicht »Solange er lebt« (15.08.2026) ────────────────────────────
   Diese Seite ist eine einzige durchlaufende Seite statt Kapitelseiten. */
@media (max-width: 640px) {
  /* Die Lesekarte lag bündig an den Displaykanten, während der Vorspann
     22px Rand hat. Karte einrücken, Innenpadding im selben Zug zurücknehmen,
     damit der Prosatext fast stehen bleibt und die Zeilenlänge gleich bleibt. */
  article.chapter { padding-inline: 16px; }
  .chapter-sheet { padding-left: 14px; padding-right: 14px; }
}