/* Seitenspezifisches CSS „Ratgeber“ (T4, LAB-198) – ergänzt studio.css.
   Styled die Klassen, die `public/js/modules/blog.js` zur Laufzeit erzeugt. */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.blog-section h2{margin-top:30px}

/* Suche & Filter ------------------------------------------------ */
.blog-toolbar{display:flex;flex-wrap:wrap;gap:14px;margin-top:46px;max-width:840px}
.blog-search{flex:1 1 320px}
.blog-search input,.blog-filter select{width:100%;min-height:54px;padding:13px 16px;font:17px var(--body);color:var(--ink);background:#fff;border:1px solid #aeb7a6;border-radius:0}
.blog-filter{flex:0 1 260px}
.blog-search input:focus-visible,.blog-filter select:focus-visible{outline:3px solid #6885db;outline-offset:2px;border-color:var(--blue)}

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

/* Karten -------------------------------------------------------- */
.blog-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:38px}
.blog-card{background:var(--paper);display:flex;flex-direction:column;min-height:100%}
.blog-card-image{aspect-ratio:16/10;overflow:hidden;background:#e3e5dd}
.blog-card-image img{width:100%;height:100%;object-fit:cover}
.blog-fallback-icon{display:grid;place-items:center;height:100%;font:34px var(--display);color:var(--muted)}
.blog-card-header{padding:22px 24px 0}
.blog-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font:11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.blog-card-content{display:flex;flex-direction:column;gap:12px;padding:16px 24px 0;flex:1}
.blog-title{font:540 23px/1.22 var(--display);letter-spacing:-.03em}
.blog-title a{border-bottom:1px solid transparent}
.blog-title a:hover{border-bottom-color:currentColor}
.blog-excerpt{color:var(--muted);font-size:16px}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px}
.blog-tag{font:11px/1.5 var(--mono);letter-spacing:.05em;border:1px solid var(--line);padding:4px 9px;color:var(--muted)}
.blog-card-footer{margin-top:auto;padding:20px 24px 26px}
.blog-read-more{display:inline-flex;align-items:center;min-height:40px;font-size:15px;border-bottom:1px solid currentColor}
.blog-read-more:hover{color:var(--blue)}

/* Leer- und Fehlerzustand --------------------------------------- */
.no-posts,.blog-error{padding:46px 0;max-width:60ch;color:var(--muted)}
.no-posts h3,.blog-error h3{font-size:clamp(22px,2.4vw,30px);font-weight:540;color:var(--ink);margin-bottom:12px}
.blog-error .btn{margin-top:20px}
.blog-error .btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 18px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:550 15px var(--display)}

/* Blättern ------------------------------------------------------ */
.blog-pagination{margin-top:36px}
.pagination-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.pagination-numbers{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pagination-btn,.pagination-number{min-height:46px;border:1px solid #aeb7a6;background:transparent;color:var(--ink);font:15px var(--mono);padding:8px 16px}
.pagination-number{min-width:46px;padding:8px 10px}
.pagination-btn:hover,.pagination-number:hover{border-color:var(--blue);color:var(--blue)}
.pagination-number.active{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.pagination-btn:focus-visible,.pagination-number:focus-visible{outline:3px solid #6885db;outline-offset:2px}
.pagination-dots{color:var(--muted);padding:0 4px}

@media (max-width:1080px){
  .blog-posts-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .blog-posts-grid{grid-template-columns:1fr;margin-top:30px}
  .blog-toolbar{margin-top:34px}
  .pagination-controls{justify-content:center}
}