@font-face {
    font-family: 'montserrat';
    src: url('fonts/montserrat-v14-latin-300.woff');
	font-weight: 300;
}
@font-face {
    font-family: 'montserrat';
    src: url('fonts/montserrat-v14-latin-300italic.woff');
	font-weight: 300;
	font-style: italic; 
}
@font-face {
    font-family: 'montserrat';
    src: url('fonts/montserrat-v14-latin-600.woff');
	font-weight: 600;
}
@font-face {
    font-family: 'montserrat';
    src: url('fonts/montserrat-v14-latin-600italic.woff');
	font-weight: 600;
	font-style: italic;
}

* {
   margin: 0;
   padding: 0;
     }
html {overflow-y: scroll;	scrollbar-color: #ccc #eee;  scroll-behavior: smooth !important;}
body {font: 300 1.1rem/1.6 montserrat; background-color:hsl(210, 40%, 60%); color: #333;}
.team-content p {font-size:0.9rem;}
h1 {font: 600 5rem/1 montserrat; color:hsl(44.8, 61.2%, 40.4%); }
h2 {font: 600 2.8rem/1.2 montserrat; color:hsl(44.8, 61.2%, 40.4%) ;margin: 1rem 0 2rem 0;}
h3 {font: 600 2rem/1.2 montserrat; color:hsl(44.8, 61.2%, 40.4%); margin: 4rem 0 1rem 0;}
h4 {font: 600 1.4rem/1.2 montserrat; color:hsl(44.8, 61.2%, 40.4%); margin: 0 0 2rem 0;}

a {font-weight:600; color:hsl(210, 85%, 30%); text-decoration:none; transition: all 0.3s ease-in-out 0s; outline: 0;}
a:hover {color:#000000 !important; transition: all 0.3s ease-in-out 0s; filter: brightness(0);}
a.fax {font-weight: 200; color: #333;}
.infobox a {color:#fff;transition: all 0.3s ease-in-out 0s;}
.infobox a:hover {color:hsl(210, 85%, 30%);transition: all 0.3s ease-in-out 0s;}
b, strong {font-weight:600;}
p {margin-bottom:2rem;}
ul, ol {margin: 0 0 3rem 3rem;}
li {margin: 0 0 0.3rem 0;}
img {max-width:100%; height:auto;}

.main {width:100%; background-color:#fff; padding-bottom: 3rem;}

.header-img, #jssor_1, .content {animation: fadeInAnimation 1s ease-in-out;}
.top {margin-bottom: 2rem;}
.home .top {margin-bottom: 3rem;}

/*########################### Animationen ##############################*/	

.grid-item {animation: fadeInAnimationPraxis 2s ease-in-out;}
@keyframes fadeInAnimationPraxis {  0% {opacity: 0;}   50% { opacity:0; }  100% {opacity: 1;} }
.grid-item:nth-child(2) {animation-duration:0.4s; ease-in-out}
.grid-item:nth-child(3) {animation-duration:0.8s;ease-in-out}
.grid-item:nth-child(4) {animation-duration:1.2s;ease-in-out}
.grid-item:nth-child(5) {animation-duration:1.6s;ease-in-out}
.grid-item:nth-child(6) {animation-duration:2s;ease-in-out}
.grid-item:nth-child(7) {animation-duration:2.4s;ease-in-out}
.grid-item:nth-child(8) {animation-duration:2.8s;ease-in-out}
.grid-item:nth-child(9) {animation-duration:3.2s;ease-in-out}
.grid-item:nth-child(10) {animation-duration:3.6s;ease-in-out}

@keyframes fadeInAnimation {  0% {opacity: 0;}    100% {opacity: 1;} }

.ltr {animation: fadeInLTR 1s ease-in-out;}
@keyframes fadeInLTR {   0% {transform: translate(-300px, 0); opacity:0; } 100% { transform: translate(0, 0); opacity:1;}  }

.rtl {animation: fadeInRTL 1s ease-in-out;}
@keyframes fadeInRTL {   0% {transform: translate(300px, 0); opacity:0; }  100% { transform: translate(0, 0); opacity:1;}  }

.btt {animation: fadeInBTT 1s ease-in-out;}
@keyframes fadeInBTT {   0% {transform: translate(0, 300px); opacity:0; }  100% { transform: translate(0, 0); opacity:1;}  }


/*########################### KOPF & NAVI ##############################*/	
.head {position:absolute; top:0px; padding-top: 20px; z-index:10; width: 100%; margin: 0 auto; height:400px; display: flex;
justify-content: space-evenly;}

.logo {text-transform:uppercase; text-shadow: 0px 0px 120px #000; text-align:left; margin:15vh 35vw 0 1rem;}
.logo span {display:block;}
.logo a {color:#fff; }
.logo a:hover {color:#000;}
.claim {font-weight:300; font-size: 2.5rem; text-transform:none;}

nav {  color: #ccc; display:none;}
nav ul {padding: 0;}
nav li {display:inline;	list-style-type: none; margin: 0 10px; padding:0;}
nav a { font-weight:200; display: inline-block; padding: 60px 0; width: 160px; text-transform: uppercase; white-space: nowrap; background-color: hsla(0, 0%, 0%, 0.15);color:#fff; text-align:center; font-size:1.5rem; border-radius:50%; transition: all 0.5s ease-in-out 0s;}
nav a:hover, nav a.select  {color: #fff; text-decoration:none; background-color:hsla(75, 65%, 50%, 0.7); transition: all 0.5s ease-in-out 0s;}

#jssor_1 {filter: brightness(1); z-index:5; font-size:2rem;}
.kontakt #jssor_1 {margin:0 !important;}
.header-img{text-align:center;}
.header-img img{width:4000px; max-width:100%;}

/*########################### INHALT ##############################*/	
.content {max-width: 1200px; margin: 0 auto; display:flex; z-index:10; padding: 0 2rem 2rem 2rem;}
.titel {padding:0 2rem;}
.teamseite .content {max-width:1600px;}
.praxisseite .content {max-width:2400px; padding:0;}
.voll {width:100%;}
.zweidrittel {width: 65%; margin:0 2% 0 0;}
.drittel {width: 33%; margin:3rem 0 0 0;}
.links {margin:0 3rem 0 0;}
.drittel ul {margin:0;}
.drittel li {list-style-type: none; }
.zweidrittel .infobox ul {margin: 0 0 1rem 1rem;}

.infobox {
    padding: 1.5rem;
    background-image: radial-gradient(circle at bottom right, hsl(210, 50%, 80%) 5%, hsla(210, 60%, 70%, 100%));
    border-radius: 20px;
	font-weight:300;
	color: #fff;
	margin: 2rem 0;
}
.infobox table {width: 100%;}
.infobox td {width:33%; padding: 0 20px 0 0; vertical-align: top;}
.infobox h2 {font: 600 1.5rem/1 montserrat; color: #fff; margin: 1rem 0;}
.infobox h3 {font: 600 1.4rem/1 montserrat; color: #fff; margin-bottom:5px;}
.infobox a {font-size: 1.3rem;}
img.icon {width: 30px; vertical-align: middle; margin:5px;}
.urlaub img.icon {filter: invert(1);}

.grid {margin: 0 auto 4rem auto; }
.grid:after {  content: '';  display: block;  clear: both;}
.grid-sizer,.grid-item {  width: 33.333%;}
.grid-item {  float: right; padding: 0;}
.grid-item img {  display: block;  }

.team-content {  display: flex; flex-wrap: wrap; justify-content: center; }
.team {margin: 0 2rem 2rem 2rem;max-width: 300px; text-align:center; line-height:120%;}
.team img {border-radius: 50%; width:300px; height: auto;}
.team h2 {margin:0; font: 400 1.1rem/1.3 Poppins;}
.team .platz {filter: brightness(1);}

.light {background-image:radial-gradient(circle at top left, hsl(75, 40%, 92%) 50%, hsl(75, 40%, 87%)); color: #333; font-weight:200;}
.light h2, .light h3 {color: hsl(0, 0%, 20%);}
.light img.icon {filter: brightness(0.3);}
.light a {color: hsl(75, 55%, 40%);}
.light a:hover {color: hsl(0, 0%, 0%);}

.doctolib {font-size:90%;}
.doctolib a {display:block;text-align:center; background-color:#0596DE;color:#ffffff;overflow:hidden; border-radius:3px; padding:5px;}
.doctolib a:hover {background-color: #035C87 !important;}
.doctolib img {height:30px;margin:1px;vertical-align:middle;width:auto;}

.footer {color: #333; display:flex; padding: 8rem 2rem; font-size:90%; max-width: 1200px; margin: 0 auto; }
.footer-bg {width: 100%; background-image: linear-gradient(hsl(210, 50%, 80%), hsl(210, 60%, 60%)) ; height: 500px;}
.footer p.margin {width: 450px; }
.footer p:nth-child(2) {width: 350px; }
.footer p:nth-child(3) {width: 300px;}
.footer a {color: #fff;transition: all 0.3s ease-in-out 0s; font-weight:600;}
.footer a:hover {color:hsl(210, 85%, 30%);transition: all 0.3s ease-in-out 0s;}
.footer h3 {color:#fff; text-transform:uppercase; font: 300 1.1rem/1.5 Poppins; }
.up { display:block; }
.up img {width: 40px; height: auto; filter: invert(1) brightness(1) opacity(0.5); transition: all 0.3s ease-in-out 0s; }
.up img:hover {filter: invert(1) brightness(0) opacity(0.3);transition: all 0.3s ease-in-out 0s;}

img.icon_small {height: 20px; padding:2px; margin:1px 0; background-color: hsla(75, 55%, 45%, 0); border-radius:50%; vertical-align: middle; transition: all 0.3s ease-in-out 0s;}
a img.icon_small:hover {background-color:hsla(75, 55%, 45%,0); transition: all 0.3s ease-in-out 0s;}

#burger {display: none;}

.portrait {border-radius:50%; width:220px; height:220px; margin:-1rem 1rem 1rem 1rem; float:right;}

/*########################### MOBIL ##############################*/	


@media  (max-width: 1200px) {
.logo {margin-top:2rem;}
h1 {font-size: 4rem;}
.claim {font-size: 1.5rem;}
nav a {padding: 37px 0; width: 100px; font-size: 1rem;}

}

@media  (max-width: 830px) {
.head {height:200px;}
.logo span {display:inline;}
h1 {font-size: 2rem;}
.claim {font-size: 1rem;}
.claim {margin-top: 0;}
nav li {margin:0;}
#jssor_1 .name {display:none;}
.content {display:block; padding: 0 1rem;}
.drittel, .zweidrittel {width:100%; margin:0 0 3rem 0;}
.home .zweidrittel {display: table-footer-group; margin-top: 2rem;}
.home .drittel {display: table-header-group;}
.footer {display: block; padding: 5rem 1rem;}
.content p, .infobox {-webkit-hyphens: auto; hyphens: auto; font-size:1rem;}
h1, h2, h3, td {-webkit-hyphens: none;hyphens:none;}
h2 {font-size: 1.8rem; }
h3 {font-size: 1.4rem; }
h4 {font-size: 1.2rem;}
.infobox {padding:1.5rem 1rem;}
.infobox h2 {font-size:1.3rem; margin:0 0 0.5rem 0;}
.infobox a {font-size:1.2rem;}
img.icon {width: 20px; padding-right:5px;}

.top {margin-bottom:1rem !important;}
.footer p {width: auto !important;}
.grid-sizer, .grid-item {    width: 100%;}
.zweidrittel .infobox ul {    margin: 0 0 1rem 1rem;}
.footer {padding-bottom: 3rem;}


@media (max-width: 450px) {
.logo {margin-top:1rem;}
h1 {font-size: 1.4rem;}
h2 {font-size: 1.6rem;  margin-bottom:1rem;}
p {margin-bottom:1rem;}
.claim {font-size: 1rem; -webkit-hyphens: none;hyphens:none;}
.head {height:90px; background-image:linear-gradient(0deg, #00000000 0%, #000000ff 200%);padding-top:10px;}
body input + label {top: 10px;}
.portrait {float:none; margin: 0 0 1rem 0;}
}