/* Page-local styles — Impulse-Artikel (Blog-Detailseite). */

/* Reading progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg, var(--amber), var(--coral), var(--terracotta))}

/* === ARTICLE HERO === */
.art-hero{padding:10rem 3rem 3rem;text-align:center;position:relative;overflow:hidden;background:var(--ivory)}
.art-hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:560px;height:560px;border-radius:50%;background:radial-gradient(circle, rgba(224,128,94,0.14) 0%, transparent 70%);pointer-events:none}
.art-back{
  display:inline-flex;align-items:center;gap:0.5rem;color:var(--ink-soft);text-decoration:none;
  font-size:0.76rem;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:2rem;transition:color 0.3s;
  opacity:0;animation:fadeUp 0.8s 0.1s forwards;
}
.art-back:hover{color:var(--terracotta)}
.art-cat{font-size:0.74rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1.4rem;opacity:0;animation:fadeUp 0.9s 0.2s forwards}
.art-hero h1{
  font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,5vw,4.2rem);font-weight:300;line-height:1.06;
  letter-spacing:-0.015em;max-width:900px;margin:0 auto 1.4rem;opacity:0;animation:fadeUp 1s 0.35s forwards;
}
.art-hero h1 em{font-style:italic;color:var(--terracotta)}
.art-lead{max-width:680px;margin:0 auto 2.4rem;color:var(--ink-soft);font-size:1.15rem;line-height:1.6;font-style:italic;font-family:'Cormorant Garamond',serif;opacity:0;animation:fadeUp 1s 0.5s forwards}
.art-meta{display:inline-flex;align-items:center;gap:1rem;opacity:0;animation:fadeUp 1s 0.65s forwards}
.art-avatar{
  width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;position:relative;
  background:linear-gradient(140deg, var(--coral) 0%, var(--copper) 100%);box-shadow:var(--shadow-soft);
}
.art-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.art-meta-text{text-align:left}
.art-meta-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--ink)}
.art-meta-sub{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:0.15rem}

/* === ARTICLE BODY === */
.article{padding:4rem 3rem 6rem;background:var(--cream)}
.article-body{max-width:740px;margin:0 auto}
.article-body p{color:var(--read);font-size:1.13rem;line-height:1.92;margin-bottom:1.5rem}
.article-body > p:first-of-type::first-letter{
  font-family:'Cormorant Garamond',serif;font-size:4.6rem;line-height:0.78;float:left;
  color:var(--terracotta);padding:0.4rem 0.9rem 0 0;font-weight:500;
}
.article-body h2{
  font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3vw,2.2rem);font-weight:400;line-height:1.15;
  color:var(--ink);margin:3.2rem 0 1.2rem;
}
.article-body h2::before{content:'';display:block;width:40px;height:1px;background:var(--terracotta);margin-bottom:1.4rem}
.article-body a.inline{color:var(--terracotta);text-decoration:none;border-bottom:1px solid rgba(190,110,71,0.4);transition:border-color 0.3s}
.article-body a.inline:hover{border-color:var(--terracotta)}
.article-body strong{font-weight:500;color:var(--ink)}

.reflect-box{
  background:var(--ivory);border:1px solid var(--line);border-left:3px solid var(--terracotta);
  border-radius:16px;padding:2.2rem 2.4rem;margin:2.4rem 0;
}
.reflect-box h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:500;margin-bottom:1.2rem}
.reflect-box ul{list-style:none}
.reflect-box li{position:relative;padding:0.6rem 0 0.6rem 1.8rem;color:var(--read);font-size:1.02rem;line-height:1.55;border-bottom:1px solid rgba(217,198,169,0.5)}
.reflect-box li:last-child{border-bottom:none}
.reflect-box li::before{content:'';position:absolute;left:0;top:1.15rem;width:7px;height:7px;border-radius:50%;background:var(--coral)}

.pullquote{
  max-width:600px;margin:3rem auto;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.3;color:var(--ink);position:relative;padding-top:2rem;
}
.pullquote::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:46px;height:1px;background:var(--terracotta)}

.inline-list{list-style:none;margin:1.8rem 0}
.inline-list li{position:relative;padding:0.7rem 0 0.7rem 2.2rem;color:var(--read);font-size:1.08rem;line-height:1.5}
.inline-list li::before{content:'→';position:absolute;left:0;top:0.7rem;color:var(--terracotta);font-size:1.1rem}

.testimonial{
  background:linear-gradient(150deg, var(--terracotta) 0%, var(--terracotta-dark) 100%);color:var(--cream);
  border-radius:24px;padding:3rem 3.2rem;margin:3rem 0;position:relative;overflow:hidden;box-shadow:var(--shadow-warm);
}
.testimonial::before{content:'\201C';position:absolute;top:0.6rem;left:1.8rem;font-family:'Cormorant Garamond',serif;font-size:6rem;color:rgba(245,237,224,0.18)}
.testimonial p{position:relative;z-index:1;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--cream);margin-bottom:1.2rem}
.testimonial .t-author{position:relative;z-index:1;font-size:0.76rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-soft)}

.art-cta{
  background:var(--ivory);border:1px solid var(--line);border-radius:24px;padding:2.8rem;margin:3.4rem 0 0;text-align:center;
}
.art-cta h3{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:400;margin-bottom:0.8rem}
.art-cta p{color:var(--ink-soft);max-width:460px;margin:0 auto 1.8rem;font-size:1rem}
.art-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Tags */
.art-tags{max-width:740px;margin:3rem auto 0;display:flex;flex-wrap:wrap;gap:0.5rem}
.art-tags span{font-size:0.78rem;padding:0.4rem 0.9rem;border-radius:100px;background:var(--ivory);border:1px solid var(--line);color:var(--ink-soft)}

/* Share */
.art-share{max-width:740px;margin:2rem auto 0;display:flex;align-items:center;gap:1rem;padding-top:2rem;border-top:1px solid var(--line)}
.art-share span{font-size:0.74rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft)}
.art-share a{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);text-decoration:none;font-size:0.78rem;transition:all 0.3s;cursor:pointer;
}
.art-share a:hover{background:var(--terracotta);color:var(--cream);border-color:var(--terracotta)}

/* Author box */
.author-box{
  max-width:740px;margin:3.5rem auto 0;background:var(--ivory);border:1px solid var(--line);border-radius:24px;
  padding:2.4rem;display:flex;gap:1.8rem;align-items:center;
}
.author-photo{
  width:84px;height:84px;border-radius:50%;overflow:hidden;flex-shrink:0;position:relative;
  background:linear-gradient(140deg, var(--coral) 0%, var(--copper) 100%);box-shadow:var(--shadow-soft);
}
.author-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.author-info .a-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;margin-bottom:0.2rem}
.author-info .a-role{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--terracotta);margin-bottom:0.8rem}
.author-info p{color:var(--ink-soft);font-size:0.96rem;line-height:1.55;margin-bottom:0.9rem}
.author-info a{color:var(--terracotta);text-decoration:none;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color 0.3s}
.author-info a:hover{border-color:var(--terracotta)}

/* Related */
.related{background:var(--ivory);padding:6rem 3rem}
.related .section-eyebrow{font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1.2rem;display:flex;align-items:center;gap:0.8rem;justify-content:center}
.related .section-eyebrow::before,.related .section-eyebrow::after{content:'';width:30px;height:1px;background:var(--terracotta)}
.related h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3rem);font-weight:300;text-align:center;margin-bottom:3.5rem}
.related h2 em{font-style:italic;color:var(--terracotta)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1200px;margin:0 auto}
.post{background:var(--cream);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.post-thumb{aspect-ratio:16/9;position:relative;overflow:hidden}
.post-thumb::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 25%, rgba(255,250,235,0.4) 0%, transparent 55%)}
.thumb-coral{background:linear-gradient(140deg, var(--coral-soft) 0%, var(--coral) 50%, var(--copper) 100%)}
.thumb-amber{background:linear-gradient(140deg, var(--gold-soft) 0%, var(--amber) 55%, var(--copper) 100%)}
.thumb-rose{background:linear-gradient(140deg, var(--rose-soft) 0%, var(--rose) 55%, var(--terracotta) 100%)}
.post-thumb .pt-glyph{position:absolute;right:1.4rem;bottom:1rem;font-size:1.6rem;color:rgba(255,250,235,0.85);z-index:1}
.post-body{padding:1.8rem 2rem;display:flex;flex-direction:column;flex:1}
.post-cat{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--terracotta);margin-bottom:0.8rem}
.post h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.5rem;line-height:1.15;margin-bottom:0.8rem}
.post p{color:var(--ink-soft);font-size:0.92rem;line-height:1.55;margin-bottom:1.3rem}
.post-meta{margin-top:auto;display:flex;align-items:center;gap:0.7rem;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft)}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line)}
.post-more{color:var(--terracotta)}

/* === RESPONSIVE === */
@media (max-width:900px){
  .art-hero{padding:8rem 1.5rem 2.5rem}
  .article{padding:3rem 1.5rem 4rem}
  .reflect-box,.testimonial,.art-cta{padding:2rem 1.6rem}
  .author-box{flex-direction:column;text-align:center;padding:2rem 1.6rem}
  .related{padding:4rem 1.5rem}
  .related-grid{grid-template-columns:1fr}
  .article-body > p:first-of-type::first-letter{font-size:3.6rem}
}
@media (min-width:901px) and (max-width:1100px){
  .related-grid{grid-template-columns:repeat(2,1fr)}
}