/*
 * Autor: Autark Innovations
 * Website: autarkinnovations.de
 * App: https://autarkinnovations.com/app-holen.html
 * E-Mail: info@autarkinnovations.de
 * Erstellt: 26.09.2026
 * Zuletzt bearbeitet: 26.09.2026
 * Projekt: autark-website (Paket P7a Blog Solar)
 * Beschreibung: Blog-Übersicht /blog/ – Suche, Themenfilter und Artikelkarten.
 *               Nur Farb-Variablen des Designsystems, damit Hell und Dunkel funktionieren.
 */
.p7a-werkzeuge{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 auto 28px;max-width:1100px;}
.p7a-suche{width:100%;max-width:560px;padding:12px 18px;border-radius:999px;border:1px solid var(--w-border);background:var(--w-surf);color:var(--w-text);font:inherit;font-size:15px;outline:none;}
.p7a-suche:focus{border-color:var(--w-cyan-b);}
.p7a-filterleiste{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.p7a-filter{padding:9px 16px;border-radius:999px;border:1px solid var(--w-border);background:var(--w-surf);color:var(--w-t2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:40px;}
.p7a-filter:hover,.p7a-filter.is-aktiv{border-color:var(--w-cyan-b);color:var(--w-text);background:var(--w-tint-card);}
.p7a-anzahl{margin:0;font-size:14px;color:var(--w-t3);}
.p7a-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.p7a-card{display:flex;flex-direction:column;background:var(--w-surf);border:1px solid var(--w-border);border-radius:18px;padding:22px;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease;}
.p7a-card:hover{border-color:var(--w-cyan-b);transform:translateY(-3px);}
.p7a-card[hidden]{display:none;}
.p7a-card-feature{border-color:var(--w-amber);}
.p7a-card-kat{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--w-blue);margin-bottom:8px;}
.p7a-card-t{font-family:var(--w-disp);font-size:18px;line-height:1.3;font-weight:700;color:var(--w-text);margin:0 0 8px;}
.p7a-card-p{font-size:14.5px;line-height:1.6;color:var(--w-t2);margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.p7a-card-meta{margin-top:auto;display:flex;gap:14px;font-size:13px;color:var(--w-t3);}
@media (max-width:560px){.p7a-grid{grid-template-columns:1fr;}.p7a-card{padding:18px;}}