@font-face {
    font-family: cocoSharp;
    src: url(/error/hama/default_maintenance/fonts/cocoSharpRegular.woff);
}

@font-face{
    font-family: cocoSharpBold;
    src: url(/error/hama/default_maintenance/fonts/cocoSharpBold.woff);
}

:root{
    --color-background: rgb(225, 235, 255);
    --color-text: rgb(185, 0, 125);
}

main{
    display: grid;
    height: 100vh;
}

body{
    font-family: cocoSharp;
    font-size: 19px;                /*Schriftgröße*/
    color: var(--color-text);
    margin: 0 auto;
    max-width: 1176px;
    background-color: var(--color-background);
}


.inner-container{
    margin: auto;
    max-width: 1176px;
    padding: 50px;
    place-items: center;
}

.grid-container{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
}

.grid-illustration{
    grid-column: 1/6 span;
}

.grid-illustration > svg{
    width: 100%;
    stroke: var(--color-text);
    stroke-width: 2.8px;
    max-height: 500px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.grid-text{
    grid-column: 8/5 span;
    /*margin-top: 60px;*/
}

h1{
    font-family: cocoSharpBold;
    font-size: 60px;                    /*Schriftgröße*/
    margin: 5px 0;
}

.grid-logo{
    grid-column: 2 span;
    max-height: 25px;
    width: auto;
    margin-bottom: 70px;
}

.Logo{
    fill:var(--color-text);
}


/* Handy */
@media screen and (max-width: 480px) {

    .grid-logo{
        grid-column: 4 span;
        max-height: 25px;
        /*width: auto;*/
        margin-bottom: 30px;
    }

    .grid-text{
        grid-column: 12 span;
        /*margin-top: 60px;*/
    }

    .grid-illustration > svg{
        width: auto;
        stroke: var(--color-text);
        stroke-width: 2.8px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .grid-illustration{
        grid-column: 12 span;
    }

    h1{
        font-family: cocoSharpBold;
        font-size: 38px;                   /*Schriftgröße*/
        margin: 2px 0;
    }

    body{
        font-size: 16px;                   /*Schriftgröße*/
    }

    body > .grid-illustration{
        margin: 0 auto;
    }
}