/* ══════════════════════════════════════════════════════════
   BLOG STYLESHEET — judith-wilmsen.de
   Nutzt exakt dieselben Design-Werte wie die Homepage.
   Wird von index.html und allen Artikel-Seiten eingebunden.
   ══════════════════════════════════════════════════════════ */

:root{
  --pink:#D4376A;--pink-h:#B82055;--pink-p:#FDE8F0;--pink-l:#F2B3CC;
  --blue:#7BA8D0;--blue-h:#4A80B0;--blue-p:#EAF4FB;--blue-l:#BDD8EF;
  --off:#F9F7F5;--white:#FFFFFF;--text:#18100E;--tmid:#503040;--tsoft:#907080;
  --footer:#2C2420;--r:16px;--tab-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;}

/* ══ NAV (statisch, da eigenständige Seite außerhalb der Single-Page-Startseite) ══ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.9rem 3rem;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(20px);
  border-bottom:1.5px solid var(--pink-l);
}
.logo{font-family:'Playfair Display',serif;font-weight:900;font-size:1.1rem;letter-spacing:-0.02em;color:var(--pink);text-decoration:none;}
.nav-links{display:flex;gap:2px;list-style:none;}
.nav-links a{background:none;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.82rem;font-weight:600;color:var(--tmid);padding:0.45rem 0.9rem;border-radius:100px;transition:all 0.2s;text-decoration:none;display:inline-block;}
.nav-links a:hover,.nav-links a.active{background:var(--pink-p);color:var(--pink);}
.nav-cta{background:var(--pink);color:white;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.82rem;font-weight:700;padding:0.6rem 1.4rem;border-radius:100px;transition:all 0.2s;text-decoration:none;display:inline-block;}
.nav-cta:hover{background:var(--pink-h);}
@media(max-width:768px){
  .nav-links{display:none;}
  nav{padding:0.9rem 1.25rem;}
}

.page-wrap{min-height:100vh;padding-top:64px;}

/* ══ TYPO-BAUSTEINE (identisch zur Startseite) ══ */
.ey{font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:0.75rem;}
.ey.pink{color:var(--pink);} .ey.blue{color:var(--blue-h);}
.sh2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1.05;letter-spacing:-0.02em;color:var(--text);margin-bottom:1rem;}
.sh2 em{font-style:italic;font-weight:400;color:var(--pink);}
.sbody{font-size:0.93rem;color:var(--tsoft);line-height:1.8;margin-bottom:2rem;}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.38rem 1rem;border-radius:100px;width:fit-content;margin-bottom:1.5rem;border:1px solid;}
.chip.blue{background:var(--blue-p);color:var(--blue-h);border-color:var(--blue-l);}
.chip.pink{background:var(--pink-p);color:var(--pink);border-color:var(--pink-l);}
.btn-pink{background:var(--pink);color:white;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.9rem;font-weight:700;padding:0.85rem 1.9rem;border-radius:100px;border:none;cursor:pointer;transition:all 0.22s;display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
.btn-pink:hover{background:var(--pink-h);transform:translateY(-2px);}

/* ══ FOOTER (identisch zur Startseite) ══ */
.site-footer{background:var(--footer);padding:1.25rem 3rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.site-footer .logo-f{font-family:'Playfair Display',serif;font-weight:900;font-size:1rem;color:var(--pink-l);}
.site-footer .links{display:flex;gap:1.5rem;}
.site-footer .links a{color:var(--tsoft);text-decoration:none;font-size:0.78rem;transition:color 0.2s;}
.site-footer .links a:hover{color:var(--pink-l);}
.site-footer .copy{font-size:0.72rem;color:var(--tsoft);}
@media(max-width:768px){
  .site-footer{padding:1.25rem;flex-direction:column;align-items:flex-start;gap:0.5rem;}
}

/* ══ BLOG-ÜBERSICHT: Hero ══ */
.blog-hero{padding:6rem 3.5rem 3.5rem;background:var(--off);}
.blog-hero-inner{max-width:1100px;margin:0 auto;}

/* ══ BLOG-ÜBERSICHT: Artikel-Grid ══ */
.blog-grid-section{padding:3rem 3.5rem 5rem;}
.blog-grid-inner{max-width:1100px;margin:0 auto;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.bc{background:white;border-radius:var(--r);padding:1.75rem;border:1.5px solid rgba(212,55,106,0.08);transition:all 0.25s;position:relative;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;}
.bc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--pink);}
.bc:nth-child(even)::after{background:var(--blue);}
.bc:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(212,55,106,0.1);}
.bc-topic{font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--pink);margin-bottom:0.75rem;}
.bc:nth-child(even) .bc-topic{color:var(--blue-h);}
.bc-t{font-family:'Playfair Display',serif;font-weight:900;font-size:1.15rem;line-height:1.25;color:var(--text);margin-bottom:0.6rem;}
.bc-d{font-size:0.82rem;color:var(--tsoft);line-height:1.6;margin-bottom:1.1rem;flex:1;}
.bc-link{font-size:0.8rem;font-weight:700;color:var(--pink);}
.bc:nth-child(even) .bc-link{color:var(--blue-h);}
.bc-empty{grid-column:1/-1;text-align:center;padding:2rem;color:var(--tsoft);font-size:0.88rem;}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-hero{padding:5.5rem 1.25rem 2.5rem;}
  .blog-grid-section{padding:2rem 1.25rem 3rem;}
}

/* ══ ARTIKEL-SEITE ══ */
.art-hero{padding:6rem 3.5rem 2.5rem;background:var(--off);}
.art-hero-inner{max-width:760px;margin:0 auto;}
.art-h1{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2rem,4vw,2.9rem);line-height:1.1;letter-spacing:-0.02em;color:var(--text);margin-bottom:1.1rem;}
.art-h1 em{font-style:italic;font-weight:400;color:var(--pink);}
.art-meta{font-size:0.8rem;color:var(--tsoft);}

.art-body{padding:3rem 3.5rem 4rem;}
.art-body-inner{max-width:760px;margin:0 auto;}
.art-body-inner p{font-size:1rem;color:var(--tmid);line-height:1.85;margin-bottom:1.35rem;}
.art-body-inner h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-0.01em;color:var(--text);margin:2.5rem 0 1.1rem;line-height:1.2;}
.art-body-inner h2 em{font-style:italic;font-weight:400;color:var(--pink);}
.art-body-inner strong{color:var(--text);font-weight:700;}

.hbox{background:linear-gradient(135deg,var(--pink-p),var(--blue-p));border-left:4px solid var(--pink);border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.5rem;margin:1.75rem 0;}
.hbox p{font-size:0.92rem;color:var(--tmid);line-height:1.72;margin-bottom:0;}
.hbox strong{color:var(--pink);}

.tl{display:flex;flex-direction:column;gap:1.1rem;margin:1.75rem 0 2rem;}
.tl-row{display:flex;gap:14px;align-items:flex-start;}
.dot{width:9px;height:9px;min-width:9px;border-radius:50%;margin-top:7px;}
.dot.p{background:var(--pink);} .dot.b{background:var(--blue);} .dot.bh{background:var(--blue-h);}
.tl-tx{font-size:0.92rem;color:var(--tmid);line-height:1.65;}
.tl-tx strong{color:var(--text);font-weight:700;display:block;margin-bottom:2px;}

/* ══ ARTIKEL-CTA (weich, kein Hard-Sell) ══ */
.art-cta{margin:3rem 0 0.5rem;padding:2.25rem;border-radius:var(--r);background:linear-gradient(135deg,var(--pink),var(--blue));position:relative;overflow:hidden;}
.art-cta-inner{position:relative;z-index:2;}
.art-cta h3{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.25rem,2.2vw,1.6rem);color:white;margin-bottom:0.6rem;line-height:1.25;}
.art-cta p{font-size:0.92rem;color:rgba(255,255,255,0.9);line-height:1.7;margin-bottom:1.4rem;}
.art-cta .btn-white{background:white;color:var(--pink);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.9rem;font-weight:700;padding:0.85rem 1.9rem;border-radius:100px;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all 0.22s;}
.art-cta .btn-white:hover{transform:translateY(-2px);}

.art-back{max-width:760px;margin:0 auto;padding:0 3.5rem;}
.art-back a{font-size:0.85rem;color:var(--tsoft);text-decoration:none;}
.art-back a:hover{color:var(--pink);}

@media(max-width:768px){
  .art-hero,.art-body{padding-left:1.25rem;padding-right:1.25rem;}
  .art-back{padding:0 1.25rem;}
}