body {
	background-color: #404040;
	color: darkgray;
	max-width: 960;
	margin: 0 auto;
	font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
	
	/* Hintergrundbild für die gesamte Seite */
	background-image: url('Bilder/page.png');
	background-repeat: no-repeat;
	background-position: left bottom; /* Bild am linken unteren Fensterrand ausrichten */
	background-size: auto 50%; /* Skaliert das Bild auf 100% der Fensterhöhe, die Breite wird automatisch angepasst */
	background-attachment: fixed;     /* Das Bild bleibt beim Scrollen fixiert */
} 

body#con {
    background-image:none
}

thead {
	position: sticky;
	top: 0;
}


h1 {
	color: #558ED5;
}
h2 {
	color: #666;
}
h3 {
	color: #666;
}

#maintab {
	max-width:800px;
	margin: 0 auto;
}

#menuico {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

#pageimg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#flowimgr {
	float: right;
	width:300px;
	padding:0px 20px 20px 20px;
}
#flowimgl {
	float: left;
	margin: 0px 20px 0px 20px;
	width: 300px;
	padding:10px;
}
.credits a:link, a:visited {
  color: #666;
  text-decoration: none;
  font-size: 12px;
}

.inhaltBlock {
	background-color: rgba(40, 40, 40, 0.9);
	padding: 5px;
}

.responsive {
  width: 750px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}

.togvis {
	display:none;
}

/* ########################## Container holding the image and the text ############################ */
.container {
	position: relative;
	z-index: -1;
}

/* Bottom right text */
.text-block {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.gridcontainer a:link, a:visited {
  color: #558ED5;
  text-decoration: none;
  font-size: 20px;
}

/* ######################## Style the header with a grey background and some padding ############################### */
.header {
  overflow: hidden;
  background-color: #404040;
}

.subheader {
  overflow: hidden;
  padding-left: 105px;
  padding-top: 20px;
}

/* Style the header links */
.header a {
  float: left;
  text-align: center;
  color: #558ED5;
  padding: 12px;
  margin: 5px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}


/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
	border-width: 0px;
	padding: 10px;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #666;
  color: black;
  
}

/* Style the active/current link*/
.header a.active {
  background-color: #558ED5;
  color: white;
}



/* Float the link section to the right */
.header-right {
  float: right;
  
}



/* ################# The navigation bar ##################*/
.navbar {
  overflow: hidden;
  background-color: #333;
  min-height: 5px;
  width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #CCC;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Change background on mouse-over */
.navbar a:hover {
  background: #666;
  color: black;
}


/*
.copyimg {
        height: 20px;
		width: 20px;
        background-image: url("/Bilder/copybtn.png") no-repeat;
    }
.copyimg:hover {
        background: url("\Bilder\copybtnb.png") no-repeat;
}
.qrimg {
        height: 20px;
		width: 20px;
        background: url("\Bilder\qrbtn.png") no-repeat;
    }
.qrimg:hover {
        background: url("\Bilder\qrbtnb.png") no-repeat;
}
*/

/* Main content */
.main {
  margin-top: 30px; /* Add a top margin to avoid content overlay */
}
.position::before {

display: block;

content: "";

height:200px;

margin-top: -200px;

visibility: hidden;

}

.footer {
   display: flex;
   position: fixed;
   align-items: center;
   justify-content: center;
   bottom: 0;
   width:800px;
   height: 50px;
   background-color: rgba(64, 64, 64, 0.9);
   color: white;
   text-align: center;
}
.footer a {
	color: #558ED5;
}

.gridcontainer {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
}


.gridimg {
  grid-row-start: 1;
  grid-row-end: 5;
}

.griddesc {
  grid-row-start: 2;
  grid-row-end: 3;
}




/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other 
@media screen and (max-width: 700px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
	max-width:50%;
  }
  .header-right {
    float: none;
  }
  .subheader {
  overflow: hidden;
  padding-left: 20px;
  padding-top: 0px;
  }
}*/