.blog-hero{background-color:var(--color--base--50)}.blog-header-inner{max-inline-size:64ch}.blog-eyebrow{display:inline-block;background-color:var(--color--primary--100);color:var(--color--primary--600);border-radius:var(--radius--full);padding-block:var(--spacing--xxs);padding-inline:var(--spacing--sm);margin-block-end:var(--spacing--md);font-weight:600}.blog-title{margin-block:var(--spacing--sm) var(--spacing--lg)}.blog-title-normal,.blog-title-accent{display:block}.blog-title-accent{color:var(--color--primary--600)}.blog-header-subtitle{max-inline-size:52ch;font-weight:500}.blog-filter{padding-block:var(--spacing--xl);border-block-end:1px solid var(--color--base--200)}.blog-filter-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.blog-filter-nav,.blog-filter-nav>div{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing--xs)}.blog-filter-link{display:inline-block;padding-block:var(--spacing--xxs);padding-inline:var(--spacing--sm);border-radius:var(--radius--full);border:1px solid var(--color--base--200);background-color:var(--color--base--0);color:var(--text--color--content);text-decoration:none;white-space:nowrap;transition:background-color var(--transition),border-color var(--transition),color var(--transition)}.blog-filter-link:hover{background-color:var(--color--primary--50);border-color:var(--color--primary--100);color:var(--color--primary--600)}.blog-filter-link.is-active{background-color:var(--color--base--900);border-color:var(--color--base--900);color:var(--color--base--50)}.blog-search{display:flex;align-items:center;border:1px solid var(--color--base--200);border-radius:var(--radius--full);padding-inline:var(--spacing--md) var(--spacing--sm);background-color:var(--color--base--0)}.blog-search:focus-within{border-color:var(--color--primary--500)}.blog-search-input{border:none;background:#fff0;padding-block:var(--spacing--xs);padding-inline:0;min-inline-size:12rem;color:var(--text--color--content)}.blog-search-input:focus{outline:none}.blog-search-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:var(--spacing--xxs);color:var(--color--base--500)}.blog-search-btn:hover{color:var(--color--primary--600)}.blog-posts-grid{align-items:stretch}.blog-card{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;background-color:var(--color--base--0);border:1px solid var(--color--base--200);border-radius:var(--radius--lg);transition:transform var(--transition),box-shadow var(--transition)}.blog-card:hover{transform:translateY(calc(var(--size--1) * -1));box-shadow:var(--box--shadow)}.blog-card:focus-within{outline:var(--outline--border);outline-offset:var(--size--1)}.blog-card-media{display:grid;aspect-ratio:16 / 9;overflow:hidden;background-color:var(--color--base--900);background-image:url(https://mkdev.de/wp-content/uploads/mkdev-blog-placeholder-768x432.jpg);background-size:cover;background-position:center;border-block-end:1px solid var(--color--base--200)}.blog-card-img{grid-area:1 / 1;display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--transition)}.blog-card-img:not([src]),.blog-card-img[src=""]{display:none}.blog-card:hover .blog-card-img{transform:scale(1.04)}.blog-card-body{display:flex;flex-direction:column;flex:1;padding:var(--spacing--lg)}.blog-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing--xs) var(--spacing--sm);margin-block-end:var(--spacing--sm)}.blog-card-cat{position:relative;z-index:1;display:inline-block;background-color:var(--color--primary--50);color:var(--color--primary--600);border-radius:var(--radius--full);padding-block:var(--spacing--xxs);padding-inline:var(--spacing--sm);font-weight:600;text-decoration:none}.blog-card-cat:hover{background-color:var(--color--primary--100)}.blog-card-date{color:var(--color--base--500)}.blog-card-title{margin-block-end:var(--spacing--xs);line-height:1.25}.blog-card-link{color:inherit;text-decoration:none}.blog-card-link::after{content:"";position:absolute;inset:0}.blog-card-link:focus-visible{outline:none}.blog-card:hover .blog-card-link{color:var(--color--primary--600)}.blog-card-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-block-end:var(--spacing--md)}.blog-card-more{margin-block-start:auto;color:var(--color--primary--600);font-weight:600}.blog-pagination{padding-block-end:var(--spacing--4xl)}.blog-pagination-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing--xs)}.blog-pagination-nav .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2.75rem;min-block-size:2.75rem;padding-inline:var(--spacing--sm);border:1px solid var(--color--base--200);border-radius:var(--radius--full);background-color:var(--color--base--0);color:var(--text--color--heading);font-weight:600;text-decoration:none;transition:background-color var(--transition),border-color var(--transition),color var(--transition)}.blog-pagination-nav a.page-numbers:hover{background-color:var(--color--primary--50);border-color:var(--color--primary--100);color:var(--color--primary--600)}.blog-pagination-nav .page-numbers.current{background-color:var(--color--primary--500);border-color:var(--color--primary--500);color:var(--color--base--50)}.blog-pagination-nav .page-numbers.dots{border:none;background:#fff0}@media (max-width:991px){.blog-filter-inner{flex-direction:column;align-items:flex-start}.blog-search{inline-size:100%}.blog-search-input{flex:1;min-inline-size:0}}@media (max-width:478px){.blog-card-body{padding:var(--spacing--md)}}@media (prefers-reduced-motion:reduce){.blog-card,.blog-card-img{transition:none}.blog-card:hover,.blog-card:hover .blog-card-img{transform:none}}.blog-card-media::before{content:none}.blog-card-img:not([src]),.blog-card-img[src=""],.blog-card-img[src="null"]{display:none}.blog-filter-nav .blog-filter-link.is-active{background-color:var(--color--base--900);border-color:var(--color--base--900);color:var(--color--base--50)}.blog-filter-nav .blog-filter-link[aria-current="page"]{background-color:var(--color--base--900);border-color:var(--color--base--900);color:var(--color--base--50)}.blog-card-title{--font-size:var(--font--size--3)}.blog-author-profile{display:inline-block;margin-block-start:var(--spacing--sm);color:var(--color--primary--600);font-weight:600;text-decoration:none}.blog-author-profile:hover{text-decoration:underline}