@charset "utf-8";
/* CSS Document */
body, pre, a {font-family:Arial, Helvetica, sans-serif;color:#2e4650;}
.tab_1 {background-color: #7b8a92; border-radius:10px 5%;}
.tab_2 {background-color: #7b8a92; border-radius:8px 3%;}

a {text-decoration:none;}
a:link  {color: #2e4650;}
a:visited  {color: #2e4650;}
a:hover {color: #000000;}
a:active  {color: #2e4650;}

a.ex1:link, a.ex1:visited, a.ex1:active {color: white;}
a.ex1:hover {color: #000000;}

.hide {display: none;}
    
.myDIV:hover + .hide {display: block;color: white;}
.myDIV:link, .myDIV:visited, .myDIV:active {color: white;}

.in_text { width: 300px; }
.te_text { width: 300px; hright: 100px;}
.submit_button , .zurueck_button{
background-color: #2e4650;
border-radius: 5px 5px 5px 5px;
margin-top: 70px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
width:160px;
height: 40px;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  position:relative;
  max-width: 80%;
  
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* AUSBLENDEN content */
.image_start{
        max-width: 80%;
        max-height: 80%;
        display: block; 
    }
.Stil_ahref_1 {font-family: Arial, Helvetica, sans-serif; font-size: medium;  color:#2e4650;}
/*
.Stil_ahref_1 a:hover {color: #ddd;}
.Stil_ahref_1 a:active {color: #ccc;}
*/

.txt_1{ font-size: medium; color:#2e4650;}
.txt_2{ font-size: medium; color:#2e4650; width:80%;}
.txt_3{ font-size: small; color:#2e4650;}
.txt_4 {font-size:x-large;}
.ganz_unten { font-size: small; background-color:#2e4650; color:#ffffff;}

/* ---------------------------------------------------------------------------------------- */

.gallery {
	--size: 10em;
	/* control the size */
	
	--gap: 1em;
	/* control the gap */
	
	--zoom: 2;
	/* control the scale factor */
	
	display: grid;
	gap: var(--gap);
	width: calc(4*var(--size) + 4*var(--gap));
	aspect-ratio: 1;
	grid-template-columns: repeat(4, auto);
}

.gallery figure {
	margin: 0;
	padding: 0;
	position: relative;
}

.gallery figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
	opacity: 0;
	color: white;
	background: rgb(0 0 0 / 0.3);
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
	opacity: 1;
}

.gallery > figure img {
	width: 0;
	height: 0;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
	cursor: pointer;
	filter: grayscale(80%);
	transition: .35s linear;
}

.gallery figure:hover img,
.gallery figure:focus img {
	filter: grayscale(0);
	width: calc(var(--size)*var(--zoom));
	height: calc(var(--size)*var(--zoom));
}

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-content: center;
}