@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;800&display=swap');
@font-face {
    font-family: 'Chalkduster';
    src:url('fonts/Chalkduster.ttf.woff') format('woff'),
        url('fonts/Chalkduster.ttf.svg#Chalkduster') format('svg'),
        url('fonts/Chalkduster.ttf.eot'),
        url('fonts/Chalkduster.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DM sans';
    src:url('fonts/DMSans_24pt-Regular') format('ttf'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DM sans';
    src:url('fonts/DMSans_24pt-Medium') format('ttf'); 
    font-weight: medium;
    font-style: normal;
}
@font-face {
    font-family: 'DM sans';
    src:url('fonts/DMSans_24pt-Bold') format('ttf'); 
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DM sans';
    src:url('fonts/DMSans_24pt-Italic') format('ttf'); 
    font-weight: normal;
    font-style: italic;
}

:root {
    --font-display: 'Mukta', sans-serif;
    --font-copy: 'Mukta', sans-serif;
    --golimedia-blue: #4D7DB3;
    --golimedia-yellow: #CAE61A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, 
body {
    width: 100%;
    height: 100%;
}
body {
    background-color: white;
    font-family: var(--font-copy);
    color: var(--golimedia-blue);
    overflow-x: hidden;
}
img {max-width: 100%;}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr auto auto;
    grid-template-areas: 
        "empty1 empty1 empty1"
        "empty2 empty2 logo"
        "empty3 empty3 kontakt";
}
#logo {
    grid-area: logo;
    display: grid;
    place-items: center;
    & img {
        width: 61%;
        margin: 2rem 0;
    }

}
#hinweis {
    width: 120%;
    position: absolute;
    left: -15%;
    top: clamp(150px, 25%, 341px);
    rotate: -14deg;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    background: var(--golimedia-yellow);
    font-family: var(--font-display);
    font-size: clamp(2em, 5.25cqi,4.25em);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.75rem 5%;
    padding-right: clamp(3rem, 10%, 12rem);
    color: var(--golimedia-blue);

}
#image {
    position: absolute;
    bottom: 0;
    height: 81%;
    min-height: 300px;
    align-content: end;
}
#image img {
    height: 100%;
    object-fit: contain;
}

#kontakt {
    grid-area: kontakt;
    text-align: right;
    padding: 0.5rem 1rem;
    font-size: clamp(0.95rem, 1cqi, 1.75rem);
}
@media (orientation: landscaped) {
    #background__landscape {
        position: absolute;
        bottom: 0;
        left: 6%;
        width: 58%;
        height: 100%;
        background-image: url(/golimedia/teaser/images/hund_katze_teaser.png);
        background-size: contain;
        background-position: left bottom;
        background-repeat: no-repeat; 
    }
    #wrapper {
        position: absolute;
        grid-template-rows: repeat(3,33%);
        grid-template-columns: repeat(6, 16.6%);
        grid-template-areas: 
            "empty logo logo"
            "empty hinweis hinweis"
            "empty empty kontakt"
    }
    #logo {
        grid-row: 1/2;
        grid-column: 4/7;
        justify-self: start;
        width: 100%;
        & img {
            justify-self: start;
        }
    }
    #hinweis {
        grid-row: 2/3;
        grid-column: 4/7;
        text-align: left;
        & p:first-of-type {
            margin-left: -2rem;
        }
        & p:nth-of-type(2) {
            margin-left: 6rem;
        }
        & p:last-of-type {
            margin-left: 6.5rem;
        }
    }
    #kontakt {
        grid-row: 3/4;
        grid-column: 3/7;
        text-align: right;
        padding-right: 1.5rem;
    }
}