/* ZAN Hero Buttons v1.5.2 – unabhängig von den Standard-Button-Styles des Themes. */
/* Das JS berechnet die sichtbare Größe von Bild/Column/Row und richtet
   die transparente Overlay-Fläche exakt daran aus. */
.zan-hero { position: relative !important; }
.zan-actions-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 50;
  pointer-events: none;
}


.zan-actions {
  --za-dir: var(--za-phone-dir);
  --za-top: var(--za-phone-top);
  --za-bottom: var(--za-phone-bottom);
  --za-left: var(--za-phone-left);
  --za-right: var(--za-phone-right);
  --za-transform: var(--za-phone-transform);
  --za-root-width: var(--za-phone-root-width);
  --za-button-width: var(--za-phone-button-width);
  --za-button-flex: var(--za-phone-button-flex);
  --za-height: var(--za-phone-height);
  --za-gap: var(--za-phone-gap);
  --za-font: var(--za-phone-font);
  --za-icon: var(--za-phone-icon);
  --za-icon-layout: var(--za-phone-icon-layout);
  box-sizing: border-box;
  display: flex;
  position: relative;
  flex-direction: var(--za-dir);
  align-items: stretch;
  gap: var(--za-gap);
  width: var(--za-root-width);
  max-width: none;
  z-index: 50;
  pointer-events: none;
}

.zan-actions.zan-actions--mounted {
  position: absolute;
  top: var(--za-top);
  bottom: var(--za-bottom);
  left: var(--za-left);
  right: var(--za-right);
  transform: var(--za-transform);
}

.zan-actions .zan-action,
.zan-actions .zan-action:link,
.zan-actions .zan-action:visited {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: var(--za-icon-layout);
  flex: var(--za-button-flex);
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: var(--za-button-width);
  min-width: 0;
  min-height: var(--za-height);
  padding: 10px 9px;
  border: 0;
  border-radius: var(--za-radius);
  background: var(--za-bg);
  color: var(--za-txt) !important;
  font-family: inherit;
  font-size: var(--za-action-font, var(--za-font));
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: 0;
  text-decoration: none !important;
  text-align: center;
  box-shadow: none;
  pointer-events: auto;
  transition: none !important;
  animation: none !important;
  -webkit-tap-highlight-color: transparent;
}

.zan-actions a.zan-action:hover,
.zan-actions a.zan-action:focus-visible {
  background: var(--za-hover);
  color: var(--za-txt) !important;
  transform: none !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .14);
}

.zan-actions a.zan-action:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.zan-actions .zan-action__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--za-action-icon, var(--za-icon));
  height: var(--za-action-icon, var(--za-icon));
  color: var(--za-icon-color);
  line-height: 1;
}

.zan-actions .zan-action__icon svg,
.zan-actions .zan-action__icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.zan-actions .zan-action__label {
  display: block;
  color: inherit;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
  margin: 0;
  padding: 0;
}

/* Overlay kann ohne manuell gesetzte zan-hero-Klasse in WPBakery-Row sitzen. */
.zan-actions-host { position: relative !important; }
.zan-actions-anchor { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.zan-actions.zan-actions--mounted { margin: 0 !important; padding: 0 !important; }
/* Gegen Uncode-/Theme-Flexvorgaben: gleiche Breite bei horizontaler Vollbreite. */
.zan-actions .zan-action { max-width: none; }

/* Einheitliches Hero-Element: Bild und Buttons teilen sich einen Bezugsrahmen. */
.zan-hero-combined { position:relative!important; display:block; width:100%; overflow:hidden; isolation:isolate; border-radius:var(--zh-radius, 0px); min-height:120px; padding:0!important; margin:0!important; box-sizing:border-box; }
.zan-hero-combined__picture, .zan-hero-combined__placeholder { position:absolute; inset:0; display:block; width:100%; height:100%; z-index:0; }
.zan-hero-combined__placeholder { background:#c9bea6; }
.zan-hero-combined__image { display:block; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:var(--zh-fit,cover); object-position:var(--zh-position,center center); margin:0!important; border-radius:0!important; }
.zan-hero-combined .zan-actions-anchor { z-index:2; }
.zan-hero-combined > .zan-actions:not(.zan-actions--mounted) { position:absolute; z-index:2; }

/* Keine Bewegungsanimationen, auch nicht durch Theme-Styles. */
.zan-hero-combined .zan-actions,
.zan-hero-combined .zan-action,
.zan-actions .zan-action { animation: none !important; transition: none !important; }