@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Heebo'); */

 /* 
 colors
 Grün: rgba(80,132,132,1);
 rot: rgba(231, 109, 131,1);
 blau: rgba(59, 108, 168,1);
 */


body{
  font-family: "Heebo";
  /* font-family: "San Serif"; */
  padding: 0px;
  text-align: center;
  margin: 0px;
}

#headmenu {
position: fixed;
width: 100%;
left: 0px;
top: 0px;
height: 100px;
background-color: rgba(59, 108, 168,1);
/*background-color: rgba(238,235,228,1);
 background-color: rgba(231,227,217,0.7); */
/* display: float; */
display: flex;
align-items: center;
justify-content: space-between; 
}


#mainmenucontainer {

  display: flex;
  align-items: center;
  justify-content: center; 
}



.menuelement {
  display: flex;
  margin-left: 30px;
  margin-right: 30px;
  font-size: 16px;
  cursor: pointer;
}



.menutxt:hover {
  text-decoration: underline;
}

.menutxt:hover + .menupfeil{
  animation: pfeildrehen 0.4s ease-in-out 1 forwards;
}

#terminbuchenbtn {
  border: 2px solid rgba(80,132,132,1);;
  color: rgba(80,132,132,1);
  padding: 10px;
  text-decoration: none;
}

#terminbuchenbtn:hover {
  color: white;
  background-color: rgba(80,132,132,1);
}

.menupfeil {
  margin-left:5px;
  font-weight: 500;
  text-align: right;
}

.menupfeil:hover {
  animation: pfeildrehen 0.4s ease-in-out 1 forwards;

}

@keyframes pfeildrehen {
  from {rotate: 0deg;}
  to {rotate: 180deg;}
}

#langpic {
  margin-right: 20px;
}

#langpic:hover {
  height: 27px;
  width: 27px;
  border-radius: 16px;
}

#submenu {
  /* position: fixed; */
  z-index: 10;
  /* display: none; */
  background-color: white;
  position: fixed;
  top: 500px;
  left: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* display: flex;
  flex-direction: column;
  gap: 10px; */
}

.submenulist {
  display: block;
  text-decoration: none;
  color: black;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.submenulist:hover {
  text-decoration: underline;
}

/* Mobilmenu */

#mobilmenu {
position: fixed;
width: 100%;
left: 0px;
top: 100px;
height: auto;
background-color: rgba(231,227,217,1);
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
gap: 10px;
padding-top: 20px;
padding-bottom: 20px;
}

.mobilmenuelement {
  display: flex;
  margin-left: 30px;
  margin-right: 30px;
  /* margin-top: 10px;
  margin-bottom: 10px; */
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  justify-content: space-between;
}

.mobilmenulist {
  display: flex;
  text-decoration: none;
  color: black;
  margin-left: 60px;
  font-size: 16px;
  cursor: pointer;
}

#terminmobil {
   background-color: rgba(80,132,132,1);
   position: fixed;
   width: 100%;
   height: 50px;
   left: 0px;
   bottom: 0px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
}


@media only screen and (min-width:1400px) {
  /* #mobilmenu {display:none;} */
  #bmenu {display:none;}
  #terminmobil {display:none;}
  #pjoh {display:none;}
  #spacerfoot {display:none;}
  .showsmall {display:none;}
}

@media only screen and (max-width:1399px) {
  #mainmenucontainer {display:none;}
  #terminbuchenbtn {display:none;}
  #mobilmenu {visibility: hidden;}
  #ppraxis {display:none;}
  .hidesmall {display:none;}
}

#footer {
/* position: fixed;
width: 100%;
left: 0px; 
top: 0px;*/
color: white;
/* height: 300px; */
background-color: rgba(59, 108, 168,1);

padding:20px;
padding-left: 20px;
/* display: float; */
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
/* text-align: center; */
}

.footera {
  text-decoration: none;
  color: white;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 20px;
}

.footera:hover {
  text-decoration: underline;
  color: white;
}

.footerp {
  width: 350px;
}

/* Page Styles ************************************************************* */

.pagecnt {
  width: 100%;
  /* padding: 20px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  object-fit: cover;

}

p {
  text-align: justify;
}

.pagetxtcnt {
  font-size: 16px;
  max-width: 700px;
  margin: 20px;
}

.pagecolor {
  background-color: rgba(231,227,217,1);
}

.pageflexcnt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* align-items: center; */
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 20px;
}

.pageflexitem {
  /* max-width: 450px; */
  width: 35%;
  min-width: 370px;
  height: 300px;
  /* flex-basis: 500px; */
  margin-top: 0px;
  /* flex: 1; */
}

.pageflexitemtxt {
  background-color: rgba(238, 236, 230,1);
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}

.pagefleximg {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
}

h1 {
  font-size: 20px;
  text-align: left;
}

.morea:hover {
  text-decoration: underline;
  cursor: pointer;
}

.moredis {
  width: 20px;
  height: 16px;
  display: inline-block;
}

.morea:hover + .moredis{
  animation: pfeilmove 0.4s ease-in-out 1 forwards;
}


@keyframes pfeilmove {
  from {width: 20px;}
  to {width: 50px;}
}