/* Setup */

body{margin: 0 auto;
    }

/* Setup der Styles*/

header{   background: #fff;
      }
#kopf{display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 20px 0px 10px;
     }

/* Anfang Haupt-Navigation links fuer die Produkte */
     input#menup{
         display: none;
     }
     .pschild{                  /*dropdown menu fuer Produkte */
         background: #37474F;
         color: white;
         z-index: 2;
         display: flex;
         flex-direction: column;
     }
     .pschild ul{
         list-style-type: none;
     }
     .pschild a{
                text-decoration: none;
     }
     .pschild label{
         display: block;
         font-weight: bold;
         cursor: pointer;
         background: url(../img/buttons/ic_menu_white_24px.svg) no-repeat left center;
         padding: 3px 0 2px 30px;
     }
     /* Toggle Effect */
     #navil{
       background-color: #CDD5DC;
       background-image: linear-gradient(90deg, #CDD5DC 0%, #dae4ef 35%, #fbfbfb 50%,#fff 55%, #cee4eb 100%);
       height: 0;
       overflow: hidden;
       z-index:3;
     }
     @media screen and (min-width: 680px){
        #navil{height: 100%;
              }
      }
     input:checked ~ #navil{
         height: 100%;
     }
     input:checked ~ label{
         background: url(../img/buttons/ic_close_white_24px.svg) no-repeat left center;
     } /* Ende Toggle Effect */

 #infoschild{
       font-size: 0.9rem;
       font-weight: 200;
       line-height: 1;
       padding: 4px 0px 8px 3px;
       border-radius: 0.3rem;
    }
 #infoschild a:focus, #infoschild a:hover, #infoschild a:active {
                  text-decoration: underline;
     }

/* Anfang Haupt-Navigation links fuer die Produkte     */
  #navili a {
      display:block;
      color:#000000;
      font-weight: bold;
      text-decoration: none;
      padding: 5px 0px 7px 4px;
      border-bottom: 1px solid #37474F;
      border-radius: 0.3rem;
      }
  #navili a:focus, #navili a:hover, #navili a:active {
      color: #FFFFFF;
      background-color: #37474F;
      background-image: linear-gradient(90deg, #37474F 0%, #B0BEC5 50%, #37474F 100%);
      border: 2px solid #37474F;
      border-left-color: gainsboro; border-top-color: gainsboro;
      }
  #navili a:visited {color: midnightblue;}

/* Anfang Sub-Navigation innerhalb der Seite */
      #subnav {border-bottom: 1px solid #999999;
               }
      #subnav a {
       padding:2px 8px;
       font-size: 0.8rem;
       color:#000000;
       font-weight: normal;
       border: none;
       }
      #subnav a:focus, #subnav a:hover, #subnav a:active{
       text-decoration:underline;
       background-color: #37474F;
       background-image: linear-gradient(90deg, #37474F 0%, #B0BEC5 50%, #37474F 100%)
       }
  /* Ende Sub-Navigation innerhalb der Seite */

      #phkontap { /* Angaben zum Photo + Text: telnr email Kontaktperson */
       color: black;
       font-weight:normal;
       font-size: 0.8rem;
       padding: 5px;}
      #phkontap a{color: darkblue;}
      #phkontap a:focus, a:hover, a:active {text-decoration:underline; }
	  #phkontap p{line-height: 1rem; }
/* Ende Haupt-Navigation links fuer die Produkte */

main{ padding: 2px 10px ;
      z-index: 1;
    }

footer { font-weight: normal;/* Format fuer footer für copyright, impressum, w3-Hinweise etc. */
         font-size: 0.8rem;  
		 line-height: 1rem;
		 background: whitesmoke;
         padding: 4px 10px;
	   }	

/* Anfang Top-Navigation fuer weniger wichtige Basis-Links  */
  #navitop{align-self: start;
           z-index: 2;
          }
  #navitop ul {background-color: #78909C;
                    list-style-type: none;
                    display: flex;
                    justify-content: space-around;
               }
  #navitop li {
              }
  #navitop a {color: #FFFFFF;
                  text-decoration: none;
                  font-size: 0.9rem;
                  padding: 2px 10px;
                  border-radius: 0.3rem;
             }
   #navitop a:focus, #navitop a:hover, #navitop a:active{
                   background-color: #607D8B;    /* alternativ: darken(darkgray, 2%); */
                   font-weight: bold;
                   text-decoration: underline;
                }
   #navitop a:visited{ color:azure;
               		  }
/* Ende Top-Navigation fuer weniger wichtige Basis-Links  */

/* Beginn Navigation rechts knowledge base */
  /* Menu Styles  von netninja Video css Tricks Nr 4 */
  input#menukb{
      display: none;
  }
  .kbschild{
      align-self: start;
      background: #00264E;
      color: white;
      z-index: 3;	  
  }
  .kbschild ul{
      list-style-type: none;
      padding: 0;
  }
  .kbschild a{
      display: block;
      text-decoration: none;
      padding: 2px 0px 2px 2px;
      color: white;
      border-radius: 0.5rem;
}
.kbschild a:focus, .kbschild a:hover, .kbschild a:active {
             background: #01579B;
}
.kbschild label{
      font-size: 1rem;
      display: block;
      cursor: pointer;
      background: url(../img/buttons/ic_menu_white_24px.svg) no-repeat left top;
      padding: 2px 0px 4px 10px;
}

/* Toggle Effect */
  #navir{
      max-height: 0;
      overflow: hidden;
  }
  input:checked ~ #navir{
      max-height: 100%;
  }
  input:checked ~ label{
      background: url(../img/buttons/ic_close_white_24px.svg) no-repeat left top;
  } /* Ende Toggle Effect */

#navirkb a{font-weight: bold;
            padding: 4px 0px 2px 2px;
         }
/* Ende Navigation rechts knowledge base */

/* responsive grid positionierung der Elemente im 1. Grid */

/* responsive grid positionierung der Elemente im 1. Grid fuer Smartphones */
.contentgrid{
           display: grid;
           grid-template-columns: minmax(169px, 0.6fr) 1fr;
           grid-template-rows: repeat(8, minmax(10px, auto));
           grid-gap: 1px;
          }
header{ grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
.pschild{ grid-column: 1 / 2;
          grid-row: 2 / 3;
          opacity: 0.9;
       }
main{ grid-column: 1 / 3;
      grid-row: 2 / 4;
    }
.kbschild{ grid-column: 1 / 3;
       grid-row: 5 / 6;
	   opacity:0.9;
     }
#navitop{ grid-column: 1 / 3;
          grid-row: 6 / 7;
       }
footer{ grid-column: 1 / 3;
        grid-row: 7 / 8;
      } /* Ende grid positionierung der Elemente im 1. Grid */
   #kopf{    /*display: flex;  */
          flex-direction: column;
         }
/* Positionierung der Elemente im 2. Grid in main*/
article{ display: flex;
         flex-direction: column;
         margin: 0 auto;
        } 
		.zimg{display: none;}  /* Klasse für Bilder im Bereich article*/
  /* Ende Positionierung der Elemente im 2. Grid in main*/
/* Ende Smartphone responsive grid positionierung der Elemente im 1. Grid fuer Smartphones */


@media screen and (min-width: 690px){
/* responsive grid positionierung der Elemente im 1. Grid fuer Tablets */
  body{ max-width: 960px;
      }
.contentgrid{
           display: grid;
           grid-template-columns: 169px 1fr 160px;
           grid-template-rows: repeat(7, minmax(10px, auto));
          }
header{ grid-column: 1 / 4;
        grid-row: 1 / 2;
     }
#navitop{ grid-column: 2 / 3;
          grid-row: 2 / 3;
        }
.pschild{ grid-column: 1 / 2;
        grid-row: 2 / 5;
      }
main{ grid-column: 2 / 4;
      grid-row: 3 / 5;
    }
.kbschild{ grid-column: 3 / 4;
       grid-row: 2 / 5;
     }
footer{ grid-column: 1 / 4;
        grid-row: 5 / 6;
      } /* Ende Positionierung der Elemente im 1. Grid */

      #kopf{ /*display: flex;  */
             flex-direction:row;
             justify-content: space-between;
             padding: 3px 30px 0px 10px;
           }
      /* Positionierung der Elemente im 2. Grid in main*/
      article{ display: grid;
               grid-template-columns: 1fr 160px;
               grid-gap: 1px;
               margin: 0 auto;
              }
            .secs{ grid-column: 1 / 2;
                 }
            .secb{ grid-column: 1 / 3;
			     }
		    .zimg{display: inline;
			      grid-column: 2 / 3;}  /* Klasse für Bilder im Bereich article*/
		/* Ende Positionierung der Elemente im 2. Grid in main*/
}/* Ende positionierung fuer Tablets */


/* Positionierung fuer Desktop PCs */
@media screen and (min-width: 960px){
  body{ max-width: 1280px;
      }
.contentgrid{
           display: grid;
           grid-template-columns: 169px 1fr 160px;
           grid-template-rows: repeat(7, minmax(10px, auto));
           grid-gap: 1px;
          }
header{ grid-column: 1 / 4;
    }
#navitop{ grid-column: 2 / 3;
          grid-row: 2 / 3;
        }
.pschild{ grid-column: 1 / 2;
        grid-row: 2 / 5;
      }
main{ grid-column: 2 / 4;
      grid-row: 3 / 5;
    }
.kbschild{ grid-column: 3 / 4;
       grid-row: 2 / 5;
     }
footer{ grid-column: 1 / 4;
      }/* Ende grid positionierung der Elemente im 1. Grid */
}/* Ende Positionierung fuer Desktop PCs  */