/* ==========================================================================
   HÖHER Blocks: gemeinsame Grundlagen aller Blöcke dieses Plugins.

   Hintergrundfarbe und Hintergrundbild folgen exakt dem Muster der vorhandenen
   Theme-Blöcke: --bg-color auf der Sektion, --bg-image und --bg-image-mobile
   über ein :before. Dazu die Abstands-Optionen aus dem ACF-Feld.
   ========================================================================== */

.hb-section{position:relative}

.hb-section:before{
  background:var(--bg-image);
  background-repeat:no-repeat;
  background-size:cover;
  content:"";
  height:100%;
  min-width:1400px;
  position:absolute;
  right:0;
  top:0;
  width:100%;
  pointer-events:none;
}

.hb-section > .container{position:relative;z-index:1}

@media only screen and (max-width:767px){
  .hb-section:before{
    background:var(--bg-image-mobile);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;
    bottom:0;
    left:0;
    min-width:100%;
    right:auto;
    top:auto;
    width:100%;
  }
}

/* Abstands-Optionen: Standard, Kein Abstand, Mehr, Viel */
.hb-sp-none{padding-top:0 !important}
.hb-sp-more{padding-top:clamp(80px,10vw,132px) !important}
.hb-sp-max{padding-top:clamp(104px,13vw,168px) !important}
.hb-spb-none{padding-bottom:0 !important}
.hb-spb-more{padding-bottom:clamp(80px,10vw,132px) !important}
.hb-spb-max{padding-bottom:clamp(104px,13vw,168px) !important}