/* ════════════════════════════════════════════════════════════
   NexFlow Blog Post — Shared Styles
   Verwendet von allen Blog-Artikeln in /blog/
   ════════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --graphite:#1F2937;--graphite-light:#374151;--graphite-muted:#4B5563;
  --sand:#D9D2C5;--sand-light:#E8E3DA;--sand-lighter:#F0EDE7;--sand-pale:#F7F5F1;
  --teal:#2F6B73;--teal-dark:#245860;--teal-light:#3A8490;--teal-pale:rgba(47,107,115,0.08);
  --white:#FFFFFF;--text:#1F2937;--text-secondary:#4B5563;--text-tertiary:#6B7280;
  --text-on-dark:rgba(255,255,255,0.92);--text-on-dark-muted:rgba(255,255,255,0.55);
  --border:rgba(31,41,55,0.1);--border-on-dark:rgba(255,255,255,0.1);
  --radius:10px;--radius-lg:16px;--radius-xl:20px;
  --section-gap:120px;--max-width:1160px;--reading-width:720px;
  --shadow-sm:0 1px 3px rgba(31,41,55,0.04);--shadow-md:0 4px 20px rgba(31,41,55,0.06);--shadow-lg:0 8px 32px rgba(31,41,55,0.08);
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-display:'Source Serif 4',Georgia,'Times New Roman',serif;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--text);background:var(--sand-pale);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(247,245,241,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);transition:all 0.4s ease}
nav.scrolled{background:rgba(247,245,241,0.96);box-shadow:var(--shadow-sm)}
.nav-inner{max-width:var(--max-width);margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--font-body);font-weight:700;font-size:1.25rem;color:var(--graphite);text-decoration:none;display:flex;align-items:center}
.logo-mark{width:150px;height:45px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-mark img{width:100%;height:100%;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--text-secondary);text-decoration:none;font-size:0.875rem;font-weight:500;transition:color 0.2s;letter-spacing:0.1px}
.nav-links a:hover{color:var(--graphite)}
.nav-links a.active{color:var(--graphite);font-weight:600}
.nav-cta{background:var(--graphite)!important;color:var(--white)!important;padding:9px 20px!important;border-radius:8px!important;font-weight:600!important;transition:all 0.25s!important;white-space:nowrap}
.nav-cta:hover{background:var(--teal)!important;transform:translateY(-1px)}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.mobile-toggle span{display:block;width:20px;height:1.5px;background:var(--graphite);margin:5px 0;transition:all 0.3s}
.mobile-menu{display:none;position:fixed;top:68px;left:0;right:0;background:var(--sand-pale);border-bottom:1px solid var(--border);padding:20px 32px;flex-direction:column;gap:16px;z-index:99}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--text-secondary);text-decoration:none;font-size:0.95rem;font-weight:500;padding:8px 0}
@media(max-width:768px){.nav-links{display:none}.mobile-toggle{display:block}}

/* POST HERO */
.post-hero{margin-top:68px;padding:80px 32px 64px;background:var(--graphite);position:relative;overflow:hidden}
.post-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 900px 600px at 100% -10%,rgba(47,107,115,0.3) 0%,transparent 60%),
             radial-gradient(ellipse 400px 400px at -5% 100%,rgba(47,107,115,0.15) 0%,transparent 60%)}
.grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:64px 64px;pointer-events:none}
.post-hero-inner{max-width:var(--reading-width);margin:0 auto;position:relative;z-index:2}
.back-link{display:inline-flex;align-items:center;font-size:0.85rem;color:rgba(255,255,255,0.65);text-decoration:none;margin-bottom:24px;font-weight:500;transition:color 0.2s}
.back-link:hover{color:var(--white)}
.post-category{display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;padding:5px 14px;border-radius:100px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);margin-bottom:22px}
.post-hero h1{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:400;color:var(--white);line-height:1.15;letter-spacing:-0.4px;margin-bottom:24px}
.post-hero h1 em{font-style:italic;color:var(--sand-light)}
.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:0.85rem;color:rgba(255,255,255,0.65)}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.35)}

/* ARTIKEL-INHALT */
.post-body{max-width:var(--reading-width);margin:0 auto;padding:72px 32px 56px;font-size:1.05rem;line-height:1.85;color:var(--graphite-light)}
.post-body .lead{font-family:var(--font-display);font-size:1.3rem;line-height:1.55;color:var(--graphite);font-weight:400;margin-bottom:40px;font-style:italic}
.post-body h2{font-family:var(--font-display);font-size:1.75rem;line-height:1.3;color:var(--graphite);margin:48px 0 18px;letter-spacing:-0.3px;font-weight:500}
.post-body h3{font-family:var(--font-display);font-size:1.3rem;line-height:1.4;color:var(--graphite);margin:36px 0 14px;letter-spacing:-0.2px;font-weight:500}
.post-body p{margin-bottom:20px}
.post-body a{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(47,107,115,0.3);text-underline-offset:3px;transition:color 0.2s,text-decoration-color 0.2s}
.post-body a:hover{color:var(--teal-dark);text-decoration-color:currentColor}
.post-body strong{color:var(--graphite);font-weight:600}
.post-body em{font-style:italic}
.post-body ul,.post-body ol{margin:0 0 24px 24px;padding-left:8px}
.post-body li{margin-bottom:8px;line-height:1.7}
.post-body blockquote{margin:36px 0;padding:20px 28px;border-left:3px solid var(--teal);background:var(--sand-lighter);border-radius:0 var(--radius) var(--radius) 0;font-family:var(--font-display);font-size:1.15rem;font-style:italic;color:var(--graphite);line-height:1.55}
.post-body img{max-width:100%;height:auto;border-radius:var(--radius-lg);margin:32px 0;display:block;box-shadow:var(--shadow-md)}
.post-body figure{margin:32px 0}
.post-body figcaption{font-size:0.85rem;color:var(--text-tertiary);text-align:center;margin-top:10px;font-style:italic}
.post-body code{font-family:'SF Mono','Monaco','Consolas',monospace;background:var(--sand-lighter);padding:2px 6px;border-radius:4px;font-size:0.92em;color:var(--graphite)}
.post-body pre{background:var(--graphite);color:var(--white);padding:20px 24px;border-radius:var(--radius);overflow-x:auto;margin:24px 0;font-size:0.88rem;line-height:1.6}
.post-body pre code{background:transparent;padding:0;color:inherit}
.post-body hr{border:none;border-top:1px solid var(--border);margin:48px 0}
.post-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:0.95rem}
.post-body th,.post-body td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.post-body th{font-weight:600;color:var(--graphite);background:var(--sand-lighter)}

/* CTA */
.post-cta{padding:32px 32px 80px}
.post-cta-inner{max-width:var(--reading-width);margin:0 auto;background:var(--graphite);color:var(--white);padding:48px 40px;border-radius:var(--radius-xl);text-align:center;position:relative;overflow:hidden}
.post-cta-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 600px 400px at 80% -10%,rgba(47,107,115,0.4) 0%,transparent 60%);pointer-events:none}
.post-cta-inner h2{font-family:var(--font-display);font-size:1.7rem;margin-bottom:12px;position:relative;z-index:2;color:var(--white)}
.post-cta-inner p{font-size:1rem;color:var(--text-on-dark-muted);max-width:480px;margin:0 auto 24px;line-height:1.7;position:relative;z-index:2}
.btn-primary{background:var(--white);color:var(--graphite);position:relative;z-index:2;padding:13px 28px;border-radius:8px;text-decoration:none;font-weight:600;font-size:0.9rem;display:inline-flex;align-items:center;gap:8px;transition:all 0.3s ease}
.btn-primary:hover{background:var(--teal);color:var(--white);transform:translateY(-1px)}

/* FOOTER */
footer{padding:72px 32px 36px;background:var(--sand-pale);border-top:1px solid var(--border)}
.footer-inner{max-width:var(--max-width);margin:0 auto}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:52px;flex-wrap:wrap;gap:40px}
.footer-brand{max-width:300px}
.footer-brand .nav-logo{margin-bottom:14px;display:inline-block}
.footer-brand p{font-size:0.88rem;color:var(--text-secondary);line-height:1.7}
.footer-links{display:flex;gap:64px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:10px;min-width:140px}
.footer-col h4{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--graphite);margin-bottom:6px}
.footer-col a{color:var(--text-secondary);text-decoration:none;font-size:0.88rem;transition:color 0.2s}
.footer-col a:hover{color:var(--teal)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--border);flex-wrap:wrap;gap:16px}
.footer-bottom p{font-size:0.82rem;color:var(--text-tertiary)}
.footer-legal{display:flex;gap:24px}
.footer-legal a{color:var(--text-tertiary);text-decoration:none;font-size:0.82rem;transition:color 0.2s}
.footer-legal a:hover{color:var(--graphite)}

@media(max-width:768px){
  .post-hero{padding:48px 24px 48px}
  .post-body{padding:48px 24px 40px;font-size:1rem}
  .post-body .lead{font-size:1.15rem}
  .post-body h2{font-size:1.5rem;margin:40px 0 14px}
  .post-cta{padding:24px 24px 64px}
  .post-cta-inner{padding:36px 24px;border-radius:var(--radius-lg)}
  .footer-top{flex-direction:column}
  .footer-links{gap:32px}
}