html {font-family: 'latoregular', sans-serif; color: #fff; font-size: 16px; line-height: 1.4em; scroll-behavior: smooth;scroll-padding-top: 6.2em; -webkit-hyphens: auto;
 hyphens: auto;}
body {background-color: #b80068; margin:0; }
* {	box-sizing: border-box;}

.pink {color:#b80068;}
.grau {color:#999;}
.dunkelgrau {color:#666;}
.blau {color:#cae0ee;}
.gruen {color:#dbe27c;}
.braun {color:#57061d;}


p {font-size: 1.2em; line-height: 1.6em; padding: 2em 0 0 0; margin: 0;}
h1, h2 { font-family: 'latoblack' }
h3, h4, h5, h6 {font-family: 'latolight';}
h3 {
	font-size: 1.1em;
	line-height: 1.25;
}
a, a:visited {
	cursor: pointer;
	transition: color 0.3s ease-out 0s;
	color: #fff;
	text-decoration: none;
}
a:hover, a:active {color: #57061d;}
b {font-family: 'latoblack'; border-bottom: 1px solid #57061d;}



dl {
  display: grid; 
  grid-template-columns: auto auto; 
  grid-gap: 1rem;
  justify-items: flex-start;
  justify-self: center;
  align-items: flex-end;
  margin: 0;
}
dd {margin: 0;}
.logo {
	grid-area: 2 / 1;
	width: 90vw;
	max-width: 800px;
}
.tel { grid-area: 4 / 1; }
.oeff {grid-area: 5 / 1; }
.addr {grid-area: 7 / 1;}
footer {
	grid-area: 9 / 1;
	align-self: end;}
.wrapper {
	width: 100vw;
	animation: changeColor 12s 1;
}
.eins {
	height: 100vh;
	width: 100vw;
}
.inhalt {
	display: grid;
	grid-auto-rows: repeat(9, 1fr);
  height: 100%;
  justify-items: center;
  justify-content: center;
  text-align: center;
}

.zweieins {border: 2px solid #DBE27C;padding: 1em;}
.zweizwei {border: 2px solid #CAE0EE;padding: 1em;}
#ute, #linie, #hm {
	fill:#fff;
	animation: fill 13s 1;
}
.zwei {
	display: grid;
	grid-template-columns: 1fr minmax(400px, 800px) 1fr;
  justify-items: center;
  padding: 2em 0;
  font-size: 0.8em;
  background-color: #b80068;
}
.impressum {
	display: grid;
	justify-content: center; 
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1em;
	grid-column-start: 2;
}
@keyframes fill {
0% {fill:#57061d;}
85% {fill:#57061d;}
90% {fill:#cae0ee;}
95% {fill:#dbe27c;}
100% {fill:#fff;}}
.tel {}
.addr {}
.blasen {
	position:absolute;
	overflow:hidden;
	height: 100%;
	width: 100%;
}
		
@keyframes changeColor {
	0% { background: #B80068;}
	33% {background: #DBE27C;}
	66% {background: #CAE0EE;}
	100% { background: #B80068;}}
				
/***** blasen ani *****/
#b01 {
	height: 40px;
	width: 40px;
	border-radius:50%;
	background-image: -moz-radial-gradient(center center, ellipse closest-corner, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0.9) 100%);
	position:absolute;

}
#b02 {
	height: 20px;
	width: 20px;
	border-radius:50%;
	border-radius:50%;
	-moz-border-radius:50%;
	background-image: -moz-radial-gradient(center center, ellipse closest-corner, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0.9) 100%);
	position:absolute;
}
#b03 {
	height: 15px;
	width: 15px;
	border-radius:50%;
	-moz-border-radius:50%;
	background-image: -moz-radial-gradient(center center, ellipse closest-corner, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0.9) 100%);
	position:absolute;
}
#b04 {
	height: 30px;
	width: 30px;
	border-radius:50%;
	-moz-border-radius:50%;
	background-image: -moz-radial-gradient(center center, ellipse closest-corner, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0.9) 100%);
	position:absolute;
}
#b05 {
	height: 25px;
	width: 25px;
	border-radius:50%;
	-moz-border-radius:50%;
	background-image: -moz-radial-gradient(center center, ellipse closest-corner, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0.9) 100%);
	position:absolute;
}
#b06 {
	height: 5px;
	width: 5px;
	border-radius:50%;
	-moz-border-radius:50%;
	background-image: -moz-radial-gradient(center center, ellipse closest-corner, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0.9) 100%);
	position:absolute;
}
@keyframes blub40 {
	0% {top: 0%; left:0%; -moz-animation-timing-function: ease-in;}
	33% {top: 100%; left:33%; -moz-animation-timing-function: ease-out;}
	66% {top: 0%; left:66%;-moz-animation-timing-function: ease-in;}
	100% {top: 100%; left: 100%; -moz-animation-timing-function: ease-out;}
}
@keyframes blub20 {
	0% {top: 20%; left:0%; -moz-animation-timing-function: ease-in;}
	33% {top: 100%; left:33%; -moz-animation-timing-function: ease-out;}
	66% {top: 20%; left:66%;-moz-animation-timing-function: ease-in;}
	100% {top: 100%; left: 100%; -moz-animation-timing-function: ease-out;}
}
@keyframes blub10 {
	0% {top: 70%; left:0%; -moz-animation-timing-function: ease-in;}
	33% {top: 100%; left:33%; -moz-animation-timing-function: ease-out;}
	66% {top: 70%; left:66%;-moz-animation-timing-function: ease-in;}
	100% {top: 100%; left: 100%; -moz-animation-timing-function: ease-out;}
}
.blub01 {
	animation: blub40 12s linear 1.5s infinite alternate;
	margin: 0 0 0 10%;
}
.blub02 {
	animation: blub20 12s linear 0.5s infinite alternate;
	margin: 0 0 0 -10%;
}
.blub03 {
	animation: blub10 12s linear 0.6s infinite alternate;
	margin: 0 0 0 15%;
}
.blub04 {
	animation: blub40 12s linear 1s infinite alternate;
	margin: 0 0 0 -15%;
}

.blub05 {
	animation: blub20 12s linear 1s infinite alternate;
	margin: 0 0 0 20%;
}
.blub06 {
	animation: blub10 12s linear 0.5s infinite alternate;
	margin: 0 0 0 -20%;
}
.blub07 {
	animation: blub10 12s linear 0.4s infinite alternate;
	margin: 0 0 0 30%;
}

.blub08 {
	animation: blub40 12s linear 0.5s infinite alternate;
	margin: 0 0 0 -30%;
}
.blub09 {
	animation: blub20 12s linear 1.5s infinite alternate;
	margin: 0 0 0 25%;
}
.blub10 {
	animation: blub40 12s linear 0.8s infinite alternate;
	margin: 0 0 0 -25%;
}

.blub11 {
	animation: blub20 12s linear 0.2s infinite alternate;
	margin: 0 0 0 35%;
}
.blub12 {
	animation: blub10 12s linear 0.2s infinite alternate;
	margin: 0 0 0 -35%;
}