/* Blog-spezifische Tokens (kein Aequivalent im Design-System) */
 :root { --green: #333338; --green-dim: rgba(0,0,0,0.04); --red: #6a6a72; --red-dim: rgba(0,0,0,0.03); }
 html.dark-mode { --green: #e0e0e4; --green-dim: rgba(255,255,255,0.04); --red: #888890; --red-dim: rgba(255,255,255,0.03); }
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; background: var(--bg); }
 ::selection { background: rgba(0,0,0,0.08); color: var(--t1); }
 html.dark-mode ::selection { background: rgba(255,255,255,0.12); color: #fff; }
 body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.7; background: var(--bg); color: var(--t1); overflow-x: hidden; }
 .blog-hero { padding: 140px 24px 80px; text-align: center; max-width: 860px; margin: 0 auto; position: relative; }
 .blog-hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 70%); pointer-events: none; }
 html.dark-mode .blog-hero::before { background: radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 70%); }
 .blog-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; background: var(--green-dim); color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 32px; border-radius: 100px; border: 1px solid rgba(0,0,0,0.08); }
 html.dark-mode .blog-hero-badge { border-color: rgba(255,255,255,0.08); }
 .blog-hero-badge::before { content: ''; width: 6px; height: 6px; background: var(--t2); border-radius: 50%; animation: pulse-dot 2s ease infinite; }
 @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
 .blog-hero h1 { font-size: clamp(32px, 5.5vw, 52px); font-weight: 900; line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.03em; }
 .blog-hero h1 .highlight { background: linear-gradient(135deg, #111114, #333338); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
 html.dark-mode .blog-hero h1 .highlight { background: linear-gradient(135deg, #fff, #e0e0e4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
 .blog-hero-sub { font-size: 18px; color: var(--t3); max-width: 620px; margin: 0 auto 28px; line-height: 1.7; }
 .blog-meta { font-size: 13px; color: var(--t4); display: flex; align-items: center; justify-content: center; gap: 16px; }
 .blog-meta-divider { width: 4px; height: 4px; background: var(--t4); border-radius: 50%; }
 .blog-content { max-width: 720px; margin: 0 auto; padding: 0 24px 80px; }
 .blog-content h2 { font-size: 28px; font-weight: 800; margin: 72px 0 20px; line-height: 1.25; letter-spacing: -0.02em; position: relative; padding-top: 32px; }
 .blog-content h2::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--t3), transparent); border-radius: 2px; }
 .blog-content p { margin-bottom: 20px; font-size: 16.5px; line-height: 1.85; color: var(--t2); }
 .blog-content strong { color: var(--t1); font-weight: 600; }
 .blog-quote { position: relative; padding: 32px 32px 32px 36px; margin: 40px 0; background: var(--surface); border-radius: 16px; border: 1px solid var(--border); font-size: 19px; font-style: italic; line-height: 1.65; color: var(--t1); overflow: hidden; }
 .blog-quote::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, var(--green), rgba(0,0,0,0.08)); border-radius: 4px 0 0 4px; }
 html.dark-mode .blog-quote::before { background: linear-gradient(180deg, var(--green), rgba(255,255,255,0.12)); }
 .blog-quote::after { content: '"'; position: absolute; top: 12px; right: 20px; font-size: 80px; font-style: normal; font-weight: 900; color: rgba(0,0,0,0.04); line-height: 1; }
 html.dark-mode .blog-quote::after { color: rgba(255,255,255,0.04); }
 .blog-quote cite { display: block; font-style: normal; font-size: 13px; color: var(--t4); margin-top: 14px; font-weight: 500; }
 .blog-cta { text-align: center; padding: 72px 32px; margin: 72px auto 80px; max-width: 720px; position: relative; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
 .blog-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--t4), transparent); }
 .blog-cta::after { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 400px; height: 300px; background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 70%); pointer-events: none; }
 html.dark-mode .blog-cta::after { background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%); }
 .blog-cta h2 { font-size: 28px; font-weight: 900; margin-bottom: 12px; position: relative; z-index: 1; }
 .blog-cta p { color: var(--t3); margin-bottom: 28px; position: relative; z-index: 1; }
 .cta-btn { display: inline-flex; align-items: center; padding: 14px 32px; background: #111114; color: #fff; font-weight: 700; font-size: 15px; border-radius: 100px; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; position: relative; z-index: 1; }
 html.dark-mode .cta-btn { background: #fff; color: #0e0e11; }
 .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
 html.dark-mode .cta-btn:hover { box-shadow: 0 8px 30px rgba(255,255,255,0.15); }
 .cta-secondary { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--t4); text-decoration: none; transition: color 0.3s; position: relative; z-index: 1; }
 .cta-secondary:hover { color: var(--t2); }
 .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
 .fade-up.visible { opacity: 1; transform: translateY(0); }
 @media (max-width: 768px) {
  .blog-hero { padding: 100px 18px 48px; }
  .blog-content { padding: 0 18px 60px; }
  .blog-cta { margin: 40px 18px 60px; padding: 48px 24px; }
 }