/* ==========================================================================
   blog_shell.css — CD-A3c-Pilot (17.09.2026)
   Externalisiert die 5 Inline-<style>-Blöcke aus blog.php (Voraussetzung für
   CSP `style-src-elem 'self'`, CD-A3c). Bewusst UNLAYERED wie die Original-
   Blöcke: mehrere Regeln sind dokumentierte lokale Heiler, die gegen
   design_system/default antreten (z. B. .line-clamp-2 vs. display:flow-root)
   — ein @layer hier würde die Kaskade ändern.
   Ladeordnung-Vertrag: NACH default.css (dort, wo default geladen wird),
   an den 404-Shells nach design_system (keine Konkurrenz-Styles dort).
   Alle Historien-Kommentare der Blöcke sind unverändert übernommen.
   ========================================================================== */

/* --- blog_mobile_dock() (ehem. blog.php:176) --- */
.mfb-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: none; background: rgba(11, 15, 25, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 4px 6px calc(6px + env(safe-area-inset-bottom)); }
.mfb-dock a { flex: 1 1 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #94a3b8; font-size: 0.62rem; font-weight: 600; text-decoration: none; }
.mfb-dock a span:first-child { font-size: 1.05rem; line-height: 1; }
.mfb-dock a.active, .mfb-dock a:hover { color: #00f0ff; }
@media (max-width: 767.98px) {
    .mfb-dock { display: flex; }
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* --- blog_legal_footer() (ehem. blog.php:207; W2-Rest 12.09.: §5-DDG-Mindest-Footer,
       Farben nach mfb-dock-Muster) --- */
.mfb-legal-footer { border-top: 1px solid rgba(255,255,255,0.14); background: rgba(11,15,25,0.6); padding: 1.1rem 0.75rem calc(1.1rem + env(safe-area-inset-bottom)); }
.mfb-legal-footer a { color: #94a3b8; text-decoration: none; }
.mfb-legal-footer a:hover, .mfb-legal-footer a:focus-visible { color: #00f0ff; text-decoration: underline; }
.mfb-legal-footer .sep { color: rgba(148,163,184,0.4); }
@media (max-width: 767.98px) { .mfb-legal-footer { padding-bottom: calc(1.1rem + 66px + env(safe-area-inset-bottom)); } }

/* --- Analysten-Leaderboard-Shell (ehem. blog.php:335) --- */
body { background: #070c18; color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }
.hub-card { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); border: 1px solid rgba(0, 240, 255, 0.25); border-radius: 1.25rem; }

/* --- Blog-Post-Shell (ehem. blog.php:575) --- */
body { background: #070c18; color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }
.blog-post-card { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); border: 1px solid rgba(0, 240, 255, 0.25); border-radius: 1.25rem; box-shadow: 0 10px 35px rgba(0, 240, 255, 0.08); }
.quote-source-box { background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 0.85rem; }
.peer-verified-banner { background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(16, 185, 129, 0.15)); border: 1px solid rgba(234, 179, 8, 0.5); border-radius: 1rem; }
.hover-cyan:hover { color: #00f0ff !important; }
.article-body { font-size: 1.05rem; line-height: 1.85; color: #e2e8f0; }
.article-body p { margin-bottom: 1.25rem; }
.article-body pre { background: #0b1120; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 1rem; overflow-x: auto; position: relative; }
.article-body code { color: #38bdf8; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* --- Blog-Hub-Shell (ehem. blog.php:864) --- */
body { background: #070c18; color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }
.blog-hub-card { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1rem; transition: transform 0.2s, border-color 0.2s; }
.blog-hub-card:hover { transform: translateY(-3px); border-color: rgba(0, 240, 255, 0.4); }
.nav-chip { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); color: #cbd5e1; font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 9999px; text-decoration: none; transition: all 0.2s ease; }
.nav-chip:hover, .nav-chip.active { background: #075985; color: #fff; border-color: #075985; } /* W21: #0284c7+Weiß = 4.09:1 (13.6px) — Sky-800 trägt 7:1 */
/* Welle 2 (05.09.): .line-clamp-2 aus design_system.css (Layer components)
   verlor hier gegen display:flow-root — 3. Teaser-Zeile stand abgeschnitten
   im Kartenzwischenraum und gab mit der Meta-Zeile den Overlap-Eindruck.
   Lokaler unlayered-Heiler stellt den echte Box-Clamp wieder her. */
.blog-hub-card p.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Welle 3: Server-Markdown-Renderer (blog_render_content_html) */
.blog-code-block { background: #0b1120; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.6rem; padding: 1rem; overflow-x: auto; margin: 0.75rem 0; }
/* Welle 6 (FIX-8): Code-Strings im Teaser („sudo sysctl -w …") sprengten
   ohne Break-Recht die min-content-Breite der Karten — das ganze Grid
   lief über den Viewport und schnitt jede Karte rechts ab („2 Min"-Badge
   halb außerhalb). `anywhere` (nicht break-word!) verkleinert die
   min-content-Breite und damit die Flex-Spalte. */
.blog-hub-card, .blog-post-card { overflow-wrap: anywhere; min-width: 0; }
.blog-hub-card .extra-small.text-muted { flex-shrink: 0; }
.blog-code-block code { color: #7dd3fc; font-size: 0.85rem; }
.blog-inline-code { background: rgba(6, 182, 212, 0.12); color: #67e8f9; padding: 0.1rem 0.35rem; border-radius: 0.35rem; }
.blog-quote { border-left: 3px solid #06b6d4; padding: 0.4rem 0.9rem; color: #94a3b8; font-style: italic; margin: 0.75rem 0; }

/* MFF-3.4 (28.09.2026): Code-Paletten 300/400 (#38bdf8/#7dd3fc/#67e8f9) lagen
   im Light auf Weiß bei ~2:1 — 600/700er-Pendants auf Light-Glas. */
html[data-bs-theme="light"] .article-body code { color: #0369a1; }
html[data-bs-theme="light"] .blog-code-block code { color: #075985; }
html[data-bs-theme="light"] .blog-inline-code { color: #0e7490; }