﻿/*  Farbe für aktuelle Seite im Menue */
:root {
  --menu_aktuelle_seite_markierung: gray;
  --menu_aktuelle_seite_schrift: white;

  --menu_markierung_hover: #555;
  --menu_schrift_hover: white;

}

.pText {padding-top:80px;
}

#Main #Text #Mitte { justify-content: center; display: flex; align-items: center; margin-left:10px; margin-right:10px; }
#Main #Text #dm{ padding-left:10px; padding-right: 10px; }
#Main #Text #dl, #Main #Text #dm, #Main #Text #dr { display:inline-block; max-width:none;}
#Main #Text #dl img, #Main #Text #dr img { max-width:100%; }

#Main #Text #MyMaschine {display:none;}
#Footer #MyMaschine {display:none;}

#InfoTxt { font-weight:bold; text-align: center; padding-left: 20px; padding-right: 20px; padding-bottom: 0; font-size: 22px; padding-top: 20px; }

#Headline2{ padding-top:5px; 
  /*  border-bottom:solid; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-color:green; border-top-width:5px;*/
}

.headline2_top {
    position: fixed;
    top: 0;
    min-width:816px;
}


.headline2_top1 {
    position: fixed;
    top: 0;
    max-width:316px;}


#Main #Headline2 h1 {
    text-align: center;
    line-height: 120%;
}

#MyText { 
       
        margin-left:10px;
        margin-right:10px;
        padding-left:20px;
        padding-right:20px;  
        
        border-top:solid; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-color:green; border-top-width:5px;
        text-align:left;
}

#Text #MyText h1{ font-size:22px; font-weight:bold; }
#Text #MyText #Headline2 { font-size:22px; font-weight:bold; text-align:center;}
#Text #MyText h2{text-align:left; padding-top:20px; padding-bottom:0px; font-size:18px; font-weight:bold; }
#Text #MyText h3{text-align:left; line-height:100%; padding-top:0px; padding-bottom:0px; font-size:16px; }
#Text #MyText p{text-align:left; padding-top:0px; padding-bottom:0px; }
#Text #MyText li{line-height:120%; }
#Text #Z1 a, #Text #Z2 a, #Text #Z3 a, #Text #Z4 a, #Text #Z5 a, #Text #Z6 a{font-size:inherit; color:inherit; }

#Text #MyText a{font-size:inherit; color:blue; /*color:inherit;*/ }

#S1,#S2 {color: #3f3f3f; font-family:Arial; font-style:normal; font-weight:600;}
#S1{font-size: 25px; padding-top:15px; padding-bottom:0px;}
#S2{font-size: 16px; padding-top:10px; padding-bottom:10px; }

#S3{font-size: 14px; padding-bottom:25px;}


#Main u {float:left;}

#Kon_1{display:inline-block; float:left;}
#Kon_2{display:inline-block; float:left;}
#Kon_3{display:inline-block; float:left;}

#Kon_2, #Kon_3 { display: none;}
#Kon_2 a, #Kon_3 a{ float:left;}



#Headline, #Text{ width:100%; float:left; display:block; text-align:center; }

.headline_top { position: fixed; top:0; max-width:876px;}
#Headline {padding-top:13px; padding-bottom: 10px;}

 #Line{height:3px;
       background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 20%,#52b152 36%,#008a00 70%,#005700 86%,#002400 100%);
       margin-left:20px; margin-right:20px; background-size: cover;
 }


#Nav{z-index:1;}

#Kopf, #Main, #Headline{ background-color: #FFFFFF; }

/* #Kopf, #Main, #Headline{ background-color: #FFFFFC; } */
/**

#Google {width:100px; height:80px; padding-top:20px; border:none; }
*/

#Public_3{display:none;}

#Sites {overflow-y:hidden; max-height:1px; overflow-x:hidden;}

#Info { margin-top:20px;
        margin-left:10px;
        margin-right:10px;
        padding-left:20px;
        padding-right:20px;
        border-top:solid; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-color:green; border-top-width:5px;
}

#Kontakt {min-width:100%; margin-top:0px; margin-bottom:20px; text-align:center; padding-top:30px;padding-bottom:25px;}

#K-Tel, #K-Mit, #K-Add {display:inline-block;}
#K-Tel {float:left; text-align:right; min-width:35%; padding-right:2%; }
#K-Mit {min-width:20%; padding-top:16px; font-size:18px; }
#K-Add {float:right; text-align:left; min-width:35%; }

#Kontakt img {
    margin-left:10px;
    margin-left:10px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}

#My_Bild { 
           background: url('my_Bild.gif') no-repeat left top;
           background-size: contain;
           margin-left:auto; margin-right:auto;
           width: 180px; 
           height:230px;
}

@media only screen and (min-width:480px) { #My_Bild{ float:left;  margin-right:5px; margin-bottom:5px; margin-left:20px;  } }

/* Kontakt formular*/
#Kontaktli {
    min-width: 40%;
    float: right;
    padding-left:20px;
}
   
#Kontaktre {
    min-width: 50%;
    float: left;
    padding-left:20px;
    text-align:left;
}  

#Kontaktli, #Kontaktre {
    display:inline-block;
    margin-top:0px;
}

#MsgBox, #Name, #Mail, #Tel, #Fax, #Mail, #Msg, #Send {
    min-width:100%; 
    min-height:40px;
    margin-top:10px;
    background-color:transparent;
}

#Main #Kontaktli h1, #Main #Kontaktre h1 {padding:0;}
#Main #Kontaktli p, #Main #Kontaktre p {padding:0;}

#MsgBox{color:red;text-align:center; min-height:20px;}


#btSend{
    background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 20%,#52b152 36%,#008a00 70%,#005700 86%,#002400 100%); 
    color:white;
    height:40px;
    min-width:100%;
    font-size: 18px;
    font-style:italic;
}

#Kontaktre input, #Kontaktre textarea {
    border-color:black;
    border-style:solid;
    border-width:1px;
    min-height:40px;

    min-width:98%;
    background-color:transparent; 
    font-size: 18px; 
    background-color:#fafafa;
}
#Kontaktre textarea {
    min-height: 65px;
}


/**************************/

/* Schrift anpassen*/

body {
    color: #3f3f3f;
    font-family:Arial;

    
}
body a{
     color: #3f3f3f;
     text-decoration: none;
}
body a:hover{color:blue;}

#Kopf a{
    color: gray;
    font-family:Arial;
    font-style:normal;
    font-size: 16px;
    text-decoration:none;
}

#Nav a{
    color: #3f3f3f;
    font-family:Arial;
    font-style:normal;
    font-size: 18px;
    text-decoration:none;
    min-width:100%;
    line-height:150%;
    float:left;
    text-align:left;
}


#Main h1 {
                text-align: left;
                padding-left: 20px;
                padding-right: 20px;
                padding-bottom: 0;
                font-size: 22px;
            }

#Main h2{
    color: black;
    font-family:Arial;
    font-style:normal;
    font-size: 25px;
    text-align:center;
    font-weight:300;
}


#Z1{padding-top:10px;}
#Z1, #Z2, #Z3, #Z4 {
    color: #3f3f3f;
    font-family:Arial;
    font-style:normal;
    font-size: 35px;
    text-align:center;
    font-weight:700;
    line-height:180%;
}

#Z5{padding-top:20px;}
#Z5, #Z6{font-size:18px; }

#Z7{padding-top:18px;}
#Z7, #Z9{font-size:20px;} 
 
#B1, #B2{font-size:25px; font-weight:700; line-height:150%; }


@media only screen and (max-width:480px) { #Z1, #Z2, #Z3, #Z4 {font-size: 33px; } #Z5, #Z6 {font-size: 16px; } #Z7, #B1, #Z9, #B2 {font-size: 25px; } #Z7, #Z9 {font-size:18px;} }
@media only screen and (max-width:460px) { #Z1, #Z2, #Z3, #Z4 {font-size: 31px; } #Z5, #Z6 {font-size: 16px; } #Z7, #B1, #Z9, #B2 {font-size: 25px; } #Z7, #Z9 {font-size:18px;} }
@media only screen and (max-width:430px) { #Z1, #Z2, #Z3, #Z4 {font-size: 29px; } #Z5, #Z6 {font-size: 16px; } #Z7, #B1, #Z9, #B2 {font-size: 24px; } #Z7, #Z9 {font-size:17px;} }
@media only screen and (max-width:400px) { #Z1, #Z2, #Z3, #Z4 {font-size: 27px; } #Z5, #Z6 {font-size: 16px; } #Z7, #B1, #Z9, #B2 {font-size: 22px; } #Z7, #Z9 {font-size:17px;} }
@media only screen and (max-width:370px) { #Z1, #Z2, #Z3, #Z4 {font-size: 25px; } #Z5, #Z6 {font-size: 16px; } #Z7, #B1, #Z9, #B2 {font-size: 20px; } #Z7, #Z9 {font-size:16px;} }
@media only screen and (max-width:340px) { #Z1, #Z2, #Z3, #Z4 {font-size: 23px; } #Z5, #Z6 {font-size: 16px; } #Z7, #B1, #Z9, #B2 {font-size: 20px; } #Z7, #Z9 {font-size:16px;} }

#Main a { 
    color: gray;
    font-family:Arial;
    font-style:normal;
    font-size: 20px;
    text-decoration:none;
    align-items:center
}

html{
   
    background-image:url(background_blue-50.gif);
    background-attachment:fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

body{
    margin-left:auto;
    margin-right:auto;
    max-width:1200px;
}
#Menue{
     background-color:white;
     width:100%;
     float:left;
     display:inline-block;
     padding-bottom:10px;
}
#Kopf{
     width:25%;
     min-height:250px;
     float:left;
     margin-top:10px;
     text-align:center;
     display:inline-block;
}
#Kopf1 {padding-bottom:20px;}
#Kopf img { margin-top:50px; width:150px; text-align:center; }
#Ibl { display:inline-block; float:right; min-width:100%; }
#Main{
     width:73%;
     min-height:400px;
     float:left;
     display:inline-block;
     margin-top:10px;
     text-align:center;
     margin-left:2%;
}
#Public{
     background-color:gainsboro;
     float:left;
     width:100%;
     min-height:110px;
     margin-top:10px;
     align-items:center;
     display:inline-block;
     font-size:small;
}
#Public_1 {
    width:23%;
    min-height:50px;
    float:left;
    display:inline-block;
    text-align:left;
    padding-left: 2%;
}
#Public_2 {
    width:30%;
    min-height:50px;
    float:left;
    display:inline-block;
    text-align:left;
    padding-left: 2%;
    padding-top:27px;
}
#Public_3 {
    width:16%;
    min-height:50px;
    float:left;
    display:inline-block;
    text-align:left;
    padding-left: 2%;
}
#Public_4 {
    width:23%;
    min-height:50px;
    float:left;
    display:inline-block;
    text-align:center;
    padding-left: 2%;
}
#Public_4 img {
    margin-left:10px;
    margin-left:10px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}
#Footer{
    background-color:black;
    color:white;
    float:left;
    width:100%;
    min-height:30px;
    text-align: center;
   
    padding-top:12px;
    padding-bottom:5px;
    display:inline-block;
    float:left;
}
#Footer a{ color:white; }
#Footer_1 {
    width: 26%;
    float: left;
    display: inline-block;
    text-align: left;
    padding-left: 2%;
   }
#Footer_2 {
    width: 20%;
    float: left;
    display: inline-block;
    text-align: left;
    padding-left: 2%;
}
#Footer_3 {
    width: 13%;
    float: left;
    display: inline-block;
    text-align: left;
    padding-left: 6%;
}
#Footer_4 {
    width: 27%;
    float: left;
    display: inline-block;
    text-align:right;
    padding-left: 2%;
    padding-right: 2%;
}
#Menu  {text-align:center; }
#Menu n {float:left;}
#Menu, #Home, #SubMenu1, #SubMenu2, #SubMenu3, #SubMenu4, #SubMenu5 {
    border-color:white;
    background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 20%,#52b152 36%,#008a00 70%,#005700 86%,#002400 100%); 

    height:40px;
    font-style:italic;
    display:inline-block;
}
.menu, .home, .submenu1, .submenu2, .submenu3, .submenu4, .submenu5 {
     background-color: #777;
     color: white;
     cursor: pointer;
     width: 100%;
     border: none;
     text-align: left;
     outline: none;
     font-size: 18px;
     float:left;
     padding-left: 15px;
}
.active, .menu:hover, .submenu1:hover, .submenu2:hover, .submenu3:hover, .submenu4:hover, .submenu5:hover {background-color: #555;}
.con_menu, .con_submenu1, .con_submenu2, .con_submenu3, .con_submenu4, .con_submenu5 {
     display: none;
     overflow: hidden;
     background-color: #f1f1f1;
     padding-top:2px;
}
.con_submenu1, .con_submenu2, .con_submenu3, .con_submenu4, .con_submenu5 {
     padding-left: 30px;
     padding-top:10px;
     padding-bottom:10px;
     font-size: 18px;
}
.con_menu, .con_submenu1, .con_submenu2, .con_submenu3, .con_submenu4, .con_submenu5 a{
     text-decoration:none;
     padding-left: 15px;
     color:black;
}
.active { background-color: green; color:white; width:100%;}
#Nav a:hover {
    color:var(--menu_schrift_hover);
    background-color:var(--menu_markierung_hover);
    min-width:100%;
}
.sticky {
    position: fixed;
    top: 0px;
    width: 25%;
}

/* Media Screen */
@media only screen and (min-width:1200px)
{ #Nav{ max-width:300px;}
 
}
@media only screen and (max-width:780px) {
    #Kopf, #Menue, #Main, #Public, #Footer { width: 100%; float: left; display: inline-block; margin-left: 0; }
    .headline_top {top:40px;}
    #Nav { width:100%; }
    #Kontaktli, #Kontaktre {float:left; display:inline-block; width:98%; padding-left:1%; padding-right:1%;}
    #Kontaktre input, #Kontaktre textarea {min-width: 99%;}
    #Kon_1 {display:none;}
    #Kon_0 {display:inline-block; width:30%; float:left;}
    #Kon {display:inline-block; width:55%; float:right;padding-top:50px;}
    #Kon_2 {display:inline-block;}
    #Kon_3 {display:inline-block;}
    #Public_1 {min-width: 26%;}
    #Public_2 {min-width: 45%;}
    #Public_3 {display:none;}
    #Public_4 {min-width: 20%;float:right;}
}
@media only screen and (max-width:580px) {
     #Public_1 {min-width: 35%;}
     #Public_2 {min-width: 55%; float:right;padding-top:27px;}
     #Public_3 {display:none;}
     #Public_4 {min-width: 98%;}
     #Kon_0 {display:inline-block; width:98%; float:left;}
     #Kon {display:inline-block; width:98%; float:left;padding-top:0px;}
}
@media only screen and (max-width:480px) {
    #Public_3 {display:none;}
    #Public_1, #Public_2, #Public_4 {min-width: 98%;float:left; padding-top:0;}
}