.tpl-filter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}
.chip{border:1px solid var(--line,#e5e7eb);background:#fff;color:#374151;border-radius:999px;padding:7px 14px;font:inherit;font-size:.9rem;cursor:pointer}
.chip.active{background:var(--brand,#4f46e5);border-color:var(--brand,#4f46e5);color:#fff}
.tpl-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.tpl-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tpl-grid{grid-template-columns:repeat(3,1fr)}}
.tplc{display:flex;flex-direction:column;border:1px solid var(--line,#e5e7eb);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.tplc[hidden]{display:none}   /* Filter blendet Karten über das hidden-Attribut aus – muss display:flex schlagen, sonst greift [hidden] nicht */
.tplc:hover{border-color:var(--brand,#4f46e5);box-shadow:0 8px 24px rgba(17,24,39,.10)}
.tplc-thumb{position:relative;display:block;aspect-ratio:3/4;background:#f3f4f6;overflow:hidden}   /* hoch (3:4) → mehr Seiteninhalt sichtbar */
.tplc-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}   /* object-position:top: Fallback-Hero zeigt oben */
.tplc-badge{position:absolute;top:10px;right:10px;background:rgba(20,20,23,.82);color:#fff;font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px}
.tplc-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:3px}
.tplc-name{font-weight:700;font-size:1.08rem}
.tplc-branche{color:var(--muted,#6b7280);font-size:.9rem}
.tplc-author{color:var(--muted,#9aa0aa);font-size:.8rem}
.tpl-author{color:var(--muted,#6b7280);font-size:.92rem;margin:0 0 6px}
.tpl-empty{color:var(--muted,#6b7280)}
.crumb{margin:0 0 18px}.crumb a{color:var(--muted,#6b7280);text-decoration:none}.crumb a:hover{color:var(--brand,#4f46e5)}
.tpl-detail{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media(min-width:860px){.tpl-detail{grid-template-columns:1.1fr .9fr}}
.tpl-shot{border:1px solid var(--line,#e5e7eb);border-radius:14px;overflow:hidden;background:#f3f4f6}
.tpl-shot img{width:100%;height:auto;display:block}
.tpl-price{display:inline-block;background:#eef2ff;color:var(--brand,#4f46e5);font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.tpl-info h1{margin:0 0 6px}
.tpl-branche{color:var(--muted,#6b7280);margin:0 0 14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tag{background:#f3f4f6;color:#374151;border-radius:999px;padding:5px 12px;font-size:.82rem}
.tpl-cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 12px}
.tpl-note{color:var(--muted,#6b7280);font-size:.9rem}