@charset "utf8";
    @font-face {
        font-family: 'arizonia';
        font-style: normal;
        font-weight: normal;
        src: local('arizonia'), url('arizonia/Arizonia-Regular.woff2') format('woff2');
    }
    :root{
        --orange: rgb(240,130,20);
        --dunkelgrau: rgb(92,92,92);
        --grau: rgb(192,192,192);
        --hellgrau: rgb(235,235,235);
    }
    *{
        margin:0;
        padding:0;
        font-family: verdana;
        font-size:16px;
        box-sizing:border-box;
        text-decoration: none;
        color:var(--dunkelgrau);
    }
    html{
        background-color: #FBFBFB;
    }
    header{
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:170px;
        background-color: var(--hellgrau);
        border-bottom:1px solid var(--orange);
    }
    header h1{
        color: var(--dunkelgrau);
        font-size:4.2rem;
        text-shadow: 2px 2px 4px #777676;
        text-align: center;
        margin-top:35px;
        width:70%;
        font-family:arizonia;
        line-height: 3.7rem;
    }
    header h1 span{
        display:block;
        font-size:2.2rem;
        font-family:inherit;
        text-shadow: inherit;
    }
    menu{
        position:fixed;
        top:10px;
        right:10px;
        width:200px;
        height:200px;
        transform: rotate(11deg);
    }
    menu li{
        list-style-type:none;
        border-radius:50%;
        position:absolute;
        line-height:100%;
        vertical-align: bottom;
        text-align: center;
        transition:all 0.8s;
        overflow:hidden;
        cursor: pointer;
        box-shadow: 0px 0px 7px #000;
    }
    menu li a{
        position:absolute;
        bottom:9px;
        left:0;
        width:100%;
        transition:all 1s;
    }
    menu li:first-of-type{
        list-style-type:none;
        height:100%;
        width:100%;
        background-color: var(--hellgrau);
        top:0px;
        left:0px;
    }
    menu li:first-of-type:hover{
        transform:scale(1.4);
    }
    menu li:first-of-type:hover a{
        transform:scale(1.9);
    }

    menu li:nth-of-type(2){
        top:15%;
        left:15%;
        height:70%;
        width:70%;
        background-color: var(--grau);
    }
    menu li:nth-of-type(2):hover{
        transform:scale(1.43);
    }
    menu li:nth-of-type(2):hover a{
        transform:scale(1.8);
    }

    menu li:nth-of-type(3){
        top:30%;
        left:30%;
        height:40%;
        width:40%;
        background-color: var(--orange);
    }
    menu li:nth-of-type(3):hover{
        transform:scale(2.5);
    }
    menu li:nth-of-type(3):hover a{
        transform:scale(1.5);
    }
    main{
        margin-top:180px;
    }
    /*main > * > *{
        border:1px solid red;
    }*/
    main > section{
        min-height:calc(100vH - 180px - 40px);
        width: 95%;
        margin:10px auto;
        margin-bottom:40px;
        padding:0px 20px 0px 0px;
    }
    main > section:last-of-type{
        margin-bottom: 40px;
    }
    footer{
        position: fixed;
        bottom: 0px;
        left:0px;
        height:40px;
        width:100%;
        padding:0px 20px;
        text-align:right;
        line-height:40px;
        background-color: var(--hellgrau);
        border-top:1px solid var(--orange);
    }
    a{
        cursor:pointer;
    }
    ul{
        margin-left:20px;
    }
    footer a{
        display:inline-block;
        margin-right:10px;
        font-size:.8rem;
    }
    .grid21{
        display:grid;
        grid-template-columns:2fr 1fr;
        grid-template-areas:"links rechts" ;
        gap:15px;
    }
    .grid12{
        display:grid;
        grid-template-columns:1fr 2fr;
        grid-template-areas:"links rechts" ;
        gap:15px;
    }
    .grid11{
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-areas:"links rechts" ;
        gap:15px;
    }
    .grid111{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-template-areas:"links mitte rechts" ;
        gap:15px;
    }
    .orange{
        color:var(--orange);
    }
    .center{
        text-align: center;
    }
    .line2{
        line-height: 1.8em;
    }
    .icon{
        max-width: 40px;
        float: left;
        margin: 0px 10px 5px 0px;
    }
    section > figure{
        text-align: center;
        line-height:calc(100vH - 180px - 40px);
        max-width:90%;
    }
    figure > img{
        vertical-align: middle;
    }
    h2{
        font-size:1.2em;
    }
    h3{
        margin-bottom: 7px;
    }