/* Blog-Seiten (alle Identities): schmale, gut lesbare Spalte statt ueber die ganze Seitenbreite verteilt */
.blog-shell{ box-sizing:border-box; max-width:860px; margin:0 auto; padding:36px 20px 64px; }
.blog-shell .blog-filter-bar{ margin-bottom:26px; }

/* Kachel-/Listenansicht: so breit wie die Kopfzeile (max-w-7xl) */
.blog-shell.blog-wide{ max-width:1280px; padding-left:16px; padding-right:16px; }
.blog-grid{ display:grid; gap:24px; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); }
@media (max-width:1023px){ .blog-grid{ grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr)); } }
@media (max-width:639px){ .blog-grid{ grid-template-columns:minmax(0,1fr); } }
.blog-shell .blog-tile{ padding:0; overflow:hidden; }

/* Sterne + Kommentare */
.blog-meta{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.blog-meta-txt{ font-size:.78rem; color:#78716c; white-space:nowrap; }
/* Durchschnitt als goldene Fuellung ueber grauen Sternen (--fill = Prozent) */
.blog-stars{ display:inline-block; font-size:1.15em; line-height:1; letter-spacing:2px; background:linear-gradient(90deg,#f5b50a var(--fill,0%),#d6d3d1 var(--fill,0%)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.blog-stars.none{ background:#d6d3d1; -webkit-background-clip:text; background-clip:text; }
.blog-rate{ display:inline-flex; flex-direction:row-reverse; gap:2px; }
.blog-rate button{ background:none; border:0; padding:0 1px; font-size:30px; line-height:1; color:#d6d3d1; cursor:pointer; transition:color .1s; }
.blog-rate button.on, .blog-rate button:hover, .blog-rate button:hover ~ button{ color:#f5b50a; }
.blog-comment{ border:1px solid var(--brand-border,#e7e5e4); border-radius:16px; padding:14px 18px; margin-bottom:12px; background:#fff; }
.blog-comment .cbody p{ margin:0 0 .6em; } .blog-comment .cbody p:last-child{ margin-bottom:0; }
.blog-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Blog-Titel + Untertitel (alle Identities; Akzentfarbe aus den Design-Tokens) */
.blog-title{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900; letter-spacing:-.02em; margin:0 0 6px; color:var(--brand-text); }
.blog-title span{ color:var(--brand-600); }
.blog-intro{ color:var(--brand-text-muted); margin:0 0 26px; }