html{
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

nav{
    display: flex;
    position: fixed;
    justify-content: space-around;
    align-items: center;
    min-height: 3%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 7;
    width: 100%;
    margin-top: 0px;
}
.Logobild{
    align-items: left;
}
.HeaderLinks{
    display: flex;
    justify-content: space-around;
    width: 50%;
    margin: 10px;
}
.HeaderLinks a:hover{
    color: gainsboro;
    text-decoration: none;
}
.HeaderLinks li{
    list-style: none;
}
.HeaderLinks a{
    color: white;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 25px;
}
.burgermenu{
    display: none;
    cursor: pointer;
}
.burgermenu div{
    height: 5px;
    width: 25px;
    margin: 5px;
    background-color: white;
    
}


#KhogazFrank{
    height: 100%;
    width: 100%;
    background-attachment: fixed;
    background-image: url(Bilder_Webseite/Zahn%C3%A4rzt_queer2.jpg);
    position: relative;
    background-position:  center center;
    background-size: contain;
    background-color: black;
    background-repeat: no-repeat;

}


#button_to_connection {
    position: fixed;
    height: 20px;
    width: 5px;
    margin-top: 25%;
    z-index: 1;
    right: 0px;
}
#to_email{
    position: absolute;
    height: 50%;
    width: 100%;
    background-color:rgba(25, 181, 254, 0.5);
     border-top: solid 4px black;
    border-left: solid 4px black;
     text-align: center;
     
}
#to_call{
     position: absolute;
    margin-top:100%;
    height: 50%;
    width: 100%;
    background-color: rgba(38, 166, 91, 0.5);
    border-top: solid 4px black;
    border-left: solid 4px black;
    border-bottom: solid 4px black;
    text-align: center;
}

.ZweiEins{
    justify-content: space-around;
    display: flex;
    padding-top: 4%;
    height: 25%;
    width: 100%;
    padding-left: 0%;
    padding-right: 5%;
}
#Behandlungszimmer{
    width: 40vw;
    height: 30vh;
    margin-top: 5%;
    margin-left: 10%;
}
#Behandlungszimmer img{
    max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    border: 1px solid black;
}
#Begruessungstext{
    height:30vh;
    width: 40vw;
    margin-top: 5%;
    font-size: 1.5vw;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
}
#Begruessungstext h1{
    font-size: 2vw;
}
h1{
    font-size: 2vw;
}
.ZweiZwei{
    justify-content: space-around;
    display: flex;
    padding-top: 10%;
    height: 25%;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}
#Praxistext{
    height: 30vh;
    width: 30vw;
    margin-top: 10%;
    font-size: 1.5vw;
}
#Praxistext h1{
    font-size: 1.7vw;
}
#Wartezimmer{
    justify-content: right;
    float: right;
    height: 35vh;
    max-width: 35vw;
    margin-top: 5%;
}
#Wartezimmer img{
    height: 35vh;
    width:auto;
    border: 1px solid black;
    border-radius: 4%;
}
#zwei{
    width: 100%;
    height: 100%;
    background-color:white;
    background-attachment: fixed;
    position: relative;
    
    
}
#Behandlungszimmeruebergang{
    background-image:url(Bilder_Webseite/Behandlungsraum.jpg);
    background-attachment: fixed;
    position: relative;
    width: 100%;
    height: 50%;
    background-position:  center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
    margin-top: 2%;
}
#team{
    background-image:url(Bilder_Webseite/teambild_neu.jpeg);
    background-attachment: fixed;
    position: relative;
    width: 100%;
    height: 50%;
    background-position:  center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
}

html, body{
    height: 100%;
}

.unserezahnaerzte{
    height: 10%;
    font-size: 2vw;
    text-align: center;
    padding-top: 2%;
    background-color: #B3DEE5;
    color: white;
}
.unserezahnaerzte h1{
    font-size: 3vw;
}

.enolia_drfrank{
    background-color: #B3DEE5;
    
}
.restteam{
    background-color: #8CA9D3;
}
.team_panel{
    width: 100vw;
    height: 100vh;
    font-weight: 500;
    font-size: 1.5em;
    color: white;
    align-items: center;
}
.Gesewsky_Box {
    display: flex;
    flex-wrap: wrap; /* Gut für kleine Bildschirme */
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    min-height: 50vh;
    font-weight: 500;
    font-size: 2vw;
    color: white;
    background-color: #B3DEE5;
}

.Gesewsky_Foto {
    height: auto;
    max-width: 25%; /* passt besser ins Layout */
    margin: 10px;
    border-radius: 10px;
}

.Gesewsky_Text {
    max-width: 50%;
    margin: 10px;
}
.Person{
    height: 60vh;
    width: 100vw;
    display: flex;
    justify-content: space-around;
}
.Person img{
    max-width: auto;
    max-height: 90%;
    margin-top: 2%;
    margin-left: 2%;
    border-radius: 2%;
}
.personenbeschreibung{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}
.pbfrank{
    font-size: 2vw;
    width: 40%;
    margin-right: 2%;
}
.pbkhogaz{
    font-size: 1.5vw;
    width: 40%;
    margin-left: 2%;
}
.pbgesewsky{
    font-size: 1.5vw;
    width: 40%;
    margin-left: 10%;
    margin-top: 2%;
    align-items: center;
}

.personenbeschreibung h1{
    font-size: 2.2vw;
}
.restteam{
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}
.einsP, .zweiP{
    margin: 2%;
}
.einsimg{
     max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.zweiimg{
     max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.dreiimg{
     max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.vierimg{
     max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.fuenfimg{
     max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.sechsimg{
     max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.siebenimg{
    max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.achtimg{
    max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.neunimg{
     max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.zehnimg{
     max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.elfimg{
    max-height: 100%;
    max-width:100%;
    border-radius: 4%;
    align-items: center;
    justify-content: center;
}
.Mitarbeiter{
    height: 33%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}
.Mitarbeiter2{
    height: 33%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.Zahntechnikerin{
    height: 33%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}
.flip-box {
    background-color: transparent;
    width: 16.6%;
    height: 80%;
    
}
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
.flip-box-front {
    color: black;
    border-radius: 4%;
    font-size: 1.0vw;
}
.flip-box-back {
    color: white;
    transform: rotateY(180deg);
    border-radius: 4%;
    font-size: 1.0vw;
}


#Anmeldung{
    background-image: url(Bilder_Webseite/Anmeldung%20_neu.jpg);
    background-attachment: fixed;
    position: relative;
    width: 100%;
    height: 50%;
    background-position:  center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
}

#box-eins,#box-zwei,#box-drei,#box-vier,#box-fuenf, #box-sechs, #box-sieben, #box-acht, #box-neun{
    height: 30vh;
    width: 20vw;
    position:relative;
    left: 2%;
    margin-top: 2%;
    z-index:6;
    margin-left:2%;
    justify-content: center;
    align-items: center;
    background-position:  center center;
    background-size: contain;
    background-repeat: no-repeat;
    
    
   box-sizing: border-box;
   float: left;
}
#box-eins-text,#box-zwei-text,#box-drei-text,#box-vier-text,#box-fuenf-text,#box-sechs-text,#box-sieben-text,#box-acht-text,#box-neun-text{
    background-color: black;
    height: 25%;
    width: 80%;
    position: absolute;
    top:70%;
    transition-property:width;
    transition-duration: 0.5s;
    transition-timing-function: linear;
    color: white;
    font-size:1em;
    text-align: center;
    

}
#box-eins-text:hover,#box-zwei-text:hover,#box-drei-text:hover,#box-vier-text:hover,#box-fuenf-text:hover,#box-sechs-text:hover,#box-sieben-text:hover,#box-acht-text:hover,#box-neun-text:hover{
    width: 100%;
}
#inner{
    position:absolute;
    height:30%;
    width: 80%;
    top:30%;
    left:10%;
    
}
#pic{
    width:49%;
    height:100%;
    float: left;
    background-repeat: no-repeat;
    background-position:  center center;
    background-size: contain;
}
#texte{
    height:100%;
    width: 50%;
    display: flex;
    font-size: 2vw;
   overflow: scroll;
    float: right;
  
    
}
#parent{
    height: 120%;
    width: 100%;
    position: absolute;
    opacity:0.98;
}

#close:hover{
    color:black;
}

#forward{
font-size: 100px;
position: absolute;
right: 10px;
top:50%;
color: white;

}
#forward:hover{
    color: black;
    cursor: pointer;
}
#backward{
font-size: 100px;
position: absolute;
left: 10px;
top: 50%;
color: white;

}
#backward:hover{
    color:black;
    cursor:pointer;
}
.Leistungen{
    height: 100%;
    width: 100%;
}

#Kuehe{
    background-image: url(Bilder_Webseite/K%C3%BChe.JPG);
    background-attachment: fixed;
    position: relative;
    width: 100%;
    height: 50%;
    background-position:  center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
}

.KontaktAnfahrt{
    width: 100%;
    height: 80%;
    justify-content: space-around;
    padding-top: 5%;
    display: flex;
    background-color: #8CA9D3;
    color: white;
}
.Maps{
    width: 65%;
    height: 60%;
    margin-left: 5%;
}
.Kontaktdaten{
    width: 40%;
    height: 50%;
    align-items: center;
    justify-content: center;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 1.3vw;
}
.Name{
    font-size: 2vw;
}
.Oeffnungszeiten{
    justify-content: space-around;
    display: flex;
}
.Oeffnungszeiten h1{
    font-size: 1.5vw;
}

.impressum{
    background-color: #b4b4b4;
    color: white;
    font-size: 2vw;
    height: 20%;
    width: 100%;
    justify-content: space-around;
    display: flex;
    vertical-align: middle;
    text-align: center;
    
}
.impressum a{
    text-decoration: none;
    color: white;
}
.impressum a:hover{
    text-decoration: none;
    color: black;
}
.Telefonnummer{
    
}

@media screen and (max-width: 1024px){
    .HeaderLinks{
        width: 65%;
    }
    #Begruessungstext{
        font-size: 1.5vw;
        padding-left: 10%;
        text-align: left;
    }
    #Behandlungszimmer{
        width: 30vw;
        height: 25vh;
    }
    #Behandlungszimmer2{
        width: 25vw;
        height: 30vh;
    }
    #Praxistext{
        font-size: 1.5vw;
    }
    #Wartezimmer{
        height: 30vh;
        max-width: 30vw;
        margin-right: 10%;
    }
    #Wartezimmer img{
        height: 30vh;
        width:auto;
    }
    .personenbeschreibung{
        font-size: 1.7vw;
    }
    #box-eins-text,#box-zwei-text,#box-drei-text,#box-vier-text,#box-fuenf-text,#box-sechs-text,#box-sieben-text,#box-acht-text,#box-neun-text{
        font-size:1.5vw;
    }
    .Kontaktdaten{
        font-size: 1.5vw;
    }
  
   
}
@media screen and (max-width: 1440px){
    
    #button_to_connection{
        position: fixed;
        height: 200px;
        width: 100px;
        margin-left:93%;
        margin-top: 25%;
        z-index: 1;
    }
    #to_email{
        position: absolute;
        height: 50%;
        width: 100%;
        background-color:rgba(25, 181, 254, 0.5);
        border-top: solid 4px black;
        border-left: solid 4px black;
        text-align: center;
    }
    #to_call{
        position: absolute;
        margin-top:100%;
        height: 50%;
        width: 100%;
        background-color: rgba(38, 166, 91, 0.5);
        border-top: solid 4px black;
        border-left: solid 4px black;
        border-bottom: solid 4px black;
        text-align: center;
    }
    
    #Team{
        background-image:url(Bilder_Webseite/Team%201920%20x1080_neu.jpg);
        background-attachment: fixed;
        position: relative;
        width: 100%;
        height: 50%;
        background-position:  center center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    .team_panel{
        font-size: 1em;
    }
    .personenbeschreibung h1{
        font-size: 1.5em;}
        
}
@media screen and (max-width:768px){
    body{
    }
    .HeaderLinks{
        position: absolute;
        margin-top: 10%;
        background-color: rgba(0, 0, 0, 0.7);
        display: none;
        text-align:center;
        width: 100%;
        height: 5%;
        z-index:1;
    }
    .HeaderLinks li{
        border: 1px solid white;
        z-index:1;
        padding: 2%;
        
    }
    .burgermenu{
        display: block;
        
    }
    nav{
        height: 10vh;
    }
    .Logobild img{
        height: 10vh;
    }
    #button_to_connection{
        height: 30vh;
        width: 10vw;
    }
    #to_email{
        height: 30%;
    }
    #to_call{
        height: 30%;
    }

    
    #Behandlungszimmer{
        width: 50vw;
        height: 45vh;
        z-index: 2;
    }
    #Behandlungszimmer img{
        max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        border: 1px solid black;
    }
    #Begruessungstext{
        height:40vh;
        width: 60vw;
        margin-top: 5%;
        font-size: 3.1vw;
        text-align:right;
        vertical-align: middle;
        justify-content: center;
    }
    #Begruessungstext h1{
        font-size: 3.5vw;
    }
    h1{
        font-size: 3vw;
    }
    .ZweiZwei{
        display: block;
    }
    #Praxistext{
        height: 40vh;
        width: 100vw;
        font-size: 3.5vw;
        display: flex;
        justify-content: space-around;
    }
    #Praxistext h1{
        font-size: 4vw;
        width: 50vw;
        height: auto;
    }
    #Praxistext p{
        margin-right: 10%;
        width: 50vw;
        margin-top: 35%;
        text-align: right;
        
    }
    #Wartezimmer{
        height: 10vh;
        width: 50vw;
        margin-top: -20%;
        float: left;
    }
    #Wartezimmer img{
        height: 20vh;
        width:auto;
        border: 1px solid black;
        border-radius: 4%;
    }
    #KhogazFrank{
        height: 100%;
        width: 100%;
        background-image: url(Bilder_Webseite/Zahn%C3%A4rzt_queer2.jpg);
        position: relative;
        background-position:  center center;
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        z-index: -10;
        background-attachment:local;
    
    }
    .unserezahnaerzte{
        height: 10%;
        font-size: 5vw;
        text-align: center;
        padding-top: 2%;
    }
    .unserezahnaerzte h1{
        font-size: 5vw;
    }
    .Person{
        display: flex;
        justify-content: space-around;
    }
    .Person img{
        max-width: auto;
        height: 30%;
        margin-top: 10%;
        margin-left: 2%;
        border-radius: 2%;
    }
    .personenbeschreibung{
        width: 100%;
        height: auto;
        font-size: 3vw;
        margin-left: 4%;
        margin-top: -60%;
        align-items: start;
    }
    .pbfrank{
    font-size: 5vw;
    text-align: left;
    margin-left: 3%;
    }
    .pbkhogaz{
        font-size: 3vw;
        width: 40%;
        margin-right: 3%;
        text-align: right;
    }
    .Gesewsky_Box {
        display:flex;
        flex-wrap: wrap; /* Gut für kleine Bildschirme */
        align-items: center;
        justify-content: space-around;
        width: 100vw;
        min-height: 20vh;
        font-weight: 300;
        font-size: 1.5em;
    }

    .Gesewsky_Foto {
        height: 50%;
        max-width: auto;
        margin: 0px;
    }

    .Gesewsky_Text {
        max-width: 60%;
        text-align: center;
        font-size: 3vw;
        margin: 0px;
        text-align: start;
    }

    .Gesewsky_Text h1 {
        font-size: 4vw;
    }

    .personenbeschreibung h1{
        font-size: 5vw;
        justify-content: center;
        align-items: center;
    }
    .Mitarbeiter{
        height: 33%;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }
    .Mitarbeiter2{
        height: 33%;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .Zahntechnikerin{
        height: 33%;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }

    .einsimg{
         max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .zweiimg{
         max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .dreiimg{
         max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .vierimg{
         max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .fuenfimg{
         max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .sechsimg{
         max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .siebenimg{
        max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .achtimg{
        max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .neunimg{
         max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .zehnimg{
         max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    .elfimg{
        max-height: 100%;
        max-width:100%;
        border-radius: 4%;
        align-items: center;
        justify-content: center;
    }
    #box-eins,#box-zwei,#box-drei,#box-vier,#box-fuenf, #box-sechs, #box-sieben, #box-acht, #box-neun{
        height: 30vh;
        width: 30vw;
    }
    #box-eins-text,#box-zwei-text,#box-drei-text,#box-vier-text,#box-fuenf-text,#box-sechs-text,#box-sieben-text,#box-acht-text,#box-neun-text{
        height: 20%;
        top:60%;
        font-size:2.3vw;
    }
    
    .KontaktAnfahrt{
        height: 100%;
        display: block;
    }
    .Maps{
        width: 100%;
        height: 30%;
        margin-left: 5%;
    }
    .Kontaktdaten{
        width: 100%;
        height: 50%;
        margin-top: 10%;
        font-size: 3vw;
    }
    .Name{
        font-size: 3.5vw;
    } 
    .Oeffnungszeiten h1{
        font-size: 2.4vw;
    }
    .impressum{
        font-size: 3vw;
        height: 10%;
        width: 100%;
        margin-left: 0px;
    }
   
    #block{
        background-color: lightgray;
        width: 80%;
        height: 20%;
        position: absolute;
        margin-top:25%;
        margin-left: 10%;
        border: 5px solid red;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 150%;
        font-weight: bold;


    }
}
@media screen and (min-width: 1440px){
    #informations{
        position: absolute;
        top: 40%;
        left: 5%;
        height: 15%;
        width: 30%;
        background-color: lightgray;
        font-weight: bold;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 150%;
        border: 10px solid red;
    }
}