@charset "UTF-8";
/* media CSS */


@media only screen and (min-width: 1920px) {
    #osteopathie,
    #team {
        margin-top: -38.6em;
    }
    #osteopathie .overlay {
        padding-top: 32em;
    }
    #team .headline {
        margin-bottom: 13.2em;
    }
    #faq .bg-color-base {
        margin-top: -6.5em;
    }
    #kontakt .bg-color-base {
        margin-top: -11.6em;
    }
}



@media only screen and (max-width: 1920px) {
    .container {
        width: 100%;
    }
}



@media only screen and (max-width: 1700px) { /*________________________________________________________________________ : 1.14 */
    /* TYPO */
    #menu ul > li > a {
        font-size: 3.5em;
    }
    h2,
    p.booking,
    .sub-menu ul > li > a {
        font-size: 2.45em;
    }
    h3, h4,
    #main p, #main ul,
    #kontakt p {
        font-size: 2.1em;
    }
    
    /* CONTAINER & ELEMENTS */
    .inside {
        width: 132em
    }
    #faq .content-small {
        padding: 15.6em 7em 13.5em 0;
    }
    #kontakt .content-small {
        padding: 18.4em 0 13.5em 20.74468085106383%;
    }
    .flex-columns .item {
        margin-bottom: 8.3em;
    }
    .flex-columns .item img {
        margin-bottom: 3.5em;
    }
    .btn-fixed {
        top: 44em;
    }
    .btn-fixed img {
        width: 14em;
    }
    
    /* MAIN & FOOTER */
    .imprint #main {
        padding-bottom: 13.5em;
    }
    #physiotherapie .container,
    #faq,
    #kontakt {
        padding-top: 9.8em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #impressum .inside,
    #datenschutz .inside,
    #faq {
        margin-top: -7em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #faq {
        margin-bottom: 9.3em;
    }
    #kontakt .icon {
        width: 12.3em;
        right: 7.6em;
        bottom: 13em;
    }
    .toggle-content,
    #accordeon h3 {
        padding-left: 123px;
    }
    #accordeon .item {
        padding-bottom: 2.6em;
    }
    #accordeon h3 {
        height: 70px;
    }
    #accordeon h3 span {
        width: 70px;
        height: 70px;
    }
    
    /* HEADER & MENU */
    #header-top {
        height: 18.2em;
        padding-top: 8.1em;
    }
    .imprint #header {
        margin-bottom: 14.9em;
    }
    .large .open-nav {
        top: 6.7em;
        left: 6.3em;
    }
    .small .open-nav {
        top: 2.3em;
        left: 1.9em;
    }
    .open-nav img {
        width: 6.2em;
    }
    .close-nav {
        top: 4.9em;
        right: 4.1em;
    }
    .close-nav img {
        width: 5.1em;
    }
    #menu {
        width: 65em;
    }
    #menu {
        left: -65em;
    }
    #menu ul {
        padding: 18.8em 6.3em 6.3em 6.3em;
    }
    #menu ul > li {
        margin-bottom: 3em;
    }
    #menu ul > li:nth-child(5) {
        margin-bottom: 10em;
    }
    #menu .icon {
        width: 12.3em;
        right: 8.1em;
        bottom: 9.8em;
    }
    .sub-menu ul > li {
        margin-right: 5.8em;
    }
    #kontakt .sub-menu {
        margin-top: 13.2em;
    }
}



@media only screen and (max-width: 1500px) { /*________________________________________________________________________ : 1.14 */
    /* TYPO */
    #menu ul > li > a {
        font-size: 3.1em;
    }
    h2,
    p.booking,
    .sub-menu ul > li > a {
        font-size: 2.1em;
    }
    h3, h4,
    #main p, #main ul,
    #kontakt p {
        font-size: 1.8em;
    }
    
    /* CONTAINER & ELEMENTS */
    .inside {
        width: 116em
    }
    #faq .content-small {
        padding: 13.7em 6.1em 11.8em 0;
    }
    #kontakt .content-small {
        padding: 16.1em 0 11.8em 20.74468085106383%;
    }
    .flex-columns .item {
        margin-bottom: 7.3em;
    }
    .flex-columns .item img {
        margin-bottom: 3.1em;
    }
    .btn-fixed {
        top: 38.6em;
    }
    .btn-fixed img {
        width: 12.3em;
    }
    
    /* MAIN & FOOTER */
    .imprint #main {
        padding-bottom: 11.8em;
    }
    #physiotherapie .container,
    #faq,
    #kontakt {
        padding-top: 8.6em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #impressum .inside,
    #datenschutz .inside,
    #faq {
        margin-top: -6.1em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #faq {
        margin-bottom: 8.2em;
    }
    #kontakt .icon {
        width: 10.8em;
        right: 6.7em;
        bottom: 11.4em;
    }
    .toggle-content,
    #accordeon h3 {
        padding-left: 108px;
    }
    #accordeon .item {
        padding-bottom: 2.3em;
    }
    #accordeon h3 {
        height: 61px;
    }
    #accordeon h3 span {
        width: 61px;
        height: 61px;
    }
    #accordeon h3 span:before {
        width: 3px;
        margin-left: -1.5px;
    }
    #accordeon h3 span:after {
        height: 3px;
        margin-top: -1.5px;
    }
    
    /* HEADER & MENU */
    #header-top {
        height: 16em;
        padding-top: 7.1em;
    }
    .imprint #header {
        margin-bottom: 13em;
    }
    .large .open-nav {
        top: 6em;
        left: 5.5em;
    }
    .small .open-nav {
        top: 2em;
        left: 1.5em;
    }
    .open-nav img {
        width: 5.4em;
    }
    .close-nav {
        top: 4.3em;
        right: 3.6em;
    }
    .close-nav img {
        width: 4.8em;
    }
    #menu {
        width: 57em;
    }
    #menu {
        left: -57em;
    }
    #menu ul {
        padding: 16.5em 5.5em 5.5em 5.5em;
    }
    #menu ul > li {
        margin-bottom: 2.6em;
    }
    #menu ul > li:nth-child(5) {
        margin-bottom: 8.8em;
    }
    #menu .icon {
        width: 10.8em;
        right: 7.1em;
        bottom: 8.6em;
    }
    .sub-menu ul > li {
        margin-right: 5em;
    }
    #kontakt .sub-menu {
        margin-top: 11.6em;
    }
}



@media only screen and (max-width: 1300px) { /*________________________________________________________________________ : 1.15 */
    /* TYPO */
    #menu ul > li > a {
        font-size: 2.7em;
    }
    h2,
    p.booking,
    .sub-menu ul > li > a {
        font-size: 1.8em;
    }
    h3, h4,
    #main p, #main ul,
    #kontakt p {
        font-size: 1.6em;
    }
    
    /* CONTAINER & ELEMENTS */
    .inside {
        width: 100em
    }
    #faq .content-small {
        padding: 11.9em 5.3em 10.3em 0;
    }
    #kontakt .content-small {
        padding: 14em 0 10.3em 20.74468085106383%;
    }
    .flex-columns .item {
        margin-bottom: 6.3em;
    }
    .flex-columns .item img {
        margin-bottom: 2.7em;
    }
    .btn-fixed {
        top: 33.6em;
    }
    .btn-fixed img {
        width: 10.7em;
    }
    
    /* MAIN & FOOTER */
    .imprint #main {
        padding-bottom: 10.3em;
    }
    #physiotherapie .container,
    #faq,
    #kontakt {
        padding-top: 7.5em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #impressum .inside,
    #datenschutz .inside,
    #faq {
        margin-top: -5.3em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #faq {
        margin-bottom: 7.1em;
    }
    #kontakt .icon {
        width: 9.4em;
        right: 5.8em;
        bottom: 9.9em;
    }
    .toggle-content,
    #accordeon h3 {
        padding-left: 94px;
    }
    #accordeon .item {
        padding-bottom: 2em;
    }
    #accordeon h3 {
        height: 53px;
    }
    #accordeon h3 span {
        width: 53px;
        height: 53px;
    }
    #accordeon h3 span:before {
        width: 2px;
        margin-left: -1px;
    }
    #accordeon h3 span:after {
        height: 2px;
        margin-top: -1px;
    }
    
    /* HEADER & MENU */
    #header-top {
        height: 13.9em;
        padding-top: 6.2em;
    }
    .imprint #header {
        margin-bottom: 11.3em;
    }
    .large .open-nav {
        top: 5.2em;
        left: 4.8em;
    }
    .small .open-nav {
        top: 1.8em;
        left: 1.3em;
    }
    .open-nav img {
        width: 4.7em;
    }
    .close-nav {
        top: 3.7em;
        right: 3.1em;
    }
    .close-nav img {
        width: 4.2em;
    }
    #menu {
        width: 49.6em;
    }
    #menu {
        left: -49.6em;
    }
    #menu ul {
        padding: 14.3em 4.8em 4.8em 4.8em;
    }
    #menu ul > li {
        margin-bottom: 2.3em;
    }
    #menu ul > li:nth-child(5) {
        margin-bottom: 7.7em;
    }
    #menu .icon {
        width: 9.4em;
        right: 6.2em;
        bottom: 7.5em;
    }
    .sub-menu ul > li {
        margin-right: 4.3em;
    }
    #kontakt .sub-menu {
        margin-top: 10em;
    }
}



@media only screen and (max-width: 1100px) { /*________________________________________________________________________ : 1.18 | TYPO 1.14 */
    /* TYPO */
    h2, h3, h4, p, #main ul {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    #menu ul > li > a {
        font-size: 2.4em;
    }
    h2,
    p.booking,
    .sub-menu ul > li > a {
        font-size: 1.6em;
    }
    h3, h4,
    #main p, #main ul,
    #kontakt p {
        font-size: 1.45em;
    }
    
    /* CONTAINER & ELEMENTS */
    .inside {
        width: 85em
    }
    #faq .content-small {
        padding: 10em 4.5em 8.7em 0;
    }
    #kontakt .content-small {
        padding: 12em 0 8.7em 20.74468085106383%;
    }
    .flex-columns .item {
        margin-bottom: 5.3em;
    }
    .flex-columns .item img {
        margin-bottom: 2.3em;
    }
    .btn-fixed {
        top: 28.5em;
    }
    .btn-fixed img {
        width: 10em;
    }
    
    /* MAIN & FOOTER */
    .imprint #main {
        padding-bottom: 8.7em;
    }
    #physiotherapie .container,
    #faq,
    #kontakt {
        padding-top: 6.4em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #impressum .inside,
    #datenschutz .inside,
    #faq {
        margin-top: -4.5em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #faq {
        margin-bottom: 6em;
    }
    #kontakt .icon {
        width: 8em;
        right: 4.9em;
        bottom: 8.4em;
    }
    .toggle-content,
    #accordeon h3 {
        padding-left: 80px;
    }
    #accordeon .item {
        padding-bottom: 1.7em;
    }
    #accordeon h3 {
        height: 45px;
    }
    #accordeon h3 span {
        width: 45px;
        height: 45px;
    }
    
    /* HEADER & MENU */
    #header-top {
        height: 11.8em;
        padding-top: 5.3em;
    }
    .imprint #header {
        margin-bottom: 9.6em;
    }
    .large .open-nav {
        top: 4.4em;
        left: 4.1em;
    }
    .small .open-nav {
        top: 1.5em;
        left: 1.1em;
    }
    .open-nav img {
        width: 4.6em;
    }
    .close-nav {
        top: 3.1em;
        right: 2.6em;
    }
    .close-nav img {
        width: 3.6em;
    }
    #menu {
        width: 42em;
    }
    #menu {
        left: -42em;
    }
    #menu ul {
        padding: 12em 4em 4em 4em;
    }
    #menu ul > li {
        margin-bottom: 2em;
    }
    #menu ul > li:nth-child(5) {
        margin-bottom: 6.5em;
    }
    #menu .icon {
        width: 8em;
        right: 5.3em;
        bottom: 6.4em;
    }
    .sub-menu ul > li {
        margin-right: 3.6em;
    }
    #kontakt .sub-menu {
        margin-top: 8.5em;
    }
}



@media only screen and (max-width: 960px) { /*________________________________________________________________________ 1-SPLATER FLUID */
    /* CONTAINER */
    .inside {
        width: 100%;
        padding-left: 15%;
        padding-right: 15%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .inside .content-small {
        width: 100%;
    }
    #physiotherapie .flex-columns,
    #osteopathie .flex-columns {
        flex-direction: column;
        justify-content: flex-start;
    }
    .flex-columns .column {
        width: 100%;
    }
    
    /* HEADER */
    #header .sub-menu {
        display: none;
    }
}



@media only screen and (max-width: 620px) { /*________________________________________________________________________ SMARTPHONE */
    /* HEADER */
    .imprint #header {
        margin-bottom: 4em;
    }
    #header-top {
        height: 8em;
        padding-top: 4em;
    }
    #header-bottom .container {
        flex-direction: column;
        justify-content: flex-start;
    }
    #header-bottom .header-col-left,
    #header-bottom .header-col-right {
        width: 100%;
    }
    #header .logo {
        width: 60%;
        margin-left: 20%;
        margin-top: 1.6em;
        margin-bottom: 2em;
    }
    #header-bottom .quote {
        width: 100%;
        height: 33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #header-bottom .quote img {
        width: 80%;
        margin-left: 0;
        margin-top: 0;
    }
    .btn-fixed {
        position: absolute;
        top: 26em;
    }
    
    .large .open-nav {
        top: 2.8em;
        left: 2.8em;
    }
    .small .open-nav {
        top: 1em;
        left: 1em;
    }
    #menu ul > li > a {
        font-size: 2.2em;
    }
    #menu {
        width: 32em;
    }
    #menu {
        left: -32em;
    }
    
    /* CONTAINER & MAIN */
    .inside {
        padding-left: 10%;
        padding-right: 10%;
    }
    .headline {
        margin: 0 4%;
    }
    
    #datenschutz .headline h1 {
        width: 100%;
    }
    #impressum .headline h1 {
        width: 78%;
    }
    
    #physiotherapie .headline h1 {
        width: 98%;
    }
    
    #osteopathie {
        margin-top: -22%;
    }
    #osteopathie .overlay {
        width: 94.4%;
    }
    
    #team .flex-columns {
        flex-direction: column;
        justify-content: flex-start;
    }
    .flex-columns .item {
        width: 100%;
    }
    .flex-columns .item,
    .flex-columns .item img {
        margin-bottom: 2em;
    }
    #team {
        margin-top: -21.5%;
    }
    #team .overlay {
        width: 78%;
    }
    #team .headline {
        margin-bottom: 5em;
    }
    
    #faq .headline h1 {
        width: 50.4%;
    }
    #faq .bg-color-base {
        margin-top: -4%;
    }
    #faq .content-small {
        padding: 8em 4em 6em 0;
    }
    .toggle-content,
    #accordeon h3 {
        padding-left: 45px;
    }
    #accordeon h3 {
        height: auto;
        justify-content: flex-start;
    }
    #accordeon .item {
        padding-bottom: 1.7em;
    }
    #accordeon h3 span {
        width: 25px;
        height: 25px;
    }
    
    #kontakt .headline h1 {
        width: 63.6%;
    }
    #kontakt .content-small {
        padding: 8em 0 6em 4em;
    }
    #kontakt .sub-menu {
        margin-top: 6em;
    }
    #kontakt .icon,
    #menu .icon {
        width: 6em;
        right: 2em;
        bottom: 2em;
    }
    
    #physiotherapie .inside,
    #osteopathie .inside,
    #impressum .inside,
    #datenschutz .inside,
    #faq {
        margin-top: -2.4em;
    }
    #physiotherapie .inside,
    #osteopathie .inside,
    #faq {
        margin-bottom: 4em;
    }
    #physiotherapie img.banner,
    #osteopathie img.banner {
        width: 90%;
    }
}



@media only screen and (max-width: 400px) {
    .inside {
        padding-left: 9%;
        padding-right: 9%;
    }
    #header-top .header-col-right {
        width: 66%;
    }
    .btn-fixed {
        top: 24em;
    }
    .toggle-content {
        padding-left: 0;
    }
    #faq .content-small {
        padding: 8em 3em 6em 0;
    }
    #kontakt .content-small {
        padding: 8em 0 6em 3em;
    }
    #kontakt .icon,
    #menu .icon {
        width: 5em;
        right: 1.5em;
        bottom: 1.5em;
    }
    .sub-menu ul > li {
        margin-right: 3em;
    }
}

@media only screen and (max-width: 360px) {
    .sub-menu ul > li {
        margin-right: 2em;
    }
}

@media only screen and (max-width: 320px) {
    #header p.booking {
        display: none;
    }
    #header .logo {
        width: 65%;
        margin-left: 17.50%;
        margin-top: 0.6em;
        margin-bottom: 2em;
    }
    #menu {
        width: 30em;
    }
    #menu {
        left: -30em;
    }
}