/*--------------ALLGEMEIN------------*/

* { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; }
.wrapper {width: 1000px; max-width: 90%;}

/*--------------NAVIGATION/ MENÜLEISTE------------*/

/* kompl.Menüleist */
    nav {height: 85px; position: fixed; top: 0; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5); z-index: 1; width: 100%; background-color: white;}

    /* Ausrichtung MenüLinks */
        nav ul li {float: right; margin: 35px 35px 0 0; position: relative; }
        nav ul li {font-size: 18px; color: #3a3a3c;}
    
        /* Effekt */
            nav ul li:hover {padding-top: 10px; color: #000;}
        
            /* Ausrichtung Logo in der Menüleiste */        
                #logo {width: 220px; float: left; margin: 10px 0 0 50px;}
                #logo img {width: 100%;}      
        
                /* Logo-Effekt */
                    #logo:hover {opacity: 0.3;}
            
                    /* Zusätzliche Eigenschaftseinstellungen zu den Effekten */
                        #logo, #logo2, li, img {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; font-family: 'Roboto', sans-serif; color: #1D295D; }
                        li {list-style-type: none;}
                        .fa-bars {display: none;}


/*-----------------Startseite/ INDEX---------------------------*/
    #banner { width: 100%; height: 700px; z-index: 0; background: url(../img/bild1.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; margin-top: 90px; border-radius: 10px; }
    #banner h1 { padding-top: 50px; text-align: center; color: white; font-size: 4em; text-shadow: 0.1em 0.05em 0em #1D295D; }
    .section-1{ background-image: url(../img/Galerie_10.JPG); background-attachment: fixed; background-size: cover; color: white; text-align: center;  height: 700px; }
    .section-2 {height: 200px; }
    .section-2 h1 { color: #3A3A3C; text-align: center;  background-color: white; font-size: 35px; font-family: 'Roboto', sans-serif; margin-top: 75px; }
    .section-2 span {color: #1D295D; font-size: 50px; }
    .section-3{	background-image: url(../img/Galerie_7.JPG); background-attachment: fixed;  background-size: cover; height: 500px; padding-top: 450px; }
    .section-3 h1 {	color: white; text-align: center; text-shadow: 0.1em 0.05em 0em #1D295D; font-size: 50px;}
			
    /*-----------Einstellung-Fusszeile + Footer---------------------------*/
        .block-I {width: 100%; height: auto; background: #1D295D; display: flex; flex-direction: row; justify-content: space-around; flex-flow: wrap;}
        .fussbox {width: 30%; height: 350px; background: #1D295D; margin: 20px; box-sizing: border-box; font-size: 20px; color: white;}
        .fussbox p {padding: 20px; text-decoration: underline 2px; font-size: 18px; }
        .fussbox li {list-style-type: inherit; padding: 5px; margin-left: 40px; list-style-type: none; color: white; font-size: 14px;}

        /*-----------------Responsive Einstellungen Fusszeile---------------------------*/
            @media screen and (max-width:1200px){.fussbox {width: 40%;}}
            @media screen and (max-width:600px){.fussbox {width: 90%;}}
            
            /*-----------------Footer---------------------------*/
                #foot {font-size: 12px; text-align: left; color: white; background: #1D295D; width: auto;}


/*-----------------Über-uns---------------------------*/
    
    /*----------------Überschrift + Textbereich ---------------------------*/
        .section-5 { background: white;  width: 1000px; max-width: 90%; margin: 95px auto; height: auto; }
        .section-5 h1 { margin-left: auto; margin-right: auto; text-align: center; color: #3a3a3c; background: white; border-style:  solid; border-width: 5px; border-color: #1D295D; border-top-left-radius: 30px; border-bottom-right-radius: 30px; margin-bottom: 25px; }
        .section p { background: #1D295D; color: white; box-sizing: border-box; width: 100%; margin: 50px; padding: 15px; float: left; border: solid 5px white; border-radius: 15px; margin-left: auto; margin-right: auto;}
        .section-5 h3 { margin-left: auto; margin-right: auto; text-align: center; color: white; background: #3a3a3c; border-style:  solid; border-width: 5px; border-color: #1D295D; border-radius: 15px; }
        .block-II h3 {width: 100%; height: auto; display: flex; flex-direction: row; justify-content: space-around; flex-flow: wrap; margin-bottom: 5px;}
        .block-II img {display: block; margin: 0 auto; }

 
 /*-----------------Service---------------------------*/
 
    /*----------------Überschrift + Textbereich---------------------------*/
        .section-6 { background: white;  width: 1000px; max-width: 90%; margin: 95px auto; height: auto; }
        .section-6 h1 { color: #3a3a3c; text-align: center; border-style:  solid; border-width: 5px; border-color: #1D295D; border-top-left-radius: 30px; border-bottom-right-radius: 30px; }
        .service { width: auto; height: auto; margin-left: auto; margin-right: auto; padding-top: 50px; }
        .section-6 h2 { margin-left: auto; margin-right: auto; text-align: center; color: white; background: #1D295D; border-style:  solid; border-width: 5px; border-color: #1D295D; border-radius: 15px; }
    
        /*--------------Einstellung Schaubild + Bilder--------------------------*/
            .img1 {text-align: center; padding-top: 15px; }
            .img2 {text-align: center; padding-top: 15px; }
            .img3 {text-align: center; padding-top: 25px;  margin-top: 15px; padding: 15px;}
            .img4 {text-align: center; padding-top: 25px;  margin-top: 15px; padding: 15px;}
        
            /*--------------Effekte Bilder--------------------------*/
                .img2:hover { border-radius:0%; filter:drop-shadow(10px 10px 4px #1D295D);}
                .img3:hover { border-radius:0%; filter:drop-shadow(10px 10px 4px #1D295D);}
            
                /*--------------Einstellung Texte + Liste --------------------------*/
                    .section-7 { background: white;  width: 1000px; max-width: 90%; margin: 95px auto; height: auto; }
                    .section-7 h2 { margin-left: auto; margin-right: auto; text-align: center; color: #1D295D; background: white; border-style:  solid; border-width: 5px; border-color: #1D295D; border-top-left-radius: 30px; border-bottom-right-radius: 30px; margin-bottom: 25px;}
                    .section-7 p {text-align: justify; padding: 3px;}
                    .section-8 { background: white;  width: 1000px; max-width: 90%; margin: 95px auto; height: auto; padding-bottom: 30px;}
                    .section-8 h2 { margin-left: auto; margin-right: auto; text-align: center; color: #1D295D; background: white; border-style:  solid; border-width: 5px; border-color: #1D295D; border-radius: 15px; margin-bottom: 25px;}
                    .section-8 p {text-align: justify; padding: 3px;}
                    .punkte1 p {text-decoration: underline; }
                    .punkte1 li {list-style-type: inherit; padding: 5px; margin-left: 75px;}
                    .section-9 { background: white;  width: 1000px; max-width: 90%; margin: 95px auto; height: auto; }
                    .section-9 h2 { margin-left: auto; margin-right: auto; text-align: center; color: #1D295D; background: white; border-style:  solid; border-width: 5px; border-color: #1D295D; border-radius: 15px; margin-bottom: 25px;}
                    .section-9 p {text-align: justify; padding: 3px;}

             
/*-----------------Produkte---------------------------*/                

    /*-----------------Überschrift + Textbereich---------------------------*/
        .section-10 { background: white;  width: 1000px; max-width: 90%; margin: 95px auto; height: auto; padding: 10px;}
        .section-10 h1 { margin-left: auto; margin-right: auto; text-align: center; color: #3a3a3c; background: white; border-style:  solid; border-width: 5px; border-color: #1D295D; border-top-left-radius: 30px; border-bottom-right-radius: 30px; margin-bottom: 25px; }
        .section-10 p {text-align: justify; padding: 3px;}

        /*-----------------Einstellung Bilder Galarie---------------------------*/
            .container{   width: 980px; margin: 50px auto; height: 125px; padding-top: 5px; border: solid 5px #274e71; border-radius: 15px; display: flex; justify-content: center; }
            .box {width: 185px; height: 120px; margin: 0px 5px; transition: 1s; border-radius: 10px;}
            .box img {border-radius: 10px;}
            
            /*-----------------Responsive + Effekt für die Bildergalerie auf der Seite "Produkte" ---------------------------*/
                .box:hover {transform: scale(2.3); box-shadow: 10px 10px 4px #1D295D; z-index: 2; }
                @media screen and (max-width:1200px){.container {width: 100%;}}
                @media screen and (max-width:600px){.container {width: 100%;}}
                @media screen and (max-width:1200px){.box img {width: 100%;}}
                @media screen and (max-width:600px){.box img {width: 100%;}}

                /*-----------------Textbereich ---------------------------*/   
                    .section-10 h4 {text-decoration: underline; }

                    /*-----------------3spaltig Tabelle ---------------------------*/ 
                        .block-III {width: auto; height: auto; display: flex; flex-direction: row; justify-content: space-around; flex-flow: wrap; }
                        .warengruppe1 {width: auto; height: auto; margin: 10px auto; text-align: left;}
                        .warengruppe2 {width: auto; height: auto; margin: 10px auto; text-align: left;}
                        .warengruppe3 {width: auto; height: auto; margin: 10px auto; text-align: left;}
                      
                        .warengruppe p { margin: 12px; font-size: 14px; text-align: left;}
                        .warengruppe1 li { font-size: 18px;}
                        .warengruppe2 li { font-size: 18px;}
                        .warengruppe3 li { font-size: 18px;}

                        /*-----------------Effekt + Responsive zu Tabelle ---------------------------*/
                            .warengruppe:hover {background-color: #3a3a3c; transition: ease-in-out 0.5s; color: white; -webkit-transition: ease-in 0.5s; -moz-transition: ease-in 0.5s; -o-transition: ease-in 0.5s; border-top-left-radius: 10px; border-bottom-right-radius: 10px; }
                            @media screen and (max-width:1200px){.warengruppe {width: 40%;}}
                            @media screen and (max-width:600px){.warengruppe {width: 90%;}}


/*-----------------Kontakte---------------------------*/
    
    /*-----------------Bereich für das Formular + Sidebar---------------------------*/
        #block {background: #1D295D;  width: 1020px; margin-top: 95px; height: 600px; margin-left: auto; margin-right: auto; margin-bottom: 30px; border-radius: 10px; }

         /*-----------------Bereich + Einstellung für das Formular---------------------------*/
            section { background: #1D295D;  width: 750px; max-width: 90%;  float: left; border-radius: 10px; }
            section h1 { color: #1D295D; text-align: center; font-size: 2em; border-style:  solid; border-width: 5px; border-color: #1D295D; border-radius: 15px; }

             /*-----------------Bereich + Einstellung für das Sidebar---------------------------*/
                aside {width: 500px; height: 530px; background-image: url(../img/Galerie_12.JPG); float: right; border: solid 5px white; border-radius: 10px; padding-right: 25px;}
                #logo2 {width: 220px; padding-top: 80px;  }
                #logo2:hover {opacity: 0.3;}
                #logo2 img {width: 100%;}
                .block0  { float: left; padding-top: 10px; padding-left: 5px;}
                .block0 p {font-size: 18px; text-decoration: underline 2px; }
                .block0 li {padding-top: 10px; font-size: 14px; padding-left: 8px;}
                
        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        --- Das Kontaktformular + die Systlesheet sind komplett auf in der HTML-Sheet zusehen!!!
        +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---*/


/*-----------------Impressum + Datenschutz und AGBs---------------------------*/

    /*-----------------Überschrift + Textbereich---------------------------*/
        .section-11 { background: white;  width: 1000px; max-width: 90%; margin: 95px auto; height: auto; padding: 10px;}
        .section-11 h1 { margin-left: auto; margin-right: auto; text-align: center; color: #3a3a3c; background: white; border-style:  solid; border-width: 5px; border-color: #1D295D; border-top-left-radius: 30px; border-bottom-right-radius: 30px; margin-bottom: 25px; }
        .section-11 p {text-align: justify; padding: 3px;}


/*----------Responsive Einstellung für Tablet----------*/
@media screen and (max-width: 1024px) {nav {height: auto;}
#logo {width: 165px; margin: 5px 10px 10px 10px;}
nav ul li { margin: 20px 15px 0 10px; font-size: 13px;}
#banner h1 {font-size: 3em;}
.section-2 h1 {font-size: 26px;}
.section-2 span {color: #1D295D; font-size: 36px; }
.section-3 h1 {font-size: 26px;}}