Welkom graag ook opnieuw

/* =========================================================
🚆 WELKOM CAROUSEL – Homepage Hero
------------------------------------------------------------
Grotere variant van de standaard carousel (±800px).
Deze versie wordt gebruikt op de openingspagina
en mag breder zijn voor meer visuele impact.

Gebruik:
<div class="custom-carousel carousel-welkom">

INHOUD
1. Carousel container
2. Foto styling
3. Caption styling
4. Navigatie knoppen
5. Welkom titel
6. Dots navigatie
7. Klikbare slides

========================================================= */

/* =========================================================
1️⃣ Carousel container – welkom
========================================================= */

.custom-carousel.carousel-welkom{

  max-width:1000px;

  background:linear-gradient(
    to bottom,
    #0b0b0b,
    #000000
  );

  border:2px solid #f8bb19;

  border-radius:10px;

  box-shadow:
    0 0 0 1px rgba(248,187,25,0.25),
    0 8px 22px rgba(0,0,0,0.9);

}

/* =========================================================
2️⃣ Foto styling – welkom carousel
Subtiele versterking van contrast en kleur
========================================================= */

.carousel-welkom img{

  filter:
  contrast(1.05)
  saturate(1.05);

}

/* =========================================================
3️⃣ Caption – welkom carousel
------------------------------------------------------------
Geeft de tekstbalk onder de foto iets meer ruimte
waardoor de tekst rustiger en beter leesbaar wordt.

Effect:
• meer witruimte rond de tekst
• betere balans met de grotere homepage carousel
• caption oogt minder “krap”
========================================================= */

.carousel-welkom .custom-caption{

  background:rgba(0,0,0,0.75);
  color:#f8bb19;
  border-top:2px solid #f8bb19;

  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,0.9);

  padding:10px 14px;
  letter-spacing:0.3px;

  /* voorkomt dat caption de klik blokkeert */
pointer-events:none;
  
}

/* =========================================================
4️⃣ Navigatie knoppen – welkom carousel
========================================================= */

.carousel-welkom .custom-carousel-btn{

  background:rgba(0,0,0,0.85);

  border:1px solid #f8bb19;

  color:#f8bb19;

  border-radius:6px;

}

.carousel-welkom .custom-carousel-btn:hover{

  background:#111;
  color:#fff;

}

/* =========================================================
5️⃣ WELKOM TITEL – Homepage
Gecentreerde titel boven de carousel
Met subtiele hover animatie
========================================================= */

.carousel-welkom-titel{

  text-align:center;

  color:#f8bb19;

  font-size:1.6rem;

  font-weight:700;

  margin-bottom:20px;

  letter-spacing:1.5px;

  transition:all 0.3s ease;

}

/* Hover effect */

.carousel-welkom-titel:hover{

  color:#fff;

  transform:translateY(-2px);

  text-shadow:
    0 0 6px rgba(248,187,25,0.6);

}

/* =========================================================
6️⃣ 🚆 DOTS – welkom carousel
------------------------------------------------------------
Navigatiepunten onder de carousel.

• Inactieve dots: neutraal grijs
• Actieve dot: treinspotten goud
========================================================= */

.carousel-welkom .custom-carousel-dots span{

  width:10px;
  height:10px;

  margin:0 4px;

  border-radius:50%;

  background:#999;   /* neutrale kleur */
  opacity:0.6;

}

.carousel-welkom .custom-carousel-dots span.active{

  background:#f8bb19;  /* goud */
  opacity:1;

}

/* =========================================================
7️⃣ Klikbare slides – welkom carousel
------------------------------------------------------------
Zorgt ervoor dat de volledige slide klikbaar is wanneer
de afbeelding in een <a> link staat.

Voordelen:
• hele carousel slide is klikbaar
• caption en foto reageren samen
• voorkomt onderstreping van links

Gebruikt in HTML:

<div class="custom-carousel-item">
  <a href="link-naar-artikel">
    <img src="...">
    <div class="custom-caption">tekst</div>
  </a>
</div>
========================================================= */

/* =========================================================
📸 Foto Hover Zoom – welkom carousel
------------------------------------------------------------
Geeft een duidelijke maar elegante zoom wanneer de muis
over de carousel gaat.

Effect:
• foto zoomt licht in
• benadrukt dat de slide klikbaar is
• geeft een dynamische fotografie uitstraling
========================================================= */

.carousel-welkom img{

  transition:transform 0.6s ease;

}

.carousel-welkom a:hover img{

  transform:scale(1.08);

}