/* css for the main/front page */


#kernthemen { display: none;}

#full {
    grid-template-rows: 100vh 1fr calc(var(--sizF) * 0.5);
}


#full > div:nth-of-type(1) {
    /* Failback */
    background: no-repeat 66% 15% / cover url('../media/pictures/joerg/jm_2019_cafe_quer_l.jpg');
}
#full > div:nth-of-type(2) { grid-area: 3 / 1 / 4 / 4; }
#full > div:nth-of-type(3) { grid-area: 2 / 2 / 3 / 3; max-width: 60rem; }

@media screen and (max-width: 1200px) and (max-height: 800px){
    #full[data-which="A"] > div:nth-of-type(1) {
        background: no-repeat 66% 15% / cover url('../media/pictures/joerg/jm_2019_cafe_quer_l.jpg');
    }
    #full[data-which="B"] > div:nth-of-type(1) {
        background: no-repeat 40% 30% / cover url('../media/pictures/joerg/jm_2019_boulevard_l.jpg');
    }
    #full[data-which="C"] > div:nth-of-type(1) {
        background: no-repeat 30% 10% / cover url('../media/pictures/joerg/jm_2019_glattpark_l.jpg');
    }
}


@media screen and (min-width: 1200px), screen and (min-height: 800px){
    #full[data-which="A"] > div:nth-of-type(1) {
        background: no-repeat 66% 15% / cover url('../media/pictures/joerg/jm_2019_cafe_quer_xl.jpg');
    }
    #full[data-which="B"] > div:nth-of-type(1) {
        background: no-repeat 40% 30% / cover url('../media/pictures/joerg/jm_2019_boulevard_xl.jpg');
    }
    #full[data-which="C"] > div:nth-of-type(1) {
        background: no-repeat 30% 10% / cover url('../media/pictures/joerg/jm_2019_glattpark_xl.jpg');
    }
}


#head-circle { display: none;}

#head-name > div {  --sizJ: min(25vw,max(100px,15vw)); }

#head-aktuell > div {
    position: relative;
    --sizA: min(40vh,40vw,max(250px,15vw));
    left: max(5vw,calc(20vw - var(--sizA) * 0.5));
    top: calc(70vh - var(--sizA) * 0.5);
    display: grid;
    width: var(--sizA); height: var(--sizA);
    font-size: calc(var(--sizA) * 0.15);
    background-color: var(--colG);
    clip-path: circle(50% at 50% 50%);
    color: white; font-weight: 700;
    transform: rotate(-15deg);
}

#head-aktuell > div {
    animation-duration: 0.5s;
    animation-name: rotateA;
}

@keyframes rotateA {
    from { transform: rotate(0deg); }
    50% { transform: rotate(-20deg); }
    to { transform: rotate(-15deg); }
}

#head-aktuell > div > div { align-self: center; }
/* #head-aktuell > div > div > div:nth-of-type(1) { font-weight: 300;} */
/* #head-aktuell > div > div > div:nth-of-type(3) { font-weight: 300;} */


#dank { margin-top: 3em; border-top: solid 1px black;}
#dank p { margin-bottom: 1em;}
#dank p:nth-of-type(2) { font-weight: 600;}
#dank p:nth-of-type(3) { color: #444; text-align: right; font-size: 75%; font-weight: 200;}