/* ====================================================================
   blog.css — Artikelseiten und Blogübersicht.
   Baut auf design.css (Tokens) und landing.css (nav/foot/brand) auf und
   fügt nur die Typografie des Fließtexts hinzu. Keine eigenen Farben:
   alles kommt aus den --otms-Tokens, damit heller und dunkler Modus und
   alle drei Paletten ohne Sonderregeln funktionieren.
   ==================================================================== */

.blog-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--otms-pad);
}

/* --- Kopf einer Artikelseite ------------------------------------- */
.post-head {
    max-width: 44rem;
    margin: clamp(32px, 6vw, 72px) auto clamp(24px, 4vw, 40px);
}
.post-kicker {
    font-family: var(--otms-f-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--otms-ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    margin: 0 0 14px;
}
.post-kicker a { color: inherit; }
.post-head h1 {
    font-family: var(--otms-f-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 5.4vw, 3.4rem);
    line-height: 1.04;
    margin: 0 0 16px;
    text-wrap: balance;
}
.post-standfirst {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    line-height: 1.5;
    color: var(--otms-ink-soft);
    margin: 0;
    max-width: 38rem;
}

/* --- Fließtext ---------------------------------------------------- */
.post {
    max-width: 38rem;      /* ~65 Zeichen */
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.68;
}
.post > * + * { margin-top: 1.15em; }
.post h2 {
    font-family: var(--otms-f-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    line-height: 1.12;
    margin-top: 2.2em;
    padding-top: .6em;
    border-top: 1px solid var(--otms-line);
    text-wrap: balance;
}
.post h3 {
    font-family: var(--otms-f-body);
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 1.9em;
}
.post ul, .post ol { padding-left: 1.3em; }
.post li + li { margin-top: .45em; }
.post strong { font-weight: 700; }
.post a { color: var(--otms-accent); text-underline-offset: 3px; }
.post blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 14px 18px;
    border-left: 3px solid var(--otms-line-strong);
    background: var(--otms-bg-2);
    color: var(--otms-ink);
}
.post blockquote p { margin: 0; }
.post blockquote p + p { margin-top: .7em; }

/* Tabellen dürfen breiter sein als die Textspalte und scrollen notfalls. */
.post-table {
    overflow-x: auto;
    margin-top: 1.6em;
    margin-inline: calc(-1 * clamp(0px, 3vw, 48px));
    padding-inline: clamp(0px, 3vw, 48px);
}
.post table {
    border-collapse: collapse;
    width: 100%;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
.post th, .post td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--otms-line);
    vertical-align: top;
}
.post thead th {
    font-family: var(--otms-f-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--otms-ink-soft);
    border-bottom: 2px solid var(--otms-line-strong);
    white-space: nowrap;
}
.post tbody tr:last-child td { border-bottom: none; }

/* --- Abbinder unter dem Artikel ----------------------------------- */
.post-end {
    max-width: 38rem;
    margin: clamp(40px, 7vw, 80px) auto 0;
    padding: 22px;
    border: 1px solid var(--otms-line);
    background: var(--otms-surface);
}
.post-end h2 {
    font-family: var(--otms-f-display);
    font-size: 1.4rem;
    margin: 0 0 8px;
    border: 0;
    padding: 0;
}
.post-end p { margin: 0 0 14px; color: var(--otms-ink-soft); }

.post-more {
    max-width: 38rem;
    margin: clamp(32px, 5vw, 56px) auto clamp(48px, 8vw, 96px);
}
.post-more h2 {
    font-family: var(--otms-f-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--otms-ink-soft);
    margin: 0 0 12px;
}
.post-more ul { list-style: none; margin: 0; padding: 0; }
.post-more li + li { margin-top: 10px; }
.post-more a { font-weight: 600; }

/* --- Übersichtsseite ---------------------------------------------- */
.blog-head {
    max-width: 44rem;
    margin: clamp(32px, 6vw, 72px) auto clamp(28px, 5vw, 52px);
}
.blog-head h1 {
    font-family: var(--otms-f-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.03;
    margin: 0 0 14px;
}
.blog-head p { font-size: 1.1rem; color: var(--otms-ink-soft); margin: 0; max-width: 36rem; }

.post-list { list-style: none; margin: 0 0 clamp(48px, 8vw, 96px); padding: 0; }
.post-list li { border-top: 1px solid var(--otms-line); }
.post-list li:last-child { border-bottom: 1px solid var(--otms-line); }
.post-list a {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 4px 28px;
    padding: 22px 0;
    color: inherit;
    text-decoration: none;
    align-items: baseline;
}
.post-list a:hover h2 { color: var(--otms-accent); }
.post-list time {
    font-family: var(--otms-f-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--otms-ink-soft);
}
.post-list h2 {
    font-family: var(--otms-f-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    line-height: 1.1;
    margin: 0 0 6px;
    text-wrap: balance;
}
.post-list p { margin: 0; color: var(--otms-ink-soft); font-size: .98rem; line-height: 1.5; }

@media (max-width: 640px) {
    .post-list a { grid-template-columns: 1fr; gap: 6px; }
    .post-list time { order: -1; }
}