.header-nav-main .nav > li > a:hover,
.header-nav-main .nav > li > a:focus {
    color: #ff6600 !important; /* Rulido oranje */
}


/* Vierkant vlak gevuld met show.jpg dat zacht naar beneden schuift */
.ratio.ratio-1x1 .pan-bg{
  width: 100%;
  height: 100%;
  background-size: cover;           /* netjes vullen, geen randen */
  background-position: 50% 0%;      /* start bovenaan, gecentreerd */
  animation: panDown 24s linear infinite alternate;
  will-change: background-position; /* smooth, geen haperingen */
  border-radius: inherit;
}

@keyframes panDown{
  0%   { background-position: 50% 0%;   }
  100% { background-position: 50% 100%; }
}

/* Als iemand ‘reduced motion’ heeft ingesteld: animatie uit */
@media (prefers-reduced-motion: reduce){
  .ratio.ratio-1x1 .pan-bg{ animation: none; }
}

/* Kleine responsieve tweak zodat overlay niet buiten beeld valt op mobiel */
@media (max-width: 992px){
  [style*="right: -17%"]{ right: 0% !important; bottom: -32px !important; }
}

/* Basis achtergrond voor thumbs */
.thumb-pan {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Verticale “heen-en-weer” pan voor lange beelden */
.pan-vert {
  background-position: 50% 0%;
  animation: bg-pan-vert 18s ease-in-out infinite alternate;
  will-change: background-position;
}

/* Pauzeer animatie bij hover (optioneel, voelt rustiger) */
.pan-vert:hover {
  animation-play-state: paused;
}

@keyframes bg-pan-vert {
  0%   { background-position: 50% 0%;   }
  100% { background-position: 50% 100%; }
}

/* Respecteer voorkeuren voor minder beweging */
@media (prefers-reduced-motion: reduce) {
  .pan-vert { animation: none !important; }
}
.live-led{
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #28a745;
  box-shadow: 0 0 6px rgba(40,167,69,.8);
  animation: live-blink 2.2s ease-in-out infinite;
  margin-right: 20px;   /* ← ruimte rechts */
  vertical-align: middle;
}


/* Zachte pulsende ring */
.live-led::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(40,167,69,.35);
  opacity: 0;
  animation: live-pulse 2.2s ease-out infinite;
}

@keyframes live-blink {
  0%, 70%, 100% { opacity: .95; box-shadow: 0 0 6px rgba(40,167,69,.8); }
  80% { opacity: 1; box-shadow: 0 0 10px rgba(40,167,69,1); }
}

@keyframes live-pulse {
  0%   { transform: scale(.6); opacity: .6; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Respecteer systeeminstelling ‘minder beweging’ */
@media (prefers-reduced-motion: reduce) {
  .live-led, .live-led::after { animation: none !important; }
}
/* Reusable pill button */
.cta-pill{
  --bg:#ff8a00;        /* bovenkant */
  --bg2:#ff6f00;       /* onderkant */
  --text:#fff;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  height: 45px;
  padding:.9rem 1.6rem;
  border-radius:9999px;
  color:var(--text);
  font-weight:700;
  line-height:1;
  text-decoration:none;
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 -4px 0 rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cta-pill .arrow{ transition: transform .18s ease; }

.cta-pill:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 32px rgba(0,0,0,.22),
    inset 0 -4px 0 rgba(0,0,0,.12);
  filter:brightness(1.02);
}
.cta-pill:hover .arrow{ transform:translateX(4px); }

.cta-pill:active{
  transform:translateY(0);
  box-shadow:
    0 6px 18px rgba(0,0,0,.20),
    inset 0 -2px 0 rgba(0,0,0,.16);
}

.cta-pill:focus-visible{
  outline:3px solid rgba(255,138,0,.35);
  outline-offset:3px;
}

.cta-pill--lg{ font-size:1.15rem; padding:1.05rem 1.9rem; }

/* Donkere modus (optioneel) */
@media (prefers-color-scheme: dark){
  .cta-pill{ box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.2); }
}