/* =====================================================
   HERO KARUSSELL (Hintergrund-Slider)
   ===================================================== */
.hero__carousel {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: -1; 
}

.hero__carousel-track {
   display: flex;
   width: 100%;
   height: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
   scroll-behavior: smooth;
}

.hero__carousel-track::-webkit-scrollbar {
   display: none;
}

.hero__carousel-slide {
   flex: 0 0 100%;
   height: 100%;
   scroll-snap-align: center;
}

.hero__carousel-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Navigations-Buttons im Hero */
.hero__btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   background: var(--c-btn-dark, rgba(27, 27, 27, 0.85));
   color: #fff;
   border-radius: 50%;
   display: grid;
   place-items: center;
   transition: background 0.25s var(--ease);
   z-index: 10;
}

.hero__btn:hover {
   background: var(--c-accent);
}

.hero__btn--prev { left: 2vw; }
.hero__btn--next { right: 2vw; }

/* =====================================================
   CONTENT OVERLAP (Inhalt zieht sich über den Hero)
   ===================================================== */
.content-overlap {
   position: relative;
   z-index: 10;
   margin-top: -40vh; 
   padding: 120px 0 60px 0; /* Etwas mehr Padding oben, damit der Text nicht sofort im transparenten Teil klebt */
   
   /* Startet oben transparent und wird nach exakt 300px zu Tiefschwarz */
   background: linear-gradient(to bottom, transparent 0%, #000000 300px);
}

/* =====================================================
   KATEGORIE HEADER (Textbereich)
   ===================================================== */
.category-slider {
   padding: 0 4vw;
   margin-bottom: 40px;
}

.category-slider__header {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.category-slider__title {
   font-family: var(--ff-display);
   font-size: clamp(32px, 5vw, 56px);
   text-transform: uppercase;
   letter-spacing: -0.02em;
   margin: 0;
   color: var(--c-fg);
}

.category-slider__desc {
   font-family: var(--ff-mono);
   font-size: 14px;
   color: rgba(238, 234, 224, 0.6); 
   max-width: 600px;
   line-height: 1.5;
   margin: 0;
}

/* =====================================================
   3-KARTEN GRID
   ===================================================== */
.card-grid-section {
   padding: 0 4vw; 
   width: 100%;
}

.card-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px; 
}

/* =====================================================
   MEDIA QUERIES (Gebündelt)
   ===================================================== */
@media (max-width: 900px) {
   /* Auf Mobile wird das Karussell mit dem Finger gewischt */
   .hero__btn {
      display: none;
   }
   
   /* Karten auf Handys/Tablets untereinander stapeln */
   .card-grid {
      grid-template-columns: 1fr;
      gap: 32px;
   }
}