/*
 Theme Name:   Mato Child
 Template:     mato
 Version:      1.1
*/

/* --- Pfeil-Variante --- */
body[data-scroll-icon="arrow"] .mouse-button {
  background: none !important;
  width: auto !important;
  height: auto !important;
  bottom: 80px !important;
}
body[data-scroll-icon="arrow"] .mouse-button::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f103"; /* angle-double-down */
  font-size: 4rem;
  color: #ffffff;
  display: inline-block;
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* --- Maus-Variante (größer) --- */
body[data-scroll-icon="mouse"] .mouse-button {
  transform: scale(2); /* doppelt so groß */
}

/* Hoverbox-Container vorbereiten */
.vc-hoverbox-wrapper .vc-hoverbox-front .vc-hoverbox-front-inner {
  position: relative !important;   /* Referenz für h2 */
  display: block !important;       /* Flexbox entfernen */
  height: 100% !important;
}

/* Name als Balken unten über volle Breite */
.vc-hoverbox-wrapper .vc-hoverbox-front .vc-hoverbox-front-inner h2 {
  position: absolute !important;
  bottom: 15px !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  font-size: 1.4em !important;
  color: #fff !important;
  background: rgba(0,0,0,0.55) !important;
  box-sizing: border-box !important;
  text-align: left !important;
  line-height: normal !important;   /* verhindert vertikale Zentrierung */
  display: block !important;        /* alte Flex-/Inline-Eigenschaften überschreiben */
}


/* Optional: etwas kleinere Schrift auf sehr kleinen Displays */
@media (max-width: 480px) {
  .vc-hoverbox-front-inner h2 {
    font-size: 1.1em;
  }
}