Kopf  {
 margin: 30px auto;
 max-width: 95%;
 font-family: Century Gothic, monospace;
 color: rgb(51, 102, 102);
 display: grid;
}

.Menue {
  overflow: hidden;
  background-color: rgb(51, 102, 102, 0.8);
}

.Menue a{
  float: left;
  display: block;
  color: rgb(200, 225, 250);
  text-align: center;
  padding: 10px 16px;
  font-size: 1.5vw;
  font-family: Century Gothic, monospace;
  text-decoration: none;
}

.Menue a:hover {
  background-color: rgb(200, 225, 250);
  color: rgb(51, 102, 102);
}

body {
  margin: 40px;
  font-family: Century Gothic, monospace;
  color: rgb(51, 102, 102);
  font-size: 1.7vw;
  text-align: left;
  background-image: linear-gradient(270deg, rgb(150,150,150), rgb(250,250,250));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
}
.monospace {
font-family: Century Gothic, monospace;
color: rgb(51, 102, 102);
}

.img-fit {
   display: block;
   position:relative;
   width:90%;
}

.Artikel {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(minmax(100px, 3fr), minmax(100px, auto) ) ;
        color: #336666;
		z-index: 2;
         }
.Box1 {
        background-color: rgb(200, 225, 250, 0.9);
		opacity: 0.95;
        color: rgb(51, 102, 102);
        border-radius: 12px;
        padding: 20px;
		  font-size: 1.7vw;
    }
.Box2 {
        background-color: rgb(200, 250, 225, 0.9);
		opacity: 0.95;
        color: rgb(51, 102, 102);
        border-radius: 12px;
        padding: 20px;
		  font-size: 1.7vw;
    }
.A {
  grid-column: auto / span 1;
}
.B {
  grid-column: auto / span 2;
}
.C {
  grid-column: auto / span 3;
}
.D {
  grid-column: auto / span 4;
}
.E {
  grid-column: auto / span 5;
}
.F {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

.schalter1 {
background-color: #006666;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Century Gothic, monospace;
font-size: 1.5vw;
margin: 4px 2px;
cursor: pointer;
}
.schalter2 {
background-color: white;
border: none;
color: #006666;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Century Gothic, monospace;
font-size: 1.5vw;
margin: 2px 1px;
cursor: pointer;
}
.schalter3 {
background-color: #006666;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Century Gothic, monospace;
font-size: 1.5vw;
margin: 2px 1px;
cursor: pointer;
}
.schalter4 {
background-color: #800000;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Century Gothic, monospace;
font-size: 1.5vw;
margin: 2px 1px;
cursor: pointer;
}
.schalter5 {
background-color: #800000;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Century Gothic, monospace;
font-size: 1.5vw;
margin: 2px 1px;
cursor: pointer;
}
.schalter6 {
background-color: #CCCCCC;
border: none;
color: #006666;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Century Gothic, monospace;
font-size: 1.5vw;
margin: 2px 1px;
cursor: pointer;
}
.schalterForm {border-radius: 12px;}
}

#startimg{
	cursor: pointer;
}
#hopup{
	cursor: pointer;
}
#hopdown{
	cursor: pointer;
}
#startimg:hover { 
		transform: translate(0px, -5px);		
		fill: lightblue;	
}
#hopup:hover { 
		transform: translate(5px, 5px);		
		fill: lightblue;	
}		
#hopdown:hover { 
		transform: translate(0px, 5px);		
		fill: lightblue;	
}



.container {
  width: 100%;
  height: 300px;
}

.responsive-svg {
  width: 100%;
}

.col2 {
	column-count: 2;
	text-align: left;
	column-gap: 2em;
	column-rule-style: dotted;
	column-rule-width: 1px;
	column-rule-color: red;
}