/* ============================================================
   Stile für von Ghost gerendeten Redaktionsinhalt (Pages/Posts) –
   getrennt von den handgebauten Marketing-Sektionen, da Ghost hierfür
   eigenes, generisches HTML ausgibt (Editor-Output).
   ============================================================ */

.post-content { color: var(--text-dim); font-size: var(--text-base); }
.post-content > * + * { margin-top: var(--space-6); }
.post-content h2 { color: var(--text); font-size: var(--text-2xl); margin-top: var(--space-16); }
.post-content h3 { color: var(--text); font-size: var(--text-xl); margin-top: var(--space-12); }
.post-content p { line-height: var(--leading-normal); }
.post-content a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content li + li { margin-top: var(--space-2); }
.post-content img { border-radius: var(--radius-lg); border: 1px solid var(--border); }
.post-content figcaption { font-size: var(--text-xs); color: var(--text-faint); text-align: center; margin-top: var(--space-3); }
.post-content blockquote { border-left: 3px solid var(--indigo); padding-left: var(--space-6); font-style: italic; color: var(--text); }
.post-content hr { border: none; border-top: 1px solid var(--border); margin: var(--space-12) 0; }
.post-content code { background: var(--surface-2); padding: .15em .4em; border-radius: 4px; }
.post-content pre code { background: none; padding: 0; }

/* Koenig-Editor: Bilder mit "wide"/"full" Layout benoetigen diese Klassen,
   sonst werden sie ungestylt/abgeschnitten dargestellt (Ghost-Vorgabe). */
.kg-width-wide { width: 100%; max-width: calc(var(--container-narrow) + 160px); margin-left: auto; margin-right: auto; }
.kg-width-full { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: none; }
.kg-width-full img { border-radius: 0; }

/* --- Blog-Karten (Index/Tag-Archiv) --- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: block; }
.post-card .thumb { aspect-ratio: 16/10; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-bottom: var(--space-4); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .tag { font-size: var(--text-xs); color: var(--cyan); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.post-card h3 { font-size: var(--text-lg); margin-top: var(--space-2); color: var(--text); }
.post-card .excerpt { font-size: var(--text-sm); color: var(--text-dim); margin-top: var(--space-2); }
.post-card .meta { font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-4); }

.pagination { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-16); }

.empty-state { text-align: center; padding: var(--space-24) 0; color: var(--text-faint); }