/* ---- Section-Container ---- */

.magazine{
    display:flex;
    flex-direction:column;
    gap:1rem;
    width:100%;
    margin:0;
    padding:0;
}

.magazine > header{
    margin:0;
}

.magazine > header h2{
    margin:0;
}


/* ---- Article (default: einspaltig, nur fg) ---- */

.magazine > article{
    display:block;
    position:relative;
    min-height:8rem;
}


/* Content — linksbuendig (uebersteuert globale Zentrierung) */
.magazine > article > section:not(.keyvisual){
    padding:.5rem 0;
    text-align:left;
}

.magazine > article > section:not(.keyvisual) > p{
    margin:0;
}


/* ---- Footer: "Weiter lesen"-Link ---- */

.magazine > article > footer{
clear:both;
float:left;
width:100%;
display:flex;
justify-content:flex-end;
margin:.25rem 0;
padding:.25rem 0;
border-top:var(--brd-gray-300) 1px solid;
border-bottom:var(--brd-gray-300) 1px solid;
}

/* In keyvisual-Grid ueber beide Spalten spannen */
.magazine > article:has(> section.keyvisual) > footer{
    grid-column:1 / -1;
}


/* ---- Keyvisual-Layout: mobile gestapelt ---- */

.magazine > article:has(> section.keyvisual){
    display:grid;
    grid-template-areas:
        "keyvisual"
        "content";
    grid-template-rows:min-content auto;
    grid-template-columns:100%;
    gap:0;
}

.magazine > article:has(> section.keyvisual) > section.keyvisual{
    grid-area:keyvisual;
}

.magazine > article:has(> section.keyvisual) > section:not(.keyvisual){
    grid-area:content;
}


/* Keyvisual-Styling (gilt auch ohne :has, falls Keyvisual isoliert verwendet) */
.magazine > article > section.keyvisual{
    padding:0;
    margin:0;
    width:100%;
}

.magazine > article > section.keyvisual figure,
.magazine > article > section.keyvisual picture,
.magazine > article > section.keyvisual img{
    margin:0;
    padding:0;
}

.magazine > article > section.keyvisual figure,
.magazine > article > section.keyvisual picture{
    display:block;
}

/* figure line-height auf 0 killt den baseline-gap zwischen
 * inline-Kindern (a, picture, img) vs. figcaption. */
.magazine > article > section.keyvisual figure{
    line-height:0;
}

/* Der <a>-Wrapper um das picture ist inline per default — als block
 * rendern, damit er ueberhaupt keine inline-line-height mitbringt. */
.magazine > article > section.keyvisual > figure > a{
    display:block;
}

.magazine > article > section.keyvisual img{
    width:100%;
    max-width:100%;
    display:block;
}


/* ---- Tablet and above: Keyvisual side-by-side mit Content ---- */

@media screen and (min-width: 45rem){

    .magazine > article:has(> section.keyvisual){
        grid-template-areas:"keyvisual content";
        grid-template-rows:minmax(0, auto);
        grid-template-columns:minmax(10rem, 18rem) 1fr;
        gap:1rem;
    }

}