:root {
    --bg: #f8f5ef;
    --bg-alt: #efe9dc;
    --ink: #2a221b;
    --ink-soft: #5b4f42;
    --accent: #8b3a2f;
    --accent-soft: #c97a6b;
    --border: #d8cdb6;
    --shadow: 0 1px 3px rgba(60, 40, 20, .12), 0 6px 18px rgba(60, 40, 20, .08);
    --maxw: 1200px;
    --serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

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

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--accent); }

.site-header {
    background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.4rem 1.5rem 1rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-title {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin: 0;
    color: var(--ink);
}

.site-title a { color: inherit; border: none; }
.site-title small {
    display: block;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-soft);
    margin-top: .2rem;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.4rem;          /* row-gap col-gap */
    font-size: .95rem;
    justify-content: flex-end;
}
.site-nav a { color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.site-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.site-nav a:hover { color: var(--accent); }

/* Mobile: Title links, Nav darunter im Wrap, kompaktere Typo */
@media (max-width: 640px) {
    .site-header__inner {
        padding: 1rem 1.1rem .8rem;
        gap: .6rem;
    }
    .site-title { font-size: 1.4rem; }
    .site-title small { font-size: .65rem; letter-spacing: .12em; }
    .site-nav {
        width: 100%;
        gap: .45rem 1.1rem;
        font-size: .92rem;
        justify-content: flex-start;
    }
    /* Tap-Targets etwas grosszuegiger */
    .site-nav a { padding: .15rem 0 4px; }
}

main { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.lead {
    font-family: var(--serif);
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 50rem;
    margin: 0 0 2.2rem;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); }
h1 { font-size: 2.4rem; line-height: 1.15; margin: 0 0 .6rem; }
h2 { font-size: 1.6rem; margin: 2.2rem 0 .8rem; }

.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 780px) {
    .hero { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
.hero__cover {
    text-align: center;
}
.hero__cover img {
    max-width: 100%;
    max-height: 460px;
    box-shadow: var(--shadow);
    border-radius: 2px;
    background: #fff;
}
.hero__cover figcaption {
    font-size: .82rem;
    color: var(--ink-soft);
    margin-top: .6rem;
    font-style: italic;
}

.topics {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.topics li {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 1rem 1.1rem;
    border-radius: 4px;
}
.topics b { display: block; font-family: var(--serif); font-size: 1.15rem; margin-bottom: .25rem; }
.topics span { font-size: .85rem; color: var(--ink-soft); }
.topics li.is-stub { opacity: .65; }
.topics li.is-stub::after {
    content: "in Vorbereitung";
    display: inline-block;
    font-size: .7rem;
    background: var(--border);
    color: var(--ink-soft);
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: .4rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1.8rem 0;
}
.thumb {
    display: block;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    transition: transform .12s ease, box-shadow .12s ease;
    color: var(--ink-soft);
}
.thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent-soft); }
.thumb img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: #fff;
}
.thumb__num { display: block; font-size: .78rem; padding: .35rem .4rem .5rem; letter-spacing: .03em; }
.thumb.is-cover .thumb__num { color: var(--accent); }

.viewer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}
@media (min-width: 980px) {
    .viewer { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
}
.viewer__page {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: .6rem;
    text-align: center;
}
.viewer__page img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.viewer__page a.full {
    display: inline-block;
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--ink-soft);
}

.viewer__side {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem 1.1rem;
    font-size: .9rem;
}
.viewer__side dl { margin: 0; }
.viewer__side dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-top: .8rem; }
.viewer__side dt:first-child { margin-top: 0; }
.viewer__side dd { margin: .15rem 0 0; }

.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1.4rem 0 0;
    font-size: .95rem;
}
.pager a, .pager span {
    flex: 1;
    padding: .6rem .9rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 3px;
    text-align: center;
}
.pager a.prev { text-align: left; }
.pager a.next { text-align: right; }
.pager span { color: var(--ink-soft); flex: 0 0 auto; min-width: 6rem; }
.pager .disabled { background: transparent; border-color: transparent; color: transparent; }

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
    margin-top: 4rem;
    padding: 1.4rem 0;
    font-size: .8rem;
    color: var(--ink-soft);
}
.site-footer__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
}

.note {
    background: #fffaf0;
    border-left: 3px solid var(--accent-soft);
    padding: .8rem 1rem;
    font-size: .88rem;
    color: var(--ink-soft);
    margin: 1.6rem 0;
}

.data-table {
    border-collapse: collapse;
    margin: 1.6rem 0;
    font-family: var(--sans);
    font-size: .92rem;
    min-width: min(420px, 100%);
}
.data-table th,
.data-table td {
    padding: .4rem .9rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.data-table th:first-child,
.data-table td:first-child { text-align: left; }
.data-table thead th {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
    border-bottom: 2px solid var(--border);
}

/* ----- Chapter index ----- */
.chapter-list { list-style: none; padding: 0; margin: 1.8rem 0; }
.chapter-list__part {
    margin: 2rem 0 .8rem;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.chapter-list__part:first-child { margin-top: 0; }
.chapter-list li {
    display: grid;
    grid-template-columns: 2.2rem 1fr auto;
    gap: .8rem;
    align-items: baseline;
    padding: .55rem .3rem;
    border-bottom: 1px solid var(--border);
}
.chapter-list li:last-child { border-bottom: none; }
.chapter-list .num {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--ink-soft);
    text-align: right;
}
.chapter-list .title { font-family: var(--serif); font-size: 1.05rem; }
.chapter-list .pages { font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chapter-list li.is-stub .title { color: var(--ink-soft); }
.chapter-list li.is-stub::after {
    content: "Stub";
    font-size: .68rem;
    background: var(--border);
    color: var(--ink-soft);
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: .4rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    grid-column: 3;
}
.chapter-list li.is-active .title a { color: var(--accent); font-weight: 600; }

/* ----- Chapter body ----- */
.chapter-meta {
    font-size: .85rem;
    color: var(--ink-soft);
    margin: -.4rem 0 1.6rem;
    font-style: italic;
}
.chapter-meta a { color: var(--ink-soft); border-bottom: 1px dotted currentColor; }

.chapter-body {
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--ink);
    max-width: 44rem;
    margin: 0 auto;
}
.chapter-body p { margin: 0 0 1rem; text-align: justify; hyphens: auto; }
.chapter-body p.lead-paragraph { font-size: 1.2rem; line-height: 1.55; }
.chapter-body p.lead-paragraph::first-letter {
    font-family: var(--serif);
    font-size: 3.4rem;
    line-height: .9;
    float: left;
    padding: .4rem .55rem 0 0;
    color: var(--accent);
    font-weight: 600;
}
.chapter-body h2 {
    font-family: var(--serif);
    font-size: 1.45rem;
    margin: 2.2rem 0 .9rem;
    color: var(--accent);
}
.chapter-body figure {
    margin: 1.6rem 0;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: .7rem .7rem .2rem;
    border-radius: 3px;
    box-shadow: var(--shadow);
}
.chapter-body figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.chapter-body figure a {
    display: block;
    cursor: zoom-in;
    border: none;
    line-height: 0;        /* kein Rest-Spacing unter dem img */
}
.chapter-body figure a:hover img { opacity: .94; transition: opacity .12s ease; }
.hero__cover a {
    display: block;
    cursor: zoom-in;
    border: none;
    line-height: 0;
}
.hero__cover a:hover img { opacity: .94; transition: opacity .12s ease; }
.chapter-body figcaption {
    font-family: var(--sans);
    font-size: .84rem;
    color: var(--ink-soft);
    text-align: center;
    margin: .6rem 0 .4rem;
    font-style: italic;
}
.chapter-body figure.float-right,
.chapter-body figure.float-left {
    max-width: 320px;
    margin: .3rem 0 1rem;
}
@media (min-width: 880px) {
    .chapter-body figure.float-right { float: right; margin: .3rem 0 1rem 1.6rem; }
    .chapter-body figure.float-left  { float: left;  margin: .3rem 1.6rem 1rem 0; }
}
.chapter-body figure.wide { max-width: 100%; }
.chapter-body ol.children-list,
.chapter-body ul.children-list {
    font-family: var(--sans);
    font-size: .98rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 1rem 1.2rem 1rem 2.6rem;
    border-radius: 3px;
    margin: 1.4rem 0;
}
.chapter-body .children-list li { margin: .15rem 0; }

.chapter-nav {
    margin: 3rem 0 0;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    font-size: .92rem;
}
.chapter-nav a { display: block; padding: .6rem .9rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 3px; }
.chapter-nav a.prev { text-align: left; }
.chapter-nav a.next { text-align: right; }
.chapter-nav a small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: .15rem; }
.chapter-nav .scan-link { font-size: .8rem; color: var(--ink-soft); text-align: center; }
.chapter-nav .disabled { background: transparent; border-color: transparent; visibility: hidden; }

/* ----- Story navigation cards (home page) ----- */
.story-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2.4rem 0;
}
@media (min-width: 780px) {
    .story-nav { grid-template-columns: repeat(3, 1fr); }
}
.story-nav a {
    display: block;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.2rem 1.3rem 1.4rem;
    color: inherit;
    border-bottom: 1px solid var(--border);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.story-nav a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--accent-soft);
}
.story-nav .title {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--accent);
    margin-bottom: .35rem;
    display: block;
}
.story-nav .blurb {
    font-size: .92rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* ----- "Letzte Updates" als diskretes <details>-Element ----- */
.updates {
    margin: 2.4rem 0 0;
}
.updates > summary {
    cursor: pointer;
    font-family: var(--sans);
    font-size: .85rem;
    color: var(--ink-soft);
    padding: .35rem 0;
    list-style: none;
    user-select: none;
}
.updates > summary::-webkit-details-marker { display: none; }
.updates > summary::before {
    content: "▸";
    color: var(--accent);
    display: inline-block;
    margin-right: .35em;
    transition: transform .15s ease;
}
.updates[open] > summary::before {
    transform: rotate(90deg);
}
.updates > summary .meta {
    color: var(--ink-soft);
    opacity: .75;
}
.updates > summary:hover { color: var(--accent); }
.updates ul {
    list-style: none;
    padding: .7rem 0 .2rem 1rem;
    margin: .3rem 0 0 .35rem;
    font-size: .88rem;
    line-height: 1.55;
    border-left: 2px solid var(--border);
    color: var(--ink-soft);
}
.updates li {
    padding: .4rem 0;
}
.updates li + li {
    border-top: 1px dotted var(--border);
}
.updates time {
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--accent);
    margin-right: .25em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.updates code {
    font-family: var(--sans);
    font-size: .88em;
    background: var(--bg-alt);
    padding: 1px 5px;
    border-radius: 2px;
}

/* ----- Section nav within content pages ----- */
.section-nav {
    margin: 3rem 0 0;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    font-size: .92rem;
}
.section-nav a {
    display: block; padding: .8rem 1rem;
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 3px;
}
.section-nav a small {
    display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-soft); margin-bottom: .15rem;
}
.section-nav a.prev { text-align: left; }
.section-nav a.next { text-align: right; }
.section-nav a.full { grid-column: 1 / -1; text-align: center; }

/* ── Quellenmarkierung: Pottmeyer-Default vs. eigene Ergänzung ────────────
   Konvention: .chapter-body ist per Default in Cormorant-Garamond-Serif —
   das ist die "literarische" Pottmeyer-Stimme (siehe Regel weiter oben).
   Eigene editorielle Passagen werden mit .eigen markiert; dann wechselt
   der Block auf die System-Sans und signalisiert dem Leser, dass es sich
   um redaktionellen Kommentar handelt, nicht um Pottmeyer.
   - .eigen auf einem einzelnen <p> oder <div> markiert eine Einsprengsel-
     Passage in eigener Stimme; sie bekommt zusätzlich eine dezente
     linke Ader, damit die Trennung auch ohne Schriftvergleich greifbar
     ist.
   - .chapter-body.eigen am Wrapper schaltet die ganze Seite auf die
     editorielle Stimme — sinnvoll, wenn die Seite kein Pottmeyer-
     Material enthält (z. B. /joseph-schilgen/ oder /erinnerungsorte/);
     die Linien-Markierung ist dort redundant und entfällt. */
.chapter-body.eigen,
.chapter-body .eigen {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
}
.chapter-body.eigen h2,
.chapter-body.eigen h3 {
    font-family: var(--serif);  /* Überschriften bleiben site-weit serif */
}
.chapter-body p.eigen,
.chapter-body div.eigen {
    border-left: 2px solid var(--border);
    padding-left: 1rem;
}
.chapter-body.eigen p,
.chapter-body.eigen div {
    border-left: none;
    padding-left: 0;
}

/* ── Kleine Quellennachweis-Zeile innerhalb eines Inhalts­blocks ─────────
   <p class="cite">…</p> → für unaufdringliche Quellen-/Belegen-Hinweise
   am Ende eines Abschnitts, z. B. „Diese Angaben folgen …". */
.chapter-body p.cite {
    font-size: .82rem;
    color: var(--ink-soft);
    font-style: italic;
    border-left: 2px dotted var(--border);
    padding-left: .8rem;
    margin: 1rem 0 1.6rem;
}