/* ============================================================
   1. FILTER FORM (Glassmorphism & Layout)
   ============================================================ */
.blog-filter-form {
    padding: 30px;
    border-radius: 30px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end; /* Wichtig für die Ausrichtung des Buttons */
}

.blog-filter-form label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: bold;
    color: #495f76;
    display: block;
    margin-bottom: 8px !important;
}

.filter-group {
    flex: 1;
    min-width: 200px; /* Mindestbreite für Lesbarkeit */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.blog-filter-form select,
.blog-filter-form input[type="text"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    border: 1px solid #e5eaee !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    font-size: 16px;
    color: #495F76 !important;
    transition: all .3s ease;
    outline: none;
    cursor: pointer;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
}

.blog-filter-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23495F76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px !important;
}

.blog-filter-form .button.btn-primary {
    background-color: #495e77 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 30px !important;
    font-weight: 700;
    text-transform: uppercase;
    transition: all .3s ease !important;
    cursor: pointer;
    height: 48px; /* Gleiche Höhe wie Input-Felder */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.blog-filter-form .button.btn-primary:hover {
    transform: translateY(-2px);
    background-color: #769cc1 !important;
    box-shadow: 0 5px 15px rgba(73, 94, 119, 0.2);
}

.blog-grid{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.blog-card{
    background:#fff;
    border:1px solid #e5eaee;
    border-radius:30px;
    overflow:hidden;
    transition:transform .3s ease,box-shadow .3s ease;
}

.blog-card:hover{}

.blog-card__link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.blog-card__inner{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    width:100%;
}

.blog-card__image{
    flex:0 0 40%;
    max-width:400px;
    position:relative;
    overflow:hidden;
    display:flex;
    text-decoration:none;
    color:inherit;
}

.blog-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.blog-card:hover .blog-card__image img{
    transform:scale(1.02);
}

.blog-card__content{
    flex:1;
    padding:50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.blog-card__title{
    font-size:clamp(1.21rem,1.2vw + .8rem,1.3rem)!important;
    display:block;
    color:#495F76;
    letter-spacing:.05em;
    line-height:1.3;
    font-weight:700;
    padding-bottom:20px
}

.blog-card__excerpt{
    font-size:.95rem;
    margin-bottom:20px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.5;
}

.blog-card__meta{
    font-size:.9rem;
    color:#769cc1;
    margin-bottom:25px;
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    align-items:center;
    border-top:1px solid #e5eaee;
    padding-top:15px;
}

.blog-date{
    margin-right:10px;
    color:#495F76;
    font-weight:500;
    text-decoration:underline;
    text-underline-offset:4px;
}

.blog-categories{
    display:flex;
    gap:5px;
}

/* Höhere Spezifität um Theme zu überschreiben */
.et-db #et-boc .et-l .blog-categories a,
.blog-categories a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    background:#769cc1;
    padding:3px 10px;
    border-radius:5px;
    font-size:.8rem;
}

.blog-read-more{
    display:inline-block;
    align-self:flex-start;
    background:#769cc1;
    padding:.7em 2.1em;
    font-weight:700;
    line-height:1.4;
    font-size:16px;
    background-color:#495e77;
    border-radius:10px;
    color:#ffffff !important;
    text-decoration:none;
    text-transform:uppercase
}

.blog-read-more:hover{
    cursor:pointer;
    transform:scale(1.02)
}

.blog-pagination{
    margin-top:clamp(2rem,4vw,3rem);
    display:flex;
    justify-content:center;
    width:100%;
}

.blog-pagination ul.page-numbers{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:10px;
    list-style:none!important;
    margin:0!important;
    padding:0!important;
    flex-wrap:wrap;
}

.blog-pagination ul.page-numbers li,
.blog-pagination ul.page-numbers li::before,
.blog-pagination ul.page-numbers li::after{
    display:flex!important;
    content:none!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
}

.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:44px;
    height:44px;
    padding:0 15px;
    background:#ffffff;
    border:1px solid #e5eaee;
    color:#495f76;
    text-decoration:none!important;
    border-radius:12px;
    transition:all .3s ease;
    font-weight:600;
    box-sizing:border-box;
}

.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers a:hover{
    background:#495f76!important;
    color:#ffffff!important;
    border-color:#495f76!important;
}

@media (max-width:980px){
    .blog-card__inner{flex-direction:column}
    .blog-card__image{
        flex:0 0 auto;
        width:100%;
        max-width:100%;
        height:250px;
    }
    .blog-filter-form,.blog-card{border-radius:25px}
    .blog-read-more{font-size:15px}
    .blog-card__content{padding:2.5rem}
}

@media (max-width:767px){
    .blog-filter-form{
        padding:1.5rem;
        flex-direction:column!important;
        align-items:stretch!important;
    }
    .blog-filter-form .filter-group{width:100%!important}
    .blog-filter-form .button.btn-primary{
        width:100%!important;
        margin-top:10px;
    }
    .blog-filter-form,.blog-card{border-radius:20px}
    .blog-read-more{font-size:14px}
    .blog-card__content{padding:1.5rem}
    .blog-pagination ul.page-numbers{gap:6px!important}
    .blog-pagination .page-numbers a,
    .blog-pagination .page-numbers span{
        min-width:36px!important;
        height:36px!important;
        padding:0 8px!important;
        font-size:14px!important;
        border-radius:10px!important;
    }
}

@media (max-width:500px){
    .blog-pagination ul.page-numbers{gap:4px!important}
}