main.epresto.edu7 article {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 6px 6px 10px silver;
    padding: 30px;
    padding-top: 15px;
    margin-bottom: 15px;
    grid-template-rows: 70px 1fr;
}

main.epresto.edu7 article h1{
    font-size: 1.5em;
    margin: 0px;
    margin-bottom: 0.3em;
}

main.epresto.edu7 article h2 {
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

main.epresto.edu7 article h3 {
    font-size: 1em;
    margin: 0px;
    line-height: 1.4em;
}

main.epresto.edu7 article .butDetail {
    width: 70px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--theme-accent-color);
    background-repeat: no-repeat;
    background-size: 35px 35px;
    background-position: center;
}

main.epresto.edu7 article .butDetail:hover {
    background-color: var(--theme-main-color);
    background-image: url('../Pix/IconButtonDetailShowHover.svg');
}

main.epresto.edu7 article .butDetail.show {
    background-image: url('../Pix/IconButtonDetailShow.svg');        
}

main.epresto.edu7 article .butDetail.show:hover {           
    background-image: url('../Pix/IconButtonDetailShowHover.svg');
}

main.epresto.edu7 article .butDetail.hide {
    background-image: url('../Pix/IconButtonDetailHide.svg');
}

main.epresto.edu7 article .butDetail.hide:hover {
    background-image: url('../Pix/IconButtonDetailHideHover.svg');
}

main.epresto.edu7 article.master .data{
    display: flex;
    flex-direction: column;
    margin-left: 0.4em;
}

main.epresto.edu7 article.master .data p  {
    margin: 0px;
}

main.epresto.edu7 article.master .data .dataItem span {
    background-color: var(--theme-accent-color);
    font-family: var(--theme-fontFamilyStandardBold-font);
    color: #ffffff;
    line-height: 1.7em;
    display: inline;
    margin: 0 -0.4em;
    padding: 0.1em 0.4em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;


}

main.epresto.edu7 article.master .data .dataItem.yellow span {
    background-color: #f7a84b;
}

main.epresto.edu7 article.master .data .dataItem.red span {
    background-color: #e63024;
}

main.epresto.edu7 article.master:hover {
    background-color: #f3f3f2;
}


/* Article allgemeine Angaben Listenansicht/Detailansicht */

main.epresto.edu7 article.master {
    width: 100%;
    cursor: pointer;
    display: grid;
    grid-template-areas:
    'cell1 buttonDetails'
    'cell2 cell3'
    'cell2 cell3';
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 70px 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 0px;
}

@media (max-width: 43em) {
    main.epresto.edu7 article.master {
        grid-template-areas:
            'cell1 buttonDetails'
            'cell2 cell2'
            'cell3 cell3';
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto auto;
    }
}

main.epresto.edu7 article .butDetail {
    grid-area: buttonDetails;
    justify-self: flex-end;
    margin-right: -15px;
}


main.epresto.edu7 article div.cell1 {
    grid-area: cell1;
}

@media (max-width: 43em) {
    main.epresto.edu7 article div.cell1 {
        display: flex;
        align-items: center;
    }
}

main.epresto.edu7 article div.cell2 {
    grid-area: cell2;
}

main.epresto.edu7 article div.cell2 p{
    margin-top: 0;
}

main.epresto.edu7 article div.cell3 {
    grid-area: cell3;
    display: flex;
    justify-content: center;
    align-self: flex-start;
}

main.epresto.edu7 article div.cell3 figure {
    width: 60%;
    height: auto;
    margin: 0;
    margin-top: -20px;
    display: flex;
}

@media (max-width: 62em) {
    main.epresto.edu7 article div.cell3 figure {
        width: 80%;
        margin-top: 1.6em;
        
    }
}

@media only screen and (orientation: portrait) {
    main.epresto.edu7 article div.cell3 figure {
        width: 50%;
        min-width: 140px;
        
        
    }
}

main.epresto.edu7 article div.cell3 figure img, main.epresto.edu7 article div.cell3 figure div.placeHolder {
    width: 100%;
    aspect-ratio: 1;
    
    border-radius: 50%;
}

main.epresto.edu7 article div.cell3 figure img {
    object-fit: cover;
}

main.epresto.edu7 article div.cell3 figure.mainImage div.placeHolder {
        
    background-image: url('../Pix/PlaceHolderArticle.svg');
    background-repeat: no-repeat;
    background-size: 300%;   
   
}


/* Artikel Detailansicht, abweichende Angaben vom normalen Artikel */

main.epresto.edu7 article.detail {
    width: 100%;
    display: grid;
    grid-template-areas:
        'cell1 buttonDetails'
        'cell2 cell3'
        'cell4 cell6'
        'cell5 cell6';
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
}



@media (max-width: 43em) {
    main.epresto.edu7 article.detail {
        grid-template-areas:
            'cell1 buttonDetails'
            'cell2 cell2'
            'cell3 cell3'
            'cell4 cell4'
            'cell5 cell5'
            'cell6 cell6';
        grid-template-columns: 2fr 1fr;
        grid-column-gap: 0px;
    }
}

/* Seminarnummer */
main.epresto.edu7 article.detail .cell1 {
    grid-area: cell1;
    margin-top: 20px;
}

@media (max-width: 43em) {
    main.epresto.edu7 article.detail .cell1 {
        margin-top: 0px;
        display: flex;
        align-items: center;
        height: 100%;
    }
}

/* Überschrift, Text */
main.epresto.edu7 article.detail div.cell2 {
    grid-area: cell2;
    display: block;
}

/* Seminarfoto */
main.epresto.edu7 article.detail div.cell3 {
    grid-area: cell3;
    display: flex;
    justify-content: center;
    
}

@media (max-width: 62em) {
    main.epresto.edu7 article.detail div.cell3 figure {
        margin-top: 0px;
    }
}


/* Veranstaltungsort */
main.epresto.edu7 article.detail .cell4 {
    border-top: 3px solid var(--theme-accent-color);
    margin-top: 20px;
    grid-area: cell4;
}

/* Dozierende */
main.epresto.edu7 article.detail .cell5 {
    border-top: 1px solid var(--theme-accent-color);
    border-bottom: 3px solid var(--theme-accent-color);
    grid-area: cell5;
    
}

@media (max-width: 43em) {
    main.epresto.edu7 article.detail .cell5 {
        border-bottom: 0;
    }
}

/* Detailansicht aside */

main.epresto.edu7 article.detail .cell6 {
    border-top: 3px solid var(--theme-accent-color);
    border-bottom: 3px solid var(--theme-accent-color);
    grid-area: cell6;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    /*display: flex;*/
    /*flex-direction: column;*/ /* einkommentieren, wenn aside nicht über ganze Höhe gehen soll */
    /*justify-content: center;*/
    /*align-items: stretch;*/
}

@media (max-width: 43em) {
    main.epresto.edu7 article.detail .cell6 {
        margin-top: 10px;
    }
}

main.epresto.edu7 article.detail header {
    margin-left: 30px;
}

@media (max-width: 62em) {
    main.epresto.edu7 article.detail header {
        margin-left: 10px;
    }
}

@media (max-width: 43em) {
    main.epresto.edu7 article.detail header {
        margin-left: 0px;
    }
}

/* Detailansicht Verschachtelung: Artikel in Artikel */

main.epresto.edu7 article.detail article {
    border-radius: 0;
    box-shadow: unset;
    width: 100%;
    display: grid;
    grid-template-areas:
        'cell2 cell3';
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 0fr;
    padding-right: 20px;
    /*padding-bottom: 10px;*/
    padding-top: 0px;
    margin: 0px;
}

@media (max-width: 62em) {
    main.epresto.edu7 article.detail article {
        padding: 10px;
    }
}

@media (max-width: 43em) {
    main.epresto.edu7 article.detail article {
        padding-left: 0px;
        padding-right: 0px;
    }
}

main.epresto.edu7 article.detail article div.cell2 {
    grid-area: cell2;
    display: flex;
    flex-direction: column;
}

main.epresto.edu7 article.detail article div.cell2 p {
    margin: 0px;
}

main.epresto.edu7 article.detail article div.cell2 p.description {
    margin-top: 1em;
}

main.epresto.edu7 article.detail article div.cell3 {
    grid-area: cell3;
    justify-content: center;
    margin-top: 0;        
}

@media (max-width: 43em) {
    main.epresto.edu7 article.detail article div.cell3 {
        height: unset;
    }
}

main.epresto.edu7 article.detail article div.cell3 figure {
    width: 100%;
    height: auto;
    display: flex;
    margin-left: 10px;
    margin-top: 0px;
    min-width: 120px;
    
}

@media (max-width: 43em) {
    main.epresto.edu7 article.detail article div.cell3 figure {
        min-width: 75px;
    }
}

main.epresto.edu7 article.detail article div.cell3 figure img.placeHolder {   
    background-color: var(--theme-main-color);    
}

main.epresto.edu7 article.detail aside {
    width: 100%;
    border-radius: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 62em) {
    main.epresto.edu7 article.detail aside {
        padding: 10px;
    }
}

@media (max-width: 43em) {
    main.epresto.edu7 article.detail aside {
        padding-left: 0px;
        padding-right: 0px;
    }
}


main.epresto.edu7 article.detail #butBook {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20%;
    border-radius: 6px;
    
    align-self: center;
}

main.epresto.edu7 article.detail aside .data {    
    margin-bottom: 1.4em;   
}

main.epresto.edu7 article.detail aside .data p {
    margin: 0px;
        
    font-family: var(--theme-fontFamilyStandardRegular-font);
}

main.epresto.edu7 article.detail aside .data .dataItem.placesAvailable {
    background-color: var(--theme-accent-color);
    font-family: var(--theme-fontFamilyStandardRegular-font);
    color: #ffffff;
    line-height: 1.7em;
    display: inline;
    margin: 0 -0.4em;
    padding: 0.1em 0.4em;
}

main.epresto.edu7 article.detail div.placesAvailabilityIndicator{
    width: 100%;
    height: 20px;
    background-color: var(--theme-accent-color);
    background-image: linear-gradient(var(--theme-main-color), var(--theme-main-color));
    background-repeat: no-repeat;
    margin-bottom: 4px;
}

main.epresto.edu7 article.detail div.placesAvailabilityIndicator.yellow {
    background-color: #f7a84b;
}

main.epresto.edu7 article.detail div.placesAvailabilityIndicator.red {
    background-color: #e63024;
    
}