/* CSS-Datei style.css */



 body, input, textarea, button {
 	background-color: #e6e6e6;
 	/*background: url(background.jpg) no-repeat center center fixed;
	background-size: cover;*/
	/*font-family: Helvetica;*/
	font-family: monospace;
	/*font-family: Calibri;*/
	hyphens: auto; 
	text-align: justify;
	font-size: 20px;
}

header, nav, section, footer {
    display: block;
    align: center;
}

header {
    color: #4d4d4d;
}
nav {
    color: black;
    background-color: #e6e6e6;
  	padding: 10px;
  	text-align: center;
  	width: 100%;

  	/* Pay special attention here! */
  	position: sticky;
  	top: 0px;
}

nav ul li {
  display: inline;
  color: black;
  text-decoration: none;
  margin: 0px 10px;
}

a {
	color: inherit;
  text-decoration: none;
}

a:hover {
	color: inherit;
  text-decoration: underline;
}

a:visited {
	color: inherit;
  text-decoration: none;
}

@media
(prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

section {
    color: #4d4d4d;
}
footer {
	text-align: center;
    color: #4d4d4d;	
}

.content {
	padding-top: 50px;
	padding-bottom: 50px;
	margin: 0 auto;
	width: 65%;
}

#leistungsumfang {
	color: black;
}



#leistungen {
	height: fit-content;
	width: fit-content;
	display: flex;
  justify-content: space-between;
  align-items: stretch;
}


.leistungs-kachel {
	flex-basis: 17%;
	text-decoration: none;
	text-align: center;
	background-color: #ffffff;
	transition: box-shadow 1s;
	box-shadow: 2px 2px 5px #888888;
	border-radius: 7px;
}

.leistungen-titel {
	text-decoration: underline;
	}

.leistungen-beschreibung {
	float: left; 
	text-align: left; 
	padding-left: 10px; 
	padding-right: 10px;
	font-size: 16px;
}

.leistungs-kachel:hover {
	text-decoration: none;
	box-shadow: 5px 5px 20px #888888;
	}

.leistungs-kachel img {
	height: 40 px; 
	width: 40px;  
	margin-top: 10 px;
}

#titel {
	width: 20ch;
  animation: typing 2s steps(19);
  white-space: nowrap;
  overflow: hidden; 
}

#leistungsumfang:target {
	animation: pulse 2s;
}

#honorar {
	color: black;
	background-size: cover;
}

#honorar:target {
	animation: pulse 2s;
}

#faq {
	height: 100%;
	width: 100%;
	color: black;
	background-size: cover;
}

#faq:target {
	animation: pulse 2s;
}

#Kontakt {
	height: 100%;
	width: 100%;
	color: black;
	background-size: cover;
}

#kontakt:target {
	animation: pulse 2s;
}

#impressum {
	height: 100%;
	color: black;
	background-size: cover;
}

#impressum:target {
	animation: pulse 2s;
}

h1 {
	text-align: center;
}

@keyframes typing {
  from {
    width: 0
  }
}
    


@keyframes pulse {
  0%      {color:black;}
  25%     {color:#047086;}
  25%     {text-shadow:#047086 1px 0 2px;}
  50%     {color:#047086;}
  50%     {text-shadow:#047086 1px 0 2px;}
  75%     {color:#047086;}
  75%     {text-shadow:#047086 1px 0 2px;}
  100%    {color:black;}
}