@font-face {
  font-family: 'Didot'; /* Gewünschter Name */
  src: url('../fonts/Didot.otf')
  format('opentypefont');
            /* für IE9 */
  src: url('../fonts/Didot.otf') 
            format('opentypefont'),
            /* für IE6-IE8 */
       url('../fonts/Didot.otf') 
            format('opentypefont'), 
           /* für moderne Browser */
     
 } 
 

html, body, div, span, applet, object, dropbtn,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;}



 @keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
}

@-moz-keyframes einblenden { /* F>Atilde;>frac14;r Firefox */
    from { opacity:0; }
    to { opacity:1; }
}

@-webkit-keyframes einblenden { /* F>Atilde;>frac14;r Safari und Chrome */
    from { opacity:0; }
    to { opacity:1; }
}

@-o-keyframes einblenden { /* F>Atilde;>frac14;r Opera */
    from { opacity:0; }
    to { opacity:1; }
}


  @-ms-viewport {
                width: device-width;
        }
    html {
                box-sizing: border-box;
        }

        *, *:before, *:after {
                box-sizing: inherit;
        }

body {
    text-align: left;
    color: black;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    letter-spacing: 0.5em;
    text-align: inherit;
    line-height: 0;
    background-color: white;
    margin: 0;

    animation: einblenden 1.5s;
    -moz-animation: einblenden 1.5s; /* F>Atilde;>frac14;r Firefox */
    -webkit-animation: einblenden 1.5s; /* F>Atilde;>frac14;r Safari und Chrome */
    -o-animation: einblenden 1.5s; /* F>Atilde;>frac14;r Opera */
    
}

  a {
    -moz-transition: color .25s ease-in-out;
    -webkit-transition: color .25s ease-in-out;
    -ms-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
    text-decoration: none;
    color: black;
    font-weight: 700;
}

    a:hover {
            text-decoration: none;  color:  #66BDA3;
    }
p {
 
  margin-top:1em;   
  letter-spacing: .15rem;;
    
}

h1 {
  font-size: 1.5vw;
  text-transform:uppercase;
  letter-spacing: 0.2em;
  margin-bottom:0.5em;
  font-weight: 600; 
  color: black;
  text-transform: uppercase;
}

h2 {
  color: black;
  font-size: 1.3vw;
  letter-spacing: 0.2em;
  margin-bottom:0.5em;
  line-height: 1.5em;
  font-weight: 600; 
  text-transform: uppercase;   
}


li {list-style: unset;}




.container{
margin: 0 auto;
height:100vh; 
display: grid;
grid-template-columns: 10vw 60vw 20vw 10vw;
grid-template-rows: 50vh 20vh 5vh 20vh 5vh; 
align-self: stretch; 
} 

.navi {
  grid-column: 1/5;
  grid-row: 3/4;
  align-self: center;   
  text-align: center;
 
  z-index:20;
  }
  
  .navi_hg {
  grid-column: 1/5;
  grid-row: 3/4;
  border:solid 1px #171c1c; 
  background-color: whitesmoke;
  opacity: 0.8;
  }

  #nav > input, nav > label {
    display: none; /* Label und Checkbox ausblenden*/font-size: 5em; text-align:center;
     color:white; transform: scaleX(150%); animation: pfeil 2s 2s  ease-in-out;
    }
    @keyframes pfeil {
      0% {opacity:1} 25% {opacity:0} 50% {opacity:1} 75% {opacity:0}
      100%   {opacity:1 }
      }
    #nav > label {
    width: 100%; 
    }
    
              #nav > ul {
                  padding: 0 0 0 0;
                  width: 100%;
              }
    
              #nav > ul > li {
                  display: inline-block; list-style-type: none;
                  text-align:center;
              }

              #nav > ul > li > ul {
                      display: block;
              }

              #nav > ul > li > a, nav > ul > li > span {
                      display: inline-block;
                      text-align:center;
                      color:black;
                      text-transform: uppercase;
                      text-decoration: none;
                      font-size: 0.8em;
                      letter-spacing: 0.1em;
                      font-weight: 700;
                      width: 12vw; 
                      height: 5vh;
                      padding-top:2.5vh;
                        -moz-transition: all .25s ease-in-out;
                      -webkit-transition: all .25s ease-in-out;
                      -o-transition: all .25s ease-in-out;
                      -ms-transition: all .25s ease-in-out;
                      transition: all .25s ease-in-out;
                      outline: 0;

              }

              #nav > ul > li:hover > a {
                      color: #fff; background-color:rgb(4, 186, 156);   
                      letter-spacing: 0.1em;
                      font-size: 0.8em; font-weight: 700;
                      height: 5vh; 
                      width: 12vw; 
                      transform: translateX(0%) translateY(0%);
                      
                      -moz-transition: all .25s ease-in-out;
                      -webkit-transition: all .25s  ease-in-out;
                      -o-transition: all .25s  ease-in-out;
                      -ms-transition: all .25s  ease-in-out;
                      transition: all .25s  ease-in-out;
                      outline: 0;
                      
              }

              #nav > ul > li.active > a, #nav > ul > li.active > span {
                color: rgb(4, 186, 156); background-color:transparent;   
                letter-spacing: 0.1em;
                font-size: 0.8em; font-weight: 700;
                height: 5vh; 
                width: 12vw; 
                transform: translateX(0%) translateY(0%);
                
                -moz-transition: all .25s ease-in-out;
                -webkit-transition: all .25s  ease-in-out;
                -o-transition: all .25s  ease-in-out;
                -ms-transition: all .25s  ease-in-out;
                transition: all .25s  ease-in-out;
                outline: 0;
                
              }
                       

.box {
background: 
url("/fileadmin/Design/zahn_gitter2.png"),
url("/fileadmin/Design/AdobeStock_666374958_Preview.jpeg");
background-position-x:15vw, center;
background-position-y: 12vh, center;  
background-size: 15%, cover;
background-repeat: no-repeat; 
background-color:rgb(157, 169, 167); background-blend-mode:hard-light, luminosity;
opacity: 0.9;
  z-index:1;
}

.box_praxis,
.box_team {
  background: 
  url("/fileadmin/Design/katarzyna-zygnerska-zahn-unsplash.jpg");
  background-position:center top;
  background-size:cover;
  background-repeat: no-repeat; 
  background-color:rgb(157, 169, 167); background-blend-mode:normal;
  opacity: 0.9;
    z-index:1;
  }
  .box_leistungen {
    background: 
    url("/fileadmin/Design/AdobeStock_716826122_Preview.jpeg");
    background-position:center;
    background-size:cover;
    background-repeat: no-repeat; 
    background-color:rgb(157, 169, 167); background-blend-mode:hard-light;
    opacity: 0.9;
      z-index:1;
    }

    .pfeil { 
      position: absolute;
      top:47vh; right:1vh;
        z-index: 20;
        height: 10vh; 
        font-size: 1vw;
        letter-spacing: 0.4em; 
        color:white; 
         
          }
    

.logo { 
grid-column: 1/5;
grid-row: 2/3;
text-align: center;
background:  url("/fileadmin/Design/logo1.png")  center center;
background-size:auto 85%; 
background-repeat: no-repeat;
margin-top: 0em;
margin-right:0em; 
z-index:22; 
opacity: 1;
background-blend-mode:normal;            
}

.logo_hg { 
grid-column: 1/5;
grid-row: 2/3;
background-color: rgb(4, 186, 156);
box-shadow: 0px -60px 100px rgb(4, 186, 156) ; 
opacity: 0.7;  
z-index:10;        
}

.copy_hg { 
grid-column: 1/5; 
grid-row: 4/5;
background-color:white ;
opacity: 0.6;
border:0;
}

.copy_text {
grid-column: 2/4;
grid-row: 4/5;
padding:0 2vw 0 2vw;
font-size: 1.1vw;
font-weight:500;
letter-spacing: 0.1em;
line-height: 1.1em;
text-align: center;
overflow-y:auto;
opacity: 1; 
z-index: 2;
color:black;

}

.copy_kontakt_hg { 
  grid-column: 2/4; 
  grid-row: 1/3;
  background-color:white ;
  opacity: 0.6;
  border:0;
  }
  
  .copy_kontakt {
  grid-column: 2/4;
  grid-row: 1/3;
  font-size: 1.1vw;
  font-weight:500;
  letter-spacing: 0.1em;
  line-height: 1.1em;
  text-align: center;
  overflow-y:auto;
  opacity: 1; z-index: 21;
  color:black;
  }


.footer {
grid-column:1/5;
grid-row: 5/6;
font-size: 1vw;
letter-spacing: 0.1em;
line-height: 1.3em;
padding: 1vh 5vw 0 5vw;
background-color: white;
text-align: center;
color:black;
height:5vh; z-index: 10;
}

/* ANIMATIONEN */
.flaeche {
  position: absolute;
  top:-200vh; z-index: 2;
  width: 100vw; height:100vh;
  border-left: solid 1px gray;
   background-color: #66BDA3; opacity: 0.5; 
   background-blend-mode:luminosity;   
  box-shadow: 100px 100px 100px rgb(4, 186, 156); 
  animation: line_1 4s ease-in-out;
  }
  @keyframes line_1 {
  from {transform: translateY(200vh)}
  to   {transform: translateY(-200vh) }
  }

     

  .titel{
    position: absolute; z-index:12;
    left:5vw; top:40vh; width: 40vw;
    font-weight:500;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2vw;
    text-transform:uppercase;
    letter-spacing: 0.2em;
    line-height: 0.9em;
    text-align: center;
    opacity: 1; color: white;
    animation: title 4s ease-in-out;
  }

  @keyframes title {
  0% {transform: translateX(-100vw)}

  100%   {transform: translateX(0vw)}
  }

  @keyframes title2 {
  0% {transform: translateY(-100vh)}
  100%   {transform: translateY(0vh)}
  } 


    .gallerie{
      grid-column: 1/5;
      grid-row: 1/2;
      z-index:1;
      display: flex;
      display: -webkit-box;
      /* Tweener flexbox for IE10 */
      display: -ms-flexbox;
      /* Prefixed "new flexbox" */
      display: -webkit-flex;
      -webkit-box-flex: 1 0 auto;
      /* IE10, ugh */
      -ms-flex: 1 0 auto;
      /* Unprefixed */
      flex: 1 0 auto;
      /* prefixed webkit syntax */
      -webkit-flex: 1 0 auto;
      overflow-x: auto;
      height:50vh;
      width: 100vw;
      transition: 1s ease;
      background-color:rgb(157, 169, 167);
      }
      .gallerie ul {
        width: 100vw;
        display: inline-flex;
        display: -ms-inline-flexbox;
        list-style-type: none; 
        animation: gallerie 4s ease-in-out;
    }
        @keyframes gallerie {
        0% {transform: translateX(50vw)}
        50%   {transform: translateX(-70vw) }
        100%   {transform: translateX(0vw) }
    }
      .gallerie ul li{
      padding:0em; margin:0em;
      transition: 1s ease;
      width: auto;
      max-height:80vh; 
      font-size: 1vw;    
      letter-spacing: 0.1em; 
      font-weight: 400;
     
      }
      .gallerie ul li img {
        height: 100%;
        list-style-type: none;   
    
      }

     

    
@media (max-width: 1000px) {

.container{

grid-template-rows: 55vh 20vh 0vh 20vh 5vh;  
} 


.logo { 
  background-size:auto 60%;          
  }
.gallerie{
  height:75vh;
  }
  
#nav > label,  ul > li > ul {
display: block;
margin-bottom: 0.4em; z-index:30;

}

.navi {
position: absolute;
top: 56vh; left:25vw; width:50vw; z-index:22;
}	
    
#nav > ul { color: black; 
position: relative;
opacity: 0;
clear: both;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
transition:all .5s ease;  
width:80vw; left:-15vw;
}
    
#nav > ul > li > a, nav > ul > li > span {
    
background-color: whitesmoke; 
height: 6vh;
text-align: center;
width: 80vw;
display: list;
border:solid 1px black; 
line-height: 2vh;
font-size: 0.85em;
opacity: 0.8;
overflow-y: auto;
}
    
#nav > ul > li:hover > a {
 color: black;    
 width: 80vw;
font-size: 0.85em;
height: 6vh;

}    
       
#nav > input:checked + ul {
opacity: 1;
 
} 
  
  }



@media (max-width: 640px){

  .container{
    grid-template-columns: 5vw 70vw 20vw 5vw;
    grid-template-rows: 55vh 20vh 0vh 25vh 0vh;  
    }
    .box {
      background: 
      url("/fileadmin/Design/zahn_gitter2.png"),
      url("/fileadmin/Design/AdobeStock_666374958_Preview.jpeg");
      background-position-x:15vw, -70vw;
      background-position-y: 25vh, center;  
      background-size: 25%, cover;
      background-repeat: no-repeat; 
      background-color:rgb(157, 169, 167); background-blend-mode:hard-light, luminosity;
      opacity: 0.9;
        z-index:1;
      }
      .pfeil { 
        grid-column: 4/5;
        grid-row: 1/2;
        z-index: 20;
        height: 100%; 
        font-size: 2em; opacity: 1;
        padding-top:25vh; 
        background-image: none;  
        color:white; 
         text-align: left;   
          }
        .titel,
        .titel2{
        font-size:5vw; left:5vw; right:5vw; top:40vh;
        text-align:center; width: 50vw; font-weight:700;
        }
        .copy_text {

        font-size:3.8vw;
        }
        h1, h2 {
        font-size: 4vw;

        }   
        .logo { 
        background-size:95% auto;          
        }
        .footer {display:none;}
        .pfeil {
          display: none;
        }
 
}

@media (max-height:500px){

  .container{
    grid-template-columns: 5vw 70vw 20vw 5vw;
    grid-template-rows: 55vh 20vh 0vh 25vh 0vh;  
    }
    
    #nav > input, nav > label {
     font-size: 3em; 
      }
      .titel,
      .titel2{
     font-weight:700;
      }
      
      
        .footer {display:none;}
 
}

/* Das Modal füllt den gesamten Bildschirm */
/* Modal über den gesamten Bildschirm */
.modal {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45); /* optionaler Hintergrund */
}



.modal-body {
  padding: inherit;
}

.modal-body .ce-textpic {
  overflow: inherit;
  margin-bottom: 2rem;
}

.modal-body .form-group {
  overflow: inherit;
  margin-bottom: 2rem;
}
.modal-body .form-group .form-label {
  overflow: inherit;
  margin-bottom: .8rem;
  display: inherit;
  letter-spacing: .15rem;
}

/* Modal-Content zentrieren und am unteren Rand platzieren */
.modal-content {
  position: absolute;
  bottom: 0; /* Modal am unteren Rand beginnen */
  left: 50%; /* Horizontal zentrieren */
  transform: translateX(-50%); /* Korrekte Zentrierung */
  width: 80%;
  background-color: rgba(255,255,255,.85);
  border: 1px solid #888;
  border-radius: .6rem .6rem 0 0; /* Runde Ecken oben */
  padding: 20px;
  box-shadow: 0px -5px 15px rgba(255, 255, 255, .25);
  animation: growToContentHeight 0.8s ease forwards; /* Weiche Animation von Höhe 0 auf benötigte Höhe */
  max-height: 80vh; /* Maximale Höhe (80% des Bildschirms) */
  overflow-y: auto; /* Scrollbar bei Überlauf */
}

/* Animation für sanftes Wachsen der Höhe */
@keyframes growToContentHeight {
  from {
    max-height: 0;
    transform: translateY(100%) translateX(-50%);
  }
  to {
    max-height: 80vh; /* Die finale Höhe hängt vom Inhalt ab */
    transform: translateY(0) translateX(-50%);
  }
}

div.form-group {
  width: 80%;
  margin-left: 10%;
}

.input {
  width: 100%;
  text-align: center;
}

input, textarea {
  width: 100%;
}

/* Close Button */
.close {
  color: ##fff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}