* {
            margin: 0;
		   padding: 0;
        }
.hero {
  height: 50vh;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.hero img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
main { display: block; }
nav{
  position: fixed;
  width: 50px;
  bottom: 5%;
  left: 5%;
  transition: all 0.3s linear;
}

nav li{
  height: 50px;
  position:relative;
  border-radius: 5px;
list-style: none;
padding: 10px;
}

nav li a{
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  transition: all .3s linear;
  transition: background-color 2s easeout;
  background: transparent;
}


ul li:hover a span{
  color: white;
}


nav li a:hover{
 background: #4267B2;
}


.imagelogo {
float: left;
background-color: transparent;
border-radius: 5px;
  width: 32px;
  height:100%;
padding-right: 20px;
padding-top: 5px;
  background-image: url("/files/public/esv_logo.svg");
}

.imagelogo:hover {
background-color: lightgrey;
}

.imagelogoinstagram {
float: left;
background-color: transparent;
border-radius: 10px;
  width: 132px;
  height:132px;
  background-image: url("/files/public/instagram_logo.svg");
}

.imagelogoinstagram:hover {
background-color: lightgrey;
}

/* ---- Mobil ---- */
@media (max-width: 700px) {
  /* Navigation nicht mehr ueber dem Inhalt schweben lassen, sondern als Leiste oben */
  nav {
    position: static;
    width: auto;
    display: flex;
    justify-content: center;
    padding: 10px 0 0;
  }
  nav ul { display: flex; gap: 12px; align-items: center; }
  nav li { height: auto; padding: 4px; }
  nav li a { height: auto; }
  .imagelogo, .imagelogoinstagram { float: none; width: 44px; height: 44px; padding: 0; background-size: contain; background-repeat: no-repeat; background-position: center; }
  .hero { height: auto; min-height: 0; padding: 8px 16px 16px; }
  .hero img { max-height: 160px; }
}