body{
    margin: 0;
    padding: 0;}




.Logo{
  text-align:center;
  background-color:#F2CEE5;
  padding-top: 10px;}




.navigation { 
    display: flex; 
    text-align: center;
    background-color:#F2CEE5;
    justify-content: center; 
    margin: 0;
    padding: 0;} 
  
  .navigation li { 
    list-style-type: none;} 
  
  .navigation a { 
    padding: 15px; 
    display: inline-block; 
    color: white; 
    text-decoration: none;} 
  



  main{
    line-height: 600px;}
  


  
 footer{
background-color: #F2CEE5;
margin: 0;
color: aliceblue;
text-align: center;
padding: 20px;
font-size:x-small;
list-style-type: none;}




.hero-images {
        display: flex;
        gap: 5px;
        overflow-x: hidden;
        padding: 20px;
       
        justify-content: space-around;
        flex-wrap: wrap;
        width: 100%;}
     
      .hero-image {
        width: 130px;
        height: 400px;
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        will-change: transform;}
     
      .hero-image:hover {
        transform: scale(1.3);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        z-index: 10;}
 
      .hero-images {
        overflow: visible;}
 
    

        
   main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  min-height: 60vh; /* passt sich dem Layout an */}

.carousel {
  position: absolute;
  width: 600px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;}

.carousel-track img {
  width: 600px;
  height: 400px;
  object-fit: cover;}

button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
  font-size: 24px;
  z-index: 1;}

button.prev { left: 10px; }
button.next { right: 10px; }