@media screen and (min-width: 720px) {
    .main {
        font: 1.1rem/150% 'Segoe UI', Sans-Serif;
        color: rgb(6, 58, 116);
        width: 100vw;
    }
    
    .center{
        margin-left: auto;
        margin-right: auto;
        width: 22rem;
        text-align: center;
        font-size: 1.6rem;
    }
    
    .center2{
        margin-left: auto;
        margin-right: auto;
        width: 30rem;
        text-align: center;
        font-size: 2.3rem;
    }
    
    .navbar {
        margin: 0;
        float: right;
        overflow: hidden;
        background-color: rgb(6, 58, 116);
        position: fixed; 
        max-width: 20%;
    }
    
    .navbar a {
        float: right;
        display: block;
        text-align: center;
        padding: 1rem 1rem;
        text-decoration: none;
    }
        
    .navbar a:hover {    
        color: red;
    }
        
    .active{
        color: rgba(244,156,19,1);
    }
        
    .navcolor{
        color: white;
    }
    
    .text{
        text-align: center;
        font-weight: bold;
        margin-top: 3vh;
        font-size: 3vw;
        color: rgb(6, 58, 116);
    }
    
    .bluesquare{
        float: left;
        margin-left: 10vw;
        width: 14vw;
        height: 100vh;
        background-color: rgb(8, 68, 136);
        border-left: 1px solid red;
        border-right: 1px solid red;
    }
    
    .yellowsquare{
        position:absolute;
        bottom: 5vh;
        height: 10vh;
        width: 100%;
        background: linear-gradient(to right, rgba(244,156,19,0.8) 30%, rgba(255,255,255,1));
        z-index: -1;
    }
    
    .redsquare{
        float: right;
        margin-right: 6vw;
        background-color: rgba(255, 0, 0, 0.8);
        width: 23vw;
        height: 10vh;
        text-align: center;
        color: white;
        font-size: 1.1vw;
        transform: rotateZ(-10deg);
    }
    
    .text2{
        margin-top: 1vh;
        text-align: center;
        color: white;
        font-size: 2vw;
        font-family: cursive;
    }
    
    .icon{
        margin-top: 5vh;
        margin-bottom: 3vh;
        margin-left: 3.5vw;
        margin-right: auto;
        max-height: 9rem;
        max-width: 9rem;
    }
    
    .logo{
        margin-top: 5vh;
        margin-bottom: 10vh;
        margin-left: 11vw;
        margin-right: auto;
        max-width: 35%;
        max-height: 15%;
    }
    
    .top{
        background-color: rgb(6, 58, 116);
        color: white;
        height: 30%;
        max-width: 100vw;
    }
    
    .toptext{
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        padding-top: 1.8rem;
        padding-bottom: 1.8rem;
    }
    
    .eintrag{
        color: red;
        text-align: center;
        margin-top: 1rem;
    }
    
    .freischalten{
        text-align: center;
        color: rgb(6, 58, 116);
    }
    
    .wasserware{
        margin-left: auto;
        margin-right: auto;
        width: 18vw;
        text-align: center;
        background-image: url("Kringel/kringel.svg"); 
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .hintergrund{
        background: linear-gradient(90deg, rgba(194,205,230,0.8) 50%, rgba(255,255,255,1) 100%);
    }
    
    .links{
        
        background: linear-gradient(90deg, rgba(194,205,230,1) 80%, rgba(255,255,255,1) 100%);
        max-width: 50%;
        height: 10vh;
    }
    
    .links1{
        background: linear-gradient(90deg, rgba(246,162,23,0.6) 80%, rgba(255,255,255,1) 100%);
        max-width: 50%;
        height: 10vh;
    }
    
    .zeile{
        font-size: 1.2vw;
        text-align: center;
        margin-top: 1vh;
        padding-top: 1rem;
    }
    
    .flyerbild{
        width: 40vw;
        float: right;
        margin-top: 10vh;
        margin-right: 4vw;
    }
}

@media screen and (max-width: 700px) {
    .main {
        font: 1.1rem/150% 'Segoe UI', Sans-Serif;
        color: rgb(6, 58, 116);
        width: 100vw;
    }
    
    .center{
        margin-left: -5vw;
        padding-bottom: 5vw;
        width: 100vw;
        text-align: center;
        font-size: 1.8rem;
    }
    
    .center2{
        max-width: 100vw;
        font-size: 2rem;
        margin-bottom: 5vw;
        text-align: center;
    }
    
    .navbar {
        margin: 0;
        float: right;
        overflow: hidden;
        background-color: rgb(6, 58, 116);
        position: fixed; 
        max-width: 100vw;
    }
    
    .navbar a {
        float: right;
        display: block;
        text-align: center;
        padding: 1rem 1rem;
        text-decoration: none;
    }
        
    .active{
        color: rgba(244,156,19,1);
    }
        
    .navcolor{
        color: white;
    }
    
    .yellowsquare{
        position: static;
        bottom: 10vh;
        height: 10vh;
        width: 100%;
        background: linear-gradient(to right, rgba(244,156,19,0.8) 30%, rgba(255,255,255,1));
        z-index: -1;
    }
    /*
    .redsquare{
        float: right;
        margin-right: 6vw;
        margin-top: 1vh;
        background-color: rgba(255, 0, 0, 0.8);
        width: 40vw;
        height: 10vh;
        text-align: center;
        color: white;
        transform: rotateZ(-10deg);
    }
*/
    .text{
        text-align: center;
        font-weight: bold;
        padding-top: 3vh;
        font-size: 8vw;
        color: rgb(6, 58, 116);
    }
    
    .text2{
        display: none;
    }
    
    .icon{
        display: none;
    }
    
    .logo{
        margin-top: 5vh;
        margin-bottom: 10vh;
        margin-left: 12vw;
        margin-right: auto;
        max-width: 80%;
        max-height: 80%;
    }
    
    .top{
        background-color: rgb(6, 58, 116);
        color: white;
        height: 30%;
        max-width: 100vw;
        padding-top: 5.5vh;
    }
    
    .toptext{
        text-align: center;
        font-size: 5vw;
        font-weight: bold;
        padding-top: 1.8rem;
        padding-bottom: 1.8rem;
    }
    
    .eintrag{
        color: red;
        text-align: center;
        margin-top: 1rem;
    }
    
    .freischalten{
        text-align: center;
        color: rgb(6, 58, 116);
    }
    
    .wasserware{
        margin-left: auto;
        margin-right: auto;
        width: 65vw;
        height: 4.7vh;
        text-align: center;
        background-image: url("Kringel/kringel.svg"); 
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .hintergrund{
        background: linear-gradient(90deg, rgba(194,205,230,0.8) 50%, rgba(255,255,255,1) 100%);
    }
    
    .links{
        background: linear-gradient(90deg, rgba(194,205,230,1) 80%, rgba(255,255,255,1) 100%);
        max-width: 100%;
        height: 15vh;
    }
    
    .links1{
        background: linear-gradient(90deg, rgba(246,162,23,0.6) 80%, rgba(255,255,255,1) 100%);
        max-width: 100%;
        height: 15vh;
    }
    
    .zeile{
        font-size: 5vw;
        text-align: center;
        margin-top: 1vh;
        padding-top: 1rem;
    }
    
    .flyerbild{
        margin-bottom: 3vh;
    }

    .flyerbild img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 40vh;
    }
}