/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Open Sans,Arial,sans-serif;
    scroll-behavior: smooth;
}

:root{
    --color-main: #4C193B;
    --color-nav: #481838;
    --color-footer: #2D2D2D;
    --color-footer-schrift: #bbb;
    --color-p: #666666;
    --color-white: #ffffff;
    --color-black: #000000;
    --hover-color: #3498db;
    --fontsize-mobile: 14px;
    --font-weight: 500;
    --fontsize-tablet: 15px;
    --fontsize-desktop: 16px;
}

@media only screen and (max-width: 768px){
    /*Logo*/
    .logo{
        display: flex;
        justify-content: center;
        background: var(--color-main);
    }
    .logo a{
        display: flex;
        justify-content: center;
        width: 75px;
    }
    
    .logo a img{
        width: 100%;
        padding: 5%;
    }

    /*Navigationsleiste*/

    .head{
        background: var(--color-main);
        padding: 2% 0%;
    }
        .bar1, .bar2, .bar3 {
            width: 22px; 
            height: 2px; 
            background-color: var(--color-white); 
            margin: 2.5px 0; 
            transition: 0.4s;
            display: block;
        }
    
        .toogle_button {
            display: flex;
            justify-content: center;
            flex-direction: column;
            position: absolute;
            right: 3%;
            top: 20%;
            cursor: pointer; 
        }
    
        #bereich-nav {
            display: flex;
            width: 80%;
            height: auto;
            padding: 2%;
            margin: 2% 10%;
            border-radius: 10px;
            background-color: var(--color-nav);
            color: var(--color-white);
            cursor: pointer;
            position: relative;
        }
    
        #bereich-nav p {
            justify-content: flex-start;
            font-size: var(--fontsize-mobile);
            
        }

        #mySidenav{
            display: none;
            justify-content: center;
            flex-direction: column;
            width: 80%;
            margin-left: 10%;
            font-size: var(--fontsize-mobile);
           font-weight: 500;
            background: var(--color-main);
            position: absolute;
            top: 0%;
            padding: 0% 1% ;
            opacity: 3;
            box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.05);
            z-index: 99;
        }

        #mySidenav a{
            padding: 2%;
            margin: 0px 35px 0px 35px;
            color: var(--color-white);
            font-weight: 700;
            text-decoration: none;
        }

        #mySidenav .active{
            color: var(--hover-color);
        }
        #mySidenav a:hover{
            color: var(--hover-color);
        }
        #mySidenav .unterpunkt{
            margin-left: 15%;
        }

       /*Wir suchen dich*/
        #Job{
          background: var(--color-main);
          color: var(--color-white);
          width: 90%;
          margin-left: 5%;
          line-height: 150%;
          padding: 5%;
          margin-top: 10px;
        }

        #Job h1{
          font-size: 32px;
          text-align: center;
          padding: 5% 0% 10% 0%;
        }

        #Job p{
          font-size: var(--fontsize-mobile);
          padding: 2%;
          color: var(--color-white);
          text-align: center;
        }

        #Job p a{
          font-size: var(--fontsize-mobile);
          color: var(--color-white);
          text-decoration: none;
        }


        .image{
            position: relative;
        }
        .image img{
            width: 100%;
            
        }

        /*Herzlich Willkommen Überschrift*/
        .herzlich-willkommen h1{
            font-size: 32px;
            text-align: center;
            padding: 10% 0%;
        }

         /*Willkommenstext*/
         
         .willkommentext{
            background: var(--color-main);
            width: 90%;
            margin-left: 5%;
         }
         .willkommentext h3{
            font-size: var(--fontsize-mobile);
            text-align: center;
            padding: 2%;
            color: var(--color-white);
         }
         
         /*Startseite Text*/
        .startseite-text{
            font-size: var(--fontsize-mobile);
           font-weight: 500;
            padding: 5%;
            width: 100%;
            line-height: 150%;
            display: flex;
            flex-direction: column;
            color: var(--color-p);
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

         .startseite-text img{
            width: 100%;
            height: auto;
            padding: 5% 0%;
         }

        .startseite-text span{
            font-size: 24px;
            line-height: 150%;
        }

        /*Footer*/
        footer{
            background: var(--color-footer);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            padding: 5%;
            margin-top: 10%;
        }
    
        footer a{
            color: var(--color-footer-schrift);
            text-decoration: none;
            padding: 1% 2%;
            font-weight: 600;
            font-size: 15px;
        }

        footer .active{
            color: var(--hover-color);
        }

        /**********Seite Praxis**************/
        .team{
            display: flex;
            flex-direction: column;
            padding: 5%;
            width: 100%;
        }

        .team .person{
            display: flex;
            flex-direction: column;
        }

        .text-person{
            text-align: center;
            line-height: 150%;
            padding: 5% 5% 10% 5%;
            color: var(--color-p);
            font-size: var(--fontsize-mobile);
        }

        
        /*Imageslider*/

        .slideshow-container {
            margin-top: 5%;
            max-width:100%;
            min-height: 250px;
            max-height: 400px;
            position: relative;
            height: auto;
        }

        .mySlides {
        display: none;
        max-height: 90vh;
        
        }
        
        .mySlides img{
        height: auto;
        min-height: 250px;
        max-height: 400px;
        height: 100%;
        width: 100%;
        object-fit: cover;
        }

        .mySlides:nth-child(1) img{
            object-position: right;
        }
        
        .prev, .next {
        cursor: pointer;
        position: absolute;
        bottom: 5%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        }
        
        .next {
        right: 5%;
        top: 50%;
        border-radius: 3px 0 0 3px;
        }
        
        .prev{
        left: 5%;
        top: 50%;
        }
        
        .prev:hover, .next:hover{
        font-size: 22px;
        }
        
        .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: none;
        transition: background-color 0.6s ease;
        }
        
        .numbertext {
        color: #f2f2f2;
        font-size: 24px;
        padding: 8px 12px;
        position: absolute;
        bottom: 20%;
        right: 5%;
        display: none;
        }
        
        .strich{
        font-size: 50px;
        line-height: 60%;
        margin-left: 15%;
        margin-right: 15%;
        
        }
        
        .fade {
        animation-name: fade;
        animation-duration: 1.5s;
        }
        
        @keyframes fade {
        from {opacity: .2}
        to {opacity: 1}
        }
        
        .slideshow-container::after{
        content: "";
        width: 90%;
        height: 1px;
        background: white;
        position: absolute;
        left: 5%;
        bottom: 15%;
        margin-top: 2%;
        display: none;
        }

        /*Massagen und Kontaktseite*/
        .massagen{
            padding: 10%;
        }

        .image-masssagen{
            display: flex;
            flex-direction: column;

        }

        .massagen ul li{
            padding: 1%;
            font-size: var(--fontsize-tablet);
           font-weight: 500;
            color: var(--color-p);
        }

        .image-massagen img, .image-kontakt img{
            width: 100%;
            height: auto;
            padding: 5%;
        }

        .kontakt-text{
            text-align: center;
            padding: 10% 5% 2.5% 5%;
        }

        .kontakt-text h3{
            font-size: 24px;
        }

        .kontakt-text p{
            padding: 10px 0px;
            font-size: var(--fontsize-mobile);
            color: var(--color-p);
           font-weight: 500;
        }

        .kontakt-text p a{
            font-size: var(--fontsize-mobile);
            color: var(--color-black);
            text-decoration: none;
           font-weight: 500;
        }

        #html-tablet{
            display: none;
        }

        /*******Physio Seite*********/
        .img-physio{
            padding: 5%;
        }

        .img-physio img{
            width: 100%;
            height: auto;
        }
        .collaps-content {
            display: none;
            transition: 1s;
            padding: 5%;
            font-size: var(--fontsize-mobile);
            line-height: 150%;
            text-align: justify;
            hyphens: auto;
        }

        .collaps-content p{
            hyphens: auto;
            text-align: justify;
            color: var(--color-p);
           font-weight: 500;
        }

        .collaps-content img{
            width: 100%;
            padding: 20px 0;
            object-fit: cover;
            max-height: 450px;
        }

        .flex-collaps-content div h3{
            padding: 20px 0 0 0;
        }
        
        .collaps-bereich{
            padding: 20px 0 0 0;
        }
        .collaps-header{
            background: var(--color-main);
            width: 100%;
            font-size: var(--fontsize-mobile);
           font-weight: 500;
            text-align: left;
            padding: 5%;
            color: var(--color-white);
            cursor: pointer;
         }

         .collaps-header i{
            float: right;
            padding-right: 5%;
         }

         .collaps-content ul{
            padding: 1% 5%;
         }

         #footer-physio{
            margin-top: 0%;
         }

         /*Impressum*/ 
         .impressum-bereich-center{
            text-align: center;
          }
    
          .impressum-bereich-center h1{
            padding: 40px;
            font-weight: 600;
          }
    
          .impressum-bereich-center h2{
            padding: 10px;
          }
    
          .impressum-bereich-center p, .Haftungsausschluss-bereich p{
            line-height: 150%;
            padding: 7.5px 5%;
            font-size: var(--fontsize-mobile);
           font-weight: 500;
            color: var(--color-p);
          }
    
          .impressum-bereich-links{
            text-align: center;
            padding: 3% 5%;
          }
    
          .impressum-bereich-links h3{
            padding: 10px;
            font-size: 24px;
          }
    
          .impressum-bereich-links p{
            font-size: var(--fontsize-mobile);
           font-weight: 500;
            line-height: 150%;
            padding: 5px 10px;
          }

          .impressum-bereich a{
            color: var(--color-p);
          }
          
          /*Haftungsausschluss*/

          .Haftungsausschluss-bereich, .datenschutzerklaerung{
            padding: 5% 5% 0% 5%;
          }
    
          .Haftungsausschluss-bereich h1, .datenschutzerklaerung h1{
            padding: 20px 5%;
          }
    
          .Haftungsausschluss-bereich h2, .datenschutzerklaerung h2{
            padding: 10px 5%;
            font-size: 24px;
          }

          .datenschutzerklaerung{
            padding: 5% 5% 0% 5%;
          }
    
          .datenschutzerklaerung h1{
            padding: 20px 5%;
          }
    
          .datenschutzerklaerung h2{
            padding: 10px 5%;
            font-size: 24px;
          }

          .datenschutzerklaerung h3{
            padding: 10px 5%;
            font-size: 20px;
            line-height: 140%;
          }

          .datenschutzerklaerung h4{
            padding: 5px 5%;
            font-size: 18px;
            line-height: 140%;
          }

          .datenschutzerklaerung p{
            font-size: var(--fontsize-mobile);
           font-weight: 500;
            color: var(--color-p);
            line-height: 150%;
            padding: 5px 5%;
          }

          .datenschutzerklaerung ul{
            font-size: var(--fontsize-mobile);
           font-weight: 500;
            color: var(--color-p);
            line-height: 150%;
            padding: 5px 5%;
            margin-left: 10%;
          }

          .datenschutzerklaerung a{
            color: black;
          }

          .reveal{
            position: relative;
            transform: translateY(150px);
            opacity: 0;
            transition: all 2s ease;
        }
        
        .reveal.active-reveal{
            transform: translateY(0px);
            opacity: 1;
        }
    }

@media only screen and (min-width: 769px) {

    #html-mobile{
        display: none;
    }

    #html-tablet .image img{
        width: 100%;
        height: auto;
        margin-top: 70px;
    }

    #html-tablet nav{
        background: var(--color-nav);
        padding: 1%;
        position: fixed;
        top: 0;
        transition: top 0.3s;
        width: 100%;
        display: block;
        z-index: 99;
    }

    #html-tablet nav ul{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #html-tablet nav ul li{
        list-style: none;
        padding: 1%;
    }

    #html-tablet nav ul li a{
        color: var(--color-white);
        text-decoration: none;
        font-size: var(--fontsize-tablet);
    }

    #html-tablet nav ul li:hover a{
        color: var(--hover-color);
    }

    #html-tablet nav ul li .active{
        color: var(--hover-color);
    }

    /*Wir suchen dich*/
    #Job{
      background: var(--color-main);
      color: var(--color-white);
      width: 90%;
      margin-left: 5%;
      line-height: 150%;
      margin-top: 10px;
      padding: 25px;
    }

    #Job h1{
      font-size: 32px;
      text-align: center;
      padding: 25px 0% 50px 0%;
    }

    #Job p{
      font-size: var(--fontsize-tablet);
      padding: 2%;
      color: var(--color-white);
      text-align: center;
    }

    #Job p a{
      font-size: var(--fontsize-tablet);
      color: var(--color-white);
      text-decoration: none;
    }

     /*Herzlich Willkommen Überschrift*/
        .herzlich-willkommen h1{
            font-size: 32px;
            text-align: center;
            padding: 50px 0%;
        }

         /*Willkommenstext*/
         
         .willkommentext{
            background: var(--color-main);
            width: 90%;
            margin-left: 5%;
         }
         .willkommentext h3{
            font-size: var(--fontsize-tablet);
            text-align: center;
            padding: 2%;
            color: var(--color-white);
         }
         
         /*Startseite Text*/
        .startseite-text{
            font-size: var(--fontsize-tablet);
           font-weight: 500;
            padding: 2.5% 5%;
            width: 100%;
            line-height: 150%;
            display: flex;
            flex-direction: row;
            color: var(--color-p);
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

         .startseite-text img{
            width: 40%;
            min-height: 300px;
            max-height: 600px;
            height: 100%;
            padding: 5% 5% 0% 0%;
            object-fit: cover;
         }

         .startseite-text p{
            width: 60%;
            height: auto;
            padding: 5% 0%;
            line-height: 150%;
         }

        .startseite-text span{
            font-size: 24px;
            line-height: 150%;
        }

        /*Footer*/
        footer{
            background: var(--color-footer);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            padding: 10px;
            margin-top: 10px;
        }
    
        footer a{
            color: var(--color-footer-schrift);
            text-decoration: none;
            padding: 1% 2%;
            font-weight: 600;
            font-size: 15px;
        }

        footer .active{
            color: var(--hover-color);
        }
        /**********Seite Praxis**************/
        .team{
            display: flex;
            flex-direction: row;
            padding: 5%;
            width: 100%;
            gap: 2%;
        }

        .team .person{
            display: flex;
            flex-direction: column;
            width: 23.5%;
        }

        .text-person{
            text-align: center;
            line-height: 150%;
            padding: 5% 5% 10% 5%;
        }
        
        
        /*Imageslider*/

        .slideshow-container {
            margin-top: 20px;
            width: 100%;
            padding: 5%;
            min-height: 400px;
            max-height: 700px;
            position: relative;
            height: auto;
        }

        .mySlides {
        display: none;
        max-height: 600px;
        
        }
        
        .mySlides img{
        height: auto;
        min-height: 400px;
        max-height: 600px;
        width: 100%;
        object-fit: cover;
        }
        
        .prev, .next {
        cursor: pointer;
        position: absolute;
        bottom: 5%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        }
        
        .next {
        right: 5%;
        top: 50%;
        border-radius: 3px 0 0 3px;
        }
        
        .prev{
        left: 5%;
        top: 50%;
        }
        
        .prev:hover, .next:hover{
        font-size: 22px;
        }
        
        .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: none;
        transition: background-color 0.6s ease;
        }
        
        .numbertext {
        color: #f2f2f2;
        font-size: 24px;
        padding: 8px 12px;
        position: absolute;
        bottom: 20%;
        right: 5%;
        display: none;
        }
        
        .strich{
        font-size: 50px;
        line-height: 60%;
        margin-left: 15%;
        margin-right: 15%;
        
        }
        
        .fade {
        animation-name: fade;
        animation-duration: 1.5s;
        }
        
        @keyframes fade {
        from {opacity: .2}
        to {opacity: 1}
        }
        
        .slideshow-container::after{
        content: "";
        width: 90%;
        height: 1px;
        background: white;
        position: absolute;
        left: 5%;
        bottom: 15%;
        margin-top: 2%;
        display: none;
        }

        /*Massagen und Kontaktseite*/
        .massagen{
            padding: 2.5%;
            display: flex;
            justify-content: center;
        }

        .massagen ul li{
            padding: 1%;
            font-size: var(--fontsize-tablet);
           font-weight: 500;
            color: var(--color-p);
        }

        .image-massagen{
            width: 100%;
            padding: 5%;
            display: flex;
            flex-direction: row;
            gap: 2%;
        }
        
        .image-massagen img{
            width: 32%;
        }

        .image-kontakt img{
            width: 100%;
            height: auto;
            padding: 0px 5% 50px 5%;
        }

        .kontakt-text{
            text-align: center;
            padding: 5% 5% 2.5% 5%;
        }

        .kontakt-text h3{
            font-size: 24px;
        }

        .kontakt-text p{
            padding: 10px 0px;
            line-height: 150%;
            font-size: var(--fontsize-tablet);
            color: var(--color-p);
           font-weight: 500;
        }

        .kontakt-text p a{
            font-size: var(--fontsize-tablet);
            color: var(--color-black);
            text-decoration: none;
           font-weight: 500;
        }

         /*******Physio Seite*********/
         .img-physio{
            padding: 2.5% 35%;
        }

        .img-physio img{
            width: 100%;
            height: auto;
        }
        .collaps-content {
            display: none;
            transition: 1s;
            padding: 2.5% 10%;
            font-size: var(--fontsize-tablet);
            line-height: 150%;
            text-align: justify;
            hyphens: auto;
        }

        .collaps-content p{
            hyphens: auto;
            text-align: justify;
            color: var(--color-p);
           font-weight: 500;
        }

        .collaps-content img{
            width: 100%;
            padding: 20px 0;
            object-fit: cover;
            max-height: 450px;
        }
        
        .collaps-bereich{
            padding: 20px 0 0 0;
            width: 90%;
            margin-left: 5%;
        }
        .collaps-header{
            background: var(--color-main);
            width: 100%;
            font-size: var(--fontsize-tablet);
            text-align: left;
            padding: 2%;
            color: var(--color-white);
            cursor: pointer;
         }

         .collaps-header i{
            float: right;
            padding-right: 5%;
         }

         .collaps-content h3{
            padding: 4%;
         }
         .collaps-content ul{
            padding: 1% 5%;
            text-align: left;
         }

         #footer-physio{
            margin-top: 5%;
         }

         .bilder-cranio{
            display: flex;
            flex-direction: row;
            gap: 20px;
         }

         .bilder-cranio img{
            width: 49%;
         }

         .flex-collaps-content{
            display: flex;
            flex-direction: row;
            gap: 20px;
         }

         .flex-collaps-content img{
            width: auto;
            min-width: 50%;
            max-width: 50%;
            max-height: 600px;
            padding: 0%;
         }

         .flex-collaps-content:nth-child(2) img{
            object-position: 100%;
         }
         
    .impressum-bereich-center{
        text-align: center;
      }

      .impressum-bereich-center h1{
        padding: 40px;
        font-weight: 600;
        text-align: center;
      }

      .impressum-bereich-center h2{
        padding: 10px;
      }

      .impressum-bereich-center p{
        line-height: 150%;
        padding: 7.5px;
        font-size: var(--fontsize-tablet);
      }

      .impressum-bereich-links{
        text-align: center;
        padding: 1% 5%;
      }

      .impressum-bereich-links h3{
        padding: 10px;
        font-size: 24px;
      }

      .impressum-bereich-links p{
        font-size: var(--fontsize-tablet);
        line-height: 150%;
        padding: 5px 10px;
      }

      .impressum-bereich a{
        color: var(--color-p);
      }
      
      .Haftungsausschluss-bereich{
        padding: 5% 5% 0% 5%;
      }

      .Haftungsausschluss-bereich h1{
        padding: 20px 5%;
      }

      .Haftungsausschluss-bereich h2{
        padding: 10px 5%;
        font-size: 24px;
      }

      .Haftungsausschluss-bereich p{
        line-height: 150%;
        padding: 7.5px 5%;
        font-size: var(--fontsize-tablet);
      }

      .datenschutzerklaerung{
        padding: 5% 5% 0% 5%;
      }

      .datenschutzerklaerung h1{
        padding: 20px 5%;
      }

      .datenschutzerklaerung h2{
        padding: 10px 5%;
        font-size: 24px;
      }

      .datenschutzerklaerung h3{
        padding: 10px 5%;
        font-size: 22px;
      }

      .datenschutzerklaerung h4{
        padding: 5px 5%;
        font-size: 20px;
        line-height: 140%;
      }

      .datenschutzerklaerung p{
        font-size: var(--fontsize-tablet);
        line-height: 150%;
        padding: 5px 5%;
      }

      .datenschutzerklaerung ul{
        font-size: var(--fontsize-tablet);
        line-height: 150%;
        padding: 5px 5%;
        margin-left: 5%;
      }

      .datenschutzerklaerung a{
        color: black;
      }


}

@media only screen and (min-width: 1024px) {

    #html-mobile{
        display: none;
    }

    #html-tablet .image img{
        width: 60%;
        margin-left: 20%;
        height: auto;
        margin-top: 90px;
    }

    #html-tablet nav{
        background: var(--color-nav);
        padding: 1%;
    }

    #html-tablet nav ul{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #html-tablet nav ul li{
        list-style: none;
        padding: 1%;
    }

    #html-tablet nav ul li a{
        color: var(--color-white);
        text-decoration: none;
        font-size: var(--fontsize-desktop);
    }

    #html-tablet nav ul li .active{
        color: var(--hover-color);
    }

    /*Wir suchen dich*/
    #Job{
      background: var(--color-main);
      color: var(--color-white);
      width: 60%;
      margin-left: 20%;
      line-height: 150%;
      margin-top: 10px;
      padding: 25px;
    }

    #Job h1{
      font-size: 32px;
      text-align: center;
      padding: 25px 0% 50px 0%;
    }

    #Job p{
      font-size: var(--fontsize-desktop);
      padding: 2%;
      color: var(--color-white);
      text-align: center;
    }

    #Job p a{
      font-size: var(--fontsize-desktop);
      color: var(--color-white);
      text-decoration: none;
    }

     /*Herzlich Willkommen Überschrift*/
        .herzlich-willkommen h1{
            font-size: 32px;
            text-align: center;
            padding: 50px 0%;
        }

         /*Willkommenstext*/
         
         .willkommentext{
            background: var(--color-main);
            width: 60%;
            margin-left: 20%;
         }
         .willkommentext h3{
            font-size: var(--fontsize-desktop);
            text-align: center;
            padding: 2%;
            color: var(--color-white);
         }
         
         /*Startseite Text*/
        .startseite-text{
            font-size: var(--fontsize-desktop);
           font-weight: 500;
            padding: 2.5% 5%;
            width: 60%;
            line-height: 150%;
            display: flex;
            flex-direction: row;
            color: var(--color-p);
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            margin-left: 20%;
        }

         .startseite-text img{
            width: 40%;
            max-width: 600px;
            min-height: 300px;
            max-height: 800px;
            height: 100%;
            padding: 2.5% 5% 0% 0%;
            object-fit: cover;
           
         }

         .startseite-text p{
            width: 60%;
            height: auto;
            padding: 2.5% 0%;
            line-height: 150%;
         }

        .startseite-text span{
            font-size: 24px;
            line-height: 150%;
        }

        /*Footer*/
        footer{
            background: var(--color-footer);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            padding: 10px;
            margin-top: 10px;
        }
    
        footer a{
            color: var(--color-footer-schrift);
            text-decoration: none;
            padding: 1% 2%;
            font-weight: 600;
            font-size: 15px;
        }

        /**********Seite Praxis**************/
        .team{
            display: flex;
            flex-direction: row;
            padding: 5%;
            width: 70%;
            margin-left: 15%;
            gap: 2%;
        }

        .team .person{
            display: flex;
            flex-direction: column;
            width: 23.5%;
        }

        .text-person{
            text-align: center;
            line-height: 150%;
            padding: 5% 5% 10% 5%;
        }
        
        
        /*Imageslider*/

        .slideshow-container {
            margin-top: 20px;
            width: 70%;
            padding: 2.5% 5%;
            min-height: 700px;
            max-height: 900px;
            position: relative;
            height: auto;
            margin-left: 15%;
        }

        .mySlides {
        display: none;
        max-height: 900px;
        
        }
        
        .mySlides img{
        height: auto;
        min-height: 700px;
        max-height: 800px;
        width: 100%;
       
        }
        
        .prev, .next {
        cursor: pointer;
        position: absolute;
        bottom: 5%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        }
        
        .next {
        right: 10%;
        top: 50%;
        border-radius: 3px 0 0 3px;
        }
        
        .prev{
        left: 10%;
        top: 50%;
        }
        
        .prev:hover, .next:hover{
        font-size: 22px;
        }
        
        .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: none;
        transition: background-color 0.6s ease;
        }
        
        .numbertext {
        color: #f2f2f2;
        font-size: 24px;
        padding: 8px 12px;
        position: absolute;
        bottom: 20%;
        right: 5%;
        display: none;
        }
        
        .strich{
        font-size: 50px;
        line-height: 60%;
        margin-left: 15%;
        margin-right: 15%;
        
        }
        
        .fade {
        animation-name: fade;
        animation-duration: 1.5s;
        }
        
        @keyframes fade {
        from {opacity: .2}
        to {opacity: 1}
        }
        
        .slideshow-container::after{
        content: "";
        width: 90%;
        height: 1px;
        background: white;
        position: absolute;
        left: 5%;
        bottom: 15%;
        margin-top: 2%;
        display: none;
        }

        /*Massagen und Kontaktseite*/
        .massagen{
            padding: 2.5%;
            display: flex;
            justify-content: center;
        }

        .massagen ul li{
            padding: 1%;
            font-size: var(--fontsize-desktop);
           font-weight: 500;
            color: var(--color-p);
        }

        .image-massagen{
            width: 70%;
            padding: 5%;
            display: flex;
            flex-direction: row;
            gap: 2%;
            margin-left: 15%;
        }
        
        .image-massagen img{
            width: 32%;
        }

        .image-kontakt{
          width: 60%;
          margin-left: 20%;
        }

        .image-kontakt img{
            width: 100%;
            height: auto;
            padding: 0px 20% 50px 20%;
        }

        .kontakt-text{
            text-align: center;
            padding: 5% 5% 2.5% 5%;
        }

        .kontakt-text h3{
            font-size: 24px;
        }

        .kontakt-text p{
            padding: 10px 0px;
            line-height: 150%;
            font-size: var(--fontsize-desktop);
            color: var(--color-p);
           font-weight: 500;
        }

        .kontakt-text p a{
            font-size: var(--fontsize-desktop);
            color: var(--color-black);
            text-decoration: none;
           font-weight: 500;
        }

         /*******Physio Seite*********/
         .img-physio{
            padding: 2.5% 35%;
        }

        .img-physio img{
            width: 100%;
            height: auto;
        }
        .collaps-content {
            display: none;
            transition: 1s;
            padding: 2.5% 10%;
            font-size: var(--fontsize-desktop);
            line-height: 150%;
            text-align: justify;
            hyphens: auto;
        }

        .collaps-content p{
            hyphens: auto;
            text-align: justify;
            color: var(--color-p);
           font-weight: 500;
        }

        .collaps-content img{
            width: 100%;
            padding: 20px 0;
            object-fit: cover;
        }
        
        .collaps-bereich{
            padding: 20px 0 0 0;
            width: 60%;
            margin-left: 20%;
        }
        .collaps-header{
            background: var(--color-main);
            width: 100%;
            font-size: var(--fontsize-desktop);
            text-align: left;
            padding: 2%;
            color: var(--color-white);
            cursor: pointer;
         }

         .collaps-header i{
            float: right;
            padding-right: 5%;
         }

         .collaps-content h3{
            padding: 4%;
         }
         .collaps-content ul{
            padding: 1% 5%;
            text-align: left;
         }

         #footer-physio{
            margin-top: 5%;
         }

         .bilder-cranio{
            display: flex;
            flex-direction: row;
            gap: 20px;
         }

         .bilder-cranio img{
            width: 49%;
         }

         .flex-collaps-content{
            display: flex;
            flex-direction: row;
            gap: 20px;
         }

         .flex-collaps-content img{
            width: auto;
            max-width: 50%;
            padding: 0%;
         }

    .impressum-bereich-center{
        text-align: center;
      }

      .impressum-bereich-center h1{
        padding: 40px;
        font-weight: 600;
      }

      .impressum-bereich-center h2{
        padding: 10px;
      }

      .impressum-bereich-center p{
        line-height: 150%;
        padding: 7.5px;
        font-size: var(--fontsize-desktop);
      }

      .impressum-bereich-links{
        text-align: center;
        padding: 1% 5%;
      }

      .impressum-bereich-links h3{
        padding: 10px;
        font-size: 24px;
      }

      .impressum-bereich-links p{
        font-size: var(--fontsize-desktop);
        line-height: 150%;
        padding: 5px 10px;
      }

      .Haftungsausschluss-bereich{
        padding: 5% 5% 0% 5%;
      }

      .Haftungsausschluss-bereich h1{
        padding: 20px 5%;
        text-align: center;
      }

      .Haftungsausschluss-bereich h2{
        padding: 10px 5%;
        font-size: 24px;
      }

      .Haftungsausschluss-bereich p{
        line-height: 150%;
        padding: 7.5px 5%;
        font-size: var(--fontsize-desktop);
      }

      .datenschutzerklaerung{
        padding: 5% 5% 0% 5%;
      }

      .datenschutzerklaerung h1{
        padding: 20px 5%;
        text-align: center;
      }

      .datenschutzerklaerung h2{
        padding: 10px 5%;
        font-size: 24px;
      }

      .datenschutzerklaerung h3{
        padding: 10px 5%;
        font-size: 22px;
      }

      .datenschutzerklaerung h4{
        padding: 5px 5%;
        font-size: 20px;
        line-height: 140%;
      }

      .datenschutzerklaerung p{
        font-size: var(--fontsize-desktop);
        line-height: 150%;
        padding: 5px 5%;
      }

      .datenschutzerklaerung ul{
        font-size: var(--fontsize-desktop);
        line-height: 150%;
        padding: 5px 5%;
        margin-left: 5%;
      }

      .datenschutzerklaerung a{
        color: black;
      }
}