/* Seitenspezifisches CSS „Ratgeber-Artikel“ (T4, LAB-198) – ergänzt studio.css. */

.wrap-narrow{max-width:880px}

.article-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;font:12px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.article-meta span:empty{display:none}

.article-excerpt:empty{display:none}
.article-excerpt p{font-size:20px;line-height:1.55;color:var(--muted);max-width:70ch}
.post-content{margin-top:38px}

.article-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:44px}
.article-tags:empty{display:none}
.article-tags strong{font:11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.article-tags .tag{font:11px/1.5 var(--mono);letter-spacing:.05em;border:1px solid var(--line);padding:5px 10px;color:var(--muted)}

.article-share{margin-top:52px;border-top:1px solid var(--line);padding-top:30px}
.article-share h2{font-size:clamp(22px,2.4vw,30px);font-weight:540}
.share-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.share-btn{display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;border:1px solid #aeb7a6;font:14px var(--mono);letter-spacing:.04em;background:transparent;color:var(--ink)}
.share-btn:hover{border-color:var(--blue);color:var(--blue)}
.share-btn:focus-visible{outline:3px solid #6885db;outline-offset:2px}

.article-back{margin-top:48px}

.blog-loading{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:15px}
.blog-loading[hidden],.blog-error[hidden],.related-section[hidden]{display:none}
.blog-loading .spinner{width:24px;height:24px;border:2px solid #cbcfc5;border-top-color:var(--blue);border-radius:50%;animation:igs-post-spin .8s linear infinite;flex:none}
@keyframes igs-post-spin{to{transform:rotate(360deg)}}

.blog-error{padding:10px 0 0;max-width:62ch}
.blog-error h2{font-size:clamp(26px,3vw,38px);font-weight:540}
.blog-error > p{margin-top:14px;color:var(--muted);font-size:17px}
.blog-error .article-back{margin-top:26px}

.related-section h2{margin-top:30px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px}
.related-article{background:var(--paper);display:flex;flex-direction:column}
.related-article-image{width:100%;aspect-ratio:16/10;object-fit:cover;background:#e3e5dd}
.related-article-content{display:flex;flex-direction:column;gap:12px;padding:22px 24px 26px;flex:1}
.related-article-content h3{font:540 20px/1.25 var(--display);letter-spacing:-.025em}
.related-article-content h3 a:hover{color:var(--blue)}
.related-article-excerpt{color:var(--muted);font-size:15px}
.related-article-meta{margin-top:auto;font:11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

@media (max-width:1080px){
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .related-grid{grid-template-columns:1fr}
  .article-meta{gap:6px 16px}
}