/* Blog-Prose Styles – clean, readable, responsive */ .prose { color: #111827; line-height: 1.75; max-width: 75ch; margin: 0 auto; font-size: 1.05rem; } /* Headings (einzig gültiger Block, keine Dopplungen) */ .prose h1 { color: #0b1220; /* sehr dunkles Grau/fast schwarz */ font-weight: 800; line-height: 1.2; font-size: 2.25rem; margin-top: 0; margin-bottom: 0.6em; } .prose h2, .prose h3, .prose h4 { color: #0f172a; font-weight: 800; line-height: 1.3; margin-top: 2em; margin-bottom: 0.6em; } .prose h2 { font-size: 1.75rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3rem; } .prose h3 { font-size: 1.35rem; } .prose h4 { font-size: 1.15rem; font-weight: 700; } /* ... (deine bestehenden Regeln für p, a, lists, hr, blockquote, code, pre, img, table, details etc. bleiben wie gehabt) ... */ /* Responsive Tuning */ @media (min-width: 768px) { .prose { font-size: 1.125rem; } .prose h1 { font-size: 2.75rem; } .prose h2 { font-size: 2rem; } .prose h3 { font-size: 1.5rem; } } /* ====== DARK THEME SAUBER SCOOPEN ====== */ /* Nur wenn ein Dark-Theme-Elternelement gesetzt ist (z. B. ) */ .theme-dark .article-content, .theme-dark .blog-content, .theme-dark .post-content, .theme-dark .single-post, .theme-dark .single-blog { background: #0b0b0d !important; color: #f5f6f8 !important; } .theme-dark .article-content h1, .theme-dark .article-content h2, .theme-dark .article-content h3, .theme-dark .article-content h4, .theme-dark .article-content h5, .theme-dark .article-content h6, .theme-dark .blog-content h1, .theme-dark .blog-content h2, .theme-dark .blog-content h3, .theme-dark .blog-content h4, .theme-dark .blog-content h5, .theme-dark .blog-content h6 { color: #ffffff !important; } .theme-dark .article-content p, .theme-dark .blog-content p, .theme-dark .post-content p { color: #e5e7eb !important; line-height: 1.7; } .theme-dark .article-content a, .theme-dark .blog-content a { color: var(--color-accent, #d4af37) !important; text-decoration: underline; text-underline-offset: 2px; } .theme-dark .article-content a:hover, .theme-dark .blog-content a:hover { color: var(--color-brand-600, #dc2626) !important; } .theme-dark .article-content time, .theme-dark .blog-content time, .theme-dark .article-content .meta, .theme-dark .blog-content .meta { color: #9aa1ad !important; } .theme-dark .article-content strong, .theme-dark .blog-content strong { color: #fff !important; font-weight: 700; } .theme-dark .article-content img, .theme-dark .blog-content img { border-radius: 1rem; margin-top: 1rem; margin-bottom: 1rem; box-shadow: 0 0 20px rgba(0,0,0,.25); } /* Tailwind-Typography-ähnliche Token nur im Dark-Mode */ .theme-dark .prose, .theme-dark .prose.prose-invert, .theme-dark .post-content .prose, .theme-dark .blog-content .prose, .theme-dark .single-post .prose, .theme-dark .single-blog .prose { --tw-prose-body: #e5e7eb; --tw-prose-headings: #ffffff; --tw-prose-links: #d4af37; --tw-prose-links-hover:#ffffff; --tw-prose-bold: #ffffff; --tw-prose-quotes: #f5f6f8; --tw-prose-captions: #9aa1ad; color: var(--tw-prose-body) !important; } /* WICHTIG: Keine globale "text-*-to-white"-Erzwingung mehr */ .theme-dark .post-content .text-slate-900, .theme-dark .post-content .text-gray-900, .theme-dark .post-content .text-zinc-900, .theme-dark .post-content .text-black, .theme-dark .blog-content .text-slate-900, .theme-dark .blog-content .text-gray-900, .theme-dark .blog-content .text-zinc-900, .theme-dark .blog-content .text-black { color: #ffffff !important; } /* ===== Blog two-column layout ===== */ .post-layout{ display:grid; grid-template-columns: 340px 1fr; gap: 2rem; align-items:start; } @media (max-width: 1024px){ .post-layout{ grid-template-columns: 1fr; } } /* Cover figure (left column) */ .post-cover{ position:sticky; top:6rem; /* stays visible while reading on desktop */ } .post-cover figure{ margin:0; } .post-cover img{ display:block; width:100%; height:auto; border-radius: 16px; box-shadow: 0 12px 28px rgba(0,0,0,.12); } .post-cover figcaption{ margin-top:.6rem; font-size:.9rem; color:#6b7280; } /* Prose refinements */ .prose .lead{ font-size:1.125em; line-height:1.75; color:#111827; } .prose p{ text-wrap:pretty; } .prose blockquote{ border-left: 4px solid #e5e7eb; padding:.75rem 1rem; background:#fafafa; border-radius:.5rem; } .prose figure{ margin:1.25rem 0; } .prose figcaption{ font-size:.9rem; color:#6b7280; text-align:center; margin-top:.4rem; } .prose img{ border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.1); } /* Optional: first paragraph as lead if it has .lead */ .prose > p:first-of-type.lead{ margin-top:.25rem; } /* ==== Blog article layout (wins vs theme) ==== */ .post-content .blog-grid{ display:grid; grid-template-columns: 360px minmax(0,1fr); gap:2rem; align-items:start; } .post-content .blog-grid.no-cover{ grid-template-columns: 1fr; } @media (max-width: 1024px){ .post-content .blog-grid, .post-content .blog-grid.no-cover{ grid-template-columns: 1fr; } } /* Sticky cover on desktop */ .post-content .blog-cover{ position:sticky; top:6.25rem; } .post-content .blog-cover figure{ margin:0; } .post-content .blog-cover img{ display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.12); background:#fff; } .post-content .blog-cover figcaption{ margin-top:.6rem; font-size:.9rem; color:#6b7280; } /* Prose refinements & readable colors */ .post-content .prose h1, .post-content .prose h2, .post-content .prose h3, .post-content .prose h4, .post-content .prose h5, .post-content .prose h6{ color:#0b1220 !important; } .post-content .prose p, .post-content .prose li, .post-content .prose strong, .post-content .prose em{ color:#111827 !important; } .post-content .prose a{ color:#2563eb !important; text-underline-offset:2px; } .post-content .prose a:hover{ color:#1d4ed8 !important; } .post-content .prose .lead{ font-size:1.125em; line-height:1.75; } .post-content .prose blockquote{ border-left:4px solid #e5e7eb; padding:.75rem 1rem; background:#fafafa; border-radius:.5rem; color:#374151; } .post-content .prose img{ border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.1); } .post-content .prose figure{ margin:1.25rem 0; } .post-content .prose figcaption{ font-size:.9rem; color:#6b7280; text-align:center; margin-top:.4rem; }