font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-LightItalic.eot');
    src: url('fonts/NotoSans-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans-LightItalic.woff2') format('woff2'),
        url('fonts/NotoSans-LightItalic.woff') format('woff'),
        url('fonts/NotoSans-LightItalic.ttf') format('truetype'),
        url('fonts/NotoSans-LightItalic.svg#NotoSans-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-Light.eot');
    src: url('fonts/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans-Light.woff2') format('woff2'),
        url('fonts/NotoSans-Light.woff') format('woff'),
        url('fonts/NotoSans-Light.ttf') format('truetype'),
        url('fonts/NotoSans-Light.svg#NotoSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-Regular.eot');
    src: url('fonts/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans-Regular.woff2') format('woff2'),
        url('fonts/NotoSans-Regular.woff') format('woff'),
        url('fonts/NotoSans-Regular.ttf') format('truetype'),
        url('fonts/NotoSans-Regular.svg#NotoSans-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html{margin: 0px; padding: 0px; height: 100%; width: 100%; scroll-behavior: smooth;}
body{
min-height: 100%; 
width: 100%; 
margin: 0px; 
padding: 0px; 
font-family: 'Noto Sans', 'Roboto Condensed', 'Open Sans Condensed', 'Roboto', 'Segoe', 'Helvetica', 'Arial', 'Verdana', 'Sans', 'Lucida';
font-weight: 300;
font-size: 1.0em;
background-color: #CCCCCC; 
background-image: url("images/header/fs-hintergrund_1949x975.jpg"); 
background-repeat: no-repeat; 
background-position: center center; 
background-size: cover; 
background-attachment: fixed; 
} 

span.praxisimg{
width: 100%; 
height: auto; 
display: block; 
margin: 0px; 
padding: 0px; 
float: left; 
overflow: hidden; 
}
span.praxisimg img.eins{
width: 61.2%; 
margin: 0px 2% 0px 0px; 
min-height: 400px;  
height: auto; 
display: inline-block; 
float: left; 
}
span.praxisimg img.zwei{
width: 36.8%; 
margin: 0px 0px 0px 0px; 
min-height: 400px;  
height: auto; 
display: inline-block; 
float: left; 
}



#gesamt{
min-height: calc(100% + 60px); 
display: inline-block; 
width: 100%; 
margin: 0px; 
padding: 0px; 
position: relative; 
}
.start #gesamt{
min-height: 120%;
}

h1, h2, h3, h4, h5, h6{
font-weight: 500;
display: block; 
width: 100%; 
border: 0px solid #FFFFFF;
}
a{}

#logo{
position: relative; 
top: 0px;
left: 10%; 
width: calc(50% - 50px); 
height: auto; 
margin: 0px 0px 0px 40px; 
z-index: 101; 
font-size: 1.5vw; 
text-shadow: 0px 0px 6px #FFFFFF;
text-align: left; 
}
/*.start #logo{
padding: 30px 25% 30px 25%;
}*/
.start #logo, .therapie #logo, .kompetenzen #logo, .praxis #logo, .kontakt #logo, .impressum #logo{
padding: 30px 0% 30px 0px;
}

#logo b{
font-size: 3.3vw; 
}
#logo a{
text-decoration: none; 
color: #000000; 
}
#logo img{
max-width: 100%; 
height: auto; 
padding: 0px; 
margin: 0px; 
}

.loggos{
float: left; 
border: 0px solid #FFFFFF; 
width: 100%; 
height: auto; 
padding: 0px; 
margin: 0px; 
}

#logotangr{
float: left; 
width: 15%; 
height: auto; 
padding: 0px; 
margin: 0px 0px 30px 0px; 
}
#logoschrift{
float: left; 
width: 100%; 
height: auto; 
padding: 0px; 
margin: 0px; 
}

img.anfahrt{
float: right; 
border: 0px solid #FFFFFF; 
max-width: 30%; 
height: auto; 
padding: 0px; 
margin: 0px; 

}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}

#startdown{
width: 50px; 
height: 50px; 
position: absolute; 
left: calc(50% - 25px);
top: 500px; 
background-color: #000000; 
margin: 0px; 
padding: 10px; 
animation-name: bounce;
animation: bounce 2s infinite;
display: block; 
opacity: 0.5; 
border-radius: 50px; 
z-index: 1000; 
display: none; 
}
#startdown.done{
display: none;
}
#startdown img{
position: absolute; 
left: 15px; 
top: 15px; 
margin: 0px; 
padding: 0px; 
transform: rotate(180deg); 
}

#opener{
position: fixed; 
top: 0px; 
left: 10%; 
background-image: url("images/sys/hamburgermenul.png"); 
background-repeat: no-repeat; 
background-position: top 20px left 25px; 
background-size: 40px auto; 
background-color: #212529; 
width: 80px; 
height: 80px; 
z-index: 101; 
display: none; 
}
#opener.active{
background-image: url("images/close.png"); 
background-position: top 20px left 25px; 
background-size: auto auto; 
}

#winfix{
height: 2px; 
width: 50px; 
float: left; 
position: relative; 
top: -2px; 
left: 0px; 
}


#nav{
position: relative; 
top: 0px; 
left: 0px; 
padding: 10px 10% 10px 10%; 
margin: 0px; 
background-image: url("images/sys/black80.png"); 
background-repeat: repeat; 
height: 50px; 
width: 80%; 
transition: all 2.0s ease-in-out;
z-index: 100; 
text-transform: uppercase; 
opacity: 0.0; 
}
#nav ul li.hidethis{
display: none; 
}
#nav.open{
left: 0px; 
border: 0px solid #FFFFFF; 
opacity: 1.0; 
}
#nav.open.fixiert{
position: fixed; 
top: 0px; 
}
#nav a{
color: #FFFFFF; 
text-decoration: none;  
font-weight: normal;
text-align: center; 
}
#nav ul{
padding: 0px 0px 0px 20px; 
margin: 0px; 
font-size: 1.2em; 
height: 0px; 
position: relative; 
overflow: hidden;
display: flex; 
flex-direction: row; 
flex-wrap: nowrap; 
justify-content: left; 
width: calc(100% - 20px); 
border: 0px solid #FFFFFF; 
list-style-type: none; 
}
#nav.open ul{
height: auto; 
overflow: visible;
}
#nav.open ul ul{
}



#nav ul li{
align-self:left; 
/*float: left; 
display: block; */
padding: 0px 20px 0px 20px;  
margin: 0px; 
width: auto; 
border: 0px solid #FFFFFF; 
text-align: left; 
line-height: 50px; 
transition: all 1.0s ease-in-out;
}
#nav ul li a{
text-align: center; 
border: 0px solid #FFFFFF; 
display: block; 
transition: all 0.5s ease-in-out;
color: #FFFFFF; 
}


#nav ul li a:hover, #nav ul li a:focus{
color: #999999; 
}


#texte{
padding: 30px 20px 200px 40px; 
margin: 0px 10% 50px 10%; 
background-image: url("images/sys/weiss_90.png"); 
background-repeat: repeat; 
width: calc(80% - 60px);
min-height: calc(100% - 0px); 
position: relative; 
top: 0px; 
z-index: 99; 
font-size: 1.3em; 
line-height: 1.2em; 
hyphens: auto;
}
#texte a{
text-decoration: none; 
color: #333333; 
font-weight: normal; 
}
#texte a:hover, #texte a:focus{
color: #666666; 
}


.start #nav{
/*top: 100%; */
transition: all 2.5s ease-in-out;
transition-delay: 2s;
border: 0px solid #FFFFFF;  
margin: 0% 0% 0% 0%; 
}
.start #nav.scrolled{
top: 0%; 
margin: 0% 0% 0% 0%; 
}

.start #texte{
top: 100%; 
transition: all 1.5s ease-in-out;
border: 0px solid #FFFFFF;  
margin: 200% 10% 0% 10%; 
}
.start #texte.scrolled {
top: 0%; 
margin: 0% 10% 0px 10%; 
}


.start #logo{
transition: all 1.5s ease-in-out;
}
.start #logo.scrolled{
padding: 30px 25% 30px 25%;
}

.start #nav ul li a.start, 
.therapie #nav ul li a.therapie, 
.kompetenzen #nav ul li a.kompetenzen, 
.praxis #nav ul li a.praxis, 
.kontakt #nav ul li a.kontakt{
color: #999999; 
}


.bildgalerie{
width: 80%; 
height: auto; 
border: 1px solid #FFFFFF; 
}
.ma_text{
display: none; 
}
.thumbnail{
width: 150px; 
height: 150px; 
}
.thumbnail img, .kleinbild, .bild_border{
max-width: 150px; 
max-height: 150px; 
float: left; 
border: 1px solid #FFFFFF; 
}

img.rechts{
float: right; 
margin: 0px 0px 20px 20px; 
padding: 0px 0px 0px 0px; 
width: 200px; 
height: auto; 
border: 1px solid #999999; 
}


#info_opener{
width: 80px; 
height: 80px; 
text-align: center; 
background-image: url("images/sys/weiss_90.png"); 
background-repeat: repeat; 
position: absolute; 
top: 0px; 
left: 0px; 
line-height: 80px;  
}
#infotext{
padding: 30px 30px 30px 30px; 
margin: 0px; 
background-image: url("images/sys/weiss_90.png"); 
background-repeat: repeat; 
display: inline-block; 
width: calc(30% - 60px);
height: auto; 
border: 0px solid #999999;  
position: absolute; 
top: 80px; 
left: -100%; 
z-index: 99; 
font-size: 1.4em; 
transition: all 1.0s ease-in-out;
opacity: 0.0; 
}
#infotext.active{
left: 0px; 
opacity: 1.0; 
}




#footer{
border: 0px solid #FFFFFF; 
position: fixed; 
bottom: 0px; 
width: 100%; 
height: 50px; 
line-height: 50px; 
padding: 10px 0px 10px 0px; 
margin: 0px; 
display: block; 
/*background-color: #212529;*/
background-color: #212529; 
color: #FFFFFF; 
z-index: 101; 
}
#footer a{
color: #FFFFFF; 
text-decoration: none; 
}
#footer .left{
padding: 0px 0px 0px 30px; 
margin: 0px; 
float: left; 
width: 30%; 
}
#footer .right{
float: right; 
padding: 0px 100px 0px 0px; 
margin: 0px; 
width: 50%; 
height: 50px; 
border: 0px solid #FFFFFF; 
text-align: right; 
line-height: 50px; 
display: block; 
}
.fusslinks{
font-size: 1.0em; 
text-transform: uppercase; 
font-weight: 300; 
text-align: right; 
padding: 0px 50px 0px 0px; 
margin: 0px; 
height: 50px; 
display: block; 
position: relative; 
}
img.scroller{
padding: 0px 0px 0px 0px; 
margin: 0px; 
height: 40px; 
width: auto; 
position: absolute; 
top: 10px; 
right: 50px; 
}


/* SLIDER SEITE ANSPRECHPARTNER Style the buttons that are used to open and close the accordion panel */
.accordion {
  color: #444;
  cursor: pointer;
  padding: 5px 5px 5px 70px;
  border-radius: 5px; 
  border: 0px solid #FFFFFF; 
  margin: 10px 0px 0px 0px; 
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  background-image: url("images/sys/plus_1.png"); 
  background-repeat: no-repeat; 
  background-size: 30px 30px; 
  background-position: 10px 50%; 
  background-color: transparent;
}
.accordion:hover {

}



.accordion h2{
font-size: 1.5em; 
font-weight: 400; 
text-decoration: none; 
}
.accordion h2:hover{text-decoration: underline; }

.accordion h2 .small{
font-size: 0.5em; 
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
}
.active{
  background-image: url("images/sys/minus.png"); 
}
/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
    margin: 0px 0px 10px 0px; 
  max-height: 0px; 
  overflow: hidden;
  transition: max-height 1.0s ease-out;
  opacity: 0.9; 
}




@media screen and (min-width: 1201px) and (max-width: 1300px) {
/*
#nav ul{
font-size: 1.3em;
}
#nav.open{
width: 70%; 
padding: 15px 15% 15px 15%; 
}
*/

}


@media screen and (min-width: 768px) and (max-width: 1200px) {
/*#nav.open{
height: 50px; 
width: 70%; 
padding: 10px 15% 10px 15%; 
border: 0px solid #FFFFFF; 
left: 0%; 
}
#nav ul{
font-size: 1.1em;
}
#nav ul li{
padding: 0px 10px 0px 10px;
}*/
#nav ul li{padding: 0px 0px 0px 20px;}
#logo, .start #logo, .start #logo.scrolled{
width: calc(60% - 40px);
padding: 30px 30% 30px 0%;
margin: 70px 0px 50px 40px; 
border: 0px solid #FFFFFF; 
}
#logo b{font-size: 2.2em;}
#logo{font-size: 1.3em;}
}






@media screen and (min-width: 300px) and (max-width: 767px) {
#texte{font-size: 1.0em;
margin: 0px 5% 50px 5%; 
width: calc(90% - 60px);
padding: 30px 20px 200px 20px;
}

h2, h1{
hyphens: none;
line-height: 1.2em; 
}
.accordion{
padding: 5px 5px 5px 40px;
background-position: 0px 50%;
}
ul{
padding: 0px 0px 0px 12px; 
margin: 0px; 
}
#logotangr{
width: 40%; 

margin: 0px 0px 30px 0px; 
}


#logo, .start #logo, .start #logo.scrolled, .therapie #logo, .kompetenzen #logo, .praxis #logo, .kontakt #logo, .impressum #logo{
width: 80%;
padding: 30px 5% 30px 5%;
margin: 100px 0px 50px 0px; 
border: 0px solid #FFFFFF; 
}
#logo b{font-size: 2.2em;}
#logo{font-size: 1.0em;}

#footer .left{width: 60%; }

#nav ul li.hidethis{
display: block; 
}

img.rechts, img.anfahrt{
margin-left: 0%; 
margin-right: 60%; 
margin-top: 20px; 
margin-bottom: 20px; 
width: 40%; 
max-width: 10000px; 
}
#startdown{display: none; }

.start #nav{top: 0px; left: 0px; }
#nav{background-image: none;background-color: #333333;}
#nav.open, #nav.open.fixiert{height: auto; width: 100%;padding: 10px 0px 10px 0px;margin: 0px 0px 50px 0px;z-index: 2000;position: fixed; top: 0px; max-height: 50px;overflow: hidden; transition: all 1.0s ease-in-out;}
#nav.open.ausgeklappt, #nav.open.fixiert.ausgeklappt{max-height: 1500px;overflow: visible; }
#nav.open ul {background-color: #333333;display: inline-block;width: 100%;padding: 70px 0px 0px 0px;border: 0px solid #000000; margin: 0px;background-image: url("images/hamburgermenul.png");background-position: right 10px top 10px;background-repeat: no-repeat;background-size: 48px 30px;}
#nav.open li {width: 90%;height: 50px;margin: 0px 5% 0px 5%;border-top: 1px solid #999999;border-radius: 0px;font-size: 1.3em;text-align: left;line-height: 50px;}
#nav.open li a{display: block; text-align: left; }

#nav.open li:nth-child(1){
border-top: 0px solid #999999;
}
span.praxisimg img.eins, span.praxisimg img.zwei{
min-height: auto;  
}

}

@media screen and (min-width: 10px) and (max-width: 20px) {
_________
/*/*hier nur wenn Unterelemente*/*//*
#nav ul li.haschild ul.subnav{
font-size: 0.75em; 
text-align: right; 
width: 0px; 
background-image: url("images/sys/weiss_90.png"); 
background-repeat: repeat; 
height: 0px;
overflow: hidden; 
padding: 0px 20px 0px 0px; 
margin: 0px 0px 0px 0px; 
transition: all 1.0s ease-in-out;
display: inline-block; 
position: absolute;
left: -30px; 
top: 0px; 
display: none; 
}
#nav ul li.nonedisplay{
display: none; 
}
#nav ul li.haschild ul.subnav{
display: none; 
}
#nav ul li.haschild ul.subnav.ausgeklappt{
padding: 0px 20px 0px 0px; 
max-height: 1500px;
height: calc(100% + 120px); 
width: calc(60% - 30px); 
left: -60%;  
display: none; 
}
#nav ul li.haschild ul.subnav li:nth-child(1){
border: 0px solid #FFFFFF; 
width: calc(100% - 20px); 
display: none; 
}
#nav ul li.haschild ul.subnav li{
padding: 0px 0px 0px 10px; 
width: calc(100% - 20px); 
display: block; 
white-space: nowrap; 
display: none; 
}*/
/*/*hier nur wenn Unterelemente*/*/
}