/* Magazine: one page column, two native The7 news cards per row. */
.magazine-hero { display: flex; align-items: center; overflow: hidden; border-radius: var(--border-radius); background-size: cover; background-position: center 25%; }
.magazine-hero::before, .magazine-hero::after { display: none; }
.magazine-hero > .wpb_column > .vc_column-inner { padding: 0; }
.magazine-hero .wpb_text_column {
    box-sizing: border-box; width: clamp(420px, 42vw, 790px); max-width: 100%; margin: 0;
    padding: 26px clamp(24px, 3vw, 48px) 26px clamp(28px, 5.8vw, 112px);
    border-radius: 0 var(--border-radius) var(--border-radius) 0; background: var(--dunkelblau-75);
}
#content .magazine-hero h1 { margin: 0; color: var(--weiss); font-size: var(--heading-hero-size); font-weight: 300; line-height: 1.3; text-transform: uppercase; }
.magazine-breadcrumb { margin: 24px 0 0; color: var(--dunkelblau); font-size: .875rem; }
.magazine-breadcrumb a { color: inherit; }
.magazine-intro { padding-top: 10px; }
#content .magazine-intro h2 { font-size: var(--heading-section-large-size); }
.magazine-results { margin-top: 24px; margin-bottom: 70px; }
/* Remove the old content inset wherever this component is used. */
#content:has(.magazine-results) { width: 100%; margin-left: 0; padding-left: 0; }
.magazine-results .blog-shortcode.mode-grid .dt-css-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px !important; }
.magazine-results .blog-shortcode article {
    display: flex; flex-direction: row; align-items: stretch; position: relative; min-width: 0;
    overflow: hidden; border: 1px solid var(--teaser-border-color); border-radius: var(--border-radius);
}
.magazine-results .blog-shortcode .post-thumbnail-wrap { position: relative; flex: 0 0 40%; min-width: 0; align-self: stretch; }
.magazine-results .blog-shortcode .post-thumbnail { position: absolute; inset: 0; width: 100%; margin: 0; }
.magazine-results .blog-shortcode .post-thumbnail a { display: block; width: 100%; height: 100%; }
.magazine-results .blog-shortcode .post-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.magazine-results .blog-shortcode :is(.post-thumbnail-wrap,.post-thumbnail,.post-thumbnail a,.post-thumbnail img) { border-radius: 0; }
.magazine-results .blog-shortcode .post-entry-content { flex: 1; min-width: 0; width: 60%; position: static; }
.magazine-results .blog-shortcode .entry-title { font-weight: 400; line-height: 1.2; }
.magazine-results .blog-shortcode .category-link {
    position: absolute; top: 25px; left: 0; max-width: 40%; box-sizing: border-box;
    background: var(--hellgruen); color: var(--weiss); padding: 5px 20px;
    border-radius: 0 13px 13px 0; font-size: 1rem; line-height: 1.4;
}
.magazine-results .blog-shortcode .category-link a { color: inherit; }
.magazine-results .blog-shortcode .category-link::after { display: none; }
#page #content .magazine-results .filter { justify-content: flex-start; flex-wrap: wrap; gap: 0; margin-block: 0 30px; }
#page #content .magazine-results .filter::before,
#page #content .magazine-results .filter::after { display: none; }
#page #content .magazine-results .filter-categories { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 20px; margin: 0; padding: 0; }
#page #content .magazine-results .filter a {
    display: inline-block; margin: 0; padding: .9em 20px; border-radius: var(--border-radius-btn);
    background: var(--btn-bg-hellgruen); color: var(--gruen); font-family: var(--font-family);
    font-size: 1rem; font-weight: 400; line-height: normal; text-decoration: none;
}
#page #content .magazine-results .filter a:is(.act,:hover) { background: var(--gruen); color: var(--weiss); }
@media (min-width: 1200px) {
    .magazine-intro > .vc_row > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_text_column:has(h2) { max-width: calc(var(--contentWidth,100vw) * .6); }
}
@media (max-width: 991px) {
    #page #content .magazine-results .filter { justify-content: center; }
    #page #content .magazine-results .filter-categories { justify-content: center; gap: 10px 12px; }
    #page #content .magazine-results .filter a {
        box-sizing: border-box;
        min-height: var(--button-compact-min-height, 44px);
        padding-block: var(--button-compact-padding-y, 11px);
        line-height: 1.2;
        text-align: center;
    }
    .magazine-results .blog-shortcode.mode-grid .dt-css-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 767px) {
    .magazine-hero { align-items: flex-end; background-position: 60% center; }
    .magazine-hero .wpb_text_column { width: 100%; padding: 22px 24px; }
    #content .magazine-hero h1 { font-size: var(--heading-hero-mobile-size); }
    #content .magazine-intro h2 { font-size: var(--heading-section-large-mobile-size); }
    .magazine-results .blog-shortcode article { flex-direction: column; }
    .magazine-results .blog-shortcode .post-thumbnail-wrap { flex: auto; width: 100%; }
    .magazine-results .blog-shortcode .post-thumbnail { position: relative; aspect-ratio: 16 / 9; }
    .magazine-results .blog-shortcode .post-thumbnail a { position: absolute; inset: 0; }
    .magazine-results .blog-shortcode .post-entry-content { width: 100%; padding: 24px; box-sizing: border-box; }
    .magazine-results .blog-shortcode .category-link { max-width: 95%; }
}
