article * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    border: 0px;
}


article h1 {
    font-size: 1.6em;
    margin-bottom: 1em;
}



article h2 {

    font-size: 2.6em;
    line-height: 1.1em;
    margin-bottom: .4em;
}

article h3 {
    margin-bottom: 0.2em;
}

article p {
    margin-bottom: 1em;
}

article small {
}

article ul {
    margin-left: 1.0em;
    padding-left: 0;
    margin-bottom: 1em;
}




article a.button {
    grid-area: button;
    color: var(--testcolor-sepia);
    /*color: var(--testcolor-sepia4-4);*/
    /*color: var(--testcolor-sepia4-9);*/

    /*color: var(--testcolor-hellblau);*/
    /*color: var(--testcolor-hellblau4-6);*/
    
    /*color: #ffffff;*/

    font-size: 1.0em;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-left: 5px;
    padding-right: 5px;
    width: 200px;
    text-align: center;
    background-color: transparent;
    /*background-color: var(--testcolor-sepia);*/
    /*background-color: var(--testcolor-sepia4-4);*/
    /*background-color: var(--testcolor-hellblau);*/
    /*background-color: var(--testcolor-hellblau4-6);*/

    border: 1px solid var(--testcolor-sepia);
    /*border: 1px solid var(--testcolor-sepia4-4);*/
    /*border: 1px solid var(--testcolor-sepia4-9);*/
    /*border: 1px solid var(--testcolor-hellblau);*/
    /*border: 1px solid var(--testcolor-hellblau4-6);*/


    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

article a.button.solidSepia {
    background-color: var(--theme-neutral-color);
    color: #ffffff;
}

article a.button.solidHellblau {
    background-color: var(--theme-main-color);
    color: #ffffff;
}

article a.button.outlineHellblau {
    border: 1px solid var(--theme-main-color);
    color: var(--theme-main-color);
}

article a.button.kontrastSepia{

}

article a.button.kontrastBlau{

}



article.layout {
    /*margin-bottom: 3em;*/
}

.test{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6em;
    height: 100px;
    border: 3px solid black;
}
.test .red{
    background-color: red;
}

.test .blue{
    background-color: blue;
}

.regularLayout.imageRIGHT article.layout {
    display: grid;
    grid-template-areas:
        'text image'
        'button button';
    /*grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), auto));


        
    grid-template-rows: repeat(2, min-content);
    grid-template-rows: auto auto;
    column-gap: 6em;
    row-gap: 2em;
}

@media (max-width: 82em) {

    .regularLayout.imageRIGHT article.layout {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 62em) {

    .regularLayout.imageRIGHT article.layout {
        grid-template-areas:
            'text'
            'image'
            'button';
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
}

.regularLayout.imageRIGHT article.layout figure {
    grid-area: image;
    justify-self: flex-end;
}

@media (max-width: 62em) {

    .regularLayout.imageRIGHT article.layout figure:has(img.portrait) {
        margin: 0;
        width: 80%;
        justify-self: center;
        
    }
}

.regularLayout.imageRIGHT article.layout figure img.portrait {
    width: auto;
    max-height: 60vh;
    max-height: 80vh;
}

@media (max-width: 82em) {

    .regularLayout.imageRIGHT article.layout figure img.portrait {
        max-height: 60vh;
    }
}

/*@media (max-width: 62em) and (orientation:portrait {

    .regularLayout.imageRIGHT article.layout figure img.portrait {

    }
}
*/

@media (max-width: 62em) {

    .regularLayout.imageRIGHT article.layout figure img.portrait {
        
        width: 80%;
        width: 100%;
        max-height: unset;
    }
}

.regularLayout.imageRIGHT article.layout a.button{
    justify-self: center;
    margin-left: 100px;
}

@media (max-width: 62em) {

    .regularLayout.imageRIGHT article.layout a.button {
        margin-left: 0;
    }
}


/**/
.regularLayout.imageLEFT article.layout {
    display: grid;
    grid-template-areas:
        'image text'
        'button button';
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    grid-template-rows: auto auto;
    column-gap: 6em;
    row-gap: 2em;

}


.regularLayout.imageLEFT article.layout .text {
    justify-self: flex-end;
}


@media (max-width: 62em) {

    .regularLayout.imageLEFT article.layout {
        grid-template-areas:
            'text'
            'image'
            'button';
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;

    }
}

.regularLayout.imageLEFT article.layout a.button {
    justify-self: center;
    margin-left: 100px
}

@media (max-width: 62em) {

    .regularLayout.imageLEFT article.layout a.button {
        margin-left: 0;
    }
}


.regularLayout.imageLEFT article.layout .text, .regularLayout.imageRIGHT article.layout .text {
    grid-area: text;
    width: 80%;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}

@media (max-width: 82em) {
    .regularLayout.imageLEFT article.layout .text, .regularLayout.imageRIGHT article.layout .text {
        width: 100%;
    }
}


@media (max-width: 62em) {
    .regularLayout.imageLEFT article.layout .text {
    /*margin-left: 5%;*/
}
}


.regularLayout.NOimage article.layout {
    display: grid;
    grid-template-areas:
        'text text'
        'button button';
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    grid-template-rows: auto auto;
    column-gap: 6em;
    row-gap: 1em;
}

@media (max-width: 62em) {

    .regularLayout.NOimage article.layout {
        grid-template-areas:
            'text'
            'image'
            'button';
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
}


.regularLayout.NOimage article.layout .text {
    grid-area: text;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.regularLayout.NOimage article.layout a.button {
    justify-self: center;
    margin-left: 100px;
}

@media (max-width: 62em) {

    .regularLayout.NOimage article.layout a.button {
        margin-left: 0;
    }
}