*{
    margin: 0;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: black;
    background-color: white;
}

section {
    padding: 0 20px;
    margin-bottom: 20px;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
    color: #113C25;
    font-weight: 600;
    margin-left: 25px;
}

h2 {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 30px 0 0 0;     
}

.text-cakes {
    font-size: 17px;
    margin: 5px;
    }

h2.teesorten {
    font-size: 26px;
    color: #015c2c;
    font-weight: 700;
    text-align: center;
    margin: 0;
      
      
}

h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-top: 16px;
      
}

h4 {
    font-size: 20px;
    color: #01622f;
    font-weight: 700;
    text-align: center;
    margin: 40px 0 10px 0;     
}

p {
    font-size: 16px;
    margin: 20px 0 10px 10px;
}

p.tee {
    margin: 10px;    
    font-size: 16px;   
}

p.teesorten {
    font-size: 16px;
    margin: 10px 0 5px 10px;
}

img {
    max-width: 100%;
}

.current {
    color: #fff;
    background-color: #5d5555;
}


header {
    background-image: url(../images/cover-5-300.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 300px;
    margin: 0;
    padding: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    margin: 0 auto;
}



.logo {
    margin: 10px 0 20px 20px;
    max-height: 140px;
}

.container {
    position: relative;
    max-width: 100%; 
    margin-top: 20px;
}

.content {
    position: absolute;
    top: 37%; 
    background: rgba(0, 0, 0, 0.5); 
    color: #fff;
    width: 90%;
    left: 4%;
    height: 25%;
    border: 3px solid #fff;
    
}

figure {
    margin-top: 10px;
    margin-bottom: 15px;
}

figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


figcaption {
    background-color: yellowgreen;
    color: white;
    font-size: 14px; 
    height: 20px;
    font-style: italic;
    padding: 5px;
    text-align: center;
}

.one {
    grid-column: span 2;
    grid-row: 1/2;
}

.two {
    grid-column: span 4;
    grid-row: 2/3;
}


.three {
    grid-column: span 2;
    grid-row: 1/2;
 }

.background-grey {
    background-color: #E5E5E5;
    margin: 20px 0 0 0;
}

.text-background-grey {
    font-size: 16px;
    margin: 10px;
    margin-right: 10px;
}

.col-12 {
    grid-column: 1/-1;
}

.col-9 {
    grid-column: span 4;
}

.col-8 {
    grid-column: span 8;
}

.col-6 {
    grid-column: span 4;
}


.col-5 {
    grid-column: span 4;
}

.col-4 {
    grid-column: span 4;
}

.col-3 {
    grid-column: span 2;
}

.col-2 {
    grid-column: span 2;
}



form label {
    display: grid;
    grid-gap: 10px;
    margin: 20px;
}

form input {
    height: 30px;
    padding: 5px;
}

form textarea {
    height: 140px;
    padding: 5px;
}

.grid-1 {
    grid-template-columns: auto 1fr;
    margin: 20px 20px;
}

checkbox {
    margin: 0 0 0 5px;
}

.ckeckboxtext {
    margin-top: 7px;
    padding: 0;
}

.grid-1 a {
    color: #009245;
}

button {
    font-size: 15px;
    color: #fff;
    background-color: #009245;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    margin-top: 9px;
    padding: 5px;
}


.grid-1-1 {
    display: grid;
    grid-template-columns: auto 1fr;
}

.grid {
    display: grid;
    grid-gap: 20px;
}

.kont {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

footer {
    background-color: #009245;
    color: #fff;
    text-align: left;
    padding: 15px 0;
    margin-top: 60px;
}

a {
    text-decoration: none;
}

footer a {
    color: #fff;
}


.grid a  {
    color: #000;
    text-align: center;
    
}

.icon {
    height: 30px;
    width: 30px;
    margin: 9px 10px 5px 7px;
}

.text-footer {
    font-size: 18px;
    margin: 15px 0 5px 10px;
}


#mobile-navi {
    display: inherit;
}

#mobile-lines {
    display: inherit;
}

#menu-main {
    display: none;
    margin-right: 20px;
}


.c-4-1 {
	grid-column: 1/-1;
    border: 3px solid #515c56;
    box-shadow: 0 0 6px #999;
}

.c-8-1 {
	grid-column: 1/-1;
}

.c-4-2 {
	grid-column: 1/-1;
    border: 3px solid #515c56;
    box-shadow: 0 0 6px #999;
}

.c-8-2 {
	grid-column: 1/-1;
}







@media only screen and (min-width:600px) {

    .grid-container {
        grid-template-columns: repeat(8, 1fr);
    
    }

    header {
    background-image: url(../images/cover-5-400.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 400px;
    margin: 0;
    padding: 0;
}
    
    h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    color: #113C25;
    font-weight: 600;
    margin-left: 25px;
}

    h2 {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin: 40px 0 0 0;
      
}
    
    .text-cakes {
    font-size: 22px;    
    margin-top: 10px;
    }

    h3 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-top: 16px;
      
}
    
    h4 {
    font-size: 23px;
    color: #01622f;
    font-weight: 700;
    text-align: center;
    margin: 50px 0 10px 0;     
}
    
    p {
    font-size: 18px;
}
    
    h2.teesorten {
    font-size: 33px;
    color: #015c2c;
    font-weight: 700;
    text-align: start;
    margin: 0;
    margin-left: 10px;    
      
}

    
    p.tee {
    margin: 15px;    
    font-size: 18px;   
}

    
    .logo {
    margin: 22px 0 70px 20px;
}
    
    nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px;
    justify-content: flex-end;
    margin-top: 23px;
}

    nav ul a {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    background-color: #009245;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    padding: 7px 10px;
}

    nav ul a:hover {
    background-color: darkgray;
    opacity: 1;
}

    nav ul a:focus {
    background-color: #576551;
}

    nav ul a:active {
    background-color: #06f021;
}
    
    figure {
    margin: 0;
     
}

    figcaption {
    background-color: yellowgreen;
    color: white;
    font-style: italic;
    padding: 2px;
    text-align: center;
}
    
    
   .background-grey {
    background-color: #E5E5E5;
    margin: 20px 0 0 0;
} 
    
    #mobile-navi {
        display: none;
    }
    
    #mobile-lines {
        display: none;
    }
    
    #menu-main {
        display: inherit;
        grid-column: span 5;
        margin-top: 10px;
    }
    
    
    .one {
    grid-column: span 2;
    grid-row: 1/2;  
    
}

    .two {
    grid-column: span 4;
    grid-row: 1/2;
}


    .three {
    grid-column: span 2;
    grid-row: 1/2;
 }  
    
    .col-10 {
    grid-column: span 6;
}
    
    .col-9 {
    grid-column: span 6;
}
    
    .col-6 {
    grid-column: span 4;
}

    
    .col-5 {
    grid-column: span 4;
}
    
    .col-3 {
    grid-column: span 2;
}
    
    footer {
    background-color: #009245;
    margin-top: 60px;
}
    
    .icon {
    height: 30px;
    width: 30px;
    margin: 11px 10px 5px 7px;
}

    .text-footer {
    margin: 15px 0 5px 10px;
}
    
    .background-grey {
    background-color: #E5E5E5;
    margin: 10px 0 0px 0;
}

    .text-background-grey {
    font-size: 16px;
    margin: 20px;
    margin-right: 10px;
}
    
  .c-8-1 {
        grid-column: span 5;
        grid-column: 4/9;
        margin-top: 9px;
        
    }
    
    .c-4-1 {
        grid-column: span 3;
        grid-column: 1/4;
        border: 3px solid #515c56;
        box-shadow: 0 0 6px #999;
    }
    
    .c-8-2 {
        grid-column: span 5;
        grid-column: 1/6;
        margin-top: 9px;
    }
    
    .c-4-2 {
        grid-column: span 3;
        grid-column: 6/9;
        border: 3px solid #515c56;
        box-shadow: 0 0 6px #999; 
    }
    
    checkbox {
    margin: 0 0 0 5px;
}

    .ckeckboxtext {
    margin-top: 4px;
    padding: 0;
}
    
    



    /* CSS für Tablet und Desktop */
}


@media only screen and (min-width:1200px) {

    .grid-container {
        grid-template-columns: repeat(12, 1fr);
        max-width: 1180px;
        margin: 0 auto;
        padding: 0;
    }

    header {
    background-image: url(../images/cover-5-700.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 650px;
    margin: 0;
    padding: 0;
        top: 0;
}
    
    h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 53px;
    color: #113C25;
    font-weight: 600;
    margin-left: 25px;    
}
    
    h2 {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin: 60px 0 10px 0;
      
}
    
    .text-cakes {
        font-size: 32px;
        margin-top: 10px;
    }
    
    h2.teesorten {
    font-size: 38px;
    color: #015c2c;
    font-weight: 700;
    text-align: start;
    margin: 0;
    margin-left: 10px;    
      
}

    h3 {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-top: 25px;
      
}
    
    h4 {
    font-size: 30px;
    color: #01622f;
    font-weight: 700;
    text-align: center;
    margin: 60px 0 10px 0;     
}
    
    p {
    font-size: 22px;
}
    
    p.tee {
    margin: 20px;    
    font-size: 20px;   
}
       
    p.teesorten {
    font-size: 22px;   
}
    
    p.kont-p {
    font-size: 21px;   
}
    
    .logo {
    margin: 23px 0 150px 10px;
}
    
    
    .container {
    position: relative;
    max-width: 100%; 
    margin-top: 20px;
}

    .content {
    position: absolute;
    top: 37%; 
    background: rgba(0, 0, 0, 0.5); 
    color: #fff;
    width: 90%;
    left: 4%;
    height: 25%;
    border: 3px solid #fff;
    
}
    
    figure {
    margin: 0;
     
}

    figcaption {
    background-color: yellowgreen;
    color: white;
    font-style: italic;
    padding: 2px;
    text-align: center;
}
    
    
    
    nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px;
    justify-content: flex-end;
    margin-top: 27px;
}

    nav ul a {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    background-color: #009245;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    border-radius: 3px;
    padding: 7px 10px;
}
    
    .current {
    color: #fff;
    background-color: #5d5555;
}

    nav ul a:hover {
    background-color: darkgray;
    opacity: 1;
}

    nav ul a:focus {
    background-color: #576551;
}

    nav ul a:active {
    background-color: #06f021;
}

    .one {
    grid-column: span 3;
    grid-row: 1/2;  
    
}

    .two {
    grid-column: span 6;
    grid-row: 1/2;
}


    .three {
    grid-column: span 3;
    grid-row: 1/2;
 }  
    
    .col-10 {
    grid-column: span 10;
}
    
    .col-9 {
    grid-column: span 9;
}
    
    .col-6 {
    grid-column: span 6;
}
    
    .col-5 {
    grid-column: span 5;
}
    
    
    .col-3 {
    grid-column: span 3;
}

     footer {
    background-color: #009245;
    margin-top: 70px;
}
    
    .icon {
    height: 30px;
    width: 30px;
    margin: 15px 10px 5px 7px;
}

    .text-footer {
    font-size: 20px;
    margin: 15px 0 5px 10px;
}
    
    .big-pic {
        width: 580px;
        margin: 0;
    }
    
    .background-grey {
    background-color: #E5E5E5;
    margin: 20px 0 0 0;
}

    .text-background-grey {
    font-size: 16px;
    margin: 20px;
    margin-right: 10px;
}
    
    
    .c-8-1 {
        grid-column: span 8;
        grid-column: 5/13;
        margin-top: 15px;
        
    }
    
    .c-4-1 {
        grid-column: span 4;
        grid-column: 1/5;
        border: 3px solid #515c56;
        box-shadow: 0 0 6px #999;
    }
    
    .c-8-2 {
        grid-column: span 8;
        grid-column: 1/9;
        margin-top: 15px;
    }
    
    .c-4-2 {
        grid-column: span 4;
        grid-column: 9/13;
        border: 3px solid #515c56;
        box-shadow: 0 0 6px #999;
    }
    
    checkbox {
    margin: 0 0 0 5px;
}

    .ckeckboxtext {
    margin-top: 2px;
    padding: 0;
}

    /* CSS für Desktop */
}
