/* ============================================================
   Keyvisual — Content-Bild-Section (<section class="keyvisual">).
   Eigenstaendige Section; globaler Ersatz fuer die frueheren
   .magazine-Keyvisual-Regeln. Gilt fuer alle Content-Module
   (article/magazine/...), die ein Keyvisual rendern.
   ============================================================ */

.keyvisual{
    padding:0;
    margin:0;
    width:100%;
}

.keyvisual figure,
.keyvisual picture,
.keyvisual img{
    margin:0;
    padding:0;
}

.keyvisual figure,
.keyvisual picture{
    display:block;
}

/* figure line-height:0 killt den Baseline-Gap zwischen inline-Kindern
 * (a, picture, img) vs. figcaption. */
.keyvisual figure{
    line-height:0;
}

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

.keyvisual img{
    width:100%;
    max-width:100%;
    display:block;
}


/* ============================================================
   Article mit Keyvisual — Grid-Layout (global, frueher .magazine).
   Mobile: gestapelt (Keyvisual oben, Content darunter).
   Ab Tablet: Keyvisual links neben dem Content (side-by-side).
   Footer spannt ueber beide Spalten.
   ============================================================ */

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

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

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

/* Footer ("Weiter lesen") ueber beide Spalten. */
article:has(> section.keyvisual) > footer{
    grid-column:1 / -1;
}

/* Ab Tablet: Keyvisual side-by-side mit Content. */
@media screen and (min-width: 45rem){
    article:has(> section.keyvisual){
        grid-template-areas:"keyvisual content";
        grid-template-rows:minmax(0, auto);
        grid-template-columns:minmax(10rem, 18rem) 1fr;
        gap:1rem;
    }
}