/*
 * Transiënt Groep – v7.6 – uniforme hero-elementen.
 * Maten zijn afgeleid van de homepage-hero en schalen mee met het scherm.
 */

/* Scroll-aanduiding linksonder: dunne gouden lijn met tekst */
.tg-hf-scroll{
  position:absolute !important;
  left:clamp(20px,2.4vw,64px) !important;
  right:auto !important;
  top:auto !important;
  bottom:clamp(28px,5.5vh,70px) !important;
  z-index:20 !important;
  display:flex !important;
  align-items:stretch !important;
  height:clamp(40px,4.6vh,56px) !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  color:rgba(255,255,255,.86) !important;
  opacity:1 !important;
  transform:none !important;
  cursor:pointer;
}
.tg-hf-scroll__line{
  display:block;
  flex:0 0 1px;
  width:1px;
  height:100%;
  background:rgba(201,162,75,.74);
}
.tg-hf-scroll__line{position:relative;}
.tg-hf-scroll__line::after{
  content:"";
  position:absolute;
  left:-3px;
  bottom:-1px;
  width:6px;
  height:6px;
  border-right:1px solid rgba(201,162,75,.74);
  border-bottom:1px solid rgba(201,162,75,.74);
  transform:rotate(45deg);
}
.tg-hf-scroll__text{
  align-self:center;
  margin-left:14px;
  transform:translateY(4px);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:10px;
  font-weight:600;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color:inherit;
  transition:color .25s ease;
}
.tg-hf-scroll:hover .tg-hf-scroll__text,
.tg-hf-scroll:focus-visible .tg-hf-scroll__text{color:#fff;}

/* Ronde knop rechtsonder met gouden bliksem */
.tg-hf-bolt{
  position:absolute !important;
  right:clamp(24px,3.2vw,96px) !important;
  left:auto !important;
  top:auto !important;
  bottom:clamp(24px,5vh,64px) !important;
  z-index:20 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:clamp(40px,2.4vw,54px) !important;
  height:clamp(40px,2.4vw,54px) !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#C9A24B !important;
  opacity:1 !important;
  transform:none !important;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .25s ease, background-color .25s ease;
}
.tg-hf-bolt:hover,
.tg-hf-bolt:focus-visible{
  border-color:rgba(201,162,75,.85) !important;
  background:rgba(255,255,255,.04) !important;
  outline:none;
}
.tg-hf-bolt svg{display:block;width:12px;height:8px;fill:currentColor;}

/* Een verkeerd geplaatste, oorspronkelijke scroll-aanduiding */
[data-tg-hf-hidden="1"]{display:none !important;}

@media (max-width:767px){
  .tg-hf-scroll{left:20px !important;bottom:26px !important;height:40px !important;}
  .tg-hf-bolt{right:20px !important;bottom:22px !important;width:40px !important;height:40px !important;}
}
@media (prefers-reduced-motion:reduce){
  .tg-hf-scroll__text,.tg-hf-bolt{transition:none;}
}

/* v8.0.3 – de Nederlandse scroll-tekst is langer; op smalle telefoons mag hij over twee regels
   lopen, zodat hij de ronde knop rechtsonder niet raakt. */
@media (max-width:480px){
  .tg-hf-scroll__text,
  .home-scroll > span{
    white-space:normal;
    max-width:14em;
    line-height:1.45;
  }
}