*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Inter', sans-serif;
background:#e9e5dd;
}





.hero{
    background:url("Assets/pictures/Bildkomposition.jpg") center/cover no-repeat;

    /* Parallax */
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
}



/* SERVICES */
.services{
background:#e9e5dd;
padding:90px 10%;
text-align:center;
}
.services h2{
 font-size:36px;
font-weight:500;
line-height:1.2;
margin-bottom:20px;
font-family:'Playfair Display', serif;
font-style: italic;
}
.service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}
.service-card{
transition:0.4s;
}
.service-card:hover{
transform:translateY(-10px);
}
.service-card img{
width:100%;
border-radius:20px;
}

/* BOOK + GALLERY */
.book-gallery{
display:grid;
grid-template-columns:1fr 1fr;
padding:120px 10%;
align-items:center;
gap:80px;
}
.split-text h3{
font-family:'Playfair Display', serif;
font-size:28px;
margin-bottom:20px;
}


/* =========================
   CAROUSEL CONTAINER
========================= */
.carousel-container{
    position:relative;
    width:600px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Sichtbarer Bereich */
.carousel{
    width:600px;
    height:350px;
    overflow:hidden;
    border-radius:25px;
}

/* Bilderreihe */
.carousel-track{
    display:flex;
    transition:transform 0.5s ease-in-out;
}

/* Bilder */
.carousel-track img{
    width:600px;
    height:350px;
    object-fit:cover;
    flex-shrink:0;
    user-select:none;
    pointer-events:none;
}

/* =========================
   APPLE STYLE BUTTONS
========================= */
.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:55px;
    height:55px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,0.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    color:white;
    font-size:26px;
    font-weight:300;

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

    cursor:pointer;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.2),
        inset 0 1px 1px rgba(255,255,255,0.25);

    transition:0.25s;
    z-index:10;
}

/* Hover */
.arrow:hover{
    transform:translateY(-50%) scale(1.08);
    background:rgba(255,255,255,0.28);
}

/* Klick */
.arrow:active{
    transform:translateY(-50%) scale(0.96);
}

/* Position */
.left{
    left:20px;
}

.right{
    right:20px;
}
/* FEATURED */
.featured{
padding:100px 10%;
}
.featured-header h2{
display:flex;
justify-content:center;
align-items:center;
 font-size:36px;
font-weight:500;
line-height:1.2;
margin-bottom:20px;
font-family:'Playfair Display', serif;
font-style: italic;
}


.product-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
         

}
.product-grid img{
width:100%;
transition:0.4s;
border-radius: 20px;
}
.product-grid img:hover{
transform:scale(1.05);
}


/* =========================
   TABLET (max 992px)
========================= */
@media (max-width: 992px) {

  .hero {
    background-attachment: scroll;
    height: 60vh;
  }

  .hero-title{
    font-size:50px;
letter-spacing:3px;
  }

  /* SERVICES */
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* BOOK + GALLERY */
  .book-gallery {
    grid-template-columns: 1fr;
    padding: 90px 8%;
    gap: 50px;
  }

  /* CAROUSEL */
  .carousel-container,
  .carousel {
    width: 100%;
    max-width: 600px;
  }

  .carousel {
    height: 320px;
  }

  .carousel-track img {
    width: 100%;
    height: 320px;
  }

  /* FEATURED */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================
   MOBILE (max 600px)
========================= */
@media (max-width: 600px) {

  /* SERVICES */
  .service-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .services {
    padding: 70px 6%;
  }

  /* BOOK + GALLERY */
  .book-gallery {
    padding: 70px 6%;
    gap: 40px;
  }

  /* CAROUSEL */
  .carousel {
    height: 250px;
  }

  .carousel-track img {
    height: 250px;
  }

  .arrow {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  .left {
    left: 10px;
  }

  .right {
    right: 10px;
  }

  /* FEATURED */
  .product-grid {
    grid-template-columns: 1fr;
  }

  .featured {
    padding: 70px 6%;
  }

  .featured-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}