html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  	display: flex;
  	justify-content: center;
  	align-items: flex-start;
	
	margin: 0;
    padding: 0;
    height: 100%;
	
}

.gif-mitte {
  display: block;
  margin: 0 auto;      /* horizontal zentriert */
  width: 30vh;        /* Größe anpassen */
  height: auto;   
}

.page {
	
  display: grid;
  height: 100%;                
  grid-template-rows: 6% 24% 30% 35% 2.5% 2.5% ;
    	justify-content: center;
  	align-items: flex-start;
	text-align: center
}


.title {
	  font-size: 3vh;
  font-weight: bold;
  color: #00796b;
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-size: 5vh;
  margin-top: 10vh;  
}


button {
  padding: 2vh 2vh;
  margin: 1vh;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  font-size: 3vh;
  transition: transform 0.2s ease, background 0.3s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  
  background: #4db6ac;
  color: #fff;
}




.footer-btn, a:link, a:visited {
  background: transparent;
	
  border: 1px solid #fff;
  color: #000000;
  text-decoration: none;
  color: #00796b;
  
}

.footer-btn{
	margin-bottom: 1vh;
}

.copyright{
	color: #00796b;
	font-weight: bold;
}


.legal{
  max-width: 70vw;
  color: #00796b;
}

.legalTitle{
	text-align: center
}


.legalBack,
.legalBack:link,
.legalBack:visited,
.legalBack:hover,
.legalBack:active,
.legalBack:focus {
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.4rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  background: #ff8a65;
  color: white;
  padding:  3vh  30vw;
  display: inline-block;
  margin-bottom: 6vh;
  margin-top: 6vh;
  align-content: center;
  justify-content: center;
  text-align: center;
}