/* The article: a reading column of about 68 characters with generous leading, so a
   long post reads like a page, not like a form. Everything inside follows this
   width -- the global 42rem cap on paragraphs, lists and boxes is lifted here, or
   the text would stop short of the column it sits in. */
.post {
    max-width: 68ch;
    margin-top: var(--space-4);
    line-height: 1.75;
}

.post ::deep :is(p, ul, ol, blockquote, .aufruf, .hinweis) {
    max-width: none;
}

/* Date above the title as a quiet meta line, with the same calendar icon as on the
   post cards. The title follows directly, so the gap between them stays small
   (h1 carries no top margin globally). */
.post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
    color: var(--color-text-soft);
    font-size: 0.95rem;
    font-weight: 600;
}

.post-meta ::deep .icon {
    color: var(--color-accent-dark);
}

/* The first paragraph as the lead: larger and in the soft tone, so it reads as an
   introduction. Pure CSS on the editor's Markdown -- if a post starts with a
   heading or a list instead, there simply is no lead. Same text colour token as
   the rest, so it keeps AA contrast in both schemes. */
.post-body ::deep > p:first-child {
    color: var(--color-text-soft);
    font-size: 1.2rem;
    line-height: 1.65;
}

/* Older/newer post at the end: two cards side by side, older on the left, newer on
   the right. The grid keeps each in its column even if the other is missing. Hover
   = border and shadow, nothing moves. */
.post-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    max-width: 68ch;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.post-pager-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.post-pager-link:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-hover);
    color: var(--color-text);
}

.post-pager-next {
    grid-column: 2;
    text-align: right;
}

.post-pager-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-soft);
    font-size: 0.85rem;
    font-weight: 700;
}

.post-pager-next .post-pager-label {
    align-self: flex-end;
}

.post-pager-title {
    color: var(--color-brand);
    font-weight: 700;
    line-height: 1.3;
}

/* On a phone the two cards stack: a half-width card would squeeze a long title
   into a narrow column. Older first, as in the wide layout. */
@media (max-width: 40rem) {
    .post-pager {
        grid-template-columns: 1fr;
    }

    .post-pager-next {
        grid-column: 1;
    }
}