/* =====  LEGACY: .foreground + .card  =====
 * Alte Card-Div-Soup Struktur. Noch genutzt von:
 * - Aside / AsideContent (display_content_core in Prototype.php)
 * - Distributor (display_content_overview_header — .foreground wrapper)
 *
 * Wird mit dem Aside/Teaser/Container-Refactor (Roadmap Phase 6.5)
 * abgeloest und diese Datei am Ende geloescht. */


.foreground.row{
display:flex;
justify-content:space-between !important;
align-items:center;
flex-direction:column;
margin:0 0 1rem 0;
}

.foreground.row .title{
float:left;
width:100%;
font-family:var(--accent-font-family);
text-align:center;
}


.foreground.row .text{
float:left;
width:100%;
display:flex;
justify-content:space-between !important;
align-items:start;
flex-wrap:wrap;
}


.foreground.row.big{
display:flex;
justify-content:space-between;
align-items:center;
margin:0 0 1rem 0;

}

.foreground.row.big .title{
display:flex;
justify-content:center;
align-items:flex-start;
width:100%;
flex-wrap:wrap;
font-family:var(--secondary-font-family);
}

.foreground.row.big .text{
float:left;
width:100%;
display:flex;
justify-content:center !important;
align-items:start;
flex-wrap:wrap;
}




/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

.foreground.row .media{
width:4.65rem !important;
height:auto !important;
margin:1rem 0 0 0;
padding:0;
}

.foreground.row .media img{
width:100% !important;
height:auto !important;
border-radius:50%;
border:var(--brd-primary-100) .15rem solid;
}

.foreground.row.big .media{
width:11rem !important;
height:auto !important;
margin:1rem;
}

.foreground.row.big .media img{
width:100% !important;
height:auto !important;
border:none;
}

.foreground.row figure .legend .hl{
display:none;
}

}


/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

.foreground.row .media{
width:8rem !important;
height:auto !important;
margin:1rem;
}

.foreground.row .media img{
width:100% !important;
height:auto !important;
border-radius:50%;
border:var(--brd-primary-100) .25rem solid;
}

.foreground.row.big .media{
width:13rem !important;
height:auto !important;
}

.foreground.row.big .media img{
width:100% !important;
height:auto !important;
border:none;
}

.foreground.row figure .legend .hl{
font-size:var(--fs-m);
}

}

/* Tablet and above */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

.foreground.row .media{
width:9rem !important;
height:auto !important;
margin:1rem;
}

.foreground.row .media img{
width:100% !important;
height:auto !important;
border-radius:50%;
border:var(--brd-primary-100) .25rem solid;
}

.foreground.row.big .media{
width:15rem !important;
height:auto !important;
margin:1rem;
}

.foreground.row.big .media img{
width:100% !important;
height:auto !important;
border:none;
}

.foreground.row figure .legend .hl{
font-size:var(--fs-m);
}

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

.foreground.row .media{
width:11rem !important;
height:auto !important;
margin:2rem;
}

.foreground.row .media img{
width:100% !important;
height:auto !important;
border-radius:50%;
border:var(--brd-primary-100) .35rem solid;
}

.foreground.row.big .media{
width:15rem !important;
height:auto !important;
margin:2rem;
}

.foreground.row.big .media img{
width:100% !important;
height:auto !important;
border:none;
}

}



/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

main .card .foreground,
main .card .foreground.key{
float:left;
width:calc(100% - 1.5rem);
margin:1.25rem .75rem 0 .75rem;
padding:0;
}


main .card .foreground.key{
display:grid;
grid-template-rows:min-content auto auto auto;
grid-template-areas:
                "keyvisual"
                "title"
                "text"
                "asset";
grid-template-columns:100%;
grid-column-gap:.25rem;
}


main .card .foreground.key .keyvisual{
grid-area:keyvisual;
width:100%;
}

main .card .foreground.key .keyvisual img{
max-width: 50%;
margin:.25rem auto 0 auto;
}

}


/* Tablet View */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

main .card .foreground,
main .card .foreground.key{
float:left;
width:calc(100% - 1.5rem);
margin:.25rem .75rem;
padding:0;
}

}

/* Tablet View */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

main .card .foreground,
main .card .foreground.key{
float:left;
width:calc(100% - 1.5rem);
margin:.25rem .75rem;
padding:0;
}

}


/* Desktop only */
@media screen and (min-width: 79.5rem){

main .card .foreground,
main .card .foreground.key{
float:left;
width:100%;
margin:.25rem 0;
padding:0;
}

}

/* Tablet and above */
@media screen and (min-width: 45rem){

main .card .foreground.key{
display:grid;
grid-template-rows:minmax(0,auto) auto minmax(0,auto);
grid-template-areas:
                "keyvisual title"
                "keyvisual text"
                "asset asset";
grid-template-columns:1fr 3fr;
grid-column-gap:.25rem;
}

main .card .foreground.key .keyvisual{
grid-area:keyvisual;
height:auto;
max-width:80%;
}

main .card .foreground.key .keyvisual .media{
float:left;
width:100%;
margin:1.5rem .5rem;
padding:0;
}
}


/* Mobile View */
@media screen and (max-width: 45rem){

article section .foreground .title{
grid-area:title;
display:inline-block;
width:100%;
margin:0;
padding:0;
}

article section .foreground .title .ol{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-m);
font-family:var(--accent-font-family);
}

article section .foreground .title .hl{
float:left;
width:100%;
margin:0;
padding:0;
font-size:var(--fs-h2);
}

article section .foreground .title .sl{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-s);
font-family:var(--primary-font-family);
}


article section .foreground .text{
grid-area:text;
display:block;
width:100%;
}

article section .foreground .asset{
grid-area:asset;
display:inline-block;
width:100%;
}
}



/* Tablet and above */
@media screen and (min-width: 45rem){

article section .foreground .title{
grid-area:title;
display:inline-block;
width:100%;
margin:0;
padding:0;
}

article section .foreground .title .ol{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-m);
font-family:var(--accent-font-family);
}

article section .foreground .title .hl{
float:left;
width:100%;
margin:0;
padding:0;
font-size:var(--fs-h1);
}

article section .foreground .title .sl{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-s);
font-family:var(--primary-font-family);
}

article section .foreground .text{
grid-area:text;
display:block;
width:100%;
}

article section .foreground .asset{
grid-area:asset;
display:inline-block;
width:100%;
}

}


article section .foreground.row figcaption.legend{
float:left;
width:100% !important;
margin:.25rem 0 0 0;
padding:0;
text-align:center;
background:none;
}

article section .foreground.row figcaption.legend p{
float:left;
width:100%;
margin:0;
padding:0;
text-align:center;
}

article section .foreground.row.big figcaption.legend{
float:left;
width:100% !important;
margin:.25rem 0 0 0;
padding:0;
text-align:center;
background:none;
}

article section .foreground.row.big figcaption.legend p{
float:left;
width:100%;
margin:0;
padding:0;
text-align:center;
}