/* Font
========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@600;800&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap');
/* Basis
========================================================================== */
   body {
    margin: 0px;
    scroll-behavior: smooth;
    font-size: 100%;
    transition: all .3s ease-in-out;
  }
  a:link, a:visited {
   text-decoration: none;
  }
/* Font-Styling
========================================================================== */

h1,h2,h3{
  font-family: 'Shippori Mincho B1', serif;
  font-style: normal;
  font-weight: 800;
  margin: 0;
}
h1{
  font-size: 2.5em;
}
h2{
  font-size: 1.8em;
}

p, li{
  font-family: 'Comfortaa', sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  font-size: 1.0em;
  letter-spacing: 0.03em;
}
/* Header
========================================================================== */

header{
  position: fixed;
  box-sizing: border-box;
  display: flex;
  width: 100vw;
  background: #3d405b;
  color: #e1b005;
  text-align: left;
  align-items: center;
  z-index: 10;
}
#titelName{
  font-size: 1.2em;
  font-weight: 400;
  padding: 2vh 0 2.5vh 8.333vw;
}

/* Navigation-Burger
========================================================================== */

.menu-btn{
  position: fixed;
  width: 50px;
  height: 50px;
  right: 8.33vw;
  justify-content: center;
  align-items: center;
  z-index: 30;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.menu-btn_burger {
  width: 30px;
  height: 3px;
  background: #e1b005;
  transition: all .3s ease-in-out;
}
.menu-btn_burger::before,
.menu-btn_burger::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 3px;
  background: #e1b005;
  transition: all .3s ease-in-out;
}
.menu-btn_burger::before {
  transform: translateY(-8px);
}
.menu-btn_burger::after {
  transform: translateY(8px);
}

.navigation {
  display: none;
  transition: all .8s ease-in-out;
}

nav {
  background-color: #3d405bea;
  padding: 5vh 12vw 2vh 0;
  position: fixed;
  right: 8.333vw;
  z-index: 20;
  transition: all .8s ease-in-out;
}
a.burgerMenu{
  color: #e1b005;
}
a.burgerMenu:hover{
  color: white;
  transition: all .1s ease-in-out;
}
ul {
  list-style-type: none;
  margin: 0;
}

.menu-btn.open .menu-btn_burger {
  transform: translateX(-50px);
  background: transparent;
}
.menu-btn.open .menu-btn_burger::before{
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn_burger::after{
  transform: rotate(-45deg) translate(35px, 35px);
}
/* Footer
========================================================================== */
footer {
  width: 100vw;
  background-color: #3d405b;
  display: flex;
  box-sizing: border-box;
  color: #e1b005; 
  padding: 4vh 0 4vh 0;
}
footer.kontakt{
  height: 180px;
}

ul.footerMenu {
  padding: 0 0 0 8.333vw;
}

a.footerMenu{
  color: #e1b005;
  padding-top: 20px;
}

a.footerMenu:hover{
  color: white;
}

#phoneFooter{
  padding-top: 1.7em;
}
#mobileFooter{
  padding-top: 1em;
}
.copyright{
  position: absolute;
  right: 0px;
  padding-right: 8.333vw;
}
#res01{
  display: block;
}
#res02{
  display: none;
}
/* index.html
========================================================================== */

   .welcome{
     width: 100vw;
     background: #3d405b;
     display: block;
   }

  .welcome img.kinderwagen{
    width: 83.33vw;
    height: auto;
    display: block;
  }
  .welcomeText{
    position: absolute;
    top: 12vh;
    left: 50vw;
    color:#e1b005;
  }
  .welcomeText img.logo{
    width: 30vw;
    height: auto;
    padding-bottom: 1vh;
    padding-left: 2vw;
  }
  .welcomeText h1 p{
    font-weight: 400;
    text-align: left;
  }

  .angebote{
    padding: 10vh 0 0 8.333vw;
  }


  .angebote h2{
    color:#3d405b;
  }

  #nachGeburt{
    padding-top: 6vh;
    padding-bottom: 12vh;
  }
/* uebermich.html
========================================================================== */
section.aboutME{
  display: grid;
  grid-template-columns: repeat(1, 37% 63%);
  grid-template-areas:"hallo halloText";
  padding: 15vh 8.333vw 0 8.333vw;
}

.halloText{
  align-self: center;
  padding-left: 5%;
}

img.maureenMe{
  width: 30vw;
  height: auto;
}
.urlaub{
  padding-left: 8.333vw;
  padding-top: 6vh;
  padding-bottom: 12vh
}
img.maureenSamy{
  width: 83.33vw;
  height: auto;
}

/* kontak.html
========================================================================== */
  a.kontakt{
     color:#3d405b;
   }
  a.kontakt:hover{
    color: #e1b005;
  }
  section.kontakt{
    display: grid;
    grid-template-columns: repeat(1,60% 40%);
    grid-template-areas: "kontaktBild kontaktText";
    padding: 14vh 8.33vw 6vh 8.33vw;
  }

  .kontaktText{
    padding-left: 5%;
    align-self:center;
  }

  img.maureenBaby{
    width: 50vw;
    height: auto;

  }

/* impressumUdatenschutz.html
========================================================================== */

.impress{
  padding: 15vh 8.333vw 6vh 8.333vw;
}
.datenschutz{
  padding: 0 8.333vw 6vh 8.333vw;
}
/* responsive - Tablet
========================================================================== */
@media only screen and (max-width: 1200px){
  h1{
    font-size: 2.0em;
  }
  h2{
    font-size: 1.3em;
  }
}
/* responsive - Mobil
========================================================================== */
@media only screen and (max-width: 890px){
  .welcome img.kinderwagen{
    display: none;
  }
  .welcomeText{
    position:inherit;
    color:#e1b005;
    background-color: #3d405b;
    padding: 10vh 16vw;
  }
  .welcomeName {
    text-align: center;
  }
  .welcomeText img.logo{
    width: 60vw;
    padding-left: 8vw;
  }
  .angebote{
    padding: 0 12vw;
  }
  #nachGeburt{
    padding-top: 6vh;
    padding-bottom: 6vh;
  }
  #schwangerschaft{
    padding-top: 6vh;
  }
  
  /* footer.html
========================================================================== */
footer{
  display: block;
}

ul.footerMenu{
  padding-left: 12vw;
}
.copyright{
  position:relative;
  padding-left: 12vw;
}
#res01{
  display: none;
}
#res02{
  display: block;
  position: relative;
  padding-left: 12vw;
  
}

  /* übermich.html
========================================================================== */
  img.maureenMe{
    width: 76vw;
    height: auto;
    padding-top: 15vh;
    padding-bottom: 1.5vh;
  }

  section.aboutME{
    display:block;
    padding: 0 12vw;
  }
  .halloText{
    padding: 0;
  }
  .urlaub{
    padding: 0 12vw 6vh 12vw;
  }
  img.maureenSamy{
    width: 76vw;
  }
  
/* kontak.html
========================================================================== */

section.kontakt{
 display: block;
 padding: 15vh 12vw 6vh 12vw;
}

.kontaktText{
 padding-left: 0;
}

img.maureenBaby{
  width: 76vw;
  height: auto;
  padding-bottom: 3vh;
}
footer.kontakt{
  padding-left: 12vw;
}
/*========================================================================== */
.impress{
  padding: 15vh 12vw 6vh 12vw;
}
}